/* =============================================================
   brief.css — the Product Brief tier's shared component layer.
   Loaded AFTER site.css, by product-briefs/*.html only.
   Extracted per /design-guide §08 (Fix 1) with the Fix 2 renames:
     .tbl → .af-tbl · .stack-viz/.layer → .af-stack/.af-layer ·
     .metric-strip → .af-metrics · .cta-band gains an .af modifier.
   B1/B2/B3 ledger treatments (.claim-ledger, .brief-cols,
   .capledger, .evidence) + .j-* jewels + sanctioned P4 .flowstrip
   and P6 .receipt live here — promoted from design-guide.css.
   Truly bespoke styles stay page-local in each brief.
   ============================================================= */

/* ───────── Masthead ───────── */
.masthead{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg-alt); border-bottom:1px solid var(--border); }
.masthead .mh-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.masthead .mh-clear{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(10,7,18,.78),rgba(10,7,18,.5) 40%,rgba(10,7,18,.82)); }
.masthead .container{ position:relative; z-index:2; padding-top:26px; padding-bottom:42px; }

.crumbs{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fg3); margin-bottom:22px; flex-wrap:wrap; }
.crumbs a{ color:var(--fg3); }
.crumbs a:hover{ color:var(--accent-hover); }
.crumbs .here{ color:var(--fg2); }
.crumbs .sep{ color:var(--fg3); opacity:.6; }

.back-link{ display:flex; width:fit-content; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--accent); margin-bottom:30px; }
.back-link i{ width:15px; height:15px; }
.back-link:hover{ color:var(--accent-hover); }

.eyebrow-pill{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:600; padding:6px 13px; border:1px solid var(--border-strong); border-radius:999px; background:var(--accent-muted); }
.eyebrow-pill .dot{ width:5px; height:5px; border-radius:999px; background:var(--accent); box-shadow:0 0 8px var(--accent); }

.mh-title{ font-size:clamp(38px,5.4vw,62px); font-weight:700; letter-spacing:-0.03em; line-height:1.03; margin:20px 0 0; max-width:14ch; }
.mh-def{ font-size:19px; line-height:1.55; color:var(--bud-haze); max-width:680px; margin:20px 0 0; }
.mh-meta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:26px 0 0; font-size:12px; font-family:var(--font-mono); color:var(--fg3); letter-spacing:.02em; }
.mh-meta .pill{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px; padding:6px 12px; }
.mh-meta .pill i{ width:13px; height:13px; color:var(--accent); }
.mh-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0; }

.mh-split{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; }
.demo-frame{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; color:var(--fg3); font-size:13px; box-shadow:var(--shadow-3); }

/* ───────── Sticky section nav (pins at top:0 — site nav scrolls away) ───────── */
.sec-nav{ position:sticky; top:var(--nav-h, 0px); z-index:90; background:rgba(18,14,28,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.sec-nav-inner{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.sec-nav-inner::-webkit-scrollbar{ display:none; }
.sn-link{ position:relative; flex:0 0 auto; padding:15px 14px; font-size:13px; font-weight:600; color:var(--fg3); white-space:nowrap; letter-spacing:.01em; }
.sn-link .sn-no{ font-family:var(--font-mono); font-size:11px; color:var(--fg3); margin-right:7px; opacity:.7; }
.sn-link:hover{ color:var(--fg1); }
.sn-link::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--duration-md) var(--ease-out-expo); }
.sn-link.is-active{ color:var(--fg1); }
.sn-link.is-active .sn-no{ color:var(--accent); opacity:1; }
.sn-link.is-active::after{ transform:scaleX(1); }

/* ───────── Section rhythm ───────── */
.af-sec{ padding:84px 0; border-top:1px solid var(--border); scroll-margin-top:calc(var(--nav-h, 0px) + 72px); } /* clears sticky header + sec-nav */
.af-sec:first-of-type{ border-top:0; }
.af-head{ max-width:780px; }
.af-eyebrow{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; }
.af-eyebrow .sec-no{ font-family:var(--font-mono); color:var(--fg3); letter-spacing:.1em; }
.af-sec h2{ font-size:clamp(31px,4.4vw,48px); letter-spacing:-0.03em; line-height:1.05; margin:0; font-weight:700; color:var(--fg1); }
.af-lede{ font-size:18px; line-height:1.55; color:var(--bud-haze); max-width:680px; margin:18px 0 0; }
.opt-tag{ display:inline-block; font-size:10px; font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); border:1px solid var(--border); border-radius:999px; padding:3px 9px; vertical-align:middle; margin-left:4px; }
.af-subhead{ font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:44px 0 0; font-weight:600; }

