/* LIFT52 marketing site, in the app's Paper & Navy look (DESIGN.md in the app repo,
   with the decisions of 14 November 2026). Every page sits on paper with ink text,
   like the app's screens. Navy is the anchor, not the default: it fills only the one
   card a section is about (the program stripes and cards, each in its program's
   navy, the plan result, the Today card, the numbers panel in the workout).
   Everything secondary is a quiet tile: ink-soft fill, 16px corners, ink text. Blaze
   is saved for the nav's Get the app button and, inside the app mockups, Start
   workout and the current week. Big Shoulders Display (900, uppercase) carries
   headlines, numbers and the wordmark; Schibsted Grotesk carries everything you
   read. No gradients, shadows or decorative borders: things are separated by space
   and solid fills. The one exception is glass: the nav and the mockup's tab bar
   echo the app's Liquid Glass tab bar. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../assets/fonts/big-shoulders-display-black-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color tokens (DESIGN.md, Token values). */
  --paper: #f2f2ef;
  --ink: #0e1a2e;
  --ink-secondary: rgba(14, 26, 46, 0.72);
  --ink-soft: rgba(14, 26, 46, 0.08);
  --ink-muted: rgba(14, 26, 46, 0.35);
  --program-upper-lower: #14305e;
  --program-full-body: #0e1f40;
  --program-strength: #233f5e;
  --program-athletic: #1d3e78;
  --program-ppl: #25285e;
  --tabbar-upper-lower: #0c1e3a;
  --tabbar-full-body: #091328;
  --tabbar-strength: #16273a;
  --tabbar-athletic: #12264a;
  --tabbar-ppl: #17193a;
  --on-program: #ffffff;
  --on-program-muted: rgba(255, 255, 255, 0.75);
  --tab-inactive: rgba(255, 255, 255, 0.68);
  --blaze: #ff6b2c;
  --on-blaze: #0e1a2e;
  --blaze-text: #ff9461;

  /* Spacing, radius and size tokens. */
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 28px;
  --radius-bar: 2px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-text: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;

  /* Site layout. */
  --maxw: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Glass over paper, for the nav (the app's tab bar is Liquid Glass). */
  --glass: rgba(242, 242, 239, 0.72);
  /* The quiet frame around each app mockup. */
  --bezel: 10px;
  color-scheme: light;
}

/* Each program's navy, for stripes, cards and the plan board. Programs without
   their own color use Upper / Lower's. */
[data-family] { --prog: var(--program-upper-lower); }
[data-family="full-body"] { --prog: var(--program-full-body); }
[data-family="strength"] { --prog: var(--program-strength); }
[data-family="athletic"] { --prog: var(--program-athletic); }
[data-family="ppl"] { --prog: var(--program-ppl); }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: clip;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4, dl, dd, ol, ul, figure { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
svg { flex: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  left: 16px; top: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transform: translateY(-180%);
}
.skip:focus { transform: none; }

/* Focus: 2px solid, 2px outside. Ink on paper and on quiet tiles; paper inside navy
   (set where a navy card holds something focusable). */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
}
.num { font-variant-numeric: tabular-nums; }

/* The `label` style: a small overline above a title. */
.label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.h2 {
  margin-top: 18px;
  font-size: clamp(3rem, 6.6vw, 6.25rem);
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  line-height: 1.5;
  max-width: 32em;
  text-wrap: pretty;
}

.fine {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

/* ---------- Wordmark: LIFT and a solid blaze 52, set in type ---------- */

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The colors of the app icon: LIFT takes the surface's text color (ink on paper,
   paper on navy or ink) and the 52 is always solid blaze. */
.wordmark > span { color: var(--blaze); }

/* ---------- Buttons ---------- */

/* Website main: ink with paper text, 42px tall, because the nav's Get the app is the
   page's one blaze button. The hit area reaches 44px. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.btn::after { content: ""; position: absolute; inset: -1px 0; }
/* A second, quieter action beside the main one. */
.btn-quiet { background: var(--ink-soft); color: var(--ink); }

/* Website nav: the one blaze button. */
.btn-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--blaze);
  color: var(--on-blaze);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.btn-nav::after { content: ""; position: absolute; inset: -7px -4px; }

