/* =========================================================================
   HelthFit Pro — marketing site · "cinematic warm"
   Golden-hour film, one first-light accent. Follows the system colour scheme:
   warm-paper in light mode, deep warm near-black in dark. The film band
   (hero / film sections / final CTA) stays cinematic-dark in both.
   No build step. No dependencies.
   ========================================================================= */

/* Self-hosted fonts (variable woff2 from @fontsource-variable, latin +
   latin-ext only -- the site is English). Replaces the Google Fonts link:
   no third-party request before first paint, and no visitor IP sent to
   Google, which EU courts have held to breach the GDPR. Same family names as
   before, so nothing below changed. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/archivo-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/archivo-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme: light dark;

  /* ---- LIGHT (default) ---- */
  --bg:        #faf7f1;
  --bg-1:      #f2ede2;
  --bg-2:      #ede7da;
  --panel:     rgba(255,255,255,.72);

  --ink:       #1c1813;
  --ink-dim:   #574f43;
  --ink-faint: #756c5a;

  --line:      #e3ddd0;
  --line-soft: #ebe5d8;

  --flare-1:   #ffc46b;   /* first light  */
  --flare-2:   #ff6a4d;   /* ember        */
  --flare-3:   #ff5470;   /* dawn rose    */
  --flare:     linear-gradient(105deg, var(--flare-1), var(--flare-2) 55%, var(--flare-3));
  --accent:    #ff7a45;               /* the gradient button / brand mark */
  --accent-ink:#bf3e0b;               /* the accent as text / icon on the page ground */
  --on-accent: #100c09;

  --nav-bg:        rgba(250,247,241,.86);
  --nav-mobile-bg: rgba(250,247,241,.98);

  --r:    5px;
  --r-lg: 10px;

  --wrap:   1180px;
  --narrow: 760px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .7s;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- DARK ----
   Applied when the system is dark (and no explicit light choice), or when an
   explicit dark choice sets data-theme="dark" (matters in the Claude artifact
   mirror; harmless on the standalone site where data-theme never appears). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07070a; --bg-1:#0c0c11; --bg-2:#121218; --panel:rgba(15,15,20,.72);
    --ink:#f5f2ec; --ink-dim:#b0a99f; --ink-faint:#857e73;
    --line:#23222a; --line-soft:#191920;
    --accent-ink:#ff8a5c;
    --nav-bg:rgba(7,7,10,.82); --nav-mobile-bg:rgba(7,7,10,.96);
  }
}
:root[data-theme="dark"]{
  --bg:#07070a; --bg-1:#0c0c11; --bg-2:#121218; --panel:rgba(15,15,20,.72);
  --ink:#f5f2ec; --ink-dim:#b0a99f; --ink-faint:#857e73;
  --line:#23222a; --line-soft:#191920;
  --accent-ink:#ff8a5c;
  --nav-bg:rgba(7,7,10,.82); --nav-mobile-bg:rgba(7,7,10,.96);
}

/* The film band is always cinematic-dark — its text sits over golden-hour video
   (or the dark poster gradient) regardless of the page theme. The nav top bar
   too, while it floats over the hero (before it sticks). */
.nav:not(.is-stuck) .nav__inner,
.hero__inner,
.filmsec__card,
.finalcta__inner{
  --ink:       #f6f3ed;
  --ink-dim:   #cec7bb;
  --ink-faint: #9a9184;
  --line:      rgba(255,255,255,.16);
  --accent-ink:#ff9a70;
  color:var(--ink);   /* so headings that only inherit colour pick up the override */
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(255,122,69,.28); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

/* ---------- layout primitives ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
.wrap--narrow{ max-width:var(--narrow); }

.section{ padding-block:clamp(72px,11vw,140px); position:relative; }
.section--alt{ background:var(--bg-1); border-block:1px solid var(--line-soft); }

.section__title{ font-size:clamp(1.9rem,4.4vw,3.1rem); max-width:16ch; }
.section__sub{ color:var(--ink-dim); font-size:clamp(1rem,1.6vw,1.18rem); max-width:56ch; margin:.9rem 0 0; }
.module__lede{ color:var(--ink-dim); font-size:clamp(1rem,1.7vw,1.2rem); max-width:52ch; margin:1rem 0 0; }
.module__lede em{ color:var(--ink); font-style:normal; }

/* ---------- kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body);
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 1.1rem;
}
.kicker__num{
  font-variant-numeric:tabular-nums;
  color:var(--accent-ink);
  border:1px solid var(--line);
  border-radius:3px;
  padding:.15em .45em;
  font-size:.8em;
}
.kicker__dot{ width:7px; height:7px; border-radius:50%; background:var(--flare-2); box-shadow:0 0 14px 2px rgba(255,122,69,.55); }
.kicker--hero{ color:var(--ink); }

/* ---------- big statement ---------- */
.statement{
  font-size:clamp(1.9rem,5vw,3.4rem);
  letter-spacing:-.025em;
  max-width:20ch;
  margin:0;
}

/* ---------- buttons ---------- */
.btn{
  --pad-y:.8rem; --pad-x:1.25rem;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  border-radius:var(--r);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s, opacity .2s;
  white-space:nowrap;
}
.btn--lg{ --pad-y:1rem; --pad-x:1.6rem; font-size:1rem; }
.btn--block{ display:flex; justify-content:center; width:100%; }

.btn--solid{
  background-image:var(--flare);
  color:var(--on-accent);
  box-shadow:0 10px 34px -12px rgba(255,106,77,.6);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -12px rgba(255,106,77,.72); }

.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--accent-ink); color:var(--accent-ink); background:rgba(255,122,69,.08); }

