/* ================================================================
   MyPedra — styles.css
   Dark premium fitness theme
================================================================ */

/* ---------- VARIABLES ---------- */
/* ── --vh: one screen height, corrected for root zoom ─────────────────────
   `zoom` scales rendered content but 100vh keeps resolving against the
   UNZOOMED viewport, so every full-height wrapper came out 15% or 30% taller
   than the screen it was meant to fill. That is the "scroll down a tiny bit on
   a page that clearly fits" bug, and it was fixed one rule at a time — .view,
   then chat — which meant each NEW full-height element reintroduced it. The
   checkout is exactly what that looks like: .pay-lab asked for 100vh, got
   1081px of a 940px viewport, and pushed the confirm slider under the fold.

   Everything that wants a screen height uses var(--vh) now, so correcting the
   zoom is one line rather than a list to keep in sync. */
:root { --vh: 100vh; }

:root {
  /* Foundation tokens (2026 redesign) */
  --bg:      #0A0C12;
  --surface: #12151E;
  --border:  #1E2230;
  --text:      #FFFFFF;
  --text-dim:  #B4BAC7;   /* kept in step with --t2 below */
  --accent:     #22D3EE;
  --accent-ink: #0A0C12;
  --accent-rgb: 34,211,238;
  --award:  #F5B301;
  --error:  #E8354F;

  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-data:    'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;

  --r-ctl:  6px;
  --r-card: 8px;

  /* Legacy aliases (remapped — removed once all selectors migrate) */
  --bg2:   #12151E;
  --card:  #12151E;
  --card2: #171B26;
  --bdr:   #1E2230;
  --bdr-a: rgba(var(--accent-rgb),0.55);

  --t1: #FFFFFF;
  /* --t2 and --t3 carry nearly every caption, hint, sub-label and body line in
     the product. They cleared the 4.5:1 AA floor but only barely — t3 measured
     4.36:1 on card2 — and at that level grey-on-near-black reads as washed out
     rather than quiet, which is what "the text is hard to see" was describing.

     Both are lifted to clear 7:1 (AAA) on all three dark surfaces while keeping
     the same blue-grey hue, so the visual hierarchy against pure-white --t1 is
     intact — this is a legibility change, not a flattening one.

       --t2  #8A8F9C -> #B4BAC7   card 5.63 -> 9.37
       --t3  #798093 -> #9AA2B3   card 4.62 -> 7.11 */
  --t2: #B4BAC7;
  --t3: #9AA2B3;

  --purple: #22D3EE;
  --purple-d: #0EA5C4;
  --blue:   #3B82F6;
  --cyan:   #22D3EE;
  --green:  #10B981;
  --orange: #F97316;
  --amber:  #F5B301;
  --red:    #E8354F;

  --grad-p: var(--accent);
  --grad-e: #F97316;
  --grad-g: #10B981;

  --shadow: none;
  --glow-p: none;

  --r-sm: 6px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 8px;
  --tr: all 0.18s ease;
  --nav-h: 64px;
}

/* ---------- SCROLLBARS (themed) ---------- */
* { scrollbar-width: thin; scrollbar-color: #2A2F3E transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A2F3E; border-radius: 5px; border: 2px solid #0A0C12; }
::-webkit-scrollbar-thumb:hover { background: #3A4152; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-y: auto; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--t1);
  line-height: 1.6;
  min-height: var(--vh);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.05;
}
.num, .stat-value { font-family: var(--font-data); }
.kf-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; }
.kf-icon-svg { flex-shrink: 0; }
.kf-heart-on { fill: var(--error); color: var(--error); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding-left: 1.2em; }
ul li::before { content: ''; }
button { font-family: inherit; cursor: pointer; border: none; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- VIEW SYSTEM ---------- */
.view { display: none; min-height: var(--vh); }
.view.active { display: block; }

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(10, 12, 18, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease;
}
.navbar.scrolled {
  background: rgba(10, 12, 18, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
.nav-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.brand-icon-wrap {
  width: 34px; height: 34px; border-radius: 9px;
  overflow: hidden; display: block; flex-shrink: 0;
}
.brand-icon {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.22);  /* crop the baked-in light border of the PNG */
  display: block;
}
/* "Pedra" carries the wordmark. Tesla's own face is a bespoke commission, so
   this approximates its character rather than claiming to be it: a wide
   geometric sans, generous tracking, and a lighter weight than the condensed
   "My" beside it so the pairing reads as one mark with two voices. */
.brand-accent {
  color: var(--accent-text);
  font-family: "Montserrat", var(--font-body), sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.92em;
  padding-left: 0.10em;   /* tracking adds space after, not before */
}
.nav-links { display: flex; align-items: center; gap: 4px; position: relative; }
/* liquid pill that morphs to the hovered / active link */
.nav-liquid-pill {
  position: absolute;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 100px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  pointer-events: none;
  opacity: 0;
  transition:
    left  0.45s cubic-bezier(0.3, 1.4, 0.45, 1),
    width 0.45s cubic-bezier(0.3, 1.4, 0.45, 1),
    opacity 0.25s ease;
  z-index: 0;
}
.nav-liquid-pill.on { opacity: 1; }
.nav-links > *:not(.nav-liquid-pill) { position: relative; z-index: 1; }
.nav-link {
  padding: 8px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; color: var(--t2);
  transition: var(--tr);
}
.nav-link:hover { color: var(--t1); }
.nav-link { transition: color 0.2s ease, transform 0.25s cubic-bezier(0.3,1.4,0.45,1); }
.nav-link:hover { transform: translateY(-1px); }
.nav-link.active { color: var(--t1); }
.nav-chat-btn {
  background: transparent;
  border: none;
  color: var(--accent) !important;
  display: flex; align-items: center; gap: 6px;
}
.nav-chat-btn:hover { background: rgba(var(--accent-rgb),0.10) !important; }

/* Pulse dot */
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  display: inline-block;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px; border-radius: var(--r-sm);
  background: transparent; padding: 0;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--t2); border-radius: 2px; transition: var(--tr);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu { -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  display: none; position: fixed; top: var(--nav-h); right: 0;
  width: 260px; height: calc(var(--vh) - var(--nav-h));
  background: var(--bg2); border-left: 1px solid var(--bdr);
  padding: 24px 20px; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform 0.3s ease;
  z-index: 99;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-nav-link {
  display: block; padding: 13px 16px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 500; color: var(--t2); transition: var(--tr);
}
.mobile-nav-link:hover, .mobile-nav-link:active { color: var(--t1); background: rgba(255,255,255,0.05); }
.mobile-chat-link { color: var(--purple) !important; margin-top: 8px; background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.25); }
.mobile-overlay {
  display: none; position: fixed; inset: 0; z-index: 98;
  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mobile-overlay.open { display: block; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: var(--r-md); font-weight: 600;
  font-size: 14px; transition: var(--tr); cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  padding: 11px 22px; border: none;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { filter: brightness(0.95); }
.btn-award {
  background: var(--award); color: var(--accent-ink);
  padding: 11px 22px; border: none;
  font-weight: 600;
}
.btn-award:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent; color: var(--t1);
  padding: 11px 22px; border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: #2A2F3E; }
.btn-lg { font-size: 15px; padding: 14px 28px; border-radius: var(--r-lg); }
.btn-full { width: 100%; }
.btn-outline {
  background: transparent; color: var(--t2);
  padding: 9px 18px; border: 1px solid var(--bdr);
  font-size: 13px;
}
.btn-outline:hover { color: var(--t1); border-color: rgba(255,255,255,0.2); }

/* ---------- GRADIENT TEXT ---------- */
.gradient-text {
  background: var(--grad-p);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   HOME — HERO
================================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: var(--vh); display: flex; align-items: center;
  padding: calc(var(--nav-h) + 60px) 0 80px;
  background: var(--bg);
}
.hero-glow { display: none; }
.g1 { display: none; }
.g2 { display: none; }
.hero-inner { position: relative; z-index: 1; max-width: 760px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0;
  font-size: 12px; font-weight: 600; color: var(--accent);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 20px;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 800; line-height: 0.98; letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 22px; color: var(--t1);
}
.hero-sub {
  font-size: clamp(15px, 2vw, 18px); color: var(--t2);
  max-width: 560px; line-height: 1.7; margin-bottom: 36px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.hero-stats {
  display: flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 20px 28px; width: fit-content;
}
.hstat { text-align: center; }
.hstat-val { display: block; font-size: 24px; font-weight: 700; color: var(--t1); font-family: var(--font-data); }
.hstat-lbl { display: block; font-size: 10px; color: var(--t3); margin-top: 3px; text-transform: uppercase; letter-spacing: 1.2px; }
.hstat-sep { width: 1px; height: 40px; background: var(--bdr); margin: 0 28px; }

/* ================================================================
   HOME — FEATURES
================================================================ */
.features-section { padding: 100px 0; }
.sec-header { text-align: center; margin-bottom: 60px; }
.sec-label {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--purple); margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; letter-spacing: -1px; color: var(--t1);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.feat-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 32px 28px;
  transition: var(--tr); position: relative; overflow: hidden;
}
.feat-card:hover {
  transform: translateY(-4px); border-color: rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.feat-large {
  grid-column: span 2;
  background: var(--surface);
}
.feat-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.icon-purple { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.icon-cyan   { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.icon-green  { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.icon-orange { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.feat-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; color: var(--t1); }
.feat-card p { font-size: 14px; color: var(--t2); line-height: 1.7; margin-bottom: 20px; }
.feat-cta {
  background: none; color: var(--purple); font-size: 14px; font-weight: 600;
  padding: 0; border: none; transition: var(--tr);
}
.feat-cta:hover { color: var(--t1); letter-spacing: 0.3px; }
.feat-cta-sm { font-size: 13px; }
.feat-download { display: flex; flex-direction: column; }
.feat-dl-label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.feat-arm-anim { display: flex; align-items: center; justify-content: center; }
.arm-curl {
  animation: bicep-curl 1.5s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
@keyframes bicep-curl {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-125deg); }
}
.feat-dl-badges { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.store-badge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 16px; text-decoration: none; color: var(--t1);
  transition: var(--tr);
}
.store-badge:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }
.store-badge svg { flex-shrink: 0; }
.store-badge span { display: flex; flex-direction: column; }
.store-badge-sub { font-size: 10px; color: var(--t3); line-height: 1.2; }
.store-badge-name { font-size: 15px; font-weight: 700; line-height: 1.3; }

/* ================================================================
   HOME — HOW IT WORKS
================================================================ */
.how-section { padding: 80px 0 100px; background: var(--bg2); }
.steps-row {
  display: flex; align-items: flex-start; gap: 0; justify-content: center;
  flex-wrap: wrap;
}
.step-card {
  flex: 1; min-width: 200px; max-width: 280px;
  text-align: center; padding: 36px 24px;
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
}
.step-num {
  font-family: var(--font-data);
  font-size: 15px; font-weight: 700; color: var(--accent);
  margin-bottom: 14px;
}
.step-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.step-card p { font-size: 14px; color: var(--t2); line-height: 1.65; }
.step-arrow {
  font-size: 24px; color: var(--t3); padding: 36px 16px;
  align-self: center;
}

/* ================================================================
   HOME — CTA SECTION
================================================================ */
.cta-section { padding: 80px 0; }
.cta-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: var(--r-xl); padding: 64px 48px;
  text-align: center;
  background: var(--surface);
}
.cta-glow { display: none; }
.cta-card h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; letter-spacing: -1px; margin-bottom: 14px; }
.cta-card p { font-size: 16px; color: var(--t2); margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ================================================================
   FOOTER
================================================================ */
.footer { padding: 40px 0; border-top: 1px solid var(--bdr); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-brand p { font-size: 13px; color: var(--t3); margin-top: 4px; }
.footer-copy { font-size: 13px; color: var(--t3); }

/* ── full marketing footer ─────────────────────────────────────── */
.footer-full {
  position: relative; border-top: none; padding: 0;
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(var(--accent-rgb),0.05), transparent 55%),
    var(--surface);
}
/* Bronze→Eternal tier gradient — the ladder motif the product is built on */
.footer-tierline {
  height: 2px; width: 100%;
  background: linear-gradient(90deg, #9aa4b2 0%, var(--accent) 42%, #7fe3f4 60%, var(--amber) 100%);
  opacity: 0.85;
}
.footer-full .container { padding-top: 60px; padding-bottom: 30px; }

.footer-top {
  display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px;
  padding-bottom: 40px; border-bottom: 1px solid var(--border);
}
.footer-brand-col { max-width: 340px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-logo .brand-text {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--t1);
}
.footer-tag { color: var(--t2); font-size: 14px; line-height: 1.7; margin: 16px 0 22px; }
.footer-cta { display: inline-flex; align-items: center; gap: 7px; }

.footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-content: start;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  font-family: var(--font-display); text-transform: uppercase; font-size: 12px;
  letter-spacing: 1.6px; color: var(--t3); margin-bottom: 4px;
}
.footer-col a {
  color: var(--t2); text-decoration: none; font-size: 14px; width: fit-content;
  transition: color 0.18s, transform 0.18s;
}
.footer-col a:hover { color: var(--accent); transform: translateX(3px); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding-top: 24px;
}
.footer-credit { font-size: 12.5px; color: var(--t3); }
.footer-credit a, .footer-slim .footer-copy a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover, .footer-slim .footer-copy a:hover { color: var(--accent); }

/* slim footer (logged-in dashboard) */
.footer-slim { background: transparent; }

@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr; gap: 34px; }
  .footer-brand-col { max-width: none; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .footer-full .container { padding-top: 44px; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   SHARED — PAGE HEADER
================================================================ */
.page-header {
  padding-top: calc(var(--nav-h) + 44px); padding-bottom: 34px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg);
}
.back-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: var(--t2); padding: 8px 15px; border-radius: 10px;
  font-size: 13px; font-weight: 600; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: var(--tr);
}
.back-btn:hover { color: var(--t1); background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.4); }
/* condensed-uppercase title with a tier-gold accent tick — the app-wide
   header language that matches the marketing hero */
.page-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: 0.5px;
  line-height: 1; color: var(--t1); position: relative; padding-left: 16px;
  /* shrink-to-fit so the accent tick hugs the text. As a block it spanned the
     full width, which stranded the tick at the far left edge of any centred
     header (the welcome screen) looking like a stray line. */
  display: inline-block;
}
.page-title::before {
  content: ""; position: absolute; left: 0; top: 4%; bottom: 4%; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--amber), var(--accent));
}
/* symmetric padding so the sub stays centred under a centred title, while
   still lining up with the title text when the header is left-aligned */
.page-sub { font-size: 15px; color: var(--t2); margin-top: 10px; padding-inline: 16px; }

/* ================================================================
   SHARED — FORMS
================================================================ */
.form-group { margin-bottom: 22px; }
.form-label { display: block; font-size: 11px; font-weight: 600; color: var(--t2); margin-bottom: 8px; letter-spacing: 1.2px; text-transform: uppercase; }
.form-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 12px 14px;
  font-size: 14px; color: var(--t1); outline: none; transition: var(--tr);
}
.form-input:focus { border-color: var(--bdr-a); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }
.form-input::placeholder { color: var(--t3); }
/* A value the app worked out for you rather than one you type. Reads as
   settled, not as disabled — still full-contrast text, just no caret and no
   focus ring inviting an edit that would not stick. */
.form-input.input-derived {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.22);
  cursor: default;
}
.form-input.input-derived:focus { box-shadow: none; border-color: rgba(var(--accent-rgb), 0.22); }
.field-note { display: block; margin-top: 6px; font-size: 11.5px; color: var(--t3); }
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 42px; }
.pw-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--t3);
  display: flex; align-items: center; padding: 4px;
  transition: color 0.15s;
}
.pw-eye:hover { color: var(--t1); }

/* ── Email Verification ───────────────────────────────────── */
.verify-card { text-align: center; }
.verify-icon { font-size: 52px; margin-bottom: 16px; }
.verify-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.verify-hint { color: var(--t3); font-size: 14px; margin-bottom: 32px; }
.verify-hint strong { color: var(--t1); }
.verify-code-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 6px; }
.verify-digit, .reset-digit {
  width: 50px; height: 62px; text-align: center;
  font-size: 26px; font-weight: 700;
  background: var(--bg2); border: 2px solid var(--bdr);
  border-radius: var(--r-md); color: var(--t1); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: transparent;
}
.verify-digit:focus, .reset-digit:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}
.verify-digit.vd-filled, .reset-digit.vd-filled { border-color: rgba(var(--accent-rgb),0.5); }
.verify-digit.vd-error, .reset-digit.vd-error   { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.verify-resend-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.verify-resend-btn { background: none; border: none; color: var(--purple); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; }
.verify-resend-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 400px) {
  .verify-digit, .reset-digit { width: 42px; height: 54px; font-size: 22px; }
  .verify-code-row { gap: 7px; }
}
.form-select {
  width: 100%; background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 12px 14px;
  font-size: 14px; color: var(--t1); outline: none; transition: var(--tr);
  appearance: none; cursor: pointer;
}
.form-select:focus { border-color: var(--bdr-a); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input-hint { font-size: 12px; color: var(--t3); margin-top: 6px; }
.input-hint a { color: var(--purple); }

/* ================================================================
   SHARED — OPTION BUTTONS
================================================================ */
.opt-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.opt-grid-2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.opt-btn {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 8px 6px;
  font-size: 13px; font-weight: 500; color: var(--t2);
  transition: var(--tr); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center;
  min-height: 62px; height: 62px; overflow: hidden;
}
.opt-btn span:first-child { font-size: 18px; }
.opt-btn span + span { font-size: 11px; line-height: 1.25; word-break: break-word; }
.opt-btn:hover { color: var(--t1); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); }
.opt-btn.active {
  background: rgba(var(--accent-rgb),0.12); border-color: var(--bdr-a);
  color: var(--t1);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.3);
}

/* ================================================================
   PANELS
================================================================ */
.panel {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 32px;
}
.panel-title { font-size: 20px; font-weight: 700; margin-bottom: 28px; }

/* ================================================================
   WORKOUTS VIEW
================================================================ */
.workout-layout {
  display: grid; grid-template-columns: 420px 1fr; gap: 24px;
  padding: 36px 0 64px;
}
.form-panel { align-self: start; }

/* Equipment grid */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equip-item { cursor: pointer; }
.equip-item input { display: none; }
.equip-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 12px 8px;
  font-size: 12px; color: var(--t2); text-align: center; transition: var(--tr);
  height: 70px; overflow: hidden;
}
.equip-item input:checked + .equip-box {
  background: rgba(var(--accent-rgb),0.1); border-color: var(--bdr-a); color: var(--t1);
}
.equip-ico { font-size: 20px; flex-shrink: 0; }
.equip-ico + span { font-size: 11px; line-height: 1.25; word-break: break-word; }

/* Results empty state */
.results-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; text-align: center; color: var(--t3);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.results-empty h3 { font-size: 17px; font-weight: 600; color: var(--t2); margin-bottom: 8px; }
.results-empty p { font-size: 14px; }

/* Workout plan output */
.workout-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--bdr); border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 24px;
}
.meta-item {
  background: var(--bg2); padding: 16px; text-align: center;
}
.meta-label { display: block; font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.meta-value { display: block; font-size: 17px; font-weight: 700; color: var(--t1); }
.meta-value.g { background: var(--grad-p); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.phase-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--bdr);
  font-size: 14px; color: var(--t2);
}
.phase-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(var(--accent-rgb),0.15); color: var(--purple);
}
.phase-badge.cool { background: rgba(16,185,129,0.12); color: var(--green); }

.ex-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--bdr);
  transition: var(--tr);
}
.ex-row:hover { background: rgba(255,255,255,0.02); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }
.ex-num {
  font-size: 13px; font-weight: 700; color: var(--t3);
  width: 28px; text-align: center; flex-shrink: 0;
}
.ex-info { flex: 1; }
.ex-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ex-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 100px; color: var(--t3); background: rgba(255,255,255,0.06);
}
.tag-chest, .tag-back, .tag-shoulders, .tag-arms, .tag-core, .tag-legs, .tag-cardio {
  background: rgba(var(--accent-rgb),0.10); color: var(--accent);
}
.ex-prescription {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex-shrink: 0;
}
.pres-sets { font-size: 13px; font-weight: 700; color: var(--t1); }
.pres-reps { font-size: 12px; color: var(--t2); }
.pres-rest { font-size: 11px; color: var(--t3); }

.regen-btn {
  width: 100%; margin-top: 20px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 13px; font-size: 14px; font-weight: 600;
  color: var(--t2); transition: var(--tr);
}
.regen-btn:hover { color: var(--t1); background: rgba(255,255,255,0.08); }

/* ================================================================
   EXERCISES VIEW
================================================================ */
.ex-filters { padding: 28px 0 20px; display: flex; flex-direction: column; gap: 14px; }
.search-wrap {
  position: relative; max-width: 420px;
}
.search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--t3); pointer-events: none;
}
.search-input {
  width: 100%; background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 11px 14px 11px 42px;
  font-size: 14px; color: var(--t1); outline: none; transition: var(--tr);
}
.search-input:focus { border-color: var(--bdr-a); }
.search-input::placeholder { color: var(--t3); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: 100px; padding: 7px 16px;
  font-size: 13px; font-weight: 500; color: var(--t2); transition: var(--tr);
}
.pill:hover { color: var(--t1); border-color: rgba(255,255,255,0.15); }
.pill.active {
  background: rgba(var(--accent-rgb),0.12); border-color: var(--bdr-a); color: var(--t1);
}

.sort-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 4px; border-top: 1px solid var(--bdr); margin-top: 4px;
}
.sort-lbl { font-size: 12px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.sort-pill {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: 100px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; color: var(--t2); transition: var(--tr);
}
.sort-pill:hover { color: var(--t1); border-color: rgba(245,158,11,0.4); }
.sort-pill.active {
  background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.5); color: var(--amber);
}

