/* Apex marketing site: shared styles (all pages). Ported from the approved mockup
   (design/site-mockup/assets/site.css). The hero animation lives in hero.css. */

:root {
  --paper: #F6F0E6; --card: #FFFCF6; --ink: #2D2522; --ink-2: #5B4F49; --ink-3: #6E625B;
  --rose: #E8445A; --rose-deep: #C42F47; --rose-ink: #B02A41; --blue: #3D8BF0; --blue-deep: #1F66C9;
  --sun: #F9BE2F; --leaf: #4CB866; --leaf-deep: #2E7D45; --lilac: #9C82F0; --lilac-deep: #6B4FD1;
  --peach: #FBB38A; --pink: #F7A1B5; --sky: #7CC3F5; --mint: #B9E3A8;
  --tint-pink: #FBE1E3; --tint-lilac: #E9E2FB; --tint-sky: #DDEEFC; --tint-leaf: #D9EFCF; --tint-sun: #FDEBC0;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 28px;
  --shadow: 0 1px 0 rgba(45,37,34,.05), 0 18px 40px -22px rgba(45,37,34,.28);
  --wrap: 1200px;
  --focus: 0 0 0 3px var(--card), 0 0 0 6px var(--blue-deep);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* paper tooth, like the app's cream paper (grain pre-baked under its paper veil) */
  background: var(--paper) url(img/tex/paper.webp) 0 0 / 420px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 900; letter-spacing: -0.025em; line-height: 1.02; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main:focus { outline: none; }

/* ── accessibility ──────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .nav ul a:focus-visible, summary:focus-visible, .menu:focus-visible { outline: none; box-shadow: var(--focus); }
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 12px;
  background: var(--ink); color: var(--card); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }
mark { background: var(--sun); color: var(--ink); border-radius: 4px; padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ── type ───────────────────────────────────────────────────────── */
.crayon { filter: url(#crayonText); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rose-ink);
}
.lead { font-size: 21px; color: var(--ink-2); line-height: 1.5; }
.u-rose  { background: url(draw/line-rose.svg)  no-repeat 0 100% / 100% .32em; padding-bottom: .1em; }
.u-blue  { background: url(draw/line-blue.svg)  no-repeat 0 100% / 100% .32em; padding-bottom: .1em; }
.u-lilac { background: url(draw/line-lilac.svg) no-repeat 0 100% / 100% .32em; padding-bottom: .1em; }
.swash-sun, .swash-pink, .swash-sky, .u-rose, .u-blue, .u-lilac { white-space: nowrap; }
.swash-sun  { background: url(draw/swash-sun.svg)  no-repeat 0 70% / 100% .62em; padding: 0 .08em; margin: 0 -.08em; }
.swash-pink { background: url(draw/swash-pink.svg) no-repeat 0 70% / 100% .62em; padding: 0 .08em; margin: 0 -.08em; }
.swash-sky  { background: url(draw/swash-sky.svg)  no-repeat 0 70% / 100% .62em; padding: 0 .08em; margin: 0 -.08em; }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; font: 800 18px/1 var(--font); color: #fff; text-decoration: none;
  white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--rose-deep) url(img/tex/wax.webp) 0 0 / 320px 72px no-repeat; filter: url(#ink);
  transition: transform .2s ease;
}
.btn:hover::before { transform: scale(1.03); }
.btn.sm { padding: 11px 18px; font-size: 15px; }
.btn.ghost { color: var(--ink); }
.btn.ghost::before { background: var(--card); box-shadow: inset 0 0 0 2.5px var(--ink); filter: none; }
.store {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 18px;
  background: var(--ink); color: var(--card); box-shadow: var(--shadow);
}
.store img { width: 44px; height: 44px; border-radius: 11px; }
.store small { display: block; font-size: 12px; font-weight: 600; opacity: .85; letter-spacing: .01em; }
.store b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }

/* ── nav ────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40; background: rgba(246,240,230,.9);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(45,37,34,.07);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.nav .logo { border-radius: 10px; }
.nav .logo img { height: 46px; width: auto; }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--ink-2); }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); background: rgba(45,37,34,.06); }
.nav .menu { display: none; }

/* ── hero ───────────────────────────────────────────────────────── */
/* The whole hero (copy, phone, and the ground strip where Ava and Leo meet) fits the first screen.
   --sw/--sh: the 1600 × 300 ground stage (hero.css) scaled to the window; --reserve keeps the
   phone clear of the runners' heads, the heart and the chapter page. */
