/* INSCYD metric page family - hosted styles, generated 1:1 from the
   INSCYD-Metric-*.html assemblies. Loaded ONLY by the metric page bridges. */
html:not(.bridge-ready) body > *:not(#metrics-root):not(script):not(style):not(.w-webflow-badge):not(.vlb){display:none!important}
#metrics-root{display:block}
#metrics-root .w-embed{display:contents}
#metrics-root .w-embed:before,#metrics-root .w-embed:after{content:none}
body{font-size:16px;line-height:normal}
p,h1,h2,h3,h4,h5,h6,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
img{display:block;max-width:100%;vertical-align:baseline}
button,input,select,textarea{font:inherit;margin:0}

/* ============ INSCYD v16 tokens (light) ============ */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f6f8; --surface-3:#eceef2;
  --ink:#1B1F3B; --muted:#5d5f66; --muted-2:#9a9aa1;
  --border:rgba(27,31,59,.10); --border-2:rgba(27,31,59,.16);
  --red:#E6261C; --accent:#E6261C; --accent-soft:rgba(230,38,28,.06);
  --cta:#1B1F3B; --cta-h:#070a18; --on-cta:#ffffff;
  --rec:#4E6D8C; --green:#0F766E; --carb:#EA580D; --acc:#C026D3; --fatmax:#DAE8E7;
  --g-track:rgba(27,31,59,.24); --g-needle:rgba(27,31,59,.52);
  --card-ink:#14181f; --card-mut:#3a4150;
  --ease:cubic-bezier(.32,.72,0,1); --expo:cubic-bezier(.16,1,.3,1);
  --shell:rgba(27,31,59,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.04}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
/* homepage background system: soft depth gradients under everything + paper grain OVER the sections */
.bg-depth{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(680px 520px at 15% 24%, rgba(122,118,112,.10), transparent 70%),
  radial-gradient(640px 520px at 87% 30%, rgba(116,116,120,.09), transparent 70%),
  radial-gradient(1000px 640px at 50% -12%, rgba(27,31,59,.04), transparent 72%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ============ nav (island pill) ============ */
.nav{position:sticky;top:0;padding:14px 0;z-index:60;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.nav.mz-nav-hide{transform:translateY(-130%);opacity:0;pointer-events:none}
.nav-in{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:14px;padding:8px 16px;box-shadow:0 10px 30px -16px rgba(20,28,46,.16);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
:root[data-theme="dark"] .nav-in{background:rgba(31,34,40,.72)}
.nav-left{display:flex;align-items:center;gap:26px}
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:18px;width:auto;display:block}
.logo .ll{display:none}
:root[data-theme="dark"] .logo .ld{display:none}:root[data-theme="dark"] .logo .ll{display:block}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:12px}
.divid{width:1px;height:24px;background:var(--border)}
.signin{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:0 8px;height:32px;display:inline-flex;align-items:center;transition:color .15s}
.signin:hover{color:var(--ink)}
.cta{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:99px;background:var(--cta);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:.18s}
:root[data-theme="dark"] .cta{color:#16181d}
.cta:hover{background:var(--cta-h);transform:translateY(-1px)}
@media (max-width:880px){.nav-links,.signin{display:none}}
.cta-pill{display:inline-flex;align-items:center;gap:10px;background:var(--cta);color:var(--on-cta);font-size:14px;font-weight:700;padding:9px 9px 9px 18px;border-radius:99px;transition:background .25s var(--ease),transform .25s var(--ease)}
.cta-pill:hover{background:var(--cta-h)}
.cta-pill:active{transform:scale(.98)}
.cta-pill .disc{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--expo)}
.cta-pill:hover .disc{transform:translateX(2px)}
.cta-pill .disc svg{width:13px;height:13px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============ trusted-by logos (ported 1:1 from homepage) ============ */
.logos{position:relative;z-index:2;padding:120px 0 64px}
@media(min-width:1024px){.logos{padding:160px 0 96px}}
.logos-head{text-align:center;max-width:720px;margin:0 auto 40px;padding:0 16px}
.logos-title{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.logos-sub{margin-top:12px;font-size:16.5px;line-height:1.5;color:var(--muted);font-weight:500}
.logoloop{position:relative;overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
.logoloop-track{display:flex;width:max-content;will-change:transform}
.logoloop-list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.logoloop-item{flex:0 0 auto;width:230px;margin-right:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px}
.logoloop-item img{width:220px;height:95px;display:block;object-fit:contain;opacity:.82;filter:saturate(.92);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease,filter .3s ease;-webkit-user-drag:none;user-select:none;cursor:pointer}
.logoloop-item img:hover{opacity:1;filter:none;transform:scale(1.09)}
.logoloop-cap{font:600 14.5px/1.3 'Manrope',sans-serif;color:var(--muted);text-align:center;letter-spacing:-.01em;max-width:220px}
@media(prefers-reduced-motion:reduce){.logoloop-track{transform:none!important}}

/* ============ shared ============ */
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);padding:7px 16px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-shadow:0 4px 14px rgba(20,28,46,.05)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.accent{color:var(--red)}
.sec-head{max-width:760px}
.sec-title{font-size:clamp(34px,4.6vw,56px);margin:18px 0 18px}
.sec-sub{font-size:17px;line-height:1.65;color:var(--muted);max-width:62ch}
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .8s var(--expo),transform .9s var(--expo)}
.fade-up.in{opacity:1;transform:none}
html.no-js .fade-up{opacity:1;transform:none}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);padding:12px 20px;border-radius:99px;border:1px solid var(--border-2);transition:border-color .2s,background .2s}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface-2)}
/* double bezel shell */
.shell{background:var(--shell);border:1px solid var(--border);border-radius:24px;padding:7px}
.biz-grid .shell,.qgrid .shell,.qside .shell{display:flex}
.biz-grid .shell>.core,.qgrid .shell>.core,.qside .shell>.core{flex:1;min-width:0}
.core{background:var(--surface);border:1px solid var(--border);border-radius:17px;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 24px 60px -24px rgba(20,28,46,.18);overflow:hidden}

/* ============ 1. HERO ============ */
.hero{position:relative;z-index:2;padding:170px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.hero-h1{font-size:clamp(40px,5.2vw,64px);margin:22px 0 20px;letter-spacing:-.04em;line-height:1.02}
.hero-sub{font-size:18px;line-height:1.65;color:var(--muted);max-width:52ch;margin-bottom:30px}
.hero-sub b{color:var(--ink);font-weight:700}
.hero-note{margin-top:26px;font-size:13px;font-weight:600;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.hero-note .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(15,118,110,.4);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.35)}70%{box-shadow:0 0 0 9px rgba(15,118,110,0)}100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}}

/* hero visual: coach photo + floating INSCYD gauges */
.hero-visual{position:relative;padding:6px}
.coach-shot{position:relative;border-radius:22px;overflow:hidden;transform:rotate(1deg);box-shadow:0 44px 90px -42px rgba(20,28,46,.42),0 14px 34px -20px rgba(20,28,46,.22)}
.coach-shot img{width:100%;height:clamp(440px,50vw,552px);object-fit:cover;object-position:66% 34%;display:block}
.coach-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 56%,rgba(9,13,24,.4))}
.coach-badge{position:absolute;left:18px;bottom:15px;z-index:4;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:8px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.coach-badge i{width:6px;height:6px;border-radius:50%;background:var(--red)}

.gfloat{position:absolute;z-index:6;background:linear-gradient(160deg,rgba(247,249,252,.9),rgba(226,231,238,.82));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.78);border-radius:16px;box-shadow:0 24px 50px -24px rgba(14,22,38,.44),inset 0 1px 0 rgba(255,255,255,.85);padding:11px 13px 12px;animation:gbob 6.6s ease-in-out infinite alternate;opacity:0;transform:translateY(12px);transition:opacity .8s var(--expo),transform .8s var(--expo)}
.hero-in .gfloat{opacity:1;transform:none}
.gfloat.d2{animation-duration:7.6s;animation-delay:-1.3s;transition-delay:.1s}
.gfloat.d3{animation-duration:7s;animation-delay:-2.2s;transition-delay:.2s}
.gfloat.d4{animation-duration:8.1s;animation-delay:-.7s;transition-delay:.3s}
@keyframes gbob{from{transform:translateY(5px)}to{transform:translateY(-7px)}}
.hero-in .gfloat{animation-play-state:running}
.gf-cap{font-size:13px;font-weight:700;color:var(--card-ink);letter-spacing:-.01em;margin-bottom:5px;text-align:center;line-height:1}
.gf-gauge{width:122px}
.gf-gauge .gx{display:block;width:88px;height:auto;margin:0 auto}
.gf-val{margin-top:5px;text-align:center;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.gf-val .gnum{font-size:19px;font-weight:800;color:var(--card-ink);letter-spacing:-.02em}
.gf-val .gun{margin-left:3px;font-size:10px;font-weight:600;color:var(--card-mut)}
.gf-graph{width:min(56%,246px)}
.gf-graph .gf-cap{margin-bottom:6px}
.gf-graph .stack{position:relative}
.gf-graph .stack .ly{display:block}
.gf-graph .stack .ly.over{position:absolute;inset:0}
.gf-graph .gx{display:block;width:100%;height:auto}
/* straddle the image edges: half inside, half outside */
.gf-vo2{top:5%;left:-12%}
.gf-vla{top:16%;right:-11%}
.gf-fat{bottom:26%;left:-13%}
.gf-graph{bottom:-6%;right:-8%}
.gf-graph .fat{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.gf-graph .carb{fill:none;stroke:var(--carb);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.gf-graph .leg-bg{opacity:0}
.gf-graph .leg-tx{fill:#2e3547;font-size:24px}

/* ============ 2. STORY (scrollytelling) ============ */
.story{position:relative;z-index:2}
.story-head{padding:110px 0 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.story-track{height:400vh;position:relative}
.story-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;width:100%}
.story-chart-shell{position:relative}
.schart{width:100%;height:auto;display:block}
.schart .axis{stroke:var(--border-2);stroke-width:1}
.schart text{font-family:'Manrope';font-weight:700}
.schart .tick{fill:var(--muted-2);font-size:10px}
.ftp-line{stroke:var(--ink);stroke-width:3.5;fill:none;stroke-linecap:round}
.ftp-label{fill:var(--ink);transition:opacity .3s}
.ftp-bar{fill:url(#barHatch);stroke:#4E6D8C;stroke-width:1;opacity:.95}
.ftp-line{fill:none;stroke:#4E6D8C;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ftp-dot{fill:#4E6D8C;stroke:#fff;stroke-width:1.4}
.u-zig{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.u-zdot{stroke:#fff;stroke-width:1.4}
.zlab{font-size:12.5px;font-weight:800;transition:opacity .25s}
.sleg-t{font-size:11.5px;font-weight:700;fill:var(--muted)}
.pd-line{stroke-linejoin:round}
.pd-vdot{stroke:#fff;stroke-width:1.2}
.u-line{fill:none;stroke-width:3;stroke-linecap:round;opacity:0}
.u-end{transition:opacity .4s}
.u-vla{stroke:var(--red)}
.u-fat{stroke:var(--green)}
.u-label{font-size:11px;opacity:0}
.u-label.vla{fill:var(--red)}
.u-label.fat{fill:var(--green)}
.story-steps{position:relative;min-height:280px}
.step{position:absolute;inset:0;opacity:0;transform:translateY(26px);transition:opacity .55s var(--expo),transform .6s var(--expo);pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:12px}
.step h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.step p{font-size:16px;line-height:1.6;color:var(--muted);max-width:44ch}
.zonewrap{margin-top:26px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--expo),transform .6s var(--expo)}
.zonewrap.on{opacity:1;transform:none}
.zrow{margin-bottom:10px}
.zrow .zl{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between}
.zstrip{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--border);position:relative}
.zstrip i{display:block;height:100%}
.zstrip .z1{background:#E8EDF3}.zstrip .z2{background:#C9D6E4}.zstrip .z3{background:#9FB8CE}.zstrip .z4{background:#6E92B4}.zstrip .z5{background:#E6261C}
.zmark{position:absolute;top:-8px;bottom:-8px;width:2px;background:var(--ink);left:62%}
.zmark::after{content:"FTP";position:absolute;top:-16px;left:-12px;font-size:9px;font-weight:800;color:var(--ink)}

/* ============ 3. SAME FTP — twin athlete cards (text on top, cards below) ============ */
.tw-sec{position:relative;z-index:2;padding:120px 0 100px}
.tw-head{text-align:center;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.tw-body{position:relative;max-width:920px;margin:52px auto 0}
/* Sebastian note: floats fully LEFT of card A on wide screens (no overlap, no extra vertical space) */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;margin:0}
.seb-note{position:relative;z-index:8;max-width:520px;margin:28px auto 0;background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px 26px 22px;box-shadow:0 26px 55px -30px rgba(20,28,46,.35)}
@media(min-width:1240px){
  .tw-body{margin-left:auto;margin-right:auto}
  .seb-note{position:absolute;top:2px;right:calc(100% + 24px);width:min(300px,calc(100vw - 1000px));max-width:none;margin:0;transform:rotate(-1.6deg)}
}
.seb-note::before{content:"\201C";position:absolute;top:2px;left:18px;font-size:54px;font-weight:800;color:rgba(230,38,28,.18);line-height:1;font-family:Georgia,serif}
.seb-note .q{font-size:14.5px;line-height:1.62;font-weight:600;color:var(--ink);position:relative}
.seb-note .q em{font-style:normal;color:var(--red)}
.seb-note .who{margin-top:16px;display:flex;align-items:center;gap:12px}
.seb-note .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 30%;border:2px solid #fff;box-shadow:0 4px 14px rgba(20,28,46,.28);flex:none}
.seb-note .nm{font-size:13px;font-weight:800;color:var(--ink)}
.seb-note .rr{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.45;display:block}
.seb-arrow{display:none;position:absolute;top:24%;right:-60px;width:66px;height:44px;pointer-events:none;overflow:visible}
@media(min-width:1240px){.seb-arrow{display:block}}
.seb-arrow .ln{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round}
.seb-arrow .hd{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s ease 1.15s}
.seb-note.in .seb-arrow .hd{opacity:1}
@media(max-width:1080px){
  .twin{min-width:0}
  .seb-note{min-width:0}
}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(20,28,46,.32);letter-spacing:.04em}
.ath{padding:24px 24px 20px;position:relative;height:100%}
.ath-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ath-ava{width:38px;height:38px;border-radius:50%;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ath.a .ath-ava{background:var(--rec)}
.ath.b .ath-ava{background:var(--carb)}
.ath-name{font-size:14.5px;font-weight:800}
.ath-tag{font-size:11.5px;font-weight:600;color:var(--muted-2)}
.ftp{padding:8px 0 16px;border-bottom:1px dashed var(--border-2);margin-bottom:14px}
.ftp .lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.ftp .num{font-size:46px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.12}
.ftp .num small{font-size:18px;font-weight:700;color:var(--muted-2)}
.metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}
.metric+.metric{border-top:1px solid var(--border)}
.metric .m-lab{font-size:12.5px;font-weight:700;color:var(--muted)}
.metric .m-val{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric .m-val small{font-weight:600;color:var(--muted-2);font-size:11px}
.mbar{flex:1;height:6px;border-radius:4px;background:var(--surface-3);margin:0 12px;overflow:hidden;position:relative;min-width:40px}
.mbar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:4px;transition:transform 1.2s var(--expo)}
.in .mbar i{transform:scaleX(var(--w,.5))}
.ath.a .mbar i{background:var(--rec)}
.ath.b .mbar i{background:var(--carb)}
.metric.hot .m-val{color:var(--red)}
.tw-note{grid-column:1/-1;text-align:center;font-size:13.5px;color:var(--muted-2);font-weight:600;margin-top:20px}
@media(max-width:760px){.twin{grid-template-columns:minmax(0,1fr);gap:14px}.vs{display:none}.metric .m-val{white-space:normal;text-align:right}}

/* ============ 4·V2. REINFORCEMENT VARIANT 2 — dark capsule, metric reels left (hero194 ref) ============ */
.reinf2{position:relative;z-index:2;padding:70px 0 110px}
.reinf2 .container{display:flex;flex-direction:column}
.reinf2 .var-chip{align-self:center;margin-bottom:26px}
.r2-capsule{position:relative;display:grid;grid-template-columns:1.02fr 1fr;background:linear-gradient(150deg,#171c2a,#0b0f1a);border-radius:34px;overflow:hidden;min-height:560px;box-shadow:0 60px 120px -50px rgba(6,9,20,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.r2-rain{position:relative;overflow:hidden}
.r2-cols{position:absolute;inset:-40px 0;display:flex;gap:16px;justify-content:center;padding:0 20px}
.r2-cols .rain-col,.r2-cols .rain-col .dq-tile,.r2-cols .rain-col .dq-tile.graph,.r2-cols .rain-col .dq-tile.metric{opacity:1}
.r2-cols .rain-col{gap:16px;max-width:218px}
.r2-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,15,26,.85),transparent 20%,transparent 80%,rgba(11,15,26,.85)),linear-gradient(270deg,transparent 78%,rgba(13,17,28,.55))}
.r2-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4.5vw,72px);color:#fff}
.r2-copy .eyebrow{align-self:flex-start;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.78);box-shadow:none}
.r2-copy h2{margin-top:20px;font-size:clamp(28px,3.2vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.r2-copy .r2-q{margin-top:18px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.68);max-width:46ch}
.r2-copy .r2-q em{font-style:normal;color:#ff6a60}
.r2-who{margin-top:12px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55)}
.r2-copy .cta-pill{align-self:flex-start;margin-top:30px;background:#fff;color:var(--ink)}
.r2-copy .cta-pill:hover{background:#eef1f5}
.r2-copy .cta-pill .disc{background:rgba(27,31,59,.1)}
.r2-copy .cta-pill .disc svg{stroke:var(--ink)}
@media(max-width:900px){
  .r2-capsule{grid-template-columns:1fr;min-height:0}
  .r2-rain{order:2;height:400px}
  .r2-copy{order:1;padding:38px 28px 16px}
}

/* ============ 7b. CERTIFIED COACH — planetary globe with callouts (hero216 ref) ============ */
.cert{position:relative;z-index:2;padding:120px 0 0;overflow:hidden}
.cert-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.cert-head .sec-sub{text-align:center}
.cert-head .cta-pill{margin-top:30px}
.cert-points{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;max-width:900px;margin:26px auto 0;text-align:left}
.cert-points p{font-size:14.5px;line-height:1.55;color:var(--muted);position:relative;padding-left:16px}
.cert-points p::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.cert-points b{color:var(--ink);font-weight:800}
@media(max-width:760px){.cert-points{grid-template-columns:1fr;gap:12px}}
.cg-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:99px;padding:9px 17px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 14px 34px -16px rgba(20,28,46,.35);white-space:nowrap}
.cg-chip i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;animation:pulse 2.4s infinite}
.cg-chip::after{content:"";position:absolute;top:100%;left:50%;width:1.5px;height:44px;background:linear-gradient(rgba(27,31,59,.4),transparent)}
.cc1{left:9%;top:52%}
.cc2{left:24%;top:20%}
.cc3{left:50%;top:8%;transform:translateX(-50%)}
.cc4{right:22%;top:22%}
.cc5{right:8%;top:54%}
@media(max-width:900px){
  .cg-chip{font-size:11px;padding:7px 12px}
  .cc1{left:3%;top:44%}
  .cc2{left:12%;top:12%}
  .cc4{right:12%;top:14%}
  .cc5{right:3%;top:46%}
  .cc3{top:2%}
}

/* ============ 3b. SAME FTP · VARIANT 2 — spatial athlete showcase (21st.dev ref) ============ */
.spx-sec{position:relative;z-index:2;padding:110px 0 120px}
.spx-sec .var-chip{align-self:center}
.spx-stage{position:relative;margin:52px auto 0;width:100%;max-width:1080px;height:min(62vw,540px);border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 44px 90px -52px rgba(20,28,46,.45)}
.spx-bg{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--expo)}
.spx-bg.a{background:radial-gradient(92% 92% at 50% 104%,rgba(78,109,140,.38),rgba(78,109,140,.12) 55%,transparent 82%)}
.spx-bg.b{background:radial-gradient(92% 92% at 50% 104%,rgba(234,88,13,.32),rgba(234,88,13,.1) 55%,transparent 82%)}
.spx-stage[data-s="a"] .spx-bg.a{opacity:1}
.spx-stage[data-s="b"] .spx-bg.b{opacity:1}
.spx-ghost{position:absolute;left:50%;top:13%;transform:translateX(-50%);font-size:clamp(58px,10.4vw,144px);font-weight:800;letter-spacing:-.03em;color:rgba(27,31,59,.075);white-space:nowrap;z-index:1;line-height:1;transition:opacity .6s var(--expo),transform .9s var(--expo)}
.spx-stage[data-s="a"] .gh-b{opacity:0;transform:translateX(calc(-50% + 44px))}
.spx-stage[data-s="b"] .gh-a{opacity:0;transform:translateX(calc(-50% - 44px))}
.spx-row.ftp{border:1px solid rgba(230,38,28,.28);background:rgba(230,38,28,.06);border-radius:10px;padding:10px 12px;margin-bottom:4px}
.spx-row.ftp .k{color:var(--ink)}
.spx-row.ftp .v{color:var(--red)}
.spx-img{position:absolute;left:50%;bottom:0;height:84%;width:auto;z-index:2;filter:drop-shadow(0 30px 44px rgba(20,28,46,.35));transition:opacity .7s var(--expo),transform .95s var(--expo);transform:translateX(-50%)}
.spx-stage[data-s="b"] .spx-img.a{opacity:0;transform:translateX(calc(-50% - 64px)) scale(.94)}
.spx-stage[data-s="a"] .spx-img.b{opacity:0;transform:translateX(calc(-50% + 64px)) scale(.94)}
.spx-panel{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:min(33%,330px);opacity:0;transition:opacity .65s var(--expo),transform .8s var(--expo)}
.spx-panel.a{left:4.4%;transform:translateY(-50%) translateX(-16px)}
.spx-panel.b{right:4.4%;text-align:right;transform:translateY(-50%) translateX(16px)}
.spx-stage[data-s="a"] .spx-panel.a{opacity:1;transform:translateY(-50%)}
.spx-stage[data-s="b"] .spx-panel.b{opacity:1;transform:translateY(-50%)}
.spx-name{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}
.spx-tag{display:block;font-size:12px;font-weight:600;color:var(--muted-2);margin:3px 0 16px}
.spx-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.spx-panel.b .spx-row{flex-direction:row-reverse}
.spx-row .k{font-weight:700;color:var(--muted)}
.spx-row .v{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.spx-row .v small{font-weight:600;color:var(--muted-2);font-size:11px}
.spx-row .v.hot{color:var(--red)}
.spx-lim{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--muted)}
.spx-lim b{color:var(--ink)}
.spx-dock{position:absolute;left:50%;top:20px;transform:translateX(-50%);z-index:7;display:flex;gap:6px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:99px;padding:6px;box-shadow:0 18px 44px -18px rgba(20,28,46,.45)}
.spx-dock button{font-family:inherit;font-size:13px;font-weight:800;color:var(--muted);background:transparent;border:0;border-radius:99px;padding:9px 22px;cursor:pointer;transition:background .35s var(--ease),color .35s}
.spx-dock button.on{background:var(--ink);color:#fff}
@media(max-width:900px){
  .spx-stage{height:540px}
  .spx-ghost{top:5%;font-size:clamp(44px,13vw,90px)}
  .spx-img{left:auto;right:-4%;transform:none;height:60%}
  .spx-stage[data-s="b"] .spx-img.a{opacity:0;transform:translateX(-44px) scale(.95)}
  .spx-stage[data-s="a"] .spx-img.b{opacity:0;transform:translateX(44px) scale(.95)}
  .spx-panel{top:auto;bottom:86px;width:52%;transform:none}
  .spx-panel.a{left:5%}
  .spx-panel.b{right:auto;left:5%;text-align:left}
  .spx-panel.b .spx-row{flex-direction:row}
  .spx-stage[data-s="a"] .spx-panel.a{transform:none}
  .spx-stage[data-s="b"] .spx-panel.b{transform:none}
  .spx-row{padding:7px 0;font-size:12px}
  .spx-name{font-size:16px}
  .spx-lim{display:none}
  .spx-dock button{padding:8px 14px;font-size:12px;white-space:nowrap}
}

/* ============ image comparison slider (generic; used in Solution) ============ */
.cmp-head{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto}
.cmp-wrap{margin-top:48px;padding:7px}
.cmpslider{position:relative;width:100%;height:clamp(490px,49vw,580px);border-radius:16px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;background:var(--surface)}
.cs-layer{position:absolute;inset:0;overflow:hidden}
.cs-clip{z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.cs-base{z-index:1}
.cs-corner{position:absolute;top:16px;z-index:4;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 12px;border-radius:99px;border:1px solid var(--border)}
.cs-corner i{width:7px;height:7px;border-radius:50%;background:var(--red)}
.cs-clip .cs-corner{left:18px}
.cs-base .cs-corner{right:18px}
/* the original card-on-gradient treatment, restored — the card just spans the FULL layer now */
/* the frame around the card (not the card interior): the plate sits with clear margin from every edge */
/* mirrors .cs-out (52/28 + centered) so the card band aligns 1:1 with the metric rows on the right */
.cs-in{background:linear-gradient(155deg,#eef3f8,#e1eaf2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px clamp(44px,6vw,72px) 28px}
/* static: full width + height of the layer. It never resizes on drag — the divider just
   uncovers it, exactly like the metric marquee on the right. */
/* the card hugs the graph: width capped, height follows the svg's own aspect ratio,
   so the padding you see IS the padding — no aspect letterboxing can reopen the gap */
.cs-in .curvecard{width:100%;height:min(458px,100%);padding:14px 16px 12px;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 42px -22px rgba(20,28,46,.36)}
/* one curve at a time, chosen by the tabs above the slider */
.cs-in .curvecard{display:none}
.cs-in .curvecard.is-on{display:flex;flex-direction:column}
.cs-in .curvecard .ct{font-size:13px;margin-bottom:1px}
.cs-in .curvecard .cc-sub{font-size:10.5px;margin-bottom:6px}
.cs-in .curvecard .ct{font-size:15px}
.cs-in .curvecard .cc-sub{font-size:11.5px}
.cs-in .curvecard svg{flex:1;min-height:0;width:100%;height:100%;display:block}
/* curve switcher tabs (same pill language as the athlete sport tabs) */
.cvt-wrap{display:flex;justify-content:center;margin:32px 0 0}
.cvt-list{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);max-width:100%;flex-wrap:wrap;justify-content:center}
.cvt-tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted-2);padding:9px 18px;border-radius:999px;white-space:nowrap;transition:color .35s}
.cvt-tab[aria-selected="true"]{color:#fff}
.cvt-tab:hover:not([aria-selected="true"]){color:var(--ink)}
.cvt-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:0;background:linear-gradient(150deg,#2b3350,#1B1F3B);box-shadow:0 10px 24px -12px rgba(18,20,29,.6),inset 0 -2px 0 #E6261C;transition:transform .5s cubic-bezier(.34,1.18,.5,1),width .5s cubic-bezier(.34,1.18,.5,1)}
@media(max-width:860px){.cvt-pill{display:none}.cvt-tab[aria-selected="true"]{background:#1B1F3B}}
/* same gradient as .cs-in so both halves of the slider read as one surface */
.cs-out{background:linear-gradient(155deg,#eef3f8,#e1eaf2);display:flex;flex-direction:column;justify-content:center;padding:52px 0 28px}
.cs-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;z-index:6;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(27,31,59,.08),0 0 22px rgba(0,0,0,.16);pointer-events:none}
.cs-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 10px 26px -6px rgba(20,28,46,.42),0 0 0 1px rgba(27,31,59,.06);display:flex;align-items:center;justify-content:center;transition:transform .18s var(--ease)}
.cmpslider.cs-grabbing .cs-knob{transform:translate(-50%,-50%) scale(1.08)}
.cs-knob svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cmp-cap{text-align:center;margin-top:22px;font-size:14.5px;font-weight:700;color:var(--ink)}
.cmp-cap .accent{color:var(--red)}
/* ============ 4b. SOFTWARE — interactive product tour (white, vector assets) ============ */
.pv{position:relative;z-index:2;padding:110px 0}
.pv .container{position:relative;max-width:1340px}
.pv-tour{margin-top:48px;display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(26px,2.6vw,44px);align-items:center}
.pv-tabs{display:flex;flex-direction:column;gap:2px}
.pv-tab{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;font-family:inherit;font-size:15px;font-weight:700;color:var(--muted);background:transparent;border:0;border-left:2px solid var(--border);padding:13px 0 13px 18px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.pv-tab .pn{margin-top:2px}
.pv-tx{display:flex;flex-direction:column;min-width:0}
.pv-td{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.5;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s,margin-top .3s}
.pv-tab.on .pv-td{max-height:96px;opacity:1;margin-top:6px}
.pv-tab:hover{color:var(--ink)}
.pv-tab.on{color:var(--ink);border-left-color:var(--red);background:linear-gradient(90deg,rgba(230,38,28,.07),transparent)}
.pv-tab .pn{font-size:12px;font-weight:800;color:var(--muted-2);font-variant-numeric:tabular-nums;flex:none}
.pv-tab.on .pn{color:var(--red)}
.pv-stage{min-width:0}
.pv-window{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 44px 90px -50px rgba(20,28,46,.42),0 2px 8px -2px rgba(20,28,46,.06)}
.pv-chrome{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.pv-dots{display:flex;gap:6px}
.pv-dots i{width:10px;height:10px;border-radius:50%;background:#dfe2e8}
.pv-url{margin-left:8px;font-size:12px;font-weight:600;color:#8a8f9a;background:#fff;border:1px solid var(--border);border-radius:7px;padding:4px 14px}
.pv-screen{position:relative;background:#fff}
.pv-shead{padding:20px 24px 2px}
.pv-ht{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.pv-hs{display:block;margin-top:5px;font-size:13px;font-weight:500;color:var(--muted);line-height:1.4}
.pv-panels{position:relative;transition:height .5s var(--expo);overflow:hidden}
.pv-panel{position:absolute;left:0;right:0;top:0;padding:18px 24px 26px;opacity:0;transform:scale(1.01);transition:opacity .5s var(--expo),transform .6s var(--expo);pointer-events:none}
.pv-panel.on{opacity:1;transform:none;pointer-events:auto}
.pv-panel .shot{width:100%;height:auto;display:block}
/* Body Composition — rebuilt natively from the app's own vectors */
.bc{display:grid;grid-template-columns:.72fr 1fr .95fr;gap:24px;align-items:center}
.bc img{width:100%;height:auto;display:block}
.bc-stats{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);padding:2px 16px}
.bc-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;font-size:13.5px}
.bc-row+.bc-row{border-top:1px solid var(--border)}
.bc-row .k{color:var(--muted);font-weight:600}
.bc-row .v{color:var(--ink);font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Physiological Performance Benchmarks — 8 real gauges */
.bm{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bm-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);padding:14px 14px 12px}
.bm-n{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;min-height:2.4em;line-height:1.2}
.bm-card img{width:100%;max-width:150px;height:auto;display:block;margin:2px auto 8px}
.bm-v{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.7;white-space:nowrap}
.bm-v b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
/* Load Characteristics — all six graphs, 3 x 2 */
.lc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lc img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:10px;background:#fff}
.pv-progress{position:absolute;left:0;bottom:0;height:3px;background:var(--red);width:0;z-index:3}
.pv-cap{margin:18px auto 0;font-size:14.5px;font-weight:600;color:var(--muted);min-height:22px;text-align:center;max-width:60ch}
@media(max-width:1000px){
  .pv-tour{grid-template-columns:1fr;gap:26px;margin-top:32px}
  .pv-tabs{flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center}
  .pv-tab{width:auto;border-left:0;border:1px solid var(--border-2);border-radius:99px;padding:8px 13px;font-size:12px;background:var(--surface-2)}
  .pv-tab.on{border-color:transparent;background:var(--red);color:#fff}
  .pv-tab.on .pn{color:#fff}
  .pv-tab .pn{display:none}
  .pv-td{display:none}
}
@media(max-width:760px){
  .pv{padding:74px 0}
  .pv-panel{padding:12px 14px 18px}
  .pv-shead{padding:14px 16px 2px}
  .pv-ht{font-size:16px}
  .pv-hs{font-size:11.5px}
  .bc{grid-template-columns:1fr;gap:16px}
  .lc{grid-template-columns:1fr 1fr;gap:10px}
  .bm{grid-template-columns:1fr 1fr;gap:10px}
  .bm-n{min-height:0;font-size:11.5px}
  .bm-v{font-size:10.5px}
}
@media(max-width:480px){.lc{grid-template-columns:1fr}.bm{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pv-panel{transition:opacity .2s}.pv-panels{transition:none}.pv-progress{display:none}}

/* ============ 4c/4d. SOFTWARE — alternative variants (Igor picks one) ============ */
.var-chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--carb);background:rgba(234,88,13,.08);border:1px solid rgba(234,88,13,.3);padding:6px 14px;border-radius:99px;margin-bottom:16px;align-self:center}

/* — VARIANT 1: full-width metric marquee (SaaSify ref) — */
.swv1{position:relative;z-index:2;padding:110px 0 0}
.swv1 .sec-head{margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px}
.mq-band{margin-top:56px;padding:46px 0 58px;background:linear-gradient(180deg,#f3f7fa,#e9f0f6);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:18px;overflow:hidden}
.mq-row{display:flex;gap:18px;width:max-content;will-change:transform}
.mq-row .dq-tile.graph{width:344px}
.mq-row .dq-tile.metric{width:258px}
.mq-cap{text-align:center;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:26px}

/* — VARIANT 3: metric rain — columns of cards looping vertically on white, alternating directions — */
.swv3{position:relative;z-index:2;overflow:hidden}
.rain{position:relative;height:clamp(640px,92vh,860px)}
.rain-cols{position:absolute;inset:-60px 0;display:flex;gap:18px;justify-content:center;padding:0 14px}
.rain-col{flex:1;max-width:252px;display:flex;flex-direction:column;gap:18px;opacity:.85;will-change:transform;animation:rainUp var(--dur,44s) linear infinite}
.rain-col:nth-child(even){animation-name:rainDown}
.rain-col .dq-tile,.rain-col .dq-tile.graph,.rain-col .dq-tile.metric{width:100%;box-shadow:0 14px 30px -20px rgba(20,28,46,.28);border-color:var(--border)}
@keyframes rainUp{to{transform:translateY(-50%)}}
@keyframes rainDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.rain-veil{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 58% 46% at 50% 50%,rgba(255,255,255,.97),rgba(255,255,255,.72) 55%,rgba(255,255,255,.16) 80%,transparent),linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 84%,#fff 100%)}
.rain-copy{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.rain-copy .var-chip{margin-bottom:22px}
.rain-copy h2{margin-top:20px;max-width:16ch;font-size:clamp(32px,4.4vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.07;color:var(--ink);text-shadow:0 2px 34px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.7)}
.rain-copy h2 .accent{color:var(--red);text-shadow:0 2px 34px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.7)}
@media(max-width:1000px){.rain-col:nth-child(n+5){display:none}.rain{height:70vh;min-height:540px}}
@media(max-width:640px){.rain-col:nth-child(n+4){display:none}.rain-cols{gap:12px}.rain-col{gap:12px}}
@media(prefers-reduced-motion:reduce){.rain-col{animation:none}}

/* — VARIANT 4: cinematic pinned scroll (hand-rolled GSAP-style scrub) — */
.swv4{position:relative;z-index:2}
.cin-track{height:340vh;position:relative}
.cin-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cin-grid{position:absolute;inset:0;background-size:60px 60px;background-image:linear-gradient(to right,rgba(27,31,59,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(27,31,59,.05) 1px,transparent 1px);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%)}
.cin-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;will-change:transform,opacity,filter}
.cin-intro h2{font-size:clamp(36px,5vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--ink);text-shadow:0 10px 30px rgba(27,31,59,.14)}
.cin-hint{margin-top:36px;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);display:flex;flex-direction:column;align-items:center;gap:9px}
.cin-hint i{width:1.5px;height:34px;background:linear-gradient(var(--red),transparent);display:block;animation:hintDrop 1.7s var(--expo) infinite}
@keyframes hintDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cin-card{position:absolute;left:50%;top:50%;width:min(90vw,1340px);height:80vh;transform:translate(-50%,-50%) translateY(110vh);border-radius:36px;z-index:3;background:linear-gradient(165deg,#ffffff 0%,#eef2f7 100%);box-shadow:0 60px 130px -45px rgba(20,28,46,.38),0 2px 10px -2px rgba(20,28,46,.08),inset 0 1px 0 rgba(255,255,255,.9);border:1px solid var(--border);overflow:hidden;will-change:transform}
.cin-inner{position:relative;width:100%;height:100%;max-width:1400px;margin:0 auto}
.cin-athlete{position:absolute;left:50%;bottom:0;height:90%;width:auto;transform:translateX(-50%) translateY(14%) scale(.86);opacity:0;will-change:transform,opacity;filter:drop-shadow(0 34px 44px rgba(20,28,46,.3))}
.cin-g{position:absolute;z-index:6;width:120px;background:linear-gradient(160deg,rgba(247,249,252,.92),rgba(226,231,238,.85));border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:11px 13px 12px;box-shadow:0 22px 44px -22px rgba(20,28,46,.4),inset 0 1px 0 rgba(255,255,255,.85);opacity:0;will-change:opacity;animation:gbob 6.6s ease-in-out infinite alternate}
.cin-g .gx{display:block;width:84px;height:auto;margin:0 auto}
.cin-g1{left:calc(50% - 288px);top:27%}
.cin-g2{left:calc(50% - 240px);bottom:11%;animation-duration:7.6s;animation-delay:-1.3s}
.cin-g3{left:calc(50% - 238px);top:8%;animation-duration:7.1s;animation-delay:-2.2s}
.cin-graphs{position:absolute;left:calc(50% + 200px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:28px;z-index:5}
.cin-graphs .cg{width:min(24vw,304px);background:linear-gradient(160deg,rgba(247,249,252,.94),rgba(226,231,238,.88));border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:12px 14px 13px;box-shadow:0 26px 50px -26px rgba(20,28,46,.42),inset 0 1px 0 rgba(255,255,255,.85);opacity:0;will-change:opacity;animation:gbob 8.1s ease-in-out infinite alternate;animation-delay:-.7s}
.cin-graphs .cg+.cg{margin-left:26px;animation-duration:7.2s;animation-delay:-2.8s}
.cin-graphs svg{width:100%;height:auto;display:block}
.cg-ln{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.cg-grid line{stroke:rgba(27,31,59,.07);stroke-width:1.5}
.cg-leg{font-family:'Manrope';font-size:13px;font-weight:700;fill:#3a4150}
.cin-reveal{position:absolute;left:clamp(26px,4vw,72px);top:50%;transform:translateY(-50%);z-index:7;font-size:clamp(30px,3.4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.08;max-width:8ch;opacity:0;background:linear-gradient(180deg,var(--ink) 0%,#4a5068 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 10px 20px rgba(27,31,59,.18));clip-path:inset(-8% 100% -8% 0)}
.cin-reveal .accent{background:linear-gradient(180deg,#ff5a50 0%,var(--red) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* static fallback (mobile / reduced motion) */
.swv4.cin-static .cin-track{height:auto}
.swv4.cin-static .cin-stage{position:relative;height:auto;padding:80px 0 30px;flex-direction:column}
.swv4.cin-static .cin-intro{position:relative;inset:auto}
.swv4.cin-static .cin-hint{display:none}
.swv4.cin-static .cin-card{position:relative;left:auto;top:auto;transform:none;width:92vw;height:auto;min-height:540px;margin:44px auto 70px;aspect-ratio:4/5;max-height:640px}
.swv4.cin-static .cin-athlete{opacity:1;transform:translateX(-50%)}
.swv4.cin-static .cin-g,.swv4.cin-static .cin-graphs .cg{opacity:1;transform:none}
.swv4.cin-static .cin-reveal{opacity:1;clip-path:none;top:auto;bottom:6%;transform:none;font-size:24px}
.swv4.cin-static .cin-graphs{display:none}
.swv4.cin-static .cin-g2{display:none}
.swv4.cin-static .cin-g1{left:6%}
.swv4.cin-static .cin-g3{left:auto;right:6%}
@media(max-width:1280px){
  .cin-g1{left:calc(50% - 258px);top:27%}
  .cin-g2{left:calc(50% - 216px)}
  .cin-g3{left:calc(50% - 214px)}
  .cin-g4{left:calc(50% - 244px)}
  .cin-graphs{left:calc(50% + 178px)}
  .cin-graphs .cg{width:min(22vw,272px)}
  .cin-reveal{max-width:7ch}
}

/* — VARIANT 5: container scroll — tablet straightens on scroll, metric rain inside (Aceternity ref) — */
.swv5{position:relative;z-index:2;padding:100px 0 130px}
.cs5-wrap{position:relative;max-width:1100px;margin:0 auto;padding:0 28px;perspective:1150px}
.cs5-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:20px;will-change:transform}
.cs5-tab{position:relative;margin:26px auto 0;height:clamp(340px,56vw,620px);max-width:1024px;background:#1a1d24;border:4px solid #565b66;border-radius:30px;padding:13px;box-shadow:0 9px 20px rgba(0,0,0,.29),0 37px 37px rgba(0,0,0,.26),0 84px 50px rgba(0,0,0,.15),0 149px 60px rgba(0,0,0,.04);transform:rotateX(22deg) scale(1.03);will-change:transform}
.cs5-screen{position:relative;width:100%;height:100%;border-radius:17px;overflow:hidden;background:#f7f9fc}
.cs5-rain{position:absolute;inset:-30px 0;display:flex;gap:14px;justify-content:center;padding:0 16px}
.cs5-rain .rain-col{gap:14px;opacity:1;max-width:225px}
.cs5-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#fff,transparent 15%,transparent 85%,#fff)}
@media(max-width:760px){.swv5{padding:70px 0 90px}.cs5-tab{border-width:3px;padding:8px;border-radius:22px}.cs5-screen{border-radius:13px}}

/* — VARIANT 2: guided tabs on top + app window with overlays (Figma section 04 ref) — */
.swv2{position:relative;z-index:2;padding:110px 0 120px}
.swv2 .container{max-width:1200px;display:flex;flex-direction:column}
.swv2 .sec-head{max-width:760px}
.swv2 .var-chip{align-self:flex-start}
.ft-tabs{margin-top:52px;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,28px)}
.ft-tab{position:relative;overflow:hidden;text-align:left;background:transparent;border:0;border-top:2px solid var(--border);padding:20px 8px 12px 0;cursor:pointer;font-family:inherit}
.ft-tab .bar{position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--red)}
.ft-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ft-tab .ic{flex:none;width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .3s,color .3s,border-color .3s}
.ft-tab .ic svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ft-tab h3{font-size:14.5px;font-weight:800;color:var(--muted);letter-spacing:-.015em;line-height:1.25;transition:color .3s}
.ft-tab:hover h3{color:var(--ink)}
.ft-tab.on h3{color:var(--ink)}
.ft-tab.on .ic{background:rgba(230,38,28,.08);border-color:rgba(230,38,28,.3);color:var(--red)}
.ft-window{margin-top:36px;position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 50px 100px -55px rgba(20,28,46,.45),0 2px 8px -2px rgba(20,28,46,.06);background:linear-gradient(155deg,#f5f8fb,#e8eef5)}
.ft-panels{position:relative;aspect-ratio:16/7.6}
.ft-panel{position:absolute;inset:0;overflow:hidden;opacity:0;transform:scale(1.015);transition:opacity .55s var(--expo),transform .7s var(--expo);pointer-events:none}
.ft-panel.on{opacity:1;transform:none;pointer-events:auto}
.ft-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.ft-bg.dim{opacity:.42;filter:blur(2.5px) saturate(.85)}
.ft-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,248,251,.2),rgba(240,245,250,.86))}
.ft-chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:99px;padding:9px 17px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 14px 34px -16px rgba(20,28,46,.4);white-space:nowrap}
.ft-chip i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.ft-chip s{color:var(--muted-2);font-weight:600;margin-right:2px}
/* panel 1 — hub: your data sources feed one engine */
.hub-lines{position:absolute;inset:0;width:100%;height:100%}
.hub-lines path{fill:none;stroke:rgba(78,109,140,.42);stroke-width:1.6;stroke-dasharray:5 7}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 28px 60px -28px rgba(20,28,46,.45);padding:20px 26px;text-align:center}
.hub-core img{height:22px;width:auto;margin:0 auto 8px}
.hub-core span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hub-card{position:absolute;z-index:4;width:186px;text-align:center;animation:gbob 7s ease-in-out infinite alternate}
.hub-card:nth-child(odd){animation-duration:7.8s;animation-delay:-2s}
.hub-card img{width:100%;height:118px;object-fit:contain;display:block;margin-bottom:9px;filter:drop-shadow(0 20px 26px rgba(20,28,46,.3))}
.hub-card .hn{font-size:13.5px;font-weight:800;color:var(--ink);display:block;line-height:1.2}
.hub-card .hv{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-top:3px}
.hc-1{left:8%;top:11%}
.hc-2{right:8%;top:11%}
.hc-3{left:8%;bottom:12%}
.hc-4{right:8%;bottom:12%}
/* panel 2 — complete picture: mini metric rain on white, white fades top/bottom */
.ft-p2{background:#fff}
.p2-rain{position:absolute;inset:-50px 0;display:flex;gap:16px;justify-content:center;padding:0 22px}
.p2-rain .rain-col{opacity:1;max-width:236px;gap:16px}
.p2-rain .rain-col .dq-tile{box-shadow:0 14px 30px -20px rgba(20,28,46,.3);border-color:var(--border)}
.p2-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 80%,#fff 100%)}
/* panel 3 — physiology-based zones over a training-session photo */
.ft-p3 .ft-bg{object-position:center 20%}
.p3-table{position:absolute;left:4%;bottom:9%;width:min(56%,620px);z-index:5;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 64px -30px rgba(14,22,38,.6);padding:12px;animation:gbob 7.6s ease-in-out infinite alternate}
.p3-table img{width:100%;height:auto;display:block;border-radius:8px}
.p3-graph{position:absolute;right:4%;top:11%;width:min(28%,320px);z-index:5;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 50px -24px rgba(14,22,38,.55);padding:12px;animation:gbob 7s ease-in-out infinite alternate;animation-delay:-2.2s}
.p3-graph img{width:100%;height:auto;display:block;border-radius:8px}
/* panel 4 — branded reports: homepage coverflow fan */
.ft-p4{background:linear-gradient(155deg,#f2f6fa,#e3ebf3)}
.rp-rf{position:absolute;inset:24px 0 12px;perspective:1600px;overflow:hidden}
.rp-stage{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.rp-card{position:absolute;left:0;top:0;width:236px;aspect-ratio:1050/1491;margin:-167px 0 0 -118px;border-radius:14px;overflow:hidden;background:#fff;outline:1px solid rgba(0,0,0,.06);outline-offset:-1px;box-shadow:0 26px 48px -26px rgba(20,28,46,.42);transition:transform 1.05s cubic-bezier(.32,.72,0,1),opacity 1.05s ease;will-change:transform,opacity}
.rp-card img{width:100%;height:100%;object-fit:cover;display:block}
.rp-rf::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(to right,#f0f4f9 0%,transparent 9%,transparent 91%,#e9eff6 100%),linear-gradient(to bottom,transparent 80%,#e7edf4 100%)}
@media(prefers-reduced-motion:reduce){.rp-card{transition:none}}
@media(max-width:1000px){
  .ft-tabs{grid-template-columns:repeat(2,1fr);gap:14px 22px}
  .ft-panels{aspect-ratio:auto;height:440px}
  .hub-card{padding:10px 12px;gap:9px}
  .hub-card .hv{display:none}
  .hc-1{left:4%;top:10%}
  .hc-2{right:4%;top:10%}
  .hc-3{left:4%;bottom:10%}
  .hc-4{right:4%;bottom:10%}
  .p3-graph{width:min(34%,250px)}
  .p3-table{width:min(70%,560px)}
  .mq-row .dq-tile.graph{width:250px}
  .mq-row .dq-tile.metric{width:190px}
}
@media(max-width:640px){
  .ft-tabs{grid-template-columns:1fr 1fr;gap:12px 16px}
  .ft-tab h3{font-size:13px}
  .ft-panels{height:380px}
  .hub-core{padding:13px 16px}
  .hub-card{width:124px;padding:8px}
  .hub-card img{height:56px;margin-bottom:5px}
  .hub-card .hn{font-size:11px}
  .hc-1{top:6%;left:4%}
  .hc-2{top:21%;right:4%}
  .hc-3{bottom:31%;left:4%}
  .hc-4{bottom:16%;right:4%}
  .p4-fan .r1{transform:translateX(-34%) rotate(-7deg)}
  .p4-fan .r3{transform:translateX(34%) rotate(7deg)}
}

/* ============ 4. REINFORCEMENT — outdoor Higgsfield shot as full section background ============ */
.reinf{position:relative;z-index:2;color:#fff;background:#10141f}
.reinf-band{position:relative;min-height:clamp(560px,66vh,720px);display:flex;align-items:center;overflow:hidden}
.reinf-band>.bg{position:absolute;top:0;bottom:0;right:0;width:114%;height:100%;object-fit:cover;object-position:center 30%}
.reinf-shade{position:absolute;inset:0;background:linear-gradient(96deg,rgba(8,11,20,.82) 0%,rgba(8,11,20,.55) 34%,rgba(8,11,20,.14) 60%,transparent 78%),linear-gradient(180deg,rgba(8,11,20,.14),transparent 30%,transparent 72%,rgba(8,11,20,.3))}
.reinf-band .container{position:relative;z-index:3;width:100%}
.reinf-copy{max-width:560px;margin-right:auto;padding:100px 0}
.reinf-copy .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82);box-shadow:none}
.reinf-copy h2{font-size:clamp(30px,3.9vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:18px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.reinf-copy h2 .accent{color:var(--red);text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 24px rgba(0,0,0,.35)}
/* floating gauges over the photo (hero card style) */
.reinf-band .gfloat{z-index:5}
.reinf-band.in .gfloat{opacity:1;transform:none}
.rf-vo2{top:7%;right:33%}
.rf-vla{top:26%;right:4%}
.rf-fat{bottom:6%;right:30%}

/* ============ 5. SOLUTION (image comparison slider: your data <-> 360° profile) ============ */
.sol{position:relative;z-index:2;padding:120px 0}
.curvecard{padding:20px 22px 18px}
.curvecard .ct{font-size:14.5px;font-weight:800;letter-spacing:-.015em;display:flex;align-items:center;gap:9px;margin-bottom:2px}
.curvecard .ct i{width:8px;height:8px;border-radius:50%}
.curvecard.lac .ct i{background:var(--red)}
.curvecard.pow .ct i{background:var(--rec)}
.curvecard .cc-sub{font-size:12px;font-weight:600;color:var(--muted-2);margin-bottom:10px}
.curvecard svg{width:100%;height:auto;display:block}
.cv-ax{stroke:var(--border-2);stroke-width:1.2}
.cv-grid{stroke:rgba(27,31,59,.06);stroke-width:1}
.cv-tick{fill:var(--muted-2);font-size:10px;font-weight:700;font-family:'Manrope'}
.cv-lac{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cv-dot{fill:#fff;stroke:var(--red);stroke-width:2.4}
.cv-pow{fill:none;stroke:var(--rec);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cv-fill-lac{fill:rgba(230,38,28,.06)}
.cv-fill-pow{fill:rgba(78,109,140,.08)}
.cv-asym{stroke:var(--muted-2);stroke-width:1.3;stroke-dasharray:4 5;fill:none}
.cv-thr{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 4}
.cv-thr-lab{fill:var(--ink);font-size:10px;font-weight:800;font-family:'Manrope'}
.cv-note{fill:var(--rec);font-size:10.5px;font-weight:800;font-family:'Manrope'}
.cv-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.in .cv-draw{transition:stroke-dashoffset 1.7s var(--expo);stroke-dashoffset:0}
.in .cv-draw.d2{transition-delay:.2s}
.cv-fade{opacity:0;transition:opacity .5s ease 1.2s}
.in .cv-fade{opacity:1}

/* metric marquee (auto-scroll, lives inside the slider's right layer) */
.dragq{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 100%);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 100%);display:flex;flex-direction:column;gap:16px;pointer-events:none}
.dragq-row{display:flex;gap:16px;width:max-content;will-change:transform}
.dq-tile{background:#fff;border:1px solid rgba(20,28,46,.08);border-radius:14px;box-shadow:0 16px 34px -22px rgba(20,28,46,.3);padding:11px;flex:none;display:flex;align-items:center;justify-content:center;pointer-events:none}
.dq-tile.graph{width:300px}
.dq-tile.metric{width:232px}
/* the gallery captures already carry their own card edge — no second border on comparison-slider tiles */
.cmpslider .dq-tile{border:0;background:transparent;box-shadow:none;padding:0}
/* Solution · Variant 2 — two columns: copy left, the SAME drag slider right */
.sol2{padding:110px 0 120px;position:relative;z-index:2}
.sol2 .container{max-width:1304px}
.sol2-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);margin-top:8px;align-items:center;width:100%}
.sol2-grid>*{min-width:0}
.sol2-copy .eyebrow{margin-bottom:18px}
.sol2-copy .sec-title{text-align:left;font-size:clamp(30px,2.9vw,46px);margin:0 0 18px}
.sol2-copy .sec-sub{text-align:left;margin:0 0 22px;max-width:52ch}
.sol2-copy .cmp-cap{text-align:left;margin:0}
.sol2 .cmpslider{height:clamp(460px,40vw,560px)}
.sol2 .cs-in{padding:30px 24px 20px;gap:12px}
.sol2 .cs-in .curvecard{width:min(72%,460px)}
.sol2 .cs-in .curvecard svg{max-height:clamp(120px,calc(20vw - 117px),170px)}
.sol2 .cv-draw{stroke-dashoffset:0!important}
.sol2 .cv-fade{opacity:1!important}
.sol2 .dq-tile.graph{width:300px}
.sol2 .dq-tile.metric{width:230px}
@media(max-width:860px){.sol2{padding:80px 0 84px}.sol2-grid{grid-template-columns:1fr;gap:22px}.sol2 .cmpslider{height:470px}.sol2 .cs-in .curvecard{width:min(86%,300px)}}
.dq-tile img{width:100%;height:auto;display:block;border-radius:7px}

/* variant folds: alternative sections collapse under a left-edge toggle bar */
.fold{position:relative;z-index:2}
.fold-bar{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);border:0;border-top:1px dashed var(--border-2);border-bottom:1px dashed var(--border-2);padding:13px 18px 13px max(20px,calc((100vw - 1200px)/2 + 32px));cursor:pointer;font-family:'Manrope';font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);transition:color .2s,background .2s}
.fold-bar:hover{color:var(--ink);background:var(--surface-2)}
.fold-bar i{width:0;height:0;border-left:6px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .25s;flex:none}
.fold.open .fold-bar i{transform:rotate(90deg)}
.fold-body{display:none}
.fold.open .fold-body{display:block}
.fold+.fold:not(.fold-gap) .fold-bar{border-top:0}
.fold-gap{margin-top:34px}

/* ============ 6. TRACK (PD chart) ============ */

/* ---- business ROI R43: shared typed+slider controls ---- */
.bz-ctl{margin-bottom:20px;min-width:0}
.bz-lab{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.bz-lab label{font-size:15px;font-weight:700;color:var(--ink)}
.bz-ctl input[type=number]{width:96px;font:inherit;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:11px;padding:9px 12px;text-align:right;transition-property:border-color,box-shadow;transition-duration:.25s}
.bz-ctl input[type=number]:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,38,28,.12)}
.bz-ctl input[type=number]::-webkit-outer-spin-button,.bz-ctl input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bz-num{display:inline-flex;align-items:center;gap:6px}
.bz-num i{font-style:normal;font-size:14px;font-weight:800;color:var(--muted-2)}
.bz-ctl input[type=range]{width:100%;accent-color:var(--red);height:20px;cursor:pointer}
.bz-hint{font-size:11.5px;line-height:1.5;color:var(--muted-2);margin:7px 0 0}
.bz-demo{display:flex;align-items:center;justify-content:space-between;gap:26px;background:linear-gradient(120deg,#171b33,#0d1022);border-radius:18px;padding:24px 28px;margin-top:38px}
.bz-demo p{font-size:18px;font-weight:700;color:#fff;margin:0;max-width:52ch;text-wrap:balance}
.bza-cap{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.bza-math{display:grid;grid-template-columns:1fr auto;gap:9px 16px;font-size:13.5px;font-weight:700;color:var(--muted)}
.bza-math b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;white-space:nowrap}
.bza-math .tt{border-top:1.5px solid var(--ink);padding-top:9px;margin-top:2px}
.bza-math b.tt{color:var(--red);font-size:16px}
.bza-ph{font-size:12.5px;line-height:1.6;color:var(--muted-2);margin:16px 0 0}
.bza-ph b{color:var(--muted);font-variant-numeric:tabular-nums}
/* variant A: calculator + trajectory + equation flow */
.bza{position:relative;z-index:2;padding:130px 0}
.bza-title{font-size:clamp(36px,4.6vw,60px);margin:22px 0 10px;letter-spacing:-.03em;text-wrap:balance}
.bza-strip{display:grid;grid-template-columns:.78fr 1.35fr;gap:52px;margin-top:50px;align-items:start}
.bza-right{min-width:0}
.bza-headline{font-size:clamp(21px,2.1vw,28px);font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:0 0 26px;text-wrap:balance;position:relative;z-index:2}
.bza-headline b{color:var(--red);font-variant-numeric:tabular-nums}
.bz-growth{position:relative;background:transparent;border-radius:0;box-shadow:none;padding:6px 0 34px;overflow:visible}
.bz-growth svg{position:relative;width:100%;height:196px;display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%);mask-composite:intersect}
.g-months{position:absolute;left:calc(33.3% + 10px);right:6px;bottom:20px;display:flex;justify-content:space-between}
.g-months span{font-size:9.5px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}
.g-months span.gh:nth-last-child(2){opacity:.4}
.g-months span.gh:last-child{opacity:.16}
.g-mlab{position:absolute;left:calc(33.3% + 10px);right:6px;bottom:4px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.bza-notes{margin-top:26px;border-top:1px solid var(--border-2);padding-top:20px}
.bza-notes h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.bza-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bza-notes li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.bza-notes li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.75}
.bza-notes li b{color:var(--ink)}
.g-ax{position:absolute;bottom:18px;font-size:11.5px;font-weight:700;color:var(--muted-2)}
.g-ax.l{left:2px}
.g-mark{position:absolute;left:33.3%;top:-2px;transform:translateX(-50%);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:rgba(230,38,28,.07);border-radius:99px;padding:4px 11px;white-space:nowrap}
.g-pill{position:absolute;right:16%;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);transition:top .8s var(--expo)}
.bza-sums{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;margin-top:24px}
.bza-sums h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.bza-sums .bza-ph{grid-column:1/-1;margin-top:2px}
.bza-flow{display:grid;grid-template-columns:1fr 68px 1fr 68px 1fr 68px 1.04fr;gap:0;align-items:stretch;margin-top:56px;border-top:1px solid var(--border-2);padding-top:0}
.bza-cell{display:flex;flex-direction:column;padding:28px 0 26px 0}
.bza-cell .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.bza-cell .n{font-size:26px;font-weight:300;color:rgba(27,31,59,.28);font-variant-numeric:tabular-nums;line-height:1}
.bza-cell h3{font-size:18.5px;margin:0 0 9px}
.bza-cell .hd em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:99px;padding:3px 9px;display:inline-block;vertical-align:2px;white-space:nowrap}
.bza-cell p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 20px}
.bza-cell .v{margin-top:auto}
.bza-cell .v.today{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding-bottom:6px}
.bza-cell .v.live{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.bza-cell .v.live b{font-size:26px;color:var(--red)}
.bza-cell .v.live span{display:block;font-size:11.5px;font-weight:700;color:var(--muted-2);margin-top:4px;min-height:32px}
.bza-cell .v.live span b{font-size:11.5px;color:var(--muted);font-weight:800}
.bza-plus{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:300;color:rgba(27,31,59,.3);padding-bottom:10px}
.bza-plus.eq{font-size:38px;color:var(--ink);font-weight:400}
.bza-cell.tot{background:linear-gradient(180deg,#fff,#f4f7fb);box-shadow:inset 0 0 0 1px var(--border);border-radius:0 0 18px 18px;padding:28px 22px 26px}
.bza-cell.tot .n{color:var(--red)}
/* variant B: departure board, light */
.bzc{position:relative;z-index:2;padding:130px 0}
/* plate removed on request: the section sits directly on the page background */
.bzc-panel{max-width:none;width:100%;margin:0;border-radius:0;background:transparent;border:0;box-shadow:none;padding:30px 0 0}
.bzc-title{font-size:clamp(32px,4vw,52px);margin:20px 0 0;letter-spacing:-.03em}
.bzc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;margin-top:44px;align-items:start}
.bzc-total{background:#fff;border-radius:22px;box-shadow:inset 0 0 0 1px var(--border),0 24px 60px -38px rgba(20,28,46,.3);padding:26px 30px}
.bzc-total .lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.bzc-totnote{font-size:11.5px;color:var(--muted-2);font-weight:600;margin:12px 0 0}
.bzc-sum{margin-top:18px;border-top:1px dashed var(--border-2);padding-top:16px}
.odo{display:flex;gap:5px}
.odo .od-cell{position:relative;height:64px;border-radius:9px;background:linear-gradient(180deg,#ffffff,#f2f5f9 48%,#e9edf3 52%,#f6f8fb);box-shadow:inset 0 0 0 1px var(--border-2),0 6px 16px -8px rgba(20,28,46,.25);min-width:42px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.odo .od-cell:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(27,31,59,.16)}
.odo .od-static{font-size:36px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.odo .od-col{position:relative;width:100%;height:100%}
.odo .od-strip{position:absolute;left:0;right:0;top:0;transition:transform .75s var(--expo)}
.odo .od-strip b{display:flex;align-items:center;justify-content:center;height:64px;font-size:36px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.bzc-board{margin-top:44px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--border),0 24px 60px -40px rgba(20,28,46,.28)}
.bzc-rowh,.bzc-row{display:grid;grid-template-columns:1fr 120px 240px;gap:18px;align-items:center;padding:16px 26px}
.bzc-rowh{background:var(--surface-2);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.bzc-row{border-top:1px solid var(--border)}
.bzc-row .sd b{display:block;font-size:16.5px;font-weight:800;color:var(--ink)}
.bzc-row .sd p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:4px 0 0;max-width:56ch}
.bzc-row .st{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:4px 12px;justify-self:start}
.bzc-row .st.y{color:var(--muted);box-shadow:inset 0 0 0 1px var(--border-2)}
.bzc-row .st.n{color:#fff;background:var(--red)}
.bzc-row .st.t{color:#fff;background:var(--ink)}
.bzc-row i{font-style:normal;font-size:16px;font-weight:800;color:var(--green);text-align:right;font-variant-numeric:tabular-nums}
.bzc-row i span{color:inherit}
.bzc-row.tot{background:linear-gradient(90deg,rgba(230,38,28,.045),transparent 60%)}
.bzc-row.tot i{color:var(--red);font-size:18px}
/* -- business v2: model section captions, country picker, INSCYD cost line -- */
.bz2-sec{margin:28px 0 14px;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.bz2-sec i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.cty{position:relative;margin-bottom:6px}
.cty label{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.cty input{width:100%;font:inherit;font-size:16px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:12px;padding:11px 58px 11px 14px;transition-property:border-color,box-shadow;transition-duration:.25s}
.cty input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,38,28,.12)}
.cty .cur{position:absolute;right:13px;bottom:13px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--muted-2);pointer-events:none}
.cty-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:264px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 70px -30px rgba(20,28,46,.4);display:none}
.cty-list.open{display:block}
.cty-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:10px 14px}
.cty-list button:hover,.cty-list button.act{background:var(--surface-2)}
.cty-list button span{color:var(--muted-2);font-size:11px;font-weight:800}
.cty-list .none{padding:12px 14px;font-size:13px;color:var(--muted-2)}
.bzc-cost{margin-top:14px;border-top:1px dashed var(--border-2);padding-top:12px;font-size:12.5px;line-height:1.6;color:var(--muted);font-weight:600}
.bzc-cost b{color:var(--ink);font-variant-numeric:tabular-nums}
/* -- three-column restructure: inputs as columns, totals below, report form -- */
.bz3-top{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:22px;align-items:end;margin-top:44px}
.bz3-top .bz-hint{margin:0 0 12px}
/* variant 1: tall section 01 left, 02+03 stacked right, equal heights */
.bz3-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;align-items:stretch}
.bz3-stack{display:flex;flex-direction:column;gap:22px}
.bz3-stack .bz3-col{flex:1}
.bz3-col{background:#fff;border-radius:18px;box-shadow:inset 0 0 0 1px var(--border),0 20px 50px -34px rgba(20,28,46,.28);padding:20px 24px 8px;display:flex;flex-direction:column}
/* section 01 spreads its controls over the full card height, so no dead block at the bottom */
.bz3-cols > .bz3-col:first-child{justify-content:space-between}
.bz3-col .bz2-sec{margin:0 0 8px;font-size:13.5px;letter-spacing:.1em}
.bz3-desc{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.bz3-col .bz-ctl{margin-bottom:16px}
.bz3-total{margin-top:26px;display:grid;grid-template-columns:1fr 1.15fr;gap:18px 56px;align-items:center}
.bz3-calccol .bz3-math{margin-top:20px;border-top:1px dashed var(--border-2);padding-top:16px}
.bz3-form.bz3-formcol{grid-column:auto;border-top:0!important;margin-top:0!important;padding-top:0!important;align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:var(--surface-2);border-radius:16px;padding:26px 28px!important;box-shadow:inset 0 0 0 1px var(--border)}
.bz3-formcol .bz3-form-row{grid-template-columns:1fr}
.bz3-formcol .cta-pill{justify-self:stretch;width:100%;justify-content:center}
.bz3-formcol .bz3-form-h{font-size:16px;line-height:1.45;margin-bottom:16px}
.bz3-big{margin-top:18px;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bz3-big span{color:var(--red);font-variant-numeric:tabular-nums}
.bz3-big em{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted-2);margin-top:4px}
.bz3-chip{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:7px 14px}
.bz3-chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.bz3-math .bzc-sum{margin-top:0;border-top:0;padding-top:0}
.bz3-form{grid-column:1/-1;border-top:1px dashed var(--border-2);margin-top:10px;padding-top:20px}
.bz3-form-h{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 12px}
.bz3-form-row{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px}
.bz3-form input{font:inherit;font-size:16px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:12px;padding:11px 14px;min-width:0;transition-property:border-color,box-shadow;transition-duration:.25s}
.bz3-form input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,38,28,.12)}
.bz3-form input.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(230,38,28,.12)}
.bz3-form .cta-pill{border:0;cursor:pointer;font:inherit;justify-self:start;white-space:nowrap}
.bz3-form-msg{font-size:13px;font-weight:700;color:var(--green);margin:12px 0 0}
@media(max-width:1020px){.bz3-cols{grid-template-columns:1fr}.bz3-total{grid-template-columns:1fr}.bz3-top{grid-template-columns:1fr;gap:8px}.bz3-form-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.bz3-form-row{grid-template-columns:1fr}}
/* variant D: balance scale */
.bze{position:relative;z-index:2;padding:130px 0}
.bze-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;margin-top:50px}
.bze-stage{min-width:0}
.sc-wrap{position:relative;height:380px;display:flex;align-items:flex-end;justify-content:center}
.sc-beam{position:absolute;left:50%;bottom:120px;width:min(560px,92%);height:12px;margin-left:min(-280px,-46%);border-radius:99px;background:linear-gradient(180deg,#2a3350,#1B1F3B);box-shadow:0 14px 30px -14px rgba(20,28,46,.5);transform:rotate(var(--a,-8deg));transform-origin:center;transition:transform .9s var(--expo)}
.sc-pan{position:absolute;bottom:12px;width:170px;transform:rotate(calc(var(--a,-8deg)*-1));transform-origin:bottom center;display:flex;flex-direction:column;align-items:center;transition:transform .9s var(--expo)}
.sc-pan.l{left:-24px}
.sc-pan.r{right:-24px}
.sc-val{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:8px}
.sc-pan.r .sc-val{color:var(--red);font-size:20px}
.sc-chips{display:flex;flex-wrap:wrap-reverse;gap:3px;justify-content:center;align-items:flex-end;width:150px;min-height:12px;margin-bottom:6px}
.sc-chip{width:30px;height:9px;border-radius:4px;background:linear-gradient(180deg,#5E7FA3,#4E6D8C);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px -2px rgba(20,28,46,.4)}
.sc-pan.r .sc-chip{background:linear-gradient(180deg,#F0554B,#E6261C)}
.sc-pan:after{content:"";width:150px;height:10px;border-radius:6px;background:#1B1F3B;box-shadow:0 8px 18px -8px rgba(20,28,46,.5)}
.sc-lab{margin-top:9px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);text-align:center}
.sc-pivot{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:92px solid #1B1F3B;border-radius:6px}
.sc-base{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:190px;height:12px;border-radius:99px;background:#1B1F3B;opacity:.9}
.bze-note{font-size:12.5px;line-height:1.6;color:var(--muted-2);margin:18px 0 0;text-align:center}
.bze-note b{color:var(--muted);font-variant-numeric:tabular-nums}
/* variant E: receipt printer */
.bzf{position:relative;z-index:2;padding:130px 0}
.bzf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.bzf-copy .bz-calc{margin-top:30px;max-width:480px}
.bzf-printer{position:relative;width:min(380px,100%);margin:0 auto}
.pr-body{position:relative;z-index:3;height:86px;border-radius:20px;background:linear-gradient(180deg,#2a2f45,#1B1F3B);box-shadow:0 30px 60px -30px rgba(20,28,46,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.pr-slot{position:absolute;left:26px;right:26px;bottom:16px;height:9px;border-radius:99px;background:#0d1022;box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.rc-paper{position:relative;z-index:2;width:calc(100% - 60px);margin:-6px auto 0;background:#fffdf7;padding:26px 24px 30px;font-family:'SFMono-Regular',ui-monospace,Menlo,monospace;box-shadow:0 30px 60px -34px rgba(20,28,46,.4);transform-origin:top center}
.rc-paper:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:linear-gradient(-45deg,transparent 6px,#fffdf7 0) 0 0/18px 9px repeat-x,linear-gradient(45deg,transparent 6px,#fffdf7 0) 9px 0/18px 9px repeat-x}
.rc-paper.rp{animation:rcprint .6s var(--expo)}
@keyframes rcprint{0%{transform:translateY(-26px)}100%{transform:translateY(0)}}
.rc-h{font-size:13px;font-weight:700;letter-spacing:.08em;color:#14181f;margin:0;text-align:center}
.rc-sub{font-size:10px;letter-spacing:.06em;color:#8a8d96;margin:5px 0 16px;text-align:center;text-transform:uppercase}
.rc-line{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;color:#3a4150;padding:5px 0;border-bottom:1px dashed rgba(27,31,59,.14)}
.rc-line b{font-weight:700;font-variant-numeric:tabular-nums;color:#14181f;white-space:nowrap}
.rc-line.neg b{color:var(--red)}
.rc-total{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 0 8px;border-bottom:1px dashed rgba(27,31,59,.14)}
.rc-total span{font-size:11px;letter-spacing:.06em;color:#14181f;font-weight:700}
.rc-total b{font-size:22px;font-weight:700;color:#14181f;font-variant-numeric:tabular-nums}
.rc-note{font-size:9px;letter-spacing:.06em;color:#8a8d96;margin:8px 0 0;text-align:center}
.rc-bar{height:34px;margin:18px 10px 8px;background:repeating-linear-gradient(90deg,#14181f 0 2px,transparent 2px 5px,#14181f 5px 6px,transparent 6px 9px,#14181f 9px 12px,transparent 12px 14px)}
.rc-thanks{font-size:10px;letter-spacing:.1em;color:#8a8d96;text-align:center;margin:8px 0 0}
@media(max-width:1020px){
 .bza-strip{grid-template-columns:1fr;gap:34px}
 .bza-ctls{padding-right:0}
 .bza-flow{grid-template-columns:1fr;gap:0}
 .bza-plus{justify-content:flex-start;padding:8px 0}
 .bza-sums{grid-template-columns:1fr}
 .bzc-grid{grid-template-columns:1fr}
 .bze-grid,.bzf-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
 .bza,.bzc,.bze,.bzf{padding:80px 0}
 .bza-strip{grid-template-columns:1fr;gap:30px;margin-top:40px}
 .bza-cell{padding-right:0}
 .bzc-panel{width:calc(100% - 24px);border-radius:24px;padding:54px 0 26px}
 .odo .od-cell{height:48px;min-width:32px}
 .odo .od-static,.odo .od-strip b{font-size:26px}
 .odo .od-strip b{height:48px}
 .bzc-rowh{display:none}
 .bzc-row{grid-template-columns:1fr;gap:8px}
 .bzc-row i{text-align:left}
 .sc-wrap{transform:scale(.72);transform-origin:center bottom;height:300px}
 .bz-demo{flex-direction:column;align-items:flex-start;gap:16px}
}
/* ---- track: performance development, light panel (cin-card style) ---- */
.track-sec{position:relative;z-index:2;padding:120px 0 130px}
.tk-panel{position:relative;max-width:1400px;width:calc(100% - 48px);margin:0 auto;border-radius:36px;overflow:hidden;background:linear-gradient(165deg,#ffffff 0%,#eef2f7 100%);box-shadow:0 60px 130px -45px rgba(20,28,46,.38),0 2px 10px -2px rgba(20,28,46,.08),inset 0 1px 0 rgba(255,255,255,.9);border:1px solid var(--border);padding:92px 0 46px}
.tk-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 34% at 50% 0%,rgba(78,109,140,.07),transparent 70%)}
.tk-panel.tk-bare{background:transparent;border:0;box-shadow:none;border-radius:0}
.tk-bare .tk-glow{display:none}
.tk-bare .tk-chart{background:transparent;-webkit-mask-image:none;mask-image:none}
.tk-bare .tk-future{display:none}
.tk-head{position:relative;z-index:3;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end}
.tk-title{font-size:clamp(34px,4.6vw,56px);margin:18px 0 0;color:var(--ink);text-wrap:balance}
.tk-sub{font-size:16px;line-height:1.62;color:var(--muted);margin:0 0 6px}
.tk-chartwrap{position:relative;z-index:1;margin-top:34px}
.tk-chart{position:relative;max-width:1240px;margin:0 auto;height:clamp(360px,37vw,500px);padding:0 40px;background:linear-gradient(180deg,rgba(27,31,59,.045),rgba(27,31,59,0) 82%);border-radius:28px 28px 0 0;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 102%);mask-image:linear-gradient(180deg,#000 72%,transparent 102%)}
.tk-months{position:absolute;left:40px;right:40px;height:30px;top:28px}
.tk-tests{--pad:40px;position:relative;max-width:1240px;margin:-30px auto 0;height:26px}
.tk-months span,.tk-tests span{position:absolute;top:0;transform:translateX(-50%);font-size:12.5px;font-weight:700;color:rgba(27,31,59,.45);letter-spacing:.02em;white-space:nowrap}
.tk-months span.now{top:-10px;color:#fff;background:var(--blue,#4E6D8C);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11.5px;box-shadow:0 0 0 5px rgba(78,109,140,.16),0 6px 18px -4px rgba(78,109,140,.5)}
.tk-tests span{color:rgba(27,31,59,.60);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tk-plot{position:absolute;left:40px;right:40px;top:76px;bottom:44px}
.tk-grid{position:absolute;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,rgba(27,31,59,.10) 0 3px,transparent 3px 10px)}
.tk-grid.t{background:repeating-linear-gradient(180deg,rgba(27,31,59,.18) 0 3px,transparent 3px 10px)}
.tk-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tk-seg{fill:none;stroke-width:2.6;stroke-linecap:round}
.tk-panel.in .tk-seg{stroke-dashoffset:0!important}
.tk-station{transform-box:fill-box;transform-origin:center;stroke:#fff;stroke-width:2}
.tk-panel.in .tk-station{transform:scale(1)!important}
.tk-projline{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 7;opacity:0;transition:opacity .9s ease 2.3s}
.tk-panel.in .tk-projline{opacity:.42}
.tk-future{position:absolute;left:78%;right:-4%;top:-14%;bottom:-8%;background:linear-gradient(90deg,rgba(243,246,250,0),rgba(243,246,250,.75) 70%);pointer-events:none;z-index:2}
.tk-today{position:absolute;left:78%;top:-9%;bottom:-6%;width:2px;margin-left:-1px;background:linear-gradient(180deg,#4E6D8C,rgba(78,109,140,.04));box-shadow:0 0 14px rgba(78,109,140,.28);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--expo) .5s;z-index:3}
.tk-panel.in .tk-today{transform:scaleY(1)}
.tk-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:4.5px 11px;border-radius:10px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(27,31,59,.10),0 10px 26px -12px rgba(20,28,46,.30);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;opacity:0;transform:translate(-50%,-98%) scale(.95);filter:blur(3px);transition-property:opacity,transform,filter;transition-duration:.7s;transition-timing-function:cubic-bezier(.2,0,0,1)}
/* chips are centred on the April line and alternate above / below their own endpoint,
   so the dashed projections stay readable between them */
.tk-chip.below{transform:translate(-50%,35%) scale(.95)}
.tk-panel.in .tk-chip{opacity:1;transform:translate(-50%,-172%) scale(1);filter:blur(0)}
/* FatMax keeps the tighter gap on request; every other chip sits a bit further off its dot */
.tk-panel.in .tk-chip.near{transform:translate(-50%,-138%) scale(1)}
.tk-panel.in .tk-chip.below{transform:translate(-50%,64%) scale(1)}
.tk-chip i{width:9px;height:9px;border-radius:3px;flex:none}
.tk-chip b{font-weight:800;font-size:10.5px;padding:1.5px 7px;border-radius:99px}
.tk-dot{position:absolute;z-index:4;width:9px;height:9px;border-radius:50%;margin:-4.5px 0 0 -4.5px;box-shadow:0 0 0 2px #fff;opacity:0;transition:opacity .5s ease 1.8s}
.tk-panel.in .tk-dot{opacity:1;animation:tkpulse 3s ease-out 2.4s infinite}
@keyframes tkpulse{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px var(--pc)}55%{box-shadow:0 0 0 2px #fff,0 0 0 12px transparent}100%{box-shadow:0 0 0 2px #fff,0 0 0 0 transparent}}
.tk-feats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 44px;margin-top:56px}
.tk-feat h4{font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 7px;display:flex;align-items:center;gap:9px}
.tk-feat h4 svg{width:17px;height:17px;stroke:var(--blue,#4E6D8C);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tk-feat p{font-size:14px;line-height:1.62;color:var(--muted);margin:0}
.tk-cards{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
.tk-card{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f7f9fc);box-shadow:inset 0 0 0 1px rgba(27,31,59,.08),0 30px 70px -40px rgba(20,28,46,.30),0 2px 8px -2px rgba(20,28,46,.06);padding:36px 38px 0;display:flex;flex-direction:column}
.tk-card h3{font-size:21px;font-weight:700;color:var(--ink);margin:0}
.tk-card>p{font-size:14.5px;line-height:1.62;color:var(--muted);margin:12px 0 0;max-width:52ch}
.tk-media{position:relative;margin:28px -38px 0 0;border-radius:14px 0 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(27,31,59,.18),0 24px 60px -30px rgba(20,28,46,.28);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 99%);mask-image:linear-gradient(180deg,#000 62%,transparent 99%)}
.tk-media video{width:100%;display:block}

/* ============ 6b. LEARN + SUPPORT (INSCYD College + support, merged) ============ */
/* temporary review label above each variant — remove once Igor picks one */
.vlabel{position:relative;z-index:3;max-width:1304px;margin:0 auto;padding:0 32px 0;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.edu{position:relative;z-index:2;padding:34px 0 120px}
.edu .container{max-width:1380px}
.edu .sec-head{margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px}
.edu .sec-title{text-wrap:balance}
.edu .sec-sub{text-wrap:pretty}
.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.edu-card{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f7f9fc);box-shadow:inset 0 0 0 1px rgba(27,31,59,.08),0 30px 70px -40px rgba(20,28,46,.30),0 2px 8px -2px rgba(20,28,46,.06);padding:30px 30px 0;transition-property:transform,box-shadow;transition-duration:.4s;transition-timing-function:cubic-bezier(.2,0,0,1)}
@media(hover:hover){.edu-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(27,31,59,.10),0 44px 86px -44px rgba(20,28,46,.38),0 2px 8px -2px rgba(20,28,46,.06)}}
.edu-txt{padding-bottom:26px}
.edu-ix{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.edu-ix i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.edu-card h3{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
.edu-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:10px 0 0;text-wrap:pretty}
.edu-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.edu-tag{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:5px 11px;white-space:nowrap}
/* learn-more button */
.edu-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:18px 0 0;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:99px;padding:9px 16px;transition-property:border-color,background,transform;transition-duration:.2s}
@media(hover:hover){.edu-cta:hover{border-color:var(--ink);background:var(--surface-2)}}
.edu-cta:active{transform:scale(.97)}
.edu-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* left edge stays aligned with the copy, video bleeds off the RIGHT only — top-left corner
   rounded, top-right square, so it reads as running out of the card from the left */
.edu-media{position:relative;margin:auto -30px 0 0;border-radius:14px 0 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(27,31,59,.18),0 24px 60px -30px rgba(20,28,46,.28);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%);mask-image:linear-gradient(180deg,#000 78%,transparent 99%)}
.edu-media video{width:100%;display:block}
@media(max-width:1020px){.edu-grid{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
 .edu{padding:24px 0 84px}
 .edu-grid{grid-template-columns:1fr;gap:18px;margin-top:34px}
 .edu-card{padding:26px 24px 0}
 .edu-media{margin:auto -24px 0}
}

/* ---- full-video lightbox (same interaction pattern as the homepage bento cards) ---- */
.vplay{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.97);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px -14px rgba(0,0,0,.55);transition-property:transform,background;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,0,0,1)}
@media(hover:hover){.vplay:hover{transform:translate(-50%,-50%) scale(1.06)}}
.vplay:active{transform:translate(-50%,-50%) scale(.96)}
.vplay svg{width:20px;height:20px;margin-left:3px;fill:var(--blue,#4E6D8C)}
.vplay:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vlb{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;pointer-events:none;transition:opacity .32s ease}
.vlb.open{opacity:1;pointer-events:auto}
.vlb-bd{position:absolute;inset:0;background:rgba(10,14,24,.74);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.vlb-box{position:relative;z-index:1;width:min(980px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);transform:scale(.96) translateY(8px);transition:transform .36s cubic-bezier(.2,0,0,1)}
.vlb.open .vlb-box{transform:scale(1) translateY(0)}
.vlb-box video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.vlb-x{position:absolute;z-index:3;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:20px;line-height:1;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition-property:background,transform;transition-duration:.2s}
.vlb-x:hover{background:rgba(255,255,255,.26)}
.vlb-x:active{transform:scale(.94)}
.vlb-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:860px){.vlb{padding:16px}.vplay{width:48px;height:48px}.vplay svg{width:17px;height:17px}}

/* ---- Variant 3: pill tabs + single panel ---- */
.ev3{position:relative;z-index:2;padding:34px 0 120px}
.ev3 .container{max-width:1304px}
.ev3 .sec-head{margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px}
.ev3 .sec-title{text-wrap:balance}
.ev3-tabs{display:flex;justify-content:center;margin:34px 0 30px}
.ev3-list{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);max-width:100%;flex-wrap:wrap;justify-content:center}
.ev3-tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted-2);padding:9px 18px;border-radius:999px;white-space:nowrap;transition:color .35s}
.ev3-tab[aria-selected="true"]{color:#fff}
.ev3-tab:hover:not([aria-selected="true"]){color:var(--ink)}
.ev3-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:0;background:linear-gradient(150deg,#2b3350,#1B1F3B);box-shadow:0 10px 24px -12px rgba(18,20,29,.6),inset 0 -2px 0 #E6261C;transition:transform .5s cubic-bezier(.34,1.18,.5,1),width .5s cubic-bezier(.34,1.18,.5,1)}
.ev3-panel{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f7f9fc);box-shadow:inset 0 0 0 1px rgba(27,31,59,.08),0 30px 70px -40px rgba(20,28,46,.30)}
.ev3-pane{display:none;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3vw,48px);align-items:center;padding:44px 48px}
.ev3-pane.is-on{display:grid;animation:ev3in .5s cubic-bezier(.2,0,0,1) both}
@keyframes ev3in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ev3-pane>*{min-width:0}
.ev3-ix{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:13px}
.ev3-ix i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.ev3-copy h3{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
.ev3-copy p{font-size:15px;line-height:1.62;color:var(--muted);margin:12px 0 0;text-wrap:pretty}
/* rounded on ALL four corners, and the whole video frame is visible — never cropped */
.ev3-media{position:relative;border-radius:16px;overflow:hidden;background:#0b0e18;box-shadow:0 0 0 1px rgba(27,31,59,.16),0 24px 60px -30px rgba(20,28,46,.28)}
.ev3-media video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#0b0e18}
@media(prefers-reduced-motion:reduce){.ev3-pane.is-on{animation:none}}
@media(max-width:860px){
 .ev3{padding:24px 0 84px}
 .ev3-pill{display:none}
 .ev3-tab[aria-selected="true"]{background:#1B1F3B}
 .ev3-tabs{margin:26px 0 22px}
 .ev3-pane{grid-template-columns:1fr;gap:22px;padding:26px 24px}
 .ev3-media{border-radius:14px}
 .ev3-copy h3{font-size:22px}
}

@media(prefers-reduced-motion:reduce){.tk-seg,.tk-projline,.tk-station,.tk-chip,.tk-dot,.tk-today{transition:none!important;animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important;filter:none!important}.tk-projline{opacity:.42!important}.tk-chip{transform:translate(-50%,-172%)!important}.tk-chip.near{transform:translate(-50%,-138%)!important}.tk-chip.below{transform:translate(-50%,64%)!important}.tk-station{transform:scale(1)!important}}
@media(max-width:1020px){.tk-feats{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
 .track-sec{padding:80px 0 90px}
 .tk-panel{width:calc(100% - 24px);border-radius:24px;padding:64px 0 22px}
 .tk-head{grid-template-columns:1fr;gap:18px}
 .tk-chartwrap{margin-top:4px}
 .tk-chart{height:340px;padding:0 18px}
 .tk-months{left:18px;right:18px;top:26px}
 .tk-tests{--pad:18px;margin-top:-24px}
 .tk-plot{left:18px;right:18px;top:72px;bottom:30px;padding-top:8px}
 .tk-months span:nth-child(even){display:none}
 .tk-months span.now{width:30px;height:30px;font-size:10.5px;top:-8px}
 .tk-chip{position:relative;left:auto!important;top:auto!important;transform:none!important;margin:0 6px 8px 0;font-size:11px;padding:5px 9px;gap:6px;z-index:4}
 .tk-chip b{font-size:10px;padding:2px 6px}
 .tk-feats{grid-template-columns:1fr;gap:22px;margin-top:44px}
 .tk-cards{grid-template-columns:1fr;margin-top:40px}
 .tk-card{padding:26px 24px 0}
 .tk-media{margin:22px -24px 0 0}
}
}
.pl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.pl i{width:14px;height:3px;border-radius:2px}
.pl b{font-variant-numeric:tabular-nums;color:var(--ink)}
.pl .up{color:var(--green)}
.pl .dn{color:var(--red)}

/* ============ 7. BUSINESS ============ */
.biz{position:relative;z-index:2;padding:130px 0}
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:54px}
.rev-card{padding:26px}
.rev-card h3{font-size:19px;margin-bottom:6px}
.rev-card .cap{font-size:13px;color:var(--muted);margin-bottom:24px}
.rev-row{margin-bottom:16px}
.rev-row .rl{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.rev-row .rl b{color:var(--ink);font-variant-numeric:tabular-nums}
.rbar{height:12px;border-radius:7px;background:var(--surface-3);overflow:hidden}
.rbar i{display:block;height:100%;border-radius:7px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--expo)}
.in .rbar i{transform:none}
.rbar .coach{background:var(--rec)}
.rbar .test{background:var(--red);transition-delay:.15s}
.rbar .camp{background:var(--green);transition-delay:.3s}
.steps-card{padding:26px;display:flex;flex-direction:column}
.steps-card h3{font-size:19px;margin-bottom:6px}
.steps-card .cap{font-size:13px;color:var(--muted);margin-bottom:24px}
.stp{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--border)}
.stp .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stp h4{font-size:14.5px;font-weight:800;margin-bottom:3px}
.stp p{font-size:13px;color:var(--muted);line-height:1.55}
.bcase{grid-column:1/-1;padding:30px;border:1.5px dashed var(--border-2);border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface)}
.bcase .t h3{font-size:17px;margin-bottom:4px}
.bcase .t p{font-size:13px;color:var(--muted)}
.todo{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--carb);background:rgba(234,88,13,.08);border:1px solid rgba(234,88,13,.25);padding:6px 12px;border-radius:99px;white-space:nowrap}

/* ============ 8. QUOTES ============ */
.proof{position:relative;z-index:2;padding:120px 0}
.qgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:54px}
.qbig{padding:38px 36px;display:flex;flex-direction:column;justify-content:space-between;min-height:320px}
.qbig .qq{font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.35}
.qside{display:flex;flex-direction:column;gap:18px}
.qsm{padding:24px;flex:1}
.qsm .qq{font-size:15.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.who-row{display:flex;align-items:center;gap:12px;margin-top:22px}
.who-row img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.who-row .nm{font-size:13.5px;font-weight:800;display:block}
.who-row .rr{font-size:12px;color:var(--muted);font-weight:600}

/* ============ 9. CTA ============ */
.cx-sec{position:relative;z-index:2;padding:120px 0 140px}
.cx{position:relative;border-radius:28px;overflow:hidden;min-height:440px;display:flex;align-items:center}
.cx>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,14,26,.86) 0%,rgba(11,14,26,.55) 55%,rgba(11,14,26,.2) 100%)}
.cx .copy{position:relative;z-index:2;padding:64px;max-width:600px;color:#fff}
.cx .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8);box-shadow:none}
.cx h2{font-size:clamp(30px,3.8vw,48px);margin:18px 0 14px}
.cx p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.75);margin-bottom:28px}
.cx .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cx .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cx-g{position:absolute;right:56px;z-index:2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:14px 18px;color:#fff;display:none}
.cx-g .nm{font-size:11px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.65);display:block}
.cx-g .vl{font-size:16px;font-weight:800}
.cx-g.ga{top:74px}
.cx-g.gb{bottom:74px;right:120px}
footer{position:relative;z-index:2;padding:0 0 44px;text-align:center;font-size:12.5px;color:var(--muted-2);font-weight:600}

/* ============ responsive ============ */
@media(min-width:1000px){.cx-g{display:block}}
@media(max-width:1000px){
  .hero{padding:140px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-visual{max-width:460px;margin:0 auto;width:100%}
  .gf-vo2{top:2%;left:-4%}
  .gf-vla{top:12%;right:-4%}
  .gf-fat{bottom:22%;left:-5%}
  .gf-graph{bottom:-4%;right:-3%;width:min(52%,190px)}
  .story-grid{grid-template-columns:1fr;gap:26px}
  .story-track{height:auto}
  .story-stage{position:relative;height:auto;display:block;padding:40px 0}
  .story-steps{min-height:0;margin-top:30px}
  .step{position:relative;opacity:1;transform:none;margin-bottom:44px}
  .zonewrap{opacity:1;transform:none}
  .u-line,.u-label{opacity:1!important}
  .reinf-copy{padding:80px 0;max-width:480px}
  .rf-vo2{top:5%;right:6%}
  .rf-vla{display:none}
  .rf-fat{bottom:5%;right:6%}
  .sol-grid{grid-template-columns:1fr;gap:26px}
  .dragq-shell{min-height:360px}
  .biz-grid{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr}
  .nav-links,.signin{display:none}
}
@media(max-width:640px){
  .container{padding:0 20px}
  .cx .copy{padding:40px 28px}
  .bcase{flex-direction:column;align-items:flex-start}
  .cmpslider{height:470px}
  .reinf-band{min-height:500px}
  .reinf-shade{background:linear-gradient(180deg,rgba(8,11,20,.34),rgba(8,11,20,.62))}
  .reinf-copy{padding:64px 0}
  .reinf-copy h2{font-size:27px}
  .reinf-band .gf-gauge{width:88px}
  .reinf-band .gf-gauge .gx{width:62px}
  .cs-in{padding:40px 20px 24px}
  .cs-in .curvecard{width:min(86%,300px)}
  .cs-corner{font-size:9.5px;padding:5px 10px}
  .gf-gauge{width:88px}
  .gf-gauge .gx{width:62px}
  .gf-val .gnum{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .fade-up,.step,.gfloat{opacity:1!important;transform:none!important}
  .an-driver .db i{transform:scaleX(var(--w))!important}
  .rbar i{transform:none!important}
  .pd-line,.cv-draw{stroke-dashoffset:0!important}
  .pd-dot,.cv-fade{opacity:1!important}
  .u-line,.u-label{opacity:1!important}
}

/* Same FTP · Variant 3 — both athletes visible */
.abpair{position:relative;z-index:2;padding:110px 0 120px}
.abpair .container{display:flex;flex-direction:column;max-width:1304px}
.abpair-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px;width:100%;max-width:1000px;margin-left:auto;margin-right:auto}
.abcard{background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 34px 74px -44px rgba(20,28,46,.42)}
.abcard-photo{position:relative;height:290px;overflow:hidden;background:var(--surface-2)}
.abcard-photo img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:104%;width:auto;object-fit:contain}
.abcard-glow{position:absolute;inset:0;z-index:0}
.abcard-glow.a{background:radial-gradient(92% 92% at 50% 108%,rgba(78,109,140,.34),transparent 72%)}
.abcard-glow.b{background:radial-gradient(92% 92% at 50% 108%,rgba(234,88,13,.30),transparent 72%)}
.abcard-badge{position:absolute;z-index:2;top:16px;left:16px;width:34px;height:34px;border-radius:50%;background:var(--rec);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 6px 16px -6px rgba(20,28,46,.5)}
.abcard-badge.b{background:var(--carb)}
.abcard-body{padding:22px 26px 26px}
.abcard-body .spx-lim{display:block}
@media(max-width:860px){.abpair{padding:80px 0 84px}.abpair-grid{grid-template-columns:1fr;gap:20px}.abcard-photo{height:260px}}
/* sport tabs (ported from homepage comparison tabs) */
.ab-tabs{display:flex;justify-content:center;margin:34px 0 6px}
.ab-tablist{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);max-width:100%;flex-wrap:wrap;justify-content:center}
.ab-tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted-2);padding:9px 18px;border-radius:999px;white-space:nowrap;transition:color .35s}
.ab-tab[aria-selected="true"]{color:#fff}
.ab-tab:hover:not([aria-selected="true"]){color:var(--ink)}
.ab-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:0;background:linear-gradient(150deg,#2b3350,#1B1F3B);box-shadow:0 10px 24px -12px rgba(18,20,29,.6),inset 0 -2px 0 #E6261C;transition:transform .5s cubic-bezier(.34,1.18,.5,1),width .5s cubic-bezier(.34,1.18,.5,1)}
@media(max-width:600px){.ab-pill{display:none}.ab-tab[aria-selected="true"]{background:linear-gradient(150deg,#2b3350,#1B1F3B);box-shadow:inset 0 -2px 0 #E6261C}}
.abpair.is-placeholder .ab-cut{opacity:.42;filter:grayscale(.5)}
.ab-ph-note{display:none;text-align:center;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--carb);margin-top:20px}
.abpair.is-placeholder .ab-ph-note{display:block}

/* reinf2 as the closing CTA: copy left, tilted reels right, wider capsule */
.reinf2 .container{max-width:1300px}
@media(min-width:861px){.r2-cols{transform:perspective(1200px) rotateY(-14deg) scale(1.12);transform-origin:72% 50%}}

/* track graph — modern refresh: inline labels, chip legend, area fill */

/* cinematic: Glycogen gauge (4th) + fit the real hero graphs */
.cin-g4{left:calc(50% - 272px);top:51%;animation-duration:6.8s;animation-delay:-3.1s}
@media(max-width:1000px){.cin-g4{display:none}}
.cin-graphs .cg svg{border-radius:8px}

/* pv: per-tab description unfolds under the headline */
.pv-shead .pv-hs{display:block;overflow:hidden}
.pv-shead.reveal .pv-ht{animation:pvUp .45s var(--expo) both}
.pv-shead.reveal .pv-hs{animation:pvUnfold .55s var(--expo) .06s both}
@keyframes pvUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pvUnfold{from{opacity:0;transform:translateY(10px);max-height:0}to{opacity:1;transform:none;max-height:120px}}

/* A/B Variant 3 — both athletes on one spatial stage */
.abstage{position:relative;margin:44px auto 0;width:100%;max-width:1240px;height:min(58vw,580px);border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 44px 96px -52px rgba(20,28,46,.42);display:grid;grid-template-columns:1fr 1fr}
.abhalf{position:relative;overflow:hidden}
.abhalf.a{border-right:1px solid var(--border)}
.ab-glow{position:absolute;inset:0;z-index:0}
.ab-glow.a{background:radial-gradient(92% 92% at 50% 110%,rgba(78,109,140,.34),transparent 72%)}
.ab-glow.b{background:radial-gradient(92% 92% at 50% 110%,rgba(234,88,13,.30),transparent 72%)}
.ab-ghost{position:absolute;top:6%;left:50%;transform:translateX(-50%);font-size:clamp(42px,6.4vw,96px);font-weight:800;letter-spacing:-.03em;color:rgba(27,31,59,.13);white-space:nowrap;z-index:1;pointer-events:none}
.ab-cut{position:absolute;bottom:-20%;height:112%;width:auto;z-index:2;filter:drop-shadow(0 30px 44px rgba(20,28,46,.32))}
.abhalf.a .ab-cut{left:52%;transform:translateX(-50%)}
.abhalf.b .ab-cut{left:48%;transform:translateX(-50%)}
/* boat sports (rowing): wide cutout zoomed to fill the card - hull tips may bleed off the side edges
   (same treatment as the cyclists' clipped legs), athlete stays centered */
.abpair.is-boat .ab-cut{height:92%;bottom:-6%;max-width:none}
.abpair.is-boat .abhalf.a .ab-cut{left:50%}
/* B's athlete sits smaller/lower inside his source image (54% vs A's 62% of image height):
   105%/-20% renders both athletes at the same visual size with heads on the same line */
.abpair.is-boat .abhalf.b .ab-cut{left:50%;height:105%;bottom:-20%}
/* ski sport: the vertical skis tower over the athletes' heads, so at the default 112% the women
   render visibly smaller than the other sports - scale up (ski tips may clip at the card top,
   same rule as clipped legs/hulls) and pull both toward the centre so they face each other */
.abpair.is-ski .ab-cut{height:130%;bottom:-24%}
.abpair.is-ski .abhalf.a .ab-cut{left:57%}
.abpair.is-ski .abhalf.b .ab-cut{left:43%}
.ab-badge{position:absolute;z-index:5;top:16px;left:16px;width:34px;height:34px;border-radius:50%;background:var(--rec);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 6px 16px -6px rgba(20,28,46,.5)}
.ab-badge.b{background:var(--carb)}
.abhalf.b .ab-badge{left:auto;right:16px}
.ab-head{position:absolute;z-index:5;top:18px}
.abhalf.a .ab-head{left:64px;text-align:left}
.abhalf.b .ab-head{right:64px;text-align:right}
.ab-head .spx-tag{margin:3px 0 0}
.ab-metrics{position:absolute;z-index:4;bottom:24px;width:296px;background:rgba(255,255,255,.74);backdrop-filter:blur(9px) saturate(1.12);-webkit-backdrop-filter:blur(9px) saturate(1.12);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:0 22px 46px -26px rgba(20,28,46,.42)}
.abhalf.a .ab-metrics{left:20px}
.abhalf.b .ab-metrics{right:20px}
.ab-metrics .spx-lim{display:block;margin-top:10px}
.ab-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.02em;box-shadow:0 12px 32px -8px rgba(20,28,46,.6)}
/* sport-switch motion. Transition params live on the DESTINATION state: adding .sw-out uses the
   fast no-delay exit set below; removing it lands on these base sets, giving the slow staggered
   entrance (A first, B +80ms, ghost words, then metric panels rise last). Interruptible by design. */
.ab-cut{transition:opacity .42s cubic-bezier(.2,0,0,1),transform .42s cubic-bezier(.2,0,0,1),filter .42s cubic-bezier(.2,0,0,1)}
.abhalf.b .ab-cut{transition-delay:.08s}
.ab-ghost{transition:opacity .38s cubic-bezier(.2,0,0,1) .05s}
.ab-metrics{transition:opacity .34s cubic-bezier(.2,0,0,1) .16s,transform .34s cubic-bezier(.2,0,0,1) .16s}
.abhalf.b .ab-metrics{transition-delay:.22s}
.abpair.sw-out .ab-cut,.abpair.sw-out .ab-ghost,.abpair.sw-out .ab-metrics{transition-duration:.2s;transition-delay:0s}
.abpair.sw-out .abhalf.a .ab-cut{opacity:0;transform:translateX(calc(-50% - 28px));filter:drop-shadow(0 30px 44px rgba(20,28,46,.32)) blur(6px)}
.abpair.sw-out .abhalf.b .ab-cut{opacity:0;transform:translateX(calc(-50% + 28px));filter:drop-shadow(0 30px 44px rgba(20,28,46,.32)) blur(6px)}
.abpair.sw-out .ab-ghost{opacity:0}
.abpair.sw-out .ab-metrics{opacity:0;transform:translateY(10px)}
.ab-vs.vs-pop{animation:vsPop .34s cubic-bezier(.2,0,0,1)}
@keyframes vsPop{0%{transform:translate(-50%,-50%) scale(.86)}55%{transform:translate(-50%,-50%) scale(1.07)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.ab-cut,.ab-ghost,.ab-metrics{transition:none!important}.ab-vs.vs-pop{animation:none}}
@media(max-width:860px){.abstage{grid-template-columns:1fr;height:auto}.abhalf{height:620px}.abhalf.a{border-right:0;border-bottom:1px solid var(--border)}.ab-vs{display:none}.abhalf.a .ab-cut,.abhalf.b .ab-cut{left:50%;height:58%;bottom:214px}.ab-metrics{width:auto}.abhalf.a .ab-metrics{left:18px;right:18px}.abhalf.b .ab-metrics{left:18px;right:18px}.abhalf.a .ab-head{left:60px}.abhalf.b .ab-head{right:60px}}

/* Variant 2 — 6 use-case guided tabs */
.uc-panels{aspect-ratio:16/6.6;background:#fff}
.ft-panel.uc{display:grid;grid-template-columns:1.02fr .98fr;gap:0;background:#fff}
/* clean variant: no browser chrome, no card frame - plain text-left / visual-right section */
.ft-window.ft-clean{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;margin-top:28px}
/* taller than the default 16/6.6: the copy column was outgrowing the fixed-aspect panel and
   overflow:hidden cut the last bullet line mid-sentence.
   NOTE: this selector outranks the max-width:900px `.uc-panels{aspect-ratio:auto}` reset, so it
   must be unset again below or the ratio + min-height forces the panel ~1211px wide on mobile. */
.ft-window.ft-clean .uc-panels{aspect-ratio:16/7.4}
@media(max-width:900px){
  .ft-window.ft-clean .uc-panels{aspect-ratio:auto;height:auto}
  /* the zones table is 8 nowrap columns; scale the whole card down rather than let it overflow */
  .zn-card{position:relative;right:auto;bottom:auto;width:100%;transform:scale(.62);transform-origin:top left;margin-bottom:-38%}
  .zn-vis,.lim-vis,.fuel-vis,.rv-vis{min-height:340px}
  .zn-vis .zn-ath,.lim-vis .lim-ath,.fuel-vis .fuel-ath,.rv-vis .rv-coach{height:96%;bottom:-8%}
  .rv-tx{transform:scale(.86);transform-origin:center}
}
.ft-window.ft-clean,.ft-window.ft-clean .uc-panels,.ft-window.ft-clean .ft-panel.uc,.ft-window.ft-clean .uc-vis{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important}
.ft-window.ft-clean .uc-copy{padding-left:0}
.ft-window.ft-clean .uc-vis{background:transparent!important;border:0!important;box-shadow:none!important}
.ft-window.ft-clean .ft-panel.uc,.ft-window.ft-clean .uc-vis{overflow:visible!important}
/* clean panels are transparent, so a symmetric crossfade briefly superimposes both visuals
   (white report cards ghosting behind the athlete): fade the outgoing panel out FAST and
   bring the incoming one in on a short delay so they never visibly overlap */
.ft-window.ft-clean .ft-panel{transition:opacity .24s var(--expo),transform .5s var(--expo)}
.ft-window.ft-clean .ft-panel.on{transition:opacity .5s var(--expo) .14s,transform .7s var(--expo) .14s;z-index:2}
/* fueling visual: triathlete cutout + hero-style floating combustion graph and gauges */
.fuel-vis{overflow:visible;background:transparent!important;border:0!important}
/* oversized cutout, lower ~30% cropped by the panel edge; the mask fades the image out just
   BEFORE the crop line so the cut reads as a soft wash into the page, not a hard edge.
   Image is 148% of panel with bottom -30%, so the panel edge sits at ~80% of image height. */
.fuel-vis .fuel-ath{position:absolute;left:38%;bottom:-30%;transform:translateX(-50%);height:148%;width:auto;max-width:none;max-height:none!important;z-index:2;border-radius:0!important;box-shadow:none!important;filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.55) 72%,transparent 79.5%);mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.55) 72%,transparent 79.5%)}
.fuel-vis .gfloat{opacity:1;transform:none;animation-play-state:running}
.fuel-vis .fv-graph{right:-2%;bottom:4%;width:min(58%,300px);z-index:3}
.fuel-vis .fv-fat{left:2%;top:15%;z-index:3;animation-delay:-2.4s}
.fuel-vis .fv-carb{right:10%;top:5%;z-index:1;animation-delay:-4.2s}
/* limiters visual: runner + coded metabolic-fingerprint radar (SVG, not an image) */
.lim-vis{overflow:visible;background:transparent!important;border:0!important}
/* this cutout is far taller/narrower than the cyclist (946x1921), so height% - |bottom%| must
   stay <= 100% or his head punches up through the tab row above the panel */
.lim-vis .lim-ath{position:absolute;left:46%;bottom:-26%;transform:translateX(-50%);height:124%;width:auto;max-width:none;max-height:none!important;z-index:2;border-radius:0!important;box-shadow:none!important;filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.55) 68%,transparent 76%);mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.55) 68%,transparent 76%)}
.lim-vis .gfloat{opacity:1;transform:none;animation-play-state:running}
.lim-vis .lim-radar{right:-1%;bottom:2%;width:min(56%,262px);z-index:3;padding:12px 12px 10px}
.lim-vis .lim-svg{width:100%;height:auto;display:block;overflow:visible}
/* the collapsed spoke is the story: fill the shape in brand slate, flag the dent in red */
.lim-svg .lr-area{fill:rgba(78,109,140,.22);stroke:var(--rec);stroke-width:2;stroke-linejoin:round}
.lim-svg .lr-hit{fill:var(--red);stroke:#fff;stroke-width:2}
.lim-svg .lr-lim-lab{fill:var(--red)}
.lim-key{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--card-mut);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.lim-key b{color:var(--card-ink);font-weight:800}
.lim-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.lim-vis .lim-vla{left:1%;top:42%;z-index:3;animation-delay:-3.1s}
/* zones visual: athlete + coded training-zones table (recreated from the app, not a screenshot) */
.zn-vis{overflow:visible;background:transparent!important;border:0!important}
/* the zones table overlaps his legs, so he only needs a short fade at the very bottom */
.zn-vis .zn-ath{position:absolute;left:31%;bottom:-24%;transform:translateX(-50%);height:124%;width:auto;max-width:none;max-height:none!important;z-index:2;border-radius:0!important;box-shadow:none!important;filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.5) 63%,transparent 71%);mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.5) 63%,transparent 71%)}
.zn-vis .gfloat{opacity:1;transform:none;animation-play-state:running}
/* recreation of the real app's zones table: white sheet, stacked label/value/unit cells,
   grouped "Physiological Conditions" header. Sits low and overlaps the athlete's legs so the
   panel has no dead band above or below it. */
/* frosted glass, same language as the other floating cards */
.zn-card{position:absolute;right:-3%;bottom:5%;width:min(88%,452px);z-index:3;background:linear-gradient(160deg,rgba(247,249,252,.88),rgba(226,231,238,.8));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.78);border-radius:16px;box-shadow:0 24px 50px -24px rgba(14,22,38,.44),inset 0 1px 0 rgba(255,255,255,.85);padding:0;overflow:hidden;animation:none}
.zn-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.zn-tbl thead th{font-size:9.5px;font-weight:700;color:var(--card-ink);text-align:center;padding:7px 4px;background:rgba(255,255,255,.34);border-bottom:1px solid rgba(27,31,59,.1);white-space:nowrap;vertical-align:middle}
.zn-tbl th.zn-h-zone{text-align:left;padding-left:11px}
.zn-tbl th.zn-h-phys{border-left:1px solid rgba(27,31,59,.08)}
.zn-tbl tr.zn-sub th{font-size:8.5px;font-weight:600;color:var(--card-mut);padding:4px}
.zn-tbl td{padding:7px 4px;border-bottom:1px solid rgba(27,31,59,.07);text-align:center;white-space:nowrap;vertical-align:middle}
.zn-tbl tbody tr:last-child td{border-bottom:0}
.zn-name{text-align:left!important;padding-left:11px!important;font-size:10.5px;font-weight:700;color:var(--card-ink);letter-spacing:-.01em}
.zn-code{font-size:10.5px;color:var(--card-mut);font-weight:600}
.zn-v{line-height:1.15}
.zn-v i{display:block;font-style:normal;font-size:7.5px;font-weight:600;color:var(--card-mut)}
.zn-v b{display:block;font-size:11.5px;font-weight:800;color:var(--card-ink)}
.zn-v u{display:block;text-decoration:none;font-size:7.5px;font-weight:600;color:#9aa1ad}
.zn-dash{color:#c3c8d0;font-size:12px}
.zn-hi td{background:rgba(230,38,28,.045)}
.zn-hi .zn-name{color:var(--red)}
/* revenue visual: coach with a tablet + incoming-payment notifications drifting in */
.rv-vis{overflow:visible;background:transparent!important;border:0!important}
.rv-vis .rv-coach{position:absolute;left:46%;bottom:-24%;transform:translateX(-50%);height:124%;width:auto;max-width:none;max-height:none!important;z-index:2;border-radius:0!important;box-shadow:none!important;filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.55) 71%,transparent 79%);mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.55) 71%,transparent 79%)}
.rv-tx{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 9px;border-radius:13px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 36px -18px rgba(14,22,38,.42),inset 0 1px 0 rgba(255,255,255,.9);white-space:nowrap;animation:rvIn .7s var(--expo) both,gbob 6.4s ease-in-out infinite alternate}
.rv-ic{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(22,163,74,.12);color:#16a34a;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;line-height:1}
.rv-tt{display:flex;flex-direction:column;line-height:1.2}
.rv-tt b{font-size:11.5px;font-weight:800;color:var(--card-ink);letter-spacing:-.01em}
.rv-tt em{font-style:normal;font-size:9.5px;font-weight:600;color:var(--card-mut)}
.rv-amt{margin-left:6px;font-size:13px;font-weight:800;color:#16a34a;font-variant-numeric:tabular-nums}
@keyframes rvIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.rv-t1{left:-4%;top:10%;animation-delay:0s,-1.2s}
.rv-t2{right:-1%;top:4%;animation-delay:.14s,-3.4s}
.rv-t3{left:-6%;top:44%;animation-delay:.28s,-2.1s}
.rv-t4{right:-4%;top:64%;animation-delay:.42s,-4.6s}
.rv-total{position:absolute;right:1%;bottom:4%;z-index:5;width:min(58%,258px);padding:12px 14px 13px;text-align:center;animation:none;opacity:1;transform:none}
.rv-big{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--card-ink);line-height:1;font-variant-numeric:tabular-nums}
.rv-big span{color:var(--red);font-size:22px;margin-left:1px}
.rv-sub{margin-top:6px;font-size:10.5px;line-height:1.45;font-weight:600;color:var(--card-mut)}
@media(prefers-reduced-motion:reduce){.rv-tx{animation:none}}
.uc-copy{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center}
.uc-eb{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.uc-copy h3{font-size:clamp(24px,2.5vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.16;color:var(--ink);text-wrap:balance}
.uc-copy>p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--muted);max-width:46ch}
.uc-bul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.uc-bul li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:var(--muted);font-weight:500}
.uc-bul li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;background:rgba(230,38,28,.1)}
.uc-bul li::after{content:"";position:absolute;left:4.4px;top:9px;width:4.5px;height:4.5px;border-radius:50%;background:var(--red)}
.uc-vis{position:relative;background:linear-gradient(160deg,var(--surface-2),#eceef2);border-left:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:26px}
.uc-vis img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 24px 54px -30px rgba(20,28,46,.4)}
.uc-stat{flex-direction:column;text-align:center;gap:6px}
.uc-statbig{font-size:clamp(52px,7vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.uc-statbig span{color:var(--red);font-size:.5em;vertical-align:super;margin-left:2px}
.uc-statlab{font-size:15px;font-weight:700;color:var(--ink);max-width:22ch}
.uc-statsub{font-size:12.5px;color:var(--muted);margin-top:2px}
.uc-fan{padding:0;background:transparent!important;border:0!important}.uc-fan .rp-rf{width:100%;height:100%}
/* that vignette existed to blend the report fan into the old solid card; on the transparent
   clean panel it paints opaque grey bands that read as a box behind the reports */
.ft-window.ft-clean .rp-rf::after{background:none!important}
@media(max-width:900px){.ft-panel.uc{grid-template-columns:1fr}.uc-vis{border-left:0;border-top:1px solid var(--border);min-height:180px}.uc-panels{aspect-ratio:auto;height:auto;min-height:560px}.ft-panel.uc{position:relative;height:auto}.ft-panel.uc:not(.on){display:none}}

/* certified coach: real Earth rising from the fold, blinking coach pins, left/right callouts */
.cert-globe{position:relative;width:100%;max-width:1240px;margin:56px auto 0;height:clamp(360px,44vw,560px);overflow:hidden}
.cert-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gl-card{position:absolute;z-index:5;width:220px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-radius:14px;padding:12px 14px;
  box-shadow:0 0 0 1px rgba(27,31,59,.07),0 2px 6px -2px rgba(20,28,46,.10),0 14px 34px -14px rgba(20,28,46,.28),0 34px 70px -30px rgba(20,28,46,.32);
  opacity:0;transform:translateY(8px) scale(.975);filter:blur(3px);
  transition-property:opacity,transform,filter;transition-duration:.55s,.55s,.4s;transition-timing-function:cubic-bezier(.2,0,0,1);pointer-events:none}
.gl-card.on{opacity:1;transform:none;filter:blur(0)}
.gl-card.l{left:0;text-align:right}
.gl-card.r{right:0}
.gl-type{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--carb)}
.gl-name{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:3px}
.gl-place{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
.gl-count{margin-top:18px;font-size:13px;font-weight:600;color:var(--muted)}
.gl-count b{color:var(--ink);font-weight:800}
/* globe variant 2 (folded): same section as v1, clean dotted skin */
.cert2{position:relative;z-index:2;padding:120px 0 0;overflow:hidden}
@media(max-width:860px){
  .cert-globe{height:clamp(280px,58vw,380px)}
  .gl-card{display:none}   /* the globe is too small to hang callouts on; pins alone read cleanly */
}

/* cinematic hero graphs: scope the curve strokes so the global .fat combo can't hijack them */
.cin-graphs svg .fat{stroke:#0F766E;stroke-width:7;fill:none}
.cin-graphs svg .carb{stroke:#EA580D;stroke-width:7;fill:none}
.cin-graphs svg .lrec{stroke:#4E6D8C;stroke-width:7;fill:none}
.cin-graphs svg .lacc{stroke:#C026D3;stroke-width:7;fill:none}
.cin-graphs svg .leg-bg{fill:rgba(38,42,50,.6);stroke:rgba(255,255,255,.12)}
.cin-graphs svg .leg-tx{fill:#3b4256}

/* ===== Labs page scaffold ===== */
/* labs hero headline: a notch smaller than coaching so it doesn't dominate the fold */
.hero-h1{font-size:clamp(34px,4.2vw,52px)!important;line-height:1.05!important}
.lab-sec{padding:clamp(56px,8vw,104px) 0}
.lab-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.lab-grid.lab-alt .lab-copy{order:2}
.lab-grid.lab-alt .lab-visual{order:1}
.lab-copy .sec-title{margin:14px 0 18px}
.lab-visual{position:relative}
.lab-ph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:clamp(280px,32vw,420px);border-radius:20px;border:1px dashed rgba(27,31,59,.24);background:linear-gradient(160deg,var(--surface-2),#eceff3);color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.01em;padding:24px}
.lab-quote{max-width:900px;margin:clamp(40px,6vw,72px) auto 0;text-align:center;font-size:clamp(17px,2.1vw,21px);line-height:1.5;font-weight:600;color:var(--muted);border:0}
.lab-quote::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--red);margin:0 auto 18px}
@media(max-width:860px){.lab-grid{grid-template-columns:1fr;gap:26px}.lab-grid.lab-alt .lab-copy{order:1}.lab-grid.lab-alt .lab-visual{order:2}}

/* ===== Problem -> Solution : PINNED scroll showcase =====
   The section is a tall track with a sticky viewport, so exactly one state is in focus at a
   time. Scroll progress picks the state; every state change trades the visual and copy sides
   (manual FLIP), which is the horizontal cross-over from the reference component. */
.lp3{position:relative;height:330vh}
.lp3-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.lp3-glow{position:absolute;inset:0;z-index:0;pointer-events:none;transition:background 1.1s cubic-bezier(.16,1,.3,1)}
.lp3[data-side="L"] .lp3-glow{background:radial-gradient(56% 60% at 24% 52%,rgba(230,38,28,.09),transparent 62%)}
.lp3[data-side="R"] .lp3-glow{background:radial-gradient(56% 60% at 76% 52%,rgba(78,109,140,.15),transparent 62%)}
.lp3 .container{position:relative;z-index:1;width:100%}
.lp3-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,5.5vw,78px)}
.lp3-head .eyebrow{margin-bottom:12px}
.lp3-title{font-size:clamp(22px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.14;color:var(--ink)}
.lp3-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.lp3-visual,.lp3-content{position:relative;min-height:clamp(300px,40vh,420px)}
/* --- state layers --- */
.lp3-vis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(var(--enter,44px)) scale(1.05);filter:blur(14px);transition:opacity .5s var(--expo),transform .7s var(--expo),filter .5s var(--expo);pointer-events:none}
.lp3-vis.k-problem{--enter:-44px}
.lp3-vis.k-solution{--enter:44px}
.lp3-vis.on{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
.lp3-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:22px;border:1px dashed rgba(27,31,59,.2);background:linear-gradient(160deg,var(--surface-2),#eceff3);color:var(--muted);font-size:14px;font-weight:600;padding:28px}
/* --- copy --- */
.lp3-block{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none}
.lp3-block.on{opacity:1;pointer-events:auto}
.lp3-block > *{opacity:0;transform:translateY(18px);filter:blur(9px)}
.lp3-block.on.run > *{animation:lp3in .62s var(--expo) forwards}
.lp3-block.on.run > *:nth-child(1){animation-delay:.04s}
.lp3-block.on.run > *:nth-child(2){animation-delay:.12s}
.lp3-block.on.run > *:nth-child(3){animation-delay:.2s}
@keyframes lp3in{to{opacity:1;transform:none;filter:blur(0)}}
.lp3-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2)}
.lp3-tag .dot{width:7px;height:7px;border-radius:50%}
.lp3-block.k-problem .lp3-tag .dot{background:var(--red)}
.lp3-block.k-solution .lp3-tag .dot{background:var(--rec)}
.lp3-h{font-size:clamp(23px,2.6vw,35px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:14px 0 12px;color:var(--ink)}
.lp3-p{font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.6;color:var(--muted);max-width:32em}
/* --- progress rail --- */
.lp3-rail{display:flex;justify-content:center;gap:7px;margin-top:clamp(18px,2.6vw,34px)}
.lp3-seg{width:44px;height:4px;border-radius:3px;background:rgba(27,31,59,.13);overflow:hidden}
.lp3-seg i{display:block;height:100%;width:0;border-radius:3px;background:var(--ink);transition:width .18s linear}

/* ===== state 0 : live lactate curve + physiological controllers ===== */
.lc-card{width:100%;max-width:560px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.8);border-radius:20px;box-shadow:0 30px 66px -34px rgba(14,22,38,.42),inset 0 1px 0 rgba(255,255,255,.85);padding:16px 18px 14px}
.lc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.lc-ttl{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.lc-gwrap{position:relative}
.lc-pill{position:absolute;z-index:6;top:3px;left:50%;transform:translate(-50%,0);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:#fff;background:var(--rec);padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums;box-shadow:0 8px 18px -8px rgba(20,28,46,.5);transition:background .3s,opacity .3s}
.lc-pill svg{width:9px;height:9px}
.lc-pill.neg svg{transform:rotate(180deg)}
.lc-pill.neg{background:var(--red)}
.lc-pill.zero{opacity:.35;background:var(--muted-2)}
.lc-svg{width:100%;height:auto;display:block}
.lc-grid line{stroke:rgba(27,31,59,.26);stroke-width:1.6;stroke-linecap:round}
.lc-grid line.lc-g{stroke:rgba(27,31,59,.06);stroke-width:1;stroke-linecap:butt}
.lc-grid line.lc-tick{stroke:rgba(27,31,59,.2);stroke-width:1.4;stroke-linecap:butt}
.lc-ref{stroke:rgba(27,31,59,.32);stroke-width:1.2;stroke-dasharray:5 5}
.lc-ax,.lc-axl{font-family:Manrope,system-ui,sans-serif;font-size:10px;font-weight:700;fill:var(--muted-2)}
.lc-leg{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--muted-2)}
.lc-leg i{width:15px;height:0;border-top:3.5px dotted var(--rec);border-radius:2px}
.lc-leg i.lg-gh{border-top:3px solid rgba(78,109,140,.4);margin-left:8px}
.lc-ghost{fill:none;stroke:var(--rec);opacity:.36;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.lc-curve{fill:none;stroke:var(--rec);stroke-width:4;stroke-dasharray:.5 10.5;stroke-linecap:round;stroke-linejoin:round}
.lc-lt{stroke:rgba(27,31,59,.34);stroke-width:1.3;stroke-dasharray:4 4}
.lc-ltt{font-family:Manrope,system-ui,sans-serif;font-size:11px;font-weight:800;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.lc-ctrls{margin-top:10px;display:grid;gap:7px}
.lc-row{display:grid;grid-template-columns:1fr 128px;align-items:center;gap:10px}
.lc-lab{font-size:11px;font-weight:700;color:var(--muted)}
.lc-track{position:relative;height:5px;border-radius:3px;background:rgba(27,31,59,.1)}
.lc-track i{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;border-radius:50%;background:#fff;border:2px solid var(--rec);box-shadow:0 2px 6px rgba(20,28,46,.28);left:50%}
.lc-foot{margin-top:9px;text-align:center;font-size:11px;font-weight:700;color:var(--muted-2)}

/* ===== state 1 : laptop opens on scroll, metrics pop ===== */
.mb{width:100%;max-width:470px;display:flex;flex-direction:column;align-items:center}
.mb-lidwrap{width:100%;perspective:1100px}
.mb-lid{transform-origin:bottom center;transform:rotateX(var(--open,-88deg));transition:transform .06s linear;background:#0e1116;border-radius:12px 12px 3px 3px;padding:8px 8px 10px;box-shadow:0 30px 60px -30px rgba(14,22,38,.6)}
.mb-screen{position:relative;aspect-ratio:16/10.4;border-radius:7px;overflow:hidden;background:linear-gradient(160deg,#f7f9fc,#e8edf3)}
.mb-ui{position:absolute;inset:0;padding:11px 13px;display:flex;flex-direction:column}
.mb-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.mb-brand{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.mb-status{font-size:9px;font-weight:700;color:var(--muted-2);opacity:0;transition:opacity .4s}
.mb.is-open .mb-status{opacity:1}
.mb-graph{width:100%;flex:1;min-height:0}
.mb-line{fill:none;stroke:var(--rec);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.mb-4mm{stroke:rgba(27,31,59,.28);stroke-width:1;stroke-dasharray:4 4}
.mb.is-open .mb-line{stroke-dashoffset:0}
/* the sweeping analysis line */
.mb-scan{position:absolute;top:26px;bottom:34px;width:2px;left:12px;background:linear-gradient(180deg,transparent,rgba(78,109,140,.75),transparent);opacity:0}
.mb.is-open .mb-scan{animation:mbscan 1.9s cubic-bezier(.4,0,.2,1) .15s 1 forwards}
@keyframes mbscan{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(calc(100% + 300px))}}
.mb{position:relative}
.mb-gcards{position:absolute;inset:0;pointer-events:none;z-index:6}
.mb-gc{position:absolute;background:#fff;border:1px solid rgba(255,255,255,.85);border-radius:16px;padding:9px 11px 8px;text-align:center;box-shadow:0 26px 50px -22px rgba(20,28,46,.45),0 8px 18px -10px rgba(20,28,46,.2);opacity:0;transform:scale(.25) translateY(28px);filter:blur(4px)}
.mb-gc .gf-cap{font-size:10.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.mb-gc .gx{display:block;width:84px;height:auto;margin:0 auto}
.mb-gc .gnum{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mb-gc .gun{margin-left:3px;font-size:8.5px;font-weight:600;color:var(--muted-2)}
.mb-gc.g1{left:1%;top:6%}
.mb-gc.g2{left:50%;top:-10%;margin-left:-77px;width:154px;z-index:2}
.mb-gc.g2 .gx{width:108px}
.mb-gc.g2 .gnum{font-size:17px}
.mb-gc.g3{right:1%;top:6%}
.mb.is-open .mb-gc{animation:mbpop .55s cubic-bezier(.34,1.56,.64,1) forwards}
.mb.is-open .mb-gc.g1{animation-delay:1.08s}
.mb.is-open .mb-gc.g2{animation-delay:1.24s}
.mb.is-open .mb-gc.g3{animation-delay:1.42s}
@keyframes mbpop{to{opacity:1;transform:none;filter:blur(0)}}
.mb-base{width:112%;height:11px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#2a2f37,#171b21);position:relative;box-shadow:0 16px 26px -14px rgba(14,22,38,.55)}
.mb-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:66px;height:4px;border-radius:0 0 5px 5px;background:rgba(255,255,255,.16)}

/* ===== state 2 : the old-paper artefact ===== */
.lp3-paper{position:relative;transform:rotate(-1.6deg)}
.lp3-paper img{width:100%;max-width:520px;height:auto;display:block;filter:drop-shadow(0 30px 44px rgba(14,22,38,.30)) drop-shadow(0 8px 16px rgba(14,22,38,.16))}
.lp3-stamp{position:absolute;right:-6px;bottom:-12px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:rgba(255,255,255,.92);border:1px solid rgba(230,38,28,.35);border-radius:999px;padding:6px 12px;transform:rotate(-2deg);box-shadow:0 10px 22px -12px rgba(20,28,46,.45)}

@media(max-width:860px){
  .lp3{height:auto}
  .lp3-pin{position:relative;height:auto;padding:40px 0}
  .lp3-grid{grid-template-columns:1fr;gap:20px}
  .lp3-visual{order:-1!important;min-height:clamp(260px,64vw,340px)}
  .lp3-content{min-height:250px}
  .lp3-vis{transform:none;filter:none}
  .lp3-vis:not(.on){display:none}
  .lp3-block:not(.on){display:none}
}
@media(prefers-reduced-motion:reduce){
  .lp3-vis{transition:opacity .2s;transform:none;filter:none}
  .lp3-block > *{opacity:1;transform:none;filter:none;animation:none!important}
  .mb-scan{display:none}
  .mb-gc{opacity:1;transform:none;filter:none;animation:none!important}
}

/* ===== 360 solution : standalone single-column dashboard ===== */
.lp4{padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px)}
.lp4-head{text-align:center;max-width:800px;margin:0 auto clamp(34px,5vw,58px)}
.lp4-head .eyebrow{margin-bottom:14px}
.lp4-head .sec-sub{margin:16px auto 0}
.lp4-stage{position:relative;max-width:1040px;margin:0 auto}
/* metrics that sit OUTSIDE the frame, like the floating chips in the reference */
.lp4-out{position:absolute;top:46%;z-index:3;display:flex;flex-direction:column;gap:14px}
.lp4-out-l{left:0;transform:translateX(-58%)}
.lp4-out-r{right:0;transform:translateX(58%);text-align:right}
.lp4-oc{width:120px;text-align:center;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:16px;padding:9px 10px 8px;box-shadow:0 24px 48px -22px rgba(20,28,46,.45),0 8px 18px -10px rgba(20,28,46,.18);animation:lp4bob 7s ease-in-out infinite alternate}
.lp4-oc .gf-cap{font-size:9.5px;font-weight:700;color:var(--ink);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp4-oc .gx{display:block;width:64px;height:auto;margin:0 auto}
.lp4-oc .gnum{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp4-oc .gun{margin-left:3px;font-size:8px;font-weight:600;color:var(--muted-2)}
.lp4-out-r .lp4-oc{animation-delay:-3.2s;margin-left:auto}
@keyframes lp4bob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

/* the dashboard frame, cut off at the bottom by a white fade */
.lp4-frame{position:relative;overflow:hidden;max-height:clamp(600px,66vw,800px)}
.lp4-fade{position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 82%);pointer-events:none}
.lp4-app{padding:2px}
/* athlete profile row */
.lp4-athlete{display:flex;align-items:center;gap:20px;padding:13px 18px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 14px 30px -24px rgba(20,28,46,.35);margin-bottom:16px;flex-wrap:wrap}
.lp4-avatar{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--surface-2);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,28,46,.2)}
.lp4-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lp4-who{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:6px}
.lp4-who b{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.lp4-who i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
.lp4-field{display:flex;flex-direction:column;gap:1px;padding-left:20px;border-left:1px solid var(--border)}
.lp4-field i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.lp4-field b{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.lp4-change{margin-left:auto;flex:none;font-size:11px;font-weight:700;color:var(--ink);border:1px solid var(--border);border-radius:9px;padding:8px 13px;background:#fff;box-shadow:0 2px 6px -2px rgba(20,28,46,.15)}

/* six metric tiles */
.lp4-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.lp4-m{border:1px solid var(--border);border-radius:14px;padding:10px 6px 9px;background:#fff;text-align:center;min-width:0;box-shadow:0 12px 26px -22px rgba(20,28,46,.35)}
.lp4-m .gf-cap{font-size:10.5px;font-weight:700;color:var(--ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp4-m .gx{display:block;width:72px;max-width:88%;height:auto;margin:0 auto}
.lp4-m .gnum{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp4-m .gun{margin-left:3px;font-size:8.5px;font-weight:600;color:var(--muted-2);white-space:nowrap}
/* the two graphs */
.lp4-graphs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.lp4-g{border:1px solid var(--border);border-radius:14px;padding:14px 16px 11px;background:#fff;box-shadow:0 12px 26px -22px rgba(20,28,46,.35)}
.lp4-gh{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;margin-bottom:8px;flex-wrap:wrap}
.lp4-gh b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.lp4-key{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;color:var(--muted-2);flex-wrap:wrap}
.lp4-key i{width:14px;height:0;border-top:3px solid;border-radius:2px;display:inline-block}
.lp4-key i.k-fat{border-color:var(--green,#0F766E)}
.lp4-key i.k-carb{border-color:var(--carb,#EA580D);margin-left:8px}
.lp4-key i.k-zone{width:10px;height:10px;border:0;border-radius:3px;background:rgba(15,118,110,.16);outline:1px solid rgba(15,118,110,.3);outline-offset:-1px;margin-left:8px}
.lp4-key i.k-rec{border-color:var(--rec)}
.lp4-key i.k-acc{border-color:#C026D3;margin-left:8px}
.lp4-gbody .stack{position:relative}
.lp4-gbody .ly{display:block}
.lp4-gbody .ly.over{position:absolute;inset:0}
.lp4-gbody .gx{width:100%;height:auto;display:block}
.lp4-gbody .fat{stroke:var(--green,#0F766E);stroke-width:4;fill:none}
.lp4-gbody .carb{stroke:var(--carb,#EA580D);stroke-width:4;fill:none}
.lp4-gbody .lrec{stroke:var(--rec);stroke-width:4;fill:none}
.lp4-gbody .lacc{stroke:#C026D3;stroke-width:4;fill:none}
.lp4-xl{text-align:center;font-size:9px;font-weight:700;color:var(--muted-2);margin-top:2px}
.lp4-read{display:flex;flex-wrap:wrap;gap:4px 14px;border-top:1px solid var(--border);margin-top:10px;padding-top:9px;font-size:10.5px;font-weight:700;color:var(--muted)}
.lp4-read b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.lp4-read .v-fat{color:var(--green,#0F766E)}
.lp4-read .v-carb{color:var(--carb,#EA580D)}
.lp4-read .v-rec{color:var(--rec)}
.lp4-read .v-acc{color:#C026D3}
/* the cut-off zone rows that prove there is more below */
.lp4-more{display:grid;gap:7px}
.lp4-zrow{display:grid;grid-template-columns:1.5fr 1fr .7fr;gap:10px;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:#fff}
.lp4-zrow span:first-child{color:var(--ink);font-weight:700}
.lp4-zrow span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:1100px){
  .lp4-out-l{transform:translateX(-14%)}
  .lp4-out-r{transform:translateX(14%)}
}
@media(max-width:860px){
  .lp4-out{display:none}
  .lp4-field,.lp4-change{display:none}
  .lp4-metrics{grid-template-columns:repeat(3,1fr)}
  .lp4-graphs{grid-template-columns:1fr}
  .lp4-frame{max-height:clamp(680px,190vw,960px)}
}
@media(prefers-reduced-motion:reduce){.lp4-oc{animation:none}}

/* ===== equipment bento ===== */
.lp5{padding:clamp(56px,8vw,104px) 0}
.lp5-head{text-align:left;max-width:820px;margin:0 0 clamp(30px,4.5vw,52px)}
.lp5-head .eyebrow{margin-bottom:14px}
.lp5-head .sec-sub{margin:16px 0 0}
.lp5-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.lp5-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:clamp(210px,22vw,258px);border-radius:20px;border:1px solid var(--border);background:linear-gradient(160deg,#fbfcfd,#f1f4f8);padding:18px 18px 0;overflow:hidden;transition:transform .45s var(--expo),box-shadow .45s var(--expo)}
.lp5-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(20,28,46,.42)}
.lp5-wide{grid-column:span 2;flex-direction:row;align-items:center;padding:20px 0 20px 22px}
.lp5-txt{position:relative;z-index:1}
.lp5-wide .lp5-txt{max-width:52%}
.lp5-card h3{font-size:clamp(15px,1.35vw,17.5px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.lp5-card p{font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:500}
.lp5-chip{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--rec);background:rgba(78,109,140,.1);border:1px solid rgba(78,109,140,.24);border-radius:999px;padding:5px 10px}
.lp5-img{display:flex;align-items:flex-end;justify-content:center;flex:1;min-height:0}
.lp5-img img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 18px 26px rgba(20,28,46,.18))}
.lp5-wide .lp5-img{align-items:center;padding-right:12px}
.lp5-wide .lp5-img img{max-height:190px}
.lp5-img-duo{gap:8px;align-items:flex-end}
.lp5-img-duo img{max-height:118px}
.lp5-wide .lp5-img-duo img{max-height:150px}
/* the VO2 card is the upsell, give it the brand tint */
.lp5-accent{background:linear-gradient(160deg,#f2f6fa,#e6edf4);border-color:rgba(78,109,140,.28)}
.lp5-foot{text-align:center;margin-top:clamp(22px,3vw,34px);font-size:13px;font-weight:700;color:var(--muted-2)}
@media(max-width:1000px){
  .lp5-bento{grid-template-columns:repeat(2,1fr)}
  .lp5-wide{grid-column:span 2}
}
@media(max-width:640px){
  .lp5-bento{grid-template-columns:1fr}
  .lp5-wide{grid-column:span 1;flex-direction:column;align-items:stretch;padding:18px 18px 0}
  .lp5-wide .lp5-txt{max-width:none}
  .lp5-wide .lp5-img{padding-right:0}
}

/* ===== science : fey-card study deck (1:1 with the homepage deck, light theme) ===== */
.lp6{padding:clamp(56px,8vw,104px) 0;overflow:hidden}
.lp6-head{text-align:center;max-width:840px;margin:0 auto clamp(10px,1.6vw,20px)}
.lp6-head .eyebrow{margin-bottom:14px}
.lp6-head .sec-sub{margin:16px auto 0}
.lp6-stage{position:relative;margin-top:34px;height:clamp(420px,44vw,540px);display:flex;align-items:center;justify-content:center}
/* the caption fades in on hover, like the fey signature */
.lp6-caption{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:60;pointer-events:none;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--muted);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:999px;padding:8px 16px;transition:opacity .35s var(--expo),transform .35s var(--expo);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.lp6-deck{position:relative;width:min(880px,94vw);height:clamp(360px,38vw,460px);perspective:1600px}
/* cards sit tilted and only partly visible at rest; hover straightens + lifts the hovered one */
.lp6-card{position:absolute;top:0;bottom:0;margin:auto;left:50%;width:clamp(230px,24vw,300px);height:clamp(330px,35vw,430px);margin-left:calc(clamp(230px,24vw,300px) / -2);display:flex;flex-direction:column;border-radius:14px;overflow:hidden;cursor:pointer;background:#fff;border:1px solid var(--border);box-shadow:0 30px 64px -30px rgba(20,28,46,.5);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .45s var(--expo);will-change:transform}
.lp6-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;background:linear-gradient(#fcfcfd,#f1f2f6);border-bottom:1px solid rgba(20,28,46,.08)}
.lp6-dots{display:flex;gap:5px}
.lp6-dots i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.09),inset 0 1px 1px rgba(255,255,255,.5)}
.lp6-dots i:nth-child(1){background:#ff5f57}
.lp6-dots i:nth-child(2){background:#febc2e}
.lp6-dots i:nth-child(3){background:#28c840}
.lp6-url{flex:1;max-width:150px;height:13px;border-radius:999px;background:#fff;border:1px solid rgba(20,28,46,.1)}
.lp6-pg{position:relative;flex:1;min-height:0;overflow:hidden;background:#fbfbfc}
.lp6-pg img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.lp6-pg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 74%,rgba(255,255,255,.85) 100%)}
.lp6-card::after{content:"";position:absolute;inset:26px 0 0 0;background:linear-gradient(105deg,rgba(14,22,38,.02) 30%,rgba(14,22,38,.30));transition:opacity .45s var(--expo);pointer-events:none}
.lp6-card.active::after{opacity:0}
.lp6-card.active{box-shadow:0 50px 100px -30px rgba(20,28,46,.6),0 0 0 1px rgba(78,109,140,.35)}
.lp6-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.4vw,42px);max-width:900px;margin-left:auto;margin-right:auto}
.lp6-fact{text-align:center;border:1px solid var(--border);border-radius:16px;background:linear-gradient(160deg,#fbfcfd,#f2f5f9);padding:16px 14px}
.lp6-fact b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:4px}
.lp6-fact span{font-size:11.5px;line-height:1.45;color:var(--muted);font-weight:500}
@media(max-width:860px){
  .lp6-facts{grid-template-columns:1fr}
  .lp6-stage{height:clamp(340px,74vw,420px)}
}
@media(prefers-reduced-motion:reduce){.lp6-card{transition:none}}

/* ===== round 8 : paired sections + polish ===== */
.vchip-row{text-align:center}
.lab-sec.paired{padding-top:0}
.lab-grid .lp7b-stage{height:clamp(430px,42vw,560px)}
.lab-grid .lp7b-sheet{width:min(64%,372px)}
.lab-grid .rj-card,.lab-grid .lv-card{max-width:none}
.sec-title,.lp3-title,.hero-h1{text-wrap:balance}
.sec-sub,.lp3-p{text-wrap:pretty}
.lp6-card:focus-visible{outline:2px solid var(--rec);outline-offset:3px}
.rj-range:focus-visible{outline:2px solid var(--rec);outline-offset:2px;border-radius:99px}
.lv-opt:active{transform:scale(.96)}
.l9-loopgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.5vw,48px);align-items:center;max-width:1060px;margin:clamp(44px,6vw,70px) auto 0}
.l9-loopcopy h3{font-size:clamp(20px,2.3vw,29px);font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:10px;text-wrap:balance}
.l9-loopcopy h3 .accent{color:var(--red)}
.l9-loopcopy p{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:500;max-width:46ch;text-wrap:pretty}
.l9-loopgrid .rt-card{max-width:none;margin:0}
@media(max-width:960px){.l9-loopgrid{grid-template-columns:1fr}}
/* ===== round 7 : reports + retention + ROI + CTA ===== */
.vchip{display:inline-flex;align-items:center;gap:8px;align-self:center;margin:0 auto clamp(20px,3vw,30px);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:7px 14px;border-radius:999px;border:1px dashed rgba(27,31,59,.3);background:rgba(255,255,255,.7)}
.vwrap{display:flex;flex-direction:column}
.vblock{margin-top:clamp(30px,4.5vw,54px);display:flex;flex-direction:column}
.vblock>.vchip{align-self:center}
/* --- lp7a : report fan --- */
.lp7-fan{position:relative;height:clamp(320px,38vw,450px)}
.lp7-fan .rp-rf{inset:0}
.lp7-fan .rp-rf::after{background:linear-gradient(to right,#fff 0%,transparent 10%,transparent 90%,#fff 100%),linear-gradient(to bottom,transparent 82%,#fff 100%)}
/* --- lp7b : live report builder --- */
.lp7b-stage{position:relative;height:clamp(430px,46vw,540px);overflow:hidden;border-radius:22px;background:linear-gradient(160deg,#f4f6fa,#e9edf3);border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.lp7b-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(66%,430px);aspect-ratio:210/260;background:#fff;border-radius:12px;box-shadow:0 34px 70px -34px rgba(20,28,46,.4),0 0 0 1px rgba(20,28,46,.06);padding:5% 5.5%}
.lp7b-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:4.5%}
.lp7b-logo{height:13px;width:auto;display:block}
.lp7b-badge{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.lp7b-title{font-size:clamp(11px,1.3vw,14.5px);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.lp7b-sub{font-size:8.5px;font-weight:600;color:var(--muted);margin-top:2px;margin-bottom:5%}
.lp7b-slot{position:absolute;border:1.5px dashed rgba(78,109,140,.45);border-radius:10px;background:rgba(78,109,140,.05);transition:border-color .3s,background .3s,opacity .3s}
.lp7b-slot .hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:rgba(78,109,140,.65);text-align:center;padding:6px;transition:opacity .25s}
.lp7b-slot.filled{border-color:transparent;background:transparent}
.lp7b-slot.filled .hint{opacity:0}
.lp7b-s1{left:6%;top:34%;width:41%;height:24%}
.lp7b-s2{left:53%;top:34%;width:41%;height:24%}
.lp7b-txt{position:absolute;left:6%;top:64%;width:88%;height:22%;border-radius:10px}
.lp7b-txtin{font-size:clamp(8px,1vw,11px);line-height:1.55;font-weight:600;color:var(--ink);padding:7px 9px;min-height:100%}
.lp7b-caret{display:inline-block;width:1.5px;height:1em;background:var(--rec);vertical-align:-2px;margin-left:1px;animation:l7caret 1s steps(2) infinite}
@keyframes l7caret{50%{opacity:0}}
.lp7b-el{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 16px 26px rgba(20,28,46,.28))}
.lp7b-el .mb-gc-like{background:#fff;border:1px solid rgba(255,255,255,.85);border-radius:14px;padding:8px 10px 7px;text-align:center;box-shadow:0 10px 24px -12px rgba(20,28,46,.35)}
.lp7b-el .gf-cap{font-size:9px;font-weight:700;color:var(--ink);margin-bottom:1px}
.lp7b-el .gx{display:block;width:56px;height:auto;margin:0 auto}
.lp7b-el .gnum{font-size:12px;font-weight:800;color:var(--ink)}
.lp7b-el .gun{margin-left:2px;font-size:7.5px;font-weight:600;color:var(--muted-2)}
.lp7b-graphcard{background:#fff;border:1px solid rgba(255,255,255,.85);border-radius:14px;padding:8px 10px;box-shadow:0 10px 24px -12px rgba(20,28,46,.35)}
.lp7b-graphcard .cap{font-size:8.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.lp7b-graphcard svg{width:118px;height:auto;display:block}
.lp7b-cursor{position:absolute;left:0;top:0;z-index:8;will-change:transform;pointer-events:none}
.lp7b-cursor .cur-arrow{width:17px;height:17px;display:block;filter:drop-shadow(0 2px 4px rgba(20,28,46,.35))}
.lp7b-cursor .tag{position:absolute;left:14px;top:15px;white-space:nowrap;font-size:9px;font-weight:700;color:#fff;padding:3px 8px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(20,28,46,.4)}
.lp7b-c1 .cur-arrow{fill:var(--rec);stroke:#fff;stroke-width:1.4}
.lp7b-c1 .tag{background:var(--rec)}
.lp7b-c2 .cur-arrow{fill:var(--red);stroke:#fff;stroke-width:1.4}
.lp7b-c2 .tag{background:var(--red)}
.lp7b-c3 .cur-arrow{fill:#0f766e;stroke:#fff;stroke-width:1.4}
.lp7b-c3 .tag{background:#0f766e}
.lp7b-ready{position:absolute;right:5%;top:5.5%;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:#0f766e;background:rgba(15,118,110,.1);border:1px solid rgba(15,118,110,.25);border-radius:999px;padding:5px 11px;opacity:0;transform:scale(.4);filter:blur(3px)}
.lp7b-ready svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lp7b-ready.on{animation:l7pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes l7pop{to{opacity:1;transform:scale(1);filter:blur(0)}}
.lp7b-note{text-align:center;font-size:12px;font-weight:700;color:var(--muted-2);margin-top:14px}
/* --- lp8 v1 : interactive projection (rj-) --- */
.rj-card{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 66px -34px rgba(14,22,38,.35);padding:18px 20px 16px}
.rj-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rj-ttl{font-size:13px;font-weight:800;color:var(--ink)}
.rj-live{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rec)}
.rj-live i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:rjpulse 1.8s ease-in-out infinite}
@keyframes rjpulse{50%{opacity:.3}}
.rj-sliders{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.rj-srow{display:grid;grid-template-columns:96px 1fr 92px;align-items:center;gap:12px}
.rj-srow label{font-size:11.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.rj-val{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.rj-val i{font-style:normal;font-size:8px;font-weight:600;color:var(--muted);margin-left:3px}
.rj-range{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}
.rj-range::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--rec) 0%,var(--rec) var(--p,50%),rgba(20,28,46,.12) var(--p,50%))}
.rj-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#fff;border:1.5px solid var(--rec);box-shadow:0 1px 3px rgba(20,28,46,.25),0 0 0 3px rgba(78,109,140,.12)}
.rj-range::-moz-range-track{height:4px;border-radius:99px;background:rgba(20,28,46,.12)}
.rj-range::-moz-range-progress{height:4px;border-radius:99px;background:var(--rec)}
.rj-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:1.5px solid var(--rec);box-shadow:0 1px 3px rgba(20,28,46,.25)}
.rj-gwrap{position:relative;border:1px solid rgba(20,28,46,.07);border-radius:12px;padding:8px 7px 5px;overflow:hidden}
.rj-gwrap svg{width:100%;height:auto;display:block}
.rj-base{fill:none;stroke:var(--rec);opacity:.4;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.rj-proj{fill:none;stroke:var(--rec);stroke-width:5;stroke-dasharray:1 13;stroke-linecap:round;stroke-linejoin:round}
.rj-legend{position:absolute;z-index:6;left:10px;top:9px;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.88);border:1px solid rgba(20,28,46,.08);border-radius:8px;padding:5px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rj-legend span{display:inline-flex;align-items:center;gap:6px;font-size:8.5px;font-weight:700;color:var(--muted)}
.rj-legend i{width:14px;height:0;border-radius:2px}
.rj-legend .a i{border-top:3px solid rgba(78,109,140,.45)}
.rj-legend .b i{border-top:3.5px dotted var(--rec)}
.rj-pill{position:absolute;z-index:7;left:50%;top:20%;transform:translate(-50%,-130%);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:#fff;background:var(--rec);padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums;box-shadow:0 8px 18px -8px rgba(20,28,46,.5);transition:opacity .3s,background .3s}
.rj-pill svg{width:9px;height:9px}
.rj-pill.neg{background:var(--red)}
.rj-pill.neg svg{transform:rotate(180deg)}
.rj-pill.hide{opacity:0}
.rj-foot{margin-top:10px;text-align:center;font-size:11px;font-weight:700;color:var(--muted-2)}
/* --- lp8 v2 : pick the lever (lv-) --- */
.lv-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 66px -34px rgba(14,22,38,.35);padding:20px 22px 18px}
.lv-head{display:flex;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--border);margin-bottom:16px}
.lv-ava{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,28,46,.2)}
.lv-ava img{width:100%;height:100%;object-fit:cover;display:block}
.lv-who b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.lv-who i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted)}
.lv-goal{margin-left:auto;text-align:right}
.lv-goal i{display:block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.lv-goal b{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.lv-opt{position:relative;border:1.5px solid var(--border);border-radius:14px;background:#fff;padding:11px 10px 10px;text-align:center;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s var(--expo)}
.lv-opt .gx{display:block;width:58px;height:auto;margin:0 auto 2px}
.lv-opt b{display:block;font-size:11.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.lv-opt i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted)}
.lv-opt.on{border-color:var(--rec);box-shadow:0 14px 30px -18px rgba(78,109,140,.55),0 0 0 3px rgba(78,109,140,.12);transform:translateY(-3px)}
.lv-star{position:absolute;top:-9px;right:-7px;font-size:8.5px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--red);border-radius:999px;padding:3px 8px;box-shadow:0 6px 14px -6px rgba(230,38,28,.6)}
.lv-out{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:center;background:linear-gradient(160deg,#f7f9fc,#eef2f7);border:1px solid var(--border);border-radius:14px;padding:14px 18px}
.lv-time i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.lv-time b{font-size:clamp(30px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.lv-time u{text-decoration:none;margin-left:8px;font-size:12px;font-weight:800;color:#0f766e;font-variant-numeric:tabular-nums}
.lv-chips{display:flex;flex-direction:column;gap:7px}
.lv-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:7px 11px;font-size:10.5px;font-weight:700;color:var(--muted)}
.lv-chip b{font-size:12.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-note{margin-top:11px;text-align:center;font-size:11px;font-weight:700;color:var(--muted-2)}
/* --- lp8 v3 : retest loop (rt-) --- */
.rt-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 66px -34px rgba(14,22,38,.35);padding:20px 22px 18px}
.rt-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center}
.rt-radar{position:relative}
.rt-radar svg{width:100%;height:auto;display:block}
.rt-ax{font-family:Manrope,system-ui,sans-serif;font-size:10.5px;font-weight:700;fill:var(--muted-2)}
.rt-web{stroke:rgba(27,31,59,.1);stroke-width:1;fill:none}
.rt-t1{fill:rgba(27,31,59,.05);stroke:rgba(27,31,59,.3);stroke-width:1.6;stroke-dasharray:5 5}
.rt-t2{fill:rgba(78,109,140,.16);stroke:var(--rec);stroke-width:2.6;stroke-linejoin:round}
.rt-leg{display:flex;gap:14px;justify-content:center;margin-top:6px;font-size:9.5px;font-weight:700;color:var(--muted-2)}
.rt-leg span{display:inline-flex;align-items:center;gap:5px}
.rt-leg i{width:14px;height:0}
.rt-leg .t1 i{border-top:2.5px dashed rgba(27,31,59,.35)}
.rt-leg .t2 i{border-top:3px solid var(--rec)}
.rt-deltas{display:flex;flex-direction:column;gap:8px}
.rt-d{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(160deg,#f9fafc,#f0f3f8);border:1px solid var(--border);border-radius:11px;padding:8px 12px;opacity:0;transform:translateY(10px) scale(.92);filter:blur(3px)}
.rt-d.on{animation:l7pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
.rt-d i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted)}
.rt-d b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:#0f766e}
.rt-d b.down{color:var(--rec)}
.rt-line{position:relative;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.rt-steps{display:flex;align-items:center;justify-content:space-between;position:relative}
.rt-steps::before{content:"";position:absolute;left:5%;right:5%;top:7px;height:2px;background:rgba(27,31,59,.1);border-radius:2px}
.rt-prog{position:absolute;left:5%;top:7px;height:2px;width:0;background:var(--rec);border-radius:2px}
.rt-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:var(--muted-2);width:33%}
.rt-step i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid rgba(27,31,59,.2);transition:border-color .3s,background .3s}
.rt-step.done i{border-color:var(--rec);background:var(--rec);box-shadow:0 0 0 3px rgba(78,109,140,.15)}
.rt-book{margin-top:13px;text-align:center}
.rt-book span{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;color:#0f766e;background:rgba(15,118,110,.09);border:1px solid rgba(15,118,110,.25);border-radius:999px;padding:6px 13px;opacity:0;transform:scale(.5)}
.rt-book span.on{animation:l7pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
/* --- lp9 : lab ROI calculator --- */
.l9-pillars{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 clamp(24px,3.4vw,40px)}
.l9-pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 16px;box-shadow:0 10px 22px -14px rgba(20,28,46,.3)}
.l9-pill svg{width:14px;height:14px;fill:none;stroke:var(--rec);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.l9-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(22px,3.4vw,44px);align-items:start;max-width:1060px;margin:0 auto}
.l9-in{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 56px -34px rgba(20,28,46,.35);padding:22px 24px 18px}
.l9-in h3{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.l9-out{display:flex;flex-direction:column;gap:12px}
.l9-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px 20px;box-shadow:0 18px 40px -30px rgba(20,28,46,.35)}
.l9-card i{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.l9-card b{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.l9-card u{text-decoration:none;font-size:12px;font-weight:700;color:var(--muted);margin-left:6px}
.l9-card p{font-size:11.5px;line-height:1.5;font-weight:600;color:var(--muted);margin:6px 0 0}
.l9-card.hero{background:linear-gradient(140deg,#1b2135,#0d1122);border-color:transparent}
.l9-card.hero i{color:rgba(255,255,255,.55)}
.l9-card.hero b{color:#fff}
.l9-card.hero u,.l9-card.hero p{color:rgba(255,255,255,.62)}
.l9-note{max-width:1060px;margin:16px auto 0;font-size:11px;line-height:1.55;color:var(--muted-2);font-weight:600;text-align:center}
@media(max-width:960px){.l9-grid{grid-template-columns:1fr}.rt-grid{grid-template-columns:1fr}.lv-row{grid-template-columns:1fr 1fr 1fr;gap:7px}}
@media(max-width:640px){.lv-row{grid-template-columns:1fr}.lv-out{grid-template-columns:1fr}.lp7b-stage{height:clamp(360px,110vw,470px)}.lp7b-sheet{width:82%}
.lp7b-el .gx{width:42px}.lp7b-el .mb-gc-like{padding:5px 7px 4px;border-radius:10px}.lp7b-el .gnum{font-size:10px}
.lp7b-graphcard{padding:5px 7px;border-radius:10px}.lp7b-graphcard svg{width:84px}.lp7b-graphcard .cap{font-size:7px}
.lp7b-ready{top:auto;bottom:3.5%;right:4%}}

/* ===== elite page ===== */
.vblock>div{width:100%}
.et-photo{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 34px 70px -36px rgba(20,28,46,.45)}
.et-photo img{width:100%;height:auto;display:block}
.et-vis{position:relative}
.et-cut{width:min(88%,470px);height:auto;display:block;margin:0 auto;filter:none}
.et-fade{position:absolute;left:0;right:0;bottom:-2px;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 86%);pointer-events:none}
.et-fg{position:absolute;z-index:4;background:#fff;border:1px solid rgba(255,255,255,.85);border-radius:14px;padding:10px 12px;box-shadow:0 24px 48px -22px rgba(20,28,46,.4),0 8px 18px -10px rgba(20,28,46,.18);animation:lp4bob 7.5s ease-in-out infinite alternate}
.et-fg .gf-cap{font-size:10px;font-weight:700;color:var(--ink);margin-bottom:4px}
.et-fg .lp4-gbody{width:min(34vw,230px)}
.et-fg1{left:-4%;bottom:6%}
.et-fg2{right:-5%;top:4%;animation-delay:-3.4s}
.ezt{position:absolute;right:-4%;bottom:4%;z-index:4;width:min(92%,430px);background:linear-gradient(160deg,rgba(247,249,252,.9),rgba(226,231,238,.82));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:13px 15px;box-shadow:0 26px 54px -28px rgba(14,22,38,.45),inset 0 1px 0 rgba(255,255,255,.85)}
.ezt b{display:block;font-size:11.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
.ezt-row{display:grid;grid-template-columns:1.25fr .75fr 1fr;gap:10px;font-size:10.5px;font-weight:600;color:var(--muted);padding:6px 8px;border-radius:8px}
.ezt-row.hd{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.ezt-row:not(.hd){background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);margin-top:4px}
.ezt-row span:first-child{color:var(--ink);font-weight:700}
.ezt-row span{font-variant-numeric:tabular-nums;white-space:nowrap}
/* conditions */
.et-cond{padding:clamp(56px,8vw,104px) 0;text-align:center}
.et-icons{display:flex;gap:clamp(10px,1.6vw,18px);justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.et-ic{display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;padding:15px 8px 12px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 14px 30px -22px rgba(20,28,46,.35)}
.et-ic svg{width:26px;height:26px;fill:none;stroke:var(--rec);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.et-ic span{font-size:10.5px;font-weight:700;color:var(--muted)}
.et-cond .sec-sub{margin:16px auto 0;max-width:760px}
/* until now */
.et-until{padding:clamp(30px,5vw,64px) 0 clamp(56px,8vw,104px);text-align:center}
.et-bang{font-size:clamp(40px,6vw,84px);font-weight:800;letter-spacing:-.04em;color:var(--red);line-height:1;margin-bottom:18px}
.et-until .sec-sub{margin:0 auto clamp(26px,4vw,40px);max-width:820px}
.et-video{position:relative;max-width:960px;margin:0 auto;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:0 44px 90px -44px rgba(20,28,46,.55);background:#0d1122}
.et-video video,.et-video img{width:100%;height:auto;display:block}
.et-vtag{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;color:#fff;background:rgba(13,17,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 12px}
.et-vtag i{width:7px;height:7px;border-radius:50%;background:#39d98a;animation:rjpulse 1.8s ease-in-out infinite}
/* protocol variants */
.pr-card{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 66px -34px rgba(14,22,38,.35);padding:20px 22px 18px}
.pr-ttl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.pr-ttl b{font-size:13px;font-weight:800;color:var(--ink)}
.pr-badge{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rec);background:rgba(78,109,140,.1);border:1px solid rgba(78,109,140,.25);border-radius:999px;padding:4px 10px}
.pr-line{display:flex;gap:6px;align-items:stretch}
.pr-b{position:relative;border-radius:10px;padding:9px 10px 20px;font-size:10px;font-weight:800;color:#fff;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-b i{display:block;font-style:normal;font-size:8.5px;font-weight:600;opacity:.75}
.pr-b.w{background:#8CA3B8}.pr-b.s{background:var(--rec)}.pr-b.r{background:#C3CEDA;color:var(--ink)}.pr-b.x{background:var(--red)}
.pr-drop{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:9px;height:9px}
.pr-drop path{fill:rgba(255,255,255,.9)}
.pr-b.r .pr-drop path{fill:var(--rec)}
.pr-foot{margin-top:12px;text-align:center;font-size:11px;font-weight:700;color:var(--muted-2)}
.pr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pr-p{border:1.5px solid var(--border);border-radius:14px;padding:14px 14px 12px;transition:border-color .3s,transform .3s var(--expo),box-shadow .3s}
.pr-p:hover{border-color:var(--rec);transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(78,109,140,.5)}
.pr-p b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:4px}
.pr-p p{font-size:11px;line-height:1.5;color:var(--muted);font-weight:600;margin-bottom:10px}
.pr-mini{display:flex;gap:3px;height:26px;align-items:flex-end}
.pr-mini i{flex:1;border-radius:3px;background:var(--rec);opacity:.85}
.pr-stair svg{width:100%;height:auto;display:block}
.pr-lanes{display:flex;flex-direction:column;gap:9px}
.pr-lane{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center}
.pr-lane b{font-size:11px;font-weight:800;color:var(--ink)}
.pr-lane b i{display:block;font-style:normal;font-size:8.5px;font-weight:600;color:var(--muted-2)}
.pr-lbar{display:flex;gap:4px;align-items:flex-end;height:30px}
.pr-lbar i{border-radius:3px;background:var(--rec)}
.pr-rx{display:flex;flex-direction:column;gap:7px}
.pr-rxrow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:11px;font-weight:700;color:var(--ink)}
.pr-rxrow i{font-style:normal;font-size:10px;font-weight:600;color:var(--muted)}
.pr-rxrow .dropchip{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;color:var(--red)}
/* quantify Q2/Q3 */
.qx-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 66px -34px rgba(14,22,38,.35);padding:20px 22px 18px}
.qx-q{font-size:clamp(15px,1.6vw,19px);font-weight:800;letter-spacing:-.015em;color:var(--ink);text-align:center;margin-bottom:14px;text-wrap:balance}
.qx-duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-bottom:12px}
.qx-opt{border:1.5px solid var(--border);border-radius:14px;padding:13px 14px;text-align:center}
.qx-opt i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.qx-opt b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin:3px 0 6px}
.qx-opt u{text-decoration:none;font-size:19px;font-weight:800;color:var(--rec);font-variant-numeric:tabular-nums}
.qx-opt.win{border-color:var(--rec);box-shadow:0 0 0 3px rgba(78,109,140,.12);position:relative}
.qx-opt.win::after{content:"Bigger lever";position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:800;color:#fff;background:var(--red);border-radius:999px;padding:3px 9px}
.qx-vs{align-self:center;font-size:11px;font-weight:800;color:var(--muted-2)}
.qx-sub{border-top:1px dashed var(--border);padding-top:11px;display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;color:var(--muted);flex-wrap:wrap}
.qx-sub b{color:var(--ink)}
.qg-goals{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.qg-goal{border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:7px 15px;font-size:11.5px;font-weight:800;color:var(--muted);cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.qg-goal.on{color:#fff;background:var(--rec);border-color:var(--rec)}
.qg-bars{display:flex;flex-direction:column;gap:9px}
.qg-row{display:grid;grid-template-columns:120px 1fr 52px;gap:12px;align-items:center}
.qg-row b{font-size:11.5px;font-weight:800;color:var(--ink)}
.qg-track{height:9px;border-radius:5px;background:rgba(27,31,59,.08);overflow:hidden}
.qg-fill{display:block;height:100%;border-radius:5px;background:var(--rec);transition:width .8s var(--expo)}
.qg-row.top .qg-fill{background:var(--red)}
.qg-row u{text-decoration:none;font-size:11px;font-weight:800;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.qg-note{margin-top:12px;text-align:center;font-size:11px;font-weight:700;color:var(--muted-2)}
/* bento visuals */
.eb-ava{display:flex;margin-bottom:6px}
.eb-ava i{width:30px;height:30px;border-radius:50%;background:var(--rec);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px}
.eb-ava i:first-child{margin-left:0}
.eb-ava i:nth-child(2n){background:#8CA3B8}
.eb-chips{display:flex;gap:6px;flex-wrap:wrap}
.eb-chip{font-size:10px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 10px}
.eb-svg{width:100%;max-width:220px;height:auto;display:block;margin:6px auto 0}
.eb-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.eb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:6px 10px;font-size:10px;font-weight:700;color:var(--ink)}
.eb-row i{font-style:normal;font-size:9px;font-weight:800;color:var(--rec);background:rgba(78,109,140,.1);border-radius:999px;padding:2px 8px}
.eb-row i.full{color:#fff;background:var(--rec)}
.eb-msg{background:#fff;border:1px solid var(--border);border-radius:11px;padding:7px 10px;font-size:10px;font-weight:600;color:var(--muted);margin-top:6px}
.eb-msg b{display:block;font-size:9px;font-weight:800;color:var(--rec);margin-bottom:1px}
@media(max-width:960px){.pr-cards{grid-template-columns:1fr}.qx-duel{grid-template-columns:1fr}.qx-vs{justify-self:center}}
@media(max-width:640px){.et-fg .lp4-gbody{width:38vw}.et-fg1{left:0;bottom:2%}.et-fg2{right:0}.ezt{right:0;width:100%}}
/* ===== elite page, round 1 ===== */
/* the hero copy filled its whole column, so the headline ran into the floating gauge card.
   At 52px the balanced headline broke into five short ragged lines; measured across sizes,
   46px lands it on three even lines (493/408/478 at 1440) that clear the card by ~65px. */
.hero-copy{padding-right:24px}
.hero-h1{font-size:clamp(30px,3.4vw,46px)!important;line-height:1.06!important}
.hero-sub{max-width:46ch}
@media(max-width:1024px){.hero-copy{padding-right:0}}
/* the problem headline is a long sentence, so it reads better a step down from the section scale */
#problem .sec-title{font-size:clamp(28px,3.1vw,40px);line-height:1.14}

/* ===== the 360 dashboard, identical to the one on the labs page ===== */
/* ===== 360 dashboard : 9 inline metrics, spider + body composition floats, zones table ===== */
.lp4-zh{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px}
/* the zones table is the coaching one, dropped in and faded out at the bottom */
.lp4-zcard{position:static;width:100%;max-width:none;animation:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%)}

/* ===== 360 dashboard, round 2 ===== */
/* eight gauges, scoped so nothing else on the page inherits the 8-column grid */
#solution .lp4-metrics{grid-template-columns:repeat(8,1fr);gap:8px}
#solution .lp4-metrics .lp4-m{padding:9px 5px 8px}
#solution .lp4-metrics .gf-cap{font-size:9.5px;letter-spacing:-.01em}
@media(max-width:1180px){#solution .lp4-metrics{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){#solution .lp4-metrics{grid-template-columns:repeat(2,1fr)}}

/* the two floating cards are the real app panels now, so they need real room.
   The frame gives some width back so the cards hang off its edges instead of
   covering the charts: 272px wide, ~55px of it overlapping the frame. */
/* full-width frame, so the cards are pushed as far outboard as each width allows */
#solution .lp4-out-l{top:auto;bottom:292px;transform:translateX(-48%)}
#solution .lp4-out-r{top:auto;bottom:292px;transform:translateX(48%)}
@media(max-width:1430px){#solution .lp4-out-l{transform:translateX(-40%)}#solution .lp4-out-r{transform:translateX(40%)}}
@media(max-width:1360px){.lp4-fp,.lp4-bc{width:238px}
  #solution .lp4-out-l{transform:translateX(-38%)}#solution .lp4-out-r{transform:translateX(38%)}}
@media(max-width:1280px){#solution .lp4-out-l{transform:translateX(-22%)}#solution .lp4-out-r{transform:translateX(22%)}}
@media(max-width:1160px){.lp4-fp,.lp4-bc{width:214px}
  #solution .lp4-out-l{transform:translateX(-14%)}#solution .lp4-out-r{transform:translateX(14%)}}
.lp4-fp,.lp4-bc{width:272px}
.lp4-fp{padding:13px 14px 11px}
.lp4-bc{padding:13px 14px 12px;text-align:left}
.lp4-fp .lim-svg{width:100%;height:auto;display:block;overflow:visible;margin-top:2px}
.lp4-fp .gf-cap,.lp4-bc .gf-cap{font-size:11px;margin-bottom:4px;text-align:center}
.lp4-bcpie{display:block;width:100%;height:auto;margin:2px 0 10px}
.lp4-bcstats{padding:0 12px;border-radius:11px}
.lp4-bcstats .bc-row{padding:7px 0;font-size:11px;gap:10px}

/* the graphs were mostly empty air; cap their height and they read like app cards */
#solution .lp4-gbody .gx{max-height:clamp(220px,24vw,286px)}

/* zones: header plus three full rows, then the dissolve */
#solution .lp4-frame{max-height:none}
#solution .lp4-fade{display:none}
/* 252px holds the two header rows plus three full zones at full strength (191px),
   so only the fourth row is inside the dissolve */
#solution .lp4-zcard{max-height:252px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.42) 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.42) 90%,transparent 100%)}
#solution .lp4-stage{max-width:1220px}

/* dev-review tab bar (stripped once a layout is picked), same as the labs page */
.ps-zone{position:relative}
.ps-tabbar{position:sticky;top:84px;z-index:70;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;width:max-content;max-width:calc(100% - 32px);margin:clamp(26px,4vw,44px) auto 6px;padding:6px 9px;border-radius:999px;border:1px dashed rgba(27,31,59,.3);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px -18px rgba(20,28,46,.35)}
.ps-tlab{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding:0 6px}
.ps-tabbar button{font-family:inherit;font-size:11.5px;font-weight:700;color:var(--muted);background:none;border:1px solid transparent;border-radius:999px;padding:7px 13px;cursor:pointer;transition:color .25s,background-color .25s,border-color .25s,transform .15s}
.ps-tabbar button:hover{color:var(--ink)}
.ps-tabbar button:active{transform:scale(.96)}
.ps-tabbar button.on{color:#fff;background:var(--rec);border-color:var(--rec)}
section.lim-v[hidden]{display:none!important}

/* ===== ported from the labs page: study deck + its two accuracy variants ===== */
/* ===== science : fey-card study deck (1:1 with the homepage deck, light theme) ===== */
.lp6{padding:clamp(56px,8vw,104px) 0;overflow:hidden}
.lp6-head{text-align:left;max-width:800px;margin:0 0 clamp(10px,1.6vw,20px)}
.lp6-head .eyebrow{margin-bottom:14px}
.lp6-head .sec-sub{margin:16px 0 0}
.lp6-stage{position:relative;margin-top:34px;height:clamp(500px,52vw,680px);display:flex;align-items:center;justify-content:center}
/* the caption fades in on hover, like the fey signature */
.lp6-caption{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:70;pointer-events:none;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--muted);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:999px;padding:8px 16px;transition:opacity .35s var(--expo),transform .35s var(--expo);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.lp6-deck{--cw:clamp(240px,25vw,320px);--ch:clamp(344px,36vw,456px);position:relative;width:min(920px,94vw);height:var(--ch);perspective:1600px}
/* cards sit tilted and only partly visible at rest; hover straightens + lifts the hovered one */
.lp6-card{position:absolute;top:0;bottom:0;margin:auto;left:50%;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);display:block;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;box-shadow:0 1px 2px rgba(20,28,46,.07),0 16px 34px -16px rgba(20,28,46,.34),0 46px 80px -36px rgba(20,28,46,.46);transition:transform .6s cubic-bezier(.22,1,.36,1),width .6s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1),margin-left .6s cubic-bezier(.22,1,.36,1),box-shadow .45s var(--expo);will-change:transform}
.lp6-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;background:linear-gradient(#fcfcfd,#f1f2f6);border-bottom:1px solid rgba(20,28,46,.08)}
.lp6-dots{display:flex;gap:5px}
.lp6-dots i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.09),inset 0 1px 1px rgba(255,255,255,.5)}
.lp6-dots i:nth-child(1){background:#ff5f57}
.lp6-dots i:nth-child(2){background:#febc2e}
.lp6-dots i:nth-child(3){background:#28c840}
.lp6-url{flex:1;max-width:150px;height:13px;border-radius:999px;background:#fff;border:1px solid rgba(20,28,46,.1)}
.lp6-pg{position:absolute;inset:0;overflow:hidden;background:#fff}
.lp6-pg img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
/* hovering a paper zooms it for real: the card takes a bigger layout size (the page is
   re-rendered at that size, not stretched), and its bottom dissolves into the page */
.lp6-card.active{--cwA:clamp(360px,34vw,470px);top:0;bottom:auto;
  width:var(--cwA);height:calc(var(--cwA) * 1.4145);margin-left:calc(var(--cwA) / -2);
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.55) 64%,transparent 86%);
          mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.55) 64%,transparent 86%)}
.lp6-card.active .lp6-pg::after{opacity:0}
.lp6-pg::after{transition:opacity .4s var(--expo)}
.lp6-pg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 78%,rgba(255,255,255,.9) 100%)}
.lp6-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(14,22,38,.01) 26%,rgba(14,22,38,.26));transition:opacity .45s var(--expo);pointer-events:none}
.lp6-card.active::after{opacity:0}
.lp6-card.active{box-shadow:0 2px 6px rgba(20,28,46,.1),0 -12px 40px -20px rgba(20,28,46,.4)}
.lp6-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.4vw,42px);max-width:none}
.lp6-fact{text-align:center;border:1px solid var(--border);border-radius:16px;background:linear-gradient(160deg,#fbfcfd,#f2f5f9);padding:16px 14px}
.lp6-fact b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:4px}
.lp6-fact span{font-size:11.5px;line-height:1.45;color:var(--muted);font-weight:500}
@media(max-width:860px){
  .lp6-facts{grid-template-columns:1fr}
  /* the 3D fan does not survive a phone: the papers become a swipeable row */
  .lp6-stage{height:auto;display:flex;flex-direction:column;align-items:flex-start;margin-top:26px}
  .lp6-deck{--cw:min(74vw,290px);--ch:auto;align-self:stretch;width:auto;height:auto;perspective:none;display:flex;gap:14px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    padding:4px 16px 10px;margin:0 -16px;scrollbar-width:none}
  .lp6-deck::-webkit-scrollbar{display:none}
  .lp6-card{position:relative!important;top:auto;bottom:auto;left:auto;margin:0!important;height:calc(var(--cw) * 1.42);
    flex:0 0 var(--cw);scroll-snap-align:center;transform:none!important;z-index:1!important}
  .lp6-card::after{display:none}
  .lp6-card.active{width:var(--cw);height:calc(var(--cw) * 1.42);margin-left:0;-webkit-mask-image:none;mask-image:none}
  .lp6-caption{position:static;transform:none;order:2;margin:14px 0 0;max-width:none}
}
@media(prefers-reduced-motion:reduce){.lp6-card{transition:none}}

/* ===== accuracy V2 : the homepage bento card mechanism, no frame ===== */
section.sci-v[hidden]{display:none!important}
.lp6b{padding:clamp(56px,8vw,104px) 0;overflow:hidden}
.lp6b-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center}
.lp6b-copy{max-width:520px}
.lp6b-copy .sec-title{margin-top:14px}
.lp6b-copy .sec-sub{margin-top:16px}
.lp6b-area{--sw:clamp(320px,38vw,540px);--sh:calc(var(--sw) * 1.016);
  position:relative;height:clamp(440px,46vw,620px)}
.lp6b-scene{position:absolute;left:6%;top:50%;width:var(--sw);height:var(--sh);margin-top:calc(var(--sh) / -2);
  perspective:1400px;transform-style:preserve-3d;opacity:0;translate:0 20px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.23,1,.32,1)}
.lp6b-area.in .lp6b-scene{opacity:1;translate:0 0}
.lp6b-win{position:absolute;top:50%;left:50%;width:var(--sw);height:var(--sh);
  margin:calc(var(--sh) / -2) 0 0 calc(var(--sw) / -2);display:block;overflow:hidden;border-radius:12px;background:#fff;
  text-decoration:none;opacity:0;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;
  transition:transform 1.05s cubic-bezier(.32,.72,0,1),opacity .6s ease,box-shadow .9s ease;will-change:transform}
.lp6b-win img{width:100%;display:block}
.lp6b-win .cut{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 76%,rgba(255,255,255,.86) 100%)}
.lp6b-win.s0{transform:translate(0,0) scale(1) skewY(6deg);opacity:1;z-index:8;
  box-shadow:0 2px 5px rgba(20,28,46,.09),0 8px 18px -6px rgba(20,28,46,.24),0 64px 104px -42px rgba(20,28,46,.62)}
.lp6b-win.s1{transform:translate(17%,-10.5%) scale(.94) skewY(6deg);opacity:1;z-index:7;
  box-shadow:0 1px 3px rgba(20,28,46,.05),0 4px 12px -4px rgba(20,28,46,.14),0 40px 74px -40px rgba(20,28,46,.42)}
.lp6b-win.s2{transform:translate(33%,-20%) scale(.885) skewY(6deg);opacity:1;z-index:6;
  box-shadow:0 1px 2px rgba(20,28,46,.04),0 24px 50px -34px rgba(20,28,46,.3)}
.lp6b-win.sq{transform:translate(34%,-21%) scale(.87) skewY(6deg);opacity:0;z-index:5;pointer-events:none}
.lp6b-win.sdrop{transform:translate(0,100%) scale(1) skewY(6deg);opacity:0;z-index:9}
.lp6b-win.snap{transition:none}
@media(max-width:900px){
  .lp6b-grid{grid-template-columns:1fr}
  .lp6b-copy{max-width:none}
  .lp6b-area{--sw:min(70vw,340px);height:clamp(360px,86vw,470px)}
  .lp6b-scene{left:4%}
}
@media(prefers-reduced-motion:reduce){.lp6b-win{transition:opacity .3s ease}}

/* ===== accuracy V3 : the same fan, papers cut to the top half of the page ===== */
.lp6c{padding:clamp(56px,8vw,104px) 0;overflow:hidden}
.lp6c .lp6-head{text-align:left;max-width:800px;margin:0 0 clamp(10px,1.6vw,20px)}
.lp6c .lp6-head .sec-sub{margin:16px 0 0}
.lp6c-stage{position:relative;margin-top:38px;height:clamp(330px,34vw,430px);display:flex;align-items:center;justify-content:center}
/* page is 620x877, so half of it is width * 0.707 */
.lp6c-deck{--cw:clamp(300px,32vw,430px);--ch:calc(var(--cw) * .707);position:relative;width:min(1080px,94vw);height:var(--ch);perspective:1600px}
.lp6c-card{position:absolute;top:0;bottom:0;margin:auto;left:50%;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);
  display:block;text-decoration:none;color:inherit;border-radius:6px;overflow:hidden;cursor:pointer;background:#fff;
  outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;
  box-shadow:0 1px 2px rgba(20,28,46,.07),0 16px 34px -16px rgba(20,28,46,.34),0 46px 80px -36px rgba(20,28,46,.46);
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .45s var(--expo);will-change:transform}
.lp6c-pg{position:absolute;inset:0;overflow:hidden;background:#fff}
.lp6c-pg img{width:100%;height:auto;display:block}
/* the page is cut, not shrunk: it fades out over the last third */
.lp6c-pg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 88%)}
.lp6c-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(14,22,38,.01) 26%,rgba(14,22,38,.26));
  transition:opacity .45s var(--expo);pointer-events:none}
.lp6c-card.active::after{opacity:0}
.lp6c-card.active{box-shadow:0 2px 4px rgba(20,28,46,.08),0 26px 52px -20px rgba(20,28,46,.4),0 60px 110px -34px rgba(20,28,46,.5)}
.lp6c-card:focus-visible{outline:2px solid var(--rec);outline-offset:3px}
@media(max-width:860px){
  .lp6c-stage{height:auto;display:flex;flex-direction:column;align-items:flex-start;margin-top:26px}
  .lp6c-deck{--cw:min(78vw,320px);--ch:auto;align-self:stretch;width:auto;height:auto;perspective:none;display:flex;gap:14px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    padding:4px 16px 10px;margin:0 -16px;scrollbar-width:none}
  .lp6c-deck::-webkit-scrollbar{display:none}
  .lp6c-card{position:relative!important;top:auto;bottom:auto;left:auto;margin:0!important;height:calc(var(--cw) * .707);
    flex:0 0 var(--cw);scroll-snap-align:center;transform:none!important;z-index:1!important}
  .lp6c-card::after{display:none}
  .lp6c-stage .lp6-caption{position:static;transform:none;order:2;margin:14px 0 0;max-width:none}
}
@media(prefers-reduced-motion:reduce){.lp6c-card{transition:none}}

.lab-sec.ovh{overflow:hidden}

/* ===== how it works (hw3), ported from the homepage ===== */


/*HW-CSS-START*/
.hw3{--surface:#ffffff;--surface-2:#f5f6f8;--surface-3:#eceef2;--ink:#1B1F3B;--muted:#5d5f66;--muted-3:#b4b4bb;
  --border:rgba(27,31,59,.10);--red:#E6261C;--slate:#4E6D8C;--accent:#E6261C;--slate-soft:rgba(78,109,140,.08);--red-soft:rgba(230,38,28,.06);
  position:relative;color:var(--ink);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.55;letter-spacing:-.005em}
.hw3 *,.hw3 *:before,.hw3 *:after{box-sizing:border-box}
.hw3 .hw3-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* header */
.hw3 .hw3-head{text-align:center;max-width:760px;margin:0 auto;padding-top:clamp(30px,5vh,60px)}
.hw3 .hw3-eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);padding:7px 16px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);box-shadow:0 4px 14px rgba(20,28,46,.05)}
.hw3 .hw3-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.hw3 .hw3-head h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.07;color:var(--ink);margin:16px 0 0;text-wrap:balance}
.hw3 .hw3-head h2 .accent{color:var(--red)}
.hw3 .hw3-head p{font-size:clamp(15px,1.5vw,17.5px);line-height:1.55;color:var(--muted);font-weight:500;margin-top:14px;text-wrap:pretty}
/* deck: tall scroll runway; the group (stage + progress) is JS-pinned and vertically centered */
.hw3 .hw3-deck{position:relative;height:300vh;margin-top:clamp(28px,4vh,44px)}
.hw3 .hw3-group{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:26px}
.hw3 .hw3-group.fixed{position:fixed}
.hw3 .hw3-group.bottom{top:auto;bottom:0}
.hw3 .hw3-stage{position:relative;width:100%;max-width:940px;height:clamp(360px,42vw,400px)}
/* card: 2-col [copy | visual], throws up on advance */
.hw3 .hw3-card{position:absolute;top:0;left:0;right:0;min-height:340px;background:var(--surface);border:1px solid rgba(27,31,59,.1);border-radius:24px;
  padding:clamp(28px,3vw,42px);display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:clamp(24px,3.4vw,46px);
  box-shadow:0 26px 60px -30px rgba(20,28,46,.34),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .8s cubic-bezier(.5,0,.2,1),opacity .8s ease,box-shadow .8s ease;will-change:transform,opacity}
.hw3 .hw3-card.s1{background:linear-gradient(135deg,rgba(230,38,28,.04),transparent 42%) var(--surface)}
.hw3 .hw3-card.s2{background:linear-gradient(135deg,rgba(78,109,140,.06),transparent 42%) var(--surface)}
.hw3 .hw3-card.s3{background:linear-gradient(135deg,rgba(230,38,28,.05),rgba(78,109,140,.05) 60%) var(--surface)}
.hw3 .hw3-card[data-card="0"]{z-index:4}
.hw3 .hw3-card[data-card="1"]{z-index:3;transform:translateY(22px) scale(.966)}
.hw3 .hw3-card[data-card="2"]{z-index:2;transform:translateY(44px) scale(.932)}
.hw3 .hw3-card.thrown{transform:translateY(-130vh) rotate(-2deg) scale(.95);opacity:0}
/* copy side */
.hw3 .hw3-copy{min-width:0}
.hw3 .hw3-step-tag{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--red);letter-spacing:.02em;margin-bottom:14px}
.hw3 .hw3-step-tag .num{display:inline-flex;width:34px;height:34px;border-radius:9px;background:rgba(230,38,28,.12);color:var(--red);align-items:center;justify-content:center;font-size:15px;font-weight:800}
.hw3 .hw3-step-tag .total{color:var(--muted-3);font-weight:500;margin-left:4px}
.hw3 .hw3-card h3{font-size:clamp(23px,2.6vw,31px);line-height:1.12;font-weight:800;letter-spacing:-.028em;margin:0;text-wrap:balance;color:var(--ink)}
.hw3 .hw3-card p{color:var(--muted);font-size:clamp(14.5px,1.4vw,16px);line-height:1.55;max-width:46ch;font-weight:500;margin:11px 0 0;text-wrap:pretty}
/* visual side */
.hw3 .hw3-viz{position:relative;min-width:0;height:clamp(210px,22vw,262px);display:flex;align-items:center;justify-content:center}
/* card 1: device cluster — clean aligned 2x2 grid */
.hw3 .hw3-devices{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;place-content:center;width:100%;height:100%;padding:4px}
.hw3 .hw3-devices .dv{display:flex;align-items:center;justify-content:center}
.hw3 .hw3-devices .dv img{display:block;width:100%;max-width:130px;height:auto;filter:drop-shadow(0 10px 18px rgba(20,28,46,.13))}
/* card 2: upload to INSCYD — real MacBook mockup + two files uploading */
.hw3 .hw3-upload{overflow:visible}
.hw3 .hw3-mockwrap{position:relative;width:min(100%,360px)}
.hw3 .hw3-mock{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 34px rgba(20,28,46,.22))}
/* screen cutout of macbook-pro-16.png: x968-3014 / y546-1872 of 3996x2664 */
.hw3 .hw3-screen{position:absolute;left:24.2%;top:20.5%;width:51.2%;height:49.8%;background:#fff;border-radius:3px;display:grid;place-items:center;overflow:hidden}
.hw3 .hw3-wm{width:58%;max-width:148px;opacity:.96}
.hw3 .hw3-uploaded{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#15803d;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.26);padding:5px 12px 5px 6px;border-radius:99px;white-space:nowrap;opacity:0;animation:hw3-uploaded 6s ease-in-out infinite}
.hw3 .hw3-check{width:17px;height:17px;flex:none;border-radius:50%;background:#16a34a;display:grid;place-items:center}
.hw3 .hw3-check svg{width:9px;height:9px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* single file (with cursor) dragged into the laptop */
.hw3 .hw3-file{position:absolute;top:22%;right:-4%;display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:0 16px 30px -12px rgba(20,28,46,.42);z-index:3;animation:hw3-in 6s ease-in-out infinite}
.hw3 .hw3-file .doc{width:22px;height:27px;flex:none;border-radius:4px;background:linear-gradient(160deg,#fdeceb,#f7d7d5);border:1px solid rgba(230,38,28,.3);position:relative}
.hw3 .hw3-file b{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.hw3 .hw3-cursor{position:absolute;right:-8px;bottom:-9px;width:21px;height:21px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes hw3-in{0%{transform:translate(14px,8px);opacity:0}12%,38%{transform:translate(0,0);opacity:1}58%{transform:translate(-150%,-6%) scale(.66);opacity:.8}66%{transform:translate(-225%,-12%) scale(.32);opacity:0}67%,100%{opacity:0}}
@keyframes hw3-uploaded{0%,68%{opacity:0}76%,93%{opacity:1}98%,100%{opacity:0}}
/* card 3: profile image */
.hw3 .hw3-profile{overflow:visible}
.hw3 .hw3-profile img{width:min(100%,430px);height:auto;filter:drop-shadow(0 24px 38px rgba(20,28,46,.28))}
/* progress */
.hw3 .hw3-prog{position:relative;width:100%;max-width:560px}
.hw3 .hw3-prog-line{height:4px;background:rgba(27,31,59,.14);border-radius:99px;overflow:hidden;position:relative}
.hw3 .hw3-prog-fill{position:absolute;left:0;top:0;height:100%;background:var(--red);border-radius:99px;width:0;transition:width .25s linear}
.hw3 .hw3-prog-labels{display:flex;justify-content:space-between;margin-top:13px;font-size:13px;color:#8b8f98;font-weight:600}
.hw3 .hw3-prog-labels span{display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:color .3s;user-select:none}
.hw3 .hw3-prog-labels span:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--surface-3);transition:background .3s,transform .3s}
.hw3 .hw3-prog-labels span.active{color:var(--red)}
.hw3 .hw3-prog-labels span.active:before{background:var(--red);transform:scale(1.35)}
.hw3 .hw3-prog-labels span.done{color:var(--muted)}
.hw3 .hw3-prog-labels span.done:before{background:var(--muted)}
/* reveal */
.hw3 .hw3-reveal{opacity:0;transform:translateY(16px)}
.hw3 .hw3-reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
/* mobile / reduced-motion: static vertical stack, no scroll-jack */
@media(max-width:820px){
  .hw3 .hw3-deck{height:auto;margin-top:20px}
  .hw3 .hw3-group{position:static !important;width:auto !important;left:auto !important;gap:0}
  .hw3 .hw3-stage{height:auto;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
  .hw3 .hw3-card{position:relative;min-height:auto;transform:none !important;opacity:1 !important;grid-template-columns:1fr;gap:22px;padding:26px 22px}
  .hw3 .hw3-viz{order:-1;height:clamp(200px,52vw,250px)}
  .hw3 .hw3-card p{max-width:none}
  .hw3 .hw3-prog{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hw3 .hw3-deck{height:auto}.hw3 .hw3-group{position:static !important;width:auto !important}
  .hw3 .hw3-stage{height:auto;display:flex;flex-direction:column;gap:20px}
  .hw3 .hw3-card{position:relative;transform:none !important;opacity:1 !important}
  .hw3 .hw3-prog{display:none}
  .hw3 .hw3-devices .dv,.hw3 .hw3-drag,.hw3 .hw3-drop,.hw3 .hw3-ring{animation:none}
}
/*HW-CSS-END*/


section.sci-v[hidden]{display:none!important}

/* ===== solution V2 : the real app, tab by tab (ported from the labs page) ===== */
/* ===== 360 V3 : real app, tab by tab ===== */
.lp4c .lp4-head{margin-bottom:clamp(20px,3vw,34px)}
.lp4c-wrap{max-width:1340px}
/* the switcher sits on the browser chrome, in the coaching pill language */
.lp4c-tabs{position:relative;display:inline-flex;gap:4px;padding:5px;margin:0 auto;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);max-width:100%}
.lp4c-tabs button{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted-2);padding:8px 16px;border-radius:999px;white-space:nowrap;transition:color .35s,transform .15s}
.lp4c-tabs button:hover:not(.on){color:var(--ink)}
.lp4c-tabs button:active{transform:scale(.96)}
.lp4c-tabs button.on{color:#fff}
.lp4c-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:0;background:linear-gradient(150deg,#2b3350,#1B1F3B);box-shadow:0 10px 24px -12px rgba(18,20,29,.6),inset 0 -2px 0 #E6261C;transition:transform .5s cubic-bezier(.34,1.18,.5,1),width .5s cubic-bezier(.34,1.18,.5,1)}
.lp4c-desc{text-align:center;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.6;color:var(--muted);max-width:58ch;margin:0 auto clamp(22px,3vw,34px);transition:opacity .3s}
.lp4c-desc.swap{opacity:0}
.lp4c-win{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 40px 90px -40px rgba(20,28,46,.4),0 10px 30px -18px rgba(20,28,46,.2);overflow:hidden}
.lp4c-bar{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fbfcfe,#f4f6f9)}
.lp4c-dots{display:flex;gap:6px;flex:none;width:96px}
.lp4c-dots i{width:10px;height:10px;border-radius:50%;background:rgba(27,31,59,.14)}
.lp4c-url{flex:none;width:96px;text-align:right;font-size:11px;font-weight:600;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp4c-view{position:relative;height:clamp(560px,62vw,860px)}
.lp4c-shot{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:auto;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .45s var(--expo);pointer-events:none;scrollbar-width:thin;scrollbar-color:rgba(78,109,140,.45) transparent}
.lp4c-shot::-webkit-scrollbar{width:9px}
.lp4c-shot::-webkit-scrollbar-thumb{background:rgba(78,109,140,.4);border-radius:99px;border:2px solid #fff}
.lp4c-shot::-webkit-scrollbar-track{background:transparent}
.lp4c-shot.on{opacity:1;pointer-events:auto}
.lp4c-shot img{display:block;width:100%;height:auto}
.lp4c-fade{position:absolute;left:0;right:12px;bottom:0;height:70px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85));pointer-events:none}
.lp4c-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:999px;padding:6px 13px;box-shadow:0 8px 20px -10px rgba(20,28,46,.35);pointer-events:none;transition:opacity .4s}
.lp4c-hint svg{width:11px;height:11px}
.lp4c-win.scrolled .lp4c-hint{opacity:0}
@media(max-width:860px){
  .lp4c-view{height:clamp(320px,90vw,480px)}
}



section.sol-v[hidden]{display:none!important}

/* ===== problem V2 : scroll parallax (sticky photo, copy drifting through) ===== */
.pxs{position:relative;z-index:2;padding:0 12px}
.pxs-track{position:relative;height:210vh}
.pxs-sticky{position:sticky;top:12px;height:calc(100vh - 24px);border-radius:28px;overflow:hidden;
  transform:scale(var(--px-s,.86));transform-origin:50% 50%;will-change:transform;
  box-shadow:0 60px 120px -60px rgba(14,22,38,.5)}
.pxs-img{position:absolute;inset:0;background-size:cover;background-position:center 38%;
  transform:scale(var(--px-z,1.12));transform-origin:50% 50%;will-change:transform}
.pxs-veil{position:absolute;inset:0;opacity:var(--px-v,.5);
  background:linear-gradient(180deg,rgba(11,14,26,.86) 0%,rgba(11,14,26,.62) 45%,rgba(11,14,26,.88) 100%)}
.pxs-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:0 clamp(24px,6vw,80px);text-align:center;color:#fff;
  transform:translate3d(0,var(--px-y,0px),0);opacity:var(--px-o,0);will-change:transform,opacity}
.pxs-eb{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:8px 15px;margin:0 0 4px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pxs-eb i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
/* the full headline, so it says the same thing V1 does */
.pxs-h{font-size:clamp(28px,4.1vw,56px);font-weight:800;letter-spacing:-.032em;line-height:1.06;margin:0;
  text-wrap:balance;max-width:19ch}
.pxs-ac{color:var(--red)}
.pxs-p{font-size:clamp(15.5px,1.35vw,19px);line-height:1.6;color:rgba(255,255,255,.86);margin:6px 0 0;
  max-width:62ch;text-wrap:pretty}
@media(max-width:860px){
  .pxs-track{height:180vh}
}
@media(prefers-reduced-motion:reduce){
  .pxs-sticky,.pxs-img{transform:none!important}
  .pxs-copy{transform:none!important;opacity:1!important}
  .pxs-veil{opacity:.72!important}
}
section.prb-v[hidden],section.phy-v[hidden]{display:none!important}

/* ===== cinematic reveal : the line reads across the top, the athlete sits under it ===== */
/* it is a sentence now, not a two-word headline, so it stops being a left-hand column */
#software-v4 .cin-reveal{left:50%;top:clamp(22px,4.5vh,46px);transform:translateX(-50%);
  width:min(860px,86%);max-width:none;text-align:center;
  font-size:clamp(17px,1.75vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.32;text-wrap:balance;
  clip-path:inset(-8% 0 -8% 0)}
/* the athlete drops below the line and the floats follow him down */
#software-v4 .cin-athlete{height:74%}
/* measured stack, so the four gauges never touch: FatMax / VO2max / Glycogen / VLamax */
#software-v4 .cin-g3{top:20%;bottom:auto}
#software-v4 .cin-g1{top:38%;bottom:auto}
#software-v4 .cin-g4{top:57%;bottom:auto}
#software-v4 .cin-g2{top:auto;bottom:6%}
#software-v4 .cin-graphs{top:57%}
@media(max-width:1100px){
  #software-v4 .cin-reveal{font-size:clamp(15px,2.1vw,20px);width:92%}
  #software-v4 .cin-athlete{height:66%}
}
.swv4.cin-static #software-v4 .cin-reveal,.swv4.cin-static .cin-reveal{top:auto;bottom:5%;transform:translateX(-50%);font-size:16px}

/* ===== cinematic reveal, round 2 ===== */
/* a longer sentence than the two-liner it replaced, so it steps down a size */
#software-v4 .cin-intro h2{font-size:clamp(23px,3.1vw,44px);letter-spacing:-.03em;line-height:1.14}
#software-v4 .cin-intro .ry{color:var(--red)}

/* the card frame goes: the whole scene now sits straight on the page */
#software-v4 .cin-card{background:none;border:0;box-shadow:none;border-radius:0}

/* both sides carry weight now, instead of everything hugging the right */
#software-v4 .cin-graphs{position:absolute;inset:0;left:0;top:0;transform:none;display:block;z-index:5}
/* anchored to the centre, not the card edges, so every card keeps a fixed gap to the
   athlete (he is 291px wide, so 145px from centre) instead of drifting out with the page.
   Gauges clear his shoulders by ~70px, the wider graphs sit ~50px off his legs. */
#software-v4 .cin-graphs .cg{position:absolute;bottom:6%;margin:0;width:min(24vw,300px)}
#software-v4 .cin-graphs .cg:first-child{left:auto;right:calc(50% + 195px)}   /* lactate, bottom left */
#software-v4 .cin-graphs .cg:last-child{right:auto;left:calc(50% + 195px);margin-left:0} /* fat & carb, bottom right */
/* pulling the gauges inward put the top pair behind the reveal sentence, which now runs
   three lines deep, so the whole stack starts below it */
/* pixel-sampling the cutout: across the top 98px he is only 71px wide from centre (head),
   against 145px at the shoulders. The top pair therefore sits at 140px, giving the same
   ~70px optical gap the mid pair has, instead of the 144px hole it read as before. */
#software-v4 .cin-g3{left:auto;right:calc(50% + 140px);top:23%;bottom:auto}   /* FatMax   top left */
#software-v4 .cin-g1{left:auto;right:calc(50% + 215px);top:42%;bottom:auto}   /* VO2max   mid left */
#software-v4 .cin-g4{right:auto;left:calc(50% + 140px);top:23%;bottom:auto}   /* Glycogen top right */
#software-v4 .cin-g2{right:auto;left:calc(50% + 215px);top:42%;bottom:auto}   /* VLamax   mid right */

/* with no card behind him the athlete's crop would read as a hard cut, so his legs
   dissolve into the page and a wide soft floor sits behind his feet */
#software-v4 .cin-athlete{
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.5) 93%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.5) 93%,transparent 100%);
  filter:none}
#software-v4 .cin-inner::after{content:"";position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  width:min(64%,780px);height:210px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(20,28,46,.15) 0%,rgba(20,28,46,.06) 46%,transparent 72%);
  filter:blur(16px)}
@media(max-width:1180px){
  #software-v4 .cin-graphs .cg{width:min(26vw,250px)}
  #software-v4 .cin-graphs .cg:first-child{right:calc(50% + 165px)}
  #software-v4 .cin-graphs .cg:last-child{left:calc(50% + 165px)}
  #software-v4 .cin-g3,#software-v4 .cin-g1,#software-v4 .cin-g4,#software-v4 .cin-g2{width:104px}
  #software-v4 .cin-g1{right:calc(50% + 180px)}
  #software-v4 .cin-g2{left:calc(50% + 180px)}
  #software-v4 .cin-g3{right:calc(50% + 120px)}
  #software-v4 .cin-g4{left:calc(50% + 120px)}
}

/* ===== capability tabs : the two new panels ===== */
.fld-vis{overflow:visible;background:transparent!important;border:0!important}
/* cutout, same language as the fueling / limiters / zones panels: bottom-anchored,
   oversized, dissolved at the feet. The Higgsfield matte was hardened first, its low-alpha
   veil rendered as a grey block. Now superseded by Igor's Canva cutout,
   assets/inbox/2026-07-31-elite-road-test-canva-trim.png. Height is capped so the group
   clears the tab row above it instead of covering the last tab's label. */
/* NOTE: a global img{max-width:100%} caps the width, and the width then drives the height,
   so a height:% here is silently ignored. Position is controlled by the bottom offset instead. */
.fld-ath{position:absolute;left:50%;bottom:-25%;transform:translateX(-50%);width:100%;height:auto;
  max-height:none!important;z-index:2;border-radius:0!important;box-shadow:none!important;
  filter:drop-shadow(0 26px 34px rgba(20,28,46,.22));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.5) 74%,transparent 84%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.5) 74%,transparent 84%)}
.fld-vis .gfloat{opacity:1;transform:none;animation-play-state:running}
.fld-vis .fld-vo2{left:-7%;top:9%;z-index:4}
/* beside the rider's leg rather than out on the panel edge */
.fld-vis .fld-vla{left:31%;right:auto;bottom:9%;z-index:4;animation-delay:-3.1s}
/* placeholder art, until the real visual is approved */
.ph-slot{position:absolute;inset:0;z-index:1;border-radius:20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,rgba(27,31,59,.035) 14px 28px);
  border:1.5px dashed rgba(27,31,59,.22)}
.ph-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.ph-note{font-size:14px;font-weight:700;color:var(--muted)}
@media(max-width:860px){.fld-vis .fld-vo2{left:0}.fld-vis .fld-vla{left:34%}}

/* ===== interval design panel : skier + lactate card + a unit-less recovery index ===== */
.ski-vis{overflow:visible;background:transparent!important;border:0!important}
.ski-ph{border-radius:20px}
/* NOTE: `.uc-vis img` (0,1,1) outranks a bare class (0,1,0) and sets width/height to auto,
   which is why a plain .ski-ath{width:..} was ignored. Qualify with the element to win.
   He is a tall portrait (0.72), so width drives height: 70% keeps him clear of the tab row. */
.uc-vis img.ski-ath{position:absolute;left:50%;bottom:-5%;transform:translateX(-50%);width:70%;height:auto;
  max-width:none;max-height:none;z-index:2;border-radius:0!important;box-shadow:none!important;
  filter:drop-shadow(0 26px 34px rgba(20,28,46,.22));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.5) 76%,transparent 86%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.5) 76%,transparent 86%)}
.ski-vis .gfloat{opacity:1;transform:none;animation-play-state:running}
/* the card must size to its graph: .gf-graph also sets bottom, so pairing it with a top
   stretched the card to 489px around a 176px chart. Plain .gfloat + bottom:auto instead. */
.ski-vis .ski-lac{right:-5%;top:20%;bottom:auto;width:min(26vw,296px);height:auto;z-index:5}
.ski-vis .ski-lac .gx{width:100%;height:auto;display:block}
.ski-vis .ski-rec{left:-2%;bottom:18%;z-index:5;animation-delay:-2.6s}
/* the skier moves off centre so the chart sits beside him, not on top of him */
.uc-vis img.ski-ath{left:33%}
@media(max-width:1180px){
  .ski-vis .ski-lac{width:min(30vw,240px);right:-2%}
  .ski-vis .ski-rec{left:0}
  .uc-vis img.ski-ath{left:31%;width:62%}
}

/* ===== conditions zone : 4 layout variants ===== */
.cn-v1{text-align:left}
.cn-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center}
.cn-v1 .sec-title{font-size:clamp(26px,3vw,44px)}
.cn-v1 .sec-sub{margin:14px 0 0;max-width:none}
.cn-bang{font-size:clamp(30px,3.4vw,52px);margin:20px 0 6px}
.cn-chips{justify-content:flex-start;gap:9px;margin:22px 0 0}
.cn-chips .et-ic{width:86px;padding:12px 6px 10px}
.cn-grid .et-video{max-width:none}
@media(max-width:960px){.cn-grid{grid-template-columns:1fr}.cn-v1{text-align:center}
  .cn-chips{justify-content:center}.cn-v1 .sec-sub{margin-left:auto;margin-right:auto}}
.cn-hero{position:relative;max-width:1180px;margin:0 auto;border-radius:26px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 44px 90px -44px rgba(20,28,46,.55);background:#0d1122;text-align:left}
.cn-hero video{width:100%;height:auto;display:block}
.cn-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,12,26,.94) 0%,rgba(9,12,26,.62) 26%,rgba(9,12,26,.2) 46%,transparent 62%)}
.cn-ovl{position:absolute;left:clamp(18px,3.4vw,44px);top:clamp(18px,3.2vw,42px);max-width:560px}
.cn-ovl .sec-title{color:#fff;font-size:clamp(22px,2.6vw,38px)}
.cn-ovl .sec-title .accent{color:#ff8d86}
.cn-ovl p{margin-top:12px;font-size:clamp(12.5px,1.2vw,15.5px);line-height:1.6;color:rgba(255,255,255,.82);max-width:470px}
.cn-pills{position:absolute;left:clamp(18px,3.4vw,44px);bottom:clamp(16px,2.8vw,36px);display:flex;flex-wrap:wrap;gap:8px;max-width:70%}
.cn-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#fff;
  background:rgba(13,17,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 13px}
.cn-pill svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cn-v2 .et-vtag{left:auto;right:14px}
@media(max-width:760px){.cn-ovl p{display:none}.cn-pills{max-width:calc(100% - 36px)}}
.cn-railgrid{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.6vw,30px);align-items:center;
  max-width:1080px;margin:clamp(26px,4vw,40px) auto 0}
.cn-rail{display:flex;flex-direction:column;gap:12px;position:relative}
.cn-rail::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;border-left:1px dashed rgba(27,31,59,.25);z-index:0}
.cn-rail .et-ic{position:relative;z-index:1;width:96px}
.cn-railgrid .et-video{max-width:none}
@media(max-width:820px){.cn-railgrid{grid-template-columns:1fr}.cn-rail{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .cn-rail::before{display:none}}

/* conditions V2 rework: text row above, bottom overlay on the video */
.cn-top{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,48px);align-items:center;
  max-width:1180px;margin:0 auto clamp(22px,3.2vw,38px);text-align:left}
.cn-top .sec-title{font-size:clamp(26px,3vw,44px)}
.cn-top .sec-sub{margin:14px 0 0;max-width:none}
.cn-chips2{justify-content:flex-end;gap:8px;margin:0;flex-wrap:nowrap}
.cn-chips2 .et-ic{width:84px}
@media(max-width:1080px){.cn-chips2{flex-wrap:wrap}}
.cn-bot{position:absolute;left:clamp(18px,3.4vw,44px);right:clamp(18px,3.4vw,44px);bottom:clamp(16px,3vw,36px);
  max-width:780px;text-align:left}
.cn-ubang{font-size:clamp(24px,2.7vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#ff6a5f}
.cn-bot p{margin-top:0;font-size:clamp(13px,1.35vw,17px);line-height:1.65;color:rgba(255,255,255,.9);
  text-shadow:0 1px 14px rgba(9,12,26,.45)}
@media(max-width:900px){.cn-top{grid-template-columns:1fr}.cn-chips2{justify-content:flex-start}}
@media(max-width:640px){.cn-bot p{font-size:11.5px;line-height:1.5}.cn-ubang{font-size:22px}}

.cn-un{color:var(--red);font-weight:800;white-space:nowrap}
/* ===== protocol zone : layout variants ===== */
.pv-wrap{max-width:820px;margin:clamp(26px,4vw,40px) auto 0}
.pv-wrap .pr-card{margin:0 auto}
.pv3-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.6vw,48px);align-items:center;
  max-width:1080px;margin:clamp(26px,4vw,44px) auto 0;text-align:left}
.pv3-photo{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 44px 90px -44px rgba(20,28,46,.55);outline:1px solid rgba(0,0,0,.06);outline-offset:-1px}
.pv3-photo img{width:100%;height:auto;display:block}
.pv3-chip{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;color:#fff;background:rgba(13,17,34,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 12px}
.pv3-chip i{width:7px;height:7px;border-radius:50%;background:#39d98a;animation:rjpulse 1.8s ease-in-out infinite}
.pv3-badge{position:absolute;right:14px;top:14px;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:rgba(78,109,140,.82);-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 11px}
.pv3-copy h3{font-size:clamp(17px,1.7vw,22px);font-weight:800;color:var(--ink);letter-spacing:-.015em;margin-bottom:14px}
.pv3-copy .pr-rx{margin-bottom:12px}
@media(max-width:920px){.pv3-grid{grid-template-columns:1fr}}
.pv4{max-width:860px;margin:clamp(26px,4vw,40px) auto 0}
.pv4-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pv4-pill{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:12.5px;font-weight:800;
  color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:color .25s,background-color .25s,border-color .25s,transform .15s}
.pv4-pill svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pv4-pill:hover{color:var(--ink)}
.pv4-pill:active{transform:scale(.96)}
.pv4-pill.on{color:#fff;background:var(--rec);border-color:var(--rec)}
.pv4-p{display:none}
.pv4-p.on{display:block}

/* protocol round 2: compact rows, typed switcher, week calendar, funnel */
.p3-card{padding:16px 18px 14px}
.p3-row{display:grid;grid-template-columns:1fr 190px;gap:16px;align-items:center;
  padding:10px 12px;border:1px solid rgba(27,31,59,.08);border-radius:12px;background:rgba(255,255,255,.72)}
.p3-row+.p3-row{margin-top:8px}
.p3-txt b{font-size:12.5px;font-weight:800;color:var(--ink);display:block;margin-bottom:2px}
.p3-txt p{font-size:11.5px;line-height:1.45;color:var(--muted)}
.p3-row .pr-mini{height:44px;margin:0}
@media(max-width:640px){.p3-row{grid-template-columns:1fr}.p3-row .pr-mini{height:36px}}
.pv-compact .pr-card{padding:16px 18px 12px}
.pv-compact .pv4-pills{margin-bottom:12px}
.p5-week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:4px 0 12px}
.p5-day{position:relative;border:1px solid rgba(27,31,59,.1);border-radius:12px;background:rgba(255,255,255,.72);
  padding:10px 8px 12px;text-align:center;min-height:78px}
.p5-d{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.p5-day b{font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.25;display:block}
.p5-day.on{background:var(--rec);border-color:var(--rec);box-shadow:0 14px 28px -14px rgba(78,109,140,.65)}
.p5-day.on .p5-d{color:rgba(255,255,255,.75)}
.p5-day.on b{color:#fff;font-weight:800}
.p5-test{display:inline-flex;align-items:center;gap:3px;margin-top:6px;font-size:8.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(230,38,28,.9);border-radius:999px;padding:3px 8px}
.p5-test i{width:4px;height:5px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:#fff;display:inline-block}
@media(max-width:760px){.p5-week{grid-template-columns:repeat(4,1fr)}}
.p6-grid{display:grid;grid-template-columns:1fr 120px 1fr;gap:14px;align-items:center;margin:6px 0 10px}
.p6-col{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.p6-col.out{align-items:flex-start}
.p6-lab{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:2px}
.p6-in{font-size:11.5px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.85);
  border:1px solid rgba(27,31,59,.12);border-radius:999px;padding:6px 12px}
.p6-note{font-size:10px;font-weight:700;color:var(--muted-2);margin-top:2px}
.p6-mid svg{width:100%;height:auto;display:block}
.p6-outs{display:flex;flex-wrap:wrap;gap:6px}
.p6-out{font-size:11px;font-weight:800;color:#fff;background:var(--rec);border-radius:999px;padding:6px 11px}
@media(max-width:680px){.p6-grid{grid-template-columns:1fr}.p6-mid{display:none}}

/* protocol round 3: split layouts + analyzing pipeline */
.p3-split,.p7-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);align-items:center;text-align:left;margin-top:6px}
.p7-head .sec-title{font-size:clamp(24px,2.6vw,40px)}
.p7-head .sec-sub{margin:14px 0 0;max-width:none;font-size:clamp(12.5px,1.15vw,15px)}
.p3-side .pr-card{margin:0}
@media(max-width:960px){.p3-split,.p7-split{grid-template-columns:1fr}
  .p7-head{text-align:center}.p7-head .sec-sub{margin-left:auto;margin-right:auto}}
.p7-flow{display:grid;grid-template-columns:auto 56px auto 56px auto;gap:6px;align-items:center;justify-content:center}
.p7-ins{display:flex;flex-direction:column;gap:10px}
.p7-box{width:150px;background:#fff;border:1px solid var(--border);border-radius:13px;padding:9px 11px 8px;
  box-shadow:0 14px 30px -22px rgba(20,28,46,.35)}
.p7-box b{display:block;font-size:10.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.p7-box svg{width:100%;height:auto;display:block}
.p7-conn{width:56px;height:auto;align-self:stretch}
.p7-lines path{stroke-dasharray:4 7}
@media(prefers-reduced-motion:no-preference){.p7-lines path{animation:p7flow 1.6s linear infinite}}
@keyframes p7flow{to{stroke-dashoffset:-22}}
.p7-lap{display:flex;flex-direction:column;align-items:center}
.p7-screen{position:relative;width:158px;height:100px;background:#fff;border:2px solid #1b1f3b;border-radius:10px 10px 3px 3px;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.p7-screen img{width:96px;height:auto;display:block}
.p7-scan{position:absolute;left:0;right:0;top:0;height:26px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(78,109,140,0),rgba(78,109,140,.18),rgba(78,109,140,0))}
@media(prefers-reduced-motion:no-preference){.p7-scan{animation:p7scan 2.6s ease-in-out infinite}}
@keyframes p7scan{0%{transform:translateY(-28px)}55%{transform:translateY(102px)}100%{transform:translateY(102px)}}
.p7-an{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:8.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rec)}
.p7-an i{font-style:normal;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .p7-an i{animation:p7dot 1.4s infinite}
  .p7-an i:nth-child(2){animation-delay:.25s}.p7-an i:nth-child(3){animation-delay:.5s}}
@keyframes p7dot{0%,20%{opacity:0}45%,70%{opacity:1}100%{opacity:0}}
.p7-base{width:186px;height:7px;background:#1b1f3b;border-radius:0 0 9px 9px;margin-top:-1px}
.p7-gs{display:flex;flex-direction:column;gap:12px}
.p7-flow .gfloat{position:static;opacity:1;transform:none;animation:none;width:150px}
.p7-flow .gfloat .gx{width:100%;height:auto}
@media(max-width:760px){.p7-flow{grid-template-columns:1fr;justify-items:center}
  .p7-conn{display:none}.p7-ins{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .p7-gs{flex-direction:row;flex-wrap:wrap;justify-content:center}}

/* protocol V4 round 4: stacked layout, MacBook, floating cards, comet beams */
#protocol-v4 .p7-head{max-width:760px;text-align:left}
.p7-stage{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,44px);
  align-items:center;max-width:1180px;margin:clamp(28px,4vw,48px) auto 0}
.p7-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.p7-svg .p7-base{fill:none;stroke:rgba(20,28,46,.12);stroke-width:1.2}
.p7-svg .p7-e{fill:none;stroke-linecap:round;stroke:#ff4a40;stroke-width:1.7;
  filter:drop-shadow(0 0 2px rgba(230,38,28,.5))}
@media(prefers-reduced-motion:no-preference){.p7-svg .p7-e{animation:p7comet var(--dur) linear infinite}}
@keyframes p7comet{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.p7-lap2{position:relative;width:clamp(300px,32vw,420px);z-index:3;justify-self:center}
.p7-mock{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 44px rgba(20,28,46,.28))}
.p7-screen2{position:absolute;left:24.2%;top:20.5%;width:51.2%;height:49.8%;background:#fff;border-radius:3px;
  display:grid;place-items:center;overflow:hidden}
.p7-screen2 img{width:62%;height:auto;display:block}
.p7-float{will-change:transform}
@media(prefers-reduced-motion:no-preference){
  .p7-float{animation:p7bob 6.4s ease-in-out infinite alternate}
  .p7-float.f1{animation-delay:-1.4s}.p7-float.f2{animation-delay:-2.8s}.p7-float.f3{animation-delay:-4.2s}
  .p7-float.f4{animation-delay:-.9s}.p7-float.f5{animation-delay:-2.2s}.p7-float.f6{animation-delay:-3.6s}}
@keyframes p7bob{from{transform:translateY(3px)}to{transform:translateY(-4px)}}
.p7-gs{z-index:3}
.p7-ins{z-index:3}
.p7-box{box-shadow:0 18px 40px -20px rgba(20,28,46,.4)}
.p7-flow .gfloat,.p7-stage .gfloat{position:static;opacity:1;transform:none;animation:none;width:150px}
.p7-stage .gfloat .gx{width:100%;height:auto}
@media(max-width:820px){.p7-stage{grid-template-columns:1fr;justify-items:center}
  .p7-svg{display:none}
  .p7-ins{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center}
  .p7-gs{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:center}}

/* ===== platform bento: featured card 1 + variants ===== */
.lp5-bento2{grid-template-rows:repeat(2,minmax(clamp(178px,18.5vw,214px),auto)) auto}
.lp5-bento2 .lp5-card{min-height:0}
.lp5-feat{grid-column:1/3;grid-row:1/3;padding:20px 20px 0}
.lp5-user{grid-column:3/5;grid-row:1;position:relative;display:flex;flex-direction:column;padding:16px 16px 0}
.lp5-devrow{grid-column:3/5;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:18px 20px 16px}
.lp5-devrow .eb-chips{justify-content:flex-end}
.lp5-devrow .lp5-txt{max-width:100%}
.lp5-dev{margin:0 0 0 auto;justify-content:flex-end}
.adp{position:relative;flex:1;min-height:0;margin:0 -20px 0;overflow:hidden}
.adp-it{position:absolute;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(27,31,59,.1);
  border-radius:13px;padding:8px 12px;box-shadow:0 14px 30px -16px rgba(20,28,46,.4);will-change:transform,opacity}
.adp-it svg{width:40px;height:24px;display:block}
.adp-it svg.ic{width:22px;height:22px}
.adp-it .av{width:26px;height:26px;border-radius:50%;background:var(--rec);color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center}
.adp-it .tt b{display:block;font-size:11px;font-weight:800;color:var(--ink);line-height:1.15}
.adp-it .tt i{font-style:normal;font-size:9px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
/* V1: full-bleed bento stage, chips band tightly around a big laptop */
.lp5-feat{position:relative}
.lp5-feat .lp5-txt{position:relative;z-index:6;max-width:78%}
.adp1{position:absolute;inset:0;margin:0;min-height:0}
.adp1 .adp-lap{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:min(58%,325px)}
.adp1 .adp-it{will-change:transform,opacity}
.adp1 .s1{left:50%;top:22%;transform:translateX(-50%)}
.adp1 .s2{left:3%;top:26%}
.adp1 .s3{left:0;top:52%}
.adp1 .s4{left:9%;top:82%}
.adp1 .s5{right:3%;top:26%}
.adp1 .s6{right:0;top:52%}
.adp1 .s7{right:9%;top:82%}
@media(prefers-reduced-motion:no-preference){.adp1 .adp-it{animation:adpDive 11.2s cubic-bezier(.45,0,.2,1) infinite;animation-delay:var(--d)}}
@keyframes adpDive{
  0%,71%{translate:0 0;scale:1;opacity:1}
  78%{translate:var(--dx) var(--dy);scale:.3;opacity:0}
  80%{translate:0 0;scale:.9;opacity:0}
  87%,100%{translate:0 0;scale:1;opacity:1}}
.av-img{overflow:hidden;padding:0;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(27,31,59,.12)}
.av-img img{width:100%;height:100%;object-fit:cover;display:block}
/* V2: folder dock */
.adp2{min-height:340px}
.adp2 .adp-fan{position:absolute;left:50%;bottom:104px;width:0}
.adp2 .adp-it{left:0;bottom:0;transform:translateX(-50%) translateY(calc(var(--i)*-6px)) rotate(calc((var(--i) - 2)*3deg));
  transition:transform .55s cubic-bezier(.2,0,0,1)}
.adp2:hover .adp-it{transform:translateX(calc(-50% + (var(--i) - 2)*118px)) translateY(-64px) rotate(calc((var(--i) - 2)*6deg))}
.adp-folder{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(66%,330px);height:112px;
  filter:drop-shadow(0 24px 34px rgba(20,28,46,.35));transition:transform .5s cubic-bezier(.2,0,0,1);transform-origin:bottom}
.adp2:hover .adp-folder{transform:translateX(-50%) rotateX(-14deg) translateY(6px)}
.adp-ftab{position:absolute;top:-16px;left:0;width:34%;height:22px;border-radius:10px 10px 0 0;
  background:linear-gradient(to top,#23273b,#2f3450)}
.adp-fbody{position:absolute;inset:0;border-radius:14px 14px 14px 14px;background:linear-gradient(to bottom,#2f3450,#171a2b);
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px}
.adp-flabel{font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.92);background:#0c0e19;
  border-radius:8px;padding:6px 13px}
.adp-hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
/* V3: converge beams */
.adp3{min-height:340px}
.adp3-svg{position:absolute;inset:0;width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){.adp3 .adp-e{animation:p7comet var(--dur,4s) linear infinite;animation-delay:var(--d2)}}
.adp3-app{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(46%,230px);background:#fff;
  border-radius:14px;border:1px solid rgba(27,31,59,.12);box-shadow:0 30px 60px -30px rgba(20,28,46,.5);padding:0 0 12px}
.adp3-bar{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid rgba(27,31,59,.08)}
.adp3-bar i{width:7px;height:7px;border-radius:50%;background:rgba(27,31,59,.14)}
.adp3-logo{display:block;width:44%;margin:12px auto 8px}
.adp3-rows{display:flex;flex-direction:column;gap:5px;padding:0 12px}
.adp3-rows span{height:7px;border-radius:4px;background:rgba(78,109,140,.16)}
.adp3-rows span:first-child{width:86%}.adp3-rows span:nth-child(2){width:70%}.adp3-rows span:last-child{width:78%}
/* V4: merge windows */
.adp4{min-height:340px}
.adp4-w{position:absolute;width:44%;background:#fff;border-radius:12px;border:1px solid rgba(27,31,59,.12);
  box-shadow:0 22px 44px -24px rgba(20,28,46,.45);overflow:hidden;will-change:transform,opacity}
.adp4-h{font-size:10px;font-weight:800;color:var(--muted);padding:7px 11px;border-bottom:1px solid rgba(27,31,59,.08);
  background:linear-gradient(#fcfcfd,#f2f3f6);display:flex;align-items:center}
.adp4-b{display:flex;flex-direction:column;gap:5px;padding:10px 11px 12px}
.adp4-b span{height:6px;border-radius:3px;background:rgba(78,109,140,.16)}
.adp4-b span:first-child{width:88%}.adp4-b span:nth-child(2){width:64%}.adp4-b span:nth-child(3){width:76%}
.adp4-w.w1{left:6%;top:10%}.adp4-w.w2{right:5%;top:16%}.adp4-w.w3{left:14%;bottom:12%}
.adp4-w.main{left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:52%;z-index:5;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .adp4-w.w1{animation:adpM1 7s cubic-bezier(.2,0,0,1) infinite}
  .adp4-w.w2{animation:adpM2 7s cubic-bezier(.2,0,0,1) infinite}
  .adp4-w.w3{animation:adpM3 7s cubic-bezier(.2,0,0,1) infinite}
  .adp4-w.main{animation:adpMM 7s cubic-bezier(.2,0,0,1) infinite}}
@keyframes adpM1{0%,18%{transform:none;opacity:1}42%,72%{transform:translate(78%,64%) scale(.5);opacity:0}88%,100%{transform:none;opacity:1}}
@keyframes adpM2{0%,18%{transform:none;opacity:1}42%,72%{transform:translate(-72%,52%) scale(.5);opacity:0}88%,100%{transform:none;opacity:1}}
@keyframes adpM3{0%,18%{transform:none;opacity:1}42%,72%{transform:translate(58%,-58%) scale(.5);opacity:0}88%,100%{transform:none;opacity:1}}
@keyframes adpMM{0%,26%{transform:translate(-50%,-50%) scale(.86);opacity:0}46%,70%{transform:translate(-50%,-50%) scale(1);opacity:1}86%,100%{transform:translate(-50%,-50%) scale(.86);opacity:0}}
@media(max-width:900px){.lp5-feat{grid-column:1/-1;grid-row:auto}.lp5-devrow .lp5-txt{max-width:100%}}

/* users card: one-line permissions + app-header collaboration scene */
.lp5-edu{grid-column:1/3;flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:18px 20px 16px}
.lp5-edu .lp5-txt{max-width:100%}
.lp5-user .lp5-txt{max-width:100%}
.lp5-user h3{margin-bottom:4px}
.lp5-user p{font-size:13.5px}
.prm-line{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.prm{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:var(--ink);
  background:#fff;border:1px solid rgba(27,31,59,.12);border-radius:999px;padding:4px 9px 4px 4px;
  box-shadow:0 8px 18px -12px rgba(20,28,46,.4)}
.prm img{width:19px;height:19px;border-radius:50%;object-fit:cover}
.prm i{font-style:normal;font-size:9px;font-weight:800;color:var(--muted);background:rgba(27,31,59,.07);
  border-radius:999px;padding:2px 7px}
.prm i.full{color:#fff;background:var(--rec)}
.clb{position:relative;flex:1;min-height:158px;margin:10px -4px 0}
.clb-win{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(96%,470px);
  background:#fff;border-radius:14px;border:1px solid rgba(27,31,59,.12);
  box-shadow:0 26px 52px -28px rgba(20,28,46,.5);overflow:hidden}
.clb-head{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid rgba(27,31,59,.08);
  background:linear-gradient(#fcfcfd,#f4f5f8)}
.clb-ava{width:22px;height:22px;border-radius:50%;object-fit:cover}
.clb-who{display:flex;flex-direction:column;justify-content:center}
.clb-who b{display:block;font-size:11px;font-weight:800;color:var(--ink);line-height:1.1}
.clb-who i{font-style:normal;font-size:8.5px;font-weight:700;color:var(--muted-2)}
.clb-f{display:none;flex-direction:column;justify-content:center;line-height:1.2;padding-left:10px;border-left:1px solid rgba(27,31,59,.09)}
.clb-f i{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.clb-f b{font-size:10px;font-weight:800;color:var(--ink)}
@media(min-width:1100px){.clb-f{display:flex}}
.clb-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:800;
  color:#1f9d61;background:rgba(57,217,138,.12);border:1px solid rgba(57,217,138,.35);border-radius:999px;padding:3px 8px}
.clb-live i{width:5px;height:5px;border-radius:50%;background:#39d98a;animation:rjpulse 1.8s ease-in-out infinite}
.clb-gr{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:9px 10px 10px}
.mg{background:#fff;border:1px solid rgba(27,31,59,.1);border-radius:10px;padding:6px 6px 7px;text-align:center;
  box-shadow:0 8px 18px -14px rgba(20,28,46,.4)}
.mg b{display:block;font-size:8.5px;font-weight:800;color:var(--ink);margin-bottom:3px;white-space:nowrap}
.mg svg{width:100%;max-width:52px;height:auto;display:block;margin:0 auto}
.mg-v{display:block;font-size:10.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mg-v i{font-style:normal;font-size:7px;font-weight:700;color:var(--muted-2);margin-left:2px}
.clb-sel{position:absolute;left:26.5%;top:6px;width:23%;height:calc(100% - 14px);border:1.6px solid var(--rec);
  background:rgba(78,109,140,.08);border-radius:8px;opacity:0;transform:scale(.7);transform-origin:center}
.cur{position:absolute;z-index:6;filter:drop-shadow(0 4px 8px rgba(20,28,46,.3));will-change:transform}
.cur svg{width:14px;height:14px;display:block}
.cur-pill{display:inline-flex;align-items:center;gap:4px;margin:2px 0 0 9px;font-size:9.5px;font-weight:800;
  color:#fff;border-radius:999px;padding:2px 8px 2px 3px;white-space:nowrap}
.cur-pill img{width:14px;height:14px;border-radius:50%;object-fit:cover}
.cur.c1 svg{fill:var(--rec)}.cur.c1 .cur-pill{background:var(--rec)}
.cur.c2 svg{fill:#1B1F3B}.cur.c2 .cur-pill{background:#1B1F3B}
.cur.c1{left:16%;top:24%}.cur.c2{left:66%;top:64%}
@media(prefers-reduced-motion:no-preference){
  .cur.c1{animation:curA 12s ease-in-out infinite}
  .cur.c2{animation:curB 10s ease-in-out infinite}
  .clb-sel{animation:selPop 12s ease-in-out infinite}}
@keyframes curA{0%{transform:translate(0,0)}20%{transform:translate(96px,34px)}38%{transform:translate(74px,50px)}
  60%{transform:translate(-26px,64px)}82%{transform:translate(40px,12px)}100%{transform:translate(0,0)}}
@keyframes curB{0%{transform:translate(0,0)}24%{transform:translate(-120px,-30px)}48%{transform:translate(-60px,-46px)}
  72%{transform:translate(50px,-12px)}100%{transform:translate(0,0)}}
@keyframes selPop{0%,16%{opacity:0;transform:scale(.7)}24%,46%{opacity:1;transform:scale(1)}54%,100%{opacity:0;transform:scale(.7)}}
@media(max-width:900px){.lp5-user{grid-column:1/-1;grid-row:auto}.lp5-edu{grid-column:1/-1}.lp5-devrow{grid-column:1/-1}}


/* cloud card: rising rotating globe + corner cloud badge */
.lp5-cloud{position:relative;overflow:hidden}
.lp5-cloud .lp5-txt{position:relative;z-index:3;max-width:calc(100% - 40px)}
.cld-ic{position:absolute;top:14px;right:14px;z-index:4;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:#fff;border:1px solid rgba(27,31,59,.1);box-shadow:0 10px 22px -12px rgba(20,28,46,.4)}
.cld-ic svg{width:20px;height:20px}
.cld-globe{position:absolute;left:-14%;right:-14%;bottom:-2px;height:64%;z-index:1}
.cld-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cld-globe .gl-card{display:none}

/* secured card: masked data rows with an overlaid jiggling padlock */
.lp5-sec{position:relative}
.sec-viz{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:16px;min-height:150px}
.sec-rows{display:flex;flex-direction:column;gap:6px;width:84%;opacity:.92}
.sr2{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(27,31,59,.1);border-radius:10px;
  padding:5px 10px;box-shadow:0 8px 18px -14px rgba(20,28,46,.4)}
.sr2 img{width:17px;height:17px;border-radius:50%;object-fit:cover}
.sr2 svg{width:20px;height:13px}
.sr2 svg.doc{width:13px;height:13px}
.sr2 b{font-size:10px;font-weight:800;color:var(--ink)}
.sr2 .val{margin-left:auto;font-size:10px;font-weight:700;color:var(--rec);letter-spacing:1px}
.sec-lock{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3}
.sec-lock svg{width:62px;height:58px;display:block;filter:drop-shadow(0 14px 20px rgba(20,28,46,.35));
  transform-origin:50% 22%}
@media(prefers-reduced-motion:no-preference){.sec-lock svg{animation:secJig 4.6s ease-in-out infinite}}
@keyframes secJig{0%,84%{transform:rotate(0)}87%{transform:rotate(-7deg)}90%{transform:rotate(5.5deg)}
  93%{transform:rotate(-3.5deg)}96%{transform:rotate(1.8deg)}100%{transform:rotate(0)}}
.sec-badge{position:absolute;right:8%;bottom:10px;display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:800;color:#1f9d61;background:rgba(57,217,138,.12);
  border:1px solid rgba(57,217,138,.35);border-radius:999px;padding:4px 10px}
.sec-badge svg{width:11px;height:11px}

  .sec-badge{opacity:1;transform:none}}

/* education: course rows fill, then the seal stamps */
.lp5-edu .lp5-txt{max-width:100%}

@media(max-width:900px){.lp5-edu{flex-direction:column;align-items:stretch}.lp5-edu .lp5-txt{max-width:100%}}
/* device agnostic: tiles beam into the INSCYD node */
.lp5-devrow .lp5-txt{max-width:100%}
.dv-flow{position:relative;flex:1;display:flex;align-items:flex-start;gap:12px;justify-content:space-between;min-height:106px;margin-top:12px}
.dv-tiles{display:flex;gap:8px;z-index:2}
.dv-t{display:flex;flex-direction:column;align-items:center;gap:5px;background:#fff;border:1px solid rgba(27,31,59,.1);
  border-radius:13px;padding:9px 6px 7px;box-shadow:0 10px 22px -14px rgba(20,28,46,.4);width:76px}
.dv-t svg{width:22px;height:22px;fill:none;stroke:var(--rec);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dv-t img{width:22px;height:22px;display:block}
.dv-t b{font-size:9px;font-weight:800;color:var(--muted);text-align:center;line-height:1.15}
.dv-node{position:relative;z-index:2;display:grid;place-items:center;width:76px;height:64px;background:#fff;
  border:1px solid rgba(27,31,59,.12);border-radius:13px;box-shadow:0 16px 32px -18px rgba(20,28,46,.5);
  margin-left:6px}
.dv-node img{width:52px;height:auto;display:block}
@media(max-width:1000px){.lp5-devrow{flex-direction:column;align-items:stretch}.lp5-devrow .lp5-txt{max-width:100%}
  .dv-flow{justify-content:center;flex-wrap:wrap}.dv-node{margin-left:0}}


/* ===== field performance testing (fd-) ===== */
.fd-sec{padding:clamp(64px,7vw,116px) 0}
/* the tint used to start at full strength on the section's first pixel, which drew a
   hard line against the section above. It now fades in and out, so there is no edge. */
.fd-alt{background:linear-gradient(180deg,rgba(27,31,59,0),rgba(27,31,59,.026) 18%,
  rgba(27,31,59,.026) 82%,rgba(27,31,59,0))}
.fd-head{max-width:820px}
.fd-sub2{margin-top:12px}
/* hero: a real photograph, so the stock framed treatment applies. Only the crop is
   tuned, to keep the road and the waiting riders in shot next to the sample being taken. */
/* the frame keeps the stock size and ratio; the crop is pushed right so the second
   scientist stays in shot. The left of the road is what gets given up, not her. */
/* object-position could not reach far enough right to drop the leftmost riders, so
   the source JPEG is pre-cropped to the frame's own ratio and simply sits centred */
.fd-hero .fd-shot img{object-position:50% 50%}
/* VLamax hangs further outboard so it stops covering the second scientist */
.fd-hero .gf-vla{top:24%;right:-22%}
/* ---- the homepage comparison table, ported verbatim (cmpx-) ---- */
/* These custom properties sit ABOVE the block marker on the homepage, so they have
   to be carried over explicitly: without them the charcoal header gradient and the
   red INSCYD marks resolve to nothing and the column renders white on white. */
.cmpx{--ins:#D2231A;--ins-deep:#a1140c;--dk1:#252936;--dk2:#12141d;
  --ins-soft:rgba(22,26,38,.032);--ins-line:rgba(22,26,38,.14);--yes:#5f6675;
  --conv-yes:#9aa0ab;--no:#e0554d;--no-ink:#6b7280}
/*CMPX-CSS-START*/
.cmpx{max-width:1120px;margin:0 auto;padding:clamp(56px,8vh,104px) 24px;position:relative;z-index:2}
.cmpx *,.cmpx *:before,.cmpx *:after{box-sizing:border-box}
.cmpx-head{text-align:center;max-width:760px;margin:0 auto clamp(28px,3.4vh,40px)}
.cmpx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 13px}
.cmpx-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.cmpx-head h2{margin:16px 0 0;font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;color:var(--ink)}
.cmpx-head h2 .accent{color:var(--red)}
.cmpx-head p{margin:13px 0 0;font-size:17px;line-height:1.55;color:var(--muted);font-weight:500;text-wrap:pretty}

/* tabs */
.cmpx-tabs{display:flex;justify-content:center;margin:clamp(22px,3vh,30px) 0 24px}
.cmpx-tablist{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-2);max-width:100%;flex-wrap:wrap;justify-content:center}
.cmpx-tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted);
  padding:9px 18px;border-radius:999px;white-space:nowrap;transition:color .35s}
.cmpx-tab[aria-selected="true"]{color:#fff}
.cmpx-tab:hover:not([aria-selected="true"]){color:var(--ink)}
.cmpx-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:0;
  background:linear-gradient(150deg,var(--dk1),var(--dk2));box-shadow:0 10px 24px -12px rgba(18,20,29,.6),inset 0 -2px 0 var(--ins);
  transition:transform .5s cubic-bezier(.34,1.18,.5,1),width .5s cubic-bezier(.34,1.18,.5,1)}
@media(max-width:600px){.cmpx-pill{display:none}.cmpx-tab[aria-selected="true"]{background:linear-gradient(150deg,var(--dk1),var(--dk2));box-shadow:inset 0 -2px 0 var(--ins)}}

/* table */
.cmpx-tablewrap{border:1px solid var(--border);border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:0 40px 80px -48px rgba(20,28,46,.4),0 1px 0 rgba(255,255,255,.6) inset}
.cmpx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmpx-table{width:100%;border-collapse:collapse;table-layout:fixed}
.cmpx-table col.metric{width:36%}
.cmpx-table th,.cmpx-table td{padding:16px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.cmpx-table tbody tr:last-child td{border-bottom:0}
/* head */
.cmpx-table thead th{background:var(--surface-2);vertical-align:middle}
.cmpx-th-metric{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cmpx-th-conv .nm{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.cmpx-th-conv .tg{display:block;margin-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
/* premium: charcoal header with a red signature edge (red + black, not a red slab) */
.cmpx-table thead th.cmpx-th-ins{position:relative;background:linear-gradient(150deg,var(--dk1) 0%,var(--dk2) 100%);color:#fff;overflow:hidden}
.cmpx-th-ins:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ins),var(--ins-deep) 70%,transparent);z-index:1}
.cmpx-th-ins:after{content:"";position:absolute;top:-70%;right:-10%;width:48%;height:240%;background:radial-gradient(circle,rgba(255,255,255,.09),transparent 72%);pointer-events:none}
.cmpx-th-ins .nm{position:relative;display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.cmpx-th-ins .tg{position:relative;display:block;margin-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#f0837c}
/* INSCYD column tint */
.cmpx-col-ins{background:var(--ins-soft);border-left:1px solid var(--ins-line)}
.cmpx-rowlabel{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.cmpx-cell{display:flex;gap:11px;align-items:flex-start}
.cmpx-mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px}
.cmpx-mk.yes{background:rgba(154,160,171,.16);color:var(--conv-yes)}
.cmpx-mk.no{background:rgba(224,85,77,.13);color:var(--no);box-shadow:inset 0 0 0 1px rgba(224,85,77,.22)}
.cmpx-mk.ins{background:linear-gradient(135deg,var(--ins),var(--ins-deep));color:#fff;box-shadow:0 6px 14px -7px rgba(210,35,26,.5)}
.cmpx-mk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.cmpx-mk.no svg{width:12.5px;height:12.5px;stroke-width:3}
.cmpx-vtxt{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cmpx-vtxt.muted{color:var(--muted)}
.cmpx-vsub{display:block;font-size:12px;font-weight:500;color:var(--muted);line-height:1.4;margin-top:3px;letter-spacing:0}
.cmpx-col-ins .cmpx-vsub{color:#596073}
/* stat rows (time / samples / cost) folded into the table */
.cmpx-strow td{background:var(--surface-2)}
.cmpx-strow td.cmpx-col-ins{background:rgba(22,26,38,.06)}
.cmpx-strow .cmpx-rowlabel{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.cmpx-stat{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cmpx-col-ins .cmpx-stat{color:var(--ins-deep)}
.cmpx-strow td.cmpx-col-ins .cmpx-stat{color:var(--ins-deep)}

/* Sebastian: center the two comparison columns; the "what you measure" metric column stays left */
.cmpx-th-conv,.cmpx-th-ins{text-align:center}
.cmpx-table td:nth-child(2),.cmpx-table td:nth-child(3){text-align:center}
/* value cells: icon + Yes/No stay tight on one line, subline centered beneath */
.cmpx-table td:nth-child(2) .cmpx-cell,.cmpx-table td:nth-child(3) .cmpx-cell{flex-direction:column;align-items:center;gap:4px}
.cmpx-line{display:inline-flex;align-items:center;gap:9px}
.cmpx-vtxt{text-align:center}
/* stacked duration lines (conv side) + enlarged single INSCYD value alongside */
.cmpx-statline{display:block;line-height:1.4}
.cmpx-strow-dur td{vertical-align:middle}
.cmpx-strow-dur td.cmpx-col-ins .cmpx-stat{font-size:20px}
/* grey descriptor line under a metric name (e.g. physiology-based zones) */
.cmpx-msub{display:block;font-size:11.5px;font-weight:500;color:var(--muted-2);line-height:1.35;margin-top:3px;letter-spacing:0}
/* inline scientific-reference markers + footnote list under the table */
.cmpx-ref{font-size:.72em;font-weight:800;color:var(--ins-deep);vertical-align:super;line-height:0;margin-left:1px;text-decoration:none;white-space:nowrap}
.cmpx-ref:hover{text-decoration:underline}
.cmpx-refs{margin-top:16px;font-size:11.5px;line-height:1.55;color:var(--muted);font-style:italic}
.cmpx-refs:empty{margin-top:0}
.cmpx-refs-h{font-style:normal;text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:800;color:var(--muted-2);margin-bottom:6px}
.cmpx-refs ol{margin:0;padding-left:22px}
.cmpx-refs li{margin:2px 0}
.cmpx-refs a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.cmpx-refs a:hover{color:var(--ins-deep)}

/* summary chips */
.cmpx-summary{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.cmpx-chip{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:8px 15px}
.cmpx-chip b{color:var(--red);font-weight:800}

/* ---- animation: staggered rows on tab switch ---- */
.cmpx-table tbody tr{--d:0ms}
.cmpx-anim tbody tr{opacity:0;transform:translateY(10px);filter:blur(4px)}
.cmpx-anim.run tbody tr{opacity:1;transform:none;filter:none;
  transition:opacity .5s ease var(--d),transform .55s cubic-bezier(.22,1,.32,1) var(--d),filter .5s ease var(--d)}
.cmpx-col-ins{transition:background .5s ease}
.cmpx-flash .cmpx-col-ins{background:rgba(22,26,38,.08)}
@media(prefers-reduced-motion:reduce){.cmpx-anim tbody tr{opacity:1;transform:none;filter:none;transition:none}}

.cmpx-hint{display:none;text-align:center;font-size:12px;font-weight:600;color:var(--muted-2);margin-top:12px}
.cmpx-hint svg{width:13px;height:13px;vertical-align:-2px;margin-left:4px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){
  .cmpx-table th,.cmpx-table td{padding:13px 14px}
  .cmpx-rowlabel,.cmpx-vtxt{font-size:13px}
  .cmpx-th-conv .nm,.cmpx-table thead th.cmpx-th-ins .nm{font-size:13.5px}
  .cmpx-vsub{font-size:12px}
}
/* ===== mobile (<=600px): keep the side-by-side table but make it FIT — no left/right scroll, rows just grow taller ===== */
.cmpx-mobile{display:none}   /* the stacked-box variant is retired */
@media(max-width:600px){
  .cmpx-mobile,.cmpx-hint{display:none}
  .cmpx-tablewrap{display:block}
  .cmpx-scroll{overflow-x:visible;-webkit-mask-image:none;mask-image:none}
  .cmpx-table{min-width:0;table-layout:fixed}
  .cmpx-table col.metric{width:28%}
  .cmpx-table th,.cmpx-table td{padding:10px 7px;word-break:break-word}
  .cmpx-th-metric{font-size:9px}
  .cmpx-th-conv .nm,.cmpx-table thead th.cmpx-th-ins .nm{font-size:11.5px;line-height:1.15}
  .cmpx-th-conv .tg,.cmpx-th-ins .tg{font-size:8px;letter-spacing:.04em;margin-top:2px}
  .cmpx-rowlabel{font-size:11px;line-height:1.25;letter-spacing:-.01em}
  .cmpx-cell{flex-direction:column;gap:5px}
  .cmpx-mk{width:18px;height:18px}
  .cmpx-mk svg{width:10px;height:10px}
  .cmpx-mk.no svg{width:10.5px}
  .cmpx-vtxt{font-size:11px;line-height:1.2}
  .cmpx-vsub{font-size:9.5px;line-height:1.32;margin-top:3px}
  .cmpx-stat{font-size:11.5px}
  /* method tabs: each in its OWN chip (no grouped white pill). Not sticky — the transparent chips would
     overlap the table when pinned; the table fits width-wise so the tabs sit cleanly above it. */
  .cmpx-tabs{margin:14px 0 12px}
  .cmpx-tablist{background:transparent;border:0;padding:0;box-shadow:none;gap:6px;width:100%;flex-wrap:wrap}
  .cmpx-pill{display:none}
  .cmpx-tab{flex:0 1 auto;font-size:10.5px;padding:8px 11px;line-height:1.15;white-space:nowrap;
    background:var(--surface-2);border:1px solid var(--border-2);border-radius:12px}
  .cmpx-tab[aria-selected="true"]{color:#fff;background:linear-gradient(150deg,var(--dk1),var(--dk2));border-color:transparent;box-shadow:inset 0 -2px 0 var(--ins)}
}
/*CMPX-CSS-END*/
:root
/* ---- this page's deltas: a third value column, and no section chrome ---- */
.fd-cmpx{max-width:none;padding:0;margin:0}
.fd-cmpx .cmpx-table col.metric{width:26%}
/* Igor: align the marks, the stat values and the column headers left, like the row
   labels. The homepage centres its two columns; with three it reads as drift. */
.fd-cmpx .cmpx-table th,.fd-cmpx .cmpx-table td{text-align:left}
.fd-cmpx .cmpx-table td .cmpx-cell{flex-direction:column;align-items:flex-start;gap:4px}
.fd-cmpx .cmpx-table .cmpx-vtxt{text-align:left}
.fd-cmpx .cmpx-th-conv,.fd-cmpx .cmpx-th-ins{text-align:left}
.fd-cmp{margin-top:clamp(26px,3vw,44px)}
/* copy left, environment icons right, the way the conditions block does it */
.fd-hero-2{margin-top:14px;font-weight:600;color:var(--ink)}
.fd-top{display:grid;grid-template-columns:minmax(0,1.02fr) auto;gap:clamp(24px,4vw,56px);
  align-items:center}
.fd-top .fd-head{max-width:none}
.fd-envs{margin:0;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.fd-envs .et-ic{width:92px;padding:13px 6px 11px}
@media(max-width:1080px){
  .fd-top{grid-template-columns:1fr;gap:26px}
  .fd-envs{justify-content:flex-start;flex-wrap:wrap}
}
/* the dashboard's two floating cards: elite bottom-aligns them, which rides the
   body-composition card up over the gauge row. The labs page tops them out level
   with the charts, which is the version Igor approved, so those offsets win here. */
#solution .lp4-out-l{top:30%;bottom:auto;transform:translateX(-48%)}
#solution .lp4-out-r{top:27%;bottom:auto;transform:translateX(48%)}
/* reproducibility: the copy on the left, the graph and its protocols on the right */
.fd-fp{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.fd-fp .fd-head{max-width:none}
/* the card is capped at 640px for the elite two-column layout; here it owns its column */
.fd-fp .rj-card{max-width:none;margin:0;width:100%}
/* the INSCYD profile is the answer on this chart, so it reads red and solid while the
   raw curve stays a quiet grey. The legend is sized up: at 8.5px it was unreadable. */
#reproducible .rj-proj{stroke:var(--red);stroke-width:3.4;stroke-dasharray:none;opacity:1}
#reproducible .rj-base{stroke:var(--rec);opacity:.42;stroke-width:3.6}
#reproducible .rj-legend{left:12px;top:11px;gap:6px;padding:9px 13px;border-radius:11px}
#reproducible .rj-legend span{font-size:11.5px;gap:9px}
#reproducible .rj-legend i{width:20px}
#reproducible .rj-legend .a i{border-top:3.4px solid rgba(78,109,140,.5)}
#reproducible .rj-legend .b i{border-top:3.4px solid var(--red)}
/* the selector is the protocol spec card, made clickable, in a row above the chart */
.fp-prot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 14px}
.fp-prot .fd-pc{display:grid;gap:2px;justify-items:start;text-align:left;font-family:inherit;
  cursor:pointer;padding:11px 13px;border-radius:13px;
  transition:background-color .3s,border-color .3s,box-shadow .3s,transform .15s}
.fp-prot .fd-pc:hover{border-color:rgba(27,31,59,.16)}
.fp-prot .fd-pc:active{transform:scale(.99)}
/* the active card lifts to white with a red label, no black slab */
.fp-prot .fd-pc.on{background:#fff;border-color:rgba(230,38,28,.28);
  box-shadow:0 16px 34px -24px rgba(20,28,46,.4)}
.fp-prot .fd-pc.on .fd-pc-n{color:var(--red)}
@media(max-width:1000px){
  .fd-fp{grid-template-columns:1fr;gap:28px}
}
@media(max-width:560px){.fp-prot{grid-template-columns:1fr}}
/* reproducibility: grey protocol curves, one red profile */
.fd-rep{display:grid;grid-template-columns:1.25fr auto 1fr;gap:clamp(16px,2.2vw,34px);
  align-items:stretch;margin-top:clamp(26px,3vw,44px)}
.fd-rep-b{display:flex;flex-direction:column;justify-content:center}
.fd-rep-arrow{align-self:center}
.fd-rep-a,.fd-rep-b{background:#fff;border:1px solid rgba(27,31,59,.1);border-radius:22px;
  padding:clamp(16px,1.8vw,24px);box-shadow:0 24px 50px -34px rgba(20,28,46,.4)}
.fd-rep-b{background:linear-gradient(160deg,#fff,#fdf7f7);box-shadow:0 26px 54px -30px rgba(20,28,46,.42),
  0 0 0 1px rgba(230,38,28,.14) inset}
.fd-lbl{display:block;font:800 10.5px/1 'Manrope',sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.fd-lbl-hot{color:var(--red)}
.fd-pcs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fd-pc{padding:10px 12px;border-radius:12px;background:rgba(27,31,59,.035);
  border:1px solid rgba(27,31,59,.07);display:grid;gap:2px}
.fd-pc-n{font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2)}
.fd-pc-h{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.fd-pc-s{font-size:11px;font-weight:600;color:var(--muted-2)}
.fd-chart{margin-top:14px}
.fd-chart svg{width:100%;height:auto;display:block;overflow:visible}
.fd-grid line{stroke:rgba(27,31,59,.08);stroke-width:.6}
.fd-ax{stroke:rgba(27,31,59,.18);stroke-width:.7}
.fd-cv-l{fill:none;stroke:rgba(27,31,59,.44);stroke-width:1.15;stroke-linecap:round}
.fd-cv circle{fill:#fff;stroke:rgba(27,31,59,.44);stroke-width:.9}
.fd-cv:nth-of-type(2) .fd-cv-l,.fd-cv:nth-of-type(2) circle{stroke:rgba(27,31,59,.26)}
.fd-cv:nth-of-type(3) .fd-cv-l,.fd-cv:nth-of-type(3) circle{stroke:rgba(27,31,59,.16)}
.fd-axt{font:700 5px 'Manrope',sans-serif;fill:var(--muted-2);letter-spacing:.14em;
  text-transform:uppercase}
.fd-axt-r{text-anchor:end}
.fd-cap{display:block;margin-top:13px;font-size:11.5px;font-weight:700;color:var(--muted-2)}
.fd-cap-y{color:var(--red)}
.fd-rep-arrow{display:grid;justify-items:center;gap:7px;color:var(--muted-2)}
.fd-rep-arrow svg{width:30px;height:30px;fill:none;stroke:var(--red);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fd-rep-arrow span{font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red)}
.fd-rescard{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fd-res{padding:13px 14px;border-radius:14px;background:#fff;border:1px solid rgba(230,38,28,.16);
  display:grid;gap:5px}
.fd-res-k{font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2)}
.fd-res-v{font:800 20px/1 'Manrope',sans-serif;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.fd-res-v i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted-2);
  letter-spacing:0}
.fd-foot{margin:clamp(20px,2.4vw,32px) 0 0;max-width:78ch;font-size:15px;line-height:1.62;
  color:var(--muted);font-weight:500}
@media(max-width:1000px){
  .fd-rep{grid-template-columns:1fr;gap:14px}
  .fd-rep-arrow{flex-direction:row}
  .fd-rep-arrow svg{transform:rotate(90deg)}
}
@media(max-width:760px){
  .fd-pcs{grid-template-columns:1fr}
  .fd-rescard{grid-template-columns:1fr}
}



/* ===== testing umbrella page (ts*) ===== */
.tst-sec{padding:clamp(64px,7vw,116px) 0}
.tst-alt{background:linear-gradient(180deg,rgba(27,31,59,0),rgba(27,31,59,.026) 18%,
  rgba(27,31,59,.026) 82%,rgba(27,31,59,0))}
.tst-head{max-width:820px}
.tst-head .sec-sub{max-width:70ch}
.tst-mid{max-width:780px;margin:0 auto;text-align:center}
.tst-mid .eyebrow{margin:0 auto}
.tst-mid .sec-sub{margin-left:auto;margin-right:auto}
.tst-sub2{margin-top:12px}
.tst-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
/* a centred head centres its text, but the chips are flex children and stayed left */
.tst-mid .tst-pills{justify-content:center}
.tst-cap{margin:16px 0 0;font-size:13px;font-weight:600;color:var(--muted-2);text-align:center}
.tst-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tsm-card,.tsg-card,.tst-card{position:relative;z-index:2}
/* every grid on this page guards against a min-content child inflating a track */
.tst-hgrid>*,.tsm-body>*,.tsg-grid>*,.tsv-grid>*{min-width:0}

/* ---- hero zone: two variants behind the dev pills ---- */
.tst-herozone{display:block}
.tst-herozone > section[hidden]{display:none!important}
/* the same guard for every other zone: a borrowed section sets its own padding, so
   the attribute alone is not always enough to take it out of flow */
.tst-protozone > section[hidden],.tst-condzone > section[hidden],
.tst-accszone > section[hidden],.tst-groupzone > section[hidden]{display:none!important}
/* V1: the copy column was cramped against the card, and the effort bars were a
   190px thumbnail beside the label. Give the copy the room and let each path read
   top to bottom: what it is, then the efforts it asks for. */
#protocol .p3-split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
#protocol .p3-row{grid-template-columns:minmax(0,1fr);gap:11px;padding:14px 16px 16px}
/* full width bars need the height to match, or six of them read as blocks rather
   than as the effort profile they are. The hairline gives them a floor to stand on. */
#protocol .p3-row .pr-mini{height:88px;gap:7px;padding-bottom:6px;
  border-bottom:1px solid rgba(27,31,59,.1)}
#protocol .p3-row .pr-mini i{border-radius:4px}
#protocol .p3-txt b{font-size:13.5px}
#protocol .p3-txt p{font-size:12px}
@media(max-width:960px){#protocol .p3-split{grid-template-columns:1fr}}
/* our bang is a sentence, not two words, so it is capped well below the donor's 84px */
.tst-condzone .et-bang{font-size:clamp(24px,2.9vw,44px);line-height:1.08;text-wrap:balance}
/* the stage layout runs copy straight into the clip, so open a gap before it */
.cn-v3 .et-bang + .sec-sub{margin-bottom:clamp(26px,4vw,40px)}
.tst-condzone .cn-close{margin-top:16px}
.cn-v3 .cn-close,.cn-v4 .cn-close{margin-left:auto;margin-right:auto;max-width:820px}
.cn-side{display:flex;flex-direction:column}
@media(max-width:960px){.cn-side{align-items:center}}
.tst-hero{padding:clamp(96px,10vw,132px) 0 clamp(52px,6vw,84px);overflow-x:clip}
.tst-hgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.tst-hero .hero-h1{max-width:19ch}
.tst-hero .hero-sub{max-width:56ch}

/* V1: four scenario photos rotating through a deck.
   JS only writes --o (0 = front) and toggles .out on the card leaving. */
.tsr-wrap{position:relative}
.tsr-deck{position:relative;width:min(100%,560px);margin-left:auto;aspect-ratio:4/3}
.tsr-card{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 44px 88px -44px rgba(20,28,46,.55),0 2px 6px -2px rgba(20,28,46,.18);
  transform-origin:50% 90%;
  transform:translate3d(calc(var(--o) * 34px),calc(var(--o) * -20px),0)
    scale(calc(1 - var(--o) * .055)) rotate(calc(var(--o) * 1.1deg));
  /* depth comes from scale, offset and shadow. Keeping the rear cards near opaque
     stops the outgoing photo ghosting through the incoming one mid-swap. */
  opacity:calc(1 - var(--o) * .08);
  z-index:calc(10 - var(--o));
  transition:transform .8s cubic-bezier(.22,1,.32,1),opacity .8s cubic-bezier(.22,1,.32,1)}
/* only the front card is labelled. Without this every card's tag and caption is
   legible at once for the length of the transition, which reads as text soup. */
.tsr-card .tsr-tag,.tsr-card .tsr-meta{opacity:0;transition:opacity .4s ease}
.tsr-card.is-front .tsr-tag,.tsr-card.is-front .tsr-meta{opacity:1;transition-delay:.26s}
.tsr-card.out{transform:translate3d(-92px,34px,0) scale(.9) rotate(-4deg);opacity:0;z-index:0;
  transition-duration:.62s}
.tsr-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tsr-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,16,28,.34) 0 22%,rgba(12,16,28,0) 46%,
    rgba(12,16,28,.62) 84%,rgba(12,16,28,.8))}
.tsr-tag{position:absolute;top:16px;left:16px;font:800 10.5px/1 'Manrope',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(230,38,28,.94);
  border-radius:999px;padding:8px 13px}
.tsr-meta{position:absolute;left:18px;right:18px;bottom:16px;display:grid;gap:3px;color:#fff}
.tsr-meta b{font-size:18px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.tsr-meta i{font-style:normal;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82)}
.tsr-dots{display:flex;gap:7px;justify-content:flex-end;margin-top:18px}
.tsr-dot{width:26px;height:5px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(27,31,59,.16);transition:background .35s,width .35s cubic-bezier(.22,1,.32,1)}
.tsr-dot:hover{background:rgba(27,31,59,.3)}
.tsr-dot.on{background:var(--red);width:40px}
.tsr-wrap .tst-cap{text-align:right;margin-top:12px}

/* V2: centred copy, equipment row, flow lines, the real dashboard */
.ts2{padding:clamp(92px,9.5vw,124px) 0 clamp(40px,5vw,64px);overflow-x:clip}
.ts2-copy{max-width:860px;margin:0 auto;text-align:center}
.ts2-copy .eyebrow{margin:0 auto}
.ts2-copy .hero-h1{max-width:20ch;margin-left:auto;margin-right:auto}
.ts2-copy .hero-sub{max-width:70ch;margin-left:auto;margin-right:auto}
.ts2-copy .btn-row{justify-content:center}
.ts2-devs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:1000px;margin:clamp(30px,3.6vw,48px) auto 0}
.ts2-dev{display:grid;justify-items:center;gap:9px}
.ts2-devi{width:66px;height:66px;border-radius:20px;background:#fff;
  border:1px solid var(--border);display:grid;place-items:center;
  box-shadow:0 18px 36px -24px rgba(20,28,46,.45)}
.ts2-devi img{width:46px;height:46px;object-fit:contain;display:block}
.ts2-devn{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ts2-flow{position:relative;max-width:1000px;margin:0 auto;height:120px}
.ts2-flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ts2-s{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.ts2-bed .ts2-s{stroke:rgba(27,31,59,.18)}
.ts2-pulse .ts2-s{stroke:var(--red);stroke-dasharray:16 250;stroke-dashoffset:266;
  animation:ts2Flow 2.6s cubic-bezier(.5,0,.4,1) infinite}
.ts2-pulse .s1{animation-delay:.26s}
.ts2-pulse .s2{animation-delay:.52s}
.ts2-pulse .s3{animation-delay:.78s}
.ts2-pulse .s4{animation-delay:1.04s}
@keyframes ts2Flow{from{stroke-dashoffset:266}to{stroke-dashoffset:0}}
.ts2-node{position:absolute;left:50%;top:94px;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(230,38,28,.14)}
.ts2-dash{margin-top:-4px}
/* the donor scoped these to #solution, which this page does not carry */
#tstDash .lp4-stage{max-width:1220px}
#tstDash .lp4-metrics{grid-template-columns:repeat(8,1fr);gap:8px}
#tstDash .lp4-metrics .lp4-m{padding:9px 5px 8px}
#tstDash .lp4-metrics .gf-cap{font-size:9.5px;letter-spacing:-.01em}
#tstDash .lp4-gbody .gx{max-height:clamp(220px,24vw,286px)}
#tstDash .lp4-frame{max-height:none}
#tstDash .lp4-fade{display:none}
#tstDash .lp4-zcard{max-height:252px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.42) 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.42) 90%,transparent 100%)}
#tstDash .lp4-out-l{top:30%;bottom:auto;transform:translateX(-48%)}
#tstDash .lp4-out-r{top:27%;bottom:auto;transform:translateX(48%)}
/* desktop is the brief. Below the two-column breakpoint the variants only need to
   stay inside the viewport; polish comes in a later pass. */
@media(max-width:1080px){
  #tstDash .lp4-out-l,#tstDash .lp4-out-r{display:none}
  #tstDash .lp4-metrics{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1000px){
  .tst-hgrid{grid-template-columns:1fr;gap:38px}
  .tsr-deck{margin:0 auto}
  .tsr-dots{justify-content:center}
  .tsr-wrap .tst-cap{text-align:center}
  .ts2-flow{height:76px}
}
@media(max-width:900px){.ts2-devs{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media(max-width:640px){
  .ts2-devs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .ts2-flow{display:none}
}

/* V3: four scenarios as one composition. Geometry and shade ramp replicated from
   the remote page's approved quadrant component; only the namespace differs. */
/* the brief is one composition in one fold, so the copy block is tightened and the
   grid sized off the viewport rather than a fixed height */
.ts3{padding:clamp(52px,5.2vw,68px) 0 clamp(18px,2.2vw,26px);overflow-x:clip}
.ts3-head{max-width:1020px;margin:0 auto;text-align:center}
.ts3-head .eyebrow{margin-left:auto;margin-right:auto}
.ts3-head .hero-h1{margin-left:auto;margin-right:auto}
.ts3-head .hero-sub{margin-left:auto;margin-right:auto}
.ts3-head .btn-row{justify-content:center}
.ts3-head .hero-h1{font-size:clamp(30px,3.05vw,43px);max-width:26ch}
.ts3-head .hero-sub{max-width:none;font-size:16px;line-height:1.6}
.ts3-head .btn-row{margin-top:18px}
.ts3-quad{position:relative;margin-top:clamp(16px,1.8vw,22px);display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;
  background:rgba(27,31,59,.1);border-radius:26px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(20,28,46,.55);height:min(62vh,566px);min-height:470px}
.ts3-q{position:relative;overflow:hidden}
.ts3-q img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--expo)}
@media(hover:hover){.ts3-q:hover img{transform:scale(1.045)}}
/* the donor ramp cleared its own darker photographs. Two of these four have bright
   lower halves (a lit living room, a lab window), so the ramp is deepened to keep
   the overlaid copy above AA. */
/* Measured, not guessed: against the brightest pixel these photographs put behind the
   body line (a lab window at 235), white 14px copy needs about 0.51 alpha to clear
   4.5:1, so the ramp holds above 0.6 through the whole text band and only then falls
   away. The donor ramp cleared its own darker images but not these. */
.ts3-qs{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,14,26,.94) 0%,rgba(10,14,26,.9) 22%,
    rgba(10,14,26,.72) 40%,rgba(10,14,26,.34) 58%,rgba(10,14,26,0) 80%)}
.ts3-qb{position:absolute;left:28px;right:28px;bottom:24px;color:#fff;
  text-shadow:0 1px 14px rgba(10,14,26,.5)}
.ts3-qb h3{margin:0 0 7px;color:#fff;font-size:clamp(21px,1.75vw,27px);font-weight:800;
  letter-spacing:-.02em;text-wrap:balance}
.ts3-qb p{margin:0 0 12px;color:rgba(255,255,255,.85);font-size:14px;line-height:1.5;
  max-width:40ch}
.ts3-dev{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 11px}
@media(max-width:900px){
  .ts3-quad{grid-template-columns:1fr;grid-template-rows:repeat(4,240px);height:auto;
    min-height:0}
}

/* V4: the remote page's card row (rm-pc), replicated. Portrait cards on one rail,
   each carrying a numbered equipment key over the photograph. */
.ts4{padding:clamp(52px,5.2vw,68px) 0 clamp(20px,2.4vw,30px);overflow-x:clip}
.ts4-head{max-width:900px;margin:0 auto;text-align:center}
.ts4-head .eyebrow{margin-left:auto;margin-right:auto}
.ts4-head .hero-h1{font-size:clamp(30px,3.05vw,43px);max-width:22ch;
  margin-left:auto;margin-right:auto}
.ts4-head .hero-sub{max-width:74ch;margin-left:auto;margin-right:auto;font-size:16px}
.ts4-head .btn-row{justify-content:center;margin-top:18px}
.ts4-wrap{margin-top:clamp(22px,2.6vw,34px)}
.ts4-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  max-width:1468px;margin:0 auto;padding:6px max(16px,1.4vw) 10px}
.ts4-pc{position:relative;aspect-ratio:3/4.1;border-radius:26px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(20,28,46,.5);
  transition:transform .5s var(--expo),box-shadow .5s var(--expo)}
@media(hover:hover){
  .ts4-pc:hover{transform:translateY(-6px);box-shadow:0 42px 88px -34px rgba(20,28,46,.58)}
  .ts4-pc:hover img{transform:scale(1.04)}
}
.ts4-pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--expo)}
/* deeper than the donor ramp: two of these photographs have bright lower halves */
.ts4-pcs{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,12,22,.92) 4%,rgba(8,12,22,.66) 30%,
    rgba(8,12,22,.24) 52%,rgba(8,12,22,.04))}
.ts4-pcb{position:absolute;left:26px;right:26px;bottom:26px;color:#fff;
  text-shadow:0 1px 14px rgba(8,12,22,.5)}
.ts4-pck{display:block;font:800 11px/1 'Manrope',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:10px}
.ts4-pcb h3{color:#fff;font-size:clamp(20px,1.6vw,24px);line-height:1.2;margin:0 0 8px;
  font-weight:800;letter-spacing:-.015em}
.ts4-pcb p{color:rgba(255,255,255,.85);font-size:14px;line-height:1.5;margin:0}
@media(max-width:900px){.ts4-rail{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ts4-rail{grid-template-columns:1fr}}

/* ---- modes: inputs change, outputs do not ---- */
.tsm-card{margin-top:clamp(28px,3.4vw,46px);background:#fff;border:1px solid var(--border);
  border-radius:28px;padding:clamp(10px,1.2vw,14px);
  box-shadow:0 46px 92px -56px rgba(20,28,46,.46)}
/* the tabs previously read as plain labels. A radio dot, a real border, a hover lift
   and a press make it obvious that one of four is being chosen. */
.tsm-pick{display:block;text-align:center;margin-bottom:11px;
  font:800 10px/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2)}
.tsm-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  background:var(--surface-2);border-radius:18px;padding:8px}
.tsm-tab{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;
  text-align:left;font-family:inherit;cursor:pointer;background:#fff;
  border:1px solid var(--border);border-radius:14px;padding:11px 13px;min-height:52px;
  box-shadow:0 6px 14px -12px rgba(20,28,46,.4);
  transition:border-color .3s,box-shadow .3s,transform .18s cubic-bezier(.22,1,.32,1)}
.tsm-tt{display:grid;gap:2px;min-width:0}
.tsm-tab b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.tsm-tab i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted-2)}
.tsm-dot{width:17px;height:17px;border-radius:50%;flex:0 0 17px;
  border:2px solid rgba(27,31,59,.22);background:#fff;
  transition:border-color .3s,box-shadow .3s}
@media(hover:hover){
  .tsm-tab:hover{transform:translateY(-2px);border-color:rgba(27,31,59,.2);
    box-shadow:0 14px 28px -16px rgba(20,28,46,.45)}
  .tsm-tab:hover .tsm-dot{border-color:rgba(230,38,28,.5)}
}
.tsm-tab:active{transform:scale(.98)}
.tsm-tab:focus-visible{outline:2px solid var(--rec);outline-offset:2px}
.tsm-tab.on{border-color:rgba(230,38,28,.5);
  box-shadow:0 18px 34px -20px rgba(230,38,28,.35)}
.tsm-tab.on b{color:var(--red)}
.tsm-tab.on .tsm-dot{border-color:var(--red);
  box-shadow:inset 0 0 0 3.5px #fff,inset 0 0 0 9px var(--red)}
.tsm-body{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(14px,1.8vw,26px);padding:clamp(14px,1.8vw,22px) clamp(6px,1vw,12px) clamp(6px,1vw,10px)}
.tsm-ilab,.tsm-olab{display:block;font:800 10px/1 'Manrope',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.tsm-olab i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.1em;
  color:var(--red);margin-top:5px}
.tsm-in{position:relative;padding:0 clamp(6px,1vw,14px)}
.tsm-panel{display:none}
.tsm-panel.on{display:block;animation:tsmIn .5s cubic-bezier(.22,1,.32,1) both}
@keyframes tsmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tsm-devs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tsm-dev{width:52px;height:52px;border-radius:15px;background:var(--surface-2);
  border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.tsm-dev img{width:40px;height:40px;object-fit:contain;display:block}
.tsm-facts{margin:0;display:grid;gap:13px}
.tsm-facts>div{display:grid;gap:3px}
.tsm-facts dt{font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2)}
.tsm-facts dd{margin:0;font-size:14px;line-height:1.55;color:var(--muted);font-weight:500;
  max-width:52ch}
.tsm-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13.5px;
  font-weight:800;color:var(--red);letter-spacing:-.01em;min-height:40px}
.tsm-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.22,1,.32,1)}
.tsm-link:hover svg{transform:translateX(3px)}
/* second column: the option's own photograph, cross-fading with the tabs */
.tsm-figs{position:relative;aspect-ratio:4/3}
.tsm-fig{position:absolute;inset:0;opacity:0;transform:scale(.98);pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,1,.32,1),transform .6s cubic-bezier(.22,1,.32,1)}
.tsm-fig.on{opacity:1;transform:none;pointer-events:auto}
.tsm-fig .tsn-shot{height:100%}
@media(max-width:1000px){
  .tsm-body{grid-template-columns:1fr;gap:26px}
  .tsm-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){.tsm-tabs{grid-template-columns:1fr}}

/* ---- modes v2: a scrollable row per option ---- */
.tsn-rows{display:grid;gap:clamp(64px,7.5vw,124px);margin-top:clamp(40px,4.6vw,66px)}
.tsn-row{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(34px,5vw,86px);align-items:center}
/* Alternate the sides so four rows do not read as a list. The track widths have to
   swap with the order, otherwise the figure lands in the narrow column on even rows
   and every second photograph comes out smaller. */
.tsn-row:nth-child(even){grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.tsn-row:nth-child(even) .tsn-fig{order:2}
.tsn-fig{position:relative}
.tsn-shot{position:relative;display:block;border-radius:26px;overflow:hidden;
  aspect-ratio:4/3;box-shadow:0 44px 92px -42px rgba(20,28,46,.55)}
.tsn-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tsn-shade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,12,22,.5),rgba(8,12,22,.06) 52%)}
.tsn-num{position:absolute;left:18px;top:16px;font:800 11px/1 'Manrope',sans-serif;
  letter-spacing:.14em;color:#fff;background:rgba(230,38,28,.94);border-radius:999px;
  padding:8px 12px}
/* the floating metrics read as pulled out of the profile, so they sit off the edges */
/* the floating readout is the page's own gauge component, carried unchanged; the card
   is only the surface it floats on */
.tsn-met{position:absolute;z-index:2;background:#fff;border:1px solid var(--border);
  border-radius:19px;padding:13px 14px 14px;box-shadow:0 26px 52px -22px rgba(20,28,46,.5)}
.tsn-met .gf-gauge{width:112px}
.tsn-met .gf-gauge .gx{width:84px}
.tsn-m1{left:-26px;bottom:30px}
.tsn-m2{right:-24px;top:26px}
/* marked photographs drop their second gauge to the bottom corner so it cannot sit
   over a face. Applies wherever that figure is used. */
.tsn-lowmet .tsn-m2{top:auto;bottom:30px}
.tsn-copy{min-width:0}
.tsn-h{margin:0 0 12px;font-size:clamp(22px,2.05vw,29px);font-weight:800;color:var(--ink);
  letter-spacing:-.025em;line-height:1.2;text-wrap:balance;max-width:22ch}
.tsn-p{margin:0;font-size:15.5px;line-height:1.62;color:var(--muted);max-width:56ch}
.tsn-need{margin-top:22px}
.tsn-needl{display:block;font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:11px}
.tsn-devs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tsn-grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
/* alternatives read "or", genuine combinations read "+" */
.tsn-or,.tsn-plus{font:800 10.5px/1 'Manrope',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}
.tsn-plus{color:var(--red);font-size:14px;padding:0 2px}
.tsn-dev{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--border);border-radius:999px;padding:6px 15px 6px 6px;
  font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.tsn-devi{width:34px;height:34px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;overflow:hidden;flex:0 0 34px}
.tsn-devi img{width:26px;height:26px;object-fit:contain;display:block}
/* a button, not a text link */
.tsn-btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:8px 8px 8px 20px;border-radius:999px;background:#fff;border:1px solid var(--border-2);
  font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;min-height:44px;
  box-shadow:0 14px 30px -20px rgba(20,28,46,.4);
  transition:border-color .25s,box-shadow .25s,transform .15s}
.tsn-btn:hover{border-color:rgba(230,38,28,.34);box-shadow:0 20px 40px -20px rgba(20,28,46,.5)}
.tsn-btn:active{transform:scale(.985)}
.tsn-btni{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--red);
  display:grid;place-items:center}
.tsn-btni svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.22,1,.32,1)}
.tsn-btn:hover .tsn-btni svg{transform:translateX(2px)}
@media(max-width:1000px){
  .tsn-row{grid-template-columns:1fr;gap:26px}
  .tsn-row:nth-child(even) .tsn-fig{order:0}
  .tsn-m1{left:10px;bottom:12px}
  .tsn-m2{right:10px;top:12px}
}

/* ---- modes v3: scrollytelling, vendored from the coaching page's story block ---- */
.tss{padding:0}
.tss .tst-head{padding-top:clamp(56px,6vw,88px)}
.tss-track{position:relative;height:460vh}
.tss-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.tss-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(34px,4.8vw,78px);align-items:center;width:100%}
.tss-figs{position:relative;aspect-ratio:4/3}
.tss-fig{position:absolute;inset:0;opacity:0;transform:scale(.975);
  transition:opacity .6s var(--expo),transform .7s var(--expo);pointer-events:none}
.tss-fig.on{opacity:1;transform:none;pointer-events:auto}
.tss-fig .tsn-shot{height:100%}
.tss-steps{position:relative;min-height:430px}
.tss-step{position:absolute;inset:0;opacity:0;transform:translateY(26px);
  transition:opacity .55s var(--expo),transform .6s var(--expo);pointer-events:none}
.tss-step.on{opacity:1;transform:none;pointer-events:auto}
.tss-k{display:block;margin-bottom:12px;font:800 12px/1 'Manrope',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
/* below the two-column breakpoint the stage stops sticking and everything stacks,
   exactly as the donor does */
@media(max-width:1000px){
  .tss-track{height:auto}
  .tss-stage{position:relative;height:auto;display:block;padding:34px 0}
  .tss-grid{grid-template-columns:1fr;gap:26px}
  .tss-figs{margin-bottom:26px}
  .tss-fig{position:relative;opacity:1;transform:none;pointer-events:auto}
  .tss-fig + .tss-fig{margin-top:26px}
  .tss-steps{min-height:0}
  .tss-step{position:relative;opacity:1;transform:none;pointer-events:auto;
    margin-bottom:52px}
}

/* ---- protocols: the ported switcher plus the one exception ---- */
.tsp .pv4{margin-top:clamp(26px,3vw,42px)}

/* ---- group V1: the session photograph, a profile card above each athlete ---- */
/* the head runs copy left, chips right, so the section opens the same way the page does
   everywhere else instead of centring and then dropping a row of chips underneath */
/* the chips need about 380px for two columns, the copy wants everything else, and they
   sit at the top of the column rather than floating in the middle of a tall headline */
.tsq-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:start;max-width:none}
/* a two column chip block plus a statement headline is tight at 1136px, so the headline
   in this head runs a step smaller than the page default and breaks evenly */
.tsq-head .sec-title{font-size:clamp(29px,3.4vw,48px);text-wrap:balance}
.tsq-head .sec-sub{max-width:58ch;margin-top:16px}
/* two by two. The lines are long enough to wrap, so the chip stops being a lozenge
   and becomes a soft rectangle, and the icon holds the top line rather than centring
   against two */
.tsq-hchips{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start;
  margin-top:clamp(6px,1vw,14px)}
/* the grid stretches both chips in a row to the taller one, so the content centres
   inside the box: a one line label does not hang at the top of a two line neighbour,
   and the icon sits against the middle of a wrapped label rather than its first line */
.tsq-hchips .l9-pill{padding:11px 15px;border-radius:14px;align-items:center;
  line-height:1.35;text-align:left}
.tsq-hchips .l9-pill svg{flex:0 0 14px}
@media(max-width:900px){
  .tsq-head{grid-template-columns:1fr;gap:22px}
  .tsq-hchips{gap:8px}
}
@media(max-width:520px){.tsq-hchips{grid-template-columns:1fr}}

/* how it works: Igor centred the whole section, so the step number sits above its text
   instead of beside it, and the connector runs centre to centre */
@media(min-width:821px){
  .tsh .nv-tlh{margin-left:auto;margin-right:auto}
  .tsh .nv-tlh-m{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .tsh .nv-tlh-m h3,.tsh .nv-tlh-m p,.tsh .nv-tlh-m .nv-step-t{grid-column:1}
  .tsh .nv-tlh-m p{max-width:34ch;margin-left:auto;margin-right:auto}
  .tsh .nv-tlh-m h3{margin-top:16px}
  .tsh .nv-tlh-m:not(:last-child):before{left:calc(50% + 26px);
    right:calc(-1 * var(--g) - 50% + 26px);top:16px;bottom:auto;width:auto;height:2px}
}
.tsq-fig{position:relative;margin:clamp(26px,3.4vw,44px) 0 0}
.tsq-shot{display:block;position:relative;border-radius:26px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 44px 90px -44px rgba(20,28,46,.55);background:#0d1122}
.tsq-shot img{width:100%;height:auto;display:block}
/* the photograph is bright at the top, so the cards get a whisper of shade to sit on */
.tsq-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,12,26,.16) 0%,rgba(9,12,26,.04) 34%,rgba(9,12,26,0) 58%)}
.tsq-cards{position:absolute;inset:0;pointer-events:none}
.tsq-card{position:absolute;left:var(--x);top:var(--y);width:min(21%,224px);
  display:grid;gap:8px;padding:12px 14px 11px;border-radius:17px;
  background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 24px 46px -22px rgba(20,28,46,.55),0 2px 5px -2px rgba(20,28,46,.2);
  opacity:0;transform:translateY(12px) scale(.96);transform-origin:50% 100%;
  transition:opacity .5s var(--expo),transform .5s var(--expo)}
.tsq-card.on{opacity:1;transform:none}
.tsq-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.tsq-top b{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the live dot: this athlete is the one being analyzed right now */
.tsq-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 7px;
  opacity:.28;transition:opacity .4s ease}
.tsq-card.on .tsq-dot{opacity:1}
.tsq-rows{display:grid;gap:5px}
/* each metric row lands after the one above it, so the profile reads as it builds */
.tsq-row{display:flex;align-items:baseline;gap:5px;white-space:nowrap;
  opacity:0;transform:translateY(5px);
  transition:opacity .42s var(--expo) calc(var(--d) * .13s + .18s),
             transform .42s var(--expo) calc(var(--d) * .13s + .18s)}
.tsq-card.on .tsq-row{opacity:1;transform:none}
.tsq-row i{font-style:normal;font:800 10px/1.2 'Manrope',sans-serif;color:var(--muted-2);
  flex:1 1 auto;min-width:0}
.tsq-row b{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.tsq-row em{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted-2)}
.tsq-ok{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#1f9d63;
  opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--expo) .62s,transform .4s var(--expo) .62s}
.tsq-card.on .tsq-ok{opacity:1;transform:none}
.tsq-ok svg{width:12px;height:12px;fill:none;stroke:#1f9d63;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
/* the cards are decoration over a photograph on a phone, so they stop floating and
   become a legible list under it instead of shrinking to nothing */
@media(max-width:820px){
  .tsq-cards{position:static;display:grid;gap:8px;margin-top:10px}
  .tsq-card{position:static;width:auto;background:#fff;
    box-shadow:0 18px 34px -26px rgba(20,28,46,.4)}
  .tsq-rows{grid-template-columns:repeat(3,1fr);gap:10px}
  .tsq-row{flex-direction:column;align-items:flex-start;gap:1px}
  .tsq-shade{display:none}
}

/* ---- group: the squad roster fills in ---- */
.tsg-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.tsg-card{background:#fff;border:1px solid var(--border);border-radius:24px;
  padding:clamp(12px,1.4vw,18px);box-shadow:0 44px 88px -54px rgba(20,28,46,.46)}
.tsg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:4px 6px 14px}
.tsg-ttl{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.tsg-cnt{font-size:11.5px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.tsg-head,.tsg-row{display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1.3fr) auto auto;
  gap:10px;align-items:center}
.tsg-head{padding:0 6px 8px;border-bottom:1px solid var(--border)}
.tsg-head span{font:800 9px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2)}
.tsg-rows{display:grid}
.tsg-row{padding:11px 6px;border-bottom:1px solid var(--border);opacity:.34;
  transition:opacity .5s cubic-bezier(.22,1,.32,1)}
.tsg-row:last-child{border-bottom:0}
.tsg-row.on{opacity:1}
.tsg-n{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.tsg-sp{font-size:11.5px;font-weight:600;color:var(--muted-2)}
.tsg-bar{height:7px;border-radius:99px;background:rgba(27,31,59,.08);overflow:hidden;display:block}
.tsg-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.22,1,.32,1)}
.tsg-row.on .tsg-bar i{transform:scaleX(1)}
.tsg-v{font:800 14px/1 'Manrope',sans-serif;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tsg-v em{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted-2);
  letter-spacing:0;margin-left:4px}
.tsg-st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  color:#2f8f6b;white-space:nowrap;opacity:0;transform:translateX(-4px);
  transition:opacity .45s ease .18s,transform .45s cubic-bezier(.22,1,.32,1) .18s}
.tsg-row.on .tsg-st{opacity:1;transform:none}
.tsg-st svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.tsg-grid{grid-template-columns:1fr;gap:36px}}
@media(max-width:720px){
  .tsg-head{display:none}
  .tsg-row{grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:min-content;gap:6px 10px}
  .tsg-sp{grid-column:1;font-size:11px}
  .tsg-v{grid-column:2;grid-row:1;text-align:right}
  .tsg-bar{grid-column:1 / -1}
  .tsg-st{grid-column:1 / -1}
}

/* ---- validation ---- */
.tsv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,3.4vw,46px)}
.tsv-card{background:#fff;border:1px solid var(--border);border-radius:22px;
  padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;
  box-shadow:0 34px 70px -50px rgba(20,28,46,.44)}
.tsv-tag{font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2)}
.tsv-h{margin:9px 0 16px;font-size:16.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.25}
.tsv-nums{display:grid;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.tsv-n{display:grid;gap:4px}
.tsv-nk{font:800 9.5px/1.3 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2)}
.tsv-pair{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tsv-pair b{font:800 22px/1 'Manrope',sans-serif;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.tsv-pair b.lab{color:var(--muted-2)}
.tsv-pair b.ins{color:var(--red)}
.tsv-vs{font-size:10.5px;font-weight:700;color:var(--muted-2)}
.tsv-solo{font:800 26px/1 'Manrope',sans-serif;color:var(--red);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.tsv-nu{font-size:10.5px;font-weight:700;color:var(--muted-2)}
.tsv-p{margin:16px 0 0;font-size:13.5px;line-height:1.62;color:var(--muted);font-weight:500;
  flex:1}
.tsv-src{display:block;margin-top:14px;font-size:11px;font-weight:700;color:var(--muted-2);
  line-height:1.45}
.tsv-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:18px 0 0}
.tsv-legend span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  color:var(--muted-2)}
.tsv-legend i{width:11px;height:11px;border-radius:50%;display:block}
.tsv-legend i.lab{background:rgba(27,31,59,.3)}
.tsv-legend i.ins{background:var(--red)}
@media(max-width:960px){.tsv-grid{grid-template-columns:1fr}}

/* ---- how it works: nv-tlh, vendored ---- */
.nv-step-t{margin-top:9px;display:inline-flex;align-items:center;gap:6px;
  font:800 10px/1 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--rec)}
.nv-tlh{--g:clamp(20px,3vw,52px);margin-top:clamp(30px,3.6vw,50px);max-width:980px}
.nv-tlh-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.nv-tlh-m{position:relative;min-width:0}
.nv-tlh-m:not(:last-child):before{content:"";position:absolute;left:40px;
  right:calc(-1 * var(--g) - 2px);top:16px;height:2px;background:rgba(27,31,59,.14)}
.nv-tlh-m:nth-last-child(2):before{background:linear-gradient(90deg,rgba(27,31,59,.14),var(--red))}
.nv-tlh-n{position:relative;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;background:#fff;border:2px solid rgba(27,31,59,.14);
  font:800 14px/1 'Manrope',sans-serif;color:var(--ink)}
.nv-tlh-m.hot .nv-tlh-n{border-color:var(--red);background:var(--red);color:#fff;
  box-shadow:0 0 0 5px rgba(230,38,28,.12)}
.nv-tlh-m h3{margin:20px 0 6px;font-size:16px;font-weight:800;color:var(--ink);
  letter-spacing:-.015em}
.nv-tlh-m p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:38ch}
.nv-tlh-m .nv-step-t{margin-top:12px}
@media(max-width:820px){
.nv-tlh-marks{grid-template-columns:1fr}
.nv-tlh-m{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px}
.nv-tlh-n{grid-row:1;grid-column:1}
.nv-tlh-m h3,.nv-tlh-m p,.nv-tlh-m .nv-step-t{grid-column:2}
.nv-tlh-m h3{margin:3px 0 6px}
.nv-tlh-m:not(:last-child):before{left:16px;top:40px;right:auto;bottom:calc(-1 * var(--g));
  width:2px;height:auto}
.nv-tlh-m:nth-last-child(2):before{background:linear-gradient(180deg,rgba(27,31,59,.14),var(--red))}
}

/* ---- faq ---- */
.tsf-wrap{max-width:820px;margin:clamp(30px,4vw,44px) auto 0}
.tsf-item{background:#fff;border:1px solid var(--border);border-radius:18px;margin-bottom:14px;
  overflow:hidden;transition:box-shadow .25s,border-color .25s}
.tsf-item.open{box-shadow:0 18px 44px -26px rgba(20,28,46,.4);border-color:var(--border-2)}
.tsf-h{margin:0}
.tsf-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;
  font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em;min-height:44px}
.tsf-q:focus-visible{outline:2px solid var(--rec);outline-offset:-2px;border-radius:18px}
.tsf-plus{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--rec);
  transition:transform .3s var(--ease),background .25s,color .25s}
.tsf-plus svg{width:13px;height:13px}
.tsf-item.open .tsf-plus{transform:rotate(135deg);background:var(--rec);color:#fff}
.tsf-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--expo)}
.tsf-item.open .tsf-a{grid-template-rows:1fr}
.tsf-ain{overflow:hidden;min-height:0}
.tsf-ain p{margin:0;padding:0 22px 21px;color:var(--muted);font-size:15px;line-height:1.62;
  max-width:66ch}

@media(prefers-reduced-motion:reduce){
  .tst-in,.tsm-panel.on,.tsg-row,.tsg-bar i,.tsg-st,.tsf-a,.tsf-plus{transition:none;animation:none}
  .tst-spulse .tst-s{animation:none;opacity:0}
  .tsg-row{opacity:1}
  .tsg-row .tsg-bar i{transform:scaleX(1)}
  .tsg-row .tsg-st{opacity:1;transform:none}
}



/* ===== metric page family (mx-) ===== */
.mx-sec{position:relative}
.mx-vcard,.mx-pcard,.mx-rcard,.mx-gcard,.mx-chartcard,.mx-zncard,.mx-piecard,
.mx-dblock,.mx-bc{position:relative;z-index:2}

/* ---- hero ---- */
/* The skeleton drops the hero's top padding from 170px to a flat 140px below
   1000px, so on a phone 140px of empty space sat between the nav and the eyebrow.
   Mobile hero spacing wants roughly 48 to 64px under a fixed nav, so the value
   ramps with the viewport instead of stepping once: 56px on a phone, back to the
   inherited 140px by the time the tablet breakpoint ends. */
@media(max-width:1000px){
  .mx-hero{padding-top:clamp(56px,14vw,140px)}
}
.mx-hviz{min-width:0}
.mx-hwrap{display:grid;gap:clamp(34px,4vw,56px);align-items:center}
.mx-hwrap>*{min-width:0}
.mx-hcopy{max-width:60ch}
.mx-hsubs{display:grid;gap:14px;margin-bottom:32px}
.mx-hcopy .hero-sub{max-width:none;margin:0;text-wrap:pretty}
@media(min-width:1040px){
  .mx-hwrap{grid-template-columns:minmax(0,1fr) minmax(0,.96fr)}
}
/* vo2max: two intro paragraphs, so the copy column runs wider and the hero
   shorter (Igor 2026-09-01) */
.mx-hv2 .mx-hcopy{max-width:66ch}
@media(min-width:1040px){
  .mx-hv2 .mx-hwrap{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
}
/* stacked hero: copy above, panel below, one column */
.mx-hstack{display:grid;gap:clamp(26px,3vw,40px)}
.mx-hstack .mx-hcopy{max-width:62ch}
.mx-hstackviz{min-width:0}

/* the drawn gauge, the app's own presentation: name, dial and values centred */
.mx-gcard{background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:clamp(16px,1.8vw,24px);box-shadow:0 34px 78px -46px rgba(20,28,46,.45);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.mx-gn{font-size:15px;font-weight:800;letter-spacing:-.012em;color:var(--ink);
  line-height:1.25}
.mx-gx{width:100%;max-width:230px;height:auto;display:block;margin:12px auto 14px}
.mx-gvs{display:grid;gap:3px;justify-items:center}
.mx-gv{font-size:12px;color:var(--muted);font-weight:600;line-height:1.6}
.mx-gv b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.mx-hgauge{display:grid;justify-content:center}
.mx-hgauge .mx-gcard{width:min(100%,420px)}
.mx-gbig .mx-gn{font-size:18px}
.mx-gbig .mx-gx{max-width:300px;margin:18px auto 18px}
.mx-gbig .mx-gvs{gap:5px}
.mx-gbig .mx-gv{font-size:13.5px}

/* the gauge floats on its own chart, per Igor */
.mx-hoverlay{position:relative}
.mx-hoverlay .mx-chartcard{padding-bottom:clamp(14px,1.6vw,20px)}
/* the readout starts to the right of the floating gauge instead of under it */
@media(min-width:680px){.mx-hoverlay .mx-lfoot{padding-left:206px}}
.mx-gfloat{position:absolute;left:-20px;bottom:-24px;width:212px;z-index:3;
  animation:mxFloat 8s ease-in-out infinite}
.mx-gfloat .mx-gcard{padding:14px 16px 12px;border-radius:16px;
  box-shadow:0 24px 54px -22px rgba(20,28,46,.5)}
.mx-gfloat .mx-gn{font-size:13px}
.mx-gfloat .mx-gx{max-width:150px;margin:8px auto 9px}
.mx-gfloat .mx-gv{font-size:11px;line-height:1.5}
@keyframes mxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.mx-gfloat{animation:none}}
/* On a phone the overlay is the SAME card as on desktop, only smaller: name, dial,
   values, centred. Nothing about the metric's presentation changes with the
   viewport. The card gets a little room at its foot so the gauge sits lower. */
@media(max-width:679px){
  .mx-hoverlay .mx-chartcard{padding-bottom:40px}
  /* wide enough that the value rows read on one line, and hung low enough that it
     clips the graph's corner rather than sitting across the curves */
  .mx-gfloat{left:-6px;bottom:-46px;width:min(60%,176px);animation:none}
  .mx-gfloat .mx-gcard{padding:11px 12px 10px;border-radius:14px}
  .mx-gfloat .mx-gn{font-size:11.5px}
  .mx-gfloat .mx-gx{max-width:104px;margin:7px auto 8px}
  .mx-gfloat .mx-gv{font-size:9.5px;line-height:1.45}
}

/* The recreated chart card. Its SVG text scales with the card while HTML text
   does not, so all the chrome is sized in container units: the title, the legend,
   the toolbar and the readout keep one proportion against the axis numbers at
   every card width. */
.mx-chartcard{background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:clamp(14px,1.6vw,20px);box-shadow:0 34px 78px -46px rgba(20,28,46,.45);
  container-type:inline-size}
.mx-chartcard .mp-chart{width:100%;height:auto;display:block}
.mx-lhead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px 18px;flex-wrap:wrap;margin-bottom:10px}
.mx-lhtx{display:grid;gap:6px;min-width:0;flex:1 1 0}
.mx-ltitle{font-size:clamp(12.5px,2.5cqi,16px);font-weight:800;letter-spacing:-.012em;
  color:var(--ink)}
.mx-lleg{display:flex;flex-wrap:wrap;gap:4px 10px}
.mx-lkey{display:inline-flex;align-items:center;gap:5px;
  font-size:clamp(9.5px,1.85cqi,12px);font-weight:700;color:var(--muted)}
.mx-lkey svg{width:clamp(15px,3.2cqi,20px);height:10px}
/* the workbench foot: readout, discovery hint and the zoom reset */
.mx-lfoot{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.mx-lread{flex:1;min-height:1.9em;font-size:clamp(10px,1.9cqi,12.5px);font-weight:600;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  font-variant-numeric:tabular-nums}
.mx-lread b{color:var(--ink);font-weight:800}
.mx-lread em{font-style:normal;font-weight:800}
.mx-lread i{font-style:normal;color:var(--muted-2)}
.mx-lhint{color:var(--muted-2);font-weight:600}
/* the graph controls, the metabolic profile page's toolbar verbatim */
.mx-ltools{display:inline-flex;align-items:center;gap:2px;padding:2px;
  border-radius:9px;background:var(--surface-2);border:1px solid var(--border);
  margin-left:auto;flex:none}
.mx-ltool,.mx-lreset{appearance:none;font:inherit;font-size:clamp(9.5px,1.7cqi,11.5px);
  font-weight:700;cursor:pointer;color:var(--muted);background:transparent;border:0;
  border-radius:7px;padding:0 clamp(7px,1.5cqi,10px);
  min-height:clamp(24px,4.4cqi,30px);display:inline-flex;align-items:center;
  gap:clamp(4px,.9cqi,6px);white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .12s ease}
.mx-ltool.on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,31,59,.1),0 3px 8px rgba(27,31,59,.06)}
.mx-ltool svg,.mx-lreset svg{width:clamp(11px,2.1cqi,14px);
  height:clamp(11px,2.1cqi,14px);flex:none;fill:none;
  stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mx-ltool:hover:not(:disabled),.mx-lreset:hover:not(:disabled){color:var(--ink);
  background:rgba(27,31,59,.05)}
.mx-ltool:active:not(:disabled),.mx-lreset:active:not(:disabled){transform:scale(.96)}
.mx-ltool:disabled,.mx-lreset:disabled{opacity:.38;cursor:default}
.mx-lreset{margin-left:2px;border-left:1px solid var(--border);border-radius:0 7px 7px 0}
/* no hover, no workbench: phones get the plain chart */
.mx-static .mx-ltools,.mx-static .mx-lfoot{display:none}
.mx-static .mp-chart{cursor:default}
@media(max-width:767px){.mx-ltools,.mx-lfoot{display:none}}
.mx-chartlive{-webkit-user-select:none;user-select:none}
.mx-chartlive .mp-chart{cursor:crosshair;touch-action:pan-y}
.mx-chartlive .mp-chart.mxc-grab{cursor:grab}

/* the physiology continuation: full text, spread across open columns rather
   than stacked into one tall block. Nothing hidden, nothing to click. */
.mx-physmore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,44px);margin-top:clamp(28px,3.2vw,44px);
  padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--border)}
.mx-physmore>*{min-width:0}
.mx-physmore .sec-sub{max-width:none;margin:0}
.mx-physmore.mx-p1{grid-template-columns:1fr;max-width:72ch}
@media(max-width:820px){.mx-physmore{grid-template-columns:1fr}}

/* ---- shared section furniture ---- */
.mx-sec .tst-head{margin-bottom:clamp(30px,3.6vw,50px)}
.mx-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.mx-cards3>*{min-width:0}
/* a two card row is centred, not left with a hole */
.mx-cards3.mx-n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;
  margin-inline:auto}
@media(max-width:860px){.mx-cards3,.mx-cards3.mx-n2{grid-template-columns:1fr}}

.mx-vcard{background:linear-gradient(180deg,rgba(78,109,140,.07),rgba(78,109,140,.035));
  border:1px solid rgba(27,31,59,.07);border-radius:20px;padding:24px 22px 20px;
  display:flex;flex-direction:column;gap:11px;
  transition:transform .3s ease,background-color .3s ease,border-color .3s ease,
             box-shadow .3s ease}
.mx-vcard:hover{transform:translateY(-2px);background:#fff;
  border-color:rgba(78,109,140,.32);box-shadow:0 14px 34px -18px rgba(27,31,59,.25)}
.mx-vn{font-size:16.5px;font-weight:800;letter-spacing:-.012em;color:#1B1F3B}
.mx-vt{font-size:13.5px;line-height:1.58;color:#5A6178;margin:0}
.mx-vm{margin-top:auto;align-self:flex-start;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:#31507A;
  background:rgba(78,109,140,.11);border-radius:7px;padding:5px 9px}

/* the acquisition-path cards, each linking to its own page */
.mx-pcard{background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:24px 22px;display:flex;flex-direction:column;gap:11px;text-decoration:none;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.mx-pcard:hover{transform:translateY(-2px);border-color:rgba(78,109,140,.32);
  box-shadow:0 14px 34px -18px rgba(27,31,59,.25)}
.mx-pico{width:42px;height:42px;border-radius:13px;background:rgba(78,109,140,.12);
  display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.mx-pico svg{width:21px;height:21px;stroke:#31507A;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.mx-pcard:hover .mx-pico{background:#4E6D8C}
.mx-pcard:hover .mx-pico svg{stroke:#fff}

/* the related links */
.mx-rcard{background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:24px 22px;display:flex;flex-direction:column;gap:11px;text-decoration:none;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.mx-rcard:hover{transform:translateY(-2px);border-color:rgba(78,109,140,.32);
  box-shadow:0 14px 34px -18px rgba(27,31,59,.25)}
.mx-rgo{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:800;color:#31507A}
.mx-rgo svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.mx-rcard:hover .mx-rgo svg,.mx-pcard:hover .mx-rgo svg{transform:translateX(3px)}
.mx-relmore{display:flex;justify-content:center;margin-top:clamp(22px,2.6vw,34px)}

/* two-column copy + figure */
.mx-2col{display:grid;gap:clamp(30px,3.6vw,54px);align-items:center}
.mx-2col>*{min-width:0}
@media(min-width:1040px){
  .mx-2col{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .mx-2col.mx-2narrow{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
.mx-2copy .tst-head{margin-bottom:0}
.mx-2copy .sec-sub{max-width:62ch}
.mx-2fig{margin:0}
.mx-hero{overflow:visible}
.mx-cap{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--muted-2)}

/* the vertical body composition pie */
.mx-piecard{background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:clamp(16px,1.8vw,24px);box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-piecard img{display:block;width:100%;max-width:400px;height:auto;margin-inline:auto}

/* the body composition hero panel, profile tour recipe */
.mx-bc{background:#fff;border:1px solid var(--border);border-radius:18px;
  box-shadow:0 34px 78px -46px rgba(20,28,46,.45);
  padding:clamp(18px,2.2vw,30px);display:grid;gap:clamp(16px,2.4vw,30px);
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(0,.95fr);
  align-items:center}
.mx-bc>*{min-width:0}
.mx-bc img{width:100%;height:auto;display:block}
.mx-bcstats{border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);padding:2px 16px}
.mx-bcrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;font-size:13.5px}
.mx-bcrow+.mx-bcrow{border-top:1px solid var(--border)}
.mx-bcrow span{color:var(--muted);font-weight:600}
.mx-bcrow b{color:var(--ink);font-weight:800;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:760px){.mx-bc{grid-template-columns:1fr 1fr}
  .mx-bcstats{grid-column:1/-1}}

/* the training zone table with the heart rate column, zn-tbl recipe */
.mx-zncard{background:#fff;border:1px solid var(--border);border-radius:16px;
  overflow:hidden;box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-zn{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mx-zn thead th{font-size:10.5px;font-weight:700;color:var(--ink);text-align:center;
  padding:9px 6px;background:var(--surface-2);border-bottom:1px solid var(--border);
  white-space:nowrap}
.mx-zn th.mx-znh-zone{text-align:left;padding-left:14px}
.mx-zn td{padding:10px 6px;border-bottom:1px solid rgba(27,31,59,.07);
  text-align:center;white-space:nowrap;vertical-align:middle}
.mx-zn tbody tr:last-child td{border-bottom:0}
.mx-znname{text-align:left!important;padding-left:14px!important;font-size:13px;
  font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mx-znname i{display:inline-block;width:8px;height:8px;border-radius:3px;
  margin-right:8px}
.mx-znv{line-height:1.2}
.mx-znv i{display:block;font-style:normal;font-size:8.5px;font-weight:600;
  color:var(--muted-2)}
.mx-znv b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.mx-znv u{display:block;text-decoration:none;font-size:8.5px;font-weight:600;
  color:var(--muted-2)}
.mx-znhr b{color:#31507A}
.mx-znhi td{background:rgba(230,38,28,.045)}
.mx-znhi .mx-znname{color:#E6261C}
@media(max-width:560px){.mx-zn thead th:nth-child(4),.mx-zn thead th:nth-child(5),
  .mx-zn td:nth-child(4),.mx-zn td:nth-child(5){display:none}}

/* footnote line under card grids */
.mx-note{margin-top:clamp(18px,2.2vw,26px);font-size:13.5px;line-height:1.6;
  color:var(--muted);max-width:72ch;border-left:3px solid rgba(78,109,140,.35);
  padding-left:14px}

/* ===== vo2max: Sebastian's final structure ===== */
/* the relationship tabs */
.mx-tabbar{display:flex;gap:6px;padding:5px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);width:max-content;
  max-width:100%;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;margin-bottom:clamp(22px,2.8vw,36px)}
.mx-tabbar::-webkit-scrollbar{display:none}
.mx-tab{appearance:none;border:0;background:transparent;font:inherit;
  font-size:13px;font-weight:700;color:var(--muted);padding:9px 16px;
  border-radius:999px;cursor:pointer;white-space:nowrap;flex:none;
  transition:background .25s ease,color .25s ease,transform .12s ease}
.mx-tab:hover{color:var(--ink)}
.mx-tab:active{transform:scale(.96)}
.mx-tab.on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,31,59,.12),0 4px 10px rgba(27,31,59,.08)}
.mx-tab:focus-visible{outline:2px solid #4E6D8C;outline-offset:2px}
.mx-tabpanels{position:relative}
.mx-tabpanel[hidden]{display:none}
.mx-tabgrid{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center}
.mx-tabgrid>*{min-width:0}
@media(min-width:1040px){
  .mx-tabgrid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
.mx-tcopy{display:grid;gap:14px}
.mx-tcopy .sec-sub{max-width:none;margin:0}
.mx-tfig{margin:0;min-width:0}
.mx-tabpanel.enter .mx-tabgrid{animation:mxTabIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes mxTabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mx-tabpanel.enter .mx-tabgrid{animation:none}}
/* the decisive line a relationship ends on */
.mx-take{margin:4px 0 0;padding:12px 16px;border-left:3px solid #E6261C;
  background:rgba(230,38,28,.05);border-radius:0 12px 12px 0;font-size:14px;
  line-height:1.6;font-weight:600;color:var(--ink)}

/* the problem section */
.mx-h3{font-size:clamp(19px,2vw,26px);font-weight:800;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink);margin:0 0 14px;text-wrap:balance}
.mx-acc{margin-top:clamp(30px,3.6vw,50px);padding-top:clamp(24px,2.8vw,36px);
  border-top:1px solid var(--border)}
.mx-accgrid{display:grid;gap:clamp(22px,3vw,46px);align-items:center}
.mx-accgrid>*{min-width:0}
@media(min-width:1040px){
  .mx-accgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.mx-acopy{display:grid;gap:13px}
.mx-acopy .sec-sub{max-width:none;margin:0}
.mx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);align-content:center}
.mx-stat{background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:20px 18px;display:grid;gap:8px;align-content:start;
  box-shadow:0 18px 44px -30px rgba(20,28,46,.35)}
.mx-stat b{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.02em;
  color:#E6261C;font-variant-numeric:tabular-nums;line-height:1}
.mx-stat span{font-size:12px;line-height:1.5;color:var(--muted);font-weight:600}
@media(max-width:560px){.mx-stats{grid-template-columns:1fr}}

/* the two measurement paths */
.mx-paths{display:grid;gap:clamp(16px,1.8vw,24px)}
.mx-paths>*{min-width:0}
@media(min-width:960px){.mx-paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mx-path{background:#fff;border:1px solid var(--border);border-radius:22px;
  padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:13px;
  box-shadow:0 26px 60px -42px rgba(20,28,46,.4)}
.mx-ppill{align-self:flex-start;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#31507A;
  background:rgba(78,109,140,.11);border-radius:7px;padding:5px 9px}
.mx-path .mx-h3{margin:0}
.mx-pp{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.65;
  color:#5A6178;text-wrap:pretty}
.mx-pstat{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;
  align-items:baseline;background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;margin:4px 0}
.mx-pstat b{font-size:clamp(26px,2.6vw,34px);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1}
.mx-pstat i{font-style:normal;font-size:12.5px;font-weight:800;color:var(--muted)}
.mx-pstat span{grid-column:1/-1;font-size:11.5px;line-height:1.5;
  color:var(--muted-2);font-weight:600}
.mx-path .mx-take{margin-top:auto}
.mx-path .mx-rgo{margin-top:4px}
/* his inline bolds read as ink against the muted body */
.mx-tcopy .sec-sub b,.mx-acopy .sec-sub b,.mx-pp b{color:var(--ink);font-weight:700}
/* the conventional-test photograph, a full-width strip between text and accuracy */
.mx-photowide{margin:clamp(28px,3.4vw,46px) 0 0;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-photowide img{display:block;width:100%;height:auto;aspect-ratio:21/9;
  object-fit:cover;object-position:center 30%}
@media(max-width:700px){.mx-photowide img{aspect-ratio:16/10}}
/* accuracy: h3 + all his paragraphs left, the stat cards stacked right; the
   columns centre against each other so neither reads as pinned to the top
   (Igor 2026-09-01 round 6) */
.mx-accgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,52px);align-items:center}
.mx-accgrid>*{min-width:0}
.mx-accgrid .mx-acopy{align-content:start}
.mx-accside{display:grid;gap:clamp(12px,1.4vw,16px);align-content:start}
@media(max-width:820px){.mx-accgrid{grid-template-columns:1fr}}
/* the two measurement paths as tabs */
.mx-ptabbar{margin-inline:auto;margin-bottom:clamp(24px,3vw,38px)}
/* both pills read at the same size, weight and colour; only the pill
   background marks the active one (Igor 2026-09-01) */
.mx-ptabbar .mx-tab{font-size:14px;font-weight:700;color:var(--ink);
  padding:11px 22px}
/* the columns centre against each other, like every other copy-beside-figure
   grid in the family (Igor 2026-09-01 round 6) */
@media(min-width:1040px){
  .mx-pgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.mx-tcopy.mx-path{background:none;border:0;box-shadow:none;padding:0;
  display:grid;gap:13px}
.mx-pside{min-width:0;display:grid;gap:clamp(14px,1.6vw,20px);align-content:start}
.mx-pside .mx-cmp2{margin:0}
.mx-pside .mx-cside{padding:28px 18px}
.mx-pside .mx-cdev{gap:10px}
.mx-pside .mx-cdev img{width:86px;height:86px}
.mx-pside .mx-cside b{font-size:14.5px}
.mx-pside .mx-pstat{margin:0}
/* the teal note line inside the longevity dashboard card */
.mxl-note{margin:10px 2px 0;font-size:clamp(10.5px,2cqi,13px);font-weight:600;
  font-style:italic;color:#0E7C6B}

/* metric links row under a tab takeaway or inside a path card */
.mx-tlinks{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:6px}

/* the links render as compact ghost buttons (Igor 2026-09-01) */
.mx-lbtn{background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:11px 18px;text-decoration:none;
  transition:border-color .25s ease,box-shadow .25s ease,transform .12s ease}
.mx-lbtn:hover{border-color:rgba(78,109,140,.4);
  box-shadow:0 10px 24px -16px rgba(27,31,59,.3)}
.mx-lbtn:active{transform:scale(.96)}
.mx-lbtn:focus-visible{outline:2px solid #4E6D8C;outline-offset:2px}

/* the sport carousel in the power-and-speed tab */
.mx-carbar{display:inline-flex;gap:2px;padding:2px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--border);margin-left:auto;
  flex:none;align-self:flex-start}
.mx-carbtn{appearance:none;font:inherit;font-size:clamp(9.5px,1.7cqi,11.5px);
  font-weight:700;cursor:pointer;color:var(--muted);background:transparent;
  border:0;border-radius:7px;padding:0 clamp(7px,1.5cqi,10px);
  min-height:clamp(24px,4.4cqi,30px);display:inline-flex;align-items:center;
  white-space:nowrap;transition:background .2s ease,color .2s ease,
  transform .12s ease}
.mx-carbtn.on{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,31,59,.1),0 3px 8px rgba(27,31,59,.06)}
.mx-carbtn:hover:not(.on){color:var(--ink);background:rgba(27,31,59,.05)}
.mx-carbtn:active{transform:scale(.96)}
.mx-slide[hidden]{display:none}
.mx-slideleg{margin:-4px 0 10px}
.mx-slide .mx-cap{margin-top:10px}

/* the live readout on the animated cards */
.mxa-read{margin-left:auto;flex:none;align-self:flex-start;display:inline-flex;
  align-items:baseline;gap:5px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;
  padding:clamp(4px,.9cqi,6px) clamp(8px,1.6cqi,12px);
  font-size:clamp(9.5px,1.85cqi,12px);font-weight:700;color:var(--muted);
  white-space:nowrap}
.mxa-read b{font-size:clamp(13px,2.6cqi,17px);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.mxa-read i{font-style:normal;font-size:clamp(8.5px,1.6cqi,10.5px);
  font-weight:600;color:var(--muted-2)}

/* the conventional-test photograph in the problem section */
.mx-probgrid{display:grid;gap:clamp(22px,3vw,46px);align-items:center;
  margin-top:clamp(6px,1vw,12px)}
.mx-probgrid>*{min-width:0}
@media(min-width:1040px){
  .mx-probgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.mx-photocard{margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-photocard img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3}

/* the side-by-side comparison inside each path card */
.mx-cmp2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(8px,1.2vw,14px);align-items:stretch;margin:2px 0 6px}
.mx-cside{border:1px solid var(--border);border-radius:14px;
  background:var(--surface-2);padding:14px 12px;display:flex;
  flex-direction:column;align-items:center;text-align:center;gap:8px}
.mx-cside.hot{background:#fff;border-color:rgba(230,38,28,.28);
  box-shadow:0 12px 30px -22px rgba(20,28,46,.4)}
.mx-cside b{font-size:12px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);line-height:1.3}
.mx-cdev{display:flex;gap:6px;align-items:center;justify-content:center}
.mx-cdev img{width:52px;height:52px;object-fit:contain;display:block}
.mx-cvs{align-self:center;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
/* ===== vlamax: the module-specific cards ===== */
/* the two-archetype sprint comparison (family cutouts + power bars) */
.mx-arch2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px)}
.mx-arch{border:1px solid var(--border);border-radius:16px;padding:18px 16px 16px;
  display:grid;justify-items:center;gap:7px;background:var(--surface-2)}
.mx-arch.hot{border-color:rgba(230,38,28,.35);background:rgba(230,38,28,.03)}
.mx-arch img{height:clamp(120px,14cqi,190px);width:auto;object-fit:contain}
.mx-arch b{font-size:clamp(12px,2.6cqi,15px);font-weight:800;color:var(--ink);
  text-align:center}
.mx-avla{font-size:clamp(10px,2.2cqi,12px);font-weight:700;color:#31507A;
  background:rgba(78,109,140,.11);border-radius:7px;padding:4px 9px;
  text-align:center}
.mx-arch.hot .mx-avla{color:var(--ink);background:rgba(230,38,28,.08)}
.mx-abar{width:100%;height:12px;border-radius:999px;background:rgba(27,31,59,.08);
  overflow:hidden;margin-top:4px}
.mx-abar i{display:block;height:100%;border-radius:999px;background:#4E6D8C}
.mx-arch.hot .mx-abar i{background:#E6261C}
.mx-aw{font-size:clamp(13px,3cqi,17px);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mx-abaseline{margin:12px 2px 0;font-size:clamp(10.5px,2cqi,12.5px);
  font-weight:600;color:var(--muted);text-align:center}
/* the founder pull-quote beside the delta-lactate paragraphs */
.mx-qcard{margin:0;background:#fff;border:1px solid var(--border);
  border-radius:18px;border-left:4px solid #E6261C;
  padding:clamp(20px,2.4vw,30px);
  box-shadow:0 24px 56px -38px rgba(20,28,46,.4)}
.mx-qcard p{margin:0;font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  font-weight:700;color:var(--ink);text-wrap:pretty}
/* the submaximal split visual: sampling photo + the conventional curve */
.mx-split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,16px)}
.mx-split2 figure{margin:0;border:1px solid var(--border);border-radius:14px;
  overflow:hidden;background:#fff;display:grid;grid-template-rows:1fr auto}
.mx-split2 img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;
  display:block}
.mx-minichart{background:var(--surface-2);height:100%;display:grid;
  align-items:center}
.mx-minichart svg{width:100%;height:auto;display:block}
.mx-split2 figcaption{font-size:11px;font-weight:700;color:var(--muted);
  text-align:center;padding:9px 8px;border-top:1px solid var(--border)}
/* the authored closer */
.mx-closewrap{max-width:70ch;margin-inline:auto;display:grid;gap:16px;
  justify-items:start}
.mx-closewrap .sec-sub{max-width:none;margin:0}
.mx-closewrap .sec-sub b{color:var(--ink);font-weight:700}
.mx-closewrap .btn-row{margin-top:8px;display:flex;flex-wrap:wrap;
  gap:10px 14px;align-items:center}
@media(max-width:560px){
  .mx-arch2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mx-arch{padding:12px 8px 12px}
}

/* ===== vlamax round 8 (Igor 2026-09-01): split problem layout, two text
   columns, wide quote, draw-on path visuals ===== */
/* citation links inside captions (Igor round 11: attach the links) */
.mx-cap a,.mx-probimg figcaption a,.mx-stat span a,.mx-pstat span a{
  color:#31507A;font-weight:700;
  text-decoration:underline;text-underline-offset:2px}
/* the headline sits close to its section (Igor round 9: the gap was big) */
#problem .tst-head{margin-bottom:clamp(14px,1.8vw,24px)}
.mx-probgrid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(22px,3vw,52px);align-items:stretch;
  margin-bottom:clamp(30px,3.6vw,52px)}
.mx-probgrid>*{min-width:0}
.mx-probcopy{display:grid;gap:14px}
.mx-probcopy .sec-sub{max-width:none;margin:0}
.mx-probimg{margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);outline:1px solid rgba(0,0,0,.08);
  outline-offset:-1px;box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-probimg{position:relative;min-height:280px}
.mx-probimg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
@media(max-width:820px){
  .mx-probimg{min-height:0}
  .mx-probimg img{position:static;height:auto;aspect-ratio:4/3;display:block}
}
.mx-probimg figcaption{font-size:11.5px;font-weight:600;color:var(--muted);
  padding:10px 12px;border-top:1px solid var(--border);background:#fff}
@media(max-width:820px){.mx-probgrid{grid-template-columns:1fr}}
/* ===== vlamax #problem: the archive gallery (Sebastian 2026-10-04: an
   original picture of the original sprint test, an auto moving gallery of
   three). One still, or an auto-advancing set once the module supplies more
   than one photo. No caption and the photo as tall as the copy beside it
   (Igor 2026-10-05), which is .mx-probimg's own footprint: same card, same
   stretch to the row, same 4:3 once the columns stack. Every photo shares the
   one stage, so nothing on the page moves when the slide changes. The dots
   sit on a scrim so they hold 3:1 over any photo (measured on white). ===== */
.mx-pgal{position:relative;min-height:280px;margin:0;border-radius:18px;
  overflow:hidden;background:var(--surface-3);
  border:1px solid var(--border);outline:1px solid rgba(0,0,0,.08);
  outline-offset:-1px;box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-pgal-stage{position:absolute;inset:0}
.mx-pgal-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .7s ease}
.mx-pgal-img.on{opacity:1}
@media(max-width:820px){
  .mx-pgal{min-height:0}
  .mx-pgal-stage{position:relative;inset:auto;aspect-ratio:4/3}
}
.mx-pgal-dots{position:absolute;left:50%;bottom:10px;z-index:2;
  transform:translateX(-50%);display:flex;align-items:center;gap:2px;
  padding:0 6px;border-radius:99px;background:rgba(20,24,40,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mx-pgal-dot{appearance:none;-webkit-appearance:none;border:0;background:none;
  cursor:pointer;min-width:24px;height:24px;padding:0 4px;display:grid;
  place-items:center;border-radius:99px}
.mx-pgal-dot i{display:block;position:relative;overflow:hidden;width:8px;
  height:8px;border-radius:99px;background:rgba(255,255,255,.7);
  transition:width .3s ease,background .3s ease}
.mx-pgal-dot:hover i{background:#fff}
.mx-pgal-dot.on i{width:24px;background:rgba(255,255,255,.42)}
.mx-pgal-dot.on i::after{content:"";position:absolute;inset:0;
  border-radius:inherit;background:#fff;transform-origin:0 50%}
.mx-pgal.auto .mx-pgal-dot.on i::after{
  animation:mxPgalFill var(--iv,5200ms) linear both}
@keyframes mxPgalFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mx-pgal-dot:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){
  .mx-pgal-img,.mx-pgal-dot i{transition:none}
}
/* the closer: his copy left, the inputs-into-gauge metric right */
.mx-closegrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,3.4vw,60px);align-items:center;max-width:1060px;
  margin-inline:auto}
.mx-closegrid:has(.tst-head){align-items:start}
.mx-closewrap .tst-head{margin-bottom:18px}
.mx-closewrap .tst-head .sec-title{margin-top:0}
.mx-closegrid>*{min-width:0}
@media(max-width:900px){.mx-closegrid{grid-template-columns:1fr;
  justify-items:center}
  .mx-closegrid .mx-closewrap{justify-items:start}}
/* Igor 2026-09-09: the fat page's closing comparison is the conversion
   argument, so it runs full width under the copy instead of sitting in the
   narrow right column. The viz is one wrapped child, so its caption stays
   with its chart instead of wrapping into the copy column. */
.mx-closegrid.mx-closestack{grid-template-columns:minmax(0,1fr);
  max-width:none;align-items:start;justify-items:stretch}
.mx-closegrid.mx-closestack .mx-closewrap{max-width:none;
  margin-inline:0;display:block}
.mx-closestack .mx-pcols .mx-acopy{display:grid;gap:16px;
  align-content:start}
.mxa-wrap{min-width:0}
.mxa-wrap .mx-cap{max-width:78ch;margin-inline:auto}
/* sized in USER UNITS for a board about 430px wide (the closer's right
   column), not for a full-width one: 40 units renders ~17px there and ~13px
   on a phone. Fixed rather than --mxfs-derived, because the boxes do not move
   with the viewport. */
.mxa-t{font-size:40px;font-weight:800}
.mxa-s{font-size:31px;font-weight:600}
.mxa-v{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums}
.mxa-q{font-size:210px;font-weight:800;opacity:.16}
.mx-closeviz{display:grid;justify-items:center;gap:10px;
  width:min(100%,340px);margin-inline:auto}
.mx-closeviz .mx-gcard{width:100%}
.mx-dcol2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,44px)}
.mx-dcol2>*{min-width:0}
.mx-dcol2 .mx-acopy{align-content:start}
@media(max-width:820px){.mx-dcol2{grid-template-columns:1fr}}
.mx-qcard.mx-qwide{margin-top:clamp(20px,2.4vw,30px)}
.mx-qcard.mx-qwide p{font-size:clamp(16px,1.6vw,20px);max-width:60ch}
/* the modelled sprint chart and the sample dots draw themselves in when
   their panel appears (display:none restarts the animations on tab switch) */
.mx-smodel .mxs-draw{stroke-dasharray:1;stroke-dashoffset:1;
  animation:mxsDraw 1.5s cubic-bezier(.4,0,.2,1) forwards}
.mx-smodel .mxs-d2{animation-delay:.3s}
.mx-smodel .mxs-d3{animation-delay:.55s}
.mx-smodel .mxs-fill{opacity:0;animation:mxsIn .9s ease forwards .9s}
.mx-smodel .mxs-peak{opacity:0;animation:mxsIn .6s ease forwards 1.45s}
.mx-smodel .mxs-dot{opacity:0;animation:mxsIn .45s ease forwards}
@keyframes mxsDraw{to{stroke-dashoffset:0}}
@keyframes mxsIn{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .mx-smodel .mxs-draw{animation:none;stroke-dashoffset:0}
  .mx-smodel .mxs-fill,.mx-smodel .mxs-peak,.mx-smodel .mxs-dot,
  .mx-smodel .mxr-band,.mx-smodel .mxs-out{
    animation:none;opacity:1}
}
/* the path-1 sprint photo card (supplement R8) */
.mx-spimg{margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);outline:1px solid rgba(0,0,0,.08);
  outline-offset:-1px;box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-spimg{width:min(100%,430px);margin-inline:auto}
.mx-spimg img{display:block;width:100%;height:auto;aspect-ratio:3/3.4;
  object-fit:cover}
/* the submaximal visual (round 12): the sampling photo full size with the
   lactate curve floating over its lower-left corner as a card */
.mx-sfloat{position:relative;padding:0 0 clamp(46px,5vw,72px) clamp(10px,1.2vw,18px)}
.mx-sfphoto{margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);outline:1px solid rgba(0,0,0,.08);
  outline-offset:-1px;box-shadow:0 34px 78px -46px rgba(20,28,46,.45)}
.mx-sfphoto img{display:block;width:100%;height:auto;aspect-ratio:4/3.1;
  object-fit:cover;object-position:center 30%}
.mx-sfchart{position:absolute;left:0;bottom:0;width:64%;background:#fff;
  border:1px solid var(--border);border-radius:14px;
  padding:8px 8px 2px;
  box-shadow:0 26px 60px -34px rgba(20,28,46,.5)}
.mx-sfchart .mp-chart{width:100%;height:auto;display:block}
.mxs-title{display:block;font-size:12.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;padding:6px 8px 2px}
@media(max-width:560px){
  .mx-sfloat{padding:0}
  .mx-sfchart{position:static;width:100%;margin-top:10px}
}

/* ===== vo2max mobile round (Igor 2026-09-01): hero order, visible tabs,
   figure-first panels, side-by-side device comparison ===== */
@media(max-width:1039px){
  /* 1. the hero centres: eyebrow tight on the headline, then the gauge,
     then the copy; the copy wrapper dissolves so the pieces interleave */
  .mx-hv2 .mx-hwrap{display:flex;flex-direction:column;gap:0;
    align-items:center;text-align:center}
  .mx-hv2 .mx-hcopy{display:contents}
  .mx-hv2 .eyebrow{order:0;margin-bottom:0}
  .mx-hv2 .hero-h1{order:1;margin:12px 0 4px}
  /* the hero column is a centred flex column here, so a chart wrapper would
     shrink to its content width instead of filling it (the gauge cards cap
     themselves at 300px below, so they are unaffected) */
  .mx-hv2 .mx-hviz{order:2;margin:16px 0 18px;width:100%}
  .mx-hv2 .mx-hsubs{order:3;margin-bottom:26px}
  .mx-hv2 .btn-row{order:4;justify-content:center}
  .mx-hv2 .mx-hgauge .mx-gcard{width:min(100%,300px);
    padding:14px 16px 16px}
  .mx-hv2 .mx-gbig .mx-gx{max-width:180px;margin:10px auto 10px}
  .mx-hv2 .mx-gcard .mx-gn{font-size:13.5px}
  /* 4. relationship tab panels lead with their visual, copy below; the
     measure panels keep copy first, cards under the text (round 7) */
  .mx-tabgrid>.mx-tfig{order:-1}
  /* ...except a tab section stamped mx-copyfirst: its copy comes first and
     the visual under it (vlamax #why, Igor 2026-10-05; fatmax got the same
     order through its page stamp on 2026-09-03) */
  .mx-copyfirst .mx-tabgrid>.mx-tfig{order:0}
}
/* 2. the donor floors the mobile h1 at 30px, below the family's own 34px
   section titles and the site's 34px h1 standard; the double selector
   outweighs the donor's !important rule */
.mx-hero .hero-h1{font-size:clamp(34px,3.4vw,46px)!important}
@media(max-width:700px){
  /* 3. the seven tabs wrap into visible rows instead of an off-screen
     scroll, the chip-row pattern the other pages use */
  .mx-tabbar{flex-wrap:wrap;overflow:visible;width:100%;
    justify-content:center;border-radius:18px;gap:5px}
  .mx-ptabbar{width:max-content;max-width:100%;border-radius:999px}
}
@media(max-width:560px){
  /* the two measure pills stay on one row */
  .mx-ptabbar .mx-tab{font-size:12.5px;padding:10px 13px}
}
@media(max-width:560px){
  /* 6. the device comparison stays two columns, left device vs. right */
  .mx-cmp2{gap:8px}
  .mx-cside{padding:14px 8px 12px}
  .mx-cdev{gap:5px}
  .mx-cdev img{width:44px;height:44px}
  .mx-cside b{font-size:11.5px}
  .mx-pside .mx-cside{padding:16px 10px 14px}
  .mx-pside .mx-cdev img{width:52px;height:52px}
  .mx-pside .mx-cside b{font-size:12px}
}

/* ===== the MLSS page (Sebastian's supplement, 2026-09-01) ===== */

/* R1, the hero: the donor hero container turns flex-column below 1040px and
   a chart card would shrink to content width there, so a module-authored hero
   visual claims its full column explicitly */
.mx-hchart{width:100%}
/* the chart hero reads at full size: its column wins the split (round 20),
   only on module-hero pages so the approved gauge heroes keep their grid */
@media(min-width:1040px){
  .mx-hmod .mx-hwrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .mx-hmod .mx-hcopy{max-width:56ch}
}

/* "What MLSS Is Not" as its own slim band (round 21): tighter block padding
   than a full section, a narrower measure, and the small citation line */
.mx-notsec{padding-block:clamp(44px,5.5vw,72px)}
.mx-notsec .tst-head{max-width:760px;margin-inline:auto}
.mx-notcite{max-width:640px;margin:18px auto 0;text-align:center;
  font-size:12.5px;line-height:1.55;color:var(--muted-2)}
.mx-notcite a{color:#31507A;font-weight:700;text-decoration:underline;
  text-underline-offset:2px}

/* R3: the ranges tint in around the settled curve, staggered */
.mx-smodel .mxr-band{opacity:0;animation:mxsIn .7s ease forwards 1s}
.mx-smodel .mxr-b2{animation-delay:1.15s}
.mx-smodel .mxr-b3{animation-delay:1.3s}

/* vlamax path 2 (round 32): the outcome chip under the floating lactate
   chart, the switching-cost message in the visual itself */
.mxs-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  margin-top:10px;padding:8px 12px;border-radius:10px;
  background:rgba(230,38,28,.06);border:1px solid rgba(230,38,28,.22);
  font-size:12px;font-weight:700;color:var(--ink)}
.mxs-out b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.mxs-out small{font-size:11px;font-weight:600;color:var(--muted-2)}
.mx-smodel .mxs-out{opacity:0;animation:mxsIn .5s ease forwards 2.05s}

/* vlamax sprint tab (round 25): the archetype comparison enters on scroll.
   Athletes land left then right, the bars grow so the power contrast IS the
   animation, the watt values arrive once their bars settle. */
@media(prefers-reduced-motion:no-preference){
  .mx-arch2.arm .mx-arch{opacity:0;transform:translateY(14px)}
  .mx-arch2.arm.go .mx-arch{animation:mxaIn .6s cubic-bezier(.22,1,.36,1) forwards .05s}
  .mx-arch2.arm.go .mx-arch.hot{animation-delay:.22s}
  .mx-arch2.arm .mx-avla,.mx-arch2.arm .mx-aw{opacity:0}
  .mx-arch2.arm.go .mx-avla{animation:mxsIn .45s ease forwards .42s}
  .mx-arch2.arm.go .mx-arch.hot .mx-avla{animation-delay:.58s}
  .mx-arch2.arm .mx-abar i{transform:scaleX(0);transform-origin:left}
  .mx-arch2.arm.go .mx-abar i{animation:mxzGrow .75s cubic-bezier(.22,1,.36,1) forwards .55s}
  .mx-arch2.arm.go .mx-arch.hot .mx-abar i{animation-delay:.78s}
  .mx-arch2.arm.go .mx-aw{animation:mxsIn .5s ease forwards 1.1s}
  .mx-arch2.arm.go .mx-arch.hot .mx-aw{animation-delay:1.35s}
}
@keyframes mxaIn{to{opacity:1;transform:translateY(0)}}

/* vlamax lactate-profile tab (round 27): the interpretation gap, literal.
   Two readouts ride the same sweep, one glycolytic and one aerobic, because
   the curve shift is identical under both. */
.mxa-causes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;margin:0 0 14px}
.mxa-cq{grid-column:1/-1;font-size:12px;font-weight:800;color:var(--muted-2);
  letter-spacing:.01em}
.mxa-cause{display:grid;gap:2px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface-2);min-width:0}
.mxa-cause i{font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.mxa-cg i{color:#DC2626}
.mxa-ca i{color:#1D4ED8}
.mxa-cause span{font-size:12.5px;font-weight:700;color:var(--muted);
  white-space:nowrap}
.mxa-cause b{font-size:17px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mxa-cause u{text-decoration:none;font-size:11px;font-weight:700;
  color:var(--muted-2)}
.mxa-cause small{font-size:11px;font-weight:600;color:var(--muted-2)}
@media(max-width:420px){.mxa-causes{grid-template-columns:1fr}}

/* R6 (round 24): the hub entrance, gated like R5 so it plays when seen */
@media(prefers-reduced-motion:no-preference){
  .mxh-wrap.arm .mxh-chip,.mxh-wrap.arm .mxh-hub,.mxh-wrap.arm .mxh-lines{
    animation-play-state:paused}
  .mxh-wrap.arm.go .mxh-chip,.mxh-wrap.arm.go .mxh-hub,
  .mxh-wrap.arm.go .mxh-lines{animation-play-state:running}
}

/* glycogen page (2026-09-02): hero note, pathway lanes, two-state, report */
.mxg-top .mx-hsubs{margin-bottom:14px}
.mxg-hnote{margin:0 0 28px;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:#fff;font-size:14.5px;line-height:1.5;
  color:var(--ink);text-wrap:pretty}
@media(max-width:1039px){
  /* the phone hero orders its children 0-4 (eyebrow, h1, visual, subs,
     buttons); the note takes the subs' slot so it follows the two
     paragraphs and precedes the buttons (Igor item 5) */
  .mx-hv2 .mxg-hnote{order:3;text-align:center;max-width:none}
}
.mxg-top .mx-tabgrid,.mxg-top .mx-probgrid{align-items:start}
.mxg-top .mx-path .tst-head,.mxg-top .mx-probcopy .tst-head,
.mxl-page .mx-path .tst-head,.mxl-page .mx-probcopy .tst-head{margin:0 0 16px;max-width:none}
.mxg-top .mx-path .tst-head .sec-title,.mxg-top .mx-probcopy .tst-head .sec-title,
.mxl-page .mx-path .tst-head .sec-title,
.mxl-page .mx-probcopy .tst-head .sec-title{margin-bottom:0}

.mxg-path{display:grid;gap:14px;padding:6px 0 2px}
.mxg-lane{display:grid;grid-template-columns:auto auto 1fr auto 1fr auto auto;
  align-items:center;gap:8px;padding:14px 16px;border-radius:14px;
  background:rgba(27,31,59,.035);opacity:0;transform:translateY(10px);
  animation:mxgIn .7s cubic-bezier(.2,0,0,1) forwards;animation-play-state:paused}
.mxg-lane.is-gly{animation-delay:.25s}
.go .mxg-lane,.mxg-path.go .mxg-lane{animation-play-state:running}
.mxg-src{display:grid;font-size:13px;font-weight:800;color:var(--ink);min-width:0}
.mxg-src small,.mxg-step small{display:block;font-size:11px;font-weight:600;
  color:var(--muted);margin-top:2px}
.mxg-step{display:grid;font-size:12.5px;font-weight:700;color:var(--ink);
  padding:8px 10px;border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(27,31,59,.08),0 0 0 1px rgba(27,31,59,.06);min-width:0}
.mxg-arr{width:14px;height:2px;background:rgba(27,31,59,.28);position:relative;flex:none}
.mxg-arr:after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;
  border-left:6px solid rgba(27,31,59,.4)}
.mxg-atp{display:grid;justify-items:center;padding:6px 12px;border-radius:12px;
  background:var(--ink);color:#fff;min-width:64px}
.mxg-atp b{font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.mxg-atp small{font-size:10.5px;font-weight:700;opacity:.8;margin-top:2px}
.is-gly .mxg-atp{background:#0F766E}
.mxg-note{grid-column:1/-1;font-style:normal;font-size:11.5px;color:var(--muted)}
.mxg-gain{display:flex;align-items:baseline;gap:8px;justify-content:center;padding:2px 0}
.mxg-gain b{font-size:22px;color:#0F766E}
.mxg-gain span{font-size:12.5px;font-weight:700;color:var(--ink)}
.mxg-foot{margin:0;font-size:12px;color:var(--muted);text-align:center}
@keyframes mxgIn{to{opacity:1;transform:none}}
@media(max-width:640px){
  .mxg-lane{grid-template-columns:1fr auto 1fr;grid-auto-rows:auto;row-gap:10px}
  .mxg-lane .mxg-arr{display:none}
  .mxg-src{grid-column:1/-1}
  .mxg-atp{grid-column:3}
}

.mxg-two{display:grid;grid-template-columns:1fr;gap:16px;padding:4px 0 0}
.mxg-state{border-radius:14px;padding:22px 20px;background:rgba(27,31,59,.035);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:10px 18px;
  align-items:start}
.mxg-state.is-high{background:rgba(230,38,28,.06)}
.mxg-sl,.mxg-sr{display:grid;gap:10px;min-width:0;align-content:start}
.mxg-kick{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted)}
.mxg-stitle{font-size:17px;color:var(--ink);line-height:1.15}
.mxg-chips{display:flex;flex-wrap:wrap;gap:5px}
.mxg-chips i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink);
  padding:3px 9px;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px rgba(27,31,59,.08)}
.mxg-store{display:grid;gap:4px}
.mxg-store small{font-size:11px;font-weight:600;color:var(--muted)}
.mxg-bar{display:block;height:10px;border-radius:999px;background:rgba(27,31,59,.1);
  position:relative;overflow:hidden}
.mxg-bar:after{content:"";position:absolute;inset:0;width:var(--w);border-radius:999px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,0,0,1) .25s}
.is-high .mxg-bar:after{background:#E6261C}
.go .mxg-bar:after,.mxg-two.go .mxg-bar:after{transform:none}
.mxg-outs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mxg-outs li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--ink);opacity:0;transform:translateY(6px);
  animation:mxgIn .6s cubic-bezier(.2,0,0,1) forwards;animation-play-state:paused}
.go .mxg-outs li,.mxg-two.go .mxg-outs li{animation-play-state:running}
.mxg-outs i{font-style:normal;width:20px;height:20px;border-radius:999px;display:grid;
  place-items:center;font-size:12px;background:#fff;flex:none;
  box-shadow:0 0 0 1px rgba(27,31,59,.1)}
.mxg-mid{justify-self:center;display:flex;gap:5px;align-items:baseline;
  padding:8px 18px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:700;line-height:1.15}
.mxg-mid b{font-size:13px}
.mxg-twofoot{margin:10px 0 2px;font-size:13.5px;line-height:1.55;color:var(--ink)}
@media(max-width:640px){
  .mxg-state{grid-template-columns:1fr}
}

.mxg-repcard{padding:10px}
.mxg-report{position:relative;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.mxg-report img{display:block;width:100%;height:auto}
.mxg-ring{position:absolute;left:14.5%;top:71%;width:23%;height:27%;border-radius:18px;
  box-shadow:0 0 0 3px #E6261C;pointer-events:none}
.mxg-tag{position:absolute;left:14.5%;top:65.5%;padding:4px 10px;border-radius:999px;
  background:#E6261C;color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap}
@media(max-width:640px){.mxg-tag{font-size:10px;top:64%}}

/* fatmax page (2026-09-02): athlete pills, halo labels, verdict, cart callout, workflow */
.mxf-pills{display:flex;gap:6px;margin:2px 0 10px;padding:3px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);width:max-content;max-width:100%}
.mxf-pill{appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;
  position:relative;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--muted);overflow:hidden;min-height:36px;transition:color .25s ease,background .25s ease}
.mxf-pill.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(27,31,59,.10),0 0 0 1px rgba(27,31,59,.06)}
.mxf-pill i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#E6261C;
  transform:scaleX(0);transform-origin:left;border-radius:999px;opacity:0;z-index:1}
/* a faint track under the active pill, so the timer reads from its first frame */
.mxf-pill.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:rgba(230,38,28,.18);border-radius:999px}
.mxf-pill.on.run i{opacity:1;animation:mxfHold var(--hold,4500ms) linear forwards}
@keyframes mxfHold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mxf-flag rect{filter:drop-shadow(0 1px 1.5px rgba(27,31,59,.18))}
.mxf-flag text{font-size:calc(var(--mxfs,22px) * .95)}

/* carbmax page (2026-09-04): the fixed 90 g/h line, its projection to the
   load axis, and the study panels rebuilt from Ohr & Lindschulten's tables */
.mxb-hsubs{margin-bottom:14px}
.mx-smodel .mxb-lvl{opacity:0;animation:mxsIn .55s ease forwards .95s}
.mxb-lvl rect,.mxb-wlab rect{filter:drop-shadow(0 1px 1.5px rgba(27,31,59,.16))}
.mxb-lvl text,.mxb-mark text{font-size:calc(var(--mxfs,22px) * .95)}
/* the four figures open full screen on tap, the way an article image does.
   The overlay is built in JS and appended at document level, because the
   fade-up ancestors carry transforms and a transformed ancestor breaks
   position:fixed. NOTE: never write an HTML tag literally in this stylesheet,
   the bundler slices the page at the first occurrence of the body tag. */
.mxb-zoom{position:relative;display:block;width:100%;padding:0;border:0;
  background:none;font:inherit;color:inherit;text-align:inherit;cursor:zoom-in}
.mxb-zoom .mxb-zi{position:absolute;top:0;right:0;z-index:2;display:flex;
  align-items:center;gap:5px;padding:5px 9px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);transition:color .2s ease,background .2s ease}
.mxb-zoom:hover .mxb-zi{color:var(--ink);background:#fff}
.mxb-zoom .mxb-zi svg{width:12px;height:12px}
.mxb-lb{position:fixed;inset:0;z-index:600;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,4vw,40px);opacity:0;
  pointer-events:none;transition:opacity .3s ease}
.mxb-lb.open{opacity:1;pointer-events:auto}
.mxb-lb-bd{position:absolute;inset:0;background:rgba(10,14,24,.72);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.mxb-lb-box{position:relative;z-index:1;width:min(1100px,100%);
  max-height:92vh;overflow:auto;border-radius:20px;background:#fff;
  padding:clamp(16px,3vw,30px);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:scale(.97) translateY(8px);
  transition:transform .34s cubic-bezier(.2,0,0,1);container-type:inline-size}
.mxb-lb.open .mxb-lb-box{transform:none}
.mxb-lb-x{position:absolute;z-index:3;top:12px;right:12px;width:40px;height:40px;
  border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:22px;
  line-height:1;background:rgba(255,255,255,.18);display:flex;
  align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mxb-lb-x:hover{background:rgba(255,255,255,.3)}
.mxb-lb-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .mxb-lb,.mxb-lb-box{transition:none}}

/* his row 2: the paper's four figures recreated, two per row, so reading
   across a row is the contrast the row asks to make visible */
.mxb-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2.4cqi,20px)}
/* the 2x2 holds at every width, so a phone sees the same figure block the
   desktop does (Igor 2026-09-04). Tapping it opens the overlay, and THERE the
   figures stack, which is what makes the zoom worth taking. */
@media(max-width:640px){.mxb-lb .mxb-figs{grid-template-columns:1fr}}
.mxb-fig{margin:0;min-width:0}
.mxb-fsvg{width:100%;height:auto;display:block}
.mxb-fig figcaption{margin-top:6px;font-size:clamp(10.5px,2.1cqi,12px);
  font-weight:700;line-height:1.35;color:var(--muted);text-wrap:pretty}
.mxb-ft{font-size:18px;font-weight:600;fill:#5d5f66}
.mxb-fu{font-size:19px;font-weight:700;fill:var(--ink)}
.mxb-fc{font-size:22px;font-weight:800}
/* Alignment, measured against the FatMax page (Igor 2026-09-04). This page's
   cards carry no title and no caption, so they are shorter than the copy: the
   visual therefore anchors to the top of its column instead of floating in the
   middle, and the copy's first line rises 7px so its cap height meets the
   card's top border, the same optical fix the FatMax page already carries. */
/* the card is shorter than the copy, so it centres against it the way the
   approved FatMax hero does, rather than hanging from the top with all the
   slack below it */
.mxb-page .mx-hwrap > .mx-hviz{align-self:center}
/* a wider copy column (Igor 2026-09-04); the visual keeps enough width for
   the software's chart to stay legible */
@media(min-width:1040px){
  .mxb-page.mx-hmod .mx-hwrap{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}

/* The hero, rebuilt to his row 1 (Igor 2026-09-04). One card. The rail states
   his lookup as display type in HTML, so "90 g/h -> CarbMax power" is legible
   before the reader has parsed anything; the plot below proves it. All SVG
   type is sized in cqi against the card, which carries container-type:
   inline-size, so the unit and axis labels stay prominent at every width
   instead of collapsing to the 11px the shared axis sizer would give them. */
.mxb-hcard{padding:clamp(18px,2.2vw,28px)}
/* the axis type is raised on this card, so the widest y label ("1673.04")
   reaches past the SVG's own left edge; the card's padding holds it */
.mxb-plot .mp-chart{overflow:visible}
.mxb-plot{padding-left:6px}
/* his two numbers live ON the software's chart: the 90 g/h set on the rule
   it names, the answer set under the projection's landing point. Sized off
   the chart's own axis variable, so they hold their proportion at any width,
   with a white halo so they read over the grid and the curves. */
/* his two values ride on flags over the software's own chart; the flags size
   themselves to their text (mxbFlags) at any card width */
.mxb-lvl text,.mxb-wlab text{font-size:calc(var(--mxfs,22px) * 1.12)}
.mxb-lvl rect,.mxb-wlab rect{filter:drop-shadow(0 2px 3px rgba(27,31,59,.14))}
.mxb-val{opacity:0;animation:mxsIn .5s ease forwards 1.9s}
@media(prefers-reduced-motion:reduce){.mxb-val{animation:none;opacity:1}}
/* his three beats arrive in order on top of the software's own chart: the
   curves draw, the 90 g/h level sweeps in from the axis, the crossing lands,
   the projection falls to the load axis */
.mxb-plot .mxb-lvl{opacity:1;transform-origin:0 0;transform:scaleX(0);
  animation:mxbSweep .7s cubic-bezier(.22,1,.36,1) forwards 1.15s}
.mxb-plot .mxb-mark{opacity:0;animation:mxsIn .5s ease forwards 1.75s}
.mxb-plot .mxb-vline{stroke-dasharray:8 8;stroke-dashoffset:120;
  animation:mxbDrop .6s cubic-bezier(.22,1,.36,1) forwards 1.85s}
@keyframes mxbSweep{to{transform:scaleX(1)}}
@keyframes mxbDrop{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .mxb-plot .mxb-lvl,.mxb-plot .mxb-mark,.mxb-plot .mxb-vline{
    animation:none;opacity:1;transform:none;stroke-dashoffset:0}}
@media(max-width:520px){
  .mxb-rail{flex-wrap:wrap;row-gap:6px}
  .mxb-arw{transform:rotate(90deg);margin:0 0 0 .2em}}
/* .mx-pcols carries a zero row gap (it is a two-column text block), so when it
   collapses to one column the two halves run together. Scoped to this page so
   the approved pages are untouched; the same 13px the paragraphs inside each
   half already use. */
@media(max-width:839px){.mxb-page .mx-pcols{row-gap:13px}}
@media(max-width:1039px){
  .mxb-page.mx-hv2 .hero-h1{margin:12px 0 16px}
  .mxb-page.mx-hv2 .mx-hviz{margin:6px 0 26px}
  .mxb-page.mx-hv2 .mx-hsubs{margin-bottom:22px}
}
.mxb-page .mx-probgrid > .mx-probcopy,
.mxb-page .mx-pgrid > .mx-tcopy{margin-top:-7px}
@media(max-width:1039px){
  .mxb-page .mx-probgrid > .mx-probcopy,
  .mxb-page .mx-pgrid > .mx-tcopy{margin-top:0}
}
/* lactate clearance rate page (2026-09-07): flags, the hero callouts staged
   after the draw, the MCT inset, the 8-to-4 example, the interval traces */
.mxq-flag rect{filter:drop-shadow(0 1px 1.5px rgba(27,31,59,.16))}
.mxq-flag text,.mxq-wlab text{font-size:min(calc(var(--mxfs,22px) * 1.05),24px)}
.mxq-hero .mxq-c1,.mxq-hero .mxq-c2,.mxq-hero .mxq-c3{opacity:0;animation:mxsIn .5s ease forwards}
.mxq-hero .mxq-c1{animation-delay:1.2s}
.mxq-hero .mxq-c2{animation-delay:1.9s}
.mxq-hero .mxq-c3{animation-delay:2.6s}
@media(prefers-reduced-motion:reduce){
  .mxq-hero .mxq-c1,.mxq-hero .mxq-c2,.mxq-hero .mxq-c3{animation:none;opacity:1}}
/* the MCT inset: the two ions travel left to right through the transporters */
.mxq-mech{width:100%;height:auto;display:block}
.mxq-mech text{font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxq-mt{font-size:calc(var(--mxfs,22px) * 1.08);font-weight:800}
.mxq-ms{font-size:var(--mxfs,19px);font-weight:700}
.mxq-mk{font-size:var(--mxfs,20px);font-weight:700}
.mxq-mi{font-size:15px;font-weight:800}
.mxq-ion{animation:mxqIon 6s cubic-bezier(.45,0,.2,1) infinite}
.mxq-ion0{offset-path:path('M150 205 H 850');}
.mxq-ion1{offset-path:path('M150 245 H 850');animation-delay:.25s}
@supports not (offset-path:path('M0 0')){.mxq-ion0{transform:translate(500px,205px)}
  .mxq-ion1{transform:translate(500px,245px)}.mxq-ion{animation:none}}
@keyframes mxqIon{0%{offset-distance:0%;opacity:0}8%{opacity:1}
  88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.mxq-ion{animation:none;offset-distance:50%}}
/* the inset and its caption are one grid child, centred on the copy */
.mxq-side{display:flex;flex-direction:column;min-width:0;align-self:center}
.mxq-side .mx-cap{margin-top:14px}
/* the 8-to-4 example: two lines drawn towards the target, each over its own
   minutes (inline durations), then the flags and his "3 min earlier" */
.mxq-exwrap{padding:4px 0}
.mxq-ex{width:100%;height:auto;display:block;overflow:visible}
.mxq-ex text{font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxq-et{font-size:var(--mxfs,19px);font-weight:700}
.mxq-eu{font-size:calc(var(--mxfu,20px) * .88);font-weight:800}
/* the interval traces */
.mxq-int{width:100%;height:auto;display:block}
.mxq-int text{font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxq-it{font-size:var(--mxfs,19px);font-weight:700}
.mxq-iu{font-size:calc(var(--mxfu,20px) * .88);font-weight:800}
.mx-smodel .mxq-itrB{animation-delay:.5s}
.mxq-read2 em b{font-size:inherit;color:inherit;font-weight:800}
.mxq-read2 em{justify-self:start}
@media(max-width:640px){.mxq-read2{grid-template-columns:1fr}}

/* recovery index page (2026-09-07): the 0-100 scale, the comparison board,
   the competition card, the one-slider cards */
/* the competition card: the index layer arrives after both lines (his row 4) */
.mxi-board.arm + .mxf-dread .mxi-ril{opacity:0}
.mxi-board.arm.go + .mxf-dread .mxi-ril{animation:mxsIn .6s ease forwards 3.7s}
.mxi-lnote{color:var(--muted);font-style:italic}
@media(prefers-reduced-motion:reduce){.mxi-board + .mxf-dread .mxi-ril{opacity:1;animation:none}}
/* carbohydrate combustion page (2026-09-08): the budget, the pacing and
   session boards, the calendar, the cart panel, the assessment and the two
   slider cards. Namespace mxk-. */
.mxk-plot .mp-chart{overflow:visible}
.mxk-bud,.mxk-pace,.mxk-sess,.mxk-plan,.mxk-cart,.mxk-sol{width:100%;height:auto;
  display:block;overflow:visible}
.mxk-bud text,.mxk-pace text,.mxk-sess text,.mxk-plan text,.mxk-cart text,
.mxk-sol text{font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxk-bt,.mxk-bs{font-size:var(--mxfs,19px);font-weight:700}
.mxk-bu{font-size:calc(var(--mxfu,20px) * .88);font-weight:800}
.mxk-plan .mxk-dt{font-size:calc(var(--mxfs,22px) * .96)}
/* Igor 2026-09-09: on this page the headline sat 82px clear of its own body
   copy (18px h2 margin + 50px tst-head margin + 14px grid gap), and the
   card box started 18px above the headline's text box. Scoped with
   :has(.mxf-side) so only this page's two split sections change; the
   other seventeen metric pages share this stylesheet untouched. */
.mx-probgrid:has(.mxf-side) .tst-head{margin-bottom:0}
.mx-probgrid:has(.mxf-side) .tst-head .sec-title{margin-top:0}

/* fat combustion page (2026-09-08): the sparing board, the two-goal panel,
   the cart panel, the assessment lanes and the before/after. Namespace mxf-. */
.mxf-plot .mp-chart{overflow:visible}
.mxf-spar,.mxf-goals,.mxf-prot,.mxf-act{width:100%;height:auto;
  display:block;overflow:visible}
.mxf-spar text,.mxf-goals text,.mxf-prot text,.mxf-act text{
  font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxf-bs,.mxf-bt{font-size:var(--mxfs,19px);font-weight:700}
.mxf-bu{font-size:calc(var(--mxfu,20px) * .88);font-weight:800}
.mxf-bv{font-size:calc(var(--mxfu,20px) * .95);font-weight:800}
.mxf-gt{font-size:calc(var(--mxfs,22px) * 1.05);font-weight:800}
/* the peak marker carries two numbers now, so it is the widest label on the
   card. Capped in user units: --mxfs climbs to 25 on a phone while the white
   box behind the text does not, and uncapped the text ran out of its box. */
.mxf-plot .mxf-wlab text{font-size:min(var(--mxfs,22px),21px)}
/* fat-combustion row 7: the reused FatMax photo sits above the protocol
   lanes in one column, so unlike the FatMax page the figure must NOT flex to
   eat the column height; it keeps a fixed crop and the lanes follow. */
/* Igor 2026-09-09: the copy column ran 227px past the bottom of this one.
   The lanes and the caption are fixed height, so the photo takes the
   remainder and the two columns finish level, which is what the FatMax page
   does with the same figure. */
.mxc-col{display:flex;flex-direction:column;min-width:0;height:100%}
.mxc-col .mxf-cart{flex:1 1 auto;min-height:320px}
.mxc-col .mxf-cart img{position:absolute;inset:0;height:100%;
  object-position:50% 34%}
.mxc-prot{margin-top:14px;flex:none}
.mxc-col .mx-cap{text-align:left;margin-top:12px;flex:none}
@media(max-width:1039px){
  .mxc-col{height:auto}
  .mxc-col .mxf-cart{flex:none;aspect-ratio:4/3;min-height:0}
  .mxc-col .mxf-cart img{position:absolute;inset:0;height:100%}
}
/* Sebastian's weekend review of this page, 2026-10-05 (fat combustion only):
   the sparing statement under its one chart, the lens on the training chart,
   three controls on the closing card, and the sticker's size container. */
.mxf-say{margin:14px 0 0;padding:12px 16px;border-radius:14px;
  background:rgba(237,107,48,.09);font-size:15px;line-height:1.45;
  font-weight:700;color:#1B1F3B}
.mxf-say a{color:#3F5A75;font-weight:800;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.mxf-plot .mxf-lt{font-size:min(var(--mxfs,19px),21px);font-weight:700}
.mxf-plot .mxf-lv{font-size:min(var(--mxfs,22px),24px);font-weight:800;
  font-variant-numeric:tabular-nums}
.mxf-o2read{margin-top:12px}
.mxm-ctls.mxf-ctls3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
.mxf-ctls3 .mxm-range{height:34px}
.mxf-ctls3 .mxm-ctl output b{font-size:15px}
@container (max-width:350px){.mxm-ctls.mxf-ctls3{grid-template-columns:1fr}}
/* the sticker's range is sized in cqi against the photo's own column, as on
   FatMax (.mxf-cartcol there); this page's column is .mxc-col */
.mxc-col{container-type:inline-size}
/* on a phone the sticker is nearly as wide as the photo, and on this page's
   4:3 crop it covered two thirds of it. The FatMax page shows the same photo
   4:5 at this width; so does this one. */
@media(max-width:640px){.mxc-col .mxf-cart{aspect-ratio:4/5}}
/* the VLamax card states the variable it is holding still */
.mxf-fix{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--muted);
  line-height:1.45}
.mxf-gs{font-size:var(--mxfs,19px);font-weight:700}
.mxf-zt{font-size:var(--mxfs,19px);font-weight:700}
.mxf-cv{font-size:calc(var(--mxfu,20px) * 1.35);font-weight:800;
  font-variant-numeric:tabular-nums}
/* Igor 2026-09-09: on a phone the card narrows to 350px and the chart with
   it, but this type did not, so the callouts and the readout came to 159
   per cent of the chart's height and the card read as text with a small
   picture. Everything secondary steps down so the chart stays dominant. */
@media(max-width:640px){
  .mx-chartcard .mxf-out{padding:9px 11px;flex-basis:calc(50% - 4px);min-width:0}
  .mx-chartcard .mxf-out b{font-size:13.5px}
  .mx-chartcard .mxf-out span{font-size:12px;margin-top:1px}
  .mx-chartcard .mxf-outs{gap:8px;margin-top:10px}
  .mx-chartcard .mxf-vd{padding:11px 13px;margin-top:10px;border-radius:14px}
  .mx-chartcard .mxf-vdname{font-size:10.5px}
  .mx-chartcard .mxf-vddesc{font-size:11.5px}
  .mx-chartcard .mxf-vdmain{font-size:13px;margin-top:4px}
  .mx-chartcard .mxf-vdrows{gap:5px 18px;margin-top:8px}
  .mx-chartcard .mxf-vdrow{min-width:0;padding-left:9px}
  .mx-chartcard .mxf-vdrow span{font-size:11px}
  .mx-chartcard .mxf-vdrow b{font-size:12.5px}
}
.mxf-vd{margin-top:12px;border:1px solid rgba(27,31,59,.10);
  border-radius:16px;padding:13px 15px;background:rgba(27,31,59,.028)}
.mxf-vdtop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.mxf-vdname{font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#1B1F3B}
.mxf-vddesc{font-size:12px;color:#5d5f66}
.mxf-vdmain{margin-top:5px;font-size:14.5px;line-height:1.3;font-weight:800;
  color:#1B1F3B;transition:color .3s ease}
.mxf-vdmain.is-off{color:#E6261C}
.mxf-vdrows{display:flex;flex-wrap:wrap;gap:7px 24px;margin-top:10px}
.mxf-vdrow{display:flex;align-items:baseline;gap:8px;padding-left:11px;
  border-left:3px solid var(--c);min-width:150px}
.mxf-vdrow span{font-size:12px;color:#5d5f66}
.mxf-vdrow b{font-size:13px;font-weight:800;color:#1B1F3B;
  font-variant-numeric:tabular-nums}
/* Igor 2026-09-09: the tab grid centres the shorter column, which left
   126px of dead space above this page's copy against its taller figure.
   Scoped by the mxf- namespace, so only this page's tabs change. */
.mx-tabgrid:has([class*="mxf-"]){align-items:start}
.mxf-outs{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.mxf-out{flex:1 1 200px;border:1px solid rgba(27,31,59,.10);border-radius:16px;
  padding:12px 16px;border-left:4px solid var(--c)}
.mxf-out b{display:block;font-size:15px;color:#1B1F3B}
.mxf-out span{display:block;font-size:13.5px;color:#5d5f66;margin-top:2px}
.mxf-mech{margin-top:14px;display:grid;gap:10px}
.mxf-mrow{display:grid;grid-template-columns:1fr 120px 44px;align-items:center;
  gap:10px;font-size:13.5px;color:#5d5f66}
.mxf-mbar{display:block;height:8px;border-radius:4px;
  background:rgba(27,31,59,.10);overflow:hidden}
.mxf-mbar b{display:block;height:100%;border-radius:4px}
.mxf-mrow u{text-decoration:none;font-weight:800;color:#1B1F3B;text-align:right}
@media(prefers-reduced-motion:no-preference){
  .mxf-late{animation-delay:1.7s}
}
.mxk-cart .mxk-dt{font-size:calc(var(--mxfs,22px) * 1.6)}
.mxk-cart .mxk-bs{font-size:calc(var(--mxfs,19px) * 1.5)}
/* fixed, NOT derived from --mxfs: the variable changes with the
   viewport while the boxes do not, which caused every overflow on
   this board. Fixed units keep the text/box ratio constant at every
   width, so it fits once and fits always. */
.mxk-sol .mxk-dt{font-size:21px}
/* Igor 2026-09-09: the fat page stacks this section, so the board went from
   about 500px wide to the full 1100 and the fixed 21 USER UNITS came out at
   23 rendered px, bigger than the body copy beside it. The unit size is
   fixed on purpose (the boxes do not move with the viewport, so deriving it
   from --mxfs is what used to overflow them), so it steps down only where
   the board is actually full width. .mx-pfull is exactly the stacked case;
   the carbohydrate page, still side by side, is untouched. */
@media(min-width:840px){.mx-pfull .mxk-sol .mxk-dt{font-size:16px}}
/* the workflow qualifiers: subordinate to the diagram, so a quiet two
   column list under a hairline, not four more pills */
/* an inline study citation: a link, but quieter than the sentence it sits
   in. em-based so it tracks the paragraph at every breakpoint. */
.mxk-cite{font-size:.74em;font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(27,31,59,.3);
  vertical-align:.06em;white-space:nowrap}
.mxk-cite:hover,.mxk-cite:focus-visible{color:var(--ink);
  text-decoration-color:currentColor}
.mxk-wf{margin:20px 0 0;padding:16px 0 0;list-style:none;
  border-top:1px solid rgba(27,31,59,.10);
  display:grid;grid-template-columns:1fr 1fr;gap:9px 26px}
.mxk-wf li{position:relative;padding-left:16px;font-size:13px;
  font-weight:600;line-height:1.4;color:var(--muted)}
.mxk-wf li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:#4E6D8C;
  opacity:.55}
@media(max-width:560px){.mxk-wf{grid-template-columns:1fr}}
.mxk-cpanels{display:grid;gap:14px}
.mxk-cpanel{border-radius:20px;padding:22px 26px;display:grid;gap:14px}
.mxk-cpanel.is-ask{background:rgba(27,31,59,.045)}
.mxk-cpanel.is-not{background:#fff;border:2px dashed rgba(230,38,28,.35)}
.mxk-cph{font-size:14px;font-weight:700;color:var(--muted)}
.mxk-crow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.mxk-cnum{width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(78,109,140,.14);color:#4E6D8C;font-weight:800;
  font-size:14px;display:grid;place-items:center}
.mxk-cttl{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
.mxk-csub{font-size:14px;color:var(--muted);line-height:1.4}
.mxk-cbig{font-size:19px;font-weight:800;color:var(--ink);line-height:1.3}
.mxk-cnote{font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:640px){.mxk-cpanel{padding:18px 18px}}
.mxk-bop{font-size:calc(var(--mxfu,20px) * 1.15);font-weight:800;
  font-variant-numeric:tabular-nums}
.mxk-bv{font-size:calc(var(--mxfu,20px) * 1.25);font-weight:800;
  font-variant-numeric:tabular-nums}
.mxk-dt{font-size:calc(var(--mxfs,22px) * 1.05);font-weight:800}
.mxk-mt,.mxk-st{font-size:var(--mxfs,19px);font-weight:700}
.mxk-cv{font-size:calc(var(--mxfu,20px) * 1.6);font-weight:800;
  font-variant-numeric:tabular-nums}
.mxk-flag rect{filter:drop-shadow(0 1px 1.5px rgba(27,31,59,.16))}
.mxk-flag text,.mxk-wlab text{font-size:min(calc(var(--mxfs,22px) * 1.05),24px)}
.mxk-side{display:flex;flex-direction:column;min-width:0;align-self:center}
.mxk-side .mx-cap{margin-top:14px}
/* Sebastian 2026-10-05 (carbohydrate combustion): the bucket. The glycogen
   stores are a fixed bucket, supply runs in and demand runs out on one scale,
   and two tiles carry what he asked to be calculated. The drawing's type is in
   fixed viewBox units, so its clearances are the same at every width. */
.mxk-bkwrap{margin:2px 0 0}
/* the drawing stops growing at 560px: on a tablet the card is one wide column */
.mxk-bk{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.mxk-pmt{paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.mxk-bk text{font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxk-bkl{font-size:20px;font-weight:700}
.mxk-bkv{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums}
.mxk-bkg{font-size:36px;font-weight:800}
.mxk-bkres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:12px}
.mxk-bkr{display:grid;gap:3px;align-content:start;min-width:0;padding:12px 14px;
  border-radius:14px;background:rgba(27,31,59,.045)}
.mxk-bkr span{font-size:12px;font-weight:700;line-height:1.3;color:var(--muted)}
.mxk-bkr b{font-size:22px;font-weight:800;line-height:1.15;color:#0F766E;
  font-variant-numeric:tabular-nums}
.mxk-bkr small{font-size:12px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
[data-ckbk][data-def="1"] .mxk-bkr b{color:#E6261C}
[data-ckbk="pace"] .mxk-bkr b{color:var(--ink)}
[data-ckbk="pace"] .mxk-bkr:last-child b{color:#E6261C}
[data-ckbk] .mxk-board{margin-top:14px}
@media(max-width:420px){.mxk-bkr{padding:10px 11px}.mxk-bkr b{font-size:19px}
  .mxk-bkr span{font-size:11px}}
/* his x-axis title on this page's three curves: these captures carry their
   tick row on the bottom edge of the box (it was moved down for the larger
   type), so the title needs its own clearance; FatMax's charts do not */
.mxk-plot .mxf-xtitle{margin-top:clamp(7px,2cqi,11px)}
/* the carbohydrate page's error sticker (mxf-sticker) sizes its range from
   the photo's own width, so the photo is a size container here too */
.mxk-stickcol{container-type:inline-size}
.mxk-mech{margin:14px 2px 2px;display:grid;gap:9px}
.mxk-mhead{font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.mxk-mrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;gap:14px;font-size:12.5px;font-weight:600;line-height:1.3;
  color:var(--ink)}
.mxk-mbar{position:relative;display:block;height:10px;border-radius:999px;
  background:rgba(27,31,59,.08)}
.mxk-mbar b{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  transition:width .3s cubic-bezier(.2,0,0,1)}
.mxk-mbar u{position:absolute;top:-3px;bottom:-3px;width:2px;
  background:rgba(27,31,59,.45)}
.mxm-ctls.mxk-ctl1{grid-template-columns:1fr}
.mxk-dot,.mxk-vline,.mxk-wlab{transition:none}
@media(max-width:640px){.mxk-mrow{grid-template-columns:1fr;gap:6px}}
@media(prefers-reduced-motion:no-preference){
  .mxk-board.arm .mxs-draw,.mxk-board.arm .mxs-peak,.mxk-board.arm .mxs-fill,
  .mxk-board.arm .mxs-out,.mxk-board.arm .mxk-store,.mxk-board.arm .mxk-mom,
  .mxk-board.arm .mxk-fuel,.mxk-board.arm .mxk-step,.mxk-board.arm .mxk-in,
  .mxk-board.arm .mxk-out,.mxk-board.arm .mxk-wire,.mxk-board.arm .mxk-blk{
    animation-play-state:paused}
  .mxk-board.arm.go .mxs-draw,.mxk-board.arm.go .mxs-peak,
  .mxk-board.arm.go .mxs-fill,.mxk-board.arm.go .mxs-out,
  .mxk-board.arm.go .mxk-store,.mxk-board.arm.go .mxk-mom,
  .mxk-board.arm.go .mxk-fuel,.mxk-board.arm.go .mxk-step,
  .mxk-board.arm.go .mxk-in,.mxk-board.arm.go .mxk-out,
  .mxk-board.arm.go .mxk-wire,.mxk-board.arm.go .mxk-blk{
    animation-play-state:running}
}
.mxk-store{transform-origin:center bottom;
  animation:mxkDrain 2.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes mxkDrain{to{transform:scaleY(.12)}}
.mxk-blk{opacity:0;animation:mxsIn .5s ease forwards}
.mxk-mom{opacity:0;animation:mxsIn .45s ease forwards}
.mxk-mom0{animation-delay:1.5s}.mxk-mom1{animation-delay:1.7s}
.mxk-mom2{animation-delay:1.9s}.mxk-mom3{animation-delay:2.1s}
.mxk-momz{animation-delay:1.2s}
/* Igor 2026-09-09: the shared board timing holds the first element back
   1.2s and finishes at 2.55s, which on the two-goal panel read as a pause
   before anything happened. Scoped to this card only, so the carbohydrate
   boards keep their own pacing: the two goals land first, the arms draw
   between them, the target closes it, all inside 1s. */
.mxf-goals .mxk-mom0{animation-delay:.15s}
.mxf-goals .mxk-mom1{animation-delay:.3s}
.mxf-goals .mxk-momz{animation-delay:.5s}
.mxf-goals .mxk-mom3{animation-delay:.62s}
/* the canvas grew to 1000x630 to sit level with the copy column, so the
   type steps up with it. Capped in user units (min()) because --mxfs rises
   on a phone while the boxes do not, which is what pushes labels out. */
.mxf-goals .mxf-gt{font-size:min(calc(var(--mxfs,22px) * 1.30),27px)}
.mxf-goals .mxf-gs{font-size:min(calc(var(--mxfs,19px) * 1.18),24.5px)}
.mxk-zt{font-size:var(--mxfs,19px);font-weight:700}
.mxk-fuel{opacity:0;animation:mxsIn .5s ease forwards}
.mxk-fuel0{animation-delay:.9s}.mxk-fuel1{animation-delay:1s}
.mxk-fuel2{animation-delay:1.1s}.mxk-fuel3{animation-delay:1.2s}
.mxk-fuel4{animation-delay:1.3s}.mxk-fuel5{animation-delay:1.4s}
.mxk-fuel6{animation-delay:1.5s}
.mxk-step{opacity:0;animation:mxsIn .5s ease forwards}
.mxk-step0{animation-delay:.25s}.mxk-step1{animation-delay:.45s}
.mxk-step2{animation-delay:.65s}
.mxk-in{opacity:0;animation:mxsIn .5s ease forwards}
.mxk-in0{animation-delay:.2s}.mxk-in1{animation-delay:.35s}
.mxk-in2{animation-delay:.5s}
.mxk-wire{stroke-dasharray:1;stroke-dashoffset:1;
  animation:mxsDraw 1s cubic-bezier(.4,0,.2,1) forwards .7s}
.mxk-out{opacity:0;animation:mxsIn .45s ease forwards}
.mxk-out0{animation-delay:1.3s}.mxk-out1{animation-delay:1.42s}
.mxk-out2{animation-delay:1.54s}.mxk-out3{animation-delay:1.66s}
.mxk-out4{animation-delay:1.78s}.mxk-out5{animation-delay:1.9s}
@media(prefers-reduced-motion:reduce){
  .mxk-store,.mxk-blk,.mxk-mom,.mxk-fuel,.mxk-step,.mxk-in,.mxk-out,.mxk-wire{
    animation:none;opacity:1;transform:none;stroke-dashoffset:0}}
/* the two-part mechanism under the slider cards (his rows 5 and 6) */
.mxi-mech{margin:14px 2px 2px;display:grid;gap:9px}
.mxi-mhead{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mxi-mrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:14px;
  font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.mxi-mbar{position:relative;display:block;height:10px;border-radius:999px;background:rgba(27,31,59,.08)}
.mxi-mbar b{position:absolute;left:0;top:0;bottom:0;border-radius:999px;transition:width .3s cubic-bezier(.2,0,0,1)}
.mxi-mbar u{position:absolute;top:-5px;bottom:-5px;width:0;border-left:2px dashed rgba(27,31,59,.45)}
@media(max-width:640px){.mxi-mrow{grid-template-columns:1fr;gap:5px}}
@media(prefers-reduced-motion:reduce){.mxi-mbar b{transition:none}}
.mxi-index{margin:14px 2px 4px}
.mxi-ihead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 9px;font-size:12px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.mxi-ihead small{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none}
.mxi-track{position:relative;height:10px;border-radius:999px;background:rgba(27,31,59,.08)}
.mxi-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--mxi,0) * 1%);
  border-radius:999px;background:#4E6D8C;transition:width .7s cubic-bezier(.2,0,0,1)}
.mxi-mark{position:absolute;top:50%;left:calc(var(--mxi,0) * 1%);transform:translate(-50%,-50%);
  min-width:46px;padding:6px 10px;border-radius:999px;background:#fff;border:2px solid #4E6D8C;
  color:var(--ink);font-size:16px;font-weight:800;line-height:1;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(27,31,59,.16);
  transition:left .7s cubic-bezier(.2,0,0,1)}
.mxi-ticks{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;
  font-weight:600;color:var(--muted)}
.mxi-read2 em{justify-self:start}
.mxm-ctls.mxi-ctl1{grid-template-columns:1fr}
@media(max-width:640px){.mxi-read2{grid-template-columns:1fr}}
.mxi-cmp,.mxi-comp{width:100%;height:auto;display:block;overflow:visible}
.mxi-cmp text,.mxi-comp text{font-family:Manrope,-apple-system,system-ui,sans-serif}
.mxi-ct{font-size:calc(var(--mxfs,22px) * 1.05);font-weight:800}
.mxi-cs{font-size:var(--mxfs,19px);font-weight:700}
.mxi-cn{font-size:calc(var(--mxfu,20px) * 1.5);font-weight:800;font-variant-numeric:tabular-nums}
.mxi-et{font-size:var(--mxfs,19px);font-weight:700}
.mxi-cu{font-size:calc(var(--mxfs,19px) * .8);font-weight:700}
/* the comparison board plays row by row once it scrolls into view */
@media(prefers-reduced-motion:no-preference){
  .mxi-board.arm .mxs-draw,.mxi-board.arm .mxs-peak,.mxi-board.arm .mxs-fill{
    animation-play-state:paused}
  .mxi-board.arm.go .mxs-draw,.mxi-board.arm.go .mxs-peak,.mxi-board.arm.go .mxs-fill{
    animation-play-state:running}
}
.mxi-eu{font-size:calc(var(--mxfu,20px) * .88);font-weight:800}
@media(prefers-reduced-motion:reduce){.mxi-fill,.mxi-mark{transition:none}}
/* the source line the CC BY 4.0 figure needs, at caption size */
.mxb-src{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);
  max-width:70ch}
.mxb-src a{color:inherit;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.mxb-src a:hover{color:var(--ink)}
/* the study caption belongs to its card, so both sit in one grid child */
.mxb-studycol{display:flex;flex-direction:column;min-width:0}
.mxb-studycol .mx-cap{margin-top:14px}
.mxb-carb,.mxb-fat,.mxb-dot,.mxb-vline,.mxb-wlab{transition:none}
@media(prefers-reduced-motion:reduce){
  .mx-smodel .mxb-lvl{animation:none;opacity:1}}
/* the copy's first cap height meets the card's top border (Igor round 3) */
.mxf-page .mx-tabgrid > .mx-tcopy,.mxf-page .mx-probgrid > .mx-probcopy,
.mxf-page .mx-pgrid > .mx-tcopy{margin-top:-7px}
@media(max-width:1039px){.mxf-page .mx-tabgrid > .mx-tcopy,.mxf-page .mx-probgrid > .mx-probcopy,
  .mxf-page .mx-pgrid > .mx-tcopy{margin-top:0}}
.mxf-scen{margin:2px 0 10px}
.mxf-dread{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
.mxf-dread span{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:0 6px;
  padding:10px 14px;border-radius:12px;background:rgba(27,31,59,.035)}
.mxf-dread small{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.mxf-dread b{font-size:22px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.mxf-dread i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.mxf-dread em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);
  justify-self:end;font-variant-numeric:tabular-nums}
.mxf-dread em.is-up{color:#0F766E}
.mxf-dread em.is-down{color:#E6261C}
@media(max-width:640px){.mxf-dread{grid-template-columns:1fr}}
.mxf-verdict{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;
  margin:12px 0 2px;padding:12px 14px;border-radius:12px;background:rgba(27,31,59,.035)}
.mxf-vname{font-size:13px;font-weight:800;color:var(--ink)}
.mxf-vdesc{font-size:12px;font-weight:600;color:var(--muted)}
.mxf-verdict b{grid-column:1/-1;font-size:14px;line-height:1.4;color:var(--ink);
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.mxf-pill{padding:7px 12px;font-size:12.5px}
  .mxf-verdict{grid-template-columns:1fr}}
/* the photo fills the copy column's full height (Igor 2026-09-03): the source
   is portrait 900x1229, so a 4/3 crop threw most of it away and left dead
   space under the figure. Same fill pattern as .mx-probimg. */
.mxf-page.mxg-top .mx-probgrid{align-items:stretch}
/* the photo and its caption are one column: the figure takes the free height,
   the caption sits under it at the photo's own width and left edge */
.mxf-cartcol{display:flex;flex-direction:column;min-width:0;height:100%}
.mxf-cartcol .mx-cap{flex:none;text-align:left;margin-top:10px}
.mxf-cart{position:relative;margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);flex:1 1 auto;min-height:420px}
.mxf-cart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 32%}
@media(max-width:1039px){
  .mxf-page.mxg-top .mx-probgrid{align-items:start}
  .mxf-cartcol{height:auto}
  .mxf-cart{flex:none;height:auto;min-height:0}
  /* the source is portrait, so a taller phone crop keeps the callout from
     covering half the picture (it took 49% at 4/3) */
  .mxf-cart img{position:static;display:block;height:auto;aspect-ratio:4/5;
    object-fit:cover;object-position:50% 30%}
}
.mxf-callout{position:absolute;left:14px;right:14px;bottom:14px;padding:14px 16px;
  border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  box-shadow:0 10px 30px -12px rgba(20,28,46,.45),0 0 0 1px rgba(27,31,59,.08);
  display:grid;gap:2px}
.mxf-ckick{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted)}
.mxf-callout b{font-size:clamp(26px,3.2cqi,34px);line-height:1.05;color:#E6261C;
  font-variant-numeric:tabular-nums}
.mxf-callout span{font-size:13px;font-weight:600;color:var(--ink)}
.mxf-callout small{font-size:11px;color:var(--muted)}
.mxf-callout small a{color:inherit}
@media(max-width:640px){.mxf-callout{left:8px;right:8px;bottom:8px;padding:10px 12px}}
/* Sebastian 2026-10-05 (fatmax): the error statement as a sticker on the photo,
   read at one glance as a finding against the cart: solid brand red, the range
   and "absolute error" at display size. A modifier on the shared callout:
   each page opts in from its own content module (FatMax first; carbohydrate
   combustion on his word the same day, "same as in fat image"). */
/* The range never wraps, so its size is derived from the photo's own width
   (cqi against the photo column): 60px where the column allows it, smaller on
   a narrow column, never wider than the sticker. Fixed sizes spilled past the
   red at 320, 360 and 900 px in the first build. 6.4 = the range's width in em. */
.mxf-cartcol{container-type:inline-size}
.mxf-callout.mxf-sticker{right:auto;max-width:calc(100% - 28px);padding:18px 22px 16px;
  background:#E6261C;backdrop-filter:none;color:#fff;gap:0;
  box-shadow:0 22px 44px -18px rgba(96,10,6,.7),0 2px 6px rgba(20,28,46,.25)}
.mxf-sticker .mxf-ckick{font-size:12.5px;font-weight:800;letter-spacing:.05em;color:#fff}
.mxf-callout.mxf-sticker b{font-size:min(60px,calc((100cqi - 72px)/6.4));font-weight:800;
  line-height:1;letter-spacing:-.025em;color:#fff;margin-top:8px;white-space:nowrap}
.mxf-sticker .mxf-cerr{font-size:min(28px,calc((100cqi - 72px)/13.7));font-weight:800;
  line-height:1.1;letter-spacing:-.015em;color:#fff;margin-top:4px}
.mxf-callout.mxf-sticker span:not(.mxf-ckick){font-size:14px;font-weight:600;line-height:1.35;
  color:#fff;margin-top:8px}
.mxf-callout.mxf-sticker small{font-size:11.5px;font-weight:600;color:#fff;margin-top:6px}
.mxf-callout.mxf-sticker small a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  .mxf-callout.mxf-sticker{max-width:calc(100% - 16px);padding:14px 16px 12px}
  .mxf-callout.mxf-sticker b{font-size:min(46px,calc((100cqi - 48px)/6.4));margin-top:6px}
  .mxf-sticker .mxf-cerr{font-size:min(23px,calc((100cqi - 48px)/12.8))}
  .mxf-callout.mxf-sticker span:not(.mxf-ckick){font-size:13px;margin-top:6px}
}
/* on a phone the sticker runs edge to edge; hugging its text left a sliver of photo */
@media(max-width:480px){.mxf-callout.mxf-sticker{right:8px;max-width:none}}
/* Sebastian 2026-10-05 (fatmax tabs): the x axis named for both sport types,
   under the tick row. A block under the chart (see _content_fatmax.X_TITLE),
   centred on the plot (x 100-896 of 1000) and sized exactly like the chart's
   own kcal/h unit: clamp(9px, chart width / 42, 13px), the sizeAxis rule. */
.mxf-xtitle{margin:0 10.4% 0 10%;text-align:center;font-size:clamp(9px,2.381cqi,13px);
  font-weight:700;line-height:1.2;color:#1B1F3B}

/* the stacked answer section (fatmax, Igor 2026-09-03): h2 and two copy
   columns across the width, the comparison full width beneath */
.mx-pstack{display:grid;gap:clamp(22px,3vw,40px)}
.mx-pwide{max-width:none}
.mx-pfull{min-width:0}
.mx-pfull .mx-cap{max-width:78ch;text-align:left;margin-left:0}
.mx-pcols{display:grid;grid-template-columns:1fr;gap:0 clamp(24px,3.4vw,56px)}
@media(min-width:840px){.mx-pcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mx-pcols .mx-acopy{min-width:0}
.mx-pcols .mx-take{margin-top:14px}
.mx-pcols .mx-tlinks{margin-top:18px}
/* the workflow lanes (round 12): two lanes, Test -> Input data -> Calculation
   -> Output, the INSCYD lane's three routes bracketed into one arrow */
.mxf-lanes{display:grid;gap:12px;padding:4px 0 0}
/* round 14: the lane name is a heading row, the four steps share the width;
   the INSCYD output cell lays the gauge beside the curves */
.mxf-lhead,.mxf-steps{display:grid;align-items:center;gap:10px;
  grid-template-columns:minmax(0,1.05fr) 22px minmax(0,.95fr) 22px minmax(0,.95fr) 22px minmax(0,1.05fr)}
.mxf-lhead{padding:0 14px}
.mxf-lhead span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:0 4px}
.mxf-lane{display:grid;gap:10px;padding:12px 14px 14px;border-radius:16px;background:rgba(27,31,59,.035)}
.mxf-lane.is-inscyd{background:rgba(230,38,28,.05);border:1px solid rgba(230,38,28,.18)}
.mxf-llab{display:flex;align-items:baseline;gap:8px;padding:0 2px}
.mxf-llab b{font-size:15px;color:var(--ink)}
.mxf-llab small{font-size:12px;font-weight:600;color:var(--muted)}
/* round 15 (Igor): the INSCYD output is the gauge, and the "plus" line under it */
.mxf-cout.is-hot{justify-items:center;text-align:center;row-gap:6px}
.mxf-cout.is-hot .mxf-og{padding:0;width:auto}
.mxf-plus{font-size:12px;font-weight:600;color:var(--muted);line-height:1.4;max-width:24ch}
.mxf-cell{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:#fff;
  box-shadow:0 1px 2px rgba(27,31,59,.08),0 0 0 1px rgba(27,31,59,.06);min-width:0;align-self:stretch;
  align-content:center}
.mxf-cell b{font-size:14px;color:var(--ink);line-height:1.25}
.mxf-cell small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.4}
.mxf-dv{display:flex;gap:6px;margin-bottom:4px}
.mxf-dv img{width:40px;height:40px;object-fit:contain;border-radius:9px;background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.mxf-arr{display:block;width:22px;height:22px;position:relative}
.mxf-arr:before{content:"";position:absolute;left:0;right:6px;top:10px;height:2px;background:rgba(27,31,59,.35)}
.mxf-arr:after{content:"";position:absolute;right:2px;top:5px;width:8px;height:8px;
  border-top:2px solid rgba(27,31,59,.45);border-right:2px solid rgba(27,31,59,.45);transform:rotate(45deg)}
/* output cells: white like the other steps, a stronger border marks them; the
   INSCYD one carries the family gauge and the two curves at a readable size
   (Igor round 13: no red fill, the graph must be visible, add the gauge) */
.mxf-cout{background:#fff;box-shadow:0 0 0 1.5px rgba(27,31,59,.4);justify-items:center;text-align:center}
.mxf-cout.is-hot{box-shadow:0 0 0 2px rgba(230,38,28,.6),0 14px 30px -22px rgba(230,38,28,.45)}
.mxf-og{display:grid;justify-items:center;gap:0;width:100%;padding:2px 0 6px}
.mxf-og svg{width:96px;height:auto;display:block}
.mxf-og b{font-size:14px;color:var(--ink);margin-top:2px}
.mxf-og small{font-size:11.5px;font-weight:600;color:var(--muted)}
.mxf-ocurve{display:block;width:100%;height:auto;border-radius:8px;background:var(--surface-2);
  margin:2px 0 6px}
.mxf-oicon{display:none}
/* the three routes: each a box of its own with "or" between them, so the lane
   reads as any one test, not all three (Sebastian 2026-10-05; they were rows
   inside one cell, bracketed into the lane's arrow) */
.mxf-croutes{display:flex;flex-direction:column;min-width:0;align-self:stretch}
.mxf-rt{flex:1 1 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 12px;
  align-items:center;align-content:center;padding:10px 14px;border-radius:12px;
  text-decoration:none;color:var(--ink);background:#fff;
  box-shadow:0 1px 2px rgba(27,31,59,.08),0 0 0 1px rgba(27,31,59,.06);
  transition:box-shadow .2s ease}
.mxf-rt:hover{box-shadow:0 1px 2px rgba(27,31,59,.08),0 0 0 1.5px rgba(230,38,28,.5)}
.mxf-rt .mxf-dv{grid-row:1/3;margin:0}
.mxf-rt .mxf-dv img{width:34px;height:34px}
.mxf-rt b{font-size:14px;line-height:1.25;align-self:end}
.mxf-rt small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.35;align-self:start}
.mxf-or{flex:none;display:flex;align-items:center;gap:10px;padding:5px 4px;font-size:11.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mxf-or:before,.mxf-or:after{content:"";flex:1;height:1px;background:rgba(27,31,59,.18)}
@media(max-width:1039px){
  /* graphs under the text on phones (Igor 2026-09-03): the hero visual after
     the paragraphs and the note, before the buttons; tab visuals after their
     copy */
  .mxf-page.mx-hv2 .mx-hviz{order:4}
  .mxf-page.mx-hv2 .btn-row{order:5}
  .mxf-page .mx-tabgrid>.mx-tfig{order:0}
  /* the lanes as a compact stepper: heading row, cells full width, a small
     down-arrow between steps, the routes without the bracket */
  .mxf-lhead{display:none}
  .mxf-steps{grid-template-columns:1fr;gap:6px}
  .mxf-lane{gap:6px;padding:12px}
  .mxf-llab{padding:0 2px 2px}
  .mxf-arr{width:18px;height:18px;justify-self:center;transform:rotate(90deg);opacity:.8}
  .mxf-cell{padding:10px 12px}
  .mxf-rt{flex:none}
}

/* vo2max tab 7 (rounds 40-41): the two recovery mechanisms, labelled apart,
   each kicker carrying its own legend keys; both panels share one flat frame */
.mxa-mech{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;font-size:12px;font-weight:700;
  color:var(--muted)}
.mxa-mlab{display:inline-flex;align-items:center;gap:8px}
.mxa-mech b{flex:none;width:20px;height:20px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center}
.mxa-mkeys{display:inline-flex;flex-wrap:wrap;gap:4px 12px;font-weight:600}
.mxa-mkeys .mx-lkey{font-size:11.5px}
.mx-chartcard .mx-lleg:empty{display:none}
.mxa-flat{display:block;width:100%;height:auto}
.mxa-flat+.mxa-mech{margin-top:10px}

/* vo2max tab 5 (round 38): the held-constant chip beside the readout */
.mxa-held{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:0 0 12px;padding:8px 12px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface-2);
  font-size:12px;font-weight:700;color:var(--muted)}
.mxa-held b{font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2)}

/* vo2max tab 2 (round 35): the carousel's central message, one line */
.mx-carmsg{margin:0 0 12px;font-size:13px;line-height:1.55;font-weight:600;
  color:var(--ink);text-wrap:pretty}

/* vo2max tab 1 (round 34): the duration figure sits in the first, visible
   panel, so its entrance is gated the same way as the R5 chart */
@media(prefers-reduced-motion:no-preference){
  .mx-durviz.arm .mxs-draw,.mx-durviz.arm .mxs-dot,.mx-durviz.arm .mxs-peak,
  .mx-durviz.arm .mxs-fill{animation-play-state:paused}
  .mx-durviz.arm.go .mxs-draw,.mx-durviz.arm.go .mxs-dot,
  .mx-durviz.arm.go .mxs-peak,.mx-durviz.arm.go .mxs-fill{
    animation-play-state:running}
}

/* R5 (round 23): the constant-load chart sits in an always-rendered section,
   so its draw-in used to play at page load, below the fold. The driver
   stamps .arm before first paint (freezing every animation at frame zero)
   and .go on intersection releases them; no-JS never gets .arm and renders
   the finished state, reduced-motion keeps its own static override. */
@media(prefers-reduced-motion:no-preference){
  .mx-cload.arm .mxs-draw,.mx-cload.arm .mxs-dot,.mx-cload.arm .mxs-peak{
    animation-play-state:paused}
  .mx-cload.arm.go .mxs-draw,.mx-cload.arm.go .mxs-dot,
  .mx-cload.arm.go .mxs-peak{animation-play-state:running}
}

/* R1, the hero: the crossing gets a soft repeating pulse once the curves have
   drawn and the marker has landed, so the equilibrium reads as THE point */
.mxo-ping{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:mxoPing 3s ease-out 2.3s infinite}
@keyframes mxoPing{0%{transform:scale(.55);opacity:.5}
  75%{transform:scale(2.05);opacity:0}100%{transform:scale(2.05);opacity:0}}
.mp-chart text.mxo-lab{font-size:calc(var(--mxfs,22px)*1.18);
  paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.mxo-ping{animation:none;opacity:0}}

/* R2 (round 25, Sebastian 2026-10-04): what stays and what changes. The
   percentage zones and the MLSS rule are drawn once and never move; the two
   readouts and the three lines do. In CSS so the labels reflow instead of
   clipping: every position is a percentage of one box, so the bands, the
   columns under them, the MLSS rule and the 100% tick agree at any width. */
.mxz{position:relative;display:grid;gap:0;font-variant-numeric:tabular-nums}
/* the readouts: the fatmax interactive's tiles (.mxf-dread), three across at
   every width. Metric names keep their own casing, so no uppercase here. */
.mxz-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin-bottom:6px}
.mxz-tile{display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:0 5px;min-width:0;padding:9px 12px;border-radius:12px;
  background:rgba(27,31,59,.035)}
.mxz-tile small{grid-column:1/-1;font-size:11.5px;font-weight:800;
  color:var(--muted)}
.mxz-tile b{font-size:21px;line-height:1.15;font-weight:800;color:var(--ink);
  letter-spacing:-.01em}
.mxz-tile i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);
  white-space:nowrap}
.mxz-tile em{grid-column:1/-1;margin-top:3px;font-style:normal;font-size:10px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.mxz-tile u,.mxz-flag u{text-decoration:none}
.mxz-tile.is-chg{background:rgba(78,109,140,.11)}
.mxz-tile.is-chg em{color:#3F5B78}
/* the head room is the flag rail: two rows, so the flags of two lines that
   travel a few points apart never share one */
.mxz-plot{position:relative;padding-top:58px}
.mxz-bar{display:flex;height:22px;border-radius:9px 9px 0 0;overflow:hidden}
/* a 2px surface gap centred on every boundary, so each boundary stays exactly
   on its percentage (a flex gap pushed the last band 8px past the scale) */
.mxz-band{min-width:0;box-shadow:inset 1px 0 0 #fff,inset -1px 0 0 #fff}
.mxz-field{height:46px;border-radius:0 0 9px 9px}
/* fixed: the MLSS rule through bar and field, its name inked in */
.mxz-mark{position:absolute;top:58px;bottom:0;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(#1B1F3B 0 6px,rgba(255,255,255,.85) 6px 10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.85);pointer-events:none}
.mxz-mark b{position:absolute;right:7px;bottom:7px;padding:3px 8px;
  border-radius:7px;background:#1B1F3B;color:#fff;font-size:11px;
  font-weight:800;line-height:1.3;white-space:nowrap}
/* moving: one line per metric from its flag down to the axis; the surface
   ring keeps it legible across the saturated bands */
.mxz-ln{position:absolute;bottom:0;width:3px;margin-left:-1.5px;
  border-radius:2px 2px 0 0;background:#4E6D8C;
  box-shadow:0 0 0 1px rgba(255,255,255,.92)}
.mxz-ln.is-r1{top:4px}
.mxz-ln.is-r2{top:31px}
/* the flag type follows the card (cqi), so the three flags keep clear of one
   another's lines down to a 280px card: measured, see the build notes */
.mxz-flag{position:absolute;top:0;padding:3px clamp(4px,1.9cqi,8px);
  background:#fff;border:1.6px solid #4E6D8C;
  font-size:clamp(9.5px,3.3cqi,11.5px);font-weight:800;line-height:1.3;
  color:var(--ink);white-space:nowrap}
.is-l>.mxz-flag{right:1px;border-radius:8px 2px 2px 8px}
.is-r>.mxz-flag{left:1px;border-radius:2px 8px 8px 2px}
/* where each line started, shown only while nothing is moving */
.mxz-gh{position:absolute;top:58px;bottom:0;width:0;margin-left:-1px;
  border-left:2px dashed rgba(78,109,140,.8)}
/* ... and which way each one went */
.mxz-go{position:absolute;top:90px;height:0;z-index:1;
  border-top:2px solid rgba(78,109,140,.95)}
.mxz-go.is-lo{top:103px}
.mxz-go::after{content:"";position:absolute;top:-5px;right:1px;
  border:4px solid transparent;border-right:0;
  border-left:7px solid rgba(78,109,140,.95)}
.mxz-go.is-rev::after{right:auto;left:1px;border-left:0;
  border-right:7px solid rgba(78,109,140,.95)}
.mxz.live .mxz-gh,.mxz.live .mxz-go{display:none}
.mxz-axis{position:relative;height:16px;border-top:1px solid rgba(27,31,59,.16)}
/* the scale, its unit and the zone key are read, not decoration, so they
   wear --muted (6:1 on the card); --muted-2 measured 2.8:1 here */
.mxz-axis span{position:absolute;top:5px;transform:translateX(-50%);
  font-size:10.5px;font-weight:700;color:var(--muted)}
.mxz-unit{margin-top:4px;text-align:center;font-size:10.5px;font-weight:700;
  color:var(--muted)}
.mxz-cap{margin:14px 0 6px;font-size:11.5px;font-weight:800;
  color:var(--muted);letter-spacing:.01em}
.mxz-lgs{display:flex;flex-wrap:wrap;gap:5px 14px;margin:0}
.mxz-lg{display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--muted);line-height:1.4;white-space:nowrap}
.mxz-lg i{flex:none;width:9px;height:9px;border-radius:3px}
.mxz-lg b{font-weight:800;color:var(--ink)}
.mxz-lg em{font-style:normal}
/* the entrance (round 20), kept: the convention builds first (bands grow in,
   staggered), then the columns and the three lines, then the MLSS rule draws
   down through both. Gated on .go (IntersectionObserver) so it plays when
   seen, and on .arm + no-preference so no-JS and reduced-motion stay static. */
@media(prefers-reduced-motion:no-preference){
  /* .arm is stamped by the driver before observing, so a page without JS
     never hides anything; .go arrives on intersection and plays it */
  .mxz.arm .mxz-band{transform:scaleX(0);transform-origin:left}
  .mxz.arm.go .mxz-band{animation:mxzGrow .65s cubic-bezier(.22,1,.36,1) forwards}
  .mxz.arm.go .mxz-band:nth-child(2){animation-delay:.07s}
  .mxz.arm.go .mxz-band:nth-child(3){animation-delay:.14s}
  .mxz.arm.go .mxz-band:nth-child(4){animation-delay:.21s}
  .mxz.arm.go .mxz-band:nth-child(5){animation-delay:.28s}
  .mxz.arm.go .mxz-band:nth-child(6){animation-delay:.35s}
  .mxz.arm .mxz-field,.mxz.arm .mxz-axis,.mxz.arm .mxz-unit,
  .mxz.arm .mxz-ln,.mxz.arm .mxz-gh,.mxz.arm .mxz-go{opacity:0}
  .mxz.arm.go .mxz-field,.mxz.arm.go .mxz-axis,.mxz.arm.go .mxz-unit{
    animation:mxsIn .5s ease forwards .45s}
  .mxz.arm.go .mxz-ln,.mxz.arm.go .mxz-gh,.mxz.arm.go .mxz-go{
    animation:mxsIn .45s ease forwards .8s}
  .mxz.arm .mxz-mark{transform:scaleY(0);transform-origin:top}
  .mxz.arm.go .mxz-mark{animation:mxzDrop .55s cubic-bezier(.22,1,.36,1) forwards .6s}
  .mxz.arm .mxz-mark b{opacity:0}
  .mxz.arm.go .mxz-mark b{animation:mxsIn .4s ease forwards 1.1s}
}
@keyframes mxzGrow{to{transform:scaleX(1)}}
@keyframes mxzDrop{to{transform:scaleY(1)}}
/* a narrow card: units drop under their value, the legend goes two across,
   and the longest flag sheds the word the scale already carries */
@container (max-width:430px){
  .mxz-tiles{gap:6px}
  .mxz-tile{padding:8px 9px}
  .mxz-tile b{font-size:19px}
  .mxz-tile i{grid-column:1/-1}
  .mxz-lgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
  .mxz-lg{font-size:11px}
  .mxz-x{display:none}
}

/* R3: the events his copy names, under the chart rather than inside a band
   where a long line would collide with its neighbour */
.mx-rbands{display:grid;gap:7px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--border)}
.mxr-ex{display:grid;grid-template-columns:auto auto 1fr;gap:4px 8px;
  align-items:baseline;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mxr-ex i{width:10px;height:10px;border-radius:3px;align-self:center}
.mxr-ex b{font-weight:800;color:var(--ink);white-space:nowrap}
@media(max-width:420px){.mxr-ex{grid-template-columns:auto 1fr}
  .mxr-ex b{white-space:normal}}

/* R4: the interactive. The sliders are the control, so they read as one. */
.mxm-ctls{display:grid;gap:14px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border)}
@media(min-width:520px){.mxm-ctls{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 22px}}
.mxm-ctl{display:grid;gap:2px;min-width:0}
.mxm-ctl label{font-size:12px;font-weight:800;color:var(--muted-2);
  letter-spacing:.01em}
.mxm-ctl output{font-size:12.5px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.mxm-ctl output b{font-size:17px;font-weight:800;color:var(--ink);
  margin-right:3px}
.mxm-range{-webkit-appearance:none;appearance:none;width:100%;height:40px;
  margin:0;background:transparent;cursor:pointer;display:block}
.mxm-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,#4E6D8C 0 var(--mxp,50%),
    rgba(27,31,59,.14) var(--mxp,50%) 100%)}
.mxm-range::-moz-range-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,#4E6D8C 0 var(--mxp,50%),
    rgba(27,31,59,.14) var(--mxp,50%) 100%)}
.mxm-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:999px;background:#fff;
  border:3px solid #4E6D8C;box-shadow:0 6px 16px -8px rgba(20,28,46,.7);
  transition:transform .12s ease,border-color .2s ease}
.mxm-range::-moz-range-thumb{width:22px;height:22px;border-radius:999px;
  background:#fff;border:3px solid #4E6D8C;box-sizing:border-box;
  box-shadow:0 6px 16px -8px rgba(20,28,46,.7);
  transition:transform .12s ease,border-color .2s ease}
.mxm-range:active::-webkit-slider-thumb{transform:scale(.92);
  border-color:#E6261C}
.mxm-range:active::-moz-range-thumb{transform:scale(.92);border-color:#E6261C}
.mxm-range:focus-visible{outline:2px solid #4E6D8C;outline-offset:4px;
  border-radius:999px}
[data-mlss] .mxm-mark{opacity:0;animation:mxsIn .6s ease forwards .35s}

/* R5: the constant-load chart sits in the problem section's right column */
.mx-probfig{margin:0;min-width:0;align-self:center}

/* R6: hub and spoke. The ring is a 3x3 grid, the hub the middle cell, and the
   centre is the one thing that never moves. */
.mxh-wrap{position:relative;display:grid;gap:clamp(8px,1.4vw,16px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);
  grid-template-rows:repeat(3,minmax(0,auto));align-items:center;
  justify-items:center;padding:clamp(4px,1vw,10px) 0}
.mxh-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none}
.mxh-chip{position:relative;z-index:1;background:#fff;
  border:1px solid var(--border);border-radius:999px;padding:9px 14px;
  font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;
  line-height:1.3;box-shadow:0 10px 24px -20px rgba(20,28,46,.8);
  opacity:0;animation:mxhIn .55s cubic-bezier(.22,1,.36,1) forwards}
.mxh-chip:nth-child(2){grid-column:1;grid-row:1}
.mxh-chip:nth-child(3){grid-column:2;grid-row:1}
.mxh-chip:nth-child(4){grid-column:3;grid-row:1}
.mxh-chip:nth-child(5){grid-column:1;grid-row:2}
.mxh-chip:nth-child(6){grid-column:3;grid-row:2}
.mxh-chip:nth-child(7){grid-column:1;grid-row:3}
.mxh-chip:nth-child(8){grid-column:3;grid-row:3}
.mxh-hub{position:relative;z-index:2;grid-column:2;grid-row:2;
  background:var(--ink);color:#fff;border-radius:18px;
  padding:clamp(12px,1.5vw,18px) clamp(12px,1.6vw,20px);text-align:center;
  box-shadow:0 26px 54px -30px rgba(20,28,46,.9);
  opacity:0;animation:mxhIn .6s cubic-bezier(.22,1,.36,1) forwards}
.mxh-lines{opacity:0;animation:mxsIn .6s ease forwards .35s}
.mxh-kicker{display:block;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-bottom:7px;line-height:1.35}
.mxh-hub b{display:grid;gap:3px;font-size:13px;font-weight:800;line-height:1.3}
.mxh-hub b i{font-style:normal;font-size:16px;color:#FF7A70;line-height:1}
@keyframes mxhIn{from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:scale(1)}}
@media(max-width:640px){
  /* the ring collapses: the definition first, then everything that varies */
  .mxh-wrap{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;gap:8px}
  .mxh-chip{grid-column:auto!important;grid-row:auto!important;width:100%}
  .mxh-hub{grid-column:1/-1;grid-row:auto;order:-1;margin-bottom:4px}
  .mxh-lines{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mxh-chip,.mxh-hub,.mxh-lines,
  .mx-zoneviz .mxz-dot,.mx-zoneviz .mxz-mark,[data-mlss] .mxm-mark{
    animation:none;opacity:1}
}
/* ===== accumulation index (mxn-): his four production rows ===== */
/* this page is the accumulation side, so the captured clearance curve drops
   back to context: it is only there to show the reader where clearance ends
   and net progressive accumulation begins, which is MLSS */
.mxn-rec{stroke:rgba(27,31,59,.3);stroke-width:3.4}
.mxn-plot{position:relative;min-width:0}
.mxn-plot svg{width:100%;height:auto;display:block}
/* Every label size in this page's SVGs is a FIXED unit, never derived from
   --mxfs. The page raises that variable from 19px to 25px on a phone while
   the viewBox stays put, which is how the earlier pages overflowed their
   boxes (Igor 2026-09-09); a fixed size makes clearance width-independent. */
.mxn-cmp text,.mxn-perf text{font-family:Manrope,-apple-system,system-ui,sans-serif}
/* Every other chart on the page carries an inline SVG <style> holding
   `.mp-chart text{font-size:var(--mxfs,22px)}`, and an SVG <style> is
   DOCUMENT-wide, not scoped to its own svg. That selector is (0,1,1), so a
   bare `.mxn-t{}` at (0,1,0) loses and the label falls back to the variable
   this page must not depend on. Every label rule below therefore carries two
   classes plus the type selector, which out-specifies it. */
.mxn-plot text.mxn-t{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.mxn-plot text.mxn-al{font-size:21px;font-weight:800}
.mxn-plot text.mxn-lab{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.mxn-plot .mxq-flag text{font-size:21px}
.mxn-cmp,.mxn-perf{overflow:visible}
.mxn-read b,.mxn-read2 b{font-variant-numeric:tabular-nums}
.mxn-read2 em{justify-self:start}
@media(max-width:640px){.mxn-read,.mxn-read2{grid-template-columns:1fr}}
/* his row 2 carries four states, one more than the family's three, and at 390
   the flex row squeezed them until "Cyclist" clipped to "Cyclis" (caught in
   the 390 screenshot review). It wraps to two rows instead. */
[data-ainorm] .mxf-pills{flex-wrap:wrap;width:100%;border-radius:18px}
[data-ainorm] .mxf-pill{flex:0 0 auto}
/* his row 2: the four variables his guardrail names, as the layer that
   changes above the normalization. A cell that differs from the baseline case
   is marked, so "inputs moved, index did not" is visible rather than stated. */
.mxn-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  margin:2px 0 10px}
.mxn-in{min-width:0;border:1px solid var(--border);border-radius:10px;
  padding:7px 9px;background:var(--surface-2);
  transition:border-color .35s ease,background .35s ease}
.mxn-in small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;
  overflow-wrap:anywhere}
.mxn-in b{font-size:13.5px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* the two stat cards under his row 2 chart became one line: the comparison is
   the content, its weight was competing with the chart (Igor 2026-09-09) */
.mxn-sum{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;
  margin:10px 2px 0;font-size:11.5px;font-weight:600;line-height:1.5;
  color:var(--muted)}
.mxn-sum b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
/* his row 3: the combination his note names, one compact row per athlete,
   so index, the athlete's own limit and the resulting time read together */
.mxn-athl{margin:12px 2px 0}
.mxn-arow{display:grid;grid-template-columns:1.15fr .7fr 1fr 1fr;gap:10px;
  align-items:center;padding:6px 0;font-size:12px}
.mxn-arow+.mxn-arow{border-top:1px solid var(--border)}
.mxn-arow.mxn-ahead{font-size:9.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);padding-bottom:0}
.mxn-ahead+.mxn-arow{border-top:1px solid var(--border)}
.mxn-an{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);
  min-width:0}
.mxn-an i{width:10px;height:10px;border-radius:3px;flex:none}
.mxn-arow b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mxn-arow b small{font-weight:600;color:var(--muted);font-size:10px;
  margin-left:4px}
.mxn-fine{margin:8px 0 0;font-size:10.5px;font-weight:600;color:var(--muted)}
/* SVGElement has no `hidden` IDL property, so visibility here is a class */
.mxn-off{display:none}
@media(max-width:620px){
  .mxn-arow{grid-template-columns:1fr .6fr .9fr .9fr;gap:6px;font-size:11px}
  .mxn-arow b small{display:block;margin:1px 0 0}
}
/* the slim scale: same component, less weight, used where the card is already
   carrying an input layer and a chart */
.mxi-index.mxn-slim{margin:11px 2px 2px}
.mxn-slim .mxi-ihead{font-size:10.5px;margin-bottom:7px}
.mxn-slim .mxi-ihead small{font-size:9.5px}
.mxn-slim .mxi-track{height:7px}
.mxn-slim .mxi-mark{min-width:34px;padding:4px 8px;font-size:12.5px;
  border-width:1.6px}
.mxn-slim .mxi-ticks{font-size:9.5px;margin-top:6px}
.mxn-in.chg{border-color:rgba(230,38,28,.45);background:rgba(230,38,28,.055)}
.mxn-in.chg b{color:#E6261C}
.mxn-norm{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0 0 8px;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted)}
.mxn-norm svg{width:12px;height:12px;flex:none}

/* his row 1 production note: "Higher index = faster accumulation; lower index
   = slower accumulation". It reads under the scale rather than only in prose,
   so it is on screen wherever an index is. */
.mxn-dir{display:flex;justify-content:space-between;gap:12px;margin-top:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);opacity:.85}
/* his row 3 plays its two slopes once the board scrolls into view */
@media(prefers-reduced-motion:no-preference){
  .mxn-board.arm .mxs-draw,.mxn-board.arm .mxs-peak,.mxn-board.arm .mxs-fill{
    animation-play-state:paused}
  .mxn-board.arm.go .mxs-draw,.mxn-board.arm.go .mxs-peak,
  .mxn-board.arm.go .mxs-fill{animation-play-state:running}
}
/* ===== LT1 (mxl-): his seven production rows ===== */
.mxl-plot{position:relative;min-width:0}
.mxl-plot svg{width:100%;height:auto;display:block;overflow:visible}
/* Same trap as the accumulation page: every captured chart inlines
   `.mp-chart text{font-size:var(--mxfs,22px)}` inside its own <svg>, and an
   SVG <style> is DOCUMENT-wide. That selector is (0,1,1), so a bare
   `.mxl-t{}` at (0,1,0) loses and the label silently falls back to the
   viewport-derived variable this page must not depend on. Every label rule
   below therefore carries two classes plus the type selector. */
.mxl-plot text.mxl-t{font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums}
/* the rotated unit label needs THREE classes: every chart on this page, the
   hand-built ones included, inlines `.mp-chart text.mxc-unit{font-size:
   var(--mxfu,25px)}` and an SVG <style> is document-wide. At equal (0,2,1)
   specificity the inline block wins on document order, so the label kept
   tracking the viewport and bled 2.1px at 1440 but 3.0px at 390. */
.mxl-plot:not(.mxl-opl) .mp-chart text.mxc-unit,
.mxl-hcard .mp-chart text.mxc-unit{font-size:24px}
.mxl-plot text.mxl-zl{font-size:22px;font-weight:800}
.mxl-plot text.mxl-bl{font-size:20px;font-weight:700}
.mxl-plot text.mxl-zv{font-size:26px;font-variant-numeric:tabular-nums}
.mxl-plot text.mxl-zh,.mxl-plot tspan.mxl-zh{font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums}
/* His row 7 is the CAPTURED chart at full card width, where the family's own
   --mxfs is calibrated per card so labels render at a constant CSS size. A
   fixed unit size there rendered the flag at 31px against 15px everywhere
   else (measured at 1440), so that one card keeps the capture's mechanism and
   only the hand-built plots take fixed units. */
.mxl-plot:not(.mxl-opl) .mxq-flag text{font-size:21px}
.mxl-hcard .mx-smodel text.mxl-t{font-size:20px;font-weight:700}
.mxl-hcard .mxq-flag text{font-size:21px}
.mxl-read b{font-variant-numeric:tabular-nums}
.mxl-read em{justify-self:start}
/* three readouts in a two-column grid left the third in a half-width cell
   whose trailing note wrapped to three lines; it takes the full row instead */
.mxl-read span:nth-child(3){grid-column:1/-1}
.mxl-read span:nth-child(3) em{margin-left:2px}
[data-ltorig] .mxl-read{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-ltorig] .mxl-read span:nth-child(3){grid-column:auto}
@media(max-width:640px){
  .mxl-read,[data-ltorig] .mxl-read{grid-template-columns:1fr}
}
/* his row 5 has four workflows and row 4 three long pill labels, so the pill
   row wraps at every width rather than squeezing the labels: the card is only
   about 525px wide inside the two-column sections even at 1440 (the same
   clipping the accumulation page hit, Igor 2026-09-09) */
[data-ltrise] .mxf-pills,[data-ltstd] .mxf-pills,[data-ltzone] .mxf-pills{
  flex-wrap:wrap;width:100%;border-radius:18px}
[data-ltrise] .mxf-pill,[data-ltstd] .mxf-pill,[data-ltzone] .mxf-pill{
  flex:0 0 auto}
/* the sliders: the family's control block, without the top rule where the
   controls sit ABOVE the chart rather than under it */
.mxl-ctls{display:grid;gap:12px;margin:2px 0 4px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
/* the control block is airier than this card needs: it sits above the chart
   rather than under it, so the slider track and the value can both come down
   a notch (Igor 2026-09-09, the card was taller than its copy column) */
.mxl-ctls .mxm-range{height:32px}
.mxl-ctls .mxm-ctl output b{font-size:15px}
.mxl-ctls .mxm-ctl label{font-size:11.5px}
@media(max-width:760px){
  .mxl-ctls{grid-template-columns:1fr}
}
/* his row 5: what the raw input actually was, named above the plot so the
   reader never mistakes the grey samples for the modelled reference */
/* his row 3 note: name the rule this card reads by, so it is visibly ONE rule
   among several rather than "how LT1 behaves" */
.mxl-fine{margin:8px 2px 0;font-size:10.5px;font-weight:600;line-height:1.5;
  color:var(--muted)}
/* three stat boxes cost 128px on a card already taller than its copy column
   (Igor 2026-09-09). One slim line carries the same three facts in a quarter
   of the height, the treatment the accumulation index page uses. */
.mxl-sum{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 18px;margin:10px 2px 0;
  font-size:12px;font-weight:600;line-height:1.5;color:var(--muted)}
.mxl-sum b{font-size:15px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mxl-sum em{font-style:normal;font-weight:700;color:#E6261C;margin-left:6px}
@media(max-width:640px){.mxl-sum{gap:2px 12px;font-size:11.5px}}
/* min-height: the remote test's effort chips are taller than a line of text,
   and without it the card grew 8px on that button and the page moved under
   the reader every time the buttons cycled (measured 2026-10-05) */
.mxl-src{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  margin:0 2px 10px;min-height:28px}
@media(max-width:640px){.mxl-src{min-height:46px}}
.mxl-src small{font-size:9.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted)}
.mxl-src span{font-size:12.5px;font-weight:700;color:var(--ink)}
/* his row 5: the remote efforts, shown as the inputs they are */
.mxl-effs{display:inline-flex;flex-wrap:wrap;gap:6px}
.mxl-eff{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}
.mxl-eff b{font-size:12px;font-weight:800;color:var(--ink)}
/* His row 5 since 2026-10-04: on the remote test there is no lactate curve of
   the test at all, so that curve fades out and his sentence takes the empty
   upper left of the plot. HTML over the plot, not SVG text: at phone width
   the chart's own labels are too small for a sentence that long, and an
   overlay moves nothing on the page when it appears. The slate rule ties it
   to the normalized curve, which is the thing it describes. */
.mxl-plot .mxl-rawg{transition:opacity .45s ease}
.mxl-plot .mxl-rawg.mxl-gone{opacity:0}
/* 62% wide, not narrower: the flag under it starts 40% down the plot, so
   the note has to stay at three lines or fewer at every card width. At 50%
   it ran to four lines on the 350px plot (1024) and sat 3px into the flag
   (measured 2026-10-05). The curve only enters the upper part of the plot
   past 87% across, so the width is free. */
.mxl-rnote{position:absolute;left:13%;top:8%;width:min(62%,330px);margin:0;
  padding-left:10px;border-left:3px solid #4E6D8C;font-size:12px;
  font-weight:700;line-height:1.45;color:var(--ink);opacity:0;
  transition:opacity .45s ease;pointer-events:none}
.mxl-rnote.on{opacity:1}
@media(max-width:640px){
  .mxl-rnote{left:15%;top:6%;width:66%;padding-left:8px;font-size:10px;
    line-height:1.4}
}
@media(prefers-reduced-motion:reduce){
  .mxl-plot .mxl-rawg,.mxl-rnote{transition:none}
}
/* his section 5 bulleted rule, the one piece of his copy that is a list */
/* the copy column is a grid with a 14px gap, so the list's own bottom
   margin stacked on top of it and left 32px after the bullets against
   14px everywhere else (Igor 2026-09-10, measured) */
ul.mxl-std{margin:0;padding:0;list-style:none;display:grid;gap:10px}
ul.mxl-std li{position:relative;padding-left:26px;font-size:15.5px;
  line-height:1.62;color:var(--muted)}
ul.mxl-std li:before{content:"";position:absolute;left:6px;top:.62em;
  width:8px;height:8px;border-radius:3px;background:#E6261C}
ul.mxl-std li b{color:var(--ink);font-weight:800}
@media(max-width:640px){ul.mxl-std li{font-size:14.5px}}
/* his row 7 sits in the closing section, full width under the copy */
/* SVGElement has no `hidden` IDL property, so visibility is a class */
.mxl-off{display:none}
/* his row 2 note is a SEQUENCE, "create agreement first, then expose
   operational ambiguity". The curve draws, the highlight and the broad arrow
   land at 1.45s (the agreement), and his two questions arrive at 2.5s. Under
   reduced motion all three are simply present. */
.mx-smodel .mxl-q{opacity:0;animation:mxsIn .6s ease forwards 2.5s}
@media(prefers-reduced-motion:reduce){
  .mx-smodel .mxl-q{animation:none;opacity:1}
}
/* the family's closer visual is a 340px gauge column, which squeezed this
   page's chart card to 42px and collapsed its plot to zero width (caught in
   the 1440 probe). His row 7 is a full-width interactive chart, so it takes
   the stacked grid's whole column. */
.mx-closeviz.mxl-cviz{width:100%;justify-items:stretch;min-width:0}
.mx-closeviz.mxl-cviz .mx-chartcard{width:100%;min-width:0}
/* three sliders in the closer's narrower column: one per row below 1100px so
   a label and its value never collide */
@media(max-width:1100px){.mxl-cviz .mxl-ctls{grid-template-columns:1fr}}
/* His row 7 sits in the closer's narrower column, 430px at 1440, where the
   family's label units rendered at 8.1px against 10 to 11.4px on every other
   card on this page (measured 2026-10-05). Larger units bring them level
   while the closer is two columns; stacked, the card is full width and the
   family's own units are right again. */
@media(min-width:901px){
  .mxl-cviz .mxl-plot{--mxfs:28px}
  .mxl-cviz .mxl-plot:not(.mxl-opl) .mxq-flag text{font-size:27px}
  .mxl-cviz .mxl-plot:not(.mxl-opl) .mp-chart text.mxc-unit{font-size:31px}
}
/* "device error" became "lactate meter measurement error" (Sebastian
   2026-10-04), which made two pill labels twice as long: five pills wrapped
   into four ragged rows again, the thing Igor sent back on 2026-09-10. These
   two cards lay their pills on a grid instead, every label breaking before
   its value: three across on row 4, three protocols over two meter errors on
   row 6. */
[data-ltrise] .mxf-pills,[data-ltzone] .mxf-pills{display:grid;gap:4px;
  grid-template-columns:repeat(6,minmax(0,1fr))}
[data-ltrise] .mxf-pill,[data-ltzone] .mxf-pill{grid-column:span 2;
  padding:7px 8px;border-radius:14px;font-size:12.5px;line-height:1.3;
  text-align:center}
[data-ltzone] .mxf-pill:nth-child(n+4){grid-column:span 3}
[data-ltrise] .mxf-pill .mxl-pv,[data-ltzone] .mxf-pill .mxl-pv{display:block}
/* three across is five lines a pill at phone width; row 4 has only three, so
   there they stack as one-line rows instead */
@media(max-width:640px){
  [data-ltrise] .mxf-pills{grid-template-columns:minmax(0,1fr)}
  [data-ltrise] .mxf-pill{grid-column:auto}
  [data-ltrise] .mxf-pill .mxl-pv{display:inline}
}
.mxl-opl svg{overflow:visible}
/* the reveal, once the board scrolls into view */
@media(prefers-reduced-motion:no-preference){
  .mxl-board.arm .mxs-draw,.mxl-board.arm .mxs-peak,.mxl-board.arm .mxs-fill,
  .mxl-board.arm .mxl-q{animation-play-state:paused}
  .mxl-board.arm.go .mxs-draw,.mxl-board.arm.go .mxs-peak,
  .mxl-board.arm.go .mxs-fill,.mxl-board.arm.go .mxl-q{
    animation-play-state:running}
}

/* ===== heart rate page (mxp-) ============================================
   Same trap as every hand-built plot in this family: each chart inlines
   `.mp-chart text{font-size:var(--mxfs,22px)}` inside its own <svg>, and an
   SVG <style> is DOCUMENT-wide at (0,1,1). A bare `.mxp-t{}` at (0,1,0)
   loses, so every label rule below carries two classes plus the type
   selector, and the rotated unit label needs three. */
.mxp-plot{position:relative;min-width:0}
.mxp-plot svg{width:100%;height:auto;display:block;overflow:visible}
.mxp-plot text.mxp-t{font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums}
.mxp-plot text.mxp-s{font-size:18px;font-weight:600}
.mxp-plot text.mxp-h{font-size:23px}
.mxp-plot text.mxp-v,.mxp-plot tspan.mxp-v{font-size:25px;
  font-variant-numeric:tabular-nums}
.mxp-plot text.mxp-big{font-size:58px;font-variant-numeric:tabular-nums}
.mxp-plot tspan.mxp-u{font-size:19px;font-weight:700}
.mxp-plot text.mxp-un{font-size:16px;font-weight:700}
.mxp-plot text.mxp-bt{font-size:18px;font-weight:700}
.mxp-plot .mp-chart text.mxc-unit{font-size:24px}
.mxp-plot .mxq-flag text{font-size:21px}
/* his row 3 translation row and his row 4 readout */
/* one column per band, each stacking the zone name, its watts and its
   beats: laid out as one flex line the three ran ragged across two rows */
.mxp-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 16px;margin:12px 2px 0;line-height:1.45}
.mxp-sum span{display:grid;gap:1px;min-width:0}
.mxp-sum small{display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.mxp-sum small u{text-decoration:none;width:8px;height:8px;border-radius:2px;
  flex:none}
.mxp-sum b{font-size:15px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mxp-sum i,.mxp-val i{font-style:normal;font-variant-numeric:tabular-nums}
.mxp-sum em{font-style:normal;font-size:12px;font-weight:700;color:#E6261C}
@media(max-width:520px){
  .mxp-sum{grid-template-columns:1fr;gap:6px}
  .mxp-sum span{grid-template-columns:auto auto 1fr;align-items:baseline;
    gap:8px}
}
/* "Display the resulting PWC150 value beside the graph" */
.mxp-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  margin:12px 2px 0;padding:10px 14px;border-radius:12px;
  background:rgba(78,109,140,.07);border:1px solid rgba(78,109,140,.26)}
.mxp-val span{font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.mxp-val b{font-size:30px;font-weight:800;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mxp-val u{text-decoration:none;font-size:14px;font-weight:800;
  color:var(--muted)}
.mxp-val em{flex:1 1 100%;font-style:normal;font-size:11.5px;font-weight:600;
  color:var(--muted)}
.mxp-fine{margin:8px 2px 0;font-size:10.5px;font-weight:600;line-height:1.5;
  color:var(--muted)}
/* the pill row wraps: three long assessment labels never fit one line in a
   tab column that is about 525px wide even at 1440 */
[data-hrpl] .mxf-pills,[data-hrage] .mxf-pills{flex-wrap:wrap;width:100%;
  border-radius:18px}
[data-hrpl] .mxf-pill,[data-hrage] .mxf-pill{flex:0 0 auto}
/* his row 2 is the FAMILY gauge card with a pill row under its value rows */
.mxq-side .mx-gcard{width:100%}
.mxp-gauge .mxf-pills{margin:14px 0 0}
.mxp-gauge .mx-gx{overflow:visible}
/* 6 units, so the scale ends render just under the value row's 13.5px
   rather than above it: the dial is 300px wide for a 170-unit viewBox */
.mxp-gauge text.mxp-ge{font-size:6px;font-weight:700;
  font-variant-numeric:tabular-nums}
/* his row 5, back in the closer's right-hand column. The diagram is drawn
   on a 640-unit canvas rather than the family's 1000, because the column is
   only about 430px wide: at 1000 the panel labels rendered at 8px. Fixed
   units, not --mxfs, because these labels sit inside boxes that scale with
   the drawing. */
/* 17 and 26 units render about 10.5 and 16px in this column, which is the
   same range as the family's own legend keys (clamp 9.5 to 12px). Bumped to
   18.5/28 they left "training zones" 1.6px clear of its panel. */
.mxp-plot text.mxp-eb2{font-size:17px;font-weight:700;letter-spacing:.015em}
.mxp-plot text.mxp-ev2{font-size:26px;font-variant-numeric:tabular-nums}
.mxp-plot text.mxp-ec2{font-size:18px;font-weight:700}
.mxp-plot text.mxp-eq2{font-size:14px;font-weight:600}
/* the zone rows, in the Training Zone Builder's idiom: name above, value
   below, with a colour bar beside them */
.mxp-plot text.mxp-ez1{font-size:15px;font-weight:700}
.mxp-plot text.mxp-ez2{font-size:17px;font-variant-numeric:tabular-nums}
/* the closer's card takes the full column, like the LT1 page's */
.mx-closeviz.mxp-cviz{width:100%;justify-items:stretch;min-width:0}
.mx-closeviz.mxp-cviz .mx-chartcard{width:100%;min-width:0}
/* the hero card and the meter carry no legend, so the head row would render
   as an empty strip above them */
.mxp-hcard,.mxp-mcard,.mxp-ecard{margin-top:2px}

/* ===== economy page (mxe-) ==============================================
   Two canvas families on this page and they are sized by different rules.
   The stacked energy chart is the family's 1000-unit plot, so its labels
   ride --mxfs and stay a constant CSS size at any width. The four diagram
   cards are 640-unit canvases inside narrow columns, where a constant CSS
   size would overflow their boxes, so those labels are fixed user units and
   scale with the card. Every rule carries two classes plus the type
   selector, because each chart inlines `.mp-chart text{font-size:...}` and
   an SVG <style> is document-wide at (0,1,1). */
.mxe-plot{position:relative;min-width:0}
.mxe-plot svg{width:100%;height:auto;display:block;overflow:visible}
/* the 1000-unit plot */
.mxe-plot text.mxe-xt,.mxe-plot text.mxe-xu{font-size:var(--mxfs,22px)}
.mxe-plot text.mxe-s1{font-size:calc(var(--mxfs,22px) * 1.14);
  font-weight:800}
.mxe-plot text.mxe-s2{font-size:calc(var(--mxfs,22px) * 1.02)}
.mxe-plot text.mxe-s3{font-size:calc(var(--mxfs,22px) * .92)}
.mxe-plot text.mxe-gt1,.mxe-plot text.mxe-gt2{
  font-size:calc(var(--mxfs,22px) * 1.02);font-weight:800}
.mxe-plot .mp-chart text.mxc-unit{font-size:var(--mxfu,25px)}
/* the 640-unit diagram cards */
.mxe-plot text.mxe-n1{font-size:20px;font-weight:800;letter-spacing:-.01em}
.mxe-plot text.mxe-n2{font-size:20px;font-variant-numeric:tabular-nums}
.mxe-plot text.mxe-n3{font-size:17px;font-weight:700}
.mxe-plot text.mxe-n4{font-size:15px;font-weight:700}
.mxe-plot text.mxe-n5{font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums}
.mxe-plot text.mxe-b1{font-size:20px}
.mxe-plot text.mxe-b2{font-size:18px}
.mxe-plot text.mxe-b3{font-size:16px}
.mxe-plot text.mxe-b4{font-size:14px;font-weight:700}
.mxe-plot text.mxe-b6{font-size:15px;font-weight:700}
.mxe-plot text.mxe-b5{font-size:18px}
.mxe-plot text.mxe-bq{font-size:46px}
/* the state groups cross-fade rather than cut */
.mxe-plot [data-eg]{transition:opacity .55s ease}
@media(prefers-reduced-motion:reduce){.mxe-plot [data-eg]{transition:none}}
/* two controls on the hero card, his sport slider and his Economy switch */
[data-ecohero] .mxf-pills,[data-ecostack] .mxf-pills,
[data-ecoath] .mxf-pills,[data-ecobr] .mxf-pills,
[data-ecoprac] .mxf-pills,[data-ecoeq] .mxf-pills{
  flex-wrap:wrap;width:100%;border-radius:18px}
[data-ecohero] .mxf-pill,[data-ecostack] .mxf-pill,
[data-ecoath] .mxf-pill,[data-ecobr] .mxf-pill,
[data-ecoprac] .mxf-pill,[data-ecoeq] .mxf-pill{flex:0 0 auto}
[data-ecohero] .mxf-pills.mxe-st{margin-top:0}
/* the three-cell readout under the stacked chart */
.mxf-dread.mxe-tri{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
/* the stacked sections (his 3, 4 and 5). .mxq-side centres itself, which is
   right beside the short copy in #not and wastes a screen of space beside
   these four-paragraph sections, so here the card starts at the heading. */
.mxe-side{align-self:start}
.mxe-shead{min-width:0}
.mxe-shead .tst-head{margin:0 0 16px;max-width:none}
/* the closer, same treatment: heading in its own row, its own gap, so the
   card starts at the first paragraph and the gap matches the other
   left-aligned sections on the page (measured 30 and 38px) */
@media(min-width:901px){
  .mx-closegrid.mxe-crows{grid-template-rows:auto minmax(0,1fr);row-gap:0}
  .mx-closegrid.mxe-crows>.mxe-shead{grid-column:1;grid-row:1}
  .mx-closegrid.mxe-crows>.mx-closewrap{grid-column:1;grid-row:2}
  .mx-closegrid.mxe-crows>.mx-closeviz{grid-column:2;grid-row:2}
  .mx-closegrid.mxe-crows>.mxe-shead .tst-head{margin:0 0 34px}
}
.mxe-shead .tst-head .sec-title{margin-bottom:0}
.tst-head.mxe-chead{max-width:1040px;margin:0 auto 50px;padding-bottom:0}
.tst-head.mxe-chead .sec-title{margin-bottom:0}
@media(max-width:1100px){.tst-head.mxe-chead{max-width:780px}}
/* two columns, two rows: the heading takes the left column's first row on
   its own, so the card starts level with the first PARAGRAPH rather than
   with the headline (Igor 2026-09-14). Below the breakpoint the three
   children stack in source order, which is already right. */
@media(min-width:1040px){
  .mx-probgrid.mxe-stack{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
  .mx-probgrid.mxe-rows{grid-template-rows:auto minmax(0,1fr)}
  .mx-probgrid.mxe-rows>.mxe-shead{grid-column:1;grid-row:1}
  .mx-probgrid.mxe-rows>.mx-probcopy{grid-column:1;grid-row:2}
  .mx-probgrid.mxe-rows>.mxe-side{grid-column:2;grid-row:2}
}
/* the full-width figure under a two-column copy block */
.mxe-wfig{margin-top:clamp(22px,2.6vw,40px);min-width:0}
.mxe-wfig .mx-chartcard{max-width:1060px;margin-inline:auto}
.mxe-wfig .mx-cap{max-width:92ch}
/* the cards whose head row carries no legend */
.mxe-bcard,.mxe-acard,.mxe-pcard,.mxe-qcard{margin-top:2px}
/* the panel's own View control, reproduced as a static label */
.mxe-view{display:inline-flex;align-items:baseline;gap:8px;margin:2px 0 10px;
  padding:7px 14px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--border)}
.mxe-view span{font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.mxe-view b{font-size:14px;font-weight:700;color:var(--ink)}
/* the closer's card takes the full column, like the LT1 and heart rate pages */
.mx-closeviz.mxe-cviz{width:100%;justify-items:stretch;min-width:0}
.mx-closeviz.mxe-cviz .mx-chartcard{width:100%;min-width:0}

/* ===== body composition (mxy-) =====
   These cards carry NO text inside their SVGs. A 1000-unit diagram card is
   350 px wide on a phone, which renders a 13-unit label at 4 px, and SVG
   text cannot wrap. So the mannequins are small self-contained SVGs that
   reflow in an HTML grid and every word on them is HTML. */
.mxy-defs{position:absolute;width:0;height:0;overflow:hidden}
.mxy-mn{width:100%;height:auto;display:block}
.mxy-plot{margin-top:12px}
/* the reflowing row of mannequins */
.mxy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));
  gap:clamp(12px,1.8vw,26px);align-items:end;margin-top:4px}
.mxy-grid.mxy-g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:end}
.mxy-cell{margin:0;display:grid;justify-items:center;text-align:center;
  gap:2px;min-width:0}
.mxy-cell .mxy-mn{max-width:104px}
.mxy-cell b{margin-top:12px;font-size:14px;font-weight:800;color:var(--ink);
  line-height:1.3;letter-spacing:-.01em}
.mxy-cell span{font-size:12.5px;font-weight:600;color:#5d5f66;line-height:1.45}
/* the hero: ONE body with leader lines to a column of callouts, the app
   preview's own layout (his row 1: "existing mannequin preview as layout
   reference only"). The figure is a fixed-ratio SVG that spans the wrapper,
   so every callout sits at a percentage of it and the geometry holds at
   every width. The words are HTML so they wrap. */
.mxy-one{position:relative;margin-top:6px}
.mxy-onefig{max-width:none}
.mxy-co{position:absolute;left:var(--mxylab,59.5%);right:0;
  transform:translateY(-50%);display:grid;gap:1px;min-width:0;
  padding-left:10px;text-align:left;justify-items:start}
.mxy-co b{font-size:14px;font-weight:800;color:var(--ink);line-height:1.3;
  letter-spacing:-.01em}
.mxy-co span{font-size:12.5px;font-weight:600;color:#5d5f66;line-height:1.4}
.mxy-cotot b{font-size:14.5px}
.mxy-cotot span{font-size:15px;font-weight:800;color:var(--ink)}
@container (min-width:520px){
  .mxy-co b{font-size:15.5px}.mxy-co span{font-size:13.5px}
  .mxy-cotot span{font-size:17px}}
/* the hero card stops growing once the figure is big enough to read, so a
   tablet's full-width column does not turn the body into a 600px tower */
.mxy-hero{max-width:600px;margin-inline:auto}
/* his row 3: the lead figure of the two Overlooked Parts tabs, and its links */
.mx-tablead{max-width:640px;margin:8px auto 30px}
.mx-tablead .mx-cap{margin-top:12px}
.mx-leadlinks{margin-top:14px;justify-content:center}
/* his row 3 as the head of each tab card: the mannequin, that layer lit,
   and his callout beside it */
.mxy-ovh{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;
  align-items:center;padding:4px 0 14px;margin-bottom:12px;
  border-bottom:1px solid var(--border)}
.mxy-ovh .mxy-mn{max-width:78px}
.mxy-ovt{display:grid;gap:3px;min-width:0}
.mxy-ovt b{font-size:15px;font-weight:800;color:var(--ink);line-height:1.3}
.mxy-ovt span{font-size:13px;font-weight:600;color:#5d5f66;line-height:1.45}
.mxy-ovt em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#5d5f66}
/* his row 2: two lanes, a centre of mass on its wave, its label beside;
   then the one bar that only the extra fills */
.mxy-lanes{display:grid;gap:2px;margin-top:6px}
.mxy-l2{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;
  align-items:center;padding:8px 0;border-top:1px solid var(--border)}
.mxy-l2:first-child{border-top:0}
@media(min-width:560px){.mxy-l2{grid-template-columns:minmax(0,1.5fr) minmax(170px,1fr)}}
.mxy-lane{width:100%;height:auto;display:block;margin:0}
.mxy-ltxt{display:grid;gap:3px;min-width:0}
.mxy-ltxt>b{font-size:14px;font-weight:800;color:var(--ink);line-height:1.3}
.mxy-ltxt>span{font-size:12.5px;font-weight:600;color:#5d5f66;line-height:1.45}
.mxy-xbar{display:grid;gap:8px;margin-top:14px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(242,108,79,.45);background:rgba(242,108,79,.07)}
.mxy-xbar>span{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.4}
.mxy-xtrack{height:14px;border-radius:999px;background:rgba(27,31,59,.08);overflow:hidden}
.mxy-xtrack i{display:block;height:100%;background:#F26C4F;border-radius:999px}
.mxy-xbar>b{font-size:13px;font-weight:700;color:#5d5f66}
.mxy-xbar em{font-style:normal;font-size:20px;font-weight:800;color:#F26C4F;
  font-variant-numeric:tabular-nums;margin-right:6px}
.mxy-xbar small{font-size:12.5px;font-weight:600}
.mxy-cell.mxy-lac .mxy-mn{max-width:128px}
.mxy-conc{font-size:26px!important;font-weight:800!important;color:#0072BC;
  letter-spacing:-.02em;margin-top:10px!important}
/* the "same amount" chip: twelve marks, identical in both bodies */
.mxy-cell.mxy-amt{align-self:center}
.mxy-amt .mxy-dots{display:grid;grid-template-columns:repeat(3,12px);
  gap:17px;padding:22px;border-radius:16px;background:rgba(27,31,59,.04);
  border:1px solid var(--border);justify-content:center}
.mxy-amt .mxy-dots i{width:12px;height:12px;border-radius:50%;
  background:#1B1F3B;display:block}
/* the mannequin beside its callout */
.mxy-split{display:grid;gap:clamp(18px,2.6vw,36px);align-items:start}
@media(min-width:900px){
  .mxy-split{grid-template-columns:minmax(170px,212px) minmax(0,1fr)}
}
.mxy-mann{display:grid;justify-items:center;align-content:start;
  gap:12px;min-width:0}
.mxy-mann .mxy-ctitle{margin:0}
.mxy-mann .mxy-mn{max-width:132px}
@media(max-width:760px){.mxy-mann .mxy-mn{max-width:104px}}
.mxy-call{text-align:center;max-width:238px;margin-inline:auto}
.mxy-call p{margin:0;font-size:13px;line-height:1.6;color:#5d5f66;
  font-weight:600}
.mxy-mech{min-width:0}
.mxy-ctitle{margin:18px 0 0;font-size:15.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;line-height:1.4}
.mxy-mech>.mxy-ctitle:first-child{margin-top:0}
.mxy-div{margin:18px 0 0;font-size:14px;font-weight:700;color:#5d5f66;
  padding-top:14px;border-top:1px solid var(--border)}
/* a labelled bar row */
.mxy-brow{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:4px 14px;align-items:baseline;margin-top:16px}
.mxy-brow b{font-size:13.5px;font-weight:700;color:var(--ink);min-width:0}
.mxy-val{font-size:19px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mxy-track{grid-column:1/-1;display:flex;height:26px;border-radius:7px;
  background:rgba(27,31,59,.08);overflow:hidden}
.mxy-track i{display:block;height:100%;background:#E53227;
  transition:width .9s cubic-bezier(.32,.72,0,1)}
/* the carry card's baseline segment: the red is the EXTRA, so the mass
   the athlete already had must not read as the cost */
.mxy-track i.mxy-base{background:rgba(27,31,59,.52)}
/* the two average-power readouts */
.mxy-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;margin-top:14px}
.mxy-chip{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-radius:12px;background:rgba(220,38,38,.07)}
.mxy-chip b{font-size:26px;font-weight:800;color:#E53227;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mxy-chip span{font-size:12.5px;font-weight:600;color:#5d5f66;line-height:1.45}
/* in a side column (copy left, figure right) the two chips stack and the
   number never breaks from its unit */
.mxy-chip b{white-space:nowrap}
@container (max-width:640px){.mxy-chips{grid-template-columns:1fr}}
/* and the "same amount" chip takes its own row, the two bodies pair below */
@container (max-width:520px){.mxy-cell.mxy-amt{grid-column:1/-1;justify-self:center}
  .mxy-grid.mxy-g3{grid-template-columns:1fr 1fr}}
/* rows 5 and 7 as one card in the lactate section: step 1 stays one row,
   chip and two smaller bodies, whatever the column width */
/* rows 5 + 7 as one comparison: a row label column and two athletes */
.mxy-cmp{display:grid;grid-template-columns:minmax(78px,.6fr) 1fr 1fr;gap:10px 12px;
  align-items:center;margin-top:8px}
.mxy-ch{font-size:13px;font-weight:800;color:var(--ink);text-align:center}
.mxy-cl{font-size:12.5px;font-weight:700;color:#5d5f66;line-height:1.35}
.mxy-cc{display:grid;justify-items:center;text-align:center;gap:4px;min-width:0;
  padding:10px 6px;border-radius:12px;background:rgba(27,31,59,.03);
  border:1px solid var(--border)}
.mxy-cc .mxy-mn{max-width:88px}
.mxy-cc>span{font-size:12.5px;font-weight:600;color:#5d5f66;line-height:1.4}
.mxy-cv{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1;
  font-variant-numeric:tabular-nums}
.mxy-cv small{font-size:13px;font-weight:700;color:#5d5f66}
.mxy-ctrack{display:block;width:100%;height:8px;border-radius:999px;
  background:rgba(27,31,59,.08);overflow:hidden;margin-top:4px}
.mxy-ctrack i{display:block;height:100%;background:#E53227;border-radius:999px}
/* rows 5 + 7 as one figure: two tanks, the same lactate, two hero numbers,
   one shared readout */
.mxy-tanks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.mxy-tc{display:grid;justify-items:center;text-align:center;gap:4px;min-width:0}
.mxy-th{font-size:13px;font-weight:800;color:var(--ink)}
.mxy-tank{width:100%;max-width:150px;height:auto;display:block}
.mxy-tv{font-size:12.5px;font-weight:600;color:#5d5f66}
.mxy-tn{font-size:15px;font-weight:700;color:#5d5f66;margin-top:2px}
.mxy-tn em{font-style:normal;font-size:34px;font-weight:800;color:var(--ink);
  line-height:1;margin-right:4px}
.mxy-join{margin:6px auto 0;width:100%;max-width:420px;height:16px}
.mxy-join svg{width:100%;height:100%;display:block}
.mxy-read{margin:0 auto;max-width:420px;padding:12px 16px;border-radius:12px;
  background:var(--ink);color:#fff;text-align:center;display:grid;gap:2px}
.mxy-read span{font-size:12.5px;font-weight:600;opacity:.82}
.mxy-read b{font-size:16px;font-weight:800}
.mxy-cb{font-size:14px;font-weight:800;color:var(--ink);line-height:1.3;margin-top:4px}
.mxy-lkey{display:grid;gap:3px;justify-items:start;margin-top:6px;
  font-size:12.5px;font-weight:600;color:#5d5f66;text-align:left}
.mxy-lkey span{display:flex;align-items:center;gap:7px;line-height:1.35}
.mxy-lkey i{width:10px;height:10px;border-radius:3px;flex:none;display:block}
.mxy-lacg.mxy-g3{grid-template-columns:minmax(72px,.7fr) 1fr 1fr;gap:10px 14px}
.mxy-lacg .mxy-cell.mxy-amt{grid-column:auto;justify-self:center}
.mxy-lacg .mxy-amt .mxy-dots{grid-template-columns:repeat(3,9px);gap:11px;padding:14px}
.mxy-lacg .mxy-amt .mxy-dots i{width:9px;height:9px}
.mxy-lacg .mxy-cell.mxy-lac .mxy-mn{max-width:110px}
.mxy-lacg .mxy-conc{font-size:21px!important;margin-top:6px!important}
.mxy-lacg .mxy-cell b{font-size:13px}.mxy-lacg .mxy-cell span{font-size:12.5px}
/* the line a card turns on */
.mxy-flag{margin:16px 0 0;padding:13px 16px;border-radius:10px;
  background:rgba(220,38,38,.07);font-size:14px;line-height:1.5;
  color:var(--ink);font-weight:600}
.mxy-flag b{font-size:21px;font-weight:800;color:#E53227;margin-right:8px;
  letter-spacing:-.02em}
/* the notes under a card */
.mxy-note{margin:14px 0 0;font-size:12.5px;line-height:1.65;color:#5d5f66;
  font-weight:600}
.mxy-note b{color:var(--ink);font-weight:800}
/* his three steps */
.mxy-steps{margin-top:2px}
.mxy-step{display:flex;align-items:center;gap:10px;margin:24px 0 10px}
.mxy-steps>.mxy-step:first-child{margin-top:6px}
.mxy-sn{flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(27,31,59,.07);display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--ink)}
.mxy-sh{margin:0;font-size:15.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em}
.mxy-mrow{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 15px;border-radius:10px;
  background:rgba(27,31,59,.04);margin-top:8px}
.mxy-mrow span{font-size:13px;font-weight:600;color:#5d5f66}
.mxy-mrow b{font-size:19px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mxy-crow{display:grid;gap:4px;margin-top:10px}
.mxy-crow span{font-size:13px;font-weight:600;color:#5d5f66}
.mxy-comp{display:flex;height:24px;border-radius:6px;overflow:hidden}
.mxy-comp i{display:block;height:100%}
.mxy-keys{display:flex;flex-wrap:wrap;gap:7px 20px;margin-top:12px}
.mxy-keys span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:600;color:#5d5f66}
.mxy-keys i{width:10px;height:10px;border-radius:50%;flex:none}
/* the side cards sit at the top of their column, level with the first
   paragraph rather than centred against four of them */
.mxy-side{align-self:start;min-width:0}
.mxy-side .mx-chartcard{width:100%}



/* ===== Lactate Production and Lactate Oxidation (his supplement, 2026-09-15)
   Namespace mxu-. Every figure on this page is either the captured app chart
   or HTML: no <text> in a hand-built SVG, because a 13-unit label on a
   1000-unit canvas renders at about 4 px in a side column. ===== */

/* his two bulleted "aspects" stay a list (row 2 copy) */
.mx-blist{margin:0 0 clamp(14px,1.6vw,20px);padding:0 0 0 1.1em;
  display:flex;flex-direction:column;gap:.5em}
.mx-blist li{color:var(--mut,#5d5f66);font-size:clamp(15px,1.5vw,18px);
  line-height:1.62}
.mx-blist li::marker{color:#DC2626;font-weight:800}

/* a tab panel's own heading, when the section heading is fixed */
.mx-tabh3{margin:0 0 clamp(10px,1.3vw,16px);font-weight:800;
  font-size:clamp(19px,2vw,25px);line-height:1.2;color:#1B1F3B;
  letter-spacing:-.01em}

/* ---- his row 2: one glucose through glycolysis, then the rate ---- */
.mxu-gly{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.mxu-scene{background:#F4F6FA;border-radius:16px;
  padding:clamp(22px,2.4vw,28px) clamp(8px,1.2vw,12px) clamp(30px,3.4vw,40px)}
/* the labels are positioned against THIS box, which is the SVG's own box,
   so they stay on their molecules whatever the card width */
.mxu-scbox{position:relative}
.mxu-sc{display:block;width:100%;height:auto;overflow:visible}
.mxu-pin-top{color:#5d5f66;font-size:12.5px;transform:translate(-50%,-100%)}
.mxu-gi{width:34px;height:15px;vertical-align:-2px;margin-right:6px}
/* every word is HTML, pinned by percentage over the scene: a 13-unit label
   on a 460-unit canvas renders at about 10 px in this column */
.mxu-pin{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-size:12.5px;color:#5d5f66;line-height:1.2}
.mxu-pin b{color:#1B1F3B;font-weight:800;font-size:14px}
.mxu-pin i{font-style:normal;color:#8b9099}
/* "oxidized by aerobic metabolism" (Sebastian 2026-10-05) is wider than the
   room beside the wheel in a narrow scene, where it wraps to two lines */
@media(max-width:719px){
  .mxu-pin-w{white-space:normal;width:9.6em;text-align:center}
  .mxu-oxs{padding-bottom:50px}
}
/* the six carbons travel from the ring into the two chains. The markup holds
   the FINISHED positions; the driver puts them back and releases them, so
   with JS off the reaction reads as a complete diagram. */
.mxu-c{transition:transform 1.15s cubic-bezier(.33,0,.2,1)}
.mxu-bond,.mxu-atp{transition:opacity .55s ease}
.mxu-alt{margin:0;font-size:13px;line-height:1.5;color:#5d5f66}
.mxu-alt b{color:#1B1F3B;font-weight:800}
/* beat 2: the software's own production curve and the reading that walks it.
   Chart on its own row at every width: beside the readout in this side
   column it rendered 299 px wide, which is not a chart. */
.mxu-rate{display:flex;flex-direction:column;gap:8px;min-width:0}
.mxu-rate .mp-chart{width:100%;min-width:0}
.mxu-rd{transition:cx .12s linear,cy .12s linear}
.mxu-read{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;
  min-width:0;line-height:1.1}
.mxu-read b{font-size:clamp(26px,3.2vw,34px);font-weight:800;color:#1B1F3B;
  font-variant-numeric:proportional-nums}
.mxu-read i{font-style:normal;font-size:12.5px;color:#5d5f66}
.mxu-read>span{flex:1 1 100%;min-width:0;font-size:12.5px;color:#5d5f66;
  margin-top:3px}
.mxu-read>span b{font-size:12.5px;color:#1B1F3B}

/* ---- his row 3: the oxidative flywheel and the ceiling it sets ---- */
.mxu-ox{display:block;width:100%;height:auto;overflow:visible}
.mxu-oxs{padding-bottom:clamp(30px,3.4vw,40px);padding-top:clamp(34px,3.8vw,44px)}
.mxu-oxs .mxu-scbox{max-width:400px;margin-inline:auto}
.mxu-state{color:#1B1F3B;font-weight:700;white-space:normal;text-align:center;
  width:min(120%,440px);transform:translate(-50%,-100%);padding-bottom:8px}
.mxu-spin{transform-box:view-box;transform-origin:352px 75px;
  animation:mxuSpin 2.4s linear infinite}
@keyframes mxuSpin{to{transform:rotate(360deg)}}
/* the marks travel the channel and are consumed at the rim. Their speed IS
   the throughput: the driver sets one duration for the wheel and the flow
   from the same swept intensity, because they are the same fact. */
.mxu-flow{transform-box:fill-box;transform-origin:center;
  animation:mxuFlow 3.2s linear infinite;animation-delay:calc(var(--i) * -0.8s)}
@keyframes mxuFlow{
  0%{transform:translateX(0);opacity:0}
  7%{opacity:1}
  82%{transform:translateX(252px);opacity:1}
  100%{transform:translateX(300px) scale(.25);opacity:0}
}
.mxu-od{transition:cx .12s linear,cy .12s linear}
@media(prefers-reduced-motion:reduce){
  .mxu-spin,.mxu-flow{animation:none}
}

/* ---- the three tabs: the same chart, a different region lit ---- */
/* the readings live INSIDE the plot. Stacked under the card they turned one
   scene into a column of widgets and pushed it past 800 px tall; the upper
   left of this 50-400 W window is empty on all three views. */
.mxu-plot{position:relative;min-width:0}
.mxu-plot .mp-chart{display:block;width:100%}
/* placed by measurement, not by eye: left of 11% it covers the y-axis tick
   labels (the axis sits at 9.6% of this canvas), above 19% it runs into the
   MLSS pill, and past 57% it reaches the pill's left edge. Everything inside
   that box is empty on all three tab views, because below 232 W both curves
   are under 1.42 mmol/l/min. */
.mxu-ov{position:absolute;left:11%;top:19%;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:0 7px;max-width:min(44%,290px);
  background:rgba(255,255,255,.92);border-radius:12px;
  padding:8px 11px 9px;backdrop-filter:blur(2px)}
.mxu-ov b{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#1B1F3B;
  font-variant-numeric:proportional-nums;line-height:1.05}
.mxu-ov i{font-style:normal;font-size:12.5px;color:#5d5f66}
.mxu-ol{flex:1 1 100%;font-size:12.5px;color:#5d5f66;margin-top:2px}
.mxu-ol b{font-size:12.5px}
/* on a 320 px chart no empty region is big enough to float a reading in:
   measured, it sat on the curves at 390. Same markup, under the chart. */
@media(max-width:719px){
  .mxu-ov{position:static;max-width:none;background:none;padding:8px 0 0;
    backdrop-filter:none}
}
.mxu-gl,.mxu-gp,.mxu-go{transition:none}
/* Sebastian 2026-10-05: a bar that is a time, under the chart on the
   clearance and the accumulation tab. It cannot go inside the plot: the
   upper left holds the reading and every other region of this window has a
   curve running through it. Label and minutes share a row and the track
   takes the full width under them, so the bar has room to visibly grow and
   shrink; beside its label it came out about 150 px. */
.mxu-tb{margin-top:12px}
.mxu-tbr{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px}
.mxu-tbl{font-size:12.5px;color:#5d5f66;line-height:1.25;min-width:0}
.mxu-tbv{flex:0 0 auto;font-size:12.5px;color:#5d5f66;line-height:1.25;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.mxu-tbv b{font-size:15px;font-weight:800;color:#1B1F3B}
.mxu-tbs{margin-bottom:5px}
.mxu-tbs .mxu-tbv{font-size:15px;font-weight:800;color:#1B1F3B}
.mxu-tbt{height:13px;border-radius:7px;background:#EDF1F7;overflow:hidden;
  margin-top:6px}
.mxu-tbf{display:block;height:13px;border-radius:7px;opacity:.82}
.mxu-conc{white-space:nowrap}
/* his row 8: the modelled crossing and the observed bout, side by side */
/* stacked, not side by side: in the tab's figure column two panels came
   out about 280 px each, and the wide layout that would fit them left a
   half-empty copy column. Stacked also reads as his sequence. */
.mxu-two{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,24px)}
.mxu-pan{position:relative;min-width:0;align-self:start}
.mxu-clwrap{display:block;position:relative}
/* the strip keeps its own aspect and scales uniformly; the y labels are
   pinned at the gridlines' percentage positions inside the same box */
.mxu-clbox{position:relative;padding-left:24px}
.mxu-cl{width:100%;height:auto;display:block}
.mxu-cly{position:absolute;left:0;top:0;bottom:0;width:20px}
.mxu-cly span{position:absolute;right:0;transform:translateY(-50%);
  font-size:12.5px;color:#9FAABB;line-height:1}
.mxu-clx{display:flex;justify-content:space-between;align-items:baseline;
  margin:3px 0 0 24px;font-size:12.5px;color:#5d5f66}
.mxu-clx span:nth-child(2){color:#9FAABB}
.mxu-clu{display:block;font-size:12.5px;color:#9FAABB;margin:5px 0 0 24px}
/* Sebastian 2026-10-05: each bout carries its own label, on the line. The
   key is laid over the strip's own box (left 24 px for the y labels, the
   strip's aspect for the height), so a label's left and top are points of
   the strip's canvas. The letter pair says which corner of the label sits
   on that point. */
.mxu-clkey{position:absolute;left:24px;right:0;top:0;pointer-events:none}
.mxu-ll{position:absolute;display:flex;align-items:center;gap:6px;
  white-space:nowrap;font-size:12.5px;line-height:1.2;color:#5d5f66;
  background:rgba(255,255,255,.9);border-radius:6px;padding:1px 4px}
.mxu-ll b{color:#1B1F3B;font-weight:800}
.mxu-ll i,.mxu-flag i{width:14px;height:3.6px;border-radius:2px;flex:0 0 auto}
.mxu-ll-tr{transform:translateX(-100%)}
.mxu-ll-br{transform:translate(-100%,-100%)}
.mxu-ll-cr{transform:translate(-100%,-50%)}
/* the same for the two vertical lines on the chart above: each rate sits at
   the end of its own line */
.mxu-flags{position:absolute;inset:0;pointer-events:none}
.mxu-flag{position:absolute;transform:translateY(-50%);display:flex;
  align-items:center;gap:6px;white-space:nowrap;font-size:12.5px;
  line-height:1.2;color:#5d5f66}
.mxu-flag b{color:#1B1F3B;font-weight:800}
.mxu-flag i{display:none}
/* on a 320 px chart neither set of labels has an empty region to sit in:
   the same markup becomes a key, above the strip and under the chart, with
   its colour mark */
@media(max-width:719px){
  .mxu-clkey{position:static;aspect-ratio:auto!important;display:flex;
    flex-direction:column;gap:5px;margin:0 0 10px}
  .mxu-ll{position:static;transform:none;white-space:normal;background:none;
    padding:0}
  .mxu-flags{position:static;display:flex;flex-wrap:wrap;gap:5px 16px;
    padding-top:8px}
  .mxu-flag{position:static;transform:none}
  .mxu-flag i{display:block}
}

/* ---- one grid system for the whole page (the mxu-page stamp) ---- */
.mxu-page .mx-tabgrid,.mxu-page .mx-probgrid,.mxu-page .mx-closegrid{
  align-items:start;gap:clamp(24px,3vw,44px)}
@media(min-width:1040px){
  .mxu-page .mx-tabgrid,.mxu-page .mx-probgrid,.mxu-page .mx-closegrid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* the closer sits on the same columns as every section above it: the
   family caps its grid at 1060 px and centres it (38 px inset in the 1136 px
   container) and caps the copy at 70ch, centred; neither applies here */
.mxu-page .mx-closegrid{max-width:none;margin-inline:0}
.mxu-page .mx-closewrap{max-width:none;margin-inline:0}
/* the closer's heading meets the top of its column like the others */
.mxu-page .mx-closewrap .tst-head,.mxu-page .mx-closewrap .sec-title{margin-top:0}
.mxu-page .mx-closeviz{margin-top:0}
.mxu-page .mx-chartcard[data-uxwide]{max-width:none}
.mxu-page .mxq-side,.mxu-page .mx-tfig{align-self:start}
/* the figure starts level with the HEADLINE and runs beside heading and
   copy together (Igor 2026-09-15: "align the graph with the whole section
   including the headline"): heading in column 1 row 1, copy in column 1
   row 2, figure in column 2 across both rows */
@media(min-width:1040px){
  .mxu-page .mx-probgrid.mxe-rows{grid-template-rows:auto 1fr}
  .mxu-page .mxe-rows>.mxe-shead{grid-column:1;grid-row:1}
  .mxu-page .mxe-rows>.mx-probcopy{grid-column:1;grid-row:2}
  .mxu-page .mxe-rows>.mxq-side{grid-column:2;grid-row:1/3}
}
/* the heading row and the copy sit flush: the family centres the copy on
   the figure, which put the tab copy 294 px under its own heading */
.mxu-page .mxe-shead{margin-bottom:0}
.mxu-page .mxe-shead .tst-head,.mxu-page .mxe-shead .sec-title{margin-top:0}
.mxu-page .mx-tcopy .mx-tabh3{margin-top:0}
/* his lead sentence sits flush under its left-aligned heading. The family
   rule centres it at 640 px for pages whose tab heading is centred, which
   here left it floating in the middle of the row. */
.mxu-page .mx-tablead{margin:0;max-width:60ch}
.mxu-page .mx-tablead .sec-sub{margin:0}
/* heading left, his lead sentence right, on the page's grid: the same
   columns and gap as every two-column section below it */
/* bottom-aligned: the heading is the dominant element and the eye leaves it
   at its last line, so the lead meets it there; centred, the lead floated
   mid-height with ragged air above and below */
.mxu-page .mx-tabhead{display:grid;gap:clamp(24px,3vw,44px);
  align-items:end;margin-bottom:clamp(22px,2.6vw,30px)}
.mxu-page .mx-tabhead .tst-head,.mxu-page .mx-tabhead .sec-title{margin:0}
@media(min-width:1040px){
  .mxu-page .mx-tabhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* last baselines meet: measured, the heading's last line box runs 9 px
     below its element and the lead's ends 3 px above, 12 px apart */
  .mxu-page .mx-tabhead .mx-tablead{max-width:none;padding-top:0;
    margin-bottom:-12px}
}
.mxu-page .mx-tabh3{margin-bottom:clamp(14px,1.8vw,22px)}
/* figures a size down: the scenes and the closer chart ran the full column
   and the flywheel came out 140 px across (Igor: "not too super big") */

.mxu-page .mx-chartcard[data-uxwide]{max-width:820px}

/* ---- his row 9: the four consequences, each a clickable metric ---- */
.mxu-qplot{position:relative;min-width:0}
.mxu-qplot .mp-chart{display:block;width:100%}
/* arm/go, the family's pattern: the sequence runs on its own with JS off,
   and the driver arms it (paused) so it instead starts when scrolled to */
.mxu-q{opacity:0;animation:mxsIn .55s ease forwards;animation-delay:var(--d)}
.mxu-seq.arm .mxu-q,.mxu-seq.arm .mxu-ql{animation-play-state:paused}
.mxu-seq.arm.go .mxu-q,.mxu-seq.arm.go .mxu-ql{animation-play-state:running}
/* each label carries the number of the marker sitting on its region. Four
   labels pinned on the plot itself was measured and rejected: on a chart
   this busy every candidate position touched a curve (0 px clearance). */
.mxu-qs{display:grid;gap:clamp(8px,1.2vw,12px);
  margin-top:clamp(12px,1.6vw,18px)}
@media(min-width:620px){.mxu-qs{grid-template-columns:1fr 1fr}}
.mxu-ql{display:flex;align-items:flex-start;gap:10px;text-decoration:none;
  background:#F4F6FA;border-radius:13px;padding:clamp(10px,1.3vw,14px);
  opacity:0;animation:mxsIn .55s ease forwards;animation-delay:var(--d);
  transition:background .2s ease,transform .2s ease}
.mxu-ql:hover{background:#E7EDF6;transform:translateY(-2px)}
.mxu-qn{flex:0 0 24px;height:24px;border-radius:50%;color:#fff;font-size:13px;
  font-weight:800;display:flex;align-items:center;justify-content:center;
  line-height:1}
.mxu-qt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mxu-ql b{font-size:13.5px;font-weight:700;color:#1B1F3B;line-height:1.25}
.mxu-ql i{font-style:normal;font-size:12.5px;color:#4E6D8C;font-weight:700}

@media(prefers-reduced-motion:reduce){
  .mxu-spin,.mxu-flow{animation:none}
  .mx-smodel .mxu-d,.mx-smodel .mxu-rd,.mxu-od{animation:none;opacity:1}
  .mx-smodel .mxu-ar{animation:none;stroke-dashoffset:0}
  .mxu-q,.mxu-ql{opacity:1;animation:none}
}