.btn:active, .btn-nav:active, .stripe:active, .tab:active, .chip:active,
.pill-btn:active:not(:disabled), .ck-fix:active, .ta-action:active { opacity: 0.85; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Nav ---------- */

/* Glass over paper, like the app's tab bar: no border, no shadow. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--nav-h);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--paper); }
}
.nav-inner {
  max-width: var(--maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
}
.logo .wordmark { font-size: 32px; }

.nav-links { display: flex; margin-right: 10px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.nav-links a:hover,
.nav-links a[aria-current] { text-decoration-line: underline; }

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: clamp(88px, 11vw, 168px) 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Hero: the headline and the program stripes ---------- */

.hero { padding: calc(var(--nav-h) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 8vw, 112px); }
.hero-grid {
  display: grid;
  /* Brand guidelines, page 16: the headline and the stripes share the width equally. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(40px, 6vw, 104px);
  align-items: center;
}
.hero-copy { container-type: inline-size; }
.hero-title {
  /* 5.75em gives the guide's breaks: Programs, / guides, and a / log for every / week. The size
     follows the column (1 / 5.75 of its width), so the breaks hold at every width. */
  max-width: 5.75em;
  font-size: min(8.25rem, 17.3cqi);
  line-height: 0.88;
}
.hero-lead {
  max-width: 28em;
  margin-top: 28px;
  font-size: clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.hero-copy .btn { margin-top: 32px; }

/* ProgramStripe: one solid row per program, 6px apart. */
.stripes { display: grid; gap: 6px; }
.stripe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--prog);
  color: var(--on-program);
  transition: opacity 0.15s;
}
/* The hit area fills the gaps, so each row is a 44px target. */
.stripe::after { content: ""; position: absolute; inset: -3px 0; }
.stripe-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.stripe-days { font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }

/* ---------- Programs ---------- */

.programs-head .h2 span { color: var(--ink-secondary); }
.programs-head .lead { margin-top: 28px; }
.pcards {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(44px, 5vw, 72px);
}
/* Five general splits on the first row, the four plans built for one goal below. */
.pcard { grid-column: span 4; }
.pcard:nth-child(n + 6) { grid-column: span 5; }
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--prog);
  color: var(--on-program);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.pcard-days {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-program-muted);
}
.pcard-days b {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0.005em;
  color: var(--on-program);
}
.pcard-body { margin-top: auto; padding-top: 28px; }
.pcard-name { font-size: clamp(2rem, 2.6vw, 2.625rem); line-height: 0.9; }
.pcard-sub { margin-top: 12px; font-weight: 600; line-height: 1.35; }
.pcard-who { margin-top: 8px; font-size: 0.9375rem; line-height: 1.45; color: var(--on-program-muted); text-wrap: pretty; }
.pcard-meta {
  margin-top: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-program-muted);
}
.pcard-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.pcard-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.pcard:hover .pcard-link { text-decoration-thickness: 3px; }
.pcard:active { opacity: 0.85; }
.pcard:has(.pcard-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pcard-link:focus-visible { outline: none; }

/* ---------- Your plan: the quiz, the program, its week ---------- */

.week-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px 80px;
  align-items: start;
}
.week-lead { margin-top: 28px; }
.season-field { animation: rise-in 0.4s var(--ease-out) both; }
.field-label { margin: 22px 0 10px; font-size: 0.9375rem; font-weight: 600; }
.finder .field-label:first-child { margin-top: 0; }

/* The app's segmented control: a quiet track, the chosen answer in navy. */
.segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--ink-soft);
}
.segmented button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color 0.2s, opacity 0.2s;
}
.segmented button[aria-checked="true"] { color: var(--on-program); }
.segmented button:disabled { opacity: 0.4; }
/* Four longer answers: two rows of two. */
.seg-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-pill {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: var(--radius-sm);
  background: var(--program-upper-lower);
  will-change: transform, width;
}

/* The quiz's result: the section's one navy card, in the shown program's navy. */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px 80px;
  align-items: end;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--prog);
  color: var(--on-program);
  transition: background-color 0.3s;
}
.plan .label { color: var(--blaze-text); }
.plan-name { margin-top: 14px; font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 0.86; }
.plan-meta {
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-program-muted);
}
.plan-why { font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.plan-alt { margin-top: 12px; font-size: 0.9375rem; color: var(--on-program-muted); text-wrap: pretty; }
.plan-alt:empty { display: none; }
.plan-alt b { color: var(--on-program); font-weight: 700; }
.plan.changed .plan-name,
.plan.changed .plan-meta,
.plan.changed .plan-copy { animation: rise-in 0.5s var(--ease-out) both; }
.plan.changed .plan-meta { animation-delay: 40ms; }
.plan.changed .plan-copy { animation-delay: 80ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }

/* Intensity: the tiers the shown program offers, and what the chosen one means. */
.tier {
  display: grid;
  grid-template-columns: auto minmax(0, 420px) minmax(0, 1fr);
  gap: 12px 24px;
  align-items: center;
  justify-content: start;
  margin-top: 36px;
}
.tier-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.tier-note { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-secondary); text-wrap: pretty; }

/* The week: training days as quiet tiles, like the app's This week list; rest days
   left open. */
.board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  min-height: clamp(200px, 19vw, 250px);
  padding: 14px 12px;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--ink);
}
.tile.enter { animation: tile-in 0.55s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px); } }
.t-day {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.t-name {
  margin-top: auto;
  padding-top: 18px;
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height: 0.9;
  overflow-wrap: anywhere;
}
.t-focus { margin-top: 8px; font-size: 0.875rem; line-height: 1.35; color: var(--ink-secondary); text-wrap: pretty; }
.t-count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}
.tile.rest { background: none; color: var(--ink-secondary); }

