/* ============================================================================
   Takeroom home page and 404, layered on brand.css (tokens, faces, reset,
   wordmark, pill, footer). Plan: notes/LANDING-REVIEW-2026-11.md.
   Flat white page, one solid sand block (the walkthrough) and one solid blush
   block (the closing sign-up). No glows, grain, blur, chips or kickers.
   One shadow token (--card-shadow), only on real objects: video frames, the
   docked nav, the dock and the film dialog.
   Motion: transform / opacity only, all under prefers-reduced-motion: no-preference.
   State classes set by site.js:
     html.js · .nav.is-docked · .nav.is-open · html.is-locked · body.film-open
     .reel__panel.is-active · .seg[data-i] · .band__tick.is-hit
     .dock.is-shown · video.is-playing · .ctl.is-paused
     form.wl[data-state=idle|sending|done|error|off] · .film-dialog__frame.is-started
   ========================================================================= */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root {
  --section-y: clamp(48px, calc(2.2vw + 3vh), 96px);
  --section-y: clamp(48px, calc(2.2vw + 3svh), 96px);
  --card-shadow: 0 20px 60px -24px rgba(17, 17, 20, 0.18);
  --dur-hover: 150ms;
  --dur-xfade: 250ms;
  --ease-io: cubic-bezier(.45, 0, .55, 1);
}

/* Lenis 1.3.26 dist/lenis.css, copied here because style-src is 'self'. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (min-width: 1680px) {
  :root { --page-max: clamp(1200px, calc(25vw + 920px), 1560px); }
}

html.is-locked { overflow: hidden; }
body { overflow-x: clip; }
section[id] { scroll-margin-top: 80px; }

.scroll-sentinel { position: absolute; top: 40px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* --- shared furniture ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { padding-block: var(--section-y); }
.h2 {
  font: 900 clamp(28px, calc(0.5rem + 2.4vw), 54px)/1.02 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2--sm { font-size: clamp(24px, calc(0.5rem + 1.6vw), 36px); }
.credit { color: var(--text-2); font: 400 13px/1.5 var(--font-sans); }

/* Pause / play control, 44px. */
.ctl {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid rgba(17, 17, 20, 0.14);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.ctl:hover { border-color: rgba(17, 17, 20, 0.4); }
.ctl:active, .seg button:active { transform: scale(0.97); }
.ctl__icon { grid-area: 1 / 1; display: block; }
.ctl__icon--play, .ctl.is-paused .ctl__icon--pause { display: none; }
.ctl.is-paused .ctl__icon--play { display: block; }
html:not(.js) .ctl { display: none; }

/* Media: poster under, video over; the video shows once it really plays. */
.media { position: relative; overflow: hidden; background: var(--sand); }
.media > picture, .media > picture img, .media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media > video { opacity: 0; }
.media > video.is-playing { opacity: 1; }

/* ============================================================================
   Promo strip
   ========================================================================= */
.promo {
  position: relative;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: var(--blush);
  color: var(--ink);
  font: 400 14px/1 var(--font-sans);
  white-space: nowrap;
}
.promo__film {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--red-text);
  font: 600 14px/1 var(--font-sans);
}
.promo__film:hover { color: var(--ink); }
.promo__short { display: none; }
@media (max-width: 559px) {
  .promo__long { display: none; }
  .promo__short { display: inline; }
  .promo, .promo__film { font-size: 13px; }
}

/* ============================================================================
   Navbar: transparent at the top, a solid white card once docked
   ========================================================================= */
