/* =============================================================
   nexus.css — NEXUS product page
   Built on the same design system as solutions.html:
   Inter + Source Sans Pro, navy #0f172a, slate body, white cards.
   Nexus signature accent: cyan #06b6d4 → emerald #10b981.
   Exceptions/breaks: amber #F5A623, red #dc2626.
   All selectors prefixed .nx- to avoid collisions with main.css /
   components.css. Only .hero, .container, .btn, .cta-* and
   .section-title are borrowed from the global system.
   ============================================================= */

:root {
    --navbar-h: 72px;
    --nx-cyan: #06b6d4;
    --nx-cyan-ink: #0891b2;
    --nx-emerald: #10b981;
    --nx-emerald-ink: #059669;
    --nx-amber: #F5A623;      /* brand gold — exceptions, SLA, warnings */
    --nx-amber-ink: #C07E12;  /* darker gold, for gold text on light */
    --nx-red: #ef4444;
    --nx-red-ink: #dc2626;
    --nx-navy: #0f172a;
    --nx-slate: #475569;
    --nx-muted: #64748b;
    --nx-line: #e2e8f0;
}

@media (max-width: 768px) {
    :root { --navbar-h: 64px; }
}

html, body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

/* =============================================================
   HERO — same structural pattern as solutions.html's hero
   (no min-height, navbar clearance via --navbar-h, content-driven
   height), extended to a two-column layout with a live
   reconciliation visual in the right column.
   ============================================================= */
.hero {
    position: relative;
    overflow: hidden;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    padding-top: calc(var(--navbar-h) + 2.25rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);

    /* main.css gives .hero a fixed height. Combined with overflow:hidden
       that crops anything taller than it — which is what was cutting the
       CTA row in half. solutions.html only resets this inside its mobile
       query; this hero is taller than that one at every width, so the
       reset has to apply everywhere. Height is content-driven now. */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* The CTA row must never be the thing that overflows. */
.hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding-bottom: 2px;
}

/* Two columns inside the hero, following the index.html pattern: the
   split is a CHILD grid, so .hero is never restructured. It carries its
   own stacking context (position + z-index) — that is what keeps the
   diagonal overlay behind the panel instead of washing over it. It also
   sets its own container width rather than nesting .container, so both
   columns share one gutter and the left copy stays aligned with every
   section below. */
.nx-hero-split {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 440px);
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: center;
}

.nx-hero-split-main { min-width: 0; }

/* Belt and braces: the background layer must never paint over the split. */
.hero .hero-background { z-index: 0; }

.hero-content {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-rows: auto auto auto auto;
    row-gap: clamp(1rem, 1.6vw, 1.35rem);
    align-items: start !important;
    justify-content: start !important;
}

.hero-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: start;
}

.hero-badge {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    justify-self: start;
}

.hero-title {
    line-height: 1.2;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
}

.hero-description {
    font-size: clamp(0.95rem, 1.35vw, 1.1rem);
    line-height: 1.7;
    max-width: 640px;
}

/* ---- Live reconciliation panel ------------------------------ */
.nx-viz {
    background: rgba(9, 20, 38, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 18px;
    padding: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.nx-viz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.nx-viz-matter {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.nx-viz-sub {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 3px;
}

.nx-viz-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.nx-viz-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    animation: nxPulse 1.8s ease-in-out infinite;
}

@keyframes nxPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.72); }
}

.nx-viz-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.nx-doc {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease,
                border-color 0.45s ease, background 0.45s ease;
}

.nx-doc.is-in {
    opacity: 1;
    transform: translateY(0);
}

.nx-doc-glyph {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.14);
    font-family: 'Source Sans Pro', sans-serif;
}

.nx-doc-name {
    font-size: 0.86rem;
    color: #e2e8f0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-doc-meta {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 2px;
}

.nx-doc-state {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
}

.nx-doc.is-reading .nx-doc-state {
    color: #a5f3fc;
    background: rgba(6, 182, 212, 0.16);
}

.nx-doc.is-matched {
    border-color: rgba(16, 185, 129, 0.38);
}

.nx-doc.is-matched .nx-doc-state {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.16);
}

.nx-doc.is-matched .nx-doc-glyph {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.16);
}

.nx-doc.is-break {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(127, 29, 29, 0.22);
}

.nx-doc.is-break .nx-doc-state {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
}

.nx-doc.is-break .nx-doc-glyph {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
}

