/* heyeterna.com — the website's stylesheet, for every page but the invite
   flow (styles.css). The homepage is a scroll story: a sticky scene, a white
   clay phone standing still in the middle of its clay scene, the words
   changing as you scroll; the phone is sized to fit at every screen size, all
   five sets of words are stacked so nothing moves when they change, phones
   get their own layout, and every page ends with a clay footer that holds the
   legal pages. Colours come from the app's tokens (tokens.css, generated from
   theme.ts) where one exists. The website's decisions are recorded in
   docs/Website/README.md. */

/* Bricolage Grotesque, hosted here: the app's own files in assets/fonts/, with
   their licence, the SIL Open Font License, served beside them at
   /assets/fonts/OFL.txt (build.mjs deploys it because this comment names it).
   Google Fonts' own variable files, weights 400–700 and optical sizes 12–96,
   in its latin and latin-ext parts; a page only loads the part it uses. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url(./assets/fonts/BricolageGrotesque-latin.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
  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: 'Bricolage Grotesque';
  src: url(./assets/fonts/BricolageGrotesque-latin-ext.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
  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;
}

:root {
  /* The site's font: Bricolage Grotesque, chosen 30 Sep 2026 after trying
     Inter and the app's Uncut Sans. Its optical sizes draw big type narrower
     and tighter by themselves, so the big headlines need only a little
     negative letter-spacing (it was -.06em/-.055em in Uncut Sans). If the
     font ever changes, change these three together, and re-measure the
     creators title's size limit (.creators-title). */
  --font: 'Bricolage Grotesque', system-ui, sans-serif;
  --tracking-hero: -.03em;
  --tracking-title: -.025em;
  font-family: var(--font);
  font-optical-sizing: auto;
  color: var(--color-text-primary);
  background: var(--color-surface-quote);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  --ink: var(--color-text-primary);
  /* The page's side margin, shared by the header, the scene and the footer so
     they all end on one line. Past about 1780px it grows instead, which keeps
     the content 1600px wide. */
  --gutter: max(5vw, calc((100vw - 1600px) / 2));
  /* The sticky header's height. The story's scene sticks just under it. */
  --header-h: 98px;
  /* The wordmark's own colour (BRAND in src/components/EternaLogo.tsx). */
  --brand: #1a12a0;
  /* The phone is never taller than --phone-max, and never closer than
     --phone-gap to the edge of its scene. */
  --phone-max: 660px;
  --phone-gap: 36px;
  /* The site's soft clay blue: Journey's colours, and the colours of every
     pill and number bead outside the story (.eyebrow, .creators-steps). */
  --blue: #5e7dc8;
  --blue-deep: #3d5798;
  --blue-light: #a6bdf2;
  --blue-surface: #dde8ff;
  /* The paler end of the Plus page's blue tray. */
  --blue-surface-soft: #eef3ff;
  /* Per-feature colours; each [data-feature] below sets its own. These are
     Journey's, for pages without a feature (the legal pages' header). */
  --accent: var(--blue);
  --accent-deep: var(--blue-deep);
  --accent-light: var(--blue-light);
  --tag-surface: var(--blue-surface);
  --stage: #dfe9f7;
  /* Clay: a soft top highlight, a darker lower lip and a lifted shadow. */
  --clay-card: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(28, 23, 15, .06), 0 18px 40px -18px rgba(28, 23, 15, .28), 0 3px 8px rgba(28, 23, 15, .06);
  --clay-button: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -4px 0 rgba(0, 0, 0, .28), 0 10px 22px -10px rgba(28, 23, 15, .55);
  --clay-chip: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(28, 23, 15, .07), 0 4px 10px -4px rgba(28, 23, 15, .18);
  /* The app's own Clay/Surface, Clay/Raised and Clay/Pressed (src/theme/primitives.ts, `clay`). */
  --clay-surface: inset 1px 1px 2px rgba(255, 252, 245, .502), inset -1px -2px 3px rgba(28, 23, 15, .102), 0 2px 6px rgba(28, 23, 15, .102);
  --clay-raised: inset 2px 2px 4px rgba(255, 252, 245, .549), inset -2px -3px 6px rgba(28, 23, 15, .141), 0 6px 14px -2px rgba(28, 23, 15, .141), 0 2px 4px rgba(28, 23, 15, .059);
  --clay-pressed: inset 2px 3px 6px rgba(28, 23, 15, .078), inset -1px -2px 3px rgba(255, 252, 245, .639);
  /* The same light at bead size: a lit top-left rim, a darker lower lip and a
     small shadow under it. A dimple is Clay/Pressed made small: a hollow
     pressed into the page. */
  --clay-bead: inset 1.5px 1.5px 2px rgba(255, 252, 245, .45), inset -1.5px -2px 3px rgba(28, 23, 15, .2), 0 2px 4px rgba(28, 23, 15, .16);
  --clay-bead-small: inset 1px 1px 1px rgba(255, 252, 245, .5), inset -1px -1.5px 1.5px rgba(28, 23, 15, .2), 0 1px 2px rgba(28, 23, 15, .22);
  --clay-dimple: inset 1px 1.5px 2px rgba(28, 23, 15, .16), inset -1px -1px 1px rgba(255, 252, 245, .8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--color-surface-quote); }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--color-action-primary); outline-offset: 4px; border-radius: 10px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── One set of colours per feature ────────────────────────────────────── */
/* On <body> for the scene, and on each set of words, so the set that is
   fading out keeps its own colour.

   Five soft clay colours, one family (the website's own, 30 Sep 2026). All
   five have the same lightness and the same softness, OKLCH 60% / 0.12; only
   the hue changes, so no feature is louder than another. Journey's and
   Records' old blue and purple were (7.9:1 and 6.2:1 against the page).
     --accent        the big words, the beads and the dots: 3.4–3.8:1 on the
                     page, right for words this big, never for small ones
     --accent-deep   small words in the feature's colour, and the number bead
                     (OKLCH 47%): 5.3:1 or more on the pill
     --accent-light  the lit side of a bead (OKLCH 80%)
     --tag-surface   the pill (OKLCH 93%)
     --stage         the tray behind the clay scene
   Journey's colours are the site's blue (--blue and the rest, in :root). */

