/* INSCYD /features hub - hosted styles, generated 1:1 from
   INSCYD-Features-Hub.html. Loaded ONLY by the features hub bridge. */
html:not(.bridge-ready) body > *:not(#featureshub-root):not(script):not(style):not(.w-webflow-badge):not(.vlb){display:none!important}
#featureshub-root{display:block}
#featureshub-root .w-embed{display:contents}
#featureshub-root .w-embed:before,#featureshub-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}
}



/* ===== features hub (ftr-) ===== */
.ftr-sec{position:relative}
.ftr-first{padding-top:clamp(64px,11vw,150px)}
.ftr-topcta{justify-content:center;align-items:center;gap:18px;margin-top:26px;
  flex-wrap:wrap}
.ftr-alt{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:700;color:var(--ink);min-height:40px;
  transition:color .25s var(--ease)}
.ftr-alt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.ftr-alt:hover{color:var(--rec)}
.ftr-alt:hover svg{transform:translateX(3px)}

/* ---- the grid: two columns, so a real product screenshot is legible ---- */
.ftr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4.4vw,56px)}
.ftr-grid>*{min-width:0}
@media(max-width:1000px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ftr-grid{grid-template-columns:1fr}}

.ftr-card{position:relative;background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:16px 16px 14px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(27,31,59,.04);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
    border-color .28s var(--ease),opacity .3s var(--ease)}
.ftr-card:hover{transform:translateY(-3px);border-color:var(--border-2);
  box-shadow:0 30px 62px -38px rgba(20,28,46,.5)}
.ftr-card.ftr-lifted{opacity:0;transition:none}

/* ---- the tile: the page's own component, framed and scaled ---- */
/* the aspect is fixed so six cards line up; the component inside keeps its own
   proportions and is contained, never cropped */
.ftr-tile{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#f8fafc,#fdfdfe);
  border:1px solid rgba(27,31,59,.07);margin-bottom:16px}
/* the svg carries its own aspect ratio, so the tile needs no fixed height and the
   artwork can never be cropped or stretched at any card width */
.ftr-tile .ft-svg{display:block;width:100%;height:auto}

.ftr-body{flex:1;display:flex;flex-direction:column;gap:8px}
.ftr-name{font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink);
  line-height:1.24;text-wrap:balance}
.ftr-link{color:inherit}
.ftr-link::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:3}
.ftr-link:focus-visible::after{outline:2px solid var(--rec);outline-offset:3px}
.ftr-desc{font-size:13.5px;line-height:1.62;color:var(--muted);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden}

.ftr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:15px;padding-top:13px;border-top:1px solid var(--border)}
.ftr-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:700;color:var(--ink)}
.ftr-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.ftr-card:hover .ftr-go svg{transform:translateX(3px)}
.ftr-peek{position:relative;z-index:4;appearance:none;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;color:var(--muted);background:#fff;
  border:1px solid var(--border);border-radius:99px;padding:0 13px;min-height:36px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),
    border-color .2s var(--ease),transform .12s var(--ease)}
.ftr-peek svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ftr-peek:hover{color:var(--ink);border-color:var(--border-2);
  background:var(--surface-2)}
.ftr-peek:active{transform:scale(.96)}

/* ---- who it is built for ---- */
.ftr-who{background:var(--surface-2);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.ftr-who .tst-head{margin-bottom:clamp(30px,3.6vw,50px)}
.ftr-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.ftr-paths>*{min-width:0}
@media(max-width:860px){.ftr-paths{grid-template-columns:1fr}}
.ftr-path{position:relative;z-index:2;display:flex;flex-direction:column;gap:11px;
  background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:24px 22px 20px;box-shadow:0 1px 2px rgba(27,31,59,.04);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
    border-color .28s var(--ease)}
.ftr-path:hover{transform:translateY(-3px);border-color:var(--border-2);
  box-shadow:0 30px 62px -38px rgba(20,28,46,.5)}
.ftr-picon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(78,109,140,.09);color:var(--rec)}
.ftr-picon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ftr-pname{font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.ftr-ptext{flex:1;font-size:14px;line-height:1.65;color:var(--muted);
  text-wrap:pretty}
.ftr-path .ftr-go{margin-top:4px}
.ftr-path:hover .ftr-go svg{transform:translateX(3px)}

/* ---- the quick look ---- */
.ftr-ov{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(14px,3vw,40px)}
.ftr-ov[hidden]{display:none}
.ftr-scrim{position:absolute;inset:0;background:rgba(14,18,32,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;
  transition:opacity .3s var(--ease)}
.ftr-ov.on .ftr-scrim{opacity:1}
.ftr-modal{position:relative;z-index:2;width:min(100%,960px);
  background:#fff;border:1px solid var(--border);border-radius:24px;
  box-shadow:0 60px 120px -50px rgba(14,18,32,.62);overflow:hidden;
  opacity:0;transform:scale(.9);
  transition:opacity .28s var(--ease),transform .38s var(--expo)}
.ftr-pkin{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  max-height:min(88vh,800px);overflow:auto;-webkit-overflow-scrolling:touch}
.ftr-pkin>*{min-width:0}
.ftr-ov.on .ftr-modal{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .ftr-modal{transition:opacity .01s;transform:none}
  .ftr-ov.on .ftr-modal{transform:none}
}
@media(max-width:800px){.ftr-pkin{grid-template-columns:1fr;max-height:88vh}}
.ftr-x{position:absolute;top:12px;right:12px;z-index:5;appearance:none;
  width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;
  place-items:center;color:var(--muted);background:#fff;
  border:1px solid var(--border);
  transition:color .2s var(--ease),background .2s var(--ease),
    transform .12s var(--ease)}
.ftr-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.ftr-x:hover{color:var(--ink);background:var(--surface-2)}
.ftr-x:active{transform:scale(.96)}
.ftr-modal:focus{outline:none}
.ftr-modal:focus-visible{outline:2px solid var(--rec);outline-offset:2px}
.ftr-pkviz{padding:clamp(18px,2.2vw,26px);display:grid;align-content:center;
  background:linear-gradient(180deg,#fbfbfd,#f2f4f7);
  border-right:1px solid var(--border)}
@media(max-width:800px){
  .ftr-pkviz{border-right:0;border-bottom:1px solid var(--border);padding:14px}
}
.ftr-pkviz .ftr-tile{margin:0;width:100%;align-self:center}
.ftr-pkbody{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;
  gap:12px;align-items:flex-start}
.ftr-pkname{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1.18;text-wrap:balance}
/* the page's own headline, so the panel says what the page says */
.ftr-pkclaim{font-size:15px;line-height:1.5;font-weight:700;color:var(--rec);
  text-wrap:pretty}
.ftr-pktext{display:grid;gap:10px}
.ftr-pktext p{font-size:14.5px;line-height:1.68;color:var(--muted);
  text-wrap:pretty}
.ftr-pksecs{display:flex;flex-wrap:wrap;gap:7px}
.ftr-pksec{font-size:11px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:99px;
  padding:5px 11px}
.ftr-pkcta{margin-top:6px}