/* ==========================================================================
   /npm-package — Mono GetIllustrations redesign (2026-06-10)

   Built on top of mono-getillustrations.css (loaded first on this page):
   tokens (--mono-*) + components (.mono-btn, .mono-card, .mono-sep,
   .mono-reveal, grids). Only page-specific composition lives here (.np-*).

   Developer-docs voice: terminal-dark code blocks (the ONE place ink panels
   dominate), JetBrains Mono for code, bordered container boxes only — never
   full-bleed color bands. Syntax tint stays inside the Mono palette:
   keys = white, strings = lime, punctuation = dimmed white.
   ========================================================================== */

.np { background: var(--mono-white); }

/* Centered section heads (homepage pattern) */
.np .mono-section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* .mono-lead ships margin:0 — give it the eyebrow→h2→lead cascade gap */
.np .mono-section-head .mono-lead {
    margin: 14px auto 0;
    max-width: 64ch;
}

/* CTA anchors carry the `btn` class purely to escape the global
   a:not(.btn):hover { color:#454545 !important } rule in site.css.
   Visuals come from .mono-btn / .np-* — neutralize Bootstrap .btn extras. */
.np a.btn { text-decoration: none; }
.np a.btn:focus,
.np a.btn.focus { box-shadow: none; outline: 2px solid var(--mono-ink); outline-offset: 2px; }

/* Inline text links (requirements, client cards) — ink + lime underline */
.np-link-inline,
.np-clients .mono-card p a,
.np-steps__item p a {
    color: var(--mono-ink);
    font-weight: var(--mono-w-semibold);
    text-decoration: none;
    border-bottom: 2px solid var(--mono-lime);
    padding-bottom: 1px;
}

/* Inline filename chips (`claude_desktop_config.json` etc.) */
.np-config__head code {
    font-family: var(--mono-font-mono);
    font-size: 0.85em;
    background: var(--mono-gray-100);
    color: var(--mono-ink);
    padding: 2px 7px;
    border-radius: 6px;
}

/* ==========================================================================
   HERO — package pill · H1 · pitch · install command terminal pill
   ========================================================================== */
.np-hero { padding: 72px 0 8px; text-align: center; }

.np-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--mono-fs-sm);
    font-weight: var(--mono-w-medium);
    color: var(--mono-gray-700);
    background: var(--mono-surface);
    border: 1px solid var(--mono-border);
    padding: 7px 16px;
    border-radius: var(--mono-radius-pill);
    box-shadow: var(--mono-shadow-xs);
    margin-bottom: 28px;
}
.np-hero__pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mono-lime);
    flex-shrink: 0;
}
.np-hero__pill strong {
    font-family: var(--mono-font-mono);
    font-weight: var(--mono-w-semibold);
    font-size: 0.9em;
    color: var(--mono-ink);
}

.np-hero__h1 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-display);
    font-weight: var(--mono-w-extrabold);
    line-height: var(--mono-lh-display);
    letter-spacing: var(--mono-track-display);
    color: var(--mono-ink);
    margin: 0 auto;
    max-width: 18ch;
}

.np-hero__sub {
    font-size: var(--mono-fs-lead);
    font-weight: var(--mono-w-normal);
    line-height: var(--mono-lh-body);
    letter-spacing: var(--mono-track-body);
    color: var(--mono-text-muted);
    margin: 20px auto 0;
    max-width: 58ch;
}

/* The install command — dark terminal pill, copy-able */
.np-install {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    background: var(--mono-ink);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--mono-radius-pill);
    padding: 10px 10px 10px 26px;
    box-shadow: var(--mono-shadow-panel);
    max-width: 100%;
}
.np-install__prompt {
    font-family: var(--mono-font-mono);
    font-weight: var(--mono-w-bold);
    color: var(--mono-lime);
    flex-shrink: 0;
    user-select: none;
}
.np-install code {
    font-family: var(--mono-font-mono);
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--mono-white);
    white-space: nowrap;
}
.np-install__copy {
    height: 38px;
    padding: 0 18px;
    font-family: var(--mono-font-display);
    font-size: 0.8125rem;
    font-weight: var(--mono-w-bold);
    color: var(--mono-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--mono-radius-pill);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--mono-transition-button);
}
.np-install__copy:hover {
    background: var(--mono-lime);
    color: var(--mono-ink);
    border-color: var(--mono-lime);
}

