/* =====================================================================
   BeigeBold V2 site styles
   Tokens come from the BeigeBold design system (tokens.json). Dark always.
   Layout: one wide column (max 1520px), no frame lines at the edges. V3: the page runs like an ad.
   Tangerine marks actions and the few lines that carry the point.
   Data colors (--up, --down) appear only inside charts and metrics.
   ===================================================================== */

@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../fonts/ArchivoExpanded-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2"); font-weight: 200 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --base: #100f0d;
  --surface: #1b1916;
  --surface-2: #23201c;
  --off-white: #f4f0e8;
  --beige: #e9e2d4;
  --muted-grey: #9c968c;
  --tangerine: #ff5a1f;
  --tangerine-tint: rgba(255, 90, 31, 0.11);
  --tangerine-line: rgba(255, 90, 31, 0.5);
  --on-tangerine: var(--base);
  --up: #3ddc84;
  --down: #ee3e3e; /* true red (hue 0), 16° from Tangerine and a little less saturated, so "bad" never reads as the brand accent; 4.5:1 on the panels */
  --rule: var(--muted-grey);
  --divider: rgba(156, 150, 140, 0.24);
  --divider-strong: rgba(156, 150, 140, 0.42);
  --focus: var(--tangerine);
  --caption-box: rgba(16, 15, 13, 0.85);
  --beige-film: grayscale(1) sepia(0.42) contrast(0.82) brightness(0.86);

  --font-display: "Archivo Expanded", "Archivo", "General Sans", system-ui, sans-serif;
  --font-head: "Archivo", "General Sans", system-ui, sans-serif;
  --font-sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1520px;
  --margin: 20px;
  --gutter: 16px;
  --header-h: 60px;
  --ruler-h: 44px;
  --pad: 96px;
  --pad-l: 120px;

  --dur-frame: 40ms;
  --dur-punch: 120ms;
  --dur-wipe: 160ms;
  --dur-max: 320ms;
  --ease-cut: cubic-bezier(0.2, 0, 0, 1);
  --z-chrome: 50;
  --z-grain: 90;
}
@media (min-width: 640px) { :root { --margin: 40px; --gutter: 20px; --pad: 128px; --pad-l: 152px; } }
@media (min-width: 1024px) { :root { --margin: clamp(48px, 5.2vw, 104px); --gutter: 24px; --header-h: 72px; --ruler-h: 52px; --pad: 160px; --pad-l: 200px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); scrollbar-color: var(--muted-grey) var(--base); }
body { margin: 0; background: var(--base); color: var(--beige); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
::selection { background: var(--off-white); color: var(--base); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
p, ul, ol, h1, h2, h3, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; color: var(--off-white); }
/* Line breaks: paragraphs avoid one-word last lines, headings balance. .ln puts each sentence on its own
   line, so a new sentence never starts at the end of the last one. .nb keeps a phrase together. */
p, li, dd, summary, .faq-a { text-wrap: pretty; }
/* Short blurbs (two or three lines) balance instead, so none ends on a stray word or two; Chrome's "pretty"
   doesn't catch those. Longer paragraphs keep "pretty" so they use their full width. */
.pipe-step p, .pipe-note, .std-d, .std-note, .end-who, .plan-for, .gs-lede, .hero-sub { text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; }
.ln { display: block; text-wrap: balance; }
.nb { white-space: nowrap; }

/* Letters wrapped by js/kern.js stay plain inline text, whatever span rules the heading around them has.
   The only thing they carry is the letter-spacing set on them. */
.kern-auto { all: unset; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--off-white); color: var(--base); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--margin));
  margin-inline: auto;
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}

/* Film grain */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Type ---------- */
.t-h1 { font-family: var(--font-head); font-weight: 900; font-size: clamp(38px, 10vw, 52px); line-height: 0.98; letter-spacing: -0.02em; color: var(--off-white); text-wrap: balance; }
.t-h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.15; letter-spacing: -0.01em; color: var(--off-white); text-wrap: balance; }
.t-h3 { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--off-white); }
.t-lead { font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--off-white); }
.t-body { font-size: 16px; line-height: 1.6; color: var(--beige); }
.t-small { font-size: 14px; line-height: 20px; font-weight: 500; }
.t-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--muted-grey); }
.t-eyebrow { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-grey); }
@media (min-width: 640px) {
  .t-h1 { font-size: clamp(48px, 7.2vw, 64px); }
  .t-h2 { font-size: 32px; }
  .t-h3 { font-size: 23px; }
  .t-lead { font-size: 21px; }
  .t-body { font-size: 17px; line-height: 27px; }
}
@media (min-width: 1024px) {
  .t-h1 { font-size: clamp(56px, 5.2vw, 88px); line-height: 0.96; }
  .t-h2 { font-size: clamp(30px, 2.6vw, 40px); }
  .t-lead { font-size: clamp(21px, 1.6vw, 25px); line-height: 1.42; }
}

/* Highlight: the one line in a block that carries the point, set like an ad caption */
.hl { background: var(--tangerine); color: var(--on-tangerine); padding: 0.02em 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.wordmark { font-family: var(--font-display); color: var(--off-white); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; text-decoration: none; display: inline-block; }
.wordmark span { font-weight: 300; }
.wordmark b { font-weight: 900; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border: 0; cursor: pointer; text-decoration: none; font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: 0.01em; overflow: hidden; isolation: isolate; white-space: nowrap; transition: color var(--dur-wipe) var(--ease-cut); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-wipe) var(--ease-cut); }
.btn-primary { background: var(--tangerine); color: var(--on-tangerine); }
.btn-primary::before { background: var(--off-white); }
.btn-secondary { background: transparent; color: var(--off-white); box-shadow: inset 0 0 0 1.5px var(--off-white); }
.btn-secondary::before { background: var(--tangerine); }
@media (hover: hover) {
  .btn-primary:hover::before, .btn-secondary:hover::before { transform: scaleX(1); }
  .btn-secondary:hover { color: var(--on-tangerine); box-shadow: inset 0 0 0 1.5px var(--tangerine); }
}
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 62px; padding: 0 36px; font-size: 17px; }
.link { color: var(--off-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--muted-grey); }
@media (hover: hover) { .link:hover { color: var(--tangerine); text-decoration-color: var(--tangerine); } }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: calc(var(--z-chrome) + 1); background: var(--base); }
.site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: var(--z-chrome); height: var(--header-h); background: var(--base); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { border-bottom-color: var(--divider); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 16px; }
.header-mark { font-size: 18px; margin-right: auto; padding: 8px 0; }
.header-nav { display: none; }
.header-nav a { font-size: 15px; font-weight: 500; color: var(--off-white); text-decoration: none; padding: 10px 0; }
@media (hover: hover) { .header-nav a:hover { color: var(--tangerine); } }
.menu-btn { height: 42px; padding: 0 14px; background: none; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--divider-strong); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--off-white); }
@media (min-width: 1024px) {
  .header-mark { font-size: 22px; }
  .header-nav { display: flex; gap: 40px; margin-right: 24px; }
  .menu-btn { display: none; }
}

/* ---------- Timeline ruler (persistent) ---------- */
.ruler { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-chrome); height: calc(var(--ruler-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--base); border-top: 1px solid var(--divider); user-select: none; -webkit-user-select: none; }
.ruler-inner { position: relative; height: 100%; display: flex; align-items: center; gap: 24px; }
.ruler-scene { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto; }
.ruler-scene-tc { color: var(--muted-grey); flex: 0 0 auto; }
.ruler-scene-name { color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruler-tc { color: var(--off-white); flex: 0 0 auto; min-width: 96px; text-align: right; }
.ruler-track { display: none; }
.ruler-progress { position: absolute; left: 0; right: 0; top: -1px; height: 1px; }
.ruler-progress i { position: absolute; top: -3px; left: 0; width: 2px; height: 8px; background: var(--tangerine); }
.ruler-open { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; }
@media (min-width: 1024px) {
  .ruler-scene { flex: 0 0 240px; }
  .ruler-progress, .ruler-open { display: none; }
  .ruler-track { display: block; position: relative; flex: 1 1 auto; height: 100%; cursor: ew-resize; touch-action: none; }
  .ruler-line { position: absolute; left: 0; right: 0; top: 58%; height: 6px; border-top: 1px solid var(--rule); background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / 52)) 0 0 / 100% 4px no-repeat; }
  .ruler-mark { position: absolute; top: 0; bottom: 0; width: 17px; margin-left: -8px; padding: 0; background: none; border: 0; cursor: pointer; }
  .ruler-mark::before { content: ""; position: absolute; left: 8px; top: calc(58% - 11px); width: 1px; height: 11px; background: var(--off-white); }
  .ruler-mark span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; background: var(--base); box-shadow: inset 0 0 0 1px var(--divider-strong); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--off-white); visibility: hidden; }
  .ruler-mark:hover span, .ruler-mark:focus-visible span { visibility: visible; }
  .ruler-mark:hover::before { background: var(--tangerine); }
  .ruler-playhead { position: absolute; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; background: var(--tangerine); pointer-events: none; }
  .ruler-playhead::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 7px; background: var(--tangerine); }
}

