/* ==========================================================================
   Larkin — V6: the V5 premium cut with how it works told as one story.
   The same system as the homepage (DM Sans, white canvas, #151515 ink,
   #F0F0F0 cards, lime #D2ED28 for the one thing to press). Where V5 had
   the arm film, the day card and the module close-up, how it works is one
   continuous flow: a conversation, its sound streaming into the band, and
   insight about you coming out the other side (section 9).
   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 { 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; }
.header-actions .btn { transition: transform 0.6s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.6s var(--ease), opacity 0.3s var(--ease), scale 0.3s var(--ease), visibility 0s linear 0s; }
.site-header.cta-off .header-actions .btn { opacity: 0; scale: 0.94; visibility: hidden; pointer-events: none; transition: transform 0.6s var(--ease), opacity 0.25s var(--ease), scale 0.25s var(--ease), visibility 0s linear 0.25s; }
@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; }

@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); }
}

/* --------------------------------------------------------------------------
   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: one continuous flow
   -------------------------------------------------------------------------- */
/* Three parts in a row (a column on phones): the conversation, the band,
   the insights. v6.js draws the sound streaming from the picture into
   the band on the canvas over the stage, and sends each new insight out of
   the band into the stack (the cards all sit in the newest slot and move
   by class: born at the band, then slot 0, 1, 2, gone). Without it the
   parts stand still with three insights in their slots. */
.flow { background: var(--bg); }
.flow .lead { text-wrap: balance; }
/* Pinned on wide screens (v6.js adds .is-pinned when there is room): the
   words and the three parts hold on one screen while the scroll plays
   the flow; the insights' side waits until the first comes out. */
@media (min-width: 900px) {
  .flow.is-pinned { padding-block: 0; }
  .flow.is-pinned .flow__pin { height: 380vh; }
  .flow.is-pinned .flow__stick {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    height: 100svh;
    padding-top: var(--header-h);
  }
  .flow.is-pinned .sec-head { margin-bottom: clamp(20px, 4vh, 48px); }
  .flow.is-pinned .flow__stage { margin-top: 0; }
  .flow.is-pinned :is(.flow__label--out, .flow__out) { opacity: 0; transition: opacity 0.6s var(--ease); }
  .flow.is-pinned.is-out :is(.flow__label--out, .flow__out) { opacity: 1; }
  /* The title narrates: three pieces of one sentence that come on in
     turn and stay (v6.js sets .is-on), so the whole sentence stands at
     the end. Each piece is a line of its own, so what is shown is centred,
     and hidden pieces keep their space: the words never move. */
  .flow.is-pinned .flow__part { display: block; opacity: 0; filter: blur(6px); }
  .flow.is-pinned .flow__part.is-on { opacity: 1; filter: none; }
  /* The parts come on one at a time, the group centred at each step: the
     conversation alone, then with the band, then the whole row (v6.js
     sets --shift from where the parts are). */
  .flow.is-pinned .flow__stage { translate: var(--shift, 0px) 0; transition: translate 1s var(--ease-io); }
  .flow.is-pinned .flow__context { transition: scale 1s var(--ease-io); }
  .flow.is-pinned:not(.is-dev) .flow__context { scale: 1.1; }
  .flow.is-pinned :is(.flow__label--dev, .flow__device) { opacity: 0; translate: -28px 0; transition: opacity 0.7s var(--ease), translate 1s var(--ease-io); }
  .flow.is-pinned.is-dev :is(.flow__label--dev, .flow__device) { opacity: 1; translate: none; }
  /* At the pin's end the whole stage fades and lifts (--exit, v6.js) as
     the app's ink rises over it. */
  .flow.is-pinned .flow__stick > .shell { opacity: calc(1 - var(--exit, 0)); translate: 0 calc(var(--exit, 0) * -40px); }
}
.flow__title { max-width: 36ch; font-size: clamp(1.75rem, min(3.6vw, 5.2vh), 3.5rem); line-height: 1.06; text-wrap: balance; }
.flow__part { transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), translate 0.7s var(--ease); }
.flow__stage {
  --ch: 96px;
  --cgap: 12px;
  --dir: -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lctx" "ctx" "dev" "ldev" "lout" "out";
  row-gap: 14px;
  margin-top: clamp(40px, 6vw, 72px);
}
.flow__canvas { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.flow.is-live .flow__canvas { display: block; }
/* The words on the sound: short pieces of the conversation that travel
   with it into the module, placed every frame by v6.js. */
.flow__words { display: none; position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.flow.is-live .flow__words { display: block; }
.flow__word {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-2);
  opacity: 0;
  will-change: transform, opacity;
}

.flow__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.flow__label--ctx { grid-area: lctx; }
.flow__label--dev { grid-area: ldev; }
.flow__label--out { grid-area: lout; margin-top: 28px; }

/* The conversation: a picture with a name on it; the bars move while the
   flow runs. */
.flow__context {
  grid-area: ctx;
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: #1F1F1C;
}
.flow__context img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 45%; }
.flow__context figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
}
.flow__bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.flow__bars b { width: 2.5px; height: 100%; border-radius: 2px; background: var(--ink); transform: scaleY(0.25); transform-origin: center; }
.flow.is-in .flow__bars b { animation: flow-talk 0.72s var(--ease-io) infinite alternate; }
.flow__bars b:nth-child(1) { animation-delay: -0.1s; }
.flow__bars b:nth-child(2) { animation-delay: -0.45s; }
.flow__bars b:nth-child(3) { animation-delay: -0.25s; }
.flow__bars b:nth-child(4) { animation-delay: -0.6s; }
@keyframes flow-talk { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* The band, cut out with its shadow, over the sound: the waveform runs in
   behind the module's end. Its light breathes while the flow runs. */
.flow__device { grid-area: dev; position: relative; z-index: 2; width: min(100%, 460px); margin: 150px auto 0; }
.flow__device img { display: block; width: 100%; height: auto; }
.flow__glow {
  position: absolute;
  left: 52.45%;
  top: 56.7%;
  width: 2.6%;
  height: 11%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210, 237, 40, 0.55), rgba(210, 237, 40, 0));
  opacity: 0;
  pointer-events: none;
}
.flow.is-lit .flow__glow { animation: flow-breathe 2.6s var(--ease-io) infinite; }
@keyframes flow-breathe { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.85; } }

