/* GymHack — light (2026-08-18).
   The page ground is white; the only dark surfaces left are the ones that are meant to
   read as objects: the phone in the coach section and the equipment photography, both of
   which are dark-ground artefacts and gain from the contrast rather than fighting it.

   Two accent tokens, and the distinction matters on white: --accent is for FILLS (bars,
   pills, buttons, the workout cards) where the orange carries dark text on top;
   --accent-ink is the darkened orange for accent-coloured TEXT and 1px strokes, because
   #ff9f0a on white is about 2:1 and unreadable. Same for the data palette: --d-* are the
   fill colours, --dk-* the darkened line/text variants.

   Note for anyone comparing with the app: the app's own Light theme uses a GREEN tint
   (ThemeColors.swift:64-79). The site deliberately keeps brand orange — green is an
   in-app theme option, orange is what is on the App Store icon.

   Rules unchanged from the previous build: one accent, hairlines never borders, zero
   box-shadows on content, and the gradients are counted. */
:root{
  color-scheme: light;
  --bg:#fff; --bg-2:#f5f5f7; --card:#f4f4f6; --card-2:#e9e9ee;
  --hair:#e4e4e9; --hair-2:#d3d3da;
  --text:#16161a; --text-2:#4b4b55; --text-3:#6d6d78;
  --accent:#ff9f0a; --accent-hi:#e07c00; --accent-ink:#9a5a00;
  --accent-soft:rgba(255,159,10,.16); --on-accent:#2a1a00;
  --pro:#7c3aed; --pro-soft:rgba(124,58,237,.12);

  /* data — fills */
  --d-blue:#0a84ff; --d-green:#30d158; --d-yellow:#ffd60a; --d-orange:#ff9f0a;
  --d-red:#ff453a; --d-grey:#8e8e93;
  /* data — darkened, for strokes, legends and any text */
  --dk-blue:#0060df; --dk-green:#127a46; --dk-yellow:#8a6a00; --dk-orange:#b06a00;
  --dk-red:#c9271c; --dk-grey:#5f5f69;
  --tier-green:#1aa85a; --tier-maroon:#8e2f2f;

  /* the muscle bodies: light silhouette, dark rim, so they read on white */
  --body-rim:#b9b9c2; --body-base:#e2e2e8;

  /* the phone in the coach section keeps the app's real (dark) appearance */
  --phone-bezel:#1c1c1e; --app-bg:#141416; --app-card:#2c2c2e; --app-card-2:#1c1c1e;
  --app-mine:#3d3020; --app-text:#fff; --app-text-2:#a1a1a6; --app-text-3:#8e8e93;
  --app-hair:#2c2c30;
  --cloop:14s;

  --max:1160px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "Noto Sans","Noto Sans Arabic","Noto Sans Hebrew","Noto Sans Thai",
    "Hiragino Sans","Yu Gothic UI","Malgun Gothic","PingFang SC","PingFang TC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
@media(max-width:720px){.wrap{padding:0 20px}}
h1,h2,h3{margin:0 0 .5em;color:var(--text);font-weight:700}
h1{font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.10;letter-spacing:-.028em}
h3{font-size:1.0625rem;line-height:1.30;letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:var(--text-2);max-width:52ch}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate}
.micro{font-size:.6875rem;font-weight:600;line-height:1.35;color:var(--text-3)}
.reading{font-size:.8125rem;line-height:1.5;color:var(--text-3);max-width:60ch}
section{padding-block:clamp(64px,7vw,104px)}
.band{background:var(--bg-2)}

/* §0 header */
/* saturate(160%) turned anything vivid passing underneath — the hero body, the HR
   bands, the Coach Review border — into a coloured smear across the nav. The glass is
   supposed to disappear, so: more black, no saturation boost. */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px;
  max-width:var(--max);margin:0 auto;padding:0 40px}
@media(max-width:720px){.nav{padding:0 20px}}
.brand{display:flex;align-items:center;gap:9px}
.brand img.ic{width:24px;height:24px;border-radius:6px}
.brand img.wm{height:20px;width:auto}
.nav-links{display:flex;gap:22px}
.nav-links a{font-size:13px;font-weight:600;color:var(--text-3)}
.nav-links a:hover{color:var(--text)}
@media(max-width:900px){.nav-links{display:none}}
.nav-right{display:flex;align-items:center;gap:10px}
.chip-soon{font-size:12px;font-weight:700;color:var(--text-2);background:var(--card);
  border:1px solid var(--hair-2);border-radius:999px;padding:6px 12px;cursor:default;white-space:nowrap}