.nav { position: sticky; top: 0; z-index: 50; height: 72px; pointer-events: none; }
.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(100% - 16px);
  max-width: calc(var(--page-max) + 16px);
  height: 56px;
  margin: 8px auto 0;
  padding: 0 8px 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  pointer-events: auto;
}
.nav.is-docked .nav__bar, .nav.is-open .nav__bar {
  border-color: var(--hairline);
  background: var(--white);
  box-shadow: var(--card-shadow);
}
body.film-open .nav { visibility: hidden; }
.nav__lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__mark { width: 28px; height: 28px; flex: none; }
.nav__name { font: 900 20px/1 var(--font-display); letter-spacing: var(--track-wordmark); }
.nav__links { display: none; gap: 4px; margin-inline: auto; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink); background: var(--sand); }
.nav__links a[aria-current="true"] { color: var(--red-text); background: var(--blush); }
/* The nav action: an outline at the top, filled red once the nav docks. */
.nav__act {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(17, 17, 20, 0.14);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 600 14px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.nav__act:hover { border-color: rgba(17, 17, 20, 0.4); }
.nav.is-docked .nav__act { border-color: var(--red-mark); background: var(--red-mark); color: var(--white); }
.nav__burger {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.nav__burger-l { position: absolute; left: 13.5px; width: 17px; height: 1.5px; background: var(--ink); }
.nav__burger-l:nth-of-type(2) { top: 18px; }
.nav__burger-l:nth-of-type(3) { top: 24.5px; }
.nav.is-open .nav__burger-l:nth-of-type(2) { transform: translateY(3.25px) rotate(45deg); }
.nav.is-open .nav__burger-l:nth-of-type(3) { transform: translateY(-3.25px) rotate(-45deg); }
.drawer {
  width: calc(100% - 16px);
  margin: 8px auto 0;
  padding: 8px 16px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  pointer-events: auto;
}
.drawer nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--ink);
  font: 900 24px/1 var(--font-display);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.drawer__act { width: 100%; margin-top: 12px; }
.scrim { position: fixed; inset: 0; z-index: 49; background: rgba(247, 243, 239, 0.9); }
@media (min-width: 961px) {
  .nav__links, .nav__act { display: inline-flex; }
  .nav__burger, .drawer, .scrim { display: none !important; }
}

/* ============================================================================
   Hero: words and sign-up, then the cut itself (desktop: side by side)
   ========================================================================= */
.hero { padding: clamp(16px, 3vh, 48px) 0 var(--section-y); padding-top: clamp(16px, 3svh, 48px); }
.hero__grid { display: grid; gap: 32px; }
.hero__title {
  font: 900 clamp(34px, 9vw, 52px)/0.98 var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.hero__line--soft { color: var(--red-mark); }
.hero__sub {
  max-width: 54ch;
  margin-top: 16px;
  color: var(--text-2);
  font: 400 clamp(15px, calc(0.8rem + 0.3vw), 19px)/1.5 var(--font-sans);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
  }
  .hero__title { font-size: clamp(40px, min(3.9vw, 7vh), 72px); font-size: clamp(40px, min(3.9vw, 7svh), 72px); }
}

/* --- the waitlist form ------------------------------------------------------- */
.wl { margin-top: clamp(20px, 2.6vh, 28px); max-width: 520px; }
.wl__row { display: flex; flex-wrap: wrap; gap: 8px; }
.wl__input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(17, 17, 20, 0.2);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1 var(--font-sans);
}
.wl__input::placeholder { color: #7A7A84; }
.wl__input:hover { border-color: rgba(17, 17, 20, 0.4); }
.wl__input:focus-visible { border-color: var(--red-mark); outline-offset: 1px; }
.wl__input[aria-invalid="true"] { border-color: var(--red-mark); }
.wl__btn { flex: 0 0 auto; min-height: 52px; }
.wl__btn:hover { background: #C80D25; }
.wl__btn[disabled] { opacity: 0.7; cursor: progress; }
@media (max-width: 479px) { .wl__btn { flex: 1 1 100%; } }
/* The honeypot: off-screen for people, still a real field for bots. */
.wl__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wl__status { margin-top: 10px; color: var(--ink); font: 600 15px/1.45 var(--font-sans); }
.wl__status:empty { display: none; }
.wl[data-state="error"] .wl__status, .wl[data-state="off"] .wl__status { color: var(--red-text); }
.wl[data-state="done"] .wl__row { display: none; }
.wl[data-state="done"] .wl__status { margin-top: 0; padding: 14px 18px; border-radius: 12px; background: var(--blush); }
.wl__note { margin-top: 10px; color: var(--text-2); font: 400 14px/1.5 var(--font-sans); }
.wl__note a { color: var(--red-text); }
/* No lines under words (BRAND-LIGHT.md): links on this page are red text, ink on hover. */
.wl__note a, .trust__list a, .trust__link, .faq__a a, .closing__ask a { text-decoration: none; font-weight: 600; }
.wl__note a:hover, .trust__list a:hover, .trust__link:hover, .faq__a a:hover, .closing__ask a:hover { color: var(--ink); }
.wl__free { color: var(--ink); font-weight: 600; }

/* --- the reel: the cut, as filmed and as Takeroom cut it ---------------------- */
.reel { min-width: 0; }
.reel__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.reel__right { display: flex; align-items: center; gap: 14px; }
.reel__tc { display: none; color: var(--text-2); font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.reel__tc span { color: var(--ink); }
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  max-width: 320px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--sand);
}
.seg__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: var(--r-pill);
  background: var(--white);
}
.seg[data-i="1"] .seg__pill { transform: translateX(100%); }
.seg button {
  position: relative;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: 600 14px/1 var(--font-sans);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.seg button:hover, .seg button[aria-selected="true"] { color: var(--ink); }
.reel__card { overflow: hidden; border: 6px solid var(--white); border-radius: 12px; background: var(--white); box-shadow: var(--card-shadow); }
.reel__stage { position: relative; aspect-ratio: 16 / 9; }
.reel__panel { position: absolute; inset: 0; opacity: 0; }
.reel__panel.is-active { opacity: 1; z-index: 1; }
.reel__panel > .media { position: absolute; inset: 0; }
.band { position: relative; height: 40px; background: var(--white); }
.band__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.band__bar { fill: rgba(255, 122, 89, 0.45); }
.band__tick { fill: var(--red-mark); transform-box: fill-box; transform-origin: center; }
.band__tick.is-hit { transform: scaleX(2); }
.band__head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); will-change: transform; }
.reel__cap { margin-top: 12px; }
.reel__line { color: var(--ink); font: 400 15px/1.5 var(--font-sans); text-wrap: pretty; }
.reel__more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; }
.reel__film {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-text);
  font: 600 15px/1 var(--font-sans);
}
.reel__film:hover { color: var(--ink); }
@media (min-width: 1024px) {
  .reel__tc { display: inline; }
  .band { height: 52px; }
}