.ex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding-bottom: 64px;
}
.ex-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 22px;
  cursor: pointer; transition: var(--tr);
}
.ex-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow); }
.ex-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.ex-card-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 100px;
}
.ex-card-diff { font-size: 12px; color: var(--t3); }
.diff-beginner { color: var(--green); }
.diff-intermediate { color: var(--amber); }
.diff-advanced { color: var(--red); }
.diff-intense { color: #D946EF; }   /* fuchsia — clearly beyond advanced red */
.ex-bottom-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ex-fav-btn {
  margin-left: auto; padding: 0; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; opacity: 0; transition: opacity 0.15s, transform 0.15s;
  transform: scale(0.85);
}
.ex-card:hover .ex-fav-btn { opacity: 1; transform: scale(1); }
.ex-fav-btn.ex-fav-active { opacity: 1; transform: scale(1); }
.ex-cd-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--amber); background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3); border-radius: 100px;
  padding: 3px 10px;
}
.ex-cooldown { opacity: 0.65; }
.ex-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.ex-card-muscles { font-size: 13px; color: var(--t2); margin-bottom: 8px; }
.ex-card-equip {
  font-size: 12px; color: var(--t3);
  display: flex; align-items: center; gap: 4px;
}
.ex-card-cals { font-size: 12px; color: var(--t3); margin-top: 6px; }
.ex-xp-badge {
  display: inline-block; margin-top: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  color: var(--accent-text); background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 100px;
  padding: 3px 10px;
}

/* ================================================================
   MODAL
================================================================ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 36px; max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto; position: relative;
  animation: modalIn 0.25s ease;
}
.modal-sm { max-width: 460px; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.08); border: none; border-radius: 8px;
  width: 32px; height: 32px; color: var(--t2); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--tr); cursor: pointer;
}
.modal-close:hover { background: rgba(255,255,255,0.14); color: var(--t1); }

/* Modal exercise detail */
.modal-ex-header { margin-bottom: 24px; }
.modal-ex-header h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.modal-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-section { margin-bottom: 20px; }
.modal-section h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--t3); margin-bottom: 8px; }
.modal-section p { font-size: 14px; color: var(--t2); line-height: 1.65; }
.instruction-list { list-style: none; padding: 0; }
.instruction-list li {
  display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bdr);
  font-size: 14px; color: var(--t2);
}
.instruction-list li:last-child { border-bottom: none; }
.step-circle {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(var(--accent-rgb),0.15); color: var(--purple);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.modal-stat-row {
  display: flex; gap: 16px;
}
.mstat {
  flex: 1; background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 14px; text-align: center;
}
.mstat-val { display: block; font-size: 20px; font-weight: 800; color: var(--t1); }
.mstat-val.g { background: var(--grad-p); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.mstat-lbl { display: block; font-size: 11px; color: var(--t3); margin-top: 3px; }

/* ================================================================
   CALCULATOR VIEW
================================================================ */
.calc-layout {
  display: grid; grid-template-columns: 420px 1fr; gap: 24px;
  padding: 36px 0 64px;
}
.calc-results { position: relative; }

/* Results cards */
.cal-main {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 32px; margin-bottom: 16px;
}
.cal-main h3 { font-size: 14px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 20px; }
.cal-big { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 8px; }
.cal-num {
  font-size: 52px; font-weight: 900; letter-spacing: -2px; line-height: 1;
  background: var(--grad-p); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cal-unit { font-size: 18px; font-weight: 600; color: var(--t2); padding-bottom: 6px; }
.cal-desc { font-size: 14px; color: var(--t2); }
.cal-range {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.cal-range-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 20px;
}
.cal-range-card.min .range-num { color: var(--green); }
.cal-range-card.max .range-num { color: var(--orange); }
.range-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.range-num { font-size: 30px; font-weight: 800; }
.range-note { font-size: 12px; color: var(--t3); margin-top: 4px; }
.macro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.macro-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 16px; text-align: center;
}
.macro-pct { font-size: 22px; font-weight: 800; }
.macro-g { font-size: 14px; font-weight: 600; color: var(--t2); }
.macro-label { font-size: 11px; color: var(--t3); margin-top: 4px; }
.macro-carbs .macro-pct { color: var(--amber); }
.macro-protein .macro-pct { color: var(--blue); }
.macro-fat .macro-pct { color: var(--purple); }

/* Meal Plan */
.mp-header { margin-bottom: 24px; }
.mp-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.mp-subtitle { font-size: 13px; color: var(--t2); }
.mp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.mp-tab {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--bdr);
  background: var(--card); color: var(--t2); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.mp-tab:hover { border-color: var(--accent); color: var(--accent); }
.mp-tab.mp-tab-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mp-day-content { display: flex; flex-direction: column; gap: 12px; }
.mp-meal-card {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-lg); padding: 18px 20px;
}
.mp-meal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mp-meal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--t3); }
.mp-meal-prep { font-size: 12px; color: var(--t3); }
.mp-meal-name { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.mp-meal-macros { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-macro { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 10px; }
.mp-kcal { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.mp-prot { background: rgba(59,130,246,.12); color: var(--blue); }
.mp-carb { background: rgba(245,158,11,.12); color: var(--amber); }
.mp-fat  { background: rgba(var(--accent-rgb),.12); color: var(--purple); }
.mp-scale-note { font-size: 11px; color: var(--t3); margin-top: 8px; }
.mp-daily-total {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--r-lg);
  padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.mp-total-label { font-size: 13px; font-weight: 700; }
.mp-total-macros { display: flex; flex-wrap: wrap; gap: 8px; }

/* Meal name row + recipe expand */
.mp-meal-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mp-meal-name { font-size: 16px; font-weight: 700; flex: 1; }
.mp-recipe-btn {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--bdr); border-radius: 28px; background: transparent;
  cursor: pointer; color: var(--t3); white-space: nowrap; flex-shrink: 0;
  transition: all .15s; font-size: 12px; font-weight: 600;
  padding: 0 14px 0 6px; height: 44px;
}
.mp-recipe-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),.06); }
.mp-recipe-btn.open  { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),.1); }
.mp-recipe-label { display: none; }
.mp-recipe-btn:hover .mp-recipe-label,
.mp-recipe-btn.open  .mp-recipe-label { display: inline; }
.mp-recipe-arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bdr);
  background: var(--bg2); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
  transition: transform .25s, border-color .15s, background .15s;
}
.mp-recipe-btn:hover .mp-recipe-arrow { border-color: var(--accent); background: rgba(var(--accent-rgb),.1); }
.mp-recipe-btn.open  .mp-recipe-arrow { border-color: var(--accent); background: rgba(var(--accent-rgb),.15); transform: rotate(90deg); }

/* Recipe expand panel */
.mp-recipe { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mp-recipe.open { max-height: 800px; }
.mp-recipe-inner { padding: 14px 0 4px; border-top: 1px solid var(--bdr); margin-top: 12px; }
.mp-recipe-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--t3); margin-bottom: 10px; }
.mp-step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 13px; line-height: 1.5; color: var(--t1); }
.mp-step-num { min-width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.settings-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--t3); margin: 16px 0;
}
.settings-divider::before, .settings-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--bdr);
}

/* ================================================================
   CHAT VIEW
================================================================ */
#view-chat { padding-top: var(--nav-h); }
.chat-wrap {
  display: flex; flex-direction: column;
  /* minus --view-pb for the same reason as .chat-gate — the view's bottom
     padding is below this column, not inside it */
  height: calc(var(--vh) - var(--nav-h) - var(--view-pb));
  max-width: 760px; margin: 0 auto; padding: 0 16px;
}
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.back-btn-sm {
  background: rgba(255,255,255,0.06); border: 1px solid var(--bdr);
  color: var(--t2); width: 36px; height: 36px; border-radius: var(--r-sm);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: var(--tr); flex-shrink: 0;
}
.back-btn-sm:hover { color: var(--t1); background: rgba(255,255,255,0.1); }
/* #consistencyBack once styled this as a small inline button. It is now the
   Body tab, which shares .consistency-arrow-btn's rule — but an ID selector
   outranks a class, so this quietly kept overriding the shared padding and
   weight and the two tabs never matched no matter how the class was edited. */
.coach-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.coach-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--grad-p);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.coach-name { font-size: 15px; font-weight: 700; }
.coach-status { font-size: 12px; color: var(--t3); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.settings-btn {
  background: rgba(255,255,255,0.06); border: 1px solid var(--bdr);
  color: var(--t2); width: 36px; height: 36px; border-radius: var(--r-sm);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: var(--tr); flex-shrink: 0;
}
.settings-btn:hover { color: var(--t1); background: rgba(255,255,255,0.1); }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 20px 0 8px;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin; scrollbar-color: var(--bdr) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 85%; }
.msg-ai { align-self: flex-start; }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.msg-bubble {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: 16px; border-top-left-radius: 4px;
  padding: 14px 16px; font-size: 14px; line-height: 1.65; color: var(--t1);
}
.msg-user .msg-bubble {
  background: rgba(var(--accent-rgb),0.15); border-color: rgba(var(--accent-rgb),0.3);
  border-top-left-radius: 16px; border-top-right-radius: 4px;
}
.msg-bubble p { margin-bottom: 6px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { padding-left: 20px; margin: 4px 0 8px; }
.msg-bubble li { padding: 2px 0; line-height: 1.6; }
.msg-bubble strong { color: var(--t1); font-weight: 600; }
.msg-h1 { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; margin-bottom: 6px !important; }
.msg-h2 { font-size: 14px; font-weight: 700; margin-bottom: 4px !important; }
.msg-h3 { font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 3px !important; }
.msg-hr { border: none; border-top: 1px solid var(--bdr); margin: 10px 0; opacity: 0.6; }

.typing-indicator {
  display: flex; gap: 5px; align-items: center; padding: 6px 4px;
}
.typing-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--t2);
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); background: var(--purple); }
}

.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0;
  flex-shrink: 0;
}
.chip {
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: 100px; padding: 7px 14px; font-size: 13px; color: var(--t2);
  transition: var(--tr); white-space: nowrap;
}
.chip:hover { background: rgba(var(--accent-rgb),0.16); color: var(--t1); }

.chat-input-area {
  flex-shrink: 0; border-top: 1px solid var(--bdr);
  padding: 14px 0 20px;
  display: flex; gap: 10px; align-items: flex-end;
}
.chat-textarea {
  flex: 1; background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 13px 16px;
  font-size: 14px; color: var(--t1); resize: none; outline: none;
  max-height: 140px; overflow-y: auto; transition: var(--tr); line-height: 1.5;
}
.chat-textarea:focus { border-color: var(--bdr-a); }
.chat-textarea::placeholder { color: var(--t3); }
.send-btn {
  width: 46px; height: 46px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--grad-p); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  transition: var(--tr);
}
.send-btn:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.4); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ================================================================
   RESPONSIVE — TABLET  (≤ 1024px)
================================================================ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-large { grid-column: span 1; }
  .workout-layout { grid-template-columns: 1fr; }
  .calc-layout { grid-template-columns: 1fr; }
  .form-panel { max-width: 100%; }
}

/* ================================================================
   RESPONSIVE — MOBILE  (≤ 640px)
================================================================ */
@media (max-width: 640px) {
  :root { --nav-h: 60px; }

  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 60px; }
  .hero-title { letter-spacing: -1px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { width: 100%; justify-content: center; padding: 16px; }
  .hstat-sep { margin: 0 16px; }

  .features-grid { grid-template-columns: 1fr; }
  .steps-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .step-arrow { display: none; }
  .step-card { max-width: 100%; }

  .cta-card { padding: 40px 24px; }

  .opt-grid { grid-template-columns: repeat(2, 1fr); }
  .equip-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row-2 { grid-template-columns: 1fr; }
  .workout-meta { grid-template-columns: repeat(2, 1fr); }
  .cal-range { grid-template-columns: 1fr 1fr; }
  .macro-grid { grid-template-columns: repeat(3, 1fr); }
  .modal-stat-row { flex-direction: column; }

  .msg { max-width: 95%; }
  .chat-suggestions { gap: 6px; }
  .chip { font-size: 12px; padding: 6px 12px; }
}

@media (max-width: 380px) {
  .hero-stats { flex-direction: column; gap: 12px; }
  .hstat-sep { display: none; }
  .opt-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   PLAN BADGES
================================================================ */
.badge-pro {
  display: inline-block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(59,130,246,0.15); color: var(--blue);
  border: 1px solid rgba(59,130,246,0.3); margin-bottom: 10px;
}
.badge-premium { background: rgba(245,158,11,0.15); color: var(--amber); border-color: rgba(245,158,11,0.3); }
.badge-premium-lg {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 5px 14px; border-radius: 100px;
  background: rgba(245,179,1,0.14);
  color: var(--amber); border: 1px solid rgba(245,158,11,0.35);
}
.badge-premium-xs {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 2px 6px; border-radius: 100px;
  background: rgba(245,158,11,0.15); color: var(--amber);
  border: 1px solid rgba(245,158,11,0.3); margin-left: 4px;
  vertical-align: middle;
}
.feat-plan-badge { margin-bottom: 8px; }

/* ================================================================
   PLAN GATE (locked content)
================================================================ */
.plan-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 60vh; padding: 48px 24px;
}
/* --view-pb comes off the top as well as the navbar: the view's bottom padding
   sits below this element, so claiming the whole remaining viewport put the
   page 12-14px past the fold and produced a scrollbar with nothing behind it. */
.chat-gate { min-height: calc(var(--vh) - var(--nav-h) - var(--view-pb)); padding-top: var(--nav-h); }
.gate-icon { font-size: 64px; margin-bottom: 20px; }
.plan-gate h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.plan-gate p { font-size: 16px; color: var(--t2); max-width: 480px; margin-bottom: 28px; line-height: 1.7; }

/* ================================================================
   PRICING PAGE
================================================================ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 12px 0 0;
}
.pricing-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 0; position: relative;
  transition: var(--tr);
}
.pricing-card:hover { border-color: #2A2F3E; }
.pricing-featured {
  background: var(--surface);
  border-color: rgba(var(--accent-rgb),0.45);
  box-shadow: none;
}
.pricing-premium {
  background: var(--surface);
  border-color: rgba(245,158,11,0.35);
}
.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 4px; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink);
}
.badge-gold { background: var(--award); color: var(--accent-ink); }
.plan-name { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; font-weight: 800; margin-bottom: 8px; margin-top: 12px; letter-spacing: 0.5px; }
.plan-price { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 10px; }
.price-num { font-family: var(--font-data); font-size: 40px; font-weight: 700; letter-spacing: -1px; color: var(--t1); }
.price-period { font-size: 15px; color: var(--t3); padding-bottom: 6px; }
.plan-desc { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 20px; }
.plan-cta { margin-bottom: 24px; }
.plan-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-features li { font-size: 13px; display: flex; align-items: flex-start; gap: 6px; }
.feat-yes { color: var(--t1); }
.feat-no  { color: var(--t3); }

/* Billing note below feature list */
.plan-billing-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--r-sm);
}
.plan-billing-locked {
  color: var(--amber);
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.25);
}

/* Annual price sub-tag */
.price-annual-tag {
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
  padding-bottom: 1px;
  white-space: nowrap;
}
.price-period { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }

/* Billing toggle above pricing grid */
.billing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 4px;
  padding-top: 8px;
}
.billing-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: 3px;
  gap: 2px;
}
.billing-btn {
  padding: 7px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--t3);
  transition: var(--tr);
}
.billing-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.billing-save-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 100px;
  padding: 4px 10px;
}

/* ================================================================
   AUTH (Signup / Payment)
================================================================ */
.auth-container { max-width: 600px; margin: 0 auto; padding: 36px 0 64px; }
.auth-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 24px;
}
.selected-plan-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 24px;
  font-size: 14px; font-weight: 600; color: var(--t1);
}
.change-plan-btn {
  margin-left: auto; font-size: 12px; color: var(--purple);
  background: none; border: none; cursor: pointer; font-weight: 600;
}
.change-plan-btn:hover { text-decoration: underline; }
.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--t2); cursor: pointer;
}
.checkbox-row input { margin-top: 2px; accent-color: var(--purple); flex-shrink: 0; }

/* ================================================================
   PAYMENT PAGE
================================================================ */
.order-summary {
  background: rgba(var(--accent-rgb),0.06); border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 24px;
}
.order-plan-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.order-plan-price { font-family: var(--font-data); font-size: 28px; font-weight: 700; color: var(--accent); }
.order-plan-note { font-size: 12px; color: var(--t3); margin-top: 4px; }
.pay-tabs { display: flex; gap: 4px; margin-bottom: 24px; }
.pay-tab {
  flex: 1; padding: 10px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  background: var(--bg2); border: 1px solid var(--bdr); color: var(--t2); transition: var(--tr);
}
.pay-tab.active { background: rgba(var(--accent-rgb),0.12); border-color: var(--bdr-a); color: var(--t1); }
.alt-pay-info {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 13px; color: var(--t2); margin-bottom: 20px;
}
.btn-apple-pay {
  width: 100%; background: #000; color: #fff; border: none;
  border-radius: var(--r-md); padding: 16px; font-size: 18px; font-weight: 600;
  cursor: pointer; transition: var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-apple-pay:hover { background: #1a1a1a; }
.btn-paypal {
  width: 100%; background: #ffc439; border: none;
  border-radius: var(--r-md); padding: 16px; cursor: pointer; transition: var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.btn-paypal:hover { background: #f0b429; }
.secure-badge {
  font-size: 12px; color: var(--t3); text-align: center;
  padding: 10px 0 6px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.card-number-input { letter-spacing: 1px; }
.settings-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--t3); margin: 16px 0;
}
.settings-divider::before, .settings-divider::after { content: ''; flex: 1; height: 1px; background: var(--bdr); }

/* ================================================================
   LEADERBOARD
================================================================ */
.lb-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  padding: 32px 0 24px; flex-wrap: wrap;
}
.podium-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 20px 16px; text-align: center; min-width: 140px;
}
.podium-card.p1 { background: rgba(245,179,1,0.10); border-color: rgba(245,158,11,0.35); order: 2; }
.podium-card.p2 { border-color: rgba(156,163,175,0.4); order: 1; }
.podium-card.p3 { border-color: rgba(180,110,70,0.4); order: 3; }
.podium-medal { font-size: 28px; margin-bottom: 8px; display: block; }
.podium-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; margin: 0 auto 8px;
  background: var(--grad-p); color: #fff;
}
.podium-name { font-size: 14px; font-weight: 700; }
.podium-flag { font-size: 18px; }
.podium-workouts { font-size: 12px; color: var(--t3); margin-top: 4px; }
.podium-streak { font-size: 11px; color: var(--green); margin-top: 2px; }

.lb-table-wrap { overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--t3); border-bottom: 1px solid var(--bdr);
}
.lb-table td {
  padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px; color: var(--t2);
}
.lb-table tr:hover td { background: rgba(255,255,255,0.02); }
.lb-rank { font-weight: 800; font-size: 15px; color: var(--t1); width: 48px; }
.lb-athlete { display: flex; align-items: center; gap: 10px; }
.lb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.lb-name { font-weight: 600; color: var(--t1); }
.lb-location { font-size: 12px; color: var(--t3); }
.lb-level {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(var(--accent-rgb),0.12); color: var(--purple);
}
.lb-level.Elite { background: rgba(245,158,11,0.12); color: var(--amber); }
.lb-level.Advanced { background: rgba(16,185,129,0.12); color: var(--green); }
.lb-level.Intermediate { background: rgba(var(--accent-rgb),0.12); color: var(--purple); }
.streak-val { color: var(--green); font-weight: 600; }
.my-rank-card {
  background: var(--card); border: 1px solid rgba(var(--accent-rgb),0.35);
  border-radius: var(--r-xl); padding: 24px 28px; margin-top: 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.my-rank-label { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.my-rank-num { font-size: 36px; font-weight: 900; background: var(--grad-p); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Leaderboard section tabs */
.lb-section-tabs {
  display: flex; gap: 8px; padding: 24px 0 20px; flex-wrap: wrap;
}
.lb-section-tab {
  background: var(--card); border: 1px solid var(--bdr); border-radius: 100px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: var(--tr);
}
.lb-section-tab.active {
  background: rgba(var(--accent-rgb),0.15); border-color: rgba(var(--accent-rgb),0.4);
  color: var(--t1);
}
.lb-section-desc { font-size: 13px; color: var(--t3); margin: 0 0 16px; }
.lb-rank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 100px; border: 1px solid;
}

/* ================================================================
   RANK BADGES
================================================================ */
.rank-badge {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 20px; border-radius: 16px; border: 1px solid;
  min-width: 96px; text-align: center; flex-shrink: 0;
}
.rank-badge-icon { display:flex; align-items:center; justify-content:center; margin-bottom: 6px; }
.rank-badge-name { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.rank-bronze   { background: rgba(205,127,50,0.14); border-color: rgba(205,127,50,0.4); color: #CD7F32; }
.rank-silver   { background: rgba(192,192,192,0.14); border-color: rgba(192,192,192,0.4); color: #C0C0C0; }
.rank-gold     { background: rgba(255,215,0,0.14);   border-color: rgba(255,215,0,0.4);   color: #FFD700; }
.rank-platinum { background: rgba(45,212,191,0.14);  border-color: rgba(45,212,191,0.4);  color: #2DD4BF; }
.rank-diamond  { background: rgba(96,165,250,0.14);  border-color: rgba(96,165,250,0.4);  color: #60A5FA; }
.rank-elite    { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.4); color: #F87171; }
.rank-olympian { background: rgba(var(--accent-rgb),0.18);  border-color: rgba(var(--accent-rgb),0.5);  color: var(--accent); }
.rank-eternal {
  background: rgba(255,229,100,0.14);
  border-color: rgba(255,229,100,0.65);
  color: #FFE566;
  box-shadow: none;
  animation: eternalPulse 3s ease-in-out infinite;
}
@keyframes eternalPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: none; }
}
.rank-eternal .rank-badge-name { letter-spacing: 2px; font-size: 12px; }

/* ================================================================
   MY PROGRESS VIEW
================================================================ */
/* The card carries the colour of the tier you are actually on — the one place
   on the dashboard where your standing is stated, so it should look like the
   rank rather than like every other panel. --tier is set inline from
   TIER_COLORS when the card renders, so bronze reads warm, diamond cold, and
   eternal gold, with no per-tier CSS classes to keep in sync. Falls back to the
   plain card surface if the variable is ever missing. */
.overall-rank-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-radius: var(--r-xl); padding: 24px 28px; margin: 24px 0;
  --tier: var(--accent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tier) 18%, var(--card)) 0%,
      color-mix(in srgb, var(--tier) 7%,  var(--card)) 42%,
      var(--card) 100%);
  border: 1px solid color-mix(in srgb, var(--tier) 34%, var(--bdr));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tier) 20%, transparent),
              0 10px 34px color-mix(in srgb, var(--tier) 12%, transparent);
}
.overall-rank-details { flex: 1; }
.overall-rank-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; }
.overall-rank-title { font-size: 26px; font-weight: 900; margin: 4px 0; }
.overall-rank-next  { font-size: 13px; color: var(--t3); margin-top: 2px; }

