/* ==========================================================================
   Larkin — V5, the premium cut. The same system as the homepage (DM Sans,
   white canvas, #151515 ink, #F0F0F0 cards, lime #D2ED28 for the one thing
   to press), with the finish turned up: an ink curtain that lifts off the
   film, headlines that rise out of their baselines, a read-along on ink,
   a close-up of the module scrubbed by scroll, hairline rules with their
   section index, numbers that count themselves in, grain on the dark
   surfaces, and a wordmark signature to close. Shares /media and /fonts
   with the homepage; nothing here touches it.
   ========================================================================== */

/* DM Sans (SIL Open Font License), variable weight and optical size, self-hosted. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg: #FFFFFF;
  --ink: #151515;
  --ink-2: #61615C;
  --ink-3: #8E8E88;
  --card: #F0F0F0;
  --card-2: #E8E8E6;
  --feature: #151515;
  --raised: #222222;
  --deep: #0B0B0B;
  --on-feature: #FFFFFF;
  --on-feature-2: #A3A39D;
  --lime: #D2ED28;
  --on-lime: #151515;
  --hair: rgba(21, 21, 21, 0.10);
  --hair-dark: rgba(255, 255, 255, 0.12);

  --clarity: #3B8F7B;
  --listening: #00A6D8;
  --framing: #7B5CD6;
  --assert: #D9486B;

  --r-xl: clamp(24px, 2.4vw, 34px);
  --r-lg: clamp(20px, 2vw, 28px);
  --r-md: 18px;

  --shell: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
  --section: clamp(88px, 11vw, 160px);

  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* The house ease: fast out of the gate, a long soft landing. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Film grain for the dark surfaces, one small tile. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 900px) { :root { --header-h: 72px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Never let the page pan sideways on a phone. Body clips (clip, not hidden,
   so position: sticky keeps working); the root guard stops body's value
   propagating to the viewport. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--listening); outline-offset: 3px; border-radius: 6px; }
section[id], [id^="app-"] { scroll-margin-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }

/* Grain: a faint film texture over the dark surfaces, never the light ones. */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 240px 240px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow--lime { color: var(--lime); }
.h2 {
  font-size: clamp(2.25rem, 4.9vw, 4.25rem);                 /* 36 → 68 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Headline tracking is light: at headline sizes DM Sans switches to its
   display cut, already ~8% tighter. Before a v or y the r gets a hair of
   room (.kern) so letters never touch. */
.kern { margin-right: 0.03em; }
.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40ch;
}

/* Section heads: a hairline across the top with the eyebrow under it, then
   the headline. The hairline draws itself in from the left as the head
   arrives. */
.sec-head { display: grid; gap: clamp(20px, 3vw, 32px); margin-bottom: clamp(40px, 6vw, 72px); }
.sec-rule {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding-top: 14px;
}
.sec-rule::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}
.sec-rule--dark::before, .sec-rule--light::before { background: var(--hair-dark); }
.sec-rule--light .eyebrow { color: rgba(255, 255, 255, 0.78); }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
/* Under a centred headline the eyebrow sits centred on the line too. */
.sec-head--center .sec-rule, .how-film__head .sec-rule { justify-content: center; }
.sec-head--split .lead { max-width: 34ch; text-wrap: balance; }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .sec-head--split .sec-rule { grid-column: 1 / -1; }
  .sec-head--split .lead { justify-self: end; text-align: right; }
}

/* --------------------------------------------------------------------------
   4. Buttons and pills
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.6s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.6s var(--ease);
}
.btn > span { position: relative; z-index: 1; }
.btn:not([data-magnet]):hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--lime { background: var(--lime); color: var(--on-lime); }
.btn--lime:hover { box-shadow: 0 14px 30px -14px rgba(21, 21, 21, 0.5); } /* lifts; the lime itself never shifts */
/* A light passes over the lime once under the pointer. */
.btn--lime::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--lime:hover::after { animation: sheen 0.9s var(--ease) forwards; }
}
@keyframes sheen {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 1; }
  100% { opacity: 0; translate: 440% 0; }
}
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; box-shadow: 0 14px 30px -14px rgba(21, 21, 21, 0.5); }
.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 32%, transparent);
}
.btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; padding-inline: 1rem; white-space: normal; text-align: center; }

/* --------------------------------------------------------------------------
   5. Intro
   -------------------------------------------------------------------------- */
/* An ink curtain over the whole page: the letters come up, the dot comes on
   like the band's light, and the curtain lifts off the film. v5.js adds
   .is-out when the hero is ready (a second or so), then removes it. Without
   the script there is no curtain at all. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--feature);
  color: #fff;
  overflow: hidden;
}
html:not(.js) .intro, .intro[hidden] { display: none; }
.intro .intro__logo { width: clamp(128px, 14vw, 184px); height: auto; fill: currentColor; }
.intro__logo path, .intro__logo circle:not(.logo__dot) {
  opacity: 0;
  animation: intro-letters 0.8s var(--ease) 0.2s forwards;
}
.intro__logo .logo__dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: intro-dot 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.65s forwards;
}
.intro.is-out { animation: intro-out 1s var(--ease-io) forwards; }
@keyframes intro-letters { to { opacity: 1; } }
@keyframes intro-dot { to { transform: scale(1); } }
@keyframes intro-out {
  to { transform: translateY(-101%); border-radius: 0 0 48px 48px; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* A floating bar. At the very top it's clear over the hero film, its words
   white or ink with the film behind them (.on-dark, v5.js). Once scrolled
   it's a frosted white pill (.is-floating); scrolling down hides it, any
   scroll up brings it back. It fades in once the curtain has lifted. */
.site-header {
  --pill-pad: 14px;
  --pill-h: 54px;
  --float-top: 10px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--float-top) max(10px, calc(var(--gutter) - var(--pill-pad))) 0;
  color: var(--ink);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), filter 0.4s var(--ease), color 0.35s var(--ease);
}
@media (min-width: 900px) { .site-header { --pill-pad: 24px; --pill-h: 58px; --float-top: 14px; } }
.site-header.is-hidden { opacity: 0; transform: translateY(-14px); filter: blur(7px); }
.site-header.is-hidden .site-header__inner { pointer-events: none; }
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: calc(var(--shell) + var(--pill-pad) * 2);
  height: var(--pill-h);
  padding-inline: var(--pill-pad);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.03), 0 10px 34px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.035);
  pointer-events: auto;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.9s var(--ease), translate 0.9s var(--ease);
}
.js:not(.is-ready) .site-header__inner { opacity: 0; translate: 0 -10px; }
.brand { grid-column: 1; justify-self: start; font-size: 1.5rem; }
/* The wordmark, from the logo file: its letters take the text colour, its
   full stop is always lime. 0.75em sets its "l" as tall as the font's own. */
