/* 12weekplan.net. Every colour, size and space is a token; components only use var(). */

@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-14: 0.875rem; --t-16: 1rem; --t-18: 1.125rem; --t-22: 1.375rem; --t-28: 1.75rem; --t-36: 2.25rem;
  --t-hero: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);
  --w-reg: 400; --w-med: 500; --w-logo: 800;
  --lh-tight: 1.05; --lh-head: 1.2; --lh-body: 1.55;
  --track-logo: -0.06em; --track-tight: -0.035em; --track-head: -0.02em; --track-wide: 0.04em;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;
  --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem; --r-full: 999px;
  --hair: 1px; --ring: 2px;
  --page: 72rem; --gutter: clamp(1rem, 4vw, 2.5rem);
  --ctl-h: 2.75rem; --top-h: 3.75rem; --chart-h: 11rem; --chart-h-sm: 7.5rem; --bar-h: 3.5rem;
  --col-sets: 8.75rem; --col-load: 7.5rem; --col-rest: 3.75rem;

  --bg: #f6f6f3; --surface: #ffffff; --surface-2: #efefeb;
  --ink: #0c0d0f; --ink-2: #2e3136; --ghost: #6b6f76;
  --line: #e2e2dc; --line-2: #c9c9c1;
  --accent: #d9420b; --accent-ink: #8f2803; --logo-bg: #ff6a2b; --logo-ink: #0c0d0f;
  --btn: #ff6a2b; --on-btn: #000000; --btn-hover: #ff8a57;
  --foot-bg: #0c0d0f; --foot-ink: #f6f6f3; --foot-ink-2: #c9cbd0; --foot-line: #2e3136;
  --ph-1: #efb262; --ph-2: #ea7a2c; --ph-3: #d9420b; --ph-4: #0c0d0f;
  --ok: #17794a; --on-ok: #ffffff; --bad: #8c1d18; --bad-bg: #fbeceb; --note-bg: #eef6f0;
  --shadow: 0 1px 2px rgb(12 13 15 / 0.04), 0 12px 32px -12px rgb(12 13 15 / 0.14); --veil: rgb(12 13 15 / 0.5);
  color-scheme: light;
}

/* Light is the default. Dark is the visitor's own choice, made with the button in the top bar. */
:root[data-theme="dark"] {
  --bg: #0b0c0e; --surface: #141518; --surface-2: #1c1e22;
  --ink: #f2f2ef; --ink-2: #d4d6da; --ghost: #9a9ea6;
  --line: #25272c; --line-2: #3a3d44;
  --accent: #ff6a2b; --accent-ink: #ff9a6c; --logo-bg: #ff6a2b; --logo-ink: #0c0d0f;
  --btn: #ff6a2b; --on-btn: #000000; --btn-hover: #ff8a57;
  --foot-bg: #141518; --foot-ink: #f2f2ef; --foot-ink-2: #d4d6da; --foot-line: #3a3d44;
  --ph-1: #f3c383; --ph-2: #f48d48; --ph-3: #f0602c; --ph-4: #f2f2ef;
  --ok: #5ccf94; --on-ok: #0b0c0e; --bad: #ff8a80; --bad-bg: #2a1614; --note-bg: #13231a;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7); --veil: rgb(0 0 0 / 0.65);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
/* One dial for the whole page: every size is in rem, so the root size scales type, spacing, controls and
   the page width together. A 1440 x 800 screen is the reference; a bigger screen scales everything by the
   same ratio, limited by whichever of its width or height is tighter. It never drops below the reader's
   own text size. */
html { font-size: clamp(100%, min(1.1111vw, 2vh), 300%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + var(--s-4)); }
/* Phones: a 390px screen is the reference, and wider phones scale up a little with it. */
@media (max-width: 40rem) { html { font-size: clamp(100%, 4.1vw, 112.5%); } }
body {
  /* A column at least one screen tall: the footer sits at the bottom even on a short page. */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--w-reg) var(--t-18)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: var(--hair); }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; }
:focus-visible { outline: var(--ring) solid var(--accent); outline-offset: var(--ring); border-radius: var(--r-sm); }
.skip { position: absolute; left: var(--s-4); top: calc(-1 * var(--s-24)); background: var(--btn); color: var(--on-btn); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); z-index: 30; }
.skip:focus { top: var(--s-2); }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fine { font-size: var(--t-16); color: var(--ink-2); }
.eyebrow { font-size: var(--t-14); font-weight: var(--w-med); color: var(--accent-ink); letter-spacing: var(--track-wide); text-transform: uppercase; }

/* ---------------------------------------------------------------- top bar */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  display: flex; align-items: center; gap: var(--s-6);
  padding: 0 max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--hair) solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; font-size: var(--t-18); font-weight: var(--w-med); letter-spacing: var(--track-head); white-space: nowrap; }
/* The mark: the name's own number, set heavy on the brand orange. The same in light and dark. */
.logo { display: inline-grid; place-items: center; flex: none; width: var(--s-8); height: var(--s-8); border-radius: var(--r-sm); background: var(--logo-bg); color: var(--logo-ink); font: var(--w-logo) var(--t-18)/1 var(--font); letter-spacing: var(--track-logo); text-indent: var(--track-logo); }
.top-nav { margin-left: auto; display: flex; gap: var(--s-6); font-size: var(--t-16); color: var(--ink-2); }
.top-nav a { text-decoration: none; padding: var(--s-3) 0; }
.top-nav a:hover { color: var(--ink); }
.icon-btn { display: inline-grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); border: 0; background: none; border-radius: var(--r-md); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }

/* ---------------------------------------------------------------- layout */
main { flex: 1 0 auto; width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
body:not([data-view="home"]) [data-home] { display: none; }

/* The intro is the whole first screen: headline, one sentence, the button and the chart. */
.hero { display: grid; gap: var(--s-10); padding: var(--s-10) 0; align-content: center; align-items: center; min-height: calc(100vh - var(--top-h)); min-height: calc(100svh - var(--top-h)); --chart-h: clamp(8rem, 30vh, 20rem); }
@media (min-width: 72rem) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-16); }
  .hero .notice { grid-column: 1 / -1; margin-top: 0; }
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-8); }
.cta .btn { height: var(--bar-h); padding: 0 var(--s-8); font-size: var(--t-18); }

