/* ============================================================================
   Groundline × ExactCare — the showroom
   Aesthetic: clinical-luxury diagnostic instrument. Dark ink, brass precision,
   editorial serif, mono readouts. Premium + inevitable. Not a dashboard.

   Conforms to the UX Design Authority (2026-08-12):
   - Verbatim-first render (senior quote large/serif ≥16px, number = its compression)
   - "Number + one plain sentence" as the atomic display component (.atom)
   - Buyer-facing tier relabel: VERIFIED / EARLY SIGNAL / SIMULATION
   - Tier grammar as LEFT-BORDER WEIGHT: solid=VERIFIED, dashed=EARLY SIGNAL, dotted=SIMULATION
   - One hero number per view; VERIFIED and SIMULATION never share a container
   - Funnel drains visually; jargon dies at the surface
   - Dual-mode (buyer let-it-rip default / show-your-work diligence)
   ============================================================================ */

:root{
  --ink:#080d13; --ink-1:#0a1017; --ink-2:#0f1b28; --ink-3:#142434;
  --panel:#0c141d;
  --line:rgba(212,175,90,.14); --line-2:rgba(232,224,208,.08);
  --brass:#d4af5a; --brass-hi:#e8cf8e; --brass-deep:#b8863a;
  --brass-glow:rgba(212,175,90,.16); --brass-ultra:rgba(212,175,90,.05);
  --leak:#e0705a; --leak-2:#f0a288; --good:#6fbf9a; --amber:#d9a441; --sky:#8fb4d6;
  --bone:#ece3cf; --bone-2:#b7b0a0; --mute:#7f8a97; --mute-2:#566470;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-brass:0 0 0 1px var(--line),0 20px 50px -24px rgba(212,175,90,.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:"Newsreader",Georgia,serif;
  background:var(--ink); color:var(--bone);
  -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(212,175,90,.10), transparent 60%),
    radial-gradient(900px 800px at -10% 110%, rgba(111,191,154,.05), transparent 55%),
    linear-gradient(180deg,#060a0f 0%,#080d13 40%,#0a1017 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{ position:relative; z-index:1; }

/* -------------------------------------------------------------- type */
.serif{ font-family:"Fraunces",Georgia,serif; }
.mono{ font-family:"Spline Sans Mono",ui-monospace,monospace; }
h1,h2,h3{ font-family:"Fraunces",Georgia,serif; font-weight:500; letter-spacing:-.01em; line-height:1.08; margin:0; }
h2{ font-size:clamp(28px,3.4vw,44px); }
h3{ font-size:clamp(19px,2vw,24px); font-weight:500; }
em.b{ font-style:italic; color:var(--brass); }
.kicker{ font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); opacity:.85; }

/* -------------------------------------------------------------- header */
header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,5vw,64px);
  background:linear-gradient(var(--ink),rgba(8,13,19,.72));
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-txt{ font-family:"Fraunces",serif; font-weight:600; font-size:18px; color:var(--bone); }
.brand-txt em{ font-style:normal; color:var(--brass); }
.brand-txt .x{ color:var(--mute-2); font-weight:300; margin:0 6px; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good); display:inline-block; margin-right:6px; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.live-tag{ font-family:"Spline Sans Mono",monospace; font-size:10px; color:var(--mute); letter-spacing:.12em; }

/* dual-mode toggle */
.mode-toggle{ display:flex; align-items:center; gap:2px; background:var(--ink-1); border:1px solid var(--line-2); border-radius:100px; padding:3px; }
.mode-toggle button{
  font-family:"Spline Sans Mono",monospace; font-size:10.5px; letter-spacing:.06em;
  color:var(--mute); background:transparent; border:none; border-radius:100px;
  padding:6px 13px; cursor:pointer; transition:.2s; white-space:nowrap;
}
.mode-toggle button.on{ background:var(--brass); color:#1a1206; font-weight:600; }
.mode-toggle button:not(.on):hover{ color:var(--brass); }
.header-right{ display:flex; align-items:center; gap:16px; }

/* subtle signed-in state + clean sign-out */
.signout-link{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.08em;
  color:var(--mute); padding:5px 11px; border:1px solid var(--line-2); border-radius:100px;
  transition:.18s; white-space:nowrap;
}
.signout-link:hover{ color:var(--brass); border-color:var(--line); }
.signin-dot{ width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); display:inline-block; }

