/* INSCYD Elite Sport v1 DUAL-MODE (SSR-aware) - generated from INSCYD-Elite-FINAL.html.
   Served under the v1 URL so the page head never changes. The page markup is
   server-rendered as HtmlEmbeds INSIDE #elite-root, which the legacy guard
   exempts, so content is visible pre-JS on the new page while any not-yet-
   republished page keeps its old hide-until-boot behavior. */
html:not(.bridge-ready) body > *:not(#elite-root):not(script):not(style):not(.w-webflow-badge):not(.vlb){display:none!important}
#elite-root{display:block}
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}
/* no-JS default-visible: the Webflow html tag has no .no-js hook, so gate on .js absence */
html:not(.js) .fade-up{opacity:1;transform:none}
html:not(.js) .gfloat{opacity:1;transform:none}
html:not(.js) .step{opacity:1;transform:none}

/* ============ 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 clamp(56px,8vw,104px)}}

.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}

/* 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}

@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))}


.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}

.ftp-bar{fill:url(#barHatch);stroke:#4E6D8C;stroke-width:1;opacity:.95}

.ftp-dot{fill:#4E6D8C;stroke:#fff;stroke-width:1.4}

.u-zdot{stroke:#fff;stroke-width:1.4}

.sleg-t{font-size:11.5px;font-weight:700;fill:var(--muted)}

.pd-vdot{stroke:#fff;stroke-width:1.2}

.u-label.fat{fill:var(--green)}

.step.on{opacity:1;transform:none;pointer-events:auto}

.zonewrap{margin-top:26px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--expo),transform .6s var(--expo)}

.zonewrap.on{opacity:1;transform:none}

@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 .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}

@media(min-width:1240px){.seb-arrow{display:block}}

.seb-note.in .seb-arrow .hd{opacity:1}

@media(max-width:1080px){
  .twin{min-width:0}
  .seb-note{min-width:0}
}

.ath{padding:24px 24px 20px;position:relative;height:100%}

.ath.a .ath-ava{background:var(--rec)}

.ath.b .ath-ava{background:var(--carb)}

.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}

.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)}

@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}}

.reinf2 .container{display:flex;flex-direction:column}

.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-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 .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}
}

.cert-head .sec-sub{text-align:center}

.cert-head .cta-pill{margin-top:30px}

@media(max-width:760px){.cert-points{grid-template-columns:1fr;gap:12px}}

@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%}
}

.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-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 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}
}

.cmp-wrap{margin-top:48px;padding:7px}

.cs-in .curvecard.is-on{display:flex;flex-direction:column}

@media(max-width:860px){.cvt-pill{display:none}.cvt-tab[aria-selected="true"]{background:#1B1F3B}}

.cmpslider.cs-grabbing .cs-knob{transform:translate(-50%,-50%) scale(1.08)}

.cmp-cap .accent{color:var(--red)}

.pv .container{position:relative;max-width:1340px}

.pv-tab.on .pv-td{max-height:96px;opacity:1;margin-top:6px}

.pv-tab.on{color:var(--ink);border-left-color:var(--red);background:linear-gradient(90deg,rgba(230,38,28,.07),transparent)}

.pv-tab.on .pn{color:var(--red)}

.pv-panel.on{opacity:1;transform:none;pointer-events:auto}

@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}}

.swv1 .sec-head{margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px}

.mq-row .dq-tile.graph{width:344px}

.mq-row .dq-tile.metric{width:258px}

.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-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}}

@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-g .gx{display:block;width:84px;height:auto;margin:0 auto}

.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}
}

.cs5-rain .rain-col{gap:14px;opacity:1;max-width:225px}

@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:clamp(56px,8vw,104px) 0}

.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;position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,28px)}

.ft-tab{position:relative;text-align:left;background:transparent;border:0;padding:0 8px 0 0;cursor:pointer;font-family:inherit}

/* the rule now sits UNDER the label and doubles as the dwell timer: it fills red
   over the 5200ms this tab stays open, so the row shows when it will switch */