/* ───────── Jewel index colors (capledger spines + proof pills) ───────── */
.j-red{ color:var(--bud-red); background:var(--bud-red-soft); }
.j-orange{ color:var(--bud-orange); background:var(--bud-orange-soft); }
.j-yellow{ color:var(--bud-yellow); background:var(--bud-yellow-soft); }
.j-green{ color:var(--bud-green); background:var(--bud-green-soft); }
.j-blue{ color:var(--bud-blue); background:var(--bud-blue-soft); }
.j-violet{ color:var(--bud-electric-2); background:var(--accent-muted); }

/* ───────── B1 · At a glance: claim ledger + is / is-not ───────── */
.claim-ledger{ display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; }
.claim-ledger .cl-claim{ font-size:clamp(26px,3.4vw,38px); font-weight:var(--fw-bold); letter-spacing:-.02em; line-height:1.12; color:var(--fg1); margin:0; }
.claim-ledger .cl-claim em{ font-style:normal; color:var(--bud-electric-2); }
.claim-ledger .cl-sub{ font-size:15px; color:var(--fg2); margin:14px 0 0; line-height:1.6; max-width:56ch; }
.cl-proofs{ display:flex; flex-direction:column; }
.cl-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 0; border-top:1px solid var(--border); }
.cl-row .cl-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); font-weight:700; }
.cl-row .cl-v{ font-size:24px; font-weight:var(--fw-bold); color:var(--fg1); letter-spacing:-.02em; line-height:1; white-space:nowrap; }
.cl-src{ padding:12px 0 0; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:10px; color:var(--fg3); }

.brief-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:44px; }
.brief-cols .bh{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:700; padding-bottom:8px; }
.brief-cols .bh.dim{ color:var(--fg3); }
.brief-cols .br{ font-size:13.5px; color:var(--fg2); padding:9px 0; border-top:1px solid var(--border); line-height:1.55; }
.brief-cols .br.dim{ color:var(--fg3); }
.brief-cols .x{ color:var(--bud-red); font-family:var(--font-mono); margin-right:7px; }

/* ───────── Legacy metric strip (transitional; B1 replaces it in §01) ───────── */
.af-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; }
.af-metrics .metric{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px 22px; position:relative; overflow:hidden; }
.af-metrics .metric::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
.af-metrics .mv{ font-size:42px; font-weight:700; letter-spacing:-0.03em; line-height:1; color:#fff; }
.af-metrics .mv .pre{ font-size:17px; color:var(--fg3); font-weight:600; display:block; margin-bottom:6px; letter-spacing:.02em; }
.af-metrics .ml{ font-size:13px; color:var(--fg2); margin-top:10px; line-height:1.45; }
.metric-support{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.chip-stat{ display:inline-flex; align-items:baseline; gap:8px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 15px; font-size:13px; color:var(--fg2); }
.chip-stat b{ font-size:15px; color:#fff; font-weight:700; letter-spacing:-0.01em; }

/* ───────── Stack viz (brief variant — renamed from .stack-viz/.layer) ───────── */
.af-stack{ margin-top:40px; display:flex; flex-direction:column; gap:6px; max-width:860px; }
.af-stack .af-layer{ display:flex; align-items:center; gap:16px; padding:15px 20px; border-radius:10px; background:var(--surface); border:1px solid var(--border); transition:border-color var(--duration-md),transform var(--duration-md); }
a.af-layer:hover{ border-color:var(--border-strong); transform:translateX(3px); }
.af-layer .ltag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--fg3); width:34px; font-weight:600; }
.af-layer .lname{ font-weight:600; color:var(--fg1); font-size:15px; display:flex; flex-direction:column; gap:2px; }
.af-layer .lname span{ font-weight:400; color:var(--fg3); font-size:12.5px; }
.af-layer .lsub{ margin-left:auto; font-size:11px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg3); }
.af-layer.hl{ border-color:var(--border-strong); background:linear-gradient(90deg,rgba(140,51,239,.16),rgba(30,26,43,.4) 70%); box-shadow:var(--shadow-glow); }
.af-layer.hl .ltag{ color:var(--bud-electric-2); }
.af-layer.hl .lsub{ color:var(--bud-electric-2); }
.stack-flank{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; max-width:860px; }
.flank{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--surface); }
.flank i{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; margin-top:2px; }
.flank p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--fg2); }
.flank b{ color:var(--fg1); }

