:root{
  --primary:#292524; --primary-active:#0c0a09; --ink:#0c0a09;
  --body:#4e4e4e; --body-strong:#292524; --muted:#777169; --muted-soft:#a8a29e;
  --hairline:#e7e5e4; --hairline-soft:#f0efed; --hairline-strong:#d6d3d1;
  --canvas:#f5f5f5; --canvas-soft:#fafafa; --surface-card:#ffffff; --surface-strong:#f0efed;
  --surface-dark:#0c0a09; --on-primary:#ffffff; --on-dark:#ffffff;
  --g-mint:#a7e5d3; --g-peach:#f4c5a8; --g-lavender:#c8b8e0; --g-sky:#a8c8e8; --g-rose:#e8b8c4;
  --error:#dc2626; --success:#16a34a; --warn:#d97706;
  --serif:'EB Garamond','Times New Roman',serif;
  --sans:'Inter',sans-serif;
  --r-md:8px; --r-lg:12px; --r-xl:16px; --r-xxl:24px; --r-pill:9999px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--canvas); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
.container{max-width:1200px; margin:0 auto; padding:0 24px}

/* Type */
.display-mega{font-family:var(--serif); font-weight:400; font-size:64px; line-height:1.05; letter-spacing:-1.5px}
.display-lg{font-family:var(--serif); font-weight:400; font-size:36px; line-height:1.17; letter-spacing:-0.36px}
.display-sm{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2}
.title-md{font-family:var(--sans); font-weight:500; font-size:20px; line-height:1.35}
.body-md{font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.5; letter-spacing:.16px}
.body-sm{font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.47; letter-spacing:.15px}
.muted{color:var(--muted)}
.caption-up{font-family:var(--sans); font-weight:600; font-size:12px; line-height:1.4; letter-spacing:.96px; text-transform:uppercase; color:var(--muted)}

/* Orbs */
.orb{position:fixed; border-radius:50%; filter:blur(70px); opacity:.55; z-index:0; pointer-events:none}
.orb--mint{width:420px;height:420px;background:radial-gradient(circle,var(--g-mint),transparent 70%);top:-120px;right:-80px}
.orb--peach{width:380px;height:380px;background:radial-gradient(circle,var(--g-peach),transparent 70%);top:640px;left:-140px}
.orb--lavender{width:460px;height:460px;background:radial-gradient(circle,var(--g-lavender),transparent 70%);bottom:200px;right:-120px}

/* Layering of content above orbs */
.top-nav,.hero,.analyzer,.params,.how,.cta-band,.footer,.ad-wrap{position:relative; z-index:1}

/* Nav */
.top-nav{height:64px; display:flex; align-items:center; border-bottom:1px solid var(--hairline); background:rgba(245,245,245,.8); backdrop-filter:blur(10px); position:sticky; top:0; z-index:50}
.nav-inner{display:flex; align-items:center; justify-content:space-between; width:100%}
.wordmark{font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink); text-decoration:none; letter-spacing:-.3px}
.nav-links{display:flex; gap:28px}
.nav-links a{font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; opacity:.85}
.nav-links a:hover{opacity:1}

/* Buttons */
.btn{font-family:var(--sans); font-size:15px; font-weight:500; border-radius:var(--r-pill); cursor:pointer; border:1px solid transparent; padding:10px 20px; height:40px; display:inline-flex; align-items:center; justify-content:center; transition:.15s; text-decoration:none; white-space:nowrap}
.btn--primary{background:var(--primary); color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-active)}
.btn--outline{background:transparent; color:var(--ink); border:1px solid var(--hairline-strong)}
.btn--outline:hover{border-color:var(--ink)}
.btn--sm{height:36px; padding:8px 14px; font-size:14px}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* App page layout */
.app-body{padding-bottom:env(safe-area-inset-bottom)}
.app-main{padding:24px 24px 32px}
.app-head{margin-bottom:20px}
.app-head .display-sm{margin-bottom:4px}

/* Hero */
.hero{padding:80px 24px 56px; text-align:center; display:flex; flex-direction:column; align-items:center}
.badge{display:inline-block; background:var(--surface-strong); color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.96px; text-transform:uppercase; border-radius:var(--r-pill); padding:5px 12px; margin-bottom:24px}
.hero-sub{max-width:620px; color:var(--body); margin:24px auto 0}
.hero-cta{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; justify-content:center}