[data-feature=journey]   { --accent: var(--blue); --accent-deep: var(--blue-deep); --accent-light: var(--blue-light); --tag-surface: var(--blue-surface); --stage: #dfe9f7; }
[data-feature=manual]    { --accent: #bb6546; --accent-deep: #8d4226; --accent-light: #ebad97; --tag-surface: #fee1d7; --stage: #fbe3c9; }
[data-feature=records]   { --accent: #916cb9; --accent-deep: #69498c; --accent-light: #cab1e8; --tag-surface: #ede2fb; --stage: #e6e0f5; }
[data-feature=our-story] { --accent: #b75f84; --accent-deep: #893d5e; --accent-light: #e8a9c0; --tag-surface: #fcdfe9; --stage: #f6dde2; }
[data-feature=moonbun]   { --accent: #53924d; --accent-deep: #326a2d; --accent-light: #a1cb9c; --tag-surface: #dbeed9; --stage: #e2ead3; }

/* ── The scroll track and the sticky scene ─────────────────────────────── */

.scroll-story { height: 500svh; }

.scene {
  height: calc(100svh - var(--header-h));
  min-height: calc(640px - var(--header-h));
  position: sticky;
  top: var(--header-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  background:
    radial-gradient(ellipse at 30% 55%, rgba(245, 223, 204, .55) 0, transparent 55%),
    var(--color-surface-quote);
}

/* ── Header: a floating clay card ──────────────────────────────────────── */

/* Stuck to the top of every page. The solid cream band behind the card hides
   the page as it scrolls underneath. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--color-surface-quote);
}
/* The homepage has no band at all: the header card floats, and the opening's
   scene, then the rest of the page, scroll on behind it (Zairo, 2 Oct 2026).
   The other pages keep the solid band. */
.site-header.is-over-hero { background-color: transparent; }
.header-bar {
  flex: 1;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 12px 0 24px;
  border-radius: 22px;
  background: var(--color-surface-card);
  box-shadow: var(--clay-chip);
}
.brand { display: flex; padding: 0; border: 0; background: none; flex-shrink: 0; }
.brand img { display: block; width: 88px; height: auto; }

.feature-nav { display: flex; gap: 4px; align-items: center; }
.feature-nav :is(button, a) {
  border: 0;
  background: none;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .25s, color .25s;
}
.feature-nav :is(button, a):hover { color: var(--ink); background: var(--color-surface-quote); }
.feature-nav :is([aria-current=step], [aria-current=page]) { color: var(--ink); background: var(--tag-surface); font-weight: 600; }
/* Outside the story, no feature is the current one. */
body:not(.in-story) .feature-nav [aria-current=step] { color: var(--color-text-secondary); background: none; font-weight: 500; }

/* "Get app" is the app's own Button / Primary at its Small size
   (src/components/Button.tsx): a 40px pill, Primary/500, a 16px semibold
   Sand/0 label, Clay/Raised at rest, and Primary/600 with Clay/Pressed when
   pressed. The label and the clay phone in the left-icon slot are the
   website's (Zairo's picture, 30 Sep 2026). */
.header-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 20px 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-button-primary-fill);
  color: var(--color-button-primary-label);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--clay-raised);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.header-cta img { display: block; width: 28px; height: 28px; margin: -6px 0; }
.header-cta:hover { background: var(--color-button-primary-fill-pressed); }
/* Pressed, it also gives a little, like clay (the website's one addition). */
.header-cta:active { background: var(--color-button-primary-fill-pressed); box-shadow: var(--clay-pressed); transform: scale(.96); }
.header-cta:focus-visible { border-radius: var(--radius-pill); }

/* "Work with us" is the app's Button / Secondary at the same Small size: a
   white pill with a Primary/500 label and Clay/Surface, going White/100 with
   a Primary/800 label and Clay/Pressed when pressed. The clay video camera
   in front of the label is the website's highlight: the creators page's own
   picture, in the app's left-icon slot. On the creators page it stays
   pressed in, to say you are there. */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 18px 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-button-secondary-fill);
  color: var(--color-button-secondary-label);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--clay-surface);
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.header-link img { display: block; width: 28px; height: 28px; margin: -6px 0; }
.header-link:hover { color: var(--color-button-secondary-label-pressed); }
.header-link:active, .header-link[aria-current=page] { background: var(--color-button-secondary-fill-pressed); color: var(--color-button-secondary-label-pressed); box-shadow: var(--clay-pressed); }
.header-link:active { transform: scale(.96); }
.header-link:focus-visible { border-radius: var(--radius-pill); }

/* ── Two columns ───────────────────────────────────────────────────────── */

.hero-grid {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 54% 46%;
  padding: 14px 0 22px;
}

.visual-column { height: 100%; min-height: 0; padding-right: 2.4vw; }

.visual-stage {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 34px;
  background: var(--stage);
  box-shadow: var(--clay-card);
  transition: background .5s;
  isolation: isolate;
  /* The phone reads this box's size (cqh and cqw below) to fit inside it. */
  container-type: size;
}

/* The clay scene for each feature, stacked; only the active one shows. */
.scene-stack { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.scene-art.is-visible { opacity: 1; transform: scale(1); }
/* A soft rim, so the scene reads as a tray pressed into the page. */
.visual-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -40px 60px -30px rgba(28, 23, 15, .18);
}

/* ── The phone ─────────────────────────────────────────────────────────── */

/* A white clay phone, straight and centred: a chunky soft frame lit from the
   top left, with the screen pressed into it — the app's own Clay light and
   shadow (--elevation-* in tokens.css), made big. --ph is its full height:
   as tall as the scene allows, never taller than --phone-max. The frame, the
   corners and the light are all a share of it, so the phone keeps its shape
   at every size. */
.phone-wrap {
  --ph: min(var(--phone-max), calc(100cqh - 2 * var(--phone-gap)), calc((100cqw - 2 * var(--phone-gap)) * 2.174));
  --bezel: calc(var(--ph) * .028);
  --corner: calc(var(--ph) * .088);
  position: relative;
  z-index: 2;
  display: flex;
}

.phone-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ph) * -.03);
  width: 86%;
  height: calc(var(--ph) * .07);
  border-radius: 50%;
  background: rgba(28, 23, 15, .28);
  filter: blur(calc(var(--ph) * .032));
  transform: translateX(-50%);
}

.phone {
  position: relative;
  flex: none;
  height: calc(var(--ph) - 2 * var(--bezel));
  aspect-ratio: 1206 / 2622;
  box-sizing: content-box;
  padding: var(--bezel);
  border-radius: var(--corner);
  background:
    radial-gradient(90% 40% at 24% 4%, rgba(255, 253, 249, .95), rgba(255, 253, 249, 0) 72%),
    linear-gradient(165deg, #fcfaf6 0%, #f2ede4 56%, #e6dfd2 100%);
  box-shadow:
    inset calc(var(--ph) * .007) calc(var(--ph) * .008) calc(var(--ph) * .013) rgba(255, 252, 245, .95),
    inset calc(var(--ph) * -.008) calc(var(--ph) * -.012) calc(var(--ph) * .022) rgba(28, 23, 15, .15),
    0 calc(var(--ph) * .05) calc(var(--ph) * .09) calc(var(--ph) * -.03) rgba(28, 23, 15, .32),
    0 calc(var(--ph) * .008) calc(var(--ph) * .018) rgba(28, 23, 15, .1);
}
/* The side buttons: two small clay nubs pressed onto the frame. */
.phone::before, .phone::after {
  content: '';
  position: absolute;
  width: calc(var(--ph) * .013);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #f4efe7, #e3dbcc);
  box-shadow: inset 0 1px 1px rgba(255, 252, 245, .9), 0 1px 3px rgba(28, 23, 15, .18);
}
.phone::before { right: calc(100% - var(--ph) * .004); top: 20%; height: 8.5%; }
.phone::after { left: calc(100% - var(--ph) * .004); top: 28%; height: 10.5%; }

.screen-stack {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--corner) - var(--bezel));
  overflow: hidden;
  background: var(--color-surface-page);
}
/* The screen sits pressed into the clay, so its top edge falls in shade. */
.screen-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 calc(var(--ph) * .004) calc(var(--ph) * .01) rgba(28, 23, 15, .26), inset 0 0 0 1px rgba(28, 23, 15, .1);
}

.app-capture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.app-capture.is-visible { opacity: 1; }

/* Sized and placed to match the island baked into the two videos (275 × 80
   px on their 921-px-wide frames, 44 px from the top), so it sits level with
   the status bar's clock and signal row. The four screenshots do not carry
   an island, so this draws it. While a video is showing it steps aside,
   because the video has its own: two islands is one too many. */
.phone-island {
  position: absolute;
  z-index: 4;
  top: 2.2%;
  left: 50%;
  width: 30%;
  aspect-ratio: 275 / 80;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: #0e0e12;
  transition: opacity .4s ease;
}
.screen-stack:has(video.app-capture.is-visible) .phone-island { opacity: 0; }

