/* ==========================================================================
   BOOTY.COM  ·  design system
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ---------- tokens ---------- */
:root{
  /* Booty.com runs the Sweat playbook in rose: hot pink on deep plum, tight
     display type, pill buttons, alternating white and blush bands. */
  --ink:        #22102a;
  --ink-70:     rgba(34,16,42,.70);
  --ink-52:     rgba(34,16,42,.66);
  --ink-38:     rgba(34,16,42,.60);
  --ink-12:     rgba(34,16,42,.11);
  --ink-07:     rgba(34,16,42,.06);

  --paper:      #ffffff;
  --sand:       #fdf4f8;
  --sand-deep:  #f9e6ef;

  --clay:       #ff4d8d;   /* decorative fills, large display type */
  --clay-ink:   #e6005f;   /* pink as small text, and behind white text */
  --clay-deep:  #e0005a;
  --blush:      #ffd3e2;
  --plum:       #2a0f2e;
  --plum-deep:  #1a0820;
  --lilac:      #e9d9ee;
  --moss:       #2f5d4e;

  --line:       #f1e3ea;

  --radius-s: 10px;
  --radius:   16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --pill:     999px;

  --shadow-s: 0 1px 2px rgba(42,15,46,.05), 0 4px 14px rgba(42,15,46,.05);
  --shadow:   0 2px 6px rgba(42,15,46,.05), 0 18px 44px rgba(42,15,46,.08);
  --shadow-l: 0 40px 90px rgba(42,15,46,.14);
  --shadow-pink: 0 8px 22px rgba(255,77,141,.30);

  --wrap: 1200px;
  --gut: 24px;

  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

h1,h2,h3,h4,.display{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h-xxl{ font-size: clamp(2.7rem, 5.6vw, 4.9rem); }
.h-xl { font-size: clamp(2.5rem, 6.4vw, 4.9rem); }
.h-l  { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.h-m  { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.03em; }
.h-s  { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.2; }

.lead{ font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--ink-70); line-height: 1.55; max-width: 58ch; }
.small{ font-size: .9rem; color: var(--ink-52); }
.tiny{ font-size: .78rem; color: var(--ink-38); }

.eyebrow{
  font-family: var(--font-body);
  font-size: .715rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay-ink);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before{ content:""; width: 22px; height: 1.5px; background: var(--clay-ink); flex: none; }
.eyebrow.plain::before{ display: none; }
.eyebrow.plain{ letter-spacing: .01em; text-transform: none; font-size: .9rem; font-weight: 500; }
.eyebrow.center{ justify-content: center; }

/* ---------- layout ---------- */
.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide{ max-width: 1400px; }
.section{ padding-block: clamp(72px, 9vw, 132px); }
.section-tight{ padding-block: clamp(52px, 6vw, 88px); }
.stack > * + *{ margin-top: 18px; }
.center{ text-align: center; }
.center .lead{ margin-inline: auto; }
.center .eyebrow{ justify-content: center; }

.head{ max-width: 720px; }
.head.center{ margin-inline: auto; }
.head .eyebrow{ margin-bottom: 20px; }
.head .lead{ margin-top: 20px; }

.grid{ display: grid; gap: 22px; }
.grid > *{ min-width: 0; }
.hero-grid > *{ min-width: auto; }
.g2{ grid-template-columns: repeat(2, 1fr); }
.g3{ grid-template-columns: repeat(3, 1fr); }
.g4{ grid-template-columns: repeat(4, 1fr); }

/* ---------- buttons ---------- */
.btn{
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg); color: var(--fg);
  border: 1px solid transparent; border-radius: 999px;
  padding: 14px 26px;
  font-size: .925rem; font-weight: 600; letter-spacing: -0.012em;
  cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,15,46,.16); }
