/* ============================================================
   hybrid.css — Datum hybrid "Trade Desk × Concierge Thread"
   design-system EXTENSION layer. Phase 1 (2026-07-03).
   ELEGANCE REVISION (2026-07-04) — Adam's binding feedback:
     air over compression · demote Geist Mono · elegant document
     sheet for the scope writer · Case Study designation · hero
     shelf. See ~/Datum-Site-Review-2026-07 owner feedback.

   LOAD ORDER (every page):
     <link rel="stylesheet" href="/assets/css/datum.css?v=…">
     <link rel="stylesheet" href="/assets/css/hybrid.css?v=…">

   RULES
   - Colors/fonts verbatim from datum.css :root (var(--…) or
     rgba() derived from those exact palette values only).
     EXCEPTION (2026-07-04): this file now declares the SPACING
     SCALE custom properties (--room, --room-half, --pad-card,
     --gap-grid) — the one sanctioned token addition.
   - LABEL LAW (2026-07-04, binding):
       · section eyebrows = .eyebrow (Instrument Serif italic,
         amber — already the datum.css default; never mono)
       · chips/badges/prices-in-chips = .chip law: Geist 400/500,
         normal case (or font-variant small-caps), tracking ≤.06em,
         soft rounded rect, warm rule border — never uppercase mono
       · nav links + form labels = Geist
       · data figures + prices = Instrument Serif
       · Geist Mono survives ONLY as: thread timestamps
         ([data-bn-clock], [data-bn-timer]) and the small line
         inside the DRAFT stamp. Nothing else on the homepage.
   - Namespaces (no collision with datum.css classes):
       .nav__links .nav__trade .nav__trade-menu .nav__reserve  nav additions
       .tc-*    trade check-in band          .bn-* .bnc-*  The Bottleneck
       .hxp-*   condensed proof block        .reg-*        paths register
       .xr-*    x-ray schematic frame        .scrap-*      scrapbook field
       .fnote-* footnote/proof chain         .pv-*         product-page variants
       .shell-* re-shell primitives (legal/verticals)      .vt-*  vertical landing
       .asset-chip  photography-needed chip  .chip         label-law badge
   - Trade personalization is REVEAL-ONLY: [data-trade-only]
     variants all exist in DOM; html[data-trade=…] shows one.
   - The Bottleneck streaming document reuses datum.css's
     .scope-line / .scope-stamp classes (emitted by js/bottleneck.js)
     re-costumed here as an ivory document sheet.
   - Full prefers-reduced-motion support at the bottom.
   ============================================================ */

/* ============================================================
   0 · SPACING SCALE + LABEL-LAW PRIMITIVES (2026-07-04)
   Rooms, not rows: each major feature gets its own real estate.
   ============================================================ */

:root{
  --room: clamp(110px, 15vw, 240px);        /* vertical padding of a full room */
  --room-half: clamp(64px, 8vw, 130px);     /* smaller room / closing beats */
  --pad-card: clamp(26px, 3vw, 46px);       /* interior padding of cards/threads */
  --gap-grid: clamp(18px, 2.2vw, 30px);     /* grid gaps — nothing shoulder-to-shoulder */
}

/* soft Geist badge — the ONLY sanctioned chip costume */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-sans);font-weight:500;font-size:.82rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--ink-mid);background:rgba(225,154,69,.06);border:1px solid var(--rule-warm);border-radius:8px;padding:5px 12px}
.chip--amber{color:var(--amber-hi);background:rgba(225,154,69,.1)}

/* demoted global mono chrome (shared page chrome follows the law site-wide) */
.footer__col h5{font-family:var(--f-sans);font-size:.85rem;font-weight:500;letter-spacing:.08em;font-variant-caps:small-caps;text-transform:none}
.trust__label{font-family:var(--f-display);font-style:italic;font-size:1.05rem;letter-spacing:.01em;text-transform:none;color:var(--ink-mute)}
.trust-badge b{font-family:var(--f-sans);text-transform:none;letter-spacing:.03em}
.trust-badge small{font-family:var(--f-sans);text-transform:none;letter-spacing:.02em}

/* form labels = Geist, elegant case. Id-scoped so these beat the
   JS-injected style tags from custom-intake.js / lead-capture.js. */
#custom-intake .ci__kicker{font-family:var(--f-display);font-style:italic;font-size:1.05rem;letter-spacing:.01em;text-transform:none}
#custom-intake .ci__field label{font-family:var(--f-sans);font-size:.82rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mute)}
#datum-lead-section .datum-lead label{text-transform:none;font-size:.85rem;letter-spacing:.02em}
legend.cohort-picker__legend{font-family:var(--f-display);font-style:italic;font-size:1.02rem;letter-spacing:.01em;text-transform:none}

/* ============================================================
   1 · NAV EXTENSIONS — single chrome bar
   [mark verbatim] · Case Study · Paths ▾ · Field Notes · [trade chip] · [Reserve]
   ============================================================ */

.nav__links{display:flex;align-items:center;gap:26px;margin-left:34px;margin-right:auto}
.nav__links a{font-family:var(--f-sans);font-size:.95rem;color:var(--ink-mid);text-decoration:none;letter-spacing:.01em;transition:color .2s}
.nav__links a:hover{color:var(--ink-hi)}
.nav__links a[aria-current="page"]{color:var(--amber-hi)}

/* trade context chip — shows chosen trade, click to change (Geist pill, not mono) */
.nav__trade{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-weight:500;font-size:.82rem;letter-spacing:.04em;font-variant-caps:small-caps;text-transform:none;white-space:nowrap;color:var(--ink-low);background:none;border:1px solid var(--rule);border-radius:999px;padding:9px 15px;cursor:pointer;transition:border-color .2s,color .2s}
.nav__trade:hover{border-color:var(--rule-warm);color:var(--ink-mid)}
.nav__trade.is-set{border-color:var(--rule-warm);color:var(--amber-hi)}
.nav__trade .dot{width:6px;height:6px;background:var(--ink-faint);border-radius:50%;flex:0 0 auto;transition:background .2s}
.nav__trade.is-set .dot{background:var(--amber)}
.nav__trade-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;background:var(--bg-1);border:1px solid var(--rule-warm);border-radius:10px;padding:8px;display:none;z-index:60;box-shadow:0 18px 40px rgba(5,4,3,.55)}
.nav__trade-menu.is-open{display:block}
.nav__trade-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:10px 12px;font-family:var(--f-sans);font-size:.92rem;color:var(--ink-mid);cursor:pointer;transition:background .15s,color .15s}
.nav__trade-menu button:hover{background:var(--bg-2);color:var(--ink-hi)}
.nav__trade-menu button[aria-pressed="true"]{color:var(--amber-hi)}
.nav__trade-menu button[aria-pressed="true"]::after{content:" ·";color:var(--amber)}
.nav__trade-menu [data-trade-clear]{border-top:1px solid var(--rule);margin-top:6px;padding-top:12px;color:var(--ink-mute);font-size:.82rem}

