/* ==========================================================================
   Larkin — shared stylesheet
   Five pages (general / leaders / adhd / parents / journal) share this file.
   Palette is switched by data-theme on <html>; the markup never changes colour.
   Mobile-first: base rules are the phone layout, min-width queries build up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The page must never pan sideways under a swipe. `hidden` on the ROOT is the
     one horizontal guard every engine propagates to the viewport — body's
     `clip` (below) is honoured by Chrome but not dependably by others, which is
     how a stray wide element once let the whole layout slide. It goes here and
     not on body precisely because only a scroll container on BODY would break
     position:sticky; the root propagates its overflow and stays visible. */
  overflow-x: hidden;
}

body { margin: 0; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

/* <picture> only exists to offer AVIF; it must not become the grid/flex item
   itself, or every layout below would be sizing a wrapper instead of the image. */
picture { display: contents; }
/* ...but display:contents also promotes <source> to a grid/flex item, and the
   HTML spec does NOT give <source> a default of display:none. Left alone, each
   one silently eats a grid cell. Hiding it does not affect image selection. */
source { display: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* --------------------------------------------------------------------------
   2. Tokens — theme-independent
   -------------------------------------------------------------------------- */

:root {
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Anton, "Arial Narrow", sans-serif;
  --font-serif: Newsreader, Georgia, serif;

  --shell-max: 1440px;
  --gutter: clamp(1.25rem, 4.44vw, 4rem);              /*  20 →  64 */
  --section-y: clamp(4rem, 10.4vw, 9.375rem);          /*  64 → 150 */
  --section-y-sm: clamp(3.25rem, 8.3vw, 7.5rem);       /*  52 → 120 */

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 240ms;

  --header-h: 66px;

  /* Phone mockups render on a white screen regardless of page theme. */
  --ink: #101a35;
  --illus-accent: #4CE07A;
  --muted: rgba(16, 26, 53, 0.7);
  --muted-2: rgba(16, 26, 53, 0.5);
}

@media (min-width: 900px) { :root { --header-h: 78px; } }

/* --------------------------------------------------------------------------
   3. Themes

   Each theme declares two palettes: a dark one and a light one. Sections opt
   into either with .surface--dark / .surface--light, which remap the --fg and
   --rule families so every component below works on either surface without
   knowing which page it is on. Pages differ in how they alternate the two.
   -------------------------------------------------------------------------- */

/* ----- Palette -----
   Navy and warm white are the only two page backgrounds, and the gold gradient
   belongs to the primary CTA alone. The [data-theme] attribute stays on <html>
   because site.js reads it to tag the Meta InitiateCheckout event with the
   segment, but nothing is styled from it any more.

   The four "Who it's for" cards are deliberately absent from this block: they
   carry their own hard-coded hex further down and are left exactly as they
   were. */

:root {
  --ink-navy:    #0B1020;
  --cream:       #F2EDE0;
  --warm-white:  #FAF6EE;
  --white:       #FFFFFF;
  /* The brief calls this --ink; renamed because --ink is already the phone
     mockup's screen colour above, which must not move. */
  --ink-warm:    #23201A;
  --gold-top:    #E7B653;
  --gold-bottom: #D19A2F;
  --gold: linear-gradient(180deg, var(--gold-top) 0%, var(--gold-bottom) 100%);
  --gold-ink:    #241B0B;
  --gold-quiet:  #A8842F;
  --gold-glow:   rgba(224, 169, 62, 0.14);
  --periwinkle:  rgba(96, 118, 178, 0.20);
  /* The hero's colour shapes re-pitched for warm white — soft circles in the
     register ouraring.com washes its light sections with: amber, sky, slate
     blue and sand, each fading out well before a section edge. */
  --glow-amber:  rgba(255, 182, 72, 0.30);
  --glow-sky:    rgba(181, 228, 254, 0.55);
  --glow-slate:  rgba(182, 207, 221, 0.50);
  --glow-sand:   rgba(213, 195, 171, 0.42);

  --d-bg: var(--ink-navy);  --d-bg-2: var(--ink-navy);
  --d-panel: var(--ink-navy); --d-card: var(--ink-navy); --d-ink: var(--cream);
  --l-bg: var(--warm-white); --l-bg-2: var(--white);
  --l-panel: var(--white);  --l-ink: var(--ink-warm);

  --cta-bg: var(--gold); --cta-fg: var(--gold-ink);
  --header-bg: var(--ink-navy); --header-fg: var(--cream);
}

/* ----- Use-case domains -----
   Each segment page leads with the colour its hero was actually shot on —
   sampled from the photo backdrops — and carries it through every dark
   surface (header, statement, hardware band, pre-order panel, phone tiles,
   footer), so the page reads as one colour world instead of navy with a
   coloured photo pasted on the right. Light sections stay warm white and
   gold keeps its one job. The homepage and thanks page are
   data-theme="general" and keep the navy above.

   --hero-bg matches the backdrop where the mask fade meets it, so the
   photo and the band read as one field. Journal was shot on light paper,
   so its hero flips to the dark ink family through the --hero-fg-* hooks. */

html[data-theme="leaders"] {
  --d-bg: #0D1B2E; --d-bg-2: #0D1B2E; --d-panel: #0D1B2E; --d-card: #0D1B2E;
  --header-bg: #0D1B2E;
  --hero-bg: #0D2138;
  --hero-glow-1: rgba(224, 169, 62, 0.12);
  --hero-glow-2: rgba(70, 120, 200, 0.22);
}
html[data-theme="adhd"] {
  --d-bg: #221410; --d-bg-2: #221410; --d-panel: #221410; --d-card: #221410;
  --header-bg: #221410;
  --hero-bg: #2E1B14;
  --hero-glow-1: rgba(224, 169, 62, 0.14);
  --hero-glow-2: rgba(226, 122, 92, 0.16);
}
html[data-theme="parents"] {
  --d-bg: #152A17; --d-bg-2: #152A17; --d-panel: #152A17; --d-card: #152A17;
  --header-bg: #152A17;
  --hero-bg: #1F3321;
  --hero-glow-1: rgba(224, 169, 62, 0.10);
  --hero-glow-2: rgba(150, 200, 130, 0.18);
}
html[data-theme="journal"] {
  --d-bg: #2B2113; --d-bg-2: #2B2113; --d-panel: #2B2113; --d-card: #2B2113;
  --header-bg: #2B2113;
  --hero-bg: #F0E2CB;
  --hero-glow-1: rgba(231, 182, 83, 0.30);
  --hero-glow-2: rgba(213, 195, 171, 0.55);
  --hero-fg: var(--ink-warm);
  --hero-fg-muted: rgba(35, 32, 26, 0.74);
  /* Paper is darker than the warm-white sections, so the dim/em alphas that
     read fine there fall short of AA here — 0.70 and 0.55 keep 4.5:1 / 3:1. */
  --hero-fg-dim:   rgba(35, 32, 26, 0.70);
  --hero-rule:     rgba(35, 32, 26, 0.30);
  --hero-em:       rgba(35, 32, 26, 0.55);
  --hero-focus:    var(--ink-warm);
}

/* ----- Surfaces -----
   One of these goes on <body> to set the page default, and on any section that
   breaks from it. Everything downstream reads --fg / --rule / --surface. */

.surface--dark {
  background: var(--d-bg);
  color: var(--d-ink);
  --fg: var(--d-ink);
  --fg-muted:  rgba(242, 237, 224, 0.70);   /* body on navy */
  --fg-soft:   rgba(242, 237, 224, 0.62);
  /* 0.55, not 0.50: the use-case darks are lighter than navy, and 0.50 put
     small dim text (hero fine print, eyebrows, footer legal) under 4.5:1 on
     the parents green. 0.55 clears every theme surface with margin. */
  --fg-dim:    rgba(242, 237, 224, 0.55);   /* legal / meta */
  --fg-faint:  rgba(242, 237, 224, 0.30);   /* hairline, top of range */
  --fg-ghost:  rgba(242, 237, 224, 0.22);
  --rule:      rgba(242, 237, 224, 0.20);
  --rule-soft: rgba(242, 237, 224, 0.12);   /* hairline, bottom of range */
  --wash:      rgba(242, 237, 224, 0.07);
  --surface: var(--d-card);
  --surface-2: var(--d-panel);
  --surface-3: var(--d-bg-2);
  --ghost-mark: rgba(242, 237, 224, 0.07);
  --banner-line: rgba(242, 237, 224, 0.55);
  --focus: var(--cream);
}
.surface--dark-2 { background: var(--d-bg-2); }
.surface--dark-3 { background: var(--d-panel); }

.surface--light {
  background: var(--l-bg);
  color: var(--l-ink);
  --fg: var(--l-ink);
  --fg-muted:  rgba(35, 32, 26, 0.72);
  --fg-soft:   rgba(35, 32, 26, 0.62);      /* body on warm white */
  --fg-dim:    rgba(35, 32, 26, 0.55);
  --fg-faint:  rgba(35, 32, 26, 0.26);
  --fg-ghost:  rgba(35, 32, 26, 0.20);
  --rule:      rgba(35, 32, 26, 0.12);
  --rule-soft: rgba(35, 32, 26, 0.10);
  --wash:      rgba(35, 32, 26, 0.06);
  --surface: var(--l-panel);
  --surface-2: var(--l-bg-2);
  --surface-3: var(--l-bg-2);
  --ghost-mark: rgba(35, 32, 26, 0.06);
  --banner-line: rgba(35, 32, 26, 0.50);
  --focus: var(--ink-warm);
}

/* Some sections ARE the .shell, so a background on them would stop at
   --shell-max and leave an edge on wide screens. Those paint their band from a
   pseudo-element instead — no wrapper element, so the markup keeps its shape. */
.shell.surface--light,
.shell.surface--dark { position: relative; background: transparent; }
.shell.surface--light::before,
.shell.surface--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}
.shell.surface--light::before { background: var(--l-bg); }
.shell.surface--dark::before  { background: var(--d-bg); }
.surface--light-2 { background: var(--l-bg-2); }

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Second layer under the root guard, and clip rather than hidden: `hidden`
     here would make body a scroll container and silently break position:sticky
     on the header, where clip only trims and leaves the viewport as the
     scrollport. */
  overflow-x: clip;
}

