/* ROVETA — landing.
   Four screens and one arc: the film shows the whole schedule; the story
   takes one slot from it and makes the post in front of you; control says
   whose decision it is; the last screen returns to the film's final frame.
   Type does the talking, the product does the showing, and the brand's lime
   appears only where something is decided or confirmed. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 var(--fs-body)/1.47 var(--sans); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--canvas); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ── Navigation: thin and translucent. The blur keeps it readable over the
   film and over the story as they move underneath it. */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 640; letter-spacing: .12em; text-decoration: none; }
/* The ROVETA mark, as roveta.org draws it: an ink tile with three lime bars,
   tilted the way the app's header tilts it. */
.mark { gap: 10px; }
.mark__icon { width: 24px; height: 24px; border-radius: 5px; transform: rotate(-6deg); flex: none; transition: box-shadow 500ms var(--ease); }
/* Over the dark beat the bar goes dark with it: a translucent cream bar over
   near-black is a muddy grey that belongs to neither. */
.nav { transition: background-color 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease); }
.nav[data-tone="dark"] { background: color-mix(in srgb, var(--night) 72%, transparent); color: var(--on-night); border-bottom-color: var(--night-line); }
.nav[data-tone="dark"] .lang button { color: var(--muted-dark); }
.nav[data-tone="dark"] .lang button[aria-pressed="true"] { color: var(--on-night); background: var(--night-2); }
.nav[data-tone="dark"] .pill { background: var(--on-night); color: var(--night); }
.nav[data-tone="dark"] .mark__icon { box-shadow: 0 0 0 1px var(--night-line); }
.nav__end { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; gap: 2px; }
.lang button { min-width: 34px; min-height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 12px/1 var(--sans); letter-spacing: .04em; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--ink); background: var(--fill); }

/* ── Controls ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 24px; border: 0; border-radius: 980px;
  background: var(--ink); color: var(--canvas);
  font: 500 17px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: background var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.pill:hover { background: var(--ink-hover); }
.pill:active { transform: scale(.98); }
.pill--small { min-height: 30px; padding: 0 14px; font-size: 13px; }
.pill--accent { background: var(--accent); color: var(--accent-ink); }
.pill--accent:hover { background: var(--accent-deep); }
.pill[disabled] { opacity: .5; cursor: progress; }
.more { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 17px; text-decoration: none; }
.more::after { content: '›'; font-size: 1.2em; line-height: 1; transform: translateY(-1px); }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }

.eyebrow { margin: 0 0 16px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.eyebrow--mark { display: flex; align-items: center; gap: .45em; }
.eyebrow--mark .mark__icon { width: 1.25em; height: 1.25em; border-radius: .27em; }
.headline { margin: 0; font-size: var(--fs-headline); line-height: 1.04; letter-spacing: -.048em; font-weight: 700; text-wrap: balance; }
.sub { margin: 20px auto 0; max-width: 32ch; font-size: var(--fs-sub); line-height: 1.3; letter-spacing: -.022em; font-weight: 500; color: var(--muted); text-wrap: balance; }
.center { text-align: center; }

/* ══ 1 · Hero: the whole first screen ════════════════════════════════ */
.hero {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 600px;
  overflow: clip;
  background: var(--film);           /* the film's own first colour: no flash before it paints */
}
.hero__media { position: absolute; inset: 0; }
/* Drawn at the size of its box; js/page.js places the sphere so the orbit
   stays clear of the copy and inside the screen. */
.hero__film { width: 100%; height: 100%; }
/* The cards never reach the copy (page.js keeps the orbit 48px clear of
   it); the scrim only evens out the background under the words. */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--film) 0%, color-mix(in srgb, var(--film) 82%, transparent) 30%, transparent 50%);
  pointer-events: none;
}
/* Anchored to the left edge of the screen, not to a centred grid, so the
   copy keeps the same place on every width and the film takes the rest. */