/* primary Reserve CTA in the bar (price + next date via cohort-dates mounts) */
.nav__reserve{white-space:nowrap}
.nav__reserve small{font-family:var(--f-sans);font-weight:500;font-size:12px;letter-spacing:.04em;font-variant-caps:small-caps;text-transform:none;opacity:.85;margin-left:8px}

@media (max-width:960px){
  .nav__links{display:none}
  .nav__reserve small{display:none}
}
/* Phone bar (contract §2: mark + trade chip + Reserve + menu — all four must
   FIT and be tappable). CSS-only compaction, no markup change:
   - trade chip collapses to its dot (amber dot still signals a chosen trade;
     full labels remain in the chip menu + nav panel),
   - Reserve keeps its real anchor + full accessible/crawlable text but paints
     a short visual label via font-size:0 + ::after ("Reserve — $2,500", then
     "Reserve" on the narrowest phones). */
@media (max-width:640px){
  .nav__row{gap:10px}
  .nav__actions{gap:8px}
  .nav__trade{padding:8px 9px}
  .nav__trade span[data-trade-label]{display:none}
  .nav__reserve{font-size:0;letter-spacing:0;padding:10px 14px;gap:0}
  .nav__reserve::after{content:"Reserve — $2,500";font-family:var(--f-display);font-size:15px;line-height:1;letter-spacing:.005em}
}
@media (max-width:430px){
  .nav__reserve{padding:10px 12px}
  .nav__reserve::after{content:"Reserve"}
}

/* ============================================================
   2 · TRADE GATING PRIMITIVES (reveal-only personalization)
   All variants live in DOM. No trade set → neutral copy shows
   ([data-trade-default]); a chosen trade swaps in its variant.
   ============================================================ */

[data-trade-only]{display:none}
html[data-trade="remodelers"]          [data-trade-only~="remodelers"],
html[data-trade="interior-designers"]  [data-trade-only~="interior-designers"],
html[data-trade="builders-gcs"]        [data-trade-only~="builders-gcs"],
html[data-trade="suppliers-showrooms"] [data-trade-only~="suppliers-showrooms"],
html[data-trade="distributors"]        [data-trade-only~="distributors"],
html[data-trade="trades"]              [data-trade-only~="trades"]{display:block}
/* inline variants (mid-sentence swaps) */
span[data-trade-only],em[data-trade-only],strong[data-trade-only],b[data-trade-only],i[data-trade-only]{display:none}
html[data-trade="remodelers"]          span[data-trade-only~="remodelers"],
html[data-trade="interior-designers"]  span[data-trade-only~="interior-designers"],
html[data-trade="builders-gcs"]        span[data-trade-only~="builders-gcs"],
html[data-trade="suppliers-showrooms"] span[data-trade-only~="suppliers-showrooms"],
html[data-trade="distributors"]        span[data-trade-only~="distributors"],
html[data-trade="trades"]              span[data-trade-only~="trades"]{display:inline}
/* neutral default: visible until any trade is set */
html[data-trade] [data-trade-default]{display:none}

/* context line on product pages ("Viewing as a remodeler — change") */
.trade-context-line{display:none;align-items:baseline;gap:10px;font-family:var(--f-sans);font-size:.85rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mute);margin:0 0 18px}
html[data-trade] .trade-context-line{display:flex}
.trade-context-line b{color:var(--amber-hi);font-weight:500}
.trade-context-line button{background:none;border:0;padding:0;font:inherit;color:var(--ink-low);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.trade-context-line button:hover{color:var(--amber-hi)}

/* ============================================================
   3 · TRADE CHECK-IN — "What do you build?" (homepage §2)
   A room of its own: eyebrow entrance, six elegant doors.
   ============================================================ */

.tc{padding:var(--room) 0;border-bottom:1px solid var(--rule)}
.tc__head{display:block;margin-bottom:clamp(28px,3.4vw,48px)}
.tc__head .eyebrow{margin-bottom:clamp(10px,1.4vw,18px)}
.tc__head h2{font-family:var(--f-display);font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.05;color:var(--ink-hi);margin:0 0 14px}
.tc__head h2 em{font-style:italic;color:var(--amber)}
.tc__note{display:block;font-family:var(--f-sans);font-size:.92rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mute)}
.tc__subline{font-family:var(--f-display);font-style:italic;font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;color:var(--ink-mute);margin:0 0 12px}
.tc__subline em{font-style:italic;color:var(--amber)}
.tc__chips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.tc-chip{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:var(--bg-1);border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,2.2vw,30px);color:var(--ink-mid);font-family:var(--f-sans);font-size:1.05rem;line-height:1.35;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.tc-chip .tc-chip__no{font-family:var(--f-display);font-style:italic;font-size:.95rem;letter-spacing:.04em;color:var(--amber);opacity:.75}
.tc-chip:hover{border-color:var(--rule-warm);transform:translateY(-2px)}
.tc-chip[aria-pressed="true"]{border-color:var(--amber);background:rgba(225,154,69,.08);color:var(--ink-hi)}
.tc-chip[aria-pressed="true"] .tc-chip__no{opacity:1}
@media (max-width:960px){.tc__chips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tc__chips{grid-template-columns:1fr}}

/* ============================================================
   4 · THE BOTTLENECK — concierge band + thread
   The intake is a refined desk, the draft is a document sheet.
   ============================================================ */

.bn{padding:var(--room) 0;background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 18%)}
.bn__label{font-family:var(--f-display);font-style:italic;font-size:clamp(1.35rem,1.9vw,1.9rem);letter-spacing:.01em;text-transform:none;color:var(--amber-hi);margin:0 0 18px;display:flex;align-items:center;gap:14px;text-shadow:0 0 30px rgba(225,154,69,.2)}
.bn__label::before{content:"";width:clamp(30px,3.6vw,64px);height:1px;background:linear-gradient(90deg,currentColor,rgba(225,154,69,0));opacity:.82}
.bn__title{font-family:var(--f-display);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.04;color:var(--ink-hi);margin:0 0 16px}
.bn__title em{font-style:italic;color:var(--amber)}
.bn__whisper{font-size:1rem;color:var(--ink-mute);font-style:italic;margin:0 0 clamp(34px,4vw,56px);max-width:56ch}

