/* The fonts, served from this site (website upgrade, 9 Oct 2026): Archivo and Inter, Latin letters, one variable file each
   covering every weight (83 KB together, from Google Fonts; SIL Open Font License 1.1, which travels inside each file). Text
   shows straight away in the phone's own font and swaps in, and nothing waits on another site, even on gym signal.
   Letters outside Latin (a name with a macron, say) use the phone's font. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/archivo-latin.woff2") format("woff2");
  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("/fonts/inter-latin.woff2") format("woff2");
  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; }

:root {
  /* Program Plus gold (Sam, 10 Oct 2026): every Program Plus part reads these, so the gold is the same everywhere. */
  --plus: #f5c542; --plus-rgb: 245, 197, 66; --plus-hi: #f8d671; --plus-light: #fbe7a6; --plus-light-rgb: 255, 231, 160;
  --plus-deep: #d6a11f; --plus-cream: #f3e2b0; --plus-white: #fff7e0; --plus-bg1: #1e1910; --plus-bg2: #13100a;
  --bg: #0a0a0b;
  --surface: #121214;
  --surface-2: #1a1a1d;
  --line: #26262b;
  --line-soft: #1e1e22;
  --ink: #f4f4f5;
  --muted: #9b9ba3;
  --muted-2: #8a8a93; /* 5.6:1 on --bg (WCAG AA needs 4.5:1) */
  --red: #be1220;
  --red-bright: #e11d28;
  --red-text: #ff4d57; /* small red words: 4.9:1 or more on every dark background here (--red-bright is 3.4 to 4.2) */
  --line-strong: #66666f; /* outlines of boxes you type in or tap: 3.3:1 on --surface (WCAG asks 3:1) */
  --red-glow: rgba(190, 18, 32, .28);
  --radius: 12px;
  --max: 1140px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", var(--font);
}