.progress-layout {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .progress-layout { grid-template-columns: 1fr; }
}

/* Body SVG panel */
.body-diagram-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.body-view-toggle { display: flex; gap: 6px; }
.body-toggle-btn {
  background: var(--card); border: 1px solid var(--bdr); border-radius: 100px;
  padding: 6px 18px; font-size: 13px; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: var(--tr);
}
.body-toggle-btn.active {
  background: rgba(var(--accent-rgb),0.15); border-color: rgba(var(--accent-rgb),0.4); color: var(--t1);
}
.body-svg { width: 100%; max-width: 480px; }
.body-bg { fill: #232A3B; }
.muscle-area {
  cursor: pointer; transition: opacity 0.2s, filter 0.2s;
  stroke: rgba(0,0,0,0.45); stroke-width: 0.8;
}
.muscle-area:hover { opacity: 1 !important; filter: brightness(1.3) drop-shadow(0 0 6px currentColor) !important; }

.muscle-tooltip {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(9,11,20,0.92); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--t1);
  pointer-events: none; white-space: nowrap; text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 10;
}
.tt-rank { font-size: 12px; color: var(--t2); }
.tt-xp   { font-size: 11px; color: var(--t3); }

/* Muscle list panel */
.muscle-list-panel { display: flex; flex-direction: column; gap: 0; }
.muscle-list-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.muscle-rank-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; gap: 10px; transition: background 0.15s;
  border-radius: 6px;
}
.muscle-rank-item:hover { background: rgba(255,255,255,0.03); }
.muscle-rank-left { display: flex; align-items: center; gap: 10px; min-width: 110px; }
.muscle-rank-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.muscle-rank-name { font-size: 14px; font-weight: 600; color: var(--t1); }
.muscle-rank-right { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.muscle-rank-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px;
  border: 1px solid; white-space: nowrap;
}
.muscle-xp-bar {
  width: 60px; height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 100px; overflow: hidden; flex-shrink: 0;
}
.muscle-xp-fill { height: 100%; border-radius: 100px; transition: width 0.4s; }
.muscle-xp-num { font-size: 11px; color: var(--t3); white-space: nowrap; min-width: 54px; text-align: right; }
.xp-note { font-size: 12px; color: var(--t3); margin-top: 18px; text-align: center; }

/* ── Consistency arrow button ────────────────────────────────── */
.consistency-arrow-btn,
.consistency-back-tab {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--bdr-a);
  border-radius: 14px;
  padding: 20px 18px;
  min-width: 118px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.2);
  transition: var(--tr);
}
.consistency-arrow-btn:hover,
.consistency-back-tab:hover {
  background: rgba(var(--accent-rgb),0.15);
  box-shadow: 0 6px 28px rgba(var(--accent-rgb),0.35);
}

/* ── Consistency sliding panel ───────────────────────────────── */
#view-progress { position: relative; overflow-x: hidden; }

.consistency-panel {
  position: fixed;
  inset: 0;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  z-index: 90;
}

/* Floating left-edge tab mirroring the Consistency arrow tab */
/* Shares every rule with .consistency-arrow-btn below — these are the same
   control facing opposite directions, and keeping two hand-synced copies is
   why they kept drifting apart. Only side and colour differ. */
.consistency-back-tab {
  right: auto; left: 18px; z-index: 95; color: var(--accent);
  /* only while the panel is open — it used to be hidden by virtue of living
     inside the panel, which is exactly what broke its positioning */
  display: none;
}
body.consistency-open .consistency-back-tab { display: flex; }

.consistency-panel.open { transform: translateX(0); }

.consistency-scroll { padding: calc(var(--nav-h) + 24px) 20px 80px; max-width: 800px; margin: 0 auto; }

.consistency-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.consistency-title { font-size: 22px; font-weight: 800; margin: 0; }

/* ── Streak hero ─────────────────────────────────────────────── */
.streak-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.streak-ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.streak-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.streak-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 10;
}
.streak-ring-fill {
  fill: none;
  stroke: var(--purple);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.6));
}
.streak-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.streak-fire { font-size: 26px; line-height: 1; margin-bottom: 2px; }
.streak-num  { font-size: 42px; font-weight: 900; line-height: 1; color: var(--t1); }
.streak-unit { font-size: 11px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.streak-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  padding: 14px 24px;
  width: 100%;
  max-width: 340px;
}
.streak-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.streak-meta-val { font-size: 18px; font-weight: 800; color: var(--t1); }
.streak-meta-lab { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; }
.streak-meta-div { width: 1px; height: 32px; background: var(--bdr); flex-shrink: 0; }

/* ── Consistency cards ───────────────────────────────────────── */
.consistency-card {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 16px;
}

/* ── Chart ───────────────────────────────────────────────────── */
.chart-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.chart-type-tabs {
  display: flex;
  gap: 6px;
}
.chart-type-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--t3);
  cursor: pointer;
  transition: var(--tr);
  display: flex;
  align-items: center;
}
.chart-type-btn.active {
  background: rgba(var(--accent-rgb),0.18);
  border-color: rgba(var(--accent-rgb),0.5);
  color: var(--purple);
}
.chart-period-tabs {
  display: flex;
  gap: 4px;
}
.chart-period-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bdr);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  transition: var(--tr);
}
.chart-period-btn.active {
  background: rgba(var(--accent-rgb),0.18);
  border-color: rgba(var(--accent-rgb),0.5);
  color: var(--accent-text);
}
.chart-label {
  font-size: 12px;
  color: var(--t3);
  margin-bottom: 10px;
  font-weight: 500;
}
.chart-area { min-height: 180px; }
.chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--t3);
}
.chart-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* ── Stats grid ──────────────────────────────────────────────── */
.cstats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.cstat-card {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.cstat-icon { font-size: 20px; line-height: 1; }
.cstat-val  { font-size: 18px; font-weight: 800; color: var(--t1); }
.cstat-lab  { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* ── Weekly pattern bar ──────────────────────────────────────── */
.weekly-activity-title {
  font-size: 13px; font-weight: 700; margin-bottom: 14px; color: var(--t2);
}
.weekly-activity-row {
  display: flex;
  gap: 6px;
  height: 60px;
  align-items: flex-end;
}
.weekly-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.weekly-bar-fill {
  width: 100%;
  border-radius: 4px;
  transition: height 0.6s ease;
}
.weekly-day-labels {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.weekly-day-labels span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--t3);
  font-weight: 600;
}

/* ── Personal bests ──────────────────────────────────────────── */
.pb-title { font-size: 13px; font-weight: 700; margin-bottom: 14px; color: var(--t2); }
.pb-list  { display: flex; flex-direction: column; gap: 0; }
.pb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pb-row:last-child { border-bottom: none; }
.pb-icon  { font-size: 18px; flex-shrink: 0; }
.pb-label { flex: 1; font-size: 13px; color: var(--t2); font-weight: 500; }
.pb-val   { font-size: 13px; font-weight: 700; color: var(--t1); }

/* ── Mobile tweaks ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .cstats-grid { grid-template-columns: repeat(2, 1fr); }
  /* Both tabs, not just the Consistency one.
     This rule used to name .consistency-arrow-btn alone, so on a phone the
     Consistency tab became a centred pill at the bottom while the Body tab kept
     the tall desktop side-card — two controls doing the same job in the same
     flow, looking nothing like each other. They are never on screen together
     (Body only exists while the panel is open, Consistency only while it is
     closed), so they can share the same slot.
     `left` and `right` are both restated because .consistency-back-tab pins
     itself to the left edge further up; without overriding it, it would sit at
     left:18px and the translate would drag it off the edge. */
  /* Pinned to the right, not centred. Centred put it squarely on the
     silhouette's ankles — the 3D figure is centred too, so the two were always
     going to collide, and a floating control sitting on the thing it is not
     about reads as a mistake. The right edge is clear of the figure at every
     phone width and is still the easiest corner to reach with a thumb. */
  .consistency-arrow-btn,
  .consistency-back-tab {
    top: auto;
    left: auto;
    right: calc(14px + var(--sar, 0px));
    bottom: calc(var(--mobile-nav-h, 64px) + 12px);
    transform: none;
    flex-direction: row;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    min-width: 0;
    font-size: 13px;
  }
  .streak-meta { padding: 12px 16px; }
}

/* ── Streak flame SVG ────────────────────────────────────────── */
.streak-flame-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: -8px;
  z-index: 1;
}
.streak-flame-svg {
  --fc-outer: #4b5563;
  --fc-mid:   #6b7280;
  --fc-inner: #9ca3af;
  --fc-core:  #d1d5db;
  --fc-glow:  #374151;
  width: 52px;
  height: 72px;
  overflow: visible;
  transition: width .7s cubic-bezier(.34,1.56,.64,1),
              height .7s cubic-bezier(.34,1.56,.64,1),
              filter .7s ease;
}
.flame {
  transform-box: fill-box;
  transform-origin: bottom center;
}
.flame.fo { fill: var(--fc-outer); animation: flameOuter 1.4s ease-in-out infinite alternate; }
.flame.fm { fill: var(--fc-mid);   animation: flameMid   1.1s ease-in-out infinite alternate; }
.flame.fi { fill: var(--fc-inner); animation: flameInner  .9s ease-in-out infinite alternate; }
.flame.fc { fill: var(--fc-core);  animation: flameCore   .7s ease-in-out infinite alternate; }
.flame-glow-el { fill: url(#glowGrad); animation: glowPulse 1.4s ease-in-out infinite alternate; }
.streak-flame-svg.tier-unlit .flame,
.streak-flame-svg.tier-unlit .flame-glow-el { animation-play-state: paused; }

@keyframes flameOuter {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-1deg); }
  33%  { transform: scaleX(1.04) scaleY(.97)  rotate(1.5deg); }
  66%  { transform: scaleX(.96)  scaleY(1.02) rotate(-2deg); }
  100% { transform: scaleX(1.03) scaleY(.98)  rotate(1deg); }
}
@keyframes flameMid {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(1deg); }
  50%  { transform: scaleX(1.06) scaleY(.96)  rotate(-2deg); }
  100% { transform: scaleX(.97)  scaleY(1.03) rotate(2deg); }
}
@keyframes flameInner {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-1.5deg); }
  50%  { transform: scaleX(1.08) scaleY(.95)  rotate(2deg); }
  100% { transform: scaleX(.95)  scaleY(1.04) rotate(-2deg); }
}
@keyframes flameCore {
  0%   { transform: scaleY(1)   rotate(1deg); }
  50%  { transform: scaleY(.9)  rotate(-2deg); }
  100% { transform: scaleY(1.1) rotate(2deg); }
}
@keyframes glowPulse {
  from { opacity: .45; }
  to   { opacity: 1; }
}

/* ── Streak tier label ─────────────────────────────────────── */
.streak-tier-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: -4px;
  min-height: 18px;
  transition: color .6s ease, text-shadow .6s ease;
}

/* ── Fixed-position overlays ──────────────────────────────── */
.streak-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

/* ── Pillars ─────────────────────────────────────────────── */
.pillar {
  position: absolute;
  width: 88px;
  height: 100%;
  overflow: hidden;
  animation: pillarRise .9s cubic-bezier(.34,1.56,.64,1) both;
}
.pillar-tl {
  top: 0; left: 0;
  mask-image: linear-gradient(to right, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 40%, transparent 100%);
}
.pillar-bl {
  top: 0; left: 180px;
  mask-image: linear-gradient(to right, black 25%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 25%, transparent 100%);
}
.pillar-tr {
  top: 0; right: 0;
  mask-image: linear-gradient(to left, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 40%, transparent 100%);
}
.pillar-br {
  top: 0; right: 180px;
  mask-image: linear-gradient(to left, black 25%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 25%, transparent 100%);
}
@keyframes pillarRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pillars-wide .pillar { width: 132px; }

/* ── Lightning ───────────────────────────────────────────── */
.lightning-bolt {
  position: absolute;
  width: 6px;
  background: linear-gradient(to bottom,
    rgba(100,200,255,0)   0%,
    rgba(100,200,255,1)  30%,
    rgba(220,240,255,1)  50%,
    rgba(100,200,255,1)  70%,
    rgba(100,200,255,0) 100%);
  border-radius: 3px;
  filter: drop-shadow(0 0 10px #64c8ff) drop-shadow(0 0 28px #64c8ff) drop-shadow(0 0 50px #64c8ff);
  animation: lightningFlash .4s ease-out forwards;
  pointer-events: none;
}
@keyframes lightningFlash {
  0%   { opacity: 0; transform: scaleY(.1); }
  20%  { opacity: 1; transform: scaleY(1); }
  60%  { opacity: .7; }
  100% { opacity: 0; }
}

/* Complete workout log row */
.workout-log-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 0 8px;
}
.log-workout-btn { flex-shrink: 0; }
.log-workout-note { font-size: 12px; color: var(--t3); }

/* XP toast notification */
.xp-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: rgba(9,11,20,0.95); border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: 12px; padding: 12px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 14px; font-weight: 700; color: var(--accent);
  pointer-events: none; z-index: 9999;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.35s;
  opacity: 0;
}
.xp-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ================================================================
   CAMERA REP COUNTER MODAL
================================================================ */
.cam-modal-box { max-width: 640px; padding: 28px 24px 20px; }
.cam-ex-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.cam-status-text { font-size: 13px; color: var(--t3); margin-bottom: 14px; min-height: 18px; }
.cam-video-wrap {
  position: relative; width: 100%; border-radius: var(--r-lg);
  overflow: hidden; background: #000; aspect-ratio: 4/3;
  border: 1px solid var(--bdr); margin-bottom: 16px;
}
.cam-video-wrap video, .cam-video-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cam-video-wrap video { z-index: 1; }
.cam-video-wrap canvas { z-index: 2; }
.cam-rep-overlay {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  background: rgba(9,11,20,0.78); border: 1px solid rgba(167,139,250,0.4);
  border-radius: 14px; padding: 8px 16px; display: flex;
  flex-direction: column; align-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#camRepCount { font-size: 42px; font-weight: 800; color: #A78BFA; line-height: 1; }
.cam-rep-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.08em; }
.cam-result-row { display: flex; gap: 12px; margin-bottom: 16px; }
.cam-result-card {
  flex: 1; background: var(--card); border: 1px solid rgba(167,139,250,0.3);
  border-radius: var(--r-lg); padding: 14px; text-align: center;
}
.cam-result-val { display: block; font-size: 32px; font-weight: 800; color: #A78BFA; }
.cam-result-lbl { display: block; font-size: 12px; color: var(--t3); margin-top: 2px; }
.cam-btn-row { display: flex; gap: 10px; margin-bottom: 12px; }
.cam-btn-row .btn { flex: 1; }
.cam-hint { font-size: 12px; color: var(--t3); text-align: center; margin: 0; }
.cam-ex-btn { font-size: 15px; }

/* ================================================================
   WORKOUT TABS
================================================================ */
.workout-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bdr); padding-bottom: 0;
}
.workout-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--t2);
  transition: var(--tr); cursor: pointer; display: flex; align-items: center; gap: 6px;
  margin-bottom: -1px;
}
.workout-tab.active { color: var(--t1); border-bottom-color: var(--purple); }
.workout-tab:hover { color: var(--t1); }
.workout-tab-content { padding-bottom: 16px; }
/* the warm-up generator is a whole page rather than a tab panel — same
   spacing, without the class that makes it a target for panel sweeps */
.wgen-page { padding-bottom: 16px; }

/* ================================================================
   PREMIUM WORKOUT CARDS
================================================================ */
.premium-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0 20px; flex-wrap: wrap; gap: 12px;
}
.prem-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 16px; padding-bottom: 64px; }
.prem-card {
  position: relative;
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 24px; cursor: pointer; transition: var(--tr);
}
.prem-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow); }
.prem-card-emoji { font-size: 32px; margin-bottom: 12px; }
.prem-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.prem-card p { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 12px; }
.prem-card-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.prem-meta-tag {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 100px; background: rgba(255,255,255,0.06); color: var(--t3);
}

/* Premium detail modal content */
.prem-detail-header { margin-bottom: 20px; }
.prem-detail-header h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.exercise-step-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--bdr);
}
.exercise-step-row:last-child { border-bottom: none; }
.step-ex-name { font-size: 14px; font-weight: 600; color: var(--t1); }
.step-ex-detail { font-size: 12px; color: var(--t2); margin-top: 2px; }
.step-ex-note { font-size: 12px; color: var(--t3); font-style: italic; margin-top: 2px; }

/* ================================================================
   HOME — PREMIUM FEATURES ROW
================================================================ */
.premium-features-row {
  margin-top: 48px; text-align: center;
  padding: 36px; background: var(--surface);
  border: 1px solid rgba(245,158,11,0.2); border-radius: var(--r-xl);
}
.prem-badge-row { margin-bottom: 24px; }
.prem-feat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.prem-feat { text-align: center; }
.prem-feat-icon { font-size: 36px; margin-bottom: 10px; }
.prem-feat h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.prem-feat p { font-size: 13px; color: var(--t2); line-height: 1.6; }

/* ── Calisthenics locked level cards ──────────────────────── */
.prem-card-locked {
  position: relative; cursor: not-allowed !important;
}
.prem-card-locked::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.52); border-radius: inherit; z-index: 0; pointer-events: none;
}
.prem-card-locked > *:not(.cal-lock-badge):not(.cal-done-badge) { position: relative; z-index: 1; }
.cal-lock-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 20px; z-index: 2; line-height: 1;
}
.cal-done-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 18px; z-index: 2; line-height: 1;
}
.cal-level-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 8px; color: var(--t3);
}
.cal-verify-btn {
  display: block; width: 100%; margin-top: 14px;
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center; transition: var(--tr);
  background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.35); color: var(--purple);
}
.cal-verify-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.22); }
.cal-verify-btn.cal-verify-done {
  background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; cursor: default;
}

