/* ============================================================
   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 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-decoration: none; }
.fb-brand b { color: var(--accent); font-weight: 500; }
.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; }
[data-theme="dark"] .masthead { filter: brightness(1.15); }
.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; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 -2% 0 0); } }
@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; }
}