/* ============================================================
   MRKT.NG · index v4 · canon.css
   fw-light design system, split out of the page.
   Tokens match the locked master. All four wire colors, always.
   ============================================================ */

:root {
  --paper: #F7F8FC; --paper-2: #EDF0F8; --paper-3: #E2E7F3;
  --ink: #0B1022; --ink-2: #3A4360; --ink-3: #76819E;
  --rule: #D8DEEE;
  --accent: #2B6FE3; --accent-2: #E04040; --gold: #E68A00;
  --teal: #0FA38A;
  --highlight: rgba(43, 111, 227, 0.12);
  --bg-mega: #070B1A; --bg-mega-ink: #F0F4FF;
  --act1: #2B6FE3; --act2: #E04040; --act3: #E68A00; --act4: #1B2A6B;
  --wire1: #F0F4FF; --wire2: #2B6FE3; --wire3: #E04040; --wire4: #E68A00;
  --wire: linear-gradient(90deg, #2B6FE3 0%, #E04040 35%, #E68A00 68%, #1B2A6B 100%);
  --wire-full: linear-gradient(90deg, #F0F4FF 0%, #2B6FE3 30%, #E04040 62%, #E68A00 100%);
  --ease-launch: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(11, 16, 34, 0.05), 0 10px 30px -18px rgba(11, 16, 34, 0.25);
}
[data-theme="dark"] {
  --paper: #04060F; --paper-2: #080D1E; --paper-3: #0C1228;
  --ink: #E8EDF8; --ink-2: #A9B5D4; --ink-3: #6B7B9E;
  --rule: #1A2340;
  --wire1: #F0F4FF; --wire2: #4A9EFF; --wire3: #FF4444; --wire4: #FFA900;
  --accent: #4A9EFF; --accent-2: #FF4444; --gold: #FFA900;
  --teal: #2BC4A8;
  --highlight: rgba(74, 158, 255, 0.15);
  --bg-mega: #0F1630; --bg-mega-ink: #F0F4FF;
  --act1: #4A9EFF; --act2: #FF4444; --act3: #FFA900; --act4: #8FA3FF;
  --wire: linear-gradient(90deg, #4A9EFF 0%, #FF4444 35%, #FFA900 68%, #8FA3FF 100%);
  --wire-full: linear-gradient(90deg, #F0F4FF 0%, #4A9EFF 30%, #FF4444 62%, #FFA900 100%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis-smooth, html.lenis-stopped { scroll-behavior: auto !important; }
html.motion-on .progress-wire i { transition: none; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
html.theme-ready body { transition: background-color .3s, color .3s; }
[id] { scroll-margin-top: 104px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }
a { color: inherit; }
.mono { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; }
.container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 6vw, 96px); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { left: 16px; top: 16px; }

/* ---- the progress wire (scroll) ---- */
.progress-wire { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: transparent; pointer-events: none; }
.progress-wire i { display: block; height: 100%; width: 0; background: var(--wire-full); transition: width .12s linear; }

/* ---- folio bar ---- */
.folio-bar { position: fixed; inset: 3px 0 auto 0; height: 54px; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); transform: translateY(-110%); transition: transform 350ms var(--ease-launch); }
.folio-bar.visible { transform: translateY(0); }
.fb-inner { max-width: 1280px; margin-inline: auto; height: 100%; padding-inline: clamp(20px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fb-brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; text-decoration: none; }
.fb-dots { display: inline-flex; gap: 4px; }
.fb-dots i { width: 6px; height: 6px; border-radius: 50%; }
.fb-dots i:nth-child(1) { background: var(--wire1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.fb-dots i:nth-child(2) { background: var(--wire2); }
.fb-dots i:nth-child(3) { background: var(--wire3); }
.fb-dots i:nth-child(4) { background: var(--wire4); }
.fb-mark { height: 20px; width: auto; display: block; }
[data-theme="light"] .fb-mark { filter: drop-shadow(0 1px 1px rgba(11, 16, 34, .3)); }
.fb-nav { display: flex; gap: 18px; }
.fb-nav a { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.fb-nav a:hover { color: var(--ink); }
@media (max-width: 899px) { .fb-nav { display: none; } }
.fb-right { display: flex; align-items: center; gap: 14px; }
.fb-cta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 8px 14px; text-decoration: none; border-radius: 3px; white-space: nowrap; }
.theme-toggle, .xray-toggle { background: none; border: 1px solid var(--rule); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; padding: 7px 11px; border-radius: 3px; white-space: nowrap; }
.theme-toggle:hover, .xray-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.xray-toggle b { font-weight: 500; color: var(--accent-2); }
body.xray .xray-toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.xray .xray-toggle b { color: var(--gold); }

/* ---- X-ray system ---- */
.xr { position: relative; }
body.xray .xr { outline: 1.5px dashed var(--accent-2); outline-offset: 8px; border-radius: 2px; }
.xr-note { display: none; }
body.xray .xr-note {
  display: block; margin: 14px 0 4px; padding: 10px 14px; max-width: 560px;
  border-left: 3px solid var(--gold); background: var(--paper-2);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.65;
  letter-spacing: .02em; color: var(--ink-2); text-transform: none;
}
.xr-note b { color: var(--ink); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; display: block; margin-bottom: 3px; }
.xr-note b::before { content: "◉ "; color: var(--accent-2); }
.xr-note a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.xray-banner { display: none; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 70; background: var(--bg-mega); color: var(--bg-mega-ink); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; border-radius: 4px; border: 1px solid rgba(240,244,255,.18); box-shadow: 0 10px 40px -10px rgba(0,0,0,.5); max-width: min(92vw, 640px); text-align: center; }
.xray-banner b { color: var(--gold); font-weight: 500; }
body.xray .xray-banner { display: block; }

/* ---- hero ---- */
.hero { position: relative; padding: clamp(120px, 16vh, 180px) 0 clamp(56px, 8vh, 96px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 56px 56px; opacity: .35; mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 75%); pointer-events: none; }
.hero > .container { position: relative; }
.hero-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 22px; }
.hero-kicker .dot { color: var(--accent-2); }
.masthead { font-family: 'Bebas Neue', sans-serif; font-size: clamp(64px, 11.5vw, 168px); line-height: .92; letter-spacing: .01em; margin: 0 0 10px; background: var(--wire); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* dark-theme brightness filter removed: filter breaks background-clip:text painting in Chrome */
.hero-sub { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 3.2vw, 40px); letter-spacing: .06em; color: var(--ink); margin: 0 0 26px; }
.hero-deck { max-width: 680px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: var(--ink-2); margin: 0 0 34px; }
.hero-deck strong { color: var(--ink); font-weight: 600; }

.countdown { display: flex; gap: clamp(14px, 3vw, 34px); align-items: baseline; margin: 0 0 12px; }
.cd-unit { text-align: left; }
.cd-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 6vw, 84px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.cd-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.cd-title b { color: var(--accent); font-weight: 500; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 14px; }
.btn { display: inline-block; text-decoration: none; border-radius: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--paper); padding: 16px 26px; font-size: 12.5px; border: 1px solid var(--ink); position: relative; }
.btn-primary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: var(--wire); border-radius: 2px; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); padding: 16px 26px; font-size: 12.5px; border: 1px solid var(--ink-3); }
.btn-ghost:hover { border-color: var(--ink); }
.seat-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.seat-line b { color: var(--accent-2); font-weight: 500; }

/* ---- section scaffolding ---- */
section { position: relative; }
.sec { padding: clamp(64px, 9vh, 120px) 0; }
.sec-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.sec-kicker .dot { color: var(--accent-2); }
.sec-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5.4vw, 72px); line-height: .95; letter-spacing: .015em; margin: 0 0 16px; color: var(--ink); }
.sec-deck { max-width: 640px; color: var(--ink-2); font-size: 17px; margin: 0 0 40px; }
.hairline { height: 1px; background: var(--rule); border: 0; margin: 0; }
.wire-rule { height: 2px; background: var(--wire); opacity: .9; border: 0; margin: 0; }

/* ---- how it works ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 44px; }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr; } }
.step { border: 1px solid var(--rule); background: var(--paper); padding: 26px 24px 24px; border-radius: 6px; position: relative; }
.step::before { content: attr(data-n); position: absolute; top: 18px; right: 20px; font-family: 'Bebas Neue', sans-serif; font-size: 54px; line-height: 1; color: var(--paper-3); }
.step h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .04em; margin: 0 0 8px; }
.step:nth-child(1) h3 { color: var(--act1); } .step:nth-child(2) h3 { color: var(--act2); } .step:nth-child(3) h3 { color: var(--act3); }
.step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.step code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: var(--paper-2); padding: 2px 6px; border-radius: 3px; color: var(--ink); }

.term { background: var(--bg-mega); color: var(--bg-mega-ink); border-radius: 8px; padding: 22px 24px 26px; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.9; box-shadow: var(--shadow-card); border: 1px solid rgba(240,244,255,.08); overflow-x: auto; }
.term-head { display: flex; gap: 7px; margin-bottom: 14px; }
.term-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--act2); opacity: .85; }
.term-head i:nth-child(2) { background: var(--act3); } .term-head i:nth-child(3) { background: var(--teal); }
.term-line { white-space: pre-wrap; word-break: break-word; min-height: 1.9em; }
.term-line .ps1 { color: var(--act3); }
.term-line .ok { color: var(--teal); }
.term-line .out { color: #A9B5D4; }
.term-caret { display: inline-block; width: 8px; height: 15px; background: var(--bg-mega-ink); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- the lab (headline analyzer) ---- */
.lab { background: var(--paper-2); border-block: 1px solid var(--rule); }
.lab-row { display: flex; gap: 12px; max-width: 760px; margin-bottom: 10px; }
.lab-row input { flex: 1; font-family: 'Inter', sans-serif; font-size: 16px; padding: 15px 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); min-width: 0; }
.lab-row input:focus { border-color: var(--accent); outline: none; }
.lab-row .btn-primary { border: 0; }
@media (max-width: 640px) { .lab-row { flex-direction: column; } }
.lab-hint { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 26px; }
.lab-hint button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline dotted; }
.lab-result { max-width: 760px; display: none; }
.lab-result.show { display: block; }
.meter { height: 10px; background: var(--paper-3); border-radius: 6px; overflow: hidden; margin: 6px 0 6px; }
.meter i { display: block; height: 100%; width: 0; background: var(--wire-full); border-radius: 6px; transition: width .9s var(--ease-launch); }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; }
.meter-score { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--ink); }
.meter-verdict { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.diag { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.diag li { border: 1px solid var(--rule); background: var(--paper); border-radius: 5px; padding: 13px 16px; font-size: 14.5px; color: var(--ink-2); }
.diag li b { color: var(--ink); font-weight: 600; }
.diag li .src { display: block; margin-top: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.diag li.good { border-left: 3px solid var(--teal); }
.diag li.warn { border-left: 3px solid var(--act3); }
.diag li.bad { border-left: 3px solid var(--act2); }
.lab-upsell { margin-top: 22px; padding: 16px 18px; background: var(--paper); border: 1px dashed var(--ink-3); border-radius: 6px; font-size: 14.5px; color: var(--ink-2); }
.lab-upsell a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---- canon grid ---- */
.canon-tools { position: sticky; top: 57px; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-block: 1px solid var(--rule); padding: 12px 0; }
.tools-inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); padding: 6px 11px; border-radius: 20px; cursor: pointer; }
.pill:hover { border-color: var(--ink-3); color: var(--ink); }
.pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tools-search { margin-left: auto; }
.tools-search input { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper); color: var(--ink); width: 180px; }
.tools-search input:focus { border-color: var(--accent); outline: none; }
@media (max-width: 640px) { .tools-search { margin-left: 0; width: 100%; } .tools-search input { width: 100%; } }

.youbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 34px 0 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--ink-2); }
.youbar .bar { flex: 1 1 220px; height: 5px; background: var(--paper-3); border-radius: 4px; overflow: hidden; }
.youbar .bar i { display: block; height: 100%; width: 0; background: var(--wire-full); transition: width .6s var(--ease-launch); }

.quarter { padding: clamp(48px, 7vh, 84px) 0 clamp(28px, 4vh, 48px); }
.q-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.q-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 6vw, 80px); line-height: .95; margin: 0; }
.quarter[data-q="0"] .q-name { color: var(--act1); } .quarter[data-q="1"] .q-name { color: var(--act2); }
.quarter[data-q="2"] .q-name { color: var(--act3); } .quarter[data-q="3"] .q-name { color: var(--act4); }
[data-theme="dark"] .quarter[data-q="3"] .q-name { color: #8FA3FF; }
.q-tag { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 3vw, 36px); color: var(--ink); letter-spacing: .04em; }
.q-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.q-deck { max-width: 620px; color: var(--ink-2); margin: 6px 0 30px; }

.wkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1080px) { .wkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .wkgrid { grid-template-columns: 1fr; } }

.wk-card { position: relative; border: 1px solid var(--rule); background: var(--paper); border-radius: 8px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 8px; transition: transform .25s var(--ease-launch), box-shadow .25s, border-color .25s; overflow: hidden; }
.wk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--ink-3); }
.wk-card .wk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wk-no { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.type-chip { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.wk-card[data-type="foundations"] .type-chip { border-color: var(--act4); color: var(--act4); }
[data-theme="dark"] .wk-card[data-type="foundations"] .type-chip { border-color: #8FA3FF; color: #8FA3FF; }
.wk-card[data-type="influence"] .type-chip { border-color: var(--act2); color: var(--act2); }
.wk-card[data-type="mind"] .type-chip { border-color: var(--act1); color: var(--act1); }
.wk-card[data-type="word"] .type-chip { border-color: var(--act3); color: var(--act3); }
.wk-card[data-type="offers"] .type-chip { border-color: var(--act2); color: var(--act2); }
.wk-card[data-type="positioning"] .type-chip { border-color: var(--act4); color: var(--act4); }
[data-theme="dark"] .wk-card[data-type="positioning"] .type-chip { border-color: #8FA3FF; color: #8FA3FF; }
.wk-card[data-type="growth"] .type-chip { border-color: var(--act1); color: var(--act1); }
.wk-card[data-type="story"] .type-chip { border-color: var(--act3); color: var(--act3); }
.wk-title { font-family: 'Bebas Neue', sans-serif; font-size: 27px; line-height: 1.02; letter-spacing: .02em; margin: 0; color: var(--ink); }
.wk-author { font-size: 13.5px; color: var(--ink-2); }
.wk-thesis { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 2px 0 4px; }
.wk-quoteline { font-size: 12.5px; font-style: italic; color: var(--ink-3); border-left: 2px solid var(--rule); padding-left: 10px; margin: 2px 0 4px; }
.wk-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; }
.wk-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wk-cta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
.wk-cta:hover { text-decoration: underline; }
.wk-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wire); opacity: 0; transition: opacity .3s; }
.wk-card:hover::after, .wk-card.read::after { opacity: 1; }
.wk-card.read .wk-no::after { content: " · opened"; color: var(--teal); }

.wk-card.locked { background: var(--paper-2); }
.wk-card.locked .wk-title, .wk-card.locked .wk-thesis { color: var(--ink-2); opacity: .75; }
.wk-card.locked .wk-cta { color: var(--ink-3); cursor: default; text-decoration: none; }
.lock-glyph { color: var(--ink-3); font-size: 12px; }
.wk-card.next-drop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wk-card.next-drop .wk-date { color: var(--accent); }

/* foundations bundle */
.bundle { grid-column: 1 / -1; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); padding: 26px 24px 22px; position: relative; overflow: hidden; }
.bundle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--wire-full); }
.bundle-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.bundle-head h3 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 4vw, 48px); margin: 0; letter-spacing: .02em; }
.bundle-head .wk-no b { color: var(--accent-2); font-weight: 500; }
.bundle-deck { max-width: 640px; color: var(--ink-2); font-size: 14.5px; margin: 0 0 20px; }
.bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1080px) { .bundle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bundle-grid { grid-template-columns: 1fr; } }
.b-card { border: 1px solid var(--rule); border-radius: 6px; padding: 14px 15px 12px; text-decoration: none; display: block; background: var(--paper); transition: transform .2s var(--ease-launch), border-color .2s, box-shadow .2s; }
.b-card:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: var(--shadow-card); }
.b-year { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--ink-3); }
.b-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; line-height: 1.05; color: var(--ink); margin: 3px 0 2px; }
.b-author { font-size: 12.5px; color: var(--ink-2); }
.b-line { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.55; }
.b-read { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 8px; display: inline-block; }
.bundle.locked .b-card { pointer-events: none; opacity: .78; }
.bundle .wk-foot { padding-top: 16px; }

