/* ==========================================================================
   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: #6B6B65;
  --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: 1120px;
  --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: 165vh; }
/* The read-along holds a shorter band of the screen than before, so when
   it lets go the gallery is already rising under it: the statement reads
   as the gallery's title, not a section of its own. */
.stmt-scrub .statement-pin .statement {
  position: sticky;
  top: max(calc(var(--header-h) + 16px), 12vh);
  min-height: 72vh;
  min-height: 72svh;
  padding-block: 0;
}

/* --------------------------------------------------------------------------
   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);
}
/* From the band to the app, in one move: the photo on the app's ink, then
   the site's own phone lifting off the hand, turning to face us, and
   staying on the right while the features play. */
.bridge { position: relative; background: var(--bg); }
.bridge__stage { display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); padding: var(--section) var(--gutter) calc(var(--section) + var(--r-xl)); }
.bridge__title { text-align: center; text-wrap: balance; }
.bridge__win { width: min(100%, 960px); overflow: hidden; border-radius: var(--r-xl); background: var(--feature); }
.bridge__photo { display: block; width: 100%; height: auto; }
.bridge__phone, .bridge__ink { display: none; }
.bridge__copy { display: grid; gap: 20px; width: min(100%, 560px); }
.bridge__head { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.bridge__feats { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bridge__name { font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }

/* Live (v6.js adds .is-live): one pinned screen for the whole move. */
.bridge.is-live .bridge__pin { height: 480vh; height: 480svh; }
.bridge.is-live .bridge__stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.bridge.is-live .bridge__ink { display: block; position: absolute; inset: 0; background: var(--feature); opacity: var(--ink, 0); }
.bridge.is-live .bridge__title {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--header-h) + clamp(12px, 3vh, 40px));
  margin: 0;
  z-index: 2;
  opacity: calc(1 - var(--tt, 0));
  translate: 0 calc(var(--tt, 0) * -28px);
}
/* The window opens from a card to the whole screen (clip-path from v6.js);
   the photo inside it is placed by v6.js and sinks into the ink. */
.bridge.is-live .bridge__win { position: absolute; inset: 0; width: auto; border-radius: 0; background: var(--feature); }
.bridge.is-live .bridge__film { position: absolute; left: 0; top: 0; width: 2000px; height: 1131px; transform-origin: 1000px 565.5px; opacity: var(--po, 1); will-change: transform, opacity; }
.bridge.is-live .bridge__photo { width: 2000px; height: 1131px; }
/* The site's phone: a black body with the screen inside (360 x 780.5, the
   app screens' own proportions). v6.js maps it, in perspective, from the
   photo's phone to its place. */
.bridge.is-live .bridge__phone {
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 380px;
  height: 800.5px;
  transform-origin: 0 0;
  border-radius: 58px;
  background: #0B0B0B;
  box-shadow: inset 0 0 0 1.5px #2C2C2B, 0 50px 90px -40px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.bridge__glass { position: absolute; inset: 10px; overflow: hidden; border-radius: 48px; background: #F0F0F0; }
/* The next screen fades in over the last one, which only fades once it is
   covered, so the phone never shows an empty frame between screens. */
.bridge__ui { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s linear 0.45s; }
.bridge__ui.is-on { z-index: 1; opacity: 1; transition: opacity 0.45s var(--ease) 0s; }
.bridge__island { position: absolute; left: 50%; top: 11px; width: 104px; height: 30px; translate: -50% 0; border-radius: 999px; background: #050505; }
/* The features, on the left; the step's one bright with the lime bar. */
.bridge.is-live .bridge__copy {
  position: absolute;
  z-index: 3;
  left: max(var(--gutter), calc((100% - var(--shell, 1280px)) / 2 + var(--gutter)));
  top: 50%;
  width: min(40vw, 520px);
  translate: 0 calc(-50% + (1 - var(--cp, 0)) * 24px);
  opacity: var(--cp, 0);
  color: #fff;
  gap: clamp(24px, 4vh, 40px);
  pointer-events: none;
}
.bridge.is-live .bridge__feats { gap: clamp(14px, 2.4vh, 22px); }
.bridge.is-live .bridge__feat { position: relative; padding-left: 22px; opacity: 0.5; transition: opacity 0.4s var(--ease); }
.bridge.is-live .bridge__feat::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--lime); transform: scaleY(0); transform-origin: top; transition: transform 0.45s var(--ease); }
.bridge.is-live .bridge__feat.is-on { opacity: 1; }
.bridge.is-live .bridge__feat.is-on::before { transform: none; }
.bridge.is-live .bridge__feat .feat__label { margin-bottom: 6px; }
@media (max-width: 899px) {
  .bridge.is-live .bridge__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); width: auto; translate: 0 calc((1 - var(--cp, 0)) * 16px); gap: 14px; }
  .bridge.is-live .bridge__head { font-size: 1.5rem; }
  .bridge.is-live .bridge__feat { grid-area: 1 / 1; padding-left: 16px; opacity: 0; }
  .bridge.is-live .bridge__feat.is-on { opacity: 1; }
  .bridge.is-live .bridge__name { font-size: 1.25rem; }
}
/* The app continues on the same ink below: no card edge, no shadow. */
.bridge + .app { margin-top: 0; border-radius: 0; box-shadow: none; }
.bridge + .app { padding-top: clamp(24px, 4vw, 56px); }
.bridge + .app .grow { margin-top: 0; }

/* 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; }
/* The section after the app (the comparison) is a white card under it. */
.app + .section { 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); }
#use-cases { padding-top: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The app in five cards: number and name, a headline, and the phone rising
   from the foot of the card, cut off by it. A row that scrolls sideways,
   snapping card by card; the arrows and dots follow it (v6.js). The row
   bleeds to the screen's edges while the cards align to the content
   column (--edge), so a neighbour peeks in
   from the edge of the screen rather than being cut at the column. */