/* ───────── B2 · Capabilities: jewel-spine ledger ───────── */
.capledger{ display:flex; flex-direction:column; margin-top:44px; }
.capledger .crow{ display:grid; grid-template-columns:4px 44px 190px 1fr auto; gap:0 18px; padding:16px 0; border-top:1px solid var(--border); align-items:baseline; }
.capledger .crow:last-child{ border-bottom:1px solid var(--border); }
.capledger .spine{ align-self:stretch; margin:2px 0; }
.capledger .ix{ font-family:var(--font-mono); font-size:11px; color:var(--fg3); font-weight:700; }
.capledger .nm{ font-size:15.5px; font-weight:var(--fw-semibold); color:var(--fg1); line-height:1.35; }
.capledger .dt{ font-size:13.5px; color:var(--fg2); line-height:1.6; }
.capledger .pf{ font-family:var(--font-mono); font-size:11px; font-weight:700; border-radius:var(--radius-pill); padding:3px 10px; white-space:nowrap; }

/* ───────── Tables (brief variant — renamed from .tbl) ───────── */
.af-sec .tbl-wrap{ margin-top:40px; border-radius:var(--radius-xl); overflow:auto; }
table.af-tbl{ width:100%; border-collapse:collapse; min-width:680px; }
.af-tbl th, .af-tbl td{ text-align:left; padding:15px 18px; font-size:14px; border-bottom:1px solid var(--border); }
.af-tbl thead th{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); font-weight:600; background:rgba(30,26,43,.5); position:sticky; top:0; }
.af-tbl tbody tr:last-child td{ border-bottom:0; }
.af-tbl tbody tr:hover td{ background:rgba(140,51,239,.05); }
.af-tbl td:first-child{ color:var(--fg1); font-weight:600; }
.af-tbl .mono{ font-family:var(--font-mono); font-size:12.5px; color:var(--fg2); }
.af-tbl .tick{ color:var(--bud-green); font-weight:600; font-size:13px; white-space:nowrap; }
.af-tbl .partial{ color:var(--bud-amber); font-size:13px; }
.af-tbl .cross{ color:var(--fg3); font-size:13px; }