/* The button that starts the wizard is always on screen: in the top bar, or along the bottom on a phone. */
.top .btn.cta-top { height: var(--ctl-h); font-size: var(--t-16); }
body[data-view="build"] .top .cta-top, body[data-view="plan"] .top .cta-top, body[data-view="build"] a.build-bar, body[data-view="plan"] a.build-bar { display: none; }
@media (max-width: 40rem) { .hero { padding-bottom: calc(var(--bar-h) + var(--s-8)); --chart-h: clamp(6rem, 20vh, 12rem); } .hero .cta { display: none; } .top .btn.cta-top { display: none; } }
@media (min-width: 40.0625rem) { body a.build-bar { display: none; } }

/* ---------------------------------------------------------------- wizard */
body:not([data-view="build"]) .wizard { display: none; }
/* The wizard starts at the top of the screen and keeps its place: nothing moves when the step changes. */
body[data-view="build"] main { display: flex; flex-direction: column; }
.wizard { --ctl-h: 3rem; width: 100%; margin: 0 auto; padding: var(--s-10) 0; display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 62rem) { .wizard { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--s-16); } }
.wiz-side h1 { font-size: var(--t-36); margin: var(--s-3) 0 var(--s-2); outline: 0; }
.wiz-sub { color: var(--ink-2); font-size: var(--t-16); }
/* Room for two lines on every step, so a longer sentence does not push the form down. */
.wiz-why { color: var(--ink-2); font-size: var(--t-18); margin-top: var(--s-6); max-width: 28rem; min-height: calc(var(--lh-body) * 2em); text-wrap: pretty; }
.wiz-sum { display: none; margin-top: var(--s-10); padding-top: var(--s-5); border-top: var(--hair) solid var(--line); font-size: var(--t-16); }
@media (min-width: 62rem) { .wiz-sum { display: block; } }
.wiz-sum h2 { font-size: var(--t-16); font-weight: var(--w-med); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.wiz-sum p { color: var(--ink-2); }
.wiz-sum dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); }
.wiz-sum dt { font-weight: var(--w-med); }
.wiz-sum dd { color: var(--ink-2); }
@media (max-width: 40rem) {
  .wizard { padding: var(--s-6) 0 var(--s-8); }
  .wiz-side h1 { font-size: var(--t-28); }
  .wiz-why { font-size: var(--t-16); margin-top: var(--s-3); }
}
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); font-size: var(--t-14); color: var(--ink-2); }
.steps li { border-top: var(--ring) solid var(--line-2); padding-top: var(--s-2); white-space: nowrap; }
.steps li[data-on] { border-color: var(--ink); color: var(--ink-2); }
.steps li[aria-current] { color: var(--ink); font-weight: var(--w-med); }
.steps .n { color: var(--accent-ink); margin-right: var(--s-1); font-weight: var(--w-reg); }
h1 { font-size: var(--t-hero); font-weight: var(--w-med); line-height: var(--lh-tight); letter-spacing: var(--track-tight); margin: var(--s-4) 0 var(--s-5); text-wrap: balance; }
.lede { font-size: var(--t-22); line-height: var(--lh-head); color: var(--ink); max-width: 30rem; text-wrap: pretty; }

/* ---------------------------------------------------------------- intensity chart */
.chart { margin-top: 0; }
.chart figcaption { font-size: var(--t-16); color: var(--ink-2); margin-top: var(--s-3); }
.pm { display: flex; align-items: stretch; gap: var(--s-1); height: var(--chart-h); border-bottom: var(--hair) solid var(--line-2); }
.pm li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.pm li::after { content: ""; order: 2; width: 100%; height: calc((var(--h) - 55) * 1.95%); border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--ph-1); }
.pm li[data-ph="2"]::after { background: var(--ph-2); }
.pm li[data-ph="3"]::after { background: var(--ph-3); }
.pm li[data-ph="4"]::after { background: var(--ph-4); }
.pm li[data-taper]::after { background: repeating-linear-gradient(135deg, var(--ph-3) 0 var(--s-1), transparent var(--s-1) var(--s-2)); border: var(--hair) solid var(--ph-3); border-bottom: 0; }
.pm b { order: 1; font-size: var(--t-14); font-weight: var(--w-reg); color: var(--ink-2); margin-bottom: var(--s-1); white-space: nowrap; }
.pm span { order: 3; position: absolute; top: 100%; margin-top: var(--s-1); font-size: var(--t-14); color: var(--ink-2); }
.pm-key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-8); font-size: var(--t-16); color: var(--ink-2); }
.pm-key li { display: inline-flex; align-items: center; gap: var(--s-2); }
.pm-key li::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--ph-1); }
.pm-key li[data-ph="2"]::before { background: var(--ph-2); }
.pm-key li[data-ph="3"]::before { background: var(--ph-3); }
.pm-key li[data-ph="4"]::before { background: var(--ph-4); }
.pm-key b { font-weight: var(--w-med); color: var(--ink); }
@media (max-width: 40rem) { .pm b { display: none; } #ps-map .pm { height: var(--chart-h-sm); } }

/* ---------------------------------------------------------------- form */
.form { background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow); display: grid; gap: var(--s-6); }
/* Every step is laid out in the same place and only the open one shows, so the card always has the
   height of the tallest step and the buttons under it never move. */