.ft-rule{display:block;height:2px;margin-top:13px;border-radius:2px;background:var(--border);overflow:hidden}
.ft-tab .bar{display:block;height:100%;width:0;background:var(--red);border-radius:2px}

.ft-head{display:flex;align-items:center;gap:10px;margin-bottom:0}

.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}

.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)}

.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}

@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)}
}

.reinf-band .container{position:relative;z-index:3;width:100%}

.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 .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}

.in .cv-draw{transition:stroke-dashoffset 1.7s var(--expo);stroke-dashoffset:0}

.in .cv-draw.d2{transition-delay:.2s}

.in .cv-fade{opacity:1}

.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}

.sol2 .container{max-width:1304px}

.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 .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}

.fold.open .fold-bar i{transform:rotate(90deg)}

.fold.open .fold-body{display:block}

.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}

.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}

.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.open{display:block}

.cty-list button:hover,.cty-list button.act{background:var(--surface-2)}

.cty-list .none{padding:12px 14px;font-size:13px;color:var(--muted-2)}

.bz3-formcol .cta-pill{justify-self:stretch;width:100%;justify-content:center}

.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}

@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}}

@keyframes rcprint{0%{transform:translateY(-26px)}100%{transform:translateY(0)}}

.rc-line.neg b{color:var(--red)}

@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}
}

.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-panel.in .tk-today{transform:scaleY(1)}

.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-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}}

.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}

@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)}}

@media(hover:hover){.edu-cta:hover{border-color:var(--ink);background:var(--surface-2)}}

@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}
}

@media(hover:hover){.vplay:hover{transform:translate(-50%,-50%) scale(1.06)}}

.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}}

.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-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}}

@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}
}

.in .rbar i{transform:none}

.rbar .coach{background:var(--rec)}

.rbar .test{background:var(--red);transition-delay:.15s}


/* ============ 8. QUOTES ============ */
.proof{position:relative;z-index:2;padding:clamp(56px,8vw,104px) 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}

.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 .nm{font-size:11px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.65);display:block}

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}
  /* mobile hero spacing wants roughly 48 to 64px under a fixed nav (vault:
     inscyd-mobile-hero-spacing); appears after the rule above so it wins */
  .hero{padding-top:clamp(56px,14vw,140px)}
  .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}
}

.abpair .container{display:flex;flex-direction:column;max-width:1304px}

.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}}

@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)}

.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%}}

@media(max-width:1000px){.cin-g4{display:none}}

.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}}

/* 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-metrics .spx-lim{display:block;margin-top:10px}

/* 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)}

.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-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:52px}

/* 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%}
/* decorative cutouts, never a hit target: they overflow their panel by design */
.zn-vis .zn-ath,.lim-vis .lim-ath,.fuel-vis .fuel-ath,.rv-vis .rv-coach{pointer-events:none}
  .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-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)}

@keyframes rvIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

@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)}

/* 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}}

.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}

@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}

@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}}

.lp3 .container{position:relative;z-index:1;width:100%}

.lp3-head .eyebrow{margin-bottom:12px}

.lp3-vis.on{opacity:1;transform:none;filter:blur(0);pointer-events:auto}

.lp3-block.on{opacity:1;pointer-events:auto}

.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 .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)}

.lc-pill.neg svg{transform:rotate(180deg)}

.lc-pill.neg{background:var(--red)}

.lc-pill.zero{opacity:.35;background:var(--muted-2)}

.mb.is-open .mb-status{opacity:1}

.mb.is-open .mb-line{stroke-dashoffset: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-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.g2 .gx{width:108px}

.mb-gc.g2 .gnum{font-size:17px}

.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)}}


@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}

.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}

.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)}

@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:repeat(3,1fr);gap:14px;margin-bottom:14px;align-items:stretch}

/* metabolic fingerprint as the third card of the graph row */
.lp4-gfp{display:flex;flex-direction:column}

.lp4-gfp .lp4-fpbody{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}

