/* ============================================================
   ICRX MS landing — shared design system (brand.css)
   Extracted verbatim from index.html's inline <style> so every
   marketing page (home + pillar pages) renders from ONE source
   of truth. index.html still ships its own inline copy for now;
   migrating it to link this file is a deliberate later step.
   ============================================================ */

    /* ================================================================
       ICRX MS landing, rev "keynote".
       Apple product-page language, tuned for a dark SaaS: huge centred
       display type, restrained gradient moments, generous vertical air,
       large-radius cards, link-chevron CTAs, footnote small print.
       Brand: Geist everywhere, zinc-950 base, lime→cyan brand pair,
       tabular numerals for every figure.
       ================================================================ */
    :root {
      /* LIGHT is the default theme. Apple-light neutrals: near-white
         canvas, #1d1d1f ink, hairline borders, visible soft shadows.
         The lime accent is kept vivid for FILLS (buttons, bars) where a
         dark-ink label carries contrast, but accent-coloured TEXT and
         gradient headings switch to a darker green/teal so they stay
         legible on white (lime text on white fails contrast). */
      color-scheme: light; /* native form controls/scrollbars follow the toggle, not the OS */
      --bg:        #ffffff;
      --band:      #f5f5f7;        /* alternating chapter background */
      --card:      #ffffff;
      --card-2:    #f0f0f2;
      --border:    rgba(0,0,0,.12);
      --border-soft: rgba(0,0,0,.07);
      --fg:        #1d1d1f;        /* apple near-black */
      --muted:     #48484a;
      --subtle:    #5c5c60;        /* apple subhead gray, AA on white+band */
      --nav-bg:    rgba(255,255,255,.72);
      --frame-bg:  linear-gradient(180deg, #ffffff, #f5f5f7);
      --frame-shadow: 0 40px 90px -40px rgba(0,0,0,.25);
      --bar-track: #e6e6eb;
      --dash-border: rgba(0,0,0,.2);
      --border-hover: rgba(0,0,0,.28); /* .cell hover emphasis, visible on white cards */
      --footnote:  #67676b;        /* AA 4.5:1 on white for legal small print */
      --accent:    #a3e635;        /* fills only (button/bar) */
      --accent-press: #94d820;
      --accent-2:  #06b6d4;        /* logo mark gradient partner */
      --accent-ink:#0a0c05;
      --accent-text: #3f6212;      /* accent-coloured TEXT, AA on white */
      --grad-a:    #4d7c0f;        /* heading gradient, legible on white */
      --grad-b:    #0e7490;
      --danger-text:  #dc2626;
      --warning-text: #b45309;
      --ok-text:      #15803d;
      --bar-crit:  #ef4444;
      --bar-warn:  #f59e0b;
      --bar-ok:    #22c55e;
      --alert-bg:  #fef2f2;
      --alert-border: rgba(220,38,38,.28);
      --alert-title:  #b91c1c;
      --alert-sub:    #dc2626;
      --crit-chip-bg: #fef2f2;
      --warn-chip-bg: #fffbeb;
      --r-card:    24px;
      --r-frame:   28px;
      --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      --ease: cubic-bezier(.25, .1, .25, 1);
    }
    /* DARK — the original keynote palette, reachable via the nav toggle. */
    .dark {
      color-scheme: dark;
      --bg:        #09090b;
      --band:      #101013;
      --card:      #16161a;
      --card-2:    #1c1c21;
      --border:    rgba(250,250,250,.09);
      --border-soft: rgba(250,250,250,.06);
      --fg:        #f5f5f7;
      --muted:     #a1a1aa;
      --subtle:    #86868b;
      --nav-bg:    rgba(9,9,11,.72);
      --frame-bg:  linear-gradient(180deg, #141418, #0e0e11);
      --frame-shadow: 0 60px 120px -40px rgba(0,0,0,.8);
      --bar-track: #232329;
      --dash-border: rgba(250,250,250,.2);
      --border-hover: rgba(250,250,250,.16); /* .cell hover emphasis, original dark value */
      --footnote:  #7a7a80;        /* AA on near-black for legal small print */
      --accent:    #a3e635;
      --accent-press: #b5ef52;
      --accent-2:  #06b6d4;
      --accent-ink:#0a0c05;
      --accent-text: #a3e635;
      --grad-a:    #a3e635;
      --grad-b:    #06b6d4;
      --danger-text:  #f87171;
      --warning-text: #fbbf24;
      --ok-text:      #4ade80;
      --bar-crit:  #f87171;
      --bar-warn:  #fbbf24;
      --bar-ok:    #4ade80;
      --alert-bg:  rgba(248,113,113,.07);
      --alert-border: rgba(248,113,113,.35);
      --alert-title:  #fecaca;
      --alert-sub:    rgba(254,202,202,.75);
      --crit-chip-bg: rgba(248,113,113,.07);
      --warn-chip-bg: rgba(251,191,36,.07);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
    body {
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-sans);
      font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss01' 1;
      font-size: 17px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    ::selection { background: rgba(163,230,53,.3); }
    a { color: inherit; text-decoration: none; }
    :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
    /* visually-hidden but still in the accessibility tree — use instead of
       display:none whenever content must stay screen-reader-visible */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
    .mono { font-family: var(--font-mono); }

    /* reveal: gentle apple fade-up. html.js gate + safety net keep
       content visible in every failure mode. */
    .rv { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
    .js .rv { opacity: 0; transform: translateY(22px); }
    .js .rv.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

    /* ---------- nav (apple local-nav style) ---------- */
    header {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(20px) saturate(1.6);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      background: var(--nav-bg);
      border-bottom: 1px solid var(--border-soft);
    }
    .nav { display: flex; align-items: center; gap: 28px; height: 52px; }
    .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
    .brand .mark {
      width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: var(--accent-ink); font-weight: 900; font-size: 12px; letter-spacing: -1px;
    }
    .nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; color: var(--muted); }
    .nav-links a:hover { color: var(--fg); }
    /* nav "Product" dropdown — pure CSS: opens on hover and on keyboard
       focus-within (focusing the button alone reveals + makes the links
       focusable). No JS, so nothing to break. Hidden with the nav <720px. */
    .nav-dd { position: relative; display: inline-flex; align-items: center; }
    .nav-dd-btn { font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
    .nav-dd-btn::after { content: "\203A"; font-size: 14px; transform: rotate(90deg); transition: transform .2s var(--ease); }
    .nav-dd:hover .nav-dd-btn, .nav-dd:focus-within .nav-dd-btn { color: var(--fg); }
    .nav-dd:hover .nav-dd-btn::after, .nav-dd:focus-within .nav-dd-btn::after { transform: rotate(-90deg); }
    /* invisible bridge across the gap so the menu doesn't close mid-move */
    .nav-dd::before { content: ""; position: absolute; top: 100%; left: -14px; right: -14px; height: 16px; }
    .nav-dd-menu {
      position: absolute; top: calc(100% + 12px); left: 50%;
      transform: translateX(-50%) translateY(6px);
      min-width: 232px; padding: 8px;
      background: var(--nav-bg); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
      border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 24px 60px -24px rgba(0,0,0,.35);
      display: flex; flex-direction: column; gap: 2px;
      opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
      z-index: 60;
    }
    .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .nav-dd-menu a { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
    .nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { color: var(--fg); background: var(--card-2); }
    .nav-dd-menu a small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
    .nav-dd-menu a[aria-current="page"] { color: var(--fg); background: var(--card-2); }
    .nav-cta { display: flex; align-items: center; gap: 16px; }
    .nav-cta .login { font-size: 13px; color: var(--muted); }
    .nav-cta .login:hover { color: var(--fg); }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      font-weight: 600; cursor: pointer; border: 0; border-radius: 980px;
      transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
    }
    .btn:active { transform: scale(.98); }
    .btn-primary { background: var(--accent); color: var(--accent-ink); font-size: 13px; padding: 7px 16px; }
    .btn-primary:hover { background: var(--accent-press); }
    .btn-hero { font-size: 16px; padding: 13px 28px; }
    .btn-hero:hover { box-shadow: 0 10px 34px -10px rgba(163,230,53,.45); }
    .link-cta {
      display: inline-flex; align-items: center; gap: 5px;
      color: var(--accent-text); font-size: 16px; font-weight: 500;
    }
    .link-cta::after { content: "›"; font-size: 18px; transition: transform .2s var(--ease); }
    .link-cta:hover::after { transform: translateX(3px); }
    /* theme toggle: shows the icon of the theme you'll switch TO */
    .theme-toggle {
      display: grid; place-items: center; width: 32px; height: 32px; border-radius: 980px;
      color: var(--muted); border: 1px solid var(--border); background: transparent; cursor: pointer;
      transition: color .2s var(--ease), border-color .2s var(--ease);
    }
    .theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
    .theme-toggle svg { width: 15px; height: 15px; }
    .theme-toggle .sun { display: none; }
    .theme-toggle .moon { display: block; }
    .dark .theme-toggle .sun { display: block; }
    .dark .theme-toggle .moon { display: none; }
    @media (max-width: 720px) { .nav-links { display: none; } }

    /* ---------- hero (apple keynote: centred, huge, airy) ---------- */
    .hero { text-align: center; padding: 108px 0 0; position: relative; }
    .hero::before {
      content: ""; position: absolute; inset: -10% 0 30%; pointer-events: none;
      background: radial-gradient(46% 44% at 50% 22%, rgba(163,230,53,.09), transparent 65%);
    }
    .hero .kicker { font-size: 15px; font-weight: 600; color: var(--subtle); letter-spacing: .01em; }
    h1 {
      margin: 14px auto 0;
      font-size: clamp(2.7rem, 7vw, 5rem);
      line-height: 1.03; letter-spacing: -.035em; font-weight: 780;
      max-width: 17ch;
    }
    h1 .grad {
      background: linear-gradient(92deg, var(--grad-a) 12%, var(--grad-b) 88%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero .lead {
      margin: 22px auto 0; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.45;
      color: var(--muted); max-width: 34em; text-wrap: pretty;
    }
    .hero-ctas { margin-top: 32px; display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
    .hero-note { margin-top: 16px; font-size: 13px; color: var(--subtle); }

    /* the product shot: sim in a big rounded frame, centred */
    .stage { position: relative; margin: 64px auto 0; max-width: 880px; padding: 0 24px; }
    .frame {
      border: 1px solid var(--border); border-radius: var(--r-frame);
      background: var(--frame-bg);
      box-shadow: var(--frame-shadow);
      padding: 22px 26px; text-align: left;
      transition: transform 1s var(--ease), opacity 1s var(--ease);
    }
    .js .frame { opacity: 0; transform: translateY(30px) scale(.985); }
    .js .frame.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .js .frame { opacity: 1; transform: none; } }

    .mock-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; }
    .mock-title { display: flex; align-items: baseline; gap: 12px; }
    .mock-title b { font-size: 16px; letter-spacing: -.01em; }
    .mock-title span { font-family: var(--font-mono); font-size: 11px; color: var(--subtle); }
    .chip {
      font-family: var(--font-mono); font-size: 10.5px; padding: 4px 10px; border-radius: 980px;
      border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
    }
    .chip.live { color: var(--accent-text); border-color: rgba(163,230,53,.55); }
    .chip.live::before { content: "●"; margin-right: 6px; animation: pulse 1.8s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

    .part-row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 14px; align-items: center; padding: 11px 0; }
    .part-row + .part-row { border-top: 1px solid var(--border-soft); }
    .part-name { font-size: 13.5px; font-weight: 600; }
    .part-name small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--subtle); font-weight: 400; margin-top: 2px; }
    .bar { height: 6px; border-radius: 99px; background: var(--bar-track); overflow: hidden; }
    .bar > i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.4s var(--ease); }
    .bar.ok > i   { background: var(--bar-ok); }
    .bar.warn > i { background: var(--bar-warn); }
    .bar.crit > i { background: var(--bar-crit); }
    .part-pct { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--muted); }
    .part-pct.warn { color: var(--warning-text); }
    .part-pct.crit { color: var(--danger-text); }

    .alert-pop {
      display: flex; gap: 10px; align-items: flex-start;
      border: 1px solid var(--alert-border); background: var(--alert-bg);
      border-radius: 14px; padding: 12px 15px; margin-top: 14px;
      opacity: 0; transform: translateY(8px);
      transition: opacity .5s var(--ease) .2s, transform .5s var(--ease) .2s;
    }
    .alert-pop.in { opacity: 1; transform: none; }
    .alert-pop .ic { color: var(--danger-text); font-size: 14px; line-height: 1.4; }
    .alert-pop b { font-size: 12.5px; color: var(--alert-title); display: block; }
    .alert-pop span { font-size: 11.5px; color: var(--alert-sub); font-family: var(--font-mono); }

    .mock-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; flex-wrap: wrap; gap: 8px; }
    .kms { font-family: var(--font-mono); font-size: 12px; color: var(--subtle); }
    .kms b { color: var(--fg); font-size: 15px; font-weight: 600; }
    .laplog { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); opacity: 0; transition: opacity .5s var(--ease); }
    .laplog.in { opacity: 1; }

    /* ---------- stats band (apple spec style: big, centred) ---------- */
    .stats { padding: 88px 0 96px; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
    @media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; } }
    .stat b { display: block; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
    .stat b em { font-style: normal; background: linear-gradient(92deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--subtle); }
    .stats .born { text-align: center; margin-top: 72px; font-size: 15px; color: var(--subtle); }
    .stats .born b { color: var(--muted); font-weight: 600; }

    /* ---------- suite pillars (role/territory map) ---------- */
    .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .pillar {
      border: 1px solid var(--border); border-radius: var(--r-card);
      background: var(--card); padding: 26px 24px;
    }
    .pillar.flagship {
      grid-column: 1 / -1;
      border-color: rgba(163,230,53,.35);
      background: radial-gradient(120% 130% at 12% 0%, rgba(163,230,53,.07), transparent 55%), var(--card);
    }
    .pillar .p-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pillar h3 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
    .pillar .flag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 980px; padding: 3px 9px; font-weight: 700; }
    .pillar .soon { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); border: 1px solid var(--border); border-radius: 980px; padding: 3px 9px; }
    .pillar .p-role { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }
    .pillar p { margin-top: 12px; font-size: 14px; color: var(--muted); text-wrap: pretty; max-width: 46ch; }
    @media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

    /* mechanics job-list viz */
    .jobs { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 2; }
    .jobs .done { color: var(--ok-text); }
    .jobs .flag { color: var(--warning-text); }

    /* ---------- chapters ---------- */
    section.chapter { padding: 110px 0; }
    section.chapter.band { background: var(--band); }
    .ch-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
    .ch-head .kicker { font-size: 15px; font-weight: 600; color: var(--subtle); }
    .ch-head h2 {
      margin-top: 12px; font-size: clamp(2rem, 4.6vw, 3.2rem);
      letter-spacing: -.03em; line-height: 1.06; font-weight: 760; text-wrap: balance;
    }
    .ch-head h2 .grad { background: linear-gradient(92deg, var(--grad-a) 12%, var(--grad-b) 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ch-head p { margin-top: 18px; font-size: 17px; color: var(--muted); text-wrap: pretty; }

    /* pains */
    .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; } }
    .pain {
      border: 1px solid var(--border); border-radius: var(--r-card); padding: 30px 28px;
      background: var(--card);
    }
    .pain .glyph { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); letter-spacing: .12em; }
    .pain h3 { font-size: 19px; margin-top: 14px; letter-spacing: -.015em; font-weight: 650; }
    .pain p { font-size: 15px; color: var(--muted); margin-top: 10px; text-wrap: pretty; }

    /* steps */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
    @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
    .step {
      border: 1px solid var(--border); border-radius: var(--r-card); padding: 30px 28px;
      background: linear-gradient(180deg, var(--card), var(--card-2));
    }
    .step::before {
      counter-increment: step; content: "0" counter(step);
      font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); letter-spacing: .14em;
    }
    .step h3 { font-size: 19px; margin-top: 14px; letter-spacing: -.015em; font-weight: 650; }
    .step p { font-size: 15px; color: var(--muted); margin-top: 10px; text-wrap: pretty; }
    .step .demo { margin-top: 20px; border-top: 1px solid var(--border-soft); padding-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--subtle); }
    .step .demo .hl { color: var(--accent-text); }

    /* ---------- bento (apple keynote grid: big radius, roomy) ---------- */
    .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
    .cell {
      border: 1px solid var(--border); border-radius: var(--r-card);
      background: var(--card); padding: 30px 28px; min-width: 0; overflow: hidden;
      transition: transform .35s var(--ease), border-color .35s var(--ease);
    }
    .cell:hover { transform: translateY(-3px); border-color: var(--border-hover); }
    .cell .tag { font-size: 12px; font-weight: 600; color: var(--subtle); display: block; margin-bottom: 10px; letter-spacing: .01em; }
    .cell h3 { font-size: 19px; letter-spacing: -.015em; font-weight: 650; }
    .cell > p { font-size: 14.5px; color: var(--muted); margin-top: 9px; text-wrap: pretty; }
    .cell .viz { margin-top: 20px; }
    .sp-8 { grid-column: span 8; } .sp-6 { grid-column: span 6; } .sp-4 { grid-column: span 4; }
    @media (max-width: 900px) { .sp-8, .sp-6, .sp-4 { grid-column: span 12; } }

    .mini-bars { display: grid; gap: 10px; }
    .mini-bar { display: grid; grid-template-columns: 86px 1fr 66px; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--subtle); }
    .mini-bar .bar { height: 5px; }
    .horizon { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
    .horizon .chip.crit { color: var(--danger-text); border-color: rgba(220,38,38,.4); background: var(--crit-chip-bg); }
    .horizon .chip.warn { color: var(--warning-text); border-color: rgba(180,83,9,.4); background: var(--warn-chip-bg); }

    .tyre-table { font-family: var(--font-mono); font-size: 10.5px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .tyre-table .tr { display: grid; grid-template-columns: 1.1fr 1fr .8fr; padding: 8px 13px; color: var(--muted); border-top: 1px solid var(--border-soft); }
    .tyre-table .tr:first-child { border-top: 0; background: var(--card-2); color: var(--subtle); letter-spacing: .08em; font-size: 9.5px; text-transform: uppercase; }
    .tyre-table .warn-km { color: var(--warning-text); }

    .csv {
      font-family: var(--font-mono); font-size: 11px; color: var(--subtle);
      border: 1px dashed var(--dash-border); border-radius: 12px; padding: 14px 16px; line-height: 1.9;
    }
    .csv .ok { color: var(--accent-text); }
    .csv b { color: var(--muted); font-weight: 500; }

    .sess { display: flex; gap: 8px; }
    .sess span {
      flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11px;
      border: 1px solid var(--border); border-radius: 10px; padding: 10px 0; color: var(--muted);
    }
    .sess span.done { color: var(--ok-text); border-color: rgba(21,128,61,.35); background: rgba(34,197,94,.08); }

    .timer { font-family: var(--font-mono); font-size: 34px; font-weight: 700; letter-spacing: .02em; }
    .timer small { font-size: 11px; color: var(--subtle); display: block; letter-spacing: .12em; margin-top: 4px; text-transform: uppercase; }

    .crew { display: flex; align-items: center; }
    .crew .av {
      width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card);
      display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
      margin-left: -8px; font-family: var(--font-mono);
    }
    .crew .av:first-child { margin-left: 0; }

    .barcode { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
    .barcode i { display: block; width: 3px; background: var(--muted); border-radius: 1px; }
    .barcode i:nth-child(3n) { width: 5px; } .barcode i:nth-child(4n) { background: var(--subtle); }
    .serial { font-family: var(--font-mono); font-size: 10.5px; color: var(--subtle); margin-top: 8px; letter-spacing: .12em; }

    .spark { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
    .spark i { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(163,230,53,.32)); border-radius: 4px 4px 0 0; min-height: 8%; transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease); }
    .in .spark i { transform: scaleY(1); }

    .tree { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.9; }
    .tree .lv1 { color: var(--fg); }
    .tree .km { color: var(--subtle); }

    /* ---------- versus ---------- */
    .vs-table { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
    .vs-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
    .vs-row > div { padding: 18px 22px; font-size: 15px; border-top: 1px solid var(--border-soft); }
    .vs-row:first-child > div { border-top: 0; background: var(--card-2); font-size: 12px; font-weight: 600; color: var(--subtle); }
    .vs-row .k { color: var(--muted); }
    .vs-row .icrx { background: rgba(163,230,53,.05); color: var(--fg); font-weight: 550; }
    .vs-row:first-child .icrx { color: var(--accent-text); }
    .vs-row .them { color: var(--subtle); }
    @media (max-width: 720px) {
      .vs-table { position: relative; }
      .vs-row { grid-template-columns: 1fr; }
      .vs-row .k { background: var(--card-2); font-weight: 600; }
      /* keep the columnheader row in the accessibility tree — the ::after
         labels below are pseudo-content and aren't read by all screen
         readers, so the real headers must stay reachable, just visually
         hidden (sr-only) instead of display:none. */
      .vs-row:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
      .vs-row .icrx::after { content: "  · ICRX"; color: var(--accent-text); font-family: var(--font-mono); font-size: 10px; }
      .vs-row .them::after { content: "  · legacy desktop suites"; font-family: var(--font-mono); font-size: 10px; }
    }
    .vs-note { margin-top: 18px; font-size: 14px; color: var(--subtle); text-align: center; text-wrap: pretty; }

    /* ---------- pricing (apple-clean) ---------- */
    .price-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: stretch; }
    @media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
    .price-card {
      border: 1px solid rgba(163,230,53,.35); border-radius: var(--r-frame); padding: 40px;
      background: radial-gradient(130% 110% at 20% 0%, rgba(163,230,53,.08), transparent 55%), var(--card);
    }
    .price-card .plan { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
    .price-line { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
    .price-line .now { font-size: 62px; font-weight: 780; letter-spacing: -.035em; line-height: 1; }
    .price-line .was { font-family: var(--font-mono); font-size: 19px; color: var(--subtle); text-decoration: line-through; }
    .price-line .per { font-size: 14px; color: var(--muted); }
    .founder-note { margin-top: 16px; font-size: 15px; color: var(--muted); }
    .founder-note b { color: var(--fg); }
    .price-card ul { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
    .price-card li { font-size: 15px; color: var(--muted); display: flex; gap: 11px; }
    .price-card li::before { content: "✓"; color: var(--accent-text); font-weight: 700; }
    .price-ctas { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; align-items: center; }
    .price-aside { border: 1px solid var(--border); border-radius: var(--r-frame); padding: 40px; background: var(--card); }
    .price-aside h3 { font-size: 19px; font-weight: 650; }
    .price-aside p { font-size: 15px; color: var(--muted); margin-top: 12px; text-wrap: pretty; }
    .price-aside .math { margin-top: 24px; font-family: var(--font-mono); font-size: 12.5px; color: var(--subtle); border-top: 1px dashed var(--border); padding-top: 22px; line-height: 2.1; }
    .price-aside .math b { color: var(--fg); }
    .price-aside .math .ok { color: var(--accent-text); }

    /* ---------- FAQ ---------- */
    .faq { max-width: 720px; margin: 0 auto; }
    details {
      border: 1px solid var(--border); border-radius: 16px; background: var(--card);
      padding: 0 24px; margin-bottom: 12px;
    }
    summary {
      cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
      font-weight: 600; font-size: 16px; padding: 20px 0;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; font-family: var(--font-mono); color: var(--subtle); font-size: 19px; transition: transform .25s var(--ease); }
    details[open] summary::after { transform: rotate(45deg); }
    details p { color: var(--muted); font-size: 15px; padding-bottom: 22px; margin-top: -4px; max-width: 60ch; }

    /* ---------- final ---------- */
    .final { text-align: center; padding: 130px 0 120px; position: relative; overflow: hidden; }
    .final::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(44% 58% at 50% 100%, rgba(163,230,53,.1), transparent 70%);
    }
    .final h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.032em; line-height: 1.05; font-weight: 770; text-wrap: balance; }
    .final p { margin: 20px auto 0; font-size: 17px; color: var(--muted); max-width: 34em; text-wrap: pretty; }
    .final .hero-ctas { margin-top: 34px; }

    /* ---------- footer + footnotes ---------- */
    footer { border-top: 1px solid var(--border-soft); padding: 44px 0 60px; font-size: 13px; color: var(--subtle); }
    .footnotes { max-width: 1080px; margin: 0 auto 34px; padding: 0 24px; font-size: 11.5px; color: var(--footnote); line-height: 1.7; }
    .foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
    .foot .brand { font-size: 14px; }
    .foot a:hover { color: var(--fg); }
    .foot .links { display: flex; gap: 22px; flex-wrap: wrap; }

    /* ---------- Liquid Glass finish ----------
       Port of the app's proven `.glass` system (src/index.css). An
       ambient accent-tinted gradient lives on <body> (fixed) so the
       translucent surfaces have something to refract while scrolling.
       Only the signature chrome pays for backdrop blur — the hero
       .frame and the .price-card (the nav + Product dropdown were
       already glassy). Cards and bands just get slightly translucent
       fills, which are free. Text tokens are untouched and surface
       alphas stay high, so every AA contrast pair still holds. Falls
       back to the opaque look when backdrop-filter is unsupported,
       under prefers-reduced-transparency, and in print. */
    :root {
      --ambient-a: rgba(163,230,53,.10);
      --ambient-b: rgba(6,182,212,.07);
      --glass-card: rgba(255,255,255,.55);
      --glass-border: rgba(0,0,0,.10);
      --glass-hi: rgba(255,255,255,.70);
      --glass-shadow: 0 40px 90px -40px rgba(15,20,40,.20);
      --card-t: rgba(255,255,255,.72);
      --band-t: rgba(245,245,247,.72);
    }
    .dark {
      --ambient-a: rgba(163,230,53,.11);
      --ambient-b: rgba(6,182,212,.09);
      --glass-card: rgba(20,20,24,.60);
      --glass-border: rgba(250,250,250,.13);
      --glass-hi: rgba(255,255,255,.07);
      --glass-shadow: 0 60px 120px -40px rgba(0,0,0,.7);
      --card-t: rgba(22,22,26,.74);
      --band-t: rgba(16,16,19,.62);
    }
    body {
      background:
        radial-gradient(1100px 750px at 85% -6%, var(--ambient-a), transparent 62%),
        radial-gradient(950px 700px at -10% 34%, var(--ambient-b), transparent 58%),
        radial-gradient(900px 650px at 72% 108%, var(--ambient-a), transparent 60%),
        var(--bg);
      background-attachment: fixed;
    }
    /* translucent fills — no blur, effectively free */
    section.chapter.band { background: var(--band-t); }
    .cell, .pillar, .pain, .price-aside, details { background: var(--card-t); }
    .pillar.flagship {
      background: radial-gradient(120% 130% at 12% 0%, rgba(163,230,53,.07), transparent 55%), var(--card-t);
    }
    /* the two glass moments: hero product shot + pricing card */
    .frame, .price-card {
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      backdrop-filter: blur(22px) saturate(160%);
    }
    .frame {
      background: var(--glass-card);
      border-color: var(--glass-border);
      box-shadow: inset 0 1px 0 0 var(--glass-hi), var(--frame-shadow);
    }
    .price-card { /* keeps its lime border + tint, over a glass fill */
      background: radial-gradient(130% 110% at 20% 0%, rgba(163,230,53,.08), transparent 55%), var(--glass-card);
      box-shadow: inset 0 1px 0 0 var(--glass-hi), var(--glass-shadow);
    }
    /* graceful degradation — identical to the standard opaque finish */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .frame { background: var(--frame-bg); border-color: var(--border); box-shadow: var(--frame-shadow); }
      .price-card { background: radial-gradient(130% 110% at 20% 0%, rgba(163,230,53,.08), transparent 55%), var(--card); box-shadow: none; }
    }
    @media (prefers-reduced-transparency: reduce), print {
      body { background: var(--bg); }
      section.chapter.band { background: var(--band); }
      .cell, .pillar, .pain, .price-aside, details { background: var(--card); }
      .pillar.flagship { background: radial-gradient(120% 130% at 12% 0%, rgba(163,230,53,.07), transparent 55%), var(--card); }
      .frame, .price-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
      .frame { background: var(--frame-bg); border-color: var(--border); box-shadow: var(--frame-shadow); }
      .price-card { background: radial-gradient(130% 110% at 20% 0%, rgba(163,230,53,.08), transparent 55%), var(--card); box-shadow: none; }
    }

    /* ---------- mobile ----------
       Below 720px the desktop .nav-links are hidden, so the header gets
       a burger button that toggles a glass panel with the full menu
       (pillar pages + All modules + Pricing + FAQ). Plus density fixes
       for narrow screens: tighter hero frame + part-row columns, wrap
       on the mock header, slimmer price cards. */
    .burger {
      display: none; place-items: center; width: 32px; height: 32px; border-radius: 980px;
      color: var(--muted); border: 1px solid var(--border); background: transparent; cursor: pointer;
      transition: color .2s var(--ease), border-color .2s var(--ease);
    }
    .burger:hover { color: var(--fg); border-color: var(--fg); }
    .burger svg { width: 15px; height: 15px; }
    .mob-menu {
      position: absolute; top: 52px; left: 12px; right: 12px; z-index: 60;
      display: flex; flex-direction: column; gap: 2px; padding: 8px;
      border: 1px solid var(--border); border-radius: 16px;
      background: var(--nav-bg);
      -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
      box-shadow: 0 24px 60px -24px rgba(0,0,0,.35);
    }
    .mob-menu[hidden] { display: none; }
    .mob-menu a {
      display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
      padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 550; color: var(--fg);
    }
    .mob-menu a:hover, .mob-menu a:focus-visible { background: var(--card-2); }
    .mob-menu a[aria-current="page"] { background: var(--card-2); }
    .mob-menu a small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
    .mob-menu .sep { height: 1px; background: var(--border-soft); margin: 6px 8px; }
    @media (min-width: 721px) { .mob-menu { display: none; } }
    @media (max-width: 720px) {
      .nav { gap: 14px; }
      .burger { display: grid; }
    }
    @media (max-width: 560px) {
      .hero { padding-top: 84px; }
      .stage { padding: 0 16px; }
      .frame { padding: 18px 16px; }
      .part-row { grid-template-columns: 92px 1fr 46px; gap: 10px; }
      .part-name { font-size: 12.5px; }
      .mock-head { flex-wrap: wrap; row-gap: 8px; }
      .price-card, .price-aside { padding: 28px 22px; }
      .price-line .now { font-size: 52px; }
      .nav-cta { gap: 10px; }
    }
    @media (max-width: 420px) { .nav-cta .login { display: none; } }