:root {
    --bg:            #000000;   /* Sabbo call 2026-07-02: landing keeps the PURE-BLACK galaxy — deeper than the app ramp on purpose */
    --bg-elev:       #050505;
    --bg-card:       #0A0A0A;
    --line:          rgba(255,255,255,0.07);  /* = app --surface-deep-border */
    --line-2:        rgba(255,255,255,0.14);  /* = app --surface-deep-border-hov */
    --fg:            #f4f1ff;
    --fg-dim:        rgba(244,241,255,0.65);
    --fg-mute:       rgba(244,241,255,0.45);
    --purple:        #BF5AF2;
    --purple-deep:   #8b3df5;
    --purple-glow:   #d4a8ff;
    --gold:          #D4A017;
    --gold-glow:     #f4c542;
    --green:         #4ade80;
    --red:           #ff6b6b;
    --gradient:      linear-gradient(135deg, #BF5AF2 0%, #D4A017 100%);
    --gradient-flat: linear-gradient(135deg, #BF5AF2 0%, #8b3df5 100%);
    /* P0-3: app card shadows (dark) so landing/app cards share depth */
    --shadow-card: inset 0 1px 0 hsl(0 0% 100% / 0.04), 0 1px 2px hsl(0 0% 0% / 0.20);
    --shadow-card-hover: inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 2px 6px hsl(0 0% 0% / 0.28);
  }

  /*  ───────────────────────────────────────────────────────────────────────
      Light-mode override block — Phase 3A infrastructure.
      Mirrors the cool / sterile (Stripe-like) light palette from
      app/globals.css :root. Brand purple/gold preserved at slightly darker
      stops for AA contrast on white surfaces.
      ─────────────────────────────────────────────────────────────────────── */
  [data-theme="light"] {
    --bg:            #f5f5f7;            /* cool light canvas */
    --bg-elev:       #ffffff;            /* card surfaces on top of canvas */
    --bg-card:       #ffffff;            /* white cards */
    --line:          rgba(0,0,0,0.08);   /* subtle hairline */
    --line-2:        rgba(0,0,0,0.14);   /* slightly stronger border */
    --fg:            #0a0a0c;            /* near-black text */
    --fg-dim:        rgba(10,10,12,0.70);
    --fg-mute:       rgba(10,10,12,0.48);
    --purple:        #B044E8;            /* slightly darker — clears AA on white */
    --purple-deep:   #7C28E0;
    --purple-glow:   #d4a8ff;
    --gold:          #B8870D;            /* darker for contrast on white */
    --gold-glow:     #E8B928;
    --green:         #16A34A;            /* darker green for white-bg readability */
    --red:           #DC2626;
    --gradient:      linear-gradient(135deg, #B044E8 0%, #B8870D 100%);
    --gradient-flat: linear-gradient(135deg, #B044E8 0%, #7C28E0 100%);
    /* P0-3: app card shadows (light) */
    --shadow-card: 0 0 0 1px hsl(0 0% 0% / 0.03), 0 1px 2px hsl(0 0% 0% / 0.03), 0 4px 12px hsl(0 0% 0% / 0.04);
    --shadow-card-hover: 0 0 0 1px hsl(0 0% 0% / 0.04), 0 2px 6px hsl(0 0% 0% / 0.05), 0 12px 28px hsl(0 0% 0% / 0.06);
  }
  [data-theme="light"] ::selection { background: var(--purple); color: #ffffff; }

  /* ── Theme toggle button (top nav + pill nav) ──────────────────────── */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin-right: 6px;
    border-radius: 8px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    flex-shrink: 0;
  }
  .theme-toggle:hover {
    background: var(--line);
    border-color: var(--line-2);
  }
  .theme-toggle svg { width: 16px; height: 16px; opacity: 0.85; }
  .theme-toggle:hover svg { opacity: 1; }
  [data-theme="dark"]  .theme-toggle .sun-icon  { display: block; }
  [data-theme="dark"]  .theme-toggle .moon-icon { display: none; }
  [data-theme="light"] .theme-toggle .sun-icon  { display: none; }
  [data-theme="light"] .theme-toggle .moon-icon { display: block; }
  * { box-sizing: border-box; }
  a.logo, a.pill-logo { text-decoration: none; color: inherit; cursor: pointer; }
  html { scroll-behavior: smooth; scroll-padding-top: 100px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* P0-2: Inter-first, matches app */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01', 'cv11';
  }
  .serif { font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-style: normal; letter-spacing: -0.04em; }
  .mono  { font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--purple); color: white; }

  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
  .wrap-sm { max-width: 960px; margin: 0 auto; padding: 0 28px; }

  .eyebrow { font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--fg-mute); }
  .eyebrow .dot { display: inline-block; width: 5px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.55); margin-right: 10px; box-shadow: none; vertical-align: middle; }

  h1,h2,h3 { margin: 0; font-weight: 500; letter-spacing: -0.035em; color: var(--fg); }
  p { margin: 0; line-height: 1.55; }

  /* Top announcement bar — Linear/Raycast premium SaaS pattern */
  .announce { position: relative; z-index: 62;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0;
    font-size: 12.5px;
    height: 36px;
  }
  .announce-inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; height: 100%;
    gap: 12px;
  }
  /* Left edge: NEW chip */
  .ann-left { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
  .ann-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px 2px 7px; border-radius: 4px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
    color: #fff;
    background: var(--gradient-flat);
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(212,168,255,0.3) inset;
  }
  .ann-chip .live-dot {
    width: 5px; height: 5px; border-radius: 99px;
    background: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255,107,107,0.28), 0 0 8px rgba(255,107,107,0.8);
    animation: pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  /* Center: the news as a tappable sentence */
  .ann-news {
    justify-self: center;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg);
    font-weight: 500; letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
  }
  .ann-news .ann-dim { color: var(--fg-mute); font-weight: 400; }
  .ann-news .ann-arr {
    opacity: 0.5; transition: transform .15s ease, opacity .15s ease;
    margin-left: 2px;
  }
  .ann-news:hover .ann-arr { transform: translateX(3px); opacity: 1; }
  .ann-news:hover .ann-dim { color: var(--fg-dim); }
  /* Right edge: CTA */
  .ann-right { justify-self: end; display: inline-flex; align-items: center; }
  .ann-btn { display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--fg);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: background .12s ease, border-color .12s ease;
  }
  .ann-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
  }
  .ann-btn svg { opacity: 0.7; transition: opacity .12s, transform .12s; }
  .ann-btn:hover svg { opacity: 1; transform: translateX(1px); }

  @media (max-width: 720px) {
    .announce-inner { grid-template-columns: auto 1fr auto; }
    .ann-news { justify-self: start; font-size: 12px; }
    .ann-news .ann-dim { display: none; }
  }

  /* ============ NAV ============ */
  .nav-top { position: absolute; top: 0; left: 0; right: 0; z-index: 60; padding: 22px 0;
    background: transparent; border: none;
    transform-origin: top center;
    will-change: transform, opacity;
    transition: opacity .45s cubic-bezier(.22,1,.36,1),
                transform .45s cubic-bezier(.22,1,.36,1);
  }
  .nav-top.hidden {
    opacity: 0;
    transform: translateY(-18px) scale(0.96);
    pointer-events: none;
  }
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .nav-inner .logo { justify-self: start; }
  .nav-inner .nav-links { justify-self: center; }
  .nav-inner .nav-cta { justify-self: end; display: flex; align-items: center; gap: 18px; }
  .nav-top .nav-login {
    font-size: 13px; font-weight: 500; color: var(--fg); opacity: 0.78;
    letter-spacing: -0.005em; transition: opacity .15s, color .15s;
    text-decoration: none; white-space: nowrap;
    /* Real hit-target. Bare text was ~13×17 — too tight to click reliably,
       especially with mouse-jitter or trackpad hover. Padding expands the
       click box; small negative margin keeps the visible position identical
       so the layout doesn't shift. */
    display: inline-block; padding: 10px 8px; margin: -10px -8px;
  }
  .nav-top .nav-login:hover { opacity: 1; color: #fff; }
  .nav-top .nav-links a {
    color: var(--fg); opacity: 0.78; transition: opacity .15s, color .15s;
    font-weight: 500; letter-spacing: -0.005em;
    display: inline-block; padding: 10px 8px; margin: -10px -8px;
  }
  .nav-top .nav-links a:hover { opacity: 1; color: #fff; }
  .nav-top .logo-txt { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--fg); }

  /* Floating pop-down pill — morphs in as flat nav exits.
     IMPORTANT: no transforms / filters / will-change on ANY ancestor of the
     pill, or backdrop-filter silently stops working (the ancestor becomes the
     containing block for the filter and the filter ends up sampling nothing
     behind the pill). Animate opacity only on the wrap; let the pill animate
     its own transform via a wrapper. */
  .nav-pill-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 61; display: flex; justify-content: center;
    pointer-events: none; padding-top: 14px;
  }
  .nav-pill-wrap.show {
    /* marker class — child .nav-pill reacts via its own selector */
  }
  /* pointer-events: none until .show is on the wrap. Without this, the
     invisible pill (opacity 0, translated -14px up) sits over the flat nav
     at the top of the page and intercepts clicks/hovers — you'd land on the
     real link sometimes and the ghost pill link other times depending on
     where the cursor was inside the 14px overlap. Hard to debug because
     both nav rows point to the same hashes; only the hit-feel was off. */
  .nav-pill { pointer-events: none; display: flex; align-items: center; gap: 22px;
    position: relative;
    isolation: isolate;
    /* Solid-enough tint so the pill never reads as transparent even before
       backdrop-filter is fully resolved — this kills the "transparent → blur
       snap" glitch without changing the original opacity-based reveal. */
    background: rgba(8, 8, 8, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px; padding: 8px 8px 8px 18px;
    opacity: 0;
    translate: 0 -14px;
    /* Direction-aware transition:
       - On EXIT (no .show): smooth 0.35s opacity fade + translate up
       - On ENTER (.show added): opacity snaps to 1 instantly so
         backdrop-filter is fully computed from frame one (no transparent→
         blur glitch), only translate animates. */
    transition: opacity .35s cubic-bezier(.22,1,.36,1),
                translate .4s cubic-bezier(.22,1,.36,1),
                background .3s ease,
                border-color .3s ease,
                box-shadow .3s ease;
    box-shadow:
      0 20px 60px -20px rgba(0,0,0,0.55),
      0 8px 24px -8px rgba(182,107,255,0.22),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .nav-pill-wrap.show .nav-pill {
    translate: 0 0;
    opacity: 1;
    pointer-events: auto;
    /* Instant opacity on enter so backdrop-filter is live immediately. */
    transition: opacity 0s linear 0s,
                translate .4s cubic-bezier(.22,1,.36,1),
                background .3s ease,
                border-color .3s ease,
                box-shadow .3s ease;
  }
  /* .scrolled state adjusts tint slightly — backdrop-filter stays identical */
  .nav-pill-wrap.scrolled .nav-pill,
  .nav-pill.scrolled {
    background: rgba(8, 8, 8, 0.62);
    border-color: rgba(255,255,255,0.18);
    box-shadow:
      0 20px 60px -18px rgba(0,0,0,0.55),
      0 8px 24px -8px rgba(139,61,245,0.25),
      inset 0 1px 0 rgba(255,255,255,0.14);
  }
  /* Soft inner highlight for subtle depth — no vignette, keep it glassy. */
  .nav-pill::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .nav-pill-wrap.scrolled .nav-pill::before,
  .nav-pill.scrolled::before { opacity: 1; }
  .nav-pill-wrap.show .nav-pill { transform: scale(1); }
  .nav-pill .pill-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
  .nav-pill .pill-logo img { width: 28px; height: 28px; border-radius: 8px; display: block;
    box-shadow: 0 4px 14px rgba(139,61,245,0.4); }
  .nav-pill .pill-links { display: flex; gap: 22px; font-size: 13px; color: var(--fg); font-weight: 500; padding: 0 6px; letter-spacing: -0.005em; }
  .nav-pill .pill-links a {
    opacity: 0.78; transition: opacity .15s;
    /* Real hit-target inside the floating pill — tight gap + 13px text
       made these effectively un-clickable on a moving cursor. Vertical
       padding expands the box; negative vertical margin keeps the pill
       height unchanged. */
    display: inline-block; padding: 10px 6px; margin: -10px -6px;
  }
  .nav-pill .pill-links a:hover { opacity: 1; }
  .nav-pill .btn-demo {
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(244,241,255,0.94);
    color: #0a0a0c;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      0 6px 18px -10px rgba(0,0,0,0.6);
  }
  .nav-pill .btn-demo:hover {
    background: #ffffff;
    border-color: rgba(255,255,255,0.25);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.85),
      0 10px 24px -10px rgba(0,0,0,0.7);
  }
  .nav-pill .btn-demo .arrow { opacity: 0.6; }
  .nav-pill .btn-demo:hover .arrow { opacity: 0.9; }
  .nav-pill .pill-cta { display: flex; align-items: center; gap: 14px; }
  .nav-pill .pill-login {
    font-size: 13px; font-weight: 500; color: var(--fg); opacity: 0.78;
    letter-spacing: -0.005em; transition: opacity .15s; text-decoration: none;
    white-space: nowrap;
    /* Same hit-target treatment as the other pill links. */
    display: inline-block; padding: 10px 8px; margin: -10px -8px;
  }
  .nav-pill .pill-login:hover { opacity: 1; }

  .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
  .logo-mark { width: 32px; height: 32px; border-radius: 9px;
    background: url('../247-logo.png') center/cover, var(--gradient-flat);
    box-shadow: 0 4px 16px rgba(182,107,255,0.4), inset 0 1px 0 rgba(255,255,255,0.15); }
  .nav-links { display: flex; gap: 28px; font-size: 13px; color: var(--fg); font-weight: 500; letter-spacing: -0.005em; }
  .nav-links a {
    opacity: 0.78; transition: opacity .15s;
    /* Generic fallback hit-target. .nav-top .nav-links a above overrides
       this with the same intent — kept here so any other consumer of
       .nav-links inherits a usable click box. */
    display: inline-block; padding: 10px 8px; margin: -10px -8px;
  }
  .nav-links a:hover { opacity: 1; }
  .btn-primary, .btn-ghost {
    padding: 10px 18px 10px 20px; border-radius: 8px;
    font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
    white-space: nowrap;
    color: var(--fg);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    position: relative;
  }
  .btn-primary > *, .btn-ghost > * { position: relative; z-index: 1; }
  .btn-primary:hover, .btn-ghost:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.16);
  }
  .btn-primary svg, .btn-ghost svg { opacity: 0.7; transition: opacity .12s ease, transform .12s ease; }
  .btn-primary:hover svg, .btn-ghost:hover svg { opacity: 1; transform: translateX(1px); }

  .btn-demo {
    padding: 7px 14px 7px 15px; border-radius: 7px;
    font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
    white-space: nowrap;
    color: var(--fg);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s ease, border-color .12s ease;
    position: relative;
  }
  .btn-demo:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.16);
  }
  .btn-demo .arrow { opacity: 0.7; transition: transform .12s ease, opacity .12s ease; }
  .btn-demo:hover .arrow { transform: translateX(1px); opacity: 1; }

  /* ============ HERO BACKDROP LAYERS ============ */
  /* P1-4: dead .hero-grid rules removed (node deleted; galaxy starfield won) */
  .hero-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  }
  .hero-glow .hero-topdark {
    position: absolute; top: 0; left: 0; right: 0; height: 55%;
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.15) 75%, transparent 100%);
    pointer-events: none;
  }
  .hero-glow::before {
    content: ''; position: absolute;
    left: 50%; bottom: -15%;
    width: 70%; height: 40%;
    transform: translateX(-50%);
    /* Narrow, low purple kiss confined to the bottom near the bars. Must
       NOT spread into the mid-hero — the title halo is the main light source,
       and the galaxy edges stay dark. */
    background:
      radial-gradient(ellipse 45% 90% at 50% 100%,
        rgba(139,61,245,0.18) 0%,
        rgba(139,61,245,0.08) 30%,
        rgba(139,61,245,0.03) 55%,
        transparent 80%);
    filter: blur(60px);
  }
  .hero-glow::after {
    content: ''; position: absolute;
    left: 50%; bottom: -8%;
    width: 45%; height: 22%;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse 55% 90% at 50% 100%,
        rgba(212,160,23,0.06) 0%,
        rgba(212,160,23,0.02) 50%,
        transparent 85%);
    filter: blur(50px);
  }

  .hero-scanline { display: none; }

  /* ============ STARFIELD (warp-speed galaxy drift) ============ */
  .hero-stars {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    /* Stars cover most of the hero (edges + mid) but the very center is
       slightly knocked back so the headline has breathing room. */
    mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.75) 18%, black 45%, transparent 98%);
    -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.75) 18%, black 45%, transparent 98%);
    opacity: 0.48;
    mix-blend-mode: screen;
  }
  .hero-stars canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* ============ HERO WISPS ============ */
  .hero-wisps { display: none !important; position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible;
    mask-image: linear-gradient(180deg, transparent 0%, black 4%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 4%, black 94%, transparent 100%);
  }
  .hero-wisps svg { position: absolute; bottom: -10%; top: auto; left: 50%; transform: translateX(-50%);
    width: 100vw; min-width: 1600px; height: 65%; max-width: none; opacity: 0.9;
  }
  .wisp { fill: none; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
  .wisp-main { stroke-width: var(--wisp-thick, 2.2); opacity: var(--wisp-opacity, 0.85); }
  .wisp-glow { stroke-width: calc(var(--wisp-thick, 2.2) * 6); opacity: calc(var(--wisp-opacity, 0.85) * 0.4); }
  .wisp-1 { stroke: url(#wispGrad1); animation: wispFlow1 var(--wisp-speed, 14s) ease-in-out infinite; }
  .wisp-2 { stroke: url(#wispGrad2); animation: wispFlow2 var(--wisp-speed, 14s) ease-in-out infinite; }
  .wisp-3 { stroke: url(#wispGrad1); animation: wispFlow1 calc(var(--wisp-speed, 14s) * 1.15) ease-in-out infinite; animation-delay: -3s; }
  .wisp-4 { stroke: url(#wispGrad2); animation: wispFlow2 calc(var(--wisp-speed, 14s) * 1.3) ease-in-out infinite; animation-delay: -5s; }
  .hero-wisps[data-show="off"] { display: none; }
  .hero-wisps[data-count="2"] .wisp-3, .hero-wisps[data-count="2"] .wisp-4 { display: none; }
  .hero-wisps[data-animate="off"] .wisp { animation: none !important; }
  /* Shape switcher: show only the active shape group */
  .hero-wisps .shape-edges, .hero-wisps .shape-orbit, .hero-wisps .shape-aurora { display: none; }
  .hero-wisps[data-shape="edges"] .shape-edges { display: block; }
  .hero-wisps[data-shape="orbit"] .shape-orbit { display: block; }
  .hero-wisps[data-shape="aurora"] .shape-aurora { display: block; }
  .hero-wisps[data-animate="on"] .shape-orbit .orbit-main,
  .hero-wisps[data-animate="on"] .shape-orbit .orbit-echo { animation: orbitDrift var(--wisp-speed, 40s) ease-in-out infinite; }
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-2,
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-4 { animation: auroraDrift var(--wisp-speed, 40s) ease-in-out infinite; }
  @keyframes wispFlow1 {
    0%, 100% { transform: translateX(0) scale(1); opacity: 0.6; }
    50%      { transform: translateX(-10px) scale(1.02); opacity: 1; }
  }
  @keyframes wispFlow2 {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50%      { transform: translateX(12px); opacity: 1; }
  }
  @keyframes orbitDrift {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50%      { opacity: 0.95; transform: translateY(-8px); }
  }
  /* Flowy comet — a bright segment travels smoothly along the static arc */
  @keyframes orbitComet {
    0%   { stroke-dashoffset: 3000; opacity: 0; }
    8%   { opacity: 0.9; }
    50%  { opacity: 0.9; }
    92%  { opacity: 0.9; }
    100% { stroke-dashoffset: -3000; opacity: 0; }
  }
  /* Glow halo gentle breathing */
  @keyframes orbitHaloPulse {
    0%, 100% { opacity: 0.14; }
    50%      { opacity: 0.28; }
  }
  .hero-wisps[data-animate="on"] .shape-orbit .orbit-main-hi {
    stroke-dasharray: 520 6000;
    stroke-dashoffset: 3000;
    animation: orbitComet 9s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  }
  .hero-wisps[data-animate="on"] .shape-orbit .orbit-echo-hi {
    stroke-dasharray: 380 6000;
    stroke-dashoffset: 3000;
    animation: orbitComet 11s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
    animation-delay: -3.2s !important;
  }
  .hero-wisps[data-animate="on"] .shape-orbit .orbit-inner-hi {
    stroke-dasharray: 280 5000;
    stroke-dashoffset: 2500;
    animation: orbitComet 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
    animation-delay: -1.8s !important;
  }
  .hero-wisps[data-animate="on"] .shape-orbit .orbit-glow {
    animation: orbitHaloPulse 5.5s ease-in-out infinite !important;
  }
  @keyframes auroraDrift {
    0%, 100% { opacity: 0.4; transform: translateX(0) scaleY(1); }
    50%      { opacity: 0.8; transform: translateX(-20px) scaleY(1.05); }
  }
  /* Glow layers — pulse brightness */
  @keyframes auroraPulse {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.20; }
  }
  /* Thin lines — shimmer along the path */
  @keyframes auroraShimmer {
    0%   { stroke-dashoffset: 2400; opacity: 0.35; }
    50%  { opacity: 0.95; }
    100% { stroke-dashoffset: 0;    opacity: 0.35; }
  }
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-1,
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-3 {
    animation: auroraPulse 5.5s ease-in-out infinite !important;
  }
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-3 {
    animation-delay: -2.2s !important;
  }
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-2,
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-4 {
    stroke-dasharray: 600 2400;
    animation: auroraShimmer 6.5s linear infinite !important;
  }
  .hero-wisps[data-animate="on"] .shape-aurora .aurora-4 {
    animation-delay: -3.2s !important;
    animation-duration: 7.2s !important;
  }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    min-height: 100vh;
    padding: 160px 0 200px;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;
  }
  /* Subtle section separator — thin white hairline that fades at the edges so
     it reads as a whisper, not a hard rule. Centered under the hero. */
  .hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.14) 30%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.14) 70%,
      transparent 100%);
  }
  .hero-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 16px 6px 6px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(8,8,8,0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
      0 10px 28px -10px rgba(0,0,0,0.55),
      0 0 0 1px rgba(212,168,255,0.10),
      inset 0 1px 0 rgba(255,255,255,0.08);
    font-size: 12.5px;
    color: var(--fg);
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden; /* clip the shine sweep */
  }
  /* Subtle diagonal shine that sweeps across the pill every ~5s. Replaces
     the old rotating conic outline — reads as a whisper of light passing
     over the surface rather than a spinning border. */
  .hero-pill::before {
    content: ''; position: absolute;
    top: 0; bottom: 0;
    width: 55%;
    left: -60%;
    background: linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.00) 30%,
      rgba(255,255,255,0.18) 50%,
      rgba(244,197,66,0.14) 60%,
      rgba(255,255,255,0.00) 75%,
      transparent 100%);
    pointer-events: none;
    z-index: 2;
    animation: pillShine 5.5s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  @keyframes pillShine {
    0%   { left: -60%; opacity: 0; }
    12%  { opacity: 1; }
    60%  { opacity: 1; }
    72%  { left: 120%; opacity: 0; }
    100% { left: 120%; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .hero-pill::before { animation: none; display: none; } }
  /* Red pulsing live-dot (replaces the old "Now" purple chip) */
  .hero-pill .pill-now {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    flex-shrink: 0;
    position: relative;
  }
  .hero-pill .pill-now .pulse-core {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff6b6b 0%, #ff3b3b 60%, #c01b1b 100%);
    box-shadow:
      0 0 0 0 rgba(255, 59, 59, 0.55),
      0 0 8px rgba(255, 59, 59, 0.6);
    animation: pillPulseDot 1.8s ease-out infinite;
  }
  @keyframes pillPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(255,59,59,0.55), 0 0 8px rgba(255,59,59,0.6); }
    70%  { box-shadow: 0 0 0 9px rgba(255,59,59,0),    0 0 8px rgba(255,59,59,0.6); }
    100% { box-shadow: 0 0 0 0 rgba(255,59,59,0),      0 0 8px rgba(255,59,59,0.6); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-pill .pill-now .pulse-core { animation: none; }
  }
  /* Desktop default — show long copy, hide short variant */
  .hero-pill .pill-short { display: none; }
  .hero-pill .pill-full { display: inline; }
  .hero-pill b { color: var(--fg); font-weight: 600; }
  .hero-pill .pill-dot {
    width: 6px; height: 6px; border-radius: 99px;
    background: var(--purple);
    box-shadow: 0 0 10px var(--purple);
    display: inline-block;
  }
  .hero-pill .chev { opacity: 0.5; font-size: 11px; margin-left: 2px; }

  .hero h1 {
    position: relative;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(52px, 7.4vw, 104px);
    line-height: 1.05;
    letter-spacing: -0.04em; /* P1-3: SOP §7 hero tracking */
    margin: 0 auto 32px;
    max-width: 20ch;
    color: var(--fg);
    /* Tight white glow hugging the letters + faint purple ambient. The white
       layer is deliberately small-radius so it reads as "lit text" not a
       fuzzy bloom. */
    text-shadow:
      0 0 8px rgba(244,241,255,0.22),
      0 0 24px rgba(244,241,255,0.12),
      0 0 70px rgba(139,61,245,0.10);
  }
  /* Very soft purple halo BEHIND the headline, tight around the text so it
     doesn't bloom into a wide fuzz on the galaxy. */
  .hero h1::before {
    content: ''; position: absolute;
    left: 50%; top: 50%;
    width: 90%; height: 130%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse 45% 35% at 50% 50%,
      rgba(139,61,245,0.10) 0%,
      rgba(139,61,245,0.04) 40%,
      transparent 80%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
  }
  .hero h1 .verb-rotator {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    height: 1.4em;
    width: 9ch;
    text-align: center;
    font-style: italic;
    overflow: visible;
    padding-bottom: 0.35em;
    margin-bottom: -0.35em;
  }
  .hero h1 .verb-word {
    padding-bottom: 0.35em;
  }
  .hero h1 .verb-word {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(14px);
    white-space: nowrap;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, #BF5AF2 0%, #d4a8ff 25%, #f4c542 65%, #D4A017 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
  }
  .hero h1 .verb-word.verb-active { opacity: 1; transform: translateX(-50%) translateY(0); }
  .hero h1 .verb-word.verb-exit   { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  .hero h1 .verb-period {
    display: inline-block;
    margin-left: 2px;
    vertical-align: baseline;
  }


  /* Tagline — editorial Playfair italic with gold-accent emphasis */
  .hero-tagline {
    display: block;
    max-width: 62ch;
    margin: 0 auto 44px;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--fg-dim);
    text-align: center;
  }
  .hero-tagline em {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(100deg, #f4c542 0%, #D4A017 50%, #f4c542 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* legacy compositional tokens (kept for backwards compat) */
  .hero-tagline .ht-word { display: inline; color: var(--fg); }
  .hero-tagline .ht-sep {
    display: inline-block;
    width: 28px;
    height: 1px;
    vertical-align: middle;
    margin: 0 10px;
    background: linear-gradient(90deg, rgba(212,168,255,0) 0%, rgba(212,168,255,0.55) 50%, rgba(212,168,255,0) 100%);
  }
  .hero-tagline .ht-247 {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.015em;
    background: linear-gradient(100deg, #f4c542 0%, #D4A017 50%, #f4c542 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (max-width: 560px) {
    .hero-tagline { font-size: 19px; max-width: 38ch; }
    .hero-tagline .ht-sep { width: 20px; }
  }

  .hero-positioning {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: rgba(244, 241, 255, 0.78);
    max-width: 38ch;
    margin: 18px auto 6px;
    text-align: center;
    letter-spacing: -0.005em;
  }
  .hero-positioning em {
    font-style: italic;
    background: linear-gradient(135deg, #BF5AF2 0%, #D4A017 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
  }
  @media (max-width: 560px) {
    .hero-positioning { font-size: 15.5px; max-width: 32ch; margin-top: 14px; }
  }

  .hero-cta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
  }
  .hero-cta-hint {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }
  .hero-cta-hint .hint-arr {
    color: var(--fg-mute);
    animation: hintBob 1.8s ease-in-out infinite;
  }
  @keyframes hintBob {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(3px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .hero-cta-hint .hint-arr { animation: none; } }
  /* Hero CTAs — match the floating nav pill (dark frosted glass, no 3D embossing) */
  .btn-cta-primary, .btn-cta-secondary {
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(8, 8, 8, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 20px 60px -20px rgba(0,0,0,0.7),
      0 8px 24px -8px rgba(182,107,255,0.25);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: transform .2s ease, border-color .2s, background .2s, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.005em;
  }
  .btn-cta-primary > *, .btn-cta-secondary > * { position: relative; z-index: 1; }
  .btn-cta-primary:hover, .btn-cta-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.16);
    background: rgba(26, 18, 40, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 20px 60px -20px rgba(0,0,0,0.75),
      0 10px 28px -8px rgba(182,107,255,0.35);
  }

  /* hero-inner needs its own stacking context above wisps */
  .hero-inner { position: relative; z-index: 2; width: 100%; }

  /* removed unused .stats band CSS */

  /* ============ SECTION ============ */
  section { padding: 120px 0; position: relative; }
  @media (max-width: 900px) { section { padding: 80px 0; } }
  @media (max-width: 640px) { section { padding: 56px 0; } }
  .section-head { max-width: 780px; margin: 0 auto 72px; text-align: center; }
  .section-head .eyebrow { margin-bottom: 20px; display: inline-block; }
  .section-head h2 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 400; }
  .section-head h2 em { font-weight: 500;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    color: var(--fg);
    letter-spacing: -0.02em;
  }
  .section-head p { margin-top: 22px; font-size: 17px; color: var(--fg-dim); }

  /* ============ STAGES (problem) ============ */
  .stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .stage { background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 20px; padding: 30px 30px 32px; position: relative; overflow: hidden;
    transition: border-color .2s, transform .2s;
    display: flex; flex-direction: column; }
  .stage:hover { border-color: rgba(182,107,255,0.3); transform: translateY(-4px); }
  /* ascension accent: Rookie purple → Intermediate magenta → Operator gold */
  .stage::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; opacity: 0.65;
    background: linear-gradient(90deg, transparent, var(--stage-accent, rgba(191,90,242,0.45)), transparent);
  }
  .stages .stage:nth-child(1) { --stage-accent: rgba(191,90,242,0.5); }
  .stages .stage:nth-child(2) { --stage-accent: rgba(232,121,249,0.5); }
  .stages .stage:nth-child(3) { --stage-accent: rgba(212,160,23,0.55); }
  .stages .stage:nth-child(1) .stage-num { color: rgba(212,168,255,0.75); }
  .stages .stage:nth-child(2) .stage-num { color: rgba(240,166,248,0.7); }
  .stages .stage:nth-child(3) .stage-num { color: rgba(240,201,74,0.7); }

  .stage-num { font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-mute); margin-bottom: 6px; }
  .stage-label {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic; font-weight: 500;
    font-size: 38px; line-height: 1; letter-spacing: -0.02em;
    color: var(--fg);
    margin-bottom: 14px;
  }
  .stage-range { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--fg-mute);
    letter-spacing: 0.02em; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .stage h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 14px; }
  .stage p { font-size: 14px; color: var(--fg-dim); margin-bottom: 12px; line-height: 1.55; }
  .stage .kicker { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--fg); font-weight: 500; line-height: 1.45; }
  .stage .kicker em { font-weight: 500; color: var(--fg); font-style: italic; font-family: 'Playfair Display', serif; }

  /* Stage visual — a compact pain → solution panel inside each card. */
  .stage-viz {
    margin-top: 22px;
    background: linear-gradient(180deg, rgba(139,61,245,0.05) 0%, rgba(139,61,245,0.02) 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 16px 14px;
    display: grid; gap: 12px;
  }
  .stage-viz .sv-row {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center;
    font-size: 12.5px;
  }
  .stage-viz .sv-icon {
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  }
  .stage-viz .sv-label { color: var(--fg-dim); }
  .stage-viz .sv-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px; font-weight: 500;
    color: #ff7a7a; letter-spacing: 0.02em;
  }
  .stage-viz .sv-split {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(182,107,255,0.35) 50%, transparent 100%);
    margin: 2px 0;
    position: relative;
  }
  .stage-viz .sv-split::before {
    content: "247"; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    font-size: 10px; color: var(--fg-dim);
    background: var(--bg-card); padding: 0 8px;
    letter-spacing: 0.02em;
  }
  .stage-viz .sv-row.fix .sv-val { color: #7FE7C4; }
  .stage-viz .sv-row.fix .sv-icon { background: rgba(127,231,196,0.08); border-color: rgba(127,231,196,0.2); }

  /* ============ LAYERS (How it works) ============ */
  .layers { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .layer { display: grid; grid-template-columns: 200px 1fr 360px; gap: 40px;
    padding: 40px 36px; background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 24px; align-items: center; position: relative; overflow: hidden;
  }
  /* removed left-accent gradient bar (AI trope) — rely on card border + content hierarchy */
  .layer-head .eyebrow { display: block; margin-bottom: 12px; }
  .layer-head .num {  font-size: 64px; line-height: 1;
    letter-spacing: -0.04em; color: var(--fg); opacity: 0.9;
  }
  .layer-head .num em { 
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    color: var(--fg);
  }
  .layer-body h3 { font-size: 32px; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 6px; }
  .layer-body .sub { font-size: 13.5px; color: var(--fg-mute); letter-spacing: -0.005em; text-transform: none; font-weight: 500; margin-bottom: 14px; }
  .layer-body p { font-size: 15px; color: var(--fg-dim); margin-bottom: 14px; }
  .layer-body .takeaway { font-size: 14px; color: var(--fg); 
     font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }

  /* Visualizations inside layers */
  .viz { height: 200px; border-radius: 16px; position: relative; overflow: hidden;
    background: var(--bg-elev); border: 1px solid var(--line); }
  .viz-context {
    background:
      radial-gradient(circle at 20% 50%, rgba(182,107,255,0.18), transparent 50%),
      radial-gradient(circle at 80% 30%, rgba(139,61,245,0.18), transparent 50%),
      var(--bg-elev);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px;
  }
  .viz-context .datum { background: rgba(182,107,255,0.08); border: 1px solid rgba(182,107,255,0.15);
    border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; }
  .viz-context .datum .l { font-size: 10.5px; color: var(--fg-mute); text-transform: none; letter-spacing: -0.005em; font-weight: 500; }
  .viz-context .datum .v { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
  .viz-context .datum .d { font-size: 10.5px; color: var(--green); font-variant-numeric: tabular-nums; font-weight: 500; }

  .viz-skills { padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; justify-content: center; background:
      radial-gradient(circle at 15% 20%, rgba(182,107,255,0.10), transparent 55%),
      radial-gradient(circle at 95% 90%, rgba(212,168,255,0.08), transparent 50%),
      var(--bg-elev);
  }
  .viz-skills .skill-head { display: flex; justify-content: space-between; align-items: center;
    font-size: 10.5px; color: var(--fg-mute); letter-spacing: -0.005em; font-weight: 500;
    padding: 0 2px 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
  .viz-skills .skill-head .live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
  .viz-skills .skill-head .live .d { width: 5px; height: 5px; border-radius: 99px; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.6s ease-in-out infinite; }
  .viz-skills .skill { display: grid; grid-template-columns: 1fr 110px 44px; gap: 12px; align-items: center;
    padding: 7px 10px; background: rgba(255,255,255,0.025); border-radius: 8px; border: 1px solid var(--line);
    transition: border-color .25s, background .25s; }
  .viz-skills .skill:hover { border-color: rgba(182,107,255,0.28); background: rgba(182,107,255,0.04); }
  .viz-skills .skill .name { font-size: 12px; color: var(--fg); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .viz-skills .skill .bar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; position: relative; }
  .viz-skills .skill .bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--p,70%); background: linear-gradient(90deg, rgba(139,61,245,0.8), rgba(191,90,242,0.95), rgba(212,168,255,0.85));
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(191,90,242,0.4);
  }
  .viz-skills .skill .pct { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fg-dim); text-align: right; letter-spacing: -0.01em; font-weight: 500; }

  .viz-tools { padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: center; }
  .viz-tools .tool { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line);
    display: grid; place-items: stretch; color: var(--fg-dim);
    transition: transform .2s, border-color .2s, box-shadow .2s; position: relative; overflow: hidden;
    padding: 0;
  }
  .viz-tools .tool:hover { border-color: var(--purple); transform: scale(1.05); box-shadow: 0 8px 24px -12px rgba(139,61,245,0.55); }
  .viz-tools .tool .brand-tile {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    overflow: hidden;
  }
  .viz-tools .tool .brand-tile svg { width: 72%; height: 72%; display: block; }
  .viz-tools .tool.more { 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 11px; letter-spacing: -0.01em; font-weight: 500; text-transform: none;
    color: var(--fg-dim); gap: 4px;
    background:
      radial-gradient(rgba(212,168,255,0.18) 1px, transparent 1.5px) 0 0 / 10px 10px,
      linear-gradient(180deg, rgba(139,61,245,0.06), rgba(139,61,245,0.02));
  }
  .viz-tools .tool.more .plus {
    font-size: 22px; font-weight: 400; line-height: 1;
    color: var(--fg);
    margin-bottom: -2px;
  }
  .viz-tools .tool.more span:last-child {
    font-size: 10.5px; color: var(--fg-dim); letter-spacing: -0.005em;
  }

  /* ============ INTEGRATIONS SECTION ============
     Promoted out of "How it works" / Layer 03 into its own top-level section.
     Editorial logo poster — 7 real brand tiles + a "+21 more" tile.
     Grid: 4 cols / 2 rows on desktop, collapses to 2 cols on tablet, 1 on mobile.
     Tile sizing: first row is 2-1-1 (a feature tile spans 2), second row is 1-1-1-1.
  */
  .integrations-section {
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
  }
  .int-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 14px;
  }
  /* Row 3 ribbon: +21 more spans the remaining 3 cols next to Sheets */
  .int-more { grid-column: span 3; }

  /* Raycast-store-inspired card:
     - Dark base, very low-alpha brand-tinted glow in one corner (set per tile)
     - Identical chrome across the grid (logo + name + chevron, then description)
     - Each card has a unique "product-in-use" visual in its lower half
     This is the main colorful moment in a mostly-greyscale page, done on purpose:
     the integration grid is where users WANT to see brand recognition. */
  .int-tile {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .35s ease;
    isolation: isolate;
    background: #070707;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .int-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(255,255,255,0.06);
  }
  /* Brand-tinted glow — each tile sets --tint with its brand color. Kept very
     low alpha so the card reads as dark first, branded second. */
  .int-tile::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 60% 60% at 100% 0%, var(--tint, rgba(255,255,255,0.08)), transparent 70%);
    opacity: 0.55;
    transition: opacity .35s ease;
  }
  .int-tile:hover::before { opacity: 0.85; }
  .int-tile-inner {
    width: 100%; height: 100%;
    position: relative;
    display: flex; flex-direction: column;
    padding: 18px;
    z-index: 1;
  }

  /* Top row — brand chip */
  .int-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 2px;
  }
  .int-logo {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    overflow: hidden;
  }
  .int-logo img {
    width: 18px; height: 18px;
    object-fit: contain;
    display: block;
  }
  .int-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--fg);
    flex: 1;
  }
  .int-chevron {
    color: var(--fg-mute);
    opacity: 0.7;
    transition: opacity .2s ease, transform .25s ease;
    flex-shrink: 0;
  }
  .int-tile:hover .int-chevron { opacity: 1; transform: translateX(2px); }

  .int-desc {
    font-size: 12.5px;
    color: var(--fg-dim);
    line-height: 1.45;
    letter-spacing: -0.005em;
    margin: 2px 0 14px;
  }

  /* The unique-per-card visual area — fills the remaining space */
  .int-viz {
    flex: 1;
    position: relative;
    min-height: 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 14px 0 4px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
  }

  /* Feature tile = row-1 wide */
  .int-feature { grid-column: span 2; }

  /* ===== Per-card visual widgets =====
     Shared primitives used by the 10 unique in-card visuals. Each lives in
     .int-viz. The card itself is dark with a subtle brand tint; these widgets
     are near-monochrome with light accents, matching the 95/5 color brief. */

  /* Mono text colors for widgets */
  .iv-dim  { color: rgba(255,255,255,0.45); }
  .iv-txt  { color: rgba(255,255,255,0.85); }
  .iv-mono { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-variant-numeric: tabular-nums; }

  /* 1. Amazon — SKU feed (3 rows) */
  .iv-feed { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
  .iv-feed-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 11px; align-items: center;
  }
  .iv-feed-sku  { font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,0.55); font-size: 10px; letter-spacing: -0.005em; }
  .iv-feed-qty  { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 11px; }
  .iv-feed-dot  { width: 6px; height: 6px; border-radius: 99px; background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.5); }
  .iv-feed-dot.warn { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); }

  /* 2. Claude — reasoning excerpt */
  .iv-reason { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 5px; padding: 2px 0; }
  .iv-reason-line { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.4; }
  .iv-reason-ord  { font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,0.35); font-size: 10px; padding-top: 1px; flex-shrink: 0; width: 12px; }
  .iv-reason-txt  { color: rgba(255,255,255,0.72); font-size: 11px; letter-spacing: -0.005em; }
  .iv-reason-txt em { font-style: normal; color: var(--fg); font-weight: 500; }

  /* 3. Discord — slash command with autocomplete */
  .iv-slash { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 0; padding: 2px 0; }
  .iv-slash-input {
    padding: 8px 10px; border-radius: 7px 7px 0 0;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-bottom: 0;
    display: flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  }
  .iv-slash-prompt { color: rgba(255,255,255,0.4); }
  .iv-slash-cmd    { color: var(--fg); }
  .iv-slash-caret  { display: inline-block; width: 6px; height: 12px; background: var(--fg); animation: blink 1s steps(2) infinite; }
  .iv-slash-menu {
    border: 1px solid rgba(255,255,255,0.08); border-top: 0;
    border-radius: 0 0 7px 7px;
    background: rgba(0,0,0,0.25);
    overflow: hidden;
  }
  .iv-slash-item { display: flex; justify-content: space-between; padding: 6px 10px; font-size: 11px; }
  .iv-slash-item.hi { background: rgba(255,255,255,0.04); }
  .iv-slash-item .k { color: rgba(255,255,255,0.8); font-family: 'JetBrains Mono', monospace; }
  .iv-slash-item .h { color: rgba(255,255,255,0.4); font-size: 10px; }

  /* 4. Keepa — real BSR + price chart (green BSR area, orange price line, dashed Amazon line) */
  .iv-spark { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
  .iv-spark-head { display: flex; justify-content: space-between; align-items: baseline; }
  .iv-spark-num  { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; color: var(--fg); letter-spacing: -0.02em; }
  .iv-spark-label{ font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-transform: uppercase; }
  .iv-spark-legend { display: inline-flex; gap: 10px; align-items: center; }
  .iv-spark-legend .lg { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 500; }
  .iv-spark-legend .lg i { width: 8px; height: 2px; border-radius: 2px; display: inline-block; }
  .iv-spark-legend .lg-amazon i { background: #FF9900; }
  .iv-spark-legend .lg-buybox i { background: #E91E8C; }
  .iv-spark-legend .lg-bsr    i { background: #43A047; }
  .iv-spark-legend .lg-price  i { background: #FF8C00; }
  .iv-spark-svg  { flex: 1; width: 100%; min-height: 0; }

  /* 5. SellerAmp — ROI verdict card */
  .iv-roi { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
  .iv-roi-chip {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 99px;
    background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.28);
    color: #4ade80; font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
  }
  .iv-roi-chip .check { width: 11px; height: 11px; }
  .iv-roi-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-top: 4px; }
  .iv-roi-stats .v  { font-size: 14px; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
  .iv-roi-stats .k  { font-size: 9.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }

  /* 6. BQool — repricing ladder */
  .iv-price-ladder { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
  .iv-price-row {
    display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
    padding: 5px 10px; border-radius: 7px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
    font-size: 11px;
  }
  .iv-price-row.active { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
  .iv-price-row .seller { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.45); }
  .iv-price-row .you    { color: var(--fg); font-weight: 500; font-size: 10.5px; }
  .iv-price-row .amt    { font-family: 'JetBrains Mono', monospace; color: var(--fg); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 500; text-align: right; }
  .iv-price-row .bar    {
    height: 2px; border-radius: 99px;
    background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.3));
  }

  /* 7. Whop — member count / community */
  .iv-members { width: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  .iv-avatars { display: flex; }
  .iv-avatars > div {
    width: 34px; height: 34px; border-radius: 99px;
    background: rgba(255,255,255,0.06); border: 2px solid #070707;
    margin-left: -8px; display: grid; place-items: center;
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.65);
  }
  .iv-avatars > div:first-child { margin-left: 0; }
  .iv-avatars .more { background: rgba(255,255,255,0.1); color: var(--fg); font-size: 11px; }
  .iv-members-stat  { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; color: var(--fg); letter-spacing: -0.02em; }
  .iv-members-label { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-transform: uppercase; margin-top: -6px; }

  /* 8. Google Sheets — mini spreadsheet */
  /* ── Nova mini-chat (Claude tile) — canned demo, zero-backend ── */
  .nova-demo-tag { margin-left: auto; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #7FE7C4; background: rgba(127,231,196,0.10); border: 1px solid rgba(127,231,196,0.22); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
  .nova-chat { width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 7px; min-height: 0; }
  .nova-msgs { flex: 1; min-height: 68px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; scrollbar-width: none; }
  .nova-msgs::-webkit-scrollbar { display: none; }
  .nc-msg { max-width: 88%; padding: 6px 10px; border-radius: 11px; font-size: 11px; line-height: 1.45; letter-spacing: -0.005em;
    font-family: 'Inter', -apple-system, sans-serif;
    opacity: 0; transform: translateY(4px); animation: ncIn 0.3s ease forwards; }
  .nc-msg.bot { align-self: flex-start; background: rgba(217,119,87,0.10); border: 1px solid rgba(217,119,87,0.18); color: rgba(255,255,255,0.85); border-bottom-left-radius: 4px; }
  .nc-msg.user { align-self: flex-end; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); color: var(--fg); border-bottom-right-radius: 4px; }
  @keyframes ncIn { to { opacity: 1; transform: none; } }
  .nc-msg.typing { display: inline-flex; gap: 3px; padding: 8px 10px; }
  .nc-msg.typing i { width: 4px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.5); animation: ncDot 1s ease-in-out infinite; }
  .nc-msg.typing i:nth-child(2) { animation-delay: 0.15s; }
  .nc-msg.typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes ncDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
  .nova-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .nova-chips button { padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.6); font-size: 10px; font-weight: 500; font-family: 'Inter', sans-serif; cursor: pointer;
    transition: color .2s, border-color .2s, background .2s; }
  .nova-chips button:hover { color: var(--fg); border-color: rgba(217,119,87,0.4); background: rgba(217,119,87,0.08); }
  .nova-input { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
  .nova-input input { flex: 1; min-width: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 9px;
    padding: 7px 10px; font-size: 11px; color: var(--fg); font-family: 'Inter', sans-serif; outline: none; transition: border-color .2s; }
  .nova-input input::placeholder { color: rgba(255,255,255,0.35); }
  .nova-input input:focus { border-color: rgba(217,119,87,0.45); }
  .nova-input button { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, #D97757, #b85c3e); border: none; color: #fff; cursor: pointer;
    transition: transform .15s ease, filter .2s; }
  .nova-input button:hover { filter: brightness(1.12); }
  .nova-input button:active { transform: scale(0.92); }
  @media (max-width: 900px) { .int-tile-claude { grid-row: span 2; } }
  @media (prefers-reduced-motion: reduce) {
    .nc-msg { animation: none; opacity: 1; transform: none; }
    .nc-msg.typing i { animation: none; }
  }

  /* ── Google Sheets — white sheet, rows flow in on a loop ── */
  .iv-gsheet { width: 100%; align-self: stretch; background: #ffffff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12);
    font-family: 'JetBrains Mono', monospace; display: flex; flex-direction: column; margin-bottom: 8px; }
  .gs-bar { display: flex; align-items: center; justify-content: space-between; padding: 5px 9px;
    background: #F1F5F1; border-bottom: 1px solid #DADFDA; }
  .gs-title { font-size: 9px; color: #3C4043; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.005em; }
  .gs-sync { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; color: #137333; font-family: 'Inter', sans-serif; font-weight: 600; }
  .gs-sync i { width: 5px; height: 5px; border-radius: 99px; background: #34A853; animation: pulseDot 1.6s ease-in-out infinite; }
  .gs-grid { display: flex; flex-direction: column; flex: 1; }
  .gs-row { display: grid; grid-template-columns: 20px 1fr 0.9fr 0.7fr; font-size: 9.5px; color: #202124; }
  .gs-row > div { padding: 4px 8px; border-bottom: 1px solid #E8EBE8; border-right: 1px solid #E8EBE8; white-space: nowrap; overflow: hidden; }
  .gs-row > div:first-child { background: #F6F8F6; color: #80868B; text-align: center; padding-left: 0; padding-right: 0; }
  .gs-row > div:last-child { border-right: 0; }
  .gs-row.gs-head { background: #E6F4EA; color: #137333; font-weight: 600; font-family: 'Inter', sans-serif; font-size: 9px; }
  .gs-row.gs-head > div { border-bottom: 1px solid #CEEAD6; background: transparent; color: inherit; }
  .gs-row .pos { color: #137333; font-weight: 600; }
  .gs-row:not(.gs-head) { opacity: 0; animation: gsRowIn .5s ease forwards; }
  .gs-grid .gs-row:nth-child(2) { animation-delay: 0.3s; }
  .gs-grid .gs-row:nth-child(3) { animation-delay: 0.55s; }
  .gs-grid .gs-row:nth-child(4) { animation-delay: 0.8s; }
  .gs-grid .gs-row:nth-child(5) { animation-delay: 1.05s; }
  @keyframes gsRowIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  @keyframes gsRow { 0% { opacity: 0; transform: translateY(-3px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .gs-row:not(.gs-head) { animation: none; opacity: 1; } }

  .iv-sheet { width: 100%; align-self: stretch; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; font-family: 'JetBrains Mono', monospace; font-size: 10px; }
  .iv-sheet-row { display: grid; grid-template-columns: 28px 1fr 1fr; }
  .iv-sheet-row.head { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); font-weight: 500; }
  .iv-sheet-row > div { padding: 5px 8px; border-right: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); }
  .iv-sheet-row > div:last-child { border-right: 0; }
  .iv-sheet-row.head > div { padding: 4px 8px; }
  .iv-sheet-row:last-child > div { border-bottom: 0; }
  .iv-sheet-row .rn { color: rgba(255,255,255,0.3); text-align: center; background: rgba(255,255,255,0.02); }
  .iv-sheet-row .pos { color: #4ade80; }

  /* 9. Rakuten — cashback badge */
  .iv-cashback { width: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  .iv-cashback-pct  { font-family: 'Playfair Display', serif; font-style: italic; font-size: 46px; color: var(--fg); letter-spacing: -0.03em; line-height: 1; }
  .iv-cashback-label{ font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; }
  .iv-cashback-stores { display: flex; gap: 6px; margin-top: 8px; }
  .iv-cashback-stores .s {
    padding: 3px 8px; border-radius: 99px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 9.5px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em;
  }

  /* 10. Google Maps — pin cluster on mini-map */
  .iv-map { width: 100%; align-self: stretch; position: relative; border-radius: 8px; overflow: hidden; background: #0a0612; }
  .iv-map::before {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.04) 26%, transparent 27%) 0 0 / 24px 24px,
      linear-gradient(0deg,  transparent 24%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.04) 26%, transparent 27%) 0 0 / 24px 24px;
    opacity: 0.6;
  }
  .iv-map::after {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80px 30px at 30% 55%, rgba(255,255,255,0.05), transparent 60%),
      radial-gradient(ellipse 60px 25px at 70% 40%, rgba(255,255,255,0.04), transparent 60%);
  }
  .iv-map-pin {
    position: absolute; width: 8px; height: 8px; border-radius: 99px;
    background: var(--fg); border: 2px solid #0a0612;
    box-shadow: 0 0 10px rgba(255,255,255,0.35);
    z-index: 2;
  }
  .iv-map-pin.p1 { top: 28%; left: 22%; }
  .iv-map-pin.p2 { top: 52%; left: 40%; }
  .iv-map-pin.p3 { top: 38%; left: 58%; }
  .iv-map-pin.p4 { top: 65%; left: 72%; }
  .iv-map-pin.p5 { top: 22%; left: 80%; background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.6); }
  .iv-map-pin.p5::after {
    content: ''; position: absolute; inset: -6px; border-radius: 99px;
    border: 1px solid rgba(74,222,128,0.4);
    animation: pulseRing 2s ease-out infinite;
  }
  @keyframes pulseRing {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  .iv-map-label {
    position: absolute; top: 8px; left: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
    z-index: 3;
  }
  .iv-map-count {
    position: absolute; bottom: 8px; right: 10px;
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 15px; color: var(--fg); letter-spacing: -0.01em;
    z-index: 3;
  }
  /* ===== CANCEL-THE-STACK — full-width ribbon, competitor chips get struck ===== */
  .int-footnote {
    margin-top: 32px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--fg-dim);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    letter-spacing: -0.005em;
  }
  .int-footnote a {
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid rgba(212,168,255,0.4);
    padding-bottom: 1px;
    transition: border-color .2s ease;
  }
  .int-footnote a:hover { border-color: var(--purple); }
  .int-foot-dot {
    width: 6px; height: 6px; border-radius: 99px;
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74,222,128,0.6);
    display: inline-block;
  }

  @media (max-width: 900px) {
    .int-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .int-feature { grid-column: span 2; }
  }
  @media (max-width: 540px) {
    .int-grid { grid-template-columns: 1fr; grid-auto-rows: 160px; }
    .int-feature { grid-column: span 1; }
  }

  /* ============ R&D ============ */
  .rd-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: 28px;
    padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    position: relative; overflow: hidden;
  }
  .rd-wrap::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(182,107,255,0.12), transparent 60%); pointer-events: none; }
  .rd-left h3 { font-size: 48px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 20px; }
  .rd-left h3 em { font-weight: 500;
    font-family: 'Playfair Display', serif; font-style: italic; color: var(--fg); }
  .rd-left p { font-size: 15px; color: var(--fg-dim); }
  .rd-years { display: flex; flex-direction: column; gap: 2px; position: relative; }
  .rd-year { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: baseline;
    padding: 22px 0; border-top: 1px solid var(--line); }
  .rd-year:last-child { border-bottom: 1px solid var(--line); }
  .rd-year .yr { font-weight: 500; font-size: 28px; color: var(--fg); letter-spacing: -0.02em; }
  .rd-year .lbl { font-size: 13px; color: var(--fg-dim); }
  .rd-year .amt { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; letter-spacing: -0.025em;
    color: var(--fg); font-variant-numeric: tabular-nums; }
  .rd-year.total .yr { color: var(--fg); font-family: 'Inter', sans-serif; font-style: normal; font-size: 13.5px;
    text-transform: none; letter-spacing: -0.005em; font-weight: 500; padding-top: 10px; }
  .rd-year.total .amt { font-size: 32px;
    color: var(--fg); font-weight: 600; }
  .rd-breakdown { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .rd-breakdown .line { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline;
    font-size: 14.5px; color: var(--fg-dim); line-height: 1.5; letter-spacing: -0.01em; }
  .rd-breakdown .line .n { font-size: 10.5px; color: var(--fg-mute); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; padding-top: 3px; }
  .rd-breakdown .line em { font-style: normal; color: var(--fg); font-weight: 500; }

  /* ============ BATTLE-TESTED TRACK RECORD ============ */
  .bt-grid { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 16px; margin-bottom: 28px; }
  .bt-tile {
    position: relative; border: 1px solid var(--line); border-radius: 22px;
    background: var(--bg-card); overflow: hidden; min-height: 440px; isolation: isolate;
  }
  .bt-tile::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 60% at 100% 0%, var(--tint, transparent), transparent 62%);
    pointer-events: none; z-index: 0;
  }
  .bt-tile-inner {
    position: relative; z-index: 1; height: 100%;
    padding: 28px 26px 24px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .bt-head { display: flex; flex-direction: column; gap: 14px; }
  .bt-kicker {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg-mute);
  }
  .bt-stat { display: flex; align-items: baseline; gap: 12px; color: var(--fg); }
  .bt-stat em {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--fg);
  }
  .bt-stat em .pct { font-size: 32px; color: var(--fg-dim); margin-left: 1px; }
  .bt-stat-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--fg-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1.3;
  }
  .bt-desc {
    font-size: 13.5px; color: var(--fg-dim);
    line-height: 1.5; letter-spacing: -0.005em;
    margin: 0;
  }
  .bt-desc strong { color: var(--fg); font-weight: 500; }
  .bt-viz {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 14px;
  }

  /* Timeline widget (Tile 1) */
  .bt-timeline { display: flex; flex-direction: column; gap: 9px; }
  .bt-tl-row {
    display: grid; grid-template-columns: 42px 1fr auto; gap: 10px;
    align-items: center; font-size: 11px;
  }
  .bt-tl-yr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--fg-mute); letter-spacing: 0.02em;
  }
  .bt-tl-bar {
    height: 3px; border-radius: 99px;
    background: linear-gradient(90deg, rgba(182,107,255,0.85), rgba(182,107,255,0.15));
    position: relative; overflow: visible;
    transform-origin: left center;
    transform: scaleX(0);
    animation: btlGrow 1.3s cubic-bezier(.22,.8,.3,1) forwards;
    animation-delay: var(--d, 0s);
    width: var(--w, 100%);
  }
  .bt-tl-row:nth-child(1) .bt-tl-bar { --d: 0.00s; }
  .bt-tl-row:nth-child(2) .bt-tl-bar { --d: 0.12s; }
  .bt-tl-row:nth-child(3) .bt-tl-bar { --d: 0.24s; }
  .bt-tl-row:nth-child(4) .bt-tl-bar { --d: 0.36s; }
  .bt-tl-row:nth-child(5) .bt-tl-bar { --d: 0.48s; }
  @keyframes btlGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .bt-tl-lbl { font-size: 11px; color: var(--fg-dim); letter-spacing: -0.005em; text-align: right; }
  .bt-tl-lbl em { font-style: normal; color: var(--fg); font-weight: 500; }
  .bt-tl-row.live .bt-tl-yr { color: #4ade80; }
  .bt-tl-row.live .bt-tl-bar {
    background: linear-gradient(90deg, #4ade80, rgba(74,222,128,0.18));
    box-shadow: 0 0 10px rgba(74,222,128,0.3);
  }
  .bt-tl-row.live .bt-tl-bar::after {
    content: ''; position: absolute; right: -2px; top: -3px;
    width: 9px; height: 9px; border-radius: 99px;
    background: #4ade80; box-shadow: 0 0 8px #4ade80;
    animation: btDotPulse 1.8s ease-in-out infinite;
  }
  @keyframes btDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(1.5); }
  }

  /* Revenue stacked-bar chart (Tile 2 — feature) */
  .bt-rev { display: flex; flex-direction: column; gap: 10px; }
  .bt-rev-legend { display: flex; flex-wrap: wrap; gap: 12px; }
  .bt-rev-lg {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9.5px; color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
  }
  .bt-rev-lg i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
  .bt-rev-chart {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 6px; height: 118px; align-items: end;
    padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.10);
    position: relative;
  }
  /* hairline grid behind the stack — no $ labels by design (no income framing) */
  .bt-rev-chart::before {
    content: ''; position: absolute; inset: 0 0 2px; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045)),
      linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045)),
      linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045));
    background-size: 100% 1px;
    background-position: 0 25%, 0 50%, 0 75%;
    background-repeat: no-repeat;
  }
  .bt-rev-col { display: flex; flex-direction: column-reverse; gap: 1px; height: 100%; position: relative; z-index: 1; }
  .bt-rev-col .seg {
    display: block; border-radius: 1.5px;
    transform-origin: bottom; transform: scaleY(0); opacity: 0;
    height: var(--h, 0%);
    animation: btBarRise 0.9s cubic-bezier(.22,.8,.3,1) forwards;
    animation-delay: calc(var(--i, 0s) + var(--sd, 0s));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .bt-rev-col .seg.s1 { background: linear-gradient(180deg, #0ECF60, #00A344); --sd: 0.00s; }
  .bt-rev-col .seg.s2 { background: linear-gradient(180deg, #FF9A1F, #E07800); --sd: 0.08s; }
  .bt-rev-col .seg.s3 { background: linear-gradient(180deg, #EF3D9B, #C7147A); --sd: 0.16s; }
  .bt-rev-col .seg.s4 { background: rgba(255,255,255,0.30); --sd: 0.24s; border-radius: 3px 3px 1.5px 1.5px; }
  .bt-rev-col:nth-child(1) { --i: 0.00s; }
  .bt-rev-col:nth-child(2) { --i: 0.06s; }
  .bt-rev-col:nth-child(3) { --i: 0.12s; }
  .bt-rev-col:nth-child(4) { --i: 0.18s; }
  .bt-rev-col:nth-child(5) { --i: 0.24s; }
  .bt-rev-col:nth-child(6) { --i: 0.30s; }
  .bt-rev-col:nth-child(7) { --i: 0.36s; }
  .bt-rev-col:nth-child(8) { --i: 0.42s; }
  .bt-rev-col.live .seg { filter: brightness(1.12) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 14px -2px rgba(14,207,96,0.5); }
  @keyframes btBarRise {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
  }
  .bt-rev-axis {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--fg-mute);
    letter-spacing: 0.04em; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .bt-rev-axis span:nth-child(even) { color: rgba(255,255,255,0.24); } /* minor (Q3) ticks recede */
  .bt-rev-axis span:last-child { color: #4ade80; }

  /* Checklist widget (Tile 3) */
  .bt-checks { display: flex; flex-direction: column; gap: 6px; }
  .bt-check {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 11px; border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 11.5px; color: var(--fg-dim);
    letter-spacing: -0.005em;
    opacity: 0; transform: translateX(-8px);
    animation: btCheckIn 0.55s cubic-bezier(.22,.8,.3,1) forwards;
    animation-delay: var(--d, 0s);
  }
  .bt-check .tick {
    width: 14px; height: 14px; flex-shrink: 0;
    opacity: 0; transform: scale(0);
    animation: btTickIn 0.38s cubic-bezier(.22,.8,.3,1) forwards;
    animation-delay: calc(var(--d, 0s) + 0.22s);
  }
  @keyframes btCheckIn { to { opacity: 1; transform: translateX(0); } }
  @keyframes btTickIn  { to { opacity: 1; transform: scale(1); } }

  /* Credo strip under the grid */
  .bt-credo {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 18px;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.015);
    font-size: 14px; color: var(--fg-dim);
    letter-spacing: -0.005em; text-align: center;
  }
  .bt-credo em {
    font-family: 'Playfair Display', serif; font-style: italic;
    color: var(--fg); font-weight: 500;
  }
  .bt-credo-sep {
    width: 4px; height: 4px; border-radius: 99px;
    background: var(--fg-mute); opacity: 0.45;
  }

  @media (max-width: 960px) {
    .bt-grid { grid-template-columns: 1fr; gap: 14px; }
    .bt-tile-feature { order: -1; }
  }
  @media (max-width: 720px) {
    .bt-tile { min-height: 380px; }
    .bt-tile-inner { padding: 22px 20px 20px; }
    .bt-stat em { font-size: 42px; }
    .bt-rev-chart { height: 100px; }
    .bt-credo { font-size: 12.5px; gap: 12px; padding: 14px 18px; }
  }

  /* ============ PHASES (after you join) ============ */
  .phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
  /* Horizontal connector thread — runs through the middle of the number row so the
     four phases read as one sequence, not four islands. */
  .phases::before {
    content: ''; position: absolute;
    left: 26px; right: 26px; top: 84px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(212,168,255,0.18) 10%,
      rgba(255,255,255,0.10) 50%,
      rgba(212,160,23,0.22) 90%,
      transparent 100%);
    pointer-events: none;
    z-index: 0;
  }
  .phase { background: var(--bg-card); border: 1px solid var(--line); border-radius: 20px;
    padding: 30px 26px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s;
    z-index: 1; }
  .phase:hover { transform: translateY(-4px); border-color: rgba(182,107,255,0.3); }
  /* Tiny connector dot nested in the card, sitting on the thread line. The first
     phase gets a "start" marker; the rest get plain node dots. */
  .phase::after {
    content: ''; position: absolute;
    top: 80px; right: -4px; width: 9px; height: 9px;
    border-radius: 999px;
    background: rgba(212,168,255,0.35);
    box-shadow: 0 0 0 3px rgba(18,14,28,0.95);
    z-index: 2;
  }
  .phase:last-child::after { display: none; }
  @media (max-width: 900px) {
    .phases::before, .phase::after { display: none; }
  }
  .phase-num {  font-size: 88px;  line-height: 0.8;
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    color: var(--fg); opacity: 0.92;
    margin-bottom: 16px; letter-spacing: -0.04em;
  }
  .phase-stage { font-size: 12.5px; letter-spacing: -0.005em; text-transform: none; color: var(--fg-mute); font-weight: 500; margin-bottom: 6px; }
  .phase h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 4px; }
  .phase .label { font-size: 12.5px; color: var(--fg-mute); letter-spacing: -0.005em; text-transform: none; font-weight: 500; margin-bottom: 16px; }
  .phase p { font-size: 13px; color: var(--fg-dim); line-height: 1.55; margin-bottom: 16px; }
  .phase .outcome { font-weight: 600; font-size: 15px; color: var(--fg);
    padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.3; }

  /* ---- Phase motion graphics (Source · Ship · Sell · Scale) ---- */
  .ph-viz {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 14px 0 4px; margin: 0 0 16px;
    min-height: 142px; display: flex; align-items: stretch;
  }
  .ph-viz > * { width: 100%; }
  @keyframes phDot { 0%,100% { opacity:1 } 50% { opacity:0.4 } }
  @keyframes phSpin { to { transform: rotate(360deg); } }
  @keyframes phFadeUp { to { opacity: 1; transform: translateY(0); } }
  @keyframes phSlideIn { to { opacity: 1; transform: translateX(0); } }

  /* Shared widget header (live tag + meta) */
  .ph-w-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .ph-w-tag  { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; font-weight: 600; }
  .ph-w-tag i { width: 6px; height: 6px; border-radius: 99px; display: inline-block; animation: phDot 1.6s ease-in-out infinite; }
  .ph-w-tag.live { color: #4ade80; } .ph-w-tag.live i { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
  .ph-w-tag.warn { color: #FF8C00; } .ph-w-tag.warn i { background: #FF8C00; box-shadow: 0 0 6px #FF8C00; }
  .ph-w-tag.mag  { color: #E91E8C; } .ph-w-tag.mag i  { background: #E91E8C; box-shadow: 0 0 6px #E91E8C; }
  .ph-w-tag.gold { color: #D4A017; } .ph-w-tag.gold i { background: #D4A017; box-shadow: 0 0 6px #D4A017; }
  .ph-w-meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--fg-dim); letter-spacing: 0.02em; }

  /* Phase 1 — Source: reuse .ps-feed-* classes, compact + pinned dimensions so
     the phase card never reflows when rows stream in/out. Rows use absolute
     positioning with CSS transitions (driven by JS, see initPhaseSourceFeed). */
  .phase .ps-feed-wrap {
    gap: 7px;
    height: 178px;
    contain: layout paint;
  }
  .phase .ps-feed-scanning {
    padding: 6px 9px; border-radius: 8px; gap: 8px;
    font-size: 10px; flex: 0 0 auto;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  }
  .phase .ps-feed-scanning .spin { width: 11px; height: 11px; border-width: 1.3px; }
  .phase .ps-feed-scanning em { font-family: 'JetBrains Mono', monospace !important; color: var(--fg) !important; font-style: normal; }
  .phase .ps-feed-scanning .mono { font-size: 9px; }
  .phase .ps-feed-rail {
    position: relative;
    height: 144px;
    flex: 0 0 144px;
    overflow: hidden;
    gap: 0;
    contain: layout paint;
  }
  .phase .ps-feed-row {
    position: absolute; left: 0; right: 0;
    grid-template-columns: 28px 1fr auto; gap: 8px;
    padding: 6px 8px; height: 44px; flex: none; border-radius: 8px;
    animation: none !important;
    transition: top 0.42s cubic-bezier(.22,1,.36,1), opacity 0.32s ease;
    will-change: top, opacity;
  }
  .phase .ps-feed-row.exit { opacity: 0; }
  .phase .ps-feed-row .pfr-icon { width: 28px; height: 28px; border-radius: 7px; }
  .phase .ps-feed-row .pfr-emoji { font-size: 14px; }
  .phase .ps-feed-row .pfr-info { gap: 2px; }
  .phase .ps-feed-row .pfr-name { font-size: 10.5px; }
  .phase .ps-feed-row .pfr-meta { font-size: 9px; gap: 5px; }
  .phase .ps-feed-row .pfr-right { gap: 2px; }
  .phase .ps-feed-row .pfr-roi { font-size: 10.5px; }
  .phase .ps-feed-row .pfr-verdict { font-size: 8.5px; padding: 2px 7px; letter-spacing: 0.05em; }

  /* Phase 2 — Ship: cursor drags product into box, ships off (pure CSS loop) */
  .ph-ship2 { display: flex; flex-direction: column; gap: 8px; font-family: 'JetBrains Mono', monospace; }
  .ph-ship-stage {
    position: relative; height: 96px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden; isolation: isolate;
  }
  .ph-ship-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none; opacity: 0.6;
  }
  /* conveyor belt */
  .ps-belt {
    position: absolute; left: 8px; right: 54px; top: 64px; height: 5px;
    border-radius: 99px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
  }
  .ps-belt::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 8px, transparent 8px 20px);
    animation: psBelt 1.1s linear infinite;
  }
  @keyframes psBelt { from { transform: translateX(0); } to { transform: translateX(20px); } }
  /* stations */
  .ps-st {
    position: absolute; top: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'JetBrains Mono', monospace; font-size: 6.5px; font-weight: 700;
    letter-spacing: 0.12em; color: rgba(255,255,255,0.45);
  }
  .ps-st i { width: 4px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.3); }
  .ps-st::after {
    content: ''; position: absolute; left: 50%; top: 12px; width: 1px; height: 38px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent);
  }
  .ps-st1 { left: 26%; } .ps-st2 { left: 58%; }
  .ps-st1 i { animation: psStPulse 5.5s infinite; } .ps-st2 i { animation: psStPulse 5.5s infinite 1.7s; }
  @keyframes psStPulse { 0%, 18%, 46%, 100% { background: rgba(255,255,255,0.3); box-shadow: none; }
    24%, 38% { background: #FF8C00; box-shadow: 0 0 7px rgba(255,140,0,0.8); } }
  /* FBA dock */
  .ps-dock {
    position: absolute; right: 8px; top: 30px; width: 42px; height: 40px;
    border-radius: 8px;
    border: 1px dashed rgba(255,140,0,0.45);
    background: rgba(255,140,0,0.05);
    display: grid; place-items: center;
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800;
    letter-spacing: 0.1em; color: rgba(255,140,0,0.75);
    animation: psDock 5.5s infinite;
  }
  @keyframes psDock {
    0%, 84%, 100% { background: rgba(255,140,0,0.05); box-shadow: none; }
    88%, 94% { background: rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.7); color: #4ade80; box-shadow: 0 0 18px rgba(74,222,128,0.35); }
  }
  /* the box */
  .ps-box {
    position: absolute; top: 40px; left: -34px; width: 30px; height: 24px; z-index: 2;
    animation: psBoxRun 5.5s cubic-bezier(.45,.05,.55,.95) infinite;
  }
  .ps-box-body {
    position: absolute; inset: 0; border-radius: 3px;
    background: linear-gradient(135deg, #C4956A, #96723A);
    border: 1px solid rgba(0,0,0,0.35);
    box-shadow: inset 0 6px 0 rgba(255,255,255,0.08);
  }
  .ps-box-body::before {
    content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
    background: rgba(0,0,0,0.3);
  }
  .ps-tape {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px;
    background: rgba(255,240,200,0.85); border-radius: 1px;
    transform: scaleY(0); transform-origin: top;
    animation: psTape 5.5s infinite;
  }
  @keyframes psTape { 0%, 22% { transform: scaleY(0); } 32%, 100% { transform: scaleY(1); } }
  .ps-lbl {
    position: absolute; right: 2px; top: 8px; width: 12px; height: 9px;
    background: #fff; border-radius: 1.5px;
    background-image: repeating-linear-gradient(90deg, #222 0 1px, transparent 1px 3px);
    background-size: 80% 55%; background-position: 50% 60%; background-repeat: no-repeat;
    opacity: 0; transform: scale(1.6);
    animation: psLbl 5.5s infinite;
  }
  @keyframes psLbl { 0%, 52% { opacity: 0; transform: scale(1.6); } 58%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes psBoxRun {
    0%        { left: -34px; opacity: 0; }
    8%        { left: 8%;   opacity: 1; }
    20%, 32%  { left: 22%; }   /* PACK: tape rolls on */
    50%, 62%  { left: 54%; }   /* LABEL: FBA label stamps */
    82%       { left: calc(100% - 52px); opacity: 1; transform: scale(1); }
    88%, 100% { left: calc(100% - 48px); opacity: 0; transform: scale(0.55); } /* into the dock */
  }
  @media (prefers-reduced-motion: reduce) {
    .ps-belt::before, .ps-st i, .ps-dock, .ps-tape, .ps-lbl { animation: none; }
    .ps-box { animation: none; left: 54%; opacity: 1; }
    .ps-tape { transform: scaleY(1); }
    .ps-lbl { opacity: 1; transform: scale(1); }
  }
  .ph-ship-counter {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 10px; border-radius: 7px;
    background: rgba(74,222,128,0.05); border: 1px solid rgba(74,222,128,0.18);
    font-size: 10px;
  }
  .ph-ship-counter .k { color: var(--fg-mute); letter-spacing: 0.04em; }
  .ph-ship-counter .v { color: #4ade80; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11.5px; }

  /* Phase 3 — Sell: orange revenue bars + floating money bubbles + live ticker */
  .ph-sell { display: flex; flex-direction: column; gap: 8px; font-family: 'JetBrains Mono', monospace; }
  .ph-sell-amtwrap { display: flex; align-items: baseline; gap: 6px; }
  .ph-sell-amt {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    font-size: 22px; letter-spacing: -0.02em; color: #FF8C00;
    background: linear-gradient(100deg, #FF8C00 0%, #D4A017 50%, #FF8C00 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .ph-sell-delta {
    font-size: 9px; color: #4ade80; font-weight: 600; letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
  }
  .ph-sell-stage {
    position: relative; height: 76px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,140,0,0.03), rgba(0,0,0,0.2));
    border: 1px solid rgba(255,255,255,0.05);
    padding: 8px 10px 6px;
    overflow: hidden;
  }
  .ph-sell-chart {
    display: flex; align-items: flex-end; gap: 4px; height: 100%;
    position: relative; z-index: 1;
  }
  .ph-sell-bar {
    flex: 1; min-width: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #FF8C00, #D4A017);
    transform-origin: bottom;
    transform: scaleY(0);
    height: var(--h, 50%);
    animation: phSellBarRise 1.1s cubic-bezier(.22,.8,.3,1) forwards;
    animation-delay: calc(var(--i, 0) * 0.08s);
    box-shadow: 0 0 0 1px rgba(255,140,0,0.12);
  }
  @keyframes phSellBarRise { to { transform: scaleY(1); } }
  .ph-sell-bar.live {
    background: linear-gradient(180deg, #FFB040, #FF8C00);
    box-shadow: 0 0 10px rgba(255,140,0,0.6), 0 0 0 1px rgba(255,140,0,0.4);
    animation: phSellBarRise 1.1s cubic-bezier(.22,.8,.3,1) forwards, phSellBarPulse 1.6s ease-in-out 1.2s infinite;
  }
  @keyframes phSellBarPulse {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 10px rgba(255,140,0,0.6), 0 0 0 1px rgba(255,140,0,0.4); }
    50%      { filter: brightness(1.25); box-shadow: 0 0 16px rgba(255,140,0,0.85), 0 0 0 1px rgba(255,140,0,0.55); }
  }
  .ph-sell-money {
    position: absolute; bottom: 8px;
    font-size: 10px; font-weight: 600; color: #4ade80;
    opacity: 0;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    animation: phMoneyFloat 3.6s cubic-bezier(.22,.8,.3,1) infinite;
    animation-delay: var(--d, 0s);
    text-shadow: 0 0 6px rgba(74,222,128,0.5);
  }
  .ph-sell-money:nth-child(2) { left: 28%; }
  .ph-sell-money:nth-child(3) { left: 58%; }
  .ph-sell-money:nth-child(4) { left: 82%; }
  @keyframes phMoneyFloat {
    0%   { opacity: 0; transform: translateY(0); }
    12%  { opacity: 1; transform: translateY(-6px); }
    70%  { opacity: 1; transform: translateY(-50px); }
    95%, 100% { opacity: 0; transform: translateY(-64px); }
  }
  .ph-sell-axis {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
    font-size: 8.5px; color: var(--fg-mute); letter-spacing: 0.04em;
    text-align: center; padding: 0 10px;
  }
  .ph-sell-axis span:last-child { color: #FF8C00; font-weight: 600; }

  /* Phase 4 — Scale: reorder loop */
  .ph-loop { display: flex; flex-direction: column; gap: 10px; font-family: 'JetBrains Mono', monospace; }
  .ph-loop-ring {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
    position: relative; padding: 4px 0;
  }
  .ph-loop-node {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; border-radius: 7px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
    font-size: 10px; color: var(--fg);
    position: relative;
  }
  .ph-loop-node::before {
    content: ''; width: 7px; height: 7px; border-radius: 99px;
    background: rgba(212,168,255,0.6); flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(212,168,255,0.15);
  }
  .ph-loop-node .ph-loop-n { font-size: 9px; color: var(--fg-mute); letter-spacing: 0.05em; font-weight: 500; }
  .ph-loop-node .ph-loop-name { color: var(--fg); font-weight: 500; letter-spacing: 0.01em; }
  .ph-loop-node.active {
    background: rgba(212,168,255,0.08); border-color: rgba(212,168,255,0.3);
    box-shadow: 0 0 14px rgba(212,168,255,0.18);
  }
  .ph-loop-node.active::before { background: #c8a2ff; box-shadow: 0 0 0 2px rgba(200,162,255,0.3), 0 0 8px #c8a2ff; animation: phDot 1.2s ease-in-out infinite; }
  .ph-loop-pulse {
    position: absolute; inset: 0; border-radius: 10px;
    pointer-events: none;
    background: radial-gradient(circle 70px at var(--px, 12%) var(--py, 28%), rgba(212,168,255,0.25), transparent 60%);
    animation: phLoopPulse 4s cubic-bezier(.6,.05,.4,.95) infinite;
  }
  @keyframes phLoopPulse {
    0%   { --px: 15%; --py: 28%; }
    25%  { --px: 85%; --py: 28%; }
    50%  { --px: 85%; --py: 72%; }
    75%  { --px: 15%; --py: 72%; }
    100% { --px: 15%; --py: 28%; }
  }
  @property --px { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
  @property --py { syntax: '<percentage>'; inherits: false; initial-value: 28%; }
  .ph-loop-stat {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 7px;
    background: rgba(182,107,255,0.06); border: 1px solid rgba(182,107,255,0.18);
  }
  .ph-loop-stat em {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    font-size: 20px; color: var(--fg); letter-spacing: -0.02em;
  }
  .ph-loop-stat-lbl { font-size: 9px; color: var(--fg-mute); letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-loop-stat-arrow { font-size: 14px; color: #c8a2ff; animation: phSpin 6s linear infinite; }

  @media (max-width: 900px) {
    .ph-viz { min-height: 0; }
  }

  /* ============ PRICING CARDS (tier cards — Linear/Raycast style in our brand) ============ */
  #pricing { padding: 120px 0; position: relative; overflow: hidden; }
  @media (max-width: 900px) { #pricing { padding: 80px 0; } }
  @media (max-width: 640px) { #pricing { padding: 56px 0; } }
  #pricing::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,0.025), transparent 65%);
  }
  #pricing .section-head { text-align: center; margin-bottom: 28px; padding: 0 28px; }
  #pricing .section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -0.035em; font-weight: 500; line-height: 1.05; font-family: 'Inter', sans-serif; margin: 0; color: var(--fg); }
  #pricing .section-head h2 em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    color: var(--fg); padding: 0 4px; }
  #pricing .section-head p { color: var(--fg-dim); font-size: clamp(0.95rem, 1.15vw, 1.04rem); line-height: 1.6; margin: 0.9rem auto 0; max-width: 560px; }

  /* Billing toggle — glossy pill with animated knob + save badge */
  .price-toggle {
    display: inline-flex; align-items: center; gap: 2px; padding: 5px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
      rgba(0,0,0,0.35);
    margin: 28px auto 28px;
    position: relative; z-index: 1;
    box-shadow:
      0 10px 28px -12px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
  }
  .price-toggle button {
    position: relative; z-index: 1;
    padding: 10px 22px; border-radius: 999px; border: 0; background: transparent;
    font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--fg-mute); cursor: pointer;
    transition: color .25s ease;
    display: inline-flex; align-items: center; gap: 9px;
  }
  .price-toggle button:hover { color: var(--fg-dim); }
  .price-toggle button.active { color: #0a0a0a; }
  .price-toggle .save {
    font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
    padding: 3px 8px; border-radius: 99px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #0a1f10;
    border: 0;
    box-shadow: 0 2px 8px -2px rgba(74,222,128,0.5);
    transition: transform .25s ease, box-shadow .25s ease;
    text-transform: uppercase;
  }
  .price-toggle button.active .save {
    transform: scale(1.02);
    box-shadow: 0 3px 12px -2px rgba(74,222,128,0.65), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .price-toggle .knob {
    position: absolute; top: 5px; bottom: 5px;
    background: linear-gradient(180deg, #ffffff 0%, #f0ecff 100%);
    border-radius: 999px;
    transition:
      transform .35s cubic-bezier(0.32, 0.72, 0, 1),
      width .35s cubic-bezier(0.32, 0.72, 0, 1),
      left .35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 0;
    box-shadow:
      0 4px 14px -3px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.8),
      inset 0 -1px 0 rgba(0,0,0,0.04);
  }

  /* Cards grid */
  .price-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative; z-index: 1;
    padding: 0 28px;
    max-width: 1180px; margin: 0 auto;
    align-items: stretch;
  }

  /* Enterprise tier — wide banner card below the 3-tier grid */
  .price-enterprise {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 36px;
    align-items: center;
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 36px 40px;
    border-radius: 22px;
    background:
      linear-gradient(135deg, rgba(212,160,23,0.10) 0%, rgba(182,107,255,0.12) 50%, rgba(15,15,18,0) 100%),
      var(--bg-card);
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    z-index: 1;
  }
  .price-enterprise::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212,160,23,0.45), rgba(182,107,255,0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  .price-enterprise .pe-left { display: flex; flex-direction: column; gap: 14px; }
  .price-enterprise .pe-badge {
    display: inline-block; align-self: flex-start;
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(212,160,23,0.18), rgba(182,107,255,0.18));
    color: rgba(212,160,23,0.95);
    border: 1px solid rgba(212,160,23,0.35);
  }
  .price-enterprise .pe-title {
    font-size: 24px; line-height: 1.2; font-weight: 600;
    color: var(--fg); margin: 0;
  }
  .price-enterprise .pe-tag {
    font-size: 14px; line-height: 1.55;
    color: var(--fg-muted); margin: 0;
    max-width: 480px;
  }
  .price-enterprise .pe-cta-row {
    display: flex; align-items: center; gap: 16px;
    margin-top: 6px; flex-wrap: wrap;
  }
  .price-enterprise .pe-cta-row .price-cta {
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .price-enterprise .pe-foot {
    font-size: 11px; color: var(--fg-muted);
    letter-spacing: 0.04em;
  }
  .price-enterprise .pe-features {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px;
  }
  .price-enterprise .pe-features .feat {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: var(--fg);
    line-height: 1.4;
  }
  .price-enterprise .pe-features .feat .icn {
    flex-shrink: 0;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(212,160,23,0.22), rgba(182,107,255,0.18));
    color: rgba(212,160,23,0.95);
    margin-top: 1px;
  }
  .price-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 32px 28px 28px;
    display: flex; flex-direction: column;
    transition: transform .3s cubic-bezier(.22,.8,.3,1), border-color .3s, box-shadow .3s;
  }
  .price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(182,107,255,0.22);
    box-shadow:
      0 24px 60px -30px rgba(139,61,245,0.35),
      0 0 0 1px rgba(182,107,255,0.12);
  }
  .price-card:not(.featured) { background: var(--bg-card); }
  .price-card:not(.featured) .price-amount .amt { color: var(--fg); }

  .price-card.featured {
    /* isolation: the ::before wash (z-index:-1) needs the card to own a
       stacking context; the translateY raise provided one accidentally but
       the mobile media rule removes it — without this line the purple wash
       is invisible on phones/tablets (2026-07-10). */
    isolation: isolate;
    background:
      linear-gradient(180deg, rgba(182,107,255,0.10), rgba(212,160,23,0.04) 60%, transparent 100%),
      var(--bg-card);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
      0 0 0 1px rgba(212,168,255,0.28),
      0 20px 60px -20px rgba(139,61,245,0.35),
      0 0 40px -10px rgba(182,107,255,0.25);
    transform: translateY(-8px);
  }
  .price-card.featured:hover {
    transform: translateY(-12px);
    box-shadow:
      0 0 0 1px rgba(212,168,255,0.4),
      0 28px 72px -20px rgba(139,61,245,0.5),
      0 0 50px -8px rgba(182,107,255,0.32);
  }
  .price-card.featured::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 23px;
    background: linear-gradient(135deg, rgba(212,168,255,0.55), rgba(182,107,255,0.25) 40%, rgba(212,160,23,0.35) 100%);
    z-index: -1;
  }

  .price-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 6px 14px; border-radius: 999px;
    background: var(--gradient-flat);
    color: #fff;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    box-shadow: 0 6px 20px -4px rgba(139,61,245,0.5);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .price-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 99px;
    background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8);
  }

  .price-tier-name {
    font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em;
    margin-bottom: 6px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .price-tier-tag {
    font-size: 12.5px; color: var(--fg-mute); letter-spacing: -0.005em;
    margin-bottom: 24px; line-height: 1.5;
  }

  .price-amount {
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
  }
  .price-amount .amt {
    font-size: 54px; font-weight: 500; letter-spacing: -0.035em;
    color: var(--fg); line-height: 1;
    font-family: 'Inter', sans-serif;
  }
  .price-amount .per { font-size: 14px; color: var(--fg-mute); letter-spacing: -0.005em; }
  .price-amount .orig {
    font-size: 15px; color: var(--fg-mute); text-decoration: line-through;
    text-decoration-thickness: 1.5px; text-decoration-color: rgba(244,241,255,0.35);
    margin-right: 2px; font-weight: 500;
  }
  .price-billed { font-size: 12px; color: var(--fg-mute); letter-spacing: -0.005em; margin-bottom: 22px; min-height: 1.4em; }
  .price-billed .save-inline {
    display: inline-flex; align-items: center; gap: 3px;
    color: #4ade80; font-weight: 600;
  }

  .price-divider {
    height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent);
    margin: 0 0 20px;
  }

  /* Unified features list — included + missing (locked behind upgrade) */
  .price-features {
    list-style: none; padding: 0; margin: 0 0 26px;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
  }
  .price-features .feat {
    display: grid; grid-template-columns: 17px 1fr auto;
    gap: 10px; align-items: center;
    font-size: 13px; line-height: 1.4; letter-spacing: -0.005em;
  }
  .price-features .feat .icn {
    flex-shrink: 0; width: 17px; height: 17px; border-radius: 99px;
    display: grid; place-items: center;
  }
  /* Included — solid-gradient check pill matching .pfr-verdict.buy grammar */
  .price-features .feat.incl { color: var(--fg); }
  .price-features .feat.incl .icn {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #0a2515;
    border: none;
    box-shadow:
      0 4px 12px -4px rgba(74,222,128,0.55),
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 -1px 0 rgba(0,0,0,0.08);
  }
  .price-card.featured .price-features .feat.incl .icn {
    background: linear-gradient(135deg, #d4a8ff, #b66bff);
    color: #1a0533;
    box-shadow:
      0 4px 12px -4px rgba(182,107,255,0.55),
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 -1px 0 rgba(0,0,0,0.08);
  }
  .price-features .feat.incl strong { color: var(--fg); font-weight: 600; }
  /* Missing — greyed + lock icon + solid-gradient upgrade chip */
  .price-features .feat.miss { color: var(--fg-mute); }
  .price-features .feat.miss .txt {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(244,241,255,0.2);
  }
  .price-features .feat.miss .icn {
    background: rgba(255,255,255,0.03);
    color: rgba(244,241,255,0.3);
    border: 1px solid rgba(255,255,255,0.06);
  }
  /* Upgrade chip — solid gradient pill matching verdict pills (buy/maybe) */
  .price-features .lock-chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 99px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #d4a8ff, #b66bff);
    color: #1a0533;
    border: none;
    box-shadow:
      0 5px 14px -5px rgba(182,107,255,0.6),
      inset 0 1px 0 rgba(255,255,255,0.3),
      inset 0 -1px 0 rgba(0,0,0,0.08);
    white-space: nowrap;
  }
  .price-features .lock-chip.pro {
    background: linear-gradient(135deg, #f4c542, #D4A017);
    color: #2a1d05;
    box-shadow:
      0 5px 14px -5px rgba(244,197,66,0.55),
      inset 0 1px 0 rgba(255,255,255,0.3),
      inset 0 -1px 0 rgba(0,0,0,0.08);
  }

  .price-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
    cursor: pointer; border: 0;
    transition: transform .15s ease, box-shadow .2s, background .2s, border-color .2s;
    text-decoration: none;
    width: 100%;
  }
  .price-cta.outlined {
    background: rgba(255,255,255,0.04);
    color: var(--fg);
    border: 1px solid var(--line-2);
  }
  .price-cta.outlined:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(182,107,255,0.3);
    transform: translateY(-1px);
  }
  .price-cta.primary {
    background: var(--gradient-flat);
    color: #fff;
    box-shadow:
      0 8px 24px -8px rgba(139,61,245,0.6),
      0 0 0 1px rgba(212,168,255,0.4) inset,
      0 1px 0 rgba(255,255,255,0.2) inset;
    position: relative;
    overflow: hidden;
  }
  .price-cta.primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 50%);
    pointer-events: none;
  }
  .price-cta.primary:hover {
    transform: translateY(-1px);
    box-shadow:
      0 12px 32px -8px rgba(139,61,245,0.8),
      0 0 0 1px rgba(212,168,255,0.55) inset,
      0 1px 0 rgba(255,255,255,0.25) inset;
  }
  .price-cta .arr { transition: transform .2s; }
  .price-cta:hover .arr { transform: translateX(2px); }

  .price-foot {
    text-align: center; margin-top: 32px;
    font-size: 12.5px; color: var(--fg-mute); letter-spacing: -0.005em;
    padding: 0 28px;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  }
  .price-foot strong { color: var(--fg-dim); font-weight: 500; }
  .price-foot .sep { opacity: 0.3; }

  @media (max-width: 900px) {
    .price-grid { grid-template-columns: 1fr; max-width: 440px; }
    .price-enterprise { grid-template-columns: 1fr; padding: 28px 24px; }
    .price-enterprise .pe-features { grid-template-columns: 1fr 1fr; }
    .price-card.featured { transform: none; }
    .price-card.featured:hover { transform: translateY(-3px); }
    .price-amount .amt { font-size: 44px; }
  }

  /* ============ COMPARE TABLE ============ */
  .compare { background: var(--bg-card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
  .cmp-row { display: grid; grid-template-columns: 1.3fr 2fr 1fr; gap: 20px; padding: 22px 32px;
    border-top: 1px solid var(--line); align-items: center; font-size: 14px; }
  .cmp-row.head { font-size: 12px; text-transform: none; letter-spacing: -0.005em; color: var(--fg-mute); font-weight: 500;
    font-weight: 600; padding: 18px 32px; background: rgba(255,255,255,0.02); border-top: none; }
  .cmp-row .approach { font-weight: 500; color: var(--fg); }
  .cmp-row .gets { color: var(--fg-dim); font-size: 13px; }
  .cmp-row .cost { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--fg-dim); text-align: right; letter-spacing: -0.01em; }
  .cmp-row.total { background: rgba(182,107,255,0.06); border-top: 1px solid rgba(182,107,255,0.2); }
  .cmp-row.total .approach { font-weight: 600; }
  .cmp-row.total .cost { color: var(--fg); font-weight: 600; }
  .cmp-row.ours {
    background: rgba(255,255,255,0.025);
    position: relative;
  }
  .cmp-row.ours::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(212,168,255,0.6), rgba(212,160,23,0.6));
  }
  .cmp-row.ours .approach {
    color: var(--fg); font-weight: 600; }
  .cmp-row.ours .cost a { font-family: 'Inter', sans-serif;
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
    background: var(--fg); color: var(--bg); font-weight: 600; font-size: 13px; }

  /* ============ FAQ ============ */
  .faqs { display: flex; flex-direction: column; }
  .faq { border-top: 1px solid var(--line); padding: 28px 4px; cursor: pointer; transition: border-color .2s; position: relative; }
  .faq:last-child { border-bottom: 1px solid var(--line); }
  .faq::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(182,107,255,0), transparent); transition: background .3s; }
  .faq:hover::before, .faq.open::before { background: linear-gradient(90deg, transparent, rgba(182,107,255,0.35), transparent); }
  .faq-q { display: grid; grid-template-columns: 36px 1fr 34px; gap: 16px; align-items: flex-start; }
  .faq-q .q-num {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px; color: var(--fg-mute);
    font-weight: 400; letter-spacing: -0.005em;
    padding-top: 7px;
  }
  .faq-q h4 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--fg); line-height: 1.3; }
  .faq-q .plus {
    width: 32px; height: 32px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    display: grid; place-items: center; color: var(--fg-mute);
    flex-shrink: 0;
    transition:
      transform .4s cubic-bezier(.22,1,.36,1),
      background .3s ease,
      color .3s, border-color .3s;
  }
  .faq-q .plus svg { display: block; width: 12px; height: 12px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
  .faq:hover .plus {
    background: rgba(255,255,255,0.04);
    color: var(--fg-dim);
    border-color: rgba(255,255,255,0.16);
  }
  .faq.open .plus {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: var(--fg);
  }
  .faq.open .plus svg { transform: rotate(45deg); }
  /* Grid-rows animation — smoother than max-height because the browser
     animates the actual intrinsic row size, not a hardcoded ceiling. */
  .faq-a-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.22,1,.36,1);
  }
  .faq.open .faq-a-wrap { grid-template-rows: 1fr; }
  .faq-a {
    min-height: 0; overflow: hidden;
    color: var(--fg-dim); font-size: 15px; line-height: 1.65;
    padding-left: 52px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s ease .05s, transform .35s cubic-bezier(.22,1,.36,1) .05s;
  }
  .faq.open .faq-a { opacity: 1; transform: translateY(0); padding-top: 14px; }

  /* ============ CTA ============ */
  .cta { padding: 160px 0; position: relative; text-align: center; overflow: hidden; }
  .cta::before { content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(800px 500px at 50% 50%, rgba(255,255,255,0.03), transparent 60%);
    pointer-events: none;
  }
  .cta-inner { position: relative; z-index: 1; }
  .cta h2 { font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -0.04em; font-weight: 400; max-width: 1000px; margin: 0 auto; }
  .cta h2 em { font-weight: 500; font-family: 'Playfair Display', serif; font-style: italic; color: var(--fg); }
  .cta p { margin: 28px auto 0; max-width: 620px; font-size: 16px; color: var(--fg-dim); }
  .cta .btn-primary { margin-top: 40px; padding: 16px 32px; font-size: 15px; }
  .cta .seat-note { margin-top: 26px; font-size: 13px; color: var(--fg-mute); font-family: 'Inter', sans-serif; letter-spacing: -0.005em; font-weight: 400; }

  /* ============ FOOTER ============ */
  footer { padding: 60px 0 40px; border-top: 1px solid var(--line); }
  .foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
  .foot .links { display: flex; gap: 28px; font-size: 13px; color: var(--fg-mute); }
  .foot .copy { font-size: 12px; color: var(--fg-mute); }

  /* ============ BENTO — Darker, tighter section ============ */
  #bento { padding: 120px 0; background: transparent; color: var(--fg); position: relative; overflow: hidden; }

  /* ============ HERO BG BARS (30-day Amazon-style chart rising in the galaxy) ============ */
  .hero-bars-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(6px, 0.9vw, 14px);
    padding: 0 clamp(20px, 4vw, 80px);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.85) 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.85) 90%, transparent 100%);
  }
  .hero-bars-bg .bb {
    flex: 1; min-width: 0;
    /* Each bar's target height is set once via --bbH (inline style).
       Scroll-driven growth uses transform:scaleY for GPU-composited perf. */
    height: var(--bbH, 0%);
    max-height: 62%;
    background: linear-gradient(180deg,
      rgba(255,181,71,0.42) 0%,
      rgba(255,153,0,0.32)  35%,
      rgba(232,135,0,0.20)  70%,
      rgba(204,119,0,0.10)  100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 10px rgba(255,153,0,0.12);
    transform: scaleY(var(--bars-scale, 0));
    transform-origin: bottom center;
    will-change: transform;
    position: relative;
    opacity: 0.85;
  }
  .hero-bars-bg .bb::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 24%;
    background: linear-gradient(180deg, rgba(255,200,120,0.25), transparent);
    border-radius: 2px 2px 0 0;
  }
  #hero.bars-on .bb { /* height is driven by JS from scroll */ }
  #hero.bars-on .bb.peak {
    background: linear-gradient(180deg,
      rgba(255,200,120,0.55) 0%,
      rgba(255,153,0,0.45)   40%,
      rgba(232,135,0,0.25)   75%,
      rgba(204,119,0,0.10)   100%);
    box-shadow: 0 0 16px rgba(255,181,71,0.25);
  }
  /* Soft amber glow behind the whole bar forest so it feels like an Amazon chart.
     Heavy blur kills the banding/pixel artifacts at large radii. */
  .hero-bars-glow {
    position: absolute; left: 50%; bottom: 0;
    width: 130%; height: 62%;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse 50% 75% at 50% 100%,
        rgba(255,153,0,0.040) 0%,
        rgba(255,153,0,0.020) 28%,
        rgba(255,153,0,0.008) 55%,
        transparent 80%),
      radial-gradient(ellipse 75% 50% at 50% 100%,
        rgba(255,181,71,0.018) 0%,
        transparent 70%);
    pointer-events: none; z-index: 0;
    filter: blur(64px);
    opacity: 0.55;
  }

  #bento .wrap { position: relative; z-index: 1; }
  #bento .section-head { margin-bottom: 48px; max-width: 780px; padding: 0 28px; }
  #bento .section-head .eyebrow { color: var(--fg-mute); }
  #bento .section-head .eyebrow .dot { background: var(--purple); box-shadow: 0 0 10px var(--purple); }
  #bento h2 { color: var(--fg); font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -0.035em; font-weight: 500; line-height: 1.05; font-family: 'Inter', sans-serif; }
  #bento h2 em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; color: var(--fg); padding: 0 0.02em; }
  #bento .section-head p { color: var(--fg-dim); font-size: clamp(0.95rem, 1.15vw, 1.04rem); line-height: 1.6; margin-top: 0.9rem; max-width: 600px; }

  .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .feature-card { display: flex; flex-direction: column; min-width: 0; }
  .feature-card .demo { position: relative; height: 210px; border-radius: 18px; overflow: hidden;
    transition: transform .3s ease;
  }
  .feature-card:hover .demo { transform: translateY(-3px); }
  .feature-card h3 { font-size: 0.98rem; font-weight: 600; margin: 16px 0 5px; color: var(--fg); letter-spacing: -0.015em; }
  .feature-card .feat-desc { font-size: 0.82rem; color: var(--fg-dim); line-height: 1.5; }

  /* Demo tile variants — all darker to match the site */
  .demo.tile-gray { background: #0b0812; border: 1px solid var(--line);
    padding: 18px; display: flex; align-items: center; justify-content: center;
  }
  .demo.tile-white { background: linear-gradient(180deg, #050505, #000000);
    border: 1px solid var(--line-2);
    padding: 18px;
  }
  .demo.tile-black { background: #050309; border: 1px solid var(--line); padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }
  /* subtle top highlight on every tile */
  .feature-card .demo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191,90,242,0.22), transparent);
    opacity: 0.5;
  }

  .demo-eyebrow { position: absolute; top: 14px; left: 16px; display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--fg-mute); z-index: 2; }
  .demo-eyebrow .pulse-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--purple);
    box-shadow: 0 0 8px var(--purple); animation: pulseDot 1.6s ease-in-out infinite; }
  .demo-eyebrow .pulse-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
  @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

  /* --- Tile 1: Diagnostic Shuffler --- */
  .shuffler { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  .shuffle-card { position: absolute; width: calc(100% - 28px); max-width: 240px; padding: 14px 16px; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .7s;
  }
  .shuffle-card.c0 { background: linear-gradient(180deg, #1f1629, #170f22); color: var(--fg); border: 1px solid rgba(212,168,255,0.18); z-index: 3; }
  .shuffle-card.c1 { background: #14101c; color: var(--fg-dim); border: 1px solid var(--line); z-index: 2; transform: translateY(10px) scale(0.95); opacity: 0.75; }
  .shuffle-card.c2 { background: #0e0a17; color: var(--fg-mute); border: 1px solid var(--line); z-index: 1; transform: translateY(20px) scale(0.9); opacity: 0.5; }
  .shuffle-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
  .shuffle-icon { width: 18px; height: 18px; color: currentColor; opacity: 0.6; }
  .shuffle-status { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,0.06); color: var(--fg-dim); letter-spacing: 0.04em; }
  .shuffle-title { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; letter-spacing: -0.01em; line-height: 1.2; color: var(--fg); transition: opacity 0.35s ease; }
  .shuffle-conf { font-size: 10px; opacity: 0.6; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; transition: opacity 0.35s ease; }
  .shuffle-status { transition: opacity 0.35s ease; }
  .shuffle-card.is-fading .shuffle-title,
  .shuffle-card.is-fading .shuffle-status,
  .shuffle-card.is-fading .shuffle-conf { opacity: 0 !important; }
  .shuffle-bar { margin-top: 10px; height: 2px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
  .shuffle-bar i { display: block; height: 100%; width: 40%; border-radius: 99px;
    background: linear-gradient(90deg, rgba(191,90,242,0.15), #BF5AF2);
  }
  .shuffle-card.c0 .shuffle-bar i { animation: shuffleScan 2.6s cubic-bezier(.4,0,.4,1) infinite; }
  .shuffle-card.c1 .shuffle-bar i { width: 62%; opacity: 0.5; animation: none; }
  .shuffle-card.c2 .shuffle-bar i { width: 24%; opacity: 0.35; animation: none; }
  @keyframes shuffleScan { 0% { transform: translateX(-110%); } 55% { transform: translateX(260%); } 100% { transform: translateX(260%); } }
  @media (prefers-reduced-motion: reduce) { .shuffle-card.c0 .shuffle-bar i { animation: none; } }

  /* --- Tile 2: Terminal --- */
  .term-tile { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #4ade80;
    display: flex; flex-direction: column; height: 100%; padding-top: 34px; position: relative;
  }
  .term-chip { position: absolute; top: 16px; right: 20px; display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 0.1em; }
  .term-tile pre { margin: 0; white-space: pre-wrap; line-height: 1.85; font-family: inherit; color: #4ade80; }
  .term-tile .caret { display: inline-block; width: 7px; height: 12px; background: #4ade80; vertical-align: middle; margin-left: 2px; animation: blink 1s steps(2) infinite; }

  /* --- Tile 3: $50M+ Scheduler --- */
  .sched-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; height: 100%; }
  .sched-tile .sched-h { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg);
  }
  .sched-tile .sched-sub { font-size: 10.5px; color: var(--fg-mute); margin-top: 4px; letter-spacing: 0.03em; }
  .sched-days { display: flex; gap: 5px; }
  .sched-day { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    font-weight: 700; font-size: 11px; background: rgba(255,255,255,0.04); color: var(--fg-mute);
    border: 1px solid var(--line); transition: all .3s ease;
  }
  .sched-day.active { background: #fff; color: #000000; transform: scale(1.12); border-color: transparent;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }

  /* --- Tile 3 (v2): Amazon dashboard chart --- */
  .adc-tile { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 30px; gap: 8px; }
  .adc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .adc-big { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
    background: linear-gradient(100deg, #BF5AF2 0%, #d4a8ff 30%, #F4A623 75%, #FFB547 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .adc-unit { font-size: 11px; font-weight: 500; color: var(--fg-mute); letter-spacing: 0; background: none; -webkit-text-fill-color: var(--fg-mute); }
  .adc-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 500;
    color: #4ade80; margin-top: 6px; font-weight: 600; letter-spacing: 0.02em;
  }
  .adc-window { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--fg-mute); font-weight: 500;
    padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,0.02);
    letter-spacing: 0.08em; white-space: nowrap;
  }
  .adc-chart { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px;
    height: 70px; align-items: end; padding: 2px 2px 0;
  }
  .adc-grid { position: absolute; inset: 0; pointer-events: none; }
  .adc-gline { position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, var(--line) 82%, transparent 100%);
  }
  .adc-gline span { position: absolute; left: 0; top: -10px; font-size: 8px; font-weight: 500;
    color: var(--fg-mute); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1;
  }
  .adc-gline { background: linear-gradient(90deg, transparent 0%, var(--line) 12%, var(--line) 100%); }
  .adc-xaxis { display: flex; justify-content: space-between; margin-top: -4px;
    font-size: 8.5px; color: var(--fg-mute); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: 0.02em;
  }
  .adc-bar { height: 0; border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, #FFB547 0%, #F4A623 55%, #C9741A 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px -2px rgba(244,166,35,0.35);
    position: relative;
    transform-origin: bottom center;
    transition: height 1.1s cubic-bezier(.22,1,.36,1);
    opacity: 0.15;
  }
  .adc-chart.adc-play .adc-bar { height: var(--h, 40%); opacity: 1; }
  .adc-bar::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 3px 3px 0 0;
    background: rgba(255,255,255,0.35);
  }
  .adc-bar:nth-child(1)  { transition-delay: 0.04s; }
  .adc-bar:nth-child(2)  { transition-delay: 0.10s; }
  .adc-bar:nth-child(3)  { transition-delay: 0.16s; }
  .adc-bar:nth-child(4)  { transition-delay: 0.22s; }
  .adc-bar:nth-child(5)  { transition-delay: 0.28s; }
  .adc-bar:nth-child(6)  { transition-delay: 0.34s; }
  .adc-bar:nth-child(7)  { transition-delay: 0.40s; }
  .adc-bar:nth-child(8)  { transition-delay: 0.46s; }
  .adc-bar:nth-child(9)  { transition-delay: 0.52s; }
  .adc-bar:nth-child(10) { transition-delay: 0.58s; }
  .adc-bar:nth-child(11) { transition-delay: 0.64s; }
  .adc-bar:nth-child(12) { transition-delay: 0.70s; }
  .adc-bar:nth-child(13) { transition-delay: 0.76s; }
  .adc-bar:nth-child(14) { transition-delay: 0.82s; }
  .adc-bar.peak { background: linear-gradient(180deg, #FFD47A 0%, #FFB547 50%, #F4A623 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 1px rgba(255,181,71,0.35), 0 0 18px -2px rgba(244,166,35,0.75);
  }
  .adc-bar.peak::before { content: ''; position: absolute; inset: -3px; border-radius: 5px;
    background: radial-gradient(ellipse at 50% 30%, rgba(255,181,71,0.35), transparent 70%);
    z-index: -1; pointer-events: none;
  }
  .adc-spark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .7s ease; transition-delay: .9s; }
  .adc-chart.adc-play .adc-spark { opacity: 0.9; }
  .adc-chart.adc-play .adc-spark path { stroke-dasharray: 1200; stroke-dashoffset: 0; animation: adcSparkDraw 1.4s cubic-bezier(.22,1,.36,1) .9s backwards; }
  @keyframes adcSparkDraw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
  .adc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 10px; border-top: 1px solid var(--line);
    font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: -0.005em; text-transform: none; font-weight: 500;
  }
  .adc-tag { display: inline-flex; align-items: center; gap: 6px; color: #FFB547; font-weight: 600; }
  .adc-tag-dot { width: 5px; height: 5px; border-radius: 99px; background: #FFB547;
    box-shadow: 0 0 8px #F4A623; animation: pulseDot 1.6s ease-in-out infinite;
  }
  .adc-foot-r { color: var(--fg-mute); font-weight: 600; }

  /* --- Tile 4: Profitable Finds --- */
  .finds-tile { display: flex; flex-direction: column; gap: 5px; padding-top: 30px; }
  .find-card { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: rgba(255,255,255,0.03); padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line);
    transition: border-color .2s, background .2s;
  }
  .find-card:hover { border-color: rgba(191,90,242,0.3); background: rgba(255,255,255,0.06); }
  .find-left { min-width: 0; flex: 1; }
  .find-name { font-size: 10.5px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .find-price { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--fg-mute); margin-top: 2px; letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .find-src { color: var(--fg-dim); font-weight: 500; }
  .find-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .find-meta { text-align: right; }
  .find-profit { font-size: 11.5px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .find-roi { font-size: 9.5px; color: var(--fg-mute); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
  .verdict { font-size: 8.5px; font-weight: 800; padding: 3px 6px; border-radius: 99px; letter-spacing: 0.05em; }
  .verdict.buy { background: rgba(74,222,128,0.15); color: var(--green); border: 1px solid rgba(74,222,128,0.25); }
  .verdict.maybe { background: rgba(212,160,23,0.15); color: var(--gold-glow); border: 1px solid rgba(212,160,23,0.3); }

  /* --- Tile 5: Dashboard Preview --- */
  .dash-tile { padding: 16px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .dash-frame { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
    padding: 10px; display: flex; flex-direction: column; gap: 7px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }
  .dash-chrome { display: flex; align-items: center; gap: 5px; }
  .dash-chrome .dc { width: 7px; height: 7px; border-radius: 99px; }
  .dc.r { background: #ef4444; } .dc.y { background: #f59e0b; } .dc.g { background: #10b981; }
  .dash-url { font-size: 9.5px; color: rgba(255,255,255,0.4); margin-left: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
  .dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
  .dash-scan { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 500;
    color: rgba(255,255,255,0.55); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dash-scan-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 6px var(--green); animation: pulseDot 1.6s ease-in-out infinite;
  }
  .dash-live { font-size: 7.5px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 99px;
    color: var(--green); background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.25); flex-shrink: 0;
  }
  .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .dash-kpi { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 6px 7px; min-width: 0; }
  .dash-kpi .l { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.5); text-transform: none; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-kpi .v { font-size: 14px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
  .dash-kpi .v.p { color: #BF5AF2; } .dash-kpi .v.gr { color: #22c55e; } .dash-kpi .v.o { color: #f59e0b; } .dash-kpi .v.b { color: #3b82f6; }
  .dash-rows { display: flex; flex-direction: column; gap: 3px; }
  .dash-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 9px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 7px;
    font-size: 9.5px; color: rgba(255,255,255,0.8); font-weight: 500;
  }
  .dash-row .verdict { font-size: 8px; padding: 2px 5px; }
  .dash-right { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
  .dash-roi { font-size: 9px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

  /* --- Tile 6: Amazon Pipeline --- */
  .roadmap { position: relative; width: 100%; height: 100%; padding: 42px 8px 8px; }
  /* svg must fill the exact same box as .rm-steps (the padding already reserves the 42px header) */
  .roadmap-track { width: 100%; height: 100%; display: block; }
  .rm-progress {
    animation: rmDraw 7s linear infinite;
  }
  @keyframes rmDraw {
    0%   { stroke-dashoffset: 720; }
    100% { stroke-dashoffset: 0; }
  }
  .rm-center { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none;
  }
  .rm-center-top { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
    background: linear-gradient(100deg, #D4A8FF 0%, #BF5AF2 55%, #F0C94A 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .rm-center-sub { font-size: 8.5px; font-weight: 500; color: var(--fg-mute); letter-spacing: 0.04em; }
  .rm-dot { transition: r 0.3s, filter 0.3s; transform-origin: center; transform-box: fill-box; }
  .rm-dot.active { r: 8; filter: drop-shadow(0 0 6px rgba(191,90,242,0.8)); }
  .rm-traveler { filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)); }

  .rm-steps { position: absolute; inset: 42px 8px 8px; pointer-events: none; }
  .rm-step {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 99px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    font-size: 9.5px; font-weight: 600; white-space: nowrap;
    transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s, color 0.3s;
    backdrop-filter: blur(4px);
  }
  .rm-step .rm-n { 
    font-size: 8px; font-weight: 700; letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums;
    transition: color 0.3s;
  }
  .rm-step .rm-t { color: rgba(255,255,255,0.85); transition: color 0.3s; }
  .rm-step.active {
    background: rgba(191,90,242,0.18);
    border-color: #BF5AF2;
    box-shadow: 0 4px 16px -2px rgba(191,90,242,0.55);
    transform: translate(-50%, -50%) scale(1.08);
  }
  .rm-step.active .rm-n { color: #D4A8FF; }
  .rm-step.active .rm-t { color: #fff; }
  .rm-step[data-i="4"].active { 
    background: rgba(212,160,23,0.18);
    border-color: #D4A017;
    box-shadow: 0 4px 16px -2px rgba(212,160,23,0.55);
  }
  .rm-step[data-i="4"].active .rm-n { color: #F0C94A; }

  @media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    #bento { padding: 80px 0; }
  }
  @media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    #bento { padding: 56px 0; }
  }

  /* ============ REVEAL / MOTION ============ */
  .reveal { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
      transition-delay: var(--reveal-delay, 0ms);
    }
    .reveal.in { opacity: 1 !important; transform: none !important; }
  }

  /* ============ FOCUS VISIBLE (a11y) ============ */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid rgba(255,255,255,0.45);
    outline-offset: 2px;
    border-radius: 6px;
  }
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
  input:focus-visible, textarea:focus-visible, select:focus-visible,
  .faq:focus-visible, .i-card:focus-visible, .price-card:focus-visible,
  .drop-card:focus-visible, .community-card:focus-visible, .voice-card:focus-visible {
    outline: 2px solid rgba(255,255,255,0.45);
    outline-offset: 2px;
  }
  /* tighter ring on pill-shaped controls so it doesn't clash with large radii */
  .nav-pill a:focus-visible, .price-toggle button:focus-visible,
  .cta-primary:focus-visible, .cta-secondary:focus-visible,
  .hero-cta:focus-visible {
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  @media (max-width: 960px) {
    .stages, .phases { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat { border-right: none; border-bottom: 1px solid var(--line); padding: 20px; }
    .layer { grid-template-columns: 1fr; gap: 24px; }
    .rd-wrap { grid-template-columns: 1fr; padding: 36px; gap: 30px; }
  }
  @media (max-width: 720px) {
    .nav-links { display: none; }
  }

  /* ============ CURSOR SPARKLE TRAIL ============
     Fixed-position canvas overlay covering the viewport. Spawns small star
     sparkles at the cursor on movement, drifting up + fading out. Disabled
     on touch + reduced-motion. mix-blend-mode keeps it luminous over dark
     sections and unobtrusive over light ones. */
  #cursorTrail {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: screen;
    will-change: transform;
  }
  @media (pointer: coarse) { #cursorTrail { display: none; } }
  @media (prefers-reduced-motion: reduce) { #cursorTrail { display: none; } }


  /* ── REDESIGN SPINE: motion tokens (spec §B4) ── */
  :root {
    --ease-out: cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.22,.8,.3,1);
    --dur-fast: 150ms;
    --dur-med: 250ms;
    --dur-slow: 420ms;
    --dur-scene: 700ms;
  }

  /* act-horizon dividers removed — Sabbo round-3 call: no purple act lines */

  /* ── NAV PILL: scroll-progress hairline (spec §B7) ── */
  .nav-pill { position: relative; }
  .pill-progress {
    position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
    pointer-events: none; border-radius: 99px; overflow: hidden;
  }
  .pill-progress i {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, #BF5AF2, #D4A017);
    transform: scaleX(var(--scroll-p, 0));
    transform-origin: left center;
    opacity: 0.85;
  }

  /* ── HERO CTA: magnetic + gradient rim on hover (fill stays frosted glass — LOCKED) ── */
  .btn-cta-primary { will-change: transform; }
  .btn-cta-primary::after {
    content: ''; position: absolute; inset: -1px; border-radius: 999px; padding: 1px;
    background: linear-gradient(120deg, rgba(191,90,242,0.75), rgba(212,160,23,0.6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
    pointer-events: none;
  }
  .btn-cta-primary:hover::after { opacity: 1; }

  /* ═══ CANCEL CINEMATIC v2 — free-floating logos in black space (round 3) ═══ */
  .cancel-cine { grid-column: 1 / -1; grid-row: span 3; position: relative; margin-top: 8px; }
  @media (max-width: 900px) { .cancel-cine { grid-row: span 5; } }
  @media (max-width: 540px) { .cancel-cine { grid-row: auto; height: auto; } }
  .cc-copy { text-align: center; max-width: 620px; margin: 0 auto 6px; }
  .cc-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 99px;
    background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.22);
    color: #ff8a8a; font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 16px;
  }
  .cc-eyebrow-dot { width: 5px; height: 5px; border-radius: 99px; background: #ff6b6b;
    box-shadow: 0 0 6px rgba(255,107,107,0.6); animation: pulse 1.6s ease-in-out infinite; }
  .cc-h2 {
    font-family: 'Inter', sans-serif; font-size: clamp(28px, 3.3vw, 40px);
    line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; color: var(--fg); margin: 0 0 12px;
  }
  .cc-h2 em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; }
  .cc-lede { color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; margin: 0; }

  /* the space — no box, no border; chips float in raw page black */
  .cc-space { position: relative; height: 540px; isolation: isolate; }
  .cancel-cine { overflow: clip; }
  .cc-space::before {
    content: ''; position: absolute; inset: -40px 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(ellipse 42% 46% at 22% 24%, rgba(255,107,107,0.05), transparent 65%),
      radial-gradient(ellipse 40% 42% at 78% 70%, rgba(212,160,23,0.05), transparent 65%);
  }
  .cc-chip {
    position: absolute; left: var(--cx); top: var(--cy); width: 190px; z-index: 2;
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) scale(0.82);
    transition: transform .9s var(--ease-out) var(--fd), opacity .9s ease var(--fd);
    will-change: transform, opacity;
  }
  .cc-chip.in { opacity: 1; transform: none; }
  .cc-bob {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(20,20,23,0.92), rgba(12,12,14,0.92));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: ccBob var(--bob) ease-in-out calc(var(--fd) * -3) infinite alternate;
    transition: transform 1.6s ease .45s, opacity 1.6s ease .45s;
  }
  @keyframes ccBob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
  .cc-half {
    padding: 13px 14px 12px;
    display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 1px; align-items: center;
    min-height: 62px; box-sizing: border-box;
  }
  .cc-logo { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 8px; object-fit: contain;
    background: rgba(255,255,255,0.06); padding: 3px; }
  .cc-name { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .cc-what { grid-column: 2; grid-row: 2; font-size: 9px; color: var(--fg-mute); letter-spacing: 0.02em; }
  .cc-price {
    grid-column: 3; grid-row: 1 / 3; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    font-variant-numeric: tabular-nums; color: var(--fg-dim);
    text-decoration: line-through; text-decoration-color: transparent;
    transition: color .4s ease .25s, text-decoration-color .4s ease .25s;
  }
  .cc-half-top {
    position: relative; z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 34%, 0 66%);
    transition: transform .55s var(--ease-spring) .14s, opacity .55s ease .14s, filter .55s ease .14s;
  }
  .cc-half-bot {
    position: absolute; inset: 0;
    clip-path: polygon(0 66%, 100% 34%, 100% 100%, 0 100%);
    transition: transform .55s var(--ease-spring) .18s, opacity .55s ease .18s, filter .55s ease .18s;
  }
  .cc-streak {
    position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, #ffffff 30%, #ff5b5b 62%, transparent);
    transform: translateY(-50%) rotate(-9deg) scaleX(0);
    transform-origin: left center;
    filter: drop-shadow(0 0 6px rgba(255,80,80,0.8));
    pointer-events: none; opacity: 0;
  }
  .cc-chip.cut .cc-streak { animation: ccSlash 0.34s var(--ease-out) forwards; }
  @keyframes ccSlash {
    0%   { opacity: 1; transform: translateY(-50%) rotate(-9deg) scaleX(0); }
    70%  { opacity: 1; transform: translateY(-50%) rotate(-9deg) scaleX(1); }
    100% { opacity: 0; transform: translateY(-50%) rotate(-9deg) scaleX(1); }
  }
  .cc-chip.cut .cc-half-top { transform: translate(-7px, -12px) rotate(-3.4deg); opacity: 0.42; filter: grayscale(1) brightness(0.7); }
  .cc-chip.cut .cc-half-bot { transform: translate(7px, 14px) rotate(2.6deg); opacity: 0.36; filter: grayscale(1) brightness(0.65); }
  .cc-chip.cut .cc-price { color: #ff8b8b; text-decoration-color: rgba(255,100,100,0.85); }
  .cc-chip.cut .cc-bob { animation-play-state: paused; transform: translateY(30px) scale(0.94); opacity: 0.55; }

  /* the core — hidden until the stamp */
  .cc-core {
    position: absolute; left: 50%; top: 44%; z-index: 4;
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0; text-align: center; pointer-events: none;
  }
  .cc-space.stamped .cc-core { animation: ccCorePop 0.6s var(--ease-spring) forwards; }
  @keyframes ccCorePop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
    55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .cc-core-icon {
    position: relative;
    display: inline-grid; place-items: center;
    width: 84px; height: 84px; border-radius: 24px;
    background: linear-gradient(180deg, rgba(30,26,14,0.9), rgba(16,14,8,0.94));
    border: 1px solid rgba(212,160,23,0.4);
    box-shadow: 0 0 70px -12px rgba(212,160,23,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .cc-star { width: 44px; height: 44px; filter: drop-shadow(0 4px 14px rgba(224,168,0,0.5)); }
  .cc-ring {
    position: absolute; left: 50%; top: 42px; width: 84px; height: 84px;
    margin: -42px 0 0 -42px; border-radius: 28px;
    border: 1px solid rgba(212,160,23,0.7); opacity: 0; pointer-events: none;
  }
  .cc-space.stamped .cc-ring.r1 { animation: ccRing 0.9s var(--ease-out) 0.1s both; }
  .cc-space.stamped .cc-ring.r2 { animation: ccRing 1.1s var(--ease-out) 0.28s both; }
  @keyframes ccRing {
    0%   { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
  }
  .cc-core-name {
    margin-top: 16px; font-family: 'Inter', sans-serif;
    font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg);
  }
  .cc-core-sub { margin-top: 4px; font-size: 12.5px; color: var(--fg-dim); }
  .cc-core-sub b {
    font-weight: 600;
    background: linear-gradient(135deg, #f4c542, #D4A017);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .cc-tally {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 4;
    display: inline-flex; align-items: baseline; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
  }
  .cc-tally b { font-size: 17px; font-weight: 600; color: #ff8b8b; font-variant-numeric: tabular-nums; }
  .cc-tally em { font-style: normal; font-size: 10px; color: var(--fg-mute); letter-spacing: 0.05em; }
  .cc-space.stamped .cc-tally b { color: #4ade80; }

  @media (max-width: 900px) {
    .cc-space { height: 500px; }
    .cc-chip { width: 158px; }
    .cc-half { padding: 11px 12px 10px; min-height: 56px; grid-template-columns: 26px 1fr auto; }
    .cc-logo { width: 24px; height: 24px; }
    .cc-name { font-size: 11px; }
  }
  @media (max-width: 640px) {
    .cc-space { height: 470px; }
    .cc-chip { width: 132px; }
    .cc-what { display: none; }
    .cc-half { grid-template-rows: auto; min-height: 48px; }
    .cc-half-top { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 70%); }
    .cc-half-bot { clip-path: polygon(0 70%, 100% 30%, 100% 100%, 0 100%); }
    .cc-core-icon { width: 68px; height: 68px; border-radius: 20px; }
    .cc-star { width: 36px; height: 36px; }
    .cc-ring { top: 34px; }
    .cc-core-name { font-size: 16px; }
    /* pull edge chips inboard so nothing clips the viewport */
    .cc-chip { --fx: 0px !important; --fy: 40px !important; }
    .cc-chip:nth-child(1) { left: 4%; }  .cc-chip:nth-child(3) { left: auto; right: 8%; }
    .cc-chip:nth-child(4) { left: auto; right: 3%; }
    .cc-chip:nth-child(7) { left: auto; right: 6%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cc-chip { opacity: 1; transform: none; transition: none; }
    .cc-bob { animation: none; transition: none; }
    .cc-half-top, .cc-half-bot, .cc-price { transition: none; }
    .cc-chip.cut .cc-streak, .cc-space.stamped .cc-core, .cc-space.stamped .cc-ring { animation: none; }
    .cc-space.stamped .cc-core { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  [data-theme="light"] .cc-bob { background: linear-gradient(180deg, #ffffff, #f6f6f7); border-color: rgba(0,0,0,0.1); box-shadow: 0 20px 50px -18px rgba(0,0,0,0.25); }
  [data-theme="light"] .cc-space::before { opacity: 0.25; }
  [data-theme="light"] .ks-frame .ns-url { color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
  [data-theme="light"] .ks-frame .ns-live { color: rgba(0,0,0,0.55); }
  [data-theme="light"] .ks-rail-note { color: rgba(0,0,0,0.35); }
  [data-theme="light"] .cc-logo { background: rgba(0,0,0,0.05); }
  [data-theme="light"] .cc-core-icon { background: linear-gradient(180deg, #fffdf4, #fff8e0); }

  /* ═══ HERO REDESIGN (Phase 2): masked line reveals, dek, proof row, deals ticker ═══ */
  .hero .h-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
  .hero .h-line-in {
    display: inline-block;
    transform: translateY(112%);
    animation: hLineUp 0.85s var(--ease-out) forwards;
    animation-delay: var(--hd, 0.1s);
  }
  @keyframes hLineUp { to { transform: translateY(0); } }
  .hero .verb-rotator { opacity: 0; animation: hFadeIn 0.7s var(--ease-out) 0.4s forwards; }
  @keyframes hFadeIn { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .hero .h-line-in { animation: none; transform: none; }
    .hero .verb-rotator { animation: none; opacity: 1; }
  }
  .hero-dek {
    max-width: 52ch; margin: -6px auto 30px;
    font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55;
    color: var(--fg-dim); letter-spacing: -0.01em;
  }
  .hero-dek em {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
    color: rgba(244,241,255,0.9);
  }
  .hero-cta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
  .hero-see {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: var(--fg-dim);
    text-decoration: none; letter-spacing: -0.005em;
    transition: color var(--dur-fast) ease;
  }
  .hero-see:hover { color: var(--fg); }
  .hero-see svg { transition: transform var(--dur-fast) var(--ease-out); }
  .hero-see:hover svg { transform: translateY(2px); }
  /* hero-proof + hero-ticker removed — Sabbo round-3: hero de-clutter */
  @media (max-width: 640px) {
    .hero-dek { font-size: 14px; padding: 0 8px; }
  }

  /* ═══ NOVA SHOWCASE v2 — faithful /nova dashboard in a 3D frame (round 3) ═══ */
  .nova-show { position: relative; overflow: hidden; padding: 90px 0 60px; }
  .nova-show::before {
    content: ''; position: absolute; left: 8%; top: 12%; width: 640px; height: 520px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(217,119,87,0.07), transparent 65%);
  }
  .ns-stage { position: relative; max-width: 1120px; margin: 0 auto; perspective: 1700px; padding: 0 8px; }
  .ns-frame {
    /* warm Claude surface — tokens verbatim from app/globals.css nova block */
    --nv-bg: #141312; --nv-dark: #100F0E; --nv-deeper: #1C1B19;
    --nv-fg: #F4EEE4; --nv-mute: #9A958C; --nv-orange: #D97757;
    --spx: 50%; --spy: 30%;
    position: relative; border-radius: 20px; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, var(--nv-bg), var(--nv-dark));
    border: 1px solid rgba(244,238,228,0.09);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 40px 120px -30px rgba(0,0,0,0.85),
      0 0 90px -40px rgba(217,119,87,0.35);
    transform-style: preserve-3d;
    transform: rotateX(calc(2deg + var(--tiltX, 0deg))) rotateY(calc(-7deg + var(--tiltY, 0deg)));
    transition: transform .5s var(--ease-out);
    /* fade LEFT + bottom into the galaxy — mirror of seller-spy (right fade) */
    mask-image:
      linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.55) 93%, transparent 100%),
      linear-gradient(270deg, #000 0%, #000 62%, rgba(0,0,0,0.78) 88%, rgba(0,0,0,0.28) 100%);
    -webkit-mask-image:
      linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.55) 93%, transparent 100%),
      linear-gradient(270deg, #000 0%, #000 62%, rgba(0,0,0,0.78) 88%, rgba(0,0,0,0.28) 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    font-family: 'Inter', sans-serif; letter-spacing: -0.005em;
  }
  .ns-spot {
    position: absolute; inset: 0; pointer-events: none; z-index: 6;
    background: radial-gradient(360px 260px at var(--spx) var(--spy), rgba(244,238,228,0.045), transparent 70%);
    opacity: 0; transition: opacity .3s ease;
  }
  .ns-frame:hover .ns-spot { opacity: 1; }

  /* chrome */
  .ns-chrome {
    display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    border-bottom: 1px solid rgba(244,238,228,0.06);
    background: linear-gradient(180deg, rgba(244,238,228,0.03), transparent);
  }
  .nc-dot { width: 10px; height: 10px; border-radius: 50%; }
  .nc-dot.r { background: #ff5f56; opacity: .75; } .nc-dot.y { background: #ffbd2e; opacity: .75; } .nc-dot.g { background: #27c93f; opacity: .75; }
  .ns-url {
    flex: 1; max-width: 340px; margin: 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 5px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: rgba(244,238,228,0.45); background: rgba(244,238,228,0.03);
    border: 1px solid rgba(244,238,228,0.05); border-radius: 8px;
  }
  .ns-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9px; font-weight: 600; letter-spacing: .12em; color: rgba(244,238,228,0.55);
    padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(217,119,87,0.3);
  }
  .ns-live i { width: 5px; height: 5px; border-radius: 99px; background: var(--nv-orange); animation: pulse 2s infinite; }

  /* app: sidebar + main */
  .ns-app { display: grid; grid-template-columns: 212px 1fr; min-height: 520px; }
  .ns-side {
    background: var(--nv-dark); border-right: 1px solid rgba(244,238,228,0.06);
    padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  }
  .ns-side-back {
    display: flex; align-items: center; gap: 7px; padding: 6px 8px;
    font-size: 11px; font-weight: 600; color: var(--nv-fg);
  }
  .ns-side-back em { margin-left: auto; font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-mute); }
  .ns-side-back svg { color: var(--nv-mute); }
  .ns-side-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    background: rgba(244,238,228,0.03); border-radius: 7px; padding: 2px;
  }
  .ns-side-tabs span {
    text-align: center; font-size: 8px; font-weight: 600; letter-spacing: .01em;
    color: var(--nv-mute); padding: 5px 0; border-radius: 5px;
  }
  .ns-side-tabs span.active { background: var(--nv-deeper); color: var(--nv-fg); }
  .ns-side-search { display: flex; gap: 6px; align-items: center; }
  .ns-search-box {
    flex: 1; display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; color: var(--nv-mute);
    background: rgba(244,238,228,0.035); border: 1px solid rgba(244,238,228,0.05);
    border-radius: 7px; padding: 6px 9px;
  }
  .ns-newchat {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; color: var(--nv-mute);
    background: rgba(244,238,228,0.035); border: 1px solid rgba(244,238,228,0.05);
  }
  .ns-side-group { display: flex; flex-direction: column; gap: 1px; }
  .ns-side-eyebrow {
    font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(154,149,140,0.65); padding: 4px 8px 3px;
  }
  .ns-side-row {
    position: relative; display: flex; align-items: center; gap: 8px;
    height: 28px; padding: 0 8px; border-radius: 6px;
    font-size: 10.5px; color: rgba(244,238,228,0.72);
  }
  .ns-side-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ns-side-row em { margin-left: auto; font-style: normal; font-size: 9px; color: var(--nv-mute); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .ns-side-row.active { background: rgba(244,238,228,0.05); color: var(--nv-fg); }
  .ns-side-row.active::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
    border-radius: 0 99px 99px 0; background: var(--nv-orange);
  }

  /* main pane */
  .ns-main { display: flex; flex-direction: column; min-width: 0; background: var(--nv-bg); }
  .ns-tabs {
    display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px;
    background: var(--nv-dark); border-bottom: 1px solid rgba(244,238,228,0.06);
  }
  .ns-tab {
    display: inline-flex; align-items: center; gap: 6px; max-width: 210px;
    font-size: 10px; color: var(--nv-mute); padding: 5px 10px;
    border-radius: 7px 7px 0 0; overflow: hidden; white-space: nowrap;
  }
  .ns-tab svg { flex-shrink: 0; opacity: .55; }
  .ns-tab.active { background: var(--nv-bg); color: var(--nv-fg); border: 1px solid rgba(244,238,228,0.06); border-bottom-color: var(--nv-bg); }
  .ns-tab.active svg { color: var(--nv-orange); opacity: 1; }
  .ns-tab i { font-style: normal; opacity: .5; margin-left: 2px; }
  .ns-tab-add { color: var(--nv-mute); font-size: 13px; padding: 0 7px; }
  .ns-model {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 600; color: rgba(244,238,228,0.8);
    border: 1px solid rgba(244,238,228,0.08); border-radius: 999px; padding: 4px 10px;
    background: rgba(244,238,228,0.03);
  }
  .ns-model i { width: 5px; height: 5px; border-radius: 99px; background: var(--nv-orange); }
  .ns-strip {
    display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 14px;
    font-size: 9px; color: var(--nv-mute); font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(244,238,228,0.05);
  }
  .ns-strip svg { color: var(--nv-orange); }
  .ns-strip b { color: rgba(244,238,228,0.85); font-weight: 600; }
  .ns-strip u { text-decoration: none; color: #3F3C37; }
  .ns-strip-plan { letter-spacing: .1em; font-weight: 700; font-size: 8px; }
  .ns-strip-bar { width: 84px; height: 4px; border-radius: 99px; background: rgba(244,238,228,0.07); overflow: hidden; }
  .ns-strip-bar i { display: block; width: 26%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #78C291, #D4B896); }

  /* transcript — avatar rows, not bubbles (faithful to nova-pane) */
  .ns-msgs {
    flex: 1; min-height: 260px; max-height: 330px; overflow: hidden;
    padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 16px;
  }
  .ns-row { display: flex; gap: 10px; animation: nsIn .34s var(--ease-out) both; }
  @keyframes nsIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  .ns-ava {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nv-orange); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .ns-ava.you {
    width: 22px; height: 22px; margin: 1px;
    background: rgba(244,238,228,0.08); color: var(--nv-mute);
    font-size: 7.5px; font-weight: 700; letter-spacing: .02em;
    box-shadow: none;
  }
  .ns-row-body { min-width: 0; flex: 1; }
  .ns-name { font-size: 8px; font-weight: 700; letter-spacing: .14em; color: var(--nv-mute); margin-bottom: 4px; }
  .ns-text { font-size: 12px; line-height: 1.6; color: rgba(244,238,228,0.88); }
  .ns-act {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px;
    font-size: 10px; color: var(--nv-mute); font-variant-numeric: tabular-nums;
  }
  .ns-act b { color: rgba(244,238,228,0.75); font-weight: 500; }
  .ns-act .ok { color: #78C291; }
  .ns-typing { display: inline-flex; gap: 4px; padding: 5px 0; }
  .ns-typing i {
    width: 5px; height: 5px; border-radius: 99px; background: var(--nv-orange);
    animation: nsThink 1s ease infinite;
  }
  .ns-typing i:nth-child(2) { animation-delay: .12s; } .ns-typing i:nth-child(3) { animation-delay: .24s; }
  @keyframes nsThink { 0%,60%,100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

  /* in-chat artifacts */
  .ns-card {
    margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--nv-deeper); border: 1px solid rgba(244,238,228,0.07);
  }
  .ns-card-l b { display: block; font-size: 11.5px; font-weight: 600; color: var(--nv-fg); }
  .ns-card-l span { font-size: 10px; color: var(--nv-mute); font-variant-numeric: tabular-nums; }
  .ns-card-r { display: flex; align-items: center; gap: 8px; }
  .ns-card-r em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: #78C291; }
  .ns-card-r i {
    font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .1em;
    color: #0c0c0e; background: #78C291; border-radius: 5px; padding: 3px 7px;
  }
  .ns-okchip {
    margin-top: 9px; display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    color: #78C291; border: 1px solid rgba(120,194,145,0.35); background: rgba(120,194,145,0.08);
    border-radius: 999px; padding: 5px 11px;
  }
  .ns-fees { margin-top: 9px; border: 1px solid rgba(244,238,228,0.07); border-radius: 10px; overflow: hidden; }
  .ns-fee {
    display: flex; justify-content: space-between; padding: 7px 12px;
    font-size: 10.5px; color: var(--nv-mute); background: var(--nv-deeper);
  }
  .ns-fee + .ns-fee { border-top: 1px solid rgba(244,238,228,0.05); }
  .ns-fee b { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: rgba(244,238,228,0.85); }
  .ns-fee.tot { background: rgba(217,119,87,0.10); }
  .ns-fee.tot span { color: rgba(244,238,228,0.9); font-weight: 600; }
  .ns-fee.tot b { color: var(--nv-orange); }

  /* chips + composer + footer */
  .ns-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 20px 10px; }
  .ns-chips button {
    font-size: 10px; color: rgba(244,238,228,0.65); cursor: pointer;
    background: rgba(244,238,228,0.035); border: 1px solid rgba(244,238,228,0.08);
    border-radius: 999px; padding: 6px 12px; font-family: inherit; letter-spacing: -0.005em;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .ns-chips button:hover { border-color: rgba(217,119,87,0.5); color: var(--nv-fg); }
  .ns-input {
    display: flex; align-items: center; gap: 8px; margin: 0 20px;
    background: var(--nv-deeper);
    border: 1px solid rgba(196,181,160,0.35); border-radius: 14px; padding: 6px 6px 6px 14px;
    box-shadow: 0 0 0 3px rgba(196,181,160,0.07);
  }
  .ns-input input {
    flex: 1; min-width: 0; background: none; border: 0; outline: 0;
    font-family: inherit; font-size: 12px; color: var(--nv-fg); letter-spacing: -0.005em;
  }
  .ns-input input::placeholder { color: var(--nv-mute); }
  .ns-mode {
    flex-shrink: 0; font-size: 9px; font-weight: 600; color: #C4B5A0;
    border: 1px solid rgba(196,181,160,0.35); border-radius: 999px; padding: 3px 9px;
  }
  .ns-input button {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nv-orange); color: #fff;
    transition: transform var(--dur-fast) var(--ease-spring);
  }
  .ns-input button:hover { transform: scale(1.08); }
  .ns-foot {
    display: flex; align-items: center; gap: 7px; padding: 9px 22px 13px;
    font-size: 8.5px; color: var(--nv-mute); font-variant-numeric: tabular-nums;
  }
  .ns-foot u { text-decoration: none; color: #3F3C37; }
  .ns-foot-bar { width: 90px; height: 3px; border-radius: 99px; background: rgba(244,238,228,0.07); overflow: hidden; }
  .ns-foot-bar i { display: block; width: 4%; height: 100%; background: #78C291; border-radius: 99px; }
  .ns-foot-r { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: rgba(154,149,140,0.8); }

  @media (max-width: 900px) {
    .ns-frame { transform: none; mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); }
    .ns-app { grid-template-columns: 1fr; }
    .ns-side { display: none; }
  }
  @media (max-width: 640px) {
    .ns-msgs { max-height: 300px; padding: 14px 12px 6px; }
    .ns-chips { padding: 4px 12px 8px; }
    .ns-input { margin: 0 12px; }
    .ns-foot { padding: 8px 14px 12px; }
    .ns-strip span:nth-last-child(-n+2), .ns-strip u:last-of-type { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-row { animation: none; }
    .ns-typing i { animation: none; }
  }

  /* light theme: the Nova surface stays its own warm dark identity — only frame edges adapt */
  [data-theme="light"] .ns-frame { border-color: rgba(0,0,0,0.16); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.35); }

  /* ═══ KEEPA SHOWCASE v2 — the in-product Price & Sales History chart, 3D frame (round 3) ═══ */
  .keepa-show { position: relative; overflow: hidden; padding: 70px 0 50px; }
  .keepa-show::before {
    content: ''; position: absolute; left: 6%; top: 12%; width: 640px; height: 480px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(67,160,71,0.05), transparent 65%);
  }
  .ks-stage { max-width: 1140px; margin: 0 auto; position: relative; perspective: 1700px; padding: 0 8px; }
  .ks-frame {
    --spx: 50%; --spy: 30%;
    position: relative; isolation: isolate;
    border-radius: 20px; overflow: hidden;
    background:
      radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,0.02), transparent 70%),
      linear-gradient(180deg, #0d0d0f, #070708);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 40px 120px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 90px -45px rgba(67,160,71,0.4);
    transform-style: preserve-3d;
    transform: rotateX(calc(2deg + var(--tiltX, 0deg))) rotateY(calc(-7deg + var(--tiltY, 0deg)));
    transition: transform .5s var(--ease-out);
    mask-image:
      linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0.55) 94%, transparent 100%),
      linear-gradient(270deg, #000 0%, #000 62%, rgba(0,0,0,0.78) 88%, rgba(0,0,0,0.28) 100%);
    -webkit-mask-image:
      linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0.55) 94%, transparent 100%),
      linear-gradient(270deg, #000 0%, #000 62%, rgba(0,0,0,0.78) 88%, rgba(0,0,0,0.28) 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
  .ks-spot {
    position: absolute; inset: 0; pointer-events: none; z-index: 6;
    background: radial-gradient(360px 260px at var(--spx) var(--spy), rgba(255,255,255,0.045), transparent 70%);
    opacity: 0; transition: opacity .3s ease;
  }
  .ks-frame:hover .ks-spot { opacity: 1; }
  .ks-chrome {
    display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  }
  .ks-body { display: grid; grid-template-columns: 264px 1fr; }
  .ks-rail { border-right: 1px solid rgba(255,255,255,0.06); padding: 14px 12px;
    display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,0.012); }
  .ks-prod { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
    padding: 10px 11px; border-radius: 12px; cursor: pointer;
    background: transparent; border: 1px solid transparent;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; }
  .ks-prod:hover { background: rgba(255,255,255,0.03); }
  .ks-prod.active { background: rgba(255,153,0,0.07); border-color: rgba(255,153,0,0.3); }
  .ks-emoji { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    font-size: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
  .ks-pinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .ks-pinfo b { font-size: 12px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ks-pinfo span { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--fg-mute); }
  .ks-grade { font-style: normal; width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 11px; font-weight: 800;
    background: rgba(74,222,128,0.12); color: var(--green); border: 1px solid rgba(74,222,128,0.25); }
  .ks-prod:nth-child(4) .ks-grade { background: rgba(244,197,66,0.1); color: #F0C94A; border-color: rgba(244,197,66,0.3); }
  .ks-rail-note { margin-top: auto; padding-top: 10px; font-size: 10px; color: rgba(255,255,255,0.3);
    font-family: 'Inter', sans-serif; line-height: 1.5; }
  .ks-main { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

  /* stats summary strip — mirrors the analyzer strip above the chart */
  .ks-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    padding: 11px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  }
  .ks-sgroup { min-width: 0; }
  .ks-sghead {
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--fg-mute); margin-bottom: 7px; font-family: 'Inter', sans-serif;
  }
  .ks-scells { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .ks-scell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ks-scell span { font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }
  .ks-scell b { font-size: 12px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
  .ks-scell em { font-style: normal; font-size: 8.5px; color: var(--fg-mute); font-variant-numeric: tabular-nums; }

  /* chart card: charts column + right legend panel — the product's exact anatomy */
  .ks-card {
    display: flex; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05);
  }
  .ks-charts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ks-sub { position: relative; padding: 12px 10px 6px; }
  .ks-sub-price { padding-right: 52px; }
  .ks-sub-off { border-top: 1px solid rgba(255,255,255,0.05); }
  .ks-chart { width: 100%; display: block; overflow: visible; transition: opacity .28s ease; }
  .ks-chart.ks-price { height: 216px; }
  .ks-chart.ks-ranks { height: 104px; }
  .ks-chart.ks-off { height: 92px; }
  .ks-sub-rank { border-top: 1px solid rgba(255,255,255,0.05); }
  .ks-sub .kc-yaxis { font-family: 'JetBrains Mono', monospace; font-size: 7px; fill: rgba(255,255,255,0.4); }
  .ks-sub .kc-yaxis.kc-rank { fill: rgba(67,160,71,0.7); }
  .ks-sub .kc-yaxis.kc-off { fill: rgba(156,123,255,0.7); }
  .ks-sub .kc-yaxis.kc-rate { fill: rgba(20,184,166,0.7); }
  .ks-sub .kc-grid { stroke: rgba(255,255,255,0.06); stroke-width: 0.4; }
  .ks-cur {
    position: absolute; right: 2px; transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600;
    color: var(--c); pointer-events: none; white-space: nowrap;
    transition: top .4s var(--ease-out);
  }
  .ks-legend {
    width: 148px; flex-shrink: 0; padding: 12px 12px 14px;
    border-left: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.014);
    display: flex; flex-direction: column; gap: 5px;
  }
  .ks-lhead {
    font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); margin: 7px 0 2px;
  }
  .ks-lhead:first-child { margin-top: 0; }
  .ks-lrow {
    display: flex; align-items: center; gap: 7px;
    font-size: 9.5px; color: rgba(255,255,255,0.7); font-family: 'Inter', sans-serif;
  }
  .ks-lrow i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex-shrink: 0; }
  .ks-lrow i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 4px); }
  .ks-lrow .ks-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ks-lrow b { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500;
    color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
  .ks-lrow.off { color: rgba(255,255,255,0.35); text-decoration: line-through; }
  .ks-lrow.off i { opacity: 0.35; }
  .ks-range { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
  .ks-range button {
    background: none; border: 0; padding: 2px 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; color: var(--fg-mute);
    transition: color var(--dur-fast) ease;
  }
  .ks-range button span { font-size: 8.5px; opacity: 0.7; }
  .ks-range button:hover { color: var(--fg); }
  .ks-range button.active {
    color: #ef4444; text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: #ef4444;
  }

  .ks-math { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 13px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); }
  .ksm-cell { display: flex; flex-direction: column; gap: 2px; }
  .ksm-cell span { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg-mute); }
  .ksm-cell b { font-size: 15px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .ksm-profit b { color: var(--green); }
  .ksm-arrow { color: rgba(255,255,255,0.25); font-size: 13px; }
  .ksm-verdict { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .ksm-roi { font-style: italic; font-family: 'Playfair Display', serif; font-weight: 500;
    font-size: 26px; letter-spacing: -0.02em;
    background: linear-gradient(100deg, #f4c542 0%, #D4A017 60%, #f4c542 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ksm-pill { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.07em;
    padding: 6px 14px; border-radius: 99px;
    background: linear-gradient(135deg, #4ade80, #22c55e); color: #0a2515;
    box-shadow: 0 6px 18px -6px rgba(74,222,128,0.55); }
  @media (max-width: 1000px) {
    .ks-legend { width: 128px; }
  }
  @media (max-width: 900px) {
    .ks-frame { transform: none; mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); }
    .ks-body { grid-template-columns: 1fr; }
    .ks-rail { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-direction: row; overflow-x: auto; padding: 12px; }
    .ks-prod { min-width: 200px; }
    .ks-rail-note { display: none; }
    .ks-stats { grid-template-columns: 1fr; gap: 10px; }
    .ks-card { flex-direction: column; }
    .ks-legend { width: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,0.06);
      flex-direction: row; flex-wrap: wrap; gap: 5px 14px; align-items: center; }
    .ks-lhead { width: 100%; margin: 5px 0 0; }
    .ks-range { flex-direction: row; gap: 12px; }
    .ks-chart.ks-price { height: 170px; }
    .ks-chart.ks-ranks { height: 78px; }
    .ks-chart.ks-off { height: 70px; }
    .ksm-verdict { margin-left: 0; width: 100%; justify-content: flex-end; }
  }
  [data-theme="light"] .ks-frame { background: #fdfdfd; border-color: rgba(0,0,0,0.12); }
  [data-theme="light"] .ks-chrome { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
  [data-theme="light"] .ks-rail { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
  [data-theme="light"] .ks-stats, [data-theme="light"] .ks-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
  [data-theme="light"] .ks-scell b { color: #1c1c1e; }
  [data-theme="light"] .ks-sub .kc-yaxis { fill: rgba(0,0,0,0.45); }
  [data-theme="light"] .ks-sub .kc-grid { stroke: rgba(0,0,0,0.08); }
  [data-theme="light"] .ks-legend { background: rgba(0,0,0,0.015); border-color: rgba(0,0,0,0.07); }
  [data-theme="light"] .ks-lhead { color: rgba(0,0,0,0.4); }
  [data-theme="light"] .ks-lrow { color: rgba(0,0,0,0.65); }
  [data-theme="light"] .ks-lrow b { color: rgba(0,0,0,0.85); }
  [data-theme="light"] .ks-math { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
  [data-theme="light"] .ks-rail-note { color: rgba(0,0,0,0.35); }
  [data-theme="light"] .ksm-arrow { color: rgba(0,0,0,0.3); }

  /* ═══ SHEETS SHOWCASE (spec §D3) — the white contrast beat ═══ */
  .sheets-show { position: relative; overflow: hidden; padding: 60px 0; }
  .sheets-show::before {
    content: ''; position: absolute; right: 6%; top: 14%; width: 620px; height: 480px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(52,168,83,0.05), transparent 65%);
  }
  .gs2-stage { max-width: 1020px; margin: 0 auto; perspective: 1700px; position: relative; }
  .gs2-frame {
    --spx: 50%; --spy: 30%;
    position: relative; isolation: isolate;
    background: #ffffff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 50px 140px -40px rgba(255,255,255,0.13), 0 30px 80px -30px rgba(0,0,0,0.8),
                0 0 0 1px rgba(255,255,255,0.16);
    transform-style: preserve-3d;
    transform: rotateX(calc(2deg + var(--tiltX, 0deg))) rotateY(calc(7deg + var(--tiltY, 0deg)));
    transition: transform .5s var(--ease-out);
    /* fade RIGHT + bottom — opposite side + opposite tilt from the Nova frame above */
    mask-image:
      linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0.55) 94%, transparent 100%),
      linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,0.78) 88%, rgba(0,0,0,0.28) 100%);
    -webkit-mask-image:
      linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0.55) 94%, transparent 100%),
      linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,0.78) 88%, rgba(0,0,0,0.28) 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    padding-bottom: 26px;
  }
  .gs2-spot {
    position: absolute; inset: 0; pointer-events: none; z-index: 6;
    background: radial-gradient(340px 240px at var(--spx) var(--spy), rgba(26,115,232,0.05), transparent 70%);
    opacity: 0; transition: opacity .3s ease;
  }
  .gs2-frame:hover .gs2-spot { opacity: 1; }
  .gs2-fx {
    display: flex; align-items: center; gap: 10px; padding: 7px 14px;
    background: #fff; border-bottom: 1px solid #E0E3E0;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #5F6368;
  }
  .gs2-fx em { font-style: italic; font-family: 'Inter', sans-serif; font-size: 11px; color: #9AA0A6; padding-right: 10px; border-right: 1px solid #E0E3E0; }
  .gs2-fx b { font-weight: 500; color: #202124; }
  @media (max-width: 900px) {
    .gs2-frame { transform: none; mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); }
  }
  .gs2-bar { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; background: #F8F9FA; border-bottom: 1px solid #E0E3E0; }
  .gs2-doc { display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #202124; letter-spacing: -0.01em; }
  .gs2-sync { display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #137333; }
  .gs2-sync i { width: 6px; height: 6px; border-radius: 99px; background: #34A853;
    animation: pulseDot 1.6s ease-in-out infinite; }
  .gs2-tabs { display: flex; gap: 2px; padding: 8px 14px 0; background: #F8F9FA; border-bottom: 1px solid #E0E3E0; }
  .gs2-tabs button { padding: 7px 16px; border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0; background: transparent; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; color: #5F6368;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
  .gs2-tabs button:hover { background: rgba(0,0,0,0.04); }
  .gs2-tabs button.active { background: #ffffff; border-color: #E0E3E0; color: #137333; font-weight: 600;
    margin-bottom: -1px; }
  .gs2-grid { display: flex; flex-direction: column; min-height: 320px; }
  .gs2-row { display: grid; grid-template-columns: var(--gs2-cols, 28px 1.7fr 1fr 0.7fr 0.7fr 0.6fr); }
  .gs2-row > div { padding: 8px 12px; border-bottom: 1px solid #EDEFEB; border-right: 1px solid #EDEFEB;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #202124;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gs2-row > div:last-child { border-right: 0; }
  .gs2-row .gs2-rn { background: #F6F8F6; color: #80868B; text-align: center; padding-left: 0; padding-right: 0;
    font-size: 10px; }
  .gs2-row.gs2-head { background: #E6F4EA; }
  .gs2-row.gs2-head > div { color: #137333; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 10.5px; letter-spacing: 0.02em; border-bottom: 1px solid #CEEAD6; }
  .gs2-row .num { font-variant-numeric: tabular-nums; text-align: right; }
  .gs2-row .pos { color: #137333; font-weight: 600; }
  .gs2-row .neg { color: #B3261E; }
  .gs2-row .warn { color: #B06000; font-weight: 600; }
  .gs2-row.gs2-net { background: #F3FBF5; }
  .gs2-row.gs2-net > div { font-weight: 700; border-top: 1.5px solid #CEEAD6; }
  .gs2-row.gs2-in { animation: gs2RowIn 0.4s var(--ease-out) both; }
  @keyframes gs2RowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .gs2-sel { outline: 2px solid #1A73E8; outline-offset: -2px; transition: outline-color .3s ease; }
  .gs2-total { padding: 10px 18px 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #137333;
    min-height: 30px; }
  .gs2-total.gs2-in { animation: gs2RowIn 0.4s var(--ease-out) both; }
  @media (prefers-reduced-motion: reduce) {
    .gs2-row.gs2-in, .gs2-total.gs2-in { animation: none; }
    .gs2-sync i { animation: none; }
  }
  @media (max-width: 700px) {
    .gs2-row > div { font-size: 9.5px; padding: 7px 8px; }
    .gs2-doc { font-size: 11.5px; }
    .gs2-tabs button { padding: 6px 10px; font-size: 10.5px; }
    .gs2-grid { min-height: 260px; }
  }

  /* ═══ Phase 6: teaser links + radar sweep (bento tile 1) ═══ */
  .ks-teaser {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: auto; padding: 9px 12px; border-radius: 10px;
    background: rgba(255,140,0,0.06); border: 1px solid rgba(255,140,0,0.2);
    font-size: 11px; font-weight: 500; color: #FFB55C; text-decoration: none;
    letter-spacing: -0.005em;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }
  .ks-teaser:hover { background: rgba(255,140,0,0.1); border-color: rgba(255,140,0,0.35); }
  .ks-teaser svg { transition: transform var(--dur-fast) var(--ease-out); }
  .ks-teaser:hover svg { transform: translateY(2px); }
  .nova-chat .ks-teaser { background: rgba(217,119,87,0.07); border-color: rgba(217,119,87,0.25); color: #E8987B; }
  .nova-chat .ks-teaser:hover { background: rgba(217,119,87,0.12); border-color: rgba(217,119,87,0.4); }

  .radar { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px;
    background:
      repeating-radial-gradient(circle at 50% 46%, transparent 0 33px, rgba(255,255,255,0.045) 33px 34px),
      radial-gradient(circle at 50% 46%, rgba(191,90,242,0.05), transparent 70%);
  }
  .radar-sweep { position: absolute; left: 50%; top: 46%; width: 320px; height: 320px;
    margin: -160px 0 0 -160px; border-radius: 99px;
    background: conic-gradient(from 0deg, rgba(191,90,242,0.22), rgba(191,90,242,0.05) 55deg, transparent 70deg);
    animation: radarSpin 6s linear infinite;
  }
  @keyframes radarSpin { to { transform: rotate(360deg); } }
  .radar-dot { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px;
    border-radius: 99px; background: rgba(255,255,255,0.35); }
  .radar-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 99px;
    border: 1px solid rgba(191,90,242,0.6); opacity: 0;
    animation: radarPing 6s ease-out infinite; animation-delay: var(--d, 0s); }
  .radar-dot.hit { background: var(--green); box-shadow: 0 0 8px rgba(74,222,128,0.6); }
  .radar-dot.hit::after { border-color: rgba(74,222,128,0.7); }
  @keyframes radarPing {
    0%, 4% { opacity: 0.9; transform: scale(0.6); }
    18%    { opacity: 0;   transform: scale(2.4); }
    100%   { opacity: 0;   transform: scale(2.4); }
  }
  .radar-center { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 5px 11px; border-radius: 99px;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);
    font-size: 10px; font-weight: 500; color: var(--fg-dim); backdrop-filter: blur(6px);
  }
  .radar-count { position: absolute; left: 12px; bottom: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--fg-mute); }
  /* scan console strip — the AI-sourcing stage animation, re-added over the radar (round 3) */
  .radar-scan {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px;
    padding: 8px 11px 10px; border-radius: 10px;
    background: rgba(8,8,10,0.72); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.07);
    transition: opacity .25s ease;
  }
  .radar-scan.swap { opacity: 0; }
  .rs-status {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple, #BF5AF2);
  }
  .rs-title { font-size: 10.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rs-conf { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--fg-mute);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rs-bar { grid-column: 1 / -1; margin-top: 6px; height: 2px; border-radius: 99px;
    background: rgba(255,255,255,0.08); overflow: hidden; }
  .rs-bar i { display: block; height: 100%; width: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #BF5AF2, #D4A8FF);
    transform-origin: left; animation: rsFill 3s linear infinite; }
  @keyframes rsFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .rs-bar i { animation: none; transform: none; } }
  .radar-count b { color: var(--green); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) {
    .radar-sweep { animation: none; opacity: 0.4; }
    .radar-dot::after { animation: none; }
  }
  [data-theme="light"] .radar { background:
      repeating-radial-gradient(circle at 50% 46%, transparent 0 33px, rgba(0,0,0,0.06) 33px 34px),
      radial-gradient(circle at 50% 46%, rgba(191,90,242,0.06), transparent 70%); }
  [data-theme="light"] .radar-center { background: rgba(255,255,255,0.7); }

  /* Phase 7: light-theme legibility for showcase legends/tabs */
  [data-theme="light"] .ks-frame .keepa-legend .lg { color: rgba(0,0,0,0.65); background: rgba(0,0,0,0.04); }
  [data-theme="light"] .ks-frame .keepa-range button { color: rgba(0,0,0,0.4); }
  [data-theme="light"] .ks-frame .keepa-range button:hover { color: rgba(0,0,0,0.75); background: rgba(0,0,0,0.05); }
  [data-theme="light"] .ks-frame .keepa-range button.active { background: rgba(0,0,0,0.08); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
  [data-theme="light"] .ks-emoji { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
  [data-theme="light"] .ks-sub .kc-head { color: rgba(0,0,0,0.5); }
  [data-theme="light"] .ksm-arrow { color: rgba(0,0,0,0.3); }
  [data-theme="light"] .ns-msgs .ns-msg.bot { color: var(--fg); }
  [data-theme="light"] .ns-card-l b { color: var(--fg); }
  [data-theme="light"] .ns-fee { background: rgba(0,0,0,0.02); color: var(--fg-dim); }
  [data-theme="light"] .ns-fee b { color: var(--fg); }

  /* ═══ round-3 R8: integrations tile fixes ═══ */
  .iv-cb-rows { width: 100%; display: flex; flex-direction: column; gap: 5px; font-family: 'Inter', sans-serif; }
  .iv-cb-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
    font-size: 10.5px;
  }
  .iv-cb-row .st { font-weight: 600; color: var(--fg); }
  .iv-cb-row .or { color: var(--fg-mute); font-size: 9.5px; flex: 1; }
  .iv-cb-row b { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: #4ade80; font-variant-numeric: tabular-nums; }
  .iv-cb-row.tot { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.2); }
  .iv-map-streets {
    position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
  }
  .iv-map-route { position: absolute; inset: 0; width: 100%; height: 100%; }
  .iv-map-pin.p6 { left: 30%; top: 26%; }
  .iv-map-pin.p7 { left: 84%; top: 62%; }
  .iv-members-join {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(74,222,128,0.07); border: 1px solid rgba(74,222,128,0.22);
    font-size: 9.5px; color: rgba(255,255,255,0.75);
    animation: ivJoinPulse 4s ease-in-out infinite;
  }
  .iv-members-join i { width: 5px; height: 5px; border-radius: 99px; background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.7); }
  @keyframes ivJoinPulse { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }
  .int-tile { transition: transform .3s var(--ease-spring), border-color .3s ease, box-shadow .3s ease; }
  .int-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -22px rgba(0,0,0,0.7); }
  @media (prefers-reduced-motion: reduce) { .int-tile:hover { transform: none; } .iv-members-join { animation: none; } }

  /* ═══ round-3 R9: bt-tiles + phases go 3D; chart craft ═══ */
  .bt-grid, .phases, .stages { perspective: 1400px; }
  .bt-tile, .phase, .stage {
    transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
    transform-style: preserve-3d;
    transition: transform .4s var(--ease-out);
    will-change: transform;
  }
  /* revenue chart: real-chart grammar */
  .bt-rev-chart { position: relative; }
  .bt-rev-chart::before {
    content: ''; position: absolute; inset: 0 0 1px 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 25%);
  }
  .bt-rev-chart::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: linear-gradient(0deg, rgba(0,200,83,0.07), transparent 55%);
    animation: btMoneyRise 5s ease-in-out infinite alternate;
  }
  @keyframes btMoneyRise { from { opacity: 0.4; } to { opacity: 1; } }
  .bt-rev-col { position: relative; z-index: 1; }
  /* seg grow/gradients: original btBarRise rules retained (lines ~1605) */
  @media (prefers-reduced-motion: reduce) {
    .bt-rev-chart::after { animation: none; }
    .bt-tile, .phase, .stage { transform: none; }
  }

  /* sell chart: axis + gridlines */
  .ph-sell-stage::before {
    content: ''; position: absolute; inset: 8px 10px 6px; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 33.3%);
  }
  .ph-sell-stage::after {
    content: '$6K'; position: absolute; top: 5px; right: 8px; z-index: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 7px; color: rgba(255,255,255,0.3);
  }
  .ph-sell-bar { border-radius: 3px 3px 0 0; }


/* Anti-FOUC handshake — see inline <style> in 247-profits-os.html head */
body{visibility:visible}