/* ---- offer ---- */
.offer { background: var(--bg-mega); color: var(--bg-mega-ink); position: relative; overflow: hidden; }
.offer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--wire-full); }
.offer .sec-kicker { color: #8FA3FF; }
.offer .sec-title { color: var(--bg-mega-ink); }
.offer .sec-deck { color: #A9B5D4; }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 18px; align-items: stretch; margin: 8px 0 26px; }
@media (max-width: 1080px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card { border: 1px solid rgba(240,244,255,.14); border-radius: 10px; padding: 24px 22px; background: rgba(240,244,255,.03); display: flex; flex-direction: column; }
.oc-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #A9B5D4; margin-bottom: 10px; }
.oc-price { font-family: 'Bebas Neue', sans-serif; font-size: 56px; line-height: 1; }
.oc-price .oc-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-left: 8px; vertical-align: 14px; }
.oc-note { color: #A9B5D4; font-size: 14px; margin-top: 10px; }
.offer-card.featured { border: 1px solid transparent; background: linear-gradient(rgba(15,22,48,.92), rgba(15,22,48,.92)) padding-box, var(--wire-full) border-box; box-shadow: 0 20px 60px -30px rgba(43,111,227,.55); }
.oc-badge { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bg-mega); background: var(--gold); border-radius: 3px; padding: 4px 9px; margin-bottom: 14px; }
.oc-list { list-style: none; margin: 14px 0 4px; padding: 0; }
.oc-list li { font-size: 14px; color: #C9D3EC; padding: 5px 0 5px 22px; position: relative; }
.oc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.oc-anchor { margin-top: 10px; font-size: 13.5px; color: #8FA3FF; }
.oc-anchor s { color: #6B7B9E; }
.oc-buy { display: block; text-align: center; margin-top: 18px; background: var(--bg-mega-ink); color: var(--bg-mega); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 16px 18px; border-radius: 5px; font-weight: 500; }
.oc-buy:hover { transform: translateY(-1px); }
.oc-ladder { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8FA3FF; text-align: center; }

.ladder-viz { max-width: 560px; margin: 0 0 8px; }
.ladder-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(240,244,255,.16); }
.ladder-bar i { display: block; height: 100%; }
.ladder-bar .l1 { width: 40%; background: var(--act1); } /* 200 of 500 */
.ladder-bar .l2 { width: 60%; background: rgba(240,244,255,.10); }
.ladder-bar .fill { position: relative; }
.ladder-labels { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #8FA3FF; margin-top: 7px; }
.seat-big { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--bg-mega-ink); }
.seat-big b { color: var(--gold); font-weight: 400; }
.offer-fine { color: #8FA3FF; font-size: 13px; max-width: 640px; }
.offer .xr-note { background: rgba(240,244,255,.06); color: #C9D3EC; }
.offer .xr-note b { color: var(--bg-mega-ink); }
.offer .xr-note a { color: #8FA3FF; border-color: #8FA3FF; }
body.xray .offer .xr { outline-color: var(--gold); }

/* ---- signup (free account) ---- */
.signup { background: var(--paper-2); border-block: 1px solid var(--rule); }
.signup-row { display: flex; gap: 12px; max-width: 640px; }
.signup-row input { flex: 1; font-size: 16px; padding: 15px 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); min-width: 0; }
.signup-row input:focus { border-color: var(--accent); outline: none; }
@media (max-width: 640px) { .signup-row { flex-direction: column; } }
.signup-note { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); margin-top: 12px; }
.signup-success { display: none; border: 1px solid var(--teal); border-left-width: 4px; background: var(--paper); border-radius: 5px; padding: 16px 18px; max-width: 640px; color: var(--ink-2); }
.signup-success.show { display: block; }
.signup-success b { color: var(--ink); }

/* ---- century strip ---- */
.century { padding: clamp(56px, 8vh, 96px) 0; }
.century-strip { position: relative; height: 96px; margin: 26px 0 10px; }
.century-strip .base { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--rule); }
.century-tick { position: absolute; top: 50%; width: 2px; height: 26px; transform: translateY(-50%); border-radius: 1px; }
.century-tick:hover { height: 44px; }
.century-lbl { position: absolute; top: calc(50% + 30px); transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--ink-3); }
.century-caption { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ---- authors ---- */
.authors { background: var(--paper-2); border-block: 1px solid var(--rule); }
.auth-grid { columns: 4 200px; column-gap: 32px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 2.15; color: var(--ink-2); }
.auth-grid span { display: block; break-inside: avoid; }
.auth-grid b { color: var(--ink); font-weight: 500; }
.auth-grid i { font-style: normal; color: var(--ink-3); }

/* ---- FAQ ---- */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 16.5px; color: var(--ink); display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: 'JetBrains Mono', monospace; color: var(--ink-3); }
.faq details[open] summary::after { content: "-"; }
.faq .a { padding: 0 0 20px; color: var(--ink-2); max-width: 720px; }
.faq .a code { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--paper-2); padding: 2px 6px; border-radius: 3px; }

/* ---- footer ---- */
.site-footer { padding: 56px 0 72px; }
.foot-wire { height: 3px; background: var(--wire-full); border: 0; margin: 0 0 44px; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-end; }
.foot-brand { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: .03em; }
.foot-brand .tld { color: var(--accent); }
.foot-lines { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 2.1; text-align: right; }
@media (max-width: 640px) { .foot-lines { text-align: left; } }

/* ---- reveal on scroll ---- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-launch), transform .6s var(--ease-launch); }
.rv.in { opacity: 1; transform: none; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .term-caret { animation: none; }
  .wk-card, .b-card, .btn-primary:hover, .oc-buy:hover { transition: none; transform: none; }
  .meter i, .youbar .bar i, .progress-wire i { transition: none; }
}

/* ---- print ---- */
@media print { .folio-bar, .progress-wire, .xray-banner, .canon-tools { display: none; } }

/* ============================================================
   LEVEL-UP LAYER · the broadsheet specimen pass
   Appended overrides. Same tokens, higher craft.
   ============================================================ */

/* ---- atmosphere: grain ---- */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px; }
[data-theme="dark"] .grain { opacity: .08; }

/* ---- the spine (book edge, desktop only) ---- */
.spine { position: fixed; left: 16px; top: 0; bottom: 0; width: 22px; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 84px 0 28px; }
.spine .s-label { writing-mode: vertical-rl; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.spine .s-line { flex: 1; width: 1px; background: var(--rule); position: relative; }
.spine .s-line i { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--wire-full); }
@media (max-width: 1439px) { .spine { display: none; } }

/* ---- broadsheet issue line ---- */
.hero { padding-top: clamp(96px, 12vh, 148px); }
.issue-line { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 9px 2px 8px; margin-bottom: clamp(28px, 4vh, 44px); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.issue-line .i-mid { color: var(--ink-3); }
@media (max-width: 980px) { .issue-line .i-mid { display: none; } }
@media (max-width: 640px) { .issue-line span:last-child { display: none; } .issue-line { justify-content: center; } }

/* ---- masthead rule: the wire draws itself ---- */
.masthead { margin: 0; }
.masthead-rule { height: clamp(5px, .8vw, 9px); background: var(--wire-full); margin: 4px 0 20px; transform-origin: left center; }

/* ---- hero load choreography ---- */
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mastIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.issue-line { animation: heroRise .6s var(--ease-launch) both .05s; }
.hero-kicker { animation: heroRise .6s var(--ease-launch) both .18s; }
.masthead { animation: mastIn .95s var(--ease-launch) both .3s; }
.masthead-rule { animation: ruleDraw 1s var(--ease-launch) both .75s; }
.hero-sub { animation: heroRise .6s var(--ease-launch) both .62s; }
.hero-deck { animation: heroRise .6s var(--ease-launch) both .74s; }
.hero .xr, .hero .countdown { animation: heroRise .7s var(--ease-launch) both .88s; }
.hero-ctas { animation: heroRise .7s var(--ease-launch) both 1.02s; }
.hero .seat-line { animation: heroRise .7s var(--ease-launch) both 1.14s; }
.hero .xr .xr-note { animation: none; }

/* ---- countdown tick ---- */
@keyframes tickPop { 0% { transform: translateY(-7px); opacity: .35; } 100% { transform: none; opacity: 1; } }
.cd-num.tick-pop { animation: tickPop .35s var(--ease-launch); }

/* ---- editorial section plates: folio numbers + extending rules ---- */
main { counter-reset: sec; }
main .sec-kicker { display: flex; align-items: center; gap: 14px; }
main .sec-kicker::before { counter-increment: sec; content: "§ " counter(sec, decimal-leading-zero); color: var(--ink); font-weight: 500; }
main .sec-kicker::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--rule); }
.sec-title { text-wrap: balance; }
.q-head::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--rule); align-self: center; min-width: 40px; }