.logo { display: block; width: auto; height: 0.75em; fill: currentColor; }
.logo__dot { fill: var(--lime); }
@media (min-width: 900px) { .brand { font-size: 1.625rem; } }
.nav { grid-column: 2; display: none; gap: 2px; }
.nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0.72;
  transition: opacity 0.2s var(--ease), background-color 0.25s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a.is-active { opacity: 1; background: rgba(21, 21, 21, 0.06); }
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
@media (min-width: 900px) { .nav { display: flex; } }

html.js .site-header:not(.is-floating) .site-header__inner {
  border-color: transparent;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.over-hero .nav a { opacity: 0.92; }
.site-header.over-hero :is(.brand, .nav a) { transition: opacity 0.2s var(--ease); } /* colour switches with the cut, unfaded */
.site-header.over-hero :is(.brand, .nav a).on-dark { color: #fff; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* The film fills the frame. The whole frame sits on the white of the page
   and, as the page scrolls, shrinks and rounds into a card lifting away
   (--exit-s, --exit-r, v5.js), fading into the statement below. */
.hero {
  position: relative;
  display: grid;
  min-height: max(600px, 100svh);
  background: var(--bg);
  color: #fff;
}
.hero__frame {
  --exit-s: 1;
  --exit-r: 0px;
  --exit-o: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  grid-area: 1 / 1;
  min-height: max(600px, 100svh);
  overflow: hidden;
  background: #E8E8E6;
  border-radius: var(--exit-r);
  transform: scale(var(--exit-s));
  opacity: var(--exit-o);
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
}
.hero__video { opacity: 0; transition: opacity 0.45s var(--ease); }
.hero.is-playing .hero__video { opacity: 1; }
/* Phones and narrow frames: copy sits low over a soft ink scrim. */
.hero__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 72%;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.78) 0%, rgba(12, 12, 12, 0.5) 45%, rgba(12, 12, 12, 0) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(36px, 7vh, 72px);
}
.hero__copy { display: grid; gap: 18px; max-width: 36rem; }
.hero__title {
  font-size: clamp(3rem, 13vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
/* Each line rises out of its own baseline: the line clips, the inner span
   travels. The padding keeps descenders and the apostrophe inside the clip. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.06em 0.16em;
  margin: -0.08em -0.06em -0.16em;
}
.hero__title .line__in { display: inline-block; }
.hero__lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: balance;
  opacity: 0.9;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__fine { font-size: 0.875rem; font-weight: 600; opacity: 0.7; }

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--header-h) + 16px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 20, 20, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.hero__toggle[hidden] { display: none; }
.hero__toggle svg { width: 20px; height: 20px; fill: currentColor; display: none; }
.hero__toggle[data-state="playing"] .i-pause,
.hero__toggle[data-state="paused"] .i-play,
.hero__toggle[data-state="ended"] .i-replay { display: block; }
.hero__toggle[data-state="ended"] .i-replay { fill: none; }

@media (max-aspect-ratio: 4/5) {
  .hero__media img, .hero__video { object-position: 50% 50%; }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero__frame { color: var(--ink); transition: color 0.3s var(--ease); }
  .hero.is-dark .hero__frame { color: #fff; }
  .hero__scrim { display: none; }
  .hero__media img, .hero__video { object-position: 50% 50%; }
  .hero__inner { align-items: center; padding-top: var(--header-h); padding-bottom: 0; }
  .hero__copy { gap: 22px; max-width: 40rem; transform: translateY(10vh); } /* headline starts just below 35% of the screen */
  .hero__title { font-size: clamp(4rem, 7.4vw, 6.5rem); }
  .hero.is-dark .hero__copy { text-shadow: 0 1px 30px rgba(0, 0, 0, 0.35); }
  .hero__toggle {
    top: auto;
    bottom: 32px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
  }
  .hero.is-dark .hero__toggle { color: #fff; background: rgba(20, 20, 20, 0.38); }
}

/* --------------------------------------------------------------------------
   8. Statement — read-along
   -------------------------------------------------------------------------- */
.statement-pin { background: var(--bg); }
.statement {
  display: grid;
  place-items: center;
  padding-block: clamp(96px, 15vw, 200px);
  background: var(--bg);
  text-align: center;
}
.statement p {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.75rem, 3.8vw, 3.5rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.statement p + p { margin-top: 0.6em; }
.statement p:first-child { color: var(--ink-2); }
.statement .w { transition: opacity 0.12s linear; }

/* The key phrase gets a lime highlighter (a lime shape with ink text, as
   lime goes on light). Inline backgrounds paint as one strip across line
   breaks, so growing the strip's width sweeps the marker along the phrase
   in reading order. It rests fully drawn; the read-along (v5.js) starts it
   at zero and sweeps it in when the reading reaches the phrase. */
.marker {
  --mark: 100%;
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: var(--mark) 0.82em;
  padding-inline: 0.08em;
  margin-inline: -0.08em;
  border-radius: 0.14em;
  transition: background-size 1.5s cubic-bezier(0.55, 0.05, 0.3, 1);
}
.stmt-scrub .marker { --mark: 0%; }
.stmt-scrub .marker.is-on { --mark: 100%; }
.stmt-scrub .marker.is-on .w { opacity: 1 !important; transition: opacity 0.25s linear var(--d, 0s); }

.stmt-scrub .statement-pin { height: 220vh; }
.stmt-scrub .statement-pin .statement {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 16px);
}

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.how { padding-top: 0; background: var(--bg); }
.how-film { display: grid; padding-top: var(--section); }
.how-film__head {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vw, 32px);
  text-align: center;
}
.how-film__head .sec-rule { margin-bottom: clamp(8px, 2vw, 24px); }
.how-film__line { display: block; }
.how-film__lead { margin-inline: auto; text-wrap: balance; }
.how-film__media {
  --tag-x: 41%;
  position: relative;
  width: 100%;
  margin: 8px auto 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}
.how-film__media :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}
.how-film__video { opacity: 0; transition: opacity 0.3s linear; }
.how-film.is-playing .how-film__video { opacity: 1; }
.how-film__tag {
  position: absolute;
  left: var(--tag-x);
  bottom: var(--tag-bottom, 63%);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 28px -14px rgba(21, 21, 21, 0.5);
}
.how-film__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(210, 237, 40, 0.18);
  animation: dot-breathe 2.6s var(--ease-io) infinite;
}
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(210, 237, 40, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(210, 237, 40, 0.08); }
}
@media (min-width: 700px) {
  .how-film__media {
    --tag-x: 37%;
    --tag-bottom: 74%;
    aspect-ratio: 16 / 5.94;
    margin-top: 0;
  }
  .how-film__media :is(img, video) { object-position: 50% 50%; }
}