/* ================================================================
   CAMERA MODAL
================================================================ */
.camera-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}
.camera-title { font-size: 16px; font-weight: 700; }
.camera-subtitle { font-size: 12px; color: var(--t3); }
.camera-layout { display: grid; grid-template-columns: 1fr 280px; }
.camera-feed-wrap {
  position: relative; background: #000; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#cameraFeed { width: 100%; height: 100%; object-fit: cover; display: none; }
.camera-placeholder { color: var(--t3); text-align: center; }
.camera-overlay-badge {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--bdr); border-radius: var(--r-md);
  padding: 8px 14px; text-align: center;
}
.score-label { display: block; font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.8px; }
.score-num { display: block; font-size: 24px; font-weight: 900; background: var(--grad-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.camera-sidebar { padding: 20px; border-left: 1px solid var(--bdr); overflow-y: auto; }
.camera-rep-bar {
  border-top: 1px solid var(--bdr); background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 18px 24px;
}
.camera-rep-num {
  font-size: 56px; font-weight: 900; line-height: 1;
  background: var(--grad-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.camera-rep-label { font-size: 14px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; }

/* ── Privacy assurance strip below camera feed ── */
.camera-privacy-bar {
  background: rgba(16,185,129,0.04);
  border-top: 1px solid rgba(16,185,129,0.10);
  padding: 7px 20px;
  font-size: 11px;
  color: var(--t3);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

/* ── Log panel (shown after Stop Camera) ── */
.camera-log-panel {
  border-top: 1px solid var(--bdr); background: var(--bg2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; flex-wrap: wrap;
}
.camera-log-summary { display: flex; flex-direction: column; gap: 4px; }
.camera-log-ex { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--t3); }
.camera-log-stats { display: flex; align-items: center; gap: 8px; }
.camera-log-rep-count { font-size: 20px; font-weight: 800; color: var(--t1); }
.camera-log-dot { color: var(--t3); font-size: 18px; }
.camera-log-xp {
  font-size: 20px; font-weight: 800;
  background: var(--grad-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.camera-log-hint { font-size: 11px; color: var(--t3); margin-top: 3px; }
.camera-log-btn { padding: 12px 28px; font-size: 14px; flex-shrink: 0; }

/* ── XP celebration overlay ── */
.xp-celebration {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.xp-celebration.xp-cel--show { opacity: 1; pointer-events: auto; }
.xp-celebration.xp-cel--hide { opacity: 0; pointer-events: none; }
.xp-cel-card {
  background: var(--bg2); border: 1px solid rgba(var(--accent-rgb),0.35);
  border-radius: 24px; padding: 40px 48px; text-align: center;
  max-width: 380px; width: 90%;
  transform: translateY(30px); transition: transform 0.4s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.xp-celebration.xp-cel--show .xp-cel-card { transform: translateY(0); }
.xp-cel-icon { font-size: 52px; margin-bottom: 12px; }
.xp-cel-exercise { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.xp-cel-reps { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; }
.xp-cel-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.xp-cel-num {
  font-size: 72px; font-weight: 900; line-height: 1; margin-bottom: 16px;
  background: var(--grad-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.xp-cel-bar-wrap {
  height: 6px; background: var(--bg); border-radius: 3px;
  overflow: hidden; margin-bottom: 20px;
}
.xp-cel-bar { height: 100%; width: 0%; background: var(--grad-g); border-radius: 3px; }
.xp-cel-sub { font-size: 12px; color: var(--t3); }

.form-feedback-card {
  margin-top: 16px; background: var(--bg); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 14px;
}
.feedback-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--t3); margin-bottom: 8px; }
.feedback-text { font-size: 13px; color: var(--t1); line-height: 1.6; }
.feedback-history { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.feedback-item { font-size: 12px; color: var(--t3); padding: 6px 10px; background: var(--bg); border-radius: var(--r-sm); border-left: 2px solid var(--green); }

/* ================================================================
   ACCOUNT VIEW
================================================================ */
.account-avatar-big {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--grad-p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; margin: 0 auto 16px;
}
.account-name { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.account-email { font-size: 14px; color: var(--t2); text-align: center; margin-bottom: 24px; }
.account-plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 700;
  margin: 0 auto 24px; display: flex; justify-content: center; width: fit-content;
}
.plan-badge-free { background: rgba(255,255,255,0.06); color: var(--t2); border: 1px solid var(--bdr); }
.plan-badge-pro { background: rgba(var(--accent-rgb),0.12); color: var(--purple); border: 1px solid rgba(var(--accent-rgb),0.3); }
.plan-badge-premium { background: rgba(245,158,11,0.12); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }
.account-actions { display: flex; flex-direction: column; gap: 10px; }

/* ================================================================
   SEQUENCE ACCORDION ROWS
================================================================ */
.seq-acc-row { border-bottom: 1px solid var(--bdr); }
.seq-acc-row:last-child { border-bottom: none; }
.seq-acc-header { display: flex; align-items: center; gap: 10px; padding: 10px 4px; }
.seq-acc-clickable { cursor: pointer; border-radius: var(--r-sm); transition: background 0.15s; }
.seq-acc-clickable:hover { background: rgba(var(--accent-rgb),0.07); }
.seq-acc-content { flex: 1; min-width: 0; }
.seq-acc-name { font-size: 14px; color: var(--t1); line-height: 1.4; }
.seq-acc-arrow { color: var(--t3); font-size: 20px; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; margin-left: 4px; }
.seq-acc-body { padding: 4px 4px 16px 46px; }
.seq-acc-steps { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 7px; }
.seq-acc-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--t1); line-height: 1.6; }
.seq-acc-tip { font-size: 13px; color: #4ade80; background: rgba(74,222,128,0.08); border-radius: 6px; padding: 7px 10px; margin-bottom: 8px; line-height: 1.5; }
.seq-acc-avoid { font-size: 13px; color: var(--t2); padding: 3px 0; line-height: 1.5; }

/* ================================================================
   RESPONSIVE — NEW SECTIONS
================================================================ */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .prem-feat-grid { grid-template-columns: repeat(2,1fr); }
  .camera-layout { grid-template-columns: 1fr; }
  .camera-sidebar { border-left: none; border-top: 1px solid var(--bdr); }
  .camera-feed-wrap { aspect-ratio: 4/3; }
}
@media (max-width: 640px) {
  .pricing-grid { max-width: 100%; }
  .lb-podium { gap: 8px; }
  .podium-card { min-width: 100px; padding: 14px 10px; }
  .lb-table th:nth-child(3), .lb-table td:nth-child(3) { display: none; }
  .workout-tabs { gap: 2px; }
  .workout-tab { padding: 8px 10px; font-size: 12px; }
  .prem-feat-grid { grid-template-columns: 1fr 1fr; }
  .pay-tabs { flex-direction: column; }
  .auth-card { padding: 24px 18px; }
}

/* ================================================================
   HOME DASHBOARD
================================================================ */
/* The navbar is already cleared by .view's own padding-top (and on desktop by
   the dock band on top of that). Adding --nav-h again here counted it twice,
   which is where the ~96px of empty space above "Good evening" came from — 60px
   of it was a second copy of a gap that had already been left. */
.dashboard-section {
  padding: 36px 0 64px;
}
.dash-greeting {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  margin-bottom: 28px;
  color: var(--t1);
}
.dash-greeting span {
  background: var(--grad-p);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* at-a-glance rank + consistency strip */
.dash-stats {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 14px; margin-bottom: 22px;
}
.dstat {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-lg);
  padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.dstat-num {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 32px);
  font-weight: 800; color: var(--t1); line-height: 1;
}
.dstat-num em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--t3); margin-left: 6px; }
.dstat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--t3); }
/* Same tier treatment as .overall-rank-card, so your rank looks the same
   wherever it is stated. The previous inline gradient used TIER_COLORS.bg at
   0.18 alpha faded to transparent by 72%, which on the dark card surface was
   close to invisible — the tint was technically there and read as flat. */
.dstat-rank {
  flex-direction: row; align-items: center; gap: 16px;
  --tier: var(--accent);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--tier) 22%, var(--card)) 0%,
      color-mix(in srgb, var(--tier) 9%,  var(--card)) 55%,
      var(--card) 100%);
  border: 1px solid color-mix(in srgb, var(--tier) 38%, var(--bdr));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tier) 22%, transparent),
              0 8px 26px color-mix(in srgb, var(--tier) 12%, transparent);
}
.dstat-rank-badge { flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
.dstat-rank-badge svg { width: 100%; height: 100%; }
.dstat-rank-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.dstat-rank-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.4px; }
.dstat-ladder { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dstat-ladder i { display: block; height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.dstat-rank-next { font-size: 11px; color: var(--t3); }
@media (max-width: 760px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dstat-rank { grid-column: 1 / -1; }
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: start;
}
.dash-panel {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 24px;
}
.dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dash-panel-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
}
.dash-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--t2);
  font-size: 14px;
}
.dash-empty-icon { font-size: 40px; margin-bottom: 12px; }
.dash-empty-sub { font-size: 13px; color: var(--t3); margin-top: 6px; line-height: 1.5; }
.dash-workout-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-ex-list { display: flex; flex-direction: column; gap: 8px; }
.dash-ex-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-md);
  border: 1px solid var(--bdr);
}
.dash-ex-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.dash-ex-info { display: flex; flex-direction: column; gap: 2px; }
.dash-ex-name { font-size: 14px; font-weight: 600; color: var(--t1); }
.dash-ex-detail { font-size: 12px; color: var(--t3); }
.dash-link {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--accent-text);
  text-decoration: none;
}
.dash-link:hover { text-decoration: underline; }
.ideas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.idea-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  text-align: center;
  transition: var(--tr);
}
.idea-card span {
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  line-height: 1.3;
}
.idea-card:hover {
  border-color: var(--purple);
  background: rgba(var(--accent-rgb),0.08);
  transform: translateY(-2px);
}
.idea-card:hover span { color: var(--t1); }

/* ================================================================
   COURSE MODALS — tabs + week plans + exercise guides
================================================================ */
.ctab-row {
  display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}
.ctab-btn {
  padding: 7px 16px; border-radius: 100px; border: 1px solid var(--bdr);
  background: transparent; color: var(--t2); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: var(--tr);
}
.ctab-btn.active, .ctab-btn:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--purple);
}
.course-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.course-week {
  background: rgba(255,255,255,0.03); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 16px; margin-bottom: 12px;
}
.course-week-label {
  font-size: 14px; font-weight: 700; color: var(--purple); margin-bottom: 6px;
}
.course-week-goal {
  font-size: 13px; color: var(--t2); margin-bottom: 12px; line-height: 1.6;
}
.course-sessions { display: flex; flex-direction: column; gap: 8px; }
.course-session {
  font-size: 13px; color: var(--t1); line-height: 1.6;
  display: flex; gap: 8px; align-items: flex-start;
}
.session-tag {
  background: var(--accent); color: var(--accent-ink); padding: 2px 8px;
  border-radius: 4px; font-size: 11px; font-weight: 700; flex-shrink: 0;
  margin-top: 2px;
}
.ex-guide-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--bdr);
  border-radius: var(--r-md); padding: 16px; margin-bottom: 14px;
}
.ex-guide-name {
  font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 12px;
}
.ex-guide-steps {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ex-guide-steps li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--t1); line-height: 1.6;
}
.ex-guide-tip {
  font-size: 13px; color: var(--green); background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.2); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 10px; line-height: 1.6;
}
.ex-guide-avoid-item {
  font-size: 13px; color: var(--t2); padding: 4px 0; line-height: 1.5;
}
.ex-row-clickable { cursor: pointer; transition: background 0.15s; }
.ex-row-clickable:hover { background: rgba(var(--accent-rgb),0.06); border-radius: var(--r-sm); }
.ex-row-hint { font-size: 11px; color: var(--purple); margin-top: 3px; }

/* Payment test shortcut */
.test-shortcut {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--bdr);
  text-align: center;
}
.test-shortcut-label {
  font-size: 12px;
  color: var(--t3);
  margin-bottom: 12px;
}
.test-shortcut-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .dashboard-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ideas-grid { grid-template-columns: repeat(4, 1fr); }
  .idea-card { padding: 10px 6px; font-size: 20px; }
}

/* ================================================================
   YOGA POSE IMAGES
================================================================ */
.pose-img-row {
  display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.pose-img {
  flex: 1; min-width: 120px; max-width: 200px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bdr);
  object-fit: contain;
  aspect-ratio: 1 / 1;
  padding: 8px;
}

/* ================================================================
   FRIENDS
================================================================ */
.nav-friends-btn {
  position: relative;
  display: flex; align-items: center; gap: 5px;
}
.friends-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 100px; background: var(--red);
  font-size: 10px; font-weight: 800; color: #fff;
  position: absolute; top: -4px; right: -4px;
}
.friend-search-wrap {
  display: flex; gap: 10px; margin-bottom: 24px;
}
.friend-search-wrap .form-input { flex: 1; }
.friend-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--card);
  border: 1px solid var(--bdr); border-radius: var(--r-lg);
  margin-bottom: 10px; transition: var(--tr);
}
.friend-card:hover { border-color: rgba(var(--accent-rgb),0.3); }
.friend-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; flex-shrink: 0;
}
.friend-info { flex: 1; min-width: 0; }
.friend-name  { font-size: 15px; font-weight: 600; color: var(--t1); }
.friend-email { font-size: 12px; color: var(--t3); margin-top: 1px; }
.friend-actions { display: flex; gap: 8px; flex-shrink: 0; }
.friends-empty {
  text-align: center; padding: 48px 24px;
  color: var(--t3); font-size: 14px;
}
.friends-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ================================================================
   SETTINGS TABS
================================================================ */
.stab-bar {
  display: flex; gap: 8px; padding: 28px 0 20px;
  border-bottom: 1px solid var(--bdr); margin-bottom: 28px; flex-wrap: wrap;
}
.stab-btn {
  padding: 9px 20px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: var(--tr);
}
.stab-btn:hover  { color: var(--t1); border-color: rgba(255,255,255,0.15); }
.stab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Field edit row */
.sfield-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; gap: 12px;
}
.sfield-row + .sfield-row { border-top: 1px solid var(--bdr); }
.sfield-label { font-size: 12px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.sfield-value { font-size: 15px; font-weight: 500; color: var(--t1); }
.sfield-edit-btn {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid var(--bdr);
  color: var(--t2); cursor: pointer; transition: var(--tr);
  display: flex; align-items: center; justify-content: center;
}
.sfield-edit-btn:hover { background: rgba(var(--accent-rgb),0.15); border-color: rgba(var(--accent-rgb),0.4); color: var(--purple); }
.sfield-edit-form {
  background: var(--bg2); border: 1px solid var(--bdr-a);
  border-radius: var(--r-md); padding: 16px; margin-top: 8px;
}
.sfield-edit-form .form-group { margin-bottom: 14px; }
.sfield-edit-form .form-group:last-of-type { margin-bottom: 0; }
.sfield-edit-actions { display: flex; gap: 8px; margin-top: 14px; }

/* Change password button */
.change-pw-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 18px; border-radius: var(--r-md);
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--purple); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: var(--tr); text-align: left;
}
.change-pw-btn:hover { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.45); }
.change-pw-form {
  background: var(--bg2); border: 1px solid var(--bdr-a);
  border-radius: var(--r-md); padding: 20px; margin-top: 12px;
}
.change-pw-form .form-group { margin-bottom: 16px; }
.change-pw-form .form-group:last-of-type { margin-bottom: 0; }

/* ================================================================
   SETTINGS PAGE
================================================================ */
.nav-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bdr);
  color: var(--t2);
  cursor: pointer; transition: var(--tr);
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.12); color: var(--t1); }

.settings-section { margin-bottom: 28px; }
.settings-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--t3);
  margin-bottom: 10px; padding-left: 2px;
}
.settings-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 24px 28px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.settings-row-label { font-size: 14px; font-weight: 600; color: var(--t1); }
.settings-row-sub   { font-size: 12px; color: var(--t3); margin-top: 2px; }
.settings-divider   { border: none; border-top: 1px solid var(--bdr); margin: 18px 0; }

.theme-toggle-group { display: flex; gap: 6px; flex-shrink: 0; }
.theme-btn {
  padding: 7px 16px; border-radius: 100px;
  border: 1px solid var(--bdr); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: var(--tr);
}
.theme-btn:hover  { border-color: var(--purple); color: var(--purple); }
.theme-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.settings-msg {
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; margin-bottom: 14px;
}
.settings-msg.success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: var(--green); }
.settings-msg.error   { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.3);  color: var(--red); }

/* Toggle switch */
.settings-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle-track {
  position: absolute; inset: 0; border-radius: 100px;
  background: var(--bg2); border: 1px solid var(--bdr);
  transition: var(--tr);
}
.settings-toggle-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--t3); transition: var(--tr);
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--purple); border-color: var(--purple); }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(20px); background: #fff; }

/* ---------- LEGAL PAGES (ToS / Privacy) ---------- */
/* The legal pages read at 760px, but their page-header sits in the standard
   1160px container — so the title was centred against one width and the text
   under it against another, and the body started 67px to the right of its own
   heading. Matching the header to the content is what lines them up; widening
   the content instead would push the measure past comfortable reading. */
#view-tos .page-header .container,
#view-privacy .page-header .container { max-width: 760px; }

.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.legal-container h1 {
  font-size: 2rem;
  font-weight: 800;
  background: var(--grad-p);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.legal-updated {
  font-size: 0.82rem;
  color: var(--t3);
  margin-bottom: 32px;
}
.legal-section {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.legal-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.legal-section p,
.legal-section li {
  font-size: 0.9rem;
  color: var(--t2);
  line-height: 1.7;
}
/* Consecutive paragraphs had no separation at all — every clause after the
   first ran straight into the one above it, which is the last thing terms
   should do. */
.legal-section p + p { margin-top: 12px; }

/* `display: flex` on a list suppresses its markers: the browser stops treating
   the children as list items, so these rendered as unindented paragraphs with
   no bullets and no visible relationship to the sentence introducing them. */
.legal-section ul,
.legal-section ol {
  padding-left: 22px;
  margin-top: 10px;
}
.legal-section ul { list-style: disc; }
.legal-section ol { list-style: decimal; }
.legal-section li { margin-bottom: 7px; }
.legal-section li::marker { color: var(--t3); }
.legal-section strong {
  color: var(--t1);
  font-weight: 600;
}
.legal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--card2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  color: var(--t2);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--tr);
  margin-bottom: 28px;
}
.legal-back-btn:hover {
  background: var(--card);
  color: var(--t1);
  border-color: var(--bdr-a);
}

@media (max-width: 640px) {
  .settings-card { padding: 18px 16px; }
  .settings-row  { flex-wrap: wrap; gap: 12px; }
}

/* ================================================================
   MOBILE APP — iOS Safe Areas + Phone Layout (≤ 430px)
================================================================ */

/* Safe-area CSS variables (notch / Dynamic Island / home bar) */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

/* Navbar drops below status bar */
.navbar {
  padding-top: var(--sat);
  height: calc(var(--nav-h) + var(--sat));
}

/* All views push content below the taller navbar */
.view { padding-top: calc(var(--nav-h) + var(--sat)); }

/* Page headers that already add nav-h offset */
/* .view already clears the fixed navbar, so adding nav-h here again applied
   that 64px twice and left a dead band above every page title — enough to
   push short pages past the fold while the top of the screen sat empty.
   Only the breathing room below the bar belongs here. */
.page-header { padding-top: 16px !important; }

/* Hero already uses nav-h — extend for safe area */
.hero { padding-top: calc(var(--nav-h) + var(--sat) + 48px); }

/* Bottom home-indicator clearance */
body { padding-bottom: var(--sab); }

/* ── Phone-specific overrides ──────────────────────────────── */
@media (max-width: 430px) {

  /* ── Layout ── */
  .container { padding-left: calc(14px + var(--sal)); padding-right: calc(14px + var(--sar)); }

  /* ── Typography scale-down ── */
  .hero-title   { font-size: clamp(26px, 8vw, 38px); }
  .hero-sub     { font-size: 14px; }
  .page-title   { font-size: clamp(20px, 6vw, 26px); }
  .page-sub     { font-size: 13px; }

  /* ── Navbar ── */
  .nav-brand .brand-text { font-size: 18px; }

  /* ── Modals: slide up from bottom, sheet style ── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-box {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding-bottom: calc(20px + var(--sab));
  }
  .modal-close {
    position: sticky;
    top: 0;
    z-index: 10;
    float: right;
    margin: 0 0 -36px auto;
  }

  /* ── Camera modal: true full-screen ── */
  #cameraModal {
    padding: 0;
  }
  #cameraModal .camera-modal-inner,
  .camera-modal-inner {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    min-height: 100dvh;
    padding-top: var(--sat);
    padding-bottom: var(--sab);
  }

  /* ── Workout tabs: horizontal scroll strip ── */
  .workout-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .workout-tabs::-webkit-scrollbar { display: none; }
  .workout-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ── Premium grids: single column ── */
  .prem-grid           { grid-template-columns: 1fr; gap: 12px; }
  .prem-feat-grid      { grid-template-columns: 1fr; }

  /* ── Pricing: single column ── */
  .pricing-grid        { grid-template-columns: 1fr; max-width: 100%; }
  .pricing-card        { padding: 24px 20px; }
  .billing-toggle-wrap { flex-direction: column; gap: 8px; }

  /* ── Settings tabs: horizontal scroll ── */
  .stab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .stab-bar::-webkit-scrollbar { display: none; }
  .stab-btn { flex-shrink: 0; font-size: 13px; padding: 8px 14px; }

  /* ── Leaderboard ── */
  .lb-podium            { gap: 6px; }
  .podium-card          { min-width: 90px; padding: 12px 8px; }
  .podium-name          { font-size: 11px; }
  .podium-score         { font-size: 13px; }
  .lb-table th,
  .lb-table td          { padding: 10px 8px; font-size: 12px; }
  /* hide low-priority columns on very small screens */
  .lb-table th:nth-child(4),
  .lb-table td:nth-child(4) { display: none; }

  /* ── Friends ── */
  .friend-card    { padding: 12px 14px; gap: 10px; }
  .friend-actions { flex-direction: column; gap: 6px; }
  .friend-actions button { width: 100%; }

  /* ── Dashboard ── */
  .dash-action-grid  { grid-template-columns: repeat(2, 1fr); }
  .ideas-grid        { grid-template-columns: repeat(3, 1fr); }
  .idea-card         { font-size: 18px; padding: 10px 4px; }
  .dash-panel        { padding: 18px 16px; }

  /* ── Calorie calculator ── */
  .macro-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .macro-card { padding: 12px 8px; }
  .macro-val  { font-size: 20px; }

  /* ── Forms: 16px prevents iOS auto-zoom ── */
  .form-input,
  select.form-input,
  textarea.form-input { font-size: 16px !important; height: 50px; }
  textarea.form-input { height: auto; min-height: 80px; }

  /* ── Buttons: 44px min touch target ── */
  .btn { min-height: 44px; font-size: 15px; }
  .btn-sm { min-height: 36px; }

  /* ── Auth / signup / payment ── */
  .auth-container { padding: 12px 0 calc(60px + var(--sab)); }
  .auth-card      { padding: 20px 16px; border-radius: var(--r-xl); }

  /* ── Progress page ── */
  .xp-bar-wrap    { height: 10px; }
  .rank-badge     { font-size: 12px; padding: 4px 10px; }

  /* ── Yoga pose images ── */
  .pose-img { min-width: 100px; max-width: 160px; }

  /* ── Legal pages ── */
  .legal-container { padding: 16px 14px calc(40px + var(--sab)); }
  .legal-section   { padding: 16px; }

  /* ── Camera verify banner ── */
  #verifyBanner {
    bottom: calc(12px + var(--sab));
    left: calc(12px + var(--sal));
    right: calc(12px + var(--sar));
    width: auto;
  }

  /* ── Settings inline-edit forms ── */
  .sfield-edit-form { flex-direction: column; }
  .sfield-edit-actions { flex-direction: row; gap: 8px; }

  /* ── Change-password form ── */
  .change-pw-form { padding: 14px; }

  /* ── Calisthenics / endurance cards ── */
  .prem-card    { padding: 18px 16px; }
  .cal-level-tag { font-size: 11px; padding: 3px 8px; }
}

/* ================================================================
   TEXT-TO-SPEECH — Listen button above steps
================================================================ */
.tts-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  border-radius: 100px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  letter-spacing: 0.2px;
}
.tts-all-btn:hover { background: rgba(var(--accent-rgb),0.20); }
.tts-all-btn.tts-speaking {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.35);
  color: var(--red);
}

/* ================================================================
   VOICE SELECTION (Settings → Appearance)
================================================================ */
.voice-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.voice-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--t3);
  margin: 12px 0 4px;
}
.voice-group-label:first-child { margin-top: 0; }

.voice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--tr);
  text-align: left;
  width: 100%;
}
.voice-card:hover { border-color: rgba(var(--accent-rgb),0.4); background: var(--card2); }
.voice-card-active {
  border-color: rgba(var(--accent-rgb),0.6) !important;
  background: rgba(var(--accent-rgb),0.08) !important;
}
.voice-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  flex: 1;
}
.voice-gender-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}
.voice-gender-female {
  background: rgba(236,72,153,0.12);
  color: #EC4899;
  border: 1px solid rgba(236,72,153,0.25);
}
.voice-gender-male {
  background: rgba(59,130,246,0.12);
  color: var(--blue);
  border: 1px solid rgba(59,130,246,0.25);
}
.voice-check {
  font-size: 14px;
  color: var(--purple);
  font-weight: 800;
  margin-left: auto;
}

/* Extra-small phones (SE, 320px) */
@media (max-width: 360px) {
  .hero-title  { font-size: 24px; }
  .page-title  { font-size: 18px; }
  .workout-tab { padding: 7px 10px; font-size: 11px; }
  .prem-card   { padding: 14px 12px; }
}

/* ================================================================
   MOBILE VERSION — COMPREHENSIVE PHONE IMPROVEMENTS
================================================================ */

/* ── Camera layout: stacked optimisation for phones ── */
@media (max-width: 640px) {
  /* Camera feed: constrain height on portrait phones so controls stay in view */
  .camera-feed-wrap { aspect-ratio: 16/9; }

  /* Compact sidebar below video */
  .camera-sidebar {
    padding: 12px 14px;
    max-height: 44vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Rep bar tighter on narrow screens */
  .camera-rep-bar { padding: 12px 16px; gap: 10px; }
  .camera-rep-num { font-size: 44px; }
  .camera-rep-label { font-size: 12px; }

  /* Log panel stacks button below summary */
  .camera-log-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }
  .camera-log-btn { width: 100%; }

  /* Score badge more compact */
  .camera-overlay-badge { padding: 6px 10px; }
  .score-num { font-size: 20px; }

  /* XP celebration card fits small screens */
  .xp-cel-card { padding: 28px 24px; }
  .xp-cel-num  { font-size: 56px; }
}

/* ── Hamburger min touch target ── */
@media (max-width: 640px) {
  .hamburger { min-width: 44px; min-height: 44px; }
}