/* §1 hero */
.hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:center;overflow:hidden}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 40px;width:100%}
@media(max-width:720px){.hero-inner{padding:0 20px}}
.hero-copy{max-width:min(58%,620px)}
@media(max-width:900px){.hero-copy{max-width:100%}}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:20px}
.hero .lede{margin-top:18px}
.avail{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.avail span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--text-2);background:var(--card);border:1px solid var(--hair-2);border-radius:999px;padding:9px 15px}
.avail i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.hero-note{margin-top:14px;font-size:13px;color:var(--text-3);max-width:52ch}
.hero-body{position:absolute;inset-block:0;inset-inline-end:0;width:min(46vw,700px);
  overflow:hidden;pointer-events:none;z-index:1}
.hero-body .bloom{position:absolute;inset:0;
  background:radial-gradient(50% 44% at 66% 44%,rgba(255,159,10,.10),transparent 72%)}
.hero-body .stage{position:absolute;inset-block-start:-14%;inset-inline-end:-6%;height:128%;aspect-ratio:675/989}
.hero-body .lyr{position:absolute;inset:0;-webkit-mask:var(--src) center/contain no-repeat;
  mask:var(--src) center/contain no-repeat}
.hero-body .rim{transform:translate(-1px,-1px);background:var(--body-rim)}
.hero-body .base{background:linear-gradient(180deg,#ececf1,var(--body-base))}
.hero-body .m{opacity:.88}
@media(max-width:900px){.hero-body{width:74vw;opacity:.30}}
.ramp{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.ramp span{display:flex;align-items:center;gap:5px}
.ramp i{width:10px;height:10px;border-radius:3px}
.sample{position:absolute;top:16px;inset-inline-end:16px;z-index:3;font-size:11px;font-weight:600;
  color:var(--text-2);background:var(--card-2);border-radius:999px;padding:4px 10px}

/* §2 spine — chart drawn straight on the page ground, no card */
.spine svg{width:100%;height:auto;display:block;margin:8px 0 4px}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin:6px 0 14px}
.legend span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-3)}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--d-grey) 0 5px,transparent 5px 9px)}

/* §3 ruler */
.ruler-row{display:grid;grid-template-columns:420px 1fr;gap:40px;align-items:center;margin-top:24px}
@media(max-width:900px){.ruler-row{grid-template-columns:1fr;gap:24px}}
.score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score b{font-size:clamp(2.75rem,5vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.score .delta{color:var(--dk-green);font-size:20px;font-weight:700}
.tier-badge{font-size:11px;font-weight:700;color:var(--pro);background:var(--pro-soft);
  border-radius:999px;padding:5px 10px}
.spectrum{display:flex;gap:2px;height:44px;position:relative}
.spectrum div{flex:1;border-radius:4px;opacity:.3}
.spectrum div.on{opacity:1}
.spectrum .marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);border-radius:1px;flex:none}
.thresh{display:flex;justify-content:space-between;margin-top:8px}
.thresh span{font-size:11px;font-weight:600;color:var(--text-3)}
@media(max-width:720px){.thresh span:nth-child(even){display:none}}

/* §4 trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
@media(max-width:900px){.trio{grid-template-columns:1fr}}
.tile{background:var(--card);border-radius:16px;padding:24px}
.tile b{display:block;font-size:15px;font-weight:700;letter-spacing:-.005em;margin-bottom:14px}
.tile-cap{font-size:13px;color:var(--text-3);margin:12px 2px 0}
.hexwrap{position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto;
  align-items:center;justify-items:center;gap:4px}
.hexwrap svg{grid-area:2/2;width:100%;max-width:210px}
.hexwrap .ax{font-size:11px;font-weight:600;color:var(--text-3);text-align:center}
.zones{display:flex;height:40px;border-radius:8px;overflow:hidden}
.zones div{display:flex;align-items:center;justify-content:center;color:#0b1015;font-size:11px;font-weight:800}
.zonenames{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.zonenames span{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text-3)}
.zonenames i{width:10px;height:10px;border-radius:3px}
.map-back{position:relative;height:300px;margin:0 auto;aspect-ratio:675/989}
.map-back .lyr{position:absolute;inset:0;-webkit-mask:var(--src) center/contain no-repeat;
  mask:var(--src) center/contain no-repeat}
.map-back .rim{transform:translate(-1px,-1px);background:var(--body-rim)}
.map-back .base{background:var(--body-base)}

/* §5 ledger */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:28px}
@media(max-width:1000px){.ledger{grid-template-columns:1fr}}
.lrow{display:grid;grid-template-columns:minmax(0,24ch) 1fr;gap:20px;align-items:start;
  padding-block:20px;border-bottom:1px solid var(--hair)}