/* The day: a dark card, the copy beside a line from morning to night. */
.day {
  --D: 6.5s;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--r-xl);
  background: var(--feature);
  color: var(--on-feature);
}
.day > * { position: relative; z-index: 1; }
.day__copy { display: grid; align-content: start; gap: 16px; }
.day__title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.day__copy p:last-child { max-width: 40ch; color: var(--on-feature-2); font-size: 1.0625rem; }
.day__line {
  display: grid;
  grid-template-columns: auto 2px 1fr;
  column-gap: clamp(16px, 2vw, 24px);
  height: clamp(340px, 32vw, 420px);
}
.day__marks { position: relative; }
.day__marks li {
  position: absolute;
  right: 0;
  top: calc(var(--s) * 100%);
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  line-height: 1;
}
.day__marks::before {
  content: "Afternoon";
  visibility: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.day__track { position: relative; border-radius: 2px; background: var(--hair-dark); }
.day__seg {
  position: absolute;
  left: -1px;
  width: 4px;
  top: calc(var(--s) * 100%);
  height: calc((var(--e) - var(--s)) * 100%);
  border-radius: 2px;
  background: var(--lime);
  transform-origin: 50% 0;
}
.day__dot {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lime);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 7px rgba(210, 237, 40, 0.16), 0 0 22px rgba(210, 237, 40, 0.45);
}
.day__convos { position: relative; }
.day__convos li {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 100%);
  display: grid;
  gap: 2px;
  margin-top: -3px;
}
.day__convos p { max-width: 32ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.day__when { display: none; }
@media (max-width: 599px) {
  .day__line { grid-template-columns: 2px 1fr; height: 440px; }
  .day__marks { display: none; }
  .day__when {
    display: block;
    margin-bottom: 2px;
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
  }
}
@media (min-width: 900px) {
  .day { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* --------------------------------------------------------------------------
   10. The device — the module, scrubbed by scroll
   -------------------------------------------------------------------------- */
/* A tall track with a screen pinned inside it. Scroll moves through the
   frames on the canvas (v5.js); until they're drawn the lit frame stands
   underneath. The copy sits low on the frame over a soft shade and the
   second line arrives with the light (.is-lit). */
.device { position: relative; background: var(--feature); color: #fff; margin-top: calc(var(--section) * -0.3); }
.device__pin { height: 280vh; }
.device__stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #1A120D;
}
.device__poster, .device__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.device__poster img { width: 100%; height: 100%; object-fit: cover; }
.device__canvas { opacity: 0; transition: opacity 0.5s linear; }
.device.is-live .device__canvas { opacity: 1; }
.device__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.74) 0%, rgba(8, 8, 8, 0.3) 38%, rgba(8, 8, 8, 0) 66%);
  pointer-events: none;
}
.device__copy {
  position: relative;
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  padding-bottom: clamp(36px, 8vh, 96px);
}
.device__copy .sec-rule { max-width: 100%; }
.device__title { max-width: 12ch; }
.device__lead {
  max-width: 36ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
  text-wrap: balance;
}
.js .device__title, .js .device__copy .sec-rule { opacity: 0; translate: 0 16px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.js .device.is-on :is(.device__title, .device__copy .sec-rule) { opacity: 1; translate: none; }
.js .device__lead { opacity: 0; translate: 0 14px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.js .device.is-lit .device__lead { opacity: 1; translate: none; }
/* Without the script, or with reduced motion, the lit frame simply shows at
   a comfortable height, the copy on it. */
html:not(.js) .device__pin { height: auto; }
html:not(.js) .device__stage { position: relative; height: auto; min-height: 70vh; }
@media (prefers-reduced-motion: reduce) {
  .device__pin { height: auto; }
  .device__stage { position: relative; height: auto; min-height: 70vh; }
  .device__canvas { display: none; }
  .js .device__title, .js .device__copy .sec-rule, .js .device__lead { opacity: 1; translate: none; }
}

/* --------------------------------------------------------------------------
   11. The app — three chapters: rows, a swipeable row on phones, one held
       tile on wide screens
   -------------------------------------------------------------------------- */
.app {
  --ui-ink: #151515;
  --ui-2: #61615C;
  --ui-3: #A3A39D;
  --ui-line: rgba(21, 21, 21, 0.07);
  --ui-track: #E8E8E6;
  --ui-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  background: var(--feature);
  color: var(--on-feature);
}
.app > .shell { position: relative; z-index: 1; }
.app + .section { position: relative; }
#use-cases { position: relative; z-index: 1; background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: calc(var(--r-xl) * -1); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tour { display: grid; gap: clamp(88px, 12vw, 160px); margin-top: clamp(48px, 7vw, 88px); }
.chap { scroll-margin-top: calc(var(--header-h) + 72px); }

.feat { display: grid; gap: 28px; align-items: center; }
.feat__copy { display: grid; gap: 14px; align-content: center; }
.feat__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-feature-2);
}
.feat__label span { color: var(--lime); font-variant-numeric: tabular-nums; }
.feat__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.feat__text { max-width: 36ch; color: var(--on-feature-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; }
@media (min-width: 1280px) {
  .feat { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: clamp(48px, 5vw, 80px); }
  .feat--flip { grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); }
  .feat--flip .feat__copy { order: 2; }
  .feat .stage { --rv-d: 120ms; }
}