/* ── Fix sub-pixel font sizes that become unreadable on mobile ── */
@media (max-width: 768px) {
  .badge-premium-xs { font-size: 11px !important; }
  .store-badge-sub  { font-size: 11px !important; }
}

/* ── Camera modal: allow vertical scroll on phones ──
   The modal-box has overflow:hidden inline; !important overrides it
   so content below the fold is reachable via scroll.          */
@media (max-width: 640px) {
  #cameraModal .modal-box { overflow-y: auto !important; max-height: 92dvh; }
  #cameraModal { padding: 0; align-items: flex-end; }
}


/* ── Workout & calculator panel max-width on tablets ── */
@media (max-width: 1024px) {
  .form-panel { max-width: 100%; width: 100%; }
  .workout-layout,
  .calc-layout { padding: 24px 0 48px; }
}

/* ── Progress layout: body SVG shrinks gracefully ── */
@media (max-width: 720px) {
  .body-svg { max-width: 320px; }
}

/* ── Dashboard: ideas/quick-action grid 3-col on mid-phones ── */
@media (max-width: 500px) {
  .ideas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Ensure all primary action buttons have 44px touch target ── */
@media (max-width: 1024px) {
  .btn-primary, .btn-ghost, .btn-outline { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .opt-btn { min-height: 62px; height: 62px; }
}

/* ── Mobile menu: fill full width on very small screens ── */
@media (max-width: 320px) {
  .mobile-menu { width: 100%; border-left: none; }
}

/* ================================================================
   LANGUAGE SETTINGS
================================================================ */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.lang-btn:hover { border-color: var(--purple); background: rgba(var(--accent-rgb),0.06); }
.lang-btn-active { border-color: var(--purple) !important; background: rgba(var(--accent-rgb),0.10) !important; }
.lang-flag  { font-size: 28px; line-height: 1; }
.lang-native { font-size: 15px; font-weight: 600; color: var(--t1); }
.lang-english { font-size: 11px; color: var(--t3); }
.lang-check {
  position: absolute;
  top: 8px; right: 10px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
}

/* ── RTL overrides (Arabic) ── */
[dir="rtl"] .navbar { direction: rtl; }
[dir="rtl"] .nav-container { flex-direction: row-reverse; }
[dir="rtl"] .mobile-menu { left: 0; right: auto; border-left: none; border-right: 1px solid var(--border); }
[dir="rtl"] .back-btn::before { content: "→ "; }
[dir="rtl"] .back-btn { direction: rtl; }
[dir="rtl"] .settings-row { flex-direction: row-reverse; }
[dir="rtl"] .settings-row-label, [dir="rtl"] .settings-row-sub { text-align: right; }
[dir="rtl"] .ex-row { flex-direction: row-reverse; }
[dir="rtl"] .ex-prescription { text-align: left; }
[dir="rtl"] .sfield-row { flex-direction: row-reverse; }
[dir="rtl"] .sfield-label, [dir="rtl"] .sfield-value { text-align: right; }

/* ================================================================
   LANDING PAGE — ANIMATIONS & REVIEWS
================================================================ */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge { animation: heroFadeUp 0.65s cubic-bezier(.22,1,.36,1) both; animation-delay: 0.05s; }
.hero-title { animation: heroFadeUp 0.7s  cubic-bezier(.22,1,.36,1) both; animation-delay: 0.18s; }
.hero-sub   { animation: heroFadeUp 0.7s  cubic-bezier(.22,1,.36,1) both; animation-delay: 0.32s; }
.hero-cta   { animation: heroFadeUp 0.7s  cubic-bezier(.22,1,.36,1) both; animation-delay: 0.46s; }
.hero-stats { animation: heroFadeUp 0.7s  cubic-bezier(.22,1,.36,1) both; animation-delay: 0.60s; }

@keyframes glowFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-28px,-38px) scale(1.08); }
  70%     { transform: translate(18px,22px) scale(0.94); }
}
@keyframes glowFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  35%     { transform: translate(32px,-20px) scale(1.06); }
  65%     { transform: translate(-15px,30px) scale(0.96); }
}
.hero-glow.g1 { animation: glowFloat1 9s ease-in-out infinite; }
.hero-glow.g2 { animation: glowFloat2 11s ease-in-out infinite; }

/* Non-text reveals still fade and rise — an image or a card has nothing to
   type. Text gets .reveal-typed instead (see the observer in mainpg.html). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1),
              transform 0.65s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Typed text must not also slide: the words are already arriving one at a
   time, and moving the line they land on makes it unreadable. It starts
   invisible only to avoid a flash of the full string before the observer
   fires, then holds at full opacity while the characters do the work. */
.reveal-typed { transform: none; transition: opacity 0.2s linear; }
.reveal-typed.visible { transform: none; }

/* No caret. It was drawn as a right border on the element being typed, which
   meant it sat at the end of the LAST LINE OF THE BLOCK rather than after the
   most recently typed character — on a heading that wraps, that is a blue bar
   flashing in the middle of the layout with no relationship to where the text
   is actually appearing. The typing reads perfectly well without one. */

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-typed { opacity: 1; transform: none; transition: none; }
}
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }

@keyframes wordSwapIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wordSwapOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
#heroCycleWord { display: inline-block; }
#heroCycleWord.swapping-out { animation: wordSwapOut 0.25s ease forwards; }
#heroCycleWord.swapping-in  { animation: wordSwapIn  0.3s  cubic-bezier(.22,1,.36,1) forwards; }

.reviews-section { padding: 80px 0 60px; }
.reviews-stars-summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px 0 44px;
}
.stars-row { display: flex; gap: 3px; color: #fbbf24; font-size: 20px; }
.stars-score { font-size: 26px; font-weight: 900; color: var(--t1); }
.stars-count { font-size: 13px; color: var(--t3); }
.reviews-band-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
}
.reviews-band-wrap + .reviews-band-wrap { margin-top: 20px; }
.reviews-band {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  padding: 8px 0;
}
.reviews-band-wrap:hover .reviews-band { animation-play-state: paused; }
.band-scroll-right { animation: scrollRight 45s linear infinite; }
.band-scroll-left  { animation: scrollLeft  45s linear infinite; }
@keyframes scrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.reviews-band .review-card { width: 300px; flex-shrink: 0; }
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb),0.4);
  box-shadow: 0 16px 48px rgba(var(--accent-rgb),0.12);
}
.review-header {
  display: flex; align-items: center; gap: 12px;
}
.review-photo {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; border: 2px solid var(--border);
}
.review-meta { flex: 1; }
.review-name  { font-weight: 700; font-size: 14px; color: var(--t1); line-height: 1.2; }
.review-plan  { font-size: 11px; color: var(--t3); margin-top: 1px; }
.review-stars { color: #fbbf24; font-size: 12px; letter-spacing: 1px; margin-top: 3px; }
.review-verified-badge {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(var(--accent-rgb),0.15); color: var(--purple);
  font-size: 10px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-weight: 700; align-self: flex-start;
}
.review-text { font-size: 13.5px; color: var(--t2); line-height: 1.7; }
[dir="rtl"] .lang-check { left: 10px; right: auto; }

/* ---------- 3D BODY MAP ---------- */
#body3dWrap {
  width: 100%; max-width: 480px; height: 640px;
  cursor: grab; margin: 0 auto; position: relative;
}
#body3dWrap:active { cursor: grabbing; }
#body3dWrap canvas { display: block; }
.muscle-rank-item.mri-active { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
@media (max-width: 900px) { #body3dWrap { height: 500px; } }

/* ---------- LUXE CHECKOUT ---------- */
.pay-luxe {
  position: relative; min-height: var(--vh);
  padding: 108px 4vw 70px;
  background:
    radial-gradient(900px 500px at 12% 88%, rgba(34,211,238,0.07), transparent 60%),
    radial-gradient(700px 420px at 88% 12%, rgba(34,211,238,0.05), transparent 60%),
    #07080d;
}
.pay-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 0.72fr;
  gap: 28px; max-width: 1500px; margin: 0 auto; align-items: center;
}
@media (max-width: 1150px) { .pay-grid { grid-template-columns: 1fr; max-width: 620px; } }

/* — left hero — */
.pay-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #F5B301;
}
.pay-title {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: clamp(38px, 3.6vw, 58px); color: #F4F1E8; margin: 14px 0 12px;
}
.pay-sub { color: var(--t2); font-size: 15px; line-height: 1.65; max-width: 380px; }
.pay-feats { display: flex; margin: 26px 0 40px; }
.pay-feats div {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 22px; font-size: 12.5px; color: var(--t3);
  border-left: 1px solid rgba(255,255,255,0.09);
}
.pay-feats div:first-child { border-left: none; padding-left: 0; }
.pay-feats div b { color: var(--t1); font-size: 13px; margin-top: 6px; }
.pay-feats .kf-icon { color: #F5B301; }

/* — the floating membership card, resting at an angle on the rocks — */
.pay-hero { position: relative; z-index: 1; padding-top: 20px; }
.pay-card-bob { animation: payBob 4.6s ease-in-out infinite; width: min(500px, 100%); margin: 0 auto; }
@keyframes payBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.pay-card {
  position: relative; aspect-ratio: 1.586; border-radius: 22px; overflow: hidden;
  background: linear-gradient(132deg, #191a21 0%, #0b0c11 52%, #071a1e 100%);
  border: 1px solid rgba(34,211,238,0.4);
  box-shadow: 0 34px 80px rgba(0,0,0,0.7), 0 0 46px rgba(34,211,238,0.14);
  transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.4, 1);
  /* propped on its corner like the reference: leaning back and away */
  transform: perspective(1300px) rotateX(16deg) rotateY(-14deg) rotate(-17deg);
}
.pay-card.big { transform: perspective(1300px) rotateX(8deg) rotateY(-7deg) rotate(-8deg) scale(1.2); }

/* — backdrop scenery — */
.pay-rocks {
  position: absolute; left: 0; bottom: 0; width: min(62vw, 1000px); height: auto;
  pointer-events: none; z-index: 0;
}
.pay-circuits {
  position: absolute; right: 0; top: 8%; height: 78%; width: auto;
  pointer-events: none; z-index: 0;
}
.pc-sheen {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 8%, rgba(255,255,255,0.09), transparent 55%);
}
.pc-chip {
  position: absolute; top: 22%; left: 8%; width: 46px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, #8FE9F8, #1993AC 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.pc-chip::after {
  content: ""; position: absolute; inset: 6px 5px;
  border: 1px solid rgba(0,0,0,0.35); border-radius: 4px;
}
.pc-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%);
  height: 26%; opacity: 0.95; filter: drop-shadow(0 0 14px rgba(34,211,238,0.4));
}
.pc-digits {
  position: absolute; left: 8%; bottom: 22%;
  font-family: var(--font-data); font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 4px; color: #BDEFF9; text-shadow: 0 0 12px rgba(34,211,238,0.4);
}
.pay-card.big .pc-digits { animation: pcPulse 1.1s ease-in-out infinite; }
@keyframes pcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.pc-row {
  position: absolute; left: 8%; right: 8%; bottom: 9%;
  display: flex; justify-content: space-between;
  font-size: 9.5px; letter-spacing: 1.6px; color: rgba(189,239,249,0.55);
}

/* — middle panel — */
.pay-panel {
  position: relative; z-index: 1;
  background: rgba(20,22,30,0.72); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pp-title { font-size: 20px; }
.pp-sub { color: var(--t3); font-size: 13px; margin: 6px 0 18px; }
.pp-assure {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(var(--accent-rgb),0.07); border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 20px;
  font-size: 13px; color: var(--t2); line-height: 1.5;
}
.pp-assure svg { color: var(--accent); margin-top: 1px; flex: none; }
.pp-assure b { color: var(--t1); }
.pp-methods { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 16px; }
.pm-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--t2);
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: rgba(255,255,255,0.03);
}

/* — right: paper receipt — */
.pay-receipt-wrap { position: relative; z-index: 1; }
.pay-meteors { position: absolute; inset: -40px -30px; pointer-events: none; overflow: hidden; }
.pay-meteors span {
  position: absolute; top: -100px; width: 2px; height: 96px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(154,236,248,0.95), transparent);
  opacity: 0; animation: payMeteor 3.4s linear infinite;
}
.pay-meteors span:nth-child(1) { left: 8%;  animation-delay: 0s;    }
.pay-meteors span:nth-child(2) { left: 26%; animation-delay: 1.1s;  height: 70px; }
.pay-meteors span:nth-child(3) { left: 44%; animation-delay: 2.2s;  }
.pay-meteors span:nth-child(4) { left: 60%; animation-delay: 0.6s;  height: 120px; }
.pay-meteors span:nth-child(5) { left: 74%; animation-delay: 1.7s;  }
.pay-meteors span:nth-child(6) { left: 88%; animation-delay: 2.8s;  height: 80px; }
.pay-meteors span:nth-child(7) { left: 97%; animation-delay: 0.3s;  height: 60px; }
@keyframes payMeteor {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
  6%   { opacity: 0.9; }
  70%  { opacity: 0.25; }
  100% { opacity: 0; transform: translate(-440px, 630px) rotate(-35deg); }
}
.pay-receipt {
  /* dark mode: an ink-dark receipt; light mode flips to cream paper below */
  --rc-bg: #171921; --rc-ink: #E9EBF2; --rc-mut: #A6ADBD; --rc-dim: #7A8090;
  --rc-dash: #3A4150; --rc-acc: #22D3EE;
  position: relative; z-index: 1;
  background: var(--rc-bg); color: var(--rc-ink);
  font-family: "Courier New", Courier, monospace;
  padding: 20px 18px 24px; margin: 12px 6px;
  font-size: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
html[data-mode="light"] .pay-receipt {
  --rc-bg: #F6F1E4; --rc-ink: #17181c; --rc-mut: #444032; --rc-dim: #55503f;
  --rc-dash: #b9b2a0; --rc-acc: #0E7490;
}
.pay-receipt::before, .pay-receipt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background-image:
    linear-gradient(45deg, var(--rc-bg) 25%, transparent 25%),
    linear-gradient(-45deg, var(--rc-bg) 25%, transparent 25%);
  background-size: 16px 16px;
}
.pay-receipt::before { top: -11px; transform: rotate(180deg); }
.pay-receipt::after  { bottom: -11px; }
.rc-head { text-align: center; font-weight: 700; font-size: 17px; letter-spacing: 4px; }
.rc-head span { display: block; font-size: 10px; letter-spacing: 3px; margin-top: 4px; color: var(--rc-dim); }
.rc-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--rc-dim); margin-top: 9px; }
.rc-dash { border-top: 2px dashed var(--rc-dash); margin: 11px 0; }
.rc-plan-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pay-receipt .order-plan-name { font-weight: 700; font-size: 13.5px; }
.pay-receipt .order-plan-price { font-size: 12px; color: var(--rc-mut); margin-top: 3px; }
.pay-receipt .order-change-plan { color: var(--rc-acc); font-size: 11px; text-decoration: underline; }
.pay-receipt .order-includes { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; }
.pay-receipt .order-includes li { display: flex; align-items: center; gap: 8px; }
.pay-receipt .order-includes .kf-icon, .pay-receipt .order-includes svg { color: var(--rc-acc); flex: none; }
.pay-receipt .order-timeline { background: transparent; border: none; padding: 0; margin: 0; box-shadow: none; }
.pay-receipt .otl-row { display: flex; gap: 9px; font-size: 11px; margin-bottom: 9px; background: transparent; border: none; padding: 0; }
.pay-receipt .otl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rc-ink); border: none; margin-top: 3px; }
.pay-receipt .otl-dot.future { background: transparent; border: 2px solid var(--rc-ink); }
.pay-receipt .otl-when { font-weight: 700; color: var(--rc-ink); }
.pay-receipt .otl-what { color: var(--rc-mut); margin-top: 2px; line-height: 1.5; }
.rc-total { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; letter-spacing: 1px; }
.rc-total b { font-size: 19px; }
.rc-thanks { text-align: center; font-size: 10px; letter-spacing: 2.5px; color: var(--rc-dim); }

/* ---------- BIG SCREENS: scale the whole app, not just this page ----------
   The design was tuned around ~1400px. On wide monitors everything reads
   tiny, so the entire UI (text, cards, nav, 3D stages) zooms up together,
   and the body map gets a genuinely larger canvas on top of that. */
/* zoom on <body> scales the CONTENT but not the viewport it is measured
   against, so every page became exactly 15% (or 30%) taller than the screen
   and needed a small scroll no matter how little was on it — the constant
   ~126px overflow that showed up identically on account, friends, signin and
   the rest. Zooming the root instead scales the viewport with the content, so
   100vh stays a real screen height and short pages fit again. */
/* `zoom` scales rendered content but 100vh keeps resolving to the UNZOOMED
   viewport, so a full-height view came out exactly 15% (or 30%) taller than the
   screen. That was the constant ~126px of overflow that appeared identically on
   account, friends, signin and the rest — a page whose content easily fitted
   still demanded a small scroll to reach its last control.
   Dividing the vh-based heights by the same factor makes them a real screen
   height again. */
/* Chat sizes its own column off 100vh instead of inheriting .view's height, so
   it was never covered by the correction above and stayed 15% too tall — 162px
   of overflow measured at 1920x1080, on the one view whose whole point is that
   the composer stays on screen without scrolling. */
@media (min-width: 1600px) {
  :root { zoom: 1.15; --vh: calc(100vh / 1.15); }
  /* the has-dock variants live at the end of sculpted.css — that file loads
     after this one, so its equal-specificity rules would win here */
  #body3dWrap { max-width: 600px; height: 780px; }
}
@media (min-width: 2000px) {
  :root { zoom: 1.3; --vh: calc(100vh / 1.3); }
  #body3dWrap { max-width: 680px; height: 880px; }
}

/* ---------- CUSTOM DROPDOWNS (kf-select) ---------- */
.kf-select { position: relative; width: 100%; }
.kf-select > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.kfs-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl);
  padding: 12px 14px; font-size: 14px; color: var(--t1); font-family: var(--font-body);
  cursor: pointer; transition: var(--tr); text-align: left;
}
.kfs-btn:hover { border-color: #2A2F3E; }
.kf-select.kfs-open .kfs-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }
.kfs-chev { flex-shrink: 0; color: var(--t3); transition: transform 0.3s cubic-bezier(0.3,1.4,0.45,1); }
.kf-select.kfs-open .kfs-chev { transform: rotate(180deg); color: var(--accent); }
.kfs-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 300;
  background: rgba(18, 21, 30, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 5px; max-height: 260px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scaleY(0.92); transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.3,1.4,0.45,1);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.kfs-panel.kfs-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.kf-select.kfs-open .kfs-panel { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; }
.kfs-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 6px; font-size: 13.5px; color: var(--t2);
  cursor: pointer; opacity: 0;
  animation: kfsIn 0.28s cubic-bezier(0.3,1.2,0.5,1) forwards;
}
@keyframes kfsIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.kfs-opt:hover { background: rgba(var(--accent-rgb),0.08); color: var(--t1); }
.kfs-opt.kfs-sel { color: var(--accent); background: rgba(var(--accent-rgb),0.06); }

/* ---------- PAYWALL UX ---------- */
.plan-for { font-size: 12px; color: var(--accent); font-weight: 600; margin: 2px 0 10px; letter-spacing: 0.2px; }
.pricing-premium .plan-for { color: var(--award); }
.price-currency-note {
  font-size: 11px; letter-spacing: 0.6px; color: var(--t3);
  text-transform: uppercase; align-self: center;
}
.price-context { font-size: 12px; color: var(--t3); margin: -4px 0 12px; line-height: 1.5; }
/* Monthly leaves this empty — annual is the only period with something to say
   here. Without this the element still claims its line-height and 12px margin,
   leaving a gap under the price that reads as a missing element. */
.price-context:empty { display: none; }
.plan-trust-note { font-size: 12px; color: var(--green); text-align: center; margin: -14px 0 18px; display: flex; align-items: center; justify-content: center; gap: 5px; }

.checkout-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.cstep { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--t3); white-space: nowrap; }
.cstep-dot {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--t3);
}
.cstep.done { color: var(--green); }
.cstep.done .cstep-dot { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); color: var(--green); }
.cstep.current { color: var(--t1); }
.cstep.current .cstep-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cstep-line { flex: 1; min-width: 14px; height: 1px; background: var(--border); }
.cstep-line.done { background: rgba(16,185,129,0.45); }

.order-change-plan { font-size: 12px; color: var(--accent); font-weight: 600; flex-shrink: 0; padding-top: 3px; }
.order-change-plan:hover { text-decoration: underline; }
.order-includes { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 5px; }
.order-includes li { font-size: 12.5px; color: var(--t2); display: flex; align-items: center; gap: 7px; }
.order-includes li .kf-icon { color: var(--green); }

.order-timeline { margin: 16px 0 4px; border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; }
.otl-row { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 14px; }
.otl-row:last-child { padding-bottom: 0; }
.otl-row::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: 2px; width: 1px; background: var(--border);
}
.otl-row:last-child::before { display: none; }
.otl-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; background: var(--accent); }
.otl-dot.future { background: var(--surface); border: 1px solid var(--t3); }
.otl-when { font-family: var(--font-data); font-size: 12px; font-weight: 700; color: var(--t1); }
.otl-what { font-size: 12.5px; color: var(--t2); margin-top: 1px; line-height: 1.5; }