.lp4-gfp .lim-svg{width:100%;height:auto;display:block;overflow:visible;margin:0}

.lp4-gfp .lim-key{margin-top:10px;border-top:1px solid var(--border);padding-top:9px;font-size:10.5px}

.lp4-g{display:flex;flex-direction:column;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-gbody .lp4-axt{fill:var(--ink);font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:18px}

.lp4-gbody .lp4-axu{fill:var(--ink);font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:18px}

.lp4-gbody .lp4-axu-hi{font-weight:800;font-size:21px;fill:var(--ink)}

.lp4-gbody .lp4-axtick{stroke:rgba(27,31,59,.5);stroke-width:1.8}

/* right-hand axis rule on the combustion chart, mirroring the baked left/bottom axes */
.lp4-gbody .lp4-axline{stroke:rgba(27,31,59,.26);stroke-width:1.6;stroke-linecap:round}

.lp4-gbody .lp4-ann-guide{stroke:var(--red);stroke-width:1.6;stroke-dasharray:7 6;opacity:.75}

.lp4-gbody .lp4-ann-dot{fill:var(--red);stroke:#fff;stroke-width:2.5}

.lp4-gbody .lp4-ann-tx{fill:var(--red);font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:17px}

.lp4-xl{text-align:center;font-size:9px;font-weight:700;color:var(--muted-2);margin-top:2px}

/* the cut-off zone rows that prove there is more below */
.lp4-more{display:grid;gap:7px}

@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-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-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}}

.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}

.l9-loopcopy h3 .accent{color:var(--red)}

@media(max-width:960px){.l9-loopgrid{grid-template-columns:1fr}}

.lp7b-slot.filled{border-color:transparent;background:transparent}

.lp7b-slot.filled .hint{opacity:0}

@keyframes l7caret{50%{opacity:0}}

.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-ready.on{animation:l7pop .5s cubic-bezier(.34,1.56,.64,1) forwards}

@keyframes l7pop{to{opacity:1;transform:scale(1);filter:blur(0)}}