* { box-sizing: border-box; }
/* An inline display style (e.g. style="display:grid" for a form section) beats
   the browser's default [hidden] rule, which has no !important — so an element
   with both stays visible no matter what JS sets .hidden to. This forces hidden
   to actually win everywhere on the site, not just where nobody set inline display. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--red); color: #fff; }

h1, h2, h3, h4 { font-family: var(--display); margin: 0 0 .5em; line-height: 1.04; letter-spacing: -0.02em; }
/* Headings in sentence case: capitals are kept for short labels and buttons only. */
h1 { font-size: clamp(2.2rem, 4.5vw, 3.85rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; position: relative; }
.section.tight { padding: 64px 0; }
@media (max-width: 900px) { .section { padding: 64px 0; } .section.tight { padding: 48px 0; } }
@media (max-width: 640px) { .section { padding: 48px 0; } .section.tight { padding: 40px 0; } }
.section.alt { background: var(--surface); border-block: 1px solid var(--line-soft); }

.eyebrow {
  display: inline-block;
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
  font-weight: 600; color: var(--muted-2); margin-bottom: 10px; font-family: var(--body);
}
.lede { font-size: 1.15rem; color: var(--muted); max-width: 56ch; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,11,.72); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .25s, background .25s;
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(10,10,11,.94); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 44px; width: auto; }
.brand .wordmark { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.05rem; line-height: 1; }
.brand .wordmark span { color: var(--red-bright); display: block; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; font-size: .93rem; font-weight: 500; color: var(--muted); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn { color: #fff; }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } .nav .wrap { height: 66px; } .brand img { height: 38px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 8px; border: 1px solid var(--red);
  background: var(--red); color: #fff; font-family: var(--display);
  font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .16s, transform .16s, box-shadow .16s, border-color .16s;
}
.btn:hover { background: var(--red-bright); border-color: var(--red-bright); transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--red-glow); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--muted-2); box-shadow: none; }
.btn.small { padding: 10px 18px; font-size: .78rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 90px 0 50px; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (min-width: 901px) { .hero h1 { font-size: clamp(2.2rem, 3.1vw, 2.85rem); } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero { padding: 60px 0 40px; } }
.hero h1 .accent { color: var(--red-bright); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-trust { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.hero-trust b { color: var(--ink); font-weight: 600; }

.sheet {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
}
.sheet .sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sheet .tag { font-family: var(--display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.sheet .tag b { color: var(--red-bright); }
.sheet .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
.sheet .row:last-child { border-bottom: 0; padding-bottom: 0; }
.sheet .row span { color: var(--ink); }
.sheet .row b { font-family: var(--display); font-weight: 700; color: var(--muted); white-space: nowrap; font-size: .9rem; letter-spacing: .01em; }
.sheet .row b em { color: var(--red-bright); font-style: normal; }
.sheet-link { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .02em; color: var(--red-bright); text-decoration: none; }
.sheet-link:hover { color: var(--ink); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 44px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--bg); padding: 28px 26px; transition: background .2s; }
.step:hover { background: var(--surface); }
.step .n { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--red-bright); margin-bottom: 14px; letter-spacing: 0; }
.step h3 { margin-bottom: .4em; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; align-items: start; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plan {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; position: relative;
  transition: border-color .2s, transform .2s;
}
.plan:hover { border-color: var(--muted-2); transform: translateY(-3px); }
.plan.featured { border-color: var(--red); }
.plan.featured::before {
  content: "Recommended"; position: absolute; top: -10px; left: 28px;
  background: var(--bg); color: var(--red-bright); font-family: var(--body); font-weight: 600;
  font-size: .68rem; letter-spacing: .04em; padding: 2px 10px;
}
.plan .weeks {
  align-self: flex-start; font-family: var(--display); font-weight: 800; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--red);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 4px;
}
.plan .plan-tag { font-family: var(--display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.plan h3 { font-size: 1.5rem; text-transform: uppercase; margin: 6px 0 14px; }
.plan .oneoff-controls { display: grid; gap: 12px; margin-bottom: 22px; }
.plan .oneoff-controls label { display: grid; gap: 6px; font-family: var(--display); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.plan .oneoff-controls select { font-family: var(--font); font-size: .92rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); font-weight: 500; padding: 11px 36px 11px 13px; }
.plan .price { display: flex; align-items: baseline; gap: 8px; }
.plan .price .amt { font-family: var(--display); font-size: 3.4rem; font-weight: 900; letter-spacing: -0.045em; line-height: 1; }
.plan .price .cur { font-family: var(--display); font-size: .8rem; font-weight: 700; color: var(--muted-2); letter-spacing: .1em; }
.plan .per { color: var(--muted); font-size: .87rem; margin: 10px 0 24px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.plan li { padding: 10px 0 10px 26px; border-top: 1px solid var(--line-soft); font-size: .93rem; color: var(--muted); position: relative; }
.plan li:first-child { border-top: 0; }
.plan li::before {
  content: ""; position: absolute; left: 4px; top: 18px; width: 9px; height: 5px;
  border-left: 2px solid var(--red-bright); border-bottom: 2px solid var(--red-bright); transform: rotate(-45deg);
}
.pay-note { margin-top: 26px; font-size: .85rem; color: var(--muted-2); display: flex; align-items: center; gap: 8px; }

/* ---------- Forms ---------- */
form { display: grid; gap: 20px; }
label { display: grid; gap: 7px; font-weight: 500; font-size: .9rem; color: var(--ink); }
label small { font-weight: 400; color: var(--muted-2); font-size: .82rem; }
input, select, textarea {
  /* 16px: anything smaller makes iPhones zoom in when the field is tapped. */
  font: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--surface); color: var(--ink); width: 100%;
  transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
/* Text-like fields only: tick boxes and radio buttons keep a focus ring (below, round their chip or line). :where keeps
   this rule as light as plain input:focus, so the app's own box styles (.pg-row input, .pg-fx-num...) still win. */
input:where(:not([type=checkbox], [type=radio])):focus, select:focus, textarea:focus { outline: none; border-color: var(--red); background: var(--surface-2); }
/* A heading the page moves focus to (manage.html), so screen readers read the new view out. It
   isn't something to tap, so no focus box round it (iPhones were drawing a blue one). */
:is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
textarea { min-height: 108px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239b9ba3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; padding-right: 40px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.check input { width: auto; margin-top: 3px; accent-color: var(--red); flex-shrink: 0; }
.check a { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips label {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
  cursor: pointer; font-weight: 500; font-size: .88rem; transition: all .15s;
}
.chips label:hover { border-color: var(--muted-2); }
.chips input { width: auto; margin: 0; accent-color: var(--red); }
.chips label:has(input:checked) { background: var(--red); border-color: var(--red); color: #fff; }
/* Keyboard focus on a tick box or radio button shows round its whole chip, line or card (a white ring shows on a red
   picked chip too). Phones without :has keep the browser's own ring on the box. */
@supports selector(:has(*)) {
  .chips label:has(input:focus-visible), .check:has(input:focus-visible), .tier:has(input:focus-visible), .pcard:has(#planSub:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .chips input:focus-visible, .check input:focus-visible, .tier input:focus-visible { outline: none; }
}
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
legend { font-weight: 500; font-size: .9rem; padding: 0; margin-bottom: 6px; }
legend small { font-weight: 400; color: var(--muted-2); font-size: .8rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
@media (max-width: 560px) { .card { padding: 22px 18px; } }
.narrow { max-width: 720px; margin: 0 auto; }
.notice { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; padding: 16px 18px; font-size: .92rem; color: var(--muted); }
.error { color: #ff4d57; font-size: .88rem; } /* lighter than --red-bright for 4.5:1 contrast on dark */

/* ---------- FAQ ---------- */
/* The padding sits on the question itself, so the whole row is the tap target. */
details { border-top: 1px solid var(--line); padding: 0; }
details[open] { padding-bottom: 20px; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; min-height: 44px; transition: color .15s; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--red-bright); font-size: 1.4rem; font-weight: 400; line-height: 1; flex-shrink: 0; }
/* Only its own summary: a closed dropdown inside an open one keeps its + (About this program's list). */
details[open] > summary::after { content: "\2013"; }
summary:hover { color: var(--red-bright); }
details p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 68ch; }
details p + p { margin-top: 12px; }

/* ---------- CTA band ---------- */
.band { background: var(--surface); border-block: 1px solid var(--line); text-align: center; padding: 84px 0; }
@media (max-width: 900px) { .band { padding: 56px 0; } }
.band h2 { margin-bottom: .35em; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: .87rem; color: var(--muted-2); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; align-items: center; }
footer a { text-decoration: none; margin-right: 22px; transition: color .15s; display: inline-block; padding: 12px 0; }
footer a:hover { color: var(--ink); }
/* Phones: links in a tidy two-column list instead of ragged wrapped lines */
@media (max-width: 640px) {
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  footer .wrap > div:last-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; width: 100%; }
  footer a { margin-right: 0; }
}

/* ---------- Reduce Motion ----------
   No smooth scrolling (html's own smooth, above, included: a bare * never beat it). The fade-in blocks are gone (9 Oct 2026
   website upgrade): every page shows its content straight away, without waiting for a script. */
@media (prefers-reduced-motion: reduce) { html, * { scroll-behavior: auto; } }

/* ---------- Program view ---------- */
.program-head { padding: 56px 0 28px; }
/* AI-written text (titles, block focus) can run long, unlike short marketing
   headlines, so these get their own sizing instead of the hero-scale h1/h2. */
.program-title { font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: none; letter-spacing: -0.01em; }
.block-title { font-size: 1.3rem; text-transform: none; letter-spacing: -0.01em; margin-top: 8px; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0; }
.tab { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; transition: all .15s; }
.tab:hover { color: var(--ink); border-color: var(--muted-2); }
.tab.active { background: var(--red); color: #fff; border-color: var(--red); }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; overflow: hidden; }
.day-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.day-head h3 { margin: 0; text-transform: uppercase; }
.dp.has-wd { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; padding-top: 7px; padding-bottom: 7px; }
.dp-wd { font-size: .6rem; font-weight: 700; letter-spacing: .04em; opacity: .7; }
.dp.has-wd.on .dp-wd { opacity: 1; }
.day-head .muted { font-size: .87rem; }
table.ex { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
table.ex th, table.ex td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--line-soft); vertical-align: top; }
table.ex th { font-family: var(--display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); border-top: 0; font-weight: 700; }
table.ex td { color: var(--muted); }
table.ex td:first-child { width: 42px; }
table.ex td.name { font-weight: 600; color: var(--ink); }
table.ex td.name small { display: block; font-weight: 400; color: var(--muted-2); margin-top: 3px; font-size: .85rem; }
.table-wrap { overflow-x: auto; }
table.ex td.log-cell { white-space: nowrap; text-decoration: none; }
table.ex .log-w, table.ex .log-r {
  width: 48px; padding: 7px 6px; font-size: .88rem; text-align: center;
  border-radius: 6px;
}
table.ex .log-x { color: var(--muted-2); margin: 0 5px; font-size: .8rem; }
.checkin-due { margin-bottom: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.checkin-due .btn { margin-left: auto; min-height: 44px; }
@media (max-width: 480px) { .checkin-due .btn { margin-left: 0; width: 100%; text-align: center; } }
/* "Your program has been updated. Tap to refresh." on the program page (program.html refreshProgram): the whole note is the button. */
.pg-fresh { display: block; width: 100%; min-height: 44px; margin: 0 0 16px; text-align: left; font: inherit; font-size: .92rem; line-height: 1.5; cursor: pointer; }
.pg-fresh b { color: var(--ink); }
.coach-note { border: 1px solid rgba(190,18,32,.4); background: linear-gradient(165deg, rgba(190,18,32,.1), var(--surface)); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 24px; }
.coach-note-badge { font-family: var(--display); font-weight: 800; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); margin-bottom: 8px; }
.coach-note p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.6; }
.info-list { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; margin-bottom: 24px; background: var(--surface); }
.info-list details { padding: 0; }
.info-list details[open] { padding-bottom: 16px; }
.info-list details:first-of-type { border-top: 0; }
.info-list summary { font-size: .92rem; padding: 14px 0; }
.info-list p { font-size: .9rem; }

/* Per-exercise cards on the client program page (one row per set inside). */
.ex-card { padding: 16px 22px 18px; border-top: 1px solid var(--line-soft); }
.ex-card:first-child { border-top: 0; }
.ex-top { display: grid; row-gap: 6px; }
.ex-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; }
.ex-name { -webkit-appearance: none; appearance: none; font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.ex-name::after { content: '\25BE'; display: inline-block; margin-left: 4px; color: var(--muted-2); font-size: .8em; }
.ex-name[aria-expanded="true"]::after { content: '\25B4'; color: var(--red-bright); }
/* hover:hover excludes touch: a tap on mobile leaves the element "stuck" hovered until the next tap
   elsewhere, which was overriding the red expanded state right back to grey on every exercise except
   the first (open from load, so never actually tapped/hovered). Real mouse users only. */
@media (hover: hover) {
  .ex-name:hover::after { color: var(--ink); }
  .ex-name[aria-expanded="true"]:hover::after { color: var(--red-bright); }
}
.ex-meta { font-size: .84rem; color: var(--muted); }
.ex-notes { margin-top: 10px; padding: 10px 14px; background: var(--surface-2); border-radius: 8px; font-size: .88rem; color: var(--muted); }
table.sets { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .92rem; margin-top: 12px; }
table.sets th { text-align: center; padding: 0 6px 6px; font-family: var(--display); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
table.sets td { padding: 5px 6px; border-top: 1px solid var(--line-soft); vertical-align: middle; text-align: center; }
table.sets tr:first-child td { border-top: 0; }
table.sets th:first-child, table.sets td.set-n { width: 40px; color: var(--muted-2); font-weight: 600; }
table.sets th:first-child { letter-spacing: 0; } /* letter-spacing trails the last glyph, so a centered short label drifts left of the plain numbers below it — cancel it out here */
table.sets .log-w, table.sets .log-r, table.sets .log-p { width: 100%; max-width: 104px; padding: 7px 6px; font-size: 16px; text-align: center; border-radius: 6px; }
.day-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.day-complete .ex-name, .day-complete .ex-meta { opacity: .45; }
.day-complete table.sets { opacity: .55; }

/* Warm-up box on the day's first big lift (and any top set) */
.warmup { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--red); background: rgba(190,18,32,.08); border-radius: 0 8px 8px 0; font-size: .86rem; color: var(--ink); line-height: 1.5; }
.warmup b { font-weight: 700; }
/* About the same height with or without numbers, so set 1 doesn't jump while a weight is typed */
.pg-warm { min-height: 4.5em; }
/* The Warm-up box in the same grey as the first-time tip (.pg-hint-new): no red, the lead in green. */
.warmup.pg-warm { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--muted); line-height: 1.45; }
.warmup.pg-warm b { color: #46c987; }
/* A top set's card with its warm-up box closed: one quiet line pointing at the Warm-up button */
.pg-warm-nudge { margin: 0 0 8px; font-size: .84rem; color: var(--muted); line-height: 1.45; }
/* Earlier weeks' notes sit with this week's, just above "+ Add a note" */
.note-past { margin: 0 0 4px; }
/* Printed, the warm-up box shows (open or closed) only while it has numbers worked out from a weight: the "type your
   first set's weight" wording means nothing on paper */
@media print { .pg-warm[hidden][data-nums="1"] { display: block !important; } .pg-warm:not([data-nums="1"]) { display: none !important; } }
/* The client's own notes on an exercise */
.ex-note { margin-top: 10px; }
.ex-note-text { margin: 0 0 6px; padding: 9px 12px; background: var(--surface-2); border-radius: 8px; font-size: .88rem; color: var(--ink); white-space: pre-wrap; }
.ex-note-text.past { color: var(--muted); }
.ex-note-label { display: block; font-family: var(--display); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-bottom: 3px; }
.note-open { background: none; border: 0; padding: 6px 0; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; -webkit-appearance: none; appearance: none; }
.note-editor textarea { width: 100%; font-size: max(16px, .92rem); margin-top: 4px; }
.note-actions { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.note-cancel { min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; -webkit-appearance: none; appearance: none; }
@media (hover: hover) { .note-open:hover { color: var(--ink); } }
/* Earlier weeks' notes: one faded line, tap to open the full notes (older ones scroll inside the box). */
.note-past { margin-top: 8px; }
.note-teaser { display: block; width: 100%; min-height: 44px; background: none; border: 0; padding: 4px 0; text-align: left; font: inherit; font-size: .84rem; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none; }
.note-teaser-label { color: var(--muted); font-weight: 600; }
.note-history { margin-top: 4px; cursor: pointer; }
.note-history.more { overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px dashed var(--line); }
.note-history .ex-note-text:last-child { margin-bottom: 0; }
@media print { .note-teaser { display: none !important; } .note-history { display: block !important; } .note-history.more { max-height: none !important; overflow: visible; border: 0; } }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: var(--ink); color: var(--bg); font-family: var(--display); font-weight: 700;
  font-size: .82rem; letter-spacing: .01em; padding: 12px 22px; border-radius: 24px;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.6); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #333; --line: #ccc; }
  body { background: #fff; color: #000; }
  .nav, .tabs, .no-print, footer, .hero::before, .hero::after { display: none !important; }
  .day, .block-note, .card { border-color: #ccc; break-inside: avoid; }
  .block { display: block !important; page-break-before: always; }
  .block:first-of-type { page-break-before: auto; }
  table.ex td { color: #000; }
  .ex-notes { display: block !important; }
  .warmup { border-left-color: #999; background: none; color: #000; }
  .ex-note-text { background: none; border: 1px solid #ccc; color: #000; }
}

/* Billing interval toggle */
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.toggle button { background: transparent; border: 0; color: var(--muted); font: inherit; font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 9px 20px; cursor: pointer; transition: background .15s, color .15s; }
.toggle button:hover { color: var(--ink); }
.toggle button.on { background: var(--red); color: #fff; }
.week-pick { margin: 18px 0 22px; }
.week-pick button { padding: 8px 16px; }
.day-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; padding: 10px 0; position: sticky; top: 76px; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.day-pick .dp-label { display: none; }
@media (max-width: 760px) {
  .day-pick { top: 66px; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 4px; scrollbar-width: none; }
  .day-pick::-webkit-scrollbar { display: none; }
  .day-pick .dp-label { display: block; flex: 0 0 auto; margin-right: 2px; font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
  .day-pick .dp-word { display: none; }
  .day-pick .dp { flex: 1 1 0; min-width: 32px; padding: 9px 0; font-size: .8rem; text-align: center; }
  /* 4 days or fewer: there's room on a phone for the full "Day 1" labels */
  .day-pick.dp-full .dp-label { display: none; }
  .day-pick.dp-full .dp-word { display: inline; }
  .day-pick.dp-full .dp { font-size: .74rem; }
}
.day-pick .dp { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.day-pick .dp:hover { color: var(--ink); border-color: var(--muted-2); }
.day-pick .dp.on { background: var(--red); border-color: var(--red); color: #fff; }
.day-hidden { display: none; }
@media print { .day-hidden { display: block !important; } }

/* Add-to-home-screen prompt on the program page */
.install-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--red, #e11d28); border-radius: 10px; background: var(--card, rgba(255,255,255,.04)); }
.install-card > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; line-height: 1.35; }
.install-card > div span { color: var(--muted); font-size: .82rem; }
/* A big red Yes and a small grey No thanks (program.html installInner) */
.install-card .install-acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.install-card .install-yes { flex: 1; min-height: 52px; font-size: 1rem; }
.install-card .install-no { flex: none; min-height: 44px; padding: 0 8px; background: none; border: 0; color: var(--muted); font: 600 .82rem var(--font); cursor: pointer; }
.install-card .install-yes[hidden] + .install-no { margin-left: auto; }
.install-card .install-how { margin-top: 4px; }
/* The pop-up on first open (program.html showInstall): a sheet from the bottom over a dimmed page. The dimming is the card's own ::before. */
.install-card.install-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-width: 560px; margin: 0 auto; gap: 14px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--surface, #17171c); box-shadow: 0 -12px 40px rgba(0,0,0,.45); max-height: 92vh; overflow-y: auto; }
.install-card.install-sheet::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.6); }
.install-card.install-sheet > div > b { font-size: 1.05rem; }
.install-steps { list-style: none; counter-reset: st; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.install-steps li { counter-increment: st; position: relative; padding-left: 40px; min-height: 30px; font-size: .98rem; line-height: 1.4; color: var(--ink); }
.install-steps li::before { content: counter(st); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: var(--red, #e11d28); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.install-steps small { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.install-how p { margin: 12px 0 0; color: var(--muted); font-size: .85rem; }
.install-card .install-close { flex: 1; min-height: 52px; padding: 0 16px; background: var(--red, #e11d28); border: 0; color: #fff; font: 700 1rem var(--font); }

.pay-note.proof { margin-top: 6px; }

/* Homepage hero: example session card */
.sheet .sheet-top { margin-bottom: 14px; padding-bottom: 14px; }
.sheet-days { display: flex; gap: 6px; }
.sheet-days span { font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.sheet-days span.on { background: var(--red); border-color: var(--red); color: #fff; }
.sheet-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.sheet-title span:last-child { font-size: .68rem; letter-spacing: .14em; color: var(--muted-2); font-weight: 700; }
.sheet table.sets { margin-top: 8px; }
.sheet table.sets td { padding: 3px 6px; }
.sheet table.sets .log-r, .sheet table.sets .log-w { max-width: 96px; padding: 6px; }
.sheet table.sets input:placeholder-shown { border-style: dashed; }
.sheet-next { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.sheet-next div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.sheet-next span { font-weight: 600; color: var(--ink); }
.sheet-next em { font-style: normal; font-size: .82rem; color: var(--muted); }
.sheet .day-actions { margin-top: 16px; }
.sheet .sheet-link { margin-top: 14px; padding-top: 14px; }
@media (max-width: 760px) { .sheet { padding: 20px 18px; } .sheet-days span { padding: 6px 10px; } }
.sheet-days { flex-wrap: nowrap; width: 100%; }
.sheet-days span { white-space: nowrap; flex: 1 1 0; text-align: center; padding: 7px 0; }



.brand img.wordmark-img { height: 40px; width: auto; }
@media (max-width: 760px) { .brand img.wordmark-img { height: 36px; } }

.install-card .share-ico { display: inline-block; vertical-align: -3px; color: var(--ink); }
.install-card > div span i { display: block; margin-top: 4px; font-style: normal; opacity: .8; }

/* Program overview: clamp to a few lines, expandable */
.program-head .summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.program-head .summary.open { display: block; -webkit-line-clamp: unset; }
.summary-more { background: none; border: 0; padding: 8px 0 2px; margin: 0; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--red-bright); text-underline-offset: 5px; text-decoration-thickness: 2px; cursor: pointer; }
.summary-more::after { content: ' \25BE'; text-decoration: none; display: inline-block; }
.summary-more[aria-expanded="true"]::after { content: ' \25B4'; }
.summary-more:hover { color: #fff; }
@media (max-width: 760px) { .program-head { padding: 34px 0 20px; } }
@media print { .program-head .summary { display: block; -webkit-line-clamp: unset; } .summary-more { display: none; } }

/* Block header: small label, short description (clamped) instead of a huge heading */
.block-head { margin: 26px 0 6px; }
.block-label { margin-top: 0; font-family: var(--display); font-weight: 900; font-size: 1.3rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.block-label::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 10px; background: var(--red-bright); border-radius: 2px; }
.block-focus { margin-top: 12px; }
#blockMore { margin-bottom: 4px; }
.block-focus { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; max-width: 640px; font-size: .95rem; }
.block-focus.open { display: block; -webkit-line-clamp: unset; }
@media print { .block-focus { display: block; -webkit-line-clamp: unset; } }

/* Exercise swap: the panel listing the alternatives, opened from the exercise's Swap button (a .pg-tool like the others) */
.swapped-from { font-size: .8rem; margin-top: 4px; }
.ex-swap { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); display: grid; gap: 8px; }
.ex-swap[hidden] { display: none; }
.swap-title { font-family: var(--display); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.swap-opt { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--surface-2, #17171a); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 12px 14px; font: inherit; font-size: .95rem; cursor: pointer; }
.swap-opt:hover { border-color: var(--muted-2); }
.swap-name { font-weight: 600; }

.swap-own { display: grid; gap: 8px; }
.swap-own-row { display: flex; gap: 8px; align-items: center; }
.swap-sugs { display: grid; gap: 6px; }
.swap-sugs:empty { display: none; }
.swap-sug { text-align: left; background: var(--surface-2, #17171a); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 11px 14px; font: inherit; font-size: .93rem; font-weight: 600; cursor: pointer; }
.swap-sug:hover { border-color: var(--muted-2); }
.swap-hint { font-size: .8rem; }
.swap-hint:empty { display: none; }
.swap-own[hidden] { display: none; }
.swap-input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2, #17171a); color: var(--ink); font: inherit; font-size: 16px; }

/* How-to panel under each exercise */
.ex-notes p { margin: 0 0 8px; }
.ex-notes .demo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-bright); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.swap-tag { flex: 0 0 auto; font-family: var(--display); font-weight: 800; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: #7fdca6; border: 1px solid rgba(127,220,166,.4); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }
.swap-opt .swap-name { flex: 1 1 auto; min-width: 0; }

.swap-request { justify-self: start; min-height: 44px; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swap-request:hover { color: var(--ink); }
/* "More like this": the rest of the exercise's movement group, with equipment buttons to narrow it */
.swap-more { display: grid; gap: 8px; margin-top: 4px; }
.swap-more[hidden] { display: none; }
.swap-more-head { font-family: var(--display); font-weight: 800; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.swap-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.swap-chips::-webkit-scrollbar { display: none; }
.swap-chips:empty { display: none; }
.swap-chip { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.swap-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #0d0d0f; }
.swap-more-list { display: grid; gap: 6px; }
.swap-more-list:empty { display: none; }
.swap-eq { color: var(--muted); border-color: var(--line); }
.swap-more-all { justify-self: start; min-height: 44px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swap-more-msg { font-size: .8rem; }
.swap-more-msg:empty { display: none; }

/* Client reviews (homepage section stays hidden until there are enough approved 5-star reviews) */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 34px; }
.review-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.review-card .stars { color: #f0b429; letter-spacing: .12em; font-size: 1.05rem; }
.review-card .stars span { color: var(--line); }
.review-card blockquote { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.6; flex: 1; }
.review-card figcaption { color: var(--muted); font-size: .88rem; font-weight: 600; }
/* Phones: one row of cards to swipe through, with the next card peeking in so it's clear there's more. */
@media (max-width: 640px) {
  #reviews.section { padding: 44px 0; }
  .review-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 22px -24px 0; padding: 0 24px 6px; scroll-padding: 0 24px; scrollbar-width: none; }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 84%; scroll-snap-align: start; padding: 20px; gap: 10px; }
  .review-card blockquote { font-size: .95rem; line-height: 1.55; }
}
/* Rating line under the hero button, shown with the reviews */
.rating-line { margin: 0; font-size: .86rem; }
.rating-line a { color: var(--ink); text-decoration: none; }
.rating-line .stars { color: #f0b429; letter-spacing: .08em; margin-right: 4px; }

/* Day tabs: a finished day is struck through and lighter */
.day-pick .dp.done { color: var(--muted-2); text-decoration: line-through; text-decoration-thickness: 2px; opacity: .6; }
.day-pick .dp.done.on { color: #fff; opacity: .85; }

/* Touch screens: a tap leaves :hover stuck on until the next tap, so don't lift or glow there. */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
  .plan:hover { transform: none; border-color: var(--line); }
  .step:hover { background: transparent; }
}

/* ---------- Home page: conversion redesign (docs/CONVERSION-AUDIT-REPORT.md) ---------- */
/* Long headings read faster in sentence case; keep capitals for short labels and buttons. */
.h-sentence { text-transform: none; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.7rem, 6.2vw, 2.6rem); max-width: 22ch; }
.ink { color: var(--ink); }

.hero2 { padding: 26px 0 40px; }
.hero2 h1 { font-size: clamp(1.95rem, 7.4vw, 3.1rem); text-transform: none; letter-spacing: -.025em; line-height: 1.06; margin: 0; max-width: 17ch; }
.hero2 .sub { font-size: 1.02rem; line-height: 1.55; color: var(--muted); max-width: 46ch; margin: 14px 0 0; }
.cta-stack { margin-top: 20px; display: grid; gap: 10px; max-width: 420px; }
.cta-stack .btn { width: 100%; }
.cta-note { font-size: .86rem; line-height: 1.5; color: var(--muted); margin: 0; }
.cta-note b { color: var(--ink); font-weight: 600; }
.nw { white-space: nowrap; }
.demo-link { display: inline-block; font-family: var(--display); font-weight: 700; font-size: .84rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-bright); text-underline-offset: 5px; text-decoration-thickness: 2px; padding: 10px 0; }
/* Top of the home page: centred headline, then the program inside a tilted phone with two callouts */
.hero-centre { position: relative; overflow: hidden; text-align: center; padding-bottom: 30px; }
.hero-centre::before { content: ""; position: absolute; left: 50%; top: 42%; width: 620px; height: 620px; margin-left: -310px; background: radial-gradient(closest-side, rgba(255,40,55,.32), rgba(255,40,55,.08) 55%, transparent 72%); pointer-events: none; }
.hero-centre .wrap { position: relative; }
.hero-copy { max-width: 560px; margin: 0 auto; }
.hero-kicker, .kicker { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,59,71,.45); background: rgba(190,18,32,.12); color: var(--red-text); font: 800 .66rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
.hero-centre h1 { max-width: none; font-size: clamp(2rem, 8.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; }
.hero-accent { background: linear-gradient(90deg, #ff4a55, #ff9aa0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-centre .sub { max-width: 32ch; margin: 14px auto 0; }
.hero-centre .cta-stack { margin: 22px auto 0; justify-items: center; }
.hero-centre .btn#heroCta { min-height: 56px; font-size: 1rem; border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(255,59,71,.8); }
.hero-centre .cta-note { text-align: center; }

.hero-stage { position: relative; width: 290px; height: 470px; margin: 34px auto 0; }
.hero-phone { position: absolute; left: 22px; top: 0; width: 246px; height: 470px; padding: 9px; border-radius: 40px; background: linear-gradient(145deg, #34343c, #0e0e11 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 90px -40px rgba(255,40,55,.7), 0 30px 60px -24px rgba(0,0,0,.9); transform: perspective(1100px) rotateY(-12deg) rotateX(6deg) rotateZ(2deg); }
.hero-screen { position: relative; height: 100%; overflow: hidden; border-radius: 32px; background: var(--bg); padding: 30px 10px 10px; text-align: left; }
.hero-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 72px; height: 18px; margin-left: -36px; border-radius: 999px; background: #000; }
/* The phone's screen: the workout screen a member trains on (program.html workout mode, styles .pg-fx), drawn at a
   phone's width (390px) and scaled to fit the phone. The /demo sample's numbers. */
.hero-screen.hw-screen { padding: 0; }
.hw-screen::before { z-index: 2; }
.hw { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 390px; height: 773px; padding: 46px 0 16px; transform: scale(.5846); transform-origin: 0 0; background: radial-gradient(130% 60% at 100% 0%, rgba(190,18,32,.24), transparent 62%), #0a0a0b; color: var(--ink); font-family: var(--font); line-height: 1.4; }
.hw svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hw i { font-style: normal; }
/* The top bar as the app has it since the timer and swipe batch (20 Oct 2026): Exercises, then the session time under its
   small label, its own Pause button and Finish. */
.hw-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.hw-pill, .hw-finish { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 800 .82rem var(--font); }
.hw-pill { border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); }
.hw-pill svg { width: 18px; height: 18px; stroke-width: 2; }
.hw-time { display: grid; justify-items: end; gap: 2px; line-height: 1; white-space: nowrap; }
.hw-time small { font: 800 .62rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hw-time b { font: 800 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.hw-pause { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: #1a1a1e; }
.hw .hw-pause svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.hw-finish { border: 1px solid rgba(225,29,40,.65); background: rgba(225,29,40,.14); color: #ff8a8f; letter-spacing: .04em; text-transform: uppercase; }
.hw-prog { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 0 12px 6px; }
.hw-prog i { height: 5px; border-radius: 5px; background: #26262b; overflow: hidden; }
.hw-prog i.on { background: #3a3a43; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.hw-prog b { display: block; width: 50%; height: 100%; border-radius: inherit; background: #46c987; }
.hw-main { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 0; }
.hw-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; text-align: center; }
.hw-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; }
.hw-arrow svg { width: 20px; height: 20px; }
.hw-arrow.off { opacity: .25; }
.hw-name { display: block; font: 900 28px/1.06 var(--display); letter-spacing: -.02em; }
.hw-meta { display: block; margin-top: 6px; font-size: .88rem; color: var(--muted); }
.hw-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 26px; background: rgba(20,20,23,.94); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
.hw-sets { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hw-setlab { display: block; font: 900 1.35rem var(--display); }
.hw-setlab span { font: 700 .95rem var(--font); color: var(--muted); }
.hw-last { display: block; margin-top: 2px; font-size: .84rem; color: var(--muted); }
.hw-last b { color: var(--ink); }
.hw-dots { display: flex; gap: 6px; }
.hw-dots i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); font: 800 .8rem var(--display); }
.hw-dots i.done { border-color: #46c987; background: #46c987; color: #0a0a0b; }
.hw-dots i.done svg { width: 16px; height: 16px; stroke-width: 3; }
.hw-dots i.cur { border-color: var(--red-bright); color: var(--ink); box-shadow: 0 0 0 3px rgba(225,29,40,.25); }
.hw-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-step { display: grid; gap: 4px; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: 20px; background: #111114; text-align: center; }
.hw-lab { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hw-num { font: 900 50px/1.05 var(--display); letter-spacing: -.03em; }
.hw-unit { margin-top: -4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.hw-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.hw-pm i { display: grid; place-items: center; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 14px; background: #1d1d22; font: 800 1.6rem/1 var(--display); }
.hw-hint { padding: 10px 12px; border: 1px solid rgba(70,201,135,.25); border-radius: 14px; background: rgba(70,201,135,.07); font-size: .88rem; color: var(--muted); }
.hw-hint b { color: #7fdca6; }
.hw-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hw-tools i { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 50px; padding: 5px 2px; border: 1px solid var(--line-strong); border-radius: 16px; background: #111114; font: 700 .74rem var(--font); white-space: nowrap; }
.hw-tools svg { width: 20px; height: 20px; stroke-width: 2; color: var(--muted); }
.hw-foot { display: grid; gap: 8px; margin-top: auto; padding: 10px 16px 0; border-top: 1px solid rgba(255,255,255,.06); }
.hw-log { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 20px; background: #46c987; color: #0a0a0b; font: 900 1.12rem var(--display); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 18px 40px -20px rgba(70,201,135,.9); }
.hw-log svg { width: 24px; height: 24px; stroke-width: 3; }
.hw-next { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 18px; background: #131316; }
.hw-next small { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hw-next b { flex: 1; font-size: .95rem; }
.hw-next svg { width: 20px; height: 20px; color: var(--muted); }

.hero-float { position: absolute; z-index: 2; display: grid; gap: 1px; text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(22,22,26,.94); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); animation: heroBob 5s ease-in-out infinite; }
.hero-float small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.hero-float b { font-size: .92rem; color: var(--ink); }
.hero-float-a { left: -6px; top: 318px; }
.hero-float-a span { font-size: .72rem; font-weight: 700; color: #ff6b74; }
.hero-float-b { right: -8px; top: 22px; display: flex; align-items: center; gap: 8px; animation-delay: -2.5s; }
.hero-float-b b { font-size: .82rem; }
@keyframes heroBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } }
.hero-demo { margin: 18px 0 0; }
@media (min-width: 901px) { .hero-stage { margin-top: 44px; } .hero-copy { max-width: 860px; } .hero-centre h1 { font-size: clamp(2.6rem, 4.6vw, 3.6rem); text-wrap: balance; } .hero-centre .sub { max-width: 44ch; } }
@media (min-width: 901px) { .hero2 { padding: 70px 0 64px; } }

/* How it works: numbered steps read top to bottom on a phone */
#how .steps { margin-top: 28px; }
#how .step h3 { font-size: 1.05rem; }

/* How your program is made */
.made-list { margin: 22px 0 8px; padding-left: 1.3em; max-width: 64ch; }
.made-list li { color: var(--muted); padding: 7px 0 7px 4px; font-size: .97rem; }
.made-list li b { color: var(--ink); }
.made-list li::marker { color: var(--red-bright); font-family: var(--display); font-weight: 700; }

/* Pricing (home page and the sign-up plan step): plan tiles, the picked plan's details, then
   "Also in every plan". One-offs tucked away. */
#programs .intro { color: var(--muted); max-width: 52ch; margin: 10px 0 0; font-size: 1rem; }
.toggle.interval { margin-top: 22px; }
.toggle.interval button { min-height: 44px; padding: 9px 16px; }
/* The plan card (Design A, config.js swcPlanCard, chosen 7 Oct 2026): one Program card, four benefits up front and the
   rest one tap away, then Program Plus as a tick box (never ticked to start with). Same on the home page and the sign-up step. */
/* The plan card, redesigned 9 Oct 2026: a calm card. Red only on the button, gold only for Program Plus, green for Program. */
.pcard { max-width: 580px; margin-top: 16px; background: linear-gradient(180deg, #17171a, var(--surface) 260px); border: 1px solid #2c2c32; border-radius: 22px; padding: 20px 18px 18px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.pcard.unpicked { border-color: var(--line); box-shadow: none; cursor: pointer; opacity: .6; }
.pc-free { display: inline-flex; font: 800 .82rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: #ff6b73; background: rgba(225,29,40,.14); border: 1px solid rgba(225,29,40,.35); border-radius: 999px; padding: 6px 11px; }
.pc-name { margin: 14px 0 0; font: 800 .82rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc-is-plus .pc-name { color: var(--plus); }
.pc-head { margin: 6px 0 0; font: 800 1.35rem/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.pc-head2 { margin: 2px 0 0; font: 800 1.12rem/1.3 var(--display); letter-spacing: -.01em; color: #9a9aa3; }
.pc-head2[hidden] { display: none; }
.pc-chips { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips span { font-size: .82rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.pc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pc-price b { font: 900 2.8rem/1 var(--display); letter-spacing: -.03em; }
.pc-per { font-size: .88rem; color: #b4b4bc; }
.pc-week { margin: 4px 0 0; font-size: .875rem; color: #a3a3ac; }
.pc-feats, .pc-pfeats { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 13px; }
.pc-feats li { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.pc-feats li b, .pc-pfeats li b { color: var(--ink); font-weight: 600; }
/* Ticks are green ("included", "done"), the same green as the program page ticks (.ic.tick); red stays for the brand and buttons. */
.pc-yes { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: rgba(70,201,135,.16); color: #46c987; }
.pc-yes svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-more { margin-top: 12px; }
.pc-more > summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font: 700 .85rem var(--display); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-more > summary::after { color: var(--muted); font-size: 1.2rem; margin-left: 8px; }
.pc-more[open] > summary .pc-open, .pc-more:not([open]) > summary .pc-close { display: none; }
.pc-more .pc-feats, .pc-more .pc-pfeats { margin-top: 6px; }
/* Program Plus: a tick box, not a switch (NN/g: a choice that applies when you press the button is a check box) */
/* Program Plus in gold, as in the program (Sam, 9 Oct 2026). Program's own ticks stay green. */
.pc-add { position: relative; overflow: hidden; margin-top: 20px; border: 1px solid rgba(var(--plus-rgb), .5); border-radius: 18px; padding: 16px;
  background: radial-gradient(130% 90% at 100% 0%, rgba(var(--plus-rgb), .17), transparent 55%), linear-gradient(160deg, var(--plus-bg1) 0%, var(--plus-bg2) 55%, #0e0d0b 100%);
  box-shadow: inset 0 1px 0 rgba(var(--plus-light-rgb), .12), 0 18px 50px rgba(var(--plus-rgb), .07); transition: border-color .15s, box-shadow .15s; }
/* Program Plus, premium (Sam, 10 Oct 2026): a gold hairline across the top, the name in brushed gold, and gold icon tiles. */
.pc-add::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--plus-light), transparent); }
.pc-add .pc-add-name { background: linear-gradient(95deg, var(--plus-light) 0%, var(--plus) 45%, var(--plus-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* High-contrast mode draws its own colours: the gold-filled name would vanish, so it is plain text there. */
@media (forced-colors: active) { .pc-add .pc-add-name { background: none; color: CanvasText; } }
.pc-add .pc-add-tag { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--plus-rgb), .18); font: 700 .98rem/1.35 var(--display); color: var(--plus-cream); }
.pc-add .pc-rows-plus { gap: 14px; margin-top: 14px; }
.pc-add .pc-rows-plus li { align-items: start; font-size: .84rem; line-height: 1.45; }
.pc-add .pc-rows-plus li b { font-size: .92rem; color: var(--plus-white); margin-bottom: 1px; }
.pc-add .pc-ic { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(145deg, rgba(var(--plus-rgb), .3), rgba(var(--plus-rgb), .07)); border: 1px solid rgba(var(--plus-rgb), .35); color: var(--plus-hi); }
.pc-add[hidden] { display: none; }
.pc-add.on { border-color: var(--plus); box-shadow: inset 0 1px 0 rgba(var(--plus-light-rgb), .2), 0 0 0 1px rgba(var(--plus-rgb), .3), 0 20px 60px rgba(var(--plus-rgb), .14); }
.pc-add-head { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; margin: 0; }
/* The tick box: a real check box, see-through, over a drawn circle that matches the card's round ticks. Off: a plus in a
   green ring ("add"). On: filled green with a dark tick (white on this green is too faint). */
.pc-box { position: relative; flex: none; width: 30px; height: 30px; }
.pc-tick { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pc-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--plus); color: var(--plus); background: transparent; transition: background .15s, border-color .15s, color .15s; }
.pc-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-mark .pc-check { display: none; }
.pc-tick:checked + .pc-mark { background: var(--plus); color: #0a0a0b; }
.pc-tick:checked + .pc-mark .pc-plus { display: none; }
.pc-tick:checked + .pc-mark .pc-check { display: inline; }
.pc-tick:focus-visible + .pc-mark { outline: 2px solid var(--ink); outline-offset: 3px; }
/* The heading and its price share a line where there's room; the tagline gets the box's full width under them (Sam, 9 Oct
   2026). "$39.99 a month in total" (rule 15, final audit 13 Oct 2026) is longer than "+$20 a month", so on a phone it goes
   under the name instead of being cut off. Hidden once ticked. */
.pc-add-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; font: 800 1.02rem var(--display); color: var(--ink); }
.pc-add-name { white-space: nowrap; }
.pc-add-price { line-height: 1.15; }
.pc-add-price small { white-space: nowrap; font: 500 .8125rem var(--font); color: var(--muted); }
.pc-add-tag { margin: 2px 0 0 42px; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.pc-add-price b { white-space: nowrap; font: 800 .95rem var(--display); color: var(--plus); }
.pc-add-total { margin: 4px 0 0 42px; font-size: .875rem; color: var(--muted); }
/* "Free for 28 days too · Switch back any time": the two doubts that stop people ticking it (10 Oct 2026). */
.pc-add-perks { margin: 2px 0 0 42px; font-size: .8125rem; font-weight: 600; color: var(--plus-cream); }
.pc-add-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; }
.pc-add-acts .pc-add-more { margin: 0; }
.pc-add-remove { min-height: 44px; margin: 4px 0 0; padding: 0; background: none; border: 0; font: 700 .875rem var(--display); color: var(--muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pc-add-remove[hidden] { display: none; }
.pc-add-more { margin: 0; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(var(--plus-rgb), .6); background: linear-gradient(180deg, rgba(var(--plus-rgb), .16), rgba(var(--plus-rgb), .05)); font: 700 .85rem var(--display); color: var(--plus-hi); cursor: pointer; }
.pc-add-more:hover { background: rgba(var(--plus-rgb), .1); }
/* The card's icon rows: what's in Program (green) and Program Plus (gold, one line each). */
.pc-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.pc-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.pc-rows li b { display: block; color: var(--ink); font-weight: 600; font-size: .92rem; }
.pc-rows-plus { gap: 8px; margin-top: 10px; }
.pc-rows-plus li { align-items: center; }
.pc-rows-plus li b { font-size: .875rem; }
.pc-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.pc-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-prog .pc-ic { background: rgba(70,201,135,.13); color: #46c987; }
/* What's in Program is one short line a row (20 Oct 2026), so each line sits level with its icon. */
.pc-prog .pc-rows { gap: 10px; }
.pc-prog .pc-rows li { align-items: center; }
.pc-prog { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.pc-prog-h { margin: 0; font: 800 .8125rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pc-prog-more { margin-top: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font: 700 .85rem var(--display); color: var(--ink); cursor: pointer; }
.pc-prog-more:hover { background: var(--surface-2); }
/* Program's full list uses the Program Plus sheet's layout, in white with green ticks. */
.pc-prog-sheet .pg-lift-top h2 { color: var(--ink); }
.pc-prog-sheet .pg-plus-list li::before { color: #46c987; }
.pc-add-more[hidden], .pc-add-body[hidden] { display: none; }
.pc-add .pc-pfeats { margin: 12px 0 0 42px; gap: 9px; }
.pc-add.on .pc-pfeats { margin-top: 12px; }
.pc-pfeats li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.pc-pic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); transition: background .15s, color .15s; }
.pc-pic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-cta { display: flex; width: 100%; min-height: 56px; margin-top: 18px; font-size: 1rem; white-space: normal; text-align: center; line-height: 1.2; }
/* The button and "$0 today" line, straight under the price (config.js swcPlanCard slot). */
.pc-slot { margin-top: 4px; }
#programs .kicker { font-size: .82rem; }
.plan-terms { text-align: center; font-size: .875rem; color: #b4b4bc; margin: 10px 0 0; }
.plan-terms b { color: var(--ink); font-weight: 600; }
@media (min-width: 760px) { .pcard { padding: 28px 30px 24px; } .pc-price b { font-size: 3.2rem; } .pc-head { font-size: 1.55rem; } .pc-head2 { font-size: 1.3rem; } }
/* Round tick and dash icons, drawn in CSS so there's nothing to load */
.ic { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; margin-top: 1px; }
.ic.tick { background: rgba(70,201,135,.16); color: #46c987; }
.ic.tick::before { content: ""; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ic.dash { background: rgba(255,255,255,.06); color: #8f8f98; }
.ic.dash::before { content: ""; width: 8px; height: 2px; border-radius: 1px; background: currentColor; }

details.oneoff { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--surface); max-width: 720px; }
details.oneoff summary { padding: 14px 0; font-size: .95rem; }
details.oneoff table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 12px; }
details.oneoff th, details.oneoff td { text-align: left; padding: 10px 4px; border-top: 1px solid var(--line-soft); }
details.oneoff th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); border-top: 0; }
details.oneoff td a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red-bright); text-underline-offset: 4px; display: inline-block; padding: 4px 0; }
details.oneoff p { font-size: .84rem; color: var(--muted); margin: 0 0 14px; }

/* Phone-only sticky "Start free" bar (shown by script once the hero button scrolls away) */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(10,10,11,.96); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center; transform: translateY(110%); transition: transform .2s; }
.sticky-cta.show { transform: none; }
.sticky-cta .btn { flex: 1; padding: 16px; min-height: 54px; font-size: 1rem; }
@media (min-width: 901px) { .sticky-cta { display: none; } }
@media (max-width: 900px) { body.has-sticky-cta { padding-bottom: 82px; } }
@media print { .sticky-cta { display: none !important; } }

/* ---------- Phone tidy-up (30 Sep 2026) ---------- */
/* How it works: number beside each heading instead of on its own line, so the steps take half the height */
@media (max-width: 640px) {
  #how .step { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: 18px 18px 20px; }
  #how .step .n { grid-row: span 2; margin: 3px 0 0; font-size: 1.05rem; }
  #how .step h3 { margin-bottom: .3em; }
}
/* Sign-up: goal buttons line up in two columns on phones */
@media (max-width: 560px) {
  #goalFieldset .chips { display: grid; grid-template-columns: 1fr 1fr; }
  #goalFieldset .chips label { padding: 10px 12px; line-height: 1.3; }
}
/* Bigger tap targets (44px is the usual minimum). Small text controls get an invisible
   hit area around them, so they look the same but are easier to hit. */
details.oneoff td a { padding: 10px 0; }
.ex-name, .summary-more, .info-toggle, .note-open { position: relative; }
.ex-name::before, .summary-more::before, .info-toggle::before, .note-open::before { content: ""; position: absolute; inset: -8px -2px; }
.day-pick .dp { min-height: 40px; }
.tab, .ds { min-height: 44px; }
/* Program page: week buttons on one line ("Week 1"), sharing the width evenly */
.week-pick { display: flex; width: 100%; max-width: 480px; }
.week-pick button { flex: 1 1 0; min-height: 44px; padding: 8px 4px; white-space: nowrap; }
@media (max-width: 400px) { .week-pick button { font-size: .72rem; letter-spacing: .03em; } }
/* Program page: "Save as PDF" sits at the bottom on phones, where it's out of the way */
.pdf-bottom { display: none; }
@media (max-width: 760px) {
  .pdf-top { display: none; }
  .pdf-bottom { display: inline-flex; margin: -28px 0 40px; }
}
/* Program page: "Remove from this device", under the program (program.html). Quiet, but a full 44px tap target. */
.pg-forget { max-width: 820px; margin-bottom: 8px; }
.pg-forget-btn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pg-forget-btn:disabled { opacity: .6; cursor: default; }
/* "Send feedback" (site/feedback.js): the quiet button under the program or the check-in, a footer link, and its sheet. */
.pg-feedback { margin-bottom: 0; }
.fb-link { padding: 12px 0; margin-right: 22px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; }
.fb-link:hover { color: var(--ink); }
@media (max-width: 720px) { .fb-link { margin-right: 0; } }
.fb-sheet { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.fb-sheet fieldset { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.coach-sheet .fb-sub { color: var(--muted); }
.fb-label { display: block; margin: 0 0 6px; font-weight: 700; font-size: .95rem; }
.fb-sheet textarea { font-size: 16px; min-height: 120px; }
.coach-sheet .fb-pain { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- Program page: the session view (today's session, one-tap sets, rest timer) ---------- */
.print-only { display: none; }
/* Clears the session bar, measured as it grows and shrinks (program.html sets --pg-bar-h). */
body.pg-in-session { padding-bottom: calc(var(--pg-bar-h, 150px) + 24px); }
/* Trainer mode on a program (the admin's Train button): who you're logging for, always in view. */
/* Program page: invite a friend (paying subscribers only). */
.invite-card { margin: 4px 0 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.invite-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.invite-card p { margin: 0 0 12px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.invite-row { display: flex; gap: 8px; }
.invite-row input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; min-height: 44px; }
.invite-row .btn { min-height: 44px; flex-shrink: 0; }
/* Phones: the link gets its own line, with Copy and Share side by side underneath. */
@media (max-width: 520px) { .invite-row { flex-wrap: wrap; } .invite-row input { flex-basis: 100%; } .invite-row .btn { flex: 1; } }
.invite-card .invite-earned { margin: 12px 0 0; color: var(--ink); }
/* Program page: not a member of their gym yet, so book a tour or ask the club to call (program.html leadCardHTML, gym-lead.mjs). */
.lead-card { margin: 4px 0 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lead-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.lead-card p { margin: 0 0 12px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.lead-card p b { color: var(--ink); }
.lead-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-card .btn { min-height: 44px; }
.quiet-card .quiet-list { margin: 4px 0 10px; display: grid; gap: 6px; }
.quiet-card .quiet-list div { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: var(--surface-2, rgba(255,255,255,.04)); }
.quiet-card .quiet-list dt { font-weight: 700; color: var(--ink); }
.quiet-card .quiet-list dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.quiet-card p { margin: 0; font-size: .85rem; }
.lead-hide { display: block; margin: 6px 0 -8px; padding: 0; min-height: 44px; background: none; border: 0; color: var(--muted); font-size: .88rem; text-decoration: underline; cursor: pointer; }
.lead-later { display: flex; flex-wrap: wrap; gap: 0 22px; }
/* The sheet: tall on a phone, so it scrolls inside itself. */
.lead-sheet { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.lead-sheet fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.lead-sheet legend { padding: 0; margin: 0 0 8px; font-weight: 700; font-size: .95rem; }
.lead-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lead-chips.lead-two .lead-chip { flex: 1; }
.lead-chip { position: relative; flex: none; }
.lead-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lead-chip span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.lead-chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.lead-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* A day and a time as two dropdowns (Sam, 12 Oct 2026), on the sign-up form and in the program: Day above Time, so the
   whole time picked shows on a phone, even a half-hour window like "11:30am to 12:30pm" (final audit, 13 Oct 2026). */
.lead-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lead-pick label { display: grid; gap: 4px; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--muted); }
.lead-pick select { width: 100%; min-width: 0; min-height: 46px; font-size: 16px; color: var(--ink); }
.lead-mobile { display: grid; gap: 6px; margin: 0 0 12px; font-weight: 700; font-size: .95rem; }
.lead-mobile input { font-size: 16px; font-weight: 400; }
.coach-sheet .lead-what { margin: 0 0 10px; font-size: .85rem; color: var(--muted); }
.lead-ok { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.lead-ok input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: var(--red); }
/* "If you stop training" under Account (program.js handoffCardHTML): the line under the tick. */
.lead-card .handoff-small { margin: 8px 0 12px 32px; font-size: .82rem; }
/* Asking one of their partner club's PTs (program.html ptCardHTML, gptFormHTML; only while PT_REQUESTS is on). */
.gpt-pts { display: grid; gap: 6px; }
.gpt-pick { position: relative; display: block; }
.gpt-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gpt-pick span { display: block; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg); }
.gpt-pick small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.gpt-pick input:checked + span { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.gpt-pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.trainer-bar { position: sticky; top: 76px; z-index: 45; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 9px 24px; background: #11213b; border-bottom: 1px solid #2c4a7a; color: #dbe7ff; font-size: .92rem; }
.trainer-bar b { color: #fff; }
.trainer-bar .tb-sub { color: #9fb4d8; font-size: .8rem; }
.trainer-bar .tb-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd894; box-shadow: 0 0 0 4px rgba(95,216,148,.2); flex: none; }
@media (max-width: 760px) { .trainer-bar { top: 66px; padding: 8px 16px; } }
/* The admin's read-only Preview (program.html ?view=1): amber, so it's never taken for trainer mode. */
.view-bar { background: #2a2310; border-bottom-color: #6b5a1e; color: #ffe9a8; }
.view-bar b { color: #fff; }
/* A client's program (trainer mode): the session bar is tinted blue, like their badge, so it's never taken for yours. */
body.pg-client .pg-bar { background: rgba(17,33,59,.97); border-top-color: #2c4a7a; }
/* The coach account (program.html): the initials badge, top right, its menu, and the sign-in sheet.
   Red is your own program; a blue ring is a client's. */
.coach-badge { position: relative; width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: #fff; font: 800 .8rem/1 var(--display); letter-spacing: .03em; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
.coach-badge::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; } /* 46px to tap */
.coach-badge.is-client { background: #11213b; color: #dbe7ff; box-shadow: 0 0 0 2px #5b8def; }
.coach-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.coach-menu { position: fixed; z-index: 95; width: min(320px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.coach-menu[hidden] { display: none; }
.coach-menu .cm-head { padding: 10px 10px 6px; font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.coach-menu .cm-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.coach-menu .cm-item:hover, .coach-menu .cm-item:focus-visible { background: var(--surface); outline: none; }
.coach-menu .cm-item.on { background: rgba(190,18,32,.12); }
.coach-menu .cm-badge { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font: 800 .7rem/1 var(--display); }
.coach-menu .cm-badge.is-client { background: #11213b; color: #dbe7ff; box-shadow: inset 0 0 0 2px #5b8def; }
.coach-menu .cm-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.coach-menu .cm-text b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-menu .cm-text small { font-size: .78rem; color: var(--muted); }
.coach-menu .cm-tick { color: var(--red-bright); font-weight: 800; }
.coach-menu .cm-note { margin: 0; padding: 8px 10px 12px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.coach-menu .cm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 2px 6px 0 10px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted-2); }
.coach-menu .cm-foot button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
/* A client's program on the coach phone: their full name beside their initials, in one pill (all of it opens the menu). */
.coach-badge.named { width: auto; max-width: min(46vw, 230px); display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 4px; border-radius: 999px; }
.coach-badge.named::after { border-radius: 999px; }
.coach-badge.named .cb-i { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #1d3a66; }
.coach-badge .cb-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .86rem/1.2 var(--font); letter-spacing: 0; }
@media (max-width: 380px) { body.pg-client .brand img.wordmark-img { height: 28px; } }
/* The coach menu: a green dot on a program with a session open on this phone, and the finish-first question. */
.coach-menu .cm-badge { position: relative; }
.coach-menu .cm-badge.open::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #5fd894; box-shadow: 0 0 0 2px var(--surface-2); }
.coach-menu .cm-q { color: var(--ink); font-weight: 600; padding-bottom: 4px; }
.coach-menu .cm-acts { display: grid; gap: 8px; padding: 0 10px 10px; }
.coach-menu .cm-act { min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 .95rem var(--font); cursor: pointer; }
.coach-menu .cm-act.primary { background: var(--red); border-color: var(--red); color: #fff; }
.coach-menu .cm-act:disabled { opacity: .6; cursor: default; }
/* The coach menu's link to the client's page in the admin. */
.coach-menu a.cm-item { text-decoration: none; }
.coach-menu .cm-badge.cm-ext { background: var(--surface); color: var(--muted); }
.coach-sheet { width: min(440px, calc(100vw - 32px)); padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); }
.coach-sheet::backdrop { background: rgba(0,0,0,.72); }
.coach-sheet h3 { margin: 0 0 8px; font-size: 1.15rem; }
.coach-sheet p { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; }
.coach-sheet .coach-in { display: grid; gap: 12px; margin-bottom: 4px; }
.coach-sheet input { min-height: 44px; }
.coach-sheet .coach-err { color: #ff8a8f; margin: 12px 0 0; }
.coach-sheet .coach-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.coach-sheet .coach-acts .btn { min-height: 44px; }
.coach-sheet [hidden] { display: none !important; }
/* The program page's own question box (program.html ask), in place of the browser's white confirm(). */
.ask-sheet p { color: var(--muted); }
.ask-sheet .ask-acts { display: grid; gap: 8px; margin-top: 18px; }
.ask-sheet .ask-acts .btn { width: 100%; min-height: 48px; }
.ask-sheet .ask-danger { background: var(--red); border-color: var(--red); color: #fff; }
.pg-today { position: relative; overflow: hidden; margin: 0 0 16px; padding: 20px 18px 16px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(120% 90% at 100% 0%, rgba(190,18,32,.26), transparent 60%), var(--surface); }
.pg-eyebrow { font: 800 .64rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--red-text); }
.pg-today h1 { margin: 6px 0 2px; font-size: 1.85rem; line-height: 1.08; letter-spacing: -.025em; }
.pg-focus { margin: 0 0 14px; color: var(--muted); }
/* A run on a gym day (program.html sameDayHtml): one line under the focus, linking the two sessions of the day. */
.pg-sameday { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; color: var(--ink); font-size: .88rem; font-weight: 600; }
.pg-sameday::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #46c987; }
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pg-stats div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); }
.pg-stats b { display: block; font: 900 1.2rem var(--display); color: var(--ink); }
.pg-stats span { font-size: .72rem; color: #b4b4bc; }
/* A cardio day's one line in place of the tiles ("1 run · about 35 min") */
.pg-stats-line { margin: 0 0 14px; font: 800 .95rem var(--display); color: var(--ink); }
.pg-weekrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: .8rem; color: #b4b4bc; }
.pg-dots { display: flex; gap: 5px; }
.pg-dots i { width: 22px; height: 6px; border-radius: 99px; background: var(--line); }
.pg-dots i.done { background: #46c987; }
.pg-start { display: flex; width: 100%; min-height: 56px; font-size: 1rem; border-radius: 14px; box-shadow: 0 14px 34px -16px rgba(255,59,71,.8); }
.pg-today.live .pg-start { display: none; }
.pg-complete { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(70,201,135,.1); border: 1px solid rgba(70,201,135,.3); color: #46c987; font-weight: 700; }
.pg-chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pg-chips::-webkit-scrollbar { display: none; }
.pg-chips button { flex: 1 0 auto; min-height: 44px; padding: 0 12px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 700 .68rem var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.pg-chips button.on { border-color: var(--red); color: #fff; background: rgba(190,18,32,.25); }
.pg-chips button.done:not(.on) { color: #46c987; border-color: rgba(70,201,135,.4); }
.pg-wd { font-weight: 600; opacity: .7; }
/* Weeks share one row. Days wrap onto a second row instead of running off the edge, where the redraw on every tap
   scrolled the one just picked back out of view. 90px fits the longest label, "Day 6 Sat" with its tick. */
.pg-weeks button { flex: 1 1 0; min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
.pg-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); overflow: visible; }
.pg-days button { min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
.pg-list-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 22px 2px 4px; }
.pg-list-h h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.01em; }
.pg-list-h span { font-size: .78rem; color: #b4b4bc; }

.pg-x { scroll-margin-top: 88px; margin-top: 10px; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.pg-x.current { border-color: rgba(255,59,71,.5); box-shadow: 0 18px 40px -26px rgba(255,59,71,.55); }
.pg-x.done { border-color: rgba(70,201,135,.35); }
.pg-xhead { display: grid; grid-template-columns: 32px minmax(0, 1fr) fit-content(40%) 12px; align-items: center; column-gap: 12px; width: 100%; min-height: 66px; padding: 12px 14px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pg-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #23232a; color: var(--muted); font: 800 .8rem var(--display); }
.pg-x.current .pg-num { background: var(--red); color: #fff; }
.pg-x.done .pg-num { background: #46c987; color: #0a0a0b; font-size: 0; }
.pg-x.done .pg-num::before { content: ""; width: 5px; height: 10px; border: solid #0a0a0b; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.pg-xname { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.25; overflow-wrap: break-word; }
.pg-xmeta { display: block; margin-top: 3px; font-size: .8rem; color: #b4b4bc; }
.pg-meta-open { margin: -4px 0 12px; }
.pg-xprog { font: 700 .72rem var(--display); letter-spacing: .06em; color: var(--muted-2); white-space: nowrap; }
.pg-x.done .pg-xprog { color: #46c987; }
.pg-chev { width: 9px; height: 9px; border: solid var(--muted-2); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -5px; transition: transform .2s, margin .2s; }
.pg-x.open .pg-chev { transform: rotate(-135deg); margin-top: 5px; border-color: var(--red-bright); }
.pg-xbody { padding: 0 14px 16px; }
.pg-rpe { position: relative; padding: 0; background: none; border: 0; color: #b4b4bc; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.pg-rpe::before { content: ""; position: absolute; inset: -12px -8px; } /* 44px to tap, same look */
.pg-rpe-text { margin: -6px 0 12px; font-size: .84rem; color: var(--muted); }
.pg-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 11px 12px; border-radius: 12px; background: rgba(70,201,135,.07); border: 1px solid rgba(70,201,135,.22); font-size: .86rem; line-height: 1.45; color: var(--muted); }
.pg-hint b { color: #46c987; }
.pg-hint .ic { margin-top: 1px; }
/* The same four buttons on every exercise (How-to, History, Warm-up, Swap), each always in the same spot: one row of
   four equal widths that never wraps, down to 320px wide */
.pg-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.pg-tool { min-width: 0; min-height: 44px; padding: 0 4px; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 700 .64rem var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.pg-tool[aria-expanded="true"] { color: var(--ink); border-color: var(--muted-2); background: rgba(255,255,255,.05); }
.pg-x .ex-notes, .pg-x .ex-swap, .pg-x .warmup { margin: 0 0 12px; }
.pg-plates { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; font-size: .82rem; }
.pg-plates span { width: 100%; color: var(--muted); }
.pg-plates i { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; font: 800 .7rem var(--display); font-style: normal; color: #0a0a0b; }
.pg-plates .p25 { background: #e5484d; } .pg-plates .p20 { background: #3e7bfa; color: #fff; } .pg-plates .p15 { background: #f5d90a; } .pg-plates .p10 { background: #46c987; } .pg-plates .p5 { background: #e6e6ea; } .pg-plates .p2 { background: #9b9ba3; } .pg-plates .p1 { background: #6f6f78; color: #fff; }

/* Set rows: Set | Last time | numbers | done */
.pg-sets { display: grid; gap: 4px; }
.pg-row { position: relative; display: grid; grid-template-columns: 26px 1.1fr 1fr 1fr 44px; gap: 6px; align-items: center; min-height: 56px; padding: 6px; border-radius: 12px; transition: background .15s; }
.pg-row.timed { grid-template-columns: 26px 1.1fr 2fr 44px; }
/* Reps only (a core or bodyweight move): Set, Last time, Reps, done */
.pg-row.bw { grid-template-columns: 26px 1.1fr 2fr 44px; }
.pg-row.cardio { grid-template-columns: 26px 1fr 1fr 1fr 44px; }
.pg-row.done { background: rgba(70,201,135,.1); }
.pg-shead { min-height: 0; padding: 0 6px 2px; font: 700 .69rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.pg-shead span:nth-child(n+3) { text-align: center; }
.pg-sn { font: 800 .82rem var(--display); color: var(--muted-2); text-align: center; }
.pg-prev { min-height: 44px; padding: 4px 2px; background: none; border: 0; color: #9b9ba3; font: inherit; font-size: .8rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pg-prev:disabled { cursor: default; }
.pg-prev:disabled:empty::before { content: "–"; color: #55555c; }
.pg-row input { width: 100%; min-width: 0; padding: 11px 4px; border: 1px solid var(--line-strong); border-radius: 10px; background: #101013; color: var(--ink); font: 800 16px var(--display); text-align: center; }
.pg-row input::placeholder { color: var(--muted); font-weight: 700; }
.pg-row input:focus { border-color: var(--red-bright); outline: none; background: #101013; }
.pg-row.done input { border-color: transparent; background: transparent; }
.pg-val { font: 800 .95rem var(--display); color: var(--muted); text-align: center; }
.pg-tick { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: #101013; cursor: pointer; }
.pg-tick::before { content: ""; width: 7px; height: 13px; border: solid var(--muted-2); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.pg-row.done .pg-tick { background: #46c987; border-color: #46c987; }
/* Audit 8 Oct 2026: an unticked tick is an empty box; numbers in but not ticked is amber */
.pg-row:not(.done) .pg-tick::before { border-color: transparent; }
.pg-row.typed .pg-tick { border-color: #f0b84a; box-shadow: 0 0 0 3px rgba(240,184,74,.18); }
.pg-row.typed .pg-tick::before { border-color: #f0b84a; }
.pg-row.done .pg-tick::before { border-color: #0a0a0b; }
.pg-tick.static { cursor: default; border-color: var(--line); }
.pg-row:not(.done) .pg-tick.static::before { border-color: transparent; }
.pg-best { position: absolute; top: -7px; right: 52px; padding: 2px 7px; border-radius: 999px; background: #ffd84d; color: #111; font: 800 .56rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pg-feel { margin-top: 12px; padding: 12px; border-radius: 12px; background: #1a1a1f; }
.pg-feel p { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.pg-feel div { display: flex; gap: 6px; }
.pg-feel button { flex: 1; min-height: 44px; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font: 700 .78rem var(--font); cursor: pointer; }
/* A run's four answers, two by two */
.pg-feel .pg-feel-run { display: grid; grid-template-columns: 1fr 1fr; }
.pg-feel .pg-feel-run button { padding: 6px 8px; line-height: 1.25; }
/* On a closed card, under its name until it's answered (program.html exCard feelOut) */
.pg-x > .pg-feel { margin: 0 12px 12px; }
/* A run's Distance box, above its sets */
.pg-dist { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 .69rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.pg-dist input { width: 84px; min-height: 44px; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: #101013; color: var(--ink); font: 800 16px var(--display); text-align: center; }
.pg-dist-done { margin: 0 0 10px; font-size: .86rem; color: var(--muted); }
.pg-dist-done b { color: var(--ink); }
.pg-dist input:focus { border-color: var(--red-bright); outline: none; }
/* What a box says when it has nothing to offer here (History, Swap) */
.pg-box-note { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.pg-feel button.on { border-color: var(--red-bright); color: #fff; background: rgba(190,18,32,.25); }
.pg-x .ex-note { margin-top: 12px; }
.pg-day { background: none; border: 0; border-radius: 0; overflow: visible; margin-bottom: 0; }
/* On a wide screen the session view stays a comfortable reading width, centred. */
.pg-app { max-width: 820px; }
/* Finish session takes its own line and Finish early (or Skip) goes under it, so neither is squeezed or runs off the
   edge with very large text (member app audit L3). */
.day .day-actions { margin-top: 14px; flex-wrap: wrap; }
.day .day-actions .ds { width: 100%; min-height: 50px; }
.pg-about { margin-top: 26px; }
.pg-about > summary { font-size: 1rem; }
.pg-about .program-head { padding-top: 10px; }
.pg-about .program-title { font-size: 1.4rem; }

/* Session bar: clock and progress while training; the rest timer between sets */
.pg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12,12,15,.97); border-top: 1px solid var(--line); transform: translateY(115%); visibility: hidden; transition: transform .25s, visibility 0s linear .25s; }
/* Hidden (not just moved off the screen) when no session is running, so Pause, the clock and Finish are out of the Tab
   order and a screen reader's reach; it still slides away first. Only the delay here, so Reduce Motion's none still wins. */
.pg-bar.show { transform: none; visibility: visible; transition-delay: 0s; }
/* While training, messages sit just above the session bar (or the rest timer), measured as it grows and shrinks
   (program.html sets --pg-bar-h), and in front of it. */
body.pg-in-session .toast { z-index: 80; bottom: calc(var(--pg-bar-h, 150px) + 12px); }
.pg-bar-in { max-width: 720px; margin: 0 auto; }
.pg-bar-top { display: flex; align-items: center; gap: 12px; }
.pg-clock { font: 900 1.35rem var(--display); letter-spacing: -.02em; }
.pg-clock small { display: block; font: 600 .7rem var(--font); letter-spacing: 0; color: #b4b4bc; }
.pg-prog { flex: 1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pg-prog i { display: block; height: 100%; width: 0; background: #46c987; transition: width .3s; }
.pg-bar .btn { min-height: 44px; padding: 10px 16px; }
.pg-wake { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: .74rem; font-weight: 400; color: #b4b4bc; }
.pg-wake input { width: auto; accent-color: var(--red); }
/* Changes saved on the phone but not sent yet (program.html showSaveState): a row in the bar, a line on the page. */
.pg-save { margin: 8px 0 0; font-size: .74rem; line-height: 1.35; color: #b4b4bc; }
.pg-save-note { margin: 12px 0 0; font-size: .82rem; line-height: 1.4; color: #b4b4bc; }
.pg-save.waiting, .pg-save-note.waiting { color: #ffd84d; }
.pg-rest { display: none; }
.pg-bar.resting .pg-rest { display: block; }
/* Audit 8 Oct 2026: the options behind a settings button, a Finish in the rest panel, out of the way while typing, a flash when rest ends */
/* Keep screen on and Sound: Account's switches keep their state in the bar's hidden boxes. */
.pg-opts { display: none; }
.pg-rest-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-rest-foot .btn { min-height: 40px; }
body.pg-typing .pg-bar { transform: translateY(110%); }
.pg-bar.flash { background: #1f4d34; }
.pg-bar.flash .pg-rest-lab, .pg-bar.flash .pg-rest-time { color: #7ff0b0; }
.pg-bar.resting .pg-bar-top, .pg-bar.resting .pg-wake { display: none; }
.pg-rest-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-rest-time { font: 900 2rem var(--display); letter-spacing: -.03em; }
.pg-rest-lab { font: 800 .62rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--red-text); }
.pg-rest-next { margin-top: 2px; font-size: .8rem; color: #b4b4bc; }
.pg-rest-btns { display: flex; gap: 6px; }
.pg-rest-btns button { min-width: 48px; min-height: 44px; padding: 0 10px; background: #1e1e24; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: 800 .78rem var(--display); cursor: pointer; }
.pg-rest-bar { height: 5px; margin-top: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pg-rest-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #ff6b74); }
.pg-bar.over .pg-rest-time { color: #46c987; }
.pg-bar.over .pg-rest-lab { color: #46c987; }
/* The session clock: pause button left of it (two bars; a play triangle while paused), and the time during rest. */
.pg-clock { min-width: 0; }
.pg-clock small { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-pause { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #1e1e24; border: 1px solid var(--line); cursor: pointer; }
.pg-pause::before, .pg-pause::after { content: ""; position: absolute; top: 15px; width: 4px; height: 14px; border-radius: 1px; background: var(--ink); }
.pg-pause::before { left: 15px; }
.pg-pause::after { right: 15px; }
.pg-bar.paused .pg-pause { background: var(--red); border-color: var(--red); }
.pg-bar.paused .pg-pause::before { left: 17px; top: 14px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.pg-bar.paused .pg-pause::after { display: none; }
.pg-bar.paused #pgClock { opacity: .5; }
.pg-bar.paused .pg-clock small { color: var(--red-text); font-weight: 800; }
.pg-rest-sess { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 -8px; padding: 0; background: none; border: 0; color: #b4b4bc; font: 600 .78rem var(--font); cursor: pointer; }
.pg-rest-sess span:last-child { font-variant-numeric: tabular-nums; }
.pg-pause-ic { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: #1e1e24; }
.pg-pause-ic::before, .pg-pause-ic::after { content: ""; position: absolute; top: 6px; width: 3px; height: 9px; background: var(--ink); }
.pg-pause-ic::before { left: 6px; }
.pg-pause-ic::after { right: 6px; }
/* A finished day is read-only until Edit session; Edit session's time box. */
.pg-locked .pg-row { cursor: default; }
.pg-complete.pg-editing { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink); font-weight: 600; }
.day .day-actions .pg-edit { width: 100%; }
.pg-edit-time { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; }
.pg-edit-time input { width: 84px; min-height: 44px; font-size: 16px; text-align: center; }
.pg-edit-err { margin: 0 0 10px; font-size: .86rem; color: var(--red-text); }
.pg-pop { position: fixed; top: 84px; left: 50%; z-index: 95; max-width: calc(100vw - 32px); transform: translate(-50%, -20px); opacity: 0; padding: 10px 16px; border-radius: 999px; background: #ffd84d; color: #111; font: 800 .82rem var(--display); text-align: center; box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); transition: transform .25s, opacity .25s; pointer-events: none; }
.pg-pop.show { transform: translate(-50%, 0); opacity: 1; }
/* Session done: the card never grows past the screen. Its content scrolls inside it and Done stays in view (a grid
   row capped at the screen, rather than 100dvh, so it works on older iPhones and sideways too). */
.pg-sum-wrap { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: minmax(0, 1fr); place-items: end center; padding: 16px; background: rgba(0,0,0,.72); }
.pg-sum-wrap[hidden] { display: none; }
.pg-sum { display: flex; flex-direction: column; max-height: 100%; width: 100%; max-width: 480px; padding: 24px 20px 20px; border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(120% 80% at 50% 0%, rgba(70,201,135,.16), transparent 60%), var(--surface); animation: pgSumUp .3s ease; }
@keyframes pgSumUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.pg-sum h2 { margin: 0 0 4px; font-size: 1.6rem; }
.pg-sum-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pg-sum-body > p { margin: 0 0 16px; color: var(--muted); }
.pg-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pg-sum-grid div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); }
/* The tiles vary (no "0 New bests" tile, a run with no comparison has 3), so a lone last tile takes the whole row. */
.pg-sum-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pg-sum-grid b { display: block; font: 900 1.4rem var(--display); }
.pg-sum-grid span { font-size: .74rem; color: #b4b4bc; }
.pg-sum-bests { margin: 0 0 14px; padding: 0; list-style: none; }
.pg-sum-bests li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .9rem; color: var(--ink); }
.pg-sum-runs[hidden] { display: none; }
.pg-sum-vs { color: var(--muted) !important; }
.pg-sum-vs.up { color: #7fdca6 !important; font-weight: 700; }
/* A run's New best tile, in the same gold as the New best tag on a set */
.pg-sum-grid div.best { border-color: rgba(255,216,77,.5); background: rgba(255,216,77,.1); }
.pg-sum-grid div.best b { color: #ffd84d; }
.pg-sum-next { margin: 0 0 16px; font-size: .88rem; color: #b4b4bc; }
.pg-sum-body > p.pg-sum-save { margin: -8px 0 16px; font-size: .88rem; color: var(--ink); }
.pg-sum-body > p.pg-sum-save.waiting { color: #ffd84d; }
.pg-sum > .btn { flex: none; width: 100%; min-height: 50px; margin-top: 4px; }
@media print {
  .print-only { display: block; }
  .pg-bar, .pg-pop, .pg-sum-wrap, .pg-start, .pg-chips, .pg-weekrow, .pg-tick, .pg-feel, .pg-hint { display: none !important; }
  .pg-xbody[hidden], .pg-x .ex-notes[hidden] { display: block !important; }
  .pg-row { grid-template-columns: 26px 1.1fr 1fr 1fr; }
  .pg-xhead .pg-xmeta, .pg-chev, .pg-xprog { display: none !important; }
  .pg-rpe { text-decoration: none; }
  /* The PDF is the whole week: program details first, no "today" card. */
  .pg-today, .pg-list-h, .pg-about > summary { display: none !important; }
  .pg-app { display: flex; flex-direction: column; }
  .pg-about { order: -1; margin: 0 0 12px; }
  .pg-x, .pg-row, .ex-notes { background: none !important; color: #000; }
  .pg-x { border-color: #ccc; break-inside: avoid; }
  /* Audit 8 Oct 2026: dark text on paper, plain boxes with no suggested numbers, no video link */
  .pg-xmeta, .pg-prev, .pg-shead, .pg-sn, .pg-x .muted, .day-head .muted, .pg-rpe { color: #222 !important; }
  .pg-row input { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; }
  .pg-row input::placeholder { color: transparent !important; }
  .demo-link { display: none !important; }
  /* Final audit 13 Oct 2026. The safety line once at the foot of each session still to train (program.html's day template),
     as every session prints on its own page; the screen's shared line isn't printed. Never under Start (Start isn't printed). */
  section.block > .pg-safety { display: none !important; }
  .day > .pg-safety { margin: 14px 0 0; font-size: .85rem; color: #222 !important; }
  /* Plain black on white, with or without background graphics: the exercise numbers, the first exercise's card, the warm-up
     label and the plate sizes. */
  .pg-num { background: none !important; color: #000 !important; border: 1px solid #999; }
  .pg-x.current { border-color: #ccc !important; box-shadow: none !important; }
  .pg-warm b { color: #000 !important; }
  .pg-plates i { background: none !important; color: #000 !important; border: 1px solid #999; }
  /* The app bar's room at the bottom isn't needed on paper (it left an empty last sheet). */
  body.layout-app, body.pg-in-session { padding-bottom: 0 !important; }
}
/* Audit 8 Oct 2026: nothing on the program page under 12px, outlines and week dots you can see (3:1) */
.pg-eyebrow, .pg-shead, .pg-dist, .pg-rest-lab { font-size: .75rem; letter-spacing: .06em; }
.pg-chips button, .pg-tool, .pg-skip-rm { font-size: .75rem; letter-spacing: .03em; }
.pg-best { font-size: .72rem; }
.pg-chips button:not(.on), .pg-tool { border-color: var(--line-strong); }
.pg-dots i:not(.done):not(.skip) { background: var(--line-strong); }
.pg-dots i.skip { background: none; border: 1.5px dashed var(--muted-2); }
.pg-flat-wait { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
@media screen { .pg-zone-off { display: none !important; } }
/* Audit 8 Oct 2026: the App bar. Four tabs (Today, Progress, Program, Account) in a bar at the bottom of the screen, a
   floating bar on wider screens. It steps aside in a session (the session bar is there) and while a number is typed.
   A calmer Today card: one line of numbers, no week and day buttons (Program has every session), block progress in the
   strip under the session, Program Plus tools as one row of tiles. */
body.pg-clean .pg-blockline, body.pg-clean .pdf-top, body.pg-clean .pg-today .pg-chips { display: none; }
body.pg-clean .pg-stats-clean { margin: 8px 0 14px; font: 600 .92rem var(--font); color: var(--muted); }
body.pg-clean .pg-plus-lab { margin: 16px 0 0; }
body.pg-clean .pg-prem { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 8px 0 0; }
body.pg-clean .pg-prem-btn { min-height: 52px; padding: 8px 6px; border-radius: 14px; font-size: .78rem; line-height: 1.25; text-align: center; white-space: normal; }
/* Today: this week's sessions as buttons (the dots they replace go). */
body.pg-clean .pg-today .pg-dots { display: none; }
.pg-daypills { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0 16px; }
/* A gym session and a run on one day (program.html, Sam's pick B): the day's box, two sessions side by side. */
.pg-dp-days { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-dp-days .pg-dpill span { white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
.pg-dgroup { grid-column: span 2; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.02); }
.pg-dgroup.cur { border-color: var(--red-bright); }
.pg-dgroup-h { text-align: center; font: 800 .9rem var(--display); color: var(--ink); }
.pg-dgroup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pg-dhalf { min-height: 36px; padding: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pg-dhalf b { font-size: .75rem; }
/* Six or more sessions a week: two rows of four, so each session's name has room (Sam, 10 Oct 2026). */
.pg-daypills:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-dpill { display: grid; justify-items: center; gap: 1px; min-width: 0; min-height: 48px; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.02); color: var(--muted); font: inherit; cursor: pointer; }
.pg-dpill b { font: 800 .9rem var(--display); color: var(--ink); }
.pg-dpill span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; font-weight: 600; }
.pg-dpill.done { border-color: rgba(70,201,135,.5); background: rgba(70,201,135,.1); }
.pg-dpill.done b { color: #7fdca6; }
.pg-dpill.skip { border-style: dashed; }
.pg-dpill.cur { border-color: var(--red-bright); background: rgba(225,29,40,.16); cursor: default; }
.pg-dpill.cur b, .pg-dpill.cur span { color: var(--ink); }
.pg-dpill:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
body.pg-clean .pg-prem-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; }
.pg-prem-t { font-weight: 700; font-size: .8rem; line-height: 1.2; }
.pg-prem-s { font-weight: 600; font-size: .7rem; line-height: 1.2; color: var(--muted); }
/* Phones: "Tap ✓ as you finish each set" drops under "Your session" when they don't fit side by side. */
body.pg-clean .pg-list-h { flex-wrap: wrap; row-gap: 2px; }
body.pg-clean .pg-list-h h2 { white-space: nowrap; }
.pg-appnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(12,12,15,.97); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pg-appnav button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; border: 0; background: none; color: var(--muted); font: 700 .74rem var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pg-nav-ic { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color .2s; }
.pg-appnav svg { width: 22px; height: 22px; }
.pg-appnav button[aria-current="page"] { color: var(--ink); }
.pg-appnav button[aria-current="page"] .pg-nav-ic { background: rgba(255,59,71,.16); color: var(--red-bright); }
.pg-appnav button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: -4px; border-radius: 14px; }
.pg-appnav .pg-tab-dot { top: 6px; right: calc(50% - 26px); box-shadow: 0 0 0 2px #0c0c0f; }
.pg-appnav .pg-tab-dot.act { background: var(--red-bright); }
body.layout-app:not(.pg-in-session) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
/* A control the keyboard moves to is scrolled clear of the tab bar, or of the session bar in a session (measured into
   --pg-bar-h on <html>). No top padding here: .pg-x and .pg-about have their own scroll-margin-top. */
html:has(> body.layout-app) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
html:has(> body.layout-app.pg-in-session) { scroll-padding-bottom: calc(var(--pg-bar-h, 150px) + 24px); }
body.pg-in-session .pg-appnav, body.pg-typing .pg-appnav { display: none; }
@media (min-width: 761px) {
  .pg-appnav { left: 50%; right: auto; bottom: 18px; width: 460px; padding: 6px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
  body.layout-app:not(.pg-in-session) { padding-bottom: 100px; }
  html:has(> body.layout-app:not(.pg-in-session)) { scroll-padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) { .pg-nav-ic { transition: none; } }
/* A message ("Program Plus is on. Welcome!") sits above the tab bar, never behind it. A session lifts it above its own bar. */
body.layout-app:not(.pg-in-session) .toast { bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 61; }
@media (min-width: 761px) { body.layout-app:not(.pg-in-session) .toast { bottom: 100px; } }
.pg-tab-h { margin: 8px 0 18px; font-size: 2rem; line-height: 1.1; }
.pg-tab-h:focus { outline: none; }
.pg-acct { margin: 0 0 18px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
/* Pin my days (program.html pinHTML): each training day with a weekday to pick. */
.pg-pin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.pg-pin-row span { min-width: 0; font-weight: 600; font-size: .92rem; }
.pg-pin-row span b { display: block; color: var(--muted); font: 800 .72rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
/* 16 px or more, so iPhones don't zoom in when one is tapped; background-color keeps the drop-down arrow (select, above). */
.pg-pin-row select { flex: none; min-height: 44px; max-width: 56%; padding: 0 30px 0 10px; border: 1px solid var(--line-strong); border-radius: 12px; background-color: var(--surface-2); background-position: right 10px center; color: var(--ink); font: 600 max(16px, 1rem) var(--font); }
.pg-pin-row select:focus-visible { border-color: var(--red-bright); outline: 2px solid var(--red-bright); outline-offset: 2px; }
.pg-pin-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pg-pin-note { color: var(--ink); font-weight: 600; }
.pg-pin-msg { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.pg-acct h2 { margin: 0 0 6px; font-size: 1.15rem; }
.pg-acct p { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.pg-acct p:last-child { margin-bottom: 0; }
.pg-acct-q { margin-top: 16px !important; }
.pg-past-back { margin-left: 6px; }
/* ---------- Program page v2 (8 Oct 2026) ---------- */
/* Phones first: a slimmer logo bar, no text under 12px, and nothing under 44px to tap. */
@media (max-width: 760px) {
  body.layout-app .nav .wrap { height: 56px; }
  body.layout-app .brand img.wordmark-img { height: 30px; }
}
body.layout-app .pg-xprog, body.layout-app .pg-best-new, body.layout-app .pg-prog-goal > span, body.layout-app #pgSets,
body.layout-app .pg-about .eyebrow, body.layout-app .pg-plates i, body.pg-clean .pg-prem-s, .pg-appnav button { font-size: .75rem; }
/* Very large text: the four tabs still fit (their words stop growing at about 4% of the screen's width, about the size
   they are at normal text), never past the edge (member app audit L3). */
.pg-appnav button { min-width: 0; font-size: min(.75rem, 3.8vw); }
body.layout-app .note-open { display: inline-flex; align-items: center; min-height: 44px; }
/* Today: the greeting, when they last trained and sessions in a row. */
.pg-hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 14px; }
.pg-hello-txt { min-width: 0; }
.pg-hello-t { margin: 0; font: 800 1.35rem/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); }
.pg-hello-s { margin: 4px 0 0; font-size: .84rem; color: var(--muted); }
.pg-streak { flex: none; display: flex; align-items: center; gap: 5px; margin: 0; padding: 7px 12px 7px 9px; border: 1px solid rgba(245,197,66,.35); border-radius: 999px; background: rgba(245,197,66,.08); }
.pg-streak-ic { display: grid; color: #f5c542; }
.pg-streak-ic svg { width: 18px; height: 18px; }
.pg-streak b { font: 800 1.05rem/1 var(--display); color: var(--ink); }
.pg-streak > span:last-child { font-size: .78rem; font-weight: 700; color: #f5c542; }
/* Progress: four numbers, each week's chart, a line on each main lift, milestones. */
.pg-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.pg-stat { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 14px 14px 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-stat b { font: 800 1.5rem/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-stat span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.pg-stat small { font-size: .75rem; font-weight: 700; color: #7fdca6; }
.pg-dash ~ .pg-progress .pg-prog-count { display: none; } /* the numbers above already say it */
@media (min-width: 600px) { .pg-dash:not(.pg-dash-empty) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-dash-empty { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-dash-empty p { margin: 0; font-size: .9rem; color: var(--muted); }
.pg-dash-empty b { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--ink); }
.pg-wchart { margin: 0 0 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-wchart h2 { margin: 0 0 4px; font-size: 1.15rem; }
.pg-wc { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 156px; margin-top: 14px; }
.pg-wc-col { display: grid; grid-template-rows: auto 1fr auto; gap: 5px; min-width: 0; height: 100%; text-align: center; }
.pg-wc-v { font-size: .75rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pg-wc-track { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.pg-wc-track i { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: rgba(70,201,135,.45); }
.pg-wc-col.cur .pg-wc-track i { background: var(--red-bright); }
.pg-wc-l { font-size: .75rem; font-weight: 700; color: var(--muted); }
.pg-wc-col.cur .pg-wc-v, .pg-wc-col.cur .pg-wc-l { color: var(--ink); }
/* Every week since they started: fixed-width weeks that scroll sideways, opening at the newest. */
.pg-wc.all { grid-auto-columns: 34px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; }
.pg-wc-all { display: block; min-height: 44px; margin: 4px 0 -10px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 .85rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-plus-peek .pg-wc-all { display: none; }
.pg-prog-lifts li.has-spark { grid-template-columns: minmax(0, 1fr) 64px auto; }
.pg-prog-lifts li.has-spark .pg-prog-gain { grid-column: 3; }
.pg-spark { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 64px; height: 24px; fill: none; stroke: var(--muted-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-spark circle { fill: var(--muted-2); stroke: none; }
.pg-spark.up { stroke: #46c987; }
.pg-spark.up circle { fill: #46c987; }
/* Progress: each main lift opens its own page (tap the row). */
.pg-lift-row { position: relative; }
.pg-lift-open { position: absolute; inset: 0; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.pg-lift-open:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.pg-lift { width: min(520px, 100%); max-width: 100%; max-height: 88vh; margin: auto auto 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); overflow-y: auto; }
.pg-lift::backdrop { background: rgba(0,0,0,.6); }
@media (min-width: 761px) { .pg-lift { margin: auto; border-radius: 22px; } }
.pg-lift-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-lift-top h2 { margin: 0; font-size: 1.3rem; }
.pg-lift-x { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 700 .9rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-lift-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.pg-lift-stats div { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.pg-lift-stats b { font: 800 1rem/1.2 var(--display); }
.pg-lift-stats span { font-size: .75rem; font-weight: 700; color: var(--muted); }
.pg-lift-stats em { font-style: normal; color: #7fdca6; }
.pg-lchart { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.pg-lchart .ax { stroke: var(--line); stroke-width: 1; }
.pg-lchart .ln { fill: none; stroke: #46c987; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-lchart circle { fill: #46c987; }
.pg-lchart text { fill: var(--muted); font: 700 12px var(--font); }
.pg-lift h3 { margin: 14px 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-lift-list { list-style: none; margin: 0; padding: 0; }
.pg-lift-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.pg-lift-list b { color: var(--ink); }
/* Program Plus only (v2, 8 Oct 2026): what a Program member sees where Program Plus has the weekly chart and each lift's own page,
   and the sheet with what Program Plus adds. The same gold as the Program Plus welcome card. */
.pg-plus-card { margin: 0 0 16px; padding: 16px 18px 18px; border: 1px solid rgba(var(--plus-rgb), .45); border-radius: 18px; background: radial-gradient(130% 90% at 100% 0%, rgba(var(--plus-rgb), .16), transparent 55%), linear-gradient(160deg, var(--plus-bg1) 0%, var(--plus-bg2) 55%, #0e0d0b 100%); box-shadow: inset 0 1px 0 rgba(var(--plus-light-rgb), .12); overflow: hidden; }
body .pg-plus-card .pg-plus-lab, body .pg-plus-acct .pg-plus-lab { margin: 0 0 4px; font-size: .75rem; color: var(--plus); }
.pg-plus-card h2 { margin: 0 0 6px; font-size: 1.15rem; }
.pg-plus-card > p:not(.pg-plus-lab):not(.pg-plus-price) { margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.pg-plus-peek { height: 92px; margin: -2px 0 12px; overflow: hidden; filter: blur(4px) saturate(.7); opacity: .6; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.pg-plus-peek .pg-wchart { margin: 0; padding: 0; border: 0; background: none; }
.pg-plus-peek .pg-wchart h2, .pg-plus-peek .pg-prog-cap { display: none; }
.pg-plus-peek .pg-wc { height: 92px; margin: 0; }
/* "Preview my chart" (10 Oct 2026): a gold button on the blur, then their own chart, sharp. */
.pg-plus-peekwrap { position: relative; }
.pg-plus-preview { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(var(--plus-rgb), .65); background: rgba(14, 13, 11, .82); color: var(--plus-hi); font: 700 .86rem var(--display); white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.pg-plus-preview:hover, .pg-plus-preview:focus-visible { border-color: var(--plus); background: rgba(30, 25, 16, .92); }
.pg-plus-peek.open, .pg-plus-sheet .pg-plus-peek.open { height: auto; margin: 0 0 14px; filter: none; opacity: 1; pointer-events: auto; -webkit-mask-image: none; mask-image: none; animation: pg-peek-in .45s ease-out; }
.pg-plus-peek.open .pg-wc { height: 156px; }
.pg-plus-sheet .pg-plus-peek.open .pg-lchart { height: auto; }
@keyframes pg-peek-in { from { filter: blur(4px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .pg-plus-peek.open { animation: none; } }
@media (max-width: 359px) { .pg-plus-card .pg-plus-peek, .pg-plus-card .pg-plus-peek .pg-wc { height: 64px; } }
.pg-plus-price { margin: 0 0 12px; font-size: .85rem; color: var(--muted); }
.pg-plus-price b { margin-right: 4px; font-size: 1rem; color: var(--ink); white-space: nowrap; }
.pg-plus-price span { white-space: nowrap; }
.pg-plus-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pg-plus-acts .btn { min-height: 44px; }
.pg-plus-later { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 700 .85rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-plus-sheet .pg-lift-top h2 { color: var(--plus); }
.pg-plus-sheet .pg-plus-peek { height: 118px; margin: 8px 0 4px; filter: blur(3px) saturate(.8); opacity: .65; -webkit-mask-image: none; mask-image: none; }
.pg-plus-sheet .pg-plus-peek .pg-lchart { width: 100%; height: 118px; margin: 0; }
.pg-plus-lead { margin: 8px 0 2px; font-size: .95rem; color: var(--ink); }
.pg-plus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-plus-list li { position: relative; padding-left: 24px; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.pg-plus-list li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font-weight: 900; color: var(--plus); }
.pg-plus-list li b { color: var(--ink); }
.pg-plus-small { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
/* The price and the button stay at the bottom of the sheet while the list scrolls (the sheet's own padding, undone). */
.pg-plus-buy { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 12px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.pg-plus-buy .pg-plus-price { margin: 0 0 2px; }
.pg-plus-trial { margin: 0 0 10px; font-size: .82rem; color: var(--muted); }
.pg-plus-add { width: 100%; min-height: 52px; }
.pg-plus-note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.pg-plus-acct { margin: 10px 0 14px; padding: 14px 16px; border: 1px solid rgba(var(--plus-rgb), .45); border-radius: 16px; background: radial-gradient(130% 90% at 100% 0%, rgba(var(--plus-rgb), .16), transparent 55%), linear-gradient(160deg, var(--plus-bg1) 0%, var(--plus-bg2) 55%, #0e0d0b 100%); box-shadow: inset 0 1px 0 rgba(var(--plus-light-rgb), .12); }
.pg-plus-acct > p:not(.pg-plus-lab):not(.pg-plus-price) { margin: 0 0 8px; font-size: .88rem; color: var(--muted); }
.pg-plus-acct .pg-plus-price { margin-bottom: 10px; }
.pg-plus-acct .btn { min-height: 44px; }
/* The sample's switch (/demo, Sam 9 Oct 2026): Program or Program Plus, at the top of every tab. As Program, each Program Plus
   part sits where it would be, blurred and tinted gold, under a button that shows it; as Program Plus, those parts are edged
   in gold with a tag. */
.pg-demo-bar { margin: 0 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-demo-bar.plus { border-color: rgba(var(--plus-rgb), .45); background: rgba(var(--plus-rgb), .06); }
.pg-demo-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #0b0b0d; }
.pg-demo-sw button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 800 .92rem var(--display); cursor: pointer; }
.pg-demo-sw button[aria-pressed="true"] { background: #2a2a30; color: var(--ink); }
.pg-demo-sw #pgDemoPlus { color: var(--plus); }
.pg-demo-sw #pgDemoPlus[aria-pressed="true"] { background: var(--plus); color: #1a1406; }
.pg-demo-cap { margin: 8px 6px 2px; font-size: .86rem; line-height: 1.45; color: #c5c5cc; }
.pg-demo-bar.plus .pg-demo-cap { color: #f8e3a8; }
@media (min-width: 700px) { .pg-demo-bar { display: flex; align-items: center; gap: 16px; } .pg-demo-sw { flex: 0 0 340px; } .pg-demo-cap { margin: 0; } }
/* Start free on the sample (final audit wording-5): the button, with the full trial line beside it (Rule 15). */
.pg-demo-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.pg-demo-terms { font-size: .82rem; line-height: 1.4; color: var(--muted); }
.pg-demo-terms b { color: var(--ink); }
.pg-demo-lock { position: relative; margin: 16px 0 0; border-radius: 18px; overflow: hidden; isolation: isolate; }
.pg-demo-peek { max-height: 220px; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; filter: blur(5px) sepia(.85) saturate(1.7) hue-rotate(-10deg) brightness(.8); opacity: .75; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
body .pg-demo-peek > * { margin: 0; }
.pg-demo-lock::after { content: ""; position: absolute; inset: 0; z-index: 0; border: 1px solid rgba(var(--plus-rgb), .55); border-radius: 18px; background: linear-gradient(180deg, rgba(var(--plus-rgb), .06), rgba(var(--plus-rgb), .16)); pointer-events: none; }
.pg-demo-unlock { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; border: 0; border-radius: 18px; background: none; color: #f8e3a8; font: inherit; text-align: center; cursor: pointer; }
.pg-demo-unlock b { font: 900 1.08rem/1.2 var(--display); color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.7); }
/* Its focus ring inside the panel's edge, which clips anything outside it. */
.pg-demo-unlock:focus-visible { outline: 2px solid var(--plus); outline-offset: -4px; }
.pg-demo-try { font-size: .85rem; font-weight: 700; color: var(--plus); text-decoration: underline; text-underline-offset: 3px; }
.pg-demo-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid rgba(var(--plus-rgb), .55); border-radius: 999px; background: rgba(20,16,4,.75); color: var(--plus); font: 800 .66rem var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pg-demo-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pg-demo-gold > .pg-demo-tag { margin: 0 0 8px; background: rgba(var(--plus-rgb), .12); }
body .pg-demo-gold { border-color: rgba(var(--plus-rgb), .5); }
/* Today's three tools: a shorter panel, the tiles centred behind the button. */
.pg-today .pg-demo-lock { margin: 14px 0 0; min-height: 108px; display: grid; align-items: center; }
.pg-today .pg-demo-peek { max-height: none; padding: 2px; -webkit-mask-image: none; mask-image: none; }
.pg-today .pg-demo-unlock { gap: 4px; }
.pg-today .pg-demo-unlock b { font-size: .98rem; }
@keyframes pg-demo-flash { from { box-shadow: 0 0 0 3px rgba(245,197,66,.8); } to { box-shadow: 0 0 0 3px rgba(245,197,66,0); } }
.pg-demo-flash { animation: pg-demo-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .pg-demo-flash { animation: none; } }
.pg-plus-try { width: 100%; min-height: 48px; margin-top: 8px; }
/* A Program Plus member's Account: switch back to Program (a quiet link), or, once that's waiting, the date and Keep. */
.pg-plan-switch { display: block; min-height: 44px; margin: 0 0 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 .85rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-acct .pg-plan-back { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: .88rem; color: var(--muted); }
.pg-acct .pg-plan-back b { color: var(--ink); }
#pgPlanKeep { min-height: 44px; margin-bottom: 14px; }
/* Adding Program Plus: the note under the button, the confirm sheet's short list and when the price starts. */
.pg-plus-buy .pg-plus-note { margin: 10px 0 0; text-align: left; font-size: .82rem; }
.pg-plus-buy .pg-plus-note b { color: var(--ink); }
.pg-plus-short { margin: 12px 0 0; }
.pg-plus-when { margin: -4px 0 12px; font-size: .85rem; color: var(--muted); }
/* Today: a new Program Plus member with no goal is asked for one (gold, like the Program Plus cards), and a Program member sees one
   short line at the moment Program Plus would help (quieter: a plain card). */
.pg-goal-ask { margin: 0 0 16px; padding: 16px 18px; border: 1px solid rgba(var(--plus-rgb), .45); border-radius: 18px; background: radial-gradient(130% 90% at 100% 0%, rgba(var(--plus-rgb), .16), transparent 55%), linear-gradient(160deg, var(--plus-bg1) 0%, var(--plus-bg2) 55%, #0e0d0b 100%); box-shadow: inset 0 1px 0 rgba(var(--plus-light-rgb), .12); }
body .pg-goal-ask .pg-plus-lab { margin: 0 0 4px; font-size: .75rem; color: var(--plus); }
.pg-goal-ask h2 { margin: 0 0 6px; font-size: 1.15rem; }
.pg-goal-ask > p:not(.pg-plus-lab) { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.pg-plus-moment { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pg-plus-moment > p:first-child { margin: 0 0 6px; font-size: .9rem; color: var(--muted); }
.pg-plus-moment > p:first-child b { color: var(--ink); }
.pg-plus-moment .pg-plus-price { margin-bottom: 8px; font-size: .8rem; }
.pg-plus-moment .pg-plus-price b { font-size: .9rem; }
.pg-miles h3 { margin: 16px 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-mile-list, .pg-mile-got { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-mile { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.pg-mile-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #1f1f24; color: var(--muted); }
.pg-mile-ic svg, .pg-mile-chip svg { width: 22px; height: 22px; }
.pg-mile-txt { display: grid; gap: 2px; min-width: 0; }
.pg-mile-txt b { font-size: .92rem; color: var(--ink); }
.pg-mile-txt > span { font-size: .8rem; color: var(--muted); }
.pg-mile-bar { display: block; height: 6px; margin-top: 5px; border-radius: 99px; background: #2a2a30; overflow: hidden; }
.pg-mile-bar i { display: block; height: 100%; border-radius: inherit; background: var(--red-bright); }
.pg-mile-got { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-mile-chip { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(245,197,66,.3); border-radius: 12px; background: rgba(245,197,66,.07); font-size: .82rem; font-weight: 700; color: var(--ink); }
.pg-mile-chip svg { flex: none; color: #f5c542; }
.pg-mile-more { margin-top: 12px; }
.pg-mile-more summary { display: flex; align-items: center; min-height: 44px; font-size: .88rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.pg-mile-more[open] summary { margin-bottom: 8px; }
/* Account: the plan's name and this phone's settings, as switches. */
.pg-plan-name { margin: 0 0 6px !important; font: 800 1.35rem/1.15 var(--display) !important; color: var(--ink) !important; }
.pg-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.pg-switch > span { display: grid; gap: 3px; }
.pg-switch b { font-size: .95rem; color: var(--ink); }
.pg-switch small { font-size: .78rem; color: var(--muted); }
.pg-switch input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0; border-color: transparent; border-radius: 99px; background: #3a3a42; cursor: pointer; transition: background-color .2s; }
.pg-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .2s; }
.pg-switch input:checked { background: #46c987; }
.pg-switch input:checked::after { transform: translateX(20px); }
.pg-switch input:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }
.pg-pick > span { flex: 1; min-width: 0; }
.pg-pick select { flex: none; width: auto; max-width: 42%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: 600 .9rem var(--font); }
.pg-pick select:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.pg-fx-plates { justify-content: center; margin: 8px 0 0; }
.pg-fx-plates span { width: auto; margin-right: 4px; font-size: .74rem; }
/* Account: Send feedback and Remove from this device as tidy rows, like the cards above them. */
body.layout-app #pgFeedback, body.layout-app #pgForget { margin-top: 8px; }
body.layout-app .pg-forget-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: 700 .95rem var(--font); text-decoration: none; text-align: left; cursor: pointer; }
body.layout-app .pg-forget-btn::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--muted); border-width: 2px 2px 0 0; transform: rotate(45deg); }
body.layout-app #pgForgetBtn { color: #ff8a8f; }
/* A new best while training: a gold flash on the set and a burst from its tick. */
.pg-row .pg-tick { position: relative; }
.pg-row.pg-burst { animation: pgBurst 1.4s ease-out; }
@keyframes pgBurst { 0%, 30% { background-color: rgba(245,197,66,.16); box-shadow: inset 0 0 0 1px rgba(245,197,66,.6); } 100% { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(245,197,66,0); } }
.pg-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pg-confetti i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 2px; background: var(--c); animation: pgConf .85s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes pgConf { from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.6); opacity: 0; } }
/* Session done: a new milestone, sessions in a row, and Share. */
.pg-sum-miles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pg-sum-miles[hidden] { display: none; }
.pg-sum-miles li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(245,197,66,.3); border-radius: 14px; background: rgba(245,197,66,.07); font-size: .88rem; color: var(--muted); }
.pg-sum-miles li b { color: var(--ink); }
.pg-sum-miles svg { flex: none; width: 22px; height: 22px; color: #f5c542; }
.pg-sum-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 8px; }
.pg-sum-share[hidden] { display: none; }
.pg-sum-share svg { width: 18px; height: 18px; }
/* Changing tab: the cards rise in gently. */
@media (prefers-reduced-motion: no-preference) { .pg-app.pg-tab-in > :not(.pg-zone-off) { animation: pgTabIn .24s ease-out both; } }
@keyframes pgTabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-switch input, .pg-switch input::after { transition: none; } .pg-row.pg-burst { animation: none; background-color: rgba(245,197,66,.12); } }
/* The rest timer: a ring round the countdown (the thin bar under it goes), and its label at 12px. */
.pg-rest-main { display: flex; align-items: center; gap: 12px; }
.pg-rest-ring { flex: none; width: 54px; height: 54px; transform: rotate(-90deg); }
.pg-rest-ring circle { fill: none; stroke-width: 5; }
.pg-rest-ring circle:first-child { stroke: var(--line); }
.pg-rest-ring circle + circle { stroke: var(--red-bright); stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transition: stroke-dashoffset 1s linear; }
body.layout-app .pg-rest-bar { display: none; }
body.layout-app .pg-rest-lab { font-size: .75rem; }
.pg-rest-ring circle.soon { stroke: #f5c542; }
/* Today, once for a member who already trains: sessions now open full screen. */
.pg-whatsnew { margin: 0 0 16px; padding: 16px 18px; border: 1px solid rgba(70,201,135,.35); border-radius: 18px; background: rgba(70,201,135,.06); }
/* "Your sessions now open full screen", once (program.html v2Build): one line, with OK. */
.pg-whatsnew-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 4px 16px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.pg-whatsnew-line button { flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: #7fdca6; font: 800 .9rem var(--font); cursor: pointer; }
.pg-whatsnew-line button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Session done: a short shower of colour for a full session, a new best or a milestone. */
#pgSumWrap .pg-sum { position: relative; }
.pg-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.pg-rain i { position: absolute; top: -14px; left: var(--x); width: 7px; height: 12px; border-radius: 2px; background: var(--c); opacity: .95; transform: rotate(var(--r)); animation: pgRain var(--t) cubic-bezier(.3,.6,.6,1) var(--w) forwards; }
@keyframes pgRain { to { transform: translateY(460px) rotate(calc(var(--r) + 320deg)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg-rest-ring circle + circle { transition: none; } .pg-rain { display: none; } }
.pg-guide-snd { margin-right: 6px; }
/* Audit B9: three looks for notices. Action needed stays red; information is grey; good news is green. */
.notice.pg-paused, .notice.pg-rebuilding, .notice[data-look="info"] { border-left-color: var(--muted-2); }
.notice.pg-rebuilt, .notice.pg-fresh { border-left-color: #46c987; background: rgba(70,201,135,.07); }
.pg-notice-more { display: none !important; }
.pg-notice-moreb { display: block; min-height: 44px; margin: -8px 0 18px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Audit 8 Oct 2026: the loading outline, and "Set" and "Last time" apart in the set table's heading */
.pg-skel { display: grid; gap: 14px; margin-top: 8px; }
.pg-skel-slow { margin-top: 14px; }
.pg-skel-card { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.pg-skel-card i { display: block; height: 14px; border-radius: 8px; background: var(--line); }
.pg-skel-card i:first-child { width: 40%; } .pg-skel-card i:nth-child(2) { height: 30px; width: 70%; } .pg-skel-card i:nth-child(3) { width: 55%; } .pg-skel-card i:nth-child(4) { height: 52px; border-radius: 14px; }
.pg-skel-short i:nth-child(2) { height: 14px; width: 85%; }
@media (prefers-reduced-motion: no-preference) { .pg-skel-card i { animation: pgSkel 1.2s ease-in-out infinite alternate; } }
@keyframes pgSkel { from { opacity: .45; } to { opacity: 1; } }
.pg-shead > span:nth-child(2) { padding-left: 8px; }
.pg-goal-track { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .88rem; color: #7fdca6; font-weight: 700; }
.pg-sum-carry { margin-bottom: 8px; width: 100%; }
/* The sample's Session done: Start free's trial line, between it and Done (final audit sales-site-app-3). */
.pg-sum-terms { flex: none; margin: 6px 0; font-size: .82rem; line-height: 1.4; text-align: center; color: var(--muted); }
.pg-sum-terms b { color: var(--ink); }
.pg-tab-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #46c987; }
.pg-weeks-all { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-weeks-all h2 { margin: 0 0 4px; font-size: 1.2rem; }
.pg-wk-block h3 { margin: 16px 0 8px; font-size: .95rem; }
.pg-wk-past { margin-top: 12px; border-top: 1px solid var(--line); }
.pg-wk-past summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-top: 10px; font-size: .95rem; font-weight: 700; cursor: pointer; list-style: none; }
.pg-wk-past summary::-webkit-details-marker { display: none; }
.pg-wk-past summary span { margin-left: auto; font-size: .82rem; font-weight: 700; color: #7fdca6; }
.pg-wk-past summary::after { content: ""; width: 8px; height: 8px; margin: -4px 4px 0 2px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pg-wk-past[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.pg-wk-day { min-width: 48px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.pg-wk-day.done { border-color: rgba(70,201,135,.5); background: rgba(70,201,135,.12); color: #7fdca6; }
.pg-wk-day.skipped { border-style: dashed; color: var(--muted); }
.pg-wk-day.next { border-color: var(--red); background: var(--red); color: #fff; }
/* The Program tab (program.html programSessions): About this program first and open, then the sessions. */
.pg-about-top { margin: 0 0 14px; }
.pg-about-top > summary { display: none; }
.pg-about-top .program-head { padding: 0 0 4px; }
.pg-about-top .block-head { margin: 14px 0 12px; }
.pg-about-top .info-list { margin-bottom: 0; }
.pg-pt-h { margin: 14px 0 6px; font-size: .95rem; }
/* A finished block's sessions: a grid, each cell named. */
.pg-pta-row { padding: 6px 0; }
.pg-pta-l { display: block; margin: 0 0 6px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pg-pta-cells { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.pg-pta-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 6px 4px; }
.pg-pta-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.pg-pta-cell small { min-height: 1em; font-size: .7rem; font-weight: 600; opacity: .9; }
.pg-wk-past[open] summary::after { content: ""; }
/* The current block: a ring, this week's cards, and the block as a map. */
.pg-ptc-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.pg-ptc-ring { width: 72px; height: 72px; flex: none; transform: rotate(-90deg); }
.pg-ptc-ring circle { fill: none; stroke-width: 7; }
.pg-ptc-ring .bg { stroke: var(--surface-2); }
.pg-ptc-ring .fg { stroke: #46c987; stroke-linecap: round; }
.pg-ptc-ring text { transform: rotate(90deg); transform-origin: 36px 36px; fill: var(--ink); font: 800 15px var(--display, inherit); }
.pg-ptc-k { margin: 0; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pg-ptc-v { margin: 2px 0 0; font-size: 1rem; color: var(--muted); }
.pg-ptc-v b { color: var(--ink); }
.pg-ptc-wl, .pg-ptc-ml { margin: 0 0 8px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pg-ptc-ml { margin-top: 16px; }
.pg-ptc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pg-ptc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 84px; padding: 12px; text-align: left; }
.pg-ptc-card small { font-size: .7rem; font-weight: 600; opacity: .75; }
/* A run on a gym day sits right after its gym session: a thin bar on its left ties the two together. */
.pg-ptc-card.same, .pg-dpill.same { box-shadow: inset 3px 0 0 #46c987; }
.pg-ptc-card span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.pg-ptc-card em { margin-top: auto; font-style: normal; font-size: .78rem; font-weight: 600; }
.pg-map-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.pg-map-row[aria-pressed="true"] { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); }
.pg-map-dots { display: flex; gap: 6px; margin-left: auto; }
.pg-map-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.pg-map-dots i.done { border-color: #46c987; background: #46c987; }
.pg-map-dots i.next { border-color: var(--red); background: var(--red); }
.pg-map-dots i.skipped { border-style: dashed; }
.pg-peek { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.pg-peek b { color: #7fdca6; }
/* Very large text: the progress line wraps under its words, never past the screen's edge (member app audit L3). Its words
   take what room there is beside the link first (8em, which grows with the text), so at normal sizes nothing moves. */
.pg-peek { flex-wrap: wrap; }
.pg-peek > span:first-child { flex: 1 1 8em; }
.pg-peek-go { flex: none; color: var(--ink); font-weight: 700; }
.pg-plus-lab { margin: 12px 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--plus); }
.pg-cool-now { margin-top: 10px; }
.pg-blockline { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.pg-plus-welcome { margin: 0 0 16px; padding: 16px 18px; border: 1px solid rgba(var(--plus-rgb), .45); border-radius: 18px; background: radial-gradient(130% 90% at 100% 0%, rgba(var(--plus-rgb), .16), transparent 55%), linear-gradient(160deg, var(--plus-bg1) 0%, var(--plus-bg2) 55%, #0e0d0b 100%); box-shadow: inset 0 1px 0 rgba(var(--plus-light-rgb), .12); }
.pg-plus-welcome h2 { margin: 0 0 6px; font-size: 1.15rem; }
.pg-plus-welcome p { margin: 0 0 8px; font-size: .9rem; color: var(--muted); }
.pg-plus-welcome ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: .88rem; }
.pg-plus-welcome li b { display: block; color: var(--ink); }

/* ---------- Home page below the top: same look as the top (red pill label, red highlight) ---------- */
.sec-head { text-align: center; }
.sec-head .h-sentence { margin: 0 auto; max-width: none; }
.sec-sub { max-width: 46ch; margin: 12px auto 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.sec-foot { margin-top: 26px; text-align: center; }
#how .steps { margin-top: 30px; }
.step .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-size: .82rem; }
#made .made-list { margin: 24px auto 0; max-width: 560px; }
/* The plans column sits centred under its heading, like the top of the page. */
#programs .sec-head + .toggle.interval { display: flex; width: max-content; max-width: 100%; margin: 22px auto 0; }
#programs .pcard, #programs .plan-tiles, #programs .plan-detail, #programs .also, #programs details.oneoff { margin-left: auto; margin-right: auto; }
/* The one-off box lines up with the plan card above it. */
#programs details.oneoff { max-width: 580px; }
#faq .sec-head { margin-bottom: 8px; }
.band { position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: radial-gradient(closest-side, rgba(255,40,55,.22), rgba(255,40,55,.06) 55%, transparent 72%); pointer-events: none; }
.band .wrap { position: relative; }
.band .btn { min-height: 56px; border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(255,59,71,.8); }

/* "Inside your program" (six features) and Program Plus (four), each with a small piece of the real program page and the
   /demo sample's numbers. The program page's own styles are used where they fit (lift lines, sessions in a row,
   milestones, the swap box, a goal's plan bar, the weekly chart), so the pictures match it. */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 560px; margin: 30px auto 0; }
@media (min-width: 700px) { .feat-grid { grid-template-columns: 1fr 1fr; max-width: 900px; } }
@media (min-width: 1000px) { .feat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; } }
.feat { display: flex; flex-direction: column; padding: 14px 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.feat h3 { margin: 14px 2px 4px; font-size: 1.05rem; text-transform: none; letter-spacing: -.01em; }
.feat p { margin: 0 2px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.feat-vis { display: grid; align-content: center; gap: 10px; min-height: 176px; padding: 14px; border-radius: 12px; background: radial-gradient(120% 120% at 100% 0%, rgba(190,18,32,.18), transparent 60%), var(--bg); border: 1px solid var(--line-soft); }
/* Know what to lift: the set you're on, as workout mode shows it */
.fv-set { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(20,20,23,.94); }
.fv-set-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fv-set-top b { font: 900 1.05rem var(--display); color: var(--ink); }
.fv-set-top b span { font: 700 .8rem var(--font); color: var(--muted); }
.fv-set-top small { font-size: .78rem; color: var(--muted); }
.fv-set-top em { font-style: normal; font-weight: 700; color: var(--ink); }
.fv-set-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fv-set-nums span { display: grid; justify-items: center; padding: 6px 0 8px; border: 1px solid var(--line); border-radius: 12px; background: #111114; }
.fv-set-nums b { font: 900 2rem/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.fv-set-nums small { font-size: .75rem; font-weight: 700; color: var(--muted); }
.fv-hint { padding: 8px 10px; border: 1px solid rgba(70,201,135,.25); border-radius: 12px; background: rgba(70,201,135,.07); font-size: .84rem; color: var(--muted); }
.fv-hint b { color: #7fdca6; }
/* Tap, rest, repeat: the rest ring */
.fv-restwrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.fv-ring { position: relative; flex: none; width: 104px; height: 104px; }
.fv-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 8; }
.fv-ring circle:first-child { stroke: #26262b; }
.fv-ring circle + circle { stroke: var(--red-bright); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 92; }
.fv-ring span { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; }
.fv-ring small { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff6b72; }
.fv-ring b { font: 900 2rem/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fv-restnext { display: grid; gap: 8px; }
.fv-logged { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fv-restnext small { font-size: .8rem; line-height: 1.45; color: var(--muted); }
.fv-restnext small b { color: var(--ink); }
/* Watch yourself get stronger: a new best as it's called out, then the main lifts (the Progress tab's lines) */
.fv-pop { justify-self: center; padding: 8px 14px; border-radius: 999px; background: #ffd84d; color: #111; font: 800 .8rem var(--display); text-align: center; box-shadow: 0 14px 30px -14px rgba(255,216,77,.6); }
.fv-lifts li:last-child { padding-bottom: 0; }
/* On a phone the card is narrower than the Progress tab: the lift and its gain, then its sets, with no line. */
.fv-lifts li.has-spark { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.fv-lifts .pg-prog-name { grid-column: 1; grid-row: 1; }
.fv-lifts .pg-prog-gain { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.fv-lifts .pg-prog-sets { grid-column: 1 / -1; grid-row: 2; font-size: .82rem; }
.fv-lifts .pg-spark { display: none; }
@media (min-width: 700px) {
  .fv-lifts li.has-spark { grid-template-columns: minmax(0, 1fr) 52px auto; }
  .fv-lifts .pg-prog-sets { grid-column: 1; }
  .fv-lifts .pg-spark { display: block; grid-column: 2; grid-row: 1 / span 2; width: 52px; height: 20px; }
  .fv-lifts .pg-prog-gain { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
/* Adjusts week by week: workout mode's question when an exercise is done */
.fv-feel-q { display: flex; align-items: center; gap: 10px; }
.fv-feel-q b { font: 800 .95rem/1.3 var(--display); color: var(--ink); }
.fv-done { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #46c987; color: #0a0a0b; }
.fv-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fv-feel-btns { display: flex; gap: 6px; margin-top: 12px; }
.fv-feel-btns span { flex: 1; display: grid; place-items: center; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font: 700 .78rem var(--font); }
.fv-feel-btns span.on { border-color: var(--red-bright); color: #fff; background: rgba(190,18,32,.25); }
/* Every session counts: sessions in a row (Today) and milestones (Progress) */
.pg-streak.fv-streak { justify-self: start; }
.fv-miles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fv-miles .pg-mile-chip { min-height: 40px; }
/* Machine taken? The swap box */
.fv-swap { display: grid; gap: 6px; }
.fv-swap .swap-opt { padding: 8px 12px; font-size: .86rem; }
.fv-swap .swap-more-head { margin-top: 4px; }
/* Program Plus: gold, as Program Plus's own cards are in the program */
.kicker.kicker-plus { border-color: rgba(var(--plus-rgb), .45); background: rgba(var(--plus-rgb), .1); color: var(--plus); }
.feat.feat-plus { border-color: rgba(var(--plus-rgb), .22); }
.feat-plus .feat-vis { background: radial-gradient(120% 120% at 100% 0%, rgba(var(--plus-rgb), .12), transparent 60%), var(--bg); }
.fv-plan .gk-bar { margin-top: 0; }
.gk-seg.fv-easy { flex: .25; }
.pg-plus-lab.fv-lab { margin: 0; }
.fv-tools { display: grid; gap: 6px; }
.fv-tools span { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 12px; }
.fv-tools span.on { border-color: var(--plus); background: rgba(var(--plus-rgb), .08); }
.fv-tools b { font-size: .84rem; color: var(--ink); white-space: nowrap; }
.fv-tools small { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fv-chart { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.fv-chart b { font-size: .9rem; color: var(--ink); }
.fv-chart small { font-size: .78rem; color: var(--muted); }
.pg-wc.fv-wc { height: 112px; margin: 0; }
.fv-rb { display: grid; gap: 6px; justify-items: start; }
.fv-rb b { font-size: .95rem; color: var(--ink); }
.fv-rb small { font-size: .8rem; line-height: 1.4; color: var(--muted); }
.fv-rb-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font: 700 .8rem var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.fv-rb em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--muted-2); }
.plus-price { max-width: 46ch; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.plus-price b { color: var(--ink); }

/* Program page: swap "just today or every week", skipped sessions, and a lift at a new rep target */
.swap-when { margin: 10px 0 12px; padding: 12px; border-radius: 12px; background: #1a1a1f; border: 1px solid var(--line); }
.swap-when p { margin: 0 0 10px; font-size: .9rem; color: var(--ink); }
.swap-when-btns { display: flex; gap: 8px; }
.swap-when-btns .btn { flex: 1; min-height: 44px; padding: 8px 10px; }
.swap-cancel { display: block; min-height: 44px; margin: 8px auto 0; padding: 8px 12px; background: none; border: 0; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; }
.pg-skip { display: block; margin: 10px auto 0; padding: 10px 14px; min-height: 44px; background: none; border: 0; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-dots i.skip { background: #55555c; }
.pg-chips button.skipped:not(.on) { color: var(--muted-2); border-style: dashed; }
.pg-complete.pg-skipped { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--muted); }
.pg-hint.pg-hint-new { background: rgba(255,255,255,.04); border-color: var(--line); }
/* Program page: earlier sessions still to do, one small line on the session the page opens on */
.pg-earlier { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; margin: -6px 0 12px; font-size: .84rem; line-height: 1.4; color: var(--muted); }
.pg-earlier span { flex: 1 1 100%; }
.pg-earlier button { min-height: 44px; min-width: 44px; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Program page: the one-time welcome for a brand-new client, and the session warm-up as one line at the top of each
   session still to do (program.html welcomeHTML and daysHtml). The overview button scrolls About this program clear of
   the sticky nav, and Start session the warm-up line clear of the logo or trainer bar. */
.pg-welcome { margin: 0 0 16px; }
.pg-welcome h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.05rem; letter-spacing: -.01em; }
.pg-welcome ul { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 18px; font-size: .9rem; line-height: 1.45; }
.pg-welcome b { color: var(--ink); }
.pg-welcome-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-welcome-acts .btn { min-height: 44px; }
.pg-about { scroll-margin-top: 88px; }
/* Program page: while a session runs on the day on screen (program.html render), workout mode covers the page, and the
   page behind it keeps only the session: the day's name, the warm-up line, the exercises (notes included, as they carry
   pain reports), Finish and Skip, and the session bar. Everything else is in the one list below until the session ends.
   Screen only, so printing is unchanged. */
@media screen {
  body.pg-workout .pg-ends, body.pg-workout .pg-paused, body.pg-workout .checkin-due:not(.pg-health), body.pg-workout .pg-welcome,
  body.pg-workout .tabs, body.pg-workout .pg-past,
  body.pg-workout .pg-focus, body.pg-workout .pg-stats, body.pg-workout .pg-stats-line, body.pg-workout .pg-weekrow, body.pg-workout .pg-earlier,
  body.pg-workout .pg-chips, body.pg-workout .pg-list-h, body.pg-workout .pg-about, body.pg-workout .foot-note,
  body.pg-workout .invite-card, body.pg-workout .lead-card, body.pg-workout .pdf-bottom, body.pg-workout .pdf-top, body.pg-workout .install-card,
  body.pg-workout .pg-forget, body.pg-workout .pg-progress, body.pg-workout .pg-rebuild-card, body.pg-workout .pg-bests, body.pg-workout .pg-skiplist, body.pg-workout .pg-peek, body.pg-workout .pg-weeks-all, body.pg-workout .pg-notice-moreb, body.pg-workout .pg-hello, body.pg-workout .pg-whatsnew, body.pg-workout .pg-daypills, body.pg-workout .pg-gymweek, body.pg-workout .pg-goal-ask, body.pg-workout .pg-plus-moment, body.pg-workout .pg-demo-bar, body.pg-workout #app > .pg-demo-lock, body.pg-workout > footer { display: none; }
}
/* Program page: an exercise's History panel (heaviest set, a small line of the top weight each week, past sessions) */
.pg-hist { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.pg-hist-best { margin: 0 0 10px; }
.pg-hist-best b { font: 800 1rem var(--display); color: var(--ink); }
.pg-hist-best span { color: var(--muted-2); font-size: .8rem; }
.pg-hist-chart { margin: 0 0 10px; }
.pg-hist-chart figcaption { margin-bottom: 4px; font-size: .78rem; color: var(--muted); }
.pg-hist-chart svg { display: block; width: 100%; height: auto; }
.pg-hist-chart polyline { fill: none; stroke: var(--red-bright); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-hist-chart circle { fill: var(--ink); }
.pg-hist-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: .76rem; color: var(--muted-2); }
.pg-hist-list { margin: 0; padding: 0; list-style: none; }
.pg-hist-list:focus { outline: none; }
.pg-hist-list li { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pg-hist-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--ink); }
.pg-hist-row b { font: 800 .9rem var(--display); white-space: nowrap; }
.pg-hist-here { margin-left: 6px; font-style: normal; font-size: .74rem; color: #46c987; }
.pg-hist-list p { margin: 2px 0 0; font-size: .8rem; color: var(--muted-2); overflow-wrap: anywhere; }
.pg-hist-more { display: block; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; border-top: 1px solid var(--line-soft); color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Program page (html.pg-page): every control 44px to tap, a page that tells the browser it's dark, small phones, and
   Reduce Motion. */
.pg-app .btn.small { min-height: 44px; }
.pg-page .brand { min-height: 44px; }
.pg-page { color-scheme: dark; }
@media print { .pg-page { color-scheme: light; } }
/* In a session the logo bar scrolls away with the page, so it and the session bar don't both cover the screen (a third
   of an iPhone SE during a rest). The "Logging for" reminder stays at the top. A logo bar with the coach badge stays,
   so the coach can always see and switch whose program is open. Phones too old for :has() keep today's layout. */
@supports selector(:has(a)) {
  body.pg-in-session .nav:not(:has(.coach-badge)) { position: relative; }
  body.pg-in-session .trainer-bar { top: 0; }
}
/* Small phones: 16px side margins and slimmer cards, so last time ("102.5 × 10") fits at 360px wide and 102.5 fits in
   the kg box at 320px. */
@media screen and (max-width: 400px) {
  .pg-page .wrap { padding-left: 16px; padding-right: 16px; }
  .pg-today { padding: 18px 14px 14px; }
  .pg-xhead { padding: 12px 10px; column-gap: 10px; }
  .pg-xbody { padding: 0 10px 14px; }
  .pg-row { grid-template-columns: 20px 1.25fr 1fr 1fr 44px; gap: 4px; padding: 6px 4px; }
  .pg-row.timed { grid-template-columns: 20px 1.25fr 2fr 44px; }
  .pg-row.bw { grid-template-columns: 20px 1.25fr 2fr 44px; }
  .pg-row.cardio { grid-template-columns: 20px 1fr 1fr 1fr 44px; }
  .pg-shead { padding: 0 4px 2px; }
  .pg-row input { padding: 11px 2px; }
  .pg-prev { padding: 4px 0; }
  /* So "Week 12" fits a chip at 320px wide (and at 300px, Safari zoomed in), never cut to "Week 1…". */
  .pg-weeks button { letter-spacing: 0; padding: 0 2px; }
}
/* Reduce Motion (on iPhone: Settings, Accessibility, Motion): nothing slides in. The session bar and Session done appear
   in place, and messages fade without moving. Smooth scrolling is off too (above, and scrollMotion in program.html). */
@media (prefers-reduced-motion: reduce) {
  .pg-bar, .pg-chev { transition: none; }
  .pg-sum { animation: none; }
  .pg-pop, .pg-pop.show, .toast, .toast.show { transform: translate(-50%, 0); transition: opacity .2s; }
}

/* Laptops and up: the words on the left and the program phone beside them, so the whole phone shows
   without scrolling. Phones and tablets keep the centred layout. */
@media (min-width: 1000px) {
  .hero-centre { text-align: left; }
  .hero-centre::before { left: calc(50% + 60px); top: 50%; margin: -310px 0 0; }
  .hero-centre .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; align-items: center; }
  .hero-centre .hero-copy { grid-column: 1; grid-row: 1; max-width: 620px; margin: 0; }
  .hero-centre h1 { font-size: clamp(2.8rem, 4.4vw, 3.9rem); text-wrap: wrap; }
  .hero-centre h1 .hero-accent { display: block; text-wrap: balance; }
  .hero-centre .sub { margin: 16px 0 0; }
  .hero-centre .cta-stack { margin: 26px 0 0; justify-items: start; max-width: 440px; }
  .hero-centre .cta-note { text-align: left; }
  .hero-centre .hero-stage { grid-column: 2; grid-row: 1 / span 2; margin: 0 auto; transform: scale(1.12); }
  .hero-centre .hero-demo { grid-column: 1; grid-row: 2; align-self: start; margin: 18px 0 0; }
  /* The plans get a little more room on a wide screen. */
  #programs .plan-tiles, #programs .plan-detail { max-width: 720px; }
}

/* Phones: "Inside your program" swipes sideways, one card at a time with the next one peeking in. */
.feat-dots { display: none; justify-content: center; gap: 6px; margin-top: 14px; }
.feat-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: width .2s, background .2s; }
.feat-dots i.on { width: 20px; background: var(--red-bright); }
@media (max-width: 699px) {
  .feat-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; overscroll-behavior-x: contain; margin: 30px -24px 0; padding: 2px 24px 6px; max-width: none; scrollbar-width: none; }
  .feat-grid::-webkit-scrollbar { display: none; }
  .feat { scroll-snap-align: start; }
  .feat-dots { display: flex; }
}
/* A technical exercise picked from the search (Olympic lifts, muscle-ups...): the one line before "Swap to ... for:" */
.swap-when p.swap-tech { margin: 0 0 8px; font-size: .84rem; color: var(--muted); }
/* A technical lift in the program (only there because the member asked for it): one quiet line under the exercise */
.pg-tech { font-size: .8rem; margin-top: 4px; }
/* Sign-up: exercises you'd rather skip, picked from the exercise list */
.skip-pick { display: grid; gap: 8px; }
.skip-pick label { margin: 0; }
.skip-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.skip-pills:empty { display: none; }
.skip-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .86rem; }
.skip-pill button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.skip-pill button:hover { color: var(--ink); }
/* Program page: "Exercises I'd rather skip". The swap choice that adds one is a full sentence on its own row. */
.swap-when-btns.has-skip { flex-wrap: wrap; }
.swap-when-btns .swap-skip { flex: 1 1 100%; white-space: normal; text-transform: none; letter-spacing: 0; font-family: var(--font); font-weight: 600; font-size: .86rem; line-height: 1.3; }
/* The list under the program, next to Remove from this device */
.pg-skiplist { max-width: 820px; margin-top: 28px; }
.pg-rb-why { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.pg-skiplist[hidden] { display: none; }
.pg-skip-box { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 16px; display: grid; gap: 10px; }
.pg-skip-box h3 { margin: 0; font-size: 1.1rem; letter-spacing: -.01em; }
.pg-skip-box p { margin: 0; font-size: .86rem; }
.pg-skip-list { display: grid; }
.pg-skip-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-top: 1px solid var(--line-soft); font-weight: 600; font-size: .95rem; }
.pg-skip-rm { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: 700 .64rem var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pg-skip-rm:hover { color: var(--ink); border-color: var(--muted-2); }
.pg-skip-note { padding: 10px 12px; border-radius: 10px; background: rgba(255,216,77,.08); border: 1px solid rgba(255,216,77,.3); color: #e9e3c4; }
.pg-skip-count { font-size: .78rem !important; }

/* Program page: the comeback week (every plan). The banner on a session still to start, with "I'm fine, skip it", and
   a short line once it's under way. Calm, in the grey of the first-time tip: a lighter week is nothing to worry about. */
.pg-lite { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-left: 3px solid #7fdca6; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.pg-lite p { margin: 0; }
.pg-lite b { color: var(--ink); }
.pg-lite-skip { min-height: 44px; margin-top: 4px; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-lite-tag { margin: 0 0 12px; padding-left: 10px; border-left: 3px solid #7fdca6; font-size: .84rem; line-height: 1.4; color: var(--muted); }
/* The plateau breaker: "Stuck on this one? Try:" with up to two picks and No thanks. Small, inside the exercise. */
.pg-stuck { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: #1a1a1f; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.pg-stuck p { margin: 0 0 8px; }
.pg-stuck p b { color: var(--ink); }
.pg-stuck-opt { display: block; width: 100%; min-height: 44px; margin: 0 0 6px; padding: 8px 12px; background: none; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); font: 600 .84rem/1.35 var(--font); text-align: left; cursor: pointer; }
.pg-stuck-opt b { color: var(--ink); }
.pg-stuck-opt:hover, .pg-stuck-opt:focus-visible { border-color: var(--red-bright); color: var(--ink); }
.pg-stuck-no { min-height: 44px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* The progress card (every plan): sessions done, the main lifts then and now, and their goal. */
.pg-progress { margin: 24px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-progress h2 { font-size: 1.25rem; margin: 0 0 8px; }
.pg-prog-count { margin: 0 0 10px; color: var(--muted); }
.pg-prog-count b { font: 800 1.6rem var(--display); color: var(--ink); margin-right: 4px; }
.pg-prog-cap { margin: 0 0 6px; font-size: .78rem; color: var(--muted-2); }
.pg-prog-lifts { list-style: none; margin: 0; padding: 0; }
/* Estimated max (Progress): one row a lift, its number and up or down on the block before, the set it came from under the name. */
.pg-e1rm-list { list-style: none; margin: 0; padding: 0; }
.pg-e1rm-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.pg-e1rm-n { display: grid; gap: 2px; min-width: 0; font-weight: 700; font-size: .92rem; color: var(--ink); }
.pg-e1rm-n small { font-weight: 500; font-size: .8rem; color: var(--muted); }
.pg-e1rm-v { display: grid; justify-items: end; gap: 2px; flex: none; }
.pg-e1rm-v b { font: 800 1.05rem var(--display); color: var(--ink); }
.pg-e1rm-v em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pg-e1rm-v em.up { color: #46c987; }
.pg-e1rm-v em.down { color: #e8a13a; }
.pg-e1rm-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.pg-lift-e1 { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.pg-lift-e1 p { margin: 0; }
.pg-lift-e1 p span { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-lift-e1 p b { font: 800 1.15rem var(--display); color: var(--ink); }
.pg-lift-e1 .pg-prog-cap { margin-top: 4px; }
.pg-prog-lifts li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.pg-prog-name { font-weight: 700; color: var(--ink); font-size: .92rem; }
.pg-prog-sets { grid-column: 1; font-size: .86rem; color: var(--muted); }
.pg-prog-gain { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #46c987; font-size: .95rem; }
.pg-prog-goal { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: .88rem; color: var(--ink); }
.pg-prog-goal span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
/* Audit 8 Oct 2026: bests rows are buttons (tap to fix), Show all, the New tag, the goal's own words, the fix sheet */
.pg-bests .pg-prog-lifts li { display: block; padding: 0; }
.pg-best-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; width: 100%; min-height: 48px; padding: 9px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pg-best-row:hover .pg-prog-name { text-decoration: underline; text-underline-offset: 3px; }
.pg-best-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(70,201,135,.16); color: #46c987; font-style: normal; font-size: .72rem; font-weight: 700; vertical-align: 1px; }
.pg-bests-all { margin-top: 10px; }
.pg-prog-words { display: inline; color: var(--muted); }
.pg-linkbtn { min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-progress-soon .pg-prog-cap { margin: 0; }
.pg-bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.pg-bf-row label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--muted); }
/* Read out by screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Premium on today's session: the 30-minute version and "Feeling flat?" as small outline buttons under Start, and the
   line saying what's changed once one is on. */
.pg-prem { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pg-prem-btn { min-height: 44px; padding: 8px 14px; background: none; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font: 700 .84rem var(--font); cursor: pointer; }
.pg-prem-btn:hover, .pg-prem-btn:focus-visible { border-color: var(--red-bright); }
.pg-prem .pg-prem-btn { border-color: rgba(var(--plus-rgb), .35); background: linear-gradient(180deg, rgba(var(--plus-rgb), .07), transparent); }
.pg-prem .pg-prem-btn:hover, .pg-prem .pg-prem-btn:focus-visible { border-color: var(--plus); }
.pg-prem-on { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-left: 3px solid var(--red-bright); font-size: .86rem; line-height: 1.45; color: var(--muted); }
.pg-prem-on p { margin: 0; }
.pg-prem-on b { color: var(--ink); }
/* "Feeling flat?" (Premium): two questions, one tap each, and what today becomes, inside today's session. */
.pg-flat { margin: 12px 0 0; padding: 14px; border: 1px solid rgba(190,18,32,.5); border-radius: 14px; background: var(--surface-2); }
.pg-flat h2 { font-size: 1.1rem; margin: 0 0 4px; }
.pg-flat-sub { margin: 0 0 10px; font-size: .86rem; color: var(--muted); }
.pg-flat-q { margin: 10px 0 6px; font-size: .86rem; font-weight: 700; color: var(--ink); }
.pg-flat-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pg-flat-opt { min-height: 44px; padding: 6px 4px; background: none; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); font: 700 .82rem var(--font); cursor: pointer; }
.pg-flat-opt.on { border-color: var(--red-bright); color: #fff; background: rgba(190,18,32,.25); }
.pg-flat-pain { min-height: 44px; margin-top: 6px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-flat-painnote { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid #7fdca6; background: rgba(255,255,255,.04); border-radius: 8px; font-size: .86rem; line-height: 1.45; color: var(--ink); }
.pg-flat-result { margin-top: 10px; padding: 12px; border-radius: 12px; background: #1a1a1f; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.pg-flat-result p { margin: 4px 0 10px; }
.pg-flat-t { display: block; font: 800 1rem var(--display); color: var(--ink); }
.pg-flat-nums b { color: var(--ink); }
.pg-flat-ex { list-style: none; margin: 0 0 12px; padding: 0; }
.pg-flat-ex li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.pg-flat-ex li span:first-child { color: var(--ink); }
.pg-flat-result .btn { width: 100%; }
.pg-flat-undo { margin: 8px 0 0 !important; font-size: .8rem; }
.pg-flat-close { min-height: 44px; margin-top: 4px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-lite-tag .pg-lite-skip { margin: 0 0 0 4px; font-size: inherit; }
.pg-flat-no { margin-left: 14px; color: var(--muted); }
/* The guided warm-up and cool-down (Premium): a sheet over the page, one step at a time, with a ring timer. */
.pg-guide { background: var(--surface); text-align: center; padding-top: 16px; }
.pg-guide-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.pg-guide-x { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--ink); font: 700 .86rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pg-guide-prog { display: flex; gap: 4px; margin-bottom: 14px; }
.pg-guide-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.pg-guide-prog i.done { background: rgba(225,29,40,.5); }
.pg-guide-prog i.on { background: var(--red-bright); }
.pg-guide h2 { font-size: 1.35rem; margin: 0; }
.pg-guide-side { min-height: 1.3em; margin: 2px 0 6px; font: 800 .8rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--red-text); }
.pg-guide-ring { position: relative; width: 150px; height: 150px; margin: 4px auto 8px; }
.pg-guide-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-guide-ring circle { fill: none; stroke-width: 9; }
.pg-guide-ring .bg { stroke: var(--line); }
.pg-guide-ring .fg { stroke: var(--red-bright); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.pg-guide-ring.done .fg { stroke: #46c987; }
.pg-guide-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 2.4rem var(--display); color: var(--ink); }
.pg-guide-how { min-height: 2.9em; margin: 0 0 12px; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.pg-guide-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-guide-acts .btn { min-height: 50px; }
.pg-guide-acts .btn[hidden] + .btn, .pg-guide-acts .btn:only-child { grid-column: 1 / -1; }
.pg-guide-acts:has(#pgGuideNext[hidden]) #pgGuideGo { grid-column: 1 / -1; }
.pg-guide-up { min-height: 1.3em; margin: 10px 0 4px; font-size: .84rem; color: var(--muted); }
.pg-guide-note { margin: 4px 0 0; font-size: .78rem; color: var(--muted-2); }
/* The card scrolls when the screen is short (a phone on its side), and there the ring is smaller, so Start and Next and
   the note under them can always be reached. */
.pg-guide { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-height: 500px) { .pg-guide-ring { width: 96px; height: 96px; margin: 0 auto 4px; } .pg-guide-ring b { font-size: 1.7rem; } .pg-guide-how { min-height: 0; } }
/* The Session done sheet's cool-down card. */
.pg-sum-cool { margin: 12px 0 0; padding: 14px; border: 1px solid rgba(190,18,32,.5); border-radius: 14px; background: rgba(190,18,32,.08); text-align: left; }
.pg-sum-cool b { display: block; color: var(--ink); }
.pg-sum-cool p { margin: 4px 0 10px; font-size: .86rem; color: var(--muted); }
.pg-sum-cool .btn { width: 100%; }
.pg-cool-skip { display: block; min-height: 44px; margin: 4px auto 0; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-sum-cool .pg-cool-done { margin: 0; color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .pg-guide-ring .fg { transition: none; } }
/* Rebuild any time (Premium): the card under the progress card, and its sheet. */
.pg-rebuild-card { margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
/* Your road to race day (program.html goalRoadHTML): a line of blocks, this one marked, then the easier days and race day. */
.pg-road { margin: 14px 0 14px; }
.pg-road-h { margin: 0 0 10px; font: 800 .78rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-road-list { list-style: none; margin: 0; padding: 0; }
.pg-road-list li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.pg-road-list li:last-child { padding-bottom: 0; }
.pg-road-list li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--line-strong); }
.pg-road-list li:last-child::before { display: none; }
.pg-road-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.pg-road-list li.done .pg-road-dot { background: var(--line-strong); }
.pg-road-list li.now .pg-road-dot { border-color: #46c987; background: #46c987; box-shadow: 0 0 0 4px rgba(70,201,135,.2); }
.pg-road-list li.race .pg-road-dot { border-color: var(--red-bright); background: var(--red-bright); border-radius: 4px; }
.pg-road-list li > div { min-width: 0; }
.pg-road-t { margin: 0; font-size: .95rem; line-height: 1.35; color: var(--ink); }
.pg-road-t span { color: var(--muted); font-size: .84rem; }
.pg-road-list li.now .pg-road-t span { color: #46c987; font-weight: 700; }
.pg-road-list li.done .pg-road-t { color: var(--muted); }
.pg-road-f { margin: 3px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.pg-road-what { margin: 10px 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.pg-road-what b { color: var(--ink); }
.pg-rebuild-card h2 { font-size: 1.1rem; margin: 0 0 4px; }
.pg-rebuild-card p { margin: 0 0 8px; font-size: .88rem; color: var(--muted); }
.pg-rb-count { font-size: .8rem !important; font-weight: 700; color: var(--muted-2) !important; }
.pg-rebuilt, .pg-rebuilding { margin-bottom: 16px; }
/* A notice's × (program.html nxBtn, 10 Oct 2026): top right, a full finger's width, quiet until touched. */
.notice:has(> .notice-x) { position: relative; padding-right: 48px; }
.notice-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.notice-x:hover, .notice-x:focus-visible { color: var(--ink); background: rgba(255,255,255,.06); }
.pg-rb { min-width: 0; background: var(--surface); text-align: left; }
.pg-rb-sub { margin: 0 0 6px; color: var(--muted); font-size: .9rem; }
.pg-rb-why { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--ink); font-size: .9rem; }
.pg-rb-f { display: block; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.pg-rb-f.changed { border-color: var(--red-bright); background: rgba(190,18,32,.08); }
.pg-rb-l { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: .86rem; font-weight: 700; color: var(--ink); }
.pg-rb-l i { font-style: normal; font-weight: 600; color: var(--muted); text-align: right; }
.pg-rb-f select, .pg-rb-f input, .pg-rb-f textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: max(16px, 1rem); }
/* "More you can change" (Sam, 12 Oct 2026): one row that opens cardio and current strength. */
.pg-rb-more { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.pg-rb-more span { color: var(--muted); font-size: .8rem; }
.pg-rb-more span::after { content: " \25BE"; }
.pg-rb-more[aria-expanded="true"] span::after { content: " \25B4"; }
.pg-rb-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pg-rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-rb-chips label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .82rem; color: var(--ink); }
.pg-rb-chips label:has(input:checked) { border-color: #46c987; background: rgba(70,201,135,.14); }
.pg-rb-f .pg-rb-chips input { width: auto; min-height: 0; margin: 0; padding: 0; accent-color: #46c987; }
/* Keyboard focus: a ring round the chip, and a red ring on the drop-downs and boxes (not on the chip's own tick box, so
   a chip never gets two rings). */
.pg-rb-chips label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@supports selector(:has(*)) { .pg-rb-chips input:focus-visible { outline: none; } }
.pg-rb-f :is(select, textarea, input:not([type="checkbox"])):focus-visible { border-color: var(--red-bright); outline: 2px solid var(--red-bright); outline-offset: 1px; }
.pg-rb-kinds input[name="cardioOther"] { margin-top: 8px; }
.pg-rb-hint { display: block; margin-top: 6px; font-size: .76rem; color: var(--muted); }
.pg-rb-health { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid #7fdca6; background: rgba(255,255,255,.04); border-radius: 8px; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.pg-rb-health b { color: var(--ink); }
/* "Yes, it is" to the question about what they typed: the note it points to. */
.pg-rb-health.on { border-left-color: var(--red-bright); color: var(--ink); }
.pg-rb-health:focus { outline: none; }
/* A rebuild or goal that starts their next block: the check-in's two health questions and its tick (program.html nbhOpen). */
.pg-nbh { margin: 12px 0 0; }
.pg-nbh-h { margin: 0; font-size: .9rem; color: var(--ink); }
.pg-nbh-q { min-width: 0; }
.pg-nbh-q legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font-size: .86rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.pg-nbh-q legend small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); }
.pg-nbh-q .pg-rb-chips { clear: both; }
.pg-nbh-stop { margin: 8px 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink); }
.pg-nbh-tick { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .84rem; line-height: 1.45; color: var(--ink); }
.pg-nbh-tick input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #46c987; }
.pg-rb-sum { margin: 12px 0; font-size: .86rem; color: var(--muted); }
.pg-rb-sum b { color: var(--ink); }
.pg-rb-sum ul { margin: 6px 0; padding-left: 18px; color: var(--ink); }
.pg-rb-sum p { margin: 6px 0 0; }
/* "Rebuild now?" (the second step): what happens and what it uses, then Yes or Not yet. */
.pg-rb-confirm { margin: 6px 0 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.04); }
.pg-rb-confirm p { margin: 0 0 10px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.pg-rb-confirm p b { color: var(--ink); }
.pg-rb-confirm .btn { width: 100%; min-height: 48px; }
.pg-rb-confirm .btn + .btn { margin-top: 8px; }
.pg-rb-err { margin: 0 0 10px; color: var(--red-text); font-size: .88rem; }
/* Its label is long ("Rebuild my program · uses your free trial's rebuild"), so it wraps onto a second line on a phone
   instead of running off both edges (a client's phone, 10 Oct 2026). The goal sheet's button below does the same. */
#pgRbGo, #pgGoalGo { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.pg-rb > .btn { flex: none; width: 100%; min-height: 48px; margin-top: 6px; }
#pgRbForm { display: block; }
#pgRbForm[hidden] { display: none; }
/* Goal and event blocks (Premium): the banner on today's session, and the goal sheet. */
/* The goal on today's session (Sam, 12 Oct 2026): a green box, as red reads as negative; the green of .ic.tick. */
.pg-goal-banner { margin: 8px 0 8px; padding: 9px 12px; border-radius: 12px; background: rgba(70,201,135,.1); border: 1px solid rgba(70,201,135,.32); }
.pg-goal-banner p { margin: 0; font-size: .9rem; line-height: 1.35; color: var(--ink); }
.pg-goal-banner b { color: #fff; font-weight: 700; }
.pg-goal-banner .pg-goal-sub { margin-top: 2px; font-size: .8rem; color: #a6e3c3; }
/* The same second line on the Progress tab and the goal card. */
.pg-prog-goal .pg-goal-sub, .pg-rebuild-card .pg-goal-sub { display: block; margin-top: 2px; font-size: .82rem; color: #a6e3c3; }
.pg-goal-list { display: grid; gap: 8px; margin: 10px 0 0; }
.pg-goal-opt { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; background: none; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--muted); font: inherit; font-size: .86rem; cursor: pointer; }
.pg-goal-opt b { display: block; color: var(--ink); font-size: .95rem; }
.pg-goal-opt.on { border-color: var(--red-bright); background: rgba(190,18,32,.12); }
.pg-goal-hint { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted-2); }
.pg-goal-cur { margin: 8px 0 0; color: var(--ink); font-size: .9rem; }
/* One-offs: one honest line pointing to the better deal (index.html and intake.html). */
.oneoff-better { font-size: .85rem; color: var(--muted); margin: 8px 0 12px; }
/* Sign-up "Training for something?" (Program Plus): the event upsell line on the card, and the suggested goal's tag. */
.pc-add-note { margin: 0 0 10px; font-size: .875rem; line-height: 1.4; color: var(--ink); }
.pc-add-note[hidden] { display: none; }
.sg-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(70,201,135,.16); color: #46c987; font: 700 .75rem var(--font); vertical-align: middle; }
/* Three buttons would cover the goal's questions if they stuck to the bottom, so here they sit after them. */
#stepGoal .go-bar { position: static; border-top: 0; background: none; }
#stepGoal .go-bar .oneoff-toggle { min-height: 44px; }
/* The goal picker (goals batch 1, site/goal-picker.js; design docs/conversion-mockups/goal-picker-v2.html): the sign-up
   "Training for something?" step and the program page's goal sheet. Green for chosen, like the plan card's ticks. */
.gk { --gk-ok: #46c987; --gk-ok-bg: rgba(70,201,135,.10); }
.gk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.gk-back { min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--ink); font: 700 .95rem var(--display); cursor: pointer; }
.gk-back[hidden] { visibility: hidden; display: inline-block; }
.gk-steps { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .82rem; }
.gk-steps i { display: block; width: 22px; height: 5px; border-radius: 3px; background: var(--surface-2); }
.gk-steps i.on { background: var(--gk-ok); }
.gk-q { font: 800 1.4rem/1.2 var(--display); margin: 8px 0 0; text-transform: none; letter-spacing: -.01em; }
.gk-sub { color: var(--muted); margin: 6px 0 0; font-size: .95rem; line-height: 1.5; }
.gk-search { position: relative; margin-top: 14px; }
.gk-search input { width: 100%; min-height: 50px; padding: 10px 14px 10px 42px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.gk-search svg { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; }
.gk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.gk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 124px; padding: 14px 12px; text-align: left; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.gk-tile:hover, .gk-opt:hover { border-color: var(--line-strong); }
.gk-tile.wide { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; }
.gk-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--gk-ok); }
.gk-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gk-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gk-t b { font: 800 1rem/1.25 var(--display); color: var(--ink); }
.gk-t > span { color: var(--muted); font-size: .86rem; line-height: 1.35; }
.gk-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(70,201,135,.16); color: #46c987; font: 700 .72rem var(--font); vertical-align: middle; }
.gk-list { display: grid; gap: 10px; margin-top: 12px; }
.gk-opt { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 12px 14px; text-align: left; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.gk-opt.on { border-color: var(--gk-ok); background: var(--gk-ok-bg); }
.gk-chev { color: var(--muted); font-size: 1.3rem; }
.gk-also { margin: 16px 0 0; font: 800 .78rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gk-explain { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(90,160,255,.08); border: 1px solid rgba(90,160,255,.35); color: #cfe0ff; font-size: .9rem; line-height: 1.45; }
.gk-label { display: block; margin: 18px 0 8px; font: 700 .98rem var(--display); color: var(--ink); }
.gk-label small { display: block; margin-top: 3px; font: 400 .84rem var(--font); color: var(--muted); }
.gk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gk-chip { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 .95rem var(--font); cursor: pointer; }
.gk-chip[aria-pressed="true"] { border-color: var(--gk-ok); background: var(--gk-ok-bg); color: #fff; }
.gk-chip[aria-pressed="true"]::before { content: "✓ "; color: var(--gk-ok); }
.gk-chip:focus-visible, .gk-opt:focus-visible, .gk-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gk-in { display: block; width: 100%; min-height: 50px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.gk-away { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.gk-away b { color: var(--ink); }
.gk-away.warn b { color: #ffcf66; }
.gk-plan { margin-top: 18px; padding: 14px; border-radius: 16px; background: #111114; border: 1px solid var(--line); }
.gk-plan > b { display: block; font: 800 .98rem var(--display); }
.gk-plan p { margin: 6px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.gk-bar { display: flex; gap: 3px; margin: 12px 0 6px; height: 32px; }
.gk-seg { flex: 1; min-width: 0; border-radius: 8px; display: grid; place-items: center; font: 700 .7rem var(--display); color: #0a0a0b; overflow: hidden; }
.gk-seg.base { background: #8fbaff; } .gk-seg.build { background: #46c987; } .gk-seg.peak { background: #ffcf66; } .gk-seg.maintain { background: #7fd9b0; } .gk-seg.easeoff, .gk-seg.easy { background: repeating-linear-gradient(135deg, #3a3a40 0 6px, #2a2a2f 6px 12px); color: var(--ink); }
.gk-legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.gk-track { font-size: .82rem !important; }
/* Every goal in one list (goal-picker.js screen1, Sam 9 Oct 2026): each group's heading, then its goals. */
.gk-all { margin-top: 4px; }
.gk-group { margin-top: 18px; }
.gk-gh { display: flex; gap: 10px; align-items: center; margin: 0; font: inherit; text-transform: none; letter-spacing: 0; }
.gk-gh .gk-ic { width: 34px; height: 34px; border-radius: 10px; }
/* Runs a week and gym sessions a week: number tiles, the recommended one wider, with "Recommended" beside its number. */
.gk-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.gk-num { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 52px; min-height: 52px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.gk-num b { font: 800 1.3rem/1 var(--display); }
.gk-num.rec { border-color: #46c987; padding: 0 12px 0 16px; }
.gk-num[aria-pressed="true"] { border-color: var(--gk-ok); border-width: 2px; background: var(--gk-ok-bg); color: #fff; }
.gk-num[aria-pressed="true"] b::before { content: "✓ "; color: var(--gk-ok); font-size: .8em; }
.gk-num:focus-visible, .gk-seg2 button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gk-rec { padding: 5px 9px; border-radius: 999px; background: rgba(70,201,135,.18); color: #46c987; font: 800 .74rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.gk-rec-line { margin: 8px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
/* How far they can run now: a number box with "km" beside it. */
.gk-km { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.gk-km .gk-in { margin-top: 0; max-width: 130px; }
.gk-km > span { color: var(--muted); font: 700 1rem var(--display); }
.gk-rec-line b { color: #46c987; }
/* Running "A mix of both": each run, outside or on the treadmill. */
.gk-places { display: grid; gap: 8px; }
.gk-place { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.gk-place-n { color: var(--ink); font-weight: 600; font-size: .95rem; }
.gk-place-n b { display: block; color: var(--muted); font: 800 .72rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
.gk-seg2 { display: flex; border: 1.5px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.gk-seg2 button { min-height: 44px; padding: 0 14px; background: none; border: 0; color: var(--ink); font: 600 .88rem var(--font); cursor: pointer; }
.gk-seg2 button + button { border-left: 1px solid var(--line-strong); }
.gk-seg2 button[aria-pressed="true"] { background: var(--gk-ok-bg); color: #fff; box-shadow: inset 0 0 0 1.5px var(--gk-ok); }
/* A run row with its kind to pick and "Same day as a gym session" (goal-picker.js placeRows, Sam 10 Oct 2026). */
.gk-run { flex-direction: column; align-items: stretch; }
.gk-run .gk-place-n { width: 100%; }
.gk-run-kinds { gap: 6px; }
.gk-run-kinds .gk-chip { min-height: 44px; padding: 0 12px; font-size: .86rem; }
.gk-sameday { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--ink); font: 600 .9rem var(--font); cursor: pointer; }
.gk-sameday-box { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; }
.gk-sameday[aria-pressed="true"] .gk-sameday-box { border-color: var(--gk-ok); background: var(--gk-ok-bg); }
.gk-sameday[aria-pressed="true"] .gk-sameday-box::after { content: "✓"; color: var(--gk-ok); font-size: .8rem; }
.gk-sameday:disabled { opacity: .45; cursor: default; }
.gk-sameday:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.gk-plan p.gk-week { color: var(--ink); }
/* A Program member browsing: goals come with Program Plus. */
.gk-unlock { margin-top: 16px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,207,102,.45); background: rgba(255,207,102,.06); }
.gk-unlock p { margin: 0 0 12px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.gk-unlock b { color: var(--ink); }
.gk-unlock .btn { width: 100%; }
/* ---------- Workout mode (v2, 8 Oct 2026): the exercise you're on fills the screen ---------- */
body.pg-focus { overflow: hidden; }
body.pg-focus .pg-bar { display: none; }
.pg-fx { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 0; background: radial-gradient(130% 60% at 100% 0%, rgba(190,18,32,.24), transparent 62%), #0a0a0b; color: var(--ink); overscroll-behavior: contain; }
.pg-fx[hidden] { display: none; }
/* One row as ever: Session on the left, Editing (or nothing) taking the middle, the coach badge, clock and Finish on the
   right. With very large text (a phone's font size at 200%) it wraps rather than run off the edge: Finish (or Done) goes
   onto a line of its own, on the right (member app audit L3). */
.pg-fx-top { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.pg-fx-top > .pg-fx-pill { flex: none; margin-right: auto; }
.pg-fx-top > :nth-child(2):is(span:empty, .pg-fx-count) { flex: 1 1 0; min-width: 0; }
.pg-fx-pill, .pg-fx-clock, .pg-fx-finish { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 800 .82rem var(--font); cursor: pointer; }
.pg-fx-pill { border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--ink); }
.pg-fx-pill svg { width: 18px; height: 18px; }
.pg-fx-count { margin: 0; text-align: center; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .pg-fx-count-w { display: none; } }
.pg-fx-clock { border: 0; background: #1a1a1e; color: var(--ink); font: 800 .95rem var(--display); font-variant-numeric: tabular-nums; }
/* The clock is the pause button: a pause sign while it runs (the running green), a play sign once paused (yellow). */
.pg-fx-clock i { width: 8px; height: 8px; border-radius: 50%; background: #46c987; }
.pg-fx.paused .pg-fx-clock i { background: #f5c542; }
/* The pause sign (a play sign once paused) in place of the dot. Its own element, so a page or a styles.css a version behind
   (fast open) still draws one or the other right. */
.pg-fx-clock-ic { display: grid; place-items: center; width: 14px; height: 14px; color: #46c987; }
.pg-fx-clock-ic svg { width: 14px; height: 14px; }
.pg-fx.paused .pg-fx-clock-ic { color: #f5c542; }
.pg-fx.paused .pg-fx-clock span { opacity: .6; }
/* The session time as a plain readout with its name over it ("Session", "Paused"), and Pause as its own round button
   (Sam, 20 Oct 2026). Right-aligned, so a longer time (1:02:10) grows into the space on its left and nothing moves. */
.pg-fx-time { display: grid; justify-items: end; gap: 2px; margin: 0; line-height: 1; white-space: nowrap; }
.pg-fx-time small { font: 800 .62rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pg-fx-time b { font: 800 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.pg-fx.paused .pg-fx-time small { color: #f5c542; }
.pg-fx.paused .pg-fx-time b { opacity: .6; }
.pg-fx-pause { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: #1a1a1e; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.pg-fx-pause svg { width: 14px; height: 14px; }
.pg-fx.paused .pg-fx-pause { border-color: #f5c542; background: #f5c542; color: #0a0a0b; }
.pg-fx-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-fx-finish { border: 1px solid rgba(225,29,40,.65); background: rgba(225,29,40,.14); color: #ff8a8f; letter-spacing: .04em; text-transform: uppercase; }
.pg-fx-prog { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 0 12px 6px; }
.pg-fx-prog i { height: 5px; border-radius: 5px; background: #26262b; overflow: hidden; }
.pg-fx-prog i.on { background: #3a3a43; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.pg-fx-prog b { display: block; height: 100%; border-radius: inherit; background: #46c987; }
.pg-fx-main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 16px 16px; }
.pg-fx-slide { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 0 auto; }
.pg-fx-slide.in-r { animation: pgFxInR .26s ease-out both; }
.pg-fx-slide.in-l { animation: pgFxInL .26s ease-out both; }
@keyframes pgFxInR { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes pgFxInL { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
/* The swipe (program.html bindFocus, 20 Oct 2026): the phone keeps up-and-down scrolling to itself and hands sideways moves
   to the page, which moves the exercise with the finger; nothing is selected while it's dragged with a mouse. */
.pg-fx-main { touch-action: pan-y; overflow-x: hidden; }
.pg-fx-swiping .pg-fx-main { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.pg-fx-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; text-align: center; }
.pg-fx-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.pg-fx-arrow svg { width: 20px; height: 20px; }
.pg-fx-arrow[disabled] { opacity: .25; cursor: default; }
.pg-fx-name { margin: 0; font: 900 clamp(1.55rem, 7.2vw, 2.25rem)/1.06 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pg-fx-name:focus { outline: none; }
.pg-fx-meta { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.pg-fx-tag { display: inline-block; margin: 8px 0 0; padding: 3px 10px; border-radius: 999px; background: rgba(245,197,66,.12); color: #f5c542; font-size: .75rem; font-weight: 800; }
.pg-fx-back-cur { align-self: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(225,29,40,.5); border-radius: 999px; background: rgba(225,29,40,.1); color: var(--ink); font: 700 .85rem var(--font); cursor: pointer; }
.pg-fx-note { margin: 0; text-align: center; font-size: .82rem; color: var(--muted); }
.pg-fx-warnline { color: #f5c542; }
.pg-fx-stuck { min-height: 52px; padding: 10px 14px; border: 1px solid rgba(245,197,66,.4); border-radius: 16px; background: rgba(245,197,66,.08); color: var(--muted); font: inherit; font-size: .88rem; text-align: center; cursor: pointer; }
.pg-fx-stuck b { color: var(--ink); }
/* Option A (member app audit, Sam 9 Oct 2026): the four tools in one row of equal buttons that always fits, "+ Add a note"
   under them, and the warm-up (or the first time, the how-to) as a strip above the set, with Hide. */
.pg-fx-tools4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pg-fx-tools4 button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 58px; padding: 6px 2px; border: 1px solid var(--line-strong); border-radius: 16px; background: #111114; color: var(--ink); font: 700 .74rem var(--font); cursor: pointer; }
.pg-fx-tools4 svg { width: 20px; height: 20px; color: var(--muted); }
.pg-fx-notelink { align-self: center; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--muted); font: 700 .84rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-fx-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: #141417; font-size: .88rem; color: var(--muted); }
.pg-fx-strip b { color: #7fdca6; }
.pg-fx-strip-t .pg-plates { display: none; }
.pg-fx-strip-b { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* The first exercise's first time: the how-to and the warm-up together, the how-to kept to 2 lines (tap it for the rest). */
.pg-fx-strip-how + .pg-fx-strip { margin-top: -6px; }
.pg-fx-strip-how.with-warm .pg-fx-strip-b { -webkit-line-clamp: 2; }
/* Under 812px tall (an iPhone SE or 8 included) only the warm-up shows, so the set's numbers and the "How hard was that set"
   (RPE) row stay on screen on the very first set; How-to is one tap away. Both strips need about 812px (measured at 360 to
   430 wide, 14 Oct 2026); above 700px the set's layout is roomier, so a 741 to 811px phone needs this too. */
@media (max-height: 811px) { .pg-fx-strip-how.with-warm { display: none; } .pg-fx-strip-how + .pg-fx-strip { margin-top: 0; } }
.pg-fx-strip-x { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: 700 .8rem var(--font); cursor: pointer; }
/* Workout mode's sheets: a <dialog> along the bottom of the screen, over the set, so training never leaves workout mode. */
.pg-fx-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: 84vh; max-height: 84dvh; margin: 0 auto; padding: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: #141417; color: var(--ink); overscroll-behavior: contain; }
.pg-fx-sheet[open] { display: flex; flex-direction: column; animation: pgFxSheetUp .22s ease-out; }
.pg-fx-sheet::backdrop { background: rgba(0,0,0,.6); }
/* It slides up only (never fades), so it's never see-through over the set, even if a frame is missed. */
@keyframes pgFxSheetUp { from { transform: translateY(48px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-fx-sheet[open] { animation: none; } }
.pg-fx-grab { flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 5px; background: #3a3a43; }
.pg-fx-sheet-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 10px; }
.pg-fx-sheet-h h2 { margin: 0; font: 900 1.12rem/1.2 var(--display); text-transform: none; letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
.pg-fx-sheet-h p { margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: var(--muted); }
.pg-fx-sheet-x { flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: 700 .84rem var(--font); cursor: pointer; }
.pg-fx-sheet-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 14px; font-size: .92rem; color: var(--muted); }
.pg-fx-sheet-b > * { margin-top: 0; }
.pg-fx-sheet-b > .ex-swap { padding: 0; border: 0; background: none; }
.pg-fx-sheet-b .swap-title { display: none; }
.pg-fx-sheet-f { flex: none; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.06); }
.pg-fx-sheet-f[hidden] { display: none; }
.pg-fx-sheet-f .pg-fx-log { min-height: 56px; font-size: 1rem; }
.pg-fx-sheet-x:focus-visible, .pg-fx-tools4 button:focus-visible, .pg-fx-notelink:focus-visible, .pg-fx-strip-x:focus-visible, .pg-fx-strip-b:focus-visible, .pg-fx-list button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Session: every exercise and how far along it is. */
.pg-fx-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-fx-list button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: #111114; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pg-fx-list button.on { border-color: rgba(225,29,40,.65); box-shadow: 0 0 0 3px rgba(225,29,40,.15); }
.pg-fx-list-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 800 .8rem var(--display); color: var(--muted); }
.pg-fx-list button.done .pg-fx-list-n { border-color: #46c987; background: #46c987; color: #0a0a0b; }
.pg-fx-list-n svg { width: 16px; height: 16px; }
.pg-fx-list-t b { display: block; font-weight: 700; }
.pg-fx-list-t small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.pg-fx-list em { font-style: normal; font-weight: 800; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-fx-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 26px; background: rgba(20,20,23,.94); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
.pg-fx-sets { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pg-fx-setlab { margin: 0; font: 900 1.35rem var(--display); }
.pg-fx-setlab span { font: 700 .95rem var(--font); color: var(--muted); }
.pg-fx-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* Up to five dots stay on one line, and "Last time" beside them wraps instead (a long one at 320 px: member app audit L3). */
.pg-fx-sets:not(.many) > :first-child { min-width: 0; }
.pg-fx-sets:not(.many) > .pg-fx-dots { flex: none; flex-wrap: nowrap; }
.pg-fx-dots i, .pg-fx-dots button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); font: 800 .8rem var(--display); font-style: normal; }
.pg-fx-dots .done { border-color: #46c987; background: #46c987; color: #0a0a0b; }
.pg-fx-dots .done svg { width: 16px; height: 16px; }
/* A logged set's dot is a button (tap it to change or untick the set): 44px to tap, though it looks 30px. */
.pg-fx-dots button { position: relative; padding: 0; cursor: pointer; touch-action: manipulation; }
.pg-fx-dots button::before { content: ""; position: absolute; inset: -7px; }
.pg-fx-dots button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-fx-dots i.cur { border-color: var(--red-bright); color: var(--ink); box-shadow: 0 0 0 3px rgba(225,29,40,.25); }
/* Six or more sets (a run's intervals, say): smaller dots, kept together, under "Rep 2 of 6" when they don't fit beside it. */
.pg-fx-sets.many { flex-wrap: wrap; row-gap: 8px; }
.pg-fx-sets.many .pg-fx-dots { flex: none; max-width: 100%; justify-content: flex-start; }
.pg-fx-dots.many { gap: 4px; }
.pg-fx-dots.many i, .pg-fx-dots.many button { width: 24px; height: 24px; font-size: .7rem; }
.pg-fx-dots.many button::before { inset: -10px; }
.pg-fx-dots.many .done svg { width: 13px; height: 13px; }
.pg-fx-exdone .pg-fx-dots { justify-content: center; }
.pg-fx-hint { margin: 0; padding: 10px 12px; border: 1px solid rgba(70,201,135,.25); border-radius: 14px; background: rgba(70,201,135,.07); font-size: .88rem; color: var(--muted); }
.pg-fx-hint b { color: #7fdca6; }
.pg-fx-last { margin: 2px 0 0; font-size: .84rem; color: var(--muted); }
.pg-fx-last b { color: var(--ink); }
.pg-fx-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-fx-steps.one { grid-template-columns: minmax(0, 1fr); max-width: 260px; width: 100%; justify-self: center; }
.pg-fx-step { display: grid; gap: 4px; min-width: 0; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: 20px; background: #111114; text-align: center; transition: border-color .15s; }
.pg-fx-step:focus-within { border-color: var(--red-bright); }
.pg-fx-step label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-fx-num { width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; background: none; color: var(--ink); font: 900 min(clamp(2.5rem, 13vw, 3.6rem), 14vw)/1.05 var(--display); text-align: center; letter-spacing: -.03em; caret-color: var(--red-bright); font-variant-numeric: tabular-nums; }
.pg-fx-num::placeholder { color: #8a8a93; opacity: 1; }
.pg-fx-num:focus { outline: none; }
/* Five characters (102.5), then six (101.25): sizes that fit beside the kg on every phone, not cut off (member app audit N1). */
.pg-fx-num[data-long] { font-size: min(clamp(2rem, 9.6vw, 2.75rem), 11vw); }
.pg-fx-num[data-long="2"] { font-size: min(clamp(1.75rem, 8vw, 2.4rem), 9.5vw); }
.pg-fx-unit { margin-top: -4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pg-fx-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pg-fx-pm button { min-height: 52px; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: #1d1d22; color: var(--ink); font: 800 1.6rem/1 var(--display); cursor: pointer; touch-action: manipulation; }
.pg-fx-pm button:active { background: #2a2a31; }
.pg-fx-log { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; padding: 0 18px; border: 0; border-radius: 20px; background: #46c987; color: #0a0a0b; font: 900 1.12rem var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; box-shadow: 0 18px 40px -20px rgba(70,201,135,.9); touch-action: manipulation; }
.pg-fx-log svg { width: 24px; height: 24px; }
.pg-fx-log:active { transform: scale(.985); }
.pg-fx-log:focus-visible, .pg-fx-ghost:focus-visible, .pg-fx-pm button:focus-visible, .pg-fx-arrow:focus-visible, .pg-fx-pill:focus-visible, .pg-fx-clock:focus-visible, .pg-fx-finish:focus-visible, .pg-fx-next:focus-visible, .pg-fx-restbtns button:focus-visible, .pg-fx-feelbtns button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-fx-ghost { min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: none; color: var(--ink); font: 700 .9rem var(--font); cursor: pointer; }
.pg-fx-rest { display: grid; justify-items: center; gap: 12px; padding: 4px 0 2px; }
.pg-fx-ringwrap { position: relative; width: min(58vw, 230px); aspect-ratio: 1; }
.pg-fx-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-fx-ring circle { fill: none; stroke-width: 8; }
.pg-fx-ring circle:first-child { stroke: #26262b; }
.pg-fx-ring circle + circle { stroke: var(--red-bright); stroke-linecap: round; stroke-dasharray: 326.73; transition: stroke-dashoffset .25s linear, stroke .3s; }
.pg-fx-ring circle.soon { stroke: #f5c542; }
.pg-fx-rest.over .pg-fx-ring circle + circle { stroke: #46c987; }
.pg-fx-ringin { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; }
.pg-fx-ringin span { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff6b72; }
.pg-fx-rest.over .pg-fx-ringin span { color: #7fdca6; }
.pg-fx-ringin b { font: 900 clamp(2.8rem, 14vw, 3.8rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pg-fx-restbtns { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; width: 100%; max-width: 360px; }
.pg-fx-restbtns button { min-height: 50px; border: 1px solid var(--line-strong); border-radius: 14px; background: #1d1d22; color: var(--ink); font: 800 .95rem var(--display); cursor: pointer; touch-action: manipulation; }
.pg-fx-restnext { margin: 0; font-size: .88rem; color: var(--muted); text-align: center; }
.pg-fx-big-tick { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #46c987; color: #0a0a0b; }
.pg-fx-big-tick svg { width: 34px; height: 34px; }
.pg-fx-paused .pg-fx-big-tick { background: #f5c542; }
.pg-fx-q { margin: 0; text-align: center; font: 900 1.35rem/1.15 var(--display); }
.pg-fx-feel .pg-fx-meta, .pg-fx-exdone .pg-fx-meta { text-align: center; margin-top: -6px; }
.pg-fx-feelbtns { display: grid; gap: 8px; }
.pg-fx-feelbtns button { min-height: 56px; border: 1px solid var(--line-strong); border-radius: 16px; background: #1d1d22; color: var(--ink); font: 800 1rem var(--display); cursor: pointer; }
.pg-fx-all { display: grid; justify-items: center; gap: 14px; padding-top: 10vh; text-align: center; max-width: 420px; margin: 0 auto; }
.pg-fx-all .pg-fx-log { margin-top: 10px; }
/* minmax(0, 1fr): a long "Up next" name (nowrap) must never widen the column, or Log set runs off the right edge (Sam, 9 Oct 2026). */
.pg-fx-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.06); background: rgba(10,10,11,.94); }
.pg-fx-foot > * { width: 100%; max-width: 520px; margin: 0 auto; }
/* Resting: the rest in the Log set button (Sam, 14 Oct 2026). The button fills as the rest runs down, gold in the last 10
   seconds, then green "Rested". −15, +15 and Skip in one small row above it. */
.pg-fx-restmini { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.pg-fx-restmini button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: 14px; background: #1d1d22; color: var(--ink); font: 800 .9rem var(--display); cursor: pointer; touch-action: manipulation; }
.pg-fx-restmini button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-fx-log.pg-fx-logrest { display: grid; place-content: center; gap: 2px; overflow: hidden; background: #1d1d22; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); text-transform: none; letter-spacing: 0; }
.pg-fx-lrfill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: rgba(225,29,40,.42); transition: width 1s linear; }
.pg-fx-logrest.soon .pg-fx-lrfill { background: rgba(245,197,66,.45); }
.pg-fx-lrtop, .pg-fx-lrsub { position: relative; }
.pg-fx-lrtop { font: 900 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.pg-fx-lrtop b { font-variant-numeric: tabular-nums; }
.pg-fx-lrsub { font: 600 .82rem var(--font); color: var(--muted); }
.pg-fx-log.pg-fx-logrest.over { background: #46c987; color: #0a0a0b; box-shadow: none; }
.pg-fx-logrest.over .pg-fx-lrfill { display: none; }
.pg-fx-logrest.over .pg-fx-lrsub { color: rgba(10,10,11,.78); }
@media (prefers-reduced-motion: reduce) { .pg-fx-lrfill { transition: none; } }

.pg-fx-next { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 18px; background: #131316; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pg-fx-next small { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-fx-next small { flex: none; }
.pg-fx-next b { flex: 1; min-width: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-fx-next span { flex: none; max-width: 40%; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .pg-fx-next span { display: none; } }
.pg-fx-next svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.pg-fx-lastex { margin: 0; text-align: center; font-size: .82rem; font-weight: 700; color: var(--muted); }
.pg-fx-save { margin: 6px 0 0; text-align: center; font-size: .75rem; color: var(--muted); }
.pg-fx-save:empty { display: none; }
/* A run's average pace or speed, in a slim row under its time and distance (program.html fxCardioHTML): grey while it's
   worked out from them, white once typed (from a watch, say). The same box and colours as the big numbers. */
/* How hard was that? (RPE): a slim row under the weight and reps, its number between − and +. */
.pg-fx-rpe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 16px; background: #111114; transition: border-color .15s; }
.pg-fx-rpe:focus-within { border-color: var(--red-bright); }
.pg-fx-rpe-t { display: grid; gap: 2px; min-width: 0; text-align: left; }
.pg-fx-rpe-t > span { display: flex; align-items: center; gap: 4px; }
.pg-fx-rpe-t label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-fx-rpe-t small { font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.pg-fx-rpe-q { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -12px -8px -12px -6px; padding: 0; border: 0; background: none; color: var(--muted); font: 800 .8rem var(--font); cursor: pointer; }
.pg-fx-rpe-q span { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; line-height: 1; }
.pg-fx-rpe-q[aria-expanded="true"] { color: var(--ink); }
.pg-fx-rpe-in { display: grid; grid-template-columns: 48px 64px 48px; align-items: center; gap: 4px; flex: none; }
.pg-fx-rpe-in button { min-height: 48px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: #1d1d22; color: var(--ink); font: 800 1.4rem/1 var(--display); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pg-fx-rpe-in button:active { background: #2a2a31; }
.pg-fx-rpe-in button:focus-visible, .pg-fx-rpe-q:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-fx-rpe .pg-fx-num { font-size: min(1.9rem, 34px); }
.pg-fx-rpe-help { margin: 8px 2px 0; font-size: .85rem; line-height: 1.45; color: var(--muted); text-align: left; }
.pg-fx-rpe-help b { color: var(--ink); }
/* Reps in reserve as a card like Weight and Reps (Sam, 14 Oct 2026): the label and ? on top, − the number +, and the
   line under the number (TARGET in green while it's on the target). */
.pg-fx-rpe.pg-fx-rpe-card { display: grid; justify-content: stretch; gap: 2px; padding: 12px 10px 12px; border-radius: 20px; text-align: center; }
.pg-fx-rpe-card .pg-fx-rpe-t { justify-items: center; text-align: center; }
.pg-fx-rpe-card .pg-fx-rpe-in { grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; width: 100%; }
.pg-fx-rpe-card .pg-fx-rpe-in button { min-height: 52px; border-radius: 14px; font-size: 1.6rem; }
.pg-fx-rpe-mid { display: grid; justify-items: center; min-width: 0; }
.pg-fx-rpe-card .pg-fx-num { font-size: clamp(2.2rem, 11vw, 3rem); min-height: 44px; }
.pg-fx-rpe-mid small { min-height: 1.2em; font-size: .76rem; font-weight: 700; line-height: 1.25; color: var(--muted); }
.pg-fx-rpe-mid small.tgt { color: #46c987; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

.pg-fx-rpenote { margin: 4px 0 0; font-size: .82rem; line-height: 1.35; color: var(--muted); }
.pg-fx-rpenote b { color: var(--ink); }
.pg-fx-third { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 16px; background: #111114; transition: border-color .15s; }
.pg-fx-third:focus-within { border-color: var(--red-bright); }
.pg-fx-third label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-fx-third label small { font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pg-fx-third-in { display: flex; align-items: baseline; gap: 4px; }
.pg-fx-num3 { width: 5.5ch; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 900 1.6rem/1 var(--display); text-align: right; letter-spacing: -.02em; caret-color: var(--red-bright); font-variant-numeric: tabular-nums; }
.pg-fx-num3::placeholder { color: #8a8a93; opacity: 1; }
.pg-fx-num3:focus { outline: none; }
.pg-fx-third-in span { font-size: .8rem; font-weight: 700; color: var(--muted); }
/* Edit session in workout mode (program.html fxEditHTML, as in the approved mockup): every set of the exercise at once,
   its boxes and its tick, and Done in green where Finish is. */
.pg-fx-finish.done { border-color: #46c987; background: rgba(70,201,135,.1); color: #7fdca6; }
.pg-fx-erows { display: grid; gap: 6px; }
.pg-fx-erow { display: grid; grid-template-columns: 22px minmax(0, 1.25fr) minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.pg-fx-erow.one { grid-template-columns: 22px minmax(0, 1fr) 48px; }
.pg-fx-erow.three { grid-template-columns: 22px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr) 48px; gap: 6px; }
.pg-fx-erow > span { font: 800 .85rem var(--display); color: var(--muted); text-align: center; }
.pg-fx-erow.head > span { font: 800 .68rem var(--font); letter-spacing: .1em; text-transform: uppercase; }
/* A one-sided exercise's "each leg" (or arm, side), small under its column's name (Sam, 10 Oct 2026). */
.pg-fx-erow.head > span small { display: block; margin-top: 2px; font: 700 .68rem var(--font); letter-spacing: 0; text-transform: none; }
.pg-fx-ein { width: 100%; min-width: 0; min-height: 48px; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0d0d10; color: var(--ink); font: 800 1rem var(--display); text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--red-bright); }
.pg-fx-ein::placeholder { color: #8a8a93; opacity: 1; }
.pg-fx-ein:focus { outline: none; border-color: var(--red-bright); }
.pg-fx-etick { display: grid; place-items: center; min-height: 48px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 12px; background: none; color: var(--muted); cursor: pointer; touch-action: manipulation; }
.pg-fx-etick svg { width: 20px; height: 20px; }
.pg-fx-etick[aria-pressed="true"] { border-color: #46c987; background: #46c987; color: #0a0a0b; }
.pg-fx-efeel { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-fx-efeel button { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted); font: 700 .8rem var(--font); cursor: pointer; }
.pg-fx-efeel button[aria-pressed="true"] { border-color: #46c987; background: rgba(70,201,135,.1); color: var(--ink); }
.pg-fx-err { margin: -6px 0 0; font-size: .82rem; color: #ff8a8f; }
.pg-fx-err[hidden] { display: none; }
.pg-fx-etick:focus-visible, .pg-fx-efeel button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Undo for 5 seconds after Log set, "Same as set 1", and the one-time swipe hint (member app audit I3, I4, I6). */
.pg-fx-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 2px 6px 2px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: #1d1d22; font-size: .9rem; font-weight: 700; color: var(--ink); }
.pg-fx-all .pg-fx-undo { width: 100%; }
.pg-fx-undo button { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: #7fdca6; font: 800 .9rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-fx-same { justify-self: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: 700 .85rem var(--font); cursor: pointer; }
.pg-fx-swipe { margin: -6px 0 0; text-align: center; font-size: .8rem; font-weight: 600; color: var(--muted); }
.pg-fx-undo button:focus-visible, .pg-fx-same:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-fx-pm button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* A coach's badge in workout mode's top bar (program.html fxCoachHTML): the page's own badge, a little smaller, 44px to tap. */
.pg-fx-coach { position: relative; justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: #fff; font: 800 .74rem/1 var(--display); letter-spacing: .03em; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
.pg-fx-coach::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.pg-fx-coach.is-client { background: #11213b; color: #dbe7ff; box-shadow: 0 0 0 2px #5b8def; }
.pg-fx-coach:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* With the badge too, on phones under 400px Exercises keeps only its icon (its name stays for screen readers), so the
   badge, the session time, Pause and Finish still fit on one line (20 Oct 2026). */
@media (max-width: 399px) { .pg-fx-top.coach .pg-fx-pill { padding: 0 12px; } .pg-fx-top.coach .pg-fx-pill span { display: none; } }
.pg-fx-sheet-b .pg-fx-erows + .pg-box-note { margin: 12px 0 0; }
/* Short phones (an SE): everything a little tighter, so the set and its numbers are on screen with Log set. */
@media (max-height: 700px) {
  .pg-fx-ringwrap { width: min(44vw, 170px); }
  .pg-fx-num { font-size: min(clamp(2.2rem, 11vw, 3rem), 14vw); }
  .pg-fx-slide { gap: 10px; }
  .pg-fx-name { font-size: clamp(1.3rem, 6.2vw, 1.75rem); }
  .pg-fx-meta { margin-top: 4px; font-size: .82rem; }
  .pg-fx-card { gap: 10px; padding: 12px; }
  .pg-fx-step { padding: 8px; }
  .pg-fx-pm { margin-top: 2px; }
  .pg-fx-pm button { min-height: 44px; }
  .pg-fx-log { min-height: 56px; }
}
/* A phone on its side: the set scrolls on the left; Undo, Log set and Up next stay on the right, full height, so the
   weight and reps boxes and the rest countdown are never under the Log set bar. */
@media (orientation: landscape) and (max-height: 500px) {
  .pg-fx:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); grid-template-rows: auto auto minmax(0, 1fr); }
  .pg-fx-top, .pg-fx-prog { grid-column: 1 / -1; }
  .pg-fx-top { padding: 4px 12px; }
  .pg-fx-main { grid-column: 1; grid-row: 3; }
  .pg-fx-main:last-child { grid-column: 1 / -1; }
  .pg-fx-foot { grid-column: 2; grid-row: 3; align-content: center; overflow-y: auto; border-top: 0; border-left: 1px solid rgba(255,255,255,.06); }
  .pg-fx-swipe { display: none; }
  .pg-fx-ringwrap { width: min(34vh, 130px); }
  .pg-fx-next span { display: none; }
  /* The column is narrow, so Up next sits over the exercise's name and the name gets the button's width. */
  .pg-fx-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
  .pg-fx-next small, .pg-fx-next b { grid-column: 1; }
  .pg-fx-next svg { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .pg-fx-slide.in-r, .pg-fx-slide.in-l { animation: none; } .pg-fx-ring circle + circle { transition: none; } .pg-fx-log:active { transform: none; } }
/* ---------- What's on at the member's club (v2, 8 Oct 2026) ---------- */
.pg-gymweek { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-gw-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pg-gw-top h2 { margin: 0; font-size: 1.1rem; }
.pg-gw-when { flex: none; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-gw-list { list-style: none; margin: 0; padding: 0; }
.pg-gw-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.pg-gw-list li:first-child { border-top: 0; }
.pg-gw-list li > b { font: 800 .95rem var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-gw-name { font-weight: 700; color: var(--ink); }
.pg-gw-suits { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(70,201,135,.14); color: #46c987; font-size: .75rem; font-weight: 800; font-style: normal; white-space: nowrap; }
.pg-gw-pick { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(245,197,66,.14); color: #f5c542; font-size: .75rem; font-weight: 800; font-style: normal; white-space: nowrap; }
.pg-gw-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.pg-gw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.pg-gw-acts .btn { min-height: 44px; }
.pg-gw-hide { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 700 .85rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-gw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 14px 0 6px; }
.pg-gw-days button { display: grid; justify-items: center; gap: 1px; min-height: 56px; padding: 6px 0; border: 1px solid var(--line-strong); border-radius: 14px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.pg-gw-days button span { font-size: .75rem; font-weight: 700; }
.pg-gw-days button b { font: 800 1.05rem var(--display); color: var(--ink); }
.pg-gw-days button.none { opacity: .5; }
.pg-gw-days button[aria-pressed="true"] { border-color: var(--red-bright); background: rgba(225,29,40,.16); }
.pg-gw-days button[aria-pressed="true"] span { color: var(--ink); }
.pg-gw-days button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.pg-gw-day { margin: 12px 0 2px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-gw-full li { grid-template-columns: 74px minmax(0, 1fr); }
.pg-gw-none { margin: 8px 0; font-size: .92rem; color: var(--muted); }
.pg-gw .pg-gw-note { margin-top: 14px; }
@media (max-width: 359px) { .pg-gw-days { gap: 4px; } .pg-gw-days button span { font-size: .75rem; } }
/* A new PB, a ranked list (goals batch 1b; mockup docs/conversion-mockups/lift-goals-mockup.html): the top ones in red, then next up. */
.gk-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.gk-sec b { font: 800 .8rem var(--display); letter-spacing: .04em; text-transform: uppercase; }
.gk-sec span { color: var(--muted); font-size: .78rem; text-align: right; }
.gk-sec.focus b { color: var(--red-text); }
.gk-lift { display: grid; grid-template-columns: 28px 1fr 44px; gap: 8px; align-items: start; margin-bottom: 8px; padding: 10px 8px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.gk-sec.focus ~ .gk-lift { border-color: rgba(225,29,40,.45); box-shadow: inset 3px 0 0 var(--red-bright); }
.gk-sec:not(.focus) ~ .gk-lift { border-color: var(--line); box-shadow: none; }
.gk-rank { width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem var(--display); background: var(--line); color: var(--ink); }
.gk-sec.focus ~ .gk-lift .gk-rank { background: var(--red); color: #fff; }
.gk-sec:not(.focus) ~ .gk-lift .gk-rank { background: var(--line); color: var(--ink); }
.gk-lb { min-width: 0; }
.gk-ln { display: flex; align-items: flex-start; gap: 6px; }
.gk-ln b { flex: 1; min-width: 0; font-weight: 600; font-size: .93rem; line-height: 1.3; padding-top: 3px; }
.gk-done { flex: none; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(70,201,135,.16); color: #46c987; font: 700 .72rem var(--font); }
.gk-rm { flex: none; width: 44px; height: 32px; margin: -4px -4px 0 0; border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.gk-tgt { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-top: 6px; }
.gk-tgt span { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.gk-in.gk-sm { display: inline-block; width: 50px; flex: none; min-height: 40px; margin: 0; padding: 6px 4px; border-radius: 10px; font-size: .95rem; text-align: center; }
.gk-hint { display: block; margin-top: 4px; color: var(--muted); font-size: .78rem; }
.gk-ctl { display: flex; flex-direction: column; gap: 4px; }
.gk-ctl button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .9rem; cursor: pointer; }
.gk-ctl button:disabled { opacity: .3; cursor: default; }
.gk-empty { margin: 0 0 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .86rem; }
.gk-count { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.gk-sugg { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.gk-sugg .gk-sub { margin: 0; padding: 12px 14px; }
.gk-sugg-b { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 500 .93rem var(--font); text-align: left; cursor: pointer; }
.gk-sugg-b:last-child { border-bottom: 0; }
.gk-sugg-b small { color: var(--gk-ok); font-weight: 700; }
.gk-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gk-quick .gk-chip { min-height: 40px; padding: 0 12px; font-size: .86rem; }
.gk-ctl button:focus-visible, .gk-rm:focus-visible, .gk-sugg-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The program page's "Your lift goals" card (goals batch 1b). */
.pg-pbcard { background: linear-gradient(160deg, rgba(190,18,32,.18), var(--surface-2) 55%); }
.pg-pb-kick { display: block; font: 700 .7rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--red-text); }
.pg-pbcard h2 { margin-top: 6px; }
.pg-pb { margin: 12px 0; }
.pg-pb-row { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; font-size: .88rem; }
.pg-pb-row b { font-weight: 600; min-width: 0; }
.pg-pb-row span { margin-left: auto; color: var(--muted); text-align: right; }
.pg-pb-bar { height: 8px; margin-top: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pg-pb-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--red-bright)); }
.pg-pb-bar.done i { background: #46c987; }
.pg-pb-next { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pg-pb-next .pg-pb-kick { color: var(--muted); }
.pg-pb-next ul { list-style: none; margin: 6px 0 0; padding: 0; }
.pg-pb-next li { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; padding: 3px 0; font-size: .86rem; color: var(--muted); }
.pg-pb-next li span:last-child, .pg-pb-row span { margin-left: auto; white-space: nowrap; }
.pg-pb-note { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }

/* ---------- App tidy (Sam, 12 Oct 2026): clarity, less clutter ---------- */
/* Today: the session up next says the week and the day once. The Program Plus tools keep their three boxes, a line each,
   with no "Program Plus tools" label over them (Sam, 12 Oct 2026). */
body.pg-clean .pg-today .pg-focus, body.pg-clean .pg-today .pg-weekrow, body.pg-clean .pg-today .pg-plus-lab { display: none; }
body.pg-clean .pg-today .pg-prem { margin-top: 12px; }
/* The preview list before Start: today's weight where the set count was. */
.pg-xkg { font: 800 .95rem var(--display); color: var(--ink); white-space: nowrap; }
/* The website's footer only on Account. */
body.pg-clean:not([data-tab="account"]) > footer { display: none; }
/* Capitals only on the main button (Start session, Log set). */
body.pg-clean .btn:not(.pg-start), body.pg-clean .pg-tool, body.pg-clean .summary-more, body.pg-clean .ex-notes .demo-link, body.pg-clean .install-card .btn { text-transform: none; letter-spacing: 0; }
/* A smaller logo at the top of the app (still the full logo). */
body.layout-app .brand img.wordmark-img { height: 24px; }
body.layout-app .nav .wrap { height: 48px; }
/* Workout mode: today's aim beside Last time; Note is the fifth tool. */
.pg-fx-aim { display: inline-block; max-width: 100%; color: #46c987; font-weight: 700; white-space: normal; }
.pg-fx-tools4.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pg-fx-tools4.five button { font-size: .72rem; }
/* Progress: three numbers, the chart's words, the main lifts with their estimated max, the bests folded. */
.pg-dash.pg-dash3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-dash.pg-dash3 .pg-stat b { font-size: 1.2rem; }
.pg-prog-lifts li.has-e1 { grid-template-columns: 1fr auto; }
.pg-prog-e1 { grid-column: 2; text-align: right; font-size: .76rem; font-weight: 700; color: var(--plus); }
.pg-progress .pg-e1rm-note { margin: 8px 0 0; }
.pg-bests-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 800 1.02rem var(--display); text-align: left; cursor: pointer; }
.pg-bests-toggle small { font: 600 .85rem var(--font); color: var(--muted); }
.pg-bests-toggle .pg-chev { transition: transform .2s; }
.pg-bests-toggle[aria-expanded="true"] .pg-chev { transform: rotate(180deg); }
.pg-bests-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-bests .pg-prog-cap { margin-top: 6px; }
.pg-miles .pg-mile-more summary { min-height: 44px; display: flex; align-items: center; }
.pg-lift .pg-lift-ch { margin: 12px 0 2px; font: 800 1rem var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pg-lchart .ax.grid { stroke-dasharray: 3 4; opacity: .7; }
/* Program: one "How this program works", and a quieter block heading. */
.pg-howworks h4 { margin: 12px 0 2px; font-size: .9rem; color: var(--ink); }
.pg-howworks h4:first-of-type { margin-top: 6px; }
.pg-howworks p { margin: 0; }
body.pg-clean .pg-about .block-label { font: 700 .86rem var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
body.pg-clean .pg-about .block-label::after { display: none; }
/* Account: training days as one row until it's opened; Save as PDF with the settings. */
details.pg-pin > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
details.pg-pin > summary::-webkit-details-marker { display: none; }
details.pg-pin > summary b { display: block; font: 800 1rem var(--display); color: var(--ink); }
details.pg-pin > summary small { color: var(--muted); font-size: .85rem; }
.pg-pin-change { flex: none; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font: 700 .8rem var(--font); color: var(--ink); }
details.pg-pin[open] .pg-pin-change { visibility: hidden; }
details.pg-pin[open] > summary + p { margin-top: 10px; }

/* ---------- Progress as tiles (Sam, 12 Oct 2026) ---------- */
.pg-tiles { display: grid; gap: 10px; margin: 0 0 16px; }
.pg-tl { position: relative; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); cursor: pointer; }
.pg-tl-strength { background: linear-gradient(160deg, #0f2219, var(--surface) 55%); border-color: #1e3a2c; }
.pg-tl-goalc { background: linear-gradient(160deg, #241d0d, var(--surface) 55%); border-color: #3b3115; }
.pg-tl-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 4px; font: 800 .7rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pg-tl-k span { letter-spacing: 0; text-transform: none; font-weight: 600; font-size: .8rem; }
.pg-tl-more { min-height: 44px; margin: -14px -6px -14px 0; padding: 0 6px; border: 0; background: none; color: var(--ink); font: 700 .82rem var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.pg-tl-more:focus-visible, .pg-pv-back:focus-visible, .pg-tl-lock:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-tl-big { margin: 0 0 12px; font: 900 1.3rem/1.18 var(--display); letter-spacing: -.01em; color: var(--ink); }
.pg-tl-big em { font-style: normal; color: #46c987; }
.pg-tl-big.pg-tl-mid { margin-bottom: 4px; font-size: 1.1rem; }
.pg-tl-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(70, 201, 135, .16); color: #46c987; font: 800 .74rem/1.6 var(--font); vertical-align: 3px; }
.pg-tl-bars { display: grid; gap: 7px; margin: 0 0 12px; }
.pg-tl-bar { display: grid; grid-template-columns: 86px 1fr 60px; align-items: center; gap: 8px; font-size: .82rem; }
.pg-tl-bar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pg-tl-bar i { display: block; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pg-tl-bar i b { display: block; height: 100%; border-radius: 6px; background: #46c987; }
.pg-tl-bar > span:last-child { text-align: right; font: 800 .84rem var(--display); color: #46c987; }
.pg-tl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-tl-facts div { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.pg-tl-facts b { display: block; font: 800 .95rem/1.2 var(--display); color: var(--ink); }
.pg-tl-facts span { display: block; font-size: .72rem; line-height: 1.35; color: var(--muted); }
.pg-tl-facts .plus b { color: var(--plus); }
.pg-tl-dots { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .82rem; color: var(--muted); }
.pg-tl-dots i { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.pg-tl-dots i.d { background: #46c987; border-color: #46c987; }
.pg-tl-dots span { margin-left: 4px; }
.pg-tl-goal { display: flex; align-items: center; gap: 14px; }
.pg-tl-ring { flex: none; position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--plus) calc(var(--p) * 1%), var(--line) 0); }
.pg-tl-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.pg-tl-ring b { position: relative; font: 900 1.05rem/1.05 var(--display); text-align: center; color: var(--ink); }
.pg-tl-ring small { display: block; font: 700 .6rem var(--font); color: var(--muted); }
.pg-tl-goal p { margin: 0; font-size: .84rem; color: var(--muted); }
.pg-tl-goal p b { display: block; font: 800 1rem var(--display); color: var(--ink); }
.pg-tl-sub { margin: 2px 0 8px; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.pg-tl-sub b { color: var(--ink); }
.pg-tl-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: rgba(var(--plus-rgb), .14); color: var(--plus); font: 700 .66rem var(--font); }
.pg-tl-smalls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pg-tl-small { padding: 13px; border-radius: 18px; }
.pg-tl-wide { grid-column: 1 / -1; }
.pg-bests-sub { margin: 12px 0 2px; font: 800 .7rem var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pg-bests-sub:first-of-type { margin-top: 4px; }
.pg-bests .pg-run-bests li > b { color: #46c987; font-size: .95rem; }
.pg-tl-small .pg-tl-k { font-size: .64rem; }
.pg-tl-v { display: block; font: 900 1.3rem/1.1 var(--display); color: var(--ink); }
.pg-tl-mini { display: flex; gap: 4px; align-items: flex-end; height: 30px; }
.pg-tl-mini i { flex: 1; border-radius: 3px 3px 1px 1px; background: #46c987; opacity: .85; }
.pg-tl-line { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 4px 0; border-top: 1px solid var(--line-soft); font-size: .76rem; color: var(--ink); }
.pg-tl-line:first-of-type { border-top: 0; }
.pg-tl-line span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tl-plusline { color: var(--plus); font-weight: 700; }
/* Every tile with a page has a See more button (final audit 13 Oct 2026); on a small tile under 360px just the arrow, its
   name kept for screen readers. A Program member's Bests line is a button to the Program Plus sheet. A tile with nothing to
   open isn't a pointer. One small tile alone fills the row. */
.pg-tl-small .pg-tl-more, .pg-tl-small .pg-tl-line:not(.pg-tl-plusline) { white-space: nowrap; }
.pg-tl-k .pg-tl-more-w { font: inherit; letter-spacing: inherit; }
@media (max-width: 359px) { .pg-tl-more-w { display: none; } }
.pg-tl button.pg-tl-plusline { width: 100%; border: 0; border-top: 1px solid var(--line-soft); background: none; font: inherit; font-size: .76rem; font-weight: 700; text-align: left; cursor: pointer; }
.pg-tl button.pg-tl-plusline:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-tl:not([data-go]):not([data-plus]):not(.pg-tl-invite) { cursor: default; }
.pg-tl-smalls > .pg-tl:only-child { grid-column: 1 / -1; }
.pg-tl-miles { padding: 13px 16px; }
.pg-tl-miles .pg-tl-more { margin: 2px 0 -10px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.pg-tl-pbar { display: block; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pg-tl-pbar b { display: block; height: 100%; border-radius: 6px; background: #46c987; }
.pg-tl-lock { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid rgba(var(--plus-rgb), .35); border-radius: 14px; background: linear-gradient(160deg, var(--plus-bg1), var(--plus-bg2)); color: var(--plus); font: 700 .8rem var(--font); text-align: left; cursor: pointer; }
.pg-tl-lock span:last-child { flex: none; }
.pg-tl-where { margin: -4px 0 10px; font-size: .84rem; color: var(--muted); }
.pg-tl-where b { color: var(--ink); }
.pg-tl-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(232, 161, 58, .12); color: #e8a13a; font-size: .8rem; font-weight: 700; }
.pg-pv-head .pg-tl-where { margin: 10px 0 0; }
.pg-tl-open { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: 700 .82rem var(--font); cursor: pointer; }
.pg-tl-open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* A tile's page. */
.pg-pv-head { margin: 0 0 14px; }
.pg-pv-back { min-height: 44px; margin: 0 0 2px -2px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: 700 .9rem var(--font); cursor: pointer; }
.pg-pv-head .pg-tab-h { margin: 0 0 6px; }
.pg-pv-answer { margin: 0 0 4px; font-size: 1rem; color: var(--ink); }
.pg-pv-whatbtn { min-height: 44px; margin: 0 0 4px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 .86rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-pv-whatbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-pv-answer em { font-style: normal; font-weight: 700; color: #46c987; }
.pg-pv-why { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid #46c987; border-radius: 12px; font-size: .84rem; color: var(--muted); }
.pg-pv-why b { color: var(--ink); font-size: .84rem; }
.pg-pv-why b + span + b { margin-top: 6px; }
.pg-pv-sec { margin: 16px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pg-pv-sec h2 { margin: 0 0 4px; font-size: 1.1rem; }
.pg-pv-sec h3 { margin: 16px 0 6px; font-size: .95rem; }
.pg-tl-vbars { display: flex; justify-content: center; gap: 8px; align-items: stretch; height: 150px; }
.pg-tl-vb { flex: 1; max-width: 56px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 3px; min-width: 0; }
.pg-tl-track { position: relative; display: flex; align-items: flex-end; width: 100%; }
.pg-tl-vb small { font: 700 .66rem var(--font); color: var(--ink); }
.pg-tl-vb i { width: 100%; border-radius: 6px 6px 3px 3px; background: #46c987; opacity: .85; }
.pg-tl-vb em { position: absolute; left: -3px; right: -3px; height: 2px; background: #fff; opacity: .85; }
.pg-tl-vb span { font: 700 .66rem var(--font); color: var(--muted); }
.pg-tl-list { list-style: none; margin: 0; padding: 0; }
.pg-tl-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: .88rem; }
.pg-tl-list li:first-child { border-top: 0; }
.pg-tl-list li small { display: block; font-size: .76rem; color: var(--muted); }
.pg-tl-list li > b { flex: none; font: 800 .9rem var(--display); }
.pg-tl-list li > b.over { color: #e8a13a; }

/* Progress, more visual (Sam, 12 Oct 2026). */
.pg-tl-block { margin: -2px 0 12px; }
.pg-tl-block > p:first-child { margin: 0 0 6px; font-size: .84rem; color: var(--muted); }
.pg-tl-block > p:first-child b { color: var(--ink); }
.pg-tl-blockbar { position: relative; display: block; height: 10px; border-radius: 6px; background: var(--line); }
.pg-tl-blockbar b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2f9e66, #46c987); }
.pg-tl-blockbar::after { content: ""; position: absolute; right: -1px; top: -4px; width: 3px; height: 18px; border-radius: 2px; background: var(--ink); }
.pg-tl-ck { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin: 6px 0 0; font-size: .76rem; font-weight: 700; color: var(--ink); }
.pg-tl-ck span { display: inline-flex; }
.pg-tl-weeks { margin: 0 0 12px; }
.pg-tl-wrow { display: flex; gap: 5px; height: 30px; }
.pg-tl-wrow span { position: relative; flex: 1; display: flex; align-items: flex-end; overflow: hidden; border-radius: 6px; background: var(--line); }
.pg-tl-wrow span i { display: block; width: 100%; background: rgba(70, 201, 135, .55); }
.pg-tl-wrow span.full i { background: #46c987; }
.pg-tl-wrow span.cur { outline: 1.5px dashed var(--line-strong); outline-offset: 2px; }
.pg-tl-wlab { margin: 6px 0 0; font-size: .74rem; color: var(--muted); }
.pg-tl-gauge { display: grid; justify-items: center; margin: 2px 0 0; }
.pg-tl-gauge .pg-gauge { width: 100%; max-width: 140px; height: auto; }
.pg-tl-gauge .pg-tl-v { margin-top: -6px; }
.pg-gauge .track, .pg-gauge .zone { fill: none; stroke-width: 11; stroke-linecap: round; }
.pg-gauge .track { stroke: var(--line); }
.pg-gauge .zone { stroke: #46c987; }
.pg-gauge .needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.pg-gauge .hub { fill: var(--ink); }
.pg-gauge text { fill: var(--muted); font: 700 10px var(--font); }
.pg-eff-dial { display: grid; justify-items: center; margin: 8px 0 4px; }
.pg-eff-dial .pg-gauge { width: 100%; max-width: 240px; height: auto; }
.pg-eff-dial p { margin: -4px 0 0; text-align: center; font-size: .84rem; color: var(--muted); }
.pg-eff-dial p b { display: block; font: 900 1.6rem var(--display); color: var(--ink); }
.pg-effline .band { fill: rgba(70, 201, 135, .16); }
.pg-tl-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.pg-tl-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f8d671, #d6a11f); color: #2a1f05; font: 800 .72rem var(--font); }
.pg-tl-badge svg { width: 17px; height: 17px; }
.pg-tl-badge.more { background: var(--surface-2); color: var(--muted); }
.pg-tl-badge.next { background: none; border: 1.5px dashed var(--line-strong); color: var(--muted); }
.pg-prog-bar { grid-column: 1 / -1; display: block; height: 7px; margin: 6px 0 2px; border-radius: 5px; background: var(--line); overflow: hidden; }
.pg-prog-bar b { display: block; height: 100%; border-radius: 5px; background: #46c987; }
.pg-tl-medal { display: inline-flex; width: 14px; height: 14px; color: inherit; vertical-align: -2px; margin-right: 2px; }
.pg-tl-medal svg { width: 14px; height: 14px; }
.pg-tl-v.gold { color: var(--plus); }
.pg-tl-line i.new { margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(var(--plus-rgb), .16); color: var(--plus); font: 800 .58rem/1.6 var(--font); font-style: normal; }
.pg-tl-phases { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.pg-tl-phases span { padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font: 700 .72rem var(--font); color: var(--muted); }
.pg-tl-phases span.done { border-color: rgba(70, 201, 135, .5); color: #46c987; }
.pg-tl-phases span.now { border-color: var(--plus); background: rgba(var(--plus-rgb), .16); color: var(--plus); }
.pg-tl-phases i { width: 8px; height: 1.5px; background: var(--line-strong); }
.pg-wc-col.best i { background: var(--plus) !important; }
.pg-wc-col.best .pg-wc-v { color: var(--plus); }

/* Running: this block's km each week as small bars. */
.pg-tl-kmbars { display: flex; gap: 5px; align-items: stretch; height: 44px; margin: 0 0 8px; }
.pg-tl-kmbars span { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 6px; background: var(--line); overflow: hidden; }
.pg-tl-kmbars span i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: #46c987; }
.pg-tl-kmbars span.cur { outline: 1.5px dashed var(--line-strong); outline-offset: 2px; }
.pg-tl-kmbars small { position: absolute; top: 2px; font: 800 .6rem var(--font); color: var(--ink); }

/* A tile's page: its big number and picture (Sam, 12 Oct 2026). */
.pg-pv-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 10px; }
.pg-pv-hero b { font: 900 2.6rem/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.pg-pv-hero b.up { color: #46c987; }
.pg-pv-hero b.gold { color: var(--plus); }
.pg-pv-hero span { font-size: .95rem; color: var(--muted); }
.pg-pv-head .pg-tl-block, .pg-pv-head .pg-tl-weeks, .pg-pv-head .pg-tl-kmbars, .pg-pv-head .pg-tl-badges { margin: 0 0 12px; }
.pg-pv-head .pg-tl-kmbars { height: 70px; }
.pg-pv-head .pg-tl-wrow { height: 40px; }
.pg-pv-head .pg-tl-badge { width: 40px; height: 40px; }
.pg-pv-head .pg-pv-gauge { display: flex; justify-content: center; margin: 0 0 10px; }
.pg-pv-head .pg-pv-gauge .pg-gauge { width: 100%; max-width: 250px; height: auto; }
.pg-pv-head .pg-pv-whatbtn { margin-top: -4px; }
/* The Strength page: its goal is on the Goal tile, so the progress card doesn't repeat it. */
body.pg-clean .pg-progress .pg-prog-goal { display: none; }
/* Effort's hardest lifts: a scale each, RPE 6 to 10, the target shaded and a dot for how hard it felt. */
.pg-eff-row > span:first-child { flex: 1; min-width: 0; }
.pg-rpe-scale { position: relative; display: block; height: 8px; margin: 7px 0 2px; border-radius: 5px; background: var(--line); }
.pg-rpe-scale em { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: rgba(70, 201, 135, .45); }
.pg-rpe-scale i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); }
.pg-eff-row.over .pg-rpe-scale i { background: #e8a13a; }
.pg-eff-row > b { min-width: 36px; text-align: right; }
.pg-eff-key { display: flex; gap: 14px; margin: 0 0 4px; font-size: .74rem; color: var(--muted); }
.pg-eff-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; background: rgba(70, 201, 135, .45); vertical-align: -1px; }
.pg-eff-key span + span::before { border-radius: 50%; background: var(--ink); }

/* The Milestones page: its big number says how many, so no repeated heading; green bars, the earned ones as gold badges. */
body.pg-clean .pg-miles > h2, body.pg-clean .pg-miles > .pg-prog-cap, body.pg-clean .pg-miles .pg-mile-more > summary { display: none; }
body.pg-clean .pg-miles .pg-mile-bar i { background: #46c987; }
body.pg-clean .pg-mile-got .pg-mile-chip svg { box-sizing: content-box; width: 16px; height: 16px; padding: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f8d671, #d6a11f); color: #2a1f05; }

/* Bests' page shows every best: no toggle. */
body.pg-clean .pg-bests .pg-bests-toggle { display: none; }
body.pg-clean .pg-bests .pg-prog-cap { margin-top: 0; }

/* Bests' list: a medal each (gold for this block's new ones), and Fix it on the lift's page. */
.pg-best-medal { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.pg-best-medal svg { width: 16px; height: 16px; }
.pg-best-medal.new { background: radial-gradient(circle at 35% 30%, #f8d671, #d6a11f); color: #2a1f05; }
.pg-bests .pg-best-new { background: rgba(var(--plus-rgb), .16); color: var(--plus); }
.pg-lift-fix { display: block; min-height: 44px; margin: 10px auto 0; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 700 .86rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-lift-fix:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* The Goal tile with 2 or 3 lift goals: a ring each, side by side. */
.pg-tl-goals3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.pg-tl-goals3 > div { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.pg-tl-goals3 .pg-tl-ring { width: 70px; height: 70px; margin-bottom: 4px; }
.pg-tl-goals3 > div > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .82rem var(--display); color: var(--ink); }
.pg-tl-goals3 small { font-size: .72rem; color: var(--muted); }

/* Bests not seen yet: a gold edge and New, at the top, with Mark all as seen. */
.pg-bests li.unseen .pg-best-row { box-shadow: inset 3px 0 0 var(--plus); padding-left: 12px; }
.pg-bests-seen { display: block; min-height: 44px; margin: 0 0 4px; padding: 0 16px; border: 1px solid rgba(var(--plus-rgb), .5); border-radius: 999px; background: rgba(var(--plus-rgb), .1); color: var(--plus); font: 700 .86rem var(--font); cursor: pointer; }
.pg-bests-seen:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Today, Program and inviting, more visual (Sam, 12 Oct 2026). */
.pg-xkg small { display: block; font: 700 .68rem var(--font); text-align: right; color: var(--muted); white-space: normal; }
.pg-xkg small.up { color: #46c987; }
.pg-xkg small.down { color: #e8a13a; }
.pg-peek-new { padding: 1px 8px; border-radius: 999px; background: rgba(var(--plus-rgb), .16); color: var(--plus); font: 800 .76rem var(--font); font-style: normal; }
.pg-peek-bar { flex: 1 0 100%; display: block; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pg-peek-bar b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2f9e66, #46c987); }
.pg-prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pg-prog-chips span { padding: 4px 11px; border: 1px solid rgba(70, 201, 135, .4); border-radius: 999px; background: rgba(70, 201, 135, .1); color: #7fdca6; font: 700 .8rem var(--font); }
.pg-blocks-road { margin: 4px 0 12px; }
/* Program's own "now" and "Up next" in white, not Program Plus gold (final audit 13 Oct 2026: gold is only for Program Plus;
   green already means done). A race goal's road on the Program Plus goal tile keeps its gold. */
.pg-blocks-road span small { color: inherit; font-weight: 700; }
.pg-blocks-road span.now { border-color: var(--ink); background: rgba(255, 255, 255, .08); color: var(--ink); }
body.pg-clean .pg-wk-day.next { border-color: var(--ink); background: rgba(255, 255, 255, .08); color: var(--ink); }
body.pg-clean .pg-wk-day.next small, body.pg-clean .pg-wk-day.next em { color: var(--ink); opacity: 1; }
.pg-tl-invite { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-color: rgba(var(--plus-rgb), .35); background: linear-gradient(160deg, var(--plus-bg1), var(--plus-bg2)); color: var(--ink); font: inherit; text-align: left; }
.pg-tl-invite b { display: block; font: 800 1rem var(--display); color: var(--plus); }
.pg-tl-invite small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.pg-tl-invite > span:last-child { font-size: 1.4rem; color: var(--plus); }
.pg-tl-invite:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-sum-invite { margin: 12px 0 0; padding: 12px 14px; border: 1px solid rgba(var(--plus-rgb), .35); border-radius: 14px; background: linear-gradient(160deg, var(--plus-bg1), var(--plus-bg2)); }
.pg-sum-invite p { margin: 0 0 8px; font-size: .88rem; color: var(--muted); }
.pg-sum-invite p b { color: var(--plus); }
/* Session done sits outside #app, so .pg-app .btn.small's 44 px doesn't reach Invite a friend. */
.pg-sum-invite .btn { min-height: 44px; }

/* The cool-down on Session done: calm green, never red (Sam, 12 Oct 2026: red "looks like a negative thing"). */
.pg-sum-cool { border-color: rgba(70, 201, 135, .4); background: linear-gradient(160deg, #0f2219, var(--surface) 70%); }
.pg-sum-cool b { color: #7fdca6; }
.pg-sum-cool .btn:not(.ghost) { border-color: #46c987; background: #46c987; color: #07130c; }
.pg-sum-cool .btn:not(.ghost):hover, .pg-sum-cool .btn:not(.ghost):focus-visible { background: #5ad597; }

/* Account (Sam, 12 Oct 2026): the invite card in gold; Training days without the dropdown's +; Save as PDF a Settings row;
   Send feedback once (its row), not in the footer too. */
body.pg-clean .invite-card { border-color: rgba(var(--plus-rgb), .35); background: linear-gradient(160deg, var(--plus-bg1), var(--plus-bg2)); }
body.pg-clean .invite-card h3 { color: var(--plus); }
body.pg-clean .invite-card .btn:not(.ghost) { border-color: var(--plus); background: var(--plus); color: #2a1f05; }
body.pg-clean .invite-card .btn.ghost { border-color: rgba(var(--plus-rgb), .5); color: var(--plus); }
details.pg-pin > summary::after { display: none; }
.pg-pdf-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pg-pdf-row b { display: block; font-size: .95rem; }
.pg-pdf-row small { display: block; color: var(--muted); font-size: .8rem; }
.pg-pdf-row > span:last-child { font-size: 1.3rem; color: var(--muted); }
.pg-pdf-row:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.pg-clean > footer [data-wp-feedback] { display: none !important; }

/* Bests (Sam, 14 Oct 2026): Strength | Running, a little line under every best (a dot after one session), its date and how
   many sessions under that. */
.pg-bseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 2px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #0b0b0d; }
.pg-bseg button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 800 .92rem var(--display); cursor: pointer; }
.pg-bseg button span { margin-left: 4px; font: 700 .78rem var(--font); color: var(--muted-2); }
.pg-bseg button[aria-selected="true"] { background: #2a2a30; color: var(--ink); }
.pg-bseg button[aria-selected="true"] span { color: #46c987; }
.pg-bseg button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-bests .pg-best-list { margin-top: 2px; }
.pg-bests .pg-best-list li + li { border-top: 1px solid var(--line-soft); }
.pg-bests .pg-best-row { display: block; padding: 11px 0 10px; }
.pg-bests li.unseen .pg-best-row { padding-left: 12px; }
.pg-best-top { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; align-items: center; gap: 12px; }
.pg-best-top .pg-prog-name { min-width: 0; }
.pg-best-top .pg-prog-gain { flex: none; white-space: nowrap; }
.pg-spark { display: block; width: 64px; height: 22px; overflow: visible; }
.pg-spark polyline { fill: none; stroke: #46c987; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-spark .base { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.pg-spark circle { fill: #46c987; }
.pg-bests li.unseen .pg-spark polyline { stroke: var(--plus); }
.pg-bests li.unseen .pg-spark circle { fill: var(--plus); }
.pg-best-meta { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.pg-lift-one { margin-top: 4px; text-align: center; }
.pg-best-top > .pg-prog-name { grid-column: 1; grid-row: 1; }
.pg-best-top > .pg-spark { grid-column: 2; grid-row: 1; }
.pg-best-top > .pg-prog-gain { grid-column: 3; grid-row: 1; text-align: right; }

/* A new best's medal (Sam, 14 Oct 2026), in place of the New tag, until seen. */
.pg-bests .pg-best-new.pg-new-medal { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 6px 0 0; padding: 0; border-radius: 0; background: none; color: var(--plus); vertical-align: -4px; filter: drop-shadow(0 0 6px rgba(var(--plus-rgb), .35)); }
.pg-new-medal svg { width: 22px; height: 22px; }
/* The same clear white ring for keyboard focus on the Program tab's week cards and block map, Training days, the gold
   invite buttons and Session done's buttons (the browser's own dark ring vanished on these dark, gold and green fills). */
.pg-wk-day:focus-visible, .pg-map-row:focus-visible, details.pg-pin > summary:focus-visible, body.pg-clean .invite-card .btn:focus-visible, #pgSumWrap .btn:focus-visible, .pg-cool-skip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* A 320 px screen (a small phone, or an iPhone set to Display Zoom): the menu's wordmark and Start free button, and the
   Program Plus line on the plan card, fit without running off the edge. Here at the end, so it wins over the 760 px rules. */
@media (max-width: 359px) {
  .nav .wrap { gap: 10px; }
  .brand img.wordmark-img { height: 28px; }
  .nav-links .btn.small { padding: 10px 12px; }
  .hero-float-b { right: 0; }
  .pc-add-name { white-space: normal; }
}
/* Windows contrast themes (forced colours): what's picked shows in the theme's own highlight, not only in a red or green
   fill the theme takes away. Last in the file, so it wins over the rules it overrides. */
@media (forced-colors: active) {
  .toggle button.on, .pg-fx-etick[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* Effort in reps in reserve (Sam, 14 Oct 2026): the verdict in words, an Easy to Hard bar with the aim in green, and each
   lift saying what happens next. */
.pg-eff-on { color: #46c987; }
.pg-eff-hard { color: #e8a13a; }
.pg-eff-easy { color: #7fb2ff; }
.pg-effbar { margin: 10px 0 2px; }
.pg-effbar-t { position: relative; display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.18)); }
.pg-effbar-t em { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: rgba(70, 201, 135, .6); }
.pg-effbar-t i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.pg-effbar-k { position: relative; display: flex; justify-content: space-between; height: 1.3em; margin-top: 5px; font-size: .7rem; color: var(--muted); }
.pg-effbar-k .aim { position: absolute; top: 0; transform: translateX(-50%); color: #46c987; font-weight: 700; white-space: nowrap; }
.pg-effbar.big { width: 100%; max-width: 320px; margin: 4px auto 6px; }
.pg-effbar.big .pg-effbar-t { height: 14px; }
.pg-effbar.big .pg-effbar-t i { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.pg-effbar.big .pg-effbar-k { font-size: .8rem; }
.pg-eff-what { margin: 0 0 14px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.pg-eff-what b { color: var(--ink); }
.pg-eff-row > span:first-child small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.pg-eff-row .pg-effbar { margin: 8px 0 2px; }
.pg-eff-row.pg-eff-hard .pg-effbar-t i { background: #e8a13a; }
.pg-eff-row.pg-eff-easy .pg-effbar-t i { background: #7fb2ff; }

/* ---------- The weekly streak (Sam, 20 Oct 2026; docs/oct20/streaks): only while STREAKS is on ---------- */
/* Fire colours: amber to orange, apart from the gold of milestones and Program Plus and the green of progress. */
.pg-wkpill { font: inherit; color: inherit; cursor: pointer; min-height: 44px; border-color: rgba(245,138,31,.4); background: rgba(245,138,31,.1); }
.pg-wkpill .pg-streak-ic { color: #f5a03a; }
.pg-wkpill > span:last-child { color: #f5a03a; }
.pg-wkpill.open { border-color: rgba(245,138,31,.3); background: transparent; }
.pg-wkpill.paused { border-color: var(--line-strong); background: transparent; }
.pg-wkpill.paused .pg-streak-ic, .pg-wkpill.paused > span:last-child { color: var(--muted); }
.pg-wkpill:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pg-hello-wk { color: var(--muted); }
/* The weeks as marks: a flame for each week kept, gold for a full week, a shield for a streak saver, a pause, an empty
   ring for a week not kept, dashed for this week while it's open. */
.pg-wk-row { display: flex; gap: 6px; margin: 2px 0 4px; }
.pg-wk-c { flex: 1; max-width: 40px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); }
.pg-wk-c svg { width: 58%; height: 58%; }
.pg-wk-c.kept { border-color: rgba(245,138,31,.55); background: rgba(245,138,31,.16); color: #f5a03a; }
.pg-wk-c.full { border-color: rgba(245,197,66,.6); background: rgba(245,197,66,.16); color: var(--plus); }
.pg-wk-c.saved { border-color: rgba(127,178,255,.55); background: rgba(127,178,255,.12); color: #7fb2ff; }
.pg-wk-c.paused { background: var(--surface-2); }
.pg-wk-c.open { border-style: dashed; border-color: #c98a4b; }
.pg-wk-c.now { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line-strong); }
.pg-wk-ends { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: .7rem; color: var(--muted-2); }
/* The Progress tile and its page. */
.pg-tl-wks { background: linear-gradient(160deg, #26160a, var(--surface) 55%); border-color: #3a2412; }
.pg-wkt-n { font: 900 1.9rem/1 var(--display); color: #f5a03a; letter-spacing: -.02em; }
.pg-wkt-chip { background: rgba(245,160,58,.16); color: #f5a03a; }
.pg-wkt-week { margin-top: 6px; }
.pg-tl-facts .pg-wkt-sv { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: -3px; color: #7fb2ff; }
.pg-wkt-sv svg { width: 16px; height: 16px; }
.pg-pv-hero b.fire { color: #f5a03a; }
.pg-pv-head .pg-wk-row { margin-top: 4px; }
.pg-wks-dots { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.pg-wks-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); }
.pg-wks-dots i.on { border-color: #f5a03a; background: #f5a03a; }
.pg-wks-dots i.aim:not(.on) { border-color: #c98a4b; border-style: dashed; }
.pg-wks-dots span { margin-left: 4px; font: 800 .95rem var(--display); color: var(--ink); }
.pg-wks-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .86rem; line-height: 1.45; color: var(--ink); }
.pg-wks-miles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 6px; }
.pg-wks-m { display: grid; justify-items: center; gap: 2px; padding: 9px 2px; border: 1.5px solid var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.pg-wks-m b { font: 900 1.15rem/1 var(--display); color: var(--muted); }
.pg-wks-m small { font-size: .62rem; line-height: 1.2; }
.pg-wks-m.got { border-color: rgba(245,197,66,.55); background: radial-gradient(circle at 35% 25%, rgba(248,214,113,.28), rgba(214,161,31,.12)); }
.pg-wks-m.got b { color: var(--plus); }
.pg-wks-m.next { border-style: dashed; border-color: #c98a4b; }
.pg-wks-m.next b { color: var(--ink); }
.pg-wks .pg-tl-list { margin-top: 14px; }
.pg-wks-how { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.pg-wks-how li { margin: 0 0 6px; }
/* Session done: the moment a week is kept, the flame and the number (gold for a milestone); a line otherwise. */
.pg-sum-miles li.pg-sum-wk { padding: 12px 14px; border-color: rgba(245,138,31,.45); background: linear-gradient(135deg, rgba(245,138,31,.16), rgba(190,18,32,.06)); }
.pg-sum-miles li.pg-sum-wk.gold { border-color: rgba(245,197,66,.6); background: linear-gradient(135deg, rgba(245,197,66,.2), rgba(214,161,31,.06)); }
.pg-sum-wk-f { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.pg-sum-miles .pg-sum-wk-f svg { position: absolute; inset: -9px; width: 70px; height: 70px; color: #f5a03a; opacity: .9; }
.pg-sum-wk.gold .pg-sum-wk-f svg { color: var(--plus); }
.pg-sum-wk-f b { position: relative; margin-top: 17px; font: 900 1.3rem/1 var(--display); color: #1a0f05; }
.pg-sum-wk-l { display: block; margin-top: 2px; }
.pg-sum-wk .pg-sum-wk-f { animation: pg-wk-in .7s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes pg-wk-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pg-sum-wk .pg-sum-wk-f { animation: none; } }
.pg-sum-miles li.pg-sum-wkl svg { color: #f5a03a; }