/* The insights: a stack of three slots. Every card sits in the newest slot
   and is moved by its class. */
.flow__out {
  grid-area: out;
  position: relative;
  z-index: 2;
  height: calc(3 * var(--ch) + 2 * var(--cgap));
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow__card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--ch);
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(21, 21, 21, 0.06);
  transition: transform 1s var(--ease), opacity 0.8s var(--ease);
  will-change: transform, opacity;
}
.flow__card p { font-size: 0.9375rem; line-height: 1.4; text-wrap: pretty; }
.flow__area { display: flex; align-items: flex-start; gap: 9px; font-weight: 600; }
.flow__area::before { content: ""; flex: none; width: 4px; height: 16px; margin-top: 0.15em; border-radius: 2px; background: var(--c); }
.flow__area > span { min-width: 0; }
.flow__where { color: var(--ink-3); font-weight: 500; }
.flow__card.is-s0 { z-index: 3; transform: none; opacity: 1; }
.flow__card.is-s1 { z-index: 2; transform: translateY(calc(var(--dir) * (var(--ch) + var(--cgap)))); opacity: 0.72; }
.flow__card.is-s2 { z-index: 1; transform: translateY(calc(var(--dir) * 2 * (var(--ch) + var(--cgap)))); opacity: 0.42; }
.flow__card.is-gone { z-index: 0; transform: translateY(calc(var(--dir) * 3 * (var(--ch) + var(--cgap)))); opacity: 0; }
.flow__card.is-off { opacity: 0; pointer-events: none; }
/* A card unfolds where the lines reach it (its top on phones, its left
   edge on wide screens). One taken back (scrolling up) folds away. */
.flow__card { transform-origin: var(--ox, 50%) var(--oy, 0%); }
.flow__card.is-born { z-index: 4; transform: scale(0.8); opacity: 0; transition: none; }
.flow__card.is-back { z-index: 4; transform: scale(0.8); opacity: 0; }
.flow:not(.is-live) .flow__card { box-shadow: inset 0 0 0 1px var(--hair); }

