/* Hallmark · shape: Pinned chapter into a store · genre: atmospheric · theme: custom (by request: bolder colour, Apple-style product stage, motion on scroll) · job: buy · draw: 648507
 * hero: Stage, pinned, the bar centred under the head · nav: edge-aligned on night · footer: index columns (a link-in-bio is a hub of links) · imagery: photographs, his own 5, full colour · signature: scroll loads a chrome bar with bumper plates from 45 to 455, the counter climbing with it
 * axes: dark-light/grotesk-expanded/cool · posture: full palette (field night, signal competition red, plate blue and green on the product only) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R3 V5 · weakest: R, the user asked for more motion; every motion is scroll-led or a one-time roll, with a reduced-motion end state and content visible without script */
/* Hallmark · waive 6b · the bar is the centred object, the head sits over it as a product title · his bar is the product on this page */
/* Hallmark · waive 39b · one 84px field, the bench max · the max is the one number this section runs on, set at display size */
/* Hallmark · waive 59 · 64px between stage and strip, one night field · the photo strip continues the night stage of his bar */
/* Hallmark · dismissed 59 · ten sections counts the photo strip, which is a continuation of the stage, not its own beat */
/* Hallmark · dismissed 42 · named index columns in the stamp; Watch and Gear render only once Liam adds handles and codes */
@import url("./tokens.css");
@import url("./base.css");

/* ── shared ─────────────────────────────────────────── */
body { font-stretch: 100%; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
h1, h2 { font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 0.96; }
h3 { font-weight: 700; font-stretch: 100%; letter-spacing: -0.01em; }
.lead { color: var(--color-ink-2); }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
html:not(.js) .js-only { display: none; }
figure { margin: 0; min-width: 0; }

a { color: var(--color-accent-text); text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--color-accent-hover); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.pill:hover { background: var(--color-accent-hover); }
.pill:active { transform: scale(0.98); }
.pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pill:disabled, .pill[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.pill[aria-busy="true"] { cursor: progress; }
.pill--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.pill--ghost { background: transparent; color: var(--color-on-night); border-color: var(--color-on-night-2); }
.pill--ghost:hover { background: var(--color-night-3); }
.pill--ink { background: var(--color-ink); color: var(--color-paper); }
.pill--ink:hover { background: var(--color-ink-2); }

.fill { padding: 0 0.3em; border: 1px dashed var(--color-rule-2); border-radius: 6px; color: var(--color-muted); font-size: var(--text-sm); }

input, textarea { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: 14px; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.4 var(--font-body); outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-micro) var(--ease-out); }
textarea { padding-block: var(--space-sm); min-height: 6rem; resize: vertical; }
input:hover, textarea:hover { border-color: var(--color-ink-2); }
input:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input[aria-invalid], textarea[aria-invalid] { border-color: var(--color-error); }
input:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }

/* Lists roll in from the right; figures rise. Visible without script and under reduced motion. */
.js [data-roll] > li { opacity: 0; transform: translate3d(56px, 0, 0); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-roll].is-in > li { opacity: 1; transform: none; }
.js [data-rise] > div { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-rise].is-in > div { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-roll] > li, .js [data-rise] > div { opacity: 1; transform: none; transition: none; }
}

/* Sections clip their own sideways motion (lists rolling in), without breaking sticky. */
main > section, .stages > li { overflow-x: clip; }

/* ── nav, on night ──────────────────────────────────── */
.nav { position: absolute; inset: 0 0 auto 0; z-index: var(--z-raised); color: var(--color-on-night); }
.notice { margin: 0; padding: var(--space-xs) var(--gutter); background: var(--color-night-2); color: var(--color-on-night-2); font-size: var(--text-sm); text-align: center; }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.nav__name { font: 800 1.375rem/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; color: var(--color-on-night); text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-xl); font-size: var(--text-sm); }
.nav__links a { color: var(--color-on-night-2); text-decoration: none; white-space: nowrap; }
.nav__links a:hover { color: var(--color-on-night); }
.nav__end { display: flex; align-items: center; gap: var(--space-xs); }
.nav__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); color: var(--color-on-night-2); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.nav__icon:hover { color: var(--color-on-night); background: var(--color-night-3); }
.nav__icon:active { transform: scale(0.96); }
.nav__icon:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── the stage: pinned, scroll loads the bar ────────── */
.stage { --p: 0; position: relative; background: var(--color-night); color: var(--color-on-night); }
.stage.is-pinned { height: 460vh; }
.stage__pin { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; padding-block: calc(var(--space-3xl) + var(--space-lg)) var(--space-2xl); overflow: hidden; }
.stage.is-pinned .stage__pin { position: sticky; top: 0; height: 100dvh; min-height: 0; }
.stage__canvas { position: absolute; inset: 0; z-index: 1; }
.stage__canvas canvas { display: block; width: 100%; height: 100%; }
.stage__fallback { display: none; }
html:not(.js) .stage__fallback, .stage.is-flat .stage__fallback { display: block; grid-row: 2; align-self: center; width: min(100% - 2 * var(--gutter), 960px); margin: var(--space-xl) auto; }
.stage__fallback img { width: 100%; border-radius: var(--radius-card); }