/* One grain field for the whole page — fixed rather than absolute so it covers
   the viewport at any scroll without painting a document-tall blended layer,
   and under the header's z-index 100 so the header stays clean. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Layout shell: full-bleed section backgrounds, content capped and centred. */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--ruled { border-top: 1px solid var(--rule); }
.section--ruled-both { border-block: 1px solid var(--rule); }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

:where(a, button, summary, details):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--cta-bg); color: var(--cta-fg);
  font-weight: 700; font-size: 0.9375rem;
  padding: 12px 22px; border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  transition: transform var(--t-med) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Forced line breaks from the desktop composition — suppressed on small
   screens where they would break lines in the wrong places. */
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */

.section-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.875rem, 4.6vw, 2.75rem);          /*  30 →  44 */
  line-height: 1.1;
  color: var(--fg);
}
.section-title--lg { font-size: clamp(2rem, 5vw, 3rem); text-wrap: balance; max-width: 24ch; }
.section-lead {
  margin-top: 1.125rem;
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 52ch;
}
.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1rem;
}



/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 44px;
  border-radius: var(--radius-pill);
  text-align: center;
  transition: transform var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);         /*  17 →  20 */
  padding: clamp(1rem, 1.6vw, 1.4375rem) clamp(1.75rem, 3.3vw, 2.875rem);
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
}
.btn--primary:hover { filter: brightness(1.06); }

.btn--ghost {
  font-size: 1rem;
  font-weight: 700;
  padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid rgba(242, 237, 224, 0.30);
  color: var(--fg-muted);
}
.btn--ghost:hover { border-color: var(--fg); color: var(--fg); }