/* ---- specimen cards: ghost numerals ---- */
.wk-card { isolation: isolate; }
.wk-card > :not(.ghost):not(.stamp) { position: relative; z-index: 1; }
.wk-card .ghost { position: absolute; right: 8px; bottom: -16px; z-index: 0; font-family: 'Bebas Neue', sans-serif; font-size: 108px; line-height: 1; color: var(--paper-3); pointer-events: none; letter-spacing: -.02em; transition: opacity .3s; }
.wk-card:hover .ghost { background: var(--wire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-card.locked .ghost { opacity: .5; }

/* ---- the library stamp on sealed cards ---- */
.stamp { position: absolute; z-index: 2; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); border: 1.5px dashed var(--ink-3); color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 3px; background: color-mix(in srgb, var(--paper) 84%, transparent); pointer-events: none; white-space: nowrap; }
.wk-card.locked:hover .stamp { color: var(--accent-2); border-color: var(--accent-2); }
.wk-card.next-drop .stamp { color: var(--accent); border-color: var(--accent); }

/* ---- week 1: the first folio (dark plate) ---- */
.bundle { background: var(--bg-mega); border-color: rgba(240, 244, 255, .16); color: var(--bg-mega-ink); box-shadow: 0 24px 70px -32px rgba(7, 11, 26, .6); }
.bundle-head h3 { background: var(--wire-full); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bundle-head .wk-no, .bundle .wk-date, .bundle .wk-cta { color: #8FA3FF; }
.bundle .type-chip { border-color: rgba(240, 244, 255, .28); color: #A9B5D4; }
.bundle-deck { color: #A9B5D4; }
.b-card { background: rgba(240, 244, 255, .045); border-color: rgba(240, 244, 255, .15); }
.b-card:hover { border-color: rgba(240, 244, 255, .45); background: rgba(240, 244, 255, .08); box-shadow: none; }
.b-year { color: #8FA3FF; }
.b-title { color: var(--bg-mega-ink); }
.b-author { color: #A9B5D4; }
.b-line { color: #7E8BB0; }
.b-read { color: #4A9EFF; }
.bundle.locked .b-card { opacity: .85; }
.bundle .stamp.stamp-lit { top: 26px; left: auto; right: 22px; transform: rotate(4deg); color: var(--gold); border-color: var(--gold); background: rgba(7, 11, 26, .55); }

/* ---- terminal: titled, lit ---- */
.term-head { align-items: center; }
.term-title { flex: 1; text-align: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6B7B9E; }
.term { box-shadow: var(--shadow-card), 0 0 70px -34px rgba(43, 111, 227, .55); }

/* ---- the lab: instrument panel ---- */
.lab-panel { position: relative; border: 1px solid var(--ink); background: var(--paper); padding: 24px clamp(16px, 3vw, 30px) 30px; border-radius: 2px; box-shadow: 9px 9px 0 -2px var(--paper-3); }
.panel-label { display: flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 22px; }
@keyframes lampPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.panel-label::before { content: "●"; color: var(--act2); margin-right: 10px; animation: lampPulse 2.4s ease-in-out infinite; }
.lab-panel .lab-row { margin-bottom: 10px; }
.meter { position: relative; }
.meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--paper-2) calc(10% - 1px), var(--paper-2) 10%); pointer-events: none; }
.meter-scale { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 5px 0 0; }
.meter-verdict { border: 1.5px solid currentColor; padding: 5px 11px; border-radius: 2px; transform: rotate(-2deg); }
.meter-verdict:empty { display: none; }

/* ---- offer: the vault ---- */
.offer-card { position: relative; }
.offer-card.featured { box-shadow: 0 20px 60px -30px rgba(43, 111, 227, .55), 0 0 100px -42px rgba(230, 138, 0, .55); }
.offer-card.featured::before { content: ""; position: absolute; top: 10px; left: 10px; width: 15px; height: 15px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.offer-card.featured::after { content: ""; position: absolute; bottom: 10px; right: 10px; width: 15px; height: 15px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

/* ---- X-ray notes: numbered figures ---- */
body { counter-reset: fig; }
body.xray .xr-note b::before { counter-increment: fig; content: "FIG. " counter(fig, decimal-leading-zero) " ◉ "; color: var(--accent-2); }

/* ---- micro-typography + chrome ---- */
::selection { background: var(--accent); color: #FFFFFF; }
html { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- primary button: light sweep ---- */
.btn-primary { background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .18) 50%, transparent 58%), linear-gradient(var(--ink), var(--ink)); background-size: 260% 100%, 100% 100%; background-position: 125% 0, 0 0; transition: background-position .2s; }
.btn-primary:hover { background-position: -125% 0, 0 0; transition: background-position .75s var(--ease-launch), transform .2s; }

/* ---- colophon ---- */
.colophon { margin: 38px 0 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.wire-glyph { display: inline-block; width: 44px; height: 3px; background: var(--wire-full); vertical-align: 3px; margin-inline: 6px; border-radius: 2px; }

/* ---- reduced motion: the level-up layer stands still ---- */
@media (prefers-reduced-motion: reduce) {
  .issue-line, .hero-kicker, .masthead, .masthead-rule, .hero-sub, .hero-deck,
  .hero .xr, .hero .countdown, .hero-ctas, .hero .seat-line { animation: none; opacity: 1; transform: none; clip-path: none; }
  .cd-num.tick-pop { animation: none; }
  .panel-label::before { animation: none; }
  .btn-primary, .btn-primary:hover { transition: none; background-position: 125% 0, 0 0; }
}

/* ============================================================
   TEMPLATE-3 PORT LAYER · the good stuff from the original
   ============================================================ */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- cover stats (count-ups) ---- */
.cover-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin-top: 40px; border-block: 1px solid var(--rule); animation: heroRise .7s var(--ease-launch) both 1.24s; }
.cover-stats .stat { padding: 18px clamp(18px, 3.4vw, 44px) 14px; }
.cover-stats .stat:first-child { padding-left: 0; }
.cover-stats .stat + .stat { border-left: 1px solid var(--rule); }
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-num .tilde { font-size: .55em; vertical-align: .3em; color: var(--accent); }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; }
@media (max-width: 720px) { .cover-stats { grid-template-columns: repeat(2, 1fr); } .cover-stats .stat:nth-child(3) { border-left: 0; } .cover-stats .stat { padding-inline: 0 18px; } }

/* ---- contents + dotted leaders ---- */
.contents-lite { padding-block: clamp(44px, 6vh, 72px); }
.toc { display: block; max-width: 760px; }
.toc-row { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); padding-block: 8px; border-bottom: 0; }
.toc-title { font-size: 14.5px; color: var(--ink-2); }
.toc-title b { color: var(--ink); font-weight: 600; }
.leader { flex: 1; border-bottom: 1px dotted var(--ink-3); margin: 0 10px; transform: translateY(-5px); opacity: .55; }
.toc-folio { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: .1em; white-space: nowrap; }
a.toc-row:hover .toc-title, a.toc-row:hover .toc-title b, a.toc-row:focus-visible .toc-title { color: var(--accent); }
a.toc-row:hover .toc-folio { color: var(--accent); }

/* ---- the year spine: 52 plates at a glance ---- */
.spine-wrap { margin-top: 42px; position: relative; padding-top: 26px; }
.year-spine { display: flex; align-items: flex-end; gap: 3px; }
.year-spine .tick { flex: 1; min-width: 4px; max-width: 18px; height: 34px; display: block; position: relative; text-decoration: none; transition: transform 150ms var(--ease-launch); transform-origin: bottom; background: transparent; }
.year-spine .tick.live { background: var(--tc); }
.year-spine .tick.forth { border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent); }
.year-spine .tick.reserved { border: 1px dashed var(--gold); }
.year-spine .tick.mega { height: 44px; }
.year-spine .tick.mega::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--tc); }
.year-spine .tick.mega.forth::before { background: transparent; border: 1px solid var(--ink-3); }
.year-spine .tick .ai { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 7px; color: var(--gold); letter-spacing: .08em; }
.year-spine .tick:hover, .year-spine .tick:focus-visible { transform: scaleY(1.35); }
.year-spine .tick:hover::after, .year-spine .tick:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; padding: 6px 10px; border-radius: 3px; white-space: nowrap; z-index: 5; pointer-events: none; }
.year-spine .tick:first-child:hover::after { transform: none; left: 0; }
.year-spine .tick:last-child:hover::after { transform: none; left: auto; right: 0; }
.spine-caption { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 0; }
@media (max-width: 640px) { .year-spine { gap: 2px; } .year-spine .tick .ai { display: none; } }

/* ---- interstitial pull quotes ---- */
.interstitial { border: 1px dashed var(--gold); padding: clamp(30px, 5vw, 60px); margin: 56px 0 8px; }
.interstitial p { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; font-size: clamp(24px, 4vw, 46px); line-height: 1.25; margin: 0; color: var(--ink); text-wrap: balance; }
.interstitial footer { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 20px; }
.quarter[data-q="0"] .interstitial { border-color: var(--act1); }
.quarter[data-q="1"] .interstitial { border-color: var(--act2); }
.quarter[data-q="2"] .interstitial { border-color: var(--act3); }
.quarter[data-q="3"] .interstitial { border-color: var(--act4); }

/* ---- mega plates ---- */
.wk-card.mega { background: var(--bg-mega); border-color: rgba(240, 244, 255, .16); }
.wk-card.mega .wk-title { color: var(--bg-mega-ink); }
.wk-card.mega .wk-author, .wk-card.mega .wk-thesis { color: #A9B5D4; opacity: 1; }
.wk-card.mega .wk-quoteline { color: #7E8BB0; border-left-color: rgba(240, 244, 255, .2); }
.wk-card.mega .wk-no, .wk-card.mega .wk-date, .wk-card.mega .lock-glyph { color: #8FA3FF; }
.wk-card.mega .wk-cta { color: #4A9EFF; }
.wk-card.mega .type-chip { border-color: rgba(240, 244, 255, .28) !important; color: #A9B5D4 !important; }
.wk-card.mega .ghost { color: rgba(240, 244, 255, .07); }
.wk-card.mega .stamp { background: rgba(7, 11, 26, .55); border-color: #8FA3FF; color: #8FA3FF; }
.wk-card.mega.locked { background: var(--bg-mega); }
.wk-card.mega.locked .wk-title, .wk-card.mega.locked .wk-thesis { opacity: .8; }
.mega-overline { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* ---- folio bar: context label + week counter ---- */
.fb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fb-act { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-left: 1px solid var(--rule); padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms, transform 200ms; }
.fb-act.fade { opacity: 0; transform: translateY(-4px); }
@media (max-width: 1100px) { .fb-act { display: none; } }
.fb-counter { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-counter:empty { display: none; }
@media (max-width: 700px) { .fb-counter { display: none; } }

/* ---- jump flash ---- */
@keyframes flashPulse { 0% { box-shadow: 0 0 0 3px var(--accent); background-color: var(--highlight); } 100% { box-shadow: 0 0 0 0 transparent; } }
.wk-card.flash, .bundle.flash { animation: flashPulse 1.4s var(--ease-launch) 1; }

/* ---- reduced motion for the port layer ---- */
@media (prefers-reduced-motion: reduce) {
  .cover-stats { animation: none; opacity: 1; }
  .year-spine .tick, .year-spine .tick:hover { transition: none; transform: none; }
  .wk-card.flash, .bundle.flash { animation: none; }
  .fb-act, .fb-act.fade { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   CINEMA LAYER · film cells, vignette, motes, glass, tint veil
   ============================================================ */

/* ---- tint veil: the wire colors the air per quarter ---- */
.tint-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: transparent; mix-blend-mode: multiply; }
[data-theme="dark"] .tint-veil { mix-blend-mode: screen; }

/* ---- vignette: the edges breathe ---- */
.vignette { position: fixed; inset: 0; z-index: 89; pointer-events: none; background: radial-gradient(ellipse 120% 105% at 50% 45%, transparent 62%, rgba(11, 16, 34, .10) 100%); }
[data-theme="dark"] .vignette { background: radial-gradient(ellipse 120% 105% at 50% 45%, transparent 58%, rgba(0, 0, 0, .38) 100%); }

/* ---- ink motes ---- */
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: .3; animation: moteDrift 16s linear infinite; }
.motes i:nth-child(1) { left: 12%; top: 68%; background: var(--act1); animation-duration: 19s; }
.motes i:nth-child(2) { left: 28%; top: 30%; background: var(--act3); width: 3px; height: 3px; animation-duration: 23s; animation-delay: -6s; }
.motes i:nth-child(3) { left: 55%; top: 74%; background: var(--act2); width: 4px; height: 4px; animation-duration: 17s; animation-delay: -3s; }
.motes i:nth-child(4) { left: 70%; top: 22%; background: var(--act1); width: 3px; height: 3px; animation-duration: 26s; animation-delay: -12s; }
.motes i:nth-child(5) { left: 84%; top: 58%; background: var(--act3); animation-duration: 21s; animation-delay: -9s; }
.motes i:nth-child(6) { left: 42%; top: 46%; background: var(--act4); width: 3px; height: 3px; animation-duration: 24s; animation-delay: -15s; }
@keyframes moteDrift {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: .3; }
  50% { transform: translate3d(28px, -46px, 0); opacity: .18; }
  92% { opacity: .3; }
  100% { transform: translate3d(-16px, -90px, 0); opacity: 0; }
}

/* ---- film cells: the reels ---- */
.film-cell { margin: 44px 0 8px; max-width: 980px; }
.hero-cell { animation: heroRise .7s var(--ease-launch) both 1.36s; margin-top: 38px; }
.cell-frame { position: relative; background: var(--bg-mega); border-radius: 6px; overflow: hidden; aspect-ratio: 21 / 9; box-shadow: var(--shadow-card); }
.cell-frame::before, .cell-frame::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16px; z-index: 3;
  background: var(--bg-mega);
  -webkit-mask: radial-gradient(circle 3.5px at 50% 10px, transparent 97%, black) 50% 0 / 100% 22px repeat-y;
  mask: radial-gradient(circle 3.5px at 50% 10px, transparent 97%, black) 50% 0 / 100% 22px repeat-y;
}
.cell-frame::before { left: 0; }
.cell-frame::after { right: 0; }
.cell-frame video { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease-launch); }
.film-cell.lit .cell-frame video { opacity: 1; }
.cell-frame::selection { background: none; }
.cell-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
.cell-tag::before { content: "▸ "; color: var(--accent-2); }
.offer .cell-tag { color: #8FA3FF; }
.signup .film-cell, .lab .film-cell { max-width: 860px; }

/* ---- glass chrome ---- */
.xray-banner { background: color-mix(in srgb, var(--bg-mega) 78%, transparent); backdrop-filter: blur(12px); }
.offer .offer-card { background: rgba(240, 244, 255, .045); backdrop-filter: blur(8px); }
.offer .offer-card.featured { background: linear-gradient(rgba(15, 22, 48, .82), rgba(15, 22, 48, .82)) padding-box, var(--wire-full) border-box; backdrop-filter: blur(10px); }

/* ---- motion-on refinements ---- */
html.motion-on .rv { transition-duration: .55s; }

/* ---- reduced motion: stills, complete and dignified ---- */
@media (prefers-reduced-motion: reduce) {
  .motes { display: none; }
  .hero-cell { animation: none; opacity: 1; }
  .cell-frame video { transition: none; }
}

/* ============================================================
   BUNDLE FIX · the six foundation cards, unsmooshed
   ============================================================ */
.bundle { padding: 30px 28px 26px; }
.bundle-kicker { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.bundle-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 4.6vw, 58px); line-height: .95; letter-spacing: .02em; margin: 0 0 12px; background: var(--wire-full); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bundle-deck { margin: 0 0 24px; max-width: 680px; font-size: 15px; line-height: 1.7; }
.bundle-grid { gap: 14px; }

/* the cards themselves: flex columns with real hierarchy */
.b-card { display: flex; flex-direction: column; gap: 7px; padding: 18px 18px 16px; border-radius: 8px; }
.b-year { display: block; font-size: 10px; letter-spacing: .18em; }
.b-year::after { content: ""; display: block; width: 26px; height: 2px; background: var(--wire-full); margin-top: 7px; border-radius: 1px; }
.b-title { display: block; font-size: 23px; line-height: 1.04; margin: 2px 0 0; }
.b-author { display: block; font-size: 12.5px; letter-spacing: .01em; }
.b-line { display: block; font-size: 13px; line-height: 1.62; margin-top: 2px; }
.b-read { display: block; margin-top: auto; padding-top: 10px; }
.b-card:hover .b-title { color: transparent; background: var(--wire-full); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 640px) { .bundle { padding: 24px 18px 20px; } .bundle-kicker { flex-wrap: wrap; } }

/* ---- operator mode badge ---- */
.operator-badge { position: fixed; left: 16px; bottom: 16px; z-index: 72; background: color-mix(in srgb, var(--bg-mega) 82%, transparent); backdrop-filter: blur(10px); color: var(--bg-mega-ink); border: 1.5px dashed var(--gold); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; }
.operator-badge b { color: var(--gold); font-weight: 500; }
.operator-badge:hover { border-style: solid; }

/* ---- signup grid: name, company, email + verification states ---- */
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; }
.signup-grid input[type="text"], .signup-grid input[type="email"] { font-size: 16px; padding: 15px 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); min-width: 0; font-family: 'Inter', sans-serif; }
.signup-grid input:focus { border-color: var(--accent); outline: none; }
.signup-grid input[type="email"] { grid-column: 1; }
.signup-grid .btn-primary { grid-column: 2; border: 0; }
@media (max-width: 640px) { .signup-grid { grid-template-columns: 1fr; } .signup-grid input[type="email"], .signup-grid .btn-primary { grid-column: 1; } }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; opacity: 0; }
.field-error { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--accent-2); max-width: 640px; margin: 10px 0 0; min-height: 1em; }
.field-error:empty { display: none; }

/* ---------- canon telemetry: animated wave plot + live stats (template-3 vibe) ---------- */
.canon-telemetry { margin: 6px 0 30px; }
.cp-wrap { position: relative; }
#canon-plot { width: 100%; height: auto; display: block; overflow: visible; }
#canon-plot .cp-grid line { stroke: var(--ink); stroke-opacity: .05; stroke-width: 1; }
.cp-line { fill: none; stroke: var(--ink-3); stroke-opacity: .3; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .15, 1); }
#canon-plot .cp-node { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .85, .25, 1); }
#canon-plot.go .cp-node { opacity: 1; transform: scale(1); }
.cp-node.live { fill: var(--tc); stroke: var(--tc); stroke-width: 1.4; }
.cp-node.forth { fill: var(--paper); stroke: var(--tc); stroke-width: 1.6; }
.cp-node.open { stroke-dasharray: 2.4 2.4; }
.cp-node:hover { filter: brightness(1.12); }
.cp-pulse { fill: none; stroke: var(--tc); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; }
#canon-plot.go .cp-pulse { animation: cpPulse 2.6s ease-out infinite; animation-delay: 1.5s; }
@keyframes cpPulse { 0% { transform: scale(1); opacity: .75; } 70% { transform: scale(2.7); opacity: 0; } 100% { opacity: 0; } }
.cp-tw { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .16em; fill: var(--ink-2); text-transform: uppercase; opacity: 0; transition: opacity .5s ease .9s; }
#canon-plot.go .cp-tw { opacity: 1; }

.canon-stats { display: flex; flex-wrap: wrap; margin-top: 16px; border-top: 1px solid var(--rule); }
.cstat { flex: 1 1 0; min-width: 116px; padding: 20px 10px 4px; }
.cstat + .cstat { border-left: 1px solid var(--rule); }
.cstat-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 4.6vw, 66px); line-height: .9; color: var(--act1); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cstat:nth-child(2) .cstat-num { color: var(--act2); }
.cstat:nth-child(3) .cstat-num { color: var(--act3); }
.cstat:nth-child(4) .cstat-num { color: var(--act4); }
.cstat:nth-child(5) .cstat-num { color: var(--act1); }
.cstat:nth-child(6) .cstat-num { color: var(--ink-3); }
.cstat-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 720px) { .cstat { flex-basis: 33.33%; } .cstat:nth-child(3n+1) { border-left: 0; } }

.plates-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.plates-status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cp-line { transition: none !important; stroke-dashoffset: 0 !important; }
  #canon-plot .cp-node { opacity: 1 !important; transform: none !important; transition: none !important; }
  #canon-plot.go .cp-pulse { animation: none; opacity: .5; }
  .cp-tw { opacity: 1 !important; transition: none; }
}