/* Trust strip under the install pill */
.np-hero__meta {
    margin-top: 28px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.np-hero__meta .mono-pill { font-size: 0.75rem; padding: 6px 13px; }
.np-hero__meta .mono-check { width: 16px; height: 16px; font-size: 10px; }

/* ==========================================================================
   HOW IT WORKS — split layout: left section head, right prose
   ========================================================================== */
.np-how {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--mono-space-12);
    align-items: start;
    max-width: var(--mono-container-narrow);
    margin: 0 auto;
}
.np-how .mono-section-head {
    text-align: left;
    margin: 0;
}
.np-how .mono-section-head .mono-lead { margin: 14px 0 0; }
.np-how__copy p {
    font-size: var(--mono-fs-lead);
    line-height: 1.7;
    letter-spacing: var(--mono-track-body);
    color: var(--mono-gray-600);
    margin: 0 0 18px;
}
.np-how__copy p:last-child { margin-bottom: 0; }

/* ==========================================================================
   QUICK SETUP — 3 client cards, each ending in a dark terminal JSON block
   ========================================================================== */
.np-configs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mono-space-5);
    align-items: stretch;
}
.np-config {
    display: flex;
    flex-direction: column;
    background: var(--mono-surface);
    border: 1px solid var(--mono-border);
    border-radius: var(--mono-radius-lg);
    overflow: hidden;
    transition: var(--mono-transition-card);
}
.np-config:hover {
    transform: translateY(-3px);
    box-shadow: var(--mono-shadow-hover);
}
.np-config__head { padding: 22px 24px 0; }
.np-config__head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h3);
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.015em;
    color: var(--mono-ink);
    margin: 0 0 10px;
}
.np-config__head h3 .badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: var(--mono-w-extrabold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--mono-lime);
    color: var(--mono-ink);
    padding: 3px 9px;
    border-radius: var(--mono-radius-pill);
}
.np-config__head p {
    font-size: var(--mono-fs-sm);
    line-height: 1.55;
    color: var(--mono-text-muted);
    margin: 0 0 16px;
}

/* The terminal block — ink panel, JetBrains Mono, palette-only syntax tint */
.np-config pre {
    margin: 0;
    margin-top: auto;
    background: var(--mono-ink);
    color: rgba(255, 255, 255, 0.55);  /* punctuation / structure, dimmed */
    font-family: var(--mono-font-mono);
    font-size: 0.76rem;
    line-height: 1.65;
    padding: 20px 22px;
    overflow-x: auto;
}
.np-config pre .key { color: var(--mono-white); }
.np-config pre .str { color: var(--mono-lime); }
.np-config pre .comment { color: rgba(255, 255, 255, 0.38); }

/* ==========================================================================
   25 BUILT-IN TOOLS — one bordered panel, 3 hairline-divided columns
   ========================================================================== */
.np-tools {
    background: var(--mono-surface);
    border: 1px solid var(--mono-border);
    border-radius: var(--mono-radius-2xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.np-tools__col {
    padding: 28px;
    border-right: 1px solid var(--mono-border);
    min-width: 0;
}
.np-tools__col:last-child { border-right: 0; }
.np-tools__col h3 {
    font-family: var(--mono-font-display);
    font-size: 1rem;
    font-weight: var(--mono-w-extrabold);
    letter-spacing: -0.015em;
    color: var(--mono-ink);
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mono-lime);
}
.np-tools__col ul { list-style: none; margin: 0; padding: 0; }
.np-tools__col li {
    padding: 9px 0;
    border-bottom: 1px solid var(--mono-gray-100);
    font-size: var(--mono-fs-sm);
    line-height: 1.55;
    overflow-wrap: break-word;
}
.np-tools__col li:last-child { border-bottom: 0; padding-bottom: 0; }
.np-tools__col li strong {
    font-family: var(--mono-font-mono);
    font-weight: var(--mono-w-semibold);
    font-size: 0.78rem;
    color: var(--mono-ink);
}
.np-tools__col li span { color: var(--mono-text-muted); }

/* ==========================================================================
   WORKS WITH ANY MCP CLIENT — 3 accent-hover cards
   ========================================================================== */
.np-clients .mono-card { padding: var(--mono-space-6); }
.np-clients .mono-card h3 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h3);
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.015em;
    color: var(--mono-ink);
    margin: 0 0 10px;
}
.np-clients .mono-card p {
    font-size: var(--mono-fs-body);
    line-height: var(--mono-lh-body);
    letter-spacing: var(--mono-track-body);
    color: var(--mono-text-muted);
    margin: 0;
}