.btn:active{ transform: translateY(0); }
.btn-clay{ --bg: var(--clay-ink); --fg: #fff; }
.btn-clay:hover{ background: var(--clay-deep); box-shadow: 0 12px 30px rgba(255,77,141,.34); }
.btn-ghost{ --bg: transparent; --fg: var(--ink); border-color: var(--ink-12); }
.btn-ghost:hover{ border-color: var(--ink); box-shadow: none; }
.btn-paper{ --bg: var(--paper); --fg: var(--ink); }
.btn-outline-light{ --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.26); }
.btn-outline-light:hover{ border-color: #fff; box-shadow: none; }
.btn-sm{ padding: 10px 18px; font-size: .85rem; }
.btn-lg{ padding: 17px 34px; font-size: 1rem; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row.center{ justify-content: center; }

.arrow{ transition: transform .35s var(--ease); }
.btn:hover .arrow{ transform: translateX(3px); }

.link-arrow{
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .92rem;
  border-bottom: 1.5px solid var(--ink-12); padding-bottom: 3px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow:hover{ border-color: var(--ink); gap: 11px; }

/* ---------- pills / chips ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ink-12); border-radius: 999px;
  padding: 6px 13px; font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; color: var(--ink-70); background: var(--paper);
}
.pill .dot{ width: 6px; height: 6px; border-radius: 99px; background: var(--clay); flex: none; }
.pill-clay{ background: rgba(255,77,141,.09); border-color: rgba(255,77,141,.2); color: var(--clay-deep); }
.pill-solid{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================================
   nav
   ========================================================================== */
.topbar{
  background: var(--ink); color: var(--paper);
  font-size: .78rem; letter-spacing: .01em;
  padding: 9px 0; position: relative; z-index: 60;
}
.topbar .wrap{ display: flex; justify-content: center; align-items: center; gap: 10px; text-align: center; }
.topbar b{ font-weight: 700; }
.topbar .sep{ color: rgba(255,255,255,.3); }




.burger{ display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span{ display: block; width: 20px; height: 1.8px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span + span{ margin-top: 5px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(6.8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-6.8px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 45;
  background: var(--paper);
  padding: 110px var(--gut) 40px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
body.menu-open .mobile-menu{ opacity: 1; visibility: visible; transform: none; }
.mobile-menu a{ font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.035em; padding: 10px 0; border-bottom: 1px solid var(--ink-07); }
.mobile-menu .btn{ margin-top: 24px; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero{ position: relative; padding-block: clamp(46px, 6vw, 84px) clamp(40px, 5vw, 70px); overflow: hidden; }
.hero-grid{ display: grid; grid-template-columns: 1.12fr .88fr; gap: 50px; align-items: center; }
.hero h1{ margin-top: 22px; }
.hero h1 .accent{ color: var(--clay); }
.hero .lead{ margin-top: 24px; }
.hero .btn-row{ margin-top: 30px; }
.hero-note{ margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--ink-52); }
.avatars{ display: flex; }
.avatars i, .avatars img{
  width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--paper);
  display: block; margin-left: -9px; object-fit: cover; background: var(--sand-deep);
}
.avatars i:first-child, .avatars img:first-child{ margin-left: 0; }

.blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: -1; }
.blob-1{ width: 460px; height: 460px; background: var(--blush); top: -140px; right: -110px; }
.blob-2{ width: 380px; height: 380px; background: var(--lilac); bottom: -180px; left: -140px; opacity: .45; }

/* hero art composition */
.hero-art{ position: relative; aspect-ratio: 4/4.4; }
.art-photo{
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(155deg, #ffd9e7 0%, #ff4d8d 48%, #2a0f2e 100%);
  overflow: hidden;
}
.art-photo::after{
  content:""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
.art-figure{ position: absolute; inset: 0; opacity: .9; }

.float-card{
  position: absolute;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
  padding: 15px 17px;
}
.fc-session{ left: -26px; top: 12%; width: 224px; }
.fc-ring{ right: -22px; top: 42%; width: 178px; }
.fc-streak{ left: 8%; bottom: -22px; width: 250px; }

.fc-row{ display: flex; align-items: center; gap: 11px; }
.fc-icon{ width: 34px; height: 34px; border-radius: 11px; background: var(--sand); display: grid; place-items: center; flex: none; }
.fc-label{ font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-38); font-weight: 700; }
.fc-title{ font-size: .93rem; font-weight: 700; letter-spacing: -0.02em; }

.bar-track{ height: 5px; border-radius: 99px; background: var(--ink-07); overflow: hidden; margin-top: 11px; }
.bar-fill{ height: 100%; border-radius: 99px; background: var(--clay); width: 0; transition: width 1.4s var(--ease); }

.streak-dots{ display: flex; gap: 5px; margin-top: 11px; }
.streak-dots i{ flex: 1; height: 26px; border-radius: 6px; background: var(--ink-07); display: block; }
.streak-dots i.on{ background: var(--ink); }
.streak-dots i.today{ background: var(--clay); }

/* ---------- marquee ---------- */
.marquee{ background: var(--ink); color: var(--paper); padding: 16px 0; overflow: hidden; }
.marquee-track{ display: flex; gap: 44px; width: max-content; animation: slide 34s linear infinite; }
.marquee span{ font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 44px; white-space: nowrap; }
.marquee span::after{ content:""; width: 6px; height: 6px; border-radius: 99px; background: var(--clay); }
@keyframes slide{ to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* ---------- stat strip ---------- */
.stats{ border-block: 1px solid var(--ink-12); }
.stats .grid{ gap: 0; }
.stat{ padding: 30px 26px; border-right: 1px solid var(--ink-12); }
.stat:last-child{ border-right: 0; }
.stat .num{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.045em; line-height: 1; }
.stat .num .unit{ color: var(--clay); }
.stat .cap{ margin-top: 9px; font-size: .85rem; color: var(--ink-52); line-height: 1.4; }

/* ==========================================================================
   cards
   ========================================================================== */
.card{
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-l);
  padding: 26px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.card-hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card-sand{ background: var(--sand); border-color: transparent; }
.card-ink{ background: var(--ink); color: var(--paper); border-color: transparent; }
.card-ink .lead, .card-ink .small{ color: rgba(255,255,255,.66); }

.feature .ic{
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: rgba(255,77,141,.1); color: var(--clay);
}
.feature h3{ margin-bottom: 10px; }
.feature p{ color: var(--ink-70); font-size: .95rem; }

/* ---------- program card ---------- */
.prog{ overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.prog-art{ aspect-ratio: 16/10.5; position: relative; overflow: hidden; display: block; background: var(--sand-deep); }
.prog-art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card-hover:hover .prog-art img{ transform: scale(1.04); }
.prog-art::after{ content:""; position: absolute; inset: 0; background-image: var(--grain); opacity: .14; mix-blend-mode: overlay; }
.prog-art .tags{ position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 2; }
.prog-art .weeks{
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  background: rgba(255,253,251,.94); border-radius: 999px; padding: 6px 13px;
  font-size: .74rem; font-weight: 700; letter-spacing: -0.01em;
}
.prog-body{ padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.prog-body h3{ font-size: 1.32rem; }
.prog-body p{ margin-top: 9px; color: var(--ink-70); font-size: .93rem; flex: 1; }
.prog-meta{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink-12); display: flex; gap: 18px; font-size: .8rem; color: var(--ink-52); }
.prog-meta b{ color: var(--ink); font-weight: 700; }

.gr-1{ background: linear-gradient(150deg, #ffd9e7, #ff4d8d 70%, #c1004e); }
.gr-2{ background: linear-gradient(150deg, #d9cfe4, #7c5f86 62%, #3a2130); }
.gr-3{ background: linear-gradient(150deg, #cfe0d6, #2f5d4e 65%, #1d3b31); }
.gr-4{ background: linear-gradient(150deg, #f6e2c8, #d99b3f 60%, #8a5a14); }
.gr-5{ background: linear-gradient(150deg, #ffd9d0, #e07a92 60%, #7d2a45); }
.gr-6{ background: linear-gradient(150deg, #d5dcea, #4a5f8a 62%, #232f4a); }

/* ---------- steps ---------- */
.step{ position: relative; padding-top: 26px; border-top: 2px solid var(--ink); }
.step .n{
  font-family: var(--font-body); font-weight: 700; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--clay);
  margin-bottom: 14px; display: block; line-height: 1.4;
}
.step .link-arrow{ display: inline-flex; }
.step h3{ font-size: 1.28rem; margin-bottom: 10px; }
.step p{ color: var(--ink-70); font-size: .94rem; }

/* ---------- split ---------- */
.split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 76px); align-items: center; }
.split-copy ul{ margin-top: 26px; display: grid; gap: 14px; }
.split-copy li{ display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: var(--ink-70); }
.split-copy li svg{ flex: none; margin-top: 3px; color: var(--clay); }
.split-copy li b{ color: var(--ink); font-weight: 700; }

/* ---------- video library ---------- */
.vid{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; cursor: pointer; }
.vid::after{ content:""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(34,16,42,.72), transparent 52%); }
.vid .meta{ position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 2; color: #fff; }
.vid .meta .t{ font-weight: 700; font-size: .96rem; letter-spacing: -0.02em; }
.vid .meta .s{ font-size: .78rem; opacity: .7; margin-top: 2px; }
.vid .play{
  position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 48px; height: 48px; border-radius: 99px;
  background: rgba(255,255,255,.9); display: grid; place-items: center;
  transform: scale(.85); opacity: 0; transition: all .35s var(--ease);
}
.vid:hover .play{ transform: scale(1); opacity: 1; }
.vid .dur{ position: absolute; z-index: 2; right: 12px; top: 12px; background: rgba(34,16,42,.62); color: #fff; font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.filters{ display: flex; flex-wrap: wrap; gap: 8px; }
.filters button{
  background: transparent; border: 1px solid var(--ink-12); border-radius: 999px;
  padding: 8px 16px; font-size: .85rem; font-weight: 600; color: var(--ink-70); cursor: pointer;
  transition: all .25s var(--ease);
}
.filters button:hover{ border-color: var(--ink-38); color: var(--ink); }
.filters button.on{ background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- dashboard mock ---------- */
.dash{
  background: var(--paper); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); overflow: hidden; border: 1px solid var(--ink-12);
}
.dash-bar{ display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--ink-12); background: var(--sand); }
.dash-bar i{ width: 9px; height: 9px; border-radius: 99px; background: var(--ink-12); display: block; }
.dash-bar .url{ margin-left: 12px; font-size: .74rem; color: var(--ink-38); background: var(--paper); padding: 4px 12px; border-radius: 99px; }
.dash-body{ padding: 22px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.tile{ background: var(--sand); border-radius: var(--radius); padding: 18px; }
.tile .lbl{ font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-38); font-weight: 700; }
.tile .val{ font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.045em; margin-top: 6px; line-height: 1; }
.tile .delta{ font-size: .78rem; color: var(--moss); font-weight: 600; margin-top: 6px; }
.chart-wrap{ margin-top: 14px; }
.ring{ display: grid; place-items: center; position: relative; }
.ring .pct{ position: absolute; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; }

/* ---------- pricing ---------- */
.toggle{
  display: inline-flex; background: var(--ink-07); border-radius: 999px; padding: 4px; gap: 2px;
}
.toggle button{
  border: 0; background: transparent; border-radius: 999px; cursor: pointer;
  padding: 9px 20px; font-size: .875rem; font-weight: 600; color: var(--ink-52);
  transition: all .3s var(--ease);
}
.toggle button.on{ background: var(--paper); color: var(--ink); box-shadow: var(--shadow-s); }
.toggle .save{ color: var(--clay); font-weight: 700; }

.plan{ display: flex; flex-direction: column; }
.plan .price{ display: flex; align-items: baseline; gap: 4px; margin-block: 18px 6px; }
.plan .price .amt{ font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; letter-spacing: -0.05em; line-height: 1; }
.plan .price .per{ font-size: .9rem; color: var(--ink-52); }
.plan ul{ margin-top: 24px; display: grid; gap: 12px; flex: 1; }
.plan li{ display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--ink-70); }
.plan li svg{ flex: none; margin-top: 3px; color: var(--clay); }
.plan .btn{ margin-top: 26px; width: 100%; }
.plan-featured{ position: relative; }
.plan-featured .ribbon{ position: absolute; top: 22px; right: 24px; }
.card-ink.plan li{ color: rgba(255,255,255,.7); }
.card-ink.plan li svg{ color: var(--blush); }
.card-ink.plan .price .per{ color: rgba(255,255,255,.55); }

/* ---------- faq ---------- */
.faq{ border-top: 1px solid var(--ink-12); }
.faq details{ border-bottom: 1px solid var(--ink-12); }
.faq summary{
  list-style: none; cursor: pointer; padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary .plus{ flex: none; width: 22px; height: 22px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after{
  content:""; position: absolute; inset: 0; margin: auto; background: var(--ink);
  transition: transform .3s var(--ease);
}
.faq summary .plus::before{ width: 14px; height: 1.6px; }
.faq summary .plus::after{ width: 1.6px; height: 14px; }
.faq details[open] summary .plus::after{ transform: rotate(90deg); }
.faq .ans{ padding-bottom: 24px; color: var(--ink-70); font-size: .96rem; max-width: 74ch; }

/* ---------- cta band ---------- */
.cta-band{
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-xl);
  padding: clamp(44px, 6vw, 80px);
}
.cta-band::before{
  content:""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,141,.55), transparent 66%);
  right: -180px; top: -260px;
}
.cta-band::after{
  content:""; position: absolute; inset: 0; background-image: var(--grain); opacity: .1; pointer-events: none;
}
.cta-band > *{ position: relative; z-index: 2; }
.cta-band .lead{ color: rgba(255,255,255,.7); }

/* ---------- footer ---------- */
.footer{ background: var(--sand); padding-block: 64px 34px; }
.footer-grid{ display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.footer h4{ font-family: var(--font-body); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-38); font-weight: 700; margin-bottom: 16px; }
.footer li + li{ margin-top: 9px; }
.footer a{ font-size: .9rem; color: var(--ink-70); }
.footer a:hover{ color: var(--ink); }
.footer-bottom{
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ink-12);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}
.newsletter{ display: flex; gap: 8px; margin-top: 20px; max-width: 340px; }
.newsletter input{
  flex: 1; border: 1px solid var(--ink-12); background: var(--paper);
  border-radius: 999px; padding: 12px 18px; font-size: .88rem; outline: none;
  transition: border-color .25s var(--ease);
}
.newsletter input:focus{ border-color: var(--ink); }
.socials{ display: flex; gap: 8px; margin-top: 22px; }
.socials a{ width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--ink-12); display: grid; place-items: center; transition: all .25s var(--ease); }
.socials a:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- reveal ---------- */
/* Scoped to .js so the page still reads correctly if the script never runs. */
.js .rv{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .rv{ opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   app.html · member dashboard
   ========================================================================== */
.app-shell{ display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.app-shell > *{ min-width: 0; }
.side{ background: var(--ink); color: var(--paper); padding: 24px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.side .logo{ color: var(--paper); padding: 0 10px 26px; }
.side-nav{ display: grid; gap: 3px; }
.side-nav a{
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.6); transition: all .2s var(--ease);
}
.side-nav a:hover{ color: #fff; background: rgba(255,255,255,.07); }
.side-nav a.on{ color: var(--ink); background: var(--paper); font-weight: 700; }
.side-foot{ margin-top: auto; background: rgba(255,255,255,.06); border-radius: var(--radius); padding: 16px; }
.ex-row{ display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ink-07); }
.ex-row:last-child{ border-bottom: 0; }
.ex-thumb{ width: 52px; height: 52px; border-radius: 12px; flex: none; }
.ex-row .nm{ font-weight: 700; font-size: .93rem; letter-spacing: -0.015em; }
.ex-row .st{ font-size: .8rem; color: var(--ink-52); }
.ex-row .sets{ margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--ink-70); background: var(--sand); padding: 6px 12px; border-radius: 99px; }
.gx-2a{ grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr); }
.gx-3a{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1120px){
  .gx-3a{ grid-template-columns: 1fr 1fr; }
  .gx-3a > :first-child{ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  .gx-2a{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px){
  .gx-3a{ grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   pitch.html
   ========================================================================== */
.pitch-hero{ background: var(--ink); color: var(--paper); padding-block: clamp(70px, 9vw, 128px); position: relative; overflow: hidden; }
.pitch-hero::before{ content:""; position: absolute; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(255,77,141,.4), transparent 65%); right: -240px; top: -340px; }
.pitch-hero .wrap{ position: relative; z-index: 2; }
.pitch-hero .lead{ color: rgba(255,255,255,.68); }
.metric{ border-top: 2px solid var(--ink); padding-top: 20px; }
.metric .num{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem,4vw,3.2rem); letter-spacing: -0.05em; line-height: 1; }
.metric .cap{ margin-top: 10px; font-size: .9rem; color: var(--ink-52); }
.table{ width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td{ text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--ink-12); }
.table th{ font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-38); font-weight: 700; }
.table td b{ font-weight: 700; }
.table tr:last-child td{ border-bottom: 0; }
.table .r{ text-align: right; }
.table-wrap{ overflow-x: auto; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1040px){
  .hero-grid{ grid-template-columns: 1fr; gap: 60px; }
  .hero-art{ width: 100%; max-width: 460px; margin-inline: auto; }
  .g4{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > :first-child{ grid-column: 1 / -1; }
}
@media (max-width: 860px){
  .nav-links, .nav-actions .signin{ display: none; }
  .burger{ display: block; }
  .g3{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .stats .grid{ grid-template-columns: repeat(2,1fr); }
  .stat{ border-bottom: 1px solid var(--ink-12); }
  .stat:nth-child(2n){ border-right: 0; }
  .stat:nth-last-child(-n+2){ border-bottom: 0; }
  .dash-body{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  :root{ --gut: 18px; }
  .g2, .g4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .fc-session{ left: -8px; width: 190px; }
  .fc-ring{ right: -8px; width: 150px; }
  .fc-streak{ left: 4%; width: 215px; }
  .cta-band{ border-radius: var(--radius-l); }
}

/* ==========================================================================
   catalogue  ·  toolbar, cards, detail page
   ========================================================================== */
.toolbar{
  display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-end;
  justify-content: space-between;
}
.search{ flex: 1 1 300px; max-width: 380px; }
.search-box{ position: relative; display: flex; align-items: center; }
.search-box svg{ position: absolute; left: 16px; color: var(--ink-38); pointer-events: none; }
.search input{
  width: 100%; border: 1px solid var(--ink-12); background: var(--paper);
  border-radius: 999px; padding: 13px 18px 13px 42px; font-size: .92rem;
  outline: none; transition: border-color .25s var(--ease); -webkit-appearance: none;
}
.search input:focus{ border-color: var(--ink); }

.selects{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; flex: 1 1 auto; }
.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span{
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-38); font-weight: 700; padding-left: 4px;
}
.field select{
  border: 1px solid var(--ink-12); background-color: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 11px 34px 11px 16px; font-size: .87rem; font-weight: 600;
  cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2322102a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color .25s var(--ease);
}
.field select:focus, .field select:hover{ border-color: var(--ink-38); }

.prog-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.prog-top h3{ font-size: 1.24rem; }
.price-tag{
  flex: none; font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: -0.035em; color: var(--clay);
  background: rgba(255,77,141,.09); border-radius: 999px; padding: 5px 12px;
}
.empty{
  grid-column: 1 / -1; text-align: center; padding: 70px 20px;
  border: 1px dashed var(--ink-12); border-radius: var(--radius-l);
}
.empty .btn{ margin-top: 22px; }

/* ---------- program detail ---------- */
.pd-top{ background: var(--sand); }
.pd-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 64px); align-items: start; }
.link-back{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 600; color: var(--ink-52); margin-bottom: 22px;
  transition: color .2s var(--ease), gap .25s var(--ease);
}
.link-back:hover{ color: var(--ink); gap: 11px; }
.pill-row{ display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.pd-grid h1{ margin-bottom: 20px; }
.pd-stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 34px; border-top: 1px solid var(--ink-12);
}
.pd-stats > div{ padding: 20px 18px 0 0; }
.pd-stats .n{
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.05em; line-height: 1;
}
.pd-stats .l{ display: block; margin-top: 7px; font-size: .8rem; color: var(--ink-52); }

.pd-buy{
  background: var(--paper); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--shadow); position: sticky; top: 92px;
}
.pd-cover{ width: 100%; aspect-ratio: 16/10.5; object-fit: cover; background: var(--sand-deep); }
.pd-buy-body{ padding: 24px; }
.pd-price{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pd-price .amt{ font-family: var(--font-display); font-weight: 800; font-size: 2.7rem; letter-spacing: -0.05em; line-height: 1; }
.pd-price .per{ font-size: .84rem; color: var(--ink-52); }
.pd-or{ position: relative; text-align: center; margin: 20px 0; }
.pd-or::before{ content:""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--ink-12); }
.pd-or span{ position: relative; background: var(--paper); padding: 0 12px; font-size: .74rem; color: var(--ink-38); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.pd-member{ background: var(--sand); border-radius: var(--radius); padding: 18px; }
.pd-member p{ margin-top: 8px; }

/* ---------- chips ---------- */
.chips{ display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chips::-webkit-scrollbar{ height: 4px; }
.chips::-webkit-scrollbar-thumb{ background: var(--ink-12); border-radius: 99px; }
.chips button{
  flex: none; border: 1px solid var(--ink-12); background: var(--paper);
  border-radius: 999px; padding: 9px 15px; font-size: .82rem; font-weight: 600;
  color: var(--ink-70); cursor: pointer; transition: all .22s var(--ease);
}
.chips button:hover{ border-color: var(--ink-38); color: var(--ink); }
.chips button.on{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chips-days{ margin-top: 10px; }
.chips-days button.on{ background: var(--clay); border-color: var(--clay); color: #fff; }

/* ---------- session table ---------- */
.sess-head{ padding: 18px 14px 6px; }
.sess-head h3{ margin-top: 12px; }
.sess-head .small{ margin-top: 8px; }
.phase-badge{
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: var(--ink-07); color: var(--ink-70);
}
.phase-badge.phase-intensification{ background: rgba(255,77,141,.14); color: var(--clay-deep); }
.phase-badge.phase-retest{ background: rgba(47,93,78,.12); color: var(--moss); }
.phase-badge.phase-deload{ background: rgba(34,16,42,.07); color: var(--ink-70); }
.sess-table td{ vertical-align: top; }
.sess-table td:first-child{ min-width: 230px; }
.sess-table .ex-name{ display: block; font-weight: 700; letter-spacing: -0.018em; }
.sess-table .ex-role{
  display: inline-block; margin-top: 5px; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-38);
}
.sess-table .ex-cue{ display: block; margin-top: 5px; font-size: .82rem; color: var(--ink-52); max-width: 34ch; }

/* ---------- media blocks ---------- */
.media{ position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--sand-deep); }
.media img{ width: 100%; height: 100%; object-fit: cover; }
.vid img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: 0; }
.vid:hover img{ transform: scale(1.05); }
.ex-thumb{ object-fit: cover; }
.art-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   responsive  ·  second pass
   ========================================================================== */
@media (max-width: 1180px){
  .search{ flex: 1 1 100%; max-width: none; }
  .selects{ justify-content: flex-start; }
}
@media (max-width: 1024px){
  .pd-grid{ grid-template-columns: 1fr; }
  .pd-buy{ position: static; max-width: 520px; }
}
@media (max-width: 860px){
  .g4{ grid-template-columns: repeat(2, 1fr); }
  .steps.g4{ grid-template-columns: 1fr 1fr; }
  .field select{ padding: 10px 30px 10px 14px; font-size: .84rem; }
}
@media (max-width: 700px){
  .topbar{ font-size: .72rem; }
  .topbar .wrap{ gap: 7px; }
  .hero{ padding-top: 30px; }
  .h-xxl{ line-height: .98; }
  .hero .btn-row .btn{ flex: 1 1 100%; }
  .section{ padding-block: 62px; }
  .section-tight{ padding-block: 46px; }
  .card{ padding: 22px; }
  .pd-stats{ grid-template-columns: 1fr 1fr; }
  .pd-stats > div{ padding: 18px 14px 0 0; }
  .selects{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .field select{ width: 100%; }
  .steps.g4{ grid-template-columns: 1fr; }
  .split-copy ul{ gap: 12px; }
  .cta-band{ padding: 34px 24px; }
  .footer{ padding-block: 48px 28px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .sess-table td:first-child{ min-width: 190px; }
  .sess-head{ padding: 16px 8px 4px; }
  .table th, .table td{ padding: 13px 10px; }
  .plan .price .amt{ font-size: 2.9rem; }
  .marquee span{ font-size: .92rem; gap: 30px; }
  .marquee-track{ gap: 30px; }
}
@media (max-width: 560px){
  .g4, .g3, .g2{ grid-template-columns: 1fr; }
  .stats .grid{ grid-template-columns: 1fr 1fr; }
  .hero-art{ width: 100%; max-width: 100%; }
  .fc-session{ left: 0; top: 6%; width: 172px; padding: 12px 13px; }
  .fc-ring{ right: 0; top: 44%; width: 132px; padding: 12px; }
  .fc-streak{ left: 0; bottom: -14px; width: 196px; padding: 12px 13px; }
  .fc-title{ font-size: .84rem; }
  .fc-label{ font-size: .62rem; }
  .ring .pct{ font-size: 1.2rem; }
  .toggle button{ padding: 9px 15px; font-size: .82rem; }
  .prog-top h3{ font-size: 1.14rem; }
  .ex-row{ flex-wrap: wrap; }
  .ex-row .sets{ margin-left: 0; width: 100%; text-align: center; }
  .filters{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .filters button{ flex: none; }
}
@media (max-width: 420px){
  .stats .grid{ grid-template-columns: 1fr; }
  .stat{ border-right: 0; }
  .logo{ font-size: 1.2rem; }
  .btn-lg{ padding: 15px 24px; font-size: .93rem; }
}

/* ---------- touch: drop hover transforms ---------- */
@media (hover: none){
  .btn:hover{ transform: none; box-shadow: none; }
  .card-hover:hover{ transform: none; }
  .card-hover:hover .prog-art img{ transform: none; }
  .vid .play{ opacity: 1; transform: scale(1); }
}

#shop-grid .prog-art{ aspect-ratio: 1 / 1; background: var(--sand); }
#shop-grid .prog-art img{ object-fit: cover; }

@media (max-width: 780px){ #checkout{ grid-template-columns: 1fr !important; } #checkout .card-sand{ position: static !important; } }

.img-missing{ background: linear-gradient(150deg, #ffd9e7, #ff4d8d 70%, #c1004e); }

.pd-included{ margin-top: 30px; display: grid; gap: 12px; }
.pd-included li{ display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; color: var(--ink-70); }
.pd-included li svg{ flex: none; margin-top: 3px; color: var(--clay); }

/* Small label cards stay two-up on a phone rather than becoming a long stack. */
@media (max-width: 560px){
  .grid.g-2up{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid.g-2up .h-s{ font-size: .98rem; }
}

/* ==========================================================================
   dashboard  ·  rebuilt
   ========================================================================== */
.app-main{ padding: 32px clamp(18px, 3vw, 40px) 60px; background: var(--sand); }

.app-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.app-date{
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-38); margin-bottom: 8px;
}

.dash-cols{ display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, .95fr); gap: 20px; align-items: start; }
.dash-main{ display: grid; gap: 20px; }
.dash-rail{ display: grid; gap: 20px; position: sticky; top: 20px; }

.app-card{
  background: var(--paper); border-radius: var(--radius-l); padding: 22px;
  border: 1px solid rgba(34,16,42,.05);
}
.card-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}

/* ---------- today ---------- */
.today{
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-l); padding: clamp(24px, 3vw, 34px);
  position: relative; overflow: hidden;
}
.today::before{
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,141,.45), transparent 68%);
  right: -150px; top: -190px;
}
.today > *{ position: relative; z-index: 2; }
.today h2{ color: var(--paper); margin: 18px 0 12px; }
.today .lead{ color: rgba(255,255,255,.68); font-size: 1rem; max-width: 46ch; }
.today-top{ display: flex; flex-wrap: wrap; gap: 8px; }
.pill-onink{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); color: #fff; }

.today-stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 26px; background: rgba(255,255,255,.1);
  border-radius: 16px; overflow: hidden;
}
.today-stats > div{ background: #1a0820; padding: 15px 16px; }
.today-stats .k{
  display: block; font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.42);
}
.today-stats .v{
  display: block; margin-top: 7px; font-family: var(--font-display); font-weight: 800;
  font-size: 1.12rem; letter-spacing: -0.03em; color: #fff;
}

/* ---------- the log ---------- */
.log{ display: grid; }
.log-row{
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 15px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--ink-07);
}
.log-row:first-child{ border-top: 0; padding-top: 4px; }
.log-row .ex-thumb{ width: 56px; height: 56px; border-radius: 13px; }
.log-body .nm{ display: block; font-weight: 700; font-size: .97rem; letter-spacing: -0.018em; }
.log-body .st{ display: block; margin-top: 3px; font-size: .83rem; color: var(--ink-52); }
.set-list{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.set{
  border: 1px solid var(--ink-12); border-radius: 9px;
  padding: 6px 11px; font-size: .8rem; font-weight: 600; color: var(--ink-70);
  cursor: pointer; background: var(--paper);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.set:hover{ border-color: var(--ink); color: var(--ink); }
.set.done{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.log-tag{
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-38); white-space: nowrap; padding-top: 3px;
}

/* ---------- progress tiles ---------- */
.section-label{ margin: 8px 0 -6px; }
.dash-tiles{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1.15fr); gap: 20px; }
.tile-val{
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem;
  letter-spacing: -0.05em; line-height: 1; margin-top: 9px;
}
.tile-val em{ font-family: var(--font-body); font-style: normal; font-size: .95rem; font-weight: 600; color: var(--ink-52); letter-spacing: 0; }
.delta{ display: block; margin-top: 8px; font-size: .82rem; font-weight: 600; }
.delta.up{ color: var(--moss); }
.app-card .tiny{ display: block; margin-top: 10px; }
.app-card.center{ display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ---------- rail ---------- */
.cal{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal i{
  aspect-ratio: 1; border-radius: 10px; background: var(--ink-07);
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
  color: var(--ink-38); font-style: normal;
}
.cal i.done{ background: var(--ink); color: var(--paper); }
.cal i.now{ background: var(--clay); color: #fff; }
.cal i.rest{ background: transparent; border: 1px dashed var(--ink-12); }

.legend{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.legend span{ display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-52); }
.legend .sw{ width: 10px; height: 10px; border-radius: 3px; background: var(--ink-12); display: block; }
.legend .sw.done{ background: var(--ink); }
.legend .sw.now{ background: var(--clay); }

.rail-split{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ink-07);
  margin-bottom: 8px;
}
.rail-split .tile-val{ font-size: 1.6rem; }

.next-row{
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--ink-07);
}
.next-row:first-of-type{ border-top: 0; }
.next-day{
  background: var(--sand); border-radius: 10px; padding: 8px 0; text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-70);
}
.next-row.is-phase .next-day{ background: rgba(255,77,141,.1); color: var(--clay-deep); }
.next-row .nm{ display: block; font-weight: 700; font-size: .9rem; letter-spacing: -0.015em; }
.next-row .st{ display: block; margin-top: 2px; font-size: .79rem; color: var(--ink-52); }

.thread{ margin-top: 14px; }
.thread-row{
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--ink-07);
}
.thread-row:first-child{ border-top: 0; }
.tdot{ width: 7px; height: 7px; border-radius: 99px; background: var(--clay); margin-top: 6px; }
.thread-row .nm{ display: block; font-weight: 700; font-size: .88rem; letter-spacing: -0.015em; }
.thread-row .st{ display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-52); }

.empty-slot{
  margin-top: 14px; border: 1px dashed var(--ink-12); border-radius: 16px;
  padding: 26px 16px; display: grid; place-items: center; gap: 10px;
  color: var(--ink-38); text-align: center;
}
.empty-slot span{ font-size: .82rem; }

.app-note{ margin-top: 26px; }
.app-note a{ color: var(--ink-70); border-bottom: 1px solid var(--ink-12); }
.app-note a:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------- dashboard responsive ---------- */
@media (max-width: 1180px){
  .dash-cols{ grid-template-columns: minmax(0, 1fr); }
  .dash-rail{ position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .dash-tiles{ grid-template-columns: 1fr 1fr; }
  .dash-tiles > :last-child{ grid-column: 1 / -1; }
}
@media (max-width: 700px){
  .dash-rail{ grid-template-columns: 1fr; }
  .today-stats{ grid-template-columns: 1fr 1fr; }
  .dash-tiles{ grid-template-columns: 1fr; }
  .dash-tiles > :last-child{ grid-column: auto; }
  .log-row{ grid-template-columns: 46px minmax(0, 1fr); }
  .log-row .ex-thumb{ width: 46px; height: 46px; }
  .log-tag{ grid-column: 2; padding-top: 0; margin-top: -4px; order: -1; }
  .app-head .btn-row{ width: 100%; }
  .app-head .btn{ flex: 1; }
}

/* ==========================================================================
   editorial  ·  spec list + written note
   --------------------------------------------------------------------------
   Two layouts that deliberately break the eyebrow / headline / three-cards
   rhythm the rest of the page uses, so the page does not read as one template
   repeated eight times.
   ========================================================================== */

/* ---------- spec list (replaces the icon tile grid) ---------- */
.spec{ margin-top: 54px; border-top: 1px solid var(--ink); }
.spec > div{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 4vw, 56px);
  padding: 26px 0; border-bottom: 1px solid var(--ink-12);
}
.spec dt{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.08rem, 1.5vw, 1.32rem); letter-spacing: -0.028em; line-height: 1.15;
}
.spec dd{ margin: 0; color: var(--ink-70); font-size: .96rem; line-height: 1.62; max-width: 62ch; }
.spec > div:hover dt{ color: var(--clay); transition: color .25s var(--ease); }

/* ---------- the written note ---------- */
.note-section{ background: var(--ink); color: var(--paper); }
.note{ max-width: 60ch; margin-inline: auto; }
.note-kicker{
  font-size: .715rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blush); margin-bottom: 30px;
}
.note-lead{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.18;
  letter-spacing: -0.015em; color: var(--paper); margin-bottom: 26px;
}
.note p:not(.note-kicker):not(.note-lead):not(.note-sign){
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.62;
  color: rgba(255,253,251,.74); margin-bottom: 20px;
}
.note-sign{
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .84rem; color: rgba(255,255,255,.45); letter-spacing: .01em;
}

@media (max-width: 760px){
  .spec > div{ grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
}

/* ==========================================================================
   the matcher  ·  quiz.html
   ========================================================================== */
.quiz-page{ padding-block: clamp(38px, 6vw, 76px) clamp(60px, 8vw, 110px); }
.quiz-shell{ max-width: 720px; margin-inline: auto; }

.quiz-bar{ height: 3px; background: var(--ink-07); border-radius: 99px; overflow: hidden; }
.quiz-bar span{
  display: block; height: 100%; background: var(--clay); border-radius: 99px;
  transition: width .45s var(--ease);
}
.quiz-meta{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-38);
}
.quiz-back{
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; color: var(--ink-52); letter-spacing: .12em;
}
.quiz-back:hover{ color: var(--ink); }

.quiz-q{ margin-top: 26px; }
.quiz-help{ margin-top: 14px; color: var(--ink-52); font-size: .95rem; max-width: 52ch; }

.quiz-options{ display: grid; gap: 10px; margin-top: 34px; }
.quiz-opt{
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--ink-12);
  border-radius: var(--radius); padding: 18px 20px;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.quiz-opt:hover{ border-color: var(--ink); transform: translateX(3px); }
.qo-label{ display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }
.qo-sub{ display: block; margin-top: 4px; font-size: .85rem; color: var(--ink-52); }
.qo-arrow{ grid-row: 1 / 3; grid-column: 2; color: var(--ink-38); }
.quiz-opt:hover .qo-arrow{ color: var(--clay); }

/* ---------- result ---------- */
.quiz-result{ max-width: 800px; }
.result-card{
  margin-top: 32px; background: var(--paper); border: 1px solid var(--ink-12);
  border-radius: var(--radius-l); overflow: hidden;
}
.result-card > img{ width: 100%; aspect-ratio: 16 / 8; object-fit: cover; background: var(--sand-deep); }
.result-body{ padding: clamp(22px, 3vw, 30px); }
.why-list{ display: grid; gap: 10px; margin-top: 14px; }
.why-list li{ display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-70); }
.why-list svg{ flex: none; margin-top: 4px; color: var(--clay); }

.alt-list{ display: grid; gap: 10px; margin-top: 20px; }
.alt{
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  background: var(--paper); border: 1px solid var(--ink-12);
  border-radius: var(--radius); padding: 12px 16px 12px 12px;
  transition: border-color .2s var(--ease);
}
.alt:hover{ border-color: var(--ink); }
.alt img{ width: 74px; height: 56px; border-radius: 11px; object-fit: cover; background: var(--sand-deep); }
.alt .nm{ display: block; font-weight: 700; letter-spacing: -0.018em; }
.alt .st{ display: block; margin-top: 3px; font-size: .82rem; color: var(--ink-52); }

.quiz-foot{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px;
  padding-top: 24px; border-top: 1px solid var(--ink-12);
}

/* ==========================================================================
   auth pages  ·  login.html / signup.html
   ========================================================================== */
.auth-page{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 100vh; }
.auth-aside{
  background: var(--ink); color: var(--paper);
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 28px;
  position: relative; overflow: hidden;
}
.auth-aside::before{
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,141,.42), transparent 68%);
  right: -200px; top: -220px;
}
.auth-aside > *{ position: relative; z-index: 2; }
.auth-aside .logo{ color: var(--paper); }
.auth-aside-body{ margin-top: auto; }
.auth-aside h1{ color: var(--paper); }
.auth-aside .lead{ color: rgba(255,255,255,.68); margin-top: 16px; }
.auth-aside .tiny{ color: rgba(255,255,255,.45); margin-top: auto; }
.auth-aside .tiny a{ color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.3); }
.auth-points{ display: grid; gap: 11px; margin-top: 26px; }
.auth-points li{ display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; color: rgba(255,255,255,.78); }
.auth-points svg{ flex: none; margin-top: 3px; color: var(--blush); }

.auth-main{ display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) var(--gut); background: var(--sand); }
.auth-slot{ width: 100%; max-width: 440px; }
.auth-loading{ text-align: center; color: var(--ink-38); font-size: .9rem; padding: 60px 0; }
.auth-error{
  background: var(--paper); border: 1px solid var(--ink-12); border-radius: var(--radius-l);
  padding: 30px; text-align: center;
}
.auth-error p{ margin: 10px 0 18px; }


@media (max-width: 860px){
  .auth-page{ grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-aside{ gap: 20px; }
  .auth-aside-body{ margin-top: 20px; }
  .auth-aside .tiny{ margin-top: 20px; }
  .auth-main{ padding-block: 34px 60px; }
}

/* ==========================================================================
   preview lock  ·  week one is free, the rest comes with the block
   ========================================================================== */
.chips button.locked{ color: var(--ink-38); gap: 5px; display: inline-flex; align-items: center; }
.chips button.locked svg{ opacity: .6; }
.chips button.locked:hover{ border-color: var(--clay); color: var(--clay-deep); }
.chips button.locked.on{ background: var(--clay); border-color: var(--clay); color: #fff; }
.chips button.locked.on svg{ opacity: 1; }

.badge-preview{ background: rgba(255,77,141,.12); color: var(--clay-deep); margin-left: 8px; }

.locked-panel{
  text-align: center; padding: clamp(34px, 6vw, 60px) clamp(20px, 4vw, 40px);
  max-width: 560px; margin-inline: auto;
}
.locked-panel .lead{ margin: 14px auto 0; }
.locked-ic{
  width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: rgba(255,77,141,.1); color: var(--clay);
}

/* ==========================================================================
   session runner  ·  session.html
   --------------------------------------------------------------------------
   Phone in one hand, in a gym. Dark ground to cut glare, 56px+ hit targets,
   the primary action pinned where a thumb reaches, and no scrolling needed to
   log a set.
   ========================================================================== */
.run-body{ background: var(--ink); color: var(--paper); }
.runner{
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  max-width: 560px; margin-inline: auto;
  padding: max(10px, env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
  position: relative;
}
.run-loading{ margin: auto; color: rgba(255,255,255,.45); font-size: .92rem; }

/* ---------- header ---------- */
.run-top{ display: flex; align-items: center; gap: 14px; padding: 6px 0 14px; }
.run-back{
  width: 44px; height: 44px; flex: none; margin-left: -10px;
  display: grid; place-items: center; border-radius: 999px;
  color: rgba(255,255,255,.7);
}
.run-back:active{ background: rgba(255,255,255,.08); }
.run-title{ min-width: 0; flex: 1; }
.run-prog{ display: block; font-weight: 700; font-size: .95rem; letter-spacing: -0.02em; }
.run-sub{
  display: block; margin-top: 2px; font-size: .76rem; color: rgba(255,255,255,.45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.run-count{
  flex: none; font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: -0.03em;
}
.run-count span{ color: rgba(255,255,255,.35); font-size: .85rem; }

/* ---------- exercise dots ---------- */
.run-dots{ display: flex; gap: 6px; padding-bottom: 20px; }
.run-dot{
  flex: 1; height: 5px; border: 0; padding: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.16);
  position: relative;
}
/* the visible bar is thin, the tappable area is not */
.run-dot::after{ content: ""; position: absolute; inset: -14px 0; }
.run-dot.done{ background: rgba(255,255,255,.5); }
.run-dot.on{ background: var(--clay); }

/* ---------- the exercise ---------- */
.run-main{ flex: 1; display: flex; flex-direction: column; }
.run-step{
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.42);
}
.run-role{ color: var(--blush); }
.run-name{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.02; letter-spacing: -0.04em;
  margin: 10px 0 10px;
}
.run-cue{ color: rgba(255,255,255,.62); font-size: .95rem; line-height: 1.5; }

.run-target{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 16px;
  background: rgba(255,255,255,.07); border-radius: 14px;
  font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.85);
}
.dot-sep{ width: 4px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.3); }

/* ---------- steppers ---------- */
.run-input{ margin-top: 22px; }
.run-set-label{
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--clay); margin-bottom: 12px;
}
.run-steppers{ display: grid; gap: 12px; grid-template-columns: 1fr; }
.run-steppers:has(.stepper + .stepper){ grid-template-columns: 1fr 1fr; }
.stepper{
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  background: rgba(255,255,255,.07); border-radius: 16px; overflow: hidden;
}
/* Renamed from .step: the marketing phase card on programs.html owns that
   name, and its padding-top:26px was leaking onto this 68px button. */
.stepbtn{
  height: 68px; border: 0; background: transparent; color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.stepbtn:active{ background: rgba(255,255,255,.12); }
.step-val{ text-align: center; padding: 4px 2px; }
.step-val b{
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.7rem; letter-spacing: -0.04em; line-height: 1;
}
.step-val span{ display: block; margin-top: 3px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }

/* ---------- logged sets ---------- */
.run-log{ margin-top: 18px; display: grid; gap: 2px; }
.run-log li{
  display: grid; grid-template-columns: 60px 1fr auto; align-items: center;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .88rem;
}
.run-log .n{ color: rgba(255,255,255,.42); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.run-log .v{ font-weight: 700; }
.undo{
  border: 0; background: none; color: rgba(255,255,255,.4);
  font-size: .78rem; padding: 8px 4px 8px 14px; cursor: pointer;
}
.undo:active{ color: #fff; }

.run-done{
  display: flex; align-items: center; gap: 12px; margin-top: 24px;
  padding: 20px; border-radius: 16px;
  background: rgba(47,93,78,.22); color: #9fd9bd; font-weight: 700;
}

/* ---------- actions ---------- */
.run-foot{ padding-top: 22px; }
.run-primary{
  width: 100%; height: 66px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--clay); color: #fff;
  font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  -webkit-tap-highlight-color: transparent;
}
.run-primary:active{ background: var(--clay-deep); transform: scale(.99); }
.run-primary.ghost{ background: rgba(255,255,255,.1); }
.run-primary.ghost:active{ background: rgba(255,255,255,.16); }

.run-nav{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.run-side{
  height: 48px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.55);
  font-size: .84rem; font-weight: 600;
}
.run-side:active:not(:disabled){ background: rgba(255,255,255,.08); color: #fff; }
.run-side:disabled{ opacity: .28; cursor: default; }

/* ---------- rest sheet ---------- */
.rest-sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #1a0820; border-top: 1px solid rgba(255,255,255,.1);
  padding-bottom: env(safe-area-inset-bottom);
  animation: restUp .3s var(--ease);
}
@keyframes restUp{ from{ transform: translateY(100%); } to{ transform: none; } }
.rest-bar{ height: 3px; background: rgba(255,255,255,.12); }
.rest-bar span{ display: block; height: 100%; background: var(--clay); transition: width 1s linear; }
.rest-body{
  max-width: 560px; margin-inline: auto;
  padding: 16px 18px 20px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px;
}
.rest-label{
  grid-column: 1; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.42);
}
.rest-clock{
  grid-column: 1; grid-row: 2;
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
  letter-spacing: -0.05em; line-height: 1;
}
.rest-actions{ grid-column: 2; grid-row: 1 / 3; display: flex; gap: 8px; justify-content: flex-end; }
.rest-btn{
  height: 52px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff;
  font-size: .9rem; font-weight: 600;
}
.rest-btn.primary{ background: #fff; color: var(--ink); border-color: #fff; }
.rest-btn:active{ opacity: .8; }

/* ---------- finish ---------- */
.run-finish{ margin: auto; text-align: center; padding: 40px 0; }
.run-finish h1{ color: var(--paper); margin-top: 20px; }
.run-finish .lead{ color: rgba(255,255,255,.6); margin-top: 10px; }
.finish-ic{
  width: 64px; height: 64px; border-radius: 999px; margin: 0 auto;
  display: grid; place-items: center;
  background: rgba(47,93,78,.28); color: #9fd9bd;
}
.finish-stats{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px;
}
.finish-stats > div{ background: rgba(255,255,255,.07); border-radius: 16px; padding: 18px 10px; }
.finish-stats .n{
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.04em; line-height: 1;
}
.finish-stats .l{ display: block; margin-top: 6px; font-size: .72rem; color: rgba(255,255,255,.45); }

/* Wider screens get more air, not a different layout. */
@media (min-width: 620px){
  .runner{ padding-inline: 28px; }
  .run-name{ font-size: 2.9rem; }
}

/* ---------- runner: the space between steppers and the button ---------- */
.run-context{ margin-top: auto; padding-top: 26px; display: grid; gap: 1px; }
.ctx{
  display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline;
  gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.ctx .k{
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.4);
}
.ctx .v{ font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.85); }
.ctx .v.muted{ font-weight: 500; color: rgba(255,255,255,.42); }

/* ==========================================================================
   tables that stack on a phone
   --------------------------------------------------------------------------
   A five column session table cannot shrink to 390px without hiding the two
   columns that matter most (load and rest) behind a horizontal scroll nobody
   discovers. Below 620px each row becomes a labelled block instead.
   ========================================================================== */
@media (max-width: 620px){
  .stack-table thead{ display: none; }
  .stack-table tbody, .stack-table tr, .stack-table td{ display: block; width: 100%; }
  .stack-table tr{ padding: 16px 0; border-bottom: 1px solid var(--ink-12); }
  .stack-table tr:last-child{ border-bottom: 0; }
  .stack-table td{ padding: 0; border: 0; }
  .stack-table td:first-child{ margin-bottom: 10px; min-width: 0; }
  .stack-table td[data-l]{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 6px 0;
  }
  .stack-table td[data-l]::before{
    content: attr(data-l);
    flex: none; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-38);
  }
  .stack-table td[data-l].r{ text-align: right; }
  /* the first cell carries the exercise name, it needs no label */
  .stack-table td:first-child[data-l]{ display: block; }
  .stack-table td:first-child[data-l]::before{ display: block; margin-bottom: 5px; }
  .sess-table td:first-child{ min-width: 0; }
  .sess-table .ex-cue{ max-width: none; }
}

/* ---------- plan state banner in the dashboard ---------- */
.plan-banner{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  background: var(--paper); border: 1px solid rgba(34,16,42,.05);
  border-radius: var(--radius-l); padding: 16px 20px; margin-bottom: 20px;
  font-size: .92rem; color: var(--ink-70);
}
.plan-banner .btn{ margin-left: auto; }
@media (max-width: 620px){ .plan-banner .btn{ margin-left: 0; width: 100%; } }

/* ==========================================================================
   legal pages + settings
   ========================================================================== */
.legal{ max-width: 720px; margin-inline: auto; }
.legal h1{ margin-top: 18px; }
.legal-date{ margin-top: 14px; font-size: .82rem; color: var(--ink-38); }
.legal-lead{
  margin: 30px 0 10px; padding: 22px 24px;
  background: var(--sand); border-radius: var(--radius-l);
}
.legal-lead p{ font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.legal h2{
  font-size: 1.24rem; letter-spacing: -0.028em;
  margin: 38px 0 12px; padding-top: 22px; border-top: 1px solid var(--ink-12);
}
.legal p, .legal li{ color: var(--ink-70); font-size: .96rem; line-height: 1.65; }
.legal p + p{ margin-top: 12px; }
.legal ul{ margin-top: 12px; display: grid; gap: 9px; padding-left: 20px; list-style: disc; }
.legal li{ padding-left: 4px; }
.legal a{ color: var(--clay-deep); border-bottom: 1px solid rgba(255,77,141,.3); }
.legal a:hover{ border-color: var(--clay); }
.legal .table{ margin-top: 14px; }
.legal-foot{ margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ink-12); font-size: .9rem; }

.set-card{
  background: var(--paper); border: 1px solid var(--ink-12);
  border-radius: var(--radius-l); padding: 24px; margin-top: 20px;
}
.set-card.danger{ border-color: rgba(255,77,141,.25); }
.set-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.set-body .small{ color: var(--ink-70); }
.kv{
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--ink-07);
}
.kv:first-child{ border-top: 0; }
.kv .k{ font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--ink-38); }
.kv .v{ font-size: .94rem; font-weight: 600; text-align: right; }
.owned-list{ display: grid; gap: 8px; }
.owned{
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px;
  align-items: center; padding: 14px 16px;
  border: 1px solid var(--ink-12); border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.owned:hover{ border-color: var(--ink); }
.owned .nm{ font-weight: 700; letter-spacing: -0.018em; }
.owned .st{ grid-column: 1; font-size: .82rem; color: var(--ink-52); }
.owned .pill{ grid-row: 1 / 3; }
.profile-slot{ margin-top: 18px; }

/* ---------- pricing: two tiers, badge inline instead of overlapping ---------- */
.price-pair{ max-width: 900px; margin-inline: auto; }
.plan-top{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- why you were bounced to pricing ---------- */
.locked-note{
  margin-top: 18px; display: inline-block;
  background: rgba(255,77,141,.1); color: var(--clay-deep);
  border-radius: 999px; padding: 10px 20px;
  font-size: .9rem; font-weight: 600;
}

/* ==========================================================================
   Movement library
   ========================================================================== */
.lib-tools { margin: 30px 0 26px; }
.lib-tools .search-box { max-width: 420px; }
.lib-tools .search-box input {
  width: 100%; padding: 13px 16px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: inherit;
}
.lib-tools .search-box input:focus { outline: 2px solid var(--clay); outline-offset: 1px; }
.lib-tools .chips { margin-top: 14px; }
#lib-count { margin-top: 12px; }

.lib-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.lib-grid > * { min-width: 0; }

.lib-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
}
.lib-shot {
  aspect-ratio: 1 / 1; background: var(--sand);
  overflow: hidden; border-bottom: 1px solid var(--line);
}
.lib-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lib-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lib-name { font-size: 16px; line-height: 1.25; margin: 0; }
.lib-cue { font-size: 13.5px; line-height: 1.5; opacity: .72; margin: 0; flex: 1; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lib-tags .pill { font-size: 11px; }

.lib-credit { margin-top: 34px; max-width: 62ch; opacity: .7; }

@media (max-width: 520px) {
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 14px; }
  .lib-body { padding: 12px 12px 14px; }
  .lib-name { font-size: 14.5px; }
  .lib-cue { font-size: 12.5px; }
}

/* -------------------------------------------------- demo clip, in a set -- */
.run-demo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 15px 9px 13px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: inherit; cursor: pointer;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
}
.run-demo::before {
  content: ''; width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.run-demo:hover { background: rgba(255,255,255,.13); }

body.no-scroll { overflow: hidden; }
.demo-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.82);
  display: grid; place-items: center; padding: 20px;
}
.demo-sheet { width: min(520px, 100%); }
.demo-shot {
  width: 100%; border-radius: 14px; display: block; background: var(--sand);
  aspect-ratio: 1 / 1; object-fit: cover;
}
.demo-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 14px; color: #fff;
}
.demo-name { font-weight: 700; font-size: 15px; }

/* Paid pages stay blank until the entitlement check clears. Scoped to .js so
   the content is still readable if scripting is off or auth never loads. */
html.js.gate-pending body { visibility: hidden; }

/* ==========================================================================
   Sweat-style layer  ·  announcement bar, photo hero, device, rails
   ========================================================================== */

/* ---------- announcement bar ---------- */
.ann { background: var(--plum); color: #fff; font-size: .8rem; }
.ann-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding-block: 10px; text-align: center; flex-wrap: wrap;
}
.ann a { color: var(--blush); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ann a:hover { color: #fff; }

/* ---------- nav sitting over the hero photo ---------- */

/* ---------- hero ---------- */
/* The header is sticky and in normal flow, so the hero is pulled up by exactly
   the header's measured height to put the photo back behind it. --stack-h is
   set by main.js; the fallback keeps the layout sane before scripts run. */
.shero {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * var(--stack-h, 111px));
  padding: calc(var(--stack-h, 111px) + 40px) 0 0;
}
.shero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 38%;
}
.shero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(42,15,46,.52) 0%, rgba(42,15,46,.22) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 22%);
}
.shero-inner { text-align: center; position: relative; }
.shero-h {
  font-size: clamp(2.35rem, 5.6vw, 4.6rem);
  font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.04;
  text-shadow: 0 2px 30px rgba(42,15,46,.35);
}
.shero-sub {
  margin: 20px auto 0; max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.16rem); color: #fff;
  /* The hero photo is bright and a text shadow does not count toward contrast,
     so the copy sits on its own scrim rather than straight on the picture. */
  background: rgba(26,8,32,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 12px 20px;
  border-radius: 16px;
  width: fit-content;
}
.shero .btn { margin-top: 28px; box-shadow: var(--shadow-pink); }
.shero-note { margin-top: 14px; font-size: .78rem; color: rgba(255,255,255,.82); }