/* ============================================================
   THE OPENER · intro overlay, slams, tunnel, kinetic masthead,
   authors marquee (the buckssauce-inspired layer, our palette)
   ============================================================ */

#intro-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: #04060F; cursor: pointer; transition: opacity .85s var(--ease-launch); }
html.intro-live #intro-overlay { display: block; }
html.intro-live { overflow: hidden; }
#intro-overlay.intro-out { opacity: 0; pointer-events: none; }

.intro-3d { position: absolute; inset: 0; }
.intro-3d canvas { display: block; }

.intro-slams { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #4A9EFF; transition: opacity .43s cubic-bezier(.4, 0, .2, 1); z-index: 2; }
.intro-slams.slams-out { opacity: 0; pointer-events: none; }
.slam-word { font-family: 'Bebas Neue', sans-serif; font-size: clamp(84px, 19vw, 280px); line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.slam-word span { display: inline-block; animation: slamPop .3s var(--ease-launch) both; }
@keyframes slamPop { from { opacity: 0; transform: translateY(.45em) rotate(5deg) scale(.72); } to { opacity: 1; transform: none; } }

.intro-caption { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3; margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #8FA3FF; opacity: 0; transition: opacity .8s .2s; white-space: nowrap; }
.intro-caption.show { opacity: 1; }
.intro-skip { position: absolute; top: 22px; right: 24px; z-index: 4; background: none; border: 1px solid rgba(240,244,255,.3); color: #F0F4FF; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 3px; cursor: pointer; }
.intro-skip:hover { border-color: #F0F4FF; }

/* ---- kinetic masthead: outer span moves, inner span holds the clip ---- */
html.kinetic .masthead { animation: none; opacity: 1; clip-path: none; filter: none; background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); }
.m-char { display: inline-block; animation: charPop .6s var(--ease-launch) both; }
.m-char i { font-style: normal; background-image: var(--wire); background-size: 700% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes charPop { from { opacity: 0; transform: translateY(.38em) rotate(7deg) scale(.76); } to { opacity: 1; transform: none; } }

/* ---- authors marquee ---- */
.authors-marquee { overflow: hidden; border-block: 1px solid var(--rule); padding: 13px 0; background: var(--paper); }
.am-track { display: flex; gap: 52px; width: max-content; animation: marq 46s linear infinite; }
.authors-marquee:hover .am-track { animation-play-state: paused; }
.am-track span { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.am-track span i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 10px; color: var(--ink-3); vertical-align: 6px; margin-left: 7px; }
.am-track span:nth-child(4n+1) { color: var(--act1); }
.am-track span:nth-child(4n+2) { color: var(--act2); }
.am-track span:nth-child(4n+3) { color: var(--act3); }
@keyframes marq { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none !important; }
  .slam-word span, .m-char { animation: none; opacity: 1; transform: none; }
  .m-char i { background: none; color: var(--ink); }
  .am-track { animation: none; }
}

/* ============================================================
   THE FLIGHT · scroll-driven book tunnel + rolling headlines
   ============================================================ */
.flight { height: 340vh; position: relative; background: #04060F; }
.flight-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.flight-3d, .flight-3d canvas { position: absolute; inset: 0; display: block; }
.flight-copy { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.flight-copy span { grid-area: 1 / 1; font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 7.5vw, 118px); line-height: 1; letter-spacing: .03em; color: #F0F4FF; text-align: center; padding-inline: 24px; opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease-launch), transform .55s var(--ease-launch); text-shadow: 0 6px 44px rgba(0, 0, 0, .65); }
.flight-copy span.on { opacity: 1; transform: none; }
.flight-copy .beat-wire { background: var(--wire-full); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

@media (prefers-reduced-motion: reduce) { .flight { display: none !important; } }

/* ---- rolling headlines ---- */
.rolled { perspective: 700px; }
.roll-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.roll-char { display: inline-block; white-space: pre; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .roll-char { transform: none !important; opacity: 1 !important; } }

/* ============================================================
   SVG MASTHEAD · the wordmark that cannot fail
   SVG gradient fill: no background-clip, no filters, no
   compositor tricks. Renders in every engine, every protocol.
   ============================================================ */
.masthead.masthead-svg { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: inherit; filter: none !important; clip-path: none !important; animation: mastIn .9s var(--ease-launch) both .25s; }
.masthead-svg svg { display: block; width: 100%; max-width: 1120px; height: auto; overflow: visible; }
.mast-text { font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; font-size: 122px; letter-spacing: .01em; }
html.kinetic .masthead.masthead-svg { animation: mastIn .9s var(--ease-launch) both .05s; }
/* the wordmark ramp is hard-coded in the SVG: white, blue, red, orange, matching FourthWeb and Travis Wright exactly */
[data-theme="light"] .masthead-svg svg { filter: drop-shadow(0 1px 1px rgba(11, 16, 34, .3)); }

/* ============================================================
   THE DOTS + CIRCLE WIPES · four colors land in front of MRKT.NG
   ============================================================ */
.masthead.masthead-svg { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 30px); }
/* height-driven sizing: the svg widths itself from Bebas's natural
   condensed metrics, so the mark matches FourthWeb and TravisWright
   exactly. No textLength, no stretching, ever. */
.masthead-svg svg { flex: none; width: auto; height: clamp(68px, 12vw, 176px); max-width: 100%; }
.mast-dots { display: flex; gap: clamp(7px, .9vw, 15px); flex: none; }
.mast-dots i { width: clamp(12px, 1.5vw, 24px); height: clamp(12px, 1.5vw, 24px); border-radius: 50%; animation: dotPop .55s var(--ease-launch) both; }
.mast-dots i:nth-child(1) { background: var(--wire1); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); animation-delay: .55s; }
.mast-dots i:nth-child(2) { background: var(--wire2); animation-delay: .66s; }
.mast-dots i:nth-child(3) { background: var(--wire3); animation-delay: .77s; }
.mast-dots i:nth-child(4) { background: var(--wire4); animation-delay: .88s; }
@keyframes dotPop { 0% { opacity: 0; transform: scale(0); } 62% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
html.kinetic .mast-dots i { animation-duration: .45s; }

/* circle wipe between slam grounds */
.intro-slams { overflow: hidden; }
.slam-circle { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%; transform: scale(0); z-index: 1; }
.slam-circle.grow { transition: transform .43s cubic-bezier(.4, 0, .2, 1); transform: scale(1); }
.slam-word { position: relative; z-index: 2; transition: opacity .3s var(--ease-launch), transform .3s var(--ease-launch); }
.slam-word.out { opacity: 0; transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  .mast-dots i { animation: none; opacity: 1; transform: none; }
  .slam-circle { transition: none; }
}

/* ---- the bonus shelf ---- */
.q-name.q-bonus { color: var(--gold); }
.wk-card.bonus .type-chip { border-color: var(--gold); color: var(--gold); }
.wk-card.bonus .ghost { color: var(--gold); opacity: .18; font-size: 92px; bottom: -8px; }
.wk-card.bonus::after { background: var(--gold); }

/* ---- rotating quote deck ---- */
.interstitial p, .interstitial footer { transition: opacity .45s var(--ease-launch), transform .45s var(--ease-launch); }
.interstitial.q-swap p, .interstitial.q-swap footer { opacity: 0; transform: translateY(12px); }
.interstitial p { min-height: 2.6em; }
@media (prefers-reduced-motion: reduce) { .interstitial p, .interstitial footer { transition: none; } }

/* signup consent microcopy */
.signup-consent { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 0; }
.signup-consent a { color: var(--accent); }

/* ============ buckssauce deck: quarter plates pin and stack ============ */
.quarter .q-head { position: sticky; top: 120px; z-index: 6; background-color: color-mix(in srgb, var(--paper) 93%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 18px; margin-bottom: 18px; box-shadow: 0 22px 44px -20px rgba(4, 6, 15, .5); }

/* ============ hex layer: honeycomb texture (buzzworthy homage) ============ */
:root { --hexpat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%231B2A6B' fill-opacity='.05' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E"); }
[data-theme="dark"] { --hexpat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23F0F4FF' fill-opacity='.05' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E"); }
.quarter .q-head, .interstitial { background-image: var(--hexpat); }

/* ============ the ambient library: books behind everything at 33% ============ */
.ambient-books { position: fixed; inset: 0; z-index: 0; opacity: .33; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }
.tint-veil { z-index: 2; }   /* stays above content now that main is positioned */

/* footer lockup + mobile wordmark hardening */
.foot-lockup { margin-bottom: 8px; }
.foot-mark { height: 26px; }
[data-theme="light"] .foot-mark { filter: drop-shadow(0 1px 1px rgba(11, 16, 34, .3)); }
.mast-text { text-rendering: geometricPrecision; }
@media (max-width: 760px) {
  .masthead-svg svg { height: auto; width: min(86vw, 340px); max-width: 100%; }
}

/* hex plates: solid enough that the ambient library stays in its lane */
.interstitial { background-color: color-mix(in srgb, var(--paper) 86%, transparent); }

/* hero byline links */
.deck-link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.deck-link:hover { color: var(--accent); }

/* the cards keep feeling like cards */
#how .step { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
#how .step:hover { transform: translateY(-7px) rotate(-1.3deg) scale(1.015); box-shadow: 0 26px 50px -24px rgba(4, 6, 15, .65); }
#how .step:nth-child(2):hover { transform: translateY(-7px) rotate(1.1deg) scale(1.015); }

/* each card glows its own wire color from beneath */
#how .step:nth-child(1) { border-color: color-mix(in srgb, var(--act1) 40%, var(--rule)); box-shadow: 0 18px 46px -20px color-mix(in srgb, var(--act1) 42%, transparent); }
#how .step:nth-child(2) { border-color: color-mix(in srgb, var(--act2) 40%, var(--rule)); box-shadow: 0 18px 46px -20px color-mix(in srgb, var(--act2) 42%, transparent); }
#how .step:nth-child(3) { border-color: color-mix(in srgb, var(--act3) 40%, var(--rule)); box-shadow: 0 18px 46px -20px color-mix(in srgb, var(--act3) 42%, transparent); }
#how .step:nth-child(1):hover { box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--act1) 55%, transparent), 0 36px 74px -22px color-mix(in srgb, var(--act1) 62%, transparent); }
#how .step:nth-child(2):hover { box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--act2) 55%, transparent), 0 36px 74px -22px color-mix(in srgb, var(--act2) 62%, transparent); }
#how .step:nth-child(3):hover { box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--act3) 55%, transparent), 0 36px 74px -22px color-mix(in srgb, var(--act3) 62%, transparent); }

/* quarter plates: undertone wash + 1px border in the quarter's color */
.quarter[data-q="0"] .q-head { border-color: color-mix(in srgb, var(--act1) 58%, transparent); background-image: linear-gradient(285deg, color-mix(in srgb, var(--act1) 17%, transparent), transparent 58%), var(--hexpat); }
.quarter[data-q="1"] .q-head { border-color: color-mix(in srgb, var(--act2) 58%, transparent); background-image: linear-gradient(285deg, color-mix(in srgb, var(--act2) 17%, transparent), transparent 58%), var(--hexpat); }
.quarter[data-q="2"] .q-head { border-color: color-mix(in srgb, var(--act3) 58%, transparent); background-image: linear-gradient(285deg, color-mix(in srgb, var(--act3) 17%, transparent), transparent 58%), var(--hexpat); }
.quarter[data-q="3"] .q-head { border-color: color-mix(in srgb, var(--act4) 58%, transparent); background-image: linear-gradient(285deg, color-mix(in srgb, var(--act4) 17%, transparent), transparent 58%), var(--hexpat); }
.bonus-row .q-head { border-color: color-mix(in srgb, var(--gold) 58%, transparent); background-image: linear-gradient(285deg, color-mix(in srgb, var(--gold) 15%, transparent), transparent 58%), var(--hexpat); }

/* ============ the library wall finale ============ */
.wall-sec { position: relative; }
.wall-sec .wall-3d, .wall-sec .wall-veil { display: none; }
.wall-finale { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 110px 24px; }
.wall-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--ink-3); margin: 0; }
.wall-dots { display: inline-flex; gap: 9px; }
.wall-dots i { width: 13px; height: 13px; }
.wall-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(46px, 7vw, 100px); line-height: .95; color: var(--ink); margin: 0; }
.wall-deck { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 580px; margin: 0; }
.wall-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 12px 0 0; }
.wall-live { height: 240vh; }
.wall-live .wall-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.wall-live .wall-3d { display: block; position: absolute; inset: 0; }
.wall-live .wall-veil { display: block; position: absolute; inset: 0; background: #04060F; opacity: 0; pointer-events: none; }
.wall-live .wall-finale { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.wall-live .wall-finale.on { opacity: 1; pointer-events: auto; }
.wall-live .wall-title, .wall-live .wall-deck { color: #F0F4FF; }
.wall-live .wall-deck { color: #B8C4E6; }

/* ============ the mirror: the page reads the visitor ============ */
.mirror-toast { position: fixed; right: 20px; bottom: 20px; z-index: 71; max-width: 352px; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px 13px; box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.mirror-toast::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--wire-full); border-radius: 10px 10px 0 0; }
.mirror-toast.show { opacity: 1; transform: none; }
.mirror-kicker { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .2em; color: var(--ink-3); margin: 0 0 8px; }
.mirror-x { background: none; border: 0; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 0 0 10px; }
.mirror-body { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.62; color: var(--ink); margin: 0 0 10px; }
.mirror-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; }
.mirror-cite { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .1em; color: var(--accent); text-decoration: none; }
.mirror-cite:hover { text-decoration: underline; }
.mirror-stop { background: none; border: 0; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-decoration: underline; cursor: pointer; white-space: nowrap; padding: 0; }
@media (max-width: 760px) { .mirror-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .mirror-toast { transition: opacity .3s ease; transform: none; } }

/* ============ the ladder wears the wire: blue, red, full gradient ============ */
.offer-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1); overflow: hidden; }
.offer-card:not(.featured)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 10px 10px 0 0; }
.offer-grid .offer-card:nth-child(1)::before { background: var(--act1); }
.offer-grid .offer-card:nth-child(2)::before { background: var(--act2); }
.offer-grid .offer-card:nth-child(1) { border-color: color-mix(in srgb, var(--act1) 45%, transparent); box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--act1) 42%, transparent); }
.offer-grid .offer-card:nth-child(2) { border-color: color-mix(in srgb, var(--act2) 45%, transparent); box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--act2) 42%, transparent); }
.offer-grid .offer-card:nth-child(1) .oc-name, .offer-grid .offer-card:nth-child(1) .oc-price { color: var(--act1); }
.offer-grid .offer-card:nth-child(2) .oc-name, .offer-grid .offer-card:nth-child(2) .oc-price { color: var(--act2); }
.offer-grid .offer-card:nth-child(1):hover { transform: translateY(-6px); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--act1) 55%, transparent), 0 36px 74px -22px color-mix(in srgb, var(--act1) 62%, transparent); }
.offer-grid .offer-card:nth-child(2):hover { transform: translateY(-6px); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--act2) 55%, transparent), 0 36px 74px -22px color-mix(in srgb, var(--act2) 62%, transparent); }
.oc-foot { margin-top: auto; padding-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.oc-ghost { position: absolute; right: 14px; bottom: 4px; font-family: 'Bebas Neue', sans-serif; font-size: 104px; line-height: 1; opacity: .1; pointer-events: none; }
.offer-grid .offer-card:nth-child(1) .oc-ghost { color: var(--act1); }
.offer-grid .offer-card:nth-child(2) .oc-ghost { color: var(--act2); }

/* the founder: full white-blue-red-orange ring, gradient bloom on hover */
.offer-card.featured { border-width: 2px; }
.offer-card.featured:hover { transform: translateY(-6px); box-shadow:
  -26px 20px 64px -24px rgba(74, 158, 255, .5),
  0 26px 72px -20px rgba(255, 68, 68, .42),
  26px 20px 64px -24px rgba(255, 169, 0, .52),
  0 -12px 48px -26px rgba(240, 244, 255, .32); }

/* ============ WHY SKILLS: the manifesto ============ */
.why-lead { font-family: 'Inter', sans-serif; font-size: clamp(21px, 2.9vw, 33px); line-height: 1.52; font-weight: 300; color: var(--ink); max-width: 1020px; margin: 6px 0 46px; }
.why-lead .hi { font-weight: 600; font-style: normal; background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 3px; padding-bottom: 3px; }
.hi-w { background-image: var(--wire-full); }
.hi-b { background-image: linear-gradient(var(--act1), var(--act1)); }
.hi-r { background-image: linear-gradient(var(--act2), var(--act2)); }
.hi-o { background-image: linear-gradient(var(--act3), var(--act3)); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 46px; }
.why-card { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; padding: 24px 22px; background-color: color-mix(in srgb, var(--paper) 88%, transparent); background-image: var(--hexpat); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1); }
.why-card:hover { transform: translateY(-6px); }
.why-card[data-w="1"] { border-color: color-mix(in srgb, var(--act1) 42%, var(--rule)); box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--act1) 40%, transparent); }
.why-card[data-w="2"] { border-color: color-mix(in srgb, var(--act2) 42%, var(--rule)); box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--act2) 40%, transparent); }
.why-card[data-w="3"] { border-color: color-mix(in srgb, var(--act3) 42%, var(--rule)); box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--act3) 40%, transparent); }
.why-num { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em; margin: 0 0 12px; }
.why-card[data-w="1"] .why-num { color: var(--act1); }
.why-card[data-w="2"] .why-num { color: var(--act2); }
.why-card[data-w="3"] .why-num { color: var(--act3); }
.why-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .01em; color: var(--ink); margin: 0 0 10px; }
.why-card p:last-child { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.why-meter { display: grid; gap: 16px; max-width: 920px; margin: 0 0 42px; }
.wm-row { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 5px; align-items: center; }
.wm-label { grid-row: 1 / 3; font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--ink); }
.wm-bar { display: block; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.wm-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.wm-row:nth-child(1) .wm-fill { background: var(--act1); }
.wm-row:nth-child(2) .wm-fill { background: var(--act2); }
.wm-fill.wm-full { background: var(--wire-full); }
.wm-cap { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--ink-3); }
.why-close { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 660px; }
@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr; } }

