/* ===== Fonts: served from this site (no Google Fonts). Inter and Instrument Serif, SIL Open Font License 1.1 (assets/fonts/) ===== */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"),url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;src:url(../fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#1E1B4B;--ind:#4F46E5;--ind2:#4338CA;--lime:#C6F432;--mist:#F5F3FF;--line:#E4E0FB;--mute:#5B5887;--bg:#FCFBFF;--ease:cubic-bezier(.2,.7,.2,1);--max:1180px}
*{box-sizing:border-box;margin:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg,img,canvas{display:block;max-width:100%}
ul{list-style:none;padding:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--ind);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(44px,7.2vw,92px);letter-spacing:-.045em;line-height:1.02}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.3;font-weight:500}
mark{background:none;color:inherit}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ind);margin-bottom:18px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--lime);border-radius:2px;box-shadow:0 0 0 1px var(--ind) inset}
.lead{color:var(--mute);font-size:19px;max-width:620px;margin-top:20px}
.sec{padding:112px 0}
.sec.alt{background:var(--mist)}
.head{margin-bottom:56px;max-width:760px}
/* progress, cursor */
#prog{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ind),var(--lime));transform:scaleX(0);transform-origin:left;z-index:120}
#cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid var(--ind);border-radius:50%;pointer-events:none;z-index:150;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s}
#cur.big{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(198,244,50,.35);border-color:transparent}
@media(hover:none){#cur{display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;padding:14px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .25s,box-shadow .3s,transform .3s var(--ease)}
.btn.pri{background:var(--ind);color:#fff}
.btn.pri:hover{background:var(--ind2);box-shadow:0 12px 30px -8px rgba(79,70,229,.55)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{box-shadow:0 12px 30px -8px rgba(150,190,0,.6)}
.btn.out{border-color:var(--line);background:#fff;color:var(--ink)}
.btn.out:hover{border-color:var(--ind);box-shadow:0 8px 24px -10px rgba(79,70,229,.4)}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arrow,.more:hover .arrow,a.card:hover .arrow{transform:translateX(5px)}
.more{display:inline-flex;gap:6px;color:var(--ind);font-weight:500;font-size:15px;margin-top:16px}
/* header */
header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
header.sc{background:rgba(252,251,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px;transition:height .3s var(--ease)}
header.sc .nav{height:64px}
.logo{display:flex;align-items:center;gap:12px;font-weight:600;font-size:21px;letter-spacing:-.02em}
.logo .mk{width:38px;height:38px;transition:transform .6s var(--ease)}
.logo:hover .mk{transform:rotate(-8deg) scale(1.06)}
.logo b{font-weight:600;color:var(--ind)}
.menu{display:flex;gap:2px;align-items:center}
.menu a.l{font-size:15px;padding:8px 13px;border-radius:9px;color:var(--mute);position:relative;transition:color .25s}
.menu a.l::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.menu a.l:hover,.menu a.l.on{color:var(--ink)}
.menu a.l:hover::after,.menu a.l.on::after{transform:scaleX(1)}
.menu .btn{margin-left:10px;padding:10px 18px;font-size:14px}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;font-size:20px;color:var(--ink)}
@media(max-width:940px){.burger{display:block}.menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px 24px 24px;display:none;border-bottom:1px solid var(--line)}.menu.open{display:flex}.menu .btn{margin:8px 0 0;justify-content:center}}
/* pages and reveals */
.page{display:none}.page.on{display:block}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .16em;margin-bottom:-.16em}
.split .w>span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease)}
.split.in .w>span{transform:none}
.split mark{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 92%/0 .3em;transition:background-size 1.1s var(--ease) .7s}
.split.in mark{background-size:100% .3em}
/* hero */
.hero{position:relative;overflow:hidden;padding:64px 0 110px}
#dots{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.hg{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:7px 16px;border-radius:99px;font-size:13px;font-weight:500;margin-bottom:28px}
.live{width:8px;height:8px;border-radius:50%;background:#22C55E;display:inline-block;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35;transform:scale(.8)}}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
#seg-p{transition:opacity .3s,transform .3s}
#seg-p.sw,#seg-b span.sw{opacity:0;transform:translateY(6px)}
.segs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:34px;font-size:14px;color:var(--mute)}
.sg{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 16px;cursor:pointer;color:var(--ink);transition:all .25s}
.sg:hover{border-color:var(--ind)}
.sg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hv{position:relative;height:460px}
.mini{position:absolute;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 30px 60px -30px rgba(79,70,229,.35);animation:fl 7s ease-in-out infinite}
.mini .mh{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);gap:14px}
.mini .mh em{font-style:normal;display:flex;gap:6px;align-items:center;color:#15803D}
.mini b{display:block;font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.2;margin-top:4px}
.c1{top:0;right:0;width:290px}.c2{top:172px;left:0;width:310px;animation-delay:-2.5s}.c3{bottom:0;right:24px;width:210px;animation-delay:-5s;background:var(--lime);border-color:var(--lime)}
.c3 .mh{color:#3B4A00}
@keyframes fl{50%{transform:translateY(-12px)}}
.pipe{display:flex;gap:6px;margin-top:14px}
.pipe span{flex:1;text-align:center;font-size:12px;font-weight:500;padding:9px 0;border-radius:9px;background:var(--mist);animation:lit 6s infinite}
.pipe span:nth-child(2){animation-delay:1.2s}.pipe span:nth-child(3){animation-delay:2.4s}.pipe span:nth-child(4){animation-delay:3.6s}
@keyframes lit{0%,8%{background:var(--mist)}14%,45%{background:var(--lime)}60%,100%{background:var(--mist)}}
@media(max-width:940px){.hg{grid-template-columns:1fr}.hv{height:auto;display:grid;gap:14px}.mini{position:relative;inset:auto;width:auto!important;animation:none}}
/* marquee */
.logos{padding:30px 0;border-block:1px solid var(--line);overflow:hidden;background:#fff}
.logos small{display:block;text-align:center;color:var(--mute);font-size:13px;margin-bottom:18px}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:72px;width:max-content;animation:mq 38s linear infinite;color:#A19DCB;font-weight:600;letter-spacing:.12em;font-size:15px}
.mq:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* cards and bento */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;overflow:hidden;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(198,244,50,.3),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card:hover{border-color:rgba(79,70,229,.55);box-shadow:0 30px 60px -30px rgba(79,70,229,.4)}
.card:not(.tilt):hover{transform:translateY(-6px)}
.card p{color:var(--mute);font-size:15px;margin-top:10px}
.card.ind{background:var(--ind);border-color:var(--ind);color:#fff}
.card.ind p{color:#DAD7FF}
.card.lm{background:var(--lime);border-color:var(--lime)}
.card.lm p{color:#33400A}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.b2{grid-column:span 2}.b3{grid-column:span 3}.b4{grid-column:span 4}.b6{grid-column:span 6}
@media(max-width:940px){.bento{grid-template-columns:repeat(2,1fr)}.b3,.b4,.b6{grid-column:span 2}.b2{grid-column:span 1}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.b2,.b3,.b4,.b6{grid-column:auto}}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.tag{display:inline-block;font-size:12px;font-weight:500;padding:5px 13px;border-radius:99px;background:var(--mist);color:var(--ind);margin-bottom:14px}
.card.ind .tag{background:rgba(255,255,255,.15);color:#fff}
.ul{margin-top:16px;display:grid;gap:8px;font-size:14px;color:var(--mute)}
.ul li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ind);margin-right:11px}
.demo{margin-top:22px;background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:16px;min-height:110px}
.card.ind .demo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;color:var(--ink);white-space:pre-wrap;min-height:120px}
pre::after{content:"";display:inline-block;width:8px;height:15px;background:var(--ind);vertical-align:-2px;animation:blink 1s steps(2) infinite}
.bars{display:flex;align-items:flex-end;gap:7px;height:80px}
.bars i{flex:1;border-radius:6px 6px 0 0;background:var(--ind);transform-origin:bottom;animation:grow 3.6s ease-in-out infinite}
.bars i:nth-child(even){background:var(--lime);box-shadow:0 0 0 1px var(--ind) inset}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}.bars i:nth-child(4){animation-delay:.6s}.bars i:nth-child(5){animation-delay:.8s}.bars i:nth-child(6){animation-delay:1s}
@keyframes grow{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.radar{position:relative;height:110px;display:grid;place-items:center}
.radar i{position:absolute;border:1.5px solid var(--ind);border-radius:50%;width:30px;height:30px;opacity:0;animation:ping 3s ease-out infinite}
.radar i:nth-child(2){animation-delay:1s}.radar i:nth-child(3){animation-delay:2s}
.radar svg{width:34px;height:34px;stroke:var(--ind);fill:var(--lime);stroke-width:1.6;z-index:1}
@keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.big{font-size:clamp(54px,8vw,96px);font-weight:600;letter-spacing:-.05em;line-height:1}
.dots8{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin-top:18px}
.dots8 i{aspect-ratio:1;border-radius:50%;background:#D9D4FA;animation:blink 3s ease-in-out infinite}
.dots8 i:nth-child(3n){background:var(--ind);animation-delay:.6s}.dots8 i:nth-child(5n){background:var(--lime);box-shadow:0 0 0 1px var(--ind) inset;animation-delay:1.2s}
/* sticky story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.spanel{position:sticky;top:110px;height:460px;border-radius:30px;background:var(--mist);border:1px solid var(--line);overflow:hidden}
.spanel::before{content:"";position:absolute;inset:0;background:radial-gradient(#CFC8F7 1.6px,transparent 1.7px) 0 0/28px 28px;opacity:.7}
.vs{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.95);transition:opacity .6s,transform .8s var(--ease)}
.vs.on{opacity:1;transform:none}
.vs svg{width:78%;height:auto}
.vs .dr{stroke-dasharray:300;stroke-dashoffset:300}
.vs.on .dr{animation:draw 2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.vs .ecg{stroke-dasharray:420;stroke-dashoffset:420}
.vs.on .ecg{animation:draw 2.4s linear infinite}
.vs .pl{transform-origin:left;transform:scaleX(0)}
.vs.on .pl{animation:fill 2.6s var(--ease) infinite}
@keyframes fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.sstep{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .5s}
.sstep.on{opacity:1}
.sstep .n{font-size:14px;font-weight:600;color:var(--ind);margin-bottom:12px}
.sstep h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em}
.sstep p{color:var(--mute);margin-top:12px;font-size:17px;max-width:440px}
@media(max-width:940px){.story{grid-template-columns:1fr}.spanel{display:none}.sstep{min-height:0;opacity:1;padding:24px 0;border-bottom:1px solid var(--line)}}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats>div{border-top:2px solid var(--ink);padding-top:20px}
.stats b{display:block;font-size:clamp(46px,6vw,76px);font-weight:600;letter-spacing:-.05em;line-height:1;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 90%/100% .22em;width:max-content;max-width:100%}
.stats span{display:block;margin-top:14px;color:var(--mute)}
/* industries */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.ch{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:1px solid var(--line);border-radius:99px;background:#fff;font-weight:500;font-size:17px;transition:all .35s var(--ease)}
.ch:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-3px) rotate(-1deg)}
.ch i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ind)}
/* cases */
.case{display:flex;flex-direction:column;justify-content:space-between;min-height:320px;transform-style:preserve-3d}
.case .num{font-size:60px;font-weight:600;letter-spacing:-.05em;color:var(--ind);line-height:1;margin-top:30px}
.case .num small{display:block;font-size:14px;letter-spacing:0;font-weight:400;color:var(--mute);margin-top:8px}
.case .go{position:absolute!important;right:24px;top:24px;width:40px;height:40px;border-radius:50%;background:var(--lime);display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-45deg);transition:all .4s var(--ease)}
.case:hover .go{opacity:1;transform:none}
.case.hide{display:none}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.fb{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 20px;cursor:pointer;color:var(--ink);transition:all .25s}
.fb:hover{border-color:var(--ind)}
.fb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* quote */
.quote{font-size:clamp(26px,3.6vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.2;max-width:940px}
.who{display:flex;align-items:center;gap:14px;margin-top:32px}
.av{width:54px;height:54px;border-radius:50%;background:var(--ind);color:var(--lime);display:grid;place-items:center;font-weight:600}
.who small{display:block;color:var(--mute)}
/* products */
.prow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border:none}
.prow:nth-child(even) .pvis{order:-1}
@media(max-width:940px){.prow{grid-template-columns:1fr;gap:28px}.prow:nth-child(even) .pvis{order:0}}
.pvis{background:var(--mist);border:1px solid var(--line);border-radius:28px;padding:30px;min-height:300px;display:grid;place-items:center;position:relative;overflow:hidden}
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.kb div{background:#fff;border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start;min-height:190px;border:1px solid var(--line)}
.kb i{height:34px;border-radius:8px;background:var(--mist)}
.kb i.mv{background:var(--lime);box-shadow:0 0 0 1.5px var(--ind) inset;animation:mvc 6s ease-in-out infinite}
@keyframes mvc{0%,20%{transform:translateX(0)}45%,70%{transform:translateX(118%)}95%,100%{transform:translateX(0)}}
.pvis svg.ch1{width:100%}
.pvis .pl2{stroke-dasharray:500;animation:draw 3s ease-in-out infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
.pvis .pl2{stroke-dashoffset:500}
/* faq, band, forms */
details{border-bottom:1px solid var(--line);padding:24px 0}
summary{cursor:pointer;font-weight:500;font-size:20px;list-style:none;display:flex;justify-content:space-between;gap:16px;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ind);font-size:28px;line-height:1;transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin-top:12px;max-width:720px}
.band{background:var(--ind);color:#fff;border-radius:32px;padding:72px 56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.band h2{max-width:620px}
.band p{color:#DAD7FF;margin-top:14px;font-size:18px}
.band::before,.band::after{content:"";position:absolute;border-radius:50%;border:44px solid rgba(198,244,50,.2);animation:drift 12s ease-in-out infinite alternate}
.band::before{width:300px;height:300px;right:-80px;top:-100px}
.band::after{width:200px;height:200px;right:200px;bottom:-110px;animation-delay:-6s;border-width:30px}
@keyframes drift{to{transform:translate(-40px,30px)}}
.band>*{position:relative;z-index:1}
@media(max-width:600px){.band{padding:40px 28px}}
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.row2{grid-template-columns:1fr}}
label{font-size:14px;font-weight:500;display:grid;gap:7px}
input,select,textarea{font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ind);box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.err{color:#B3261E;font-size:13px;min-height:18px;font-weight:400}
.optb{background:none;border:none;color:var(--ind);font-weight:500;cursor:pointer;justify-self:start;padding:0}
#opt{display:none;gap:18px}#opt.open{display:grid;animation:up .6s var(--ease)}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
.okm{text-align:center;padding:56px 12px}
.okm .tick{width:70px;height:70px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 20px;font-size:32px;animation:pop .6s var(--ease)}
@keyframes pop{from{transform:scale(.3)}}
/* page hero */
.ph{position:relative;padding:104px 0 80px;background:var(--mist);overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(#CFC8F7 1.6px,transparent 1.7px) 0 0/30px 30px;-webkit-mask-image:linear-gradient(#000,transparent 90%);mask-image:linear-gradient(#000,transparent 90%);opacity:.8}
.ph .wrap{position:relative}
.ph h1{font-size:clamp(40px,6vw,76px);max-width:900px}
.role{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;transition:padding .4s var(--ease)}
.role:hover{padding-left:16px}
.role small{color:var(--mute);display:block}
.tl{border-left:2px solid var(--line);padding-left:30px;display:grid;gap:34px;margin-left:8px}
.tl div{position:relative}
.tl div::before{content:"";position:absolute;left:-39px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--ind)}
.tl b{color:var(--ind);font-weight:600}
.tl p{color:var(--mute)}
/* footer */
footer{background:var(--mist);padding:80px 0 0;overflow:hidden;border-top:1px solid var(--line)}
.fg{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
@media(max-width:800px){.fg{grid-template-columns:1fr 1fr}}
footer h4{font-weight:600;font-size:15px;margin-bottom:16px}
footer li{margin-bottom:10px;color:var(--mute)}
footer a:hover{color:var(--ind)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--mute);padding:40px 0 20px}
.giant{font-size:clamp(70px,17vw,240px);font-weight:600;letter-spacing:-.06em;line-height:.8;text-align:center;color:transparent;-webkit-text-stroke:2px #D7D1FA;user-select:none;padding-bottom:10px;transition:color .8s}
.giant:hover{color:#EAE6FF}
/* assistant */
.astb{position:fixed;right:22px;bottom:22px;z-index:110;background:var(--ink);color:#fff;border:none;border-radius:99px;padding:14px 22px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:0 20px 40px -12px rgba(30,27,75,.5)}
.ast{position:fixed;right:22px;bottom:88px;z-index:110;width:340px;max-width:calc(100vw - 44px);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -24px rgba(30,27,75,.4);display:none;flex-direction:column;overflow:hidden}
.ast.open{display:flex;animation:up .5s var(--ease)}
.ast header{position:static;background:var(--mist);padding:14px 18px;font-weight:600;display:flex;justify-content:space-between;align-items:center;box-shadow:none}
.ast header small{font-weight:400;color:var(--mute)}
.msgs{padding:16px;display:grid;gap:10px;max-height:280px;overflow:auto;align-content:start}
.m{padding:10px 14px;border-radius:14px;font-size:14px;max-width:86%;animation:up .4s var(--ease)}
.m.b{background:var(--mist)}.m.u{background:var(--ind);color:#fff;justify-self:end}
.qr{padding:0 16px 16px;display:flex;flex-wrap:wrap;gap:8px}
.qr button{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13px;cursor:pointer;color:var(--ink);transition:all .2s}
.qr button:hover{border-color:var(--ind);background:var(--mist)}
/* view transitions */
@keyframes vo{to{opacity:0;transform:translateY(-10px)}}
@keyframes vi{from{opacity:0;transform:translateY(16px)}}
::view-transition-old(root){animation:vo .25s ease both}
::view-transition-new(root){animation:vi .55s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.split .w>span{opacity:1;transform:none}.split mark{background-size:100% .3em}}
/* ===== content v1: placeholders, draft mode ===== */
.tbd{background:#FFF1A8;color:#5A3A00;border-radius:4px;padding:0 4px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.launch-only{display:none!important}
body.launch [data-draft],body.launch .opt{display:none!important}
body.launch .launch-only{display:block!important}
#draftbar{position:relative;z-index:101;background:var(--ink);color:#fff;font-size:13px;padding:8px 0}
#draftbar .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#draftbar b{color:var(--lime);font-weight:600}
#draftbar button{background:var(--lime);color:var(--ink);border:none;border-radius:8px;padding:6px 12px;font-weight:500;cursor:pointer;font-size:13px}
body.launch #draftbar{background:#14532D}
.illus{display:inline-flex;align-items:center;font-size:11px;font-weight:500;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 9px;white-space:nowrap}
.micro{font-size:14px;color:var(--mute);margin-top:14px}
.fine{font-size:13px;color:var(--mute)}
.ul-link{color:var(--ind);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.logo-alt{text-align:center;font-size:13px;color:var(--mute);margin-top:16px;padding:0 16px}
.trust{margin-top:12px;font-size:14px;font-weight:500;color:var(--ink)}
.empty{max-width:620px}
.radar svg circle{fill:var(--lime);stroke:var(--ind)}
.radar svg path{stroke:var(--ind);stroke-width:2;stroke-linecap:round}
/* product panels */
.prods{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:940px){.prods{grid-template-columns:1fr}}
.pp{border-radius:28px;padding:34px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pp h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;font-weight:600;line-height:1.15}
.pp p{color:var(--mute)}
.pp.al{background:#0C3A3F;border-color:#0C3A3F;color:#fff}
.pp.al p{color:#CFE3E1}
.pp.al .tag{background:rgba(255,255,255,.12);color:#fff}
.pp.xs .tag{background:#EEEDFF;color:#3E35C4}
.pp .tag{margin:0}
.pp [data-ui]{width:100%;margin:6px 0 8px}
.pl{display:flex;align-items:center;gap:12px;font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.05}
.pl svg{width:42px;height:42px;flex:none}
.pl small{display:block;font-size:12px;font-weight:500;letter-spacing:0;opacity:.7;margin-top:2px}
.big-pl{margin-bottom:18px;font-size:26px}.big-pl svg{width:50px;height:50px}
.pquote{margin-top:18px;padding-left:16px;border-left:3px solid var(--lime);font-size:17px;font-weight:500}
.steps{margin:20px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--mute)}
.steps b{color:var(--ink);font-weight:600}
.meta{margin-top:12px;color:var(--mute);font-size:15px}
.meta b{color:var(--ink);font-weight:600;margin-right:6px}
.pvis.pv-al{background:#0C3A3F;border-color:#0C3A3F}
.pvis.pv-xs{background:#EEEDFF}
.pvis [data-ui]{width:100%}
/* allocivo mini ui */
.aui{background:#fff;border-radius:18px;padding:14px;color:#0C2A2E;font-size:13px;box-shadow:0 24px 50px -28px rgba(0,0,0,.45);text-align:left}
.aui-h{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:600;font-size:12px;color:#3E5A5D;margin-bottom:8px}
.aui-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;border:1px solid #E3ECEB;margin-top:6px;transition:background .5s,border-color .5s}
.aui-row b{font-size:15px;width:34px}
.aui-row span{flex:1;color:#3E5A5D}
.aui-row em{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.t-hi{background:#EEF7D1;color:#3B4A00}
.t-blk{background:#FDECEA;color:#B42318}
.t-risk{background:#FFF3D6;color:#8A5100}
.t-ok{background:#E7F5EE;color:#176B4D;display:none}
.own{background:#F1F4F4;color:#0C2A2E;position:relative}
.own .o2{display:none}
.own i{font-style:normal}
.aui .t-risk{display:none}
.aui[data-state="1"] .r418,.aui[data-state="2"] .r418{background:#FFFAEB;border-color:#F6D58B}
.aui[data-state="1"] .t-risk,.aui[data-state="2"] .t-risk{display:inline-flex}
.aui-rec{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-top:10px;padding:12px;border-radius:12px;background:#F4FBE3;border:1px solid #C6F432;max-height:0;opacity:0;overflow:hidden;padding-block:0;transition:max-height .6s var(--ease),opacity .5s,padding .5s}
.aui-rec small{display:block;color:#3E5A5D;font-size:11px}
.aui-rec b{display:block;font-size:14px;margin:2px 0}
.aui-rec span{color:#3E5A5D;font-size:12.5px;line-height:1.45;display:block}
.aui-rec .ap{flex:none;background:#0C3A3F;color:#fff;font-weight:600;font-size:12px;padding:6px 12px;border-radius:8px;transition:background .3s,color .3s}
.aui[data-state="2"] .aui-rec,.aui[data-state="3"] .aui-rec{max-height:160px;opacity:1;padding-block:12px}
.aui[data-state="3"] .aui-rec .ap{background:var(--lime);color:#0C2A2E}
.aui[data-state="3"] .own .o1{display:none}.aui[data-state="3"] .own .o2{display:inline}
.aui[data-state="3"] .t-ok{display:inline-flex}
.aui[data-state="3"] .r418{background:#F2FBF6;border-color:#B9E3CC}
.aui-done{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:600;color:#176B4D;opacity:0;transition:opacity .5s}
.aui[data-state="3"] .aui-done{opacity:1}
/* xessly mini ui */
.xui{background:#fff;border-radius:18px;padding:14px;color:#17212B;font-size:13px;border:1px solid #DCE2E8;box-shadow:0 24px 50px -30px rgba(81,70,229,.45);text-align:left}
.xui-h{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:12px;color:#5B6773;margin-bottom:10px}
.seg{display:flex;background:#F7F8FA;border-radius:8px;padding:2px}
.seg i{font-style:normal;font-size:11px;padding:2px 8px;border-radius:6px}
.seg i.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);color:#17212B}
.xui-b{display:grid;grid-template-columns:1fr 1.15fr;gap:12px}
@media(max-width:520px){.xui-b{grid-template-columns:1fr}}
.xui-page{background:#F7F8FA;border-radius:12px;padding:14px;display:grid;gap:8px;align-content:start}
.ln{display:block;height:8px;border-radius:4px;background:#DCE2E8}
.fld{display:grid;gap:4px;margin-top:6px;border-radius:8px;padding:4px;transition:box-shadow .4s}
.fld .lbl{font-size:11px;font-weight:600;color:#17212B;height:0;opacity:0;overflow:hidden;transition:height .4s,opacity .4s}
.fld .inp{display:block;background:#fff;border:1px solid #DCE2E8;border-radius:7px;padding:7px 9px;color:#9AA4AE;font-size:12px}
.cta{display:block;text-align:center;background:#5146E5;color:#fff;border-radius:7px;padding:7px;font-weight:600;font-size:12px;margin-top:4px}
.xui[data-state="1"] .fld,.xui[data-state="2"] .fld{box-shadow:0 0 0 2px #B42318}
.xui[data-state="3"] .fld{box-shadow:0 0 0 2px #176B4D}
.xui[data-state="2"] .lbl,.xui[data-state="3"] .lbl{height:14px;opacity:1}
.xui[data-state="2"] .inp,.xui[data-state="3"] .inp{color:transparent}
.xui-f{border:1px solid #DCE2E8;border-radius:12px;padding:12px;display:grid;gap:6px;align-content:start;opacity:.35;transition:opacity .4s}
.xui[data-state="1"] .xui-f,.xui[data-state="2"] .xui-f,.xui[data-state="3"] .xui-f{opacity:1}
.xui-f small{font-size:11px;color:#B42318;font-weight:600}
.xui-f b{font-size:13.5px;line-height:1.3}
.xui-f .why{font-size:12px;color:#5B6773;line-height:1.45}
.vars{display:flex;gap:6px;margin-top:2px}
.vars i{font-style:normal;width:28px;height:28px;border-radius:8px;border:1px solid #DCE2E8;display:grid;place-items:center;font-weight:600;font-size:12px;opacity:0;transform:translateY(4px);transition:all .4s}
.xui[data-state="2"] .vars i,.xui[data-state="3"] .vars i{opacity:1;transform:none}
.xui[data-state="2"] .vars i.pick,.xui[data-state="3"] .vars i.pick{background:#5146E5;color:#fff;border-color:#5146E5}
.ver{font-size:12px;font-weight:600;color:#176B4D;background:#E7F5EE;border-radius:99px;padding:3px 10px;justify-self:start;opacity:0;transition:opacity .4s}
.xui[data-state="3"] .ver{opacity:1}
.xui-foot{font-size:11px;color:#5B6773;margin-top:10px}
/* services */
.svc .card{display:flex;flex-direction:column}
.fit{margin-top:16px;font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:14px}
.fit+.fit{margin-top:12px;border:none;padding-top:0}
.fit b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.sttab{border-top:2px solid var(--ink)}
.st{display:grid;grid-template-columns:1.1fr 2.2fr .9fr .8fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.st b{font-weight:600}
.st span{color:var(--mute)}
.sth span{font-size:13px;font-weight:600;color:var(--ink)}
@media(max-width:700px){.st{grid-template-columns:1fr 1fr}.st>:nth-child(2){grid-column:1/-1;order:3}.sth{display:none}}
/* playbook */
.pbk{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
@media(max-width:800px){.pbk{grid-template-columns:1fr}}
.pbr{padding:28px 0;border-top:1px solid var(--line)}
.pbr .n{font-size:13px;font-weight:600;color:var(--ind)}
.pbr h3{font-size:24px;margin:6px 0 8px;letter-spacing:-.02em}
.pbr p{color:var(--mute)}
.wont{display:grid;gap:0}
.wont li{display:flex;gap:18px;align-items:baseline;font-size:clamp(20px,2.6vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.25;padding:20px 0;border-bottom:1px solid var(--line)}
.wont li::before{content:"\2715";color:var(--ind);font-size:.7em;flex:none}
.fnote{font-size:14px;color:var(--ink);background:#FFF8DB;border-radius:10px;padding:0 14px;max-height:0;overflow:hidden;transition:max-height .4s,padding .4s}
.fnote.show{max-height:200px;padding:12px 14px}
.fnote.bad{background:#FDECEA;color:#8A1C14}
.fg{grid-template-columns:1.6fr repeat(4,1fr)}
@media(max-width:800px){.fg{grid-template-columns:1fr 1fr}}
.bars i{height:100%}
.bars i:nth-child(1){height:45%}.bars i:nth-child(2){height:70%}.bars i:nth-child(3){height:55%}.bars i:nth-child(4){height:85%}.bars i:nth-child(5){height:65%}.bars i:nth-child(6){height:95%}
/* ===== mega menu ===== */
header{background:rgba(252,251,255,.0)}
header.mm-on{background:#fff;box-shadow:0 1px 0 var(--line)}
.mm{position:static}
.mmb{background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.mm.open .chev{transform:rotate(-135deg) translateY(-1px)}
.mmp{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(30,27,75,.35);display:none;z-index:99}
.mm.open .mmp{display:block;animation:mmin .35s var(--ease)}
@keyframes mmin{from{opacity:0;transform:translateY(-8px)}}
.mmg{display:grid;grid-template-columns:1fr 320px;gap:32px;padding-top:30px;padding-bottom:30px}
.mmg.two{grid-template-columns:1fr 1fr 300px}
.mmh{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.mml{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.mml a{display:block;padding:12px 14px;border-radius:12px;transition:background .2s}
.mml a:hover,.mml a:focus-visible{background:var(--mist)}
.mml b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.mml span{display:block;font-size:13.5px;color:var(--mute);line-height:1.45;margin-top:2px}
.mmf{display:flex;flex-direction:column;gap:6px;background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:22px;transition:border-color .2s}
.mmf:hover{border-color:var(--ind)}
.mmf b{font-size:17px;font-weight:600}
.mmf span{font-size:14px;color:var(--mute)}
.mmf em{font-style:normal;color:var(--ind);font-weight:500;font-size:14px;margin-top:auto}
.mmf .tag{align-self:flex-start;margin:0}
.mmcard{border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s}
.mmcard:hover{border-color:var(--ind)}
.mmc-top{display:flex;gap:14px;align-items:flex-start}
.mmc-top svg{width:44px;height:44px;flex:none}
.mmc-top b{display:block;font-size:18px;font-weight:600}
.mmc-top small{display:block;font-size:13.5px;color:var(--mute);line-height:1.45;margin-top:2px}
.mmsub{display:flex;flex-wrap:wrap;gap:6px}
.mmsub a{font-size:13px;padding:6px 12px;border-radius:99px;background:var(--mist);color:var(--ink);transition:background .2s,color .2s}
.mmsub a:hover,.mmsub a:focus-visible{background:var(--ink);color:#fff}
.menu .l.on .chev{color:var(--ink)}
@media(max-width:940px){
  .menu{max-height:calc(100vh - 80px);overflow:auto}
  .mm{display:block}
  .mmb{width:100%;justify-content:space-between;padding:12px 13px!important}
  .mmp{position:static;box-shadow:none;border:none;background:none}
  .mmg,.mmg.two{grid-template-columns:1fr;padding:4px 0 12px;gap:12px}
  .mmg>.wrap{padding:0}
  .mml{grid-template-columns:1fr}
  .mml a{padding:8px 13px}
  .mmf{padding:16px}
}
/* ===== product page head ===== */
.prodhero{padding:40px 0 64px;position:relative}
.prodhero.al{background:linear-gradient(#EAF3F2,var(--bg))}
.prodhero.xs{background:linear-gradient(#EEEDFF,var(--bg))}
.phl{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.phl h1{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;line-height:1.3;font-weight:500;color:var(--mute);max-width:620px}
.phl h1 b{color:var(--ink);font-weight:600}
.phl .acts{margin:0}
/* ===== deck ===== */
.deck{--bg:#0C3A3F;--fg:#fff;--mu:#B9D4D2;--cd:rgba(255,255,255,.07);--ln:rgba(255,255,255,.16);--ac:#C6F432;--ac2:#0C2A2E;position:relative;border-radius:28px;overflow:hidden;background:var(--bg);color:var(--fg);aspect-ratio:16/9;min-height:560px;max-height:calc(100vh - 120px);width:100%;box-shadow:0 50px 90px -50px rgba(12,58,63,.6)}
.deck.dk-xs{--bg:#17212B;--fg:#fff;--mu:#B4BDC7;--cd:rgba(255,255,255,.06);--ln:rgba(255,255,255,.15);--ac:#8FF2CC;--ac2:#17212B;box-shadow:0 50px 90px -50px rgba(81,70,229,.6)}
.deck::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.09) 1.3px,transparent 1.4px) 0 0/28px 28px;pointer-events:none}
.dk-stage{position:absolute;inset:0 0 64px 0}
.sl{position:absolute;inset:0;padding:clamp(28px,4.5vw,64px);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,4vw,56px);align-items:center;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.sl.on{opacity:1;visibility:visible;transition:opacity .6s}
.sl.cen{grid-template-columns:1fr;text-align:center;justify-items:center;align-content:center}
.sl .k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);margin-bottom:14px}
.sl .k::before{content:"";width:16px;height:2px;background:var(--ac)}
.sl h2{font-size:clamp(26px,3.3vw,46px);letter-spacing:-.035em;line-height:1.08;color:var(--fg)}
.sl p.s{margin-top:16px;color:var(--mu);font-size:clamp(15px,1.4vw,18px);max-width:520px}
.sl.cen p.s{margin-left:auto;margin-right:auto}
.sl .a{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*160ms + 150ms)}
.sl.on .a{opacity:1;transform:none}
.dkmk{width:clamp(80px,9vw,120px);height:auto;margin:0 auto 22px}
.dk-ctrl{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,28px);border-top:1px solid var(--ln);background:rgba(0,0,0,.12)}
.dk-prog{flex:1;display:flex;gap:6px}
.dk-prog button{flex:1;height:18px;background:none;border:none;padding:7px 0;cursor:pointer}
.dk-prog button i{display:block;height:4px;border-radius:4px;background:var(--ln);overflow:hidden;position:relative}
.dk-prog button i::after{content:"";position:absolute;inset:0;background:var(--ac);transform:scaleX(var(--p,0));transform-origin:left}
.dk-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);background:none;color:var(--fg);cursor:pointer;display:grid;place-items:center;font-size:15px;flex:none;transition:background .2s}
.dk-btn:hover{background:rgba(255,255,255,.1)}
.dk-btn:focus-visible,.dk-prog button:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.dk-n{font-size:13px;color:var(--mu);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.dk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* slide visuals */
.vcard{background:var(--cd);border:1px solid var(--ln);border-radius:16px;padding:16px 18px}
.vcard small{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);font-weight:600}
.vcard b{display:block;font-size:16px;font-weight:600;margin-top:4px;line-height:1.35}
.vcard span{display:block;font-size:13.5px;color:var(--mu);margin-top:4px;line-height:1.45}
.vstack{display:grid;gap:12px}
.vgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vacc{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}
.vbad{border-color:#F59E8B;background:rgba(245,158,139,.1)}
.vbad small{color:#F8B4A6}
.bub{display:inline-block;background:#fff;color:#0C2A2E;border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:13.5px;font-weight:500;margin:4px 0}
.bub.r{border-radius:14px 14px 4px 14px;background:var(--ac);color:var(--ac2)}
.gapline{display:flex;align-items:center;gap:8px;color:var(--mu);font-size:12px;justify-content:center}
.gapline::before,.gapline::after{content:"";flex:1;border-top:1.5px dashed var(--ln)}
.tline{position:relative;padding:28px 0 8px}
.tline .bar{height:6px;border-radius:6px;background:var(--ln);position:relative}
.tline .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--ac),#F59E8B);width:0;transition:width 3.2s linear .6s}
.sl.on .tline .fill{width:100%}
.tl-ev{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.tl-ev div{border-left:2px solid var(--ln);padding-left:10px}
.tl-ev b{display:block;font-size:20px;font-weight:600}
.tl-ev span{font-size:13px;color:var(--mu);line-height:1.4;display:block}
.tl-ev .hot{border-color:#F59E8B}.tl-ev .hot b{color:#F8B4A6}
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.flow .ins{display:grid;gap:10px}
.flow .ins div{padding:10px 14px;border-radius:12px;border:1px solid var(--ln);background:var(--cd);font-size:14px;position:relative}
.flow .ins div::after{content:"";position:absolute;right:-17px;top:50%;width:16px;border-top:1.5px dashed var(--ac)}
.flow .hub{width:clamp(70px,8vw,96px);height:clamp(70px,8vw,96px)}
.steps4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.steps4 .vcard b{font-size:18px}
.steps4 .vcard small{color:var(--ac)}
.why{display:grid;gap:8px;margin-top:10px}
.why div{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.why i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--ac);color:var(--ac2);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.why i.no{background:var(--ln);color:var(--fg)}
.acts3{display:flex;gap:8px;margin-top:14px}
.acts3 span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:9px;border:1px solid var(--ln)}
.acts3 span:first-child{background:var(--ac);color:var(--ac2);border-color:var(--ac)}
.rep{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.rep div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--ln)}
.rep div span{color:var(--mu)}
.chain{display:grid;gap:8px}
.chain div{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
.chain b{font-size:13px;font-weight:600;color:var(--ac)}
.vars3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vars3 .vcard{padding:12px}
.vmini{background:#fff;border-radius:10px;padding:10px;margin-bottom:10px;display:grid;gap:5px}
.vmini i{display:block;height:6px;border-radius:3px;background:#DCE2E8}
.vmini .lb{height:auto;background:none;font-size:10px;font-style:normal;font-weight:600;color:#17212B}
.vmini .in{height:20px;background:#fff;border:1px solid #9AA4AE;border-radius:5px}
.vmini .bt{height:20px;background:#5146E5;border-radius:5px}
.vmini.b .in{border-color:#5146E5}
.vmini.c .in{height:26px;border:2px solid #17212B}.vmini.c .bt{height:28px;box-shadow:0 0 0 3px #8FF2CC}
.nv{font-size:11px;color:var(--ac);font-weight:600;display:block;margin-top:6px}
.sl [data-ui]{width:100%}
.sl .aui,.sl .xui{box-shadow:none}
.dkcta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.dkcta .btn.out{background:transparent;color:var(--fg);border-color:var(--ln)}
@media(max-width:900px){
  .deck{aspect-ratio:auto;min-height:0;height:auto;max-height:none}
  .dk-stage{position:relative;inset:auto;display:grid}
  .sl{position:relative;grid-area:1/1;grid-template-columns:1fr;align-content:start;padding:28px 22px 36px}
  .dk-ctrl{position:relative}
  .vgrid3,.tl-ev{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}
  .flow .ins div::after{display:none}
  .flow .hub{margin:0 auto}
  .chain div{grid-template-columns:1fr}
}
@media(max-width:520px){.vgrid3,.vars3,.steps4,.vgrid2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sl .a{opacity:1!important;transform:none!important}.tline .fill{width:100%!important}}
/* ===== product page sections ===== */
.loop6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:lp}
@media(max-width:800px){.loop6{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.loop6{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
@media(max-width:800px){.feat{grid-template-columns:1fr}}
.feat div{padding:24px 0;border-top:1px solid var(--line)}
.feat b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.feat p{color:var(--mute);margin-top:6px}
.feat small{font-size:12px;font-weight:600;color:var(--ind);letter-spacing:.05em}
.arch{display:grid;gap:10px;max-width:760px}
.arch div{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px 22px;display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center;position:relative}
.arch div+div::before{content:"";position:absolute;left:40px;top:-11px;height:10px;border-left:2px solid var(--ind)}
.arch b{font-weight:600}
.arch span{color:var(--mute);font-size:15px}
.arch .core{background:#0C3A3F;border-color:#0C3A3F;color:#fff}.arch .core span{color:#CFE3E1}
@media(max-width:640px){.arch div{grid-template-columns:1fr;gap:4px}}
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chiprow span{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 16px;font-size:14px}
.otiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:800px){.otiles{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.otiles{grid-template-columns:1fr}}
.otiles div{border-top:2px solid var(--ink);padding-top:14px;font-weight:500;font-size:17px}
.rtab{border-top:2px solid var(--ink)}
.rrow{display:grid;grid-template-columns:1.1fr 2fr 1.6fr 1.4fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rrow span{color:var(--mute);font-size:15px}
.rrow em{font-style:normal;font-size:13px;font-weight:600;color:var(--ind)}
.rrow.h span{font-size:13px;font-weight:600;color:var(--ink)}
@media(max-width:800px){.rrow{grid-template-columns:1fr}.rrow.h{display:none}}
.lf .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:700px){.lf .row3{grid-template-columns:1fr}}
.help{font-size:12.5px;color:var(--mute);font-weight:400}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--mute)}
.chk input{width:18px;height:18px;margin-top:2px;flex:none}
.menu .mmb{font-size:15px;padding:8px 13px;border-radius:9px;color:var(--mute);transition:color .25s}
.menu .mmb:hover,.mm.open .mmb,.menu .mmb.on{color:var(--ink)}
.menu .mmb.on{box-shadow:inset 0 -2px 0 var(--lime)}
.sl.cen>div{width:100%;max-width:920px}
.vcard .bub{display:inline-block;color:#0C2A2E;font-size:13.5px;margin-top:6px}
.vcard .bub.r{color:var(--ac2)}
/* ===== no cursor tracer ===== */
#cur{display:none!important}
/* ===== futuristic hero ===== */
.hero.hx{background:radial-gradient(1200px 600px at 85% -10%,rgba(79,70,229,.55),transparent 60%),radial-gradient(800px 500px at 0% 110%,rgba(198,244,50,.12),transparent 60%),#0B0A24;color:#fff;padding:72px 0 96px}
.hero.hx::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%);pointer-events:none}
.hx-glow{position:absolute;width:520px;height:520px;right:6%;top:8%;border-radius:50%;background:radial-gradient(circle,rgba(198,244,50,.18),transparent 65%);filter:blur(10px);animation:hxg 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes hxg{to{transform:translate(-60px,40px) scale(1.1)}}
.hero.hx .wrap{position:relative;z-index:1}
.hero.hx .hg{grid-template-columns:1.05fr .95fr;gap:48px}
.hero.hx h1{color:#fff;font-size:clamp(42px,6.2vw,80px)}
.hero.hx .split mark{color:#fff}
.hero.hx .lead{color:#C9C6F2}
.hero.hx .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#E6E4FF}
.hero.hx .segs{color:#A9A5DC}
.hero.hx .sg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#E6E4FF}
.hero.hx .sg:hover{border-color:var(--lime)}
.hero.hx .sg.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn.ghost:hover{border-color:var(--lime);box-shadow:0 8px 24px -10px rgba(198,244,50,.4)}
.hero.hx :focus-visible{outline-color:var(--lime)}
.hx-con{position:relative;background:rgba(14,12,44,.78);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;backdrop-filter:blur(10px);box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(198,244,50,.05) inset;font-family:ui-monospace,Menlo,Consolas,monospace}
.hx-con::before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:linear-gradient(140deg,rgba(198,244,50,.5),transparent 35%,transparent 65%,rgba(129,120,255,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hx-top{display:flex;align-items:center;gap:12px;font-size:12px;color:#A9A5DC;padding:2px 4px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.hx-dots{display:flex;gap:6px}.hx-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}.hx-dots i:first-child{background:var(--lime)}
.hx-tag{margin-left:auto;font-family:Inter,sans-serif;font-size:11px;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:1px 9px}
.hx-log{list-style:none;padding:10px 4px 6px;margin:0;display:grid;gap:2px;height:268px;overflow:hidden;align-content:end}
.hx-log li{display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:12.5px;line-height:1.5;padding:5px 8px;border-radius:8px;color:#D9D7F7;animation:hxin .5s cubic-bezier(.2,.7,.2,1)}
.hx-log li b{font-weight:600;color:#8F88FF;white-space:nowrap}
.hx-log li.h{background:rgba(198,244,50,.08)}
.hx-log li.h b{color:var(--lime)}
.hx-log li:last-child::after{content:"";display:inline-block;width:7px;height:13px;background:var(--lime);margin-left:6px;vertical-align:-2px;animation:blink 1s steps(2) infinite;grid-column:2}
@keyframes hxin{from{opacity:0;transform:translateY(8px)}}
.hx-pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.hx-pipe span{font-family:Inter,sans-serif;font-size:11.5px;font-weight:500;text-align:center;padding:8px 0;border-radius:9px;background:rgba(255,255,255,.05);color:#A9A5DC;border:1px solid rgba(255,255,255,.08);transition:all .4s}
.hx-pipe span.on{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:0 0 22px -4px rgba(198,244,50,.7)}
.hx-pipe span.done{color:#E6E4FF;border-color:rgba(198,244,50,.35)}
.hx-eng{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16);font-family:Inter,sans-serif;font-size:13px;color:#C9C6F2}
.hx-eng b{color:#fff;font-weight:600}
.hx-av{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:12px}
.hx-on{margin-left:auto;font-size:11.5px;font-weight:600;color:#A9A5DC;transition:color .3s}
.hx-on.act{color:var(--lime)}
@media(max-width:940px){.hero.hx .hg{grid-template-columns:1fr}.hx-log{height:236px}.hx-log li{grid-template-columns:1fr;gap:0}.hx-pipe{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.hx-glow{animation:none}}
/* ===== agent components ===== */
.agents{display:grid;grid-template-columns:1fr;gap:8px}
.agents div{display:grid;grid-template-columns:30px 130px 1fr;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid var(--ln,var(--line));background:var(--cd,#fff);position:relative}
.agents div+div::before{content:"";position:absolute;left:28px;top:-9px;height:8px;border-left:2px solid var(--ac,var(--ind))}
.agents i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--ac,var(--lime));color:var(--ac2,var(--ink));display:grid;place-items:center;font-weight:700;font-size:13px}
.agents b{font-weight:600;font-size:15px}
.agents span{font-size:13.5px;color:var(--mu,var(--mute));line-height:1.45}
.agents.big div{grid-template-columns:36px 170px 1fr;padding:18px 20px;border-radius:16px}
.agents.big i{width:34px;height:34px;font-size:15px}
.agents.big b{font-size:18px}
.agents.big span{font-size:15px}
@media(max-width:640px){.agents div,.agents.big div{grid-template-columns:30px 1fr}.agents span{grid-column:2}}
.term{font-family:ui-monospace,Menlo,Consolas,monospace}
.term .tl1{font-size:13px;padding:7px 0;border-bottom:1px solid var(--ln);display:grid;grid-template-columns:70px 1fr;gap:10px;color:var(--fg)}
.term .tl1 em{font-style:normal;color:var(--ac);font-weight:600}
.term .tl1.ok{border:none;color:var(--ac)}
.diff{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;margin-top:10px;white-space:pre-wrap;min-height:0;background:rgba(0,0,0,.25);border-radius:10px;padding:10px 12px}
.diff::after{display:none}
.diff .m{color:#F8B4A6}.diff .p{color:var(--ac)}
.diff.lt{background:var(--mist);color:var(--ink)}
.diff.lt .m{color:#B42318}.diff.lt .p{color:#176B4D}
.wwd{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.wwd{grid-template-columns:1fr}}
.wwd .card ul{margin-top:14px}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.levels span{font-size:12px;border:1px solid var(--ln);border-radius:10px;padding:8px 10px;color:var(--mu);line-height:1.35}
.levels span b{display:block;color:var(--fg);font-size:13px}
.levels span:first-child{border-color:var(--ac)}
.hx-log{-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
/* ===== hero agent cards ===== */
.hero .c1{width:340px}.hero .c3{width:240px}
.agl{display:grid;gap:6px;margin-top:12px}
.agr{display:grid;grid-template-columns:10px 92px 1fr;gap:8px;align-items:center;font-size:12.5px;padding:7px 9px;border-radius:9px;background:var(--mist);transition:background .4s}
.agr b{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;font-size:11.5px;color:var(--ind)}
.agr span{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdot{width:9px;height:9px;border-radius:50%;background:#C9C4F2}
.sdot.ok{background:#22C55E}
.sdot.run{background:var(--lime);box-shadow:0 0 0 0 rgba(198,244,50,.7);animation:pulse 1.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(198,244,50,0)}}
.agr.now{background:#F4FBE3}
.erv{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:500;color:#33400A}
.hero .hx-av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:700;font-size:12px}
@media(max-width:940px){.hero .c1,.hero .c3{width:auto}}
/* ===== two ways ===== */
.twoway{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:800px){.twoway{grid-template-columns:1fr}}
.tw{border-radius:24px;padding:28px;border:1px solid var(--line);background:#fff}
.tw.good{background:#0C3A3F;border-color:#0C3A3F;color:#fff}
.tw-h{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;color:var(--mute)}
.tw.good .tw-h{color:var(--lime)}
.tw ol{list-style:none;padding:0;margin:0;display:grid;gap:0;position:relative}
.tw li{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:10px 0 10px 22px;position:relative;font-size:16px}
.tw li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:50%;background:#E8B4AC}
.tw li:not(:last-child)::after{content:"";position:absolute;left:8px;top:28px;bottom:-8px;border-left:1.5px dashed var(--line)}
.tw.good li::before{background:var(--lime)}
.tw.good li:not(:last-child)::after{border-color:rgba(255,255,255,.2)}
.tw time{font-weight:600;font-variant-numeric:tabular-nums;color:var(--mute)}
.tw.good time{color:#B9D4D2}
.tw.bad li.end{color:#B42318;font-weight:600}
.tw.good li.end{color:var(--lime);font-weight:600}
/* ===== live simulations ===== */
.sim{display:grid;grid-template-columns:1fr .85fr 1.25fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(30,27,75,.45)}
.lv-col{padding:24px;border-right:1px solid var(--line);min-width:0}
.lv-col:last-of-type{border-right:none}
.lv-h{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.lv-ev{list-style:none;padding:0;margin:0;display:grid;gap:8px;min-height:300px;align-content:start}
.lv-ev li{display:grid;grid-template-columns:48px 1fr;gap:8px;font-size:14px;padding:9px 11px;border-radius:10px;background:var(--mist);animation:hxin .45s var(--ease)}
.lv-ev li:first-child{background:#F4FBE3;box-shadow:inset 3px 0 0 var(--lime)}
.lv-ev time{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ind);font-size:13px}
.ags{display:grid;gap:10px;position:relative}
.ag{display:grid;grid-template-columns:14px 1fr;gap:2px 10px;padding:12px;border-radius:14px;border:1px solid var(--line);transition:all .35s}
.ag i{grid-row:span 2;width:12px;height:12px;border-radius:50%;background:#D9D4FA;margin-top:4px;transition:all .35s}
.ag b{font-size:15px;font-weight:600}
.ag span{font-size:12.5px;color:var(--mute);line-height:1.4}
.ag.on{border-color:var(--ind);background:#F5F3FF;transform:translateX(4px)}
.ag.on i{background:var(--lime);box-shadow:0 0 0 4px rgba(198,244,50,.35),0 0 0 1.5px var(--ind) inset}
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rm{border-radius:12px;padding:10px 10px 8px;min-height:62px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s,color .5s,box-shadow .5s;font-size:12px}
.rm b{font-size:15px;font-weight:600}
.rm span{font-weight:600;font-size:12px;min-height:16px}
.rm.flash{box-shadow:0 0 0 3px var(--ind)}
.s-ready{background:#E7F5EE;color:#176B4D}
.s-dirty{background:#F1F0F7;color:#5B5887}
.s-clean{background:#EEF7D1;color:#3B4A00}
.s-insp{background:#E6F0FF;color:#1D4ED8}
.s-block{background:#FDECEA;color:#B42318}
.s-risk{background:#FFF3D6;color:#8A5100}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.legend span{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px}
.lv-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 24px;border-top:1px solid var(--line);background:var(--mist);flex-wrap:wrap}
.lv-dec{font-weight:600;font-size:15px;color:var(--ink);min-height:22px}
.lv-dec::before{content:"Agent decision \2192  ";color:var(--ind);font-weight:500}
@media(max-width:940px){.sim{grid-template-columns:1fr}.lv-col{border-right:none;border-bottom:1px solid var(--line)}.lv-ev{min-height:0}.lv-ev li:nth-child(n+4){display:none}}
/* xessly sim */
.site{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:12px;background:#FCFCFE;position:relative}
.site>div{position:relative}
.s-nav{display:flex;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.s-nav i{display:block;height:8px;width:42px;border-radius:4px;background:#C9CFE0}
.s-hero{height:86px;border-radius:10px;background:linear-gradient(135deg,#DDE3F5,#EEF1FA)}
.s-form{display:grid;gap:5px}
.s-lbl{font-style:normal;font-size:11px;font-weight:600;color:#17212B;opacity:0;transition:opacity .4s}
.s-in{display:block;height:26px;border:1px solid #C9CFE0;border-radius:7px;background:#fff}
.xlive.fixed .s-lbl{opacity:1}
.s-btn{background:#9C97E8;color:#fff;border-radius:8px;text-align:center;padding:8px;font-size:13px;font-weight:600;transition:background .5s}
.xlive.fixed .s-btn{background:#4F46E5}
.xlive.fixed .s-nav i{background:#7E879C}
.pin{position:absolute;right:-6px;top:-8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:#B42318;transform:scale(0);transition:transform .35s var(--ease),background .4s;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.pin.on{transform:scale(1)}
.pin.fixing{background:#D97706}
.pin.ok{background:#16A34A}
.pin.flag{background:#7C3AED}
.xo{display:grid;gap:8px;min-height:250px;align-content:start}
.xo .row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;font-size:13.5px;padding:9px 11px;border-radius:10px;background:var(--mist);animation:hxin .4s var(--ease)}
.xo .row i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#B42318;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.xo .row em{font-style:normal;font-size:12px;color:var(--mute);white-space:nowrap}
.xo .ck i{background:#16A34A}
.xo .fl i{background:#7C3AED}
.xo .big2{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.xo .diff{margin:0}
.cnts{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mute)}
.cnts b{color:var(--ink);font-size:18px;font-variant-numeric:tabular-nums;margin-left:4px}
/* ===== levers ===== */
.levers{border-top:2px solid var(--ink)}
.levers div{display:grid;grid-template-columns:200px 1fr 260px;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.levers b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.levers span{color:var(--mute)}
.levers em{font-style:normal;font-size:13px;font-weight:600;color:#0C3A3F;background:#EAF3F2;border-radius:99px;padding:6px 12px;justify-self:start}
.levers em::before{content:"Measure: ";font-weight:500;color:#3E5A5D}
@media(max-width:800px){.levers div{grid-template-columns:1fr;gap:6px}}
/* ===== calculator ===== */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border-radius:28px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-in{padding:32px;background:#fff;display:grid;gap:16px;align-content:start}
.calc-in h3{font-size:24px;font-weight:600;letter-spacing:-.02em}
.calc-in label{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:14px}
.calc-in label input[type=range]{grid-column:1/-1;accent-color:#0C3A3F;padding:0;border:none}
.calc-in label input[type=number],.calc-in label select{grid-column:1/-1;padding:10px 12px}
.calc-in output{font-weight:600;color:#0C3A3F;font-variant-numeric:tabular-nums}
.calc-out{background:#0C3A3F;color:#fff;padding:32px;display:flex;flex-direction:column;gap:14px}
.co-h{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--lime)}
.co-total{font-size:clamp(40px,5vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.co-bars{display:grid;gap:14px;margin-top:8px}
.co-bars div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px;color:#CFE3E1}
.co-bars i{grid-column:1/-1;height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;display:block}
.co-bars s{display:block;height:100%;width:0;background:var(--lime);border-radius:6px;transition:width .5s var(--ease)}
.co-bars b{color:#fff;font-variant-numeric:tabular-nums}
.co-bars small{grid-column:1/-1;font-size:12px;color:#9DBCB9}
.co-note{font-size:13px;color:#9DBCB9;margin-top:auto}
.calc-out .btn{align-self:flex-start}
/* ===== autonomy, pills, flow map ===== */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media(max-width:900px){.split2{grid-template-columns:1fr}}
.split2 h2{font-size:clamp(26px,3vw,38px);margin-bottom:22px}
.auto{display:grid;gap:8px}
.auto div{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.auto b{font-weight:600}
.auto span{color:var(--mute);font-size:14.5px}
.auto .lv1{border-left:6px solid var(--lime)}
.auto .lv2{border-left:6px solid #F6C453}
.auto .lv3{border-left:6px solid #E8806F}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills span{border:1px solid var(--line);background:#fff;border-radius:99px;padding:10px 18px;font-weight:500;font-size:15px}
.pills .hot{background:#0C3A3F;color:#fff;border-color:#0C3A3F}
.flowmap{display:grid;grid-template-columns:1fr 60px 1.1fr 60px 1fr;align-items:center;gap:0}
.fm-src,.fm-out{display:grid;gap:8px}
.fm-src span,.fm-out span{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;font-weight:500;font-size:15px}
.fm-out span{background:var(--mist)}
.fm-arrow{height:2px;background:repeating-linear-gradient(90deg,var(--ind) 0 6px,transparent 6px 12px);position:relative;animation:dash 1s linear infinite}
.fm-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border-left:9px solid var(--ind);border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes dash{to{background-position:12px 0}}
.fm-core{background:#0C3A3F;color:#fff;border-radius:22px;padding:28px 22px;text-align:center;display:grid;gap:8px;justify-items:center;box-shadow:0 30px 60px -30px rgba(12,58,63,.7)}
.fm-core svg{width:56px;height:56px}
.fm-core b{font-size:20px;font-weight:600}
.fm-core span{font-size:13px;color:#B9D4D2}
@media(max-width:800px){.flowmap{grid-template-columns:1fr;gap:12px}.fm-arrow{height:28px;width:2px;justify-self:center;background:repeating-linear-gradient(180deg,var(--ind) 0 6px,transparent 6px 12px)}.fm-arrow::after{right:-5px;top:auto;bottom:-4px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--ind);border-bottom:none}}
/* ===== xessly page ===== */
.tracks{display:grid;gap:16px}
.trk{border-radius:22px;padding:24px 28px;border:1px solid var(--line);background:#fff}
.trk.fast{background:#17212B;border-color:#17212B;color:#fff}
.trk-h{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.trk.fast .trk-h{color:#8FF2CC}
.trk-row{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.trk-row span{padding:10px 16px;border-radius:12px;font-weight:500;font-size:15px;background:var(--mist);white-space:nowrap}
.trk.fast .trk-row span{background:#8FF2CC;color:#17212B;font-weight:600}
.trk-row i{flex:1;min-width:24px;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,#C9C4F2 0 4px,transparent 4px 10px)}
.trk.slow .trk-row i{min-width:40px;position:relative}
.trk.slow .trk-row i::after{content:"\23F3";position:absolute;left:50%;top:-12px;transform:translateX(-50%);font-size:13px;background:#fff;padding:0 2px}
.trk.fast .trk-row i{flex:0 0 26px;background:#8FF2CC}
.trk em{display:block;font-style:normal;margin-top:14px;font-weight:600;color:var(--mute)}
.trk.fast em{color:#8FF2CC}
@media(max-width:800px){.trk-row{gap:8px}.trk-row i{display:none}}
.cover{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:940px){.cover{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cover{grid-template-columns:1fr}}
.cover div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}
.cover b{font-size:18px;font-weight:600}
.cover span{font-size:13.5px;color:var(--mute);flex:1}
.cover em{font-style:normal;font-size:12px;font-weight:600;border-radius:99px;padding:4px 10px;align-self:flex-start}
.cover .v{background:#E7F5EE;color:#176B4D}
.cover .f{background:#F1ECFE;color:#6D28D9}
.cmsv{display:grid;gap:6px;margin-top:14px}
.cmsv div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:9px 12px;border-radius:10px;background:var(--mist)}
.cmsv em{font-style:normal;font-size:12px;font-weight:600;color:#176B4D;white-space:nowrap}
#xs-where .card p:last-child{margin-top:14px}
.pipe span:nth-child(5){animation-delay:4.8s}
.hero .c2{top:248px}@media(max-width:940px){.hero .c2{top:auto}}
@media(min-width:941px){.hero .hv{height:560px}}

/* ===== signature layer: dock, yard menu, blueprint lens, blueprint panel ===== */
.dock{position:fixed;left:20px;bottom:20px;z-index:146;display:flex;gap:4px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:99px;padding:5px;box-shadow:0 20px 40px -16px rgba(30,27,75,.35);transition:opacity .3s}
body.gl-open .dock{opacity:0;pointer-events:none}
.dock button{display:flex;align-items:center;gap:10px;border:none;background:none;padding:9px 14px;border-radius:99px;cursor:pointer;color:var(--ink);font-weight:500;font-size:14px;transition:background .25s,color .25s}
.dock button:hover{background:var(--mist)}
.dock button[aria-pressed="true"]{background:var(--ink);color:#fff}
.dock kbd{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--mute)}
.dock button[aria-pressed="true"] kbd{border-color:rgba(255,255,255,.3);color:#DAD7FF}
.gico{display:grid;grid-template-columns:repeat(3,5px);gap:3px}
.gico i{width:5px;height:5px;border-radius:50%;background:#C9C4F2;transition:background .3s,transform .3s}
.gico i.y{background:var(--ind)}
.dock button:hover .gico i.y{background:var(--lime);box-shadow:0 0 0 1px var(--ind);transform:scale(1.35)}
.bhint{position:fixed;left:20px;bottom:84px;z-index:146;background:var(--ink);color:#fff;font-size:13px;padding:10px 16px;border-radius:14px;max-width:270px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s,transform .5s var(--ease)}
.bhint.show{opacity:1;transform:none}
.bhint b{color:var(--lime);font-weight:500}
@media(max-width:640px){.dock kbd,.dock .lb,#bbtn{display:none}.bhint{display:none}}
@media(hover:none){#bbtn,.bhint{display:none}}

#gl{position:fixed;inset:0;z-index:130;background:var(--ink);display:grid;place-items:center;visibility:hidden;clip-path:circle(0px at var(--ox,40px) var(--oy,90vh));-webkit-clip-path:circle(0px at var(--ox,40px) var(--oy,90vh));transition:clip-path .8s cubic-bezier(.7,0,.2,1),-webkit-clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s .8s}
#gl.open{visibility:visible;clip-path:circle(160vmax at var(--ox,40px) var(--oy,90vh));-webkit-clip-path:circle(160vmax at var(--ox,40px) var(--oy,90vh));transition:clip-path .95s cubic-bezier(.7,0,.2,1),-webkit-clip-path .95s cubic-bezier(.7,0,.2,1),visibility 0s}
.glh{position:absolute;left:28px;top:24px;color:#fff;font-weight:600;font-size:20px;letter-spacing:-.02em}
.glh small{display:block;font-weight:400;font-size:13px;color:#B7B3E6;letter-spacing:0}
.glx{position:absolute;right:24px;top:20px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:26px;cursor:pointer;line-height:1;transition:background .25s}
.glx:hover{background:rgba(255,255,255,.1)}
.glf{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#B7B3E6;font-size:13px}
.glf kbd{font:inherit;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:1px 7px;margin:0 2px}
.gg{--c:clamp(84px,21vmin,184px);display:grid;grid-template-columns:repeat(3,var(--c));gap:clamp(10px,2.2vmin,24px)}
.gc{width:var(--c);height:var(--c);border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:inherit;padding:0;transform:scale(.35);opacity:0;transition:transform .6s var(--ease),opacity .5s,background .3s,color .3s,border-color .3s,box-shadow .3s}
#gl.open .gc{transform:none;opacity:1;transition-delay:calc(var(--i)*55ms + 280ms)}
#gl .gc.y{background:var(--lime);border-color:var(--lime);color:var(--ink)}
#gl.open .gc:hover,#gl.open .gc:focus-visible{transform:scale(1.09);transition-delay:0s;background:var(--ind);border-color:var(--lime);color:#fff}
#gl.open .gc.y:hover,#gl.open .gc.y:focus-visible{background:var(--lime);color:var(--ink);box-shadow:0 0 0 8px rgba(198,244,50,.3)}
#gl .gc:focus-visible{outline:3px solid #fff;outline-offset:4px}
.gc .n{font-size:12px;opacity:.6}
.gc b{font-size:clamp(14px,2.3vmin,19px);font-weight:600;letter-spacing:-.01em;line-height:1.15;text-align:center}
.gc small{font-size:12px;opacity:.7;text-align:center;padding:0 10px;line-height:1.3}
@media(max-height:560px){.gc small{display:none}}

#bp{position:fixed;inset:0;z-index:140;pointer-events:none;background-color:#2A2690;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:96px 96px,96px 96px,16px 16px,16px 16px;clip-path:circle(0px at 50% 50%);-webkit-clip-path:circle(0px at 50% 50%)}
#bpann{position:absolute;inset:0;overflow:hidden}
.bpb{position:absolute;left:0;top:0;display:none;border:1.5px dashed #C6F432;background:rgba(198,244,50,.08);pointer-events:none}
.bplab{position:absolute;left:-1.5px;top:-1.5px;max-width:calc(100% + 3px);background:#C6F432;color:#1E1B4B;font:500 10.5px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bring{position:fixed;left:0;top:0;z-index:141;pointer-events:none;border:2px solid #C6F432;border-radius:50%;opacity:0;box-shadow:0 0 0 6px rgba(198,244,50,.18),0 30px 80px rgba(30,27,75,.35)}
#bring::before,#bring::after{content:"";position:absolute;background:#C6F432;opacity:.75}
#bring::before{left:50%;top:calc(50% - 9px);width:1px;height:18px}
#bring::after{top:50%;left:calc(50% - 9px);height:1px;width:18px}
#bro{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);background:#1E1B4B;color:#C6F432;font:500 11px ui-monospace,Menlo,monospace;padding:4px 10px;border-radius:99px;white-space:nowrap}
body.bp-on{cursor:crosshair}

.bpu{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.bpu.in{opacity:1;transform:none}
.bpgen .card:hover{transform:none}
.bpg{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start}
@media(max-width:940px){.bpg{grid-template-columns:1fr}}
.bpsig{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;min-height:36px;align-items:center}
.bps{font-size:13px;font-weight:500;padding:6px 14px;border-radius:99px;background:var(--lime);box-shadow:0 0 0 1.5px var(--ind) inset;animation:bppop .5s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
.bps0{font-size:13px;color:var(--mute)}
@keyframes bppop{from{transform:scale(.4);opacity:0}}
.bpex{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--mute);margin-bottom:20px}
.bpex button{background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:13px;cursor:pointer;color:var(--ink);transition:all .2s}
.bpex button:hover{border-color:var(--ind);background:var(--mist)}
.bpplan{min-height:420px}
.bpe{display:grid;place-items:center;align-content:center;gap:18px;min-height:380px;color:var(--mute);text-align:center}
.bpe-d{display:grid;grid-template-columns:repeat(3,16px);gap:8px}
.bpe-d i{width:16px;height:16px;border-radius:50%;background:#D9D4FA;animation:blink 3s ease-in-out infinite}
.bpe-d i.y{background:var(--lime);box-shadow:0 0 0 1.5px var(--ind);animation-delay:.4s}
.bpscan{width:200px;height:6px;border-radius:6px;background:var(--mist);overflow:hidden;position:relative}
.bpscan i{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--ind);border-radius:6px;animation:bpsc 1s ease-in-out infinite alternate}
@keyframes bpsc{to{transform:translateX(150%)}}
.bpph{display:flex;justify-content:space-between;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.bpph h3{font-size:24px;margin-top:6px}
.bpph h3 b{color:var(--ind);font-weight:600}
.bpm span{font-size:13px;color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.bpax{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);margin-left:42%;border-bottom:1px solid var(--line);padding-bottom:6px}
.bplist{display:grid}
.bpr{display:grid;grid-template-columns:42% 1fr;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);animation:bpup .6s var(--ease) both;animation-delay:calc(var(--i)*130ms)}
.bpn{padding:0 16px 0 22px;position:relative}
.bpn::before{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;background:repeating-linear-gradient(90deg,var(--ind) 0 3px,transparent 3px 6px);animation:bpfl 1s linear infinite}
@keyframes bpfl{to{background-position-x:6px}}
.bpn b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.bpn small{color:var(--mute);font-size:12.5px;display:block;line-height:1.4;margin-top:2px}
.bpt{position:relative;height:22px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),var(--line) calc(12.5% - 1px),var(--line) 12.5%)}
.bpbar{position:absolute;top:3px;height:16px;border-radius:8px;background:var(--lime);box-shadow:0 0 0 1.5px var(--ind) inset;transform-origin:left;animation:bpgr .9s var(--ease) both;animation-delay:calc(var(--i)*130ms + 350ms)}
.bpbar.ms{background:var(--ind);box-shadow:none}
.bpbar.ongoing{background:repeating-linear-gradient(90deg,var(--lime) 0,var(--lime) 8px,#E6FB9A 8px,#E6FB9A 14px);border-radius:8px 0 0 8px}
.bpbar.ongoing::after{content:"\2192";position:absolute;right:-14px;top:-3px;color:var(--ind);font-size:15px}
@keyframes bpgr{from{transform:scaleX(0)}}
@keyframes bpup{from{opacity:0;transform:translateY(10px)}}
.bpnote{font-size:13px;color:var(--mute);margin:16px 0}
.bpa{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:600px){.bpr{grid-template-columns:1fr;gap:8px}.bpax{margin-left:0}}

/* ==========================================================================
   Brightyard v2 layer: cinematic theme, 3D stages, motion
   ========================================================================== */
:root{--night:#0B0A24;--night2:#14123A;--serif:"Instrument Serif",Georgia,serif;--ease2:cubic-bezier(.16,1,.3,1)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
::selection{background:var(--lime);color:var(--ink)}
body{background:var(--bg)}
h1,h2{text-wrap:balance}
h2{font-size:clamp(32px,4.8vw,62px);letter-spacing:-.035em}
.split mark{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;padding-right:.06em}
.split .w>span{transform:translateY(115%) rotate(4deg);transform-origin:left bottom;transition:transform 1.1s var(--ease2)}
.split.in .w>span{transform:none}
.sec{padding:128px 0}
@media(max-width:700px){.sec{padding:84px 0}}

/* reveals are driven by GSAP when available */
html.anim .rv{opacity:0;transform:none;transition:none}
html.noanim .rv,html.noanim .split .w>span{opacity:1!important;transform:none!important}
html.noanim .split mark{background-size:100% .3em}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:400;background:var(--night);display:none;place-items:center;color:#fff}
html.anim #pre{display:grid;animation:prefail .5s 5s forwards}
@keyframes prefail{to{opacity:0;visibility:hidden}}
.pre-in{display:grid;justify-items:center;gap:26px}
.pre-g{display:grid;grid-template-columns:repeat(3,18px);gap:12px;padding:22px;border-radius:26px;background:var(--ind)}
.pre-g i{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0)}
.pre-g i.y{background:var(--lime)}
#pre-n{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.12em;color:#A9A5DC}

/* ---------- page transition ---------- */
#pt{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden}
#pt i{position:absolute;inset:0;transform:translateY(101%);will-change:transform}
#pt i:nth-child(1){background:var(--lime)}
#pt i:nth-child(2){background:var(--night)}

/* ---------- header ---------- */
header#hdr{position:fixed;left:0;right:0;top:0;background:transparent;transition:background .35s,box-shadow .35s,transform .5s var(--ease2),color .3s}
header#hdr.sc{background:rgba(252,251,255,.82);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
header#hdr.hide:not(.mm-on){transform:translateY(-102%)}
header#hdr.on-dark:not(.mm-on){color:#fff}
header#hdr.on-dark:not(.mm-on).sc{background:rgba(11,10,36,.55);box-shadow:0 1px 0 rgba(255,255,255,.08)}
header#hdr.on-dark:not(.mm-on) .logo b{color:var(--lime)}
@media(min-width:941px){
  header#hdr.on-dark:not(.mm-on) .menu a.l,header#hdr.on-dark:not(.mm-on) .menu .mmb{color:rgba(255,255,255,.72)}
  header#hdr.on-dark:not(.mm-on) .menu a.l:hover,header#hdr.on-dark:not(.mm-on) .menu a.l.on,header#hdr.on-dark:not(.mm-on) .menu .mmb:hover,header#hdr.on-dark:not(.mm-on) .menu .mmb.on{color:#fff}
  header#hdr.on-dark:not(.mm-on) .menu .btn.pri{background:var(--lime);color:var(--ink)}
}
header#hdr.on-dark .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
header#hdr.mm-on{background:#fff}
main{display:block}
.page>.sec:first-child,.page>.empty:first-child{padding-top:168px}

/* ---------- home hero ---------- */
.hero3{position:relative;min-height:100svh;background:radial-gradient(1100px 620px at 82% 18%,rgba(79,70,229,.5),transparent 62%),var(--night);color:#fff;overflow:hidden;isolation:isolate}
.h3-stage{position:absolute;inset:0;z-index:-1}
.h3-stage canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s}
.hero3.is-live .h3-stage canvas{opacity:1}
.hero3.no3d{background:radial-gradient(900px 520px at 80% 20%,rgba(79,70,229,.6),transparent 60%),radial-gradient(rgba(143,136,255,.35) 1.4px,transparent 1.5px) 0 0/34px 34px,var(--night)}
.hero3::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(transparent,var(--night));z-index:-1;pointer-events:none}
.h3-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:end;min-height:100svh;padding-top:110px;padding-bottom:104px}
.h3-kick{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:#E6E4FF;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);padding:7px 16px;border-radius:99px;margin-bottom:30px}
.hero3 #seg-p{transition:none}
.hero3 h1{font-size:clamp(44px,min(6.8vw,11.6vh),110px);line-height:.94;letter-spacing:-.055em;color:#fff}
.hero3 h1 mark{color:var(--lime);display:inline-block}
.hero3 .split mark{background:none}
.hero3 .lead{color:#C9C6F2;font-size:clamp(16px,1.4vw,20px);max-width:560px;margin-top:22px}
.hero3 .acts{margin-top:26px}.hero3 .segs{margin-top:22px}
.h3-kick{margin-bottom:22px!important}
.hero3 .micro{color:#A9A5DC}
.hero3 .segs{color:#A9A5DC}
.hero3 .sg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#E6E4FF}
.hero3 .sg:hover{border-color:var(--lime)}
.hero3 .sg.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.hero3 .btn.pri{background:var(--lime);color:var(--ink)}
.hero3 .btn.pri:hover{background:#D4FA55;box-shadow:0 14px 40px -10px rgba(198,244,50,.55)}
.hero3 .btn.out{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.hero3 .btn.out:hover{border-color:var(--lime)}
.hero3 :focus-visible,.s3 :focus-visible,.ph :focus-visible,.prodhero :focus-visible{outline-color:var(--lime)}
.h3-hud{display:grid;gap:12px;justify-items:end}
.hero3 .mini{position:relative;inset:auto;width:min(340px,100%)!important;animation:none;background:rgba(20,18,58,.5);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.hero3 .mini .mh{color:#A9A5DC}
.hero3 .mini .mh em{color:#86EFAC}
.hero3 .agr{background:rgba(255,255,255,.06)}
.hero3 .agr.now{background:rgba(198,244,50,.14)}
.hero3 .agr b{color:var(--lime)}
.hero3 .agr span{color:#C9C6F2}
.hero3 .illus{background:transparent;border-color:rgba(255,255,255,.2);color:#A9A5DC}
.hero3 .pipe span{background:rgba(255,255,255,.07);color:#E6E4FF;animation-name:litd}
@keyframes litd{0%,8%{background:rgba(255,255,255,.07);color:#E6E4FF}14%,45%{background:var(--lime);color:var(--ink)}60%,100%{background:rgba(255,255,255,.07);color:#E6E4FF}}
.hero3 .mini.c3{background:var(--lime);border-color:var(--lime);color:var(--ink);width:min(240px,100%)!important}
.hero3 .c3 .mh{color:#3B4A00}
.h3-meta{position:absolute;right:max(24px,calc((100vw - var(--max))/2 + 24px));bottom:96px;display:flex;align-items:center;gap:10px;z-index:2}
.h3-pause{font-size:12px;color:#C9C6F2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:3px 12px;cursor:pointer;transition:border-color .25s,color .25s}
.h3-pause:hover{border-color:var(--lime);color:#fff}
.hero3.no3d .h3-meta{display:none}
.h3-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#A9A5DC}
.h3-scroll i{width:1px;height:38px;background:linear-gradient(var(--lime),transparent);animation:sline 2s var(--ease2) infinite;transform-origin:top}
@keyframes sline{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:940px){.h3-in{grid-template-columns:1fr;align-items:end;padding-top:44svh;gap:28px}.h3-meta{top:calc(44svh - 22px);bottom:auto;right:16px}.h3-hud{justify-items:stretch;grid-template-columns:1fr 1fr}.hero3 .mini{width:auto!important}.hero3 .mini.c1{grid-column:1/-1}.h3-scroll{display:none}}
@media(min-width:941px) and (max-height:780px){.hero3 .micro{display:none}.h3-in{padding-top:96px;padding-bottom:92px}.h3-meta{bottom:84px}}
@media(max-width:520px){.h3-hud{grid-template-columns:1fr}.hero3 .mini.c3{width:auto!important}}

/* ---------- horizontal gallery ---------- */
.hsec{padding:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden}
.hsec>.wrap{width:100%}
.hsec .head{margin-bottom:30px;padding-top:84px}
.hsec .head h2{font-size:clamp(30px,3.9vw,52px)}
.hs-card .tag{align-self:flex-start}
.hs-track{display:flex;gap:20px;width:max-content;padding:0 max(24px,calc((100vw - var(--max))/2 + 24px)) 56px;will-change:transform}
.hs-card{width:min(430px,84vw);min-height:clamp(300px,40vh,400px);flex:none;display:flex;flex-direction:column}
.hs-card .demo{margin-top:auto}
.hs-card .big{margin-top:auto!important}
.hs-n{font-family:var(--serif);font-style:italic;font-size:54px;line-height:1;color:var(--ind);opacity:.35;position:absolute!important;right:26px;top:20px}
.card.ind .hs-n{color:#fff}
.hs-card.wide{width:min(560px,88vw);justify-content:space-between}
.hs-prog{height:2px;background:var(--line);margin:0 max(24px,calc((100vw - var(--max))/2 + 24px));position:relative;top:-28px}
.hs-prog i{display:block;height:100%;background:var(--ind);transform:scaleX(0);transform-origin:left}
.hs.native{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hs.native .hs-card{scroll-snap-align:center}
.hs.native+.hs-prog{display:none}
@media(max-width:940px){.hsec{min-height:0;padding:84px 0 20px}.hsec .head{padding-top:0}}

/* ---------- dark page heroes ---------- */
.ph{background:radial-gradient(900px 480px at 85% 0%,rgba(79,70,229,.55),transparent 62%),var(--night);color:#fff;padding:200px 0 110px}
.ph::before{background:radial-gradient(rgba(143,136,255,.4) 1.4px,transparent 1.5px) 0 0/32px 32px;opacity:.55}
.ph h1{color:#fff;font-size:clamp(44px,7vw,104px);line-height:.98;letter-spacing:-.05em;max-width:1040px}
.ph h1 mark{color:var(--lime)}
.ph .split mark{background:none}
.ph .lead{color:#C9C6F2}
.ph .eyebrow{color:var(--lime)}
.ph .btn.pri{background:var(--lime);color:var(--ink)}
.ph .btn.out{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}

/* ---------- product page head ---------- */
.prodhero{padding:150px 0 44px;color:#fff}
.prodhero.al{background:#06262A}
.prodhero.xs{background:#10161D}
.prodhero .phl{margin-bottom:0}
.prodhero .phl h1{color:#B9D4D2;font-size:clamp(20px,2.1vw,26px)}
.prodhero.xs .phl h1{color:#B4BDC7}
.prodhero .phl h1 b{color:#fff}
.prodhero .btn.pri{background:var(--lime);color:var(--ink)}
.prodhero.xs .btn.pri{background:#8FF2CC;color:#10161D}
.prodhero .btn.out{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}

/* ---------- 3D story ---------- */
.s3{--bg:#06262A;--fg:#fff;--mu:#B9D4D2;--cd:rgba(255,255,255,.07);--ln:rgba(255,255,255,.16);--ac:#C6F432;--ac2:#06262A;background:var(--bg);color:var(--fg);position:relative}
.s3.xs{--bg:#10161D;--mu:#B4BDC7;--ac:#8FF2CC;--ac2:#10161D}
.s3-pin{position:relative;height:100svh;overflow:hidden}
.s3-stage{position:absolute;inset:0}
.s3-stage canvas{width:100%;height:100%;display:block}
.s3-pin::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 90%,transparent) 34%,transparent 62%);pointer-events:none}
.s3-in{position:relative;z-index:2;height:100%}
.s3-steps{list-style:none;margin:0;padding:0;position:relative;height:100%}
.s3-step{position:absolute;left:0;top:50%;width:min(500px,42vw);transform:translateY(-46%);opacity:0;pointer-events:none;transition:opacity .45s,transform .7s var(--ease2)}
.s3-step.on{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.s3-step .k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-bottom:16px}
.s3-step .k::before{content:"";width:18px;height:2px;background:var(--ac)}
.s3-step h2{font-size:clamp(28px,3.5vw,50px);letter-spacing:-.04em;line-height:1.04;color:var(--fg)}
.s3-step p.s{margin-top:18px;color:var(--mu);font-size:clamp(15px,1.25vw,18px);max-width:460px}
.s3-step>:nth-child(2){margin-top:24px;max-width:460px}
.s3-step .dkmk{width:64px;margin:0 0 20px}
.s3-step .dkcta{justify-content:flex-start}
.s3-step [data-ui]{display:none}
.s3-step .a{opacity:1;transform:none}
.s3 .vcard{backdrop-filter:blur(10px)}
.s3 .levels span{backdrop-filter:blur(10px);background:var(--cd)}
.s3-rail{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:30px;display:flex;align-items:center;gap:6px}
.s3-rail button{width:26px;height:18px;padding:7px 0;background:none;border:none;cursor:pointer}
.s3-rail button i{display:block;height:3px;border-radius:3px;background:var(--ln);transition:background .3s}
.s3-rail button.on i,.s3-rail button.done i{background:var(--ac)}
.s3-rail button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.s3-rail span{font-size:12px;color:var(--mu);margin-left:10px;font-variant-numeric:tabular-nums}
.s3-skip{position:absolute;z-index:3;right:max(24px,calc((100vw - var(--max))/2 + 24px));top:124px;font-size:13px;color:var(--mu);text-decoration:underline;text-underline-offset:3px}
.s3-skip:hover{color:var(--fg)}
.s3-note{position:absolute;z-index:3;right:max(24px,calc((100vw - var(--max))/2 + 24px));top:92px;font-size:11px;color:var(--mu);border:1px solid var(--ln);border-radius:99px;padding:2px 10px}
@media(max-width:900px){
  .s3-stage{inset:56px 0 auto 0;height:52svh}
  .s3-pin::after{background:linear-gradient(transparent 38%,var(--bg) 60%)}
  .s3-step{left:0;right:0;width:auto;top:auto;bottom:70px;transform:translateY(12px);max-height:50svh;overflow:auto}
  .s3-step.on{transform:none}
  .s3-step h2{font-size:clamp(24px,6.4vw,34px)}
  .s3-step>:nth-child(2):not(.dkcta){display:none}
  .s3-step p.s{margin-top:10px}
  .s3-note{top:76px}.s3-skip{top:104px}.s3-rail{bottom:86px}.s3-step{bottom:120px}
}
.s3.flat .s3-pin{height:auto;overflow:visible;padding:72px 0}
.s3.flat .s3-pin::after,.s3.flat .s3-stage,.s3.flat .s3-rail,.s3.flat .s3-skip,.s3.flat .s3-note{display:none}
.s3.flat .s3-steps{height:auto;display:grid;gap:64px}
.s3.flat .s3-step{position:static;opacity:1;transform:none;width:auto;max-width:720px;pointer-events:auto;max-height:none}
.s3.flat .s3-step [data-ui]{display:block}
.s3.flat .s3-step>:nth-child(2){display:block}

/* ---------- cards and panels ---------- */
.card{border-radius:26px}
.pp{position:relative;overflow:hidden;padding:40px;border-radius:32px}
.pp.al{background:radial-gradient(600px 300px at 100% 0%,#14585F,transparent 70%),#0C3A3F}
.band{border-radius:36px;background:radial-gradient(700px 360px at 90% 10%,#6D64F5,transparent 60%),var(--ind)}
.band h2{font-size:clamp(34px,5vw,68px)}
.quote{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.wont li{transition:padding .5s var(--ease2),color .3s}
.wont li:hover{padding-left:14px;color:var(--ind)}
.ch{font-size:clamp(17px,2vw,24px);padding:18px 30px}
footer{padding-top:110px}
.giant{font-size:clamp(70px,18.5vw,300px);-webkit-text-stroke:1.5px #CFC8F7;padding:30px 0 20px;white-space:nowrap}

h1[tabindex="-1"]:focus{outline:none}
.bpu{opacity:1;transform:none;transition:none}
/* ---------- compact blueprint result ---------- */
.bpstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 6px}
.bpstats div{border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.bpstats b{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.bpstats span{font-size:12.5px;color:var(--mute)}
.bpplan details{padding:16px 0}
.bpplan summary{font-size:16px}
.bpplan details h4{font-size:14px;font-weight:600;margin:18px 0 0}
.bpplan details .ul{margin-top:8px}
@media(max-width:520px){.bpstats{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.h3-scroll i{animation:none}}

/* ---------- Yardie: blueprint buddy ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bpg{align-items:stretch}
.card.bpplan{position:relative;height:clamp(460px,58vh,540px);min-height:0;padding:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#fff 0%,#F3F1FF 52%,#E4E0FB 100%);border-color:#DCD7FA}
.card.bpplan::before{display:none}
.card.bpplan:hover{transform:none}
.bud{position:absolute;inset:0}
.bud::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:radial-gradient(rgba(79,70,229,.16) 1.4px,transparent 1.6px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000);pointer-events:none}
.bud-stage{position:absolute;inset:44px 0 0 0;cursor:pointer;transform-origin:100% 0;transition:transform .8s var(--ease2),inset .8s var(--ease2)}
.bud-stage canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
.bud.is-live .bud-stage canvas{opacity:1}
.bud-still{display:none;position:absolute;left:50%;top:50%;width:min(56%,240px);transform:translate(-50%,-46%)}
.bud.is-still .bud-still{display:block}
.bud.is-still canvas{display:none}
.bud-bub{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:3;max-width:min(86%,340px);background:var(--ink);color:#fff;font-size:14px;font-weight:500;line-height:1.35;padding:10px 16px;border-radius:16px;text-align:center;box-shadow:0 14px 30px -14px rgba(30,27,75,.6);transition:top .8s var(--ease2),left .8s var(--ease2),transform .8s var(--ease2)}
.bud-bub::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bud-dots{display:none;gap:4px;margin-left:8px;vertical-align:middle}
.bud-bub.think .bud-dots{display:inline-flex}
.bud-dots b{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:bdot 1s ease-in-out infinite}
.bud-dots b:nth-child(2){animation-delay:.15s}.bud-dots b:nth-child(3){animation-delay:.3s}
@keyframes bdot{50%{transform:translateY(-4px);opacity:.4}}
.bud-name{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;color:var(--mute);letter-spacing:.02em;z-index:2}
.bud.is-mini .bud-stage{inset:0 4px auto auto;width:132px;height:150px;z-index:4}
.bud.is-mini .bud-bub{left:auto;right:132px;top:18px;transform:none;font-size:12.5px;padding:7px 12px;z-index:4}
.bud.is-mini .bud-bub::after{left:auto;right:-5px;bottom:auto;top:50%;transform:translateY(-50%) rotate(45deg)}
.bud.is-mini .bud-name,.bud.is-mini::after{display:none}
.bps-fly{position:fixed;z-index:500;margin:0;pointer-events:none}
/* result window */
.bres{position:absolute;inset:0;z-index:3;background:#fff;display:flex;flex-direction:column;padding:22px 0 18px}
.bres[hidden]{display:none}
.bres-h{display:flex;align-items:center;gap:12px;padding:0 150px 0 24px;margin-bottom:14px;min-height:34px}
.bres-h .tag{margin:0}
.bres-nav{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:12px}
.bres-a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:15px;transition:border-color .2s,background .2s}
.bres-a:hover{border-color:var(--ind);background:var(--mist)}
.bres-dots{display:flex;gap:6px}
.bres-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:#D9D4FA;cursor:pointer;transition:width .3s var(--ease2),background .3s}
.bres-dots button[aria-current]{width:22px;border-radius:5px;background:var(--ind)}
.bres-track{flex:1;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px 24px 6px;scrollbar-width:thin;overscroll-behavior-x:contain}
.bres-track:focus-visible{outline:3px solid var(--ind);outline-offset:-3px;border-radius:14px}
.bc{flex:0 0 calc(100% - 56px);scroll-snap-align:start;border:1px solid var(--line);border-radius:22px;padding:20px 22px;background:linear-gradient(#fff,#FBFAFF);display:flex;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
.bc-k{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ind)}
.bc-t{font-size:clamp(19px,1.8vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.bc-big{display:flex;align-items:center;gap:14px}
.bc-big b{font-size:clamp(56px,6vw,78px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ind);font-variant-numeric:tabular-nums;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 92%/100% .2em}
.bc-big span{font-size:14px;color:var(--mute);line-height:1.35}
.bc-pills{display:flex;flex-wrap:wrap;gap:6px}
.bc-pills span{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:99px;background:var(--mist);color:var(--ink)}
.bc-n{font-size:14px;color:var(--mute);line-height:1.45;margin-top:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-n b{color:var(--ink)}
.bc-bars{display:grid;gap:9px;margin-top:4px}
.bc-bars li{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;font-size:13px}
.bc-bars b{font-weight:600}
.bc-tr{position:relative;height:14px;border-radius:7px;background:var(--mist)}
.bc-tr i{position:absolute;top:0;bottom:0;border-radius:7px;background:var(--lime);box-shadow:0 0 0 1.5px var(--ind) inset}
.bc-tr i.on{background:repeating-linear-gradient(90deg,var(--lime) 0 8px,#E6FB9A 8px 14px)}
.bc-ax{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);margin-left:96px}
.bc-ag{display:flex;flex-wrap:wrap;gap:8px}
.bc-ag li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--line);background:#fff}
.bc-ag i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lime);font-size:11px;font-weight:700}
.bc-rk{display:grid;gap:8px}
.bc-rk li{font-size:14px;line-height:1.4;padding:10px 12px;border-radius:12px;background:#FFF8DB;color:#5A3A00}
.bc-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.bc-cta .btn{padding:11px 16px;font-size:14px}
.bc-f{font-size:11.5px;color:var(--mute)}
@media(max-width:940px){.card.bpplan{height:540px}}
.bres{padding-bottom:14px}
@media(max-width:520px){.bres-h{padding-right:116px}.bc{flex-basis:calc(100% - 36px);padding:16px}.bud.is-mini .bud-stage{width:104px;height:120px}.bud.is-mini .bud-bub{display:none}.bc-bars li{grid-template-columns:72px 1fr}.bc-ax{margin-left:82px}}
@media(prefers-reduced-motion:reduce){.bud-dots b{animation:none}}

/* ---------- holographic blueprint overlay ---------- */
.bud.is-holo .bud-stage{inset:0;cursor:grab}
.bud.is-holo .bud-name,.bud.is-holo::after{display:none}
.bud.is-holo .bud-bub{left:auto;right:18px;top:16px;transform:none;font-size:12.5px;padding:7px 12px;max-width:220px}
.bud.is-holo .bud-bub::after{left:auto;right:28px}
.bres.holo{background:transparent;padding:0;pointer-events:none;display:block}
.bres.holo>*{pointer-events:auto}
.bh-labels{position:absolute;inset:0;pointer-events:none!important;overflow:hidden}
.bh-l{position:absolute;left:0;top:0;white-space:nowrap;font-size:11.5px;font-weight:500;line-height:1.25;padding:4px 9px;border-radius:9px;background:rgba(255,255,255,.92);color:var(--mute);border:1px solid var(--line);box-shadow:0 6px 16px -10px rgba(30,27,75,.4);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s;will-change:transform}
.bh-l b{display:block;color:var(--ink);font-weight:600;font-size:12px}
.bh-s.hov,.bres[data-view="1"] .bh-s{opacity:1}
.bres[data-view="2"] .bh-a{opacity:1}
.bh-a{background:#fff;color:var(--ink);border:1px solid var(--line);font-size:11px;padding:3px 8px}
.bh-r{background:#F5A524;color:#1E1B4B;font-weight:700;width:22px;height:22px;padding:0;display:grid;place-items:center;border-radius:50%}
.bres[data-view="3"] .bh-r,.bres[data-view="1"] .bh-r{opacity:1}
.bh-f{background:var(--lime);color:var(--ink);font-weight:600;font-size:12.5px}
.bres[data-view="0"] .bh-f,.bres[data-view="3"] .bh-f{opacity:1}
.bh-top{position:absolute;left:20px;top:16px;display:flex;align-items:center;gap:8px}
.bh-tag{margin:0;background:rgba(255,255,255,.8);backdrop-filter:blur(6px)}
.bh-edit{font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:99px;padding:5px 12px;cursor:pointer;transition:border-color .2s}
.bh-edit:hover{border-color:var(--ind)}
.bpg.is-wide{grid-template-columns:1fr}
.bpg.is-wide>.card:first-child{display:none}
.bh-panel{position:absolute;left:18px;bottom:72px;width:min(272px,38%);padding:18px 18px 16px;border-radius:20px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 50px -28px rgba(30,27,75,.5);display:flex;flex-direction:column;gap:9px;max-height:calc(100% - 150px);overflow:auto}
.bh-panel:focus{outline:none}
.bh-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ind)}
.bh-t{font-size:clamp(18px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.bh-big{display:flex;align-items:center;gap:12px}
.bh-big b{font-size:clamp(48px,5vw,64px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ind);font-variant-numeric:tabular-nums;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 92%/100% .2em}
.bh-big span{font-size:13px;color:var(--mute);line-height:1.35}
.bh-n{font-size:13.5px;color:var(--mute);line-height:1.45}
.bh-n b{color:var(--ink)}
.bh-hint{font-size:12px;color:var(--ind);font-weight:500}
.bh-rk{display:grid;gap:7px}
.bh-rk li{font-size:13px;line-height:1.4;padding:8px 10px;border-radius:10px;background:#FFF3D6;color:#6B4200;border-left:3px solid #F5A524}
.bh-nav{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.bh-tabs{display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid var(--line)}
.bh-tabs button{font:inherit;font-size:12.5px;font-weight:500;border:none;background:none;color:var(--mute);padding:6px 12px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s}
.bh-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.bh-tabs button:hover{color:var(--ink)}
.bh-tabs button[aria-selected="true"]:hover{color:#fff}
.bh-drag{position:absolute;right:20px;bottom:64px;font-size:11px;color:var(--mute);pointer-events:none!important}
@media(max-width:940px){
  .bh-panel{left:12px;right:12px;width:auto;bottom:62px;max-height:44%}
  .bh-nav{left:8px;right:8px;bottom:12px}
  .bh-tabs button{padding:6px 9px;font-size:12px}
  .bh-drag{display:none}
  .bh-tag{left:12px;top:12px}
}
@media(max-width:520px){.bh-nav .bres-a{display:none}.bh-big b{font-size:44px}.bh-l{font-size:10.5px}}
.bh-s em{display:none;font-style:normal}
.bh-s.hov em{display:block}
.bh-s.hov{z-index:2;border-color:var(--ind)}
@media(max-width:940px){
  .bud.is-holo .bud-bub{display:none}
  .bh-top{display:none}
  .bh-nav{top:12px;bottom:auto}
  .bh-nav .bres-a{display:none}
  .bh-panel{bottom:14px;max-height:46%}
}

/* holo layout: text never overlaps the 3D scene */
.card.bpplan{--hl:clamp(290px,27%,340px)}
@media(min-width:941px){
  .bud.is-holo .bud-stage,.bres.holo .bh-labels{left:var(--hl);right:0;top:0;bottom:0}
  .bres.holo .bh-panel{left:16px;top:64px;bottom:auto;width:calc(var(--hl) - 28px);max-height:calc(100% - 80px);background:rgba(255,255,255,.86);box-shadow:0 18px 40px -28px rgba(30,27,75,.45)}
  .bres.holo .bh-nav{left:var(--hl);right:16px}
  .bud.is-holo .bud-bub{right:18px}
}
@media(max-width:940px){
  .bud.is-holo .bud-stage,.bres.holo .bh-labels{top:54px;bottom:46%;left:0;right:0}
  .bres.holo .bh-panel{top:auto;bottom:12px;max-height:calc(46% - 22px)}
}
@media(max-width:940px){.bh-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* ---------- solution model chapters ---------- */
.bh-l{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.bh-l.on{opacity:1;visibility:visible;transition:opacity .35s}
.bh-l i{font-style:normal;color:var(--mute);font-weight:400}
.bh-td{font-weight:600;color:var(--ink)}
.bh-td.dash,.bh-p.dash{border-style:dashed}
.bh-p{background:#FFF3D6;border-color:#F5C66A;color:#6B4200;font-weight:500;max-width:200px;white-space:normal;text-align:center}
.bh-c.ok{border-color:#9FE3C4}
.bh-g{background:var(--ink);color:#fff;border-color:var(--ink)}
.bh-m{text-align:center}
.bh-m em{display:block;font-style:normal;font-size:11px;color:var(--mute)}
.bh-m.bh-live{background:var(--lime);border-color:var(--lime)}
.bh-m.bh-live b,.bh-m.bh-live em{color:var(--ink)}
.bh-w{background:var(--ind);color:#fff;border-color:var(--ind);font-weight:600}
.bh-s,.bh-a,.bh-r,.bh-f{display:none}
.bh-send{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--lime);border:none;border-radius:99px;padding:6px 13px;cursor:pointer}
.bh-replay{position:absolute;right:12px;top:12px;font:inherit;font-size:11.5px;color:var(--ind);background:none;border:1px solid var(--line);border-radius:99px;padding:3px 9px;cursor:pointer}
.bh-replay:hover{border-color:var(--ind)}
.bh-body{display:flex;flex-direction:column;gap:9px}
.bh-ls{display:grid;gap:7px;font-size:13px;line-height:1.4}
.bh-ls li{color:var(--mute)}
.bh-ls li b{color:var(--ink);font-weight:600}
.bh-ls li span{display:block;font-size:12.5px}
.bh-as{font-style:normal;font-size:11px;font-weight:600;color:#8A5100;background:#FFF3D6;border-radius:99px;padding:1px 7px;margin-left:4px}
.bh-rows .bh-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--line)}
.bh-rows .bh-row span{display:inline;color:var(--ink);font-variant-numeric:tabular-nums}
.bh-rows .bh-row em{font-style:normal;font-size:11.5px;color:var(--ind)}
.bh-all{font:inherit;font-size:12.5px;font-weight:500;color:var(--ind);background:none;border:none;padding:0;cursor:pointer;justify-self:start;text-align:left}
.bh-t b{color:var(--ind)}
.bh-start{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--mute)}
.bh-start select{width:auto;padding:5px 8px;font-size:13px;border-radius:9px}
.bh-cta{margin-top:4px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#F4FBE3,#EEEBFF);border:1px solid #DCEFA6;display:grid;gap:6px}
.bh-cta b{font-size:14.5px;color:var(--ink)}
.bh-cta>span{font-size:12.5px;color:var(--mute);line-height:1.4}
.bh-cta .btn{justify-self:start;padding:9px 14px;font-size:13.5px}
.bh-tabs button i{font-style:normal;font-size:10.5px;font-weight:700;margin-right:5px;opacity:.6}
@media(max-width:940px){.bh-tabs button{padding:6px 8px;font-size:11.5px}.bh-tabs button i{display:none}.bh-cta>span{display:none}}
.bh-z{background:#E7F8F0;border-color:#9FE3C4;color:#176B4D;font-weight:600}
.bh-c{font-weight:600;color:var(--ink);font-size:12px}

/* ---------- blueprint lead dialog ---------- */
.bpd{position:fixed;inset:0;margin:auto;height:fit-content;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:22px;padding:0;background:#fff;color:var(--ink);box-shadow:0 40px 90px -30px rgba(30,27,75,.55)}
.bpd::backdrop{background:rgba(30,27,75,.38);backdrop-filter:blur(4px)}
.bpd[open]{animation:bpdIn .35s var(--ease)}
@keyframes bpdIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.bpd-b{padding:26px 26px 22px}
.bpd-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:transparent;font-size:24px;line-height:1;color:var(--mute);cursor:pointer}
.bpd-x:hover{background:var(--mist);color:var(--ink)}
.bpd-k{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ind);margin-bottom:6px}
.bpd h3{font-size:22px;line-height:1.2;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.bpd-n{color:var(--mute);font-size:14.5px;line-height:1.5;margin:0 0 14px}
.bpd-n b{color:var(--ink);font-weight:600}
.bpd-what{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.bpd-what li{display:grid;gap:1px;padding:10px 12px 10px 36px;border-radius:12px;background:var(--mist);position:relative;font-size:14px}
.bpd-what li:before{content:"";position:absolute;left:13px;top:15px;width:12px;height:12px;border-radius:4px;background:var(--lime);box-shadow:inset 0 0 0 2px #fff}
.bpd-what span{color:var(--mute);font-size:12.5px}
.bpd-form{display:grid;gap:10px}
.bpd-f{display:grid;gap:5px;font-size:13px;font-weight:500;min-width:0}
.bpd-f input,.bpd-f select{font:inherit;font-size:15px;font-weight:400;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink);width:100%;min-width:0}
.bpd-f input:focus,.bpd-f select:focus{outline:2px solid var(--ind);outline-offset:1px;border-color:var(--ind)}
.bpd-e{font-style:normal;font-size:12px;color:#B42318;min-height:0}
.bpd-e:empty{display:none}
.bpd-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.bpd-2{grid-template-columns:1fr}.bpd-b{padding:22px 18px 18px}}
.bpd-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.bpd-go{justify-self:stretch;justify-content:center}
.bpd-fine{font-size:12px;color:var(--mute);margin:0;line-height:1.45}
.bpd-msg{font-size:13px;margin:0;line-height:1.45}
.bpd-msg:empty{display:none}
.bpd-msg.bad{color:#7A2E0E;background:#FFF4ED;border:1px solid #F9DBC9;padding:10px 12px;border-radius:11px}
.bpd-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bpd-t{font:inherit;font-size:13px;font-weight:500;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.bpd-t:hover{border-color:var(--ind)}
.bpd-t.ok{background:#E7F8F0;border-color:#9FE3C4;color:#176B4D}
.bpd-skip{font:inherit;font-size:13px;border:0;background:none;color:var(--mute);cursor:pointer;text-decoration:underline;justify-self:center;padding:4px}
.bpd-ok{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#E7F8F0;margin:0 0 18px}
.bpd-ok div{display:grid;gap:2px;font-size:14px}
.bpd-ok span:not(.bpd-tick){color:#2D5F4B;font-size:13px}
.bpd-tick{flex:none;width:26px;height:26px;border-radius:50%;background:#2FBF8F;color:#fff;display:grid;place-items:center;font-size:14px}
.bpd-tick.big{width:52px;height:52px;font-size:26px;margin:4px auto 14px}
.bpd-done{text-align:center;padding:8px 0}
.bpd-done .btn{margin-top:4px}
html.bpd-open{overflow:hidden}
/* printable brief: only the brief prints */
#bp-print{display:none}
@media print{
  html.printing-bp body>*:not(#bp-print){display:none!important}
  html.printing-bp #bp-print{display:block;padding:0 4mm}
  html.printing-bp #bp-print a{color:#4F46E5}
  @page{margin:14mm}
}

/* ---------- privacy page ---------- */
.pv{max-width:760px}
.pv-upd{color:var(--mute);font-size:14px;margin:0 0 8px}
.pv h2{font-size:22px;letter-spacing:-.01em;margin:40px 0 12px}
.pv p,.pv li{color:var(--ink);font-size:16px;line-height:1.65}
.pv p{margin:0 0 12px}
.pv-l{margin:0 0 12px;padding-left:20px;display:grid;gap:6px;list-style:disc}
.pv-l li::marker{color:var(--ind)}
.pv-s{padding:64px 0 96px}
.pv-t{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:0 0 14px}
.pv-t table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.pv-t th{text-align:left;font-weight:600;background:var(--mist);padding:12px 14px}
.pv-t td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;line-height:1.5}
.pv-t td:first-child{font-weight:600;width:28%}

/* ---------- contrast (WCAG 2.2 AA) ---------- */
/* story steps: dim the inactive ones with a readable grey instead of transparency */
@media(min-width:941px){
  .sstep{opacity:1}
  .sstep h3,.sstep p,.sstep .n{transition:color .5s}
  .sstep:not(.on) h3,.sstep:not(.on) p,.sstep:not(.on) .n{color:#6E6B8F}
}
/* placeholder text in the Xessly demo: still reads as a placeholder, now 4.7:1 */
.fld .inp{color:#6B7480}
/* Xessly demo, scanning stage: say "Scanning…" instead of showing the finding faded */
.xui-f{opacity:1}
.xui[data-state="0"] .xui-f>*{visibility:hidden}
.xui[data-state="0"] .xui-f{position:relative}
.xui[data-state="0"] .xui-f::before{content:"Scanning\2026";position:absolute;left:12px;top:12px;font-size:12px;font-weight:600;color:#5B6773}

/* spam trap fields: off-screen, skipped by keyboard and screen readers */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- design audit fixes ---------- */
/* stuck reveals: children stagger in with CSS, visible by default */
.stg>*{transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--si,0)*70ms)}
.stg-wait>*{opacity:0;transform:translateY(28px)}
.wont.stg-wait>*{transform:translateX(-28px)}
.split .w.wp{margin-left:-.14em}
/* text on violet */
.card.ind li{color:rgba(255,255,255,.92)}
.card.ind p,.band p{color:rgba(255,255,255,.92)}
/* phone: a toolbar to edit the brief or email the blueprint, always visible */
@media(max-width:940px){
  .card.bpplan:has(.bres.holo){height:610px}
  .bres.holo .bh-top{display:flex;position:absolute;left:12px;right:12px;top:auto;bottom:12px;justify-content:space-between;pointer-events:auto}
  .bres.holo .bh-top .bh-tag{display:none}
  .bres.holo .bh-panel{bottom:60px;max-height:calc(46% - 66px)}
  .bud.is-holo .bud-stage,.bres.holo .bh-labels{bottom:calc(46% + 4px)}
}
.bh-tabs .ts{display:none}
@media(max-width:940px){.bh-tabs .tl{display:none}.bh-tabs .ts{display:inline}}
/* product we already built */
.bh-prod{display:grid;gap:2px;margin:10px 0 12px;padding:10px 12px;border-radius:12px;background:#F4FBE3;border:1px solid #DCEFA6;color:var(--ink);text-decoration:none;font-size:13px;line-height:1.4}
.bh-prod b{font-size:13.5px}
.bh-prod span{color:#3E5A5D}
.bh-prod em{font-style:normal;font-weight:600;color:var(--ind)}
.bh-prod:hover{border-color:var(--ind)}
/* Allocivo demo card on narrow screens: chips wrap, recommendation never clipped */
@media(max-width:440px){
  .aui-row{flex-wrap:wrap;row-gap:6px}
  .aui-row span{flex:1 1 calc(100% - 50px)}
  .aui-row em{margin-left:44px}
  .aui[data-state="2"] .aui-rec,.aui[data-state="3"] .aui-rec{max-height:300px}
}
/* floating dock: keyboard features, so not on phones and touch screens */
@media(max-width:767px),(pointer:coarse){.dock{display:none!important}}
/* required fields */
.req{color:#B42318;font-weight:600}
.reqn{font-size:13px;color:var(--mute);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* yard menu: shortcut switch */
.glk{font:inherit;font-size:12px;background:none;border:1px solid currentColor;border-radius:99px;padding:2px 10px;color:inherit;cursor:pointer;opacity:.85}
.glk[aria-pressed="false"]{opacity:1;background:rgba(255,255,255,.12)}
/* privacy table: stacked cards on phones */
@media(max-width:600px){
  .pv-t{border:0;overflow:visible}
  .pv-t table{min-width:0}
  .pv-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pv-t tr{display:block;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
  .pv-t td{display:block;border-top:1px solid var(--line);width:auto!important}
  .pv-t td:first-child{border-top:0;background:var(--mist)}
  .pv-t td:not(:first-child)::before{content:attr(data-l);display:block;font-size:12px;font-weight:600;color:var(--mute);margin-bottom:2px}
}

/* assistant button: compact on phones, out of the way over the blueprint result and the footer */
.astb{transition:opacity .3s,transform .3s}
body.ast-away .astb:not([aria-expanded="true"]){opacity:0;pointer-events:none;transform:translateY(16px)}
@media(max-width:767px){
  .astb{right:14px;bottom:14px;padding:11px 16px}
  .astb span{font-size:0}
  .astb span::after{content:"Ask";font-size:14px}
}
.lt{display:inline}

/* ---------- audit decisions ---------- */
/* prices */
.st{grid-template-columns:1.1fr 2.6fr .9fr}
.stnote{margin-top:16px;color:var(--mute);font-size:15px}
/* inner pages: shorter, quieter headers; the italic accent belongs to the home page only */
.ph{padding:168px 0 72px}
.ph h1{font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.04em}
.page:not(#p-home) .split mark{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;padding-right:0}
/* privacy: a plain document header */
.ph.ph-doc{background:var(--mist);color:var(--ink);padding:150px 0 40px}
.ph.ph-doc h1{color:var(--ink);font-size:clamp(36px,4.4vw,52px)}
.ph.ph-doc .lead{color:var(--mute)}
.ph.ph-doc .eyebrow{color:var(--ind)}
.ph.ph-doc .wrap{transform:none!important;opacity:1!important}
/* promises are commitments, so a check rather than a cross */
.wont li::before{content:"\2713";font-weight:700}
/* product pages wear their own brand: Allocivo teal with lime, Xessly indigo with mint */
#p-allocivo{--ind:#0C5A60;--ind2:#08454A}
#p-xessly{--lime:#8FF2CC}

/* 3D stories: badges sit on a solid ground above the scene; the counter never wraps */
.s3-note,.s3-skip{z-index:4;background:rgba(6,20,24,.88);backdrop-filter:blur(6px)}
.s3-skip{padding:3px 10px;border-radius:99px;border:1px solid var(--ln)}
.s3.xs .s3-note,.s3.xs .s3-skip{background:rgba(16,22,29,.9)}
.s3-rail span{white-space:nowrap}
@media(max-width:700px){.s3-rail{gap:3px}.s3-rail button{width:18px}.s3-rail span{margin-left:6px}}
/* hero copy stays readable when the animated dots pass behind it */
.hero3 .micro{color:#C9C6F2}
.hero3 .lead,.hero3 .micro,.hero3 h1{text-shadow:0 1px 2px rgba(11,10,36,.9),0 0 18px rgba(11,10,36,.95)}

/* ---------- home 'Our products': matched twin cards ---------- */
.prods{align-items:stretch}
.pp{gap:12px}
.pp.xs{background:radial-gradient(600px 300px at 100% 0%,#2C2678,transparent 70%),#10161D;border-color:#10161D;color:#fff}
.pp.xs .tag{background:rgba(255,255,255,.12);color:#fff}
.pp.xs h3,.pp.al h3{color:#fff}
.pp .pp-what{margin:0;font-size:16px;line-height:1.55;max-width:46ch}
.pp.al .pp-what{color:#CFE3E1}
.pp.xs .pp-what{color:#C9D2DC}
.pp [data-ui]{min-height:318px;margin:4px 0 2px}
.pp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.pp-steps li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);transition:background .35s,color .35s,box-shadow .35s}
.pp-steps b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;background:rgba(255,255,255,.12);color:#fff;transition:background .35s,color .35s}
.pp-steps li.on{background:rgba(255,255,255,.12);color:#fff}
.pp.al .pp-steps li.on{box-shadow:inset 0 0 0 1.5px var(--lime)}
.pp.xs .pp-steps li.on{box-shadow:inset 0 0 0 1.5px #8FF2CC}
.pp.al .pp-steps li.on b,.pp.al .pp-steps li.done b{background:var(--lime);color:#06262A}
.pp.xs .pp-steps li.on b,.pp.xs .pp-steps li.done b{background:#8FF2CC;color:#10161D}
.pp-steps li.done{color:#fff}
.pp-out{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pp-out li{font-size:12.5px;padding:4px 10px;border-radius:99px}
.pp.al .pp-out li{background:rgba(198,244,50,.14);color:#E8FBB0}
.pp.xs .pp-out li{background:rgba(143,242,204,.14);color:#C9FBE8}
.pp-act{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn.mint{background:#8FF2CC;color:#10161D}
.btn.mint:hover{box-shadow:0 12px 30px -8px rgba(143,242,204,.55)}
.pp-lnk{font-weight:500;font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.pp-lnk:hover{text-decoration-color:currentColor}
@media(max-width:560px){.pp-steps{grid-template-columns:1fr}.pp [data-ui]{min-height:0}}

/* twin cards, round 2 */
.pp h3{margin-bottom:4px}
.pp-steps li{padding:0;background:none}
.pp-steps button{all:unset;box-sizing:border-box;position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:9px 10px;border-radius:12px;cursor:pointer;
  font-size:13.5px;font-weight:500;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);transition:background .3s,color .3s,box-shadow .3s}
.pp-steps button:hover{background:rgba(255,255,255,.1);color:#fff}
.pp-steps button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pp-steps li.on button{background:rgba(255,255,255,.12);color:#fff}
.pp.al .pp-steps li.on button{box-shadow:inset 0 0 0 1.5px var(--lime)}
.pp.xs .pp-steps li.on button{box-shadow:inset 0 0 0 1.5px #8FF2CC}
.pp-steps li.done button{color:#fff}
.pp-steps li.on,.pp-steps li.done{box-shadow:none;background:none}
/* a thin bar fills while the demo is on this step; it stops when the visitor picks a step */
.pp-steps li.on button::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;transform-origin:left;animation:ppfill var(--sd,2000ms) linear forwards}
.pp.al .pp-steps li.on button::after{background:var(--lime)}
.pp.xs .pp-steps li.on button::after{background:#8FF2CC}
.pp.held .pp-steps li.on button::after{animation:none;transform:scaleX(1);opacity:.5}
@keyframes ppfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.pp-steps li.on button::after{display:none}}

/* both demos the same height, and the two cards share rows, so every part lines up */
@media(min-width:561px){
  .pp [data-ui]{height:356px;min-height:0}
  .pp [data-ui]>.aui,.pp [data-ui]>.xui{height:100%;box-sizing:border-box}
  .pp [data-ui]>.xui{display:flex;flex-direction:column}
  .pp [data-ui]>.xui .xui-b{flex:1}
}
@media(min-width:941px){
  @supports (grid-template-rows:subgrid){
    .prods{grid-template-rows:repeat(8,auto);row-gap:0}
    .prods>.pp{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:12px;justify-items:start;align-content:start}
    .prods>.pp>[data-ui],.prods>.pp>.pp-steps,.prods>.pp>.pp-now{justify-self:stretch}
    .prods>.pp>.pp-act{align-self:end}
  }
}

/* the line under the tabs says what the product is doing right now */
.pp-now{margin:0;min-height:2.9em;font-size:15px;line-height:1.45;font-weight:500;color:#fff;display:flex;align-items:center;gap:10px}
.pp-now::before{content:"";flex:none;width:8px;height:8px;border-radius:50%}
.pp.al .pp-now::before{background:var(--lime);box-shadow:0 0 12px var(--lime)}
.pp.xs .pp-now::before{background:#8FF2CC;box-shadow:0 0 12px #8FF2CC}
.pp-now.fresh{animation:ppnow .45s var(--ease)}
@keyframes ppnow{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.pp-now.fresh{animation:none}}
.pp h3{font-size:clamp(22px,2.2vw,27px)}
.pp.al .pp-now,.pp.xs .pp-now{color:#fff}

/* ---------- product subdomain sites ---------- */
.plogo span{display:flex;flex-direction:column;line-height:1.05}
.plogo small{font-size:11.5px;font-weight:500;letter-spacing:0;opacity:.7;margin-top:2px}
body.prod-al{--ind:#0C5A60;--ind2:#08454A}
body.prod-xs{--lime:#8FF2CC}
/* the header already names the product, so the intro starts with its promise */
.prod-site .prodhero .phl>.pl{display:none}
.prod-site .prodhero{padding-top:150px}

/* ===================================================================== */
/* Glass header: frosted surfaces with a thin neon edge (lime, indigo, mint). */
/* Light glass over light sections, dark glass over dark ones.             */
/* ===================================================================== */
:root{
  --gl-light:linear-gradient(135deg,rgba(255,255,255,.86),rgba(250,249,255,.74));
  --gl-dark:linear-gradient(135deg,rgba(34,30,88,.74),rgba(11,10,36,.66));
  --gl-blur:blur(36px) saturate(1.8);
  --gl-edge:linear-gradient(120deg,rgba(198,244,50,.95),rgba(124,116,255,.75) 38%,rgba(143,242,204,.8) 68%,rgba(198,244,50,.95));
  --gl-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -36px rgba(30,27,75,.5),0 0 44px -14px rgba(198,244,50,.35);
  --gl-shadow-d:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -36px rgba(0,0,0,.75),0 0 48px -12px rgba(124,116,255,.45);
}
/* the neon edge: a 1px gradient ring drawn with a mask, so the inside stays clear */
.gl-edge::before,
header#hdr.sc .nav::before,
.mmp>.mmg::before{z-index:1;content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--gl-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
/* the sheen: a soft highlight across the top */
.mmp>.mmg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(700px 180px at 18% -60px,rgba(255,255,255,.75),transparent 70%)}

/* ---------- header bar: transparent at the top, a floating glass pill once scrolled ---------- */
header#hdr,header#hdr.mm-on{background:transparent;box-shadow:none}
header#hdr.sc,header#hdr.on-dark:not(.mm-on).sc{background:transparent;box-shadow:none;backdrop-filter:none}
header#hdr .nav{position:relative;z-index:0;border-radius:20px;transition:height .3s var(--ease),margin .3s var(--ease),padding .3s}
header#hdr .nav::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0}
header#hdr.sc .nav{margin-top:10px;height:60px;padding-left:20px;padding-right:12px}
header#hdr.sc .nav::after{opacity:1;background:var(--gl-light);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--gl-shadow)}
header#hdr.sc.on-dark .nav::after{background:var(--gl-dark);box-shadow:var(--gl-shadow-d)}
header#hdr.sc.on-dark .nav::before{opacity:.55}
/* while a menu is open over a dark section, the bar keeps its dark styling */
header#hdr.on-dark.mm-on{color:#fff}
header#hdr.on-dark.mm-on .logo b{color:var(--lime)}
@media(min-width:941px){
  header#hdr.on-dark.mm-on .menu a.l,header#hdr.on-dark.mm-on .menu .mmb{color:rgba(255,255,255,.72)}
  header#hdr.on-dark.mm-on .menu .mmb:hover,header#hdr.on-dark.mm-on .mm.open .mmb,header#hdr.on-dark.mm-on .menu a.l:hover{color:#fff}
  header#hdr.on-dark.mm-on .menu .btn.pri{background:var(--lime);color:var(--ink)}
}

/* ---------- mega menus: a floating glass card ---------- */
@media(min-width:941px){
  .mmp{background:none;border:0;box-shadow:none;padding:0 16px}
  .mmp>.mmg{position:relative;margin:10px auto 0;max-width:min(1120px,100%);border-radius:26px;padding:28px 28px 28px 32px;
    background:var(--gl-light);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--gl-shadow);isolation:isolate}
  /* the glass slides in at full strength (a fading parent would switch the blur off until the fade ends);
     only the contents fade */
  .mm.open .mmp{animation:none}
  .mm.open .mmp>.mmg{animation:glin .42s var(--ease2)}
  .mm.open .mmp>.mmg>*{animation:glfade .32s ease .05s both}
  .mml a{position:relative;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
  .mml a:hover,.mml a:focus-visible{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(124,116,255,.22),0 10px 26px -16px rgba(79,70,229,.6);transform:translateY(-1px)}
  .mmf{background:linear-gradient(160deg,rgba(198,244,50,.22),rgba(124,116,255,.12));border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
  .mmf:hover{border-color:rgba(124,116,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 28px -8px rgba(198,244,50,.6)}
  .mmcard{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
  .mmcard:hover{border-color:rgba(124,116,255,.5)}
  .mmsub a{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(124,116,255,.14)}

  /* dark glass over dark sections */
  header#hdr.on-dark .mmp>.mmg{background:var(--gl-dark);box-shadow:var(--gl-shadow-d);color:#fff}
  header#hdr.on-dark .mmp>.mmg::after{background:radial-gradient(700px 180px at 18% -60px,rgba(255,255,255,.16),transparent 70%)}
  header#hdr.on-dark .mmh{color:rgba(255,255,255,.62)}
  header#hdr.on-dark .mml b,header#hdr.on-dark .mmf b,header#hdr.on-dark .mmc-top b{color:#fff}
  header#hdr.on-dark .mml span,header#hdr.on-dark .mmf span,header#hdr.on-dark .mmc-top small{color:rgba(255,255,255,.74)}
  header#hdr.on-dark .mml a:hover,header#hdr.on-dark .mml a:focus-visible{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(198,244,50,.28),0 10px 30px -16px rgba(198,244,50,.45)}
  header#hdr.on-dark .mmf{background:linear-gradient(160deg,rgba(198,244,50,.14),rgba(124,116,255,.16));border-color:rgba(255,255,255,.14);box-shadow:none}
  header#hdr.on-dark .mmf em{color:var(--lime)}
  header#hdr.on-dark .mmf .tag{background:rgba(255,255,255,.12);color:#fff}
  header#hdr.on-dark .mmcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
  header#hdr.on-dark .mmsub a{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  header#hdr.on-dark .mmsub a:hover,header#hdr.on-dark .mmsub a:focus-visible{background:var(--lime);color:var(--ink)}
}
@keyframes glin{from{transform:translateY(-12px) scale(.985)}}
@keyframes glfade{from{opacity:0}}

/* ---------- phones: the menu is a glass sheet ---------- */
@media(max-width:940px){
  .menu{left:8px;right:8px;top:calc(100% + 6px);border-radius:22px;border:0;background:var(--gl-light);
    -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--gl-shadow)}
  header#hdr.sc .nav{margin:8px 8px 0;padding-left:16px;padding-right:8px}
}

/* ---------- no blur available, or the visitor asked for less transparency: solid surfaces ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header#hdr.sc .nav::after,.mmp>.mmg,.menu{background:#fff}
  header#hdr.sc.on-dark .nav::after,header#hdr.on-dark .mmp>.mmg{background:#14123A}
}
@media(prefers-reduced-transparency:reduce){
  header#hdr.sc .nav::after,.mmp>.mmg,.menu{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  header#hdr.sc.on-dark .nav::after,header#hdr.on-dark .mmp>.mmg{background:#14123A}
}
@media(prefers-reduced-motion:reduce){.mm.open .mmp,.mm.open .mmp>.mmg,.mm.open .mmp>.mmg>*{animation:none}}
/* soft fade above the floating pill, so page text doesn't peek out over it */
header#hdr::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;pointer-events:none;opacity:0;transition:opacity .3s;background:linear-gradient(var(--bg),rgba(252,251,255,0))}
header#hdr.sc::before{opacity:1}
header#hdr.sc.on-dark::before{background:linear-gradient(#0B0A24,rgba(11,10,36,0))}

/* ===================================================================== */
/* Mega menu content: service previews with Yardie, live product cards   */
/* ===================================================================== */
.mmall{display:inline-block;margin-top:10px;padding:8px 14px;font-size:14px;font-weight:500;color:var(--ind);border-radius:10px}
.mmall:hover,.mmall:focus-visible{background:rgba(124,116,255,.1)}
/* notch pointing at the open item */
.mmn{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);border-radius:3px;z-index:2;pointer-events:none;
  background:rgba(255,255,255,.9);box-shadow:-1px -1px 0 rgba(198,244,50,.6)}
header#hdr.on-dark .mmn{background:rgba(34,30,88,.95);box-shadow:-1px -1px 0 rgba(198,244,50,.45)}
header#hdr.mm-swap .mm.open .mmp>.mmg{animation:none}
@media(min-width:941px){.mmp>.mmg{overflow:hidden}}

/* ---------- Services: list + Yardie + preview ---------- */
.mmx{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px}
.mml1{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.mml1 a{position:relative;display:block;padding:12px 14px;border-radius:14px;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.mml1 b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.mml1 span{display:block;font-size:13.5px;color:var(--mute);line-height:1.45;margin-top:2px}
.mml1 a:hover,.mml1 a:focus-visible,.mml1 a.cur{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(124,116,255,.22),0 10px 26px -16px rgba(79,70,229,.6)}
.mml1 a.match{box-shadow:inset 0 0 0 1.5px #A8D420,0 0 26px -6px rgba(198,244,50,.75)}
.mml1 a.match::after{content:"Yardie's pick";position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--lime);color:var(--ink)}
.mmx-r{display:grid;gap:12px;align-content:start}
.yr{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.yr-bot{flex:none;width:52px;height:60px;transform-origin:50% 100%}
.yr-svg{width:100%;height:100%;overflow:visible}
.yr-head{transform-origin:36px 51px;transition:transform .35s var(--ease)}
.yr-eyes{transition:transform .25s var(--ease)}
.yr-ant{transform-origin:36px 5px}
.yr-bot.think .yr-ant{animation:yrblink .5s ease-in-out infinite alternate}
@keyframes yrblink{to{fill:#8FF2CC;transform:scale(1.25)}}
@media(prefers-reduced-motion:no-preference){.mm.open .yr-bot{animation:yrhop .6s var(--ease2) .15s both}}
@keyframes yrhop{0%{transform:translateY(8px) scale(.9);opacity:0}60%{transform:translateY(-3px)}100%{transform:none;opacity:1}}
.yr-main{flex:1;min-width:0;display:grid;gap:8px}
.yr-bub{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink);background:#fff;border-radius:12px 12px 12px 4px;padding:8px 11px;box-shadow:0 6px 18px -12px rgba(30,27,75,.5)}
.yr-bub b{font-weight:600}
.yr-bub a{color:var(--ind);font-weight:600;white-space:nowrap}
.yr-f{display:flex;gap:6px}
.yr-f input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:9px 11px;border-radius:11px;border:1px solid rgba(124,116,255,.3);background:rgba(255,255,255,.85);color:var(--ink)}
.yr-f input:focus{outline:2px solid var(--ind);outline-offset:1px}
.yr-f button{font:inherit;font-size:13px;font-weight:600;border:0;border-radius:11px;padding:0 12px;background:var(--lime);color:var(--ink);cursor:pointer;white-space:nowrap}
.sv{display:grid;gap:10px}
.sv-c{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);animation:svin .3s var(--ease)}
.sv-c.sv-m{box-shadow:inset 0 0 0 1.5px rgba(168,212,32,.8)}
@keyframes svin{from{opacity:0;transform:translateY(4px)}}
.sv-n{display:block;font-size:15px;margin-bottom:6px}
.sv-c p{margin:0 0 6px;font-size:13px;line-height:1.45;color:var(--mute)}
.sv-c p em{font-style:normal;font-weight:600;color:var(--ink)}
.sv-c ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sv-c li{font-size:12px;padding:3px 9px;border-radius:99px;background:rgba(124,116,255,.1);color:var(--ink)}
.sv-st{display:grid;gap:1px;padding:12px 16px;border-radius:16px;background:linear-gradient(160deg,rgba(198,244,50,.24),rgba(124,116,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);color:var(--ink)}
.sv-st small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.sv-st b{font-size:14.5px}
.sv-st span{font-size:13px;color:var(--ind);font-weight:500}
.sv-st:hover{box-shadow:inset 0 0 0 1px rgba(124,116,255,.5),0 0 24px -8px rgba(198,244,50,.6)}

/* ---------- Products: live product cards ---------- */
.mmpc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pc{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);transition:box-shadow .3s,transform .3s var(--ease)}
.pc:hover{transform:translateY(-2px)}
.pc.al:hover{box-shadow:inset 0 0 0 1px rgba(12,90,96,.45),0 0 34px -10px rgba(198,244,50,.7)}
.pc.xs:hover{box-shadow:inset 0 0 0 1px rgba(81,70,229,.45),0 0 34px -10px rgba(143,242,204,.8)}
.pc-top{display:flex;gap:12px;align-items:center;color:var(--ink)}
.pc-top svg{width:40px;height:40px;flex:none}
.pc-top b{display:block;font-size:18px;font-weight:600}
.pc-top small{display:block;font-size:12.5px;color:var(--mute)}
.pc-what{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.pc-demo{position:relative;height:150px;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.pc-demo>.aui,.pc-demo>.xui{position:absolute;left:10px;top:10px;width:calc((100% - 20px)/.66);transform:scale(.66);transform-origin:0 0;box-shadow:none}
.pc-demo>.xui .xui-foot,.pc-demo>.aui .aui-h .illus{display:none}
.pc.xs .pc-demo{background:#10161D}
.pc-out{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pc-out li{font-size:12px;padding:3px 9px;border-radius:99px}
.pc.al .pc-out li{background:rgba(12,90,96,.1);color:#0C3A3F}
.pc.xs .pc-out li{background:rgba(81,70,229,.1);color:#2D2690}
.pc-act{display:flex;align-items:center;gap:12px;margin-top:2px}
.pc-btn{font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:11px}
.pc.al .pc-btn{background:#0C3A3F;color:#fff}
.pc.xs .pc-btn{background:#5146E5;color:#fff}
.pc-lnk{font-size:13.5px;font-weight:500;color:var(--ink)}
.pc-lnk:hover{color:var(--ind)}
.pc-why{grid-column:1/-1;justify-self:start;margin-top:0}

/* dark glass versions */
@media(min-width:941px){
  header#hdr.on-dark .mml1 b,header#hdr.on-dark .sv-n,header#hdr.on-dark .pc-top b,header#hdr.on-dark .pc-what,header#hdr.on-dark .pc-lnk,header#hdr.on-dark .sv-c p em,header#hdr.on-dark .sv-st{color:#fff}
  header#hdr.on-dark .mml1 span,header#hdr.on-dark .sv-c p,header#hdr.on-dark .pc-top small,header#hdr.on-dark .sv-st small{color:rgba(255,255,255,.74)}
  header#hdr.on-dark .mml1 a:hover,header#hdr.on-dark .mml1 a:focus-visible,header#hdr.on-dark .mml1 a.cur{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(198,244,50,.28)}
  header#hdr.on-dark .yr,header#hdr.on-dark .sv-c,header#hdr.on-dark .pc{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  header#hdr.on-dark .sv-c li{background:rgba(255,255,255,.1);color:#fff}
  header#hdr.on-dark .sv-st{background:linear-gradient(160deg,rgba(198,244,50,.14),rgba(124,116,255,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  header#hdr.on-dark .sv-st span,header#hdr.on-dark .mmall,header#hdr.on-dark .yr-bub a{color:var(--lime)}
  header#hdr.on-dark .yr-f input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
  header#hdr.on-dark .yr-f input::placeholder{color:rgba(255,255,255,.55)}
  header#hdr.on-dark .pc-demo{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  header#hdr.on-dark .pc.al .pc-out li{background:rgba(198,244,50,.14);color:#E8FBB0}
  header#hdr.on-dark .pc.xs .pc-out li{background:rgba(143,242,204,.14);color:#C9FBE8}
  header#hdr.on-dark .pc.al .pc-btn{background:var(--lime);color:#06262A}
  header#hdr.on-dark .pc.xs .pc-btn{background:#8FF2CC;color:#10161D}
  header#hdr.on-dark .yr-bub{background:#fff;color:var(--ink)}
}

/* phones: simple stacked lists; demos and Yardie stay on bigger screens */
@media(max-width:940px){
  .mmx,.mmpc{grid-template-columns:1fr;gap:10px}
  .mml1{grid-template-columns:1fr}
  .mml1 a{padding:8px 13px}
  .mmx-r,.pc-demo,.pc-what,.mmn{display:none}
  .pc{padding:12px;gap:8px}
}