:root {
    --squeeze: #FFC93C; --rind: #123529; --pulp: #F0662F; --ice: #CFE7DD;
    --bg: #F5F8F6; --surface: #FFFFFF; --surface-2: #E9F0EC; --surface-3: #DCE8E2;
    --ink: #123529; --ink-soft: #47685B; --ink-faint: #789085; --line: #D3E2DA; --line-soft: #E4EDE8;
    --accent: var(--squeeze); --accent-ink: #123529;
    --panel: #123529; --panel-2: #0B241C; --panel-ink: #EAF3EE; --panel-faint: #A9C6B8; --panel-line: #21473A;
    --ok: #2E8B57; --warn: #C9821B; --bad: #C0442A;
    --shadow-sm: 0 1px 2px rgba(18,53,41,.06);
    --shadow: 0 1px 2px rgba(18,53,41,.05), 0 14px 34px -18px rgba(18,53,41,.22);
    --shadow-lg: 0 2px 4px rgba(18,53,41,.04), 0 28px 70px -24px rgba(18,53,41,.32);
    --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --pill: 999px;
    --sans: "Avenir Next", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --nav-h: 70px;
    --gut: clamp(16px, 3.4vw, 46px);
    --maxw: 1460px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #121514; --surface: #1A1E1C; --surface-2: #232927; --surface-3: #2B332F;
      --ink: #EFF2F0; --ink-soft: #A9B4AE; --ink-faint: #6F7A74; --line: #2C332F; --line-soft: #242B27;
      --accent: #FFD35C; --accent-ink: #121514; --pulp: #FF8551; --ice: #263129;
      --panel: #0B241C; --panel-2: #061410; --panel-ink: #EAF3EE; --panel-faint: #7FA795; --panel-line: #1B3A2E;
      --ok: #6FCB8F; --warn: #E0A83D; --bad: #E5764F;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
      --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.85);
      --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 70px -24px rgba(0,0,0,.95);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #121514; --surface: #1A1E1C; --surface-2: #232927; --surface-3: #2B332F;
    --ink: #EFF2F0; --ink-soft: #A9B4AE; --ink-faint: #6F7A74; --line: #2C332F; --line-soft: #242B27;
    --accent: #FFD35C; --accent-ink: #121514; --pulp: #FF8551; --ice: #263129;
    --panel: #0B241C; --panel-2: #061410; --panel-ink: #EAF3EE; --panel-faint: #7FA795; --panel-line: #1B3A2E;
    --ok: #6FCB8F; --warn: #E0A83D; --bad: #E5764F;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.85);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 70px -24px rgba(0,0,0,.95);
    color-scheme: dark;
  }
  :root[data-theme="light"] {
    --bg: #F5F8F6; --surface: #FFFFFF; --surface-2: #E9F0EC; --surface-3: #DCE8E2;
    --ink: #123529; --ink-soft: #47685B; --ink-faint: #789085; --line: #D3E2DA; --line-soft: #E4EDE8;
    --accent: #FFC93C; --accent-ink: #123529; --pulp: #F0662F; --ice: #CFE7DD;
    --panel: #123529; --panel-2: #0B241C; --panel-ink: #EAF3EE; --panel-faint: #A9C6B8; --panel-line: #21473A;
    --ok: #2E8B57; --warn: #C9821B; --bad: #C0442A;
    --shadow-sm: 0 1px 2px rgba(18,53,41,.06);
    --shadow: 0 1px 2px rgba(18,53,41,.05), 0 14px 34px -18px rgba(18,53,41,.22);
    --shadow-lg: 0 2px 4px rgba(18,53,41,.04), 0 28px 70px -24px rgba(18,53,41,.32);
    color-scheme: light;
  }

  * { box-sizing: border-box; }
  /* Horizontal overflow is clipped at the viewport on BOTH html and body.
     Setting it on body alone doesn't work: while html is `visible`, body's
     overflow propagates to the viewport and body's own used value becomes
     visible — so mobile browsers still pan sideways into empty space.
     `clip` rather than `hidden` on purpose: it doesn't create a scroll
     container (the sticky header keeps working) and doesn't force the
     vertical axis to `auto`. Decorative bleed — .glow blobs, .bleed::before,
     the ticker — is meant to run off-screen; this only stops you scrolling
     to it. `hidden` stays first on body as a fallback for older engines. */
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
  }
  a { color: inherit; text-decoration: none; }
  img, svg { max-width: 100%; }
  .shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
  .center { text-align: center; }

  /* ===================== ANNOUNCE ===================== */
  .announce {
    background: var(--accent); color: var(--accent-ink);
    font-size: clamp(12.5px, 1.6vw, 14px); font-weight: 700; text-align: center;
    padding: 10px var(--gut); position: relative; z-index: 60;
  }
  .announce a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

  /* ===================== HEADER ===================== */
  .site-head {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    border-bottom: 1px solid var(--line);
  }
  .nav { display: flex; align-items: center; gap: 8px; height: var(--nav-h); }
  .brand { display: flex; align-items: center; gap: 11px; margin-right: 18px; flex: none; }
  .brand-name { font-size: clamp(18px, 2.2vw, 21px); font-weight: 800; letter-spacing: -.026em; line-height: 1; white-space: nowrap; }
  .brand-name em { font-style: normal; font-weight: 500; color: var(--ink-soft); }
  .brand-tm { font-size: 9px; font-weight: 700; color: var(--ink-faint); vertical-align: super; }

  .nav-main { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; }
  .nav-item { position: relative; }
  .nav-trigger {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; white-space: nowrap;
    font-family: inherit; font-size: 15px; font-weight: 650; color: var(--ink-soft);
    background: none; border: none; cursor: pointer; border-radius: var(--r-sm);
  }
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
  .nav-trigger:focus-visible { outline: 2px solid var(--pulp); outline-offset: 2px; }
  .nav-trigger .chev { transition: transform .18s ease; flex: none; }
  .nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .nav-actions { display: flex; align-items: center; gap: 9px; flex: none; }

  .mega {
    position: absolute; top: calc(100% + 12px); left: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 24px; display: none; z-index: 55;
  }
  .mega[data-open="true"] { display: block; }
  .mega-wide { width: min(920px, calc(100vw - var(--gut) * 2)); }
  .mega-mid { width: min(640px, calc(100vw - var(--gut) * 2)); }
  .mega-narrow { width: min(340px, calc(100vw - var(--gut) * 2)); }
  .mega-grid { display: grid; gap: 24px; }
  .mega-grid.cols-3 { grid-template-columns: 1fr 1fr .85fr; }
  .mega-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .mega-col h4 {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 12px; padding-inline: 8px;
  }
  .mega-link { display: flex; gap: 12px; padding: 9px 8px; border-radius: var(--r-sm); align-items: flex-start; }
  .mega-link:hover { background: var(--surface-2); }
  .mega-ico {
    width: 32px; height: 32px; border-radius: 9px; background: var(--ice); color: var(--ink);
    display: grid; place-items: center; flex: none;
  }
  .mega-txt strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
  .mega-txt span { display: block; font-size: 13px; color: var(--ink-faint); line-height: 1.45; margin-top: 1px; }
  .soon {
    display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line);
    border-radius: var(--pill); padding: 1px 7px; margin-left: 6px; vertical-align: 1px;
  }
  .mega-promo {
    background: var(--panel); color: var(--panel-ink); border-radius: var(--r);
    padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
  }
  .mega-promo h5 { margin: 0 0 7px; font-size: 16px; font-weight: 750; color: #FFFFFF; letter-spacing: -.015em; }
  .mega-promo p { margin: 0 0 16px; font-size: 13.5px; color: var(--panel-faint); line-height: 1.5; }
  .mega-promo code {
    display: block; font-family: var(--mono); font-size: 12px; background: rgba(0,0,0,.34);
    border: 1px solid var(--panel-line); border-radius: 8px; padding: 9px 11px; color: var(--squeeze);
    margin-bottom: 14px; overflow-x: auto;
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--pill); padding: 11px 22px; font-size: 15px; font-weight: 700;
    font-family: inherit; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
    transition: filter .12s, transform .08s, border-color .12s, background .12s;
  }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid var(--pulp); outline-offset: 3px; }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
  .btn-outline:hover { border-color: var(--ink-soft); }
  .btn-quiet { color: var(--ink-soft); }
  .btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
  .btn-lg { padding: 15px 32px; font-size: clamp(15.5px, 1.8vw, 16.5px); }
  .btn-sm { padding: 8px 16px; font-size: 14px; }
  .btn-onpanel { border-color: var(--panel-line); color: var(--panel-ink); }
  .btn-onpanel:hover { border-color: var(--panel-faint); background: rgba(255,255,255,.07); }

  .burger { display: none; }
  .mnav {
    display: none; border-top: 1px solid var(--line); background: var(--surface);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    padding: 12px var(--gut) 28px;
  }
  .mnav[data-open="true"] { display: block; }
  .mnav details { border-bottom: 1px solid var(--line-soft); }
  .mnav summary {
    cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 16.5px; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
  }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after { content: "+"; font-size: 21px; color: var(--ink-faint); }
  .mnav details[open] summary::after { content: "–"; }
  .mnav a.m-link { display: block; padding: 10px 0 10px 14px; color: var(--ink-soft); font-size: 15.5px; }
  .mnav-cta { display: flex; gap: 10px; margin-top: 20px; }
  .mnav-cta .btn { flex: 1; }

  /* ===================== HERO (full bleed) ===================== */
  .hero { position: relative; overflow: hidden; background: var(--panel); }
  .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-inner {
    position: relative; z-index: 2;
    padding-block: clamp(52px, 9vw, 118px) clamp(64px, 9vw, 128px);
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(34px, 5vw, 60px); align-items: center;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(16px, 2.4vw, 24px);
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--pill); padding: 6px 15px; font-size: 13px; font-weight: 700; color: #EAF3EE;
  }
  .hero-badge b { color: var(--squeeze); }
  h1 {
    font-size: clamp(32px, 5.6vw, 66px); font-weight: 800; letter-spacing: -.04em;
    line-height: 1.03; margin: 0 0 clamp(14px, 2.2vw, 22px); color: var(--ink); text-wrap: balance;
  }
  /* White only on dark panels */
  .hero h1, .page-hero h1, .agent h1, .waitlist h1 { color: #FFFFFF; }
  .page-hero.h-paper h1 { color: var(--ink); }
  .hero-sub { font-size: clamp(15.5px, 1.8vw, 18.5px); color: #C9DED3; max-width: 48ch; margin: 0 0 clamp(22px, 3vw, 30px); }
  .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .hero-note { font-size: 13.5px; color: #9DBCAC; margin-top: 16px; }

  .mock {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17);
    border-radius: var(--r-lg); padding: clamp(14px, 2vw, 20px);
    backdrop-filter: blur(10px); box-shadow: var(--shadow-lg);
  }
  .mock-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #9DBCAC; margin-bottom: 13px;
  }
  .mock-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 13px; border-radius: 11px; background: rgba(0,0,0,.26); margin-bottom: 8px;
  }
  .mock-site { font-size: 13.5px; font-weight: 650; color: #EAF3EE; }
  .mock-meta { font-family: var(--mono); font-size: 11px; color: #9DBCAC; word-break: break-all; }
  .pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--pill); padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  .pill::before { content: "●"; font-size: 6px; }
  .pill-live { background: rgba(111,203,143,.2); color: #8FE0AC; }
  .pill-dep { background: rgba(255,201,60,.2); color: var(--squeeze); }
  @media (prefers-reduced-motion: no-preference) {
    .pill-dep::before { animation: pulse 1.4s ease-in-out infinite; }
    @keyframes pulse { 50% { opacity: .25; } }
    .mock { animation: mock-in .7s ease .15s backwards; }
    @keyframes mock-in { from { opacity: 0; transform: translateY(16px); } }
  }
  .mock-log {
    font-family: var(--mono); font-size: 11.5px; color: #9DBCAC; margin-top: 13px;
    padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); line-height: 1.85;
  }
  .mock-log b { color: var(--squeeze); font-weight: 600; }

  /* ===================== TICKER ===================== */
  .ticker {
    background: var(--accent); color: var(--accent-ink); overflow: hidden; padding: 12px 0;
    transform: rotate(-1.1deg) scale(1.03);
    margin-top: clamp(-46px, -3.4vw, -26px); margin-bottom: 4px;
    position: relative; z-index: 3; box-shadow: var(--shadow-sm);
  }
  .ticker-track { display: flex; gap: 0; width: max-content; animation: slide 38s linear infinite; }
  .ticker-track span {
    font-size: 14px; font-weight: 750; letter-spacing: -.005em; padding-inline: 22px;
    display: inline-flex; align-items: center; gap: 22px; white-space: nowrap;
  }
  .ticker-track span::after { content: "●"; font-size: 6px; opacity: .55; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
  }

  /* ===================== SPECS ===================== */
  .specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px; background: var(--line); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(28px, 4vw, 44px);
  }
  .spec { background: var(--surface); padding: clamp(18px, 2.6vw, 26px) 16px; text-align: center; }
  .spec-fig { font-size: clamp(19px, 2.3vw, 24px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .spec-lab { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

  /* ===================== SECTIONS ===================== */
  section { margin-block: clamp(58px, 7.5vw, 100px); }
  .eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 11px;
  }
  h2 {
    font-size: clamp(25px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.032em;
    line-height: 1.07; margin: 0 0 14px; text-wrap: balance;
  }
  h3 { letter-spacing: -.018em; }
  .lede { font-size: clamp(15.5px, 1.7vw, 17.5px); color: var(--ink-soft); max-width: 64ch; margin: 0 0 clamp(24px, 3.4vw, 34px); }

  /* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* Staggered children — cards cascade in after their section arrives */
  .reveal .card, .reveal .method, .reveal .cost-cell, .reveal .frame, .reveal .road-item,
  .reveal .step, .reveal .tpl, .reveal .use, .reveal .plan, .reveal .faq-chip {
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .reveal.in .card, .reveal.in .method, .reveal.in .cost-cell, .reveal.in .frame, .reveal.in .road-item,
  .reveal.in .step, .reveal.in .tpl, .reveal.in .use, .reveal.in .plan, .reveal.in .faq-chip {
    opacity: 1; transform: none;
  }
  .reveal.in > * > :nth-child(1) { transition-delay: .05s; }
  .reveal.in > * > :nth-child(2) { transition-delay: .13s; }
  .reveal.in > * > :nth-child(3) { transition-delay: .21s; }
  .reveal.in > * > :nth-child(4) { transition-delay: .29s; }
  .reveal.in > * > :nth-child(5) { transition-delay: .37s; }
  .reveal.in > * > :nth-child(6) { transition-delay: .45s; }

  /* Hover lift — interactive surfaces answer the cursor */
  .card, .method, .frame, .plan, .road-item, .use, .tpl, .cta-band {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover, .method:hover, .frame:hover, .plan:hover, .road-item:hover, .use:hover, .tpl:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg);
  }

  /* Full-bleed tinted bands — alternating rhythm between rows */
  .bleed { position: relative; padding-block: clamp(44px, 5.5vw, 76px); }
  .bleed::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
    transform: translateX(-50%); background: var(--surface-2); z-index: -1;
    border-block: 1px solid var(--line-soft);
  }

  /* Ambient blobs — soft colour behind key rows */
  .has-glow { position: relative; }
  .glow {
    position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .glow { animation: drift 14s ease-in-out infinite alternate; }
    @keyframes drift { to { transform: translateY(26px); } }
  }

  /* Marker highlight — one hand-of-yellow per heading, max */
  .mk {
    background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 60%, transparent) 55%, color-mix(in srgb, var(--accent) 60%, transparent) 92%, transparent 92%);
    border-radius: 4px; padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .wavy {
    text-decoration: underline; text-decoration-style: wavy;
    text-decoration-color: var(--squeeze); text-decoration-thickness: 3.5px; text-underline-offset: 9px;
  }

  /* Eyebrow rules on centered sections */
  .center .eyebrow::before, .center .eyebrow::after {
    content: ""; display: inline-block; width: 24px; height: 1.5px;
    background: var(--line); vertical-align: middle; margin: 0 12px;
  }

  /* Hero entrance choreography */
  @media (prefers-reduced-motion: no-preference) {
    .hero-badge { animation: rise .6s ease .05s backwards; }
    .hero h1 { animation: rise .6s ease .15s backwards; }
    .hero-sub { animation: rise .6s ease .27s backwards; }
    .hero-cta { animation: rise .6s ease .39s backwards; }
    .hero-note { animation: rise .6s ease .5s backwards; }
    @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
    .sun-core { animation: sunbreathe 7s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
    @keyframes sunbreathe { 50% { transform: scale(1.06); } }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal .card, .reveal .method, .reveal .cost-cell, .reveal .frame,
    .reveal .road-item, .reveal .step, .reveal .tpl, .reveal .use, .reveal .plan, .reveal .faq-chip
    { opacity: 1; transform: none; transition: none; }
  }
  .center .lede { margin-inline: auto; }

  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.8vw, 20px); }
  .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow);
  }
  .card h3 { font-size: clamp(18px, 2.1vw, 21px); font-weight: 750; margin: 0 0 10px; }
  .card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
  .card-icon {
    width: 44px; height: 44px; border-radius: 12px; background: var(--ice);
    display: grid; place-items: center; margin-bottom: 18px; color: var(--ink);
  }

  /* Split feature */
  .split {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: center;
  }
  .split-visual {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow);
  }
  .dash-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px 16px; margin-bottom: 10px; flex-wrap: wrap;
  }
  .dash-row:last-child { margin-bottom: 0; }
  .dash-name { font-weight: 700; font-size: 14.5px; }
  .dash-url { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); word-break: break-all; }
  .p-live { background: rgba(46,139,87,.15); color: var(--ok); }
  .p-dep { background: rgba(201,130,27,.17); color: var(--warn); }
  .bar { height: 6px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; margin-top: 12px; }
  .bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--pill); }

  /* Methods */
  .methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: clamp(12px, 1.6vw, 18px); }
  .method {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm);
  }
  .method-n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 14px; letter-spacing: .06em; }
  .method h3 { font-size: 18px; font-weight: 750; margin: 0 0 8px; }
  .method p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
  .method code { font-family: var(--mono); font-size: 13px; word-break: break-all; }

  /* Agent */
  .agent {
    background: var(--panel); color: var(--panel-ink); border-radius: var(--r-xl);
    padding: clamp(30px, 5vw, 70px); display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(30px, 4vw, 52px); align-items: center;
    position: relative; overflow: hidden;
  }
  .agent::after {
    content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,201,60,.16), transparent 68%);
    top: -220px; right: -140px; pointer-events: none;
  }
  .agent > * { position: relative; z-index: 1; }
  .agent h2 { color: #FFFFFF; }
  .agent .lede { color: var(--panel-faint); margin-bottom: 26px; }
  .agent .eyebrow { color: var(--squeeze); }
  pre.code {
    background: rgba(0,0,0,.38); border: 1px solid var(--panel-line); color: #DCEAE2;
    border-radius: var(--r-lg); padding: clamp(16px, 2.4vw, 26px); margin: 0;
    font-family: var(--mono); font-size: clamp(11.5px, 1.4vw, 13px); line-height: 1.85; overflow-x: auto;
  }
  pre.code .c { color: #7FA795; }
  pre.code .y { color: var(--squeeze); }
  pre.code .g { color: #8FE0AC; }
  .ways { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 13px; }
  .ways li { display: flex; gap: 12px; font-size: 15.5px; }
  .ways li::before { content: "→"; color: var(--squeeze); font-weight: 800; flex: none; }

  /* Uses */
  .uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr)); gap: 12px; }
  .use {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    padding: 20px 18px; text-align: center; box-shadow: var(--shadow-sm);
  }
  .use-ico { color: var(--ink-soft); margin-bottom: 10px; }
  .use strong { display: block; font-size: 15px; font-weight: 700; }
  .use span { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

  /* Table */
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
  table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 700px; }
  th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); }
  thead th {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); background: var(--surface-2); border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
  }
  thead th.us { color: var(--ink); }
  tbody td { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
  tbody td:first-child { color: var(--ink); font-weight: 650; }
  td.us { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--ink); font-weight: 700; }
  tr:last-child td { border-bottom: none; }
  .tbl-note { font-size: 13.5px; color: var(--ink-faint); margin-top: 16px; max-width: 78ch; }

  /* Pricing */
  .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2vw, 22px); align-items: start; }
  .plan {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: clamp(26px, 3.4vw, 38px); box-shadow: var(--shadow); position: relative;
  }
  .plan.featured { border-color: var(--accent); border-width: 2px; }
  .plan-flag {
    position: absolute; top: -12px; left: clamp(26px, 3.4vw, 38px); background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 13px; border-radius: var(--pill);
  }
  .plan-name { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
  .plan-fig { font-size: clamp(38px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; margin: 13px 0 2px; font-variant-numeric: tabular-nums; }
  .plan-fig small { font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; letter-spacing: 0; color: var(--ink-faint); }
  .plan-bill { font-size: 14px; color: var(--ink-faint); margin-bottom: 26px; }
  .plan-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
  .plan-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); }
  .plan-list li::before { content: "✓"; color: var(--ok); font-weight: 800; flex: none; }
  .plan-list li.no::before { content: "—"; color: var(--ink-faint); }
  .plan .btn { width: 100%; }
  .terms { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; font-size: 14px; color: var(--ink-faint); }
  .terms span { background: var(--surface-2); border-radius: var(--pill); padding: 7px 16px; }

  /* Steps */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 2.6vw, 28px); counter-reset: s; }
  .step { counter-increment: s; }
  .step-num {
    width: 48px; height: 48px; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink);
    display: grid; place-items: center; font-weight: 800; font-size: 19px; margin-bottom: 18px;
  }
  .step-num::before { content: counter(s); }
  .step h3 { font-size: 19.5px; font-weight: 750; margin: 0 0 9px; }
  .step p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

  /* Templates */
  .tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(14px, 1.8vw, 20px); }
  .tpl { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
  .tpl-thumb { aspect-ratio: 16 / 10; }
  .tpl-meta { padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .tpl-meta strong { font-size: 14.5px; font-weight: 700; }

  /* Spot illustrations (section markers) */
  .spot { display: inline-block; margin-bottom: 14px; }

  /* Interactive terminal */
  .term {
    background: rgba(0,0,0,.38); border: 1px solid var(--panel-line); border-radius: var(--r-lg);
    overflow: hidden; font-family: var(--mono); font-size: clamp(11.5px, 1.4vw, 13px);
  }
  .term-bar {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    background: rgba(0,0,0,.3); border-bottom: 1px solid var(--panel-line);
  }
  .term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--panel-line); }
  .term-title { margin-left: 6px; font-size: 11px; color: #7FA795; letter-spacing: .05em; }
  .term-body {
    padding: 18px 20px 20px; height: 268px; max-height: 268px; overflow-y: auto;
    color: #DCEAE2; line-height: 1.9; scroll-behavior: smooth;
  }
  .term-body::-webkit-scrollbar { width: 8px; }
  .term-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
  .term-body::-webkit-scrollbar-track { background: transparent; }
  .term-line { display: block; }
  .term-line .c { color: #7FA795; }
  .term-line .y { color: var(--squeeze); }
  .term-line .g { color: #8FE0AC; }
  .term-cursor { display: inline-block; width: 8px; height: 15px; background: var(--squeeze); vertical-align: -2px; }
  @media (prefers-reduced-motion: no-preference) { .term-cursor { animation: blink 1s steps(1) infinite; } }
  @keyframes blink { 50% { opacity: 0; } }
  .term-run {
    margin: 14px 20px 20px; display: inline-flex;
  }
  .term-note { font-size: 11px; color: #7FA795; padding: 0 20px 18px; font-family: var(--sans); }

  /* Cost strip */
  .cost {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1px; background: var(--line); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
  }
  .cost-cell { background: var(--surface); padding: clamp(20px, 2.6vw, 28px) 20px; text-align: center; }
  .cost-cell.hl { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  .cost-fig { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .cost-lab { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
  .cost-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

  /* Showcase */
  .show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(14px, 1.8vw, 20px); }
  .frame {
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .frame-bar {
    display: flex; align-items: center; gap: 6px; padding: 9px 12px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
  }
  .frame-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
  .frame-url {
    flex: 1; margin-left: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
    background: var(--surface); border-radius: var(--pill); padding: 3px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .frame-body {
    aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center;
    color: var(--ink-faint); font-size: 13px; padding: 14px;
    background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 12px, var(--surface-2) 12px, var(--surface-2) 13px);
  }
  .frame-body strong { display: block; color: var(--ink-soft); font-size: 14px; margin-bottom: 3px; }

  /* About band */
  .about {
    display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 34px); align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow);
  }
  .about p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; max-width: 70ch; }
  .about p:last-of-type { margin-bottom: 0; }
  .about h3 { margin: 0 0 10px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; letter-spacing: -.02em; }
  .about-link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
  @media (max-width: 620px) { .about { grid-template-columns: 1fr; } .about .spot { margin-bottom: 0; } }

  /* Footer mini form */
  .foot-form { display: flex; gap: 8px; margin-top: 16px; max-width: 320px; }
  .foot-form input {
    flex: 1; min-width: 0; padding: 10px 14px; border-radius: var(--pill);
    border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
    font-family: inherit; font-size: 14px;
  }
  .foot-form input::placeholder { color: var(--ink-faint); }
  .foot-form input:focus-visible { outline: 2px solid var(--pulp); outline-offset: 2px; }

  /* FAQ teaser */
  .faq-teaser {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 14px; margin-bottom: 22px;
  }
  .faq-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 17px 19px; font-size: 15px; font-weight: 650; box-shadow: var(--shadow-sm);
    transition: border-color .12s, transform .12s;
  }
  .faq-chip:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
  .faq-chip span { color: var(--ink-faint); flex: none; font-weight: 500; }

  /* CTA band */
  .cta-band {
    display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(22px, 3vw, 32px) clamp(22px, 3.4vw, 38px); box-shadow: var(--shadow);
  }
  .cta-band h3 { margin: 0 0 4px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; letter-spacing: -.022em; }
  .cta-band p { margin: 0; color: var(--ink-soft); font-size: 15px; }

  /* Roadmap */
  .road { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
  .road-item {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 20px 20px 18px; box-shadow: var(--shadow-sm);
  }
  .road-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
  .road-item h3 { margin: 0; font-size: 16px; font-weight: 750; }
  .road-item p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
  .tag { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; border-radius: var(--pill); padding: 3px 9px; flex: none; }
  .tag-done { background: rgba(46,139,87,.14); color: var(--ok); }
  .tag-next { background: rgba(255,201,60,.22); color: var(--accent-ink); }
  .tag-later { background: var(--surface-2); color: var(--ink-faint); }

  /* Waitlist */
  .waitlist {
    background: var(--panel); color: var(--panel-ink); border-radius: var(--r-xl);
    padding: clamp(38px, 6.5vw, 84px) clamp(24px, 4vw, 56px); text-align: center;
    position: relative; overflow: hidden;
  }
  .waitlist::after {
    content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,201,60,.2), transparent 68%);
    top: -220px; right: -140px; pointer-events: none;
  }
  .waitlist > * { position: relative; z-index: 1; }
  .waitlist h2 { color: #FFFFFF; }
  .waitlist .lede { color: var(--panel-faint); margin-inline: auto; margin-bottom: 30px; }
  .waitlist .eyebrow { color: var(--squeeze); }
  .wl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 540px; margin-inline: auto; }
  .wl-form input {
    flex: 1 1 260px; min-width: 0; padding: 15px 20px; border-radius: var(--pill);
    border: 1.5px solid var(--panel-line); background: rgba(0,0,0,.3); color: var(--panel-ink);
    font-family: inherit; font-size: 16px;
  }
  .wl-form input::placeholder { color: #7FA795; }
  .wl-form input:focus-visible { outline: 2px solid var(--squeeze); outline-offset: 2px; }
  .wl-fine { font-size: 13.5px; color: var(--panel-faint); margin-top: 20px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Footer */
  .site-foot { border-top: 1px solid var(--line); margin-top: clamp(64px, 9vw, 120px); background: var(--surface); }
  .foot-top {
    display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(135px, 1fr));
    gap: clamp(28px, 3.4vw, 44px); padding-block: clamp(44px, 6vw, 72px) clamp(32px, 4vw, 48px);
  }
  .foot-brand .brand { margin-bottom: 16px; }
  .foot-blurb { font-size: 14.5px; color: var(--ink-soft); max-width: 34ch; margin: 0 0 20px; }
  .foot-status {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 15px;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
  .foot-col h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 15px; }
  .foot-col a { display: block; color: var(--ink-soft); font-size: 14.5px; margin-bottom: 11px; }
  .foot-col a:hover { color: var(--ink); }
  .foot-base {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--ink-faint); border-top: 1px solid var(--line-soft);
    padding-block: 26px clamp(34px, 5vw, 52px);
  }
  .foot-legal { display: flex; gap: 20px; flex-wrap: wrap; }
  .foot-water {
    font-size: clamp(56px, 11vw, 168px); font-weight: 800; letter-spacing: -.05em;
    line-height: .85; text-align: center; color: var(--ink); opacity: .05;
    user-select: none; pointer-events: none; white-space: nowrap; overflow: hidden;
    margin-top: clamp(6px, 1.4vw, 18px);
  }

  /* ===================== BREAKPOINTS ===================== */
  @media (max-width: 1180px) {
    .nav-trigger { padding: 9px 10px; font-size: 14.5px; }
  }
  @media (max-width: 1040px) {
    .nav-main, .nav-actions .btn-quiet { display: none; }
    .burger {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line);
      background: transparent; color: var(--ink); cursor: pointer;
    }
    .burger:focus-visible { outline: 2px solid var(--pulp); outline-offset: 2px; }
    .nav { justify-content: space-between; }
    .brand { margin-right: 0; }
    .nav-actions { margin-left: auto; margin-right: 10px; }
  }
  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .mock { order: 2; }
  }
  @media (max-width: 620px) {
    :root { --nav-h: 62px; }
    .announce { font-size: 12px; padding-block: 9px; }
    .hero-sub { max-width: none; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    .specs { grid-template-columns: repeat(2, 1fr); }
    .foot-top { grid-template-columns: repeat(2, 1fr); }
    .foot-brand { grid-column: 1 / -1; }
    .terms { justify-content: flex-start; }
    .plan-flag { left: 24px; }
  }
  @media (max-width: 400px) {
    .specs { grid-template-columns: 1fr; }
    .foot-top { grid-template-columns: 1fr; }
  }

/* ===================== SUBPAGES ===================== */
.page-hero { background: var(--panel); color: var(--panel-ink); padding-block: clamp(44px, 6.5vw, 84px); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,201,60,.16), transparent 68%); top: -190px; right: -110px; pointer-events: none; }
.page-hero .shell { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(30px, 4.6vw, 54px); font-weight: 800; letter-spacing: -.036em; line-height: 1.05; margin: 0 0 12px; color: #FFFFFF; text-wrap: balance; }
.page-hero .lede { color: var(--panel-faint); margin-bottom: 0; }
.page-hero .eyebrow { color: var(--squeeze); }
.page-main { padding-block: clamp(44px, 6vw, 76px) 0; }

/* FAQ full list */
.faq { max-width: 820px; margin-inline: auto; }
details.q { border-bottom: 1px solid var(--line); }
details.q summary { cursor: pointer; padding: 20px 38px 20px 0; font-size: clamp(16px, 1.9vw, 18px); font-weight: 700; letter-spacing: -.015em; position: relative; list-style: none; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 23px; font-weight: 500; color: var(--ink-faint); line-height: 1; }
details.q[open] summary::after { content: "–"; }
details.q summary:focus-visible { outline: 2px solid var(--pulp); outline-offset: 3px; border-radius: 4px; }
details.q p { margin: 0 0 22px; color: var(--ink-soft); font-size: 15.5px; max-width: 66ch; }
.faq-group { margin-bottom: clamp(34px, 4.6vw, 52px); }
.faq-group h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 6px; }

