/* ==========================================================================
   MyGymDay website v4 · one stylesheet for every page
   IMPLEMENTATION_PLAN_WEBSITE_V4.md §2

   The member app's editorial theme, on the web: charcoal canvas, warm-white
   type, lime spent on one action at a time. Clash Display for headlines,
   Satoshi for everything read. Mobile first: every rule below is written for
   a 390 px phone and then widened at 600 / 900 / 1200.

   Values mirror apps/mobile/src/components/entry/theme.ts. If a colour
   changes there, change it here.
   ========================================================================== */

/* -- 1 · Fonts --------------------------------------------------------------
   Official Fontshare WOFF2 files, unmodified (ITF FFL 2.0 allows self-hosting
   and forbids conversion, so these are not subset). Licence:
   assets/fonts/ITF-FFL-2.0.txt. One display weight, one variable text file. */
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* -- 2 · Tokens ------------------------------------------------------------- */
:root {
  --canvas: #080B0A;
  --canvas-alt: #0D110F;
  --surface: #131815;
  --surface-raised: #191F1B;
  --surface-pressed: #202721;
  --hairline: rgba(245, 247, 240, 0.08);
  --edge: rgba(245, 247, 240, 0.12);
  --control: #646D65;
  --text: #F5F7F0;
  --text-2: #A5AAA3;
  --text-3: #8B918A;
  --lime: #B7FF3C;
  --lime-pressed: #9FE62F;
  --on-lime: #080B0A;
  --lime-wash: #1E2A14;
  --lime-glow: rgba(183, 255, 60, 0.16);
  --danger: #F08A8E;
  --danger-wash: #241315;
  --scrim: rgba(4, 6, 5, 0.76);
  --glass: rgba(14, 18, 16, 0.6);
  --glass-solid: rgba(16, 21, 18, 0.94);
  --glass-edge: rgba(245, 247, 240, 0.14);
  --glass-edge-top: rgba(245, 247, 240, 0.22);

  --font-display: "Clash Display", "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-cta: 28px;
  --r-field: 18px;
  --r-card: 26px;
  --r-sheet: 32px;
  --r-tile: 20px;

  --gutter: 20px;
  --max: 1240px;
  --header-h: 64px;
  --section-y: 88px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 460ms;
}
@media (min-width: 600px) { :root { --gutter: 32px; --section-y: 112px; } }
@media (min-width: 900px) { :root { --gutter: 48px; --header-h: 76px; --section-y: 144px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; --section-y: 168px; } }

/* -- 3 · Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
/* A <picture> inside a fixed-size media box must fill it, or the img's height: 100% resolves to auto. */
.hero__media picture, .chapter__media picture, .promo__media picture { width: 100%; height: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
p a, li a, dd a { color: var(--text); text-decoration-color: rgba(183, 255, 60, 0.6); }
p a:hover, li a:hover, dd a:hover { text-decoration-color: var(--lime); }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--lime); color: var(--on-lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: 999px; background: var(--lime); color: var(--on-lime);
  font-weight: 700; text-decoration: none; transform: translateY(-160%);
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: none; }

/* -- 4 · Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(820px + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.5); }
.section--alt { background: var(--canvas-alt); }
.section--rule { border-top: 1px solid var(--hairline); }
.stack { display: grid; gap: 16px; align-content: start; }
.stack--lg { gap: 24px; }
.center { text-align: center; justify-items: center; }

/* -- 5 · Type --------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-text); font-weight: 700;
  font-size: 12px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime);
}
.eyebrow--quiet { color: var(--text-2); }
.chapter-no {
  font-family: var(--font-text); font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.chapter-no span { color: var(--text-3); }
.d-hero, .d-1, .d-2, .d-3 {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  text-wrap: balance; font-kerning: normal;
  /* Clash Display ships a narrow word space; open it so words never run together at display sizes. */
  word-spacing: 0.08em;
}
.d-hero { font-size: clamp(2.75rem, 1.55rem + 5.2vw, 6.75rem); line-height: 1; letter-spacing: -0.012em; }
.d-1 { font-size: clamp(2.25rem, 1.45rem + 3.4vw, 4.75rem); line-height: 1.04; letter-spacing: -0.008em; }
.d-2 { font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3.375rem); line-height: 1.08; letter-spacing: -0.004em; }
.d-3 { font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem); line-height: 1.22; letter-spacing: 0; }
.lead { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--text-2); text-wrap: pretty; max-width: 40ch; }
.body { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); text-wrap: pretty; max-width: 58ch; }
.small { font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }
.caption { font-size: 0.8125rem; line-height: 1.45; color: var(--text-3); font-weight: 500; }
.lime { color: var(--lime); }
.ink { color: var(--on-lime); }
.muted { color: var(--text-2); }