.form fieldset { display: grid; gap: var(--s-4); align-content: start; grid-area: 2 / 1; }
.form fieldset[hidden] { display: grid !important; visibility: hidden; }
.form legend { float: left; width: 100%; font-size: var(--t-18); font-weight: var(--w-med); letter-spacing: var(--track-head); }
.form legend + * { clear: both; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.field { display: grid; gap: var(--s-1); min-width: 0; align-content: start; }
.lab { font-size: var(--t-16); color: var(--ink-2); }
.lab em { font-style: normal; color: var(--ink-2); }
.inp { display: flex; align-items: center; height: var(--ctl-h); border: var(--hair) solid var(--line-2); border-radius: var(--r-md); background: var(--surface); padding: 0 var(--s-3); gap: var(--s-1); min-width: 0; }
.inp:focus-within { border-color: var(--ink); box-shadow: 0 0 0 var(--hair) var(--ink); }
.inp input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: none; padding: 0; font: var(--w-reg) var(--t-16)/1 var(--mono); font-variant-numeric: tabular-nums; }
.inp input::placeholder { color: var(--ghost); opacity: 1; }
.inp i { font-style: normal; font-size: var(--t-14); color: var(--ink-2); flex: none; }
.inp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.inp-pair .inp { padding: 0 var(--s-2); }
.inp[data-bad] { border-color: var(--bad); box-shadow: 0 0 0 var(--hair) var(--bad); }

/* A row of choices. Each takes an equal share while the words fit; when they do not, the row wraps
   onto a second line, so no label can ever run outside the bar. */
.seg { display: flex; flex-wrap: wrap; min-height: var(--ctl-h); padding: var(--s-1); gap: var(--s-1); background: var(--surface-2); border-radius: var(--r-md); }
.seg label { position: relative; display: grid; flex: 1 1 0; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: calc(var(--ctl-h) - var(--s-2)); padding: 0 var(--s-2); border-radius: var(--r-sm); font-size: var(--t-16); color: var(--ink-2); white-space: nowrap; }
.seg input:checked + span { background: var(--surface); color: var(--ink); font-weight: var(--w-med); box-shadow: 0 0 0 var(--hair) var(--line-2); }
.seg input:focus-visible + span { outline: var(--ring) solid var(--accent); outline-offset: var(--hair); }
/* Five or more choices: three to a line. Four on a phone: two to a line. */
.seg.wrap label { flex-basis: 30%; }
@media (max-width: 30rem) { .seg.four label { flex-basis: 40%; } }
.seg[data-bad] { box-shadow: 0 0 0 var(--hair) var(--bad); }
/* A choice that needs a sentence: one card per option, the name and what it means. */
.cards { display: grid; gap: var(--s-2); }
.cards label { position: relative; display: grid; cursor: pointer; }
.cards input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cards span { display: grid; gap: var(--hair); padding: var(--s-2) var(--s-4); border: var(--hair) solid var(--line-2); border-radius: var(--r-md); }
.cards b { font-size: var(--t-16); font-weight: var(--w-med); }
.cards small { font-size: var(--t-14); color: var(--ink-2); }
.cards input:checked + span { border-color: var(--ink); background: var(--surface-2); box-shadow: 0 0 0 var(--hair) var(--ink); }
.cards input:focus-visible + span { outline: var(--ring) solid var(--accent); outline-offset: var(--hair); }

.lifts { display: grid; gap: var(--s-2); }
.lift { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; align-items: center; gap: var(--s-2); }
.hint { font-size: var(--t-16); color: var(--ink-2); margin-top: var(--s-1); }
@media (max-width: 26rem) { .steps .n { display: none; } .seg span { padding: 0 var(--s-1); font-size: var(--t-14); } }

.err { background: var(--bad-bg); color: var(--bad); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--t-16); }
/* Back and Continue stay within reach while the step scrolls. */
.form-go { display: flex; gap: var(--s-2); position: sticky; bottom: 0; background: var(--surface); padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border-top: var(--hair) solid var(--line); }
.form-go .primary { flex: 1; }
/* Cancel and Back take the same room, so Continue does not shift sideways between steps. */
.form-go .quiet { min-width: var(--s-24); }
/* On a screen with the room for it (two columns, or one column on a tall screen) the wizard is exactly the
   screen under the top bar on every step: the card reaches the bottom, the buttons sit there, and a step
   longer than the screen scrolls inside the card. Phones keep the page scroll and the buttons at the bottom. */
@media (min-height: 48rem), (min-width: 62rem) and (min-height: 36rem) {
  body[data-view="build"] main { height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h)); }
  .wizard { flex: 1; min-height: 0; padding: var(--s-4) 0; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
  .form { min-height: 0; gap: var(--s-4); grid-template-rows: auto minmax(0, 1fr); }
  .form fieldset { gap: var(--s-3); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1); margin: calc(var(--s-1) * -1); }
}
@media (min-width: 62rem) and (min-height: 36rem) {
  .wizard { grid-template-rows: minmax(0, 1fr); }
  .wiz-side { align-self: start; padding-top: var(--s-4); }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--ctl-h); padding: 0 var(--s-4); border: var(--hair) solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--t-16); font-weight: var(--w-med); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--btn); color: var(--on-btn); border-color: var(--btn); height: var(--s-12); font-size: var(--t-16); }
.btn.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.quiet { border-color: transparent; background: none; color: var(--ink-2); height: var(--s-12); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------------------------------------------------------------- plan */
.plan { padding: var(--s-10) 0 var(--s-16); }
.plan-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-8); }
.plan-h h1 { font-size: var(--t-36); font-weight: var(--w-med); letter-spacing: var(--track-tight); line-height: var(--lh-tight); margin-top: var(--s-2); outline: 0; }
.plan-sub { color: var(--ink-2); font-size: var(--t-16); margin-top: var(--s-2); }
.plan-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.notice { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--note-bg); color: var(--ink); font-size: var(--t-16); overflow-wrap: anywhere; }
.notice[data-kind="bad"] { background: var(--bad-bg); color: var(--bad); }

