/* Homepage v2 prototype. A dark desk with two ivory plates in sepia ink. Terracotta marks the
   data on the plates; the interface around them stays quiet: one type family per role, flat
   controls, no glows. proto.js sets the layout variables (--p, --part, --stage-*, --copy-*). */

:root {
  --desk: #141210;
  --panel: #1a1815;
  --line: rgba(239, 233, 222, 0.09);
  --line-2: rgba(239, 233, 222, 0.18);
  --ivory: #efe9de;
  --text: #d6cec1;
  --muted: #a39b8e;
  --faint: #7d766b;
  --sepia: #3b2a1c;
  --accent: #d97757;
  --accent-ink: #b0502c;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --mast-h: 64px;
  /* Film grain: faint light specks on the desk, faint sepia specks on paper. */
  --grain-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.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 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  background: var(--desk);
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--grain-desk) repeat, var(--desk);
  background-size: 180px 180px, auto;
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: inherit; }

:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 3px;
  background: var(--ivory);
  color: var(--desk);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { top: 12px; }

/* ---------- controls: quiet, rounded, no glow ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--ivory); color: #161412; }
.btn-primary:hover { background: #ffffff; }

.btn-line { background: transparent; color: var(--ivory); border-color: rgba(239, 233, 222, 0.32); }
.btn-line:hover { background: rgba(239, 233, 222, 0.06); border-color: var(--ivory); }

.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }

.text-link {
  display: inline-block;
  padding: 6px 0;
  border: 0;
  background: none;
  font: 500 15px/1.2 var(--sans);
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(214, 206, 193, 0.45);
  text-underline-offset: 5px;
  white-space: nowrap;
  cursor: pointer;
}

.text-link:hover { color: #ffffff; text-decoration-color: currentColor; }

.ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  font: 600 13px/1 var(--sans);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ctl:hover { background: rgba(239, 233, 222, 0.06); border-color: rgba(239, 233, 222, 0.36); }
.ctl[hidden] { display: none; }
.ctl-icon { width: 34px; padding: 0; }
.ctl-dark[aria-pressed="true"] { border-color: rgba(239, 233, 222, 0.6); background: rgba(239, 233, 222, 0.08); color: var(--ivory); }
.ctl-dark[aria-busy="true"] { cursor: progress; opacity: 0.7; }

/* ---------- masthead: pseudo headerless ----------
   No bar: the wordmark, the section links and Try free float over the page. Difference blending
   turns the ivory type dark over the ivory plates and keeps it light over the dark desk, so the
   corners read without a strip behind them. */
.mast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--mast-h);
  padding: 0 clamp(16px, 3vw, 36px);
  color: #efe9de;
  mix-blend-mode: difference;
  pointer-events: none;
}

.mast > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ivory);
  font: 600 21px/1 var(--serif);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.mast .brand { color: inherit; }

.brand-m { width: 26px; height: 22px; overflow: visible; }

