@font-face{font-family:'Michroma';src:local('Helvetica Neue'),local('Arial'),local('Segoe UI'),local('Roboto'),local('Noto Sans');unicode-range:U+20AC,U+00A3;font-weight:400;font-style:normal}

:root{--sky:#2A9BFF;--night:#070B18;--ink:#0B1020;--gold:#F7CD46;--text:#F4F5F7;--soft:#C5CDDB;--edge:#26314D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--night:#070B18;--text:#F4F5F7}}
:root[data-theme="dark"]{--night:#070B18;--text:#F4F5F7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}body{margin:0}
body{background:var(--night);color:var(--text);font-family:'Instrument Sans',system-ui,sans-serif;font-size:17px;line-height:1.55}
.bar.solid{background:rgba(7,11,24,.92)}
.bar{transition:background .25s;position:fixed;top:16px;left:16px;right:16px;max-width:1320px;margin:0 auto;padding:10px 10px 10px 22px;background:transparent;border:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 26px;z-index:20}
.bar img,.bar svg.lgo{display:block;height:24px;width:auto}svg.lgo{aspect-ratio:1838/210;overflow:visible}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 36px;font-size:15px;font-weight:500}
.bar a{color:var(--text);text-decoration:none;padding:11px 0}
.bar nav a{transition:color .15s}.bar nav a:hover{color:var(--gold)}
.bar .cta{background:var(--gold);color:var(--ink);padding:12px 22px;font-weight:600}
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:radial-gradient(ellipse at 70% 55%,#0E1630 0%,#070B18 62%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px rgba(255,255,255,.45)) drop-shadow(0 0 12px rgba(190,210,255,.18))}
#gl2{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 0 4px rgba(247,205,70,1)) drop-shadow(0 0 18px rgba(247,205,70,.7))}
.copy{position:absolute;left:max(24px,calc((100vw - 1320px)/2 + 8px));top:47%;transform:translateY(-50%);max-width:640px;z-index:2}
.eyebrow{font-size:13.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
h1,.hl{font-family:'Michroma',sans-serif;font-weight:400;letter-spacing:-.01em;margin:18px 0 0;font-size:clamp(22px,2.65vw,42px);line-height:1.22;white-space:nowrap}
@media (max-width:560px){h1,.hl{white-space:normal}}
h1 em,.hl em{font-style:normal;color:var(--gold)}
.copy p{margin:22px 0 0;font-size:clamp(16px,1.45vw,20px);color:var(--soft);max-width:460px}
.btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:16px 28px;font-weight:600;text-decoration:none;border:1px solid var(--text);color:var(--text)}
.btn.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.proc{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--edge);background:rgba(7,11,24,.72);z-index:2}
.proc ol{list-style:none;margin:0 auto;padding:0 24px;max-width:1240px;display:flex;flex-wrap:wrap}
.proc li{flex:1 1 150px;padding:16px 16px 16px 0;font-size:14.5px;color:var(--soft)}
.proc li b{display:block;color:var(--text);font-size:15.5px}
.proc li b span{color:var(--gold);margin-right:8px}
.modes{position:absolute;right:24px;bottom:104px;display:flex;flex-wrap:wrap;gap:8px;z-index:3;justify-content:flex-end}
.modes button{font:inherit;font-size:14.5px;font-weight:600;min-height:44px;padding:8px 14px 8px 8px;background:rgba(7,11,24,.8);color:var(--text);border:1px solid var(--edge);cursor:pointer}
.modes button b{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;background:var(--edge);margin-right:8px;font-size:12.5px}
.modes button[aria-pressed="true"]{border-color:var(--gold)}.modes button[aria-pressed="true"] b{background:var(--gold);color:var(--ink)}
button:focus-visible,a:focus-visible{outline:3px solid #7FA2FF;outline-offset:2px}
.hlpick{position:absolute;right:24px;bottom:104px;display:flex;gap:8px;z-index:3}
.hlpick button{font:inherit;font-size:14.5px;font-weight:600;min-height:44px;padding:8px 16px;background:rgba(7,11,24,.8);color:var(--text);border:1px solid var(--edge);cursor:pointer}
.hlpick button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
@media (max-width:860px){.bar nav{display:none}.copy{top:110px;transform:none;right:24px}.copy p{display:none}.proc li{flex-basis:33%}}

/* ---------- page below the hero: marble light, with dark and gold blocks ---------- */
:root{--marble:#F6F3EC;--paper:#FFFFFF;--line:#CFC8B8;--deep:#7A5C06;--muted:#4A4636}
.key{height:26px;background-color:var(--night);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Cpath d='M0 21H34V5H10V15H24' fill='none' stroke='%23F7CD46' stroke-width='2.4'/%3E%3C/svg%3E");background-repeat:repeat-x}
.key.light{background-color:var(--marble);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Cpath d='M0 21H34V5H10V15H24' fill='none' stroke='%230B1020' stroke-width='2.4'/%3E%3C/svg%3E")}
.sec{background:var(--marble);color:var(--ink);padding:110px 0}
.sec.dark{background:var(--night);color:var(--text)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.kick{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--deep)}
.dark .kick{color:var(--gold)}
.h2{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(26px,3.3vw,48px);line-height:1.16;letter-spacing:-.01em;margin:14px 0 0;text-wrap:balance}
.lead{font-size:19px;color:var(--muted);max-width:620px;margin:18px 0 0}
.dark .lead{color:var(--soft)}
/* pillars */
.pillars{margin-top:64px;display:flex;flex-wrap:wrap;gap:28px}
.pillar{flex:1 1 270px;min-width:0;display:flex;flex-direction:column}
.cap{height:58px;position:relative;margin:0 6px}
.cap::before{content:"";position:absolute;left:-6px;right:-6px;top:0;height:16px;border:2px solid var(--ink);background:var(--paper)}
.cap::after{content:"";position:absolute;left:8%;right:8%;top:16px;height:40px;border:2px solid var(--ink);border-top:0;background:var(--paper);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}
.cap b{position:absolute;left:0;right:0;top:20px;text-align:center;z-index:1;font-family:'Michroma',sans-serif;font-weight:400;font-size:22px;color:var(--deep)}
.shaft{flex:1;margin:0 calc(8% + 12px);padding:26px 18px 28px;border:2px solid var(--ink);border-top:0;border-bottom:0;background-color:var(--paper);background-image:repeating-linear-gradient(90deg,rgba(11,16,32,0) 0,rgba(11,16,32,0) 15.5%,rgba(11,16,32,.11) 15.5%,rgba(11,16,32,.11) 16.66%)}
.shaft h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:25px;margin:0;text-align:center}
.shaft .for{margin:6px 0 20px;text-align:center;font-size:14px;color:var(--muted)}
.shaft a{display:block;padding:13px 12px;margin-top:8px;background:var(--marble);border:1px solid var(--ink);text-decoration:none;color:var(--ink);transition:background .15s,transform .15s}
.shaft a:hover{background:var(--gold)}
.shaft a strong{display:block;font-size:16.5px}
.shaft a span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.shaft a:hover span{color:var(--ink)}
.base{height:14px;margin:0 6%;border:2px solid var(--ink);background:var(--paper)}
.base2{height:14px;border:2px solid var(--ink);border-top:0;background:var(--paper)}
/* frieze: the process */
.frieze{margin-top:56px;display:flex;flex-wrap:wrap;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold)}
.metope{flex:1 1 190px;padding:30px 22px 34px;position:relative}
.metope+.metope{border-left:14px solid transparent;border-image:repeating-linear-gradient(90deg,var(--gold) 0 2px,transparent 2px 6px) 14}
.metope b{font-family:'Michroma',sans-serif;font-weight:400;color:var(--gold);font-size:15px}
.metope h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:21px;margin:10px 0 8px}
.metope p{margin:0;color:var(--soft);font-size:15.5px}
/* steps: three ways to own */
.steps{margin-top:64px;display:flex;flex-wrap:wrap;align-items:flex-end}
.step{flex:1 1 300px;min-width:0;padding:30px;border:2px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.step.s1{min-height:230px}.step.s2{min-height:310px;background:var(--ink);color:var(--text)}.step.s3{min-height:390px;background:var(--gold)}
.step .n{font-family:'Michroma',sans-serif;font-size:15px;display:flex;justify-content:space-between}
.step h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:27px;margin:0}
.step p{margin:10px 0 0;font-size:16px}
.ground{height:16px;border:2px solid var(--ink);border-top:0;background:var(--paper)}
/* demo */
.demo{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.demo>div{flex:1 1 420px;min-width:0}
.demo ol{list-style:none;margin:34px 0 0;padding:0}
.demo ol li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--edge)}
.demo ol b{font-family:'Michroma',sans-serif;font-weight:400;color:var(--gold)}
form{flex:1 1 420px;min-width:0;background:var(--marble);color:var(--ink);padding:32px;border:2px solid var(--gold);display:flex;flex-direction:column;gap:16px}
label{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600}
input,select{height:52px;padding:0 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:16px;border-radius:0;width:100%}
.row{display:flex;flex-wrap:wrap;gap:16px}.row label{flex:1 1 180px}
button.btn{font:inherit;font-weight:600;cursor:pointer;height:56px;background:var(--ink);color:var(--text);border:0}
/* cases + faq */
.cases{display:flex;flex-wrap:wrap;margin-top:56px;border-top:2px solid var(--ink)}
.cases>div{flex:1 1 300px;padding:30px 28px 30px 0;border-bottom:1px solid var(--line)}
.cases h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:24px;margin:0}
.cases p{color:var(--muted);font-size:16px;margin:10px 0 0}
.cases small{display:block;margin-top:16px;font-size:14px;font-weight:600}
.faq{display:flex;flex-wrap:wrap;gap:40px 56px}
.faq>div:first-child{flex:1 1 300px}.faq>div:last-child{flex:2 1 560px;min-width:0}
details{border-top:1px solid var(--ink);padding:20px 0}details:last-child{border-bottom:1px solid var(--ink)}
summary{cursor:pointer;font-weight:600;font-size:19px}
details p{margin:10px 0 0;color:var(--muted)}
/* pediment call to action */
.ped{background:var(--marble);padding:0 0 110px}
.ped .tri{max-width:1100px;margin:0 auto;padding:0 24px}

