/* ============================================================
   Choosing Her — Pre-Sell Page styles  (v12)

   v12 is a surgical rhythm pass on the middle of the page. Four
   full-stage moments sat back to back with no build: the social-proof
   quote, the pivot, and beats 01 and 02 all opened with a centred
   display line at 30-37px, entering with the same fade-up. Padding
   was the symptom; the repeated typographic gesture was the cause.

   A. The pivot is absorbed. It is no longer its own sheet between
      §2 and §3; it is the thesis at the top of the beats section and
      the three beats are its evidence. Four moments become three,
      the page loses a seam, and the pivot keeps its full display
      scale so it still outranks the beat headers.
   B. The duration chips are gone. The 5-to-45 range now lives in
      beat 01's subline, so the claim keeps its evidence. The chips
      were also the page's only staggered entrance, so beat 01's two
      devices now arrive 80ms apart to keep that beat distinct.
   C. The eyebrow numbers are gone. Grouping is carried by what was
      already here: the shared sheet, a two-tier gap (the lead binds
      to beat 01 at 56px, the beats sit 76px apart), and the gradient
      dot every eyebrow already wore. Nothing decorative was added.
   D. Beat 03 no longer bleeds. The old -88px bleed plus the proof
      wall's -40px lip hid 128px of a 585px device on a 375px phone,
      which buried the walk entry that the beat exists to show.
      It is whole, and the largest of the three, so it does not read
      as a twin of beat 02.

   Everything from v11 that was not in the way is untouched: the
   gradient, the sheet/z system, the reveal classes, every CTA and
   risk line, and the hero, proof wall, founder note and close.

   ---- v11 notes, kept for history ----
   v11 was a rhythm-and-depth pass. The middle of the page read as
   identical slabs because six variables were held constant across
   every section: alignment, content width, surface tone, entry
   motion, sheet edge, and vertical spacing. Tone is locked (Olivia's
   call), so v11 breaks the other five.

   1. GROUPING. The three product beats were three separate sheets,
      spaced exactly like the moments around them. They are now ONE
      sheet with three beats inside it, and the page has two spacing
      tiers: moments breathe (72/112), beats sit close (36/76). The
      page now reads MOMENT · MOMENT · [beat beat beat] · MOMENT,
      not slab slab slab slab slab.
   2. SILHOUETTE. The three beats had near-identical visuals. Now:
      two overlapping devices, then one whole device, then one device
      that runs off the bottom of the sheet and passes behind the
      next one. Three different shapes, no invented product UI.
   3. EDGE. The sheet lip went 28 -> 40px with a 36px radius and a
      shadow that actually casts, so a seam reads as a seam.
   4. MOTION. Reveals were 450ms + up to 240ms delay: ~690ms to
      settle. Now 380ms + 180ms. The duration chips stagger at 45ms
      per item so beat 01 enters differently from 02 and 03.
   5. HOVER. Every transform-based hover is gated behind
      (hover:hover) so tapping on touch no longer leaves elements
      stuck in a hover state.

   Tokens, Inter, the gradient CTA and the colour system are
   untouched.
   ============================================================ */

/* Inter Variable: one file, every weight, and optical sizing so small
   text gets the text cut instead of the 28pt display cut */
@font-face{
  font-family:'Inter';
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  src:url('fonts/InterVariable.woff2') format('woff2-variations');
}
/* metric-matched fallback so the swap doesn't shift layout */
@font-face{font-family:'Inter-fallback';src:local('Arial');
  size-adjust:107.64%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;}

:root{
  /* brand — exact design-system tokens */
  --ch-rose:#FE769D; --ch-rose-deep:#DF6480; --ch-orange:#FF9191;
  --ch-gradient:linear-gradient(115deg,#CA95E2 4%,#FE769D 45%,#FF9191 86%);
  --ch-raisin:#2E2A2C; --ch-plum:#4E114F; --ch-off-white:#FDFBFA; --ch-crystal-mist:#FAEDE9;
  --ch-gray-100:#F2F0EF; --ch-gray-400:#C0BFC0;

  /* page system */
  --ink:#2E2A2C;
  --ink-soft:#6D6A6B;
  --ink-mute:#757273;   /* 4.61:1 on the off-white sheet, 4.77:1 on white */
  --paper:#FFFFFF;
  --paper-warm:#FDFBFA;     /* page background behind hero/body only — not a section surface */
  --paper-alt:#FDFBFA;      /* alternate sheet surface + proof cards — Olivia's original
                               off-white (subtle by choice; separation carried by the
                               sheet shadow + rounded top rather than tone) */
  --raisin:#2E2A2C;
  --accent-text:#DF6480;          /* decorative + display-size accent only */
  --accent-text-strong:#BC3D5D;   /* small accent text — 5.30:1 on white, 5.14:1 on off-white */

  --radius-pill:999px;

  /* warm hairline ring for device frames */
  --phone-ring:0 0 0 1px rgba(46,42,44,.08);
  --hairline:rgba(46,42,44,.08);

  /* elevation scale */
  --elev-1:0 1px 2px rgba(46,42,44,.07), 0 1px 1px rgba(46,42,44,.04);
  --elev-2:0 1px 3px rgba(46,42,44,.07), 0 8px 22px rgba(46,42,44,.05);
  --elev-3:0 12px 34px rgba(46,42,44,.13);
  --elev-4:0 24px 56px rgba(46,42,44,.17);
  --shadow-card:0 1px 12px rgba(46,42,44,.10);
  /* v11: the old -12px/32px/.07 lip was a hairline you had to look for.
     A seam should read as a seam at scroll speed. */
  --sheet-shadow:0 -18px 44px rgba(46,42,44,.10), 0 -2px 6px rgba(46,42,44,.04);
  --sheet-lip:40px;
  --sheet-radius:36px;

  /* motion system */
  --ease-out-soft:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:.22s;
  --dur-med:.3s;
  --dur-base:.38s;   /* v11: was .45s — with delays the last item took ~690ms to settle */
  --dur-slow:.7s;

  --font-sans:'Inter','Inter-fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* optical tracking — three bands, negative shrinks as type shrinks */
  --tracking-display:-0.025em;   /* 24px and up */
  --tracking-body:-0.005em;      /* 14px to 23px */
  --tracking-micro:0.01em;       /* 13px and below */
  --maxw-wide:1180px;
  --maxw-split:1080px;

  /* glass surfaces (topbar, sticky bar) — #FBF8F6 at varying alpha */
  --glass-rgb:251,248,246;

  /* ---- SECTION RHYTHM: two tiers, not one scale ----
     Root values are the MOMENT tier: hero aftermath, the pivot, the
     proof wall, the founder note. Sections that are one of three
     grouped beats override these locally to sit closer together.
     Bottom padding carries the sheet lip so the visible gap above
     and below a section matches. */
  --sec-x:24px;
  --sec-pt:72px;
  --sec-pb:112px;   /* 72 visible once the next sheet's 40px lip lands */
}

/* registered so the hero's one-time load scale can transition smoothly.
   Both breakpoints settle at 1 — full frame, no permanent crop. */
@property --hero-scale{syntax:'<number>';inherits:false;initial-value:1;}
@keyframes hero-zoom{from{--hero-scale:1.06;}to{--hero-scale:1;}}
@keyframes hero-zoom-m{from{--hero-scale:1.02;}to{--hero-scale:1;}}
@keyframes hero-fade{from{opacity:0;}to{opacity:1;}}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-optical-sizing:auto;}
body{
  margin:0;font-family:var(--font-sans);font-weight:400;color:var(--ink);
  background:var(--paper-warm);
  /* the proof track's negative margins and the bleed device must never
     open a horizontal scrollbar */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3,p,figure,blockquote,figcaption,ul,li{margin:0;}
ul{padding:0;list-style:none;}

/* ---- shared layout ---- */
.wrap{width:100%;max-width:640px;margin:0 auto;padding-left:24px;padding-right:24px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:12px;line-height:1.4;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent-text-strong);
  font-variant-numeric:tabular-nums;}