.ps { margin-top: var(--s-12); }
.ps-h { font-size: var(--t-16); font-weight: var(--w-med); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink); padding-bottom: var(--s-3); border-bottom: var(--hair) solid var(--line); margin-bottom: var(--s-5); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-6); }
@media (min-width: 40rem) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; gap: var(--s-1); align-content: start; min-width: 0; }
.kpi .k { font-size: var(--t-16); color: var(--ink-2); }
.kpi .v { font-size: var(--t-28); font-weight: var(--w-med); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.kpi .v small { font-size: var(--t-14); font-weight: var(--w-reg); color: var(--ink-2); margin-left: var(--s-1); letter-spacing: 0; }
.kpi .s { font-size: var(--t-16); color: var(--ink-2); }
.kpi.gl .v { color: var(--accent-ink); }
.meter { display: block; height: var(--s-1); border-radius: var(--r-full); background: var(--surface-2); margin-top: var(--s-1); overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--accent); border-radius: var(--r-full); }
.spec { margin-top: var(--s-6); font-size: var(--t-16); color: var(--ink-2); }
.ps .fine { margin-top: var(--s-3); max-width: 44rem; }
#ps-map .pm { max-width: 44rem; }
.map { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 62rem) { .map { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-12); } }
.why h3 { font-size: var(--t-16); font-weight: var(--w-med); margin-bottom: var(--s-3); }
.why dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-16); }
.why dt { font-weight: var(--w-med); }
.why dd { color: var(--ink-2); }

/* week picker */
.wknav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-bottom: var(--s-6); }
.wkb { position: relative; min-width: var(--ctl-h); height: var(--ctl-h); padding: 0 var(--s-2); border: var(--hair) solid var(--line); border-radius: var(--r-md); background: var(--surface); font: var(--w-reg) var(--t-16)/1 var(--mono); color: var(--ink-2); cursor: pointer; }
.wkb::after { content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: var(--s-1); height: var(--ring); border-radius: var(--r-full); background: var(--ph-1); }
.wkb[data-ph="2"]::after { background: var(--ph-2); }
.wkb[data-ph="3"]::after { background: var(--ph-3); }
.wkb[data-ph="4"]::after { background: var(--ph-4); }
.wkb:hover { border-color: var(--ink-2); color: var(--ink); }
.wkb[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); font-weight: var(--w-med); }
.wkb[data-lock] { color: var(--ink-2); border-style: dashed; }
.wkb[data-lock][aria-pressed="true"] { color: var(--on-btn); border-style: solid; }
.wknav .step { margin-left: auto; display: flex; gap: var(--s-1); }

.wk { display: none; }
.wk.on { display: block; }
.wk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.wk-n { font-size: var(--t-28); font-weight: var(--w-med); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.ph { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-16); font-weight: var(--w-med); }
.ph::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--ph-1); }
.wk[data-ph="2"] .ph::before { background: var(--ph-2); }
.wk[data-ph="3"] .ph::before { background: var(--ph-3); }
.wk[data-ph="4"] .ph::before { background: var(--ph-4); }
.wk-m { font-size: var(--t-16); color: var(--ink-2); }
.wk-i { color: var(--ink-2); margin-top: var(--s-2); max-width: 44rem; }
.days { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 70rem) { .days { grid-template-columns: 1fr 1fr; } }
.day { background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5) var(--s-2); min-width: 0; }
/* One header on every card at every width: the day and its focus, the length under it, the tick top right. */
.day-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-4); padding-bottom: var(--s-3); }
.day-t { min-width: 0; }
.day-h h4 { display: inline; font-size: var(--t-16); font-weight: var(--w-med); }
.day-h .focus { font-size: var(--t-16); font-weight: var(--w-med); }
.day-h .len { display: block; font-size: var(--t-14); color: var(--ink-2); }
.done { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--s-6); font-size: var(--t-16); color: var(--ink-2); cursor: pointer; }
.done input { width: var(--s-4); height: var(--s-4); accent-color: var(--ok); margin: 0; }
.day[data-done] { border-color: var(--ok); }

.lt { width: 100%; border-collapse: collapse; font-size: var(--t-16); }
.lt th, .lt td { text-align: left; padding: var(--s-3) var(--s-2); border-top: var(--hair) solid var(--line); vertical-align: top; }
.lt th:first-child, .lt td:first-child { padding-left: 0; }
.lt th:last-child, .lt td:last-child { padding-right: 0; text-align: right; }
.lt thead th { font-size: var(--t-14); font-weight: var(--w-reg); color: var(--ink-2); border-top: 0; padding-top: 0; white-space: nowrap; }
.lt tbody th { font-weight: var(--w-reg); }
.lt tr.main th { font-weight: var(--w-med); }
.lt td.n { white-space: nowrap; font-size: var(--t-16); }
.lt .ld b { font-weight: var(--w-med); font-size: var(--t-16); }
/* Every session table shares one set of column widths, so the figures line up from card to card. */
.day .lt { table-layout: fixed; }
.day .lt thead th:nth-child(2) { width: var(--col-sets); }
.day .lt thead th:nth-child(3) { width: var(--col-load); }
.day .lt thead th:nth-child(4) { width: var(--col-rest); }
/* Test week: the lift is named once, its steps sit under it. */
.lt tr.grp th { font-weight: var(--w-med); padding: var(--s-4) 0 var(--s-1); text-align: left; }
.lt tr.step th, .lt tr.step td { border-top: 0; padding-top: var(--s-1); padding-bottom: var(--s-1); }
.lt tr.step th { color: var(--ink-2); font-weight: var(--w-reg); }
.lt tr.step.main th { color: var(--ink); font-weight: var(--w-med); }
.lt tr.step:has(+ tr.grp) > *, .lt tr.step:last-child > * { padding-bottom: var(--s-3); }
.feel { font-family: var(--font); color: var(--ink-2); white-space: normal; }
.tag { display: inline-block; font-size: var(--t-14); font-weight: var(--w-reg); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-full); padding: 0 var(--s-2); margin-left: var(--s-1); white-space: nowrap; }
/* Phones: the exercise gets its own line, the three figures sit under it. */
@media (max-width: 34rem) {
  .day { padding: var(--s-4) var(--s-4) var(--s-1); }
  .lt:not(.wide) thead { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); }
  .lt:not(.wide) tbody tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--s-5); align-items: baseline; padding: var(--s-3) 0; border-top: var(--hair) solid var(--line); }
  .lt:not(.wide) tbody th { grid-column: 1 / -1; padding: 0 0 var(--s-1); border: 0; }
  .lt:not(.wide) tbody td { padding: 0; border: 0; }
  /* A long count ("2 × 30 s each") may take two lines rather than push the rest time off the card. */
  .lt:not(.wide) tbody th + td { white-space: normal; }
  .lt:not(.wide) tbody td.none { display: none; }
  .lt:not(.wide) tbody td:last-child::before { content: "rest "; font-family: var(--font); font-size: var(--t-14); color: var(--ink-2); }
  .lt:not(.wide) .feel { white-space: normal; }
  .lt:not(.wide) tbody tr.grp { padding-bottom: 0; }
  .lt:not(.wide) tbody tr.step { border-top: 0; padding: var(--s-1) 0 var(--s-2); }
  .lt:not(.wide) tbody tr.step th { padding: 0 0 var(--s-1); }
  .lt:not(.wide) tbody tr.step td { padding: 0; }
  .wknav { display: grid; grid-template-columns: repeat(6, 1fr); }
  .wknav .step { grid-column: 1 / -1; margin: var(--s-1) 0 0; }
  .wknav .step .btn { flex: 1; }
  .wkb { min-width: 0; }
}
/* The narrowest phones: a little less padding so the longest row (sets, load, rest) stays inside the card. */
@media (max-width: 23.5rem) {
  .day { padding-left: var(--s-3); padding-right: var(--s-3); }
  .lt:not(.wide) tbody tr { column-gap: var(--s-3); }
}
/* The method table is words and ranges, not a column of figures: it reads in the text face. */
.lt.wide .n { font-family: var(--font); white-space: normal; }
.lt.wide caption { text-align: left; font-size: var(--t-16); color: var(--ink-2); padding-bottom: var(--s-3); }