/* ==========================================================================
   WHAT YOU CAN DO — example prompts as tinted quote panels (lime left edge)
   ========================================================================== */
.np-prompts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mono-space-5);
    max-width: var(--mono-container-narrow);
    margin: 0 auto;
}
.np-prompt {
    background: var(--mono-surface-subtle);
    border: 1px solid var(--mono-border);
    border-left: 3px solid var(--mono-lime);
    border-radius: var(--mono-radius-lg);
    padding: 26px 28px;
}
.np-prompt h3 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h3);
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.015em;
    color: var(--mono-ink);
    margin: 0 0 10px;
}
.np-prompt p {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: var(--mono-track-body);
    color: var(--mono-gray-700);
    margin: 0;
}

/* ==========================================================================
   REQUIREMENTS — open numbered flow with connecting hairline (no boxes)
   ========================================================================== */
.np-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    padding-top: 8px;
}
.np-steps::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--mono-border);
}
.np-steps__item { position: relative; text-align: center; padding: 0 8px; }
.np-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mono-lime);
    color: var(--mono-ink);
    font-weight: var(--mono-w-extrabold);
    font-size: 0.9375rem;
    margin: 0 auto 18px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 8px var(--mono-white);
}
.np-steps__item h3 {
    font-family: var(--mono-font-display);
    font-size: 1.0625rem;
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.015em;
    color: var(--mono-ink);
    margin: 0 0 8px;
}
.np-steps__item p {
    font-size: var(--mono-fs-sm);
    line-height: 1.6;
    color: var(--mono-text-muted);
    margin: 0;
    max-width: 34ch;
    margin-inline: auto;
}

/* ==========================================================================
   FINAL CTA — dark ink statement panel (container box, never full-bleed)
   ========================================================================== */
.np-final {
    background: var(--mono-ink);
    color: var(--mono-white);
    border-radius: var(--mono-radius-2xl);
    padding: 72px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.np-final__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.np-final__h2 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h2-lg);
    font-weight: var(--mono-w-extrabold);
    letter-spacing: var(--mono-track-display);
    line-height: 1.04;
    color: var(--mono-white);
    margin: 0 0 16px;
}
.np-final__sub {
    font-size: var(--mono-fs-lead);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 32px;
    max-width: 52ch;
    line-height: 1.55;
}
.np-final__row {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.np-final__trust {
    margin-top: 24px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: var(--mono-track-body);
}

/* ==========================================================================
   RESPONSIVE — mono breakpoints: 1100 / 980 / 720 / 560
   ========================================================================== */
@media (max-width: 1100px) {
    .np-configs { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 980px) {
    .np-how { grid-template-columns: 1fr; gap: var(--mono-space-6); }
    .np-tools { grid-template-columns: 1fr; }
    .np-tools__col {
        border-right: 0;
        border-bottom: 1px solid var(--mono-border);
    }
    .np-tools__col:last-child { border-bottom: 0; }
    .np-steps { grid-template-columns: 1fr; gap: 28px; }
    .np-steps::before { display: none; }
}
@media (max-width: 720px) {
    .np-hero { padding: 48px 0 4px; }
    .np-prompts { grid-template-columns: 1fr; }
    .np-install {
        border-radius: var(--mono-radius-xl);
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .np-install code { font-size: 0.875rem; white-space: normal; word-break: break-all; }
    .np-final { padding: 52px 24px; border-radius: var(--mono-radius-xl); }
    .np-final__row { width: 100%; flex-direction: column; align-items: center; }
    .np-final__row .mono-btn { width: 100%; max-width: 360px; }
}
@media (max-width: 560px) {
    .np-hero__meta { gap: 8px; }
    .np-config pre { font-size: 0.7rem; padding: 16px 16px; }
}