/* verdict card */
.nx-verdict {
    margin-top: auto;
    border-radius: 12px;
    padding: 15px 16px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.16), rgba(15, 23, 42, 0.55));
    border: 1px solid rgba(239, 68, 68, 0.38);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.nx-verdict.is-in {
    opacity: 1;
    transform: translateY(0);
}

.nx-verdict-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fca5a5;
    margin-bottom: 6px;
}

.nx-verdict-head {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 10px;
}

.nx-verdict-assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #cbd5e1;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.74rem;
    background: rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.nx-chip.is-owner {
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.36);
    color: #a5f3fc;
}

.nx-chip.is-sla {
    background: rgba(245, 166, 35, 0.14);
    border-color: rgba(245, 166, 35, 0.36);
    color: #F7C468;
}

.nx-viz-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.nx-viz-tab {
    flex: 1 1 auto;
    min-width: 78px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 7px 8px;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.nx-viz-tab:hover { color: #e2e8f0; }

.nx-viz-tab[aria-selected="true"] {
    color: #061c39;
    background: linear-gradient(135deg, #67e8f9, #34d399);
    border-color: transparent;
}

.nx-viz-tab:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
}

/* =============================================================
   SHARED SECTION FURNITURE
   ============================================================= */
.nx-section {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.nx-section.is-tinted {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.nx-section.is-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.nx-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.nx-head {
    max-width: 780px;
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.nx-head.is-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.nx-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nx-cyan-ink);
    margin-bottom: 14px;
}

.is-dark .nx-eyebrow { color: #67e8f9; }

.nx-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: clamp(1.7rem, 3.1vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--nx-navy);
    margin: 0 0 16px;
    letter-spacing: -0.015em;
}

.is-dark .nx-title { color: #fff; }

.nx-lede {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--nx-slate);
    margin: 0;
}

.is-dark .nx-lede { color: #cbd5e1; }

.nx-note {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-top: 18px;
}

.is-dark .nx-note { color: #94a3b8; }

/* =============================================================
   PROOF BAND
   ============================================================= */
.nx-proof {
    background: var(--nx-navy);
    padding: clamp(2.2rem, 4vw, 3rem) 0;
}

.nx-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    overflow: hidden;
}

.nx-proof-cell {
    background: var(--nx-navy);
    padding: 26px 22px;
}

.nx-proof-value {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #67e8f9, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.nx-proof-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
}

.nx-proof-sub {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
}

/* =============================================================
   PAIN CARDS
   ============================================================= */
.nx-pain-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.nx-pain {
    background: #fff;
    border: 1px solid var(--nx-line);
    border-left: 4px solid var(--nx-red);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nx-pain-metric {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--nx-red-ink);
    line-height: 1;
    margin-bottom: 10px;
}

.nx-pain-title {
    font-weight: 700;
    font-size: 1.02rem;
    color: #1e293b;
    margin-bottom: 8px;
}

.nx-pain-body {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--nx-muted);
}

/* =============================================================
   PIPELINE (a real sequence — numbered)
   ============================================================= */
.nx-pipe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    counter-reset: nxstep;
}

.nx-pipe-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    padding: 22px 20px;
    position: relative;
}

.nx-pipe-step::before {
    counter-increment: nxstep;
    content: counter(nxstep, decimal-leading-zero);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: #67e8f9;
    display: block;
    margin-bottom: 12px;
}

.nx-pipe-name {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 9px;
}

.nx-pipe-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #cbd5e1;
}

.nx-pipe-tag {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 10px;
    border-radius: 999px;
}

/* =============================================================
   PO-ANCHORED TREE
   ============================================================= */
.nx-tree-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.nx-tree {
    background: #fff;
    border: 1px solid var(--nx-line);
    border-radius: 18px;
    padding: clamp(22px, 3vw, 32px);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.09);
}

.nx-tree-root {
    background: linear-gradient(135deg, var(--nx-navy), #1e293b);
    color: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
}

.nx-tree-root-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: #67e8f9;
    margin-bottom: 6px;
}

.nx-tree-root-id {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
}

.nx-tree-root-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 5px;
}

.nx-tree-stem {
    width: 2px;
    height: 26px;
    background: var(--nx-line);
    margin: 0 auto;
}

.nx-tree-leaves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 12px;
}

.nx-leaf {
    border: 1px solid var(--nx-line);
    border-top: 3px solid var(--nx-cyan);
    border-radius: 10px;
    padding: 14px 12px;
    background: #f8fafc;
}

.nx-leaf-type {
    font-weight: 800;
    font-size: 0.82rem;
    color: #1e293b;
    font-family: 'Source Sans Pro', sans-serif;
}