/* the desk (formerly "terminal shell") */
.bn__term{border:1px solid var(--rule-warm);border-radius:14px;background:var(--bg-1);max-width:880px;overflow:hidden;box-shadow:0 24px 60px rgba(5,4,3,.35)}
.bn__term-head{display:flex;align-items:center;gap:7px;padding:14px 22px;border-bottom:1px solid var(--rule)}
.bn__term-head .dot{width:6px;height:6px;border-radius:50%;background:var(--bg-3);border:1px solid var(--rule)}
.bn__term-head .dot.on{background:var(--amber);border-color:var(--amber)}
.bn__term-head .tl{font-family:var(--f-display);font-style:italic;font-size:.98rem;letter-spacing:.01em;text-transform:none;color:var(--ink-mute);margin-left:10px}
.bn__term-body{padding:clamp(20px,2.4vw,30px)}

/* the ask line (formerly terminal prompt) */
.bn__prompt{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);border-radius:10px;background:var(--bg-0);padding:7px 7px 7px 20px}
.bn__ps1{font-family:var(--f-display);font-style:italic;font-size:1.05rem;color:var(--amber);white-space:nowrap;user-select:none}
.bn__prompt input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink-hi);font-family:var(--f-sans);font-weight:300;font-size:1rem;padding:12px 0;caret-color:var(--amber)}
.bn__prompt input::placeholder{color:var(--ink-faint);font-style:italic}
.bn__prompt .btn{flex:0 0 auto}

/* preset pills (Geist, soft — never uppercase mono) */
.bn__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bn-chip{font-family:var(--f-sans);font-weight:400;font-size:.92rem;letter-spacing:.01em;text-transform:none;color:var(--ink-mid);background:var(--bg-2);border:1px solid var(--rule);border-radius:999px;padding:11px 18px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.bn-chip:hover{border-color:var(--rule-warm);color:var(--ink-hi)}
.bn-chip[aria-pressed="true"]{border-color:var(--amber);color:var(--amber-hi);background:rgba(225,154,69,.08)}
.bn__honesty{font-family:var(--f-sans);font-size:.78rem;font-style:italic;letter-spacing:.01em;color:var(--ink-faint);margin:16px 0 0;max-width:64ch}

/* "Not sure?" affordance */
.bn__chooser-toggle{background:none;border:0;padding:0;margin-top:18px;font:inherit;font-size:.92rem;color:var(--ink-low);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bn__chooser-toggle:hover{color:var(--amber-hi)}

/* chooser (rendered by bottleneck.js — .bnc namespace) */
.bnc{margin-top:18px;border:1px solid var(--rule-warm);border-radius:14px;background:var(--bg-1);padding:30px 28px}
[data-bn-chooser]{margin-top:18px}
[data-bn-chooser][hidden]{display:none}
[data-bn-chooser]:not([hidden]){display:block;border:1px solid var(--rule-warm);border-radius:14px;background:var(--bg-1);padding:clamp(24px,2.6vw,36px);max-width:880px}
.bnc__form fieldset{border:0;margin:0;padding:0;min-width:0}
.bnc__form legend{display:block;padding:0;margin:0 0 18px;width:100%}
.bnc__count{display:block;font-family:var(--f-sans);font-weight:500;font-size:.78rem;letter-spacing:.06em;font-variant-caps:small-caps;text-transform:none;color:var(--ink-mute);margin-bottom:8px}
.bnc__q{display:block;font-family:var(--f-display);font-size:1.7rem;line-height:1.15;color:var(--ink-hi)}
.bnc__opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bnc__opt{position:relative}
.bnc__opt input{position:absolute;width:1px;height:1px;margin:0;opacity:.001}
.bnc__opt label{display:block;padding:15px 18px;border:1px solid var(--rule);border-radius:10px;background:var(--bg-2);color:var(--ink-mid);font-family:var(--f-sans);font-size:.95rem;line-height:1.35;cursor:pointer;transition:border-color .2s,background .2s}
.bnc__opt label:hover{border-color:var(--rule-warm)}
.bnc__opt input:checked+label{border-color:var(--amber);background:rgba(225,154,69,.08);color:var(--ink-hi)}
.bnc__opt input:focus-visible+label{outline:2px solid var(--amber);outline-offset:2px}
.bnc__err{margin:12px 0 0;color:var(--burnt-mid);font-size:.9rem}
.bnc__nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px}
.bnc__back{background:none;border:0;padding:6px 0;color:var(--ink-low);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bnc__back:hover{color:var(--amber-hi)}
.bnc__back[hidden]{display:none}
.bnc__kicker{font-family:var(--f-display);font-style:italic;font-size:1.1rem;letter-spacing:.01em;text-transform:none;color:var(--amber);margin:0 0 10px}
.bnc__name{font-family:var(--f-display);font-size:1.9rem;line-height:1.1;color:var(--ink-hi);margin:0 0 6px}
.bnc__name:focus{outline:none}
.bnc__price{font-family:var(--f-display);font-size:1.15rem;color:var(--amber-hi);margin:0 0 14px}
.bnc__reason{margin:0 0 8px;color:var(--ink-mid);line-height:1.6}
.bnc__note{margin:0 0 20px;color:var(--ink-low);font-size:.9rem;line-height:1.5}
.bnc__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bnc__foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-low)}
.bnc__link{background:none;border:0;padding:0;color:var(--ink-low);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bnc__link:hover{color:var(--amber-hi)}
@media (max-width:640px){.bnc__opts{grid-template-columns:1fr}.bnc__q{font-size:1.35rem}.bnc__name{font-size:1.55rem}}

/* ---------- the thread ---------- */

.bn__threads{margin-top:clamp(56px,6vw,96px)}
.bn-thread{display:none}
.bn-thread.is-active{display:block}

.bn-card{position:relative;max-width:880px;margin:0 0 clamp(24px,2.8vw,40px);border:1px solid var(--rule);border-radius:14px;background:var(--bg-1);padding:var(--pad-card);opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.bn-card.is-in{opacity:1;transform:none}
.bn-card--hot{border-color:var(--rule-warm);max-width:1020px}
.bn-card h3{font-family:var(--f-display);font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.12;color:var(--ink-hi);margin:0 0 14px}
.bn-card h3 em{font-style:italic;color:var(--amber)}
.bn-card p{color:var(--ink-mid);line-height:1.7;margin:0 0 12px;max-width:66ch}
.bn-card p:last-child{margin-bottom:0}
.bn-card .whisper{font-size:.92rem;color:var(--ink-mute);font-style:italic}
/* JS-off / no-JS default: cards of the server-marked active thread are visible */
.no-js .bn-card,html:not(.js) .bn-thread.is-active .bn-card{opacity:1;transform:none}

/* timestamp rail — the clock is the ONE sanctioned mono accent here */
.bn-card__stamp{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px}
.bn-card__stamp [data-bn-clock]{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint)}
.bn-card__stamp > span:not([data-bn-clock]):not(.bn-card__tag){font-family:var(--f-sans);font-size:.82rem;font-style:italic;letter-spacing:.02em;text-transform:lowercase;color:var(--ink-mute)}
.bn-card__tag{font-family:var(--f-sans);font-weight:500;font-size:.78rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--amber-hi);background:rgba(225,154,69,.08);border:1px solid var(--rule-warm);border-radius:8px;padding:3px 10px}