/* Mirror's three parts, a list beside the phone. */
.mtab {
  position: relative;
  display: grid;
  width: 100%;
  padding: 14px 18px 14px 26px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--on-feature-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.mtab b { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.mtab:hover { color: #fff; }
.mtab.is-on { color: #fff; background: rgba(255, 255, 255, 0.06); }
.mtab::before, .mtab__time {
  content: "";
  position: absolute;
  left: 12px;
  top: 17px;
  bottom: 17px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.mtab.is-on::before { background: var(--lime); }
.mtab__time { background: var(--lime); transform: scaleY(0); transform-origin: top; }
.mtabs.is-playing .mtab.is-on::before { background: rgba(255, 255, 255, 0.14); }
.mtabs.is-auto .mtab.is-on .mtab__time { animation: mtab-fill var(--dwell, 6s) linear forwards; }
.mtabs.is-scrolled .mtab.is-on::before { background: rgba(255, 255, 255, 0.14); }
.mtabs.is-scrolled .mtab.is-on .mtab__time { transform: scaleY(var(--fill, 0)); }
@keyframes mtab-fill { to { transform: none; } }
.mtab__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.mtab.is-on .mtab__more { grid-template-rows: 1fr; }
.mtab__text { display: block; min-height: 0; overflow: hidden; color: var(--on-feature-2); font-size: 0.9375rem; line-height: 1.5; }
.mtab__text::before { content: ""; display: block; height: 4px; }
@media (min-width: 700px) {
  .mtabs { display: grid; gap: 2px; max-width: 30rem; margin-top: 10px; }
}
@media (max-width: 699px) {
  .mtabs {
    display: flex;
    gap: 2px;
    margin-top: 10px;
    padding: 4px;
    border-radius: 999px;
    background: #222222;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .mtab { flex: 1; justify-items: center; align-content: center; min-height: 40px; padding: 0 8px; border-radius: 999px; text-align: center; }
  .mtab b { font-size: 0.875rem; white-space: nowrap; }
  .mtab.is-on { background: rgba(255, 255, 255, 0.12); }
  .mtab::before, .mtab__more { display: none; }
  .mtab__time { left: 16px; right: 16px; top: auto; bottom: 5px; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
}

/* The stage: a raised tile the phone rises from, lit softly from above. */
.stage {
  container: stage / inline-size;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 32px 16px 0;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 80% at 50% -10%, #2E2E2E 0%, #222222 55%, #1C1C1C 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media (min-width: 700px) { .stage { padding-top: 44px; } }

.stage--deck { display: grid; justify-items: center; }
.mphone {
  --side-s: 0.96;
  --side-x: 0%;
  --side-r: 0deg;
  --side-o: 0;
  grid-area: 1 / 1;
  z-index: 1;
  transform-origin: 50% 100%;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.mphone.is-on { transition-delay: 0.2s; }
@container stage (min-width: 520px) {
  .mphone {
    --side-s: 0.86;
    --side-x: calc(93% + 14px);
    --side-r: 4deg;
    --side-o: 0.1;
    transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.9s cubic-bezier(0.6, 0, 0.3, 1);
  }
  .mphone.is-on { transition-delay: 0s; }
}
.mphone.is-on { z-index: 2; }
.mphone.is-wrap { z-index: 0; animation: mphone-wrap 0.9s linear; }
@keyframes mphone-wrap { 20%, 80% { opacity: 0; } }
.mphone:is(.is-next, .is-prev) { opacity: var(--side-o); cursor: pointer; }
.mphone.is-next { transform: translateX(var(--side-x)) rotate(var(--side-r)) scale(var(--side-s)); }
.mphone.is-prev { transform: translateX(calc(var(--side-x) * -1)) rotate(calc(var(--side-r) * -1)) scale(var(--side-s)); }
@media (hover: hover) {
  .mphone:is(.is-next, .is-prev):hover { opacity: calc(var(--side-o) + 0.14); }
}

/* Phones: the three chapters become a swipeable row of tiles. */
.tour-dots { display: none; }
@media (max-width: 699px) {
  .tour {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden; /* else a swipe can latch onto a vertical scroller */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .tour::-webkit-scrollbar { display: none; }
  .chap {
    flex: 0 0 min(calc(100vw - 2 * var(--gutter) - 16px), 400px);
    display: flex;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: #222222;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .feat { display: flex; flex-direction: column; align-items: stretch; gap: 22px; width: 100%; }
  .feat__copy { gap: 10px; padding: 26px 20px 0; }
  .feat__title { font-size: 1.625rem; }
  .feat__text { font-size: 1rem; }
  .chap .stage {
    flex: 1 0 min(46vh, 400px);
    flex: 1 0 min(46svh, 400px);
    padding: 0 20px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .js-anim .tour .rv { opacity: 1; translate: none; filter: none; }
  .tour-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
  .tour-dots i { width: 7px; height: 7px; border-radius: 999px; background: #3A3A3A; transition: width 0.3s var(--ease), background-color 0.3s var(--ease); }
  .tour-dots i.is-on { width: 22px; background: var(--lime); }
}

/* Wide screens (v5.js adds .is-held from 960px): the chapters' words scroll
   past on the left while their screens share one tile on the right, held. */
@media (min-width: 960px) {
  .tour.is-held {
    --held-ph: clamp(440px, calc(100vh - 250px), 600px);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 104px);
    row-gap: 0;
  }
  .tour.is-held :is(.chap, .feat) { display: contents; }
  .tour.is-held .feat__copy { grid-column: 1; min-height: 80vh; padding-block: 6vh; }
  .tour.is-held .chap:nth-child(1) .feat__copy { grid-row: 1; }
  .tour.is-held .chap:nth-child(2) .feat__copy { grid-row: 2; }
  .tour.is-held .chap:nth-child(3) .feat__copy { grid-row: 3; }
  .tour.is-held { grid-template-rows: auto auto calc(80vh + 2 * var(--mirror-step)); --mirror-step: 70vh; }
  .tour.is-held .chap:nth-child(3) .feat__copy {
    align-self: start;
    position: sticky;
    top: 10vh;
  }
  .app .tour.is-held .chap .stage {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
    position: sticky;
    top: max(calc(var(--header-h) + 16px), calc(50vh - var(--held-ph) / 2));
    z-index: 1;
    opacity: 0;
    translate: none;
    filter: none;
    pointer-events: none;
    transition: opacity 0s linear 0.5s;
  }
  .app .tour.is-held .chap.is-at .stage {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s var(--ease);
  }
  .tour.is-held .ui-phone { --ph: var(--held-ph); }
}

/* --- App UI, rebuilt ----------------------------------------------------- */
.ui-phone {
  --pw: 330px;
  --ph: 540px;
  position: relative;
  width: min(var(--pw), 100%);
  height: var(--ph);
  margin-bottom: -40px;
  padding: 9px 9px 0;
  border-radius: 50px 50px 0 0;
  background: #0B0B0B;
  box-shadow: inset 0 0 0 1.5px #343434, inset 0 0 0 3px #0B0B0B, 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
@container stage (min-width: 520px) { .ui-phone { --pw: 360px; --ph: 600px; } }
.ui-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 41px 41px 0 0;
  background: #fff;
  color: var(--ui-ink);
  font-size: 15px;
  line-height: 21px;
}
.ui-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 2px 22px 0 30px;
}
.ui-status b { font-size: 15px; font-weight: 600; }
.ui-status svg { width: 62px; height: 11px; fill: currentColor; }
.ui-island { position: absolute; left: 50%; top: 9px; width: 92px; height: 27px; margin-left: -46px; border-radius: 14px; background: #000; }
@container stage (max-width: 300px) { .ui-island { width: 64px; margin-left: -32px; } }
.ui-bar { display: flex; align-items: center; justify-content: flex-end; height: 46px; padding: 0 14px; }
.ui-bar--split { justify-content: space-between; }
.ui-capsule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07), 0 6px 14px -6px rgba(0, 0, 0, 0.14);
}
.ui-capsule svg, .ui-round svg { width: 16px; height: 16px; fill: currentColor; }
.ui-capsule i { width: 5px; height: 5px; border-radius: 50%; background: var(--ui-3); }
.ui-capsule__sep { width: 1px; height: 16px; background: rgba(21, 21, 21, 0.1); }
.ui-round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07), 0 6px 14px -6px rgba(0, 0, 0, 0.14);
}

.ui-body { display: grid; gap: 14px; align-content: start; padding: 4px 18px 0; }
.ui-body--top { padding-top: 14px; }
.ui-group { display: grid; gap: 6px; }
.ui-h1 { font-size: 26px; line-height: 31px; font-weight: 700; }
.ui-h2 { font-size: 19px; line-height: 25px; font-weight: 700; }
.ui-h2--section { margin-top: 8px; }
.ui-p { font-size: 15px; line-height: 22px; }
.ui-sub { font-size: 14px; line-height: 20px; color: var(--ui-2); }
.ui-lede { font-size: 16px; line-height: 24px; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-eyebrow { font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-2); }
.ui-link { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 600; }
.ui-link svg { width: 16px; height: 16px; }
.ui-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}
.ui-tile {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow);
}

.ui-days { display: grid; gap: 12px; margin-top: 2px; }
.ui-day { display: flex; gap: 10px; }
.ui-day__date { flex: none; display: flex; flex-direction: column; align-items: center; width: 34px; }
.ui-day__date small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-2); }
.ui-day__date b { font-size: 20px; line-height: 26px; font-weight: 600; }
.ui-day__date::after { content: ""; flex: 1; width: 1px; margin-top: 8px; background: var(--ui-track); }
.ui-day__card {
  container: daycard / inline-size;
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow);
}
.ui-day__title { font-size: 16.5px; line-height: 21px; font-weight: 600; }
.ui-day__sum { font-size: 14.5px; line-height: 20px; color: var(--ui-2); }
.ui-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px; font-size: 12.5px; line-height: 17px; color: var(--ui-2); white-space: nowrap; }
.ui-meta svg, .ui-facts svg { flex: none; width: 15px; height: 15px; color: var(--ui-3); }
@container daycard (max-width: 248px) { .ui-meta__more { display: none; } }
@container daycard (max-width: 199px) { .ui-meta { white-space: normal; } }

.ui-insights { display: grid; gap: 8px; }
.ui-insight {
  display: grid;
  gap: 6px;
  padding: 14px 16px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow);
}
.ui-insight__name { display: flex; align-items: center; gap: 10px; font-size: 16.5px; line-height: 22px; font-weight: 600; }
.ui-insight__name::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--c); }
.ui-insight__text { font-size: 14.5px; line-height: 21px; }