/* a 5px gradient dot — the blossom mark needs ~20px to read, this is deliberate at eyebrow scale */
.eyebrow::before{content:"";width:5px;height:5px;flex:none;
  border-radius:999px;background:var(--ch-gradient);}

/* section header + body shared scale.
   Tiered so the pivot sits clearly above section headers, and the
   hero clearly above that. */
.sec-h{margin-top:12px;font-weight:700;letter-spacing:var(--tracking-display);color:var(--ink);
  font-size:clamp(26px,7.1vw,31px);line-height:1.18;text-wrap:balance;}
.sec-h span{display:block;}
.sec-p{margin:14px auto 0;font-weight:400;font-size:16px;line-height:1.6;
  letter-spacing:var(--tracking-body);color:var(--ink-soft);max-width:52ch;text-wrap:pretty;}
.sec-p strong{font-weight:600;color:#2E2A2C;}

/* ============================================================
   LAYERED-SHEET SYSTEM — the one section-separation mechanism
   ============================================================ */
.sheet{position:relative;
  border-top-left-radius:var(--sheet-radius);border-top-right-radius:var(--sheet-radius);
  margin-top:calc(-1 * var(--sheet-lip));box-shadow:var(--sheet-shadow);}
.z2{z-index:2;}.z3{z-index:3;}.z4{z-index:4;}.z5{z-index:5;}
.z6{z-index:6;}.z7{z-index:7;}.z8{z-index:8;}.z9{z-index:9;}.z10{z-index:10;}

/* ============================================================
   PRIMARY CTA — brand gradient pill, identical everywhere.
   Token values are the locked 19 July baseline. Untouched, except
   that the hover transform is now gated behind a real pointer.
   ============================================================ */
.cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:56px;padding:0 28px;border:none;border-radius:var(--radius-pill);
  background:var(--ch-gradient);background-size:115% 100%;background-position:0% 50%;
  color:#fff;font-weight:600;font-size:17px;letter-spacing:var(--tracking-body);
  box-shadow:0 6px 18px rgba(234,87,129,.28);
  transition:filter var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out-soft),
    box-shadow var(--dur-fast) ease,background-position var(--dur-fast) var(--ease-out-soft);
  text-decoration:none;
}
.cta>*{position:relative;z-index:1;}
.cta::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;}
/* press feedback is never gated — it is the touch device's only feedback */
.cta:active{transform:translateY(0) scale(.98);filter:brightness(.96);
  transition:filter var(--dur-fast) ease,transform var(--dur-fast) var(--ease-spring);}
@keyframes cta-sheen{0%{left:-65%;opacity:0;}18%{opacity:1;}100%{left:135%;opacity:0;}}
.risk{margin-top:12px;text-align:center;font-weight:500;font-size:13px;line-height:1.5;
  letter-spacing:var(--tracking-micro);color:var(--ink-mute);}
.cta-block{max-width:392px;margin-left:auto;margin-right:auto;}

