:root {
  --wb-primary:#273224;
  --wb-primary-dark:#1B2318;
  --wb-primary-soft:#E8ECE3;
  --wb-bg:#F7F6F1;
  --wb-surface:#ffffff;
  --wb-text:#242E38;
  --wb-muted:#5F6A62;
  --wb-border:#E3E3DC;
  --wb-hairline:rgba(36,46,56,.1);
  --wb-amber:#9A6418;
  --wb-amber-soft:#F6EEDF;
  --wb-red:#B42318;
  --wb-red-soft:#FBECEA;
  --wb-work:#273224;
  --wb-rest:#5E7480;
  --wb-r:10px;
  --wb-r-lg:16px;
  --wb-shadow:0 10px 30px -16px rgba(27,35,24,.28);
  --wb-ease:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; }
html { background:var(--wb-bg); }
body {
  margin:0; min-height:100vh; color:var(--wb-text); background:var(--wb-bg);
  font-family:var(--fs-font);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(60rem 30rem at 85% -10%, rgba(39,50,36,.10), transparent 60%),
                   radial-gradient(50rem 30rem at -10% 10%, rgba(170,152,136,.06), transparent 60%);
  background-attachment:fixed;
}
a { color:var(--wb-primary-dark); }
button, input, select { font:inherit; color:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid rgba(39,50,36,.35); outline-offset:2px; }