/* --- 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)}

.lv-opt .gx{display:block;width:58px;height:auto;margin:0 auto 2px}

.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)}

.rt-ax{font-family:Manrope,system-ui,sans-serif;font-size:10.5px;font-weight:700;fill:var(--muted-2)}

.rt-d.on{animation:l7pop .5s cubic-bezier(.34,1.56,.64,1) forwards}

.rt-step.done i{border-color:var(--rec);background:var(--rec);box-shadow:0 0 0 3px rgba(78,109,140,.15)}

.rt-book span.on{animation:l7pop .5s cubic-bezier(.34,1.56,.64,1) forwards}

.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)}

@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%}}

.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-fg .gf-cap{font-size:10px;font-weight:700;color:var(--ink);margin-bottom:4px}

.et-fg .lp4-gbody{width:min(34vw,230px)}

/* 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}

.et-bang{font-size:clamp(40px,6vw,84px);font-weight:800;letter-spacing:-.04em;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-mini{display:flex;gap:3px;height:26px;align-items:flex-end}

.pr-mini i{flex:1;border-radius:3px;background:var(--rec);opacity:.85}

.qg-goal.on{color:#fff;background:var(--rec);border-color:var(--rec)}

.qg-row.top .qg-fill{background:var(--red)}

.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-row i.full{color:#fff;background:var(--rec)}

@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{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(6,1fr);gap:8px}

#solution .lp4-metrics .lp4-m{padding:9px 5px 8px}

#solution .lp4-metrics .gf-cap{font-size:9.5px;letter-spacing:-.01em;white-space:normal;line-height:1.15;min-height:2.3em;display:flex;align-items:center;justify-content:center;text-align:center}

@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)}}

@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 .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}


/* 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 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-copy .sec-title{margin-top:14px}

.lp6b-copy .sec-sub{margin-top:16px}

.lp6b-area.in .lp6b-scene{opacity:1;translate:0 0}

.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)}

@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}

.hw3 .hw3-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}

.hw3 .hw3-head h2 .accent{color:var(--red)}

.hw3 .hw3-group.fixed{position:fixed}

.hw3 .hw3-group.bottom{top:auto;bottom:0}

.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.thrown{transform:translateY(-130vh) rotate(-2deg) scale(.95);opacity:0}

.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}

@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}}

.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)}

.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-tabs button:hover:not(.on){color:var(--ink)}

.lp4c-tabs button.on{color:#fff}

.lp4c-shot.on{opacity:1;pointer-events:auto}

.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}

@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}

@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}

@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)}
}

.fld-vis .gfloat{opacity:1;transform:none;animation-play-state:running}

@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}

/* 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(24px,2.6vw,38px);margin:18px 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-ovl .sec-title{color:#fff;font-size:clamp(22px,2.6vw,38px)}

.cn-ovl .sec-title .accent{color:#ff8d86}

.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-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}}

.cn-top .sec-title{font-size:clamp(26px,3vw,44px)}

.cn-top .sec-sub{margin:14px 0 0;max-width:none}

.cn-chips2 .et-ic{width:84px}

@media(max-width:1080px){.cn-chips2{flex-wrap:wrap}}

@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}}

.pv-wrap .pr-card{margin:0 auto}

@media(max-width:920px){.pv3-grid{grid-template-columns:1fr}}

.pv4-pill.on{color:#fff;background:var(--rec);border-color:var(--rec)}

.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}

.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}

@media(max-width:760px){.p5-week{grid-template-columns:repeat(4,1fr)}}

@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{}

.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}}

@media(prefers-reduced-motion:no-preference){.p7-lines path{animation:p7flow 1.6s linear infinite}}

@keyframes p7flow{to{stroke-dashoffset:-22}}

@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)}}

@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-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-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-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}

@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-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%}

.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}

.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))}

@media(prefers-reduced-motion:no-preference){.adp3 .adp-e{animation:p7comet var(--dur,4s) linear infinite;animation-delay:var(--d2)}}

.adp4-w.w1{left:6%;top:10%}
.adp4-w.w2{right:5%;top:16%}
.adp4-w.w3{left:14%;bottom:12%}

@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-bento2 .lp5-card.lp5-edu{flex-direction:row;align-items:center;justify-content:space-between;gap:22px;padding:18px 20px 16px}.lp5-edu .lp5-txt{flex:1 1 auto;min-width:0}.sup-viz{display:flex;align-items:center;gap:12px;flex:0 0 auto}.sup-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(78,109,140,.10);border:1px solid rgba(78,109,140,.22)}.sup-ic svg{width:32px;height:32px}.sup-bub{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 11px;box-shadow:0 8px 20px -14px rgba(14,22,38,.4)}.sup-bub i{width:7px;height:7px;border-radius:50%;background:#3fae5a;box-shadow:0 0 0 3px rgba(63,174,90,.18)}@media(max-width:700px){.sup-viz{position:static;transform:none;margin:14px 0 16px}}


.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)}}


/* 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}}



/* ===================================================================
   MOBILE: show the #solution dashboard as a cropped "peek".
   In full it renders 2400px / 2.84 screens on a 390px phone. The page
   already ships the crop-and-fade treatment (.lp4-frame max-height +
   .lp4-fade) but it was switched off for #solution at every width.
   Re-enabled BELOW 860px only, so desktop is untouched, plus the
   12-gauge grid goes 3-across so the fade lands part-way through the
   first chart rather than through the gauges.  -> 1279px / 1.52 screens
   =================================================================== */