/* visible focus for keyboard users */
a:focus-visible,button:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px;}
.cta:focus-visible,.badge:focus-visible{outline-offset:4px;}
.final .cta:focus-visible,.final .badge:focus-visible{outline-color:#fff;}
.hero .cta:focus-visible{outline-color:#fff;}

/* ---- every transform-based hover lives here ----
   On a touch screen a tap satisfies :hover and the element stays
   lifted until you tap elsewhere. Gating on a fine pointer keeps the
   lift for mice and gives phones their press state instead. */
@media (hover:hover) and (pointer:fine){
  .cta:hover{filter:brightness(1.04);transform:translateY(-2px);background-position:100% 50%;box-shadow:var(--elev-3);}
  .badge:hover{background:rgba(255,255,255,.28);}
  .final .cta:hover{background:#fff;filter:brightness(.97);}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cta:hover::after{animation:cta-sheen .9s var(--ease-out-soft);}
}

/* ============================================================
   STICKY HEADER — logo only; transparent over hero, glass on scroll.
   The bar owns its own top-down fade so the hero photograph does not
   have to be tinted to keep the white wordmark legible.
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background var(--dur-med) ease,box-shadow var(--dur-med) ease,border-color var(--dur-med) ease;
  background:transparent;border-bottom:1px solid transparent;
}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:132px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(46,42,44,.42),rgba(46,42,44,0));
  transition:opacity var(--dur-med) ease;}
.topbar.solid::before{opacity:0;}
.topbar__in{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  height:56px;max-width:var(--maxw-wide);margin:0 auto;padding:0 24px;}
/* the two wordmarks crossfade rather than hard-swap */
.topbar__logo{height:16px;width:auto;display:block;transition:opacity var(--dur-med) ease;}
.topbar__logo--white{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
.topbar__logo--dark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;}
.topbar.solid .topbar__logo--white{opacity:0;}
.topbar.solid .topbar__logo--dark{opacity:1;}
/* desktop-only header CTA (replaces the sticky bar at 880px+) */
.topbar__cta{display:none;}
.topbar.solid{background:rgba(var(--glass-rgb),.62);backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 12px rgba(46,42,44,.05);}

/* ============================================================
   §1 HERO — full-viewport photo, headline in the lower-left third
   ============================================================ */
.hero{position:relative;width:100%;z-index:1;
  min-height:max(100svh,560px);
  display:flex;align-items:flex-end;overflow:hidden;background:#2E2A2C;}
.hero__media{position:absolute;inset:0;z-index:0;background:#2E2A2C;
  filter:saturate(.98) contrast(1.012);}
.hero__media picture{display:block;width:100%;height:100%;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
/* mobile scrim: one bottom-up ramp only. The top fade lives on
   .topbar::before, so the photograph's upper half is untouched. */
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(46,42,44,.93) 0%,
    rgba(46,42,44,.80) 24%,
    rgba(46,42,44,.50) 44%,
    rgba(46,42,44,.16) 62%,
    rgba(46,42,44,0) 76%);}
.hero__panel{position:relative;z-index:2;width:100%;max-width:var(--maxw-wide);
  margin:0 auto;padding:0 20px 60px;}
.hero__inner{max-width:560px;}
.hero h1{color:#fff;font-weight:700;letter-spacing:var(--tracking-display);line-height:1.08;
  font-size:clamp(38px,11.3vw,50px);}
.hero h1 .l1,.hero h1 .l2{display:block;}
/* 500, not 600. At four lines the old semibold read as a second
   headline and fought the h1. */
.hero__sub{margin-top:14px;color:rgba(255,255,255,.93);font-weight:500;
  font-size:clamp(16px,4.3vw,18px);line-height:1.45;letter-spacing:var(--tracking-body);
  max-width:30ch;text-wrap:pretty;}
.hero__cta{margin-top:26px;max-width:392px;}
.hero .cta{box-shadow:0 6px 20px rgba(0,0,0,.30);}
/* Centred, because on mobile the pill is full width and a left-aligned
   line under a full-width button reads as a mistake. It goes back to
   left at 880px, where the pill shrinks to its label and sits at the
   left edge of the panel: there, left IS aligned to the button. */
.hero .risk{text-align:center;color:rgba(255,255,255,.92);font-size:12.5px;}

/* ============================================================
   §2 SOCIAL PROOF — a moment, not a strip.
   This section owns the ONLY rating moment on the page. Do not
   add a second stars/4.9 row anywhere else (Olivia, 29 July).
   The rating above and the attribution below are both quiet
   metadata bracketing one loud line; they sit equidistant and
   close so the three read as one composed unit floating in white,
   rather than three stacked items.
   ============================================================ */
.acclaim{background:var(--paper);text-align:center;
  padding:var(--sec-pt) var(--sec-x) var(--sec-pb);}
.acclaim__in{max-width:520px;margin:0 auto;}
.acclaim__rating{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.acclaim__stars{display:inline-block;width:92px;height:16px;flex:none;}
.acclaim__label{font-weight:500;font-size:14px;color:var(--ink);letter-spacing:var(--tracking-body);
  font-variant-numeric:tabular-nums;}
.acclaim__label strong{font-weight:700;}
.acclaim__quote{margin:20px auto 0;max-width:21ch;
  font-weight:600;font-size:clamp(24px,6.7vw,30px);line-height:1.3;
  letter-spacing:var(--tracking-display);color:var(--ink);text-wrap:balance;}
.acclaim__attr{margin-top:20px;font-size:14px;line-height:1.4;letter-spacing:var(--tracking-body);}
/* The source line retired: this section already says "4.9 on the App
   Store" two lines above, so "App Store review" repeated the same fact
   inside one short unit. The name keeps the comma form the proof-wall
   cards use, rather than a middle dot, which on this page reads as a
   separator between a name and its source. */
.acclaim__name{font-weight:600;color:var(--ink);}

/* ============================================================
   THE PIVOT — the hinge of the page, now the lead of §3.

   Through v11 this was its own centred sheet sitting between the
   social-proof quote and the beats: a third short centred display
   line in a row, which is most of why the middle of the page read
   as stacked. It is the same line at the same size now, but it sits
   at the top of the beats section as the claim those three beats
   answer, so the reader gets thesis-then-evidence instead of three
   unrelated assertions.

   What that gives up: the pivot no longer floats alone in white as
   the page's one silent moment. It is a header now, not a breath.
   The type styles below are unchanged from v11 so it still outranks
   the beat headers (30-37px against 26-31px) and still carries the
   gradient mark.
   ============================================================ */
/* the lead binds tighter to beat 01 (56px) than the beats bind to
   each other (76px), which is what makes it read as their header
   rather than as a fourth beat */
.beats__lead{margin:0 auto 56px;text-align:center;}
/* the progress-line motif, borrowed as a section mark */
.pivot__mark{width:34px;height:3px;margin:0 auto 30px;border-radius:999px;
  background:var(--ch-gradient);}
/* measure in em, not ch: the limit has to be relative to the display
   size that lives on this element, not to the 16px wrapper above it */
.pivot__h{max-width:11em;margin:0 auto;
  font-weight:700;letter-spacing:var(--tracking-display);color:var(--ink);
  font-size:clamp(30px,8.4vw,37px);line-height:1.14;text-wrap:balance;}
.pivot__h span{display:block;}
.pivot__h .pivot__b{color:var(--accent-text);}

/* ============================================================
   PHONE FRAME — one identical device treatment for every screen
   ============================================================ */
.phone{--phw:min(62vw,240px);width:var(--phw);flex:none;
  /* radius scales with the frame — 0.14 of width matches a real iPhone */
  border-radius:calc(var(--phw) * 0.14);overflow:hidden;background:#fff;
  box-shadow:var(--phone-ring),var(--elev-3);}
.phone__screen{position:relative;aspect-ratio:1125/2436;background:#F4F1EF;}
.phone__screen img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;}
@media (hover:hover) and (pointer:fine){
  .phone{transition:transform var(--dur-fast) var(--ease-out-soft),box-shadow var(--dur-fast) ease;}
  .phone:hover{transform:translateY(-6px);box-shadow:var(--elev-4);}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .phone{transition:none;}
  .phone:hover{transform:none;}
}
/* beat 01's back device carries its own .reveal-p so the pair can land
   80ms apart. That reveal's end state (transform:none) outranks the
   shared .phone:hover lift above, which would quietly kill the lift on
   that one device. Restore it at matching specificity. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.js .phone.reveal-p.is-visible:hover{transform:translateY(-6px);}
}

/* ============================================================
   PRODUCT CALLOUTS — the only legible layer in §3.

   The app screens render at 340px on desktop and under 300px on a
   phone, from 780px sources, so their interface text is texture, not
   evidence. Two callouts carry the states that matter, in words the
   reader can actually read. Beat 01 gets none: the pair is about
   range, and range is already in its subline.

   .phone has overflow:hidden, so a callout can never live inside it.
   .devicefig is a bare positioning box whose width tracks the phone,
   which is what both anchors measure from.

   The card is white on a white sheet (.beats uses --paper, which is
   #FFFFFF, not the off-white of the proof wall) so there is no tonal
   separation at all. --shadow-card does the lifting and --hairline
   guarantees an edge survives at low screen brightness. Both are
   existing tokens; the 16px radius is --radius-md from the design
   system, which is binding for radii. No brand colour on the card:
   the gradient belongs to the CTA, and a pink callout would compete
   with it in beat 02.
   ============================================================ */
.devicefig{position:relative;width:fit-content;margin-left:auto;margin-right:auto;}

.callout{
  /* card width, and how far it reaches INSIDE the screen.
     Values live in the breakpoints below; these are placeholders. */
  --callout-w:160px;
  --callout-in:132px;
  /* Not shown on phones. See the note under the component. */
  display:none;
  position:absolute;z-index:2;width:var(--callout-w);
  padding:12px 14px;border-radius:16px;text-align:left;
  background:var(--paper);border:1px solid var(--hairline);
  box-shadow:var(--shadow-card);
}
.callout span{display:block;}
/* 0.12em matches .eyebrow's caps tracking exactly. No accent colour
   here: this label is metadata, not a section marker. */
.callout__label{font-weight:600;font-size:11px;line-height:1.3;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-mute);}
.callout__value{margin-top:5px;font-weight:700;font-size:17px;line-height:1.25;
  letter-spacing:var(--tracking-body);color:var(--ink);}
.callout__detail{font-weight:400;font-size:14px;line-height:1.4;
  letter-spacing:var(--tracking-body);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;}

/* ---- NOT ON PHONES, and the reason is the premise, not the placement.
   (Olivia, 30 July, after seeing them at 390px.)

   These cards exist because a 780px app screen rendered at 340px turns
   its interface into texture. That is true on desktop, where the device
   sits across a wide field with the copy off to one side. It is NOT
   true in the stacked layout: the app's own type is large, so at 390px
   "Full Body / 20 min" and "Walk / April 8 / 15 min" both read fine on
   the screen itself. The callout then sits an inch above the same line
   in bigger type, which is duplication, not clarification. It also had
   to bridge a corner to fit, which ate the device's radius and made a
   centred column look lopsided.

   No placement fixes duplication, so the cards are desktop only. What
   that gives up is real and worth naming: this page is reached almost
   entirely from Instagram on iPhone, so the callouts now serve a small
   share of visitors. They are worth keeping for that share because on
   desktop they are the only legible layer in the section.

   Removing them also lets the stacked layout go back to its natural
   spacing. The 72px and 56px reservations that used to make room for
   the overhang are gone with them. */

/* ============================================================
   §3 HOW IT WORKS — one sheet: a thesis, then three beats.

   Previously three separate sheets spaced exactly like the moments
   around them, which is why they read as slabs. They are one
   section now: one lip, one surface, one lead line and three beats.

   The numbered eyebrows used to do the grouping. With the numbers
   gone it is carried by three things that were already on the page:
   the shared sheet, the two-tier gap (lead 56px, beats 76px), and
   the gradient dot on .eyebrow::before that all three share. Each
   beat still gets a different device silhouette so the eye is not
   shown the same shape three times.

   The top padding carries the extra 28px the pivot sheet used to
   add, so the felt air above that line is unchanged from v11.
   ============================================================ */
.beats{position:relative;background:var(--paper);
  padding:calc(var(--sec-pt) + 28px) var(--sec-x) var(--sec-pb);}
.beat{position:relative;}
/* beats sit at roughly half the distance the moments do — that ratio
   is what makes them read as a group of three rather than as three
   unrelated sections */
.beat + .beat{margin-top:76px;}

.split{display:flex;flex-direction:column;text-align:center;}
.split__copy{display:contents;}
/* display:contents makes the eyebrow a flex item, which blockifies its
   inline-flex box to full width — text-align:center no longer reaches it,
   so centre its own contents. No effect on desktop, where the eyebrow is
   inline-flex inside a normal block again. */
.split .eyebrow{justify-content:center;}
.split__media{order:2;margin-top:32px;}
/* Hidden on phones, shown again at 880px. Beat 02's device ends on the
   app's own gradient "Start my workout" pill, which is the point of that
   beat, and in the stacked layout a second near-identical gradient pill
   lands about 40px below it. The two read as a pair and the real CTA
   stops looking like a page control. The sticky bar covers mobile for
   the whole stretch between the hero and the close, so nothing is lost.
   (Olivia, 30 July.) */
.split__copy .cta-block{order:3;margin-top:40px;display:none;}
.split__media .phone{margin-left:auto;margin-right:auto;}

/* ---- beat 01: two overlapping devices. Plural, busy, "the range" ---- */
.phonepair{display:flex;justify-content:center;align-items:flex-start;padding-bottom:24px;}
.phonepair .phone{--phw:min(46vw,192px);}
.phonepair .phone--front{position:relative;z-index:2;transform:translateY(24px);
  box-shadow:var(--phone-ring),var(--elev-4);}
.phonepair .phone--back{margin-left:calc(var(--phw) * -0.4);z-index:1;
  box-shadow:var(--phone-ring),var(--elev-2);}

/* ---- beat 02: one whole device, larger. Complete, calm ----
   Nothing is cropped here on purpose: the screen ends on the app's own
   "Start my workout" button, which is the point of the beat. */
.beat--whole .split__media .phone{--phw:min(68vw,272px);}

/* ---- beat 03: the whole device, and the largest of the three ----
   This ran off the sheet through v11. The bleed (-88px) plus the
   proof wall's lip (-40px) hid 128px of a 585px-tall device on a
   375px phone: the bottom 22% of the screen, which is where "Add any
   movement" pays off into "Walk, April 8, 15 min". Raising the crop
   line could not fix it, because the 40px sheet lip alone already
   eats more than the ~30px of slack the screen has. So it is whole.

   Losing the bleed costs the group its one differentiated silhouette,
   so beat 03 now carries the largest device instead: 76vw against
   beat 02's 68vw. Read top to bottom the devices go small-and-plural,
   whole, largest, which is a crescendo into the proof wall. */
.beat--full .split__media{margin-top:36px;}
.beat--full .split__media .phone{--phw:min(76vw,300px);
  box-shadow:var(--phone-ring),var(--elev-4);}

/* ============================================================
   §4 PROOF WALL — one card at a time on mobile (scroll-snap
   carousel, neighbour peeking), 3-up grid on desktop
   ============================================================ */
.proofwall{position:relative;background:var(--paper-alt);text-align:center;
  padding:var(--sec-pt) var(--sec-x) var(--sec-pb);}
.pw-carousel{margin-top:26px;}
/* mobile track: full-bleed, side padding centers the snapped card
   and lets the neighbour peek in to signal swipeability */
.pw-track{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;
  margin:0 calc(-1 * var(--sec-x));padding:10px 9% 20px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pw-track::-webkit-scrollbar{display:none;}
.pw-track:focus-visible{outline:2.5px solid var(--ink);outline-offset:-2.5px;border-radius:22px;}
.pw-card{scroll-snap-align:center;
  background:var(--paper);border-radius:22px;padding:24px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;text-align:left;}
/* the lead line and the quiet line needed a real gap. 17/600 next to
   15/400 was not enough separation to read as hierarchy. */
.pw-qhead{font-weight:600;font-size:18.5px;line-height:1.38;letter-spacing:var(--tracking-display);
  color:var(--ink);text-wrap:pretty;}
.pw-body{margin:12px 0 20px;font-weight:400;font-size:14.5px;line-height:1.62;
  letter-spacing:var(--tracking-body);color:var(--ink-soft);text-wrap:pretty;}
/* attribution pinned to the card base behind a hairline, so all
   three cards share the same quiet footer line */
.pw-attr{margin-top:auto;padding-top:16px;border-top:1px solid var(--hairline);
  display:flex;align-items:center;gap:12px;}
.pw-av{flex:none;width:38px;height:38px;border-radius:999px;background:var(--paper-alt);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:var(--accent-text-strong);}
.pw-av img{width:100%;height:100%;object-fit:cover;} /* photo drop-in ready — keep */
.pw-who{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.4;text-align:left;}
.pw-name{font-weight:600;letter-spacing:var(--tracking-micro);color:var(--ink);}
.pw-src{font-weight:500;font-size:12px;letter-spacing:var(--tracking-micro);color:var(--ink-mute);}
/* dots — quiet, 36px touch targets, accent only on the active one.
   Without JS they can't navigate, so they only render when html.js is set. */
.pw-dots{display:none;justify-content:center;gap:2px;margin-top:2px;}
html.js .pw-dots{display:flex;}
.pw-dot{width:36px;height:36px;padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  transition:transform var(--dur-fast) var(--ease-out-soft);}
.pw-dot::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--ch-gray-400);
  transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out-soft);}
.pw-dot.is-on::after{background:var(--ch-rose);transform:scale(1.35);}
.pw-dot:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .pw-card{transition:transform var(--dur-fast) var(--ease-out-soft),box-shadow var(--dur-fast) ease;}
  .pw-card:hover{transform:translateY(-4px);box-shadow:var(--elev-3);}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .pw-card{transition:none;}
  .pw-card:hover{transform:none;}
}

