/* Hylē v4 · landing */
.landing { background: var(--brand-night); }
.field-fixed { position: fixed; inset: 0; height: 100lvh; z-index: 0; }
.landing main { position: relative; z-index: 1; }
.on-dark { color: #fff; }

/* ---------------- Hero ---------------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(36px, 6.5vh, 72px)); }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: var(--r-pill); color: #fff; background: var(--brand-night); box-shadow: inset 0 0 0 1px var(--night-edge); transition: background var(--d-2); }
.hero-kicker:hover { background: var(--brand-night-2); }
.hero-kicker svg { width: 14px; height: 14px; transition: transform var(--d-3) var(--ease-out); }
.hero-kicker:hover svg { transform: translateX(2px); }
.kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-glow); box-shadow: 0 0 0 3px rgba(255,210,154,.25); }
.hero-title { margin-top: 20px; max-width: 14ch; color: #fff; font-size: clamp(44px, 7.3vw, 104px); }
.hero-title .split-line { padding-bottom: .08em; margin-bottom: -.08em; }
.hero-lede { margin-top: 20px; max-width: 760px; text-wrap: balance; color: #fff; text-shadow: 0 1px 14px rgba(8,18,40,.3); }

/* Composer: outer 18 = inner 10 + padding 8. */
.composer { position: relative; width: 100%; max-width: 720px; margin-top: 32px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 18px; background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 70px -24px rgba(5,15,40,.6), 0 2px 6px rgba(5,15,40,.12), 0 0 0 1px rgba(255,255,255,.6); transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.composer:focus-within { box-shadow: 0 30px 70px -24px rgba(5,15,40,.6), 0 0 0 4px rgba(255,255,255,.35), 0 0 0 1px #fff; }
.composer-icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.composer input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-size: var(--fs-lead); }
.composer input::placeholder { color: var(--ink-3); }
.composer-go { flex: none; border-radius: 10px; }
.hero-try { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.hero-try-label { color: #fff; flex: none; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero-chips .dot { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }

/* ---------------- Sheet ---------------- */
.paper-sheet { position: relative; z-index: 2; background: var(--paper); border-radius: var(--r-2xl) var(--r-2xl) 0 0; margin-top: clamp(56px, 8vh, 80px); padding: 0 0 var(--s-12); }
.sec-head { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.sec-head .t-display { margin-top: 2px; }
/* Pricing (10-09): the pack stage from pages/pack-stage.css, under a landing section head. */
.lp-pricing { padding-top: var(--s-13); }

/* ---------------- Method · the trace ----------------
   One study, scrolled from question to cited answer. Every mark is the page's own study material (BIO-01, S1–S3, the four
   assay values, the synthesis). ≥1081 × ≥700: the stage pins and the timeline scrubs (pages/landing.js). The resting
   layout below is the finished trace, which reduced motion, short screens and the gates see. */
.trace { position: relative; }
.trace-pin { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: calc(var(--nav-h) + clamp(14px, 2.7vh, 24px)) 0 clamp(16px, 2.9vh, 26px); }
.trace-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* eyebrow · one-line title · lede with the study it follows */
.trace-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: baseline; }
.trace-eyebrow { grid-column: 1 / -1; }
/* one line; on shorter laptop screens the title gives up a little size so the pinned stage still fits */
.trace-head .t-display { grid-column: 1 / -1; margin-top: 12px; font-size: min(var(--fs-display), 6.7vh); }
.trace-lede { margin-top: 12px; }
.trace-study { display: flex; align-items: center; gap: 12px; }
.trace-scene { position: relative; flex: 1; display: flex; flex-direction: column; margin-top: clamp(24px, 3.6vh, 40px); }
/* the records keep their natural height (so the gap box ends level with S3); spare height opens above the captions */
/* the figure column is the widest: a forest plot with its numeric columns needs about 424px at 1440 */
.trace-grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.86fr) minmax(0, .88fr); grid-template-rows: auto auto; align-content: space-between; column-gap: 32px; }
.tstage { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; min-width: 0; }
.tart { grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-bottom: clamp(14px, 2.7vh, 24px); }
.tcap { grid-row: 2; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; row-gap: 6px; padding-top: 20px; transition: opacity var(--d-4) var(--ease-out); }
.tcap > .t-small { grid-column: 1 / -1; }
/* captions may run into the gutter: four lines, not five */
.tstage:not(:last-child) .tcap { margin-right: -22px; }
.tcap::before { content: ""; position: absolute; z-index: 1; left: 0; top: -3.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint-2); transition: background var(--d-3), box-shadow var(--d-3); }
.trace.is-live .tstage.is-next .tcap::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.trace.is-live .tstage.is-next .tcap { opacity: .42; }
.tcap-n { color: var(--accent-ink); }
.tcap .t-small { max-width: 38ch; }
.trace-rail { position: absolute; z-index: 0; left: 0; right: 0; top: var(--rail-y, 0); height: 2px; background: var(--hairline); }
.trace-rail span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); transform-origin: 0 50%; }

.tlabel { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); }
/* the question and its large opening copy share one optical size (Inter's opsz would otherwise narrow the large one), so both wrap alike */
.tq { font-size: var(--fs-heading); font-weight: 500; line-height: 1.3; letter-spacing: -.016em; color: var(--ink); font-optical-sizing: none; font-variation-settings: "opsz" 22; text-wrap: wrap; }
/* the opening question: the same type as .tq at about twice the size, so it wraps the same way and can shrink straight into its column */
.tq-ghost { display: none; position: absolute; z-index: 4; left: 0; top: 0; width: max-content; margin: 0; font-size: clamp(38px, 3.3vw, 52px); font-weight: 500; line-height: 1.3; letter-spacing: -.016em; white-space: nowrap; color: var(--ink); font-optical-sizing: none; font-variation-settings: "opsz" 22; transform-origin: 0 0; pointer-events: none; }
.trace.is-live .tq-ghost { display: block; }
.tclaims { --spine: 1; position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-left: 20px; }
.tclaims::before { content: ""; position: absolute; left: 5px; top: -6px; bottom: 9px; width: 1.5px; background: var(--hairline-strong); transform-origin: 50% 0; transform: scaleY(var(--spine)); }
.tclaims li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 4px; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.tclaims li::before { content: ""; position: absolute; left: -15px; top: 9px; width: 10px; height: 1.5px; background: var(--hairline-strong); }
.tclaims .t-mono { color: var(--accent-ink); padding-top: 1px; }