/* ---------- the device ---------- */
.device { margin: 52px auto 0; width: min(340px, 82vw); }
.device-frame {
  position: relative; border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, #40204a, #1a0820);
  box-shadow: 0 40px 90px rgba(42,15,46,.34), 0 0 0 1.5px rgba(255,255,255,.14);
}
.device-notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px; background: #12060f; border-radius: 999px; z-index: 3;
}
.device-screen {
  background: #fff; border-radius: 35px; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
}

.ds-hero {
  position: relative; padding: 46px 16px 16px; background-size: cover;
  background-position: center; min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
}
.ds-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,15,46,.45), rgba(42,15,46,.72)); }
.ds-hero-tag, .ds-hero-t, .ds-hero-btn { position: relative; z-index: 2; }
.ds-hero-tag { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blush); }
.ds-hero-t { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.ds-hero-btn {
  align-self: flex-start; margin-top: 4px; background: var(--clay-ink); color: #fff;
  font-size: 11px; font-weight: 600; padding: 7px 15px; border-radius: 999px;
}
.ds-tabs { display: flex; border-bottom: 1px solid var(--line); }
.ds-tabs span { flex: 1; text-align: center; padding: 11px 4px; font-size: 10.5px; font-weight: 600; color: var(--ink-38); }
.ds-tabs .on { color: var(--ink); border-bottom: 2px solid var(--clay); font-weight: 700; }
.ds-body { padding: 14px 16px 8px; }
.ds-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-ink); }
.ds-name { font-size: 19px; font-weight: 700; margin-top: 5px; letter-spacing: -.025em; }
.ds-meta { font-size: 10.5px; color: var(--ink-52); margin-top: 3px; }
.ds-list { margin-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.ds-row { display: flex; align-items: center; gap: 9px; background: var(--sand); border-radius: 10px; padding: 9px 11px; }
.ds-i {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  background: var(--clay-ink); color: #fff; font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}
.ds-n { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: -.01em; }
.ds-s { font-size: 10px; color: var(--ink-52); font-weight: 600; }
.ds-tabbar { margin-top: 12px; border-top: 1px solid var(--line); display: flex; padding: 9px 4px 13px; }
.ds-tabbar span { flex: 1; text-align: center; font-size: 8.5px; color: var(--ink-38); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ds-tabbar i { width: 15px; height: 15px; border-radius: 5px; background: var(--ink-12); display: block; }
.ds-tabbar .on { color: var(--clay); font-weight: 700; }
.ds-tabbar .on i { background: var(--clay); }


/* ---------- alternating bands + splits ---------- */
.band { background: var(--sand); }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-2.reverse .split-copy { order: 2; }
.split-copy .lead { margin-top: 18px; }
.split-copy .btn-row { margin-top: 28px; }
.split-art { position: relative; }
.split-art img { width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 3/4; }
.split-art .art-2 { position: absolute; right: -6%; bottom: -10%; width: 46%; border: 5px solid #fff; box-shadow: var(--shadow-l); }
.split-art.solo .art-2 { display: none; }

.ticks { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; }
.tick { width: 19px; height: 19px; flex: none; margin-top: 2px; border-radius: 50%; background: var(--blush); position: relative; }
.tick::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 8px;
  border: solid var(--clay-deep); border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* ---------- progress card ---------- */
.prog-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; box-shadow: var(--shadow); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-name { font-weight: 700; letter-spacing: -.02em; }
.pc-up { background: var(--blush); color: var(--clay-deep); font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.pc-chart { margin-top: 22px; height: 130px; display: flex; align-items: flex-end; gap: 7px; }
.pc-chart span { flex: 1; background: var(--sand-deep); border-radius: 5px 5px 2px 2px; }
.pc-chart .hi { background: var(--clay); }
.pc-foot { display: flex; justify-content: space-between; margin-top: 9px; font-size: .72rem; color: var(--ink-38); }
.pc-rows { margin-top: 20px; border-top: 1px solid var(--line); }
.pc-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.pc-row:last-child { border-bottom: 0; }
.pc-row span { color: var(--ink-52); }

/* ---------- horizontal program rail ---------- */
.rail {
  margin-top: 38px; display: flex; gap: 18px;
  max-width: 100%; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  position: relative; scroll-snap-align: start; display: block;
  flex: 0 0 238px;
  border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 3/4;
  background: var(--sand-deep);
}
.rail-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rail-card:hover img { transform: scale(1.05); }
.rail-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,15,46,0) 42%, rgba(42,15,46,.82) 100%);
}
.rc-body { position: absolute; left: 18px; right: 18px; bottom: 17px; z-index: 2; color: #fff; }
.rc-t { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.025em; }
.rc-s { font-size: .78rem; color: rgba(255,255,255,.8); margin-top: 2px; }
.rc-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--clay-ink); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
.rail-nav { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.rail-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-12);
  background: var(--paper); cursor: pointer; font-size: 1rem; color: var(--ink);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.rail-btn:hover { border-color: var(--clay); color: var(--clay); }

.ulink { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split-2 { grid-template-columns: 1fr; }
  .split-2.reverse .split-copy { order: 0; }
  .split-art .art-2 { right: 0; bottom: -8%; width: 40%; }
}
@media (max-width: 620px) {
  .shero { padding-top: 118px; }
  .ann-inner { font-size: .74rem; gap: 8px; padding-block: 9px; }
  .device { width: min(280px, 76vw); margin-top: 40px; }
  .rail { gap: 13px; }
  .rail-card { flex-basis: 170px; }
  .rc-t { font-size: 1rem; }
  .split-art .art-2 { display: none; }
}

/* ---------- corrections to the Sweat layer ---------- */

/* The announcement bar and the nav travel together over the hero photo, so the
   nav can never overlap the bar no matter how the bar wraps on a small screen. */
/* Sticky rather than absolute, so the homepage nav stays reachable like every
   other page. Transparent over the hero photo, solid once you scroll past it,
   otherwise the white nav text would sit on white content. */
/* The nav inside the stack must stay above .mobile-menu (z 45), otherwise the
   burger is painted over and cannot be tapped to close the menu. */

/* White-on-white was unreadable over the pale floor in the hero photo. */
.shero-note {
  display: table; margin: 16px auto 0;
  background: rgba(26,8,32,.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 7px 16px; border-radius: 999px;
  color: rgba(255,255,255,.95); text-shadow: none;
}

/* A 3:4 photo in a half-width column runs to well over 700px tall. Cap it. */
.split-art img {
  aspect-ratio: 4 / 5;
  max-height: 560px;
  object-position: center 28%;
  margin-inline: auto;
}
.split-art.solo { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .split-art img { max-height: 440px; }
}

/* On a phone the announcement bar wraps to two lines, which pushed the nav down
   over the headline. Below 760px the bar and nav sit in normal flow on plum
   instead of floating over the photo, so nothing can ever overlap. */
@media (max-width: 760px) {
  .top-stack { position: static; background: var(--plum); z-index: 60; }
  .top-stack .ann { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .shero { margin-top: 0; padding-top: 44px; }
  .shero-scrim {
    background:
      linear-gradient(180deg, rgba(42,15,46,.46) 0%, rgba(42,15,46,.30) 30%, rgba(255,255,255,0) 62%),
      linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 20%);
  }
}

/* ==========================================================================
   The dashboard  ·  Sweat's app shell, in rose
   ========================================================================== */
.app-body { background: var(--sand); }
.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }

/* ---------- sidebar ---------- */
.side {
  background: var(--plum); color: #fff; padding: 26px 18px;
  display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.side .logo { color: #fff; font-size: 1.06rem; }
.side .dotcom { color: var(--blush); }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 11px;
  font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.66);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.side-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-nav a.on { background: var(--clay-ink); color: #fff; font-weight: 600; }
.side-foot { margin-top: auto; }
.plan-select {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.14); font-size: .82rem;
}
.plan-select option { color: var(--ink); }

/* ---------- main ---------- */
.app-main { padding: 34px 0 90px; }
.app-inner { max-width: 940px; margin-inline: auto; padding-inline: 26px; }
.app-head { margin-bottom: 26px; }
.app-block { margin-top: 40px; }
.app-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.app-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; }
.app-foot { margin-top: 44px; }
.app-foot a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- bottom tab bar, phones only ---------- */
.tabbar { display: none; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .app-main { padding: 20px 0 96px; }
  .app-inner { padding-inline: 18px; }
  .today-card { min-height: 240px; }
  .tc-body { padding: 20px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: .66rem; font-weight: 600; color: var(--ink-38); padding: 4px 0;
  }
  .tabbar a.on { color: var(--clay); font-weight: 700; }
}

/* The old dashboard used .app-head as a flex row; the rebuilt one is a stacked
   header, and [hidden] must beat the display values set on these components. */
[hidden] { display: none !important; }
.app-head { display: block; text-align: left; }
.app-head .h-l { text-align: left; }

/* ==========================================================================
   Honest numbers  ·  a plum panel, not four numbers floating on white
   ========================================================================== */
.numbers { padding: 56px 0 12px; }

.num-card {
  background: var(--plum);
  border-radius: var(--radius-l);
  padding: 34px 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  box-shadow: var(--shadow-l);
  overflow: hidden;
}

.num {
  text-align: center;
  padding: 4px 14px;
  position: relative;
}
/* hairline rules between the columns, never on the outer edges */
.num + .num::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 46px;
  background: rgba(255, 255, 255, .14);
}

.num b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--blush);
}
.num span {
  display: block;
  margin-top: 9px;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
}