.plan-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
}
.plan-tabs-label {
  margin-right: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
/* Quiet until chosen; the chosen one is navy, like the app's segmented controls. */
.tab {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--ink-soft);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, opacity 0.15s;
}
.tab[aria-pressed="true"] { background: var(--program-upper-lower); color: var(--on-program); }
.week-fine { margin-top: 22px; }

/* ---------- Copy beside the app mockups ---------- */

.workout { padding-bottom: clamp(64px, 7vw, 104px); }
.workout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 64px 104px;
  align-items: center;
}
.workout-copy .lead,
.team-copy .lead,
.coach-copy .lead { margin-top: 28px; }
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 48px;
}
.features strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.features span { display: block; margin-top: 8px; font-size: 0.9375rem; color: var(--ink-secondary); text-wrap: pretty; }

.routines,
.progress,
.nutrition,
.team { padding-bottom: clamp(64px, 7vw, 104px); }
.team-grid,
.coach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 64px 104px;
  align-items: center;
}
.coach-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.progress-fine { margin-top: 28px; max-width: 34em; }
.coach-cta { display: grid; justify-items: start; gap: 16px; margin-top: 40px; }
.coach-cta .fine { max-width: 34em; }

.soon {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--program-upper-lower);
  color: var(--on-program);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

/* ---------- App mockups: paper screens in a quiet frame ---------- */

/* The page is paper too, so each screen sits in a quiet bezel (ink-soft over paper,
   like a light phone) instead of a shadow. Inside: ink text, quiet tiles, and navy
   only for the card the screen is about. */
.logger,
.check-app,
.nutri-app,
.team-app,
.coach-app {
  position: relative;
  padding: 20px 18px 18px;
  border: var(--bezel) solid var(--ink-soft);
  border-radius: 40px;
  background: var(--paper);
  color: var(--ink);
}
.logger-card :focus-visible,
.restbar :focus-visible,
.ck-finding :focus-visible { outline-color: var(--paper); }

/* Small section labels inside a screen. */
.ta-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.ta-label span { margin-left: auto; }
.ta-status { min-height: 1.5em; margin: 14px 4px 0; font-size: 0.875rem; color: var(--ink-secondary); }

/* The workout logger. */
.logger { overflow: hidden; padding-bottom: 160px; }
.logger::after {
  content: "Check off a set to start the rest timer.";
  position: absolute;
  left: 0; right: 0;
  bottom: 62px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-secondary);
  pointer-events: none;
}
.logger.is-saved::after { content: none; }
.logger-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.pill-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--ink-soft);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.pill-btn:disabled { opacity: 0.4; }
.logger-session { text-align: center; font-weight: 700; font-size: 1.0625rem; }
.logger-progress { margin: 16px 6px 14px; font-size: 0.9375rem; color: var(--ink-secondary); }

.logger-card {
  padding: 20px 18px 12px;
  border-radius: var(--radius-lg);
  background: var(--program-ppl);
  color: var(--on-program);
}
.logger-lift { font-size: 2.125rem; line-height: 0.95; }
.logger-rest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--on-program-muted);
}
.logger-rest svg { width: 18px; height: 18px; }
.sets { margin-top: 16px; }
.sets-head,
.set-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.2fr) 48px;
  gap: 10px;
  align-items: center;
}
.sets-head { padding-bottom: 6px; font-size: 0.75rem; font-weight: 600; color: var(--on-program-muted); }
.set-row { padding: 6px 0; }
.set-n { padding-left: 4px; font-weight: 700; }
.set-row input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.check {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--on-program-muted);
  color: var(--ink);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s ease-out;
}
.check svg { width: 22px; height: 22px; stroke-dasharray: 21; stroke-dashoffset: 21; transition: stroke-dashoffset 0.3s var(--ease-out) 0.04s; }
.check:active { transform: scale(0.9); }
.check[aria-checked="true"] { background: var(--paper); box-shadow: none; }
.check[aria-checked="true"] svg { stroke-dashoffset: 0; }
.check.pop { animation: pop 0.38s var(--ease-out); }
@keyframes pop { 0% { transform: scale(0.82); } }

.saved {
  padding: 24px 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--program-ppl);
  color: var(--on-program);
  animation: rise-in 0.5s var(--ease-out) both;
}
.saved-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-full);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}
.saved-badge svg { width: 18px; height: 18px; }
.saved-count { margin-top: 26px; font-size: 7.5rem; line-height: 0.82; }
.saved-label {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.saved-line { margin-top: 14px; color: var(--on-program-muted); }

.restbar {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  z-index: 2;
  padding: 16px 20px 10px;
  border-radius: var(--radius-lg);
  background: var(--tabbar-ppl);
  color: var(--on-program);
  will-change: transform;
}
.restbar-row { display: flex; align-items: center; justify-content: space-between; }
.restbar-label { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.0625rem; }
.restbar-label svg { width: 22px; height: 22px; }
.restbar-time {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
}
.restbar-actions { display: flex; gap: 22px; margin-top: 4px; }
.restbar-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--blaze-text);
}
.restbar-actions svg { width: 18px; height: 18px; }