/* Where you are, on screens too small for the side dots. */
.stage-dots {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--clay-surface);
}
/* Dimples and one clay bead, as on the side dots below. */
.stage-dots span { width: 7px; height: 7px; border-radius: 7px; background: var(--color-surface-sunken); box-shadow: var(--clay-dimple); transition: height .3s; }
.stage-dots span.is-visible { height: 18px; background: linear-gradient(150deg, var(--accent-light), var(--accent) 45%, var(--accent-deep)); box-shadow: var(--clay-bead-small); }

/* ── Words ─────────────────────────────────────────────────────────────── */

.copy-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0 3.6vw 0 4.2vw;
}

/* All five sets share one grid cell, so the cell is as tall as the tallest
   and the button under it never jumps. Only the active set shows. */
.copy-stack { display: grid; max-width: 540px; }
.copy-panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.copy-panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1) .1s, transform .45s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s;
}

/* Every pill above a title is soft clay. It wears the app's Clay/Raised (lit
   from the top left, a darker lip at the bottom right, a soft shadow under
   it) and catches a little more light on its top half. Every number in a
   circle is a clay bead. The story's take their feature's colour; the others
   (.eyebrow, .creators-steps) set the site's blue on themselves, so the
   story's colours, which change on <body> as it scrolls, never reach them. */
.tag, .eyebrow {
  border-radius: var(--radius-pill);
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 65%), var(--tag-surface);
  color: var(--accent-deep);
  box-shadow: var(--clay-raised);
}
.tag, .eyebrow { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tag-number, .creators-steps span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--accent) 0, var(--accent-deep) 65%);
  color: var(--color-text-inverse);
  text-shadow: 0 1px 1px rgba(28, 23, 15, .2);
  box-shadow: var(--clay-bead);
}

/* The story's pill, and the feature's number in it. */
.tag {
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  font-size: 13px;
}
.tag-number { width: 30px; height: 30px; font-size: 12px; letter-spacing: 0; }

.title {
  margin: 0 0 20px;
  font-size: clamp(44px, 4.9vw, 74px);
  line-height: 1.03;
  letter-spacing: var(--tracking-title);
  font-weight: 600;
  text-wrap: balance;
}
.title-accent { color: var(--accent); }

.body-copy {
  margin: 0 0 22px;
  max-width: 470px;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.facts li { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; }
/* Each fact starts with a clay bead in the feature's colour. */
.facts li::before {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--accent-light) 0, var(--accent) 50%, var(--accent-deep) 100%);
  box-shadow: var(--clay-bead-small);
  transform: translateY(1px);
}

/* My Manual lists its seven parts as clay chips instead of facts. */
.facts.is-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 500px; }
.facts.is-chips li {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  font-size: 14px;
  box-shadow: var(--clay-surface);
}
.facts.is-chips li::before { display: none; }