.ped .box{color:var(--ink);max-width:1100px;margin:0 auto;border:2px solid var(--ink);border-top:0;background:var(--gold);padding:56px 28px 64px;text-align:center}
.ped .box .btn{border-color:var(--ink);color:var(--ink)}.ped .box .btn.k{background:var(--ink);color:var(--text)}
footer{background:var(--night);color:var(--soft);font-size:15px}
footer .cols{display:flex;flex-wrap:wrap;gap:40px;padding:64px 0 40px}
footer .cols>div{flex:1 1 150px;display:flex;flex-direction:column;gap:9px}
footer .cols>div:first-child{flex:2 1 260px}
footer h4{margin:0 0 4px;color:var(--text);font-size:15px}
footer a{color:var(--soft);text-decoration:none}footer a:hover{color:var(--gold)}
footer .legal{border-top:1px solid var(--edge);padding:20px 0 36px;font-size:14px;color:#8E97AB}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #2A9BFF;outline-offset:2px}
@media (max-width:860px){.sec{padding:72px 0}.metope+.metope{border-left:0;border-top:1px solid var(--edge)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* plain versions: no column, frieze, step-base or pediment shapes */
.pillar{border-top:2px solid var(--ink);padding-top:22px}
.shaft{margin:0;padding:0;border:0;background:none}
.shaft h3{text-align:left;font-size:24px}.shaft .for{text-align:left;margin:6px 0 18px}
.shaft a{background:var(--paper);border:1px solid var(--line)}
.frieze{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.metope+.metope{border-left:1px solid var(--edge);border-image:none}
.ped{padding:0 24px 110px}.ped .box{border:0}
.copy p.two{max-width:none;white-space:nowrap;font-size:clamp(14px,1.25vw,18.5px)}
@media (max-width:860px){.copy p.two{white-space:normal}.metope+.metope{border-left:0}}

/* buttons: fill sweeps in on hover, arrow slides, gold button has a slow passing shine */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 26px;letter-spacing:.01em;transition:color .28s,border-color .28s,transform .15s,box-shadow .28s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#F4F5F7;transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--ink);border-color:#F4F5F7}
.btn .ar{flex:none;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.btn:hover .ar,.btn:focus-visible .ar{transform:translateX(6px)}
.btn:active{transform:scale(.97)}
.btn.gold{box-shadow:0 0 0 0 rgba(247,205,70,0)}
.btn.gold:hover{box-shadow:0 10px 34px rgba(247,205,70,.35)}
.btn.gold::after,.bar .cta::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:38%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,62%{left:-60%}100%{left:130%}}
.bar .cta{position:relative;overflow:hidden;transition:transform .15s,box-shadow .28s}
.bar .cta:hover{box-shadow:0 8px 28px rgba(247,205,70,.4)}.bar .cta:active{transform:scale(.97)}
button.btn:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){.btn::before,.btn .ar,.btn{transition:none}.btn.gold::after,.bar .cta::after{animation:none;display:none}}

/* full width, unboxed: no cards, no framed blocks */
.wrap{max-width:none;padding:0 clamp(20px,5vw,96px)}
.bar{max-width:none;left:0;right:0;top:0;padding:16px clamp(20px,5vw,96px)}
.copy{left:clamp(20px,5vw,96px)}
.proc ol{max-width:none;padding:0 clamp(20px,5vw,96px)}
.pillars{gap:0 56px}
.shaft a{background:none;border:0;border-bottom:1px solid var(--line);padding:16px 0;margin:0}
.shaft a:hover{background:none;transform:none}.shaft a:hover strong{color:var(--deep)}
.shaft a strong{font-size:18px;transition:color .15s}
.frieze{border:0}.metope{padding:26px 28px 8px 0}.metope+.metope{border-left:0}
.metope{border-top:1px solid var(--edge)}
.steps{align-items:stretch;gap:0 56px;margin-top:56px}
.step,.step.s1,.step.s2,.step.s3{min-height:0;background:none;color:var(--ink);border:0;border-top:2px solid var(--ink);padding:24px 0 0;justify-content:flex-start}
.step.s3{border-top-color:var(--deep)}.step.s3 h3{color:var(--deep)}
form{background:none;border:0;padding:0;color:var(--text)}
input,select{background:transparent;border:0;border-bottom:1px solid #56617A;color:var(--text);padding:0}
select option{color:#0B1020}
button.btn{background:var(--gold);color:var(--ink);align-self:flex-start;padding:0 34px}
.cases>div{padding-right:40px}
.ped{padding:0;background:var(--gold)}.ped .box{max-width:none;padding:96px clamp(20px,5vw,96px)}

.proc{background:none;border-top:1px solid var(--edge)}
.nums li{flex:1 1 150px;padding:20px 20px 22px 0;font-size:15px;color:var(--soft)}
.nums li b{display:block;font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(22px,2.3vw,36px);color:var(--text);line-height:1.2;margin-bottom:4px}
.nums li b,.nums li b span{color:var(--gold)}

/* button style 4: glow and glass */
.btn{border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);transition:transform .2s,box-shadow .3s,background .3s}
.btn::before{display:none}.btn.gold::after{display:none}
.btn:hover,.btn:focus-visible{background:rgba(255,255,255,.16);color:var(--text);border-color:rgba(255,255,255,.25)}
.btn .ar{transition:transform .28s}.btn:hover .ar{transform:translateX(5px)}
.btn.gold,button.btn,.bar .cta{background:var(--gold);color:var(--ink);border-color:var(--gold);border-radius:12px;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(247,205,70,.5)}70%,100%{box-shadow:0 0 0 18px rgba(247,205,70,0)}}
.btn.gold:hover,button.btn:hover,.bar .cta:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 14px 40px rgba(247,205,70,.45);animation:none}
.bar .cta::after{display:none}
.ped .box .btn{background:rgba(11,16,32,.08);border-color:rgba(11,16,32,.35);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.ped .box .btn:hover{background:rgba(11,16,32,.16);color:var(--ink)}
.ped .box .btn.k{background:var(--ink);color:var(--text);border-color:var(--ink);animation:none}
.ped .box .btn.k:hover{background:var(--ink);color:var(--text);box-shadow:0 14px 40px rgba(11,16,32,.35)}
@media (prefers-reduced-motion: reduce){.btn.gold,button.btn,.bar .cta{animation:none}}

.feat{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 56px}
.feat>div{padding:22px 0 24px;border-top:1px solid var(--line)}
.feat h3{margin:0;font-size:19px;font-weight:600}.feat p{margin:6px 0 0;color:var(--muted);font-size:16px}
.plans{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px 48px}
.plan{border-top:1px solid var(--edge);padding-top:22px}
.plan b{font-family:'Michroma',sans-serif;font-weight:400;color:var(--gold);font-size:15px}
.plan h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:20px;line-height:1.3;margin:10px 0 10px}
.plan p{margin:0;color:var(--soft);font-size:15.5px}
.plan ul{margin:14px 0;padding:0 0 0 18px;color:var(--text);font-size:15.5px}.plan li{margin:6px 0}
.plan .tip{color:var(--gold);font-size:14.5px}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 56px}
.cases>div{padding:28px 0 30px;border-bottom:1px solid var(--line)}
.cases a{display:inline-block;margin-top:12px;font-weight:600;color:var(--deep);text-decoration:none}.cases a:hover{text-decoration:underline}

/* hero numbers: five equal columns across the full width, more room below */
.proc ol.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;padding-top:26px;padding-bottom:46px}
.nums li{padding:0}
@media (max-width:860px){.proc ol.nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;padding-bottom:26px}}

/* features: explorer */
.fx{margin-top:56px;display:flex;flex-wrap:wrap;gap:40px 72px}
.fxlist{flex:1 1 380px;min-width:0;display:flex;flex-direction:column}
.fxlist button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:17px 0;border-top:1px solid var(--edge);color:var(--soft);font-size:19px;font-weight:500;transition:color .25s,padding .25s}
.fxlist button span{font-family:'Michroma',sans-serif;font-size:13px;color:#8590A8;transition:color .25s}
.fxlist button[aria-pressed="true"],.fxlist button:hover{color:var(--text);padding-left:14px}
.fxlist button[aria-pressed="true"] span{color:var(--gold)}
.fxlist button:focus-visible{outline:3px solid #7FA2FF;outline-offset:2px}
.fxview{flex:1.2 1 460px;min-width:0;min-height:380px;border-left:1px solid var(--edge);padding:8px 0 8px 56px;display:flex;flex-direction:column;justify-content:center}
.fxview .n{font-family:'Michroma',sans-serif;font-size:clamp(70px,9vw,150px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold)}
.fxview h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(22px,2.4vw,34px);margin:22px 0 0}
.fxview p{font-size:20px;color:var(--soft);margin:14px 0 0;max-width:520px}
.fxview>*{animation:fxfade .45s ease both}
@keyframes fxfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:760px){.fxview{border-left:0;padding-left:0;min-height:0}}
/* 4-step plan on light */
#plan .plan{border-top-color:var(--ink)}#plan .plan b{color:var(--deep)}#plan .plan p{color:var(--muted)}#plan .plan ul{color:var(--ink)}#plan .plan .tip{color:var(--deep)}