.numbers-note {
  margin: 18px auto 0;
  text-align: center;
  max-width: 54ch;
  color: var(--ink-38);
}

@media (max-width: 720px) {
  .numbers { padding: 40px 0 8px; }
  .num-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
    padding: 28px 12px;
  }
  /* on a 2-up grid only the right-hand column takes a rule */
  .num + .num::before { display: none; }
  .num:nth-child(even)::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 44px;
    background: rgba(255, 255, 255, .14);
  }
  .num b { font-size: 1.85rem; }
}

/* Filter chips on the movement library. These previously lived in the removed
   coach block, which is why deleting it took their styling with them. */
.chip-btn {
  flex: none;
  padding: 8px 15px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-52);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.chip-btn:hover { border-color: var(--clay); color: var(--clay); }
.chip-btn.on {
  background: var(--clay-ink);
  border-color: var(--clay-ink);
  color: #fff;
  font-weight: 700;
}

/* A control that cannot do anything yet must not look like it can. */
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.shop-notice {
  font-size: .9rem; color: var(--clay-deep); font-weight: 600;
  background: var(--sand); border: 1px solid var(--sand-deep);
  border-radius: 12px; padding: 12px 16px; max-width: 62ch;
}

/* The dashboard greeting auth.js has always been able to fill. */
.app-greet { font-size: .92rem; color: var(--ink-52); margin-bottom: 10px; }
.app-greet span { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Dashboard  ·  built to feel like a training app
   ========================================================================== */

/* ---------- greeting ---------- */
.greet { margin-bottom: 26px; }
.greet-line { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.025em; }
.greet-line span { color: var(--clay-ink); }
.greet-date { font-size: .84rem; color: var(--ink-38); margin-top: 3px; }

/* ---------- block header with the progress ring ---------- */
.app-head { margin-bottom: 26px; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ph-copy { min-width: 0; }
.ph-name { margin-top: 5px; }
.ph-sub { margin-top: 6px; }
.ph-ring { position: relative; flex: none; display: grid; place-items: center; }
.ph-ring .ring { display: block; line-height: 0; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ring-label b { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.03em; }
.ring-label span { display: block; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-38); margin-top: 2px; }

/* ---------- stat tiles ---------- */
.stat-row {
  display: grid; gap: 12px; margin-bottom: 34px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-tile {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
  transition: border-color .25s var(--ease), transform .35s var(--ease);
}
.stat-tile:hover { border-color: var(--blush); transform: translateY(-2px); }
.stat-tile b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.62rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--ink); line-height: 1.1;
}
.stat-tile > span { display: block; margin-top: 4px; font-size: .74rem; color: var(--ink-52); }

/* ---------- today ---------- */
.today-card {
  position: relative; border-radius: var(--radius-l); overflow: hidden;
  min-height: 330px; display: flex; align-items: flex-end;
  box-shadow: var(--shadow);
}
.tc-art {
  position: absolute; inset: 0; background-size: cover; background-position: center 26%;
  transform: scale(1.02); transition: transform 1.2s var(--ease);
}
.today-card:hover .tc-art { transform: scale(1.06); }
.tc-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(42,15,46,.42) 0%, rgba(42,15,46,.74) 44%, rgba(26,8,32,.95) 100%),
    linear-gradient(90deg, rgba(26,8,32,.55) 0%, rgba(26,8,32,0) 62%);
}
.tc-body { position: relative; z-index: 2; padding: 28px; color: #fff; width: 100%; }
.tc-tag { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--blush); }
.tc-title { font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-weight: 700; letter-spacing: -.032em; margin-top: 8px; color: #fff; }
.tc-meta { font-size: .85rem; color: rgba(255,255,255,.76); margin-top: 5px; }
.tc-list { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
.tc-list li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .84rem; color: rgba(255,255,255,.9);
  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.tc-list li span { color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; flex: none; }
.tc-list li.more { border-bottom: 0; color: rgba(255,255,255,.5); font-size: .78rem; }
.tc-go { margin-top: 20px; box-shadow: var(--shadow-pink); }

/* ---------- week selector ---------- */
.week-strip {
  display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 12px;
  scrollbar-width: none; scroll-behavior: smooth;
}
.week-strip::-webkit-scrollbar { display: none; }
.wsel {
  flex: 0 0 66px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 8px 9px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .25s var(--ease);
}
.wsel:hover { border-color: var(--blush); transform: translateY(-2px); }
.wsel-n { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.wsel-d {
  font-size: .56rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.wsel-bar { width: 100%; height: 3px; border-radius: 99px; background: var(--sand-deep); overflow: hidden; margin-top: 3px; }
.wsel-bar i { display: block; height: 100%; background: var(--clay); border-radius: 99px; transition: width .5s var(--ease); }
.wsel.is-on { border-color: var(--clay-ink); background: var(--clay-ink); }
.wsel.is-on .wsel-n { color: #fff; }
.wsel.is-on .wsel-d { color: rgba(255,255,255,.72); }
.wsel.is-on .wsel-bar { background: rgba(255,255,255,.28); }
.wsel.is-on .wsel-bar i { background: #fff; }
.wsel.is-full:not(.is-on) { border-color: var(--blush); background: var(--sand); }

/* ---------- the week's sessions ---------- */
.wk-grid {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
}
.wk-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px; display: flex; flex-direction: column; gap: 5px;
  transition: border-color .2s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wk-card:hover { border-color: var(--clay); transform: translateY(-3px); box-shadow: var(--shadow-s); }
.wk-card.is-today { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.wk-card.is-done { background: var(--sand); }
.wk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.wk-day { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-38); }
.wk-now { font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--clay-ink); color: #fff; padding: 3px 9px; border-radius: 999px; }
.wk-tick { width: 19px; height: 19px; border-radius: 50%; background: var(--blush); position: relative; flex: none; }
.wk-tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid var(--clay-deep); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.wk-name { font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; margin-top: 3px; overflow-wrap: anywhere; }
.wk-sub { font-size: .77rem; color: var(--ink-52); }
.wk-lead { font-size: .77rem; color: var(--ink-38); margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---------- progress ---------- */
.pr-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; }
.pr-line span { color: var(--ink-52); }
.pr-track { margin-top: 12px; height: 9px; border-radius: 999px; background: var(--sand-deep); overflow: hidden; }
.pr-track .bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--clay); transition: width 1.1s var(--ease); }
.pr-recent { margin-top: 26px; display: flex; align-items: flex-end; gap: 10px; height: 128px; }
.pr-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 7px; }
.pr-bar i { display: block; width: 100%; height: 0; border-radius: 6px 6px 3px 3px; background: var(--blush); transition: height .8s var(--ease); }
.pr-bar:last-child i { background: var(--clay); }
.pr-bar span { font-size: .6rem; color: var(--ink-38); letter-spacing: .02em; white-space: nowrap; }
.pr-note { margin-top: 14px; }
.pr-empty { display: flex; align-items: flex-start; gap: 14px; }
.pr-empty-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--sand); display: grid; place-items: center; color: var(--clay); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-top { gap: 16px; }
  .today-card { min-height: 300px; }
}
@media (max-width: 560px) {
  .ph-top { flex-direction: column; align-items: flex-start; }
  .ph-ring { align-self: flex-start; }
  .tc-body { padding: 20px; }
  .tc-list { max-width: none; }
  .pr-recent { height: 104px; gap: 6px; }
  .pr-bar span { font-size: .54rem; }
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   One place for every transition on the site. Two rules govern all of it:
   nothing moves more than it needs to, and everything here is switched off
   under prefers-reduced-motion at the bottom of this block.
   ========================================================================== */

/* ---------- the page itself ---------- */
@keyframes booty-in { from { opacity: 0; } to { opacity: 1; } }
.js body { animation: booty-in .45s var(--ease) both; }

/* ---------- scroll reveal, with a little travel ---------- */
.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  will-change: opacity, transform;
}
.js .rv.in { opacity: 1; transform: none; will-change: auto; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease),
              box-shadow .35s var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* A soft sheen that crosses the pink button on hover. Purely decorative, so
   it is pointer-events:none and carries no meaning for a screen reader. */
.btn-clay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-clay:hover::after { transform: translateX(120%); transition: transform .75s var(--ease); }

/* ---------- cards ---------- */
.card-hover, .prog, .lib-card, .rail-card, .owned, .feature {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.card-hover:hover, .prog:hover, .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lib-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-s); border-color: var(--blush); }