/* The library: a wall of names. */
.library { margin-top: clamp(88px, 10vw, 136px); }
.library-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px 72px;
  align-items: end;
}
.library-title { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.library-lead { max-width: 30em; }
.move-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--ink-soft);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, opacity 0.15s;
}
.chip small { font-size: inherit; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--program-upper-lower); color: var(--on-program); }
.chip[aria-pressed="true"] small { color: var(--on-program-muted); }

/* Five whole lines of names, cut cleanly between lines. */
.wall-wrap {
  font-size: clamp(1.5rem, 2.8vw, 2.75rem);
  max-height: calc(1.06em * 5);
  margin-top: 28px;
  padding: 0 var(--edge);
  overflow: hidden;
}
.wall {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  transition: opacity 0.18s ease;
}
.wall.fading { opacity: 0; }
.wall li { display: inline; color: var(--ink-secondary); transition: color 0.25s; }
.wall .nw { white-space: nowrap; }
.wall i {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  margin: 0 0.3em 0.1em;
  border-radius: 1px;
  background: var(--ink-muted);
  vertical-align: middle;
}
.wall li:hover { color: var(--ink); }
/* With a body area chosen, its names come first in ink and the rest step back
   (they are hidden from screen readers, so only the hits need to be read). */
.wall.grouped li { color: var(--ink-muted); }
.wall.grouped li.hit { color: var(--ink); }