/* The links sit over the dark gap between the plates; the wordmark and Try free take the corners. */
.mast-nav {
  position: absolute;
  left: 50%;
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
  transform: translateX(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mast-nav a {
  padding: 10px 0;
  font: 500 14px/1 var(--sans);
  color: inherit;
  opacity: 0.78;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.mast-nav a:hover { opacity: 1; }

/* Past the hero only the wordmark and Try free stay, so nothing floats over the reading. */
.mast.is-past-hero .mast-nav {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
}

.mast-cta {
  margin-left: auto;
  color: inherit;
  border-color: currentColor;
}

.mast-cta:hover { background: rgba(239, 233, 222, 0.1); border-color: currentColor; }

/* ---------- hero: runs to the top edge ---------- */
.hero {
  position: relative;
  height: calc(100vh + var(--open, 0px));
  height: calc(100svh + var(--open, 0px));
  --p: 0;
}

/* index.html adds .hero-wait before first paint; proto.js lifts it once the plates are drawn. */
.hero-pin,
.mast { transition: opacity 0.4s ease; }
.hero-wait .hero-pin,
.hero-wait .mast { opacity: 0; }

.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.desk { position: absolute; inset: 0; }

.plate {
  position: absolute;
  top: -14px;
  bottom: -14px;
  width: var(--plate-w, 30vw);
  margin: 0;
  z-index: 2;
  opacity: calc(1 - var(--p) * 0.38);
  will-change: transform;
}

.plate-l {
  left: 0;
  transform: translateX(calc(var(--p) * var(--part, 0px) * -1)) rotate(-0.45deg);
  transform-origin: 0 50%;
}

.plate-r {
  right: 0;
  transform: translateX(calc(var(--p) * var(--part, 0px))) rotate(0.4deg);
  transform-origin: 100% 50%;
}

.plate-canvas,
.plate-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Text on the plates is real text laid over the canvas; proto.js places it on the printed frame. */
.plate-no {
  position: absolute;
  top: calc(var(--fy, 40px) + 12px);
  left: calc(var(--fx, 40px) + var(--fw, 300px) - 60px);
  width: 48px;
  text-align: right;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(59, 42, 28, 0.7);
}

.plate-cap {
  position: absolute;
  left: var(--fx, 40px);
  top: calc(var(--fy, 40px) + var(--fh, 600px) + 14px);
  width: var(--fw, 300px);
  margin: 0;
  font: 400 13.5px/1.45 var(--serif);
  color: var(--sepia);
}

.plate-cap b {
  margin-right: 6px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.plate-head {
  position: absolute;
  left: calc(var(--fx, 40px) + 18px);
  top: calc(var(--fy, 40px) + 18px);
  display: grid;
  gap: 6px;
  max-width: calc(var(--fw, 300px) - 80px);
}

.plate-title {
  font: 500 clamp(19px, 1.7vw, 26px)/1.1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--sepia);
}

.plate-sub {
  font: 500 10px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(59, 42, 28, 0.72);
}

.hero-copy {
  position: absolute;
  left: 50%;
  top: var(--copy-top, 22%);
  z-index: 4;
  width: var(--copy-w, 640px);
  text-align: center;
  transform: translateX(-50%) translateY(calc(var(--p) * var(--copy-shift, 0px))) scale(calc(1 - var(--p) * var(--copy-shrink, 0.18)));
  transform-origin: 50% 0;
}

/* The logo sits over the headline, where the page header used to carry it. */
.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 80px;
  font: 600 clamp(22px, 1.9vw, 28px)/1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.hero-brand .brand-m { width: 2.42em; height: 2em; }

.hero-copy h1 {
  margin: 0;
  font: 400 clamp(44px, 4.9vw, 76px)/1.04 var(--serif);
  letter-spacing: -0.022em;
  color: var(--ivory);
  text-wrap: balance;
}

.lede {
  max-width: 30em;
  margin: 22px auto 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: #b9b1a3;
}

/* One pass of the Ask card's thinking shimmer across the lede as the hero comes in; it settles on the plain colour.
   proto.js adds .is-shimmering on reveal and starts the plates' ink half a second after it ends. */
.hero .lede {
  background: linear-gradient(90deg, #b9b1a3 0%, #b9b1a3 34%, #f3e6cf 44%, #ffffff 50%, #f3e6cf 56%, #b9b1a3 66%, #b9b1a3 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede.is-shimmering { animation: lede-shimmer 2400ms ease-in-out 120ms 1 both; }
@keyframes lede-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .lede { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 30px;
}

/* ---------- the network: over the desk, under the plates (hero-art.js) ---------- */
.hero-net {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.is-stacked .hero-net,
.rm .hero-net { display: none; }

/* The plates and the network dissolve into the desk at the hero's foot rather than ending on a
   hard line; proto.js deepens the fade (--fade) as the hero scrolls away into § 1. The plates
   run 14px past the pin, so their fade ends at its bottom edge. */
.plate {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px - var(--fade, 56px)), transparent calc(100% - 14px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px - var(--fade, 56px)), transparent calc(100% - 14px));
}

.hero-net {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 56px)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 56px)), transparent);
}