.btn--sm {
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 12px 22px;
  white-space: nowrap;
  background: var(--cta-bg);
  color: var(--cta-fg);
}
.btn--sm:hover { filter: brightness(1.06); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid rgba(242, 237, 224, 0.12);
  transition: box-shadow var(--t-med) var(--ease);
}
/* Cream pill on the page's dark — gold stays reserved for the primary CTA. */
.site-header .btn--sm { background: var(--cream); color: var(--header-bg, var(--ink-navy)); }
.site-header.is-stuck { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.45); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding-block: 10px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand__mark {
  font-family: var(--font-serif);
  font-weight: 500;
  /* Another step down from clamp(1.169rem, 1.53vw, 1.381rem) — the em-based
     tracking below scales with it, so the whole wordmark shrinks together. */
  font-size: clamp(1.05rem, 1.38vw, 1.245rem);
  line-height: 1;
  /* Uppercase serif glyphs leave the line box's descender space empty, so the
     word sat optically high in the bar; drop it by half that empty space. */
  translate: 0 0.07em;
  letter-spacing: 0.3em;
  /* the tracking leaves a trailing gap after the last letter — pull it back so
     the wordmark still sits tight against the tag and the left edge reads clean */
  margin-right: -0.3em;
  text-transform: uppercase;
  color: var(--header-fg);
  white-space: nowrap;
}
.brand__tag {
  display: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--header-fg) 58%, transparent);
}
@media (min-width: 600px) { .brand__tag { display: block; } }

.nav {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  font-size: 0.9375rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--header-fg) 82%, transparent);
}
.nav a { padding: 6px 0; transition: opacity var(--t-fast) var(--ease); }
.nav a:hover { opacity: 0.7; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--header-fg);
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--header-bg);
  transition: grid-template-rows var(--t-med) var(--ease);
}
.mobile-nav.is-open { grid-template-rows: 1fr; }
.mobile-nav__inner { overflow: hidden; }
.mobile-nav__inner > div { padding-bottom: 16px; }
.mobile-nav a {
  display: block;
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--header-fg) 85%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--header-fg) 13%, transparent);
}
.mobile-nav a:first-child { border-top: 0; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* --------------------------------------------------------------------------
   8. Hero — homepage
   -------------------------------------------------------------------------- */

/* The homepage hero is itself a .shell, so its glows come from a full-bleed
   pseudo-element; percentages then resolve against the hero box exactly as the
   brief specifies. Navy underneath is the page background. */
.hero-home { position: relative; }
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background:
    radial-gradient(1100px 640px at 12% -12%, var(--gold-glow) 0%, rgba(224, 169, 62, 0) 60%),
    radial-gradient(900px 560px at 88% 30%, var(--periwinkle) 0%, rgba(96, 118, 178, 0) 65%);
}
.hero-home {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.4vw, 2.125rem);
  padding-block: clamp(3.5rem, 9.7vw, 8.75rem) clamp(3rem, 6.9vw, 6.25rem);
}
.hero-home__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4.5rem);              /*  36 →  72 */
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.hero-home__lead {
  font-size: clamp(1.0625rem, 1.46vw, 1.3125rem);      /*  17 →  21 */
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 44ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.7vw, 1.5rem);
  flex-wrap: wrap;
}
.hero-fine {
  margin-top: -0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-dim);
}
.hero-video {
  width: 100%;
  height: clamp(260px, 52.8vw, 760px);
  object-fit: cover;
  background: var(--d-bg);
}

/* --------------------------------------------------------------------------
   9. Hero — segment pages
   -------------------------------------------------------------------------- */

.hero-seg {
  --fg: var(--hero-fg, var(--cream));
  --fg-muted: var(--hero-fg-muted, rgba(242, 237, 224, 0.70));
  --fg-dim:   var(--hero-fg-dim, rgba(242, 237, 224, 0.55));
  /* Journal's hero is light, where the surface's cream focus ring vanishes. */
  --focus: var(--hero-focus, var(--cream));
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(520px, 75vw, 1080px);
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 12% -12%, var(--hero-glow-1, var(--gold-glow)) 0%, transparent 60%),
    radial-gradient(900px 560px at 88% 30%, var(--hero-glow-2, var(--periwinkle)) 0%, transparent 65%),
    var(--hero-bg, var(--ink-navy));
}
.hero-seg__img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 7%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,1) 26%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 7%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,1) 26%);
}
.hero-seg__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.125rem, 1.94vw, 1.75rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  width: min(680px, 100%);
}
.hero-seg__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--hero-rule, rgba(242, 237, 224, 0.30));
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.hero-seg__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5.83vw, 5.25rem);           /*  40 →  84 */
  line-height: 0.92;
  color: var(--fg);
}
.hero-seg__title em { font-style: normal; color: var(--hero-em, rgba(242, 237, 224, 0.55)); }
.hero-seg__lead {
  font-size: clamp(1.0625rem, 1.53vw, 1.375rem);       /*  17 →  22 */
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 34ch;
}
.hero-seg__fine {
  margin-top: -0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-dim);
}

/* Phones: the portrait cannot sit beside the copy, so it drops behind it,
   dimmed and faded out at the bottom, and the headline keeps its contrast. */
@media (max-width: 767px) {
  .hero-seg { align-items: end; }
  .hero-seg__img {
    width: 100%;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 92%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 92%);
  }
}

/* --------------------------------------------------------------------------
   10. Statement band
   -------------------------------------------------------------------------- */

.statement { padding-block: clamp(4rem, 12.5vw, 11.25rem); }
.statement p {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.33vw, 3rem);              /*  24 →  48 */
  line-height: 1.28;
  color: var(--fg);
  max-width: 28ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--fg-dim); }
/* Read-along statement: centred, and lit per word from site.js. The words are
   only dimmed once the script has wrapped them, so with no JS (or reduced
   motion) the sentence is simply full-bright. */
.statement--reveal {
  text-align: center;
  min-height: 84vh;
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  padding-block: clamp(3rem, 7vh, 5.5rem);
}
/* Big and screen-centred, so the read-along reads as a moment you can't scroll
   past rather than one more paragraph. Split into two paragraphs so the copy
   breathes after "Larkin can." — the gap gives the pivot line room. */
.statement--reveal p {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(1.875rem, 4.8vw, 3.9rem);
  line-height: 1.18;
}
/* Pinned read-along: site.js adds .stmt-scrub only when it can actually drive
   the scrub (JS running + motion allowed). The tall outer supplies the scroll
   distance; the inner sticks — centred in the viewport — while the words light,
   then releases into the zig-zag below. Without the class it's just the normal
   centred statement above, so no-JS / reduced-motion never gets pinned. */
.stmt-scrub .statement-pin { height: 200vh; }
.stmt-scrub .statement-pin .statement--reveal {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
}
/* The statement sits on warm white while the page body stays navy. The pin is
   painted too, so no navy sliver can peek past the 100svh sticky on phones
   whose visual viewport outgrows svh when the URL bar collapses. */