.stage__top { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.stage__top h1 { max-width: none; font-size: var(--text-display); color: var(--color-on-night); }
.stage__top .lead { max-width: 34ch; color: var(--color-on-night-2); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); padding-top: var(--space-xs); }
.stage.is-pinned .stage__top { opacity: clamp(0, calc(1 - var(--p) * 9), 1); transform: translate3d(0, calc(var(--p) * -320px), 0); }
.stage.is-scrolled .stage__top { pointer-events: none; }

.stage__count { position: relative; z-index: 2; grid-row: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-xl); }
.stage.is-pinned .stage__count { opacity: clamp(0, calc((var(--p) - 0.05) * 10), 1); transform: translate3d(0, calc((1 - clamp(0, calc((var(--p) - 0.05) * 10), 1)) * 40px), 0); }
.count { margin: 0; display: flex; align-items: baseline; gap: var(--space-xs); font-weight: 800; font-stretch: 112%; letter-spacing: -0.045em; line-height: 0.85; }
.count__num { font-size: clamp(5rem, 13vw, 12rem); font-variant-numeric: tabular-nums; }
.count__unit { font-size: var(--text-2xl); color: var(--color-accent); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.steps { position: relative; list-style: none; margin: 0; padding: 0; min-height: 3.2em; font-size: var(--text-lead); color: var(--color-on-night-2); max-width: 26ch; }
.steps li { position: absolute; inset: auto 0 0 0; }
.js .steps li { inset: auto 0 0 0; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.steps li.is-on { opacity: 1; transform: none; color: var(--color-on-night); }
html:not(.js) .stage__count, .stage.is-flat .stage__count { display: none; }

/* ── the photo strip ────────────────────────────────── */
.strip { background: var(--color-night); padding-block: var(--space-2xl) var(--section-gap-s); overflow: hidden; }
.strip__row { display: flex; gap: var(--space-lg); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.strip__item { height: clamp(300px, 56vh, 600px); aspect-ratio: 3 / 4; border-radius: var(--radius-card); overflow: hidden; background: var(--color-night-2); }
.strip__item--wide { aspect-ratio: 4 / 3; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .strip { overflow-x: auto; }

/* ── the claim: natural, stated large ───────────────── */
.claim { display: grid; gap: var(--space-lg); padding-bottom: var(--space-3xl); }
.claim__head { display: flex; flex-wrap: wrap; column-gap: 0.28em; max-width: none; font-size: clamp(3rem, 7.4vw + 0.5rem, 8rem); line-height: 0.95; }
.claim__line { max-width: 46ch; font-size: var(--text-lead); }
.js .claim__head span { display: inline-block; opacity: 0; transform: translate3d(0, 0.35em, 0); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms); }
.js .claim.is-in .claim__head span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .claim__head span { opacity: 1; transform: none; transition: none; } }

/* ── the numbers ────────────────────────────────────── */
.numbers { padding-block: var(--section-gap-s); }
.score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.score > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-sm); padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); min-width: 0; }
.score > div:first-child { padding-left: 0; border-left: 0; }
.score dt { font-size: var(--text-md); color: var(--color-muted); }
.score dd { margin: 0; white-space: nowrap; }
.score__fig { font-weight: 800; font-stretch: 112%; font-size: clamp(2.75rem, 5vw + 0.5rem, 5.5rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.score > div:first-child .score__fig { color: var(--color-accent); }
.score__unit { font-weight: 800; font-size: var(--text-xl); color: var(--color-muted); }
.score__date { padding-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }

/* ── week one ───────────────────────────────────────── */
.week { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.week__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.week__head { grid-column: 1 / 6; display: grid; gap: var(--space-lg); }
.week__head h2 { font-size: var(--text-section); max-width: 9ch; }
.week__body { grid-column: 7 / 13; display: grid; gap: var(--space-2xl); padding: var(--space-xl); background: var(--color-paper); border-radius: var(--radius-card); }
.max { display: grid; gap: var(--space-xs); padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.max__field { position: relative; display: block; max-width: 18rem; }
.max__field input { min-height: 84px; padding-right: var(--space-2xl); border-radius: 20px; font: 800 var(--text-3xl)/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.max__unit { position: absolute; right: var(--space-lg); top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--color-muted); pointer-events: none; }
html:not(.js) .max { display: none; }

.sheet { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--color-rule); }
.sheet thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.sheet tbody th { font-weight: 700; }
.sheet .r { text-align: right; padding-right: 0; }
.sheet .strong { color: var(--color-accent); font-size: var(--text-lg); }
.signup { display: grid; gap: var(--space-xs); }
.signup label { font-size: var(--text-sm); color: var(--color-ink-2); }
.signup__row { display: flex; gap: var(--space-xs); }
.signup__row input { flex: 1; min-width: 0; border-radius: var(--radius-pill); padding-inline: var(--space-lg); }
.signup__row .pill { min-height: 52px; }

/* ── the program ────────────────────────────────────── */
.program { padding-block: var(--section-gap); }
.program__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: center; }
.program__pic { grid-column: 1 / 7; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; }
.program__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.program__text { grid-column: 8 / 13; display: grid; gap: var(--space-xl); }
.program__text h2 { font-size: var(--text-section); }
.blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.blocks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); row-gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-paper-2); border-radius: 16px; }
.blocks__weeks { grid-column: 2; grid-row: 1; align-self: center; font-size: var(--text-sm); color: var(--color-muted); }
.blocks h3 { grid-row: 1; font-size: var(--text-title); }
.blocks li:nth-child(1) h3 { color: var(--color-plate-45-text); }
.blocks li:nth-child(2) h3 { color: var(--color-plate-25-text); }
.blocks li:nth-child(3) h3 { color: var(--color-accent-text); }
.blocks li > p { grid-column: 1 / -1; color: var(--color-ink-2); }
.facts { display: grid; gap: var(--space-xs); margin: 0; }
.facts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); padding-top: 0.15em; }
.facts dd { margin: 0; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.buy__name { flex: 1 1 12rem; font-weight: 700; font-size: var(--text-title); }
.buy__price .num { font-weight: 800; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }

/* ── meals, on night ────────────────────────────────── */
.meals { padding-block: var(--section-gap); background: var(--color-night); color: var(--color-on-night); }
.meals__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.meals__head h2 { grid-column: 1 / 8; font-size: var(--text-section); }
.meals__head .lead { grid-column: 8 / 13; color: var(--color-on-night-2); }
.toggle { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-night-2); margin-bottom: var(--space-xl); }
.switch { --sel: 0; }
.toggle button { position: relative; z-index: 2; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-on-night-2); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.toggle button:hover { color: var(--color-on-night); }
.toggle button:active { transform: scale(0.98); }
.toggle button[aria-selected="true"] { color: var(--color-ink); }
.toggle button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.toggle__thumb { position: absolute; z-index: 1; top: var(--space-2xs); bottom: var(--space-2xs); left: var(--space-2xs); width: calc(50% - var(--space-2xs)); border-radius: var(--radius-pill); background: var(--color-on-night); transform: translate3d(calc(var(--sel) * 100%), 0, 0); transition: transform var(--dur-long) var(--ease-out); }
html:not(.js) .toggle { display: none; }
.day__label { margin: var(--space-xl) 0 var(--space-md); font-size: var(--text-title); }
.js .day__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.menu li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding: var(--space-lg) var(--space-xl); background: var(--color-night-2); border-radius: 16px; }
.menu__meal { grid-column: 1 / 4; font-weight: 700; color: var(--color-on-night-2); }
.menu__food { grid-column: 4 / 13; font-size: var(--text-lead); font-weight: 700; }
.meals .buy { border-top-color: var(--color-night-3); }
.meals .pill--ink { background: var(--color-on-night); color: var(--color-ink); }
.meals .pill--ink:hover { background: var(--color-on-night-2); }
.meals .fill { color: var(--color-on-night-2); border-color: var(--color-on-night-2); }
.buy--wide { margin-top: var(--space-2xl); }