/* ---------- the document sheet (scope writer, re-costumed) ----------
   An elegant document drafting itself: ivory sheet, serif headings,
   Geist-light body, thin amber caret, serif-italic DRAFT stamp.
   The streaming mechanic is untouched — only the costume changed. */
.bn-stream{border:1px solid var(--rule-warm);border-radius:10px;overflow:hidden;background:var(--bg-marble);margin-top:10px;box-shadow:0 28px 70px rgba(5,4,3,.45)}
.bn-stream__bar{display:flex;align-items:baseline;gap:16px;padding:13px 24px;border-bottom:1px solid rgba(5,4,3,.12);background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));font-family:var(--f-sans);font-size:.8rem;letter-spacing:.01em;text-transform:none;color:rgba(5,4,3,.55)}
.bn-stream__bar .draft{font-family:var(--f-display);font-style:italic;font-size:.92rem;letter-spacing:.02em;color:var(--burnt-deep);border:1px solid var(--burnt);border-radius:3px;padding:2px 10px;text-transform:none}
.bn-stream__bar [data-bn-brief]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;letter-spacing:.01em;text-transform:none}
.bn-stream__bar [data-bn-timer]{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:rgba(5,4,3,.45)}
.bn-stream__screen{height:440px;overflow-y:auto;padding:clamp(24px,3vw,44px) clamp(24px,3.4vw,52px);font-family:var(--f-sans);font-size:.95rem;line-height:1.8;scrollbar-width:thin;scrollbar-color:rgba(5,4,3,.25) transparent}
/* re-costume the datum.css scope-line/scope-stamp classes ON THE SHEET */
.bn-stream .scope-line{font-family:var(--f-sans);font-weight:300;font-size:.95rem;color:rgba(5,4,3,.78)}
.bn-stream .scope-line--h{font-family:var(--f-display);font-weight:400;font-size:1.2rem;letter-spacing:.01em;color:var(--burnt-deep);margin-top:1.2em}
.bn-stream .scope-line--flag{color:var(--burnt);font-style:italic}
.bn-stream .scope-line--meta{font-family:var(--f-display);font-style:italic;font-size:1rem;color:rgba(5,4,3,.5)}
.bn-stream .scope-line.is-typing::after{content:"▏";color:var(--burnt);animation:scope-blink .8s steps(1) infinite}
.bn-stream .scope-stamp{margin-top:26px;display:inline-block;font-family:var(--f-display);font-style:italic;font-size:1.05rem;letter-spacing:.02em;text-transform:none;border:1px solid var(--burnt);border-radius:3px;color:var(--burnt-deep);padding:12px 20px;transform:rotate(-1.4deg)}
.bn-stream .scope-stamp span{display:block;margin-top:5px;font-family:var(--f-mono);font-style:normal;font-size:10px;letter-spacing:.08em;color:rgba(5,4,3,.55);text-transform:none}
.bn-stream__foot{display:flex;align-items:baseline;gap:16px;padding:13px 24px;border-top:1px solid rgba(5,4,3,.1);background:rgba(5,4,3,.03);font-family:var(--f-sans);font-size:.8rem;font-style:italic;line-height:1.55;color:rgba(5,4,3,.55)}
.bn-stream__foot button{flex:0 0 auto;background:none;border:1px solid rgba(5,4,3,.25);border-radius:999px;padding:7px 14px;font-family:var(--f-sans);font-weight:500;font-size:.78rem;font-style:normal;letter-spacing:.03em;text-transform:none;color:rgba(5,4,3,.65);cursor:pointer;transition:border-color .2s,color .2s}
.bn-stream__foot button:hover:not(:disabled){border-color:var(--burnt);color:var(--burnt-deep)}
.bn-stream__foot button:disabled{opacity:.4;cursor:default}

/* returns stat row inside a thread card — figures serif, labels Geist */
.bn-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin-top:12px}
.bn-stat .n{display:block;font-family:var(--f-display);font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1;color:var(--ink-hi)}
.bn-stat .n small{font-family:var(--f-sans);font-weight:500;font-size:.72rem;letter-spacing:.04em;font-variant-caps:small-caps;color:var(--amber);margin-left:5px}
.bn-stat .l{display:block;margin-top:10px;font-size:.85rem;line-height:1.5;color:var(--ink-low)}
@media (max-width:640px){.bn-stats{grid-template-columns:1fr}}

/* recommended path card inside a thread */
.bn-path{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;border:1px solid var(--rule-warm);border-radius:12px;background:rgba(225,154,69,.05);padding:clamp(22px,2.4vw,32px);margin-top:6px}
.bn-path__kicker{font-family:var(--f-display);font-style:italic;font-size:1.05rem;letter-spacing:.01em;text-transform:none;color:var(--amber);margin:0 0 10px}
.bn-path__name{font-family:var(--f-display);font-size:1.55rem;line-height:1.1;color:var(--ink-hi);margin:0 0 6px}
.bn-path__price{font-family:var(--f-display);font-size:1.1rem;color:var(--amber-hi);margin:0 0 12px}
.bn-path__what{font-size:.92rem;color:var(--ink-mid);line-height:1.6;margin:0}
.bn-path__alt{grid-column:1/-1;margin:8px 0 0;font-size:.85rem;color:var(--ink-low)}
.bn-path__alt a{color:var(--amber-hi);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.bn-path{grid-template-columns:1fr}}

@media (max-width:560px){
  .bn__term-body{padding:16px}
  .bn__prompt{flex-wrap:wrap;padding:10px}
  .bn-card{padding:22px 18px}
  .bn-stream__screen{height:320px;padding:18px 16px}
}

/* ============================================================
   5 · CASE STUDY № 01 (homepage proof room) — stat beats +
   one editorial photograph + link to /kbf-case-study
   ============================================================ */

.hxp{padding:var(--room) 0;border-top:1px solid var(--rule-warm)}
/* case-study beats (2026-07-04 guided layer): the ROI math as a
   narrative sequence. On the normal page all four beats read as
   the room's story (crawlable, JS-off complete); in the guided
   tour they advance one at a time (§13). */