/* -- 6 · Brand -------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand__lockup { height: 26px; width: auto; }
@media (min-width: 900px) { .brand__lockup { height: 30px; } }
.brand__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2); padding: 5px 9px; border: 1px solid var(--glass-edge); border-radius: 999px;
}
.tile-mark { width: 72px; height: 72px; border-radius: 18px; }
.tile-mark--lg { width: 96px; height: 96px; border-radius: 24px; }

/* -- 7 · Buttons -------------------------------------------------------------
   The app's lime pill: label left, arrow in a charcoal disc at the trailing
   edge. Secondary is a translucent fill with a hairline. */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--h); padding: 0 24px; border-radius: var(--r-cta);
  font-family: var(--font-text); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent; background: none; color: var(--text);
  transition: background-color 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: scale(0.975); }
.btn--primary { background: var(--lime); color: var(--on-lime); }
.btn--primary:hover { background: var(--lime-pressed); }
.btn--primary.btn--disc { padding: 6px 6px 6px 24px; justify-content: space-between; }
.btn__disc {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--on-lime); color: var(--lime);
  transition: transform 220ms var(--ease);
}
.btn__disc svg { width: 18px; height: 18px; }
.btn--disc:hover .btn__disc { transform: translateX(3px); }
.btn--secondary { background: rgba(245, 247, 240, 0.07); border-color: rgba(245, 247, 240, 0.14); }
.btn--secondary:hover { background: rgba(245, 247, 240, 0.12); }
.btn--ghost { padding-inline: 4px; min-height: 44px; color: var(--text); }
.btn--ghost:hover { color: var(--lime); }
.btn--sm { --h: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn.is-busy[disabled] { opacity: 1; }
.btn .spinner { display: none; }
.btn.is-busy .spinner { display: block; }
.btn.is-busy .btn__arrow { display: none; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Store pills: text only (no store artwork until the listings exist). */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid var(--hairline); background: rgba(245, 247, 240, 0.04);
  font-size: 0.875rem; font-weight: 500; color: var(--text-2);
}
.store svg { width: 18px; height: 18px; color: var(--text); }
.store b { color: var(--text); font-weight: 700; }

/* -- 8 · Header --------------------------------------------------------------
   Transparent over the hero, frosted glass once the page moves. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), backdrop-filter 220ms var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 11, 10, 0.62), rgba(8, 11, 10, 0));
  transition: opacity 220ms var(--ease);
}
.hdr.is-solid { background: var(--glass); border-bottom-color: var(--hairline); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.hdr.is-solid::before { opacity: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr.is-solid { background: var(--glass-solid); } }
.hdr__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hdr__nav { display: none; }
.hdr__actions { display: flex; align-items: center; gap: 8px; }
.hdr__cta { display: none; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245, 247, 240, 0.08); border: 1px solid rgba(245, 247, 240, 0.14); color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: rgba(245, 247, 240, 0.16); }
.icon-btn svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .hdr__nav { display: block; }
  .hdr__nav ul { display: flex; gap: 4px; }
  .hdr__nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
    font-size: 0.9375rem; font-weight: 500; color: var(--text-2); text-decoration: none;
  }
  .hdr__nav a:hover { color: var(--text); background: rgba(245, 247, 240, 0.06); }
  .hdr__nav a[aria-current="page"] { color: var(--text); }
  .hdr__cta { display: inline-flex; }
  .hdr__menu { display: none; }
}

/* Mobile menu: a full-screen <dialog>. */
.menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--canvas); color: var(--text);
}
.menu::backdrop { background: var(--canvas); }
.menu[open] { display: flex; flex-direction: column; animation: fade-in 220ms var(--ease); }
.menu__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.menu__links { padding-top: 24px; display: grid; gap: 4px; }
.menu__links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
  font-family: var(--font-display); font-weight: 600; font-size: 2rem; letter-spacing: -0.015em; text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.menu__links a[aria-current="page"] { color: var(--lime); }
.menu__links svg { width: 22px; height: 22px; color: var(--text-3); }
.menu__foot { margin-top: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); display: grid; gap: 12px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html.is-locked, html.is-locked body { overflow: hidden; }