/* ───────── Golden path stepper (.g4–.g8 set column count; default 9) ───────── */
.golden{ margin-top:30px; display:grid; grid-template-columns:repeat(9,1fr); gap:0; border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; background:var(--surface); }
.golden.g4{ grid-template-columns:repeat(4,1fr); }
.golden.g5{ grid-template-columns:repeat(5,1fr); }
.golden.g6{ grid-template-columns:repeat(6,1fr); }
.golden.g7{ grid-template-columns:repeat(7,1fr); }
.golden.g8{ grid-template-columns:repeat(8,1fr); }
.gstep{ position:relative; padding:20px 14px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:9px; }
.gstep:last-child{ border-right:0; }
.gstep .gn{ font-family:var(--font-mono); font-size:11px; color:var(--accent); font-weight:700; }
.gstep .gi{ width:30px; height:30px; border-radius:8px; background:var(--accent-muted); color:var(--bud-electric-2); display:flex; align-items:center; justify-content:center; }
.gstep .gi i{ width:16px; height:16px; }
.gstep .gt{ font-size:13px; font-weight:700; color:var(--fg1); }
.gstep .gd{ font-size:11.5px; color:var(--fg3); line-height:1.4; }
.planes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.plane{ border:1px solid var(--border); border-radius:12px; padding:18px 20px; background:var(--surface); }
.plane .ph{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.plane .ph i{ width:17px; height:17px; color:var(--accent); }
.plane .ph b{ font-size:14px; color:var(--fg1); }
.plane p{ margin:0; font-size:12.5px; color:var(--fg2); line-height:1.5; }
.substrate-note{ margin-top:14px; font-size:13px; color:var(--fg3); display:flex; align-items:center; gap:9px; }
.substrate-note i{ width:15px; height:15px; color:var(--accent); }

/* ───────── P4 · Inline flow strip (sanctioned lighter §04) ───────── */
.flowstrip{ display:flex; flex-direction:column; gap:14px; margin-top:40px; }
.fs-path{ display:flex; align-items:center; flex-wrap:wrap; row-gap:14px; }
.fs-node{ background:var(--motif-bg); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 16px; }
.fs-node .k{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); }
.fs-node .n{ font-size:13.5px; font-weight:var(--fw-semibold); color:var(--fg1); }
.fs-node.hl{ background:linear-gradient(180deg,rgba(140,51,239,.18),rgba(140,51,239,.05)); border-color:var(--accent); }
.fs-node.hl .k{ color:var(--bud-electric-2); }
.fs-edge{ display:flex; flex-direction:column; align-items:center; padding:0 4px; min-width:86px; flex:1; max-width:140px; }
.fs-edge .lbl{ font-family:var(--font-mono); font-size:10px; color:var(--bud-electric-2); font-weight:700; margin-bottom:3px; }
.fs-edge .ln{ width:100%; height:2px; background:rgba(183,133,244,.35); position:relative; }
.fs-edge .ln::after{ content:""; position:absolute; right:-1px; top:-3px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid rgba(183,133,244,.6); }
.fs-edge .sub{ font-family:var(--font-mono); font-size:9px; color:var(--fg3); margin-top:3px; }
.fs-note{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10px; color:var(--fg3); }
.fs-note::before{ content:""; width:22px; height:2px; background:repeating-linear-gradient(90deg,rgba(183,133,244,.5) 0 4px,transparent 4px 8px); }
.fs-note b{ color:var(--bud-electric-2); font-weight:700; }

/* ───────── Deployment chips ───────── */
.compat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.compat{ border:1px solid var(--border); border-radius:var(--radius-xl); padding:22px 24px; background:var(--surface); }
.compat h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.compat h4 i{ width:15px; height:15px; }
.tagrow{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill{ font-size:12.5px; font-family:var(--font-mono); color:var(--fg2); border:1px solid var(--border); border-radius:999px; padding:6px 12px; background:var(--bg); }
.compat p{ margin:0; font-size:13.5px; color:var(--fg2); line-height:1.55; }

/* ───────── P6 · Receipt spec sheet (sanctioned for §05 spec facts) ───────── */
.receipt{ max-width:360px; background:var(--motif-bg); border:1px solid rgba(183,133,244,.2); border-radius:var(--radius-sm); padding:24px 26px; font-family:var(--font-mono); margin-top:24px; }
.receipt .rc-title{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:700; text-align:center; }
.receipt .rc-rule{ border-top:1px dashed rgba(183,133,244,.3); margin:14px 0; }
.receipt .rc-row{ display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:5px 0; }
.receipt .rc-row .k{ color:var(--fg3); }
.receipt .rc-row .v{ color:var(--fg1); text-align:right; }
.receipt .rc-row.lead .k,.receipt .rc-row.lead .v{ color:var(--bud-electric-2); font-weight:700; font-size:13px; }
.receipt .rc-row .v.ok{ color:var(--bud-success); font-weight:700; }

/* ───────── B3 · Proof: evidence ledger ───────── */
.evidence{ display:flex; flex-direction:column; margin-top:44px; }
.evidence .ev-row{ display:grid; grid-template-columns:170px 1fr; gap:0 28px; padding:18px 0; border-top:1px solid var(--border); }
.evidence .ev-row:last-child{ border-bottom:1px solid var(--border); }
.evidence .ev-v{ font-size:34px; font-weight:var(--fw-bold); letter-spacing:-.02em; line-height:1; color:var(--fg1); white-space:nowrap; }
.evidence .ev-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:700; margin-top:7px; line-height:1.5; }
.evidence .ev-basis{ font-size:13.5px; color:var(--fg2); line-height:1.6; }
.evidence .ev-basis b{ color:var(--fg1); font-weight:var(--fw-semibold); }
.evidence .ev-basis .lbl{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-mono); color:var(--fg3); margin-bottom:7px; }