.actions { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* Apple's own badge, used exactly as Apple supplies it: no shadow, no colour
   change, no movement, never under 40px tall, and clear space around it of at
   least a quarter of its height (App Store Marketing Guidelines). */
.store-badge { display: inline-flex; flex: none; border-radius: 10px; }
.store-badge img { display: block; width: auto; height: 56px; }

.next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.next-link:hover { color: var(--accent-deep); }
/* On the last feature it keeps its space, so the button beside it stays put. */
.next-link.is-spent { visibility: hidden; }
.next-link span[aria-hidden] { color: var(--accent); }

/* ── Step dots on the right ────────────────────────────────────────────── */

/* As on the app's progress bar, the steps you are not on are dimples pressed
   into the page, and the one you are on rises out of it: a clay bead in the
   feature's colour. Each 9px dot sits in a 28px-wide button. 14.5px keeps the
   dots' right edge 24px inside the line the header and the footer end on. */
.side-steps { position: absolute; right: 14.5px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
/* Each button is its dot plus 8px above and below, so the long dot of the
   step you are on takes its own room: every dot sits the same 20px from the
   next, long or round (a fixed 28px button let the long dot spill into the
   gap below it, so it sat closer to the next one). */
.side-steps button { width: 28px; padding: 8px; border: 0; background: none; display: grid; place-items: center; }
.side-steps span { width: 9px; height: 9px; border-radius: 9px; background: var(--color-surface-sunken); box-shadow: var(--clay-dimple); transition: height .3s, background-color .2s; }
.side-steps button:hover span { background-color: var(--color-border-warm); }
.side-steps [aria-current=step] span { height: 24px; background: linear-gradient(150deg, var(--accent-light), var(--accent) 45%, var(--accent-deep)); box-shadow: var(--clay-bead-small); }

/* ── The bar under the scene ───────────────────────────────────────────── */

/* Three fixed columns, so the cue stays centred and the count stays right. */
.scene-bar {
  height: 56px;
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.bar-line { grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue { grid-column: 2; display: flex; gap: 10px; align-items: center; }
.scroll-cue span { color: var(--accent); font-size: 17px; }
.step-count { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 13px; }
#step-number { color: var(--accent-deep); font-weight: 600; }
.progress-track { width: 95px; height: 4px; border-radius: 4px; background: var(--color-border-divider); overflow: hidden; }
#progress-fill { display: block; width: 20%; height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s, background .4s; }

/* ── The opening ───────────────────────────────────────────────────────── */

/* One clay scene fills the whole opening, edge to edge, and reaches up
   under the header (which has no band on this page: .is-over-hero).
   The words sit on its open sky on the left, the couple on their bench sit
   just right of them, where nothing covers them, and the phone stands in
   the grass between the couple and the tree (Zairo, 2 Oct 2026: a phone in
   the middle looked awkward, and one at the far right left too wide a gap).
   The second column is the couple's, and the last one is the tree's: both
   are empty on purpose. The story below turns the sides around, so the
   page swings from side to side as it goes. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44% 14% 32% 1fr;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 14px) var(--gutter) 22px;
}
/* Anchored low and a little right of centre: a narrow screen trims the sky
   on the left a little more than the tree on the right, so the couple stay
   between the words and the phone. */
.hero-backdrop { position: absolute; inset: 0; z-index: -1; }
.hero-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 100%;
}
.hero-copy { align-self: center; padding: 0 4vw 0 0; }
.hero-title {
  margin: 0 0 22px;
  font-size: clamp(52px, 6.2vw, 96px);
  line-height: 1;
  letter-spacing: var(--tracking-hero);
  font-weight: 600;
  text-wrap: balance;
}
.hero-title span { color: var(--brand); }
.hero-lede {
  margin: 0 0 32px;
  max-width: 30em;
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1.6;
  text-wrap: pretty;
}
/* The App Store badge, and a quiet way down to How it works. */
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-more { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 16px; font-weight: 600; transition: color .2s; }
.hero-more span { display: inline-block; color: var(--brand); transition: transform .2s ease; }
.hero-more:hover { color: var(--brand); }
.hero-more:hover span { transform: translateY(3px); }

/* The beta couples' own words, one at a time. All three sentences sit in
   one place, so the card keeps the tallest one's height and never jumps. The
   couples' avatars (the same as under "From our beta testers") pick a
   couple; the one showing is in full colour. */
.hero-quote {
  max-width: 470px;
  margin: 40px 0 0;
  padding: 22px 24px 20px;
  border-radius: 26px;
  background: var(--color-surface-card);
  box-shadow: var(--clay-card);
}
.hero-quote blockquote { margin: 0; }
.hero-quote blockquote p { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.hero-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--color-text-secondary); font-size: 14px; }
.hero-quote strong { color: var(--ink); font-weight: 600; }
.hero-quote-stack, .hero-quote-names { display: grid; }
.hero-quote-stack > *, .hero-quote-names > * { grid-area: 1 / 1; }
/* Like a carousel: the words slide in from the side they come from (--dir,
   set by site.js) and out the other way. A finger can drag them sideways;
   the page still scrolls up and down. */
.hero-quote { --dir: 1; touch-action: pan-y; }
.hero-quote-stack > * { opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir) * 28px)); transition: none; }
.hero-quote-stack > .is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .12s, transform .55s cubic-bezier(.2, .7, .2, 1) .12s; }
.hero-quote-stack > .is-leaving { transform: translateX(calc(var(--dir) * -28px)); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.hero-quote-names > * { transition: opacity .35s ease .1s, visibility 0s; }
.hero-quote-names > :not(.is-active) { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.couple-picks { display: flex; flex: none; gap: 6px; }
.couple-picks button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #ebedff;
  box-shadow: inset 0 2px 5px rgba(28, 23, 15, .06), inset 0 -2px 0 rgba(255, 255, 255, .8);
  opacity: .5;
  transition: opacity .3s ease, transform .35s cubic-bezier(.3, .7, .3, 1.4);
}
.couple-picks button:nth-child(2) { background: #ffefe9; }
.couple-picks button:nth-child(3) { background: #fff5dc; }
.couple-picks img { display: block; width: 100%; height: 100%; }
.couple-picks button:hover { opacity: .8; }
.couple-picks button[aria-pressed=true] { opacity: 1; transform: scale(1.06); }
.couple-picks button:focus-visible { border-radius: 50%; outline-offset: 2px; }

/* No box any more: the phone stands straight in the scene's grass, on its
   own soft shadow. */
/* The opening's phone is 15% bigger than the story's (Zairo, 2 Oct 2026):
   713px at most, with a smaller margin round it so a laptop's height still
   lets it reach that. */
.hero-stage {
  grid-column: 3;
  --phone-max: 713px;
  --phone-gap: 26px;
  position: relative;
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  container-type: size;
}

/* Pause and play for the video in the phone: anything that moves on its own
   for more than a few seconds needs a way to stop it. site.js shows it. In
   the story it sits in the scene tray's corner; the opening's is placed
   below. */
.video-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23373328'%3E%3Crect x='6' y='5' width='4' height='14' rx='1.5'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: var(--clay-chip);
  transition: transform .15s;
}
.video-toggle.is-paused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23373328'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.2-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E"); }
.video-toggle:active { transform: scale(.94); }
/* The opening has no tray, so its button stands in the grass just right of
   the phone's foot. It is the stage's own child, so it measures the phone the
   way .phone-wrap does (the same --ph, from the stage's size): the phone is
   centred, .4902 of --ph wide, and --ph tall. It may reach --toggle-spill
   past the stage's right edge, into the tree's empty column; where even that
   is too narrow, it stops 4px short of that line (room for the focus ring)
   and overlaps the frame a little instead, so it is never cut off and never
   widens the page (PR #184 review). Layouts where the stage is the last
   column set the spill to 0. */
.hero-stage { --toggle-spill: 50px; }
.hero-stage .video-toggle {
  --ph: min(var(--phone-max), calc(100cqh - 2 * var(--phone-gap)), calc((100cqw - 2 * var(--phone-gap)) * 2.174));
  right: auto;
  left: min(calc(50% + var(--ph) * .2451 + 14px), calc(100% - 44px + var(--toggle-spill)));
  bottom: calc(50% - var(--ph) / 2);
}
.video-toggle:focus-visible { border-radius: 50%; }

/* ── The sections after the story ──────────────────────────────────────── */

.section { padding: clamp(72px, 9vw, 128px) var(--gutter) 0; }
.section:last-of-type { padding-bottom: clamp(72px, 9vw, 120px); }
/* The story starts right after How it works, so it needs room below it. */
#how-it-works { padding-bottom: clamp(72px, 9vw, 128px); }
.section-head { max-width: 780px; margin: 0 auto clamp(36px, 4.4vw, 60px); text-align: center; }
/* The pill above each section's title: the story's clay pill (.tag), in the
   site's blue. */
.eyebrow {
  --tag-surface: var(--blue-surface);
  --accent-deep: var(--blue-deep);
  display: inline-flex;
  margin: 0 0 18px;
  padding: 7px 16px;
  font-size: 12px;
}
.section-title {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: var(--tracking-title);
  font-weight: 600;
  text-wrap: balance;
}
.section-title span { color: var(--brand); }
.section-lede {
  margin: 18px auto 0;
  max-width: 34em;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}
.section-note { margin: 28px auto 0; color: var(--color-text-secondary); font-size: 14px; text-align: center; }

.card-grid {
  list-style: none;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.card {
  margin: 0;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 28px;
  background: var(--color-surface-card);
  box-shadow: var(--clay-card);
}
.card h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.card > p { margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.icon-tile {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 22px;
  border-radius: 30px;
  background: #ebedff;
  box-shadow: inset 0 2px 5px rgba(28, 23, 15, .06), inset 0 -2px 0 rgba(255, 255, 255, .8);
}
/* Light tints of the art's own blue, coral and gold (the app's icons). */
.card-grid > li:nth-child(2) .icon-tile { background: #ffefe9; }
.card-grid > li:nth-child(3) .icon-tile { background: #fff5dc; }
.icon-tile img { display: block; width: 86px; height: 86px; object-fit: contain; }
.card .step-number { margin: 0 0 6px; color: var(--blue-deep); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Research: the number first, then what it means, then where it comes from. */
.facts-grid { max-width: 1000px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card { display: flex; flex-direction: column; }
.stat-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 3vw, 36px);
  margin-bottom: 24px;
  padding: 22px 16px 16px;
  border-radius: 22px;
  box-shadow: inset 0 2px 6px rgba(28, 23, 15, .06), inset 0 -2px 0 rgba(255, 255, 255, .8);
}
.stat-stage--blue { background: #ebedff; }
.stat-stage--coral { background: #ffefe9; }
.stat-figure { flex: 0 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
.stat-figure img { display: block; width: auto; max-width: 100%; height: clamp(104px, 11vw, 150px); object-fit: contain; }
.stat-figure figcaption { margin-top: 8px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.source {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  color: var(--color-text-link);
  font-size: 14px;
  font-weight: 500;
}
.source:hover { text-decoration: underline; }
.source cite { font-style: italic; }

/* The couples' own words. */
.quote-card { display: flex; flex-direction: column; }
.quote-card blockquote { flex: 1; margin: 0 0 24px; }
.quote-card blockquote::before { content: '“'; display: block; height: 40px; color: var(--brand); font-size: 72px; line-height: 1; font-weight: 600; }
.quote-card blockquote p { color: var(--ink); font-size: 18px; line-height: 1.55; }
.quote-card figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--color-border-divider); }
/* Two of the app's own clay figures, in a round tile tinted like the icon
   tiles: blue, then coral, then gold. Their flat base sits just past the
   circle's bottom edge, where the curve hides it. */
.couple-avatar {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #ebedff;
  box-shadow: inset 0 2px 5px rgba(28, 23, 15, .06), inset 0 -2px 0 rgba(255, 255, 255, .8);
}
.card-grid > :nth-child(2) .couple-avatar { background: #ffefe9; }
.card-grid > :nth-child(3) .couple-avatar { background: #fff5dc; }
.couple-avatar img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.couple-name { display: grid; gap: 2px; min-width: 0; }
.couple-name strong { font-size: 16px; font-weight: 600; }
.couple-name span { color: var(--color-text-secondary); font-size: 14px; }

/* Privacy: the promise on the left, what it means on the right. */
.privacy-card {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 4.4vw, 64px);
}
.privacy-art { display: block; width: clamp(140px, 15vw, 200px); height: auto; margin: -8px 0 18px -8px; }
.privacy-intro .section-title { margin-bottom: 22px; }
.text-link { color: var(--color-text-link); font-size: 16px; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.privacy-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* An odd count (the Plus page has three promises) leaves the last one alone:
   give it the whole row instead of half a row and a hole. */
.privacy-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.privacy-list li {
  padding: 20px;
  border-radius: 22px;
  background: var(--color-surface-quote);
  box-shadow: inset 0 2px 5px rgba(28, 23, 15, .05), inset 0 -2px 0 rgba(255, 255, 255, .8);
}
.icon-tile--small { width: 64px; height: 64px; margin-bottom: 14px; border-radius: 20px; background: var(--color-surface-card); box-shadow: var(--clay-chip); }
.icon-tile--small img { width: 50px; height: 50px; }
.privacy-list h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.privacy-list p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }

/* Questions: each one opens in place. No script needed; site.js only slides
   the answer open and shut. */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border-radius: 22px; background: var(--color-surface-card); box-shadow: var(--clay-chip); }
.faq-item summary {
  /* The row's right padding. The plus (::before) sits over the circle there. */
  --toggle-inset: 22px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--toggle-inset) 20px 24px;
  border-radius: 22px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A clay bead in the site's blue, lit like the pills. The bead stays still,
   so its light never turns; only the plus in it (::before, drawn in
   --blue-deep, #3d5798) turns into a cross when the answer opens. */
.faq-item summary::after {
  content: '';
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 65%), var(--blue-surface);
  box-shadow: var(--clay-bead);
}
.faq-item summary::before {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--toggle-inset);
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d5798' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 13px no-repeat;
  transition: transform .25s;
}
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--color-action-primary); outline-offset: 2px; }
.faq-item p { margin: 0; padding: 0 24px 22px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.faq-item a { color: var(--color-text-link); border-bottom: 1px solid var(--color-border-link); }
/* The app's own button and row names, in Support's answers. */
.faq-item strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .privacy-card { grid-template-columns: 1fr; }
}

/* One column on phones; each card puts its picture beside its words. */
@media (max-width: 700px) {
  .section { padding-top: 64px; }
  .section:last-of-type, #how-it-works { padding-bottom: 64px; }
  .section-lede { font-size: 16px; }
  .card-grid, .facts-grid { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 22px; border-radius: 24px; }
  .card:has(> .icon-tile) { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .card > .icon-tile { grid-row: span 3; width: 76px; height: 76px; margin: 0; border-radius: 22px; }
  .card > .icon-tile img { width: 62px; height: 62px; }
  .card h3 { font-size: 19px; margin-bottom: 6px; }
  .card > p { font-size: 15px; }
  .quote-card blockquote p { font-size: 17px; }
  .couple-avatar { width: 54px; height: 54px; }
  .privacy-card { padding: 26px 22px; border-radius: 24px; }
  .privacy-list { grid-template-columns: 1fr; }
  .privacy-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .privacy-list .icon-tile--small { grid-row: span 2; width: 56px; height: 56px; margin: 0; border-radius: 18px; }
  .privacy-list .icon-tile--small img { width: 44px; height: 44px; }
  .stat-figure img { height: 96px; }
  .faq-item summary { --toggle-inset: 18px; padding: 18px var(--toggle-inset) 18px 20px; font-size: 16px; }
  .faq-item p { padding: 0 20px 20px; font-size: 15px; }
}

/* ── Creators: work with us ────────────────────────────────────────────── */

/* The words on the left, the form on the right; one column on phones. The
   fields are the app's own Input Field (src/components/Field.tsx): 52px tall,
   a 12px corner, pressed into the card (Clay/Pressed), with a 2px ring when
   focused (Primary/500) or wrong (Danger/500, and a note under it in
   Danger/700). The button is the app's Button / Primary at its Medium size. */
.creators-main { padding: 12px var(--gutter) clamp(72px, 9vw, 120px); }
.creators {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.creators-intro { position: sticky; top: calc(var(--header-h) + 24px); padding-top: clamp(8px, 2vw, 32px); container-type: inline-size; }
.creators-art { display: block; width: clamp(120px, 12vw, 168px); height: auto; margin: 0 0 10px -10px; }
.creators .section-title { margin-bottom: 20px; }
/* Always two lines: "Let's make something" never wraps, and "together." has
   its own line. The type is never bigger than the column divided by how many
   times wider than tall that first line is, with a little to spare. That is
   9.8 at most in Bricolage Grotesque, whose small sizes are the wide ones. */
.creators-title { font-size: min(clamp(36px, 4.6vw, 64px), 10cqi); white-space: nowrap; }
.creators-title span { display: block; }
.creators-lede { margin: 0 0 28px; max-width: 34em; color: var(--color-text-secondary); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.creators-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.creators-steps li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; }
/* 1, 2 and 3: clay beads like the story's numbers (.tag-number), in the
   site's blue. */
.creators-steps span {
  --accent: var(--blue);
  --accent-deep: var(--blue-deep);
  flex: none;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 700;
}

.creators-card { padding: clamp(24px, 3.2vw, 44px); }
.creator-form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.form-field { display: grid; align-content: start; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-field > label, .form-field > legend { padding: 0; color: var(--ink); font-size: 15px; line-height: 1.4; font-weight: 600; }
.form-field > legend { margin-bottom: 8px; }
.form-optional { margin-left: 6px; color: var(--color-text-secondary); font-size: 13px; font-weight: 500; }
.form-help { margin: 0; color: var(--color-text-secondary); font-size: 14px; }
.creator-form :is(input[type=text], input[type=email], select, textarea) {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--color-surface-quote);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: var(--clay-pressed);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .15s, background .15s;
  appearance: none;
}
.creator-form select { padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7362' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 18px center; background-size: 18px; background-repeat: no-repeat; cursor: pointer; }
.creator-form select:invalid { color: var(--color-text-secondary); }
.creator-form textarea { min-height: 128px; resize: vertical; }
.creator-form ::placeholder { color: var(--color-text-placeholder); opacity: 1; }
.creator-form :is(input, select, textarea):focus-visible { background-color: var(--color-surface-card); outline-color: var(--color-action-primary); }

/* The partner question: three pills, like the app's Option Row when chosen. */
.form-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.form-choice { position: relative; }
.form-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.form-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-quote);
  box-shadow: var(--clay-pressed);
  font-size: 15px;
  font-weight: 500;
}
.form-choice input:checked + span { background: var(--color-option-surface-selected); color: var(--color-option-label-selected); box-shadow: inset 0 0 0 2px var(--color-option-border-selected); font-weight: 600; }
.form-choice input:focus-visible + span { outline: 3px solid var(--color-action-primary); outline-offset: 2px; }

.form-consent { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.form-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--color-action-primary); cursor: pointer; }
.form-consent a { color: var(--color-text-link); border-bottom: 1px solid var(--color-border-link); }

/* Something to fix: a red ring and a note that says what to do. */
.form-field.has-error :is(input[type=text], input[type=email], select, textarea) { background-color: var(--color-state-danger-surface); outline-color: var(--color-state-danger-border); }
.form-error { margin: 0; color: var(--color-state-danger-content); font-size: 14px; font-weight: 500; }

.form-submit, .button-primary {
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 28px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-button-primary-fill);
  color: var(--color-button-primary-label);
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--clay-raised);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.form-submit:hover, .button-primary:hover { background: var(--color-button-primary-fill-pressed); }
.form-submit:active, .button-primary:active { background: var(--color-button-primary-fill-pressed); box-shadow: var(--clay-pressed); transform: scale(.98); }
.form-submit:disabled { opacity: .48; cursor: default; }
.form-submit:focus-visible, .button-primary:focus-visible { border-radius: var(--radius-pill); }
.form-status { margin: -8px 0 0; color: var(--color-text-secondary); font-size: 14px; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--color-state-danger-content); }
.form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: 32px 8px; text-align: center; }
.form-done h2 { margin: 0 0 10px; font-size: 30px; letter-spacing: -.03em; }
.form-done p { margin: 0 0 22px; color: var(--color-text-secondary); font-size: 17px; }
.form-done:focus { outline: none; }

@media (max-width: 900px) {
  .creators { grid-template-columns: 1fr; }
  .creators-intro { position: static; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .creators-lede { font-size: 16px; }
  .creators-card { padding: 22px 18px; border-radius: 24px; }
}

/* ── Support ───────────────────────────────────────────────────────────── */

/* The headset, the heading and a way to write to us first; then the answers,
   in groups, as the same questions that open in place on the home page. */
.support-main { padding: 12px var(--gutter) clamp(72px, 9vw, 120px); }
.support-head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.page-art { display: block; width: clamp(120px, 12vw, 160px); height: auto; margin: 0 auto 6px; }
.support-contact {
  max-width: 820px;
  margin: clamp(28px, 3.4vw, 40px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  text-align: left;
}
.support-contact h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; font-weight: 600; }
.support-contact p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.55; }
.support-contact .button-primary { flex: none; }
.support-group { max-width: 820px; margin: 0 auto; }
.support-group + .support-group { margin-top: clamp(36px, 4vw, 52px); }
.support-group > h2 { margin: 0 0 16px 4px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 600px) {
  .support-contact { flex-direction: column; align-items: stretch; padding: 22px; border-radius: 24px; }
  .support-contact .button-primary { width: 100%; }
}

/* The page for an address that does not exist (404.html). */
.not-found { max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vw, 64px) 0 clamp(24px, 4vw, 48px); text-align: center; }
.not-found .page-art { width: clamp(150px, 16vw, 200px); margin-bottom: 10px; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* ── Small motion ──────────────────────────────────────────────────────── */

/* The clay icons settle into place with a soft squish as they scroll into
   view (site.js marks them), and squish again every 7.5 seconds while they
   stay on screen. They are visible the whole time: they only start a little
   smaller. Everything here stops under Reduce Motion (at the end). */
html.motion [data-pop] :is(.card-art, .stat-figure img, .icon-tile--small img, .privacy-art, .couple-avatar img) { transform: scale(.88); }
html.motion [data-pop].is-in :is(.card-art, .stat-figure img, .icon-tile--small img, .privacy-art, .couple-avatar img) {
  animation: clay-pop .9s cubic-bezier(.3, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes clay-pop {
  0% { transform: scale(.88); }
  45% { transform: scale(1.07, .95); }
  70% { transform: scale(.97, 1.03); }
  100% { transform: none; }
}

/* On a computer, a card lifts a little under the pointer. */
@media (hover: hover) and (pointer: fine) {
  .card-grid > .card { transition: transform .25s ease, box-shadow .25s ease; }
  .card-grid > .card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(28, 23, 15, .06), 0 26px 48px -20px rgba(28, 23, 15, .32), 0 4px 10px rgba(28, 23, 15, .07);
  }
}

/* A question's × turns back into + while its answer slides shut. */
.faq-item.is-closing summary::before { transform: none; }

/* ── Footer ────────────────────────────────────────────────────────────── */

/* The white clay card stands in a calm clay meadow, drawn as two pictures
   with no sky: their backdrop is the page's own sand (#f4f2ed, matched pixel
   for pixel), so the page runs straight into them with no edge at any size.
   The clouds hang from the top at one size, so they stay whole above the
   card; the hill stands on the bottom edge, always the full width. Both load
   only when you get near them. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 16.5vw, 200px) var(--gutter) calc(clamp(104px, 11vw, 190px) + env(safe-area-inset-bottom));
}
.footer-art { position: absolute; left: 50%; height: auto; transform: translateX(-50%); pointer-events: none; }
.footer-sky { top: 0; z-index: -1; width: min(100%, 1190px); }
.footer-hill { bottom: 0; z-index: -2; width: max(100%, 760px); }
/* The clouds drift a little, back and forth, like a slow breeze. Their
   picture's edges are the page's own sand, so no edge ever shows. */
@media (prefers-reduced-motion: no-preference) {
  .footer-sky { animation: cloud-drift 16s ease-in-out infinite alternate; }
}
@keyframes cloud-drift {
  from { transform: translateX(calc(-50% - 16px)); }
  to { transform: translateX(calc(-50% + 16px)); }
}

.footer-card {
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4.4vw, 64px) 26px;
  border-radius: 34px;
  background: var(--color-surface-card);
  box-shadow: var(--clay-card);
}
.footer-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); }