/* Prose blocks (about etc.) */
.prose { max-width: 72ch; }
.prose p { color: var(--ink-soft); font-size: 16px; margin: 0 0 18px; }
.prose h2 { margin-top: clamp(30px, 4vw, 44px); }

/* ===================== PAGE FLAVOURS =====================
   Each subpage sets a flavour on .page-hero so pages don't all
   look alike. Palette stays Fresh Stand; only the hero treatment,
   accent geometry and section rhythm change. */

/* Hero variants */
.page-hero.h-sun::after { width: 560px; height: 560px; top: -260px; right: -80px; background: radial-gradient(circle, rgba(255,201,60,.22), transparent 66%); }
.page-hero.h-dawn { background: linear-gradient(160deg, #0B241C 0%, #123529 55%, #1D5040 100%); }
.page-hero.h-dawn::after { width: 640px; height: 640px; top: -320px; left: -160px; right: auto; background: radial-gradient(circle, rgba(255,201,60,.18), transparent 68%); }
.page-hero.h-slice { background: var(--panel); }
.page-hero.h-slice::after { display: none; }
.page-hero.h-slice::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,201,60,.05) 38px 40px);
  pointer-events: none;
}
.page-hero.h-grid::after { display: none; }
.page-hero.h-grid::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px; pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 40%, transparent 100%);
}
.page-hero.h-paper { background: var(--surface-2); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero.h-paper h1 { color: var(--ink); }
.page-hero.h-paper .lede { color: var(--ink-soft); }
.page-hero.h-paper .eyebrow { color: var(--ink-faint); }
.page-hero.h-paper::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%); }

