html{font-synthesis-weight:none}
/* ============================================================
Wellness A\ — site-wide design system (rebuild)
Calm, clinical, editorial. Inter UI + Libre Baskerville brand.
============================================================ */
:root{
--paper:#eff4f7;
--white:#ffffff;
--ink:#0a1218;
--ink-2:#1c2b34;
--muted:#5c6b75;
--line:rgba(10,49,67,.12);
--blue:#111;
--blue-deep:#0a3143;
--sky:#85b5d4;
--teal:#4e92ac;
--navy:#0a3143;
--bg-dark:#0a0d10;
--pad:clamp(20px,4vw,72px);
--container:1240px;
--radius:16px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:#0a3143;color:#fff}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body.site{
font-family:'Jost',-apple-system,system-ui,sans-serif;
background:var(--white);color:var(--ink);letter-spacing:0;
}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.brand{font-family:'Libre Baskerville',Georgia,serif;letter-spacing:-0.08em}
.brand .bs{color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ---------- Nav (light pages) ---------- */
.nav2{
position:fixed;top:0;left:0;right:0;z-index:60;
display:flex;align-items:center;justify-content:space-between;
padding:16px var(--pad);
background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.nav2__brand{font-size:21px;font-family:'Libre Baskerville',serif;letter-spacing:-0.08em}
.nav2__links{display:flex;gap:30px;font-size:14px;color:var(--ink-2)}
.nav2__links a{opacity:.85;transition:opacity .2s}
.nav2__links a:hover{opacity:1}
.nav2__right{display:flex;align-items:center;gap:18px;font-size:14px}
.nav2__login{opacity:.75}
.btn{
display:inline-flex;align-items:center;gap:8px;
font-size:14px;font-weight:500;border-radius:10px;padding:11px 20px;
transition:transform .2s var(--ease),background .2s,color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ghost{border:1px solid rgba(14,13,11,.22);color:var(--ink)}
.btn--white{background:#fff;color:var(--ink)}
.btn--line-w{border:1px solid rgba(255,255,255,.4);color:#fff}
.btn svg{width:14px;height:14px}
/* ---------- Section scaffolding ---------- */
.sec{padding-block:clamp(72px,9vw,140px)}
.sec--paper{background:var(--paper)}
.sec--dark{background:var(--bg-dark);color:#fff}
.sec--tight{padding-block:clamp(48px,6vw,88px)}
.kicker{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;
font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:9px;
}
.sec--dark .kicker{color:#9a9aa2}
.kicker svg{width:11px;height:11px}
.h-display{
font-weight:500;font-size:clamp(30px,3.6vw,52px);
line-height:1.06;letter-spacing:-0.03em;
}
.h-serif{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(28px,3.2vw,46px);line-height:1.18;letter-spacing:-0.02em;
}
.h-sub{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--muted);max-width:56ch}
.sec--dark .h-sub{color:#9a9aa2}
/* ---------- Trust strip ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.trust__inner{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:space-between;padding-block:26px}
.trust__label{font-size:14px;color:var(--muted);white-space:nowrap}
.trust__row{display:flex;gap:clamp(22px,3.6vw,52px);flex-wrap:wrap;align-items:center}
.trust__item{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:16px;letter-spacing:0;color:var(--ink-2);opacity:.72}
/* ---------- Dimensions word grid ---------- */
.dims{background:var(--white)}
.dims__grid{
margin-top:clamp(36px,5vw,64px);
display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.dims__cell{
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
padding:clamp(20px,2.4vw,34px);min-height:150px;
display:flex;flex-direction:column;justify-content:space-between;gap:14px;
transition:background .25s var(--ease);
}
.dims__cell:hover{background:var(--paper)}
.dims__cell h3{font-weight:500;font-size:clamp(18px,1.7vw,23px);letter-spacing:-0.02em}
.dims__cell p{font-size:14px;line-height:1.5;color:var(--muted)}
/* ---------- Product deep-dives ---------- */
.dive{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.dive+.dive{margin-top:clamp(72px,9vw,130px)}
.dive__copy h2{font-weight:500;font-size:clamp(26px,2.8vw,40px);letter-spacing:-0.025em;line-height:1.08;margin-bottom:18px}
.dive__copy p{font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch;margin-bottom:14px}
.dive__list{margin:22px 0 30px;display:grid;gap:12px}
.dive__list li{
list-style:none;display:flex;gap:12px;font-size:15px;color:var(--ink-2);line-height:1.5;
}
.dive__list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:8px}
.dive__visual{
position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.4;
background:#d8cdbb center/cover no-repeat;
}
.dive__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,8,.06),rgba(20,15,8,.22))}
.dive--flip .dive__visual{order:-1}
.dive__tag{
position:absolute;z-index:2;left:18px;bottom:16px;
font-size:13px;color:#fff;background:rgba(10,10,10,.55);backdrop-filter:blur(8px);
padding:7px 14px;border-radius:100px;
}
/* ---------- Use-case cards ---------- */
.cases{background:var(--paper)}
.cases__grid{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.case{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.case:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,13,11,.25)}
.case h3{font-weight:500;font-size:19px;letter-spacing:-0.02em}
.case p{font-size:14px;line-height:1.55;color:var(--muted);flex:1}
.case a{font-size:14px;color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.case a svg{width:13px;height:13px}
/* ---------- Stats band ---------- */
.stats{background:var(--bg-dark);color:#fff}
.stats__grid{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.stat h3{font-weight:500;font-size:clamp(34px,4vw,56px);letter-spacing:-0.03em;margin-bottom:10px}
.stat h3 span{color:var(--gold)}
.stat p{font-size:14px;line-height:1.55;color:#9a9aa2;max-width:30ch}
/* ---------- Closing CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--paper)}
.cta__inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.cta .h-serif{max-width:22ch}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta__brandmark{
margin-top:clamp(40px,7vw,88px);
font-family:'Libre Baskerville',Georgia,serif;letter-spacing:-0.08em;
font-size:clamp(56px,10vw,150px);line-height:1;color:var(--ink);opacity:.94;text-align:center;
}
/* ---------- Footer ---------- */
.foot{background:var(--bg-dark);color:#cfcfd4}
.foot__top{
display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(28px,4vw,64px);
padding-block:clamp(56px,7vw,96px);
}
.foot__brand{font-size:26px;color:#fff}
.foot__tag{margin-top:14px;font-size:14px;line-height:1.6;color:#8f8f97;max-width:26ch}
.foot h4{font-size:13px;font-weight:500;color:#8f8f97;margin-bottom:18px;letter-spacing:.02em}
.foot ul{list-style:none;display:grid;gap:11px}
.foot ul a{font-size:14px;color:#cfcfd4;opacity:.9;transition:opacity .2s}
.foot ul a:hover{opacity:1}
.foot__bottom{
border-top:1px solid rgba(255,255,255,.1);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-block:26px;font-size:13px;color:#8f8f97;
}
.foot__legal{display:flex;gap:22px}
/* ---------- Page hero (subpages) ---------- */
.phero{padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(56px,7vw,100px)}
.phero--dark{background:var(--bg-dark);color:#fff}
.phero h1{font-weight:500;font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-0.03em;max-width:18ch}
.phero .h-sub{margin-top:22px}
.phero__actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
/* ---------- Feature rows / steps ---------- */
.steps{counter-reset:step}
.steps__grid{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.step{counter-increment:step;border-top:2px solid var(--ink);padding-top:18px}
.step::before{content:counter(step,decimal-leading-zero);font-size:13px;color:var(--muted);display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}
.step h3{font-weight:500;font-size:18px;letter-spacing:-0.015em;margin-bottom:10px}
.step p{font-size:14px;line-height:1.55;color:var(--muted)}
/* ---------- Insight cards ---------- */
.posts__grid{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.post{
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);
transition:transform .25s var(--ease),box-shadow .25s var(--ease);display:flex;flex-direction:column;
}
.post:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,13,11,.25)}
.post__img{aspect-ratio:16/9;background:var(--paper) center/cover no-repeat}
.post__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__cat{font-size:13px;color:var(--blue)}
.post h3{font-weight:500;font-size:18px;line-height:1.35;letter-spacing:-0.015em;flex:1}
.post__date{font-size:13px;color:var(--muted)}
/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .95s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
/* ---------- Responsive ---------- */
@media (max-width:1020px){
.dims__grid{grid-template-columns:repeat(2,1fr)}
.cases__grid,.posts__grid,.stats__grid{grid-template-columns:1fr 1fr}
.steps__grid{grid-template-columns:1fr 1fr}
.foot__top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:720px){
.nav2__links{display:none}
.dive{grid-template-columns:1fr}
.dive--flip .dive__visual{order:0}
.cases__grid,.posts__grid,.stats__grid,.steps__grid{grid-template-columns:1fr}
.dims__grid{grid-template-columns:1fr}
.foot__top{grid-template-columns:1fr}
}
/* ============================================================
Home rebuild — sections matched to the reference architecture
============================================================ */
/* ---------- ScrollingQuote: 200vh pinned video + evergreen quote ---------- */
.squote{position:relative;background:#fff;height:150vh;padding:0 12px}
.squote__pin{
position:sticky;top:12px;height:calc(100vh - 24px);
display:flex;gap:12px;
}
.squote__pin::after{ /* next section peeking up, rounded-top (reference mechanic) */
content:"";position:absolute;left:50%;top:calc(100% - 5px);transform:translateX(-50%);
width:calc(100vw - 48px);height:20vh;background:#e8f1fa;
border-radius:16px 16px 0 0;pointer-events:none;
}
.squote__video{
flex:0 0 34%;border-radius:22px;overflow:hidden;background:#000;
}
.squote__video video{width:100%;height:100%;object-fit:cover}
.squote__panel{
flex:1;border-radius:22px;background:#0a3143;
display:flex;align-items:center;
padding:clamp(32px,5vw,84px);
}
.squote__text{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(28px,3.6vw,54px);
line-height:1.22;letter-spacing:-0.015em;max-width:22ch;
}
.squote__text .w{color:rgba(255,255,255,.22);transition:color .25s linear}
.squote__text .w.on{color:#fff}
.squote__text .brand{letter-spacing:-0.08em}
/* ---------- Word cycler: static line + directional colored dynamic word ---------- */
.cycler{
position:relative;overflow:hidden;
background:#fff;color:var(--ink);border-top:1px solid var(--line);
min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:clamp(64px,10vh,120px) var(--pad);
}
.cycler__field{position:absolute;inset:0;z-index:1;pointer-events:none}
.cycler__stage{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:44px}
.float{
position:absolute;border-radius:12px;overflow:hidden;margin:0;
box-shadow:0 24px 54px -28px rgba(10,49,67,.34);
opacity:0;transform:translate(var(--px,0px),var(--py,0px));
transition:opacity 1s cubic-bezier(.19,1,.22,1);
will-change:transform,opacity;
}
.float img{
width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);
transform:scale(1.08);transition:transform 1.2s cubic-bezier(.19,1,.22,1);
}
.float.in{opacity:1}
.float.in img{transform:scale(1)}
.cycler::before{ /* keep the centre legible over the field */
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(ellipse 46% 40% at 50% 50%,#fff 30%,rgba(255,255,255,.72) 55%,rgba(255,255,255,0) 82%);
}
.cycler h2{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(38px,5.6vw,84px);
line-height:1.12;letter-spacing:-0.02em;
}
.cycler__line2{display:flex;justify-content:center;gap:.32em}
.cycler__dyn{
position:relative;display:inline-block;overflow:clip;
min-height:1.24em;text-align:left;
transition:width .45s var(--ease);
font-style:italic;white-space:nowrap;
}
.cycler__dyn span{
position:absolute;left:0;top:0;white-space:nowrap;
opacity:0;transform:translateX(-45%);
transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.cycler__dyn span[data-direction="right"]{transform:translateX(45%)}
.cycler__dyn span.on{opacity:1;transform:translateX(0)}
.cycler__dyn span.out{opacity:0;transform:translateX(35%)}
.cycler__dyn span.out[data-direction="right"],
.cycler__dyn span.out.exit-left{transform:translateX(-35%)}
/* ---------- CardGrid: 3 grey cards ---------- */
.cardgrid{background:#fff;color:var(--ink)}
.cardgrid__head{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(28px,3.2vw,44px);letter-spacing:-0.02em;line-height:1.18;
max-width:26ch;margin-bottom:clamp(36px,5vw,64px);
}
.cardgrid__head .muted{color:#7a8c98}
.cardgrid__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.gcard{
background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(26px,2.6vw,40px);
min-height:clamp(420px,46vw,540px);display:flex;flex-direction:column;
}
.gcard__icon{
width:60px;height:60px;border-radius:14px;background:#fff;
display:grid;place-items:center;margin-bottom:clamp(48px,7vw,96px);
}
.gcard__icon svg{width:24px;height:24px;stroke:var(--blue-deep)}
.gcard h3{font-weight:500;font-size:clamp(20px,1.8vw,25px);line-height:1.3;letter-spacing:-0.02em;max-width:16ch}
.gcard p{margin-top:auto;padding-top:34px;font-size:14px;line-height:1.6;color:#42545e;max-width:36ch}
.gcard .gbtn{
margin-top:22px;align-self:flex-start;
font-size:14px;font-weight:500;color:var(--ink);
border:1px solid var(--line);border-radius:9px;padding:10px 16px;
transition:background .2s,border-color .2s;
}
.gcard .gbtn:hover{border-color:rgba(10,49,67,.35)}
/* ---------- BlogPreview masonry ---------- */
.bprev{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.bprev__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);align-items:start}
.bprev__col{display:grid;gap:clamp(14px,1.6vw,24px)}
.mcard{
border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
padding:clamp(20px,2vw,30px);transition:transform .25s var(--ease);
}
.mcard:hover{transform:translateY(-3px)}
.mcard__chip{
display:inline-flex;align-items:center;gap:10px;
font-size:13px;letter-spacing:.04em;color:#5c6b75;margin-bottom:clamp(56px,7vw,120px);
}
.mcard__chip i{
width:26px;height:26px;border-radius:7px;background:#0a3143;display:grid;place-items:center;font-style:normal;
}
.mcard__chip i svg{width:11px;height:11px;stroke:#fff}
.mcard h3{font-weight:400;font-size:clamp(24px,2.4vw,36px);line-height:1.15;letter-spacing:-0.02em}
.mcard--dark{background:#0a3143;color:#fff;min-height:clamp(360px,34vw,460px)}
.mcard--dark .mcard__chip{color:#9b9a95}
.mcard--dark .mcard__chip i{background:rgba(255,255,255,.16)}
.mcard--img .mcard__photo{border-radius:14px;overflow:hidden;aspect-ratio:16/8.5;margin-bottom:18px}
.mcard--img .mcard__photo img{width:100%;height:100%;object-fit:cover}
.mcard--img .mcard__chip{margin-bottom:16px}
.mcard--img h3{font-size:clamp(17px,1.4vw,20px);line-height:1.4;font-weight:500}
.mcard--sm{flex-direction:row;gap:18px;align-items:center}
.mcard--sm .mcard__photo{flex:none;width:38%;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.mcard--sm .mcard__photo img{width:100%;height:100%;object-fit:cover}
.mcard--sm h3{font-size:clamp(15px,1.2vw,18px);line-height:1.4;font-weight:500}
.mcard--sm .mcard__chip{margin-bottom:10px}
/* ---------- Footer v2: link columns + giant statement ---------- */
.foot2{background:#0a3143;color:#fff;padding-top:clamp(56px,7vw,96px)}
.foot2__cols{
display:grid;grid-template-columns:minmax(60px,.6fr) repeat(4,1fr);
gap:clamp(24px,3.5vw,56px);
}
.foot2__mark{font-size:24px}
.foot2 h4{font-size:14px;font-weight:400;color:#8fb0c2;margin-bottom:20px;letter-spacing:.03em}
.foot2 ul{list-style:none;display:grid;gap:12px}
.foot2 ul a{font-size:14px;color:#fff;opacity:.92}
.foot2 ul a:hover{opacity:1}
.foot2__statement{
margin-top:clamp(72px,10vw,150px);
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;
font-weight:400;font-size:clamp(42px,7.6vw,128px);
line-height:1.08;letter-spacing:-0.03em;color:#fff;
}
.foot2__bottom{
margin-top:clamp(48px,6vw,90px);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-block:26px;border-top:1px solid rgba(255,255,255,.14);
font-size:13px;color:#8fb0c2;
}
.foot2__legal{display:flex;gap:22px}
@media (max-width:960px){
.squote__video{display:none}
.cardgrid__grid{grid-template-columns:1fr}
.gcard{min-height:0}
.gcard p{margin-top:26px}
.bprev__grid{grid-template-columns:1fr}
.foot2__cols{grid-template-columns:1fr 1fr}
}
/* ============================================================
Product-proof layer — dark UI panels on paper (v3)
============================================================ */
.plabel{
display:block;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:13px;letter-spacing:.02em;
color:var(--muted);margin-bottom:20px;
}
.prods{background:#fff;color:var(--ink)}
.prod{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,92px);align-items:center;padding:clamp(56px,7vw,104px) 0;border-top:1px solid var(--line)}
.prod:first-of-type{border-top:none;padding-top:0}
.prod--rev .prod__visual{order:-1}
.prod__copy h3{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(26px,2.8vw,40px);line-height:1.16;letter-spacing:-0.02em;margin-bottom:18px;
}
.prod__copy>p{font-size:16px;line-height:1.62;color:var(--muted);max-width:46ch;margin-bottom:24px}
.prod__feats{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.prod__feats li{display:flex;gap:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.prod__feats li svg{flex:none;width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2;margin-top:3px}
.prod__proof{
display:inline-flex;align-items:baseline;gap:12px;
border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff;
}
.prod__proof .n{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:22px;letter-spacing:-0.02em;color:var(--blue)}
.prod__proof .t{font-size:13px;color:var(--muted);max-width:26ch;line-height:1.45}
.prod__link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-left:18px;color:var(--ink)}
.prod__link svg{width:13px;height:13px}
.prod__link:hover{color:var(--blue)}
/* dark UI panel */
.uipanel{
border-radius:16px;overflow:hidden;
background:linear-gradient(180deg,#15181a,#101314);
border:1px solid rgba(255,255,255,.06);
box-shadow:0 60px 110px -48px rgba(14,13,11,.55),0 0 0 1px rgba(255,255,255,.02) inset;
color:#e8eae7;font-size:14px;
}
.uipanel__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.uipanel__bar .dots{display:flex;gap:6px}
.uipanel__bar .dots i{width:9px;height:9px;border-radius:50%;background:#3a3f42}
.uipanel__bar .t{font-size:12px;color:#8b9190;margin-left:6px}
.uipanel__bar .live{margin-left:auto;font-size:11px;color:#7fc4bd;display:flex;align-items:center;gap:6px}
.uipanel__bar .live i{width:6px;height:6px;border-radius:50%;background:#7fc4bd;animation:wpulse 1.8s ease-in-out infinite}
@keyframes wpulse{0%,100%{opacity:1}50%{opacity:.25}}
.uipanel__body{padding:20px 22px}
.uipanel__k{font-size:11px;letter-spacing:.1em;color:#767c7a;margin-bottom:14px}
.tl{display:flex;gap:10px;margin-bottom:12px;line-height:1.5}
.tl .who{flex:none;width:46px;color:#767c7a;font-size:13px}
.tl .txt{color:#b9c0bc}
.noteblock{background:#0c0f10;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px 18px;margin-top:16px}
.noteblock__h{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:500;color:#e8eae7;margin-bottom:10px}
.noteblock__h .sign{font-size:11px;color:#7fc4bd;border:1px solid rgba(127,196,189,.35);border-radius:20px;padding:3px 9px;font-weight:500}
.noteblock p{font-size:13px;color:#b9c0bc;line-height:1.55;margin-bottom:10px}
.cite{
display:inline-flex;align-items:center;gap:5px;
font-size:11px;color:#85b5d4;background:rgba(133,181,212,.16);
border-radius:5px;padding:2px 8px;margin:2px 4px 2px 0;
}
.qrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:10px;background:#0c0f10}
.qrow .qt{color:#b9c0bc;font-size:13px;line-height:1.4}
.qrow .qt b{display:block;color:#e8eae7;font-weight:500}
.qrow .qa{margin-left:auto;flex:none;font-size:12px;font-weight:500;color:#7fc4bd;background:rgba(127,196,189,.14);border-radius:7px;padding:6px 12px}
.qrow--all .qa{color:#06222f;background:#85b5d4}
.phone{
max-width:300px;margin:0 auto;border-radius:30px;padding:14px;
background:linear-gradient(180deg,#15181a,#101314);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 60px 110px -48px rgba(14,13,11,.55);
}
.phone__scr{background:#0c0f10;border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:16px;min-height:360px}
.chiprow{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;margin-bottom:9px;background:#121516}
.chiprow .ct{font-size:13px;color:#b9c0bc}
.chiprow .cv{margin-left:auto;font-size:11px;color:#7fc4bd;white-space:nowrap}
.bubble{border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.5;margin:9px 0;max-width:90%}
.bubble--ai{background:#121516;border:1px solid rgba(255,255,255,.07);color:#b9c0bc}
.bubble--u{background:#4e92ac;color:#06222f;margin-left:auto;max-width:55%;font-weight:500}
/* ---------- hairline stat band ---------- */
.statband{background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.statband__cell{padding:clamp(36px,4.5vw,64px) clamp(18px,2.4vw,36px);border-right:1px solid var(--line);text-align:center}
.statband__cell:last-child{border-right:none}
.statband__cell .n{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:clamp(36px,4.4vw,60px);line-height:1;letter-spacing:-0.02em}
.statband__cell .n em{font-style:normal;color:var(--teal)}
.statband__cell .l{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.5;max-width:22ch;margin-inline:auto}
/* ---------- quote cards ---------- */
.qcards{background:#fff;color:var(--ink)}
.qcards__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.qcard{border:1px solid var(--line);border-radius:14px;background:#fff;padding:clamp(28px,3vw,40px)}
.qcard blockquote{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(18px,1.7vw,22px);line-height:1.5;letter-spacing:-0.01em;margin-bottom:26px;
}
.qcard .by{display:flex;align-items:center;gap:13px}
.qcard .av{
width:40px;height:40px;border-radius:50%;flex:none;
background:#0a3143;color:#e2f6f9;display:grid;place-items:center;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:15px;
}
.qcard .nm{font-size:14px;font-weight:500}
.qcard .rl{font-size:13px;color:var(--muted)}
@media (max-width:960px){
.prod{grid-template-columns:1fr}
.prod--rev .prod__visual{order:0}
.statband__grid{grid-template-columns:1fr 1fr}
.statband__cell:nth-child(2){border-right:none}
.statband__cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
.qcards__grid{grid-template-columns:1fr}
}
/* ---------- living product demos (looping sequences) ---------- */
.demo{
border-radius:18px;padding:clamp(24px,3vw,44px);
display:flex;flex-direction:column;gap:14px;justify-content:center;
min-height:clamp(360px,30vw,440px);
transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.demo:hover{transform:translateY(-4px)}
.demo--clinical{background:#e8f1fa}
.demo--admin{background:#e6f2ef}
.demo--personal{background:#eaf0fb}
.dcard{
background:#fff;border-radius:16px;padding:22px 24px;
box-shadow:0 18px 44px -26px rgba(10,49,67,.25);
font-size:14px;
}
.dcard__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dcard__head--split{justify-content:space-between;margin-bottom:8px}
.dcard__title{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:19px;letter-spacing:-0.01em}
.dcard__serif{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:22px;letter-spacing:-0.01em}
.dcard__val{font-size:17px;font-weight:500}
.dcard__count{margin-left:auto;font-size:13px;color:var(--muted)}
.dcard__count b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.watile{
flex:none;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:11px;letter-spacing:0.01em;color:#fff;
}
.watile--sky{background:#85b5d4}
.watile--mint{background:#63b0a8}
.watile--peri{background:#8fa3de}
.dchip{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;color:#2d6b80;background:#dcf1f4;border-radius:8px;padding:4px 10px;
}
.dchip--mint{color:#20707a;background:#dff2ef}
.dcard__date{margin-left:auto;font-size:13px;color:var(--muted)}
.dcard__meta{display:flex;align-items:center;margin-bottom:12px}
.dstep{
display:flex;align-items:center;gap:10px;
padding:9px 2px;border-top:1px solid rgba(10,49,67,.08);
font-size:14px;color:var(--ink-2);
}
.dstep em{font-style:normal;margin-left:auto;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;color:var(--muted)}
.dstep i{font-style:normal;color:#2d8a6e;margin-left:8px}
.dstep em+i{margin-left:8px}
.dstep:not(:has(em)) i{margin-left:auto}
.dfoot{padding-top:14px}
.dbtn{
display:inline-block;font-size:14px;font-weight:500;color:#fff;
background:var(--navy);border-radius:9px;padding:9px 16px;
}
.dbtn--all{background:var(--blue);transition:transform .3s var(--ease)}
.dbtn--all.pulse{transform:scale(1.05)}
.drow{
display:flex;align-items:center;gap:12px;
padding:11px 2px;border-top:1px solid rgba(10,49,67,.08);
transition:opacity .4s;
}
.drow.ok{opacity:.45}
.drow__t{font-size:13px;color:var(--muted);line-height:1.45}
.drow__t b{display:block;font-weight:500;color:var(--ink);font-size:14px}
.dapprove{
margin-left:auto;flex:none;font-size:13px;font-weight:500;
border:1px solid rgba(10,49,67,.2);border-radius:8px;padding:6px 13px;color:var(--ink);
transition:all .3s var(--ease);
}
.dapprove.done{border-color:transparent;background:#dff2ef;color:#20707a}
.dtrend{display:flex;gap:18px;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:15px;color:var(--ink-2);margin:6px 0 10px}
.dmono{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:13px;color:var(--muted)}
.dflag{
align-self:center;position:relative;
font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);
border-radius:100px;padding:7px 16px;margin:2px 0;
}
.dcard__sub{display:flex;align-items:center;gap:12px;margin-top:10px}
.dcard__sub b{display:block;font-size:15px;font-weight:500}
.dcard__sub small{font-size:13px;color:var(--muted)}
/* sequence reveal */
.demo .seq{opacity:0;transform:translateY(7px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.demo .seq.on{opacity:1;transform:none}
.dtrend .seq{display:inline-block}
/* ============================================================
Figma page (below hero) — Open Sans, clean & restrained
============================================================ */
.figsec{padding-block:clamp(56px,7vw,104px)}
.figsec .container{max-width:1200px}
.pill{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:100px;background:#0a0a0a;color:#fafafa;font-size:15px;font-weight:500;transition:transform .2s var(--ease),opacity .2s}
.pill:hover{transform:translateY(-1px);opacity:.9}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#0a0a0a;font-weight:500}
.tlink svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
/* --- Video band (section 02) --- */
.vband{background:#fff;padding-block:clamp(8px,2vw,28px)}
.vband__frame{border-radius:22px;overflow:hidden;aspect-ratio:16/8;background:#0c0c0e;box-shadow:0 40px 90px -60px rgba(10,20,30,.5)}
.vband__frame video{width:100%;height:100%;object-fit:cover;display:block}
/* --- Platform overview --- */
.plat{background:#fff;border-top:1px solid rgba(15,14,13,.07)}
.plat__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(25px,2.7vw,37px);letter-spacing:-0.02em;line-height:1.12;margin-bottom:clamp(38px,4.5vw,60px);max-width:18ch}
.plat__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,40px)}
.platcol__ic{display:inline-flex;color:#7d94a6;margin-bottom:20px}
.platcol__ic svg{width:24px;height:24px}
.platcol h3{font-weight:500;font-size:16px;letter-spacing:0;line-height:1.25;margin-bottom:11px}
.platcol p{font-size:14px;line-height:1.58;color:#6a6963;max-width:34ch}
/* --- Testimonial --- */
.tq{background:#f4f3f1}
.tq__grid{display:grid;grid-template-columns:minmax(280px,38%) 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.tq__photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/4.5;background:#e4e2dd}
.tq__photo img{width:100%;height:100%;object-fit:cover}
.tq blockquote{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(19px,2vw,29px);line-height:1.36;letter-spacing:-0.005em;color:#1a1916}
.tq__by{margin-top:26px}
.tq__by b{display:block;font-size:15.5px;font-weight:600}
.tq__by span{font-size:14px;color:#6c6b66}
.tq .tlink{margin-top:22px}
.tq__tabs{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tqtab{text-align:left;background:none;border:0;border-top:1px solid rgba(15,14,13,.16);padding:16px 18px 0 0;cursor:pointer;color:#6c6b66;transition:color .2s,border-color .2s}
.tqtab.is-on{border-top-color:#0f0e0d;color:#0f0e0d}
.tqtab b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.tqtab span{font-size:12.5px}
/* --- Surface sections --- */
.surf{background:#fafaf9;border-top:1px solid rgba(15,14,13,.06)}
.surf__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,76px);align-items:center}
.surf--flip .surf__media{order:2}
.surf__media{border-radius:18px;background:#eef1f3;border:1px solid rgba(15,14,13,.06);overflow:hidden;aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,44px)}
.surf__copy{max-width:520px}
.surf__eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.surf__eyebrow .brand{font-size:clamp(18px,1.5vw,22px);color:#0f0e0d}
.surf__eyebrow span{font-size:clamp(15px,1.2vw,18px);color:#8a8983}
.surf__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-0.02em;margin-bottom:18px}
.surf__p{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:#4a4944;margin-bottom:28px;max-width:42ch}
.surf__cta{display:flex;align-items:center;gap:18px}
/* demo cards sit as a clean product surface (neutral, not tinted) */
.surf__media .demo,.demo--ice,.demo--mint,.demo--peri{background:transparent}
.surf__media .demo{width:100%;max-width:400px;min-height:0;padding:0;box-shadow:none}
.surf__media .demo:hover{transform:none}
.surf__media .dcard{background:#fff;border:1px solid rgba(15,14,13,.07);box-shadow:0 18px 40px -30px rgba(15,30,45,.35)}
.frontier{display:flex;flex-direction:column;gap:16px;width:100%;max-width:400px}
.frloop{display:flex;align-items:center;gap:12px;color:#4e92ac;font-size:13px}
.frloop svg{width:52px;height:52px}
.frarc{animation:frspin 2.4s linear infinite;transform-origin:center}
@keyframes frspin{to{transform:rotate(360deg)}}
/* --- Stat band --- */
.statband2{background:#fff;border-top:1px solid rgba(15,14,13,.1);border-bottom:1px solid rgba(15,14,13,.1);padding-block:0}
.statband2__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.st2{padding:clamp(32px,3.6vw,52px) clamp(14px,1.8vw,30px);border-right:1px solid rgba(15,14,13,.1)}
.st2:last-child{border-right:none}
.st2__n{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-0.02em}
.st2__l{margin-top:12px;font-size:14px;line-height:1.5;color:#6a6963;max-width:24ch}
/* --- Blog: homepage preview (pill-filtered grid, reuses .blg-card / see .hblg-* at end of file) --- */
.blog{background:#fff}
.blog__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(21px,2.5vw,33px);line-height:1.16;letter-spacing:-0.015em;color:#0a0a0a;margin-bottom:clamp(36px,4.5vw,56px)}
.blog__h .brand{letter-spacing:-0.08em}
@media (max-width:980px){
.plat__grid{grid-template-columns:1fr 1fr;gap:32px}
.tq__grid{grid-template-columns:1fr}
.tq__photo{max-width:360px}
.surf__grid{grid-template-columns:1fr}
.surf--flip .surf__media{order:0}
.surf__media{aspect-ratio:16/11}
.statband2__grid{grid-template-columns:1fr 1fr}
.st2:nth-child(2){border-right:none}
.st2:nth-child(-n+2){border-bottom:1px solid rgba(15,14,13,.1)}
.cares__grid{grid-template-columns:1fr}
.carecard{min-height:0}
.tq__tabs{grid-template-columns:1fr 1fr;gap:0 20px}
}
/* ============================================================
Scroll choreography sections (navy load-up, specialties, mag blog)
============================================================ */
/* --- Navy load-up quote (pins; words brighten via GSAP) --- */
/* --- Our Mission (eyebrow left, paragraph loads up on scroll) --- */
.mission{position:relative;height:180vh;background:#fafaf9}
.mission__pin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding-block:clamp(60px,10vh,120px)}
.mission__grid{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(24px,4vw,72px)}
.mission__eyebrow{flex-shrink:0;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:18px;letter-spacing:-0.03em;color:#0a0a0a;padding-top:6px}
.mission__body{max-width:1000px;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(21px,2.3vw,35px);letter-spacing:-0.012em}
.mission__body p{line-height:1.1;margin-bottom:1.05em}
.mission__body p:last-child{margin-bottom:0}
.mission__body .lw{color:rgba(15,14,13,.20);transition:color .5s cubic-bezier(.22,.61,.36,1)}
.mission__body .lw.lit{color:#0f0e0d}
/* --- For everyone in the care system (Figma 1979) — gray cards, colored icon, hover fills blue --- */
.cares{background:#fff;padding-block:clamp(70px,9vw,120px)}
.cares__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(25px,2.8vw,34px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:clamp(40px,4.5vw,56px)}
.cares__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.carecard{position:relative;display:flex;flex-direction:column;min-height:545px;
background:#f2f2f2;border-radius:16px;padding:40px;overflow:hidden;isolation:isolate}
.carecard>*{position:relative;z-index:1}
.carecard__fill{position:absolute;inset:0;z-index:0;transform:scaleY(0);transform-origin:bottom;
transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.carecard:hover .carecard__fill{transform:scaleY(1)}
.carecard--profile .carecard__fill{background:#123f5c}
.carecard--clin .carecard__fill{background:#175f86}
.carecard--admin .carecard__fill{background:#2585b0}
/* white icon square, coloured glyph (three colours) */
.carecard__ic{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:auto}
.carecard__ic svg{width:30px;height:30px}
.carecard--profile .carecard__ic{color:#6a6a9e}
.carecard--clin .carecard__ic{color:#a8875e}
.carecard--admin .carecard__ic{color:#5b7c9a}
.carecard__eyebrow{display:flex;align-items:baseline;gap:9px;color:#0f0e0d;margin-top:34px;transition:color .45s}
.carecard__eyebrow .brand{font-size:20px;letter-spacing:-0.08em}
.carecard__eyebrow>span:last-child{font-size:16px;letter-spacing:0}
.carecard h3{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:23px;line-height:1.16;letter-spacing:-0.02em;color:#0f0e0d;margin-top:14px;transition:color .45s}
.carecard__foot{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.carecard__foot p{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:16px;line-height:1.5;letter-spacing:0;color:#0f0e0d;transition:color .45s}
.carecard__cta{display:flex;align-items:center;gap:15px}
.carecard .pill{height:38px}
.tlink2{font-size:16px;color:#0a0a0a;font-weight:400;letter-spacing:0;transition:color .45s}
/* hover: text turns white, primary pill inverts */
.carecard:hover .carecard__eyebrow,.carecard:hover .carecard__eyebrow .brand,
.carecard:hover h3,.carecard:hover .carecard__foot p,.carecard:hover .tlink2{color:#fff}
.carecard:hover .pill{background:#fff;color:#0f0e0d}
@media (max-width:860px){
.mission__grid{flex-direction:column;gap:16px}
.cares__grid{grid-template-columns:1fr}
.carecard{min-height:0}
}
/* --- Specialties: scrolls up over navy --- */
.spec{position:relative;background:#EAEAEA;border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;padding-block:clamp(72px,9vw,132px)}
.spec__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,88px);align-items:center}
.spec__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(30px,4vw,56px);letter-spacing:-0.025em;line-height:1.04;color:#12100e}
.spec__rot{position:relative;height:1.16em;margin-top:8px;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:500;font-size:clamp(30px,4vw,56px);letter-spacing:-0.025em;line-height:1.16}
.spec__rot span{position:absolute;left:0;top:0;white-space:nowrap;color:#111;opacity:0;transform:translateY(0.5em);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.spec__rot span.on{opacity:1;transform:none}
.spec__rot span.out{opacity:0;transform:translateY(-0.5em)}
.spec__sub{margin-top:30px;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:#54524d;max-width:38ch}
.spec__media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3.3;background:#dcdcda;box-shadow:0 30px 70px -50px rgba(0,0,0,.5)}
.spec__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.spec__media img.on{opacity:1;transform:scale(1)}
/* --- Platform: more room + eyebrow/lead --- */
.plat{padding-block:clamp(88px,12vw,176px)}
.plat__eyebrow{display:inline-block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:13px;letter-spacing:.05em;color:#4e92ac;margin-bottom:22px}
.plat__h{margin-bottom:20px !important}
.plat__lead{font-size:clamp(16px,1.4vw,21px);line-height:1.5;color:#5c5b57;max-width:50ch;margin-bottom:clamp(56px,7vw,96px)}
.plat__grid{gap:clamp(28px,3.4vw,56px)}
.platcol h3{font-size:18px}
.platcol p{font-size:14px}
/* --- Insights magazine (featured + list) --- */
.ins__mag{display:grid;grid-template-columns:1.25fr .92fr;gap:clamp(30px,4.4vw,60px)}
.ins__feat{display:flex;flex-direction:column}
.ins__featimg{aspect-ratio:16/10;border-radius:16px;background-size:cover;background-position:center;background-repeat:no-repeat;margin-bottom:24px;border:1px solid rgba(15,14,13,.06);transition:transform .5s var(--ease)}
.ins__feat:hover .ins__featimg{transform:scale(1.015)}
.ins__feat h3{font-weight:400;font-size:clamp(21px,2.1vw,30px);line-height:1.2;letter-spacing:-0.02em;color:#1a1916;margin-bottom:14px;max-width:20ch}
.ins__feat:hover h3{color:#111}
.ins__feat p{font-size:16px;line-height:1.56;color:#5c5b57;max-width:48ch;margin-bottom:20px}
.ins__read{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#0a0a0a}
.ins__read svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.ins__feat:hover .ins__read svg{transform:translateX(4px)}
.ins__list{display:flex;flex-direction:column}
.ins__row{display:grid;grid-template-columns:128px 1fr;gap:22px;align-items:center;padding:22px 0;border-top:1px solid rgba(15,14,13,.12)}
.ins__list .ins__row:last-child{border-bottom:1px solid rgba(15,14,13,.12)}
.ins__rowimg{width:128px;aspect-ratio:4/3;border-radius:11px;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .4s var(--ease)}
.ins__row:hover .ins__rowimg{transform:scale(1.03)}
.ins__row h4{font-weight:400;font-size:16px;line-height:1.3;letter-spacing:0;color:#1a1916;margin-top:8px}
.ins__row:hover h4{color:#111}
@media (max-width:900px){
.spec__grid{grid-template-columns:1fr;gap:40px}
.spec__media{aspect-ratio:16/10}
.ins__mag{grid-template-columns:1fr;gap:44px}
.loadq__text{font-size:clamp(24px,7vw,40px)}
}
/* class-based scroll reveals (safe: hidden only once JS adds .rv2) */
.rv2{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv2.in2{opacity:1;transform:none}
/* ============================================================
Evidence, cinematic room band, dark footer
============================================================ */
/* --- Evidence --- */
.evid{background:#fff}
.evid__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
.evid__eyebrow{display:block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:13px;letter-spacing:.05em;color:#4e92ac;margin-bottom:22px}
.evid__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(25px,2.7vw,37px);line-height:1.14;letter-spacing:-0.02em;margin-bottom:22px;max-width:15ch}
.evid__p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#5c5b57;margin-bottom:30px;max-width:46ch}
.evid__p .brand{letter-spacing:-0.08em;color:#0f0e0d}
.evid__proof{background:#f4f6f8;border:1px solid rgba(15,14,13,.08);border-radius:18px;padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:16px}
.evid__claim{background:#0a2233;color:#fff;border-radius:12px;padding:22px}
.evid__tag{display:block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:11px;letter-spacing:.04em;color:#85b5d4;margin-bottom:12px}
.evid__claim p{font-size:17px;line-height:1.42}
.evid__slabel{display:block;font-size:13px;color:#6a6963;margin:2px 2px 0}
.evid__src{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(15,14,13,.09);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.4;color:#33322f;text-decoration:none;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.evid__src:hover{border-color:#4e92ac;transform:translateY(-1px)}
.evid__src b{font-weight:500;color:#0f0e0d}
.evid__srcnum{flex:none;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;color:#4e92ac}
.evid__src svg{width:15px;height:15px;margin-left:auto;flex:none;color:#8a8983}
/* --- Cinematic medical-room band (section 09) --- */
.roomband{background:#fff;padding:clamp(28px,4vw,60px) 0}
.roomband__frame{position:relative;margin:0 clamp(20px,4vw,60px);border-radius:24px;overflow:hidden;height:clamp(360px,48vw,660px);background:#1a1a1e}
.roomband__frame img{width:100%;height:100%;object-fit:cover;display:block}
.roomband__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.82))}
.roomband__cta{position:absolute;left:clamp(28px,3.6vw,60px);right:clamp(28px,3.6vw,60px);bottom:clamp(30px,3.6vw,54px);z-index:2}
.roomband__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(26px,3.4vw,52px);line-height:1.04;letter-spacing:-0.02em;color:#fff;margin-bottom:16px}
.roomband__sub{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:rgba(255,255,255,.86);max-width:44ch;margin-bottom:26px}
.roomband__sub .brand{letter-spacing:-0.08em;color:#fff}
/* light button variant (for dark imagery) */
.hbtn--light{background:#fff;color:#0a0a0a}
.hbtn--light::before{display:none}
.hbtn--light .hbtn__ic{background:#0a0a0a}
.hbtn--light .hbtn__ic svg{stroke:#fff}
.hbtn--light:hover{transform:translateY(-2px)}
/* --- Dark footer --- */
.foot3{background:#0b0b0d;color:#cfcfd4;padding-top:clamp(56px,7vw,92px);padding-bottom:30px}
.foot3__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,3.5vw,56px)}
.foot3__desc{font-size:15px;line-height:1.55;color:#8f8f97;max-width:32ch}
.foot3__social{display:flex;gap:24px;margin-top:26px;font-size:14px}
.foot3__social a{color:#cfcfd4;transition:color .2s}
.foot3__social a:hover{color:#fff}
.foot3__col h4,.foot3__col .foot3__h{font-size:14px;font-weight:400;color:#8f8f97;margin-bottom:22px}
.foot3__col ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.foot3__col a{color:#e8e8ea;font-size:15px;transition:color .2s}
.foot3__col a:hover{color:#fff}
@keyframes wmShimmer{ 0%,28%{ background-position:110% 0; } 72%,100%{ background-position:-90% 0; } }
.foot3__wordmark{font-family:'Libre Baskerville',Georgia,serif;letter-spacing:-0.08em;line-height:.9;
background:linear-gradient(100deg,#fff 0%,#fff 42%,#b8e6d6 47%,#cfc4ea 52%,#fff 58%,#fff 100%);
background-size:280% 100%;background-position:110% 0;
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
animation:wmShimmer 6.5s ease-in-out infinite;
font-size:clamp(56px,15.6vw,216px);white-space:nowrap;margin:clamp(56px,8vw,100px) 0 clamp(34px,4vw,52px)}
.foot3__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding-top:24px;font-size:14px;color:#8f8f97}
.foot3__legal{display:flex;gap:26px}
.foot3__legal a{color:#8f8f97;transition:color .2s}
.foot3__legal a:hover{color:#fff}
.foot3__badges{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0;padding:0}
.foot3__badge{display:inline-flex}
.foot3__badgeimg{height:42px;width:auto;display:block;transition:opacity .2s}
.foot3__badge:hover .foot3__badgeimg{opacity:.82}
.foot3__badgeimg--tile{border-radius:7px}
@media (max-width:860px){
.evid__grid{grid-template-columns:1fr;gap:36px}
.foot3__top{grid-template-columns:1fr 1fr;gap:36px 28px}
.foot3__brandcol{grid-column:1/-1}
.foot3__wordmark{font-size:19vw}
}
/* inline Wellness A\ wordmark: sit level with surrounding sans, not larger */
/* Labels only. In a sentence the mark is the x-height of its words (the
.brand rule), so it takes no size of its own there. */
.carecard__eyebrow .brand,.surf__eyebrow .brand,.hero__eyebrow2 .brand{font-size:.9em}
/* --- Evidence-Grounded Outputs (Figma 1938-1351) --- */
.evid2{background:#fafaf9;padding-block:clamp(84px,14vw,200px)}
.evid2__grid{display:flex;justify-content:space-between;align-items:center;gap:clamp(48px,7vw,110px)}
.evid2__lead{flex:1;max-width:620px}
.evid2__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-0.01em;color:#0a0a0a;margin-bottom:30px}
.evid2__sub{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:18px;line-height:1.45;letter-spacing:-0.02em;color:#0a0a0a}
.evid2__list{flex:none;width:500px;display:flex;flex-direction:column;gap:25px}
.evid2__item{border-bottom:.5px solid #0a0a0a;padding-bottom:11px}
.evid2__item--last{border-bottom:none;padding-bottom:0}
.evid2__item h3{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:22px;line-height:1.18;letter-spacing:-0.02em;color:#0a0a0a;margin-bottom:3px}
.evid2__item p{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:17px;line-height:1.5;letter-spacing:-0.02em;color:#0a0a0a}
/* --- Stats (Figma 1938-1369) --- */
.stats2{background:#0f0e0d;color:#fafaf9;padding-block:clamp(72px,11vw,144px)}
.stats2 .container{max-width:1200px}
.stats2__title{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(20px,2vw,30px);line-height:1.2;letter-spacing:-0.02em;color:#fafaf9;text-align:right;margin-left:auto;margin-bottom:clamp(40px,5vw,72px)}
.statrow{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:24px;min-height:clamp(110px,11vw,158px);border-top:2px solid #33312c}
.statrow__l{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(16px,1.5vw,20px);line-height:1.3;letter-spacing:-0.02em;color:#fafaf9}
.statrow__l .brand{letter-spacing:-0.08em}
.statrow__n{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(46px,6vw,80px);line-height:1;letter-spacing:-0.03em;color:#fafaf9}
@media (max-width:760px){
.evid2__grid{flex-direction:column;align-items:flex-start;gap:40px}
.evid2__list{width:100%}
.statrow{grid-template-columns:1fr auto;gap:16px}
}
/* --- Testimonials (full viewport, one at a time) --- */
.tst{position:relative;min-height:100vh;background:#fff;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:clamp(90px,12vh,140px) 50px}
.tst__stage{position:relative;width:66%;max-width:920px;margin:0;min-height:clamp(200px,28vh,300px)}
.tst__item{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:clamp(24px,3vh,36px);
opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.tst__item.is-on{opacity:1;transform:none;pointer-events:auto}
.tst__item blockquote{margin:0;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(20px,2.2vw,32px);line-height:1.32;letter-spacing:-0.01em;color:#1a1916}
.tst__item figcaption b{display:block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.01em;color:#0f0e0d;margin-bottom:3px}
.tst__item figcaption span{font-size:14px;color:#6c6b66}
/* --- Final CTA --- */
.cta2{background:#e8e6e0}
.cta2__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.cta2__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-0.03em;color:#0a0a0a;margin-bottom:26px}
.cta2__sub{font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:#3a3934;max-width:42ch;margin-bottom:36px}
.cta2__sub .brand{letter-spacing:-0.08em;color:#0a0a0a}
.cta2__btn{--h:56px;padding:0 8px 0 26px;font-size:16px}
.cta2__art{display:flex;justify-content:center;align-items:center}
.cta2__art svg{width:min(100%,380px);height:auto}
@media (max-width:820px){
.tst__grid{grid-template-columns:1fr;gap:0}
.tst__item{min-height:0;padding-block:28px 0}
.cta2__grid{grid-template-columns:1fr}
.cta2__art{display:none}
}
/* ============================================================
Unified animated buttons + elevated hover motion
============================================================ */
.hero__side .hbtn{pointer-events:auto}
.hbtn:active{transform:translateY(0) scale(.985)}
/* outline variant (dark outline on light surfaces) */
.hbtn--line{background:transparent;border:1px solid #0a0a0a;color:#0a0a0a}
.hbtn--line .hbtn__ic{background:#0a0a0a}
.hbtn--line .hbtn__ic svg{stroke:#fff}
.hbtn--line::before{background:#0a0a0a}
.hbtn--line:hover{transform:translateY(-2px)}
.hbtn--line:hover::before{transform:translateX(0)}
.hbtn--line:hover .hbtn__label{color:#fff}
.hbtn--line:hover .hbtn__ic{background:#fff}
.hbtn--line:hover .hbtn__ic svg{stroke:#0a0a0a}
.hbtn--line .hbtn__label,.hbtn--line .hbtn__ic,.hbtn--line .hbtn__ic svg{transition:color .35s,background .35s,stroke .35s}
/* card buttons: sized down + invert cleanly when the card fills */
.carecard__cta .hbtn{--h:40px;font-size:14px;padding:0 6px 0 18px}
.carecard__cta .hbtn__ic{width:28px;height:28px}
.carecard .hbtn::before{display:none}
.carecard .hbtn--dark:hover .hbtn__label{color:#fafafa}
.carecard .hbtn--dark:hover .hbtn__ic{background:rgba(255,255,255,.14)}
.carecard .hbtn--dark:hover .hbtn__ic svg{stroke:#fafafa}
.carecard .hbtn--dark:hover{transform:none}
.carecard:hover .hbtn--dark:hover .hbtn__label{color:#0f0e0d}
.carecard:hover .hbtn--dark:hover .hbtn__ic{background:#0f0e0d}
.carecard:hover .hbtn--dark:hover .hbtn__ic svg{stroke:#fff}
.carecard:hover .hbtn--dark{background:#fff;color:#0f0e0d}
.carecard:hover .hbtn--dark .hbtn__ic{background:#0f0e0d}
.carecard:hover .hbtn--dark .hbtn__ic svg{stroke:#fff}
/* "See it work" text link: arrow slides on hover */
.tlink2{display:inline-flex;align-items:center;gap:7px}
.tlink2__ic{width:15px;height:15px;transition:transform .3s var(--ease)}
.tlink2:hover .tlink2__ic{transform:translateX(4px)}
/* nav CTA: subtle lift */
.nav__cta{transition:transform .3s var(--ease),background .3s}
.nav__cta:hover{transform:translateY(-1px)}
/* elevated card motion */
.carecard{transition:box-shadow .5s var(--ease)}
.carecard:hover{box-shadow:0 34px 70px -44px rgba(19,78,111,.45)}
.hbtn{white-space:nowrap}
.hbtn__label{white-space:nowrap}
/* staggered content reveal for card children */
.rv3{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv3.in3{opacity:1;transform:none}
/* ===== Closing CTA: white/black swipe (same as hero) ===== */
.hbtn.hbtn--light::before{display:block;background:#0a0a0a;transform:translateX(-101%)}
.hbtn.hbtn--light:hover::before{transform:translateX(0)}
.hbtn--light:hover{transform:translateY(-2px)}
.hbtn--light:hover .hbtn__label{color:#fff}
.hbtn--light:hover .hbtn__ic{background:#fff}
.hbtn--light:hover .hbtn__ic svg{stroke:#0a0a0a}
.hbtn--light .hbtn__label,.hbtn--light .hbtn__ic,.hbtn--light .hbtn__ic svg{transition:color .35s,background .35s,stroke .35s}
/* ============================================================
Nav mega-menu — full width, one panel per item, wide image
============================================================ */
.megamenu{
position:absolute; top:100%; left:0; right:0; width:100%;
background:#fff; box-shadow:0 40px 80px -50px rgba(15,14,13,.24);
visibility:hidden; clip-path:inset(0 0 100% 0);
transition:clip-path .5s cubic-bezier(.65,0,.35,1), visibility .5s;
z-index:49; pointer-events:none;
}
.megamenu.is-open{ visibility:visible; clip-path:inset(0 0 -80px 0); pointer-events:auto; }
.megamenu__inner{ opacity:0; transform:translateY(-12px);
transition:opacity .38s ease .1s, transform .42s cubic-bezier(.22,.61,.36,1) .1s; }
.megamenu.is-open .megamenu__inner{ opacity:1; transform:none; }
@keyframes megaSwap{ from{ opacity:.35; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.megamenu__inner.swap{ animation:megaSwap .32s ease; }
.megamenu__inner{ max-width:1560px; margin:0 auto; padding:44px var(--pad) 50px; }
.mega__panel{ display:none; }
.mega__panel.is-active{
display:grid; grid-template-columns:1fr 1fr 1fr 2.9fr; gap:clamp(28px,3.5vw,56px); align-items:stretch;
}
.mega__group{ display:flex; flex-direction:column; }
.mega__label{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; letter-spacing:0; color:#9b988f; margin-bottom:20px; }
.mega__link{ font-size:18px; letter-spacing:-0.01em; color:#0f0e0d; padding:7px 0; transition:color .25s ease; }
.nav--dark .megamenu{ background:#0c0c0e; box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.nav--dark .mega__link{ color:#fafaf9; }
.nav--dark .mega__link:hover{ color:#8f88c2; }
.nav--dark .mega__label{ color:#77746e; }
.mega__link:hover{ color:#8f88c2; }
.mega__media{ border-radius:16px; overflow:hidden; min-height:360px; background:#0c0c0e center/cover no-repeat; display:block; transition:transform .5s var(--ease); }
.mega__media:hover{ transform:scale(1.008); }
.mega__media.mega__media--shot{ grid-column:3/-1; align-self:start; min-height:0; aspect-ratio:2/1; border-radius:2px; border:1px solid #EAE8E4; background:#fff center/contain no-repeat; }
.mega__media--shot:hover{ transform:none; }
@media (max-width:1000px){ .mega__media.mega__media--shot{ grid-column:1/-1; } }
@media (max-width:1000px){ .mega__panel.is-active{ grid-template-columns:1fr 1fr; } .mega__media{ grid-column:1/-1; min-height:220px; } }
@media (max-width:900px){ .nav__links{ display:none; } }
/* ===== card + hero-split buttons: fully static, only the arrow moves ===== */
.carecard .hbtn::before,.hero__side .hbtn::before{ display:none; }
.carecard .hbtn--dark,.carecard .hbtn--dark:hover,
.carecard:hover .hbtn--dark,.carecard:hover .hbtn--dark:hover{ background:#0a0a0a; color:#fafafa; transform:none; }
.carecard .hbtn--dark .hbtn__label,.carecard .hbtn--dark:hover .hbtn__label,
.carecard:hover .hbtn--dark .hbtn__label,.carecard:hover .hbtn--dark:hover .hbtn__label{ color:#fafafa; }
.carecard .hbtn--dark .hbtn__ic,.carecard .hbtn--dark:hover .hbtn__ic,
.carecard:hover .hbtn--dark .hbtn__ic,.carecard:hover .hbtn--dark:hover .hbtn__ic{ background:rgba(255,255,255,.14); }
.carecard .hbtn--dark .hbtn__ic svg,.carecard:hover .hbtn--dark .hbtn__ic svg{ stroke:#fafafa; }
/* hero split-stage buttons on white: no swipe, no colour flip */
.hero__side .hbtn--dark:hover .hbtn__label{ color:#fafafa; }
.hero__side .hbtn--dark:hover .hbtn__ic{ background:rgba(255,255,255,.14); }
.hero__side .hbtn--dark:hover .hbtn__ic svg{ stroke:#fafafa; }
.hero__side .hbtn--line:hover .hbtn__label{ color:#0a0a0a; }
.hero__side .hbtn--line:hover .hbtn__ic{ background:#0a0a0a; }
.hero__side .hbtn--line:hover .hbtn__ic svg{ stroke:#fff; }
/* "See it work": smaller, no arrow */
.tlink2{ font-size:13px; }
.tlink2__ic{ display:none; }
/* blog posts: soft fade-up on scroll */
.bcard.rv2{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.bcard.rv2.in2{opacity:1;transform:none}
.bcard{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1)}
/* three pillars: button changes to grey on hover (still readable) */
.carecard .hbtn--dark{transition:transform .35s cubic-bezier(.22,.61,.36,1),background .28s cubic-bezier(.22,.61,.36,1)}
.carecard .hbtn--dark:hover{background:#4a4a4a}
.carecard:hover .hbtn--dark:hover{background:#4a4a4a}
/* ============================================================
Green block (Figma 2009) — rises in, text loads, video slides up
============================================================ */
.greenblock{position:relative;height:200vh;background:#000;z-index:1}
.gb__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.gb__inner{position:absolute;inset:0;display:flex;align-items:center;padding:0 24px}
.gb__row{display:flex;gap:8px;width:100%;max-width:1412px;margin:0 auto;align-items:stretch;will-change:transform}
.gb__videowrap{flex:0 0 clamp(220px,25vw,362px);position:relative}
.gb__video{position:absolute;top:0;left:0;width:100%;height:350px;border-radius:24px;overflow:hidden;background:#000;will-change:transform;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.gb__video video{width:100%;height:100%;object-fit:cover;display:block}
.gb__green{flex:1;min-width:0;background:#111;border-radius:16px;padding:clamp(34px,3.4vw,48px) clamp(30px,3.9vw,56px);min-height:583px;display:flex;align-items:flex-start}
.gb__text{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(26px,3.9vw,58px);line-height:1.14;letter-spacing:-0.012em;max-width:17ch}
.gb__text p{line-height:1.1;margin-bottom:1em}
.gb__text p:last-child{margin-bottom:0}
.gb__text .lw{color:rgba(244,241,234,.16);transition:color .5s cubic-bezier(.22,.61,.36,1)}
.gb__text .lw.lit{color:#f4f1ea}
.gb__text .brand{letter-spacing:-0.08em}
@media (max-width:820px){
.gb__row{flex-direction:column;gap:12px}
.gb__videowrap{flex:none;width:100%;height:220px}
.gb__video{position:relative;height:220px}
.gb__green{min-height:0}
}
/* ============================================================
Green-block peek band + pillars (Plus Jakarta Sans, square CTAs)
============================================================ */
/* --- pillars --- */
.cares{position:relative;height:260vh;margin-top:-100vh;background:transparent;z-index:3}
.cares__pin{position:sticky;top:0;height:100vh;overflow:hidden;pointer-events:none}
.cares__panel{position:absolute;left:24px;right:24px;bottom:0;height:100vh;
background:#fafaf9;border-radius:16px 16px 0 0;transform:translateY(103%);
will-change:transform;overflow:hidden;pointer-events:auto;
display:flex;align-items:center}
.cares__panel .container{width:100%}
.cares .container{max-width:1340px}
.cares__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(28px,2.9vw,42px);letter-spacing:-0.02em;line-height:1.15;margin-bottom:34px;color:#0f0e0d}
.cares__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.carecard{position:relative;display:flex;flex-direction:column;min-height:480px;
background:#f2f2f2;border-radius:12px;padding:28px 26px;overflow:hidden;isolation:isolate}
.carecard>*{position:relative;z-index:1}
.carecard__fill{position:absolute;inset:0;z-index:0;transform:scaleY(0);transform-origin:bottom;
transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.carecard:hover .carecard__fill{transform:scaleY(1)}
.carecard--profile .carecard__fill{background:#79648c}
.carecard--clin .carecard__fill{background:#a8927c}
.carecard--admin .carecard__fill{background:#7c95b0}
.carecard__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.06);color:#0f0e0d;margin-bottom:40px;transition:none}
.carecard__ic svg{width:20px;height:20px}
.carecard h3{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(17px,1.45vw,21px);
line-height:1.3;letter-spacing:-0.015em;color:#0f0e0d;margin:0 0 auto;max-width:15ch;transition:color .4s}
.carecard__foot{margin-top:34px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.carecard__foot p{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:13px;line-height:1.6;
letter-spacing:0.01em;color:#3f3e3b;max-width:34ch;transition:color .4s}
.sqbtn{display:inline-flex;align-items:center;justify-content:center;height:37px;padding:0 16px;
border-radius:4px;background:#eaeaea;color:#0f0e0d;text-decoration:none;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:14px;letter-spacing:0.01em;text-transform:none;
transition:background .35s,color .35s}
.carecard:hover h3,.carecard:hover .carecard__foot p{color:#fff}
.carecard:hover .sqbtn{background:#0f0e0d;color:#fff}
.carecard .sqbtn.hvr::before{background:rgba(15,14,13,.12)}
.carecard:hover .sqbtn.hvr::before{background:rgba(255,255,255,.30)}
.nav--dark .nav__login.hvr::before{background:rgba(255,255,255,.16)}
.carecard:hover{box-shadow:none;transform:none}
@media (max-width:860px){.cares__grid{grid-template-columns:1fr}.carecard{min-height:0}}
/* ============================================================
Orbit section + green testimonial carousel
============================================================ */
/* --- orbit: grey panel rises with content, expands to full screen --- */
.orbit{position:relative;height:300vh;margin-top:-100vh;background:transparent;z-index:2}
.orbit__pin{position:sticky;top:0;height:100vh;overflow:hidden;pointer-events:none}
.orbit__panel{position:absolute;left:24px;right:24px;bottom:0;height:100vh;
background:#eaeaea;border-radius:16px 16px 0 0;transform:translateY(103%);
will-change:transform;overflow:hidden;pointer-events:auto}
.orbit__stage{position:absolute;inset:0}
.orbit__item{position:absolute;top:0;left:0;width:150px;height:150px;border-radius:11px;cursor:pointer;background-size:cover;background-position:center;background-repeat:no-repeat;
will-change:transform;transform-origin:center}
.orbit__center{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:32px;text-align:center;pointer-events:none}
.orbit__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(34px,4.4vw,64px);line-height:1.08;letter-spacing:-0.007em;color:#000}
.orbit__wordmask{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.08;
padding-bottom:.13em;margin-bottom:-.13em}
.orbit__word{display:inline-block;transition:transform .55s cubic-bezier(.83,0,.17,1),opacity .55s ease,color .3s ease}
.orbit__word.leave{transform:translateY(-108%);opacity:0}
.orbit__word.enter{transform:translateY(108%);opacity:0;transition:none}
.orbit__center .sqbtn{pointer-events:auto}
.sqbtn--white{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* --- testimonial carousel --- */
.tsg{background:#fff;padding-block:80px;overflow:hidden}
.tsg__panel{position:relative;background:#111;border-radius:16px;
margin:0 110px;min-height:545px;padding:80px clamp(40px,6vw,96px);
display:flex;flex-direction:column;justify-content:flex-end;will-change:margin}
.tsg__body{position:relative;margin-left:auto;width:min(821px,72%);display:flex;flex-direction:column}
.tsg__quotewrap{position:relative;overflow:hidden;min-height:295px}
.tsg__quote{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;
font-size:clamp(26px,3.1vw,45px);line-height:1.07;letter-spacing:-0.01em;color:#fff;
will-change:transform}
.tsg__quote .brand{letter-spacing:-0.08em}
.tsg__quote--in{position:absolute;inset:0}
.tsg__peel{transition:transform .85s cubic-bezier(.83,0,.17,1),opacity .85s ease}
.tsg__attr{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-top:26px;
transition:opacity .35s ease}
.tsg__attr.leave{opacity:0}
.tsg__name{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:500;font-size:18px;
letter-spacing:-0.03em;color:#fff}
.tsg__role{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:10px;letter-spacing:.01em;
text-transform:capitalize;color:#111;background:#fff;border-radius:4px;padding:4px 8px}
.tsg__arrows{position:absolute;left:clamp(40px,6vw,96px);bottom:80px;display:flex;gap:8px}
.tsg__btn{display:grid;place-items:center;width:51px;height:51px;border-radius:6px;
background:transparent;border:1px solid #fff;color:#fff;cursor:pointer;
transition:background .25s,color .25s}
.tsg__btn svg{width:14px;height:14px}
.tsg__btn:hover{background:#fff;color:#111}
@media (max-width:900px){
.tsg__panel{margin:0 24px;padding:48px 28px;min-height:0}
.tsg__body{width:100%}
.tsg__quotewrap{min-height:0}
.tsg__arrows{position:static;margin-top:34px}
.orbit__item{display:none}
.orbit{min-height:70vh}
}
/* ============================================================
Final CTA riser — image panel rises with copy, expands full screen
============================================================ */
.ctar{position:relative;height:260vh;margin-top:-100vh;background:transparent;z-index:5}
.ctar__pin{position:sticky;top:0;height:100vh;overflow:hidden;pointer-events:none}
.ctar__panel{position:absolute;left:24px;right:24px;bottom:0;height:100vh;
background:#1a1a1e;border-radius:32px 32px 0 0;transform:translateY(104%);
will-change:transform;overflow:hidden;pointer-events:auto;display:flex;align-items:flex-end}
.ctar__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctar__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.82))}
.ctar__copy{position:relative;z-index:2;padding:0 0 12vh clamp(40px,9vw,142px);max-width:600px}
.ctar__copy .rvc{opacity:0;transform:translateY(26px);
transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.ctar__panel.show .rvc{opacity:1;transform:none}
.ctar__copy .rvc:nth-child(2){transition-delay:.08s}
.ctar__copy .rvc:nth-child(3){transition-delay:.16s}
.ctar__h{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:clamp(30px,2.8vw,40px);
line-height:1.25;letter-spacing:-0.005em;color:#fff;margin-bottom:16px}
.ctar__p{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.5;
letter-spacing:-0.03em;color:rgba(255,255,255,.92);max-width:400px;margin-bottom:32px}
.ctar__p .brand{letter-spacing:-0.08em;color:#fff}
.ctar__btn{display:inline-flex;align-items:center;gap:16px;height:40px;padding:4px 4px 4px 16px;
background:#0a0a0a;color:#fff;border-radius:8px;text-decoration:none;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:500;font-size:14px;text-transform:none}
.ctar__btnic{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#fff;color:#0a0a0a}
.ctar__btnic svg{width:16px;height:16px}
.ctar__btn:hover .ctar__btnic svg{animation:arrowLoop .5s cubic-bezier(.22,.61,.36,1)}
/* peek bands: next section visible during holds */
.gb__next{position:absolute;left:24px;right:24px;bottom:0;height:150px;z-index:3;
background:#eaeaea;border-radius:16px 16px 0 0;transform:translateY(102%);will-change:transform;
box-shadow:0 -18px 50px -30px rgba(0,0,0,.45)}
.orbit__nextband{position:absolute;left:24px;right:24px;bottom:0;height:150px;z-index:30;
background:#fafaf9;border-radius:16px 16px 0 0;transform:translateY(102%);will-change:transform;
box-shadow:0 -18px 50px -30px rgba(0,0,0,.18)}
/* ============================================================
Subpages (clinicians / admin / profiles / frontier)
============================================================ */
.sp-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
padding:19px var(--pad);background:#fff;color:#0f0e0d;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.sp-nav.nav--hidden{transform:translateY(-102%)}
.sp-nav a{color:inherit;text-decoration:none}
.sp-nav__left{display:flex;align-items:center;gap:38px}
.sp-nav__brand{font-size:16px;font-family:'Libre Baskerville',serif;letter-spacing:-0.08em;color:#0a0a0a}
.sp-nav__links{display:flex;align-items:center;gap:28px;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:14px}
.sp-nav__links a{color:#000;letter-spacing:-0.011em;transition:color .25s ease}
.sp-nav__links:hover a{color:#a2a2a2}
.sp-nav__links:hover a:hover{color:#8f88c2}
.sp-nav__right{display:flex;align-items:center;gap:12px;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif}
.sp-nav__login{display:inline-flex;align-items:center;height:40px;padding:0 16px;font-size:14px;color:#929292;border:1px solid #c7c7c7;border-radius:8px;transition:border-color .2s,color .2s}
.sp-nav__login:hover{border-color:#0a0a0a;color:#0a0a0a}
.sp-nav__cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:14px;font-weight:500;background:#000;color:#fff;border-radius:8px;transition:opacity .2s}
.sp-nav__cta:hover{opacity:.85}
.sp{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;color:#0f0e0d}
.sp-wrap{max-width:1340px;margin:0 auto;padding:0 var(--pad)}
/* Full-bleed variant: same side gutter as .sp-wrap, no 1340px cap -- used by
the /insights bento section and article list so both stretch to the
viewport instead of sitting inside the page's usual reading column. */
.sp-wrap--full{max-width:none}
/* A touch narrower than full-bleed, for the article list specifically. */
.sp-wrap--wide{max-width:1800px}
.sp-hero{padding:150px 0 56px}
.sp-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;text-transform:capitalize;color:#929292;margin-bottom:22px}
.sp-hero__h{font-weight:400;font-size:clamp(34px,4.4vw,62px);line-height:1.06;letter-spacing:-0.015em;max-width:17ch}
.sp-hero__p{font-size:clamp(16px,1.35vw,19px);line-height:1.5;letter-spacing:-0.02em;color:#4a4a46;max-width:52ch;margin:22px 0 30px}
.sp-hero__cta{display:flex;gap:12px;align-items:center}
.sp-gbtn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 4px 0 16px;background:#111;color:#fff;border-radius:6px;font-weight:500;font-size:14px;text-decoration:none}
.sp-gbtn__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:6px}
.sp-gbtn__ic svg{width:16px;height:16px}
.sp-gbtn:hover .sp-gbtn__ic svg{animation:spArrow .5s cubic-bezier(.22,.61,.36,1)}
@keyframes spArrow{0%{transform:translateX(0)}45%{transform:translateX(140%)}55%{transform:translateX(-140%)}100%{transform:translateX(0)}}
.sp-hero__media{margin-top:44px;height:clamp(320px,52vw,620px);border-radius:20px}
.sp-ph{background:var(--ph,#d8d3c9);border-radius:20px}
.sp-cards{padding:64px 0}
.sp-cards__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sp-card{background:#f2f2f2;border-radius:12px;padding:26px 24px;min-height:225px;display:flex;flex-direction:column}
.sp-card__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:#fff;color:#0f0e0d;box-shadow:0 1px 2px rgba(0,0,0,.06);margin-bottom:auto}
.sp-card__ic svg{width:18px;height:18px}
.sp-card h3{font-weight:500;font-size:16px;letter-spacing:0;margin:22px 0 8px}
.sp-card p{font-size:13px;line-height:1.55;letter-spacing:0.01em;color:#4a4a46}
.sp-row{padding:72px 0}
.sp-row__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.sp-row--flip .sp-row__media{order:2}
.sp-row__media{height:clamp(280px,34vw,460px);border-radius:16px}
.sp-row__eyebrow{display:block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;color:#929292;margin-bottom:18px;text-transform:capitalize}
.sp-row__h{font-weight:400;font-size:clamp(25px,2.6vw,36px);line-height:1.16;letter-spacing:-0.015em;margin-bottom:16px;max-width:16ch}
.sp-row__p{font-size:15px;line-height:1.6;letter-spacing:0;color:#4a4a46;max-width:44ch}
.sp-row__list{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.sp-row__list li{list-style:none;display:flex;gap:10px;font-size:14px;color:#33322f;line-height:1.5}
.sp-row__list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#111;margin-top:8px}
.sp-quote{padding:72px 0}
.sp-quote__panel{background:#111;border-radius:16px;padding:clamp(48px,6vw,88px) clamp(30px,6vw,96px)}
.sp-quote__q{font-weight:400;font-size:clamp(24px,2.8vw,40px);line-height:1.12;letter-spacing:-0.01em;color:#fff;max-width:26ch}
.sp-quote__q .brand{letter-spacing:-0.08em}
.sp-quote__by{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-top:34px}
.sp-quote__name{font-weight:500;font-size:17px;letter-spacing:-0.03em;color:#fff}
.sp-quote__role{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:10px;color:#111;background:#fff;border-radius:4px;padding:4px 8px;text-transform:capitalize}
.sp-grid6{padding:72px 0 88px}
.sp-grid6 h2{font-weight:400;font-size:clamp(22px,2.2vw,30px);letter-spacing:-0.015em;margin-bottom:34px}
.sp-grid6__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sp-mini{border-top:1px solid rgba(15,14,13,.14);padding:20px 20px 26px 0}
.sp-mini h3{font-weight:500;font-size:15px;letter-spacing:0;margin-bottom:8px}
.sp-mini p{font-size:13px;line-height:1.55;color:#4a4a46}
.sp-cta{padding:20px 0 0}
.sp-cta__panel{position:relative;border-radius:24px 24px 0 0;overflow:hidden;height:clamp(420px,58vh,560px);
margin:0 24px;display:flex;align-items:flex-end;background:var(--ph,#22333f)}
.sp-cta__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72))}
.sp-cta__copy{position:relative;z-index:2;padding:0 0 8vh clamp(36px,7vw,110px);max-width:600px}
.sp-cta__h{font-weight:400;font-size:clamp(28px,2.7vw,38px);line-height:1.22;color:#fff;margin-bottom:14px}
.sp-cta__p{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:rgba(255,255,255,.92);max-width:40ch;margin-bottom:28px}
.sp-cta__p .brand{letter-spacing:-0.08em;color:#fff}
.sp-cta__btn{display:inline-flex;align-items:center;gap:16px;height:40px;padding:4px 4px 4px 16px;background:#0a0a0a;color:#fff;border-radius:8px;text-decoration:none;font-weight:500;font-size:14px;text-transform:none}
.sp-cta__btnic{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#fff;color:#0a0a0a}
.sp-cta__btnic svg{width:16px;height:16px}
.sp-cta__btn:hover .sp-cta__btnic svg{animation:spArrow .5s cubic-bezier(.22,.61,.36,1)}
.sp-tags{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 72px}
.sp-tag{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:13px;color:#33322f;background:#f2f2f2;border-radius:100px;padding:9px 18px}
/* arrival reveals */
.sp-rv{opacity:0;transform:translateY(36px);transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1)}
.sp-rv.sp-in{opacity:1;transform:none}
@keyframes spIri{0%{color:#5f9a83}55%{color:#8f88c2}100%{color:#0f0e0d}}
.sp-hero__h.sp-in{animation:spIri 1.3s ease both}
@media (max-width:900px){
.sp-cards__grid{grid-template-columns:1fr 1fr}
.sp-row__grid{grid-template-columns:1fr}
.sp-row--flip .sp-row__media{order:0}
.sp-grid6__grid{grid-template-columns:1fr}
}
/* ===== shared nav (subpages) ===== */
/* ---------- Nav ---------- */
.nav{
position:fixed; top:0; left:0; right:0; z-index:50;
display:flex; align-items:center; justify-content:space-between;
padding:13px clamp(24px,2.6vw,40px);
background:#fff; color:#0f0e0d;
transition:transform .5s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.nav--hidden{ transform:translateY(-102%); }
.nav--dark{ background:transparent; color:#fff; }
.nav--dark .nav__brand{ color:#fff; }
.nav--dark .nav__link{ color:#fff; }
.nav--dark .nav__login{ color:#fff; border-color:rgba(255,255,255,.45); }
.nav--dark .nav__cta{ background:#fff !important; color:#0a0a0a !important; }
.nav a{ color:inherit; text-decoration:none; }
.nav__left{ display:flex; align-items:stretch; gap:38px; }
.nav__brand{ display:inline-flex; align-items:center; line-height:1; font-size:16px; font-family:'Libre Baskerville',serif; letter-spacing:-0.08em; color:#0a0a0a; }
.nav__links{ display:flex; align-items:stretch; gap:28px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; }
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__link{ display:inline-flex; align-items:center; gap:5px; padding:13px 0; color:#000; letter-spacing:-0.011em; transition:color .25s ease; }
.nav__links:hover .nav__link{ color:#a2a2a2; }
.nav__links:hover .nav__link:hover{ color:#8f88c2; }
.nav__right{ display:flex; align-items:center; gap:12px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.nav__login{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 16px; font-size:14px; letter-spacing:0.01em; color:#929292; border:1px solid #c7c7c7; border-radius:8px; transition:border-color .2s,color .2s; }
.nav__login:hover{ border-color:#0a0a0a; color:#0a0a0a; }
.nav .nav__cta{
display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px;
font-size:14px; font-weight:500; letter-spacing:0.01em; background:#000; color:#fff; border-radius:8px;
transition:opacity .2s;
}
.nav .nav__cta:hover{ opacity:.85; }
/* Phones: "Log in" and "Request a demo" each stay on one line down to a
360px screen. The side padding, the gaps and the button padding give up
the room; the type does not shrink. */
@media (max-width:400px){
.nav{ padding-left:16px; padding-right:16px; }
.nav__right{ gap:8px; }
.nav__login{ padding:0 12px; white-space:nowrap; }
.nav .nav__cta{ padding:0 14px; white-space:nowrap; }
}
/* subpage v2 additions */
.sp-cta{padding:96px 0 0}
.sp-cta__panel{position:relative;border-radius:24px 24px 0 0;overflow:hidden;min-height:clamp(440px,60vh,620px);height:auto;
margin:0 24px;display:flex;align-items:flex-end;background:var(--ph,#22333f);opacity:1 !important;transform:none !important}
.sp-cta__copy{position:relative;z-index:2;padding:110px 0 9vh clamp(36px,7vw,110px);max-width:640px}
.sp-trust{border-top:1px solid rgba(15,14,13,.09);border-bottom:1px solid rgba(15,14,13,.09);padding:18px 0;margin-top:64px}
.sp-trust__row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;letter-spacing:.04em;color:#8a8983}
.sp-stats{padding:16px 0 72px}
.sp-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(15,14,13,.14)}
.sp-stat{padding:26px 22px 6px 0;border-right:1px solid rgba(15,14,13,.10)}
.sp-stat:last-child{border-right:none}
.sp-stat__n{font-weight:400;font-size:clamp(28px,2.8vw,44px);letter-spacing:-0.02em;line-height:1}
.sp-stat__l{margin-top:10px;font-size:13px;line-height:1.5;color:#6a6963;max-width:22ch}
.sp-secthead{font-weight:400;font-size:clamp(22px,2.2vw,30px);letter-spacing:-0.015em;margin-bottom:34px;max-width:24ch}
.sp-res{padding:0 0 96px}
.sp-res__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-res__card{border-radius:14px;background:#f2f2f2;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.sp-res__media{height:210px}
.sp-res__body{padding:20px 22px 24px}
.sp-res__tag{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;color:#8a8983}
.sp-res__body h3{font-weight:500;font-size:16px;letter-spacing:0;margin-top:8px}
@media (max-width:900px){.sp-stats__grid{grid-template-columns:1fr 1fr}.sp-res__grid{grid-template-columns:1fr}}
/* ================= SUBPAGE v3 — Scale-exact image hero + full-bleed CTA ================= */
.sp2-hero{ padding:88px 14px 0; background:#fff; }
.sp2-hero__card{
position:relative; height:calc(100vh - 102px); min-height:600px;
border-radius:20px; overflow:hidden; background:var(--ph,#101820);
}
.sp2-hero__img{
position:absolute; inset:0;
background:
radial-gradient(120% 95% at 76% 12%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
radial-gradient(90% 70% at 12% 90%, rgba(255,255,255,.05), rgba(255,255,255,0) 50%),
var(--ph,#101820);
}
.sp2-hero__tint{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 42%, rgba(0,0,0,.42) 100%); }
.sp2-hero__copy{
position:absolute; left:clamp(28px,4.5vw,76px); bottom:clamp(36px,6.5vh,72px); z-index:4;
max-width:860px; color:#fff;
}
.sp2-hero__h{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500;
font-size:clamp(42px,4.9vw,74px); line-height:1.03; letter-spacing:-0.025em;
}
.sp2-hero__p{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:clamp(16px,1.45vw,21px); line-height:1.5;
color:rgba(255,255,255,.92); max-width:640px; margin:18px 0 30px;
}
.sp2-btn{
display:inline-flex; align-items:center; gap:18px;
background:#fff; color:#0a0a0a; border-radius:8px; padding:6px 6px 6px 20px;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:15px; font-weight:500; letter-spacing:0;
text-decoration:none; transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.sp2-btn__ic{ display:grid; place-items:center; width:38px; height:38px; border:1px solid #0a0a0a; border-radius:6px; }
.sp2-btn__ic svg{ width:15px; height:15px; transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.sp2-btn:hover .sp2-btn__ic svg{ transform:translateX(3px); }
/* floating live product demo, right side of the hero */
.sp2-hero__demo{
position:absolute; right:clamp(28px,5.5vw,96px); top:50%; z-index:3;
width:min(400px,29vw); animation:sp2Float 7s ease-in-out infinite alternate;
filter:drop-shadow(0 40px 60px rgba(0,0,0,.35));
}
@keyframes sp2Float{ from{ transform:translateY(calc(-50% - 9px)); } to{ transform:translateY(calc(-50% + 9px)); } }
.sp2-hero__demo .demo{ min-height:0; padding:0; background:transparent; }
.sp2-hero__demo .demo:hover{ transform:none; }
@media(max-width:1120px){ .sp2-hero__demo{ display:none; } }
/* trust band under the hero */
.sp-trustband{ padding:38px 0 6px; background:#fff; }
/* demos inside feature rows */
.sp-row__media .demo{ width:100%; min-height:clamp(340px,27vw,430px); }
/* full-bleed final CTA — edge to edge, flows straight into the footer */
.sp2-cta{ position:relative; overflow:hidden; background:var(--ph,#101820); }
.sp2-cta__bg{
position:absolute; inset:0;
background:
radial-gradient(110% 85% at 72% 0%, rgba(255,255,255,.09), rgba(255,255,255,0) 58%),
var(--ph,#101820);
}
.sp2-cta__grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 100%); }
.sp2-cta__inner{
position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
min-height:62vh; padding:130px var(--pad) 90px; color:#fff;
}
.sp2-cta__h{
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500;
font-size:clamp(38px,4.5vw,66px); letter-spacing:-0.025em; line-height:1.04; max-width:840px;
}
.sp2-cta__p{ font-size:clamp(16px,1.35vw,19px); line-height:1.55; color:rgba(255,255,255,.9); max-width:580px; margin:18px 0 32px; }
/* ================= Scale-exact interactions (v5) ================= */
/* hover: grey overlay enters from bottom, exits through the top; label shrinks */
/* enter: overlay slides up from the bottom border; leave: fades out drifting toward the top.
Driven by wellness-hover.js (hv-in / hv-out) so the exit is deterministic in every browser. */
.hvr{ position:relative; overflow:hidden; }
.hvr::before{
content:''; position:absolute; inset:0; background:rgba(15,14,13,.10); border-radius:inherit;
opacity:0; transform:translateY(102%); pointer-events:none; will-change:transform,opacity;
}
.hvr.hv-in::before{ opacity:1; transform:translateY(0); transition:transform .36s cubic-bezier(.65,0,.35,1), opacity .05s linear; }
.hvr.hv-out::before{ opacity:0; transform:translateY(-45%); transition:opacity .32s ease, transform .32s ease; }
.hvr>span{ display:inline-block; position:relative; transition:transform .36s cubic-bezier(.65,0,.35,1); }
.hvr.hv-in>span{ transform:scale(.92); }
/* the Figma button: white pill, 32px dark arrow box, overlay + arrow swap */
.fbtn{
display:inline-flex; align-items:center; gap:16px; height:40px; padding:4px 4px 4px 16px;
background:#fff; border-radius:8px; position:relative; overflow:hidden;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:500; letter-spacing:0.01em;
color:#0a0a0a; text-decoration:none; text-transform:none;
}
.fbtn::before{
content:''; position:absolute; inset:0; background:rgba(0,0,0,.14); border-radius:inherit;
opacity:0; transform:translateY(102%); pointer-events:none; will-change:transform,opacity;
}
.fbtn.hv-in::before{ opacity:1; transform:translateY(0); transition:transform .36s cubic-bezier(.65,0,.35,1), opacity .05s linear; }
.fbtn.hv-out::before{ opacity:0; transform:translateY(-45%); transition:opacity .32s ease, transform .32s ease; }
.fbtn__label{ position:relative; z-index:1; transition:transform .36s cubic-bezier(.65,0,.35,1); }
.fbtn.hv-in .fbtn__label{ transform:scale(.94); }
.fbtn__ic{ position:relative; z-index:1; width:32px; height:32px; border-radius:6px; background:#0a0a0a; overflow:hidden; flex:none; }
.fbtn__strip{ position:absolute; top:0; left:-32px; display:flex; width:64px; height:32px; transition:transform .36s cubic-bezier(.65,0,.35,1); }
.fbtn.hv-in .fbtn__strip{ transform:translateX(32px); }
.fbtn__strip>span{ width:32px; height:32px; display:grid; place-items:center; flex:none; }
.fbtn__strip svg{ width:15px; height:15px; stroke:#fff; }
.fbtn--dark{ background:#0a0a0a; color:#fff; }
.fbtn--dark::before{ background:rgba(255,255,255,.28); }
.fbtn--dark .fbtn__ic{ background:#fff; }
.fbtn--dark .fbtn__strip svg{ stroke:#0a0a0a; }
/* footer socials in boxes, like the reference */
.foot3__social{ display:flex; gap:8px; }
.foot3__social a{
display:grid; place-items:center; width:48px; height:48px;
background:#212121; border-radius:6px; transition:background .25s ease;
}
.foot3__social a:hover{ background:#3a3a3a; }
.foot3__social svg{ width:16px; height:16px; fill:#fff; }
/* ================= SUBPAGE v4 — Figma hero (1998-3113), diagrams, sky testimonials, best-in-business ================= */
.sp3-hero{ padding:88px 16px 0; background:#fff; }
.sp3-hero__card{
position:relative; height:min(720px, calc(100vh - 104px)); min-height:540px;
border-radius:24px; overflow:hidden; background:var(--ph,#101820);
}
.sp3-hero__img{
position:absolute; inset:0;
background:
radial-gradient(120% 95% at 74% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
radial-gradient(80% 60% at 14% 55%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
var(--ph,#101820);
}
.sp3-hero__grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.88) 100%); }
.sp3-hero__copy{
position:absolute; left:clamp(28px,4.4vw,64px); right:clamp(28px,4.4vw,64px); bottom:clamp(32px,6vh,56px);
color:#fff; display:flex; flex-direction:column; gap:24px; align-items:flex-start;
}
.sp3-hero__h{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(40px,4.45vw,64px); line-height:1.05; letter-spacing:-0.007em; margin:0; }
.sp3-hero__p{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:clamp(16px,1.4vw,20px); line-height:1.5; letter-spacing:-0.032em; max-width:820px; margin:0; color:rgba(255,255,255,.96); }
/* tech diagram section */
.sp-diag{ padding:clamp(80px,9vw,130px) 0; background:#fafaf9; }
.sp-diag__grid{ display:grid; grid-template-columns:0.8fr 1.4fr; gap:clamp(32px,5vw,80px); align-items:center; }
.sp-diag__lead h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(28px,2.9vw,42px); letter-spacing:-0.02em; line-height:1.12; margin:0 0 16px; }
.sp-diag__lead p{ color:#575757; font-size:16px; line-height:1.6; max-width:420px; margin:0; }
.sp-diag__card{ background:#fff; border:1px solid rgba(15,14,13,.08); border-radius:16px; padding:clamp(22px,3vw,44px); }
.sp-diag__card svg{ width:100%; height:auto; display:block; }
.dgflow{ stroke-dasharray:5 6; animation:dgmove 1.4s linear infinite; }
@keyframes dgmove{ to{ stroke-dashoffset:-11; } }
.dgnode{ fill:#fff; stroke:#0f0e0d; stroke-width:1.1; }
.dgnode--soft{ fill:#fafaf9; stroke:rgba(15,14,13,.35); }
.dglabel{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; letter-spacing:.04em; fill:#0f0e0d; }
.dgfig{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:10px; letter-spacing:.08em; fill:#9b988f; }
.dgsub{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:10px; fill:#8a8a8a; }
.dgline{ stroke:#b9b9b4; stroke-width:1.1; fill:none; }
.dgaccent{ stroke:var(--acc,#4e92ac); }
.dgdot{ fill:var(--acc,#4e92ac); }
/* best-in-business grid (Scale reference) */
.bib{ padding:clamp(80px,9vw,130px) 0; background:#f4f4f2; }
.bib__grid{ display:grid; grid-template-columns:0.9fr 1.3fr; gap:clamp(36px,5vw,84px); align-items:start; }
.bib__lead h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(30px,3.2vw,46px); letter-spacing:-0.02em; line-height:1.1; margin:0 0 18px; }
.bib__lead p{ color:#575757; font-size:16px; line-height:1.65; max-width:420px; margin:0 0 40px; }
.bib__art svg{ width:min(380px,100%); height:auto; display:block; opacity:.9; }
.bib__cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bib__card{ position:relative; background:#fff; border-radius:12px; padding:26px 28px 24px; min-height:280px; display:flex; flex-direction:column; }
.bib__card h3,.bib__card h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(19px,1.6vw,24px); letter-spacing:-0.015em; line-height:1.25; margin:0; padding-right:34px; }
.bib__card p{ margin:auto 0 0; padding-top:56px; color:#575757; font-size:15px; line-height:1.6; }
.bib__card--wide{ grid-column:1 / -1; min-height:200px; }
.bib__card--wide p{ padding-top:32px; max-width:560px; }
a.bib__card:focus{ outline:none; }
a.bib__card:focus-visible{ outline:2px solid #0a3143; outline-offset:3px; }
.bib__tri{ position:absolute; top:26px; right:26px; width:13px; height:13px; clip-path:polygon(0 0,100% 0,100% 100%); background:var(--tri,#0a3143); }
a.bib__card{ text-decoration:none; color:inherit; transition:transform .45s cubic-bezier(.19,1,.22,1), box-shadow .45s cubic-bezier(.19,1,.22,1); }
a.bib__card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(10,49,67,.25); }
.bib__go{ margin-top:18px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:8px; color:#0f0e0d; }
.bib__go svg{ transition:transform .3s cubic-bezier(.22,.61,.36,1); }
a.bib__card:hover .bib__go svg{ transform:translateX(3px); }
.bib__go svg{ width:14px; height:14px; stroke:currentColor; }
/* sky testimonials (subpages) */
.tsg--sky .tsg__panel{ background:#0D0E10; }
.tsg--sky .tsg__quote{ color:#fff; }
.tsg--sky .tsg__name{ color:#fff; }
.tsg--sky .tsg__role{ color:#A3A19D; }
.tsg--sky .tsg__btn{ border-color:rgba(255,255,255,.4); color:#fff; }
.tsg--sky .tsg__btn:hover{ background:rgba(255,255,255,.1); }
/* subpage expanding-image final CTA (same grammar as the landing) */
.ctar--sp .ctar__imgfill{ position:absolute; inset:0; background:
radial-gradient(110% 85% at 72% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%), var(--ph,#101820); }
.ctar--sp{ margin-top:0; height:170vh; }
.ctar--sp .ctar__panel{ background:var(--ph,#101820); }
/* ================= Blog (insights) ================= */
.blg{ padding:150px 0 40px; }
.blg__eyebrow{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; letter-spacing:.06em; color:#8a8a8a; }
.blg h1{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(40px,4.4vw,64px); letter-spacing:-0.015em; margin:10px 0 8px; }
.blg__sub{ color:#575757; font-size:17px; }
.blg__search{ display:flex; align-items:center; gap:8px; border:1px solid rgba(15,14,13,.18); border-radius:999px; padding:8px 16px; background:#fff; color:#767370; margin-left:auto; cursor:pointer; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; transition:border-color .2s; }
.blg__search:hover{ border-color:#0f0e0d; }
.blg__search svg{ width:15px; height:15px; flex:none; }
.blg-feat{ padding:48px 0 8px; }
.blg-feat a{ display:grid; grid-template-columns:1.5fr 1fr; gap:0; text-decoration:none; color:inherit; border-radius:20px; overflow:hidden; background:#f4f4f2; }
.blg-feat__img{ min-height:380px; background-size:cover; background-position:center; }
.blg-feat__body{ padding:44px 44px 40px; display:flex; flex-direction:column; }
.blg-feat__tag{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.05em; color:#575757; }
.blg-feat__body h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(24px,2.2vw,32px); letter-spacing:-0.015em; line-height:1.2; margin:14px 0 14px; }
.blg-feat__body p{ color:#575757; font-size:16px; line-height:1.6; }
.blg-feat__date{ margin-top:auto; padding-top:28px; font-size:14px; color:#8a8a8a; }
.blg-grid{ padding:56px 0 110px; }
.blg-grid__g{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blg-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(15,14,13,.08); transition:transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s cubic-bezier(.19,1,.22,1); }
.blg-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(10,49,67,.28); }
.blg-card__img{ height:200px; background-size:cover; background-position:center; }
.blg-card__body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blg-card__tag{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.05em; color:#575757; }
.blg-card h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:19px; letter-spacing:-0.012em; line-height:1.3; margin:0; }
.blg-card__date{ margin-top:auto; font-size:13px; color:#8a8a8a; }
/* ================= Book demo ================= */
.bd{ padding:150px 24px 120px; background:#fff; }
.bd__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(56px,6vw,96px); max-width:1428px; margin:0 auto; align-items:start; }
.bd h1{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(32px,3vw,40px); letter-spacing:-0.001em; margin:0 0 16px; color:#212121; }
.bd__sub{ color:#575757; font-size:16px; margin:0 0 52px; max-width:480px; }
.bd__form{ display:flex; flex-direction:column; gap:30px; padding-right:16px; }
.bd__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bd input[type=text],.bd input[type=email],.bd select{ height:46px; border:1px solid #d1d5db; border-radius:8px; padding:0 16px; font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#171717; width:100%; background:#fff; -webkit-appearance:none; appearance:none; }
.bd select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23171717' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; color:#575757; }
.bd textarea{ min-height:152px; border:1px solid #d1d5db; border-radius:8px; padding:13px 16px; font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#171717; width:100%; resize:vertical; }
.bd ::placeholder{ color:#929292; }
.bd__label{ font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#373737; margin-bottom:2px; }
.bd__checks{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.bd__checks label{ display:flex; gap:8px; align-items:center; font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#373737; }
.bd__checks input{ width:16px; height:16px; accent-color:#171717; border-radius:4px; }
.bd__note{ font-size:14px; color:#575757; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.bd__note a{ color:#171717; font-weight:500; }
.bd__quote{ background:#839cb2; border-radius:16px; padding:40px; display:flex; flex-direction:column; gap:32px; position:sticky; top:110px; }
.bd__q{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(19px,1.7vw,24px); line-height:1.4; letter-spacing:-0.007em; color:#212121; margin:0; }
.bd__attr b{ display:block; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#212121; }
.bd__attr span{ font-size:14px; color:rgba(0,0,0,.5); }
.bd__hr{ height:1px; background:rgba(0,0,0,.15); }
.bd__trust{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.03em; color:rgba(0,0,0,.55); text-align:center; margin:0; }
.bd__logos{ display:flex; flex-wrap:wrap; gap:24px 36px; justify-content:center; align-items:center; }
.bd__logos span{ display:block; height:16px; width:88px; background:#212121; opacity:.85; border-radius:2px; }
@media(max-width:980px){ .bd__grid{ grid-template-columns:1fr; } .bd__quote{ position:static; } }
/* ================= Log in ================= */
/* ---------- Sign in (/login) ----------
The register every wai sign-in screen uses, so the one on the website is
the one a clinician already knows from the patient app and the clinician
app: a light page, the drawn mark alone at the top, a single centred
column under it, the label above its field rather than notched into the
border, near-square controls on a hairline, and the commit in ink across
the full width. It was a black page with a floating Material label and a
near-white pill, which belonged to no other screen we ship. */
.lg{ min-height:100vh; background:#fff; color:var(--ink);
display:flex; flex-direction:column; align-items:center;
padding:clamp(20px,5.5vh,44px) 24px 48px; }
.lg__box{ width:380px; max-width:100%; margin-block:auto;
display:flex; flex-direction:column; align-items:stretch; text-align:center; }
/* The mark stands alone in the top row, nothing under or beside it. .brand is
the drawn mask and takes its height from the font size, so 54px here is a
mark about 25px tall, the size it is in the patient app's sign-in. */
.lg__top{ flex:none; display:flex; justify-content:center; padding-bottom:32px; }
.lg__mark{ display:block; font-size:54px; line-height:1; color:var(--ink); }
.lg__h{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500;
font-size:clamp(28px,3vw,34px); letter-spacing:-0.02em; line-height:1.15;
color:var(--ink); margin:0 0 8px; text-wrap:balance; }
.lg__sub{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:15px; line-height:1.55;
color:var(--muted); margin:0 0 26px; text-wrap:pretty; }
.lg__form{ width:100%; display:flex; flex-direction:column; text-align:left; }
.lg__field{ display:flex; flex-direction:column; gap:7px; }
.lg__field label{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; color:var(--muted); }
.lg__field input{ width:100%; height:56px; padding:0 16px; background:#fff;
border:1px solid var(--line); border-radius:2px; color:var(--ink);
font:400 16px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; outline:none;
transition:border-color .2s var(--ease); }
.lg__field input:focus{ border-color:var(--blue); }
.lg__field input:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.lg__btn{ margin-top:16px; height:56px; border:0; border-radius:2px;
background:#0a0a0a; color:#fafafa; font:500 15px 'KMR Waldenburg', -apple-system, system-ui, sans-serif;
cursor:pointer; transition:opacity .2s var(--ease); }
.lg__btn:hover:not(:disabled){ opacity:.88; }
.lg__btn:active:not(:disabled){ transform:scale(.995); }
.lg__btn:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.lg__msg{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; line-height:1.5;
color:var(--muted); margin:16px 0 0; text-align:center; }
/* A refusal reads as one. The patient and clinician sign-ins both colour the
error line rather than leaving it the same grey as the helper text. */
.lg__msg.is-err{ color:#b4453c; }
.lg__alt{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; line-height:1.6;
color:var(--muted); text-align:center; margin:20px 0 0; }
.lg__alt a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--line); }
.lg__alt a:hover{ text-decoration-color:currentColor; }
.lg__back{ margin:26px auto 0; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px;
color:var(--muted); }
.lg__back:hover{ color:var(--ink); }
/* The mark inside the sign-in copy takes the shared inline rule (MARK_CSS in
site-src/sections/markify-html.ts): one x-height of Open Sans, on the baseline. */
@media (max-width:420px){ .lg__box{ width:100%; } }
.nav__cta.hvr::before{ background:rgba(255,255,255,.24); }
/* ================= v6: static hero-mirror CTA, statement band, animated illustrations ================= */
.sp3-hero--cta{ padding:48px 16px 16px; }
.sp-state{ padding:clamp(90px,10vw,150px) 0; background:#fff; }
.sp-state__t{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(30px,3.5vw,52px); line-height:1.14; letter-spacing:-0.02em; max-width:940px; margin:0; }
.sp-state__t em{ font-style:normal; color:var(--acc,#111); }
.illus{ background:#fff; border:1px solid rgba(15,14,13,.08); border-radius:16px; padding:clamp(20px,2.6vw,40px); }
.illus svg{ width:100%; height:auto; display:block; }
@keyframes illDash{ to{ stroke-dashoffset:-14; } }
.ilflow{ stroke-dasharray:6 8; animation:illDash 1.5s linear infinite; }
@keyframes illDraw{ 0%{ stroke-dashoffset:var(--len,300); } 55%,100%{ stroke-dashoffset:0; } }
.ildraw{ stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); animation:illDraw 5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes illPulse{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }
.ilpulse{ animation:illPulse 2.2s ease-in-out infinite; }
@keyframes illPop{ 0%,55%{ transform:scale(0); opacity:0; } 68%,88%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1); opacity:0; } }
.ilpop{ transform-origin:center; transform-box:fill-box; animation:illPop 5s ease infinite; }
@keyframes illGrow{ 0%{ transform:scaleY(.06); } 45%,100%{ transform:scaleY(1); } }
.ilgrow{ transform-origin:bottom; transform-box:fill-box; animation:illGrow 4.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes illBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.ilblink{ animation:illBlink 1s steps(1) infinite; }
/* ================= blog v2 (reference style) ================= */
.blg-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.blg-pill{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; letter-spacing:0.01em; padding:8px 16px; border:1px solid rgba(15,14,13,.18); border-radius:999px; background:#fff; color:#0f0e0d; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.blg-pill.is-on{ background:#0f0e0d; color:#fff; border-color:#0f0e0d; }
.blg-pill:hover:not(.is-on){ border-color:#0f0e0d; }
.blg-card.is-hidden{ display:none; }
.blg-card__meta{ display:flex; gap:10px; align-items:center; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; letter-spacing:.05em; color:#767370; }
/* full-width text-only research rows */
.blg-list{ padding:64px 0 12px; }
.blg-list__head{ margin-bottom:10px; }
.blg-list__rows{ border-bottom:1px solid rgba(15,14,13,.14); }
.blg-row{ display:grid; grid-template-columns:230px 1fr 44px; align-items:center; gap:28px; padding:26px 0; border-top:1px solid rgba(15,14,13,.14); text-decoration:none; color:inherit; }
.blg-row__meta{ display:flex; gap:10px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; letter-spacing:.05em; color:#767370; }
.blg-row h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(18px,1.9vw,25px); letter-spacing:-0.015em; line-height:1.25; margin:0; transition:color .25s ease; }
.blg-row__arr{ display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(15,14,13,.2); border-radius:6px; }
.blg-row__arr svg{ width:15px; height:15px; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.blg-row:hover h3{ color:#575757; }
.blg-row:hover .blg-row__arr svg{ transform:translateX(3px); }
.blg-row.is-hidden{ display:none; }
@media(max-width:820px){ .blg-row{ grid-template-columns:1fr 44px; } .blg-row__meta{ grid-column:1 / -1; } }
.sp-sechead{ padding:clamp(72px,8vw,110px) 0 0; background:#fff; }
.sp-henry{ padding:clamp(72px,8vw,110px) 0; background:#f4f4f2; }
.sp-henry__grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px,5vw,80px); align-items:center; }
.sp-henry .demo{ padding:0; background:transparent; }
@media(max-width:880px){ .sp-henry__grid{ grid-template-columns:1fr; } }
/* ================= schematic system v2 — spec-sheet aesthetic ================= */
.dgnode{ fill:#fff; stroke:#cfcfca; stroke-width:1; }
.dgnode--key{ stroke:#0f0e0d; stroke-width:1.1; }
.dgnode--soft{ fill:#f7f7f5; stroke:#dedeD9; }
.dglabel{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; fill:#0f0e0d; }
.dgsub{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:10px; fill:#98958e; }
.dgidx{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:9px; fill:#b8b6af; }
.dgline{ stroke:#c6c6c1; stroke-width:1; fill:none; }
.dgterm{ fill:#8a8a8a; }
.dgterm--acc{ fill:var(--acc,#4e92ac); }
@keyframes dgtick{ to{ stroke-dashoffset:-9; } }
.dgflow2{ stroke-dasharray:2 7; animation:dgtick 1.6s linear infinite; }
.sp-diag__card{ padding:clamp(16px,2vw,28px); }
/* product demos, elevated: hairlines, mono microtype, no pastel */
.demo--clinical,.demo--admin,.demo--personal{ background:#f4f4f2; }
.demo{ border-radius:12px; }
.sp-row__media .demo{ display:flex; align-items:center; justify-content:center; padding:clamp(24px,3vw,44px); }
.sp-row__media .demo .dcard,.sp-row__media .demo .dflag{ width:100%; max-width:400px; margin-left:auto; margin-right:auto; }
.dcard{ border-radius:8px; box-shadow:none; border:1px solid rgba(15,14,13,.12); padding:18px 20px; }
.dcard__title{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:500; letter-spacing:0.01em; }
.dcard__serif{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:16px; font-weight:500; letter-spacing:0; }
.dcard__val{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; font-weight:400; }
.dcard__count{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; }
.dcard__date{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; }
.watile{ background:#0f0e0d !important; color:#fff; border-radius:5px; font-size:12px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif !important; letter-spacing:0.01em; }
.dchip{ background:#fff; border:1px solid rgba(15,14,13,.16); color:#575757; border-radius:4px;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:10px; padding:3px 8px; }
.dchip--mint{ background:#fff; color:#575757; }
.dstep{ border-top:1px solid rgba(15,14,13,.07); }
.dstep:first-of-type{ border-top:0; }
.dstep em{ font-size:11px; color:#98958e; }
.dstep i{ color:#0f0e0d; }
.dbtn{ background:#0f0e0d; color:#fff; border-radius:6px;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; font-weight:500; }
.dbtn--all{ background:#0f0e0d; }
.dapprove{ border:1px solid rgba(15,14,13,.22); border-radius:6px; background:#fff; color:#0f0e0d;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; }
.dapprove.done{ background:#0f0e0d; border-color:#0f0e0d; color:#fff; }
.dtrend{ font-size:13px; color:#0f0e0d; }
.dmono{ font-size:11px; }
.dflag{ border:1px solid rgba(15,14,13,.14); background:#fff; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; color:#575757; }
/* ================= plates + demos v3 — no typewriter, strand art ================= */
.dglabel{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; font-weight:500; letter-spacing:0.01em; fill:#0f0e0d; }
.dgsub{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; fill:#98958e; }
.dgidx{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:9px; font-weight:500; fill:#c2c0b9; }
.dcard__val{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:500; }
.dcard__count{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; color:#98958e; }
.dcard__count b{ color:#0f0e0d; }
.dcard__date{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; color:#98958e; }
.dchip{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; }
.dstep em{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; color:#98958e; }
.dmono{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; }
.dtrend{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; }
.dflag{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; }
.demo{ position:relative; background-color:#f4f4f2; background-image:none; }
.sp-state__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); align-items:center; }
.sp-state__art svg{ width:min(420px,100%); height:auto; display:block; justify-self:end; opacity:.9; }
@media(max-width:860px){ .sp-state__grid{ grid-template-columns:1fr; } .sp-state__art{ display:none; } }
/* ---- demo detail elements ---- */
.dprog{ height:3px; background:rgba(15,14,13,.08); border-radius:2px; margin:12px 0 14px; overflow:hidden; }
.dprog__fill{ display:block; height:100%; width:38%; background:#0f0e0d; border-radius:2px; animation:dprogFill 5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dprogFill{ 0%{ width:6%; } 62%,88%{ width:100%; } 100%{ width:100%; opacity:0; } }
.drow__chip{ flex:none; align-self:center; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:10px; color:#575757;
border:1px solid rgba(15,14,13,.14); border-radius:4px; padding:2px 7px; margin-right:10px; background:#fff; }
.dspark{ display:block; width:100%; height:34px; margin:6px 0 2px; }
.dspark polyline{ fill:none; stroke:#0f0e0d; stroke-width:1.4; }
.dspark circle{ fill:#0f0e0d; }
.dscore{ display:flex; align-items:center; gap:10px; margin-top:12px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; color:#575757; }
.dscore__bar{ flex:1; height:4px; background:rgba(15,14,13,.08); border-radius:2px; overflow:hidden; }
.dscore__fill{ display:block; height:100%; width:92%; background:#0f0e0d; border-radius:2px; transform-origin:left; animation:dscoreIn 4.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dscoreIn{ 0%{ transform:scaleX(.05); } 45%,95%{ transform:scaleX(1); } 100%{ transform:scaleX(1); opacity:.4; } }
.dtyping{ display:inline-flex; gap:4px; align-items:center; padding:4px 0; }
.dtyping span{ width:5px; height:5px; border-radius:1px; background:#8a8a8a; animation:illPulse 1.2s ease-in-out infinite; }
.dtyping span:nth-child(2){ animation-delay:.2s; } .dtyping span:nth-child(3){ animation-delay:.4s; }
/* ================= simple pages ================= */
.pg{ padding:150px 0 24px; }
.pg__eyebrow{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; letter-spacing:.06em; color:#8a8a8a; }
.pg h1{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(38px,4.2vw,60px); letter-spacing:-0.015em; margin:10px 0 8px; }
.pg__sub{ color:#575757; font-size:17px; line-height:1.6; max-width:600px; }
.pg-body{ padding:48px 0 110px; }
.pg-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:8px; }
.pg-card{ background:#fff; border:1px solid rgba(15,14,13,.1); border-radius:12px; padding:26px 26px 24px; min-height:190px; display:flex; flex-direction:column; }
.pg-card h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:19px; letter-spacing:-0.012em; margin:0 0 10px; }
.pg-card p{ color:#575757; font-size:14px; line-height:1.6; margin:auto 0 0; }
.pg-prose{ max-width:680px; }
.pg-prose p{ font-size:17px; line-height:1.75; color:#33322f; margin:0 0 26px; }
.pg-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:40px 0; }
@media(max-width:860px){ .pg-steps{ grid-template-columns:1fr; } }
.pg-step{ background:#f4f4f2; border-radius:12px; padding:28px; }
.pg-step__n{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; color:#8a8a8a; }
.pg-step h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:20px; margin:12px 0 8px; }
.pg-step p{ color:#575757; font-size:14px; line-height:1.6; }
/* find a clinic */
.fc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
@media(max-width:880px){ .fc{ grid-template-columns:1fr; } }
.fc__globe svg{ width:min(420px,100%); height:auto; display:block; margin:0 auto; }
.fc__form{ display:flex; gap:10px; margin-top:26px; }
.fc__form input{ flex:1; height:48px; border:1px solid #d1d5db; border-radius:8px; padding:0 16px; font:400 15px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.fc__results{ margin-top:28px; display:none; flex-direction:column; }
.fc__results.on{ display:flex; }
.fc__hit{ display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:18px 0; border-top:1px solid rgba(15,14,13,.12); }
.fc__hit:last-child{ border-bottom:1px solid rgba(15,14,13,.12); }
.fc__hit b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:16px; }
.fc__hit small{ display:block; color:#8a8a8a; font-size:13px; margin-top:2px; }
.fc__tag{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; color:#575757; border:1px solid rgba(15,14,13,.16); border-radius:4px; padding:3px 8px; }
.fc__km{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; color:#8a8a8a; }
@keyframes globeSpin{ to{ stroke-dashoffset:-260; } }
.globe-m{ stroke-dasharray:4 4; animation:globeSpin 14s linear infinite; }
/* article */
.art-head{ padding:150px 0 36px; max-width:760px; margin:0 auto; }
.art-head .blg-card__meta{ margin-bottom:18px; }
.art-head h1{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(32px,3.6vw,50px); letter-spacing:-0.018em; line-height:1.12; margin:0 0 18px; }
.art-head__by{ color:#575757; font-size:14px; }
.art-hero{ max-width:1100px; margin:24px auto 0; padding:0 24px; }
.art-hero div{ height:clamp(280px,42vw,520px); border-radius:16px; background-size:cover; background-position:center; }
.art-body{ max-width:680px; margin:56px auto 110px; padding:0 24px; }
.art-body p{ font-size:18px; line-height:1.8; color:#2a2925; margin:0 0 28px; }
.art-body h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:26px; letter-spacing:-0.014em; margin:44px 0 16px; }
.art-quote{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:24px; line-height:1.45; letter-spacing:-0.012em; color:#0f0e0d; border-left:2px solid #111; padding:6px 0 6px 28px; margin:40px 0; }
/* ---- demo alignment fixes ---- */
.sp-row__media .demo .dcard,.sp-row__media .demo .dflag{ max-width:440px; }
.drow{ align-items:center; }
.drow__chip{ width:76px; text-align:center; padding:3px 0; margin-right:2px; }
.drow__t{ flex:1; min-width:0; text-align:left; }
.dapprove{ flex:none; min-width:104px; text-align:center; }
/* typing indicator: circular dots, shown only until the reply lands */
.dtyping span{ width:6px; height:6px; border-radius:50%; }
.dtyping-step{ transition:opacity .35s ease; }
.dtyping-step.off{ opacity:0 !important; }
/* ---- specification rows (detail lists on simple pages) ---- */
.dspec{ margin-top:64px; border-bottom:1px solid rgba(15,14,13,.12); }
.dspec__row{ display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:28px; padding:22px 0; border-top:1px solid rgba(15,14,13,.12); }
.dspec__row b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:16px; letter-spacing:0; }
.dspec__row p{ margin:0; color:#575757; font-size:14px; line-height:1.62; max-width:560px; }
@media(max-width:700px){ .dspec__row{ grid-template-columns:1fr; gap:6px; } }
.blg-row__abs{ margin:6px 0 0; color:#767370; font-size:14px; line-height:1.5; grid-column:2; }
.blg-row .blg-row__wrap{ min-width:0; }
.pg-note{ margin-top:40px; color:#767370; font-size:14px; line-height:1.6; max-width:560px; }
.fc__cities{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:44px; padding-top:24px; border-top:1px solid rgba(15,14,13,.12);
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; color:#575757; }
/* ---- real hero photos (top hero only) ---- */
.sp3-hero__img.is-photo{ background-size:cover; background-position:center; }
/* On a phone the card is a narrow slice of a wide image. A product screenshot
names where that slice starts (Sp3Hero phoneFocus), so its words are whole. */
@media (max-width:700px){ .sp3-hero__img.is-photo{ background-position:var(--pos-phone,center); } }
/* A screenshot under phone-width copy reads as text over text. On a phone the
copy block carries its own scrim: clear 96px above the headline, near-solid
ink by 32px above it, and solid behind every line, so the screenshot's top
(Worklist, Today, the first row) stays as the product cue and nothing shows
through the words. */
@media (max-width:700px){
.sp3-hero__img.is-shot ~ .sp3-hero__copy{ isolation:isolate; }
.sp3-hero__img.is-shot ~ .sp3-hero__copy::before{ content:""; position:absolute; z-index:-1; left:-80px; right:-80px; top:-96px; bottom:-80px;
background:linear-gradient(180deg, rgba(10,10,10,0) 0, rgba(10,10,10,.94) 64px, #0a0a0a 96px); }
}
.sp3-hero__img.is-photo::after{ content:''; position:absolute; inset:0;
background:radial-gradient(120% 95% at 74% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%); }
.sp3-hero__card.is-light .sp3-hero__grad{ background:
linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.80) 100%),
linear-gradient(75deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 68%); }
@keyframes illGrowX{ 0%{ transform:scaleX(.04); } 45%,95%{ transform:scaleX(1); } 100%{ transform:scaleX(1); } }
/* ================= setup-profile (rich) ================= */
.su-steps{ padding:20px 0 40px; }
.su-step{ display:grid; grid-template-columns:64px 1fr 380px; gap:clamp(24px,4vw,64px); align-items:center; padding:44px 0; border-top:1px solid rgba(15,14,13,.12); }
.su-step:first-child{ border-top:0; }
.su-step__n{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:15px; color:#98958e; padding-top:4px; }
.su-step__c h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(22px,2.2vw,30px); letter-spacing:-0.015em; margin:0 0 10px; }
.su-step__c p{ color:#575757; font-size:16px; line-height:1.62; margin:0; max-width:420px; }
.su-viz{ background:#f4f4f2; border:1px solid rgba(15,14,13,.08); border-radius:12px; padding:24px; }
@media(max-width:920px){ .su-step{ grid-template-columns:1fr; gap:20px; } .su-viz{ order:3; } }
/* email mock */
.su-field{ position:relative; background:#fff; border:1px solid #d1d5db; border-radius:8px; height:46px; display:flex; align-items:center; padding:0 14px; font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#98958e; }
.su-field .cur{ width:1.5px; height:17px; background:#0f0e0d; margin-left:1px; animation:illBlink 1s steps(1) infinite; }
.su-cont{ margin-top:10px; height:44px; border-radius:8px; background:#0f0e0d; color:#fff; display:flex; align-items:center; justify-content:center; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
/* connect tiles */
.su-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.su-tile{ background:#fff; border:1px solid rgba(15,14,13,.1); border-radius:8px; padding:12px 14px; display:flex; align-items:center; gap:10px; font:500 13px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.su-tile__dot{ width:8px; height:8px; border-radius:50%; background:#c6c6c1; flex:none; }
.su-tile.on .su-tile__dot{ background:#111; }
.su-tile__x{ margin-left:auto; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; color:#98958e; }
.su-tile.on .su-tile__x{ color:#111; }
/* connect grid (full section) */
.su-connect{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:8px; }
.su-connect__t{ background:#fff; border:1px solid rgba(15,14,13,.1); border-radius:10px; padding:20px; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; display:flex; flex-direction:column; gap:10px; }
.su-connect__t span{ font:400 13px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#767370; }
.su-connect__ic{ width:26px; height:26px; }
.su-connect__ic svg{ width:26px; height:26px; stroke:#0f0e0d; fill:none; stroke-width:1.4; }
/* ================= setup-profile splitscreen ================= */
.su2{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.su2__left{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px 40px 60px; }
.su2__box{ width:340px; max-width:100%; display:flex; flex-direction:column; }
.su2__mark{ font-family:'Libre Baskerville',Georgia,serif; letter-spacing:-0.08em; font-size:22px; color:#0f0e0d; text-decoration:none; align-self:center; }
.su2__h{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:32px; letter-spacing:-0.01em; color:#0f0e0d; margin:22px 0 0; text-align:center; }
.su2__sub{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:15px; line-height:1.6; color:#575757; margin:12px 0 0; text-align:center; }
.su2__form{ margin-top:28px; display:flex; flex-direction:column; }
.su2__field{ position:relative; margin-top:14px; }
.su2__field input{ width:100%; height:52px; background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:0 16px; color:#0f0e0d; font:400 15px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; outline:none; transition:border-color .2s, box-shadow .2s; }
.su2__field input:focus{ border-color:#0f0e0d; box-shadow:0 0 0 1px #0f0e0d; }
.su2__field label{ position:absolute; top:-8px; left:12px; padding:0 6px; background:#fff; font:400 12px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#8a8a8a; }
.su2__btn{ margin-top:16px; height:52px; border:0; border-radius:8px; background:#0f0e0d; color:#fff; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; cursor:pointer; transition:opacity .2s; }
.su2__btn:hover{ opacity:.88; }
.su2__or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:#98958e; font:400 12px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.su2__or::before,.su2__or::after{ content:''; flex:1; height:1px; background:rgba(15,14,13,.12); }
.su2__oauth{ height:52px; border:1px solid #d1d5db; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#0f0e0d; cursor:pointer; transition:background .2s; }
.su2__oauth:hover{ background:#f7f7f5; }
.su2__legal{ margin-top:18px; font:400 12px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; line-height:1.6; color:#8a8a8a; text-align:center; }
.su2__legal a{ color:#575757; }
.su2__right{ position:relative; overflow:hidden; background:#101820; }
.su2__media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.su2__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.su2__mediatint{ position:absolute; inset:0; background:linear-gradient(140deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.su2__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%;
background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; cursor:pointer; transition:background .25s, transform .25s; }
.su2__play:hover{ background:rgba(255,255,255,.24); transform:translate(-50%,-50%) scale(1.05); }
.su2__play svg{ width:24px; height:24px; margin-left:3px; fill:#fff; }
.su2__cap{ position:absolute; left:36px; bottom:34px; right:36px; color:#fff; z-index:2; }
.su2__cap b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:16px; letter-spacing:0; display:block; }
.su2__cap span{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; color:rgba(255,255,255,.82); }
@media(max-width:860px){ .su2{ grid-template-columns:1fr; } .su2__right{ min-height:340px; order:-1; } .su2__left{ padding:100px 24px 60px; } }
/* ================= find a clinic (centered) ================= */
.fc2{ max-width:920px; margin:0 auto; text-align:center; }
.fc2 .globe-wrap{ max-width:440px; margin:8px auto 0; }
.fc2__form{ display:flex; gap:10px; max-width:520px; margin:28px auto 0; }
.fc2__form input{ flex:1; height:50px; border:1px solid #d1d5db; border-radius:8px; padding:0 16px; font:400 15px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.fc2__results{ max-width:620px; margin:26px auto 0; display:none; flex-direction:column; text-align:left; }
.fc2__results.on{ display:flex; }
.fc2__hit{ display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:16px 0; border-top:1px solid rgba(15,14,13,.12); }
.fc2__hit:last-child{ border-bottom:1px solid rgba(15,14,13,.12); }
.fc2__hit b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:15px; }
.fc2__hit small{ display:block; color:#8a8a8a; font-size:13px; margin-top:2px; }
.fc-net{ padding:clamp(72px,9vw,120px) 0; border-top:1px solid rgba(15,14,13,.1); margin-top:clamp(60px,8vw,100px); }
.fc-net__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(15,14,13,.1); border:1px solid rgba(15,14,13,.1); border-radius:12px; overflow:hidden; }
.fc-net__c{ background:#fff; padding:26px 24px; min-height:104px; display:flex; flex-direction:column; justify-content:center; }
.fc-net__c b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:15px; letter-spacing:0; }
.fc-net__c span{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; color:#8a8a8a; margin-top:3px; }
@media(max-width:900px){ .fc-net__grid{ grid-template-columns:repeat(2,1fr); } }
.fc-cta{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:clamp(72px,9vw,120px); }
@media(max-width:820px){ .fc-cta{ grid-template-columns:1fr; } }
.fc-cta__card{ border:1px solid rgba(15,14,13,.12); border-radius:16px; padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; }
.fc-cta__card--dark{ background:#101820; border-color:#101820; color:#fff; }
.fc-cta__card h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(22px,2vw,28px); letter-spacing:-0.015em; margin:0 0 12px; }
.fc-cta__card p{ font-size:15px; line-height:1.6; color:#575757; margin:0 0 24px; max-width:360px; }
.fc-cta__card--dark p{ color:rgba(255,255,255,.82); }
.fc-news{ display:flex; gap:10px; margin-top:auto; }
.fc-news input{ flex:1; height:48px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); border-radius:8px; padding:0 16px; color:#fff; font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.fc-news input::placeholder{ color:rgba(255,255,255,.55); }
.fc-news button{ height:48px; padding:0 20px; border:0; border-radius:8px; background:#fff; color:#0f0e0d; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; cursor:pointer; }
/* ================= frontier roles grid + faq (Mercor-style) ================= */
.roles{ padding:clamp(20px,3vw,40px) 0 clamp(72px,8vw,110px); }
.roles__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .roles__grid{ grid-template-columns:1fr; } }
.role{ border:1px solid rgba(15,14,13,.12); border-radius:14px; padding:24px 26px 22px; display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff; transition:transform .4s cubic-bezier(.19,1,.22,1), box-shadow .4s cubic-bezier(.19,1,.22,1), border-color .3s; }
.role:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(10,49,67,.28); border-color:rgba(15,14,13,.2); }
.role__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.role__org{ width:34px; height:34px; border-radius:8px; background:#0f0e0d; color:#fff; display:grid; place-items:center; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:0.01em; }
.role__rate{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; font-weight:500; color:#0f0e0d; background:#f4f4f2; border-radius:100px; padding:5px 12px; }
.role h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:19px; letter-spacing:-0.012em; margin:0 0 6px; }
.role__meta{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; color:#767370; margin:0 0 22px; }
.role__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.role__hired{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; color:#98958e; }
.role__apply{ display:inline-flex; align-items:center; gap:7px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:500; color:#0f0e0d; }
.role__apply svg{ width:14px; height:14px; stroke:currentColor; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.role:hover .role__apply svg{ transform:translateX(3px); }
.faq{ padding:clamp(20px,3vw,40px) 0 clamp(80px,9vw,120px); }
.faq__item{ border-top:1px solid rgba(15,14,13,.12); padding:24px 0; }
.faq__item:last-child{ border-bottom:1px solid rgba(15,14,13,.12); }
.faq__q{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:17px; letter-spacing:-0.01em; margin:0 0 10px; }
.faq__a{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:15px; line-height:1.65; color:#575757; margin:0; max-width:720px; }
/* ================= apply-frontier (clean, no grey blocks) ================= */
.af{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(40px,6vw,96px); align-items:start; padding:8px 0 clamp(80px,9vw,120px); }
@media(max-width:900px){ .af{ grid-template-columns:1fr; } }
.af__form{ display:flex; flex-direction:column; gap:22px; }
.af__form .bd__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .af__form .bd__row{ grid-template-columns:1fr; } }
.af__form input,.af__form select,.af__form textarea{ height:50px; border:1px solid #d1d5db; border-radius:8px; padding:0 16px; font:400 15px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#171717; width:100%; background:#fff; -webkit-appearance:none; appearance:none; }
.af__form select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23171717' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; color:#575757; }
.af__form textarea{ height:120px; padding:14px 16px; resize:vertical; }
.af__form ::placeholder{ color:#929292; }
.af__note{ font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#767370; line-height:1.6; }
.af__note a{ color:#171717; font-weight:500; }
.af__side{ position:sticky; top:110px; }
.af__side-h{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.06em; color:#8a8a8a; margin:0 0 8px; }
.af__side h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:14px; letter-spacing:0.01em; margin:0 0 4px; }
.af__how{ display:flex; flex-direction:column; }
.af__how-row{ display:grid; grid-template-columns:30px 1fr; gap:16px; padding:20px 0; border-top:1px solid rgba(15,14,13,.12); align-items:start; }
.af__how-row:first-of-type{ border-top:0; }
.af__how-n{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:16px; font-weight:500; color:#0f0e0d; }
.af__how-row b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:15px; letter-spacing:0; display:block; margin-bottom:3px; }
.af__how-row p{ margin:0; font:400 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#575757; line-height:1.55; }
.af__quote{ margin-top:32px; padding-top:24px; border-top:1px solid rgba(15,14,13,.12); }
.af__quote p{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:16px; line-height:1.5; letter-spacing:-0.01em; color:#0f0e0d; margin:0 0 10px; }
.af__quote span{ font:400 13px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#8a8a8a; }
/* ================= case study (Thinking Machines — minimal) ================= */
.cs{ max-width:720px; margin:0 auto; padding:150px 24px 40px; }
.cs__eyebrow{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.08em; color:#8a8a8a; text-transform:none; }
.cs h1{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(34px,4vw,52px); line-height:1.1; letter-spacing:-0.02em; margin:16px 0 20px; }
.cs__dek{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:19px; line-height:1.6; color:#575757; margin:0; }
.cs__meta{ display:flex; gap:24px; margin-top:28px; padding-top:20px; border-top:1px solid rgba(15,14,13,.14); font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; color:#767370; }
.cs__meta b{ display:block; color:#0f0e0d; font-weight:500; margin-bottom:2px; }
.cs-body{ max-width:720px; margin:0 auto; padding:8px 24px 60px; }
.cs-body h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:24px; letter-spacing:-0.014em; margin:48px 0 14px; }
.cs-body p{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:18px; line-height:1.8; color:#2a2925; margin:0 0 24px; }
.cs-stats{ display:block; margin:48px 0; }
.cs-stats>div{ padding:18px 0; border-top:1px solid rgba(15,14,13,.14); }
.cs-stat__n,.cs-stat__l{ display:inline; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.25; letter-spacing:-.01em; color:#373737; margin:0; }
.cs-stat__n::after{ content:" "; }
.cs-quote{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.4; letter-spacing:-0.015em; color:#0f0e0d; margin:44px 0; }
.cs-quote span{ display:block; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:15px; color:#8a8a8a; margin-top:16px; letter-spacing:0; }
/* ================= find a clinic v3 (globe left, search right) ================= */
.fc3{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,88px); align-items:center; padding:16px 0 clamp(72px,8vw,110px); }
@media(max-width:900px){ .fc3{ grid-template-columns:1fr; } }
.fc3 .globe-wrap{ max-width:460px; margin:0 auto; }
.fc3__panel{ max-width:460px; }
.fc3__h{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(34px,3.6vw,50px); letter-spacing:-0.02em; line-height:1.05; margin:0 0 16px; }
.fc3__sub{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:16px; line-height:1.6; color:#575757; margin:0 0 34px; }
.fc3__label{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:15px; letter-spacing:0; margin:0 0 18px; }
.fc3__search{ position:relative; }
.fc3__input{ width:100%; border:0; border-bottom:1px solid rgba(15,14,13,.28); background:transparent; padding:10px 2px; font:400 18px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; color:#0f0e0d; outline:none; transition:border-color .2s; }
.fc3__input::placeholder{ color:#a2a09b; }
.fc3__input:focus{ border-bottom-color:#0f0e0d; }
.fc3__sugg{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid rgba(15,14,13,.12); border-radius:10px; box-shadow:0 20px 44px -28px rgba(10,49,67,.3); overflow:hidden; z-index:5; display:none; }
.fc3__sugg.on{ display:block; }
.fc3__opt{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 16px; cursor:pointer; border-top:1px solid rgba(15,14,13,.07); }
.fc3__opt:first-child{ border-top:0; }
.fc3__opt:hover,.fc3__opt.act{ background:#f7f7f5; }
.fc3__opt b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:14px; }
.fc3__opt span{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; color:#8a8a8a; }
.fc3__result{ margin-top:22px; display:none; padding-top:20px; border-top:1px solid rgba(15,14,13,.14); }
.fc3__result.on{ display:block; }
.fc3__result b{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:16px; }
.fc3__result small{ display:block; color:#8a8a8a; font-size:13px; margin-top:3px; }
.fc3__result .fc__tag{ display:inline-block; margin-top:12px; }
.fc-propose{ border-top:1px solid rgba(15,14,13,.1); padding:clamp(56px,7vw,90px) 0 clamp(72px,9vw,120px); }
.fc-propose__inner{ max-width:640px; }
.fc-propose h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(24px,2.6vw,34px); letter-spacing:-0.018em; margin:0 0 12px; }
.fc-propose p{ color:#575757; font-size:16px; line-height:1.6; margin:0 0 26px; max-width:480px; }
.fc-propose__form{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; }
@media(max-width:640px){ .fc-propose__form{ grid-template-columns:1fr; } }
.fc-propose__form input{ height:50px; border:1px solid #d1d5db; border-radius:8px; padding:0 16px; font:400 15px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; }
.fc-propose__form button{ height:50px; padding:0 24px; border:0; border-radius:8px; background:#0f0e0d; color:#fff; font:500 14px 'KMR Waldenburg', -apple-system, system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
/* ================= blog v2 — text-only, varied editorial ================= */
.bl2-feat{ padding:8px 0 clamp(56px,6vw,80px); border-bottom:1px solid rgba(15,14,13,.12); }
.bl2-feat a{ text-decoration:none; color:inherit; display:block; max-width:900px; }
.bl2-feat__meta{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.05em; color:#767370; margin-bottom:18px; }
.bl2-feat h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(30px,4.2vw,52px); line-height:1.08; letter-spacing:-0.022em; margin:0 0 18px; }
.bl2-feat p{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:18px; line-height:1.6; color:#575757; max-width:640px; margin:0; }
.bl2-feat__go{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; font-weight:500; }
.bl2-feat__go svg{ width:14px; height:14px; stroke:currentColor; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.bl2-feat a:hover .bl2-feat__go svg{ transform:translateX(4px); }
.bl2-picks{ padding:clamp(56px,6vw,80px) 0; border-bottom:1px solid rgba(15,14,13,.12); }
.bl2-picks__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(15,14,13,.1); border:1px solid rgba(15,14,13,.1); border-radius:14px; overflow:hidden; }
@media(max-width:820px){ .bl2-picks__grid{ grid-template-columns:1fr; } }
.bl2-pick{ background:#fff; padding:30px 30px 34px; text-decoration:none; color:inherit; display:flex; flex-direction:column; min-height:220px; transition:background .25s; }
.bl2-pick:hover{ background:#f7f7f5; }
.bl2-pick__meta{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; letter-spacing:.05em; color:#767370; }
.bl2-pick h3{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:21px; line-height:1.24; letter-spacing:-0.015em; margin:14px 0 0; }
.bl2-pick__read{ margin-top:auto; padding-top:24px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:13px; color:#8a8a8a; }
.bl2-index{ padding:clamp(56px,6vw,80px) 0 clamp(80px,9vw,120px); }
.bl2-index h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:12px; letter-spacing:.06em; color:#8a8a8a; margin:0 0 8px; font-weight:400; }
.bl2-row{ display:grid; grid-template-columns:150px 1fr 40px; gap:24px; align-items:baseline; padding:36px 0; border-top:1px solid rgba(15,14,13,.12); text-decoration:none; color:inherit; }
.bl2-row:last-child{ border-bottom:1px solid rgba(15,14,13,.12); }
.bl2-row__meta{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:11px; letter-spacing:.04em; color:#767370; }
/* Was ".bl2-row h3" but the markup renders an -- this never matched, so
titles were falling back to the browser's default styling. Fixed to
the real selector, and sized up per the "make it look nicer" ask. */
.bl2-row h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(24px,3vw,38px); line-height:1.25; letter-spacing:-0.018em; color:#0f0e0d; margin:0; transition:color .25s; }
.bl2-row__arr{ justify-self:end; align-self:center; width:36px; height:36px; border:1px solid rgba(15,14,13,.18); border-radius:6px; display:grid; place-items:center; }
.bl2-row__arr svg{ width:14px; height:14px; stroke:currentColor; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.bl2-row:hover h2{ color:#575757; }
.bl2-row:hover .bl2-row__arr svg{ transform:translateX(3px); }
.bl2-row.is-hidden,.bl2-row.is-more,.bl2-pick.is-hidden{ display:none; }
.bl2-more{ display:block; margin:32px auto 0; padding:12px 28px; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; letter-spacing:0.01em; border:1px solid rgba(15,14,13,.18); border-radius:6px; background:#fff; color:#0f0e0d; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.bl2-more:hover{ border-color:#0A3143; color:#0A3143; }
.bl2-more.is-hidden{ display:none; }
@media(max-width:640px){ .bl2-row{ grid-template-columns:1fr 40px; } .bl2-row__meta{ grid-column:1/-1; margin-bottom:4px; } }
/* ================= logo shimmer (wordmarks, not demos) ================= */
@keyframes wmShimmer2{ 0%,28%{ background-position:110% 0; } 72%,100%{ background-position:-90% 0; } }
.nav__brand{
background:linear-gradient(100deg,#0a0a0a 0%,#0a0a0a 43%,#5f9a83 48%,#8379a8 52%,#0a0a0a 57%,#0a0a0a 100%);
background-size:280% 100%; background-position:110% 0;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
animation:wmShimmer2 6.5s ease-in-out infinite;
}
.nav--dark .nav__brand{
background:linear-gradient(100deg,#fff 0%,#fff 43%,#b8e6d6 48%,#cfc4ea 52%,#fff 57%,#fff 100%);
background-size:280% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.su2__mark{
background:linear-gradient(100deg,#0a0a0a 0%,#0a0a0a 43%,#5f9a83 48%,#8379a8 52%,#0a0a0a 57%,#0a0a0a 100%);
background-size:280% 100%; background-position:110% 0;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
animation:wmShimmer2 6.5s ease-in-out infinite;
}
/* No shimmer rule for .lg__mark: it clipped a near-white gradient to text for
the old black page, and the mark is now the drawn mask in ink. */
/* ================= less motion, site-wide (31 Oct 2026) =================
A reader who has asked their system for less motion gets every page at
rest: sections fade in where they stand, the drawings show their finished
frame, and nothing pulses, spins, drifts or shimmers. The product demos
show their last step (wellness-sub.js). */
@media (prefers-reduced-motion:reduce){
.rv,.rv2,.rv3,.bcard.rv2,.ctar__copy .rvc,.demo .seq{ transform:none !important; transition:opacity .3s ease !important; }
.uipanel__bar .live i,.frarc,.foot3__wordmark,.su2__mark,.megamenu__inner.swap,.sp-hero__h.sp-in,.sp2-hero__demo,
.dgflow,.dgflow2,.ilflow,.ilpulse,.ilpop,.ilgrow,.ilblink,.dtyping span,.dprog__fill,.dscore__fill,.globe-m,.su-field .cur,
.ctar__btn:hover .ctar__btnic svg,.sp-gbtn:hover .sp-gbtn__ic svg,.sp-cta__btn:hover .sp-cta__btnic svg{ animation:none; }
.ildraw{ animation:none; stroke-dashoffset:0; }
.sp2-hero__demo{ transform:translateY(-50%); }
.foot3__wordmark,.su2__mark{ background-position:110% 0; }
.dbtn--all.pulse{ transform:none; }
}
/* contact — how it works band (off-white, out of quote panel) */
.ci-how{ background:#fafaf9; border-top:1px solid rgba(15,14,13,.08); padding:clamp(48px,6vw,80px) 0; }
.ci-how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); }
@media(max-width:820px){ .ci-how__grid{ grid-template-columns:1fr; gap:28px; } }
.ci-col b{ display:block; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:500; font-size:16px; letter-spacing:0; margin-bottom:10px; }
.ci-col p{ margin:0; font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; line-height:1.6; color:#575757; }
.ci-col a{ color:#111; font-weight:500; }
.fr-tags{ background:#fafaf9; padding:clamp(40px,5vw,64px) 0; }
/* ================= Med-AI 3D scan hero (complete effect) ================= */
.wsh-stage{ position:relative; height:250vh; background:#ffffff; }
.wsh-viewport{ position:sticky; top:0; height:100vh; overflow:hidden;
perspective:1500px; perspective-origin:50% 46%; display:flex; align-items:center; justify-content:center; }
.wsh-field{ position:absolute; inset:0; background:#0A1116; opacity:0; pointer-events:none; }
.wsh-deck{ position:relative; width:min(62vw,980px); aspect-ratio:16/9; transform-style:preserve-3d; will-change:transform; }
.wsh-plane{ position:absolute; inset:0; border-radius:20px; transform-style:preserve-3d; backface-visibility:hidden; }
.wsh-frame{ border:1px solid rgba(255,255,255,.15); opacity:0; }
.wsh-frame--near{ border-color:rgba(255,255,255,.28); }
.wsh-ticks{ position:absolute; top:14px; left:26px; right:26px; height:8px;
background-image:radial-gradient(circle 1.5px, rgba(255,255,255,.32) 1px, transparent 1.5px);
background-size:26px 8px; background-repeat:repeat-x; }
.wsh-media{ overflow:hidden; border:1px solid rgba(255,255,255,.28); background:#000; box-shadow:0 60px 140px rgba(4,12,18,.55); }
.wsh-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wsh-media .wsh-base{ will-change:filter; }
.wsh-media .wsh-glow{ mix-blend-mode:screen; opacity:0; filter:brightness(.9); }
.wsh-vig{ position:absolute; inset:0; pointer-events:none;
background:radial-gradient(130% 100% at 50% 45%, transparent 60%, rgba(2,8,12,.45)); }
.wsh-contours{ position:absolute; left:-15%; top:-15%; width:130%; height:130%; pointer-events:none; }
.wsh-hud{ pointer-events:none; opacity:0; }
.wsh-hud svg{ position:absolute; inset:-14%; width:128%; height:128%; overflow:visible; }
.wsh-hud text{ fill:rgba(255,255,255,.42); font:500 10px/1 'KMR Waldenburg', -apple-system, system-ui, sans-serif; letter-spacing:.08em; }
.wsh-lead{ stroke:rgba(255,255,255,.18); stroke-width:1; stroke-dasharray:1 6; fill:none; }
.wsh-copy{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; padding:0 6vw; pointer-events:none; z-index:6; color:#fff; }
.wsh-copy .wsh-eyebrow{ display:inline-flex; gap:10px; align-items:baseline; margin-bottom:20px;
font:400 12px/1 'KMR Waldenburg', -apple-system, system-ui, sans-serif; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.wsh-copy .wsh-eyebrow .wm{ font-family:'Libre Baskerville',Georgia,serif; letter-spacing:0; text-transform:none; font-size:15px; }
.wsh-copy h1{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(34px,5.2vw,72px);
line-height:1.05; letter-spacing:-.02em; text-shadow:0 2px 44px rgba(0,0,0,.45); }
.wsh-caption{ position:absolute; left:6vw; top:50%; transform:translateY(-50%); max-width:340px; z-index:6; opacity:0; color:#fff; }
.wsh-caption .wsh-eyebrow{ font:400 11px/1 'KMR Waldenburg', -apple-system, system-ui, sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.52); display:block; margin-bottom:16px; }
.wsh-caption h2{ font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-weight:400; font-size:clamp(24px,2.6vw,36px); line-height:1.12; letter-spacing:-.01em; }
.wsh-caption p{ margin-top:14px; color:rgba(255,255,255,.6); font-size:15px; line-height:1.6; }
@media (max-width:768px){ .wsh-deck{ width:88vw; } .wsh-caption{ max-width:250px; } }
/* ---- hero 3D wireframe planes (ride the card, spread in depth) ---- */
.hero__wire{ position:absolute; top:94px; left:18px; right:18px; bottom:18px; border-radius:20px;
border:1px solid rgba(255,255,255,.16); pointer-events:none; opacity:0;
transform-origin:50% 50%; backface-visibility:hidden; will-change:transform,opacity; }
.hero__wire--a{ border-color:rgba(210,228,255,.26); box-shadow:inset 0 0 46px rgba(150,190,255,.05), 0 30px 80px rgba(4,10,20,.28); }
.hero__wire--b{ border-color:rgba(255,255,255,.14); }
.hero__wire--c{ border-color:rgba(150,180,230,.12); box-shadow:0 0 90px rgba(90,140,210,.10); }
.hero__wiremesh{ position:absolute; inset:0; width:100%; height:100%; }
.hero__ticks{ position:absolute; top:14px; left:26px; right:26px; height:8px;
background-image:radial-gradient(circle 1.5px, rgba(255,255,255,.30) 1px, transparent 1.5px);
background-size:26px 8px; background-repeat:repeat-x; }
/* ================= WAI logo mark ================= */
/* Every `.brand` span now paints the WAI logo instead of the "WA\" text.
The text stays in the DOM (crawlers, screen readers) but is indented out
of view; the logo is drawn as an alpha mask filled with currentColor, so
it picks up the surrounding text colour on light, dark and tinted grounds
and scales with the local font-size. */
/* The mark set as a word (Omar, 19 Oct 2026). Its letters are lowercase, so
it stands exactly one x-height tall and sits on the baseline, like the
letters beside it, with a plain word space either side and no nudge.
The x-height is the surrounding face's own: the span inherits the family
(the serif on the rule near the top is the retired typed wordmark), and
1ex then measures, in Chrome, .536em for Plus Jakarta Sans, .449em for
Jost and .53em for Libre Baskerville, each equal to the ink height of
their "x" to a thousandth of an em. An inline-block that hides its
overflow takes its bottom edge as its baseline, so vertical-align:
baseline puts the foot of the mark on the line. The file is cropped to
the ink (1450 by 400), so the box is the mark. */
.brand{
display:inline-block; height:1ex; aspect-ratio:1450/400; font-family:inherit;
background:currentColor;
-webkit-mask:url('/assets/brand/wai-black.png') center/contain no-repeat;
mask:url('/assets/brand/wai-black.png') center/contain no-repeat;
overflow:hidden; text-indent:-999em; white-space:nowrap;
text-align:left; direction:ltr; -webkit-text-fill-color:transparent; text-shadow:none;
vertical-align:baseline;
}
/* Chrome marks are real ![]()
s (their old shimmer rules clip a gradient to
text, which would leave a currentColor mask invisible). */
.nav__brand img{ height:13px; width:auto; display:block; }
.nav--dark .nav__brand img{ filter:invert(1); }
/* .lg__mark is a drawn mask span now, not an ![]()
. */
.su2__mark img{ height:15px; width:auto; display:block; }
.watile img{ width:68%; height:auto; display:block; }
.foot3__wordmark img{ height:clamp(48px,13vw,190px); width:auto; display:block; }
/* ================= outline compliance credentials ================= */
.foot3__cred{
display:inline-flex; align-items:center; gap:10px; padding:9px 14px;
border:1px solid rgba(255,255,255,.22); border-radius:9px;
color:#a9a9b0; transition:border-color .2s, color .2s;
}
.foot3__cred:hover{ border-color:rgba(255,255,255,.45); color:#e8e8ea; }
.foot3__cred svg{ width:20px; height:20px; flex:none; }
.foot3__credtext{ display:flex; flex-direction:column; line-height:1.2; }
.foot3__credtext b{ font-weight:500; font-size:13px; letter-spacing:.02em; color:inherit; }
.foot3__credtext span{ font-size:10px; letter-spacing:.04em; color:#8f8f97; }
/* ================= WAI logo mark ================= */
/* Every `.brand` span now paints the WAI logo instead of the "WA\" text.
The text stays in the DOM (crawlers, screen readers) but is indented out
of view; the logo is drawn as an alpha mask filled with currentColor, so
it picks up the surrounding text colour on light, dark and tinted grounds
and scales with the local font-size.
Ported verbatim from site-src/insights/assets/variant-a.css, which is
built as "inlined wellness-site.css" plus the article styles. The block
was added to the superset only, so the 59 insights pages already drew the
logo while the 23 pages that link this stylesheet still set the retired
serif "WA\" as type. Keep the two copies in step. */
/* The mark set as a word (Omar, 19 Oct 2026). Its letters are lowercase, so
it stands exactly one x-height tall and sits on the baseline, like the
letters beside it, with a plain word space either side and no nudge.
The x-height is the surrounding face's own: the span inherits the family
(the serif on the rule near the top is the retired typed wordmark), and
1ex then measures, in Chrome, .536em for Plus Jakarta Sans, .449em for
Jost and .53em for Libre Baskerville, each equal to the ink height of
their "x" to a thousandth of an em. An inline-block that hides its
overflow takes its bottom edge as its baseline, so vertical-align:
baseline puts the foot of the mark on the line. The file is cropped to
the ink (1450 by 400), so the box is the mark. */
.brand{
display:inline-block; height:1ex; aspect-ratio:1450/400; font-family:inherit;
background:currentColor;
-webkit-mask:url('/assets/brand/wai-black.png') center/contain no-repeat;
mask:url('/assets/brand/wai-black.png') center/contain no-repeat;
overflow:hidden; text-indent:-999em; white-space:nowrap;
text-align:left; direction:ltr; -webkit-text-fill-color:transparent; text-shadow:none;
vertical-align:baseline;
}
/* Chrome marks are real ![]()
s (their old shimmer rules clip a gradient to
text, which would leave a currentColor mask invisible). Without these the
marks fall back to `img{max-width:100%}` and render at natural size. */
.nav__brand img{ height:13px; width:auto; display:block; }
.nav--dark .nav__brand img{ filter:invert(1); }
/* .lg__mark is a drawn mask span now, not an ![]()
. */
.su2__mark img{ height:15px; width:auto; display:block; }
.watile img{ width:68%; height:auto; display:block; }
.foot3__wordmark img{ height:clamp(48px,13vw,190px); width:auto; display:block; }
/* Footer parity with the Scale anatomy, 30 Aug 2026. Small mark and a short
line left, four dense columns with uppercase tracked mono labels, the giant
wordmark as the statement, socials bottom-left with the legal line in the
same mono register bottom-right. */
.foot3__top{ grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; }
.foot3__mark{ width:44px; height:auto; display:block; margin-bottom:20px; }
.foot3__h{ color:#8f8f97; }
.foot3__bottom .foot3__social{ margin-top:0; }
.foot3__social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.08); }
.foot3__social svg{ width:15px; height:15px; fill:#e8e8ea; }
.foot3__copy, .foot3__legal a{ font-size:13px; }
@media (max-width:900px){ .foot3__top{ grid-template-columns:1fr 1fr; } }
/* ---------- announcement bar (wai Checkout, Sep 2026) ----------
One line above the nav on every page. Black, 36px, the mark inverted,
one sentence, an arrow. html.has-annc moves the fixed nav down by the
bar's height and gives the body the same padding, so every page shifts
by exactly one bar and nothing else changes. Dismissed, the class comes
off and the page is as it was. */
.annc{ position:fixed; top:0; left:0; right:0; height:var(--annc-h,36px); z-index:60; background:#0a0a0a; color:#fff;
display:flex; align-items:center; justify-content:center; padding:0 48px 0 16px;
font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif; font-size:14px; letter-spacing:0.01em; }
.annc__a{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.annc__mark{ height:11px; width:auto; filter:invert(1); display:block; }
.annc__t{ opacity:.92; overflow:hidden; text-overflow:ellipsis; }
.annc__cta{ display:inline-flex; align-items:center; gap:6px; font-weight:500; margin-left:6px; }
.annc__cta svg{ width:14px; height:14px; transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.annc__a:hover .annc__cta svg{ transform:translateX(3px); }
.annc__x{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; background:none; border:0; color:#fff; opacity:.7; cursor:pointer; border-radius:6px; }
.annc__x:hover{ opacity:1; background:rgba(255,255,255,.12); }
.annc__x svg{ width:14px; height:14px; }
html:not(.has-annc) .annc{ display:none; }
html.has-annc body{ padding-top:var(--annc-h,36px); }
html.has-annc .nav{ top:var(--annc-h,36px); }
/* The mobile menu hangs from the nav (top:100%), and the nav is already moved
down by the bar, so the panel must not add the bar again: it left a gap
where taps fell through to the page, and pushed the last links below the
screen (25 Oct 2026). It is only shortened by the bar's height. */
html.has-annc .wm-panel{ max-height:calc(100dvh - 88px - var(--annc-h,36px)); }
@media (max-width:760px){
.annc{ font-size:13px; padding:0 40px 0 12px; }
.annc__t{ display:none; }
.annc__cta{ margin-left:2px; }
}
/* ---------------------------------------------------------------------------
TOUCH TARGETS, BEHIND pointer:coarse SO A MOUSE SEES NOTHING DIFFERENT.
Google's mobile guidance is 48 by 48 CSS pixels with 8px between adjacent
controls; Apple's Human Interface Guidelines say 44. Measured on a real
render at 390 and 360 with touch emulation, and scored by probing whether a
48px box centred on each control actually hits it, the announcement bar's
close was 28 by 28 and hit 0 of 4 probes, the announcement link is 16 tall,
and the nav's three links and the burger clear 44 but miss 48.
These grow the HIT AREA and not the drawn control. Making a small close
cross visually large would be a redesign of chrome that sits on every page,
which is a different decision needing a different conversation. Nothing
below changes a pixel of what is painted.
--------------------------------------------------------------------------- */
@media (pointer:coarse){
/* THE BAR AND THE NAV GROW, ON A FINGER ONLY. Sofian, 11 September, take the
last two as well. The bar was 36 tall and the nav links 44, so neither
could hold a 48px target however the hit area was drawn: a box cannot be
bigger than the chrome it sits in without overlapping the page.
--annc-h is read in four places, the bar's own height, the body's top
padding, the fixed nav's offset and the mobile panel's, so moving it moves
all four together. A mouse never enters this block and the desktop bar
stays at 36. */
:root{ --annc-h:48px; }
.nav__brand, .nav__login, .nav__cta, .wm-burger{ min-height:48px; }
/* NO position:relative HERE, and that line is why the close button was in
the wrong place. It was added so the 48px hit area below would have a
positioned ancestor to measure against — but the button is ALREADY
position:absolute, which is a positioned ancestor, and relative overwrote
it. The button fell out of the corner it was anchored to, back into the
flow after the link, and landed low and beside the arrow instead of on the
right edge (Sofian, 12 September). The hit area works exactly the same
against an absolutely positioned parent. */
.annc__x::after{ content:""; position:absolute; left:50%; top:50%;
width:48px; height:48px; transform:translate(-50%,-50%); }
/* The link carries overflow:hidden so its sentence can ellipsis, which also
clipped the hit area drawn over it, so it scored 2 of 4 however tall that
area was. Now the bar is 48 the link can simply fill it, and the text is
still centred because the link is already an inline-flex with
align-items:center. */
.annc__a{ min-height:48px; }
.nav__brand, .nav__login, .nav__cta, .wm-burger{ position:relative; }
.nav__brand::after, .nav__login::after, .nav__cta::after, .wm-burger::after{
content:""; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:48px; min-width:48px; }
}
/* --- Homepage blog preview: pill-filtered grid (id="blog"). Reuses .blg-card
(defined above, ~line 1616) for the card anatomy, but overrides its 16px
radius and hover shadow -- CLAUDE.md's house doctrine keeps cards flat with
a hairline, 2px radius, no resting/hover shadow. Distinct classnames from
the /insights page's own .blg-pill/.blg-row (reverted to their original
999px-radius/black-active styling, kept separate on purpose). .bcard
stays as a second class on each card purely to keep the existing
generic scroll-reveal selector in index-script-1.js firing -- it carries
no visual rules of its own now. --- */
.hblg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.hblg-pill{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:14px;letter-spacing:0.01em;padding:8px 16px;border:1px solid rgba(15,14,13,.18);border-radius:6px;background:#fff;color:#0f0e0d;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hblg-pill.is-on{background:#0A3143;color:#fff;border-color:#0A3143}
.hblg-pill:hover:not(.is-on){border-color:#0A3143}
.hblg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hblg-card{border-radius:2px}
.hblg-card:hover{box-shadow:none;transform:translateY(-2px)}
.hblg-card.is-hidden{display:none}
@media (max-width:980px){ .hblg-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .hblg-grid{grid-template-columns:1fr} }
/* --- /insights bento preview (Figma 1904-3333), restored from the homepage's
original blog section. Sits between the pill header and the article list,
using the same asymmetric photo/hero/small card grid and the same
/assets/blog-*.jpg placeholder images -- unrelated to .hblg-*/.blg-pill
above, which belong to the pill-filtered sections. --- */
.ibento{background:#fff}
.ibento.is-hidden{display:none}
/* Two equal-height rows; row 2's second cell splits into a narrow pair.
Every card (.bcard--eq) shares one height regardless of column width, so
the grid reads as a clean 2-row layout rather than a masonry stack. */
.ibento__grid{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.ibento__gridrow{display:flex;gap:16px}
.ibento__gridrow>*{flex:1;min-width:0}
.ibento__pair{display:flex;gap:16px;flex:1;min-width:0}
.ibento__pair>*{flex:1;min-width:0}
.bcard{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:#f2f2f2;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.bcard:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(15,14,13,.32)}
.bcard:hover .bcard__media{transform:scale(1.06)}
.bcard--eq{height:360px;padding:20px}
.bcard__media{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;background:#e5e5e5;background-size:cover;background-position:center;transition:transform .5s var(--ease)}
.btag{display:inline-flex;align-items:center;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:400;font-size:12px;letter-spacing:.02em;text-transform:none;color:#262626;white-space:nowrap}
/* Solid chip, not a text-shadow -- reads consistently regardless of what's
behind it, unlike the old white-text-shadow approach which was legible on
some images and not others. */
.btag--over{position:absolute;top:16px;left:18px;z-index:2;color:#fff;background:rgba(15,14,13,.55);padding:4px 10px;border-radius:4px}
.bcard__title{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-weight:500;font-size:clamp(16px,1.6vw,21px);line-height:1.3;letter-spacing:-0.018em;color:#101010;margin-top:14px}
@media (max-width:980px){ .ibento__gridrow{flex-direction:column} .ibento__pair{flex-direction:column} }
/* Command-palette search modal, triggered by .blg__search or Cmd/Ctrl+K
(see insights-filter.js). A real float, so it's the one place on this
page allowed a resting shadow -- everything else on the site stays flat. */
.searchModal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(20,20,18,.5)}
.searchModal.is-open{display:flex}
body.search-modal-open{overflow:hidden}
.searchModal__panel{width:min(680px,92vw);max-height:70vh;display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 40px 80px -20px rgba(0,0,0,.35);overflow:hidden}
.searchModal__inputrow{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(15,14,13,.1);flex:none}
.searchModal__inputrow svg{width:18px;height:18px;color:#0f0e0d;flex:none}
.searchModal__inputrow input{flex:1;border:none;outline:none;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:17px;color:#0f0e0d}
.searchModal__inputrow input::placeholder{color:#a5a29d}
.searchModal__esc{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:11px;letter-spacing:.04em;color:#767370;border:1px solid rgba(15,14,13,.18);border-radius:6px;padding:3px 8px;cursor:pointer;flex:none}
.searchModal__list{overflow-y:auto;padding:8px 0}
.searchModal__label{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a5a29d;padding:10px 20px 6px}
.searchModal__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;text-decoration:none;color:inherit}
.searchModal__item.is-active,.searchModal__item:hover{background:#f5f4f2}
.searchModal__item.is-hidden,.searchModal__item.is-more{display:none}
.searchModal__title{display:block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:16px;color:#0f0e0d}
.searchModal__cat{display:block;font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#a5a29d;margin-top:2px}
.searchModal__date{font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:12px;letter-spacing:.04em;color:#a5a29d;white-space:nowrap;flex:none}
.searchModal__empty{padding:24px 20px;color:#767370;font-size:14px}
.searchModal__empty.is-hidden{display:none}
.searchModal__footer{display:flex;align-items:center;gap:20px;padding:12px 20px;border-top:1px solid rgba(15,14,13,.1);font-family:'KMR Waldenburg', -apple-system, system-ui, sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#767370;flex:none}
.searchModal__hint{margin-left:auto}
.searchModal__key{display:inline-block;margin-right:4px}
@media (max-width:620px){ .searchModal{padding-top:6vh} .searchModal__footer{flex-wrap:wrap;gap:8px 20px} }
/* ================= the nav logo, shimmering at last (Omar, 15 Oct 2026) =================
The wmShimmer2 sweep above was clipped to text, but the logo is an ![]()
,
so it never showed. The logo now draws through its own shape: the anchor
is masked by the logo file and painted with the sweep, and the ![]()
stays
for its alt text and size, invisible. Same light as the request headline. */
.nav__brand{
-webkit-mask-image:url(/assets/brand/wai-black.png); mask-image:url(/assets/brand/wai-black.png);
-webkit-mask-size:auto 13px; mask-size:auto 13px;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:left center; mask-position:left center;
-webkit-background-clip:border-box; background-clip:border-box;
}
.nav__brand img{ opacity:0; }
@media (prefers-reduced-motion:reduce){
.nav__brand{ animation:none; background:#0a0a0a; }
.nav--dark .nav__brand{ background:#fff; }
}
/* Craft, 31 Oct 2026, the boutique standard carried to wai.
A keyboard user sees where they are on every primary action, and a reader
who has asked their system for less motion gets the page at rest: the
reveals arrive in place and the button fill does not slide. */
.fbtn:focus-visible{ outline:2px solid #111; outline-offset:3px; }
.ghostbtn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
.sp-rv{ opacity:1; transform:none; transition:none; }
.fbtn::before, .fbtn__label{ transition:none !important; }
.fbtn.hv-in .fbtn__label{ transform:none; }
}
/* Wai motion, 8 Nov 2026. Scale's nav: the item under the pointer holds its
colour and the others fall to grey. The mark and product names carry a
slow brand sweep. */
.nav__links:hover .nav__link,.nav__links:focus-within .nav__link{ color:#a2a2a2; }
.nav__links:hover .nav__item .nav__link:hover,.nav__links .nav__item .nav__link:focus-visible{ color:#000; }
.nav--dark .nav__links:hover .nav__link{ color:rgba(255,255,255,.5); }
.nav--dark .nav__links:hover .nav__item .nav__link:hover{ color:#fff; }
@keyframes waiSweep{ 0%,62%{ background-position:110% 0; } 100%{ background-position:-40% 0; } }
.brand{ background:linear-gradient(100deg,currentColor 0%,currentColor 43%,#5f9a83 48%,#8379a8 52%,currentColor 57%,currentColor 100%); background-size:280% 100%; background-position:110% 0; animation:waiSweep 7s ease-in-out infinite; }
.nav__link span,.mega__link{ background-image:linear-gradient(100deg,currentColor 0%,currentColor 43%,#5f9a83 48%,#8379a8 52%,currentColor 57%,currentColor 100%); background-size:280% 100%; background-position:110% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav__link span{ animation:waiSweep 7s ease-in-out infinite; }
.nav__item:nth-child(2) .nav__link span{ animation-delay:.12s; } .nav__item:nth-child(3) .nav__link span{ animation-delay:.24s; } .nav__item:nth-child(4) .nav__link span{ animation-delay:.36s; } .nav__item:nth-child(5) .nav__link span{ animation-delay:.48s; }
.mega__link:hover{ animation:waiSweep 1.1s ease-out 1; }
@keyframes megaIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.megamenu.is-open .mega__group{ animation:megaIn .38s ease both; }
.megamenu.is-open .mega__group:nth-child(2){ animation-delay:.08s; } .megamenu.is-open .mega__group:nth-child(3){ animation-delay:.16s; }
.megamenu.is-open .mega__media{ animation:megaIn .5s ease .18s both; }
@media (prefers-reduced-motion:reduce){ .brand,.nav__link span,.mega__link,.megamenu.is-open .mega__group,.megamenu.is-open .mega__media{ animation:none; } }
/* One voice (Omar, 8 November 2026). A heading and the line after it read as a
single statement, grey into black, never a title with a smaller subtitle. */
body .sp-row__h:has(+ .sp-row__p),body .prc__h:has(+ .prc__lead),body .ckx__h:has(+ .ckx__lead),body .ckx-claim__h:has(+ .ckx-claim__p),body .wf-h2:has(+ .wf-lead){display:inline;font-size:clamp(18px,1.45vw,21px);line-height:1.42;letter-spacing:-.008em;font-weight:400;color:#716F6C;margin:0;max-width:none}
body .sp-row__h:has(+ .sp-row__p)::after,body .prc__h:has(+ .prc__lead)::after,body .ckx__h:has(+ .ckx__lead)::after,body .ckx-claim__h:has(+ .ckx-claim__p)::after,body .wf-h2:has(+ .wf-lead)::after{content:" "}
body .sp-row__h + .sp-row__p,body .prc__h + .prc__lead,body .ckx__h + .ckx__lead,body .ckx-claim__h + .ckx-claim__p,body .wf-h2 + .wf-lead{display:inline;font-size:clamp(18px,1.45vw,21px);line-height:1.42;letter-spacing:-.008em;color:#111;margin:0;max-width:none}
body .sp-row__p + .sp-row__list,body .sp-row__p + .sp-row__cta,body .sp-row__p ~ .fbtn{margin-top:32px}
/* Clinician Plus: the top plan, in silver on black. */
.tier--plus{position:relative;overflow:hidden;background:#0D0E10;border-radius:14px;padding:clamp(28px,2.6vw,44px)!important;margin-top:calc(-1 * clamp(28px,2.6vw,44px));color:#fff}
.tier--plus .tier__name,.tier--plus .tier__desc,.tier--plus .tier__list li{color:#fff}
.tier--plus .tier__per{color:#A3A19D}
.tier--plus .tier__list,.tier--plus .tier__list li{border-color:rgba(255,255,255,.14)}
.tier__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tier__plus{display:inline-block;margin-left:3px;font-size:1.45em;line-height:1;vertical-align:-.08em}
.tier--plus .tier__plus,.tier--plus .tier__price{background:linear-gradient(105deg,#fff 38%,#8D8F93 50%,#fff 62%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tier--plus .tier__per{-webkit-text-fill-color:#A3A19D}
.tier--plus::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);background-size:260% 100%;background-position:130% 0}
@media (prefers-reduced-motion:no-preference){
.tier--plus .tier__plus,.tier--plus .tier__price{animation:plusShine 5.5s cubic-bezier(.4,0,.2,1) infinite}
.tier--plus::before{animation:plusSweep 5.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes plusShine{0%,55%{background-position:100% 0}100%{background-position:-60% 0}}
@keyframes plusSweep{0%,55%{background-position:130% 0}100%{background-position:-40% 0}}
}
@media(max-width:900px){.tier--plus{margin-top:24px}}
/* The hero is a headline and one action. The answer sits beneath it, quietly. */
.sp3-after{padding:clamp(40px,5vw,72px) 0 0;background:#fff}
.sp3-after p{margin:0;max-width:44em;font-size:18px;line-height:1.55;letter-spacing:-.003em;color:#716F6C}
.sp-row__cta{color:#111!important}
.sp-row__cta:hover{color:#716F6C!important}
.sp-row__list li{font-size:15px}
/* Restraint on the long-form pages: no headline louder than the heroes. */
body .wf-h1{font-size:clamp(34px,4vw,62px);line-height:1.08;letter-spacing:-.025em}
body .wf-h2{font-size:clamp(26px,2.7vw,40px);line-height:1.14}
/* Text heroes: one statement, grey into black, never a title over a paragraph. */
body .wf-h1:has(+ .wf-lead),body .rh__h:has(+ .rh__l),body h1:has(+ .pg__sub),body h1:has(+ .bd__sub){display:inline;font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.02em;font-weight:400;color:#716F6C;margin:0;max-width:none}
body .wf-h1:has(+ .wf-lead)::after,body .rh__h:has(+ .rh__l)::after,body h1:has(+ .pg__sub)::after,body h1:has(+ .bd__sub)::after{content:" "}
body .wf-h1 + .wf-lead,body .rh__h + .rh__l,body h1 + .pg__sub,body h1 + .bd__sub{display:inline;font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.02em;color:#111;margin:0;max-width:none}
.wf-one{max-width:34em}
.wf-hero__row{margin-top:32px;justify-content:flex-start}
/* Plan rows, shared by Pricing and For Clinicians */
.plans{ padding:16px clamp(8px,1vw,16px); background:#fff; }
.plans__in{ background:#0D0E10; border-radius:14px; padding:clamp(64px,8vw,128px) clamp(24px,6vw,96px); color:#fff; }
.plans .prc__h{ color:#fff; max-width:22em; margin:0 0 clamp(56px,7vw,104px); }
.plans .g{ color:#8D8F93; }
.plan{ border-top:1px solid rgba(255,255,255,.16); }
.plan:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.plan__row{ display:grid; grid-template-columns:1fr auto 44px; gap:clamp(20px,3vw,48px); align-items:center; padding:clamp(24px,2.6vw,36px) 0; cursor:pointer; list-style:none; transition:opacity .25s ease; }
.plan__row::-webkit-details-marker{ display:none; }
.plans__list:hover .plan__row{ opacity:.45; }
.plans__list .plan__row:hover{ opacity:1; }
.plan__n, .plan__p{ font-weight:400; font-size:clamp(26px,2.9vw,42px); letter-spacing:-.022em; color:#fff; font-variant-numeric:tabular-nums lining-nums; }
.plan__row .arw{ color:#fff; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.plan[open] .plan__row .arw{ transform:rotate(90deg); }
.plan__more{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); padding:clamp(8px,1vw,16px) 0 clamp(48px,5vw,72px); }
.plan__s{ margin:0; max-width:22em; font-size:21px; line-height:28px; letter-spacing:0; color:#fff; }
.plan__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.plan__list{ list-style:none; margin:0; padding:0; }
.plan__list li{ padding:14px 0; border-top:1px solid rgba(255,255,255,.12); font-size:16px; line-height:24px; letter-spacing:0; color:#fff; }
.plan__list li:first-child{ border-top:0; padding-top:4px; }
.plan__list a{ color:#fff; }
.plan--plus .tier__plus, .plan--plus .plan__p{ background:linear-gradient(105deg,#fff 38%,#8D8F93 50%,#fff 62%); background-size:260% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media (prefers-reduced-motion:no-preference){ .plan--plus .tier__plus, .plan--plus .plan__p{ animation:plusShine 5.5s cubic-bezier(.4,0,.2,1) infinite; } }
@media (max-width:800px){ .plan__more{ grid-template-columns:1fr; } .plan__row{ grid-template-columns:1fr auto 44px; } .plan__n, .plan__p{ font-size:24px; } }
.plans__note{margin:40px 0 0;max-width:44em;font-size:14px;line-height:20px;color:#8D8F93}
.plans__note a{color:#fff}
.wf-one{margin-top:24px}
.sp-row__p+.sp-row__cta{display:block;width:max-content;margin-top:24px}
body .rh__more{margin:24px 0 0;max-width:44em;font-size:18px;line-height:1.55;letter-spacing:-.003em;color:#716F6C}
body .intro__p,body .stmt{font-size:clamp(24px,2.4vw,36px);line-height:1.25}
@media(max-width:700px){body .hpos1__p{box-sizing:border-box;width:100%;max-width:100%;overflow-wrap:break-word}body .hpos1{max-width:100%;box-sizing:border-box}}
.rh-about{padding:clamp(40px,5vw,72px) 0;background:#fff}
.rh-about .rh__more{margin:0;color:#A3A19D;font-size:15px}
body .intro__p,body .stmt{font-size:clamp(24px,2.4vw,36px)!important;line-height:1.25!important}