/* ============================================================
   CTA BAND — connective tissue, not a section.

   Desktop had CTAs at the hero, at beat 02 and at the close, with
   three sections between the last two and no way to act. This one
   sits directly under the three reviews so it inherits their
   argument, which the topbar pill has none of.

   WHY IT IS NOT A .sheet. There is no free z value between the proof
   wall (z5) and the founder note (z6), and a sheet would also bring a
   lip, a 44px radius and a cast shadow, which is exactly the
   full-stage chrome this must not have. Instead it takes
   position:relative with z-index 5: the same layer as the proof wall
   but later in DOM order, so it paints above it and NOTHING
   downstream needs renumbering. It carries --paper-alt, the proof
   wall's own surface, so it reads as the closing line of the reviews
   rather than as a new moment.

   The seams, measured at 1280:
     margin-top:-96px pulls it into the proof wall's 160px bottom
       padding, leaving 64px from the last review card to the copy.
       Same surface colour, so the overlap is invisible.
     padding-bottom:132px absorbs the founder sheet's 44px lip, the
       way every other section carries it in --sec-pb, leaving 88px
       visible. Without this the lip would clip the band.
   Verified: proof wall ends 4700, band 4604 to 4792, founder starts
   4748. Content row is 56px tall.

   Hidden below 880px. The sticky bar already covers mobile and
   mobile CTA density was not to increase.
   ============================================================ */