/* ───────── Positioning ───────── */
.usp-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.usp{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--border-strong); background:var(--accent-muted); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--fg1); }
.usp i{ width:15px; height:15px; color:var(--accent); }

/* ───────── Use cases ───────── */
.uc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.uc{ border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px; background:var(--surface); display:flex; flex-direction:column; gap:12px; }
.uc .ucb{ width:40px; height:40px; border-radius:10px; background:var(--accent-muted); color:var(--bud-electric-2); display:flex; align-items:center; justify-content:center; }
.uc .ucb i{ width:20px; height:20px; }
.uc h3{ font-size:16px; font-weight:700; margin:0; color:var(--fg1); }
.uc p{ font-size:13.5px; line-height:1.55; color:var(--fg2); margin:0; }
.uc .who{ font-size:11px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg3); }

/* ───────── Promo cards / go deeper ───────── */
.promo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:44px; }
.promo-card{ position:relative; display:flex; flex-direction:column; gap:18px; padding:34px; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); overflow:hidden; isolation:isolate; transition:border-color var(--duration-md),transform var(--duration-md),box-shadow var(--duration-md); }
a.promo-card:hover{ border-color:var(--border-strong); transform:translateY(-3px); box-shadow:var(--shadow-3); }
.promo-card .pc-motif{ position:absolute; right:-60px; top:-60px; width:260px; height:260px; z-index:0; opacity:.32; pointer-events:none; }
.promo-card > *{ position:relative; z-index:1; }
.promo-card .pc-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.promo-card .icon-badge{ width:50px; height:50px; border-radius:12px; background:var(--accent-muted); color:var(--bud-electric-2); display:flex; align-items:center; justify-content:center; }
.promo-card .icon-badge i{ width:24px; height:24px; }
.pc-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); font-weight:600; margin:0 0 6px; }
.promo-card h3{ font-size:24px; line-height:1.12; letter-spacing:-0.02em; margin:0; color:var(--fg1); }
.pc-sub{ font-size:14px; font-weight:600; color:var(--bud-electric-2); margin:6px 0 0; }
.pc-desc{ font-size:15px; line-height:1.6; color:var(--fg2); margin:0; }
.pc-cta{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--accent); }
.pc-cta i{ width:17px; height:17px; }
.pc-flag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:999px; color:var(--accent); background:var(--accent-muted); }

/* ───────── CTA band (brief rhythm — modifier on site.css base) ───────── */
.cta-band.af{ border-top:1px solid var(--border); padding:90px 0; }
.cta-band.af .cta-panel{ padding:56px 60px; }
.cta-return{ margin-top:22px; font-size:13px; }
.cta-return a{ display:inline-flex; align-items:center; gap:7px; color:var(--fg3); font-weight:600; }
.cta-return a:hover{ color:var(--accent); }
.cta-return i{ width:15px; height:15px; }

/* ───────── Theater blade (.theater) — the walkthrough video ─────────
   Full-bleed blade that sits directly after §01. It breaks out of the brief's
   .container, so the markup closes the container after §01 and opens a fresh
   one before §02 (the section after the blade then becomes :first-of-type and
   drops its top border — fine, the blade carries its own).

   The stage ships BLANK: initTheater() in site.js injects the embed on the
   first click, so no third-party request fires on page load. Placeholder
   state for a brief whose video isn't recorded yet is
   <div class="th-stage is-empty"> holding a .todo-block, with no button.
   Full swap-in recipe: product-briefs/README.md. */
.theater{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:78px 0 86px; scroll-margin-top:calc(var(--nav-h, 0px) + 72px); }
.theater .th-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.theater .th-clear{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 88% at 50% 0%, rgba(10,7,18,.32), rgba(10,7,18,.88) 72%); }
.theater .container{ position:relative; z-index:2; }

.th-head{ max-width:720px; margin:0 auto 40px; text-align:center; }
.th-head .af-eyebrow{ justify-content:center; }
.th-head h2{ font-size:clamp(31px,4.4vw,48px); letter-spacing:-0.03em; line-height:1.05; margin:0; font-weight:700; color:var(--fg1); }
.th-head .af-lede{ margin:18px auto 0; }