/* dual-mode visibility: elements marked .diligence-only are hidden in buyer mode */
body[data-mode="buyer"] .diligence-only{ display:none !important; }
/* buyer-only elements are hidden in diligence mode — toggling the hero visibly */
body[data-mode="diligence"] .buyer-only{ display:none !important; }
.mode-note{ font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--sky); }

/* -------------------------------------------------------------- layout */
section{ padding:clamp(56px,8vh,104px) clamp(20px,5vw,64px); position:relative; }
.wrap{ max-width:1120px; margin:0 auto; }
.sec-head{ max-width:760px; margin-bottom:40px; }
.sec-head h2{ margin:12px 0 14px; }
.sec-head p{ color:var(--mute); font-size:18px; margin:0; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ==================================================================== */
/* ATOMIC COMPONENT — "number + one plain sentence" (P0.3)              */
/* Every number carries one inline plain-language sentence beneath it.   */
/* Tier grammar rides the left border (P2.4).                            */
/* ==================================================================== */
.atom{
  border-left:3px solid var(--brass); padding:14px 0 14px 18px; margin:0 0 4px;
  background:linear-gradient(90deg,var(--brass-ultra),transparent 70%);
}
.atom .num{ font-family:"Fraunces",serif; font-weight:600; line-height:1; color:var(--bone); font-size:clamp(28px,3.5vw,38px); }
.atom .num small{ font-size:.5em; color:var(--mute); font-weight:400; margin-left:6px; }
.atom .say{ font-family:"Newsreader",serif; font-size:16px; color:var(--bone-2); margin-top:8px; max-width:52ch; line-height:1.5; }
.atom.leak .num{ color:var(--leak-2); }
.atom.good .num{ color:var(--good); }
/* tier line-weight grammar — solid=VERIFIED dashed=EARLY-SIGNAL dotted=SIMULATION */
.atom.verified{ border-left-style:solid;  border-left-color:var(--good); background:linear-gradient(90deg,rgba(111,191,154,.06),transparent 70%); }
.atom.early{    border-left-style:dashed;  border-left-color:var(--amber); background:linear-gradient(90deg,rgba(217,164,65,.06),transparent 70%); }
.atom.sim{      border-left-style:dotted;  border-left-color:var(--sky); background:linear-gradient(90deg,rgba(143,180,214,.06),transparent 70%); }

/* -------------------------------------------------------------- tier chip (relabelled) */
.tier{
  display:inline-flex; align-items:center; gap:6px; font-family:"Spline Sans Mono",monospace;
  font-size:10px; letter-spacing:.1em; padding:3px 9px; border-radius:100px; text-transform:uppercase; border:1px solid transparent;
}
.tier.verified{ color:var(--good); background:rgba(111,191,154,.08); border-color:rgba(111,191,154,.28); }
.tier.early{ color:var(--amber); background:rgba(217,164,65,.08); border-color:rgba(217,164,65,.28); }
.tier.sim{ color:var(--sky); background:rgba(143,180,214,.08); border-color:rgba(143,180,214,.28); }
.tier .ic{ font-size:11px; }

/* -------------------------------------------------------------- hero */
.hero{ padding-top:clamp(48px,8vh,96px); padding-bottom:clamp(36px,6vh,72px); }
.hero-lede{ max-width:900px; margin-bottom:40px; }
.hero-lede h1{ font-size:clamp(33px,4.3vw,55px); font-weight:400; letter-spacing:-.015em; line-height:1.08; margin:0; }
.hero-lede h1 .lg{ font-weight:600; }
.hero-lede .sub{ color:var(--mute); font-size:19px; max-width:600px; margin:20px 0 0; }
.warm-badge{ display:inline-flex; align-items:center; gap:8px; margin-bottom:6px; font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--good); background:rgba(111,191,154,.08); border:1px solid rgba(111,191,154,.28); border-radius:100px; padding:5px 14px; }
.hero-lede .foil{ display:block; color:var(--mute); font-size:16px; max-width:640px; margin:14px 0 4px; font-style:italic; }
.hero-lede .moat-strip{ color:var(--bone-2); font-size:15px; max-width:600px; margin:18px 0 0; padding-left:16px; border-left:2px solid var(--brass); }
.hero-lede .moat-strip em{ color:var(--bone); font-style:italic; }

