body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Arcform: Form, Refined. The page reads like a precision instrument: ink lines, lime joints, numbers set large.
   Two modes: light (paper and ink) and dark (the app's Ink and Lime). js/theme.js sets data-mode on <html> before the page paints,
   and applies the app colour theme saved on Support or Privacy (--accent, and the dark palette as --d-*). */
:root{
  --paper:#F5F6F3; --white:#FFFFFF; --ink:#0B0E11; --graphite:#59626A; --rule:#DCE0DA;
  --accent:#C8F169; --accent-ink:#0B1204; --hl:#C8F169; --bone:#3FE06A;
  /* light mode */
  --bg:var(--paper); --solid:var(--white); --line:var(--rule); --fg:var(--ink); --muted:var(--graphite);
  --fill:var(--hl); --fill-ink:var(--accent-ink); /* lime surfaces: buttons, joints, the main fix */
  --acc-text:color-mix(in oklab,var(--fill) 36%,#0B0E11); /* the accent as readable text on paper */
  --good:hsl(134 64% 28%); --ok:hsl(48 85% 28%); /* form scores */
  --chart:var(--fg); --focus:var(--ink);
  --warn:#ffb44d; --rec:#ff5d5d;
  --display:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--body); /* small labels and readouts are set in the text face; monospace is for code only */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.75,0,.2,1); --ease-out:cubic-bezier(.23,1,.32,1);
  --wrap:1320px; --gut:20px; --sec:clamp(104px,12vw,184px); --bar-h:64px;
  color-scheme:light;
}
:root[data-mode="dark"]{
  --bg:var(--d-bg,#07090C); --solid:var(--d-solid,#0E1217); --line:var(--d-line,#1C232C); --fg:var(--d-fg,#EEF2F0); --muted:var(--d-muted,#7C8791);
  --fill:var(--accent); --acc-text:var(--accent);
  --good:hsl(128 72% 52%); --ok:hsl(68 80% 52%);
  --chart:var(--accent); --focus:var(--accent);
  color-scheme:dark;
}
:root{
  --text:color-mix(in srgb,var(--fg) 84%,var(--bg)); /* body copy, a step softer than headings */
  --surface:color-mix(in srgb,var(--fg) 4%,transparent);
  --surface-2:color-mix(in srgb,var(--fg) 7%,transparent); /* quiet fills for secondary buttons and chips, instead of outlines */
  --surface-3:color-mix(in srgb,var(--fg) 11%,transparent);
  --line-2:color-mix(in srgb,var(--line) 70%,var(--fg));
  --solid-2:color-mix(in srgb,var(--solid) 95%,var(--fg));
  --dim:var(--muted);
}
@media (min-width:768px){:root{--gut:40px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Lenis smooth scroll (js/vendor/lenis.min.js) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
/* switching modes: the new mode is revealed in a circle from the toggle (js/home.js) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
body{background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--bg)}
::selection{background:var(--fill);color:var(--fill-ink)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
h2{font-size:clamp(40px,5.2vw,80px);font-weight:500;letter-spacing:-.045em;line-height:.98}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:120;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.eyebrow{font:600 13.5px/1.2 var(--body);color:var(--acc-text)}
.muted{color:var(--muted)}
main,footer{position:relative;z-index:1}
main section[id]{scroll-margin-top:72px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.logo{display:block;width:auto;height:20px;color:var(--fg)}
.logo-dot{fill:var(--fill);stroke:var(--logo-rim,none);stroke-width:4.5}
:root[data-mode="light"]{--logo-rim:var(--fg)} /* lime joints need an ink rim on paper, like the skeleton's; a custom property because <use> copies can't see ancestor selectors */
.lede{font-size:clamp(17px,1.35vw,19.5px);line-height:1.55;color:var(--text);max-width:44ch}
.note{font-size:15px;color:var(--muted)}
.note a{color:var(--fg);text-underline-offset:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15.5px/1 var(--body);padding:16px 24px;border-radius:8px;border:0;text-decoration:none;white-space:nowrap;cursor:pointer;color:inherit;background:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--fill);color:var(--fill-ink)}
.btn-ghost{background:var(--surface-2);color:var(--fg)}
.btn-sm{padding:11px 18px;font-size:14.5px}
@media (hover:hover){
  .btn-primary:hover{background:color-mix(in srgb,var(--fill) 86%,var(--fg))}
  .btn-ghost:hover{background:var(--surface-3)}
}

/* top bar, after WHOOP's: a solid ink strip in both modes with the wordmark, the pages in capitals and the main button.
   It slides away as you scroll down and comes back on the way up (js/site.js). Under 1180px the pages move into the menu */
.nav{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);background:var(--d-bg,#07090C);color:var(--d-fg,#EEF2F0);transition:transform .32s var(--ease-out);
  --bg:var(--d-bg,#07090C); --fg:var(--d-fg,#EEF2F0); --muted:var(--d-muted,#8A949D); --line:var(--d-line,#1C232C);
  --fill:var(--accent); --acc-text:var(--accent); --focus:var(--accent); --logo-rim:none;
  --surface-2:color-mix(in srgb,var(--fg) 10%,transparent); color-scheme:dark}
.nav.away{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;gap:24px;height:var(--bar-h);padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px))}
.brand{display:block;padding:8px 0;flex:none}
.links{display:flex;align-items:center;gap:clamp(28px,3vw,48px);margin-inline:auto;font:600 13.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase}
.links a{position:relative;padding:10px 0;color:color-mix(in srgb,var(--fg) 78%,transparent);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.links a[aria-current="page"]{color:var(--fg)}
.links a[aria-current="page"]::after{transform:none}
@media (hover:hover){.links a:hover{color:var(--fg)}.links a:hover::after{transform:none}}
.nav-act{position:relative;display:flex;align-items:center;gap:8px;flex:none}
.nav-cta{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:14px 20px}
/* Sign in: arcform.fit/app, the dashboard (built from artifacts/dashboard). Set like the page links, and it stays in the bar on phones */
.nav-sign{position:relative;padding:10px 8px;font:600 13.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--fg) 78%,transparent);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.nav-sign::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.nav-sign[aria-current="page"]{color:var(--fg)}
.nav-sign[aria-current="page"]::after{transform:none}
@media (hover:hover){.nav-sign:hover{color:var(--fg)}.nav-sign:hover::after{transform:none}}
.mode,.menu-btn,.paint{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:8px;border:0;background:none;color:var(--fg);cursor:pointer;transition:background-color .2s ease,transform .16s var(--ease-out)}
.mode:active,.menu-btn:active,.paint:active{transform:scale(.94)}
.mode svg,.paint svg{grid-area:1/1;width:18px;height:18px;transition:opacity .3s ease,transform .5s var(--ease-out)}
.paint::after{content:"";position:absolute;right:8px;bottom:8px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.paint[aria-expanded="true"]{background:var(--surface-2)}
[data-mode="light"] .mode .i-sun,[data-mode="dark"] .mode .i-moon{opacity:0;transform:rotate(-70deg) scale(.6)}
@media (hover:hover){.mode:hover,.menu-btn:hover,.paint:hover{background:var(--surface-2)}}
.menu-btn{display:none}
.menu-btn i{position:absolute;left:12px;right:12px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.menu-btn i:first-child{top:17px}
.menu-btn i:last-child{top:24px}
.menu-btn[aria-expanded="true"] i{top:20.5px}
.menu-btn[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}
.menu{position:fixed;left:0;right:0;bottom:0;top:calc(var(--bar-h) + env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:32px;padding:16px max(var(--gut),env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(var(--gut),env(safe-area-inset-left,0px));background:var(--bg)}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font:500 clamp(30px,8.4vw,44px)/1.1 var(--display);letter-spacing:-.035em;text-decoration:none;animation:menuIn .5s var(--ease-out) both}
.menu nav a[aria-current="page"]{color:var(--acc-text)}
.menu nav a:nth-child(2){animation-delay:.03s}.menu nav a:nth-child(3){animation-delay:.06s}.menu nav a:nth-child(4){animation-delay:.09s}.menu nav a:nth-child(5){animation-delay:.12s}.menu nav a:nth-child(6){animation-delay:.15s}
.menu .btn{align-self:flex-start}
@keyframes menuIn{from{opacity:0;transform:translateY(10px)}}
html.menu-open{overflow:hidden}
/* the theme picker: the app's eight themes, a flat panel under the bar (js/site.js) */
.themes{position:absolute;top:calc(100% + 11px);right:0;width:min(392px,calc(100vw - 32px));padding:16px;border-radius:12px;background:var(--d-solid,#0E1217);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .3s var(--ease-out),visibility 0s .3s;z-index:5}
.themes.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease-out),visibility 0s}
.th-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 4px 12px;font-size:14px}
.th-head b{font-weight:600}
.th-head small{font-size:13px;color:var(--muted)}
.th-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.th-tile{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:8px;background:var(--surface-2);border:0;color:var(--fg);font:600 14px/1.25 var(--body);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background-color .2s}
.th-tile:hover{background:color-mix(in srgb,var(--fg) 14%,transparent)}
.th-tile[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--accent)}
.th-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.th-top svg{width:14px;height:14px;color:var(--accent);opacity:0;flex:none;margin-top:1px}
.th-tile[aria-checked="true"] .th-top svg{opacity:1}
.th-sw{display:flex;gap:6px}
.th-sw i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}

/* hero: the headline over the push up clip (no overlay), washed with the page colour on the text side so it stays readable */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:max(620px,min(100svh,1100px));padding-block:calc(72px + 6vh) clamp(48px,9vh,104px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 64%;transform:scale(1.16);transform-origin:0% 64%;animation:fadeIn 1.6s ease .2s both}
[data-mode="dark"] .hero-video{filter:brightness(.6) saturate(.85)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 30%,color-mix(in srgb,var(--bg) 24%,transparent) 56%,transparent 74%),linear-gradient(0deg,var(--bg) 0%,transparent 24%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 72%,transparent) 0%,transparent 16%)}
.hero-top{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,3vw,40px);width:100%}
.hero-pause{position:absolute;transition:background-color .2s ease,transform .16s var(--ease-out);right:max(var(--gut),env(safe-area-inset-right,0px));bottom:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:8px;border:0;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg);cursor:pointer}
.hero-pause:active{transform:scale(.94)}
.hero-pause svg{grid-area:1/1;width:16px;height:16px}
.hero-pause .i-play,.hero-pause.paused .i-pause{display:none}
.hero-pause.paused .i-play{display:block}
@media (hover:hover){.hero-pause:hover{background:color-mix(in srgb,var(--bg) 92%,transparent)}}
.hero-h{font-size:clamp(60px,9.8vw,144px);font-weight:500;letter-spacing:-.055em;line-height:.88;margin-left:-.04em}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero-h .ln>span{display:block;animation:lineUp 1.2s var(--ease-out) .15s both}
.hero-h .ln+.ln>span{animation-delay:.27s}
@keyframes lineUp{from{transform:translateY(106%)}}
.hero-side{display:flex;flex-direction:column;gap:26px;max-width:520px;animation:fadeUp 1s var(--ease-out) .55s both}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
@keyframes fadeIn{from{opacity:0}}
.reading{padding-top:clamp(40px,5vw,72px)}
.trace{margin:0}
.trace-band{position:relative;height:clamp(240px,38vh,400px);border-block:1px solid var(--line);animation:fadeIn 1.2s ease .35s both}
.trace-band canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.trace-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;padding-block:16px;font-size:13.5px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px}
.legend>span{display:inline-flex;align-items:center;gap:8px}
.lg-line{width:20px;height:2px;border-radius:2px;background:var(--fg)}
.lg-rep{width:2px;height:11px;border-radius:1px;background:var(--fg)}
.lg-cue{width:9px;height:9px;border-radius:50%;background:var(--fill);box-shadow:0 0 0 1.5px var(--fg)}