/* ============================================================================
   Who it's for
   ========================================================================= */
.film { padding-top: 0; }
.film__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.film__fig { margin: 24px 0 0; }
.film__frame { position: relative; overflow: hidden; border: 6px solid var(--white); border-radius: 12px; background: var(--white); box-shadow: var(--card-shadow); aspect-ratio: 16 / 9; }
.film__frame > .media { position: absolute; inset: 0; }
.film__play { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.film__credit { margin-top: 12px; }
.who { padding-top: 0; }
.who__list { display: grid; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.who__list h3 { font: 600 18px/1.3 var(--font-sans); }
.who__list p { margin-top: 4px; color: var(--text-2); font: 400 15px/1.5 var(--font-sans); }
@media (min-width: 760px) {
  .who__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ============================================================================
   Walkthrough: one solid sand block, five numbered steps, real captures
   ========================================================================= */
.walk { margin-inline: 8px; border-radius: 12px; background: var(--sand); }
@media (min-width: 600px) { .walk { margin-inline: 12px; } }
.walk__head { max-width: 760px; }
.steps { display: grid; gap: 40px; margin: 32px 0 0; padding: 0; list-style: none; }
.step { display: grid; gap: 16px; align-items: center; }
.step__media { width: min(100%, 340px); }
.step__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; width: min(100%, 420px); }
.step__media--save { display: grid; grid-template-columns: minmax(0, 1fr) 26%; gap: 10px; align-items: end; width: min(100%, 440px); }
.step__title { display: flex; align-items: baseline; gap: 12px; font: 900 clamp(21px, 1.7vw, 28px)/1.1 var(--font-display); letter-spacing: -0.03em; }
.step__n { flex: none; color: var(--red-mark); font-variant-numeric: tabular-nums; }
.step__text p { max-width: 46ch; margin-top: 8px; color: var(--text-2); font: 400 15px/1.55 var(--font-sans); text-wrap: pretty; }
.step__text .step__pro { color: var(--ink); }
.walk__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 8px;
  color: var(--red-text);
  font: 600 16px/1 var(--font-sans);
  text-decoration: none;
}
.walk__cta:hover { color: var(--ink); }
.walk__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }

/* Real frames: wide save, vertical save, and crops of app screen recordings. */
.shot { border-radius: 4px; box-shadow: var(--card-shadow); }
.shot--wide { aspect-ratio: 16 / 9; }
.shot--tall { aspect-ratio: 9 / 16; }
/* A crop window onto one control of an app capture: the layer is the whole frame,
   moved and sized so only [cx, cy, cw, ch] (fractions of the frame) shows. */
.crop {
  --cx: 0.05;
  --cw: 0.9;
  --vw: 540;
  --vh: 1128;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  aspect-ratio: calc(var(--cw) * var(--vw)) / calc(var(--ch) * var(--vh));
}
.crop__layer.media {
  position: absolute;
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
  width: calc(100% / var(--cw));
  aspect-ratio: var(--vw) / var(--vh);
  background: var(--white);
}
.crop--edit { --cy: 0.318; --ch: 0.347; --cx: 0.02; }
.crop--style { --cy: 0.34; --ch: 0.29; }
.crop--captions { --cy: 0.55; --ch: 0.36; }
.crop--audio { --vw: 720; --vh: 720; --cy: 0; --ch: 0.72; --cx: 0.03; --cw: 0.94; }

@media (min-width: 900px) {
  .steps { gap: clamp(48px, 5vw, 72px); margin-top: 48px; }
  .step { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); }
  .step__media { justify-self: end; width: min(100%, 440px); }
  .step__media--pair { width: min(100%, 520px); }
  .step__media--save { width: min(100%, 540px); }
  .step__text p { font-size: 16px; }
}

/* ============================================================================
   One phone vs a multicam shoot · features · privacy
   ========================================================================= */
.compare__in { display: grid; gap: 20px; }
.compare__body { display: grid; gap: 12px; max-width: 62ch; }
.compare__body p { color: var(--text-2); font: 400 16px/1.6 var(--font-sans); }
.compare__body p:last-child { color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) {
  .compare__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
}

.feats { padding-top: 0; }
.feats__in { display: grid; gap: 24px; }
.feats__list { display: grid; gap: 28px; }
.feats__h { color: var(--red-text); font: 600 15px/1.3 var(--font-sans); }
.feats__rows { display: grid; gap: 12px; margin: 10px 0 0; }
.feats__rows dt { color: var(--ink); font: 900 20px/1.2 var(--font-display); letter-spacing: -0.015em; }
.feats__rows dd { margin: 2px 0 0; color: var(--text-2); font: 400 15px/1.45 var(--font-sans); text-wrap: pretty; }
@media (min-width: 720px) {
  .feats__rows > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .feats__rows dd { margin: 0; }
}
@media (min-width: 1024px) {
  .feats__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
  .feats__in > .h2 { position: sticky; top: 96px; }
  .feats__group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: baseline; }
  .feats__rows { margin-top: 0; }
}

.trust { padding-top: 0; }
.trust__list { display: grid; gap: 8px 32px; margin: 16px 0 0; padding: 0 0 0 1.1em; font: 400 15px/1.5 var(--font-sans); }
.trust__list li::marker { color: var(--red-mark); }
.trust__list a, .trust__link { color: var(--red-text); }
.trust__link { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: 6px; font: 600 15px/1 var(--font-sans); }
@media (min-width: 760px) { .trust__list { grid-template-columns: 1fr 1fr; } }

/* ============================================================================
   FAQ: one centred column
   ========================================================================= */
.faq { padding-top: 0; }
.faq__in { max-width: calc(820px + 2 * var(--gutter)); }
.faq__list { display: grid; gap: 8px; margin-top: 24px; }
.faq__item { border-radius: 12px; background: var(--sand); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font: 600 clamp(16px, calc(0.8rem + 0.3vw), 18px)/1.35 var(--font-sans); }
.faq__item summary:hover h3 { color: var(--red-text); }
.faq__chev {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 1.5px solid var(--text-2);
  border-bottom: 1.5px solid var(--text-2);
  transform: translateY(-3px) rotate(45deg);
}
.faq__item[open] .faq__chev { transform: translateY(2px) rotate(-135deg); }
.faq__a { padding: 0 40px 18px 20px; }
.faq__a p { max-width: 62ch; color: var(--text-2); font: 400 16px/1.6 var(--font-sans); }
.faq__a a { color: var(--red-text); }