@media(max-width:1000px){.lrow{grid-template-columns:1fr;gap:6px}}
/* The row titles are <b>, not headings — deliberately, so 13 mock-UI labels stay out of the
   document outline. These rules said h3/h4 and so matched nothing: .lrow silently lost its
   accent square, and .hrow lost `display:block`, which ran every title straight into its body
   text ("Add your own machinesName it, photograph it…") in all 36 locales. */
.lrow b{font-size:15px;font-weight:700;display:flex;align-items:baseline;gap:8px;
  margin:0;line-height:1.35;letter-spacing:-.005em}
.lrow b::before{content:"";width:12px;height:12px;flex:none;border-radius:3px;background:var(--accent-soft);
  border:1px solid var(--accent);transform:translateY(1px)}
.lrow p{margin:0;color:var(--text-2)}

/* §6 triptych */
/* Was two columns each holding its own <h3> — which buried the whole Watch section, a
   top-level nav destination, as a subsection of "your gym". Watch is its own <section>
   with its own <h2> now, and .tript is a plain two-up grid of rows, like .ledger. */
.tript{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:28px}
@media(max-width:1000px){.tript{grid-template-columns:1fr}}
/* The equipment shots lead the section rather than living inside one column: with the
   language column gone the photo block made the left column 813px against the right's
   367, and half the section was whitespace. Full width also lets all four tiles sit in
   one row instead of a 2x2. */
.machines{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0 8px;
  background:#141416;border-radius:18px;padding:10px}
@media(max-width:720px){.machines{grid-template-columns:1fr 1fr}}
.machines img{aspect-ratio:1;object-fit:cover;border-radius:16px;
  -webkit-mask-image:none;mask-image:none}
.machines .plus{aspect-ratio:1;border-radius:16px;border:1.5px dashed var(--accent);
  display:flex;align-items:center;justify-content:center;color:var(--accent-ink);font-size:28px;font-weight:700}
.hrow{padding-block:14px;border-bottom:1px solid var(--hair)}
.hrow b{display:block;font-size:15px;font-weight:700;margin:0 0 3px;line-height:1.35;
  letter-spacing:-.005em;color:var(--text)}
.hrow span{color:var(--text-2)}

/* §7 scoreboard */
.board{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:32px;align-items:start}
@media(max-width:900px){.board{grid-template-columns:1fr}}
.col-free{padding-inline-end:40px;border-inline-end:1px solid var(--hair)}
@media(max-width:900px){.col-free{padding-inline-end:0;border-inline-end:0;
  border-bottom:1px solid var(--hair);padding-bottom:24px;margin-bottom:24px;order:2}}
.col-pro{background:var(--card);border:1px solid rgba(255,159,10,.38);border-radius:16px;
  padding:24px;margin-inline-start:40px}
@media(max-width:900px){.col-pro{margin-inline-start:0;order:1}}
.board h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pill{font-size:11px;font-weight:700;letter-spacing:.05em;background:var(--accent);color:var(--on-accent);
  border-radius:999px;padding:5px 10px}
/* Beta badge. Deliberately NOT the accent-filled .pill — that one shouts "14-DAY FREE
   TRIAL" and is promotional. A beta marker is a caveat, so it reads as an outline. */
.pill-beta{background:transparent;color:var(--text-3);border:1px solid var(--hair-2);
  vertical-align:middle;text-transform:uppercase}
h2 .pill-beta{font-size:.5em;position:relative;top:-.15em}
.cbeta{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--app-text-3);border:1px solid var(--app-hair);border-radius:999px;
  padding:1px 4px;margin-inline-start:5px}
.price{font-size:13px;color:var(--text-3);margin:0 0 10px}
.board ul{list-style:none;padding:0;margin:10px 0 0}
.board li{min-height:52px;display:flex;align-items:center;gap:10px;color:var(--text-2);
  border-bottom:1px solid var(--hair);padding-block:8px}