/* locked week */
.lock-days { margin-top: var(--s-6); border: var(--hair) dashed var(--line-2); border-radius: var(--r-lg); padding: var(--s-2) var(--s-5); }
.lock-days li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-top: var(--hair) solid var(--line); color: var(--ink-2); font-size: var(--t-16); }
.lock-days li:first-child { border-top: 0; }
.lock-days b { font-weight: var(--w-med); color: var(--ink); min-width: 3.5rem; }
.lock-days li::after { content: "Locked"; margin-left: auto; font-size: var(--t-14); color: var(--ink-2); }

/* rules */
.rules { display: grid; gap: var(--s-8); }
@media (min-width: 58rem) { .rules { grid-template-columns: 3fr 2fr; gap: var(--s-12); } }
.rules ol { counter-reset: r; display: grid; gap: var(--s-3); }
.rules ol li { counter-increment: r; display: grid; grid-template-columns: var(--s-6) 1fr; color: var(--ink-2); }
.rules ol li::before { content: counter(r); font: var(--w-reg) var(--t-16)/var(--lh-body) var(--mono); color: var(--accent-ink); padding-top: 0.15em; }
.rules dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-16); align-content: start; }
.rules dt { font-weight: var(--w-med); }
.rules dd { color: var(--ink-2); }

/* ---------------------------------------------------------------- the small "i" notes */
/* The note opens under its line, across the width of the block it sits in, so it can never run off a phone. */
.form fieldset, .kpis, .wk-h, .track-setup { position: relative; }
.info-wrap { display: inline; }
.info { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); margin: calc(var(--s-3) * -1) calc(var(--s-2) * -1) calc(var(--s-3) * -1) calc(var(--s-1) * -1); padding: 0; border: 0; background: none; vertical-align: middle; cursor: pointer; color: var(--ink-2); font: var(--w-med) var(--t-14)/1 var(--font); letter-spacing: 0; text-transform: none; }
/* The ring sits behind the letter, so the letter stays readable when the ring fills. */
.info::before { content: ""; position: absolute; z-index: -1; inset: var(--s-3); border: var(--hair) solid var(--ink-2); border-radius: var(--r-full); }
.info:hover, .info[aria-expanded="true"] { color: var(--ink); }
.info[aria-expanded="true"]::before { background: var(--surface-2); border-color: var(--ink); }
.tip { display: none; position: absolute; z-index: 6; left: 0; right: 0; max-width: 26rem; margin-top: var(--s-8); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ink); color: var(--bg); font: var(--w-reg) var(--t-16)/var(--lh-body) var(--font); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: var(--shadow); }
.info:hover + .tip, .info:focus-visible + .tip, .info[aria-expanded="true"] + .tip { display: block; }

/* ---------------------------------------------------------------- tracker */
.track-setup { display: grid; gap: var(--s-4); max-width: 34rem; }
.track-setup p { color: var(--ink-2); font-size: var(--t-16); }
.track-setup input[type="date"] { font-family: var(--font); }
.track-run { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 62rem) { .track-run { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); } }
.today { display: grid; gap: var(--s-2); justify-items: start; background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.today h3 { font-size: var(--t-28); font-weight: var(--w-med); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.today p { font-size: var(--t-16); color: var(--ink-2); }
.today-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.today .track-sum { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hair) solid var(--line); width: 100%; color: var(--ink); }
.today .btn.quiet { height: var(--ctl-h); padding: 0; }
.checkin { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-3); padding-top: var(--s-4); border-top: var(--hair) solid var(--line); }
.checkin h3 { font-size: var(--t-22); }
.checkin .field { width: 100%; }
.checkin-sum { color: var(--ink); }
.cal-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cal-h h3 { font-size: var(--t-18); font-weight: var(--w-med); }
.cal-h .btn { width: var(--ctl-h); padding: 0; font-size: var(--t-22); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.cal-wd { text-align: center; font-size: var(--t-14); color: var(--ink-2); padding-bottom: var(--s-1); }
.cal-d { display: grid; place-items: center; height: var(--ctl-h); padding: 0; border: var(--hair) solid transparent; border-radius: var(--r-md); background: none; font: var(--w-reg) var(--t-16)/1 var(--mono); color: var(--ink-2); }
button.cal-d { cursor: pointer; }
.cal-d[data-s="plan"] { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.cal-d[data-s="plan"][data-test] { border-color: var(--ink); font-weight: var(--w-med); }
.cal-d[data-s="done"] { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: var(--w-med); }
.cal-d[data-today] { outline: var(--ring) solid var(--accent); outline-offset: var(--hair); }
.cal-key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-4); font-size: var(--t-16); color: var(--ink-2); }
.cal-key li { display: inline-flex; align-items: center; gap: var(--s-2); }
.cal-key i { width: var(--s-4); height: var(--s-4); border-radius: var(--r-sm); border: var(--hair) solid var(--line-2); background: var(--surface); }
.cal-key li[data-s="done"] i { background: var(--ok); border-color: var(--ok); }
.cal-key li[data-s="test"] i { border-color: var(--ink); }