.footer-logo { display: block; width: 88px; height: auto; }
.footer-title { margin: 14px 0 0; color: var(--ink); font-size: 21px; line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }

.footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-content: start; padding-top: 6px; }
.footer-col h2 { margin: 0 0 18px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  /* The footer's email has a <wbr> after its @, so a narrow column breaks it
     as "hello@ / heyeterna.com". anywhere stays as the last resort, for a
     column too narrow even for that. */
  overflow-wrap: anywhere;
  transition: color .2s, border-color .2s;
}
.footer-col a:hover { color: var(--brand); border-bottom-color: currentColor; }

.footer-bottom {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--color-border-divider);
  color: var(--color-text-secondary);
  font-size: 13px;
}
.footer-bottom p { margin: 0; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-footer { padding-top: 96px; padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .footer-card { padding: 28px 22px 22px; border-radius: 26px; }
  .footer-logo { width: 72px; }
  .footer-title { margin-top: 12px; font-size: 18px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .footer-col h2 { margin-bottom: 14px; }
  .footer-bottom { margin-top: 30px; }
}

/* ── Eterna Plus ──────────────────────────────────────────────────────── */

/* The Plus page (web/pages/plus.main.html) and the homepage's short Plus
   section. Built from the site's own parts — the section heads, cards,
   promise list and questions — plus three price cards and a Free/Plus
   table. The "Save 37%" pill is the app's own Plus pill colour
   (color.pill.plusSurface). */
.plus-main { padding: 0 0 clamp(72px, 9vw, 120px); }

/* The opening: a clay scene edge to edge, up under the floating header (the
   homepage's .hero-backdrop), with the words centred on its open sky and
   room below them for the hills, the books and the couple. */
.plus-hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 980px);
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(36px, 8vh, 110px)) var(--gutter) clamp(200px, 30vh, 340px);
  text-align: center;
}
.plus-hero .hero-backdrop img { object-position: 50% 100%; }
.plus-title { font-size: clamp(42px, 6vw, 92px); }
.plus-hero .section-lede { margin: 22px auto 30px; color: var(--ink); }
.plus-hero-actions { display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; }