.mphone .ui-screen { display: grid; grid-template-columns: minmax(0, 1fr); }
.mpanel { min-height: 100%; background: #fff; color: var(--ui-ink); }
.mpanel--dark { background: #151515; color: #fff; }
.mpanel > [role="img"] { display: flex; flex-direction: column; min-height: 100%; }
.ui-hero { display: grid; justify-items: start; padding: 14px 20px 0; }
.ui-who { display: flex; align-items: center; gap: 12px; }
.ui-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
}
.ui-who p { display: grid; }
.ui-who b { font-size: 22px; line-height: 27px; font-weight: 700; }
.ui-who p > span { font-size: 13.5px; line-height: 19px; color: var(--ui-3); }
.ui-portrait { margin-top: 18px; font-size: 21px; line-height: 28px; text-wrap: pretty; }
.ui-sheet { flex: 1; display: grid; gap: 4px; align-content: start; margin-top: 26px; padding: 22px 0 0; border-radius: 26px 26px 0 0; background: #fff; color: var(--ui-ink); }
.ui-sheet > .ui-h2 { padding: 0 20px 6px; font-size: 18px; }
.ui-area { display: grid; gap: 9px; padding: 14px 20px 15px; }
.ui-area + .ui-area { box-shadow: inset 0 1px 0 var(--ui-line); }
.ui-area__name { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 600; }
.ui-area__name::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--c); }
.ui-track { position: relative; height: 12px; }
.ui-track::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--ui-track); }
.ui-track__dot { position: absolute; top: 0; left: calc((100% - 12px) * var(--p)); width: 12px; height: 12px; border-radius: 50%; background: var(--ui-ink); }
.ui-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-2); }

.ui-goal { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 22px; font-weight: 600; }
.ui-goal svg { flex: none; width: 18px; height: 18px; }
.ui-progress { gap: 14px; padding: 20px 20px 18px; }
.ui-move { display: grid; gap: 7px; }
.ui-track--move { height: 16px; }
.ui-track--move::before { top: 7px; }
.ui-track__moved {
  position: absolute;
  top: 7px;
  left: calc((100% - 16px) * var(--from) + 8px);
  width: calc((100% - 16px) * (var(--to) - var(--from)));
  height: 2px;
  background: var(--ui-ink);
  transform-origin: left;
}
.ui-track__was { position: absolute; top: 0; left: calc((100% - 16px) * var(--from)); width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(21, 21, 21, 0.45); }
.ui-track--move .ui-track__dot { width: 16px; height: 16px; left: calc((100% - 16px) * var(--to)); }
.ui-legend { display: flex; gap: 14px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-2); }
.ui-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-ink); }
.ui-legend i.o { background: none; box-shadow: inset 0 0 0 1.5px rgba(21, 21, 21, 0.4); }