.hxp__beats{margin:0 0 clamp(20px,2.6vw,36px)}
p.hxp-beat{font-family:var(--f-display);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.42;color:var(--ink-mid);margin:0 0 16px;max-width:44ch}
p.hxp-beat em{font-style:italic;color:var(--amber)}
p.hxp-beat strong{font-weight:400;color:var(--amber-hi)}
.hxp-beat--shelf{margin:0}
.hxp__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,5vw,72px);align-items:center}
.hxp__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px) var(--gap-grid);margin:clamp(32px,3.6vw,52px) 0 clamp(28px,3vw,44px)}
.hxp-stat{border-top:1px solid var(--rule-warm);padding-top:16px}
.hxp-stat__num{font-family:var(--f-display);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;color:var(--ink-hi)}
.hxp-stat__num span{font-family:var(--f-sans);font-weight:500;font-size:.72rem;letter-spacing:.04em;font-variant-caps:small-caps;color:var(--amber);margin-left:5px}
.hxp-stat__lbl{margin-top:10px;font-size:.85rem;line-height:1.45;color:var(--ink-low)}
.hxp__photo{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:12px}
.hxp__photo img{display:block;width:100%;height:100%;object-fit:cover}
.hxp__photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(0deg,rgba(5,4,3,.82),rgba(5,4,3,0));font-family:var(--f-display);font-style:italic;font-size:.95rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mid)}
.hxp__link{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.hxp .trust{margin-top:clamp(56px,6vw,96px)}
@media (max-width:900px){.hxp__grid{grid-template-columns:1fr}.hxp__stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.hxp__stats{grid-template-columns:1fr 1fr;gap:22px}}

/* ============================================================
   6 · PATHS REGISTER (homepage §5) — the five canonical products
   as a ledger: number · name · what/for · price · ONE CTA
   ============================================================ */

.reg{padding:var(--room) 0;border-top:1px solid var(--rule)}
.reg__list{border-top:1px solid var(--rule)}
.reg-row{display:grid;grid-template-columns:72px 1.25fr 1.6fr auto auto;gap:clamp(22px,2.6vw,38px);align-items:center;padding:clamp(30px,3.4vw,48px) 0;border-bottom:1px solid var(--rule);transition:background .2s}
.reg-row:hover{background:rgba(246,241,232,.02)}
.reg-row--featured{background:rgba(225,154,69,.04);border-bottom-color:var(--rule-warm);border-radius:12px;padding-left:clamp(18px,2vw,28px);padding-right:clamp(18px,2vw,28px);margin:0 calc(clamp(18px,2vw,28px) * -1)}
.reg-row__no{font-family:var(--f-display);font-style:italic;font-size:1.05rem;letter-spacing:.04em;color:var(--ink-faint)}
.reg-row__name{font-family:var(--f-display);font-size:clamp(1.35rem,2.3vw,1.75rem);line-height:1.12;color:var(--ink-hi);margin:0}
.reg-row__name a{color:inherit;text-decoration:none}
.reg-row__name a:hover{color:var(--amber-hi)}
.reg-row__meta{font-family:var(--f-sans);font-size:.85rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mute);margin-top:8px}
.reg-row__what{font-size:.95rem;line-height:1.6;color:var(--ink-low);margin:0}
.reg-row__what b{color:var(--ink-mid);font-weight:500}
.reg-row__price{font-family:var(--f-display);font-size:clamp(1.25rem,1.9vw,1.6rem);color:var(--amber-hi);white-space:nowrap;text-align:right}
.reg-row__cta{white-space:nowrap}
/* cohort row extras: date picker + seats line mounts sit under the name */
.reg-row__cohort-extras{grid-column:2/-1;margin-top:-4px}
.reg-row__cohort-extras [data-cohort-seats]{display:block;margin-top:12px;font-family:var(--f-sans);font-size:.82rem;letter-spacing:.03em;font-variant-caps:small-caps;text-transform:none;color:var(--ink-mute)}
@media (max-width:900px){
  .reg-row{grid-template-columns:44px 1fr auto;grid-template-areas:"no name price" "no what what" "no cta cta"}
  .reg-row__no{grid-area:no}
  .reg-row__price{grid-area:price}
  .reg-row__what{grid-area:what}
  .reg-row__cta{grid-area:cta;justify-self:start;margin-top:6px}
  .reg-row__cohort-extras{grid-column:2/-1}
}
@media (max-width:560px){.reg-row{grid-template-columns:1fr auto;grid-template-areas:"name price" "what what" "cta cta"}.reg-row__no{display:none}}

/* ============================================================
   7 · KBF CASE-STUDY PAGE COMPONENTS (/kbf-case-study)
   Evidence-Room treatment: x-ray schematic · scrapbook · footnotes
   ============================================================ */

/* --- x-ray workflow schematic frame (clean SVG inside) --- */
.xr{border:1px solid var(--rule-warm);border-radius:12px;background:var(--bg-1);padding:38px 34px;position:relative}
.xr__label{position:absolute;top:-14px;left:22px;background:var(--bg-1);padding:0 12px;font-family:var(--f-display);font-style:italic;font-size:1rem;letter-spacing:.02em;text-transform:none;color:var(--amber)}
.xr__svg{display:block;width:100%;height:auto}
.xr__svg .xr-node{fill:var(--bg-2);stroke:var(--rule-warm);stroke-width:1}
.xr__svg .xr-node--hot{stroke:var(--amber)}
.xr__svg .xr-line{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:4 4}
.xr__svg .xr-t{font-family:var(--f-sans);font-size:11px;letter-spacing:.1em;fill:var(--ink-mid)}
.xr__svg .xr-t--amber{fill:var(--amber-hi)}
.xr__svg .xr-t--dim{fill:var(--ink-faint);font-size:9px}
.xr__callouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:28px}
.xr-callout{border-left:2px solid var(--amber);padding:2px 0 2px 16px}
.xr-callout b{display:block;font-family:var(--f-sans);font-weight:500;font-size:.8rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--amber-hi);margin-bottom:6px}
.xr-callout p{margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-low)}
@media (max-width:640px){.xr{padding:24px 16px}}

/* --- captioned scrapbook photo field (real captions only) --- */
.scrap{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
.scrap-item{position:relative;border:1px solid var(--rule);background:var(--bg-1);padding:10px 10px 14px}
.scrap-item img{display:block;width:100%;height:auto}
.scrap-item figcaption{margin-top:10px;font-family:var(--f-sans);font-size:.78rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mute);line-height:1.6}
.scrap-item figcaption b{color:var(--ink-mid);font-weight:500}
.scrap-item--w6{grid-column:span 6}
.scrap-item--w4{grid-column:span 4}
.scrap-item--w5{grid-column:span 5}
.scrap-item--w7{grid-column:span 7}
.scrap-item--w8{grid-column:span 8}
.scrap-item:nth-child(odd){transform:rotate(-.4deg)}
.scrap-item:nth-child(even){transform:rotate(.35deg)}
@media (max-width:820px){.scrap-item--w4,.scrap-item--w5{grid-column:span 6}.scrap-item--w7,.scrap-item--w8{grid-column:span 12}}
@media (max-width:560px){.scrap-item{grid-column:span 12 !important;transform:none}}