/* ---------- USER THEMES (accent schemes + light/dark) ---------- */
html[data-accent="volt"]   { --accent:#C6FF3D; --accent-ink:#0A0C12; --accent-rgb:198,255,61;  --purple:#C6FF3D; --cyan:#C6FF3D; --purple-d:#9FD41F; }
html[data-accent="orange"] { --accent:#FF6B4A; --accent-ink:#0A0C12; --accent-rgb:255,107,74;  --purple:#FF6B4A; --cyan:#FF6B4A; --purple-d:#E14B2A; }
html[data-accent="red"]    { --accent:#E8354F; --accent-ink:#FFFFFF; --accent-rgb:232,53,79;   --purple:#E8354F; --cyan:#E8354F; --purple-d:#C21D36; }
html[data-accent="amber"]  { --accent:#F5B301; --accent-ink:#0A0C12; --accent-rgb:245,179,1;   --purple:#F5B301; --cyan:#F5B301; --purple-d:#D19900; }
html[data-accent="royal"]  { --accent:#3B82F6; --accent-ink:#FFFFFF; --accent-rgb:59,130,246;  --purple:#3B82F6; --cyan:#3B82F6; --purple-d:#1D4ED8; }
html[data-accent="violet"] { --accent:#A855F7; --accent-ink:#FFFFFF; --accent-rgb:168,85,247; --purple:#A855F7; --cyan:#A855F7; --purple-d:#7E22CE; }
html[data-accent="mono"]   { --accent:#F4F6F8; --accent-ink:#0A0C12; --accent-rgb:244,246,248; --purple:#F4F6F8; --cyan:#F4F6F8; --purple-d:#C9CDD3; }

/* ACCENT AS TEXT.

   The accents are tuned to glow on a near-black background, which is exactly
   what makes them fail as small text on a white one: cyan on white measures
   1.66:1, well under the 4.5:1 small text needs, and "See all →" and "Open
   full workout builder" were effectively invisible in light mode. --purple-d
   is not dark enough either (about 3:1).

   So: one token for accent-coloured TEXT, identical to --accent in dark mode
   and swapped for a darkened version in light. Only text uses it — fills,
   borders and glows keep the real accent, so the palette still reads as the
   colour the person chose. */
:root { --accent-text: var(--accent); }
html[data-mode="light"] {
  --accent-text: #0E7490;   /* cyan  */
}
html[data-mode="light"][data-accent="volt"]   { --accent-text: #4D7C0F; }
html[data-mode="light"][data-accent="orange"] { --accent-text: #B93815; }
html[data-mode="light"][data-accent="red"]    { --accent-text: #B91C3C; }
html[data-mode="light"][data-accent="amber"]  { --accent-text: #92600A; }
html[data-mode="light"][data-accent="royal"]  { --accent-text: #1D4ED8; }
html[data-mode="light"][data-accent="violet"] { --accent-text: #7E22CE; }
html[data-mode="light"][data-accent="mono"]   { --accent-text: #16181D; }

html[data-mode="light"] {
  --bg:      #F4F5F7;
  --surface: #FFFFFF;
  --border:  #E4E7EC;
  --text:      #16181D;
  --text-dim:  #667085;
  --bg2:   #FFFFFF;
  --card:  #FFFFFF;
  --card2: #F0F1F4;
  --bdr:   #E4E7EC;
  --t1: #16181D;
  /* Light mode had the same problem in the other direction, and one token was
     still failing outright: --t3 measured 4.27:1 on the page background and
     4.12:1 on card2, under the 4.5:1 AA floor, despite the note that replaced it
     claiming otherwise. Grey-on-white at that level reads as disabled text.

     Darkened to clear 7:1 on all three light surfaces, same hue.

       --t2  #566072 -> #3B4353   card 6.34 -> 9.94
       --t3  #6D7581 -> #4E5666   card 4.65 -> 7.38 */
  --t2: #3B4353;
  --t3: #4E5666;
  --text-dim: #3B4353;
}
html[data-mode="light"] .navbar {
  background: rgba(255, 255, 255, 0.62);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
html[data-mode="light"] .navbar.scrolled { background: rgba(255, 255, 255, 0.85); }
html[data-mode="light"] .kfs-panel { background: rgba(255, 255, 255, 0.94); box-shadow: 0 14px 40px rgba(16,24,40,0.14); }
html[data-mode="light"] .body-bg { fill: #D6DAE3; }
html[data-mode="light"] ::-webkit-scrollbar-thumb { background: #C6CBD4; border-color: #F4F5F7; }
html[data-mode="light"] .btn-ghost:hover { background: rgba(0,0,0,0.04); }
html[data-mode="light"] .mobile-menu { background: rgba(255,255,255,0.9); }
html[data-accent="mono"][data-mode="light"] { --accent:#16181D; --accent-ink:#FFFFFF; --accent-rgb:22,24,29; --purple:#16181D; --cyan:#16181D; }

/* ---------- ONBOARDING ---------- */
#onboardBar {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: 58px;
}

/* labels live in a box the SAME width as the track so each sits dead
   under its dot (they used to be 680px vs the track's 620px and drifted) */
#onboardBarSteps {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(620px, 82vw);
  height: 46px;
}
#onboardBarSteps span {
  position: absolute; bottom: 6px; transform: translateX(-50%);
}
#onboardBarSteps span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--t3); transition: color 0.3s;
}
#onboardBarSteps span.done    { color: var(--green); }
#onboardBarSteps span.current { color: var(--accent); }
body.onboarding { --nav-offset: 34px; }
/* !important to match the blanket .page-header rule above, which is itself
   !important and therefore beat this one on the cascade regardless of the
   extra class. During onboarding a 58px bar is fixed under the navbar, so the
   title needs to clear BOTH — with only 24px it slid underneath and "Choose
   your plan" was sliced in half by the step tracker. */
body.onboarding .page-header { padding-top: 74px !important; }

.theme-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-tile {
  border: 2px solid var(--border); border-radius: var(--r-card);
  overflow: hidden; cursor: pointer; background: none; padding: 0; text-align: left;
  transition: transform 0.25s cubic-bezier(0.3,1.4,0.45,1), border-color 0.2s;
}
.theme-tile:hover { transform: translateY(-3px); }
.theme-tile.sel { border-color: var(--accent); }
.ttile-preview { height: 84px; padding: 12px; display: flex; flex-direction: column; gap: 7px; justify-content: center; align-items: center; }
.ttile-num { font-family: var(--font-data); font-weight: 700; font-size: 17px; }
.ttile-btn { width: 64px; height: 15px; border-radius: 4px; }
.ttile-name {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--t2); padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--border);
  text-align: center;
}
.theme-tile.sel .ttile-name { color: var(--accent-text); }
.mode-tiles { display: grid; grid-template-columns: repeat(2, minmax(150px, 220px)); gap: 12px; }

/* Pricing cards keep the MyPedra identity colors in every theme */
.pricing-featured { border-color: rgba(34,211,238,0.45) !important; }
.pricing-featured .pricing-badge { background: #22D3EE !important; color: #0A0C12 !important; }
.pricing-featured .plan-for { color: #22D3EE !important; }
.pricing-featured .btn-primary { background: #22D3EE !important; color: #0A0C12 !important; }
.pricing-premium .plan-for { color: #F5B301 !important; }

/* ---------- PLACEMENT TEST ---------- */
.pt-rules { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px; }
.pt-rules div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--t2); }
.pt-rules .kf-icon { color: var(--accent); }
.pt-progress { display: flex; gap: 5px; margin-bottom: 18px; }
.pt-progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.pt-progress i.done { background: var(--accent); }
.pt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px; }
.pt-ex-name { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 30px; }
.pt-ex-target { font-family: var(--font-data); font-size: 13px; color: var(--accent); margin: 4px 0 10px; }
.pt-ex-desc { font-size: 13.5px; color: var(--t2); line-height: 1.6; }
.pt-rest-ring {
  width: 150px; height: 150px; border-radius: 50%; margin: 30px auto 0;
  border: 3px solid var(--border); display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pt-rest-ring span { font-family: var(--font-data); font-size: 44px; font-weight: 700; color: var(--accent); }
.pt-spinner {
  width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--accent);
  animation: ptSpin 0.8s linear infinite;
}
@keyframes ptSpin { to { transform: rotate(360deg); } }
#ptCoinWrap { width: 100%; height: 330px; }

/* rank reveal glow backdrop */
#ptCoinWrap { position: relative; }
#ptCoinGlow {
  position: absolute; inset: 0; margin: auto; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.08) 45%, transparent 70%);
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
#ptCoinGlow.on { opacity: 1; }
#ptCoinWrap canvas { position: relative; z-index: 1; }

/* ---------- ONBOARD NODE BAR ---------- */
#onboardTrack {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(620px, 82vw); height: 7px;
  background: var(--border); border-radius: 100px;
}
#onboardTrackFill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent); border-radius: 100px;
  transition: width 0.7s cubic-bezier(0.3, 1, 0.4, 1);
}
.ob-nodes { position: absolute; inset: 0; }
.ob-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  transition: background 0.3s, border-color 0.3s;
}
.ob-node[data-obnode="theme"]   { left: 10%; }
.ob-node[data-obnode="signup"]  { left: 30%; }
.ob-node[data-obnode="test"]    { left: 50%; }
.ob-node[data-obnode="pricing"] { left: 70%; }
.ob-node[data-obnode="payment"] { left: 90%; }
.ob-node.done, .ob-node.current {
  background: var(--accent); border-color: var(--accent);
}
.ob-node.done::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 5px; border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg) translate(1px, -1px);
}
#onboardBarSteps span[data-obstep="theme"]    { left: 10%; }
#onboardBarSteps span[data-obstep="signup"]   { left: 30%; }
#onboardBarSteps span[data-obstep="test"]     { left: 50%; }
#onboardBarSteps span[data-obstep="pricing"]  { left: 70%; }
#onboardBarSteps span[data-obstep="payment"]  { left: 90%; }

/* % chip glides with the current checkpoint */
#onboardPct {
  position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  left: 10%; transition: left 0.7s cubic-bezier(0.3, 1, 0.4, 1);
  box-shadow: 0 0 0 3px var(--surface);
  font-family: var(--font-data); font-size: 10.5px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
  padding: 2px 7px; border-radius: 100px; white-space: nowrap;
}

/* payment flow hides the navbar — the onboard bar takes the very top */
body.nav-hidden #onboardBar { top: 0; }
body.nav-hidden.onboarding .page-header { padding-top: 92px !important; }

/* no Sign In / Get Started buttons while already signing in or up */
body.authing #navAccount { display: none !important; }

/* mono tile: the overlay clipped to the light half renders in black —
   no more white-with-a-dark-halo sitting on the white background */
.ttile-num-mono { text-shadow: none !important; }
.ttile-flip {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 0 0 50%); text-shadow: none !important;
}
.ttile-flip span { text-shadow: none !important; }
.ttile-btn-flip {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: #16181D; clip-path: inset(0 0 0 50%);
}

/* ---------- XP DEV ROW ---------- */

/* ---------- WELCOME ---------- */
.wl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 36px; }
.wl-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 24px 20px; text-align: center;
}
.wl-card .kf-icon { color: var(--accent); }
.wl-card h3 { font-size: 17px; margin: 12px 0 8px; }
.wl-card p { font-size: 13px; color: var(--t2); line-height: 1.6; }
.wl-pop { opacity: 0; transform: translateY(22px) scale(0.94); }
.view.active .wl-pop { animation: wlPop 0.55s cubic-bezier(0.3, 1.4, 0.45, 1) forwards; }
.view.active .wl-d1 { animation-delay: 0.05s; }
.view.active .wl-d2 { animation-delay: 0.18s; }
.view.active .wl-d3 { animation-delay: 0.32s; }
.view.active .wl-d4 { animation-delay: 0.48s; }
.view.active .wl-d5 { animation-delay: 0.62s; }
.view.active .wl-d6 { animation-delay: 0.76s; }
.view.active .wl-d7 { animation-delay: 0.95s; }
@keyframes wlPop { to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════
   THE ASCENT — pinned scroll hero + restyled home sections
   ══════════════════════════════════════════════════════════════ */
.ascent {
  position: relative; height: 340vh;
  /* pure black to match the clip's crushed-black backdrop exactly, so the video
     frame merges with no rectangle. The figure + cyan accents carry the scene. */
  background: #000;
}
.ascent-stage {
  position: sticky; top: 0; height: var(--vh); overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  padding: 0 max(6vw, 40px);
}
/* aurora + grain removed: the hero is pure black to match the video's backdrop,
   so the opaque clip frame has no tinted layer behind it to stand out against */
.ascent-bg { display: none; }
#auroraCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.ascent-grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ascent-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* pure-black bottom fade only — the cyan glow was tinting the section around
     the opaque video and making the frame read as a rectangle */
  background: linear-gradient(180deg, transparent 62%, #000 100%);
}

/* tier rail */
.tier-rail {
  position: absolute; left: max(2.4vw, 18px); top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; gap: 12px; height: 62vh;
}
.rail-line { position: relative; width: 2px; background: rgba(255,255,255,0.09); border-radius: 2px; }
.rail-fill {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, #F5B301, #22D3EE);
  box-shadow: 0 0 12px rgba(34,211,238,0.6); border-radius: 2px;
}
.rail-ticks { display: flex; flex-direction: column; justify-content: space-between; }
.rail-tick {
  font: 700 10px var(--font-data, monospace); letter-spacing: 1.5px;
  color: rgba(255,255,255,0.28); transition: color 0.3s, text-shadow 0.3s;
}
.rail-tick.lit { color: var(--t1); text-shadow: 0 0 10px rgba(34,211,238,0.7); }

/* copy column */
.ascent-copy { position: relative; z-index: 2; max-width: 560px; }
.ascent-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 12px var(--font-body); letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 26px;
}
.ae-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.ascent-head {
  position: relative; font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; line-height: 0.98;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--t1);
  min-height: 3.9em; margin-bottom: 26px;
}
.ascent-head .ah-line {
  position: absolute; inset: 0; opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1);
}
.ascent-head .ah-line.on { opacity: 1; transform: none; }
.ascent-sub {
  font-size: clamp(15px, 1.5vw, 18px); color: var(--t2); line-height: 1.7; max-width: 480px;
  margin-bottom: 34px; opacity: 0; transform: translateY(14px);
  animation: ascentFadeIn 0.8s 0.5s cubic-bezier(.22,1,.36,1) forwards;
}
.ascent-cta { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; transform: translateY(14px);
  animation: ascentFadeIn 0.8s 0.66s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes ascentFadeIn { to { opacity: 1; transform: none; } }

/* glass buttons with cursor-follow sheen */
.glass-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 13px; cursor: pointer;
  font: 700 15px var(--font-body); color: var(--t1);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform 0.25s cubic-bezier(.3,1.4,.5,1), border-color 0.25s, box-shadow 0.25s;
}
.glass-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(34,211,238,0.35), transparent 60%);
}
.glass-btn:hover { transform: translateY(-2px); border-color: rgba(34,211,238,0.5); box-shadow: 0 12px 34px rgba(0,0,0,0.4); }
.glass-btn:hover::before { opacity: 1; }
.glass-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.glass-btn-primary {
  color: var(--accent-ink, #05161a);
  background: linear-gradient(135deg, #22D3EE, #16b8d4);
  border-color: transparent; box-shadow: 0 10px 30px rgba(34,211,238,0.28);
}
.glass-btn-primary::before { background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.5), transparent 55%); }

/* hero video column (scroll-scrubbed body) */
.ascent-canvas-wrap {
  position: relative; z-index: 1; height: var(--vh);
  padding-top: var(--nav-h); box-sizing: border-box;   /* keep the head clear of the navbar */
  background: #000;   /* matches .ascent + the clip's black backdrop → no seam */
}
/* the rank ladder + travelling spotlight, painted to canvas by landing.js */
.rank-spotlight { width: 100%; height: 100%; display: block; pointer-events: none; }

/* scroll hint */
.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font: 600 11px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--t3);
}
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(180deg, var(--accent), transparent); animation: hintPulse 1.8s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ascent steps timeline */
.ascent-steps { list-style: none; max-width: 780px; margin: 46px auto 0; padding: 0; }
.astep { display: grid; grid-template-columns: 76px 1fr; gap: 22px; }
.astep-rail { position: relative; display: flex; justify-content: center; }
.astep-rail::before {
  content: ""; position: absolute; top: 46px; bottom: -34px; width: 2px;
  background: linear-gradient(180deg, rgba(34,211,238,0.5), rgba(34,211,238,0.05));
}
.astep:last-child .astep-rail::before { display: none; }
.astep-node {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font: 800 18px var(--font-data); color: var(--accent);
  background: rgba(34,211,238,0.08); border: 1.5px solid rgba(34,211,238,0.4);
  box-shadow: 0 0 24px rgba(34,211,238,0.15); flex: none;
}
.astep-body { padding-bottom: 40px; }
.astep-body h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(19px, 2.4vw, 25px); letter-spacing: 0.5px; margin-bottom: 8px; color: var(--t1); }
.astep-body p { color: var(--t2); line-height: 1.65; max-width: 520px; }

/* feature card refresh: drop the boxed-icon chip for an editorial rule */
.features-grid .feat-icon {
  width: auto; height: auto; background: none !important; border: none !important;
  border-radius: 0; margin-bottom: 14px; color: var(--accent);
  justify-content: flex-start;   /* icon sits left, aligned with the title */
}
.features-grid .feat-card {
  border-top: 2px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.features-grid .feat-card:hover { border-top-color: var(--accent); transform: translateY(-3px); }

/* responsive */
@media (max-width: 900px) {
  .ascent { height: auto; }
  .ascent-stage { position: relative; grid-template-columns: 1fr; height: auto; min-height: var(--vh); padding: calc(var(--nav-h) + 40px) 24px 60px; }
  .ascent-canvas-wrap { height: 46vh; order: 2; margin-top: 20px; }
  .ascent-copy { order: 1; }
  .tier-rail, .scroll-hint { display: none; }
  .ascent-head { min-height: 0; }
  .ascent-head .ah-line { position: relative; opacity: 1; transform: none; }
  .ascent-head .ah-line:not(:first-child) { display: none; }
  .ascent-sub, .ascent-cta { opacity: 1; transform: none; }
  .astep { grid-template-columns: 56px 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ascent { height: auto; }
  .ascent-stage { position: relative; height: auto; min-height: 90vh; }
  .ascent-head .ah-line { position: relative; opacity: 1; transform: none; }
  .ascent-head .ah-line:not(:first-child) { display: none; }
  .ascent-sub, .ascent-cta { opacity: 1; transform: none; }
  .scroll-hint i { animation: none; }
}

/* ── closing CTA restyled to the ascent language ── */
.cta-section { padding: 96px 0 100px; }
.cta-card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(34,211,238,0.09), transparent 60%),
    var(--surface);
  border: 1px solid rgba(34,211,238,0.28);
  border-radius: var(--r-xl); padding: 66px 48px; text-align: center;
}
.cta-card::before {   /* thin ascent line climbing up the left edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #F5B301, #22D3EE);
}
.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 12px var(--font-body); letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.cta-card h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: 0.5px;
  line-height: 1; margin-bottom: 16px; color: var(--t1);
}
.cta-card p { font-size: 16px; color: var(--t2); line-height: 1.65; margin: 0 auto 30px; max-width: 520px; }
.cta-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* section labels pick up the cyan+pip eyebrow used in the hero */
.sec-label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); letter-spacing: 3px;
}
.sec-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 9px var(--amber);
}

/* honest facts band (replaces fabricated testimonials) */
.honest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .honest-grid { grid-template-columns: 1fr; } }
.honest-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 2px solid rgba(255,255,255,0.08); border-radius: 14px;
  padding: 28px 26px; transition: border-color 0.3s, transform 0.3s;
}
.honest-card:hover { border-top-color: var(--accent); transform: translateY(-3px); }
.honest-card .kf-icon { color: var(--accent); display: block; margin-bottom: 14px; }
.honest-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; letter-spacing: 0.5px; margin-bottom: 8px; color: var(--t1); }
.honest-card p { color: var(--t2); line-height: 1.65; font-size: 14.5px; }

/* store badges before launch: non-clickable "coming soon" state */
.store-badge-soon { cursor: default; opacity: 0.7; }
.store-badge-soon:hover { transform: none; }

/* ══ THE ARSENAL — tier-ledger features (replaces the icon-card grid) ══ */
.arsenal { padding: 100px 0 80px; }
.arsenal-grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 60px; align-items: start;
}
@media (max-width: 940px) { .arsenal-grid { grid-template-columns: 1fr; gap: 34px; } }

.arsenal-intro { position: sticky; top: calc(var(--nav-h) + 40px); }
.arsenal-intro .sec-title { text-align: left; margin: 14px 0 16px; }
.arsenal-intro > p { color: var(--t2); line-height: 1.7; max-width: 380px; margin-bottom: 26px; }
@media (max-width: 940px) { .arsenal-intro { position: static; } .arsenal-intro .sec-title { font-size: clamp(26px,7vw,36px); } }

/* tier bands */
.tier-band { margin-bottom: 34px; }
.tier-band:last-child { margin-bottom: 0; }
.tier-band-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
  font: 600 13px var(--font-body); color: var(--t3); letter-spacing: 0.3px;
}
.tier-tag {
  font-family: var(--font-display); text-transform: uppercase; font-size: 13px;
  letter-spacing: 1px; padding: 3px 11px; border-radius: 6px; color: #05070a;
}
.tier-free    { background: linear-gradient(135deg,#9aa4b2,#6b7686); }
.tier-pro     { background: linear-gradient(135deg,#22D3EE,#16b8d4); }
.tier-premium { background: linear-gradient(135deg,#F5B301,#d99500); }

/* feature rows — hairline-separated, dense, scannable */
.arsenal-row {
  width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px;
  padding: 18px 6px; text-align: left; background: none; border: none;
  border-top: 1px solid rgba(255,255,255,0.08); cursor: pointer;
  transition: background 0.2s, padding-left 0.2s;
}
.arsenal-row.static { cursor: default; }
.arsenal-row:not(.static):hover { background: rgba(34,211,238,0.05); padding-left: 14px; }
.ar-icon {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  color: var(--accent); border: 1px solid rgba(34,211,238,0.28); border-radius: 12px;
  background: rgba(34,211,238,0.06);
}
.ar-icon.amber { color: var(--amber); border-color: rgba(245,179,1,0.3); background: rgba(245,179,1,0.06); }
.ar-body { display: flex; flex-direction: column; gap: 3px; }
.ar-body b { font-family: var(--font-display); text-transform: uppercase; font-size: 17px; letter-spacing: 0.4px; color: var(--t1); font-weight: 800; }
.ar-body em { font-style: normal; color: var(--t2); font-size: 13.5px; line-height: 1.5; }
.ar-go { color: var(--t3); font-size: 20px; transition: color 0.2s, transform 0.2s; }
.arsenal-row:not(.static):hover .ar-go { color: var(--accent); transform: translateX(3px); }

/* coming-soon app strip — one calm full-width band */
.app-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin-top: 30px; padding: 26px 30px; border-radius: 16px;
  border: 1px solid var(--border);
  background: radial-gradient(120% 160% at 100% 0%, rgba(34,211,238,0.06), transparent 60%), var(--surface);
}
.app-strip-copy { display: flex; flex-direction: column; gap: 5px; max-width: 560px; }
.app-strip-eyebrow { font: 600 11px var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); }
.app-strip-copy b { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; letter-spacing: 0.5px; color: var(--t1); }
.app-strip-copy span:last-child { color: var(--t2); font-size: 14px; line-height: 1.6; }
.app-strip-badges { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══ IN MOTION — dedicated animated-athlete band ══ */
.motion-band { padding: 84px 0; }
.motion-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 820px) { .motion-figures { grid-template-columns: 1fr; max-width: 400px; margin: 40px auto 0; } }
.motion-fig {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(34,211,238,0.06), transparent 60%), var(--surface);
  transition: border-color 0.3s, transform 0.3s;
}
.motion-fig:hover { border-color: rgba(34,211,238,0.4); transform: translateY(-3px); }
.mf-canvas { display: block; width: 100%; height: 360px; }
.mf-meta { padding: 16px 20px; border-top: 1px solid var(--border); }
.mf-meta b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 18px; letter-spacing: 0.5px; color: var(--t1); }
.mf-meta span { font-size: 12.5px; color: var(--t3); letter-spacing: 0.3px; }

/* ── arsenal accordion: tiers expand as you scroll to them ── */
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  .arsenal-ledger { min-height: 520px; }   /* reserve space so open/close never jumps the page */
  .tier-rows { overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.55s cubic-bezier(.4,0,.2,1), opacity 0.4s ease; }
  .tier-band.open .tier-rows { max-height: 440px; opacity: 1; }
  .tier-band-head { cursor: pointer; transition: opacity 0.3s; }
  .tier-band:not(.open) .tier-band-head { opacity: 0.5; }
  .tier-band:not(.open):hover .tier-band-head { opacity: 0.8; }
}

/* ── arsenal pinned scroll: the section locks while the three tiers cycle ── */
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  .arsenal-track { position: relative; height: 300vh; }
  .arsenal-pin { position: sticky; top: 0; height: var(--vh); display: flex; align-items: center; }
  .arsenal-pin .arsenal-grid { width: 100%; margin: 0 auto; }
  .arsenal-intro { position: static; top: auto; }
}

