/* ============================================================
   BOLTON Signal — tpl-home.css  (Wave 7 homepage, v0.2.0-rc.7b)
   Layer-1 visual-led homepage: A+B hybrid UAV/avionics HUD hero →
   3-risk positioning path → capability selector + 7 worlds →
   hybrid-commerce workbench → signal journey → document planes →
   markets selector → KC briefing → combined closing RFQ.
   Built on the theme's mode-aware tokens (01-tokens.css). Reuses
   .btn/.chip/.eyebrow/.label-mono/.container/.section/.card from
   02–04. Dark cinematic + light instrument-glass; reduced-motion +
   no-JS safe (hero stays readable). All real copy lives in the PHP.
   ============================================================ */
@layer templates {

  /* HUD instrument accents (mode-aware; map to brand families) */
  .home{
    --hud-gold:#C8A24C;
    --hud-gold-t:var(--bx-accent-strong);              /* AA gold text per mode */
    --hud-steel:#4F9BD9;  --hud-steel:light-dark(#2C6FA8,#5AA6E0);
    --hud-green:#3FB984;  --hud-green:light-dark(#1F8A5B,#52C796);
    --hud-line:rgba(150,180,214,.45); --hud-line:light-dark(rgba(44,79,104,.55),rgba(150,180,214,.45));
    --hud-line-faint:rgba(150,180,214,.18); --hud-line-faint:light-dark(rgba(44,79,104,.20),rgba(150,180,214,.18));
    --hud-readout:#9FB6D0; --hud-readout:light-dark(#3C536F,#9FB6D0);
  }

  /* shared section-head type */
  .s-title{font-size:var(--bx-fs-2xl); max-width:18ch; letter-spacing:-.01em; line-height:1.14}
  .s-lede{margin-top:1rem; max-width:60ch; color:var(--bx-text-2); font-size:var(--bx-fs-lg)}
  .home .section--alt{background:var(--bx-bg-section)}
  .section-grid{position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(var(--bx-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--bx-grid-line) 1px,transparent 1px);
    background-size:60px 60px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 75%); mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 75%)}
  .home .section>.container{position:relative; z-index:1}

  /* scroll reveal — FAIL-VISIBLE (rc.2 fix for Defect 1).
     Content is VISIBLE by default. home.js arms the hidden state (.bx-armed)
     only on below-fold elements it will then reveal (.bx-in). So: no JS, a
     home.js load/parse failure, no IntersectionObserver, reduced motion, or any
     thrown error all leave every section visible — nothing relies on animation
     to exist. Above-fold elements are never armed (no flash, no CLS). */
  .bx-reveal{opacity:1; transform:none}
  .bx-reveal.bx-armed{opacity:0; transform:translateY(14px); will-change:opacity,transform}
  .bx-reveal.bx-armed.bx-in{opacity:1; transform:none; transition:opacity var(--bx-dur-3) var(--bx-ease),transform var(--bx-dur-3) var(--bx-ease)}
  @media (prefers-reduced-motion:reduce){ .bx-reveal.bx-armed{opacity:1; transform:none} }

  /* section progress dots (desktop) */
  .page-progress{position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:.7rem}
  .page-progress a{width:8px; height:8px; border-radius:50%; border:1px solid var(--bx-line); background:transparent; transition:background var(--bx-dur-1),border-color var(--bx-dur-1)}
  .page-progress a.is-on{background:var(--bx-accent); border-color:var(--bx-accent); box-shadow:0 0 8px var(--bx-accent)}
  @media (max-width:1100px){ .page-progress{display:none} }

  /* ============ HUD HERO (A+B hybrid, sticky; dark ink both modes) ============ */
  .hud-track{position:relative}
  .hud-track--sticky{height:200vh}
  .hud-track--sticky .hud-scene{position:sticky; top:0; height:100vh; min-height:600px; overflow:hidden}
  .hud-scene{--p:1; background:var(--bx-ink); color:var(--bx-ink-text)}
  .has-js .hud-scene{--p:0}
  .hud-stage{position:absolute; inset:0}
  .hud-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
  .pl{position:absolute; inset:0; will-change:transform}
  .hud-phosphor{position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:screen; opacity:.06; background:radial-gradient(60% 50% at 64% 46%,#52C796,transparent 70%)}
  .hud-scanlines{position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.45; background:repeating-linear-gradient(0deg,rgba(180,205,230,.05) 0 1px,transparent 1px 4px)}
  .hud-canopy{position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:screen; opacity:.5;
    background:radial-gradient(150% 80% at 72% -8%,rgba(120,200,180,.10),transparent 52%),radial-gradient(120% 60% at 80% 120%,rgba(200,162,76,.06),transparent 60%)}
  :root[data-theme="light"] .hud-canopy{opacity:.34}
  .hud-glassframe{position:absolute; inset:3.2%; pointer-events:none; z-index:2; border:1px solid rgba(150,180,214,.14); border-radius:14px;
    box-shadow:inset 0 0 60px -20px rgba(120,200,180,.18), inset 0 0 0 1px rgba(120,200,180,.05)}
  .hud-vignette{position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 60% 38%,transparent 40%,rgba(6,16,31,.6) 100%)}
  .hud-glow{filter:drop-shadow(0 0 3px rgba(200,162,76,.45))}
  :root[data-theme="light"] .hud-glow{filter:none}

  .hud-svg .ln{stroke:var(--hud-line); fill:none; stroke-width:1}
  .hud-svg .ln-faint{stroke:var(--hud-line-faint); fill:none; stroke-width:1}
  .hud-svg .gold{stroke:var(--hud-gold); fill:none}
  .hud-svg .steel{stroke:var(--hud-steel); fill:none}
  .hud-svg .green{stroke:var(--hud-green); fill:none}
  .hud-svg .fill-gold{fill:var(--hud-gold); stroke:none}
  .hud-svg .fill-green{fill:var(--hud-green); stroke:none}
  .hud-svg text{fill:var(--hud-readout); font-family:var(--bx-font-mono); font-size:13px; letter-spacing:.12em}
  .hud-svg text.t-gold{fill:var(--hud-gold-t)} .hud-svg text.t-steel{fill:var(--hud-steel)} .hud-svg text.t-green{fill:var(--hud-green)}

  /* rc.5 choreography (driven by --p): acquire → interpret → stabilise → resolve → source */
  .hud-heading{transform:translateX(calc((0.5 - var(--p)) * 70px)) rotate(var(--phr,0deg))}
  .hud-horizon{transform-box:view-box; transform-origin:760px 400px; transform:translateY(calc(max(0,(0.5 - var(--p))) * 46px)) rotate(calc(max(-1,(0.55 - var(--p))) * 11deg))}
  .hud-pitch{transform-box:view-box; transform-origin:760px 400px; transform:translateY(calc((0.5 - clamp(0,calc(var(--p)/0.6),1)) * 60px)) rotate(calc(max(-1,(0.55 - var(--p))) * 11deg))}
  .hud-frame{transform-box:fill-box; transform-origin:center; transform:rotate(calc(max(-1,(0.6 - var(--p))) * 8deg))}
  .hud-fov{transform-box:view-box; transform-origin:760px 400px; animation:hud-sweep 11s linear infinite; opacity:clamp(0,calc((var(--p) - .12) * 2.2),.5)}
  @keyframes hud-sweep{to{transform:rotate(360deg)}}
  .hud-brackets{transform-box:fill-box; transform-origin:center; transform:scale(calc(1.28 - clamp(0,calc(var(--p)/0.6),1) * 0.28)); opacity:calc(.3 + clamp(0,calc(var(--p)/0.6),1)*.7)}
  .r{opacity:clamp(0,calc((var(--p) - var(--t0)) * 5),1); transform:translateY(clamp(0px,calc((var(--t0) + .2 - var(--p)) * 60px),12px))}
  .hud-rq{opacity:clamp(0,calc((var(--t1) - var(--p)) * 4),1)}
  .hud-rv{opacity:clamp(0,calc((var(--p) - var(--t1)) * 5),1)}
  .hud-signal{stroke-dasharray:6 10; stroke-dashoffset:calc((1 - var(--p)) * 70); opacity:calc(.28 + var(--p)*.5)}
  .hud-resolved{opacity:clamp(0,calc((var(--p) - .72) * 4),1)}
  .hud-acq{opacity:clamp(0,calc((.5 - var(--p)) * 3),1)}

  /* rc.6 — procurement beacon: rotating scanner, sparse signal returns, confirmation pulse (resolves with --p) */
  .bx-rings circle{stroke:var(--hud-line-faint); fill:none; stroke-width:1}
  .hud-beam{transform-box:view-box; transform-origin:760px 400px; animation:bx-scan 14s linear infinite; opacity:clamp(0,calc((var(--p) - .04) * 2.6),.55)}
  @keyframes bx-scan{to{transform:rotate(360deg)}}
  .hud-beam .beam-edge{stroke:var(--hud-steel); stroke-width:1.4; opacity:.55}
  .bx-ret{opacity:clamp(0,calc((var(--p) - var(--rt)) * 6),1); transform:translate(calc((1 - clamp(0,calc(var(--p)/(var(--rt) + .26)),1)) * 8px), calc((1 - clamp(0,calc(var(--p)/(var(--rt) + .26)),1)) * -6px))}
  .bx-ret .ret-ring{opacity:.5}
  .hud-confirm-gate{opacity:clamp(0,calc((var(--p) - .82) * 4),1)}
  .hud-confirm{transform-box:view-box; transform-origin:760px 400px; animation:bx-confirm 2.6s ease-out infinite}
  @keyframes bx-confirm{0%{transform:scale(.55); opacity:0}28%{opacity:.7}100%{transform:scale(1.5); opacity:0}}
  /* rc.6 — cursor optical-depth layers ("instrument glass"); vars set by home.js, default 0 (no-JS/mobile/reduced-motion → static) */
  .hud-beacon{transform:translate(var(--pbx,0px),var(--pby,0px))}
  .hud-core{transform:translate(var(--pcx,0px),var(--pcy,0px))}
  .hud-glassframe,.hud-canopy{transform:translate(var(--pgx,0px),var(--pgy,0px))}

  .hud-readout-tr,.hud-readout-br{position:absolute; font-family:var(--bx-font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--hud-readout); line-height:1.7; z-index:3}
  .hud-readout-tr{top:calc(var(--bx-header-offset,76px) + 14px); right:var(--bx-gutter); text-align:right}
  .hud-readout-br{bottom:18px; right:var(--bx-gutter); text-align:right}
  .hud-readout-br b{color:var(--hud-gold-t); font-weight:600}
  .hud-stat{display:inline-flex; align-items:center; gap:.4rem}
  .hud-stat::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--hud-steel)}
  .hud-stat--match::before{background:var(--hud-green); box-shadow:0 0 8px var(--hud-green)}
  @media (max-width:1199px){ .hud-readout-tr,.hud-readout-br{display:none} }
  @media (max-width:1024px){ .hud-fov{display:none} }

  .hud-content{position:absolute; inset:0; z-index:4; display:flex; align-items:center; max-width:var(--bx-wide); margin-inline:auto; padding-inline:var(--bx-gutter)}
  .hud-hero{max-width:42rem; transition:opacity 80ms linear; opacity:1; position:relative}
  /* B — protected instrument-glass plate: guarantees headline contrast over the HUD at every scroll position */
  .hud-hero--plate::before{content:""; position:absolute; inset:-22px -30px -18px -30px; z-index:-1; border-radius:16px;
    background:linear-gradient(105deg, rgba(6,16,31,.74), rgba(6,16,31,.34) 66%, transparent); border:1px solid rgba(120,200,180,.10);
    -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent); mask-image:linear-gradient(90deg,#000 60%,transparent)}
  @supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .hud-hero--plate::before{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px) } }
  .has-js .hud-hero--persist{opacity:clamp(.2,calc((.94 - var(--p)) * 3),1)}
  .hud-hero__eyebrow{color:var(--bx-ink-muted)}
  .hud-pulse{width:8px; height:8px; border-radius:50%; background:var(--bx-accent); flex:none; box-shadow:0 0 0 0 rgba(200,162,76,.5); animation:bxpulse 2.6s var(--bx-ease) infinite}
  @keyframes bxpulse{0%{box-shadow:0 0 0 0 rgba(200,162,76,.45)}70%{box-shadow:0 0 0 12px rgba(200,162,76,0)}100%{box-shadow:0 0 0 0 rgba(200,162,76,0)}}
  /* rc.2 fix for Defect 2 — homepage-specific hero scale (global --bx-fs-hero
     reached ~96px and dominated). Tuned in a real browser at the HUD column
     width so "Technical procurement" holds on one line (no single-word orphans)
     and the headline clears the HUD core symbology: ~27px @390 → ~39px @1024 →
     ~47px @1440 → ~53px cap. text-wrap:balance evens the lines. */
  .hud-hero__title{font-size:clamp(1.6rem, 1.2rem + 1.95vw, 3.3rem); max-width:20ch; color:var(--bx-ink-text); letter-spacing:-.01em; line-height:1.06; text-wrap:balance}
  .hud-hero__title b{color:var(--bx-accent); font-weight:650}
  .hud-hero__sub{margin-top:1.1rem; max-width:42ch; font-size:var(--bx-fs-lg); color:var(--bx-ink-text-2)}
  .hud-actions{margin-top:1.8rem; display:flex; gap:.9rem; flex-wrap:wrap}
  /* rc.7a.1 — hero secondary-CTA compatibility correction (light-mode legibility).
     The hero band is invariant-dark ink in BOTH modes, but the generic .btn--ghost
     foreground is mode-aware (--bx-contrast → #0E2238 in light/System-light), which
     renders dark-on-dark (~1.1:1). Scope the hero ghost CTA to invariant-light
     foregrounds — identical to its already-correct dark-mode appearance — so the
     label + arrow are legible in every mode. Size, transparent background, border
     model, depth and interaction are unchanged; the primary cream-on-gold RFQ
     button stays visually distinct (white-on-ghost vs cream-on-gold). The arrow
     inherits color. Narrow correction — not a hero redesign. */
  .hud-actions .btn--ghost{ color: var(--bx-ink-text); }
  .hud-actions .btn--ghost:hover{ color: var(--bx-accent); border-color: var(--bx-accent); }
  .hud-actions .btn--ghost:focus-visible{ box-shadow: 0 0 0 3px var(--bx-accent); }  /* invariant-gold focus ring, clearly visible on the dark band in all modes */
  .hud-scrollhint{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:5; font-family:var(--bx-font-mono); font-size:.64rem; letter-spacing:.16em; color:var(--hud-readout); opacity:calc(1 - var(--p)*3)}
  @media (prefers-reduced-motion:reduce){ .hud-pulse{animation:none} .hud-fov{animation:none} .hud-beam,.hud-confirm{animation:none} .hud-heading,.hud-horizon,.hud-pitch,.hud-frame,.hud-beacon,.hud-core,.hud-glassframe,.hud-canopy{transform:none} }
  @media (max-width:760px){ .hud-beam{animation-duration:30s} .bx-rings circle:nth-child(3){display:none} .bx-returns .bx-ret:nth-child(n+3){display:none} }
  @media (prefers-reduced-motion:no-preference){ .has-js [data-hud-fg]{animation:hud-drift 9s ease-in-out infinite alternate} @keyframes hud-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(6px,-4px,0)}} }

  /* Option C aperture seam (dark hero → light page) */
  /* rc.5 — engineered dark→light handoff: aperture + glowing artificial-horizon wipe */
  .seam--aperture{position:relative; height:96px; background:var(--bx-ink); overflow:hidden; z-index:3}
  .seam--aperture::before{content:""; position:absolute; inset:0; background:var(--bx-bg-page); -webkit-clip-path:polygon(0 100%,50% 6%,100% 100%); clip-path:polygon(0 100%,50% 6%,100% 100%)}
  .seam--aperture::after{content:""; position:absolute; left:50%; top:10px; transform:translateX(-50%); width:min(42%,520px); height:2px; background:linear-gradient(90deg,transparent,var(--hud-green,#52C796),var(--bx-accent),var(--hud-green,#52C796),transparent); box-shadow:0 0 14px var(--bx-accent)}
  .seam--aperture .seam__tick{position:absolute; left:50%; bottom:9px; transform:translateX(-50%); z-index:1; font-family:var(--bx-font-mono); font-size:.58rem; letter-spacing:.18em; color:var(--bx-text-muted)}

  /* ============ 2 · POSITIONING — connected requirement→resolved path (v0.3.3) ============
     A rail runs Requirement → across three glass risk cards → into one green
     documented outcome. Each card bead resolves steel→green in sequence as --pp
     advances (per-card threshold via --i); the rail draws green; the outcome
     lights. DEFAULT --pp:1 (resolved) → no-JS / reduced-motion / JS-failure all
     render the fully resolved frame (fail-visible). Rail + glyphs are decorative
     (aria-hidden); cards + outcome text are the source of truth. Pure CSS off one
     var (--pp) — no per-frame JS, no idle loops, no layout shift. */
  .rp{ --pp:1 }
  .rp-flow{ margin-top:clamp(1.4rem,3vw,2.3rem) }

  .rp-origin{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem }
  .rp-origin__dot{ width:10px; height:10px; border-radius:50%; background:var(--hud-steel); box-shadow:0 0 0 4px color-mix(in oklab,var(--hud-steel) 18%,transparent) }
  .rp-origin__label{ font-family:var(--bx-font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bx-text-2) }

  /* rail row — shares the cards' 3-col grid so beads sit above card centres (no pixel math) */
  .rp-track{ position:relative }
  .rp-rail{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; height:20px; margin-bottom:.55rem }
  .rp-rail__line{ position:absolute; left:calc(100%/6); right:calc(100%/6); top:50%; height:2px; transform:translateY(-1px); background:var(--bx-line); border-radius:2px; overflow:hidden }
  .rp-rail__fill{ position:absolute; inset:0; transform-origin:left center; transform:scaleX(var(--pp)); background:linear-gradient(90deg,color-mix(in oklab,var(--hud-green) 65%,transparent),var(--hud-green)); box-shadow:0 0 7px color-mix(in oklab,var(--hud-green) 45%,transparent); transition:transform .6s var(--bx-ease) }
  .rp-bead{ justify-self:center; position:relative; z-index:1; width:12px; height:12px; border-radius:50%;
    --th:calc(.30 + var(--i) * .22); --on:clamp(0, (var(--pp) - var(--th)) * 6, 1);
    background:color-mix(in oklab, var(--hud-green) calc(var(--on) * 100%), var(--hud-steel));
    box-shadow:0 0 0 4px color-mix(in oklab, var(--hud-green) calc(var(--on) * 24%), transparent);
    transition:background .4s var(--bx-ease), box-shadow .4s var(--bx-ease) }

  /* glass risk cards — the readable, no-JS, screen-reader source of truth */
  .rp-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2.2vw,1.5rem) }
  .rp-card{ position:relative; display:flex; flex-direction:column; gap:.4rem; padding:1.1rem 1.15rem; border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg); background:var(--bx-surface); transition:border-color .25s var(--bx-ease), background .25s var(--bx-ease), transform .25s var(--bx-ease) }
  .rp-card:hover, .rp-card:focus-within{ border-color:color-mix(in oklab,var(--hud-green) 42%,var(--bx-surface-border)); background:var(--bx-surface-elev); transform:translateY(-2px) }
  .rp-card__glyph{ display:block }
  .rp-card__glyph svg{ display:block; width:72px; height:40px; overflow:visible }
  .rp-card__glyph .g-rail{ stroke:var(--bx-line); stroke-width:1.4; fill:none }
  .rp-card__glyph .g-doc{ stroke:var(--hud-steel); stroke-width:1.2; fill:none }
  .rp-card__glyph .g-line{ stroke:var(--hud-steel); stroke-width:1; fill:none }
  .rp-card__glyph .g-warn{ stroke:var(--bx-warning); stroke-width:1.4; fill:none; stroke-linecap:round }
  .rp-card__glyph .g-tw{ fill:var(--bx-warning); font-family:var(--bx-font-mono) }
  .rp-card__glyph .g-seat{ fill:var(--hud-green); --th:calc(.30 + var(--i)*.22); opacity:clamp(0,(var(--pp)-var(--th))*6,1); transition:opacity .4s var(--bx-ease) }
  .rp-card__glyph .g-warn, .rp-card__glyph .g-tw{ --th:calc(.30 + var(--i)*.22); opacity:clamp(0,(var(--th)+.18 - var(--pp))*6,1); transition:opacity .4s var(--bx-ease) }
  .rp-card__glyph .g-conv{ --th:calc(.30 + var(--i)*.22); --k:clamp(0,(var(--pp)-var(--th))*6,1); transform:translate(calc(var(--gx,0)*(1 - var(--k))*1px), calc(var(--gy,0)*(1 - var(--k))*1px)); transition:transform .4s var(--bx-ease) }
  .rp-card__n{ font-family:var(--bx-font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--bx-accent-strong) }
  .rp-card__t{ margin:0; font-size:1.06rem; font-weight:650; line-height:1.22; color:var(--bx-text) }
  .rp-card__d{ margin:0; color:var(--bx-text-2); font-size:.93rem }
  .rp-card__more{ margin-top:.1rem }
  .rp-card__more summary{ cursor:pointer; color:var(--bx-accent-strong); font-family:var(--bx-font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; list-style:none }
  .rp-card__more summary::-webkit-details-marker{ display:none } .rp-card__more summary::after{ content:" +" } .rp-card__more[open] summary::after{ content:" –" }
  .rp-card__more p{ margin:.5rem 0 0; color:var(--bx-text-muted); font-size:.88rem; max-width:40ch }

  /* outcome — the resolved green payoff (lights at high --pp) */
  .rp-outcome{ --o:clamp(0,(var(--pp) - .62) * 3, 1); margin-top:1.4rem; display:flex; align-items:center; gap:.8rem; padding:.85rem 1.15rem; border-radius:var(--bx-radius-lg); border:1px solid color-mix(in oklab,var(--hud-green) calc(var(--o)*55%),var(--bx-surface-border)); background:color-mix(in oklab,var(--hud-green) calc(var(--o)*9%),var(--bx-surface)); transition:border-color .5s var(--bx-ease), background .5s var(--bx-ease) }
  .rp-outcome__dot{ flex:0 0 auto; width:12px; height:12px; border-radius:50%; background:var(--hud-green); box-shadow:0 0 0 5px color-mix(in oklab,var(--hud-green) calc(var(--o)*26%),transparent), 0 0 11px color-mix(in oklab,var(--hud-green) 55%,transparent) }
  .rp-outcome__t{ margin:0; display:flex; flex-direction:column; line-height:1.25 }
  .rp-outcome__t b{ color:var(--bx-text); font-size:1.05rem; font-weight:700 }
  .rp-outcome__sub{ margin-top:.12rem; color:var(--bx-text-muted); font-family:var(--bx-font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase }

  /* ============ 3 · CAPABILITIES — selector + seven worlds (rc.7a, C2 "dimensional") ============
     One reusable world framework: faint grid + translucent depth plane frame
     pillar-specific geometry, one signal trace, accent nodes + a doc cue. Only
     the ACTIVE world is in flow and animates (one-shot reveal — zero idle motion).
     Selected state is NOT colour-only (bg + left bar + dot scale + name weight). */
  .cap-wrap{display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:clamp(1.2rem,3vw,2rem); margin-top:2.5rem; align-items:stretch}
  .cap-select{list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:.25rem}
  .cap-select::before{content:""; position:absolute; left:15px; top:24px; bottom:24px; width:1px; background:var(--bx-line); z-index:0}
  .cap-opt{position:relative; z-index:1; width:100%; display:grid; grid-template-columns:30px auto 1fr; align-items:center; gap:.7rem; text-align:left; background:transparent; border:1px solid transparent; border-radius:var(--bx-radius); padding:.6rem .7rem; cursor:pointer; font:inherit; color:var(--bx-text-2); transition:background var(--bx-dur-1),border-color var(--bx-dur-1),color var(--bx-dur-1)}
  .cap-opt__dot{width:13px; height:13px; border-radius:50%; justify-self:center; background:hsl(var(--h) 60% 52%); box-shadow:0 0 0 3px hsl(var(--h) 60% 52% / .16); transition:box-shadow var(--bx-dur-1),transform var(--bx-dur-1)}
  .cap-opt__num{font-family:var(--bx-font-mono); font-size:.72rem; color:var(--bx-text-muted)}
  .cap-opt__name{font-weight:600; color:var(--bx-text-2); line-height:1.25}
  .cap-opt:hover{background:var(--bx-surface); border-color:var(--bx-surface-border)}
  .cap-opt:focus-visible{outline:none; box-shadow:var(--bx-focus)}
  .cap-opt[aria-pressed="true"]{background:var(--bx-surface); border-color:hsl(var(--h) 60% 52% / .55)}
  .cap-opt[aria-pressed="true"] .cap-opt__name{color:var(--bx-text)}
  .cap-opt[aria-pressed="true"] .cap-opt__dot{transform:scale(1.25); box-shadow:0 0 0 4px hsl(var(--h) 60% 52% / .22),0 0 14px hsl(var(--h) 60% 52% / .55)}
  .cap-opt[aria-pressed="true"]::before{content:""; position:absolute; left:-1px; top:16%; bottom:16%; width:3px; border-radius:3px; background:hsl(var(--h) 60% 52%)} /* non-colour-only selected cue */
  .cap-panel{border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg); background:var(--bx-surface); padding:clamp(1.3rem,3vw,2rem); display:flex; flex-direction:column; position:relative; overflow:hidden}
  .cap-panel::before{content:""; position:absolute; inset:0 0 auto auto; width:66%; height:70%; background:radial-gradient(circle at 100% 0,hsl(var(--h) 60% 52% / .15),transparent 70%); pointer-events:none}
  .cap-worlds{position:relative; height:170px; margin-bottom:1rem; z-index:1}
  .cap-world{position:absolute; inset:0; display:none} .cap-world.is-active{display:block}
  .cap-world svg{width:100%; height:170px; display:block}
  /* shared world grammar (hue-driven, mode-aware) */
  .cap-world .cw-grid{stroke:hsl(var(--h) 30% 60% / .12); stroke-width:1; fill:none}
  .cap-world .cw-plane{fill:hsl(var(--h) 60% 50% / .06); stroke:hsl(var(--h) 55% 55% / .18); stroke-width:1}
  .cap-world .s{stroke:hsl(var(--h) 60% 60%); fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}
  .cap-world .sf{stroke:hsl(var(--h) 48% 54% / .42); fill:none; stroke-width:1; stroke-linecap:round}
  .cap-world .f{fill:hsl(var(--h) 66% 60%); stroke:none}
  .cap-world .cw-trace{stroke:hsl(var(--h) 72% 66%); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--len,200); stroke-dashoffset:0}
  .cap-world .cw-settle{opacity:1}
  .cap-world .cw-doc rect{stroke:hsl(var(--h) 40% 60% / .5); fill:none; stroke-width:1} .cap-world .cw-doc path{stroke:hsl(var(--h) 40% 60% / .5); stroke-width:1; fill:none}
  :root[data-theme="light"] .cap-world .s{stroke:hsl(var(--h) 55% 38%)}
  :root[data-theme="light"] .cap-world .f{fill:hsl(var(--h) 55% 40%)}
  :root[data-theme="light"] .cap-world .sf{stroke:hsl(var(--h) 40% 42% / .55)}
  :root[data-theme="light"] .cap-world .cw-trace{stroke:hsl(var(--h) 60% 42%)}
  :root[data-theme="light"] .cap-world .cw-grid{stroke:hsl(var(--h) 30% 40% / .12)}
  :root[data-theme="light"] .cap-world .cw-plane{fill:hsl(var(--h) 55% 55% / .08); stroke:hsl(var(--h) 45% 45% / .22)}
  /* shared one-shot motion — only the active world animates (no idle/infinite motion) */
  @keyframes cw-trace{from{stroke-dashoffset:var(--len,200)}to{stroke-dashoffset:0}}
  @keyframes cw-settle{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
  @keyframes cw-spin1{from{transform:rotate(-26deg)}to{transform:rotate(0)}}
  .cap-world.is-active .cw-trace{animation:cw-trace .75s var(--bx-ease) both}
  .cap-world.is-active .cw-settle{animation:cw-settle .5s var(--bx-ease) both; transform-box:fill-box; transform-origin:center}
  .cap-world.is-active .cw-spin1{animation:cw-spin1 .8s var(--bx-ease) both; transform-box:fill-box; transform-origin:var(--cx,98px) var(--cy,76px)}
  .cap-panel__num{font-family:var(--bx-font-mono); color:var(--bx-accent-strong); font-size:.8rem; position:relative; z-index:1}
  .cap-panel__t{font-size:clamp(1.25rem,2.3vw,1.65rem); margin:.4rem 0 .55rem; max-width:22ch; position:relative; z-index:1}
  .cap-panel__d{color:var(--bx-text-2); position:relative; z-index:1}
  .cap-panel__link{margin-top:auto; padding-top:1.2rem; color:var(--bx-accent-strong); font-weight:600; text-decoration:none; display:inline-flex; gap:.4rem; align-items:center; position:relative; z-index:1}
  .cap-panel__link:focus-visible{outline:none; box-shadow:var(--bx-focus); border-radius:4px}
  .cap-strip{display:none}

  /* ============ 4 · PRODUCT DISCOVERY — two routes, one ecosystem (rc.7b · PD1) ============
     A forked route (decorative SVG) over two self-contained lane cards + a 4-mode
     hybrid legend. Route meaning is carried in TEXT (lane tags + unify line) so it
     survives no-JS / mobile / screen readers; the SVG is aria-hidden + hidden ≤860.
     Legend markers are SHAPE-distinct (not colour-only). All CTAs are real routes. */
  .pd-router{margin-top:2rem; position:relative}
  .rt-svg{display:block; width:100%; height:auto}
  .rt-svg .ln{stroke:var(--hud-steel); stroke-width:1.4; fill:none; stroke-linecap:round}
  .rt-svg .gold{stroke:var(--bx-accent); stroke-width:1.6; fill:none; stroke-linecap:round}
  .rt-svg .fs{fill:var(--hud-steel)} .rt-svg .fgold{fill:var(--bx-accent)}
  .rt-svg .t-mut{fill:var(--bx-text-muted); font-family:var(--bx-font-mono); font-size:11px}
  .rt-svg .t-steel{fill:var(--hud-steel); font-family:var(--bx-font-mono); font-size:11px}
  .rt-svg .t-gold{fill:var(--bx-accent-strong); font-family:var(--bx-font-mono); font-size:11px}
  /* one-time route draw on reveal; DEFAULT fully drawn (fail-visible / no-JS / reduced-motion) */
  .rt-draw{stroke-dasharray:var(--len,340); stroke-dashoffset:0}
  .site-main.home .bx-reveal.bx-armed.bx-in .rt-draw{animation:pd-draw .9s var(--bx-ease) both}
  @keyframes pd-draw{from{stroke-dashoffset:var(--len,340)}to{stroke-dashoffset:0}}
  .pd-lanes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.6rem); margin-top:1.2rem; align-items:stretch}
  .pd-lane{border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg); background:var(--bx-surface); padding:clamp(1.2rem,2.5vw,1.6rem); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.7rem}
  .pd-lane::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pd-accent,var(--bx-accent))}
  .pd-lane--cat{--pd-accent:var(--hud-steel)} .pd-lane--rfq{--pd-accent:var(--bx-accent)}
  .pd-lane__tag{font-family:var(--bx-font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bx-text-muted)}
  .pd-lane__t{font-size:1.16rem; font-weight:650; line-height:1.2}
  .pd-lane__d{color:var(--bx-text-2); font-size:.94rem}
  .pd-lane__acts{margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.5rem}
  .pd-search{display:flex; flex-wrap:wrap; gap:.5rem; margin:.1rem 0}
  .pd-search input{flex:1 1 100%; min-width:0; padding:.85rem 1rem; border-radius:var(--bx-radius); border:1px solid var(--bx-field-border); background:var(--bx-bg-page); color:var(--bx-text); font:inherit} /* bg=page (off-white in light) so the field edge reads on the white lane card */
  .pd-search input::placeholder{color:var(--bx-placeholder)}
  .pd-search .btn{flex:0 0 auto}
  .pd-unify{display:flex; align-items:center; gap:.6rem; margin-top:1.3rem; color:var(--bx-text-2); font-size:.95rem}
  .pd-unify__dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--bx-accent); box-shadow:0 0 8px var(--bx-accent)}
  .pd-legend{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem; align-items:center}
  .pd-legend__label{font-family:var(--bx-font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-text-muted)}
  .pd-state{display:inline-flex; align-items:center; gap:.45rem; padding:.34rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600; border:1px solid var(--bx-surface-border); color:var(--bx-text-2); background:var(--bx-surface)}
  .pd-state::before{content:""; width:9px; height:9px; flex:none}
  .pd-state--buy{border-color:var(--bx-accent); color:var(--bx-accent-strong)} .pd-state--buy::before{border-radius:50%; background:var(--bx-accent-strong); box-shadow:0 0 8px var(--bx-accent)}     /* filled disc — AA gold fill (≥3:1 on the white pill in light) */
  .pd-state--quote::before{border-radius:50%; background:transparent; border:2px solid var(--bx-accent-strong)}                                                                            /* hollow ring */
  .pd-state--enquire::before{width:11px; height:3px; border-radius:2px; background:var(--bx-text-muted)}                                                                                   /* bar */
  .pd-state--soon{border-style:dashed} .pd-state--soon::before{border-radius:50%; background:transparent; border:1px dashed var(--bx-text-muted)}                                           /* dashed ring */
  .pd-note{color:var(--bx-text-muted); font-size:.86rem; margin-top:.7rem; max-width:72ch}

  /* ============ 5 · PROCUREMENT JOURNEY — controlled route (rc.7b · PJ1) ============
     Five numbered diamond stage-gates thread one gold rail (driven by home.js
     journey() via --jp + .is-on). Fail-visible: .jr-step.is-on default + --jp:1
     default keep all gates lit + the rail full with no JS / reduced motion.
     Distinct from P1: diamond gates + 01–05 numbering + directional arrow + gold
     rail (P1 = circular waypoints on a green resolving rail). */
  .jr-route{position:relative; margin-top:2.6rem}
  .jr-rail{position:absolute; left:17px; right:17px; top:17px; height:2px; background:var(--bx-line); z-index:0}
  .jr-rail__fill{position:absolute; left:0; top:0; height:100%; width:calc(var(--jp,1) * 100%); background:linear-gradient(90deg,var(--bx-accent-strong),var(--bx-accent)); box-shadow:0 0 8px var(--bx-accent); transition:width var(--bx-dur-3) var(--bx-ease)}
  .jr-rail__arrow{position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:8px solid var(--bx-accent); border-top:5px solid transparent; border-bottom:5px solid transparent; filter:drop-shadow(0 0 4px var(--bx-accent))}
  .jr-steps{position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; list-style:none; margin:0; padding:0}
  .jr-step{display:flex; flex-direction:column; gap:.4rem}
  .jr-node{width:34px; height:34px; border-radius:7px; transform:rotate(45deg); display:grid; place-items:center; flex:none; background:var(--bx-bg-page); border:2px solid var(--bx-text-muted)}
  .jr-node__n{transform:rotate(-45deg); font-family:var(--bx-font-mono); font-size:.72rem; color:var(--bx-text-2)}
  .jr-step.is-on .jr-node{border-color:var(--bx-accent-strong); box-shadow:0 0 0 4px color-mix(in oklab,var(--bx-accent) 18%,transparent)} /* accent-strong = AA gold (≥3:1) in both modes */
  .jr-step.is-on .jr-node__n{color:var(--bx-accent-strong)}
  .jr-k{font-family:var(--bx-font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bx-text-muted); margin-top:.7rem}
  .jr-t{font-weight:650; font-size:1.04rem; line-height:1.2}
  .jr-step summary{cursor:pointer; list-style:none; color:var(--bx-accent-strong); font-family:var(--bx-font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase}
  .jr-step summary::-webkit-details-marker{display:none} .jr-step summary::after{content:" +"} .jr-step details[open] summary::after{content:" –"}
  .jr-d{color:var(--bx-text-2); font-size:.92rem; margin-top:.4rem}

  /* ============ 6 · DOCUMENTATION — layered planes ============ */
  .dq{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:2.4rem; align-items:center}
  .dq__types{margin:1.1rem 0 .8rem} .dq__qual{color:var(--bx-text-muted); font-size:.9rem; max-width:46ch}
  .dq-stack{position:relative; min-height:420px}
  /* rc.4 — opaque cards (no bleed-through) WITH the three-message narrative restored.
     Depth = offset + stepped solid bg + border + shadow + a front>middle>rear text-
     contrast hierarchy. No element opacity on whole cards, NO blur on text. The
     increased vertical+horizontal stagger gives each card a readable title band at
     its top-left that the card in front never covers. */
  .dq-plane{position:absolute; border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg);
    background:light-dark(#FFFFFF,#14304F); box-shadow:0 16px 44px -22px rgba(0,0,0,.55); padding:1.05rem 1.2rem; overflow:hidden}
  .dq-plane--3{inset:0 30% 46% 0;    z-index:1; background:light-dark(#EEF2F8,#0F2240); border-color:var(--bx-line); box-shadow:0 8px 22px -16px rgba(0,0,0,.4)}
  .dq-plane--2{inset:27% 14% 23% 12%; z-index:2; background:light-dark(#F5F8FC,#163459)}
  .dq-plane--1{inset:54% 0 0 26%;    z-index:3; background:light-dark(#FFFFFF,#1B3D66); border-color:color-mix(in oklab,var(--bx-accent-strong) 55%,var(--bx-surface-border)); box-shadow:0 24px 64px -24px rgba(0,0,0,.62)}
  .dq-plane .rev{font-family:var(--bx-font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--bx-accent-strong)}
  .dq-plane--3 .rev,.dq-plane--2 .rev{color:var(--bx-text-muted)}
  .dq-plane .ttl{font-weight:650; margin-top:.3rem; line-height:1.2; color:var(--bx-text)}
  .dq-plane--3 .ttl{font-size:.98rem; color:var(--bx-text-2)}   /* rear: quiet but legible */
  .dq-plane--2 .ttl{font-size:1.04rem}                          /* middle: medium */
  .dq-plane--1 .ttl{font-size:1.16rem}                          /* front: dominant */
  .dq-plane .sub{margin-top:.3rem; font-size:.82rem; line-height:1.35; color:var(--bx-text-2)}
  .dq-plane--3 .sub{color:var(--bx-text-muted)}
  .dq-plane .ln{height:2px; border-radius:2px; background:var(--bx-line); margin:.55rem 0}
  .dq-plane .trace{font-family:var(--bx-font-mono); font-size:.66rem; color:var(--bx-text-muted)} .dq-plane .trace b{color:var(--bx-success)}

  /* ============ 7 · MARKETS — selector ============ */
  .mk{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2rem); margin-top:2.4rem; align-items:start}
  .mk-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; min-width:14rem}
  .mk-opt{width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:var(--bx-radius); padding:.7rem .9rem; cursor:pointer; font:inherit; color:var(--bx-text-2); display:flex; align-items:center; gap:.6rem; transition:background var(--bx-dur-1),border-color var(--bx-dur-1),color var(--bx-dur-1)}
  .mk-opt::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--bx-line)}
  .mk-opt:hover{background:var(--bx-surface)}
  .mk-opt[aria-pressed="true"]{background:var(--bx-surface); border-color:var(--bx-surface-border); color:var(--bx-text)}
  .mk-opt[aria-pressed="true"]::before{background:var(--bx-accent); box-shadow:0 0 8px var(--bx-accent)}
  .mk-panel{border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg); background:var(--bx-surface); padding:clamp(1.3rem,3vw,2rem); position:relative; overflow:hidden; min-height:200px}
  .mk-panel::before{content:""; position:absolute; inset:0 0 auto auto; width:55%; height:60%; background:radial-gradient(circle at 100% 0,rgba(200,162,76,.12),transparent 70%); pointer-events:none}
  .mk-panel__name{font-size:1.5rem; font-weight:650; position:relative}
  .mk-panel__note{color:var(--bx-text-2); margin-top:.6rem; max-width:48ch; position:relative}
  .mk-panel__link{margin-top:1rem; display:inline-flex; gap:.4rem; color:var(--bx-accent-strong); font-weight:600; text-decoration:none; position:relative}

  /* ============ 8 · KNOWLEDGE CENTRE — editorial ============ */
  .kc2{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.2rem,3vw,2rem); margin-top:2.4rem}
  .kc2-feature{grid-row:span 2; border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg); background:var(--bx-surface); padding:clamp(1.4rem,3vw,2.2rem); text-decoration:none; color:inherit; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:border-color var(--bx-dur-1),transform var(--bx-dur-1)}
  .kc2-feature:hover,.kc2-card:hover{border-color:var(--bx-accent); transform:translateY(-2px)}
  .kc2-feature::before{content:""; position:absolute; inset:0 0 auto auto; width:60%; height:55%; background:radial-gradient(circle at 100% 0,rgba(200,162,76,.12),transparent 70%)}
  .kc2-kick{font-family:var(--bx-font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bx-accent-strong)}
  .kc2-feature__t{font-size:clamp(1.4rem,1.1rem+1.4vw,2rem); margin:.5rem 0 .6rem; max-width:22ch; position:relative}
  .kc2-feature__d{color:var(--bx-text-2); position:relative; max-width:52ch}
  .kc2-feature__more{margin-top:auto; padding-top:1.2rem; color:var(--bx-accent-strong); font-weight:600; position:relative}
  .kc2-card{border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius); background:var(--bx-surface); padding:1.1rem 1.2rem; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:.3rem; transition:border-color var(--bx-dur-1),transform var(--bx-dur-1)}
  .kc2-card__t{font-weight:650; font-size:1.02rem} .kc2-card__d{color:var(--bx-text-2); font-size:.9rem}
  .kc2-paths{margin-top:1.6rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

  /* ============ 9 · CLOSING RFQ / intake ============ */
  .cr{position:relative; overflow:hidden}
  .cr__panel{border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius-lg); background:var(--bx-surface); padding:clamp(1.6rem,4vw,3rem); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; position:relative; overflow:hidden}
  .cr__panel::before{content:""; position:absolute; inset:auto auto -30% -10%; width:60%; height:120%; background:radial-gradient(circle at 0 100%,rgba(200,162,76,.14),transparent 70%); pointer-events:none}
  .cr__title{font-size:clamp(1.8rem,1.3rem+2vw,2.8rem); max-width:18ch; position:relative}
  .cr__body{margin-top:1rem; color:var(--bx-text-2); max-width:46ch; position:relative}
  .cr__actions{margin-top:1.6rem; position:relative}
  .cr__send-label{font-family:var(--bx-font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bx-text-muted); margin-bottom:.7rem}
  .cr__cues{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
  .cr__cue{display:flex; align-items:flex-start; gap:.5rem; font-size:.92rem; color:var(--bx-text-2)}
  .cr__cue::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--bx-accent); margin-top:.5rem; flex:none}

  /* ============ responsive ============ */
  @media (max-width:860px){
    .rp-cards{grid-template-columns:1fr; gap:.9rem} .rp-rail{display:none}
    /* vertical-flow connection on mobile: each stacked card's left edge resolves steel→green in sequence */
    .rp-card{border-left:3px solid color-mix(in oklab, var(--hud-green) calc(clamp(0,(var(--pp) - (.30 + var(--i)*.22)) * 6,1) * 100%), var(--hud-steel))}
    .cap-wrap{grid-template-columns:1fr} .cap-select,.cap-panel{display:none}
    .cap-world .cw-grid{display:none}  /* suppress depth grid on narrow viewports (cap-panel hidden, but keep rule for tablet panel) */
    .cap-strip{display:flex; gap:.8rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem; -webkit-overflow-scrolling:touch}
    .cap-strip .cap-card{scroll-snap-align:start; flex:0 0 80%; border:1px solid var(--bx-surface-border); border-radius:var(--bx-radius); background:var(--bx-surface); padding:1.1rem; position:relative; overflow:hidden}
    .cap-strip .cap-card::before{content:""; position:absolute; inset:0 0 auto auto; width:55%; height:55%; background:radial-gradient(circle at 100% 0,hsl(var(--h) 60% 52% / .16),transparent 70%)}
    .cap-strip .cap-card b{display:block; font-size:1.02rem; margin:.2rem 0 .4rem} .cap-strip .cap-card span{color:var(--bx-text-2); font-size:.9rem}
    .pd-lanes{grid-template-columns:1fr} .rt-svg.pd-router__svg{display:none}
    .jr-rail{left:17px; right:auto; top:0; bottom:0; width:2px; height:auto} .jr-rail__fill{width:100%; height:calc(var(--jp,1) * 100%)}
    .jr-rail__arrow{right:auto; left:17px; top:auto; bottom:-1px; transform:translateX(-50%) rotate(90deg)}
    .jr-steps{grid-template-columns:1fr; gap:1.4rem}
    /* mobile: diamond in a left gutter, content indented clear of the rail spine */
    .jr-step{display:grid; grid-template-columns:34px 1fr; column-gap:1rem; align-items:start}
    .jr-step .jr-node{grid-column:1; grid-row:1 / span 4}
    .jr-step .jr-k,.jr-step .jr-t,.jr-step details{grid-column:2}
    .jr-step .jr-k{margin-top:.15rem}
    .dq,.mk,.kc2,.cr__panel{grid-template-columns:1fr} .dq-stack{min-height:240px} .cr__cues{grid-template-columns:1fr}
    .mk-list{flex-direction:row; flex-wrap:wrap; min-width:0} .mk-opt{width:auto}
    .kc2-feature{grid-row:auto}
    .seam--aperture{height:56px}
  }
  @media (max-width:760px){
    .hud-track--sticky{height:auto}
    .hud-track--sticky .hud-scene{position:relative; height:auto; min-height:100svh; padding-block:5rem}
    .hud-content{position:relative; display:block}
    .hud-hero{position:relative; max-width:none} .hud-svg{opacity:.9}
    .hud-scrollhint{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .hud-scene{--p:1 !important}
    .hud-track--sticky{height:auto} .hud-track--sticky .hud-scene{position:relative; height:auto; min-height:100svh}
    .hud-content{position:relative; display:block; padding-block:4rem} .hud-hero{opacity:1}
    .r,.hud-rv,.hud-resolved,.hud-signal{opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important}
    /* rc.7a: positioning + capability worlds compose to their resolved/static frame */
    .rp{--pp:1 !important}
    .cap-world.is-active .cw-trace,.cap-world.is-active .cw-settle,.cap-world.is-active .cw-spin1{animation:none}
  }

  /* ---- Documentation stack responsive (rc.4) — placed last so it wins ---- */
  @media (max-width:980px){  /* tablet: reduced overlap, all three titles readable */
    .dq-stack{min-height:390px}
    .dq-plane--3{inset:0 24% 54% 0}
    .dq-plane--2{inset:30% 12% 22% 9%}
    .dq-plane--1{inset:60% 0 0 18%}
  }
  @media (max-width:680px){  /* mobile: vertical stack — all three messages in full */
    .dq-stack{position:static; min-height:0; display:flex; flex-direction:column; gap:.7rem}
    .dq-plane{position:static; inset:auto; box-shadow:0 10px 28px -18px rgba(0,0,0,.5)}
  }
}