/* Hanken Grotesk, self-hosted from @fontsource/hanken-grotesk 5.3.0 (SIL OFL 1.1, fonts/OFL.txt). */
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:800; font-display:swap; src:url(/fonts/hanken-grotesk-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:900; font-display:swap; src:url(/fonts/hanken-grotesk-latin-900-normal.woff2) format('woff2'); }
:root { --paper:#fafaf8; --ink:#191918; --coral:#ff6b47; --coral-text:#be3c1f; --sage:#bcc8b4; --muted:#686762; --line:#dcdad3; --card:#f0efe9; --night:#20201f; --night-raised:#262625; --night-line:#3b3b39; --night-pill:#343432; --night-text:#bdbdb7; --night-quiet:#9b9b96; --night-label:#aaa; --night-number:#93938d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Hanken Grotesk",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-underline-offset:3px; }
::selection { background:var(--coral); color:var(--ink); }
a:focus-visible { outline:3px solid var(--coral-text); outline-offset:3px; border-radius:6px; }
h1,h2 { text-wrap:balance; }
p { text-wrap:pretty; }

.nav { height:82px; max-width:1180px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.nav-links { display:flex; align-items:center; gap:24px; }
.brand { font-size:34px; font-weight:900; letter-spacing:-2px; text-decoration:none; }
.brand span,.hero em,.download em { color:var(--coral-text); font-style:normal; }
.quiet-link { font-weight:700; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; border-bottom:2px solid var(--coral); }
main { overflow:hidden; }
.referral { max-width:1124px; margin:24px auto 0; padding:28px 32px; border-radius:24px; background:var(--card); border:1px solid var(--line); }
.referral h2 { font-size:clamp(26px,3.4vw,34px); letter-spacing:-.02em; margin:0 0 10px; }
.referral h2 em { color:var(--coral-text); font-style:normal; }
.referral-price { display:block; font-size:.6em; font-weight:700; margin-top:6px; }
.referral-price s { color:var(--muted); font-weight:400; margin-right:6px; }
.referral p { color:var(--muted); line-height:1.55; margin:0 0 16px; max-width:60ch; }
.referral-providers { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.referral-button { font:inherit; font-weight:800; min-height:44px; padding:0 18px; border-radius:12px; border:0; background:var(--ink); color:var(--paper); cursor:pointer; }
.referral-email { display:grid; gap:12px; max-width:420px; }
.referral-email[hidden] { display:none; }
.referral-email label { display:grid; gap:6px; font-weight:700; font-size:14px; }
.referral-email input { font:inherit; min-height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); }
.referral-email-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.referral-status { font-weight:700; color:var(--ink) !important; }
@media (max-width:1180px) { .referral { margin:24px 28px 0; } }
@media (max-width:620px) { .referral { margin:20px 20px 0; padding:24px 20px; } }
.auth-notice { max-width:1124px; margin:20px auto 0; padding:14px 18px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-weight:700; line-height:1.45; }
@media (max-width:1180px) { .auth-notice { margin:20px 28px 0; } }
@media (max-width:620px) { .auth-notice { margin:16px 20px 0; } }

/* Hero */
.hero { min-height:720px; max-width:1180px; margin:auto; padding:88px 28px 96px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:80px; }
h1 { font-size:clamp(54px,7vw,88px); line-height:.92; letter-spacing:-.04em; margin:0; max-width:720px; }
.product-name { color:var(--coral-text); font-size:13px; font-weight:900; letter-spacing:.09em; margin:0 0 16px; text-transform:uppercase; }
.lede { font-size:20px; line-height:1.55; color:var(--muted); max-width:600px; margin:32px 0; }
.offer { color:var(--muted); font-size:14px; line-height:1.5; max-width:480px; margin:20px 0 0; }
.offer a { color:var(--ink); font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; }

/* Official store badges, equal visual height; the platform's own store is
   ordered first by app.js, but both are always present. */
.store-badges { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.badge { display:inline-flex; border-radius:10px; transition:transform .18s ease; }
.badge img { display:block; height:52px; width:auto; }
.badge:hover,.badge:focus-visible { transform:translateY(-2px); }

/* Example workout (the hero's proof) */
.workout-shell { position:relative; background:var(--night); color:white; border-radius:34px; padding:30px; box-shadow:28px 32px 0 var(--sage); transform:rotate(1.5deg); }
.workout-shell:before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:var(--coral); right:-70px; top:-104px; z-index:-1; }
.phone-top { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--night-label); }
.status { color:var(--coral); font-weight:900; letter-spacing:.12em; background:var(--night-raised); padding:4px 10px; border-radius:99px; }
.card-title { font-size:32px; font-weight:800; line-height:1.1; letter-spacing:-.03em; margin:30px 0 8px; }
.rationale { color:var(--night-text); line-height:1.45; margin:0 0 24px; }
.exercise { display:grid; grid-template-columns:32px 1fr auto; gap:13px; align-items:center; border-top:1px solid var(--night-line); padding:18px 0; }
.exercise strong,.exercise small { display:block; }
.exercise small { color:var(--night-quiet); margin-top:4px; }
.number { color:var(--night-number); font-weight:800; font-variant-numeric:tabular-nums; }
.pill { background:var(--night-pill); color:#d8d8d2; border-radius:99px; padding:6px 10px; font-size:11px; font-weight:900; letter-spacing:.06em; }
.start-bar { margin-top:12px; padding:17px 18px; border-radius:14px; background:var(--coral); color:var(--ink); display:flex; justify-content:space-between; font-size:13px; }

/* A session, in three real app moments */
.session { background:var(--ink); color:white; padding:110px max(28px,calc((100vw - 1124px)/2)); }
.session-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:end; margin-bottom:64px; }
.session h2 { font-size:clamp(38px,5vw,58px); line-height:1; letter-spacing:-.035em; margin:0; }
.session-intro p { color:var(--night-text); font-size:19px; line-height:1.6; margin:0; max-width:46ch; }
.moments { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; align-items:start; margin:0 auto; max-width:760px; }
.moment { margin:0; }
.moment:nth-child(2) { margin-top:48px; }
.moment:nth-child(3) { margin-top:96px; }
.app-screen { display:block; width:100%; height:auto; border-radius:24px; border:1px solid var(--night-line); box-shadow:0 18px 40px rgba(0,0,0,.22); }
.screen { background:var(--night-raised); border:1px solid var(--night-line); border-radius:24px; padding:22px; min-height:260px; }
.screen-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; }
.screen-head strong { font-size:20px; letter-spacing:-.02em; }
.screen-head span { color:var(--night-quiet); font-size:13px; }
.sets { list-style:none; margin:0; padding:0; }
.sets li { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--night-line); font-variant-numeric:tabular-nums; }
.sets li span:first-child { color:var(--night-quiet); font-size:13px; }
.sets li.done span:nth-child(2) { color:white; }
.sets li:not(.done) span:nth-child(2) { color:var(--night-quiet); }
.tick { color:var(--sage); font-size:12px; font-weight:800; }
.sets.plan li { grid-template-columns:1fr auto; }
.sets.plan li span:first-child { color:white; font-size:15px; }
.sets.plan li span:last-child { color:var(--night-text); }
.rest { margin-top:16px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--night); border:1px solid var(--night-line); }
.rest-label { color:var(--coral); font-size:12px; font-weight:900; letter-spacing:.1em; }
.rest-time { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; flex:1; }
.rest-skip { color:var(--night-text); font-size:13px; font-weight:700; }
.screen-title { font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0 0 16px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips span { border:1px solid var(--night-line); border-radius:10px; padding:7px 11px; font-size:13px; color:var(--night-text); }
.chips .selected { background:var(--coral); border-color:var(--coral); color:var(--ink); font-weight:800; }
.note { margin:18px 0 0; padding:14px; border-radius:12px; background:var(--night); color:var(--night-text); font-size:14px; border-bottom:2px solid var(--night-line); }
.screen-reason { color:var(--night-text); line-height:1.45; margin:0 0 10px; font-size:15px; }
figcaption { margin-top:18px; color:var(--night-text); line-height:1.55; max-width:36ch; }
figcaption strong { color:white; display:block; font-size:19px; margin-bottom:4px; }

/* Close */
.home-guides { max-width:1124px; margin:auto; padding:96px 28px 0; }
.home-guides h2 { font-size:clamp(28px,3.4vw,40px); line-height:1.05; letter-spacing:-.03em; margin:0 0 20px; }
.home-guides ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 24px; }
.home-guides a { display:flex; align-items:center; min-height:44px; color:var(--ink); font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px; }
.download { max-width:1124px; margin:auto; padding:120px 28px 96px; display:grid; justify-items:start; gap:30px; }
.download-icon { border-radius:22px; }
.download h2 { font-size:clamp(44px,6vw,76px); line-height:.95; letter-spacing:-.04em; margin:0; max-width:15ch; }
.reassure { color:var(--muted); font-size:15px; line-height:1.55; margin:0; max-width:56ch; }