/* ── coaching ───────────────────────────────────────── */
.coach { padding-block: var(--section-gap); }
.coach__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.coach__pic { grid-column: 8 / 13; grid-row: 1 / 3; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; }
.coach__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.coach h2 { grid-column: 1 / 7; grid-row: 1; font-size: var(--text-section); max-width: 9ch; }
.coach__rows { grid-column: 1 / 7; grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.coach__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); column-gap: var(--gap-columns); align-items: baseline; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); }
.coach__rows h3 { font-size: var(--text-title); }
.coach__rows p { grid-column: 1; grid-row: 2; }
.coach__rows .textlink { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.coach__rows p { color: var(--color-ink-2); }
.textlink { font-weight: 700; white-space: nowrap; }

/* ── most watched, on night ─────────────────────────── */
.watched { padding-block: var(--section-gap); background: var(--color-night); color: var(--color-on-night); }
.watched__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.watched__head h2 { grid-column: 1 / 8; font-size: var(--text-section); }
.watched__head .lead { grid-column: 8 / 13; color: var(--color-on-night-2); }
.index { list-style: none; margin: 0; padding: 0; counter-reset: rank; border-top: 1px solid var(--color-night-3); }
.index li { counter-increment: rank; border-bottom: 1px solid var(--color-night-3); }
.index a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-lg); padding-block: var(--space-xl); color: var(--color-on-night); text-decoration: none; }
.index a::before { content: counter(rank); font-weight: 700; color: var(--color-on-night-2); font-variant-numeric: tabular-nums; }
.index a:hover .index__title { color: var(--color-on-night-2); }
.index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.index__title { font-weight: 800; font-stretch: 112%; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.03em; transition: color var(--dur-short) var(--ease-out); }
.index li:first-child .index__title { font-size: var(--text-section); }
.index__views { font-size: var(--text-sm); color: var(--color-on-night-2); white-space: nowrap; }
.index__views .num { font-weight: 800; font-size: var(--text-xl); color: var(--color-on-night); font-variant-numeric: tabular-nums; }