/* Ads */
.ad-wrap{margin:40px auto; text-align:center; min-height:90px; position:relative}
.ad-placeholder{border:1px dashed var(--hairline-strong); border-radius:var(--r-lg); color:var(--muted-soft); font-size:13px; letter-spacing:.5px; padding:28px; background:var(--canvas-soft)}
.adsbygoogle{display:block}
.adsbygoogle:not([data-ad-status="filled"]) + .ad-placeholder{display:block}

/* Analyzer */
.analyzer{padding:24px 24px 16px}
.analyzer-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:24px}

.cam-card{background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:16px; box-shadow:0 4px 16px rgba(0,0,0,.04)}
.cam-stage{position:relative; width:100%; aspect-ratio:4/3; background:#0c0a09; border-radius:var(--r-lg); overflow:hidden; display:flex; align-items:center; justify-content:center}
#video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
#overlay{position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1)}
.cam-empty,.cam-loading{position:relative; z-index:2; text-align:center; color:var(--on-dark); padding:24px; display:flex; flex-direction:column; align-items:center; gap:12px}
.cam-empty .muted,.cam-loading p{color:var(--muted-soft); max-width:340px}
.cam-empty .display-sm{color:#fff}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.cam-controls{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted-soft);margin-left:auto}
.status-dot.on{background:var(--success)}
.status-dot.err{background:var(--error)}

/* Score */
.score-col{display:flex; flex-direction:column; gap:16px}
.score-card{background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:24px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.04)}
.score-ring{position:relative; width:160px; height:160px; margin:16px auto 8px}
.score-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--hairline); stroke-width:8}
.ring-fg{fill:none; stroke:var(--success); stroke-width:8; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset .4s, stroke .4s}
.score-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:48px; font-weight:400}

.metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.metric{background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:16px}
.metric-head{display:flex; justify-content:space-between; align-items:baseline}
.metric-name{font-size:15px; font-weight:500}
.metric-val{font-family:var(--serif); font-size:22px}
.metric-bar{height:6px; background:var(--hairline); border-radius:var(--r-pill); margin:10px 0 8px; overflow:hidden}
.metric-fill{height:100%; width:0; background:var(--success); border-radius:var(--r-pill); transition:width .4s, background .4s}
.metric-note{font-size:13px; color:var(--muted)}
.metric.warn .metric-fill{background:var(--warn)}
.metric.bad .metric-fill{background:var(--error)}
.metric.warn .metric-val{color:var(--warn)}
.metric.bad .metric-val{color:var(--error)}

.advice-card{background:var(--surface-dark); color:var(--on-dark); border-radius:var(--r-xl); padding:24px}
.advice-card .caption-up{color:var(--muted-soft)}
.advice-card .body-md{margin-top:8px}

/* Params / How */
.params,.how{padding:64px 24px}
.params-intro{max-width:640px; margin-top:12px}
.param-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px}
.feature-card{background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:24px}
.feature-card h3{margin-bottom:8px}
.how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px}
.how-step{padding:8px 0}
.how-step .caption-up{display:block; margin-bottom:8px}

/* CTA + footer */
.cta-band{padding:96px 24px; text-align:center}
.cta-band .btn{margin-top:24px}
.footer{border-top:1px solid var(--hairline); padding:48px 24px; margin-top:48px}
.footer-inner{display:flex; flex-direction:column; gap:8px; align-items:flex-start}

/* Responsive */
@media (max-width:900px){
  .analyzer-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container{padding:0 16px}
  .display-mega{font-size:32px; letter-spacing:-.6px; line-height:1.1}
  .display-lg{font-size:26px}
  .display-sm{font-size:21px}
  .nav-links{display:none}
  .wordmark{font-size:19px}
  .top-nav{height:56px}
  .hero{padding:40px 16px 32px}
  .badge{margin-bottom:16px}
  .hero-sub{font-size:15px}
  .hero-cta{flex-direction:column; width:100%}
  .hero-cta .btn{width:100%}
  .param-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .params,.how{padding:40px 16px}
  .cta-band{padding:56px 16px}
  .cta-band .btn{width:100%; max-width:320px}
  /* App page */
  .app-main{padding:16px 16px 24px}
  .cam-card{padding:12px}
  .cam-stage{aspect-ratio:3/4}
  .cam-controls{gap:8px}
  .cam-controls .btn{flex:1}
  .metrics{grid-template-columns:1fr}
  .score-ring{width:130px; height:130px}
  .score-num{font-size:40px}
  .ad-wrap{margin:24px auto}
  .footer-inner{align-items:center; text-align:center}
}