.nx-leaf-desc {
    font-size: 0.78rem;
    color: var(--nx-muted);
    line-height: 1.5;
    margin-top: 5px;
}

.nx-leaf.is-flagged {
    border-top-color: var(--nx-red);
    background: #fef2f2;
}

.nx-rule {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.07);
    border: 1px dashed rgba(6, 182, 212, 0.45);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #0e7490;
    font-weight: 600;
}

/* =============================================================
   MODULE CARDS
   ============================================================= */
.nx-mod-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* Four-item sets sit 2 x 2 rather than leaving an orphan on row two. */
.nx-mod-grid.is-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nx-mod {
    display: flex;
    flex-direction: column;
}

.nx-mod .nx-list { margin-top: auto; }

.nx-mod {
    background: #fff;
    border: 1px solid var(--nx-line);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.nx-mod-kicker {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--nx-cyan-ink);
    margin-bottom: 10px;
}

.nx-mod-name {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--nx-navy);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.nx-mod-body {
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--nx-slate);
    margin-bottom: 16px;
}

.nx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nx-list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--nx-muted);
    margin-bottom: 9px;
}

.nx-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-emerald));
}

.nx-list li:last-child { margin-bottom: 0; }

/* =============================================================
   TABLES
   ============================================================= */
.nx-table-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--nx-line);
    background: #fff;
}

.is-dark .nx-table-scroll {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.03);
}

.nx-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 0.92rem;
}

.nx-table th,
.nx-table td {
    padding: 13px 18px;
    text-align: left;
    border-bottom: 1px solid var(--nx-line);
    vertical-align: top;
}

.nx-table thead th {
    background: #f8fafc;
    font-weight: 800;
    color: var(--nx-navy);
    font-size: 0.82rem;
    white-space: nowrap;
}

.nx-table tbody td {
    color: var(--nx-slate);
    line-height: 1.6;
}

.nx-table tbody tr:last-child td { border-bottom: none; }