/* ---------- links ---------- */
.link-arrow { transition: color .25s var(--ease), border-color .25s var(--ease); }
.nav-links a, .signin, .footer a, .side-nav a {
  transition: color .22s var(--ease), opacity .22s var(--ease);
}

/* An underline that grows from the left rather than appearing all at once. */

/* ---------- inputs ---------- */
input, select, textarea {
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

/* ---------- images ---------- */
.prog-art img, .pd-cover img, .art-photo img {
  transition: transform .8s var(--ease);
}
.prog:hover .prog-art img { transform: scale(1.045); }

/* ---------- the sticky nav settling on scroll ---------- */

/* ---------- keyboard focus ----------
   Never remove the ring without replacing it. This is the replacement, and it
   only shows for keyboard users. */
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav-over :focus-visible, .side :focus-visible, .tc-body :focus-visible { outline-color: #fff; }

/* ==========================================================================
   Everything above, switched off for anyone who asks for less motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .js body { animation: none; }
  .btn-clay::after { display: none; }
}

/* Three components set outline:none on the element itself, which beats the
   generic :focus-visible rule for them. Give each one its ring back. */
.newsletter input:focus-visible,
.search input:focus-visible,
.field select:focus-visible,
.lib-tools .search-box input:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-color: var(--clay);
}

/* The full screen menu must not leave the page scrolling behind it. */
body.menu-open { overflow: hidden; }

/* Visible to assistive technology, not on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Touch targets. The primary in-gym controls were already sized for this; the
   secondary ones were 19-41px, below the 44px bar. */
.quiz-back { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; }
.burger { width: 44px; height: 44px; }
.rail-btn { width: 44px; height: 44px; }
.chip-btn, .filters button, .chips button, .toggle button { min-height: 44px; }
.field select, .plan-select { min-height: 44px; }
.undo { min-height: 44px; }
.run-demo { min-height: 44px; }

/* Keyboard users can jump past the nav. Off screen until focused. */
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--clay-ink); color: #fff;
  padding: 11px 18px; border-radius: 0 0 12px 12px;
  font-size: .88rem; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Long content
   --------------------------------------------------------------------------
   Grid children were already protected by `.grid > * { min-width: 0 }`, but
   flex children were not, so a long program or movement name pushed straight
   out of its card. Flex items default to min-width:auto, which refuses to
   shrink below their content.
   ========================================================================== */