.hero {
  --nav: 77px; --sw: max(100vw, 1200px); --sh: calc(var(--sw) * 3 / 16); --reserve: calc(var(--sh) * .57);
  --hero-h: clamp(600px, calc(100svh - var(--nav)), 1040px); --pad-top: clamp(14px, 3.4svh, 44px);
  --scene-h: min(calc(var(--hero-h) - var(--pad-top) - var(--reserve)), 700px, 48vw);
  position: relative; height: var(--hero-h); overflow: hidden;
}
.hero .wrap {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0;
  align-items: start; padding-top: var(--pad-top);
}
.hero .copy { padding: clamp(0px, 2svh, 28px) 24px 0 0; }
.hero h1 { font-size: clamp(56px, min(6.6vw, 11.4svh - 10px), 96px); line-height: .95; margin: 0 0 clamp(14px, 2.6svh, 24px); }
.hero h1 .u-rose { background-size: 100% .2em; padding-bottom: .06em; }
.hero .lead { text-wrap: pretty; max-width: 28.5em; margin: 0 0 clamp(18px, 3.2svh, 30px); font-size: clamp(18px, 2.3svh, 20px); }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.free-note { display: flex; align-items: center; gap: 10px; margin: clamp(14px, 2.6svh, 22px) 0 0; font-weight: 700; color: var(--ink-2); font-size: 16px; }
.free-note img { width: 30px; height: 30px; }
.trust { display: flex; gap: 8px 18px; margin: clamp(12px, 2.2svh, 20px) 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.trust img { width: 28px; height: 28px; }

/* Sunny, the speech bubble and the phone: one 760 × 700 composition sized by the free height */
.scene { position: relative; height: var(--scene-h); aspect-ratio: 760 / 700; margin-right: -56px; }
/* keep the phone just left of the Peak & Path flag on the hill (stage x 1340 = 83.75 % of the window),
   while leaving the copy column at least ~470 px (so the two buttons stay on one row) */
@media (min-width: 1200px) {
  .hero { --scene-h: min(calc(var(--hero-h) - var(--pad-top) - var(--reserve)), 700px, calc(36.5vw + 86px)); }
  .hero .scene { margin-right: max(-56px, calc(586px - 33.75vw - var(--scene-h) * .163)); }
}
.scene > * { position: absolute; }
.scene .phone { left: 47%; top: 3%; width: 38%; transform: rotate(4deg); }
.scene .bubble { left: 0; top: 49%; width: 40%; }
.scene .stk { width: 6.5%; }
.scene .s1 { left: 89%; top: 22%; transform: rotate(12deg); }
.scene .s2 { left: 4%; top: 6%; width: 5.5%; }
.scene .s3 { left: 39%; top: 2%; width: 5%; transform: rotate(-10deg); }

/* A device frame: graphite rim with a polished edge, black bezel, side buttons, soft shadow on the paper */
.phone {
  aspect-ratio: 1280 / 2622; padding: 1.3%; border-radius: 14.4% / 7%;
  background: linear-gradient(150deg, #6b5d55 0%, #2b221e 16%, #17110f 45%, #241c19 80%, #5e5049 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 0 1.2px #0f0b0a, inset 0 1px 3px 2px rgba(255,255,255,.08),
    0 1px 1px rgba(45,37,34,.22), 0 10px 18px -8px rgba(45,37,34,.32),
    0 34px 46px -22px rgba(45,37,34,.42), 0 70px 80px -50px rgba(45,37,34,.38);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 1.6%; border-radius: 2px; background: linear-gradient(90deg, #3a2f2a, #17110f); }
.phone::before { /* action button, volume up, volume down */
  left: -1.1%; top: 17%; height: 21%;
  background: linear-gradient(#2b221e 0 14%, transparent 14% 30%, #2b221e 30% 62%, transparent 62% 68%, #2b221e 68% 100%);
}
.phone::after { right: -1.1%; top: 27%; height: 11%; background: #2b221e; }
.phone > img { width: 100%; height: 100%; object-fit: cover; border-radius: 13.2% / 6.4%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }

.bubble {
  background: var(--card); border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow);
  font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink);
}
.bubble small { display: block; color: var(--rose-ink); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; margin-bottom: 2px; }
.bubble::after {
  content: ""; position: absolute; top: -9px; left: 46%; width: 20px; height: 20px; background: var(--card);
  transform: rotate(45deg); border-radius: 4px;
}

/* ── bands with hand-drawn edges ────────────────────────────────── */
.band { position: relative; }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; background-repeat: repeat-x; background-size: 720px 40px; }
.band::before { top: -39px; }
.band::after { bottom: -39px; }
.band.sun { background: url(draw/fill-sun.svg) center top / 1600px 700px repeat-y, var(--sun); }
.band.sun::after { background: url(draw/edge-bot-sunfield.svg) center top / max(1600px, 100vw) 44px no-repeat; height: 44px; bottom: -43px; }
.band.lilac { background: var(--tint-lilac); }
.band.lilac::before { background-image: url(draw/edge-top-lilac.svg); }
.band.lilac::after { background-image: url(draw/edge-bot-lilac.svg); }
.band.pink { background: var(--tint-pink); }
.band.pink::before { background-image: url(draw/edge-top-pink.svg); }
.band.pink::after { background-image: url(draw/edge-bot-pink.svg); }

/* ── free strip ─────────────────────────────────────────────────── */
.free { padding: 44px 0 50px; }
.band.free::before { display: none; }
.free .wrap { display: grid; grid-template-columns: auto 1fr 1.1fr; gap: 56px; align-items: center; }
.free h2 { font-size: 76px; line-height: .9; }
.strikes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.strikes li { font-size: 28px; font-weight: 900; letter-spacing: -.02em; position: relative; width: max-content; color: rgba(45,37,34,.86); }
.strikes s { text-decoration: none; }
.strikes li::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 46%; height: 16px;
  background: url(draw/line-rose.svg) no-repeat 0 0 / 100% 100%; transform: rotate(-3deg);
}
.strikes li:nth-child(2)::after { transform: rotate(2deg); }
.strikes li:nth-child(3)::after { transform: rotate(-1deg); }
.free p { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; }
.free p b { font-weight: 900; }
.free .gift { display: flex; gap: 18px; align-items: flex-start; }
.free .gift img { width: 76px; flex: none; transform: rotate(-6deg); }

/* ── generic section ────────────────────────────────────────────── */
section { position: relative; }
.sec { padding: 112px 0; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.sec-head h2 { font-size: 64px; margin: 14px 0 18px; }
.sec-head .lead { margin: 0 auto; max-width: 34em; }

/* ── how it works ───────────────────────────────────────────────── */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; margin: 0; padding: 0; }
.step { background: var(--card); border-radius: var(--r-card); padding: 26px 26px 30px; box-shadow: var(--shadow); position: relative; }
.step .num {
  position: absolute; top: -26px; left: 22px; width: 54px; height: 54px; display: grid; place-items: center;
  font-weight: 900; font-size: 24px; color: var(--ink); background: url(draw/dot-sun.svg) 0 0 / 100%;
}
.step .art { height: 190px; border-radius: 20px; margin-bottom: 22px; display: grid; place-items: center; position: relative; overflow: hidden; }
.tint-pink { background: var(--tint-pink); } .tint-lilac { background: var(--tint-lilac); } .tint-leaf { background: var(--tint-leaf); }
.step h3 { font-size: 27px; margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-2); font-size: 17px; }
.choose { display: flex; gap: 14px; }
.choose div { width: 128px; background: var(--card); border-radius: 18px; padding: 14px 10px 10px; text-align: center; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); }
.choose div.on { outline: 3px solid var(--rose); }
.choose img { width: 58px; margin: 0 auto 6px; }
.choose img.round { border-radius: 50%; }
.choose small { display: block; font-weight: 600; color: var(--ink-3); font-size: 12px; }
.choose.three { gap: 8px; }
.choose.three div { width: 86px; padding: 10px 4px 8px; font-size: 12.5px; line-height: 1.15; }
.choose.three img { width: 46px; height: 46px; object-fit: contain; }
.choose.three small { font-size: 11px; margin-top: 3px; }
/* two cards: the beta, with Summit hidden (scripts/site/flags.mjs) */
.choose.two div { width: 122px; padding: 12px 8px 10px; line-height: 1.2; }
.choose.two img { width: 54px; height: 54px; object-fit: contain; }
.choose.two small { margin-top: 2px; }
.faces { display: grid; grid-template-columns: repeat(4, 54px); gap: 10px; }
.faces img { width: 54px; border-radius: 50%; }
.faces img.on { outline: 3px solid var(--rose); outline-offset: 2px; }
.move { display: flex; align-items: flex-end; gap: 6px; }
.move img { width: 74px; }
.move img.walker { width: 62px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  font-weight: 800; background: var(--card); box-shadow: var(--shadow);
}
.tag img { width: 22px; }
.step .tag { position: absolute; right: 14px; top: 14px; }
/* the phone plays the setup screens; the cards beside it light up in step (phones.css) */
.how { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 76px; align-items: center; max-width: 1060px; margin: 0 auto; }
.how-phone { position: relative; padding-left: 8px; }
.how-phone::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--tint-sun) 0%, rgba(253,235,192,.55) 55%, rgba(253,235,192,0) 100%); }
.how-phone .phone { position: relative; transform: rotate(-3deg); --untilt: 3deg; }
.how .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.how .step { display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; column-gap: 28px; padding: 22px 26px 22px 22px; }
.how .step .art { grid-row: 1 / 4; height: 170px; margin: 0; }
.how .step h3 { grid-row: 2; margin: 0 0 6px; }
.how .step p { grid-row: 3; }