/* film: the wide stock clip, with Arcform's skeleton drawn over it. It opens out to the full width as it scrolls in */
.film{padding-top:var(--sec)}
.film-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.film-frame{position:relative;height:min(82vh,52.7vw);min-height:420px;overflow:hidden;background:#0b0e11}
.film-video,.film-sk{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-video{object-fit:cover;object-position:46% 50%}
.film-sk{pointer-events:none}
.film-ui{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:8px;padding-top:clamp(16px,2.4vw,28px)}
.fm-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:6px;background:rgba(11,14,17,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:500 14px/1 var(--body);font-variant-numeric:tabular-nums}
.fm-chip b{font-weight:600}
.fm-lift i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}
.fm-lift.found i{background:#3fe06a;box-shadow:0 0 8px #3fe06a}

/* phone frame: always a black phone, in both modes */
.phone{position:relative;border-radius:44px;padding:7px;background:linear-gradient(160deg,#3a4048,#0b0e11 42%,#23282e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);max-width:100%}
.screen{position:relative;border-radius:37px;overflow:hidden;background:#000;aspect-ratio:920/2000;isolation:isolate}

/* sections */
.sec{padding-block:var(--sec)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,96px)}

/* how it works */
.how{border-top:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:center}
.how-stage{position:relative;display:grid;place-items:center;padding:clamp(32px,4.5vw,64px) 0;border-radius:12px;background:var(--solid)}
.how-stage .phone{width:min(300px,72%)}
.how-copy{display:flex;flex-direction:column;align-items:flex-start;gap:40px;min-width:0}
.how-copy h2{font-size:clamp(40px,4.4vw,72px)}
.how-copy .lede{max-width:52ch}

/* lifts: what Arcform checks, by the equipment you train with, each shown with the app's own 3D model turning slowly (js/home.js, assets/models.json) */
.lifts{border-top:1px solid var(--line)}
.lift-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,24px)}
.lift{margin:0;display:flex;flex-direction:column;gap:16px;min-width:0}
.l-wide{grid-column:span 7}
.l-narrow{grid-column:span 5}
.model-box{position:relative;height:clamp(260px,28vw,440px);border-radius:12px;background:var(--solid);overflow:hidden}
.model{position:absolute;inset:0;width:100%;height:100%;display:block}
.model-tag{position:absolute;left:16px;top:14px;font-size:13px;font-weight:500;color:var(--muted)}
.lift h3{font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.02em}
.lift p{margin-top:6px;max-width:46ch;color:var(--muted);font-size:15.5px}

/* the score */
.score{background:var(--solid);border-block:1px solid var(--line)}
.score-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end}
.bs-num{display:flex;align-items:flex-end;gap:14px}
.bs-num b{font:800 clamp(180px,30vw,440px)/.74 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-left:-.05em}
.bs-num span{font:600 clamp(24px,2.6vw,40px)/1 var(--display);color:var(--muted);padding-bottom:.25em}
.bs-meta{margin-top:24px;font-size:15.5px;color:var(--muted)}
.checks{margin:0;display:flex;flex-direction:column}
.checks div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;border-top:1px solid var(--line)}
.checks div:last-child{border-bottom:1px solid var(--line)}
.checks dt{font:650 clamp(20px,1.8vw,26px)/1.1 var(--display);letter-spacing:-.025em}
.checks dd{margin:0;font-size:15px;font-weight:500}
.checks dd.good{display:flex;align-items:center;gap:8px;color:var(--good)}
.checks dd.good::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.checks .fix dd span{display:inline-block;padding:6px 10px;border-radius:4px;background:var(--fill);color:var(--fill-ink);font-size:13.5px;font-weight:600}
.fix-panel{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);margin-top:clamp(48px,6vw,88px);border-radius:12px;background:var(--bg);overflow:hidden}
.fix-main{padding:clamp(24px,3vw,44px)}
.fix-main h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.035em}
.fix-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 36px;margin:26px 0 0}
.fix-grid dt{font-size:13.5px;color:var(--muted)}
.fix-grid dd{margin:6px 0 0;font-size:16px;line-height:1.5}
/* every rep: thin flat bars on a labelled 85 to 100 scale, the set average as a dashed rule, the best rep in lime */
.rep-bars{display:flex;flex-direction:column;padding:clamp(24px,3vw,44px)}
.rb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rb-h{font-size:15px;font-weight:600}
.rb-avg{font-size:13.5px;color:var(--muted)}
.rb-avg b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.bars{--lo:85;--hi:100;--ph:150px;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;height:calc(var(--ph) + 30px);margin:28px 34px 0 0;border-bottom:1px solid var(--fg)}
.bars .gl{position:absolute;left:0;right:-4px;bottom:calc((var(--v) - var(--lo)) / (var(--hi) - var(--lo)) * var(--ph));height:0;border-top:1px solid var(--line);pointer-events:none}
.bars .gl em{position:absolute;right:-32px;top:-7px;font:500 12px/1 var(--body);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.bars .avg{border-top:1.5px dashed var(--muted);z-index:1}
.bars .avg em{color:var(--fg);font-weight:600}
.bars div{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.bars b{font:600 13.5px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--muted)}
.bars i{display:block;width:12px;height:calc((var(--s) - var(--lo)) / (var(--hi) - var(--lo)) * var(--ph));border-radius:2px 2px 0 0;background:var(--fg);transform-origin:bottom}
.bars .best b{color:var(--fg)}
.bars .best i{background:var(--fill);box-shadow:inset 0 0 0 1.5px var(--fg)}
.rb-reps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:10px 34px 0 0;font-size:12px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.rb-note{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* coach */
.coach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.coach-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.coach-copy h2{font-size:clamp(40px,4.4vw,72px)}
.chat{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:12px;background:var(--solid);min-width:0}
.chat-head{display:flex;align-items:center;gap:12px;padding-bottom:4px}
.chat-head b{display:block;font:650 16px/1.2 var(--display);font-stretch:106%}
.chat-head small{font-size:13px;color:var(--muted)}
.orb{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--fill);color:var(--fill-ink)}
.orb svg{width:18px;height:18px}
.thread{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:276px}
.msg{max-width:88%;padding:12px 16px;border-radius:10px;background:var(--bg);font-size:15.5px;line-height:1.55}
.msg.me{align-self:flex-end;border-radius:10px;background:var(--fill);color:var(--fill-ink);font-weight:500}
.msg.me.pop{animation:msgIn .35s var(--ease-out)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.98)}}
.answer .who{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:500 12.5px var(--body);color:var(--muted)}
@keyframes blink{to{visibility:hidden}}
.answer .caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--fg);animation:blink 1s steps(2,start) infinite}
.wave{display:inline-flex;align-items:center;gap:3px;height:16px}
.wave i{width:3px;height:30%;border-radius:2px;background:var(--acc-text);animation:wv 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}.wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}
@keyframes wv{0%,100%{height:25%}50%{height:100%}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.qchip{padding:10px 14px;border-radius:8px;border:0;background:var(--surface-2);color:var(--fg);font:500 14.5px var(--body);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.qchip:active{transform:scale(.97)}
@media (hover:hover){.qchip:hover{background:var(--surface-3)}}
.qchip[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.composer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 18px;border-radius:10px;background:var(--bg);font-size:14.5px;color:var(--muted)}
.composer .mic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:8px;background:var(--fill);color:var(--fill-ink)}
.composer svg{width:18px;height:18px}
.chat-note{font-size:13px;color:var(--muted)}

/* training and progress */
.plan-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:stretch}
.panel{min-width:0;padding:clamp(22px,2.6vw,36px);border-radius:12px;background:var(--solid)}
.p-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.p-h{font:650 20px/1.2 var(--display);letter-spacing:-.02em}
.p-meta{font-size:13.5px;color:var(--muted);white-space:nowrap}
.p-meta.up{color:var(--good);font-weight:600}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:24px;text-align:center;font:600 13px/1 var(--body);color:var(--muted)}
.week span{display:flex;flex-direction:column;align-items:center;gap:8px}
.week i{display:block;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2)}
.week small{font:500 11.5px/1 var(--body)}
.week .on{color:var(--fg)}
.week .on i{border-color:var(--fg);background:radial-gradient(circle,var(--fill) 0 32%,transparent 35%)}
.week .done i{border-color:var(--fg);background:var(--fill)}
.week .rest i{width:12px;height:2px;margin-block:14px;border:0;border-radius:2px;background:var(--line-2)}
.next{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.next-h{font:650 18px/1.3 var(--display);letter-spacing:-.015em}
.next-h span{margin-left:8px;font:500 13.5px var(--body);letter-spacing:0;color:var(--muted)}
.ex{list-style:none;margin:12px 0 0;padding:0}
.ex li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px;border-top:1px solid var(--line)}
.ex li:first-child{border-top:0}
.ex b{display:block;font-size:15.5px;font-weight:600}
.ex span{font-size:13.5px;color:var(--muted)}
.form-pill{padding:5px 8px;border-radius:4px;background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good);font:600 12px/1 var(--body);font-style:normal;white-space:nowrap}
.note-line{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:14px;border-radius:8px;background:var(--surface);font-size:14.5px;line-height:1.5;color:var(--text)}
.note-line b{margin-right:6px;color:var(--fg)}
.note-line .dot{width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;border:1.5px solid var(--fg);background:radial-gradient(circle,var(--fill) 0 30%,transparent 34%)}
.prog-card{display:flex;flex-direction:column}
.chart{display:block;width:100%;height:auto;margin-top:auto;padding-top:28px;overflow:visible}
.chart .gl path{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .area{fill:color-mix(in srgb,var(--fill) 24%,transparent)}
.chart .ln{fill:none;stroke:var(--chart);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart .pts circle{fill:var(--solid);stroke:var(--chart);stroke-width:2;vector-effect:non-scaling-stroke}
.chart .pts .last{fill:var(--fill);stroke:var(--fg)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:24px 0 0;border-top:1px solid var(--line)}
.stats div{min-width:0;padding-top:18px}
.stats div+div{padding-left:20px;border-left:1px solid var(--line)}
.stats dt{font-size:13px;color:var(--muted)}
.stats dd{margin:8px 0 0;font:700 clamp(34px,3.4vw,52px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* your data */
.trust{border-top:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.trust-copy{display:flex;flex-direction:column;gap:28px}
.statement{font:400 clamp(24px,2.4vw,36px)/1.3 var(--display);letter-spacing:-.02em;max-width:30ch}

/* join: an ink band in both modes, using the dark palette of the saved app theme */
.join{padding-block:var(--sec);background:var(--d-bg,#07090C);color:var(--d-fg,#EEF2F0);border-top:1px solid var(--line);
  --bg:var(--d-bg,#07090C); --fg:var(--d-fg,#EEF2F0); --muted:var(--d-muted,#8A949D); --line:var(--d-line,#1C232C);
  --fill:var(--accent); --acc-text:var(--accent); --focus:var(--accent); color-scheme:dark}
.join{position:relative;isolation:isolate;overflow:hidden}
/* the bench press clip plays behind the sign up, under a wash of the band colour that is heaviest where the words are */
.join-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.join-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.join-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 84%,transparent) 0%,color-mix(in srgb,var(--bg) 44%,transparent) 50%,color-mix(in srgb,var(--bg) 74%,transparent) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 30%),linear-gradient(180deg,var(--bg) 0%,transparent 22%)}
.join-ctl{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:flex-end;pointer-events:none}
.join-ctl .hero-pause{position:static;pointer-events:auto}
.join-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:end}
.join h2{font-size:clamp(44px,6.2vw,100px)}
.join-form{display:flex;flex-direction:column;gap:16px}
.signup{display:flex;flex-direction:column;gap:10px}
.signup .row{display:flex;flex-wrap:wrap;gap:10px}
.signup input{flex:1 1 180px;min-width:0;padding:15px 20px;border-radius:8px;border:0;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);font:16px var(--body)}
.signup input::placeholder{color:var(--muted)}
.signup .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.signup button:disabled{opacity:.6;cursor:progress}
.thanks{font-size:16px;color:var(--acc-text)}

/* footer */
.foot{padding-block:clamp(56px,6vw,88px) 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,6fr) repeat(2,minmax(0,3fr));gap:32px}
.foot-brand .logo-foot{height:24px}
.foot-brand p{margin-top:14px;font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px}
.foot-h{margin-bottom:4px;font-weight:600}
.foot nav a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.foot nav a:hover{color:var(--fg)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

@keyframes pop{from{transform:scale(.92);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{from{transform:scale(1);opacity:.7}to{transform:scale(1.45);opacity:0}}
/* ===== the app camera, drawn like the real Arcform camera screen. Sizes are in cqw of the phone screen (920 px wide screenshots / 9.2) ===== */
.acam{position:absolute;inset:0;container-type:inline-size;overflow:hidden;background:#000;color:#fff;font-family:var(--body);-webkit-user-select:none;user-select:none;--cam-accent:var(--accent);--cam-ink:var(--accent-ink)}
.acam video.feed,.acam canvas.sk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.acam canvas.sk{pointer-events:none}
.acam .fadeT{position:absolute;left:0;right:0;top:0;height:31%;background:linear-gradient(rgba(0,0,0,.72),transparent);pointer-events:none}
.acam .fadeB{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(transparent,rgba(0,0,0,.82));pointer-events:none}
.acam .sbar{position:absolute;top:0;left:0;right:0;height:11.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 7.5cqw 0 15.5cqw;font:600 4.1cqw/1 var(--body);z-index:10;letter-spacing:-.01em;pointer-events:none}
.acam .sbar svg{height:3.4cqw;width:auto;display:block}
.acam .sbar .r{display:flex;gap:1.6cqw;align-items:center}
.acam .island{position:absolute;top:3.1cqw;left:50%;width:27cqw;height:7.9cqw;margin-left:-13.5cqw;border-radius:99px;background:#000;z-index:11}
.glass{background:rgba(22,24,28,.62);border:.12cqw solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.acam .topbar{position:absolute;top:15.6cqw;left:3.8cqw;right:4.3cqw;height:8cqw;display:flex;align-items:center;justify-content:space-between;z-index:5}
.acam .pill{height:8cqw;border-radius:99px;display:inline-flex;align-items:center;gap:1.8cqw;padding:0 3.6cqw 0 3.3cqw;font:500 3.3cqw/1 var(--body);white-space:nowrap;transition:background .4s,color .4s}
.acam .pill svg{width:3.4cqw;height:3.4cqw;flex:none}
.acam .pill .spk{color:var(--cam-accent)}
.acam .pill.found{background:color-mix(in srgb,var(--cam-accent) 22%,rgba(22,24,28,.7));border-color:color-mix(in srgb,var(--cam-accent) 55%,transparent)}
.acam .icons{display:flex;gap:1.9cqw}
.acam .ico{width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;font:500 3.6cqw/1 var(--body);color:rgba(255,255,255,.88);padding:0}
.acam .ico svg{width:3.6cqw;height:3.6cqw}
.acam button.ico{cursor:pointer;color:#fff}
.acam .ico.on{color:var(--cam-accent);border-color:color-mix(in srgb,var(--cam-accent) 60%,transparent)}
.acam .ico.av{background:linear-gradient(#2A333D,#151A20);font-weight:600}
.acam .ico.coach{color:var(--cam-accent);border-color:color-mix(in srgb,var(--cam-accent) 60%,transparent)}
.acam .recpill{position:absolute;top:15.6cqw;left:50%;transform:translateX(-50%);height:8cqw;border-radius:99px;display:none;align-items:center;gap:1.6cqw;white-space:nowrap;padding:0 3.2cqw;font:600 3.3cqw/1 var(--body);font-variant-numeric:tabular-nums;z-index:5}
.acam .recpill i{width:2cqw;height:2cqw;border-radius:50%;background:#FF4D4F;box-shadow:0 0 1.6cqw #FF4D4F;animation:blink 1.2s steps(2,start) infinite}
.acam .recpill .rp-l{font-weight:500;color:rgba(255,255,255,.86)}
.acam .recpill .rp-l::before{content:"·";margin-right:1.6cqw;color:rgba(255,255,255,.5)}
.acam .recpill svg{width:2.6cqw;height:2.6cqw;color:rgba(255,255,255,.6)}
.acam .tmr{display:none;position:absolute;right:0;top:0}
.acam .head{position:absolute;top:27cqw;left:5.7cqw;font:700 8.6cqw/1.12 var(--body);letter-spacing:-.045em;z-index:4;transition:opacity .4s,transform .5s var(--ease)}
.acam .head em{display:block;font-style:normal;color:var(--cam-accent)}
.acam .reps{position:absolute;top:28cqw;left:5.7cqw;z-index:4;display:none;align-items:baseline;gap:2cqw}
.acam .reps b{font:700 23.6cqw/.9 var(--body);letter-spacing:-.045em;font-variant-numeric:tabular-nums;text-shadow:0 1cqw 6cqw rgba(0,0,0,.5)}
.acam .reps b.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.acam .reps span{font:600 3.85cqw/1 var(--body);color:#8A949D}
.acam .cue{position:absolute;left:5.7cqw;top:56cqw;transform:translateY(3cqw);max-width:88cqw;min-height:12.8cqw;display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 5cqw 2.4cqw 4cqw;border-radius:99px;background:var(--cam-accent);color:var(--cam-ink);font:700 5.4cqw/1.15 var(--body);letter-spacing:-.015em;opacity:0;transition:opacity .35s,transform .5s var(--ease);z-index:5;text-align:left}
.acam .cue svg{width:5cqw;height:5cqw;flex:none}
.acam .cue.on{opacity:1;transform:none}
.acam .status{position:absolute;left:50%;bottom:40.6cqw;transform:translateX(-50%);height:6.8cqw;border-radius:99px;display:flex;align-items:center;gap:2cqw;padding:0 3.8cqw;font:500 2.95cqw/1 var(--body);white-space:nowrap;z-index:5;color:rgba(255,255,255,.92)}
.acam .status i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--cam-accent);box-shadow:0 0 1.6cqw var(--cam-accent);flex:none}
.acam .ctrl{position:absolute;left:0;right:0;bottom:16.2cqw;height:21.4cqw;z-index:5}
.acam .ctrl>*{position:absolute;top:50%;transform:translate(-50%,-50%)}
.acam .thumb{left:13cqw;width:11cqw;height:11cqw;border-radius:2.6cqw;overflow:hidden;border:.45cqw solid rgba(255,255,255,.85);background:#333}
.acam .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.acam .c-share{left:26.3cqw;width:10.9cqw;height:10.9cqw}
.acam .c-timer{left:73.6cqw;width:10.9cqw;height:10.9cqw}
.acam .c-flip{left:86.8cqw;width:10.9cqw;height:10.9cqw}
.acam .c-share svg,.acam .c-timer svg,.acam .c-flip svg{width:4.4cqw;height:4.4cqw}
.acam .hurt{left:18cqw;width:26.7cqw;height:11.3cqw;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:1.6cqw;font:600 3.5cqw/1 var(--body);white-space:nowrap;opacity:0}
.acam .hurt svg{width:4cqw;height:4cqw;color:#FF9A9C}
.acam .last{left:82cqw;display:flex;flex-direction:column;align-items:center;gap:1cqw;opacity:0}
.acam .last small{font:600 2.82cqw/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#8A949D}
.acam .last b{font:700 6.67cqw/1 var(--body);color:var(--cam-accent);font-variant-numeric:tabular-nums}
.acam .c-timer svg{color:var(--cam-accent)}
.acam .c-timer em{position:absolute;top:-1.4cqw;right:-1.4cqw;width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--cam-accent);color:var(--cam-ink);font:700 2.6cqw/4.6cqw var(--body);font-style:normal;text-align:center}
.acam .shutter{left:50%;width:21.3cqw;height:21.3cqw;border-radius:50%;border:.55cqw solid var(--cam-accent);background:rgba(0,0,0,.25);padding:0;display:grid;place-items:center;cursor:pointer;color:var(--cam-ink);box-shadow:0 0 6cqw -1cqw color-mix(in srgb,var(--cam-accent) 55%,transparent)}
.acam .shutter .core{width:17.2cqw;height:17.2cqw;border-radius:50%;background:var(--cam-accent);display:grid;place-items:center;transition:transform .3s var(--ease)}
.acam .shutter:active .core{transform:scale(.92)}
.acam .shutter svg{width:6.6cqw;height:6.6cqw}
.acam .shutter .stop{display:none;width:6.67cqw;height:6.67cqw;border-radius:1.8cqw;background:var(--cam-ink)}
.acam .shutter .badge{position:absolute;top:-2.2cqw;right:-3.6cqw;min-width:7.2cqw;height:5cqw;padding:0 1.4cqw;border-radius:99px;background:#0b0c0f;border:.3cqw solid var(--cam-accent);color:#fff;font:600 2.8cqw/4.4cqw var(--body);font-style:normal;text-align:center}
.acam .shutter.ring::before,.acam .shutter.ring::after{content:"";position:absolute;inset:-.6cqw;border-radius:50%;border:.4cqw solid var(--cam-accent);animation:ripple 2.4s var(--ease) infinite;pointer-events:none}
.acam .shutter.ring::after{animation-delay:1.2s}
.acam .homei{position:absolute;bottom:10.4cqw;left:50%;width:9.8cqw;height:.95cqw;margin-left:-4.9cqw;border-radius:9cqw;background:rgba(255,255,255,.55);z-index:5}
.acam .veil{position:absolute;inset:0;background:rgba(0,0,0,.36);opacity:0;transition:opacity .4s;pointer-events:none;z-index:3}
.acam .count{position:absolute;left:0;right:0;top:38cqw;display:none;flex-direction:column;align-items:center;z-index:5;text-align:center}
.acam .count .rg{position:relative;width:53.8cqw;height:53.8cqw}
.acam .count svg{width:100%;height:100%;transform:rotate(-90deg)}
.acam .count circle{fill:none;stroke-width:1.3}
.acam .count .tr{stroke:rgba(255,255,255,.22)}
.acam .count .pr{stroke:var(--cam-accent);stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:0;filter:drop-shadow(0 0 1.2px var(--cam-accent))}
.acam .count b{position:absolute;inset:0;display:grid;place-items:center;font:700 30.8cqw/1 var(--body);letter-spacing:-.04em}
.acam .count b.tick{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.acam .count .ct{display:block;font:700 6.15cqw/1.2 var(--body);letter-spacing:-.02em;margin-top:5cqw}
.acam .count p{font:400 3cqw/1.3 var(--body);color:rgba(255,255,255,.55);margin-top:1.4cqw}
.acam .cancel{position:absolute;left:50%;bottom:17cqw;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:2.6cqw;z-index:6;background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.6);font:500 3cqw/1 var(--body)}
.acam .cancel span{width:21.3cqw;height:21.3cqw;border-radius:50%;border:.55cqw solid var(--cam-accent);display:grid;place-items:center;background:rgba(40,40,40,.7);color:#fff}
.acam .cancel svg{width:7cqw;height:7cqw}
.acam .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:12}
.acam .flash.go{animation:flashA .5s ease-out}
@keyframes flashA{from{opacity:.5}to{opacity:0}}
/* camera states */
.acam[data-state="countdown"] .veil{opacity:1}
.acam[data-state="countdown"] .head,.acam[data-state="countdown"] .ctrl,.acam[data-state="countdown"] .icons{opacity:0;pointer-events:none}
.acam[data-state="countdown"] .count,.acam[data-state="countdown"] .cancel{display:flex}
.acam[data-state="countdown"] .tmr{display:inline-flex}
.acam[data-state="countdown"] .status{bottom:48cqw}
.acam[data-state="rec"] .head,.acam[data-state="rec"] .status,.acam[data-state="rec"] .ad{opacity:0}
.acam[data-state="rec"] .reps{display:flex}
.acam[data-state="rec"] .recpill{display:inline-flex}
.acam[data-state="rec"] .icons .q,.acam[data-state="rec"] .icons .coach,.acam[data-state="rec"] .icons .av{display:none}
.acam[data-state="rec"] .shutter svg,.acam[data-state="rec"] .shutter .badge{display:none}
.acam[data-state="rec"] .shutter .stop{display:block}
.acam[data-state="rec"] .shutter.ring::before,.acam[data-state="rec"] .shutter.ring::after{display:none}
.acam[data-state="rec"] .c-timer,.acam[data-state="rec"] .c-share,.acam[data-state="rec"] .thumb,.acam[data-state="rec"] .c-flip{opacity:.0;pointer-events:none}
.acam[data-state="rec"] .hurt,.acam[data-state="rec"] .last{opacity:1}
.acam .ctrl>*{transition:opacity .35s}

/* the set review slides over the camera, as in the app (ClipReviewView): the top row, the clip with its rep controls, the Result, Reps and
   Next tiles you swipe through, and the log bar. While Arcform reads the set, the clip sits lower under "Review your form." with a spinner.
   Sizes are the app's points on a 390 pt screen (1 pt = .2564cqw); colours are the app camera's (LiveCameraUI) */
.arev{position:absolute;inset:0;z-index:8;background:#07090C;color:#F2F5F3;overflow:hidden;transform:translateY(102%);transition:transform .7s var(--ease-io);
  --rv-soft:#B8C2CA; --rv-muted:#8A949D; --rv-amber:#FFB547; --raised:linear-gradient(#10141A,#090C10)}
.acam[data-state="review"] .arev{transform:none}
.acam[data-state="review"] .sbar{background:linear-gradient(#07090C 72%,rgba(7,9,12,0))}
.arev .raised{background:var(--raised);box-shadow:0 .26cqw .51cqw rgba(0,0,0,.28),0 2.05cqw 3.6cqw rgba(0,0,0,.32)}
.arev button{font-family:var(--body);color:inherit}
.arev .rv-top{position:absolute;top:15.4cqw;left:4.62cqw;right:4.62cqw;height:10.26cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw;z-index:3}
.arev .rv-top .back{width:10.26cqw;height:10.26cqw;border-radius:50%;display:grid;place-items:center;flex:none;padding:0;cursor:pointer;color:#fff}
.arev .rv-top .back svg{width:4.4cqw;height:4.4cqw}
.arev .rv-chip{display:inline-flex;align-items:center;gap:1.6cqw;height:9.2cqw;padding:0 3.1cqw;border-radius:3.59cqw;font:500 3.59cqw/1 var(--body);white-space:nowrap;min-width:0}
.arev .rv-chip .spk{width:2.82cqw;height:2.82cqw;fill:var(--rv-muted);flex:none}
.arev .rv-chip>svg:last-child{width:2.56cqw;height:2.56cqw;color:var(--rv-muted);flex:none}
.arev .rv-ic{display:flex;gap:2cqw;flex:none}
.arev .rv-coach{width:10.26cqw;height:10.26cqw;border-radius:50%;display:grid;place-items:center;color:var(--cam-accent);background:rgba(0,0,0,.55)}
.arev .rv-coach svg{width:4.1cqw;height:4.1cqw}
.arev .rv-more{width:10.26cqw;height:10.26cqw;border-radius:3.59cqw;display:grid;place-items:center}
.arev .rv-more svg{width:4.6cqw;height:4.6cqw}
.arev .rv-wait{position:absolute;top:29cqw;left:4.62cqw;right:4.62cqw;transition:opacity .4s ease,transform .6s var(--ease)}
.arev .rv-wait .ey{font:600 2.6cqw/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cam-accent)}
.arev .rv-wait h5{margin:2.6cqw 0 0;font:700 8.3cqw/1.08 var(--body);letter-spacing:-.045em}
.arev .rv-wait h5 em{display:block;font-style:normal;color:var(--cam-accent)}
/* the clip: the set fitted whole in a wide box, with the app's 30 pt pills over it */
.arev .clip{position:absolute;left:4.62cqw;right:4.62cqw;top:28.7cqw;height:61.3cqw;border-radius:5.64cqw;background:#000;overflow:hidden;box-shadow:0 .26cqw .26cqw rgba(0,0,0,.3),0 3.6cqw 3.6cqw rgba(0,0,0,.4);transition:top .7s var(--ease-io),height .7s var(--ease-io)}
.arev[data-phase="wait"] .clip{top:55cqw;height:121cqw}
.arev .clip video,.arev .clip canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.arev .clip canvas{pointer-events:none}
.arev .clip .an{position:absolute;left:3.6cqw;right:3.6cqw;bottom:3.6cqw;padding:3.6cqw;border-radius:3.6cqw;display:flex;flex-direction:column;gap:1.6cqw;transition:opacity .4s,transform .5s var(--ease);z-index:2}
.arev .clip .an b{font:600 3.5cqw/1.2 var(--body);display:flex;align-items:center;gap:2.2cqw}
.arev .clip .an b i{width:3.6cqw;height:3.6cqw;border-radius:50%;border:.5cqw solid var(--cam-accent);border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
.arev .clip .an small{font:400 2.95cqw/1.3 var(--body);color:var(--rv-muted)}
.arev .cp{position:absolute;height:7.69cqw;border-radius:2.82cqw;background:rgba(7,9,12,.72);border:0;color:#EEF2F0;display:inline-flex;align-items:center;gap:1.6cqw;padding:0 2.8cqw;font:500 3.33cqw/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;z-index:2;transition:opacity .4s}
.arev button.cp{cursor:pointer}
.arev .c-all{top:3.08cqw;left:3.08cqw}
.arev .c-all b{font-weight:500}
.arev .c-all .c-time{color:#7C8791}
.arev .c-fault{top:3.08cqw;right:3.08cqw;color:var(--rv-amber);font-size:3.08cqw;opacity:0}
.arev .clip.rep .c-fault{opacity:1}
.arev .c-bar{position:absolute;left:3.08cqw;right:3.08cqw;bottom:3.08cqw;display:flex;align-items:center;gap:2.56cqw;z-index:2;transition:opacity .4s}
.arev .c-bar .cp{position:static}
.arev .c-play{width:9.23cqw;height:9.23cqw;padding:0;justify-content:center;border-radius:3.08cqw}
.arev .c-play svg{width:3.1cqw;height:3.1cqw}
.arev .c-track{position:relative;flex:1;height:.77cqw;border-radius:1cqw;background:rgba(255,255,255,.18)}
.arev .c-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:#EEF2F0}
.arev .c-track i::after{content:"";position:absolute;right:-1.41cqw;top:50%;width:2.82cqw;height:2.82cqw;margin-top:-1.41cqw;border-radius:50%;background:#EEF2F0}
.arev .c-rt{display:none;font:400 3.08cqw/1 var(--body);color:var(--rv-soft);font-variant-numeric:tabular-nums;text-shadow:0 0 1.6cqw rgba(0,0,0,.9),0 0 .5cqw rgba(0,0,0,.9)}
.arev .clip.rep .c-rt{display:block}
.arev .c-speed{height:9.23cqw;padding:0 2.6cqw;font-size:3.08cqw;font-weight:600}
/* Result, Reps, Next: the selected tab is a raised pill; the tiles snap, and the next one peeks in */
.arev .rv-tabs{position:absolute;top:93.1cqw;left:4.62cqw;right:4.62cqw;height:9.23cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.03cqw}
.arev .rv-tabs button{border:0;border-radius:3.08cqw;background:none;color:var(--rv-muted);font:500 3.33cqw/1 var(--body);cursor:pointer;padding:0}
.arev .rv-tabs button[aria-selected="true"]{background:linear-gradient(#161B22,#0D1116);color:#F2F5F3;font-weight:600}
.arev .tiles{position:absolute;top:105.4cqw;left:0;right:0;bottom:25.1cqw;display:flex;gap:2.05cqw;padding:0 6.41cqw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 6.41cqw;scrollbar-width:none;overscroll-behavior-x:contain}
.arev .tiles::-webkit-scrollbar{display:none}
.arev .tile{flex:0 0 87.18cqw;min-width:0;scroll-snap-align:start;border-radius:5.13cqw;padding:4.62cqw;overflow-y:auto;scrollbar-width:none;background:var(--raised);box-shadow:0 .26cqw .51cqw rgba(0,0,0,.28),0 2.05cqw 3.6cqw rgba(0,0,0,.32)}
.arev .tile::-webkit-scrollbar{display:none}
.arev .chip{display:inline-flex;align-items:center;justify-content:center;gap:1.5cqw;height:9.23cqw;padding:0 3.1cqw;border-radius:2.56cqw;border:0;background:rgba(255,255,255,.07);color:#F2F5F3;font:600 3.08cqw/1 var(--body);white-space:nowrap;flex:none}
.arev .chip svg{width:3.3cqw;height:3.3cqw}
.arev .chip.sm{height:8.2cqw}
.arev button.chip{cursor:pointer}
.arev .r-row{display:flex;align-items:center;gap:3.08cqw}
.arev .r-ring{position:relative;width:16.41cqw;height:16.41cqw;flex:none}
.arev .r-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.arev .r-ring circle{fill:none;stroke-width:2}
.arev .r-ring .tr{stroke:rgba(255,255,255,.08)}
.arev .r-ring .pr{stroke:var(--cam-accent);stroke-linecap:round;stroke-dasharray:194.8;stroke-dashoffset:194.8;transition:stroke-dashoffset 1.3s var(--ease)}
.arev .r-ring b{position:absolute;inset:0;display:grid;place-items:center;font:500 5.64cqw/1 var(--body);letter-spacing:-.036em;font-variant-numeric:tabular-nums}
.arev .r-v{display:flex;flex-direction:column;gap:1.2cqw;min-width:0;flex:1}
.arev .r-v small{font:400 3.08cqw/1.2 var(--body);color:var(--rv-muted)}
.arev .r-v b{font:500 4.62cqw/1.15 var(--body);letter-spacing:-.01em}
.arev .fixb{margin-top:3.08cqw;padding:3.08cqw 3.59cqw;border-radius:3.59cqw;background:rgba(255,255,255,.05)}
.arev .fixb small{display:block;font:600 2.82cqw/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--rv-muted)}
.arev .fixb b{display:block;margin-top:1.8cqw;font:700 4.87cqw/1.1 var(--body);letter-spacing:-.016em}
.arev .fixb p{margin-top:1.2cqw;font:400 3.59cqw/1.4 var(--body);color:var(--rv-soft)}
.arev .fixb .chips{display:flex;flex-wrap:nowrap;gap:2cqw;margin-top:2.8cqw}
.arev .r-win{margin-top:3.6cqw;font:400 3.59cqw/1.45 var(--body)}
.arev .r-win b{color:var(--cam-accent);font-weight:600}
.arev .tile .disc{margin-top:3.1cqw;font:400 2.82cqw/1.4 var(--body);color:var(--rv-muted)}
/* every rep: the app's chart. Solid bars in the score colour, 70 pt for a 100 and 0 for a 40, the score above and the rep number below; the best rep gets a star */
.arev .t-h{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw}
.arev .t-h small,.arev .t-k{display:block;font:600 2.82cqw/1 var(--body);letter-spacing:.145em;text-transform:uppercase;color:var(--rv-muted)}
.arev .t-h span{font:400 3.08cqw/1 var(--body);color:var(--rv-muted)}
.arev .chart{display:flex;align-items:flex-end;gap:1.28cqw;height:27.7cqw;margin-top:3.6cqw;padding:0;overflow:visible}
.arev .chart button{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1.03cqw;padding:1.03cqw .5cqw;border:0;border-radius:2.05cqw;background:none;cursor:pointer;transition:background-color .25s}
.arev .chart button.on{background:rgba(255,255,255,.08)}
.arev .chart b{display:flex;align-items:center;gap:.5cqw;font:600 2.82cqw/1 var(--body);font-variant-numeric:tabular-nums}
.arev .chart b svg{width:2.05cqw;height:2.05cqw;fill:currentColor}
.arev .chart button.best b,.arev .chart button.on b{font-weight:700}
.arev .chart i{display:block;width:100%;border-radius:1.54cqw;transform-origin:bottom;transform:scaleY(0);transition:transform .8s var(--ease)}
.arev[data-phase="done"] .chart i{transform:none}
.arev .chart small{font:400 2.82cqw/1 var(--body);color:var(--rv-muted)}
.arev .chart button.on small{color:#fff;font-weight:600}
.arev .hint{margin-top:2.6cqw;font:400 3.08cqw/1.35 var(--body);color:var(--rv-muted)}
.arev .bd{margin-top:2.6cqw;padding:3.08cqw;border-radius:3.08cqw;background:rgba(255,255,255,.05)}
.arev .bd-h{display:flex;align-items:center;gap:2cqw}
.arev .bd-h b{font:600 3.85cqw/1 var(--body);font-variant-numeric:tabular-nums}
.arev .bd-h em{font:600 2.82cqw/1 var(--body);font-style:normal;color:var(--cam-accent);background:color-mix(in srgb,var(--cam-accent) 14%,transparent);padding:1.1cqw 2.2cqw;border-radius:99px}
.arev .bd-h .chip{margin-left:auto;height:7.2cqw}
.arev .bd-f{display:flex;align-items:center;gap:2cqw;margin-top:2.6cqw;font:400 3.33cqw/1.3 var(--body)}
.arev .bd-f i{width:1.54cqw;height:1.54cqw;border-radius:50%;background:var(--rv-soft);flex:none}
.arev .bd-f small{margin-left:auto;color:var(--rv-soft);font-size:3.08cqw}
.arev .bd-f span.pts{color:var(--rv-muted);font-size:3.08cqw;font-variant-numeric:tabular-nums;min-width:6cqw;text-align:right}
.arev .bd p{margin-top:1.8cqw;font:400 3.08cqw/1.35 var(--body);color:var(--rv-muted)}
.arev .faults{margin-top:3.08cqw;border-top:.26cqw solid rgba(255,255,255,.09)}
.arev .fr{display:grid;grid-template-columns:minmax(0,1fr) auto 15.9cqw;align-items:center;gap:2cqw;width:100%;height:8.72cqw;padding:0;border:0;border-bottom:.26cqw solid rgba(255,255,255,.06);background:none;text-align:left;cursor:pointer}
.arev .fr span{font:400 3.59cqw/1 var(--body)}
.arev .fr small{font:400 3.08cqw/1 var(--body);color:var(--rv-muted)}
.arev .fr em{font:500 3.08cqw/1 var(--body);font-style:normal;color:var(--rv-soft);text-align:right}
.arev .chip.wide{display:flex;width:100%;margin-top:3.08cqw}
/* next: the next set, how hard the last rep was, and the rest timer */
.arev .nx{margin-top:3.6cqw}
.arev .nx small{font:400 3.08cqw/1 var(--body);color:var(--rv-muted)}
.arev .nx b{display:block;margin-top:1.4cqw;font:600 4.62cqw/1.2 var(--body);letter-spacing:-.01em}
.arev .nx p{margin-top:1.4cqw;font:400 3.33cqw/1.4 var(--body);color:var(--rv-soft)}
.arev .tile hr{border:0;height:.26cqw;background:rgba(255,255,255,.08);margin:3.6cqw 0}
.arev .rpe-h{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;font:400 3.59cqw/1 var(--body)}
.arev .rpe-h b{color:var(--cam-accent);font-weight:600;font-size:3.33cqw;font-variant-numeric:tabular-nums}
.arev .sl{position:relative;display:block;height:1.03cqw;border-radius:1cqw;background:rgba(255,255,255,.12);margin-top:3.6cqw}
.arev .sl i{position:absolute;left:0;top:0;bottom:0;width:80%;border-radius:inherit;background:var(--cam-accent)}
.arev .sl em{position:absolute;left:80%;top:50%;width:5.6cqw;height:5.6cqw;margin:-2.8cqw 0 0 -2.8cqw;border-radius:50%;background:#fff;box-shadow:0 .5cqw 1.5cqw rgba(0,0,0,.4)}
.arev .rpe p{margin-top:3cqw;font:400 3.08cqw/1.4 var(--body);color:var(--rv-muted)}
.arev .rest{display:flex;align-items:center;gap:2.4cqw;font:600 4.1cqw/1 var(--body);font-variant-numeric:tabular-nums}
.arev .rest svg{width:4.6cqw;height:4.6cqw;color:var(--cam-accent)}
.arev .rest .chip{margin-left:auto}
/* the log bar */
.arev .logbar{position:absolute;left:4.62cqw;right:4.62cqw;bottom:8.72cqw;height:13.33cqw;display:flex;gap:2.56cqw}
.arev .logbar .log{flex:1;min-width:0;min-height:0;list-style:none;border:0;border-radius:3.59cqw;background:var(--cam-accent);color:var(--cam-ink);font:700 4.1cqw/1 var(--body);box-shadow:0 0 6cqw -1.5cqw color-mix(in srgb,var(--cam-accent) 60%,transparent);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1.6cqw}
.arev .logbar .log svg{width:4.4cqw;height:4.4cqw}
.arev .logbar .mic{width:13.33cqw;height:13.33cqw;border-radius:3.59cqw;display:grid;place-items:center;flex:none}
.arev .logbar .mic svg{width:5.1cqw;height:5.1cqw}
/* reading the set, then the scored screen */
.arev .rv-chip,.arev .rv-ic,.arev .rv-tabs,.arev .tiles,.arev .logbar{transition:opacity .5s ease .15s,transform .7s var(--ease) .1s}
.arev[data-phase="wait"] .rv-chip,.arev[data-phase="wait"] .rv-ic{opacity:0}
.arev[data-phase="wait"] .rv-tabs,.arev[data-phase="wait"] .tiles,.arev[data-phase="wait"] .logbar{opacity:0;transform:translateY(5cqw);pointer-events:none}
.arev[data-phase="wait"] .cp,.arev[data-phase="wait"] .c-bar{opacity:0;pointer-events:none}
.arev[data-phase="done"] .rv-wait{opacity:0;transform:translateY(-3cqw);pointer-events:none}
.arev[data-phase="done"] .an{opacity:0;transform:translateY(3cqw);pointer-events:none}

/* tracker overlay */
.tk{position:fixed;inset:0;z-index:100;background:var(--bg);clip-path:circle(0px at var(--ox,50%) var(--oy,50%));visibility:hidden;transition:clip-path .85s var(--ease-io),visibility 0s .85s;overflow:auto;overscroll-behavior:contain}
.tk.open{clip-path:circle(160vmax at var(--ox,50%) var(--oy,50%));visibility:visible;transition:clip-path .85s var(--ease-io),visibility 0s}
.tk-in{min-height:100%;display:flex;flex-direction:column;padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 14px;max-width:1180px;width:100%;margin:0 auto}
.tk-title{display:flex;align-items:center;gap:14px;min-width:0}
.tk-title .logo{height:18px}
.tk-title span{font:600 15px var(--display);padding-left:14px;border-left:1px solid var(--line-2);white-space:nowrap}
.demo{font:500 13px var(--mono);color:var(--muted);background:var(--surface);border-radius:6px;padding:6px 10px;white-space:nowrap}
.tk-close{width:44px;height:44px;border-radius:8px;border:0;background:var(--surface-2);color:var(--fg);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .4s var(--ease),border-color .2s}
.tk-close:hover{background:var(--surface-3)}
.tk-close svg{width:18px;height:18px}
.tk-body{flex:1;display:grid;grid-template-columns:auto minmax(0,460px);justify-content:center;align-items:center;gap:56px;max-width:1180px;width:100%;margin:0 auto;min-height:0}
.tk.open .tk-phone,.tk.open .tk-panel{animation:fadeUp .8s var(--ease) both}
.tk.open .tk-phone{animation-delay:.3s}
.tk.open .tk-panel{animation-delay:.45s}
.tk-phone{position:relative;width:min(390px,calc((100vh - 120px) * .46));justify-self:center}
.tk-panel{display:flex;flex-direction:column;gap:22px;min-width:0}
.tk-panel h3{font-size:clamp(30px,3vw,42px);font-weight:700}
.tk-panel>p{color:var(--muted)}
.tsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tsteps li{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:var(--dim);transition:color .3s}
.tsteps li i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font:600 12px var(--mono);font-style:normal;transition:.3s}
.tsteps li b{font:600 16px var(--display);letter-spacing:-.01em;display:block}
.tsteps li small{font-size:13.5px;color:var(--muted)}
.tsteps li em{font:500 13px var(--mono);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.tsteps li i svg{width:14px;height:14px}
.tsteps li.now{color:var(--fg)}
.tsteps li.now i{border-color:var(--fg);color:var(--fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--fill) 45%,transparent)}
.tsteps li.done{color:var(--fg)}
.tsteps li.done i{background:var(--fill);border-color:var(--fill);color:var(--fill-ink)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:118px;font:500 13px/1.4 var(--mono);color:var(--muted)}
.log li{display:flex;gap:12px;animation:slotIn .45s var(--ease)}
.log li time{color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
.log li b{color:var(--fg);font-weight:500}
.log li.cue b{color:var(--acc-text)}
@keyframes slotIn{from{transform:translateX(12px);opacity:.2}}
.sound{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:10px;border:0;background:var(--surface);font-size:15px;cursor:pointer;color:var(--fg);text-align:left;width:100%;font-family:var(--body)}
.sound .swt{width:46px;height:28px;border-radius:999px;background:var(--line-2);position:relative;flex:none;transition:background .3s}
.sound .swt::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.sound[aria-checked="true"] .swt{background:var(--fill)}
.sound[aria-checked="true"] .swt::after{transform:translateX(18px)}
.sound span{display:flex;align-items:center;gap:10px}
.sound svg{width:18px;height:18px;color:var(--acc-text)}
.result{display:none;flex-direction:column;gap:14px}
.result.on{display:flex;animation:fadeUp .6s var(--ease) both}
.res-top{display:flex;align-items:center;gap:20px}
.ring-wrap{position:relative;width:112px;height:112px;flex:none}
.ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-wrap circle{fill:none;stroke-width:9}
.ring-wrap .bg{stroke:var(--line)}
.ring-wrap .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;transition:stroke-dashoffset 1.6s var(--ease)}
.ring-wrap b{position:absolute;inset:0;display:grid;place-items:center;font:700 38px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.res-meta{display:flex;flex-direction:column;gap:6px}
.res-meta .t{font:600 20px var(--display)}
.badge{display:inline-flex;align-self:flex-start;font:600 13px var(--body);padding:6px 11px;border-radius:4px;color:var(--fill-ink);background:var(--fill)}
.actions{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:1180px){
  .links{display:none}
  .menu-btn{display:grid}
  .nav-act{margin-left:auto}
}
@media (max-width:960px){
  .lift-grid{grid-template-columns:minmax(0,1fr)}
  .l-wide,.l-narrow{grid-column:auto}
  .model-box{height:auto;aspect-ratio:4/3}
  .sec-head,.film-head,.how-grid,.coach-grid,.plan-grid,.trust-grid,.join-grid,.score-grid{grid-template-columns:minmax(0,1fr)}
  .how-stage{order:2}
  .fix-panel{grid-template-columns:minmax(0,1fr)}
  .rep-bars{border-left:0;border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .tk-body{grid-template-columns:1fr;gap:26px;align-items:start}
  .tk-phone{width:min(380px,100%,calc((100dvh - 110px) * .46))}
  .tk-panel{max-width:520px;width:100%;margin:0 auto}
  .demo{display:none}
}
@media (max-width:600px){
  :root{--bar-h:56px}
  .nav-in{gap:12px}
  .hero-h{font-size:clamp(48px,15.6vw,96px)}
  .cta-row .btn{flex:1 1 auto}
  .film-frame{height:118vw;min-height:0}
  /* phones: the clip sits on top and fades into the page; the words go underneath, clear of the face */
  .hero{display:block;min-height:0;padding-block:0 56px}
  .hero-bg{position:relative;inset:auto;z-index:0;height:max(300px,54svh)}
  .hero-video{object-position:46% 30%;transform:none}
  .hero-bg::after{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 22%,transparent 48%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 26%)}
  .hero-top{margin-top:-36px}
  .hero-top .hero-pause{top:-68px;bottom:auto;right:auto;left:max(var(--gut),env(safe-area-inset-left,0px))}
  .join-bg::after{background:color-mix(in srgb,var(--bg) 74%,transparent)}
  .cta-row{flex-wrap:nowrap}
  .cta-row .btn{padding:14px 18px;font-size:15px}
  .fix-grid{grid-template-columns:minmax(0,1fr)}
  .stats div+div{padding-left:12px}
  .checks dt{font-size:20px}
}
@media (max-width:520px){
  .nav-cta{display:none}
  .tk-title span{display:none}
  .chat{padding:18px;border-radius:22px}
  .msg{max-width:94%}
  .panel{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}