/* ---------------------------------------------------------------- add to phone */
.sheet { width: min(calc(100% - 2 * var(--s-4)), 30rem); padding: var(--s-6); border: var(--hair) solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sheet::backdrop { background: var(--veil); }
.sheet h2 { font-size: var(--t-22); font-weight: var(--w-med); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.sheet p { color: var(--ink-2); margin-top: var(--s-3); font-size: var(--t-16); }
.sheet ol { margin-top: var(--s-4); display: grid; gap: var(--s-2); counter-reset: s; font-size: var(--t-16); }
.sheet ol li { counter-increment: s; position: relative; padding-left: var(--s-6); }
.sheet ol li::before { content: counter(s); position: absolute; left: 0; font-family: var(--mono); color: var(--accent-ink); }
.sheet b { font-weight: var(--w-med); }
.supps { list-style: none; margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.supps li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--hair) solid var(--line); }
.supps p { margin-top: 0; }
.supps .btn { justify-self: start; }
.plan-end { margin-top: var(--s-8); }
/* Fuel has five or six figures: on a wide screen they share one row. */
@media (min-width: 58rem) { #ps-fuel .kpis { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
/* Cardio has one or two figures: each takes the room there is, so its words stay on one or two lines. */
#ps-cardio .kpis { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.sheet form { margin-top: var(--s-6); display: grid; }
.copyrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); margin-top: var(--s-3); }
.copyrow input { font-size: var(--t-16); }
/* Only the steps for the device in hand are shown. */
.sheet[data-os="ios"] [data-os]:not([data-os="ios"]), .sheet[data-os="android"] [data-os]:not([data-os="android"]), .sheet[data-os="desk"] [data-os]:not([data-os="desk"]) { display: none; }
/* Opened from the home-screen icon it is an app about the schedule: three tabs, one on screen at a time.
   Today is the card and the calendar, Weeks is the sessions, Plan is everything else. */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border-top: var(--hair) solid var(--line-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabs button { height: var(--bar-h); border: 0; border-top: var(--ring) solid transparent; background: none; font: var(--w-reg) var(--t-16)/1 var(--font); color: var(--ink-2); cursor: pointer; }
.tabs button[aria-pressed="true"] { color: var(--ink); font-weight: var(--w-med); border-top-color: var(--accent); }
.tabs button:focus-visible { outline: var(--ring) solid var(--accent); outline-offset: calc(-1 * var(--ring)); }
body[data-app][data-view="plan"] { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
body[data-app][data-view="plan"] :is(.foot, .top-nav) { display: none; }
body[data-app][data-tab="today"] :is(.plan-h, .notice, #ps-numbers, #ps-map, #ps-fuel, #ps-cardio, #ps-weeks, #ps-rules, .plan-end),
body[data-app][data-tab="weeks"] :is(.plan-h, .notice, #ps-numbers, #ps-map, #ps-fuel, #ps-cardio, #track, #ps-rules, .plan-end),
body[data-app][data-tab="plan"] :is(#track, #ps-weeks) { display: none; }
body[data-app] :is(#track, #ps-weeks) { margin-top: 0; }
/* My plans: one row per plan, the whole row is the link. */
.plans { list-style: none; margin-top: var(--s-4); display: grid; }
.plans a { display: grid; gap: var(--hair); padding: var(--s-3) 0; border-top: var(--hair) solid var(--line); color: var(--ink); text-decoration: none; }
.plans span { font-size: var(--t-14); color: var(--ink-2); }
/* Under the list: saving with a passkey, when the site has it switched on. */
.sync { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--hair) solid var(--line); }
.sync h3 { font-size: var(--t-18); font-weight: var(--w-med); letter-spacing: var(--track-head); }
.sync-acts { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
/* The one-time offer under the first ticked session. */
.offer { grid-column: 1 / -1; margin-top: 0; display: grid; gap: var(--s-3); }
.offer-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.plans a[aria-current] b::after { content: " · open now"; font-weight: var(--w-reg); color: var(--accent-ink); }

/* ---------------------------------------------------------------- pay */
.pay { margin-top: var(--s-8); background: var(--surface); border: var(--hair) solid var(--ink); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-6); box-shadow: var(--shadow); scroll-margin-top: calc(var(--top-h) + var(--s-4)); }
@media (min-width: 52rem) { .pay { grid-template-columns: 1fr minmax(0, 22rem); gap: var(--s-12); padding: var(--s-8); align-items: center; } }
.pay h2 { font-size: var(--t-22); font-weight: var(--w-med); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.price { margin-top: var(--s-2); color: var(--ink-2); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.price b { font-size: var(--t-36); font-weight: var(--w-med); color: var(--ink); letter-spacing: var(--track-tight); line-height: 1; }
.ticks { margin-top: var(--s-4); display: grid; gap: var(--s-2); font-size: var(--t-16); color: var(--ink-2); }
.ticks li { position: relative; padding-left: var(--s-8); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.25em; width: var(--s-4); height: var(--s-4); background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pay-buttons { display: grid; gap: var(--s-3); min-width: 0; }
.applepay:empty, .paypal:empty { display: none; }
apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: var(--s-12); --apple-pay-button-border-radius: var(--r-md); --apple-pay-button-padding: 0 var(--s-4); --apple-pay-button-box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.or { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-14); color: var(--ink-2); }
.or::before, .or::after { content: ""; flex: 1; height: var(--hair); background: var(--line); }
.pay-msg { font-size: var(--t-16); color: var(--ink-2); min-height: 1.5em; }
.pay-msg[data-kind="bad"] { color: var(--bad); }
.pay-msg:empty { display: none; }

.unlock-bar, .build-bar { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); z-index: 15; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-5); border-radius: var(--r-lg); background: var(--btn); color: var(--on-btn); text-decoration: none; font-weight: var(--w-med); box-shadow: var(--shadow); }
@media (min-width: 52rem) { .unlock-bar { display: none !important; } }

/* ---------------------------------------------------------------- bands */
.band { padding: var(--s-16) 0; border-top: var(--hair) solid var(--line); }
.band > h2 { font-size: var(--t-36); font-weight: var(--w-med); letter-spacing: var(--track-tight); line-height: var(--lh-tight); }
/* What you get: three things. Each is a picture of the real thing, a name and one sentence. */
.gets { display: grid; gap: var(--s-10); margin-top: var(--s-10); }
@media (min-width: 62rem) { .gets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
.gets > li { display: grid; gap: var(--s-3); align-content: start; }
.stage { display: grid; place-items: center; min-height: 22rem; padding: var(--s-6); margin-bottom: var(--s-3); border-radius: var(--r-lg); background: var(--surface-2); }
.mini { display: grid; gap: var(--s-2); width: 100%; max-width: 20rem; padding: var(--s-5); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-lg); }
.mini-h { font-size: var(--t-14); font-weight: var(--w-med); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--accent-ink); }
.mini-r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); border-top: var(--hair) solid var(--line); font-size: var(--t-16); }
.mini-r b { font-weight: var(--w-med); white-space: nowrap; }
.score { font-size: var(--t-hero); font-weight: var(--w-med); line-height: 1; letter-spacing: var(--track-head); color: var(--accent-ink); }
.mini .meter { margin-bottom: var(--s-2); }
.mini-t { font-size: var(--t-28); font-weight: var(--w-med); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.mini-s { font-size: var(--t-16); color: var(--ink-2); }
.mini-btn { display: grid; place-items: center; height: var(--ctl-h); margin: var(--s-2) 0; border-radius: var(--r-md); background: var(--btn); color: var(--on-btn); font-size: var(--t-16); font-weight: var(--w-med); }
.get-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.get-week .cal-d { height: var(--s-8); border-radius: var(--r-sm); font-family: var(--font); font-size: var(--t-14); }
.gets h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-28); font-weight: var(--w-med); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.get-n { display: inline-grid; place-items: center; flex: none; width: var(--s-8); height: var(--s-8); border-radius: var(--r-full); background: var(--logo-bg); color: var(--logo-ink); font-size: var(--t-16); font-weight: var(--w-med); }
.gets p { font-size: var(--t-18); color: var(--ink-2); max-width: 26rem; }
.faq table, .faq dl { margin: 0 0 var(--s-5); }
.formulas { display: grid; gap: var(--s-5); }
.formulas div { border-top: var(--hair) solid var(--line); padding-top: var(--s-4); }
.formulas dt { font-size: var(--t-16); color: var(--ink-2); }
.formulas dd { font-size: var(--t-16); margin-top: var(--s-1); overflow-wrap: anywhere; }
@media (min-width: 62rem) {
  body[data-view="home"] #faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-12); align-items: start; }
  #faq .faq { margin-top: 0; }
}
.faq { margin-top: var(--s-8); max-width: 48rem; border-bottom: var(--hair) solid var(--line); }
.faq details { border-top: var(--hair) solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-5) var(--s-8) var(--s-5) 0; font-size: var(--t-18); font-weight: var(--w-med); letter-spacing: var(--track-head); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--s-1); top: var(--s-4); font: var(--w-reg) var(--t-22)/1.2 var(--mono); color: var(--ink-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--ink-2); padding: 0 var(--s-8) var(--s-5) 0; }

