/* Round four. Glass bar, clean metal buttons, light demos, the white form. Loaded after x.css. */
:root{--paper:#fff;--paper2:#F4F6F8;--ink:#01101A;--ink2:#46586A;--ink3:#566976;--hair:rgb(1 16 26/.1);--ease:cubic-bezier(.23,1,.32,1)}

/* The glass bar: floats and frames itself once you scroll, as on Diced */
.navbar{top:0;left:50%;right:auto;transform:translateX(-50%);width:min(1180px,100%);padding:12px 18px;border-radius:0 0 14px 14px;transition:background-color .25s,box-shadow .25s,top .25s,width .25s,border-radius .25s,padding .25s}
.navbar.solid{top:10px;width:min(1040px,calc(100vw - 20px));padding:7px 8px 7px 16px;border-radius:14px;background:rgb(10 24 32/.58);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px rgb(232 238 242/.14),0 12px 30px -14px rgb(0 0 0/.7)}
.navbar.solid .brand{width:118px}.navbar .brand{transition:width .25s}

/* Buttons: brushed metal, one quiet sheen on hover, no glow, no spin */
.btn-core{position:relative;overflow:hidden;color:#01101A;font-weight:600;background:linear-gradient(180deg,#FBFCFD 0%,#DDE5EA 46%,#C6D2DA 54%,#E9EEF1 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(1 16 26/.18),0 0 0 1px rgb(1 16 26/.16),0 1px 2px rgb(0 0 0/.3);transition:transform .16s var(--ease),filter .16s}
.btn-core::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.75) 50%,transparent 65%);transform:translateX(-120%)}
@media (hover:hover) and (pointer:fine){.btn-core:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}.ax:hover,.wax:hover{background:rgb(1 16 26/.06)}}.btn-core:active{transform:scale(.97)}
.navbar .btn-core{height:40px;padding:0 16px;font-size:14.5px}
.btn-ghost{transition:background-color .16s,transform .16s var(--ease)}.btn-ghost:active{transform:scale(.97)}
.hm{margin-top:12px!important;font-size:14.5px!important;color:#C9D6DE!important;max-width:none!important}

/* The window under the hero, light on the dark sea */
.stage .win,.bt .win{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgb(1 16 26/.1),0 40px 80px -30px rgb(0 0 0/.85)}
.pane{min-height:0;display:block}.pane>*{display:block}
.bt .tabs{gap:clamp(10px,2.4vw,28px)}
.ptab{color:#fff;opacity:.72}.ptab[aria-selected=true]{opacity:1}
.tr,.fl,.th3{position:relative;transform-origin:0 0;background:var(--paper);color:var(--ink);font:400 14px/1.4 var(--sans);overflow:hidden}
.tr-bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--paper2);box-shadow:inset 0 -1px 0 var(--hair)}.tr-bar>i{width:11px;height:11px;border-radius:50%;background:#D5DCE1}.tr-bar span{margin-left:10px;padding:3px 12px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--hair);font-size:13px;color:var(--ink2)}.tr-bar em{margin-left:auto;font-style:normal;font-size:13px;color:var(--ink3)}

/* Platform tour */
.tr-b{position:absolute;inset:40px 0 0;display:grid;grid-template-columns:84px minmax(0,1fr)}
.tr-rail{padding:10px 8px;display:grid;gap:4px;align-content:start;box-shadow:inset -1px 0 0 var(--hair);background:var(--paper2)}.tr-i{display:grid;justify-items:center;gap:3px;padding:8px 2px;border-radius:9px;color:var(--ink2);font-size:12.5px;transition:background-color .2s,color .2s}.tr-i svg{width:19px;height:19px}.tr-i.on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--hair)}.tr-i.hit,.tr-r.hit{background:rgb(14 58 82/.12)}
.tr-main{position:relative;overflow:hidden;background:#EDF1F4}.tr-map{position:absolute;inset:-46px -40px -40px -96px}.tr-map video{width:100%;height:100%;object-fit:cover}
.tr-kpi{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;gap:0;padding:8px 6px;border-radius:12px;background:rgb(255 255 255/.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--hair),0 8px 20px -12px rgb(1 16 26/.3)}.tr-kpi>div{padding:0 16px;box-shadow:inset -1px 0 0 var(--hair)}.tr-kpi>div:last-child{box-shadow:none}.tr-kpi small{display:block;font-size:12px;color:var(--ink2)}.tr-kpi b{font-size:22px;font-weight:600;letter-spacing:-.02em}.tr-kpi .g{color:#0F7A5A}.tr-kpi .r{color:#C43A2E}
.tr-feed{position:absolute;left:14px;bottom:14px;display:grid;gap:4px;font-size:13px}.tr-feed div{padding:5px 10px;border-radius:8px;background:rgb(255 255 255/.86);box-shadow:0 0 0 1px var(--hair);animation:ti .36s var(--ease)}@keyframes ti{from{opacity:0;transform:translateY(6px)}}
.tr-col{position:absolute;top:0;bottom:0;left:0;width:330px;background:#fff;box-shadow:1px 0 0 var(--hair),10px 0 30px -18px rgb(1 16 26/.3);overflow:hidden}.tr-col.dcol{left:330px;width:310px}.tr-col.in{animation:cl .34s var(--ease)}@keyframes cl{from{opacity:0;transform:translateX(-14px)}}.tr-col.dcol.in{animation-duration:.4s}
.tr-col header{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;box-shadow:inset 0 -1px 0 var(--hair)}.tr-col header b{font-size:16px;font-weight:600;letter-spacing:-.01em}.tr-col header span{font-size:13px;color:var(--ink3)}
.tr-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 14px;box-shadow:inset 0 -1px 0 var(--hair);transition:background-color .2s}.tr-r.on{background:var(--paper2)}.tr-r b{display:block;font-weight:500}.tr-r small{font-size:13px;color:var(--ink2)}.tr-r span{font-size:13px;color:var(--ink2)}.tr-r em{grid-column:1/-1;justify-self:start}
.tr-col em,.fl em,.th3 em{font-style:normal;font-size:12.5px;font-weight:500;padding:2px 9px;border-radius:999px;background:#EEF1F3;color:var(--ink2)}.tr-col em.m,.fl em.m,.th3 em.m{background:#E6F7F0;color:#0B6B4F}.tr-col em.r{background:#FCEBE8;color:#B53325}.tr-col em.g{background:#EEF1F3}.th3 em.b{background:#EAF1FF;color:#1F5FD0}
.tr-col dl{margin:0;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;box-shadow:inset 0 -1px 0 var(--hair)}.tr-col dt{color:var(--ink3)}.tr-col dd{margin:0;font-weight:500}.tr-tx{padding:12px 14px;display:grid;gap:8px;font-size:13.5px;color:var(--ink2)}.tr-tx b{color:var(--ink);font-weight:500;margin-right:4px}
.tr-bars{padding:12px 14px;display:grid;gap:10px}.tr-bars span{display:block;font-size:13px;color:var(--ink2);margin-bottom:3px}.tr-bars i{display:block;height:6px;border-radius:3px;width:var(--w);background:#0E3A52;animation:gw .7s var(--ease)}@keyframes gw{from{width:0}}
.tr-st{margin:0;padding:12px 14px 12px 34px;display:grid;gap:9px;list-style:decimal}.tr-st li{padding-left:4px}.tr-st li::marker{color:var(--ink3);font-variant-numeric:tabular-nums}
.tr-cur{position:absolute;left:0;top:0;width:20px;height:20px;opacity:0;z-index:5;transition:transform .78s cubic-bezier(.65,0,.2,1),opacity .2s}

/* The flow */
.fl{background-image:radial-gradient(rgb(1 16 26/.1) 1px,transparent 1px);background-size:18px 18px}.fl svg{position:absolute;left:0;top:40px;width:1120px;height:500px;overflow:visible}.fl-n{position:absolute;transform:translate(-50%,-50%);padding:6px 11px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.16);font-size:13.5px;white-space:nowrap}.fl-h{position:absolute;transform:translate(-50%,-50%);padding:7px 14px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.3);font-weight:600}
.fl-box{position:absolute;left:452px;top:266px;width:188px;height:72px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgb(1 16 26/.3),0 8px 18px -10px rgb(1 16 26/.3);letter-spacing:.14em;font-size:14px}.fl-box b{font-weight:600}.fl-box>span{width:24px;height:24px}.fl-box svg{position:static;width:12px;height:12px}.fl-box>span svg{width:24px;height:24px}
.fl-halo{animation:fh 3.2s ease-in-out infinite;transform-origin:546px 262px}@keyframes fh{50%{transform:scale(1.05);stroke-opacity:.05}}
.fl-stack{position:absolute;left:790px;top:136px;width:270px;height:300px}.fl-stack>i{position:absolute;inset:0;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgb(1 16 26/.1)}.fl-stack>i:nth-child(1){transform:translate(22px,-20px)}.fl-stack>i:nth-child(2){transform:translate(11px,-10px)}
.fl-card{position:absolute;inset:0;padding:16px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgb(1 16 26/.2);transition:opacity .3s,transform .4s var(--ease)}.fl-card.out{opacity:0;transform:translate(16px,-14px)}.fl-card.back{opacity:0;transform:translateY(8px);transition:none}.fl-card header{display:flex;justify-content:space-between;align-items:center}.fl-card small{font:500 12px var(--mono);color:var(--ink3)}.fl-card>b{display:block;margin-top:14px;font-size:22px;font-weight:600;letter-spacing:-.02em}.fl-card>b i{display:inline-block;width:64px;height:8px;border-radius:4px;background:#E1E6EA;vertical-align:2px}.fl-card>p{color:var(--ink2)}.fl-card dl{margin:16px 0 0;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center}.fl-card dt{color:var(--ink3)}.fl-card dd{margin:0;font-weight:500}.fl-card dd i{display:block;height:8px;border-radius:4px;background:#E1E6EA}
.fl-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink3)}

/* Three steps */
.th3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:14px;gap:0}.th3 article{padding:10px;box-shadow:inset -1px 0 0 var(--hair);text-align:center}.th3 article:last-child{box-shadow:none}.th3 .pn{height:412px;border-radius:8px;background:var(--paper2) radial-gradient(rgb(1 16 26/.1) 1px,transparent 1px) 0 0/14px 14px;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:left}
.th3 .box{background:#fff;border-radius:10px;box-shadow:0 0 0 1px rgb(1 16 26/.12),0 8px 20px -14px rgb(1 16 26/.3);padding:14px}.th3 .box.pad0{padding:0}.th3 .box>p{min-height:68px;font-size:15px;line-height:1.4}.th3 .box footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.th3 small{font-size:12.5px;color:var(--ink3)}.go{padding:6px 11px;border-radius:7px;background:#EEF1F3;color:var(--ink2);font-size:13px;font-weight:600;transition:background-color .2s,color .2s}.go.on{background:#01101A;color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{padding:3px 9px;border-radius:999px;background:#E9F0F5;color:#0E3A52;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .3s var(--ease)}.tags span.in{opacity:1;transform:none}
.th3 .box>header{display:flex;justify-content:space-between;align-items:center}.th3 .box.pad0>header{padding:11px 13px;box-shadow:inset 0 -1px 0 var(--hair)}.th3 .box header span{font-size:13px;color:var(--ink3)}.rows>div{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;box-shadow:inset 0 -1px 0 var(--hair)}.rows>div:last-child{box-shadow:none}.rows b,.th3 .box>header b{font-weight:600}.rows b i,.th3 header b i{display:inline-block;width:38px;height:7px;border-radius:4px;background:#E1E6EA;vertical-align:1px}.rows small{display:block}
.th3 .sb{display:block;margin-top:2px}.th3 dl{margin:12px 0 0;padding-top:12px;box-shadow:inset 0 1px 0 var(--hair);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;font-size:14px}.th3 dt{color:var(--ink3)}.th3 dd{margin:0;font-weight:500}.th3 dd i{display:block;height:8px;border-radius:4px;background:#E1E6EA}.th3 dd span{animation:ti .3s var(--ease);display:block}
.cta3{align-self:center;padding:9px 16px;border-radius:9px;background:#EEF1F3;color:var(--ink3);font-weight:600;font-size:14px;transition:background-color .25s,color .25s}.cta3.in{background:#01101A;color:#fff}.tiny{text-align:center}
.th3 .no{display:block;margin-top:14px;font-family:var(--mono)}.th3 h4{margin:2px 0 0;font-size:17px;font-weight:600;letter-spacing:-.015em}.th3 article>p{margin:4px auto 0;max-width:30ch;color:var(--ink2);font-size:14.5px}
[data-narrow="1"] .th3{grid-template-columns:minmax(0,1fr);width:373px!important;padding:6px}[data-narrow="1"] .th3 article{box-shadow:none;padding:6px}[data-narrow="1"] .th3 article.off{display:none}

/* Scroll demos on light. The call stays dark. Compare with ?demos=dark */
body.demo-light .paint .w:not(.vc){background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgb(1 16 26/.1),0 30px 60px -24px rgb(0 0 0/.6);--line:var(--hair)}
body.demo-light .paint .w:not(.vc) .w-h{box-shadow:inset 0 -1px 0 var(--hair)}body.demo-light .paint .w:not(.vc) .w-h span{color:var(--ink2)}body.demo-light .paint .w:not(.vc) .note{color:var(--ink3)}
body.demo-light .paint .w:not(.vc) .pill{background:#EEF1F3;color:var(--ink2)!important}body.demo-light .paint .w:not(.vc) .pill.mint{background:#E6F7F0;color:#0B6B4F!important}body.demo-light .paint .w:not(.vc) .pill.tide{background:#E5EEF3;color:#0E3A52!important}body.demo-light .paint .w:not(.vc) .live{color:#0B6B4F!important}
body.demo-light .paint .w:not(.vc) .lr{box-shadow:inset 0 -1px 0 var(--hair)}body.demo-light .paint .w:not(.vc) .lr span{color:var(--ink2)}body.demo-light .paint .w:not(.vc) .lr .t{color:var(--ink)}
body.demo-light .paint .w:not(.vc) .m.us{background:#EEF1F3}body.demo-light .paint .w:not(.vc) .m.me{background:#0E3A52;color:#fff}body.demo-light .paint .w:not(.vc) .steps{box-shadow:inset 0 1px 0 var(--hair)}body.demo-light .paint .w:not(.vc) .steps span{background:#EEF1F3;color:var(--ink2)}body.demo-light .paint .w:not(.vc) .steps .on{background:#E6F7F0;color:#0B6B4F}
body.demo-light .paint .w:not(.vc) .cal small{color:var(--ink3)}body.demo-light .paint .w:not(.vc) .cal span{background:#F1F4F6;color:var(--ink3)}body.demo-light .paint .w:not(.vc) .cal .bk{background:#E5EEF3;color:#0E3A52}body.demo-light .paint .w:not(.vc) .cal .new{background:#0E3A52;color:#fff}
/* The arrivals board: narrow letters, one line per consult */
.fb{gap:0;padding:4px 14px 10px}.fr{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:9px 0;box-shadow:inset 0 -1px 0 var(--line)}.fr:last-child{box-shadow:none}.fr .dim{display:none}.fs{grid-column:auto;gap:1.5px;justify-content:flex-end}.fs i{flex:0 0 13px;height:21px;font-size:11.5px;letter-spacing:0;background:#14222C;color:#E8EEF2}
body.demo-light .paint .w:not(.vc) .fr{box-shadow:inset 0 -1px 0 var(--hair)}body.demo-light .paint .w:not(.vc) .fs i{background:#0E3A52;color:#fff}body.demo-light .paint .w:not(.vc) .fs i::after{background:rgb(255 255 255/.22)}

/* The form: white, a real form */
.form{background:#fff;color:var(--ink);padding:22px;gap:13px;border-radius:14px}
.form .top b{color:var(--ink)}.form .top span{background:#E6EBEF}.form .top i{background:#0E3A52}
.form label{color:var(--ink);gap:5px}.form input,.form textarea{height:46px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgb(1 16 26/.2);transition:box-shadow .15s}.form input::placeholder{color:var(--ink3)}.form input:focus{box-shadow:inset 0 0 0 1.5px #0E3A52,0 0 0 3px rgb(14 58 82/.14)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ch legend{color:var(--ink)}.ch button{color:var(--ink2);box-shadow:inset 0 0 0 1px rgb(1 16 26/.18)}.ch button[aria-pressed=true]{background:#0E3A52;color:#fff}
.fbtn{color:#01101A;background:linear-gradient(180deg,#FBFCFD 0%,#DDE5EA 46%,#C6D2DA 54%,#E9EEF1 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(1 16 26/.18),0 0 0 1px rgb(1 16 26/.2),0 1px 2px rgb(0 0 0/.2);min-width:130px}.fback{color:var(--ink2)}.err{color:#B53325}.fnote{color:var(--ink3)}.frec{color:var(--ink2)}.frec b{color:var(--ink)}
.fcal .mth small{color:var(--ink3)}.fcal .mth span{color:#B3BEC6}.fcal .mth button{color:var(--ink);background:#EEF1F3}.fcal button.on{background:#0E3A52!important;color:#fff!important}.fcal .tms button{box-shadow:inset 0 0 0 1px rgb(1 16 26/.18);color:var(--ink)}.fdone p{color:var(--ink2)}.fok{background:#E6F7F0;color:#0B6B4F}
dialog.aud{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgb(1 16 26/.1),0 40px 80px -20px #000;transform-origin:50% 60%;animation:ad .22s var(--ease)}@keyframes ad{from{opacity:0;transform:scale(.96)}}dialog.aud>p{color:var(--ink2)}.ax{color:var(--ink2)}.ax:hover{background:#F2F5F7}

/* Logo band */
.logos{padding:clamp(150px,13vw,190px) 0 clamp(26px,3vw,38px);margin-top:calc(-1*clamp(90px,9vw,130px));background:#E8EEF2;color:var(--ink);text-align:center;overflow:hidden}.logos.tight{padding-top:clamp(20px,3vw,30px);margin-top:0}.logos p{font-size:15px;font-weight:500;color:var(--ink2)}.logos p b{color:var(--ink);font-weight:600}
.lb{display:flex;width:max-content;margin-top:16px;animation:lb var(--lt,70s) linear infinite}.lb:hover{animation-play-state:paused}.lb>div{display:flex;align-items:center;gap:clamp(36px,4.6vw,64px);padding-right:clamp(36px,4.6vw,64px)}.lb img{height:30px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.62}.lbw{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}@keyframes lb{to{transform:translateX(-50%)}}

/* WhatsApp popup: the page's look, their green */
.wa{cursor:pointer;border:0}.wap{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:82px;z-index:85;width:min(340px,calc(100vw - 32px));padding:14px;border-radius:16px;background:#0A1219;color:var(--fg);box-shadow:0 0 0 1px var(--line2),0 30px 60px -20px #000;display:grid;gap:12px;opacity:0;transform:translateY(10px) scale(.96);transform-origin:100% 100%;transition:opacity .18s,transform .24s var(--ease)}.wap.in{opacity:1;transform:none}.wap header{display:grid;grid-template-columns:34px minmax(0,1fr) 36px;gap:10px;align-items:center}.wap header>span{width:34px;height:34px;padding:8px;border-radius:10px;background:rgb(232 238 242/.09)}.wap header b{display:block;font-weight:600}.wap header small{color:var(--soft);font-size:13.5px}.wax{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:var(--soft)}.wax:hover{background:rgb(232 238 242/.08)}.wax svg{width:15px;height:15px}
.wap label{display:grid;gap:5px;font-size:13.5px;color:var(--soft)}.wap textarea{resize:none;padding:10px 12px;border:0;border-radius:10px;font:inherit;font-size:16px;line-height:1.4;background:#05090D;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}.wap textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px #8FA6B4}.wasend{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;background:#25D366;color:#04210F;font-weight:600;transition:transform .16s var(--ease)}.wasend:active{transform:scale(.97)}.wasend svg{width:19px;height:19px}

/* Map */
.nm svg g,.nm svg g:focus,.nm-dept:focus{outline:none}.mapl .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.mapl .seg button{height:38px;padding:0 10px;text-align:left}
.pick .pl{margin:0}.pick .pk-r{margin-top:12px;display:grid;gap:8px}.pick .pk-r div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;font-size:14.5px}.pick .pk-r small{margin:0;font-size:13.5px;color:var(--dim)}.pick .pk-r span{color:var(--fg)}

/* Footer: the name drifts, then fades into the bottom of the page */
.foot{padding-bottom:0}.legal{margin-top:clamp(22px,3vw,34px)}#dots{margin-top:clamp(16px,2vw,24px);-webkit-mask-image:linear-gradient(#000 22%,transparent 96%);mask-image:linear-gradient(#000 22%,transparent 96%)}
.review{bottom:12px;padding:3px;font-size:12.5px;opacity:.92}.review a{height:27px;padding:0 9px}
.bhero.big h1{letter-spacing:-.042em}.bhero.dk .bh-art{background-image:url(art/above.jpg);background-position:50% 34%}
.ch{transition:none}:focus-visible{outline-color:#5E93AD}
@media (max-width:860px){.navbar{padding:10px 12px}.navbar.solid{padding:6px 6px 6px 12px}.navbar.solid .brand{width:104px}.frow{grid-template-columns:minmax(0,1fr)}.lb img{height:24px}.tr-col{width:300px}.tr-col.dcol{left:0;width:100%;z-index:2}}
@media (prefers-reduced-motion:reduce){.lb{animation:none}}
.pick b{color:var(--fg)}.hint{margin-top:10px!important;font-size:13.5px!important;color:var(--dim)!important}

/* Flow sits in the middle of its window */
.fl svg,.fl-n,.fl-h,.fl-box,.fl-stack{translate:0 34px}
.fl-card{will-change:opacity}
.btn-core:focus-visible,.fbtn:focus-visible,.btn-ghost:focus-visible{outline:2px solid #5E93AD;outline-offset:2px}
.wax:hover{background:rgb(232 238 242/.08)}
.navbar ul{font-size:14.5px}
.light{--dim:#4F6474}

.form label{min-width:0}.form input{width:100%;min-width:0;box-sizing:border-box}
.navbar{width:100%;padding:12px max(24px,calc(var(--m) + 8px))}
.navbar.solid{width:min(1040px,calc(100vw - 20px))}
@media (max-width:860px){.navbar{padding:10px 18px}}
.navbar.solid{background:rgb(8 20 28/.76)}.lb img{opacity:.74}

/* Hero, round five: positioning line, niche eyebrow, proof */
.bhero .hey{display:block;font-size:15px;font-weight:500;letter-spacing:.01em;color:#C9D6E0;margin-bottom:18px}
.bhero.big h1{font-size:clamp(46px,6.1vw,96px);line-height:1.02;letter-spacing:-.038em;max-width:13ch}
.bhero.big .bh-l{max-width:900px}
.hproof{display:flex;gap:clamp(22px,3vw,40px);margin:30px 0 0;padding-top:20px;border-top:1px solid rgb(255 255 255/.14);max-width:520px}
.hproof div{margin:0}.hproof dt{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.hproof dd{margin:2px 0 0;font-size:14px;color:#B4C3CF}
@media (max-width:860px){.bhero.big h1{font-size:clamp(40px,11vw,60px)}.hproof{gap:18px}.hproof dd{font-size:13px}}
@media (max-width:860px){.bhero.big .bh-art{filter:brightness(.5) saturate(.9)}}

/* Round six: the flip board, fixed tiles, letters centred, board in the middle of the row */
.paint .fb .fr{display:grid;grid-template-columns:48px minmax(72px,120px) 1fr;gap:10px;align-items:center;padding:10px 0}
.paint .fb .fs{grid-column:auto;justify-self:center;display:grid;grid-template-columns:repeat(9,20px);gap:3px;perspective:400px}
.paint .fb .fs i{flex:none;width:20px;height:28px;display:grid;place-items:center;text-align:center;font:600 13px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:0;padding:0;background:#16252F;color:#E8EEF2;border-radius:3px;animation:none;backface-visibility:hidden}
.paint .fb .fs i::after{background:rgb(0 0 0/.45)}
@media (max-width:860px){.paint .fb .fr{grid-template-columns:40px minmax(0,1fr) auto;gap:8px}.paint .fb .fs{grid-template-columns:repeat(9,15px);gap:2px}.paint .fb .fs i{width:15px;height:22px;font-size:11px}}

/* Round six: lines that slide up */
[data-lines] .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
[data-lines] .ln>span{display:inline-block;transform:translateY(105%);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s}
[data-lines].in .ln>span{transform:none;opacity:1}
[data-lines].in .ln:nth-child(2)>span{transition-delay:.12s}[data-lines].in .ln:nth-child(3)>span{transition-delay:.24s}[data-lines].in .ln:nth-child(4)>span{transition-delay:.36s}
.why .fig b.tn{font-variant-numeric:tabular-nums}

/* Accordion text stays light on its photo, even in a light section */
.ac,.ac .ac-l,.ac-b,.ac-b h3,.ac-b a{color:#fff}.ac-b small{color:#D5DFE5}.ac-b p{color:#E2E9ED}

/* Connects to what you run: groups round the mark */
.hubw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;margin-top:clamp(34px,4vw,56px);text-align:left}
.hub-l{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hub-s{display:flex;flex-direction:column;gap:18px;position:relative}
.hub-c{position:relative;justify-self:center;width:132px;height:132px;border-radius:30px;background:#E8EEF2;color:#01101A;display:grid;place-items:center;align-content:center;gap:6px;box-shadow:0 0 0 8px rgb(232 238 242/.06),0 30px 60px -20px rgb(0 0 0/.6)}
.hub-c [data-mk] svg{width:46px;height:46px;display:block}.hub-c b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.sg{padding:16px 18px 14px;border-radius:16px;background:rgb(255 255 255/.035);box-shadow:inset 0 0 0 1px rgb(255 255 255/.09)}
.sg small{display:block;font-size:13px;color:var(--dim);margin-bottom:12px}
.sg-r{display:flex;flex-wrap:wrap;gap:14px 12px}
.sg figure{margin:0;width:68px;display:grid;justify-items:center;gap:7px}
.sg figure span{width:60px;height:60px;border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -14px rgb(0 0 0/.7)}
.sg figure img{width:30px;height:30px;object-fit:contain}
.sg figcaption{font-size:12px;line-height:1.2;color:#C9D6E0;text-align:center}
@media (max-width:980px){.hubw{grid-template-columns:1fr;gap:16px}.hub-c{order:-1;width:100px;height:100px;border-radius:24px;margin-bottom:6px}.hub-s{gap:16px}}
@media (max-width:520px){.sg figure{width:58px}.sg figure span{width:52px;height:52px;border-radius:13px}.sg figure img{width:26px;height:26px}.sg-r{gap:12px 8px}}

/* Two products, overlapping */
.prods{padding-block:clamp(70px,9vw,130px)}
.prods .pt-h{text-align:center;max-width:720px;margin:0 auto}
.duo{position:relative;max-width:1180px;margin:clamp(34px,4vw,56px) auto 0;height:clamp(360px,46vw,640px)}
.duo figure{position:absolute;margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.1),0 40px 80px -30px rgb(1 16 26/.45)}
.duo-a{left:0;top:0;width:66%;height:84%}
.duo-a .npw{width:100%;height:100%}
.duo-b{right:0;bottom:0;width:56%;height:70%}
.duo-b .tr-bar{position:absolute;top:0;left:0;right:0;z-index:2}
.duo-b video{position:absolute;inset:34px 0 0;width:100%;height:calc(100% - 34px);object-fit:cover;object-position:0 50%}
.duo-l{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);max-width:1180px;margin:28px auto 0}
.duo-l a{display:grid;gap:4px;padding:18px 20px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);transition:box-shadow .2s}
.duo-l a:hover{box-shadow:inset 0 0 0 1px rgb(1 16 26/.35)}
.duo-l b{font-weight:600}.duo-l span{color:var(--ink2);font-size:15px}
.duo-m{text-align:center;margin-top:26px}
.btn-ghost.dk{color:var(--ink);box-shadow:inset 0 0 0 1px rgb(1 16 26/.25)}
@media (max-width:860px){.duo{height:auto;display:grid;gap:14px}.duo figure{position:relative;width:100%;height:auto;aspect-ratio:16/11}.duo-l{grid-template-columns:1fr}}

/* Peptides: static logo row, the brands' own colours */
.logos.static{padding-block:clamp(34px,5vw,60px)}
.logos.static .ls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,5vw,72px);max-width:1100px;margin:22px auto 0;padding-inline:var(--m)}
.logos.static img{height:clamp(30px,3.2vw,44px);width:auto;max-width:190px;object-fit:contain;filter:none;opacity:1}

/* Round seven: light bands are a clean white, not slate */
.light{--bg:#FFFFFF;--bg2:#F5F6F7;background:#fff}
.logos,.mo-a,.why,.prods{background:#fff}
.light .cards4 article,.light .grid4 article{box-shadow:0 0 0 1px rgb(1 16 26/.1),0 12px 30px -22px rgb(1 16 26/.25)}
/* The flow's Narrative box: mark, word and chevron on one line */
.fl .fl-box svg{position:static;width:auto;height:auto;translate:none;overflow:visible}
.fl .fl-box [data-mk]{display:block;width:22px;height:22px;flex:none}.fl .fl-box [data-mk] svg{width:22px;height:22px;display:block}
.fl .fl-box>svg{width:11px;height:11px;flex:none;opacity:.6}
.fl .fl-box b{font-weight:600}
/* Products block: the CRM window is only as tall as the CRM */
.duo-a{height:auto;background:transparent}

/* Peptides: seven distinct service scenes (Vlad chose the recommended set, 2026-11-07) */
.s7-b{position:relative;aspect-ratio:560/330;container-type:inline-size;background-image:radial-gradient(rgb(232 238 242/.08) 1px,transparent 1px);background-size:16px 16px;overflow:hidden;font-size:clamp(9.5px,2.25cqw,13px);color:#C9D6E0;line-height:1.35}
.s7-b *{box-sizing:border-box}
.s7-cap{position:absolute;left:0;right:0;bottom:4%;text-align:center;font:500 .78em "Geist Mono",monospace;letter-spacing:.1em;color:#6F8494}
.s7-cd{position:absolute;background:#0F1E28;border-radius:10px;box-shadow:inset 0 0 0 1px rgb(232 238 242/.14),0 18px 30px -18px #000;padding:.85em 1em}
.s7-cd.wh{background:#F4F7F9;color:#01101A;box-shadow:0 18px 34px -16px #000}
.s7-mu{color:#7D8E9B}.s7-cd.wh .s7-mu{color:#5A7080}
.s7-t{font-weight:600;font-size:1.08em;color:#E8EEF2}.s7-cd.wh .s7-t{color:#01101A}
.s7-r{display:flex;justify-content:space-between;align-items:center;gap:.7em;padding:.5em 0;box-shadow:inset 0 -1px 0 rgb(232 238 242/.08)}
.s7-cd.wh .s7-r{box-shadow:inset 0 -1px 0 rgb(1 16 26/.08)}
.s7-r:last-child{box-shadow:none}
.s7-br{height:.5em;border-radius:3px;background:rgb(232 238 242/.12);overflow:hidden;flex:1}
.s7-br i{display:block;height:100%;width:0;background:#E8EEF2;border-radius:3px}
.s7-pl{display:inline-flex;align-items:center;height:1.75em;padding:0 .7em;border-radius:999px;font-size:.88em;background:rgb(232 238 242/.1);color:#C9D6E0;white-space:nowrap;transition:background .3s,color .3s}
.s7-pl.ok{background:rgb(79 227 176/.15);color:#4FE3B0}.s7-pl.wa{background:rgb(245 184 75/.15);color:#F5B84B}
.s7-cd.wh .s7-pl{background:#E9EEF1;color:#3C5261}.s7-cd.wh .s7-pl.ok{background:#E3F6EE;color:#0B6B4F}
.s7-pl.ln{background:#fff;color:#0E3A52;box-shadow:inset 0 0 0 1px #0E3A52}
.s7-bt{display:inline-flex;align-items:center;height:2.2em;padding:0 1em;border-radius:7px;background:#0E3A52;color:#fff;font-weight:600;font-size:.95em;transition:background .3s,color .3s}
.s7-bt.done{background:#E3F6EE;color:#0B6B4F}
.s7-mo{font-family:"Geist Mono",monospace;font-size:.88em}
.s7-bb{position:absolute;max-width:60%;padding:.65em .9em;border-radius:12px;background:#0E3A52;color:#fff;line-height:1.35}
.s7-bb.in{background:#16252F;color:#C9D6E0}
.s7-cur{position:absolute;width:1.2em;height:1.2em;z-index:5;transition:left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1)}
.s7-ck{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(1 16 26/.2);color:transparent;font-size:.85em;transition:background .25s,color .25s,box-shadow .25s}
.s7-ck.on{background:#0B6B4F;color:#fff;box-shadow:none}
.s7-tg{display:inline-block;padding:.15em .5em;border-radius:4px;font-size:.85em;background:#E9EEF1;color:#3C5261;margin:.2em .2em 0 0}
.s7-x{color:#B3261E;background:#FCE8E8;text-decoration:line-through;text-decoration-color:transparent;transition:text-decoration-color .4s}
.s7-x.on{text-decoration-color:#B3261E}
.s7-ins{color:#0B6B4F;background:#E3F6EE}
.s7-hide{opacity:0}
@media (max-width:860px){.sl{grid-template-columns:minmax(0,1fr)}}

/* Restored after the peptide flow cleanup cut them by mistake (2026-11-07) */
.sg figure{width:64px}.sg-r{gap:14px 10px}
.hubw{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:0}.hub-l path{stroke-opacity:.42}
@media (max-width:980px){.hubw{grid-template-columns:1fr}}
.ppw + .logos.static{padding-top:clamp(150px,15vw,210px)}
.logos.static img[alt^="ANDM"]{height:clamp(46px,4.6vw,62px)}
/* The platform footage has the light look baked into the film itself, so it reads the same wherever it is served */

/* Niche pages (Aesthetics, Medical, Regenerative): one template, KLYX's industry pages as the model */
.nz-bc{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:#B4C3CF;margin-bottom:18px}
.nz-bc a{color:#E8EEF2;box-shadow:inset 0 -1px 0 rgb(232 238 242/.35)}
.nz-bc [aria-current]{color:#E8EEF2}
.nz-pains{padding-block:clamp(64px,8vw,110px)}
.nz-pains .wrap{max-width:var(--max)}
.nz-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
.nz-g article{padding:20px 20px 18px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.1),0 12px 30px -22px rgb(1 16 26/.25);display:flex;flex-direction:column}
.nz-g small{font-size:13px;color:var(--dim)}
.nz-g h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-top:6px}
.nz-g p{margin-top:8px;color:var(--soft);font-size:15.5px;line-height:1.45}
.nz-g .nz-fix{margin-top:auto;padding-top:14px;color:#0B6B4F;font-weight:500;font-size:15px;display:flex;gap:8px}
.nz-g .nz-fix::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:#E3F6EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230B6B4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px}
.nz-stack .nz-logos{justify-content:center;margin-top:clamp(22px,3vw,34px);gap:16px 14px}
.nz-more{margin-top:20px;font-size:15px}.nz-more a{box-shadow:inset 0 -1px 0 currentColor}
.nz-faq .nz-q{max-width:760px;margin:clamp(20px,3vw,32px) auto 0;text-align:left}
.nz-faq details p{color:var(--soft)}
@media (max-width:900px){.nz-g{grid-template-columns:1fr}}
.nz-logos{display:flex;flex-wrap:wrap}.nz-logos figure{margin:0;width:76px;display:grid;justify-items:center;gap:7px}.nz-logos figure span{width:60px;height:60px;border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -14px rgb(0 0 0/.7)}.nz-logos img{width:30px;height:30px;object-fit:contain}.nz-logos figcaption{font-size:12px;line-height:1.2;color:#C9D6E0;text-align:center}

/* Company */
.co-name{padding-block:clamp(64px,8vw,110px)}.co-name .wrap{max-width:var(--max)}
.co-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.co-g p{margin-top:14px;color:var(--soft);font-size:17px;line-height:1.5;max-width:52ch}
.co-beats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.co-beats li{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.1),0 12px 30px -22px rgb(1 16 26/.25)}
.co-beats .tn{font:500 13px "Geist Mono",monospace;color:var(--dim)}.co-beats b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.grid4.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.co-p{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:900px;margin:0 auto;text-align:left}
.co-ph{aspect-ratio:4/5;border-radius:14px;background:linear-gradient(160deg,#16303F,#0B1620);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgb(232 238 242/.12)}
.co-ph span{font-size:44px;font-weight:600;letter-spacing:-.03em;color:#E8EEF2}
.co-p p{margin-top:12px;color:var(--soft);font-size:17px;line-height:1.5}.co-p .co-note{font-size:13.5px;color:var(--dim)}
.co-away ul{max-width:640px;margin:22px auto 0;text-align:left;display:grid;gap:10px;padding-left:20px;color:var(--soft);font-size:16.5px}
@media (max-width:860px){.co-g,.co-p,.grid4.g2{grid-template-columns:1fr}.co-ph{max-width:200px}}

/* Long-form pages: legal and Field notes */
.doc-h{text-align:left;padding-top:clamp(120px,15vh,160px);padding-bottom:clamp(40px,5vw,64px)}
.doc-w{max-width:760px;margin:0 auto}
.doc-h h1{font-size:clamp(38px,5vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.doc-h p{margin-top:14px;color:var(--soft);font-size:18px;max-width:58ch}
.doc-h .doc-draft{display:inline-block;margin-top:18px;font-size:13.5px;color:#F5B84B;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(245 184 75/.4)}
.doc-h .doc-meta{font-size:14px;color:var(--dim)}
.doc{padding-block:clamp(48px,6vw,80px)}
.doc-a{max-width:720px;margin:0 auto;padding:0 var(--m);color:#22333F;font-size:17.5px;line-height:1.65}
.doc-a h2{font-size:22px;font-weight:600;letter-spacing:-.015em;color:#01101A;margin:34px 0 8px}
.doc-a p{margin:12px 0}.doc-a ul,.doc-a ol{margin:10px 0;padding-left:22px}.doc-a li{margin:6px 0}
.doc-a a{color:#0E3A52;box-shadow:inset 0 -1px 0 currentColor}
.doc-a sup{font-size:.62em;color:#0E3A52;margin-left:1px}
.doc-lead{font-size:20px;color:#01101A}
.doc-src{margin-top:40px;padding-top:6px;border-top:1px solid rgb(1 16 26/.12);font-size:14.5px;color:#4F6474}
.doc-src h2{font-size:15px;margin-top:20px}
.doc-cta{margin-top:30px}
.fn-l{display:grid;gap:14px;margin-top:26px}
.fn-c{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;padding:12px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.1),0 12px 30px -22px rgb(1 16 26/.25);transition:box-shadow .2s}
.doc-a .fn-c{box-shadow:0 0 0 1px rgb(1 16 26/.1),0 12px 30px -22px rgb(1 16 26/.25);color:inherit}
.fn-c:hover{box-shadow:0 0 0 1px rgb(1 16 26/.3),0 16px 34px -22px rgb(1 16 26/.35)}
.fn-i{aspect-ratio:4/3;border-radius:9px;background:center/cover}
.fn-t{display:grid;gap:4px}.fn-t small{font-size:13px;color:var(--dim)}.fn-t b{font-size:21px;font-weight:600;letter-spacing:-.015em;color:#01101A}.fn-t span{font-size:15.5px;color:#4F6474;line-height:1.45}
@media (max-width:640px){.fn-c{grid-template-columns:1fr}}
.light.doc{display:block}.doc .doc-a{max-width:760px;margin-left:auto;margin-right:auto;box-sizing:content-box;padding:0 var(--m)}@media (min-width:861px){.doc .doc-a{padding:0}}
.apply .ap-cta{color:var(--fg);font-size:clamp(18px,1.6vw,21px);font-weight:500;margin-top:14px}

/* ---------- Phones (Vlad, 2026-11-07: phone traffic may beat desktop) ---------- */
/* phone-native demos: the CRM, how a lead moves, Calls */
.mcrm,.mflow,.mcalls{background:#fff;color:#01101A;border-radius:14px;box-shadow:0 0 0 1px rgb(1 16 26/.1),0 30px 60px -30px rgb(0 0 0/.55);overflow:hidden;font-size:14px;line-height:1.35;text-align:left}
.mcrm header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgb(1 16 26/.08)}
.mcrm header .mk svg,.mbox span svg{width:18px;height:18px;display:block}.mcrm header b{font-weight:600}.mcrm header em{margin-left:auto;font-style:normal;font-size:11.5px;color:#1F5FD0;background:#EEF4FF;padding:2px 8px;border-radius:999px}
.mcrm nav{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid rgb(1 16 26/.08);overflow-x:auto;scrollbar-width:none}
.mcrm nav button{flex:none;height:30px;padding:0 12px;border-radius:999px;font-size:13px;color:#4F6474;background:none;border:0}
.mcrm nav button.on{background:#0E3A52;color:#fff}
.mb{padding:12px 14px 14px;min-height:330px}
.mb h4,.mcalls h4{font-size:12.5px;font-weight:500;color:#7D8E9B;margin:14px 0 4px}
.mk4{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mk4 div{padding:10px 12px;border-radius:10px;background:#F4F7F9}.mk4 b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}.mk4 small{font-size:12px;color:#5A7080}
.mk4.row{grid-template-columns:repeat(4,1fr);gap:6px}.mk4.row div{padding:8px}.mk4.row b{font-size:18px}.mk4.row small{font-size:10.5px}.mk4 .g{color:#0B8A5F}.mk4 .r{color:#D63B3F}
.mr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgb(1 16 26/.07);transition:background .3s}
.mr:last-of-type{border-bottom:0}.mr.on{background:#F4F7F9;margin:0 -8px;padding-inline:8px;border-radius:8px}
.mr .t{font-size:12.5px;color:#5A7080;font-variant-numeric:tabular-nums;flex:none;min-width:38px}.mr .n{flex:1;min-width:0;display:grid}.mr .n b{font-weight:500;font-size:14px}.mr .n small{font-size:12.5px;color:#5A7080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mr .v{font-weight:600}
.mr .av{flex:none;width:30px;height:30px;border-radius:50%;background:#E5EEF3;color:#0E3A52;display:grid;place-items:center;font-weight:600;font-size:13px}
.mp{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;background:#EEF1F3;color:#3C5261;white-space:nowrap}.mp.ok{background:#E3F6EE;color:#0B6B4F}.mp.am{background:#FDF3E1;color:#9A6200}.mp.rd{background:#FCE8E8;color:#B3261E}
.mbub{max-width:82%;margin-top:10px;padding:9px 12px;border-radius:14px;font-size:13.5px}.mbub.in{background:#F1F4F6}.mbub.me{margin-left:auto;background:#0E3A52;color:#fff}
.mst{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:8px 0;border-bottom:1px solid rgb(1 16 26/.07)}.mst>span{font-size:13px;font-weight:500}.mst .c{font-size:12px;color:#7D8E9B}.mst div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}.mst i{font-style:normal;font-size:12.5px;padding:4px 9px;border-radius:7px;background:#F4F7F9;box-shadow:inset 0 0 0 1px rgb(1 16 26/.06)}
.mwk{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.mwk div{padding:8px 6px;border-radius:9px;background:#F4F7F9;display:grid;gap:2px;min-width:0}.mwk div.on{background:#0E3A52;color:#fff}.mwk small{font-size:11px;opacity:.7}.mwk b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mwk span{font-size:10.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msk{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 0;border-bottom:1px solid rgb(1 16 26/.07)}.msk span{font-size:13.5px}.msk small{font-size:12px;color:#5A7080}.msk i{grid-column:1/-1;height:7px;border-radius:4px;background:#EEF1F3;overflow:hidden}.msk i b{display:block;height:100%;background:#0E3A52;border-radius:4px}.msk i b.low{background:#E0A43A}
.mtot{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:10px;background:#F4F7F9}.mtot span:first-child{flex:1;font-size:13px;color:#5A7080}.mtot b{font-size:18px}
.mflow{padding:16px 14px 18px;background-image:radial-gradient(rgb(1 16 26/.08) 1px,transparent 1px);background-size:16px 16px}
.msrc{display:flex;justify-content:space-between;gap:4px}.msrc span{font-size:12px;padding:5px 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.16);white-space:nowrap}
.mflow svg{display:block;width:100%;height:56px}
.mbox{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.3),0 8px 18px -10px rgb(1 16 26/.3);letter-spacing:.14em;font-size:13px}.mbox b{font-weight:600}
.mline{height:30px;display:grid;place-items:center}.mline i{width:0;height:100%;border-left:1.5px dashed rgb(1 16 26/.3)}
.mcard{padding:14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgb(1 16 26/.16)}.mcard header{display:flex;justify-content:space-between;align-items:center}.mcard header small{font:500 11px "Geist Mono",monospace;color:#7D8E9B}.mcard>b{display:block;margin-top:8px;font-size:20px;font-weight:600}.mcard p{font-size:13px;color:#5A7080}
.mcard dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;margin:12px 0 0;align-items:center;font-size:13px}.mcard dt{color:#7D8E9B}.mcard dd{margin:0}.mcard dd i{display:block;height:6px;border-radius:3px;background:#0E3A52}
.mcap{margin-top:14px;text-align:center;font:500 10.5px "Geist Mono",monospace;letter-spacing:.1em;color:#7D8E9B}
.mcalls{padding:12px 14px 14px}.mmap{margin:10px -14px 0;height:170px;overflow:hidden;border-block:1px solid rgb(1 16 26/.08)}.mmap video{width:100%;height:100%;object-fit:cover;object-position:55% 42%;transform:scale(1.15)}

@media (max-width:619px){
  #heroT .stage{padding:0 12px}#heroT .win{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
  #heroT .tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-inline:16px}
  .sl-s li{min-height:58svh}
  .sl-p .in{margin:10px}.sl-p .paint{max-height:52svh}
  .vc-ring{display:none}.vc-r{min-height:0;padding:12px}.vc-t{font-size:14px}
  .sg figure{width:56px}.sg figure span{width:50px;height:50px;border-radius:12px}.sg figure img{width:25px;height:25px}.sg-r{gap:12px 6px}.sg{padding:14px 12px}.sg figcaption{font-size:11px}
  .duo figure{aspect-ratio:auto}.duo-a{background:transparent;box-shadow:none}.duo-b{aspect-ratio:4/5!important}.duo-b video{object-position:60% 45%;transform:scale(1.3)}
  .mo-a{height:calc(100svh + 7 * 52svh)}
  .pt-h{padding-inline:var(--m)}
  .s7-b{aspect-ratio:4/5;font-size:12.5px}
  .s7-b [data-p],.s7-b .s7-cd.wh{left:5%!important;width:90%!important}
  .s7-b [data-coa]{left:5%!important;top:52%!important;width:90%!important}
  .s7-b [data-ok]{left:5%!important;top:62%!important;width:90%!important;text-align:left!important}
  .s7-b [data-ap]{top:6%!important}
  .s7-b .s7-cd:not(.wh){left:5%!important;width:90%!important}
  .s7-b [data-bb]{right:5%!important;max-width:70%!important}
}

@media (max-width:619px){.s7-b [data-ca]{top:6%!important}.s7-b [data-cb]{top:42%!important}.s7-b [data-tb]{top:12%!important;width:90%!important}.s7-b [data-bb]{top:auto!important;bottom:13%!important;left:5%!important;right:auto!important;max-width:90%!important}}
@media (max-width:619px){.s7-b{aspect-ratio:10/11}}
@media (max-width:619px){#ost{display:none}}
/* The form keeps one size on every step: buttons sit at the bottom, the error line keeps its space */
.form{display:flex;flex-direction:column;box-sizing:border-box}.form>*{flex:none}
.form>.err{margin-top:auto;min-height:1.4em;line-height:1.4}.form>.err[hidden]{display:block;visibility:hidden}
.form>.fdone{margin:auto 0}
/* The calendar step: the How it works calendar, in the light form (Vlad, 2026-11-07) */
.form .fcal{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.form .fcal .mth{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.form .fcal .mth small{display:grid;place-items:center;height:24px;font-size:12.5px;color:var(--ink3)}
.form .fcal .mth button,.form .fcal .mth span{height:auto;aspect-ratio:1/1;max-height:46px;display:grid;place-items:center;font-size:15px;border-radius:9px}
.form .fcal .mth span{color:#B3BEC6}
.form .fcal .mth button{color:var(--ink);background:#EEF1F3;font-weight:500}
.form .fcal .tms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.form .fcal .tms button{height:44px;border-radius:9px;font-size:14.5px;box-shadow:inset 0 0 0 1px rgb(1 16 26/.18);color:var(--ink);background:#fff}
.form .fcal button.on{background:#0E3A52!important;color:#fff!important;box-shadow:none!important;font-weight:600}
.form .top .fsc{margin-left:auto;font-size:12.5px;color:var(--ink3)}
.form .ch legend small{display:block;font-size:12.5px;font-weight:400;color:var(--ink3);margin-top:2px}
.fno h3{font-size:22px}.fno .fno-l{display:inline-block;margin-top:14px;font-weight:500;color:#0E3A52;box-shadow:inset 0 -1px 0 currentColor}
/* Audit form, wired: consent, the honeypot people never see, the real calendar */
.form .fcon{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink2);cursor:pointer}.form .fcon input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#0E3A52}.form .fcon a{color:#0E3A52;box-shadow:inset 0 -1px 0 currentColor}
.form .fhp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form .fcly{flex:1 1 auto;width:100%;min-height:440px;border:0;border-radius:10px;background:#F4F7F9}

/* the end band: room between the line and the button when there is no paragraph (Vlad, 2026-11-07) */
.end h2+.cta{margin-top:clamp(26px,3vw,40px)}

/* peptides: brand and clinic share one band, the copy swaps in place (Vlad, 2026-11-07).
   Both versions sit in the same grid cell, so every card is as tall as its longer version and nothing jumps.
   The clinic copy waits to the right, the brand copy to the left, so each switch moves the way the toggle does. */
.ptab .ptab-s{display:flex;width:max-content;margin:0 auto clamp(20px,2.4vw,30px)}
.ptab .ptab-s button{height:38px;padding:0 14px}
.ptab .ptab-s button[aria-pressed=true]{background:#E8EEF2;color:#01101A}
.sw{display:grid}
.sw>*{grid-area:1/1;transition:opacity .26s cubic-bezier(.23,1,.32,1),transform .4s cubic-bezier(.23,1,.32,1),filter .26s cubic-bezier(.23,1,.32,1),visibility 0s;transition-delay:calc(140ms + var(--i,0)*45ms)}
.sw>[data-off]{opacity:0;filter:blur(4px);visibility:hidden;pointer-events:none;transition:opacity .14s ease-out,transform .18s ease-out,filter .14s ease-out,visibility 0s .18s}
.sw>[data-v=clinic][data-off]{transform:translateX(14px)}
.sw>[data-v=brand][data-off]{transform:translateX(-14px)}
.ptab .sw>p{margin:12px auto 0;max-width:56ch;color:var(--soft)}
.ptab .grid4 article{display:grid}
.ptab .grid4 .sw>div>p{margin-top:8px;font-size:15px;color:var(--soft)}
.ptab .grid4 article:nth-child(2){--i:1}.ptab .grid4 article:nth-child(3){--i:2}
@media (prefers-reduced-motion:reduce){.sw>*{transition:none}}
.band.ruo{padding-top:clamp(28px,3vw,40px);padding-bottom:clamp(28px,3vw,40px);box-shadow:inset 0 1px 0 var(--line)}
.band.ruo>div{max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.band.ruo small{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.band.ruo p{margin-top:8px;max-width:96ch;font-size:13.5px;line-height:1.6;color:var(--dim)}

/* phones: the sticky demo box has one height for every step (scenes.js X.sticky scales the scene to fit) */
@media (max-width:859px){
  .sl-p .paint{height:min(42svh,340px);min-height:0;max-height:none;overflow:hidden;justify-content:center}
  .sl-p .in{flex:none;transform-origin:50% 50%;margin:8px}
}
@media (max-width:859px){.sl-p::after{content:"";position:absolute;left:0;right:0;top:100%;height:32px;background:linear-gradient(var(--bg),rgb(1 16 26/0));pointer-events:none}}
@media (max-width:859px){
  .sl-p .in{width:calc(100% - 16px)}
  .sl-p .s7-b{aspect-ratio:auto!important;height:calc(min(42svh,340px) - 16px)}
  .sl-s li{min-height:48svh}
}
@media (max-width:859px){.sl-p .s7-b{background-color:rgb(3 17 27/.9);border-radius:10px}}
/* the logo strip on phones: inset from the edges, logos one size smaller (Vlad, 2026-11-07) */
.logos p{padding-inline:var(--m)}
@media (max-width:619px){
  .logos.static .ls{gap:14px 26px;margin-top:16px;padding-inline:calc(var(--m) + 12px)}
  .logos.static img{height:22px;max-width:128px}
  .logos.static img[alt^="ANDM"]{height:34px}
}
/* the map story header on phones: stay inside the screen, chips scroll sideways */
@media (max-width:859px){.mo-top{min-width:0;width:100%;box-sizing:border-box}.mo-top>*{min-width:0;max-width:100%}.mo-top .mo-seg{overflow-x:auto;scrollbar-width:none}}

/* phone menu (Vlad, 2026-11-07): a button beside the audit button opens a sheet with every page */
.nav-r{display:flex;align-items:center;gap:8px}
.mnav-b{display:none;position:relative;width:40px;height:40px;border-radius:10px;color:#E8EEF2;box-shadow:inset 0 0 0 1px rgb(232 238 242/.2);transition:transform .16s ease-out,background-color .2s}
.mnav-b:active{transform:scale(.96)}
.mnav-b span{position:absolute;left:12px;right:12px;top:50%;height:0}
.mnav-b i{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:transform .24s cubic-bezier(.23,1,.32,1)}
.mnav-b i:first-child{transform:translateY(-3.5px)}.mnav-b i:last-child{transform:translateY(3.5px)}
.navbar.open .mnav-b{background:rgb(232 238 242/.08)}
.navbar.open .mnav-b i:first-child{transform:rotate(45deg)}.navbar.open .mnav-b i:last-child{transform:rotate(-45deg)}
.mnav{display:none}
@media (max-width:860px){
  .mnav-b{display:block}
  .navbar .nav-r .btn-core{height:40px;padding:0 14px;font-size:14px}
  .mnav{display:block;position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:calc(100svh - 92px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:14px;background:rgb(8 20 28/.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgb(232 238 242/.14),0 24px 50px -20px #000;text-align:left;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;visibility:hidden;pointer-events:none;transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .24s cubic-bezier(.23,1,.32,1),visibility 0s .24s}
  .navbar.open .mnav{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
  .navbar:not(.solid) .mnav{left:10px;right:10px}
  .mnav-g{padding:6px 0;box-shadow:inset 0 -1px 0 rgb(232 238 242/.08)}
  .mnav-g small{display:block;padding:8px 12px 4px;font:500 11px "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#7D8E9B}
  .mnav-g a{display:block;padding:9px 12px;border-radius:9px;color:#E8EEF2}
  .mnav-g a:active{background:rgb(232 238 242/.06)}
  .mnav-g a b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
  .mnav-g a span{display:block;margin-top:2px;font-size:13px;color:#93A5B1}
  .mnav-l{display:flex;flex-wrap:wrap;box-shadow:none}.mnav-l a{white-space:nowrap}
  .mnav-l a b{font-size:15px}
  .mnav .mnav-c{display:flex;justify-content:center;margin:6px;height:46px}
}
@media (prefers-reduced-motion:reduce){.mnav,.mnav-b i{transition:none}}

/* Connects to what you run, stacked: room under the mark, gaps the spine shows through, cards solid so the
   line reads as running behind them (six.js X.stackHub draws it) */
@media (max-width:979px){
  .hubw{gap:0}
  .hub-c{margin:4px auto 14px}
  .hub-s{gap:30px}
  .hub-s .sg{background:#08161F}
}
@media (max-width:979px){
  .hub-s .sg{position:relative}
  .hub-s .sg::before,.hub-s .sg::after{content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#01101A;box-shadow:0 0 0 1.3px rgb(232 238 242/.7);z-index:1}
  .hub-s .sg::before{top:-3.5px}
  .hub-s .sg::after{bottom:-3.5px}.hubw>.hub-s:last-child .sg:last-child::after{display:none}
  .hubw{row-gap:30px}
}
/* the map's niche pills: all in view, no sideways carousel (Vlad, 2026-11-07) */
@media (max-width:859px){
  .mo-seg,.mo-top .mo-seg{flex-wrap:wrap;overflow:visible;justify-content:flex-start;margin:0;padding:0;gap:6px}
  .mo-seg button{height:32px;padding:0 11px;font-size:13px}
}
/* the audit's pick-all-that-apply question: each option carries a box, so it reads as several answers */
.ch.multi button{display:flex;align-items:center;gap:10px;text-align:left;white-space:normal;height:auto;min-height:44px;padding-block:9px;line-height:1.25}
.ch.multi button::before{content:"";flex:none;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.5;transition:opacity .15s ease}
.ch.multi button[aria-pressed=true]::before{opacity:1;box-shadow:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='%230E3A52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* the audit's own picker (real intro-call times): a day can have many times, so they scroll in place */
.fcal .tms{max-height:200px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.fcal .tms .tnone{grid-column:1/-1;font-size:14px;color:var(--ink3);padding:10px 0}
.ftz{margin-top:8px;font-size:12.5px;color:var(--ink3)}

/* How it works' live "Pick a time" panel: buttons that look like the sample's cells */
.dm-g .mth button{height:36px;display:grid;place-items:center;font-size:14px;border-radius:7px;color:var(--fg);background:rgb(232 238 242/.07)}
.dm-g .tms{max-height:252px;overflow-y:auto;overscroll-behavior:contain}
.dm-g .tms button{height:36px;display:grid;place-items:center;border-radius:7px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg)}
.dm-g button.on{background:#E8EEF2!important;color:#01101A!important;box-shadow:none;font-weight:600}

/* the inline audit form keeps one width on every step (the beam wrapper around it sizes to its content) */
.apply .nl-mount{display:flex;width:100%}
.apply .nl-mount>div,.apply .nl-mount>div>div,.apply .nl-mount .form{width:100%}

/* the audit's buttons while something is in flight: plainly not pressable, and the calendar's own wait */
.form .fbtn[disabled],.form .fback[disabled]{opacity:.55;cursor:progress}
.form .fbtn[disabled]{transform:none}
.fcal.fload{display:grid;place-items:center;min-height:220px;border-radius:10px;background:#F4F7F9;color:var(--ink3);font-size:14.5px}

/* phones: the form's buttons answer the first tap, with no double-tap zoom and no grey flash */
.form button,.fcal button,.dm-g button,.mnav-b{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){.form .ch button:hover:not([aria-pressed=true]){background:#F2F5F7}}

/* production: the mock's review bar and the WhatsApp button (no number yet) stay off. The video slot shows, marked Video pending, until it is filmed (Vlad, 2026-11-07) */
.review{display:none!important}.wa,.wap{display:none!important}