.prog-top, .set-head, .pc-top, .pr-line, .wk-top, .kv, .run-top,
.pd-price, .card-head, .app-block-head, .footer-bottom, .ds-row,
.ph-top, .tc-list li, .lib-tags, .owned, .app-head { min-width: 0; }

.prog-top > *, .set-head > *, .pc-top > *, .pr-line > *, .wk-top > *,
.kv > *, .pd-price > *, .card-head > *, .app-block-head > *,
.ds-row > *, .ph-top > *, .tc-list li > * { min-width: 0; }

/* Data-driven names: program, movement, exercise and product titles all come
   from the catalogue and can be long. Break them rather than overflow. */
.prog-body h3, .lib-name, .lib-cue, .rc-t, .rc-s,
.sess-table .ex-name, .run-name, .tc-title, .wsel-d,
.pd-price .amt, .step-val b, .ds-n, .stat-tile b, .num b, .num span,
.qo-label, .wk-name, .wk-lead, .set-head h2, .ctx .v, .owned .nm {
  overflow-wrap: anywhere;
}

/* The runner's stepper column must be allowed to shrink or the value between
   the two buttons pushes them apart. */
.stepper { grid-template-columns: 56px minmax(0, 1fr) 56px; }
.step-val { min-width: 0; }

/* ==========================================================================
   Navigation
   --------------------------------------------------------------------------
   One background layer, never two. The previous version put a near-white
   translucent nav inside a plum header, and the two blended into mud.

   Inner pages : white bar, hairline under it once you scroll.
   Home page   : the bar is transparent over the hero photo, then becomes
                 solid plum on scroll. .nav-over never paints its own
                 background; .top-stack owns it.
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(42,15,46,.06); }

.nav-inner {
  display: flex; align-items: center; gap: 34px;
  height: 76px; min-width: 0;
}

.logo {
  display: flex; align-items: baseline; gap: 1px; flex: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.28rem; letter-spacing: -.045em;
}
.logo .dotcom { color: var(--clay-ink); }

/* ---------- links ---------- */
.nav-links { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-links a {
  position: relative;
  padding: 10px 14px; border-radius: 10px;
  font-size: .905rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink-70); white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--ink-07); }