/* Hero with a stat rail underneath */
.hero-rail { display: flex; gap: clamp(20px, 4vw, 52px); flex-wrap: wrap; margin-top: 26px; }
.hero-rail div { min-width: 96px; }
.hero-rail strong { display: block; font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; letter-spacing: -.03em; color: var(--squeeze); font-variant-numeric: tabular-nums; }
.hero-rail span { display: block; font-size: 13px; color: var(--panel-faint); margin-top: 2px; }
.page-hero.h-paper .hero-rail strong { color: var(--ink); }
.page-hero.h-paper .hero-rail span { color: var(--ink-faint); }

/* Lede-plus-action hero row */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Alternating section tint inside a page */
.tint { position: relative; padding-block: clamp(40px, 5vw, 68px); }
.tint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); background: var(--surface-2); z-index: -1;
  border-block: 1px solid var(--line-soft);
}

/* Pull-quote / statement row */
.statement {
  font-size: clamp(21px, 3vw, 34px); font-weight: 800; letter-spacing: -.028em;
  line-height: 1.2; max-width: 22ch; margin: 0;
}
.statement-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; }
.statement-row p.body { margin: 0; color: var(--ink-soft); font-size: 16.5px; }

/* Numbered feature list (alternative to cards) */
.numbered { counter-reset: n; display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.numbered > li { counter-increment: n; list-style: none; background: var(--surface); padding: clamp(20px, 2.6vw, 30px); display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; }
.numbered > li > * { grid-column: 2; min-width: 0; }
.numbered > li::before { grid-column: 1; content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: var(--pill); width: 40px; height: 40px; display: grid; place-items: center; }
.numbered h3 { margin: 0 0 6px; font-size: 18px; font-weight: 750; }
.numbered p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* Side rail layout: sticky summary + flowing body (legal/docs) */
.railed { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); }
@media (min-width: 900px) { .railed { grid-template-columns: 230px minmax(0, 1fr); } }
.rail { align-self: start; }
@media (min-width: 900px) { .rail { position: sticky; top: calc(var(--nav-h) + 18px); } }
.rail h4 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; }
.rail a { display: block; font-size: 14px; color: var(--ink-soft); padding: 6px 0; border-left: 2px solid var(--line); padding-left: 12px; }
.rail a:hover { color: var(--ink); border-left-color: var(--accent); }