/* -- 9 · Hero ----------------------------------------------------------------
   Phone: the photograph fills the first screen and the copy sits on its lower
   third. Desktop: the photograph bleeds off the right edge and the copy takes
   the left, over flat canvas. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--surface); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 11, 10, 0.55) 0%, rgba(8, 11, 10, 0) 22%),
    linear-gradient(180deg, rgba(8, 11, 10, 0) 26%, rgba(8, 11, 10, 0.72) 46%, rgba(8, 11, 10, 0.94) 64%, var(--canvas) 84%);
}
.hero__copy { width: 100%; padding-top: calc(var(--header-h) + 40px); padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)); }
.hero__copy .stack { gap: 18px; max-width: 640px; }
.hero h1 { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); }
.hero .lead { color: rgba(245, 247, 240, 0.8); }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: drift 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.08) translate(-1%, -1%); } }
.hero .actions { padding-top: 8px; }
.hero .actions .btn--primary { flex: 1 1 auto; }
@media (min-width: 600px) { .hero .actions .btn--primary { flex: 0 0 auto; } }

@media (min-width: 900px) {
  .hero { align-items: center; min-height: min(100vh, 980px); }
  .hero__media { left: 44%; }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--canvas) 0%, rgba(8, 11, 10, 0.6) 22%, rgba(8, 11, 10, 0) 48%);
  }
  .hero__scrim { background: linear-gradient(180deg, rgba(8, 11, 10, 0.5) 0%, rgba(8, 11, 10, 0) 18%, rgba(8, 11, 10, 0) 78%, var(--canvas) 100%); }
  .hero__copy { padding-bottom: 96px; padding-top: calc(var(--header-h) + 96px); }
  .hero__copy .stack { max-width: 680px; gap: 24px; }
}

/* -- 10 · Facts strip -------------------------------------------------------- */
.facts { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.facts li { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hairline); font-weight: 500; }
.facts svg { width: 22px; height: 22px; color: var(--lime); flex: none; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .facts li { border-bottom: 0; border-left: 1px solid var(--hairline); padding: 6px 28px; }
  .facts li:first-child { border-left: 0; padding-left: 0; }
}

/* -- 11 · Chapters -----------------------------------------------------------
   The editorial unit: a photograph in a rounded frame, a numbered eyebrow, a
   headline and one paragraph. Desktop alternates sides. */
.chapter { display: grid; gap: 28px; align-items: center; }
.chapter__media { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; border: 1px solid var(--hairline); }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1200ms var(--ease); }
.chapter__media.is-in img, .no-js .chapter__media img { transform: none; }
.chapter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 11, 10, 0) 55%, rgba(8, 11, 10, 0.55)); pointer-events: none; }
.chapter__badge { position: absolute; left: 16px; bottom: 16px; z-index: 1; }
.chapter__copy { display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) {
  .chapter { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); }
  .chapter--flip .chapter__media { order: 2; }
  .chapter__copy { gap: 22px; }
}
.chapters { display: grid; gap: calc(var(--section-y) * 0.9); }

/* -- 12 · Phones ------------------------------------------------------------- */
/* align-items: flex-start is load-bearing. With the default (stretch) the back phone
   grows to the height of the lowered front phone, and its frame ends up taller than
   its screen, leaving an empty block under the screenshot. */
.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 8px 0 0; }
.phone {
  align-self: flex-start; height: auto; margin: 0;
  width: min(50vw, 300px); padding: 6px; border-radius: 38px; flex: none;
  background: linear-gradient(160deg, #1d231f, #0b0e0c 60%);
  border: 1px solid rgba(245, 247, 240, 0.12);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(245, 247, 240, 0.08);
}
/* The ratio lives on the screen, not the frame, so the bezel padding never crops the screenshot. */
.phone picture { aspect-ratio: 393 / 852; border-radius: 32px; overflow: hidden; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--canvas); }
/* Two phones, the second lower and overlapping. Sized in vw so the pair always fits a phone screen. */
.phones .phone + .phone { margin-left: -12vw; margin-top: 18%; }
@media (min-width: 900px) {
  .phones { justify-content: flex-start; }
  .phone { width: min(22vw, 310px); padding: 7px; border-radius: 46px; }
  .phone picture { border-radius: 39px; }
  .phones .phone + .phone { margin-left: -3vw; }
}
.app-band { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .app-band { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.glow { position: absolute; inset: 10% 5% auto; height: 60%; background: radial-gradient(closest-side, var(--lime-glow), transparent); filter: blur(30px); z-index: -1; pointer-events: none; }

/* -- 13 · Steps -------------------------------------------------------------- */
.steps { display: grid; gap: 12px; counter-reset: step; }
.step { padding: 24px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline); display: grid; gap: 10px; align-content: start; }
.step__no { font-family: var(--font-display); font-weight: 600; font-size: 2.75rem; line-height: 1; color: var(--lime); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; word-spacing: 0.08em; }
.step p { color: var(--text-2); font-size: 1rem; line-height: 1.6; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } .step { padding: 32px; min-height: 280px; align-content: space-between; } }