/* The rolodex: five words stacked in one place, one showing. The next one
   waits below (rotated down out of sight) and turns up into place while the
   last one turns away over the top, about a drum half an em deep. The line
   is a block, centred, so a long word never moves "for both of you." */
.rolodex { display: grid; perspective: 900px; }
.rolodex > span {
  grid-area: 1 / 1;
  color: var(--ink);
  transform-origin: 50% 50% -.5em;
  transform: rotateX(-90deg);
  opacity: 0;
  backface-visibility: hidden;
}
.rolodex > .is-active { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.rolodex > .is-leaving { transform: rotateX(90deg); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .35s ease .2s; }
.plus-title-end { display: block; }

/* What you get: the three cards sit in a soft blue tray pressed into the
   page, the same clay as the app's pressed surfaces. */
.plus-tray {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(18px, 3vw, 48px);
  border-radius: 44px;
  background: linear-gradient(180deg, var(--blue-surface), var(--blue-surface-soft));
  box-shadow: inset 0 3px 8px rgba(28, 23, 15, .07), inset 0 -2px 0 rgba(255, 255, 255, .8);
}

/* Small clay pieces that float beside a section, drifting a little. They
   carry no meaning (alt=""), and they leave on phones, where there is no
   room beside anything. */
/* Its own layer, so a piece at z-index -1 sits behind the cards but above the page. */
.plus-section { position: relative; isolation: isolate; }
.float-deco { position: absolute; z-index: -1; height: auto; pointer-events: none; animation: deco-drift 7s ease-in-out infinite alternate; }
.float-deco--b { animation-duration: 9s; animation-delay: -3s; }
@keyframes deco-drift { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-16px) rotate(4deg); } }
/* Below 1200px the price cards reach almost from gutter to gutter, so the
   pieces would only peek out from behind them. */