.nav-links a.active { color: var(--ink); font-weight: 600; }

/* A short marker under the current page rather than a full underline. */
.nav-links a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--clay-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover::after { transform: scaleX(0); }

/* ---------- right hand side ---------- */
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.nav-actions .signin {
  font-size: .9rem; font-weight: 500; color: var(--ink-70);
  padding: 10px 4px; white-space: nowrap;
}
.nav-actions .signin:hover { color: var(--ink); }
.nav-actions .btn { padding: 11px 20px; font-size: .875rem; }

/* Clerk mounts the avatar here. Give it a fixed slot so it cannot crowd the
   button next to it or shift the bar's height as it loads. */
.user-button, #user-button {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
}
.user-button img, #user-button img { border-radius: 50%; }

/* ==========================================================================
   The home page bar, over the hero photograph
   ========================================================================== */
.top-stack { position: sticky; top: 0; z-index: 50; }

.top-stack .ann { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Transparent over the photo. No blur, no translucent fill: the hero already
   carries a scrim and stacking a second one is what produced the mud. */
.nav-over {
  position: relative; z-index: 60;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; box-shadow: none;
}
.nav-over.is-stuck { border-bottom: 0; box-shadow: none; }
.nav-over .logo, .nav-over .nav-links a, .nav-over .signin { color: #fff; }
.nav-over .dotcom { color: var(--blush); }
.nav-over .nav-links a:hover { color: #fff; background: rgba(255,255,255,.14); }
.nav-over .nav-links a.active { color: #fff; }
.nav-over .nav-links a::after { background: var(--blush); }
.nav-over .signin:hover { color: var(--blush); }
.nav-over .burger span { background: #fff; }

/* One scrim across the whole header rather than a separate one on the strip,
   which left a visible tonal step between the two. Deepest at the very top
   where the small announcement text sits, easing off over the nav. */
.top-stack::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,8,32,.88) 0%, rgba(26,8,32,.72) 48%, rgba(26,8,32,.62) 100%);
}

/* Once scrolled past the hero the header goes solid, so white text is never
   left sitting on white page content. */
.top-stack::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--plum);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.top-stack.is-stuck::after { opacity: 1; }
.top-stack.is-stuck { box-shadow: 0 1px 24px rgba(26,8,32,.28); }

@media (max-width: 1000px) {
  .nav-inner { gap: 20px; }
  .nav-links a { padding: 10px 10px; font-size: .875rem; }
}
@media (max-width: 760px) {
  .nav-inner { height: 64px; gap: 14px; }
  .top-stack { position: static; background: var(--plum); z-index: 60; }
  .top-stack::before, .top-stack::after { display: none; }
  .nav-actions { gap: 10px; }
  .nav-actions .btn { padding: 10px 16px; font-size: .82rem; }
}

/* Local preview only. auth.js adds this when the paywall is standing down on
   localhost, so a bypassed gate can never be mistaken for real access. */
.dev-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: #1a0820; color: rgba(255,255,255,.9);
  font-size: .78rem; text-align: center; padding: 9px 14px;
  border-top: 2px solid var(--clay);
}
.dev-banner a { color: var(--blush); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .dev-banner { bottom: 62px; } }

/* Shown once, on the first load after a successful Stripe checkout. */
.bought {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--sand); border: 1px solid var(--blush);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
}
.bought b { display: block; font-size: .96rem; letter-spacing: -.02em; }
.bought span { display: block; font-size: .86rem; color: var(--ink-52); margin-top: 2px; }
.bought-tick {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--clay-ink); position: relative; margin-top: 1px;
}
.bought-tick::after {
  content: ""; position: absolute; left: 8px; top: 6px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(42deg);
}

/* ==========================================================================
   Mobile header
   --------------------------------------------------------------------------
   The rule that hides the desktop links lives in a @media block near the top
   of this file. Media queries carry no extra specificity, so the rewritten
   `.nav-links { display: flex }` further down was beating it and the links,
   the CTA and the burger all painted on top of each other at 390px.
   Re-stated here, after the rewrite, so it wins.
   ========================================================================== */
@media (max-width: 860px) {
  .nav-links,
  .nav-actions .signin { display: none !important; }
  .burger { display: grid !important; place-items: center; }
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 10px 15px; font-size: .8rem; }
  .logo { font-size: 1.12rem; }
}
@media (max-width: 380px) {
  .nav-actions .btn { padding: 9px 12px; font-size: .74rem; }
  .logo { font-size: 1rem; }
}

/* A movement with no clip is a written entry, not a broken video card. Seventy
   five empty grey boxes made the library look unfinished rather than honest. */
.lib-grid { grid-auto-rows: min-content; align-items: start; }

/* First run on the dashboard: no block chosen, nothing logged. */
.firstrun { padding-top: 8px; }
.fr-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.fr-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .3s var(--ease);
}
.fr-card:hover { border-color: var(--clay); transform: translateY(-3px); }
.fr-card img { width: 100%; height: 160px; object-fit: cover; object-position: center 26%; display: block; }
.fr-body { padding: 13px 14px 15px; }
.fr-body b { display: block; font-size: .96rem; letter-spacing: -.02em; }
.fr-body span { display: block; font-size: .76rem; color: var(--ink-52); margin-top: 3px; }

/* ==========================================================================
   Dashboard, second pass
   Session count instead of a percentage; a real block picker instead of a
   sixty-option native select.
   ========================================================================== */
.ph-count {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
}
.ph-of { display: block; font-size: .74rem; color: var(--ink-52); margin-top: 3px; }
.ph-ring { text-align: right; }

.trend {
  margin: -18px 0 30px; font-size: .95rem; font-weight: 500;
  color: var(--clay-ink); letter-spacing: -.01em;
}

.plan-switch {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.14); font-size: .82rem;
  font-weight: 500; cursor: pointer; text-align: left;
}
.plan-switch:hover { background: rgba(255,255,255,.14); }
button.link-arrow { background: none; border: 0; cursor: pointer; font: inherit; }

/* ---------- the switcher ---------- */
.sw-back {
  position: fixed; inset: 0; z-index: 120; background: rgba(26,8,32,.72);
  display: grid; place-items: center; padding: 20px;
}
.sw-sheet {
  width: min(560px, 100%); max-height: min(76vh, 720px);
  background: var(--paper); border-radius: var(--radius-l);
  padding: 22px 22px 8px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-l);
}
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sw-x {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink-52);
}
.sw-x:hover { border-color: var(--clay-ink); color: var(--clay-ink); }
.sw-find {
  margin-top: 16px; width: 100%; padding: 12px 15px; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--sand); color: inherit;
}
.sw-warn { margin-top: 12px; font-size: .8rem; color: var(--ink-52); }
.sw-list { margin-top: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; }
.sw-row {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 9px; border: 1px solid transparent; border-radius: 13px;
  background: none; cursor: pointer; font: inherit;
}
.sw-row:hover { background: var(--sand); border-color: var(--line); }
.sw-row.is-on { background: var(--sand); border-color: var(--clay-ink); }
.sw-row img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; object-position: center 26%; flex: none; }
.sw-txt { min-width: 0; flex: 1; }
.sw-txt b { display: block; font-size: .95rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sw-txt span { display: block; font-size: .78rem; color: var(--ink-52); margin-top: 2px; }
.sw-now {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--clay-ink); color: #fff;
  padding: 4px 9px; border-radius: 999px;
}
@media (max-width: 560px) {
  .sw-sheet { max-height: 86vh; padding: 18px 16px 6px; }
  .ph-ring { text-align: left; }
}