/* Invite: a compact aside for the few who arrive with a code */
.invite { max-width:1124px; margin:0 auto 96px; padding:32px 36px; border:1px solid var(--line); border-radius:24px; background:var(--card); display:grid; grid-template-columns:.8fr 1.2fr; gap:10px 48px; }
.invite h2 { font-size:26px; letter-spacing:-.02em; margin:0; }
.invite p { grid-column:2; margin:0 0 10px; color:var(--muted); font-size:15px; line-height:1.55; }
.invite p:last-of-type { margin-bottom:0; }
.invite p strong { color:var(--ink); }

.not-found { max-width:1180px; margin:auto; padding:120px 28px; }
.not-found em { color:var(--coral-text); font-style:normal; }
.text-link { font-weight:800; }
footer { max-width:1180px; margin:auto; padding:28px; border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; align-items:center; font-size:13px; }
footer a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
.link-button { font:inherit; color:inherit; background:none; border:0; padding:0 4px; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.link-button:focus-visible { outline:3px solid var(--coral-text); outline-offset:3px; border-radius:6px; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:64px; gap:70px; }
  .workout-shell { max-width:590px; }
  .session-intro { grid-template-columns:1fr; gap:20px; }
  .moments { grid-template-columns:1fr; gap:48px; max-width:560px; }
  .moment:nth-child(2),.moment:nth-child(3) { margin-top:0; }
  .screen { min-height:0; }
  .invite { margin:0 28px 80px; grid-template-columns:1fr; }
  .invite p { grid-column:auto; }
}
@media (max-width:620px) {
  .nav { height:68px; padding:0 20px; }
  .hero { padding:44px 20px 76px; gap:56px; }
  .lede { font-size:17px; margin:24px 0; }
  .badge img { height:48px; }
  .workout-shell { padding:22px; border-radius:25px; box-shadow:14px 18px 0 var(--sage); }
  .workout-shell:before { width:120px; height:120px; right:-46px; top:-72px; }
  .exercise { grid-template-columns:27px 1fr auto; gap:10px; }
  .start-bar { gap:10px; }
  .session { padding:80px 20px; }
  .download { padding:88px 20px 72px; }
  .download-icon { width:72px; height:72px; }
  .invite { margin:0 20px 64px; padding:26px 22px; }
  footer { padding:24px 20px; flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .badge { transition:none; } }