/* the wordmark renders in Bebas or not at all (no fat fallback flash) */
#mast-svg, .fb-mark { opacity: 0; transition: opacity .3s ease; }
html.fonts-ready #mast-svg, html.fonts-ready .fb-mark { opacity: 1; }

/* ============ v43: audit fixes + mobile lockup + drawer + folding ============ */
/* mobile hero lockup: dots + wordmark together span exactly the rule line */
@media (max-width: 760px) {
  .masthead.masthead-svg { display: flex; align-items: center; gap: 12px; width: 100%; }
  .mast-dots { flex: none; }
  .mast-dots i { width: 8px; height: 8px; }
  .masthead-svg svg { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; max-width: none; }
}
/* headlines wrap at word boundaries, never mid-word */
.roll-word { display: inline-block; white-space: nowrap; }
/* frosted surfaces fall back to solid paper on old browsers */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .folio-bar, .canon-tools, .quarter .q-head, .mirror-toast, .operator-badge, .offer-card { background: var(--paper); }
}
/* toasts and the operator badge above the film grain */
.mirror-toast { z-index: 95; }
.operator-badge { z-index: 96; }
/* the white end of the wire underline is invisible on paper */
[data-theme="light"] .hi-w { background-image: linear-gradient(90deg, #2B6FE3, #E04040 55%, #E68A00); }
/* wall finale CTAs readable in both themes */
.wall-live .wall-finale .btn-ghost { color: #F0F4FF; border-color: rgba(240, 244, 255, .45); }
.wall-live .wall-finale .btn-primary { background: #F0F4FF; color: #0B1022; }
/* burger */
.fb-burger { display: none; flex: none; width: 40px; height: 38px; border: 1px solid var(--rule); border-radius: 6px; background: none; cursor: pointer; padding: 10px 9px; flex-direction: column; justify-content: space-between; }
.fb-burger i { display: block; height: 2px; border-radius: 1px; }
.fb-burger i:nth-child(1) { background: var(--act1); }
.fb-burger i:nth-child(2) { background: var(--act2); }
.fb-burger i:nth-child(3) { background: var(--act3); }
@media (max-width: 899px) {
  .fb-burger { display: flex; }
  .fb-right .xray-toggle, .fb-right .theme-toggle { display: none; }
}
/* drawer */
.nav-drawer { position: fixed; inset: 0; z-index: 120; display: none; }
.nav-drawer.open { display: block; }
.nd-back { position: absolute; inset: 0; background: rgba(4, 6, 15, .62); backdrop-filter: blur(3px); }
.nd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--paper); border-left: 1px solid var(--rule); padding: 20px 22px 28px; overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(.22, 1, .36, 1); display: flex; flex-direction: column; }
.nav-drawer.open .nd-panel { transform: none; }
.nd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.nd-close { background: none; border: 0; color: var(--ink-3); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.nd-sec { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 4px; }
.nd-panel .nd-link { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; text-decoration: none; color: var(--ink); font-family: 'Inter', sans-serif; font-size: 14.5px; padding: 12px 2px; }
.nd-link b { float: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--accent); font-weight: 500; margin-top: 2px; }
.nd-foot { margin-top: auto; padding-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; color: var(--ink-3); }
.nd-foot a { color: inherit; }
/* collapsible quarters */
.q-toggle { order: 100; margin-left: 8px; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--ink-2); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; line-height: 1; align-self: center; white-space: nowrap; }
.q-toggle b { font-weight: 400; font-size: 11px; }
.q-toggle:hover { border-color: var(--accent); color: var(--ink); }
.quarter.q-collapsed .container > *:not(.q-head) { display: none; }
.quarter.q-collapsed .q-head { margin-bottom: 0; }

/* intro caption: static line on desktop, seamless ticker on mobile */
.cap-run:last-child { display: none; }
@media (max-width: 760px) {
  .intro-caption { overflow: hidden; white-space: nowrap; width: 100%; max-width: 100%; text-overflow: clip; }
  .cap-track { display: inline-flex; animation: capTicker 16s linear infinite; will-change: transform; }
  .cap-run { display: inline-block; flex: none; padding-right: 8px; }
  .cap-run:last-child { display: inline-block; }
  @keyframes capTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .cap-track { animation: none; }
  .intro-caption { white-space: normal; }
}

/* reel three stands alone between the manifesto and the signup */
.reel-solo { padding-block: clamp(16px, 3vw, 40px); }


/* thin black stroke on the flight copy, riding over the wire glow */
.flight-copy span { -webkit-text-stroke: 1.3px rgba(4, 6, 15, .88); paint-order: stroke fill; }

/* flight copy as SVG wordmarks: gradient fill, real stroke, immune to clip bugs */
.flight-copy .fc-mark { display: block; height: clamp(42px, 7.5vw, 118px); width: auto; max-width: 92vw; }

/* ============ unified reading voice: every lead paragraph speaks
   like the manifesto (light weight, generous leading) ============ */
.sec-deck { font-weight: 300; font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.72; color: var(--ink-2); max-width: 760px; }
.sec-deck b, .sec-deck strong { font-weight: 600; }
.hero-deck { font-weight: 300; line-height: 1.72; }
.wall-deck { font-weight: 300; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.72; }
.why-close { font-weight: 300; font-size: clamp(16.5px, 1.6vw, 20px); }

/* ============ THE TYPE CANON: one voice, three registers ============
   Register 1, LEADS: Inter 300, 18-24px, 1.62, bright ink, underline accents.
   Register 2, CARD BODIES: Inter 400, 15px, 1.72, secondary ink.
   Register 3, CARD TITLES: Bebas 25px. Headlines were already consistent. */
.why-lead, .sec-deck, .hero-deck, .wall-deck, .why-close {
  font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: clamp(18px, 2.05vw, 24px); line-height: 1.62;
  color: var(--ink); max-width: 880px;
}
.sec-deck b, .sec-deck strong, .hero-deck b, .hero-deck strong { font-weight: 600; }
#how .step p, .why-card p:last-child { font-size: 15px; line-height: 1.72; color: var(--ink-2); }
#how .step h3, .why-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 25px; letter-spacing: .015em; line-height: 1.1; margin: 0 0 10px; }

/* ============ type canon, full sweep ============ */
/* quarter intros join the lead register */
.q-deck { font-family: 'Inter', sans-serif; font-weight: 300; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.62; color: var(--ink); max-width: 880px; }
/* detail register: FAQ answers and offer notes align to 15/1.72 */
.faq .a { font-size: 15px; line-height: 1.72; color: var(--ink-2); }
.oc-note { font-size: 15px; line-height: 1.72; }
/* the byline wears the house underlines */
.deck-link { text-decoration: none; color: inherit; font-weight: 600; background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 3px; padding-bottom: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: filter .25s ease; }
.deck-link:hover { filter: brightness(1.25); color: inherit; }
.dl-wire { background-image: var(--wire-full); }
.dl-red { background-image: linear-gradient(var(--act2), var(--act2)); }
.dl-orange { background-image: linear-gradient(var(--act3), var(--act3)); }
[data-theme="light"] .dl-wire { background-image: linear-gradient(90deg, #2B6FE3, #E04040 55%, #E68A00); }
/* underlined lead phrases wrap cleanly on mobile too */
.hi { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* drawer header lockup */
.nd-head .fb-mark { height: 19px; }
.nd-head .fb-brand { display: inline-flex; align-items: center; gap: 8px; }

/* byline links announce themselves: chain glyph up front, full bold */
.deck-link { font-weight: 700; }
.deck-link::before { content: "\1F517"; font-size: .72em; margin-right: .32em; vertical-align: 2%; }