.nx-table tbody tr:hover td { background: #f8fafc; }

.nx-table td strong { color: var(--nx-navy); }

.is-dark .nx-table th,
.is-dark .nx-table td { border-bottom-color: rgba(148, 163, 184, 0.18); }

.is-dark .nx-table thead th {
    background: rgba(148, 163, 184, 0.09);
    color: #fff;
}

.is-dark .nx-table tbody td { color: #cbd5e1; }

.is-dark .nx-table tbody tr:hover td { background: rgba(148, 163, 184, 0.06); }

.is-dark .nx-table td strong { color: #fff; }

.nx-yes { color: var(--nx-emerald-ink); font-weight: 800; }
.nx-no { color: #94a3b8; font-weight: 700; }
.is-dark .nx-yes { color: #6ee7b7; }

.nx-band {
    display: inline-block;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.nx-band.is-auto { color: var(--nx-emerald-ink); background: rgba(16, 185, 129, 0.12); }
.nx-band.is-review { color: var(--nx-amber-ink); background: rgba(245, 166, 35, 0.14); }
.nx-band.is-hitl { color: var(--nx-red-ink); background: rgba(239, 68, 68, 0.12); }

/* =============================================================
   CONSOLE GRID
   ============================================================= */
.nx-console-group + .nx-console-group { margin-top: 34px; }

.nx-console-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.nx-console-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.nx-console {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 15px 16px;
}

.nx-console-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 5px;
}

.nx-console-desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #94a3b8;
}

/* =============================================================
   ROI
   ============================================================= */
.nx-roi-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 3vw, 2.5rem);
    align-items: start;
}

.nx-roi-panel {
    background: linear-gradient(135deg, var(--nx-navy), #1e293b);
    border-radius: 16px;
    padding: 28px;
    color: #fff;
}

.nx-roi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.nx-roi-row:last-of-type { border-bottom: none; }

.nx-roi-k { font-size: 0.92rem; color: #cbd5e1; }

.nx-roi-v {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 800;
    font-size: 1.12rem;
    color: #fff;
    white-space: nowrap;
}

.nx-roi-row.is-total {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 2px solid rgba(103, 232, 249, 0.5);
}

.nx-roi-row.is-total .nx-roi-k { color: #fff; font-weight: 700; }

.nx-roi-row.is-total .nx-roi-v {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #67e8f9, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================================
   ROADMAP
   ============================================================= */
.nx-phase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.nx-phase {
    background: #fff;
    border: 1px solid var(--nx-line);
    border-radius: 14px;
    padding: 26px;
    border-top: 4px solid var(--nx-cyan);
}

.nx-phase:nth-child(2) { border-top-color: var(--nx-emerald); }
.nx-phase:nth-child(3) { border-top-color: var(--nx-amber); }

.nx-phase-when {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--nx-muted);
    margin-bottom: 8px;
}

.nx-phase-name {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--nx-navy);
    margin-bottom: 14px;
}

/* =============================================================
   FAQ
   ============================================================= */
.nx-faq { max-width: 860px; }

.nx-faq details {
    border-bottom: 1px solid var(--nx-line);
    padding: 18px 0;
}

.nx-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.04rem;
    color: var(--nx-navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.nx-faq summary::-webkit-details-marker { display: none; }

.nx-faq summary::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--nx-cyan-ink);
    line-height: 1;
    flex-shrink: 0;
}

.nx-faq details[open] summary::after { content: '\2212'; }

.nx-faq summary:focus-visible {
    outline: 2px solid var(--nx-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

.nx-faq-body {
    margin-top: 12px;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--nx-slate);
    max-width: 72ch;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    .nx-hero-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .nx-viz { max-width: 560px; margin: 0 auto; }

    .nx-tree-layout,
    .nx-roi-layout {
        grid-template-columns: 1fr;
    }

    .nx-proof-grid { grid-template-columns: repeat(2, 1fr); }
    .nx-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-mod-grid,
    .nx-mod-grid.is-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .nx-phase-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero { text-align: center !important; }

    .hero .hero-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .hero-content { row-gap: 1rem !important; }

    .hero-badge {
        justify-self: center !important;
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .hero-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .hero-actions .btn {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 130px !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }

    .nx-viz {
        text-align: left;
        padding: 16px;
        min-height: 0;
    }

    .nx-hero-split { padding: 0 1rem; }

    .nx-wrap { padding: 0 1rem; }

    .nx-proof-cell { padding: 20px 16px; }

    .nx-pipe,
    .nx-console-grid,
    .nx-mod-grid,
    .nx-mod-grid.is-duo,
    .nx-pain-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 520px) {
    .nx-proof-grid { grid-template-columns: 1fr; }
    .nx-tree-leaves { grid-template-columns: repeat(2, 1fr); }
    .nx-doc { grid-template-columns: 24px minmax(0, 1fr); }
    .nx-doc-state { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-doc,
    .nx-verdict {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .nx-viz-live i { animation: none; }
}

/* =============================================================
   HOMEPAGE BRAND LAYER
   Carried over from the previous index.html. Rebuilt on nx- classes
   rather than importing aurus-pages.css and aurus-2026.css — the
   latter sets .hero to display:flex with !important, which would
   undo the hero structure above.
   ============================================================= */
.nx-answer {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--nx-line);
    border-left: 4px solid var(--nx-cyan);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 34px);
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.07);
}

.nx-answer p {
    margin: 0;
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    line-height: 1.8;
    color: var(--nx-slate);
}

.nx-answer strong { color: var(--nx-navy); }

/* Whole-card links for the two-product block */
.nx-mod-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.nx-mod-link:hover {
    transform: translateY(-3px);
    border-color: var(--nx-cyan);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.nx-mod-link:focus-visible {
    outline: 2px solid var(--nx-cyan);
    outline-offset: 3px;
}

.nx-mod-cta {
    display: inline-block;
    margin-top: 18px;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--nx-cyan-ink);
}

.nx-mod-link .nx-list { margin-top: 0; }


/* =============================================================
   ROI TABLE FIT
   .nx-table carries min-width:640px so wide tables scroll rather
   than crush. Inside the ROI layout the table only gets ~640px of
   column, so that floor triggered a scrollbar on a table whose
   cells are short currency values. Release the floor here and let
   it fit the column.
   ============================================================= */
.nx-roi-layout .nx-table {
    min-width: 0;
    font-size: 0.88rem;
}

.nx-roi-layout .nx-table th,
.nx-roi-layout .nx-table td {
    padding: 12px 14px;
}

/* Category names wrap; the figures never do. */
.nx-roi-layout .nx-table td:not(:first-child),
.nx-roi-layout .nx-table th:not(:first-child) {
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 1024px) {
    .nx-roi-layout .nx-table { min-width: 560px; }
}

/* =============================================================
   ROI CTA — replaces the investment panel. Commercial figures are
   not published; they are built against the prospect's own numbers.
   ============================================================= */
.nx-roi-cta {
    margin-top: 26px;
    background: linear-gradient(135deg, var(--nx-navy), #1e293b);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 34px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}

.nx-roi-cta-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
}

.nx-roi-cta-body {
    font-size: 0.97rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0;
    max-width: 68ch;
}

.nx-roi-cta .btn { white-space: nowrap; }

@media (max-width: 820px) {
    .nx-roi-cta {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* =============================================================
   HERO PANEL — DOCUMENT FACSIMILE TYPOGRAPHY
   The panel is showing real documents, so its contents are set in
   a standard serif at normal weight rather than the UI sans. Only
   the scenario tabs below it stay in the interface font, because
   they are a control rather than a document.
   Placed last so it overrides the weights set earlier in this file
   without needing !important.
   ============================================================= */
.nx-viz,
.nx-viz .nx-viz-matter,
.nx-viz .nx-viz-sub,
.nx-viz .nx-viz-live,
.nx-viz .nx-doc-glyph,
.nx-viz .nx-doc-name,
.nx-viz .nx-doc-meta,
.nx-viz .nx-doc-state,
.nx-viz .nx-verdict-label,
.nx-viz .nx-verdict-head,
.nx-viz .nx-verdict-assign,
.nx-viz .nx-chip {
    font-family: 'Times New Roman', Times, 'Liberation Serif', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0;
}

/* Serif reads smaller at the same px size, so the document rows and
   the verdict come up a step to hold their weight in the layout. */
.nx-viz .nx-viz-matter { font-size: 1.14rem; }
.nx-viz .nx-viz-sub { font-size: 0.85rem; }
.nx-viz .nx-doc-name { font-size: 0.95rem; }
.nx-viz .nx-doc-meta { font-size: 0.82rem; }
.nx-viz .nx-doc-state { font-size: 0.78rem; }
.nx-viz .nx-doc-glyph { font-size: 0.74rem; }
.nx-viz .nx-verdict-label { font-size: 0.8rem; }
.nx-viz .nx-verdict-head { font-size: 1.12rem; line-height: 1.45; }
.nx-viz .nx-verdict-assign { font-size: 0.86rem; }
.nx-viz .nx-chip { font-size: 0.82rem; }

/* The tabs are interface, not document — they keep the UI face. */
.nx-viz .nx-viz-tab {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
}

/* =============================================================
   HERO PANEL — COMPACT SCALE
   The panel was competing with the headline instead of supporting
   it. Everything inside steps down roughly a third: type, padding,
   gaps and the glyph. Height becomes content-driven (no min-height)
   so it sits at about the height of the copy column beside it.
   Last block in the file, so it wins over the sizes set above.
   ============================================================= */
.nx-viz {
    max-width: 400px;
    min-height: 0;
    padding: 14px;
    gap: 9px;
    border-radius: 14px;
}

.nx-viz .nx-viz-head {
    padding-bottom: 9px;
    gap: 9px;
}

.nx-viz .nx-viz-matter { font-size: 0.88rem; }
.nx-viz .nx-viz-sub { font-size: 0.7rem; margin-top: 2px; }

.nx-viz .nx-viz-live {
    font-size: 0.6rem;
    padding: 3px 8px;
    gap: 5px;
}

.nx-viz .nx-viz-live i { width: 5px; height: 5px; }

.nx-viz .nx-viz-rows { gap: 6px; }

.nx-viz .nx-doc {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 7px;
}

.nx-viz .nx-doc-glyph {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 0.56rem;
}

.nx-viz .nx-doc-name { font-size: 0.78rem; }
.nx-viz .nx-doc-meta { font-size: 0.68rem; margin-top: 1px; }

.nx-viz .nx-doc-state {
    font-size: 0.62rem;
    padding: 2px 7px;
}

.nx-viz .nx-verdict {
    padding: 10px 11px;
    border-radius: 9px;
}

.nx-viz .nx-verdict-label { font-size: 0.64rem; margin-bottom: 4px; }
.nx-viz .nx-verdict-head { font-size: 0.86rem; line-height: 1.4; margin-bottom: 7px; }

.nx-viz .nx-verdict-assign {
    font-size: 0.68rem;
    gap: 5px;
    padding-top: 7px;
}

.nx-viz .nx-chip {
    font-size: 0.64rem;
    padding: 3px 8px;
    gap: 4px;
}

.nx-viz .nx-viz-tabs { gap: 5px; }

.nx-viz .nx-viz-tab {
    font-size: 0.6rem;
    padding: 5px 6px;
    min-width: 62px;
    border-radius: 6px;
}

@media (max-width: 1024px) {
    .nx-viz { max-width: 440px; }
}

@media (max-width: 768px) {
    .nx-viz { max-width: 100%; padding: 13px; }
}