.ctaband{display:none;}

/* ============================================================
   §5 FOUNDER NOTE — candid photo + short first-person block.
   DOM order is headline, photo, body so mobile shows her face
   before five paragraphs. Desktop re-places into the grid.
   ============================================================ */
.founder{position:relative;background:var(--paper);padding:var(--sec-pt) var(--sec-x) var(--sec-pb);}
.founder__in{max-width:420px;margin:0 auto;text-align:center;}
.founder__photo{margin:26px auto 0;width:100%;max-width:340px;aspect-ratio:4/5;
  border-radius:24px;overflow:hidden;box-shadow:var(--elev-2);}
.founder__body{margin:26px auto 0;font-weight:400;font-size:16px;line-height:1.62;
  letter-spacing:var(--tracking-body);color:var(--ink-soft);max-width:54ch;text-align:left;text-wrap:pretty;}
.founder__body p{margin:0 0 16px;}
.founder__body p:last-child{margin-bottom:0;}
/* the one line that carries the whole note, lifted out of the greyed body */
.founder__body .founder__key{font-weight:600;font-size:18px;line-height:1.45;color:var(--ink);
  letter-spacing:var(--tracking-body);}

/* ============================================================
   §6 FINAL CTA — full brand-gradient sheet.
   The gradient stays vivid across the top and deepens toward the
   base where the small type lives, so the close still reads as the
   brand gradient rather than a dusty overlay.
   ============================================================ */