/* Callout */
.callout { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--r); padding: 18px 20px; margin: 22px 0; }
.callout p { margin: 0; font-size: 15px; color: var(--ink); }
.callout strong { font-weight: 800; }

/* ===================== RICH SUBPAGE HEROES ===================== */
/* No-JS / no-observer safety: never leave content invisible */
.no-js .reveal, .reveal.in { opacity: 1 !important; transform: none !important; }

.page-hero { padding-block: clamp(40px, 5.5vw, 76px); }
.page-hero .shell { position: relative; z-index: 2; }
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }
.hero-copy .eyebrow { color: var(--squeeze); }
.page-hero.h-paper .hero-copy .eyebrow { color: var(--ink-faint); }

/* Glass visual card that sits in the hero */
.hero-viz {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: clamp(14px, 2vw, 20px);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-lg);
}
.page-hero.h-paper .hero-viz { background: var(--surface); border-color: var(--line); backdrop-filter: none; }
.hero-viz-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #9DBCAC; margin-bottom: 12px;
}
.page-hero.h-paper .hero-viz-head { color: var(--ink-faint); }
.viz-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px; background: rgba(0,0,0,.24); margin-bottom: 8px;
}
.page-hero.h-paper .viz-row { background: var(--surface-2); }
.viz-row:last-child { margin-bottom: 0; }
.viz-name { font-size: 13.5px; font-weight: 650; color: #EAF3EE; }
.viz-meta { font-family: var(--mono); font-size: 11px; color: #9DBCAC; word-break: break-all; }
.page-hero.h-paper .viz-name { color: var(--ink); }
.page-hero.h-paper .viz-meta { color: var(--ink-faint); }
.viz-code {
  font-family: var(--mono); font-size: clamp(11px, 1.35vw, 12.5px); line-height: 1.9;
  color: #DCEAE2; background: rgba(0,0,0,.3); border-radius: 11px; padding: 15px 16px;
  overflow-x: auto; margin: 0;
}
.page-hero.h-paper .viz-code { background: var(--panel); }
.viz-code .c { color: #7FA795; }
.viz-code .y { color: var(--squeeze); }
.viz-code .g { color: #8FE0AC; }
.viz-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.viz-stat { background: rgba(0,0,0,.24); border-radius: 11px; padding: 15px 16px; }
.page-hero.h-paper .viz-stat { background: var(--surface-2); }
.viz-stat strong { display: block; font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; letter-spacing: -.03em; color: var(--squeeze); font-variant-numeric: tabular-nums; }
.page-hero.h-paper .viz-stat strong { color: var(--ink); }
.viz-stat span { display: block; font-size: 12.5px; color: #9DBCAC; margin-top: 2px; }
.page-hero.h-paper .viz-stat span { color: var(--ink-faint); }
.viz-price { text-align: center; padding: 8px 0 4px; }
.viz-price b { display: block; font-size: clamp(38px, 5vw, 54px); font-weight: 800; letter-spacing: -.045em; color: var(--squeeze); line-height: 1; font-variant-numeric: tabular-nums; }
.page-hero.h-paper .viz-price b { color: var(--ink); }
.viz-price em { display: block; font-style: normal; font-size: 13.5px; color: #9DBCAC; margin-top: 8px; }
.page-hero.h-paper .viz-price em { color: var(--ink-faint); }

/* Decorative hero art layer */
.hero-deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page-hero { position: relative; overflow: hidden; }

/* Breadcrumb */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 14px; color: var(--panel-faint); flex-wrap: wrap; }
.page-hero.h-paper .crumbs { color: var(--ink-faint); }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--squeeze); }
.page-hero.h-paper .crumbs a:hover { color: var(--ink); }
.crumbs span { opacity: .5; }

/* ===================== INTERACTIVE WIDGETS ===================== */
.calc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow);
}
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3.4vw, 44px); align-items: center; }
.calc-controls { display: flex; flex-direction: column; gap: 24px; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc-label span:first-child { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.calc-label span:last-child { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--surface-3); outline: none; margin: 0; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-sm); cursor: pointer; }
.calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent); cursor: pointer; }
.seg { display: flex; gap: 6px; background: var(--surface-2); padding: 5px; border-radius: var(--pill); }
.seg button {
  flex: 1; padding: 10px 12px; border-radius: var(--pill); border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink-soft); background: transparent;
  transition: background .14s, color .14s;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg button:focus-visible { outline: 2px solid var(--pulp); outline-offset: 2px; }