/* ============================================================================
   Closing: the second sign-up on one solid blush block
   ========================================================================= */
.closing { margin-inline: 8px; border-radius: 12px; background: var(--blush); }
@media (min-width: 600px) { .closing { margin-inline: 12px; } }
.closing__in { display: grid; justify-items: center; text-align: center; }
.closing__title {
  max-width: 18ch;
  font: 900 clamp(32px, calc(1rem + 3.4vw), 72px)/1 var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.wl--closing { width: 100%; margin-top: 28px; }
.wl--closing .wl__row { justify-content: center; }
.closing__ask { margin-top: 20px; color: var(--text-2); font: 400 15px/1.5 var(--font-sans); }
.closing__ask a { color: var(--red-text); }

.site-foot { max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-top: 24px; padding-bottom: 88px; }

/* ============================================================================
   Phones: the dock, shown after the hero, hidden over the closing and dialogs
   ========================================================================= */
.dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 8px 0 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--card-shadow);
  transform: translateY(calc(100% + 24px));
  visibility: hidden;
}
.dock.is-shown { transform: none; visibility: visible; }
@media (max-width: 960px) { html { scroll-padding-bottom: 88px; } }
@media (min-width: 961px) { .dock { display: none; } }
body.film-open .dock, html.is-locked .dock { visibility: hidden; }
.dock__text { flex: 1 1 auto; color: var(--ink); font: 400 14px/1.2 var(--font-sans); white-space: nowrap; }
.dock__pill { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 399px) {
  .dock { padding: 0 8px; }
  .dock__text { display: none; }
  .dock__pill { flex: 1 1 auto; }
}

/* ============================================================================
   Film dialog, with the end card after the film
   ========================================================================= */
.film-dialog {
  width: min(100% - 24px, 1040px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--card-shadow);
}
.film-dialog::backdrop { background: rgba(247, 243, 239, 0.94); }
.film-dialog__panel { position: relative; padding: 12px; }
.film-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 12px 8px; }
.film-dialog__title { font: 900 22px/1.1 var(--font-display); letter-spacing: -0.02em; }
.film-dialog__note { margin-top: 4px; color: var(--text-2); font: 400 13px/1.4 var(--font-sans); }
.film-dialog__close {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  padding: 0;
  border: 1px solid rgba(17, 17, 20, 0.12);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
}
.film-dialog__frame { position: relative; overflow: hidden; border-radius: 12px; background: var(--sand); aspect-ratio: 16 / 9; }
.film-dialog__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 16px;
  border: 0;
  background: var(--sand);
  color: var(--ink);
  text-align: center;
}
.film-dialog__frame.is-started .film-dialog__cover { opacity: 0; visibility: hidden; pointer-events: none; }
.film-dialog__cover-title { font: 900 clamp(28px, 5vw, 56px)/1 var(--font-display); letter-spacing: var(--track-display); }
.film-dialog__cover-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--red-mark); color: var(--white); }
.film-dialog__cover-note { color: var(--text-2); font: 400 14px/1.4 var(--font-sans); }
.film-dialog__video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
/* End card: below the film on phones, over it on wider screens. */
.film-end { display: grid; justify-items: center; padding: 20px 8px 8px; text-align: center; }
.film-end__title { font: 900 clamp(24px, 3vw, 40px)/1.05 var(--font-display); letter-spacing: -0.03em; }
.film-end .wl { width: 100%; margin-top: 16px; }
.film-end .wl__row { justify-content: center; }
.film-end__again {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  margin-top: 6px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--red-text);
  font: 600 15px/1 var(--font-sans);
}
@media (min-width: 700px) {
  .film-end {
    position: absolute;
    inset: 72px 12px 12px;
    z-index: 2;
    place-content: center;
    padding: 24px;
    border-radius: 12px;
    background: var(--white);
  }
}

/* ============================================================================
   404
   ========================================================================= */