.tslip { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 13px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--e-2); }
.tslip-k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; color: var(--ink); }
.tslip-k .cite { margin: 0; }
.tslip-k .badge { margin-left: auto; }
.tslip-m { color: var(--ink-2); }
.tslip-q { margin-top: 8px; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink); }
.tslip-q mark { padding: 0 2px; margin: 0 -1px; border-radius: 3px; background: rgba(225,145,54,.26); color: inherit; font-variant-numeric: tabular-nums; }
.tslip-f { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-2); }
.tslip.is-gap { background: transparent; box-shadow: none; border: 1.5px dashed var(--warning-line); padding: 10.5px 12.5px 11.5px; }
.tslip.is-gap .tslip-m { color: var(--warning); }

/* the forest plot: a wide variant (cohort · n · plot · ratio (95% CI) · weight) and a narrow one (two-line rows) chosen by the column width */
.tfig { position: relative; margin: 0; container: tfig / inline-size; display: flex; flex-direction: column; gap: 10px; }
/* the figure is a size container (no intrinsic width), so its column must stretch rather than shrink to its label */
.tart-f { align-self: stretch; }
.tforest.is-wide { max-width: 470px; }
.tforest.is-narrow { display: none; max-width: 360px; }
/* the wide layout down to 385px (at 1180 it is drawn at 0.93×, so 12px text renders at 11.1px); narrower columns take the two-line rows */
@container tfig (max-width: 384.98px) { .tforest.is-wide { display: none; } .tforest.is-narrow { display: block; } }
.tf-hl { fill: rgba(225,145,54,.26); }
.tf-base { stroke: var(--hf-axis); stroke-width: 1; }
.tf-null { stroke: var(--ink-3); stroke-width: 1; }
.tf-ci { stroke: var(--ink); stroke-width: 1.25; }
.tf-pt { fill: var(--ink); }
.tf-dia { fill: var(--accent); }
.tnote { max-width: 470px; }

.tverdict { display: flex; }
.tans { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
/* the gap sits at the foot of the column, level with S3, so its dashed thread runs straight under the figure */
.tgap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; padding: 9px 11px; border-radius: var(--r-sm); background: var(--warning-tint); color: var(--warning); }
.tgap svg { width: 14px; height: 14px; flex: none; }
.tgap .cite { margin: 0; }