.statement-pin { background: var(--l-bg); }
/* Colour shapes over the warm white: the hero's amber-and-blue pair, Oura
   register — big, soft, and gone well before the section's edges, so the
   statement and the zig-zag below still read as one continuous stretch. */
.statement--reveal.surface--light::before {
  background:
    radial-gradient(1000px 700px at 14% 10%, var(--glow-amber) 0%, rgba(255, 182, 72, 0) 62%),
    radial-gradient(920px 660px at 90% 42%, var(--glow-sky) 0%, rgba(181, 228, 254, 0) 64%),
    radial-gradient(820px 600px at 46% 98%, var(--glow-sand) 0%, rgba(213, 195, 171, 0) 60%),
    var(--l-bg);
}
.statement--seg { padding-block: clamp(3.5rem, 10.4vw, 9.375rem); }
.statement--seg p { font-size: clamp(1.375rem, 2.78vw, 2.5rem); max-width: 26ch; }
/* Needs to outrank `.statement p`, which sets the serif display treatment. */
.statement p.statement__sub {
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   11. How it works — three numbered cards (homepage)
   -------------------------------------------------------------------------- */

/* Centred head above the step row: a small mono-flavoured kicker, then the
   serif banner. */
.steps-head { text-align: center; }
.kicker {
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 3vw, 2.75rem);
}
.step { display: flex; flex-direction: column; }
.step__n { color: var(--gold-quiet); }
.step__title {
  font-family: var(--font-serif);
  font-weight: 450;
  font-size: clamp(1.5rem, 2.08vw, 1.875rem);
  line-height: 1.2;
  color: var(--fg);
}
/* A dot, then a dotted rule running to the card's edge. */
.step__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
}
.step__lead::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
}
.step__lead::after {
  content: "";
  flex: 1;
  border-top: 1.5px dotted color-mix(in srgb, var(--fg) 35%, transparent);
}
.step img {
  width: 100%;
  height: clamp(240px, 24vw, 344px);
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.step p {
  font-size: clamp(1rem, 1.18vw, 1.0625rem);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 32ch;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Reserve two title lines and bottom-align, so a wrapping title never pushes
     its dotted rule and photo out of line with the neighbours'. */
  /* The numeral is its own element now so it can take the quiet gold, and a
     flex container drops the whitespace between items — gap restores the
     space that was there before. */
  .step__title { display: flex; align-items: flex-end; gap: 0.3em; min-height: 2.4em; }
}

/* Homepage variant: the steps become a zig-zag on the same warm white as the
   statement — no head, media and copy swapping sides each row. Scoped to
   .how--zig, so the segment pages keep their three-up grid untouched. */
.how--zig .steps { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5.5rem); }
.how--zig .step { gap: clamp(1.25rem, 3vw, 1.75rem); }
.how--zig .step img {
  height: auto;
  aspect-ratio: 3 / 2;
  margin-bottom: 0;
}
.how--zig .step__n { color: var(--gold-quiet); }
/* The statement's colour shapes carry on down the zig-zag, alternating sides
   so each step row gets its own wash. Same specificity as the generic
   .shell.surface--light::before painter, later in the file, so it wins. */
.how--zig.surface--light::before {
  background:
    radial-gradient(1000px 720px at 4% 14%, var(--glow-slate) 0%, rgba(182, 207, 221, 0) 62%),
    radial-gradient(940px 680px at 96% 52%, var(--glow-amber) 0%, rgba(255, 182, 72, 0) 62%),
    radial-gradient(900px 640px at 8% 94%, var(--glow-sky) 0%, rgba(181, 228, 254, 0) 62%),
    var(--l-bg);
}
@media (min-width: 900px) {
  .how--zig .step { flex-direction: row; align-items: center; gap: clamp(3rem, 6vw, 5.5rem); }
  .how--zig .step:nth-child(even) { flex-direction: row-reverse; }
  .how--zig .step__media,
  .how--zig .step__body { flex: 1 1 0; min-width: 0; }
  /* Each row stands on its own: drop the grid-mode title padding and the
     left-to-right entrance stagger meant for side-by-side cards. */
  .how--zig .step__title { align-items: baseline; min-height: 0; }
  .how--zig .steps > .step.rv { --rv-d: 0ms; }
}

/* --------------------------------------------------------------------------
   12. Who it's for — four segment cards
   -------------------------------------------------------------------------- */

.segments {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1.94vw, 1.75rem);
}
.segment {
  position: relative;
  display: block;
  height: clamp(400px, 38.9vw, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(to bottom, var(--card-from) 0%, var(--card-to) 100%);
  transition: transform var(--t-med) var(--ease);
}
.segment:hover { transform: translateY(-4px); }
.segment img {
  position: absolute;
  inset: 0 -30px 0 auto;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 8%, rgba(0,0,0,0.7) 17%, rgba(0,0,0,1) 27%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 8%, rgba(0,0,0,0.7) 17%, rgba(0,0,0,1) 27%);
}
.segment__copy {
  position: absolute;
  left: clamp(1.5rem, 3.06vw, 2.75rem);
  top: clamp(1.75rem, 3.33vw, 3rem);
  right: clamp(1.5rem, 3.06vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 62%;
}
.segment__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--card-eyebrow);
}
.segment__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.08vw, 1.875rem);
  line-height: 1.15;
  color: var(--card-fg);
}
.segment__cta {
  position: absolute;
  left: clamp(1.5rem, 3.06vw, 2.75rem);
  bottom: clamp(1.5rem, 3.06vw, 2.75rem);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--card-cta-fg, var(--card-from));
  background: var(--card-fg);
  border-radius: var(--radius-pill);
  padding: 14px 26px;
}
/* Each card carries the palette of the page it leads to. */
.segment--leaders { --card-from: #0A1728; --card-to: #0D2138; --card-eyebrow: #A9C7F2; --card-fg: #F2F6FC; }
.segment--adhd    { --card-from: #27150F; --card-to: #37211A; --card-eyebrow: #FFD22E; --card-fg: #FFF3E4; }
.segment--parents { --card-from: #16281A; --card-to: #24362A; --card-eyebrow: #CDE8AC; --card-fg: #FBF6EA; }
.segment--journal { --card-from: #F2E4D0; --card-to: #E9DBC4; --card-eyebrow: #8A6423; --card-fg: #2B2416; --card-cta-fg: #F2E4D0; }

@media (min-width: 900px) {
  .segments { grid-template-columns: 1fr 1fr; }
  .segment__copy { max-width: 48%; }
}

/* --------------------------------------------------------------------------
   13. Privacy carousel
   -------------------------------------------------------------------------- */

.car-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 3.33vw, 3rem);
  padding-bottom: clamp(2rem, 3.6vw, 3.25rem);
}
/* Controls-only row under a centred banner (the banner spaces itself). */
.car-head--end { justify-content: flex-end; padding-bottom: 20px; }
@media (max-width: 899px) { .car-head--end { display: none; } }

/* ----- Serif banner — the reserve-site title treatment ----- */
/* Two sentences, two voices: the claim in the ink colour, the reassurance a
   step quieter on its own line. Newsreader at text weight, tight and centred. */
.banner {
  font-family: var(--font-serif);
  font-weight: 450;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--fg);
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4.2vw, 3rem);
}
/* Display type stays lightly tracked so letters never touch: the serif and
   DM Sans both switch to tighter display cuts at large sizes on their own.
   An r before a v or y still meets it, so that r gets a hair of room. */