/* ---------- Menu (mobile) ---------- */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--base); color: var(--beige); overflow-y: auto; }
.menu::backdrop { background: var(--base); }
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; margin-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--divider); }
.menu-body { padding-top: 32px; padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 32px; }
.menu-nav { display: flex; flex-direction: column; }
.menu-nav a { font-family: var(--font-head); font-weight: 900; font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; color: var(--off-white); text-decoration: none; padding: 6px 0; }
.menu-cta { align-self: flex-start; }
.menu-scenes { display: grid; border-top: 1px solid var(--divider); }
.menu-scenes a { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); text-decoration: none; color: var(--muted-grey); }
.menu-scenes a span { flex: 0 0 44px; }
.menu-scenes a b { font-weight: 500; color: var(--off-white); }
.menu-scenes a.is-active b { color: var(--tangerine); }

/* ---------- Scenes ---------- */
main { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
.scene { position: relative; padding-top: var(--pad); padding-bottom: var(--pad); }
.scene.is-tight { padding-top: calc(var(--pad) * 0.6); }
.scene.is-roomy { padding-top: var(--pad-l); padding-bottom: var(--pad-l); }
.slate { position: relative; display: flex; gap: 12px; align-items: baseline; padding-bottom: 18px; margin-bottom: 40px; }
.slate .tc { color: var(--off-white); }
.slate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-top: 1px solid var(--divider);
  background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 160px), repeating-linear-gradient(90deg, var(--divider) 0 1px, transparent 1px 32px);
  background-size: 100% 8px, 100% 4px; background-repeat: no-repeat; }
.scene-head { max-width: 18ch; }
.scene-head:has(.ln) { max-width: none; } /* lines are already set one sentence each */
.prose { display: flex; flex-direction: column; gap: 16px; max-width: 56ch; }
@media (min-width: 1024px) { .slate { margin-bottom: 64px; } }

/* Caption land (added by JS): words settle from 1.08 in 4 frames, 2 frames apart */
.land .w { display: inline-block; }
.land.pre .w { opacity: 0; }
.land.is-landing .w { animation: caption-land var(--dur-wipe) var(--ease-cut) both; }
@keyframes caption-land { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }

/* Shared UI panel: depictions of real tools (Ads Manager, a board, a call) */
.panel { position: relative; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.example { font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-grey); text-wrap: balance; }

/* =====================================================================
   Ad tiles (code-drawn, see js/ads.js)
   ===================================================================== */
.ad { --s: 0s; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--bg); color: var(--fg); container-type: inline-size; isolation: isolate; font-family: var(--font-sans); user-select: none; -webkit-user-select: none; }
.ad-media { position: absolute; inset: 0; }
.ad-sc { position: absolute; inset: 0; opacity: 0; animation: ad-scene 6s steps(1, end) infinite; animation-delay: calc(var(--s) - var(--phase)); }
@keyframes ad-scene { 0% { opacity: 1; } 33.333% { opacity: 0; } 100% { opacity: 0; } }
.ad-cap { position: absolute; left: 8cqw; right: 14cqw; font-family: var(--font-head); font-weight: 900; font-size: 11cqw; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); text-wrap: balance; z-index: 1; }
.ad-cap.is-xl { font-size: 15cqw; line-height: 0.95; }
.ad-cap.is-sm { font-size: 7.5cqw; text-transform: none; font-weight: 800; }
.ad-cap.is-top { top: 15cqw; }
.ad-cap.is-mid { top: 50%; transform: translateY(-60%); }
.ad-cap.is-low { top: 66%; }
.ad-cap.is-under { top: 126cqw; }
.ad--ugc .ad-sc:nth-child(3) .ad-prod.is-hero { width: 40cqw; top: 30%; }
.ad-cap.is-box { font-family: var(--font-sans); font-weight: 700; font-size: 7.2cqw; line-height: 1.5; text-transform: none; }
.ad-cap.is-box .ad-w { background: #ffffff; color: #111111; padding: 0.05em 0.28em; margin: 0 -0.05em; }
.ad-w { display: inline-block; opacity: 0; animation: ad-pop 6s infinite; animation-delay: calc(var(--s) + var(--i) * 140ms - var(--phase)); }
@keyframes ad-pop { 0% { opacity: 0; transform: scale(1.4); } 2.2% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }

.ad-prod { position: absolute; left: 50%; display: block; z-index: 0; }
.ad-prod svg { width: 100%; height: auto; }
.ad-prod.is-hero { width: 46cqw; top: 38%; transform: translate(-50%, -30%); }
.ad-prod.is-low { width: 34cqw; top: 66%; transform: translate(-50%, -30%); }
.ad-prod.is-hand { width: 22cqw; left: 70%; top: 38%; transform: rotate(-12deg); }
.ad-prod.is-pop { width: 34cqw; top: 26%; transform: translateX(-50%); animation: ad-rise 6s infinite; animation-delay: calc(var(--s) - var(--phase)); }
.ad-prod.is-push { animation: ad-push 6s linear infinite; animation-delay: calc(var(--s) - var(--phase)); }
@keyframes ad-push { 0% { transform: translate(-50%, -30%) scale(1); } 33.333% { transform: translate(-50%, -30%) scale(1.1); } 100% { transform: translate(-50%, -30%) scale(1.1); } }
@keyframes ad-rise { 0% { transform: translate(-50%, 40%); } 3% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 0); } }

.ad-disc { position: absolute; left: 50%; top: 50%; width: 96cqw; height: 96cqw; margin: -48cqw 0 0 -48cqw; border-radius: 50%; background: var(--ring, var(--acc)); opacity: 0.22; }
.ad-tag { position: absolute; left: 8cqw; top: 16cqw; padding: 1.6cqw 3cqw; background: var(--acc); color: var(--ink); font-family: var(--font-head); font-weight: 900; font-size: 7cqw; text-transform: uppercase; transform: rotate(-6deg); }
.ad-creator { position: absolute; left: 50%; bottom: 0; width: 88cqw; transform: translateX(-50%); opacity: 0.9; }
.ad--ugc .ad-sc::before { content: ""; position: absolute; left: 16cqw; top: 14cqw; width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--ring, var(--acc)); opacity: 0.35; }
.ad-stars { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 1.5cqw; color: var(--acc); }
.ad-stars.is-top { top: 14cqw; }
.ad-stars i { width: 9cqw; display: block; opacity: 0; animation: ad-pop 6s infinite; animation-delay: calc(var(--s) + var(--i) * 120ms - var(--phase)); }
.ad-stars svg { width: 100%; fill: currentColor; }
.ad-score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; padding-bottom: 20cqw; }
.ad-score b { font-family: var(--font-display); font-weight: 900; font-size: 30cqw; line-height: 0.9; letter-spacing: -0.03em; }
.ad-score .ad-stars { position: static; }
.ad-quote { position: absolute; left: 8cqw; right: 12cqw; top: 26%; padding: 7cqw 6cqw; background: #ffffff; color: #111111; border-radius: 4cqw; display: flex; flex-direction: column; gap: 4cqw; }
.ad-quote b { font-family: var(--font-head); font-weight: 800; font-size: 8.6cqw; line-height: 1.1; }
.ad-quote i { display: block; width: 40%; height: 2cqw; background: var(--bg); opacity: 0.6; }
.ad-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ad-half { position: relative; background: var(--ink); }
.ad-half svg { position: absolute; inset: 14% 10% 26%; width: 80%; height: 60%; fill: none; stroke: var(--fg); stroke-width: 3; opacity: 0.55; }
.ad-half.is-after { background: var(--bg); }
.ad-half.is-after svg { opacity: 1; stroke: var(--acc); }
.ad-lbl { position: absolute; top: 12cqw; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 6cqw; text-transform: uppercase; letter-spacing: 0.06em; }
.ad-wipe { position: absolute; top: 0; bottom: 0; left: 50%; width: 1.2cqw; margin-left: -0.6cqw; background: #ffffff; }
.ad-row { position: absolute; left: 10cqw; right: 10cqw; top: 46%; display: grid; grid-template-columns: 0.8fr 1fr; gap: 6cqw; align-items: end; }
.ad-player { position: absolute; left: 8cqw; right: 8cqw; top: 26%; display: flex; flex-direction: column; gap: 3cqw; }
.ad-screen { position: relative; aspect-ratio: 16 / 10; background: var(--ink); display: grid; place-items: center; }
.ad-play { width: 0; height: 0; border-left: 9cqw solid var(--bg); border-top: 5.5cqw solid transparent; border-bottom: 5.5cqw solid transparent; margin-left: 2cqw; }
.ad-lesson { font-weight: 700; font-size: 6.5cqw; }
.ad-bar { height: 1.6cqw; background: rgba(0, 0, 0, 0.2); position: relative; display: block; }
.ad-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: ad-progress 6s linear infinite; animation-delay: calc(var(--s) - var(--phase)); }
.ad-box { position: absolute; left: 50%; top: 50%; width: 52cqw; height: 40cqw; margin-left: -26cqw; background: var(--ink); }
.ad-box i { position: absolute; left: -3cqw; right: -3cqw; top: -8cqw; height: 10cqw; background: var(--acc); }
.ad-box.is-shake { animation: ad-shake 0.48s steps(2, end) infinite; }
.ad-box.is-open i { transform: translate(18cqw, -12cqw) rotate(24deg); }
.ad-box.is-open { top: 62%; }
@keyframes ad-shake { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } }
.ad-confetti i { position: absolute; width: 3.5cqw; height: 3.5cqw; background: var(--acc); opacity: 0; animation: ad-pop 6s infinite; animation-delay: calc(var(--s) + 120ms - var(--phase)); }
.ad-confetti i:nth-child(1) { left: 16%; top: 20%; } .ad-confetti i:nth-child(2) { left: 78%; top: 24%; transform: rotate(30deg); }
.ad-confetti i:nth-child(3) { left: 24%; top: 44%; } .ad-confetti i:nth-child(4) { left: 72%; top: 50%; }
.ad-confetti i:nth-child(5) { left: 40%; top: 14%; } .ad-confetti i:nth-child(6) { left: 60%; top: 36%; }