/* ── follow along: two platform plates ──────────────── */
.follow { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-night); color: var(--color-on-night); overflow: hidden; }
.follow__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-xl); }
.follow__head h2 { grid-column: 1 / 8; font-size: var(--text-section); }
.follow__head .lead { grid-column: 8 / 13; color: var(--color-on-night-2); }
.follow__stage { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap-columns); min-height: clamp(420px, 44vw, 620px); }
.follow__stage canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.follow__link { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2xs); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-night-2); color: var(--color-on-night); text-decoration: none; text-align: center; transition: background-color var(--dur-short) var(--ease-out); }
.follow__link:hover { background: var(--color-night-3); }
.follow__link:active { transform: scale(0.99); }
.follow__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.follow__mark { margin-bottom: auto; width: 96px; height: 96px; }
.follow__label { font-weight: 800; font-stretch: 112%; font-size: var(--text-2xl); letter-spacing: -0.03em; }
.follow__handle { color: var(--color-on-night-2); }
.follow__count { font-size: var(--text-sm); color: var(--color-on-night-2); }
.follow__count .num { font-weight: 800; font-size: var(--text-lg); color: var(--color-on-night); font-variant-numeric: tabular-nums; }
.follow.has-3d .follow__link { background: transparent; }
.follow.has-3d .follow__mark { visibility: hidden; }
.follow.has-3d .follow__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── phones: the buy bar ────────────────────────────── */
.buybar { display: none; }
@media (max-width: 60rem) {
  .buybar { position: fixed; inset: auto var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom)) var(--space-sm); z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-night-2); box-shadow: var(--shadow-float); transform: translate3d(0, calc(100% + var(--space-xl)), 0); transition: transform var(--dur-long) var(--ease-out); }
  .buybar.is-up { transform: none; }
  .buybar .pill { min-height: 48px; padding-inline: var(--space-sm); }
  .follow__head h2, .follow__head .lead { grid-column: 1 / -1; }
  .follow__stage { min-height: 380px; }
  .foot { padding-bottom: calc(var(--space-2xl) + 80px); }
}
html:not(.js) .buybar { display: none; }