.ui-ask { gap: 16px; padding: 20px; }
.ui-ask__q { display: grid; gap: 8px; }
.ui-ask__fact { font-size: 19px; line-height: 25px; font-weight: 600; text-wrap: balance; }
.ui-ask__quote { font-size: 14.5px; line-height: 20px; color: var(--ui-2); }
.ui-ask__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-answer {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #F0F0F0;
  color: var(--ui-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.ui-answer svg { flex: none; width: 14px; height: 14px; }
.ui-answer--yes { background: var(--lime); }
.ui-facts { gap: 0; padding: 2px 0; }
.ui-facts li { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 18px; font-size: 14.5px; line-height: 20px; }
.ui-facts li + li { box-shadow: inset 0 1px 0 var(--ui-line); }
.ui-facts .ui-chip { flex: none; }
.ui-facts svg { margin-left: auto; }

.ui-ask [hidden] { display: none; }
.is-live .ui-answer { cursor: pointer; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.is-live .ui-answer:hover { background: #E6E6E3; }
.is-live .ui-answer--yes:hover { background: var(--lime); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(21, 21, 21, 0.5); }
.is-live .ui-answer:active { transform: scale(0.97); }
.ui-ask__q, .ui-ask__actions { transition: opacity 0.3s var(--ease), translate 0.3s var(--ease); }
.ui-ask.is-swapping .ui-ask__q { opacity: 0; translate: 0 -8px; }
.ui-ask__note { font-size: 15px; line-height: 21px; color: var(--ui-2); }
.ui-ask__again {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   12. Use cases
   -------------------------------------------------------------------------- */
.uc-grid { display: grid; gap: 20px; }
.uc {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--card);
  color: #fff;
}
.uc__media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.uc__media picture, .uc__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The photo is a little larger than its frame, so it can drift with the
   scroll (v5.js) and ease closer under the pointer without showing an edge. */
/* Each card sets its photo's focal point for the landscape crop (--pos)
   and for the portrait crop on phones (--pos-m). */
.uc__media img { object-fit: cover; object-position: var(--pos, 50% 30%); transform: scale(1.14); transition: transform 1.6s var(--ease); }
@media (max-width: 799px) { .uc__media img { object-position: var(--pos-m, var(--pos, 50% 30%)); } }
@media (hover: hover) { .uc:hover .uc__media img { transform: scale(1.2); } }
.uc::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.74), rgba(10, 10, 10, 0));
}
.uc__copy { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 8px; }
.uc__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.uc__title { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 800px) {
  .uc-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .uc { aspect-ratio: 16 / 11; }
  .uc__copy { left: 32px; right: 32px; bottom: 32px; }
}
/* Phones: a row to swipe, the next card's edge showing. */
@media (max-width: 799px) {
  .uc-grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .uc-grid::-webkit-scrollbar { display: none; }
  .uc { flex: 0 0 min(calc(100vw - 2 * var(--gutter) - 24px), 420px); scroll-snap-align: start; }
  .js-anim .uc-grid .rv { opacity: 1; translate: none; }
}

/* --------------------------------------------------------------------------
   13. Privacy — six tiles
   -------------------------------------------------------------------------- */
.privacy { padding-top: 0; }
.privacy__grid { display: grid; gap: 16px; }
.pcard {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  background: var(--card);
}
.pcard h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.pcard p { color: var(--ink-2); text-wrap: pretty; }
/* On the tile's ink circle, lime may be the icon. */
.pcard__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
}
.privacy__more { margin-top: clamp(28px, 3vw, 40px); }
@media (min-width: 700px) { .privacy__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .privacy__grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   14. Reserve
   -------------------------------------------------------------------------- */
.reserve { padding-top: 0; }
.preorder {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(12px, 1.6vw, 20px);
  border-radius: var(--r-xl);
  background: var(--feature);
  color: #fff;
}
.preorder > * { position: relative; z-index: 1; }
.pgal { display: grid; gap: 12px; }
.pgal__main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 8px);
  background: #222;
}
.pgal__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.pgal__frame.is-active { opacity: 1; }
.pgal__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* The photo on show drifts slowly closer. */
@media (prefers-reduced-motion: no-preference) {
  .pgal__frame.is-active img { animation: drift 9s linear forwards; }
}
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08); } }
.pgal__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pgal__thumbs button {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #222;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease);
}
.pgal__thumbs button img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pgal__thumbs button:hover { opacity: 0.85; }
.pgal__thumbs button.is-active { opacity: 1; outline: 2px solid var(--lime); outline-offset: 2px; }
/* While the gallery advances on its own, a lime line fills along the
   bottom of the photo on show, over its time. */
.pgal__time {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--lime);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.pgal.is-auto .pgal__thumbs button.is-active .pgal__time { opacity: 1; animation: pg-fill var(--dwell, 4s) linear forwards; }
@keyframes pg-fill { to { transform: none; } }