.board li:last-child{border-bottom:0}
.board li::before{content:"";width:12px;height:12px;flex:none;border-radius:3px}
.col-free li::before{background:rgba(48,209,88,.16);border:1px solid var(--d-green)}
.col-pro li::before{background:var(--accent-soft);border:1px solid var(--accent)}

/* §8 questions */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding-block:18px;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:14px;font-weight:700;flex:none}
@media(prefers-reduced-motion:no-preference){.faq summary::after{transition:transform .16s ease}}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 18px;color:var(--text-2)}

/* §9 footer */
footer{border-top:1px solid var(--hair);padding-block:40px;background:var(--bg-2)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--hair)}
.foot-top img{height:18px;width:auto}
.foot-links{display:flex;gap:18px}
.foot-links a{font-size:13px;color:var(--text-3)}
.foot-links a:hover{color:var(--text)}
.foot-locales{display:grid;grid-template-columns:repeat(6,1fr);gap:6px 16px;margin:22px 0 18px}
@media(max-width:900px){.foot-locales{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.foot-locales{grid-template-columns:repeat(2,1fr)}}
.foot-locales a{font-size:13px;color:var(--text-3)}
.foot-locales a:hover{color:var(--text)}

/* Muscle overlays: the app's map is tinted anatomy, not flat primary shapes. Blending the
   colour into the dark base keeps the form readable instead of reading as a toy. */
/* screen-blend BRIGHTENS on a dark base — the opposite of the intent. Plain alpha lets the
   dark base show through and reads as tinted anatomy rather than flat primaries. */
.hero-body .m,.map-back .m{opacity:.82}
.map-back{height:340px}
/* Trio tiles must share a baseline or the captions stagger. */
.trio>div{display:flex;flex-direction:column}
.trio .tile{flex:1}
/* Sections were spending more height on padding than on content. */
section{padding-block:clamp(56px,5vw,80px)}
.spine svg{margin-bottom:0}

/* Density pass — measured against the spec's per-section budgets, which every section overran.
   The page must be shorter than the 5,712px version it replaces, not longer. */
section{padding-block:clamp(44px,4vw,68px)}
.board li{min-height:44px;padding-block:6px}
.board ul{margin-top:6px}
.map-back{height:250px}
.faq summary{padding-block:15px}
.faq .a{padding-bottom:15px}
footer{padding-block:30px}
.foot-locales{margin:16px 0 14px}
.lrow{padding-block:16px}
.hero{min-height:min(80svh,720px)}
.tript{gap:32px}
.trio{margin-top:26px}

/* The wordmark used to be dropped here: icon + wordmark + language picker + chip did not
   fit at 375px and it clipped mid-word. With the picker gone the row needs 311px, so the
   wordmark comes back — it just shrinks so the narrowest phones still clear it. */
@media(max-width:520px){
  .brand img.wm{height:17px}
  .nav{gap:10px}
  /* The silhouette sat behind the hero copy and fought it. Push it off-canvas and fade it. */
  .hero-body{width:100vw;opacity:.14;inset-inline-end:-24vw}
  .hero{min-height:auto;padding-block:56px 44px}
}

/* ── The planner ─────────────────────────────────────────────────────────────
   Section shape #10: two app surfaces side by side at portrait-ish proportions,
   with a full-width stimulus strip beneath. Nothing else on the page is built
   this way, which is the point — every section gets its own silhouette. */
.planes{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;margin-top:32px;
  align-items:start}
@media(max-width:900px){.planes{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:16px;padding:18px}

/* Schedule */
.plantop{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.9375rem;
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.plantop i{color:var(--accent-ink);font-style:normal;font-size:.75rem}
.wkbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 2px 2px}
.wknav{color:var(--text-3);font-size:1.25rem;line-height:1;flex:none}
.wkmid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;text-align:center}
.wkmid b{font-size:.9375rem}
.curpill{font-size:10px;font-weight:700;color:var(--on-accent);background:var(--accent);
  border-radius:100px;padding:2px 8px}
.wkphase{flex-basis:100%;font-size:11px;font-weight:600;color:var(--accent-ink)}
.cyc{font-size:11px;font-weight:600;color:var(--text-3);text-align:center;margin:0 0 10px}
.drow{border-radius:12px;padding:7px 9px;margin-bottom:6px;background:var(--bg-2)}
.drow.today{background:none;border:1px solid var(--accent)}
.drow.today .dhead b{color:var(--accent-ink)}
.dhead{display:flex;align-items:center;gap:8px;font-size:.8125rem}
.dhead b{font-weight:700}
.dhead .plus{margin-inline-start:auto;color:var(--accent-ink);font-weight:700;flex:none}
.todaypill{font-size:10px;font-weight:700;color:var(--on-accent);background:var(--accent);
  border-radius:100px;padding:1px 7px}
.rest{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--accent-ink)}
.rest svg{width:12px;height:12px;flex:none}
.wcard{display:flex;align-items:center;gap:10px;background:var(--accent);border-radius:10px;
  padding:8px 9px;margin-top:6px;color:var(--on-accent)}