@media(max-width:860px){
  #solution .lp4-frame{max-height:clamp(700px,215vw,1000px)}
  #solution .lp4-fade{display:block}
  #solution .lp4-metrics{grid-template-columns:repeat(3,1fr);gap:6px}
  #solution .lp4-metrics .lp4-m{padding:8px 4px 7px;border-radius:11px}
  #solution .lp4-metrics .gf-cap{font-size:8.5px;min-height:2.2em}
  #solution .lp4-metrics .gx{width:62px}
  #solution .lp4-metrics .gnum{font-size:12.5px}
  #solution .lp4-metrics .gun{font-size:7.5px;margin-left:2px}
}
/* science + platform bento: section heads centred */
.lp6c .lp6-head{text-align:center;max-width:840px;margin-left:auto;margin-right:auto}
.lp6c .lp6-head .sec-sub{margin-left:auto;margin-right:auto}
.lp5-head{text-align:center;max-width:840px;margin-left:auto;margin-right:auto}
.lp5-head .sec-sub{margin-left:auto;margin-right:auto}
.pj-console{background:#fff;border:1px solid var(--border);border-radius:22px;padding:18px 20px 14px;
  box-shadow:0 34px 74px -38px rgba(14,22,38,.42),inset 0 1px 0 rgba(255,255,255,.7)}
.pj-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.pj-ttl{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pj-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)}
.pj-live i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:pjpulse 1.8s ease-in-out infinite}
@keyframes pjpulse{50%{opacity:.28}}
.pj-sliders{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.pj-srow{display:grid;grid-template-columns:96px minmax(0,1fr) 104px;align-items:center;gap:12px}
.pj-srow label{font-size:11.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.pj-srow label i{display:block;font-style:normal;font-size:8.5px;font-weight:600;color:var(--muted-2);letter-spacing:0}
.pj-val{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.pj-val i{font-style:normal;font-size:8.5px;font-weight:600;color:var(--muted);margin-left:3px}
.pj-range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:grab;touch-action:pan-y}
.pj-range:active{cursor:grabbing}
.pj-range:focus-visible{outline:2px solid var(--rec);outline-offset:3px;border-radius:99px}
.pj-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%))}
.pj-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;margin-top:-6.5px;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);
  transition:box-shadow .2s ease}
.pj-range:hover::-webkit-slider-thumb{box-shadow:0 1px 3px rgba(20,28,46,.3),0 0 0 6px rgba(78,109,140,.16)}
.pj-range:active::-webkit-slider-thumb{box-shadow:0 1px 3px rgba(20,28,46,.32),0 0 0 8px rgba(78,109,140,.2)}
.pj-range::-moz-range-track{height:4px;border-radius:99px;background:rgba(20,28,46,.12)}
.pj-range::-moz-range-progress{height:4px;border-radius:99px;background:var(--rec)}
.pj-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)}
/* explicit height, not aspect-derived: the svg is preserveAspectRatio="none" so it stretches,
   and a taller plot is what makes the two curves readable as separate lines */
.pj-gwrap{position:relative;border:1px solid rgba(20,28,46,.07);border-radius:13px;padding:8px 7px 5px;
  overflow:hidden;height:clamp(232px,19vw,306px)}