/* The routine check. */
.ck-level {
  justify-self: end;
  padding: 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.ck-head { margin: 22px 4px 0; font-size: clamp(2.5rem, 4vw, 3.25rem); }
.ck-kind { margin: 8px 4px 0; font-size: 0.9375rem; color: var(--ink-secondary); }
.ck-finding {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--program-upper-lower);
  color: var(--on-program);
}
.ck-finding .ta-label { margin: 0 0 10px; color: var(--blaze-text); }
.ck-f-title { font-weight: 600; line-height: 1.35; }
.ck-f-detail { margin-top: 6px; font-size: 0.875rem; color: var(--on-program-muted); text-wrap: pretty; }
.ck-fix {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  transition: opacity 0.15s;
}
.ck-list { margin: 0 4px; }
.ck-list li {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0 6px 28px;
  font-size: 0.875rem;
}
.ck-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--program-upper-lower) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ck-list li.miss::before { background: none; box-shadow: inset 0 0 0 2px var(--ink-muted); }
.ck-list b { font-weight: 600; }
.ck-list span { color: var(--ink-secondary); }
.ck-list li.miss span { color: var(--ink); font-weight: 600; }
.ck-routine { margin: 0 4px; counter-reset: ck; }
.ck-routine li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink-soft);
  font-size: 0.875rem;
  counter-increment: ck;
}
.ck-routine li::before { content: counter(ck); width: 14px; font-weight: 700; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.ck-routine li span { margin-left: auto; color: var(--ink-secondary); white-space: nowrap; }
.ck-routine li.moved { animation: ck-moved 1.2s var(--ease-out); }
@keyframes ck-moved { from { background-color: var(--ink-muted); } }

/* Home, as the app draws it at 393pt wide (DESIGN.md, with the decisions of 14 November
   2026). Every size is in points of that screen, so the mockup scales as one piece. */
.phone {
  width: min(100%, 413px);
  padding: var(--bezel);
  border-radius: calc(44px + var(--bezel));
  background: var(--ink-soft);
  container-type: inline-size;
}
.home-app {
  --pt: calc(100cqw / 393);
  position: relative;
  overflow: hidden;
  padding: calc(14 * var(--pt)) 0 calc(104 * var(--pt));
  border-radius: calc(44 * var(--pt));
  background: var(--paper);
  color: var(--ink);
}
.hm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(44 * var(--pt));
  padding: 0 calc(20 * var(--pt));
}
.hm-top .wordmark { font-size: calc(34 * var(--pt)); }
/* Settings: a navy circle with a white gear. */
.hm-gear {
  display: grid;
  place-items: center;
  width: calc(42 * var(--pt));
  height: calc(42 * var(--pt));
  border-radius: var(--radius-full);
  background: var(--program-upper-lower);
  color: var(--on-program);
}
.hm-gear svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.hm-head { padding: calc(16 * var(--pt)) calc(20 * var(--pt)) 0; }
/* As in the app, /52 may run into the right margin rather than wrap. */
.hm-week { display: flex; align-items: baseline; gap: calc(8 * var(--pt)); white-space: nowrap; }
.hm-wk { font-size: calc(88 * var(--pt)); line-height: 0.82; }
.hm-of { font-size: calc(42 * var(--pt)); line-height: 0.9; }
.hm-count { margin-top: calc(12 * var(--pt)); font-size: calc(34 * var(--pt)); line-height: 1; }
.hm-msg { margin-top: calc(4 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 500; line-height: 1.5; }
.hm-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(6 * var(--pt));
  padding: calc(16 * var(--pt)) calc(20 * var(--pt)) 0;
}
.hm-strip li { display: grid; justify-items: center; gap: calc(6 * var(--pt)); }
.hm-letter { font-family: var(--font-ui); font-size: calc(14 * var(--pt)); font-weight: 600; line-height: 1; }
.hm-day {
  display: grid;
  place-items: center;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  border-radius: calc(8 * var(--pt));
  background: var(--ink-soft);
}
.hm-day.done { background: var(--program-upper-lower); color: var(--on-program); }
.hm-day.today { background: none; box-shadow: inset 0 0 0 calc(4 * var(--pt)) var(--ink); }
.hm-day svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
/* The Today card: the screen's one navy card and its one blaze button. */
.hm-today {
  position: relative;
  isolation: isolate;
  margin: calc(16 * var(--pt)) calc(20 * var(--pt)) 0;
  padding: calc(20 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--program-upper-lower);
  color: var(--on-program);
}
/* The lifter figure: the app's one-ink silhouette tinted blaze, top right, behind the text. */
.hm-today::before {
  content: "";
  position: absolute;
  top: calc(8 * var(--pt));
  right: 0;
  z-index: -1;
  width: calc(132 * var(--pt));
  height: calc(132 * var(--pt));
  background: var(--blaze);
  -webkit-mask: url("../assets/lifter.png") center / contain no-repeat;
  mask: url("../assets/lifter.png") center / contain no-repeat;
}
.hm-today-label {
  font-size: calc(14 * var(--pt));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blaze-text);
}
.hm-today-name { margin-top: calc(6 * var(--pt)); font-size: calc(50 * var(--pt)); line-height: 0.9; }
/* DESIGN.md caps this at 58%; the app now runs it on one line under the name. */
.hm-today-meta {
  max-width: 68%;
  margin-top: calc(6 * var(--pt));
  font-size: calc(16 * var(--pt));
  line-height: 1.4;
  color: var(--on-program-muted);
  text-wrap: balance;
}
.hm-start {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(56 * var(--pt));
  margin-top: calc(28 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--blaze);
  color: var(--on-blaze);
  font-size: calc(30 * var(--pt));
  line-height: 1;
}
/* Section titles on Home: Big Shoulders at 30, a small link or count on the right. */
.hm-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--pt)); }
.hm-sec-head .display { font-size: calc(30 * var(--pt)); line-height: 1; }
.hm-link {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  font-size: calc(13 * var(--pt));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hm-link svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
/* This week: the program's sessions in one quiet tile. */
.hm-this { padding: calc(28 * var(--pt)) calc(20 * var(--pt)) 0; }
.hm-sub {
  margin-top: calc(4 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.hm-sessions {
  margin-top: calc(12 * var(--pt));
  padding: calc(4 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--ink-soft);
}
.hm-sessions li {
  display: grid;
  grid-template-columns: calc(40 * var(--pt)) minmax(0, 1fr) calc(24 * var(--pt));
  gap: calc(14 * var(--pt));
  align-items: center;
  padding: calc(12 * var(--pt)) 0;
}
.hm-d {
  font-size: calc(12 * var(--pt));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.hm-sessions .next .hm-d { color: var(--ink); }
.hm-s b {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  font-size: calc(17 * var(--pt));
  font-weight: 600;
  line-height: 1.25;
}
.hm-s small { display: block; margin-top: calc(3 * var(--pt)); font-size: calc(13 * var(--pt)); line-height: 1.3; color: var(--ink-secondary); }
.hm-tag {
  padding: calc(3 * var(--pt)) calc(7 * var(--pt));
  border-radius: calc(5 * var(--pt));
  background: var(--ink-soft);
  font-size: calc(11 * var(--pt));
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hm-sessions svg { justify-self: center; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.hm-sessions .hm-chev { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--ink-secondary); }
.hm-year { padding: calc(28 * var(--pt)) calc(20 * var(--pt)) 0; }
.hm-year-count { font-size: calc(16 * var(--pt)); font-weight: 600; line-height: 1.2; }
.hm-bars {
  display: grid;
  grid-template-columns: repeat(52, minmax(0, 1fr));
  align-items: end;
  gap: calc(2 * var(--pt));
  height: calc(56 * var(--pt));
  margin-top: calc(10 * var(--pt));
}
.hm-bars i { height: 100%; border-radius: var(--radius-bar); background: var(--ink); }
.hm-bars i.m { height: 30%; background: var(--ink-muted); }
.hm-bars i.now { background: var(--blaze); }
.hm-bars i.f { height: 30%; background: none; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) var(--ink-muted); }
/* The tab bar: three tabs in a floating capsule of Liquid Glass. The selected tab
   sits on a soft pill in the program's navy. The faint edge and lift stand in for
   the glass's refraction, which flat CSS cannot draw. */
.hm-tabs {
  position: absolute;
  left: 50%;
  bottom: calc(24 * var(--pt));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc(272 * var(--pt));
  padding: calc(4 * var(--pt));
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: 0 0 0 calc(0.5 * var(--pt)) var(--ink-soft), 0 calc(6 * var(--pt)) calc(24 * var(--pt)) var(--ink-soft);
  color: var(--ink);
  transform: translateX(-50%);
}
.hm-tabs span {
  display: grid;
  justify-items: center;
  gap: calc(3 * var(--pt));
  padding: calc(7 * var(--pt)) 0 calc(6 * var(--pt));
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  line-height: 1;
}
.hm-tabs svg { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.hm-tabs .on { background: var(--ink-soft); color: var(--program-upper-lower); }

/* Nutrition: calories, each macro's share of them, and the weight trend. */
.nutri-app .ta-label { margin-top: 2px; }
.nu-cal { display: flex; align-items: baseline; gap: 10px; margin: 0 4px; }
.nu-cal b { font-size: 4rem; line-height: 0.9; }
.nu-cal span,
.nu-name {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.nu-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 4px 0; }
.nu-macros p:first-child { font-size: 0.875rem; color: var(--ink-secondary); }
.nu-macros b { font-size: 1.75rem; color: var(--ink); }
.nu-bar { display: block; height: 6px; margin: 8px 0; border-radius: var(--radius-bar); background: var(--ink-soft); overflow: hidden; }
.nu-bar i { display: block; width: calc(var(--s) * 100%); height: 100%; border-radius: var(--radius-bar); background: var(--program-upper-lower); }
/* The weight trend, a quiet tile as on the app's Progress tab. */
.nu-weight {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--ink);
}
.nu-weight > div { flex: 1; min-width: 0; }
.nu-kg { margin-top: 6px; font-size: 2.25rem; }
.nu-line { margin-top: 6px; font-size: 0.875rem; color: var(--ink-secondary); }
.nu-spark { width: 112px; height: 56px; color: var(--ink); }
.nu-links {
  display: flex;
  justify-content: space-between;
  margin: 16px 4px 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Team: your coach and your buddies. */
.ta-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.ta-title { font-size: 2.5rem; }
.ta-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
}
/* People as quiet tiles; their initials sit on a small navy square. */
.ta-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--ink);
}
.ta-row + .ta-row { margin-top: 6px; }
.ta-tile {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--program-upper-lower);
  color: var(--on-program);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
}
.ta-body { min-width: 0; }
.ta-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; }
.ta-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--program-upper-lower);
  color: var(--on-program);
  font-size: 0.75rem;
  font-weight: 700;
}
.ta-meta { margin-top: 3px; font-size: 0.875rem; color: var(--ink-secondary); overflow-wrap: anywhere; }
/* Their week: trained days in ink, today in mid grey, the rest faint. */
.ta-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 150px; margin-top: 9px; }
.ta-week i { height: 4px; border-radius: var(--radius-bar); background: var(--ink-soft); }
.ta-week i.on { background: var(--ink); }
.ta-week i.today { background: var(--ink-muted); }
.ta-action {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 64px;
  min-height: 56px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background-color 0.2s, color 0.2s, opacity 0.15s;
}
.ta-action svg { width: 24px; height: 24px; }
.ta-action[aria-pressed="true"] { background: var(--program-upper-lower); color: var(--on-program); }