.wcard .wg{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;
  background:rgba(255,255,255,.32);color:#fff}
.wcard .wg svg{width:19px;height:19px}
.wcard .wbody{min-width:0;display:flex;flex-direction:column}
.wcard .wbody b{font-size:.8125rem;font-weight:700}
.wcard .wsub{font-size:11px;font-weight:600;color:rgba(26,18,6,.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard .wtime{margin-inline-start:auto;font-size:11px;font-weight:700;flex:none}

/* Plan Evaluation */
.ehead{display:flex;align-items:center;gap:14px}
.ring{position:relative;width:72px;height:72px;flex:none;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring b{font-size:.9375rem;font-weight:700}
.emeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.emeta b{font-size:.9375rem}
.emeta span{font-size:12px;color:var(--text-3)}
.emeta .edone{color:var(--accent-ink);font-weight:600}
.etrio{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0;
  border-block:1px solid var(--hair);padding:12px 0}
.etrio div{text-align:center}
.etrio div+div{border-inline-start:1px solid var(--hair)}
.etrio b{display:block;font-size:1.125rem;font-weight:700;color:var(--accent-ink)}
.etrio span{font-size:11px;font-weight:600;color:var(--text-3)}
.coach{border-radius:12px;padding:14px;background:var(--bg-2)}
.coach-h{display:flex;align-items:center;gap:8px}
.coach-h b{font-size:.9375rem}
.coach .spark{width:18px;height:18px;flex:none}
.coach .spark svg{width:100%;height:100%}
.pro-pill{font-size:10px;font-weight:700;color:var(--pro);background:var(--pro-soft);
  border-radius:100px;padding:2px 8px;margin-inline-start:auto}
.coach-sub{font-size:12px;color:var(--text-3);margin:4px 0 12px}
.ins{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.ins .ok{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--dk-green);color:#fff;font-size:11px;font-weight:800}
.sug-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:12px 0 8px}
.sug{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.sug span{flex:none;font-size:12px;line-height:1.5}
.sug p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--text-2)}

/* Muscle stimulus strip.
   iOS draws these as a light body on a warm dark tile with the worked muscle in
   anatomical salmon, and encodes stimulus in the TILE BORDER, not in the muscle's
   opacity. A first pass graded the muscle itself and the low-stimulus tiles came out
   invisible — the whole grid has to stay legible at 96px. */
.stim{margin-top:20px}
.stim-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 12px}
.stim-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
@media(max-width:900px){.stim-grid{grid-template-columns:repeat(4,1fr)}}
.stile{border-radius:12px;padding:10px 6px 12px;text-align:center;background:var(--card)}
.sbody{position:relative;display:block;height:84px;aspect-ratio:675/989;margin:0 auto 6px;
  border-radius:9px;background:#fbf3ea;padding:5px}
.sbody .lyr{position:absolute;inset:5px;-webkit-mask:var(--src) center/contain no-repeat;
  mask:var(--src) center/contain no-repeat}
.sbody .base{background:#c6c6cf}
.sbody .on{background:#e8453a}
.stile.lv-low  .sbody{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.30)}
.stile.lv-med  .sbody{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.55)}
.stile.lv-high .sbody{box-shadow:inset 0 0 0 2px rgba(255,159,10,.80)}
.stile.lv-vhigh .sbody{box-shadow:inset 0 0 0 2px var(--accent)}
.stile b{display:block;font-size:11px;font-weight:700;line-height:1.25}
.stile .num{font-size:10px;font-weight:600;color:var(--text-3)}
.stim-leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.stim-leg span{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text-3)}
.stim-leg i{width:10px;height:10px;border-radius:3px;background:#fbf3ea}
.stim-leg i.lv-low{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.30)}
.stim-leg i.lv-med{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.55)}
.stim-leg i.lv-high{box-shadow:inset 0 0 0 2px rgba(255,159,10,.80)}
.stim-leg i.lv-vhigh{box-shadow:inset 0 0 0 2px var(--accent)}

/* Weekly Breakdown — the row that squares the evaluation column off against the week. */
.wbreak{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11px;
  font-weight:600;color:var(--text-3)}
.wbreak .bar{flex:1;height:8px;border-radius:100px;background:var(--card-2);overflow:hidden}
.wbreak .bar i{display:block;height:100%;background:var(--accent);border-radius:100px}

/* Plan Analysis lens picker, and the stretch that squares the two panels. */
.planes{align-items:stretch}
.panel.eval{display:flex;flex-direction:column}
.panel.eval .coach{flex:1}
.segs{display:flex;gap:8px;margin-top:14px}
.seg{display:grid;place-items:center;min-height:30px;padding:0 12px;border-radius:9px;
  background:var(--card-2);color:var(--text-3);font-size:11px;font-weight:700}
.seg.on{background:var(--accent);color:var(--on-accent)}

/* Legal pages — the privacy policy and terms, lifted from the app's own strings. */
.nav-back{font-size:13px;font-weight:600;color:var(--text-3)}
.legal{padding-block:clamp(48px,6vw,88px)}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2rem,4vw,3rem)}
.legal .updated{font-size:13px;color:var(--text-3);margin-bottom:36px}
.legal section{padding-block:0;margin-bottom:28px}
.legal h2{font-size:1.125rem;line-height:1.35;letter-spacing:-.01em;margin-bottom:.45em}
.legal p{color:var(--text-2);margin:0}