.lost { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: 72px var(--gutter) 96px; }
.lost__title { font: 900 clamp(36px, 9vw, 72px)/1.02 var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.lost__text { margin-top: 16px; color: var(--text-2); font: 400 17px/1.5 var(--font-sans); }
.lost__pill { margin-top: 32px; }

/* ============================================================================
   Motion (only when welcome): calm fades and slides, no bounce
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .nav__bar { transition: background-color 300ms var(--ease-decel), border-color 300ms var(--ease-decel); }
  .nav__act { transition: background-color var(--dur-hover) var(--ease-decel), color var(--dur-hover) var(--ease-decel), border-color var(--dur-hover) var(--ease-decel); }
  .nav__links a { transition: color var(--dur-hover) var(--ease-decel); }
  .nav__burger-l { transition: transform var(--dur-standard) var(--ease-decel); }
  .ctl, .seg button { transition: border-color var(--dur-hover) var(--ease-decel), color var(--dur-hover) var(--ease-decel), transform var(--dur-micro) var(--ease-decel); }
  .wl__input { transition: border-color var(--dur-hover) var(--ease-decel); }
  .wl__btn { transition: background-color var(--dur-hover) var(--ease-decel), transform var(--dur-micro) var(--ease-decel); }
  .media > video { transition: opacity var(--dur-xfade) var(--ease-io); }
  .seg__pill { transition: transform var(--dur-standard) var(--ease-decel); }
  .reel__panel { transition: opacity var(--dur-xfade) var(--ease-io); }
  .band__tick { transition: transform 320ms var(--ease-decel); }
  .band__tick.is-hit { transition-duration: var(--dur-micro); }
  .faq__chev { transition: transform var(--dur-standard) var(--ease-decel); }
  .dock { transition: transform 360ms var(--ease-accel), visibility 0s linear 360ms; }
  .dock.is-shown { transition: transform 360ms var(--ease-decel), visibility 0s; }
  .film-dialog, .film-dialog::backdrop { opacity: 0; }
  .film-dialog { transform: translateY(8px); }
  .film-dialog.is-open, .film-dialog.is-open::backdrop {
    opacity: 1;
    transition: opacity var(--dur-standard) var(--ease-decel), transform var(--dur-standard) var(--ease-decel);
  }
  .film-dialog.is-open { transform: none; }
  .film-dialog.is-closing, .film-dialog.is-closing::backdrop { opacity: 0; transition: opacity 160ms var(--ease-accel), transform 160ms var(--ease-accel); }
  .film-dialog.is-closing { transform: translateY(8px); }
}

/* Phones held sideways and short windows: headline, sign-up and the reel's top share a screen. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero { padding-top: 8px; }
  .hero__title { font-size: clamp(24px, 7.2vh, 40px); font-size: clamp(24px, 7.2svh, 40px); }
  .hero__sub { font-size: 14px; line-height: 1.45; }
}

/* ============================================================================
   Phones: a denser rhythm so the whole story stays short (target under 6500px at 390)
   ========================================================================= */
@media (max-width: 759px) {
  :root { --section-y: 40px; }
  .hero__grid { gap: 24px; }
  .who__list { gap: 12px; margin-top: 16px; }
  .who__list li { display: block; }
  .who__list h3, .who__list p { display: inline; font-size: 15px; }
  .who__list h3::after { content: ". "; }
  .steps { gap: 28px; margin-top: 24px; }
  .step { gap: 12px; }
  .step__media { width: 72%; }
  .step__media--pair, .step__media--save { width: 100%; }
  .step__media--save { grid-template-columns: minmax(0, 1fr) 22%; }
  .step__text p { margin-top: 6px; }
  .walk__foot { margin-top: 24px; }
  .compare__body p { font-size: 15px; line-height: 1.55; }
  .feats__list { gap: 20px; }
  .feats__rows { gap: 8px; }
  .feats__rows dd { font-size: 14px; }
  .trust__list { gap: 4px; font-size: 14px; }
  .faq__list { margin-top: 16px; gap: 6px; }
  .faq__item summary { min-height: 52px; padding: 10px 16px; }
  .faq__a { padding: 0 16px 14px; }
  .wl--closing { margin-top: 20px; }
  .site-foot { padding-top: 32px; }
}