/* The coach's dashboard, with a client's form tip laid over its corner: the tip is
   the section's navy card, the dashboard's rows are quiet. */
.coach-stage { position: relative; padding-bottom: 150px; }
.ca-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.ca-seg span { padding: 8px 0; border-radius: var(--radius-sm); }
.ca-seg .on { background: var(--program-upper-lower); color: var(--on-program); }
.ca-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 4px 18px; }
.ca-stats b { display: block; font-family: var(--font-display); font-size: 2.75rem; font-weight: 900; line-height: 1; }
.ca-stats span {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.ca-list { display: grid; gap: 6px; }
.ca-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--ink);
}
.ca-status {
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.ca-status.warn { color: var(--ink); }
.ca-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; max-width: 180px; margin-top: 10px; }
.ca-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: var(--radius-bar); background: var(--ink-muted); }
.ca-bars i.now { background: var(--ink); }
.ca-tip {
  position: absolute;
  right: -28px;
  bottom: 0;
  width: min(300px, 70%);
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--program-athletic);
  color: var(--on-program);
  font-size: 0.9375rem;
}
.ca-tip-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blaze-text);
}
.ca-tip-lift { margin: 8px 0 4px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; line-height: 1; text-transform: uppercase; }

/* ---------- Share: the recap graphics ---------- */

.share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px 96px;
  align-items: center;
}
.share-stage {
  display: grid;
  place-items: center;
  min-height: clamp(540px, 50vw, 700px);
  padding: 48px 24px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
}
.share-copy .lead { margin-top: 28px; }
.share-copy .segmented { max-width: 340px; margin-top: 32px; }
.share-copy .fine { margin-top: 16px; max-width: 30em; }

.cards {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 4 / 5;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.scard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  container-type: inline-size;
  cursor: grab;
  will-change: transform;
}
.cards.dragging .scard { cursor: grabbing; }
.scard[aria-hidden="true"] { cursor: pointer; }