/* Feed UI */
.ad-prog { position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; height: 0.9cqw; background: rgba(255, 255, 255, 0.35); z-index: 3; }
.ad-prog i { display: block; height: 100%; background: #ffffff; transform-origin: left; animation: ad-progress 6s linear infinite; animation-delay: calc(0s - var(--phase)); }
@keyframes ad-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ad-rail { position: absolute; right: 3.5cqw; bottom: 32cqw; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4.5cqw; color: var(--ui); }
.ad-act { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; }
.ad-act svg { width: 8.5cqw; height: 8.5cqw; fill: currentColor; }
.ad-act b { font-size: 4.2cqw; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.ad-meta { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 4.5cqw; z-index: 3; display: flex; flex-direction: column; gap: 3cqw; color: var(--ui); }
.ad-handle { display: flex; align-items: center; gap: 2cqw; font-size: 4.8cqw; line-height: 1; }
.ad-handle b { font-weight: 700; }
.ad-handle span { font-weight: 500; opacity: 0.8; }
.ad-avatar { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0.6cqw var(--ui); }
.ad-ctab { display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 3.2cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, 0.94); color: #111111; font-size: 5cqw; line-height: 1; animation: ad-cta 6s steps(1, end) infinite; animation-delay: calc(4s - var(--phase)); }
.ad-ctab i { width: 2.4cqw; height: 2.4cqw; border-top: 0.6cqw solid currentColor; border-right: 0.6cqw solid currentColor; transform: rotate(45deg); }
@keyframes ad-cta { 0% { background: var(--acc); color: var(--ink); } 33.333% { background: rgba(255, 255, 255, 0.94); color: #111111; } 100% { background: rgba(255, 255, 255, 0.94); color: #111111; } }

.ads-off .ad, .ads-off .ad *, .ads-paused .ad, .ads-paused .ad * { animation-play-state: paused !important; }
.is-beige .ad { filter: var(--beige-film); }

/* =====================================================================
   The wall: a tilted feed of ads drifting past. Tiles sit beige and
   turn bold when the pointer or the scroll reaches them.
   Used full height beside the hero headline, and small in the end card.
   ===================================================================== */
.wall-inner { display: flex; gap: 10px; height: 100%; transform: rotate(-6deg); transform-origin: center; }
.wall-col { flex: 1 1 0; min-width: 0; }
.wall-track { display: flex; flex-direction: column; gap: 10px; animation: drift var(--dur, 60s) linear infinite; animation-delay: var(--delay, 0s); }
.wall-col.is-up .wall-track { animation-direction: reverse; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 5px)); } }
.wall .ad, .end-stack .ad { filter: var(--beige-film); transition: filter 280ms var(--ease-cut); }
.wall .ad.is-bold, .end-stack .ad.is-bold { filter: none; }
.wall.is-paused .wall-track, .end-stack.is-paused .wall-track { animation-play-state: paused; }
/* Both walls fade out on all four sides, so they sit inside the page frame like a window onto the feed */
/* The ramp eases in from each edge (a straight ramp still reads as an edge where it reaches zero) */
.fade-frame { --fade: clamp(64px, 7.5vw, 140px);
  --ramp: rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.03) calc(var(--fade) * 0.2), rgba(0, 0, 0, 0.14) calc(var(--fade) * 0.4), rgba(0, 0, 0, 0.36) calc(var(--fade) * 0.6), rgba(0, 0, 0, 0.68) calc(var(--fade) * 0.8), #000 var(--fade),
    #000 calc(100% - var(--fade)), rgba(0, 0, 0, 0.68) calc(100% - var(--fade) * 0.8), rgba(0, 0, 0, 0.36) calc(100% - var(--fade) * 0.6), rgba(0, 0, 0, 0.14) calc(100% - var(--fade) * 0.4), rgba(0, 0, 0, 0.03) calc(100% - var(--fade) * 0.2), rgba(0, 0, 0, 0) 100%;
  -webkit-mask-image: linear-gradient(90deg, var(--ramp)), linear-gradient(180deg, var(--ramp));
  mask-image: linear-gradient(90deg, var(--ramp)), linear-gradient(180deg, var(--ramp));
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (min-width: 1024px) {
  .wall-inner, .wall-track { gap: 16px; }
  @keyframes drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
}

/* =====================================================================
   00:00 Hook
   ===================================================================== */
.hero { position: relative; overflow: hidden; }
/* Phones: the wall is a band across the top and the copy starts below it */
.wall { position: absolute; z-index: 0; top: -80px; left: -30%; right: -30%; height: 340px; }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(16, 15, 13, 0) 0, rgba(16, 15, 13, 0) 160px, var(--base) 255px); }
.hero-grid { position: relative; z-index: 2; padding-top: 196px; padding-bottom: 72px; pointer-events: none; }
.hero-copy { min-width: 0; container-type: inline-size; pointer-events: auto; }
.hero-title { font-family: var(--font-display); font-weight: 900; color: var(--off-white); }
/* Two lines: "More ads" and the boxed "worth testing.". Phones set the box over two lines (it wraps), so the
   type stays large; from 640px up it's one line, sized so the box fills the copy column (it runs 8.89em). */
.ht-lead { display: block; font-size: min(16cqi, 120px); line-height: 0.92; letter-spacing: -0.035em; }
.ht-lead .line { display: block; white-space: nowrap; }
/* The box is centred on what the eye reads as the word, not on its outer ink: the body of the letters runs from
   the baseline up to the 0.734em ascenders of "t" and "h", and the one descender ("g") counts for half. So there is
   0.2em of orange above the ascenders and 0.2em below a line halfway down the descender (the "g" itself keeps
   0.094em). Sides get 0.18em ("w" reaches 0.008em left of its origin; the period keeps 0.055em of side space,
   less the -0.035em letter-spacing after it). Archivo Expanded's text area already runs 0.144em above the
   ascenders, so the top needs only 0.056em more.
   Line-height 1.38 makes the line as tall as the box, and the 0.02em margin leaves about 0.21em of clear space
   above it. Its left edge lines up with the ink of "M" (see optical alignment in site.js). */
.ht-lead .ht-box { white-space: normal; line-height: 1.38; margin-top: 0.02em; }
.ht-lead .hl { padding: 0.056em 0.1604em 0.096em 0.188em; }
@media (min-width: 640px) {
  .ht-lead { font-size: min(11.1cqi, 120px); }
  .ht-lead .ht-box { white-space: nowrap; }
}
/* Kerning: the headline's tight tracking closes some pairs too far (the arm of "r" ran into "t"). Each span opens
   the space after its letter by --k, so every pair keeps at least 0.035em of clear space between the ink. */
.ht-lead .kern { letter-spacing: calc(-0.035em + var(--k, 0em)); }
.ht-tail { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px; font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: 0; color: var(--off-white); }
.ht-tail span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ht-tail span::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; background: var(--tangerine); }
/* Same letter size as the facts line above it: General Sans capitals stand 0.72em tall and Archivo's 0.6875em, so
   the paragraph is set at 0.955 of the facts' size (18/20/23px there, 17.2/19.1/22px here) and both lines' capitals match */
.hero-sub { margin-top: 24px; max-width: 46ch; color: var(--beige); font-size: 17.2px; line-height: 1.5; }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { margin-top: 22px; color: var(--muted-grey); }
/* The wall is made of stand-ins, so it carries a small label: under the founder line on phones, in the wall's bottom corner on desktop */
.wall-note { margin-top: 28px; }
@media (min-width: 640px) {
  .ht-tail { font-size: 20px; }
  .hero-sub { font-size: 19.1px; }
}
@media (min-width: 1024px) {
  .hero { min-height: calc(100svh - var(--header-h) - var(--ruler-h)); display: flex; align-items: center; }
  /* Desktop: the wall starts at 42% of the page frame and runs to its right edge, so it reaches in under the
     headline. A long feather on that side (eased, about 46% of the wall's width) keeps the tiles faint under the
     text; the other three sides keep a short fade so the wall still sits inside the frame. */
  .wall { top: 0; bottom: 0; height: auto; left: calc(max(var(--margin), (100% - var(--maxw)) / 2) + min(100% - 2 * var(--margin), var(--maxw)) * 0.42); right: max(var(--margin), (100% - var(--maxw)) / 2);
    --edge: 72px;
    --feather: rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.03) 14%, rgba(0, 0, 0, 0.08) 24%, rgba(0, 0, 0, 0.2) 32%, rgba(0, 0, 0, 0.45) 39%, rgba(0, 0, 0, 0.78) 44%, #000 48%,
      #000 calc(100% - var(--edge)), rgba(0, 0, 0, 0.68) calc(100% - var(--edge) * 0.8), rgba(0, 0, 0, 0.36) calc(100% - var(--edge) * 0.6), rgba(0, 0, 0, 0.14) calc(100% - var(--edge) * 0.4), rgba(0, 0, 0, 0.03) calc(100% - var(--edge) * 0.2), rgba(0, 0, 0, 0) 100%;
    --ramp: rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.03) calc(var(--edge) * 0.2), rgba(0, 0, 0, 0.14) calc(var(--edge) * 0.4), rgba(0, 0, 0, 0.36) calc(var(--edge) * 0.6), rgba(0, 0, 0, 0.68) calc(var(--edge) * 0.8), #000 var(--edge),
      #000 calc(100% - var(--edge)), rgba(0, 0, 0, 0.68) calc(100% - var(--edge) * 0.8), rgba(0, 0, 0, 0.36) calc(100% - var(--edge) * 0.6), rgba(0, 0, 0, 0.14) calc(100% - var(--edge) * 0.4), rgba(0, 0, 0, 0.03) calc(100% - var(--edge) * 0.2), rgba(0, 0, 0, 0) 100%;
    -webkit-mask-image: linear-gradient(90deg, var(--feather)), linear-gradient(180deg, var(--ramp));
    mask-image: linear-gradient(90deg, var(--feather)), linear-gradient(180deg, var(--ramp)); }
  .wall .wall-inner { position: absolute; top: -10%; bottom: -10%; left: -6%; right: -6%; height: auto; }
  .hero-shade { display: none; }
  .hero { align-items: stretch; }
  .hero-grid { width: 100%; padding-top: 56px; padding-bottom: 64px; display: flex; flex-direction: column; justify-content: center; }
  .wall-note { position: absolute; right: var(--margin); bottom: 22px; margin: 0; }
  .hero-copy { max-width: 62%; }
  .ht-lead { font-size: min(11.1cqi, 13vh, 148px); }
  .ht-tail { margin-top: 36px; font-size: clamp(18px, 1.45vw, 23px); gap: 8px 26px; }
  .hero-sub { margin-top: 26px; max-width: 46ch; text-wrap: balance; font-size: clamp(17.2px, 1.385vw, 22px); line-height: 1.45; }
  .hero-ctas { margin-top: 40px; }
}

/* =====================================================================
   00:04 The problem: four pains on the left, the dying ad on the right.
   On desktop the list and the panel share one row, so their top and bottom edges line up.
   ===================================================================== */
.problem-grid { margin-top: 40px; display: grid; gap: 40px; }
.pains { display: flex; flex-direction: column; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.pains li { flex: 1 1 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: baseline; align-content: center; padding: 18px 0; }
.pains li + li { border-top: 1px solid var(--divider); }
.pains p { text-wrap: balance; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--beige); }
.pains strong { display: block; margin-bottom: 4px; font-family: var(--font-head); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--off-white); text-wrap: balance; }
.problem-viz { min-width: 0; display: flex; }
.problem-viz .adrow { flex: 1 1 auto; }
/* The four stats sit in one row only when the column is wide enough for the widest value (0.42% needs ~70px);
   narrower, they go two by two instead of running into each other */
.problem-viz .adrow-main { container-type: inline-size; }
.problem-viz .adrow-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 330px) { .problem-viz .adrow-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kicker { margin-top: 56px; font-family: var(--font-head); font-weight: 600; font-size: clamp(26px, 6.6vw, 32px); line-height: 1.25; letter-spacing: -0.01em; color: var(--off-white); }
.kicker .hl { font-weight: 800; }
@media (min-width: 640px) {
  .pains p { font-size: 17px; line-height: 27px; }
  .pains strong { font-size: 23px; }
}
@media (min-width: 1024px) {
  .problem-grid { margin-top: 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 5.6vw, 104px); align-items: stretch; }
  .pains li { padding: 22px 0; }
  .pains strong { font-size: clamp(22px, 1.75vw, 28px); margin-bottom: 6px; }
  .problem-viz .adrow-body { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: 28px; padding: 24px; align-items: stretch; }
  .problem-viz .adrow-ad { align-self: center; }
  .problem-viz .adrow-main { justify-content: space-between; }
  .problem-viz .adrow-chart { height: auto; flex: 1 1 auto; min-height: 160px; }
  .kicker { margin-top: 88px; font-size: clamp(32px, 2.8vw, 46px); line-height: 1.2; }
}

/* Ads Manager row: the same ad, beige (problem) and bold (fix) */
.adrow { overflow: hidden; display: flex; flex-direction: column; }
.adrow-head .adrow-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--off-white); }
.adrow-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-grey); }
.toggle i { position: relative; width: 34px; height: 18px; box-shadow: inset 0 0 0 1.5px var(--muted-grey); }
.toggle i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; background: var(--muted-grey); }
.toggle.is-on { color: var(--up); }
.toggle.is-on i { background: var(--up); box-shadow: none; }
.toggle.is-on i::after { left: 20px; background: var(--base); }
.adrow-body { flex: 1 1 auto; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
.adrow-ad { position: relative; }
.adrow-ad .ad { width: 100%; }
.adrow-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adrow-chart { position: relative; height: 104px; border-bottom: 1px solid var(--divider); }
.adrow-chart svg { position: absolute; inset: 8px 0 0; width: 100%; height: calc(100% - 8px); overflow: visible; }
.adrow-chart .grid line { stroke: var(--divider); stroke-width: 1; }
.adrow-chart .line { fill: none; stroke: var(--down); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.adrow.is-live .adrow-chart .line { stroke: var(--up); }
.adrow-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.adrow-stats div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adrow-stats b { font-family: var(--font-head); font-weight: 800; font-size: 20px; line-height: 1; color: var(--beige); font-variant-numeric: tabular-nums; }
.adrow-stats .is-key b { color: var(--down); }
.adrow.is-live .adrow-stats b { color: var(--off-white); }
.adrow.is-live .adrow-stats .is-key b { color: var(--up); }
.adrow-foot { display: flex; justify-content: flex-end; padding: 8px 16px; border-top: 1px solid var(--divider); }
@media (min-width: 640px) {
  .adrow-body { grid-template-columns: 136px minmax(0, 1fr); gap: 24px; padding: 20px; }
  .adrow-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adrow-stats b { font-size: 22px; }
}

/* =====================================================================
   00:18 How it works: requests in, the Bold Standard, ads out.
   One pipeline, three columns, each step written above its own panel.
   ===================================================================== */
/* Ads are added at the top of the delivered feed. Keep the browser from anchoring scroll to
   them, or the page jumps every time one comes in. */
.pipe { overflow-anchor: none; }
.pipe { margin-top: 56px; display: grid; gap: 48px; }
.pipe-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pipe-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: baseline; align-content: start; }
.pipe-n { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.02em; color: var(--tangerine); font-variant-numeric: tabular-nums; }
.pipe-t { font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--off-white); }
.pipe-step p { grid-column: 2; max-width: 38ch; }
.pipe-panel { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.pipe-note { margin-top: 40px; color: var(--beige); }

/* Request board */
.queue { padding: 12px; display: grid; gap: 6px; align-content: start; }
.qrow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 12px; box-shadow: inset 0 0 0 1.5px var(--divider); overflow: hidden; }
.qrow-c { flex: 0 0 auto; width: 6px; height: 20px; background: var(--c, var(--muted-grey)); }
.qrow-t { min-width: 0; font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--beige); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow-s { margin-left: auto; flex: 0 0 auto; }
.qrow.is-edit { background: var(--off-white); box-shadow: none; }
.qrow.is-edit .qrow-t, .qrow.is-edit .t-label { color: var(--base); }
.qrow.is-swap .qrow-t { animation: mv-pop var(--dur-wipe) var(--ease-cut) both; }

/* In edit: the ad and its checks */
.pipe-req { min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--off-white); }
.pipe-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 18px; padding: 16px; align-items: center; }
.pipe-ad .ad { width: 100%; transition: filter 280ms var(--ease-cut); }
.checks { display: grid; gap: 10px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.25; color: var(--muted-grey); }
.checks li::before { content: ""; flex: 0 0 16px; height: 16px; box-shadow: inset 0 0 0 1.5px var(--divider-strong); }
.checks li.is-on { color: var(--off-white); }
.checks li.is-on::before { box-shadow: none; background: var(--up) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23100f0d' stroke-width='2.4'/%3E%3C/svg%3E") center / 16px no-repeat; }
.checks li.is-final { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--divider); font-weight: 600; }
.checks li.is-final.is-on::before { background-color: var(--tangerine); }

/* Delivered */
.feed-strip { flex: 1 1 auto; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: center; }
.feed-strip .ad:nth-child(n+4) { display: none; }
.feed-strip .ad.is-new { animation: mv-pop var(--dur-wipe) var(--ease-cut) both; }
@keyframes mv-pop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
  /* Subgrid keeps the three panels on one line, however long each step's text runs */
  .pipe { margin-top: 96px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(20px, 2vw, 32px); row-gap: 0; }
  .pipe-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 28px; }
  .pipe-t { font-size: clamp(20px, 1.6vw, 26px); }
  .pipe-note { margin-top: 48px; }
}

/* =====================================================================
   00:09 The Bold Standard
   The stage pins for the whole section. Scrolling runs one rough cut
   through the five steps: the ad gets fixed in the center, the steps
   tick off on the left and the numbers climb on the right.
   ===================================================================== */
#bold-standard { padding-bottom: 0; }
.std-head { display: grid; justify-items: center; gap: 28px; text-align: center; }
.std-head .t-h1 { max-width: 17ch; }
.std-head .t-lead { max-width: 62ch; color: var(--beige); }
.std-lead .ln:last-child { margin-top: 14px; }
.std-head .t-lead .hl { font-weight: 700; padding: 0.06em 0.3em; }

.std { --stage-h: calc(100svh - var(--header-h) - var(--ruler-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); position: relative; margin-top: 48px; height: calc(var(--stage-h) + 7 * 52svh); }
.stage-pin { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); height: var(--stage-h); overflow: hidden; }
.stage { height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: auto auto; align-content: center; gap: 24px 14px; padding-top: 16px; padding-bottom: 16px; }

/* Steps */
.std-list { grid-column: 1 / -1; min-width: 0; }
/* The list's label is a Tangerine tag, like the caption boxes, so the checklist reads as the thing to follow */
.std-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.std-top .t-eyebrow { padding: 8px 11px 7px; background: var(--tangerine); color: var(--on-tangerine); font-weight: 700; }
.std-count { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 1; letter-spacing: 0.02em; color: var(--off-white); font-variant-numeric: tabular-nums; }
.std-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.std-bar i { height: 4px; background: var(--divider-strong); }
.stage.s1 .std-bar i:nth-child(1), .stage.s2 .std-bar i:nth-child(-n+2), .stage.s3 .std-bar i:nth-child(-n+3),
.stage.s4 .std-bar i:nth-child(-n+4), .stage.s5 .std-bar i { background: var(--tangerine); }
.std-steps { margin-top: 14px; }
.std-step { display: none; }
.std-step.is-cur { display: block; }
.std-btn { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--off-white); }
.std-n { flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--tangerine); }
.std-t { font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.std-d { margin-top: 6px; color: var(--beige); font-size: 15px; line-height: 22px; }
.std-note { color: var(--beige); font-size: 15px; line-height: 22px; }
.std-final { display: none; color: var(--off-white); font-size: 15px; line-height: 22px; }
.std-final b { color: var(--tangerine); font-weight: 700; }
.stage.s6 .std-final { display: block; }

/* Center: the ad */
.std-center { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; }
.std-status { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.std-chip { padding: 4px 8px 3px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beige); box-shadow: inset 0 0 0 1px var(--divider-strong); white-space: nowrap; }
.stage.s6 .std-chip { background: var(--tangerine); color: var(--on-tangerine); box-shadow: none; }
.fix-wrap { position: relative; width: 100%; max-width: calc((var(--stage-h) - 250px) * 9 / 16); }

/* Metrics */
.std-metrics { grid-column: 2; grid-row: 2; align-self: center; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.metrics { display: grid; gap: 1px; background: var(--divider); box-shadow: inset 0 0 0 1px var(--divider); }
.metric { background: var(--surface); padding: 10px 10px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 8px; min-width: 0; }
.metric-k { grid-column: 1 / -1; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-grey); white-space: nowrap; }
.metric-v { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: -0.02em; color: var(--off-white); font-variant-numeric: tabular-nums; }
.metric-d { padding: 2px 4px 1px; font-size: 10px; line-height: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted-grey); box-shadow: inset 0 0 0 1px var(--divider-strong); }
.metric-d.is-up { background: var(--up); color: var(--base); box-shadow: none; }
.roas-chart { display: none; }
.std-metrics .example { text-align: right; }