.kern { margin-right: 0.03em; }
.banner__line { display: block; color: var(--banner-line, var(--fg-dim)); }
.car-controls { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.car-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--fg-faint);
  color: var(--fg);
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.car-btn:hover:not(:disabled) { border-color: var(--fg); background: var(--wash); }

/* The track bleeds full-width so cards can run off the right edge, but its
   first card must still line up with the shell. */
.car {
  /* Padding and snapport have to agree. Left alone, scroll-padding is auto (0),
     so `scroll-snap-align: start` snapped the first card to the track's border
     edge and scrolled the start padding out of view — the card sat flush left
     while the heading above it sat on the shell. */
  --car-pad: max(var(--gutter), calc((100% - var(--shell-max)) / 2 + var(--gutter)));

  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  /* A track meant to scroll only sideways still becomes a VERTICAL scroll
     container: with overflow-x: auto, the spec computes the visible Y axis to
     auto as well. That bites because the reveal state parks a card 14px lower
     (`translate: 0 14px`) and cards waiting off the right edge never reveal —
     so the track keeps a couple of pixels of vertical room permanently, and a
     trackpad swipe over the carousel latches onto it for the whole gesture
     instead of scrolling the page. Pin Y shut; the bottom padding below is
     then deep enough for the reveal to land inside the padding box, so there
     is no real overflow to clip either. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: var(--car-pad);
  scroll-padding-inline: var(--car-pad);
  padding-bottom: 16px;
}
.car::-webkit-scrollbar { display: none; }
.car__card {
  flex: 0 0 min(380px, 78vw);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 22px;
  padding: clamp(1.5rem, 2.36vw, 2.125rem) clamp(1.375rem, 2.22vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.car__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--wash);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}
/* Direct children only: an app card nests a whole phone mockup whose ps-*
   paragraphs must keep the phone's own ink, not the card's copy colour. */
.car__card > h3 { font-weight: 600; font-size: 1.3125rem; line-height: 1.25; color: var(--fg); }
.car__card > p { font-size: 1rem; line-height: 1.6; color: var(--fg-soft); }

/* The features band is the hero's navy again, glows included, so the page
   opens dark, breathes white through the statement and zig-zag, then drops
   back into the dark for the software. Plain sections, so the background can
   sit on the element itself — #specs (the device) shares the exact treatment. */
#features.surface--dark,
#specs.surface--dark {
  background:
    radial-gradient(1100px 640px at 12% -6%, var(--gold-glow) 0%, rgba(224, 169, 62, 0) 60%),
    radial-gradient(900px 560px at 88% 42%, var(--periwinkle) 0%, rgba(96, 118, 178, 0) 65%),
    var(--d-bg);
}
/* Use-cases runs straight on from features on the same navy — it is a .shell,
   so its full-bleed paint lives on the ::before, glows folded in. Anchors
   mirrored from the features band so the long dark stretch keeps moving. */
#use-cases.surface--dark::before {
  background:
    radial-gradient(1000px 620px at 90% -4%, var(--gold-glow) 0%, rgba(224, 169, 62, 0) 60%),
    radial-gradient(940px 600px at 6% 58%, var(--periwinkle) 0%, rgba(96, 118, 178, 0) 65%),
    var(--d-bg);
}
/* Second banner line takes the reserve site's periwinkle rather than the dim
   cream — the treatment this section had over there. Surface-scoped: the
   segment pages' #features banner stays on warm white and keeps its own line
   colour. */
#features.surface--dark .banner__line { color: #AEBBD8; }

/* App cards — the reserve site's dark feature tile, riding the carousel track:
   same panel gradient, hairline, radius, serif title and 400px phone window,
   just scroll-snapped instead of gridded. The phone still runs off the card's
   bottom edge, so app cards drop their bottom padding (re-stated at #features
   strength, which would otherwise out-rank the .car__card--app rule). */
#features .car__card {
  flex-basis: min(560px, 86vw);
  gap: 0;
  background: linear-gradient(180deg, #1A2848 0%, #141F3C 100%);
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}
#features .car__card--app { padding-bottom: 0; }
#features .car__card > h3 {
  font-family: var(--font-serif);
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}
#features .car__card > p {
  margin-top: 0.5rem;
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 40ch;
}

.car__card--app { overflow: hidden; }
/* Shorter than the reserve site's 400px window: the CSS phone is a 1:2 slab,
   so a 400px slice of empty screen read as an abnormally long device. 340px
   crops at the content's natural end and keeps the run-off-the-edge crop. */
.fcard__phone { position: relative; height: 340px; margin-top: 2rem; }

/* Below 900px the head rows hide their buttons, and nothing was left saying
   "this scrolls" — visitors read the first card as the whole section. A
   controls row under the track brings the affordance back where thumbs
   expect it. One breakpoint for both carousels: the features head is gone
   at 899px already, so the swap must happen there, not at a phone width. */
.car-foot { display: none; }
@media (max-width: 899px) {
  .car-controls { display: none; }
  .car-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
  }
  .car-foot .car-btn { width: 48px; height: 48px; background: var(--wash); }
}
/* The track can't go further that way. Real disabled, not a class: it drops
   the button from the tab order and reads as unavailable to a screen reader,
   which is what makes the dimmed look legitimate. */
.car-btn:disabled { opacity: 0.35; cursor: default; }