.trace-threads { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tt-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.tt-line.is-gap { stroke: var(--brand-orange); stroke-dasharray: 5 6; }
.tt-end { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.tt-end.is-gap { stroke: var(--brand-orange); }
.trace-fly { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tfly-trails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tfly-trail { fill: none; stroke: var(--brand-orange); stroke-opacity: .9; stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: .1 6; }
.tfly { position: absolute; left: 0; top: 0; padding: 0 2px; border-radius: 3px; background: rgba(225,145,54,.5); font-size: var(--fs-ui); font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px -8px rgba(179,103,24,.55); transform-origin: 50% 50%; }
@media (min-width: 1180px) and (max-height: 699.98px) { .trace-pin { min-height: 0; } }
/* tall screens: the stage keeps its proportions and the spare height goes around it, so records and captions stay together */
@media (min-width: 1180px) and (min-height: 960px) { .trace-inner { justify-content: center; } .trace-scene { flex: 0 1 auto; height: 600px; } }

/* ---------------- House figure style ----------------
   One style for every figure on the landing: Inter with tabular figures at real sizes (12px ticks and numbers, 13px labels,
   15px bold panel letters), sentence-case titles, a colour-blind-safe set (ink, two blues for dose, deep orange), neutral greys,
   and a one-line caption under each figure. SVG is drawn at its display size (viewBox = layout width). */
.landing { --hf-axis: #8f8a80; --hf-grid: #ece9df; --hf-k0: #8a857b; --hf-k1: #5aa5dc; --hf-k2: #0b4f99; --hf-d0: #2b2a27; --hf-d1: #c0640f; }
.hf { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.hf text { font-size: 12px; fill: var(--ink-2); letter-spacing: 0; }
.hf .tf-lab { font-size: 13px; fill: var(--ink); }
.hf .hf-h, .hf .hf-tick, .hf .hf-dag { fill: var(--ink-3); }
.hf .hf-num, .hf .tf-v { fill: var(--ink); }
.hf .hf-sub { fill: var(--ink-2); }
.hf .hf-b { font-weight: 600; fill: var(--ink); }
.hf .hf-pl { font-size: 15px; font-weight: 700; fill: var(--ink); }
.hf .hf-pt { font-size: 13px; font-weight: 600; fill: var(--ink); }
.hf-ax, .hf-tk { stroke: var(--hf-axis); stroke-width: 1; }
.hf-minor { stroke-width: .75; }
.hf-grid { stroke: var(--hf-grid); stroke-width: 1; }
.hf-rule { stroke: var(--hairline-strong); stroke-width: 1; }
.hf-cap { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.hf .hf-halo { paint-order: stroke; stroke: var(--hf-bg, var(--raised)); stroke-width: 3.5px; stroke-linejoin: round; }
.tfig { --hf-bg: var(--paper); }
.hf-cap b { font-weight: 600; color: var(--ink-2); }
/* Product figure: a, Kaplan–Meier by dose; b, dose–response */
.pf-l { stroke-width: 2; }
.pf-km { fill: none; stroke-width: 1.75; }
.pf-cens line { stroke-width: 1.25; }
.k0 { stroke: var(--hf-k0); } .k1 { stroke: var(--hf-k1); } .k2 { stroke: var(--hf-k2); }
.pf-med { stroke: var(--hairline-strong); stroke-dasharray: 2 3; }
.pf-mdrop { stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.pf-band, .pf-band.d0, .pf-band.d1 { stroke: none; }
.pf-band.d0 { fill: var(--hf-d0); fill-opacity: .1; } .pf-band.d1 { fill: var(--hf-d1); fill-opacity: .14; }
.pf-fit { fill: none; stroke-width: 1.75; }
.d0 { stroke: var(--hf-d0); } .d1 { stroke: var(--hf-d1); }
.pf-pt.d0 { fill: var(--hf-d0); stroke: var(--raised); stroke-width: .75; } .pf-pt.d1 { fill: var(--hf-d1); stroke: var(--raised); stroke-width: .75; }
.pf-pts.d0 .pf-eb { stroke: var(--hf-d0); } .pf-pts.d1 .pf-eb { stroke: var(--hf-d1); }
.pf-eb { stroke-width: 1; }
.pf-drop { stroke-width: 1; stroke-dasharray: 2 2.5; }
.pf-fold { fill: none; stroke: var(--ink-2); stroke-width: 1; }

/* ---------------- Sources ---------------- */
.sources { text-align: center; padding-top: var(--s-12); }
.sources .hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin-bottom: 40px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink); }
.hero-proof li { display: inline-flex; align-items: center; gap: 10px; }
.hero-proof svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.sources-list { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.sources-list li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px; }
.sources-list li + li { border-left: 1px solid var(--hairline); }
.sources-name { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

/* ---------------- Product bento ----------------
   One study (R-046) end to end: the synthesis sheet with its two-panel figure across the top, the source span that backs claim 2,
   and a structure rendered from the AlphaFold coordinates. Everything is live HTML/SVG/canvas at display size. */
.product { padding-top: var(--s-13); }
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bcard { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--sunken); display: flex; flex-direction: column; isolation: isolate; }
.bcard-copy { padding: 32px 32px 0; display: flex; flex-direction: column; gap: 12px; max-width: 520px; position: relative; z-index: 1; }
.bcard-copy .t-heading { margin-top: 4px; }
.bcard-media { position: relative; flex: 1; min-height: 0; margin-top: 28px; }
.bcard-synth { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 40px; padding: 40px 40px 0; background: linear-gradient(165deg, #e8eefb 0%, #f4efe6 70%); }
.bcard-synth .bcard-copy { padding: 8px 0 40px; }
.ps-src { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.ps-src li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px var(--hairline); }
.ps-src li.is-gap { background: transparent; box-shadow: none; border: 1.5px dashed var(--warning-line); padding: 8.5px 10.5px; }
.ps-src .cite { margin: 0; flex: none; }
.ps-src-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--fs-small); color: var(--ink-2); }
.ps-src-t b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.ps-src .is-gap .t-mono { color: var(--warning); }
.bcard-synth .bcard-media { margin-top: 0; display: flex; justify-content: flex-end; }
.psheet { width: 100%; max-width: 760px; padding: 24px 32px 28px; border-radius: 14px 14px 0 0; background: var(--raised); box-shadow: 0 0 0 1px rgba(20,20,19,.06), 0 24px 48px -24px rgba(20,20,19,.3); }
.ps-head { display: flex; align-items: center; gap: 10px; }
.ps-who { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.ps-id { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.ps-q { margin-top: 18px; font-size: var(--fs-small); color: var(--ink-3); }
.ps-ans { margin-top: 6px; font-size: var(--fs-heading); font-weight: 500; line-height: 1.3; letter-spacing: -.016em; color: var(--ink); text-wrap: pretty; }
.ps-detail { margin-top: 12px; font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ps-detail .cite { margin: 0 1px; }
.pfig { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); container: pfig / inline-size; display: flex; flex-direction: column; gap: 14px; }
.pfig-svg.is-wide { max-width: 720px; }
.pfig-svg.is-narrow { display: none; max-width: 340px; }
@container pfig (max-width: 599.98px) { .pfig-svg.is-wide { display: none; } .pfig-svg.is-narrow { display: block; } }
.bcard-evidence { grid-column: 1 / span 6; }
.bcard-figures { grid-column: 7 / span 6; background: linear-gradient(200deg, #f6efe4 0%, #ece9df 100%); }
/* Evidence: the claim, and the source record opened at the span that backs it */
.ev { display: flex; flex-direction: column; gap: 12px; padding: 0 32px 32px; }
.ev-claim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px var(--hairline); font-size: var(--fs-ui); line-height: 1.45; color: var(--ink); }
.ev-k { color: var(--accent-ink); }
.ev-claim .cite { margin: 0; }
.ev-doc { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-2); }
.ev-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--ink-2); }
.ev-head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-head b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.ev-head .cite { margin: 0; }
.ev-head .badge { margin-left: auto; flex: none; }
.ev-sec { margin-top: 4px; color: var(--ink-3); }
.ev-p { font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-2); }
.ev-p mark { padding: 1px 0; border-radius: 3px; color: var(--ink); background: linear-gradient(rgba(225,145,54,.26), rgba(225,145,54,.26)) no-repeat 0 0 / var(--ev-sweep, 100%) 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ev-f { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-3); }
.ev-f svg { width: 14px; height: 14px; }
/* Figures & compute: the p53 model drawn from its AlphaFold coordinates on a canvas at device resolution */
.mol { padding: 0 32px 32px; }
.mol-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-2); }
.mol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.mol-t { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.mol-m { color: var(--ink-3); }
.mol-stage { position: relative; aspect-ratio: 16 / 10; }
.mol-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mol-notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; font-family: var(--font-sans); }
.mol-notes text { font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: var(--raised); stroke-width: 3.5px; stroke-linejoin: round; }
.mol-notes .mn-lead { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.mol-notes .mn-dot { fill: var(--ink-2); }
.mol-tip { position: absolute; z-index: 2; left: 0; top: 0; padding: 5px 8px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: var(--fs-small); line-height: 1.3; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.mol-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.mol-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mol-key li { display: inline-flex; align-items: center; gap: 6px; }
.mol-key span { width: 10px; height: 10px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20,20,19,.12); }
.mol-go { flex: none; }
.ticks { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; color: var(--ink); }
.ticks li { display: flex; align-items: center; gap: 10px; }
.ticks svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------------- Fields atlas ----------------
   Twelve fields, each shown through the real Figure Lab modules its templates produce (plan/redesign-v4/landing-fields).
   Desktop: a field index (real hero thumbnails) beside one live specimen plate. ≤1080: field chips over a snap carousel of the same plates. */
.fields { padding-top: var(--s-13); }
.atlas { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 304px) minmax(0, 1fr); gap: 28px; align-items: start; }

/* index */
.atlas-index { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 14px; }
.ft-list { display: flex; flex-direction: column; gap: 3px; }
.ftab { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; width: 100%; min-height: 62px; padding: 7px 12px 7px 6px; border-radius: var(--r-lg); text-align: left; color: var(--ink);
  transition: background var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.ftab:hover { background: rgba(20,20,19,.04); }
.ftab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ftab.is-active { background: var(--raised); box-shadow: var(--e-2); }
.ftab.is-active:focus-visible { box-shadow: var(--e-2), var(--focus-ring); }
.ftab::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fc); transform: scaleY(0); transition: transform var(--d-4) var(--ease-out); }
.ftab.is-active::after { transform: none; }
/* while the section tours itself, the active marker fills like a progress bar */
.ft-list.is-touring .ftab.is-active::after { transform-origin: 50% 0; animation: ftour var(--tour, 4.2s) linear both; }
@keyframes ftour { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ftab-thumb { width: 64px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline); transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.ftab-thumb img, .ftab-thumb svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ftab:hover .ftab-thumb { transform: scale(1.04); }
.ftab.is-active .ftab-thumb { box-shadow: 0 0 0 1.5px var(--fc); }
.ftab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ftab-name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; letter-spacing: var(--ls-ui); }
.ftab-name .dot { width: 7px; height: 7px; }
.ftab-code { color: var(--ink-3); }

/* the plate sits on a soft glow in the active field colour */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #0f7b6c; }
.atlas-stage { position: relative; display: grid; --glow: var(--field-bio); transition: --glow 900ms var(--ease-out); }
.atlas-stage::before { content: ""; position: absolute; inset: 8% -2% -4% 6%; border-radius: var(--r-2xl); background: radial-gradient(60% 60% at 70% 40%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 70%), radial-gradient(50% 50% at 20% 90%, rgba(18,117,216,.35), transparent 70%); filter: blur(48px); opacity: .32; pointer-events: none; }
.fpanel { grid-area: 1 / 1; display: flex; visibility: hidden; flex-direction: column; gap: 14px; min-width: 0; padding: 14px; border-radius: var(--r-xl); background: var(--raised); box-shadow: var(--e-3); }
.fpanel.is-active, .fpanel.is-leaving { visibility: visible; }
.fpanel.is-active { z-index: 1; }
.fpanel.is-leaving { z-index: 0; pointer-events: none; }
.fp-head, .fp-desc, .fp-n-short { display: none; }
.fp-fig { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fp-frame { position: relative; flex: 1; min-height: 452px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; isolation: isolate; }
.fp-frame::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(20,20,19,.085) 1px, transparent 1.3px); background-size: 14px 14px; background-position: 7px 7px; pointer-events: none; }
.fp-layer { position: absolute; inset: 16px; }
/* a publication figure sits on one clean plate: no dot grid, a little more margin than the specimen layers */
.fp-frame[data-kind="fx"]::before { display: none; }
.fp-frame[data-kind="fx"] .fp-layer { inset: 20px 22px 16px; }
.fp-layer > img, .fp-layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fp-scan { position: absolute; z-index: 2; top: 0; bottom: 0; left: 16px; width: 2px; background: var(--fc); box-shadow: 0 0 22px 3px color-mix(in srgb, var(--fc) 40%, transparent); opacity: 0; pointer-events: none; }
.fp-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 20px; flex-wrap: wrap; padding: 0 6px; }
.fp-title { min-width: 0; font-size: var(--fs-ui); font-weight: 500; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.fp-meta { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.4; color: var(--ink-3); }
/* the featured plates carry a real figure caption (panel letters, n, method, Example data) under the title row;
   desktop shows the two-panel caption, the carousel the phone caption that matches its single-panel variant */
.fp-cl { flex: 1 0 100%; display: block; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.fp-cl b { font-weight: 600; color: var(--ink-2); }
.fp-cl-p { display: none; }
.fp-strip { display: flex; gap: 8px; }
.fp-thumb { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 6px; border-radius: var(--r-md); text-align: left; box-shadow: inset 0 0 0 1px var(--hairline); transition: background var(--d-2), box-shadow var(--d-2); }
.fp-thumb:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.fp-thumb:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--focus-ring); }
.fp-thumb[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fp-thumb-img { flex: none; width: 60px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline); }
.fp-thumb-img img, .fp-thumb-img svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-thumb-l { min-width: 0; font-size: var(--fs-small); line-height: 1.3; color: var(--ink-2); }
.fp-thumb[aria-pressed="true"] .fp-thumb-l { color: var(--ink); font-weight: 500; }
.fp-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 28px; padding: 14px 6px 2px; border-top: 1px solid var(--hairline); }
.fp-k { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.fp-tpl-list { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.fp-tpl-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.fp-tpl-n { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-3); }
.fp-run { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fp-reads { display: flex; align-items: baseline; gap: 10px; }
.fp-fmt { display: flex; flex-wrap: wrap; gap: 4px; }
.fp-fmt span { padding: 2px 6px; border-radius: var(--r-xs); background: var(--sunken); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.4; color: var(--ink-2); }
.fp-q { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-q-t { font-size: var(--fs-ui); line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-go { align-self: flex-start; margin-top: auto; }
.atlas-rail { display: none; }

/* live specimens (v2 template-library figures redrawn from the same data) */
.lv { display: block; overflow: visible; }
.lv text { font-family: var(--font-sans); font-size: var(--fs-small); fill: var(--ink); }
.lv-axis text, .lv text.lv-note { font-family: var(--font-mono); font-size: var(--fs-mono); fill: var(--ink-3); }
.lv-grid { stroke: var(--hairline); stroke-width: 1; }
.lv-edge { fill: none; stroke: var(--ink-4); stroke-width: 1.5; stroke-linecap: round; }
.lv-arrow { fill: var(--ink-3); }
.lv-node { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.lv-node.is-hot { fill: var(--field-law); }
.lv-time .lv-spine { fill: none; stroke: var(--hairline-strong); stroke-width: 3; stroke-linecap: round; }
.lv-time .lv-node.c1 { fill: var(--brand-orange-deep); } .lv-time .lv-node.c2 { fill: var(--success); } .lv-time .lv-node.c3 { fill: var(--danger); }
.lv-stemma .lv-edge { stroke: var(--ink-3); }
.lv-stemma .lv-node { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.lv-stemma .lv-node.is-leaf { fill: var(--accent); stroke: var(--surface); }
.lv-stemma text.lv-greek { font-size: var(--fs-ui); font-weight: 500; }
.lv.is-mini .lv-edge, .lv.is-mini .lv-spine { stroke-width: 9; }
.lv.is-mini .lv-node { stroke-width: 0; transform-box: fill-box; transform-origin: center; scale: 2.6; }


/* ---------------- Principles ---------------- */
.principles { padding-top: var(--s-13); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.plist { margin-top: 40px; display: flex; flex-direction: column; }
.plist li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.plist .t-mono { color: var(--accent-ink); padding-top: 4px; }
.plist .t-heading { margin-bottom: 4px; }
/* ---------------- Final CTA ---------------- */
.final { position: relative; z-index: 1; padding: clamp(120px, 20vh, 200px) 0; text-align: center; }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.final-title { color: #fff; max-width: 14ch; }
.final-lede { margin-top: 20px; color: rgba(255,255,255,.88); }
.final-actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------------- The trace below 1180: the stages stack on one spine (caption beside its record from 720) ---------------- */
@media (max-width: 1179.98px) {
  .trace-pin { min-height: 0; padding: var(--s-12) 0 0; }
  .trace-head { grid-template-columns: minmax(0, 1fr); }
  .trace-study { margin-top: 16px; flex-wrap: wrap; }
  .trace-scene { margin-top: 40px; }
  .trace-grid { display: flex; flex-direction: column; }
  .tstage { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 560px); column-gap: 48px; align-items: start; padding: 0 0 56px 28px; }
  .tstage::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: -8px; width: 1.5px; background: var(--hairline-strong); }
  .tstage:last-child { padding-bottom: 0; }
  .tstage:last-child::before { display: none; }
  .tcap, .tart { grid-row: 1; }
  .tcap { grid-column: 1; padding-top: 0; }
  .tart { grid-column: 2; padding-bottom: 0; }
  .tstage:not(:last-child) .tcap { margin-right: 0; }
  .tcap::before { left: -28px; top: 2px; }
  .tgap { margin-top: 0; }
  .tfig { max-width: 470px; }
  .trace-threads, .trace-rail, .tq-ghost, .trace.is-live .tq-ghost, .tfly-trails { display: none; }
}
@media (max-width: 719.98px) {
  .tstage { display: flex; flex-direction: column; gap: 18px; padding-bottom: 44px; }
  .tart { max-width: 560px; }
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1080px) {
  .bcard-synth, .bcard-evidence, .bcard-figures { grid-column: 1 / -1; grid-row: auto; }
  .bcard-synth { grid-template-columns: minmax(0, 1fr); padding: 32px 32px 0; }
  .bcard-synth .bcard-copy { padding: 0 0 28px; }
  .bcard-synth .bcard-media { justify-content: center; }
  .psheet { max-width: none; }
  /* Fields atlas: field chips over a snap carousel of the same plates */
  .atlas { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
  .atlas-index { position: relative; top: auto; }
  .ft-list { flex-direction: row; gap: 8px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .ft-list::-webkit-scrollbar { display: none; }
  .ftab { display: inline-flex; flex: none; width: auto; min-height: 44px; padding: 0 16px 0 14px; column-gap: 0; border-radius: var(--r-pill); background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
  .ftab:hover { background: var(--raised); }
  .ftab.is-active { background: var(--ink); color: #fff; box-shadow: none; }
  .ftab.is-active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
  .ftab::after, .ftab-thumb, .ftab-code { display: none; }
  .ftab-name { white-space: nowrap; }
  .atlas-stage { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 24px; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .atlas-stage::-webkit-scrollbar { display: none; }
  .fpanel, .fpanel.is-active, .fpanel.is-leaving { display: flex; visibility: visible; flex: 0 0 min(400px, 84vw); scroll-snap-align: start; gap: 12px; padding: 16px; box-shadow: var(--e-2); }
  .fp-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
  .fp-name { font-size: var(--fs-heading); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
  .fp-code { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
  .fp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; margin-top: -6px; padding: 0 2px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
  .fp-fig { flex: none; }
  .fp-frame { flex: none; min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  /* a publication figure needs a taller plate on phone (figures-pro MANIFEST: at least 330px of plot); rasters keep 16:10 */
  .fp-frame[data-kind="fx"] { aspect-ratio: 4 / 5; }
  .fp-frame[data-kind="fx"] .fp-layer { inset: 12px 12px 10px; }
  .fp-cl-d { display: none; }
  .fp-cl-p { display: inline; }
  .fp-layer { inset: 10px; }
  .fp-scan { left: 10px; }
  .fp-cap { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 0 2px; }
  .fp-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fp-cap { min-height: 62px; justify-content: flex-start; }
  .fp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fp-strip { gap: 6px; }
  .fp-thumb { flex-direction: column; align-items: stretch; gap: 6px; padding: 4px 4px 6px; }
  .fp-thumb-img { width: 100%; height: 44px; }
  .fp-thumb-l { display: grid; place-items: center; min-height: 2.6em; text-align: center; }
  .fp-foot { display: flex; flex-direction: column; padding: 12px 2px 0; }
  .fp-tpl { display: none; }
  .fp-run { gap: 12px; }
  .fp-reads { gap: 8px; }
  .fp-q-t { font-size: var(--fs-small); line-height: var(--lh-small); min-height: 2.9em; }
  .fp-go { --btn-h: 44px; align-self: stretch; margin-top: 0; }
  .atlas-rail { display: flex; justify-content: center; gap: 5px; margin-top: -6px; }
  .atlas-rail span { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-strong); transition: background var(--d-3), width var(--d-3) var(--ease-out); }
  .atlas-rail span.is-on { width: 18px; border-radius: 3px; background: var(--fc); }
  .principles { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 640px) {
  /* The centred hero copy spans the whole width on phone, so the veil carries more of it (AA on the orange edge). */
  .landing .field .veil { background: linear-gradient(180deg, rgba(8,18,40,.5) 0, rgba(8,18,40,.38) 55%, rgba(8,18,40,.2) 100%); }
  /* Phone: the task comes first. No kicker, one-sentence lede, one-row composer (outer 16 = inner 10 + 6). */
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero-kicker { display: none; }
  .hero-title { margin-top: 0; }
  .hero-lede { margin-top: 14px; font-size: var(--fs-body); }
  .lede-more { display: none; }
  .composer { padding: 6px 6px 6px 14px; border-radius: 16px; margin-top: 22px; gap: 8px; }
  .composer-icon { width: 18px; height: 18px; }
  .composer input { height: 44px; padding: 0; font-size: var(--fs-body); }
  .composer-go { --btn-h: 44px; width: 44px; padding: 0; border-radius: 10px; }
  .composer-go .go-lbl { display: none; }
  .composer-go .arrow { width: 18px; height: 18px; }
  .hero-try { flex-direction: column; gap: 10px; width: 100%; margin-top: 12px; }
  .hero-try-label { display: none; }
  .hero-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-proof { flex-direction: column; align-items: flex-start; gap: 10px; max-width: 340px; margin-inline: auto; }
  .paper-sheet { margin-top: 36px; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: var(--s-11); }
  .trace-pin { padding-top: 48px; }
  .trace-scene { margin-top: 32px; }
  .tstage { padding-left: 24px; padding-bottom: 40px; }
  .tcap::before { left: -24px; }
  .sources-list { grid-template-columns: 1fr 1fr; }
  .sources-list li:nth-child(3) { border-left: 0; }
  .sources-list li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .sources-list li { padding: 20px 8px; }
  .sources, .product, .fields, .principles { padding-top: var(--s-12); }
  .lp-pricing { padding-top: var(--s-12); }
  .bento { margin-top: 32px; }
  .atlas { margin-top: 28px; }
  .bcard-copy { padding: 24px 24px 0; }
  .bcard-synth { padding: 24px 16px 0; }
  .bcard-synth .bcard-copy { padding: 0 8px 24px; }
  .psheet { padding: 18px 16px 20px; }
  .ps-ans { font-size: var(--fs-lead); }
  .ps-id { display: none; }
  .ps-detail { font-size: var(--fs-small); }
  .ev, .mol { padding: 0 16px 16px; }
  .ev-doc, .mol-fig { padding: 14px 14px 12px; }
  .ev-head { flex-wrap: wrap; }
  .ev-head .badge { margin-left: 0; }
  .mol-stage { aspect-ratio: 4 / 5; }
  .mol-go { --btn-h: 44px; width: 100%; justify-content: center; }
  .fp-n-full { display: none; }
  .fp-n-short { display: inline; }
  .final-actions { flex-direction: column; width: 100%; max-width: 360px; }
  .final-actions .btn { width: 100%; }
}

/* =====================================================================================================
   Audit fix B · landing (ledger items only; Method, Product and Fields figures unchanged).
   Hero chips read as actions; the Sources value rows share one left-aligned component on phone; inactive Method steps
   stay ≥4.5:1 (progress is carried by the dot and rule); the Evidence card fills its height and gets a real way into
   the source; the atlas glow no longer smears; the final CTA's second action is a ghost on the field.
   ===================================================================================================== */
.hero-chips .chip { min-height: 36px; padding: 0 14px; font-size: var(--fs-small); font-weight: 500; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-chips .chip:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.42); }
.hero-chips .chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.trace.is-live .tstage.is-next .tcap { opacity: .78; }
.sources-list .t-mono { font-size: var(--fs-small); letter-spacing: .02em; color: var(--ink-2); }
.sources-label { color: var(--ink-2); }
.bcard-evidence .bcard-media.ev { display: flex; flex-direction: column; }
.ev-open { align-self: flex-start; margin-top: 14px; gap: 8px; }
.ev-open svg { width: 15px; height: 15px; }
.atlas-stage::before { opacity: .55; filter: blur(36px); }
.final-ghost { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.final-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 1080px) {
  .fp-desc { display: block; -webkit-line-clamp: unset; overflow: visible; min-height: 0; }
  .ft-list { scroll-snap-type: x proximity; }
  .ftab { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + 28px); }
  .hero-chips { scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .hero-chips .chip { scroll-snap-align: start; min-height: 40px; }
  .sources .hero-proof { align-items: stretch; text-align: left; }
  .hero-proof li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; }
  .hero-proof li svg { margin-top: 2px; }
  .sources { padding-top: 64px; }
  .ev-open { align-self: stretch; justify-content: center; min-height: 44px; }
  .final-actions .final-ghost { min-height: 44px; }
}
@media (max-width: 640px) { .final { padding: 96px 0 104px; } }
@media (max-width: 640px) { .hero-chips .chip { min-height: 44px; } }
.hero-chips .chip { background: rgba(11,24,48,.55); border-color: rgba(255,255,255,.3); }
.hero-chips .chip:hover { background: rgba(11,24,48,.75); border-color: rgba(255,255,255,.5); }

/* =====================================================================================================
   Founder review 10-08 · landing (plan/BRIEF-LANDING-FIX-1008.md)
   1 Product tour before Method · 2 Sources network · 3 hero pill + Start research belong to the shader
   4 phone example questions marquee. The hero shader and hero text are unchanged.
   ===================================================================================================== */

/* ---- 3 · Hero pill: frosted glass with a light edge that picks up the shader's blue → amber ---- */
.hero-kicker { position: relative; isolation: isolate; height: 36px; gap: 10px; padding: 0 5px 0 14px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: linear-gradient(rgba(9,20,42,.5), rgba(9,20,42,.5)) padding-box,
              linear-gradient(115deg, rgba(255,255,255,.62), rgba(150,196,255,.34) 38%, rgba(255,210,154,.6) 78%, rgba(255,255,255,.22)) border-box;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 30px -14px rgba(5,15,40,.55);
  color: #fff; font-size: var(--fs-small); font-weight: 500; letter-spacing: .01em; text-transform: none;
  transition: background var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), transform var(--d-2) var(--ease-press); }
.hero-kicker:hover { background: linear-gradient(rgba(9,20,42,.62), rgba(9,20,42,.62)) padding-box,
              linear-gradient(115deg, rgba(255,255,255,.85), rgba(150,196,255,.5) 38%, rgba(255,210,154,.85) 78%, rgba(255,255,255,.35)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 36px -14px rgba(5,15,40,.6), 0 0 0 4px rgba(255,255,255,.06); }
.hero-kicker:active { transform: scale(.98); }
.hero-kicker:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.kicker-dot { width: 6px; height: 6px; background: var(--brand-glow); box-shadow: 0 0 0 3px rgba(255,210,154,.22), 0 0 12px rgba(255,210,154,.8); }
.kicker-t { white-space: nowrap; }
.kicker-go { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background var(--d-3) var(--ease-out); }
.hero-kicker .kicker-go svg { width: 14px; height: 14px; }
.hero-kicker:hover .kicker-go { background: #fff; color: var(--brand-night); }
.hero-kicker:hover svg { transform: translateX(1px); }

/* ---- 3 · Start research: the brand mark gradient (AA behind white text), lit edge, sheen on hover, real press ---- */
.composer .composer-go { --btn-h: 52px; position: relative; padding: 0 20px 0 22px; gap: 10px; border-radius: 12px; color: #fff; font-weight: 500; letter-spacing: -.005em;
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%), linear-gradient(120deg, #0d5bb5 0%, #13254a 52%, #9a5212 100%);
  background-size: 260% 100%, 150% 100%; background-position: 130% 0, 0% 50%; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -10px rgba(13,60,140,.75), 0 2px 4px rgba(11,24,48,.2);
  transition: background-position var(--d-5) var(--ease-out), box-shadow var(--d-3) var(--ease-out), transform var(--d-2) var(--ease-press); }
.composer .composer-go:hover { background-position: -30% 0, 100% 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 28px -10px rgba(13,60,140,.8), 0 2px 4px rgba(11,24,48,.2); }
.composer .composer-go:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 10px -6px rgba(13,60,140,.7); }
.composer .composer-go:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 2px #fff, 0 0 0 5px rgba(18,117,216,.55); }
.composer .composer-go .arrow { width: 18px; height: 18px; transition: transform var(--d-3) var(--ease-out); }
.composer .composer-go:hover .arrow { transform: translateX(2px); }
@media (max-width: 640px) { .composer .composer-go { --btn-h: 44px; width: 44px; padding: 0; gap: 0; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .composer .composer-go, .hero-kicker { transition: none; } }

/* ---- 4 · Phone example questions: wrapped and static by default (reduced motion, no script);
         with motion a seamless marquee (pages/landing.js clones the chips once, aria-hidden, and pauses on hover/focus/touch) ---- */
@media (max-width: 640px) {
  .hero-chips { flex-wrap: wrap; justify-content: center; overflow: visible; width: 100%; margin: 0; padding: 0; -webkit-mask: none; mask: none; scroll-snap-type: none; }
  .hero-chips .chip { scroll-snap-align: none; }
  .motion-ok .hero-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: clip; overflow-y: visible; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 4px 0;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent); }
  .hero-marquee { display: flex; gap: 8px; flex: none; padding-left: var(--gutter); will-change: transform; }
  .hero-marquee .chip { flex: none; }
}

/* ---- 1 · Product tour ---- */
.tour { padding-top: var(--s-12); }
.tour-head { max-width: 820px; }
.tour-ui { margin-top: 48px; }
.tour-stage { position: relative; }
.tour-stage::before { content: ""; position: absolute; inset: 8% 4% -4%; z-index: 0; pointer-events: none; border-radius: 40px; filter: blur(60px); opacity: .5;
  background: radial-gradient(60% 70% at 18% 40%, rgba(18,117,216,.55), transparent 70%), radial-gradient(55% 65% at 85% 60%, rgba(225,145,54,.5), transparent 70%); }
.tour-window { position: relative; z-index: 1; overflow: hidden; border-radius: 16px; background: var(--raised);
  box-shadow: 0 0 0 1px rgba(20,20,19,.09), 0 1px 2px rgba(20,20,19,.06), 0 24px 48px -24px rgba(11,24,48,.35), 0 60px 120px -48px rgba(11,24,48,.4); }
.tour-chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 8px 0 16px; background: linear-gradient(#fbfaf6, #f3f1ea); border-bottom: 1px solid var(--hairline); }
.tour-dots { display: flex; gap: 7px; }
.tour-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--sunken-2); box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); }
.tour-addr { justify-self: center; min-width: 0; max-width: 46ch; padding: 3px 14px; border-radius: var(--r-sm); background: rgba(20,20,19,.045); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-meta { justify-self: end; display: flex; align-items: center; gap: 4px; }
.tour-play { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; }
.tour-play[hidden] { display: none; }
.tour-play:hover { background: rgba(20,20,19,.06); color: var(--ink); }
.tour-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tour-play svg { width: 15px; height: 15px; }
.tour-play .tour-ic-play, .tour-play[aria-pressed="true"] .tour-ic-pause { display: none; }
.tour-play[aria-pressed="true"] .tour-ic-play { display: block; }
.tour-screens { display: grid; background: var(--paper); aspect-ratio: 1440 / 900; }
.tour-panel { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: scale(1.012); transform-origin: 50% 0;
  transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out), visibility 0s linear .7s; }
.tour-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out), visibility 0s; }
.tour-panel picture, .tour-panel img { display: block; width: 100%; height: 100%; }
.tour-panel img { object-fit: cover; object-position: 50% 0; }
.tour-tabs { position: relative; z-index: 1; margin-top: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tour-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 20px 12px 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; transition: background var(--d-2), color var(--d-2); }
.tour-tab:hover { background: rgba(20,20,19,.035); color: var(--ink); }
.tour-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-tab[aria-selected="true"] { color: var(--ink); }
.tour-bar { position: absolute; top: 0; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--hairline-strong); overflow: hidden; }
.tour-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.tour-tab[aria-selected="true"] .tour-bar i { transform: scaleX(1); }
.tour-ui.is-auto .tour-tab[aria-selected="true"] .tour-bar i { transform: scaleX(0); }
.tour-n { color: var(--ink-2); }
.tour-tab[aria-selected="true"] .tour-n { color: var(--accent-ink); }
.tour-t { font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-ui); }
.tour-d { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.tour-tab[aria-selected="true"] .tour-d { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tour-panel, .tour-panel.is-active { transition: none; transform: none; } }
@media (max-width: 1179.98px) { .tour-d { display: none; } }
@media (max-width: 640px) {
  .tour { padding-top: 72px; }
  .tour-ui { margin-top: 32px; }
  .tour-stage::before { inset: 10% 0 0; }
  .tour-window { width: min(100%, 320px); margin: 0 auto; border-radius: 26px; box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 0 0 7px #fff, 0 0 0 8px rgba(20,20,19,.08), 0 40px 80px -30px rgba(11,24,48,.45); }
  .tour-chrome { grid-template-columns: minmax(0, 1fr) auto; height: 44px; padding: 0 2px 0 14px; }
  .tour-dots { display: none; }
  .tour-addr { justify-self: start; max-width: 100%; padding: 0; background: none; }
  /* follow-up 10-08: the frame keeps a compact, always visible "Example data" label on every phone panel */
  .tour-meta { gap: 2px; }
  .tour-label { height: 20px; padding: 0 7px; gap: 5px; }
  .tour-label::before { width: 5px; height: 5px; }
  .tour-play { width: 44px; height: 44px; }
  .tour-screens { aspect-ratio: 390 / 760; }
  .tour-tabs { margin-top: 28px; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hairline); }
  .tour-tab { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 14px 4px 14px 4px; border-radius: 0; border-bottom: 1px solid var(--hairline); }
  .tour-tab:hover { background: transparent; }
  .tour-bar { top: auto; bottom: -1px; left: 0; right: 0; background: transparent; }
  .tour-d { display: none; grid-column: 2; margin-top: 2px; }
  .tour-tab[aria-selected="true"] .tour-d { display: block; }
}

/* ---- 2 · Sources network: the four indexes → the passages kept → the claims they decide ---- */
.sources-net { position: relative; isolation: isolate; margin-top: 28px; padding: 36px 40px 44px; border-radius: var(--r-2xl); text-align: left; overflow: hidden;
  background: radial-gradient(70% 90% at 0% 0%, rgba(18,117,216,.10), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(225,145,54,.12), transparent 60%),
              radial-gradient(circle at 1px 1px, rgba(20,20,19,.07) 1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(165deg, #edf2fb 0%, #f6f2ea 100%);
  box-shadow: inset 0 0 0 1px rgba(20,20,19,.06); }
.sources-net .threads-svg { z-index: 0; }
.sources-net .thread-line { stroke-width: 1.4; }
.sources-net > :not(.threads-svg) { position: relative; z-index: 1; }
.sn-label { color: var(--ink-2); margin-bottom: 12px; }
.sources-net .sources-list { margin-top: 0; gap: 16px; border: 0; }
.sources-net .sources-list li { padding: 22px 12px; border: 0; border-radius: var(--r-lg); background: rgba(255,255,255,.88); box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 10px 24px -18px rgba(11,24,48,.35); }
.sources-net .sources-list li + li { border-left: 0; }
.sn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sn-passages { margin-bottom: 0; }
.sources-net .sources-list, .sn-passages { margin-bottom: 72px; }
.sn-node { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 8px 20px -16px rgba(11,24,48,.35); }
.sn-node .cite { margin: 0; flex: none; }
.sn-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-t b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); line-height: var(--lh-ui); }
.sn-t .t-mono { color: var(--ink-2); }
.sn-claim { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
.sn-c1 { grid-column: span 2; }
.sn-passages [data-thread-kind="gap"] { box-shadow: 0 0 0 1px var(--warning-line), 0 8px 20px -16px rgba(11,24,48,.35); }
@media (max-width: 1080px) { .sources-net { padding: 28px 24px 32px; } .sn-row, .sources-net .sources-list { gap: 12px; } }
@media (max-width: 640px) {
  .sources-net { margin-top: 24px; padding: 22px 16px 24px; border-radius: var(--r-xl); }
  .sources-net .threads-svg { display: none; }
  .sources-net .sources-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sources-net .sources-list li { padding: 16px 8px; }
  .sources-net .sources-list li:nth-child(n+3) { border-top: 0; }
  .sn-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sources-net .sources-list, .sn-passages { margin-bottom: 0; }
  .sn-label { margin: 0 0 10px; }
  .sn-label ~ .sn-label { margin-top: 16px; padding-top: 30px; background: linear-gradient(var(--accent), var(--accent)) 14px 0 / 1.5px 22px no-repeat; }
  .sn-c1 { grid-column: auto; }
}