/* no brown: small text on light is ink, accents are yellow */
:root{--deep:#0B1020;--yel:#F7CD46}
.sec:not(.dark) .kick{display:flex;align-items:center;gap:12px}
.sec:not(.dark) .kick::before{content:"";width:28px;height:4px;background:var(--yel)}
.cases a{text-decoration:underline;text-decoration-color:var(--yel);text-decoration-thickness:2px;text-underline-offset:5px}
.step.s3{border-top-color:var(--yel);border-top-width:4px}
/* 4-step plan: stepper with yellow progress */
.stp{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.stp::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#DDD6C6}
.stpbar{position:absolute;left:0;top:0;height:4px;background:var(--yel);width:25%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.stp button{all:unset;cursor:pointer;padding:24px 16px 0 0;color:#8A8474;transition:color .3s}
.stp button b{display:block;font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,56px);line-height:1;transition:color .3s}
.stp button span{display:block;margin-top:8px;font-weight:600;font-size:16.5px}
.stp button[aria-pressed="true"]{color:var(--ink)}.stp button[aria-pressed="true"] b{color:var(--yel)}
.stp button:focus-visible{outline:3px solid #2A6BFF;outline-offset:3px}
.stppanel{margin-top:44px;display:flex;flex-wrap:wrap;gap:24px 72px;min-height:210px}
.stppanel>div{flex:1 1 360px;min-width:0;animation:fxfade .45s ease both}
.stppanel h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(20px,2.2vw,30px);margin:0}
.stppanel p{margin:12px 0 0;color:var(--muted);font-size:18px}
.stppanel ul{margin:0 0 14px;padding:0 0 0 18px}.stppanel li{margin:6px 0}
.stppanel .tip{margin:0;padding-left:14px;border-left:4px solid var(--yel);color:var(--ink);font-weight:500;font-size:16.5px}
@media (max-width:820px){.stp{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}.stpbar{display:none}}

/* welcome: statement, three doors, ways to buy */
.welt{text-align:center;max-width:1060px;margin:0 auto}
.wh{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(28px,3.5vw,54px);line-height:1.14;margin:16px 0 0;letter-spacing:-.01em}
.wh mark{background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 88%/100% .34em;color:inherit;padding:0 .05em}
.wp{margin:22px auto 0;font-size:20px;line-height:1.55;color:var(--muted);max-width:760px}
.wel a{text-decoration:none}.wel em{font-style:normal}
.doors{margin-top:54px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dc{display:flex;flex-direction:column;background:var(--night);color:var(--text);border-radius:24px;padding:34px 32px 30px;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.dc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--yel);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dc:hover{box-shadow:0 34px 60px -34px rgba(7,11,24,.75)}.dc:hover::after{transform:none}
.dc svg{width:56px;height:56px;fill:none;stroke:var(--yel);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(247,205,70,.5));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dc:hover svg{transform:scale(1.1)}
.dc strong{font-family:'Michroma',sans-serif;font-weight:400;font-size:21px;margin-top:26px;transition:color .3s}.dc:hover strong{color:var(--yel)}
.dc em{margin-top:10px;color:var(--soft);font-size:17px;flex:1}
.dc span{margin-top:24px;font-weight:600;font-size:15.5px}.dc span i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.dc:hover span i{transform:translateX(6px)}
.prf{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 44px}
.prf span{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.prf b{font-family:'Michroma',sans-serif;font-weight:400;font-size:19px}
.prf a{color:var(--ink);font-weight:600;border-bottom:2px solid var(--yel);padding-bottom:2px}.prf a i{font-style:normal;display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.prf a:hover i{transform:translateX(6px)}
@media (max-width:900px){.doors{grid-template-columns:minmax(0,1fr)}.wp{font-size:18px}.prf span{flex-basis:100%}}

/* animated door icons */
.dc svg.ia{width:76px;height:76px;overflow:visible}
.ia .dim{stroke-opacity:.4}
.ia .hub{fill:var(--yel)}
.ia .pu{transform-box:fill-box;transform-origin:center;animation:iap 2.4s ease-out infinite}
@keyframes iap{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
.ia .fl{stroke-width:3;stroke-dasharray:.3 1;stroke-dashoffset:.3;animation:iaf 2.4s linear infinite}
@keyframes iaf{from{stroke-dashoffset:.3}to{stroke-dashoffset:-1}}
.ia .nd{fill:var(--night);animation:ian 2.4s linear infinite}
@keyframes ian{0%,62%{fill:#070B18}78%{fill:#F7CD46}100%{fill:#070B18}}
.ia .bar{stroke-opacity:.55;transform-box:fill-box;transform-origin:50% 100%;animation:iab 3.2s ease-in-out infinite}
@keyframes iab{0%,100%{transform:scaleY(.35)}45%,80%{transform:scaleY(1)}}
.ia .dr{stroke-width:2.6;stroke-dasharray:1;animation:iad 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes iad{0%{stroke-dashoffset:1}55%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ia .hd{stroke-width:2.6;animation:iah 3.2s linear infinite}
@keyframes iah{0%,50%{opacity:0}58%,92%{opacity:1}100%{opacity:0}}
.ia .dot{fill:var(--yel);stroke:none}
.ia .slot{fill:var(--yel);animation:ias 3s ease-in-out infinite}
@keyframes ias{0%,100%{fill-opacity:.12}40%,60%{fill-opacity:.95}}
.ia .tl{stroke-dasharray:1;animation:iat 3s ease-in-out infinite}
@keyframes iat{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ia .coin{animation:iac 3s cubic-bezier(.2,.8,.2,1) infinite}.ia .coin circle{fill:var(--night)}
@keyframes iac{0%,40%{transform:translateY(0);opacity:0}50%{opacity:1}85%{transform:translateY(-34px);opacity:1}100%{transform:translateY(-40px);opacity:0}}
@media (prefers-reduced-motion: reduce){.ia *{animation:none!important}.ia .dot,.ia .coin,.ia .pu{display:none}.ia .fl{stroke-dasharray:none}}

/* welcome layout A: text left, who-it-is-for rows right */
.wA{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:90px;align-items:center}
.wA .wp{margin-left:0;max-width:640px}.wA .wbt{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.wA .wbt .btn{border-radius:12px;border:1.5px solid var(--ink);transition:background .3s,color .3s,border-color .3s,transform .3s,box-shadow .3s}
.wA .wbt .btn::before{display:none}
.wA .wb1{background:var(--ink);color:var(--text)}
.wA .wb1:hover,.wA .wb1:focus-visible{background:var(--yel);border-color:var(--yel);color:var(--ink);box-shadow:0 14px 30px -14px rgba(247,205,70,.9)}
.wA .wb2{background:transparent;color:var(--ink)}
.wA .wb2:hover,.wA .wb2:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--text)}
.wA .rows small{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:2px solid var(--ink)}
.wA .rows a{display:grid;grid-template-columns:60px 1fr 40px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);position:relative;color:var(--ink);transition:padding .45s cubic-bezier(.2,.8,.2,1)}
.wA .rows a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--yel);transform:scaleY(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wA .rows a:hover{padding-left:22px}.wA .rows a:hover::before{transform:none}
.wA .rows svg.ia{width:60px;height:60px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wA .ia .fl,.wA .ia .dr,.wA .ia .hd{stroke:var(--yel)}
.wA .ia .nd,.wA .ia .coin circle{fill:var(--marble)}.wA .ia .nd{animation-name:ianl}
@keyframes ianl{0%,62%{fill:#F6F3EC}78%{fill:#F7CD46}100%{fill:#F6F3EC}}
.wA .ia .pu{stroke:var(--yel)}
.wA .rows strong{display:block;font-family:'Michroma',sans-serif;font-weight:400;font-size:21px}
.wA .rows em{display:block;margin-top:6px;color:var(--muted);font-size:16.5px}
.wA .rows a>i{font-style:normal;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.wA .rows a:hover>i{background:var(--yel);border-color:var(--yel);transform:translateX(4px)}
@media (max-width:1000px){.wA{grid-template-columns:minmax(0,1fr);gap:44px}}

/* pillars as product cards (same block as the Solutions page) */
@keyframes pvdraw{to{stroke-dashoffset:0}}
.mw{position:relative;z-index:1;margin:-58px 0 26px;border-radius:14px;overflow:hidden;border:1px solid rgba(244,245,247,.45);background:var(--night);font-size:11.5px;line-height:1.4;color:var(--text);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transform:perspective(900px) rotateX(7deg);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.pnc:hover .mw{transform:none;box-shadow:0 34px 70px -34px rgba(247,205,70,.6)}
.mbar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid rgba(244,245,247,.3)}
.mbar i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(244,245,247,.6)}.mbar span{margin-left:8px;color:#8590A8;font-size:10.5px}
.mb{padding:14px;height:218px;overflow:hidden}
.mw small{display:block;color:#8590A8;font-size:10px;margin-bottom:3px}
.mkp{display:grid;gap:8px}.mkp div{border:1px solid rgba(244,245,247,.28);border-radius:9px;padding:8px 9px}
.mkp b{font-family:'Michroma',sans-serif;font-weight:400;font-size:13px}.mkp div:first-child{border-color:var(--yel)}.mkp div:first-child b{color:var(--yel)}
.mrows{margin-top:10px}.mrows>div{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid rgba(244,245,247,.14)}
.mrows span:not(.mdot){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrows em{font-style:normal;color:#8590A8}
.mpill{border:1px solid rgba(244,245,247,.35);border-radius:999px;padding:1px 8px;font-size:10px;color:var(--soft)!important}.mpill.y{border-color:var(--yel);color:var(--yel)!important}
.mdot{width:7px;height:7px;border-radius:50%;background:var(--yel);flex:none}.mdot.o{background:none;border:1px solid #8590A8}
.mch{border:1px solid rgba(244,245,247,.28);border-radius:9px;padding:8px 9px}
.mch svg{display:block;width:100%;height:54px}.mch path{fill:none;stroke:var(--yel);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:700;stroke-dashoffset:700}
.rvon .rv.in .mch path,html:not(.rvon) .mch path,.pnc:hover .mch path{animation:pvdraw 2.4s cubic-bezier(.2,.8,.2,1) .4s forwards}
.mbars{margin-top:0}.mbars>div:first-child{border-top:0;padding-top:0}
.mbars i{flex:none;display:block;height:5px;border-radius:3px;background:rgba(244,245,247,.14);width:70px;position:relative}.mbars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--yel);border-radius:3px}
.mcode{margin:10px 0;border:1px solid rgba(244,245,247,.28);border-radius:9px;padding:9px 10px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--soft);white-space:nowrap;overflow:hidden}
.mcode b{color:var(--yel);font-weight:400}
@media (max-width:1000px){.pn3{grid-template-columns:minmax(0,1fr);gap:84px;margin-top:100px}.pnc{padding:0 20px 26px}}
@media (prefers-reduced-motion: reduce){.mw{transform:none;transition:none}.mch path{stroke-dashoffset:0;animation:none}}
.ob{margin-top:56px}
.obtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.obt{all:unset;box-sizing:border-box;cursor:pointer;padding:18px 20px;border:1px solid var(--edge);border-radius:16px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;transition:border-color .3s,background .3s}
.obt:focus-visible{outline:3px solid #2A6BFF;outline-offset:2px}
.obt b{font-family:'Michroma',sans-serif;font-weight:400;font-size:12.5px;color:#8590A8;transition:color .3s}
.obt span{font-family:'Michroma',sans-serif;font-size:18px;color:var(--soft);transition:color .3s}
.obt em{grid-column:2;font-style:normal;font-size:14px;color:#8590A8}
.obt:hover{border-color:rgba(244,245,247,.4)}
.obt.act{border-color:rgba(247,205,70,.7);background:rgba(247,205,70,.07)}.obt.act b,.obt.act span{color:var(--yel)}
.obview{display:grid;margin-top:30px}
.obp{grid-area:1/1;opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
.obp.act{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1)}
.obl{color:var(--soft);font-size:18px;margin:0 0 22px}
.obg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.obc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:26px;align-items:center;padding:22px;border:1px solid var(--edge);border-radius:20px;background:#0D1326;text-decoration:none;color:var(--text);transition:border-color .35s,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.obc:hover{border-color:rgba(247,205,70,.7);box-shadow:0 40px 80px -50px rgba(247,205,70,.5)}
.obc .mw{margin:0;transform:none;box-shadow:none}.obc:hover .mw{transform:none;box-shadow:none}
.obc h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:20px;margin:0;transition:color .3s}.obc:hover h3{color:var(--yel)}
.obc p{margin:8px 0 0;color:var(--soft);font-size:15.5px}
.obc b{display:block;margin-top:14px;font-family:'Michroma',sans-serif;font-weight:400;font-size:13px;color:var(--yel)}
.obc .more{display:inline-flex;gap:10px;margin-top:14px;font-weight:600;color:var(--text)}.obc .more i{font-style:normal;transition:transform .35s}.obc:hover .more i{transform:translateX(6px)}
@media (max-width:1100px){.obg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.obtabs{grid-template-columns:repeat(2,minmax(0,1fr))}.obc{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}.obt span{font-size:15px}}
.obc .mb{height:auto;min-height:230px}

/* from request to result: animated picture of one ad */
.pb{margin-top:56px}
.info{display:block;width:100%;height:auto}
.info .run{stroke-dasharray:14 26;animation:pbr 1.1s linear infinite}
@keyframes pbr{to{stroke-dashoffset:-40}}
.info .ok{stroke:rgba(244,245,247,.6);stroke-width:1.8}
.info .bad{stroke:rgba(244,245,247,.28);stroke-width:1.8}
.info .x{stroke:rgba(244,245,247,.5);stroke-width:2}
.info .gate{stroke:rgba(244,245,247,.2);stroke-width:1.2;stroke-dasharray:3 7}
.info .ink{stroke:rgba(244,245,247,.75);stroke-width:1.2;fill:var(--night)}
.info .inkd{stroke:var(--ink);stroke-width:2}
.info .yl{stroke:var(--yel);stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(247,205,70,.9))}
.info .fillb{fill:rgba(247,205,70,.2)}
.info .hex{stroke:var(--yel);stroke-width:2;fill:var(--night)}
.info .pulse{stroke:var(--yel);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pbp 2s ease-out infinite}
@keyframes pbp{from{transform:scale(.9);opacity:.9}to{transform:scale(1.7);opacity:0}}
.info .win{stroke:var(--yel);stroke-width:3.2;filter:drop-shadow(0 0 6px rgba(247,205,70,.9))}
.info .frame{stroke:rgba(244,245,247,.75);stroke-width:1.6;fill:var(--night)}
.info .adfill{fill:var(--yel);animation:pbf 2.2s ease-in-out infinite}
@keyframes pbf{0%,100%{fill-opacity:.55}50%{fill-opacity:1}}
.info .bar{stroke:rgba(244,245,247,.6);stroke-width:1.4;transform-box:fill-box;transform-origin:50% 100%;animation:pbb 3s ease-in-out infinite}
@keyframes pbb{0%,100%{transform:scaleY(.45)}50%,80%{transform:scaleY(1)}}
.pb .lab{display:grid;grid-template-columns:repeat(5,1fr);margin-top:24px;padding-top:24px;border-top:1px solid var(--edge);text-align:center}
.pb .lab p{margin:8px auto 0;color:var(--soft);font-size:16px;max-width:210px}
.pb h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:20px;margin:0;color:var(--yel)}
.info{fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){.pb .lab{grid-template-columns:repeat(2,1fr);gap:22px 12px}}
@media (prefers-reduced-motion: reduce){.info *{animation:none!important}}

/* who it is for: open rows, larger, no arrows; a yellow marker grows under the title on hover */
.wA .rows a{grid-template-columns:76px 1fr;gap:26px;padding:30px 0}
.wA .rows a::before{display:none}.wA .rows a:hover{padding-left:0}
.wA .rows svg.ia{width:68px;height:68px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wA .rows strong{display:inline-block;font-size:23px;background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 100%/0 .32em;transition:background-size .5s cubic-bezier(.2,.8,.2,1)}
.wA .rows em{font-size:17px}
.wA .rows a:hover strong,.wA .rows a:focus-visible strong{background-size:100% .32em}
.wA .rows a:hover svg.ia{transform:scale(1.14) rotate(-4deg)}
@media (max-width:600px){.wA .rows a{grid-template-columns:56px 1fr;gap:18px;padding:22px 0}.wA .rows svg.ia{width:52px;height:52px}.wA .rows strong{font-size:19px}}

/* menu: every description stays on one line */
@media (min-width:901px){.mpc a span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* an intro line that should run on one line when the screen is wide enough */
.sec .lead.l1{max-width:none}

/* ---------- price cards, final look (2026-10-13): Rent it and License it yellow, Own it night; labels as pills, "Best for" in its own box ---------- */
.sec .pr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:52px}
.sec .pr>div,.sec .pr>div:first-child{display:flex;flex-direction:column;position:relative;border:0;border-radius:26px;padding:34px;transform:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.sec .pr>div:hover,.sec .pr>div:first-child:hover{transform:none}
.sec .pr>div>small,.sec .pr>div:hover>small{align-self:flex-start;font-family:'Instrument Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.sec .pr h3{font-size:clamp(22px,2.1vw,30px);margin:22px 0 0}
.sec .pr .amt{font-size:clamp(26px,2.7vw,44px);line-height:1.1;margin-top:22px;min-height:1.2em}
.sec .pr .amt span{font-size:.36em}
.sec .pr .sub,.sec .pr>div:hover .sub{margin:10px 0 0;font-size:16px;min-height:48px}
.sec .pr ul{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid;flex:1;display:flex;flex-direction:column}
.sec .pr li,.sec .pr>div:hover li{position:relative;border:0;padding:7px 0 7px 32px;font-size:16.5px}
.sec .pr li::before,.sec .pr>div:first-child li::before{content:"";position:absolute;left:0;top:10px;width:20px;height:20px;border-radius:50%;background:center/11px no-repeat}
.sec .pr li.bf,.sec .pr>div:hover li.bf{margin-top:auto;border-radius:14px;padding:14px 16px;font-weight:600;font-size:16px}
.sec .pr li.bf::before{display:none}
.sec .pr li.bf small{display:block;font:600 11.5px 'Instrument Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px;opacity:.75;color:inherit;background:none;padding:0}
.sec .pr ul:has(.bf) li:nth-last-child(2){margin-bottom:20px}
.sec .pr .btn,.sec .pr>div:first-child .btn.dk{margin-top:22px;width:100%;box-sizing:border-box;border-radius:14px;border:1.5px solid;transition:background .3s,color .3s,border-color .3s}
.sec .pr .btn::before{display:none}
.sec .pr .btn .ar{transition:transform .35s cubic-bezier(.2,.8,.2,1)}.sec .pr .btn:hover .ar{transform:translateX(6px)}
/* 1 and 2, Rent it and License it: yellow */
.sec .pr>div:first-child .btn.dk{border-color:var(--ink)}
.sec .pr>div:nth-child(-n+2),.sec .pr>div:nth-child(-n+2):hover{background:var(--yel);color:var(--ink);box-shadow:0 30px 60px -34px rgba(247,205,70,.9)}
.sec .pr>div:nth-child(-n+2):hover{box-shadow:0 40px 70px -34px rgba(247,205,70,1)}
.sec .pr>div:nth-child(-n+2)>small,.sec .pr>div:nth-child(-n+2):hover>small{background:var(--ink);color:var(--yel)}
.sec .pr>div:nth-child(-n+2) .sub,.sec .pr>div:nth-child(-n+2):hover .sub,.sec .pr>div:nth-child(-n+2) li,.sec .pr>div:nth-child(-n+2):hover li{color:#2A2105}
.sec .pr>div:nth-child(-n+2) ul{border-color:rgba(11,16,32,.25)}
.sec .pr>div:nth-child(-n+2) li::before{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='%23F7CD46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sec .pr>div:nth-child(-n+2) li.bf,.sec .pr>div:nth-child(-n+2):hover li.bf{background:rgba(255,255,255,.45);color:var(--ink)}
.sec .pr>div:nth-child(-n+2) .btn{background:var(--ink);border-color:var(--ink);color:var(--text)}

/* hover: the white label turns yellow on the dark buttons; Talk to Us turns white */
.sec .pr>div:nth-child(-n+2) .btn:hover,.sec .pr>div:first-child .btn.dk:hover{background:var(--ink);border-color:var(--ink);color:var(--yel)}
.sec .pr>div:nth-child(3) .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* 3 Own it: night */
.sec .pr>div:nth-child(3),.sec .pr>div:nth-child(3):hover{background:var(--night);color:var(--text);box-shadow:0 34px 70px -34px rgba(11,16,32,.8)}
.sec .pr>div:nth-child(3):hover{box-shadow:0 44px 80px -34px rgba(247,205,70,.5)}
.sec .pr>div:nth-child(3)>small,.sec .pr>div:nth-child(3):hover>small{background:var(--yel);color:var(--ink)}
.sec .pr>div:nth-child(3) .amt{color:var(--yel)}
.sec .pr>div:nth-child(3) .sub,.sec .pr>div:nth-child(3):hover .sub,.sec .pr>div:nth-child(3) li,.sec .pr>div:nth-child(3):hover li{color:var(--soft)}
.sec .pr>div:nth-child(3) ul{border-color:var(--edge)}
.sec .pr>div:nth-child(3) li::before{background-color:var(--yel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='%230B1020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sec .pr>div:nth-child(3) li.bf,.sec .pr>div:nth-child(3):hover li.bf{background:rgba(247,205,70,.1);color:var(--text)}
.sec .pr>div:nth-child(3) .btn{background:var(--yel);border-color:var(--yel);color:var(--ink)}

@media (max-width:900px){.sec .pr{grid-template-columns:minmax(0,1fr)}}

/* ---------- payment logos under the price cards (light sections): one colour, dark on light ---------- */
.pstrip{margin-top:64px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pstrip .lg{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px}
.pstrip .lg svg{display:block;height:36px;width:auto;fill:var(--ink);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:.85}
.pstrip .lg svg:hover{opacity:1}
.pstrip .lg .esc{display:flex;align-items:center}.pstrip .lg .esc svg{height:20px}
.pstrip{gap:16px 30px}
.pstrip .sep{width:1px;height:26px;background:var(--line)}
.pstrip>span:last-child{letter-spacing:.04em;text-transform:none;font-size:14px;font-weight:500}
@media (max-width:700px){.pstrip .sep{display:none}}

/* the yellow half of a heading */
.h2 em.yl{font-style:normal;color:var(--yel)}

.wA .rows a:last-child{border-bottom:0}

/* product cards (Home pillars, Solutions): no card background; the yellow edge and glow sit on the platform screen itself */
.obc,.obc:hover{background:none;border-color:transparent;box-shadow:none;transform:none;padding:14px 0}
.obc .mw{transition:border-color .35s,box-shadow .45s,transform .5s cubic-bezier(.2,.8,.2,1)}
.obc:hover .mw,.obc:focus-visible .mw{border-color:var(--yel);box-shadow:0 0 0 1px var(--yel),0 34px 70px -30px rgba(247,205,70,.75)}
.obg{gap:26px 40px}

/* product cards: every platform screen is the same size, its content centred, and the card's price style no longer leaks into the screen */
.obc .mb{height:252px;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.obc .mb>*{flex:none}
.obc .mw b{display:inline;margin:0;font-size:inherit;color:inherit;font-family:inherit}
.obc .mw .mkp b{display:block;font-family:'Michroma',sans-serif;font-size:13px}
.obc .mw .mcode{white-space:nowrap;text-overflow:ellipsis}
.obc .mw .mcode b{color:var(--yel);font-family:inherit;font-size:inherit}

/* ---------- price cards: Monthly / Annual switch above them ---------- */
.prt{margin:44px auto 0;display:flex;width:max-content;max-width:100%;gap:4px;background:var(--night);border-radius:999px;padding:6px}
.prt button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:13px 26px;border-radius:999px;color:var(--soft);font-weight:600;font-size:16px;transition:background .3s,color .3s}
.prt button:hover{color:var(--text)}
.prt button.on{background:var(--yel);color:var(--ink)}
.prt button:focus-visible{outline:3px solid #2A6BFF;outline-offset:2px}
.prt em{font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:rgba(247,205,70,.16);color:var(--yel);white-space:nowrap;transition:background .3s,color .3s}
.prt button.on em{background:var(--ink);color:var(--yel)}
.sec .prt+script+.pr,.sec .prt+.pr{margin-top:26px}

@media (max-width:560px){.prt{width:100%}.prt button{flex:1;justify-content:center;flex-direction:column;gap:6px;padding:12px 10px;text-align:center}}

/* questions: the small label and the heading are centred on every page */
#faq>.wrap>.kick,#faq>.wrap>.h2,#faq>.wrap>h2{text-align:center;margin-left:auto;margin-right:auto}
#faq>.wrap>.kick{display:block}

/* handwritten note next to the Annual tab, with a hand-drawn arrow that draws itself */
.prtw{position:relative;width:max-content;max-width:100%;margin:44px auto 0}
.prtw .prt{margin:0}
.sec .prtw+script+.pr,.sec .prtw+.pr{margin-top:30px}
.prtw[data-bill="a"] .hnote{display:flex}
.hnote{position:absolute;left:calc(100% + 8px);top:-74px;display:none;flex-direction:row-reverse;align-items:flex-start;gap:6px;color:var(--ink);white-space:nowrap;pointer-events:none;transform:rotate(-4deg)}
.hnote span{font-family:'Caveat',cursive;font-weight:700;font-size:30px;line-height:1.02;margin-top:-6px}
.hnote svg{flex:none;width:92px;height:54px;margin-top:22px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hnote svg path:first-child{stroke-dasharray:240;stroke-dashoffset:240;animation:hnd 1.1s .5s ease-out forwards}
.hnote svg path:last-child{opacity:0;animation:hnh .2s 1.5s forwards}
@keyframes hnd{to{stroke-dashoffset:0}}@keyframes hnh{to{opacity:1}}
@media (max-width:900px){.prtw{width:100%;display:flex;flex-direction:column;align-items:center}.hnote{position:static;transform:rotate(-2deg);margin-top:12px}.hnote svg{display:none}.hnote span{font-size:26px;text-align:center}.hnote br{display:none}}
@media (prefers-reduced-motion: reduce){.hnote svg path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}

/* ---------- price cards: a two-way switch inside each card ---------- */
.pr>div[data-bill="a"] [data-b="m"],.pr>div:not([data-bill="a"]) [data-b="a"]{display:none}
.sec .pr>div>small:has(.cs),.sec .pr>div:hover>small:has(.cs){background:none;padding:0;letter-spacing:0;text-transform:none;align-self:stretch}
.cs{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(11,16,32,.12)}
.cs button{all:unset;box-sizing:border-box;cursor:pointer;flex:1;text-align:center;padding:10px 14px;border-radius:999px;font:600 14.5px 'Instrument Sans',sans-serif;color:var(--ink);transition:background .3s,color .3s}
.cs button.on{background:var(--ink);color:var(--yel)}
.cs button:focus-visible{outline:3px solid #2A6BFF;outline-offset:2px}
.sec .pr>div:nth-child(3) .cs{background:rgba(244,245,247,.1)}
.sec .pr>div:nth-child(3) .cs button{color:var(--soft)}
.sec .pr>div:nth-child(3) .cs button.on{background:var(--yel);color:var(--ink)}
.sec .pr .amt span{white-space:nowrap}
.sec .pr .amt data{font-variant-numeric:tabular-nums}
/* the same height in every state, so nothing moves when a card is hovered or its tab changes */
.sec .pr .sub,.sec .pr>div:hover .sub,.sec .pr>div:first-child:hover .sub,.sec .pr>div:nth-child(n):hover .sub{position:relative;min-height:0;height:auto}
.sec .pr .sub .slot{position:absolute;left:0;right:0;bottom:0;height:28px}
.fee{display:block;margin:0;height:28px;font-family:'Caveat',cursive;font-weight:700;font-size:25px;line-height:28px;color:var(--ink);white-space:nowrap}
.sec .pr>div:nth-child(3) .fee{color:var(--yel)}
@media(max-width:1440px){.sec .pr .fee,.sec .pr .gift{font-size:21px}}
.sec .pr>div:has(.cs)>h3{order:-1;margin:0 0 20px}
.sec .pr>div:has(.cs)>h3{text-align:center;-webkit-text-stroke:.7px currentColor}
.sec .pr .cs{width:250px;max-width:100%;margin-left:auto;margin-right:auto;padding:4px}
.sec .pr .cs button{flex:1 1 0;width:0;padding:7px 8px;font-size:13px}

.sec .pr>div:has(.cs) .sub{text-align:center}
.sec .pr .sub .slot{position:static;margin-top:4px}

.sec .pr>div>a.btn,.sec .pr>div:first-child>a.btn.dk{display:flex;align-items:center;justify-content:center;height:60px;padding-top:0;padding-bottom:0;border-width:0}

@keyframes slotin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sec .pr>div[data-bill] .slot{animation:slotin .8s 1s both}
@media (prefers-reduced-motion: reduce){.sec .pr>div[data-bill] .slot{animation:none}}

.sec .pr>div:has(.cs) ul li:not(.bf){margin-left:16px}

/* hover, option C (Michael 2026-10-13): nothing lifts. Price cards do not react; buttons only change colour and slide their arrow */
.sec .pr>div:hover,.sec .pr>div:first-child:hover,.sec .pr>div:nth-child(n):hover{transform:none}
.sec .pr>div:nth-child(-n+2):hover{box-shadow:0 30px 60px -34px rgba(247,205,70,.9)}
.sec .pr>div:nth-child(3):hover{box-shadow:0 34px 70px -34px rgba(11,16,32,.8)}
.btn:hover,.btn:focus-visible,.btn.gold:hover,button.btn:hover,.bar .cta:hover{transform:none}
.btn:hover .ar,.btn:focus-visible .ar,.sec .pr .btn:hover .ar{transform:translateX(8px)}
.sec .pr>div:has(.cs) .amt{text-align:center}.sec .pr>div:has(.cs) .amt>div{justify-content:center}



.gift{display:block;margin:0;height:28px;font-family:'Caveat',cursive;font-weight:700;font-size:25px;line-height:28px;color:var(--ink);white-space:nowrap}
.sec .pr>div:nth-child(3) .gift{color:var(--yel)}


/* hero numbers: first sits at the left edge, last ends at the right edge, equal gaps between */
.proc ol.nums{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 24px}
.proc ol.nums li{flex:0 0 auto}
@media (max-width:860px){.proc ol.nums{display:grid}}

/* 4 steps: line illustration per step, drawn in when the step opens */
.stppanel{align-items:center;min-height:330px}
.stppanel ul{margin:18px 0 18px}
.ill svg{display:block;width:100%;max-width:520px;height:auto;margin-left:auto}
.ill .d{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:draw 1.4s ease}
.ill .d.y{stroke:var(--yel);stroke-width:3}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.ill .d{animation:none}}

/* secondary hero button: fully see-through so the animation shows behind it */
.copy .btn:not(.gold){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(255,255,255,.45)}
.copy .btn:not(.gold):hover,.copy .btn:not(.gold):focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8)}

/* products: pick a layer of the stack */
.pk{margin-top:40px;display:flex;flex-wrap:wrap;gap:32px 72px;align-items:center}
.pkdia{flex:1 1 380px;min-width:0;max-width:560px}.pkdia svg{display:block;width:100%;height:auto}
.pkdia g{cursor:pointer;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pkdia polygon{fill:var(--marble);stroke:var(--ink);stroke-width:1.6;transition:fill .3s}
.pkdia g[aria-pressed="true"] polygon{fill:var(--yel)}.pkdia g[aria-pressed="true"]{transform:translateX(26px)}
.pkdia g:focus-visible polygon{stroke:#2A6BFF;stroke-width:3}.pkdia g:focus{outline:none}
.pkdia text{font-family:'Michroma',sans-serif;font-size:15px;fill:var(--ink);pointer-events:none}
.pklist{flex:1.2 1 460px;min-width:0}
.pklist h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(24px,2.8vw,40px);margin:0}
.pklist .for{color:var(--muted);margin:6px 0 22px}
.pklist a{display:flex;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);animation:fxfade .4s ease both}
.pklist a strong{flex:0 0 230px;font-size:18.5px}.pklist a span{color:var(--muted);font-size:16px;flex:1}
.pklist a i{font-style:normal;transition:transform .25s}.pklist a:hover i{transform:translateX(6px)}
.pklist a:hover strong{box-shadow:inset 0 -8px 0 var(--yel)}
@media (max-width:640px){.pklist a{flex-wrap:wrap;gap:2px 12px}.pklist a strong{flex:1 1 100%}}

/* process: a light travels along the line and switches each stage on */
.trk{margin-top:84px;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;padding-top:0}
.trk::before{content:"";position:absolute;left:0;right:0;top:29px;height:2px;background:var(--edge)}
.trun{position:absolute;top:29px;left:0;height:2px;width:100%;background:var(--gold);transform-origin:left;animation:trun 7.5s linear infinite}
.tdot{position:absolute;top:21px;left:0;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(247,205,70,.2),0 0 22px rgba(247,205,70,.8);animation:tdot 7.5s linear infinite;z-index:2}
@keyframes trun{0%{transform:scaleX(0)}90%,100%{transform:scaleX(1)}}
@keyframes tdot{0%{left:0}90%,100%{left:100%}}
.tst{position:relative}
.tic{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;border:1.5px solid #56617A;background:var(--night);color:#8590A8;display:flex;align-items:center;justify-content:center;animation:tic 7.5s linear infinite}
.tst b{display:block;margin-top:22px;font-family:'Michroma',sans-serif;font-weight:400;font-size:14px;color:#8590A8;animation:tlit 7.5s linear infinite}
.tst h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(18px,1.9vw,26px);margin:10px 0 8px;color:#8590A8;animation:tlit2 7.5s linear infinite}
.tst p{margin:0;color:var(--soft);font-size:16px}
.tst:nth-child(4) *{animation-delay:1.5s}.tst:nth-child(5) *{animation-delay:3s}.tst:nth-child(6) *{animation-delay:4.5s}.tst:nth-child(7) *{animation-delay:6s}
@keyframes tlit{0%,100%{color:#8590A8}3%,18%{color:var(--gold)}}
@keyframes tlit2{0%,100%{color:#8590A8}3%,18%{color:#fff}}
@keyframes tic{0%,100%{color:#8590A8;border-color:#56617A;box-shadow:none}3%,18%{color:var(--ink);background:var(--gold);border-color:var(--gold);box-shadow:0 0 28px rgba(247,205,70,.55)}19%{background:var(--night)}}
@media (max-width:860px){.trk{grid-template-columns:1fr 1fr;gap:32px 20px}.trk::before,.trun,.tdot{display:none}}
@media (prefers-reduced-motion: reduce){.trun,.tdot,.tic,.tst b,.tst h3{animation:none}.tdot{display:none}.tic{color:var(--gold);border-color:var(--gold)}.tst b{color:var(--gold)}.tst h3{color:#fff}}

/* pricing: compare table, the column you point at lights up */
.cmp{margin-top:56px;overflow-x:auto}
.cmp table{width:100%;min-width:720px;border-collapse:collapse}
.cmp th,.cmp td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:16.5px;transition:background .25s}
.cmp thead th{border-bottom:2px solid var(--ink);vertical-align:bottom}
.cmp thead th span{display:block;font-family:'Michroma',sans-serif;font-size:13px;color:#6F6A5C;font-weight:400}
.cmp thead th strong{display:block;font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(18px,2vw,28px);margin-top:6px}
.cmp tbody th{font-weight:500;color:var(--muted);width:30%}
.cmp td.y{font-weight:600}.cmp .no{color:#7D786B}
.cmp .tick{display:inline-block;width:20px;height:4px;background:var(--ink);vertical-align:middle}
.cmp table[data-col="1"] th:nth-child(2),.cmp table[data-col="1"] td:nth-child(2),.cmp table[data-col="2"] th:nth-child(3),.cmp table[data-col="2"] td:nth-child(3),.cmp table[data-col="3"] th:nth-child(4),.cmp table[data-col="3"] td:nth-child(4){background:var(--yel)}
.cmp table[data-col="1"] td:nth-child(2).no,.cmp table[data-col="2"] td:nth-child(3).no,.cmp table[data-col] thead th span{color:var(--ink)}
@media (max-width:700px){.cmp{overflow-x:visible}.cmp table{min-width:0;table-layout:fixed}.cmp th,.cmp td{padding:13px 6px;font-size:13px;line-height:1.35;overflow-wrap:anywhere}.cmp tbody th{width:27%;font-size:12.5px}.cmp thead th span{font-size:10.5px;line-height:1.3;letter-spacing:0}.cmp thead th strong{font-size:12.5px;line-height:1.25}.cmp .tick{width:14px;height:3px}}
.btn.dk{background:var(--ink);color:var(--text);border-color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.dk:hover,.btn.dk:focus-visible{background:var(--ink);color:var(--text);border-color:var(--ink);box-shadow:0 14px 34px rgba(11,16,32,.3)}

/* demo: form with a preview window that follows the chosen product */
.dm{margin-top:48px;display:flex;flex-wrap:wrap;gap:48px 72px;align-items:center}
.dm form{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:22px}
.dm label{color:var(--soft)}
.dm input:focus,.dm select:focus{outline:none;border-bottom:2px solid var(--gold)}
.dmrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.dmwin{flex:1.2 1 460px;min-width:0;border:1px solid #56617A;border-radius:14px;overflow:hidden;background:#0B1122}
.dmbar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--edge);font-size:14px;color:#8590A8}
.dmbar i{width:10px;height:10px;border-radius:50%;background:#33405E}
.dmbar span{margin-left:10px;font-family:ui-monospace,Menlo,monospace}
.dmbody{padding:30px;min-height:290px}
.dmbody small{color:var(--gold);font-family:'Michroma',sans-serif;font-size:13px}
.dmbody h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(22px,2.4vw,32px);margin:10px 0 8px}
.dmbody p{margin:0 0 24px;color:var(--soft)}
.dmbars{display:flex;align-items:flex-end;gap:10px;height:110px}
.dmbars span{flex:1;background:#24304C;border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.2,.8,.2,1),background .4s}
.dmbars span.h{background:var(--gold)}

/* case studies: big rows that fill with yellow */
.crows{margin-top:56px;border-bottom:2px solid var(--ink)}
.cr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 220px 44px;gap:20px 40px;align-items:center;padding:30px 0;border-top:2px solid var(--ink);text-decoration:none;color:var(--ink);position:relative;transition:padding .3s}
.cr::before{content:"";position:absolute;inset:0;background:var(--yel);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:0}
.cr>*{position:relative;z-index:1}
.cr:hover,.cr:focus-visible{padding-left:24px;padding-right:24px}.cr:hover::before,.cr:focus-visible::before{transform:scaleY(1)}
.cr h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(22px,2.6vw,38px);margin:0}
.cr small{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.cr p{margin:0;color:var(--muted);font-size:16.5px}.cr:hover p,.cr:hover small,.cr:hover b span{color:var(--ink)}
.cr b{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(26px,3vw,44px);text-align:right;line-height:1}
.cr b span{display:block;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.cr i{font-style:normal;font-size:26px;transition:transform .3s}.cr:hover i{transform:translate(6px,-6px)}
@media (max-width:900px){.cr{grid-template-columns:1fr}.cr b{text-align:left}.cr i{display:none}}

/* one globe across the call-to-action and the footer: dark lines on the yellow, yellow lines on the dark */
.gw{position:relative;overflow:hidden}
.gw canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.gw .ped .box,.gw footer .wrap{position:relative;z-index:1}
.gw .ped .box{background:transparent}
@media (min-width:900px){.gw{--gx:calc(min(30vw,290px) * 1.22 + 64px)}.gw .ped .box{padding-left:var(--gx);padding-top:104px;padding-bottom:104px;text-align:left}.gw .ped .box .h2,.gw .ped .box .lead{margin-left:0!important;margin-right:0!important}.gw .ped .box .btns{justify-content:flex-start!important}
.gw .ped .box .h2{-webkit-text-stroke:.7px currentColor}
.cobox .h2{margin:0 auto;white-space:nowrap;font-size:clamp(18px,1.9vw,30px)}.cobox .lead{margin:18px auto 0;color:#2A2105;max-width:780px}
}
.cobox{text-align:center}.cobox .h2{margin:0 auto;font-size:clamp(18px,1.9vw,30px)}.cobox .lead{margin:18px auto 0;color:#2A2105;max-width:780px}.cobox .btns{justify-content:center}
@media (max-width:1000px){.cobox .h2{white-space:normal}}
@media (min-width:900px){.gw footer .fbig{padding-left:calc(var(--gx) - clamp(20px,5vw,96px) - 34px);margin-right:calc(clamp(20px,5vw,96px) * -.6);font-size:clamp(22px,3.95vw,62px);text-align:center;min-height:calc(var(--gwR,290px) * .75 + 26px);display:flex;flex-direction:column;justify-content:center;padding-top:26px;padding-bottom:26px}}
@media (max-width:899px){.gw .ped .box{padding-bottom:230px}}

/* questions: two columns, plus sign turns yellow and rotates, answer slides open */
.fqgrid{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.fqc{display:flex;flex-direction:column;gap:12px;min-width:0}
.fq{background:#fff;color:var(--ink);border-radius:18px;padding:0 24px;box-shadow:0 1px 2px rgba(11,16,32,.05),0 14px 30px -22px rgba(11,16,32,.35);transition:box-shadow .35s}
.fq[data-open="1"]{box-shadow:0 2px 4px rgba(11,16,32,.05),0 20px 42px -18px rgba(247,205,70,.75)}
.fq button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;width:100%;padding:22px 0;font-weight:600;font-size:18.5px}
.fq button:focus-visible{outline:3px solid #2A6BFF;outline-offset:2px}
.fq button i{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);position:relative;transition:background .3s,border-color .3s,transform .4s}
.fq button i::before,.fq button i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.fq button i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s}
.fq[data-open="1"] button i{background:var(--yel);border-color:var(--yel);transform:rotate(180deg)}.fq[data-open="1"] button i::after{transform:translate(-50%,-50%) rotate(0)}
.fa{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.fq[data-open="1"] .fa{grid-template-rows:1fr;opacity:1}
.fa p{overflow:hidden;margin:0;color:var(--muted);padding-right:44px}.fq[data-open="1"] .fa p{padding-bottom:22px}
@media (prefers-reduced-motion: reduce){.fa,.fq button i,.fq button i::after{transition:none}}

/* questions sit in two separate columns of cards: opening one only moves the cards under it in the same column */
@media (max-width:900px){.fqgrid{grid-template-columns:minmax(0,1fr)}.fq{padding:0 20px}}
/* phone: logo and button share one line and stay clear of the headline */
@media (max-width:560px){.bar{flex-wrap:nowrap;padding:12px 16px}.bar img,.bar svg.lgo{height:17px}.bar .cta{padding:10px 14px;font-size:14px;white-space:nowrap;animation:none}.copy{top:96px}}

/* the three stars from the logo mark every section label */
.sec:not(.dark) .kick::before{display:none}
.kick,.copy .eyebrow{display:flex;align-items:center;gap:12px}
.kst{flex:none;width:38px;height:20px;color:var(--gold)}

/* stars: mirrored, so they lead into the label; none in the hero */
.kst{transform:scaleX(-1)}
.copy .eyebrow{display:block}
/* even spacing and sizes across sections */
.sec{padding:112px 0}
.sec .h2{max-width:1040px}
.sec .lead{max-width:680px}
/* sections rise softly into view */
.rvon .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rvon .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rvon .rv{opacity:1;transform:none;transition:none}}
/* phone */
@media (max-width:860px){.sec{padding:72px 0}}
@media (max-width:640px){
.h2{font-size:24px}.lead{font-size:17px}
.stp button b{font-size:30px}.stp button span{font-size:15px}.stppanel{margin-top:28px;min-height:0}.ill svg{margin:8px auto 0;max-width:340px}
.fx{margin-top:36px;gap:24px}.fxlist button{font-size:17px;padding:14px 0}.fxview .n{font-size:64px}.fxview p{font-size:17px}
.pk{gap:16px}.pkdia{max-width:320px;margin:0 auto}
.trk{margin-top:48px}.tic{width:52px;height:52px}
.dm{gap:32px}.dmbody{padding:22px;min-height:0}
.fq button{font-size:17px;padding:18px 0}.fa p{padding-right:0}
.ped .box{padding:72px 20px}
footer .cols{gap:28px;padding:48px 0 28px}
}
/* stars sit above the start of each section label */
.kick,.sec:not(.dark) .kick{display:block;position:relative;padding:0}
.kick .kst{position:absolute;left:0;top:0;width:42px;height:22px}
.phero .kick{padding:0}
/* footer: logo row on top, six link columns under it */
footer .cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 32px}
footer .cols>div:first-child{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 40px}
footer .cols>div:first-child p{margin:0!important}
@media (max-width:980px){footer .cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* main menu: wide panel */
.bar nav{align-items:center}
.mi>button{all:unset;cursor:pointer;padding:11px 0;color:var(--text);transition:color .15s}
.mi>button::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px;transition:transform .2s}
.mi>button:hover,.mi.on>button{color:var(--gold)}.mi.on>button::after{transform:rotate(225deg);margin-bottom:-2px}
@media (min-width:861px){.mi>button::after{display:none}}
.mi>button:focus-visible{outline:3px solid #7FA2FF;outline-offset:4px}
.mp{position:absolute;left:0;right:0;top:100%;background:rgba(7,11,24,.97);border-top:1px solid var(--edge);border-bottom:2px solid var(--yel);padding:34px clamp(20px,5vw,96px) 42px;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 48px;max-height:calc(100vh - 80px);overflow:auto}
.mp.c2{grid-template-columns:repeat(4,minmax(0,1fr))}
.mi.on .mp{display:grid;animation:mpin .25s ease}
@keyframes mpin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* moving from one menu to another: the panel stays, its height glides to the new size and the new content fades in */
@keyframes mpsw{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mpout{from{opacity:1;clip-path:inset(0 0 0 0)}to{opacity:0;clip-path:inset(0 0 100% 0)}}@keyframes mpcout{to{opacity:0;transform:translateY(-8px)}}
.mi.zout .mp{display:grid;pointer-events:none;animation:mpout .38s cubic-bezier(.4,0,.2,1) both}.mi.zout .mp>*{animation:mpcout .22s ease both}
@media (max-width:860px),(prefers-reduced-motion: reduce){.mi.zout .mp{display:none;animation:none}}
.mi.on .mp.sw{animation:none}.mi.on .mp.sw>*{animation:mpsw .45s cubic-bezier(.2,.8,.2,1) both}.mi.on .mp.sw>*:nth-child(2){animation-delay:.05s}.mi.on .mp.sw>*:nth-child(3){animation-delay:.1s}.mi.on .mp.sw>*:nth-child(n+4){animation-delay:.15s}
.mp h5{font-family:'Michroma',sans-serif;font-weight:400;font-size:15px;margin:0;color:var(--yel)}
.mp small{display:block;color:var(--soft);font-size:13.5px;margin:4px 0 12px}
.bar .mp a{display:block;padding:9px 0;transition:padding .2s,color .2s}.mp a strong{display:block;font-weight:600}.mp a span{display:block;font-size:14px;font-weight:400;color:var(--soft)}
.bar .mp a:hover{padding-left:8px;color:var(--yel)}
.bar.mon{background:rgba(7,11,24,.97)}
.mbtn{all:unset;cursor:pointer;display:none;width:44px;height:44px;align-items:center;justify-content:center}
.mbtn i{display:block;width:24px;height:2px;background:var(--text);box-shadow:0 7px 0 var(--text),0 -7px 0 var(--text)}
.mbtn:focus-visible{outline:3px solid #7FA2FF}
@media (max-width:860px){
.mbtn{display:flex;margin-left:auto}
.bar nav{display:none;position:fixed;inset:0;top:0;z-index:-1;background:var(--night);padding:84px 20px 40px;overflow:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;font-size:17px}
.bar.mopen nav{display:flex}
.bar.mopen .mbtn i{background:transparent;box-shadow:none;position:relative}.bar.mopen .mbtn i::before,.bar.mopen .mbtn i::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--text);transform:rotate(45deg)}.bar.mopen .mbtn i::after{transform:rotate(-45deg)}
.mi{border-bottom:1px solid var(--edge)}.mi>button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 0;font-family:'Michroma',sans-serif}
.bar nav>a{padding:16px 0;font-family:'Michroma',sans-serif}
.mp,.mp.c2{position:static;grid-template-columns:1fr 1fr;gap:18px 24px;padding:4px 0 22px;border:0;background:none;max-height:none}
.mp a span{display:none}
}
@media (prefers-reduced-motion: reduce){.mi.on .mp{animation:none}}
.mp .all{grid-column:1/-1;margin-top:22px;padding-top:16px!important;border-top:1px solid var(--edge);color:var(--yel)!important;font-weight:600}
/* feature explorer: yellow rules and a solid yellow number */
.fxlist button{border-top-color:var(--yel)}
.fxlist button:last-child{border-bottom:1px solid var(--yel)}
.fxview{border-left-color:var(--yel)}
.fxview .n{color:var(--yel);-webkit-text-stroke:0}
/* menu panels: intro, link columns, highlight block */
.mp,.mp.c2{grid-template-columns:minmax(200px,1fr) minmax(0,3fr) minmax(220px,1.1fr);gap:0 56px;align-items:start}
.mi:first-child .mp{grid-template-columns:minmax(200px,1fr) minmax(0,4.1fr)}
.mpi h4,.mpf h4{font-family:'Michroma',sans-serif;font-weight:400;font-size:clamp(18px,1.7vw,24px);margin:0;color:var(--text)}
.mpi p{margin:12px 0 0;color:var(--soft);font-size:15px;max-width:260px}
.mp .mpi .all{display:inline-block;margin-top:18px;padding:0!important;border:0;color:var(--yel)!important;font-weight:600}
.mpc{display:grid;gap:0 40px}.mpc.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.mpc.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.mpc.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mp h5{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--yel)}
.mpf{background:var(--yel);color:var(--ink);padding:26px 26px 28px;border-radius:14px}
.mpf h4{color:var(--ink)}.mpf p{margin:10px 0 18px;font-size:15px;color:var(--ink)}
.bar .mpf .mpb{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--text);padding:12px 18px;border-radius:10px;font-weight:600;transition:transform .2s}
.bar .mpf .mpb:hover{color:var(--text);padding-left:18px}
@media (max-width:1100px){.mp,.mp.c2{grid-template-columns:minmax(0,1fr) minmax(220px,300px)}.mi:first-child .mp{grid-template-columns:1fr}.mpi{display:none}}
@media (max-width:860px){.mp,.mp.c2,.mi:first-child .mp{display:none;grid-template-columns:1fr}.mi.on .mp{display:block}.mpf{display:none}.mpc,.mpc.c4,.mpc.c3,.mpc.c2{grid-template-columns:1fr 1fr;gap:18px 24px;padding:4px 0 22px}.mp h5{border:0;margin:0;padding:0}}
/* bigger logo, My Account button, badge row in the hero */
.bar img,.bar svg.lgo{height:32px}
.bact{display:flex;align-items:center;gap:12px}
.bar .acc{padding:11px 20px;border:1px solid rgba(255,255,255,.45);border-radius:12px;font-weight:600;transition:border-color .2s,color .2s,transform .2s}
.bar .acc:hover{border-color:var(--yel);color:var(--yel)}
.bar nav .onlym{display:none}
.badges{margin-top:34px;display:flex;flex-wrap:nowrap;align-items:center;gap:0 28px}
.badges img{height:36px;width:auto;display:block;flex:none}
.badges img[alt="GDPR"],.badges img[alt="ISO 27001"],.badges img[alt="AICPA"],.badges img[alt="IAB Europe"]{height:46px}
@media (max-width:1100px){.bar .acc{display:none}.bar nav .onlym{display:block}}
@media (min-width:861px) and (max-width:1100px){.bar nav .onlym{display:inline}}
/* tablet and small laptop: keep the whole menu on one line */
@media (min-width:1001px) and (max-width:1279px){.bar{padding-left:24px;padding-right:24px;gap:6px 16px}.bar>a img,.bar>a svg.lgo{width:210px;height:auto}.bar nav{gap:4px 28px}}
@media (min-width:861px) and (max-width:1000px){.bar{padding-left:18px;padding-right:18px;gap:6px 10px;flex-wrap:nowrap}.bar>a img,.bar>a svg.lgo{width:160px;height:auto}.bar nav{gap:4px 18px;font-size:14px;flex-wrap:nowrap;white-space:nowrap}.bar .cta{padding:10px 13px;font-size:14px;white-space:nowrap}}
@media (max-width:860px){.badges{flex-wrap:wrap;gap:14px 20px;margin-top:26px}.badges img{height:26px}.badges img[alt="GDPR"],.badges img[alt="ISO 27001"],.badges img[alt="AICPA"],.badges img[alt="IAB Europe"]{height:34px}}
@media (max-width:560px){.bar{gap:6px 10px}.bar img,.bar svg.lgo{height:18px}.mbtn{width:36px}}
/* footer: big statement */
.fbig{font-family:'Michroma',sans-serif;font-size:clamp(26px,5.6vw,96px);line-height:1.08;padding:84px 0 56px;color:transparent;-webkit-text-stroke:1px var(--yel);border-bottom:1px solid var(--edge)}
.fbig em{font-style:normal;color:var(--yel);-webkit-text-stroke:0}
footer .cols{padding:52px 0}
footer .cols>div:first-child{grid-column:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:9px}
footer h4{font-family:'Michroma',sans-serif;font-weight:400;color:var(--yel);font-size:13px;letter-spacing:.06em;margin-bottom:6px}
footer .cols a{transition:color .15s,padding .2s;color:#FFFFFF}footer .cols a:hover{padding-left:4px;color:var(--gold)}
.fmid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px;border-top:1px solid var(--edge);padding:26px 0}
.fmid img,.fmid svg.lgo{height:28px;width:auto;display:block}
.fmid .soc{display:flex;gap:22px}.fmid .soc a{color:var(--text);font-weight:600}.fmid .soc a:hover{color:var(--yel)}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px}
@media (max-width:640px){.fbig{padding:56px 0 40px}}
/* footer contact line: labelled items and round social icons */
.fmid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;align-items:center;gap:22px 40px;padding:34px 0}
.fmid .flogo img,.fmid .flogo svg.lgo{height:32px}
.fi small{display:block;font-family:'Michroma',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--yel);margin-bottom:4px}
.fi a,.fi span{color:var(--text);font-size:16px;font-weight:500}.fi a:hover{color:var(--yel)}
.fmid .soc{gap:10px}
.fmid .soc a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:var(--text);transition:background .2s,color .2s,border-color .2s,transform .2s}
.fmid .soc a:hover{background:var(--yel);border-color:var(--yel);color:var(--ink)}
@media (max-width:980px){.fmid{grid-template-columns:1fr 1fr}.fmid .flogo{grid-column:1/-1}}
@media (max-width:480px){.fmid{grid-template-columns:1fr}}
/* hero badges: smaller, bottoms on one line, the two IAB wordmarks the same size */
.badges{align-items:flex-end;gap:0 26px}
.badges img{height:30px}
.badges img[alt="IAB"]{height:22px}
.badges img[alt="IAB Europe"]{height:38px}
/* trust row as plain statements (2026-10-12): logos of bodies we are not members of or certified by were removed */
.badges.tb{flex-wrap:wrap;gap:10px 10px;align-items:center}
.badges.tb span{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text);border:1px solid rgba(244,245,247,.24);border-radius:999px;padding:8px 15px;background:rgba(7,11,24,.45);white-space:nowrap}
.badges.tb span::before{content:"";width:7px;height:12px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.badges img[alt="TAG"]{height:26px;margin-bottom:-3px}
.badges img[alt="GDPR"],.badges img[alt="ISO 27001"],.badges img[alt="AICPA"]{height:34px}
.badges img[alt="PCI DSS"]{height:28px}
@media (max-width:860px){.badges{gap:12px 18px}.badges img{height:24px}.badges img[alt="IAB"]{height:18px}.badges img[alt="IAB Europe"]{height:31px}.badges img[alt="TAG"]{height:21px}.badges img[alt="GDPR"],.badges img[alt="ISO 27001"],.badges img[alt="AICPA"]{height:28px}.badges img[alt="PCI DSS"]{height:23px}}
/* three standards logos (2026-10-12): larger, dimmed, full strength when pointed at */
.badges{gap:0 38px}
.badges img{opacity:.42;transition:opacity .3s ease}
.badges img:hover{opacity:1}
.badges{flex-wrap:wrap;row-gap:16px}
.badges .bl{opacity:.42;transition:opacity .3s ease}.badges:hover .bl{opacity:1}
/* the row behaves as one: point at any logo or the caption and all of it lights up; the caption is spread to the exact width of the logos */
.badges{display:inline-grid;grid-template-columns:repeat(3,auto);justify-content:start;align-items:end;column-gap:38px;row-gap:14px}
.badges:hover img{opacity:1}
.badges .bl{grid-column:1/-1;width:100%;text-align:justify;text-align-last:justify;white-space:nowrap;letter-spacing:.36em;font-size:13px}
.badges{margin-top:92px}
.badges .bl{flex:0 0 100%;align-self:center;font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);white-space:nowrap;line-height:1.45}
.badges img[alt="IAB"]{height:31px}.badges img[alt="IAB Europe"]{height:54px}.badges img[alt="TAG"]{height:37px;margin-bottom:-4px}
@media (max-width:860px){.badges{column-gap:26px;row-gap:12px;margin-top:56px}.badges .bl{letter-spacing:.2em;font-size:11px}.badges img{opacity:.55}.badges .bl{flex:0 0 100%;max-width:none}.badges img[alt="IAB"]{height:24px}.badges img[alt="IAB Europe"]{height:42px}.badges img[alt="TAG"]{height:29px}}
/* badge row, final form (2026-10-12): label on two lines, a tall divider, then the three logos; the whole row lights up together */
.badges.b3{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:0 34px;margin-top:132px}
.badges.b3 .bl{flex:none;width:auto;text-align:right;text-align-last:right;white-space:normal;font-size:12.5px;letter-spacing:.16em;line-height:1.55;position:relative;padding-right:34px;align-self:flex-end;margin-bottom:-5px}
.badges.b3 .bl::after{content:"";position:absolute;right:0;top:auto;bottom:-7px;width:1px;height:54px;transform:none;background:rgba(244,245,247,.55)}
.badges.b3 img{align-self:flex-end}
@media (max-width:860px){.badges.b3{flex-wrap:wrap;gap:14px 26px;margin-top:56px}.badges.b3 .bl{flex:0 0 100%;padding-right:0;font-size:11px;margin-bottom:0;text-align:left;text-align-last:left}.badges.b3 .bl br{display:none}.badges.b3 .bl::after{display:none}}
footer .cols h4:not(:first-child){margin-top:26px}
/* footer links: yellow underline draws in */
footer .cols a{align-self:flex-start;padding:0 0 3px;background:linear-gradient(var(--yel),var(--yel)) left bottom/0 2px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .2s}
footer .cols a:hover,footer .cols a:focus-visible{background-size:100% 2px;color:var(--text);padding-left:0}
@media (prefers-reduced-motion: reduce){footer .cols a{transition:none}}
/* menu panel links: yellow underline draws in under the link name */
.bar .mp .mpc a:hover{padding-left:0;color:var(--text)}
.mp .mpc a strong{display:inline-block;padding-bottom:3px;background:linear-gradient(var(--yel),var(--yel)) left bottom/0 2px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.mp .mpc a:hover strong,.mp .mpc a:focus-visible strong{background-size:100% 2px}
@media (prefers-reduced-motion: reduce){.mp .mpc a strong{transition:none}}
/* preloader: logo, stars light up one by one, yellow line fills (first page of a visit only) */
#pre{position:fixed;inset:0;z-index:100;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .45s ease;animation:pregone .4s 7s forwards}
#pre.off{opacity:0;pointer-events:none}
#pre svg{width:min(280px,62vw);height:auto;overflow:visible}
#pre .pst{transform-box:fill-box;transform-origin:center;opacity:0;animation:prepop .5s cubic-bezier(.2,1.4,.4,1) .4s forwards}
#pre .pst2{animation-delay:.25s}#pre .pst3{animation-delay:.1s}
#pre span{width:min(280px,62vw);height:2px;background:var(--edge);position:relative;overflow:hidden}
#pre span::after{content:"";position:absolute;inset:0;background:var(--yel);transform:scaleX(0);transform-origin:left;animation:preln 2.7s cubic-bezier(.45,0,.2,1) .1s forwards}
@keyframes prepop{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes preln{to{transform:scaleX(1)}}
@keyframes pregone{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){#pre{display:none}}
/* forms */
.dm form{gap:20px}
.dm label{display:block;font-size:14px;font-weight:600;letter-spacing:.02em}
.dm label em{font-style:normal;color:var(--yel);margin-left:3px}
.dm input,.dm select,.dm textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:17px;font-weight:400;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;transition:border-color .2s,box-shadow .2s,background .2s}
.dm textarea{min-height:130px;resize:vertical}
.dm select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F7CD46' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.dm input::placeholder,.dm textarea::placeholder{color:#7C879D}
.dm input:focus,.dm select:focus,.dm textarea:focus{outline:none;border:1px solid var(--yel);box-shadow:0 0 0 4px rgba(247,205,70,.18)}
.dm .bad input,.dm .bad select,.dm .bad textarea{border-color:#FF8A7A;box-shadow:0 0 0 4px rgba(255,138,122,.14)}
.dm .err{display:block;min-height:0;margin-top:6px;font-size:13.5px;font-weight:500;color:#FF8A7A}
.dm .ok{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--soft)}
.dm .ok input{width:20px;height:20px;flex:none;margin:1px 0 0;padding:0;border-radius:6px;accent-color:#F7CD46}
.dm .ok a{color:inherit;text-decoration:underline;text-decoration-color:var(--yel);text-underline-offset:3px}
.dm form .ok{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;align-items:flex-start}.dm form .ok input{flex:none;width:20px;height:20px;margin:2px 0 0}.dm form .ok>span{flex:1;min-width:0}
.dm .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.dm .fnote{font-size:13.5px;color:var(--soft);margin:0}
.dm button.btn[disabled]{opacity:.6;cursor:progress;animation:none}
.dm .done{border:1px solid var(--yel);border-radius:14px;padding:28px 30px}
.dm .done h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:22px;margin:0 0 8px}
.dm .done p{margin:0;color:var(--soft)}
.sec:not(.dark) .dm input,.sec:not(.dark) .dm select,.sec:not(.dark) .dm textarea{color:var(--ink);background:#fff;border:1px solid var(--line)}
.sec:not(.dark) .dm input:focus,.sec:not(.dark) .dm select:focus,.sec:not(.dark) .dm textarea:focus{border:1px solid var(--ink);box-shadow:0 0 0 4px rgba(247,205,70,.45)}
.sec:not(.dark) .dm .err{color:#B3261E}.sec:not(.dark) .dm .bad input,.sec:not(.dark) .dm .bad textarea{border-color:#B3261E}
.sec:not(.dark) .dm .ok,.sec:not(.dark) .dm .fnote,.sec:not(.dark) .dm .done p{color:var(--muted)}
.sec:not(.dark) .dm .done{border-color:var(--ink);background:#fff}
.fmid{grid-template-columns:1.4fr 1fr 1fr 1fr auto}
@media (max-width:1180px){.fmid{grid-template-columns:1fr 1fr 1fr}.fmid .flogo{grid-column:1/-1}}
@media (max-width:640px){.fmid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.fmid{grid-template-columns:1fr}}
/* home: the nine platform features as a night grid with glowing icons */
.hgr{margin-top:60px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hgr>div{position:relative;padding:36px 34px 40px;border-radius:18px;overflow:hidden;transition:background .4s}
.hgr>div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yel);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hgr>div:hover{background:rgba(247,205,70,.05)}.hgr>div:hover::after{transform:none}
.hgr .num{position:absolute;right:16px;top:4px;font-family:'Michroma',sans-serif;font-size:72px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,245,247,.1);background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 100%/100% 0;-webkit-background-clip:text;background-clip:text;transition:background-size .7s cubic-bezier(.2,.8,.2,1),-webkit-text-stroke-color .4s,transform .7s cubic-bezier(.2,.8,.2,1)}
.hgr>div:hover .num{background-size:100% 100%;-webkit-text-stroke-color:var(--yel);transform:translateY(4px) scale(1.04)}
.hgr svg{display:block;width:52px;height:52px;fill:none;stroke:var(--yel);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(247,205,70,.5));transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.hgr>div:hover svg{transform:scale(1.14);filter:drop-shadow(0 0 14px rgba(247,205,70,.95))}
.hgr h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:20px;margin:26px 0 0;color:var(--text);transition:color .35s}.hgr>div:hover h3{color:var(--yel)}
.hgr p{margin:10px 0 0;color:var(--soft);font-size:16.5px}
@media (max-width:1000px){.hgr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hgr{grid-template-columns:minmax(0,1fr)}.hgr>div{padding:28px 24px 30px}.hgr .num{font-size:58px}}
/* price cards: the same three cards as on every product page (copied from product.css) */
.pr h3{font-family:'Michroma',sans-serif;font-weight:400;margin:0}
.pr{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.pr>div{padding:32px 36px 40px;display:flex;flex-direction:column;transition:background .3s}
.pr>div:first-child{padding-left:0}
.pr>div+div{border-left:1px solid var(--line)}
.pr>div:hover{background:var(--yel)}
.pr>div:first-child:hover{box-shadow:-36px 0 0 var(--yel)}
.pr small{font-family:'Michroma',sans-serif;font-size:13px;color:#6F6A5C}
.pr>div:hover small,.pr>div:hover .sub,.pr>div:hover li{color:var(--ink)}
.pr h3{font-size:clamp(20px,2.1vw,30px);margin-top:8px}
.pr .amt span{font-size:.4em}
.pr .amt{white-space:nowrap;font-family:'Michroma',sans-serif;font-size:clamp(24px,2.7vw,44px);line-height:1.1;margin-top:26px}
.pr .sub{color:var(--muted);font-size:15.5px;margin-top:6px;min-height:48px}
.pr ul{list-style:none;margin:22px 0 30px;padding:0;flex:1}
.pr li{padding:10px 0;border-top:1px solid var(--line);color:var(--muted);font-size:16.5px}
.pr>div:hover li{border-color:rgba(11,16,32,.25)}
@media (max-width:980px){.pr{grid-template-columns:1fr}.pr>div{padding:28px 0 34px}.pr>div+div{border-left:0;border-top:2px solid var(--ink)}.pr>div:hover{box-shadow:-24px 0 0 var(--yel),24px 0 0 var(--yel)}}
.pr .amt{font-size:clamp(20px,2.3vw,40px)}
.pr{border-top:0;gap:20px;align-items:stretch}
.pr>div,.pr>div:first-child{background:#fff;border:0;border-radius:24px;padding:34px 32px 32px;box-shadow:0 20px 44px -30px rgba(11,16,32,.4);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.pr>div+div{border-left:0}
.pr>div:hover,.pr>div:first-child:hover{background:#fff;box-shadow:0 34px 60px -30px rgba(11,16,32,.5)}
.pr>div:hover small{color:#6F6A5C}
.pr>div:hover .sub,.pr>div:hover li{color:var(--muted)}
.pr ul{margin:24px 0 28px;padding:20px 0 0;border-top:1px solid var(--line)}
.pr li,.pr>div:hover li{position:relative;border:0;padding:7px 0 7px 30px;font-size:16px}
.pr li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;background:var(--yel) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='%230B1020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pr>div:first-child,.pr>div:first-child:hover{background:var(--night);color:var(--text);box-shadow:0 30px 60px -30px rgba(247,205,70,.6)}
.pr>div:first-child:hover{box-shadow:0 40px 70px -30px rgba(247,205,70,.75)}
.pr>div:first-child small,.pr>div:first-child:hover small{color:var(--soft)}
.pr>div:first-child .sub,.pr>div:first-child li,.pr>div:first-child:hover .sub,.pr>div:first-child:hover li{color:var(--soft)}
.pr>div:first-child .amt{color:var(--yel)}
.pr>div:first-child ul{border-color:var(--edge)}
.pr>div:first-child .btn.dk{background:var(--yel);color:var(--ink);border-color:var(--yel)}
@media (max-width:900px){.pr{grid-template-columns:minmax(0,1fr)}.pr>div,.pr>div:first-child{padding:28px 24px;border-top:0}.pr>div+div{border-top:0}.pr>div:hover,.pr>div:first-child:hover{transform:none}}
.pr>div:first-child,.pr>div:first-child:hover{background:var(--yel);color:var(--ink);box-shadow:0 30px 60px -32px rgba(247,205,70,.9)}
.pr>div:first-child:hover{box-shadow:0 40px 70px -30px rgba(247,205,70,1)}
.pr>div:first-child small,.pr>div:first-child:hover small{color:#4A3F12}
.pr>div:first-child .sub,.pr>div:first-child li,.pr>div:first-child:hover .sub,.pr>div:first-child:hover li{color:#2A2105}
.pr>div:first-child .amt{color:var(--ink)}
.pr>div:first-child ul{border-color:rgba(11,16,32,.25)}
.pr>div:first-child li::before{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='%23F7CD46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pr>div:first-child .btn.dk{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ---------- light version (html.lite), 2026-10-14 ---------- */
.lite #pre{display:none!important}
.lite #gl,.lite #gl2{display:none!important}
.lite .hero{background:#070B18 url(/lite/hero.jpg) center/cover no-repeat}
@media (max-width:760px){.lite .hero{background-image:linear-gradient(rgba(7,11,24,.62),rgba(7,11,24,.62)),url(/lite/hero-phone.jpg)}}
.lite .rv{opacity:1!important;transform:none!important;transition:none!important}
.lite *,.lite *::before,.lite *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
html.lite{scroll-behavior:auto!important}

/* Home: twelve products (2026-10-15) */
.hp12{background:#fff}
.hp12g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin-top:40px}
.hp12g h3{font-family:'Michroma',sans-serif;font-weight:400;font-size:16px;margin:0 0 10px;color:var(--ink)}
.hp12g a{display:block;padding:14px 0;border-top:1px solid rgba(11,16,32,.14);color:var(--ink);text-decoration:none}
.hp12g a strong{display:block;font-size:17px;font-weight:600}
.hp12g a span{display:block;font-size:15px;color:#4A4636;margin-top:2px}
.hp12g a:hover strong{background:linear-gradient(var(--gold),var(--gold)) left bottom/100% 2px no-repeat}
.hp12all{display:inline-block;margin-top:30px;font-weight:600;color:var(--ink);text-decoration:none;padding-bottom:2px;background:linear-gradient(var(--gold),var(--gold)) left bottom/100% 2px no-repeat}
@media (max-width:980px){.hp12g{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.hp12g{grid-template-columns:1fr}}
/* Home: products, four main with pictures + eight smaller (2026-10-15) */
.hp4{background:var(--marble)}
.sec.wel{background:#fff}
.hp4 .sm a{background:#fff}
.hp4 .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:50px}.hp4 .hd>p{max-width:420px;color:#5E5949;margin:0}
.hp4 .all{display:inline-flex;align-items:center;gap:10px;font-weight:600;background:var(--ink);color:#fff;padding:14px 24px;border-radius:999px;white-space:nowrap;text-decoration:none}.hp4 .all:hover{background:var(--gold);color:var(--ink)}
.hp4 svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hp4 .pri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hp4 .pri a{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;border:1px solid rgba(11,16,32,.12);color:var(--ink);text-decoration:none;padding-bottom:24px;transition:background .35s,border-color .35s}
.hp4 .pri a:hover{background:var(--gold);border-color:var(--gold)}
.hp4 .hi{display:block;background:#070B18;aspect-ratio:16/10;overflow:hidden}
.hp4 .hi .pv{display:flex;align-items:center;justify-content:center;height:100%;padding:14px}
.hp4 .hi svg{width:100%;height:100%;filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
.hp4 .pv .w{fill:none;stroke:rgba(244,245,247,.5);stroke-width:1.1}.hp4 .pv .y{fill:none;stroke:#F7CD46;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(247,205,70,.9))}
.hp4 .pv .run{stroke-dasharray:10 150;animation:hp4run 3.2s linear infinite}.hp4 .pv .run:nth-of-type(2n){animation-delay:-1.1s}.hp4 .pv .run:nth-of-type(3n){animation-delay:-2.2s}
.hp4 .pv text{font-family:'Michroma',sans-serif;font-size:11px;fill:#C5CDDB;letter-spacing:.08em}
@keyframes hp4run{to{stroke-dashoffset:-160}}
.hp4 .pri strong{margin:22px 24px 0;font-family:'Michroma',sans-serif;font-weight:400;font-size:18px;white-space:nowrap;-webkit-text-stroke:.9px currentColor}
.hp4 .pri .d{flex:1;margin:8px 24px 0;color:#5E5949;font-size:15.5px;line-height:1.55}
.hp4 .pri a:hover .d{color:var(--ink)}
.hp4 .go{margin:20px 24px 0;padding-top:16px;border-top:1px solid rgba(11,16,32,.12);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15px}
.hp4 .go svg.ic{width:22px;height:22px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.hp4 .pri a:hover .go svg.ic{transform:translateX(6px)}
.hp4 .pri a:hover .go{border-color:rgba(11,16,32,.25)}
.hp4 .sub{margin-top:40px}.hp4 .sub h3{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5E5949;margin:0 0 16px}
.hp4 .sm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hp4 .sm a{display:flex;gap:14px;align-items:center;border:1px solid rgba(11,16,32,.12);border-radius:18px;padding:16px 18px;color:var(--ink);text-decoration:none;transition:border-color .25s,box-shadow .25s}
.hp4 .sm a:hover{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.hp4 .sm .ico{flex:none;width:44px;height:44px;border-radius:14px;background:#F6F3EC;display:flex;align-items:center;justify-content:center}.hp4 .sm a:hover .ico{background:var(--gold)}
.hp4 .sm .ico svg.ic{width:22px;height:22px}
.hp4 .sm strong{display:block;font-size:16px}.hp4 .sm a span span{color:#5E5949;font-size:14px}
@media (max-width:1100px){.hp4 .pri,.hp4 .sm{grid-template-columns:repeat(2,minmax(0,1fr))}.hp4 .hd{flex-wrap:wrap}}
@media (max-width:620px){.hp4 .pri,.hp4 .sm{grid-template-columns:1fr}}
/* Solutions menu: four platforms (2026-10-18) */
.mp small.mad{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6B7691;margin:12px 0 2px}
.mpi .mai{margin-top:22px}.mpi .mai a strong{display:block;color:var(--text)}.mpi .mai a span{display:block;font-size:13px;color:var(--soft)}
/* phone menu open: a solid strip behind the logo so the scrolled menu never shows through it (2026-10-14) */
.bar.mopen::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:var(--night);z-index:-1;pointer-events:none}

/* Home: the yellow line is the H1 for search, the slogan is a display line that looks like the old H1 (2026-10-15) */
h1.eyebrow{font-family:inherit;margin:0;line-height:inherit;white-space:normal}