/* photography-needed chip (BRIEF.md convention) */
.asset-chip{display:inline-block;font-family:var(--f-sans);font-weight:500;font-size:.72rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--burnt-mid);border:1px dashed var(--burnt-mid);border-radius:6px;padding:3px 9px;margin-top:8px}

/* --- attributed proof chain (every number footnoted) --- */
.fnote-ref{font-family:var(--f-sans);font-size:.65em;color:var(--amber);vertical-align:super;text-decoration:none;margin-left:2px}
.fnote-ref:hover{color:var(--amber-hi)}
.fnote-chain{border-top:1px solid var(--rule-warm);margin-top:64px;padding-top:30px}
.fnote-chain h2,.fnote-chain h3{font-family:var(--f-display);font-style:italic;font-size:1.2rem;letter-spacing:.01em;text-transform:none;color:var(--amber);margin:0 0 20px;font-weight:400}
.fnote-chain ol{list-style:none;margin:0;padding:0;counter-reset:fnote}
.fnote-chain li{counter-increment:fnote;position:relative;padding:12px 0 12px 48px;border-bottom:1px solid var(--rule);font-size:.85rem;line-height:1.6;color:var(--ink-low)}
.fnote-chain li::before{content:counter(fnote,decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--f-display);font-style:italic;font-size:.9rem;letter-spacing:.04em;color:var(--amber)}
.fnote-chain li b{color:var(--ink-mid);font-weight:500}
.fnote-chain li:target{background:rgba(225,154,69,.07)}

/* ============================================================
   8 · PRODUCT-PAGE VARIANTS (/cohort /community /discovery
   /private-training) — visually distinct, same system.
   Apply the modifier on <body class="offer-page pv pv--…">.
   ============================================================ */

.pv .offer-hero{position:relative}
.pv__badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-weight:500;font-size:.8rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--amber);border:1px solid var(--rule-warm);border-radius:999px;padding:7px 15px;margin-bottom:18px}
.pv__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}

/* cohort — THE WORKING SESSION: session rail, dates+seats forward */
.pv--cohort .pv__rail{display:flex;gap:0;border:1px solid var(--rule-warm);border-radius:12px;overflow:hidden;margin:26px 0}
.pv--cohort .pv__rail-cell{flex:1;padding:18px 20px;border-right:1px solid var(--rule)}
.pv--cohort .pv__rail-cell:last-child{border-right:0}
.pv--cohort .pv__rail-cell b{display:block;font-family:var(--f-sans);font-size:.78rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--amber);margin-bottom:6px;font-weight:500}
.pv--cohort .pv__rail-cell span{font-size:.92rem;color:var(--ink-mid)}
@media (max-width:640px){.pv--cohort .pv__rail{flex-direction:column}.pv--cohort .pv__rail-cell{border-right:0;border-bottom:1px solid var(--rule)}}

/* community — THE ROOM: sample thread pattern (labeled "sample thread").
   The hero LEADS with the thread panel (offer-hero--room) instead of the
   shared photo treatment, so /community reads structurally different from
   /cohort at a glance (HYBRID-BRIEF: "visually distinct per product"). */
.pv--community .offer-hero--room{background-image:linear-gradient(160deg,#0E0C09 0%,var(--bg-0) 62%);align-items:center;min-height:0;padding:calc(var(--nav-offset) + 56px) 0 clamp(42px,5vw,64px)}
.pv--community .offer-hero--room .offer-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.pv--community .offer-hero--room .offer-hero__content{width:100%}
.pv--community .offer-hero--room .pv__room{box-shadow:0 28px 80px rgba(0,0,0,.5);border-color:var(--rule-warm)}
@media (max-width:900px){.pv--community .offer-hero--room .offer-hero__grid{grid-template-columns:1fr;gap:36px}}
.pv--community .pv__room{border:1px solid var(--rule);border-radius:12px;background:var(--bg-1);padding:22px}
.pv--community .pv__room-label{font-family:var(--f-display);font-style:italic;font-size:.95rem;letter-spacing:.02em;text-transform:none;color:var(--ink-mute);margin:0 0 16px}
.pv--community .pv__msg{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.pv--community .pv__msg-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-3);border:1px solid var(--rule-warm);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-style:italic;font-size:.85rem;color:var(--amber)}
.pv--community .pv__msg-head{font-family:var(--f-sans);font-weight:500;font-size:.75rem;letter-spacing:.04em;font-variant-caps:small-caps;text-transform:none;color:var(--ink-mute);margin:0 0 5px}
.pv--community .pv__msg p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-mid)}

/* discovery — THE MAP/DOSSIER: dossier sheet framing */
.pv--discovery .pv__dossier{border:1px solid var(--rule-warm);border-radius:10px;background:var(--bg-marble);color:var(--bg-0);padding:28px 26px}
.pv--discovery .pv__dossier-label{font-family:var(--f-display);font-style:italic;font-size:1rem;letter-spacing:.02em;text-transform:none;color:var(--burnt-deep);margin:0 0 14px}
.pv--discovery .pv__dossier h3{font-family:var(--f-display);color:var(--bg-0);margin:0 0 8px}
.pv--discovery .pv__dossier li{font-size:.9rem;line-height:1.6;color:var(--bg-3)}

/* private training — THE FLOOR VISIT: worklight band */
.pv--training .pv__floor{border:1px solid var(--rule);border-left:3px solid var(--amber);border-radius:0 10px 10px 0;background:linear-gradient(90deg,rgba(225,154,69,.07),transparent 55%);padding:24px 26px}
.pv--training .pv__floor b{display:block;font-family:var(--f-sans);font-weight:500;font-size:.78rem;letter-spacing:.05em;font-variant-caps:small-caps;text-transform:none;color:var(--amber-hi);margin-bottom:8px}

/* ============================================================
   9 · VERTICAL LANDING TREATMENT (/verticals/*) — Trade Desk:
   price + next date + lead form + direct checkout above the fold
   ============================================================ */

.vt-hero{padding:130px 0 84px;border-bottom:1px solid var(--rule);background:var(--bg-0)}
.vt-hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,4.6vw,64px);align-items:start}
.vt-hero__kicker{font-family:var(--f-display);font-style:italic;font-size:1.15rem;letter-spacing:.01em;text-transform:none;color:var(--amber);margin:0 0 16px}
.vt-hero h1{font-family:var(--f-display);font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;color:var(--ink-hi);margin:0 0 16px}
.vt-hero h1 em{font-style:italic;color:var(--amber)}
.vt-hero__offer{border:1px solid var(--rule-warm);border-radius:14px;background:var(--bg-1);padding:28px 26px}
.vt-hero__offer .price{font-family:var(--f-display);font-size:2rem;color:var(--ink-hi)}
.vt-hero__offer .date{font-family:var(--f-sans);font-weight:500;font-size:.85rem;letter-spacing:.03em;font-variant-caps:small-caps;text-transform:none;color:var(--amber-hi);margin:8px 0 16px;display:block}
.vt-hero__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
@media (max-width:900px){.vt-hero__grid{grid-template-columns:1fr}.vt-hero{padding:96px 0 48px}}