@media (max-width: 1200px) { .float-deco { display: none; } }
/* The rolodex's pause button: the video button's clay chip, in the opening's
   bottom-right corner. */
.plus-hero .rolodex-toggle { right: var(--gutter); bottom: 24px; }

.price-grid {
  list-style: none;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.price-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.price-art { display: block; width: 92px; height: 92px; margin: -6px 0 10px; }
.price-card h3 { margin: 0 0 14px; font-size: 20px; }
/* .card > p paints a card's text grey; the price and the pill are not body text. */
.price-card .price { margin: 0 0 12px; color: var(--ink); display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.price-amount { font-size: clamp(40px, 4vw, 52px); line-height: 1; letter-spacing: var(--tracking-title); font-weight: 600; }
.price-unit { color: var(--color-text-secondary); font-size: 16px; }
.price-note { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.5; }
.price-card.is-featured { box-shadow: inset 0 0 0 2px var(--color-pill-plus-surface), var(--clay-card); }
.price-card .price-flag {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-pill-plus-surface);
  color: var(--color-pill-plus-label);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--clay-raised);
  transform: translate(-50%, -50%);
}

.compare-card { max-width: 820px; margin: 0 auto; padding: clamp(8px, 1.6vw, 20px) clamp(18px, 3vw, 36px); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare-table :is(th, td) { padding: 16px 6px; border-bottom: 1px solid var(--color-border-divider); text-align: center; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table thead th { width: 84px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compare-table thead th:first-child { width: auto; }
.compare-table tbody th { text-align: left; font-weight: 500; line-height: 1.4; }
.tick, .dash { display: inline-block; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
/* The tick is drawn in --blue-deep (#3d5798); a data URI cannot read a var. */
.tick {
  background: var(--blue-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d5798' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: var(--clay-bead-small);
}
.dash::before { content: ''; display: block; width: 12px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: var(--color-border-divider); }

/* The last card: the opening's clay meadow again, the words on its sky. */
.plus-end-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px) clamp(150px, 18vw, 230px);
  text-align: center;
}
.plus-end-card .hero-backdrop img { object-position: 50% 100%; }
/* On a portrait screen the card shows the TALL meadow (plus-meadow-tall, set in
   the page). That picture is 9:16 and anchored at the bottom, so its hill climbs
   about 0.6 of the card's width up from the foot. Give the card that much room
   under the words, at every portrait width, so the words stay on the sky and
   the books and the couple stay in view. */
@media (max-width: 850px) and (orientation: portrait) {
  .plus-end-card { padding-bottom: calc((100vw - 32px) * .66); }
}
.plus-end-card .section-title { font-size: clamp(32px, 3.8vw, 52px); }
.plus-end-card .section-lede { margin: 16px auto 26px; }

/* The homepage's short Plus section. The whole card is the Plus page's clay
   meadow, like the opening, with the words and the button centred on its
   open sky. Kept short on purpose: what Plus opens and the prices are on the
   Plus page, and Moonbun is never shown (what it hatches into is a
   surprise). */
.plus-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1240px;
  min-height: clamp(420px, 34vw, 500px);
  margin: 0 auto;
  padding: clamp(40px, 4.6vw, 68px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.plus-band .hero-backdrop img { object-position: 50% 100%; }
.plus-band-copy { position: relative; max-width: 640px; margin: 0 auto; }
.plus-band .section-title { font-size: clamp(34px, 4vw, 58px); }
.plus-band-lede { margin: 14px auto 26px; color: var(--ink); font-size: 18px; line-height: 1.6; }

/* ── Smaller desktops ──────────────────────────────────────────────────── */

@media (max-height: 760px) and (min-width: 851px) {
  :root { --phone-gap: 26px; }
  :root { --header-h: 84px; }
  .header-bar { height: 58px; }
  .hero-grid { padding: 8px 0 16px; }
  .scene-bar { height: 46px; }
  .title { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 16px; }
  .tag { margin-bottom: 16px; }
  .body-copy { font-size: 16px; margin-bottom: 16px; }
  .facts { gap: 6px; }
  .facts li { font-size: 14px; }
  .facts.is-chips li { font-size: 13px; padding: 6px 12px; }
  .actions { margin-top: 22px; }
  .store-badge img { height: 50px; }
  /* The opening keeps its quote on a short laptop screen by tightening up. */
  .hero-title { margin-bottom: 16px; font-size: clamp(48px, 5.4vw, 80px); }
  .hero-lede { margin-bottom: 24px; font-size: 18px; }
  .hero-quote { margin-top: 26px; padding: 16px 20px 14px; border-radius: 22px; }
  .hero-quote blockquote p { font-size: 16px; }
  .hero-quote figcaption { margin-top: 12px; }
  .couple-picks button { width: 40px; height: 40px; }
}

@media (max-width: 1180px) and (min-width: 851px) {
  .feature-nav :is(button, a) { padding: 9px 11px; font-size: 13px; }
  /* An even split, so the words keep their width beside the dots. */
  .hero-grid { grid-template-columns: 50% 50%; }
  /* The opening's phone column is narrow here: a smaller margin round the
     phone keeps it from shrinking too far. */
  .hero-stage { --phone-gap: 18px; }
  .copy-column { padding-left: 2.4vw; padding-right: 44px; }
  .body-copy { font-size: 16px; }
  .actions { gap: 14px; }
  .brand img { width: 78px; }
  .header-bar { gap: 12px; padding-left: 18px; }
  .facts.is-chips { gap: 6px; }
  .facts.is-chips li { font-size: 13px; padding: 6px 11px; }
}

/* Just above the phone layout, the feature buttons and both header buttons
   share a narrow bar: the camera goes (the phone stays, on the main button),
   and everything tightens a little. */
@media (max-width: 1000px) and (min-width: 851px) {
  .header-bar { gap: 10px; }
  /* Six links since Plus joined them (2 Oct 2026): no gap between them, and
     a little less padding, so the bar still fits at 851px. */
  .feature-nav { gap: 0; }
  .feature-nav :is(button, a) { padding: 9px 7px; }
  .header-actions { gap: 6px; }
  .header-link img { display: none; }
  .header-link { padding: 4px 14px; font-size: 15px; }
  .header-cta { padding: 4px 14px 4px 10px; font-size: 15px; }
}

/* ── Phones and tablets held upright ───────────────────────────────────── */

/* One column: the scene on top, the words and the button under it. The
   scene takes whatever height the words leave, and the phone fills it. */
@media (max-width: 850px) {
  .price-grid { grid-template-columns: 1fr; max-width: 420px; gap: 28px; }
  .plus-hero { min-height: 0; padding: calc(var(--header-h) + 28px) var(--gutter) min(62vw, 420px); }
  .plus-tray { border-radius: 30px; }
  .compare-table { font-size: 15px; }
  .compare-table thead th { width: 60px; }
  /* Phones: the tall meadow, the words on its sky and a strip of meadow
     below. */
  .plus-band { min-height: 0; padding: 32px 16px min(66vw, 300px); }
  .plus-band .section-title { font-size: clamp(30px, 8.4vw, 40px); }
  .plus-band-lede { font-size: 16px; margin-bottom: 20px; }
  :root { --phone-max: 620px; --phone-gap: 14px; --gutter: 16px; --header-h: 68px; }
  .scene { min-height: calc(460px - var(--header-h)); }
  .header-bar { height: 56px; gap: 12px; border-radius: 18px; padding: 0 10px 0 16px; }
  .brand img { width: 72px; }
  .feature-nav { display: none; }
  /* Both buttons fit beside the logo: the labels step down to 15px. */
  .header-actions { gap: 6px; }
  .header-link { gap: 5px; padding: 4px 14px 4px 10px; font-size: 15px; }
  .header-link img, .header-cta img { width: 22px; height: 22px; }
  .header-cta { gap: 5px; padding: 4px 14px 4px 10px; font-size: 15px; }

  .hero-grid { display: flex; flex-direction: column; gap: 16px; padding: 2px 0 max(16px, env(safe-area-inset-bottom)); }
  .visual-column { flex: 1 1 0; height: auto; min-height: 150px; padding: 0; }
  .visual-stage { border-radius: 24px; }
  .stage-dots { display: flex; }

  .copy-column { flex: none; align-items: center; padding: 0; text-align: center; }
  .copy-stack { width: 100%; max-width: 560px; }
  .copy-panel { display: flex; flex-direction: column; align-items: center; }
  .tag { margin-bottom: 10px; padding: 4px 14px 4px 4px; font-size: 12px; }
  .tag-number { width: 26px; height: 26px; }
  .title { margin-bottom: 8px; font-size: clamp(26px, 7vw, 44px); letter-spacing: var(--tracking-title); }
  .body-copy { margin: 0; font-size: 15px; line-height: 1.5; }
  /* The facts and the seven parts wait for a bigger screen; the sentence
     above them already says the same thing. */
  .facts, .facts.is-chips { display: none; }
  .actions { margin-top: 16px; width: 100%; justify-content: center; }
  .store-badge img { height: 52px; }
  .next-link, .side-steps, .scene-bar { display: none; }

  /* One column. The quote moves under the phone, so the phone stays near
     the top: the words' box steps aside and its parts join the column. */
  .hero { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: calc(var(--header-h) + 10px) var(--gutter) 24px; text-align: center; }
  /* The phone fills the middle of a narrow screen, so the couple would only
     peek out from behind it. The tall scene keeps them on its right, and this
     slides them off that side: the phone stands in open grass instead. */
  .hero-backdrop img { object-position: 0 100%; }
  .hero-copy { display: contents; }
  .hero-title { margin: 10px 0 14px; font-size: clamp(38px, 10.4vw, 64px); }
  .hero-lede { margin: 0 auto 22px; font-size: 16px; }
  .hero-actions { justify-content: center; gap: 18px; }
  .hero-stage { grid-column: auto; --toggle-spill: 0px; --phone-gap: 18px; height: min(690px, 73svh); min-height: 400px; margin-top: 22px; }
  .hero-quote { order: 1; width: 100%; max-width: 560px; margin: 16px auto 0; text-align: left; }
}

/* Narrower phones: the camera goes first, then the labels step down to
   14px. Under 360px, "Work with us" leaves the header (it stays in the
   footer) so "Get app" never wraps. The phone on "Get app" stays at every
   width. */
@media (max-width: 420px) {
  .header-link img { display: none; }
  .header-link { padding: 4px 14px; }
}
@media (max-width: 389px) {
  .header-bar { gap: 8px; }
  .header-actions { gap: 5px; }
  .header-link { padding: 4px 12px; font-size: 14px; }
  .header-cta { padding: 4px 11px 4px 8px; font-size: 14px; }
}
@media (max-width: 359px) {
  .header-link { display: none; }
}

/* Short phones, such as an iPhone SE with Safari's bars showing. */
@media (max-width: 850px) and (max-height: 620px) {
  :root { --header-h: 64px; }
  .header-bar { height: 54px; }
  .hero-grid { gap: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .tag { margin-bottom: 8px; }
  .tag-number { width: 24px; height: 24px; }
  .title { margin-bottom: 6px; font-size: clamp(24px, 6.8vw, 32px); }
  .body-copy { font-size: 14px; line-height: 1.45; }
  .actions { margin-top: 12px; }
  .store-badge img { height: 48px; }
}

/* Tablets held upright have room for the facts again, as chips. */
@media (min-width: 600px) and (max-width: 850px) and (min-height: 820px) {
  .title { margin-bottom: 12px; }
  .body-copy { font-size: 17px; }
  .facts, .facts.is-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin-top: 18px; }
  .facts li, .facts.is-chips li {
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-card);
    font-size: 13px;
    box-shadow: var(--clay-surface);
  }
  .facts li::before { width: 9px; height: 9px; }
  .actions { margin-top: 22px; }
}

/* ── Phones held sideways ──────────────────────────────────────────────── */

/* Too short for one column: the scene on the left, the words on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --phone-max: 600px; --phone-gap: 10px; --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .scene { min-height: 0; }
  :root { --header-h: 62px; }
  .header-bar { height: 54px; gap: 12px; border-radius: 16px; padding: 0 10px 0 14px; }
  .brand img { width: 66px; }
  .feature-nav { display: none; }

  .hero-grid { display: grid; grid-template-columns: 44% 56%; gap: 0; padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
  .visual-column { flex: none; height: 100%; min-height: 0; padding: 0 14px 0 0; }
  .visual-stage { border-radius: 20px; }
  .copy-column { justify-content: center; align-items: flex-start; padding: 0 4px 0 12px; text-align: left; }
  .copy-stack { max-width: 460px; }
  .copy-panel { display: block; }
  .tag { margin-bottom: 8px; padding: 3px 12px 3px 3px; font-size: 12px; }
  .tag-number { width: 22px; height: 22px; }
  .title { margin-bottom: 6px; font-size: 26px; }
  .body-copy { margin: 0; font-size: 14px; line-height: 1.45; }
  .facts, .facts.is-chips { display: none; }
  .actions { margin-top: 12px; width: auto; justify-content: flex-start; }
  .store-badge img { height: 44px; }
  .next-link, .side-steps, .scene-bar { display: none; }
  .stage-dots { display: flex; right: 8px; }

  .hero { grid-template-columns: 48% 1fr 34%; gap: 0; min-height: 100svh; padding: var(--header-h) var(--gutter) 12px; text-align: left; }
  .hero-copy { display: block; padding: 0 20px 0 0; }
  .hero-title { margin: 0 0 10px; font-size: 34px; }
  .hero-lede { margin: 0 0 14px; font-size: 14px; }
  .hero-actions { justify-content: flex-start; gap: 18px; }
  .hero-stage { grid-column: 3; --toggle-spill: 0px; --phone-gap: 10px; height: auto; min-height: 0; margin-top: 0; }
  .hero-quote { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}