/* ── AI Coach chat, animated ─────────────────────────────────────────────────
   One 14s clock. Every step is a percentage of it, so the sequence stays in step
   no matter how long a locale's sentences are:
     0-8%    empty state (sparkle, prompt, the four example questions)
     8-14%   cross-fade to the thread
     14-22%  the user's message rises out of the composer
     22-38%  "Coach is thinking…", spinner turning
     38-62%  the "Edit your plan" proposal, rainbow edge travelling
     62-66%  Apply depresses
     66-100% the proposal collapses into the coach's confirmation
   Layers are absolutely stacked, so nothing reflows and no locale can push the
   phone out of shape. prefers-reduced-motion drops straight to the end state. */
.coachgrid{display:grid;grid-template-columns:1fr minmax(0,320px);gap:56px;align-items:center}
@media(max-width:900px){.coachgrid{grid-template-columns:1fr;gap:36px;justify-items:center}
  .coachcopy{justify-self:stretch}}
.asks{list-style:none;padding:0;margin:26px 0 20px;display:flex;flex-direction:column;gap:10px}
.asks li{font-size:1.0625rem;font-weight:600;color:var(--text-2);padding-inline-start:16px;
  border-inline-start:2px solid var(--accent)}

.phone{width:320px;max-width:100%;aspect-ratio:320/640;border-radius:42px;padding:9px;
  background:var(--phone-bezel);position:relative}
.phone-screen{position:relative;height:100%;border-radius:34px;overflow:hidden;
  background:var(--app-bg);display:flex;flex-direction:column}
.cnav{position:relative;height:52px;flex:none;display:grid;place-items:center;
  border-bottom:1px solid var(--app-hair)}
.cnav b{font-size:13px;font-weight:700;color:var(--app-text)}
.cdi{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:70px;height:15px;
  border-radius:100px;background:var(--phone-bezel)}
.cstage{position:relative;flex:1;min-height:0}
.cempty,.cthread{position:absolute;inset:0;padding:14px 12px;overflow:hidden}