/* ===== Logo + lang ===== */
.wordmark{display:inline-flex; align-items:center; gap:9px}
.logo-mark{width:24px; height:24px; flex:0 0 auto}
.nav-right{display:flex; align-items:center; gap:12px}
.lang-btn{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.5px; background:var(--surface-strong); color:var(--ink); border:none; border-radius:var(--r-pill); padding:7px 12px; cursor:pointer}
.lang-btn:hover{background:var(--hairline-strong)}
.novato{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; margin-top:4px}
.novato-logo{width:20px; height:20px; border-radius:4px; display:block}
.novato:hover{opacity:.7}

/* ===== Stepper ===== */
.stepper{display:flex; gap:8px; list-style:none; margin:0 0 20px; padding:0}
.step{flex:1; display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--surface-card); font-size:14px; color:var(--muted)}
.step-dot{width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--surface-strong); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600}
.step.active{border-color:var(--ink); color:var(--ink)}
.step.active .step-dot{background:var(--ink); color:#fff}
.step.done .step-dot{background:var(--success); color:#fff}
.step.done{color:var(--ink)}

/* ===== Capture phase ===== */
.capture-phase{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start}
.cam-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3}
.cam-count{position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:rgba(12,10,9,.45)}
.cam-count span{font-family:var(--serif); font-size:96px; color:#fff}
.capture-side{display:flex; flex-direction:column; gap:16px}
.instr{font-family:var(--sans); font-size:17px; line-height:1.5; color:var(--ink); background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:20px}
.capture-controls{display:flex; gap:12px; flex-wrap:wrap}
.capture-controls .btn{flex:1; min-width:120px}
.capture-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* ===== Analyzing ===== */
.analyzing-phase{display:flex; flex-direction:column; align-items:center; gap:20px; padding:80px 0; text-align:center}
.spinner--dark{width:44px; height:44px; border:3px solid var(--hairline); border-top-color:var(--ink)}

/* ===== Results ===== */
.results-top{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px}
.results-grid{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; margin-bottom:40px}
.sec-title{margin:32px 0 16px}
.exercise-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.exercise-card{background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:18px}
.ex-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px}
.ex-name{font-size:16px; font-weight:500}
.ex-dose{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink); background:var(--surface-strong); border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap}
.ex-desc{font-size:14px; color:var(--body); line-height:1.5}
.schedule{margin-top:16px; border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; background:var(--surface-card)}
.sched-row{display:grid; grid-template-columns:120px 1fr; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hairline-soft)}
.sched-row:last-child{border-bottom:none}
.sched-day{font-weight:600; font-size:14px; color:var(--ink)}
.sched-ex{font-size:14px; color:var(--body)}

/* ===== Mobile (new components) ===== */
@media (max-width:760px){
  .capture-phase,.results-grid{grid-template-columns:1fr}
  .exercise-list{grid-template-columns:1fr}
  .results-grid .score-card{max-width:280px; margin:0 auto}
}
@media (max-width:640px){
  .stepper{gap:6px}
  .step{flex-direction:column; gap:4px; padding:8px 6px; text-align:center; font-size:12px}
  .step-label{font-size:11px}
  .instr{font-size:15px; padding:16px}
  .cam-count span{font-size:72px}
  .sched-row{grid-template-columns:80px 1fr; padding:12px 14px}
  .results-top{flex-direction:column; align-items:flex-start; gap:10px}
  .nav-right{gap:8px}
}

/* ===== Auto-capture toggles ===== */
.capture-toggles{display:flex; gap:10px; flex-wrap:wrap}
.toggle-chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink); background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:var(--r-pill); padding:7px 14px; cursor:pointer}
.toggle-chip .tg-dot{width:8px; height:8px; border-radius:50%; background:var(--success)}
.toggle-chip.off{color:var(--muted); background:var(--surface-strong)}
.toggle-chip.off .tg-dot{background:var(--muted-soft)}
.auto-hint{font-size:13px; color:var(--muted); line-height:1.5}
.sched-row.sched-daily{background:var(--surface-strong)}