.hero__in { position: relative; height: 100%; padding-inline: var(--hero-inset); display: flex; align-items: center; }
.hero__copy { max-width: min(560px, 40vw); }
.hero__title {
  margin: 0;
  font-size: var(--fs-hero);
  line-height: 1.02; letter-spacing: -.052em; font-weight: 700;
  text-wrap: balance;
}
.hero__sub { margin: 24px 0 0; max-width: 30ch; font-size: var(--fs-sub); line-height: 1.32; letter-spacing: -.022em; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

/* The cue points down and says nothing a visitor has to read twice. */
.hero__cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); text-decoration: none;
}
.hero__cue i { width: 1px; height: 36px; background: linear-gradient(var(--muted), transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* An eight-second loop is moving content past the five-second line, so it
   gets a visible stop (WCAG 2.2.2) — the same place a product page puts it. */
.hero__pause {
  position: absolute; right: var(--gutter); bottom: 22px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--ink); cursor: pointer;
}
.hero__pause svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.hero__pause .i-play { display: none; }
.hero__pause[data-paused] .i-play { display: block; }
.hero__pause[data-paused] .i-pause { display: none; }

/* ══ 2 · Story ═══════════════════════════════════════════════════════ */
.story { position: relative; height: 560vh; transition: background-color 700ms var(--ease), color 700ms var(--ease); }
.story__pin {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center; gap: clamp(32px, 6vw, 96px);
}
/* All five captions share one grid cell, so the block is as tall as the
   tallest of them — a fixed height let the long fourth one run into the dots. */
.beats { display: grid; }
.beat { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }
.beat.is-on { opacity: 1; transform: none; }
.beat__n { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.beat h3 { margin: 0; font-size: var(--fs-beat); line-height: 1.04; letter-spacing: -.048em; font-weight: 700; text-wrap: balance; }
.beat p { margin: 18px 0 0; max-width: 26ch; font-size: var(--fs-sub); line-height: 1.3; letter-spacing: -.022em; font-weight: 500; color: var(--muted); text-wrap: pretty; }
.dots { display: flex; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.dots li { width: 8px; height: 8px; border-radius: 980px; background: var(--line); transition: width 400ms var(--ease), background 400ms var(--ease); }
.dots li.is-on { width: 26px; background: var(--ink); }

/* Beat 4 is the check, and the whole section goes dark for it: that is the
   moment the product exists for. The card stays white — it is the thing
   being looked at. */
.story[data-step="3"] { background: var(--night); color: var(--on-night); }
.story[data-step="3"] .beat__n, .story[data-step="3"] .beat p { color: var(--muted-dark); }
.story[data-step="3"] .dots li { background: var(--night-line); }
.story[data-step="3"] .dots li.is-on { background: var(--accent); }

.stage { position: relative; }

/* The plan: the film's slots as a week. One of them is this post's. */
.plan { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.slot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; border: 1px dashed var(--line); border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--muted); background: transparent;
  transition: background 500ms var(--ease), border-color 500ms var(--ease), color 500ms var(--ease);
}
.slot b { font-weight: 600; }
.slot svg { width: 14px; height: 14px; display: none; }
.slot--this { border-style: solid; border-color: var(--ink); color: var(--ink); }
.story[data-step="0"] .plan { opacity: 0; transform: translateY(-8px); }
.story[data-step="3"] .slot { border-color: var(--night-line); color: var(--muted-dark); }
.story[data-step="3"] .slot--this { border-color: var(--on-night); color: var(--on-night); }
/* The film's last frame: the slot is filled and checked — after the person's yes, not before. */
.story[data-step="4"] .slot--this { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.story[data-step="4"] .slot--this svg { display: block; }

/* ── The post card ──────────────────────────────────────────────── */
.post {
  background: var(--surface); color: var(--ink);
  border-radius: 28px; padding: clamp(22px, 3.2vw, 38px);
  box-shadow: 0 0 0 1px var(--hairline), 0 2px 4px rgba(12,16,13,.04), 0 14px 28px rgba(12,16,13,.06), 0 44px 90px -14px rgba(12,16,13,.16);
  transition: transform 700ms var(--ease);
}
.post__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.who { display: flex; align-items: center; gap: 10px; }
.who__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); }
.who__avatar::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.who b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.state { display: none; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 980px; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.state i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.state--yes { background: var(--accent); color: var(--accent-ink); }
.state--yes i { background: var(--accent-ink); }
.story[data-step="0"] .state[data-when="0"], .story[data-step="1"] .state[data-when="1"],
.story[data-step="2"] .state[data-when="2"], .story[data-step="3"] .state[data-when="3"],
.story[data-step="4"] .state[data-when="4"] { display: inline-flex; }

.post__body { position: relative; font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; letter-spacing: 0; }
.post__body p { margin: 0 0 14px; transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.post__body p:last-child { margin-bottom: 0; }
.post__hook { font-weight: 700; }
.ghost { position: absolute; inset: 4px 0 auto 0; transition: opacity 500ms var(--ease); }
.ghost .bar { height: 10px; margin-top: 14px; }
.story[data-step="0"] .post__body p, .story[data-step="1"] .post__body p { opacity: 0; transform: translateY(10px); }
.story:not([data-step="0"]):not([data-step="1"]) .ghost { opacity: 0; }

.bar { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: var(--fill); }
.bar--hl { background: var(--accent-wash); }
.bar--hook { height: 12px; margin-top: 0; margin-bottom: 14px; background: var(--line); }

.doc { border: 1px dashed var(--line); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: opacity 500ms var(--ease), max-height 600ms var(--ease), margin 600ms var(--ease), padding 600ms var(--ease); padding-block: 0; }
.doc b { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
.doc b svg { width: 16px; height: 16px; }
.story[data-step="0"] .doc { max-height: 220px; opacity: 1; margin: -4px 0 18px; padding-block: 14px; }

.claim { background-image: linear-gradient(var(--accent-wash), var(--accent-wash)); background-repeat: no-repeat; background-position: 0 90%; background-size: var(--claim, 100%) 40%; transition: background-size 800ms var(--ease); }
.unsupported { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--flag, var(--danger)); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-color 500ms var(--ease); }
.story[data-step="0"] .claim, .story[data-step="1"] .claim, .story[data-step="2"] .claim { --claim: 0%; }
.story[data-step="0"] .unsupported, .story[data-step="1"] .unsupported, .story[data-step="2"] .unsupported { --flag: transparent; }

.notes { display: grid; gap: 10px; margin-top: 20px; max-height: 260px; overflow: hidden; transition: opacity 600ms var(--ease), max-height 700ms var(--ease), margin 700ms var(--ease); }
.story[data-step="0"] .notes, .story[data-step="1"] .notes, .story[data-step="2"] .notes { opacity: 0; max-height: 0; margin-top: 0; }
.note { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.note svg { width: 18px; height: 18px; margin-top: 1px; }
.note b { display: block; color: var(--ink); font-weight: 600; }
.note q { font-family: var(--serif); font-style: italic; }
.note--ok svg { color: var(--ok); }
.note--flag { background: var(--danger-wash); }
.note--flag svg, .note--flag b { color: var(--danger); }

.post__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }
.marks { display: inline-flex; align-items: center; gap: 8px; }
.marks svg { width: 16px; height: 16px; color: var(--ink-2); }
.approve, .scheduled { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 16px; border-radius: 980px; font: 600 14px/1 var(--sans); white-space: nowrap; }
.approve svg, .scheduled svg { width: 14px; height: 14px; }
.approve { background: var(--accent); color: var(--accent-ink); transition: opacity 400ms var(--ease); }
.scheduled { display: none; background: var(--ink); color: var(--canvas); }
.scheduled svg { color: var(--accent); }
.story:not([data-step="4"]) .approve { opacity: .38; }
.story[data-step="4"] .approve { display: none; }
.story[data-step="4"] .scheduled { display: inline-flex; }

/* ══ 3 · Control ═════════════════════════════════════════════════════ */
.control { padding-block: clamp(120px, 20vh, 220px); background: var(--canvas-2); }
.control .headline em { font-style: normal; box-shadow: inset 0 -0.3em 0 var(--accent); }

/* ══ 4 · Final: the film's last frame, still ═══════════════════════ */
.final {
  position: relative; min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  background: var(--film) url('../img/orbit_loop_poster.jpg') 50% 50% / cover no-repeat;
}
.final::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--film) 0%, color-mix(in srgb, var(--film) 82%, transparent) 30%, transparent 50%); }
.final__in { position: relative; width: 100%; padding-inline: var(--hero-inset); }
.final__copy { max-width: min(560px, 40vw); }
.final .headline { font-size: var(--fs-headline-2); }
.final__sub { margin: 20px 0 0; max-width: 30ch; font-size: var(--fs-sub); line-height: 1.32; letter-spacing: -.022em; font-weight: 500; color: var(--ink-2); }