/* --------------------------------------------------------------------------
   14. Reserve
   -------------------------------------------------------------------------- */

.reserve {
  position: relative;
  overflow: hidden;
  background-image: var(--reserve-bg, none);
}
.reserve__mark {
  position: absolute;
  top: clamp(-30px, -4vw, -60px);
  right: clamp(-10px, 2vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(9rem, 29vw, 26.25rem);
  line-height: 1;
  color: var(--ghost-mark);
  pointer-events: none;
  user-select: none;
}
.reserve__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 4.44vw, 4.5rem);
  align-items: center;
}
.reserve__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 5.83vw, 5.25rem);
  line-height: 0.92;
  color: var(--fg);
  margin-bottom: clamp(1.25rem, 1.81vw, 1.625rem);
}
.price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.price__was {
  font-size: clamp(1.25rem, 1.94vw, 1.75rem);
  color: var(--fg-dim);
  text-decoration: line-through;
}
.price__now {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--fg);
}
.price__at { font-size: 0.9375rem; font-weight: 700; color: var(--fg-dim); }
.reserve__copy {
  margin-bottom: clamp(1.5rem, 2.36vw, 2.125rem);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 42ch;
}
.reserve__ships { margin-top: 18px; font-size: 0.875rem; font-weight: 600; color: var(--fg-dim); }
.reserve .btn--primary {
  background: var(--reserve-cta-bg, var(--cta-bg));
  color: var(--reserve-cta-fg, var(--cta-fg));
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.6);
}
.reserve__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.25vw, 18px);
}
/* Definite height rather than aspect-ratio: these are grid items whose
   percentage width cannot resolve during intrinsic row sizing, so the row
   would fall back to the image's full intrinsic height. */
.reserve__gallery img {
  width: 100%;
  height: clamp(140px, 17.2vw, 248px);
  object-fit: cover;
  border-radius: 20px;
}
@media (min-width: 1000px) {
  .reserve__layout { grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); }
}

/* ----- Pre-order panel (homepage) — the reserve site's card ----- */
/* One navy panel on the warm page: gallery with a thumbnail strip on the
   left, the founder offer on the right. .surface--dark on the panel supplies
   the background and the whole dark ink family; everything in here only
   reads --fg/--rule tokens. The old .reserve__* rules above stay — the four
   segment pages still use that layout. */

.preorder {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  overflow: hidden;
}
@media (min-width: 900px) {
  .preorder { grid-template-columns: 0.9fr 1.1fr; }
}
/* Single column reads copy first, photos after — same order the reserve site
   chose for phones. */
@media (max-width: 899px) {
  .preorder__media { order: 2; }
}

.pgal__main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
/* The global picture { display: contents } would dissolve the frames — these
   are real boxes, stacked and cross-faded. */
.pgal__frame {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.pgal__frame.is-active { opacity: 1; }
.pgal__frame img { width: 100%; height: 100%; object-fit: cover; }
.pgal__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.pgal__thumbs button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pgal__thumbs button:hover { opacity: 1; }
.pgal__thumbs button.is-active { border-color: var(--gold-top); opacity: 1; }
.pgal__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.preorder__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-top);
  margin-bottom: 1rem;
}
.preorder__title {
  font-family: var(--font-serif);
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(2.1rem, 3vw, 3rem);
  color: var(--fg);
  margin-bottom: 1.5rem;
}
.preorder__price {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.preorder__was {
  font-size: 1.4rem;
  color: var(--fg-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.preorder__amount {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--fg);
}
.preorder__label { font-size: 0.95rem; color: var(--fg-soft); }
.preorder__deposit { font-size: 1rem; color: var(--fg-soft); margin-bottom: 1.5rem; }
.preorder__points {
  display: grid;
  gap: 0.65rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--fg-soft);
  margin-bottom: 2rem;
}
.preorder__points li { position: relative; padding-left: 1.7rem; }
.preorder__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-top);
  font-weight: 700;
}
/* Full-width pill: the label centres itself, so the primary button's wide
   side padding only forces a wrap on phones — trim it. */