/* ============ LANDING DYNAMIC ============ */
/* reveal on scroll */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rd,0s)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* orbs drift */
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-26px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-34px)}}
.orb--mint{animation:drift1 18s ease-in-out infinite}
.orb--peach{animation:drift2 22s ease-in-out infinite}
.orb--lavender{animation:drift3 20s ease-in-out infinite}

/* hero split */
.hero--split{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; text-align:left; padding:72px 24px 64px}
.hero--split .badge{margin-bottom:20px}
.hero--split .hero-sub{margin:20px 0 0}
.hero--split .hero-cta{justify-content:flex-start}
.hero-bullets{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.hero-bullets li{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--body)}
.hero-bullets .tick{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--g-mint); color:#0c5; font-size:12px; font-weight:700; color:#0c0a09; flex:0 0 auto}

/* pulse CTA */
.btn--pulse{position:relative}
.btn--pulse::after{content:""; position:absolute; inset:0; border-radius:var(--r-pill); box-shadow:0 0 0 0 rgba(12,10,9,.35); animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(12,10,9,.28)}70%{box-shadow:0 0 0 14px rgba(12,10,9,0)}100%{box-shadow:0 0 0 0 rgba(12,10,9,0)}}
@media (prefers-reduced-motion: reduce){ .btn--pulse::after{animation:none} }
.btn--primary:hover{transform:translateY(-1px)}