.is-stacked .plate {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- the product: six figures drawn straight onto the desk ---------- */
.stage {
  position: absolute;
  left: 50%;
  top: var(--stage-top, 60%);
  z-index: 5;
  width: var(--stage-w, 900px);
  margin: 0;
  transform: translateX(-50%) translateY(calc((1 - var(--p)) * var(--stage-rise, 0px))) scale(calc(var(--stage-s0, 0.62) + (1 - var(--stage-s0, 0.62)) * var(--p)));
  transform-origin: 50% 0;
}

/* No frame: the figures and their caption sit on the desk itself. */
.stage-view {
  position: relative;
  aspect-ratio: 16 / 9;
}

.stage-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The caption reads like the plates' own: a figure number, the mode, one line. */
.stage-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cap-top, 76%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.stage-cap p { margin: 0; }

.stage-cap-head {
  font: 400 clamp(18px, 1.5vw, 22px)/1.25 var(--serif);
  color: var(--ivory);
}

.stage-cap-fig {
  margin-right: 10px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.2em;
  color: var(--accent);
}

.stage-cap-line {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* One mark per figure, and the pause control; they appear once the figures are playing. */
.stage-ctl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.stage-view.is-on .stage-ctl {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease 0.6s, visibility 0s;
}

.stage-ticks { display: flex; gap: 4px; }

.stage-ticks button {
  display: grid;
  align-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.stage-ticks i {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: rgba(239, 233, 222, 0.16);
}

.stage-ticks i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 233, 222, 0.7);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}

.stage-ticks button[aria-current="true"] i { background: rgba(239, 233, 222, 0.3); }
.stage-ticks button:hover i { background: rgba(239, 233, 222, 0.42); }

.clip-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(239, 233, 222, 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.clip-toggle:hover { color: var(--ivory); border-color: rgba(239, 233, 222, 0.45); }

.clip-toggle .i-play { display: none; }
.clip-toggle[aria-pressed="true"] .i-pause { display: none; }
.clip-toggle[aria-pressed="true"] .i-play { display: block; }

/* Phones see the clip with a way to take the link to a bigger screen. */
.stage-note {
  display: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  padding: 14px 2px 0;
  font-size: 14.5px;
  color: var(--muted);
}

.stage-note .text-link { font-size: 14.5px; }

/* ---------- stacked layout: portrait iPad and phones ---------- */
.is-stacked .hero { height: auto; }

.is-stacked .hero-pin {
  position: relative;
  top: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.is-stacked .plate {
  position: relative;
  top: auto;
  bottom: auto;
  width: auto;
  height: var(--band-h, 220px);
  opacity: 1;
  transform: none;
}

.is-stacked .plate-l { order: 0; z-index: 3; }
.is-stacked .hero-copy { order: 1; }
.is-stacked .plate-r { order: 2; z-index: 3; }
.is-stacked .stage { order: 3; }

/* A canvas is a replaced element, so its height must be explicit: "auto" would mean its
   backing-store size and feed back into the next draw. */
.is-stacked .plate-l .plate-canvas,
.is-stacked .plate-l .plate-ink { top: 0; bottom: auto; height: calc(100% + 36px); }
.is-stacked .plate-r .plate-canvas,
.is-stacked .plate-r .plate-ink { top: -36px; bottom: auto; height: calc(100% + 36px); }
/* Stacked bands have no free corner for the plate number, so it would sit on the drawing. */
.is-stacked .plate-no { display: none; }
.plate-r.is-compact .plate-head { max-width: none; }

.is-stacked .hero-copy {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(44px, 8vw, 80px) 20px clamp(48px, 8vw, 84px);
  transform: none;
}

.is-stacked .stage {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 980px;
  margin: clamp(48px, 8vw, 80px) auto 0;
  padding: 0 16px;
  transform: none;
}

/* Narrow screens give the figures more height for their caption. */
.is-stacked .stage-view { aspect-ratio: 4 / 3; }

.is-stacked .plate-cap { font-size: 12.5px; }
.is-stacked .plate-no { top: calc(var(--fy, 20px) + 8px); }
.is-stacked .plate-head { top: calc(var(--fy, 20px) + 14px); left: calc(var(--fx, 20px) + 14px); max-width: 40%; }

@media (max-width: 699px) {
  .stage-note { display: flex; }
  .hero-copy h1 { font-size: clamp(38px, 10.5vw, 48px); }
  .lede { font-size: 16px; }
  .cta-row { flex-direction: column; gap: 10px; }
  .cta-row .btn { width: 100%; }
  .plate-sub { font-size: 9px; }
  .plate-title { font-size: 17px; }
}

/* ---------- reduced motion: the same page, without the scroll choreography ---------- */
.rm:not(.is-stacked) .hero { height: auto; }
.rm:not(.is-stacked) .hero-pin { position: relative; top: 0; height: auto; overflow: visible; }
.rm:not(.is-stacked) .hero-pin::before {
  content: "";
  display: block;
  height: 100svh;
  min-height: 560px;
}
.rm:not(.is-stacked) .plate { bottom: auto; height: calc(100svh + 28px); min-height: 588px; opacity: 1; }
.rm:not(.is-stacked) .plate-l { transform: rotate(-0.45deg); }
.rm:not(.is-stacked) .plate-r { transform: rotate(0.4deg); }
.rm:not(.is-stacked) .hero-copy { transform: translateX(-50%); }
.rm:not(.is-stacked) .stage { position: relative; left: auto; top: auto; margin: 0 auto; transform: none; }

/* ---------- sections ---------- */
.sect {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 150px) clamp(16px, 4vw, 48px) 0;
}

.sect-head {
  max-width: 780px;
  margin: 0 auto clamp(40px, 6vh, 64px);
  text-align: center;
}

.kicker {
  margin: 0 0 14px;
  font: 400 17px/1.2 var(--serif);
  color: var(--accent);
}

.sect h2 {
  margin: 0;
  font: 400 clamp(32px, 3.5vw, 52px)/1.1 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ivory);
  text-wrap: balance;
}

/* How it works: three plain panels. The line drawings are recolored for the dark ground. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  padding: 26px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.card-no {
  font: 400 16px/1 var(--serif);
  color: var(--accent);
}

.card-fig { width: 100%; height: auto; margin: 16px 0 22px; }
.card-fig [stroke="#3b2a1c"] { stroke: #d6cec1; }
.card-fig[stroke="#3b2a1c"] { stroke: #d6cec1; }
.card-fig [fill="#f7f1e4"] { fill: #221f1b; }
.card-fig [stroke="#b8532f"] { stroke: #d97757; }
.card-fig [fill="#b8532f"] { fill: #d97757; }
.card-fig text[fill="#6b5643"] { fill: #a39b8e; }
.card-fig text[fill="#b8532f"] { fill: #d97757; }
.card-fig text[fill="#fff6ee"] { fill: #1a1210; }

.card h3 {
  margin: 0 0 8px;
  font: 500 23px/1.2 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.card p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.card:has(a):hover { border-color: var(--accent); }
.how .cards { grid-template-columns: minmax(0, 1fr); }
.how .card { display: grid; grid-template-columns: 28px minmax(140px, 220px) minmax(0, 1fr); gap: 32px; align-items: center; }
.how .card-fig { margin: 0; }
.how .card-copy { max-width: 640px; }
@media (max-width: 699px) {
  .how .card { grid-template-columns: 24px minmax(0, 1fr); gap: 18px; }
  .how .card-fig { max-width: 220px; justify-self: center; }
  .how .card-copy { grid-column: 1 / -1; }
}

/* Six modes: tabs over one player. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 24px;
}

.tabs button {
  display: grid;
  gap: 5px;
  min-height: 52px;
  padding: 10px 16px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  text-align: left;
  font: 600 14.5px/1.1 var(--sans);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tabs button span {
  font: 400 13px/1 var(--serif);
  color: var(--faint);
}

.tabs button:hover { color: var(--ivory); border-color: var(--line-2); }
.tabs button[aria-selected="true"] { color: var(--ivory); border-color: rgba(239, 233, 222, 0.45); background: rgba(239, 233, 222, 0.05); }
.tabs button[aria-selected="true"] span { color: var(--accent); }

.film { max-width: 1100px; margin: 0 auto; }

.film-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.film-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ivory);
}

.film-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 2px 0;
  font: 400 16px/1.5 var(--serif);
  color: var(--text);
}

.film-cap b { margin-right: 8px; font-weight: 400; color: var(--accent); }
.film-text { flex: 1 1 420px; max-width: 760px; }
.film-text strong { font-weight: 600; color: var(--ivory); }
.film-ctrl { display: inline-flex; flex: none; gap: 8px; }

/* Compare: three specific contrasts. */
.contrasts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.contrast {
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.contrast h3 {
  margin: 0 0 22px;
  font: 400 26px/1.15 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ivory);
}

.contrast p {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.contrast p span { font: 400 14px/1.2 var(--serif); }

.them {
  margin-bottom: 18px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.them span { color: var(--faint); }
.us { color: var(--ivory); }
.us span { color: var(--accent); }

/* FAQ */
.faq-list { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  position: relative;
  padding: 22px 44px 22px 0;
  list-style: none;
  font: 400 22px/1.3 var(--serif);
  color: var(--ivory);
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font: 400 24px/1 var(--sans);
  color: var(--muted);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { max-width: 62ch; margin: -4px 0 24px; color: var(--text); }

/* Final call to action */
.final {
  margin-top: clamp(96px, 14vh, 150px);
  padding: clamp(96px, 15vh, 170px) 20px;
  text-align: center;
  border-top: 1px solid var(--line);
}

.final h2 {
  margin: 0;
  font: 400 clamp(42px, 5.2vw, 78px)/1.04 var(--serif);
  letter-spacing: -0.024em;
  color: var(--ivory);
}

/* Footer */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px clamp(16px, 4vw, 48px) 36px;
  border-top: 1px solid var(--line);
}

.foot-brand p { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.foot h4 {
  margin: 0 0 14px;
  font: 400 15px/1 var(--serif);
  color: var(--muted);
}

.foot-cols a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
}

.foot-cols a:hover { color: var(--ivory); }

.foot-meta {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}

/* ---------- the live demo, loaded on request ---------- */
dialog.demo {
  width: min(96vw, 1440px, calc((94vh - 50px) * 1.6));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #1a1816;
  color: var(--text);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

dialog.demo::backdrop {
  background: rgba(10, 9, 8, 0.78);
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 7px 10px 7px 18px;
  border-bottom: 1px solid var(--line);
}

.demo-title { font: 600 14px/1.2 var(--sans); color: var(--ivory); white-space: nowrap; }
.demo-modes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.demo-modes[hidden] { display: none; }
.demo-modes .ctl { height: 32px; padding: 0 12px; flex: none; }
.demo-close { margin-left: auto; height: 32px; flex: none; }

.demo-view {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1e1e1e;
}

.demo-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  background: #1e1e1e;
  transform: translateX(var(--fx, 0px)) scale(var(--fk, 0.6));
  transform-origin: 0 0;
}

.demo-status {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: #1e1e1e;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  transition: opacity 0.4s ease;
}

.demo.is-ready .demo-status { opacity: 0; pointer-events: none; }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  .mast-nav { gap: 18px; }
}

@media (max-width: 900px) {
  .cards, .contrasts { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .mast { gap: 12px; }
  .mast-nav { display: none; }
  .mast-cta { margin-left: auto; }
  .tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -16px 20px;
    padding: 0 16px 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .tabs button { flex: none; }
  .film-ctrl { width: 100%; }
  .faq-list summary { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01s !important; scroll-behavior: auto !important; }
}

/* Demo: the live app on a sample lecture, opened on request. */
.demo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.demo-card .kicker { margin-bottom: 10px; }
.demo-card h2 { text-align: left; }
.demo-sect-copy { margin: 12px 0 0; max-width: 34em; color: var(--muted); }

@media (max-width: 760px) {
  .demo-card { flex-direction: column; align-items: flex-start; }
  .demo-card .btn { width: 100%; }
}

/* Keep the full desktop/iPad app capture visible, including its bottom controls. */
#film .screen-view { aspect-ratio: 16 / 10; }

/* Soft surfaces and a horizontal, demo-first gallery. */
html, body, .mode-track { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .mode-track::-webkit-scrollbar { display: none; }
.btn, .ctl, .skip, .clip-toggle { border-radius: 999px; }
.card, .contrast { border-radius: 22px; }
.mode-intro { margin: -22px auto 32px; text-align: center; color: var(--muted); }
.mode-track {
  --gallery-card: min(980px, calc(100vw - 240px));
  --gallery-inset: calc((100vw - var(--gallery-card)) / 2);
  position: relative;
  display: flex;
  gap: 120px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 4px var(--gallery-inset) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gallery-inset);
  overscroll-behavior-x: contain;
}
.mode-figure { flex: 0 0 var(--gallery-card); margin: 0; scroll-snap-align: start; min-width: 0; transition: opacity .45s ease, filter .45s ease; }
.mode-figure:not(.is-active) { opacity: .16; filter: saturate(.4); cursor: pointer; }
.mode-figure:not(.is-active):hover { opacity: .3; }
.mode-surface {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-2);
  border-radius: 28px;
  background: #1a1816;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}
.mode-poster { width: 100%; height: 100%; object-fit: contain; background: #1a1816; }
.mode-video { display: none; width: 100%; height: 100%; object-fit: contain; background: #1a1816; }
.mode-demo-portal[hidden] { display: none; }
.mode-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 23px 10px 0; }
.mode-copy { max-width: 650px; }
.mode-number { display: block; margin-bottom: 5px; color: var(--accent); font: 400 17px/1 var(--serif); }
.mode-caption h3 { margin: 0 0 8px; font: 400 32px/1.1 var(--serif); color: var(--ivory); }
.mode-caption p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.mode-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 28px 10px 0; }
.mode-dots { display: flex; align-items: center; gap: 10px; }
.mode-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #555049; cursor: pointer; position: relative; }
.mode-dot::before { content: ''; position: absolute; inset: -10px -4px; }
.mode-dot[aria-current="true"] { width: 34px; background: var(--ivory); }
.mode-arrows { display: flex; gap: 8px; }
.mode-arrows .ctl { width: 40px; height: 40px; font-size: 19px; }
.mode-arrows .ctl:disabled { opacity: .3; cursor: default; }
/* One live app serves every card. While it moves to a card's module, that card's still stays in
   view under a small note, and the live module fades in over it once it is ready. */
.mode-demo-portal { position: absolute; z-index: 2; overflow: hidden; border-radius: 28px; background: transparent; }
.mode-demo-portal .demo-frame { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.mode-demo-portal.is-ready .demo-frame { opacity: 1; pointer-events: auto; }
.mode-loading { cursor: default; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 7px 14px; border-radius: 999px; background: rgba(20, 18, 16, .8); color: var(--muted); font-size: 13px; line-height: 1.4; text-align: center; }
.mode-demo-portal.is-ready .mode-loading { display: none; }
.mode-demo-portal[aria-busy="false"]:not(.is-ready) .mode-loading { cursor: pointer; }
@media (max-width: 1100px) {
  .mode-caption { flex-direction: column; gap: 14px; }
  .mode-track { --gallery-card: calc(100vw - 112px); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .mode-track { scroll-behavior: auto; } }
@media (max-width: 699px) {
  .mode-poster { display: none; }
  .mode-video { display: block; }
  .mode-demo-portal { display: none; }
}