.sc-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 7cqw 6.7cqw 0; }
.sc-word { font-size: 8.4cqw; }
.sc-tag {
  font-size: 2.3cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: right;
  text-transform: uppercase;
}
.sc-title {
  padding: 11cqw 6.7cqw 0;
  font-family: var(--font-display);
  font-size: 10cqw;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}
.sc-big {
  margin-top: auto;
  padding: 0 6.7cqw;
  font-family: var(--font-display);
  font-size: 36cqw;
  font-weight: 900;
  line-height: 0.8;
}
.sc-big-label {
  padding: 3.4cqw 6.7cqw 7cqw;
  font-family: var(--font-display);
  font-size: 6.6cqw;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.sc-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 5cqw;
  padding: 6cqw 6.7cqw 5.4cqw;
  background: var(--program-ppl);
  color: var(--on-program);
}
.sc-strip b, .sc-panel b {
  display: block;
  font-family: var(--font-display);
  font-size: 8cqw;
  font-weight: 900;
  line-height: 0.9;
}
.sc-strip span, .sc-panel span {
  display: block;
  margin-top: 1.6cqw;
  font-size: 2.3cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sc-date, .sc-more {
  font-size: 2.3cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.sc-strip .sc-date { grid-column: 1 / -1; color: var(--on-program-muted); }

.scard-statement { background: var(--ink); color: var(--paper); }

.scard-session { background: var(--paper); color: var(--ink); }
.scard-session .sc-title { padding-top: 8cqw; }
.sc-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 6cqw 6.7cqw 0;
  padding: 4.6cqw 4cqw;
  border-radius: 3cqw;
  background: var(--program-ppl);
  color: var(--on-program);
}
.sc-list { margin: 3cqw 6.7cqw 0; }
.sc-list li {
  display: grid;
  grid-template-columns: 8.4cqw minmax(0, 1fr) auto;
  align-items: center;
  padding: 2.1cqw 0;
}
.sc-list li > span { font-size: 2.9cqw; font-weight: 600; color: var(--ink-secondary); }
.sc-list b { display: block; font-size: 3.5cqw; font-weight: 700; line-height: 1.2; }
.sc-list small { display: block; font-size: 2.8cqw; color: var(--ink-secondary); }
.sc-list svg { width: 4.6cqw; height: 4.6cqw; color: var(--ink); }
.sc-more { margin: 2.4cqw 6.7cqw 0; color: var(--ink-secondary); }
.scard-session .sc-date { margin-top: auto; padding: 0 6.7cqw 6.4cqw; color: var(--ink-secondary); }

/* ---------- FAQ answers: quiet tiles that open ---------- */

.qa { display: grid; gap: 6px; }
.faq-note { margin: -2px 0 16px; color: var(--ink-secondary); }
.qa details {
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--ink);
  scroll-margin-top: 24px;
}
.qa summary {
  position: relative;
  display: block;
  padding: 18px 56px 18px 20px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before,
.qa summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 16px; height: 2.5px;
  margin-top: -1.25px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.qa summary::after { transform: rotate(90deg); }
.qa details[open] summary::after { transform: rotate(0deg); }
.qa summary:active { opacity: 0.85; }
.qa p { padding: 0 56px 22px 20px; max-width: 42em; color: var(--ink); text-wrap: pretty; }
.qa a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */

.footer { padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 24px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-secondary);
  transition: color 0.2s;
}
.footer-links a:hover,
.footer-links a[aria-current="page"] { color: var(--ink); }
.footer-logo { margin: 0 0 4px; }
.footer-logo .wordmark { font-size: 28px; }

/* ---------- Legal and help pages ---------- */

.legal-top { display: flex; align-items: center; min-height: 88px; max-width: 840px; }
.legal { max-width: 840px; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(80px, 10vw, 136px); }
.legal h1 { margin-top: 18px; font-size: clamp(3.5rem, 10vw, 6.75rem); text-wrap: balance; }
.legal .lead { margin-top: 24px; }
.legal h2 {
  margin-top: 56px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.legal h2 + .qa, .legal h2 + .faq-note { margin-top: 18px; }
.legal p { margin-top: 14px; max-width: 40em; line-height: 1.65; }
.legal .qa p { margin-top: 0; line-height: 1.6; }
.legal ul:not(.legal-promises) { margin-top: 12px; }
.legal ul:not(.legal-promises) li { position: relative; max-width: 40em; padding: 5px 0 5px 22px; line-height: 1.6; }
.legal ul:not(.legal-promises) li::before,
.legal-promises li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(5px + 0.8em - 3px);
  width: 6px; height: 6px;
  border-radius: 1px;
  background: currentColor;
}
.legal strong { font-weight: 650; }
.legal a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal-promises {
  margin-top: 32px;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--ink);
}
.legal-promises li { position: relative; padding: 6px 0 6px 24px; font-weight: 600; line-height: 1.5; }
.legal-promises li::before { top: calc(6px + 0.75em - 3px); left: 4px; }

/* ---------- Team invite (/i/<code>) ---------- */