.cempty{animation:cEmpty var(--cloop) linear infinite}
.cglyph{display:block;width:22px;height:22px;color:var(--accent);margin-bottom:10px}
.cempty b{display:block;font-size:15px;font-weight:700;color:var(--app-text);margin-bottom:6px}
.cempty p{font-size:11px;line-height:1.45;color:var(--app-text-2);margin:0 0 12px}
.cchips{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.cchip{font-size:10.5px;font-weight:600;color:var(--app-text);background:var(--app-card);
  border-radius:100px;padding:6px 11px}

.cthread{animation:cThread var(--cloop) linear infinite}
.cday{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.cday::before,.cday::after{content:"";flex:1;height:1px;background:var(--app-hair)}
.cday span{font-size:10px;color:var(--app-text-3)}
.cmsg{display:flex;margin-bottom:8px}
.cmsg span{max-width:84%;border-radius:15px;padding:8px 11px;font-size:11.5px;line-height:1.4}
.cmsg.me{justify-content:flex-end;animation:cMe var(--cloop) linear infinite}
.cmsg.me span{background:var(--app-mine);color:var(--app-text)}
.cmsg.them{animation:cThem var(--cloop) linear infinite}
.cmsg.them span{background:var(--app-card);color:var(--app-text)}
.cthink{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--app-text-2);
  margin-bottom:8px;animation:cThink var(--cloop) linear infinite}
.cspin{width:11px;height:11px;flex:none;border-radius:50%;
  border:2px solid var(--accent);border-top-color:transparent;
  animation:cSpin .8s linear infinite}

/* The proposal card. Its rainbow edge is one gradient panned behind a 1.5px inset — the
   same trick as the composer, and the only two gradients the chat uses. */
.cedit{animation:cEdit var(--cloop) linear infinite}
.cedit,.cfield{border-radius:15px;padding:1.5px;
  background:linear-gradient(90deg,#64d2ff,#bf5af2,#ff375f,#30d158,#64d2ff);
  background-size:280% 100%;animation-name:cEdit,cEdge;animation-duration:var(--cloop),5s;
  animation-timing-function:linear,linear;animation-iteration-count:infinite,infinite}
.cedit-in{border-radius:13.5px;background:var(--app-card-2);padding:11px}
.cedit-h{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.cedit-h b{font-size:12.5px;font-weight:700;color:var(--app-text)}
.cswap{width:15px;height:15px;flex:none;color:var(--accent)}
.cedit-b{font-size:10.5px;line-height:1.45;color:var(--app-text-2);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.cedit-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cbtn{border-radius:100px;padding:7px 0;text-align:center;font-size:11px;font-weight:700}
.cbtn.ghost{background:var(--app-mine);color:var(--accent)}
.cbtn.go{background:var(--accent);color:var(--on-accent);animation:cTap var(--cloop) linear infinite}

.ccomposer{flex:none;display:flex;align-items:center;gap:7px;padding:10px 12px 14px;
  border-top:1px solid var(--app-hair)}
.cfield{flex:1;border-radius:100px;animation-name:cEdge;animation-duration:5s;
  animation-iteration-count:infinite;background-size:280% 100%;padding:1.5px}
.cfield-in{display:block;border-radius:100px;background:var(--app-card-2);padding:8px 12px;
  font-size:11px;color:var(--app-text-3)}
.cmic,.csend{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center}
.cmic{background:var(--accent);color:var(--on-accent)}
.cmic svg,.csend svg{width:14px;height:14px}
.csend{background:var(--app-card);color:var(--app-text-3);animation:cSend var(--cloop) linear infinite}

@keyframes cEdge{to{background-position:280% 0}}
@keyframes cSpin{to{transform:rotate(360deg)}}
@keyframes cEmpty{0%,8%{opacity:1}14%,100%{opacity:0}}
@keyframes cThread{0%,8%{opacity:0}14%,100%{opacity:1}}
@keyframes cMe{0%,14%{opacity:0;transform:translateY(14px)}22%,100%{opacity:1;transform:none}}
@keyframes cThink{0%,22%{opacity:0}26%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes cEdit{0%,38%{opacity:0;transform:translateY(10px)}
  44%,62%{opacity:1;transform:none}68%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes cTap{0%,62%{transform:none}64%{transform:scale(.94)}66%,100%{transform:none}}
@keyframes cThem{0%,66%{opacity:0;transform:translateY(10px)}72%,100%{opacity:1;transform:none}}
@keyframes cSend{0%,14%{background:var(--accent);color:var(--on-accent)}
  16%,100%{background:var(--app-card);color:var(--app-text-3)}}

@media(prefers-reduced-motion:reduce){
  .cempty{display:none}
  .cthink,.cedit{display:none}
  .cempty,.cthread,.cmsg,.cthink,.cedit,.cbtn.go,.csend,.cspin,.cfield{animation:none}
  .cthread{opacity:1}
  .cmsg{opacity:1;transform:none}
}
/* The overflow menu the real screen carries top-right (ViewsAssistantView.swift:118). */
.cmore{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--app-card);color:var(--accent);font-size:10px;font-weight:700;line-height:1}

/* ── Why not a general chatbot ───────────────────────────────────────────────
   Section shape #12: a data readout. The point of the section is that the coach is
   handed measured values before it answers, so the section shows the packet rather than
   describing it — the only monospaced, tabular thing on the page. */
.whygrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;
  align-items:start;margin-top:34px}
@media(max-width:1000px){.whygrid{grid-template-columns:1fr;gap:34px}}

.brief{background:var(--card);border-radius:16px;overflow:hidden;
  font-variant-numeric:tabular-nums}
.brief-h{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--hair);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.brief-h .dot{width:7px;height:7px;border-radius:50%;background:var(--d-green);flex:none}
.brief-body{padding:6px 16px 12px}
.brow{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:12px;
  padding-block:9px;border-bottom:1px solid var(--hair);align-items:baseline}
.brow:last-child{border-bottom:0}
.brow b{font-size:11px;font-weight:700;color:var(--accent-ink);
  letter-spacing:.02em;white-space:nowrap}
.brow span{font-size:12.5px;line-height:1.45;color:var(--text-2);unicode-bidi:isolate;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.brief-q{border-top:1px solid var(--hair-2);background:var(--card-2);
  padding:12px 16px;font-size:13px;font-weight:600;color:var(--text)}
.brief-q::before{content:"▸";color:var(--accent-ink);margin-inline-end:8px}

.whyrows{margin-top:8px}
.whyrow{padding-block:18px;border-bottom:1px solid var(--hair)}
.whyrow:last-child{border-bottom:0}
.whyrow h3{display:block;font-size:1.0625rem;font-weight:700;margin:0 0 5px;
  line-height:1.35;letter-spacing:-.01em}
.whyrow p{margin:0;color:var(--text-2)}
.whyrow .n{font-size:11px;font-weight:700;color:var(--accent-ink);
  letter-spacing:.08em;display:block;margin-bottom:6px}

/* Footer legal block. The trademark line is required once you name Apple Watch, iPhone,
   App Store, Siri, Android and Wear OS in the copy, which this site does throughout. */
.foot-legal{margin-top:4px}
.copyline{font-size:12px;color:var(--text-3);margin:0 0 8px}
.tm{font-size:11px;line-height:1.5;color:var(--text-3);margin:0 0 6px;max-width:86ch;opacity:.85}
.tm:last-child{margin-bottom:0}

/* Article body on the standalone landing page. .reading is a 13px caption size and was
   being used for actual prose, which read as fine print under a 40px heading. */
.prose{font-size:1.0625rem;line-height:1.65;color:var(--text-2);max-width:68ch;margin:0 0 1.1em}

/* The app's own screen title, labelling the figure it belongs to rather than standing in
   as the section's document-level heading. */
.figlabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:22px 0 2px}

/* 1RM calculator. The table is server-rendered and is the part people link to; the live
   figures are progressive enhancement and the page is complete without them. */
.calc{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;margin:28px 0 14px;
  background:var(--card);border-radius:16px;padding:22px}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.calc input{width:130px;font:inherit;font-size:1.25rem;font-weight:700;color:var(--text);
  background:var(--bg);border:1px solid var(--hair-2);border-radius:10px;padding:9px 12px}
.calc input:focus{outline:2px solid var(--accent);outline-offset:1px}
.calcout{display:flex;gap:28px;margin-inline-start:auto}
.calcout div{text-align:end}
.calcout b{display:block;font-size:1.75rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.calcout span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3)}
@media(max-width:600px){.calcout{margin-inline-start:0;width:100%;justify-content:space-between}}
.rmtable{border-collapse:collapse;margin:22px 0 14px;width:100%;max-width:440px}
.rmtable th,.rmtable td{text-align:start;padding:9px 14px 9px 0;border-bottom:1px solid var(--hair);
  font-size:14px}
.rmtable th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3)}
.rmtable td.num{font-variant-numeric:tabular-nums}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--card);border-radius:5px;padding:2px 6px}

/* Platform qualifier. The AI Coach ships on iPhone first and the site sells it in two
   places while advertising Android — without this the page promises Android users a
   feature that does not exist for them. */
  border-inline-start:2px solid var(--hair-2);padding-inline-start:12px}