/* Tokens pulled from the ZUUZ Figma variables. Single light theme, as designed. */
:root{
  color-scheme: light;
  --brand:#0018ff; --brand-600:#0014d6; --brand-700:#0010a8; --brand-300:#8f9dff; --brand-200:#b8c0ff; --brand-100:#d8dcff; --brand-50:#eceeff;
  --blue:#0018ff; --logo-navy:#262262;
  --g50:#f9f9fa; --g100:#f2f2f4; --g150:#f7f7f8; --g200:#e2e2e8; --g300:#d4d4dd; --g400:#babac4; --g500:#4d5178; --g600:#7b7c8e; --g700:#5f5f72; --g800:#2d2d39; --g900:#1d1d20; --black:#000;
  --ok:#409b3f; --ok-ink:#2c6a2b; --ok-bg:#e3f6e2; --bad:#a1120b; --bad-bg:#fff3f2; --lead:#1e40af; --lead-bg:#eff6ff;
  --footer:#30343a; --footer-2:#3b4047;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hero:"Montserrat",system-ui,sans-serif;
  --mono:"Montserrat",system-ui,sans-serif;
  --shadow-sm:0 2px 6px rgba(16,24,40,.06);
  --shadow-xl:0 56px 56px -28px rgba(0,0,0,.03),0 32px 32px -16px rgba(0,0,0,.03),0 20px 20px -12px rgba(0,0,0,.03),0 3px 3px -1.5px rgba(0,0,0,.03),0 1px 1px -.5px rgba(0,0,0,.03);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--g900);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
img{display:block}
.wrap{max-width:1512px;margin:0 auto}
.inner{max-width:1180px;margin:0 auto;padding:0 24px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 18px;border-radius:8px;font-size:18px;font-weight:500;border:1px solid transparent;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(0,20,214,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-brand:hover{filter:brightness(1.07)}
.btn-white{background:#fff;border-color:var(--g200);box-shadow:var(--shadow-sm);color:var(--g900)}
.btn-white:hover{border-color:var(--g300)}

/* header (v69 rebuilt from the prospect site; v71 refined proportions) */
.hd{--bar-h:72px;--pgap:24px;position:sticky;top:12px;z-index:100;margin:8px 24px 0;font-family:var(--sans)}  /* body keeps its 8px default margin: net 16px / 32px */
.hd.scrolled{--bar-h:64px;--pgap:20px}
.hd-bar{max-width:1280px;height:var(--bar-h);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;padding:0 16px;border:1px solid rgba(226,226,232,.75);border-radius:18px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 28px -12px rgba(95,94,161,.16);transition:height .25s ease,background-color .25s ease,box-shadow .25s ease}
.hd.scrolled .hd-bar{background:rgba(255,255,255,.97);box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 40px -14px rgba(95,94,161,.26)}
.hd-bar > a{justify-self:start;display:flex;align-items:center;border-radius:8px}
.hd-bar > a img{height:30px;width:auto;transform:translateY(18.75%)}  /* the star hangs below the wordmark: centre the letters on the menu text */
.hd-nav{justify-self:center}
.hd-nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.hd-item{position:relative}
.hd-btn,.hd-mbtn{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;font:500 15px/20px var(--sans);letter-spacing:.1px;color:var(--g800);cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.hd-btn:hover,.hd-btn[aria-expanded="true"]{background:var(--g100);color:var(--g900)}
.hd-btn > svg:first-child,.hd-mbtn > svg:first-child{width:18px;height:18px;flex:none;color:var(--g500);transition:color .15s}
.hd-btn:hover > svg:first-child,.hd-btn[aria-expanded="true"] > svg:first-child{color:var(--brand)}
.hd-caret{width:8px;height:5px;margin-left:1px;flex:none;color:var(--g500);transition:transform .2s}
[aria-expanded="true"] > .hd-caret{transform:rotate(180deg)}
.hd-btn:focus-visible,.hd-demo:focus-visible,.hd-sign:focus-visible,.hd-bar > a:focus-visible,.hd-burger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hd-panel{position:absolute;top:calc(100% + var(--pgap));left:50%;width:var(--w);max-width:calc(100vw - 64px);transform:translateX(calc(-50% + var(--dx,0px)));display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:24px;padding:24px;background:#fff;border:1px solid var(--g200);border-radius:16px;box-shadow:0 18px 40px -12px rgba(29,29,32,.16),0 4px 10px -4px rgba(29,29,32,.06);animation:hdIn .16s ease-out}
.hd-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--pgap) + 2px)}  /* hover bridge from the button */
.hd-panel[hidden],.hd-mlist[hidden],.hd-mobile[hidden]{display:none}
@keyframes hdIn{from{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-4px)}}
.hd-grp{display:flex;flex-direction:column;gap:4px;min-width:0}
.hd-grp p{margin:0 0 8px;padding:0 8px;font:500 12px/16px var(--sans);letter-spacing:.3px;text-transform:uppercase;color:var(--g500)}
.hd-grp a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;font:500 14px/20px var(--sans);color:var(--g900);transition:background-color .15s}
.hd-grp a:hover,.hd-grp a:focus-visible{background:var(--g50)}
.hd-grp a svg{width:20px;height:20px;flex:none;color:var(--g500)}
.hd-cta,.hd-mcta{display:flex;align-items:center;gap:8px}
.hd-cta{justify-self:end}
/* v72: creative header buttons */
@property --hd-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.hd-demo,.hd-sign{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:10px;font:600 15px/1 var(--sans);letter-spacing:.1px;white-space:nowrap;isolation:isolate;transition:transform .2s ease,box-shadow .25s ease,color .2s ease}
.hd-demo:active,.hd-sign:active{transform:translateY(1px) scale(.98)}
/* Book a demo: white pill with a slowly turning ZUUZ-blue gradient edge; the calendar ticks on hover */
.hd-demo{padding:0 14px 0 12px;background:#fff;color:var(--g900);border:0;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.hd-demo::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--hd-a),#0018ff,#6b5cff 20%,#c9ceff 38%,#e2e2e8 50%,#c9ceff 62%,#39b4ff 80%,#0018ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:hdSpin 7s linear infinite}
.hd-demo::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:8.5px;background:linear-gradient(180deg,#fff,#f5f6ff);opacity:0;transition:opacity .25s}
.hd-demo:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,24,255,.35),0 1px 2px rgba(16,24,40,.05)}
.hd-demo:hover::before{animation-duration:2.4s}
.hd-demo:hover::after{opacity:1}
.hd-demo .hd-ic{width:17px;height:17px;flex:none;color:var(--brand);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.hd-demo .hd-tick{stroke-dasharray:9;stroke-dashoffset:9;transition:stroke-dashoffset .35s ease .05s}
.hd-demo:hover .hd-ic{transform:rotate(-8deg) scale(1.08)}
.hd-demo:hover .hd-tick,.hd-demo:focus-visible .hd-tick{stroke-dashoffset:0}
@keyframes hdSpin{to{--hd-a:360deg}}
/* Sign In: graphite with a passing light sheen; turns ZUUZ blue and the arrow slides out on hover */
.hd-sign{padding:0 13px 0 15px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#2d2d39,#1d1d20 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 3px rgba(0,0,0,.25),0 1px 2px rgba(16,24,40,.12)}
.hd-sign::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#3a55ff,#0018ff 55%,#0010a8);opacity:0;transition:opacity .3s ease}
.hd-sign::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);transform:translateX(-120%) skewX(-12deg);animation:hdSheen 6s ease-in-out 1.5s infinite;pointer-events:none}
.hd-sign:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -8px rgba(0,24,255,.55)}
.hd-sign:hover::before{opacity:1}
.hd-sign .hd-arrow{width:13px;height:13px;flex:none;margin-right:-2px}
.hd-sign .hd-arrow-line{stroke-dasharray:9;stroke-dashoffset:9;transition:stroke-dashoffset .25s ease}
.hd-sign .hd-arrow-head{transform:translateX(-3px);transition:transform .25s ease}
.hd-sign:hover .hd-arrow-line,.hd-sign:focus-visible .hd-arrow-line{stroke-dashoffset:0}
.hd-sign:hover .hd-arrow-head,.hd-sign:focus-visible .hd-arrow-head{transform:none}
@keyframes hdSheen{0%,70%{transform:translateX(-120%) skewX(-12deg)}100%{transform:translateX(260%) skewX(-12deg)}}
@media (prefers-reduced-motion:reduce){.hd-demo::before,.hd-sign::after{animation:none}.hd-sign::after{display:none}}
@media (max-width:1100px){.hd-demo .hd-ic{display:none}.hd-demo{padding:0 14px}}
.hd-burger{display:none;width:40px;height:40px;padding:0;border:1px solid var(--g200);border-radius:10px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.hd-burger span{width:16px;height:2px;border-radius:2px;background:var(--g900);transition:transform .2s,opacity .2s}
.hd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hd-mobile{max-width:1280px;margin:8px auto 0;max-height:calc(100dvh - 110px);overflow-y:auto;padding:4px 16px 16px;background:#fff;border:1px solid var(--g200);border-radius:16px;box-shadow:0 18px 40px -12px rgba(29,29,32,.16),0 4px 10px -4px rgba(29,29,32,.06)}
.hd-macc{border-bottom:1px solid var(--g100)}
.hd-mbtn{width:100%;height:52px;padding:0 4px;font-size:16px;gap:10px}
.hd-mbtn .hd-caret{margin-left:auto}
.hd-mlist{display:grid;gap:14px;padding:0 0 14px}
.hd-mlist .hd-grp a{font-size:15px}  /* type scale: bar 15 · panel links 14 · titles 12 · phone sheet 16 / 15 */
.hd-mcta{padding-top:16px}
.hd-mcta a{flex:1;height:44px;font-size:16px}
@media (max-width:1240px){.hd-bar{grid-template-columns:auto 1fr auto;column-gap:16px}.hd-btn{padding:0 10px}}
@media (max-width:1150px){.hd-btn > svg:first-child{display:none}.hd-demo,.hd-sign{padding:0 14px}}
@media (max-width:1023px){.hd{--bar-h:60px;margin:4px 8px 0;top:8px}.hd.scrolled{--bar-h:56px}.hd-bar{display:flex;justify-content:space-between;padding:0 10px 0 14px;border-radius:16px}.hd-bar > a img{height:26px}.hd-nav,.hd-cta{display:none}.hd-burger{display:flex}}

/* hero */
.hero{background:linear-gradient(#f5f5f7 0,#fff 170px,#fff 70%,#f7f7f8 100%);padding-top:106px;position:relative}
.hero-copy{text-align:center;padding:0 24px}
.hero h1{font-family:var(--hero);font-weight:500;font-size:clamp(34px,4.1vw,56px);line-height:1.25;letter-spacing:.3px}
.hero .sub{font-family:var(--hero);font-size:clamp(15px,1.3vw,18.5px);margin-top:14px;color:var(--g900)}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-cta .btn-white{min-width:226px}

.flow-scroll{overflow-x:auto;overflow-y:hidden;margin-top:28px;padding-bottom:40px;scrollbar-width:none}
.flow{position:relative;width:max(100%,920px);max-width:var(--page);margin:0 auto;aspect-ratio:1512/470;container-type:inline-size;--u:calc(100cqw / 1512)}
.flow-bg{position:absolute;inset:0;background-image:radial-gradient(var(--g300) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 30%,transparent 75%)}
.flow svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-inner{position:absolute;inset:0;font-size:calc(var(--u) * 13.4)}
.abs{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}

.ln{fill:none;stroke:var(--g300);stroke-width:1.2;transition:stroke .3s ease}
.ln.hot{stroke:var(--brand);stroke-width:2.2;stroke-dasharray:0 5;stroke-linecap:round} /* blue line shows as a dotted line */
.pulse{fill:var(--brand);stroke:var(--brand);stroke-opacity:.22;stroke-width:8}

.pill{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*8);font-weight:600;font-size:1em;box-shadow:0 0 0 calc(var(--u)*3) var(--brand-50);transition:box-shadow .3s ease,border-color .3s ease}
.pill.lit{border-color:var(--brand-300);box-shadow:0 0 0 calc(var(--u)*5) var(--brand-100),0 0 calc(var(--u)*24) rgba(0,24,255,.35)}
.chip{display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*12);background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*8);color:var(--g600);font-size:.94em;transition:border-color .3s ease,box-shadow .3s ease}
.chip b{font-weight:600;color:var(--g900);display:flex;align-items:center;gap:calc(var(--u)*6)}
.chip.lit{border-color:var(--brand-300);box-shadow:0 0 0 calc(var(--u)*3) var(--brand-50)}
.co{display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:.25em;background:var(--brand);color:#fff;font-size:.9em;font-weight:700;line-height:1}
.co.sq::after{content:"";width:.45em;height:.35em;border-radius:.08em;background:#fff}
.av{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;background:radial-gradient(circle at 50% 38%,#5a5a66 0 28%,transparent 30%),radial-gradient(circle at 50% 110%,#5a5a66 0 45%,transparent 47%),#d9d9df}
.tag-new{background:var(--ok-bg);color:var(--ok-ink);border-radius:calc(var(--u)*4);padding:calc(var(--u)*1) calc(var(--u)*6);font-size:.9em;font-weight:500}

.iso{transform-origin:0 0;transform:skewY(-22deg);border-radius:calc(var(--u)*16);background:linear-gradient(160deg,#fafafb,#ececf0);border:1px solid var(--g300);box-shadow:calc(var(--u)*-8) calc(var(--u)*8) 0 -1px #e4e4ea,calc(var(--u)*-8) calc(var(--u)*8) 0 0 var(--g300);padding:calc(var(--u)*16) calc(var(--u)*14);font-size:.92em}
.iso h4{margin:0 0 calc(var(--u)*12);font-size:1.1em;font-weight:500;font-style:italic;letter-spacing:.2px}
.iso ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*14)}
.iso li{display:flex;align-items:center;gap:calc(var(--u)*8);color:var(--g500);font-style:italic;white-space:nowrap}
.ck{flex:none;width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;border:1.5px dashed var(--g400);position:relative;transition:all .2s ease}
.ck.done{border:0;background:none}
.ck.done::after{content:"";position:absolute;left:18%;top:-4%;width:40%;height:78%;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(40deg)}
.core{transform-origin:0 0;transform:skewY(-22deg);border-radius:calc(var(--u)*22);background:linear-gradient(145deg,#4a5cff 0%,var(--brand-600) 45%,#0011b0 100%);box-shadow:calc(var(--u)*-12) calc(var(--u)*10) 0 0 #b8c0ff,calc(var(--u)*-12) calc(var(--u)*10) calc(var(--u)*30) rgba(0,20,214,.25);display:grid;place-items:center;transition:box-shadow .4s ease,filter .4s ease}
.core svg{width:52%;height:52%}
.core-logo{width:78%;height:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,16,150,.35))}
.core-flat .core-logo{width:74%}
.core.glow{filter:brightness(1.12);box-shadow:calc(var(--u)*-12) calc(var(--u)*10) 0 0 #b8c0ff,0 0 calc(var(--u)*60) rgba(0,24,255,.55)}
/* hero stage 4: stacked rounded 3D boxes with travelling neon edge lights (ZUUZ front, Connect, Structure behind) */
@property --neon-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes neon-spin{to{--neon-a:360deg}}
@keyframes neon-breathe{0%,100%{opacity:.5}50%{opacity:.95}}
.box3d{--r:calc(var(--u)*18);--side:#b7b9c6;--side2:#a3a5b3;--edge:rgba(255,255,255,.7);--neon1:#4a5cff;--neon2:#5a52ff;--spin:6s;--delay:0s;
  border-radius:var(--r);background:var(--face);cursor:pointer;outline:none;transition:box-shadow .35s ease;
  box-shadow:inset 0 calc(var(--u)*1.5) 0 var(--edge),
    calc(var(--u)*1.25) calc(var(--u)*-1) 0 var(--side),calc(var(--u)*2.5) calc(var(--u)*-2) 0 var(--side),calc(var(--u)*3.75) calc(var(--u)*-3) 0 var(--side),calc(var(--u)*5) calc(var(--u)*-4) 0 var(--side),
    calc(var(--u)*6.25) calc(var(--u)*-5) 0 var(--side),calc(var(--u)*7.5) calc(var(--u)*-6) 0 var(--side),calc(var(--u)*8.75) calc(var(--u)*-7) 0 var(--side),calc(var(--u)*10) calc(var(--u)*-8) 0 var(--side2),
    0 calc(var(--u)*18) calc(var(--u)*26) var(--drop,rgba(16,24,40,.16))}
/* neon light running around the edge */
.box3d::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(var(--u)*2);pointer-events:none;opacity:.9;transition:opacity .3s ease;
  background:conic-gradient(from var(--neon-a),transparent 0deg 215deg,var(--neon1) 275deg,var(--neon2) 318deg,#fff 338deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:neon-spin var(--spin) linear infinite;animation-delay:var(--delay)}
/* soft floating glow that follows the light */
.box3d::after{content:"";position:absolute;inset:calc(var(--u)*-6);border-radius:calc(var(--r) + var(--u)*6);z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--neon-a),transparent 0deg 195deg,var(--neon1) 275deg,var(--neon2) 330deg,transparent 360deg);filter:blur(calc(var(--u)*14));
  animation:neon-spin var(--spin) linear infinite,neon-breathe 3.2s ease-in-out infinite;animation-delay:var(--delay),var(--delay)}
.box3d:hover::before{opacity:1;padding:calc(var(--u)*2.6)}
.box3d:focus-visible{outline:calc(var(--u)*2.5) solid var(--brand);outline-offset:calc(var(--u)*5)}
.box3d.zuuz{--face:linear-gradient(145deg,#4a5cff 0%,var(--brand-600) 55%,#0011b0 100%);--side:#2a44ff;--side2:#1f38f0;--drop:rgba(0,24,255,.22);--edge:rgba(255,255,255,.3);--neon1:#5a52ff;--neon2:#a3f3ff;--spin:4.5s;display:grid;place-items:center}
.box3d.zuuz .core-logo{width:70%;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*8) rgba(165,243,252,.55))}
.box3d.zuuz.glow::after{inset:calc(var(--u)*-12);filter:blur(calc(var(--u)*20))}
/* landing page: ZUUZ logo neon glow - white tube core, cyan halo, electric-blue bloom, neon flicker */
@keyframes zuuz-logo-pulse{
  0%,100%{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*1.5) #ffffff) drop-shadow(0 0 calc(var(--u)*5) #a3f3ff) drop-shadow(0 0 calc(var(--u)*12) #5a52ff) drop-shadow(0 0 calc(var(--u)*26) rgba(56,189,248,.55))}
  40%{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*2.5) #ffffff) drop-shadow(0 0 calc(var(--u)*8) #a3f3ff) drop-shadow(0 0 calc(var(--u)*18) #5a52ff) drop-shadow(0 0 calc(var(--u)*40) rgba(56,189,248,.95))}
  50%{opacity:.35;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*1) rgba(255,255,255,.5)) drop-shadow(0 0 calc(var(--u)*2) rgba(103,232,249,.3)) drop-shadow(0 0 calc(var(--u)*4) rgba(34,211,238,.15)) drop-shadow(0 0 calc(var(--u)*6) rgba(56,189,248,0))}
  54%{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*2) #ffffff) drop-shadow(0 0 calc(var(--u)*7) #a3f3ff) drop-shadow(0 0 calc(var(--u)*16) #5a52ff) drop-shadow(0 0 calc(var(--u)*34) rgba(56,189,248,.85))}
  58%{opacity:.5;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*1) rgba(255,255,255,.6)) drop-shadow(0 0 calc(var(--u)*3) rgba(103,232,249,.4)) drop-shadow(0 0 calc(var(--u)*6) rgba(34,211,238,.25)) drop-shadow(0 0 calc(var(--u)*10) rgba(56,189,248,.1))}
  64%{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*2.5) #ffffff) drop-shadow(0 0 calc(var(--u)*8) #a3f3ff) drop-shadow(0 0 calc(var(--u)*18) #5a52ff) drop-shadow(0 0 calc(var(--u)*38) rgba(56,189,248,.9))}
}
.box3d.zuuz .core-logo{animation:zuuz-logo-pulse 2.2s ease-in-out infinite}
.box3d.connect{--face:linear-gradient(160deg,#f1f2f7 0%,#dcdee7 100%);--delay:-2s}
.box3d.structure{--face:linear-gradient(160deg,#f8f8fb 0%,#e7e8ef 100%);--side:#cdd0da;--side2:#bcbfcb;--neon1:#6d7bff;--neon2:#a3f3ff;--spin:7.5s;--delay:-4s}
.box3d.connect,.box3d.structure{font-size:.92em;color:var(--g900)}
.box3d h4{position:absolute;top:calc(var(--u)*9);left:calc(var(--u)*16);margin:0;font-size:1.087em;font-weight:700;letter-spacing:.2px;white-space:nowrap;display:flex;align-items:center;gap:calc(var(--u)*7);color:var(--g900)}
.box3d h4::before{content:"";flex:none;width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:var(--neon1);box-shadow:0 0 calc(var(--u)*5) var(--neon1),0 0 calc(var(--u)*11) var(--neon2)}
.box3d ul{position:absolute;top:calc(var(--u)*46);left:calc(var(--u)*14);right:calc(var(--u)*64);margin:0;padding:0;list-style:none;display:grid;gap:calc(var(--u)*9);overflow:hidden}
.box3d li{display:flex;align-items:center;gap:calc(var(--u)*7);white-space:nowrap;color:var(--g900);font-weight:600}
.box3d.raised{z-index:5}
.box3d.raised::after{display:none}
.box3d.raised::before{opacity:1;padding:calc(var(--u)*2.6)}
.box3d.connect.raised,.box3d.structure.raised{--face:#fff;--side:#c7ccff;--side2:#b3b9ff}
.box3d.raised h4{color:var(--brand)}
.box3d.raised ul{top:calc(var(--u)*40);left:calc(var(--u)*10);right:calc(var(--u)*6);gap:calc(var(--u)*7)}
.box3d.raised li{font-size:.95em;padding:calc(var(--u)*4) calc(var(--u)*6);border-radius:calc(var(--u)*7);background:var(--brand-50);color:var(--brand-700)}
.box3d.raised li:has(.ck:not(.done)){background:var(--g100);color:var(--g700)}
/* blink in sequence when the lead pulse arrives (ZUUZ → Connect → Structure) */
@keyframes box-blink{0%{outline-color:transparent;outline-offset:calc(var(--u)*1)}35%{outline-color:var(--neon2);outline-offset:calc(var(--u)*4)}100%{outline-color:transparent;outline-offset:calc(var(--u)*11)}}
@keyframes box-blink-glow{0%{opacity:.5}35%{opacity:1}100%{opacity:.6}}
.box3d.blink{outline:calc(var(--u)*3) solid transparent;animation:box-blink .6s ease-out}
.box3d.blink::before{opacity:1;padding:calc(var(--u)*3)}
/* ZUUZ box: when the blue line touches it, the edge light races around fast, then the box keeps blinking */
.box3d.zuuz.lap{--spin:.42s}
.box3d.zuuz.lap::before{opacity:1;padding:calc(var(--u)*3.2)}
.box3d.zuuz.lap::after{inset:calc(var(--u)*-12);opacity:1}
@keyframes zz-ring-blink{0%,100%{opacity:1}50%{opacity:.12}}
@keyframes zz-glow-blink{0%,100%{opacity:1}50%{opacity:.18}}
.box3d.zuuz.alive::before{padding:calc(var(--u)*2.8);animation:neon-spin var(--spin) linear infinite,zz-ring-blink 1s ease-in-out infinite}
.box3d.zuuz.alive::after{inset:calc(var(--u)*-10);animation:neon-spin var(--spin) linear infinite,zz-glow-blink 1s ease-in-out infinite}
/* ...and the same fast light runs through the ZUUZ logo itself, with a brighter glow */
.box3d.zuuz .logo-sweep{position:absolute;left:15%;top:50%;width:70%;aspect-ratio:400/120;transform:translateY(-50%);pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0 38%,#a3f3ff 45%,#fff 50%,#a3f3ff 55%,transparent 62% 100%);background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
  filter:drop-shadow(0 0 calc(var(--u)*3) #fff) drop-shadow(0 0 calc(var(--u)*10) #5a52ff)}
@keyframes zz-logo-sweep{from{background-position:130% 0}to{background-position:-30% 0}}
.box3d.zuuz.lap .logo-sweep{opacity:1;animation:zz-logo-sweep .42s linear infinite}
@keyframes zz-logo-bright{0%,100%{filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*3) #fff) drop-shadow(0 0 calc(var(--u)*10) #a3f3ff) drop-shadow(0 0 calc(var(--u)*22) #5a52ff) drop-shadow(0 0 calc(var(--u)*46) rgba(56,189,248,1))}
  50%{filter:brightness(0) invert(1) drop-shadow(0 0 calc(var(--u)*4) #fff) drop-shadow(0 0 calc(var(--u)*14) #a3f3ff) drop-shadow(0 0 calc(var(--u)*30) #5a52ff) drop-shadow(0 0 calc(var(--u)*60) rgba(56,189,248,1))}}
.box3d.zuuz.lap .core-logo{animation:zz-logo-bright .42s linear infinite}
.box3d.blink ul{right:calc(var(--u)*10)}
/* dummy values that change with every process */
.box3d li .dv{font-weight:700;color:var(--brand);margin:0 calc(var(--u)*-3)}
@keyframes val-in{from{opacity:0}to{opacity:1}}
[data-f].val-in{animation:val-in .45s ease-out}
[data-f]{transition:opacity .3s ease}
[data-f].pending{opacity:0}
/* stage 6: CRM the record lands in (paired with the stage 1 channel of the process) */
.rec .crm-badge{position:absolute;display:inline-flex;align-items:center;gap:calc(var(--u)*5);background:#fff;border:1px solid var(--g200);border-radius:999px;font-size:.78em;font-weight:600;color:var(--g800);white-space:nowrap;box-shadow:0 calc(var(--u)*4) calc(var(--u)*10) rgba(16,24,40,.1);pointer-events:none}
.rec .crm-badge svg{width:calc(var(--u)*16);height:calc(var(--u)*16);flex:none}
.rec .crm-badge.main{top:calc(var(--u)*-12);left:calc(var(--u)*14);padding:calc(var(--u)*3) calc(var(--u)*9) calc(var(--u)*3) calc(var(--u)*4);border-color:var(--brand-200)}
.rec .crm-badge.mini{position:static;padding:calc(var(--u)*2);box-shadow:none}
.box3d.blink::after{inset:calc(var(--u)*-12);animation:neon-spin var(--spin) linear infinite,box-blink-glow .6s ease-out;animation-delay:var(--delay),0s}
.box-hint{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*6);font-size:.78em;color:var(--g500);white-space:nowrap;pointer-events:none}
.box-hint i{width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:var(--brand-300)}

.rec{background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*16);display:grid;align-content:space-around;font-size:.94em;transition:border-color .3s ease,box-shadow .3s ease}
.rec div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rec > div > span:first-child{color:var(--g600)}
.rec b{font-weight:600;color:var(--g900);display:flex;align-items:center;gap:calc(var(--u)*6)}
.rec u{text-underline-offset:2px}
.rec.fade-top{-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.rec.fade-bot{-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.rec.focus{border-color:var(--brand-300)}
.rec.flash{box-shadow:0 0 0 calc(var(--u)*4) var(--brand-50),0 0 calc(var(--u)*30) rgba(0,24,255,.25)}
/* stage 6 wheel: cards scroll up one slot per process, top card wraps to the bottom */
.rec{transition:top .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1),opacity .25s ease,border-color .3s ease,box-shadow .3s ease}
.rec.wrap-out{opacity:0}
.rec.no-move{transition:none}
.rec .crm-link svg{width:calc(var(--u)*16);height:calc(var(--u)*16);flex:none}
/* equal stage heights: the top and bottom stage 6 cards are short peeks inside the shared band */
.rec.fade-top,.rec.fade-bot{overflow:hidden}
.rec.fade-top{align-content:end}
.rec.fade-bot{align-content:start}
.tag-assigned{background:var(--ok-bg);color:var(--ok-ink);border-radius:calc(var(--u)*5);padding:calc(var(--u)*1) calc(var(--u)*6);font-size:.92em}
.src-chip{display:flex;align-items:center;gap:calc(var(--u)*5);padding:0 calc(var(--u)*5);background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*8);font-size:.8em;font-weight:500;color:var(--g800);white-space:nowrap;box-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(29,29,32,.06)}
.src-chip i{width:calc(var(--u)*17);height:calc(var(--u)*17);border-radius:calc(var(--u)*5);background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none}
.src-chip i svg{width:72%;height:72%}
/* the channel that starts the current process */
.src-chip{transition:top .5s cubic-bezier(.4,0,.2,1),opacity .25s ease,border-color .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease}
.src-chip.wrap-out{opacity:0}
.src-chip.no-move{transition:none}
.src-chip i{transition:background-color .3s ease,color .3s ease}
.src-chip.active{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700);box-shadow:0 0 0 calc(var(--u)*3) var(--brand-100),0 0 calc(var(--u)*14) rgba(0,24,255,.3)}
.src-chip.active i{background:var(--brand);color:#fff}
.feed.hot{stroke:var(--brand);stroke-width:2;stroke-dasharray:none}
/* hero only: energetic comet pulse along the flow (glowing head, light streak, arrival spark) */
.fx-streak{fill:none;stroke-linecap:round;pointer-events:none}
.fx-glow{stroke:#3b5bff;stroke-width:7;opacity:.45;filter:url(#heroGlow)}
.fx-core{stroke:#a3f3ff;stroke-width:2.4}
.fx-halo{fill:url(#heroHead);opacity:.9;pointer-events:none}
.fx-head{fill:#fff;stroke:#0018ff;stroke-width:2;filter:url(#heroGlow);pointer-events:none}
.fx-spark{fill:none;stroke:#5a52ff;stroke-width:2;pointer-events:none}
#heroFlow .ln.hot,#heroFlow .feed.hot{filter:drop-shadow(0 0 1.5px rgba(0,24,255,.55))}
/* stage 1 wheel with an open card in the middle (like stage 6): 2 chips above, 2 below */
.src-chip.mid{opacity:0;pointer-events:none}
.src-shot{z-index:2;transform-origin:0 50%;transition:transform .26s ease,opacity .26s ease,border-color .3s ease,box-shadow .3s ease}
.src-shot.closing{transform:scale(.4735,.1974);opacity:.4}
@keyframes shot-open{from{transform:scale(.4735,.1974);opacity:.4}to{transform:none;opacity:1}}
.src-shot.opening{animation:shot-open .5s cubic-bezier(.2,.8,.2,1)}
/* channel header shows first while the card opens, the screenshot details follow */
.shot-top b{font-size:1.08em}
@keyframes shot-body-in{from{opacity:0;transform:translateY(calc(var(--u)*4))}to{opacity:1;transform:none}}
.src-shot.opening .shot.on > :not(.shot-top){animation:shot-body-in .45s ease .2s both}
.src-shot.lit{border-color:var(--brand-300);box-shadow:0 0 0 calc(var(--u)*3) var(--brand-50),0 calc(var(--u)*10) calc(var(--u)*24) rgba(0,24,255,.12)}
/* stage 1: dummy screenshot of the channel that is scrolling in (same size as a stage 6 card) */
.src-shot{background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*8);box-shadow:0 calc(var(--u)*10) calc(var(--u)*24) rgba(16,24,40,.08);overflow:hidden;font-size:.8em;color:var(--g800)}
.src-shot .shot{position:absolute;inset:0;padding:calc(var(--u)*9) calc(var(--u)*14);display:flex;flex-direction:column;gap:calc(var(--u)*6);opacity:0;transform:translateY(calc(var(--u)*8));transition:opacity .35s ease,transform .35s ease}
.src-shot .shot.on{opacity:1;transform:none}
.shot-top{display:flex;align-items:center;gap:calc(var(--u)*6);padding-bottom:calc(var(--u)*6);border-bottom:1px solid var(--g100);font-size:.92em;color:var(--g500);white-space:nowrap}
.shot-top b{font-weight:600;color:var(--g900)}
.shot-top span{margin-left:auto}
.shot-ic{width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*4);display:grid;place-items:center;background:var(--c);color:#fff;flex:none}
.shot-ic svg{width:72%;height:72%}
.shot-title{font-weight:600;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-line{display:flex;gap:calc(var(--u)*6);align-items:center;white-space:nowrap;color:var(--g700)}
.shot-k{color:var(--g500);min-width:calc(var(--u)*40)}
.shot-text{color:var(--g600);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shot-chip{align-self:flex-start;background:var(--brand);color:#fff;border-radius:999px;padding:calc(var(--u)*2) calc(var(--u)*10);font-weight:600;font-size:.9em}
.shot-bubble{max-width:84%;padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*8);line-height:1.3}
.shot-bubble.in{background:var(--g100);color:var(--g800);align-self:flex-start}
.shot-bubble.out{background:#dcf8c6;color:#1f3d1f;align-self:flex-end}
.shot-avs{display:inline-flex}
.shot-avs em{display:inline-grid;place-items:center;width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:50%;background:var(--brand-100);color:var(--brand-700);font-style:normal;font-size:.66em;font-weight:700;border:1px solid #fff;margin-right:calc(var(--u)*-4)}
.shot-wave{display:flex;align-items:center;gap:calc(var(--u)*2);height:calc(var(--u)*20)}
.shot-wave i{flex:1;height:var(--b);background:var(--brand-300);border-radius:calc(var(--u)*2)}
.feed{fill:none;stroke:var(--brand-300);stroke-width:1.3;stroke-dasharray:2 4.5;stroke-linecap:round;animation:feed-flow 1.4s linear infinite}
@keyframes feed-flow{to{stroke-dashoffset:-6.5}}

/* trusted + testimonial */
.frame{margin:0 16px;border:1px solid var(--g200);border-radius:24px;overflow:hidden;background:#fff}
.trusted{display:grid;grid-template-columns:minmax(220px,340px) 1fr;align-items:center;gap:32px;padding:56px 40px 58px}
.trusted p{font-size:20px;line-height:1.3;font-weight:500}
.trusted p span{color:var(--g500)}
.logos{min-width:0;overflow:hidden;color:var(--g500);filter:grayscale(1);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex;width:max-content;animation:logos-marquee 30s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
.logo-set{display:flex;align-items:center;gap:80px;padding-right:80px}
@keyframes logos-marquee{to{transform:translateX(-50%)}}
.logos span{font-weight:700;letter-spacing:-.02em;white-space:nowrap;opacity:.85}
.hatch{height:88px;background:repeating-linear-gradient(100deg,transparent 0 9px,var(--g200) 9px 10px);border-block:1px solid var(--g200)}
.testi-wrap{position:relative;background:var(--g100);overflow:hidden}
.testi-track{display:flex}
.testi{flex:0 0 100%;background:var(--g100);padding:44px 40px 40px}
.testi-dots{position:absolute;left:clamp(24px,3.5vw,44px);bottom:clamp(32px,3vw,42px);display:flex;align-items:center;gap:8px}
.testi-dots i{width:8px;height:8px;border-radius:50%;background:var(--g300);transition:width .35s ease,background .35s ease}
.testi-dots i.on{width:26px;border-radius:4px;background:var(--brand)}
.testi-nav{position:absolute;right:clamp(24px,3.5vw,44px);bottom:clamp(22px,2.6vw,34px);display:flex;gap:10px}
.tnav{width:44px;height:44px;border-radius:50%;border:1px solid var(--g300);background:#fff;color:var(--g900);font-size:20px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:border-color .2s ease,color .2s ease,transform .15s ease}
.tnav:hover{border-color:var(--brand);color:var(--brand)}
.tnav:active{transform:translateY(1px)}
.testi-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.quote{font-size:clamp(20px,2vw,30px);line-height:1.4;color:var(--g500);max-width:28em;font-weight:400}
.quote b{color:var(--black);font-weight:400}
.who{text-align:right;font-size:18px}
.who span{display:block;color:var(--g600);font-size:16px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:150px;padding-bottom:clamp(56px,5vw,72px)}
.stat{background:var(--g50);border-radius:12px;padding:36px 40px 36px}
.stat b{display:block;font-size:28px;font-weight:500;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:18px;color:var(--g700)}
@media (max-width:900px){.trusted{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;margin-top:48px}.testi-top{flex-direction:column}.who{text-align:left}}

/* built for deals */
.sec{padding-top:clamp(96px,14vw,226px)}
.center{text-align:center}
.h2{font-size:clamp(34px,3.4vw,50px);line-height:1.3;font-weight:500;letter-spacing:-.4px}
.h2 .dim{color:var(--g500);display:block}
.lede{font-size:19px;color:var(--g700);max-width:48em;margin:22px auto 0;text-wrap:pretty}
.crm-stage{position:relative;margin:40px 16px 0;height:clamp(340px,44vw,632px);border:1px solid var(--g200);border-radius:24px;overflow:hidden;background:#fff}
.crm-stage.dragging{cursor:grabbing}
.crm-stage.dragging .crm-app{transition:none}
/* flat mode: straighten the app so visitors can actually use it */
.crm-open{position:absolute;right:16px;top:16px;z-index:4;background:#fff;border:1px solid var(--g200);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--g900);box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color .2s ease,transform .15s ease}
.crm-open:hover{border-color:var(--brand-300);transform:translateY(-1px)}
.crm-stage.flat{height:auto;cursor:default;background:#fff;perspective:none}
.crm-stage.flat .crm-app{position:relative;left:0;top:0;transform:scale(var(--fit,1));transform-origin:0 0;-webkit-mask-image:none;mask-image:none;box-shadow:none;border-radius:0;transition:none}
.crm-stage.flat .crm-hint{display:none}
.crm-hint{position:absolute;left:16px;bottom:14px;z-index:3;background:rgba(255,255,255,.97);border:1px solid var(--g200);border-radius:999px;padding:5px 13px;font-size:12px;color:var(--g600);box-shadow:var(--shadow-sm);transition:opacity .4s ease;pointer-events:none}
.crm-stage.moved .crm-hint{opacity:0}
/* tilt taken from the Figma frame: horizontals up ~4.5°, verticals sheared ~20° */
.crm-app{position:absolute;left:var(--ox,28px);top:var(--oy,30px);width:1520px;display:grid;grid-template-columns:250px 1fr;transform-origin:0 0;transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--tz,-4.5deg)) skewX(var(--sk,20deg)) scale(var(--fit,.68));background:#fff;border-radius:20px;box-shadow:0 42px 90px -46px rgba(13,44,115,.38),0 12px 28px -18px rgba(13,44,115,.22),0 0 0 1px var(--g200);font-size:15px}
.crm-side{padding:30px 22px;background:linear-gradient(90deg,#fafafb,#fff);border-right:1px solid var(--g100)}
.crm-side img{height:30px;margin:0 0 30px 6px}
.crm-side ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;color:var(--g700)}
.crm-side li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px}
.crm-side li svg{width:16px;height:16px;flex:none}
.crm-side li.on{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.crm-side li .bdg{margin-left:auto;background:var(--brand);color:#fff;border-radius:999px;font-size:10px;padding:1px 7px}
.crm-side li .cv{margin-left:auto;color:var(--g400);font-size:11px}
.crm-side .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);padding-top:18px}
.crm-side .who{display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--g100);font-size:12px;color:var(--g600)}
.crm-side .who i{width:26px;height:26px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:12px}
.crm-main{padding:0;position:relative}
.st{justify-self:start;font-size:13px;font-weight:500;padding:2px 10px;border-radius:999px;border:1px solid}
.st.active{color:var(--ok-ink);background:var(--ok-bg);border-color:#c9e8c7}
.st.lead{color:var(--lead);background:var(--lead-bg);border-color:#cfdcff}
.st.lost{color:var(--bad);background:var(--bad-bg);border-color:#ffd6d2}
/* live ZUUZ agent dashboard, rebuilt as markup */
.dash-top{display:flex;align-items:center;gap:16px;padding:13px 22px;border-bottom:1px solid var(--g100)}
.dash-top h5{margin:0;font-size:15px;font-weight:600}
.dash-search{flex:1;max-width:430px;margin:0 auto;display:flex;align-items:center;gap:8px;border:1px solid var(--g200);border-radius:10px;padding:7px 12px;color:var(--g500);font-size:13.5px;box-shadow:var(--shadow-sm)}
.dash-search .k{margin-left:auto;font-size:11px}
.dash-agent{display:flex;align-items:center;gap:7px;border:1px solid var(--g200);border-radius:999px;padding:6px 15px;font-size:13px;font-weight:500;box-shadow:var(--shadow-sm)}
.dash-body{padding:16px 22px 0}
.dash-filters{display:flex;gap:14px;align-items:center;font-size:12.5px}
.segbar{display:flex;gap:3px;background:var(--g100);border-radius:999px;padding:3px}
.segbar span{padding:4px 11px;border-radius:999px;color:var(--g600)}
.segbar span.on{background:#fff;color:var(--brand-700);font-weight:600;box-shadow:var(--shadow-sm)}
.dash-empty{padding:22px 14px 30px;font-size:13px;color:var(--g600)}
.dash-empty b{display:block;font-size:14.5px;color:var(--g900);margin-bottom:6px;font-weight:600}
.dash-more{padding:12px 14px;font-size:12.5px;color:var(--brand-600);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}
.kpi{border:1px solid var(--g200);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.kpi:hover{transform:translateY(-2px)}
.kpi.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.kpi i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:13px;flex:none}
.kpi span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--g600)}
.kpi b{display:block;font-size:24px;font-weight:600;margin-top:3px}
.kpi.k1 i{background:var(--brand-50);color:var(--brand-600)}
.kpi.k2{background:#fffaf3}.kpi.k2 i{background:#fdeccd;color:#0011b3}
.kpi.k3{background:#f0f1ff}.kpi.k3 i{background:#dee1ff;color:#0018ff}
.kpi.k4{background:#f5fbf6}.kpi.k4 i{background:#dcf3e1;color:#15803d}
.kpi.k5{background:#fff5f5}.kpi.k5 i{background:#fcdcdc;color:#b91c1c}
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.panel{border:1px solid var(--g200);border-radius:14px;padding:14px 16px;background:#fff}
.panel h6{margin:0 0 14px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g600);display:flex;align-items:center;gap:8px}
.panel h6 i{width:22px;height:22px;border-radius:7px;background:var(--brand-50);display:grid;place-items:center;font-style:normal;font-size:11px;color:var(--brand-600)}
.pcols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-size:11.5px;color:var(--g600)}
.pcols b{display:block;font-size:21px;font-weight:600;color:var(--g900);margin:6px 0 8px}
.pcols small{display:block;font-size:10.5px;color:var(--g500)}
.pbar{height:4px;border-radius:2px;background:var(--g200);margin-bottom:8px}
.pbar.red{background:linear-gradient(90deg,#ef4444 72%,var(--g200) 72%)}
.pbar.green{background:linear-gradient(90deg,#22c55e 92%,var(--g200) 92%)}
.pbar.ink{background:linear-gradient(90deg,var(--brand) 26%,var(--g200) 26%)}
.gauge{text-align:center}
.gauge svg{width:112px;height:64px}
.gauge b{display:block;font-size:19px;font-weight:600;color:#0018ff;margin-top:-6px}
.dash-list-h{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g600);margin:18px 0 4px}
.drow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px dashed var(--g200)}
.drow .who{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px}
.drow .sub{font-size:12.5px;color:var(--g600);margin-top:3px}
.chip-w,.chip-c{font-size:10px;font-weight:600;border-radius:5px;padding:2px 7px}
.chip-w{background:#fef3c7;color:#000d8a}
.chip-c{background:var(--g100);color:var(--g600)}
.drow .btn-r{margin-left:auto;background:var(--brand);color:#fff;border-radius:8px;padding:7px 20px;font-size:13px;font-weight:500}
/* floating data + motion on the dashboard image */
.float-chip{position:absolute;left:var(--x);top:var(--y);z-index:4;background:rgba(255,255,255,.94);border:1px solid var(--g200);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--g800);box-shadow:0 12px 26px -14px rgba(29,29,32,.45);white-space:nowrap;pointer-events:none;animation:chip-float 9s ease-in-out infinite;animation-delay:var(--d)}
.float-chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:8px;vertical-align:1px}
@keyframes chip-float{0%{opacity:0;transform:translateY(16px) scale(.96)}10%{opacity:1;transform:translateY(0) scale(1)}28%{opacity:1;transform:translateY(-8px)}40%,100%{opacity:0;transform:translateY(-20px)}}
.crm-app{animation:dash-drift 12s ease-in-out infinite}
@keyframes dash-drift{50%{translate:0 -10px}}
.crm-app .pbar{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.crm-app.go .pbar{transform:scaleX(1)}
#gaugeNeedle{transform-origin:56px 56px;transform:rotate(-74deg);transition:transform 1.5s cubic-bezier(.2,.7,.2,1) .2s}
.crm-app.go #gaugeNeedle{transform:rotate(0)}
.drow{transition:background .7s ease}
.drow.lit{background:linear-gradient(90deg,var(--brand-50),#fff 78%)}
/* Built for Deals: clickable sidebar with Lead Management + Prospects pages */
.crm-side li[data-nav]{cursor:pointer;transition:background .2s ease,color .2s ease}
.crm-side li[data-nav]:hover{background:rgba(255,255,255,.09);color:#fff}
.crm-side li[data-nav]:focus-visible{outline:2px solid #8f9dff;outline-offset:1px}
.crm-side li .cv{transition:transform .25s ease}
.crm-side li.open .cv{transform:rotate(180deg)}
.crm-side li.subwrap{display:block;padding:0}
.crm-side .subnav{list-style:none;margin:0 0 4px 22px;padding:0 0 0 12px;border-left:1px solid rgba(255,255,255,.18);display:grid;gap:2px;overflow:hidden;max-height:0;transition:max-height .3s ease}
.crm-side .subnav.open{max-height:160px;padding-top:4px}
.crm-side .subnav li{padding:6px 10px;font-size:13.5px;border-radius:8px}
.crm-side .subnav li.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.dash-hint{position:absolute;right:18px;bottom:14px;z-index:6;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--brand-200);color:var(--brand-700);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;box-shadow:var(--shadow-sm);pointer-events:none}
.dash-hint::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.crm-app [data-go]{cursor:pointer}
.lm-crumb{font-size:12.5px;color:var(--g500);margin:0 0 12px}
.lm-crumb b{color:var(--g900);font-weight:700}
.lm-back{color:var(--brand-600);font-weight:600}
.lm-back:hover,.lm-link:hover{text-decoration:underline}
.lm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lm-bars{display:grid;gap:11px;font-size:12.5px;color:var(--g700)}
.lm-bars div{display:grid;grid-template-columns:110px 1fr 52px;align-items:center;gap:10px}
.lm-bars i{display:block;height:8px;width:var(--w);border-radius:4px;background:linear-gradient(90deg,var(--brand),#4a5cff)}
.lm-bars em{font-style:normal;font-weight:700;color:var(--g900);text-align:right}
.lm-funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lm-funnel div{border:1px solid var(--g200);border-radius:12px;padding:10px 12px;background:#fff}
.lm-funnel span{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g800);font-weight:600}
.lm-funnel b{display:block;font-size:24px;font-weight:700;margin:4px 0 2px}
.lm-funnel small{font-size:11px;color:var(--g500)}
.lm-funnel .hl{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-50)}
.lm-funnel .hl small{color:var(--brand-600);font-weight:600}
.lm-listbar{display:flex;align-items:baseline;justify-content:space-between}
.lm-link{font-size:12.5px;font-weight:600;color:var(--brand-600)}
.pr-bar{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:12.5px}
.pr-search{margin-left:auto;min-width:240px;border:1px solid var(--g200);border-radius:10px;padding:7px 12px;color:var(--g500);box-shadow:var(--shadow-sm)}
.pr-table{width:100%;border-collapse:collapse;font-size:13px}
.pr-table th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g800);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--g200)}
.pr-table td{padding:10px;border-bottom:1px dashed var(--g200);color:var(--g700);vertical-align:middle;white-space:nowrap}
.pr-table td b{display:block;color:var(--g900);font-weight:700;font-size:13.5px}
.pr-table td small{display:block;color:var(--g500);font-size:11.5px;margin-top:2px}
.pr-table td.val{color:var(--g900);font-weight:700}
.pr-table tbody tr{transition:background .25s ease}
.pr-table tbody tr:hover td{background:linear-gradient(90deg,var(--brand-50),#fff 85%)}
.pr-src{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--g800);background:var(--g100);border-radius:999px;padding:3px 10px}
.pr-src i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.pr-intent{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--g900)}
.pr-intent s{display:block;width:64px;height:6px;border-radius:3px;background:var(--g200);position:relative;overflow:hidden;text-decoration:none}
.pr-intent s::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:3px;background:linear-gradient(90deg,#22c55e,#15803d)}
.pr-stage{font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px}
.pr-stage.hot{background:#fee2e2;color:#b91c1c}
.pr-stage.warm{background:#fef3c7;color:#000d8a}
.pr-stage.new{background:var(--brand-50);color:var(--brand-700)}
/* Built for Deals: every sidebar page (setup guide, overviews, tables, pipeline board) */
.pr-stage.ok{background:#dcfce7;color:#15803d}
.sg-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}
.sg-head h4{margin:0 0 4px;font-size:20px;font-weight:700}
.sg-head p{margin:0;font-size:13px;color:var(--g600)}
.sg-ring{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p) * 1%),var(--g200) 0);display:grid;place-items:center}
.sg-ring b{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.sg-bar{height:6px;border-radius:3px;background:var(--g200);overflow:hidden;margin-bottom:14px}
.sg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#4a5cff)}
.sg-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sg-steps li{display:flex;align-items:center;gap:14px;border:1px solid var(--g200);border-radius:14px;padding:12px 16px;background:#fff}
.sg-steps li.done{background:#fafbff}
.sg-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--g100);color:var(--g700);flex:none}
.sg-steps li.done .sg-n{background:var(--brand);color:#fff}
.sg-steps b{display:block;font-size:14.5px;font-weight:700;color:var(--g900)}
.sg-steps small{display:block;font-size:12.5px;color:var(--g600);margin-top:2px}
.sg-steps .btn-r,.sg-steps .pr-stage{margin-left:auto}
.sg-steps .btn-r{background:var(--brand);color:#fff;border-radius:8px;padding:7px 20px;font-size:13px;font-weight:500}
.pb-board{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pb-col{background:var(--g50);border:1px solid var(--g200);border-radius:14px;padding:10px;display:grid;gap:8px;align-content:start}
.pb-h{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 4px}
.pb-h b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--g900)}
.pb-h span{font-size:11.5px;color:var(--g500)}
.pb-card{background:#fff;border:1px solid var(--g200);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow-sm)}
.pb-card b{display:block;font-size:13.5px;font-weight:700}
.pb-card small{display:block;font-size:11.5px;color:var(--g500);margin:2px 0 8px}
.pb-card div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-card em{font-style:normal;font-weight:700;font-size:13px;color:var(--g900)}
/* the app's own navy sidebar, and stronger numbers + section labels */
.crm-side{background:linear-gradient(180deg,#0d2c73,#0a1f56);border-right:0;color:#eaf0ff}
.crm-side img{filter:brightness(0) invert(1)}
.crm-side ul{color:rgba(234,240,255,.86)}
.crm-side li svg{opacity:.85}
.crm-side li.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.crm-side li .bdg{background:rgba(255,255,255,.2);color:#fff}
.crm-side li .cv{color:rgba(234,240,255,.55)}
.crm-side .grp{color:rgba(234,240,255,.55)}
.crm-side .who{border-top-color:rgba(255,255,255,.18);color:rgba(234,240,255,.8)}
.crm-side .who i{background:rgba(255,255,255,.18);color:#fff}
.kpi span{color:var(--g800);font-weight:600;letter-spacing:.07em}
.kpi b{font-size:27px;font-weight:700;letter-spacing:-.02em}
.panel h6{color:var(--g900);font-weight:700}
.pcols b{font-size:23px;font-weight:700}
.gauge b{font-weight:700}
.dash-list-h{color:var(--g900);font-weight:700}
.drow .who{font-weight:700}
/* more life: aura, light sweep, live badge, ticking tiles */
.crm-stage::before{content:"";position:absolute;inset:-12% -6%;background:radial-gradient(58% 54% at 50% 46%,rgba(0,24,255,.22),transparent 70%);animation:dash-aura 6s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes dash-aura{50%{opacity:.5;transform:scale(1.07)}}
.crm-stage::after{content:"";position:absolute;top:-40%;left:0;width:38%;height:180%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-150%) rotate(8deg);animation:dash-shine 7s ease-in-out infinite;pointer-events:none;z-index:5}
@keyframes dash-shine{0%,55%{transform:translateX(-150%) rotate(8deg)}92%,100%{transform:translateX(330%) rotate(8deg)}}
.live-badge{position:absolute;left:18px;top:16px;z-index:6;display:inline-flex;align-items:center;gap:8px;background:var(--g900);color:#fff;border-radius:999px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-300);box-shadow:0 0 0 0 rgba(143,157,255,.8);animation:live-dot 1.6s ease-out infinite}
@keyframes live-dot{70%{box-shadow:0 0 0 7px rgba(143,157,255,0)}100%{box-shadow:0 0 0 0 rgba(143,157,255,0)}}
.float-chip.accent{background:linear-gradient(135deg,var(--brand),#4a5cff);color:#fff;border-color:transparent;box-shadow:0 16px 32px -14px rgba(0,20,214,.75)}
.float-chip.accent::before{background:#fff}
.kpi.flash{animation:kpi-flash 1.3s ease}
@keyframes kpi-flash{0%{box-shadow:0 0 0 0 rgba(0,24,255,.5)}70%{box-shadow:0 0 0 10px rgba(0,24,255,0)}100%{box-shadow:0 0 0 0 rgba(0,24,255,0)}}
.kpi b{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.kpi.flash b{transform:translateY(-3px) scale(1.06)}
/* detail sheet: any part of the dashboard opens into this */
.dsheet{position:absolute;inset:196px 0 0 0;background:#fff;padding:14px 24px 28px;overflow:hidden;opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:3}
/* full page switch inside the app, for the sidebar sections */
.dpage{position:absolute;inset:51px 0 0 0;background:#fff;padding:18px 24px 28px;overflow:hidden;opacity:0;transform:translateX(18px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:1}
.dpage.open{opacity:1;transform:none;pointer-events:auto}
.dpage .bar{display:flex;align-items:center;gap:12px}
.dpage .back{border:1px solid var(--g200);border-radius:8px;padding:5px 12px;font-size:12.5px;background:#fff;box-shadow:var(--shadow-sm);cursor:pointer}
.dpage .kicker{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g600)}
.dpage h4{margin:14px 0 5px;font-size:22px;font-weight:600}
.dpage .lead{font-size:13.5px;color:var(--g600)}
.dpage .kpis{grid-template-columns:repeat(3,1fr);margin:16px 0 8px}
.kpi.flat{cursor:default}
.kpi.flat:hover{transform:none}
.dsheet.open{opacity:1;transform:none;pointer-events:auto}
.dsheet .bar{display:flex;align-items:center;gap:12px}
.dsheet .back{border:1px solid var(--g200);border-radius:8px;padding:5px 12px;font-size:12.5px;background:#fff;box-shadow:var(--shadow-sm);cursor:pointer}
.dsheet .kicker{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g600)}
.dsheet h4{margin:16px 0 6px;font-size:22px;font-weight:600}
.dsheet .lead{font-size:13.5px;color:var(--g600)}
.dsheet .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 4px}
.dsheet .meta div{border:1px solid var(--g200);border-radius:12px;padding:10px 12px}
.dsheet .meta span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--g600)}
.dsheet .meta b{display:block;font-size:15px;font-weight:600;margin-top:4px}
.dsheet .tlh{margin:20px 0 10px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--g600)}
.dsheet .tl{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:13.5px;color:var(--g700)}
.dsheet .tl li{display:flex;gap:10px;align-items:flex-start}
.dsheet .tl i{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:5px;flex:none}
.dsheet .acts{display:flex;gap:10px;margin-top:22px}
.dsheet .acts span{border-radius:8px;padding:8px 20px;font-size:13px;font-weight:500;cursor:pointer}
.dsheet .acts .b1{background:var(--brand);color:#fff}
.dsheet .acts .b2{border:1px solid var(--g200);box-shadow:var(--shadow-sm)}
.via{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand-600);font-weight:500}
.via::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}

.features{display:grid;grid-template-columns:1fr 1fr;gap:62px 40px;max-width:1270px;margin:92px auto 0;padding:0 24px}
.feat{display:flex;gap:20px}
.feat .ic{flex:none;width:106px;height:106px;border:1px solid var(--g200);border-radius:8px;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,var(--brand-50),#fff 70%)}
.feat .ic svg{width:48px;height:48px}
.feat h3{font-size:30px;font-weight:500;letter-spacing:-.4px;line-height:1.1;margin-top:2px}
.feat p{font-size:19px;color:var(--g700);margin-top:12px;max-width:24em}
@media (max-width:900px){.features{grid-template-columns:1fr}.feat .ic{width:72px;height:72px}.feat .ic svg{width:34px;height:34px}.feat h3{font-size:24px}.feat p{font-size:16px}}
.hatch.full{margin-top:124px}

/* how it works */
.how-h{font-size:clamp(34px,3.4vw,50px);font-weight:500;letter-spacing:-.4px}
.how-sub{font-size:clamp(22px,2.2vw,33px);font-weight:700;margin-top:26px;letter-spacing:-.3px}
.how-sub em{font-style:normal;color:var(--blue)}
.how-lede{font-family:var(--hero);font-size:17px;max-width:44em;margin:14px auto 0;color:var(--g900)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 8px;margin-top:72px}
.card{position:relative;background:var(--g100);border:1px solid var(--g200);border-radius:24px;overflow:hidden;min-height:560px;padding:40px 40px 0}
.card.wide{grid-column:1/-1}
.card h3{font-size:30px;font-weight:500;letter-spacing:-.4px}
.card > p{font-size:19px;color:var(--g700);margin-top:12px}
.card .stepno{position:absolute;top:44px;right:40px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--g600);background:#fff;border:1px solid var(--g200);border-radius:999px;padding:4px 10px;z-index:2}
.card.wide .head{text-align:center}
.card.wide .stepno{right:40px}
.dots{background-image:radial-gradient(var(--g300) 1px,transparent 1.2px);background-size:18px 18px}
@media (max-width:900px){.steps{grid-template-columns:1fr}.card{min-height:480px;padding:28px 24px 0}.card h3{font-size:24px}.card > p{font-size:16px}.card .stepno{top:30px;right:24px}}

/* step 1: inbox table */
.inbox{position:absolute;left:88px;right:-20px;top:170px;transform:perspective(1400px) rotateY(-6deg) rotateX(4deg);transform-origin:0 0}
.inbox .tbl{background:rgba(255,255,255,.55);border:1px solid var(--g200);border-radius:16px 0 0 0;padding:20px 0 0;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.ir{display:grid;grid-template-columns:210px 1fr 110px;align-items:center;padding:0 30px;height:80px;font-size:19px;color:var(--g900)}
.ir.th{height:44px;font-size:17px;color:var(--g700)}
.ir .c{display:flex;align-items:center;gap:14px}
.ir .c i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:14px}
.ir .n{display:flex;align-items:center;gap:14px}
.ir .n .av{width:30px;height:30px}
.ir .st{font-size:15px;padding:4px 12px}
.ir.lift{background:#fff;border-radius:14px;margin-left:-12px;box-shadow:0 20px 40px -18px rgba(29,29,32,.25),0 0 0 1px var(--g200);font-weight:500;position:relative}
.ir.lift::after{content:"New email";position:absolute;left:30px;top:-11px;font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--brand);border-radius:999px;padding:2px 9px;opacity:0;transform:translateY(4px);transition:all .35s ease}
.ir.lift.ping::after{opacity:1;transform:none}
.ir.faded{opacity:.55}
.ir.faded2{opacity:.3}

/* step 2: signal */
.mail{position:absolute;left:40px;right:40px;top:160px;background:#fff;border:1px solid var(--g200);border-radius:16px;box-shadow:var(--shadow-xl);padding:20px 22px;font-size:15px}
.mail .from{display:flex;justify-content:space-between;gap:12px;color:var(--g600);font-size:13px;padding-bottom:12px;border-bottom:1px solid var(--g100)}
.mail .from b{color:var(--g900);font-weight:600}
.mail .subj{font-weight:600;margin:12px 0 8px}
.mail .body{color:var(--g700);line-height:1.65}
.sig{border-radius:4px;padding:0 2px;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.sig.on{background:var(--brand-100);color:var(--brand-700);box-shadow:0 0 0 1px var(--brand-200)}
.sigs{position:absolute;left:40px;right:40px;bottom:34px;display:flex;flex-wrap:wrap;gap:8px}
.sigchip{display:flex;gap:8px;align-items:baseline;background:#fff;border:1px solid var(--g200);border-radius:10px;padding:8px 12px;font-size:14px;transition:all .3s ease}
.sigchip span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--g500)}
.sigchip b{font-weight:500}
.sigchip.on{border-color:var(--brand-300);box-shadow:0 0 0 3px var(--brand-50)}
.sigchip.on span{color:var(--brand-600)}
@media (max-width:620px){.mail{left:16px;right:16px;font-size:14px}.sigs{left:16px;right:16px}}

/* step 3: lead qualified */
.lq-scroll{overflow-x:auto;overflow-y:hidden;margin:36px -40px 0;scrollbar-width:none}
.lq{position:relative;width:max(100%,760px);max-width:1160px;margin:0 auto;aspect-ratio:1100/340;container-type:inline-size;--u:calc(100cqw / 1100)}
.lq .flow-inner{font-size:calc(var(--u)*12.5)}
.fc{background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*6);box-shadow:var(--shadow-sm);padding:calc(var(--u)*8) calc(var(--u)*10);display:grid;gap:calc(var(--u)*8);transition:border-color .3s ease}
.fc .t{display:flex;justify-content:space-between;color:var(--g900)}
.fc .t small{color:var(--g500);font-size:.8em}
.fc .v{background:var(--g50);border-radius:calc(var(--u)*4);padding:calc(var(--u)*5);display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*6);font-size:.98em}
.fc .v.split{justify-content:space-around;color:var(--g400)}
.fc.lit{border-color:var(--brand-300)}
.core-flat{border-radius:calc(var(--u)*26);background:linear-gradient(150deg,#4a5cff,var(--brand) 55%,#0016e6);display:grid;place-items:center;box-shadow:0 0 0 calc(var(--u)*5) #fff,0 0 0 calc(var(--u)*6) var(--g200);transition:box-shadow .4s ease}
.core-flat svg{width:58%;height:58%}
.core-flat.glow{box-shadow:0 0 0 calc(var(--u)*5) #fff,0 0 0 calc(var(--u)*6) var(--brand-200),0 0 calc(var(--u)*60) rgba(0,24,255,.5)}

/* step 4: workflow plane */
.plane-wrap{position:absolute;inset:130px 0 0 0;overflow:hidden}
.plane{position:absolute;left:50%;top:52%;width:800px;height:470px;transform:translate(-50%,-50%) rotateX(55deg) rotateZ(-38deg) scale(.86)}
.plane svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wn{position:absolute;background:#fff;border-radius:14px;box-shadow:0 12px 24px -12px rgba(29,29,32,.2),0 0 0 1px var(--g200);padding:14px 16px;font-size:14px;transition:box-shadow .3s ease}
.wn b{display:flex;align-items:center;gap:8px;font-weight:600}
.wn b i{width:18px;height:18px;border-radius:5px;background:var(--brand-100);display:inline-block;flex:none;position:relative}
.wn b i::after{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--brand)}
.wn b i.g{background:var(--ok-bg)}.wn b i.g::after{background:var(--ok)}
.wn small{display:block;color:var(--g500);margin-top:2px}
.wn .crit{margin-top:10px;padding-top:10px;border-top:1px solid var(--g100);font-size:13px;color:var(--g700)}
.wn .crit span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--g500)}
.wn.lit{box-shadow:0 12px 24px -12px rgba(0,20,214,.4),0 0 0 2px var(--brand-300)}
.wtag{position:absolute;font-size:12px;font-weight:500;color:var(--brand-600);background:var(--brand-50);border:1px solid var(--brand-200);border-radius:6px;padding:1px 8px}
.wtag.grey{color:var(--g600);background:var(--g100);border-color:var(--g200)}
.wexit{position:absolute;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;color:var(--g700);box-shadow:0 0 0 1px var(--g200)}
.wln{fill:none;stroke:var(--g300);stroke-width:1.5}
.wln.hot{stroke:var(--brand)}

/* step 5: revenue */
.rev{position:absolute;inset:150px 0 0 0}
.bars{position:absolute;left:34%;right:0;bottom:0;top:160px;border-top:1px dashed transparent}
.bars .yl{position:absolute;left:-54px;font-size:12px;color:var(--g500)}
.bars .tgt{position:absolute;left:0;right:0;border-top:1.5px dashed var(--brand-300)}
.bars .tgt span{position:absolute;right:12px;top:-20px;font-size:12px;color:var(--g700)}
.bars .col{position:absolute;bottom:0;width:13%;border-radius:10px 10px 0 0;background:repeating-linear-gradient(100deg,#ededf1 0 6px,#e3e3e9 6px 7px)}
.bars .col.hi{background:linear-gradient(var(--brand),rgba(0,24,255,.08));transition:height 1.2s cubic-bezier(.2,.7,.2,1)}
.target{position:absolute;left:14%;top:0;width:min(440px,70%);background:rgba(255,255,255,.97);border-radius:18px;box-shadow:var(--shadow-xl),0 0 0 1px var(--g200);padding:20px 20px 18px;backdrop-filter:blur(6px)}
.target h4{margin:0;font-size:16px;font-weight:500;display:flex;justify-content:space-between}
.target h4 span{color:var(--g500);letter-spacing:2px}
.target .num{display:flex;align-items:baseline;gap:10px;margin-top:16px}
.target .num b{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums}
.target .num span{color:var(--g600);font-size:14px;font-variant-numeric:tabular-nums}
.prog{height:34px;border-radius:9px;margin-top:14px;background:repeating-linear-gradient(100deg,#ededf1 0 6px,#dedee5 6px 7px);position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,#4a5cff,var(--brand));width:84.3%}
.target .foot{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:var(--g600)}
.target .foot b{color:var(--g900);font-weight:500}
.deal-pop{position:absolute;right:-18px;top:-16px;background:var(--g900);color:#fff;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .4s ease;white-space:nowrap}
.deal-pop.on{opacity:1;transform:none}
@media (max-width:620px){.target{left:16px;width:calc(100% - 32px)}.bars{left:20%}}

/* ZUUZ engine: 3D pipeline (the one dark band on the page) */
.engine{margin-top:150px;background:radial-gradient(900px 420px at 28% 0%,rgba(0,24,255,.30),transparent 70%),radial-gradient(700px 400px at 90% 100%,rgba(0,20,214,.18),transparent 70%),linear-gradient(#0b0a22,#07061a);color:#e7e8ff;padding:110px 0 100px;position:relative;overflow:hidden}
.eyebrow-d{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-300)}
.eng-head{display:grid;grid-template-columns:1fr minmax(0,520px);gap:24px 48px;align-items:end;max-width:1512px;margin:0 auto;padding:0 44px 44px}
.eng-head h2{font-size:clamp(32px,3.4vw,50px);font-weight:500;letter-spacing:-.4px;line-height:1.15;margin-top:14px;color:#fff}
.eng-head > p{font-size:18px;color:#b9bbe0}
.eng-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:1512px;margin:0 auto;padding:0 16px}
.eng-view{position:relative;height:660px;border-radius:24px;border:1px solid rgba(143,157,255,.18);overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 58%,#17145a,#0a0922 72%);cursor:grab;touch-action:pan-y;user-select:none}
.eng-view.grabbing{cursor:grabbing}
.eng-view{transition:border-color .25s ease,box-shadow .25s ease}
.eng-view.engaged{border-color:rgba(143,157,255,.6);box-shadow:0 0 0 3px rgba(0,24,255,.25)}
#engCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.eng-labels{position:absolute;inset:0;pointer-events:none}
.elabel{position:absolute;left:0;top:0;pointer-events:auto;background:rgba(12,11,40,.74);border:1px solid rgba(143,157,255,.28);color:#eef0ff;border-radius:10px;padding:6px 10px;font-size:12.5px;text-align:left;backdrop-filter:blur(6px);white-space:nowrap;will-change:transform;transition:border-color .2s ease,box-shadow .2s ease}
.elabel b{display:block;font-weight:600}
.elabel span{font-family:var(--mono);font-size:11px;color:var(--brand-300);font-variant-numeric:tabular-nums}
.elabel::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:linear-gradient(rgba(143,157,255,.7),transparent)}
.elabel:hover{border-color:var(--brand-300)}
.elabel.sel{border-color:var(--brand-300);box-shadow:0 0 0 3px rgba(0,24,255,.35),0 0 30px rgba(0,24,255,.5)}
.hud{position:absolute;display:flex;gap:8px;align-items:center;font-size:12px;z-index:2}
.hud.tl{top:16px;left:16px}.hud.tr{top:16px;right:16px}.hud.bl{bottom:16px;left:16px;color:#9ea1d6}.hud.br{bottom:16px;right:16px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
.live{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#cfd2ff;background:rgba(0,24,255,.16);border:1px solid rgba(143,157,255,.25);border-radius:999px;padding:5px 10px;display:flex;gap:8px;align-items:center;font-size:11px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#6ee7a8;box-shadow:0 0 0 3px rgba(110,231,168,.2);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.hbtn{background:rgba(255,255,255,.06);border:1px solid rgba(143,157,255,.25);color:#e7e8ff;border-radius:8px;padding:6px 11px;font-size:12.5px;transition:background .2s ease}
.hbtn:hover{background:rgba(255,255,255,.12)}
.hbtn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}
.lg{display:flex;align-items:center;gap:6px;color:#b9bbe0;font-size:11.5px;background:rgba(12,11,40,.6);padding:3px 9px;border-radius:999px}
.lg i{width:8px;height:8px;border-radius:50%}
.no3d-msg{display:none;position:absolute;inset:0;place-items:center;text-align:center;padding:40px;color:#b9bbe0}
.eng-view.no3d .no3d-msg{display:grid}
.eng-view.no3d .hud.bl,.eng-view.no3d .hud.tr{display:none}
.eng-panel{border-radius:24px;border:1px solid rgba(143,157,255,.18);background:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.02));padding:24px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start;min-width:0}
.st-info{display:flex;flex-direction:column;gap:16px;min-width:0}
.stage-nav{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--brand-300)}
.stage-nav .hbtn{width:34px;height:30px;padding:0;font-size:16px}
.eng-panel h3{font-size:24px;font-weight:500;color:#fff}
.eng-panel .desc{color:#b9bbe0;font-size:15px;margin-top:8px}
.out{margin:0;font-family:var(--mono);font-size:12px;line-height:1.6;background:rgba(0,0,0,.35);border:1px solid rgba(143,157,255,.15);border-radius:12px;padding:12px 14px;color:#dcdfff;white-space:pre-wrap;overflow-x:auto}
.out::before{content:"SAMPLE OUTPUT";display:block;font-size:10px;letter-spacing:.12em;color:#8d90c9;margin-bottom:6px}
.counters{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(143,157,255,.15);border-radius:12px;overflow:hidden}
.counters div{background:#0f0e2b;padding:12px 14px}
.counters dt{font-size:12px;color:#9ea1d6}
.counters dd{margin:4px 0 0;font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.elog{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:11.5px;display:grid;gap:7px}
.elog li{display:grid;grid-template-columns:62px 1fr;gap:8px;color:#c9cbf0;animation:fadein .4s ease}
.elog time{color:#7d80b8;font-variant-numeric:tabular-nums}
.elog b{font-weight:500;color:var(--brand-300)}
.elog li.hot b{color:#5a52ff}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}}
@media (max-width:1100px){.eng-view{height:540px}.eng-panel{grid-template-columns:1fr 1fr}.st-info{grid-column:1/-1}}
@media (max-width:640px){.eng-view{height:440px}.eng-panel{grid-template-columns:1fr}.eng-head{grid-template-columns:1fr;padding:0 20px 32px}.hud.br,.hud.bl{display:none}.elabel{font-size:11px;padding:4px 7px}.elabel span{display:none}}

/* six layers: CSS 3D architecture stack */
.arch-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;max-width:1300px;margin:40px auto 0;padding:0 24px;align-items:center}
.stack3d{position:relative;height:640px;perspective:1900px;--gap:74px} /* more room between layers so the text inside each one stays visible */
.stack3d.exploded{--gap:96px}
.stack-scene{position:absolute;left:50%;top:72%;width:400px;height:280px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-40deg)}
.layer{position:absolute;inset:0;transform:translateZ(calc(var(--i) * var(--gap)));border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(236,238,255,.4));border:1px solid rgba(0,24,255,.35);box-shadow:0 30px 60px -30px rgba(0,16,168,.35);transition:transform .6s cubic-bezier(.2,.7,.2,1),background .3s ease,box-shadow .3s ease,color .3s ease;padding:22px 24px;cursor:pointer}
.layer.sel{transform:translateZ(calc(var(--i) * var(--gap) + 28px));background:linear-gradient(135deg,#4a5cff,var(--brand-600));color:#fff;border-color:var(--brand-600);box-shadow:0 40px 80px -30px rgba(0,20,214,.65)}
.layer .lt{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand)}
.layer.sel .lt{color:var(--brand-100)}
.layer h4{margin:4px 0 12px;font-size:20px;font-weight:700;color:var(--g900)}
.layer.sel h4{color:#fff}
.layer .lc{display:flex;flex-wrap:wrap;gap:6px;max-width:250px}
.layer .lc span{font-size:12px;font-weight:600;border:1px solid rgba(0,24,255,.4);border-radius:6px;padding:3px 8px;background:rgba(255,255,255,.85);color:var(--g900)}
.layer.sel .lc span{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
.layer .hole{position:absolute;left:78%;top:70%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1.5px dashed rgba(0,24,255,.55);background:radial-gradient(rgba(0,24,255,.25),transparent 70%)}
.layer.sel .hole{border-color:rgba(255,255,255,.7)}
.pk{position:absolute;left:calc(78% - 7px);top:calc(70% - 7px);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(0,24,255,.35),0 0 24px 8px rgba(0,24,255,.7);animation:rise 3.6s linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translateZ(-20px);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateZ(calc(5 * var(--gap) + 40px));opacity:0}}
.layers-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.layers-list button{width:100%;display:grid;grid-template-columns:40px 1fr;gap:0 12px;text-align:left;background:none;border:1px solid transparent;border-radius:14px;padding:14px 16px;transition:background .2s ease,border-color .2s ease}
.layers-list button:hover{background:var(--g50)}
.layers-list button[aria-current="true"]{background:var(--brand-50);border-color:var(--brand-200)}
.layers-list .n{font-family:var(--mono);font-size:12px;color:var(--g500);padding-top:4px;grid-row:span 2}
.layers-list [aria-current="true"] .n{color:var(--brand-600)}
.layers-list b{font-size:18px;font-weight:500}
.layers-list .d{grid-column:2;display:none;color:var(--g700);font-size:14.5px;margin-top:6px}
.layers-list [aria-current="true"] .d{display:block}
@media (max-width:980px){.arch-grid{grid-template-columns:1fr}.stack3d{height:560px}}
@media (max-width:520px){.stack3d{height:460px}.stack-scene{transform:translate(-50%,-50%) scale(.72) rotateX(58deg) rotateZ(-40deg)}}

/* pricing */
.price-frame{margin:0 13px;border:1px solid var(--g200);border-radius:24px;overflow:hidden;background:radial-gradient(900px 420px at 50% 0%,var(--brand-50),transparent 70%),#fff}
.price-head{display:grid;grid-template-columns:1fr minmax(0,520px);gap:24px 48px;align-items:end;padding:84px 44px 56px}
.price-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600);margin-bottom:14px}
.price-head h2{font-size:clamp(32px,3.4vw,50px);font-weight:500;letter-spacing:-.4px;line-height:1.15}
.price-head p{font-size:19px;color:var(--g700)}
.seats{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:40px 44px 0;padding:18px 22px;border:1px solid var(--g200);border-radius:16px;background:rgba(255,255,255,.75)}
.seats label{font-weight:500}
.seats input{flex:1;min-width:180px;accent-color:var(--brand)}
.seats output{font-family:var(--mono);font-size:14px;color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-200);border-radius:999px;padding:4px 12px;font-variant-numeric:tabular-nums;min-width:96px;text-align:center}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:64px 44px 48px;align-items:start}
.plan{position:relative;border:1px solid var(--g200);border-radius:24px;overflow:hidden;background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .3s ease}
.plan::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-20%),rgba(0,24,255,.12),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.plan:hover::before{opacity:1}
.plan > *{position:relative}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(0,16,168,.35);border-color:var(--brand-200)}
.plan .top{padding:32px 32px 0;position:relative}
.plan h3{font-size:28px;font-weight:500;display:flex;align-items:center;gap:12px;letter-spacing:-.3px;flex-wrap:wrap}
.plan .badge{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:500;color:var(--brand-600);background:#fff;border-radius:8px;padding:4px 10px;letter-spacing:0}
.plan .badge::before{animation:badge-dot 1.2s ease-in-out infinite}
@keyframes badge-dot{0%,100%{opacity:1}50%{opacity:.15}}
.plan .badge::before{content:"";width:10px;height:10px;border-radius:50%;border:3px solid var(--brand-300);background:var(--brand-600)}
.plan .for{color:var(--g700);font-size:14.5px;margin-top:14px;min-height:2.9em}
.plan .price{display:flex;align-items:baseline;gap:10px;margin-top:26px}
.plan .price b{font-size:56px;font-weight:500;letter-spacing:-2px;line-height:1}
.plan .price span{color:var(--g700);font-size:14.5px}
.plan .total{margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--g600);font-variant-numeric:tabular-nums}
.plan .total b{display:inline-block;color:var(--g900);font-weight:500}
.plan .total b.bump{animation:total-bump .4s ease}
@keyframes total-bump{40%{transform:translateY(-3px);color:var(--brand)}}
.plan .btn{width:100%;margin:26px 0 30px;font-size:17px}
.plan .hatch{height:30px}
.plan .list{padding:26px 32px 34px}
.plan .list h4{margin:0 0 18px;font-size:15px;font-weight:600}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:16px;font-size:14.5px;color:var(--g700)}
.plan li{display:flex;align-items:center;gap:10px}
.plan li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%234f46e5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* Growth: the one highlighted plan, in the ZUUZ Engine indigo */
@property --plan-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.plan.pop{transform:translateY(-18px);border:1.5px solid transparent;color:#e7e8ff;background:linear-gradient(160deg,#17144d,#0b0a22) padding-box,conic-gradient(from var(--plan-ang),#0014d6,#8f9dff,#4a5cff,#0014d6) border-box;box-shadow:0 40px 90px -40px rgba(0,20,214,.75);animation:plan-border 5s linear infinite}
@keyframes plan-border{to{--plan-ang:360deg}}
.plan.pop:hover{transform:translateY(-24px);border-color:transparent}
.plan.pop::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,-20%),rgba(143,157,255,.2),transparent 60%);opacity:1}
.plan.pop .top::after{content:"";position:absolute;right:18px;top:14px;width:80px;height:44px;background-image:radial-gradient(rgba(143,157,255,.45) 1.2px,transparent 1.5px);background-size:10px 10px;pointer-events:none}
.plan.pop h3,.plan.pop .price b,.plan.pop .total b,.plan.pop .list h4{color:#fff}
.plan.pop .for,.plan.pop .price span,.plan.pop .total{color:#b9bbe0}
.plan.pop ul{color:#d4d6f5}
.plan.pop li::before{background:rgba(143,157,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23c7d2fe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.plan.pop .hatch{background:repeating-linear-gradient(100deg,transparent 0 9px,rgba(143,157,255,.16) 9px 10px);border-color:rgba(143,157,255,.16)}
.plan.pop .btn-brand{background:linear-gradient(90deg,var(--brand),#4a5cff);box-shadow:0 10px 30px -10px rgba(74,92,255,.8)}
@media (max-width:1000px){.plans{grid-template-columns:1fr;padding:32px 24px}.price-head{grid-template-columns:1fr;padding:48px 24px 8px}.seats{margin:32px 24px 0}.plan.pop,.plan.pop:hover{transform:none}}
/* v80: pricing = Solo / Growth / Scale / Enterprise with a billing switch */
.plans-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.plans-4 .plan .top{padding-inline:clamp(20px,1.8vw,26px)}
.plans-4 .plan .list{padding-inline:clamp(20px,1.8vw,26px)}
.plans-4 .plan .price b{font-size:clamp(40px,3.4vw,52px)}
.plans-4 .plan .price{flex-wrap:wrap;row-gap:6px}
.plans-4 .plan .for{min-height:4.4em}
.plans-4 .plan h3{font-size:clamp(22px,1.9vw,26px)}
.plans-4 .plan .badge{font-size:13px}
.plans-4 .plan ul{gap:12px}
.plans-4 .plan .price b.bump{display:inline-block;animation:total-bump .4s ease}
.bill{gap:10px 12px}
.bill-l{font-weight:500;margin-right:4px}
.bill button{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--g200);background:#fff;font:500 14px/1 var(--sans);color:var(--g700);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.bill button[aria-checked="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.bill output{min-width:0}
.bill-p{margin-left:auto;font-size:13px;color:var(--g600)}
.plans-more{margin:0;padding:0 44px 44px;text-align:center;font-size:15px}
.plans-more a{color:var(--brand);font-weight:500}
.plans-more a span{display:inline-block;transition:transform .2s}
.plans-more a:hover span{transform:translateX(4px)}
@media (max-width:1240px){.plans-4{grid-template-columns:repeat(2,minmax(0,1fr))}.plans-4 .plan.pop,.plans-4 .plan.pop:hover{transform:none}}
@media (max-width:1000px){.plans-4{grid-template-columns:1fr}.bill-p{margin-left:0;width:100%}.plans-more{padding:0 24px 32px}}

/* cta + faq */
.cta-zone{position:relative;padding-top:78px}
.cta{position:relative;max-width:946px;margin:0 auto;background:var(--g100);border:1px solid var(--g300);border-radius:20px;padding:58px 32px 52px;text-align:center;overflow:hidden}
.cta h2{font-size:clamp(28px,2.6vw,38px);font-weight:500;color:var(--g500);letter-spacing:-.3px}
.cta p{font-family:var(--hero);font-size:15.5px;margin-top:18px}
.cta .row{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.cta .deco{position:absolute;left:0;bottom:0;width:220px;height:80px;opacity:.6}
@media (max-width:980px){.cta{margin:0 16px}}
.faq-zone{position:relative;padding:190px 0 150px;overflow:clip}
.swirl{position:absolute;right:0;top:-10px;width:min(700px,48vw);height:1300px;pointer-events:none}
.swirl path{stroke-dasharray:1 1;stroke-dashoffset:0;animation:swirl-draw 14s linear infinite}
.swirl path + path{animation-delay:-5s}
@keyframes swirl-draw{0%{stroke-dashoffset:1}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.faq-orb{position:absolute;left:-175px;top:560px;width:350px;height:350px;border-radius:50%;background:conic-gradient(from 0deg,#0018ff,var(--brand),#4a5cff,#0018ff);-webkit-mask:radial-gradient(circle,transparent 56px,#000 57px);mask:radial-gradient(circle,transparent 56px,#000 57px);animation:orb-spin 16s linear infinite;pointer-events:none}
@keyframes orb-spin{to{transform:rotate(1turn)}}
.faq-wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)}
.faq-h{font-size:clamp(56px,6vw,86px);font-weight:800;letter-spacing:-3px;line-height:1;margin-top:14px;background:linear-gradient(100deg,var(--g800) 0 42%,var(--brand) 50%,var(--g800) 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:faq-shine 7s ease-in-out infinite}
@keyframes faq-shine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.faq-lede{font-size:18px;color:var(--g700);margin-top:20px;max-width:24em}
.faq-meter{display:flex;align-items:center;gap:16px;margin-top:36px}
.faq-count{font-family:var(--mono);font-size:14px;color:var(--g500);font-variant-numeric:tabular-nums}
.faq-count b{display:inline-block;font-size:28px;font-weight:500;color:var(--g900)}
.faq-count b.tick{animation:faq-tick .35s ease}
@keyframes faq-tick{from{transform:translateY(8px);opacity:.2}}
.faq-dots{display:flex;gap:6px}
.faq-dots i{width:8px;height:4px;border-radius:2px;background:var(--g300);transition:width .35s ease,background .35s ease}
.faq-dots i.on{width:28px;background:var(--brand)}
.faq-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.faq-list.in > li{animation:faq-rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d) * 90ms)}
@keyframes faq-rise{from{transform:translateY(26px)}}
@property --faq-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.faq-item{border:1.5px solid var(--g200);border-radius:16px;background:#fff;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.faq-item:hover{transform:translateY(-2px);border-color:var(--brand-200);box-shadow:0 18px 40px -24px rgba(0,20,214,.3)}
.faq-item.open{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--faq-ang),var(--brand-200),var(--brand),#4a5cff,var(--brand-100),var(--brand-200)) border-box;box-shadow:0 30px 70px -30px rgba(0,20,214,.35);animation:faq-border 4s linear infinite}
@keyframes faq-border{to{--faq-ang:360deg}}
.faq-q{width:100%;display:grid;grid-template-columns:44px 1fr 36px;align-items:center;gap:12px;background:none;border:0;padding:24px 26px;text-align:left;font-size:18px;font-weight:500;color:var(--g800)}
.faq-n{font-family:var(--mono);font-size:12px;color:var(--g500);transition:color .3s ease}
.faq-item.open .faq-n,.faq-item:hover .faq-n{color:var(--brand-600)}
.faq-ic{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--g200);transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--logo-navy);transition:background .3s ease}
.faq-ic::after{transform:rotate(90deg)}
.faq-item.open .faq-ic{transform:rotate(135deg);background:var(--brand);border-color:var(--brand)}
.faq-item.open .faq-ic::before,.faq-item.open .faq-ic::after{background:#fff}
.faq-a{height:0;overflow:hidden;transition:height .45s cubic-bezier(.2,.7,.2,1)}
.faq-a-in{visibility:hidden;transition:visibility 0s .45s}
.faq-item.open .faq-a-in{visibility:visible;transition-delay:0s}
.faq-a p{padding:0 70px 26px 82px;color:var(--g700);font-size:17px;line-height:1.55;opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.12s}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:40px}.faq-side{position:static}.faq-orb{display:none}}
@media (max-width:620px){.faq-q{grid-template-columns:32px 1fr 32px;padding:20px 18px;font-size:16px}.faq-ic{width:32px;height:32px}.faq-a p{padding:0 18px 22px 62px;font-size:16px}}

/* footer */
footer{background:var(--footer);color:#fff}
.foot{display:grid;grid-template-columns:320px repeat(3,1fr) 250px;gap:32px;padding:48px 74px 48px;max-width:1512px;margin:0 auto}
.foot img{height:25px;filter:brightness(0) invert(1)}
.foot .about{font-size:12.5px;line-height:1.3;margin-top:22px;display:grid;gap:16px}
.foot .about b{font-weight:600}
.foot .about hr{border:0;border-top:1px solid rgba(255,255,255,.3);margin:6px 0 0}
.foot .fbtn{margin-top:56px;display:inline-block;background:#fff;color:#111;font-weight:600;font-size:16px;padding:10px 10px;border:0}
.foot h6{margin:0 0 14px;font-size:16px;font-weight:600;letter-spacing:.02em}
.foot ul{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px;color:rgba(255,255,255,.72);font-size:16px}
.foot ul a:hover{color:#fff}
.social{align-self:center;border-top:1px solid rgba(255,255,255,.3);padding-top:22px;display:flex;gap:20px}
.social svg{width:20px;height:20px}
.legal{background:var(--footer-2);font-size:12px;color:rgba(255,255,255,.8)}
.legal div{max-width:1512px;margin:0 auto;padding:12px 68px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal nav{display:flex;gap:14px}
/* footer restyled to match the site: ZUUZ Engine indigo, hatch divider, brand button */
footer{background:radial-gradient(800px 320px at 12% 0%,rgba(0,24,255,.26),transparent 70%),radial-gradient(700px 300px at 95% 100%,rgba(0,20,214,.16),transparent 70%),linear-gradient(#0b0a22,#07061a);color:#e7e8ff}
footer::before{content:"";display:block;height:56px;background:repeating-linear-gradient(100deg,transparent 0 9px,rgba(143,157,255,.13) 9px 10px);border-bottom:1px solid rgba(143,157,255,.14)}
.foot{padding-top:56px;padding-bottom:56px}
.foot .about{font-size:13.5px;line-height:1.45;color:#b9bbe0}
.foot .about b{color:#fff;font-weight:600}
.foot .about hr{border-top-color:rgba(143,157,255,.18)}
.foot .fbtn{margin-top:40px;background:var(--brand);color:#fff;font-weight:500;font-size:15px;padding:12px 18px;border-radius:8px;box-shadow:0 1px 2px rgba(0,20,214,.3),inset 0 1px 0 rgba(255,255,255,.18);transition:filter .15s ease}
.foot .fbtn:hover{filter:brightness(1.1)}
.foot h6{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--brand-300);margin-bottom:16px}
.foot ul{color:#b9bbe0;font-size:15px}
.foot ul a{transition:color .15s ease}
.foot ul a:hover{color:#fff}
.social{border-top-color:rgba(143,157,255,.18);gap:10px}
.social svg{width:40px;height:40px;padding:10px;border:1px solid rgba(143,157,255,.25);border-radius:10px;background:rgba(255,255,255,.04);transition:background .15s ease,border-color .15s ease}
.social svg:hover{background:var(--brand);border-color:var(--brand)}
.legal{background:rgba(0,0,0,.28);border-top:1px solid rgba(143,157,255,.12);color:#8d90c9}
.legal a:hover{color:#fff}
@media (max-width:1100px){.foot{grid-template-columns:1fr 1fr;padding:40px 24px}.legal div{padding:12px 24px}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--g900);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.4);z-index:50;max-width:calc(100% - 32px)}

/* ---- layout rhythm: one width, one gutter, one vertical scale ---- */
:root{--page:1280px;--gutter:clamp(20px,4vw,44px);--sec-y:clamp(76px,9vw,140px);--block-y:clamp(36px,5vw,72px)}
.inner{max-width:var(--page);padding-inline:var(--gutter)}
.hero{padding-top:clamp(60px,8vw,108px)}
.hero-copy{padding-inline:var(--gutter)}
.hero h1{max-width:21ch;margin-inline:auto}
.hero .sub{margin-top:clamp(14px,1.6vw,22px);max-width:56ch}
.hero-cta{margin-top:clamp(28px,3.4vw,40px)}
.flow-scroll{margin-top:clamp(28px,4vw,56px);padding-bottom:clamp(32px,5vw,64px)}
.frame,.price-frame{max-width:var(--page);margin:0 auto}
.trusted{padding:clamp(34px,4.5vw,56px) clamp(24px,3.5vw,44px)}
.testi{padding:clamp(32px,4vw,44px) clamp(24px,3.5vw,44px)}
.stats{margin-top:clamp(44px,7vw,104px)}
.sec{padding-top:var(--sec-y)}
.crm-stage{max-width:var(--page);margin:clamp(28px,4vw,48px) auto 0}
.features{max-width:var(--page);padding-inline:var(--gutter);margin-top:var(--block-y);gap:clamp(36px,5vw,60px) clamp(28px,4vw,44px)}
.hatch.full{margin-top:var(--sec-y)}
.steps{max-width:var(--page);margin:var(--block-y) auto 0;padding-inline:var(--gutter);gap:clamp(16px,2vw,22px)}
.card{padding:clamp(28px,3vw,40px) clamp(24px,3vw,40px) 0}
.card .stepno{top:clamp(30px,3vw,42px);right:clamp(24px,3vw,40px)}
.engine{margin-top:0;padding:var(--sec-y) 0 calc(var(--sec-y) * .8)}
.frame{margin-top:calc(var(--sec-y) * .5)}
.eng-head{max-width:var(--page);padding:0 var(--gutter) var(--block-y)}
.eng-grid{max-width:var(--page);padding-inline:var(--gutter)}
.arch-grid{max-width:var(--page);padding-inline:var(--gutter);margin-top:var(--block-y);gap:clamp(32px,4vw,56px)}
.price-head{padding:clamp(44px,6vw,72px) clamp(24px,3.5vw,44px) clamp(28px,3.5vw,44px)}
.seats{margin:clamp(20px,3vw,32px) clamp(24px,3.5vw,44px) 0}
.plans{padding:clamp(36px,5vw,56px) clamp(24px,3.5vw,44px) clamp(32px,4.5vw,48px);gap:clamp(16px,2vw,22px)}
.plan .top{padding:clamp(26px,2.6vw,32px) clamp(24px,2.4vw,32px) 0}
.plan .list{padding:clamp(22px,2.4vw,26px) clamp(24px,2.4vw,32px) clamp(28px,3vw,34px)}
.cta-zone{padding-top:var(--sec-y)}
.cta{max-width:min(946px,var(--page));margin-inline:auto;padding:clamp(40px,5vw,58px) var(--gutter) clamp(36px,4.5vw,52px)}
.faq-zone{padding:var(--sec-y) 0 calc(var(--sec-y) * .9)}
.faq-wrap{max-width:var(--page);padding-inline:var(--gutter);gap:clamp(32px,5vw,64px)}
.faq-list{gap:14px}
footer::before{height:clamp(36px,5vw,56px)}
.foot{max-width:var(--page);padding:clamp(40px,5vw,56px) var(--gutter)}
.legal div{max-width:var(--page);padding:12px var(--gutter)}
@media (max-width:900px){.steps,.features,.arch-grid{gap:clamp(16px,4vw,28px)}}

/* ---- headline & subtitle system (typography refresh) ---- */
:root{--display:"Montserrat",system-ui,sans-serif}
.hero h1,.h2,.how-h,.how-sub,.eng-head h2,.price-head h2,.cta h2,.faq-h,.card h3,.feat h3,.plan h3{font-family:var(--display)}
.hero h1{font-weight:600;font-size:clamp(34px,4.7vw,60px);line-height:1.12;letter-spacing:-.018em}
.hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--brand),#4a5cff 55%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.h2,.eng-head h2,.price-head h2,.how-h{font-weight:600;font-size:clamp(29px,3.4vw,46px);line-height:1.14;letter-spacing:-.016em}
.h2 .dim{font-weight:500}
.cta h2{font-weight:600;font-size:clamp(27px,2.7vw,38px);line-height:1.15;letter-spacing:-.016em}
.how-sub{font-weight:700;font-size:clamp(20px,2vw,29px);letter-spacing:-.014em;margin-top:22px}
.faq-h{font-weight:700;letter-spacing:-.03em}
.card h3,.feat h3{font-weight:600;font-size:clamp(21px,2.1vw,27px);line-height:1.2;letter-spacing:-.012em}
.plan h3{font-weight:600;letter-spacing:-.012em}
.eyebrow,.eyebrow-d,.price-eyebrow,.faq-eyebrow,.stepno,.step-spec,.elabel span,.elog,.faq-n,.faq-count,.plan .total,.seats output,.view-all,.foot h6{font-weight:500}
/* subtitles: one system across the page */
.hero .sub,.lede,.how-lede,.cta p,.price-head p,.faq-lede,.card > p,.card .head p,.feat p{font-family:var(--sans);line-height:1.6;letter-spacing:0}
.hero .sub{font-size:clamp(16px,1.35vw,19px);color:var(--g600);max-width:60ch;margin-inline:auto}
.lede{font-size:clamp(16.5px,1.4vw,19px);color:var(--g600);max-width:62ch}
.how-lede{font-size:clamp(15.5px,1.25vw,17px);color:var(--g600);max-width:58ch}
.card > p,.card .head p{font-size:17.5px;color:var(--g600)}
.feat p{font-size:17.5px;color:var(--g600)}
.price-head p,.eng-head > p{font-size:17.5px;line-height:1.6}
.faq-lede{font-size:17.5px;color:var(--g600);line-height:1.6}
.cta p{font-size:16px;color:var(--g700)}
/* section labels carry the star from the ZUUZ mark */
.eyebrow-d::before,.price-eyebrow::before,.faq-eyebrow::before{content:"";display:inline-block;width:11px;height:11px;margin-right:9px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 7 5 12 12 12-7 0-12 5-12 12 0-7-5-12-12-12 7 0 12-5 12-12z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 7 5 12 12 12-7 0-12 5-12 12 0-7-5-12-12-12 7 0 12-5 12-12z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- CRM sync panel (closes out How it works) ---- */
.crmsync-wrap{max-width:var(--page);margin:clamp(16px,2vw,22px) auto 0;padding-inline:var(--gutter)}
.crmsync{background:var(--g100);border:1px solid var(--g200);border-radius:24px;padding:clamp(28px,3.4vw,44px)}
.crmsync h3{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.01em}
.crmsync > p{margin-top:12px;color:var(--g600);font-size:16.5px;line-height:1.55;max-width:62ch}
.crmsync-row{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);margin-top:clamp(22px,2.8vw,34px);flex-wrap:wrap}
.cs-zuuz{flex:none;width:clamp(96px,9vw,130px);aspect-ratio:1;border-radius:22px;background:linear-gradient(150deg,#4a5cff,var(--brand));display:grid;place-items:center;box-shadow:0 20px 44px -22px rgba(0,20,214,.75)}
.cs-zuuz img{width:64%;height:auto;filter:brightness(0) invert(1)}
.cs-arrows{flex:none;width:clamp(58px,6vw,84px)}
.cs-arrows svg{width:100%;height:auto;display:block}
.cs-logos{display:flex;gap:clamp(10px,1.3vw,16px);flex-wrap:wrap}
.cs-card{width:clamp(92px,9vw,118px);aspect-ratio:1;background:#fff;border:1px solid var(--g200);border-radius:16px;display:grid;place-content:center;justify-items:center;gap:10px;padding:10px;text-align:center;font-size:13.5px;font-weight:500;color:var(--g900);box-shadow:var(--shadow-sm);cursor:default;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease,box-shadow .22s ease,background .22s ease}
.cs-card:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:0 20px 36px -20px rgba(0,24,255,.5),0 0 0 3px var(--brand-50)}
.cs-card:hover svg{transform:scale(1.06)}
.cs-card svg{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.cs-card.dashed:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.cs-card.dashed:hover .cs-plus{color:var(--brand)}
.cs-arrows .sh{stroke:var(--brand);stroke-width:1.9;stroke-dasharray:2 5.5;animation:cs-wave 1.05s linear infinite}
.cs-arrows .sh.back{animation-name:cs-wave-back}
.cs-arrows .hd{stroke:var(--brand);stroke-width:1.9}
@keyframes cs-wave{to{stroke-dashoffset:-7.5}}
@keyframes cs-wave-back{to{stroke-dashoffset:7.5}}
.cs-card svg{width:clamp(28px,2.6vw,36px);height:clamp(28px,2.6vw,36px)}
.cs-card.dashed{background:transparent;border:1.5px dashed var(--g300);color:var(--g600);box-shadow:none}
.cs-plus{font-size:22px;line-height:1;color:var(--g500)}
@media (max-width:760px){.cs-arrows{width:64px;transform:rotate(90deg)}.crmsync-row{justify-content:center}}

/* ---- live user metrics ---- */
.lum-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.lum-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--brand)}
.lum .h2{margin-top:16px}
.lum-lede{margin-top:16px;font-size:16px;line-height:1.55;color:var(--brand-700);max-width:52ch}
.lum-label{margin:clamp(26px,3.4vw,42px) 0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.lum-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--g200);border-radius:16px;background:var(--g50);overflow:hidden}
.lum-card > div{padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,32px);border-right:1px solid var(--g200)}
.lum-card > div:last-child{border-right:0}
.lum-card b{display:block;font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.02em;color:var(--brand);font-variant-numeric:tabular-nums}
.lum-card span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g600)}
.lum-card.dark{background:#0c0c11;border-color:#0c0c11}
.lum-card.dark > div{border-right-color:rgba(255,255,255,.13)}
.lum-card.dark b{color:#5f74ff}
.lum-card.dark span{color:rgba(255,255,255,.7)}
.lum-foot{margin-top:16px;font-size:12.5px;color:var(--brand-600)}
@media (max-width:760px){
  .lum-card{grid-template-columns:1fr}
  .lum-card > div{border-right:0;border-bottom:1px solid var(--g200)}
  .lum-card > div:last-child{border-bottom:0}
  .lum-card.dark > div{border-bottom-color:rgba(255,255,255,.13)}
}

/* ---- FAQ: blue + on hover, tightened spacing after removing the button ---- */
.faq-item:hover .faq-ic{border-color:var(--brand)}
.faq-item:hover .faq-ic::before,.faq-item:hover .faq-ic::after{background:var(--brand)}
.faq-item.open:hover .faq-ic{border-color:var(--brand)}
.faq-item.open:hover .faq-ic::before,.faq-item.open:hover .faq-ic::after{background:#fff}
.faq-zone{padding:var(--sec-y) 0 calc(var(--sec-y) * .8)}
.faq-wrap{gap:clamp(28px,4.5vw,56px);align-items:start}
.faq-side{top:120px}
.faq-lede{max-width:30ch}
.faq-meter{margin-top:clamp(24px,3vw,34px)}
.faq-list{gap:12px}
.faq-q{padding:22px 26px}
.faq-a p{padding:0 60px 24px 82px}
@media (max-width:900px){.faq-side{position:static}.faq-lede{max-width:52ch}}

/* ---- testimonial carousel: alignment, spacing, proportions ---- */
.testi{padding:clamp(34px,4.4vw,52px) clamp(24px,3.5vw,44px) clamp(86px,8vw,106px)}
.testi-top{gap:24px clamp(24px,3vw,48px);align-items:flex-start}
.quote{font-size:clamp(19px,1.85vw,27px);line-height:1.38;max-width:27em}
.who{font-size:16.5px;line-height:1.35;white-space:nowrap}
.who span{font-size:14px;margin-top:2px}
.stats{margin-top:clamp(30px,4.4vw,58px);gap:clamp(14px,1.6vw,20px);padding-bottom:0}
.stat{padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px)}
.stat b{font-size:clamp(23px,2.1vw,28px);color:var(--brand);letter-spacing:-.01em}
.quote .hl{color:var(--brand);font-weight:600}
.stat span{font-size:15px;margin-top:8px}
.testi-bar{position:absolute;left:clamp(24px,3.5vw,44px);right:clamp(24px,3.5vw,44px);bottom:clamp(22px,2.6vw,32px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.testi-bar > *{pointer-events:auto}
.testi-dots{position:static;display:flex;align-items:center;gap:8px}
.testi-nav{position:static;display:flex;gap:10px}
.tnav{width:40px;height:40px;font-size:18px}
@media (max-width:900px){
  .testi-top{flex-direction:column}
  .who{text-align:left;white-space:normal}
  .testi{padding-bottom:96px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}
/* landing page stages 1-6: one font size for every label and value (12.6 units); weights unchanged, avatar initials stay icon-sized */
#heroFlow .flow-inner :is(.src-chip,.src-shot,.src-shot *,.pill,.box3d,.box3d *,.box-hint,.chip,.chip *,.rec,.rec *):not(.shot-avs em):not(svg):not(svg *){font-size:calc(var(--u)*12.6)}
#heroFlow .src-chip{width:calc(var(--u)*116);height:calc(var(--u)*30)} /* stage 1 channel chips (not the centre card): a little bigger, inside the same y 111-403 band */
/* stages 1-6: text turns bold (600) only while the blue line is at that stage (.bold-now, set by the hero loop); headings and values that are already bold keep their weight */
#heroFlow .flow-inner .bold-now,#heroFlow .flow-inner .bold-now :not(svg):not(svg *):not(.shot-avs em):not(h4):not(b){font-weight:600}
/* landing page stage 2: box colours and style from the reference (grey tiles, green step circles, violet-blue ZUUZ face).
   Placement, size, angle and order are unchanged; a box brought to the front, the flash and keyboard focus keep their own look */
#heroFlow .box3d.connect:not(.raised),#heroFlow .box3d.structure:not(.raised){--face:linear-gradient(160deg,#f5f5f8,#ecedf1);--side:#e2e4ea;--side2:#c5c8d1}
#heroFlow .box3d.connect:not(.raised):not(.blink):not(:focus-visible),#heroFlow .box3d.structure:not(.raised):not(.blink):not(:focus-visible){outline:calc(var(--u)*1) solid #c9ccd4}
#heroFlow .box3d.connect h4::before,#heroFlow .box3d.structure h4::before{display:none}
#heroFlow .box3d.connect:not(.raised) h4,#heroFlow .box3d.structure:not(.raised) h4{color:#1d1d20}
#heroFlow .box3d:not(.raised) li{color:#9a9daa;font-weight:500}
#heroFlow .box3d:not(.raised) ul{gap:calc(var(--u)*14)}
#heroFlow .box3d .ck{width:calc(var(--u)*16);height:calc(var(--u)*16);border:0;background:#dcefdd}
#heroFlow .box3d .ck.done::after{left:36%;top:20%;width:24%;height:46%;border-color:#1f7a3a;border-width:0 calc(var(--u)*2) calc(var(--u)*2) 0}
#heroFlow .box3d .ck:not(.done){background:none;border:calc(var(--u)*1.6) solid #1f7a3a;border-right-color:transparent}
#heroFlow .box3d:not(.raised) li:not(:last-child) .ck::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(var(--u)*14);background:#b9d8bd}
#heroFlow .box3d.zuuz{--face:linear-gradient(160deg,#4b2ff5 0%,#3b2cf2 45%,#2238ff 100%)}/* landing page: ZUUZ logo on the ZUUZ box without any glow (plain white logo); the box edge light and blink stay */
#heroFlow .box3d.zuuz .core-logo,#heroFlow .box3d.zuuz.lap .core-logo{animation:none;filter:brightness(0) invert(1)}
#heroFlow .box3d.zuuz .logo-sweep{display:none}
/* landing page stage 1: a bigger channel card; the other channels wait as a deck of cards behind it and swap forward each process */
#heroFlow .src-chip{visibility:hidden}
#heroFlow .src-ghost{background:#fff;border:1px solid var(--g200);border-radius:calc(var(--u)*8);box-shadow:0 calc(var(--u)*6) calc(var(--u)*16) rgba(16,24,40,.06);transform-origin:50% 0;z-index:1}
#heroFlow .src-ghost.g1{transform:translateY(calc(var(--u)*-10)) scale(.94)}
#heroFlow .src-ghost.g2{transform:translateY(calc(var(--u)*-20)) scale(.88);background:#fafafb}
#heroFlow .src-shot{transform-origin:50% 0}
#heroFlow .src-shot.closing{transform:translateY(calc(var(--u)*-20)) scale(.88);opacity:0}
@keyframes shot-swap-in{from{transform:translateY(calc(var(--u)*-10)) scale(.94);opacity:.5}to{transform:none;opacity:1}}
#heroFlow .src-shot.opening{animation:shot-swap-in .5s cubic-bezier(.2,.8,.2,1)}
#heroFlow .src-shot .shot{gap:calc(var(--u)*10);padding:calc(var(--u)*16) calc(var(--u)*16) calc(var(--u)*18);justify-content:space-between} /* rows spread evenly down the bigger card: header at the top, action at the bottom *//* Built for Deals: the dashboard sits flat and faces front (no rotation or skew); it still auto-fits and stays centred in the frame */
.crm-stage:not(.flat) .crm-app{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(var(--fit,.68))}
/* Built for Deals: clean rounded dashboard corners (the dark sidebar and content follow the curve) */
.crm-stage .crm-app{overflow:hidden}
/* Built for Deals: floating pop-ups hide while a record side panel is open */
.crm-stage.rd-open .float-chip{visibility:hidden}
/* Built for Deals: clickable items inside the pages, and the record side panel */
.crm-app .is-link,.crm-app [data-view="dashboard"] .kpi,.crm-app .is-row,.crm-app .segbar > span{cursor:pointer}
.crm-app .is-link{transition:box-shadow .2s ease,background-color .2s ease}
.crm-app .is-link:hover,.crm-app [data-view="dashboard"] .kpi:hover{box-shadow:0 0 0 2px var(--brand-200)}
.crm-app .is-row{transition:background-color .2s ease}
.crm-app .is-row:hover{background:var(--brand-50)}
.crm-app .is-row.is-open{background:var(--brand-50);box-shadow:inset 3px 0 0 var(--brand)}
.crm-app .is-row:focus-visible,.crm-app .is-link:focus-visible,.crm-app .kpi:focus-visible,.crm-app .segbar > span:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.crm-app .rf-empty td{text-align:center;color:var(--g500);padding:22px}
.crm-main{position:relative}
.rec-drawer{position:absolute;top:0;right:0;bottom:0;width:380px;background:#fff;border-left:1px solid var(--g200);box-shadow:-24px 0 48px -24px rgba(13,44,115,.28);padding:26px 26px 22px;z-index:6;display:flex;flex-direction:column;gap:18px;animation:rd-in .28s ease}
@keyframes rd-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.rec-drawer[hidden]{display:none}
.rec-drawer .rd-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rec-drawer .rd-head small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600);font-weight:600}
.rec-drawer .rd-head b{display:block;font-size:22px;font-weight:700;color:var(--g900);margin-top:4px}
.rec-drawer .rd-head span{display:block;color:var(--g600);font-size:14px;margin-top:2px}
.rec-drawer .rd-x{flex:none;border:1px solid var(--g200);background:#fff;border-radius:10px;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer;color:var(--g700)}
.rec-drawer dl{margin:0;display:grid;gap:10px}
.rec-drawer dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:10px;background:var(--g50)}
.rec-drawer dt{color:var(--g600)}
.rec-drawer dd{margin:0;font-weight:600;color:var(--g900);text-align:right}
.rec-drawer .rd-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.rec-drawer .rd-acts .btn-r{cursor:pointer}
.rec-drawer .rd-note{margin:0;font-size:12px;color:var(--g500)}
/* landing page stage 2: lighter boxes so they sit with stages 1, 3, 4 and 5 (placement, size, angle and order unchanged) */
#heroFlow .box3d{--r:calc(var(--u)*14);box-shadow:inset 0 calc(var(--u)*1) 0 var(--edge),calc(var(--u)*1.2) calc(var(--u)*-1) 0 var(--side),calc(var(--u)*2.4) calc(var(--u)*-2) 0 var(--side),calc(var(--u)*3.6) calc(var(--u)*-3) 0 var(--side2),0 calc(var(--u)*8) calc(var(--u)*18) var(--drop,rgba(16,24,40,.07))}
#heroFlow .box3d:not(.lap):not(.alive):not(.blink):not(.raised):not(:hover)::before{padding:calc(var(--u)*1.5)}
#heroFlow .box3d:not(.lap):not(.alive):not(.blink):not(.glow)::after{inset:calc(var(--u)*-3);filter:blur(calc(var(--u)*9))}
#heroFlow .box3d.connect:not(.raised),#heroFlow .box3d.structure:not(.raised){--face:linear-gradient(160deg,#fbfbfd,#f3f4f7);--side:#eceef2;--side2:#dfe2e8}
#heroFlow .box3d.connect:not(.raised):not(.blink):not(:focus-visible),#heroFlow .box3d.structure:not(.raised):not(.blink):not(:focus-visible){outline:1px solid #e3e5ea}
#heroFlow .box3d.zuuz{--face:linear-gradient(155deg,#5a52ff 0%,#4346f6 55%,#3a55ff 100%);--side:#6f78ff;--side2:#6069f7;--drop:rgba(0,24,255,.12)}
/* <zf-css> v85: footer from Figma node 55438:35770, ZUUZ-branded */
footer#footer.zf{background:#000;color:#fff;padding:0;overflow:hidden}
footer#footer.zf::before{display:none}
.zf{--zf-line:#222235;--fw:min(1280px,calc(100vw - 16px));--u:calc(var(--fw) / 1480)}
/* v85c: the frame sits on the homepage content column (1280 wide, same edges as the header bar and sections);
   inside it every size keeps the Figma proportions (1480 wide: 73 + 560 + 73 tall, columns 480/521/480) */
.zf-frame{max-width:1280px;margin:0 auto;border-inline:1px solid var(--zf-line)}
.zf-hatch{height:max(44px,calc(var(--u) * 73));border-bottom:1px solid var(--zf-line);background:repeating-linear-gradient(112deg,transparent 0 7px,rgba(120,126,210,.13) 7px 8px)}
.zf-bottom{display:grid;place-items:center;border-bottom:0;border-top:1px solid var(--zf-line)}
.zf-copy{margin:0;padding:0 16px;background:#000;box-shadow:0 0 0 10px #000;font-size:16px;line-height:20px;letter-spacing:.01em;color:#fff;text-align:center}
.zf-copy .zf-pref{color:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;opacity:.85}.zf-copy .zf-pref:hover,.zf-copy .zf-pref:focus-visible{opacity:1}
.zf-main{display:grid;grid-template-columns:minmax(0,480fr) minmax(0,521fr) minmax(0,480fr);min-height:max(420px,calc(var(--u) * 560))}
.zf-col{position:relative;padding:calc(var(--u) * 60) calc(var(--u) * 90) calc(var(--u) * 60 + 70px)}
.zf-col + .zf-col{border-left:1px solid var(--zf-line)}
.zf-links{display:grid;grid-template-columns:minmax(0,211fr) minmax(0,89fr);gap:32px 0}
.zf-right .zf-links{grid-template-columns:minmax(0,170fr) minmax(0,130fr)}
.zf-group{min-width:0}
.zf-h{margin:0 0 20px;font-family:inherit;font-size:16px;line-height:20px;font-weight:500;letter-spacing:0;color:#fff}
.zf-group ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.zf-group a{font-size:16px;line-height:20px;color:#babac4;white-space:nowrap;text-decoration:none;transition:color .2s}
.zf-group a:hover,.zf-group a:focus-visible{color:#fff}
.zf-tag{position:absolute;left:0;right:0;bottom:calc(var(--u) * 48);margin:0;text-align:center;font-size:16px;line-height:20px;color:#5f5f72}
.zf-social{position:absolute;left:0;right:0;bottom:calc(var(--u) * 48 - 2px);display:flex;justify-content:center;gap:calc(var(--u) * 32);list-style:none;margin:0;padding:0}
.zf-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;color:#8e8ea3;transition:color .2s,background-color .2s,transform .2s}
.zf-social a:hover,.zf-social a:focus-visible{color:#fff;background:rgba(95,110,255,.14);transform:translateY(-2px)}
.zf-social svg{width:26px;height:26px}
.zf-center{display:grid;place-items:center;padding:24px;isolation:isolate}
.zf-halo{position:absolute;inset:0;z-index:-1;background:radial-gradient(closest-side,rgba(38,40,170,.34),rgba(20,20,90,.12) 55%,transparent)}
.zf-stack{width:min(100%,calc(var(--u) * 321));height:auto;overflow:visible}
.zf-top{fill:url(#zfTop);stroke:rgba(150,160,255,.45);stroke-width:1}
.zf-side{fill:url(#zfSide);stroke:rgba(150,160,255,.32);stroke-width:1}
.zf-rim{fill:none;stroke:rgba(150,160,255,.55);stroke-width:1}
.zf-glow{fill:none;stroke:#4338ff;stroke-width:7;filter:url(#zfBlur);opacity:.45}
.zf-blk.s2 .zf-glow,.zf-blk.s1 .zf-glow{opacity:.4}
.zf-hi,.zf-mid,.zf-lo{transform-box:fill-box}
/* v91: the charge pumps up the stack — bottom slab, middle slab, then the logo block */
@media (prefers-reduced-motion:no-preference){
  .zf-lo .zf-glow{animation:zfPump 2.6s ease-in-out infinite}
  .zf-mid .zf-glow{animation:zfPump 2.6s ease-in-out infinite .3s}
  .zf-hi .zf-glow{animation:zfPumpTop 2.6s ease-in-out infinite .6s}
  .zf-lo{animation:zfLift 2.6s ease-in-out infinite}
  .zf-mid{animation:zfLift 2.6s ease-in-out infinite .3s}
  .zf-hi{animation:zfLift 2.6s ease-in-out infinite .6s}
  .zf-hi .zf-top{animation:zfFace 2.6s ease-in-out infinite .6s}
}
@keyframes zfPump{0%,100%{opacity:.26;stroke-width:5}38%{opacity:1;stroke-width:11}70%{opacity:.4;stroke-width:6}}
@keyframes zfPumpTop{0%,100%{opacity:.3;stroke-width:5}38%{opacity:1;stroke-width:13}70%{opacity:.45;stroke-width:7}}
@keyframes zfLift{0%,100%{transform:translateY(0)}38%{transform:translateY(-5px)}70%{transform:translateY(-1px)}}
@keyframes zfFace{0%,100%{filter:brightness(1)}38%{filter:brightness(1.55)}70%{filter:brightness(1.1)}}
.zf a:focus-visible{outline:2px solid #8f9dff;outline-offset:3px;border-radius:4px}
@media (max-width:1100px){
  .zf-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .zf-main{min-height:0}
  .zf-col{padding:48px 48px 110px}
  .zf-tag{bottom:44px}
  .zf-social{bottom:40px;gap:28px}
  .zf-links,.zf-right .zf-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .zf-center{grid-column:1 / -1;grid-row:1;min-height:400px;border-bottom:1px solid var(--zf-line)}
  .zf-stack{width:280px}
  .zf-col + .zf-col{border-left:0}
  .zf-right{border-left:1px solid var(--zf-line)!important}
}
@media (max-width:640px){
  .zf-main{grid-template-columns:minmax(0,1fr);min-height:0}
  .zf-center{min-height:320px}
  .zf-right{border-left:0!important;border-top:1px solid var(--zf-line)}
  .zf-col{padding:40px 24px 96px}
  .zf-center{min-height:340px}
  .zf-center{padding:24px}
  .zf-stack{width:230px}
  .zf-hatch{height:48px}
  .zf-bottom{height:64px}
  .zf-copy{font-size:13px}
  .zf-group a,.zf-h,.zf-tag{font-size:15px}
}
/* </zf-css> */
/* <lc-css> */
/* ============ Module page: Lead Capture (v74) ============ */
main[hidden]{display:none!important}
.lc{--lc-card:var(--g100);overflow-x:clip}
.lc svg{flex:none}
.lc-sec{padding-top:var(--sec-y)}
.lc-center{text-align:center}
/* Superseded by the html.js-rv block at the end of this file: this rule
   hid content before any script had run, so a JS failure left a blank page.
   Kept as a no-op anchor for the .in rule below it. */
.lc-rv{}
.lc-rv.in{opacity:1;transform:none}
.lc-av{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font:600 10px/1 var(--sans);font-style:normal;letter-spacing:.02em}

/* hero */
.lc-hero{position:relative;padding:clamp(56px,7vw,96px) 0 0}
.lc-hero::before{content:"";position:absolute;inset:-120px 0 auto;height:720px;z-index:-1;background:radial-gradient(520px 320px at 78% 42%,rgba(0,24,255,.09),transparent 70%),radial-gradient(420px 260px at 12% 20%,rgba(107,92,255,.06),transparent 70%)}
.lc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.lc-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px;font-size:13px;color:var(--g500)}
.lc-crumb a{color:var(--g600);transition:color .15s}
.lc-crumb a:hover{color:var(--brand)}
.lc-crumb b{font-weight:500;color:var(--g900)}
.lc-h1{margin-top:16px;font-family:var(--display);font-weight:600;font-size:clamp(34px,3.7vw,54px);line-height:1.1;letter-spacing:-.022em;color:var(--g900)}
.lc-h1 span{display:block;background:linear-gradient(90deg,#0018ff,#5a52ff 60%,#3a55ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lc-lede{margin-top:20px;max-width:34em;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--g600)}
.lc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lc-actions .btn{height:46px;font-size:16px}
.lc-trust{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;margin:26px 0 0;padding:0;font-size:13.5px;color:var(--g700)}
.lc-trust li{display:flex;align-items:center;gap:7px}
.lc-trust svg,.lc-why svg,.lc-merge svg,.lc-check svg,.lc-orbit-badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lc-trust svg{color:var(--brand)}

/* hero scene: a 600x380 stage, scaled to fit and tilted in 3D */
.lc-scene{--k:1;position:relative;height:calc(380px * var(--k));perspective:1400px}
.lc-stage{--px:0deg;--py:0deg;position:absolute;left:50%;top:50%;width:600px;height:380px;margin:-190px 0 0 -300px;transform-style:preserve-3d;transform:scale(var(--k)) rotateX(calc(12deg + var(--py))) rotateY(calc(-14deg + var(--px)));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lc-floor{position:absolute;inset:-10px -30px -20px;border-radius:28px;transform:translateZ(-30px);background:radial-gradient(circle,rgba(0,24,255,.16) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(160deg,#f7f8ff,#eef0fb);border:1px solid #e4e6f5;box-shadow:0 60px 80px -50px rgba(13,44,115,.45)}
.lc-pane{position:absolute;padding:12px;background:rgba(255,255,255,.96);border:1px solid var(--g200);border-radius:16px;box-shadow:0 22px 40px -22px rgba(13,44,115,.35),0 2px 6px rgba(16,24,40,.05)}
.lc-cap{display:flex;align-items:center;gap:7px;margin:2px 4px 10px;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.lc-cap i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(0,24,255,.12)}
.lc-cap .lc-status{margin-left:auto;font-style:normal;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--brand)}
.lc-inbox{left:0;top:30px;width:234px;transform:translateZ(30px)}
.lc-mail{display:flex;align-items:center;gap:9px;height:44px;padding:0 9px;border:1px solid transparent;border-radius:11px;transition:background-color .35s,border-color .35s,box-shadow .35s,transform .35s}
.lc-mail + .lc-mail{margin-top:6px}
.lc-mail > div{min-width:0;flex:1}
.lc-mail b{display:block;font-size:12px;font-weight:600;color:var(--g900)}
.lc-mail span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10.5px;color:var(--g500)}
.lc-mail em{font-style:normal;font-size:9.5px;font-weight:600;padding:3px 6px;border-radius:999px;color:var(--brand);background:rgba(0,24,255,.07);opacity:0;transition:opacity .3s}
.lc-mail.on{background:#f3f4ff;border-color:#c9ceff;box-shadow:0 10px 20px -12px rgba(0,24,255,.45);transform:translateX(6px) translateZ(12px)}
.lc-mail.on em{opacity:1}
.lc-noise{opacity:.55}
.lc-noise em{opacity:1;color:var(--g600);background:var(--g100)}
.lc-wires{position:absolute;inset:0;width:600px;height:380px;overflow:visible;transform:translateZ(20px);pointer-events:none}
.lc-wire{fill:none;stroke:#aeb6ff;stroke-width:2;stroke-dasharray:4 5;animation:lcDash 1.2s linear infinite}
.lc-dot{fill:var(--brand);opacity:0;filter:drop-shadow(0 0 5px rgba(0,24,255,.8))}
@keyframes lcDash{to{stroke-dashoffset:-18}}
.lc-record{left:370px;top:30px;width:230px;transform:translateZ(60px)}
.lc-record dl{margin:0}
.lc-record dl > div{display:flex;justify-content:space-between;align-items:center;gap:10px;height:32px;padding:0 6px;border-top:1px solid var(--g100)}
.lc-record dt{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.lc-record dd{position:relative;margin:0;min-width:56px;height:14px;text-align:right;font-size:12px;font-weight:600;line-height:14px;color:var(--g900);white-space:nowrap}
.lc-record dd:empty::after{content:"";position:absolute;right:0;top:3px;width:64px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--g100),var(--g200),var(--g100));background-size:200% 100%;animation:lcShimmer 1.2s linear infinite}
.lc-record dd.on{animation:lcIn .35s ease-out}
.lc-record.done{border-color:#c9ceff}
@keyframes lcShimmer{to{background-position:-200% 0}}
@keyframes lcIn{from{opacity:0;transform:translateY(4px)}}
.lc-approve{position:absolute;left:370px;top:262px;width:230px;height:42px;display:flex;align-items:center;gap:9px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--g200);font-size:12.5px;font-weight:600;color:var(--g600);transform:translateZ(90px);box-shadow:0 18px 30px -18px rgba(13,44,115,.4);transition:background-color .35s,border-color .35s,color .35s}
.lc-approve b{margin-left:auto;font-weight:600;color:var(--g400)}
.lc-check{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--g100);color:transparent;transition:background-color .35s,color .35s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.lc-approve.ok{background:#eaf8ef;border-color:#b7e4c7;color:#166534}
.lc-approve.ok b{color:#166534}
.lc-approve.ok .lc-check{background:#22a55a;color:#fff;transform:scale(1.12)}
.lc-hitl{position:absolute;left:4px;top:300px;margin:0;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g500);transform:translateZ(10px)}

/* ZUUZ cube (hero + CRM orbit) */
.lc-cube-wrap{--cs:68px;position:absolute;left:267px;top:141px;width:var(--cs);height:var(--cs);transform-style:preserve-3d;transform:translateZ(50px)}
.lc-cube-wrap::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(58,85,255,.45),transparent 65%);filter:blur(6px);opacity:.55;transition:opacity .3s,transform .3s}
.lc-cube-wrap.hit::before{opacity:1;transform:scale(1.25)}
.lc-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:lcSpin 12s linear infinite}
.lc-cube i{position:absolute;inset:0;display:grid;place-items:center;border-radius:calc(var(--cs) * .16);background:linear-gradient(155deg,#5a52ff 0%,#4346f6 55%,#3a55ff 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -10px 18px rgba(0,10,120,.25);backface-visibility:hidden}
.lc-cube img{width:66%;height:auto;filter:brightness(0) invert(1)}
.lc-cube .f1{transform:translateZ(calc(var(--cs) / 2))}
.lc-cube .f2{transform:rotateY(90deg) translateZ(calc(var(--cs) / 2))}
.lc-cube .f3{transform:rotateY(180deg) translateZ(calc(var(--cs) / 2))}
.lc-cube .f4{transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2))}
.lc-cube .f5{transform:rotateX(90deg) translateZ(calc(var(--cs) / 2));background:linear-gradient(135deg,#8c93ff,#5a62ff)}
.lc-cube .f6{transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2));background:#2a33c8}
.lc-cube-wrap.hit .lc-cube i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 24px rgba(90,98,255,.8)}
.lc-cube-shadow{position:absolute;left:10%;right:10%;bottom:-38%;height:18%;border-radius:50%;background:rgba(13,44,115,.28);filter:blur(6px);animation:lcShadow 3s ease-in-out infinite}
@keyframes lcSpin{from{transform:translateY(0) rotateX(-18deg) rotateY(0)}25%{transform:translateY(-5px) rotateX(-18deg) rotateY(90deg)}50%{transform:translateY(0) rotateX(-18deg) rotateY(180deg)}75%{transform:translateY(-5px) rotateX(-18deg) rotateY(270deg)}to{transform:translateY(0) rotateX(-18deg) rotateY(360deg)}}
@keyframes lcShadow{50%{transform:scale(.85);opacity:.7}}

/* proof */
.lc-stats > div{display:flex;flex-direction:column}
.lc-stats p{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--g600);max-width:30ch}

/* cards */
.lc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--block-y)}
.lc-card{display:flex;flex-direction:column;padding:12px 12px 26px;background:var(--lc-card);border:1px solid var(--g200);border-radius:24px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.lc-card:hover{transform:translateY(-4px);border-color:#d4d8f5;box-shadow:0 24px 44px -26px rgba(13,44,115,.35)}
.lc-card h3{margin:22px 16px 0;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.01em}
.lc-card > p{margin:8px 16px 0;font-size:15.5px;line-height:1.55;color:var(--g600)}
.lc-viz{position:relative;height:230px;border-radius:16px;overflow:hidden;background:radial-gradient(circle,rgba(0,0,0,.07) 1px,transparent 1.3px) 0 0/14px 14px,#fafafb;border:1px solid var(--g150)}
/* card 1: highlighted email */
.lc-email{position:absolute;left:16px;right:16px;top:16px;padding:12px 14px;background:#fff;border:1px solid var(--g200);border-radius:12px;box-shadow:0 12px 24px -16px rgba(13,44,115,.35);font-size:11.5px;line-height:1.55;color:var(--g700)}
.lc-email p{margin:0}
.lc-email-h{display:flex;gap:6px;align-items:baseline;font-size:10.5px;color:var(--g500)}
.lc-email-h b{font-size:11.5px;color:var(--g900)}
.lc-email-h span{margin-left:auto}
.lc-email-s{margin:4px 0 6px!important;font-weight:600;color:var(--brand)}
.lc-email mark{color:inherit;border-radius:4px;padding:0 2px;background:linear-gradient(rgba(0,24,255,.14),rgba(0,24,255,.14)) no-repeat 0 0/0% 100%;animation:lcMark 7s ease infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes lcMark{0%,8%{background-size:0% 100%}16%,82%{background-size:100% 100%}92%,100%{background-size:0% 100%}}
.lc-sig{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px}
.lc-sig span{display:inline-flex;gap:5px;align-items:center;padding:4px 8px;border-radius:7px;background:#fff;border:1px solid #c9ceff;font-size:10.5px;font-weight:600;color:var(--g800);animation:lcPop 7s ease infinite;animation-delay:calc(var(--i) * .7s + .5s)}
.lc-sig em{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.lc-sig .hot{background:#fff5ec;border-color:#5a52ff}
.lc-sig .hot em{color:#5a52ff}
@keyframes lcPop{0%,6%{opacity:0;transform:translateY(6px) scale(.96)}14%,84%{opacity:1;transform:none}94%,100%{opacity:0}}
/* card 2: thread -> record */
.lc-thread{position:absolute;left:16px;top:50%;width:70px;margin-top:-44px;display:grid;gap:8px}
.lc-thread i{height:24px;border-radius:8px 8px 8px 2px;background:#fff;border:1px solid var(--g200);box-shadow:0 6px 12px -8px rgba(13,44,115,.3);animation:lcBubble 6s ease infinite}
.lc-thread i:nth-child(2){margin-left:14px;border-radius:8px 8px 2px 8px;background:#eef0ff;border-color:#d6daff;animation-delay:.25s}
.lc-thread i:nth-child(3){width:70%;animation-delay:.5s}
@keyframes lcBubble{0%,4%{opacity:0;transform:translateY(8px)}12%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.lc-arrow{position:absolute;left:94px;top:50%;width:34px;height:12px;margin-top:-6px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:lcNudge 1.6s ease-in-out infinite}
@keyframes lcNudge{50%{transform:translateX(4px)}}
.lc-form{position:absolute;right:14px;top:18px;bottom:18px;left:136px;padding:10px 12px;background:#fff;border:1px solid var(--g200);border-radius:12px;box-shadow:0 14px 26px -16px rgba(13,44,115,.35)}
.lc-form > p{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:11.5px}
.lc-form > p em{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.1em;padding:2px 6px;border-radius:5px;background:var(--brand);color:#fff}
.lc-form > div{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-top:1px solid var(--g100)}
.lc-form span{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.lc-form strong{position:relative;display:block;height:15px;font-size:11.5px;font-weight:600;line-height:15px;color:var(--g900);clip-path:inset(0 100% 0 0);animation:lcType 6s steps(14,end) infinite;animation-delay:calc(var(--i) * .45s + .9s)}
.lc-form strong.sig{color:var(--brand)}
@keyframes lcType{0%{clip-path:inset(0 100% 0 0)}14%,86%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 100% 0 0)}}
/* card 3: account match */
.lc-node{position:absolute;display:flex;flex-direction:column;gap:2px;padding:8px 11px;background:#fff;border:1px solid var(--g200);border-radius:11px;box-shadow:0 10px 20px -14px rgba(13,44,115,.35);font-size:11.5px}
.lc-node em{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.lc-node b{font-weight:600;color:var(--g900)}
.lc-new{left:14px;top:18px;animation:lcSlideA 6s ease infinite}
.lc-acct{right:14px;top:96px;border-color:#c9ceff;animation:lcSlideB 6s ease infinite}
.lc-acct em{color:var(--brand)}
@keyframes lcSlideA{0%,6%{opacity:0;transform:translateX(-14px)}14%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes lcSlideB{0%,10%{opacity:0;transform:translateX(14px)}18%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.lc-link{position:absolute;left:50%;top:14px;width:220px;height:120px;margin-left:-110px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-dasharray:190;stroke-dashoffset:190;animation:lcDraw 6s ease infinite}
@keyframes lcDraw{0%,20%{stroke-dashoffset:190}36%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:190;opacity:0}}
.lc-merge{position:absolute;left:14px;bottom:52px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#eaf8ef;border:1px solid #b7e4c7;font-size:11px;font-weight:600;color:#166534;animation:lcPop 6s ease infinite;animation-delay:2.1s}
.lc-owner{position:absolute;left:14px;bottom:16px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--g800);animation:lcPop 6s ease infinite;animation-delay:2.6s}
.lc-owner .lc-av{width:22px;height:22px;font-size:9px}

/* flow (dark band, same palette as the engine section) */
.lc-flow{position:relative;margin-top:var(--sec-y);padding:var(--sec-y) 0;overflow:hidden;color:#e7e8ff;background:radial-gradient(900px 420px at 20% 0%,rgba(0,24,255,.30),transparent 70%),radial-gradient(700px 400px at 90% 100%,rgba(0,20,214,.18),transparent 70%),linear-gradient(#0b0a22,#07061a)}
.lc-flow::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(143,157,255,.06) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(143,157,255,.06) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);pointer-events:none}
.lc-flow .inner{position:relative}
.lc-flow-h{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(29px,3.4vw,46px);line-height:1.14;letter-spacing:-.016em;color:#fff}
.lc-flow-h span{color:#8f9dff}
.lc-steps-wrap{position:relative;margin-top:var(--block-y)}
.lc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.lc-rail{position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:92px;height:2px;background:linear-gradient(90deg,rgba(143,157,255,.15),rgba(143,157,255,.45),rgba(143,157,255,.15))}
.lc-rail i{--p:0;position:absolute;top:50%;left:calc(var(--p) * 50%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(90,98,255,.45),0 0 22px 6px rgba(90,98,255,.7);transition:left 1s cubic-bezier(.6,0,.3,1)}
.lc-step{position:relative;padding:0 26px 30px;background:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(143,157,255,.16);border-radius:22px;transition:border-color .5s,background-color .5s,box-shadow .5s}
.lc-step.on{border-color:rgba(143,157,255,.5);box-shadow:0 30px 60px -30px rgba(0,24,255,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.lc-iso{position:relative;height:184px;perspective:900px;display:grid;place-items:center}
.lc-plat{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-40px 0 0 -60px;border-radius:18px;transform:rotateX(60deg) rotateZ(45deg);background:linear-gradient(135deg,#2a2f8f,#141653);box-shadow:1px 1px 0 #1b1f6b,2px 2px 0 #1b1f6b,3px 3px 0 #171a5c,4px 4px 0 #171a5c,5px 5px 0 #13164f,6px 6px 0 #13164f,7px 7px 0 #101244,8px 8px 0 #101244,0 0 0 1px rgba(143,157,255,.3),20px 20px 40px rgba(0,0,0,.5);transition:background .5s,box-shadow .5s}
.lc-plat::after{content:"";position:absolute;inset:14px;border-radius:10px;border:1px dashed rgba(143,157,255,.35)}
.lc-step.on .lc-plat{background:linear-gradient(135deg,#4d57ff,#1f2bd6);box-shadow:1px 1px 0 #1c25b8,2px 2px 0 #1c25b8,3px 3px 0 #1820a3,4px 4px 0 #1820a3,5px 5px 0 #141b8e,6px 6px 0 #141b8e,7px 7px 0 #10167a,8px 8px 0 #10167a,0 0 0 1px rgba(200,206,255,.6),0 0 60px rgba(58,85,255,.8)}
.lc-obj{position:relative;margin-top:-30px;animation:lcBob 3.2s ease-in-out infinite;filter:drop-shadow(0 16px 14px rgba(0,0,0,.45));transition:transform .4s}
.lc-step:nth-child(2) .lc-obj{animation-delay:-1s}
.lc-step:nth-child(3) .lc-obj{animation-delay:-2s}
.lc-step.on .lc-obj{transform:translateY(-8px) scale(1.06)}
@keyframes lcBob{50%{translate:0 -8px}}
.lc-env{width:84px;height:56px;border-radius:8px;background:linear-gradient(160deg,#fff,#dfe3ff);overflow:hidden}
.lc-env .flap{position:absolute;inset:0;background:linear-gradient(160deg,#eef0ff,#c9ceff);clip-path:polygon(0 0,100% 0,50% 58%)}
.lc-env .ln{position:absolute;left:14px;bottom:12px;width:44px;height:4px;border-radius:2px;background:#8f9dff}
.lc-env .ln.s{bottom:21px;width:30px;background:#c9ceff}
.lc-step.on .lc-env .flap{animation:lcFlap 2.2s ease}
@keyframes lcFlap{30%{clip-path:polygon(0 0,100% 0,50% 8%)}}
.lc-docs{width:96px;height:78px}
.lc-docs > i{position:absolute;left:18px;top:0;width:54px;height:70px;border-radius:6px;background:linear-gradient(160deg,#fff,#e4e7ff);box-shadow:0 0 0 1px rgba(0,0,0,.05);transform-origin:50% 100%;transition:transform .5s}
.lc-docs > i:nth-child(1){transform:rotate(-12deg) translateX(-8px)}
.lc-docs > i:nth-child(3){transform:rotate(12deg) translateX(8px)}
.lc-step.on .lc-docs > i:nth-child(1){transform:rotate(-20deg) translateX(-14px)}
.lc-step.on .lc-docs > i:nth-child(3){transform:rotate(20deg) translateX(14px)}
.lc-docs b{position:absolute;left:6px;top:7px;font-size:8px;font-weight:700;letter-spacing:.06em;color:#3a55ff}
.lc-docs > i::after{content:"";position:absolute;left:6px;right:10px;top:22px;height:22px;background:repeating-linear-gradient(#c9ceff 0 3px,transparent 3px 8px)}
.lc-docs .li{position:absolute;left:36px;top:30px;width:26px;height:5px;border-radius:3px;background:#5f74ff;box-shadow:0 0 10px rgba(95,116,255,.9);opacity:0}
.lc-step.on .lc-docs .li{animation:lcLift 2.2s ease-out infinite}
.lc-docs .li:nth-of-type(2){animation-delay:.35s!important}
.lc-docs .li:nth-of-type(3){animation-delay:.7s!important}
@keyframes lcLift{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-46px)}}
.lc-seal{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7d86ff,#2f3de8 70%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 6px rgba(90,98,255,.18)}
.lc-seal svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
.lc-step.on .lc-seal svg{animation:lcTick 2.2s ease}
.lc-step.on .lc-seal{box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 6px rgba(90,98,255,.25),0 0 0 14px rgba(90,98,255,.1)}
@keyframes lcTick{0%{stroke-dashoffset:24}40%,100%{stroke-dashoffset:0}}
.lc-n{justify-self:start;display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.1em;color:#8f9dff;padding:5px 9px;border:1px solid rgba(143,157,255,.3);border-radius:999px}
.lc-step h3{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,22px);color:#fff}
.lc-step p{margin-top:8px;font-size:15px;line-height:1.6;color:#b9bbe0}
.lc-step p a{color:#fff;text-decoration:underline;text-decoration-color:#5f74ff;text-underline-offset:3px}
.lc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.lc-tags i{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font:500 11.5px/1.4 var(--sans);font-style:normal;color:#cfd2ff;background:rgba(0,24,255,.16);border:1px solid rgba(143,157,255,.25)}
.lc-tags svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}

/* signals */
.lc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.lc-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:30px 0 0;padding:0}
.lc-chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:999px;background:#fff;border:1px solid var(--g200);font-size:14px;font-weight:500;color:var(--g800);box-shadow:0 1px 2px rgba(16,24,40,.04);animation:lcChip 7.2s ease infinite;animation-delay:calc(var(--i) * 1.2s)}
.lc-chips svg{width:17px;height:17px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes lcChip{0%,16%,100%{background:#fff;border-color:var(--g200);box-shadow:0 1px 2px rgba(16,24,40,.04)}4%,12%{background:#f3f4ff;border-color:#aeb6ff;box-shadow:0 8px 18px -10px rgba(0,24,255,.45)}}
.lc-why{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lc-why li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:var(--g50);border:1px solid var(--g150);transition:border-color .25s,background-color .25s,transform .25s}
.lc-why li:hover{background:#fff;border-color:#c9ceff;transform:translateX(4px)}
.lc-tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;box-shadow:0 4px 10px -4px rgba(0,24,255,.6)}
.lc-why p{margin:2px 0 0;font-size:15.5px;line-height:1.55;color:var(--g600)}
.lc-why b{font-weight:600;color:var(--g900)}

/* CRM */
.lc-crm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:28px;background:linear-gradient(160deg,#f7f8ff,#f2f2f4);border:1px solid var(--g200)}
.lc-p{margin-top:18px;max-width:40ch;font-size:16.5px;line-height:1.6;color:var(--g600)}
.lc-p a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.lc-crm-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:24px 0 0;padding:0}
.lc-crm-list li{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:10px;background:#fff;border:1px solid var(--g200);font-size:14px;font-weight:500;color:var(--g800)}
.lc-crm-list i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.lc-orbit{position:relative;height:420px;perspective:1100px}
.lc-orbit-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(60deg)}
.lc-ring{position:absolute;left:50%;top:50%;width:370px;height:370px;margin:-185px 0 0 -185px;border-radius:50%;border:1.5px dashed #aeb6ff;background:radial-gradient(circle,rgba(0,24,255,.08),transparent 70%)}
.lc-ring.r2{width:200px;height:200px;margin:-100px 0 0 -100px;border-style:solid;border-color:rgba(0,24,255,.18);animation:lcPulseRing 3s ease-out infinite}
@keyframes lcPulseRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.lc-spin{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:lcOrbit 28s linear infinite}
@keyframes lcOrbit{to{transform:rotateZ(360deg)}}
.lc-spoke{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateZ(var(--a))}
.lc-sat{position:absolute;left:0;top:0;width:118px;height:46px;margin:-23px 0 0 -59px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:12px;background:#fff;border:1px solid var(--g200);box-shadow:0 14px 24px -14px rgba(13,44,115,.45);animation:lcFace 28s linear infinite}
@keyframes lcFace{from{transform:translateX(185px) rotateZ(calc(-1 * var(--a))) rotateX(-60deg)}to{transform:translateX(185px) rotateZ(calc(-1 * var(--a) - 360deg)) rotateX(-60deg)}}
.lc-sat b{display:grid;place-items:center;min-width:30px;height:26px;padding:0 5px;border-radius:7px;background:var(--c);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em}
.lc-sat span{font-size:11.5px;font-weight:600;color:var(--g800);white-space:nowrap}
.lc-pkt{position:absolute;left:0;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px 2px rgba(0,24,255,.6);animation:lcPkt 2.4s ease-in infinite}
.lc-spoke:nth-child(2) .lc-pkt{animation-delay:.6s}
.lc-spoke:nth-child(3) .lc-pkt{animation-delay:1.2s}
.lc-spoke:nth-child(4) .lc-pkt{animation-delay:1.8s}
@keyframes lcPkt{0%{transform:translateX(40px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(165px);opacity:0}}
.lc-core{--cs:88px;z-index:2;left:50%;top:50%;margin:calc(var(--cs) / -2 - 14px) 0 0 calc(var(--cs) / -2);transform:none}
.lc-orbit-badge{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--g200);box-shadow:0 8px 20px -12px rgba(13,44,115,.35);font-size:12.5px;font-weight:600;color:var(--g800);white-space:nowrap}
.lc-orbit-badge svg{color:#22a55a}

/* more modules */
.lc-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lc-more a{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:16px;background:var(--g50);border:1px solid var(--g200);transition:transform .25s,border-color .25s,background-color .25s,box-shadow .25s}
.lc-more span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.lc-more b{font-size:17px;font-weight:600;color:var(--g900)}
.lc-more em{position:absolute;right:20px;bottom:20px;font-style:normal;color:var(--brand);transition:transform .25s}
.lc-more a:hover{background:#fff;border-color:#c9ceff;transform:translateY(-3px);box-shadow:0 18px 30px -20px rgba(13,44,115,.35)}
.lc-more a:hover em{transform:translateX(4px)}

/* CTA */
.lc-cta{padding-bottom:var(--sec-y)}
.lc-cta .cta h2{max-width:22ch;margin-inline:auto}
.lc-cta .cta h2 span{display:block;color:var(--g900)}

/* responsive */
@media (max-width:1100px){.lc-more{grid-template-columns:repeat(2,minmax(0,1fr))}.lc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lc-cards .lc-card:last-child{grid-column:1 / -1}}
@media (max-width:900px){
  .lc-hero-grid,.lc-split,.lc-crm{grid-template-columns:minmax(0,1fr)}
  .lc-scene{margin-top:12px}
  .lc-steps{grid-template-columns:minmax(0,1fr);gap:16px}
  .lc-rail{display:none}
  .lc-step{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:18px;padding:20px 22px;align-items:start}
  .lc-iso{grid-row:1 / span 4;height:150px;transform:scale(.8)}
  .lc-orbit{height:380px}
}
@media (max-width:640px){
  .lc-cards{grid-template-columns:minmax(0,1fr)}
  .lc-cards .lc-card:last-child{grid-column:auto}
  .lc-stats{grid-template-columns:minmax(0,1fr)!important}
  .lc-stats > div{border-right:0!important;border-bottom:1px solid var(--g200)}
  .lc-stats > div:last-child{border-bottom:0}
  .lc-more{grid-template-columns:minmax(0,1fr)}
  .lc-step{grid-template-columns:minmax(0,1fr);padding:0 20px 24px}
  .lc-iso{grid-row:auto;height:170px;transform:none}
  .lc-orbit{height:300px}
  .lc-orbit-3d{transform:scale(.62) rotateX(60deg)}
  .lc-core{--cs:62px}
  /* phone: the hero scene becomes a simple vertical stack */
  .lc-scene{height:auto;perspective:none}
  .lc-stage{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px;transform:none!important;transform-style:flat}
  .lc-floor{inset:0;transform:none;border-radius:22px}
  .lc-pane,.lc-approve,.lc-hitl{position:relative;left:auto;top:auto;width:auto;transform:none}
  .lc-mail.on{transform:none}
  .lc-wires{display:none}
  .lc-stage .lc-cube-wrap{position:relative;left:auto;top:auto;transform:none;align-self:center;--cs:58px;margin:14px 0 22px}
  .lc-hitl{order:5;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .lc *,.lc *::before,.lc *::after{animation:none!important;transition:none!important}
  .lc-rv{opacity:1;transform:none}
  .lc-form strong{clip-path:none}
  .lc-link{stroke-dashoffset:0}
}
/* </lc-css> */
/* <mx-css> */
/* ============ Module pages (v75): shared with the Lead Capture design ============ */
.lc-lede-long{font-size:clamp(15px,1.15vw,16.5px)}
.lc-center-eb{justify-content:center;margin-bottom:14px}
.mx .lc-card > p{font-size:15px}
.mx-link{padding:0;border:0;background:none;font:inherit;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mx-note{margin-top:18px;font-size:14.5px}
.mx-note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* hero: ask pane */
.mx-ask .mx-wave{display:flex;align-items:center;gap:3px;height:34px;margin:0 6px 8px;padding:0 10px;border-radius:10px;background:linear-gradient(90deg,#f3f4ff,#eef0ff)}
.mx-wave i{flex:1;height:30%;border-radius:2px;background:linear-gradient(#5a52ff,#0018ff);animation:mxWave 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}
@keyframes mxWave{0%,100%{height:18%}50%{height:88%}}
.mx-q{height:auto;min-height:44px;padding:6px 9px}
.mx-q b{white-space:normal;font-size:11.5px;line-height:1.35}
.mx-mic{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--g100);color:var(--g600)}
.mx-mic svg{width:13px;height:13px}
.mx-q.on .mx-mic{background:var(--brand);color:#fff}

/* hero: result panes */
.mx-pane{min-height:180px}
.mx-pane .lc-cap{margin-bottom:8px}
.mx-pane [data-t]{transition:opacity .3s}
.mx-pane [data-t].on{animation:lcIn .35s ease-out}
.w-top{display:flex;align-items:center;gap:12px;padding:2px 4px 8px;border-bottom:1px solid var(--g100)}
.w-ring{--p:0;position:relative;flex:none;width:58px;height:58px}
.w-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.w-ring circle{fill:none;stroke-width:6}
.w-ring .bg{stroke:var(--g100)}
.w-ring .fg{stroke:url(#none);stroke:var(--brand);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:calc(163.4 * (1 - var(--p) / 100));transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1),stroke .3s}
.w-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--g900);font-variant-numeric:tabular-nums}
.w-ring[data-s="warn"] .fg{stroke:#0018ff}
.w-ring[data-s="bad"] .fg{stroke:#e5484d}
.w-ring[data-s="good"] .fg{stroke:#22a55a}
.w-rank{display:flex;flex-direction:column;gap:3px;min-width:0}
.w-rank span{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.w-rank strong{min-height:16px;font-size:12.5px;font-weight:700;color:var(--g900)}
.w-rank strong[data-s="warn"]{color:#0011b3}
.w-rank strong[data-s="bad"]{color:#c02b30}
.w-rank strong[data-s="good"]{color:#15803d}
.w-rank em{min-height:14px;font-style:normal;font-size:10.5px;color:var(--g600)}
.w-bars{display:grid;gap:5px;padding:8px 4px 4px}
.w-bar{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:8px}
.w-bar span{font-size:9.5px;font-weight:600;color:var(--g600);white-space:nowrap}
.w-bar i,.w-risk i{display:block;height:6px;border-radius:3px;background:var(--g100);overflow:hidden}
.w-bar em,.w-risk em{display:block;width:0;height:100%;border-radius:3px;background:linear-gradient(90deg,#5a52ff,#0018ff);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.w-why{display:flex;align-items:center;gap:6px;min-height:16px;margin:6px 4px 0;font-size:10.5px;font-weight:600;color:var(--brand)}
.w-why svg{width:13px;height:13px;flex:none}
.w-why span{min-width:0}
.lc-record dd.w-new.on::before{content:"+";display:inline-grid;place-items:center;width:13px;height:13px;margin-right:5px;border-radius:50%;background:#e8ebff;color:var(--brand);font-size:10px;line-height:1;vertical-align:1px}
.w-diff{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.w-diff s{font-weight:500;color:var(--g400)}
.w-diff b{font-weight:700;color:var(--brand)}
.w-diff b.on::before{content:"→ ";color:var(--g400);font-weight:500}
/* calendar */
.w-cal{padding:0 2px}
.w-days,.w-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.w-days span{text-align:center;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);padding-bottom:4px}
.w-grid i{display:grid;place-items:center;height:30px;border-radius:7px;border:1px solid var(--g150);background:#fafbff;font-style:normal;font-size:9.5px;font-weight:600;color:var(--g600);transition:background-color .35s,color .35s,transform .35s,box-shadow .35s}
.w-grid i.busy{background:repeating-linear-gradient(135deg,var(--g100) 0 4px,#fff 4px 8px);border-color:var(--g100)}
.w-grid i.on{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.08);box-shadow:0 8px 16px -8px rgba(0,24,255,.7)}
.w-confirm{display:flex;align-items:center;gap:7px;min-height:30px;margin:10px 2px 0;padding:6px 9px;border-radius:9px;background:#f3f4ff;font-size:11.5px;font-weight:700;color:var(--brand)}
.w-confirm svg{width:15px;height:15px}
/* stages */
.w-deal{min-height:18px;margin:2px 4px 10px;font-size:13px;font-weight:700;color:var(--g900)}
.w-track{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 2px}
.w-track span{position:relative;padding:14px 0 0;font-size:8.5px;font-weight:600;text-align:center;color:var(--g500)}
.w-track span::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:4px;background:var(--g100);transition:background-color .4s}
.w-track span.done::before{background:#aeb6ff}
.w-track span.on{color:var(--brand)}
.w-track span.on::before{background:var(--brand);box-shadow:0 0 0 3px rgba(0,24,255,.14)}
.w-who,.w-flag{display:flex;align-items:center;gap:7px;min-height:28px;margin:10px 2px 0;padding:0 8px;border-radius:9px;font-size:11px;font-weight:600;color:var(--g700);background:var(--g50)}
.w-who svg,.w-flag svg{width:14px;height:14px;flex:none}
.w-flag{opacity:.35}
.w-flag[data-s="warn"]{opacity:1;background:#fff5ec;color:#0011b3}
/* risk */
.w-risks{display:grid;gap:6px}
.w-risk{display:grid;grid-template-columns:minmax(0,1fr) 36px 34px;align-items:center;gap:6px;padding:6px 6px;border-radius:9px;transition:background-color .35s}
.w-risk b{font-size:11px;font-weight:600;color:var(--g800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-risk.on{background:#f5f6ff}
.w-risk span{min-height:16px;text-align:center;font-size:9px;font-weight:700;border-radius:999px;padding:2px 0}
.w-risk span[data-s="High"]{background:#fdecec;color:#c02b30}
.w-risk span[data-s="Med"]{background:#fff5ec;color:#0011b3}
.w-risk span[data-s="Low"]{background:#eaf8ef;color:#15803d}
.w-risk span[data-s="High"] ~ em,.w-risk:has(span[data-s="High"]) em{background:linear-gradient(90deg,#0018ff,#e5484d)}
/* account */
.w-acct{display:flex;align-items:center;gap:9px;padding:0 4px 8px}
.w-acct .lc-av{width:32px;height:32px;border-radius:9px}
.w-acct b{display:block;min-height:16px;font-size:13px;font-weight:700}
.w-acct span{font-size:10px;color:var(--g500)}
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.w-stats div{padding:6px;border-radius:8px;background:var(--g50);border:1px solid var(--g100)}
.w-stats span{display:block;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
.w-stats b{display:block;min-height:16px;font-size:13px;font-weight:700;color:var(--g900)}
.w-stats b[data-s="Med"]{color:#0011b3}
.w-stats b[data-s="Low"]{color:#15803d}
.w-feed{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.w-feed li{position:relative;min-height:22px;padding:4px 6px 4px 16px;border-radius:7px;font-size:10.5px;font-weight:600;color:var(--g700);background:#fafbff}
.w-feed li::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--brand)}
.w-note{margin:6px 4px 0;font-size:9.5px;color:var(--g500)}
/* health */
.w-spark{display:block;width:100%;height:44px;margin-top:6px}
.w-spark path{fill:none;stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke;transition:d .9s cubic-bezier(.2,.7,.2,1)}
/* answer */
.w-big{display:flex;align-items:baseline;gap:8px;padding:2px 4px 8px}
.w-big b{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--brand);font-variant-numeric:tabular-nums}
.w-big span{min-height:16px;font-size:12px;font-weight:600;color:var(--g700)}
/* dash */
.w-kpi{display:flex;flex-direction:column;gap:2px;padding:2px 4px 6px}
.w-kpi b{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--g900);font-variant-numeric:tabular-nums}
.w-kpi span{min-height:14px;font-size:10.5px;font-weight:600;color:var(--g500)}
.w-chart{display:flex;align-items:flex-end;gap:6px;height:56px;margin:0 4px 8px;padding-bottom:1px;border-bottom:1px solid var(--g200)}
.w-chart i{flex:1;height:6%;border-radius:4px 4px 0 0;background:linear-gradient(#8f9dff,#0018ff);transition:height .9s cubic-bezier(.2,.7,.2,1)}
.w-chart i:nth-child(even){background:linear-gradient(#c9ceff,#5a62ff)}

/* guide hero: layered planes */
.mx-stack{position:relative;height:440px;perspective:1300px}
.mx-stack-3d{position:absolute;left:50%;top:50%;width:330px;height:180px;margin:4px 0 0 -165px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-34deg)}
.mx-plane{position:absolute;inset:0;border-radius:24px;padding:16px 18px;transform-style:preserve-3d}
.mx-plane.p3{transform:translateZ(0);background:linear-gradient(160deg,#fff,#f3f4f8);border:1px solid var(--g200);box-shadow:30px 40px 60px -20px rgba(13,44,115,.35)}
.mx-plane.p3::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--crm) 35%,transparent)}
.mx-plane.p2{transform:translateZ(112px);background:rgba(255,255,255,.55);border:1px solid rgba(174,182,255,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mx-plane.p1{transform:translateZ(224px);background:linear-gradient(150deg,#5a52ff,#1f2bd6 70%);border:1px solid rgba(255,255,255,.3);box-shadow:0 30px 60px -20px rgba(0,24,255,.55)}
.mx-plane-tag{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--g800)}
.mx-plane-tag.light{color:#fff}
.mx-plane-tag b{display:grid;place-items:center;min-width:26px;height:22px;padding:0 5px;border-radius:6px;background:var(--c);color:#fff;font-size:9.5px}
.mx-objs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mx-objs span{padding:6px 10px;border-radius:8px;background:#fff;border:1px solid var(--g200);font-size:11px;font-weight:600;color:var(--g700);animation:mxObj 6s ease infinite;animation-delay:calc(var(--k) * 1.2s + .9s)}
@keyframes mxObj{0%,4%,22%,100%{background:#fff;border-color:var(--g200);color:var(--g700);box-shadow:none}8%,16%{background:color-mix(in srgb,var(--crm) 12%,#fff);border-color:var(--crm);color:var(--g900);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--crm) 70%,transparent)}}
.mx-gate{display:flex;gap:8px;margin-top:14px}
.mx-gate span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#fff;border:1px solid #c9ceff;font-size:11px;font-weight:600;color:var(--brand)}
.mx-gate svg{width:13px;height:13px;fill:none;stroke:#22a55a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mx-p1-row{display:flex;gap:8px;margin-top:14px}
.mx-p1-row span{padding:6px 11px;border-radius:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:11px;font-weight:600;color:#fff}
.mx-drop{position:absolute;left:calc(40% + var(--k) * 38px);top:calc(52% + var(--k) * 8px);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(90,98,255,.6),0 0 18px 4px rgba(90,98,255,.8);transform:translateZ(224px);animation:mxDrop 3.6s cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--k) * 1.2s)}
@keyframes mxDrop{0%{transform:translateZ(224px);opacity:0}10%{opacity:1}45%{transform:translateZ(112px)}55%{transform:translateZ(112px)}90%{opacity:1}100%{transform:translateZ(2px);opacity:0}}
.mx-stack-cube{--cs:58px;left:auto;right:8%;top:4%;transform:none}
.mx-scene .lc-approve{top:282px}
.mx-scene .lc-hitl{top:318px}

/* orbit (CRM + integrations hub): radius from --r */
.mx-orbit{position:relative;height:420px;perspective:1100px;container-type:inline-size}
/* the ring shrinks with its column so the labels stay inside the card */
.mx-orbit-3d{--r:min(var(--r0),calc(50cqw - 76px))}
@media (max-width:1200px){.mx .lc-crm{grid-template-columns:minmax(0,1fr)}.mx .lc-crm .mx-orbit{max-width:620px;width:100%;margin:0 auto}}
.mx-orbit-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(60deg)}
.mx-ring{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);border-radius:50%;border:1.5px dashed #aeb6ff;background:radial-gradient(circle,rgba(0,24,255,.08),transparent 70%)}
.mx-ring.r2{width:calc(var(--r) * 1.1);height:calc(var(--r) * 1.1);margin:calc(var(--r) * -.55) 0 0 calc(var(--r) * -.55);border-style:solid;border-color:rgba(0,24,255,.18);animation:lcPulseRing 3s ease-out infinite}
.mx-spin{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:lcOrbit 32s linear infinite}
.mx-spoke{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateZ(var(--a))}
.mx-spoke .lc-pkt{animation-delay:calc(var(--k) * .5s)}
@keyframes mxPkt{0%{transform:translateX(calc(var(--r) - 30px));opacity:0}15%,85%{opacity:1}100%{transform:translateX(44px);opacity:0}}
.mx-spoke .lc-pkt.in{animation-name:mxPkt}
.mx-sat{position:absolute;left:0;top:0;height:40px;margin:-20px 0 0 -54px;display:flex;align-items:center;gap:7px;padding:0 10px 0 7px;border-radius:11px;background:#fff;border:1px solid var(--g200);box-shadow:0 14px 24px -14px rgba(13,44,115,.45);white-space:nowrap;animation:mxFace 32s linear infinite}
@keyframes mxFace{from{transform:translateX(var(--r)) rotateZ(calc(-1 * var(--a))) rotateX(-60deg)}to{transform:translateX(var(--r)) rotateZ(calc(-1 * var(--a) - 360deg)) rotateX(-60deg)}}
.mx-sat b{display:grid;place-items:center;min-width:26px;height:24px;padding:0 5px;border-radius:7px;background:var(--c);color:#fff;font-size:9px;font-weight:700}
.mx-sat span{font-size:11px;font-weight:600;color:var(--g800)}
.mx-sat.hl{border-color:#8f9dff;box-shadow:0 0 0 3px rgba(0,24,255,.12),0 18px 30px -14px rgba(0,24,255,.55)}
.mx-core{--cs:var(--core)}
.mx-hub{position:relative}
.mx-hub .mx-orbit{height:390px}
.mx-hub-out{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:-6px}
.mx-hub-out em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);margin-right:4px}
.mx-hub-out span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:9px;background:#fff;border:1px solid var(--g200);font-size:12px;font-weight:600;color:var(--g800)}
.mx-hub-out b{display:grid;place-items:center;min-width:22px;height:20px;padding:0 4px;border-radius:6px;background:var(--c);color:#fff;font-size:8.5px}

/* card tiles */
.mx-tviz{display:grid;place-items:center;perspective:700px;background:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(160deg,#fbfbff,#f3f4fb)}
.mx-num{position:absolute;left:14px;top:12px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--g400)}
.mx-halo{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;border:1px solid rgba(0,24,255,.12);animation:mxHalo 4s ease-out infinite;animation-delay:calc(var(--k) * -1.3s)}
@keyframes mxHalo{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.mx-plinth{position:absolute;left:50%;top:58%;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:22px;transform:rotateX(62deg) rotateZ(45deg);background:linear-gradient(135deg,#e8ebff,#cfd5ff);box-shadow:1px 1px 0 #bfc6fb,2px 2px 0 #bfc6fb,3px 3px 0 #b3bbf8,4px 4px 0 #b3bbf8,5px 5px 0 #a8b1f5,6px 6px 0 #a8b1f5,18px 18px 30px rgba(13,44,115,.22)}
.mx-glass{position:relative;display:grid;place-items:center;width:78px;height:78px;margin-top:-34px;border-radius:20px;color:#fff;background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 16px rgba(0,10,120,.35),0 22px 30px -14px rgba(0,24,255,.65);transform:rotateX(10deg) rotateY(-16deg);transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:mxFloat 4.2s ease-in-out infinite;animation-delay:calc(var(--k) * -1.1s)}
.mx-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 42%)}
.mx-glass svg{position:relative;width:36px;height:36px}
.mx-tviz[style*="--k:1"] .mx-glass{background:linear-gradient(150deg,#8b7dff,#5a31e6 75%)}
.mx-tviz[style*="--k:2"] .mx-glass{background:linear-gradient(150deg,#46b3ff,#1f5fe0 75%)}
.lc-card:hover .mx-glass{transform:rotateX(0) rotateY(0) scale(1.06)}
@keyframes mxFloat{50%{translate:0 -8px}}
.mx-sat-dot{position:absolute;left:50%;top:48%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#5f74ff;box-shadow:0 0 10px rgba(95,116,255,.8);animation:mxSat 6s linear infinite;animation-delay:calc(var(--s) * -2s)}
@keyframes mxSat{from{transform:rotate(0) translateX(84px) scale(.8)}to{transform:rotate(360deg) translateX(84px) scale(.8)}}
.mx-grid6{grid-template-columns:repeat(3,minmax(0,1fr))}
.mx-grid6 .lc-viz{height:170px}

/* flow: glass icon object */
.mx-gobj{display:grid;place-items:center;width:70px;height:70px;border-radius:18px;color:#fff;background:linear-gradient(150deg,#7d86ff,#2f3de8 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 6px rgba(90,98,255,.16)}
.mx-gobj svg{width:34px;height:34px}
.lc-step.on .mx-gobj{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 6px rgba(90,98,255,.28),0 0 0 14px rgba(90,98,255,.1)}

/* stat band */
.mx-stat{display:grid;grid-template-columns:auto minmax(0,1fr) 220px;align-items:center;gap:clamp(20px,4vw,56px);padding:clamp(24px,3.4vw,40px) clamp(24px,3.6vw,48px);border-radius:20px;background:var(--g50);border:1px solid var(--g200)}
.mx-stat-n b{display:block;font-size:clamp(46px,5.4vw,76px);font-weight:600;line-height:1;letter-spacing:-.03em;background:linear-gradient(90deg,#0018ff,#5a52ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-stat-t p{margin:0;font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:var(--g700);max-width:48ch}
.mx-stat-t .lum-eyebrow{margin-bottom:10px}
.mx-stat-viz{display:flex;align-items:flex-end;gap:6px;height:74px}
.mx-stat-viz i{flex:1;height:calc(var(--h) * 1%);border-radius:4px 4px 1px 1px;background:linear-gradient(#aeb6ff,#0018ff);opacity:.25;transform-origin:bottom;animation:mxBar 3.4s ease-in-out infinite;animation-delay:calc(var(--k) * .12s)}
.mx-stat-viz i:nth-last-child(-n+3){opacity:.85}
@keyframes mxBar{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}

/* object list (what syncs) */
.mx-objlist .mx-li-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%);box-shadow:0 6px 14px -6px rgba(0,24,255,.6)}
.mx-objlist .mx-li-ic svg{width:18px;height:18px}
.mx-listsec .lc-why p b{display:block;margin-bottom:2px}
.mx-listsec .lc-why p span{display:block}
.lc-crm-list .mx-badge{background:#eaf8ef;border-color:#b7e4c7;color:#166534}
.lc-crm-list .mx-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* integration map */
.mx-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--block-y)}
.mx-group{padding:24px 24px 22px;border-radius:22px;background:#fff;border:1px solid var(--g200);scroll-margin-top:110px;transition:border-color .3s,box-shadow .3s,transform .3s}
.mx-group:hover,.mx-group.flash{border-color:#aeb6ff;box-shadow:0 24px 44px -28px rgba(13,44,115,.4);transform:translateY(-2px)}
.mx-group.flash{animation:mxFlash 1.6s ease}
@keyframes mxFlash{0%,100%{box-shadow:0 0 0 0 rgba(0,24,255,0)}30%{box-shadow:0 0 0 6px rgba(0,24,255,.15)}}
.mx-group-h{display:flex;align-items:center;gap:12px}
.mx-gicon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%);box-shadow:0 8px 16px -8px rgba(0,24,255,.6)}
.mx-gicon svg{width:21px;height:21px}
.mx-group h3{flex:1;font-family:var(--display);font-size:19px;font-weight:600}
.mx-group-h em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--brand);padding:3px 9px;border-radius:999px;background:#eef0ff}
.mx-group > p{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--g600)}
.mx-logos{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.mx-logos li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:9px;background:var(--g50);border:1px solid var(--g150);font-size:12.5px;font-weight:500;color:var(--g800);transition:border-color .2s,background-color .2s}
.mx-logos li:hover{background:#fff;border-color:#c9ceff}
.mx-logos i{display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:6px;background:var(--c);color:#fff;font-style:normal;font-size:9px;font-weight:700}
.mx-gnote{margin:14px 0 0;font-size:13px;color:var(--g600)}
.mx-gnote a{color:var(--brand);font-weight:600}

/* FAQ */
.mx-faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.mx-faq-wrap > div:first-child{position:sticky;top:120px}
.mx-faq{display:grid;gap:10px}
.mx-q{border-radius:16px;background:var(--g50);border:1px solid var(--g150);transition:background-color .25s,border-color .25s}
.mx-q[open]{background:#fff;border-color:#c9ceff;box-shadow:0 18px 36px -26px rgba(13,44,115,.4)}
.mx-q summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:600;color:var(--g900)}
.mx-q summary::-webkit-details-marker{display:none}
.mx-qn{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--g500)}
.mx-q[open] .mx-qn{color:var(--brand)}
.mx-qt{flex:1}
.mx-q summary i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--g200)}
.mx-q summary i::before,.mx-q summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;background:var(--g700);transition:transform .25s}
.mx-q summary i::after{transform:rotate(90deg)}
.mx-q[open] summary i{background:var(--brand);border-color:var(--brand)}
.mx-q[open] summary i::before,.mx-q[open] summary i::after{background:#fff}
.mx-q[open] summary i::after{transform:rotate(0)}
.mx-q summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:16px}
.mx-a{padding:0 20px 20px 57px}
.mx-a p{margin:0;font-size:15px;line-height:1.65;color:var(--g600)}
.mx-q[open] .mx-a{animation:lcIn .3s ease-out}

/* responsive */
@media (max-width:1100px){.mx-stat{grid-template-columns:auto minmax(0,1fr)}.mx-stat-viz{display:none}.mx-grid6{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-grid6 .lc-card:last-child{grid-column:auto}}
@media (max-width:900px){.mx-map,.mx-faq-wrap{grid-template-columns:minmax(0,1fr)}.mx-faq-wrap > div:first-child{position:static}.mx-stack{height:380px}}
@media (max-width:640px){
  .mx-stat{grid-template-columns:minmax(0,1fr);gap:12px}
  .mx-grid6{grid-template-columns:minmax(0,1fr)}
  .mx-orbit{height:300px}
  .mx-orbit .mx-orbit-3d{--r:var(--r0);transform:scale(.6) rotateX(60deg)}
  .mx-core{--cs:calc(var(--core) * .72)}
  .mx-hub .mx-orbit{height:300px}
  .mx-stack{height:330px}
  .mx-stack-3d{transform:scale(.78) rotateX(58deg) rotateZ(-36deg)}
  .mx-stack-cube{--cs:48px;right:4%}
  .mx-a{padding-left:20px}
  .mx-pane{min-height:0}
  .w-bar{grid-template-columns:110px 1fr}
}
@media (prefers-reduced-motion:reduce){.mx *,.mx *::before,.mx *::after{animation:none!important;transition:none!important}}
/* ============ v76: module-specific 3D centrepieces (replace the hero cube) ============ */
.pc{--g1:#6a63ff;--g2:#1f2bd6;--edge:#141b8e;position:relative;width:100%;height:100%;transform-style:preserve-3d}
.pc img[data-logo]{filter:brightness(0) invert(1)}
.pc-badge{position:absolute;left:50%;bottom:-34%;display:grid;place-items:center;width:62%;height:24%;margin-left:-31%;border-radius:999px;background:linear-gradient(135deg,#5a52ff,#0018ff);box-shadow:0 6px 14px -6px rgba(0,24,255,.7),inset 0 1px 0 rgba(255,255,255,.35);transform:translateZ(30px)}
.pc-badge img{width:70%;height:auto}
/* generic 3D box: .pc-box[--w --h --d] with faces .b1 front .b2 back .b3 right .b4 left .b5 top .b6 bottom */
.pc-box{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.pc-box > i{position:absolute;left:0;top:0;border-radius:calc(var(--cs) * .06);background:linear-gradient(155deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pc-box > .b1,.pc-box > .b2{width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2)}
.pc-box > .b3,.pc-box > .b4{width:var(--d);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--d) / -2);background:linear-gradient(155deg,#4b4ff0,#1a24b8)}
.pc-box > .b5,.pc-box > .b6{width:var(--w);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--w) / -2);background:linear-gradient(135deg,#9aa1ff,#5a62ff)}
.pc-box > .b1{transform:translateZ(calc(var(--d) / 2))}
.pc-box > .b2{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.pc-box > .b3{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.pc-box > .b4{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.pc-box > .b5{transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}
.pc-box > .b6{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2));background:#141b8e}
@keyframes pcSway{0%,100%{transform:rotateX(-18deg) rotateY(-40deg)}50%{transform:rotateX(-14deg) rotateY(-16deg)}}
@keyframes pcSwayDeep{0%,100%{transform:rotateX(-34deg) rotateY(-38deg)}50%{transform:rotateX(-30deg) rotateY(-14deg)}}
@keyframes pcBob{50%{translate:0 -5px}}
.lc-cube-wrap.hit .pc{filter:drop-shadow(0 0 14px rgba(90,98,255,.9))}

/* Lead Capture: open tray, an envelope drops in */
.pc-tray .pc-tilt{position:absolute;inset:0;transform-style:preserve-3d;animation:pcSwayDeep 7s ease-in-out infinite}
.pc-tray .pc-box{--w:calc(var(--cs) * 1.1);--h:calc(var(--cs) * .5);--d:calc(var(--cs) * .95);top:70%}
.pc-tray .b5{background:linear-gradient(135deg,#2a33c8,#141b8e);box-shadow:inset 0 0 0 3px #8f9dff,inset 0 10px 18px rgba(0,0,40,.55)}
.pc-tray .b5::after{content:"";position:absolute;left:18%;right:18%;top:30%;height:14%;border-radius:3px;background:rgba(255,255,255,.85);box-shadow:0 10px 0 rgba(255,255,255,.55)}
.pc-tray .b1{display:grid;place-items:center}
.pc-tray .b1 img{width:52%}
.pc-env{position:absolute;left:50%;top:-4%;width:64%;height:44%;margin-left:-32%;transform-style:preserve-3d;border-radius:5px;background:linear-gradient(160deg,#fff,#dfe3ff);box-shadow:0 8px 16px -8px rgba(13,44,115,.5);overflow:hidden;animation:pcDrop 2.8s cubic-bezier(.5,0,.4,1) infinite}
.pc-env::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#eef0ff,#c9ceff);clip-path:polygon(0 0,100% 0,50% 60%)}
@keyframes pcDrop{0%{transform:translateY(-60%);opacity:0}18%{opacity:1}55%{transform:translateY(20%);opacity:1}80%{transform:translateY(70%);opacity:0}100%{transform:translateY(70%);opacity:0}}

/* Lead Scoring: score dial with a sweeping needle */
.pc-dial{animation:pcTiltDial 7s ease-in-out infinite}
@keyframes pcTiltDial{0%,100%{transform:rotateX(16deg) rotateY(-22deg)}50%{transform:rotateX(10deg) rotateY(22deg)}}
@property --sw{syntax:"<angle>";initial-value:0deg;inherits:true}
.pc-disc{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8c93ff,#2a33d8 68%);box-shadow:0 5px 0 var(--edge),0 18px 28px -10px rgba(0,24,255,.65),inset 0 1px 0 rgba(255,255,255,.45);animation:pcSweep 4.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes pcSweep{0%,8%{--sw:10deg}55%,80%{--sw:235deg}100%{--sw:10deg}}
.pc-disc .arc{position:absolute;inset:9%;border-radius:50%;background:conic-gradient(from 225deg,#fff 0 var(--sw),rgba(255,255,255,.16) var(--sw) 270deg,transparent 270deg);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61.5%);mask:radial-gradient(circle,transparent 60%,#000 61.5%)}
.pc-disc .needle{position:absolute;left:50%;top:50%;width:5%;height:34%;margin-left:-2.5%;border-radius:3px;background:#fff;transform-origin:50% 0;transform:rotate(calc(var(--sw) + 45deg));box-shadow:0 0 8px rgba(255,255,255,.8)}
.pc-disc .hub{position:absolute;left:50%;top:50%;width:14%;height:14%;margin:-7% 0 0 -7%;border-radius:50%;background:#fff}
.pc-disc img{position:absolute;left:50%;bottom:17%;width:42%;margin-left:-21%}

/* Enrichment: plates stacking up with a plus */
.pc-layers{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg)}
.pc-layers i{position:absolute;inset:4%;border-radius:22%;background:linear-gradient(135deg,#c9ceff,#8f9dff);box-shadow:0 0 0 1px rgba(255,255,255,.5),6px 6px 14px rgba(13,44,115,.25);animation:pcStack 3.6s ease-in-out infinite}
.pc-layers i:nth-child(1){transform:translateZ(0)}
.pc-layers i:nth-child(2){--z:16px;background:linear-gradient(135deg,#aeb6ff,#6a74ff)}
.pc-layers i:nth-child(3){--z:32px;display:grid;place-items:center;background:linear-gradient(135deg,#6a63ff,#1f2bd6)}
@keyframes pcStack{0%,100%{transform:translateZ(calc(var(--z,0px) * .55))}50%{transform:translateZ(calc(var(--z,0px) * 1.25))}}
.pc-layers i:nth-child(3) b{position:relative;width:30%;height:30%;transform:rotate(40deg)}
.pc-layers i:nth-child(3) b::before,.pc-layers i:nth-child(3) b::after{content:"";position:absolute;left:50%;top:0;width:22%;height:100%;margin-left:-11%;border-radius:3px;background:#fff}
.pc-layers i:nth-child(3) b::after{transform:rotate(90deg)}
.pc-enrich .pc-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(143,157,255,.9);animation:pcSpark 2.4s ease-in-out infinite}
.pc-enrich .pc-spark:nth-of-type(1){left:-10%;top:10%}
.pc-enrich .pc-spark:nth-of-type(2){right:-12%;top:30%;animation-delay:.8s}
.pc-enrich .pc-spark:nth-of-type(3){left:20%;bottom:-8%;animation-delay:1.6s}
@keyframes pcSpark{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1);opacity:1}}

/* Meeting Scheduling: calendar block, page flips */
.pc-cal .pc-tilt{position:absolute;inset:0;transform-style:preserve-3d;animation:pcSway 7s ease-in-out infinite}
.pc-cal .pc-box{--w:calc(var(--cs) * .96);--h:calc(var(--cs) * .9);--d:calc(var(--cs) * .46)}
.pc-cal .b1{display:flex;flex-direction:column;align-items:center;overflow:hidden;background:#fff}
.pc-cal .b1 .hd{display:grid;place-items:center;width:100%;height:30%;background:linear-gradient(135deg,#5a52ff,#0018ff)}
.pc-cal .b1 .hd img{width:46%}
.pc-cal .b1 b{flex:1;display:grid;place-items:center;font:700 calc(var(--cs) * .36)/1 var(--sans);color:#0018ff;animation:pcFlip 4s ease-in-out infinite;transform-origin:50% 0}
.pc-cal .b1 em{position:absolute;left:14%;right:14%;bottom:10%;height:8%;border-radius:4px;background:#22a55a;transform:scaleX(0);transform-origin:left;animation:pcBook 4s ease-in-out infinite}
@keyframes pcFlip{0%,40%{transform:none}48%{transform:rotateX(80deg)}56%,100%{transform:none}}
@keyframes pcBook{0%,55%{transform:scaleX(0)}70%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.pc-cal .b5::before,.pc-cal .b5::after{content:"";position:absolute;top:30%;width:9%;height:40%;border-radius:4px;background:#1b1b1f}
.pc-cal .b5::before{left:26%}
.pc-cal .b5::after{right:26%}

/* Pipeline Capture: funnel with deals falling through */
.pc-funnel i{position:absolute;left:50%;border-radius:50%;transform:rotateX(68deg);background:radial-gradient(ellipse,rgba(143,157,255,.45),rgba(31,43,214,.85));box-shadow:0 0 0 2px rgba(255,255,255,.6),0 6px 0 var(--edge)}
.pc-funnel i:nth-child(1){top:-6%;width:112%;height:62%;margin-left:-56%}
.pc-funnel i:nth-child(2){top:22%;width:82%;height:46%;margin-left:-41%}
.pc-funnel i:nth-child(3){top:46%;width:56%;height:32%;margin-left:-28%}
.pc-funnel i:nth-child(4){top:66%;width:32%;height:20%;margin-left:-16%;background:linear-gradient(#5a52ff,#0018ff)}
.pc-funnel span{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(143,157,255,.9);animation:pcFall 2.4s cubic-bezier(.5,0,.6,1) infinite}
.pc-funnel span:nth-of-type(2){animation-delay:.8s;--x:-14px}
.pc-funnel span:nth-of-type(3){animation-delay:1.6s;--x:12px}
@keyframes pcFall{0%{transform:translate(var(--x,0),-10px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(0,calc(var(--cs) * .8));opacity:0}}

/* Pipeline Risk Management: radar sweep with blips */
.pc-radar .rd{position:absolute;inset:-10%;border-radius:50%;transform:rotateX(56deg);background:repeating-radial-gradient(circle,rgba(143,157,255,.35) 0 1px,transparent 1px 22%),radial-gradient(circle,#2a33d8,#0b0a3a 72%);box-shadow:0 0 0 2px rgba(143,157,255,.6),0 8px 0 var(--edge),0 22px 30px -12px rgba(0,24,255,.6);overflow:hidden}
.pc-radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(143,157,255,.85),rgba(143,157,255,0) 70deg,transparent 360deg);animation:pcSpin 2.6s linear infinite}
@keyframes pcSpin{to{transform:rotate(360deg)}}
.pc-radar .blip{position:absolute;width:10%;height:10%;border-radius:50%;background:#0018ff;box-shadow:0 0 10px 3px rgba(245,158,11,.8);animation:pcBlip 2.6s ease-out infinite}
.pc-radar .blip:nth-of-type(2){left:62%;top:28%;animation-delay:.4s;background:#e5484d;box-shadow:0 0 10px 3px rgba(229,72,77,.8)}
.pc-radar .blip:nth-of-type(3){left:30%;top:58%;animation-delay:1.3s}
.pc-radar .blip:nth-of-type(4){left:70%;top:66%;animation-delay:2s;background:#22a55a;box-shadow:0 0 10px 3px rgba(34,165,90,.8)}
@keyframes pcBlip{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.2);opacity:1}100%{transform:scale(.8);opacity:.25}}
.pc-radar .pc-badge{bottom:-28%}

/* Account Management: account tower */
.pc-tower .pc-tilt{position:absolute;inset:0;transform-style:preserve-3d;animation:pcSwayDeep 8s ease-in-out infinite}
.pc-tower .pc-box{--w:calc(var(--cs) * .62);--h:calc(var(--cs) * 1.06);--d:calc(var(--cs) * .62)}
.pc-tower .b1,.pc-tower .b2,.pc-tower .b3,.pc-tower .b4{background:repeating-linear-gradient(0deg,transparent 0 16%,rgba(255,255,255,.1) 16% 18%),repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 18%,rgba(201,206,255,.55) 18% 36%,rgba(255,255,255,0) 36% 46%),linear-gradient(155deg,#6a63ff,#1f2bd6)}
.pc-tower .pc-box > .b3,.pc-tower .pc-box > .b4{background:repeating-linear-gradient(0deg,transparent 0 16%,rgba(0,0,0,.12) 16% 18%),repeating-linear-gradient(90deg,transparent 0 22%,rgba(143,157,255,.45) 22% 44%,transparent 44% 56%),linear-gradient(155deg,#2a33c8,#0f1680)}
.pc-tower .pc-box > .b5{background:linear-gradient(135deg,#c9ceff,#8f9dff)}
.pc-tower .pc-tilt{transform:rotateX(-16deg) rotateY(-38deg)}
.pc-tower .b1 img{position:absolute;left:12%;top:6%;width:76%}
.pc-tower .b5::after{content:"";position:absolute;left:50%;top:50%;width:10%;height:10%;margin:-5% 0 0 -5%;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(143,157,255,.9);animation:pcBeacon 1.8s ease-in-out infinite}
@keyframes pcBeacon{50%{opacity:.3}}

/* Customer Renewals: renewal loop */
.pc-loop .ring{position:absolute;inset:-22%;border-radius:50%;transform:rotateX(64deg);transform-style:preserve-3d}
.pc-loop .ring b{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#0018ff,#8f9dff 70%,transparent 72%,transparent 80%,#0018ff);-webkit-mask:radial-gradient(circle,transparent 50%,#000 52%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 50%,#000 52%,#000 70%,transparent 71%);animation:pcSpin 3.2s linear infinite}
.pc-loop .ring b::after{content:"";position:absolute;right:13%;top:40%;border:9px solid transparent;border-left:14px solid #0018ff;transform:rotate(-80deg)}
.pc-loop .core{position:absolute;left:50%;top:44%;display:grid;place-items:center;width:56%;height:56%;margin:-28% 0 0 -28%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8c93ff,#1f2bd6 70%);box-shadow:0 12px 20px -8px rgba(0,24,255,.7),inset 0 1px 0 rgba(255,255,255,.45);animation:pcBob 3s ease-in-out infinite}
.pc-loop .core img{width:70%}
.pc-loop .core::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:2px solid rgba(34,165,90,.7);animation:lcPulseRing 2.4s ease-out infinite}

/* AI Search Agent: voice orb */
.pc-orb .core{position:absolute;inset:4%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 28%,#b3b9ff,#4a52ff 45%,#0b12a8 80%);box-shadow:0 0 30px 6px rgba(58,85,255,.55),inset 0 -8px 16px rgba(0,0,60,.4);animation:pcBreath 2.6s ease-in-out infinite}
@keyframes pcBreath{50%{box-shadow:0 0 44px 12px rgba(58,85,255,.75),inset 0 -8px 16px rgba(0,0,60,.4)}}
.pc-orb .eq{display:flex;align-items:center;gap:8%;width:54%;height:36%}
.pc-orb .eq i{flex:1;height:30%;border-radius:3px;background:#fff;animation:mxWave 1s ease-in-out infinite}
.pc-orb .eq i:nth-child(2){animation-delay:-.3s}
.pc-orb .eq i:nth-child(3){animation-delay:-.6s}
.pc-orb .eq i:nth-child(4){animation-delay:-.15s}
.pc-orb .eq i:nth-child(5){animation-delay:-.45s}
.pc-orb .orbit{position:absolute;inset:-18%;border-radius:50%;border:1.5px solid rgba(143,157,255,.7);transform-style:preserve-3d}
.pc-orb .o1{transform:rotateX(70deg) rotateY(10deg);animation:pcRingA 5s linear infinite}
.pc-orb .o2{inset:-8%;transform:rotateX(70deg) rotateY(-50deg);animation:pcRingB 7s linear infinite}
@keyframes pcRingA{to{transform:rotateX(70deg) rotateY(10deg) rotateZ(360deg)}}
@keyframes pcRingB{to{transform:rotateX(70deg) rotateY(-50deg) rotateZ(-360deg)}}
.pc-orb .orbit b{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(143,157,255,.9)}

/* CRM Sync (and the CRM guides): coin with two-way arrows */
.pc-sync .coin{position:absolute;inset:14%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8c93ff,#1f2bd6 70%);box-shadow:0 5px 0 var(--edge),0 16px 24px -10px rgba(0,24,255,.6),inset 0 1px 0 rgba(255,255,255,.45);animation:pcCoin 5s ease-in-out infinite}
@keyframes pcCoin{0%,100%{transform:rotateY(-24deg)}50%{transform:rotateY(24deg)}}
.pc-sync .coin img{width:66%}
.pc-sync .arcs{position:absolute;inset:-12%;transform:rotateX(18deg);animation:pcSpin 3.6s linear infinite}
.pc-sync .arcs i{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#0018ff;border-right-color:#5a62ff}
.pc-sync .arcs i:nth-child(2){transform:rotate(180deg)}
.pc-sync .arcs i::after{content:"";position:absolute;right:6%;top:6%;border:6px solid transparent;border-left:9px solid #5a62ff;transform:rotate(128deg)}

/* Analytics: 3D bar stack */
.pc-bars .pc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-34deg);animation:pcBarsTurn 8s ease-in-out infinite}
@keyframes pcBarsTurn{50%{transform:rotateX(-18deg) rotateY(-10deg)}}
.pc-bars .base{position:absolute;left:50%;top:92%;width:calc(var(--cs) * 1.2);height:calc(var(--cs) * .5);margin:calc(var(--cs) * -.25) 0 0 calc(var(--cs) * -.6);border-radius:8px;background:linear-gradient(135deg,#dfe3ff,#aeb6ff);transform:rotateX(90deg);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.pc-bars .bar{position:absolute;left:calc(50% + var(--x));top:92%;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;animation:pcGrow 3.2s ease-in-out infinite;animation-delay:var(--dl)}
.pc-bars .bar .pc-box{--w:calc(var(--cs) * .2);--d:calc(var(--cs) * .2);--h:var(--bh);top:calc(var(--bh) / -2);left:0}
@keyframes pcGrow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.pc-bars .pc-badge{bottom:-30%}

/* Integrations: network hub (orbit centre) */
.pc-hub .core{position:absolute;inset:8%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 28%,#9aa1ff,#2a33d8 55%,#0b12a8 85%);box-shadow:0 0 30px 6px rgba(58,85,255,.5),inset 0 -8px 16px rgba(0,0,60,.4)}
.pc-hub .core img{width:62%}
.pc-hub .ring{position:absolute;inset:-6%;border-radius:50%;border:1.5px solid rgba(143,157,255,.8);transform-style:preserve-3d}
.pc-hub .ring:nth-of-type(1){transform:rotateX(72deg);animation:pcHubA 6s linear infinite}
.pc-hub .ring:nth-of-type(2){transform:rotateY(72deg);animation:pcHubB 8s linear infinite}
.pc-hub .ring:nth-of-type(3){transform:rotateX(72deg) rotateY(60deg);animation:pcHubC 10s linear infinite}
@keyframes pcHubA{to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes pcHubB{to{transform:rotateY(72deg) rotateZ(360deg)}}
@keyframes pcHubC{to{transform:rotateX(72deg) rotateY(60deg) rotateZ(-360deg)}}
.pc-hub .ring b{position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(143,157,255,.9)}

@media (prefers-reduced-motion:reduce){.pc,.pc *,.pc *::before,.pc *::after{animation:none!important}}
/* ============ v78: Solutions centrepieces ============ */
.pc .pc-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.pc-sway{animation:pcSway 8s ease-in-out infinite}
/* VP Sales / CRO: target with a dart landing */
.pc-target .disc{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,#fff 0 9%,#0018ff 10% 22%,#fff 23% 34%,#3a55ff 35% 48%,#dfe3ff 49% 60%,#1f2bd6 61% 100%);box-shadow:0 6px 0 var(--edge),0 20px 30px -12px rgba(0,24,255,.6);animation:pcTiltDial 7s ease-in-out infinite}
.pc-target .dart{position:absolute;left:50%;top:50%;width:8%;height:58%;margin-left:-4%;border-radius:3px;background:linear-gradient(#1b1b1f,#4b4b57);transform-origin:50% 0;transform:rotate(-40deg) translateZ(20px);animation:pcDart 3.2s cubic-bezier(.3,1.4,.5,1) infinite}
.pc-target .dart::after{content:"";position:absolute;left:50%;bottom:-8%;width:240%;height:26%;margin-left:-120%;background:linear-gradient(90deg,#0018ff,#e5484d);clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes pcDart{0%{transform:rotate(-40deg) translate(40%,-60%) translateZ(20px);opacity:0}20%{opacity:1}35%,85%{transform:rotate(-40deg) translateZ(20px);opacity:1}100%{opacity:0}}
.pc-target .pc-badge{bottom:-40%}
/* Head of RevOps: shield with a check */
.pc-shield .sh{position:absolute;inset:-6% 4%;clip-path:polygon(50% 0,100% 14%,100% 52%,50% 100%,0 52%,0 14%);background:linear-gradient(150deg,#7d86ff,#1f2bd6 70%)}
.pc-shield .sh.back{background:#141b8e;transform:translate(4px,5px) translateZ(-8px)}
.pc-shield .sh.front{display:grid;place-items:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.4)}
.pc-shield .sh.front::before{content:"";position:absolute;inset:12%;clip-path:inherit;border:2px solid rgba(255,255,255,.5)}
.pc-shield .sh.front b{width:40%;height:22%;margin-top:-10%;border-left:5px solid #fff;border-bottom:5px solid #fff;transform:rotate(-45deg);animation:pcCheck 3s ease-in-out infinite}
@keyframes pcCheck{0%,15%{clip-path:inset(0 100% 0 0)}45%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.pc-shield .pc-tilt{animation:pcCoin 5s ease-in-out infinite}
/* Sales Managers: podium with a star */
.pc-podium .pc-tilt{transform:rotateX(-18deg) rotateY(-30deg);animation:pcBarsTurn 8s ease-in-out infinite}
.pc-podium .pc-box{top:78%;--w:calc(var(--cs) * .4);--d:calc(var(--cs) * .4)}
.pc-podium .p1{--h:calc(var(--cs) * .78);left:50%}
.pc-podium .p2{--h:calc(var(--cs) * .52);left:calc(50% - var(--cs) * .4)}
.pc-podium .p3{--h:calc(var(--cs) * .36);left:calc(50% + var(--cs) * .4)}
.pc-podium .pc-box{margin-top:calc(var(--h) / -2)}
.pc-podium .p2 > i,.pc-podium .p3 > i{--g1:#aeb6ff;--g2:#6a74ff}
.pc-podium .star{position:absolute;left:50%;top:-30%;width:40%;height:40%;margin-left:-20%;background:linear-gradient(#5a52ff,#0018ff);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 8px rgba(245,158,11,.8));animation:pcBob 2.4s ease-in-out infinite,pcStarSpin 6s linear infinite;transform:translateZ(20px)}
@keyframes pcStarSpin{to{rotate:y 360deg}}
.pc-podium .pc-badge{bottom:-42%}
/* Account Executives: briefcase */
.pc-case .pc-tilt{animation:pcSway 7s ease-in-out infinite}
.pc-case .pc-box{--w:calc(var(--cs) * 1.05);--h:calc(var(--cs) * .74);--d:calc(var(--cs) * .34);top:58%}
.pc-case .b1{display:grid;place-items:center}
.pc-case .b1::before{content:"";position:absolute;left:0;right:0;top:34%;height:6%;background:rgba(255,255,255,.35)}
.pc-case .b1::after{content:"";position:absolute;left:44%;top:28%;width:12%;height:18%;border-radius:3px;background:#5a52ff}
.pc-case .b1 img{width:46%;margin-top:34%}
.pc-case .b5::after{content:"";position:absolute;left:32%;right:32%;top:50%;height:calc(var(--cs) * .22);border:4px solid #1f2bd6;border-bottom:0;border-radius:10px 10px 0 0;transform:translateY(-100%) rotateX(-90deg);transform-origin:bottom}
/* SDR / BDR: paper plane */
.pc-plane .pc-tilt{animation:pcFly 3.6s ease-in-out infinite}
@keyframes pcFly{0%,100%{transform:rotateX(-10deg) rotateY(-30deg) translate(0,0)}50%{transform:rotateX(-6deg) rotateY(-20deg) translate(4px,-8px)}}
.pc-plane .w1,.pc-plane .w2{position:absolute;inset:0;clip-path:polygon(0 60%,100% 10%,40% 100%)}
.pc-plane .w1{background:linear-gradient(135deg,#dfe3ff,#8f9dff);transform:rotateX(18deg)}
.pc-plane .w2{background:linear-gradient(135deg,#6a63ff,#1f2bd6);clip-path:polygon(0 60%,100% 10%,46% 72%);transform:rotateX(-24deg) translateZ(-4px)}
.pc-plane .trail{position:absolute;right:88%;top:62%;width:70%;height:2px;background:repeating-linear-gradient(90deg,#8f9dff 0 6px,transparent 6px 11px);animation:lcDash 1s linear infinite}
.pc-plane .pc-badge{bottom:-36%}
/* Distribution: stacked crates */
.pc-crates .pc-tilt{animation:pcSway 8s ease-in-out infinite}
.pc-crates .pc-box{--w:calc(var(--cs) * .5);--h:calc(var(--cs) * .44);--d:calc(var(--cs) * .5)}
.pc-crates .pc-box > i{background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 2px,transparent 2px 25%),linear-gradient(155deg,#6a63ff,#1f2bd6)}
.pc-crates .pc-box > .b5{background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 2px,transparent 2px 25%),linear-gradient(135deg,#9aa1ff,#5a62ff)}
.pc-crates .c1{top:62%;left:calc(50% - var(--cs) * .27)}
.pc-crates .c2{top:62%;left:calc(50% + var(--cs) * .27)}
.pc-crates .pc-badge{bottom:-46%}
.pc-crates .c3{top:18%;left:50%;animation:pcLand 3.2s cubic-bezier(.5,0,.4,1.3) infinite}
@keyframes pcLand{0%{translate:0 -60%;opacity:0}30%{opacity:1}55%,90%{translate:0 0;opacity:1}100%{translate:0 0;opacity:1}}
/* Retail: shopping bag */
.pc-bag .pc-tilt{animation:pcSway 7s ease-in-out infinite}
.pc-bag .pc-box{--w:calc(var(--cs) * .84);--h:calc(var(--cs) * .9);--d:calc(var(--cs) * .4);top:60%}
.pc-bag .b1{display:grid;place-items:center}
.pc-bag .b1 img{width:56%;margin-top:20%}
.pc-bag .handle{position:absolute;left:50%;top:6%;width:40%;height:28%;margin-left:-20%;border:4px solid #1f2bd6;border-bottom:0;border-radius:40px 40px 0 0;transform:translateZ(calc(var(--cs) * .21))}
.pc-bag .tag{position:absolute;right:-26%;top:-4%;padding:2px 6px;border-radius:5px;background:#22a55a;color:#fff;font:700 9px/1.4 var(--sans);transform:translateZ(calc(var(--cs) * .3)) rotate(12deg);animation:pcBob 2.6s ease-in-out infinite}
/* IT services: server rack with blinking lights */
.pc-rack .pc-tilt{transform:rotateX(-16deg) rotateY(-36deg);animation:pcSwayDeep 8s ease-in-out infinite}
.pc-rack .pc-box{--w:calc(var(--cs) * .66);--h:calc(var(--cs) * 1.02);--d:calc(var(--cs) * .56)}
.pc-rack .b1{background:repeating-linear-gradient(0deg,transparent 0 22%,rgba(0,0,40,.45) 22% 25%),linear-gradient(155deg,#6a63ff,#1f2bd6)}
.pc-rack .b1 i{position:absolute;left:12%;width:9%;height:6%;border-radius:50%;background:#22e584;box-shadow:0 0 6px 1px #22e584;animation:pcBeacon 1.2s steps(2) infinite}
.pc-rack .b1 i:nth-child(1){top:8%}
.pc-rack .b1 i:nth-child(2){top:33%;animation-delay:.4s}
.pc-rack .b1 i:nth-child(3){top:58%;animation-delay:.8s;background:#0018ff;box-shadow:0 0 6px 1px #0018ff}
.pc-rack .b1 i:nth-child(4){top:83%;animation-delay:.2s}
.pc-rack .b1 img{position:absolute;right:10%;top:6%;width:46%}
/* Manufacturing: interlocking gears */
.pc-gears .g{position:absolute;border-radius:50%;background:radial-gradient(circle,#dfe3ff 0 18%,transparent 19%),radial-gradient(circle,#5a62ff 0 62%,transparent 63%),repeating-conic-gradient(#1f2bd6 0 15deg,transparent 15deg 30deg);box-shadow:0 5px 0 rgba(20,27,142,.35)}
.pc-gears .g1{inset:-4% 18% 22% -12%;animation:pcSpin 6s linear infinite}
.pc-gears .g2{inset:40% -14% -10% 46%;animation:pcSpin 4.2s linear infinite reverse;background:radial-gradient(circle,#fff 0 18%,transparent 19%),radial-gradient(circle,#8f9dff 0 62%,transparent 63%),repeating-conic-gradient(#3a55ff 0 18deg,transparent 18deg 36deg)}
.pc-gears .tilt{position:absolute;inset:0;transform:rotateX(28deg) rotateY(-18deg);transform-style:preserve-3d}
.pc-gears .pc-badge{bottom:-40%}
/* Small business: one figure on a plinth */
.pc-pawn .base{position:absolute;left:50%;bottom:-6%;width:100%;height:30%;margin-left:-50%;border-radius:50%;background:radial-gradient(ellipse,#8f9dff,#1f2bd6);box-shadow:0 6px 0 var(--edge)}
.pc-pawn .body{position:absolute;left:50%;bottom:10%;width:56%;height:52%;margin-left:-28%;border-radius:50% 50% 12% 12%;background:radial-gradient(circle at 35% 25%,#9aa1ff,#1f2bd6 70%);box-shadow:inset 0 -6px 12px rgba(0,0,60,.35)}
.pc-pawn .head{position:absolute;left:50%;top:0;width:38%;height:38%;margin-left:-19%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9ceff,#3a55ff 70%);animation:pcBob 2.8s ease-in-out infinite}
.pc-pawn .spark{position:absolute;right:4%;top:6%;width:14%;height:14%;background:#5a52ff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:pcSpark 2s ease-in-out infinite}
.pc-pawn .body img{position:absolute;left:18%;bottom:26%;width:64%}
/* Mid-market: growth steps with an arrow */
.pc-steps .pc-tilt{transform:rotateX(-18deg) rotateY(-34deg);animation:pcBarsTurn 8s ease-in-out infinite}
.pc-steps .pc-box{top:84%;--w:calc(var(--cs) * .38);--d:calc(var(--cs) * .5);margin-top:calc(var(--h) / -2)}
.pc-steps .s1{--h:calc(var(--cs) * .3);left:calc(50% - var(--cs) * .38)}
.pc-steps .s2{--h:calc(var(--cs) * .6);left:50%}
.pc-steps .s3{--h:calc(var(--cs) * .9);left:calc(50% + var(--cs) * .38)}
.pc-steps .arrow{position:absolute;left:-2%;top:6%;width:100%;height:60%;transform:translateZ(calc(var(--cs) * .3))}
.pc-steps .arrow b{position:absolute;left:0;bottom:0;width:112%;height:4px;border-radius:2px;background:#22a55a;transform-origin:0 50%;transform:rotate(-36deg);animation:pcGrowX 3.2s ease-in-out infinite}
.pc-steps .arrow b::after{content:"";position:absolute;right:-4px;top:-5px;border:7px solid transparent;border-left:11px solid #22a55a}
@keyframes pcGrowX{0%,10%{clip-path:inset(0 100% 0 0)}50%,90%{clip-path:inset(-10px -12px -10px 0)}100%{clip-path:inset(0 100% 0 0)}}
.pc-steps .pc-badge{bottom:-42%}
/* Enterprise: tower cluster */
.pc-towers .pc-tilt{transform:rotateX(-16deg) rotateY(-36deg);animation:pcSwayDeep 9s ease-in-out infinite}
.pc-towers .pc-box{top:86%;--w:calc(var(--cs) * .34);--d:calc(var(--cs) * .34);margin-top:calc(var(--h) / -2)}
.pc-towers .pc-box > i{background:repeating-linear-gradient(0deg,transparent 0 12%,rgba(255,255,255,.12) 12% 14%),repeating-linear-gradient(90deg,transparent 0 20%,rgba(201,206,255,.55) 20% 40%,transparent 40% 50%),linear-gradient(155deg,#6a63ff,#1f2bd6)}
.pc-towers .pc-box > .b3,.pc-towers .pc-box > .b4{background:repeating-linear-gradient(90deg,transparent 0 24%,rgba(143,157,255,.45) 24% 48%,transparent 48% 60%),linear-gradient(155deg,#2a33c8,#0f1680)}
.pc-towers .pc-box > .b5{background:linear-gradient(135deg,#c9ceff,#8f9dff)}
.pc-towers .t1{--h:calc(var(--cs) * 1.12);left:50%}
.pc-towers .t2{--h:calc(var(--cs) * .74);left:calc(50% - var(--cs) * .4);top:calc(86% + var(--cs) * .06)}
.pc-towers .t3{--h:calc(var(--cs) * .56);left:calc(50% + var(--cs) * .4);top:calc(86% - var(--cs) * .04)}
.pc-towers .pc-badge{bottom:-40%}
/* ============ v78: Solutions page layouts ============ */
.mx-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mx-grid4 .lc-viz{height:180px}
.mx-p2s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--block-y)}
.mx-p2{position:relative;overflow:hidden;padding:clamp(24px,3vw,36px);border-radius:20px;background:var(--g50);border:1px solid var(--g200)}
.mx-p2::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(0,24,255,.12),transparent 70%)}
.mx-p2 b{display:block;font-size:clamp(40px,4.6vw,64px);font-weight:600;line-height:1;letter-spacing:-.03em;background:linear-gradient(90deg,#0018ff,#5a52ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.mx-p2 span{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.mx-p2 p{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--g700);max-width:44ch}
@media (max-width:1100px){.mx-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-grid4 .lc-card:last-child{grid-column:auto}}
@media (max-width:640px){.mx-grid4,.mx-p2s{grid-template-columns:minmax(0,1fr)}}
/* ============ v79: Resources pages ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rx-hero-center{display:flex;justify-content:center;text-align:center}
.rx-hero-center .lc-hero-copy{max-width:820px;display:flex;flex-direction:column;align-items:center}
.rx-hero-center .lc-crumb,.rx-hero-center .lum-eyebrow,.rx-hero-center .lc-trust{justify-content:center}
.rx-hero-center .lc-lede{margin-inline:auto}

/* chips + search */
.rx-chips{display:flex;flex-wrap:wrap;gap:8px}
.rx-chips-c{justify-content:center;margin-top:16px}
.rx-chip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--g200);background:#fff;font:500 13.5px/1 var(--sans);color:var(--g700);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.rx-chip:hover{border-color:#aeb6ff;color:var(--g900)}
.rx-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.rx-search{position:relative;display:flex;align-items:center;min-width:280px}
.rx-search svg{position:absolute;left:14px;width:18px;height:18px;color:var(--g500);pointer-events:none}
.rx-search input{width:100%;height:44px;padding:0 16px 0 42px;border-radius:12px;border:1px solid var(--g200);background:#fff;font:500 14.5px var(--sans);color:var(--g900);transition:border-color .2s,box-shadow .2s}
.rx-search input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,24,255,.12)}
.rx-search-lg{width:min(620px,100%);margin-top:28px}
.rx-search-lg input{height:56px;border-radius:16px;font-size:16px;box-shadow:0 18px 40px -26px rgba(13,44,115,.45)}
.rx-empty{margin:28px 0 0;text-align:center;font-size:15px;color:var(--g600)}

/* blog */
.rx-stack{position:relative;height:360px;perspective:1100px}
.rx-stack-card{position:absolute;left:50%;top:50%;width:300px;height:190px;margin:-95px 0 0 -150px;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--g200);
  box-shadow:0 30px 50px -30px rgba(13,44,115,.45);transform:rotateX(18deg) rotateZ(-8deg) translate3d(calc(var(--k) * 34px),calc(var(--k) * -30px),calc(var(--k) * 40px));animation:rxFloat 6s ease-in-out infinite;animation-delay:calc(var(--k) * -1.2s)}
.rx-stack-card:nth-child(3){background:linear-gradient(150deg,#5a52ff,#1f2bd6 75%);border-color:transparent}
.rx-stack-card span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.rx-stack-card b{display:block;margin-top:10px;font-size:17px;line-height:1.3;font-weight:600;color:var(--g900)}
.rx-stack-card:nth-child(3) span{color:#c9ceff}
.rx-stack-card:nth-child(3) b{color:#fff}
.rx-stack-card i{display:block;height:6px;margin-top:12px;border-radius:3px;background:var(--g100)}
.rx-stack-card i + i{width:62%}
.rx-stack-card:nth-child(3) i{background:rgba(255,255,255,.2)}
@keyframes rxFloat{50%{translate:0 -8px}}
.rx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.rx-count{margin:20px 0 0;font-size:13.5px;color:var(--g500)}
.rx-count b{color:var(--g900)}
.rx-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.rx-post{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--g200);transition:transform .3s,box-shadow .3s,border-color .3s}
.rx-post:hover{transform:translateY(-4px);border-color:#c9ceff;box-shadow:0 26px 44px -28px rgba(13,44,115,.4)}
.rx-post[hidden]{display:none}
.rx-post-art{position:relative;height:150px;overflow:hidden;background:radial-gradient(circle at 80% 20%,hsl(var(--h) 90% 70% / .35),transparent 55%),radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(150deg,#f3f4ff,#e6e9ff)}
.rx-post-art i{position:absolute;left:24px;right:90px;height:8px;border-radius:4px;background:rgba(0,24,255,.12)}
.rx-post-art i:nth-of-type(1){top:40px}
.rx-post-art i:nth-of-type(2){top:58px;right:130px}
.rx-post-art i:nth-of-type(3){top:76px;right:160px}
.rx-post-ic{position:absolute;right:24px;bottom:22px;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;color:#fff;background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%);box-shadow:0 14px 24px -12px rgba(0,24,255,.6);transform:rotate(-8deg);transition:transform .4s}
.rx-post:hover .rx-post-ic{transform:rotate(0) scale(1.06)}
.rx-post-ic svg{width:28px;height:28px}
.rx-post-body{display:flex;flex:1;flex-direction:column;padding:20px 22px 22px}
.rx-post-meta{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--g500)}
.rx-post-meta em{font-style:normal;color:var(--brand)}
.rx-post h3{margin-top:10px;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.3;color:var(--g900)}
.rx-post-body > p:not(.rx-post-meta){margin:10px 0 16px;font-size:14px;line-height:1.55;color:var(--g600)}
.rx-post-body > b{margin-top:auto;font-size:14px;font-weight:600;color:var(--brand)}
.rx-post-body > b span{display:inline-block;transition:transform .25s}
.rx-post:hover .rx-post-body > b span{transform:translateX(4px)}

/* compare: vs hero */
.rx-vs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:start;gap:10px;padding:28px;border-radius:26px;background:radial-gradient(circle,rgba(0,24,255,.1) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(160deg,#f7f8ff,#eef0fb);border:1px solid #e4e6f5;box-shadow:0 50px 70px -50px rgba(13,44,115,.45)}
.rx-vs-side{display:flex;flex-direction:column;align-items:center;text-align:center}
.rx-vs-side > b{margin-top:14px;font-size:17px;font-weight:700;color:var(--g900)}
.rx-vs-tile{position:relative;display:grid;place-items:center;width:124px;height:124px;border-radius:28px;perspective:600px}
.rx-vs-tile.z{background:linear-gradient(150deg,#eef0ff,#dfe3ff);box-shadow:inset 0 0 0 1px #c9ceff}
.rx-vs-tile.o{background:linear-gradient(150deg,#f5f5f7,#e7e7ec);box-shadow:inset 0 0 0 1px var(--g200);animation:rxTilt 6s ease-in-out infinite}
.rx-vs-tile.o i{display:grid;place-items:center;min-width:70px;height:70px;padding:0 10px;border-radius:18px;background:var(--oc);color:#fff;font:700 22px/1 var(--sans);font-style:normal;box-shadow:0 16px 26px -12px color-mix(in srgb,var(--oc) 70%,transparent);filter:saturate(.75)}
@keyframes rxTilt{0%,100%{transform:rotateY(-10deg)}50%{transform:rotateY(10deg)}}
.rx-vs-cp{--cs:66px;position:relative!important;left:auto!important;top:auto!important;transform:none!important}
.rx-vs-mid{display:grid;place-items:center;height:124px}
.rx-vs-mid span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--g200);font:700 15px/1 var(--sans);color:var(--g700);box-shadow:0 10px 20px -12px rgba(13,44,115,.4);animation:rxPulse 2.4s ease-in-out infinite}
@keyframes rxPulse{50%{box-shadow:0 0 0 8px rgba(0,24,255,.08),0 10px 20px -12px rgba(13,44,115,.4)}}
.rx-vs-side ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;width:100%}
.rx-vs-side li{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--g200);font-size:12.5px;font-weight:600;line-height:1.35;color:var(--g800);text-align:left;opacity:0;transform:translateY(8px);transition:opacity .5s ease calc(var(--k) * .15s + .4s),transform .5s ease calc(var(--k) * .15s + .4s)}
.rx-vs.in li{opacity:1;transform:none}
.rx-vs-side li em{display:block;margin-bottom:3px;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.rx-vs-side.z li{border-color:#c9ceff;background:#f7f8ff}
.rx-vs-side.z li em{color:var(--brand)}
.rx-vs-side.o li{color:var(--g600)}

/* compare table */
.rx-table-wrap{margin-top:var(--block-y);overflow-x:auto;border-radius:20px;border:1px solid var(--g200);background:#fff;box-shadow:0 24px 48px -36px rgba(13,44,115,.35)}
.rx-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.rx-table th,.rx-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--g100);line-height:1.5}
.rx-table thead th{position:sticky;top:0;background:var(--g50);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g600)}
.rx-table thead th.z{background:var(--brand);color:#fff}
.rx-table tbody th{font-weight:600;color:var(--g900);width:28%}
.rx-table td{color:var(--g600)}
.rx-table td.z{background:#f5f6ff;color:var(--g900);font-weight:600;box-shadow:inset 1px 0 0 #dfe3ff,inset -1px 0 0 #dfe3ff}
.rx-table tbody tr:last-child > *{border-bottom:0}
.rx-table tbody tr{transition:background-color .2s}
.rx-table tbody tr:hover{background:#fafbff}
.rx-mark{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:50%;font-style:normal;font-size:11px;font-weight:700;vertical-align:1px}
.yes .rx-mark{background:#eaf8ef;color:#15803d}
.no .rx-mark{background:#fdecec;color:#c02b30}
.rx-table-note{margin:14px 4px 0;font-size:12.5px;color:var(--g500)}

/* verdict */
.rx-verdict{padding-top:var(--sec-y)}
.rx-verdict figure{position:relative;margin:0;padding:clamp(34px,5vw,64px);border-radius:28px;overflow:hidden;color:#fff;background:radial-gradient(600px 300px at 15% 0%,rgba(0,24,255,.45),transparent 70%),linear-gradient(#0b0a22,#07061a)}
.rx-verdict figure::after{content:"\201C";position:absolute;right:30px;top:-40px;font:700 240px/1 Georgia,serif;color:rgba(143,157,255,.14)}
.rx-verdict-eb{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8f9dff}
.rx-verdict blockquote{position:relative;margin:14px 0 0;max-width:30ch;font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1.2;letter-spacing:-.015em}

/* case studies */
.rx-cases-3d{position:relative;height:380px;perspective:1100px}
.rx-case-tile{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;justify-content:flex-end;width:230px;height:170px;margin:-85px 0 0 -115px;padding:22px;border-radius:22px;color:#fff;
  background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%);box-shadow:0 30px 50px -24px rgba(0,24,255,.6),inset 0 1px 0 rgba(255,255,255,.3);
  transform:rotateX(16deg) rotateY(-18deg) translate3d(calc(var(--k) * 150px - 80px),calc(var(--k) * 60px - 40px),calc(var(--k) * -60px));animation:rxFloat 5s ease-in-out infinite;animation-delay:calc(var(--k) * -1.6s)}
.rx-case-tile:nth-child(2){background:linear-gradient(150deg,#fff,#eef0ff);color:var(--g900);box-shadow:0 30px 50px -24px rgba(13,44,115,.45),inset 0 0 0 1px #dfe3ff}
.rx-case-tile b{font-size:52px;font-weight:700;line-height:1;letter-spacing:-.03em}
.rx-case-tile span{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.rx-cases-floor{position:absolute;left:10%;right:10%;bottom:30px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(13,44,115,.22),transparent 70%)}
.rx-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:var(--block-y)}
.rx-story{display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);border-radius:24px;background:#fff;border:1px solid var(--g200);box-shadow:0 24px 44px -34px rgba(13,44,115,.4)}
.rx-story-seg{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.rx-story-seg svg{width:16px;height:16px;color:var(--brand)}
.rx-story-n{display:block;margin-top:18px;font-size:clamp(48px,5vw,68px);font-weight:600;line-height:1;letter-spacing:-.03em;background:linear-gradient(90deg,#0018ff,#5a52ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rx-story-top em{display:block;margin-top:6px;font-style:normal;font-size:14px;font-weight:600;color:var(--g700)}
.rx-story > p{margin:18px 0 0;font-size:15.5px;line-height:1.6;color:var(--g600)}
.rx-story-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.rx-story-foot span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--g50);border:1px solid var(--g150);font-size:12px;font-weight:600;color:var(--g700)}
.rx-story-foot svg{width:13px;height:13px;fill:none;stroke:#22a55a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* FAQ page */
.rx-faq-sec{padding-top:clamp(28px,4vw,48px)}
.rx-faq-inner{max-width:880px}
.rx-faq .mx-q[hidden]{display:none}
.mx-q.rx-hit{border-color:#aeb6ff;box-shadow:0 0 0 4px rgba(0,24,255,.08)}

/* ROI calculator */
.rx-roi-sec{padding-top:clamp(24px,3vw,40px)}
.rx-roi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);overflow:hidden;border-radius:28px;border:1px solid var(--g200);background:#fff;box-shadow:0 40px 70px -50px rgba(13,44,115,.5)}
.rx-roi-in{display:grid;gap:30px;padding:clamp(28px,4vw,48px)}
.rx-slider-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rx-slider label{font-size:15px;font-weight:600;color:var(--g800)}
.rx-slider output{font-size:24px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.rx-slider input[type=range]{--v:50%;width:100%;height:28px;margin:12px 0 4px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.rx-slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#5a52ff,#0018ff) 0/var(--v) 100% no-repeat,var(--g100)}
.rx-slider input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--g100)}
.rx-slider input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:linear-gradient(90deg,#5a52ff,#0018ff)}
.rx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 4px 12px -4px rgba(0,24,255,.6);transition:transform .15s}
.rx-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.rx-slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.rx-slider input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
.rx-slider-f{display:flex;justify-content:space-between;font-size:12px;color:var(--g500)}
.rx-roi-out{position:relative;display:flex;flex-direction:column;padding:clamp(28px,4vw,48px);color:#fff;background:radial-gradient(500px 280px at 20% 0%,rgba(0,24,255,.5),transparent 70%),linear-gradient(#0b0a22,#07061a)}
.rx-roi-label{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8f9dff}
.rx-roi-out > b{margin-top:10px;font-size:clamp(48px,6vw,80px);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rx-leak{position:relative;height:92px;margin-top:22px}
.rx-leak-pipe{height:16px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.rx-leak-pipe em{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#8f9dff,#e5484d);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.rx-leak-drops i{position:absolute;top:18px;left:calc(8% + var(--k) * 13%);width:8px;height:12px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:#e5484d;opacity:0;animation:rxDrip 2.4s ease-in infinite;animation-delay:calc(var(--k) * .33s)}
.rx-roi-out[data-level="0"] .rx-leak-drops i{animation-play-state:paused;opacity:0}
@keyframes rxDrip{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(64px) scale(1);opacity:0}}
.rx-roi-break{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 0}
.rx-roi-break div{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(143,157,255,.2)}
.rx-roi-break dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#b9bbe0}
.rx-roi-break dd{margin:4px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.rx-roi-note{margin:16px 0 0;font-size:13px;color:#b9bbe0}
.rx-roi-cta{margin-top:auto;padding-top:22px}
.rx-roi-foot{max-width:760px;margin:22px auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--g600)}
.rx-formula{display:block;margin-top:8px;font-size:12.5px;color:var(--g500)}

/* pricing */
.rx-toggle{display:inline-flex;gap:4px;margin-top:26px;padding:4px;border-radius:999px;background:var(--g100);border:1px solid var(--g200)}
.rx-toggle button{height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:600 14px/1 var(--sans);color:var(--g600);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.rx-toggle button[aria-checked="true"]{background:#fff;color:var(--g900);box-shadow:0 4px 10px -4px rgba(13,44,115,.3)}
.rx-toggle em{margin-left:6px;padding:3px 7px;border-radius:999px;background:#eaf8ef;color:#15803d;font-style:normal;font-size:11px}
.rx-perks{margin-top:18px}
.rx-plans-sec{padding-top:clamp(28px,4vw,48px)}
.rx-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.rx-plan{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:24px;background:#fff;border:1px solid var(--g200);transition:transform .3s,box-shadow .3s}
.rx-plan:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(13,44,115,.45)}
.rx-plan-pop{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 30px 60px -34px rgba(0,24,255,.55);background:linear-gradient(180deg,#f7f8ff,#fff 40%)}
.rx-plan-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rx-plan h3{font-family:var(--display);font-size:22px;font-weight:600}
.rx-badge{padding:4px 10px;border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:600}
.rx-plan-d{min-height:66px;margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--g600)}
.rx-price{display:flex;align-items:flex-start;margin-top:16px;font-size:48px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--g900);font-variant-numeric:tabular-nums}
.rx-price sup{margin:6px 2px 0 0;font-size:22px}
.rx-price-custom{font-size:40px}
.rx-per{min-height:20px;margin:6px 0 18px;font-size:13px;color:var(--g500)}
.rx-plan .btn{width:100%;height:44px;font-size:15px}
.rx-inc{margin:22px 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500)}
.rx-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rx-plan li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--g700)}
.rx-plan li svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1100px){.rx-posts{grid-template-columns:repeat(2,minmax(0,1fr))}.rx-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.rx-roi,.rx-stories{grid-template-columns:minmax(0,1fr)}.rx-stack,.rx-cases-3d{height:300px}}
@media (max-width:640px){
  .rx-posts,.rx-plans{grid-template-columns:minmax(0,1fr)}
  .rx-search{min-width:0;width:100%}
  .rx-vs{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);padding:18px 14px}
  .rx-vs-tile{width:92px;height:92px}
  .rx-vs-cp{--cs:48px}
  .rx-vs-tile.o i{min-width:52px;height:52px;font-size:17px}
  .rx-vs-mid{height:92px}
  .rx-vs-mid span{width:38px;height:38px;font-size:12px}
  .rx-vs-side li{padding:8px 9px;font-size:11.5px}
  .rx-stack-card{width:240px;height:160px;margin:-80px 0 0 -120px;transform:rotateX(18deg) rotateZ(-8deg) translate3d(calc(var(--k) * 20px),calc(var(--k) * -24px),calc(var(--k) * 30px))}
  .rx-case-tile{width:180px;height:140px;margin:-70px 0 0 -90px;transform:rotateX(16deg) rotateY(-18deg) translate3d(calc(var(--k) * 90px - 50px),calc(var(--k) * 50px - 30px),calc(var(--k) * -40px))}
  .rx-case-tile b{font-size:40px}
  .rx-roi-break{grid-template-columns:minmax(0,1fr)}
  /* tables become stacked cards on phones */
  .rx-table-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  .rx-table{min-width:0}
  .rx-table thead{display:none}
  .rx-table,.rx-table tbody,.rx-table tr,.rx-table th,.rx-table td{display:block;width:auto}
  .rx-table tr{margin-bottom:12px;border-radius:16px;border:1px solid var(--g200);background:#fff;overflow:hidden}
  .rx-table tbody th{width:auto;padding:14px 16px;background:var(--g50);border-bottom:1px solid var(--g150)}
  .rx-table td{display:grid;grid-template-columns:40% minmax(0,1fr);gap:10px;padding:10px 16px}
  .rx-table td::before{content:attr(data-label);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
  .rx-table td.z{box-shadow:none}
  .rx-table td.z::before{color:var(--brand)}
  .rx-table td .rx-mark{justify-self:start}
  .rx-table td.yes,.rx-table td.no{grid-template-columns:40% auto minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.rx *,.rx *::before,.rx *::after{animation:none!important;transition:none!important}.rx-vs li{opacity:1;transform:none}}
/* ============ v81: Company pages ============ */
.co-sub{margin:14px auto 0;max-width:52ch}
/* founder quote in the About hero */
.co-quote{margin:26px 0 0;padding:22px 24px;border-radius:20px;background:#fff;border:1px solid var(--g200);box-shadow:0 24px 44px -34px rgba(13,44,115,.45);position:relative}
.co-quote::before{content:"\201C";position:absolute;right:18px;top:-18px;font:700 96px/1 Georgia,serif;color:rgba(0,24,255,.12)}
.co-quote blockquote{margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--g800)}
.co-quote figcaption{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--g700)}
.co-av{display:grid;place-items:center;flex:none;width:96px;height:96px;border-radius:50%;font-style:normal;font:700 30px/1 var(--sans);color:#fff;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 70%);box-shadow:0 18px 30px -14px color-mix(in srgb,var(--c) 70%,transparent),inset 0 2px 0 rgba(255,255,255,.35)}
.co-av.sm{width:34px;height:34px;font-size:12px;box-shadow:none}

/* globe */
.co-globe{position:relative;height:420px;display:grid;place-items:center;perspective:1000px}
.co-sphere{position:relative;width:280px;height:280px;border-radius:50%;transform-style:preserve-3d;
  background:radial-gradient(circle,rgba(0,24,255,.12) 1.2px,transparent 1.6px) 0 0/14px 14px,radial-gradient(circle at 35% 30%,#fff,#e8ebff 55%,#c9ceff 100%);
  box-shadow:inset -20px -30px 60px rgba(0,24,255,.18),0 40px 70px -40px rgba(13,44,115,.55);animation:coSpinBg 30s linear infinite}
@keyframes coSpinBg{to{background-position:280px 0,0 0}}
.co-sphere i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,24,255,.18)}
.co-sphere .m1{transform:rotateY(60deg)}
.co-sphere .m2{transform:rotateY(-60deg)}
.co-sphere .m3{transform:rotateY(90deg)}
.co-sphere .p{transform:rotateX(90deg)}
.co-sphere .p1{inset:0}
.co-sphere .p2{inset:14%;transform:rotateX(90deg) translateZ(64px)}
.co-sphere .p3{inset:14%;transform:rotateX(90deg) translateZ(-64px)}
.co-arcs{position:absolute;inset:0;pointer-events:none}
.co-arcs i{position:absolute;left:50%;top:50%;width:240px;height:110px;margin:-80px 0 0 -130px;border:2px dashed #8f9dff;border-bottom:0;border-radius:120px 120px 0 0;opacity:.8;animation:lcDash 1.6s linear infinite}
.co-arcs i + i{width:170px;height:80px;margin:-40px 0 0 -10px;transform:rotate(18deg)}
.co-pin{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 0 18px 4px color-mix(in srgb,var(--c) 55%,transparent);animation:coPin 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * .5s)}
.co-pin:nth-of-type(1){transform:translate(-128px,-76px)}
.co-pin:nth-of-type(2){transform:translate(30px,-50px)}
.co-pin:nth-of-type(3){transform:translate(96px,-6px)}
.co-pin b{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:5px 10px;border-radius:9px;background:#fff;border:1px solid var(--g200);box-shadow:0 10px 20px -12px rgba(13,44,115,.45);font-size:12px;font-weight:600;color:var(--g800);white-space:nowrap}
@keyframes coPin{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--c) 10%,transparent),0 0 24px 6px color-mix(in srgb,var(--c) 45%,transparent)}}
.co-globe-shadow{position:absolute;left:50%;bottom:34px;width:240px;height:36px;margin-left:-120px;border-radius:50%;background:radial-gradient(ellipse,rgba(13,44,115,.25),transparent 70%)}

/* team */
.co-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--block-y)}
.co-person{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 28px 30px;border-radius:24px;background:#fff;border:1px solid var(--g200);transition:transform .3s,box-shadow .3s,border-color .3s}
.co-person:hover{transform:translateY(-4px);border-color:#c9ceff;box-shadow:0 28px 50px -34px rgba(13,44,115,.45)}
.co-person-art{position:relative;display:grid;place-items:center;width:132px;height:132px}
.co-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed #aeb6ff;animation:pcSpin 16s linear infinite}
.co-person h3{margin-top:18px;font-family:var(--display);font-size:21px;font-weight:600}
.co-role{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.co-bio{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--g600)}
.co-li{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:8px 14px;border-radius:999px;border:1px solid var(--g200);font-size:13px;font-weight:600;color:var(--g800);transition:border-color .2s,color .2s;position:relative;top:14px}
.co-li:hover{border-color:#0a66c2;color:#0a66c2}
.co-li svg{width:15px;height:15px;color:#0a66c2}

/* offices with live clocks */
.co-offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:var(--block-y)}
.co-office{position:relative;overflow:hidden;padding:26px 26px 24px;border-radius:24px;background:#fff;border:1px solid var(--g200)}
.co-office::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%)}
.co-office-top{display:flex;justify-content:space-between;align-items:center}
.co-office-role{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.co-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--g500)}
.co-live i{width:7px;height:7px;border-radius:50%;background:#22a55a;animation:pcBeacon 1.6s ease-in-out infinite}
.co-office h3{margin-top:18px;font-family:var(--display);font-size:26px;font-weight:600}
.co-office > p{margin:4px 0 0;font-size:14px;color:var(--g500)}
.co-clock{position:absolute;right:26px;bottom:24px;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,#fff 60%,#f3f4ff);border:2px solid color-mix(in srgb,var(--c) 30%,#fff);box-shadow:0 12px 24px -14px rgba(13,44,115,.45)}
.co-clock i{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px;background:var(--g900)}
.co-clock .h{width:3px;height:20px;margin-left:-1.5px}
.co-clock .mi{width:2px;height:28px;margin-left:-1px}
.co-clock .s{width:1px;height:30px;margin-left:-.5px;background:var(--c)}
.co-clock b{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--c)}
.co-time{margin:26px 0 0!important;font-size:28px!important;font-weight:700;color:var(--g900)!important;font-variant-numeric:tabular-nums}

/* careers */
.co-orbit .mx-sat b{min-width:30px}
.co-apply{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:clamp(28px,4vw,48px);border-radius:28px;background:radial-gradient(500px 240px at 90% 0%,rgba(0,24,255,.1),transparent 70%),linear-gradient(160deg,#f7f8ff,#f2f2f4);border:1px solid var(--g200)}
.co-mail{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;background:#fff;border:1px solid var(--g200);box-shadow:0 18px 36px -24px rgba(13,44,115,.45);transition:transform .25s,border-color .25s}
.co-mail:hover{transform:translateY(-2px);border-color:#aeb6ff}
.co-mail-ic,.co-chan-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;color:#fff;background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%)}
.co-mail-ic svg,.co-chan-ic svg{width:22px;height:22px}
.co-mail em,.co-chan-card em{display:block;font-style:normal;font-size:12.5px;color:var(--g500)}
.co-mail b{display:block;font-size:17px;color:var(--g900)}
.co-mail i,.co-chan-card i{font-style:normal;color:var(--brand);transition:transform .2s}
.co-mail:hover i,.co-chan-card:hover i{transform:translateX(4px)}

/* contact */
.co-chan{display:grid;gap:10px;margin-top:26px;max-width:460px}
.co-chan-card{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--g200);text-align:left;font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.co-chan-card:hover{border-color:#aeb6ff;box-shadow:0 14px 28px -20px rgba(13,44,115,.45)}
.co-chan-card > span:nth-child(2){flex:1}
.co-chan-card b{display:block;font-size:15.5px;color:var(--g900)}
.co-form{position:relative;padding:clamp(24px,3vw,36px);border-radius:28px;background:#fff;border:1px solid var(--g200);box-shadow:0 50px 80px -50px rgba(13,44,115,.5)}
.co-form > h2{margin-top:10px;font-family:var(--display);font-size:clamp(24px,2.2vw,30px);font-weight:600}
.co-form-sub{margin:6px 0 0;font-size:14.5px;color:var(--g600)}
.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.co-wide{grid-column:1 / -1}
.co-field span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--g800)}
.co-field input,.co-field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--g200);background:var(--g50);font:500 14.5px/1.4 var(--sans);color:var(--g900);resize:vertical;transition:border-color .2s,box-shadow .2s,background-color .2s}
.co-field input:focus,.co-field textarea:focus{outline:0;background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,24,255,.12)}
.co-field.bad input,.co-field.bad textarea{border-color:#e5484d;background:#fff}
.co-err{display:block;min-height:16px;margin-top:4px;font-style:normal;font-size:12px;color:#c02b30}
.co-send{margin-top:6px;height:48px;padding:0 22px;font-size:16px}
.co-send span{display:inline-block;margin-left:6px;transition:transform .2s}
.co-send:hover span{transform:translateX(4px)}
.co-note{margin:14px 0 0;font-size:13px;color:var(--g500)}
.co-note a{color:var(--brand);font-weight:600}
.co-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;border-radius:inherit;background:rgba(255,255,255,.97);text-align:center;animation:lcIn .35s ease-out}
.co-done[hidden]{display:none}
.co-done-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#22a55a;color:#fff;box-shadow:0 0 0 10px rgba(34,165,90,.12)}
.co-done-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.co-done h3{font-family:var(--display);font-size:24px;font-weight:600}
.co-done p{margin:0;max-width:36ch;font-size:14.5px;line-height:1.55;color:var(--g600)}

@media (max-width:1000px){.co-team,.co-offices{grid-template-columns:minmax(0,1fr)}.co-apply{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.co-grid{grid-template-columns:minmax(0,1fr)}.co-globe{height:340px}.co-sphere{width:220px;height:220px}.co-pin:nth-of-type(1){transform:translate(-96px,-60px)}.co-pin:nth-of-type(3){transform:translate(70px,0)}.co-arcs i{width:180px;margin-left:-100px}.co-mail b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.cx *,.cx *::before,.cx *::after{animation:none!important;transition:none!important}}

/* v98: About — a single office card, centred */
.co-offices-one{grid-template-columns:minmax(0,420px);justify-content:center}
/* ============ v82: bespoke 3D vignettes + per-page section layouts ============ */
.mx{--acc:#0018ff;--acc2:#5a52ff}
.mx .lum-eyebrow::before{background:linear-gradient(90deg,var(--acc),var(--acc2))}

/* ---- vignette stage ---- */
.vg{--ps:paused;position:relative;height:250px;border-radius:16px;overflow:hidden;perspective:1000px;isolation:isolate;
  background:radial-gradient(circle,rgba(20,24,80,.07) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(180deg,#fbfbfe,#f3f4fb);border:1px solid var(--g150)}
.in .vg,.vg.on{--ps:running}
.vg-glow{position:absolute;left:50%;top:56%;width:78%;height:70%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 16%,transparent),transparent);filter:blur(6px);z-index:-1}
.vg::after{content:"";position:absolute;left:50%;bottom:14px;width:58%;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(13,24,90,.16),transparent);z-index:-1}
.vg-3d{position:absolute;left:50%;top:50%;width:300px;height:190px;margin:-95px 0 0 -150px;transform-style:preserve-3d;
  transform:rotateX(7deg) rotateY(var(--ry,-8deg)) scale(1.1);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lc-card:hover .vg-3d,.vz-row:hover .vg-3d,.vw-window:hover .vg-3d{transform:rotateX(0deg) rotateY(0deg) scale(1.13)}
.vg-lg{height:100%;min-height:300px;border:0;background:transparent}
.vg-lg .vg-3d{transform:scale(1.42) rotateX(6deg) rotateY(var(--ry,-7deg))}
.vg-lg:hover .vg-3d{transform:scale(1.46) rotateX(0deg) rotateY(0deg)}

/* primitives */
.vp{position:absolute;padding:10px 11px;border-radius:12px;background:#fff;color:var(--g800);transform:translateZ(var(--z,0px));
  box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(20,24,80,.06),0 5px 0 -1px #e3e6f5,0 22px 34px -20px rgba(13,30,110,.42);
  animation:vgIn .7s cubic-bezier(.2,.7,.2,1) var(--t,0s) both;animation-play-state:var(--ps)}
@keyframes vgIn{from{opacity:0;transform:translateZ(var(--z,0px)) translateY(14px)}}
.vcap{display:block;margin-bottom:6px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.vsk{display:block;height:6px;width:var(--w);margin:5px 0;border-radius:3px;background:#eceef6}
.vchip{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;white-space:nowrap;font-size:11px;font-weight:700;
  background:#fff;color:var(--g700);transform:translateZ(var(--z,46px));box-shadow:0 0 0 1px rgba(20,24,80,.07),0 12px 22px -12px rgba(13,30,110,.5);
  animation:vgPop .55s cubic-bezier(.3,1.5,.5,1) var(--t,.9s) both;animation-play-state:var(--ps)}
.vchip svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vchip.brand{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.vchip.hot{background:#fff1f0;color:#c02b30}
.vchip.good{background:#eafbf1;color:#15803d}
.vchip.warn{background:#fff6e8;color:#0011b3}
.vchip.bad{background:#fff0f0;color:#c02b30}
.vchip.warn svg,.vchip.bad svg,.vflag svg{fill:none;stroke-width:1.8}
@keyframes vgPop{from{opacity:0;transform:translateZ(var(--z,46px)) scale(.6)}}
.vmono{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;background:var(--c);color:#fff;font-style:normal;font-size:9px;font-weight:800}
.vmono.vbig{width:34px;height:34px;border-radius:10px;font-size:12px}
.vp .lc-av{width:22px;height:22px;font-size:8.5px}
.lc-av.sm{width:18px;height:18px;font-size:7.5px}
.vrow{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid #f0f1f6;font-size:11.5px;animation:vgFade .5s ease var(--t,0s) both;animation-play-state:var(--ps)}
.vrow span{color:var(--g500)}
.vrow b{font-weight:700;color:var(--g900);text-align:right}
@keyframes vgFade{from{opacity:0}}
.vbtns{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.vbtn{position:relative;display:inline-grid;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:700;background:#f1f2f8;color:var(--g700)}
.vbtn.sm{padding:3px 8px;font-size:8.5px}
.vbtn.go{background:var(--acc);color:#fff;overflow:hidden}
.vbtn.go em{grid-area:1/1;font-style:normal;text-align:center}
.vbtn.go em:last-child{opacity:0}
.in .vbtn.go,.vg.on .vbtn.go{animation:vgBtn 6s ease infinite 1.6s}
.in .vbtn.go em:first-child,.vg.on .vbtn.go em:first-child{animation:vgOut 6s ease infinite 1.6s}
.in .vbtn.go em:last-child,.vg.on .vbtn.go em:last-child{animation:vgOn 6s ease infinite 1.6s}
@keyframes vgBtn{0%,38%{background:var(--acc);transform:none}42%{transform:scale(.92)}46%,88%{background:#16a34a;transform:none}94%,100%{background:var(--acc)}}
@keyframes vgOut{0%,42%{opacity:1}46%,88%{opacity:0}94%{opacity:1}}
@keyframes vgOn{0%,42%{opacity:0}46%,88%{opacity:1}94%{opacity:0}}
.vcur{position:absolute;right:30px;bottom:6px;width:18px;height:18px;fill:#1d1d20;stroke:#fff;stroke-width:1.2;transform:translateZ(60px);filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));opacity:0}
.in .vcur,.vg.on .vcur{animation:vgCur 6s ease infinite 1.2s}
@keyframes vgCur{0%{opacity:0;transform:translateZ(60px) translate(60px,40px)}14%{opacity:1}36%{transform:translateZ(60px) translate(0,0)}42%{transform:translateZ(60px) scale(.85)}46%{transform:translateZ(60px)}80%{opacity:1}92%,100%{opacity:0;transform:translateZ(60px)}}
.vring{--v:80;position:relative;flex:none;width:58px;height:58px}
.vring svg{width:100%;height:100%;transform:rotate(-90deg)}
.vring circle{fill:none;stroke:#eef0f7;stroke-width:6}
.vring .fg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:calc(163.4 * (1 - var(--v) / 100));animation:vgRing 1.4s cubic-bezier(.2,.7,.2,1) .3s both;animation-play-state:var(--ps)}
.vring.warn .fg{stroke:#0018ff}
.vring.sm{width:48px;height:48px;margin:2px auto 4px}
@keyframes vgRing{from{stroke-dashoffset:163.4}}
.vring b{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font-size:17px;font-weight:800;color:var(--g900);line-height:1}
.vring.sm b{font-size:12px}
.vring b small{display:block;font-size:7.5px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:.08em}
.vbar{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:7px;margin-top:6px;font-size:10.5px;font-weight:600;color:var(--g600)}
.vbar i{display:block;height:5px;border-radius:3px;background:#eef0f7;overflow:hidden}
.vbar em{display:block;width:var(--v);height:100%;border-radius:3px;background:linear-gradient(90deg,var(--acc2),var(--acc));animation:vgW 1s cubic-bezier(.2,.7,.2,1) var(--t,.3s) both;animation-play-state:var(--ps)}
.vbar b{font-size:10.5px;color:var(--g800)}
@keyframes vgW{from{width:0}}
.vbox{display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:4px;border:1.5px solid #cfd3e4;background:#fff}
.vbox svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:0}
.vdot{flex:none;width:7px;height:7px;border-radius:50%;background:#22a55a}
.vdot.warn{background:#0018ff}.vdot.bad{background:#e5484d}
.vok{display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:50%;background:#e8f8ee;color:#16a34a}
.vok svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.vpill{display:inline-block;padding:3px 7px;border-radius:999px;font-size:8.5px;font-weight:700}
.vpill.warn{background:#fff3e2;color:#0011b3}
.va-logo{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--acc),var(--acc2));overflow:hidden}
.va-logo img{width:78%;filter:brightness(0) invert(1)}
.vsrc{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;font-weight:600;color:var(--g500)}
.vsrc svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8}
.vx-big{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--g900)}
.vx-sub{display:block;margin-top:2px;font-size:8.5px;color:var(--g500)}
.vp svg{flex:none}

/* mail */
.vm-h{display:flex;align-items:center;gap:7px}
.vm-h div{display:flex;flex-direction:column}
.vm-h b{font-size:12px;font-weight:700}
.vm-h span{font-size:10.5px;color:var(--g500)}
.vm-s{margin:8px 0 2px;font-size:12.5px;font-weight:700;color:var(--g900)}
.vm-l{margin:5px 0;font-size:11.5px;line-height:1.5;color:var(--g600)}
.vm mark{padding:0 2px;border-radius:3px;color:var(--g900);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,#fff) 0 0) no-repeat 0 0/0% 100%;animation:vgMark .9s ease var(--t,.8s) forwards;animation-play-state:var(--ps)}
.vm mark.bad{background-image:linear-gradient(90deg,#ffd9d9 0 0)}
@keyframes vgMark{to{background-size:100% 100%}}
.vm-att{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 7px;border-radius:6px;background:#f3f4fa;font-size:8.5px;font-weight:700;color:var(--g700)}
.vm-att svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8}
/* score */
.vs-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.vs-name{display:block;font-size:10.5px;font-weight:700}
/* rank */
.vr-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;font-size:11.5px;animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps)}
.vr-row em{width:10px;font-style:normal;font-weight:800;color:var(--g400)}
.vr-row b{flex:1;font-weight:600}
.vr-row.top{background:color-mix(in srgb,var(--acc) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 25%,#fff)}
.vr-row.top em{color:var(--acc)}
.vr-s{min-width:26px;padding:2px 0;border-radius:6px;text-align:center;font-weight:800;font-size:9px;color:#fff;background:color-mix(in srgb,var(--acc) calc(var(--v) * 1%),#c9ccda)}
/* why */
.vq-card{background:linear-gradient(160deg,#fff,#f6f7ff)}
.vq{display:block;font-size:12px;font-weight:700;line-height:1.4;color:var(--g900)}
/* next step */
.vn-task{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:9px;background:#f7f8fc}
.vn-task div{display:flex;flex-direction:column;gap:2px}
.vn-task b{font-size:11px}
.vn-task span{font-size:8.5px;color:var(--g500)}
.vn-why{display:flex;align-items:center;gap:5px;margin:7px 0 0;font-size:9px;font-weight:600;color:var(--acc)}
.vn-why svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}
/* fields */
.vf-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.vf-h div{display:flex;flex-direction:column}
.vf-h b{font-size:11px}
.vf-h span{font-size:8.5px;color:var(--g500)}
.vf-row{position:relative;display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid #f0f1f6;font-size:11.5px}
.vf-row span{color:var(--g500)}
.vf-row b{font-weight:700;color:var(--g900);clip-path:inset(0 100% 0 0);animation:vgType .6s steps(12) var(--t) forwards;animation-play-state:var(--ps)}
@keyframes vgType{to{clip-path:inset(0 0 0 0)}}
.vspark{position:absolute;right:-6px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--acc);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:vgSpark .8s ease var(--t) both;animation-play-state:var(--ps)}
@keyframes vgSpark{0%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}100%{opacity:0;transform:scale(.4)}}
/* people graph */
.vg-lines{position:absolute;inset:0;width:300px;height:190px;overflow:visible}
.vg-lines line{stroke:color-mix(in srgb,var(--acc) 45%,#fff);stroke-width:1.4;stroke-dasharray:4 4;animation:vgFade .6s ease var(--t) both,vgDash 1.2s linear infinite;animation-play-state:var(--ps)}
@keyframes vgDash{to{stroke-dashoffset:-16}}
.vg-center{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.vg-center b{font-size:11px}
.vg-center span{font-size:8px;color:var(--g500)}
.vg-node{position:absolute;display:flex;align-items:center;gap:5px;padding:4px 8px 4px 4px;border-radius:999px;background:#fff;transform:translateZ(24px);
  box-shadow:0 0 0 1px rgba(20,24,80,.07),0 10px 18px -10px rgba(13,30,110,.5);font-size:8.5px;font-weight:700;color:var(--g700);animation:vgPop .5s ease var(--t) both;animation-play-state:var(--ps)}
.vg-node.new{box-shadow:0 0 0 2px var(--acc),0 10px 18px -10px rgba(13,30,110,.5)}
/* calendar */
.vc-days,.vc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.vc-days span{text-align:center;font-size:8px;font-weight:700;color:var(--g500);padding-bottom:3px}
.vc-grid i{height:26px;border-radius:6px;background:#f6f7fc;border:1px solid #eef0f6}
.vc-grid i.busy{background:repeating-linear-gradient(135deg,#eef0f6 0 4px,#fff 4px 8px)}
.vc-grid i.pick{animation:vgPick 5s ease infinite 1s;animation-play-state:var(--ps)}
@keyframes vgPick{0%,15%{background:#f6f7fc}25%,90%{background:var(--acc);border-color:var(--acc);box-shadow:0 8px 14px -6px color-mix(in srgb,var(--acc) 70%,transparent);transform:scale(1.1)}100%{background:#f6f7fc}}
/* brief */
.vb-back{background:#f1f2fa;transform:translateZ(-20px) rotate(4deg)}
.vb-h{display:flex;align-items:center;gap:6px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid #f0f1f6}
.vb-h svg{width:14px;height:14px;fill:none;stroke:var(--acc);stroke-width:1.8}
.vb-h b{font-size:10.5px}
.vb-row{display:flex;flex-direction:column;padding:4px 0 4px 8px;margin:4px 0;border-left:2px solid color-mix(in srgb,var(--acc) 35%,#fff);animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps)}
.vb-row em{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.vb-row b{font-size:11.5px}
.vb-foot{display:block;margin-top:6px;font-size:8px;color:var(--g500)}
/* kanban */
.vk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vk-col{min-height:112px;padding:6px;border-radius:9px;background:#f5f6fb}
.vk-card{margin-top:5px;padding:6px 7px;border-radius:7px;background:#fff;box-shadow:0 1px 0 #e6e8f3,0 4px 8px -6px rgba(13,30,110,.3)}
.vk-card b{display:block;font-size:11px}
.vk-card span{font-size:10.5px;color:var(--g500)}
.vk-card.mover{position:relative;z-index:2;box-shadow:0 0 0 1.5px var(--acc),0 10px 16px -8px rgba(13,30,110,.5);animation:vgMove 6s cubic-bezier(.5,0,.3,1) infinite 1s;animation-play-state:var(--ps)}
@keyframes vgMove{0%,20%{transform:none}40%,85%{transform:translate(calc(100% + 18px),38px)}100%{transform:none}}
/* mismatch */
.vx.gray{background:#f7f7fa}
.vx.warn{box-shadow:0 0 0 1.5px #0018ff,0 5px 0 -1px #f4e1bf,0 22px 34px -20px rgba(120,70,0,.45)}
.vx.warn .vx-big{color:#0011b3}
/* risk */
.vk-risk{display:grid;grid-template-columns:66px 34px 1fr 34px;align-items:center;gap:7px;padding:7px 4px;border-top:1px solid #f0f1f6;font-size:11px;animation:vgFade .5s ease var(--t) both;animation-play-state:var(--ps)}
.vk-risk span{color:var(--g500)}
.vk-risk i{height:6px;border-radius:3px;background:#eef0f7;overflow:hidden}
.vk-risk em{display:block;height:100%;width:var(--v);border-radius:3px;animation:vgW 1s ease var(--t) both;animation-play-state:var(--ps)}
.vk-risk strong{padding:2px 0;border-radius:999px;text-align:center;font-size:8px}
.lv-high em{background:#e5484d}.lv-high strong{background:#fff0f0;color:#c02b30}
.lv-med em{background:#0018ff}.lv-med strong{background:#fff6e8;color:#0011b3}
.lv-low em{background:#22a55a}.lv-low strong{background:#eafbf1;color:#15803d}
.lv-high{animation:vgFade .5s ease var(--t) both,vgRow 3s ease infinite 1.5s!important;animation-play-state:var(--ps)!important;border-radius:8px}
@keyframes vgRow{0%,100%{background:transparent}50%{background:#fff4f4}}
/* alerts */
.va{padding:9px 10px}
.va-h{display:flex;align-items:center;gap:6px;font-size:9.5px}
.va-h .va-logo{width:16px;height:16px;border-radius:5px}
.va-h em{margin-left:auto;font-style:normal;font-size:8px;color:var(--g500)}
.va p{margin:6px 0 0;font-size:10.5px;line-height:1.4;color:var(--g600)}
.va p b{display:block;font-size:11.5px;color:var(--g900)}
.va .vbtns{justify-content:flex-start;margin-top:6px}
/* timeline */
.vt{position:relative;height:96px;margin-top:4px}
.vt-rail{position:absolute;left:10px;right:10px;top:22px;height:3px;border-radius:2px;background:#eceef6}
.vt-rail b{display:block;height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--acc2),var(--acc));transform-origin:left;animation:vgGrow 2s cubic-bezier(.2,.7,.2,1) .3s both;animation-play-state:var(--ps)}
@keyframes vgGrow{from{transform:scaleX(0)}}
.vt-ev{position:absolute;left:var(--x);top:8px;width:60px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;animation:vgPop .5s ease var(--t) both;animation-play-state:var(--ps)}
.vt-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--acc);box-shadow:0 0 0 1px rgba(20,24,80,.08),0 6px 12px -6px rgba(13,30,110,.4)}
.vt-dot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-ev b{margin-top:4px;font-size:10.5px}
.vt-ev em{font-style:normal;font-size:8px;color:var(--g500)}
/* split */
.vsp.r{text-align:center}
/* renewal */
.vr-h{display:flex;align-items:center;gap:8px}
.vr-h div{display:flex;flex-direction:column}
.vr-h b{font-size:10.5px}
.vr-h span{font-size:8.5px;color:var(--g500)}
.vrn{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid #f0f1f6}
.vrn .vring{width:64px;height:64px}
.vrn-l p{margin:6px 0 0;font-size:9.5px;line-height:1.4;color:var(--g700)}
/* tone */
.vto{background:transparent;box-shadow:none;padding:0}
.vto-b{max-width:186px;margin-bottom:7px;padding:8px 11px;border-radius:12px 12px 12px 4px;background:#fff;font-size:11px;font-weight:600;color:var(--g700);
  box-shadow:0 0 0 1px rgba(20,24,80,.06),0 10px 18px -12px rgba(13,30,110,.45);animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps)}
.vto-b.bad{color:#b42318;box-shadow:0 0 0 1.5px #ffb4b4,0 10px 18px -12px rgba(120,20,20,.45)}
.vto-meter{height:7px;border-radius:4px;background:linear-gradient(90deg,#22a55a,#0018ff,#e5484d);position:relative}
.vto-meter i{position:absolute;top:-3px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--g800);left:12%;animation:vgSlide 2.6s cubic-bezier(.4,0,.2,1) 1s forwards;animation-play-state:var(--ps)}
@keyframes vgSlide{to{left:84%}}
.vto-lab{display:flex;justify-content:space-between;margin-top:5px;font-size:7.5px;font-weight:600;color:var(--g500)}
/* chart */
.vch{display:flex;align-items:flex-end;gap:7px;height:70px;margin-top:6px}
.vch-bar{flex:1;height:var(--h);position:relative;animation:vgUp .9s cubic-bezier(.2,.7,.2,1) var(--t) both;animation-play-state:var(--ps);transform-origin:bottom}
.vch-bar i{position:absolute;inset:0;border-radius:4px 4px 1px 1px;background:linear-gradient(#dfe3ff,#b9c1ff)}
.vch-bar.hl i{background:linear-gradient(var(--acc2),var(--acc));box-shadow:0 8px 14px -6px color-mix(in srgb,var(--acc) 70%,transparent)}
.vch-bar.gap i{background:repeating-linear-gradient(135deg,#fde4c4 0 3px,#fff 3px 6px);border:1px dashed #0018ff}
@keyframes vgUp{from{transform:scaleY(0)}}
/* voice */
.vv-orb{position:absolute;left:112px;top:8px;width:76px;height:76px;border-radius:50%;transform:translateZ(30px);display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff 0,color-mix(in srgb,var(--acc2) 60%,#fff) 30%,var(--acc) 75%);box-shadow:0 18px 30px -12px color-mix(in srgb,var(--acc) 70%,transparent),inset 0 -6px 12px rgba(0,0,30,.25)}
.vv-orb::before,.vv-orb::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--acc) 40%,transparent);animation:vgPulse 2.4s ease-out infinite;animation-play-state:var(--ps)}
.vv-orb::after{animation-delay:1.2s}
@keyframes vgPulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.vv-orb span{display:grid;place-items:center;color:#fff}
.vv-orb svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
.vv-wave{display:flex;align-items:center;gap:2px;height:22px}
.vv-wave i{flex:1;height:30%;border-radius:2px;background:linear-gradient(var(--acc2),var(--acc));animation:mxWave 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -.11s);animation-play-state:var(--ps)}
.vv-q{margin:6px 0 0;font-size:10.5px;font-weight:700;text-align:center}
/* search */
.vse-bar{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:9px;background:#f5f6fb;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 35%,#fff)}
.vse-bar svg{width:12px;height:12px;fill:none;stroke:var(--acc);stroke-width:2}
.vtype{overflow:hidden;white-space:nowrap;font-size:10px;font-weight:600;width:0;border-right:1.5px solid var(--acc);animation:vgTyping 1s steps(var(--n)) .3s forwards;animation-play-state:var(--ps)}
@keyframes vgTyping{to{width:calc(var(--n) * 1ch)}}
.vse-r{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;padding:7px 4px;border-top:1px solid #f0f1f6;font-size:11px;animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps)}
.vse-r:first-of-type{margin-top:5px}
.vse-r span{justify-self:end;color:var(--g500);font-size:8.5px}
/* draft */
.vd-h{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid #f0f1f6;font-size:9.5px}
.vd-h span{width:16px;color:var(--g500)}
.vd-body{margin:7px 0 2px;font-size:9.5px;line-height:1.45}
.vtype2{display:inline-block;clip-path:inset(0 100% 0 0);animation:vgType 1.6s steps(30) .6s forwards;animation-play-state:var(--ps)}
.vsk.t{animation:vgFade .5s ease 2s both;animation-play-state:var(--ps)}
/* sync */
.vsy-h{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:10px}
.vsy-h .vmono{width:20px;height:20px;font-size:7.5px;border-radius:6px}
.vsy-h em{margin-left:auto;font-style:normal;font-size:8px;color:var(--g500)}
.vdiff{display:flex;align-items:center;gap:7px;padding:5px 0;border-top:1px solid #f0f1f6;font-size:11px;animation:vgFade .5s ease var(--t,.2s) both;animation-play-state:var(--ps)}
.vdiff span{flex:1;color:var(--g500)}
.vdiff s{color:var(--g400)}
.vdiff b{color:var(--acc)}
.vdiff.on b{color:var(--g900)}
.vdiff.on{background:linear-gradient(90deg,#eafbf1,transparent);border-radius:4px}
.vsy-arc{position:absolute;inset:0;width:300px;height:190px;overflow:visible;transform:translateZ(15px)}
.vsy-arc path{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:5 5;animation:vgDash 1s linear infinite;animation-play-state:var(--ps)}
/* audit */
.vau-r{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #f0f1f6;font-size:11px;animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps)}
.vau-r em{width:28px;font-style:normal;font-size:8.5px;color:var(--g500);font-variant-numeric:tabular-nums}
.vau-r b{flex:1;font-weight:600}
/* logos */
.vlg-grid{position:absolute;left:62px;top:14px;width:176px;height:150px;transform-style:preserve-3d;transform:translateZ(0)}
.vlg{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:50px;height:40px;border-radius:11px;background:#fff;color:var(--c);font-style:normal;font-size:12px;font-weight:800;
  box-shadow:0 0 0 1px rgba(20,24,80,.06),0 4px 0 -1px #e3e6f5,0 14px 22px -14px rgba(13,30,110,.5);animation:vgFloat 4s ease-in-out infinite,vgPop .5s ease var(--t) both;animation-delay:calc(var(--t) * 3),var(--t);animation-play-state:var(--ps)}
@keyframes vgFloat{0%,100%{transform:translateZ(10px)}50%{transform:translateZ(26px)}}
.vlg-core{position:absolute;left:125px;top:64px;transform:translateZ(60px)}
.vlg-core .va-logo{width:50px;height:50px;border-radius:14px;box-shadow:0 16px 26px -10px color-mix(in srgb,var(--acc) 80%,transparent)}
/* docs */
.vdocs{position:absolute;left:18px;top:26px;width:120px;height:140px;transform-style:preserve-3d}
.vdoc{position:absolute;left:var(--x);top:0;width:92px;height:118px;padding:10px;border-radius:8px;background:#fff;transform:translateX(0) rotate(var(--r)) translateZ(calc(var(--x) * .8));
  box-shadow:0 0 0 1px rgba(20,24,80,.07),0 16px 24px -16px rgba(13,30,110,.5);animation:vgIn .6s ease var(--t) both;animation-play-state:var(--ps)}
.vdoc b{display:inline-block;margin-bottom:6px;padding:2px 6px;border-radius:4px;background:var(--acc);color:#fff;font-size:8.5px}
.vex{padding:9px 10px}
/* forecast */
.vfc{display:block;width:100%;height:72px;margin-top:4px;overflow:visible}
.vfc .band{fill:color-mix(in srgb,var(--acc) 12%,transparent)}
.vfc .vln{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-dasharray:300;stroke-dashoffset:300;animation:vgDraw 1.8s ease .4s forwards;animation-play-state:var(--ps)}
.vfc .goal{stroke:#22a55a;stroke-width:1.2;stroke-dasharray:4 3}
@keyframes vgDraw{to{stroke-dashoffset:0}}
.vfc-l{display:flex;justify-content:space-between;margin-top:3px;font-size:8px;color:var(--g500)}
/* team */
.vtm-r{display:grid;grid-template-columns:24px 48px 1fr 8px;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #f0f1f6;font-size:11px;animation:vgFade .5s ease var(--t) both;animation-play-state:var(--ps)}
.vtm-r i{height:6px;border-radius:3px;background:#eef0f7;overflow:hidden}
.vtm-r em{display:block;width:var(--v);height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));animation:vgW 1s ease var(--t) both;animation-play-state:var(--ps)}
/* tasks */
.vts-r{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #f0f1f6;font-size:11.5px}
.vts-r b{flex:1;font-weight:600}
.vts-r em{font-style:normal;font-size:8px;font-weight:700;color:var(--acc);opacity:0;animation:vgFade .3s ease var(--t) forwards;animation-play-state:var(--ps)}
.vts-r .vbox{animation:vgCheck .35s ease var(--t) forwards;animation-play-state:var(--ps)}
.vts-r .vbox svg{animation:vgFadeIn .3s ease var(--t) forwards;animation-play-state:var(--ps)}
.vts-r b{background:linear-gradient(var(--g400),var(--g400)) no-repeat 0 55%/0 1px;animation:vgStrike .4s ease var(--t) forwards;animation-play-state:var(--ps)}
@keyframes vgCheck{to{background:#16a34a;border-color:#16a34a}}
@keyframes vgFadeIn{to{opacity:1}}
@keyframes vgStrike{to{background-size:100% 1px;color:var(--g500)}}
/* shield */
.vsh-icon{position:absolute;left:14px;top:40px;width:84px;height:100px;display:grid;place-items:center;transform:translateZ(40px);color:#fff;
  background:linear-gradient(160deg,var(--acc2),var(--acc));clip-path:path("M42 0 L84 14 V52 C84 78 62 94 42 100 C22 94 0 78 0 52 V14 Z");filter:drop-shadow(0 14px 18px rgba(0,0,60,.3))}
.vsh-icon svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8}
.vsh-r{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #f0f1f6;font-size:11.5px;animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps)}
/* csm */
.vcs-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vcs-h .lc-av{width:32px;height:32px;font-size:11px}
.vcs-h div{display:flex;flex-direction:column}
.vcs-h b{font-size:11px}.vcs-h span{font-size:8.5px;color:var(--g500)}
.vcs .vto-b{max-width:none;background:#f5f6fb;box-shadow:none}
/* server */
.vsv{position:absolute;left:40px;top:34px;width:120px;height:120px;transform-style:preserve-3d}
.vsv-slab{position:absolute;left:0;top:var(--y);width:120px;height:28px;border-radius:8px;display:flex;align-items:center;gap:5px;padding:0 10px;
  background:linear-gradient(180deg,#2b2f55,#1b1e3d);box-shadow:0 5px 0 #0e1030,0 16px 22px -12px rgba(0,0,40,.6);transform:translateZ(calc(30px - var(--y) * .3));animation:vgIn .6s ease var(--t) both;animation-play-state:var(--ps)}
.vsv-slab i{width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:vgBlink 1.6s ease infinite;animation-play-state:var(--ps)}
.vsv-slab i:nth-child(2){animation-delay:.4s}.vsv-slab i:nth-child(3){background:var(--acc2);box-shadow:0 0 6px var(--acc2);animation-delay:.8s}
.vsv-slab b{flex:1;height:4px;margin-left:10px;border-radius:2px;background:repeating-linear-gradient(90deg,#4a4f86 0 6px,transparent 6px 9px)}
@keyframes vgBlink{50%{opacity:.3}}
/* seats */
.vseat{position:absolute;left:36px;top:18px;display:grid;grid-template-columns:repeat(8,26px);gap:6px;transform:translateZ(10px)}
.vseat .lc-av{width:26px;height:26px;font-size:8px;box-shadow:0 6px 10px -6px rgba(0,0,40,.5);animation:vgPop .4s ease var(--t) both;animation-play-state:var(--ps)}
/* comparison art */
.vob-fly{position:absolute;left:150px;top:30px;width:140px;height:130px;transform:translateZ(30px)}
.vob-env{position:absolute;left:0;top:calc(var(--k) * 12px);width:22px;height:15px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #d9dcea,0 6px 10px -6px rgba(0,0,40,.4);
  animation:vgFly 3s ease-in infinite;animation-delay:calc(var(--k) * .33s);animation-play-state:var(--ps)}
.vob-env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 47%,#d9dcea 48% 52%,transparent 53%),linear-gradient(to bottom left,transparent 47%,#d9dcea 48% 52%,transparent 53%);background-size:100% 60%;background-repeat:no-repeat}
@keyframes vgFly{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(120px,-20px) scale(.6)}}
.vwv{display:flex;align-items:center;gap:2px;height:58px;margin-top:4px}
.vwv i{flex:1;height:var(--h);border-radius:2px;background:#c9cde2;animation:vgWv 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.09s);animation-play-state:var(--ps)}
.vwv i:nth-child(3n){background:var(--oc,#0018ff)}
@keyframes vgWv{50%{transform:scaleY(.45)}}
.vwv-l{display:flex;justify-content:space-between;margin-top:6px;font-size:8.5px;font-weight:600;color:var(--g500)}
.vcg-h,.vcg-r{display:grid;grid-template-columns:1.3fr 1fr .5fr;gap:7px;padding:6px 2px;font-size:11px}
.vcg-h{font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);border-bottom:1px solid #eceef6}
.vcg-r{border-bottom:1px solid #f4f5f9;animation:vgFade .5s ease var(--t) both;animation-play-state:var(--ps)}
.vcg-r span{color:var(--g600)}
.vcd{display:flex;gap:6px;margin-top:4px}
.vcd-s{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:9px;background:#f5f6fb;animation:vgIn .5s ease var(--t) both;animation-play-state:var(--ps);position:relative}
.vcd-s em{font-style:normal;font-size:8px;font-weight:700;color:var(--g500)}
.vcd-s span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;color:var(--g600)}
.vcd-s svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.vcd-s b{font-size:10.5px}
.vcd-s::after{content:"";position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:var(--g400);animation:vgTimer 4s linear infinite;animation-delay:calc(var(--t) * 2);animation-play-state:var(--ps)}
@keyframes vgTimer{from{width:0}to{width:100%}}
.vht{position:relative;height:100px;margin-top:4px;border-radius:9px;background:radial-gradient(circle,rgba(20,24,80,.08) 1px,transparent 1.3px) 0 0/10px 10px,#f7f8fc}
.vht i{position:absolute;left:calc(var(--x) + 8px);top:calc(var(--y) + 4px);width:10px;height:10px;border-radius:50%;background:var(--oc,#0011b3);opacity:.25;transform:scale(var(--s));animation:vgHeat 2.4s ease-in-out infinite;animation-delay:var(--t);animation-play-state:var(--ps)}
@keyframes vgHeat{50%{opacity:.8;transform:scale(calc(var(--s) * 1.6))}}
.vly{position:absolute;inset:0;transform-style:preserve-3d}
.vly-s{position:absolute;left:40px;width:220px;height:66px;padding:12px 14px;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.vly-s b{font-size:11.5px}
.vly-s span{font-size:8.5px}
.vly-s.crm{top:96px;background:#fff;color:var(--g800);box-shadow:0 0 0 1px rgba(20,24,80,.07),0 6px 0 -1px #e3e6f5,0 22px 30px -18px rgba(13,30,110,.45)}
.vly-s.crm span{color:var(--g500)}
.vly-s.z{top:30px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 8px;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));transform:translateZ(46px);
  box-shadow:0 22px 30px -14px color-mix(in srgb,var(--acc) 75%,transparent);animation:vgHover 4s ease-in-out infinite;animation-play-state:var(--ps)}
.vly-s.z span:last-child{flex-basis:100%;margin-left:28px;opacity:.85}
.vly-s.z .va-logo{background:rgba(255,255,255,.2)}
@keyframes vgHover{50%{transform:translateZ(58px)}}

/* ---- card layouts ---- */
.vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--block-y)}
.vcard{padding:12px;display:flex;flex-direction:column}
.vcard-body{padding:20px 12px 12px}
.vcard-body h3{margin:10px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.01em;color:var(--g900)}
.vcard-body p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--g600)}
.vcard-n{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--acc)}
.v-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
.v-bento .vcard:nth-child(1){grid-column:span 2;flex-direction:row;align-items:center}
.v-bento .vcard:nth-child(2){grid-row:span 2}
.v-bento .vcard:nth-child(2) .vg{height:100%;min-height:300px}
.v-bento .vcard:nth-child(2) .vcard-art{flex:1;display:flex;flex-direction:column}
.v-bento .vcard:nth-child(3){grid-column:span 2;flex-direction:row-reverse;align-items:center}
.v-bento .vcard:is(:nth-child(1),:nth-child(3)) > *{flex:1 1 0;min-width:0}
.v-bento .vcard:is(:nth-child(1),:nth-child(3)) .vcard-body{padding:12px 24px}
.v-rows{grid-template-columns:minmax(0,1fr);gap:16px}
.v-rows .vcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px);padding:14px}
.v-rows .vcard:nth-child(even) .vcard-art{order:2}
.v-rows .vg{height:280px}
.v-rows .vg-3d,.v-bento .vcard:nth-child(2) .vg-3d{scale:1.18}
.v-bento .vcard:is(:nth-child(1),:nth-child(3)) .vg-3d,.v-bento6 .vcard:is(:nth-child(1),:nth-child(4),:nth-child(5)) .vg-3d,.v-vs .vcard:last-child .vg-3d{scale:1.08}
.v-rows .vcard-body{padding:12px clamp(8px,2vw,28px)}
.v-rows .vcard-body h3{font-size:clamp(22px,2.2vw,30px)}
.v-rows .vcard-body p{font-size:16.5px;max-width:46ch}
.v-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-grid4 .vcard{flex-direction:row;align-items:center}
.v-grid4 .vcard > *{flex:1 1 0;min-width:0}
.v-bento6 .vcard:is(:nth-child(1),:nth-child(4),:nth-child(5)){grid-column:span 2;flex-direction:row;align-items:center}
.v-bento6 .vcard:is(:nth-child(1),:nth-child(4),:nth-child(5)) > *{flex:1 1 0;min-width:0}
.v-bento6 .vcard:nth-child(4){flex-direction:row-reverse}
.v-vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.v-vs .vcard:last-child{grid-column:1 / -1;flex-direction:row;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 6%,#fff),#fff)}
.v-vs .vcard:last-child > *{flex:1 1 0;min-width:0}
.v-vs .vcard:nth-child(3){border-color:color-mix(in srgb,var(--acc) 30%,#fff);box-shadow:0 24px 44px -30px color-mix(in srgb,var(--acc) 60%,transparent)}
.vcard-vs{align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--g200);font-family:var(--display);font-weight:700;font-size:15px;color:var(--g700);box-shadow:0 12px 24px -14px rgba(13,30,110,.4)}
.vcard-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--g200)}
.vcard-tag i{display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:6px;background:var(--oc);color:#fff;font-style:normal;font-size:9px}
.vcard-tag img{width:22px;height:22px;padding:3px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--brand-100);object-fit:contain}
.vcard-tag.z{color:var(--brand)}
.vcard-tag.both{padding:5px 11px;color:#fff;border:0;background:linear-gradient(90deg,var(--acc),var(--acc2))}

/* ---- walkthrough (tabs + product window) ---- */
.vwalk{position:relative}
.vwalk::before{content:"";position:absolute;inset:calc(var(--sec-y) * .5) 0 calc(var(--sec-y) * -.4);z-index:-1;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 5%,#f6f7fb) 20% 80%,transparent)}
.vw-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.vw-tabs{display:grid;gap:10px;margin-top:28px}
.vw-tab{position:relative;display:flex;gap:16px;align-items:flex-start;width:100%;padding:18px 20px;border:1px solid transparent;border-radius:18px;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:hidden;transition:background-color .3s,border-color .3s,box-shadow .3s}
.vw-tab:hover{background:rgba(255,255,255,.6)}
.vw-tab.on{background:#fff;border-color:var(--g200);box-shadow:0 20px 40px -28px rgba(13,30,110,.4)}
.vw-n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--g100);font-weight:700;font-size:13px;color:var(--g600);transition:.3s}
.vw-tab.on .vw-n{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.vw-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.vw-t b{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,20px);color:var(--g900)}
.vw-t > span:not(.lc-tags){display:none;font-size:15px;line-height:1.55;color:var(--g600)}
.vw-tab.on .vw-t > span:not(.lc-tags){display:block}
.vw-tags{display:none!important}
.vw-tab.on .vw-tags{display:flex!important;margin-top:4px}
.vw-tags i{color:var(--g700);background:var(--g100);border-color:var(--g200)}
.vw-prog{position:absolute;left:20px;right:20px;bottom:0;height:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));transform:scaleX(0);transform-origin:left}
.vw-tab.on .vw-prog{animation:vwProg var(--vw-ms,6000ms) linear forwards}
.vwalk.paused .vw-tab.on .vw-prog{animation-play-state:paused}
@keyframes vwProg{to{transform:scaleX(1)}}
.vw-window{position:relative;border-radius:22px;background:linear-gradient(160deg,#fff,#f4f5fb);border:1px solid var(--g200);box-shadow:0 50px 80px -50px rgba(13,30,110,.45),0 0 0 8px rgba(255,255,255,.6);overflow:hidden}
.vw-chrome{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--g150);background:rgba(255,255,255,.8)}
.vw-chrome i{width:10px;height:10px;border-radius:50%;background:var(--g200)}
.vw-chrome span{margin:0 auto;padding:3px 40px;border-radius:6px;background:var(--g100);font-size:11px;color:var(--g500)}
.vw-stage{position:relative;height:clamp(340px,32vw,420px)}
.vw-pane{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.vw-pane.on{opacity:1;transform:none}
.vw-pane .vg{height:100%}
.vw-stage .vg-lg .vg-3d{transform:scale(1.5) rotateX(5deg) rotateY(var(--ry,-6deg))}

/* ---- zigzag steps ---- */
.vz-head{max-width:760px;margin:0 auto}
.vz-head .lum-eyebrow{justify-content:center}
.vz-list{position:relative;list-style:none;margin:var(--block-y) 0 0;padding:0;display:grid;gap:clamp(28px,4vw,56px)}
.vz-line{position:absolute;left:50%;top:40px;bottom:40px;width:2px;margin-left:-1px;background:var(--g200)}
.vz-line b{position:absolute;left:-3px;top:0;width:8px;height:60px;border-radius:4px;background:linear-gradient(transparent,var(--acc),transparent);animation:vzRun 4s linear infinite}
@keyframes vzRun{to{top:calc(100% - 60px)}}
.vz-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,28px)}
.vz-row.flip .vz-art{order:3}
.vz-row.flip .vz-copy{order:1;text-align:right}
.vz-row.flip .vz-tags{justify-content:flex-end}
.vz-row.flip .vz-node{order:2}
.vz-art{border-radius:24px;background:#fff;border:1px solid var(--g200);padding:10px;box-shadow:0 30px 50px -40px rgba(13,30,110,.4)}
.vz-art .vg{height:clamp(260px,24vw,320px)}
.vz-art .vg-lg .vg-3d{transform:scale(1.42) rotateX(6deg) rotateY(var(--ry,-7deg))}
.vz-node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:auto;border-radius:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 0 0 8px #fff,0 16px 28px -12px color-mix(in srgb,var(--acc) 70%,transparent)}
.vz-step{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.vz-copy h3{margin:10px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em;color:var(--g900)}
.vz-copy p{margin:12px 0 0;font-size:16.5px;line-height:1.6;color:var(--g600)}
.vz-row.flip .vz-copy p{margin-left:auto}
.vz-copy p{max-width:44ch}
.vz-tags{margin-top:16px}
.vz-tags i,.vw-tags i{padding:5px 10px;border-radius:999px;font-style:normal;font-size:12px;font-weight:600;border:1px solid var(--g200);background:#fff;color:var(--g700)}

/* ---- gantt rollout ---- */
.vgt{margin-top:var(--block-y);padding:clamp(18px,2.5vw,28px);border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);position:relative}
.vgt-axis,.vgt-row{display:grid;grid-template-columns:clamp(120px,16vw,200px) 1fr;align-items:center;gap:16px}
.vgt-axis{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.vgt-axis > span:first-child{display:none}
.vgt-axis{grid-template-columns:clamp(120px,16vw,200px) repeat(4,1fr)}
.vgt-axis > span:first-child{display:block}
.vgt-axis span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8d91c9}
.vgt-row{padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.vgt-lab{font-size:13px;font-weight:600;color:#c9ccff}
.vgt-track{position:relative;height:40px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px) 25%)}
.vgt-bar{font-style:normal;position:absolute;left:var(--s);right:calc(100% - var(--e));top:4px;bottom:4px;display:flex;align-items:center;padding:0 14px;border-radius:10px;overflow:hidden;
  background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 10px 24px -10px color-mix(in srgb,var(--acc) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
  transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .35s + .3s)}
.vgt.in .vgt-bar{transform:none}
.vgt-bar b{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vgt-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:vgtShine 3.6s ease infinite 1.6s}
@keyframes vgtShine{60%,100%{transform:translateX(100%)}}
.vgt-now{position:absolute;top:14px;bottom:14px;left:calc(clamp(120px,16vw,200px) + 16px + clamp(18px,2.5vw,28px));right:clamp(18px,2.5vw,28px);pointer-events:none}
.vgt-now i{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 12px #fff;opacity:.8;animation:vgtNow 7s linear infinite 1.5s}
.vgt-now em{position:absolute;top:-6px;left:0;padding:2px 7px;border-radius:6px;background:#fff;color:#0b0a22;font-style:normal;font-size:10px;font-weight:700;opacity:0;animation:vgtNow 7s linear infinite 1.5s,vgtTag 7s linear infinite 1.5s;transform:translateX(-50%)}
@keyframes vgtNow{from{left:0}to{left:100%}}
@keyframes vgtTag{0%,80%{opacity:0}85%,100%{opacity:1}}
.vgt-cards{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vgt-card{padding:22px 22px 24px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.vgt-when{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:color-mix(in srgb,var(--acc) 55%,transparent)}
.vgt-card h3{margin:14px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,21px);color:#fff}
.vgt-card p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#b7b9e4}

/* ---- signal console / ticker ---- */
.vco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.vnum{list-style:none;margin:28px 0 0;padding:0}
.vnum li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--g200)}
.vnum em{flex:none;font-style:normal;font-family:var(--display);font-weight:600;font-size:15px;color:var(--acc)}
.vnum p{margin:0;font-size:15.5px;line-height:1.55;color:var(--g600)}
.vnum b{color:var(--g900);font-weight:600}
.vco-panel{padding:22px;border-radius:24px;color:#e7e8ff;background:radial-gradient(420px 260px at 90% 0%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 70%),linear-gradient(#0f0e2b,#07061a);
  box-shadow:0 50px 80px -40px rgba(7,6,26,.6),inset 0 1px 0 rgba(255,255,255,.08);transform:perspective(1200px) rotateY(-8deg) rotateX(4deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.vco-panel:hover{transform:perspective(1200px) rotateY(-2deg)}
.vco-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.vco-h b{font-size:14px;font-weight:600;color:#fff}
.vco-h em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12px;color:#86efac}
.vco-h em i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:vgBlink 1.6s infinite}
.vco-panel ul{list-style:none;margin:6px 0 0;padding:0}
.vco-r{display:grid;grid-template-columns:22px minmax(0,1.2fr) minmax(0,1fr) 30px;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.vco-r svg{width:18px;height:18px;fill:none;stroke:var(--acc2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vco-r b{font-size:14px;font-weight:500;color:#fff}
.vco-r i{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.vco-r em{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width 1.2s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .12s + .3s)}
.vco-panel.in .vco-r em{width:var(--v);animation:vcoLive 3.2s ease-in-out infinite calc(var(--k) * .4s + 1.6s)}
@keyframes vcoLive{50%{width:calc(var(--v) - 14%)}}
.vco-r span{font-size:12.5px;font-weight:600;color:#aab0ff;text-align:right;font-variant-numeric:tabular-nums}
.vco-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:12px;color:#8d91c9}
.vco-foot b{color:#fff;font-weight:600}
.vtk-band{margin-top:var(--block-y);display:grid;gap:12px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.vtk-track{display:flex;gap:12px;width:max-content;animation:vtk 38s linear infinite}
.vtk-track.rev{animation-direction:reverse;animation-duration:44s}
.vtk-band:hover .vtk-track{animation-play-state:paused}
@keyframes vtk{to{transform:translateX(-33.333%)}}
.vtk-p{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:#fff;border:1px solid var(--g200);font-size:clamp(15px,1.3vw,18px);font-weight:600;color:var(--g800);white-space:nowrap;box-shadow:0 10px 24px -18px rgba(13,30,110,.4)}
.vtk-p svg{width:20px;height:20px;fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vtk-track.rev .vtk-p{background:transparent;border-style:dashed;color:var(--g600)}
.vtk-grid{list-style:none;margin:var(--block-y) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vtk-c{position:relative;padding:26px 22px;border-radius:20px;background:var(--g50);border:1px solid var(--g200);overflow:hidden}
.vtk-c em{display:block;font-style:normal;font-family:var(--display);font-weight:600;font-size:44px;line-height:1;letter-spacing:-.03em;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.vtk-c b{display:block;margin-top:16px;font-size:16px;font-weight:600;color:var(--g900);line-height:1.35}
.vtk-c p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--g600)}

/* ---- lists ---- */
.vng{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.vng-head{position:sticky;top:110px}
.vng-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vng-list.n3 li:last-child,.vng-list.n5 li:last-child{grid-column:1 / -1}
.vng-list li{position:relative;padding:26px 24px 24px;border-radius:20px;background:#fff;border:1px solid var(--g200);transition:transform .3s,box-shadow .3s}
.vng-list li::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--acc),var(--acc2));opacity:.85}
.vng-list li:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(13,30,110,.45)}
.vng-list em{font-style:normal;font-family:var(--display);font-weight:600;font-size:14px;color:var(--acc)}
.vng-list p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--g600)}
.vng-list b{display:block;margin-bottom:4px;font-size:17px;font-weight:600;line-height:1.35;color:var(--g900)}
.vvs-more{margin-top:18px}
.ved-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--g200)}
.ved-lead{position:relative;margin:0;padding-left:44px;font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,27px);line-height:1.35;letter-spacing:-.01em;color:var(--g900)}
.ved-lead span{position:absolute;left:0;top:-14px;font-size:72px;line-height:1;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ved-lead b{font-weight:600;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc) 16%,transparent) 62%)}
.ved-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.ved-list.vc2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ved-list.vc4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ved-list li{display:flex;gap:12px}
.ved-i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--acc) 10%,#fff);color:var(--acc)}
.ved-i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ved-list p{margin:0;font-size:15.5px;line-height:1.6;color:var(--g600)}
.ved-list b{color:var(--g900);font-weight:600}
.vlk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.vlk-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;perspective:1400px}
.vlk-c{position:relative;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--g200);box-shadow:0 20px 34px -30px rgba(13,30,110,.5);
  transform:rotateY(-10deg) translateX(calc(var(--k) * 8px));transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.vlk-c.lc-rv{opacity:0}
.vlk-c.lc-rv.in{opacity:1;transform:rotateY(-10deg) translateX(calc(var(--k) * 8px))}
.vlk-c.lc-rv.in:hover{transform:rotateY(0) translateX(calc(var(--k) * 8px)) scale(1.02);box-shadow:0 30px 44px -30px rgba(13,30,110,.6)}
.vlk-h{display:flex;align-items:center;gap:10px}
.vlk-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--acc) 10%,#fff);color:var(--acc)}
.vlk-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vlk-h b{font-size:16px;font-weight:600;color:var(--g900)}
.vlk-h em{margin-left:auto;padding:3px 9px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;color:#0011b3;background:#fff6e8;white-space:nowrap}
.vlk-c p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--g600)}
.vlk-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:700;color:var(--acc)}
.vlk-tag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.vch-grid{list-style:none;margin:var(--block-y) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vch-c{padding:26px 26px 28px;border-radius:22px;border:1px solid var(--g200);background:#fff}
.vch-c.z{background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 7%,#fff),#fff 60%);border-color:color-mix(in srgb,var(--acc) 28%,#fff)}
.vch-c.o{background:linear-gradient(160deg,color-mix(in srgb,var(--oc) 7%,#fff),#fff 60%)}
.vch-c.b{background:linear-gradient(135deg,color-mix(in srgb,var(--oc) 7%,#fff),color-mix(in srgb,var(--acc) 8%,#fff))}
.vch-c.t{border-style:dashed}
.vch-c p{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--g600)}
.vch-c b{color:var(--g900);font-weight:600}
.vch-t{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:#fff;border:1px solid var(--g200);font-size:13px;font-weight:700;color:var(--g800)}
.vch-t i{display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:7px;background:var(--oc);color:#fff;font-style:normal;font-size:9.5px}
.vch-t img{width:24px;height:24px;padding:3px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--brand-100);object-fit:contain}
.vch-t.z{color:var(--brand)}
.vch-t.b,.vch-t.t{padding:5px 12px}
.vch-t.b{color:#fff;border:0;background:linear-gradient(90deg,var(--oc),var(--acc))}
.vvs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;margin-top:var(--block-y)}
.vvs-c{padding:22px;border-radius:24px;background:#fff;border:1px solid var(--g200);height:100%}
.vvs-c.z{border-color:color-mix(in srgb,var(--acc) 30%,#fff);background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 6%,#fff),#fff 55%)}
.vvs-c p{margin:14px 0 18px;font-size:15.5px;line-height:1.6;color:var(--g600)}
.vob-flow{display:flex;align-items:center;justify-content:center;margin:var(--block-y) auto 0;position:relative;height:56px}
.vob-flow .va-logo{width:56px;height:56px;border-radius:16px;box-shadow:0 18px 30px -12px color-mix(in srgb,var(--acc) 70%,transparent);z-index:1}
.vob-flow i{position:absolute;left:10%;right:10%;top:100%;height:30px;border:2px dashed var(--g300);border-bottom:0;border-radius:18px 18px 0 0}
.vob-row{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.vob-t{padding:20px 18px 22px;border-radius:20px;background:#fff;border:1px solid var(--g200);text-align:center;transition:transform .3s,box-shadow .3s}
.vob-t:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(13,30,110,.5)}
.vob-3d{position:relative;width:64px;height:64px;margin:4px auto 18px;transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d}
.vob-3d i.top{position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--c) 18%,#fff));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff);transform:translateZ(16px)}
.vob-3d i.side{position:absolute;inset:0;border-radius:12px;background:color-mix(in srgb,var(--c) 55%,#1b1b40);transform:translateZ(0);box-shadow:0 18px 20px -6px rgba(13,30,110,.35)}
.vob-3d span{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(17px) rotateZ(-45deg);color:var(--c)}
.vob-3d svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vob-t b{display:block;font-size:16px;font-weight:600;color:var(--g900)}
.vob-t p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--g600)}
.vin{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center}
.vin-price{display:inline-flex;align-items:baseline;gap:10px;margin-top:24px;padding:14px 20px;border-radius:16px;background:var(--g50);border:1px solid var(--g200)}
.vin-price b{font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.03em;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.vin-price span{font-size:14px;color:var(--g600)}
.vin-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vin-t{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--g200)}
.vin-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 12px 20px -10px color-mix(in srgb,var(--acc) 70%,transparent);transform:perspective(300px) rotateX(12deg) rotateY(-14deg)}
.vin-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vin-t p{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--g600)}
.vin-t b{display:block;margin-bottom:4px;font-size:16px;color:var(--g900);font-weight:600}

/* ---- CRM record window ---- */
.vrc{perspective:1400px}
.vrc-3d{position:relative;transform:rotateY(-12deg) rotateX(6deg);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.vrc:hover .vrc-3d{transform:rotateY(-4deg) rotateX(2deg)}
.vrc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.vrc-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 6px;border-radius:999px;background:#fff;border:1px solid var(--g200);font-size:12.5px;font-weight:600;color:var(--g600);transition:.35s}
.vrc-tab i{display:grid;place-items:center;min-width:22px;height:22px;padding:0 3px;border-radius:6px;background:var(--c);color:#fff;font-style:normal;font-size:8.5px;font-weight:800}
.vrc-tab.on{color:var(--g900);border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.vrc-card{--c:#00a1e0;padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--g200);box-shadow:0 8px 0 -2px #e6e9f6,0 40px 60px -36px rgba(13,30,110,.5)}
.vrc-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--g150)}
.vrc-logo{display:grid;place-items:center;min-width:36px;height:36px;padding:0 5px;border-radius:10px;background:var(--c);color:#fff;font-style:normal;font-size:11px;font-weight:800;transition:background-color .35s}
.vrc-h div{display:flex;flex-direction:column}
.vrc-h b{font-size:15px;color:var(--g900)}
.vrc-h span{font-size:12px;color:var(--g500)}
.vrc-h em{margin-left:auto;padding:4px 10px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,#fff)}
.vrc-f{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--g150);font-size:14px}
.vrc-f span{color:var(--g500)}
.vrc-f s{color:var(--g400)}
.vrc-f b{padding:3px 9px;border-radius:7px;font-weight:600;color:var(--g900);background:color-mix(in srgb,var(--acc) 8%,#fff)}
.vrc .vbtns{margin-top:14px}
.vrc .vbtn{padding:8px 16px;font-size:13px;border-radius:10px}
.vrc-toast{position:absolute;right:-10px;bottom:-22px;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#0f1030;color:#fff;font-size:12.5px;transform:translateZ(60px);box-shadow:0 20px 30px -14px rgba(0,0,40,.6);opacity:0}
.vrc-toast svg{width:16px;height:16px;padding:2px;border-radius:50%;background:#22c55e;fill:none;stroke:#fff;stroke-width:2.4}
.vrc.in .vrc-toast{animation:vrcToast 6s ease infinite 1.6s}
@keyframes vrcToast{0%,44%{opacity:0;transform:translateZ(60px) translateY(10px)}50%,88%{opacity:1;transform:translateZ(60px)}96%,100%{opacity:0}}
.vrc.in .vrc-f b{animation:vrcHi 6s ease infinite 1.6s}
@keyframes vrcHi{0%,44%{background:color-mix(in srgb,var(--acc) 8%,#fff)}50%,88%{background:#e8f8ee}}

/* ---- stat variants ---- */
.vst{grid-template-columns:auto minmax(0,1fr) 240px}
.vst-ring{position:relative;width:130px;height:130px;margin-left:auto}
.vst-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.vst-ring circle{fill:none;stroke:var(--g200);stroke-width:9}
.vst-ring .fg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1) .3s}
.vst.in .vst-ring .fg{stroke-dashoffset:0}
.vst-ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.vst-ring b{font-family:var(--display);font-size:34px;letter-spacing:-.02em;color:var(--g900);line-height:1}
.vst-split{display:grid;gap:12px}
.vst-split div{display:grid;gap:5px}
.vst-split span{font-size:12px;font-weight:600;color:var(--g600)}
.vst-split i{display:block;height:12px;width:var(--v);border-radius:6px;background:var(--g300);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .3s}
.vst-split i.z{background:linear-gradient(90deg,var(--acc),var(--acc2));transition-delay:.7s}
.vst.in .vst-split i{transform:none}
.vst-split p{margin:0;font-size:11px;color:var(--g500)}

/* ---- blog + case art ---- */
.vpost{padding:0!important;background:none!important;height:auto!important}
.vpost .vg{height:200px;border-radius:14px}
.rx-post.vfeat{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
.rx-post.vfeat .vpost .vg{height:280px}
.rx-post.vfeat h3{font-size:clamp(22px,2vw,28px)}
.rx-story-art .vg{height:200px;margin-top:18px}

/* ---- v84: labels that name ZUUZ use the logo colours everywhere (navy #262262 + blue #0018ff) ---- */
.vlk-tag{padding:4px 10px 4px 8px;border-radius:999px;background:#eceeff;box-shadow:inset 0 0 0 1px #d8dcff;color:#262262}
.vlk-tag svg{color:#0018ff}
.vrc-h em{color:#262262;background:#eceeff;box-shadow:inset 0 0 0 1px #d8dcff}
.vst-split i.z{background:linear-gradient(90deg,#262262,#0018ff)}

/* ---- responsive ---- */
@media (max-width:1100px){
  .v-bento,.v-bento6,.v-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-bento .vcard,.v-bento6 .vcard,.v-grid4 .vcard{grid-column:auto!important;grid-row:auto!important;flex-direction:column!important;align-items:stretch!important}
  .v-bento .vcard:nth-child(3),.v-bento6 .vcard:nth-child(5){grid-column:1 / -1!important}
  .v-bento .vcard:nth-child(2) .vg{min-height:0;height:230px}
  .v-bento .vcard > *,.v-bento6 .vcard > *,.v-grid4 .vcard > *{flex:none!important}
  .vtk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vob-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vst{grid-template-columns:auto minmax(0,1fr)}
  .vst-viz{display:none}
  .vw-grid,.vco,.vng,.vlk,.vin,.ved-top{grid-template-columns:minmax(0,1fr)}
  .vng-head{position:static}
  .vco-panel{transform:none}
  .rx-post.vfeat{grid-column:auto;display:flex}
}
@media (max-width:800px){
  .vcards,.v-rows .vcard,.v-vs,.vvs{grid-template-columns:minmax(0,1fr)}
  .v-rows .vcard:nth-child(even) .vcard-art{order:0}
  .v-vs .vcard:last-child{flex-direction:column;align-items:stretch}
  .v-vs .vcard:last-child > *{flex:none}
  .vcard-vs{margin:-4px auto}
  .vz-line{left:28px}
  .vz-row,.vz-row.flip{grid-template-columns:56px minmax(0,1fr);row-gap:16px}
  .vz-row .vz-node,.vz-row.flip .vz-node{order:0;grid-row:1;grid-column:1;margin:0}
  .vz-row .vz-copy,.vz-row.flip .vz-copy{order:0;grid-row:1;grid-column:2;text-align:left}
  .vz-row .vz-art,.vz-row.flip .vz-art{order:0;grid-row:2;grid-column:1 / -1}
  .vz-row.flip .vz-tags{justify-content:flex-start}
  .vz-row.flip .vz-copy p{margin-left:0}
  .vgt-axis,.vgt-row{grid-template-columns:86px 1fr;gap:10px}
  .vgt-axis{grid-template-columns:86px repeat(4,1fr)}
  .vgt-axis span{font-size:9px;letter-spacing:.02em}
  .vgt-lab{font-size:11px}
  .vgt-bar{padding:0 8px}
  .vgt-bar b{display:none}
  .vst{grid-template-columns:minmax(0,1fr);gap:12px}
  .vgt-now{left:calc(86px + 10px + clamp(18px,2.5vw,28px))}
  .vgt-cards,.vch-grid,.vng-list,.ved-list,.ved-list.vc2,.ved-list.vc4,.vin-grid{grid-template-columns:minmax(0,1fr)}
  .vng-list li{grid-column:auto!important}
  .vob-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vob-row li:last-child{grid-column:1 / -1}
  .vlk-c,.vlk-c.lc-rv.in{transform:none}
  .vrc-3d{transform:none}
  .vrc-toast{right:8px}
  .vw-stage{height:320px}
  .vw-stage .vg-lg .vg-3d,.vz-art .vg-lg .vg-3d{transform:scale(1.05) rotateX(14deg) rotateY(var(--ry,-14deg))}
}
@media (max-width:640px){
  .vtk-grid{grid-template-columns:minmax(0,1fr)}
  .vco-r{grid-template-columns:20px minmax(0,1fr) 70px 26px;gap:8px}
  .vrc-f{grid-template-columns:minmax(0,1fr) auto;font-size:13px}
  .vrc-f s{display:none}
  .vw-tab{padding:14px}
  .vg-3d{scale:1!important}
  .vg-lg .vg-3d{transform:scale(1) rotateX(14deg) rotateY(var(--ry,-14deg))}
  .rx-post.vfeat .vpost .vg{height:220px}
}
@media (prefers-reduced-motion:reduce){
  .vg *,.vg *::before,.vg *::after,.vtk-track,.vz-line b,.vgt-bar::after,.vgt-now i,.vgt-now em,.vco-r em,.vrc-toast,.vrc-f b{animation:none!important}
  .vgt-bar,.vst-split i,.vst-ring .fg{transition:none}
  .vtype{width:auto;border:0}
  .vf-row b,.vtype2{clip-path:none}
  .vts-r em,.vbox svg{opacity:1}
  .vts-r .vbox{background:#16a34a;border-color:#16a34a}
  .vfc .vln{stroke-dashoffset:0}
  .vm mark{background-size:100% 100%}
  .vbtn.go em:last-child{opacity:0}
}

/* ---- v89: comparison hero ---- */
.rxv{position:relative;padding-bottom:clamp(40px,6vw,86px)}
.rxv-app .app{box-shadow:0 46px 90px -50px rgba(12,18,60,.55),0 0 0 1px var(--g150)}
.rxv-them{position:absolute;left:-8px;bottom:0;width:min(280px,54%);padding:16px 16px 18px;border-radius:18px;background:#fff;border:1px solid var(--g200);box-shadow:0 30px 60px -36px rgba(13,30,110,.5)}
.rxv-h{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14px;font-weight:700;color:var(--g800)}
.rxv-h i{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;background:var(--oc);color:#fff;font-style:normal;font-size:11px}
.rxv-art.vg{height:128px;border-radius:12px}
.rxv-art .vg-3d{transform:scale(.72) rotateX(6deg) rotateY(-6deg)}
.rxv-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--g600)}
.rxv-vs{position:absolute;left:min(268px,54%);bottom:78px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--g200);font-family:var(--display);font-weight:700;font-size:14px;color:var(--g700);box-shadow:0 14px 26px -16px rgba(13,30,110,.5)}
[data-th="dark"] .rxv-them{background:#0e0f24;border-color:rgba(150,160,255,.2)}
[data-th="dark"] .rxv-h{color:#fff}
[data-th="dark"] .rxv-note{color:#a9adcf}
[data-th="dark"] .rxv-vs{background:#0e0f24;border-color:rgba(150,160,255,.24);color:#c9ccff}
@media (max-width:900px){
  .rxv{padding-bottom:0}
  .rxv-them{position:static;width:auto;margin-top:18px}
  .rxv-vs{position:static;margin:14px auto 0}
}

/* v89: on phones keep the enlarged art inside its frame */
@media (max-width:820px){
  .vg-3d,.vg-lg .vg-3d,.vz-art .vg-lg .vg-3d,.vw-stage .vg-lg .vg-3d{transform:rotateX(0deg) rotateY(0deg) scale(.96)!important;scale:1!important}
  .vg{height:230px}
  .vg-lg{min-height:260px}
}
/* ============ v88: the ZUUZ app screen (hero art on themed pages) ============ */
.app{--bg:#fff;--line:#e6e7f0;--ink:#12131c;--dim:#6b6d84;--soft:#f6f7fb;--ac:var(--acc,#0018ff);--ac2:var(--acc2,#5a52ff);
  position:relative;border-radius:16px;overflow:hidden;background:var(--bg);color:var(--ink);
  box-shadow:0 40px 80px -40px rgba(12,18,60,.45),0 0 0 1px var(--line)}
.app.dark{--bg:#0a0b1a;--line:#23264a;--ink:#f3f4ff;--dim:#9c9fc8;--soft:#161934;box-shadow:0 50px 90px -40px rgba(0,0,40,.9),0 0 0 1px #23264a}
.ap-chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.ap-chrome i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.ap-url{margin:0 auto;padding:4px 30px;border-radius:7px;background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--dim)}
.ap-body{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1.02fr);min-height:400px}
.ap-side{display:flex;flex-direction:column;gap:3px;padding:16px 10px;border-right:1px solid var(--line);background:var(--soft)}
.ap-logo{display:block;padding:2px 8px 16px}
.ap-logo img{width:74px;display:block}
.app.dark .ap-logo img{filter:brightness(0) invert(1)}
.ap-nav{padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--dim)}
.ap-nav.on{background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac);font-weight:600}
.app.dark .ap-nav.on{background:rgba(120,110,255,.22);color:#c9c4ff}
.ap-queue,.ap-detail{padding:15px 18px 18px;min-width:0}
.ap-detail{border-left:1px solid var(--line)}
.app header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.app .ap-queue h3,.app .ap-detail h3{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-pill{flex:none;padding:4px 10px;border-radius:999px;background:var(--soft);font-size:11.5px;font-weight:600;color:var(--dim);white-space:nowrap}
.ap-pill.blue{background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac)}
.app.dark .ap-pill.blue{background:rgba(120,110,255,.25);color:#c9c4ff}
.ap-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px}
.ap-row.on{background:color-mix(in srgb,var(--ac) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 22%,transparent)}
.app.dark .ap-row.on{background:rgba(120,110,255,.14);box-shadow:inset 0 0 0 1px rgba(120,110,255,.4)}
.ap-av{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font:600 11px/1 var(--sans);font-style:normal}
.ap-t{display:flex;flex-direction:column;min-width:0}
.ap-t b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-t span{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-score{flex:none;margin-left:auto;min-width:38px;padding:4px 7px;border-radius:8px;text-align:center;font-style:normal;font-size:11.5px;font-weight:700;color:#fff}
.ap-score.hot{background:linear-gradient(135deg,var(--ac),var(--ac2))}
.ap-score.warm{background:#8b93ff}
.ap-score.cold{background:var(--line);color:var(--dim)}
.ap-ring{position:relative;width:102px;height:102px;margin:14px auto 4px}
.ap-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ap-ring circle{fill:none;stroke:var(--soft);stroke-width:9}
.ap-ring .fg{stroke:var(--ac);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:calc(327 * (1 - var(--p) / 100));animation:apRing 1.5s cubic-bezier(.2,.7,.2,1) .2s both}
.ap-ring.warn .fg{stroke:#0018ff}
.ap-ring.bad .fg{stroke:#e5484d}
@keyframes apRing{from{stroke-dashoffset:327}}
.ap-ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1}
.ap-ring small{display:block;margin-top:3px;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ap-bar{display:grid;grid-template-columns:minmax(0,96px) 1fr 24px;align-items:center;gap:9px;margin-top:7px;font-size:11.5px;color:var(--dim)}
.ap-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-bar i{height:7px;border-radius:4px;background:var(--soft);overflow:hidden}
.ap-bar em{display:block;width:var(--v);height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ac2),var(--ac));animation:apGrow 1s cubic-bezier(.2,.7,.2,1) var(--d) both}
@keyframes apGrow{from{width:0}}
.ap-bar b{font-size:11.5px;font-weight:700;color:var(--ink);text-align:right}
.ap-f{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:12.5px;animation:apIn .5s ease var(--d) both}
.ap-f span{color:var(--dim);white-space:nowrap}
.ap-f b{font-weight:600;text-align:right}
@keyframes apIn{from{opacity:0;transform:translateY(6px)}}
.ap-why{display:flex;align-items:center;gap:9px;margin:13px 0 0;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:12px;line-height:1.45;color:var(--ink)}
.ap-why span{flex:none;padding:3px 7px;border-radius:5px;background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.app.dark .ap-why span{background:rgba(120,110,255,.28);color:#c9c4ff}
.ap-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.ap-btn{padding:9px 15px;border-radius:10px;font-size:12.5px;font-weight:600;background:var(--soft);color:var(--dim)}
.ap-btn.go{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 12px 24px -12px color-mix(in srgb,var(--ac) 80%,transparent)}
.ap-big{padding:14px 0 6px;text-align:center}
.ap-big b{display:block;font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.ap-big span{display:block;margin-top:6px;font-size:12px;color:var(--dim)}
.ap-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0 14px}
.ap-stages span{position:relative;padding-top:15px;font-size:10.5px;font-weight:600;text-align:center;color:var(--dim)}
.ap-stages span::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:4px;background:var(--soft)}
.ap-stages .done::before{background:color-mix(in srgb,var(--ac) 35%,var(--soft))}
.ap-stages .on{color:var(--ac)}
.ap-stages .on::before{background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.ap-cal{margin:12px 0 4px}
.ap-days,.ap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.ap-days span{text-align:center;font-size:10px;font-weight:600;color:var(--dim);padding-bottom:4px}
.ap-grid i{display:grid;place-items:center;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-style:normal;font-size:10.5px;font-weight:600;color:var(--dim)}
.ap-grid i.busy{background:repeating-linear-gradient(135deg,var(--soft) 0 4px,var(--bg) 4px 8px)}
.ap-grid i.pick{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 8px 16px -8px color-mix(in srgb,var(--ac) 80%,transparent)}
.ap-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.ap-tabs span{padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--dim)}
.ap-tabs .on{border-color:var(--c);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent)}
.ap-ask{display:flex;align-items:center;gap:10px;margin:10px 0 12px;padding:12px;border-radius:12px;background:var(--soft)}
.ap-ask p{margin:0;font-size:12.5px;font-weight:600;color:var(--ink)}
.ap-mic{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 12%,transparent);animation:apPulse 2.4s ease-out infinite}
@keyframes apPulse{50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--ac) 5%,transparent)}}
.ap-chart{display:flex;align-items:flex-end;gap:7px;height:64px;margin:12px 0 4px}
.ap-chart i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--ac) 22%,var(--soft));animation:apUp .8s cubic-bezier(.2,.7,.2,1) var(--d) both;transform-origin:bottom}
.ap-chart i[style*="--hl"]{background:linear-gradient(var(--ac2),var(--ac))}
@keyframes apUp{from{transform:scaleY(0)}}
@media (max-width:1000px){
  .ap-body{grid-template-columns:minmax(0,1fr)}
  .ap-side{flex-direction:row;align-items:center;gap:6px;border-right:0;border-bottom:1px solid var(--line);overflow:hidden}
  .ap-logo{padding:0 8px 0 2px}
  .ap-nav{padding:6px 9px;font-size:12px}
  .ap-detail{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .ap-nav{padding:5px 8px;font-size:11.5px}
  .ap-nav:nth-of-type(n+4){display:none}
  .ap-logo img{width:62px}
  .ap-bar{grid-template-columns:minmax(0,82px) 1fr 22px;gap:7px}
  .ap-f,.ap-why,.ap-t span{font-size:11.5px}
  .ap-stages span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){.app *{animation:none!important}.ap-chart i{transform:none}}
/* ============ v88: page themes — each inner page gets its own design ============
   main.mx[data-th="..."]  dark | screen | editorial | split | bento | rail | block | spec
   Every theme restyles the hero, the section rhythm and the cards, so neighbouring pages never match. */

/* ---- hero layouts (shared by the themes) ---- */
.th-center .lc-hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.th-center .lc-hero-copy{max-width:74ch}
.th-center .lc-actions,.th-center .lc-trust{justify-content:center}
.th-center .lc-hero-art{width:100%;margin-top:clamp(28px,4vw,52px)}
.th-wide .lc-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}
.th-wide .lc-hero-art{grid-column:1 / -1;margin-top:clamp(28px,4vw,56px)}
.lc-hero:not(.th-center):not(.th-wide) .lc-hero-grid:has(.lc-hero-art){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.lc-hero-art{perspective:1800px}
.lc-hero-art .app{transform-origin:top center}
.th-tilt .lc-hero-art .app{transform:rotateY(-10deg) rotateX(5deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.th-tilt .lc-hero-art:hover .app{transform:none}
.th-lean .lc-hero-art .app{transform:rotateX(6deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.th-lean .lc-hero-art:hover .app{transform:none}

/* =================== 1. dark & premium =================== */
main.mx[data-th="dark"]{--lc-card:rgba(255,255,255,.04);color:#e9eafc;
  /* the glow is mixed into black first, so a warm accent can't wash out the text */
  background:radial-gradient(1000px 560px at 10% -8%,color-mix(in srgb,var(--acc) 30%,#05060f),transparent 62%),radial-gradient(760px 460px at 96% 12%,rgba(40,70,190,.22),transparent 70%),#05060f}
[data-th="dark"] .lc-hero::before{display:none}
[data-th="dark"] :is(h1,h2,h3,.lc-h1,.h2,.lc-flow-h,.vz-copy h3,.vcard-body h3,.vgt-card h3){color:#fff}
[data-th="dark"] :is(.lc-lede,.lc-p,.vcard-body p,.vz-copy p,.vng-list p,.ved-list p,.mx-stat-t p,.lc-card>p,.vtk-c p,.vch-c p,.mx-a p,.vob-t p,.vin-t p,.a-lede){color:#b3b6dd}
[data-th="dark"] .lc-h1 span,[data-th="dark"] .h2 .dim{background:linear-gradient(100deg,#9aa6ff,#a3f3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="dark"] .lc-crumb,[data-th="dark"] .lc-crumb a{color:#8e92c4}
[data-th="dark"] .lum-eyebrow{color:#a9aef5}
[data-th="dark"] .lc-trust{color:#9497c4}
[data-th="dark"] .btn-white{background:rgba(255,255,255,.05);color:#e9eafc;border:1px solid rgba(160,166,255,.28)}
[data-th="dark"] :is(.lc-card,.vcard,.vng-list li,.vtk-c,.vch-c,.vvs-c,.vob-t,.vin-t,.mx-group,.lc-more a,.rx-plan,.rx-post,.rx-story,.mx-p2){background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(150,160,255,.16);color:#e9eafc}
[data-th="dark"] :is(.lc-card,.vcard,.vng-list li,.lc-more a):hover{border-color:rgba(150,160,255,.42);box-shadow:0 30px 60px -40px rgba(90,80,255,.9)}
[data-th="dark"] .vg{background:radial-gradient(circle,rgba(150,160,255,.10) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(180deg,#0b0c1e,#080917);border-color:rgba(150,160,255,.14)}
[data-th="dark"] .mx-stat{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%);border-color:rgba(150,160,255,.18)}
[data-th="dark"] .mx-stat-n b,[data-th="dark"] .vtk-c em,[data-th="dark"] .vin-price b{background:linear-gradient(120deg,#fff,#9aa6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="dark"] .lc-crm{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border-color:rgba(150,160,255,.18)}
[data-th="dark"] .lc-crm-list li{background:rgba(255,255,255,.05);border-color:rgba(150,160,255,.18);color:#dfe1fb}
[data-th="dark"] .mx-q{background:rgba(255,255,255,.04);border-color:rgba(150,160,255,.16)}
[data-th="dark"] .mx-qt{color:#fff}
[data-th="dark"] .mx-qn,[data-th="dark"] .lum-label{color:#8e92c4}
[data-th="dark"] .mx-q summary i::before,[data-th="dark"] .mx-q summary i::after{background:#c9ccff}
[data-th="dark"] :is(.vng-list li::before,.vz-node,.vin-ic){opacity:.95}
[data-th="dark"] .cta{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(150,160,255,.2)}
[data-th="dark"] .cta h2{color:#fff}
[data-th="dark"] .cta h2 span{color:#9aa6ff}
[data-th="dark"] .vtk-p{background:rgba(255,255,255,.05);border-color:rgba(150,160,255,.18);color:#dfe1fb}
[data-th="dark"] .rx-table{color:#e9eafc}
[data-th="dark"] .rx-table td,[data-th="dark"] .rx-table th{border-color:rgba(150,160,255,.16)}
[data-th="dark"] .rx-table tbody th{color:#c9ccff}
[data-th="dark"] .vz-art{background:rgba(255,255,255,.04);border-color:rgba(150,160,255,.16)}
[data-th="dark"] .vw-window{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(150,160,255,.18)}
[data-th="dark"] .vw-chrome{background:rgba(255,255,255,.04);border-color:rgba(150,160,255,.16)}
[data-th="dark"] .vw-tab.on{background:rgba(255,255,255,.07);border-color:rgba(150,160,255,.24)}
[data-th="dark"] .vwalk::before{background:linear-gradient(180deg,transparent,rgba(120,120,255,.07) 20% 80%,transparent)}
[data-th="dark"] .vw-n{background:rgba(255,255,255,.08);color:#c9ccff}
[data-th="dark"] .vw-tags i,[data-th="dark"] .vz-tags i{background:rgba(255,255,255,.05);border-color:rgba(150,160,255,.2);color:#c9ccff}

/* =================== 2. product screens =================== */
[data-th="screen"] .lc-hero{padding-top:clamp(48px,6vw,88px)}
[data-th="screen"] .lc-h1{font-size:clamp(38px,4.8vw,70px);letter-spacing:-.035em}
[data-th="screen"] .lc-lede{margin-inline:auto;max-width:62ch;font-size:clamp(16px,1.35vw,19px)}
[data-th="screen"] .lc-crumb{justify-content:center}
[data-th="screen"] .lc-sec{padding-top:clamp(56px,7vw,110px)}
[data-th="screen"] :is(.lc-card,.vcard){background:#f8f8fc;border:0;border-radius:22px}
[data-th="screen"] :is(.lc-card,.vcard):hover{background:#f1f2fb;box-shadow:none;transform:translateY(-3px)}
[data-th="screen"] .vg{background:#fff;border-color:#eceef6}
[data-th="screen"] .mx-stat{border:0;background:transparent;text-align:center;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
[data-th="screen"] .mx-stat-viz,[data-th="screen"] .vst-viz{display:none}
[data-th="screen"] .mx-stat-t p{margin-inline:auto}
[data-th="screen"] .mx-q{border-radius:16px}

/* =================== 3. editorial =================== */
[data-th="editorial"]{background:#fbfbfd}
[data-th="editorial"] .lc-h1{font-size:clamp(44px,5.6vw,84px);line-height:.98;letter-spacing:-.045em}
[data-th="editorial"] .lc-hero-grid{align-items:end}
[data-th="editorial"] .lc-hero-art{border-top:1px solid var(--g200);padding-top:clamp(24px,3vw,44px)}
[data-th="editorial"] .h2{font-size:clamp(32px,3.8vw,52px);letter-spacing:-.03em}
[data-th="editorial"] :is(.lc-card,.vcard){background:transparent;border:0;border-top:1px solid var(--g300);border-radius:0;padding-inline:0}
[data-th="editorial"] .vcard-body{padding-inline:0}
[data-th="editorial"] .vcard-n{font-size:15px;color:var(--g400)}
[data-th="editorial"] .mx-stat{border:0;border-radius:0;background:var(--g900);color:#fff;padding:clamp(28px,3.4vw,44px)}
[data-th="editorial"] .mx-stat-n b{background:linear-gradient(120deg,#fff,#9aa6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="editorial"] .mx-stat-t p{color:rgba(255,255,255,.76)}
[data-th="editorial"] .mx-stat-viz i{background:linear-gradient(#9aa6ff,#5a52ff)}
[data-th="editorial"] .vng-list li,[data-th="editorial"] .vtk-c{background:transparent;border:0;border-top:1px solid var(--g300);border-radius:0;padding-inline:0}
[data-th="editorial"] .vng-list li::before{display:none}
[data-th="editorial"] .mx-q{border-radius:0;border-left:0;border-right:0;background:transparent}

/* =================== 4. split screen =================== */
[data-th="split"] .lc-hero{padding-top:clamp(40px,5vw,76px)}
[data-th="split"] .lc-hero-grid{gap:clamp(24px,4vw,72px)}
[data-th="split"] .lc-hero-copy{position:relative;padding:clamp(28px,3vw,44px);border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 8%,#fff),#fff 70%);border:1px solid var(--g200)}
[data-th="split"] .lc-sec .inner > .lc-center{text-align:left;max-width:60ch}
[data-th="split"] .lc-center-eb{justify-content:flex-start}
[data-th="split"] :is(.lc-card,.vcard){border-radius:18px;background:#fff;border-color:var(--g150);box-shadow:0 20px 40px -34px rgba(13,30,110,.5)}
[data-th="split"] .vng-head{position:sticky;top:104px}
[data-th="split"] .mx-stat{background:var(--g900);color:#fff;border:0}
[data-th="split"] .mx-stat-t p{color:rgba(255,255,255,.76)}
[data-th="split"] .mx-stat-n b{background:linear-gradient(120deg,#fff,#9aa6ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =================== 5. bento =================== */
[data-th="bento"]{background:linear-gradient(180deg,#f7f8fc,#fff 30%)}
[data-th="bento"] .lc-hero-art{padding:clamp(14px,2vw,22px);border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 10%,#fff),#eef0fa);border:1px solid var(--g200)}
[data-th="bento"] .lc-sec{padding-top:clamp(52px,6vw,96px)}
[data-th="bento"] :is(.lc-card,.vcard){border-radius:26px;border-color:var(--g150);background:#fff}
[data-th="bento"] .vcards .vcard:nth-child(3n+1){background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 9%,#fff),#fff 65%)}
[data-th="bento"] .vcards .vcard:nth-child(3n+3){background:var(--g50)}
[data-th="bento"] .vg{border-radius:20px}
[data-th="bento"] .mx-stat{border-radius:28px;background:#fff;border-color:var(--g150);box-shadow:0 30px 60px -48px rgba(13,30,110,.6)}
[data-th="bento"] .vng-list li{border-radius:24px}
[data-th="bento"] .mx-q{border-radius:18px}
[data-th="bento"] .lc-crm{border-radius:32px}

/* =================== 6. story rail =================== */
[data-th="rail"] .lc-sec > .inner{position:relative;padding-left:clamp(0px,4vw,72px)}
[data-th="rail"] .lc-sec > .inner::before{content:"";position:absolute;left:clamp(20px,4vw,44px);top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--g300) 12%,var(--g300) 88%,transparent)}
@media (max-width:900px){[data-th="rail"] .lc-sec > .inner::before{display:none}[data-th="rail"] .lc-sec > .inner{padding-left:var(--gutter)}}
[data-th="rail"] .lc-center{text-align:left}
[data-th="rail"] .lc-center-eb{justify-content:flex-start}
[data-th="rail"] .h2{font-size:clamp(30px,3.4vw,46px)}
[data-th="rail"] :is(.lc-card,.vcard){background:#fff;border-color:var(--g150);border-radius:20px}
[data-th="rail"] .vcard-n{display:inline-block;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--acc) 10%,#fff)}
[data-th="rail"] .mx-stat{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,#fff),#fff);border-color:var(--g150)}

/* =================== 7. colour block =================== */
[data-th="block"] .lc-hero-copy{padding:clamp(28px,3.4vw,52px);border-radius:26px;color:#fff;background:linear-gradient(140deg,var(--acc),var(--acc2))}
[data-th="block"] .lc-hero-copy :is(.lc-h1,.lc-h1 span){color:#fff;-webkit-text-fill-color:#fff;background:none}
[data-th="block"] .lc-hero-copy :is(.lc-lede,.lc-trust,.lc-crumb,.lc-crumb a,.lum-eyebrow){color:rgba(255,255,255,.82)}
[data-th="block"] .lc-hero-copy .lum-eyebrow::before{background:rgba(255,255,255,.7)}
[data-th="block"] .lc-hero-copy .btn-brand{background:#fff;color:var(--acc)}
[data-th="block"] .lc-hero-copy .btn-white{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
[data-th="block"] .lc-hero-copy .lc-trust svg{color:#fff}
[data-th="block"] .lc-proof{padding-top:clamp(56px,7vw,110px)}
[data-th="block"] .mx-stat{border:0;border-radius:0;background:var(--acc);color:#fff;padding:clamp(30px,3.6vw,52px) clamp(24px,3vw,44px)}
[data-th="block"] .mx-stat-n b{background:none;color:#fff;-webkit-text-fill-color:#fff}
[data-th="block"] .mx-stat-t p,[data-th="block"] .mx-stat .lum-eyebrow{color:rgba(255,255,255,.82)}
[data-th="block"] .mx-stat-viz i{background:rgba(255,255,255,.5)}
[data-th="block"] :is(.lc-card,.vcard){border-radius:0;border-color:var(--g200)}
[data-th="block"] .vcards .vcard:nth-child(2){background:var(--g900);color:#fff}
[data-th="block"] .vcards .vcard:nth-child(2) :is(h3,p){color:#fff}
[data-th="block"] .vcards .vcard:nth-child(2) p{color:rgba(255,255,255,.74)}
[data-th="block"] .vcards .vcard:nth-child(2) .vg{background:#0f1020;border-color:#23264a}
[data-th="block"] .vng-list li{border-radius:0}
[data-th="block"] .mx-q{border-radius:0}

/* =================== 8. spec sheet =================== */
[data-th="spec"]{background:#fcfcfd}
[data-th="spec"] .lc-h1{font-size:clamp(34px,3.8vw,56px);letter-spacing:-.03em}
[data-th="spec"] .lc-sec{padding-top:clamp(44px,5vw,84px)}
[data-th="spec"] .lum-eyebrow,[data-th="spec"] .vcard-n,[data-th="spec"] .vz-step,[data-th="spec"] .vgt-when{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.12em}
[data-th="spec"] .h2{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.02em}
[data-th="spec"] :is(.lc-card,.vcard){border-radius:10px;border-color:var(--g200);background:#fff;box-shadow:none}
[data-th="spec"] .vcard-body{padding:16px 14px 14px}
[data-th="spec"] .vcard-body h3{font-size:18px}
[data-th="spec"] .vcard-body p{font-size:14.5px}
[data-th="spec"] .vg{border-radius:8px;height:190px}
[data-th="spec"] .vng-list li{border-radius:10px;padding:20px 18px}
[data-th="spec"] .mx-stat{border-radius:10px;background:#fff}
[data-th="spec"] .rx-table-wrap{border-radius:10px}
[data-th="spec"] .mx-q{border-radius:8px}
[data-th="spec"] .lc-crm{border-radius:14px}
[data-th="spec"] .lc-more a{border-radius:10px}

/* ============ v89: the page ending (CTA + "more" cards) follows the page design ============ */
.mx .cta{max-width:1280px;border-radius:28px;padding:clamp(44px,5vw,72px) clamp(24px,4vw,56px);text-align:left;overflow:hidden}
.mx .cta h2{font-family:var(--display);font-size:clamp(30px,3.4vw,48px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--g900);max-width:22ch}
.mx .cta h2 span{display:block;color:var(--acc)}
.mx .cta .row{justify-content:flex-start;margin-top:30px}
.mx .cta .deco{display:none}
.mx .cta::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 18%,transparent),transparent)}
[data-th="dark"] .mx-cta-zone,.mx [data-th="dark"] .cta{background:transparent}
[data-th="dark"] .cta{background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 40%,#0a0b1e),#08091a 70%);border:1px solid rgba(150,160,255,.24);box-shadow:0 50px 90px -60px rgba(90,80,255,.9)}
[data-th="dark"] .cta h2 span{background:linear-gradient(100deg,#9aa6ff,#a3f3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="block"] .cta{border-radius:0;border:0;background:linear-gradient(140deg,var(--acc),var(--acc2));color:#fff}
[data-th="block"] .cta h2,[data-th="block"] .cta h2 span{color:#fff}
[data-th="block"] .cta .btn-brand{background:#fff;color:var(--acc)}
[data-th="block"] .cta .btn-white{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45)}
[data-th="editorial"] .cta{border-radius:0;border:0;border-top:2px solid var(--g900);background:transparent;padding-inline:0}
[data-th="editorial"] .cta h2{font-size:clamp(34px,4.4vw,64px);max-width:18ch}
[data-th="editorial"] .cta::after{display:none}
[data-th="spec"] .cta{border-radius:12px;background:#fff;border:1px solid var(--g200)}
[data-th="spec"] .cta h2{font-size:clamp(26px,2.8vw,38px)}
[data-th="screen"] .cta{text-align:center;background:var(--g50);border:0}
[data-th="screen"] .cta h2{margin-inline:auto;text-align:center}
[data-th="screen"] .cta .row{justify-content:center}
[data-th="bento"] .cta{border-radius:36px;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 12%,#fff),#eef0fa);border:1px solid var(--g200)}
[data-th="rail"] .cta{border-radius:20px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,#fff),#fff);border:1px solid var(--g200)}
[data-th="split"] .cta{background:var(--g900);border:0}
[data-th="split"] .cta h2{color:#fff}
[data-th="split"] .cta h2 span{color:#9aa6ff}
[data-th="split"] .cta .btn-white{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}

/* "more" cards */
.mx .lc-more a{position:relative;padding:26px 22px 30px;border-radius:18px;transition:transform .3s,border-color .3s,box-shadow .3s,background-color .3s}
.mx .lc-more a:hover{transform:translateY(-4px);box-shadow:0 26px 44px -34px rgba(13,30,110,.5)}
.mx .lc-more b{font-size:17px;line-height:1.3}
.mx .lc-more em{font-size:18px}
.mx .lum-label{font-size:12px;letter-spacing:.16em}
[data-th="dark"] .lc-more a em{color:#9aa6ff}
[data-th="editorial"] .lc-more a{border-radius:0;border:0;border-top:1px solid var(--g300);background:transparent;padding-inline:0}
[data-th="block"] .lc-more a{border-radius:0}
[data-th="block"] .lc-more a:nth-child(2){background:var(--g900);border-color:var(--g900)}
[data-th="block"] .lc-more a:nth-child(2) :is(b,span){color:#fff}
[data-th="spec"] .lc-more a{border-radius:10px;padding:20px 18px 24px}
[data-th="bento"] .lc-more a{border-radius:24px}
[data-th="bento"] .lc-more a:nth-child(odd){background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 8%,#fff),#fff)}

/* section headings: a different treatment per design */
[data-th="editorial"] .h2 .dim,[data-th="block"] .h2 .dim{display:block}
[data-th="rail"] .lc-center .h2 .dim{display:block}
[data-th="spec"] .h2 .dim{color:var(--g500)}
[data-th="dark"] .lum-eyebrow::before{background:linear-gradient(90deg,#9aa6ff,#a3f3ff)}
[data-th="block"] .lum-eyebrow{color:var(--acc)}
[data-th="bento"] .lum-eyebrow,[data-th="rail"] .lum-eyebrow{padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--acc) 10%,#fff)}
[data-th="bento"] .lum-eyebrow::before,[data-th="rail"] .lum-eyebrow::before{display:none}
/* dark pages: keep the ending readable */
[data-th="dark"] .mx .cta h2,.mx [data-th="dark"] .cta h2,[data-th="dark"] .cta h2{color:#fff}
[data-th="dark"] .lc-more a b,[data-th="dark"] .lc-more a span{color:#fff}
[data-th="dark"] .lc-more a span{color:#9497c4}
[data-th="split"] .cta h2{color:#fff}
[data-th="block"] .cta h2{color:#fff}
[data-th="block"] .lc-more a:nth-child(2) span{color:rgba(255,255,255,.7)}

/* ---- v89: floating status chips beside the hero screen ---- */
.ha-wrap{position:relative}
.ha-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--g800);white-space:nowrap;
  box-shadow:0 0 0 1px rgba(20,24,80,.07),0 18px 32px -18px rgba(13,30,110,.55);animation:haFloat 5.5s ease-in-out infinite}
.ha-chip.c0{left:-22px;top:18%;animation-delay:-1.2s}
.ha-chip.c1{right:-18px;bottom:14%;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 18px 34px -16px color-mix(in srgb,var(--acc) 80%,transparent)}
@keyframes haFloat{50%{transform:translateY(-7px)}}
[data-th="dark"] .ha-chip.c0{background:#12132c;color:#e9eafc;box-shadow:0 0 0 1px rgba(150,160,255,.25),0 18px 32px -18px rgba(0,0,40,.9)}
.th-center .ha-chip.c0{left:2%}
.th-center .ha-chip.c1{right:2%}
@media (max-width:1100px){.ha-chip.c0{left:0}.ha-chip.c1{right:0}}
@media (max-width:760px){.ha-chip{display:none}}
@media (prefers-reduced-motion:reduce){.ha-chip{animation:none}}

/* v89: dark-page contrast fixes */
[data-th="dark"] .lc-crumb b{color:#dfe1fb}
[data-th="dark"] .vst-ring b,[data-th="dark"] .vst-ring span{color:#fff}
[data-th="dark"] .vst-ring circle{stroke:rgba(150,160,255,.2)}
[data-th="dark"] .vst-split span{color:#b3b6dd}
[data-th="dark"] .vst-split i{background:rgba(255,255,255,.14)}
[data-th="dark"] .vst-split p{color:#8e92c4}
[data-th="dark"] .mx-stat-viz i{background:linear-gradient(#9aa6ff,#5a52ff)}
[data-th="dark"] .lc-trust svg{color:#a3f3ff}
[data-th="dark"] .mx-link{color:#9aa6ff}
[data-th="dark"] .lc-p a{color:#9aa6ff}
.ha-chip.c0{left:-30px;top:10%}
.ha-chip.c1{right:-24px;bottom:12%}

/* ============ v90: readable text on every dark surface ============ */
/* dark pages: body copy, bold lead-ins and numerals */
[data-th="dark"] :is(.vnum p,.vnum b,.ved-lead,.ved-lead b,.vw-t b,.vtk-c b,.vng-list b,.vch-c b,.vlk-h b,.vlk-c p,.vob-t b,.vin-t b,.mx-p2 span,.vgt-card p,.rx-story p,.rx-post h3,.rx-plan h3,.vvs-c p,.vrn-l p){color:#fff}
[data-th="dark"] :is(.vnum p,.vlk-c p,.vgt-card p,.rx-story p,.vvs-c p,.vrn-l p,.vob-t p,.vin-t p,.rx-post p,.rx-plan-d){color:#b3b6dd}
[data-th="dark"] :is(.vnum p b,.vng-list p b,.ved-list p b,.vch-c p b,.vlk-c p b){color:#fff}
/* accent numerals and gradient text go light on dark */
[data-th="dark"] :is(.vnum em,.vcard-n,.vng-list em,.vz-step,.vcs-t,.vlk-tag,.vin-ic,.rx-post-meta em,.mx-link,.vch-t.z,.vcard-tag.z,.rx-verdict-eb){color:#9aa6ff}
[data-th="dark"] :is(.vtk-c em,.mx-p2 b,.rx-story-n,.vin-price b,.mx-stat-n b,.c-fig b,.vst-ring b){background:linear-gradient(120deg,#fff,#9aa6ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-th="dark"] :is(.vst-split span,.vst-split p,.vfc-l span,.vcg-h,.rx-story-seg,.rx-inc,.rx-count,.rx-roi-foot,.rx-formula,.mx-gnote,.vb-foot){color:#a9adcf}
[data-th="dark"] .vlk-c{background:rgba(255,255,255,.05);border-color:rgba(150,160,255,.18)}
[data-th="dark"] .vlk-h em{background:rgba(245,158,11,.16);color:#5a52ff}
[data-th="dark"] .vch-t,[data-th="dark"] .vcard-tag{background:rgba(255,255,255,.06);border-color:rgba(150,160,255,.2);color:#e9eafc}
[data-th="dark"] .vch-t.b{color:#fff}
[data-th="dark"] .rx-table thead th{color:#fff}
[data-th="dark"] .rx-toggle button{color:#c9ccff}
[data-th="dark"] .rx-toggle button[aria-checked="true"]{background:rgba(255,255,255,.12);color:#fff}
[data-th="dark"] :is(.rx-chip,.rx-search input,.rx-search){color:#e9eafc}
[data-th="dark"] .rx-chip{background:rgba(255,255,255,.06);border-color:rgba(150,160,255,.2)}
[data-th="dark"] .rx-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* stat bands that sit on a colour (split / block / editorial themes) */
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat :is(.vst-split span,.vst-split p,.vst-ring span,.lum-eyebrow,.mx-stat-t p){color:rgba(255,255,255,.86)}
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat :is(.vst-ring b,.mx-stat-n b){color:#fff;-webkit-text-fill-color:#fff;background:none}
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat .vst-ring circle{stroke:rgba(255,255,255,.22)}
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat .vst-ring .fg{stroke:#fff}
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat .vst-split i{background:rgba(255,255,255,.28)}
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat .vst-split i.z{background:#fff}
:is([data-th="split"],[data-th="block"],[data-th="editorial"]) .mx-stat .lum-eyebrow::before{background:rgba(255,255,255,.7)}
/* the blue hero panel on colour-block pages */
[data-th="block"] .lc-hero-copy :is(.lc-lede,.lc-trust li){color:rgba(255,255,255,.92)}
[data-th="block"] .lc-hero-copy .lc-crumb :is(a,b,span){color:rgba(255,255,255,.88)}
[data-th="block"] .lc-hero-copy .zw,[data-th="block"] .lc-hero-copy .zw.zp{color:#fff;-webkit-text-fill-color:#fff;background:none}
/* dark cards inside light pages */
[data-th="block"] .vcards .vcard:nth-child(2) :is(.vcard-n,.vcard-body p b){color:#9aa6ff}
[data-th="block"] .lc-more a:nth-child(2) em{color:#9aa6ff}

/* v90b: stronger selectors — these were being overridden by the base styles */
main.mx[data-th="dark"] .lum-eyebrow{color:#a9aef5}
main.mx[data-th="dark"] :is(.lc-lede,.lc-p,.vcard-body p,.lc-card > p,.vz-copy p,.vgt-card p,.mx-a p,.rx-story p){color:#b7bae0}
main.mx[data-th="dark"] .lc-trust li{color:#c3c6ef}
main.mx[data-th="dark"] .lc-trust svg{color:#a3f3ff}
main.mx[data-th="dark"] :is(.lc-crumb,.lc-crumb a,.lc-crumb span){color:#a2a6d2}
main.mx[data-th="dark"] .lc-crumb b{color:#eceefb}
main.mx[data-th="dark"] :is(.vcard-n,.vnum em,.vng-list em,.vz-step,.mx-qn,.lum-label,.rx-post-meta em){color:#9aa6ff}
main.mx[data-th="dark"] :is(.vcap,.vcg-h,.vsrc,.vb-foot){color:#8f93c6}
main.mx[data-th="dark"] .mx-stat :is(.vst-split span,.vst-split p,.mx-stat-t p,.lum-eyebrow){color:#b7bae0}
/* a stat band that sits on a solid colour, whatever the page design */
.mx-stat:is([data-th="split"] *,[data-th="block"] *,[data-th="editorial"] *) :is(span,p,b,em){-webkit-text-fill-color:currentColor}
main.mx .mx-stat .zw,main.mx .mx-stat .zw.zp{color:inherit;-webkit-text-fill-color:currentColor;background:none}
main.mx[data-th="dark"] :is(.vw-t > span,.vw-tags i,.vz-tags i){color:#bdc0e8}
main.mx[data-th="dark"] .vw-t b{color:#fff}

/* v90c: badge colours that carry white text */
.ap-score.warm{background:#5b63d6}
.app .ap-av,.vg .lc-av{text-shadow:0 1px 1px rgba(0,0,30,.35)}
main.mx[data-th="dark"] .ha-chip.c1,main.mx[data-th="dark"] .ap-btn.go{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 70%,#1a1cff),var(--acc2))}
main.mx[data-th="dark"] .vlk-tag{background:rgba(120,110,255,.18);box-shadow:inset 0 0 0 1px rgba(150,160,255,.28);color:#c9ccff}
main.mx[data-th="dark"] .vlk-tag svg{color:#9aa6ff}
main.mx[data-th="dark"] .vrc-h em{background:rgba(120,110,255,.2);box-shadow:inset 0 0 0 1px rgba(150,160,255,.3);color:#c9ccff}
/* ============ v92: AI Search Agent ("Voice & text search") — aurora design ============
   Palette: deep navy #070a24 · indigo #0018ff · violet #5a52ff · cyan #5a52ff · soft lavender #f5f4ff.
   Dark aurora bands (hero, stat, closing) alternate with light lavender sections. */
main.mx[data-th="aurora"]{--acc:#0018ff;--acc2:#0015db;--au-ink:#15133a;--au-lav:#f5f4ff;--au-line:#e4e2fb;background:var(--au-lav)}

/* ---- hero: animated aurora ---- */
[data-th="aurora"] .lc-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,7vw,104px) 0 clamp(64px,7vw,112px);color:#eef0ff;background:#070a24}
[data-th="aurora"] .lc-hero::before,[data-th="aurora"] .lc-hero::after{content:"";position:absolute;z-index:-1;inset:auto;border-radius:50%;filter:blur(70px);opacity:.75;animation:auDrift 16s ease-in-out infinite alternate}
[data-th="aurora"] .lc-hero::before{display:block;left:-8%;top:-18%;width:62%;height:78%;height:auto;aspect-ratio:1.4;background:radial-gradient(closest-side,#5b3cff,transparent);}
[data-th="aurora"] .lc-hero::after{right:-10%;top:4%;width:56%;aspect-ratio:1.3;background:radial-gradient(closest-side,#5a52ff,transparent);animation-delay:-6s}
[data-th="aurora"] .lc-hero .inner{position:relative}
[data-th="aurora"] .lc-hero .inner::before{content:"";position:absolute;z-index:-1;left:30%;top:46%;width:52%;aspect-ratio:1.6;border-radius:50%;background:radial-gradient(closest-side,rgba(217,70,239,.55),transparent);filter:blur(80px);animation:auDrift 19s ease-in-out infinite alternate-reverse}
@keyframes auDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(1.08)}100%{transform:translate(-4%,8%) scale(.96)}}
[data-th="aurora"] .lc-h1{color:#fff;font-size:clamp(40px,5.2vw,76px);letter-spacing:-.04em}
[data-th="aurora"] .lc-h1 span{background:linear-gradient(90deg,#a5b4fc,#a3f3ff 45%,#5a52ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="aurora"] .lc-hero :is(.lc-lede){color:#c9cdf5;font-size:clamp(16px,1.35vw,19px)}
[data-th="aurora"] .lc-hero :is(.lc-crumb,.lc-crumb a,.lc-crumb span){color:#a3a9e6}
[data-th="aurora"] .lc-hero .lc-crumb b{color:#fff}
[data-th="aurora"] .lc-hero .lum-eyebrow{color:#a3f3ff}
[data-th="aurora"] .lc-hero .lum-eyebrow::before{background:linear-gradient(90deg,#5a52ff,#5a52ff)}
[data-th="aurora"] .lc-hero .lc-trust li{color:#c9cdf5}
[data-th="aurora"] .lc-hero .lc-trust svg{color:#a3f3ff}
[data-th="aurora"] .lc-hero .btn-brand{background:linear-gradient(135deg,#0018ff,#0018ff 55%,#0018ff);border:0;box-shadow:0 18px 36px -16px rgba(99,102,241,.9)}
[data-th="aurora"] .lc-hero .btn-white{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(190,196,255,.35)}
[data-th="aurora"] .lc-hero .lc-crumb{justify-content:center}
[data-th="aurora"] .lc-hero .zw,[data-th="aurora"] .lc-hero .zw.zp{background:linear-gradient(90deg,#fff,#a3f3ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---- the voice console ---- */
.vx{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);max-width:1060px;margin:0 auto;text-align:left;border-radius:30px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(190,196,255,.28);
  box-shadow:0 60px 110px -60px rgba(10,8,60,.95),inset 0 1px 0 rgba(255,255,255,.18);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.vx-glow{position:absolute;inset:-40% 0 auto;height:80%;background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent);pointer-events:none}
.vx-left{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,40px);border-right:1px solid rgba(190,196,255,.18)}
.vx-orb{position:relative;display:grid;place-items:center;width:128px;height:128px}
.vx-orb span{position:relative;z-index:1;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;color:#fff;
  background:conic-gradient(from 0deg,#6366f1,#5a52ff,#5a52ff,#5a52ff,#6366f1);box-shadow:0 0 40px rgba(139,92,246,.7),inset 0 -8px 18px rgba(10,8,60,.35);animation:vxSpin 8s linear infinite}
.vx-orb span svg{width:34px;height:34px;animation:vxSpin 8s linear infinite reverse}
.vx-orb i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(165,180,252,.55);animation:vxRing 2.4s ease-out infinite}
.vx-orb i:nth-child(2){animation-delay:.8s}
.vx-orb i:nth-child(3){animation-delay:1.6s}
@keyframes vxSpin{to{transform:rotate(360deg)}}
@keyframes vxRing{from{transform:scale(.62);opacity:1}to{transform:scale(1.35);opacity:0}}
.vx-state{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a3f3ff}
.vx-state em{width:8px;height:8px;border-radius:50%;background:#5a52ff;box-shadow:0 0 0 4px rgba(34,211,238,.2);animation:vxBlink 1.2s ease infinite}
@keyframes vxBlink{50%{opacity:.35}}
.vx-wave{display:flex;align-items:center;gap:3px;width:100%;max-width:420px;height:58px}
.vx-wave i{flex:1;height:var(--h);border-radius:3px;background:linear-gradient(#a5b4fc,#5a52ff);opacity:.9;animation:vxWave 1.15s ease-in-out infinite;animation-delay:calc(var(--i) * -.07s)}
.vx.quiet .vx-wave i{animation-play-state:paused;opacity:.35}
@keyframes vxWave{50%{transform:scaleY(.35)}}
.vx-q{min-height:3.2em;margin:0;max-width:30ch;text-align:center;font-family:var(--display);font-size:clamp(19px,1.8vw,24px);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:#fff}
.vx-caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.12em;background:#a3f3ff;animation:vxBlink .9s step-end infinite}
.vx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:4px 0 0;padding:0}
.vx-chips li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(190,196,255,.25);font-size:12.5px;font-weight:600;color:#dfe2ff}
.vx-right{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,40px);background:rgba(7,10,36,.35)}
.vx-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 16px;font-size:13px;color:#a3a9e6}
.vx-cap b{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.vx-big{display:flex;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(190,196,255,.18)}
.vx-big b{font-family:var(--display);font-size:clamp(46px,5vw,64px);font-weight:600;line-height:1;letter-spacing:-.04em;background:linear-gradient(120deg,#fff,#a3f3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.vx-big span{font-size:16px;font-weight:600;color:#c9cdf5}
.vx-rows{display:grid;gap:10px;list-style:none;margin:16px 0 0;padding:0}
.vx-rows li{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(190,196,255,.16);font-size:15px;color:#eef0ff}
.vx.ans .vx-rows li{animation:vxIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .12s)}
@keyframes vxIn{from{opacity:0;transform:translateY(10px)}}
.vx-dot{flex:none;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#5a52ff,#5a52ff);box-shadow:0 0 10px rgba(34,211,238,.7)}
.vx-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:auto;padding-top:20px}
.vx-btn{padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;color:#dfe2ff;background:rgba(255,255,255,.08);border:1px solid rgba(190,196,255,.25)}
.vx-btn.go{color:#fff;border:0;background:linear-gradient(135deg,#0018ff,#0018ff 55%,#0018ff);box-shadow:0 16px 30px -14px rgba(99,102,241,.9)}
.vx-note{margin:12px 0 0;text-align:right;font-size:12.5px;color:#a3a9e6}

/* ---- light lavender sections ---- */
[data-th="aurora"] .lc-sec{padding-top:clamp(60px,7vw,112px)}
[data-th="aurora"] .h2{color:var(--au-ink)}
[data-th="aurora"] .h2 .dim{display:block;background:linear-gradient(90deg,#0018ff,#5a52ff 55%,#0015db);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="aurora"] .lum-eyebrow{color:#5b3cff}
[data-th="aurora"] .lum-eyebrow::before{background:linear-gradient(90deg,#5a52ff,#5a52ff)}
[data-th="aurora"] :is(.lc-card,.vcard){background:#fff;border:1px solid var(--au-line);border-radius:26px;box-shadow:0 30px 60px -50px rgba(40,30,140,.55)}
[data-th="aurora"] :is(.lc-card,.vcard):hover{border-color:#c7c2fb;box-shadow:0 40px 70px -46px rgba(79,70,229,.6)}
[data-th="aurora"] .vcards .vcard:nth-child(1){background:linear-gradient(150deg,#eef0ff,#fff 60%)}
[data-th="aurora"] .vcards .vcard:nth-child(2){background:linear-gradient(160deg,#ecfeff,#fff 62%)}
[data-th="aurora"] .vcards .vcard:nth-child(3){background:linear-gradient(160deg,#faf5ff,#fff 62%)}
[data-th="aurora"] .vcard-n{display:inline-block;padding:4px 11px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#0018ff,#0018ff)}
[data-th="aurora"] .vcards .vcard:nth-child(2) .vcard-n{background:linear-gradient(135deg,#0018ff,#0015db)}
[data-th="aurora"] .vcards .vcard:nth-child(3) .vcard-n{background:linear-gradient(135deg,#5a52ff,#5a52ff)}
[data-th="aurora"] .vg{background:radial-gradient(circle,rgba(79,70,229,.09) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(180deg,#fbfaff,#f1efff);border-color:var(--au-line)}
[data-th="aurora"] .vwalk::before{background:linear-gradient(180deg,transparent,#ebe8ff 18% 82%,transparent)}
[data-th="aurora"] .vw-tab.on{border-color:#d7d2fd;box-shadow:0 24px 44px -30px rgba(79,70,229,.55)}
[data-th="aurora"] .vw-tab.on .vw-n{background:linear-gradient(135deg,#0018ff,#0018ff 60%,#0018ff)}
[data-th="aurora"] .vw-prog{background:linear-gradient(90deg,#6366f1,#5a52ff)}
[data-th="aurora"] .vw-window{border-color:var(--au-line);box-shadow:0 60px 100px -60px rgba(40,30,140,.6),0 0 0 8px rgba(255,255,255,.7)}
/* signal console: already dark — give it the aurora glow */
[data-th="aurora"] .vco-panel{background:radial-gradient(420px 260px at 90% 0%,rgba(139,92,246,.45),transparent 70%),radial-gradient(360px 240px at 0% 100%,rgba(34,211,238,.25),transparent 70%),linear-gradient(#0d0b33,#070a24)}
[data-th="aurora"] .vco-r em{background:linear-gradient(90deg,#5a52ff,#5a52ff)}
[data-th="aurora"] .vco-r svg{stroke:#a3f3ff}
[data-th="aurora"] .vnum em{color:#5b3cff}
[data-th="aurora"] .vnum li{border-color:var(--au-line)}
/* stat band: a dark aurora strip */
[data-th="aurora"] .mx-stat{position:relative;overflow:hidden;border:0;color:#fff;background:radial-gradient(500px 240px at 12% 0%,rgba(139,92,246,.55),transparent 70%),radial-gradient(460px 240px at 100% 100%,rgba(34,211,238,.35),transparent 70%),#0a0b2e}
[data-th="aurora"] .mx-stat-n b{background:linear-gradient(120deg,#fff,#a3f3ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-th="aurora"] .mx-stat :is(.mx-stat-t p,.vst-ring span,.lum-eyebrow){color:#c9cdf5}
[data-th="aurora"] .mx-stat .vst-ring b{color:#fff}
[data-th="aurora"] .mx-stat .vst-ring circle{stroke:rgba(190,196,255,.22)}
[data-th="aurora"] .mx-stat .vst-ring .fg{stroke:#5a52ff}
[data-th="aurora"] .mx-stat .zw,[data-th="aurora"] .mx-stat .zw.zp{color:#fff;-webkit-text-fill-color:#fff;background:none}
/* CRM record + FAQ + more */
[data-th="aurora"] .lc-crm{background:linear-gradient(150deg,#eef0ff,#f5f4ff 55%,#ecfeff);border-color:var(--au-line)}
[data-th="aurora"] .vrc-card{border-color:var(--au-line)}
[data-th="aurora"] .mx-q{background:#fff;border-color:var(--au-line)}
[data-th="aurora"] .mx-q[open]{border-color:#c7c2fb;box-shadow:0 20px 40px -34px rgba(79,70,229,.6)}
[data-th="aurora"] .mx-qn{color:#5a52ff}
[data-th="aurora"] .lc-more a{background:#fff;border-color:var(--au-line)}
[data-th="aurora"] .lc-more a:hover{border-color:#c7c2fb}
[data-th="aurora"] .lc-more em{color:#5b3cff}
/* closing: aurora panel */
[data-th="aurora"] .cta{border:0;color:#fff;background:radial-gradient(520px 280px at 0% 0%,rgba(139,92,246,.6),transparent 70%),radial-gradient(520px 280px at 100% 100%,rgba(34,211,238,.4),transparent 70%),#0a0b2e}
[data-th="aurora"] .cta h2{color:#fff}
[data-th="aurora"] .cta h2 span{background:linear-gradient(90deg,#a5b4fc,#a3f3ff 50%,#5a52ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-th="aurora"] .cta h2 .zw{background:linear-gradient(90deg,#fff,#a3f3ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-th="aurora"] .cta .btn-brand{background:linear-gradient(135deg,#0018ff,#0018ff 55%,#0018ff);border:0}
[data-th="aurora"] .cta .btn-white{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(190,196,255,.35)}
[data-th="aurora"] .cta::after{display:none}

@media (max-width:900px){
  .vx{grid-template-columns:minmax(0,1fr)}
  .vx-left{border-right:0;border-bottom:1px solid rgba(190,196,255,.18)}
  .vx-actions{justify-content:flex-start}
  .vx-note{text-align:left}
}
@media (max-width:520px){.vx-orb{width:104px;height:104px}.vx-orb span{width:68px;height:68px}.vx-rows li{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  [data-th="aurora"] .lc-hero::before,[data-th="aurora"] .lc-hero::after,[data-th="aurora"] .lc-hero .inner::before,.vx *{animation:none!important}
}
/* ============ v93: AI Search Agent — "Talk to your pipeline, voice or text." as a live chat thread ============ */
.tk .h2 .dim{display:block}
.tk-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);column-gap:clamp(24px,4vw,56px);
  margin-top:var(--block-y);padding:clamp(28px,4vw,56px) clamp(16px,3vw,40px);border-radius:36px;
  background:radial-gradient(520px 320px at 50% 0%,rgba(139,92,246,.16),transparent 70%),radial-gradient(420px 300px at 100% 100%,rgba(34,211,238,.14),transparent 70%),linear-gradient(180deg,#eeedff,#f8f7ff);
  border:1px solid #e4e2fb}
.tk-rail{display:none}
/* the chat window is the middle column */
.tk-head,.tk-cell{background:#fff;border-inline:1px solid #e4e2fb}
.tk-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-top:1px solid #e4e2fb;border-bottom:1px solid #efedfc;border-radius:22px 22px 0 0}
.tk-head .va-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0018ff,#0018ff 55%,#0018ff)}
.tk-head div{display:flex;flex-direction:column}
.tk-head b{font-size:15px;color:#15133a}
.tk-head em{font-style:normal;font-size:12.5px;color:#6b6a8f}
.tk-head i{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12px;font-weight:700;color:#0018ff}
.tk-head i::before{content:"";width:8px;height:8px;border-radius:50%;background:#0018ff;box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.tk-cell{display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
.tk-cell.last{padding-bottom:24px;border-bottom:1px solid #e4e2fb;border-radius:0 0 22px 22px;box-shadow:0 40px 70px -50px rgba(40,30,140,.55)}
/* messages */
.tk-msg{max-width:86%;border-radius:20px;padding:14px 16px}
.tk-msg.me{align-self:flex-end;color:#fff;border-bottom-right-radius:6px;background:linear-gradient(135deg,#0018ff,#0018ff 60%,#0011b3);box-shadow:0 18px 34px -20px rgba(79,70,229,.8)}
.tk-msg.zu{align-self:flex-start;width:100%;max-width:100%;border:1px solid #ebe8fd;border-top-left-radius:6px;background:linear-gradient(180deg,#fbfaff,#fff)}
.tk-voice{display:flex;align-items:center;gap:10px}
.tk-play{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:#fff}
.tk-play::after{content:"";position:absolute;left:12px;top:9px;border-left:9px solid #0018ff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tk-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;min-width:120px}
.tk-wave i{flex:1;height:var(--h);border-radius:2px;background:rgba(255,255,255,.85)}
.tk-grid.in .tk-wave i{animation:vxWave 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -.07s)}
.tk-voice em{font-style:normal;font-size:12px;opacity:.85}
.tk-said{margin:10px 0 0;font-size:16px;font-weight:600;line-height:1.4}
.tk-meta{margin:6px 0 0;font-size:12px;opacity:.82}
.tk-who{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tk-who .va-logo{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#0018ff,#0018ff)}
.tk-who b{font-size:13.5px;color:#15133a}
.tk-who em{font-style:normal;font-size:12px;color:#6b6a8f}
.tk-typing{display:flex;gap:5px;height:18px;align-items:center;overflow:hidden}
.tk-typing i{width:7px;height:7px;border-radius:50%;background:#5a52ff;animation:tkDot 1s ease-in-out infinite}
.tk-typing i:nth-child(2){animation-delay:.15s;background:#6d6af0}
.tk-typing i:nth-child(3){animation-delay:.3s;background:#0015db}
@keyframes tkDot{50%{transform:translateY(-4px);opacity:.5}}
.tk-big{display:flex;align-items:baseline;gap:8px;margin:0}
.tk-big b{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.02em;background:linear-gradient(120deg,#0018ff,#0018ff 55%,#0018ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-big span{font-size:15px;font-weight:600;color:#3b3a63}
.tk-rows{display:grid;gap:8px;list-style:none;margin:12px 0 0;padding:0}
.tk-rows li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #efedfc;font-size:14px}
.tk-rows b{font-weight:600;color:#15133a;white-space:nowrap}
.tk-rows span{justify-self:end;font-size:12.5px;color:#5b5a80;text-align:right}
.tk-dot{width:9px;height:9px;border-radius:50%}
.tk-dot.bad{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.tk-dot.warn{background:#0018ff;box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.tk-src{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tk-src span{padding:4px 10px;border-radius:999px;background:#f1effe;font-size:12px;font-weight:600;color:#4338ca}
.tk-lead{margin:0;font-size:14.5px;font-weight:600;color:#15133a}
.tk-mail{margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid #ebe8fd;background:#fff}
.tk-mail p{display:flex;gap:10px;margin:0;padding:5px 0;border-bottom:1px solid #f3f2fc;font-size:13.5px;color:#15133a}
.tk-mail p span{width:22px;color:#6b6a8f}
.tk-mail .tk-mail-b{display:block;border:0;padding-top:9px;line-height:1.55;color:#3b3a63}
.tk-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.tk-btn{padding:9px 16px;border-radius:11px;font-size:13.5px;font-weight:600;color:#3b3a63;background:#f1effe}
.tk-btn.go{color:#fff;background:linear-gradient(135deg,#0018ff,#0018ff 55%,#0018ff);box-shadow:0 14px 26px -14px rgba(79,70,229,.9)}
.tk-guard{margin:10px 0 0;text-align:right;font-size:12px;color:#5b5a80}
/* annotations beside each message */
.tk-note{position:relative;align-self:center;max-width:320px}
.tk-note.l{justify-self:end;text-align:right}
.tk-note.r{justify-self:start}
.tk-note h3{margin:10px 0 0;font-family:var(--display);font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-.015em;color:#15133a}
.tk-note p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:#4a4870}
.tk-n{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0018ff,#0018ff)}
.tk-note[style*="--k:1"] .tk-n{background:linear-gradient(135deg,#0018ff,#0015db)}
.tk-note[style*="--k:2"] .tk-n{background:linear-gradient(135deg,#5a52ff,#5a52ff)}
.tk-note::after{content:"";position:absolute;top:50%;width:clamp(16px,3vw,44px);height:2px;border-radius:2px}
.tk-note.l::after{right:calc(-1 * clamp(24px,4vw,56px));background:linear-gradient(90deg,transparent,#a5b4fc)}
.tk-note.r::after{left:calc(-1 * clamp(24px,4vw,56px));background:linear-gradient(90deg,#a3f3ff,transparent)}
/* sequence: the voice note, then ZUUZ typing -> answer, then typing -> drafted work */
@media (prefers-reduced-motion:no-preference){
  .tk-msg,.tk-note{opacity:0;transform:translateY(14px)}
  .tk-grid.in .tk-msg,.tk-grid.in .tk-note{animation:tkIn .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k) * 1.5s + .2s)}
  .tk-msg.zu .tk-body{opacity:0;max-height:0;overflow:hidden}
  .tk-grid.in .tk-msg.zu .tk-body{animation:tkBody .6s ease both;animation-delay:calc(var(--k) * 1.5s + 1.15s)}
  .tk-grid.in .tk-msg.zu .tk-typing{animation:tkGone .3s ease both;animation-delay:calc(var(--k) * 1.5s + 1s)}
}
@media (prefers-reduced-motion:reduce){.tk-typing{display:none}}
@keyframes tkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tkBody{from{opacity:0;max-height:0}to{opacity:1;max-height:560px}}
@keyframes tkGone{to{opacity:0;height:0;margin:0}}
@media (max-width:980px){
  .tk-grid{grid-template-columns:minmax(0,1fr);padding:20px 14px}
  .tk-grid > *{order:var(--o,99)}
  .tk-side{display:none}
  .tk-note,.tk-note.l,.tk-note.r{justify-self:stretch;text-align:left;max-width:none;margin:22px 4px 12px}
  .tk-note::after{display:none}
  .tk-head,.tk-cell,.tk-cell.last{border-radius:18px;border:1px solid #e4e2fb}
  .tk-msg{max-width:100%}
}
@media (max-width:520px){.tk-rows li{grid-template-columns:auto 1fr}.tk-rows span{grid-column:2;justify-self:start;text-align:left}}
/* ============ v94: AI Search Agent — "How it runs" walkthrough in the aurora palette ============
   The app window becomes a dark aurora glass panel (like the hero voice console); the step list uses
   lavender + violet; the illustrations inside use indigo → violet → cyan instead of the generic blue. */
[data-th="aurora"] .vwalk{--acc:#0011b3;--acc2:#0015db}
[data-th="aurora"] .vwalk::before{background:linear-gradient(180deg,transparent,#ebe8ff 16% 84%,transparent)}
[data-th="aurora"] .vwalk .lum-eyebrow{color:#5b3cff}

/* step list */
[data-th="aurora"] .vw-tab{border-radius:20px}
[data-th="aurora"] .vw-tab:hover{background:rgba(255,255,255,.7)}
[data-th="aurora"] .vw-tab.on{background:#fff;border-color:#d9d4fd;box-shadow:0 26px 48px -32px rgba(79,70,229,.6)}
[data-th="aurora"] .vw-n{background:#efedfe;color:#5b3cff}
[data-th="aurora"] .vw-tab.on .vw-n{color:#fff;background:linear-gradient(135deg,#0018ff,#0018ff 60%,#0018ff);box-shadow:0 10px 20px -10px rgba(79,70,229,.8)}
[data-th="aurora"] .vw-t b{color:#15133a}
[data-th="aurora"] .vw-t > span:not(.lc-tags){color:#4a4870}
[data-th="aurora"] .vw-tags i{background:#f1effe;border-color:#e2ddfd;color:#4c3aa8}
[data-th="aurora"] .vw-prog{height:3px;background:linear-gradient(90deg,#0018ff,#5a52ff,#5a52ff)}

/* the app window: dark aurora glass */
[data-th="aurora"] .vw-window{border:1px solid rgba(190,196,255,.28);
  background:radial-gradient(420px 300px at 20% 10%,rgba(139,92,246,.45),transparent 70%),radial-gradient(380px 300px at 90% 90%,rgba(34,211,238,.28),transparent 70%),radial-gradient(300px 220px at 70% 30%,rgba(217,70,239,.22),transparent 70%),#0a0b2e;
  box-shadow:0 60px 110px -60px rgba(20,14,90,.9),0 0 0 8px rgba(255,255,255,.6)}
[data-th="aurora"] .vw-chrome{background:rgba(255,255,255,.05);border-bottom:1px solid rgba(190,196,255,.18)}
[data-th="aurora"] .vw-chrome i{background:rgba(190,196,255,.32)}
[data-th="aurora"] .vw-chrome span{background:rgba(255,255,255,.08);color:#c9cdf5}
[data-th="aurora"] .vw-stage .vg{background:transparent;border:0}
[data-th="aurora"] .vw-stage .vg::after{background:radial-gradient(closest-side,rgba(10,8,60,.55),transparent)}
[data-th="aurora"] .vw-stage .vg-glow{background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent)}

/* illustrations inside the window */
[data-th="aurora"] .vwalk .vv-orb{background:conic-gradient(from 0deg,#6366f1,#5a52ff,#5a52ff,#5a52ff,#6366f1);box-shadow:0 0 44px rgba(139,92,246,.75),inset 0 -8px 18px rgba(10,8,60,.35)}
[data-th="aurora"] .vwalk .vv-orb::before,[data-th="aurora"] .vwalk .vv-orb::after{border-color:rgba(165,180,252,.6)}
[data-th="aurora"] .vwalk .vv-wave i{background:linear-gradient(#5a52ff,#5a52ff)}
[data-th="aurora"] .vwalk .vchip.brand{background:linear-gradient(135deg,#0018ff,#0018ff 55%,#0018ff);box-shadow:0 14px 26px -12px rgba(124,58,237,.8)}
[data-th="aurora"] .vwalk .vp{box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(124,58,237,.12),0 5px 0 -1px #ddd8fb,0 26px 40px -22px rgba(6,4,40,.8)}
[data-th="aurora"] .vwalk .vse-bar{background:#f5f3ff;box-shadow:inset 0 0 0 1.5px #bdc3ff}
[data-th="aurora"] .vwalk .vse-bar svg{stroke:#0018ff}
[data-th="aurora"] .vwalk .vtype{border-color:#0018ff}
[data-th="aurora"] .vwalk .vsrc{color:#6b5bd6}
[data-th="aurora"] .vwalk .vb-h svg{stroke:#0018ff}
[data-th="aurora"] .vwalk .vb-row{border-left-color:#bdc3ff}
[data-th="aurora"] .vwalk .vb-back{background:#e9e5ff}
[data-th="aurora"] .vwalk .vcap{color:#6b6a8f}
/* ============ v96: Customer Renewals — blue gradient theme, no green anywhere ============
   Palette: ink #0b1b4d · deep #0f2a7a · royal #0015db · blue #0018ff · sky #5a52ff · pale #dbeafe · soft #f3f7ff.
   Gradients run royal → blue (dark enough for white text) with a sky glow as decoration. Replaces v95's teal. */
#page-customer-renewals-subscriptions{--rb-ink:#0b1b4d;--rb-deep:#0f2a7a;--rb:#0015db;--rb2:#0018ff;--rb-sky:#5a52ff;--rb-pale:#dbeafe;--rb-soft:#f3f7ff;--rb-line:#d6e4ff;
  --rb-shadow:rgba(15,40,120,.4);--rb-grad:linear-gradient(135deg,#1e3a8a,#0015db 45%,#0018ff);background:linear-gradient(180deg,#fff,#f5f8ff 40%,#fff)}
#page-customer-renewals-subscriptions > *{--acc:#0015db;--acc2:#0018ff}
/* headings */
#page-customer-renewals-subscriptions .h2 .dim{background:linear-gradient(90deg,#0015db,#0018ff 55%,#4d5dff);-webkit-background-clip:text;background-clip:text;color:transparent}
#page-customer-renewals-subscriptions .lum-eyebrow{color:var(--rb)}
#page-customer-renewals-subscriptions .lum-eyebrow::before{background:linear-gradient(90deg,#0015db,#5a52ff)}
#page-customer-renewals-subscriptions .lc-p a,#page-customer-renewals-subscriptions .mx-link{color:var(--rb)}
/* hero: blue gradient block with a sky glow */
#page-customer-renewals-subscriptions .lc-hero-copy{position:relative;overflow:hidden;background:radial-gradient(420px 260px at 100% 0%,rgba(96,165,250,.45),transparent 70%),var(--rb-grad)}
#page-customer-renewals-subscriptions .lc-hero-copy .lum-eyebrow{color:rgba(255,255,255,.92)}
#page-customer-renewals-subscriptions .lc-hero-copy .lum-eyebrow::before{background:rgba(255,255,255,.75)}
#page-customer-renewals-subscriptions .lc-hero-copy :is(.lc-lede,.lc-trust li,.lc-crumb a,.lc-crumb span,.lc-crumb b){color:#fff}
#page-customer-renewals-subscriptions .lc-hero-copy .btn-brand{color:var(--rb)}
/* hero app screen */
#page-customer-renewals-subscriptions .app{--ac:#0015db;--ac2:#0018ff;box-shadow:0 40px 80px -40px var(--rb-shadow),0 0 0 1px var(--line)}
#page-customer-renewals-subscriptions .ap-score.warm{background:#3b5bdb}
#page-customer-renewals-subscriptions .ap-av[style*="#0011b3"]{background:#1e40af!important}
#page-customer-renewals-subscriptions .ap-av[style*="#5a4fe0"]{background:#3b5bdb!important}
#page-customer-renewals-subscriptions .ap-av[style*="#0018ff"]{background:#0015db!important}
#page-customer-renewals-subscriptions .ha-chip.c0{box-shadow:0 0 0 1px rgba(15,40,120,.08),0 18px 32px -18px var(--rb-shadow)}
#page-customer-renewals-subscriptions .ha-chip.c1{background:var(--rb-grad)}
/* stat band + closing panel */
#page-customer-renewals-subscriptions .mx-stat,#page-customer-renewals-subscriptions .cta{background:radial-gradient(420px 220px at 100% 0%,rgba(96,165,250,.4),transparent 70%),var(--rb-grad)}
#page-customer-renewals-subscriptions .cta .zw,#page-customer-renewals-subscriptions .cta .zw.zp{background:none;color:#fff;-webkit-text-fill-color:#fff}
#page-customer-renewals-subscriptions .cta .btn-brand{color:var(--rb)}
/* cards */
#page-customer-renewals-subscriptions .vcard-n{color:var(--rb)}
#page-customer-renewals-subscriptions .vcards .vcard:nth-child(2){background:linear-gradient(160deg,#16307f,#0b1b4d);border-color:#16307f}
#page-customer-renewals-subscriptions .vcards .vcard:nth-child(2) .vg{background:radial-gradient(circle,rgba(147,197,253,.14) 1px,transparent 1.3px) 0 0/14px 14px,#0c1d57;border-color:#1c3a8f}
#page-customer-renewals-subscriptions .vcards .vcard:nth-child(2) .vcard-n{color:#5a52ff}
#page-customer-renewals-subscriptions .vcards .vcard:nth-child(2) p{color:#c7d8fb}
#page-customer-renewals-subscriptions .vg{background:radial-gradient(circle,rgba(29,78,216,.10) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(180deg,#f9fbff,#eef3ff);border-color:var(--rb-line)}
#page-customer-renewals-subscriptions .vg-glow{background:radial-gradient(closest-side,rgba(59,130,246,.18),transparent)}
#page-customer-renewals-subscriptions .vp{box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(15,40,120,.07),0 5px 0 -1px #dbe5fb,0 22px 34px -20px var(--rb-shadow)}
#page-customer-renewals-subscriptions .vchip{box-shadow:0 0 0 1px rgba(15,40,120,.07),0 12px 22px -12px var(--rb-shadow)}
#page-customer-renewals-subscriptions .vchip.brand{background:var(--rb-grad)}
#page-customer-renewals-subscriptions .vchip.good{background:#e7efff;color:#0015db}
#page-customer-renewals-subscriptions .vch-bar i{background:linear-gradient(#dbeafe,#a9c7fb)}
#page-customer-renewals-subscriptions .vch-bar.hl i{background:linear-gradient(#4d5dff,#0015db);box-shadow:0 8px 14px -6px rgba(37,99,235,.7)}
#page-customer-renewals-subscriptions .vto-meter{background:linear-gradient(90deg,#5a52ff,#0018ff,#1e3a8a)}
#page-customer-renewals-subscriptions .vto-lab span:first-child::after{content:""}
#page-customer-renewals-subscriptions :is(.vg-tone,.vto-b,.vp.vto-m){box-shadow:0 0 0 1px rgba(15,40,120,.07),0 10px 18px -12px var(--rb-shadow)}
#page-customer-renewals-subscriptions .vto-b.bad{box-shadow:0 0 0 1.5px #ffb4b4,0 10px 18px -12px rgba(120,20,20,.45)}
#page-customer-renewals-subscriptions :is(.vg-renew,.vg-tone,.vg-chart){border-color:var(--rb-line)}
/* approve buttons, ticks and check marks: blue, not green */
#page-customer-renewals-subscriptions .vok{background:#e7efff;color:#0015db}
#page-customer-renewals-subscriptions .vts-r .vbox{animation-name:rbCheck}
@keyframes rbCheck{to{background:#0015db;border-color:#0015db}}
#page-customer-renewals-subscriptions .in .vbtn.go,#page-customer-renewals-subscriptions .vg.on .vbtn.go{animation-name:rbBtn}
@keyframes rbBtn{0%,38%{background:#0018ff;transform:none}42%{transform:scale(.92)}46%,88%{background:#1e3a8a;transform:none}94%,100%{background:#0018ff}}
#page-customer-renewals-subscriptions .vdiff.on{background:linear-gradient(90deg,#e7efff,transparent)}
#page-customer-renewals-subscriptions .vrc-toast svg{background:#0018ff}
#page-customer-renewals-subscriptions .vrc.in .vrc-f b{animation-name:rbHi}
@keyframes rbHi{0%,44%{background:#eef3ff}50%,88%{background:#dbe7ff}}
#page-customer-renewals-subscriptions .vrc .vbtn.go{background:var(--rb-grad)}
#page-customer-renewals-subscriptions .vco-h em{color:#5a52ff}
#page-customer-renewals-subscriptions .vco-h em i{background:#5a52ff;box-shadow:0 0 0 4px rgba(96,165,250,.25)}
/* walkthrough */
#page-customer-renewals-subscriptions .vwalk::before{background:linear-gradient(180deg,transparent,#e8efff 18% 82%,transparent)}
#page-customer-renewals-subscriptions .vw-tab.on{border-color:var(--rb-line);box-shadow:0 20px 40px -28px var(--rb-shadow)}
#page-customer-renewals-subscriptions .vw-n{background:#e7efff;color:var(--rb)}
#page-customer-renewals-subscriptions .vw-tab.on .vw-n{color:#fff;background:var(--rb-grad)}
#page-customer-renewals-subscriptions .vw-prog{background:linear-gradient(90deg,#0015db,#5a52ff)}
#page-customer-renewals-subscriptions .vw-tags i{background:#f1f5ff;border-color:var(--rb-line);color:#1e3a8a}
#page-customer-renewals-subscriptions .vw-window{border-color:var(--rb-line);box-shadow:0 50px 80px -50px var(--rb-shadow),0 0 0 8px rgba(255,255,255,.6)}
#page-customer-renewals-subscriptions .vw-chrome{background:#f5f8ff;border-color:var(--rb-line)}
/* signal console: deep royal blue */
#page-customer-renewals-subscriptions .vco-panel{background:radial-gradient(420px 260px at 90% 0%,rgba(59,130,246,.45),transparent 70%),radial-gradient(340px 220px at 0% 100%,rgba(96,165,250,.16),transparent 70%),linear-gradient(#0f2a7a,#081744);box-shadow:0 50px 80px -40px rgba(8,23,68,.6),inset 0 1px 0 rgba(255,255,255,.08)}
#page-customer-renewals-subscriptions :is(.vco-h,.vco-r){border-color:rgba(147,197,253,.16)}
#page-customer-renewals-subscriptions .vco-r svg{stroke:#5a52ff}
#page-customer-renewals-subscriptions .vco-r em{background:linear-gradient(90deg,#0018ff,#5a52ff)}
#page-customer-renewals-subscriptions .vco-r span{color:#bfdbfe}
#page-customer-renewals-subscriptions .vco-foot{color:#a9c4f5}
#page-customer-renewals-subscriptions .vco-foot b{color:#fff}
#page-customer-renewals-subscriptions .vnum em{color:var(--rb)}
/* CRM record */
#page-customer-renewals-subscriptions .lc-crm{background:linear-gradient(160deg,#eef3ff,#f5f8ff 60%,#fff);border-color:var(--rb-line)}
#page-customer-renewals-subscriptions .vrc-card{border-color:var(--rb-line);box-shadow:0 8px 0 -2px #dbe5fb,0 40px 60px -36px var(--rb-shadow)}
#page-customer-renewals-subscriptions .vrc-f b{background:#eef3ff}
#page-customer-renewals-subscriptions .lc-crm-list li{border-color:var(--rb-line)}
#page-customer-renewals-subscriptions .lc-crm-list .mx-badge svg{color:#0015db}
/* FAQ, more */
#page-customer-renewals-subscriptions .mx-q{border-color:var(--rb-line)}
#page-customer-renewals-subscriptions .mx-qn{color:var(--rb)}
#page-customer-renewals-subscriptions .lc-more a{border-color:var(--rb-line)}
#page-customer-renewals-subscriptions .lc-more a em{color:var(--rb)}
#page-customer-renewals-subscriptions .lc-more a:nth-child(2){background:linear-gradient(160deg,#16307f,#0b1b4d);border-color:#16307f}
#page-customer-renewals-subscriptions .lc-more a:nth-child(2) em{color:#5a52ff}
#page-customer-renewals-subscriptions .lc-more a:hover{box-shadow:0 26px 44px -34px var(--rb-shadow)}
#page-customer-renewals-subscriptions .btn-brand{box-shadow:0 14px 28px -16px var(--rb-shadow)}
/* avatars and initials inside the illustrations: blue shades instead of teal / green */
#page-customer-renewals-subscriptions :is(.vmono,.lc-av,.ap-av)[style*="#0018ff"],#page-customer-renewals-subscriptions :is(.vmono,.lc-av,.ap-av)[style*="#0011b3"]{background:#1e40af!important}
#page-customer-renewals-subscriptions :is(.vmono,.lc-av,.ap-av)[style*="#22a55a"]{background:#0018ff!important}
/* ============ v97: Analytics page — the real ZUUZ Analytics screens (new.dev.zuuz.ai/analytics) ============
   Tokens taken from the app: Outfit, 12px/500 slate uppercase labels, 24px/600 values, 32px icon badges (10px radius)
   with tinted backgrounds, white cards with hairline borders, brand blue #0018ff bars. */
.az,.az-grid{--az-ink:oklch(0.17 0.02 264);--az-dim:oklch(0.55 0.035 264);--az-line:#e7e9f1;--az-soft:#f6f7fb;--az-blue:#0018ff;
  font-family:"Outfit Variable","Outfit",var(--sans);color:var(--az-ink)}
/* the app window */
.az{position:relative;max-width:1180px;margin:0 auto;text-align:left;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 60px 110px -60px rgba(10,20,90,.55),0 0 0 1px var(--az-line)}
.az-top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--az-line)}
.az-crumb{font-size:13px;color:var(--az-dim)}
.az-crumb i{font-style:normal;margin:0 5px;opacity:.6}
.az-crumb b{font-weight:600;color:var(--az-ink)}
.az-ask{display:flex;align-items:center;gap:8px;margin:0 auto;width:min(360px,38%);padding:7px 12px;border-radius:9px;background:var(--az-soft);border:1px solid var(--az-line);font-size:13px;color:var(--az-dim)}
.az-ask svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.az-ask kbd{margin-left:auto;font:inherit;font-size:11.5px;opacity:.8}
.az-agent{padding:6px 12px;border-radius:9px;border:1px solid var(--az-line);font-size:13px;font-weight:600}
.az-body{padding:18px 22px 20px}
.az-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.az-head h3{margin:0;font-family:inherit;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--az-ink)}
.az-ctl{display:flex;gap:10px}
.az-seg,.az-range,.az-seg2{display:inline-flex;gap:2px;padding:3px;border-radius:10px;border:1px solid var(--az-line);background:#fff}
.az-seg span,.az-range span,.az-seg2 span{padding:5px 11px;border-radius:7px;font-size:13px;color:var(--az-dim)}
.az-seg .on,.az-seg2 .on{background:#eef1ff;color:var(--az-ink);font-weight:500}
.az-range .on{background:var(--az-ink);color:#fff;font-weight:600}
.az-tabs{display:flex;gap:4px;margin:14px -22px 0;padding:0 22px;border-bottom:1px solid var(--az-line);overflow-x:auto}
.az-tab{position:relative;padding:10px 10px 12px;border:0;background:none;font:inherit;font-size:14px;color:var(--az-dim);cursor:pointer;white-space:nowrap}
.az-tab:hover{color:var(--az-ink)}
.az-tab.on{color:var(--az-ink);font-weight:500}
.az-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--az-blue)}
.az-tab:focus-visible{outline:2px solid var(--az-blue);outline-offset:-2px;border-radius:6px}
.az-pane{padding-top:16px;animation:azIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes azIn{from{opacity:0;transform:translateY(8px)}}
.az-pane h4{margin:0;font-family:inherit;font-size:16px;font-weight:600;color:var(--az-ink)}
.az-desc{margin:4px 0 14px;font-size:13.5px;color:var(--az-dim)}
.az-seg2{margin-bottom:14px}
.az-foot{margin:12px 0 0;font-size:12px;color:var(--az-dim)}
/* KPI tiles */
.az-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.az-kpi{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:14px 16px;border-radius:14px;border:1px solid var(--az-line);background:#fff}
.az-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--t);background:color-mix(in srgb,var(--t) 12%,#fff)}
.az-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.az-lab{margin:1px 0 0;font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--az-dim)}
.az-val{display:block;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--az-ink)}
.az-sub{grid-column:1 / -1;margin:10px 0 0;font-size:13px;color:var(--az-dim)}
/* cards: bars, charts, tables */
.az-card{margin-top:12px;padding:14px 16px 16px;border-radius:14px;border:1px solid var(--az-line);background:#fff}
.az-card-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--az-dim)}
.az-card-h em{font-style:normal;text-transform:none;letter-spacing:0;font-size:13px}
.az-bar{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-top:9px;font-size:14px}
.az-bar b{font-weight:600}
.az-bar i{grid-column:1 / -1;height:6px;border-radius:999px;background:#eef0f7;overflow:hidden}
.az-bar em{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--az-blue);animation:azGrow 1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes azGrow{from{width:0}}
.az-plot{position:relative;height:130px}
.az-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.az-area{fill:color-mix(in srgb,var(--t) 10%,transparent)}
.az-ln{fill:none;stroke:var(--t);stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:2000;stroke-dashoffset:2000;animation:azDraw 1.6s ease .2s forwards}
@keyframes azDraw{to{stroke-dashoffset:0}}
.az-target{stroke:var(--az-dim);stroke-width:1.2;stroke-dasharray:5 5;opacity:.5;vector-effect:non-scaling-stroke}
.az-tlab{position:absolute;right:0;top:-2px;font-style:normal;font-size:11px;color:var(--az-dim)}
.az-x{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--az-dim)}
.az-tr{display:grid;grid-template-columns:1.6fr repeat(calc(var(--cols) - 1),minmax(0,1fr));gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f0f1f7;font-size:14px}
.az-tr span:not(:first-child){text-align:right}
.az-th{border-top:0;padding-top:2px;font-size:12px;color:var(--az-dim)}
.az-conv{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.az-conv i{width:46px;height:5px;border-radius:999px;background:#eef0f7;overflow:hidden}
.az-conv em{display:block;height:100%;width:var(--w);background:var(--az-blue)}
.az-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.az-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.az-link{position:relative;padding:14px 36px 14px 16px;border-radius:14px;border:1px solid var(--az-line);background:#fff}
.az-link b{display:block;font-size:15px;font-weight:600}
.az-link span{display:block;margin-top:3px;font-size:13px;color:var(--az-dim)}
.az-link i{position:absolute;right:16px;top:14px;font-style:normal;color:var(--az-dim)}

/* ---- hero on this page: headline centred, the app window below ---- */
#page-analytics .lc-hero .lc-hero-art{max-width:1180px;margin-inline:auto}
#page-analytics .lc-hero .lc-hero-art .az{transform:perspective(2200px) rotateX(4deg);transform-origin:top center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#page-analytics .lc-hero .lc-hero-art:hover .az{transform:none}
#page-analytics .lc-hero::after{content:"";position:absolute;left:50%;top:48%;z-index:-1;width:min(1100px,90vw);height:520px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,24,255,.12),transparent)}

/* ---- "The view your CRM can't produce": product widgets in cards ---- */
.az-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:var(--block-y)}
.az-gcard{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--az-line);background:#fff;overflow:hidden;transition:transform .3s,box-shadow .3s}
.az-gcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -44px rgba(10,20,90,.55)}
.az-gcard:nth-child(1),.az-gcard:nth-child(4),.az-gcard:nth-child(6){grid-column:span 2}
.az-gart{padding:6px 16px 16px;background:linear-gradient(180deg,#f7f8fc,#fff)}
.az-gart .az-card{box-shadow:0 18px 34px -28px rgba(10,20,90,.45)}
.az-gart .az-mini .az-kpi{margin-top:12px;box-shadow:0 18px 34px -28px rgba(10,20,90,.45)}
.az-gbody{padding:4px 22px 24px;font-family:var(--sans)}
.az-gn{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--az-blue)}
.az-gbody h3{margin:8px 0 0;font-family:var(--display);font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--g900)}
.az-gbody p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--g600)}
.az-gcard:nth-child(1) .az-gart,.az-gcard:nth-child(4) .az-gart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-items:start}
.az-gcard:nth-child(4) .az-gart{grid-template-columns:minmax(0,1fr)}

@media (max-width:1100px){
  .az-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-gcard:nth-child(1),.az-gcard:nth-child(4){grid-column:1 / -1}
  .az-gcard:nth-child(6){grid-column:auto}
}
@media (max-width:760px){
  .az-top{flex-wrap:wrap}
  .az-ask{order:3;width:100%;margin:0}
  .az-body{padding:14px}
  .az-tabs{margin:12px -14px 0;padding:0 14px}
  .az-ctl{flex-wrap:wrap}
  .az-2,.az-links,.az-grid{grid-template-columns:minmax(0,1fr)}
  .az-gcard:nth-child(1) .az-gart{grid-template-columns:minmax(0,1fr)}
  .az-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .az-kpi{padding:12px}
  .az-val{font-size:20px}
  #page-analytics .lc-hero .lc-hero-art .az{transform:none}
}
@media (max-width:420px){.az-kpis{grid-template-columns:minmax(0,1fr)}.az-range span{padding:5px 8px}}
@media (prefers-reduced-motion:reduce){.az-pane,.az-bar em,.az-ln{animation:none!important;stroke-dashoffset:0}}
/* ============ v103: Contact page — split concierge panel + three ways to reach us (scoped to :is(#page-contact,#page-signup,#page-challenge)) ============ */
:is(#page-contact,#page-signup,#page-challenge){--ct-ink:#060a2e;--ct-deep:#0a1580;--ct-brand:#0018ff;--ct-sky:#8fa0ff}
:is(#page-contact,#page-signup,#page-challenge) .ct-hero{padding:clamp(28px,4vw,56px) 0 clamp(40px,5vw,72px)}
:is(#page-contact,#page-signup,#page-challenge) .ct-shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:32px;overflow:hidden;background:#fff;border:1px solid var(--g200);box-shadow:0 70px 120px -70px rgba(6,10,46,.65)}

/* dark brand side */
:is(#page-contact,#page-signup,#page-challenge) .ct-side{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,3.6vw,52px);color:#eef0ff;
  background:radial-gradient(520px 360px at 110% -10%,rgba(95,116,255,.55),transparent 65%),radial-gradient(420px 320px at -20% 110%,rgba(0,24,255,.5),transparent 70%),linear-gradient(160deg,#0a1580 0%,#060a2e 70%)}
:is(#page-contact,#page-signup,#page-challenge) .ct-side::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
:is(#page-contact,#page-signup,#page-challenge) .ct-glow{position:absolute;right:-120px;bottom:-120px;z-index:-1;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(143,160,255,.45),transparent 70%);animation:ctGlow 7s ease-in-out infinite alternate}
@keyframes ctGlow{to{transform:translate(-60px,-40px) scale(1.15)}}
:is(#page-contact,#page-signup,#page-challenge) .ct-side :is(.lc-crumb,.lc-crumb a,.lc-crumb span){color:#aab3f5}
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lc-crumb b{color:#fff}
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lum-eyebrow{color:#c3cbff}
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lum-eyebrow::before{background:#c3cbff}
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lc-h1{margin-top:14px;font-size:clamp(34px,3.6vw,50px);color:#fff}
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lc-h1 span{background:linear-gradient(90deg,#b8c4ff,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lc-lede{margin-top:16px;max-width:44ch;font-size:16px;color:#dfe3ff}
:is(#page-contact,#page-signup,#page-challenge) .ct-side span.zw.zw.zw{background:linear-gradient(90deg,#fff,#b8c0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:is(#page-contact,#page-signup,#page-challenge) .ct-side span.zw.zw.zw.zp{background:none;color:#fff;-webkit-text-fill-color:#fff}
:is(#page-contact,#page-signup,#page-challenge) .ct-kicker{margin:32px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#aab3f5}
:is(#page-contact,#page-signup,#page-challenge) .ct-steps{position:relative;margin:14px 0 0;padding:0;list-style:none;display:grid;gap:14px}
:is(#page-contact,#page-signup,#page-challenge) .ct-steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,rgba(195,203,255,.7),rgba(195,203,255,.1))}
:is(#page-contact,#page-signup,#page-challenge) .ct-steps li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
:is(#page-contact,#page-signup,#page-challenge) .ct-step-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px)}
:is(#page-contact,#page-signup,#page-challenge) .ct-steps li:first-child .ct-step-ic{background:#fff;color:var(--ct-brand);box-shadow:0 0 0 6px rgba(255,255,255,.12)}
:is(#page-contact,#page-signup,#page-challenge) .ct-step-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#page-contact,#page-signup,#page-challenge) .ct-steps b{display:block;padding-top:2px;font-size:15.5px;font-weight:600;color:#fff}
:is(#page-contact,#page-signup,#page-challenge) .ct-steps p{margin:3px 0 0;font-size:14px;line-height:1.5;color:#c9cffb}
:is(#page-contact,#page-signup,#page-challenge) .ct-facts{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
:is(#page-contact,#page-signup,#page-challenge) .ct-facts li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:600;color:#fff}
:is(#page-contact,#page-signup,#page-challenge) .ct-facts svg{width:13px;height:13px;fill:none;stroke:#9ff0c0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* form side */
:is(#page-contact,#page-signup,#page-challenge) .ct-form{border:0;border-radius:0;box-shadow:none;padding:clamp(28px,3.6vw,52px)}
:is(#page-contact,#page-signup,#page-challenge) .ct-topics{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
:is(#page-contact,#page-signup,#page-challenge) .ct-topics-lab{width:100%;font-size:13px;font-weight:600;color:var(--g800)}
:is(#page-contact,#page-signup,#page-challenge) .ct-topic{padding:8px 14px;border-radius:999px;border:1px solid var(--g200);background:#fff;font:600 13.5px/1 var(--sans);color:var(--g700);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
:is(#page-contact,#page-signup,#page-challenge) .ct-topic:hover{border-color:var(--ct-brand);color:var(--ct-brand);transform:translateY(-1px)}
:is(#page-contact,#page-signup,#page-challenge) .ct-topic[aria-pressed="true"]{background:var(--ct-brand);border-color:var(--ct-brand);color:#fff;box-shadow:0 10px 20px -12px rgba(0,24,255,.8)}
:is(#page-contact,#page-signup,#page-challenge) .ct-topic:focus-visible{outline:2px solid var(--ct-brand);outline-offset:2px}
:is(#page-contact,#page-signup,#page-challenge) .ct-form .co-grid{margin-top:18px}
:is(#page-contact,#page-signup,#page-challenge) .ct-send-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
:is(#page-contact,#page-signup,#page-challenge) .ct-send-row .co-note{margin:6px 0 0;max-width:34ch}

/* three ways */
:is(#page-contact,#page-signup,#page-challenge) .ct-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:var(--block-y)}
:is(#page-contact,#page-signup,#page-challenge) .ct-way{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:26px;background:#fff;border:1px solid var(--g200);transition:transform .3s,box-shadow .3s}
:is(#page-contact,#page-signup,#page-challenge) .ct-way::after{display:none}
:is(#page-contact,#page-signup,#page-challenge) .ct-way:hover{transform:translateY(-4px);box-shadow:0 36px 60px -40px rgba(6,10,46,.5)}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-art{position:relative;height:236px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(260px 160px at 50% 120%,rgba(0,24,255,.12),transparent 70%),linear-gradient(180deg,#f5f6ff,#fbfbfe);border-bottom:1px solid var(--g100)}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:22px 24px 24px}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#3346ff,#0018ff);color:#fff;box-shadow:0 12px 20px -12px rgba(0,24,255,.9)}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#page-contact,#page-signup,#page-challenge) .ct-way h3{margin:16px 0 0;font-family:var(--display);font-size:22px;font-weight:600;color:var(--g900)}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-body > p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--g600)}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:18px 0 0;border:0;background:none;font:600 15px/1.2 var(--sans);color:var(--ct-brand);cursor:pointer}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-cta i{font-style:normal;transition:transform .2s}
:is(#page-contact,#page-signup,#page-challenge) .ct-way-cta:hover i{transform:translateX(4px)}
/* demo: mini scheduler */
:is(#page-contact,#page-signup,#page-challenge) .ct-cal{width:min(270px,86%);padding:14px;border-radius:16px;background:#fff;border:1px solid var(--g200);box-shadow:0 22px 40px -26px rgba(6,10,46,.5)}
:is(#page-contact,#page-signup,#page-challenge) .ct-cal-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
:is(#page-contact,#page-signup,#page-challenge) .ct-cal-h b{color:var(--g900)}
:is(#page-contact,#page-signup,#page-challenge) .ct-cal-h em{font-style:normal;font-size:11.5px;color:var(--g500)}
:is(#page-contact,#page-signup,#page-challenge) .ct-days{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
:is(#page-contact,#page-signup,#page-challenge) .ct-days span{display:grid;justify-items:center;padding:6px 0;border-radius:10px;font-size:11px;color:var(--g500)}
:is(#page-contact,#page-signup,#page-challenge) .ct-days em{font-style:normal}
:is(#page-contact,#page-signup,#page-challenge) .ct-days b{font-size:14px;color:var(--g900)}
:is(#page-contact,#page-signup,#page-challenge) .ct-days .on{background:var(--ct-brand);color:#dfe3ff}
:is(#page-contact,#page-signup,#page-challenge) .ct-days .on b{color:#fff}
:is(#page-contact,#page-signup,#page-challenge) .ct-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
:is(#page-contact,#page-signup,#page-challenge) .ct-slots i{padding:7px 0;border-radius:9px;border:1px solid var(--g200);font-style:normal;font-size:12px;font-weight:600;text-align:center;color:var(--g700)}
:is(#page-contact,#page-signup,#page-challenge) .ct-slots i.on{border-color:var(--ct-brand);background:#eef0ff;color:var(--ct-brand);animation:ctPick 2.6s ease-in-out infinite}
@keyframes ctPick{50%{box-shadow:0 0 0 4px rgba(0,24,255,.12)}}
/* email: envelope */
:is(#page-contact,#page-signup,#page-challenge) .ct-env{position:relative;width:220px;height:130px;border-radius:14px;background:linear-gradient(160deg,#3346ff,#0a1580);box-shadow:0 26px 40px -24px rgba(6,10,46,.7);transform:translateY(24px)}
:is(#page-contact,#page-signup,#page-challenge) .ct-env-flap{position:absolute;inset:0 0 auto;height:70px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);clip-path:polygon(0 0,100% 0,50% 100%);z-index:2}
:is(#page-contact,#page-signup,#page-challenge) .ct-env-card{position:absolute;left:18px;right:18px;bottom:30px;display:grid;gap:6px;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:0 12px 20px -14px rgba(6,10,46,.6);animation:ctRise 3.2s ease-in-out infinite}
@keyframes ctRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
:is(#page-contact,#page-signup,#page-challenge) .ct-env-card em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
:is(#page-contact,#page-signup,#page-challenge) .ct-env-card b{font-size:13.5px;color:var(--g900)}
:is(#page-contact,#page-signup,#page-challenge) .ct-env-card span{height:5px;border-radius:3px;background:var(--g100)}
:is(#page-contact,#page-signup,#page-challenge) .ct-env-card span.s{width:60%}
:is(#page-contact,#page-signup,#page-challenge) .ct-mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto;padding-top:18px}
:is(#page-contact,#page-signup,#page-challenge) .ct-mail-row .ct-way-cta{padding:0}
:is(#page-contact,#page-signup,#page-challenge) .ct-copy{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--g200);background:#fff;font:600 12.5px/1 var(--sans);color:var(--g700);cursor:pointer;transition:border-color .2s,color .2s}
:is(#page-contact,#page-signup,#page-challenge) .ct-copy:hover{border-color:var(--ct-brand);color:var(--ct-brand)}
:is(#page-contact,#page-signup,#page-challenge) .ct-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#page-contact,#page-signup,#page-challenge) .ct-copy.done{border-color:#22a55a;color:#157a3e}
/* HQ: radar pin + live clock */
:is(#page-contact,#page-signup,#page-challenge) .ct-map{position:absolute;inset:0;display:grid;place-items:center;background-image:linear-gradient(var(--g100) 1px,transparent 1px),linear-gradient(90deg,var(--g100) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 38% 55%,#000 30%,transparent 75%);mask-image:radial-gradient(circle at 38% 55%,#000 30%,transparent 75%)}
:is(#page-contact,#page-signup,#page-challenge) .ct-ring{position:absolute;left:38%;top:55%;width:40px;height:40px;margin:-20px;border-radius:50%;border:1.5px solid rgba(0,24,255,.4);animation:ctRing 3s ease-out infinite}
:is(#page-contact,#page-signup,#page-challenge) .ct-ring.r2{animation-delay:1s}
:is(#page-contact,#page-signup,#page-challenge) .ct-ring.r3{animation-delay:2s}
@keyframes ctRing{from{transform:scale(.6);opacity:1}to{transform:scale(4);opacity:0}}
:is(#page-contact,#page-signup,#page-challenge) .ct-map-pin{position:absolute;left:38%;top:55%;display:grid;place-items:center;width:40px;height:40px;margin:-34px 0 0 -20px;color:var(--ct-brand)}
:is(#page-contact,#page-signup,#page-challenge) .ct-map-pin svg{width:34px;height:34px;fill:#fff;stroke:currentColor;stroke-width:1.8}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq .co-clock{right:28px;top:50%;bottom:auto;width:92px;height:92px;margin-top:-46px;border-color:rgba(0,24,255,.28)}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq .co-clock .h{height:23px}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq .co-clock .mi{height:32px}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq .co-clock .s{height:36px}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq-now{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:auto 0 0;padding-top:18px}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq-now .co-time{margin:0!important;font-size:24px!important;white-space:nowrap}
:is(#page-contact,#page-signup,#page-challenge) .ct-hq-now em{flex-basis:100%;font-style:normal;font-size:13px;color:var(--g500)}
:is(#page-contact,#page-signup,#page-challenge) .ct-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8}
:is(#page-contact,#page-signup,#page-challenge) .ct-dot.open{background:#22a55a;box-shadow:0 0 0 4px rgba(34,165,90,.15)}

@media (max-width:1100px){
  :is(#page-contact,#page-signup,#page-challenge) .ct-shell{grid-template-columns:minmax(0,1fr)}
  :is(#page-contact,#page-signup,#page-challenge) .ct-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#page-contact,#page-signup,#page-challenge) .ct-hq{grid-column:1 / -1}
}
@media (max-width:700px){
  :is(#page-contact,#page-signup,#page-challenge) .ct-shell{border-radius:24px}
  :is(#page-contact,#page-signup,#page-challenge) .ct-ways{grid-template-columns:minmax(0,1fr)}
  :is(#page-contact,#page-signup,#page-challenge) .ct-form .co-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){:is(#page-contact,#page-signup,#page-challenge) :is(.ct-glow,.ct-ring,.ct-env-card,.ct-slots i.on){animation:none!important}}
/* <zw-css> v84: the word ZUUZ in the logo colours (navy #262262 + blue #0018ff).
   The reset keeps page rules such as `.who span{display:block}` from reaching the word. */
span.zw.zw.zw{all:unset;display:inline;font-weight:700;background:linear-gradient(90deg,#262262,#0018ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
span.zw.zw.zw.zp{background:none;color:#262262;-webkit-text-fill-color:#262262}
span.zt.zt.zt{all:unset;display:inline}
/* on dark backgrounds: the light end of the brand (white -> #b8c0ff) */
:is(footer,.engine,.lc-flow,.rx-verdict,.vco-panel,.mx-plane.p1,.vly-s.z,.rx-table th.z,main[data-th="dark"],[data-th="split"] .mx-stat,[data-th="block"] .lc-hero-copy,[data-th="block"] .mx-stat,[data-th="editorial"] .mx-stat,[data-th="aurora"] .lc-hero,[data-th="aurora"] .mx-stat,[data-th="aurora"] .cta,.vx) span.zw.zw.zw{background:linear-gradient(90deg,#fff,#b8c0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:is(footer,.engine,.lc-flow,.rx-verdict,.vco-panel,.mx-plane.p1,.vly-s.z,.rx-table th.z,main[data-th="dark"],[data-th="split"] .mx-stat,[data-th="block"] .lc-hero-copy,[data-th="block"] .mx-stat,[data-th="editorial"] .mx-stat,[data-th="aurora"] .lc-hero,[data-th="aurora"] .mx-stat,[data-th="aurora"] .cta,.vx) span.zw.zw.zw.zp{background:none;color:#fff;-webkit-text-fill-color:#fff}
/* </zw-css> */
/* </mx-css> */

/* <deploy-css> contact: inline Cal.com booking */
.ct-cal-embed{margin-top:clamp(22px,3vw,34px);border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--g200);box-shadow:0 40px 70px -50px rgba(6,10,46,.5)}
#zuuz-cal-inline{width:100%;min-height:660px;overflow:auto}
.ct-cal-note{margin:14px 0 0;text-align:center;font-size:13px;color:var(--g500)}
@media (max-width:640px){#zuuz-cal-inline{min-height:600px}.ct-cal-embed{border-radius:18px}}
/* </deploy-css> */
/* ---------- signup / free trial ---------- */
.co-field select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--g200);background:var(--g50);font:500 14.5px/1.4 var(--sans);color:var(--g900);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.co-field select:focus{outline:0;background-color:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,24,255,.12)}
.co-field.bad select{border-color:#e5484d;background-color:#fff}
.su-check{grid-column:1 / -1;display:flex;gap:10px;align-items:flex-start;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--g600);cursor:pointer}
.su-check input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--brand)}
.su-fail{margin:10px 0 0;font-size:13.5px;font-weight:600;color:#c02b30}
.su-signin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(20px,2.4vw,28px);padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.su-signin-k{margin:0;font-size:14.5px;font-weight:700}
.su-signin-s{margin:4px 0 0;font-size:13.5px;opacity:.72}
.su-signin-btn{flex:0 0 auto;height:42px;padding:0 18px;font-size:14.5px}
.su-signin-btn span{display:inline-block;margin-left:6px;transition:transform .2s}
.su-signin-btn:hover span{transform:translateX(4px)}
.su-done h3{font-family:var(--display);font-size:clamp(22px,2vw,27px);font-weight:600}
.su-next{display:flex;flex-direction:column;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.su-next li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--g700)}
.su-next li > span{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:#fff;font-size:12px;font-weight:700;color:var(--ok-ink,#0a7c42)}
.su-until{margin:16px 0 0;font-size:14px;font-weight:600;color:var(--g900)}
.su-trust-more{margin:clamp(18px,2.4vw,26px) 0 0;text-align:center;font-size:14.5px;color:var(--g600)}
@media (max-width:640px){.su-signin{flex-direction:column;align-items:flex-start}.su-signin-btn{width:100%;justify-content:center}}

/* ---- voice console on a light page (/ai-agent) ----
   The console is frosted glass: a near-transparent white fill over
   backdrop-filter blur, built to sit on the aurora hero's dark backdrop. That
   page is now light like the rest of the site, so the glass had nothing dark
   behind it and rendered as grey-on-white with unreadable pale-cyan text.
   Giving the console its own dark surface restores every colour inside it
   (cyan state label, white caption, gradient numerals) at the contrast it was
   designed for, and reads as the product screenshot it depicts.
   Scoped with :has(.vx-orb) because .vx is also an unrelated "mismatch"
   component on 11 other pages — this must not touch those. */
.vx:has(.vx-orb){
  background:linear-gradient(160deg,#0b1030,#070a24);
  border-color:rgba(190,196,255,.22);
  color:#e9eafc;
}
.vx:has(.vx-orb) .vx-q,
.vx:has(.vx-orb) .vx-chips li{color:#e9eafc}

/* Text-primary stat box: same weight and brand colour as the numeric stats,
   one size step down and with normal numerics so a short phrase sits on two
   lines instead of overflowing the card. */
.stat.stat-text b{font-size:clamp(18px,1.6vw,22px);line-height:1.25;font-variant-numeric:normal;letter-spacing:-.005em}
.stat.stat-text span{margin-top:8px}

/* Four-up variant of the metrics card, plus the qualifier line under the
   pipeline figure. Falls back to two columns before stacking so the numbers
   never sit at an unreadable width. */
.lum-card-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.lum-card-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lum-card-4{grid-template-columns:minmax(0,1fr)}}

/* Ambient loops pause while their section is outside the viewport. ~50 looping
   elements per page were animating off-screen; the browser already skips the
   ones inside hidden routes, but a visible page's lower sections were not. */
.anim-idle, .anim-idle *{animation-play-state:paused!important}

/* ---- blog cards: real cover photos -------------------------------------
   Posts migrated from WordPress show their own cover image instead of one of
   the hand-drawn illustrations. The illustration rules size `.vpost .vg`,
   which a plain <img> never matches, so the photo needs its own sizing: fill
   the card's art panel, and stretch to the full height of the featured card
   rather than being centred inside a 150px box.                           */
.rx-post-art > img { width: 100%; height: 100%; object-fit: cover; display: block }
.rx-post.vfeat > .rx-post-art { align-self: stretch; height: 100%; min-height: 280px }
@media (max-width: 900px) {
  .rx-post.vfeat > .rx-post-art { min-height: 220px }
}

/* ---- /challenge -------------------------------------------------------
   The Prospect Discovery Challenge, brought over from zuuz.ai/challenge.
   Layout, form and step furniture are the site's own (.ct-*, .co-*,
   .lc-steps, .vcards); only the handful of pieces that page introduces —
   the illustration carousel, the terms list, the guarantee panel — are
   defined here.                                                          */
#page-challenge .ch-car {
  position: relative;
  margin: 26px 0 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--g200);
  background: var(--g50, #f7f7fa);
}
#page-challenge .ch-frames { position: relative; aspect-ratio: 16 / 10 }
#page-challenge .ch-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
#page-challenge .ch-frames img.on { opacity: 1 }
#page-challenge .ch-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
#page-challenge .ch-dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: background .25s, transform .25s;
}
#page-challenge .ch-dots button.on { background: #fff; transform: scale(1.35) }

#page-challenge .ch-note { margin-top: 18px; font-size: 13px; color: var(--g500) }

#page-challenge .ch-points {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}
#page-challenge .ch-points li {
  padding-left: 18px;
  border-left: 2px solid var(--brand);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--g600);
}
#page-challenge .ch-points b { color: var(--g900) }

#page-challenge .ch-gr {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 32px;
  align-items: center;
  padding: 34px;
  border-radius: 22px;
  border: 1px solid var(--g200);
  background: linear-gradient(150deg, #f3f4ff, #e6e9ff);
}
#page-challenge .ch-gr-copy p { margin-top: 12px; color: var(--g600); line-height: 1.6 }
#page-challenge .ch-gr-img { width: 100%; height: auto; border-radius: 16px }

#page-challenge .ch-terms { display: grid; gap: 14px; margin-top: 26px }
#page-challenge .ch-terms > div {
  padding: 18px 22px;
  border: 1px solid var(--g200);
  border-radius: 16px;
  background: #fff;
}
#page-challenge .ch-terms dt {
  font-weight: 600;
  font-size: 15px;
  color: var(--g900);
  margin-bottom: 5px;
}
#page-challenge .ch-terms dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--g600);
}

#page-challenge .su-check { flex-direction: row; align-items: flex-start; gap: 10px }
#page-challenge .su-check input { width: auto; margin-top: 3px; flex: none }
#page-challenge .su-check span { font-size: 14px; color: var(--g600) }
#page-challenge .co-fine { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--g500) }

@media (max-width: 900px) {
  #page-challenge .ch-gr { grid-template-columns: 1fr; text-align: left }
  #page-challenge .ch-gr-img { max-width: 320px }
}
/* The bento theme gives every eyebrow a pale pill. That reads well on the
   light sections, but /challenge is the first bento page with the dark hero
   panel, where a near-white pill on navy is almost invisible — so inside
   .ct-side the eyebrow keeps the plain dash-and-caps treatment the contact
   and signup heroes use. */
#page-challenge .ct-side .lum-eyebrow {
  padding: 0;
  border-radius: 0;
  background: none;
}
/* Same reasoning as .ct-side above: the dark flow bands on this page would
   otherwise show a near-white eyebrow pill on navy. */
#page-challenge .lc-flow .lum-eyebrow {
  padding: 0;
  border-radius: 0;
  background: none;
  color: #c3cbff;
}

/* ---- hero live figure --------------------------------------------------
   The platform's real pipeline number, lifted out of the metrics section
   further down the page so the strongest proof is visible before any scroll.
   It reads "surfaced", not "recovered": the feed marks this value
   ai_estimated, so it is pipeline ZUUZ found, not revenue banked.          */
.hero-live {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 14px 18px;
  border: 1px solid var(--g200);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(0, 24, 255, .05), rgba(90, 82, 255, .03));
  max-width: 480px;
}
.hero-live-n {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.hero-live-t { font-size: 14px; line-height: 1.45; color: var(--g600) }
.hero-live-t i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g500);
}
@media (max-width: 720px) {
  .hero-live { max-width: none; gap: 12px; padding: 12px 14px }
  .hero-live-t { font-size: 13px }
}

/* ---- footer sitemap: denser -------------------------------------------
   Ten columns of 16px links on a 16px grid made the sitemap taller than most
   of the pages it lists. Everything stays; it just stops occupying a screen. */
.zf-h { margin: 0 0 10px !important; font-size: 13px !important; line-height: 17px !important }
.zf-group ul { gap: 7px !important }
.zf-group a { font-size: 13px !important; line-height: 17px !important }
/* The sitemap sat in two 259px columns either side of a 521fr decorative
   panel, so ten groups stacked five rows deep and the footer ran taller than
   most of the pages it links to. Narrowing the decoration and giving each side
   three columns keeps every link and halves the height. */
@media (min-width: 1100px) {
  .zf-main { grid-template-columns: minmax(0, 620fr) minmax(0, 241fr) minmax(0, 620fr); min-height: 0 }
  /* A column flow rather than a grid: in a grid every row is as tall as its
     tallest group, so Modules (11 links) and Compare (14) set the height for
     everything beside them. Columns let the short groups pack in underneath. */
  .zf-links, .zf-right .zf-links {
    display: block;
    column-count: 3;
    column-gap: 18px;
  }
  .zf-links .zf-group { break-inside: avoid; margin-bottom: 22px }
  .zf-group a { white-space: normal }
}
/* The hero copy is centred, so the figure centres with it. */
.hero-live { margin-left: auto; margin-right: auto }
/* ---- footer sitemap: tighter still -------------------------------------
   848px was mostly furniture rather than links: 174px of column padding and
   two 63px decorative hatch bands before a single link. The link rows are
   denser too — 24px per line to 20px — which shortens the tallest group and
   so the whole block, since a column flow can be no shorter than its tallest
   unbreakable group. Every link stays.                                     */
@media (min-width: 1100px) {
  .zf-hatch { height: 34px }
  /* The tagline and social row are absolutely positioned against the bottom
     of the column, so the bottom padding is what reserves their space — cut it
     too far and they land on top of the last links. Their offsets come in with
     it, so the reservation stays small. */
  .zf-col { padding: 30px 44px 62px }
  .zf-tag { bottom: 20px !important; font-size: 13px !important }
  .zf-social { bottom: 14px !important }
  .zf-h { margin: 0 0 8px !important; font-size: 12.5px !important; line-height: 16px !important }
  .zf-group ul { gap: 3px !important }
  .zf-group a { font-size: 12.5px !important; line-height: 17px !important }
  .zf-links .zf-group { margin-bottom: 16px }
  .zf-social { margin-top: 4px }
}

/* ---- How it works: the wider card geometry -----------------------------
   The five-step animation itself is unchanged — same markup, same script.
   What had drifted was the frame around it: `.steps` picked up the shared
   page container (a narrower max-width plus gutters) and `.card` picked up
   clamp() padding that reaches 40px on a desktop. Between them the cards lost
   ~120px each, which is what pushed "Aiden Parker" onto two lines and clipped
   the Status column off the inbox table.

   Scoped to #how because .card is used 205 times across the site and .steps
   on six other pages; this is about this one section's geometry, not theirs. */
#how .steps {
  max-width: 1512px;
  margin-top: 72px;
  padding-inline: 8px;
  gap: 20px;
}
#how .card { padding: 28px 24px 0 }
#how .card .stepno { top: 30px; right: 24px }



/* ---- How it works: accordion slides -----------------------------------
   Collapsed vertical rails with one open panel, ported from the homepage
   design file. The five step cards and their animations are unchanged —
   they now sit inside .acc-body instead of the old two-column .steps grid.

   Widths use the site container (--page / --gutter) rather than the design
   file's hard-coded 1280/24px, so the accordion and its progress bar line up
   exactly with the CRM Sync panel below them at every breakpoint. */
.acc{display:flex;gap:14px;margin-top:72px;height:600px;
  width:calc(100% - var(--gutter) * 2);max-width:calc(var(--page) - var(--gutter) * 2);margin-inline:auto;padding:0}
.acc-item{position:relative;flex:0 0 var(--rail,96px);min-width:0;background:var(--g100);border:1px solid var(--g200);border-radius:24px;overflow:hidden;cursor:pointer;
  transition:flex-grow .62s cubic-bezier(.22,.61,.36,1),flex-basis .62s cubic-bezier(.22,.61,.36,1),background-color .4s ease,border-color .4s ease}
.acc-item:not(.on):hover{background:var(--g150);border-color:var(--g300)}
.acc-item.on{flex:1 1 auto;cursor:default;background:var(--g100)}
.acc-item.dots{background-image:radial-gradient(var(--g300) 1px,transparent 1.2px);background-size:18px 18px}
.acc-rail{position:absolute;inset:0;width:var(--rail,96px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:18px;padding:26px 0 24px;background:none;border:0;cursor:pointer;z-index:3;transition:opacity .28s ease}
.acc-item.on .acc-rail{opacity:0;pointer-events:none}
.acc-t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:18px;font-weight:500;letter-spacing:-.2px;color:var(--g700);white-space:nowrap;transition:color .3s ease}
.acc-item:hover .acc-t{color:var(--g900)}
.acc-n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--g500)}
/* the step badge is a blue rectangle, not a white circle */
.acc-dot{width:56px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand);border:1px solid var(--brand);box-shadow:0 2px 8px rgba(0,24,255,.28);font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.04em;color:#fff;flex:none;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
/* the badges breathe — a slow glow pulse, staggered down the rails so they read as a wave */
@keyframes accDotBlink{
  0%,100%{box-shadow:0 2px 8px rgba(0,24,255,.28);filter:none}
  50%{box-shadow:0 0 0 3px rgba(0,24,255,.13),0 3px 13px rgba(0,24,255,.44);filter:brightness(1.1)}
}
.acc-dot{animation:accDotBlink 2.6s ease-in-out infinite}
.acc-item:nth-child(2) .acc-dot{animation-delay:.22s}
.acc-item:nth-child(3) .acc-dot{animation-delay:.44s}
.acc-item:nth-child(4) .acc-dot{animation-delay:.66s}
.acc-item:nth-child(5) .acc-dot{animation-delay:.88s}
/* hover takes the badge off the pulse so its own lit state can show */
.acc-item:hover .acc-dot{background:var(--brand-600);border-color:var(--brand-600);box-shadow:0 0 0 4px var(--brand-100),0 3px 10px rgba(0,24,255,.32);animation:none}
.acc-body{position:relative;height:100%;width:var(--bw,100%);opacity:0;transition:opacity .4s ease .14s}
.acc-item.on .acc-body{opacity:1}
.acc-body .card{height:100%;min-height:0;border:0;border-radius:0;background:transparent;overflow:hidden}
.acc-body .card.dots{background-image:none}
.acc-prog{height:3px;background:var(--g200);border-radius:999px;margin:18px auto 0;overflow:hidden;
  width:calc(100% - var(--gutter) * 2);max-width:calc(var(--page) - var(--gutter) * 2)}
.acc-prog i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px}
@media (max-width:900px){
  .acc{flex-direction:column;height:auto;margin-top:48px;gap:10px}
  .acc-item{flex:0 0 74px;height:74px}
  .acc-item.on{flex:0 0 470px;height:470px}
  .acc-rail{width:100%;height:74px;flex-direction:row;justify-content:flex-start;gap:14px;padding:0 20px}
  .acc-t{writing-mode:horizontal-tb;transform:none;font-size:17px}
  .acc-n{display:none}
  .acc-dot{margin-left:auto}
  .acc-body{width:100%}
}
@media (prefers-reduced-motion:reduce){.acc-dot{animation:none}.acc-item{transition:none}.acc-prog i{transition:none!important}}
/* content inside the open panel is centred */
.acc-body .card > h3,.acc-body .card > p,.acc-body .card .head{text-align:center}
.acc-body #s2 .sigs{justify-content:center}
.acc-body #s5 .target{margin-inline:auto}
/* the four steps drawn for a half-width card stay composed at any open-panel width */
/* step 1: the inbox sits flat inside the panel, whole table visible, no tilt */
.acc-body #s1 .inbox{left:0;right:0;top:132px;width:min(780px,calc(100% - 72px));margin-inline:auto;transform:none}
.acc-body #s1 .inbox .tbl{border-radius:16px;padding:10px 0;background:rgba(255,255,255,.78);
  -webkit-mask-image:none;mask-image:none;box-shadow:0 18px 40px -28px rgba(29,29,32,.28)}
.acc-body #s1 .ir{height:86px;padding:0 26px;font-size:17px}
.acc-body #s1 .ir.th{height:44px;font-size:15px}
.acc-body #s1 .ir.lift{margin-left:0}
.acc-body #s1 .ir.faded{opacity:.72}
.acc-body #s1 .ir.faded2{opacity:.5}
.acc-body #s2 .mail,.acc-body #s2 .sigs{left:0;right:0;width:min(820px,calc(100% - 64px));margin-inline:auto}
.acc-body #s3 .lq-scroll{margin-inline:-24px;overflow:hidden}
.acc-body #s3 .lq{width:100%}
.acc-body #s4 .plane-wrap{inset:150px 0 0 0}
.acc-body #s5 .rev{left:0;right:0;width:min(880px,calc(100% - 64px));margin-inline:auto}

/* ---- one measure: every container sits on the header pill's edge -------
   The pill is `mx-4 lg:mx-8` + `mx-auto max-w-7xl` (components/layout/header.tsx),
   i.e. min(1280px, 100% - 2 * margin) centred — content edge x=80 at 1440px.
   `--zwrap-m` mirrors that margin at the same breakpoint so these containers
   and the pill share an edge at every width. Mirrors `.zwrap` in app/globals.css.

   Before this, the document carried two measures: most sections were
   `max-width:var(--page)` + `padding-inline:var(--gutter)` → 1192px at x=124,
   while .frame/.flow/.crm-stage omitted the gutter → 1280px at x=80. The 44px
   step between a section card and the nav pill above it is what read as
   "nothing lines up". Only the inline padding is overridden here; each rule
   keeps its own block padding. */
/* 24px, not the React side's 16/32: this document never resets the UA's 8px
   body margin, and `.hd` adds `margin:8px 24px 0` on top of it (see its own
   note at the top of this file), so the pill's box is the viewport less
   2x(8+24). Measured against the body-inset parent these containers sit in,
   that is `100% - 48px`. With 16/32 the cap hid the error above ~1344px and
   every container sat 8px inside the pill below it. */
:root{--zwrap-m:24px}
/* `.hd` drops to `margin:4px 8px 0` below 1024 (line ~109), so the measure
   has to follow it down or every container sits 16px inside the pill on
   tablet and phone. */
@media (max-width:1023px){:root{--zwrap-m:8px}}
.inner,.features,.steps,.eng-head,.eng-grid,.arch-grid,.faq-wrap,.foot,.legal div,
.crmsync-wrap,.frame,.price-frame,.crm-stage,.flow,.hero-copy,.acc,.acc-prog{
  width:min(var(--page),100% - 2 * var(--zwrap-m));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}

/* The story-rail theme drew its 1px rule at `left:clamp(20px,4vw,44px)` inside
   `.inner`, which worked while `.inner` carried a 44px gutter. With the gutter
   gone the rule landed on top of the text it was meant to sit beside, and the
   57.6px `padding-left` that made room for it pushed every heading and card on
   /integrations and /industries-* to x=138 while the band above them sat at
   x=80. The rule now hangs in the page margin instead, clamped so it can never
   cross the viewport edge, and the content keeps the measure. */
[data-th="rail"] .lc-sec > .inner{padding-left:0}
[data-th="rail"] .lc-sec > .inner::before{left:max(-28px,calc(var(--zwrap-m) * -1 + 4px))}

/* The closing card was 946px on the homepage and 1280px on every inner page
   (`.mx .cta`). One width, on the measure. The inline padding stays — that is
   the card's own padding, like the nav pill's, not a page gutter. */
.cta{
  width:min(var(--page),100% - 2 * var(--zwrap-m));
  max-width:none;
  margin-inline:auto;
  padding-inline:clamp(24px,4vw,56px);
}

/* ---- hero visuals must not wait for a scroll ---------------------------
   `.lc-rv` is `opacity:0` until an IntersectionObserver (public/spa.js, the
   `main.mx` block) adds `.in` at a 0.12 threshold. That observer is wired once
   at load over all 54 in-document routes, so whether a hero visual is ever
   revealed depends on where it happens to land in the first viewport. Where
   the hero copy is tall — /analytics, /pipeline-capture,
   /industries-distribution at 1440x900 — the art started below the fold and
   the page rendered as copy beside a blank half, with the visual only
   appearing if the visitor happened to scroll back up.

   Above-the-fold content should never be gated on a scroll that may not
   happen, so the hero opts out of the reveal entirely. Everything below the
   hero keeps animating in as before. Scoped to `.lc-hero` so it applies on
   whichever route is active — the document holds every route at once, so a
   route-gated fix would ship stale content on hash navigation. */
.lc-hero .lc-rv{
  opacity:1;
  transform:none;
}

/* `.th-center` and `.th-wide` were the only hero variants that did not put
   the art beside the copy: `.th-center` collapsed the grid to one centred
   column, and `.th-wide` pushed the art to `grid-column:1 / -1` on a second
   row while the copy stayed in column one — so both rendered as text with a
   permanently empty right half, with the art stranded underneath. Every other
   route pairs copy with art across two columns. These five
   (/analytics, /enrichment, /ai-agent, /pipeline-capture,
   /industries-distribution, /solutions-account-executives) now do the same,
   so "content left, visual right" holds across the whole site. */
.lc-hero-grid:has(.lc-hero-art){
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;
  justify-items:stretch;
  text-align:left;
}
.th-center .lc-hero-art,.th-wide .lc-hero-art{
  grid-column:auto;
  margin-top:0;
  width:auto;
}
.th-center .lc-hero-copy,.th-wide .lc-hero-copy{max-width:none;text-align:left}
.th-center .lc-actions,.th-center .lc-trust{justify-content:flex-start}

/* The hero must stack below 900px. The `:has(.lc-hero-art)` two-column rule
   outranks the plain `.lc-hero-grid` reset inside the `max-width:900px` block
   (line ~1502), so on a phone the art was being squeezed into a 200px column
   beside the copy instead of sitting under it — visible on the live site on
   /lead-scoring and /crm-sync before any of this pass, and inherited by the
   rest once they moved to two columns. Restated here at matching specificity
   so the stack wins on small screens. */
@media (max-width:900px){
  .lc-hero-grid:has(.lc-hero-art),
  .lc-hero:not(.th-center):not(.th-wide) .lc-hero-grid:has(.lc-hero-art),
  .th-center .lc-hero-grid,
  .th-wide .lc-hero-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .th-center .lc-hero-art,.th-wide .lc-hero-art{width:100%}
  /* The 3D tilt is a desktop flourish. Once the hero stacks full width the
     rotation pushes the mockup ~10px past the page measure, so it is reset
     with the layout rather than left to overhang. */
  .th-tilt .lc-hero-art .app,.th-lean .lc-hero-art .app{transform:none}
}

/* ---- footer: give the ZUUZ mark room ----------------------------------
   The sitemap is already dense — two earlier passes above put each side into a
   3-up column flow at 12.5px and deliberately narrowed the centre track to
   `241fr` to buy that space. What was never adjusted is the centre's padding:
   `.zf-col{padding:30px 44px 62px}` applies to `.zf-center` too, so 88px of a
   208px column was padding and the mark rendered at 119x169 — a small logo
   marooned in an empty panel, which is what looked wrong. The width therefore
   comes out of the centre's own padding first, and only then out of the track.

   Splitting the long lists (Modules 11, Compare 14) into two item columns was
   tried first and rejected: the sub-columns are ~145px, so "Account
   Management" and "vs. Conversation AI" collided.

   Measured at 1100/1280/1440/1920 against the previous build. */
@media (min-width:1100px){
  .zf-center{padding:24px 10px}
  .zf-stack{width:min(100%,300px)}
}

/* Dropping to a 2-up flow between 1100 and 1440 was tried to stop the links
   wrapping there. It does (0 wrapped at 1280), but a column flow with fewer
   columns is taller: 579px to 731px. Not worth it, so the 3-up flow stays and
   the narrow band keeps the behaviour it already had. */

/* At 1440+ there is room for both: the 3-up flow stays and the mark takes the
   spare width. */
@media (min-width:1440px){
  .zf-main{grid-template-columns:minmax(0,620fr) minmax(0,300fr) minmax(0,620fr)}
}

/* ---- /about globe: make it read as a globe -----------------------------
   Three faults, all visible at a glance on the live page:

   1. The pin sat off the sphere. `.co-pin:nth-of-type(1)` translated it
      (-128px,-76px) from centre — 149px out on a 280px sphere whose radius is
      140 — so the "Sunnyvale" dot floated just past the edge.
   2. Nothing actually rotated. `coSpinBg` only scrolled the dot grid's
      `background-position`, which on a sphere reads as a texture sliding
      sideways rather than a globe turning.
   3. The wireframe was `rgba(0,24,255,.18)` over a near-white fill, so the
      meridians barely registered and the whole thing looked like a pale blob.

   The meridians now sweep around Y (a parallel spun about Y is unchanged, so
   the latitude rings stay put, which is correct) and the fill carries real
   rim shading. The pin stays fixed on the front face rather than orbiting
   out of view. */
.co-pin:nth-of-type(1){transform:translate(-84px,-62px)}

.co-sphere{
  background:
    radial-gradient(circle,rgba(0,24,255,.22) 1.3px,transparent 1.7px) 0 0/15px 15px,
    radial-gradient(circle at 32% 26%,#fff,#e4e8ff 48%,#b9c0ff 82%,#98a2f5 100%);
  box-shadow:
    inset -26px -34px 70px rgba(0,24,255,.26),
    inset 12px 14px 40px rgba(255,255,255,.75),
    0 40px 70px -40px rgba(13,44,115,.55);
  animation:none;
}
.co-sphere i{border-color:rgba(0,24,255,.34)}
.co-sphere .p2,.co-sphere .p3{border-color:rgba(0,24,255,.22)}

@media (prefers-reduced-motion:no-preference){
  .co-sphere .m{animation:coMeridian 26s linear infinite}
  .co-sphere .m1{--m0:60deg}
  .co-sphere .m2{--m0:-60deg}
  .co-sphere .m3{--m0:90deg}
}
@keyframes coMeridian{
  from{transform:rotateY(var(--m0,0deg))}
  to{transform:rotateY(calc(var(--m0,0deg) + 360deg))}
}

@media (max-width:900px){
  /* radius 110 here, so the pin moves in with it */
  .co-pin:nth-of-type(1){transform:translate(-66px,-49px)}
}

/* ---- /signup left panel: proof instead of a process list ---------------
   The panel used to carry a three-step "What happens next" list, which said
   what would happen but gave no reason to believe it. This mirrors the live
   zuuz.ai/trial panel instead: the production numbers, then the three named
   customer quotes. Same dark panel, so everything is light-on-dark. */
.su-proof-h{
  margin:10px 0 0;
  font-size:clamp(20px,1.7vw,24px);
  line-height:1.25;
  font-weight:600;
  color:#fff;
  letter-spacing:-.01em;
}

.su-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.su-stats li{
  border-radius:14px;
  padding:14px 12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.su-stats b{
  display:block;
  font-size:clamp(20px,1.9vw,26px);
  font-weight:700;
  line-height:1.1;
  color:#fff;
  letter-spacing:-.02em;
}
.su-stats span{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  line-height:1.35;
  color:#c9cffb;
}

.su-quotes{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.su-quotes li{
  border-radius:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.su-quotes p{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:#dfe3ff;
}
.su-quotes p b{color:#fff;font-weight:600}
.su-quotes cite{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:11px;
  font-style:normal;
}
.su-quotes cite span{display:block;font-size:12px;line-height:1.35;color:#aab3f5}
.su-quotes cite b{display:block;font-size:12.5px;font-weight:600;color:#fff}
.su-av{
  display:grid;
  place-items:center;
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 58%,#fff),var(--c) 72%);
}

@media (max-width:560px){
  /* Three stat tiles do not survive a phone column; two up, then one. */
  .su-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-stats li:last-child{grid-column:1 / -1}
}

/* ---- case-study cards: a way into the story ----------------------------
   The listing had no link out of any card, and the two detail pages it should
   have pointed at were unreachable anyway — `/resources/case-studies/:sub*`
   rewrote to the SPA listing, so the React pages never rendered (fixed in
   next.config.ts). With the drill-down working the cards need an affordance,
   and the customers are named here to match the pages they open. */
.rx-story-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:600;
  color:var(--acc,#0018ff);
  text-decoration:none;
  white-space:nowrap;
}
.rx-story-link svg{width:15px;height:15px;transition:transform .16s ease}
.rx-story-link:hover svg{transform:translateX(3px)}
.rx-story-link:focus-visible{outline:2px solid var(--acc,#0018ff);outline-offset:3px;border-radius:4px}

/* ---- /about: corporate entity disclosure -------------------------------
   Sits under the office card because that is the company-identity block —
   the place someone checking who ZUUZ actually is will look. Carries no
   `data-cms` attribute deliberately: the CMS substitutes the contents of any
   `data-cms` element from Payload, so a legal-entity line written only in the
   markup would be silently overwritten the moment that field were populated. */
.co-entity{
  max-width:64ch;
  margin:clamp(28px,4vw,44px) auto 0;
  text-align:center;
  font-size:13.5px;
  line-height:1.6;
  color:var(--g600);
}

@media (max-width:640px){
  .co-entity{text-align:left}
}

/* ---- header menus: electric blue glyphs, black labels ------------------
   The dropdown icons were `--g500` (#4d5178, a muted navy) and the labels
   `--g900` (#1d1d20). Icons now carry the brand colour and the labels are
   true black, so the glyph reads as the accent and the text as the content. */
.hd-grp a svg{color:var(--brand)}
.hd-grp a{color:#000}
.hd-mlist .hd-grp a{color:#000}
.hd-mlist .hd-grp a svg{color:var(--brand)}

/* ---- touch targets: menu and footer links ------------------------------
   Same 20px-tall problem as the React half (see app/globals.css). Applied on
   coarse pointers and small viewports only — the desktop footer is a dense
   3-up column flow and must keep its current rhythm. */
@media (max-width:1023px), (pointer:coarse) {
  .hd-grp a{min-height:44px}
  .hd-mlist .hd-grp a{min-height:46px}
  .zf-group a{min-height:40px;display:flex;align-items:center}
  .zf-social a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---- case-study hero tiles: fit three, not two ------------------------
   The tiles fan out on `--k` (`translate3d(calc(var(--k) * Npx - Mpx), …)`),
   and the offsets were set when there were two of them. Adding the third
   (Nesto, `--k:2`) pushed it past the right edge — 435px on a 390px viewport,
   and past the frame at 1024 too. Tightened so the fan closes up as the
   viewport narrows; the desktop spread is unchanged. */
@media (max-width:1100px){
  .rx-case-tile{
    transform:rotateX(16deg) rotateY(-18deg)
      translate3d(calc(var(--k) * 64px - 64px),calc(var(--k) * 40px - 40px),calc(var(--k) * -40px));
  }
}
@media (max-width:640px){
  .rx-case-tile{
    width:150px;height:118px;margin:-59px 0 0 -75px;
    transform:rotateX(16deg) rotateY(-18deg)
      translate3d(calc(var(--k) * 42px - 42px),calc(var(--k) * 30px - 30px),calc(var(--k) * -30px));
  }
  .rx-case-tile b{font-size:32px}
}

/* ---- /about team photos ------------------------------------------------
   Replaces the AG/MK/DC monograms. The dashed `.co-ring` still spins around
   the outside, so the portrait sits slightly inside it rather than touching.
   `object-fit:cover` + `object-position:50% 20%` keeps the face centred when a
   headshot is framed with headroom, which all three of these are. */
.co-photo{
  width:108px;
  height:108px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 20%;
  background:var(--g100);
  box-shadow:0 14px 26px -14px rgba(13,44,115,.5);
}

/* ---- /about: founders as quote slides ----------------------------------
   Replaces the three equal boxes with three full-width quote cards that enter
   from different sides — left, right, then up from the bottom. Each is a
   portrait beside a pull-quote rather than a card with a circular avatar.

   The entrances reuse the page's own `.lc-rv` reveal, so they fire from the
   same IntersectionObserver as everything else and need no extra script; the
   modifier classes only change where the card starts from. */
.co-slides{
  display:grid;
  gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(32px,4vw,52px);
}

.co-slide{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:center;
  padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--g200);
  border-radius:28px;
  background:#fff;
  box-shadow:0 26px 48px -38px rgba(13,44,115,.4);
}
/* Alternate the portrait side so the left/right entrances read as a rhythm. */
.co-slide.co-from-r{grid-template-columns:minmax(0,1fr) auto}
.co-slide.co-from-r .co-slide-art{order:2}

.co-slide-art{position:relative;flex:none}
.co-slide-photo{
  display:block;
  width:clamp(104px,11vw,148px);
  height:clamp(104px,11vw,148px);
  border-radius:24px;
  object-fit:cover;
  object-position:50% 20%;
  background:var(--g100);
}

.co-slide-body{position:relative;min-width:0}
.co-slide-mark{
  display:block;
  font:700 54px/0.8 Georgia,serif;
  color:var(--brand);
  opacity:.22;
  margin-bottom:2px;
}
.co-slide blockquote{
  margin:0;
  font-size:clamp(15.5px,1.35vw,18px);
  line-height:1.6;
  color:var(--g800);
}
.co-slide-by{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:16px;
}
.co-slide-by b{font-size:15.5px;font-weight:600;color:var(--g900)}
.co-slide-role{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand);
}

/* entrances */
.co-from-l{transform:translateX(-40px)}
.co-from-r{transform:translateX(40px)}
.co-from-b{transform:translateY(40px)}
.co-from-l.in,.co-from-r.in,.co-from-b.in{transform:none}

@media (max-width:720px){
  .co-slide,.co-slide.co-from-r{grid-template-columns:minmax(0,1fr);gap:16px}
  .co-slide.co-from-r .co-slide-art{order:0}
  /* A sideways entrance on a phone can widen the page, so they all rise. */
  .co-from-l,.co-from-r{transform:translateY(28px)}
}

/* ---- /about hero: company copy in place of the founder quote ---- */
.co-lede{
  margin:18px 0 0;
  font-size:clamp(15.5px,1.3vw,17px);
  line-height:1.65;
  color:var(--g700);
  max-width:56ch;
}
.co-entity-hero{
  margin:22px 0 0;
  text-align:left;
  max-width:56ch;
  padding-top:16px;
  border-top:1px solid var(--g200);
}

/* The entity line reads at the same size and weight as the copy above it —
   it is a statement about the company, not fine print. */
.co-entity-hero{
  font-size:clamp(15.5px,1.3vw,17px);
  line-height:1.65;
  color:var(--g700);
}

/* ---- menu: a group heading that is itself a page ------------------------
   Capture & Qualify, Pipeline & Risk and Account Management each have a head
   page, so the heading is the link rather than carrying a separate "overview"
   row inside the group. Keeps the heading's own type and colour, and only
   signals that it is clickable on hover and focus. */
.hd-grp p a.hd-gh{
  color:inherit;
  text-decoration:none;
  border-radius:6px;
  padding:2px 4px;
  margin-left:-4px;
  transition:color .15s,background-color .15s;
}
.hd-grp p a.hd-gh:hover{color:var(--brand);background:var(--g50)}
.hd-grp p a.hd-gh:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- one type scale for every page -------------------------------------
   Each `data-th` skin was redefining the heading sizes, so the same kind of
   page headline rendered at five different sizes depending on which theme a
   route happened to be assigned:

     default    .lc-h1  clamp(34px, 3.7vw, 54px)   ->  53px at 1440
     spec       .lc-h1  clamp(34px, 3.8vw, 56px)   ->  55px
     screen     .lc-h1  clamp(38px, 4.8vw, 70px)   ->  69px
     editorial  .lc-h1  clamp(44px, 5.6vw, 84px)   ->  81px
     aurora     .lc-h1  clamp(40px, 5.2vw, 76px)   ->  76px

   and the same again for `.h2` (38 / 46 / 52). The themes still own colour,
   background, card shape and spacing, which is what makes them distinct. The
   type scale is not theirs to change, so it is restated once here for all of
   them. Keep this block last so it wins over the per-theme rules above. */
[data-th] .lc-h1,
.lc-h1{
  font-size:clamp(34px,3.7vw,54px);
  line-height:1.1;
  letter-spacing:-.022em;
}
[data-th] .h2,
.h2{
  font-size:clamp(29px,3.4vw,46px);
  line-height:1.14;
  letter-spacing:-.016em;
}

/* The analytics panel imitated a product UI in Outfit. One family across the
   site reads as one product; the mock keeps its own colours and chrome. */
.az,.az *{font-family:var(--sans)}

/* ===================================================================
   TYPE SCALE — final normalisation (appended last so it wins)
   Every per-theme skin below redefined the same component at a
   different size, so one heading band rendered 63px on one page and
   38px on the next. The scale is fixed here, once, for all skins:
     h1 53 / h2 46 / row-heading 30 / card-heading 22 / lede 18
   Skins keep their colour, background and layout; they no longer
   own the type. Product-mock chrome (.az-*, .vm-*, .vv-*, .lc-cap,
   .lc-hitl) is intentionally excluded: it is a picture of a UI,
   not page copy.
   =================================================================== */

/* Closing CTA band: was 63 (editorial) / 48 (.mx) / 46 / 38 (spec). */
.cta h2,
.mx .cta h2,
[data-th] .cta h2,
[data-th="editorial"] .cta h2,
[data-th="spec"] .cta h2,
[data-th="screen"] .cta h2,
[data-th="aurora"] .cta h2{
  font-size:clamp(29px,3.4vw,46px);
  line-height:1.14;
  letter-spacing:-.016em;
  font-weight:600;
}

/* Hero lede: was 18 by default, 19 under screen/aurora. */
.lc-lede,
.lc-lede-long,
[data-th] .lc-lede,
[data-th="screen"] .lc-lede,
[data-th="aurora"] .lc-hero .lc-lede{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
}

/* Row/wide card heading: one step between h2 and the grid cards. */
.v-rows .vcard-body h3,
.vz-copy h3,
.co-office h3{
  font-size:clamp(22px,2.1vw,26px);
  line-height:1.2;
  letter-spacing:-.015em;
}

/* Grid card heading: was 22, but 18 under the spec skin, 19 in .mx groups. */
.lc-card h3,
.lc-step h3,
.vcard-body h3,
.mx-group-h h3,
.vgt-card h3,
[data-th="spec"] .vcard-body h3,
[data-th] .lc-card h3,
[data-th] .vcard-body h3{
  font-size:clamp(19px,1.7vw,22px);
  line-height:1.25;
  letter-spacing:-.01em;
}

/* Card and answer body copy: was 15 / 16 / 16.5 / 17 / 14.5. */
.lc-card > p,
.vcard-body p,
.v-rows .vcard-body p,
.vz-copy p,
.mx-a p,
.mx-stat-t p,
.vtk-c p,
.vch-c p,
[data-th="spec"] .vcard-body p{
  font-size:16px;
  line-height:1.55;
}

/* --- TYPE SCALE, part 2: the last outliers ------------------------- */

/* Split-panel pages (contact, signup, challenge) capped their h1 at 50. */
:is(#page-contact,#page-signup,#page-challenge) .ct-side .lc-h1{
  font-size:clamp(34px,3.7vw,54px);
}

/* Homepage "FAQs" ran at 86px, nearly double every other section head. */
.faq-h{
  font-size:clamp(29px,3.4vw,46px);
  font-weight:600;
  letter-spacing:-.016em;
  line-height:1.14;
}

/* Section headings that carried no font rule at all and were falling
   through to the browser's default h2 (24px / 30px). */
.lc-h2,
.lc-cta-in > h2,
main .cta h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(29px,3.4vw,46px);
  line-height:1.14;
  letter-spacing:-.016em;
}

/* Panel and callout headings snap to the row step. */
.ct-form h2,
.co-form h2,
.ch-gr-copy h2,
.su-proof-h,
.how-sub,
.quote,
.rx-post.is-lead .rx-post-body h3{
  font-size:clamp(22px,2.1vw,26px);
  line-height:1.25;
  letter-spacing:-.015em;
}

/* Homepage card and feature headings: were 27 / 28 / 24 on one page. */
.card h3,
.feat h3,
.crmsync h3,
.tk-note h3,
.rx-post-body h3{
  font-size:clamp(19px,1.7vw,22px);
  line-height:1.25;
  letter-spacing:-.01em;
}

/* Supporting copy that sat off the 18 / 16 body steps. */
.trusted p,
.co-slide-q,
.co-slide blockquote{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
}
.rx-post-body > p:not(.rx-post-meta){
  font-size:16px;
  line-height:1.55;
}

/* --- TYPE SCALE, part 3: last stragglers --------------------------- */

/* The featured blog card sat at 28 while the other 66 cards sat at 22. */
.rx-post.vfeat h3,
.rx-post.vfeat .rx-post-body h3{
  font-size:clamp(22px,2.1vw,26px);
  line-height:1.25;
}

/* Engine stage panel heading, the last 24px h3 on the site. */
.st-info h3,
#stName{
  font-size:clamp(19px,1.7vw,22px);
  line-height:1.25;
  letter-spacing:-.01em;
}

/* Section ledes ran 19 / 17.5 / 17 / 16.5 against the 18px step. */
.lede,
.how-lede,
.head p,
.card > p,
.card .head p,
.crmsync p,
.who{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
}
.who{line-height:1.35}

/* About page copy on the 18px body step (the DBA line included, so it
   reads at the same size as the paragraph above it). */
.co-lede,
.co-entity,
.co-entity-hero,
.lc-p.co-sub,
.co-slide blockquote{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
}

/* ===================================================================
   MODULE HERO VIDEO
   Real product footage in the hero's right column on the module pages,
   in place of the hand-built mock each of them used to carry. Sized to
   the slot .lc-hero-art already occupied so the module pages still line
   up with each other and with the pages that keep a mock.
   16:9 is the source aspect (1920x1080); the ratio is declared so the
   slot reserves its height before the file arrives and nothing below
   the hero jumps when it does.
   =================================================================== */
.lc-vid{
  margin:0;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:#0b1b4d;              /* the footage's own field, so the */
  border:1px solid rgba(226,226,232,.75);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 28px 60px -28px rgba(13,44,115,.38);
}
.lc-vid-el{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0b1b4d;              /* poster gap shows brand, not black */
}
/* The hero opts out of the reveal fade (see the .lc-hero .lc-rv rule
   above); stated again here so a video can never inherit opacity:0. */
.lc-hero .lc-vid,
.lc-hero .lc-vid.lc-rv{opacity:1;transform:none}

/* The dark skins put the pill and the card on a navy field already, so
   the video only needs its border softened to sit on them. */
[data-th="dark"] .lc-vid,
[data-th="block"] .lc-vid,
[data-th="split"] .lc-vid,
[data-th="aurora"] .lc-vid{border-color:rgba(255,255,255,.14)}

@media (max-width:900px){
  .lc-vid{border-radius:14px}
}

/* ===================================================================
   CAREERS: OPEN ROLES
   One card per role, built from the same parts as .co-apply just below
   it on the page (same radius, same field, same border), so the open
   roles and the open application read as one family rather than two.
   =================================================================== */
.cr-jobs{display:grid;gap:18px;margin-top:28px}
.cr-job{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  /* Top, not centre: the two roles have different amounts of copy, so a
     centred button floated in dead space on the longer one. */
  align-items:start;
  gap:clamp(20px,3vw,40px);
  padding:clamp(24px,3.2vw,40px);
  border-radius:28px;
  background:radial-gradient(500px 240px at 90% 0%,rgba(0,24,255,.1),transparent 70%),linear-gradient(160deg,#f7f8ff,#f2f2f4);
  border:1px solid var(--g200);
  scroll-margin-top:96px;          /* so #ai-ml-engineer lands clear of the pill */
}
.cr-job-body h3{margin:0}
.cr-job-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:14px 0 0;padding:0;
}
.cr-job-meta li{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--brand);background:#eef0ff;
  padding:4px 10px;border-radius:999px;
}
.cr-job-body > p{margin:16px 0 0;color:var(--g600);max-width:62ch}
.cr-job-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;max-width:62ch}
.cr-job-list li{
  position:relative;padding-left:20px;
  font-size:15px;line-height:1.55;color:var(--g700);
}
.cr-job-list li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:6px;height:6px;border-radius:999px;background:var(--brand);
}
.cr-job-cta{
  display:flex;align-items:center;gap:14px;flex:none;
  padding:16px 20px;border-radius:18px;
  background:#fff;border:1px solid var(--g200);
  box-shadow:0 18px 36px -24px rgba(13,44,115,.45);
  transition:transform .25s,border-color .25s;
}
.cr-job-cta:hover{transform:translateY(-2px);border-color:#aeb6ff}
.cr-job-cta em{display:block;font-style:normal;font-size:12.5px;color:var(--g500)}
.cr-job-cta b{font-size:15px;font-weight:600;color:var(--g900)}
.cr-job-cta i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;color:#fff;background:linear-gradient(150deg,#6a63ff,#1f2bd6 75%)}
.cr-job-cta i svg{width:17px;height:17px}

@media (max-width:1000px){
  .cr-job{grid-template-columns:minmax(0,1fr)}
  .cr-job-cta{justify-self:start}
}

/* ---- hero video: give the copy its measure back -----------------------
   The `:has(.lc-hero-art)` rule above splits the hero 40/60, which the wide
   hand-built mockups needed. A 16:9 clip does not: taking 60% squeezed the
   copy into a 489px column and broke a short headline like "One view per
   account. Not three tabs and a search." across four cramped lines, while
   every page without a video kept an even 611/611. An even split restores
   the wrapping and makes the module heroes match the rest of the site. */
.lc-hero-grid:has(.lc-vid),
.lc-hero:not(.th-center):not(.th-wide) .lc-hero-grid:has(.lc-vid){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

/* ===================================================================
   HERO LIVE FIGURE — pinned right, and visibly live
   Marketing wanted the pipeline figure off the centre line and given a
   pulse, so it reads as a running counter rather than a static stat. It
   sits at the right edge of the same measure the nav pill uses, so it
   lines up with the header above it.

   The number already refreshes on its own: spa.js polls
   /api/metrics/platform every five minutes and writes the value in place
   (and the route revalidates on the same 300s cycle), so the pulse is
   telling the truth rather than decorating a fixed number.
   =================================================================== */
.hero-live{
  /* right edge of the measure, not the viewport */
  margin-left:auto;
  margin-right:0;
  margin-top:34px;
  position:relative;
  text-align:left;
  background:linear-gradient(120deg,rgba(0,24,255,.07),rgba(90,82,255,.04));
  border-color:#c9ceff;
  box-shadow:0 18px 40px -26px rgba(13,44,115,.45);
}
/* A slow breath on the card, so it catches the eye without nagging. */
@keyframes zLivePulse{
  0%,100%{box-shadow:0 18px 40px -26px rgba(13,44,115,.45),0 0 0 0 rgba(0,24,255,.28)}
  50%    {box-shadow:0 18px 40px -26px rgba(13,44,115,.45),0 0 0 7px rgba(0,24,255,0)}
}
@keyframes zLiveBlink{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.35;transform:scale(.82)}
}
.hero-live-dot{
  flex:none;
  width:9px;height:9px;border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 3px rgba(0,24,255,.16);
  animation:zLiveBlink 1.6s ease-in-out infinite;
}
.hero-live-n{animation:none}

@media (prefers-reduced-motion: no-preference){
  .hero-live{animation:zLivePulse 2.8s ease-in-out infinite}
}
/* Someone who asked for less motion still gets the card, just still. */
@media (prefers-reduced-motion: reduce){
  .hero-live-dot{animation:none}
}

@media (max-width:900px){
  /* Centre it again once the hero is a single column. */
  .hero-live{margin-inline:auto;margin-top:26px}
}

/* ===================================================================
   HERO LIVE PILL — small, electric blue, rolling, flashing
   Sits above the headline as the first thing read. Deliberately small:
   it is a supporting proof point, not a second headline.
   =================================================================== */
.hero-live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 auto 22px;
  padding:7px 8px 7px 14px;
  width:auto;
  max-width:none;
  border:1px solid #c9ceff;
  border-radius:999px;
  background:linear-gradient(120deg,rgba(0,24,255,.07),rgba(90,82,255,.04));
  font-size:14px;
  line-height:1.2;
  position:relative;
  overflow:hidden;            /* clips the sweep to the pill */
  animation:none;             /* the pulse the card used is gone */
  box-shadow:none;
}
.hero-live-dot{
  flex:none;width:7px;height:7px;border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 3px rgba(0,24,255,.16);
}
.hero-live-n{
  font-family:var(--display);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1;
  color:var(--brand);          /* electric blue */
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  align-items:center;
  height:1.15em;
  animation:none;
}
.hero-live-t{font-size:13.5px;color:var(--g600);line-height:1.2}

/* --- the rolling digits ------------------------------------------- */
.hl-cell{display:inline-block}
.hl-cell.hl-roll{
  height:1.15em;
  overflow:hidden;            /* only the current wheel position shows */
  line-height:1.15em;
}
.hl-col{
  display:block;
  transition:transform .55s cubic-bezier(.22,.9,.24,1);
  will-change:transform;
}
.hl-col i{display:block;font-style:normal;height:1.15em;line-height:1.15em}

/* --- the flash: a sheen crossing the pill, not an on/off blink ----- */
@keyframes zLiveSheen{
  0%   {transform:translateX(-140%)}
  60%,100%{transform:translateX(240%)}
}
.hero-live::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:38%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(0,24,255,.16),rgba(255,255,255,.55),transparent);
  transform:translateX(-140%);
}
@media (prefers-reduced-motion: no-preference){
  .hero-live::after{animation:zLiveSheen 3.4s ease-in-out infinite}
}
@media (prefers-reduced-motion: reduce){
  .hl-col{transition:none}
}

@media (max-width:700px){
  .hero-live{gap:7px;padding:6px 7px 6px 11px;flex-wrap:nowrap}
  .hero-live-t{display:none}     /* keep the figure and the tag, drop the prose */
  .hero-live-n{font-size:15px}
}

/* ===================================================================
   CHALLENGE POPUP
   The printed one-pager as an on-site invitation: navy field, the $100
   promise, one field. Shown once per visitor, on the homepage only,
   after they have read enough to be worth asking.
   =================================================================== */
.zc-pop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.zc-pop[hidden]{display:none}
.zc-pop-scrim{position:absolute;inset:0;background:rgba(9,14,40,.55);backdrop-filter:blur(3px);animation:zcFade .25s ease-out}
.zc-pop-card{
  position:relative;
  display:grid;
  grid-template-columns:400px minmax(0,1fr);
  width:min(1000px,100%);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  border-radius:24px;
  background:#fff;
  box-shadow:0 50px 90px -40px rgba(9,14,40,.7);
  animation:zcRise .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes zcFade{from{opacity:0}to{opacity:1}}
@keyframes zcRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* the high-five with a hand made of dollar bills, from the challenge page */
.zc-pop-art{
  position:relative;overflow:hidden;
  background:#9ef0fd url(/images/challenge/challenge-popup-highfive.webp) 50% 0/cover no-repeat;
}
.zc-pop-badge{
  position:absolute;left:24px;bottom:28px;transform:rotate(-8deg);
  font:800 40px/1 var(--display);letter-spacing:-.02em;color:#0a1636;
  background:linear-gradient(150deg,#ffd84d,#ffb300);
  padding:16px 22px;border-radius:16px;
  box-shadow:0 18px 30px -16px rgba(0,0,0,.6);
}
.zc-pop-body{padding:48px 52px 40px}
.zc-pop-x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--g200);color:var(--g600);cursor:pointer;
}
.zc-pop-x:hover{color:var(--g900);border-color:#c9ceff}
.zc-pop-x svg{width:18px;height:18px}
.zc-pop-eyebrow{
  margin:0;font:700 12.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--brand);
}
.zc-pop-h{
  margin:14px 0 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,2.6vw,34px);line-height:1.18;letter-spacing:-.015em;color:var(--g900);
}
.zc-pop-h span{color:var(--brand)}
.zc-pop-p{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--g600)}
.zc-pop-p b{color:var(--g900)}
.zc-pop-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.zc-pop-field{flex:1 1 220px;min-width:0}
.zc-pop-field input{
  width:100%;height:54px;padding:0 16px;
  border:1px solid var(--g200);border-radius:12px;
  font:400 16px/1 var(--sans);color:var(--g900);background:#fff;
}
.zc-pop-field input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.zc-pop-go{height:54px;flex:none;padding:0 26px;font-size:16px}
.zc-pop-err{flex:1 0 100%;font-style:normal;font-size:12.5px;color:#c02b30;min-height:1em}
.zc-pop-facts{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:18px 0 0;padding:0;font-size:14px;color:var(--g700)}
.zc-pop-facts li{display:flex;align-items:center;gap:6px}
.zc-pop-facts svg{width:15px;height:15px;fill:none;stroke:#16a34a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.zc-pop-fine{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--g500)}
.zc-pop-fine a{color:var(--brand)}

@media (max-width:980px){
  .zc-pop-card{grid-template-columns:300px minmax(0,1fr)}
  .zc-pop-body{padding:40px 36px 32px}
}
@media (max-width:720px){
  .zc-pop{padding:12px}
  .zc-pop-card{grid-template-columns:minmax(0,1fr)}
  .zc-pop-art{height:160px;background-position:50% 20%}
  .zc-pop-badge{font-size:26px;padding:10px 14px;left:16px;bottom:14px}
  .zc-pop-body{padding:22px 20px 20px}
  .zc-pop-h{font-size:24px}
  .zc-pop-p{font-size:15px;margin-top:12px}
  .zc-pop-form{margin-top:18px;gap:10px}
  .zc-pop-field input,.zc-pop-go{height:48px}
  .zc-pop-facts{font-size:13px;margin-top:14px}
  .zc-pop-fine{font-size:12px;margin-top:14px}
  .zc-pop-go{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .zc-pop-scrim,.zc-pop-card{animation:none}
}

/* ===================================================================
   ASK ZUUZ — the site assistant
   Answers are retrieved from the questions and module copy already
   published on this site, so it can only ever say something the site
   says. Nothing is generated.
   =================================================================== */
.zb-launch{
  position:fixed;right:20px;bottom:20px;z-index:110;
  display:inline-flex;align-items:center;gap:9px;
  height:48px;padding:0 18px 0 15px;border:0;border-radius:999px;cursor:pointer;
  font:600 14.5px/1 var(--sans);color:#fff;
  background:linear-gradient(150deg,#3b46ff,var(--brand) 70%);
  box-shadow:0 18px 38px -16px rgba(0,24,255,.6);
  transition:transform .2s ease,box-shadow .2s ease;
}
.zb-launch:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(0,24,255,.7)}
.zb-launch-i{width:19px;height:19px;flex:none}
.zb-launch[aria-expanded="true"]{opacity:0;pointer-events:none}

.zb-panel{
  position:fixed;right:20px;bottom:20px;z-index:111;
  display:flex;flex-direction:column;
  width:min(390px,calc(100vw - 32px));
  height:min(560px,calc(100dvh - 40px));
  border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid var(--g200);
  box-shadow:0 40px 80px -30px rgba(9,14,40,.55);
  animation:zbRise .26s cubic-bezier(.2,.9,.25,1);
}
.zb-panel[hidden]{display:none}
@keyframes zbRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.zb-head{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--g100);background:linear-gradient(120deg,rgba(0,24,255,.05),transparent)}
.zb-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;font:700 15px/1 var(--display);color:#fff;background:linear-gradient(150deg,#3b46ff,var(--brand))}
.zb-head b{display:block;font-size:14.5px;color:var(--g900)}
.zb-head em{display:block;font-style:normal;font-size:11.5px;color:var(--g500)}
.zb-x{margin-left:auto;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--g200);background:#fff;color:var(--g600);cursor:pointer}
.zb-x:hover{color:var(--g900);border-color:#c9ceff}
.zb-x svg{width:14px;height:14px}

.zb-log{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.zb-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5}
.zb-msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px}
.zb-msg.bot{align-self:flex-start;background:var(--g50,#f5f5f7);color:var(--g800);border:1px solid var(--g100);border-bottom-left-radius:5px}
.zb-msg a{color:var(--brand);font-weight:600}
.zb-src{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:12px;font-weight:600;color:var(--brand)}
.zb-typing{display:inline-flex;gap:4px}
.zb-typing i{width:6px;height:6px;border-radius:999px;background:var(--g400,#9aa0b4);animation:zbDot 1.1s ease-in-out infinite}
.zb-typing i:nth-child(2){animation-delay:.15s}.zb-typing i:nth-child(3){animation-delay:.3s}
@keyframes zbDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

.zb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.zb-chips button{
  font:500 12.5px/1 var(--sans);color:var(--g700);cursor:pointer;
  padding:7px 11px;border-radius:999px;border:1px solid var(--g200);background:#fff;
}
.zb-chips button:hover{border-color:var(--brand);color:var(--brand)}

.zb-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--g100)}
.zb-form input{
  flex:1;min-width:0;height:40px;padding:0 13px;
  border:1px solid var(--g200);border-radius:11px;background:#fff;
  font:400 14px/1 var(--sans);color:var(--g900);
}
.zb-form input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.zb-send{width:40px;height:40px;flex:none;border:0;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--brand);cursor:pointer}
.zb-send:hover{background:#0014cc}
.zb-send svg{width:17px;height:17px}

@media (max-width:520px){
  .zb-launch{right:14px;bottom:14px;height:44px;padding:0 15px 0 13px}
  .zb-panel{right:8px;left:8px;bottom:8px;width:auto;height:min(78dvh,540px)}
}
@media (prefers-reduced-motion: reduce){
  .zb-panel{animation:none}
  .zb-typing i{animation:none}
  .zb-launch{transition:none}
}

/* ---- dark bands need air above them ----------------------------------
   `.engine` was given `margin-top:150px` when it was built, and a later
   pass that normalised section rhythm set it to 0. On the homepage that put
   the dark band flush against the light "How it works" section below the
   CRM cards (measured: a 0px gap), so the two read as one continuous block
   and the colour change looked like a rendering fault rather than a new
   section. The gap is margin, not padding, so the page colour shows through
   it and the dark field still starts at its own edge. */
.engine{margin-top:clamp(64px,7vw,118px)}

/* ===================================================================
   SCROLL REVEAL — never blank, never half-read
   Previously `.lc-rv` started at opacity 0 in CSS with no JS fallback, and
   the observer fired at a 12% threshold with no rootMargin. At normal
   scrolling speed that left large white areas and text still fading in as
   it was being read: 42 elements on /challenge alone began fully invisible.

   Now: the dim state applies only when `html.js-rv` proves the script ran,
   it starts at 0.55 rather than 0, and `.rv-now` covers anything already on
   screen at load so the first paint is never mid-animation.
   =================================================================== */
html.js-rv .lc-rv{
  opacity:.55;
  transform:translateY(14px);
  transition:
    opacity .38s ease-out calc(var(--d,0) * 50ms),
    transform .38s ease-out calc(var(--d,0) * 50ms);
}
html.js-rv .lc-rv.in{opacity:1;transform:none}
/* On screen at load, or motion is unwelcome: no transition at all. */
html.js-rv .lc-rv.rv-now{transition:none}

@media (prefers-reduced-motion: reduce){
  html.js-rv .lc-rv,
  html.js-rv .lc-rv.in{opacity:1;transform:none;transition:none}
}

/* ===================================================================
   CHALLENGE PAGE — framing, rhythm, connector, nav clearance
   =================================================================== */

/* ---- full bleed ------------------------------------------------------
   The document keeps the UA's 8px body margin on purpose: the whole content
   measure is derived from it (see --zwrap-m), so zeroing it would shift
   every container on every page by 8px. Instead the dark bands and the
   footer reach past it by exactly that much and pad it back, so their inner
   content does not move. No vw units, so the scrollbar cannot cause
   horizontal overflow. */
#page-challenge .lc-flow,
#page-challenge .ch-guarantee{
  margin-inline:-8px;
  padding-inline:8px;
}
.zf{margin-inline:-8px;padding-inline:8px}

/* A stray rule drew a hairline down the side of the hero on this page. */
#page-challenge .ct-hero::before,
#page-challenge .ct-hero::after{content:none}

/* ---- one spacing scale ----------------------------------------------
   Measured before this: gaps of 0, 130, 0, 130, 0, 0, 0 between the eight
   sections, because the two dark bands carried their own 129.6px margin
   while every other section relied on padding alone. */
#page-challenge{--ch-gap:96px}
@media (max-width:1024px){#page-challenge{--ch-gap:72px}}
@media (max-width:640px){#page-challenge{--ch-gap:56px}}

#page-challenge > section{margin-top:0;padding-top:var(--ch-gap);padding-bottom:var(--ch-gap)}
#page-challenge > section:first-child{padding-top:0}
#page-challenge > .lc-flow{margin-top:0}
#page-challenge > .lc-cta{padding-top:var(--ch-gap);padding-bottom:var(--ch-gap)}

/* ---- connector dot --------------------------------------------------
   The rail sat at a fixed 92px inside the card grid, which put it straight
   through the first card's body text (measured: rail 92px, text 94-166px).
   It now runs level with the number badges and sits behind the cards, so it
   cannot cross a line of text at any width. */
#page-challenge .lc-steps-wrap{position:relative}
#page-challenge .lc-rail{
  /* Measured: the number badges centre 28px below the grid top, the card
     headings start at 54px. At 28 the rail runs exactly through the badges
     and its dot clears the headings. */
  top:28px;
  z-index:0;
}
#page-challenge .lc-steps{position:relative;z-index:1}
@media (max-width:900px){
  /* the cards stack, so a horizontal rail between them means nothing */
  #page-challenge .lc-rail{display:none}
}

/* ---- nav clearance ---------------------------------------------------
   The floating pill's bottom edge sits at 84px; anchors had
   scroll-margin-top: 0, so a jump landed the heading underneath it. */
#page-challenge [id],
#page-challenge > section{scroll-margin-top:100px}
/* A touch more opaque, so text passing under the pill reads as behind it
   rather than colliding with it. */
.hd-bar{background:rgba(255,255,255,.94)}

/* ---- challenge: the illustrative scan report -------------------------
   The caption under this section referred to a visual that did not exist in
   the markup, so it sat under an empty gap. Built from the same `.app`
   panel the module pages use; this only sizes it for the column it sits in. */
.ch-scan{margin-top:28px;max-width:640px}
.ch-scan .app{width:100%}
.ch-scan-body{display:block}
.ch-scan .ap-queue{border-left:0}
.ch-scan .ap-row + .ap-row{border-top:1px solid var(--line,#e6e7f0)}
#page-challenge .ch-note{margin-top:12px}
@media (max-width:640px){
  .ch-scan .ap-t span{font-size:11.5px}
}

/* ===================================================================
   CHALLENGE PAGE — typography rhythm and two visible bugs
   =================================================================== */

/* ---- 1. the eyebrow pill spanned the whole page ----------------------
   `.lum-eyebrow` is `display:flex`, which is block-level, so it fills its
   container. That is invisible while it has no background — but the bento
   and rail skins give it a pill, and the pill then stretched edge to edge
   as a pale band across the content. Affects 13 pages, not just this one:
   8 bento (/challenge, /accounts, /meeting-scheduling, /roi-calculator,
   /solutions-sdr-bdr, /solutions-mid-market, /vs-clari, /zuuz-for-zoho)
   and 5 rail. Shrink-wrapping it to its text is the whole fix. */
[data-th="bento"] .lum-eyebrow,
[data-th="rail"] .lum-eyebrow{
  display:inline-flex;
  width:fit-content;
  max-width:100%;
}

/* ---- 2. headings and their ledes were touching -----------------------
   `.lc-h2` and `.lc-sec-lede` carry no typography anywhere in this
   stylesheet, so every eyebrow -> heading -> lede on the page stacked with
   a measured 0px gap and read as one run-on block. Sized on the same scale
   as the rest of the site (h2 46 / lede 18) with the spacing the other
   section headings already use. */
.lc-h2{
  margin:14px 0 0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(29px,3.4vw,46px);
  line-height:1.14;
  letter-spacing:-.016em;
  color:var(--g900);
  text-wrap:balance;
}
.lc-h2 span{color:var(--brand)}
.lc-sec-lede{
  margin:16px 0 0;
  max-width:62ch;
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
  color:var(--g600);
}
/* On the dark bands the same pair needs the light-on-dark treatment. */
.lc-flow .lc-h2{color:#fff}
.lc-flow .lc-h2 span{color:#8f9dff}
.lc-flow .lc-sec-lede{color:#c9cdf5}

/* The block that follows a lede (cards, the scan report, a list) needs to
   clear it rather than butt against it. */
#page-challenge .lc-sec-lede + *{margin-top:28px}

/* ---- 3. the connector line was too faint to see ----------------------
   The rail ran at 15-45% of a pale blue on a near-black field, which is
   under 2:1 against its background: legible on a good monitor, invisible on
   a dim laptop screen or in daylight. Raised so the path the dot travels is
   actually readable, and the dot given a brighter core. */
.lc-rail{
  background:linear-gradient(90deg,
    rgba(143,157,255,.35),
    rgba(163,177,255,.85),
    rgba(143,157,255,.35));
  height:3px;
}
.lc-rail i{
  box-shadow:0 0 0 4px rgba(120,130,255,.55),0 0 26px 8px rgba(120,130,255,.8);
}
/* The closing CTA's fine print sat flush under the button. */
#page-challenge .ch-cta-actions{margin-bottom:18px}

/* ---- section rhythm: one gap, not two --------------------------------
   Giving every section both padding-top and padding-bottom meant two
   adjacent sections contributed 96 + 96 = 192px of dead space, which is
   what the large white gaps were. Light sections now carry the gap on top
   only, so consecutive sections produce exactly one. The dark bands keep
   padding on both sides because theirs is interior space inside a coloured
   field, not a gap between sections. */
#page-challenge > section{padding-bottom:0}
#page-challenge > .lc-flow,
#page-challenge > .ch-guarantee{padding-bottom:var(--ch-gap)}
#page-challenge > .lc-cta{padding-bottom:var(--ch-gap)}

/* MCP page: per-platform connect tabs */
.mcpt-url{margin:14px 0 0;font-size:15px;color:var(--g600)}
.mcpt-code,.mcpt-url code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:none;letter-spacing:0;font-size:.92em;background:#eef0ff;color:#0018ff;padding:2px 8px;border-radius:6px;word-break:break-all}
.mcpt{margin-top:28px}
.mcpt-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mcpt-tab{font:inherit;font-weight:600;font-size:15px;padding:10px 18px;border-radius:999px;border:1px solid var(--g200);background:#fff;color:var(--g600);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.mcpt-tab:hover{border-color:#c7ccf5}
.mcpt-tab.on{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
.mcpt-pane{margin-top:8px}
.mcpt-pane[hidden]{display:none}
.mcpt-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--g500,#6b6b80)}