.invite {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100svh - 92px);
}
.invite-top { display: flex; align-items: center; min-height: 88px; padding: 0 var(--edge); }
.invite-main { align-self: center; padding: 40px var(--edge) clamp(72px, 10vh, 120px); }
.invite-body { max-width: 860px; }
.invite-title {
  margin-top: 18px;
  max-width: 8.5em;
  font-size: clamp(3.4rem, 8vw, 7.5rem);
  text-wrap: balance;
}
.invite-lead { margin-top: 24px; }
.invite-code {
  display: inline-block;
  margin-top: 32px;
  padding: 16px 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--program-upper-lower);
  color: var(--on-program);
}
.invite-code-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-program-muted);
}
.invite-code-value {
  margin: 12px -0.14em 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 0.9;
}
.invite-actions { margin-top: 28px; }
.invite-fine { margin-top: 22px; max-width: 34em; }
.invite-fine b { color: var(--ink); font-weight: 700; letter-spacing: 0.08em; }

/* ---------- Motion ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-copy > * { animation: rise-in 0.8s var(--ease-out) both; }
.js .hero-copy > :nth-child(2) { animation-delay: 80ms; }
.js .hero-copy > :nth-child(3) { animation-delay: 140ms; }
.js .stripes li { animation: stripe-in 0.7s var(--ease-out) both; }
.js .stripes li:nth-child(1) { animation-delay: 120ms; }
.js .stripes li:nth-child(2) { animation-delay: 160ms; }
.js .stripes li:nth-child(3) { animation-delay: 200ms; }
.js .stripes li:nth-child(4) { animation-delay: 240ms; }
.js .stripes li:nth-child(5) { animation-delay: 280ms; }
@keyframes stripe-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcard, .pcard:nth-child(n + 6) { grid-column: auto; }
  .tier { grid-template-columns: auto minmax(0, 380px); }
  .tier-note { grid-column: 1 / -1; }
  .workout-grid,
  .team-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; }
  .coach-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; }
  .ca-tip { right: -12px; }
  .features { grid-template-columns: 1fr; }
  .tile { padding: 14px 10px 12px; }
  .t-focus { font-size: 0.8125rem; }
}

@media (max-width: 899px) {
  .hero-grid,
  .library-head,
  .week-top,
  .plan,
  .workout-grid,
  .team-grid,
  .coach-grid,
  .share-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 44px; }
  .stripes { max-width: 560px; }
  .logger, .check-app, .nutri-app, .team-app, .coach-stage { width: min(100%, 480px); }
  .coach-copy { order: -1; }

  /* Program cards become a swipeable row. */
  .pcards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard, .pcard:nth-child(n + 6) { grid-column: auto; min-height: 420px; scroll-snap-align: start; }

  .tier { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* The week board becomes a list of days. */
  .board { grid-template-columns: minmax(0, 1fr); }
  .tile {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 12px;
    min-height: 0;
    padding: 14px;
  }
  .t-day { grid-row: 1 / span 3; padding-top: 3px; }
  .t-name { margin-top: 0; padding-top: 0; font-size: 1.75rem; }
  .t-focus { margin-top: 6px; }
  .t-count { justify-content: flex-start; gap: 2px 16px; margin-top: 8px; }
  .tile.rest { padding-block: 8px; }
  .tile.rest .t-name { font-size: 1.25rem; }

  .share-stage { min-height: 0; padding: 40px 20px; }
  .share-copy { order: -1; }
  .cards { width: min(100%, 360px); }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .logo .wordmark { font-size: 28px; }
  :root { --nav-h: 60px; }
}

@media (max-width: 640px) {
  :root { --bezel: 8px; }
  .hero-title { font-size: clamp(3rem, 18vw, 5rem); }
  .actions .btn { flex: 1 1 auto; }
  .segmented button { padding: 6px 8px; font-size: 0.875rem; }
  .plan-tabs-label { width: 100%; }
  .tab { flex: 1 1 auto; }
  .features { grid-template-columns: 1fr; }

  .logger { padding: 16px 14px 156px; border-radius: 34px; }
  .check-app, .nutri-app, .team-app, .coach-app { padding: 18px 14px 14px; border-radius: 34px; }
  .logger-card { padding: 18px 14px 10px; }
  .sets-head, .set-row { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.2fr) 44px; gap: 8px; }
  .restbar { left: 14px; right: 14px; bottom: 14px; }
  .ta-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px; }
  .ta-tile { width: 40px; height: 40px; font-size: 1.125rem; }
  .ca-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .coach-stage { padding-bottom: 0; }
  .ca-tip { position: relative; right: auto; width: auto; margin: 6px 14px 0; }
  .ck-list li { grid-template-columns: 84px minmax(0, 1fr); }

  .chip { padding: 0 12px; }
  .qa summary { padding-right: 48px; }
  .qa p { padding-right: 18px; }
  .legal-promises { padding: 16px 18px; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 0.3s ease; }
  .js .hero-copy > *, .js .stripes li { animation: none; }
  .tile.enter, .plan.changed *, .saved, .check.pop, .season-field, .ck-routine li.moved { animation: none !important; }
  .qa summary::before, .qa summary::after, .check svg { transition: none; }
}