/* -- 14 · Statement band ----------------------------------------------------- */
.statement { text-align: center; display: grid; gap: 20px; justify-items: center; }
.statement .d-1 { max-width: 16ch; }
.statement .lead { margin-inline: auto; }

/* -- 15 · Cards and lists ---------------------------------------------------- */
.card { padding: 24px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hairline); }
.card--raised { background: var(--surface-raised); border-top-color: var(--edge); }
.checks { display: grid; gap: 0; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--hairline); color: var(--text-2); }
.checks li:last-child { border-bottom: 1px solid var(--hairline); }
.checks svg { width: 22px; height: 22px; color: var(--lime); margin-top: 2px; }
.checks b { color: var(--text); font-weight: 700; }
.notice { padding: 22px 24px; border-radius: var(--r-field); background: var(--lime-wash); border: 1px solid rgba(183, 255, 60, 0.28); display: grid; gap: 6px; }
.notice__title { font-weight: 700; color: var(--text); }
.notice p { color: var(--text-2); }

/* Promo card: photo + copy in one raised card (cross-links between audiences). */
.promo { display: grid; border-radius: var(--r-sheet); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--hairline); border-top-color: var(--edge); }
.promo__media { position: relative; aspect-ratio: 16 / 11; background: var(--surface); overflow: hidden; }
.promo__media img { width: 100%; height: 100%; object-fit: cover; }
.promo__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 31, 27, 0) 50%, var(--surface-raised)); }
.promo__copy { display: grid; gap: 16px; padding: 4px 24px 32px; align-content: center; }
@media (min-width: 900px) {
  .promo { grid-template-columns: 1fr 1fr; min-height: 520px; }
  .promo__media { aspect-ratio: auto; }
  .promo__media::after { background: linear-gradient(90deg, rgba(25, 31, 27, 0) 55%, var(--surface-raised)); }
  .promo__copy { padding: 56px 64px 56px 40px; gap: 22px; }
}

/* -- 16 · Waitlist panel -----------------------------------------------------
   The page's one place that asks for something. Same object on both pages. */
