#hero-search-listbox[data-astro-cid-gp6napx3]{transition:opacity 150ms ease-out,transform 150ms ease-out;opacity:0;transform:translateY(8px);pointer-events:none}@media (min-width: 640px){#hero-search-listbox[data-astro-cid-gp6napx3]{transform:translateY(-8px)}}#hero-search-listbox[data-astro-cid-gp6napx3].is-open{opacity:1;transform:translateY(0);pointer-events:auto}#hero-search-listbox[data-astro-cid-gp6napx3].is-closing{pointer-events:none}@media (prefers-reduced-motion: reduce){#hero-search-listbox[data-astro-cid-gp6napx3]{transition:opacity 1ms;transform:none!important}}#home-search-compact[data-astro-cid-gp6napx3]{max-height:0;opacity:0;transition:max-height 200ms ease-out,opacity 150ms ease-out;pointer-events:none}#home-search-compact[data-astro-cid-gp6napx3].is-open{max-height:400px;opacity:1;pointer-events:auto}#home-search-compact[data-astro-cid-gp6napx3].is-closing{pointer-events:none}@media (prefers-reduced-motion: reduce){#home-search-compact[data-astro-cid-gp6napx3]{transition:opacity 1ms}}.hero-search-progress[data-astro-cid-gp6napx3].hsp-indeterminate .hsp-fill[data-astro-cid-gp6napx3]{width:40%!important;transition:none;animation:hsp-sweep 1.1s ease-in-out infinite}@keyframes hsp-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(275%)}}@media (prefers-reduced-motion: reduce){.hero-search-progress[data-astro-cid-gp6napx3],.hero-search-progress[data-astro-cid-gp6napx3] .hsp-fill[data-astro-cid-gp6napx3]{transition:opacity 1ms,width 1ms}.hero-search-progress[data-astro-cid-gp6napx3].hsp-indeterminate .hsp-fill[data-astro-cid-gp6napx3]{width:100%!important;transform:none;opacity:0.45;animation:none}}/* is:global so the client-created ledger pins (built via document.createElement
     in home-preview.ts, which lack the Astro data-astro-cid scope attribute) receive
     the .hp-pin/.hp-lab/.ambient rules — same pattern the FearCard component uses.
     NOTE: NO apostrophes in comments in this block — Lightning CSS (which processes
     is:global) tokenizes a bare apostrophe as a string start and fails the build.
     Safe: every selector below is .hp-dash or .home-preview-root scoped (unique to
     this page), so nothing leaks to other routes. (Do NOT write a star-slash pair
     in this comment — it closes the block early and drops the next rule.)
     ── Warm-editorial palette (phase 5) ──────────────────────────────────────
     The fusion-B7 paper/navy/teal/amber palette, applied by OVERRIDING the
     shared --color-* tokens ONLY within .home-preview-root. This recolours both
     the hp-* structural styles AND the canonical FearCard/RegretPairCard search
     results + chapter cards (which read the same tokens) so the whole preview
     reads as one warm-editorial surface — without leaking to any other page.
     Applied in LIGHT MODE ONLY — gated on html:not([data-theme="dark"]) so a
     dark-mode user keeps the site dark tokens (a light cream block inside the
     dark Base chrome would clash). The override sets custom properties on the
     subtree, recolouring both hp-* styles and the canonical cards. */
  /* Match the risks/decisions contained column (item 6): same 64rem (max-w-5xl)
     width on desktop so home reads as the same "boxed" column, and NO own
     horizontal padding — the global body padding (1rem) is the single inset, so
     home is no longer double-padded on mobile (it was body-1rem + clamp). */
  .home-preview-root {
    max-width: 64rem; margin: 0 auto; padding: 0;
  }
  html:not([data-theme="dark"]) .home-preview-root {
    --color-bg: #f4f0e8;
    --color-bg-card: #fcf9f3;
    --color-surface-raised: #fffdf8;
    --color-ink: #1d2630;
    --color-ink-muted: #46555f;
    --color-line: #d8cfbe;
    --color-accent: #1c6f67;     /* teal — reality / under-rated */
    --color-accent-dim: #d4e7e3; /* teal-soft — balanced badge bg */
    --color-warm: #b0631f;       /* amber — fear / over-rated */
  }
  /* Full-bleed page background. The warm gradient used to sit on the 1180px
     content column, so it ended mid-page and read as a mismatched box. Put a
     soft top glow over flat cream on the WHOLE page instead — full width, no
     box edge. Light mode only; scoped to home-preview pages via :has. */
  html:not([data-theme="dark"]):has(.home-preview-root) body {
    background:
      radial-gradient(1200px 600px at 50% -120px, #fbf7ef 0%, rgba(251, 247, 239, 0) 72%),
      #f4f0e8 !important;
  }
  .home-preview-root .compare-select-btn { display: none !important; }

  /* B7 parity for the shared HeroSearch (#9 navy CTA, #28 gradient progress) —
     preview-only overrides of HeroSearch's classes; HeroSearch.astro itself is
     never touched, so the live homepage is unaffected. */
  .home-preview-root { --hp-navy: #213a52; --hp-navy-2: #2d4d6b; }
  html[data-theme="dark"] .home-preview-root { --hp-navy: #cdd8e3; --hp-navy-2: #b7c5d3; }
  .home-preview-root #hero-search-askai-btn {
    background: linear-gradient(135deg, var(--hp-navy), var(--hp-navy-2)) !important;
    color: #fff;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--hp-navy) 80%, transparent);
  }
  html[data-theme="dark"] .home-preview-root #hero-search-askai-btn { color: var(--color-bg); }
  .home-preview-root .hsp-fill {
    background: linear-gradient(90deg, var(--color-accent), var(--color-warm)) !important;
  }
  /* SEARCH RESULTS region — now lives below the ledger + tidbit, with the Ask AI
     CTA as its last child. Match the ledger column width so it reads as the same
     boxed surface. */
  .hp-results { max-width: 64rem; margin: 14px auto 0; }

  /* Decisions render as a single full-width column (grouped Decisions section).
     Drop the big 2:1 hero image IN THE STACK so each card collapses to a compact
     "regret bar" row — question + the two-sided bar (which now gets the full width)
     + the dominance badge — scannable one-after-the-other. The card still links to
     the full detail page (with its image). The image block is the only aspect-ratio
     box in the canonical RegretPairCard, so this targets exactly it. */
  .hp-decisions-stack [class*="aspect-"] { display: none !important; }

  /* Compact typeahead panel animation — relocated here from HeroSearch's scoped
     <style> because externalResults moves #home-search-compact into THIS body, so
     the component-scoped selector no longer matches it. */
  #home-search-compact {
    max-height: 0;
    opacity: 0;
    transition: max-height 200ms ease-out, opacity 150ms ease-out;
    pointer-events: none;
  }
  /* Tall enough for the inline stacked decision cards (variant B). The compact
     preview caps decision cards at 2 (hero-search.ts MAX_COMPACT_DECISION_CARDS),
     so the worst realistic set — a few risk rows + 2 full regret-bar cards — is
     ~800px (a little more in verbose locales). 1000px clears that with headroom and
     never clips; the page (not the panel) scrolls past it. */
  #home-search-compact.is-open { max-height: 1000px; opacity: 1; pointer-events: auto; }
  #home-search-compact.is-closing { pointer-events: none; }

  /* Search-active condensations (.hp-searching is toggled by home-preview.ts when
     a query is live): strip what is orientation-at-rest but noise once you have
     searched — the "Try:" chips, the ambient ticker, and the static scroll chapters
     (Decisions / gap / receipts) so they cannot be mistaken for search results when
     you scroll past the list. NB: the under-ledger scope-honesty note (.hp-scopenote
     — "Scopes vary … see methodology") is deliberately KEPT visible during search:
     it is the axis-level comparability disclosure, and it matters most exactly when
     mixed-scope result pins land on the ledger. It sits inside the already-on-screen
     ledger block, so keeping it does NOT reintroduce the off-screen push this fixed.
     No plot-height change → the SVG scale stays in sync (no buildScale needed). */
  .home-preview-root.hp-searching .hp-promptline,
  .home-preview-root.hp-searching .hp-ticker,
  .home-preview-root.hp-searching .hp-content { display: none; }

  /* Result pins: only the TOP match keeps a visible label/odds (see home-preview.ts
     plotSearchPins). The rest get .dot-only — label/odds/scope hidden visually but
     kept in the DOM for the hover tooltip + screen readers — so clustered matches
     stop colliding into an unreadable label pile-up. */
  .hp-pin.dot-only .hp-lab,
  .hp-pin.dot-only .hp-odds,
  .hp-pin.dot-only .hp-scopetick { display: none; }

  /* Tidbit: clamp to 3 lines at rest; tap / Enter / Space toggles .expanded for
     the full insight (the full text is always in the DOM, so screen readers are
     unaffected — the clamp is purely visual). The chevron rotates when open. */
  .hp-tidbit-txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .hp-tidbit.expanded .hp-tidbit-txt { -webkit-line-clamp: unset; overflow: visible; }
  /* The chevron + pointer affordance only appear when the text actually overflows
     the clamp — home-preview.ts adds .clampable after measuring. */
  .hp-tidbit-chev { display: none; }
  .hp-tidbit.clampable { cursor: pointer; }
  .hp-tidbit.clampable .hp-tidbit-chev {
    display: inline-flex; flex: none; align-self: flex-start; margin-top: 2px;
    color: var(--color-accent); transition: transform .25s ease; opacity: .7;
  }
  .hp-tidbit.clampable.expanded .hp-tidbit-chev { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) {
    #home-search-compact { transition: opacity 1ms; }
    .hp-tidbit-chev { transition: none; }
  }

  .hp-eyebrow {
    font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-ink-muted); font-weight: 700; margin: 12px 0 8px;
    display: flex; align-items: center; gap: 9px;
  }
  .hp-eyebrow-ln { height: 1px; width: 26px; background: var(--color-line); }
  .hp-head {
    font-family: var(--font-serif, Georgia, serif); font-weight: 700;
    font-size: clamp(29px, 5.6vw, 50px); line-height: 1.04; letter-spacing: -.02em;
    margin: 0 0 10px; max-width: 17ch;
  }
  .hp-em { color: var(--color-warm); font-style: italic; }
  .hp-subhead { font-size: clamp(14.5px, 2vw, 17px); color: var(--color-ink-muted); margin: 0; max-width: 48ch; line-height: 1.5; }
  .hp-searchwrap { position: relative; margin: 22px auto 0; max-width: 760px; }

  /* Seek pulse — one-shot teal→amber underline cue when results land. */
  .hp-seekline {
    position: relative; height: 2.5px; margin: 0 16px 2px; border-radius: 3px;
    background: transparent; opacity: 0; overflow: hidden;
  }
  .hp-seekline .hp-seekbar {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-radius: 3px;
    transform: translateX(-50%); opacity: 0;
    background: linear-gradient(90deg, var(--color-accent), var(--color-warm));
  }
  .hp-seekline.pulse { opacity: 1; }
  .hp-seekline.pulse .hp-seekbar { animation: hp-seekpulse .52s cubic-bezier(0.16,1,0.30,1) 1; }
  @keyframes hp-seekpulse {
    0% { width: 0; opacity: 0; }
    35% { width: 92%; opacity: 1; }
    100% { width: 92%; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hp-seekline, .hp-seekline.pulse .hp-seekbar { animation: none !important; opacity: 0 !important; }
  }

  .hp-strip {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    margin: 4px 16px 2px; border-top: 1px solid var(--color-line);
  }
  /* Live-typing accent: numbers turn teal (amber for over-rated myth cells) to
     signal the strip is showing live result counts — matches B7 .strip.live. */
  .hp-strip.live .hp-num { color: var(--color-accent); }
  .hp-strip.live .hp-cell.amber .hp-num { color: var(--color-warm); }
  .hp-cell {
    position: relative; padding: 9px 6px 8px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 46px; justify-content: center;
  }
  .hp-cell + .hp-cell::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: var(--color-line);
  }
  .hp-num { font-family: var(--font-serif, Georgia, serif); font-weight: 700; font-size: 17px; color: var(--color-ink); line-height: 1; font-variant-numeric: tabular-nums; }
  .hp-cap { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-muted); font-weight: 700; line-height: 1.1; }
  /* On results: collapse 3 cells → one centered localized summary line. */
  .hp-strip.single { display: flex; align-items: center; justify-content: center; padding: 9px 6px 8px; min-height: 46px; }
  .hp-strip.single .hp-cell { display: none; }
  .hp-strip.single #hp-cellA { display: flex; padding: 0; min-height: 0; }
  .hp-strip.single #hp-cellA::before { display: none; }
  .hp-strip.single .hp-num, .hp-strip.single .hp-cap { display: none; }
  .hp-strip.single .hp-summary { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .03em; color: var(--color-accent); font-weight: 700; line-height: 1.3; text-align: center; }

  /* Labeled Clear pill — a calm, discoverable exit from search mode, shown beside
     the live result summary (home-preview.ts toggles its [hidden]). Complements the
     in-input x; hidden at rest so it never occupies a stat-strip grid cell. */
  .hp-clearbtn {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--color-ink-muted); background: transparent;
    border: 1px solid var(--color-line); border-radius: 999px;
    padding: 5px 11px; min-height: 32px; cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
  }
  .hp-clearbtn[hidden] { display: none; }
  .hp-clearbtn:hover { color: var(--color-ink); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent-dim) 30%, transparent); }
  .hp-clearbtn svg { width: 12px; height: 12px; flex: none; }

  .hp-promptline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 12px; }
  .hp-lead { font-size: 12px; color: var(--color-ink-muted); }
  .hp-lead em { font-style: italic; font-weight: 600; }
  .hp-chiprotator { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .hp-chip {
    font-size: 12.5px; color: var(--color-ink-muted); background: var(--color-bg-card);
    border: 1px solid var(--color-line); border-radius: 999px; padding: 7px 13px;
    cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
    transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), border-color .2s, color .2s, opacity .32s cubic-bezier(0.16,1,0.30,1);
  }
  .hp-chip:hover { transform: translateY(-2px); border-color: var(--color-accent); color: var(--color-accent); }
  .hp-k { font-size: 10px; color: var(--color-ink-muted); letter-spacing: .04em; }
  .hp-k-dot { margin: 0 4px; color: var(--color-line); }

  .hp-resmeta { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--color-ink-muted); letter-spacing: .04em; min-height: 18px; margin: 10px 0 0; }
  /* Collapse the reserved meta line when the controller leaves it empty — its
     min-height + margins otherwise wedge ~30px of dead space between the scale
     and the tidbit, holding the cited insight further from the ledger than it
     needs to be. Shows (and re-reserves height) the moment text lands. */
  .hp-resmeta:empty { display: none; }

  /* Contextual tidbit (B7 .tidbit) — teal-edged cited insight for the top match.
     Fades in via .in (the [hidden] attribute is toggled by home-preview.ts). */
  .hp-tidbit {
    display: flex; align-items: flex-start; gap: 10px;
    max-width: 64rem; margin: 8px auto 0;
    background: color-mix(in srgb, var(--color-accent-dim) 50%, var(--color-bg-card));
    border: 1px solid color-mix(in srgb, var(--color-accent) 26%, var(--color-line));
    border-left: 3px solid var(--color-accent);
    border-radius: 12px; padding: 11px 15px;
    font-size: 13px; line-height: 1.5; color: var(--color-ink);
    opacity: 0; transform: translateY(6px);
    transition: opacity .42s cubic-bezier(0.16,1,0.30,1), transform .42s cubic-bezier(0.16,1,0.30,1);
  }
  .hp-tidbit[hidden] { display: none; }
  .hp-tidbit.in { opacity: 1; transform: none; }
  .hp-tidbit-badge { flex: none; display: inline-flex; color: var(--color-accent); margin-top: 1px; }
  .hp-tidbit-badge svg { width: 15px; height: 15px; }
  .hp-tidbit-txt { flex: 1; }
  @media (prefers-reduced-motion: reduce) {
    .hp-tidbit { transition: none !important; transform: none !important; }
  }

  /* ── Ledger (phase 3) ── */
  .hp-ledgerwrap {
    max-width: 64rem; margin: 14px auto 0; position: relative;
    background: var(--color-bg-card); border: 1px solid var(--color-line);
    border-radius: 18px; padding: 12px clamp(16px, 3vw, 26px) 10px; overflow: hidden;
  }
  .hp-ledgerhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
  .hp-ledgert { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-muted); font-weight: 700; }
  .hp-ledgerlive { font-size: 10px; color: var(--color-accent); display: flex; align-items: center; gap: 6px; letter-spacing: .1em; }
  .hp-ledgerlive .hp-d { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
  /* Reserve the plot height so client pins never cause CLS. */
  .hp-plot { position: relative; height: 152px; margin-top: 6px; }
  @media (max-width: 600px) { .hp-plot { height: 172px; } }
  .hp-regionlab { position: absolute; top: 2px; font-style: italic; font-size: 12.5px; color: var(--color-ink-muted); pointer-events: none; transition: opacity .3s cubic-bezier(0.16,1,0.30,1); }
  .hp-regionlab.left { left: 0; } .hp-regionlab.right { right: 0; text-align: right; }
  .hp-scale { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; }
  .hp-scaleticks { position: absolute; left: 0; right: 0; bottom: 6px; height: 22px; pointer-events: none; }
  .hp-tk { position: absolute; transform: translateX(-50%); font-size: 9.5px; color: var(--color-ink-muted); white-space: nowrap; text-align: center; }

  .hp-pin {
    position: absolute; bottom: 34px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: left .62s cubic-bezier(0.22,1,0.36,1), opacity .4s cubic-bezier(0.16,1,0.30,1), filter .3s;
    cursor: pointer; will-change: left, opacity;
  }
  .hp-pin .hp-lab { font-size: 10.5px; line-height: 1.15; color: var(--color-ink-muted); text-align: center; max-width: 96px; background: color-mix(in srgb, var(--color-bg-card) 86%, transparent); padding: 1px 4px; border-radius: 4px; }
  .hp-pin .hp-odds { font-size: 12.5px; color: var(--color-ink); font-weight: 700; white-space: nowrap; }
  .hp-pin .hp-scopetick { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-muted); font-weight: 700; line-height: 1; margin-top: 1px; opacity: .85; }
  .hp-pin .hp-stem { width: 1.5px; height: 18px; background: currentColor; opacity: .5; }
  .hp-pin .hp-head { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-bg-card); box-shadow: 0 1px 3px rgba(0,0,0,.3); position: relative; }
  .hp-pin.amber { color: var(--color-warm); } .hp-pin.amber .hp-head { background: var(--color-warm); }
  .hp-pin.teal  { color: var(--color-accent); } .hp-pin.teal .hp-head { background: var(--color-accent); }
  .hp-pin.myth  { color: var(--color-warm); } .hp-pin.myth .hp-head { background: var(--color-warm); }
  .hp-pin.anchor { z-index: 3; }
  .hp-pin.anchor .hp-odds { font-size: 18px; line-height: 1.05; letter-spacing: -.015em; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--color-bg-card) 92%, transparent); box-shadow: 0 1px 3px rgba(33,58,82,.10); }
  .hp-pin.anchor .hp-lab { font-size: 11px; max-width: 96px; font-weight: 500; }
  .hp-pin.anchor .hp-head { width: 11px; height: 11px; }
  /* B7 dual odds form: full ("1 in 1,000,000,000") on desktop, abbreviated
     ("~1 in 1.0B" / "~4 in 5") swapped in at mobile so the rightmost anchor
     never overflows the ledger at 375px (fusion-B7 lines 830-831, 838). */
  .hp-pin.anchor .hp-od-comp { display: none; }
  @media (max-width: 600px) {
    .hp-pin.anchor .hp-odds { font-size: 14px; padding: 1px 5px; }
    .hp-pin.anchor .hp-od-full { display: none; }
    .hp-pin.anchor .hp-od-comp { display: inline; }
  }
  /* Expanding-ring pseudo-element so the anchor pulse fires a ring (B7 parity). */
  .hp-pin.anchor .hp-head::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; }
  .hp-pin.ambient { opacity: .72; } .hp-pin.ambient .hp-head { width: 10px; height: 10px; }
  .hp-pin.ambient .hp-lab, .hp-pin.ambient .hp-odds { display: none; }
  .hp-pin.ambient .hp-scopetick { display: none; }
  .hp-pin.ambient .hp-stem { height: 13px; opacity: .35; }
  .hp-pin.ambient.fade { opacity: 0; }
  .hp-pin.enter { animation: hp-pin-drop .6s cubic-bezier(0.34,1.56,0.64,1) both; }
  @keyframes hp-pin-drop { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  .hp-pin.hot .hp-head { transform: scale(1.35); }
  .hp-pin.anchor.pulse .hp-head { animation: hp-anchor-pop .62s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes hp-anchor-pop { 0% { transform: scale(1); } 38% { transform: scale(1.5); } 100% { transform: scale(1); } }
  .hp-pin.anchor.pulse .hp-head::after { opacity: .85; animation: hp-ring 1s cubic-bezier(0.16,1,0.30,1) 1; }
  @keyframes hp-ring { 0% { transform: scale(1); opacity: .85; } 70% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }

  .hp-pintip { position: absolute; z-index: 12; pointer-events: none; transform: translate(-50%, -100%); background: var(--color-ink); color: var(--color-bg-card); border-radius: 8px; padding: 6px 10px; max-width: 200px; opacity: 0; transition: opacity .16s ease; font-size: 11.5px; line-height: 1.3; text-align: center; }
  .hp-pintip.on { opacity: 1; }
  .hp-pintip .nm { font-weight: 600; display: block; }
  .hp-pintip .od { font-weight: 700; margin-top: 2px; display: block; }

  .hp-scopenote { margin: 10px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--color-ink-muted); text-align: center; letter-spacing: .01em; }
  .hp-scopenote .hp-more { color: var(--color-accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .hp-scopenote .hp-more:hover { text-decoration: underline; }
  /* Reserve ticker height so the client-populated line never shifts layout. */
  .hp-ticker { margin: 8px 0 0; min-height: 16px; text-align: center; font-size: 11px; color: var(--color-ink-muted); transition: opacity .35s cubic-bezier(0.16,1,0.30,1); }
  .hp-ticker .lead { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 9.5px; color: var(--color-ink-muted); margin-right: 6px; }
  .hp-ticker .nm { color: var(--color-ink); font-weight: 600; }
  .hp-ticker .od { font-family: var(--font-serif, Georgia, serif); color: var(--color-ink); font-weight: 700; }
  .hp-ticker.swap, .hp-ticker:empty { opacity: 0; }

  /* ── Scroll chapters (phase 3) ── */
  .hp-sec { padding: 46px 0 30px; }
  .hp-sec--decisions, .hp-sec--gap, .hp-sec--close { border-top: 1px solid color-mix(in srgb, var(--color-line) 60%, transparent); }
  .hp-sec--close { padding-bottom: 64px; }
  .hp-chaptertitle { font-family: var(--font-serif, Georgia, serif); font-weight: 700; font-size: clamp(22px, 3.6vw, 32px); letter-spacing: -.02em; margin: 0 0 6px; }
  .hp-chaptersub { font-size: clamp(13.5px, 1.7vw, 15.5px); color: var(--color-ink-muted); margin: 0 0 18px; max-width: 56ch; line-height: 1.5; }
  .hp-staticgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 899px) { .hp-staticgrid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 439px) { .hp-staticgrid { grid-template-columns: 1fr; } }

  .hp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(0.16,1,0.30,1), transform .8s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
  .hp-reveal.in { opacity: 1; transform: none; }
  .hp-reveal.hp-d1 { transition-delay: .06s; } .hp-reveal.hp-d2 { transition-delay: .14s; } .hp-reveal.hp-d3 { transition-delay: .22s; }

  /* ── Receipts (phase 3) ── */
  .hp-closing { text-align: center; max-width: 720px; margin: 0 auto; }
  .hp-big { font-family: var(--font-serif, Georgia, serif); font-size: clamp(20px, 3vw, 28px); line-height: 1.3; color: var(--color-ink); margin: 0 0 14px; }
  .hp-big em { color: var(--color-warm); font-style: italic; }
  .hp-authorities { margin: 0 0 22px; font-size: 13px; color: var(--color-ink-muted); line-height: 1.7; }
  .hp-authlead { display: block; margin-bottom: 9px; font-size: 12px; letter-spacing: .02em; }
  .hp-wordmarks { display: inline-flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
  .hp-wm { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--color-ink); background: var(--color-bg-card); border: 1px solid var(--color-line); border-radius: 7px; padding: 5px 10px; }
  .hp-wm.jrnl { font-weight: 600; font-style: italic; color: var(--color-ink-muted); }

  .hp-receipt { text-align: left; max-width: 520px; margin: 0 auto 20px; background: var(--color-bg-card); border: 1px solid var(--color-line); border-radius: 13px; padding: 15px 17px 14px; box-shadow: 0 1px 2px rgba(33,58,82,.06), 0 4px 14px -6px rgba(33,58,82,.16); }
  .hp-rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-muted); font-weight: 700; }
  .hp-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); background: var(--color-accent-dim); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); border-radius: 999px; padding: 2px 9px; letter-spacing: .04em; }
  .hp-tag svg { width: 12px; height: 12px; }
  .hp-claim { font-family: var(--font-serif, Georgia, serif); font-size: 16px; font-weight: 700; color: var(--color-ink); margin: 0 0 4px; letter-spacing: -.01em; }
  .hp-receipt .hp-odds { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: var(--color-ink-muted); margin: 0 0 11px; }
  .hp-framing { color: var(--color-warm); }
  .hp-source { font-size: 12px; color: var(--color-ink-muted); margin: 0 0 7px; }
  .hp-source b { color: var(--color-ink); font-weight: 600; }
  .hp-excerpt { font-size: 13px; line-height: 1.55; color: var(--color-ink); margin: 0 0 13px; border-left: 3px solid var(--color-accent); padding: 4px 0 4px 12px; background: color-mix(in srgb, var(--color-accent-dim) 30%, transparent); border-radius: 0 6px 6px 0; font-style: italic; }
  .hp-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .hp-srclink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 9px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--color-accent); background: var(--color-bg-card); border: 1px solid var(--color-line); transition: background .2s, border-color .2s, transform .18s cubic-bezier(0.34,1.56,0.64,1); }
  .hp-srclink:hover { border-color: var(--color-accent); transform: translateY(-1px); }
  .hp-takeaway { font-size: 12.5px; color: var(--color-ink-muted); line-height: 1.55; max-width: 560px; margin: 0 auto; }
  .hp-takeaway b { color: var(--color-ink); font-weight: 600; }
  .hp-honesty { font-size: 13px; color: var(--color-ink-muted); line-height: 1.55; max-width: 560px; margin: 14px auto 0; padding-top: 12px; border-top: 1px solid var(--color-line); }
  .hp-honesty b { color: var(--color-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 520px) { .hp-links { flex-direction: column; } .hp-srclink { width: 100%; justify-content: center; } }

  @media (prefers-reduced-motion: reduce) {
    .hp-reveal { opacity: 1 !important; transform: none !important; }
    .hp-pin { transition: none !important; }
  }