/* On phones the stack grows downwards from the newest slot, and the words
   ride the sound itself, as small pills over it. */
@media (max-width: 899px) {
  .flow__stage { --dir: 1; --ch: 92px; }
  /* No captions under the band on phones: the lines say it. */
  .flow__label--dev, .flow__label--out { display: none; }
  .flow__out { margin-top: 44px; }
  .flow__word {
    padding: 4px 10px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(21, 21, 21, 0.06);
    font-size: 0.75rem;
  }
  .flow__card p { font-size: 0.875rem; }
  .flow__card { padding: 12px 14px; }
}

/* Wide screens: the three parts in a row, the flow left to right. The
   stack sits with its newest slot level with the band; older insights rise. */
@media (min-width: 900px) {
  .flow__stage {
    grid-template-columns: minmax(240px, min(280px, 32vh)) minmax(0, 1fr) minmax(260px, min(320px, 36vh));
    grid-template-areas: "ctx dev out" "lctx ldev lout";
    column-gap: clamp(40px, 5vw, 64px);
    row-gap: 20px;
    align-items: center;
    padding-top: 96px;
  }
  .flow__context { aspect-ratio: 1 / 1; }
  .flow__label { text-align: center; }
  .flow__label--out { margin-top: 0; }
  /* The band sits at the right of its column: the sound gets the room,
     and air on both sides of the band. */
  .flow__device { width: min(100%, 420px); margin: 0 0 0 auto; }
  /* The newest slot is the bottom one, moved up to the band's height. */
  .flow__out { translate: 0 calc(-1 * (var(--ch) + var(--cgap))); }
  .flow__card { --ox: 0%; --oy: 50%; top: calc(2 * (var(--ch) + var(--cgap))); }
}

/* --------------------------------------------------------------------------
   10. 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);
}
/* The app rises over the story as an ink card with rounded shoulders. */
.app { position: relative; z-index: 2; margin-top: calc(var(--r-xl) * -1); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -30px 70px -36px rgba(0, 0, 0, 0.45); }
.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;
}
@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; }
}

/* 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; } }

/* Phones: the 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; }
  .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; }
  .app .tour.is-held .chap .stage {
    grid-column: 2;
    grid-row: 1 / 3;
    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; }

.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; }

/* --- Mirror, over time ---------------------------------------------------- */
/* One phone, three months. v5.js sets --gp (0 to 1) and data-stage (1-3) as
   the pin scrolls past; everything here follows those two. Without them the
   section shows month 3 and the steps as a list. */