.join { position: relative; overflow: hidden; border-radius: var(--r-sheet); background: var(--surface-raised); border: 1px solid var(--hairline); border-top-color: var(--edge); padding: 32px 24px; isolation: isolate; }
.join::before { content: ""; position: absolute; right: -14%; top: -30%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(183, 255, 60, 0.12), transparent); z-index: -1; }
.join__watermark { position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; opacity: 0.06; z-index: -1; pointer-events: none; }
.join__inner { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .join { padding: 64px; }
  .join__inner { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .join__watermark { width: 420px; height: 420px; right: -60px; bottom: -80px; }
}

/* -- 17 · Forms -------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form .field { display: grid; gap: 8px; }
.form .field__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); }
.form .field__label .opt { font-weight: 500; color: var(--text-3); }
.form .field__hint { font-size: 0.8125rem; color: var(--text-3); line-height: 1.45; }
.form .field__err { font-size: 0.8125rem; color: var(--danger); font-weight: 500; line-height: 1.45; }
.input {
  width: 100%; min-height: 56px; padding: 14px 18px; border-radius: var(--r-field);
  border: 1.5px solid rgba(245, 247, 240, 0.16); background: rgba(245, 247, 240, 0.05);
  font-size: 1.0625rem; font-weight: 500; color: var(--text); caret-color: var(--lime);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--text-3); opacity: 1; }
.input:hover { border-color: rgba(245, 247, 240, 0.26); }
.input:focus { outline: none; border-color: var(--lime); background: var(--surface-raised); box-shadow: 0 0 0 4px rgba(183, 255, 60, 0.14); }
.input[aria-invalid="true"] { border-color: var(--danger); }
textarea.input { min-height: 112px; resize: vertical; line-height: 1.5; }
select.input {
  padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5AAA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
}
select.input option { background: var(--surface-raised); color: var(--text); }
.input-group { display: flex; align-items: stretch; }
.input-group .prefix {
  display: inline-flex; align-items: center; padding: 0 14px 0 18px; border-radius: var(--r-field) 0 0 var(--r-field);
  border: 1.5px solid rgba(245, 247, 240, 0.16); border-right: 0; background: rgba(245, 247, 240, 0.08);
  font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.input-group .input { border-radius: 0 var(--r-field) var(--r-field) 0; }
.row-2 { display: grid; gap: 18px; }
@media (min-width: 600px) { .row-2 { grid-template-columns: 1fr 1fr; } }

/* Inline email + button (stacks on narrow phones). */
.inline-form { display: grid; gap: 10px; }
@media (min-width: 480px) {
  .inline-form { grid-template-columns: 1fr auto; padding: 6px; border-radius: 999px; background: rgba(245, 247, 240, 0.05); border: 1.5px solid rgba(245, 247, 240, 0.16); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
  .inline-form:focus-within { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(183, 255, 60, 0.14); }
  .inline-form .input { border: 0; background: transparent; min-height: 48px; padding-left: 18px; box-shadow: none; }
  .inline-form .input:focus { box-shadow: none; background: transparent; }
  .inline-form .btn { --h: 48px; }
}

/* Radio / checkbox tiles (the app's EntryRadioCard). */
.form .choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.form .choices legend { padding: 0; margin-bottom: 8px; }
.form .choice { position: relative; }
.form .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.form .choice span {
  display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border-radius: var(--r-field);
  border: 1px solid var(--control); background: var(--surface); color: var(--text-2);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.form .choice input:checked + span { background: var(--lime-wash); border: 1.5px solid var(--lime); color: var(--text); font-weight: 700; }
.form .choice input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; }
.check input {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 8px;
  border: 1.5px solid var(--control); background: var(--surface); display: grid; place-items: center; cursor: pointer;
}
.check input:checked { background: var(--lime); border-color: var(--lime); }
.check input:checked::after { content: ""; width: 12px; height: 7px; border: solid var(--on-lime); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 10px 16px; border-radius: var(--r-field); background: var(--surface); border: 1px solid var(--hairline); }
.switch { -webkit-appearance: none; appearance: none; position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--surface-pressed); border: 1px solid var(--control); margin: 0; cursor: pointer; flex: none; transition: background-color 160ms var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text-2); transition: transform 200ms var(--ease), background-color 160ms var(--ease); }
.switch:checked { background: var(--lime); border-color: var(--lime); }
.switch:checked::after { transform: translateX(20px); background: var(--on-lime); }

.form-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-field); background: var(--danger-wash); border: 1px solid rgba(240, 138, 142, 0.2); color: var(--text); font-size: 0.9375rem; font-weight: 500; }
.form-alert svg { width: 18px; height: 18px; color: var(--danger); flex: none; margin-top: 2px; }
.form-note { font-size: 0.8125rem; color: var(--text-3); line-height: 1.5; }
.form-note a { color: var(--text-2); }
.captcha:empty { display: none; }
.captcha { min-height: 0; }