.final{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:var(--ch-gradient);padding:60px var(--sec-x) 80px;}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(115% 75% at 50% -14%,rgba(255,255,255,.22),transparent 52%),
    radial-gradient(115% 78% at 50% 116%,
      rgba(78,17,79,.52) 0%,rgba(78,17,79,.34) 40%,rgba(78,17,79,0) 78%),
    linear-gradient(180deg,rgba(78,17,79,0) 22%,rgba(78,17,79,.14));}
.final__in{position:relative;z-index:1;max-width:640px;margin:0 auto;}
/* display type sits high on the sheet where the field is lightest, so it
   carries its own soft halo rather than leaning on a flat overlay */
.final h2{font-weight:700;letter-spacing:var(--tracking-display);color:#fff;
  font-size:clamp(34px,9.5vw,42px);line-height:1.1;text-wrap:balance;
  text-shadow:0 1px 2px rgba(78,17,79,.26), 0 2px 24px rgba(78,17,79,.34);}
/* .final__sub retired: the close now ends on the promise itself, so the
   headline and its old supporting line were saying one thing twice.
   The button moves up from 32px to 40px because it now answers the
   headline directly rather than a 19px line of supporting text. */
.final__action{margin:40px auto 0;max-width:392px;}
.final .cta{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(46,42,44,.24);}
.final .cta:active{background:#fff;transform:scale(.985);filter:none;}
.final .cta::after{display:none;}
/* trust lines — the conversion argument, not footnote type.
   The load-bearing line is 19px/700, which is WCAG "large text", and the
   deepened base of the sheet puts it at roughly 3.4:1. The second line is
   supporting detail at the same measured ratio; see the note in the
   handoff about the one remaining contrast gap. */
.final__trust{margin:26px auto 0;max-width:36ch;display:flex;flex-direction:column;gap:6px;}
.final__trust p{font-weight:600;font-size:15.5px;line-height:1.5;letter-spacing:var(--tracking-body);
  color:#fff;text-shadow:0 1px 10px rgba(78,17,79,.34);}
.final__trust p:first-child{font-weight:700;font-size:19px;}
/* store badges — smaller than the button, the fallback not the action */
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.badge{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;
  border-radius:12px;background:rgba(255,255,255,.18);color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.46);
  transition:transform var(--dur-fast) var(--ease-out-soft),background var(--dur-fast) ease;}
.badge:active{transform:scale(.97);}
.badge svg{flex:none;}
.badge__txt{display:flex;flex-direction:column;line-height:1;text-align:left;}
.badge__txt small{font-weight:500;font-size:11px;opacity:.92;letter-spacing:var(--tracking-micro);}
.badge__txt b{font-weight:600;font-size:14.5px;letter-spacing:var(--tracking-micro);margin-top:2px;}

/* the closing gradient sheet is static — everything on it was placed on purpose */

/* ============================================================
   §7 FOOTER — dark raisin, no navigation.
   The duplicate store-badge pair is gone. The final sheet directly
   above already carries both stores; repeating them here made the
   last thing on the page a second-rate copy of the close.
   ============================================================ */
.foot{position:relative;z-index:10;background:var(--raisin);color:#fff;text-align:center;
  padding:44px 24px calc(40px + env(safe-area-inset-bottom));}
/* the "Movement made for Moms" tagline came out (Olivia, 30 July), so the
   wordmark now leads straight into the contact line. Its bottom margin
   absorbs the 8px the tagline used to contribute, keeping the gap the
   footer had before. */
.foot__logo{height:20px;width:auto;margin:0 auto 24px;opacity:.95;}
.foot__email{margin-top:0;}
.foot__email a{font-weight:500;font-size:14px;color:rgba(255,255,255,.85);text-decoration:none;
  min-height:36px;display:inline-flex;align-items:center;letter-spacing:var(--tracking-body);}
.foot__links{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:center;}
.foot__links a{font-weight:400;font-size:12px;letter-spacing:var(--tracking-micro);
  color:rgba(255,255,255,.64);text-decoration:none;
  min-height:36px;display:inline-flex;align-items:center;}
.foot__fine{margin-top:12px;font-weight:500;font-size:12px;letter-spacing:var(--tracking-micro);color:rgba(255,255,255,.5);}
@media (hover:hover) and (pointer:fine){
  .foot__email a:hover{color:#fff;}
  .foot__links a:hover{color:rgba(255,255,255,.85);}
}

/* ============================================================
   STICKY BOTTOM CTA — glass bar; hides once the final CTA is in view.

   It used to carry the risk-reversal line. That came out (Olivia,
   30 July, overriding the earlier call): it rendered at 11.5px, below
   a comfortable floor, and the same reassurance already appears at
   the hero, at beat 02 and at the close.

   Losing a line is not the same as getting slimmer, so the padding
   came down with it. 10 + 52 + line + 10 was about 96px; 8 + 48 + 8
   is 65px including the top hairline. The pill keeps a 48px
   min-height, clear of the 44px touch floor, and the bottom padding
   still carries env(safe-area-inset-bottom) so it clears the home
   indicator.
   ============================================================ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgba(var(--glass-rgb),.84);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);
  border-top:1px solid var(--hairline);box-shadow:0 -4px 20px rgba(33,29,31,.07);
  transform:translateY(130%);transition:transform var(--dur-med) var(--ease-out-soft);
}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta__in{max-width:420px;margin:0 auto;}
.sticky-cta .cta{min-height:48px;font-size:16px;}

/* ============================================================
   RESPONSIVE — desktop is the same argument, laid out for the width
   ============================================================ */
@media (min-width:880px){
  :root{--sec-pt:120px;--sec-pb:160px;--sheet-lip:44px;--sheet-radius:44px;}

  .topbar__in{height:68px;justify-content:space-between;}
  .topbar::before{height:150px;}
  .topbar__logo{height:18px;}
  .topbar__logo--dark{left:24px;top:50%;transform:translateY(-50%);}
  /* a solid white pill over the hero. A ghost pill sat on the brightest
     corner of the photograph and effectively disappeared. */
  .topbar__cta{display:inline-flex;align-items:center;height:38px;padding:0 18px;
    border-radius:var(--radius-pill);font-weight:600;font-size:14px;
    letter-spacing:var(--tracking-body);text-decoration:none;
    background:rgba(255,255,255,.94);border:1px solid transparent;color:var(--ink);
    box-shadow:0 2px 10px rgba(46,42,44,.18);
    transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,
      color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out-soft),
      box-shadow var(--dur-fast) ease;}
  .topbar__cta:active{transform:translateY(0) scale(.97);}
  .topbar:not(.solid) .topbar__cta:focus-visible{outline-color:#fff;}
  .topbar.solid .topbar__cta{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none;}
  .sticky-cta{display:none;}

  .hero{min-height:clamp(620px,92svh,880px);}
  .hero__media img{object-position:50% 24%;}
  /* a pool of shade under the text block, not a wall across the frame:
     the type is protected and the picture is still a picture */
  .hero__scrim{background:
    radial-gradient(75% 72% at 16% 88%,rgba(46,42,44,.80),rgba(46,42,44,0) 72%),
    linear-gradient(to top,
      rgba(46,42,44,.72) 0%,
      rgba(46,42,44,.44) 20%,
      rgba(46,42,44,.14) 40%,
      rgba(46,42,44,0) 58%);}
  .hero__panel{padding:0 36px 92px;}
  .hero__inner{max-width:640px;}
  .hero h1{font-size:clamp(52px,5.4vw,68px);line-height:1.04;}
  .hero__sub{margin-top:18px;max-width:44ch;font-size:19px;}
  .hero__cta{margin-top:30px;}

  .acclaim__in{max-width:760px;}
  .acclaim__quote{margin-top:26px;max-width:38ch;font-size:clamp(30px,2.9vw,36px);}
  .acclaim__attr{margin-top:26px;font-size:15px;}

  .sec-h{margin-top:14px;font-size:clamp(32px,3.3vw,38px);line-height:1.12;}
  .sec-p{font-size:17px;}

  .pivot__mark{margin-bottom:38px;}
  .pivot__h{max-width:10.5em;font-size:clamp(42px,4.4vw,52px);line-height:1.08;}

  /* ---- the beats ---- */
  /* same tiering as mobile: the lead sits closer to beat 01 than the
     beats sit to each other, so it reads as their header */
  .beats__lead{margin-bottom:100px;}
  .beat + .beat{margin-top:136px;}

  /* ---- the split: copy one side, product the other, alternating ---- */
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:72px;align-items:center;max-width:var(--maxw-split);margin:0 auto;text-align:left;}
  /* the copy block becomes a real box again, so the CTA rides with it */
  .split__copy{display:block;grid-column:1;grid-row:1;}
  .split__media{grid-column:2;grid-row:1;margin-top:0;order:0;}
  /* reversed rows put the product on the left. DOM order stays
     copy-then-media, so the reading order never inverts. */
  .split--rev .split__copy{grid-column:2;}
  .split--rev .split__media{grid-column:1;}
  .split__copy .sec-p{margin-left:0;margin-right:0;}
  .split__copy .cta-block{display:block;margin-left:0;margin-right:0;}
  /* the pill fills the 392px block here, so the risk line centres under
     the button rather than hanging off its left edge */
  .hero .risk{text-align:left;}
  .split .cta{width:100%;}

  .split__media .phone{--phw:300px;}
  .phonepair{padding-bottom:28px;}
  .phonepair .phone{--phw:214px;}
  .phonepair .phone--front{transform:translateY(26px);}
  .beat--whole .split__media .phone{--phw:300px;}
  .beat--full .split__media .phone{--phw:320px;}
  .beat--full .split__media{margin-top:0;}

  /* ---- the callouts appear here, on the outer side edge ----
     Side by side now, so the device sits in a column with the copy
     beside it and the annotation earns its place. One anchor for
     every width from here up: each card on the edge away from its own
     copy column, which puts beat 02's on the left and beat 03's on
     the right because beat 02 uses split--rev. That, plus one high
     anchor and one low one, is what keeps the two single-device beats
     from reading as twins.

     The geometry is FLUID, not stepped, and that is the point. Stepped
     values meant the card sat at one deep inset all the way from 880 to
     1199, so on a smaller desktop window it covered a third of the
     screen behind it, including most of beat 02's photo. Now the card
     pushes out as far as each width allows and only sits deep when it
     genuinely has to, so coverage shrinks continuously as the window
     grows instead of jumping at a breakpoint.

     --callout-out is the protrusion past the device edge, and its
     middle term is the measured space available. For beat 03, which
     binds because it is the wider device, that space is 0.25 x
     viewport - 190px between 880 and 1128, then more above that. The
     formula uses 194px, which keeps a 4px safety margin the whole way.
     It is capped at --callout-w minus 54px so the card never pulls so
     far out that it stops touching the screen. */
  .callout{display:block;
    --callout-w:clamp(144px, calc(11vw + 47px), 180px);
    --callout-out:clamp(22px, calc(25vw - 194px), calc(var(--callout-w) - 54px));
    --callout-in:calc(var(--callout-w) - var(--callout-out));}
  .callout--high{left:auto;right:calc(100% - var(--callout-in));bottom:auto;top:32%;}
  .callout--low{right:auto;left:calc(100% - var(--callout-in));top:auto;bottom:34%;}

  /* proof wall: the track becomes a plain 3-up grid, dots retire */
  .pw-carousel{margin-top:44px;}
  .pw-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);gap:20px;
    margin:0 auto;padding:0;max-width:1080px;overflow:visible;}
  .pw-card{padding:30px 28px 24px;}
  html.js .pw-dots{display:none;}

  /* ---- the CTA band. See the note above §5 for the seam maths ---- */
  .ctaband{display:block;position:relative;z-index:5;
    background:var(--paper-alt);
    margin-top:-96px;padding:0 var(--sec-x) 132px;}
  /* one row: copy left, pill right. Every section around this one is
     centred, so the axis change is most of what keeps it from reading
     as another moment. */
  .ctaband__in{max-width:var(--maxw-split);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:40px;}
  /* below .sec-h at 38px and above body at 17px: present, not a header */
  .ctaband__line{font-weight:600;font-size:21px;line-height:1.35;
    letter-spacing:var(--tracking-body);color:var(--ink);}
  .ctaband__risk{margin-top:6px;font-weight:500;font-size:13px;line-height:1.5;
    letter-spacing:var(--tracking-micro);color:var(--ink-mute);}
  /* the pill sizes to its label here rather than filling a column */
  .ctaband .cta{flex:none;width:auto;}

  .founder__in{max-width:900px;display:grid;grid-template-columns:340px minmax(0,1fr);
    gap:18px 64px;align-items:center;text-align:left;}
  /* the eyebrow and headline travel together as one cell, so the pair
     keeps the same relationship it has in the beats. .sec-h's own 14px
     top margin is the gap, which is why the old margin-top:0 override
     is gone: it was only there when the headline was the first thing
     in the cell. */
  .founder__in .founder__head{grid-column:2;grid-row:1;align-self:end;}
  .founder__photo{grid-column:1;grid-row:1 / span 2;margin:0;}
  .founder__body{grid-column:2;grid-row:2;align-self:start;margin:14px 0 0;font-size:17px;}
  .founder__body .founder__key{font-size:19px;}

  .final{padding:96px 24px 120px;}
  .final h2{font-size:clamp(44px,4.4vw,54px);line-height:1.08;}

  /* pills size to their label on desktop; full width stays mobile-only */
  .cta{width:auto;padding:0 40px;}
  .sticky-cta__in{text-align:center;}
}