.preorder__copy { display: grid; gap: 18px; align-content: center; padding: clamp(12px, 3vw, 40px); }
.preorder__actions { display: grid; gap: 10px; }
.preorder__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.preorder__title { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.preorder__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: -4px; color: var(--on-feature-2); font-size: 1rem; }
.preorder__price b { color: #fff; font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.preorder__points { display: grid; gap: 10px; margin-block: 4px 8px; }
.preorder__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.preorder__points li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23151515' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
@media (min-width: 900px) {
  .preorder { grid-template-columns: 1.05fr 1fr; }
}

/* --------------------------------------------------------------------------
   15. Try the app
   -------------------------------------------------------------------------- */
.beta { padding-top: 0; }
.beta-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--card);
}
.beta__copy { display: grid; gap: 18px; align-content: center; padding: clamp(28px, 5vw, 72px) clamp(24px, 5vw, 72px) 8px; }
.beta__title { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.beta__lead { max-width: 42ch; color: var(--ink-2); font-size: 1.0625rem; }
.beta__form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 30rem; margin-top: 6px; }
.beta__input {
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.3s var(--ease);
}
.beta__input::placeholder { color: var(--ink-3); }
.beta__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.beta__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.beta__form .btn { flex: 0 0 auto; }
.beta__msg { flex-basis: 100%; padding-inline: 4px; font-size: 0.9375rem; font-weight: 600; }
.beta__msg:empty { display: none; }
.beta__form.is-done :is(.beta__input, .btn) { display: none; }
.beta__form.is-done .beta__msg { padding: 16px 22px; border-radius: 20px; background: #fff; font-size: 1rem; }
.beta__note { max-width: 44ch; color: var(--ink-2); font-size: 0.9375rem; }

.beta__devices {
  --ww: clamp(150px, 15vw, 200px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 36px 16px 0;
}
.beta__devices .ui-phone { --pw: 290px; --ph: 470px; flex: none; }
.watch {
  position: relative;
  z-index: 1;
  flex: none;
  order: -1;
  width: var(--ww);
  aspect-ratio: 560 / 880;
  margin: 0 calc(var(--ww) * -0.42) calc(var(--ww) * -0.17) 0;
  filter: drop-shadow(0 24px 30px rgba(21, 21, 21, 0.28));
}
.watch__bezel { position: relative; display: block; width: 100%; height: 100%; }
.watch__screen {
  position: absolute;
  left: 11.6%;
  top: 21%;
  width: 76.6%;
  height: 57.9%;
  overflow: hidden;
  border-radius: 22%;
  background: #000;
}
.watch__screen :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch__video { opacity: 0; transition: opacity 0.4s var(--ease); }
.watch.is-playing .watch__video { opacity: 1; }
.watch.is-playing .watch__still { opacity: 0; transition: opacity 0s linear 0.4s; }
@media (min-width: 900px) {
  .beta-card { grid-template-columns: 1fr 1fr; }
  .beta__copy { padding-bottom: clamp(28px, 5vw, 72px); }
  .beta__devices { padding-top: 56px; }
  .beta__devices .ui-phone { --pw: 320px; --ph: 520px; }
}
@media (max-width: 599px) {
  .beta__form .btn { width: 100%; }
  .beta__devices { --ww: min(124px, 32vw); padding: 28px 8px 0; }
  .beta__devices .ui-phone { --pw: min(252px, 66vw); --ph: 430px; }
  .beta__devices .ui-island { width: 64px; margin-left: -32px; }
}

/* --------------------------------------------------------------------------
   16. Compare
   -------------------------------------------------------------------------- */
.compare-sec { padding-top: 0; }
.compare-hint { font-size: 0.875rem; color: var(--ink-3); text-align: center; margin-bottom: 12px; }
.compare-scroll {
  position: relative; /* the containing block of the table's .sr-only labels */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.compare {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}
.compare th, .compare td { padding: 18px 16px; text-align: center; border-bottom: 1px solid var(--hair); }
.compare tbody th { text-align: left; font-weight: 600; padding-left: 0; width: 30%; }
.compare thead th { vertical-align: bottom; border-bottom: 0; padding-bottom: 20px; }
.col-name { display: block; font-size: 1.0625rem; font-weight: 700; }
.col-note { display: block; margin-top: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); line-height: 1.35; }
.compare .col-us { background: var(--feature); color: #fff; border-bottom-color: var(--hair-dark); }
.compare thead .col-us { border-radius: 22px 22px 0 0; padding-top: 24px; }
.compare thead .col-us .col-note { color: var(--on-feature-2); }
.compare tbody tr:last-child .col-us { border-radius: 0 0 22px 22px; border-bottom: 0; }
.yes, .half {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9375rem;
}
.yes { background: var(--lime); color: var(--ink); }
.half { background: var(--card); color: var(--ink-2); }
.no { color: #C4C4BF; font-weight: 700; }
.qual { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }
.compare__foot { margin-top: 20px; font-size: 0.8125rem; color: var(--ink-3); text-align: center; }
@media (min-width: 840px) { .compare-hint { display: none; } }

/* --------------------------------------------------------------------------
   17. Specs — the numbers, large
   -------------------------------------------------------------------------- */
.specs-sec { padding-top: 0; }
.specs { display: grid; gap: 20px; }
.specs__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-xl); background: var(--card); }
.specs__photo { position: absolute; inset: 0; will-change: transform; }
.specs__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.14); }
.specs__sheet {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  align-content: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--card);
}
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 36px) 24px; }
.num { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--hair); }
.num__v {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.num__v small { font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.num__u { font-weight: 600; }
.num p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; max-width: 26ch; text-wrap: pretty; }
.spec-list { display: grid; }
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  border-top: 1px solid var(--hair);
}
.spec-row:last-child { border-bottom: 1px solid var(--hair); }
.spec-row dt { color: var(--ink-2); }
.spec-row dd { font-weight: 600; text-align: right; }
@media (min-width: 900px) {
  .specs { grid-template-columns: 0.8fr 1.2fr; }
  .specs__media { aspect-ratio: auto; min-height: 100%; }
  .nums { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .nums { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* --------------------------------------------------------------------------
   18. FAQ — hairline rows
   -------------------------------------------------------------------------- */
.faq-sec { padding-top: 0; }
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 24px 60px 24px 0;
  font-size: 1.125rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--ink-2); }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item[open] summary::before { transform: rotate(180deg); }
.faq__body p { padding: 0 0 26px; color: var(--ink-2); max-width: 62ch; }
.faq__body a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__body { animation: faq-in 0.5s var(--ease); }
}
@keyframes faq-in { from { opacity: 0; translate: 0 -6px; } }

/* --------------------------------------------------------------------------
   19. Closing
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(120px, 16vw, 220px);
  background: var(--deep);
  color: #fff;
  text-align: center;
}
.closing__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 980px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210, 237, 40, 0.2), rgba(210, 237, 40, 0.05) 48%, rgba(210, 237, 40, 0) 72%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .closing__glow { animation: breathe 7s var(--ease-io) infinite alternate; }
}
@keyframes breathe {
  from { transform: scale(0.88); opacity: 0.75; }
  to { transform: scale(1.08); opacity: 1; }
}
.closing__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; }
.closing__title {
  font-size: clamp(3.25rem, 9.5vw, 8.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.closing__body { max-width: 40ch; font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.5; color: var(--on-feature-2); text-wrap: balance; }
.closing__actions { display: flex; justify-content: center; margin-top: 8px; }
.closing__fine { font-size: 0.875rem; font-weight: 600; color: var(--on-feature-2); }

/* --------------------------------------------------------------------------
   20. Footer — the wordmark as a signature
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--deep);
  color: #fff;
  padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--hair-dark);
}
.site-footer__inner { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 48px); }
.site-footer__mark { width: 100%; height: auto; }
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hair-dark);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.site-footer__links a { position: relative; color: var(--on-feature-2); font-weight: 500; transition: color 0.25s var(--ease); }
.site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.site-footer__links a:hover { color: #fff; }
.site-footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-footer__copy { font-size: 0.875rem; color: #6E6E69; }

/* --------------------------------------------------------------------------
   21. Motion
   -------------------------------------------------------------------------- */