.calc-out { background: var(--panel); color: var(--panel-ink); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); text-align: center; }
.calc-out .big { font-size: clamp(44px, 6vw, 68px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--squeeze); font-variant-numeric: tabular-nums; }
.calc-out .sub { font-size: 14.5px; color: var(--panel-faint); margin-top: 10px; }
.calc-rows { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 9px; }
.calc-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.calc-rows span:first-child { color: var(--panel-faint); }
.calc-rows span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.calc-note { font-size: 13px; color: var(--ink-faint); margin: 18px 0 0; text-align: center; }

/* Uptime meter */
.meter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); }
.meter-bar { height: 14px; border-radius: var(--pill); background: var(--surface-3); overflow: hidden; display: flex; }
.meter-bar i { display: block; height: 100%; }
.meter-up { background: var(--ok); }
.meter-down { background: var(--warn); }
.meter-key { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.meter-key b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }

/* Hero dashboard meters (option D) */
.mock-meter { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: #9DBCAC; margin-top: 13px; }
.mock-meter span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mock-bar { height: 6px; border-radius: var(--pill); background: rgba(255,255,255,.12); overflow: hidden; margin-top: 7px; }
.mock-bar i { display: block; height: 100%; background: var(--squeeze); border-radius: var(--pill); }

/* Head-to-head price card for comparison pages */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 4px; }
.vs-side { text-align: center; padding: 14px 10px; border-radius: 12px; }
.vs-side.us { background: rgba(255,201,60,.14); border: 1px solid rgba(255,201,60,.4); }
.vs-side.them { background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.1); }
.vs-fig { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.vs-side.us .vs-fig { color: var(--squeeze); }
.vs-side.them .vs-fig { color: #C9DED3; }
.vs-who { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; color: #9DBCAC; }
.vs-per { font-size: 12px; color: #9DBCAC; margin-top: 5px; }
.vs-mid { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7FA795; }
.vs-note { text-align: center; font-size: 12.5px; color: #9DBCAC; margin: 12px 0 0; }

/* Renewal promise + fine print */
.renewal-note { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; }
.renewal-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.panel-note { font-size: 13px; color: var(--panel-faint); margin: 14px 0 0; }
.panel-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }