/* Quizmark public site. One stylesheet for every page; see DESIGN.md.
   A bright, quiet page with one dark object in it: the player. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fbfbf9;
  --ink: #131715;
  --ink-2: #484f4b;
  --ink-3: #676e6a;
  --rule: #e3e4df;
  --tint: #f1f3ef;
  --teal: #079690;
  --teal-ink: #04625e;

  /* Product colours, used only for the product and diagrams of it. */
  --pl-bg: #0b0d0f;
  --pl-card: #1b1e23;
  --pl-text: #f2f4f7;
  --pl-muted: #a6adbb;
  --pl-blue: #4f8cff;
  --pl-green: #3fbf7f;
  --pl-red: #ef5f6b;
  --pl-ready: #26c2b4;

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100% }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { text-decoration-thickness: 2px }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.028em; text-wrap: balance }
p { margin: 0; text-wrap: pretty }
button { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 10;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px }

/* Width: every block shares one measure and one gutter. */
.nav, .hero, .how, .why-inner, .setup, .faq, .close, .foot, .doc {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rules sit on the content edge, not across the gutters. */
.how, .faq, .close, .foot {
  background: linear-gradient(var(--rule), var(--rule)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px;
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 22px; border-radius: 10px;
  background: var(--ink); color: #fff;
  font-weight: 650; font-size: 16px; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { background: #2b322e }
.btn:active { transform: translateY(1px) }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; border-radius: 9px }
.btn-lg { height: 60px; padding: 0 30px; font-size: 18px; border-radius: 12px }

.btn-text {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 16px; text-decoration: none;
  padding: 6px 2px;
}
.btn-text svg circle { fill: var(--ink) }
.btn-text svg path { fill: #fff }
.btn-text:hover { text-decoration: underline; text-underline-offset: 4px }

.fine { font-size: 14px; color: var(--ink-3) }

/* ---------- Header ---------- */

.nav {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; text-decoration: none;
}
/* "for YouTube" names the platform, so it sits lighter than the product name. */
.brand-for { font-weight: 500 }
.brand sup { position: relative; top: -.55em; font-size: .5em; vertical-align: baseline; margin-left: 1px }
.nav nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; color: var(--ink-2) }
.nav nav a { text-decoration: none }
.nav nav a:hover { color: var(--ink); text-decoration: underline }
.nav .brand { flex: none; white-space: nowrap }
/* Below this the page links no longer fit beside the full product name; the
   sections are one scroll away and Compare is in the footer. */
@media (max-width: 900px) {
  .nav nav { display: none }
  .nav .btn { margin-left: auto }
}
/* Phones: the name and the button share one row at a smaller size. */
@media (max-width: 520px) {
  .nav { gap: 12px }
  .nav .brand { font-size: 15px; gap: 8px }
  .nav .brand img { width: 24px; height: 24px }
  .nav .btn { height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 8px }
}
/* The smallest phones: the platform line stacks under the name. */
@media (max-width: 350px) {
  .nav .brand > span { line-height: 1.05 }
  .brand-for { display: block; font-size: 11.5px; letter-spacing: 0 }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
  padding-block: clamp(16px, 4vh, 48px) clamp(64px, 10vh, 112px);
}
.hero h1 {
  font-size: clamp(42px, 4.25vw, 66px);
  line-height: .98;
  letter-spacing: -0.04em;
  font-weight: 820;
}
.lede { margin-top: 22px; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 34ch }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px }
.hero .fine { margin-top: 20px; max-width: 36ch }

@media (max-width: 1079px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 20px }
  .hero-copy { max-width: 640px }
  .lede { max-width: 44ch }
}

/* ---------- The player (interactive demo) ---------- */

.player { margin: 0 }
.stage {
  position: relative;
  container-type: inline-size;
  /* Video, then controls. On a narrow player the quiz spans both rows, so a
     card taller than the video grows the player instead of leaving it. */
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  background: var(--pl-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(19, 23, 21, .08), 0 24px 60px -24px rgba(19, 23, 21, .45);
  color: var(--pl-text);
  isolation: isolate;
}
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; grid-row: 1; grid-column: 1 }
.stage > .bar { grid-row: 2; grid-column: 1 }
.frame {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .35s ease;
}
.frame.is-swapping { opacity: .15 }
.cc {
  position: absolute; left: 0; right: 0; bottom: clamp(8px, 2.4cqw, 20px);
  text-align: center; padding-inline: 8%;
  font-size: clamp(12px, 2.15cqw, 20px); line-height: 1.35; font-weight: 500;
  pointer-events: none;
}
.cc span {
  background: rgba(8, 8, 8, .78); padding: .12em .45em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.cc:empty, .cc span:empty { display: none }
/* Over the whole player, seek bar included, as the extension's own backdrop
   is: nothing behind a quiz competes with it. */
.dim {
  position: absolute; inset: 0; z-index: 2; background: rgba(4, 5, 6, .68);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}

.bar { position: relative; padding: 0 14px 6px; background: linear-gradient(transparent, rgba(0,0,0,.35)) }
.seek { position: relative; height: 16px }
.seek > div { position: absolute; top: 6px; height: 4px; left: 0 }
.seek-track { right: 0; display: flex; gap: 2px }
.seek-track i { display: block; height: 100%; background: rgba(255, 255, 255, .26) }
.seek-played { width: var(--p, 0%); background: #f03; border-radius: 2px 0 0 2px; transition: width .2s linear }
.seek-span { left: var(--a, 0%); width: var(--w, 0%); background: var(--pl-blue); opacity: 0; transition: opacity .25s ease }
.seek-head {
  left: var(--p, 0%); top: 2px !important; width: 12px; height: 12px !important; margin-left: -6px;
  background: #f03; border-radius: 50%; transition: left .2s linear;
}
.seek-marks { right: 0; top: 2px !important; height: 12px !important }
/* The extension's marker states, each filled with its own border colour:
   ready is the one waiting for you, generating breathes. */
.mark {
  position: absolute; left: var(--x); top: 0; width: 12px; height: 12px; margin-left: -6px;
  padding: 0; border-radius: 50%; cursor: pointer; appearance: none;
  background: var(--c); border: 2px solid var(--c);
}
.mark::before { content: ""; position: absolute; inset: -8px }
.mark.is-ready { --c: var(--pl-blue); box-shadow: 0 0 0 3px rgba(79, 140, 255, .18), 0 0 9px 1px rgba(79, 140, 255, .7) }
.mark.is-generating { --c: #ffc53d; animation: mark-pulse 1.4s ease-in-out infinite }
.mark.is-final { border-radius: 2px; transform: rotate(45deg) scale(.86); margin-left: -9px }
.mark.is-final.is-generating { --c: #e8b233; animation-name: mark-pulse-final }
.mark:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
@keyframes mark-pulse { 50% { opacity: .45; transform: scale(.86) } }
@keyframes mark-pulse-final { 50% { opacity: .45; transform: rotate(45deg) scale(.74) } }

/* The extension's hover card for a mark. */
.tip {
  position: absolute; z-index: 1; left: clamp(90px, var(--left), calc(100% - 90px)); transform: translateX(-50%);
  min-width: 140px; max-width: 180px; padding: 9px 11px 10px; border-radius: 9px;
  background: rgba(18, 20, 24, .97); box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
  color: var(--pl-text); font-size: 12px; line-height: 1.35;
}
.tip[hidden] { display: none }
.tip-title { font-weight: 600; margin-bottom: 2px }
.tip-state { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--pl-muted); font-size: 11px; margin-bottom: 8px }
.tip-range { flex: none; font-variant-numeric: tabular-nums }
.tip-go {
  width: 100%; padding: 6px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: #2f6fe0; color: #fff; font-size: 12px; font-weight: 600;
}
.tip-go:hover:not(:disabled) { background: #3f7cec }
.tip-go:disabled { opacity: .4; cursor: default }
.controls { display: flex; align-items: center; gap: 12px; height: 38px; font-size: 13px; color: var(--pl-muted); min-width: 0 }
.pp {
  display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: #fff;
}
.pp:hover { background: rgba(255, 255, 255, .1) }
.pp svg path { fill: currentColor }
.pp .i-pause { display: none }
.player.is-playing .pp .i-play { display: none }
.player.is-playing .pp .i-pause { display: inline }
.time { font-family: var(--mono); font-size: 12.5px; color: #e9ecf1; white-space: nowrap }
.chapter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.back-pill {
  flex: none; margin-left: auto;
  height: 28px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
}
.back-pill::before {
  content: ""; width: 11px; height: 9px;
  background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
              linear-gradient(currentColor 0 0) 0 50% / 70% 2px no-repeat,
              linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
}
.back-pill:hover { background: rgba(255, 255, 255, .16) }
.back-pill.is-ready { background: #2f6fe0; border-color: #2f6fe0 }
.back-pill[hidden] { display: none }
.ev-tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 8px; background: rgba(12, 14, 16, .82);
  font-size: 13px; font-weight: 600; color: #fff;
}
.ev-tag span { font: 500 12px var(--mono); color: #b9c8ff; margin-left: 6px }
.ev-tag[hidden] { display: none }

/* The quiz sits over the whole stage, video and controls, as in the extension. */
.quiz {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; padding: clamp(10px, 2.2cqw, 24px) 0;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.player[data-state="prelude"] .dim,
.player[data-state="question"] .dim,
.player[data-state="summary"] .dim,
.player[data-state="end"] .dim { opacity: 1; pointer-events: auto }
.player[data-state="prelude"] .quiz,
.player[data-state="question"] .quiz,
.player[data-state="summary"] .quiz,
.player[data-state="end"] .quiz { opacity: 1; visibility: visible; transition: opacity .3s ease }

.card {
  width: 80%; max-height: 100%; overflow: auto;
  background: rgba(27, 30, 35, .97); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: clamp(14px, 2.6cqw, 26px);
  font-size: clamp(13px, 1.75cqw, 15px); line-height: 1.45;
  scrollbar-width: thin;
}
.card.is-entering { animation: card-in .32s cubic-bezier(.2, .7, .2, 1) }
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.985) } }

.q-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .82em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pl-muted);
}
.chip {
  font-size: .9em; font-weight: 600; letter-spacing: 0; text-transform: none; color: #cfd4dc;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 1px 9px;
}
.q-title { margin-top: .5em; font-size: 1.55em; line-height: 1.2; font-weight: 750; letter-spacing: -0.015em; color: #fff }
.q-desc { margin-top: .7em; color: #c9ced8 }
.q-stats { display: flex; gap: 2.2em; margin: 1.1em 0 0 }
.q-stats div { display: grid; gap: 2px }
.q-stats dt { font-size: .74em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pl-muted) }
.q-stats dd { margin: 0; font-size: 1.12em; font-weight: 700; color: #fff }
[data-view="prelude"] { text-align: center }
[data-view="prelude"] .q-kicker, [data-view="prelude"] .q-stats { justify-content: center }
[data-view="prelude"] .q-desc { max-width: 46ch; margin-inline: auto }
/* The results card is centred, like the extension's. */
[data-view="summary"] { text-align: center }
[data-view="summary"] .q-kicker, [data-view="summary"] .q-row { justify-content: center }
[data-view="summary"] .muted { max-width: 46ch; margin-inline: auto }

.q-text { margin-top: .55em; font-size: 1.28em; line-height: 1.3; font-weight: 700; color: #fff; letter-spacing: -0.01em }
.opts { display: grid; gap: .42em; margin: .85em 0 0; padding: 0; list-style: none }
.opt {
  display: flex; align-items: center; gap: .8em; width: 100%;
  padding: .5em .75em; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .13);
  color: #eef0f4; transition: border-color .12s ease, background-color .12s ease;
}
.opt:hover:not(:disabled) { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .05) }
.opt b {
  flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 6px;
  background: rgba(255, 255, 255, .1); font-size: .78em; font-weight: 700;
}
.opt[aria-checked="true"] { border-color: var(--pl-blue); background: rgba(79, 140, 255, .1) }
.opt.is-right { border-color: var(--pl-green); background: rgba(63, 191, 127, .12) }
.opt.is-wrong { border-color: var(--pl-red); background: rgba(239, 95, 107, .1) }
.opt.is-right::after, .opt.is-wrong::after { margin-left: auto; font-weight: 700 }
.opt.is-right::after { content: "✓"; color: var(--pl-green) }
.opt.is-wrong::after { content: "✕"; color: var(--pl-red); font-size: .9em }
.opt:disabled { cursor: default }

.verdict { display: flex; align-items: center; gap: .55em; margin-top: .8em; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; font-size: .86em }
.verdict::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; border: 2px solid currentColor }
.verdict.ok { color: var(--pl-green) }
.verdict.no { color: var(--pl-red) }
.explain {
  margin-top: .5em; padding: .55em .9em; border-left: 3px solid var(--pl-blue);
  background: rgba(255, 255, 255, .045); border-radius: 0 8px 8px 0; color: #c9ced8;
}

.q-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; margin-top: .9em }
.q-row .spacer { flex: 1 }
.q-center { justify-content: center }
.pill {
  display: inline-flex; align-items: center; gap: .45em; height: 2.35em; padding: 0 1.05em;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: transparent;
  color: #fff; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, opacity .12s ease;
}
.pill:hover:not(:disabled) { background: rgba(255, 255, 255, .08) }
.pill svg { width: .85em; height: .85em; fill: currentColor }
/* Deeper than the extension's #4f8cff so white text meets 4.5:1. */
.pill-blue { background: #2f6fe0; border-color: #2f6fe0; font-weight: 700; padding: 0 1.4em }
.pill-blue:hover:not(:disabled) { background: #3f7cec }
.pill:disabled { opacity: .4; cursor: default }
.pill-green { background: var(--pl-green); border-color: var(--pl-green); color: #06150d; font-weight: 700 }
.pill-green:hover:not(:disabled) { background: #5ad194 }
.pill-light { background: #fff; border-color: #fff; color: var(--ink); font-weight: 700 }
.pill-light:hover:not(:disabled) { background: #e8ebea }

.dots { display: flex; gap: 6px; justify-content: center; margin-top: .8em; padding-top: .75em; border-top: 1px solid rgba(255, 255, 255, .09) }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22) }
.dots i.on { background: #fff }
.dots i.ok { background: var(--pl-green) }
.dots i.no { background: var(--pl-red) }

.score { font-size: 2.4em; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-top: .2em; font-variant-numeric: tabular-nums }
.card .muted { color: #c9ced8; margin-top: .4em }

.demo-note { margin-top: 14px; font-size: 14px; color: var(--ink-3) }

/* Narrow players: the card still covers the video, at full width. A 16:9
   frame at phone width is shorter than any readable quiz, so while a quiz is
   open the player grows to the card's height and the video fills it. */
@container (max-width: 559px) {
  .quiz { position: relative; inset: auto; grid-row: 1 / 3; grid-column: 1; display: none; padding: 10px 8px }
  .player[data-state="prelude"] .quiz,
  .player[data-state="question"] .quiz,
  .player[data-state="summary"] .quiz,
  .player[data-state="end"] .quiz { display: grid }
  /* The video fills whatever height the card needs, at least 16:9. */
  .screen { aspect-ratio: auto; min-height: 56.25cqw }
  .card { width: 100%; max-height: none; font-size: 15px; padding: 18px 16px 20px }
  .q-title { font-size: 1.35em }
  .q-stats { gap: 1.4em }
}

/* ---------- How it works ---------- */

.how { padding-block: clamp(72px, 11vw, 136px) clamp(64px, 9vw, 112px) }
.how-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px }
.how h2, .setup h2, .faq h2, .why h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04 }
.how-head p { color: var(--ink-2); white-space: nowrap }
/* One line everywhere: on phones the text scales to the width it has.
   The line is 24.8em wide; the page gutter is 16px a side at this size. */
@media (max-width: 520px) { .how-head p { font-size: min(17px, calc((100vw - 32px) / 24.8)) } }
.count { display: inline-block }
/* The quiz count in the heading changes with the interval; teal so it reads
   as the part that moves. */
.how-head h2 .count { color: var(--teal) }

.timeline { position: relative; height: 150px; margin-top: clamp(10px, 1.5vw, 18px) }
.tl-arc { position: absolute; left: 0; top: 0; width: 100%; height: 92px; overflow: visible }
.tl-arc path {
  fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke;
}
.tl-bar, .tl-played, .tl-evidence { position: absolute; top: 96px; height: 8px; border-radius: 4px }
.tl-bar { left: 0; right: 0; display: flex; background: #dcded8; overflow: hidden }
.tl-bar.has-chapters { background: transparent; z-index: 1 }
.tl-bar i { display: block; height: 100%; border-right: 3px solid var(--bg) }
.tl-bar i:last-child { border-right: 0 }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 96px; height: 8px; border-radius: 4px; background: #dcded8 }
.tl-played { left: 0; width: var(--p, 100%); background: var(--ink) }
.tl-evidence { left: 0; width: 3.64%; border-radius: 4px 0 0 4px }
/* 2:32, where Watch takes the first question: drawn as YouTube's playhead,
   a red handle with the track red up to it. The red sits under the chapter
   gaps, the handle over everything. */
.tl-evidence::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #f03; z-index: 0 }
.tl-evidence::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; background: #f03; z-index: 3;
}
.tl-marks { position: absolute; left: 0; right: 0; top: 100px }
.tl-marks span {
  position: absolute; left: var(--x); top: -10px; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: var(--bg); border: 3px solid var(--pl-blue); z-index: 2;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease,
              left .75s cubic-bezier(.3, .7, .2, 1), opacity .4s ease;
}
/* Marks arriving or leaving when the interval changes. */
.tl-marks span.is-out { opacity: 0; transform: scale(.4) }
.tl-labels span.is-out { opacity: 0 }
.tl-marks span.is-final { border-radius: 3px; transform: rotate(45deg) scale(.82); border-color: var(--teal); margin-left: -16px }
.tl-marks span.is-hit { background: var(--pl-blue) }
.tl-marks span.is-final.is-hit { background: var(--teal) }
.tl-labels span {
  position: absolute; top: 122px; left: var(--x); transform: translateX(-50%);
  font: 500 13px/1 var(--mono); color: var(--ink-3); white-space: nowrap;
  transition: left .75s cubic-bezier(.3, .7, .2, 1), opacity .4s ease;
}
.tl-labels span:first-child { transform: none }
.tl-labels span.is-end { transform: translateX(-100%) }
.tl-labels span.is-ev { top: 72px; color: var(--teal-ink); left: calc(var(--x) + 18px); transform: none }

.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  margin: 40px 0 0; padding: 0; list-style: none;
}
.steps li { padding-top: 20px; border-top: 2px solid var(--ink) }
.tc { font: 500 13px/1 var(--mono); color: var(--ink-3) }
.tc-ev, .tc-end { color: var(--teal-ink) }
.steps h3 { margin-top: 14px; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 750 }
.steps p { margin-top: 8px; font-size: 16px; color: var(--ink-2) }

/* The playhead runs once when the diagram is first seen. */
.timeline.is-running .tl-played { transition: width 2.6s cubic-bezier(.45, 0, .25, 1) }
.timeline.is-waiting .tl-arc path { stroke-dashoffset: 400; opacity: 0 }
.timeline.is-running .tl-arc path { transition: opacity .5s ease, stroke-dashoffset 1.1s ease }
.timeline.is-waiting .tl-evidence, .timeline.is-waiting .tl-labels .is-ev { opacity: 0 }
.timeline .tl-evidence, .timeline .tl-labels .is-ev { transition: opacity .4s ease }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px }
}
@media (max-width: 560px) {
  .timeline { height: 132px }
  .tl-arc { height: 76px }
  .tl-bar, .tl-played, .tl-evidence, .timeline::before { top: 80px; height: 6px }
  .tl-marks { top: 83px }
  .tl-marks span { width: 16px; height: 16px; margin-left: -8px; top: -8px; border-width: 3px }
  .tl-marks span.is-final { margin-left: -13px }
  .tl-labels span { top: 104px; font-size: 12px }
  .tl-labels span.is-ev { top: 56px }
  .tl-evidence::after { right: -7px; width: 14px; height: 14px; margin-top: -7px }
  .tl-labels span.is-mark:not(.is-first) { display: none }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px }
}

/* ---------- Why ---------- */

.why { background: var(--ink); color: #f2f3f0 }
.why-inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 80px);
  padding-block: clamp(72px, 10vw, 128px);
}
.why h2 { max-width: 11ch }
.why-figure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-self: end }
.why-num { display: grid; gap: 10px; align-content: start }
.why-num strong {
  font-size: clamp(64px, 8.4vw, 124px); line-height: .9; font-weight: 800; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; color: #3fd0c3;
}
.why-num > span { font-size: 16px; color: #c8ccc9; max-width: 26ch }
.why-num-soft strong { color: #7d8580 }
.why-body { grid-column: 2; font-size: 15px; color: #a8aea9; max-width: 60ch; padding-top: 24px; border-top: 1px solid #2e3431 }
.why-body a { color: #f2f3f0 }

/* Rotation: the band's layout stays as it is; only what is in it changes. */
.why-num { container-type: inline-size }
.why-num strong {
  /* Shrinks only for a value too long for its column, such as 48,478. */
  font-size: min(clamp(64px, 8.4vw, 124px), calc(100cqw / (var(--chars, 3) * .6)));
  transition: font-size .6s cubic-bezier(.2, .7, .2, 1);
  /* The full-size line is always reserved, so a shrunk number sits on the
     same baseline and the band never changes height. */
  display: flex; align-items: flex-end; min-height: calc(clamp(64px, 8.4vw, 124px) * .9);
}
.odo { display: inline-flex; height: .9em }
/* A wheel is clipped only above and below, so the digits rolling past stay
   hidden without shaving the sides of the one on show. It has to be
   overflow clipping, not clip-path: clip-path only hides the painting, and
   the 40-digit reels would still add their height to the page's scroll
   area. Digits keep the font's own spacing. */
.slot {
  display: inline-block; height: .9em; line-height: .9em; max-width: 1.1em;
  letter-spacing: 0; overflow-x: visible; overflow-y: clip;
  transition: max-width .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease;
}
.slot.is-out { max-width: 0; opacity: 0 }
/* % and the comma at their natural width, and free to rise above the line
   the digit wheels are clipped to; clipped only at the sides, for fading. */
.slot:not(.is-digit) { font-variant-numeric: proportional-nums; overflow: visible; clip-path: inset(-.4em -.15em) }
.reel { display: block }
.reel span { display: block; height: .9em; line-height: .9em }

.swap { display: grid }
.swap-item {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); filter: blur(6px);
  transition: opacity .35s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .45s ease, visibility 0s linear .6s;
}
.swap-item.is-current {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .5s ease .15s, transform .7s cubic-bezier(.2, .7, .2, 1) .15s, filter .5s ease .15s, visibility 0s;
}
.swap-item.is-leaving { transform: translateY(-8px) }

.why-controls { grid-column: 2; display: flex; align-items: center; gap: 6px; margin-top: 14px }
.why-pause {
  display: grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; padding: 0;
  border: 1px solid #3a413d; border-radius: 50%; background: transparent; color: #c8ccc9; cursor: pointer;
}
.why-pause:hover { border-color: #7d8580; color: #fff }
.why-pause svg path { fill: currentColor }
.why-pause .i-play, .why-inner.is-paused .why-pause .i-pause { display: none }
.why-inner.is-paused .why-pause .i-play { display: inline }
.why-step { display: grid; align-items: center; width: 34px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer }
.why-step i { position: relative; display: block; height: 3px; border-radius: 2px; background: #2e3431; overflow: hidden }
.why-step:hover i { background: #454c48 }
.why-step i::after { content: ""; position: absolute; inset: 0; background: #3fd0c3; transform: scaleX(0); transform-origin: left }
.why-step.is-current i::after { animation: why-fill var(--dwell, 8s) linear forwards }
/* Only the pause button and scrolling away stop the rotation. Pausing on
   hover or focus stopped it for good, since a reader's pointer rests on the
   band and a clicked step keeps focus. */
.why-inner.is-paused .why-step i::after,
.why-inner.is-offscreen .why-step i::after { animation-play-state: paused }
@keyframes why-fill { to { transform: scaleX(1) } }

@media (max-width: 900px) {
  .why-inner { grid-template-columns: minmax(0, 1fr) }
  .why-body, .why-controls { grid-column: 1 }
}

/* ---------- Setup ---------- */

.setup { padding-block: clamp(72px, 11vw, 136px) clamp(56px, 8vw, 96px) }
.setup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px }
.setup-head p { color: var(--ink-2); max-width: 44ch }
.options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 48px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; overflow: hidden;
}
.option { padding: clamp(24px, 3vw, 40px) }
.option + .option { border-left: 1px solid var(--rule) }
.option h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 750 }
.option p { margin-top: 10px; color: var(--ink-2); max-width: 44ch }
.option .option-foot { margin-top: 20px; font-size: 14px; font-weight: 650; color: var(--teal-ink) }
.privacy {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px;
  margin: 48px 0 0; padding: 0; list-style: none;
}
.privacy li { padding-top: 16px; border-top: 2px solid var(--ink); font-size: 16px; color: var(--ink-2) }
.privacy strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px }
.privacy-link { margin-top: 28px; font-size: 15px; font-weight: 600 }
@media (max-width: 760px) {
  .options { grid-template-columns: minmax(0, 1fr) }
  .option + .option { border-left: 0; border-top: 1px solid var(--rule) }
  .privacy { grid-template-columns: minmax(0, 1fr) }
}

/* ---------- FAQ ---------- */

.faq {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px);
  padding-block: clamp(56px, 8vw, 96px) clamp(72px, 10vw, 120px);
}
.faq-list { border-top: 1px solid var(--rule) }
.faq details { border-bottom: 1px solid var(--rule) }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 650; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--ink) 0 0) center / 14px 2px no-repeat,
              linear-gradient(var(--ink) 0 0) center / 2px 14px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg) }
.faq summary:hover { color: var(--teal-ink) }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-2); max-width: 64ch }
@media (max-width: 900px) { .faq { grid-template-columns: minmax(0, 1fr) } }

/* ---------- Close ---------- */

.close {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px;
  padding-block: clamp(72px, 10vw, 120px);
}
.close h2 { font-size: clamp(38px, 5.4vw, 80px); line-height: .98; letter-spacing: -0.04em; max-width: 14ch }
.close .fine { grid-column: 2; margin-top: -8px; text-align: right }
@media (max-width: 760px) {
  .close { grid-template-columns: minmax(0, 1fr) }
  .close .fine { grid-column: 1; text-align: left }
  .close .btn { justify-self: start }
}

/* ---------- Footer ---------- */

.foot { padding-block: 32px 48px; font-size: 15px; color: var(--ink-2) }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px }
.foot .brand { font-size: 17px; color: var(--ink) }
.foot nav { display: flex; gap: 24px }
.foot nav a { text-decoration: none }
.foot nav a:hover { text-decoration: underline }
.sponsor { margin-top: 24px }
.sponsor a { color: var(--ink); font-weight: 700 }
.legal { margin-top: 8px; font-size: 13px; color: var(--ink-3) }

/* ---------- Subpages (compare, help, privacy, 404) ---------- */

.doc { padding-block: clamp(32px, 5vw, 64px) clamp(64px, 9vw, 112px) }
.doc-narrow { max-width: 820px }
.doc h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; max-width: 18ch }
.doc .intro { margin-top: 18px; font-size: 19px; color: var(--ink-2); max-width: 52ch }
.doc h2 { font-size: 24px; letter-spacing: -0.02em; font-weight: 750; margin-top: 44px }
.doc h3 { font-size: 19px; letter-spacing: -0.01em; font-weight: 700; margin-top: 28px }
.doc p, .doc li { color: var(--ink-2); max-width: 66ch }
.doc p { margin-top: 12px }
.doc ul { margin: 12px 0 0; padding-left: 1.2em }
.doc li + li { margin-top: 4px }
.doc strong { color: var(--ink) }
.doc-meta { margin-top: 12px; font-size: 15px; color: var(--ink-3) }

.help-list { margin-top: 40px; border-top: 1px solid var(--rule) }
.help-list section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; padding: 24px 0; border-bottom: 1px solid var(--rule) }
.help-list h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em }
.help-list p { margin: 0 }
.help-list p + p { margin-top: 8px }
@media (max-width: 720px) { .help-list section { grid-template-columns: minmax(0, 1fr) } }

/* Privacy policy: contents rail beside the text on wide screens. */
.policy { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start }
.policy .contents { position: sticky; top: 24px; font-size: 14px; padding-top: 8px }
.policy .contents-heading { font-weight: 700; color: var(--ink); margin: 0 0 10px }
.policy .contents ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.policy .contents a { color: var(--ink-2); text-decoration: none }
.policy .contents a:hover { color: var(--ink); text-decoration: underline }
.policy main h1 { margin-bottom: 8px }
.policy main > p:first-of-type { margin-top: 16px }
.policy .anchor { text-decoration: none }
.policy .anchor-mark { margin-left: 8px; color: var(--ink-3); opacity: 0; font-weight: 500 }
.policy .anchor:hover .anchor-mark, .policy .anchor:focus .anchor-mark { opacity: 1 }
.policy .to-top { margin-top: 48px; font-size: 15px }
@media (max-width: 900px) {
  .policy { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .policy .contents { position: static; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: #fff }
}

/* Comparison: sized to fit one laptop screen, row labels on the left. */
.compare-wrap { margin-top: 36px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: #fff }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px }
.compare th, .compare td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--rule) }
.compare tbody tr:last-child > * { border-bottom: 0 }
.compare thead th { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--tint); vertical-align: bottom }
.compare thead th:nth-child(2), .compare td:nth-child(2) { background: #eef6f4 }
.compare thead th small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px }
.compare tbody th { font-weight: 600; color: var(--ink) }
.compare td { color: var(--ink-2); width: 19% }
.yes { display: inline-block; width: 18px; height: 18px; vertical-align: -4px }
.yes path { fill: none; stroke: var(--teal-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.no { color: #a2a8a4 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.doc-cta { margin-top: 40px }
.compare-note { margin-top: 16px; font-size: 14px; color: var(--ink-3); max-width: 80ch }

.lost { min-height: 60vh; display: grid; align-content: center; gap: 20px }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important }
}

/* Without script the bars are drawn whole, with no chapter gaps. */
.seek-track:not(.has-chapters) { background: rgba(255, 255, 255, .26) }