@media (min-width: 640px) {
  .metric-v { font-size: 24px; }
}
@media (min-width: 1024px) {
  .std { margin-top: 72px; }
  .stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(48px, 6vw, 128px); align-items: center; padding-top: 28px; padding-bottom: 28px; }
  .std-list { grid-column: 1; grid-row: 1; max-width: 460px; }
  .std-bar { display: none; }
  .std-steps { margin-top: 22px; border-bottom: 1px solid var(--divider); }
  .std-top .t-eyebrow { padding: 9px 13px 8px; font-size: 14px; }
  .std-count { font-size: 22px; }
  .std-step { display: block; border-top: 1px solid var(--divider); }
  .std-step[data-i="0"], .std-step[data-i="6"] { display: none; }
  .std-btn { padding: 17px 0; color: var(--muted-grey); gap: 18px; }
  .std-n { color: var(--muted-grey); font-size: 15px; width: 26px; }
  .std-t { font-size: clamp(20px, 1.6vw, 26px); }
  .std-d { display: none; margin: -4px 0 0; padding: 0 0 20px 44px; font-size: 16px; line-height: 25px; max-width: 38ch; }
  .std-step.is-done .std-btn { color: var(--beige); }
  .std-step.is-done .std-n { color: var(--up); }
  .std-step.is-cur .std-btn { color: var(--off-white); }
  .std-step.is-cur .std-n { color: var(--tangerine); }
  .std-step.is-cur .std-d { display: block; }
  @media (hover: hover) { .std-btn:hover .std-t { color: var(--off-white); } }
  .std-final { display: block; margin-top: 20px; padding-left: 44px; font-size: 15px; line-height: 22px; color: var(--muted-grey); }
  .std-final b { color: inherit; }
  .stage.s6 .std-final { color: var(--off-white); }
  .stage.s6 .std-final b { color: var(--tangerine); }
  .std-center { grid-column: 2; grid-row: 1; }
  .fix-wrap { width: calc(min(var(--stage-h) - 170px, 720px) * 9 / 16); max-width: none; }
  .std-metrics { grid-column: 3; grid-row: 1; justify-self: end; width: 100%; max-width: 360px; gap: 10px; }
  .metric { padding: 14px 16px 15px; }
  .metric-v { font-size: clamp(28px, 2.4vw, 38px); }
  .metric-d { font-size: 11px; padding: 3px 6px 2px; margin-bottom: 4px; }
  .roas-chart { display: block; position: relative; height: 104px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
  .roas-chart svg { position: absolute; inset: 30px 16px 12px; width: calc(100% - 32px); height: calc(100% - 42px); overflow: visible; }
  .roas-chart path { fill: none; stroke: var(--up); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
  .roas-chart line { stroke: var(--divider); }
  .roas-chart .t-label { position: absolute; left: 16px; top: 10px; }
}

/* The ad on the stage. Classes s1 to s6 on .stage are cumulative. */
.fix { --bg: #0a6cff; --acc: #ffe24a; --ink: #04205c; --ring: #6fb2ff; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--bg); container-type: inline-size; color: #ffffff; box-shadow: 0 0 0 1.5px var(--divider-strong); }
.stage.s6 .fix { box-shadow: 0 0 0 1.5px var(--tangerine); }
.fix-media { position: absolute; inset: 0; background: var(--bg); filter: var(--beige-film); }
.stage.s2 .fix-media { filter: contrast(1.1) saturate(1.25); }
.fix-media::before { content: ""; position: absolute; left: 50%; top: 36cqw; width: 78cqw; height: 78cqw; margin-left: -39cqw; border-radius: 50%; background: var(--ring, var(--acc)); opacity: 0.32; }
.fix-person { position: absolute; left: 50%; top: 30cqw; width: 118cqw; max-width: none; transform: translateX(-50%); }
.fix-person * { fill: var(--ink); }
.fix-prod { position: absolute; width: 19cqw; left: 74%; top: 80cqw; transform: rotate(-10deg); }
.fix-weak, .fix-hook, .fix-caps, .fix-cta { position: absolute; visibility: hidden; }
.fix-weak { left: 10cqw; right: 10cqw; top: 124cqw; text-align: center; font-size: 5.4cqw; line-height: 1.35; font-weight: 500; color: rgba(255, 255, 255, 0.85); visibility: visible; }
.stage.s1 .fix-weak { visibility: hidden; }
.fix-hook { left: 7cqw; right: 7cqw; top: 10cqw; font-family: var(--font-head); font-weight: 900; font-size: 11.5cqw; line-height: 0.98; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; }
.stage.s1 .fix-hook { visibility: visible; animation: caption-land var(--dur-wipe) var(--ease-cut) both; }
.fix-wave { position: absolute; left: 6cqw; bottom: 24cqw; width: 34cqw; height: 8cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0 2.4cqw; background: rgba(0, 0, 0, 0.28); }
.fix-wave i { flex: 1; height: 20%; background: rgba(255, 255, 255, 0.45); }
.stage.s2 .fix-wave i { background: #ffffff; animation: wave 0.48s steps(3, end) infinite; animation-delay: calc(var(--i) * -80ms); }
@keyframes wave { 0% { height: 30%; } 33% { height: 100%; } 66% { height: 55%; } 100% { height: 30%; } }
.fix-caps { left: 6cqw; right: 6cqw; top: 113cqw; text-align: center; font-weight: 700; font-size: 6.8cqw; line-height: 1.5; }
.fix-caps span { background: #ffffff; color: #111111; padding: 0.05em 0.3em; }
.stage.s3 .fix-caps { visibility: visible; animation: caption-land var(--dur-wipe) var(--ease-cut) both; }
.fix-cta { left: 5cqw; right: 5cqw; bottom: 5cqw; display: flex; justify-content: space-between; align-items: center; padding: 3cqw 3.6cqw; border-radius: 1.6cqw; background: var(--acc); color: var(--ink); font-weight: 700; font-size: 5.6cqw; }
.stage.s5 .fix-cta { visibility: visible; animation: caption-land var(--dur-wipe) var(--ease-cut) both; }
.fix-prog { position: absolute; left: 4cqw; right: 4cqw; top: 3.5cqw; height: 0.9cqw; background: rgba(255, 255, 255, 0.35); }
.fix-prog i { display: block; height: 100%; background: #ffffff; transform-origin: left; animation: ad-progress 6s linear infinite; }
.stage.s5 .fix-prog i { animation-duration: 4s; }

/* Timeline strip under the ad: step 4 trims the weak cuts */
.cuts { display: flex; gap: 2px; height: 10px; margin-top: 10px; }
.cuts i { flex: var(--f) 1 0; background: var(--muted-grey); }
.cuts i.is-weak { background: repeating-linear-gradient(135deg, var(--down) 0 3px, transparent 3px 5px); }
.stage.s4 .cuts i.is-weak { display: none; }
.stage.s4 .cuts i { background: var(--off-white); }
.cuts-tc { display: flex; justify-content: space-between; margin-top: 6px; }

/* Review pins and Marko's cursor */
.pin { position: absolute; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px; display: grid; place-items: center; background: var(--base); box-shadow: inset 0 0 0 1.5px var(--off-white); color: var(--off-white); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pin.is-done { background: var(--off-white); color: var(--base); }
.pin.is-cur { background: var(--tangerine); color: var(--on-tangerine); box-shadow: none; }
.pin[hidden] { display: none; }
.cursor { position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; transition: transform var(--dur-max) var(--ease-cut); }
.cursor svg { width: 18px; height: 18px; fill: var(--off-white); stroke: var(--base); stroke-width: 1.5; }
.cursor span { position: absolute; left: 14px; top: 16px; padding: 3px 7px; background: var(--off-white); color: var(--base); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cursor[hidden] { display: none; }

/* =====================================================================
   00:24 Comparison
   ===================================================================== */
.cmp-switch { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5px; padding: 1.5px; background: var(--divider-strong); }
.cmp-switch button { min-height: 48px; padding: 0 8px; background: var(--base); border: 0; cursor: pointer; font-size: 14px; line-height: 1.2; font-weight: 600; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-switch button[aria-pressed="true"] { background: var(--off-white); color: var(--base); }
.cmp-switch .cmp-long { display: none; }
@media (min-width: 640px) { .cmp-switch { max-width: 600px; } .cmp-switch button { font-size: 15px; } .cmp-switch .cmp-long { display: inline; } .cmp-switch .cmp-short { display: none; } }
.cmp { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cmp th, .cmp td { text-align: left; vertical-align: top; font-weight: 400; padding: 14px 12px; text-wrap: balance; }
.cmp thead th { font-size: 14px; font-weight: 600; color: var(--off-white); }
.cmp tbody th { color: var(--off-white); }
.cmp td { color: var(--muted-grey); }
.cmp .is-us { background: var(--tangerine-tint); color: var(--off-white); }
.cmp thead .is-us { background: var(--tangerine); color: var(--on-tangerine); box-shadow: none; font-family: var(--font-head); font-weight: 900; }
.cmp td.is-us b { font-weight: 700; color: var(--off-white); }
.cmp, .cmp thead, .cmp tbody { display: block; }
.cmp tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2px; }
.cmp thead td:first-child { display: none; }
.cmp tbody th { grid-column: 1 / -1; padding: 18px 0 8px; border-top: 1px solid var(--divider); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-grey); font-weight: 500; }
.cmp tbody tr:first-child th { border-top: 0; }
.cmp td:not(.is-us), .cmp thead th:not(.is-us) { background: var(--surface); }
.cmp thead tr { margin-bottom: 2px; }
.cmp tbody th { padding-top: 22px; border-top: 0; }
@media (max-width: 1023px) {
  .cmp[data-show="3"] :is(th, td):is(:nth-child(4), :nth-child(5)),
  .cmp[data-show="4"] :is(th, td):is(:nth-child(3), :nth-child(5)),
  .cmp[data-show="5"] :is(th, td):is(:nth-child(3), :nth-child(4)) { display: none; }
}
.cmp-line { margin-top: 56px; font-family: var(--font-head); font-weight: 400; font-size: clamp(26px, 6.6vw, 34px); line-height: 1.2; letter-spacing: -0.015em; color: var(--beige); text-wrap: balance; }
.cmp-line > span, .cmp-line > strong { display: block; }
.cmp-line strong { font-weight: 800; color: var(--off-white); margin-top: 0.1em; }
.cmp-foot { margin-top: 16px; max-width: 92ch; color: var(--muted-grey); }
@media (min-width: 1024px) {
  .cmp-switch { display: none; }
  .cmp { display: table; margin-top: 48px; table-layout: fixed; font-size: 16px; }
  .cmp thead { display: table-header-group; }
  .cmp tbody { display: table-row-group; }
  .cmp tr { display: table-row; }
  .cmp :is(th, td), .cmp thead td:first-child { display: table-cell; }
  .cmp thead td:first-child { width: 19%; }
  .cmp th, .cmp td { padding: 18px 22px; border-top: 1px solid var(--divider); }
  .cmp thead th, .cmp thead td { border-top: 0; padding-top: 20px; padding-bottom: 20px; vertical-align: bottom; }
  .cmp tbody th { padding: 18px 22px 18px 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--off-white); font-weight: 600; border-top: 1px solid var(--divider); }
  .cmp tbody tr:first-child th { border-top: 1px solid var(--divider); }
  .cmp td:not(.is-us), .cmp thead th:not(.is-us) { background: none; }
  .cmp .is-us { width: 23%; border-top-color: var(--tangerine-line); }
  .cmp thead .is-us { font-size: 22px; letter-spacing: -0.01em; }
  .cmp tbody tr:last-child :is(th, td) { border-bottom: 1px solid var(--divider); }
  .cmp tbody tr:last-child .is-us { border-bottom: 1px solid var(--tangerine-line); }
  .cmp-line { margin-top: 96px; font-size: clamp(34px, 3.1vw, 50px); line-height: 1.15; }
}

/* =====================================================================
   00:29 Pricing
   ===================================================================== */
.pricing-sub { margin-top: 28px; max-width: 46ch; color: var(--beige); }
.plans { margin-top: 48px; display: grid; gap: 12px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px 22px 30px; box-shadow: inset 0 0 0 1px var(--divider-strong); min-width: 0; }
.plan-monthly { order: -1; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--off-white); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-head .t-eyebrow { color: var(--off-white); }
.badge { display: inline-block; padding: 5px 8px 4px; background: var(--off-white); color: var(--base); font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.price { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 14px; row-gap: 16px; }
.price-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(54px, 16vw, 88px); line-height: 0.85; letter-spacing: -0.03em; color: var(--off-white); font-variant-numeric: tabular-nums; }
.price-meta { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; font-size: 15px; line-height: 20px; font-weight: 500; }
.price-meta s { position: relative; color: var(--muted-grey); text-decoration: none; width: fit-content; }
.price-meta s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--tangerine); transform-origin: left; transform: scaleX(var(--strike, 1)); transition: transform var(--dur-max) var(--ease-cut); }
.price-meta span { color: var(--off-white); }
.plan-for { max-width: 64ch; text-wrap: balance; }
.plan-name { font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--off-white); }
.plan-inc { margin-top: 6px; color: var(--muted-grey); }
.plan-list { margin-top: -10px; border-bottom: 1px solid var(--divider); }
.plan-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--divider); color: var(--beige); text-wrap: balance; }
.plan-list li::before { content: ""; flex: 0 0 8px; height: 8px; background: var(--tangerine); transform: translateY(-2px); }
.plan-list strong { font-weight: 600; color: var(--off-white); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.founding { margin-top: 12px; display: grid; gap: 14px; padding: 22px; background: var(--tangerine-tint); box-shadow: inset 0 0 0 1px var(--tangerine-line); }
.founding-tag { justify-self: start; padding: 5px 8px 4px; background: var(--tangerine); color: var(--on-tangerine); font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.founding p { font-size: 17px; line-height: 1.5; color: var(--beige); }
.founding .ln + .ln { margin-top: 2px; }
@media (min-width: 640px) { .plan { padding: 36px 32px; } .founding { padding: 24px 32px; } }
@media (min-width: 1024px) {
  .plans { margin-top: 88px; grid-template-columns: 1fr 1fr; gap: 16px; }
  .plan { padding: 44px 44px 48px; }
  .plan-monthly { order: 0; }
  .price-n { font-size: clamp(72px, 6.4vw, 112px); }
  .price-meta { font-size: 16px; line-height: 22px; padding-bottom: 6px; }
  .founding { margin-top: 16px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; padding: 26px 44px; }
  .founding p { font-size: 18px; }
}

/* =====================================================================
   00:36 Who's behind it
   ===================================================================== */
.founder-grid { display: grid; gap: 40px; }
.viewfinder { position: relative; aspect-ratio: 4 / 5; background: var(--surface); display: grid; place-items: center; max-width: 560px; width: 100%; }
.viewfinder::before { content: ""; position: absolute; inset: 16px;
  background: linear-gradient(var(--off-white), var(--off-white)) left top / 22px 2px, linear-gradient(var(--off-white), var(--off-white)) left top / 2px 22px,
              linear-gradient(var(--off-white), var(--off-white)) right top / 22px 2px, linear-gradient(var(--off-white), var(--off-white)) right top / 2px 22px,
              linear-gradient(var(--off-white), var(--off-white)) left bottom / 22px 2px, linear-gradient(var(--off-white), var(--off-white)) left bottom / 2px 22px,
              linear-gradient(var(--off-white), var(--off-white)) right bottom / 22px 2px, linear-gradient(var(--off-white), var(--off-white)) right bottom / 2px 22px;
  background-repeat: no-repeat; pointer-events: none; z-index: 2; }
.viewfinder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A soft shade along the top and bottom edges, so the light frame labels stay readable over a bright photo
   (the bottom ones sit on a white shirt). The middle of the photo, where the face is, is untouched. */
.viewfinder::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 15, 13, 0.55) 0, rgba(16, 15, 13, 0) 20%, rgba(16, 15, 13, 0) 76%, rgba(16, 15, 13, 0.62) 100%); }
.vf-top, .vf-bottom { z-index: 2; color: var(--off-white); }
.vf-top { position: absolute; left: 30px; right: 30px; top: 28px; display: flex; justify-content: space-between; }
.vf-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--off-white); }
.vf-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--down); }
.vf-bottom { position: absolute; left: 30px; right: 30px; bottom: 28px; display: flex; justify-content: space-between; }
.letter { display: flex; flex-direction: column; gap: 28px; }
.letter-head { font-family: var(--font-head); font-weight: 400; font-size: clamp(38px, 9.6vw, 52px); line-height: 1; letter-spacing: -0.025em; color: var(--off-white); text-wrap: balance; }
.letter .prose { max-width: 58ch; }
.signoff { display: flex; align-items: center; gap: 16px; color: var(--off-white); font-weight: 600; }
.signoff::before { content: ""; width: 48px; height: 1px; background: var(--rule); }
@media (min-width: 1024px) {
  .founder-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 128px); align-items: center; }
  .letter { gap: 36px; }
  .letter-head { font-size: clamp(52px, 4.8vw, 80px); }
}

/* =====================================================================
   00:41 FAQ
   ===================================================================== */
.faq-grid { display: grid; gap: 32px; }
.faq-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 13vw, 72px); line-height: 0.9; letter-spacing: -0.03em; color: var(--off-white); }
.faq-list { border-bottom: 1px solid var(--divider); }
.faq-item { border-top: 1px solid var(--divider); }
.faq-q { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--off-white); }
.faq-toggle::before { content: "Open"; }
.faq-item[open] .faq-toggle::before { content: "Close"; }
@media (hover: hover) { .faq-q:hover .faq-toggle { color: var(--tangerine); } }
.faq-a { padding: 0 0 24px; max-width: 78ch; color: var(--beige); }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 64px; align-items: start; }
  /* Pulled up by the space above the capitals, so the top of "FAQ" sits on the first rule of the list */
  .faq-title { position: sticky; top: calc(var(--header-h) + 48px); margin-top: -0.075em; font-size: clamp(72px, 7vw, 120px); }
  .faq-q { padding: 26px 0; }
  .faq-q h3 { font-size: 22px; }
  .faq-a { padding-bottom: 32px; font-size: 17px; line-height: 27px; }
}

/* =====================================================================
   00:46 End card: cut what's holding the ads back. Each cut turns
   more of the wall beside it bold.
   ===================================================================== */
.end-grid { display: grid; gap: 56px; }
.end-copy { display: flex; flex-direction: column; min-width: 0; }
.end-head { font-family: var(--font-head); font-weight: 900; font-size: clamp(40px, 10.4vw, 56px); line-height: 0.96; letter-spacing: -0.02em; color: var(--off-white); max-width: 14ch; text-wrap: balance; }
.cutlist { margin-top: 36px; border-top: 1px solid var(--divider); }
.cutlist li { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--divider); }
.cutlist .t-label { flex: 0 0 44px; }
.cutlist li > span:last-child { text-wrap: balance; }
/* The strike is a background on an inline span, so it runs through every line of a wrapped item */
.cutlist .cut { font-family: var(--font-head); font-weight: 600; font-size: clamp(19px, 5vw, 24px); line-height: 1.3; color: var(--off-white); background: linear-gradient(var(--tangerine), var(--tangerine)) no-repeat 0 56% / 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--dur-wipe) var(--ease-cut); }
.cutlist li.is-cut .cut { color: rgba(233, 226, 212, 0.78); background-size: 100% 2px; }
.cutlist li.is-cut .t-label { color: var(--tangerine); }
.end-who { margin-top: 32px; max-width: 46ch; }
.end-who strong { font-weight: 700; }
.end-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.end-cta .t-small { color: var(--muted-grey); max-width: 46ch; }
/* Phones see the list before the wall, so the wall only appears where they sit side by side */
.end-reel { display: none; }
@media (min-width: 1024px) {
  .end-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(56px, 7vw, 128px); align-items: stretch; }
  .end-head { font-size: clamp(56px, 5.4vw, 92px); }
  .cutlist { margin-top: 48px; }
  .cutlist li { padding: 15px 0; }
  .cutlist .cut { font-size: clamp(22px, 1.8vw, 28px); }
  .end-who { margin-top: 40px; }
  .end-reel { display: block; position: relative; overflow: hidden; min-height: 560px; }
  .end-stack { position: absolute; top: -14%; bottom: -14%; left: -10%; right: -10%; }
}