.join { margin: 36px 0 0; max-width: 520px; }
.join__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join__row { display: flex; align-items: center; gap: 6px; padding: 6px; background: var(--surface); border-radius: 980px; box-shadow: 0 0 0 1px var(--line), 0 12px 32px -12px rgba(12,16,13,.2); transition: box-shadow var(--t-1) var(--ease); }
.join__row:focus-within { box-shadow: 0 0 0 2px var(--focus), 0 12px 32px -12px rgba(12,16,13,.2); }
.join input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 17px/1 var(--sans); }
.join input::placeholder { color: var(--muted); }
.join[data-invalid] .join__row { box-shadow: 0 0 0 2px var(--danger), 0 12px 32px -12px rgba(12,16,13,.2); }
.join__msg { min-height: 1.4em; margin: 14px 0 0 18px; font-size: 14px; color: var(--ink-2); }
.join__msg[data-kind="error"] { color: var(--danger); }
/* The button stacks under the field when the form, not the screen, is too
   narrow for both: a phone, and also the 40vw column beside the film on a
   tablet held sideways (1024px), where the field shrank to "name@co". */
.join { container-type: inline-size; }
@container (max-width: 460px) {
  .join__row { flex-direction: column; align-items: stretch; border-radius: 22px; }
  .join .pill { width: 100%; }
}

