/* Layout: one calm column of sections; every claim sits beside the real screen that proves it. Phones and portal shots are live HTML, so the white-label switch recolours them all. */
:root{
/* Oefenplan design system: Jet Black, Light Cyan, Light Green, Instrument Sans */
--jet:#00262B; --cyan:#CDE3E6; --green:#ABFFAE;
--bg:#F7FBFB; --surface:#FFFFFF; --band:#EEF5F6; --surface-cyan:#CDE3E6;
--ink:#00262B; --muted:#4A6266; --line:#D5E6E9; --line-strong:#B4CFD3;
--primary:#00262B; --on-primary:#FFFFFF; --block-deep:#00262B; --focus:#0A7C8A;
--warn:#9A4610; --warn-soft:#FCEBDC;
--signal:var(--ink); --signal-soft:var(--surface-cyan);
--shadow-card:0 1px 2px rgba(0,38,43,.06), 0 12px 32px -16px rgba(0,38,43,.22);
--display:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
/* app (white-label): practice colour only drives brand marks and the primary button */
--a-surface:#FFFFFF;
--ok-text:var(--a-ink); --time:var(--b); --time-soft:var(--b-soft);
/* phone frame geometry */
--frame-r:46px; --bezel:9px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--bg:#021A1D; --surface:#082D32; --band:#0B3338; --surface-cyan:#14444A; --ink:#E8F3F4; --muted:#9FB9BC; --line:#1E4C52; --line-strong:#2E6067;
--primary:#ABFFAE; --on-primary:#00262B; --block-deep:#0B3338; --focus:#6FD3DF; --warn:#F2A66B; --warn-soft:#3A2410;
--shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6); color-scheme:dark }}
:root[data-theme="dark"]{
--bg:#021A1D; --surface:#082D32; --band:#0B3338; --surface-cyan:#14444A; --ink:#E8F3F4; --muted:#9FB9BC; --line:#1E4C52; --line-strong:#2E6067;
--primary:#ABFFAE; --on-primary:#00262B; --block-deep:#0B3338; --focus:#6FD3DF; --warn:#F2A66B; --warn-soft:#3A2410;
--shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6); color-scheme:dark }
/* four fictional practices: each app gets its own palette, fonts, shapes and logo */
body{--b:#1B5E7A; --b-2:#5FB3C9; --b-soft:#DCEEF4; --b-ink:#FFFFFF; --done:#F6D58E; --done-ink:#0F2A36; --chip:#DCEEF4; --chip-ink:#164C63;
--a-ink:#0F2A36; --a-muted:#50646D; --a-bg:#F6F9FA; --a-sunken:#EAF2F5; --a-line:#DCE7EC; --a-line2:#BCCFD7;
--app-font:"Nunito", system-ui, sans-serif; --app-head:"Nunito", system-ui, sans-serif; --app-hw:800; --app-r:18px; --app-r-lg:22px}
body[data-brand="noord"]{--b:#D9481F; --b-2:#F39A5B; --b-soft:#FCE4DA; --done:#C6EDE3; --done-ink:#1E2430; --chip:#FCE4DA; --chip-ink:#9A2F10;
--a-ink:#1E2430; --a-muted:#5B5F68; --a-bg:#FAF8F6; --a-sunken:#F3EEEA; --a-line:#E8E1DB; --a-line2:#D2C7BE;
--app-font:"Barlow", system-ui, sans-serif; --app-head:"Barlow", system-ui, sans-serif; --app-hw:700; --app-r:6px; --app-r-lg:8px}
body[data-brand="lindehof"]{--b:#3D6B4A; --b-2:#9CBF7A; --b-soft:#E2EEE4; --done:#DCEAB4; --done-ink:#1E2A22; --chip:#E2EEE4; --chip-ink:#2F5539;
--a-ink:#1E2A22; --a-muted:#586459; --a-bg:#F8F8F4; --a-sunken:#EEF0E8; --a-line:#DFE3D6; --a-line2:#C3CBB8;
--app-font:"Source Sans 3", system-ui, sans-serif; --app-head:"Lora", Georgia, serif; --app-hw:600; --app-r:12px; --app-r-lg:14px}
body[data-brand="herstel"]{--b:#5B3FA8; --b-2:#A58BEB; --b-soft:#ECE6FA; --done:#F9D7EA; --done-ink:#221B33; --chip:#ECE6FA; --chip-ink:#4A3290;
--a-ink:#221B33; --a-muted:#5F5A6E; --a-bg:#F9F8FC; --a-sunken:#EFECF7; --a-line:#E3DEF0; --a-line2:#C9C0E0;
--app-font:"Sora", system-ui, sans-serif; --app-head:"Sora", system-ui, sans-serif; --app-hw:600; --app-r:999px; --app-r-lg:20px}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{max-width:1160px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display); line-height:1.06; margin:0; text-wrap:balance; font-weight:600}
h1{font-size:clamp(40px, 5.6vw, 64px); font-weight:600; letter-spacing:-0.03em; line-height:1}
h2{font-size:clamp(32px, 3.8vw, 44px); font-weight:600; letter-spacing:-0.025em}
h3{font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-0.01em}
p{margin:0}
.lede{font-size:clamp(18px, 1.6vw, 21px); color:var(--muted); max-width:58ch}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--signal)}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px}
section{padding-block:clamp(64px, 9vw, 112px)}
.sec-head{display:flex; flex-direction:column; gap:14px; max-width:720px; margin-bottom:clamp(36px, 5vw, 56px)}
/* top bar */
.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--bg)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-0.02em; text-decoration:none}
.logo-mark{width:30px; height:30px; border-radius:8px; background:var(--green); color:var(--jet); display:grid; place-items:center}
/* hero */
.hero{padding-block:clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:24px; min-width:0}
.dose-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.dose-strip span{font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--surface-cyan); color:var(--ink); font-variant-numeric:tabular-nums}
.hero-visual{position:relative; display:flex; justify-content:center; min-width:0}
.notif{position:absolute; left:-8%; top:18%; width:250px; max-width:70%; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-card); display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.4; z-index:2}
.notif-ico{width:34px; height:34px; border-radius:9px; background:linear-gradient(140deg, var(--b), var(--b-2)); flex:none; display:grid; place-items:center; color:#fff}
.notif b{display:block; font-size:13.5px} .notif small{color:var(--muted); font-size:12px}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr} .notif{left:0; top:auto; bottom:12%}}
.wrap.wide{max-width:1360px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(32px, 4vw, 64px); align-items:center}
.hero-visual{position:relative; display:block; min-height:700px}
.hero-dash{position:absolute; top:0; left:0; width:min(100%, 720px)}
.hero-dash .pt{min-height:0}
.hero .phone{position:absolute; right:0; top:110px; z-index:2}
.hero .phone.lg{--z:.7; transform:rotate(5deg)}
.wl-sheet{position:absolute; right:0; bottom:8px; z-index:4; width:236px; padding:16px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card); transform:rotate(3deg); display:flex; flex-direction:column; gap:12px; opacity:.75}
.wl-dash::after, .wl-sheet::after, .wl-notif::after, .wl-p1 .phone::after, .wl-p2 .phone::after{content:""; position:absolute; inset:-1px; border-radius:inherit; background:var(--bg); opacity:0; pointer-events:none; z-index:20; transition:opacity .26s ease var(--vd, 0s)}
.wl-dash{--vd:0s} .wl-p1{--vd:.07s} .wl-p2{--vd:.14s} .wl-sheet{--vd:.21s} .wl-notif{--vd:.28s}
.wl-p1 .phone, .wl-p2 .phone{position:relative}
body.brand-swap .wl-dash::after, body.brand-swap .wl-sheet::after, body.brand-swap .wl-notif::after, body.brand-swap .wl-p1 .phone::after, body.brand-swap .wl-p2 .phone::after{opacity:1}
.hero-visual, #fysio .browser, .tour-phone{transition:opacity .28s ease}
body.brand-swap .hero-visual, body.brand-swap #fysio .browser, body.brand-swap .tour-phone{opacity:.15}
@media (prefers-reduced-motion: reduce){.wl-dash::after, .wl-sheet::after, .wl-notif::after, .wl-p1 .phone::after, .wl-p2 .phone::after, .hero-visual, #fysio .browser, .tour-phone{transition:none}}
.ws-head{display:flex; align-items:center; gap:10px; font-family:var(--app-head); font-weight:var(--app-hw); font-size:15px; color:var(--b)}
.ws-cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4px; height:42px}
.ws-cols i{border-radius:6px}
.ws-type{display:flex; align-items:baseline; gap:10px}
.ws-type b{font-family:var(--app-head); font-weight:var(--app-hw); font-size:34px; line-height:1; color:var(--a-ink)}
.ws-type span{font-size:12.5px; color:var(--muted)}
.ws-btn{align-self:flex-start; padding:7px 14px; border-radius:min(var(--app-r), 18px); background:var(--b); color:#fff; font-family:var(--app-font); font-size:12.5px; font-weight:700}
.lib-head{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important; align-items:center!important}
.lib-cloud{position:relative; height:480px}
.lib-cloud .count-wrap{position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:4; width:min(330px, 72%); box-shadow:0 30px 60px -30px rgba(0,38,43,.55)}
.lt{position:absolute; width:168px; padding:10px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:3px; will-change:transform}
.lt b{font-weight:600; font-size:14px; line-height:1.25}
.lt small{font-size:12px; color:var(--muted)}
.lt.back{opacity:.55; scale:.88; z-index:1}
.lt.front{z-index:3}
.lt-img{height:86px; border-radius:9px; margin-bottom:5px; display:grid; place-items:center}
.lt-img.g1{background:linear-gradient(140deg, #CDE3E6, #ABFFAE)}
.lt-img.g2{background:linear-gradient(150deg, #0E5F73, #8FC7CF)}
.lt-img.g3{background:linear-gradient(150deg, #F3E7D3, #CDE3E6)}
.lt-img .pl{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); color:#00262B; display:grid; place-items:center}
@media (max-width:760px){.lib-head{grid-template-columns:1fr!important} .lib-cloud{height:440px} .lt{width:138px} .lt-img{height:62px}}
@media (max-width:480px){.lt.back{display:none}}
.tbl tr.live td{background:var(--b-soft)}
.tbl tr.live.ping td{animation:ping 1.2s ease}
@keyframes ping{from{background:var(--done)} to{background:var(--b-soft)}}
.sync{position:absolute; left:24px; top:430px; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card); font-size:14px; color:var(--muted)}
.sync b{color:var(--ink); font-weight:600}
.sync-dot{width:10px; height:10px; border-radius:50%; background:#2FBF71; box-shadow:0 0 0 4px rgba(47,191,113,.2); flex:none}
@media (max-width:1000px){.hero .wrap{grid-template-columns:1fr} .hero-visual{min-height:740px}}
@media (max-width:640px){.hero-dash, .sync{display:none} .hero-visual{min-height:0; display:flex; justify-content:center} .hero .phone{position:relative; top:0}}
.hero-thumb{position:absolute; right:250px; top:418px; width:320px; z-index:1; transform:rotate(-6deg); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); background:#0E3A40}
.ht-media{position:relative; aspect-ratio:4 / 3; display:grid; place-items:center; background:radial-gradient(70% 80% at 30% 20%, rgba(171,255,174,.35), transparent 60%), linear-gradient(150deg, #CDE3E6, #5FA9B3)}
.ht-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ht-play{position:relative; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:#00262B; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ht-cap{position:absolute; left:10px; bottom:10px; display:flex; gap:6px}
.ht-cap span{font-size:12px; font-weight:600; padding:4px 9px; border-radius:999px; background:rgba(0,38,43,.72); color:#fff}
@media (max-width:1000px){.hero-thumb{right:230px; top:470px}}
.demo-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 24px; border-radius:14px; background:var(--jet); color:#fff; font-weight:600; font-size:17px; text-decoration:none; white-space:nowrap; transition:background .2s ease}
.demo-btn:hover{background:#0B3A41}
.demo-btn.sm{height:40px; padding:0 16px; border-radius:11px; font-size:15px; margin-left:8px}
.hero-cta{display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap}
.hero-cta span{font-size:15px; color:var(--muted)}
.excard.ed{position:relative; z-index:5; overflow:hidden; padding:0 0 20px; gap:14px}
.ed > :not(.ed-media):not(.ed-cur):not(.ed-toast){margin-inline:22px}
.ed-media{position:relative; aspect-ratio:4 / 3; background:linear-gradient(150deg, var(--cyan), var(--green))}
.ed-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ed-tag{position:absolute; left:12px; bottom:12px; font-size:12.5px; font-weight:600; background:rgba(0,38,43,.72); color:#fff; padding:3px 10px; border-radius:999px}
.ed h3{margin-bottom:-4px}
.excard .meta .base{background:var(--band); color:var(--muted)}
.excard .meta .own{animation:ownin .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ownin{from{transform:scale(.6); opacity:0}}
.ed-dose{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.ed-f{display:flex; flex-direction:column; gap:4px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; transition:background .3s ease, border-color .3s ease}
.ed-f small{font-size:12.5px; color:var(--muted); font-weight:500}
.ed-f.hot{background:var(--surface-cyan); border-color:var(--line-strong)}
.ed-st{display:flex; align-items:center; justify-content:space-between; gap:4px; font-variant-numeric:tabular-nums}
.ed-st i{width:24px; height:24px; border-radius:7px; background:var(--band); display:grid; place-items:center; font-style:normal; font-weight:600; font-size:15px; transition:transform .12s ease, background .12s ease}
.ed-st i.press{transform:scale(.86); background:var(--line-strong)}
.ed-st b{font-weight:600; font-size:17px}
#edS3.typing #edTxt{background:var(--surface-cyan); border-radius:4px; box-shadow:0 0 0 3px var(--surface-cyan)}
#edS3.typing #edTxt::after{content:""; display:inline-block; width:2px; height:1.05em; background:var(--ink); margin-left:1px; vertical-align:-2px; animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ed-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ed .byline{font-size:13.5px; color:var(--muted)}
.ed-save{height:36px; padding:0 16px; border-radius:10px; background:var(--jet); color:#fff; font-weight:600; font-size:14px; display:inline-flex; align-items:center; transition:opacity .25s ease, transform .12s ease}
.ed-save.dim{opacity:.35}
.ed-save.press{transform:scale(.94)}
.ed-toast{position:absolute; left:50%; top:16px; translate:-50% -12px; background:var(--jet); color:#fff; font-size:14px; padding:9px 14px; border-radius:11px; display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .3s ease, translate .3s ease; white-space:nowrap; z-index:3}
.ed-toast::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green)}
.ed-toast.on{opacity:1; translate:-50% 0}
.ed-cur{position:absolute; left:0; top:0; z-index:4; pointer-events:none; transition:transform .7s cubic-bezier(.45,.05,.25,1), opacity .3s ease; opacity:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.ed-cur.on{opacity:1}
@media (max-width:480px){.ed > :not(.ed-media):not(.ed-cur):not(.ed-toast){margin-inline:16px} .ed-dose{gap:6px} .ed-f{padding:7px 8px} .ed-st i{width:22px; height:22px}}
/* 3D opener */
.hero{overflow-x:clip}
@media (min-width:641px){.hero .phone.lg{right:22px}}
.hero-dash{transform:perspective(2000px) rotateY(16deg) rotateX(7deg) rotateZ(-1deg); transform-origin:left center; box-shadow:-30px 50px 70px -30px rgba(0,38,43,.32), -6px 14px 24px -10px rgba(0,38,43,.16)}
.hero .phone.lg{transform:perspective(1400px) rotateY(-20deg) rotateX(8deg) rotateZ(4deg); box-shadow:inset 0 0 0 1px #24363a, 34px 50px 60px -18px rgba(0,38,43,.36), 8px 14px 22px -8px rgba(0,38,43,.2)}
.hero-thumb{transform:perspective(1200px) rotateY(18deg) rotateX(6deg) rotateZ(-6deg); box-shadow:-24px 34px 50px -18px rgba(0,38,43,.34)}
.sync{transform:perspective(1200px) rotateY(12deg) translateZ(30px)}
@media (prefers-reduced-motion: reduce){.hero-dash, .hero .phone.lg, .hero-thumb, .sync{transform:none}}
@media (max-width:640px){.hero-thumb{display:none}}
@media (max-width:640px){
.hero-visual{display:block; min-height:0; height:430px}
.hero-dash{display:block; position:absolute; left:0; top:0; width:100%; border-radius:12px}
.hero-dash .browser-bar{gap:5px; padding:7px 10px}
.hero-dash .browser-bar i{width:7px; height:7px}
.hero-dash .browser-bar span{margin-left:6px; font-size:10.5px; padding:2px 8px; border-radius:5px}
.hero .phone{position:absolute; right:10px; top:52px}
.hero .phone.lg{--z:.42; --frame-r:26px; --bezel:5px}
.sync{display:flex; left:0; top:214px; width:150px; padding:10px 12px; gap:8px; align-items:flex-start; border-radius:14px; font-size:12px; line-height:1.35}
.sync-dot{width:8px; height:8px; margin-top:4px; box-shadow:0 0 0 3px rgba(47,191,113,.2)}
}
@media (max-width:640px){.hero-dash{transform:perspective(1200px) rotateY(12deg) rotateX(5deg)} .hero .phone.lg{transform:perspective(900px) rotateY(-16deg) rotateX(6deg) rotateZ(4deg)} .sync{transform:perspective(900px) rotateY(10deg)}}
/* phone mockups */
.phone{--z:.68; flex:none; background:#0A1214; padding:var(--bezel); border-radius:var(--frame-r); box-shadow:var(--shadow-card), inset 0 0 0 1px #24363a}
.phone.lg{--z:.78}
.screen{width:390px; height:844px; zoom:var(--z); border-radius:calc((var(--frame-r) - var(--bezel)) / var(--z)); overflow:hidden; position:relative; background:var(--a-bg); color:var(--a-ink); font-family:var(--app-font); font-size:16px; line-height:1.45; display:flex; flex-direction:column}
.screen *{box-sizing:border-box}
@media (max-width:420px){.phone{--z:.62} .phone.lg{--z:.7}}
.s-pad{padding:20px 18px 0}
.s-brand{display:flex; align-items:center; justify-content:space-between; padding:22px 18px 0}
.s-brand .pm{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--b)}
.pm-dot{width:26px; height:26px; border-radius:8px; background:linear-gradient(140deg, var(--b), var(--b-2)); display:grid; place-items:center}
.s-muted{color:var(--a-muted); font-size:15px}
.s-h1{font-size:29px; font-weight:var(--app-hw); letter-spacing:-.01em; font-family:var(--app-head); margin:0}
.s-h2{font-size:24px; font-weight:var(--app-hw); font-family:var(--app-head); margin:0; line-height:1.25}
.s-label{font-size:14px; font-weight:500; color:var(--a-muted)}
.bar{height:8px; border-radius:999px; background:var(--a-sunken); overflow:hidden}
.bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--b), var(--b-2)); transition:width .3s}
.ex-list{list-style:none; margin:0; padding:18px 16px; display:flex; flex-direction:column; gap:10px; flex:1; overflow:hidden}
.ex{display:flex; align-items:center; gap:12px; padding:10px 12px 10px 10px; border-radius:min(var(--app-r), 22px); background:var(--a-surface); border:1px solid var(--a-line)}
.ex.done{background:var(--done); border-color:transparent; color:var(--done-ink)}
.ex-ico{width:52px; height:52px; border-radius:8px; background:var(--a-sunken); display:grid; place-items:center; flex:none}
.ex-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.ex-txt b{font-size:16px; line-height:1.25}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:13px; font-weight:600; background:var(--chip); color:var(--chip-ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.chip.t{background:var(--chip); color:var(--chip-ink)}
.ex.done .chip{background:rgba(0,0,0,.08); color:var(--done-ink)} .ex.done .ex-ico{background:rgba(255,255,255,.55)}
.chip.o{background:transparent; border:1.5px solid var(--a-line2); color:var(--a-muted)}
.check{width:44px; height:44px; border-radius:50%; border:2px solid var(--a-line2); background:transparent; flex:none; display:grid; place-items:center; cursor:pointer; padding:0}
.check svg{opacity:0}
.ex.done .check{background:var(--b); border-color:var(--b)} .ex.done .check svg{opacity:1; color:#fff!important}
.s-foot{padding:12px 16px 26px; border-top:1px solid var(--a-line); background:var(--a-surface)}
.s-btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:var(--app-r); background:var(--b); color:var(--b-ink); font-weight:700; font-size:17px; border:0; width:100%; font-family:inherit}
.s-btn.ok{background:var(--b); color:var(--b-ink)}
.s-btn.ghost{background:var(--a-surface); color:var(--b); border:1.5px solid var(--a-line2)}
.s-back{display:flex; justify-content:space-between; align-items:center; padding:16px 16px 0 10px; color:var(--b); font-weight:600; font-size:15px}
.media{height:206px; border-radius:var(--app-r-lg); background:linear-gradient(150deg, var(--b-soft), var(--b-2)); display:grid; place-items:center; position:relative; overflow:hidden}
.media .play{width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.12)}
.sets{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.set{min-height:54px; border-radius:min(var(--app-r), 27px); border:2px solid var(--a-line2); background:var(--a-surface); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; gap:6px}
.set.on{background:var(--done); border-color:var(--done); color:var(--done-ink)}
.steps-s{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:16.5px; line-height:1.5}
.steps-s li{display:flex; gap:12px}
.steps-s li span:first-child{flex:none; width:27px; height:27px; border-radius:50%; background:var(--chip); color:var(--chip-ink); font-weight:700; font-size:14px; display:grid; place-items:center; margin-top:1px}
.warnbox{display:flex; gap:10px; padding:13px 15px; border-radius:12px; background:var(--warn-soft); font-size:15px; line-height:1.45}
.timer{display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 16px 18px; border-radius:16px; background:var(--time-soft)}
.ring{position:relative; width:220px; height:220px}
.ring svg{transform:rotate(-90deg)}
.ring .clock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .clock b{font-size:62px; font-weight:400; color:var(--time); font-variant-numeric:tabular-nums; line-height:1}
.pain{display:grid; grid-template-columns:repeat(11,1fr); gap:4px}
.pain span{height:44px; border-radius:999px; border:1.5px solid var(--a-line2); display:grid; place-items:center; font-weight:600; font-size:14px; background:var(--a-surface); font-variant-numeric:tabular-nums}
.pain span.on{background:var(--b); border-color:var(--b); color:#fff}
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.tri span{min-height:42px; border-radius:12px; border:1.5px solid var(--a-line2); display:grid; place-items:center; font-size:13.5px; font-weight:600; background:var(--a-surface)}
.tri .g{background:var(--done); border:2px solid var(--done-ink); color:var(--done-ink)}
.tri .h{background:var(--warn-soft); border:2px solid var(--warn); color:var(--warn)}
.tri .n{background:var(--a-sunken); border:2px solid var(--a-muted)}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; list-style:none; margin:0; padding:0}
.week li{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; color:var(--a-muted)}
.week i{width:34px; height:34px; border-radius:50%; border:2px solid var(--a-line2); display:grid; place-items:center}
.week i.y{background:var(--b); border-color:var(--b)} .week i.y svg{color:#fff!important}
.card-s{border-radius:var(--app-r-lg); background:var(--a-surface); border:1px solid var(--a-line); padding:16px}
.codebox{min-height:60px; border-radius:12px; border:1.5px solid var(--a-line2); background:var(--a-surface); display:grid; place-items:center; font-size:27px; font-weight:600; letter-spacing:.22em; font-variant-numeric:tabular-nums}
.lock{background:#0E3A40; color:#fff; align-items:center}
.lock .t{font-size:84px; font-weight:300; line-height:1; margin-top:96px; font-variant-numeric:tabular-nums}
.lock .d{font-size:18px; opacity:.85; margin-top:8px}
.lock .n{width:calc(100% - 28px); margin-top:auto; margin-bottom:60px; background:rgba(255,255,255,.86); color:#00262B; border-radius:24px; padding:14px; display:flex; gap:12px; backdrop-filter:blur(8px)}
.lock .n b{display:block; font-size:15px} .lock .n p{font-size:15px}
/* how it works */
.flow{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0; counter-reset:f}
.flow li{counter-increment:f; display:flex; flex-direction:column; gap:12px; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; min-width:0}
.flow li::before{content:counter(f); font-family:var(--display); font-weight:700; font-size:15px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--signal-soft); color:var(--signal)}
.flow .who{font-size:14px; font-weight:500; color:var(--muted)}
.flow p{color:var(--muted); font-size:16px}
@media (max-width:920px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}
/* patient rail */
.rail{display:flex; gap:28px; overflow:hidden; padding-block:8px 28px}
.rail figure{margin:0; display:flex; flex-direction:column; gap:16px; scroll-snap-align:start; width:max-content}
.rail figcaption{max-width:280px; font-size:15.5px; color:var(--muted)}
.rail figcaption b{display:block; color:var(--ink); font-size:16.5px; margin-bottom:2px}
.rail-hint{font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; margin-top:-36px; margin-bottom:22px}
/* video slider */
.vs-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,44px)}
.vs-head .sec-head{margin-bottom:0}
.vs-ctrl{display:flex; align-items:center; gap:10px}
.vs-ctrl button{width:48px; height:48px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.vs-ctrl button:hover{background:var(--surface-cyan)}
.vs-count{font-size:15px; color:var(--muted); min-width:48px; text-align:center; font-variant-numeric:tabular-nums}
.vs-track{display:flex; gap:20px; overflow:hidden; list-style:none; margin:0; padding-block:4px 16px}
.rail{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%)}
.rail.at-start{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%)}
.rail.at-end{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px); mask-image:linear-gradient(90deg, transparent 0, #000 56px)}
.rail.at-start.at-end{-webkit-mask-image:none; mask-image:none}
.vs-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; list-style:none; margin:0; padding:0}
.vs-grid .vs-card{width:auto}
.hl{background:linear-gradient(transparent 60%, var(--green) 60%, var(--green) 90%, transparent 90%); -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:.06em}
.dark .hl{background:none; color:var(--green); padding:0}
#vsTrack{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; list-style:none; margin:0; padding:0}
#vsTrack::-webkit-scrollbar{display:none}
#vsTrack > .vs-card{flex:none; width:calc((100% - 40px) / 3); scroll-snap-align:start}
#video .vs-ctrl{display:flex}
@media (max-width:900px){#vsTrack > .vs-card{width:calc((100% - 20px) / 2)}}
@media (max-width:760px){
#vsTrack{gap:14px; margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline:max(16px, env(safe-area-inset-left, 0px)); scroll-padding-inline:max(16px, env(safe-area-inset-left, 0px))}
#vsTrack > .vs-card{width:84%}
#video .vs-head{flex-wrap:nowrap; flex-direction:column; align-items:flex-start}
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:64px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.vs-card{flex:none; width:clamp(230px, 24vw, 280px); scroll-snap-align:start; display:flex; flex-direction:column; gap:14px}
.vs-media{position:relative; aspect-ratio:4 / 3; max-width:100%; border-radius:16px; overflow:hidden; background:var(--surface-cyan)}
.vs-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.vs-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink); font-size:14px}
.vs-ph span{width:56px; height:56px; border-radius:50%; background:var(--surface); display:grid; place-items:center}
.vs-card h3{font-size:18px}
.vs-card p{font-size:15px; color:var(--muted)}
.vs-meta{display:flex; gap:6px; flex-wrap:wrap}
.vs-meta span{font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--surface-cyan); color:var(--ink); font-variant-numeric:tabular-nums}
.vs-points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:clamp(28px,4vw,44px)}
.vs-points div{font-size:16px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}
.vs-points b{display:block; color:var(--ink); font-weight:600}
@media (max-width:720px){.vs-points{grid-template-columns:1fr}}
/* portal */
.band{background:var(--band)}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px}
.tab{font:600 15px var(--body); padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; min-height:44px}
.tab[aria-selected="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.portal-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start}
@media (max-width:960px){.portal-grid{grid-template-columns:1fr}}
.browser{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#E4EEEF; box-shadow:var(--shadow-card); min-width:0}
.browser-bar{display:flex; align-items:center; gap:7px; padding:10px 14px; background:#DCE9EB}
.browser-bar i{width:11px; height:11px; border-radius:50%; background:#B4CFD3}
.browser-bar span{margin-left:12px; font-size:12.5px; color:#4A6266; background:#F7FBFB; padding:4px 12px; border-radius:7px; flex:1; max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fit{overflow:hidden}
.fit-inner{width:1040px; zoom:.8}
.pt{display:grid; grid-template-columns:200px 1fr; background:var(--a-bg); color:var(--a-ink); font-family:var(--app-font); font-size:14.5px; line-height:1.45; min-height:640px}
.pt *{box-sizing:border-box}
.pt aside{background:var(--a-surface); border-right:1px solid var(--a-line); padding:20px 14px; display:flex; flex-direction:column; gap:4px}
.pt aside .pm{display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px; margin-bottom:20px; color:var(--b)}
.pt aside a{display:flex; padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--a-muted); font-weight:500}
.pt aside a.on{background:var(--b-soft); color:var(--b); font-weight:700}
.pt aside .me{margin-top:auto; display:flex; gap:10px; align-items:center; font-size:13px; color:var(--a-muted)}
.pt aside .me i{width:32px; height:32px; border-radius:50%; background:var(--a-sunken); display:grid; place-items:center; font-style:normal; font-weight:700; color:var(--a-ink)}
.pt main{padding:26px 28px; display:flex; flex-direction:column; gap:20px; min-width:0}
.pt h4{font-size:24px; margin:0; font-weight:var(--app-hw); font-family:var(--app-head)}
.pt .row{display:flex; justify-content:space-between; align-items:flex-end; gap:16px}
.pbtn{display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:min(var(--app-r), 20px); background:var(--b); color:#fff; font-weight:700; font-size:14px}
.pbtn.s{background:var(--a-surface); color:var(--b); border:1.5px solid var(--a-line2)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{background:var(--a-surface); border:1px solid var(--a-line); border-radius:16px; padding:14px 16px}
.kpi small{color:var(--a-muted); font-size:13px} .kpi b{display:block; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.kpi b em{font-style:normal; font-size:13px; font-weight:600; color:var(--ok-text); margin-left:6px}
.tbl{background:var(--a-surface); border:1px solid var(--a-line); border-radius:16px; overflow:hidden}
.tbl table{width:100%; border-collapse:collapse}
.tbl th{text-align:left; font-size:13px; color:var(--a-muted); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--a-line); background:var(--a-bg)}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--a-line); font-variant-numeric:tabular-nums; vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td small{display:block; color:var(--a-muted); font-size:12.5px}
.adh{display:flex; align-items:center; gap:8px} .adh .bar{width:90px; height:8px}
.adh .bar i{background:var(--a-ink)} .adh.lo .bar i{background:var(--warn)}
.flag{display:inline-flex; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--warn-soft); color:var(--warn)}
.painpill{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--a-sunken); font-weight:700}
.painpill.hi{background:var(--warn-soft); color:var(--warn)}
.lnk{color:var(--b); font-weight:700}
.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.panel{background:var(--a-surface); border:1px solid var(--a-line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px}
.pchips{display:flex; flex-wrap:wrap; gap:6px}
.pchip{font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px; border:1.5px solid var(--a-line2); color:var(--a-muted)}
.pchip.on{background:var(--b); border-color:var(--b); color:#fff}
.lib-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--a-line); border-radius:12px}
.lib-item small{display:block; color:var(--a-muted); font-size:12.5px}
.lib-item .add{font-weight:700; color:var(--b); font-size:13px; white-space:nowrap}
.lib-item .in{font-weight:700; color:var(--a-ink); background:var(--done); padding:2px 8px; border-radius:999px; font-size:13px; white-space:nowrap}
.plan-item{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--a-line); border-radius:12px; background:var(--a-bg)}
.plan-item .n{width:22px; height:22px; border-radius:50%; background:var(--chip); color:var(--chip-ink); font-weight:700; font-size:12px; display:grid; place-items:center}
.dose{display:flex; gap:6px}
.dose span{font-size:12.5px; padding:4px 8px; border:1.5px solid var(--a-line2); border-radius:8px; background:var(--a-surface); font-variant-numeric:tabular-nums; white-space:nowrap}
.days{display:flex; gap:6px}
.days span{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700; border:1.5px solid var(--a-line2); color:var(--a-muted)}
.days span.on{background:var(--b); color:#fff; border-color:var(--b)}
.callout{display:flex; gap:12px; padding:14px 16px; border-radius:12px; background:#FCEBDC}
.callout ul{margin:4px 0 0; padding-left:18px}
.chart{display:flex; align-items:flex-end; gap:12px; height:150px; padding:8px 4px 0; border-bottom:1px solid var(--a-line)}
.chart div{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%; font-size:12px; color:var(--a-muted)}
.chart div i{width:100%; max-width:34px; border-radius:6px 6px 0 0; background:var(--a-ink)}
.chart div i.e{background:transparent; border:1.5px dashed var(--a-line2); border-bottom:0; height:8px}
.chart div b{font-size:12.5px; color:var(--a-ink); font-variant-numeric:tabular-nums}
.chart-x{display:flex; gap:12px; padding:0 4px; font-size:12px; color:var(--a-muted)} .chart-x span{flex:1; text-align:center}
.quote{border-radius:12px; background:var(--a-bg); padding:12px 14px; font-size:14px}
.quote small{display:block; color:var(--a-muted); margin-top:4px; font-size:12.5px}
.portal-notes{display:flex; flex-direction:column; gap:18px}
.portal-notes h3{font-size:22px}
.portal-notes ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.portal-notes li{display:flex; gap:10px; color:var(--muted); font-size:16px}
.portal-notes li::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ink); margin-top:10px}
.pane[hidden]{display:none}
.example-note{font-size:13px; color:var(--muted); margin-top:12px}
/* white label */
.wl{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width:880px){.wl{grid-template-columns:1fr}}
.wl-copy{display:flex; flex-direction:column; gap:22px; min-width:0}
.swatches{display:flex; flex-wrap:wrap; gap:10px}
.sw{display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; min-height:48px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:600 15px var(--body); cursor:pointer}
.sw i{width:30px; height:30px; border-radius:50%; flex:none}
.sw[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.sw i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.wl-phones{display:flex; gap:20px; justify-content:center}
.wl-phones .phone{--z:.56; --frame-r:38px; --bezel:8px}
@media (max-width:520px){.wl-phones .phone:nth-child(2){display:none}}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.facts div{border-top:2px solid var(--ink); padding-top:12px; font-size:15.5px; color:var(--muted)}
.facts b{display:block; color:var(--ink); font-size:16.5px}
@media (max-width:620px){.facts{grid-template-columns:1fr}}
.practices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:520px){.practices{grid-template-columns:1fr}}
.pr{display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:64px; border-radius:16px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer}
.pr:hover{border-color:var(--line-strong)}
.pr[aria-pressed="true"]{border-color:var(--pc); box-shadow:inset 0 0 0 1px var(--pc)}
.pr-logo{width:40px; height:40px; flex:none; border-radius:12px; background:linear-gradient(140deg, var(--pc), var(--pc2)); color:#fff; display:grid; place-items:center}
.pr-txt{display:flex; flex-direction:column; min-width:0} .pr-txt b{font-size:16px; line-height:1.25} .pr-txt small{font-size:13px; color:var(--muted)}
.sheet{display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; padding:16px; border-radius:16px; background:var(--surface); border:1px solid var(--line)}
.sheet-cols{display:grid; grid-template-rows:2fr 1fr 1fr; gap:4px; border-radius:10px; overflow:hidden; min-height:110px}
.sheet-cols i{display:block}
.sheet dl{margin:0; display:flex; flex-direction:column; gap:8px; font-size:15px}
.sheet dl div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:8px}
.sheet dl div:last-child{border-bottom:0; padding-bottom:0}
.sheet dt{color:var(--muted)} .sheet dd{margin:0; font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere}
@media (max-width:420px){.sheet{grid-template-columns:1fr} .sheet-cols{grid-template-rows:none; grid-template-columns:2fr 1fr 1fr; min-height:48px}}
.pr-domline{font-size:16px; color:var(--muted)} .pr-domline b{color:var(--ink); font-weight:600}
/* library */
.lib{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,64px); align-items:start}
@media (max-width:880px){.lib{grid-template-columns:1fr}}
.count-wrap{display:flex; flex-direction:column; gap:6px}
.bignum-sub{font-size:clamp(20px,2vw,24px); line-height:1.3; font-weight:500; color:var(--ink)}
.bignum .ca{font-size:.28em; letter-spacing:0; font-weight:500; color:var(--muted); vertical-align:.95em; -webkit-text-fill-color:var(--muted)}
.bignum{background:linear-gradient(120deg, var(--ink) 30%, var(--focus)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums; margin:0; font-family:var(--display); font-weight:600; font-size:clamp(84px, 11vw, 140px); line-height:.9; letter-spacing:-.04em}
.bodyparts{display:flex; flex-wrap:wrap; gap:8px}
.bodyparts span{padding:8px 14px; border-radius:999px; background:var(--surface); border:1.5px solid var(--line); font-size:15px; font-weight:500}
.excard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px}
.excard .meta{display:flex; flex-wrap:wrap; gap:8px; font-size:13.5px}
.excard .meta span{padding:4px 10px; border-radius:999px; background:var(--surface-cyan); font-weight:600}
.excard ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:16px}
.excard .lo{font-size:15px; padding:12px 14px; border-radius:12px; background:var(--warn-soft)}
.excard .lo b{color:var(--warn)}
.custom{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:6px}
.custom div{font-size:15px; color:var(--muted)} .custom b{color:var(--ink); display:block}
@media (max-width:520px){.custom{grid-template-columns:1fr}}
@media (min-width:1100px){
#patient .rail{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; overflow:visible; -webkit-mask-image:none; mask-image:none}
#patient .rail figure{width:auto; min-width:0}
#patient .rail figcaption{max-width:none; font-size:14.5px}
#patient .rail .phone{--frame-r:34px; --bezel:7px}
#patient .vs-ctrl{display:none}
}
.pnote h3{margin-bottom:14px}
.wl{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:880px){.wl{grid-template-columns:1fr}}
.wl-collage{min-width:0}
.wl-stage{position:relative; width:760px; height:640px; zoom:var(--wz, 1)}
.wl-stage .phone{--z:.56; --frame-r:38px; --bezel:8px}
.wl-dash{position:absolute; top:24px; right:0; width:560px; transform:rotate(-5deg); opacity:.55}
.wl-dash .pt{min-height:0}
.wl-p1{position:absolute; left:40px; top:70px; z-index:2; opacity:.9}
.wl-p2{position:absolute; left:215px; top:140px; z-index:3; transform:rotate(7deg)}
.wl-notif{position:absolute; left:0; bottom:36px; z-index:4; display:flex; gap:10px; align-items:center; padding:12px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card); font-size:14px; line-height:1.35; transform:rotate(-3deg)}
.wl-notif b{display:block}
.wl-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:36px 8px 24px}
.wl-ring{width:96px; height:96px; border-radius:50%; background:linear-gradient(140deg, var(--b), var(--b-2)); display:grid; place-items:center; box-shadow:0 0 0 10px var(--b-soft); margin-bottom:8px}
.lib-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:stretch; margin-bottom:clamp(36px,5vw,56px)}
@media (max-width:760px){.lib-head{grid-template-columns:1fr}}
.lib-head .count-wrap{justify-content:center; padding:28px 40px; border-radius:20px; background:radial-gradient(80% 90% at 100% 0%, rgba(10,124,138,.6), transparent 60%), linear-gradient(160deg, #00262B, #001619)}
.lib-head .bignum{background:linear-gradient(120deg, #ABFFAE 20%, #CDE3E6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lib-head .bignum-sub{color:#E8F3F4}
section:not(.dark):not(.band):not(.hero){background:radial-gradient(60% 55% at 100% 0%, rgba(205,227,230,.5), transparent 62%), radial-gradient(50% 50% at 0% 100%, rgba(171,255,174,.14), transparent 62%), var(--bg)}
.band{background:radial-gradient(55% 60% at 0% 0%, rgba(171,255,174,.12), transparent 62%), linear-gradient(180deg, var(--band), color-mix(in srgb, var(--band) 55%, var(--bg)))!important}
@media (min-width:961px){#fysio .portal-notes{margin-top:-66px!important}}
.lib-head .sec-head{justify-content:center}
.lib{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
@media (max-width:880px){.lib{grid-template-columns:1fr}}
.feat{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 32px}
.feat > div{display:flex; flex-direction:column; gap:8px; min-width:0}
.feat p{color:var(--muted); font-size:16px}
.feat-ico{width:40px; height:40px; border-radius:12px; background:var(--surface-cyan); color:var(--ink); display:grid; place-items:center; margin-bottom:4px}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.excard .meta .own{background:var(--green); color:#00262B}
.dose-edit{font-size:15px; color:var(--muted)} .dose-edit b{color:var(--ink); font-weight:600}
.byline{font-size:13.5px; color:var(--muted)}
.tour{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center}
.tour-stage{position:relative; height:690px; background:radial-gradient(closest-side, var(--surface-cyan), transparent 72%)}
.tour-slide{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:translateY(16px) scale(.98); transition:opacity .45s ease, transform .45s ease; pointer-events:none}
.tour-slide.on{opacity:1; transform:none}
.tour-slide .phone{--z:.78}
.tour-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.tour-step{width:100%; display:flex; gap:16px; align-items:flex-start; text-align:left; padding:16px 18px; border-radius:16px; border:1px solid transparent; background:transparent; color:var(--ink); font:inherit; cursor:pointer; position:relative; overflow:hidden}
.tour-step:hover{background:var(--surface)}
.tour-step.on{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-card)}
.tour-n{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:14px; background:var(--surface-cyan); color:var(--ink); font-variant-numeric:tabular-nums}
.tour-step.on .tour-n{background:var(--green); color:#00262B}
.tour-t{display:flex; flex-direction:column; gap:4px; min-width:0; padding-top:4px}
.tour-t b{font-size:17px; font-weight:600; line-height:1.3}
.tour-t span{font-size:15px; color:var(--muted); display:none}
.tour-step.on .tour-t span{display:block}
.tour-bar{position:absolute; left:0; bottom:0; height:4px; width:0; background:var(--green)}
.tour-step.on .tour-bar{animation:tourbar 5s linear forwards}
.tour:not(.inview) .tour-bar, .tour.paused .tour-bar{animation-play-state:paused}
@keyframes tourbar{to{width:100%}}
@media (max-width:900px){.tour{grid-template-columns:1fr} .tour-stage{height:560px} .tour-slide .phone{--z:.62}}
@media (prefers-reduced-motion: reduce){.tour-step.on .tour-bar{animation:none} .tour-slide{transition:none}}
.tour-stage{height:auto; display:grid; place-items:center; padding:12px 0}
.tour-phone{--z:.74; transform:perspective(1600px) rotateY(16deg) rotateX(5deg) rotateZ(-2deg); box-shadow:inset 0 0 0 1px #24363a, -34px 46px 60px -18px rgba(0,38,43,.32), -8px 14px 22px -8px rgba(0,38,43,.18)}
@media (max-width:900px){.tour-phone{transform:perspective(1200px) rotateY(10deg) rotateX(4deg) rotateZ(-1.5deg)}}
@media (prefers-reduced-motion: reduce){.tour-phone{transform:none}}
.tour-screens{position:relative; border-radius:calc(var(--frame-r) - var(--bezel)); overflow:hidden}
.tour-scr{position:absolute; top:0; left:0; visibility:hidden}
.tour-scr.on{position:relative; visibility:visible}
.tour-dip{position:absolute; inset:0; z-index:5; background:#fff; opacity:0; pointer-events:none; transition:opacity .2s ease}
.tour-screens.dip .tour-dip{opacity:1}
.tour-t b{font-size:19px}
.tour-t span{font-size:16.5px; line-height:1.5}
.tour-n{width:34px; height:34px; font-size:15px}
@media (max-width:900px){.tour-phone{--z:.62}}
.tour-nav{display:none}
@media (max-width:900px){
.tour{gap:14px}
.tour-stage{position:relative; padding:0 0 32px}
.tour-phone{--z:.47}
.tour-nav{display:block; position:absolute; inset:0; pointer-events:none}
.tn-arr{position:absolute; top:calc(50% - 38px); pointer-events:auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-card)}
.tn-arr[data-d="-1"]{left:0}
.tn-arr[data-d="1"]{right:0}
.tour-dots{position:absolute; left:0; right:0; bottom:0; height:28px; display:flex; justify-content:center; pointer-events:auto}
.tour-dots button{width:22px; height:28px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer; transition:width .25s ease}
.tour-dots button i{width:8px; height:8px; border-radius:999px; background:var(--line); transition:width .25s ease, background .25s ease}
.tour-dots button.on{width:34px}
.tour-dots button.on i{width:24px; background:var(--ink)}
.tour-steps li:not(:has(.tour-step.on)){display:none}
.tour-steps{min-height:132px}
.tour-step{cursor:default; padding:14px 16px; gap:14px}
.tour-t b{font-size:17.5px}
.tour-t span{font-size:15.5px}
.tour-step.on .tour-t{animation:tfade .35s ease}
}
@keyframes tfade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.tour-step.on .tour-t{animation:none}}
#fysio .portal-grid{grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start}
#fysio .portal-notes{position:relative; z-index:2; margin:0; padding:28px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card)}
#fysio .portal-notes ul{counter-reset:pn}
#fysio .portal-notes li{counter-increment:pn; cursor:default; padding:8px 10px; margin:0 -10px; border-radius:10px; transition:background .2s ease}
#fysio .portal-notes li:hover{background:var(--surface-cyan); color:var(--ink)}
#fysio .portal-notes li::before{content:counter(pn); width:26px; height:26px; margin-top:0; border-radius:50%; background:var(--green); color:#00262B; font-size:13px; font-weight:600; display:grid; place-items:center}
@media (max-width:960px){#fysio .portal-grid{grid-template-columns:1fr; gap:20px} #fysio .portal-notes{margin:0}}
#fysio .pane{position:relative}
.hs{position:absolute; z-index:5; border-radius:12px; border:3px solid #2FBF71; background:rgba(171,255,174,.22); box-shadow:0 0 0 6px rgba(171,255,174,.35); font-size:0; opacity:0; transform:scale(.97); transition:opacity .2s ease, transform .2s ease; pointer-events:none}
.hs::after{content:none}
.hs.lit{opacity:1; transform:none}
@keyframes hsp{from{transform:scale(.8); opacity:1} to{transform:scale(1.7); opacity:0}}
@media (prefers-reduced-motion: reduce){.hs::after{animation:none}}
/* trust */
.trust{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.trust div{background:var(--surface); padding:26px; display:flex; flex-direction:column; gap:10px; min-width:0}
.trust svg{color:var(--signal)}
.trust p{color:var(--muted); font-size:16px}
@media (max-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trust{grid-template-columns:1fr}}
/* close */
.close{background:var(--block-deep); color:#FFFFFF}
.close .wrap{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.close h2{max-width:20ch}
.close p{color:#B9D3D7; max-width:56ch; font-size:19px}
.close .addr{font-family:var(--display); font-size:clamp(22px,2.6vw,30px); font-weight:600; background:var(--green); color:var(--jet); padding:10px 20px; border-radius:12px; user-select:all}
/* gradients and dark sections */
.hero{background:radial-gradient(55% 70% at 88% 35%, rgba(171,255,174,.55), transparent 62%), radial-gradient(60% 80% at 0% 0%, rgba(205,227,230,.95), transparent 70%), var(--bg)}
.band{background:linear-gradient(180deg, var(--band), color-mix(in srgb, var(--band) 55%, var(--bg)))}
.dark{--ink:#E8F3F4; --muted:#A9C6CA; --line:rgba(205,227,230,.16); --line-strong:rgba(205,227,230,.32); --surface:rgba(255,255,255,.05); --surface-cyan:rgba(205,227,230,.14); --focus:#6FD3DF;
color:var(--ink); background:radial-gradient(60% 90% at 100% 0%, rgba(10,124,138,.55), transparent 60%), radial-gradient(45% 70% at 0% 100%, rgba(171,255,174,.16), transparent 65%), linear-gradient(165deg, #00262B 0%, #001619 100%)}
.dark .lede{color:var(--muted)}
.dark .flow li{backdrop-filter:blur(4px)}
.dark .flow li::before{background:linear-gradient(140deg, var(--green), #CDE3E6); color:#00262B}
.dark .vs-ctrl button{background:rgba(255,255,255,.06)} .dark .vs-ctrl button:hover{background:rgba(255,255,255,.14)}
.dark .vs-media{background:linear-gradient(160deg, #0E4A52, #08343A)}
.dark .vs-ph span{background:var(--green); color:#00262B}
.flow li::before{background:linear-gradient(140deg, var(--cyan), var(--green)); color:#00262B}
.close{background:radial-gradient(55% 90% at 90% 10%, rgba(171,255,174,.28), transparent 60%), radial-gradient(60% 90% at 0% 100%, rgba(10,124,138,.5), transparent 65%), linear-gradient(160deg, #00262B, #001619)!important}
.logo-mark{width:34px; height:34px; border-radius:9px; background:#00262B; color:#ABFFAE}
.vs-media{background:linear-gradient(160deg, var(--cyan), var(--green))}
.dark .trust{background:rgba(205,227,230,.14); border-color:rgba(205,227,230,.14)}
.dark .trust div{background:rgba(0,28,32,.78)}
.dark .trust svg{color:var(--green)}
.dark .trust h3{color:var(--ink)}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

/* ===== Multi-page additions: navigation, page heads, photo slots, pricing, FAQ, contact, footer ===== */
.top .wrap{gap:12px}
.logo{color:var(--ink)}
.mainnav{display:flex; align-items:center; gap:2px; margin-left:auto; font-size:15px; font-weight:500}
.mainnav > a, .dd-btn{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:999px; text-decoration:none; color:var(--muted); border:0; background:none; font:inherit; cursor:pointer}
.mainnav > a:hover, .dd-btn:hover{color:var(--ink)}
.mainnav > a[aria-current="page"], .dd-btn.active{background:var(--surface-cyan); color:var(--ink)}
.dd{position:relative}
.dd-btn svg{transition:transform .2s ease}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-panel{position:absolute; left:50%; top:100%; translate:-50% 0; padding-top:10px; display:none; z-index:30}
.dd.open .dd-panel{display:block}
.dd-in{width:min(620px, calc(100vw - 32px)); display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:10px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 48px -20px rgba(0,38,43,.35)}
.dd-in a{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; text-decoration:none; color:var(--ink)}
.dd-in a:hover, .dd-in a[aria-current="page"]{background:var(--band)}
.dd-in .di{width:34px; height:34px; border-radius:10px; background:var(--surface-cyan); display:grid; place-items:center; flex:none}
.dd-in b{display:block; font-weight:600; font-size:15px}
.dd-in small{display:block; color:var(--muted); font-size:13.5px; line-height:1.4}
.menu-btn{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); place-items:center; cursor:pointer}
.mmenu{border-top:1px solid var(--line); background:var(--bg); max-height:calc(100vh - 64px); overflow:auto}
.top .mmenu .wrap{display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; min-height:0; padding-block:12px 20px}
.mmenu h3{font-size:13px; font-weight:600; color:var(--muted); margin:12px 0 4px}
.mmenu a:not(.demo-btn){display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; font-size:17px; font-weight:500}
.mmenu a[aria-current="page"]{color:var(--focus)}
.mmenu .demo-btn{margin-top:18px}
@media (max-width:1100px){.mainnav, .top .demo-btn.sm{display:none} .menu-btn{display:grid; margin-left:auto}}
@media (min-width:1101px){.mmenu{display:none!important}}
@media (min-width:560px) and (max-width:1100px){.top .demo-btn.sm{display:inline-flex; margin-left:auto} .menu-btn{margin-left:0}}

/* page head with photo slot */
.page-hero{padding-block:clamp(36px, 6vw, 72px) clamp(40px, 6vw, 72px)}
.ph-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
.ph-copy{display:flex; flex-direction:column; gap:20px; min-width:0}
.crumb{font-size:14.5px; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink)}
.page-hero h1{font-size:clamp(38px, 5vw, 60px)}
.page-hero.solo .ph-grid{grid-template-columns:minmax(0,1fr)}
.page-hero.solo .ph-copy{max-width:760px}
.btn2{display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 22px; border-radius:14px; border:1.5px solid var(--line-strong); color:var(--ink); background:var(--surface); font-weight:600; font-size:17px; text-decoration:none}
.btn2:hover{background:var(--band)}
.dark .btn2{background:transparent; border-color:rgba(205,227,230,.35); color:#fff}
.dark .btn2:hover{background:rgba(255,255,255,.08)}
.dark .demo-btn{background:var(--green); color:var(--jet)}
.dark .demo-btn:hover{background:#C6FFC8}
.btns{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr}}

/* photo slots */
.photo{position:relative; margin:0; aspect-ratio:var(--ar, 4 / 3); border-radius:22px; overflow:hidden; background:radial-gradient(70% 80% at 20% 15%, rgba(171,255,174,.35), transparent 60%), linear-gradient(150deg, var(--cyan), color-mix(in srgb, var(--cyan) 55%, var(--bg))); max-width:100%}
.photo img, .photo video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.photo.ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; text-align:center; color:#2E4B50}
.photo.ph .pi{width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.75); display:grid; place-items:center; color:var(--jet)}
.photo.ph figcaption{font-size:14px; max-width:36ch; line-height:1.45}
.photo.ph figcaption b{display:block; font-weight:600; color:var(--jet); font-size:15px}
.dark .photo{background:radial-gradient(70% 80% at 20% 15%, rgba(171,255,174,.18), transparent 60%), linear-gradient(150deg, #0E4A52, #08343A)}
.dark .photo.ph{color:#A9C6CA}
.dark .photo.ph figcaption b{color:#fff}
.dark .photo.ph .pi{background:rgba(255,255,255,.1); color:var(--green)}

/* overview cards on home */
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.card-l{display:flex; flex-direction:column; gap:14px; text-decoration:none; color:var(--ink); padding:12px 12px 22px; border-radius:24px; background:var(--surface); border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease}
.card-l:hover{transform:translateY(-3px); box-shadow:var(--shadow-card)}
.card-l .photo{border-radius:16px}
.card-l h3, .card-l p, .card-l .more{padding-inline:10px}
.card-l p{color:var(--muted); font-size:16px}
.card-l .more{margin-top:auto; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:6px}
@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

/* wide photo band */
.photo-band{padding-block:0}
.photo-band .photo{--ar:21 / 9; border-radius:28px}
@media (max-width:700px){.photo-band .photo{--ar:4 / 3}}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
.split .txt{display:flex; flex-direction:column; gap:16px; min-width:0}
.split.rev .txt{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr} .split.rev .txt{order:0}}

/* generic grids */
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.grid3 > div, .tile{padding:24px; border-radius:18px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:10px; min-width:0}
.grid3 p, .tile p{color:var(--muted); font-size:16px}
.ic{width:42px; height:42px; border-radius:12px; background:var(--surface-cyan); color:var(--ink); display:grid; place-items:center}
.dark .ic{background:rgba(171,255,174,.14); color:var(--green)}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid3{grid-template-columns:1fr}}
.steps3{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; counter-reset:s}
.steps3 li{counter-increment:s; display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:2px solid var(--ink)}
.steps3 li::before{content:counter(s); font-weight:600; font-size:14px; color:var(--muted)}
.steps3 p{color:var(--muted); font-size:16px}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.timeline li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; padding:22px 0; border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline .when{font-weight:600}
.timeline .when small{display:block; font-weight:500; color:var(--muted); font-size:14px}
.timeline p{color:var(--muted); font-size:16px; margin-top:4px}
@media (max-width:600px){.timeline li{grid-template-columns:1fr; gap:6px}}
.chipsx{display:flex; flex-wrap:wrap; gap:10px}
.chipsx span{padding:10px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-weight:500}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:16.5px}
.checks li svg{flex:none; margin-top:3px; color:var(--focus)}
.checks li span{color:var(--muted)}
.checks li b{color:var(--ink); font-weight:600}
.dark .checks li svg{color:var(--green)}

/* call to action band */
.cta-band .wrap{display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:28px; align-items:center}
.cta-band h2{max-width:20ch}
.cta-band p{color:var(--muted); margin-top:12px; max-width:52ch}
@media (max-width:760px){.cta-band .wrap{grid-template-columns:1fr}}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:stretch}
.plan{display:flex; flex-direction:column; gap:18px; padding:28px; border-radius:22px; background:var(--surface); border:1px solid var(--line); min-width:0}
.plan.mid{border:2px solid var(--ink); box-shadow:var(--shadow-card)}
.plan .for{color:var(--muted); font-size:15.5px}
.plan .price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding-block:6px; border-block:1px solid var(--line)}
.plan .price b{white-space:nowrap; font-size:40px; font-weight:600; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.plan .price span{color:var(--muted); font-size:15px}
.plan .tagx{align-self:flex-start; font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--green); color:var(--jet)}
.plan .checks li{font-size:15.5px}
.plan .demo-btn, .plan .btn2{margin-top:auto; width:100%}
.price-note{margin-top:18px; color:var(--muted); font-size:15px}
@media (max-width:960px){.plans{grid-template-columns:1fr; max-width:560px}}

/* FAQ */
.faq-wrap{display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:start}
.faq-toc{position:sticky; top:96px; display:flex; flex-direction:column; gap:4px}
.faq-toc a{padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--muted); font-weight:500}
.faq-toc a:hover{background:var(--band); color:var(--ink)}
.faq-group{scroll-margin-top:88px}
.faq-group + .faq-group{margin-top:44px}
.faq-group > h2{font-size:clamp(24px, 2.6vw, 30px); margin-bottom:12px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; cursor:pointer; font-weight:600; font-size:18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{width:30px; height:30px; border-radius:50%; background:var(--band); display:grid; place-items:center; flex:none; transition:transform .25s ease, background .25s ease}
.qa[open] summary .pm{transform:rotate(45deg); background:var(--surface-cyan)}
.qa .a{padding:0 0 20px; color:var(--muted); font-size:16.5px; max-width:68ch; display:flex; flex-direction:column; gap:10px}
.qa .a a{color:var(--ink)}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr} .faq-toc{position:static; flex-direction:row; flex-wrap:wrap}}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px, 5vw, 56px); align-items:start}
.cform{display:grid; gap:18px; padding:clamp(20px, 3vw, 32px); border-radius:22px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card)}
.cform .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cf{display:grid; gap:6px; min-width:0}
.cf label{font-weight:600; font-size:15px}
.cf label span{font-weight:400; color:var(--muted)}
.cf input, .cf select, .cf textarea{width:100%; height:48px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--bg); color:var(--ink); padding:0 14px; font:inherit; font-size:16px}
.cf textarea{height:auto; min-height:140px; padding:12px 14px; resize:vertical}
.cf input:focus, .cf select:focus, .cf textarea:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:transparent}
.cf .err{color:#B3261E; font-size:13.5px; font-weight:500}
.cf.bad input, .cf.bad textarea{border-color:#B3261E}
.chk{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--muted)}
.chk input{width:20px; height:20px; margin-top:2px; accent-color:var(--jet); flex:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cform .submit{border:0; cursor:pointer; justify-self:start}
.cform .submit[disabled]{opacity:.6; cursor:wait}
.form-msg{padding:16px 18px; border-radius:14px; font-size:16px}
.form-msg.ok{background:color-mix(in srgb, var(--green) 45%, var(--surface)); color:var(--ink)}
.form-msg.fail{background:var(--warn-soft); color:var(--ink)}
.form-msg a{color:inherit; font-weight:600}
.c-side{display:flex; flex-direction:column; gap:22px}
.c-side .tile b{font-weight:600}
.c-side .copy{display:inline-flex; gap:8px; align-items:center}
.c-side .copy code{font-family:inherit; font-weight:600; font-size:17px; user-select:all}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr} .cform .two{grid-template-columns:1fr}}

/* footer */
footer.foot{padding-block:56px 28px; font-size:15px; color:var(--muted); border-top:1px solid var(--line); background:var(--bg)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap:32px}
.foot-grid h3{font-size:14px; font-weight:600; color:var(--ink); margin-bottom:12px}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-grid a{text-decoration:none; color:var(--muted)}
.foot-grid a:hover{color:var(--ink)}
.foot-brand{display:flex; flex-direction:column; gap:12px; max-width:36ch}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1}}

/* library: spacing, usp column, link to the example card */
#bibliotheek .lib-head{margin-bottom:clamp(80px, 10vw, 128px)}
#bibliotheek .lib{align-items:center}
.feat-col{display:flex; flex-direction:column; gap:28px; min-width:0}
.feat-title{font-size:clamp(26px, 2.6vw, 32px)}
.feat .linked{position:relative; padding:18px; margin:-18px; border-radius:18px; background:color-mix(in srgb, var(--green) 26%, var(--surface)); border:1px solid color-mix(in srgb, var(--green) 70%, var(--line))}
.feat .linked .feat-ico{background:var(--green); color:var(--jet)}
.feat .see{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--ink); margin-top:2px}
.feat .see .m{display:none}
@media (min-width:881px){.feat .linked::after{content:""; position:absolute; left:100%; top:50%; width:clamp(32px, 5vw, 64px); border-top:2px dashed color-mix(in srgb, var(--green) 70%, var(--line-strong))}}
@media (max-width:880px){.feat .linked{margin:0} .feat .see .d{display:none} .feat .see .m{display:inline} .feat .see svg{transform:rotate(90deg)}}
.ed-head{display:flex; align-items:center; gap:10px; padding:14px 18px; margin:0!important; background:color-mix(in srgb, var(--green) 26%, var(--surface)); border-bottom:1px solid color-mix(in srgb, var(--green) 70%, var(--line))}
.ed-head .feat-ico{width:32px; height:32px; margin:0; background:var(--green); color:var(--jet); border-radius:10px}
.ed-head b{font-weight:600}
.ed-head .ex-tag{margin-left:auto; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--surface); color:var(--muted)}
.excard.ed{border-color:color-mix(in srgb, var(--green) 70%, var(--line))}

/* exercise filter */
.xf-bar{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between; margin-bottom:24px}
.xf-chips{display:flex; flex-wrap:wrap; gap:8px}
.xf-chips button{height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:15px; font-weight:500; cursor:pointer}
.xf-chips button:hover{background:var(--band)}
.xf-chips button[aria-pressed="true"]{background:var(--jet); border-color:var(--jet); color:#fff}
.xf-chips button span{color:inherit; opacity:.6; margin-left:6px; font-variant-numeric:tabular-nums}
.xf-search{position:relative; flex:0 1 300px; min-width:220px}
.xf-search input{width:100%; height:44px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:0 14px 0 40px; font:inherit; font-size:16px}
.xf-search svg{position:absolute; left:13px; top:50%; translate:0 -50%; color:var(--muted)}
.xf-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.xf-item{display:flex; gap:14px; align-items:center; padding:14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); min-width:0}
.xf-item .th{width:52px; height:52px; border-radius:12px; flex:none; background:linear-gradient(150deg, var(--cyan), color-mix(in srgb, var(--green) 60%, var(--cyan))); display:grid; place-items:center; color:var(--jet)}
.xf-item b{display:block; font-weight:600; line-height:1.3}
.xf-item small{color:var(--muted); font-size:14px}
.xf-empty{padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:16px}
.xf-note{margin-top:16px; color:var(--muted); font-size:14.5px}
@media (max-width:980px){.xf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.xf-grid{grid-template-columns:1fr} .xf-search{flex:1 1 100%}}

/* FAQ: calm, one surface, search and grouped cards */
body.page-faq section, body.page-faq .page-hero{background:var(--bg)!important}
.faq-search{position:relative; max-width:560px; margin-top:6px}
.faq-search input{width:100%; height:54px; border-radius:14px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:0 16px 0 46px; font:inherit; font-size:17px}
.faq-search svg{position:absolute; left:16px; top:50%; translate:0 -50%; color:var(--muted)}
.faq-toc a{display:flex; justify-content:space-between; align-items:center; gap:8px}
.faq-toc a span{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.faq-toc a.on{background:var(--surface); color:var(--ink); box-shadow:inset 3px 0 0 var(--ink)}
.faq-group{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:8px 24px 8px}
.faq-group + .faq-group{margin-top:20px}
.faq-group > h2{font-size:20px; padding:18px 0 10px; margin:0; border-bottom:1px solid var(--line)}
.faq-group .qa:last-child{border-bottom:0}
.qa summary{font-size:17px; font-weight:500; padding:16px 0}
.qa summary:hover{color:var(--focus)}
.qa-ic{width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; flex:none; color:var(--ink); transition:transform .25s ease}
.qa[open] summary{font-weight:600}
.qa[open] .qa-ic{transform:rotate(45deg)}
.qa .a{color:var(--muted); padding-bottom:18px}
.faq-none{padding:24px; border-radius:16px; border:1px dashed var(--line-strong); color:var(--muted)}
@media (max-width:860px){.faq-toc{display:none} .faq-group{padding:4px 16px}}