.wb-header {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px;
  padding:12px 28px; min-height:68px; background:var(--fs-forest); color:var(--fs-cream);
  border-bottom:1px solid rgba(0,0,0,.28); box-shadow:0 12px 30px -24px rgba(27,35,24,.7);
}
.wb-header :focus-visible { outline-color:rgba(238,235,225,.65); }
.wb-brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.wb-brand .fs-brand__sub { color:var(--fs-sage); opacity:1; }
.wb-tabs { display:flex; gap:4px; padding:4px; border-radius:12px; background:rgba(238,235,225,.07); border:1px solid rgba(238,235,225,.12); }
.wb-tabs a { padding:8px 14px; border-radius:9px; text-decoration:none; color:rgba(238,235,225,.78); font-weight:600; font-size:14px; white-space:nowrap; }
.wb-tabs a:hover { color:#fff; background:rgba(238,235,225,.08); }
.wb-tabs a[aria-current="page"] { background:var(--fs-cream); color:var(--fs-forest); box-shadow:0 2px 8px -4px rgba(0,0,0,.4); }
.wb-header .wb-btn--ghost { background:transparent; color:var(--fs-cream); border-color:rgba(238,235,225,.3); white-space:nowrap; }
.wb-header .wb-btn--ghost:hover { background:rgba(238,235,225,.12); }
.wb-header__spacer { flex:1; }
.wb-user { font-size:13px; color:rgba(238,235,225,.75); white-space:nowrap; }
.wb-logout { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 14px 0 11px; border:0; border-radius:8px;
  background:var(--fs-cream); color:var(--fs-forest); font:inherit; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; }
.wb-logout:hover { background:#fff; }
.wb-logout svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wb-main { max-width:1120px; margin:0 auto; padding:28px 24px 120px; outline:none; }
.wb-loading { color:var(--wb-muted); }

.wb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px;
  border-radius:12px; border:1px solid transparent; background:var(--wb-primary); color:#fff; font-weight:700;
  font-size:14px; text-decoration:none; cursor:pointer; transition:transform .15s var(--wb-ease), background .15s; }
.wb-btn:hover { background:var(--wb-primary-dark); }
.wb-btn:active { transform:scale(.98); }
.wb-btn[disabled] { opacity:.55; cursor:not-allowed; }
.wb-btn--ghost { background:#fff; color:var(--wb-text); border-color:var(--wb-border); }
.wb-btn--ghost:hover { background:var(--wb-primary-soft); }
.wb-btn--small { min-height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.wb-btn--link { background:transparent; color:var(--wb-primary-dark); padding:0 6px; min-height:30px; }
.wb-btn--link:hover { background:var(--wb-primary-soft); }

.wb-eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--wb-primary-dark); }
.wb-h1 { font-size:clamp(26px,4vw,38px); line-height:1.1; margin:8px 0 10px; letter-spacing:-.02em; }
.wb-h2 { font-size:22px; margin:0 0 6px; letter-spacing:-.01em; }
.wb-lead { font-size:16px; color:var(--wb-muted); max-width:720px; line-height:1.55; margin:0; }
.wb-card { background:rgba(255,255,255,.86); border:1px solid #fff; border-radius:var(--wb-r-lg); box-shadow:var(--wb-shadow), inset 0 0 0 1px var(--wb-hairline); }
.wb-grid { display:grid; gap:16px; }
.wb-grid--2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.wb-grid--3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.wb-section { margin-top:28px; }
.wb-muted { color:var(--wb-muted); }
.wb-small { font-size:13px; }

.wb-hero { padding:28px; display:grid; gap:18px; }
.wb-start { padding:22px; display:flex; flex-direction:column; gap:10px; text-align:left; cursor:pointer; border:0; }
.wb-start:hover { transform:translateY(-2px); }
.wb-start { transition:transform .2s var(--wb-ease); }
.wb-start strong { font-size:18px; }
.wb-stats { display:flex; flex-wrap:wrap; gap:10px; }
.wb-stat { padding:10px 14px; border-radius:12px; background:var(--wb-primary-soft); font-size:13px; }
.wb-stat b { font-size:18px; display:block; }

.wb-note { padding:12px 14px; border-radius:12px; background:var(--wb-amber-soft); color:#7c3e04; font-size:14px; line-height:1.45; }
.wb-note--info { background:var(--wb-primary-soft); color:#1B2318; }
.wb-note--error { background:var(--wb-red-soft); color:var(--wb-red); }
.wb-notes { display:grid; gap:8px; margin-top:14px; }

/* Question flow */
.wb-flow { max-width:820px; margin:0 auto; }
.wb-progress { display:flex; gap:6px; margin:4px 0 22px; }
.wb-progress span { flex:1; height:5px; border-radius:99px; background:rgba(25,27,23,.08); }
.wb-progress span.on { background:var(--wb-primary); }
.wb-question { padding:26px; }
.wb-question h2 { font-size:clamp(20px,3vw,26px); margin:0 0 6px; letter-spacing:-.01em; }
.wb-options { display:grid; gap:10px; margin-top:18px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.wb-option { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:14px; text-align:left;
  background:#fff; border:1.5px solid var(--wb-border); cursor:pointer; transition:border-color .15s, background .15s; min-height:58px; }
.wb-option:hover { border-color:#BCC3B3; }
.wb-option[aria-pressed="true"] { border-color:var(--wb-primary); background:var(--wb-primary-soft); }
.wb-option strong { font-size:15px; }
.wb-option span { font-size:13px; color:var(--wb-muted); line-height:1.35; }
.wb-option em { font-style:normal; font-size:12px; color:var(--wb-amber); font-weight:600; }
.wb-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wb-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:99px; background:#fff;
  border:1.5px solid var(--wb-border); cursor:pointer; font-size:14px; font-weight:600; }
.wb-chip small { font-weight:500; color:var(--wb-muted); font-size:12px; }
.wb-chip[aria-pressed="true"] { border-color:var(--wb-primary); background:var(--wb-primary-soft); }
.wb-chip--missing small { color:var(--wb-amber); }
.wb-field { display:grid; gap:6px; margin-top:18px; }
.wb-field label { font-weight:700; font-size:14px; }
.wb-input { width:100%; min-height:44px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--wb-border); background:#fff; }
.wb-input:focus { border-color:var(--wb-primary); outline:none; }
.wb-actions { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:22px; flex-wrap:wrap; }
.wb-subq { margin-top:22px; }
.wb-subq h3 { font-size:15px; margin:0; }
.wb-toggle { display:flex; align-items:center; gap:10px; margin-top:12px; font-weight:600; cursor:pointer; }
.wb-toggle input { width:20px; height:20px; accent-color:var(--wb-primary); }

/* Plan */
.wb-plan-head { padding:24px; display:grid; gap:12px; }
.wb-plan-actions { display:flex; gap:8px; flex-wrap:wrap; }
.wb-weeks { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; margin-top:20px; scrollbar-width:thin; }
.wb-week-tab { flex:none; padding:10px 14px; border-radius:12px; background:#fff; border:1.5px solid var(--wb-border); cursor:pointer; text-align:left; }
.wb-week-tab b { display:block; font-size:14px; }
.wb-week-tab span { font-size:12px; color:var(--wb-muted); }
.wb-week-tab[aria-selected="true"] { border-color:var(--wb-primary); background:var(--wb-primary-soft); }
.wb-week-focus { margin:6px 0 16px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.7); border:1px solid var(--wb-border); font-size:14px; }
.wb-sessions { display:grid; gap:16px; }
.wb-session { padding:18px; display:grid; gap:12px; }
.wb-session__top { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.wb-session__when { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wb-muted); }
.wb-session h3 { margin:2px 0 2px; font-size:19px; }
.wb-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:700; background:var(--wb-primary-soft); color:#1B2318; }
.wb-badge--class { background:#F5F7F8; color:#586F7B; }
.wb-badge--done { background:#ECF0E8; color:#3E4932; }
.wb-badge--warn { background:var(--wb-amber-soft); color:#92400e; }
.wb-meta { display:flex; flex-wrap:wrap; gap:6px; }
.wb-tag { padding:4px 9px; border-radius:8px; background:rgba(25,27,23,.05); font-size:12px; font-weight:600; color:var(--wb-muted); }
.wb-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.wb-thumb { flex:none; width:132px; display:grid; gap:4px; }
.wb-thumb img, .wb-thumb .wb-noimg { width:132px; height:74px; object-fit:cover; border-radius:10px; background:#E4E6E2; display:block; }
.wb-thumb span { font-size:12px; line-height:1.25; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wb-session__actions { display:flex; gap:8px; flex-wrap:wrap; }
.wb-detail { border-top:1px solid var(--wb-border); padding-top:12px; display:grid; gap:14px; }
.wb-block h4 { margin:0 0 8px; font-size:14px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.wb-block h4 small { font-weight:500; color:var(--wb-muted); }
.wb-ex { display:grid; grid-template-columns:96px 1fr auto; gap:12px; align-items:center; padding:8px; border-radius:12px; }
.wb-ex:hover { background:rgba(39,50,36,.05); }
.wb-ex img { width:96px; height:54px; object-fit:cover; border-radius:8px; background:#E4E6E2; }
.wb-ex b { font-size:14px; }
.wb-ex p { margin:2px 0 0; font-size:13px; color:var(--wb-muted); line-height:1.35; }
.wb-alts { grid-column:1 / -1; display:grid; gap:6px; padding:8px; border-radius:12px; background:var(--wb-primary-soft); }
.wb-alt { display:grid; grid-template-columns:80px 1fr auto; gap:10px; align-items:center; }
.wb-alt img { width:80px; height:45px; object-fit:cover; border-radius:6px; }
.wb-class { display:grid; grid-template-columns:200px 1fr; gap:14px; align-items:center; }
.wb-class img { width:200px; height:112px; object-fit:cover; border-radius:12px; background:#E4E6E2; }
.wb-principles { padding:20px; }
.wb-principles ol { margin:10px 0 0; padding-left:20px; display:grid; gap:10px; }
.wb-principles li p { margin:2px 0 0; font-size:12.5px; color:var(--wb-muted); }

/* Exercise check */
.wb-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0; }
.wb-filters .wb-input { width:auto; min-width:200px; flex:1; }
.wb-filters select.wb-input { flex:none; min-width:150px; }
.wb-checks { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.wb-checkcard { padding:12px; display:grid; gap:8px; }
.wb-checkcard img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; background:#E4E6E2; cursor:zoom-in; }
.wb-checkcard h4 { margin:0; font-size:15px; }
.wb-kv { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:12.5px; }
.wb-kv dt { color:var(--wb-muted); }
.wb-kv dd { margin:0; font-weight:600; }
.wb-mismatch { color:var(--wb-amber); }

/* Player shell (also used by the follow-along class view) */
.wb-player { position:fixed; inset:0; z-index:100; background:#0B100A; color:#fff; display:grid; grid-template-rows:auto 1fr auto; }
.wb-p-top { display:flex; align-items:center; gap:14px; padding:12px 18px; background:rgba(255,255,255,.04); }
.wb-p-top h2 { font-size:16px; margin:0; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-p-close { width:40px; height:40px; border-radius:12px; border:0; background:rgba(255,255,255,.1); color:#fff; font-size:20px; cursor:pointer; }
.wb-p-controls { display:flex; justify-content:center; align-items:center; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.04); flex-wrap:wrap; }
.wb-p-btn { min-width:48px; height:48px; padding:0 14px; border-radius:14px; border:0; background:rgba(255,255,255,.1); color:#fff; font-weight:700; cursor:pointer; }
.wb-p-btn:hover { background:rgba(255,255,255,.18); }
.wb-p-btn--main { background:var(--wb-primary); min-width:120px; }
.wb-p-done { display:grid; place-items:center; text-align:center; padding:30px; gap:14px; }
.wb-p-done h2 { font-size:34px; margin:0; }
.wb-p-class { width:100%; height:100%; background:#000; }

/* Timed workout player */
.wb-player > .pl { grid-row:1 / -1; }
.wb-player:has(> .pl) { overflow:hidden; overflow:clip; overscroll-behavior:contain; }
.pl {
  --tone:#B9CF96; --tone-rgb:185,207,150; --glass:rgba(14,19,13,.52); --line:rgba(255,255,255,.14);
  --stage-top:0px; position:relative; height:100%; overflow:hidden; overflow:clip; isolation:isolate; background:#0B100A;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; user-select:none;
}
.pl[data-tone="rest"] { --tone:#A9BEC6; --tone-rgb:169,190,198; }
.pl[data-tone="ready"] { --tone:#EEEBE1; --tone-rgb:238,235,225; }
.pl[data-tone="warm"] { --tone:#E3AE7E; --tone-rgb:227,174,126; }
.pl[data-tone="cool"] { --tone:#9CC7B4; --tone-rgb:156,199,180; }
.pl[data-tone="flow"] { --tone:#C3C8B2; --tone-rgb:195,200,178; }
.pl[data-tone="break"] { --tone:#CDBBAA; --tone-rgb:205,187,170; }
.pl-ambient { position:absolute; inset:-12%; z-index:-1; background:#0B100A center/cover no-repeat; filter:blur(70px) saturate(1.5) brightness(.42); transform:scale(1.1); transition:background-image .6s; }
.pl-ambient::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 100%, rgba(var(--tone-rgb),.22), transparent 70%); transition:background .6s; }
.pl-stage { position:absolute; inset:0; }
.pl-poster, .pl-v { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.pl-poster { opacity:.9; }
/* Laptop and desktop screens: the video fills the whole screen (a few percent trimmed at the edges, no bars).
   Very wide or near-square windows keep the full frame so heads and feet are never cut off. */
@media (min-aspect-ratio:29/20) and (max-aspect-ratio:21/10) {
  .pl-poster, .pl-v { object-fit:cover; object-position:50% 45%; }
}
.pl-v { opacity:0; transition:opacity .38s ease; }
/* Fitter Stock watermark: bottom-left beside the controls; on phones, the corner of the video. */
.pl-watermark { position:absolute; left:32px; bottom:calc(36px + env(safe-area-inset-bottom)); z-index:4; display:flex; align-items:center; gap:10px;
  pointer-events:none; color:#EEEBE1; opacity:.6; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.pl-watermark img { width:22px; height:28px; display:block; }
.pl-watermark span { font-size:10px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; }
.pl.is-done .pl-watermark { display:none; }
.pl-v.on { opacity:1; }
.pl.is-inter .pl-stage { filter:saturate(.75) brightness(.62); transition:filter .5s; }
.pl-stage { transition:filter .5s; }
.pl-spinner { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; animation:pl-spin .8s linear infinite; }
@keyframes pl-spin { to { transform:rotate(360deg); } }
.pl-scrim { position:absolute; left:0; right:0; pointer-events:none; }
.pl-scrim--top { top:0; height:190px; background:linear-gradient(rgba(0,0,0,.62), transparent); }
.pl-scrim--bottom { bottom:0; height:52%; background:linear-gradient(transparent, rgba(0,0,0,.45) 35%, rgba(0,0,0,.82)); }

.pl-top { position:absolute; top:max(16px, env(safe-area-inset-top)); left:24px; right:24px; display:flex; align-items:center; gap:14px; z-index:5; }
.pl-icon-btn, .pl-btn { display:inline-grid; place-items:center; border:0; color:#fff; cursor:pointer; background:transparent; transition:background .2s, transform .15s, opacity .2s, color .2s; }
.pl-icon-btn { width:44px; height:44px; border-radius:50%; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.pl-icon-btn:hover, .pl-btn:hover { background:rgba(255,255,255,.14); }
.pl-icon-btn:active, .pl-btn:active { transform:scale(.94); }
.pl-ic { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pl-ic--fill { fill:currentColor; stroke:none; }
.pl-title { flex:1; min-width:0; display:grid; gap:2px; }
.pl-title span { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tone); transition:color .4s; }
.pl-title strong { font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.92; }
.pl-clock { display:grid; justify-items:end; line-height:1.05; }
.pl-clock b { font-size:24px; font-weight:800; }
.pl-clock span { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; font-weight:700; }

.pl-track { position:absolute; top:calc(max(16px, env(safe-area-inset-top)) + 58px); left:24px; right:24px; display:flex; gap:6px; z-index:5; }
.pl-seg { position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.16); }
.pl-seg i { position:absolute; inset:0; border-radius:inherit; transform:scaleX(0); transform-origin:left; background:#B9CF96; box-shadow:0 0 12px rgba(185,207,150,.45); }
.pl-seg[data-tone="warm"] i { background:#E3AE7E; box-shadow:0 0 12px rgba(227,174,126,.45); }
.pl-seg[data-tone="cool"] i { background:#9CC7B4; box-shadow:0 0 12px rgba(156,199,180,.45); }
.pl-seg[data-tone="flow"] i { background:#C3C8B2; box-shadow:0 0 12px rgba(195,200,178,.45); }
.pl-seg span { position:absolute; top:12px; left:0; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.62; white-space:nowrap; }

.pl-upnext { position:absolute; right:24px; top:calc(max(16px, env(safe-area-inset-top)) + 96px); z-index:5; width:280px; display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center;
  padding:10px; border-radius:18px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); animation:pl-rise .45s var(--wb-ease); }
.pl-upnext img { width:96px; height:56px; object-fit:cover; border-radius:11px; }
.pl-upnext small { display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.pl-upnext b { font-size:14px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.pl-hud { position:absolute; left:32px; right:32px; bottom:calc(112px + env(safe-area-inset-bottom)); z-index:4; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; transition:opacity .35s, transform .45s var(--wb-ease); }
.pl.is-inter .pl-hud { opacity:0; transform:translateY(16px); pointer-events:none; }
.pl-info { min-width:0; max-width:760px; }
.pl-phase { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px; background:rgba(var(--tone-rgb),.18); color:var(--tone); border:1px solid rgba(var(--tone-rgb),.35);
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; transition:color .4s, background .4s, border-color .4s; }
.pl-phase::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:pl-blink 1.6s ease-in-out infinite; }
@keyframes pl-blink { 50% { opacity:.35; } }
.pl-name { margin:14px 0 10px; font-size:clamp(30px, 4.4vw, 64px); font-weight:800; line-height:1.02; letter-spacing:-.025em; text-shadow:0 4px 30px rgba(0,0,0,.45); animation:pl-rise .5s var(--wb-ease); }
.pl-cue { margin:0; font-size:clamp(14px, 1.25vw, 18px); line-height:1.45; color:rgba(255,255,255,.8); max-width:640px; }
.pl-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pl-chips span { padding:6px 12px; border-radius:99px; font-size:13px; font-weight:700; background:rgba(255,255,255,.1); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
@keyframes pl-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.pl-timer { position:relative; flex:none; width:clamp(150px, 15vw, 224px); aspect-ratio:1; }
.pl-timer svg { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.pl-ring-bg { fill:rgba(8,12,16,.42); stroke:rgba(255,255,255,.13); stroke-width:7; }
.pl-ring { fill:none; stroke:var(--tone); stroke-width:7; stroke-linecap:round; stroke-dasharray:100; filter:drop-shadow(0 0 10px rgba(var(--tone-rgb),.6)); transition:stroke .4s; }
.pl-count { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.pl-count b { font-size:clamp(50px, 5.6vw, 84px); font-weight:800; line-height:.95; letter-spacing:-.03em; }
.pl-count span { font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.6; margin-top:4px; }
.pl-timer.is-final .pl-count b { animation:pl-pulse 1s ease-in-out infinite; color:var(--tone); }
@keyframes pl-pulse { 0% { transform:scale(1); } 30% { transform:scale(1.14); } 100% { transform:scale(1); } }

.pl-center { position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:120px 20px 130px; pointer-events:none; }
.pl-card { width:min(560px, 100%); text-align:center; padding:26px 28px 22px; border-radius:30px; background:rgba(10,14,18,.5); border:1px solid var(--line);
  backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3); box-shadow:0 30px 80px -30px rgba(0,0,0,.7); animation:pl-pop .5s var(--wb-ease); }
@keyframes pl-pop { from { opacity:0; transform:scale(.94) translateY(12px); } to { opacity:1; transform:none; } }
.pl-card__title { margin:14px 0 0; font-size:22px; font-weight:800; opacity:.92; }
.pl-big { font-size:clamp(84px, 13vw, 150px); font-weight:800; line-height:1; letter-spacing:-.04em; color:var(--tone); text-shadow:0 0 50px rgba(var(--tone-rgb),.45); margin:6px 0 12px; }
.pl.is-final .pl-big { animation:pl-pulse 1s ease-in-out infinite; }
.pl-card__next { display:grid; grid-template-columns:128px 1fr; gap:14px; align-items:center; text-align:left; padding:10px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid var(--line); }
.pl-card__next img { width:128px; height:72px; object-fit:cover; border-radius:13px; }
.pl-card__next small { display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tone); }
.pl-card__next b { display:block; font-size:18px; line-height:1.2; margin:3px 0 4px; }
.pl-card__next span { font-size:13px; color:rgba(255,255,255,.7); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.pl-controls { position:absolute; left:24px; right:24px; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:6; display:flex; justify-content:center; align-items:center; }
.pl-dock { display:flex; align-items:center; gap:6px; padding:7px; border-radius:99px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 18px 50px -20px rgba(0,0,0,.8); }
.pl-dock--side { position:absolute; right:0; }
.pl-btn { width:50px; height:50px; border-radius:50%; }
.pl-btn--play { width:64px; height:64px; background:#EEEBE1; color:#273224; }
.pl-btn--play:hover { background:#F7F6F1; }
.pl-btn--play .pl-ic { width:26px; height:26px; }
.pl-btn[aria-pressed="false"] { opacity:.5; }
.pl-btn[aria-pressed="true"] { color:var(--tone); background:rgba(var(--tone-rgb),.14); }
.pl-btn[aria-expanded="true"] { background:rgba(255,255,255,.16); }

.pl-panel { position:absolute; right:24px; bottom:calc(100px + env(safe-area-inset-bottom)); z-index:8; width:360px; max-height:min(70vh, 620px); overflow-y:auto; padding:18px;
  border-radius:24px; background:rgba(12,16,20,.82); border:1px solid var(--line); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); box-shadow:0 30px 80px -24px rgba(0,0,0,.85);
  display:grid; gap:18px; animation:pl-rise .3s var(--wb-ease); user-select:auto; }
.pl-panel section { display:grid; gap:10px; }
.pl-panel h4 { margin:0; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.pl-panel h4 small { font-weight:600; letter-spacing:.02em; text-transform:none; opacity:.8; margin-left:6px; }
.pl-seg-ctl { display:flex; gap:4px; padding:4px; border-radius:14px; background:rgba(255,255,255,.07); }
.pl-seg-ctl button { flex:1; min-height:38px; border:0; border-radius:10px; background:transparent; color:#fff; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.pl-seg-ctl button[aria-pressed="true"] { background:#EEEBE1; color:#273224; }
.pl-tracks { display:grid; gap:4px; }
.pl-tracks button { display:grid; gap:2px; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:rgba(255,255,255,.05); color:#fff; font:inherit; cursor:pointer; }
.pl-tracks button:hover { background:rgba(255,255,255,.1); }
.pl-tracks button[aria-pressed="true"] { border-color:rgba(var(--tone-rgb),.6); background:rgba(var(--tone-rgb),.12); }
.pl-tracks b { font-size:14px; }
.pl-tracks em { font-style:normal; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tone); margin-left:6px; }
.pl-tracks span { font-size:12px; opacity:.65; }
.pl-range { display:grid; gap:6px; font-size:13px; font-weight:600; opacity:.9; }
.pl-range input { width:100%; accent-color:var(--tone); }
.pl-switch { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; cursor:pointer; }
.pl-switch input { width:18px; height:18px; accent-color:var(--tone); }

.pl-paused { position:absolute; inset:0; z-index:7; display:grid; place-items:center; background:rgba(3,5,7,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:pl-rise .25s ease; }
.pl-paused__card { display:grid; justify-items:center; gap:22px; }
.pl-btn--huge { width:96px; height:96px; }
.pl-btn--huge .pl-ic { width:38px; height:38px; }
.pl-link { border:0; background:none; color:rgba(255,255,255,.75); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

.pl.is-done .pl-hud, .pl.is-done .pl-center, .pl.is-done .pl-controls, .pl.is-done .pl-upnext, .pl.is-done .pl-panel { display:none; }
.pl-done { position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:20px; background:rgba(3,5,7,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.pl-done__card { position:relative; width:min(520px, 100%); text-align:center; padding:34px 28px 26px; border-radius:32px; background:rgba(12,16,20,.7); border:1px solid var(--line); animation:pl-pop .6s var(--wb-ease); }
.pl-done__badge { width:84px; height:84px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #8BA370, #8AA26E); color:#0C0E09; box-shadow:0 0 50px rgba(185,207,150,.5); }
.pl-done__badge .pl-ic { width:42px; height:42px; stroke-width:2.6; }
.pl-done__card h2 { margin:0; font-size:clamp(30px, 4vw, 42px); font-weight:800; letter-spacing:-.02em; }
.pl-done__card > p { margin:6px 0 22px; opacity:.7; }
.pl-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:22px; }
.pl-stats div { padding:14px 8px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid var(--line); }
.pl-stats b { display:block; font-size:24px; font-weight:800; }
.pl-stats span { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.pl-done__actions { display:grid; gap:10px; }
.pl-cta { min-height:52px; border-radius:16px; border:0; background:#EEEBE1; color:#273224; font:inherit; font-weight:800; font-size:16px; cursor:pointer; }
.pl-cta--ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid var(--line); }
.pl-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.pl-confetti i { position:absolute; top:-20px; width:8px; height:14px; border-radius:2px; opacity:0; animation:pl-fall 3s cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes pl-fall { 0% { opacity:1; top:-20px; } 100% { opacity:0; top:105%; margin-left:40px; } }

/* Phones in portrait: video on top, timer and controls below. */
@media (max-width:760px), (max-aspect-ratio:4/5) {
  .pl { --stage-top:calc(max(12px, env(safe-area-inset-top)) + 84px); }
  .pl-top { top:max(12px, env(safe-area-inset-top)); left:14px; right:14px; gap:10px; }
  .pl-track { top:calc(max(12px, env(safe-area-inset-top)) + 58px); left:14px; right:14px; }
  .pl-seg span { display:none; }
  .pl-stage { top:var(--stage-top); bottom:auto; height:calc(100vw * 9 / 16); }
  .pl-scrim { display:none; }
  .pl-upnext { display:none; }
  .pl-watermark { left:auto; right:12px; bottom:auto; top:calc(var(--stage-top) + 100vw * 9 / 16 - 38px); }
  .pl-watermark img { width:17px; height:22px; }
  .pl-watermark span { display:none; }
  .pl-hud { top:calc(var(--stage-top) + 100vw * 9 / 16 + 18px); bottom:calc(96px + env(safe-area-inset-bottom)); left:16px; right:16px;
    display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; align-content:start; gap:14px; overflow:hidden; }
  .pl-name { font-size:clamp(22px, 6.2vw, 40px); margin:10px 0 6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .pl-cue { font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .pl-chips { margin-top:10px; }
  .pl-timer { width:clamp(92px, 26vw, 190px); }
  .pl-count b { font-size:clamp(34px, 9vw, 72px); }
  .pl-center { top:calc(var(--stage-top) + 100vw * 9 / 16); bottom:calc(84px + env(safe-area-inset-bottom)); padding:14px 14px 10px; align-items:start; }
  .pl-card { padding:18px 16px 16px; border-radius:24px; }
  .pl-big { font-size:clamp(64px, 22vw, 110px); margin:2px 0 10px; }
  .pl-card__next { grid-template-columns:96px 1fr; }
  .pl-card__next img { width:96px; height:56px; }
  .pl-controls { left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); justify-content:space-between; }
  .pl-dock--side { position:static; order:2; }
  .pl-dock--side .pl-btn { width:42px; height:42px; }
  .pl-btn { width:46px; height:46px; }
  .pl-btn--play { width:58px; height:58px; }
  .pl-panel { left:10px; right:10px; width:auto; bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width:420px) {
  #plFull { display:none; }
  .pl-dock { gap:2px; padding:5px; }
  .pl-dock--side .pl-btn { width:40px; height:40px; }
  .pl-btn { width:42px; height:42px; }
  .pl-btn--play { width:54px; height:54px; }
}
/* Phones in landscape: keep everything over the video, just smaller. */
@media (max-height:520px) and (min-aspect-ratio:4/5) {
  .pl-track { display:none; }
  .pl-upnext { display:none; }
  .pl-hud { bottom:calc(84px + env(safe-area-inset-bottom)); left:20px; right:20px; }
  .pl-name { font-size:26px; margin:8px 0 4px; }
  .pl-cue, .pl-chips { display:none; }
  .pl-timer { width:118px; }
  .pl-count b { font-size:44px; }
  .pl-controls { bottom:12px; }
  .pl-btn { width:42px; height:42px; }
  .pl-btn--play { width:52px; height:52px; }
  .pl-center { padding:60px 20px 80px; }
  .pl-big { font-size:72px; }
}
@media (prefers-reduced-motion:reduce) { .pl *, .pl *::before { animation:none !important; } }

/* Session parts on plan cards */
.wb-parts { display:flex; gap:4px; margin:12px 0 4px; }
.wb-part { min-width:0; padding:8px 10px; border-radius:10px; font-size:12px; color:var(--wb-muted); background:var(--wb-primary-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-part b { display:block; font-size:12px; color:var(--wb-text); }
.wb-part--warm { background:#fff1e6; }
.wb-part--cool { background:#F0F3ED; }

.wb-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120; padding:12px 18px; border-radius:12px; background:#242E38; color:#fff; font-size:14px; box-shadow:var(--wb-shadow); }

@media (max-width:860px) {
  .wb-header { padding:10px 14px; gap:10px; flex-wrap:wrap; }
  .wb-header__spacer, .wb-header .wb-btn--ghost, .wb-user { display:none; }
  .wb-logout { margin-left:auto; padding:0 10px; }
  .wb-logout span { display:none; }
  .wb-tabs { order:3; width:100%; overflow-x:auto; }
  .wb-main { padding:18px 16px 100px; }
  .wb-class { grid-template-columns:1fr; }
  .wb-class img { width:100%; height:auto; aspect-ratio:16/9; }
  .wb-ex { grid-template-columns:72px 1fr; }
  .wb-ex img { width:72px; height:40px; }
  .wb-ex > :last-child:not(.wb-alts) { grid-column:1 / -1; justify-self:start; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
/* Fitter Stock type: headings in FAVORA (the site's display serif), text in Avenir. */
.wb-h1, .wb-h2, .wb-question h2, .wb-session h3, .wb-start strong, .wb-p-done h2,
.pl-name, .pl-card__title, .pl-done__card h2 { font-family:var(--fs-font-display); font-weight:400; letter-spacing:0; }
.wb-h1 { font-size:clamp(30px,4.4vw,44px); line-height:1.08; }
.wb-start strong { font-size:21px; }
/* Buttons as on fitterstock.com: Avenir Medium. */
.wb-btn { font-weight:500; }
.pl-name { letter-spacing:-.005em; line-height:1.04; }