/* Hidden states exist only under .js-anim, which v5.js adds itself: if the
   script never runs, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .rv {
    opacity: 0;
    translate: 0 30px;
    transition: opacity 1.1s var(--ease) var(--rv-d, 0ms), translate 1.1s var(--ease) var(--rv-d, 0ms), filter 1.1s var(--ease) var(--rv-d, 0ms);
  }
  .js-anim :is(.sec-head, .feat__copy, .num, .closing__inner).rv { filter: blur(10px); }
  .js-anim .rv.in { opacity: 1; translate: none; filter: none; }

  /* Hairlines draw themselves in. */
  .js-anim :is(.sec-rule.rv, .rv .sec-rule)::before { transform: scaleX(0); transition: transform 1.4s var(--ease) 0.1s; }
  .js-anim :is(.sec-rule.rv.in, .rv.in .sec-rule)::before { transform: none; }

  /* The hero: each headline line rises out of its baseline once the curtain
     has lifted (.is-ready), then the lead, the button and the fine print. */
  .js .hero__title .line__in { transform: translateY(112%); opacity: 0; }
  .js.is-ready .hero__title .line__in { animation: line-in 1.3s var(--ease) forwards; }
  .js.is-ready .hero__title .line:nth-child(2) .line__in { animation-delay: 0.1s; }
  .js.is-ready .hero__title .line:nth-child(3) .line__in { animation-delay: 0.2s; }
  .js :is(.hero__lead, .hero__actions, .hero__fine) { opacity: 0; translate: 0 16px; }
  .js.is-ready :is(.hero__lead, .hero__actions, .hero__fine) { animation: rise-soft 1.1s var(--ease) forwards; }
  .js.is-ready .hero__lead { animation-delay: 0.5s; }
  .js.is-ready .hero__actions { animation-delay: 0.6s; }
  .js.is-ready .hero__fine { animation-delay: 0.7s; }
}
@keyframes line-in { to { transform: none; opacity: 1; } }
@keyframes rise-soft { to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  .uc-grid > .rv:nth-child(2) { --rv-d: 90ms; }
  .uc-grid > .rv:nth-child(3) { --rv-d: 0ms; }
  .uc-grid > .rv:nth-child(4) { --rv-d: 90ms; }
  .privacy__grid > .rv:nth-child(2) { --rv-d: 90ms; }
  .privacy__grid > .rv:nth-child(3) { --rv-d: 180ms; }
  .privacy__grid > .rv:nth-child(5) { --rv-d: 90ms; }
  .privacy__grid > .rv:nth-child(6) { --rv-d: 180ms; }
  .nums > .rv:nth-child(3n + 2) { --rv-d: 90ms; }
  .nums > .rv:nth-child(3n) { --rv-d: 180ms; }
}
/* How it works: the headline rises with the arm, the pill appears once the
   arm has settled, and the day plays out along its line. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .how-film :is(.how-film__line, .how-film__lead) {
    opacity: 0;
    translate: 0 0.35em;
    filter: blur(6px);
    transition: opacity 0.9s var(--ease), translate 1s var(--ease), filter 0.9s var(--ease);
  }
  .js-anim .how-film.is-on :is(.how-film__line, .how-film__lead) { opacity: 1; translate: none; filter: none; }
  .js-anim .how-film.is-on .how-film__line:nth-child(2) { transition-delay: 0.9s; }
  .js-anim .how-film.is-on .how-film__lead { transition-delay: 1.7s; }
  .js-anim .how-film__poster { opacity: 0; transition: opacity 0.6s linear; }
  .js-anim .how-film.is-still .how-film__poster { opacity: 1; }
  .js-anim .how-film__tag { opacity: 0; translate: 0 8px; scale: 0.92; transition: opacity 0.5s var(--ease), translate 0.6s var(--ease), scale 0.6s var(--ease); }
  .js-anim .how-film.is-settled .how-film__tag { opacity: 1; translate: none; scale: 1; }

  .js-anim .day__dot { top: 0; }
  .js-anim .day.is-live .day__dot { top: 100%; transition: top var(--D) linear 0.5s; }
  .js-anim .day__seg { transform: scaleY(0); }
  .js-anim .day.is-live .day__seg {
    transform: none;
    transition: transform calc((var(--e) - var(--s)) * var(--D)) linear calc(0.5s + var(--s) * var(--D));
  }
  .js-anim :is(.day__convos li, .day__marks li) { opacity: 0; translate: 0 8px; }
  .js-anim .day.is-live :is(.day__convos li, .day__marks li) {
    opacity: 1;
    translate: none;
    transition: opacity 0.6s var(--ease), translate 0.7s var(--ease);
    transition-delay: calc(0.5s + var(--s) * var(--D));
  }
}
/* The app's screens come alive once their tile is in view. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim :is(.ui-day, .ui-insight) { opacity: 0; translate: 0 16px; transition: opacity 0.6s var(--ease), translate 0.7s var(--ease); }
  .js-anim .stage.in :is(.ui-day, .ui-insight) { opacity: 1; translate: none; }
  .js-anim .beta-card.in .ui-day { opacity: 1; translate: none; }
  .js-anim .ui-area .ui-track__dot { left: calc((100% - 12px) * 0.5); transition: left 1.1s var(--ease) 0.3s; }
  .js-anim .stage.in .mpanel.is-on .ui-area .ui-track__dot { left: calc((100% - 12px) * var(--p)); }
  .js-anim .ui-track__moved { transform: scaleX(0); transition: transform 1s var(--ease) 0.4s; }
  .js-anim .ui-track--move .ui-track__dot { left: calc((100% - 16px) * var(--from)); transition: left 1s var(--ease) 0.4s; }
  .js-anim .stage.in .mpanel.is-on .ui-track__moved { transform: none; }
  .js-anim .stage.in .mpanel.is-on .ui-track--move .ui-track__dot { left: calc((100% - 16px) * var(--to)); }
  .ui-facts li.is-new { animation: fact-in 0.6s var(--ease) both; }
  .ui-answer--yes.is-hint { animation: nudge 1.4s var(--ease) 0.2s 2; }
}
:is(.ui-day, .ui-insight):nth-child(1) { transition-delay: 0.3s; }
:is(.ui-day, .ui-insight):nth-child(2) { transition-delay: 0.42s; }
:is(.ui-day, .ui-insight):nth-child(3) { transition-delay: 0.54s; }
:is(.ui-day, .ui-insight):nth-child(4) { transition-delay: 0.66s; }
.ui-area:nth-child(2) .ui-track__dot { transition-delay: 0.4s; }
.ui-area:nth-child(3) .ui-track__dot { transition-delay: 0.5s; }
.ui-area:nth-child(4) .ui-track__dot { transition-delay: 0.6s; }
@keyframes fact-in { from { opacity: 0; translate: 0 -10px; } }
@keyframes nudge { 0%, 55%, 100% { transform: none; } 25% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}