/* ==========================================================================
   Polish pass, from the visual audit
   ========================================================================== */
/* Mobile menu painted over the header once .top-stack went static at 760px. */
@media (max-width: 860px) { .top-stack, .nav { position: relative; z-index: 60; } .mobile-menu { z-index: 45; top: 0; } body.menu-open .top-stack, body.menu-open .nav { z-index: 61; } }

/* Horizontal scrollers ended in a hard cut mid-word. A fade says "more". */
.rail-wrap, .chips-wrap { position: relative; }
.rail::after, .chips::after, .week-strip::after, .lib-tools .chips::after {
  content: ""; position: sticky; right: 0; top: 0; bottom: 0; flex: none; width: 36px; margin-left: -36px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--paper));
}
.band .rail::after { background: linear-gradient(90deg, rgba(253,244,248,0), var(--sand)); }
.app-body .week-strip::after { background: linear-gradient(90deg, rgba(253,244,248,0), var(--sand)); }

/* programs.html search placeholder was clipped at the pill edge. */
.search input { padding-right: 20px; text-overflow: ellipsis; }
.search input::placeholder { text-overflow: ellipsis; }

/* FAQ was the one left-aligned section on a centred page. */
#faq .head { margin-inline: auto; text-align: center; }
#faq .head .eyebrow { justify-content: center; }
#faq .faq { max-width: 760px; margin-inline: auto; }

/* Pricing card CTAs sat on different baselines. Push both to the bottom. */
.price-pair .plan { display: flex; flex-direction: column; }
.price-pair .plan ul { flex: 1; }
.price-pair .plan > .btn, .price-pair .plan > .btn + .tiny { margin-top: auto; }
.price-pair .plan > .btn + .tiny { margin-top: 12px; }

/* Eyebrow above the programme rail used a different treatment from the rest. */
#programs .eyebrow.plain { letter-spacing: .16em; text-transform: uppercase; font-size: .715rem; font-weight: 700; }
#programs .eyebrow.plain::before { display: inline-block; }

/* Dashboard header: the count sat on its own line at 390. */
@media (max-width: 560px) { .ph-top { flex-direction: row; align-items: flex-end; } .ph-ring { text-align: right; } }

/* Program page: the load-target note was one 1,100px line. */
#pd-session + .tiny, .pd-note { max-width: 62ch; }

/* Footer "Company" column had one link. Fold it into Support. */
.footer-grid { grid-template-columns: 1.6fr repeat(2, 1fr); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ==========================================================================
   Session runner, rebuilt
   The set table is the product. One row per prescribed set, last time beside
   it, inputs pre-filled, a rest strip that never covers the inputs, and a
   two-pane desktop layout where the width goes to context.
   ========================================================================== */
.rn { --rn-bg: #1a0820; --rn-card: #24102a; --rn-line: rgba(255,255,255,.09); --rn-mute: rgba(255,255,255,.55);
      background: var(--rn-bg); color: #fff; min-height: 100vh; }
html.run-page, body.run-page { background: #1a0820; }

/* ---------- header ---------- */
.rn-top { position: sticky; top: 0; z-index: 30; background: var(--rn-bg); display: grid;
  grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px 12px; border-bottom: 1px solid var(--rn-line); }
.rn-back { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.rn-back:hover { background: rgba(255,255,255,.08); }
.rn-title { min-width: 0; }
.rn-title b { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-title span { display: block; font-size: .74rem; color: var(--rn-mute); }
.rn-clock { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--rn-mute); }
.rn-finish { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: none; color: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.rn-finish:disabled { opacity: .35; cursor: default; }
.rn-prog { grid-column: 1 / -1; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.rn-prog i { display: block; height: 100%; background: var(--clay); transition: width .4s var(--ease); }

/* ---------- rest strip ---------- */
.rn-rest { position: sticky; top: 76px; z-index: 29; display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--clay-ink); color: #fff; overflow: hidden; }
.rn-rest-bar { position: absolute; left: 0; top: 0; height: 3px; background: #fff; transition: width .25s linear; }
.rn-rest-l { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.rn-rest-t { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rn-rest button { min-width: 44px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-weight: 600; cursor: pointer; padding: 0 12px; }
.rn-rest-skip { background: #fff !important; color: var(--clay-ink) !important; }

/* ---------- panes ---------- */
.rn-body { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1280px; margin: 0 auto; padding-bottom: 96px; }
.rn-rail, .rn-side { display: none; }
.rn-main { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- exercise card ---------- */
.rn-card { background: var(--rn-card); border: 1px solid var(--rn-line); border-radius: 18px; padding: 16px 14px 12px; scroll-margin-top: 130px; }
.rn-card.is-cur { border-color: rgba(255,77,141,.55); }
.rn-card.is-done { opacity: .62; }
.rn-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rn-role { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blush); font-weight: 700; }
.rn-name { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.025em; margin-top: 3px; overflow-wrap: anywhere; }
.rn-demo { flex: none; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; border: 1px solid var(--rn-line); background: #fff; padding: 0; cursor: pointer; }
.rn-demo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-cue { margin-top: 10px; font-size: .88rem; color: rgba(255,255,255,.8); line-height: 1.45; }
.rn-target { margin-top: 6px; font-size: .78rem; color: var(--rn-mute); }

/* ---------- set table ---------- */
.rn-table { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.rn-row { display: grid; grid-template-columns: 30px 1fr 1fr 1fr 48px; gap: 8px; align-items: center; min-height: 52px; }
.rn-row.rn-head { min-height: 0; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rn-mute); padding: 0 2px; }
.rn-row.rn-head span:nth-child(3), .rn-row.rn-head span:nth-child(4) { text-align: center; }
.rn-set { font-size: .86rem; font-weight: 700; color: var(--rn-mute); text-align: center; }
.rn-row.is-logged .rn-set { color: #9fd9bd; }
.rn-prev { height: 44px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.22); background: none; color: var(--rn-mute); font: inherit; font-size: .84rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.rn-prev:not(:disabled):hover { border-style: solid; color: #fff; }
.rn-prev:disabled { cursor: default; opacity: .5; }
.rn-in { height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; width: 100%; min-width: 0; -moz-appearance: textfield; }
.rn-in::-webkit-outer-spin-button, .rn-in::-webkit-inner-spin-button { -webkit-appearance: none; }
.rn-in:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }
.rn-in[readonly] { background: rgba(159,217,189,.12); border-color: rgba(159,217,189,.3); color: #cfeedd; }
.rn-in-empty { display: block; }
.rn-row.is-next .rn-in { opacity: .45; }
.rn-row.is-cur .rn-in { border-color: rgba(255,77,141,.6); background: rgba(255,77,141,.1); }
.rn-ok { width: 48px; height: 48px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease), transform .2s var(--ease); }
.rn-ok:not(:disabled):hover { background: rgba(255,255,255,.18); }
.rn-ok:disabled { opacity: .25; cursor: default; }
.rn-row.is-cur .rn-ok { background: var(--clay); }
.rn-row.is-logged .rn-ok { background: #2f5d4e; color: #cfeedd; }
.rn-row.is-logged .rn-ok:hover { background: #3d7a66; }
.rn-card-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.rn-txt { background: none; border: 0; color: var(--rn-mute); font: inherit; font-size: .8rem; cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.rn-donetag { font-size: .74rem; color: #9fd9bd; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- sticky primary ---------- */
.rn-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(26,8,32,0), var(--rn-bg) 40%); }
.rn-primary { width: 100%; max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border-radius: 999px; border: 0; background: var(--clay-ink); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-pink); }
.rn-primary span { font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }
.rn-primary:active { transform: scale(.985); }

/* ---------- done ---------- */
.rn-done { max-width: 640px; margin: 0 auto; padding: 60px 20px 90px; text-align: center; color: #fff; }
.rn-done .lead { color: rgba(255,255,255,.75); }
.rn-done-ic { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--clay); display: grid; place-items: center; }
.rn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.rn-stats div { background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px 8px; }
.rn-stats b { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.03em; }
.rn-stats span { display: block; font-size: .7rem; color: var(--rn-mute); margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.rn-delta { margin-top: 18px; color: var(--blush); font-weight: 600; }
.rn-prs { margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.rn-prs li { background: rgba(255,77,141,.12); border: 1px solid rgba(255,77,141,.35); border-radius: 12px; padding: 12px 14px; font-size: .9rem; }
.rn-prs b { display: block; margin-bottom: 2px; }
.rn-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.run-loading { padding: 80px 20px; text-align: center; color: #fff; }
.run-loading a { color: var(--blush); text-decoration: underline; }

/* ---------- tablet: exercise list becomes a top scroller ---------- */
@media (min-width: 721px) and (max-width: 1023px) {
  .rn-rail { display: block; grid-column: 1 / -1; padding: 12px 14px 0; }
  .rn-rail-h, .rn-rail-rest { display: none; }
  .rn-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .rn-list::-webkit-scrollbar { display: none; }
  .rn-item button { white-space: nowrap; }
}

/* ---------- desktop: two panes, three at 1280 ---------- */
@media (min-width: 1024px) {
  .rn-body { grid-template-columns: 300px minmax(0, 720px); gap: 28px; padding: 0 28px 96px; align-items: start; }
  .rn-rail { display: block; position: sticky; top: 92px; }
  .rn-rail-h { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-mute); margin: 18px 0 10px 4px; }
  .rn-list { display: flex; flex-direction: column; gap: 4px; }
  .rn-item button { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: rgba(255,255,255,.75); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
  .rn-item button:hover { background: rgba(255,255,255,.06); }
  .rn-item.is-cur button { background: rgba(255,77,141,.14); border-color: rgba(255,77,141,.45); color: #fff; }
  .rn-item.is-done button { color: var(--rn-mute); }
  .rn-item.is-done .rn-ct { color: #9fd9bd; }
  .rn-n { font-size: .74rem; font-weight: 700; color: var(--rn-mute); text-align: center; }
  .rn-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rn-ct { font-size: .76rem; font-variant-numeric: tabular-nums; }
  .rn-rail-rest { margin-top: 22px; background: var(--rn-card); border: 1px solid var(--rn-line); border-radius: 16px; padding: 18px; text-align: center; }
  .rn-rail-rest b { display: block; font-family: var(--font-display); font-size: 2.6rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .rn-rail-rest span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-mute); }
  .rn-main { padding: 18px 0 0; }
  .rn-row { grid-template-columns: 34px 1.1fr 1fr 1fr 52px; }
  .rn-foot { left: 328px; right: 0; padding-left: 0; }
  .rn-primary { max-width: 720px; margin: 0; }
  .rn-rest { top: 76px; }
}
@media (min-width: 1280px) {
  .rn-body { grid-template-columns: 300px minmax(0, 720px) 260px; }
  .rn-side { display: block; position: sticky; top: 92px; padding-top: 18px; }
  .rn-side-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--rn-line); background: #fff; }
  .rn-side-cue { margin-top: 12px; font-size: .86rem; color: rgba(255,255,255,.8); line-height: 1.45; }
  .rn-side-h { margin-top: 16px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-mute); }
  .rn-side-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; font-variant-numeric: tabular-nums; }
  .rn-side-list li { display: flex; gap: 10px; }
  .rn-side-list span { color: var(--rn-mute); width: 14px; }
}
@media (max-width: 420px) {
  .rn-row { grid-template-columns: 24px 1fr 1fr 1fr 44px; gap: 6px; }
  .rn-in { font-size: .95rem; }
  .rn-ok { width: 44px; height: 44px; }
  .rn-top { grid-template-columns: 40px 1fr auto; }
  .rn-clock { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rn-rest-bar, .rn-prog i { transition: none; } }

/* The old runner centred #runner in a phone-width column. The rebuilt runner
   owns its own layout, so the container must be full width. */
#runner, .runner { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.run-page body { padding: 0; margin: 0; }

/* ---- locked "up next" card: solid plum so the white copy and the buttons read ---- */
.today-card.is-locked { background: linear-gradient(135deg, #2a0f2e 0%, #4b1a52 100%); min-height: 0; }
.today-card.is-locked .tc-body { padding: 32px 28px; }
.today-card.is-locked .tc-meta { max-width: 52ch; opacity: .82; }
.wk-card.is-locked { text-decoration: none; }
.wk-card.is-locked:hover { border-color: var(--clay); }
/* the localhost banner sat on top of the runner's fixed footer */
.run-page .dev-banner { display: none; }

/* ---- the phone in the hero says where you are ---- */
.ds-brand { position: absolute; top: 15px; left: 16px; z-index: 2; font-size: 12.5px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.ds-brand em { font-style: normal; color: var(--clay); }