/* =====================================================================
   Footer
   ===================================================================== */
.footer { padding-top: 56px; padding-bottom: calc(32px + var(--ruler-h) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--divider); }
.footer-fit { container-type: inline-size; }
/* Sized so the ink runs edge to edge: the "B" is pulled left by its own side space (optical alignment in
   site.js), and 17.39cqi puts the right edge of the "d" on the frame's right edge */
.footer-mark { display: block; width: fit-content; font-size: 17.39cqi; line-height: 0.82; padding-top: 0.06em; }
.footer-tag { margin-top: 24px; color: var(--beige); font-size: 18px; }
.footer-row { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--divider); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px 24px; font-size: 15px; line-height: 20px; }
/* Phones: site links and contact in two columns, one link per line */
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-row .footer-meta { grid-column: 1 / -1; }
.footer-row a { color: var(--off-white); text-decoration: none; }
@media (hover: hover) { .footer-row a:hover { color: var(--tangerine); } }
.footer-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted-grey); font-size: 14px; }
/* Business details the law requires on every page: present, but quiet */
.footer-legal { margin-top: 24px; max-width: 92ch; font-size: 12px; line-height: 18px; color: var(--muted-grey); }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Phones: one ID per line instead of a dot left hanging at a line end */
@media (max-width: 639px) { .footer-legal .sep { display: none; } .footer-legal .ln > :not(.sep) { display: block; width: fit-content; } .footer-legal .ln + .ln { margin-top: 6px; } }
.gs-footer .footer-legal { flex-basis: 100%; max-width: none; margin-top: 4px; }
.gs-footer .footer-legal a { color: inherit; }
@media (min-width: 640px) { .footer-links { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; } }
@media (min-width: 1024px) {
  .footer { padding-top: 80px; }
  .footer-row { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 56px; }
  .footer-row .footer-meta { grid-column: auto; justify-content: flex-end; }
}

/* =====================================================================
   Privacy and Terms pages
   ===================================================================== */
.legal { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 48px); padding-bottom: 96px; }
.legal-body { max-width: 72ch; }
.legal-updated { margin-top: 20px; color: var(--muted-grey); }
.legal-body h2 { margin-top: 48px; font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--off-white); text-wrap: balance; }
.legal-body h2 + * { margin-top: 12px; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.6; color: var(--beige); text-wrap: pretty; }
.legal-body p + p, .legal-body p + ul, .legal-body ul + p { margin-top: 12px; }
.legal-body ul { display: grid; gap: 8px; }
.legal-body li { display: flex; gap: 12px; align-items: baseline; }
.legal-body li::before { content: ""; flex: 0 0 6px; height: 6px; background: var(--tangerine); transform: translateY(-3px); }
.legal-body strong { color: var(--off-white); font-weight: 600; }
@media (min-width: 1024px) { .legal { padding-top: calc(var(--header-h) + 88px); padding-bottom: 128px; } .legal-body p, .legal-body li { font-size: 17px; } }

/* =====================================================================
   Get started page
   ===================================================================== */
.gs { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 48px); padding-bottom: 96px; display: grid; gap: 64px; }
.gs-intro { display: flex; flex-direction: column; gap: 24px; }
.gs-intro .t-h1 { max-width: 12ch; }
.gs-lede { max-width: 40ch; }
.gs-call { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.gs-call p { color: var(--off-white); font-weight: 600; }
.gs-call ul { border-bottom: 1px solid var(--divider); }
.gs-call li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--divider); color: var(--beige); }
.gs-call li::before { content: ""; flex: 0 0 8px; height: 8px; background: var(--tangerine); transform: translateY(-2px); }
.form { display: flex; flex-direction: column; gap: 44px; padding: 28px 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.form-note { color: var(--muted-grey); }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 22px; }
.form legend { padding: 0 0 14px; width: 100%; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.form-row { display: grid; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-label, .chips legend { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--off-white); }
.req { color: var(--muted-grey); }
.input { width: 100%; height: 52px; padding: 0 16px; border: 0; background: var(--base); color: var(--off-white); box-shadow: inset 0 0 0 1px var(--divider-strong); font-family: var(--font-sans); font-size: 16px; }
textarea.input { height: auto; min-height: 132px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
@media (hover: hover) { .input:hover { box-shadow: inset 0 0 0 1px var(--muted-grey); } }
.input:focus { outline: 2px solid var(--focus); outline-offset: 0; box-shadow: none; }
.chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 12px; border: 0; width: auto; }
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; cursor: pointer; background: var(--base); box-shadow: inset 0 0 0 1.5px var(--divider-strong); color: var(--beige); font-size: 15px; font-weight: 500; }
@media (hover: hover) { .choice:hover span { box-shadow: inset 0 0 0 1.5px var(--muted-grey); } }
.choice input:checked + span { background: var(--off-white); color: var(--base); box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.form .btn { align-self: flex-start; }
.form-send { display: flex; flex-direction: column; gap: 14px; }
.form .btn:disabled { cursor: default; opacity: 0.7; }
.form-privacy { color: var(--muted-grey); }
.form-error { position: relative; padding-left: 20px; color: var(--off-white); }
.form-error::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--down); }
/* After a send: the confirmation takes the form's place, in the same panel */
.gs-done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 36px 20px 40px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--divider); }
.form[hidden], .gs-done[hidden] { display: none; }
.gs-done:focus { outline: none; }
.gs-done-tag { padding: 5px 8px 4px; background: var(--tangerine); color: var(--on-tangerine); font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gs-done .t-body { max-width: 44ch; overflow-wrap: anywhere; }
.gs-done .btn { margin-top: 10px; }
.gs-footer { padding-top: 24px; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted-grey); }
.gs-footer a { color: var(--off-white); text-decoration: none; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } .form { padding: 36px 32px; } .gs-done { padding: 44px 32px 48px; } }
@media (min-width: 1024px) {
  .gs { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(56px, 7vw, 128px); padding-top: calc(var(--header-h) + 88px); padding-bottom: 128px; align-items: start; }
  .gs-intro { position: sticky; top: calc(var(--header-h) + 40px); }
  .form { padding: 48px 48px; }
  .gs-done { padding: 56px 48px 60px; }
}

/* =====================================================================
   404: the hero's headline and box, centred in the window
   ===================================================================== */
.nf { min-height: calc(100svh - 70px); display: flex; align-items: center; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 48px); padding-bottom: 96px; }
.nf .container { width: 100%; }
.nf .slate { margin-bottom: 48px; }
.nf-copy { max-width: 760px; }
/* "got cut." is shorter than the home page's box text: its tallest letter is the 0.688em "t", so the top needs
   less padding to keep the same optical centring */
.ht-lead .hl.nf-box { padding-top: 0.01em; }

/* ---------- Line breaks below desktop (last, so it wins over each block's own text-wrap) ---------- */
/* Phones and tablets: the column is already narrow, so balancing leaves lines at half the width and a ragged
   right edge. Body text fills each line there; js/kern.js joins the last two words so none ends on one word.
   Headings still balance. */
@media (max-width: 1023px) {
  p, li, dd, td, .ln, .pipe-step p, .pipe-note, .std-d, .std-note, .end-who, .plan-for, .gs-lede, .hero-sub,
  .pains p, .plan-list li, .cutlist li > span:last-child, .cmp th, .cmp td, .legal-body p, .legal-body li { text-wrap: wrap; }
  :is(h1, h2, h3, .t-h1, .t-h2, .kicker, .cmp-line, .end-head, .letter-head) .ln { text-wrap: balance; }
}
/* ---------- Reduced motion: static ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .cursor, .price-meta s::after, .wall .ad, .end-stack .ad, .cutlist .cut { transition: none; }
  .land.is-landing .w { animation: none; }
  .land.pre .w { opacity: 1; }
  .ad *, .fix *, .wall-track, .qrow-t, .feed-strip .ad { animation: none !important; }
  .ad-sc:first-child, .ad-w, .ad-stars i, .ad-confetti i { opacity: 1; }
}