.btn--film{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(6px);
}
.btn--film:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn__play{
  width:22px; height:22px; border-radius:50%;
  background:var(--flare-2);
  display:grid; place-items:center;
}
.btn__play::after{
  content:""; margin-left:2px;
  border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--on-accent);
}
.arw{ transition:transform .2s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }

.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--flare-2); outline-offset:3px; border-radius:2px;
}

.skip-link{
  position:fixed; left:16px; top:-60px; z-index:200;
  background:var(--accent); color:var(--on-accent);
  padding:.6rem 1rem; border-radius:var(--r); font-weight:600;
  transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:68px; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.12rem; letter-spacing:-.01em; }
.brand__mark{ display:inline-flex; filter:drop-shadow(0 4px 14px rgba(255,106,77,.35)); }
.brand__name{ color:var(--ink); }

.nav__links{ display:flex; gap:1.9rem; margin-inline:auto; }
.nav__links a{
  font-size:.9rem; font-weight:500; color:var(--ink-dim);
  padding:.3rem 0; position:relative;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--flare-2); transition:right .25s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }

.nav__cta{ display:flex; gap:.6rem; }
.nav__cta .btn{ --pad-y:.55rem; --pad-x:.95rem; font-size:.85rem; }

.nav__burger{ display:none; width:42px; height:42px; background:transparent; border:1px solid var(--line); border-radius:var(--r); padding:0; }
.nav__burger span{ display:block; width:18px; height:2px; margin:3px auto; background:var(--ink); transition:.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:.2rem;
  padding:1rem clamp(20px,5vw,44px) 1.6rem;
  background:var(--nav-mobile-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__mobile a{ padding:.8rem 0; border-bottom:1px solid var(--line-soft); color:var(--ink-dim); font-weight:500; }
.nav__mobile a.btn{ border:1px solid transparent; margin-top:.9rem; justify-content:center; color:var(--on-accent); }

.nav__progress{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--flare-2); box-shadow:0 0 12px rgba(255,122,69,.6); }

/* =========================================================================
   FILM primitive (shared by hero, filmsec, finalcta)
   ========================================================================= */
[data-film]{ position:absolute; inset:0; overflow:hidden; background:var(--bg); z-index:0; }
/* gradient stand-in shown before the clip loads and if it never does (also the
   whole picture under prefers-reduced-motion) — mirrors assets/video/posters/*.svg */
[data-grade="dawn"]{ background:radial-gradient(120% 78% at 76% 14%, #5a3a1e, #241a17 42%, #07070a 100%); }
[data-grade="warm"]{ background:radial-gradient(120% 85% at 26% 34%, #6b4322, #2a1c15 45%, #07070a 100%); }
[data-grade="dusk"]{ background:radial-gradient(120% 85% at 76% 38%, #33324a, #1a1a24 45%, #07070a 100%); }
[data-grade="gold"]{ background:radial-gradient(120% 90% at 32% 42%, #7a5220, #2c2013 44%, #07070a 100%); }
.film__v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
}
.film__v.is-playing{ opacity:1; }
.film__v.is-kb{ animation:kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.film__grade{ position:absolute; inset:0; pointer-events:none; }
.film__grain{
  position:absolute; inset:-40%; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-3%,4%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} }

/* grades */
[data-grade="dawn"] .film__grade{
  background:
    radial-gradient(120% 78% at 76% 14%, rgba(255,150,80,.20), transparent 56%),
    radial-gradient(95% 72% at 42% 46%, rgba(7,7,10,.60), transparent 76%),
    linear-gradient(180deg, rgba(7,7,10,.56) 0%, rgba(7,7,10,.34) 42%, rgba(7,7,10,.96) 100%);
}
[data-grade="warm"] .film__grade{
  background:
    radial-gradient(110% 80% at 25% 30%, rgba(255,140,70,.24), transparent 60%),
    linear-gradient(90deg, rgba(7,7,10,.92) 0%, rgba(7,7,10,.55) 46%, rgba(7,7,10,.20) 100%),
    linear-gradient(180deg, rgba(7,7,10,.35), rgba(7,7,10,.80));
}
[data-grade="dusk"] .film__grade{
  background:
    radial-gradient(110% 80% at 78% 35%, rgba(120,150,255,.14), transparent 60%),
    linear-gradient(270deg, rgba(7,7,10,.92) 0%, rgba(7,7,10,.55) 46%, rgba(7,7,10,.20) 100%),
    linear-gradient(180deg, rgba(7,7,10,.35), rgba(7,7,10,.82));
}
[data-grade="gold"] .film__grade{
  background:
    radial-gradient(120% 90% at 30% 40%, rgba(255,180,90,.28), transparent 62%),
    linear-gradient(90deg, rgba(7,7,10,.90) 0%, rgba(7,7,10,.50) 48%, rgba(7,7,10,.18) 100%),
    linear-gradient(180deg, rgba(7,7,10,.30), rgba(7,7,10,.78));
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:130px 96px;
  isolation:isolate;
}
.hero__inner{ position:relative; z-index:2; max-width:860px; }
.hero__title{
  font-size:clamp(2.3rem,6.6vw,5.1rem);
  font-weight:900;
  margin:.2em 0 .35em;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__lede{
  color:#d9d3ca;
  font-size:clamp(1.05rem,2vw,1.35rem);
  max-width:44ch;
  line-height:1.6;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__ticks{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem;
  padding:0; margin:2.4rem 0 0;
  font-size:.86rem; color:var(--ink-dim);
}
.hero__ticks li{ display:flex; align-items:center; gap:.5rem; }
.hero__ticks li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--flare-2); box-shadow:0 0 10px rgba(255,106,77,.7); }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:2;
  width:26px; height:42px; border:1px solid rgba(255,255,255,.28); border-radius:20px;
  display:grid; place-items:start center;
}
.hero__scroll span{ width:3px; height:9px; margin-top:7px; border-radius:2px; background:#fff; animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0; transform:translateY(12px)} }

/* =========================================================================
   PROBLEM
   ========================================================================= */
.problem{ background:var(--bg); }
.probgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(2.5rem,6vw,4.5rem); background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.prob{ background:var(--bg); padding:clamp(1.6rem,3vw,2.4rem); }
.prob__k{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:.6rem; }
.prob p{ margin:0; color:var(--ink-dim); font-size:.98rem; }

/* =========================================================================
   THE IDEA
   ========================================================================= */
.idea{ overflow:hidden; }
.idea__glow{
  position:absolute; inset:auto -10% -30% -10%; height:70%;
  background:radial-gradient(60% 100% at 30% 100%, rgba(255,122,69,.16), transparent 70%);
  pointer-events:none;
}
.idea__grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.method{ list-style:none; padding:0; margin:2.2rem 0 0; display:grid; gap:1.4rem; }
.method li{ display:flex; gap:1rem; }
.method li span{
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  color:var(--accent-ink); font-variant-numeric:tabular-nums;
  padding-top:.2rem; min-width:2ch;
}
.method li b{ font-family:var(--font-display); font-size:1.02rem; display:block; margin-bottom:.15rem; }
.method li p{ margin:0; color:var(--ink-dim); font-size:.95rem; }

/* ---------- phone mock ---------- */
.idea__phone{ display:flex; justify-content:center; }
.phone{
  width:290px; max-width:78vw;
  border-radius:38px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#16161d,#0c0c11);
  padding:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset,
             0 0 80px -20px rgba(255,122,69,.25);
  position:relative;
}
.phone__notch{ position:absolute; top:14px; left:50%; translate:-50% 0; width:96px; height:18px; background:#0b0b0e; border-radius:0 0 12px 12px; z-index:3; }
.phone__screens{ position:relative; height:520px; border-radius:28px; overflow:hidden; background:#f5f4f2; }
.screen{
  position:absolute; inset:0; padding:40px 16px 16px;
  color:#1c2333; font-size:13px;
  opacity:0; translate:0 12px; transition:opacity .5s var(--ease), translate .5s var(--ease);
  pointer-events:none;
}
.screen.is-active{ opacity:1; translate:0 0; pointer-events:auto; }
.screen__bar{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-family:var(--font-display); font-size:15px; color:#0f1424; margin-bottom:14px; }
.screen__pill{ font-size:9px; font-weight:700; letter-spacing:.08em; background:#ffe7d8; color:#c0491f; padding:.28em .6em; border-radius:999px; }
.screen__pill--muted{ background:#e9ecf4; color:#5a6480; }

.rings{ position:relative; width:200px; height:200px; margin:6px auto 12px; }
.rings__svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:#e7e6e3; stroke-width:10; }
.ring-track--sm{ stroke-width:8; }
.ring-fill{ fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease); }
.ring-fill.ring-track--sm{ stroke-width:8; }
.ring-cal{ stroke:#ff7a45; }
.ring-carb{ stroke:#2fb0a6; }
.ring-fat{ stroke:#b083ff; }
.ring-protein{ stroke:#ff5a86; }
.rings__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1.1; }
.rings__center strong{ display:block; font-family:var(--font-display); font-size:27px; color:#10131f; font-variant-numeric:tabular-nums; }
.rings__center span{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#7c8398; }

.macro-row{ display:flex; justify-content:space-between; font-size:11px; color:#4b5268; margin-bottom:14px; }
.macro-row b{ color:#10131f; }
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.dot--carb{ background:#2fb0a6; } .dot--fat{ background:#b083ff; } .dot--protein{ background:#ff5a86; }

.mini-list,.plan-mini{ display:grid; gap:7px; }
.mini-list__row,.plan-mini__row{ display:flex; justify-content:space-between; background:#fff; border:1px solid #ececea; border-radius:9px; padding:9px 11px; font-size:12px; }
.mini-list__row b,.plan-mini__row b{ color:#10131f; font-variant-numeric:tabular-nums; }

.search{ display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #e4e4e2; border-radius:9px; padding:10px 11px; color:#7c8398; margin-bottom:10px; }
.search__typed{ color:#10131f; font-weight:600; }
.search__caret{ width:2px; height:14px; background:#ff7a45; animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{opacity:0} }
.results{ display:grid; gap:6px; margin-bottom:12px; }
.results__row{ display:flex; justify-content:space-between; background:#fff; border:1px solid #ececea; border-radius:8px; padding:8px 10px; font-size:12px; }
.results__row b{ color:#ff7a45; }
.scan{ text-align:center; color:#7c8398; font-size:11px; }
.scan__frame{ width:80px; height:52px; border:2px solid #cfd3dd; border-radius:8px; margin:0 auto 6px; position:relative; overflow:hidden; }
.scan__frame span{ position:absolute; left:0; right:0; height:2px; background:#ff7a45; animation:scanline 1.8s var(--ease) infinite; }
@keyframes scanline{ 0%,100%{top:6px} 50%{top:42px} }

.phone__dots{ display:flex; gap:7px; justify-content:center; margin-top:12px; }
.phone__dots button{ width:7px; height:7px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer; transition:.2s; }
.phone__dots button.is-active{ background:var(--flare-2); width:20px; border-radius:4px; }

/* =========================================================================
   FILM SECTIONS
   ========================================================================= */
.filmsec{
  position:relative; isolation:isolate;
  min-height:92vh;
  display:flex; align-items:center;
  padding-block:clamp(64px,10vw,120px);
  border-block:1px solid var(--line-soft);
}
.filmsec--rev{ justify-content:flex-end; }
.filmsec__media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.filmsec__panel{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
.filmsec--rev .filmsec__panel{ display:flex; justify-content:flex-end; }
.filmsec__card{
  max-width:520px;
  background:linear-gradient(180deg, rgba(20,20,26,.90), rgba(10,10,14,.88));
  backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:clamp(1.8rem,3.6vw,2.8rem);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
}
.filmsec__card h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem; margin-top:1.6rem; }
.split h3{ font-size:1rem; margin-bottom:.35rem; }
.split p{ margin:0; color:var(--ink-dim); font-size:.92rem; }

/* ---------- move card ---------- */
.movecard{ margin-top:1.6rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:rgba(0,0,0,.25); }
.movecard__toggle{ display:flex; }
.movecard__toggle button{
  flex:1; padding:.7rem; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--ink-dim); font-family:var(--font-body); font-weight:600; font-size:.85rem; cursor:pointer;
  transition:.2s;
}
.movecard__toggle button.is-active{ color:var(--ink); background:rgba(255,122,69,.1); box-shadow:inset 0 -2px 0 var(--flare-2); }
.movecard__body{ padding:.6rem; display:grid; gap:.4rem; }
.exrow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; padding:.55rem .6rem; background:rgba(255,255,255,.03); border-radius:4px; font-size:.9rem; }
.exrow svg{ width:26px; height:26px; color:var(--accent-ink); }
.exrow b{ color:var(--ink); font-variant-numeric:tabular-nums; font-size:.85rem; }

/* =========================================================================
   STAT BAND
   ========================================================================= */
.statband{ padding-block:clamp(48px,8vw,90px); }
.statband__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--bg); padding:clamp(1.4rem,3vw,2.2rem); text-align:center; }
.stat strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,4vw,2.8rem); font-variant-numeric:tabular-nums; color:var(--accent-ink); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stat strong{ background:var(--flare); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
:root[data-theme="dark"] .stat strong{ background:var(--flare); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ display:block; margin-top:.3rem; font-size:.82rem; color:var(--ink-dim); }

/* =========================================================================
   FEATURED (the app)
   ========================================================================= */
.featured{ overflow:hidden; text-align:center; }
.featured__glow{ position:absolute; inset:-40% -20% auto; height:120%; background:radial-gradient(50% 60% at 50% 0%, rgba(255,122,69,.18), transparent 70%); pointer-events:none; }
.featured__inner{ position:relative; }
.featured__title{ font-size:clamp(1.9rem,4.6vw,3.3rem); margin:.2em auto; max-width:16ch; }
.featured__lede{ color:var(--ink-dim); max-width:52ch; margin:1rem auto 0; font-size:clamp(1rem,1.6vw,1.15rem); }
.specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:clamp(2.4rem,5vw,3.6rem) 0 0; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-align:left; }
.specs div{ background:var(--bg-1); padding:1.3rem 1.2rem; }
.specs dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.specs dd{ margin:.4rem 0 0; font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.1; }
.specs dd span{ display:block; font-family:var(--font-body); font-weight:400; font-size:.8rem; color:var(--ink-dim); margin-top:.2rem; }
.featured__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }

/* =========================================================================
   INSIGHTS
   ========================================================================= */
.insight-cards{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.4rem; margin-top:clamp(2.4rem,5vw,3.6rem); }
.icard{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2rem); }
.icard__label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.2rem; }
.bars{ width:100%; height:auto; overflow:visible; }
.bars__group rect{ fill:var(--flare-2); opacity:.9; transform-box:fill-box; transform-origin:bottom; }
.js .bars__group rect{ opacity:.3; transform:scaleY(0); transition:transform .9s var(--ease), opacity .9s; }
.js .bars.is-visible rect{ transform:scaleY(1); opacity:.9; }
.bars__goal{ stroke:var(--accent-ink); stroke-width:2; stroke-dasharray:5 4; opacity:.9; }
.icard__list{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.icard__list li{ padding-left:1.4rem; position:relative; color:var(--ink-dim); font-size:.95rem; }
.icard__list li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px; background:var(--accent-ink); }
.icard__note{ margin:1.2rem 0 0; font-size:.85rem; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:1rem; }

/* =========================================================================
   LANGUAGES
   ========================================================================= */
.langs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.chips li{ border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.9rem; color:var(--ink-dim); background:var(--bg-2); }

/* =========================================================================
   PRICING
   ========================================================================= */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:clamp(2.4rem,5vw,3.4rem); }
.plan{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,3.4vw,2.4rem); position:relative; }
.plan--featured{ border-color:rgba(255,122,69,.45); box-shadow:0 0 0 1px rgba(255,122,69,.18), 0 40px 90px -50px rgba(255,106,77,.5); }
.plan__flag{ position:absolute; top:-11px; left:clamp(1.6rem,3.4vw,2.4rem); background-image:var(--flare); color:var(--on-accent); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.3em .7em; border-radius:999px; }
.plan h3{ font-size:1.3rem; }
.plan__price{ margin:.6rem 0 1.2rem; color:var(--ink-dim); font-size:.9rem; }
.plan__price span{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--ink); }
.plan__price small{ display:block; margin-top:.2rem; }
.plan ul{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.6rem; }
.plan li{ padding-left:1.5rem; position:relative; color:var(--ink-dim); font-size:.94rem; }
.plan li::before{ content:"\2713"; position:absolute; left:0; color:var(--accent-ink); font-weight:700; }
/* Second pricing card: how the trial works (numbered, not ticked). */
.plan--steps ol{ list-style:none; margin:1.2rem 0 1.6rem; padding:0; display:grid; gap:1rem; counter-reset:step; }
.plan--steps ol li{ counter-increment:step; padding-left:2.4rem; position:relative; color:var(--ink-dim); font-size:.94rem; }
.plan--steps ol li::before{ content:counter(step); position:absolute; left:0; top:-.1em; width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--accent-ink); font-weight:700; font-size:.82rem; }
.plan--steps ol li b{ color:var(--ink); }
.plan--steps{ display:flex; flex-direction:column; }
.plan__aside{ margin:auto 0 0; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--ink-dim); font-size:.9rem; }
.plan__aside b{ color:var(--ink); }
.disclaimer{ margin-top:clamp(2rem,4vw,3rem); font-size:.82rem; color:var(--ink-faint); max-width:60ch; }

/* =========================================================================
   PRINCIPLES
   ========================================================================= */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:clamp(2.4rem,5vw,3.4rem); }
.principle{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.2rem); background:var(--bg-2); }
.principle__tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.principle h3{ font-size:1.2rem; margin:.7rem 0 .5rem; }
.principle p{ margin:0; color:var(--ink-dim); font-size:.95rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ margin-top:2rem; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.2rem 2.5rem 1.2rem 0; position:relative; font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:.3rem; top:1rem; font-size:1.3rem; color:var(--accent-ink); transition:transform .2s; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ margin:0 0 1.3rem; color:var(--ink-dim); font-size:.97rem; max-width:64ch; }
.faq__item a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.finalcta{ position:relative; isolation:isolate; min-height:88vh; display:flex; align-items:center; text-align:center; padding-block:clamp(72px,12vw,140px); }
.finalcta__film{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.finalcta__inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; }
.finalcta__inner h2{ font-size:clamp(2.1rem,5.5vw,3.6rem); }
.finalcta__inner p{ color:#d9d3ca; font-size:clamp(1rem,1.8vw,1.2rem); margin:1rem auto 0; max-width:44ch; }
.finalcta__actions{ display:flex; justify-content:center; margin-top:2rem; }
.finalcta__note{ font-size:.8rem; color:var(--ink-faint); margin-top:1.4rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ background:var(--bg-1); border-top:1px solid var(--line-soft); padding-block:clamp(48px,7vw,80px) 40px; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; }
.footer__brand p{ color:var(--ink-dim); font-size:.9rem; max-width:34ch; margin:.9rem 0 0; }
.footer h4{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1rem; }
.footer nav{ display:grid; gap:.6rem; align-content:start; }
.footer nav a{ color:var(--ink-dim); font-size:.9rem; transition:color .2s; }
.footer nav a:hover{ color:var(--accent-ink); }
.footer__base{ margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.6rem; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.footer__base p{ margin:0; font-size:.78rem; color:var(--ink-faint); }

/* =========================================================================
   REVEAL
   ========================================================================= */
/* guarded by html.js so no-JS crawlers / readers get the full content, not a
   page of invisible elements */
.js .reveal{ opacity:0; transform:translateY(22px); filter:blur(4px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; filter:none; }

/* =========================================================================
   WALKTHROUGH REEL + LIGHTBOX
   ========================================================================= */
.lightbox{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(16px,4vw,48px); }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(4,4,7,.86); backdrop-filter:blur(8px); }
.lightbox__dialog{ position:relative; width:min(920px,100%); aspect-ratio:16/10; background:#0a0a0e; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 60px 120px -30px rgba(0,0,0,.8); }
.lightbox__close{ position:absolute; top:12px; right:12px; z-index:5; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.4); color:#fff; display:grid; place-items:center; cursor:pointer; }
.lightbox__stage{ position:absolute; inset:0; }
.lightbox__stage video,.lightbox__stage iframe{ width:100%; height:100%; border:0; object-fit:cover; }
.lb-open{ overflow:hidden; }

.reel{ position:absolute; inset:0; background:radial-gradient(120% 100% at 70% 10%, #1a1206, #07070a 60%); overflow:hidden; }
.reel__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; mask:radial-gradient(70% 70% at 50% 40%,#000,transparent); }
.reel__glow{ position:absolute; inset:auto -20% -40%; height:80%; background:radial-gradient(50% 100% at 50% 100%,rgba(255,122,69,.35),transparent 70%); }
.reel__steps{ position:absolute; inset:0; list-style:none; margin:0; padding:clamp(1.6rem,5vw,3rem); }
.reel__step{ position:absolute; inset:clamp(1.6rem,5vw,3rem); opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease); max-width:70%; }
.reel__step.is-on{ opacity:1; transform:none; }
.reel__idx{ font-family:var(--font-display); font-weight:800; color:var(--flare-2); font-size:.9rem; }
.reel__step h3{ font-size:clamp(1.6rem,4vw,2.6rem); margin:.3rem 0 .6rem; }
.reel__step p{ color:var(--ink-dim); font-size:clamp(.95rem,1.6vw,1.1rem); margin:0 0 1rem; }
.reel__energy{ display:flex; gap:6px; }
.reel__energy i{ width:26px; height:8px; border-radius:3px; background:rgba(255,255,255,.16); }
.reel__energy i.on{ background:var(--flare-2); }
.reel__search{ display:inline-flex; align-items:center; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:6px; padding:.5rem .8rem; font-weight:600; margin-bottom:.6rem; }
.reel__caret{ width:2px; height:1em; background:var(--flare-2); margin-left:2px; animation:caret 1s steps(1) infinite; }
.reel__row{ display:flex; justify-content:space-between; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:6px; padding:.6rem .8rem; max-width:320px; }
.reel__row b{ color:var(--flare-2); }
.reel__check{ color:#3ad07a; }
.reel__stats{ display:flex; gap:1.6rem; }
.reel__stats b{ font-family:var(--font-display); font-size:1.8rem; display:block; }
.reel__stats span{ font-size:.75rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; }
.reel__ring{ position:absolute; right:clamp(1.4rem,4vw,2.6rem); bottom:clamp(1.4rem,4vw,2.6rem); width:96px; height:96px; display:grid; place-items:center; }
.reel__ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.reel__ringtrack{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:6; }
.reel__ringfill{ fill:none; stroke:var(--flare-2); stroke-width:6; stroke-linecap:round; stroke-dasharray:314; stroke-dashoffset:314; animation:reelring 12s linear infinite; }
@keyframes reelring{ to{ stroke-dashoffset:0; } }
.reel__brand{ font-family:var(--font-display); font-weight:800; font-size:.8rem; }
.reel__scrub{ position:absolute; left:clamp(1.6rem,5vw,3rem); right:clamp(1.6rem,5vw,3rem); bottom:clamp(1rem,3vw,1.6rem); height:3px; background:rgba(255,255,255,.12); border-radius:2px; }
.reel__scrub i{ display:block; height:100%; width:0; background:var(--flare-2); border-radius:2px; animation:reelscrub 12s linear infinite; }
@keyframes reelscrub{ to{ width:100%; } }

/* =========================================================================
   AT A GLANCE — real app / widget / watch renders
   ========================================================================= */
.glances__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; margin-top:clamp(2rem,5vw,3.5rem);
}
.glance{ margin:0; }
.glance figure{ margin:0; }
.glance figcaption, .glance__watches p{ margin:.7rem 0 0; color:var(--ink-dim); font-size:.92rem; }
.glance__phone{
  position:relative; max-width:320px; margin-inline:auto; padding:10px; border-radius:42px;
  background:linear-gradient(160deg,#2a2622,#0e0d0c); box-shadow:0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.glance__phone img{ display:block; width:100%; height:auto; border-radius:32px; }
.glance--phone figcaption{ text-align:center; }
.glance--stack{ display:grid; gap:1.6rem; }
.glance--stack img{
  display:block; width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.35));
}
.glance__watches{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:center; max-width:440px; }
.glance__watches figure{
  padding:9px; border-radius:50%; background:linear-gradient(145deg,#3a3532,#121110);
  box-shadow:0 24px 40px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1);
}
.glance__watches img{ display:block; width:100%; height:auto; border-radius:50%; }
.glance__watches p{ grid-column:1 / -1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:860px){
  .glances__grid{ grid-template-columns:1fr; }
  .glance__phone{ max-width:280px; }
}
@media (max-width:1080px){
  .idea__grid{ grid-template-columns:1fr; }
  .idea__phone{ order:-1; }
  .insight-cards{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  /* margin-left:auto: with the links hidden, nothing else pushed the menu
     button to the right edge, so it sat right next to the logo. */
  .nav__burger{ display:block; margin-left:auto; }
  .nav.is-open .nav__mobile{ display:flex; }
  .probgrid{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; }
  .statband__row{ grid-template-columns:repeat(2,1fr); }
  .langs{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .filmsec,.filmsec--rev{ justify-content:flex-start; }
  .filmsec--rev .filmsec__panel{ justify-content:flex-start; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .split{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__base{ flex-direction:column; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
  .filmsec__card{ backdrop-filter:blur(10px); }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal,
  .reveal{ opacity:1; transform:none; filter:none; }
  .film__v{ opacity:1; }
  .film__v.is-kb{ animation:none; }
  .film__grain{ display:none; }
  .hero__scroll span{ animation:none; }
  .js .bars__group rect,
  .bars__group rect{ transform:scaleY(1); opacity:.9; }
}

/* ============================================================ COACHES
   Trainer marketplace teaser: copy on one side, an example plan card (built
   from the Movement card's rows) on the other; stacks on phones. */
.coaches__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; }
.coaches__actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.coaches__card{ margin-top:0; }
.coaches__head{ display:grid; gap:.2rem; padding:1rem 1.1rem .4rem; }
.coaches__head small{ color:var(--accent-ink); font-weight:700; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.coaches__head strong{ font-family:var(--font-display); font-size:1.25rem; color:var(--ink); }
.coaches__note{ margin:.2rem .6rem .8rem; padding:.7rem .8rem; border-left:3px solid var(--flare-2); border-radius:var(--r); background:rgba(255,122,69,.08); color:var(--ink-dim); font-size:.88rem; }
.coaches__note span{ display:block; color:var(--accent-ink); font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.15rem; }
@media (max-width:860px){
  .coaches__inner{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .coaches .split{ grid-template-columns:1fr; }
}
/* ============================================================ STORE BADGES
   The official "Get it on Google Play" badge (assets/google-play-badge-trim.png:
   Google's artwork, transparent margin trimmed) and our web-app button drawn
   to match it. Every size below is a share of the badge height (--badge-h),
   measured off Google's artwork: 3.36x as wide as tall, icon 0.6h starting
   0.22h in, label starting at 1h, "GET IT ON" ~0.22h, "Google Play" ~0.39h. */
.storebadges{ --badge-h:56px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.storebadges--hero{ margin-top:1.1rem; }
.finalcta__actions.storebadges{ justify-content:center; }
.storebadge{ display:inline-flex; align-items:center; box-sizing:border-box; height:var(--badge-h); border-radius:calc(var(--badge-h) * .14);
  line-height:1; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.storebadge:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(0,0,0,.55); }
.storebadge:active{ transform:translateY(0); }
.storebadge:focus-visible{ outline:2px solid var(--flare-2); outline-offset:3px; }
.storebadge--play img{ display:block; height:var(--badge-h); width:auto; }
.storebadge--web{ width:calc(var(--badge-h) * 3.357); gap:calc(var(--badge-h) * .17); padding:0 0 0 calc(var(--badge-h) * .22);
  background:#000; color:#fff; border:1px solid #a6a6a6; }
.storebadge--web svg{ flex:none; width:calc(var(--badge-h) * .6); height:calc(var(--badge-h) * .6); }
.storebadge__text{ display:grid; gap:calc(var(--badge-h) * .06); text-align:start; }
.storebadge__text small{ font:400 calc(var(--badge-h) * .215)/1 var(--font-body, Inter, system-ui, sans-serif); letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.storebadge__text strong{ font:600 calc(var(--badge-h) * .385)/1 var(--font-body, Inter, system-ui, sans-serif); letter-spacing:-.02em; color:#fff; }
@media (max-width:380px){
  .storebadges{ --badge-h:50px; }
}

/* ============================================================ iPHONE LAUNCH LIST
   The small "tell me when the iPhone app is out" form under the final CTA's
   store badges (main.js posts it). It sits in the film band, so it takes the
   band's dark tokens in both colour schemes. Hidden without JavaScript. */
html:not(.js) .launchlist{ display:none; }
.launchlist{ color-scheme:dark; max-width:30rem; margin:1.8rem auto 0; padding-top:1.5rem; border-top:1px solid var(--line); text-align:start; }
.launchlist__title{ font-size:1.15rem; text-align:center; }
.launchlist__row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.launchlist__label{ flex:1 1 100%; font-size:.85rem; font-weight:600; color:var(--ink-dim); }
.launchlist__input{ flex:1 1 11rem; min-width:0; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.06); color:var(--ink); font:400 1rem/1.3 var(--font-body); }
.launchlist__input::placeholder{ color:var(--ink-faint); }
.launchlist__input:focus-visible{ outline:2px solid var(--flare-2); outline-offset:2px; }
.launchlist__row .btn{ flex:0 0 auto; justify-content:center; }
.launchlist .btn:disabled{ opacity:.6; cursor:default; transform:none; }
.launchlist__consent{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; margin-top:.9rem; font-size:.85rem; line-height:1.5; color:var(--ink-dim); }
.launchlist__consent input{ width:1.05rem; height:1.05rem; margin:.15rem 0 0; accent-color:var(--flare-2); }
.launchlist__consent label{ cursor:pointer; }
.launchlist__consent a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.launchlist__msg{ min-height:1.5em; margin-top:.8rem; font-size:.9rem; color:var(--ink); }
.launchlist__msg.is-error{ color:var(--accent-ink); }