.grow {
  --k: min(1, calc(var(--gp) / 0.85));
  margin-top: clamp(112px, 14vw, 200px);
}
.grow__head { display: grid; gap: 18px; max-width: 48rem; }
.grow__title { font-size: clamp(2.25rem, 5.2vw, 4.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.grow__stick { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 72px); }
.grow__bar { display: none; }

/* The steps: a line down their left, lime filling it as time passes. */
.grow__steps { position: relative; display: grid; gap: clamp(28px, 4vh, 48px); padding-left: 32px; }
.grow__steps::before, .grow__steps::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--hair-dark);
}
.grow__steps::after { background: var(--lime); transform: scaleY(var(--gp)); transform-origin: top; }
.grow__step { position: relative; display: grid; gap: 6px; transition: opacity 0.4s var(--ease); }
.grow__step::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3A3A3A;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.grow__when { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-feature-2); }
.grow__name { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.grow__text { color: var(--on-feature-2); font-size: clamp(1rem, 1.3vw, 1.1875rem); }
.grow:is([data-stage="1"], [data-stage="2"], [data-stage="3"]) [data-step="1"]::before,
.grow:is([data-stage="2"], [data-stage="3"]) [data-step="2"]::before,
.grow[data-stage="3"] [data-step="3"]::before { background: var(--lime); }
.grow[data-stage="1"] [data-step="1"]::before,
.grow[data-stage="2"] [data-step="2"]::before,
.grow[data-stage="3"] [data-step="3"]::before { box-shadow: 0 0 0 6px rgba(210, 237, 40, 0.18); }
.grow[data-stage="1"] [data-step="1"] .grow__when,
.grow[data-stage="2"] [data-step="2"] .grow__when,
.grow[data-stage="3"] [data-step="3"] .grow__when { color: var(--lime); }
.grow.is-scrub .grow__step { opacity: 0.3; }
.grow.is-scrub[data-stage="1"] [data-step="1"],
.grow.is-scrub[data-stage="2"] [data-step="2"],
.grow.is-scrub[data-stage="3"] [data-step="3"] { opacity: 1; }

/* The tile, with the counters across its top. */
.grow__stage { padding-top: 72px; }
.grow__count {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--on-feature-2);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grow__count > span:first-child { color: #fff; }
.grow__count b { color: #fff; font-weight: 700; }
.grow__count i { width: 4px; height: 4px; border-radius: 50%; background: #4A4A4A; }
.grow .ui-phone { --pw: 330px; --ph: 560px; }
/* The blur below spills past its own box, and Safari won't clip a filtered
   layer with overflow + border-radius alone: clip-path keeps it inside the
   rounded screen, and the dark backing stops a white halo at the edges. */
.grow .ui-screen { background: #151515; clip-path: inset(0 round 41px 41px 0 0); }

/* The screen: Mirror's dark top and white sheet. Its focus pulls in over
   the first weeks. */
.gscreen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #151515;
  color: #fff;
  filter: blur(calc(max(0, 0.3 - var(--gp)) * 9px));
}
.gportrait { display: grid; }
.gportrait .ui-portrait { grid-area: 1 / 1; opacity: 0; translate: 0 6px; transition: opacity 0.5s var(--ease), translate 0.6s var(--ease); }
.grow[data-stage="1"] .gportrait [data-v="1"],
.grow[data-stage="2"] .gportrait [data-v="2"],
.grow[data-stage="3"] .gportrait [data-v="3"] { opacity: 1; translate: none; }

/* Each scale starts as a wide, soft guess around a first estimate and
   closes into a point at its real value. */
.gtrack { --at: calc(var(--p0) + (var(--pf) - var(--p0)) * var(--k)); position: relative; height: 12px; }
.gtrack::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--ui-track); }
.gtrack__band {
  position: absolute;
  top: 0;
  left: calc((100% - 12px) * var(--at) + 6px);
  width: calc(12px + (1 - var(--k)) * 56%);
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  transform: translateX(-50%);
  filter: blur(calc((1 - var(--k)) * 4px));
  opacity: calc(1 - var(--k) * 0.85);
}
.gtrack__dot {
  position: absolute;
  top: 0;
  left: calc((100% - 12px) * var(--at));
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui-ink);
  filter: blur(calc((1 - var(--k)) * 2.5px));
  opacity: calc(0.35 + var(--k) * 0.65);
}

/* The cards that rise over the sheet: month 1 asks, month 3 reports. */
.gcard {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 56px; /* clear of the phone's foot, which the tile cuts off */
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  color: var(--ui-ink);
  box-shadow: inset 0 0 0 1px var(--ui-line), 0 -18px 40px -16px rgba(0, 0, 0, 0.45);
  transform: translateY(calc(100% + 72px));
  transition: transform 0.7s var(--ease);
}
.grow[data-stage="2"] .gcard--ask,
.grow[data-stage="3"] .gcard--goal { transform: none; }
.gcard .ui-ask__fact { font-size: 18px; line-height: 24px; }
.gcard .ui-answer { height: 40px; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.grow.is-yes .gcard .ui-answer:not(.ui-answer--yes) { opacity: 0.35; }
.grow.is-yes .gcard .ui-answer--yes { box-shadow: inset 0 0 0 2px var(--ui-ink); transform: scale(0.97); }
.gcard__added {
  display: flex;
  align-items: center;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13.5px;
  line-height: 18px;
  color: var(--ui-2);
  transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease);
}
.gcard__added svg { flex: none; width: 14px; height: 14px; color: var(--ui-ink); }
.gcard__added b { color: var(--ui-ink); }
.grow.is-yes .gcard__added { max-height: 24px; opacity: 1; }
.gcard--goal .ui-track__moved { transform: scaleX(var(--g, 1)); }
.gcard--goal .ui-track--move .ui-track__dot { left: calc((100% - 16px) * (var(--from) + (var(--to) - var(--from)) * var(--g, 1))); }

/* Wide screens: the steps on the left, the tile on the right. Pinned, the
   pair holds the screen while three tall screens of scroll play the months. */
@media (min-width: 960px) {
  .grow__stick { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 104px); align-items: center; }
  .grow .ui-phone { --pw: 360px; --ph: clamp(460px, calc(100vh - 260px), 620px); }
  .grow.is-scrub .grow__pin { height: 360vh; }
  .grow.is-scrub .grow__stick { position: sticky; top: 0; height: 100vh; margin-top: 0; padding-top: calc(var(--header-h) + 8px); }
}
/* Narrower: a bar of the three stops, the current step's words, the phone.
   Pinned the same way, a little shorter. */