/* ── stories ────────────────────────────────────────────────────── */
.stories { padding: 100px 0 120px; margin: 30px 0; }
.story { display: grid; grid-template-columns: 1.18fr 1fr; gap: 72px; align-items: center; }
.story + .story { margin-top: 120px; }
.story.flip { grid-template-columns: 1fr 1.18fr; }
.story.flip .pic { order: 2; }
.pic { position: relative; }
.frame {
  background: var(--card); padding: 12px; border-radius: 26px; transform: rotate(-1.4deg); box-shadow: var(--shadow);
  position: relative;
}
.flip .frame { transform: rotate(1.2deg); }
.frame img { border-radius: 16px; width: 100%; aspect-ratio: 1080 / 675; object-fit: cover; }
.frame .tape { position: absolute; width: 110px; top: -16px; border-radius: 0; }
.frame .tape.l { left: 26px; transform: rotate(-8deg); }
.frame .tape.r { right: 26px; transform: rotate(7deg); }
.frame .cap {
  position: absolute; left: 26px; bottom: 26px; background: rgba(255,252,246,.95); border-radius: 14px; padding: 8px 14px;
  font-size: 14px; font-weight: 800; box-shadow: var(--shadow);
}
.frame .cap span { color: var(--rose-ink); }
.flip .frame .cap { left: auto; right: 26px; }
.pic .phone { position: absolute; width: 168px; right: -36px; bottom: -64px; transform: rotate(6deg); }
.flip .pic .phone { right: auto; left: -36px; transform: rotate(-6deg); }
.pic .snap { position: absolute; width: 230px; right: -30px; bottom: -70px; margin: 0; background: var(--card); padding: 8px 8px 22px; border-radius: 14px; box-shadow: var(--shadow); transform: rotate(5deg); }
.flip .pic .snap { right: auto; left: -30px; transform: rotate(-5deg); }
.pic .snap img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 675; object-fit: cover; border-radius: 8px; }
.mode {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; font-weight: 800; font-size: 15px;
}
.mode img { width: 26px; }
.mode.couple { background: #FFFFFF; color: var(--rose-ink); box-shadow: inset 0 0 0 2px var(--pink); }
.mode.single { background: #FFFFFF; color: var(--blue-deep); box-shadow: inset 0 0 0 2px var(--sky); }
.mode.duo { background: #FFFFFF; color: var(--blue-deep); box-shadow: inset 0 0 0 2px var(--sky); }
.mode.summit { background: #FFFFFF; color: var(--rose-ink); box-shadow: inset 0 0 0 2px var(--sun, #F6C453); }
.story h3 { font-size: 54px; margin: 18px 0 18px; }
.story > div > p:not(.mode) { font-size: 19px; color: var(--ink-2); margin: 0 0 22px; }
.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 17px; }
.ticks img { width: 34px; flex: none; }
.chapters { display: flex; gap: 8px; align-items: center; }
.chapters figure { margin: 0; position: relative; width: 64px; }
.chapters figure img { width: 64px; height: 42px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 2px var(--card), var(--shadow); }
.chapters figure.lock img { filter: grayscale(1) blur(1.2px); opacity: .55; }
.chapters figure.lock::after { content: ""; position: absolute; inset: 0; background: url(img/icons/lock.webp) center / 26px no-repeat; }
.chapters .lbl { font-size: 14px; font-weight: 800; color: var(--ink-3); margin-left: 8px; line-height: 1.25; white-space: nowrap; }

/* ── features ───────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--card); border-radius: var(--r-card); padding: 30px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.card h3 { font-size: 28px; margin: 14px 0 8px; }
.card p { margin: 0; color: var(--ink-2); font-size: 17px; }
.card .ic { width: 64px; }
.card .eyebrow { color: var(--rose-ink); }
.card.span2 { grid-column: span 2; }
.card.span3 { grid-column: span 3; }
.parade { position: relative; height: 170px; margin: -30px -30px 18px; background: var(--tint-sky) url(draw/parade.svg) center bottom / cover no-repeat; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 24px 26px; }
.parade img { width: 66px; }
.parade img:nth-child(odd) { margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { padding: 7px 13px; border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 14px; }
.chips li:first-child { background: var(--tint-pink); }
.chips li:nth-child(2) { background: var(--tint-sky); }
.chips li:nth-child(3) { background: var(--tint-leaf); }
.minimap { border-radius: 18px; margin: -6px 0 16px; width: 100%; aspect-ratio: 360/220; object-fit: cover; }
.icons-row { display: flex; gap: 6px; margin-bottom: 4px; }
.icons-row img { width: 56px; }
.card.coach { display: grid; grid-template-columns: 210px 1fr auto; gap: 36px; align-items: center; background: var(--tint-sun); }
.card.coach img.sun { width: 200px; }
.card.coach h3 { font-size: 34px; }
.card.coach .bubbles { display: grid; gap: 10px; }
.card.coach .bubbles span { background: var(--card); padding: 10px 16px; border-radius: 18px 18px 18px 6px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow); max-width: 300px; }
.card.coach .bubbles span:nth-child(2) { margin-left: 26px; }

/* ── safety ─────────────────────────────────────────────────────── */
.safety { padding: 100px 0 120px; margin: 30px 0; }
.safety .wrap { display: grid; grid-template-columns: .8fr 1.35fr; gap: 56px; align-items: start; }
.safety .side { position: sticky; top: 110px; }
.safety h2 { font-size: 64px; margin: 14px 0 20px; }
.club-phone { width: 222px; margin: 44px 0 0 26px; }
.club-phone .phone { position: relative; transform: rotate(-4deg); --untilt: 4deg; }
.safety .side .chips li { background: var(--card); }
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
.promise { background: var(--card); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.promise img { width: 52px; }
.promise h3 { font-size: 21px; letter-spacing: -.015em; margin: 2px 0 6px; line-height: 1.15; }
.promise p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.45; }

/* ── faq ────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; max-width: 1080px; margin: 0 auto; align-items: start; }
details { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 0 26px; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 800; font-size: 19px; border-radius: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--tint-sun); font-size: 22px; font-weight: 900; }
details[open] summary::after { content: "\2212"; background: var(--tint-pink); }
details p { margin: -6px 0 22px; color: var(--ink-2); font-size: 17px; }
details p a, .more-help a, .prose a, .help a { color: var(--rose-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.more-help { text-align: center; margin: 36px auto 0; font-weight: 700; color: var(--ink-2); }

/* ── closing CTA ────────────────────────────────────────────────── */
.closer { padding: 40px 0 40px; }
.closer .panel {
  position: relative; border-radius: 40px; padding: 64px 60px 230px; text-align: center; overflow: hidden;
  background: url(draw/hero-hills.svg) center bottom -40px / 1600px 300px no-repeat, var(--tint-sky);
}
.closer .panel .hug { position: absolute; left: 50%; bottom: 36px; width: 120px; margin-left: -60px; }
.closer .panel .cl { position: absolute; width: 130px; opacity: .95; }
.closer .panel .cl.c1 { left: 7%; top: 12%; }
.closer .panel .cl.c2 { right: 8%; top: 20%; width: 100px; }
.closer .panel .sun { width: 150px; margin: -10px auto 8px; }
.closer h2 { font-size: 64px; margin-bottom: 16px; }
.closer .cta-row { justify-content: center; margin-top: 30px; }

/* ── footer ─────────────────────────────────────────────────────── */
.site-footer { position: relative; background: url(draw/footer-hills.svg) no-repeat center top / max(1600px, 100vw) auto; margin-top: -40px; padding-top: 150px; }
.site-footer::before { content: ""; position: absolute; inset: 220px 0 0; background: var(--leaf); z-index: -1; }
.site-footer .wrap { position: relative; padding-bottom: 40px; }
.site-footer .top { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.site-footer .brand { background: var(--card); border-radius: 26px; padding: 18px 24px; box-shadow: var(--shadow); max-width: 380px; }
.site-footer .brand img { height: 56px; width: auto; }
.site-footer .brand p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); font-weight: 600; }
.site-footer nav { max-width: 640px; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 10px; flex-wrap: wrap; justify-content: flex-end; }
.site-footer nav a {
  display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(255,252,246,.92);
  font-weight: 800; color: var(--ink); text-decoration: none; font-size: 16px;
}
.site-footer nav a:hover, .site-footer nav a[aria-current] { background: var(--card); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .meta { margin-top: 34px; padding-top: 22px; border-top: 2px dashed rgba(45,37,34,.35); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.site-footer .nocookie { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,252,246,.92); border-radius: 999px; padding: 6px 16px 6px 8px; }
.site-footer .nocookie img { width: 28px; height: 28px; }

/* ── legal & help pages ─────────────────────────────────────────── */
.legal-hero { padding: 64px 0 24px; }
.legal-hero h1 { font-size: 72px; margin: 14px 0 12px; }
.legal-hero .meta { color: var(--ink-3); font-weight: 700; font-size: 16px; }
.page-hero .lead { max-width: 36em; margin-top: 10px; }
.short { background: var(--tint-sun); border-radius: 28px; padding: 28px 32px; margin: 34px 0 0; }
.short h2 { font-size: 26px; margin: 0 0 20px; }
.short ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px 24px; }
.short li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.short li strong { font-weight: 800; color: var(--ink); }
.short img { width: 40px; flex: none; }
.short-note { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.legal { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 64px; padding: 40px 32px 200px; align-items: start; }
.toc { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border-radius: 24px; padding: 22px 18px; box-shadow: var(--shadow); }
.toc-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.toc a::before { content: counter(t); width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 12px; font-weight: 900; }
.toc a:hover { background: var(--paper); color: var(--ink); }
.toc a[aria-current] { background: var(--tint-pink); color: var(--ink); }
.toc a[aria-current]::before { background: var(--rose-deep); color: #fff; }
.prose { max-width: 740px; min-width: 0; }
.prose > p:first-child { margin-top: 0; }
.prose h2 { font-size: 34px; margin: 56px 0 16px; display: inline-block; padding-bottom: .16em; background: url(draw/line-sun.svg) no-repeat 0 100% / 100% .3em; }
.prose h3 { font-size: 22px; margin: 32px 0 8px; letter-spacing: -.01em; line-height: 1.2; }
.prose p, .prose li { font-size: 18px; line-height: 1.7; color: #3E3430; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 18px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--rose-deep); font-weight: 800; }
.prose ol.clauses { list-style: none; padding-left: 0; }
.prose ol.clauses > li { padding-left: 52px; position: relative; }
.prose .clause-no { position: absolute; left: 0; top: 0; font-weight: 900; color: var(--rose-ink); }
.prose strong { color: var(--ink); }
.prose code { font-size: .9em; background: var(--card); padding: .1em .3em; border-radius: 5px; }
.table-wrap { margin: 8px 0 24px; overflow-x: auto; border-radius: 18px; box-shadow: var(--shadow); background: var(--card); }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(45,37,34,.08); vertical-align: top; line-height: 1.5; }
.prose td { color: #3E3430; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { background: var(--tint-lilac); font-weight: 800; }
.credit { margin-top: 56px; padding: 20px 24px; border-radius: 20px; border: 2px dashed rgba(45,37,34,.22); }
.credit p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 30px 32px 200px; align-items: start; }
.help-card { background: var(--card); border-radius: var(--r-card); padding: 30px; box-shadow: var(--shadow); }
.help-card.contact { grid-column: 1 / -1; display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: start; background: var(--tint-sun); }
.help-card.wide { grid-column: 1 / -1; }
.help-card.contact .big { width: 96px; transform: rotate(-6deg); }
.help-card h2 { display: flex; align-items: center; gap: 12px; font-size: 28px; margin: 0 0 14px; }
.help-card h2 img { width: 44px; flex: none; }
.help-card p { margin: 0 0 12px; color: var(--ink-2); font-size: 17px; }
.help-card p:last-child { margin-bottom: 0; }
.help-card p b, .help-card li b { color: var(--ink); }
.help-card .small { font-size: 15px; }
.steps-list { margin: 4px 0 16px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps-list li { counter-increment: s; position: relative; padding: 2px 0 0 42px; min-height: 30px; font-size: 17px; color: var(--ink-2); }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: var(--ink); background: url(draw/dot-sun.svg) 0 0 / 100%; }
.steps-list.big li { font-size: 19px; }
.link-list, .ticks-list { margin: 0 0 12px; padding: 0 0 0 22px; display: grid; gap: 8px; }
.link-list li, .ticks-list li { color: var(--ink-2); font-size: 17px; }
.link-list li::marker, .ticks-list li::marker { color: var(--rose-deep); }

.lost { padding: 70px 0 140px; text-align: center; }
.lost .sun { width: 170px; margin: 0 auto 10px; }
.lost h1 { font-size: 72px; margin: 12px 0 16px; }
.lost .lead { max-width: 30em; margin: 0 auto; }
.lost .cta-row { justify-content: center; margin-top: 30px; }

/* ── science & compare pages ────────────────────────────────────── */
.sci-hero h1 { font-size: 64px; }
.sci-hero .lead { max-width: 40em; }
.short-note a, .cmp a, .sci2 a, .teaser a.more { color: var(--rose-ink); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose .aside { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.prose a.cite { font-size: .72em; font-weight: 800; vertical-align: super; line-height: 0; text-decoration: none; margin-left: 1px; }
/* /science/: benefit cards, a trust strip, then the honest limits */
.sci2 { padding: 16px 32px 200px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
.sc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc { background: var(--card); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.sc img { width: 48px; height: 48px; }
.sc h3 { font-size: 22px; line-height: 1.12; letter-spacing: -.015em; margin: 14px 0 8px; }
.sc p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sc .sc-sci { margin-top: auto; padding-top: 14px; border-top: 1.5px dashed rgba(45,37,34,.18); font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.sc p + .sc-sci { margin-top: 16px; }
.sc-sci b { color: var(--ink); font-weight: 800; }
.sc-sci a.cite, .sci2 a.cite { color: var(--rose-ink); font-weight: 800; text-decoration: none; }
.trust-strip { background: var(--tint-leaf); border-radius: var(--r-card); padding: 30px 32px; }
.trust-strip .cmp-h { margin-bottom: 18px; }
.trust-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px 28px; }
@media (min-width: 640px) { .trust-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .trust-strip ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust-strip li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.trust-strip li img { width: 36px; height: 36px; flex: none; }
.trust-strip li b { color: var(--ink); font-weight: 800; }
.sci2 .refs { margin: 0 0 10px; padding-left: 20px; }
.refs li { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.refs li:target { background: var(--tint-sun); border-radius: 8px; }

.cmp { padding: 30px 32px 200px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
.cmp-h { font-size: 40px; margin: 0 0 22px; display: inline-block; padding-bottom: .14em; background: url(draw/line-sun.svg) no-repeat 0 100% / 100% .3em; }
.diff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.diff li { background: var(--card); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.diff img { width: 52px; }
.diff h3 { font-size: 21px; margin: 2px 0 6px; line-height: 1.15; letter-spacing: -.015em; }
.diff p { color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.cmp-note { color: var(--ink-3); font-weight: 700; font-size: 15px; margin: -10px 0 14px; }
.cmp-table { margin: 0; }
.cmp-table table { width: 100%; min-width: 940px; border-collapse: collapse; font-size: 15px; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid rgba(45,37,34,.08); line-height: 1.45; }
.cmp-table thead th { background: var(--tint-lilac); font-weight: 900; font-size: 16px; }
.cmp-table tbody th { font-weight: 800; color: var(--ink); width: 150px; background: var(--card); }
.cmp-table td { color: #3E3430; }
.cmp-table .apex { background: var(--tint-sun); }
.cmp-table thead th.apex { background: var(--sun); }
.cmp-table tr:last-child > * { border-bottom: 0; }
.cmp-table tbody th, .cmp-table thead th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 rgba(45,37,34,.08); }
.cmp-table thead th:first-child { background: var(--tint-lilac); }
.cmp-table:focus-visible { box-shadow: var(--focus); }
.nl { color: var(--ink-3); font-style: italic; }
.cmp-foot { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 60em; }
.stronger { margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; max-width: 52em; }
.stronger li { font-size: 18px; color: var(--ink-2); line-height: 1.55; }
.stronger li::marker { color: var(--rose-deep); }
.stronger strong { color: var(--ink); }
.cmp-more { margin-top: 22px; font-weight: 700; }
.cmp-legal { padding: 22px 26px; border-radius: 22px; border: 2px dashed rgba(45,37,34,.22); }
.cmp-legal h2 { font-size: 22px; margin-bottom: 10px; }
.cmp-legal p, .cmp-legal li { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.cmp-legal ul { margin: 10px 0; padding-left: 20px; }
.cmp-legal li { overflow-wrap: anywhere; margin-bottom: 4px; }

/* home: science teaser */
.teaser { padding: 20px 0 100px; }
.teaser .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.teaser article { background: var(--card); border-radius: var(--r-card); padding: 30px; box-shadow: var(--shadow); display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
.teaser article.sci { background: var(--tint-sky); }
.teaser article.vs { background: var(--tint-leaf); }
.teaser img { width: 72px; }
.teaser h2 { font-size: 34px; margin: 8px 0 10px; }
.teaser p { color: var(--ink-2); font-size: 17px; }
.teaser a.more { display: inline-block; margin-top: 12px; }

/* ── nav: the menu button takes over below 1060 px (six links + the button need ~1000 px) ── */
@media (max-width: 1060px) {
  .nav nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: none; padding: 10px max(20px, calc((100vw - var(--wrap)) / 2 + 32px)) 18px; background: rgba(246,240,230,.98); border-bottom: 1px solid rgba(45,37,34,.08); box-shadow: 0 18px 30px -20px rgba(45,37,34,.4); }
  .nav.open nav { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav ul a { padding: 12px 14px; font-size: 18px; }
  .nav .btn.sm { margin-left: auto; padding: 10px 14px; font-size: 14px; }
  .nav .menu:not([hidden]) { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 0; box-shadow: var(--shadow); cursor: pointer; }
  .nav .menu span, .nav .menu span::before, .nav .menu span::after { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--ink); position: relative; content: ""; transition: transform .2s ease, background-color .2s ease; }
  .nav .menu span::before { position: absolute; top: -6px; }
  .nav .menu span::after { position: absolute; top: 6px; }
  .nav.open .menu span { background: transparent; }
  .nav.open .menu span::before { transform: translateY(6px) rotate(45deg); }
  .nav.open .menu span::after { transform: translateY(-6px) rotate(-45deg); }
}

/* ── tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .free .wrap { grid-template-columns: auto 1fr; }
  .free .gift { grid-column: 1 / -1; }
  .safety .wrap { grid-template-columns: 1fr; }
  .safety .side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 56px; align-items: center; }
  .safety .side .club-phone { width: auto; margin: 0 8px 0 0; }
  .how { grid-template-columns: 230px minmax(0, 1fr); gap: 44px; }
  .how .step { column-gap: 24px; }
  .card.coach { grid-template-columns: 160px 1fr; }
  .card.coach img.sun { width: 160px; }
  .card.coach .bubbles { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .steps { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px 28px; }
}
@media (max-width: 900px) {
  .how { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .how-phone { width: 220px; margin: 0 auto; padding: 0; }
}
@media (max-width: 640px) {
  .how .steps { gap: 44px; }
  .how .step { display: block; padding: 26px 26px 30px; }
  .how .step .art { height: 190px; margin-bottom: 22px; }
  .how .step h3 { margin: 0 0 8px; }
}

/* ── mobile ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 17px; }
  html { scroll-padding-top: 76px; }
  .wrap { padding: 0 20px; }
  .nav .wrap { height: 64px; gap: 10px; }
  .nav .logo img { height: 38px; }
  .nav .btn.sm { padding: 10px 14px; font-size: 14px; }

  /* phones: copy on top, then Sunny (left) and the phone (right) in whatever height is left,
     then the ground strip. The hero may grow past the screen only on very short phones. */
  .hero { --nav: 65px; --reserve: 122px; height: auto; min-height: max(calc(100svh - var(--nav)), 600px); display: flex; flex-direction: column; }
  .hero .wrap { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding-top: clamp(10px, 2svh, 22px); padding-bottom: var(--reserve); }
  .hero .copy { padding-top: 0; }
  .hero h1 { font-size: clamp(40px, 6.2svh, 54px); margin: 0 0 clamp(8px, 1.6svh, 16px); }
  .lead { font-size: 18px; }
  .hero .lead { margin-bottom: clamp(12px, 2svh, 22px); font-size: 16px; line-height: 1.45; }
  .hero .cta-row { gap: 10px; flex-wrap: nowrap; }
  .hero .store { padding: 7px 14px 7px 7px; gap: 9px; border-radius: 15px; flex: none; }
  .hero .store img { width: 36px; height: 36px; border-radius: 9px; }
  .hero .store small { font-size: 10.5px; }
  .hero .store b { font-size: 17px; }
  .hero .cta-row .btn { padding: 13px 16px; font-size: 15px; }
  .free-note { font-size: 14px; gap: 8px; margin-top: clamp(10px, 1.8svh, 18px); line-height: 1.3; }
  .free-note img { width: 24px; height: 24px; flex: none; }
  .trust { gap: 4px 14px; margin-top: clamp(6px, 1.2svh, 14px); }
  .trust li { font-size: 12.5px; gap: 5px; }
  .trust img { width: 22px; height: 22px; }
  .scene { flex: 1 1 0; min-height: 200px; height: auto; aspect-ratio: auto; margin: 6px -20px 0; container-type: size; }
  .hero .scene .sky { left: auto; right: -6%; top: -4%; width: auto; height: 108%; }
  .scene .phone { left: auto; right: 9%; top: 2%; width: auto; height: 96%; }
  .scene .bubble { left: 4%; top: auto; bottom: 52px; width: min(54%, 200px); font-size: 13px; padding: 9px 12px; border-radius: 16px; }
  .scene .bubble small { font-size: 10px; }
  .scene .bubble::after { left: 34%; }
  .hero .scene .sunny { left: 12%; top: 2%; width: auto; height: min(calc(100cqh - 138px), 38cqw); }
  .hero .scene .cloud.c1 { left: -2%; top: 10%; width: 22%; }
  .hero .scene .cloud.c2 { display: none; }
  .scene .s1 { left: auto; right: 2%; top: 14%; width: 8%; }
  .scene .s2 { left: 3%; top: 2%; width: 6%; }
  .scene .s3 { display: none; }

  .free { padding: 40px 0 34px; }
  .free .wrap { grid-template-columns: 1fr; gap: 24px; }
  .free h2 { font-size: 58px; }
  .strikes li { font-size: 24px; }
  .free p { font-size: 18px; }
  .free .gift img { width: 56px; }

  .sec { padding: 90px 0; }
  .sec-head { margin-bottom: 48px; }
  .sec-head h2, .safety h2, .closer h2 { font-size: 42px; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .stories { padding: 90px 0; }
  .story, .story.flip { grid-template-columns: 1fr; gap: 64px; }
  .story.flip .pic { order: 0; }
  .story + .story { margin-top: 100px; }
  .story h3 { font-size: 40px; }
  .pic .phone { width: 100px; right: -8px; bottom: -44px; }
  .frame .cap { left: 14px; bottom: 14px; font-size: 12px; padding: 6px 10px; }
  .flip .frame .cap { left: 14px; right: auto; }
  .flip .pic .phone { left: auto; right: -6px; transform: rotate(6deg); }
  .pic .snap { width: 140px; right: -6px; bottom: -48px; padding: 5px 5px 14px; }
  .flip .pic .snap { left: auto; right: -6px; transform: rotate(5deg); }
  .chapters figure, .chapters figure img { width: 52px; }
  .chapters figure img { height: 36px; }
  .chapters .lbl { display: none; }

  .bento { grid-template-columns: 1fr; gap: 18px; }
  .card.span2, .card.span3 { grid-column: auto; }
  .card { padding: 24px; }
  .parade { height: 132px; margin: -24px -24px 12px; background-position: center bottom; padding-bottom: 18px; }
  .parade img { width: 44px; }
  .parade img:nth-child(n+6) { display: none; }
  .card.coach { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .card.coach img.sun { width: 130px; }
  .card.coach h3 { font-size: 28px; }
  .card.coach .bubbles { grid-auto-flow: row; }

  .safety { padding: 90px 0; }
  .safety .wrap { gap: 36px; }
  .safety .side { display: block; }
  .safety .side .club-phone { width: 200px; margin: 44px auto 0; }
  .promises { grid-template-columns: 1fr; gap: 14px; }

  .faq { grid-template-columns: 1fr; }
  summary { font-size: 17px; padding: 18px 0; }
  details { padding: 0 20px; }

  .closer { padding: 20px 0 30px; }
  .closer .panel { padding: 48px 22px 190px; border-radius: 30px; background-size: 1100px 206px; background-position: center bottom -24px; }
  .closer .panel .hug { width: 90px; margin-left: -45px; bottom: 26px; }
  .closer .panel .cl { width: 80px; }
  .closer .cta-row { flex-direction: column; }

  .site-footer .top { flex-direction: column; gap: 24px; }
  .site-footer nav ul { justify-content: flex-start; gap: 8px; }
  .site-footer nav a { font-size: 15px; }
  .site-footer .meta { flex-direction: column; align-items: flex-start; gap: 14px; }

  .legal-hero { padding-top: 40px; }
  .legal-hero h1, .lost h1 { font-size: 44px; }
  .short { padding: 22px; }
  .short ul { grid-template-columns: 1fr; gap: 14px; }
  .legal { grid-template-columns: 1fr; gap: 24px; padding: 16px 20px 160px; }
  .toc { position: static; max-height: none; }
  .toc ol { columns: 1; }
  .prose h2 { font-size: 28px; }
  .prose p, .prose li { font-size: 17px; }
  .prose ol.clauses > li { padding-left: 46px; }
  .help { grid-template-columns: 1fr; padding: 16px 20px 160px; gap: 18px; }
  .help-card { padding: 24px; }
  .help-card.contact { grid-template-columns: 1fr; gap: 12px; }
  .help-card.contact .big { width: 64px; }
  .help-card h2 { font-size: 24px; }
}

@media (max-width: 1100px) {
  .diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sci-hero h1 { font-size: clamp(30px, 9.2vw, 42px); }
  .sci2 { padding: 8px 20px 160px; gap: 52px; }
  .sc { padding: 22px; }
  .trust-strip { padding: 24px 20px; }
  .cmp { padding: 16px 20px 160px; gap: 56px; }
  .cmp-h { font-size: 30px; }
  .diff { grid-template-columns: 1fr; gap: 14px; }
  .cmp-table table { min-width: 760px; font-size: 14px; }
  .cmp-table tbody th { width: 112px; }
  .stronger li { font-size: 17px; }
  .teaser { padding: 0 0 80px; }
  .teaser .wrap { grid-template-columns: 1fr; gap: 18px; }
  .teaser article { grid-template-columns: 1fr; gap: 10px; padding: 24px; }
  .teaser img { width: 56px; }
  .teaser h2 { font-size: 30px; }
}

@media (max-width: 480px) { /* the ground stage is drawn smaller here (hero.css) */
  .hero { --reserve: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::before, .nav .menu span, .nav .menu span::before, .nav .menu span::after { transition: none; }
}

.closer .beta-note { max-width: 34em; margin: 10px auto 0; font-size: 1rem; color: var(--ink-soft, #5b4d46); }