/* =============================================================================
   FinePointRehab — Public Site Design System (v2 redesign)
   Used by: index.html, about.html, faq.html, contact.html
   Game pages keep /css/game-shell.css; dashboard keeps /css/tokens.css stack.
   Theme: "Warm cosmos" — friendly, readable, playful-but-credible. The dark
   cosmic hero bridges visually into the dark game pages so launching a game
   no longer feels like leaving the site.
   ============================================================================= */

:root {
  /* Ink + surfaces (light, warm) */
  --ink: #18233a;
  --ink-soft: #4c5b74;
  --ink-faint: #7b89a1;
  --paper: #f5f8fd;
  --card: #ffffff;
  --border: #e3e9f3;
  --border-strong: #cdd7e6;

  /* Cosmic surfaces (dark, used by hero + strips) */
  --space-deep: #0d1330;
  --space-mid: #161e44;
  --space-text: #eef4ff;
  --space-text-soft: #b9c6e2;

  /* Brand */
  --brand-blue: #2563eb;
  --brand-aqua: #38bdf8;
  --brand-grad: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  --sun: #fbbf24;        /* streaks, highlights */
  --success: #10b981;

  /* Type */
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;   /* 17px — slightly larger base for readability */
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: clamp(2.4rem, 5.5vw, 3.4rem);

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem;

  /* Shape + elevation */
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgb(16 35 70 / 0.07);
  --shadow-md: 0 6px 18px rgb(16 35 70 / 0.09);
  --shadow-lg: 0 18px 40px rgb(16 35 70 / 0.14);

  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- Base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }

a { color: var(--brand-blue); }

img, svg { max-width: 100%; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

section { padding: var(--sp-16) 0; scroll-margin-top: calc(var(--header-h) + 12px); }

.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--sp-12); }
.section-header .kicker {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-blue);
  background: #e7f2ff;
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.section-header p { color: var(--ink-soft); font-size: var(--fs-lg); margin: 0; }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand .brand-dot {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--brand-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: nowrap; }
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s, background 0.2s;
}
.site-nav a:hover { color: var(--brand-blue); background: #eef5ff; }
.site-nav a.active { color: var(--brand-blue); }
.site-nav a.nav-cta {
  background: var(--brand-grad);
  color: #fff;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.site-nav a.nav-cta:hover { filter: brightness(1.07); color: #fff; }

/* Hide text links progressively on small screens; keep brand + Progress CTA */
@media (max-width: 720px) {
  .site-nav a.nav-optional { display: none; }
  .brand span.brand-name { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  .site-nav a.nav-mid { display: none; }
  .site-nav { gap: var(--sp-1); }
  .site-nav a.nav-cta { padding-inline: var(--sp-3); font-size: 0.9rem; }
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.18s var(--ease), box-shadow 0.18s, filter 0.18s;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 6px 16px rgb(37 99 235 / 0.32);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 24px rgb(37 99 235 / 0.4); }

.btn-sun {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #4a2c00;
  box-shadow: 0 6px 16px rgb(245 158 11 / 0.35);
}
.btn-sun:hover { transform: translateY(-2px); filter: brightness(1.04); }

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  color: var(--space-text);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.2); }

.btn-outline {
  background: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
}
.btn-outline:hover { background: var(--brand-blue); color: #fff; }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--space-text);
  background:
    radial-gradient(1000px 560px at 12% -10%, rgba(56, 189, 248, 0.28), transparent 55%),
    radial-gradient(900px 600px at 88% 10%, rgba(168, 85, 247, 0.25), transparent 55%),
    radial-gradient(700px 500px at 55% 110%, rgba(244, 114, 182, 0.18), transparent 60%),
    linear-gradient(180deg, #0c122e 0%, #131b42 55%, #101631 100%);
  padding: var(--sp-20) 0 calc(var(--sp-20) + 40px);
  text-align: center;
  margin-top: calc(-1 * (var(--header-h) + env(safe-area-inset-top, 0px)));
  padding-top: calc(var(--sp-20) + var(--header-h) + env(safe-area-inset-top, 0px));
}

.hero h1 {
  max-width: 820px;
  margin: 0 auto var(--sp-5);
  color: #fff;
}
.hero h1 .grad-word {
  background: linear-gradient(90deg, #5eead4, #38bdf8 45%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero .hero-sub {
  max-width: 680px;
  margin: 0 auto var(--sp-8);
  font-size: var(--fs-lg);
  color: var(--space-text-soft);
}

.hero-cta { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-6); }

.hero-trust {
  display: flex;
  gap: var(--sp-5);
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--space-text-soft);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-trust li { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Floating orbs — gentle, decorative, respect reduced motion */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.5px);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.5), rgba(125, 211, 252, 0.18) 45%, rgba(125, 211, 252, 0.05) 70%);
  border: 1px solid rgba(190, 230, 255, 0.25);
  animation: orb-float 11s ease-in-out infinite;
}
.orb.o2 { background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.45), rgba(196, 181, 253, 0.16) 45%, rgba(196, 181, 253, 0.04) 70%); border-color: rgba(216, 200, 255, 0.22); }
.orb.o3 { background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.4), rgba(249, 168, 212, 0.14) 45%, rgba(249, 168, 212, 0.04) 70%); border-color: rgba(255, 200, 228, 0.2); }

@keyframes orb-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-26px) translateX(10px); }
}

/* Curved seam from hero into page */
.hero-curve {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 70px;
  pointer-events: none;
}
.hero-curve svg { display: block; width: 100%; height: 100%; }
.hero-curve path { fill: var(--paper); }