/* the HERO — separation of real outcomes (the "did", not a funnel) */
.sep-card{
  background:linear-gradient(160deg,var(--ink-2),var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:26px 30px 24px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.sep-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--good),transparent); }
.sep-svg{ width:100%; height:auto; display:block; margin:4px 0 2px; }
.sep-neg{ fill:rgba(127,138,151,.16); stroke:var(--mute); stroke-width:1.6; }
.sep-pos{ fill:rgba(111,191,154,.20); stroke:var(--good); stroke-width:1.8; }
.sep-lab{ font-family:"Spline Sans Mono",monospace; font-size:12.5px; letter-spacing:.02em; }
.sep-lab.neg{ fill:var(--mute); } .sep-lab.pos{ fill:var(--good); }
.sep-ax{ font-family:"Spline Sans Mono",monospace; font-size:10.5px; fill:var(--mute-2); letter-spacing:.06em; }
.sep-annot{ font-size:15.5px; color:var(--bone-2); margin:12px 0 0; padding-left:16px; border-left:2px solid var(--good); line-height:1.5; }
.sep-annot b{ color:var(--good); font-weight:600; }
.sep-rigor{ font-family:"Spline Sans Mono",monospace; font-size:12.5px; color:var(--mute); margin:11px 0 0; padding-left:16px; line-height:1.55; letter-spacing:.01em; }
.sep-rigor b{ color:var(--bone-2); font-weight:600; }
.sep-card .fc-foot{ margin-top:14px; }
.sep-moat{ margin-top:16px; padding-top:13px; border-top:1px solid var(--line-2); font-family:"Spline Sans Mono",monospace; font-size:12px; color:var(--mute); letter-spacing:.01em; line-height:1.6; }
.sep-moat b{ color:var(--bone-2); } .sep-moat em{ color:var(--bone); font-style:italic; }

/* funnel demoted out of the hero → "the stakes" (smaller, subordinated) */
.funnel-card.demoted{ max-width:780px; margin:0 auto; }

/* the draining funnel instrument */
.funnel-card{
  background:linear-gradient(160deg,var(--ink-2),var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:30px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.funnel-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--brass),transparent); }
.fc-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.fc-head .t{ font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--brass); text-transform:uppercase; }
.fc-head .src{ font-family:"Spline Sans Mono",monospace; font-size:10px; color:var(--mute-2); }

.stage{ margin-bottom:6px; }
.stage-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.stage-row .lab{ font-size:14px; color:var(--bone); }
.stage-row .lab .sub{ color:var(--mute); font-size:11.5px; margin-left:7px; }
.stage-row .val{ font-family:"Spline Sans Mono",monospace; font-size:15px; color:var(--bone); font-weight:500; }
.bar{ height:30px; border-radius:5px; background:var(--ink-3); overflow:hidden; position:relative; }
.bar .fill{ height:100%; border-radius:5px; width:0; transition:width 1.3s cubic-bezier(.19,1,.22,1); background:linear-gradient(90deg,var(--brass-deep),var(--brass)); position:relative; }
.bar.good .fill{ background:linear-gradient(90deg,#3f7a60,var(--good)); }
.bar .fill::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:2px; background:var(--brass-hi); box-shadow:0 0 12px var(--brass-hi); }
.bar.good .fill::after{ background:#a6e6c8; box-shadow:0 0 12px #a6e6c8; }
/* the drop label — money + human experience, anchored to the narrowing */
.drop{ margin:8px 0 18px; padding:10px 0 10px 20px; border-left:2px dashed rgba(224,112,90,.4); }
.drop .d-money{ font-family:"Fraunces",serif; font-size:18px; color:var(--leak-2); font-weight:600; }
.drop .d-human{ font-size:13.5px; color:var(--mute); margin-top:3px; font-style:italic; }

/* -------------------------------------------------------------- job cards (P1.2: 3 job-shaped entries) */
.jobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.job{
  border:1px solid var(--line-2); border-radius:14px; padding:24px; cursor:pointer;
  background:linear-gradient(165deg,var(--ink-2),var(--panel)); transition:.25s; position:relative; text-align:left;
}
.job:hover{ border-color:var(--line); box-shadow:var(--shadow-brass); transform:translateY(-3px); }
.job.active{ border-color:var(--brass); box-shadow:var(--shadow-brass); }
.job .j-ic{ font-size:22px; color:var(--brass); margin-bottom:14px; }
.job h3{ font-size:19px; margin-bottom:8px; }
.job p{ color:var(--mute); font-size:14px; margin:0; }
.job .j-go{ margin-top:14px; font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--brass); letter-spacing:.06em; opacity:0; transition:.2s; }
.job:hover .j-go, .job.active .j-go{ opacity:1; }

/* the active job workspace */
.workspace{ margin-top:34px; }

/* -------------------------------------------------------------- panels / inputs */
.panel{ background:linear-gradient(165deg,var(--ink-2),var(--panel)); border:1px solid var(--line-2); border-radius:14px; padding:26px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
textarea, input[type=text]{
  width:100%; background:var(--ink); color:var(--bone); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; font-family:"Spline Sans Mono",monospace;
  font-size:13px; line-height:1.6; resize:vertical; transition:.2s;
}
textarea:focus, input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-ultra); }
textarea::placeholder, input::placeholder{ color:var(--mute-2); }
label.fld{ display:block; font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--mute); text-transform:uppercase; margin-bottom:8px; }