/* The footer is a band across the whole page, in the inverse of the page colours. */
.foot { background: var(--foot-bg); color: var(--foot-ink); }
.foot-in { width: min(calc(100% - 2 * var(--gutter)), calc(var(--page) - 2 * var(--gutter))); margin: 0 auto; padding: var(--s-12) 0 var(--s-8); display: grid; gap: var(--s-8); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-12); }
.foot-line { font-size: var(--t-36); font-weight: var(--w-med); letter-spacing: var(--track-tight); line-height: var(--lh-tight); max-width: 34rem; text-wrap: balance; }
.foot .btn { background: var(--foot-ink); color: var(--foot-bg); border-color: var(--foot-ink); height: var(--s-12); padding: 0 var(--s-6); }
.foot-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-12); padding-top: var(--s-6); border-top: var(--hair) solid var(--foot-line); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-8); font-size: var(--t-16); }
.foot-nav a { text-decoration: none; padding: var(--s-3) 0; }
.foot-nav a:hover { text-decoration: underline; }
.foot-legal { font-size: var(--t-14); color: var(--foot-ink-2); }
/* Inside the wizard or a plan the closing line and its button would only repeat the screen. */
body[data-view="build"] .foot-top, body[data-view="plan"] .foot-top { display: none; }
body[data-view="build"] .foot-mid, body[data-view="plan"] .foot-mid { padding-top: 0; border-top: 0; }
/* The fixed bars step aside while the footer is on screen: it has its own button, and nothing may sit on top of it. */
body[data-foot] a.build-bar, body[data-foot] a.unlock-bar { display: none; }