.success { display: grid; gap: 14px; justify-items: start; }
.success__mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--on-lime); }
.success__mark svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) { .success { animation: rise 460ms var(--ease) both; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Location button and status. */
.locate { display: grid; gap: 10px; }
.locate__status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.locate__status.is-ok { color: var(--lime); }
.locate__status.is-err { color: var(--danger); }
.btn--locate { justify-content: flex-start; gap: 12px; padding-left: 18px; border-style: dashed; border-color: rgba(183, 255, 60, 0.45); background: rgba(183, 255, 60, 0.06); color: var(--text); width: 100%; }
.btn--locate svg { width: 20px; height: 20px; color: var(--lime); flex: none; }
.btn--locate:hover { background: rgba(183, 255, 60, 0.1); }
.attribution { font-size: 0.75rem; color: var(--text-3); }

/* -- 18 · Sheet dialog -------------------------------------------------------
   A bottom sheet on phones, a centred card from 640 px. Native <dialog>, so
   focus, Esc and the inert background come from the browser. */
.sheet {
  width: 100%; max-width: 100%; max-height: calc(100svh - 24px); margin: auto 0 0 0; padding: 0;
  border: 0; border-top: 1px solid var(--edge); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--surface-raised); color: var(--text); overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up 340ms var(--ease); }
  .sheet[open]::backdrop { animation: fade-in 240ms var(--ease); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__grab { width: 36px; height: 5px; border-radius: 3px; background: rgba(245, 247, 240, 0.22); margin: 8px auto 0; flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 4px 24px; flex: none; }
.sheet__body { padding: 8px 24px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 20px; }
.sheet__foot { padding: 12px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--surface-raised); display: flex; gap: 10px; flex: none; }
.sheet__foot .btn { flex: 1; }
.sheet__foot .btn--secondary { flex: 0 0 auto; }
@media (min-width: 640px) {
  .sheet { width: min(600px, calc(100% - 48px)); margin: auto; border-radius: var(--r-sheet); border: 1px solid var(--hairline); border-top-color: var(--edge); max-height: min(860px, calc(100vh - 64px)); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
  .sheet__grab { display: none; }
  .sheet__head { padding: 24px 24px 4px 32px; }
  .sheet__body { padding: 8px 32px 32px; }
  .sheet__foot { padding: 16px 32px 24px; }
}
/* A <legend> is not a grid item, so the fieldset's gap never reaches it. */
.sheet fieldset[data-step] > legend { margin-bottom: 22px; gap: 10px; }
.progress { display: flex; gap: 6px; }
.progress i { height: 4px; flex: 1; border-radius: 2px; background: var(--surface-pressed); transition: background-color 240ms var(--ease); }
.progress i.is-on { background: var(--lime); }

/* -- 19 · Mobile action dock -------------------------------------------------
   The app's glass capsule, carrying the page's one action once the hero has
   scrolled away. Hidden on desktop, near the waitlist panel, and whenever a
   field has focus (the keyboard is up). */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 20px; border-radius: 999px; min-height: 64px;
  background: var(--glass); border: 1px solid var(--glass-edge); border-top-color: var(--glass-edge-top);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform 360ms var(--ease), opacity 260ms var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: var(--glass-solid); } }
.dock.is-shown { transform: none; opacity: 1; pointer-events: auto; }
.dock__text { display: grid; line-height: 1.25; min-width: 0; }
.dock__text b { font-size: 0.9375rem; }
.dock__text span { font-size: 0.75rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .btn { --h: 50px; padding-inline: 20px; font-size: 0.9375rem; }
@media (min-width: 900px) { .dock { display: none; } }

/* -- 20 · FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 18px 0;
  cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; word-spacing: 0.08em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(245, 247, 240, 0.06) center / 16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F7F0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform 240ms var(--ease), background-color 160ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--lime-wash); }
.faq summary:hover::after { background-color: rgba(245, 247, 240, 0.12); }
.faq .faq__a { padding: 0 52px 24px 0; color: var(--text-2); }
.faq .faq__a p + p { margin-top: 12px; }

/* -- 21 · Footer ------------------------------------------------------------- */
.ftr { position: relative; overflow: hidden; border-top: 1px solid var(--hairline); padding: 72px 0 calc(40px + 88px); background: var(--canvas); isolation: isolate; }
@media (min-width: 900px) { .ftr { padding-bottom: 40px; padding-top: 96px; } }
.ftr__mark { position: absolute; right: -6%; bottom: -14%; width: min(70vw, 560px); opacity: 0.045; z-index: -1; pointer-events: none; }
.ftr__top { display: grid; gap: 40px; }
.ftr__brand { display: grid; gap: 16px; max-width: 360px; }
.ftr__brand .brand__lockup { height: 32px; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
.ftr h2 { font-family: var(--font-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.ftr ul a { display: inline-flex; min-height: 40px; align-items: center; color: var(--text-2); text-decoration: none; font-size: 0.9375rem; }
.ftr ul a:hover { color: var(--text); }
.ftr ul a[aria-current="page"] { color: var(--text); }
.ftr__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline); display: grid; gap: 6px; font-size: 0.8125rem; color: var(--text-3); }
@media (min-width: 900px) {
  .ftr__top { grid-template-columns: 1.2fr 2fr; }
  .ftr__cols { grid-template-columns: repeat(3, 1fr); }
  .ftr__legal { grid-template-columns: 1fr auto; }
}

/* -- 22 · Reveal ------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .chapter__media img { transform: none; transition: none; }
}

/* -- 23 · Page header (inner pages) ------------------------------------------ */
.page-head { padding-top: calc(var(--header-h) + 56px); padding-bottom: 40px; display: grid; gap: 18px; }
@media (min-width: 900px) { .page-head { padding-top: calc(var(--header-h) + 104px); padding-bottom: 64px; } }

/* -- 24 · Print --------------------------------------------------------------- */
@media print {
  .hdr, .dock, .menu, .sheet, .hero__media, .ftr__mark { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}