.foot { padding-block: 28px 44px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }
.foot__in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ── Entrances: once, as each block arrives. */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
.rise-2 { transition-delay: 120ms; }
.rise-3 { transition-delay: 240ms; }

/* ── The story without scroll-driven motion: five readable chapters ──
   No JS, reduced motion or a narrow screen: the pin is released, every
   caption shows in order, and the card stands finished beside them. */
.story.is-static { height: auto; padding-block: clamp(96px, 14vh, 150px); background: var(--canvas); color: var(--ink); }
.story.is-static .story__pin { position: static; height: auto; align-items: start; }
.story.is-static .beats { gap: 44px; }
.story.is-static .beat { grid-area: auto; opacity: 1; transform: none; }
.story.is-static .beat__n, .story.is-static .beat p { color: var(--muted); }
.story.is-static .dots { display: none; }

/* ── The story on a phone: pinned, with a camera over the card ───────
   A phone has no room for the caption beside the card, or for the card
   under it: at its tallest the card alone is taller than the screen. So
   the caption shrinks to a header, the card keeps its size, and the stage
   below is a window that moves to the part of the card this beat changes
   (js/page.js sets --cam). `translate`, not `transform`: the plan and the
   card already animate their transform per beat. */
.story.is-camera { height: 500svh; }
.story.is-camera .story__pin { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.story.is-camera .beat__n { margin-bottom: 6px; font-size: 13px; }
.story.is-camera .beat h3 { font-size: clamp(26px, 7.6vw, 32px); }
.story.is-camera .beat p { margin-top: 8px; max-width: none; font-size: 16px; line-height: 1.3; }
.story.is-camera .dots { margin-top: 14px; }
/* Out to the screen's edges, so the card's shadow is not cut at the sides;
   the fades say the card goes on past the window. */
.story.is-camera .stage {
  flex: 1; min-height: 0; overflow: hidden;
  margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 0;
  -webkit-mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 36px), transparent);
}
.story.is-camera .stage > * { translate: 0 calc(-1 * var(--cam, 0px)); }
.story.is-camera .plan { transition: opacity 600ms var(--ease), transform 600ms var(--ease), translate 650ms var(--ease); }
.story.is-camera .post { transition: transform 700ms var(--ease), translate 650ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .rise, .beat, .notes, .claim, .unsupported, .pill, .approve, .post__body p, .doc, .ghost, .story, .plan, .slot { transition: none !important; }
  .rise { opacity: 1; transform: none; }
  .hero__cue i { animation: none; transform: none; }
}