.arail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(400px, 80vw);
  gap: clamp(12px, 1.6vw, 20px);
  --edge: max(var(--gutter), (100vw - var(--shell)) / 2); /* screen edge to the content column */
  margin: clamp(48px, 7vw, 88px) calc(0px - var(--edge)) 0;
  padding-inline: var(--edge);
  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(--edge);
  scrollbar-width: none;
}
.arail::-webkit-scrollbar { display: none; }
.arail:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: var(--r-xl); }
.acard {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 36px);
  aspect-ratio: 600 / 872;
  overflow: hidden;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) 0;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 70% at 50% 0%, #282828 0%, #1F1F1F 60%, #1B1B1B 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  scroll-snap-align: start;
}
.acard__copy { display: grid; gap: 12px; }
.acard__title { font-size: clamp(1.625rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.acard__phone {
  position: relative;
  flex: none;
  align-self: center;
  width: 84%;
  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);
}
.acard__phone img { display: block; width: 100%; height: auto; border-radius: 41px 41px 0 0; background: #F0F0F0; }
.acard__island { position: absolute; z-index: 1; top: 19px; left: 50%; width: 31%; height: 27px; translate: -50% 0; border-radius: 999px; background: #000; }
.arail-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.arail-dots { display: flex; gap: 8px; }
.arail-dots i { width: 7px; height: 7px; border-radius: 999px; background: #3A3A3A; transition: width 0.3s var(--ease), background-color 0.3s var(--ease); }
.arail-dots i.is-on { width: 22px; background: var(--lime); }
.arail-btns { display: flex; gap: 10px; }
.arail-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #262626;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.arail-btn svg { width: 16px; height: 16px; }
.arail-btn:hover { background: #333; }
.arail-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.arail-btn[disabled] { opacity: 0.35; cursor: default; }
@media (max-width: 699px) {
  .arail-nav { justify-content: center; }
  .arail-btns { display: none; }
}

/* A screen from the app, as an image inside a phone; the island sits on it. */
.ui-screen img.ui-shot { display: block; width: 100%; height: auto; }
.grow__phone::after, .beta__devices .ui-phone::after { content: ""; position: absolute; z-index: 1; top: 19px; left: 50%; width: 31%; height: 26px; translate: -50% 0; border-radius: 999px; background: #000; }

.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: 58vh; padding-block: 6vh; transition: opacity 0.5s var(--ease); }
  /* The chapter whose screen is not showing steps back, like the Mirror's
     steps, so the bright words always match the phone. */
  .tour.is-held .chap:not(.is-at) .feat__copy { opacity: 0.3; }
  .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(88px, 10vw, 140px);
}
.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: #F0F0F0; clip-path: inset(0 round 41px 41px 0 0); }
.grow__phone::after { z-index: 2; }
.gscreen {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #F0F0F0;
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 20px;
}
/* The deck: three cards, one per month, stacked in the phone. The front
   one is the current month; the next waits behind it, peeking above; a
   done one slips away below. Each has its own small life once in front. */
.gdeck { position: relative; display: grid; place-items: center; height: 100%; padding: 64px 16px 48px; }
.gdeck__top { position: absolute; z-index: 1; top: 54px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ui-ink); }
.gdeck__top i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); font-size: 13px; font-style: normal; font-weight: 700; }
.gdk {
  --d: 0; /* distance from the front: 0 in front, 1 and 2 behind, -1 done */
  grid-area: 1 / 1;
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px 16px 17px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -18px rgba(0, 0, 0, 0.22);
  transform-origin: 50% 0;
  transition: transform 0.7s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease);
}
.grow[data-stage="1"] .gdk[data-k="2"], .grow[data-stage="2"] .gdk[data-k="3"] { --d: 1; }
.grow[data-stage="1"] .gdk[data-k="3"] { --d: 2; }
.grow[data-stage="2"] .gdk[data-k="1"], .grow[data-stage="3"] .gdk[data-k="1"], .grow[data-stage="3"] .gdk[data-k="2"] { --d: -1; }
.gdk { transform: translateY(calc(var(--d) * -16px)) scale(calc(1 - var(--d) * 0.06)); opacity: calc(1 - var(--d) * 0.45); filter: blur(calc(var(--d) * 0.6px)); z-index: calc(3 - var(--d)); }
.gdk[style*="--d: -1"], .grow[data-stage="2"] .gdk[data-k="1"], .grow[data-stage="3"] .gdk[data-k="1"], .grow[data-stage="3"] .gdk[data-k="2"] { transform: translateY(70%) rotate(-2deg) scale(0.96); opacity: 0; filter: none; pointer-events: none; }
.gdk > * { transition: opacity 0.4s var(--ease); }
.gdk:not(.is-at) > :not(.gdk__when):not(.gdk__head) { opacity: 0.55; } /* behind, the words wait */
.gdk__when { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-2); }
.gdk__head { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.gdk__ico { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--lime) center / 13px no-repeat; }
.gdk__ico--insight { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='6' r='3.2' fill='%23151515'/%3E%3Ccircle cx='11.5' cy='10.5' r='2' fill='%23151515'/%3E%3C/svg%3E"); }
.gdk__ico--you { background: #4A4A46 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.5' r='2.8' fill='%23fff'/%3E%3Cpath d='M3 13.5c.6-2.6 2.4-4 5-4s4.4 1.4 5 4' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat; }
.gdk__ico--focus { background: #5B4FD6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat; }
.gdk__ico--report { background: #5B4FD6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='8' width='2.4' height='5' rx='1' fill='%23fff'/%3E%3Crect x='6.8' y='5' width='2.4' height='8' rx='1' fill='%23fff'/%3E%3Crect x='10.6' y='2.5' width='2.4' height='10.5' rx='1' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat; }
.gdk__why, .gdk__since { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ui-ink); }
.gdk__why { padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.14); }
.gdk__since { color: var(--ui-3); font-weight: 500; }
.gdk__label { font-size: 11px; color: var(--ui-3); }
.gdk__text { font-size: 14px; line-height: 20px; }
.gdk__text b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gdk__quote, .gdk__note { color: var(--ui-2); }
.gdk__note { font-size: 12px; margin-top: -2px; }
/* Week 1: the softener gets a lime mark, swept on once the card is in front. */
.gdk__mark { color: inherit; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 60% / 0% 45%; padding: 0 2px; margin: 0 -2px; border-radius: 3px; transition: background-size 0.8s var(--ease) 0.5s; }
.gdk.is-at .gdk__mark { background-size: 100% 45%; }
/* Month 1: the question, answered; then the focus unfolds under it. */
.gdk__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.gdk__answer { display: grid; place-items: center; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(21, 21, 21, 0.14); font-size: 13px; font-weight: 600; transition: opacity 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.gdk__answer--yes { background: var(--lime); box-shadow: none; }
.grow.is-yes .gdk__answer:not(.gdk__answer--yes) { opacity: 0.35; }
.grow.is-yes .gdk__answer--yes { box-shadow: inset 0 0 0 2px var(--ui-ink); transform: scale(0.97); }
.gdk__focus { display: grid; gap: 6px; max-height: 0; margin-top: 0; padding: 0 12px; overflow: hidden; border-radius: 14px; background: #F4F4F1; opacity: 0; transition: max-height 0.6s var(--ease), padding 0.6s var(--ease), margin 0.6s var(--ease), opacity 0.5s var(--ease) 0.15s; }
.grow.is-yes .gdk__focus { max-height: 120px; margin-top: 6px; padding: 11px 12px 12px; opacity: 1; }
/* Month 3: the bars fill as the scroll plays, a light running along them;
   the weeks under them rise one by one. */
.gdk__rows { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #F0F0F0; }
.gdk__row { display: grid; grid-template-columns: 62px 1fr 18px; align-items: center; gap: 10px; font-size: 13px; }
.gdk__row--dim { color: var(--ui-3); }
.gdk__row b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gdk__bar { position: relative; height: 6px; border-radius: 3px; background: #E2E2DF; overflow: hidden; }
.gdk__bar::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--ui-ink); transform: scaleX(calc(var(--from) + (var(--to) - var(--from)) * var(--g, 1))); transform-origin: left; }
.gdk__row--dim .gdk__bar::after { background: #9A9A94; }
.gdk__bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 1; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: translateX(-120%); }
.gdk.is-at .gdk__bar::before { animation: bar-run 2.2s var(--ease-io) 0.8s infinite; }
@keyframes bar-run { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(260%); } }
.gdk__weeks { display: flex; align-items: flex-end; gap: 5px; height: 26px; padding: 0 2px; }
.gdk__weeks i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: #E2E2DF; transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease), background-color 0.4s var(--ease); }
.gdk__weeks i:last-child { background: var(--lime); }
.gdk.is-at .gdk__weeks i { transform: none; }
.gdk.is-at .gdk__weeks i:nth-child(1) { transition-delay: 0.3s; } .gdk.is-at .gdk__weeks i:nth-child(2) { transition-delay: 0.4s; } .gdk.is-at .gdk__weeks i:nth-child(3) { transition-delay: 0.5s; } .gdk.is-at .gdk__weeks i:nth-child(4) { transition-delay: 0.6s; } .gdk.is-at .gdk__weeks i:nth-child(5) { transition-delay: 0.7s; } .gdk.is-at .gdk__weeks i:nth-child(6) { transition-delay: 0.8s; }
/* The steps can be clicked to jump to their month. */
.grow.is-scrub .grow__step, .grow.is-scrub .grow__bar b { cursor: pointer; }
.grow.is-scrub .grow__step:hover { opacity: 0.75; }

/* Wide screens: the steps on the left, the tile on the right. Pinned, the
   pair holds the screen while the scroll plays 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: 230vh; }
  .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: 240vh; height: 240svh; }
  .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 */
  .grow.is-scrub .gdeck { padding: 56px 14px 60px; }
}

/* --------------------------------------------------------------------------
   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); }
/* Phones: a row to swipe, like use cases, the next tile's edge showing. */
@media (max-width: 699px) {
  .privacy__grid {
    position: relative;
    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;
  }
  .privacy__grid::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(calc(100vw - 2 * var(--gutter) - 40px), 360px); scroll-snap-align: start; }
  .js-anim .privacy__grid .rv { opacity: 1; translate: none; filter: none; }
}
@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: clamp(32px, 5vw, 72px); }
.rs__head { display: grid; gap: 20px; justify-items: center; margin-bottom: clamp(36px, 5vw, 64px); text-align: center; }
.rs__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.rs__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.rs__title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
.rs__lead { max-width: 36rem; color: var(--ink-2); font-size: clamp(1.0625rem, 1.4vw, 1.125rem); line-height: 1.5; text-wrap: balance; }
.rs__grid { display: grid; gap: clamp(16px, 2.2vw, 30px); }
.rs__photo { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-xl); background: var(--card); aspect-ratio: 5 / 4; }
.rs__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs__card { display: grid; gap: 26px; align-content: start; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--card-2); border-radius: var(--r-xl); background: #fff; }
.rs__name { padding-bottom: 26px; border-bottom: 1px solid var(--card-2); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.rs__pricing { display: grid; gap: 12px; justify-items: start; }
.rs__tag { padding: 6px 12px; border-radius: 999px; background: #F0F8C8; color: #4A5A00; font-size: 0.8125rem; font-weight: 600; }
.rs__price { display: flex; align-items: baseline; gap: 8px; }
.rs__price b { font-size: clamp(4rem, 6vw, 5.25rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; }
.rs__price span, .rs__then { color: var(--ink-2); font-size: 1.0625rem; }
.rs__then { margin-top: -4px; }
.rs__list { display: grid; margin: 0; padding: 0; list-style: none; }
.rs__list li { display: flex; align-items: center; gap: 12px; padding-block: 14px; font-size: 1.0625rem; font-weight: 500; }
.rs__list li + li { border-top: 1px solid var(--card-2); }
.rs__list li:first-child { padding-top: 0; }
.rs__list 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; }
.rs__list s { color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.rs__btn { justify-self: start; }
.rs__fine { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.rs__fine b { color: var(--ink); }
@media (min-width: 900px) {
  .rs__grid { grid-template-columns: 1fr 1fr; }
  .rs__photo { aspect-ratio: auto; min-height: 100%; }
}


/* Already here — the Watch app. A short card after the app, before the
   use cases: the beta is open today, before the bracelet ships. It rises
   over the app's ink with the rounded shoulders the use cases had, and
   the use cases rise over its foot the same way, so the foot keeps room. */
.early { position: relative; z-index: 1; margin-top: calc(var(--r-xl) * -1); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--bg); padding-top: calc(var(--section) + var(--r-xl)); padding-bottom: var(--r-xl); }
/* After the comparison (white), the Watch card is plain white flow: no
   rising shoulders, the usual section gap below for the use cases. */
.vs + .early { margin-top: 0; border-radius: 0; padding-top: 0; padding-bottom: var(--section); }
.early-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: var(--card);
}
.early .watch { --ww: clamp(132px, 13vw, 176px); order: 0; margin: 0; }
.early__copy { display: grid; gap: 14px; }
.early__title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.early__lead { max-width: 46ch; color: var(--ink-2); font-size: 1.0625rem; }
.early__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
@media (max-width: 599px) {
  .early-card { grid-template-columns: 1fr; justify-items: start; gap: 8px; }
  .early .watch { --ww: 120px; margin-left: -6px; }
  .early__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   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__note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.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. How it compares: not a recorder
   -------------------------------------------------------------------------- */
/* One rounded panel in two equal halves, the recorders on grey and Larkin
   on ink, with the same parts in the same places: the name, the devices
   on a stage of the same height under a status, then the same two rows.
   On wide screens the halves share their rows (subgrid), so each line
   sits level with the one it is compared with. */
.vs__panel { display: grid; border-radius: var(--r-xl); overflow: hidden; }
/* No gap between the parts: the stage's own height gives the devices
   their air, and each row's padding centres its title between its
   hairlines, so the rhythm is even top to bottom. */
.vs__side {
  display: grid;
  align-content: start;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(8px, 1.4vw, 20px);
}
.vs__side--them { background: var(--card); color: var(--ink); }
.vs__side--us {
  background:
    radial-gradient(46% 30% at 50% 38%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 100%),
    linear-gradient(165deg, #1D1D1C, #0E0E0D);
  color: #fff;
}
/* The message leads; who it is sits under it, quiet. Each is its own row,
   so both stay level across the halves even when one message wraps. */
.vs__name { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.vs__who { margin: 6px 0 0; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); }
.vs__side--us .vs__who { color: rgba(255, 255, 255, 0.56); }

/* The stage: the devices, centred, at the same height on both sides. */
.vs__stage { display: grid; place-items: center; min-height: clamp(190px, 21vw, 300px); }
.vs__devices { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); }
.vs__device { margin: 0; }
.vs__device img { display: block; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.22)); }
.vs__device--plaud img { width: clamp(84px, 8.4vw, 116px); }
.vs__device--pocket img { width: clamp(150px, 14.6vw, 200px); }
.vs__device--larkin img { width: clamp(240px, 25vw, 350px); filter: none; }

/* The rows, the same on both sides: a hairline, then one short line, a
   step below the names so they lead, centred between its hairlines. */
.vs__row {
  margin: 0;
  padding-block: clamp(15px, 1.5vw, 21px);
  border-top: 1px solid var(--hair);
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.vs__side--us .vs__row { border-top-color: rgba(255, 255, 255, 0.14); color: #fff; }

@media (min-width: 900px) {
  .vs__panel { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); }
  .vs__side { grid-row: span 6; grid-template-rows: subgrid; }
}

/* --------------------------------------------------------------------------
   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: 720px; 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: 34em; } /* about 68 characters a line (DM Sans's "ch" is its wide zero) */
.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: #8A8A84; }

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

/* --------------------------------------------------------------------------
   Moments — the story in pictures: a full-bleed row of big photographs,
   one moment of a day each, centred and snapping, the neighbours peeking
   in dimmed (v6.js). Each carries the insight Larkin drew from it.
   -------------------------------------------------------------------------- */
.moments { --mw: min(460px, 78vw); overflow: clip; padding-bottom: calc(var(--section) + var(--r-xl)); }
.moments .sec-head { margin-bottom: clamp(32px, 5vw, 56px); }
.moments__title span { display: block; color: var(--ink-3); }
.mrail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--mw);
  gap: clamp(12px, 1.6vw, 24px);
  padding-inline: calc((100% - var(--mw)) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mrail::-webkit-scrollbar { display: none; }
.mrail:focus-visible { outline: none; }
.mrail:focus-visible .moment { box-shadow: 0 0 0 3px var(--ink); }
/* Portrait cards: one situation each, the photo filling the card, the
   scene and the insight stacked at its foot. */
.moment {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--card);
  scroll-snap-align: center;
  transition: opacity 0.35s var(--ease);
}
.moment picture { position: absolute; inset: 0; }
.moment__img { width: 100%; height: 100%; object-fit: cover; }
/* Shade: a little at the top for the tag, more at the foot for the story. */
.moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 24%), linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 30%, transparent 66%); pointer-events: none; }
/* Frosted dark glass, shared by the tag and the illustration panel. */
.moment__tag, .mviz {
  background: rgba(10, 10, 10, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  color: #fff;
}
.moment__tag { position: absolute; z-index: 1; top: 20px; left: 20px; padding: 7px 13px; border-radius: 999px; background-color: rgba(10, 10, 10, 0.35); font-size: 0.875rem; font-weight: 500; line-height: 1.2; }
.moment__story { position: absolute; z-index: 1; inset: auto 24px 26px; display: grid; gap: 16px; color: #fff; }
.moment__line { font-size: clamp(1.25rem, 1.75vw, 1.5625rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.25); }
/* The insight, as the app shows it: a tile, a habit count, an "Is this
   you?" check or your focus, on dark glass, each under the same header,
   the area and its colour (Figma: Moments v2). */
.mviz { width: min(320px, 100%); display: grid; gap: 10px; padding: 16px; border-radius: 18px; }
.mviz__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8125rem; font-weight: 600; }
.mviz__head span { display: flex; align-items: center; gap: 8px; }
.mviz__head span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mviz__head small { font-size: 0.6875rem; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.mviz__pill { display: inline-flex; justify-content: center; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.75rem; font-weight: 500; font-style: normal; color: #fff; }
.mviz__pill.is-lime { background: var(--lime); color: var(--ink); }
.mviz__text { font-size: 0.8125rem; line-height: 1.4; color: #fff; text-wrap: pretty; }
.mviz__claim { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.mviz__quote { font-size: 0.8125rem; font-style: italic; line-height: 1.4; color: rgba(255, 255, 255, 0.65); }
.mviz__small { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.5); }
.mviz__count { display: grid; gap: 6px; }
.mviz__count p { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 500; }
.mviz__count b { font-weight: 600; }
.mviz__count i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) var(--w), rgba(255, 255, 255, 0.14) var(--w)); }
.mviz__count i.is-lime { background: linear-gradient(90deg, var(--lime) var(--w), rgba(255, 255, 255, 0.14) var(--w)); }
.mviz__count.is-dim p { opacity: 0.7; }
.mviz__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mviz__btns .mviz__pill { padding-block: 8px; }
.mviz__scale { display: grid; gap: 7px; }
.mviz__scale > p:first-child { font-size: 0.8125rem; font-weight: 500; }
.mviz__scale i { position: relative; display: block; height: 12px; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) center / 100% 2px no-repeat; }
.mviz__scale i::after { content: ""; position: absolute; top: 0; left: var(--x); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--lime); }
.mviz__scale > p:last-child { display: flex; justify-content: space-between; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.5); }
.mviz__scale .is-on { color: rgba(255, 255, 255, 0.9); }
.mviz__head span::before { flex: none; }
.mviz__next { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.mviz__next b { font-size: 0.6875rem; font-weight: 600; color: var(--lime); }
.mviz__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mviz__steps i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.mviz__steps i.is-lime { background: var(--lime); }
.mrail-nav { margin-top: clamp(20px, 3vw, 32px); }
.mrail-nav .arail-dots i { cursor: pointer; background: var(--card-2); }
.mrail-nav .arail-dots i.is-on { background: var(--ink); }
.mrail-nav .arail-btn { background: var(--card); color: var(--ink); box-shadow: none; }
.mrail-nav .arail-btn:hover { background: var(--card-2); }
.mrail-nav .arail-btn:focus-visible { outline-color: var(--ink); }
/* Desktop: medium landscape cards (3:2, about half the screen), the
   centre one in focus and its neighbours a little smaller as they slide
   away (--k, v6.js); the story bottom left (Figma option 3). */
@media (min-width: 900px) {
  .moments { --mw: min(760px, 70vw); }
  .moment { aspect-ratio: 3 / 2; scale: calc(1 - var(--k, 0) * 0.1); }
  .moment__story { inset: auto auto 24px 24px; width: min(412px, calc(100% - 48px)); }
  .moment__line { font-size: clamp(1.375rem, 1.9vw, 1.625rem); }
}
@media (max-width: 699px) {
  .moments { --mw: 84vw; }
  .moment { aspect-ratio: 2 / 3; }
  .moment__story { inset: auto 16px 18px; gap: 14px; }
}
/* v7: the bridge follows with its own top space, so no foot here. */
.moments { padding-bottom: 0; }

/* v7: the gallery joined to the statement above it. */
.moments--joined { padding-top: clamp(8px, 2vw, 24px); }

/* --------------------------------------------------------------------------
   The band, listening — between the gallery and the bridge: the band on
   its own, three real specs and the reserve button.
   -------------------------------------------------------------------------- */
.listen { padding-top: clamp(72px, 9vw, 128px); text-align: center; }
.listen__head { display: grid; gap: 18px; justify-items: center; }
.listen__title { max-width: 18ch; font-size: clamp(2rem, 3.9vw, 3.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
/* The band floats: a soft shadow sits well below it. */
.listen__media { position: relative; width: min(560px, 86%); margin: clamp(48px, 7vw, 90px) auto 0; padding-bottom: clamp(44px, 5.4vw, 66px); }
.listen__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.listen__media::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: clamp(18px, 2.4vw, 32px); border-radius: 50%; background: rgba(0, 0, 0, 0.16); filter: blur(clamp(12px, 1.6vw, 22px)); }
.listen__facts { display: grid; gap: 0; max-width: 1120px; margin: clamp(48px, 6vw, 70px) auto 0; padding: 0; list-style: none; }
.listen__facts li { display: grid; gap: 6px; justify-items: center; align-content: start; padding-block: 20px; border-top: 1px solid var(--card-2); }
.listen__facts b { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.listen__facts span { max-width: 26ch; color: var(--ink-2); font-size: 1rem; line-height: 1.45; text-wrap: balance; }
@media (min-width: 900px) {
  .listen__facts { grid-template-columns: repeat(3, 1fr); gap: 50px; }
}

/* --------------------------------------------------------------------------
   The app, as a grid (Figma: App grid v2 · 3): white page, grey tiles. A
   tall tile with the conversation screen and floating callouts, the hand
   photo and an "Is this you?" card beside it, then three small tiles.
   -------------------------------------------------------------------------- */
.agrid { background: var(--bg); padding-bottom: calc(var(--section) + var(--r-xl)); }
.agrid__head { margin-bottom: clamp(36px, 5vw, 64px); text-align: center; text-wrap: balance; }
.agrid__grid { display: grid; gap: 20px; }
.agrid__tile { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 28px; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-xl); background: var(--card); }
.agrid__copy { position: relative; z-index: 1; display: grid; gap: 10px; }
.agrid__eb { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.agrid__eb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.agrid__title { font-size: clamp(1.375rem, 1.8vw, 1.625rem); font-weight: 650; line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; }
.agrid__text { max-width: 36ch; color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
/* Tall tile: the phone with callouts floating over it. */
.agrid__tall { grid-template-rows: auto 1fr; align-content: stretch; padding-bottom: 0; }
.agrid__stage { position: relative; display: grid; justify-items: center; align-items: end; min-height: 460px; }
.agrid__phone { position: relative; align-self: end; width: min(320px, 78%); padding: 9px 9px 0; border-radius: 46px 46px 0 0; background: #0B0B0B; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.28); max-height: 620px; overflow: hidden; }
.agrid__phone img { display: block; width: 100%; height: auto; border-radius: 38px 38px 0 0; background: #F0F0F0; }
.agrid__phone i { position: absolute; top: 19px; left: 50%; width: 30%; height: 25px; translate: -50% 0; border-radius: 999px; background: #000; }
.agrid__call { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 14px; border-radius: 999px; background: #fff; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.16); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.agrid__call::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.agrid__call.is-lime::before { background: var(--lime); }
/* Day: the hand photo on ink, the title over it. */
.agrid__day { min-height: 340px; align-content: end; background: var(--feature); color: #fff; }
.agrid__day .agrid__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.agrid__day::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); }
.agrid__day .agrid__eb { color: rgba(255, 255, 255, 0.85); }
/* Small floating app cards. */
.agrid__card { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.08); }
.agrid__chead { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; }
.agrid__chead::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.agrid__chead.is-lime::before { background: var(--lime); }
.agrid__chead small { margin-left: auto; color: var(--ink-3); font-size: 0.75rem; font-weight: 400; }
.agrid__claim { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.agrid__quote { color: var(--ink-2); font-size: 0.875rem; font-style: italic; line-height: 1.4; }
.agrid__note { color: var(--ink-3); font-size: 0.75rem; }
.agrid__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agrid__pill { display: inline-flex; justify-content: center; padding: 7px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 0.8125rem; font-weight: 500; font-style: normal; white-space: nowrap; }
.agrid__pill.is-grey { background: var(--card); }
.agrid__asked { justify-self: end; width: min(300px, 100%); rotate: -3deg; }
.agrid__todo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.agrid__todo li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; background: #fff; }
.agrid__todo i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.agrid__todo span { display: grid; gap: 2px; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.agrid__todo small { color: var(--ink-3); font-size: 0.6875rem; font-weight: 400; }
.agrid__habit { display: grid; gap: 4px; }
.agrid__habit p { display: grid; grid-template-columns: 96px 1fr 14px; align-items: center; gap: 10px; color: var(--ink-2); font-size: 0.6875rem; }
.agrid__habit p:first-child { display: block; color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.agrid__habit i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--v), var(--card-2) var(--v)); }
.agrid__habit .is-dim { color: var(--ink-3); }
.agrid__habit .is-dim i { background: linear-gradient(90deg, #B5B5AF var(--v), var(--card-2) var(--v)); }
.agrid__habit b { font-weight: 600; }
.agrid__stat > p { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; }
.agrid__stat b { margin-right: 6px; color: var(--ink); font-size: 3.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.agrid__stat ul { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 10px; height: 120px; margin: 20px 0 0; padding: 0; list-style: none; }
.agrid__stat li { display: grid; justify-items: center; gap: 6px; }
.agrid__stat li i { width: 100%; height: calc(var(--h) * 1.6px); border-radius: 6px; background: #D9D9D5; }
.agrid__stat li.is-on i { background: var(--lime); }
.agrid__stat li span { color: var(--ink-3); font-size: 0.625rem; }
@media (min-width: 900px) {
  .agrid__grid { grid-template-columns: repeat(6, 1fr); }
  .agrid__tall { grid-column: 1 / span 3; grid-row: span 2; }
  .agrid__day, .agrid__ask { grid-column: 4 / span 3; }
  .agrid__ask { grid-template-columns: 1fr auto; align-items: center; align-content: center; }
  .agrid__small { grid-column: span 2; min-height: 420px; }
}
@media (max-width: 899px) {
  .agrid__stage { min-height: 400px; }
  .agrid__asked { justify-self: center; }
  .agrid__call:nth-of-type(2) { left: auto; right: 0; }
}
/* The app's ink (Mirror) rises over the grid's foot, as before. */
.agrid + .app { margin-top: calc(var(--r-xl) * -1); }

/* --------------------------------------------------------------------------
   App section, dark (Figma: App section · Recommended): an opening with the
   title on the left and a tilted wall of frosted app cards drifting on the
   right, then the grid on the app's ink with lime eyebrows.
   -------------------------------------------------------------------------- */
.agrid--dark { background: var(--feature); color: #fff; padding-top: 0; }
.aopen__eb { color: var(--lime); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.aopen__title { color: #fff; font-size: clamp(2.75rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.aopen__text { color: rgba(255, 255, 255, 0.65); font-size: 1.25rem; line-height: 1.45; }
.wcard { display: grid; gap: 14px; padding: 30px; border-radius: 34px; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 18px 40px -10px rgba(0, 0, 0, 0.35); color: var(--ink); }
.w460 { width: 460px; } .w500 { width: 500px; } .w520 { width: 520px; }
.wcard__head { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.wcard__head::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.wcard__big { font-size: 31px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.wcard__mid { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.wcard__sub { color: var(--ink-2); font-size: 18px; line-height: 1.35; }
.wcard__quote { color: var(--ink-2); font-size: 17px; font-style: italic; }
.wcard__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wcard__box, .wcard__item { display: grid; gap: 6px; padding: 20px 22px; border-radius: 22px; background: #fff; }
.wcard__box b { font-size: 29px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.wcard__box span, .wcard__item span { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9A9A94; font-size: 15px; line-height: 1.35; }
.wcard__item b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.wcard em { display: inline-flex; justify-content: center; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; font-style: normal; }
.wcard em.is-lime { background: var(--lime); }
.wcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wcard__btns em { padding-block: 16px; font-size: 17px; }
.wcard__meter { display: grid; gap: 8px; }
.wcard__meter p { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.wcard__meter b { font-weight: 600; } .wcard__meter span { color: #9A9A94; font-size: 14px; }
.wcard__meter i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--v), #E6E8E1 var(--v)); }
.wcard__num { color: #9A9A94; font-size: 18px; font-weight: 500; }
.wcard__num b { margin-right: 8px; color: var(--ink); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.wcard__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wcard__steps i { height: 10px; border-radius: 5px; background: #E6E8E1; } .wcard__steps i.is-on { background: var(--lime); }
/* The grid on ink. */
.agrid--dark .agrid__tile { background: #222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.agrid--dark .agrid__day { background: var(--feature); }
.agrid--dark .agrid__title { color: #fff; }
.agrid--dark .agrid__text { color: rgba(255, 255, 255, 0.65); }
.agrid--dark .agrid__eb { color: var(--lime); }
.agrid--dark .agrid__eb::before { display: none; }
.agrid--dark .agrid__card, .agrid--dark .agrid__todo li { color: var(--ink); }
.agrid--dark .agrid__stat > p { color: rgba(255, 255, 255, 0.65); }
.agrid--dark .agrid__stat b { color: #fff; }
.agrid--dark .agrid__stat li i { background: #3A3A3A; } .agrid--dark .agrid__stat li.is-on i { background: var(--lime); }
.agrid--dark .agrid__stat li span { color: rgba(255, 255, 255, 0.45); }
.agrid--dark .agrid__phone { box-shadow: inset 0 0 0 1.5px #3A3A3A, 0 24px 48px -16px rgba(0, 0, 0, 0.5); }
.agrid--dark + .app { margin-top: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 899px) {
      }

/* The app's card wall, in a tile (after HiDock's top tile): the wall is
   tilted and each column scrolls itself in a slow endless loop (every list
   is doubled, so moving it up by half its height starts it over seamlessly).
   v7.js runs it only while the tile is on screen; reduced motion keeps it still. */
.agrid--dark { padding-top: var(--section); }
.agrid__intro { display: grid; gap: 16px; max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.agrid__wall { min-height: 640px; align-content: end; background: #1C1C1C; }
.agrid__wall::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(28, 28, 28, 0.96) 0%, rgba(28, 28, 28, 0.7) 30%, transparent 55%), linear-gradient(transparent 60%, rgba(28, 28, 28, 0.9)); pointer-events: none; }
.wall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wall__tilt { position: absolute; left: 52%; top: 50%; display: flex; gap: 28px; align-items: flex-start; transform: translate(-50%, -50%) rotate(-28deg) scale(var(--ws, 0.62)); }
.wall__col { padding-top: var(--o); }
.wall__run { display: grid; gap: 28px; animation: wallrun var(--d, 50s) linear infinite; animation-play-state: paused; }
.agrid__wall.is-run .wall__run { animation-play-state: running; }
@keyframes wallrun { to { transform: translateY(calc(-50% - 14px)); } }
@media (prefers-reduced-motion: reduce) { .wall__run { animation: none; } }
.agrid__copy { position: relative; z-index: 1; }
.agrid__wall .agrid__copy { max-width: 420px; }
.agrid__list { position: absolute; z-index: 1; top: 24px; right: 24px; display: grid; gap: 10px; width: 280px; margin: 0; padding: 0; list-style: none; }
.agrid__list li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(34, 34, 34, 0.86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 1rem; font-weight: 600; }
.agrid__list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
@media (min-width: 900px) { .agrid__wall { grid-column: 1 / -1; } }
@media (max-width: 899px) {
  .agrid__wall { min-height: 560px; }
  .agrid__list { display: none; }
  .wall__tilt { --ws: 0.42; left: 50%; top: 40%; }
  .agrid__wall::after { background: linear-gradient(transparent 35%, rgba(28, 28, 28, 0.95) 72%); }
}

/* --------------------------------------------------------------------------
   The app, as a grid (Figma: App section v3 · Grey): grey page, white
   tiles, lime-dot eyebrows. Light key screens from the app.
   -------------------------------------------------------------------------- */
.ag { background: #F5F5F3; }
.ag__intro { display: grid; gap: 16px; max-width: 560px; margin-bottom: clamp(36px, 5vw, 56px); }
.ag__eb { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ag__eb::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.ag__h { font-size: clamp(2.5rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.ag__lead { color: var(--ink-2); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.45; }
.ag__grid { display: grid; gap: 20px; }
.ag__tile { position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; gap: 24px; padding: 32px; border-radius: var(--r-xl); background: #fff; }
.ag__copy { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; }
.ag__title { font-size: clamp(1.375rem, 1.8vw, 1.5rem); font-weight: 650; line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
.ag__text { max-width: 40ch; color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.ag__vis { display: grid; place-items: center; min-height: 0; }
.ag__card { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.05); }
/* Wide tile: the photo fills it; features top right; copy bottom left. */
.ag__hero { min-height: 600px; grid-template-rows: 1fr; align-content: end; padding: 36px; }
.ag__photo { position: absolute; left: 3.57%; top: -3.33%; width: 100%; height: auto; }
.ag__list { position: absolute; z-index: 1; top: 24px; right: 24px; display: grid; gap: 10px; width: 280px; margin: 0; padding: 0; list-style: none; }
.ag__list li { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #F5F5F3; font-size: 1rem; font-weight: 600; }
.ag__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.ag__ic svg { width: 20px; height: 20px; }
.ag__hero .ag__copy { max-width: 290px; align-self: end; }
/* The conversation screen in a phone. */
.ag__tall { grid-template-rows: auto 1fr; }
.ag__phone { width: min(275px, 72%); padding: 9px; border-radius: 46px; background: #0B0B0B; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25); }
.ag__phone img { display: block; width: 100%; height: auto; border-radius: 38px; }
.ag__goal { width: min(320px, 100%); border-radius: 20px; }
.ag__stack { display: grid; gap: 12px; align-content: center; }
/* Ask Larkin. */
.ag__chat { display: grid; gap: 10px; width: min(330px, 100%); }
.ag__q { justify-self: end; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; font-size: 0.875rem; font-weight: 500; }
.ag__a { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #F5F5F3; font-size: 0.875rem; line-height: 1.4; }
.ag__who { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; }
.ag__who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.ag__src { color: var(--ink-3); font-size: 0.6875rem; }
.ag__ask { justify-self: start; padding: 11px 16px; border-radius: 999px; background: var(--lime); font-size: 0.8125rem; font-weight: 500; }
/* The band, turning: four photos, three in view, the front one changes. */
.ag__turn { position: relative; width: 100%; height: 240px; }
.ag__turn img { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 22px; object-fit: cover; box-shadow: 0 16px 30px -8px rgba(0, 0, 0, 0.14); transition: transform 0.9s var(--ease-io), opacity 0.9s var(--ease-io); opacity: 0; transform: scale(0.7); }
.ag__turn img.is-c { z-index: 3; opacity: 1; transform: none; }
.ag__turn img.is-l { z-index: 2; opacity: 0.92; transform: translate(-66px, 8px) rotate(-8deg) scale(0.74); }
.ag__turn img.is-r { z-index: 2; opacity: 0.92; transform: translate(66px, 8px) rotate(8deg) scale(0.74); }
.ag__turn img.is-b { z-index: 1; opacity: 0; transform: scale(0.6); }
@media (min-width: 900px) {
  .ag__grid { grid-template-columns: repeat(6, 1fr); }
  .ag__hero { grid-column: 1 / -1; }
  .ag__tall { grid-column: 1 / span 3; grid-row: span 2; min-height: 880px; }
  .ag__mid { grid-column: 4 / span 3; min-height: 430px; }
  .ag__small { grid-column: span 2; min-height: 440px; }
}
@media (max-width: 899px) {
  .ag__hero { min-height: 0; grid-template-rows: auto auto; padding: 0 0 32px; }
  .ag__photo { position: static; width: 200%; max-width: none; height: 380px; margin-left: -50%; object-fit: cover; object-position: 50% 28%; }
  .ag__list { display: none; }
  .ag__hero .ag__copy { max-width: none; padding: 0 32px; }
  .ag__tile { min-height: 0; }
  .ag__phone { width: min(260px, 74%); }
}

/* Keeps a phrase on one line, so a title breaks between its sentences. */
.nowrap { white-space: nowrap; }
/* The comparison title keeps its first sentence whole, so on the
   narrowest phones it shrinks a touch rather than overflow. */
#vs-title { font-size: min(clamp(2.25rem, 4.9vw, 4.25rem), 9vw); }

/* The situation joins the line as its eyebrow, bottom left, and the
   insight card moves to the bottom right, so words and card sit side by
   side instead of stacking (Figma: Moments tile labels, option C). On
   phones the card stays above the words. */
.moment::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.3) 32%, transparent 60%); }
.moment__tag { position: static; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.moment__story { grid-template-columns: 1fr; }
.moment__story .mviz { order: -1; }
.moment__story .moment__tag { margin-bottom: -8px; }
@media (min-width: 900px) {
  .moment__story { inset: auto 24px 24px 28px; width: auto; grid-template-columns: minmax(0, 1fr) min(320px, 46%); grid-template-rows: 1fr auto auto; column-gap: 32px; row-gap: 10px; align-items: end; }
  .moment__story .mviz { order: 0; grid-column: 2; grid-row: 1 / 4; align-self: end; width: 100%; }
  .moment__story .moment__tag { grid-column: 1; grid-row: 2; margin: 0; }
  .moment__story .moment__line { grid-column: 1; grid-row: 3; }
}

/* --------------------------------------------------------------------------
   Connect: Larkin as the hub, ChatGPT and Claude linked to it by dotted
   curves, then one line on what it means. The hub is drawn on a 520 x 240
   grid and scales down with the screen.
   -------------------------------------------------------------------------- */
.mcp { margin-top: clamp(72px, 9vw, 120px); }
.mcp__inner { display: grid; justify-items: center; gap: clamp(14px, 1.6vw, 20px); text-align: center; }
.mcp__hub { position: relative; width: min(520px, 100%); aspect-ratio: 520 / 240; margin-bottom: clamp(20px, 3vw, 36px); }
.mcp__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mcp__links path { stroke: rgba(21, 21, 21, 0.25); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.mcp__app { position: absolute; display: grid; place-items: center; aspect-ratio: 1; border-radius: 24%; background: #fff; box-shadow: 0 0 0 1px rgba(21, 21, 21, 0.08), 0 14px 28px -10px rgba(0, 0, 0, 0.2); }
.mcp__app svg { width: 48%; height: 48%; }
.mcp__app--gpt { left: 10.4%; top: 14.2%; width: 13.85%; }
.mcp__app--claude { left: 75.8%; top: 14.2%; width: 13.85%; }
.mcp__app--larkin { left: 40%; top: 40.8%; width: 20%; background: var(--ink); }
.mcp__app--larkin svg { width: 100%; height: 100%; }
.mcp__title { max-width: 15em; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.mcp__sub { font-size: clamp(1rem, 1.25vw, 1.125rem); color: var(--ink-2); }