/* a wider tier: keep the split from stretching past comfortable measure */
@media (min-width:1200px){
  .split{gap:96px;}
  .split__media .phone{--phw:318px;}
  .phonepair .phone{--phw:228px;}
  .beat--whole .split__media .phone{--phw:318px;}
  .beat--full .split__media .phone{--phw:340px;}

  /* ---- the columns open up, so the card breathes out of the device ----
     The cards sit in the body of the device and overlap real interface
     rather than margin. That is deliberate: what is underneath is
     illegible at display size, which is the reason the cards exist.

     The device grows here (320 to 340) and the gap widens (72 to 96),
     which eats back some of the room the wider viewport gives, so the
     protrusion needs its own formula: available space for beat 03 is
     0.5 x viewport - 488px from 1200 up. Using 492px keeps the same
     4px safety margin as the band below.

     The cap is what lands the approved numbers exactly: --callout-w
     tops out at 180px and --callout-out at 126px, so from 1280 up the
     card is 180px wide sitting 54px inside the screen, which is the
     geometry signed off at 1280. At 1200 the same rules give 179px
     with 108px protruding, comfortably inside the 112px available. */
  .callout{--callout-out:clamp(22px, calc(50vw - 492px), calc(var(--callout-w) - 54px));}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .sticky-cta,.topbar,.topbar__logo{transition:none;}
}

