/* Lemma's pitch, in the console's own language: a black room, solid surfaces with no
   outlines and no glow, systemCyan for what Lemma does, green and red for money, orange for a
   refusal. The console's typeface, figures in it too. Each chapter is a screen and a little
   more, so its stage rests a moment; the scroll starts it, and it plays in its own time. */

:root {
  --ground: #000;
  --surface: #1c1c1e;
  --raised: #2c2c2e;
  --fill-1: rgb(118 118 128 / 0.18);
  --fill-2: rgb(118 118 128 / 0.24);
  --accent-soft: rgb(100 210 255 / 0.16);
  --ink: #f2f4f5;
  --ink-2: rgb(242 244 245 / 0.62);
  --ink-3: rgb(242 244 245 / 0.38);
  --line: rgb(242 244 245 / 0.1);
  --panel: var(--surface);
  --accent: #64d2ff;
  --violet: #8e7dff;
  --up: #30d158;
  --down: #ff453a;
  --warn: #ff9f0a;
  --paper: #f3f5f7;
  --ink-dark: #0e1114;
  --ink-dark-2: rgb(14 17 20 / 0.6);
  --m: clamp(20px, 4.4vw, 80px);
  --title: clamp(44px, min(5.6vw, 9svh), 112px);
  /* Figures in the same face, at one width each. */
  --mono: 'Schibsted Grotesk', system-ui, sans-serif;
  /* The deck's one motion: a spring that settles with a slight overshoot (damping 0.72). The
     script moves the scroll, the trains and the dots on the same spring. */
  --ease: cubic-bezier(0.34, 1.32, 0.5, 1);
  --dur: 600ms;
  --dur-long: 1000ms;
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease: linear(0, 0.021, 0.074, 0.15, 0.239, 0.335, 0.431, 0.524, 0.611, 0.691, 0.761, 0.822, 0.874, 0.917, 0.952, 0.98, 1.001, 1.016, 1.027, 1.033, 1.037, 1.038, 1.038, 1.036, 1.033, 1.03, 1.026, 1.022, 1.019, 1.015, 1.012, 1.01, 1.007, 1.005, 1.003, 1.002, 1.001, 1, 0.999, 0.999, 1); }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
h1, h2, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }

.title {
  font-size: var(--title);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.note { max-width: 27em; margin-top: 24px; color: var(--ink-2); }

/* A chapter: its stage stays put for the last part of a screen's scroll, then moves on. */
.chapter { position: relative; height: 115svh; }
.stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.head { position: absolute; left: var(--m); top: calc(var(--m) + 44px); width: min(34vw, 560px); z-index: 2; }

/* Something the scroll shows: data-show sets the moment, the script --on. */
[data-show] { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-show].is-on { opacity: 1; transform: none; }

/* ── The journey ───────────────────────────────────────────────────── */

.journey {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 10;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  transform: translate(-50%, var(--jy, -80px));
  opacity: var(--jo, 0);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.journey a {
  position: relative;
  z-index: 1;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.journey a.is-done { color: var(--ink-2); }
.journey a[aria-current='step'] { color: #000; }
.journey-bar {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--bx, 5px);
  width: var(--bw, 0px);
  border-radius: 999px;
  background: var(--accent);
  transition: left var(--dur) var(--ease), width var(--dur) var(--ease);
}
.journey.on-light { background: rgb(255 255 255 / 0.92); }
.journey.on-light a { color: rgb(14 17 20 / 0.4); }
.journey.on-light a.is-done { color: rgb(14 17 20 / 0.65); }
.journey.on-light a[aria-current='step'] { color: #000; }

/* ── 0 · Hero ──────────────────────────────────────────────────────── */

.hero { height: 150svh; }
.curves { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-words {
  position: absolute;
  left: var(--m);
  bottom: var(--m);
  right: var(--m);
  opacity: var(--o, 1);
  transform: translate3d(0, var(--ty, 0px), 0);
}
.brand { font-family: var(--mono); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; }
.hero .title { font-size: clamp(56px, min(8.4vw, 13svh), 168px); }
.lead { max-width: 30em; margin-top: 32px; font-size: clamp(17px, 1.35vw, 22px); color: var(--ink-2); }
.cue { position: absolute; right: 0; bottom: 6px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(6px); opacity: 1; } }

/* ── 1 · Idea: four parts, a request on each arrow, the answer under them ─── */

.idea-head { width: auto; right: var(--m); }
/* Where the parts stand and how tall they are, shared with the answer under them. */
.idea .stage {
  --top: calc(var(--m) + 44px + 33px + 2 * 0.95 * var(--title) + 4svh);
  --ph: min(380px, calc(100lvh - var(--top) - var(--m) - 110px));
}
.pipe {
  position: absolute;
  left: var(--m);
  right: var(--m);
  top: var(--top);
  height: var(--ph);
  display: grid;
  grid-template-columns: 1fr 4.4vw 1fr 4.4vw 1fr 4.4vw 1fr;
}
.node {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 1.8vw, 26px) clamp(16px, 1.7vw, 24px);
  border-radius: 26px;
  background: var(--panel);
  opacity: 0.32;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.node.is-on { opacity: 1; }
.node h3 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.node .say { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.35; color: var(--ink-2); }
.node .say-foot { margin-top: auto; }
.node-mcp.is-on { background: var(--accent-soft); }
.dot { flex: none; width: 15px; height: 15px; border-radius: 50%; }
.dot-you { background: var(--ink); }
.dot-claude { background: #d97757; }
.dot-mcp { background: var(--accent); }
.dot-lemma { background: var(--up); }
.bubble { padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--accent); color: #001018; font-weight: 500; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.3; min-height: 2.6em; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: currentColor; animation: blink 1s steps(1) infinite; }
.bubble.is-done .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.tools, .scopes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.tools li { padding: 8px 13px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: clamp(13px, 1.2vw, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools-done { margin-top: 0; }
.tools-done li { background: var(--raised); color: var(--ink); }
.scopes li { display: flex; justify-content: space-between; align-items: center; padding: 8px 13px; border-radius: 12px; background: rgb(48 209 88 / 0.1); font-size: clamp(14px, 1.25vw, 18px); }
.scopes b { color: var(--up); font-weight: 700; }
.scopes .off { background: var(--fill-1); color: var(--ink-3); }
.scopes .off b { color: var(--ink-3); }
.same { margin-top: auto; color: var(--up); font-weight: 600; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.3; }
/* An arrow, and the request that runs along it once the next part lights. */
.pipe-arrow { position: relative; }
.pipe-arrow::before { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, #d97757, var(--accent)); opacity: 0.35; transition: opacity var(--dur) var(--ease); }
.pipe-arrow::after { content: ''; position: absolute; right: 4px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid var(--accent); border-right: 0; opacity: 0.35; transition: opacity var(--dur) var(--ease); }
.pipe-arrow.is-on::before, .pipe-arrow.is-on::after { opacity: 1; }
.pipe-arrow em { position: absolute; left: 8px; top: 50%; width: 22px; height: 11px; margin-top: -5.5px; border-radius: 99px; background: #d97757; opacity: 0; }
.pipe-arrow.is-on em { animation: packet 1.8s var(--ease) infinite; }
@keyframes packet { 0% { left: 8px; opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { left: calc(100% - 30px); opacity: 0; } }
/* What comes back to the person, said under the parts once Lemma has done it. */
.answer {
  position: absolute;
  left: var(--m);
  right: var(--m);
  top: calc(var(--top) + var(--ph) + 28px);
  text-align: center;
}
.answer span { font-size: clamp(16px, 1.65vw, 24px); font-weight: 500; color: var(--accent); opacity: var(--ao, 0); transition: opacity var(--dur) var(--ease); }

/* ── 2 · Search ────────────────────────────────────────────────────── */

.counter { margin-top: 36px; }
.counter b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(48px, min(5.4vw, 9svh), 104px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.counter span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.heat {
  position: absolute;
  right: var(--m);
  top: 50%;
  width: min(50vw, 66svh * 1.4);
  aspect-ratio: 1.4;
  transform: translateY(-46%);
}
.heat canvas { width: 100%; height: 100%; display: block; border-radius: 14px; cursor: crosshair; }
.heat figcaption { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.axis-x { position: absolute; left: 0; bottom: -26px; }
.axis-y { position: absolute; left: -26px; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.legend { position: absolute; right: 0; bottom: -26px; display: flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; margin-left: 8px; }
.legend .lose { background: linear-gradient(90deg, #ff453a, #3a2a2c); }
.legend .win { background: linear-gradient(90deg, #1d3a28, #30d158); }
.best {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  transform: translate(-50%, calc(-100% - 22px)) scale(var(--bs, 0.9));
  opacity: var(--bo, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: #000;
  white-space: nowrap;
  font-size: 14px;
  pointer-events: none;
}
.best b { display: block; font-size: 12px; color: rgb(0 0 0 / 0.55); font-weight: 500; }
.best span { font-family: var(--mono); font-weight: 500; }
.best em { font-style: normal; }
.tip {
  position: absolute;
  pointer-events: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--raised);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
}

/* ── 2½ · Funnel ───────────────────────────────────────────────────── */

.dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.stages {
  position: absolute;
  left: var(--m);
  right: var(--m);
  bottom: var(--m);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  z-index: 2;
}
.stages li {
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--panel);
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stages li.is-on { opacity: 1; }
.stages li.is-now { background: var(--accent-soft); }
.stages b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(22px, 2.2vw, 38px); letter-spacing: -0.03em; }
.stages li:last-child b { color: var(--up); }
.stages span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }

/* ── 3 · Verdict: the run drawn from its own figures ────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 15px;
  border-radius: 99px;
  background: rgb(48 209 88 / 0.16);
  color: var(--up);
  font-weight: 600;
  font-size: 16px;
  opacity: var(--bo, 0);
  transform: scale(var(--bs, 0.9));
  transform-origin: 0 50%;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.verdict-side { position: absolute; right: var(--m); top: calc(var(--m) + 52px); width: min(30vw, 440px); color: var(--ink-2); font-size: 16px; }
.verdict-head { width: min(52vw, 860px); }
/* An svg keeps the height it is given, so the run's box is measured, top to the figures. */
.run {
  --top: calc(var(--m) + 44px + min(31svh, 300px));
  position: absolute;
  left: var(--m);
  top: var(--top);
  width: calc(100% - 2 * var(--m));
  height: calc(100lvh - var(--top) - var(--m) - 128px);
  overflow: visible;
}
.run text { font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
.run .pos { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--k, 0)); transition: transform var(--dur) var(--ease); }
.run .pos.loss { transform-origin: 50% 0; }
.run .fall { opacity: var(--fo, 0); transition: opacity var(--dur) var(--ease); }
.kpis { position: absolute; left: var(--m); right: var(--m); bottom: var(--m); display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.kpis div { padding: 14px 18px; border-radius: 18px; background: var(--panel); }
.kpis dt { font-size: 14px; color: var(--ink-2); }
.kpis dd { margin-top: 4px; font-weight: 600; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.03em; }
.kpis .up { color: var(--up); }

/* ── 4 · Live ──────────────────────────────────────────────────────── */

.ladder {
  position: absolute;
  left: var(--m);
  bottom: var(--m);
  width: min(54vw, 940px);
  height: auto;
  overflow: visible;
}
.ladder .grid line { stroke: var(--line); }
.ladder .rung line { stroke-dasharray: 4 6; stroke-width: 1.5; }
.ladder .rung text, .ladder .tag text { font-family: var(--mono); font-size: 13px; }
.ladder .price { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.ladder .area { fill: rgb(100 210 255 / 0.08); }
.ladder .mark { transform-box: fill-box; transform-origin: center; transform: scale(var(--k, 0)); transition: transform var(--dur) var(--ease); }
.ladder .avg line { stroke: var(--violet); stroke-width: 1.5; }
.ladder .dot { fill: var(--ink); }
.trace {
  position: absolute;
  right: var(--m);
  top: 50%;
  transform: translateY(-50%);
  width: min(30vw, 440px);
  display: flex;
  flex-direction: column;
}
.trace li {
  position: relative;
  display: grid;
  grid-template-columns: 3.4em 1fr;
  column-gap: 14px;
  padding: 10px 0 10px 22px;
  opacity: 0.22;
  transition: opacity var(--dur) var(--ease);
}
.trace li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); transition: background var(--dur) var(--ease); }
.trace li::after { content: ''; position: absolute; left: 8px; top: 28px; bottom: -8px; width: 1px; background: var(--line); }
.trace li:last-child::after { display: none; }
.trace li.is-on { opacity: 1; }
.trace li.is-now::before { background: var(--accent); }
.trace time { grid-row: span 2; font-family: var(--mono); font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.trace b { font-weight: 600; }
.trace b.up { color: var(--up); }
.trace b.warn { color: var(--warn); }
.trace span { color: var(--ink-2); font-size: 15px; }

/* ── 5 · Control ───────────────────────────────────────────────────── */

.desk {
  position: absolute;
  right: var(--m);
  top: 50%;
  transform: translateY(-48%);
  width: min(46vw, 640px);
  padding: 22px;
  border-radius: 28px;
  background: var(--surface);
}
.desk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.acct { font-weight: 600; }
.stop {
  position: relative;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 99px;
  background: var(--down);
  color: #fff;
  font: 600 16px 'Schibsted Grotesk', system-ui, sans-serif;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stop:hover { transform: scale(1.04); }
.stop:active { transform: scale(0.97); }
.stop:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.is-halted .stop { background: var(--raised); }
.banner {
  max-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgb(255 159 10 / 0.14);
  color: var(--warn);
  font-weight: 600;
  padding: 0 14px;
  transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease), margin var(--dur) var(--ease);
}
.is-halted .banner { max-height: 60px; padding: 12px 14px; margin-bottom: 12px; }
.bots li, .orders li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
}
.bots b { font-weight: 500; color: var(--up); transition: color var(--dur) var(--ease); }
.bots b::before { content: '● '; }
.is-halted .bots b { color: var(--warn); }
.orders { margin-top: 10px; }
.orders li { font-size: 15px; color: var(--ink-2); transition: opacity var(--dur) var(--ease); }
.orders b { font-family: var(--mono); font-weight: 400; }
.orders span { text-decoration: line-through; text-decoration-color: transparent; transition: text-decoration-color var(--dur) var(--ease); }
.is-halted .orders li { opacity: 0.4; }
.is-halted .orders span { text-decoration-color: currentColor; }
.gauges { display: flex; gap: 28px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.gauges figure { display: flex; align-items: center; gap: 12px; }
.gauges svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.gauges circle { fill: none; stroke: rgb(255 255 255 / 0.1); stroke-width: 7; }
.gauges .arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: calc(201 * (1 - var(--a, 0))); transition: stroke-dashoffset var(--dur-long) var(--ease); }
.gauges .arc.warn { stroke: var(--warn); }
.gauges figcaption { font-size: 13px; color: var(--ink-2); }
.gauges figcaption b { display: block; font-family: var(--mono); font-weight: 500; font-size: 20px; color: var(--ink); }
.toast {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translate(-50%, 10px);
  opacity: 0;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--ink);
  color: #000;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.is-halted .toast { opacity: 1; transform: translate(-50%, 0); }

/* ── 7 · Anywhere ──────────────────────────────────────────────────── */

.devices { position: absolute; right: var(--m); top: 50%; width: min(58vw, 1000px, var(--room, 58vw)); aspect-ratio: 1.45; transform: translateY(-50%); }
.devices img { position: absolute; display: block; height: auto; padding: 6px; background: var(--surface); }
.dev-desk { left: 0; top: 4%; width: 82%; border-radius: 18px; transform: translate3d(0, var(--y0, 0px), 0); }
.dev-phone { width: 24%; border-radius: 26px; }
.dev-p1 { right: 12%; top: 22%; transform: translate3d(0, var(--y1, 0px), 0); }
.dev-p2 { right: 0; top: 8%; transform: translate3d(0, var(--y2, 0px), 0); }

/* ── 8 · The product: its strongest screens, one over another ──────── */

.screens-side { position: absolute; left: var(--m); top: calc(var(--m) + 44px); width: min(30vw, 440px); }
.screens-captions { margin-top: 6svh; display: flex; flex-direction: column; gap: 2svh; }
.screens-captions li { color: var(--ink-3); transition: color var(--dur) var(--ease); }
.screens-captions b { display: block; font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.screens-captions span { display: block; margin-top: 3px; font-size: clamp(14px, 1.1vw, 16px); }
.screens-captions li.is-done { color: var(--ink-2); }
.screens-captions li.is-on { color: var(--ink); }
.screens-captions li.is-on span { color: var(--ink-2); }
.screens-stack { position: absolute; right: var(--m); top: 52%; width: min(1080px, calc(100vw - 2 * var(--m) - min(30vw, 440px) - 3vw)); aspect-ratio: 1.6; transform: translateY(-50%); }
.screens-stack img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; padding: 6px; border-radius: 20px; background: var(--surface); transform-origin: 50% 0; will-change: transform; }

/* ── 9 · The beta: the handle first, three taps after ─────────────── */

.beta { min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--m) + 44px) var(--m) var(--m); background: var(--ground); }
.beta-words { width: 100%; }
.beta-brand { font-family: var(--mono); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; }
.beta-lead { max-width: 25em; margin-top: 28px; font-size: clamp(17px, 1.35vw, 22px); color: var(--ink-2); }
.beta [hidden] { display: none; }
.beta fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.beta legend { margin: 0 0 10px; padding: 0; font-size: 15px; color: var(--ink-2); }
.beta button { font: inherit; cursor: pointer; }
.beta button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.beta-row { display: flex; align-items: center; gap: 6px; width: min(100%, 560px); margin-top: 40px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--surface); transition: background var(--dur) var(--ease); }
.beta-row:focus-within { background: var(--raised); }
.beta-row input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 19px; outline: none; }
.beta-row input::placeholder { color: var(--ink-3); }
.beta-row .beta-apply { height: 52px; border-radius: 999px; }
.beta-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.beta-apply { height: 58px; padding: 0 28px; border: 0; border-radius: 16px; background: var(--accent); color: #000; font-size: 18px; font-weight: 600; }
.beta-apply:disabled { opacity: 0.5; cursor: default; }
.beta-quiet { height: 58px; padding: 0 24px; border: 0; border-radius: 16px; background: var(--fill-1); color: var(--ink-2); font-size: 18px; font-weight: 500; }
.beta-error { margin-top: 14px; padding-left: 22px; font-size: 16px; color: var(--warn); }
.beta-thanks { margin-top: 40px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.01em; }
.beta-sub { display: block; margin-top: 4px; font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.beta-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin-top: 28px; }
.beta .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.beta .chips button { border: 0; padding: 11px 17px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 16px; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.beta .chips button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); }
.beta-actions { display: flex; gap: 10px; margin-top: 32px; }

/* The way to the beta from anywhere in the deck; it steps aside once the form is on screen. */
.beta-corner { position: fixed; top: 18px; right: var(--m); z-index: 11; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #000; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.beta-corner.is-gone { opacity: 0; transform: translate3d(0, -80px, 0); pointer-events: none; }

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

/* Chapters whose titles read best on two lines. */
@media (min-width: 861px) {
  .live .head, .control .head, .parity .head, .anywhere .head { width: min(52vw, 860px); }
  .live .ladder { width: min(52vw, 900px); }
}

/* ── 2 · Speed: one figure, as large as the screen allows ─────────── */

.speed-board {
  position: absolute;
  inset: calc(var(--m) + 44px) var(--m) var(--m);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.speed-title { font-size: clamp(28px, 3vw, 52px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink-2); }
.speed-figure {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  font-weight: 700;
  font-size: clamp(160px, min(30vw, 46svh), 520px);
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--accent);
  transform: scale(var(--fs, 0.92));
  transform-origin: 0 100%;
  opacity: var(--fo, 0);
  margin: 0.08em 0 0.12em -0.04em;
}
.speed-figure span { font-size: 0.34em; letter-spacing: -0.03em; }
.race { display: grid; gap: 12px; width: min(100%, 1100px); }
.lane { display: grid; grid-template-columns: 13em 1fr 6em; align-items: center; gap: 18px; font-size: clamp(15px, 1.2vw, 19px); color: var(--ink-2); }
.lane i { position: relative; height: 12px; border-radius: 99px; background: var(--fill-1); overflow: hidden; }
.lane em { position: absolute; inset: 0 auto 0 0; width: calc(var(--w, 0) * 100%); border-radius: inherit; background: rgb(242 244 245 / 0.45); }
.lane-kernel { color: var(--ink); }
.lane-kernel em { background: var(--accent); }
.lane b { font-weight: 600; color: var(--ink); text-align: right; }
.speed-note { margin-top: 26px; font-size: clamp(16px, 1.3vw, 21px); color: var(--ink-2); }
.speed-note .times { color: var(--up); font-weight: 600; opacity: var(--to, 0); transition: opacity var(--dur) var(--ease); }

/* Figures that count keep one width per digit, so they do not jitter. */
.counter b, .lane b { font-variant-numeric: tabular-nums; }

/* The race against the testers people use: the label over its bar. */
.race-head { margin: 4px 0 12px; font-weight: 600; font-size: clamp(16px, 1.3vw, 21px); }
.lane { grid-template-columns: 1fr 7em; row-gap: 6px; }
.lane span { grid-column: 1 / -1; }
.lane em.has { min-width: 12px; }
.lane b { font-size: clamp(20px, 1.8vw, 30px); }

/* ── 1½ · The editor: the idea, clause by clause, drawn as a graph ─── */

.graph-side { position: absolute; left: var(--m); top: calc(var(--m) + 44px); bottom: var(--m); width: min(32vw, 480px); display: flex; flex-direction: column; }
.say-when { margin-top: 5svh; font-size: clamp(15px, 1.25vw, 18px); color: var(--ink-3); }
.clauses { margin-top: 14px; display: flex; flex-direction: column; gap: 1.6svh; }
.clauses li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: baseline; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink-3); transition: color var(--dur) var(--ease); }
.clauses li::before { content: attr(data-n); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; background: var(--fill-2); color: var(--ink-2); transform: translateY(5px); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.clauses li.is-done { color: var(--ink-2); }
.clauses li.is-on { color: var(--ink); }
.clauses li.is-on::before { background: var(--accent); color: #000; }
.graph-stats { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; opacity: 0.35; transition: opacity var(--dur) var(--ease); }
.graph-stats.is-on { opacity: 1; }
.graph-stats dt { font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.graph-stats dd { margin: 6px 0 0; font-size: 14px; line-height: 1.25; color: var(--ink-2); }

/* The window that stands for the editor: its bar, and the canvas the graph is drawn on. */
.editor { position: absolute; left: calc(var(--m) + min(32vw, 480px) + 2.6vw); right: var(--m); top: calc(var(--m) + 44px); bottom: var(--m); overflow: hidden; border-radius: 26px; background: var(--surface); }
.editor-bar { position: absolute; left: 0; right: 0; top: 0; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; font-size: 15px; }
.editor-back { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); color: var(--ink-2); }
.editor-name { font-size: 17px; font-weight: 600; white-space: nowrap; }
.editor-seg { margin: 0 auto; display: flex; padding: 3px; border-radius: 11px; background: var(--fill-2); }
.editor-seg i { font-style: normal; padding: 5px 16px; border-radius: 8px; color: var(--ink-2); }
.editor-seg i.on { background: #636366; color: var(--ink); font-weight: 500; }
.editor-check { padding: 6px 12px; border-radius: 10px; background: var(--fill-1); color: var(--ink-3); font-weight: 600; white-space: nowrap; transition: color var(--dur) var(--ease); }
.editor-check.is-ok { color: var(--up); }
.editor-publish { padding: 6px 14px; border-radius: 10px; background: var(--accent); color: #000; font-weight: 600; }
.editor-canvas { position: absolute; left: 10px; right: 10px; top: 60px; bottom: 10px; overflow: hidden; border-radius: 18px; background-color: var(--ground); background-image: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.5px); background-size: 24px 24px; }
.editor-legend { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; }
.editor-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.editor-legend i, .editor-zoom i { font-style: normal; font-size: 13px; padding: 5px 10px; border-radius: 9px; background: var(--surface); color: var(--ink-2); }
.editor-zoom i { min-width: 32px; text-align: center; border-radius: 99px; }
.editor-hint { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); padding: 10px 14px; border-radius: 12px; background: var(--surface); color: var(--ink-2); font-size: 15px; transition: opacity var(--dur) var(--ease); }
.editor-hint.is-gone { opacity: 0; }
.editor-graph { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.editor-graph svg { position: absolute; inset: 0; overflow: visible; }
.editor-graph path { fill: none; stroke: rgb(235 235 245 / 0.24); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-long) var(--ease), stroke var(--dur) var(--ease); }
.editor-graph path.is-in { stroke-dashoffset: 0; }
.editor-graph path.is-lit { stroke: var(--accent); stroke-width: 3; }
.gnode { position: absolute; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: var(--surface); white-space: nowrap; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.gnode small { margin-left: 5px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.gnode.is-in { opacity: 1; transform: none; }
.gnode.out { background: var(--up); color: #000; }
.gnode.is-lit { background: var(--accent); color: #000; }
.gnode.out small, .gnode.is-lit small { color: rgb(0 0 0 / 0.6); }
.gnode.is-picked { animation: press var(--dur) var(--ease); }
@keyframes press { 40% { transform: scale(0.94); } 100% { transform: none; } }
.editor-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; pointer-events: none; transition: transform var(--dur-long) var(--ease); }

/* ── 6 · One track: two lines through the same five stations ───────── */

.metro {
  --top: calc(var(--m) + 44px + 2 * 0.95 * var(--title) + 3svh);
  position: absolute;
  left: var(--m);
  top: var(--top);
  width: calc(100% - 2 * var(--m));
  height: calc(100lvh - var(--top) - var(--m));
  overflow: visible;
}
.metro text { font-family: 'Schibsted Grotesk', system-ui, sans-serif; fill: var(--ink-3); transition: fill var(--dur) var(--ease); }
.metro .name { font-weight: 600; letter-spacing: -0.02em; }
.metro .is-on .name { fill: var(--ink); }
.metro .is-on .sub { fill: var(--ink-2); }

/* ── 2½ · The funnel's last moment: one large figure, the three lined up under its words ── */

.funnel-end { position: absolute; z-index: 2; left: 46%; top: 20svh; display: flex; align-items: flex-end; gap: 2.4vw; pointer-events: none; }
.end-three { font-size: min(52svh, 34vw); line-height: 0.78; font-weight: 700; letter-spacing: -0.07em; color: var(--up); opacity: 0; transform: scale(0.88); transform-origin: 30% 80%; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.end-words { margin-bottom: 4svh; }
.end-words p { font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: 120ms; }
.funnel-end.is-on .end-three, .funnel-end.is-on .end-words p { opacity: 1; transform: none; }
/* Where the three dots come to rest: the canvas draws them, these only hold the places. */
.end-dots { display: flex; gap: 18px; margin-top: 22px; }
.end-dots i { width: 14px; height: 14px; visibility: hidden; }

/* ── Phones: one column; under each title, its picture as large as the room allows ── */

@media (max-width: 860px) {
  :root { --title: clamp(36px, 10.5vw, 56px); }
  body { font-size: 16px; }
  .journey { top: 10px; gap: 0; padding: 4px; }
  .journey a { padding: 6px 9px; font-size: 12px; }
  .head { top: calc(var(--m) + 44px); width: auto; right: var(--m); }
  .note { margin-top: 14px; font-size: 15px; }
  .idea .note, .head-search .note, .control .note, .anywhere .note { display: none; }

  .hero .title { font-size: 15vw; }

  /* Idea: the four parts two by two, the answer under them. */
  .idea .stage { --top: calc(var(--m) + 44px + 30px + 3 * 0.95 * var(--title) + 18px); }
  .pipe { height: auto; bottom: calc(var(--m) + 66px); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
  .pipe-arrow { display: none; }
  .node { padding: 14px; gap: 8px; border-radius: 20px; min-height: 0; overflow: hidden; }
  .node h3 { font-size: 19px; gap: 9px; }
  .dot { width: 11px; height: 11px; }
  .node .say { display: none; }
  .bubble { font-size: 14px; padding: 10px 12px; }
  .tools, .scopes { gap: 5px; }
  .tools li, .scopes li { font-size: 12px; padding: 6px 9px; }
  .tools li { white-space: normal; }
  .same { font-size: 13px; }
  .answer { top: auto; bottom: var(--m); text-align: left; text-wrap: balance; }
  .answer span { font-size: 15px; }

  /* Editor: the sentence grows clause by clause above the window. */
  .graph-side { right: var(--m); width: auto; bottom: auto; }
  .say-when { margin-top: 14px; font-size: 14px; }
  .clauses { margin-top: 8px; gap: 6px; }
  .clauses li { display: none; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; }
  .clauses li::before { width: 22px; height: 22px; font-size: 12px; transform: translateY(4px); }
  .clauses li.is-on, .clauses li.is-done, .clauses.is-measure li { display: grid; }
  .graph-stats { display: none; }
  .editor { left: var(--m); right: var(--m); top: var(--editor-top, 46%); bottom: var(--m); border-radius: 20px; }
  .editor-seg, .editor-publish, .editor-legend, .editor-back { display: none; }
  .editor-bar { height: 52px; justify-content: space-between; gap: 8px; padding: 0 10px 0 14px; }
  .editor-name { font-size: 15px; }
  .editor-check { padding: 5px 10px; font-size: 13px; }
  .editor-canvas { left: 6px; right: 6px; top: 52px; bottom: 6px; border-radius: 15px; }
  .editor-graph { transition: transform var(--dur-long) var(--ease); }

  /* Speed. */
  .speed-figure { font-size: 44vw; }
  .lane { grid-template-columns: 1fr 5em; gap: 6px 12px; }
  .lane span { font-size: 14px; }

  /* Search: the map of settings in the room under the counter. */
  .counter { margin-top: 16px; }
  .counter b { font-size: 13vw; }
  .heat { left: calc(var(--m) + 18px); right: var(--m); width: auto; top: var(--under, 40%); transform: none; }
  .axis-y { left: -22px; }
  .best { left: 50% !important; width: auto; text-align: center; }
  .best i { display: none; }
  .best em { display: block; }

  /* Funnel: the five stages as a list; the cloud and the last figure in the room above it. */
  .stages { grid-template-columns: 1fr; gap: 4px; }
  .stages li { display: grid; grid-template-columns: 5.2em 1fr; align-items: baseline; gap: 10px; padding: 7px 12px; border-radius: 12px; }
  .stages b { font-size: 19px; }
  .stages span { margin-top: 0; font-size: 14px; }
  .funnel-end { left: var(--m); right: var(--m); top: var(--under, 30%); flex-direction: column; align-items: flex-start; }
  .end-three { font-size: min(40vw, 18svh); }
  .end-words p { font-size: 18px; }

  /* Verdict: a taller run, its figures three by two. */
  .verdict-side { display: none; }
  .verdict-head { width: auto; }
  .run { --top: calc(var(--m) + 44px + 190px); height: calc(100lvh - var(--top) - var(--m) - 152px); }
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .kpis div { display: flex; flex-direction: column; padding: 9px 11px; border-radius: 14px; }
  .kpis dt { font-size: 12px; line-height: 1.3; }
  .kpis dd { margin-top: auto; padding-top: 3px; font-size: 18px; }

  /* Live: the chart in the room the trace leaves above it. */
  .ladder { left: var(--m); right: auto; width: calc(100% - 2 * var(--m)); top: var(--ladder-top, 30%); bottom: auto; height: var(--ladder-h, auto); }
  .trace { left: var(--m); right: var(--m); width: auto; top: auto; bottom: var(--m); transform: none; }
  .trace li { padding: 5px 0 5px 22px; }
  .trace li:not(.is-near) { display: none; }

  /* Control. */
  .desk { left: var(--m); right: var(--m); width: auto; top: auto; bottom: calc(var(--m) + 58px); transform: none; padding: 16px; }
  .bots b { white-space: nowrap; }
  .gauges { display: none; }
  .toast { bottom: -50px; }

  .metro { --top: calc(var(--m) + 44px + 3 * 0.95 * var(--title) + 12px); }

  /* Anywhere: the desk on top, the two phones over its lower edge. */
  .devices { left: var(--m); right: var(--m); width: auto; aspect-ratio: 0.76; top: var(--under, 30%); transform: none; }
  .dev-desk { top: 0; width: 100%; padding: 4px; border-radius: 14px; }
  .dev-phone { width: 42%; padding: 5px; border-radius: 22px; }
  .dev-p1 { right: auto; left: 8%; top: 30%; }
  .dev-p2 { right: 2%; top: 22%; }

  /* Short phones: a smaller last figure, and the desk keeps two working orders, so both stay
     clear of the title. */
  @media (max-height: 720px) {
    .end-three { font-size: 15svh; }
    .orders li:nth-child(3) { display: none; }
    .bots li, .orders li { padding: 9px 4px; }
  }

  /* Screens: the console's phone screens, one over another, under the caption. */
  .screens-side { right: var(--m); width: auto; }
  .screens-captions { margin-top: 14px; min-height: 72px; }
  .screens-captions li { display: none; }
  .screens-captions li.is-on { display: block; }
  .screens-stack { left: 50%; right: auto; top: var(--stack-top, 40%); width: var(--stack-w, 60%); height: var(--stack-h, auto); aspect-ratio: auto; transform: translateX(-50%); }
  .screens-stack img { padding: 5px; border-radius: 30px; }

  /* The beta: one column; the corner button gives the top to the journey while it shows. */
  .beta { padding: 72px 20px 40px; }
  .beta-row { margin-top: 32px; }
  .beta-row input { font-size: 17px; }
  .beta-questions { grid-template-columns: 1fr; gap: 24px; }
  .beta .chips button { padding: 9px 14px; font-size: 15px; }
  .beta-actions .beta-apply { flex: 1; }
  .beta-corner { top: 10px; right: 14px; padding: 8px 14px; font-size: 13px; }
  .journey-on .beta-corner { opacity: 0; transform: translate3d(0, -80px, 0); pointer-events: none; }
}