/* ============================================================
   10 · RE-SHELL PRIMITIVES (privacy / terms / about-the-build)
   dark shell + marble document sheet, current tokens
   ============================================================ */

.shell-doc{background:var(--bg-0);min-height:100vh}
.shell-doc__head{padding:140px 0 48px;border-bottom:1px solid var(--rule)}
.shell-doc__kicker{font-family:var(--f-display);font-style:italic;font-size:1.15rem;letter-spacing:.01em;text-transform:none;color:var(--amber);margin:0 0 14px}
.shell-doc__head h1{font-family:var(--f-display);font-size:clamp(2rem,4vw,3rem);line-height:1.05;color:var(--ink-hi);margin:0}
.shell-doc__meta{font-family:var(--f-sans);font-size:.8rem;letter-spacing:.03em;font-variant-caps:small-caps;text-transform:none;color:var(--ink-mute);margin-top:14px}
.shell-doc__body{max-width:820px;margin:0 auto;padding:64px var(--gutter) 110px}
.shell-doc__body h2{font-family:var(--f-display);font-size:1.5rem;color:var(--ink-hi);margin:40px 0 12px}
.shell-doc__body h3{font-size:1.05rem;color:var(--ink-hi);margin:28px 0 10px}
.shell-doc__body p,.shell-doc__body li{color:var(--ink-low);line-height:1.7;font-size:.95rem}
.shell-doc__body a{color:var(--amber-hi);text-decoration:underline;text-underline-offset:3px}
.shell-doc__body strong{color:var(--ink-mid)}

/* ============================================================
   11 · SHARED MOTION UTILITIES
   ============================================================ */

/* generic reveal used by hybrid sections (mirrors datum.css .reveal
   but namespaced so pages without cinematic.js can use an IO of
   their own or none — visible by default, animated when .js set) */
.hx-rv{opacity:1;transform:none}
html.js .hx-rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
html.js .hx-rv.is-in{opacity:1;transform:none}

/* ============================================================
   11b · HOMEPAGE ROOM RHYTHM (body.home-rooms, desktop)
   2026-07-04: the vertical page-height budget is ABANDONED
   (owner decision — air over compression). What remains here
   are layout niceties, not density overrides.
   ============================================================ */

.home-rooms .section-head{margin-bottom:clamp(44px,5vw,72px)}
.home-rooms .faq.section,
.home-rooms .intake.section{padding:var(--room-half) 0}
.home-rooms .monument{padding:var(--room-half) 0 24px}

@media (min-width:961px){
  /* leverage-map lead form: two-column fields (layout, not density) */
  .home-rooms #datum-lead-section .dl-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .home-rooms #datum-lead-section .dl-form > *{grid-column:1/-1}
  .home-rooms #datum-lead-section .dl-form > div.dl-field:nth-of-type(-n+4){grid-column:auto}

  .home-rooms .footer__col--site ul{columns:2;column-gap:26px}
  .home-rooms .footer__col--site li{break-inside:avoid}
}

/* generous breathing room around the free leverage-map resource */
.home-rooms #datum-lead-section{margin-top:clamp(56px,6vw,96px)}

/* ============================================================
   13 · THE GUIDED LAYER (js/guided-tour.js, 2026-07-04)
   Presentation-only stage system: everything here applies ONLY
   under body.tour-active, which guided-tour.js adds after the
   hero for eligible first-time visitors. JS-off, crawlers, and
   prefers-reduced-motion visitors never get these classes — the
   page stays the normal scrollable narrative (guardrail G5).
   Native scroll is never intercepted (G1): stages are ordinary
   layout — the active room simply becomes the only visible one.
   ============================================================ */