/* hero demo card */
.hero-demo{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.06)}
.demo-cam{position:relative; background:linear-gradient(160deg,#1c1917,#0c0a09); aspect-ratio:3/3.4; overflow:hidden}
.pose-svg{position:absolute; inset:0; width:100%; height:100%}
.pose-svg .bone{stroke:rgba(167,229,211,.55); stroke-width:2.5; stroke-linecap:round}
.pose-svg .joint{fill:#fff; animation:jpulse 2.4s ease-in-out infinite; animation-delay:var(--d,0s)}
.pose-svg .joint.head{fill:none; stroke:#fff; stroke-width:3}
@keyframes jpulse{0%,100%{opacity:.55; transform:scale(.9)}50%{opacity:1; transform:scale(1.15)}}
.pose-svg .joint{transform-box:fill-box; transform-origin:center}
.scanline{position:absolute; left:0; right:0; height:28px; background:linear-gradient(to bottom,transparent,rgba(167,229,211,.28),transparent); animation:scan 3s ease-in-out infinite}
@keyframes scan{0%{top:-30px}100%{top:100%}}
.demo-tag{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:7px; background:rgba(12,10,9,.6); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:600; letter-spacing:.4px; padding:5px 10px; border-radius:var(--r-pill)}
.demo-tag .blip{width:7px; height:7px; border-radius:50%; background:#16a34a; animation:blip 1.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.demo-panel{padding:22px; display:flex; flex-direction:column; gap:18px; justify-content:center}
.demo-ring{position:relative; width:104px; height:104px; margin:0 auto}
.demo-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.demo-ring .ring-fg{stroke:var(--success); stroke-dashoffset:326.7; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.demo-ring-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:34px}
.demo-bars{display:flex; flex-direction:column; gap:10px}
.demo-bar{display:grid; grid-template-columns:54px 1fr; align-items:center; gap:10px; font-size:13px; color:var(--body)}
.demo-bar i{height:7px; border-radius:var(--r-pill); background:var(--hairline); position:relative; overflow:hidden}
.demo-bar i::after{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--c); border-radius:var(--r-pill); transition:width 1s ease .2s}
.demo-bar i.fill::after{width:var(--w)}

/* stats strip */
.stats-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:8px 24px 16px; margin-bottom:24px}
.stat{text-align:center; padding:20px 12px; border:1px solid var(--hairline); border-radius:var(--r-xl); background:var(--surface-card)}
.stat-num{display:block; font-family:var(--serif); font-size:44px; line-height:1; color:var(--ink)}
.stat-lab{display:block; margin-top:8px; font-size:13px; color:var(--muted)}

/* card hover lift */
.feature-card{transition:transform .2s, box-shadow .2s}
.feature-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06)}
.how-step{transition:transform .2s}
.how-step:hover{transform:translateY(-3px)}
.cta-sub{margin:12px 0 0}

@media (max-width:860px){
  .hero--split{grid-template-columns:1fr; gap:32px; text-align:center; padding:48px 20px 40px}
  .hero--split .hero-cta{justify-content:center}
  .hero-bullets{align-items:center}
  .hero-demo{max-width:420px; margin:0 auto; width:100%}
  .stats-strip{grid-template-columns:repeat(2,1fr); gap:14px}
}
@media (max-width:420px){
  .stat-num{font-size:36px}
}

/* ===== Hold-still progress bar (auto-capture) ===== */
.hold-bar{position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(255,255,255,.12); z-index:3}
.hold-bar i{display:block; height:100%; width:0; background:var(--g-mint); transition:width .08s linear}

/* ===== Exercise animations ===== */
.ex-anim-wrap{margin:-2px -2px 12px; border-radius:var(--r-md); overflow:hidden; background:var(--canvas-soft); border:1px solid var(--hairline-soft)}
.exa{display:block; width:100%; height:118px}
.exa .exb,.exa .exh,.exa .exp{stroke:var(--ink); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.exa g{transform-box:fill-box}
@media (prefers-reduced-motion: reduce){ .exa *{animation:none!important} }
.exg-head{animation:a-neckback 2s ease-in-out infinite}
@keyframes a-neckback{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}
.exg-tilt{animation:a-tilt 2.2s ease-in-out infinite}
@keyframes a-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-20deg)}}
.exg-arms{animation:a-arms 2s ease-in-out infinite}
@keyframes a-arms{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.exg-scap{transform-origin:60px 48px; animation:a-scap 1.8s ease-in-out infinite}
@keyframes a-scap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.72)}}
.exg-open{animation:a-open 2.2s ease-in-out infinite}
@keyframes a-open{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.3)}}
.exg-spine{transform-origin:60px 80px; animation:a-spine 2.4s ease-in-out infinite}
@keyframes a-spine{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55) translateY(8px)}}
.exg-plank{animation:a-plank 2s ease-in-out infinite}
@keyframes a-plank{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.exg-hip{animation:a-hip 2.2s ease-in-out infinite}
@keyframes a-hip{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.exg-leg1{animation:a-l1 1.4s ease-in-out infinite}
.exg-leg2{animation:a-l2 1.4s ease-in-out infinite}
@keyframes a-l1{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes a-l2{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}

/* ===== Exercise cards (enhanced) ===== */
.exercise-card{position:relative; display:flex; flex-direction:column}
.ex-badge{position:absolute; top:8px; right:8px; background:var(--ink); color:#fff; font-size:11px; font-weight:600; letter-spacing:.4px; padding:3px 9px; border-radius:var(--r-pill)}
.exercise-card.sel{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.ex-benefits{margin:10px 0 12px}
.ex-blab{font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted)}
.ex-benefits ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.ex-benefits li{position:relative; padding-left:18px; font-size:13px; color:var(--body)}
.ex-benefits li::before{content:"✓"; position:absolute; left:0; color:var(--success); font-weight:700}
.ex-pick{margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink); background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:var(--r-pill); padding:7px 14px; cursor:pointer}
.ex-pick .exp-dot{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--muted-soft)}
.ex-pick.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.ex-pick.on .exp-dot{background:var(--g-mint); border-color:var(--g-mint)}

/* ===== Exercise toolbar ===== */
.ex-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.ex-selcount{font-size:13px; color:var(--muted); margin-right:auto}

/* ===== Detail cards (causes) ===== */
.details{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:8px}
.detail-card{background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:20px}
.detail-name{font-family:var(--sans); font-size:16px; font-weight:600; margin-bottom:12px}
.detail-row{margin-bottom:10px}
.detail-row:last-child{margin-bottom:0}
.detail-lab{display:block; font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.detail-row p{font-size:14px; color:var(--body); line-height:1.5}

@media (max-width:760px){
  .details{grid-template-columns:1fr}
  .ex-toolbar{gap:8px}
  .ex-selcount{width:100%; margin-right:0}
}