.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:"Spline Sans Mono",monospace; font-size:12.5px; letter-spacing:.06em;
  padding:12px 22px; border-radius:10px; border:1px solid var(--brass);
  background:var(--brass); color:#1a1206; font-weight:600; transition:.18s;
}
.btn:hover{ background:var(--brass-hi); box-shadow:0 0 24px var(--brass-glow); transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--brass); }
.btn.ghost:hover{ background:var(--brass-ultra); }
.btn.sm{ padding:9px 16px; font-size:11.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn .arr{ transition:transform .2s; }
.btn:hover .arr{ transform:translateX(3px); }

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.chip{ font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--mute); border:1px solid var(--line-2); border-radius:100px; padding:6px 13px; cursor:pointer; transition:.2s; }
.chip:hover{ color:var(--brass); border-color:var(--line); background:var(--brass-ultra); }

.result{ margin-top:24px; }
.hidden{ display:none !important; }
.loading-verbatims{ min-height:60px; }
.loading-verbatims .lv{ font-family:"Newsreader",serif; font-style:italic; font-size:16px; color:var(--mute-2); opacity:0; animation:lvfade 1.6s ease forwards; }
@keyframes lvfade{ 0%{opacity:0; transform:translateY(6px)} 30%{opacity:.7} 100%{opacity:0; transform:translateY(-6px)} }
.spin{ display:inline-block; width:15px; height:15px; border:2px solid var(--brass-ultra); border-top-color:var(--brass); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* -------------------------------------------------------------- VERBATIM-FIRST card (P0.2) */
/* The senior quote is the hero: large, serif, ≥16px, with initial+age+outcome. */
.verbatim{
  border-left:3px solid var(--brass); border-radius:0 14px 14px 0; padding:22px 26px;
  background:linear-gradient(160deg,rgba(212,175,90,.05),var(--panel)); position:relative; margin-bottom:16px;
}
.verbatim.verified{ border-left-color:var(--good); }
.verbatim.sim{ border-left-style:dotted; border-left-color:var(--sky); }
.verbatim .quote{ font-family:"Newsreader",serif; font-style:italic; font-size:22px; line-height:1.5; color:var(--bone); }
.verbatim .quote::before{ content:"\201C"; font-family:"Fraunces",serif; color:var(--brass); font-size:40px; line-height:0; position:relative; top:14px; margin-right:2px; }
.verbatim .attr{ font-family:"Spline Sans Mono",monospace; font-size:12px; color:var(--brass); letter-spacing:.06em; margin-top:14px; }
.verbatim .attr .out{ color:var(--good); }
.verbatim .attr .out.leak{ color:var(--leak-2); }

/* compression line: "this is what that means" → the number */
.compress{ font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin:20px 0 8px; }

/* -------------------------------------------------------------- reception dimensions */
.dims{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin-top:16px; }
.dim{ border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; cursor:pointer; transition:.2s; }
.dim:hover{ border-color:var(--brass); background:var(--brass-ultra); }
.dim .dv{ font-family:"Fraunces",serif; font-size:24px; color:var(--brass); font-weight:600; line-height:1; }
.dim .dl{ font-family:"Spline Sans Mono",monospace; font-size:9.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.dim.low .dv{ color:var(--leak-2); }

/* -------------------------------------------------------------- inline comprehension highlight (P2.3) */
.xray-copy{ font-family:"Newsreader",serif; font-size:16px; line-height:1.7; color:var(--bone); border:1px solid var(--line-2); border-radius:12px; padding:20px 22px; background:var(--ink); }
.xray-copy mark{ background:rgba(224,112,90,.22); color:var(--leak-2); padding:1px 3px; border-radius:3px; border-bottom:2px solid var(--leak); }
.rewrite-line{ font-family:"Newsreader",serif; font-size:15px; line-height:1.6; }
.rewrite-line .before{ color:var(--leak-2); }
.rewrite-line .after{ color:var(--good); }

/* -------------------------------------------------------------- A/B */
.ab{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ab .side{ border:1px solid var(--line-2); border-radius:12px; padding:20px; transition:.3s; }
.ab .side.win{ border-color:var(--brass); box-shadow:var(--shadow-brass); }
.ab .side .tag{ font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.ab .side.win .tag{ color:var(--brass); }
.win-badge{ display:inline-block; font-family:"Spline Sans Mono",monospace; font-size:10px; color:#1a1206; background:var(--brass); border-radius:100px; padding:3px 10px; letter-spacing:.1em; }

/* -------------------------------------------------------------- scoped chat (P2.5) */
.frames{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.frame-btn{ font-family:"Newsreader",serif; font-size:15px; color:var(--bone-2); border:1px solid var(--line-2); border-radius:100px; padding:9px 18px; cursor:pointer; transition:.2s; background:transparent; }
.frame-btn:hover{ color:var(--brass); border-color:var(--line); }
.frame-btn.on{ color:#1a1206; background:var(--brass); border-color:var(--brass); font-weight:500; }
.chat-lead{ font-family:"Newsreader",serif; font-size:16px; color:var(--mute); margin-bottom:10px; }
.chat-lead .fr{ color:var(--brass); font-style:italic; }

/* -------------------------------------------------------------- stat / checks / trust */
.stat{ text-align:center; padding:20px; border:1px solid var(--line-2); border-radius:12px; background:var(--ink); }
.stat .n{ font-family:"Fraunces",serif; font-size:34px; color:var(--brass); font-weight:600; line-height:1; }
.stat .n.good{ color:var(--good); }
.stat .l{ font-family:"Spline Sans Mono",monospace; font-size:10.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.08em; margin-top:9px; }
.check{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-2); }
.check:last-child{ border-bottom:none; }
.check .ck{ color:var(--good); font-family:"Spline Sans Mono",monospace; font-size:12px; margin-top:2px; flex-shrink:0; }
.check .c-t{ font-size:14px; color:var(--bone); }
.check .c-r{ font-size:13px; color:var(--mute); margin-top:3px; }
.refuse{ border:1px solid rgba(224,112,90,.3); border-radius:12px; padding:18px 20px; margin-top:20px; background:rgba(224,112,90,.05); }
.refuse .num{ font-family:"Fraunces",serif; font-size:24px; color:var(--leak-2); text-decoration:line-through; text-decoration-color:rgba(224,112,90,.5); }
.receipt{ font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--mute); border:1px dashed var(--line); border-radius:10px; padding:14px 16px; margin-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.receipt b{ color:var(--brass); }
.fence{ margin-top:20px; }
.fence li{ list-style:none; padding:9px 0 9px 26px; position:relative; color:var(--mute); font-size:14px; border-bottom:1px solid var(--line-2); }
.fence li:last-child{ border-bottom:none; }
.fence li::before{ content:"\2014"; position:absolute; left:0; color:var(--brass); }

/* -------------------------------------------------------------- "where this goes next" — ONE forward slide */
.forward{ border:1px solid var(--line-2); border-radius:16px; padding:30px 34px; background:linear-gradient(160deg,rgba(143,180,214,.05),var(--panel)); position:relative; }
.forward::before{ content:""; position:absolute; top:0; left:30px; right:30px; height:1px; background:linear-gradient(90deg,transparent,var(--sky),transparent); }
.forward .fwd-tag{ display:inline-flex; align-items:center; gap:8px; font-family:"Spline Sans Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); border:1px solid rgba(143,180,214,.3); border-radius:100px; padding:5px 13px; margin-bottom:18px; }
.forward h3{ font-size:26px; margin-bottom:12px; }
.forward p{ color:var(--mute); font-size:16px; margin:0 0 8px; max-width:70ch; }
.forward .fwd-plain{ color:var(--bone-2); font-style:italic; }

/* -------------------------------------------------------------- know-your-seniors (fully warm) */
.warm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:8px 0 20px; }

/* -------------------------------------------------------------- offer */
.offer-step{ display:flex; gap:20px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line-2); }
.offer-step:last-child{ border-bottom:none; }
.offer-step .onum{ font-family:"Fraunces",serif; font-size:30px; color:var(--brass); font-weight:600; line-height:1; width:52px; flex-shrink:0; }
.offer-step .body h3{ margin-bottom:6px; }
.offer-step .body p{ color:var(--mute); margin:0 0 12px; font-size:15px; }
.price{ font-family:"Fraunces",serif; color:var(--brass); font-weight:600; }

/* track-record strip (P2.7) */
.track-strip{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; font-family:"Spline Sans Mono",monospace; font-size:11.5px; color:var(--mute); padding:12px 0; }
.track-strip b{ color:var(--brass); }

footer{ padding:40px clamp(20px,5vw,64px) 60px; border-top:1px solid var(--line-2); color:var(--mute-2); font-size:13px; }
.disclose{ font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--mute-2); margin-top:10px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.19,1,.22,1); }
.reveal.in{ opacity:1; transform:none; }

.errbox{ padding:14px 16px; border-radius:10px; background:rgba(224,112,90,.06); border:1px solid rgba(224,112,90,.25); color:var(--leak-2); font-family:"Spline Sans Mono",monospace; font-size:12.5px; }

/* ==================================================================== */
/* §3 — OBJECTION MAP (re-tiered): buying-signals grid, drop-off list,   */
/* acquisition ladder. N-GATE grammar rides the tier + line weight.     */
/* ==================================================================== */
.obj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px; }
.obj-note{ color:var(--mute); font-size:13.5px; max-width:74ch; margin-top:14px; }
.drop-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.drop-row{ border-left:3px solid var(--amber); border-radius:0 10px 10px 0; padding:12px 16px; background:linear-gradient(90deg,rgba(217,164,65,.05),transparent 70%); }
.drop-row.verified{ border-left-style:solid; border-left-color:var(--good); background:linear-gradient(90deg,rgba(111,191,154,.05),transparent 70%); }
.drop-row.early{ border-left-style:dashed; border-left-color:var(--amber); }
.drop-row.sim{ border-left-style:dotted; border-left-color:var(--sky); }
.dr-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.dr-label{ font-family:"Newsreader",serif; font-size:16px; color:var(--bone); }
.dr-read{ font-size:13.5px; color:var(--mute); margin-top:5px; }

.ladder{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.lad-row{ display:grid; grid-template-columns:130px 1fr 150px; align-items:center; gap:16px; }
.lad-name{ font-family:"Spline Sans Mono",monospace; font-size:13px; color:var(--bone); }
.lad-track{ height:20px; background:var(--ink-3); border-radius:5px; overflow:hidden; }
.lad-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,var(--brass-deep),var(--brass)); }
.lad-val{ font-family:"Spline Sans Mono",monospace; font-size:14px; color:var(--brass); text-align:right; }

/* ==================================================================== */
/* §7 — MOAT race (grounded vs best-money-can-buy)                       */
/* ==================================================================== */
.moat-race{ display:flex; flex-direction:column; gap:18px; margin-bottom:22px; }
.moat-arm .ma-label{ font-family:"Newsreader",serif; font-size:15px; color:var(--bone-2); margin-bottom:6px; }
.moat-arm .ma-label .mono{ font-family:"Spline Sans Mono",monospace; font-size:10.5px; color:var(--mute-2); margin-left:8px; }
.moat-arm.win .ma-label{ color:var(--bone); }
.ma-bar{ height:24px; background:var(--ink-3); border-radius:5px; overflow:hidden; }
.ma-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,var(--mute-2),var(--mute)); transition:width 1s cubic-bezier(.19,1,.22,1); }
.ma-fill.good{ background:linear-gradient(90deg,#3f7a60,var(--good)); }
.ma-val{ font-family:"Spline Sans Mono",monospace; font-size:15px; color:var(--bone-2); margin-top:6px; }
.ma-val.good{ color:var(--good); }

/* ==================================================================== */
/* §8 — MODEL CARD rows + bulletproof-pending slot                      */
/* ==================================================================== */
.mc-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:12px; }
.mc-k{ font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.mc-v{ font-family:"Spline Sans Mono",monospace; font-size:13px; color:var(--bone); text-align:right; }
.mc-v.good{ color:var(--good); }
.mc-note{ font-size:12.5px; color:var(--mute); margin-top:3px; padding-bottom:8px; border-bottom:1px solid var(--line-2); }
.mc-neverregress{ font-size:13.5px; color:var(--bone-2); font-family:"Newsreader",serif; line-height:1.6; margin-top:16px; padding:14px 16px; border-radius:10px; background:rgba(111,191,154,.05); border:1px solid rgba(111,191,154,.2); }
.pending{ margin-top:18px; padding:14px 16px; border-radius:10px; background:rgba(217,164,65,.05); border:1px dashed rgba(217,164,65,.35); }

@media (max-width:900px){
  .obj-grid{ grid-template-columns:1fr; }
  .lad-row{ grid-template-columns:100px 1fr 110px; gap:10px; }
  .grid-2, .ab{ grid-template-columns:1fr; }
  .jobs, .warm-grid{ grid-template-columns:1fr; }
  .header-right .live-tag{ display:none; }
}

/* hero funnel foot — reframes funnel as proof, not the thesis */
.fc-foot{ margin:14px 2px 2px; font-size:13px; line-height:1.5; color:var(--mute); font-style:italic; }
.fc-foot em{ color:var(--ink); font-style:normal; font-weight:500; }

/* ================================================================
   MOBILE — 480px breakpoint (375px viewport safe)
   Goal: hero + chart legible, header not crowded, padding sane.
   ================================================================ */
@media (max-width:480px){
  /* header: hide "Signed in · Sign out" text + live-tag; keep brand + toggle */
  .signout-link{ display:none; }
  .header-right .live-tag{ display:none; }
  /* stack header-right so toggle sits below brand if needed */
  header{ flex-wrap:wrap; gap:8px; padding:10px 16px; }
  .header-right{ gap:10px; }
  .mode-toggle button{ padding:6px 10px; font-size:10px; }

  /* hero: tighten padding so chart gets real estate */
  .hero{ padding-top:32px; padding-bottom:24px; }
  section{ padding:40px 16px; }
  .hero-lede h1{ font-size:clamp(26px,7vw,36px); }
  .hero-lede .sub{ font-size:16px; }
  .warm-badge{ font-size:10px; padding:4px 10px; }

  /* sep-card: bump SVG text labels so they're legible */
  .sep-lab{ font-size:14px; }
  .sep-ax{ font-size:11px; }
  .sep-card{ padding:18px 14px 16px; }

  /* enrollment / offer panels */
  .grid-2, .ab{ grid-template-columns:1fr; }
  .warm-grid{ grid-template-columns:1fr; }
  .obj-grid{ grid-template-columns:1fr; }
  .lad-row{ grid-template-columns:90px 1fr 90px; gap:8px; }

  /* atom: keep the number readable */
  .atom .num{ font-size:clamp(24px,7vw,32px); }

  /* forward slide */
  .forward{ padding:22px 18px; }

  /* offer steps */
  .offer-step{ flex-direction:column; gap:10px; }
  .offer-step .onum{ width:auto; font-size:22px; }
}