.preorder__cta { width: 100%; padding-inline: 1rem; }
.preorder__note {
  font-size: 0.875rem;
  color: var(--fg-dim);
  margin-top: 1rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   15. Comparison table
   -------------------------------------------------------------------------- */

/* Five columns cannot compress to phone width without becoming unreadable, so
   the grid keeps its minimum and the wrapper scrolls sideways instead.

   `position: relative` is load-bearing, not decoration: without a containing
   block here the 760px table still counted towards the DOCUMENT's scrollable
   width (705px against a 390px phone), so a sideways swipe anywhere on the page
   dragged the whole layout — header and all — off to the left. `overscroll-
   behavior-x` then keeps a swipe that reaches the end of the table from
   chaining out to the page or the browser's back gesture. */
.compare-scroll {
  position: relative;
  overflow-x: auto;
  /* Same guard as the carousels: overflow-x: auto would otherwise make this a
     vertical scroll container too, and any stray pixel of vertical overflow
     lets a downward swipe latch here instead of moving the page. The table
     sets this box's height, so there is nothing to clip. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.compare-hint {
  display: none;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-dim);
}
@media (max-width: 899px) { .compare-hint { display: block; } }

.compare {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: center;
}
.compare th, .compare td { padding: 22px 16px; border-top: 1px solid var(--rule); }
.compare thead th { border-top: 0; vertical-align: bottom; }
.compare thead th:first-child { padding: 0 24px 22px 0; }
.compare tbody th {
  text-align: left;
  padding: 22px 24px 22px 0;
  font-weight: 400;
  font-size: clamp(1rem, 1.18vw, 1.0625rem);
  line-height: 1.45;
  color: var(--fg-muted);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

.compare .col-name { font-weight: 700; font-size: 1.0625rem; color: var(--fg); margin-bottom: 4px; }
.compare .col-note { font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--fg-dim); }

.compare .col-us { background: var(--surface-2); }
.compare thead .col-us { border-radius: var(--radius) var(--radius) 0 0; }
.compare tbody tr:last-child .col-us { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.compare .col-us .col-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare .col-us .col-note { color: var(--fg-dim); }
.yes { font-size: 1.375rem; line-height: 1; color: var(--fg); }
.half { font-size: 1.25rem; line-height: 1; color: var(--fg-dim); }
.no { font-size: 1.25rem; line-height: 1; color: var(--fg-ghost); }
.qual {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
}
.compare__foot {
  margin-top: 28px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-faint);
  max-width: 60ch;
}
/* Headed like the reserve site's versus section: the pre-order band above
   already supplies the air, so the section itself keeps only a small top
   padding and lets the banner's own margin space the table. */
#compare { padding-top: clamp(1rem, 2vw, 2rem); }

/* --------------------------------------------------------------------------
   16. Specs
   -------------------------------------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 4.44vw, 4rem);
  align-items: start;
}
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--rule);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.spec-row dd { font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 600; color: var(--fg); text-align: right; }
.specs__media { border-radius: var(--radius-lg); background: #FFFFFF; overflow: hidden; }
.specs__media video {
  width: 100%;
  height: clamp(320px, 45.8vw, 660px);
  object-fit: contain;
  background: #FFFFFF;
}
@media (min-width: 900px) { .specs { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

/* The reserve site's list: one centred 760px column, flat rows split by
   hairlines — no boxes — question left, a +/– glyph right drawn by CSS. */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 500;
  color: var(--fg);
}
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fg-dim);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p {
  padding-bottom: 2rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   18. Segment pages — pillars, steps, hardware
   -------------------------------------------------------------------------- */

.pillars { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 3.89vw, 3.5rem); }
.pillar { border-top: 1px solid var(--fg-faint); padding-top: 26px; }
.pillar h3 { font-weight: 600; font-size: clamp(1.1875rem, 1.46vw, 1.3125rem); color: var(--fg); margin-bottom: 12px; }
.pillar p { font-size: clamp(1rem, 1.18vw, 1.0625rem); line-height: 1.6; color: var(--fg-soft); max-width: 36ch; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.hardware__frame {
  border-radius: 24px;
  background: #FFFFFF;
  padding: clamp(1.5rem, 3.33vw, 3rem) clamp(1.25rem, 2.78vw, 2.5rem);
}
/* The exploded view is a video on the segment pages and was a still before it —
   both sit in the same white frame and size identically. width/height on the
   element reserve the aspect ratio so the frame does not jump on load. */
.hardware__frame :is(img, video) { width: 100%; max-width: 980px; height: auto; margin-inline: auto; }
.hardware__video { background: #FFFFFF; }
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.89vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.stat__num {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: clamp(1.75rem, 2.64vw, 2.375rem);
  line-height: 1;
  color: var(--fg);
}
.stat__body { font-size: 1rem; line-height: 1.6; color: var(--fg-soft); }
.hardware__note {
  margin-top: clamp(1.75rem, 3.06vw, 2.75rem);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg-soft);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   19. Feature phone tiles
   -------------------------------------------------------------------------- */

.ptile-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
.ptile-grid--3 { margin-top: 48px; }
.features__divider {
  margin-top: clamp(3.5rem, 7.64vw, 6.875rem);
  padding-top: clamp(1.75rem, 3.06vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.ptile {
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem) 0;
  overflow: hidden;
  background: var(--d-bg-2);
  border: 1px solid color-mix(in srgb, var(--d-ink) 8%, transparent);
  /* the tile is dark even on a light section, so it carries the dark ink family */
  --fg: var(--d-ink);
  --fg-muted:  color-mix(in srgb, var(--d-ink) 78%, transparent);
  --fg-dim:    color-mix(in srgb, var(--d-ink) 48%, transparent);
  --fg-faint:  color-mix(in srgb, var(--d-ink) 30%, transparent);
  --rule-soft: color-mix(in srgb, var(--d-ink) 9%, transparent);
  --wash:      color-mix(in srgb, var(--d-ink) 5%, transparent);
}
.ptile--flush { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ptile__top h3 { font-family: var(--font-ui); font-weight: 600; font-size: 1.3125rem; line-height: 1.3; color: var(--fg); }
.ptile__top p { margin-top: 8px; font-size: 0.98rem; line-height: 1.5; color: var(--fg-muted); max-width: 40ch; }
.ptile__phone { position: relative; height: 400px; margin-top: 32px; }

.phone {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: min(100%, 280px);
  aspect-ratio: 1 / 2;
  background: #101013;
  border-radius: 42px;
  padding: 9px;
  box-shadow: 0 34px 70px -34px rgba(16, 16, 19, 0.55);
}
.phone-screen {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 34px;
  padding: 2.4rem 0.9rem 1rem;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--ink);
}
.phone-screen::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: #101013;
}
.ps-status {
  position: absolute;
  top: 0.65rem;
  left: 0;
  right: 0;
  padding-inline: 1.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-time { font-size: 0.68rem; font-weight: 600; }
.ps-sicons { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.ps-title { font-weight: 600; font-size: 0.95rem; }
.ps-greeting { font-weight: 600; font-size: 1.15rem; }
.ps-dim { font-size: 0.7rem; color: var(--muted-2); margin-top: 0.1rem; }
.ps-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.8rem;
}
.ps-card {
  background: #f8f5f0;
  border: 1px solid rgba(16, 26, 53, 0.05);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  margin-top: 0.55rem;
}
.ps-card .ps-label { margin-top: 0; margin-bottom: 0.3rem; }
.ps-card .ps-item { margin-top: 0.5rem; }
.ps-text { font-size: 0.78rem; line-height: 1.45; }
.ps-moment { font-size: 0.76rem; line-height: 1.45; }
.ps-moment + .ps-moment { margin-top: 0.45rem; }
.ps-mtime {
  font-weight: 600;
  font-size: 0.66rem;
  color: var(--muted-2);
  margin-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.ps-moment em { font-style: normal; font-size: 0.7rem; color: var(--muted-2); }
.ps-big { font-weight: 600; font-size: 1.02rem; line-height: 1.25; margin-bottom: 0.35rem; }
.ps-item { display: flex; align-items: flex-start; gap: 0.55rem; }
.ps-chip {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
}
.ps-chip--rose { background: #f7dfe3; color: #c96a7d; }
.ps-chip--gold { background: #f6e8cd; color: #b98a3e; }
.ps-chip--blue { background: #dfe8f5; color: #5a7cab; }
.ps-check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.05rem;
  border-radius: 50%;
  border: 1.5px solid var(--muted-2);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  color: #fff;
}
.ps-check.is-done { background: var(--illus-accent); border-color: var(--illus-accent); }
.ps-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 0.7rem; }
.ps-bars i { flex: 1; border-radius: 3px; background: rgba(16, 26, 53, 0.12); }
.ps-bars i.is-hot { background: var(--illus-accent); }
.ps-days { display: flex; gap: 5px; margin-top: 0.35rem; }
.ps-days span { flex: 1; text-align: center; font-size: 0.56rem; font-weight: 600; color: var(--muted-2); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.ps-topic {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(16, 26, 53, 0.12);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.6rem;
}
.ps-topic b { color: var(--illus-accent); font-weight: 700; }
.ps-people { display: flex; align-items: center; gap: 0.6rem; }
.ps-avs { display: inline-flex; }
.ps-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: #5a7cab;
  border: 2px solid #f8f5f0;
}
.ps-av--2 { background: #c96a7d; margin-left: -9px; }
.ps-av--3 { background: #b98a3e; margin-left: -9px; }

/* Inline bar charts inside the phone screens */
.ps-track {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(16, 26, 53, 0.15);
  margin-top: 10px;
}
.ps-track span { background: var(--illus-accent); }
.ps-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ps-legend b { color: var(--illus-accent); font-weight: 700; }
.ps-mini { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ps-mini-row { display: flex; align-items: center; gap: 8px; }
.ps-mini-row > span:first-child {
  flex: 0 0 24px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ps-mini-bar { height: 10px; border-radius: 5px; background: rgba(16, 26, 53, 0.15); }
.ps-mini-bar--hot { background: var(--illus-accent); }
.ps-mini-val { font-size: 0.68rem; font-weight: 600; color: var(--muted); }

/* Saved-highlight player */
.hl-player {
  margin-top: 32px;
  background: var(--wash);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.hl-head { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
.hl-row { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.9rem; }
.hl-play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--illus-accent);
  color: var(--cta-fg);
  display: grid;
  place-items: center;
}
.hl-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 36px; }
.hl-wave i { flex: 1; border-radius: 2px; background: var(--fg-faint); }
.hl-wave i:nth-child(-n+6) { background: var(--illus-accent); }
.hl-wave i:nth-child(6n+1) { height: 35%; }
.hl-wave i:nth-child(6n+2) { height: 65%; }
.hl-wave i:nth-child(6n+3) { height: 90%; }
.hl-wave i:nth-child(6n+4) { height: 50%; }
.hl-wave i:nth-child(6n+5) { height: 75%; }
.hl-wave i:nth-child(6n)   { height: 45%; }
.hl-dur { font-size: 0.8rem; color: var(--fg-muted); }
.hl-quote {
  margin-top: 1rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  color: var(--fg);
}
.hl-src { margin-top: 0.4rem; font-size: 0.8rem; color: var(--fg-dim); }
.hl-more { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); }
.hl-item { margin-top: 0.85rem; }
.hl-item-quote { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.hl-item .hl-src { margin-top: 0.15rem; }

@media (min-width: 900px) {
  .ptile-grid { grid-template-columns: 1fr 1fr; }
  .ptile-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Below 360px the CSS phone renders under its 280px design width and the
   screen content crowds; give it back some room. */
@media (max-width: 360px) {
  .ptile { padding-inline: 1rem; }
  .ptile__phone { height: 360px; }
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */

/* The footer carries its own surface class, so it only needs the rule above it. */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-block: clamp(1.75rem, 2.22vw, 2rem);
  text-align: center;
}
.site-footer__mark {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.site-footer__links a { padding: 4px 0; transition: opacity var(--t-fast) var(--ease); }
.site-footer__links a:hover { opacity: 0.7; }
.site-footer__copy { font-size: 0.75rem; color: var(--fg-dim); }

@media (min-width: 800px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* --------------------------------------------------------------------------
   20b. Motion — hero load-in and scroll reveals
   Rules of the system: hidden states exist ONLY under .js-anim (set by
   site.js — no JS, nothing ever hides) and only when the OS allows motion.
   Reveals use the `translate` property, never `transform`, so they compose
   with hover transforms instead of overriding them.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
  }
  /* Homepage hero: everything but the h1 — the headline is the likely LCP
     element and must paint immediately. Segment heroes animate all copy; their
     LCP is the untouched hero photo. */
  .hero-home > .hero-home__lead { animation: rise 0.7s var(--ease) backwards; }
  .hero-home > .hero-actions { animation: rise 0.7s var(--ease) 100ms backwards; }
  .hero-home > .hero-fine { animation: rise 0.7s var(--ease) 200ms backwards; }
  .hero-seg__copy > * { animation: rise 0.7s var(--ease) backwards; }
  .hero-seg__copy > :nth-child(2) { animation-delay: 90ms; }
  .hero-seg__copy > :nth-child(3) { animation-delay: 180ms; }
  .hero-seg__copy > :nth-child(4) { animation-delay: 270ms; }
  .hero-seg__copy > :nth-child(5) { animation-delay: 360ms; }

  .js-anim .rv {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.65s var(--ease) var(--rv-d, 0ms),
                translate 0.65s var(--ease) var(--rv-d, 0ms);
  }
  .js-anim .rv.in { opacity: 1; translate: none; }

  /* The step rule draws itself: dot pops, dotted line sweeps to the edge. */
  .js-anim .step__lead::before {
    transform: scale(0);
    transition: transform 0.4s var(--ease) calc(var(--rv-d, 0ms) + 250ms);
  }
  .js-anim .step__lead::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--ease) calc(var(--rv-d, 0ms) + 320ms);
  }
  .js-anim .step.rv.in .step__lead::before { transform: scale(1); }
  .js-anim .step.rv.in .step__lead::after { transform: scaleX(1); }
}

/* Row-mates trail each other left to right; on one phone column each element
   enters on its own, so no artificial lag there. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  :is(.steps, .segments, .car, .pillars, .ptile-grid, .stats) > .rv:nth-child(2) { --rv-d: 90ms; }
  :is(.steps, .segments, .car, .pillars, .ptile-grid, .stats) > .rv:nth-child(3) { --rv-d: 180ms; }
  :is(.segments, .car, .stats) > .rv:nth-child(4) { --rv-d: 270ms; }
  .car > .rv:nth-child(5) { --rv-d: 360ms; }
}

/* --------------------------------------------------------------------------
   21. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .car { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .segment:hover { transform: none; }
}