/* ------------------------------------------------------- Progress strip */
.progress-strip {
  margin: -56px auto var(--sp-4);
  position: relative;
  z-index: 5;
}
.progress-card {
  background: linear-gradient(135deg, #141b3f 0%, #1c2752 100%);
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: var(--space-text);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.progress-card .pc-level { display: flex; align-items: center; gap: var(--sp-4); min-width: 230px; flex: 1 1 260px; }
.pc-level-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: #fff;
  box-shadow: 0 4px 14px rgb(56 189 248 / 0.45);
  flex-shrink: 0;
}
.pc-level-info { flex: 1; min-width: 0; }
.pc-level-title { font-weight: 800; margin: 0 0 2px; }
.pc-xp-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.pc-xp-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #5eead4, #38bdf8);
  transition: width 0.8s var(--ease);
}
.pc-xp-label { font-size: 0.78rem; color: var(--space-text-soft); margin-top: 4px; }

.pc-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.pc-stat { text-align: center; min-width: 64px; }
.pc-stat .num { font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.pc-stat .num .flame { font-size: 1.2rem; }
.pc-stat .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--space-text-soft); font-weight: 700; }

.pc-challenge {
  flex: 1 1 240px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
}
.pc-challenge .pc-ch-title { font-weight: 800; color: #fcd34d; display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.pc-challenge .pc-ch-text { color: var(--space-text-soft); }
.pc-challenge .pc-ch-text strong { color: var(--space-text); }
.pc-challenge.done { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.45); }
.pc-challenge.done .pc-ch-title { color: #6ee7b7; }

/* ------------------------------------------------------- Exercise cards */
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.exercise-card {
  --ex-a: #38bdf8;
  --ex-b: #2563eb;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s, border-color 0.22s;
  overflow: hidden;
}
.exercise-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ex-a), var(--ex-b));
}
.exercise-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--ex-a) 55%, var(--border));
}

.ex-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.ex-icon {
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--ex-a), var(--ex-b));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ex-b) 35%, transparent);
}
.ex-title { font-size: var(--fs-xl); font-weight: 800; margin: 0; }
.ex-best {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
  margin-top: 2px;
}
.ex-best.has-best { color: #b45309; }

.ex-desc { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 var(--sp-4); flex-grow: 1; }

.ex-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chip {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ex-a) 14%, #fff);
  color: color-mix(in srgb, var(--ex-b) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--ex-a) 35%, #fff);
}

.ex-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.btn-play {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--ex-a), var(--ex-b));
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.18s var(--ease), filter 0.18s, box-shadow 0.18s;
}
.btn-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ex-b) 40%, transparent);
}
.btn-play .play-tri { font-size: 0.8rem; }

/* ------------------------------------------------------- How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-6);
  counter-reset: step;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  position: relative;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.step-num {
  width: 44px; height: 44px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgb(37 99 235 / 0.3);
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }

/* ------------------------------------------------------- Feature tiles */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-5);
}
.feature {
  display: flex;
  gap: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.feature-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.feature h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.feature p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------- CTA band */
.cta-band {
  background:
    radial-gradient(700px 400px at 80% 20%, rgba(168, 85, 247, 0.25), transparent 60%),
    radial-gradient(600px 380px at 15% 80%, rgba(56, 189, 248, 0.3), transparent 60%),
    linear-gradient(135deg, #101631, #1b2350);
  border-radius: var(--r-xl);
  color: var(--space-text);
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--space-text-soft); max-width: 560px; margin: 0 auto var(--sp-6); }

/* ------------------------------------------------------- Content pages */
.page-hero {
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(56, 189, 248, 0.25), transparent 55%),
    radial-gradient(700px 400px at 85% 30%, rgba(168, 85, 247, 0.2), transparent 55%),
    linear-gradient(180deg, #0c122e, #141b3f);
  color: #fff;
  text-align: center;
  padding: var(--sp-16) 0;
  margin-top: calc(-1 * (var(--header-h) + env(safe-area-inset-top, 0px)));
  padding-top: calc(var(--sp-16) + var(--header-h) + env(safe-area-inset-top, 0px));
}
.page-hero p { color: var(--space-text-soft); max-width: 640px; margin: 0 auto; font-size: var(--fs-lg); }

.content-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-6);
}
.content-card h2 { font-size: var(--fs-2xl); }
.content-card h3 { font-size: var(--fs-lg); }
.content-narrow { max-width: 820px; margin: 0 auto; }

/* FAQ accordion */
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 800;
  padding: var(--sp-5) var(--sp-6);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-blue);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 var(--sp-6) var(--sp-5); color: var(--ink-soft); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Footer */
.site-footer {
  background: #0d1330;
  color: var(--space-text-soft);
  padding: var(--sp-12) 0 var(--sp-8);
  margin-top: var(--sp-20);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: var(--space-text-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------- Accessibility */
.visually-hidden-focusable {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 2000;
  background: var(--brand-blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 800;
  text-decoration: none;
  transition: top 0.2s;
}
.visually-hidden-focusable:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

:focus-visible {
  outline: 3px solid #7aa5ff;
  outline-offset: 2px;
  border-radius: 4px;
}
.hero :focus-visible, .progress-card :focus-visible, .cta-band :focus-visible, .page-hero :focus-visible {
  outline-color: #fcd34d;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root { --border: #5b677d; --border-strong: #3a4558; }
}

@media (forced-colors: active) {
  .exercise-card::before, .pc-xp-fill { forced-color-adjust: none; }
}

/* ------------------------------------------------------- Small screens */
@media (max-width: 640px) {
  :root { --fs-3xl: 1.85rem; }
  section { padding: var(--sp-12) 0; }
  .hero { padding-bottom: calc(var(--sp-16) + 40px); }
  .progress-card { padding: var(--sp-4); gap: var(--sp-4); }
  .pc-stats { gap: var(--sp-4); width: 100%; justify-content: space-around; }
  .exercise-grid { grid-template-columns: 1fr; }
}