/* text pages */
.doc { max-width: 44rem; padding: var(--s-12) 0 var(--s-16); }
.doc h1 { font-size: var(--t-36); }
.doc h2 { font-size: var(--t-18); font-weight: var(--w-med); margin-top: var(--s-8); }
.doc p, .doc li { color: var(--ink-2); margin-top: var(--s-3); }
.doc ul { list-style: disc; padding-left: var(--s-5); }

@media (max-width: 40rem) {
  .foot-line { font-size: var(--t-28); }
  .top-nav { display: none; }
  .top .icon-btn { margin-left: auto; }
  .plan-h h1, .band > h2 { font-size: var(--t-28); }
  .form { padding: var(--s-5) var(--s-4); }
  .plan-acts .btn { flex: 1; }
}

/* Windows high-contrast mode drops backgrounds and shadows, so the chosen option gets an outline instead. */
@media (forced-colors: active) {
  .seg input:checked + span, .cards input:checked + span, .wkb[aria-pressed="true"], .tabs button[aria-pressed="true"], .steps li[aria-current] { outline: var(--ring) solid Highlight; outline-offset: calc(-1 * var(--ring)); }
  .pm li::after, .meter i { forced-color-adjust: none; }
}

/* ---------------------------------------------------------------- print */
.print-only { display: none; }
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --ink: #000; --ink-2: #222; --ghost: #555; --line: #bbb; --line-2: #888; --accent-ink: #000; --accent: #000; --ph-1: #bbb; --ph-2: #888; --ph-3: #555; --ph-4: #000; --ok: #000; --on-ok: #fff; --shadow: none; }
  :root { --chart-h: 4.75rem; --lh-body: 1.35; }
  /* Paper has its own scale: one root size shrinks every type size and every space together. */
  html { font-size: 9.2pt; }
  @page { margin: 9mm 11mm; }
  body { display: block; min-height: 0; }
  .top, .foot, .plan-acts, .wknav, .pay, .notice, .skip, .wizard, .plan-sub, .sheet, .plan-end, .tabs, .track, .info-wrap, #plan-kicker, [data-home], .lt thead, .done input { display: none !important; }
  .print-only { display: block; }
  main { max-width: none; padding: 0; }
  .plan { padding: 0; }
  .plan-h { align-items: baseline; }
  .plan-h h1 { font-size: var(--t-28); margin: 0; }
  /* The summary: numbers, block, fuel. Tight, and never cut in half. */
  .ps { margin-top: var(--s-3); }
  #ps-rules { margin-top: var(--s-5); }
  .ps-h { padding-bottom: var(--s-1); margin-bottom: var(--s-3); }
  #ps-numbers, #ps-map, #ps-fuel, #ps-cardio, .rules li { break-inside: avoid; }
  /* Fuel is one row on paper however many figures it has. */
  #ps-fuel .kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); }
  .kpi { gap: 0; }
  .kpi .v { font-size: var(--t-18); }
  .spec { margin-top: var(--s-3); }
  .map { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); }
  .pm-key { margin-top: var(--s-5); }
  /* On paper the instructions come before the weeks, and the weeks follow straight on. */
  #plan-body { display: flex; flex-direction: column; }
  #ps-rules { order: 1; }
  #ps-weeks { order: 2; }
  /* The weeks flow one after another, about three to a page. A week is never split across pages. */
  #ps-weeks .ps-h::after { content: "  ·  each row: exercise, sets × reps, weight, rest"; text-transform: none; letter-spacing: 0; font-weight: var(--w-reg); }
  .wk { display: block !important; break-inside: avoid; margin-top: var(--s-2); padding-top: var(--s-2); border-top: var(--hair) solid var(--line-2); }
  .wk:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
  .wk.lock { display: none !important; }
  .wk-n { font-size: var(--t-18); }
  /* The phase's coaching line is in "How to run it"; repeating it under all twelve weeks costs a page. */
  .wk-i { display: none; }
  .days { grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-6); margin-top: var(--s-1); }
  /* No boxes on paper: a rule under each day's name does the job in less room. */
  .day { break-inside: avoid; box-shadow: none; border: 0; border-radius: 0; padding: 0; background: none; }
  .day-h { padding-bottom: 0; border-bottom: var(--hair) solid var(--line-2); }
  .day-t { display: flex; align-items: baseline; gap: var(--s-2); }
  .day-h .len { margin-left: auto; font-size: var(--t-16); }
  .day .lt { table-layout: auto; line-height: 1.3; }
  .lt th, .lt td { padding: calc(var(--s-1) * 0.6) var(--s-1); }
  .lt tbody tr:first-child th, .lt tbody tr:first-child td { border-top: 0; }
  /* Figures print in the text face (still tabular): narrower, so exercise names stay on one line. */
  .day .lt td.n { width: 1%; white-space: nowrap; padding-left: var(--s-3); font-family: var(--font); font-size: var(--t-16); }
  .lt .ld b { font-family: var(--font); }
  .day .lt .feel { white-space: nowrap; }
  .lt tr.grp th { padding: var(--s-2) 0 0; }
  .lt tr.step th, .lt tr.step td { padding-top: 0; padding-bottom: 0; }
  /* A box to tick with a pen: the box alone, so the day's heading stays on one line. */
  .done { min-height: 0; gap: 0; }
  .done-t { display: none; }
  .done::before { content: ""; width: var(--s-3); height: var(--s-3); border: var(--hair) solid var(--ink); }
  /* Page one holds the summary and the instructions: the fitted list prints a size smaller to keep it there. */
  .why dl { font-size: var(--t-14); gap: 0 var(--s-3); }
  .why h3 { margin-bottom: var(--s-1); }
  .rules { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); }
  .rules ol { gap: var(--s-1); }
  .rules dl { gap: var(--s-1) var(--s-4); }
  .ps .fine { margin-top: var(--s-2); max-width: none; }
  .pm, .pm li::after, .meter i, .ph::before, .pm-key li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}