.th-stage{ position:relative; max-width:960px; margin:0 auto; aspect-ratio:16/9; border:1px solid var(--border-strong); border-radius:var(--radius-xl); overflow:hidden; background:linear-gradient(165deg,#191330,var(--bud-midnight-purple) 62%); box-shadow:var(--shadow-3); }
.th-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.th-screen{ position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.th-glow{ position:absolute; left:50%; top:50%; width:min(70%,480px); aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(140,51,239,.30), rgba(140,51,239,0) 62%); opacity:.8; pointer-events:none; transition:opacity var(--duration-md) var(--ease-out-expo), transform var(--duration-md) var(--ease-out-expo); }
.th-screen:hover .th-glow{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
.th-screen .play-badge{ position:relative; z-index:1; width:84px; height:84px; border-radius:999px; background:rgba(10,7,18,.72); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--shadow-glow); transition:transform var(--duration-md) var(--ease-out-expo), background var(--duration-md); }
.th-screen .play-badge i, .th-screen .play-badge svg{ width:30px; height:30px; margin-left:4px; } /* lucide swaps <i> for <svg> — both selectors needed */
.th-screen:hover .play-badge, .th-screen:focus-visible .play-badge{ transform:scale(1.08); background:var(--accent); }
.th-cue{ position:relative; z-index:1; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); transition:color var(--duration-md); }
.th-screen:hover .th-cue{ color:var(--fg2); }
.th-cap{ max-width:960px; margin:16px auto 0; font-size:12.5px; color:var(--fg3); text-align:center; }
.th-cap a{ color:var(--accent); }
.th-cap a:hover{ color:var(--accent-hover); }

/* Placeholder — no video yet. Keeps the theater's footprint so the layout is
   reviewable, and carries the standard red .todo-block content-gap marker. */
/* aspect-ratio is dropped here on purpose: the stage keeps overflow:hidden for
   the iframe's rounded corners, so a fixed 16/9 box would clip the todo card on
   narrow viewports. min() holds the theater's footprint until the card is taller. */
.th-stage.is-empty{ display:flex; align-items:center; justify-content:center; padding:24px; aspect-ratio:auto; min-height:min(540px, 56.25vw); background:var(--bg); border-style:dashed; box-shadow:none; }
.th-stage.is-empty .todo-block{ margin:0; max-width:580px; text-align:center; }
.th-stage.is-empty .todo-block .mono{ font-family:var(--font-mono); font-size:12.5px; color:var(--fg1); }

/* ───────── Responsive ───────── */
@media (max-width:720px){
  .theater{ padding:60px 0 66px; }
  .th-screen .play-badge{ width:66px; height:66px; }
  .th-screen .play-badge i, .th-screen .play-badge svg{ width:24px; height:24px; }
  .th-stage.is-empty{ padding:18px; }
}
@media (max-width:980px){
  .mh-split{ grid-template-columns:1fr; gap:40px; }
  .af-metrics{ grid-template-columns:repeat(2,1fr); }
  .planes-grid,.compat-grid,.uc-grid,.promo-grid{ grid-template-columns:1fr; }
  .golden,.golden.g4,.golden.g5,.golden.g6,.golden.g7,.golden.g8{ grid-template-columns:repeat(3,1fr); }
  .gstep:nth-child(3n){ border-right:0; }
}
@media (max-width:860px){
  .af-sec{ padding:60px 0; }
}
@media (max-width:760px){
  .claim-ledger{ grid-template-columns:1fr; gap:22px; }
  .capledger .crow{ grid-template-columns:4px 1fr auto; gap:4px 14px; }
  .capledger .ix{ display:none; }
  .capledger .dt{ grid-column:2/span 2; }
}
@media (max-width:640px){
  .brief-cols{ grid-template-columns:1fr; }
  .brief-cols>div+div{ margin-top:18px; }
}
@media (max-width:560px){
  .af-metrics{ grid-template-columns:1fr 1fr; }
  .golden,.golden.g4,.golden.g5,.golden.g6,.golden.g7,.golden.g8{ grid-template-columns:repeat(2,1fr); }
  .gstep:nth-child(3n){ border-right:1px solid var(--border); }
  .gstep:nth-child(2n){ border-right:0; }
  .stack-flank,.compat-grid{ grid-template-columns:1fr; }
  .evidence .ev-row{ grid-template-columns:1fr; gap:8px; }
  .evidence .ev-k{ margin-top:4px; }
}