/* ============================================================
   MOTION — gentle fade/rise reveals; end-state is the base style.
   Hidden only when JS is present (html.js) and motion is allowed,
   so no-JS and reduced-motion users always see full content.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal,html.js .reveal-u{opacity:0;transform:translateY(12px);
    transition:opacity var(--dur-base) var(--ease-out-soft),transform var(--dur-base) var(--ease-out-soft);}
  html.js .reveal.is-visible,html.js .reveal-u.is-visible{opacity:1;transform:none;}

  /* phones settle calmly — the spring lives on button presses, not devices */
  html.js .reveal-p{opacity:0;transform:translateY(12px) scale(.985);
    transition:opacity var(--dur-base) var(--ease-out-soft),transform var(--dur-base) var(--ease-out-soft);}
  html.js .reveal-p.is-visible{opacity:1;transform:none;}

  /* .reveal-s and its 45ms chip stagger retired with the duration
     pills. Beat 01 keeps a staggered entrance the cheaper way: its
     back device carries its own .reveal-p at data-delay 260 while
     the pair's wrapper runs at 180, so the two phones land 80ms
     apart and beat 01 still enters unlike 02 and 03. The JS still
     queries .reveal-s harmlessly; left in place so the selector is
     there if chips ever come back. */

  /* hero: parallax hook (JS sets --py) + one-time cinematic load, pure CSS */
  .hero__media{transform:translate3d(0,var(--py,0),0) scale(var(--hero-scale,1));}
  html.js .hero__media{animation:hero-zoom 2.4s var(--ease-out-soft) both;}
  html.js .hero__scrim{animation:hero-fade var(--dur-slow) var(--ease-out-soft) both;}
  html.js .hero__panel{animation:hero-fade var(--dur-slow) var(--ease-out-soft) .08s both;}
  @media (max-width:879px){
    html.js .hero__media{animation:hero-zoom-m 2.4s var(--ease-out-soft) both;}
  }
}