.pj-gwrap svg{width:100%;height:100%;display:block}
.pj-fat{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pj-carb{fill:none;stroke:var(--carb);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pj-lac{fill:none;stroke:#F5A623;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* --rec and --acc are the brand tokens for exactly this graph */
.pj-rec{fill:none;stroke:var(--rec);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pj-acc{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pj-fat.ghost,.pj-carb.ghost,.pj-lac.ghost,.pj-rec.ghost,.pj-acc.ghost{stroke-width:4.5;stroke-dasharray:1 14;opacity:.92;filter:brightness(1.15)}
.pj-solid-dim .pj-fat:not(.ghost),.pj-solid-dim .pj-carb:not(.ghost),.pj-solid-dim .pj-lac:not(.ghost),
.pj-solid-dim .pj-rec:not(.ghost),.pj-solid-dim .pj-acc:not(.ghost){opacity:.36}
.pj-gfc,.pj-glac,.pj-grec{transition:opacity .45s ease}
.pj-glac,.pj-grec{opacity:0;pointer-events:none}
.pj-mode-lac .pj-gfc,.pj-mode-rec .pj-gfc{opacity:0}
.pj-mode-lac .pj-glac{opacity:1}
.pj-mode-rec .pj-grec{opacity:1}
.pj-chips{position:absolute;z-index:7;right:9px;top:9px;display:inline-flex;gap:3px;background:rgba(255,255,255,.9);
  border:1px solid rgba(20,28,46,.1);border-radius:9px;padding:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pj-chips button{border:0;background:transparent;font:700 9.5px 'Manrope',sans-serif;color:var(--muted);padding:5px 9px;border-radius:7px;cursor:pointer;transition:background .2s,color .2s}
.pj-chips button.on{background:#1B1F3B;color:#fff}
.pj-chips button:focus-visible{outline:2px solid var(--rec);outline-offset:1px}
/* the plot's upper-left is empty in every mode (that is the shape of the real data), so the
   legend lives there as a compact two-column block rather than eating chart height */
.pj-legend{position:absolute;z-index:6;left:calc(3.667% + 11px);top:7px;display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(3,auto);gap:2px 12px;justify-items:start;
  background:rgba(255,255,255,.86);border:1px solid rgba(20,28,46,.07);border-radius:8px;padding:5px 8px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pj-legend span{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.pj-legend i{width:13px;height:0;border-top:3px solid var(--muted-2);border-radius:2px}
/* current test vs projection is a line STYLE distinction, so both swatches stay neutral in
   every mode; colour is what the metric rows below them explain */
.pj-legend .lp i{border-top-style:dotted;border-top-width:3.5px}
.pj-legend .lfat i{border-top-color:var(--green)}
.pj-legend .lcarb i{border-top-color:var(--carb)}
.pj-legend .lz i{width:12px;height:9px;border:1px solid rgba(15,118,110,.3);background:var(--fatmax);border-radius:2.5px}
.pj-legend .lla i{border-top-color:#F5A623}
.pj-legend .lrc i{border-top-color:var(--rec)}
.pj-legend .lac2 i{border-top-color:var(--acc)}
.pj-legend .lla,.pj-legend .lrc,.pj-legend .lac2{display:none}
.pj-mode-lac .pj-legend .lfat,.pj-mode-lac .pj-legend .lcarb,.pj-mode-lac .pj-legend .lz,
.pj-mode-rec .pj-legend .lfat,.pj-mode-rec .pj-legend .lcarb,.pj-mode-rec .pj-legend .lz{display:none}
.pj-mode-lac .pj-legend .lla{display:inline-flex}
.pj-mode-rec .pj-legend .lrc,.pj-mode-rec .pj-legend .lac2{display:inline-flex}
.pj-pill{position:absolute;z-index:6;left:0;top:0;transform:translate(-50%,-130%);will-change:left,top;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--green);
  background:rgba(240,250,248,.94);border:1px solid rgba(15,118,110,.24);border-radius:999px;padding:5px 10px;
  font-variant-numeric:tabular-nums;transition:opacity .35s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pj-pill.neg{color:#b4231b;background:rgba(253,244,243,.94);border-color:rgba(230,38,28,.2)}
.pj-pill.neg svg{transform:rotate(180deg)}
.pj-pill svg{width:9px;height:9px}
.pj-pill.hide{opacity:0}
.pj-foot{margin:11px 2px 0;font-size:11.5px;line-height:1.5;color:var(--muted-2);font-weight:600}

/* ===== digital twin : tested athlete | projection console | his twin ===== */
.dt-head{text-align:center;max-width:860px;margin:0 auto clamp(30px,3.6vw,50px)}
.dt-head .sec-title{margin:0 0 16px}
.dt-head .sec-sub{margin-left:auto;margin-right:auto;max-width:64ch}
/* the console is the working part, so it takes the middle and the larger share */
.dt-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.66fr) minmax(0,.8fr);
  gap:clamp(14px,2vw,34px);align-items:center}
.dt-fig{margin:0;min-width:0;display:flex;flex-direction:column;gap:11px}
/* the pair are cut out and dissolve at the thigh, so they sit straight on the page */
.dt-cut{width:100%;height:auto;display:block;margin-bottom:-6px}
.dt-cap{text-align:center;margin-top:2px}
.dt-cap b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.dt-cap i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted-2);margin-top:2px}
/* connector bus. Stroke conventions are the testing page's ts2-s comets: 1.4px
   non-scaling stroke, neutral bed, a red dash running along it. The x positions are
   measured from the real column centres at runtime so the stubs cannot drift. */
.dt-bus{position:relative;height:58px;margin-top:8px;max-width:100%}
.dt-bus svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dt-s{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.dt-bed .dt-s{stroke:rgba(27,31,59,.18)}
.dt-run .dt-s{stroke:var(--red);stroke-dasharray:18 260;stroke-dashoffset:278;
  animation:dtFlow 2.6s cubic-bezier(.5,0,.4,1) infinite}
.dt-run .r2{animation-delay:.62s}
@keyframes dtFlow{from{stroke-dashoffset:278}to{stroke-dashoffset:0}}
.dt-jn{fill:rgba(27,31,59,.3)}
@media(prefers-reduced-motion:reduce){.dt-run{display:none}}

/* below the laptop breakpoint the console needs the full row, the pair stays a pair */
@media(max-width:1080px){
  .dt-stage{grid-template-columns:1fr 1fr}
  .dt-bus{display:none}
  .dt-mid{grid-column:1/-1;order:2}
  .dt-fig{order:1}
}
@media(max-width:560px){
  .dt-stage{gap:12px}
  .dt-cap b{font-size:12px}
  .dt-cap i{font-size:10.5px}
  .pj-srow{grid-template-columns:78px minmax(0,1fr) 88px;gap:8px}
  .pj-srow label{font-size:10.5px}
  .pj-val{font-size:11px}
  .pj-legend{display:none}
}

/* ===== 2026-08-24 mobile batch =====
   ski panel joins the containment rules it was born outside of; floats shrink
   below the athlete instead of dwarfing him; weather chips hold one row;
   the science deck gets visible swipe arrows; cloud globe and device tiles
   get room instead of being cropped. */
@media(min-width:641px) and (max-width:900px){
  .ski-vis{min-height:340px}
  .ski-vis .ski-ath{width:52%;left:36%;bottom:0}
  .ft-window .gf-gauge{width:78px;padding:8px 9px 9px}
  .ft-window .gf-gauge b{font-size:9px}
  .ft-window .gfloat .gf-val,.ft-window .gf-gauge .mg-v{font-size:11px}
  .ft-window .gf-graph{width:min(46%,158px);padding:8px 9px 9px}
  .ft-window .gf-graph b{font-size:9px}
  .ski-vis .ski-lac{width:min(44%,158px)}
}
@media(max-width:640px){
  .cn-chips{display:flex;flex-wrap:nowrap;gap:6px;justify-content:space-between}
  .cn-chips .et-ic{flex:1 1 0;width:auto;min-width:0;padding:9px 3px 8px;gap:5px}
  .cn-chips .et-ic svg{width:19px;height:19px}
  .cn-chips .et-ic span{font-size:8.5px;letter-spacing:0;white-space:nowrap}
  .lp5-bento2 .lp5-card.lp5-cloud{min-height:236px}
  .cld-globe{height:56%;left:-8%;right:-8%}
  .dv-tiles{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .dv-t{flex:0 0 auto}
  .dv-flow .p7-svg{display:none}
}
.sci-nav{display:none}
@media(max-width:860px){
  .sci-nav{display:flex;gap:10px;order:3;margin:12px 0 0;align-self:center}
  .sci-ar{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;
    display:grid;place-items:center;color:var(--ink);cursor:pointer;
    box-shadow:0 10px 24px -16px rgba(14,22,38,.4);transition:opacity .3s,transform .2s}
  .sci-ar svg{width:20px;height:20px}
  .sci-ar:active{transform:scale(.96)}
  .sci-ar[disabled]{opacity:.32;pointer-events:none}
}



/* ===== 2026-08-24 mobile batch 2 =====
   Tabs: on phones the overlap composition cannot work (floats dwarf the athlete
   and cover text), so the vis becomes a stacked column: athlete, then cards.
   Solution dashboard: taller mobile window so the second graph clearly shows.
   Science deck: room for card shadows + centred caption. Bento: the orbit gets
   real height below the text; device row loses the logo node and dead space. */
@media(max-width:640px){
  /* -- solution dashboard: show clearly more than one graph -- */
  #solution .lp4-frame{max-height:clamp(860px,275vw,1240px)}
  /* -- science deck: shadow room + centred chip -- */
  .lp6c-deck{padding:8px 8px 30px;margin:0 -8px}
  .lp6c-stage .lp6-caption{align-self:center;text-align:center}
  /* -- bento: all-data orbit contained below the text -- */
  .lp5-bento2 .lp5-card.lp5-feat{min-height:460px}
  .lp5-feat .adp{min-height:250px;transform:scale(.74);transform-origin:center 40%}
  /* -- bento: device row without the logo node or dead space -- */
  .dv-node{display:none}
  .dv-flow{min-height:0;margin-top:8px;gap:8px}
}

/* ===== tabs on phones: the DESKTOP overlay composition, scaled as one canvas.
   The vis lays out at a 200%-wide (=2x) canvas with the original desktop
   geometry restored (athlete overlap, floating gauges, graph cards), then the
   whole canvas scales 0.5. Layout height is compensated with a negative
   margin. Negative side-offsets are pulled to 0 so nothing pokes past the
   viewport. Chips freeze at their orbit spots (the dive animation is what
   made them overlap). */
@media(max-width:640px){
  .ft-window .ft-panels{height:auto}
  .ft-window .fuel-vis,.ft-window .ski-vis,.ft-window .lim-vis,.ft-window .zn-vis{
    position:relative;width:200%;height:560px;min-height:0;
    transform:scale(.5);transform-origin:top left;margin-bottom:-280px}
  .fuel-vis .fuel-ath{position:absolute;left:38%;bottom:-14%;transform:translateX(-50%);height:132%;width:auto}
  .lim-vis .lim-ath{position:absolute;left:40%;bottom:-12%;transform:translateX(-50%);height:118%;width:auto}
  .zn-vis .zn-ath{position:absolute;left:31%;bottom:-10%;transform:translateX(-50%);height:118%;width:auto}
  .ski-vis .ski-ath{position:absolute;left:33%;bottom:-4%;transform:translateX(-50%);width:56%;height:auto}
  .ft-window .gf-gauge{width:122px;padding:11px 13px 12px}
  .fuel-vis .fv-graph{right:0;bottom:4%;width:min(58%,300px)}
  .fuel-vis .fv-fat{left:2%;top:15%}
  .fuel-vis .fv-carb{right:10%;top:3%}
  .lim-vis .lim-radar{right:0;bottom:2%;width:min(56%,262px)}
  .lim-vis .lim-vla{left:1%;top:42%}
  .ski-vis .ski-lac{right:0;top:16%;width:280px}
  .ski-vis .ski-rec{left:0;bottom:16%}
  .zn-vis .zn-card{position:absolute;right:0;bottom:5%;width:min(88%,452px);transform:none;margin:0}
  /* bento orbit: the chips are % positioned inside the card, and on a narrow
     card the % gaps compress while chip widths do not, so rows collide.
     Re-place them with full row separation (>= chip height between rows);
     the dive animation stays. */
  .adp1 .adp-it{z-index:2}
  .adp1 .adp-lap{z-index:1}
  .adp1 .s1{top:19%}
  .adp1 .s2{left:1%;top:33%}
  .adp1 .s5{right:1%;top:33%}
  .adp1 .s3{left:0;top:56%}
  .adp1 .s6{right:0;top:56%}
  .adp1 .s4{left:6%;top:84%}
  .adp1 .s7{right:4%;top:84%}
}
/* SSR embed wrappers must not become containing blocks (sticky nav) */
#elite-root .w-embed{display:contents}