@media (max-width: 959px) {
  .grow.is-scrub .grow__pin { height: 320vh; height: 320svh; }
  .grow.is-scrub .grow__stick {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    margin-top: 0;
    padding-top: 20px;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 16px;
  }
  .grow.is-scrub .grow__bar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-feature-2);
  }
  .grow__bar::before, .grow__fill {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--hair-dark);
  }
  .grow__fill { background: var(--lime); transform: scaleX(var(--gp)); transform-origin: left; }
  .grow__bar b:nth-of-type(2) { text-align: center; }
  .grow__bar b:nth-of-type(3) { text-align: right; }
  .grow:is([data-stage="1"], [data-stage="2"], [data-stage="3"]) .grow__bar b:nth-of-type(1),
  .grow:is([data-stage="2"], [data-stage="3"]) .grow__bar b:nth-of-type(2),
  .grow[data-stage="3"] .grow__bar b:nth-of-type(3) { color: var(--lime); }
  .grow.is-scrub .grow__steps { padding-left: 0; }
  .grow.is-scrub .grow__steps::before, .grow.is-scrub .grow__steps::after, .grow.is-scrub .grow__step::before { display: none; }
  .grow.is-scrub .grow__step { grid-area: 1 / 1; opacity: 0; }
  .grow.is-scrub .grow__when { display: none; }
  .grow.is-scrub .grow__name { font-size: 1.5rem; }
  .grow.is-scrub .grow__stage { min-height: 0; padding-top: 56px; }
  .grow.is-scrub .grow__count { top: 18px; }
  .grow.is-scrub .ui-phone { --pw: min(310px, 78vw); height: auto; } /* stretches to the tile, its foot cut off */
}

/* --------------------------------------------------------------------------
   11. 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; }
}

/* --------------------------------------------------------------------------
   12. 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); } }

/* --------------------------------------------------------------------------
   13. 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: rgba(255, 255, 255, 0.12) 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='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; /* lime stays the button's */
}
@media (min-width: 900px) {
  .preorder { grid-template-columns: 1.05fr 1fr; }
}

/* --------------------------------------------------------------------------
   14. 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; }
}

/* --------------------------------------------------------------------------
   15. 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; } }
/* Phones: the capability column stays put, narrow, while the rest scrolls
   under it; once scrolled, a soft fade on its right edge shows there's more
   beneath (v5.js sets is-scrolled). */
@media (max-width: 839px) {
  .compare-scroll { padding-inline: 0; }
  .compare { min-width: 700px; }
  .compare tbody th, .compare thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 140px;
    min-width: 140px;
    padding-left: var(--gutter);
    padding-right: 12px;
    background: var(--bg);
  }
  .compare tbody th { font-size: 0.875rem; line-height: 1.3; }
  .compare tbody th::after, .compare thead th:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 100%;
    width: 18px;
    background: linear-gradient(90deg, var(--bg), transparent);
    opacity: 0;
    transition: opacity 0.2s linear;
    pointer-events: none;
  }
  .compare-scroll.is-scrolled :is(tbody th, thead th:first-child)::after { opacity: 1; }
  .compare td:last-child, .compare thead th:last-child { padding-right: var(--gutter); }
}

/* --------------------------------------------------------------------------
   16. 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; }
}

/* --------------------------------------------------------------------------
   17. 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; } }

/* --------------------------------------------------------------------------
   18. 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); }

/* --------------------------------------------------------------------------
   19. 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; }

/* --------------------------------------------------------------------------
   20. 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; }
}
/* 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; }
}
: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; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}