/* ── brands ─────────────────────────────────────────── */
.brands { padding-block: var(--section-gap); background: var(--color-paper-2); }
.brands__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: center; }
.brands__pic { grid-column: 1 / 6; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; }
.brands__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.brands__body { grid-column: 7 / 13; display: grid; gap: var(--space-lg); }
.brands__body h2 { font-size: var(--text-section); }
.brands__open { font-size: var(--text-md); color: var(--color-ink-2); }
.enquiry { display: grid; gap: var(--space-lg); padding-top: var(--space-md); }
.enquiry .pill { justify-self: start; }
.enquiry__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── footer ─────────────────────────────────────────── */
.foot { padding-block: var(--section-gap-s) var(--space-2xl); background: var(--color-night); color: var(--color-on-night); }
.foot__name { font-weight: 800; font-stretch: 112%; font-size: var(--text-display-s); letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--space-2xl); }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-night-3); }
.foot__head { font-size: var(--text-sm); color: var(--color-on-night-2); margin-bottom: var(--space-sm); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot ul a { color: var(--color-on-night); text-decoration: none; white-space: nowrap; }
.foot ul a:hover { color: var(--color-on-night-2); }
.foot__handle { color: var(--color-on-night-2); font-size: var(--text-sm); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-night-2); }
.foot__policies { display: flex; gap: var(--space-lg); }
.foot__policies a { color: var(--color-on-night-2); }
.foot__policies a:hover { color: var(--color-on-night); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { font-size: var(--text-sm); color: var(--color-muted); }

/* ── legal pages: privacy, terms, refunds ───────────── */
.legal-nav { background: var(--color-night); color: var(--color-on-night); }
.legal-nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.legal-nav .textlink { color: var(--color-on-night-2); font-size: var(--text-sm); }
.legal-nav .textlink:hover { color: var(--color-on-night); }
.legal { max-width: calc(68ch + 2 * var(--gutter)); padding-block: var(--space-3xl) var(--section-gap-s); }
.legal h1 { font-size: var(--text-display-s); max-width: none; }
.legal__date { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.legal .lead { margin-top: var(--space-xl); }
.legal h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-sm); font-size: var(--text-xl); font-stretch: 100%; letter-spacing: -0.01em; line-height: 1.2; }
.legal p, .legal li { line-height: 1.7; color: var(--color-ink-2); }
.legal ul { display: grid; gap: var(--space-sm); padding-left: 1.2em; margin: 0; }
.legal strong { color: var(--color-ink); }
.legal-foot { padding-block: var(--space-xl); background: var(--color-night); color: var(--color-on-night-2); font-size: var(--text-sm); }
.legal-foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); }
.legal-foot__links { display: flex; gap: var(--space-lg); }
.legal-foot__links a { color: var(--color-on-night-2); }
.legal-foot__links a:hover { color: var(--color-on-night); }

/* ── under 60rem ────────────────────────────────────── */
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .stage.is-pinned { height: 400vh; }
  .stage__count { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .score { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .score__fig { font-size: clamp(2.25rem, 9vw, 4rem); }
  .score > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .week__head, .week__body, .program__pic, .program__text, .meals__head h2, .meals__head .lead,
  .coach h2, .coach__rows, .coach__pic, .watched__head h2, .watched__head .lead, .brands__pic, .brands__body { grid-column: 1 / -1; }
  .menu__meal, .menu__food { grid-column: 1 / -1; }
  .menu li { padding: var(--space-md) var(--space-lg); }
  .coach__pic, .coach h2, .coach__rows { grid-row: auto; }
  .coach__rows li { padding: var(--space-lg); }
  .index a { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--space-2xs); }
  .index__views { grid-column: 2; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .nav .pill--small { display: none; }
  .nav__icon { width: 40px; height: 40px; }
  .nav__end { gap: 0; }
  .actions .pill { flex: 1 1 auto; }
  .week__body { padding: var(--space-lg); }
  .signup__row { flex-direction: column; }
  .enquiry__pair { grid-template-columns: minmax(0, 1fr); }
  .index__title, .index li:first-child .index__title { font-size: var(--text-xl); }
  .follow__label { font-size: var(--text-xl); }
  .follow__handle { font-size: var(--text-sm); }
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .strip__item { height: 52vh; }
  .sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sheet tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .sheet th, .sheet td { border: 0; padding: var(--space-3xs) 0; }
  .sheet tbody th { grid-column: 1 / -1; }
  .sheet td::before { content: attr(data-label) ": "; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
  .sheet td.r { text-align: left; }
}
@media (max-width: 22.5rem) {
  .nav__icon:nth-of-type(n + 3) { display: none; }
}