/* burpee figure tucked into the arsenal intro's empty space */
.arsenal-figure { width: 100%; height: 300px; margin-top: 24px; }
@media (max-width: 940px) { .arsenal-figure { height: 260px; max-width: 360px; } }

/* ══ Placement-test camera (reps are verified, not self-reported) ══ */
.pt-cam-wrap {
  position: relative; margin: 20px 0 12px; aspect-ratio: 4 / 3; width: 100%;
  background: #05070b; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.pt-cam-wrap video, .pt-cam-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);            /* mirror so it reads like a mirror, not a stranger */
}
.pt-cam-wrap canvas { pointer-events: none; }
.pt-cam-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px;
  color: var(--t3);
}
.pt-cam-placeholder p { font-size: 14px; font-weight: 600; color: var(--t2); }
.pt-cam-note { font-size: 12px; color: var(--t3); max-width: 260px; line-height: 1.5; }
.pt-cam-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(5,7,11,0.72); border: 1px solid rgba(34,211,238,0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pt-cam-num { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.pt-cam-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--t3); }
.pt-cam-status { font-size: 13px; color: var(--t2); line-height: 1.5; margin-bottom: 14px; min-height: 18px; }

/* ══ Onboarding stepper: revisit any step you've already reached ══
   current = bright accent (where you are), done = deep accent (already
   completed, click to go back), locked = muted and non-interactive. */
#onboardBarSteps span.done { color: color-mix(in srgb, var(--accent) 55%, #05070b 45%); }
#onboardBarSteps span.done,
.ob-node.done,
#onboardBarSteps span.current,
.ob-node.current { cursor: pointer; }
#onboardBarSteps span.done:hover { color: var(--accent); }
#onboardBarSteps span.locked,
.ob-node.locked { cursor: not-allowed; }
.ob-node.done {
  background: color-mix(in srgb, var(--accent) 55%, #05070b 45%);
  border-color: color-mix(in srgb, var(--accent) 65%, #05070b 35%);
}
.ob-node.done:hover { background: var(--accent); border-color: var(--accent); }
.ob-node.current { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
/* bigger tap target without moving the dots */
.ob-node::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.ob-node.locked::before { pointer-events: none; }

/* ══ Placement test: learn the movement before you're asked to do it ══ */
.pt-brief { max-width: 460px; margin: 0 auto; text-align: left; }
.pt-brief-desc {
  font-size: 13.5px; line-height: 1.65; color: var(--t2);
  text-align: center; margin-bottom: 14px;
}
.pt-how {
  border: 1px solid var(--border); border-radius: 13px;
  background: rgba(255,255,255,0.022); overflow: hidden;
}
.pt-how + .pt-how, .pt-ex-desc + .pt-how { margin-top: 16px; }
.pt-how summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 15px; list-style: none;
  font: 700 13px var(--font-body); color: var(--t1);
  transition: background 0.18s;
}
.pt-how summary::-webkit-details-marker { display: none; }
.pt-how summary:hover { background: rgba(34,211,238,0.06); }
.pt-how summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pt-how-ic { display: grid; place-items: center; width: 20px; height: 20px; color: var(--accent); flex: none; }
.pt-how-ic svg { width: 100%; height: 100%; }
.pt-how-label { flex: 1; }
.pt-how-chev { width: 15px; height: 15px; color: var(--t3); transition: transform 0.25s var(--ease-out, cubic-bezier(.22,1,.36,1)); flex: none; }
.pt-how[open] .pt-how-chev { transform: rotate(180deg); }
.pt-how-body { padding: 2px 17px 15px 17px; border-top: 1px solid var(--border); }
.pt-how-body ol { margin: 13px 0 0; padding-left: 19px; display: flex; flex-direction: column; gap: 9px; }
.pt-how-body li { font-size: 13.5px; line-height: 1.6; color: var(--t2); }
.pt-how-body li::marker { color: var(--accent); font-weight: 700; }
.pt-how-note {
  margin-top: 13px; padding: 10px 12px; border-radius: 9px;
  background: rgba(245,179,1,0.07); border-left: 3px solid var(--amber);
  font-size: 12.5px; line-height: 1.55; color: var(--t2);
}

/* ══ Account: state where you stand, not just who you are ══ */
.acct-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.acct-crest { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--tier) 35%, transparent)); }
.acct-crest svg { width: 100%; height: 100%; }
.acct-id { flex: 1; min-width: 180px; }
.acct-id .account-name { font-size: 24px; margin: 0 0 2px; text-align: left; }
.acct-id .account-email { text-align: left; margin: 0 0 6px; }
.acct-rank { font-family: var(--font-display); font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.acct-ladder { margin-bottom: 22px; }
.acct-ladder-head { display: flex; justify-content: space-between; font: 700 10.5px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.acct-rail { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.acct-rail > i { display: block; height: 100%; border-radius: 99px; transition: width 0.7s cubic-bezier(.22,1,.36,1); }
.acct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; }
.acct-stat { text-align: center; padding: 14px 8px; border-radius: 13px; background: rgba(255,255,255,0.028); border: 1px solid var(--border); }
.acct-stat b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--t1); line-height: 1; }
.acct-stat span { display: block; margin-top: 5px; font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--t3); }
@media (max-width: 560px) { .acct-stats { grid-template-columns: repeat(2, 1fr); } .acct-hero { justify-content: center; text-align: center; } .acct-id .account-name, .acct-id .account-email { text-align: center; } }

/* ══ Ambient backdrop for otherwise-empty views ══ */
.kf-ambient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.has-ambient { position: relative; isolation: isolate; }
.has-ambient > .container, .has-ambient > .page-header { position: relative; z-index: 1; }

/* ══ Cancellation flow ══ */
.cancel-warn {
  padding: 14px 16px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(239,68,68,0.07); border-left: 3px solid #EF4444;
}
.cancel-warn-title { font: 800 14px var(--font-body); color: #FCA5A5; margin-bottom: 5px; }
.cancel-warn p { font-size: 13px; line-height: 1.6; color: var(--t2); }
.cancel-lose { margin-bottom: 14px; }
.cancel-lose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.cancel-lose li { font-size: 13px; color: var(--t2); line-height: 1.5; }
.cancel-lose li::marker { color: #EF4444; }
.cancel-keep { margin-top: 10px; font-size: 12.5px; color: var(--t3); line-height: 1.55; }
.cancel-ack {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bdr);
  background: rgba(255,255,255,0.02);
}
.cancel-ack input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.cancel-ack span { font-size: 13px; line-height: 1.55; color: var(--t2); }
.btn-danger {
  background: #DC2626; color: #fff; border: none;
  box-shadow: 0 6px 18px rgba(220,38,38,0.28);
}
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ══ Local test-mode checkout (localhost only) ══ */
.test-pay { display: flex; flex-direction: column; gap: 12px; }
.test-pay-tag {
  align-self: flex-start; padding: 5px 11px; border-radius: 7px;
  font: 700 10.5px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--amber); background: rgba(245,179,1,0.10); border: 1px solid rgba(245,179,1,0.32);
}
.test-pay label { display: flex; flex-direction: column; gap: 6px; font: 600 11px var(--font-body); letter-spacing: 1.1px; text-transform: uppercase; color: var(--t3); }
.test-pay input {
  width: 100%; font: 500 15px var(--font-body); color: var(--t1);
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg2, var(--bg)); border: 1px solid var(--bdr);
}
.test-pay input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.test-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Theme preview: only the digits are centred on the dark/light split — the
   unit hangs to the right so it cannot drag the number off centre. */
.ttile-num { position: relative; }
.ttile-unit {
  position: absolute; left: 100%; bottom: 0.12em;
  margin-left: 4px; font-size: 11px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
}

/* The settings gear is in the menu on a phone; a second one in the bar was
   redundant and crowded the brand. */
/* The dock carries Settings on desktop and the staggered menu carries it on a
   phone, so the standalone gear in the bar was a second control for the same
   destination sitting right beside the first. */
#navSettingsBtn { display: none !important; }

/* ══ Exercise library on a phone ══════════════════════════════
   auto-fill/minmax(240px) collapses to a single column under ~500px, so a
   phone showed one huge card per row and the list took forever to scan.
   Two per row with the card contents tightened to suit the narrower box. */
@media (max-width: 640px) {
  .ex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding-bottom: 40px;
  }
  .ex-card { padding: 13px 12px; border-radius: 14px; }
  .ex-card-top { margin-bottom: 8px; gap: 6px; flex-wrap: wrap; }
  .ex-card-badge { font-size: 9px; padding: 3px 7px; letter-spacing: 0.3px; }
  .ex-card-diff { font-size: 10px; }
  .ex-card h4 { font-size: 14px; line-height: 1.25; }
  /* the muscle list and equipment/kcal lines are the least important thing on
     a 170px-wide card — keep them but make them secondary */
  .ex-card .ex-muscles { font-size: 11px; line-height: 1.35; }
  .ex-card .ex-meta, .ex-card .ex-equip { font-size: 10.5px; gap: 5px; }
  .ex-bottom-row { margin-top: 7px; gap: 5px; }
  .ex-xp-badge { font-size: 10px; padding: 3px 8px; }
  .ex-fav-btn { opacity: 1; transform: scale(1); }   /* no hover on touch */
}

/* ══ Dashboard muscle ladder ══════════════════════════════════
   Pressed wells, one per ranked group, each lit by its own tier colour so the
   ladder reads at a glance without a legend. */
.dash-muscles { margin-bottom: 22px; }
.dash-mus-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.dash-mus-all { font: 700 11.5px var(--font-body); color: var(--accent-text); text-decoration: none; }
.dash-mus-all:hover { text-decoration: underline; }
.dmus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.dmus {
  --emit: var(--accent);
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border: none; border-radius: 12px; padding: 11px 12px 12px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(154deg, var(--bg2, var(--bg)), var(--card));
  box-shadow: inset 4px 4px 10px var(--sc-sh, rgba(0,0,0,0.5)),
              inset -3px -3px 9px var(--sc-lt, rgba(255,255,255,0.055));
  transition: transform 180ms cubic-bezier(.22,1,.36,1);
}
.dmus:hover { transform: translateY(-2px); }
.dmus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dmus-name { font: 700 12px var(--font-body); color: var(--t1); }
.dmus-rank { font: 700 10px var(--font-body); letter-spacing: 0.8px; text-transform: uppercase; }
.dmus-rail {
  margin-top: 5px; height: 4px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.dmus-rail > i { display: block; height: 100%; border-radius: 99px; box-shadow: 0 0 8px -1px var(--emit); transition: width 620ms cubic-bezier(.22,1,.36,1); }
@media (max-width: 640px) {
  .dmus-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .dmus { padding: 9px 10px 10px; }
  .dmus-name { font-size: 11.5px; }
}

/* ══ Vertical rhythm: let short pages actually fit ════════════
   .page-header carried 88px of top padding on top of the view's own 64px —
   152px of dead space above the title. Combined with the container's padding
   that put ~286px of chrome around the content, which pushed otherwise-short
   pages (account, friends, calculator) just past the fold and forced a small
   scroll to reach the last control while the top of the screen sat empty. */
.page-header { padding-bottom: 12px; }
.container.auth-container { padding-top: 12px; padding-bottom: 12px; }
/* Duplicate of the rule in sculpted.css — kept in step through the variable
   rather than the literal, because whichever stylesheet loads last wins and a
   hardcoded 14px here silently reinstated the phantom scroll the variable
   exists to remove. */
body.has-dock .view { padding-bottom: var(--view-pb); }
@media (max-width: 640px) {
  .page-header { padding-top: 14px !important; padding-bottom: 12px; }
  .container.auth-container { padding-top: 14px; padding-bottom: 24px; }
}

/* Contain descendant margins. Without a block formatting context the last
   child's margin-bottom escapes the view and is added to the page height, so
   a page whose content genuinely fits still reported ~150px of overflow and
   demanded a small scroll to reach its final control. */
.view.active { display: flow-root; }

/* ══ Galaxy backdrop on checkout ══════════════════════════════
   Sits behind the pay panel. The view's own rock/circuit artwork stays but is
   dimmed right down so the two do not fight; the starfield carries the depth. */
#view-payment { position: relative; isolation: isolate; }
.pay-galaxy {
  /* fixed, not absolute: the checkout view is far taller than the screen, and
     an absolute layer only painted the first screenful before the panel's own
     background took over. Safe because the element lives inside #view-payment,
     which is display:none unless the view is active. */
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(90% 70% at 50% 106%, rgba(168,85,247,0.09), transparent 62%);
}
.pay-galaxy canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#view-payment > .pay-luxe { position: relative; z-index: 1; }
#view-payment .pay-rocks, #view-payment .pay-circuit { opacity: 0.22; }
/* let the starfield through the panel backdrop */
#view-payment .pay-luxe { background: transparent; }


/* Ambient backdrop removed: plain black reads cleaner behind the content than
   drifting streaks, which competed with it on every screen. The engine is kept
   in the tree (assets/ambient.js) so it can be reinstated deliberately. */
.kf-ambient { display: none !important; }

/* ================================================================
   HELP DOT
   The small "i" beside a field label. CSS-only on purpose: :hover covers
   mouse, :focus-visible covers keyboard, and because it is a real <button>
   a tap focuses it, so touch works too — no JS and nothing to re-bind after
   a re-render.
================================================================ */
.help-dot {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--t3);
  background: transparent; color: var(--t3);
  font: 700 10px/1 var(--font-body); font-style: italic;
  cursor: help; vertical-align: middle;
  transition: color 150ms, border-color 150ms;
}
.help-dot:hover, .help-dot:focus-visible { color: var(--accent); border-color: var(--accent); }
.help-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.help-dot::after {
  content: attr(data-help);
  position: absolute; left: 0; right: 0; margin: 8px auto 0;
  /* The bubble is wider than the 15px button, so it is laid out against the
     form-group rather than the dot — anchoring to the dot would either clip it
     or push it off the edge of narrow screens. */
  max-width: 320px; width: max-content;
  padding: 10px 12px; border-radius: 10px;
  background: var(--card2, var(--card)); border: 1px solid var(--bdr);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
  color: var(--t1); font: 400 12.5px/1.55 var(--font-body); font-style: normal;
  text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms, transform 160ms, visibility 160ms;
  z-index: 60; pointer-events: none;
}
.help-dot:hover::after, .help-dot:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* the containing group provides the positioning context for the bubble */
.form-group { position: relative; }

/* ================================================================
   CHECKOUT — slide to pay + success sequence

   Ported from the standalone pay.html prototype onto the app's own tokens.
   The prototype collected card numbers in plain <input>s; that part is
   deliberately NOT carried over. Card entry stays in Stripe's iframe, so the
   number never enters this document and a single XSS anywhere in the app
   cannot skim it. Everything here is the surrounding choreography, which is
   what the design was actually for.

   A slider rather than a button because paying is the one irreversible thing
   in the flow, and a deliberate gesture suits that better than a click you can
   fire by accident.
================================================================ */
.pay-slider {
  position: relative; height: 58px; margin-top: 18px;
  border-radius: 999px; overflow: hidden; touch-action: none;
  background: var(--bg2, var(--bg)); border: 1px solid var(--bdr);
  -webkit-user-select: none; user-select: none;
}
.pay-slider-fill {
  position: absolute; inset: 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-d, var(--accent)));
}
.pay-slider-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-left: 40px; pointer-events: none; white-space: nowrap;
  font: 700 14px var(--font-body); letter-spacing: 0.3px; color: var(--t2);
}
.pay-slider-text b { color: var(--t1); }
.pay-slider-knob {
  position: absolute; top: 4px; left: 4px;
  width: 50px; height: calc(100% - 8px); border-radius: 999px;
  background: var(--card2, var(--card)); color: var(--accent);
  display: grid; place-items: center; cursor: grab;
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.35);
}
.pay-slider-knob:active { cursor: grabbing; }
.pay-slider.done .pay-slider-knob { color: var(--green); }
.pay-slider[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.pay-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pay-slider-hint { text-align: center; font-size: 12px; color: var(--t3); margin-top: 9px; }

/* success: the card lifts, turns once, and settles small above the tick */
@keyframes payCardSpin  { to { transform: rotateY(360deg); } }
@keyframes payCardAway  {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-38px) scale(0.68); opacity: 0.92; }
}
@keyframes payTickDraw  { to { stroke-dashoffset: 0; } }
.pay-card.paid      { animation: payCardSpin 1100ms cubic-bezier(.4,0,.2,1) forwards; }
.pay-card-bob.paid  { animation: payCardAway 700ms 900ms cubic-bezier(.16,1,.3,1) forwards; }

.pay-done { text-align: center; padding: 26px 0 4px; }
.pay-done-tick { width: 66px; height: 66px; margin: 0 auto 14px; display: block; }
.pay-done-tick circle, .pay-done-tick path {
  stroke-dasharray: 190; stroke-dashoffset: 190;
  animation: payTickDraw 620ms cubic-bezier(.65,0,.35,1) forwards;
}
.pay-done-tick path { animation-delay: 380ms; stroke-dasharray: 48; stroke-dashoffset: 48; }
.pay-done h3 { font-size: 21px; margin-bottom: 6px; color: var(--t1); }
.pay-done p  { font-size: 13.5px; color: var(--t3); }

@media (prefers-reduced-motion: reduce) {
  .pay-card.paid, .pay-card-bob.paid { animation: none; }
  .pay-done-tick circle, .pay-done-tick path { animation: none; stroke-dashoffset: 0; }
}

/* ================================================================
   CHECKOUT — the real one, ported from pay.html

   This is the design that was built and signed off on the UI lab: a white
   sheet centred on the starfield, and on payment the sheet drops away while a
   card rises from below the fold, tilts flat, and settles as the charge
   clears.

   Earlier attempts lifted only the slider out of this file and bolted it onto
   the old dark panel, which is why the page kept coming back looking like the
   thing it was meant to replace. The whole layout comes across now.

   Every selector is prefixed with #view-payment. The prototype was a
   standalone page so it uses names like .sheet, .field, .order and .stage,
   which would otherwise collide with the app on sight.

   Card entry is the one thing NOT carried over verbatim: the prototype used
   plain <input>s, so the card number sat in its own DOM. Entry stays in
   Stripe's iframe, themed light to sit inside the white sheet.
================================================================ */
/* `#view-payment :root` — which is what this said — is a DESCENDANT selector: a
   :root element inside #view-payment. :root is always <html>, so it can never be
   a descendant of anything, and the rule matched nothing. Every token below
   silently resolved to nothing for the whole checkout, and an invalid var() does
   not fall back, it voids the entire declaration: `border: 1px solid var(--line)`
   left the slider with no border at all, and `color: var(--accent-d)` on the knob
   fell through to the inherited near-white, so the arrow was a white glyph on a
   white knob and the control read as an empty ring.

   The prototype this was lifted from had a real `:root { … }`; prefixing every
   selector in it with `#view-payment` breaks on exactly the two selectors that
   cannot be nested, `:root` and `body`. Declaring them on the view element is
   what was meant — it is the scoping ancestor for everything here. */
#view-payment {
    --ink:      #0B0D12;
    /* --ink-3 measured 3.2:1 on the white sheet — an outright AA failure on the
       checkout, where it carries the order label, the order note and "Secured".
       --ink-2 passed at 6.92 but is darkened in step so the two keep their
       relationship. Both now clear 7:1 on white. */
    --ink-2:    #3B4353;
    --ink-3:    #4E5666;
    --line:     #E4E7EC;
    --accent:   #22D3EE;
    --accent-d: #0EA5C4;
    --amber:    #F5B301;
    --ok:       #16A34A;
    --font:     "Barlow", system-ui, -apple-system, sans-serif;
    --display:  "Barlow Condensed", var(--font);
  }
/* DEAD ON PURPOSE — leave it that way. `#view-payment body` cannot match either
   (body is never a descendant of a div), and unlike the token block above it must
   NOT be repointed at the view. `overflow: hidden` would clip the sheet on a
   phone, where it is now taller than the viewport and meant to scroll;
   `display: grid` + `place-items: center` would fight `.pay-lab`, which is the
   flex row that puts the trial timeline beside the sheet; and `color: var(--ink)`
   would put near-black text on the starfield. The layout works because none of
   this applies. Kept only so the rule it came from is still legible next to the
   prototype it was lifted from. */
#view-payment body {
    font-family: var(--font);
    background: #05070C;
    color: var(--ink);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  /* ── galaxy backdrop ─────────────────────────────────────── */
#view-payment #galaxy {
    position: fixed; inset: 0; z-index: 0;
    background:
      radial-gradient(120% 90% at 50% 8%, rgba(34,211,238,0.10), transparent 60%),
      radial-gradient(90% 70% at 50% 108%, rgba(168,85,247,0.10), transparent 60%),
      #05070C;
  }