/* stage gating: hero + fixed chrome stay; the active room is the stage */
body.tour-active main > section:not(#hero):not(.tour-on){display:none}
body.tour-active .footer{display:none}

body.tour-active [data-tour-stage].tour-on{
  display:flex;flex-direction:column;justify-content:center;
  min-height:100vh;min-height:100dvh;                 /* G6: dvh w/ fallback */
  padding-top:calc(var(--nav-offset) + 26px);
  padding-bottom:132px;                               /* clears the fixed hud */
  animation:tour-stage-in .55s ease both;             /* the film continues */
}
body.tour-active [data-tour-stage].tour-on > .wrap{width:100%}
@keyframes tour-stage-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* reveals/cards never stay pre-animation-hidden inside an active stage */
body.tour-active .tour-on .reveal{opacity:1;transform:none}
body.tour-active .tour-on .bn-card{opacity:1;transform:none}

/* ---- stage 1 · CHECK-IN: the six doors, centered, the only content ---- */
body.tour-active.tour-stage-1 .tc__lede{display:none}
body.tour-active.tour-stage-1 .tc__vlink{display:none}
body.tour-active.tour-stage-1 .tc__head{text-align:center}
body.tour-active.tour-stage-1 .tc__subline{margin-left:auto;margin-right:auto;max-width:52ch}
body.tour-active.tour-stage-1 .tc__chips{max-width:1020px;margin:0 auto}

/* ---- stage 2 · THE BOTTLENECK: the desk (chips + free text) alone ---- */
body.tour-active.tour-stage-2 .bn__threads,
body.tour-active.tour-stage-2 #datum-lead-section,
body.tour-active.tour-stage-2 .bn__chooser-toggle,
body.tour-active.tour-stage-2 [data-bn-chooser]{display:none}
body.tour-active.tour-stage-2 .bn__whisper{margin-bottom:clamp(24px,3vw,40px)}

/* ---- stage 3 · THE RUN: the document sheet drafts itself, alone ---- */
body.tour-active.tour-stage-3 .bn__title,
body.tour-active.tour-stage-3 .bn__whisper,
body.tour-active.tour-stage-3 .bn__term,
body.tour-active.tour-stage-3 .bn__chooser-toggle,
body.tour-active.tour-stage-3 [data-bn-chooser],
body.tour-active.tour-stage-3 #datum-lead-section,
body.tour-active.tour-stage-3 .bn-thread.is-active .bn-card:not(.bn-card--hot){display:none}
body.tour-active.tour-stage-3 .bn__threads{margin-top:clamp(18px,2vw,30px)}
body.tour-active.tour-stage-3 .bn-card--hot{margin:0 auto;max-width:1020px;width:100%}

/* ---- stage 4 · THE RETURN: one case-study beat at a time ---- */
body.tour-active.tour-stage-4 .hxp .section-head,
body.tour-active.tour-stage-4 .hxp .trust{display:none}
body.tour-active.tour-stage-4 .hxp__beats{max-width:1100px;margin:0 auto;text-align:center;cursor:pointer}
body.tour-active.tour-stage-4 .hxp-beat{display:none}
body.tour-active.tour-stage-4 .hxp-beat.is-current{display:block;animation:tour-beat-in .5s ease both}
body.tour-active.tour-stage-4 p.hxp-beat{font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.3;max-width:30ch;margin:0 auto}
body.tour-active.tour-stage-4 .hxp-beat--shelf{cursor:default;text-align:left}
body.tour-active.tour-stage-4 .hxp-beat--shelf .hxp__grid{align-items:center}
@keyframes tour-beat-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- stage 5 · THE PATHS: the register, tightened for the stage ---- */
body.tour-active.tour-stage-5 .reg .section-head{margin-bottom:clamp(28px,3vw,44px)}
body.tour-active.tour-stage-5 .reg-row{padding-top:clamp(22px,2.4vw,34px);padding-bottom:clamp(22px,2.4vw,34px)}

/* ---- the hud: progress dots + step label + escape (G2/G6) ---- */
.tour-hud{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:110;display:flex;align-items:center;gap:22px;max-width:min(920px,calc(100vw - 24px));padding:10px 12px 10px 26px;background:rgba(5,4,3,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--rule-warm);border-radius:999px;box-shadow:0 20px 60px rgba(5,4,3,.55)}
.tour-hud[hidden]{display:none}
.tour-hud__progress{display:flex;align-items:center;gap:14px}
.tour-hud__dots{display:flex;gap:7px}
.tour-hud__dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);transition:background .3s,transform .3s,opacity .3s}
.tour-hud__dots i.is-on{background:var(--amber);transform:scale(1.3)}
.tour-hud__dots i.is-past{background:var(--amber);opacity:.4}
.tour-hud__step{font-family:var(--f-display);font-style:italic;font-size:.95rem;letter-spacing:.01em;color:var(--ink-mid);white-space:nowrap}
.tour-hud__actions{display:flex;align-items:center;gap:10px}
.tour-hud__actions button{min-height:44px;border-radius:999px;cursor:pointer;font-family:var(--f-sans);letter-spacing:.01em;text-transform:none}
.tour-hud__skip{background:none;border:0;padding:10px 16px;font-size:.85rem;color:var(--ink-low);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.tour-hud__skip:hover{color:var(--ink-hi)}
.tour-hud__next{background:rgba(225,154,69,.14);border:1px solid var(--amber);color:var(--amber-hi);padding:10px 22px;font-weight:500;font-size:.92rem;transition:background .25s,box-shadow .25s,color .25s}
.tour-hud__next:hover{background:rgba(225,154,69,.24)}
.tour-hud__next.is-ready{background:var(--amber);color:#050403;box-shadow:0 0 36px rgba(225,154,69,.35)}
.tour-hud__notready{background:none;border:1px solid var(--rule-warm);color:var(--ink-mid);padding:10px 18px;font-size:.9rem;transition:color .2s,border-color .2s}
.tour-hud__notready:hover{color:var(--ink-hi);border-color:var(--amber)}
.tour-hud button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---- exit-intent nudge (stage 5, shown at most once ever) ---- */
.tour-nudge{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 86px);z-index:112;max-width:min(440px,calc(100vw - 32px));background:var(--bg-1);border:1px solid var(--rule-warm);border-radius:14px;padding:20px 46px 20px 22px;box-shadow:0 24px 70px rgba(5,4,3,.6);animation:tour-beat-in .4s ease both}
.tour-nudge[hidden]{display:none}
.tour-nudge p{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:var(--ink-mid)}
.tour-nudge b{color:var(--amber-hi);font-weight:500}
.tour-nudge__go{min-height:44px;background:rgba(225,154,69,.12);border:1px solid var(--amber);border-radius:999px;color:var(--amber-hi);padding:10px 20px;font-family:var(--f-sans);font-weight:500;font-size:.9rem;cursor:pointer;transition:background .2s}
.tour-nudge__go:hover{background:rgba(225,154,69,.22)}
.tour-nudge__x{position:absolute;top:6px;right:6px;width:36px;height:36px;background:none;border:0;color:var(--ink-low);font-size:19px;line-height:1;cursor:pointer}
.tour-nudge__x:hover{color:var(--ink-hi)}

/* ---- mobile (G6): hud stacks; fixed corner chips shift clear ---- */
@media (max-width:720px){
  .tour-hud{flex-direction:column;align-items:stretch;gap:10px;border-radius:18px;padding:12px 14px;width:calc(100vw - 24px)}
  .tour-hud__progress{justify-content:center}
  .tour-hud__actions{justify-content:center;flex-wrap:wrap;gap:8px}
  .tour-hud__skip{padding:8px 12px}
  body.tour-active [data-tour-stage].tour-on{padding-bottom:190px}
  /* keep the consent chip + Ask Datum launcher reachable above the hud
     (position only — no consent/concierge logic is touched; the JS
     publishes --tour-clearance from the hud's measured height) */
  body.tour-active .datum-consent-toggle{bottom:var(--tour-clearance,150px)}
  body.tour-active .dc-launch{bottom:calc(var(--tour-clearance,150px) + 6px)}
}

/* ============================================================
   12 · PREFERS-REDUCED-MOTION — complete coverage for every
   animated element this layer introduces
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .bn-card,
  .hx-rv,
  html.js .hx-rv{opacity:1 !important;transform:none !important;transition:none !important}
  .tc-chip,
  .tc-chip:hover{transform:none;transition:none}
  .nav__trade,
  .nav__links a,
  .bn-chip,
  .bnc__opt label,
  .reg-row,
  .bn-stream__foot button{transition:none}
  .bn-stream .scope-line.is-typing::after{animation:none}
  .hero__offer-strip a{transition:none;transform:none}
  .scrap-item,
  .scrap-item:nth-child(odd),
  .scrap-item:nth-child(even){transform:none}
  /* guided layer (§13): guided-tour.js never engages under reduced
     motion (the page stays the normal scrollable narrative), but if
     the classes ever appear, nothing may animate */
  body.tour-active [data-tour-stage].tour-on,
  body.tour-active.tour-stage-4 .hxp-beat.is-current,
  .tour-nudge{animation:none !important}
  .tour-hud__dots i,
  .tour-hud__next,
  .tour-hud__notready,
  .tour-hud__skip,
  .tour-nudge__go{transition:none}
  *{scroll-behavior:auto !important}
}