/* ── Portrait, narrow and short: copy first, then the film beneath it ──
   Under the copy, not behind it: on a portrait screen the cropped frame
   puts the sphere exactly where the headline would sit. The box keeps the
   sphere and its orbit centred: the frame is cropped to the right side.
   A phone on its side (932x430) is short, not narrow: a pinned story there
   has 378px for a 500px card and a caption, so it is cut off and the card
   runs over the next section. Short screens read the page the same way as
   narrow ones. The query is the one js/page.js matches as `narrow`. */
@media (max-width: 900px), (max-aspect-ratio: 1/1), (max-height: 500px) {
  .hero { height: auto; min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; }
  .hero__in { height: auto; order: 1; padding-top: clamp(40px, 8vh, 72px); padding-inline: var(--gutter); }
  .hero__copy { max-width: none; text-align: center; }
  .hero__copy .eyebrow--mark { justify-content: center; }
  .hero__sub { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__media { position: relative; order: 3; flex: 1; min-height: 360px; }
  /* The stop for the film sits where the film starts, not where the hero
     ends: the hero is taller than a phone screen, and a stop below the fold
     is out of reach while the loop plays above it. In the flow between the
     copy and the film (order 2) it takes the 8px gap and no more. */
  .hero__pause { position: relative; order: 2; z-index: 1; right: auto; bottom: auto; align-self: flex-end; flex: none; margin: 8px var(--gutter) -44px 0; }
  .hero__film { position: absolute; inset: 0; }
  .hero__scrim { background: linear-gradient(180deg, var(--film) 0%, transparent 22%); }
  .hero__cue { display: none; }
  .story__pin { grid-template-columns: 1fr; }
  /* The last frame goes under the form, not behind it: behind, a card
     lands on the input. Same arithmetic as the hero: 340px tall, sphere
     (71.5% of 604px) in the middle of the screen. */
  .final {
    align-items: flex-start; padding-block: 72px 360px; min-height: 100svh;
    background-size: auto 340px;
    background-position: calc(50vw - 432px) 100%;
  }
  /* The frame is 604px wide; on a screen wider than that (a tablet, a
     phone on its side) its edges showed as a pale box. The second layer
     fades both edges into the page; the cards sit between -160px and
     +145px of the sphere, clear of the fades. */
  .final::before {
    background:
      linear-gradient(180deg, var(--film) 0%, var(--film) calc(100% - 340px), transparent calc(100% - 250px)),
      linear-gradient(90deg, var(--film) calc(50vw - 432px), transparent calc(50vw - 200px), transparent calc(50vw + 148px), var(--film) calc(50vw + 172px)) 0 100% / 100% 340px no-repeat;
  }
  .final__in { padding-inline: var(--gutter); }
  .final__copy { max-width: none; text-align: center; }
  .final__sub { margin-inline: auto; }
  .join { margin-inline: auto; }
  .join__msg { margin-left: 0; }
}
/* A phone on its side: the stacked hero put its buttons under the fold of a
   390px screen. Tighter spacing and a wider subline keep the copy and both
   actions on the first screen. */
@media (max-height: 500px) {
  .hero__in { padding-top: 14px; }
  .hero__sub { margin-top: 16px; max-width: 44ch; }
  .hero__actions { margin-top: 20px; }
}
@media (max-width: 600px) {
  .nav .pill--small { display: none; }
  .post { border-radius: 22px; }
  .plan { gap: 6px; }
  .slot { min-height: 40px; font-size: 12px; }
  /* "Tue 09:00" and its check do not fit a fifth of 320px and broke onto two
     lines; this post's slot takes the room it needs, the empty ones share
     the rest. */
  .plan { grid-template-columns: 1fr auto 1fr 1fr 1fr; }
  .slot--this { padding-inline: 10px; }
  .slot b { white-space: nowrap; }
}

/* ── Touch: every control a finger can hit (44px) ─────────────────────
   The small controls keep their drawn size; the extra is a transparent
   border outside the painted background, or padding taken back by a
   negative margin, so nothing around them moves. */
@media (pointer: coarse) {
  .lang { gap: 0; }
  .lang button { min-width: 44px; min-height: 44px; border: solid transparent; border-width: 7px 5px; background-clip: padding-box; }
  .nav .pill--small { min-height: 44px; border: 7px solid transparent; background-clip: padding-box; }
  .mark { padding-block: 10px; margin-block: -10px; }
  .more { min-height: 44px; margin-block: -9.5px; }
  .foot a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}