#view-payment #galaxy canvas { position: absolute; inset: 0; }

  /* ── replay ──────────────────────────────────────────────── */
#view-payment .replay {
    position: fixed; top: 22px; left: 22px; z-index: 30;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; border-radius: 999px; cursor: pointer;
    font: 600 13px var(--font); color: #E8EDF5;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
#view-payment .replay:hover { background: rgba(255,255,255,0.13); border-color: rgba(34,211,238,0.55); transform: translateY(-1px); }
#view-payment .replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#view-payment .replay svg { width: 15px; height: 15px; }

  /* ── the white card ──────────────────────────────────────── */
#view-payment .sheet {
    position: relative; z-index: 10;
    height: calc(var(--vh) * 0.65); width: calc(var(--vh) * 0.65);
    max-width: 92vw; min-height: 520px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.10);
    padding: clamp(22px, 3.4vh, 40px) clamp(22px, 3.2vh, 38px);
    display: flex; flex-direction: column;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.4,0,.2,1);
  }
#view-payment .sheet.gone { opacity: 0; transform: scale(0.94) translateY(-10px); pointer-events: none; }

#view-payment .brand { display: flex; align-items: center; gap: 9px; margin-bottom: auto; }
#view-payment .brand-mark {
    width: 28px; height: 28px; border-radius: 8px; flex: none;
    background: linear-gradient(135deg, #22D3EE, #0EA5C4);
    display: grid; place-items: center; color: #04222A; font-weight: 800; font-size: 15px;
    font-family: var(--display);
  }
#view-payment .brand-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.4px; text-transform: uppercase; }
#view-payment .brand-name span { color: var(--accent-d); }
#view-payment .secure { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); font-weight: 600; }

#view-payment .order { margin: clamp(12px, 2.4vh, 26px) 0 clamp(10px, 1.8vh, 18px); }
#view-payment .order-label { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
#view-payment .order-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
#view-payment .order-plan { font-family: var(--display); font-size: clamp(21px, 3.1vh, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
#view-payment .order-price { font-family: var(--display); font-size: clamp(21px, 3.1vh, 30px); font-weight: 800; }
#view-payment .order-note { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

#view-payment .fields { display: grid; gap: clamp(8px, 1.3vh, 13px); }
#view-payment .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.3vh, 13px); }
#view-payment .field label {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
  }
#view-payment .field input {
    width: 100%; font: 500 15px var(--font); color: var(--ink);
    padding: clamp(9px, 1.5vh, 13px) 14px;
    border: 1px solid var(--line); border-radius: 12px; background: #FBFCFD;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  }
#view-payment .field input::placeholder { color: #B6BCC7; }
#view-payment .field input:focus {
    outline: none; background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(34,211,238,0.16);
  }
#view-payment .field input.bad { border-color: #EF4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.13); }
#view-payment .card-field { position: relative; }
#view-payment .card-brand {
    position: absolute; right: 12px; top: 50%; transform: translateY(-2px);
    font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 1px;
    color: var(--ink-3); opacity: 0; transition: opacity 0.2s;
  }
#view-payment .card-brand.on { opacity: 1; color: var(--ink); }

  /* ── slide to pay ────────────────────────────────────────── */
#view-payment .slider {
    margin-top: auto; position: relative; height: clamp(52px, 7.4vh, 62px);
    border-radius: 999px; background: #F1F3F6; border: 1px solid var(--line);
    overflow: hidden; touch-action: none;
    -webkit-user-select: none; user-select: none;
  }
#view-payment .slider-fill {
    position: absolute; inset: 0; width: 0;
    background: linear-gradient(90deg, #22D3EE, #0EA5C4);
    border-radius: 999px;
  }
#view-payment .slider-text {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 700; font-size: 14px; color: var(--ink-2); letter-spacing: 0.3px;
    pointer-events: none; white-space: nowrap; padding-left: 34px;
  }
#view-payment .slider-text b { color: var(--ink); }
#view-payment .slider-knob {
    position: absolute; top: 4px; left: 4px;
    width: clamp(44px, 6.2vh, 52px); height: calc(100% - 8px);
    border-radius: 999px; background: #fff; cursor: grab;
    box-shadow: 0 3px 10px rgba(11,13,18,0.22);
    display: grid; place-items: center; color: var(--accent-d);
  }
#view-payment .slider-knob:active { cursor: grabbing; }
#view-payment .slider.done .slider-knob { color: var(--ok); }
#view-payment .slider.disabled { opacity: 0.55; pointer-events: none; }
#view-payment .slider-hint { text-align: center; font-size: 11.5px; color: var(--ink-3); margin-top: 9px; }

  /* ── success stage ───────────────────────────────────────── */
#view-payment .stage {
    position: fixed; inset: 0; z-index: 20;
    display: none; place-items: center;
    perspective: 1400px;
  }
#view-payment .stage.on { display: grid; }

#view-payment .card3d {
    position: relative;
    width: min(400px, 74vw); aspect-ratio: 1.586 / 1;
    transform-style: preserve-3d;
    transform: translateY(120vh) rotateX(62deg) rotateZ(-14deg) scale(1.25);
  }
#view-payment .card3d.fly {
    animation: cardRise 1.5s cubic-bezier(.2,.75,.25,1) forwards,
               cardSpin 1.5s cubic-bezier(.35,0,.2,1) forwards;
  }
#view-payment .card3d.settle { animation: cardZoomOut 1.1s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes cardRise {
    to { transform: translateY(0) rotateX(6deg) rotateZ(0deg) scale(1); }
  }
  @keyframes cardSpin {
    0%   { --spin: 0deg; }
    100% { --spin: 360deg; }
  }
  @keyframes cardZoomOut {
    from { transform: translateY(0) rotateX(6deg) scale(1); opacity: 1; }
    to   { transform: translateY(-6vh) rotateX(2deg) scale(0.62); opacity: 0.9; }
  }
#view-payment .card-face {
    position: absolute; inset: 0; border-radius: 20px;
    backface-visibility: hidden;
    box-shadow: 0 40px 90px rgba(0,0,0,0.65);
    overflow: hidden;
  }
#view-payment .card-front {
    background:
      radial-gradient(120% 140% at 12% 6%, rgba(255,255,255,0.30), transparent 46%),
      linear-gradient(135deg, #0F1720 0%, #123642 42%, #0B1016 100%);
    border: 1px solid rgba(255,255,255,0.16);
    color: #EAF6FA;
    padding: 7% 8%;
    display: flex; flex-direction: column;
  }
#view-payment .card-sheen {
    position: absolute; inset: -40%;
    background: linear-gradient(75deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
    transform: translateX(-60%);
  }
#view-payment .card3d.fly .card-sheen { animation: sheen 1.5s 0.45s cubic-bezier(.3,0,.2,1) forwards; }
  @keyframes sheen { to { transform: translateX(60%); } }
#view-payment .card-chip {
    width: 15%; aspect-ratio: 4 / 3; border-radius: 5px;
    background: linear-gradient(135deg, #F7D774, #C79A2E 55%, #F0CE6A);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  }
#view-payment .card-logo {
    position: absolute; top: 7%; right: 8%;
    font-family: var(--display); font-weight: 800; font-size: clamp(13px, 3.4vw, 17px);
    letter-spacing: 1px; text-transform: uppercase; color: #fff;
  }
#view-payment .card-logo span { color: var(--accent); }
#view-payment .card-num {
    margin-top: auto;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(17px, 4.6vw, 25px); letter-spacing: 2.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
#view-payment .card-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6%; }
#view-payment .card-meta-label { font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(234,246,250,0.55); }
#view-payment .card-meta-val { font-family: var(--display); font-weight: 700; font-size: clamp(11px, 2.9vw, 14px); letter-spacing: 1.2px; }

#view-payment .status {
    position: fixed; left: 0; right: 0; bottom: 12vh; z-index: 25;
    text-align: center; opacity: 0; transition: opacity 0.45s;
  }
#view-payment .status.on { opacity: 1; }
#view-payment .status-line {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 13px 24px; border-radius: 999px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: #E8EDF5; font-weight: 600; font-size: 14.5px; letter-spacing: 0.2px;
  }
#view-payment .status-line.ok { border-color: rgba(22,163,74,0.6); color: #C8F7D8; }
#view-payment .spinner {
    width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.28); border-top-color: var(--accent);
    animation: spin 0.75s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
#view-payment .tick { width: 18px; height: 18px; }
#view-payment .tick circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: draw 0.5s ease forwards; }
#view-payment .tick path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 0.35s 0.35s ease forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
#view-payment .status-sub { margin-top: 10px; font-size: 12.5px; color: #9AA4B4; }

  @media (prefers-reduced-motion: reduce) {
#view-payment .card3d, #view-payment .card3d.fly, #view-payment .card3d.settle, #view-payment .card-sheen { animation: none !important; transform: none !important; }
#view-payment .spinner { animation: none; }
  }
  @media (max-height: 620px) { .sheet { min-height: 0; height: calc(var(--vh) * 0.92); width: calc(var(--vh) * 0.92); } }


/* ── checkout: layout + light-sheet overrides ──────────────────────
   The prototype was a standalone page whose <body> did the centring, and that
   rule was stripped when its stylesheet was scoped (the app owns body). The
   wrapper has to do it instead, or the sheet sits against the left edge.

   The inputs need saying explicitly too: they inherit the app's dark form
   styling, which puts near-black fields inside a white card. Same for the
   brand and order text, which was white-on-white and simply invisible. */
/* Two columns on desktop: sheet, then timeline beside it.
   This was a single centred grid cell, so the timeline stacked underneath the
   sheet instead of sitting to its right. Flex row with the two as siblings,
   aligned on their top edges so the timeline reads alongside the order rather
   than trailing it. Collapses to a column under 900px. */
/* Sits INSIDE .view, which has already added var(--nav-h) of top padding to
   clear the fixed navbar and whose own min-height is a full screen. Asking for
   a full screen again here, and re-applying the navbar offset in this padding,
   made the checkout exactly one navbar taller than the window every time — the
   confirm slider sat just under the fold on a page with nothing else to see. */
#view-payment .pay-lab {
  position: relative; z-index: 2;
  min-height: calc(var(--vh) - var(--nav-h)); padding: 14px 16px 20px;
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: flex-start; justify-content: center;
}
#view-payment .sheet { flex: 0 1 auto; }
#view-payment .pay-timeline { flex: 0 0 auto; align-self: flex-start; margin-top: 0; }
@media (max-width: 900px) {
  #view-payment .pay-lab { flex-direction: column; align-items: center; }
}
/* Back sits on its own full-width row at the top of the lab.

   It used to be `position: absolute; top: nav-h + 14px; left: 18px`, which is
   fine only while the sheet is far from the left margin. `.pay-lab` centres a
   flex row of sheet + timeline, so as the viewport narrows the sheet slides left
   until it is under the button. Measured: at 1000px wide the pill overlapped the
   sheet by 1474px², sitting half on the white card. Fixing that with a
   breakpoint just moves the guess — in the flow it cannot happen at any width.

   A flex item with `flex: 0 0 100%` would stretch the pill across the whole row,
   so the row is a wrapper and the button stays its natural size inside it. */
#view-payment .pay-lab-top {
  flex: 0 0 100%;
  display: flex; justify-content: flex-start;
  margin-bottom: 2px;
}
#view-payment .pay-back { position: static; margin: 0; z-index: 12; }

#view-payment .brand-name,
#view-payment .order-plan,
#view-payment .order-price { color: #12151c; }
#view-payment .order-label,
#view-payment .order-note,
#view-payment .secure,
#view-payment .slider-hint { color: #4E5666; }
#view-payment .order { border-top: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef; }

#view-payment .test-pay label { color: #4E5666; }
#view-payment .test-pay input {
  background: #fff; color: #12151c;
  border: 1px solid #d8dde6; border-radius: 12px;
  padding: 12px 14px; width: 100%; font-size: 15px;
}
#view-payment .test-pay input::placeholder { color: #9aa4b4; }
#view-payment .test-pay input:focus { outline: 2px solid #0EA5C4; outline-offset: 1px; border-color: #0EA5C4; }
#view-payment .test-pay-tag { color: #8a6d1f; background: #fdf6e3; border: 1px solid #f0dfae; }

/* The slider is the primary control, so the button behind it is the keyboard
   and assistive path only — two equal-looking ways to pay side by side just
   made people wonder which one was real. Visually hidden rather than removed:
   deleting it would leave the slider as the only route, and a drag gesture
   cannot be performed with a keyboard or a screen reader. It comes back the
   moment it is focused. */
#view-payment #embeddedPayBtn {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
#view-payment #embeddedPayBtn:focus-visible {
  position: static; width: auto; height: auto; padding: 14px; margin: 12px 0 0;
  overflow: visible; clip-path: none; white-space: normal;
  background: #12151c; color: #fff; border-radius: 12px;
}

/* ── UNITS STEPPER ─────────────────────────────────────────────────
   Two mutually exclusive options, presented as one value you step through
   rather than two tiles competing for the same slot. */
.unit-stepper {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2, var(--bg)); border: 1px solid var(--bdr);
  border-radius: 16px; padding: 10px 12px;
}
.unit-arrow {
  flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--card2, var(--card)); border: 1px solid var(--bdr);
  color: var(--t2); transition: color 160ms, border-color 160ms, transform 160ms;
}
.unit-arrow svg { width: 19px; height: 19px; }
.unit-arrow:hover { color: var(--accent); border-color: var(--accent); }
.unit-arrow:active { transform: scale(0.94); }
.unit-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.unit-face {
  flex: 1; min-width: 0; text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.unit-big  { font-family: var(--font-display, inherit); font-weight: 900;
             font-size: 22px; line-height: 1.1; color: var(--t1); }
.unit-name { font-size: 12px; color: var(--t3); }


/* ── Mobile: scrollable tab rows need to LOOK scrollable ──────────
   Swept every view at 390px. Only one real finding: .workout-tabs is
   overflow-x:auto and 623px wide inside a 374px rail, so it scrolls correctly
   but the last tab sits entirely past the edge with nothing to suggest it
   exists. A row that ends flush with the viewport reads as a row that ends.

   The mask fades the trailing edge so content is visibly continuing, and
   scroll-snap makes the swipe land on a tab instead of halfway across one.
   Applied only where it actually overflows — on desktop the row fits and a
   fade there would be noise. */
@media (max-width: 600px) {
  .workout-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 84%, transparent 100%);
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    /* the row is the scroller, so its own padding must not clip the snap */
    padding-right: 22px;
  }
  .workout-tabs > * { scroll-snap-align: start; }
  /* no scrollbar track eating vertical space on touch */
  .workout-tabs::-webkit-scrollbar { height: 0; }
}

/* ── Checkout: readable slider, and the trial timeline ─────────────
   The slider label inherited a colour token from the standalone prototype
   (--ink-2) that does not exist in the app, so it fell back to white — white
   text on a near-white track. Stated explicitly instead, and the fill is dark
   enough that the label stays legible as it sweeps underneath. */
#view-payment .slider-text   { color: #3B4353; }
#view-payment .slider-text b { color: #12151c; }
#view-payment .slider-fill   { background: linear-gradient(90deg, #0EA5C4, #0b7f98); }
#view-payment .slider-hint   { color: #4E5666; }

/* Trial timeline. Sits beside the sheet on desktop, under it on mobile. The
   point is reassurance, so it uses real dates rather than "day 5" — a date is
   checkable, a relative day is a promise. */
.pay-timeline {
  background: #fff; border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  width: min(300px, 92vw); align-self: center;
  font: 400 13.5px/1.5 var(--font-body);
}
.pay-tl-title {
  font: 800 11px var(--font-body); letter-spacing: 1.6px; text-transform: uppercase;
  color: #4E5666; margin-bottom: 16px;
}
.pay-tl-row { display: flex; gap: 12px; padding-bottom: 18px; position: relative; }
.pay-tl-row:last-child { padding-bottom: 0; }
/* the connecting rail is drawn per-row so the last one has no tail */
.pay-tl-row:not(:last-child)::before {
  content: ""; position: absolute; left: 6px; top: 16px; bottom: 2px;
  width: 2px; background: #e6e9ef;
}
.pay-tl-dot {
  flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 2px;
  background: #fff; border: 3px solid #d8dde6; position: relative; z-index: 1;
}
.pay-tl-row.now .pay-tl-dot { border-color: #0EA5C4; background: #0EA5C4; }
.pay-tl-row.charge .pay-tl-dot { border-color: #12151c; }
.pay-tl-when { font-weight: 800; color: #12151c; }
.pay-tl-what { color: #4E5666; margin-top: 2px; }
.pay-tl-foot {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid #e6e9ef;
  color: #4E5666; font-size: 12.5px;
}
@media (max-width: 900px) {
  .pay-timeline { width: min(420px, calc(100vw - 32px)); margin-top: 16px; }
}

/* ── Active plan: shown as owned, not offered ─────────────────────
   Re-selecting the plan you already have ran the upgrade flow again and
   dead-ended on a checkout with nothing to buy. The button now states the
   situation instead of accepting a click it cannot honour. */
.plan-cta-active {
  background: color-mix(in srgb, var(--green, #4ADE80) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--green, #4ADE80) 55%, transparent) !important;
  color: var(--green, #4ADE80) !important;
  cursor: default !important;
  opacity: 1 !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.plan-cta-active .plan-active-tick { display: inline-grid; place-items: center; }
.plan-cta-active .plan-active-tick svg { stroke: var(--green, #4ADE80); }

/* the whole card reads as owned: dimmed, but not so far that it looks broken */
.plan-card-active { position: relative; }
.plan-card-active::after {
  content: "Active";
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: var(--green, #4ADE80); color: #06240f;
  font: 800 10.5px var(--font-body); letter-spacing: 1px; text-transform: uppercase;
}
.plan-card-active .plan-price,
.plan-card-active .plan-features { opacity: 0.62; }

/* ── Checkout: the pay control cannot be allowed to collapse ────────
   Measured on a 390x844 phone: the slider rendered 15px tall with a 7px knob,
   against its own declared clamp(52px, 7.4vh, 62px). Nothing overrode the
   height. `.sheet` is a fixed-height flex column (65vh) and the slider is a
   flex item, so the default flex-shrink: 1 crushed it as soon as the content
   ran past the box — and because the slider's children are all
   position: absolute, its content height is 0, so min-height: auto put no floor
   under the shrink either. Of everything in that column, the one element able
   to collapse to nothing was the one you have to hit to pay.

   Two parts. The pay control and its label never shrink, at any width. And on a
   phone the sheet stops being a fixed-height square and sizes to its content,
   because a real Stripe Payment Element is ~250px tall and no fixed height
   survives that — it would just move the deficit somewhere else. */
#view-payment .slider,
#view-payment .slider-hint { flex-shrink: 0; }

@media (max-width: 900px) {
  #view-payment .sheet {
    height: auto; width: 100%; max-width: 460px; min-height: 0;
  }
  #view-payment .pay-lab { min-height: 0; }
  /* Both auto margins exist to push brand and slider to opposite ends of a
     fixed-height box. In an auto-height column they resolve to 0 and read as
     missing spacing, so state it. */
  #view-payment .brand  { margin-bottom: 0; }
  #view-payment .slider { margin-top: 18px; }

  /* The row is in the flow at every width now (see .pay-lab-top), so a phone
     only needs the tighter top padding. */
  #view-payment .pay-lab { padding-top: calc(var(--nav-h, 64px) + 14px); }
}

/* The label stacked "Slide to confirm —" above "$0.00 today". Not a wrap —
   white-space: nowrap was set and honoured. `.slider-text` is display: grid, so
   the bare text node and the <b> became two separate grid items and the default
   row flow put one under the other. It went unnoticed while the slider was 15px
   tall and the label was clipped out of sight. Flex keeps them on one line. */
#view-payment .slider-text {
  display: flex; align-items: center; justify-content: center;
}

/* The knob arrow at --accent-d on white measures 2.92:1, just under the 3:1
   WCAG 1.4.11 floor for a graphic that carries meaning — and this one is the
   only indication of which way to drag. The dark end of the fill gradient is the
   same hue and clears it at 4.67:1. Scoped to the knob so the brand accent
   itself is unchanged. */
#view-payment .slider-knob { color: #0b7f98; }

/* ── The wordmark, everywhere it appears ────────────────────────────
   "Pedra" is a specific treatment — Montserrat 500, wide tracking — and "My" is
   the condensed face at 800 beside it. Two places rendered it with neither.

   The checkout markup is `My<span>Pedra</span>` rather than
   `My<span class="brand-accent">Pedra</span>`, so its wordmark inherited the
   condensed face and read as a different logo on the one screen where trusting
   the brand matters most. And `.brand-text` has no font of its own: the navbar
   only looks right because `.nav-brand` sets the face and weight and the span
   inherits them. `.footer-brand` sets neither, so the footer's "My" came out
   Barlow 400 lower-case. `.footer-logo .brand-text` does style it, but the
   footer markup uses `.footer-brand`.

   Stating both on the marks themselves rather than relying on an ancestor, so a
   wordmark is a wordmark wherever it is dropped. */
.brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#view-payment .brand-name > span,
#view-payment .card-logo > span {
  font-family: "Montserrat", var(--font-body), sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.92em;
  padding-left: 0.10em;
}
/* Those two keep their own colours: the sheet is white, so the light brand cyan
   fails contrast on it and a darker accent is the deliberate choice. --accent-d
   itself still only measures 2.92:1 there, though, so the wordmark on the
   checkout uses the same deeper teal as the knob arrow — 4.66:1, same hue. */
#view-payment .brand-name > span { color: #0b7f98; }

/* ---------- TOUCH TARGETS ----------
   These controls are sized for a cursor: the chat chips came out 28px tall,
   the exercise filter pills and theme buttons 31px, the chart controls 29px.
   Fine with a mouse, small under a fingertip — Apple and Android both put the
   floor at 44px, and a row of 28px chips is exactly where mis-taps happen.

   Gated on a coarse pointer so the desktop proportions are untouched: this is
   a fingertip problem, not a screen-width one, and a narrow desktop window is
   still driven by a cursor. Padding stays as authored — min-height does the
   work, so nothing reflows or changes shape, it only grows to a size a thumb
   can actually land on. */
@media (pointer: coarse) {
  .chip,
  .pill,
  .theme-btn,
  .chart-type-btn,
  .chart-period-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Square-ish icon buttons need the width too, not just the height. */
  .chart-type-btn { min-width: 44px; }
}