:root {
  --ink: #111111;
  --ink-2: #1c1b1a;
  --ink-line: #3a3936;
  --paper: #f5f3ee;
  --white: #ffffff;
  --muted: #66635d;
  --muted-l: #cfcbc3;
  --rule: #d8d4cd;
  --accent: #c62828;
  --accent-dark: #8f1717;
  --nav-h: 60px;
  --gut: clamp(16px, 6.6vw, 96px);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--sans); overflow-x: hidden; }
img, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
section[id] { scroll-margin-top: var(--nav-h); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--white); }
.red { color: var(--accent); }
.strong { font-weight: 700; font-family: var(--sans); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--white); padding: 10px 14px; font: 700 13px var(--mono); }
.skip:focus { top: 12px; }

/* Progress + nav */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(16px, 2.8vw, 40px); background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--ink-line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { font: 22px var(--display); color: var(--accent); }
.brand-name { font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav-links a { font: 500 14px var(--sans); color: var(--muted-l); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav-links a:hover { color: var(--paper); border-color: var(--accent); }
.nav-ref { font: 11px var(--mono); letter-spacing: .06em; color: var(--accent); border: 1px solid var(--accent); padding: 8px 12px; }
.menu-btn { display: none; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 0 10px 12px; }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 16px 26px; font: 700 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid currentColor; transition: background .2s, color .2s; }
.btn-red { background: #c62828; border-color: #c62828; color: var(--white); }
.btn-red:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-line.light { color: var(--paper); }
.btn-line.light:hover { background: var(--paper); color: var(--ink); }

/* Hero */
.hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(40px, 6.6vw, 96px); padding: clamp(24px, 4vw, 56px) var(--gut) clamp(48px, 5vw, 80px); background: var(--ink); color: var(--paper); min-height: calc(100svh - var(--nav-h)); }
.hero-media { display: grid; gap: 12px; justify-items: center; }
.video-frame { position: relative; width: min(450px, calc((100svh - var(--nav-h) - 110px) * 9 / 16)); min-width: 240px; aspect-ratio: 9 / 16; background: #000; border: 1px solid var(--ink-line); overflow: hidden; }
.video-frame::before, .video-frame::after { content: ""; position: absolute; width: 18px; height: 18px; z-index: 2; pointer-events: none; border: 2px solid var(--accent); }
.video-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.video-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
/* contain, not cover: the evidence is never cropped */
.video-frame video, .video-frame iframe { width: 100%; height: 100%; object-fit: contain; background: #000; border: 0; }
.rec { position: absolute; top: 40px; left: 40px; display: flex; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: .12em; color: var(--paper); }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.6s steps(2) infinite; }
.rec.on-video { top: 24px; left: 24px; z-index: 2; pointer-events: none; text-shadow: 0 1px 6px rgb(0 0 0 / .8); }
@keyframes blink { 50% { opacity: 0; } }
.video-note { font: 11px var(--mono); color: var(--muted); text-align: center; }
.hero-copy { display: grid; gap: 24px; max-width: 760px; }
.hero-copy h1 { display: grid; gap: 20px; }
.friend { font: 700 13px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-l); }
/* Eureka Forbes logo on a white chip (blue mark is unreadable on dark). .struck strikes the tagline line. */
.ef-logo { position: relative; justify-self: start; display: inline-block; background: var(--white); padding: 12px 16px; }
.ef-logo img { width: 230px; height: auto; }
.ef-logo.small img { width: 170px; }
.ef-logo.struck::after { content: ""; position: absolute; left: 12px; width: 72%; top: 72%; height: 3px; background: #c62828; transform: rotate(-2deg); }
.friend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.godmode .ef-logo { margin: 4px 0 6px; }
.foot .ef-logo { margin-bottom: 12px; }
.friend s, .foot-friend s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.eyebrow, .kicker { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.display { font: 400 clamp(64px, 10.3vw, 152px)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.lede { font: italic clamp(24px, 2.8vw, 40px)/1.1 var(--serif); }
.hero hr { border: 0; border-top: 1px solid var(--ink-line); margin: 0; }
.hero-sum { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--muted-l); max-width: 620px; }
.hero-kicker { font-weight: 700; font-size: 18px; color: var(--accent); }

/* Ticker */
.ticker { background: var(--accent); color: var(--white); overflow: hidden; padding: 16px 0; }
.ticker-track { display: flex; width: max-content; animation: tick 50s linear infinite; }
.ticker span { font: 26px var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.ticker span::after { content: "■"; font-size: 12px; margin: 0 40px; vertical-align: middle; opacity: .6; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Sections */
.sec { padding: clamp(72px, 8.3vw, 120px) var(--gut); display: grid; gap: clamp(32px, 3.4vw, 48px); }
.paper { background: var(--paper); }
.white { background: var(--white); }
.ink { background: var(--ink); color: var(--paper); }
/* dark surfaces: lighter muted + brighter red so small text passes AA */
.nav, .hero, .ink, .godmode, .foot, .lightbox { --muted: #9d9992; --accent: #ff6a5c; }
.kicker { display: flex; align-items: center; gap: 16px; color: inherit; }
.kicker b { color: var(--accent); }
.kicker i { width: 48px; height: 1px; background: var(--accent); }
.h2 { font: 400 clamp(44px, 6.1vw, 88px)/.98 var(--display); text-transform: uppercase; max-width: 15ch; }
.h2.wide { max-width: 19ch; }
.body { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: 620px; display: grid; gap: 18px; }
.muted-l { color: var(--muted-l); }
.quote { font: italic clamp(30px, 3.1vw, 44px)/1.1 var(--serif); max-width: 22ch; }
.quote.big { max-width: 28ch; }
.quote.light { color: var(--paper); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6.6vw, 96px); align-items: start; }

/* Economics */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); }
.fig { display: grid; align-content: start; gap: 14px; padding: 28px 28px 0; border-top: 2px solid var(--ink); }
.fig:first-child { padding-left: 0; }
.fig + .fig { border-left: 1px solid var(--rule); }
.idx { font: 12px var(--mono); letter-spacing: .1em; color: var(--muted); }
.fig strong { font: 400 clamp(56px, 6.1vw, 92px)/.95 var(--display); text-transform: uppercase; }
.fig p { color: var(--muted); max-width: 32ch; }
.fig p b { color: var(--ink); font-family: var(--mono); font-size: 13px; letter-spacing: .08em; }

/* Satire: subscription card */
.plan { justify-self: start; width: min(100%, 460px); background: var(--white); border: 1.5px solid var(--ink); padding: 32px; display: grid; gap: 10px; box-shadow: 10px 10px 0 var(--accent); transform: rotate(-1.2deg); }
.plan-tag { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: var(--ink); justify-self: start; padding: 8px 12px; }
.plan-name { font: 400 18px var(--sans); margin-top: 8px; }
.plan-name b { display: block; font: 400 48px/1 var(--display); letter-spacing: .01em; color: var(--accent); }
.plan-sub { font: italic 22px var(--serif); }
.plan-price { font: 400 56px/1 var(--display); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 4px; }
.plan-price small { display: block; font: 12px var(--mono); color: var(--muted); margin-top: 6px; letter-spacing: .04em; }
.plan ul { display: grid; gap: 8px; margin: 6px 0; }
.plan li { padding-left: 26px; position: relative; font-size: 15px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.plan figcaption { font: 11px/1.5 var(--mono); color: var(--muted); border-top: 1px dashed var(--rule); padding-top: 12px; }

/* Satire: before / after the sale */
.godmode { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--paper); }
.gm-col { padding: clamp(56px, 6.6vw, 96px) var(--gut); display: grid; align-content: start; gap: 18px; }
.gm-col + .gm-col { background: var(--ink-2); border-left: 1px solid var(--ink-line); }
.gm-tag { font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.gm-big { font: 400 clamp(48px, 6.6vw, 104px)/.92 var(--display); text-transform: uppercase; }
.gm-col + .gm-col .gm-big { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: .08em; }
.gm-col p:not([class]) { font-size: clamp(17px, 1.3vw, 19px); color: var(--muted-l); max-width: 40ch; }
.gm-list { display: grid; gap: 6px; font: 13px/1.6 var(--mono); color: var(--muted-l); }
.gm-list li::before { content: "→ "; color: var(--accent); }
.gm-foot { grid-column: 1 / -1; padding: 28px var(--gut); border-top: 1px solid var(--ink-line); font: italic clamp(24px, 2.4vw, 34px)/1.2 var(--serif); }

.facts > div { display: grid; grid-template-columns: 260px 1fr; gap: 24px 48px; padding: 24px 0; border-top: 1px solid var(--rule); }
.facts > div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font: 700 12px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.facts dd { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.45; }
/* Evidence */
.shot { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.shot:hover img { transform: scale(1.04); }
.shot::after { content: "Enlarge ↗"; position: absolute; right: 10px; bottom: 10px; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 8px 12px; }

/* Proof */
.proof { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.proof-id { display: grid; align-content: start; gap: 18px; padding: 28px; border: 1px solid var(--ink-line); background: var(--ink-2); }
.proof-name { font: 400 clamp(32px, 3vw, 44px)/1 var(--display); text-transform: uppercase; }
.proof-id dl > div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--ink-line); }
.proof-id dt { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.proof-id dd { font: 700 15px var(--mono); }
.proof-id .btn { justify-self: start; }
.proof-item { display: grid; gap: 12px; }
.proof-item figcaption { font-size: 15px; color: var(--muted-l); display: grid; gap: 4px; }
.proof-item figcaption b { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
#evidence .btn { justify-self: start; }

/* Timeline */
.timeline { border-left: 3px solid var(--accent); padding-left: clamp(20px, 2.8vw, 40px); }
.timeline li { display: grid; grid-template-columns: 90px 1fr; gap: 24px 40px; padding: 26px 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * clamp(20px, 2.8vw, 40px) - 9px); top: 44px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); }
.timeline li.now::before { background: var(--accent); }
.timeline li > span { font: 56px/1 var(--display); color: #8f8a83; }
.timeline li.now > span, .timeline li.now h3 { color: var(--accent); }
.timeline h3 { font: 700 14px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.timeline p { font-size: clamp(17px, 1.4vw, 20px); max-width: 52ch; }

/* Questions */
.qs details { border-top: 1px solid var(--ink); }
.qs details:last-child { border-bottom: 1px solid var(--ink); }
.qs summary { display: grid; grid-template-columns: 48px 1fr 32px; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; font: 40px/1 var(--display); text-align: right; }
.qs details[open] summary::after { content: "−"; color: var(--accent); }
.qn { font: 13px var(--mono); letter-spacing: .08em; color: var(--accent); }
.qt { font: 400 clamp(24px, 2.8vw, 40px)/1.05 var(--display); text-transform: uppercase; }
.qs summary:hover .qt { color: var(--accent); }
.qs.faq summary { grid-template-columns: 1fr 32px; }
.faq .qt { font: 700 clamp(18px, 1.6vw, 22px)/1.35 var(--sans); text-transform: none; }
.qs.faq details p { padding-left: 0; padding-right: 0; }
.qs details p { padding: 0 56px 28px 72px; font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); max-width: 60ch; }

/* Warranty */
.stamp { justify-self: start; display: grid; gap: 6px; padding: 22px 28px; border: 3px solid var(--accent); color: var(--accent); font: 400 clamp(40px, 3.9vw, 56px)/1 var(--display); text-transform: uppercase; transform: rotate(-3deg); }
.stamp small { font: 700 13px var(--mono); letter-spacing: .14em; }
.pull { font: italic clamp(36px, 4.4vw, 64px)/1.05 var(--serif); border-top: 2px solid var(--ink); padding-top: 40px; max-width: 24ch; }

/* Case file */
.card { background: var(--paper); border: 1.5px solid var(--ink); padding: clamp(20px, 2.8vw, 40px); max-width: 980px; }
.card-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.card dl > div { display: grid; grid-template-columns: 240px 1fr; gap: 6px 24px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.card dt { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card dd { font: 700 16px var(--mono); overflow-wrap: anywhere; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 8px 12px; }
.copy:hover { background: var(--ink); color: var(--paper); }

/* Demand */
.demand { padding-block: clamp(96px, 9.7vw, 140px); gap: clamp(36px, 3.9vw, 56px); }
.d-lead { font: 400 clamp(30px, 3.9vw, 56px)/1.05 var(--display); text-transform: uppercase; color: var(--muted-l); max-width: 24ch; }
.d-big { display: grid; font: 400 clamp(52px, 11vw, 168px)/.92 var(--display); text-transform: uppercase; }
.reqs { counter-reset: r; }
.reqs li { counter-increment: r; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--ink-line); font-weight: 500; font-size: clamp(17px, 1.3vw, 19px); }
.reqs li::before { content: "0" counter(r); font: 30px/1 var(--display); color: var(--accent); }
.d-sign { font-weight: 700; font-size: 20px; color: var(--accent); margin-top: -24px; }

/* Footer */
.foot { display: flex; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; padding: 56px var(--gut); background: var(--ink); color: #a8a49d; border-top: 1px solid var(--ink-line); font-size: 14px; }
.foot-t { font: 32px var(--display); color: var(--paper); text-transform: uppercase; margin-bottom: 8px; }
.foot-r { display: grid; gap: 14px; max-width: 460px; }
.foot-contact { font: 12px/1.6 var(--mono); color: var(--muted-l); }
.foot-contact a { color: var(--paper); text-underline-offset: 3px; }
.foot-friend { font: italic 18px var(--serif); color: var(--paper); margin-bottom: 8px; }
.foot-note { font: 12px/1.6 var(--mono); color: var(--muted); }

/* Lightbox */
.lightbox { border: 0; padding: 56px 16px 16px; background: transparent; max-width: min(92vw, 900px); max-height: 94svh; color: var(--paper); }
.lightbox::backdrop { background: rgb(10 10 10 / .92); }
.lightbox img { max-height: 76svh; width: auto; margin: 0 auto; }
.lightbox p { font: 12px var(--mono); letter-spacing: .06em; margin-top: 12px; text-align: center; }
.lb-close { position: absolute; top: 8px; right: 16px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; border: 1px solid var(--paper); }

/* Motion (content stays visible without JS) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .plan.reveal.in { transform: rotate(-1.2deg); }
.js .stamp.reveal.in { transform: rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .nav-ref { display: none; }
}
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav > nav { position: absolute; top: var(--nav-h); left: 0; right: 0; }
  .brand-name { display: none; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); border-bottom: 1px solid var(--ink-line); padding: 8px 16px 20px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--ink-line); }
  .nav-ref { display: block; align-self: start; margin-top: 16px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 16px; gap: 28px; }
  .video-frame { width: min(84vw, calc((100svh - var(--nav-h) - 150px) * 9 / 16)); min-width: 220px; }
  .figs, .split, .proof, .godmode { grid-template-columns: 1fr; }
  .gm-col + .gm-col { border-left: 0; border-top: 1px solid var(--ink-line); }
  .fig, .fig:first-child { padding: 24px 0 28px; }
  .fig + .fig { border-left: 0; }
  .facts > div, .card dl > div { grid-template-columns: 1fr; }
  .facts > div { gap: 6px; }
  .timeline li { grid-template-columns: 56px 1fr; gap: 16px; }
  .timeline li > span { font-size: 40px; }
  .qs summary { grid-template-columns: 36px 1fr 24px; gap: 14px; }
  .qs details p { padding: 0 0 24px 50px; }
}
@media (max-width: 520px) {
  .btn { width: 100%; }
  .rec { top: 28px; left: 28px; }
  .ticker span { font-size: 20px; }
  .plan { padding: 24px; box-shadow: 6px 6px 0 var(--accent); }
  .plan-name b { font-size: 40px; }
  .d-sign { margin-top: -12px; }
}

/* Print: clean black-on-white record if someone prints the page */
@media print {
  .nav, .progress, .ticker, .btns, .btn, .copy, .menu-btn, .hero-media, .skip, .lightbox, .proof { display: none !important; }
  body, .hero, .ink, .white, .paper, .foot, .godmode, .gm-col { background: #fff !important; color: #000 !important; }
  .sec, .hero { padding: 24px 0; min-height: 0; display: block; }
  .reveal { opacity: 1 !important; transform: none !important; }
}