html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Brainchild Technologies, brainchildtech.net
   Layout, colour and type values come from the design export
   (brainchild-2.html). Font is self-hosted rather than fetched from
   Google Fonts, because the CSP in _headers allows 'self' only. */

/* ---------- Font (self-hosted, variable 300–600) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design export ---------- */
body{margin:0;background:#050d15;font-family:Manrope,"Helvetica Neue",sans-serif;color:#e6eef5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,li{margin:0}
ol,ul{padding:0;list-style:none}
button{font-family:inherit}
html{scroll-behavior:smooth}
#demo,#compare,#why,#founder,#capabilities,#owners,#setup{scroll-margin-top:36px}

/* clip, not hidden: an overflow:hidden box can still be scrolled by a script or an
   in-page link (it was, by the hero chevron, on iPhone), and the visitor can't
   scroll it back. hidden stays first only for browsers without clip. */
.v{position:relative;container-type:inline-size;width:100%;background:#050d15;overflow:hidden;overflow:clip;isolation:isolate}
.v *,.v-lc,.v-lc *,.v-call,.v-call *{box-sizing:border-box}  /* the chat sheet and call panel live outside .v (app.js) */
.v-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.v-bg-a{position:absolute;top:-340px;right:-8%;width:1100px;height:900px;background:radial-gradient(ellipse at center,rgba(56,130,190,0.36) 0%,rgba(20,60,95,0.15) 38%,rgba(5,13,21,0) 70%)}
.v-bg-b{position:absolute;top:1500px;left:-18%;width:900px;height:900px;background:radial-gradient(circle at center,rgba(40,100,155,0.13) 0%,rgba(5,13,21,0) 68%)}
.v-bg-c{position:absolute;bottom:-160px;left:28%;width:1000px;height:800px;background:radial-gradient(ellipse at center,rgba(56,130,190,0.1) 0%,rgba(5,13,21,0) 68%)}
.v-wrap{position:relative;z-index:1;overflow-x:clip}
.v-band{position:relative;z-index:0}
.v-band::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:100cqw;z-index:-1;pointer-events:none}
.v-band-why::before{top:-90px;bottom:-70px;background:linear-gradient(180deg,rgba(9,13,17,0) 0%,rgba(10,14,18,0.92) 15%,rgba(11,15,19,0.96) 58%,rgba(9,13,17,0) 100%)}
.v-band-founder::before{top:-140px;bottom:-240px;background:radial-gradient(ellipse 68% 58% at 50% 38%,rgba(52,122,182,0.16) 0%,rgba(5,13,21,0) 70%)}
.v-band-why .v-loss-tile{background:linear-gradient(180deg,#0b1218,#080d12);border-color:rgba(142,166,186,0.09)}
.v-band-why .v-pill{color:#8199aa;border-color:rgba(142,166,186,0.14)}
.v-band-why .v-h2{color:#e9eff4}
.v-band-why .v-loss-vis{background:#060a0e;border-color:rgba(142,166,186,0.05)}
.v-in{width:100%;max-width:1320px;margin:0 auto;padding-left:clamp(20px,5.6cqi,84px);padding-right:clamp(20px,5.6cqi,84px)}

.v-sec{padding-top:clamp(84px,10cqi,152px)}
.v-rule{height:1px;background:linear-gradient(90deg,rgba(150,185,215,0) 0%,rgba(150,185,215,0.16) 22%,rgba(150,185,215,0.16) 78%,rgba(150,185,215,0) 100%)}
.v-h1{font-size:clamp(30px,6cqi,84px);line-height:1.04;letter-spacing:-0.035em;font-weight:300;color:#f4f8fc;text-wrap:balance}
.v-h2{font-size:clamp(29px,3.7cqi,52px);line-height:1.12;letter-spacing:-0.03em;font-weight:300;color:#f2f7fb}
.v-h3{font-size:18.5px;font-weight:500;letter-spacing:-0.01em;color:#f1f5f9}
.v-lead{font-size:clamp(16px,1.35cqi,19px);line-height:1.68;color:#a8bbcc;max-width:620px}
.v-body{font-size:14.5px;line-height:1.65;color:#93a7ba}

.v-page:not([data-page="home"]) > section:first-of-type{padding-top:clamp(32px,3.5cqi,54px)}
.v-page:not([data-page="home"]) > section:first-of-type > .v-sec:first-child{padding-top:clamp(32px,3.5cqi,54px)}
.v-page:not([data-page="home"]) > section:first-of-type > .v-rule:first-child{display:none}
.v-page:not([data-page="home"]) > section:first-of-type > *:first-child,
.v-page:not([data-page="home"]) > section:first-of-type > .v-rule:first-child + *{margin-top:0}
.v-page:not([data-page="home"]) > section:first-of-type.v-band::before{top:-30px}
.v-page{display:none}
html:not([data-page]) .v-page[data-page="home"],
html[data-page="home"] .v-page[data-page="home"],
html[data-page="why"] .v-page[data-page="why"],
html[data-page="about"] .v-page[data-page="about"],
html[data-page="insights"] .v-page[data-page="insights"]{display:block;animation:vpage .34s cubic-bezier(0.2,0.7,0.2,1) both}
@keyframes vpage{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.v-nav-l{display:flex;align-items:center;gap:clamp(12px,1.4cqi,20px);min-width:0}
.v-brandtext{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.v-footbrand{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.v-footbrand-n{font-size:19px;color:#f1f5f9;line-height:1}
.v-footbrand-s{font-size:7.5px;letter-spacing:0.42em;text-indent:0.42em;color:#6d8296}
.v-brandname{font-size:26px;font-weight:400;letter-spacing:-0.015em;color:#f2f7fb;line-height:1}
.v-brandsub{font-size:8px;letter-spacing:0.42em;text-indent:0.42em;color:#7c8fa1}
.v-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,0.02);border:1px solid rgba(150,185,215,0.18);transition:background .2s ease,border-color .2s ease}
.v-burger:hover{background:rgba(255,255,255,0.05);border-color:rgba(150,185,215,0.34)}
.v-burger i{display:block;height:1.5px;border-radius:2px;background:#c7d9e8;transition:transform .28s cubic-bezier(0.2,0.7,0.2,1),opacity .2s ease}
.v-burger i:nth-child(1){width:100%}
.v-burger i:nth-child(2){width:72%}
.v-burger i:nth-child(3){width:100%}
.v-burger.is-on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.v-burger.is-on i:nth-child(2){opacity:0}
.v-burger.is-on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.v-scrim{position:fixed;inset:0;z-index:58;background:rgba(3,9,15,0.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.v-scrim.is-on{opacity:1}
.v-mn{position:fixed;top:0;left:0;bottom:0;z-index:59;display:flex;flex-direction:column;width:min(322px,86vw);padding:22px 20px 24px;overflow-y:auto;background:linear-gradient(180deg,#0b1826,#070f18);border-right:1px solid rgba(150,185,215,0.12);box-shadow:34px 0 70px -40px rgba(0,0,0,1);transform:translateX(-102%);transition:transform .34s cubic-bezier(0.2,0.7,0.2,1);visibility:hidden}
.v-mn.is-on{transform:none;visibility:visible}
.v-mn-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.v-mn-brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.v-mn-brand>span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;font-size:7px;letter-spacing:0.4em;text-indent:0.4em;color:#7c8fa1}
.v-mn-brand b{font-size:20px;font-weight:400;letter-spacing:-0.015em;color:#f2f7fb;line-height:1}
.v-mn-x{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;cursor:pointer;color:#93a9bc;background:rgba(255,255,255,0.03);border:1px solid rgba(150,185,215,0.16)}
.v-mn-x:hover{color:#eaf2f9;border-color:rgba(150,185,215,0.32)}
.v-mn-links{display:flex;flex-direction:column;gap:4px;margin:26px 0 24px}
.v-mn-link{display:flex;align-items:flex-start;gap:13px;padding:14px 14px;border-radius:13px;text-decoration:none;color:#9fb4c6;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.v-mn-link svg{flex-shrink:0;margin-top:2px}
.v-mn-link span{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px;line-height:1.4;color:#7b8fa1}
.v-mn-link b{font-size:15.5px;font-weight:500;letter-spacing:-0.012em;color:#dbe9f5}
.v-mn-link:hover{background:rgba(255,255,255,0.035);border-color:rgba(150,185,215,0.14);color:#cfe1f0}
html[data-page="home"] .v-mn-link[data-nav="home"],
html[data-page="why"] .v-mn-link[data-nav="why"],
html[data-page="about"] .v-mn-link[data-nav="about"]{background:linear-gradient(180deg,rgba(27,51,73,0.95),rgba(14,29,43,0.95));border-color:rgba(98,177,232,0.32);color:#8ec7f2}
html[data-page="home"] .v-mn-link[data-nav="home"] b,
html[data-page="why"] .v-mn-link[data-nav="why"] b,
html[data-page="about"] .v-mn-link[data-nav="about"] b{color:#f1f7fc}
.v-mn-cta{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0;margin-top:auto;padding:15px 16px;border-radius:12px;font-size:14.5px;text-decoration:none;color:#07131d;font-weight:600;background:linear-gradient(180deg,#f7fafd,#dfeaf4);border:1px solid #eaf2f9;box-shadow:0 -20px 26px -20px rgba(5,12,20,0.98)}
.v-mn-cta:hover{filter:brightness(1.04)}
body.v-locked{overflow:hidden}
.v-nav{height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.v-navcta{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 19px;border-radius:999px;border:1px solid rgba(160,195,225,0.26);background:linear-gradient(180deg,rgba(98,177,232,0.1),rgba(98,177,232,0.03));font-size:14px;font-weight:500;color:#eaf2f9;transition:border-color 0.25s ease,background 0.25s ease,transform 0.2s ease}
.v-navcta:hover{border-color:rgba(98,177,232,0.7);background:linear-gradient(180deg,rgba(98,177,232,0.2),rgba(98,177,232,0.07));transform:translateY(-1px)}

.v-hero{position:relative;text-align:center;padding-top:clamp(56px,7.5cqi,124px);padding-bottom:clamp(40px,4.4cqi,72px)}
.v-hero .v-lead{margin-left:auto;margin-right:auto}
.v-hero .v-ctas{justify-content:center}
.v-heroglow{position:absolute;left:50%;top:-180px;width:min(1240px,122cqw);height:860px;z-index:-1;pointer-events:none;opacity:0.95;--tm:3.4;transform:translateX(-50%);}
.v-heroglow i{position:absolute;display:block;border-radius:50%;filter:blur(54px);will-change:transform;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
.v-hg1{left:2%;top:18%;width:50%;height:56%;background:radial-gradient(circle at 50% 50%,rgba(120,196,246,0.95) 0%,rgba(52,126,192,0.5) 44%,rgba(6,16,26,0) 68%);animation:vdrift1 8s cubic-bezier(0.37,0,0.63,1) infinite}
.v-hg2{right:0%;top:2%;width:44%;height:50%;background:radial-gradient(circle at 50% 50%,rgba(92,172,234,0.85) 0%,rgba(32,96,158,0.4) 44%,rgba(6,16,26,0) 68%);animation:vdrift2 7s cubic-bezier(0.37,0,0.63,1) infinite}
.v-hg3{left:24%;bottom:-2%;width:54%;height:44%;background:radial-gradient(circle at 50% 50%,rgba(146,212,250,0.62) 0%,rgba(42,110,178,0.26) 46%,rgba(6,16,26,0) 70%);animation:vdrift3 10s cubic-bezier(0.37,0,0.63,1) infinite}
@keyframes vdrift1{
  0%{transform:translate3d(0,0,0) scale(1)}
  22%{transform:translate3d(calc(38px * var(--tm)),calc(-26px * var(--tm)),0) scale(1.09)}
  46%{transform:translate3d(calc(15px * var(--tm)),calc(30px * var(--tm)),0) scale(1.11)}
  70%{transform:translate3d(calc(-33px * var(--tm)),calc(19px * var(--tm)),0) scale(1.11)}
  88%{transform:translate3d(calc(-16px * var(--tm)),calc(-12px * var(--tm)),0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes vdrift2{
  0%{transform:translate3d(0,0,0) scale(1.08)}
  26%{transform:translate3d(calc(-29px * var(--tm)),calc(21px * var(--tm)),0) scale(1)}
  52%{transform:translate3d(calc(19px * var(--tm)),calc(33px * var(--tm)),0) scale(1.09)}
  74%{transform:translate3d(calc(33px * var(--tm)),calc(-17px * var(--tm)),0) scale(1.11)}
  100%{transform:translate3d(0,0,0) scale(1.08)}}
@keyframes vdrift3{
  0%{transform:translate3d(0,0,0) scale(1)}
  30%{transform:translate3d(calc(25px * var(--tm)),calc(-29px * var(--tm)),0) scale(1.09)}
  58%{transform:translate3d(calc(-21px * var(--tm)),calc(-13px * var(--tm)),0) scale(1.11)}
  82%{transform:translate3d(calc(-30px * var(--tm)),calc(23px * var(--tm)),0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@media (prefers-reduced-motion: reduce){.v-heroglow i{animation:none}}
.v-pill-wrap{display:flex;align-items:center;justify-content:center;gap:18px;width:100%}
.v-pill-wrap::before,.v-pill-wrap::after{content:"";height:1px;flex:1 1 0;max-width:220px}
.v-pill-wrap::before{background:linear-gradient(90deg,rgba(150,185,215,0) 0%,rgba(150,185,215,0.26) 100%)}
.v-pill-wrap::after{background:linear-gradient(90deg,rgba(150,185,215,0.26) 0%,rgba(150,185,215,0) 100%)}
.v-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;border:1px solid rgba(150,185,215,0.18);background:rgba(255,255,255,0.022);font-size:11px;letter-spacing:0.22em;color:#9ab6cd;white-space:nowrap}
.v-centered{text-align:center}
.v-centered .v-lead{margin-left:auto;margin-right:auto}
.v-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
.v-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;border:0;-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;padding:0 26px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;transition:transform 0.22s ease,box-shadow 0.3s ease,background 0.3s ease,border-color 0.3s ease}
.v-btn-dark{background:linear-gradient(180deg,#7cc2f1,#4f9fd6);color:#062134;box-shadow:0 14px 30px -14px rgba(98,177,232,0.9)}
.v-btn-dark:hover{transform:translateY(-2px);box-shadow:0 22px 42px -14px rgba(98,177,232,0.95)}
.v-btn-line{border:1px solid rgba(180,210,235,0.3);color:#e9f1f8;background:rgba(255,255,255,0.015)}
.v-btn-line:hover{transform:translateY(-2px);border-color:rgba(98,177,232,0.6);background:rgba(98,177,232,0.08)}

.v-msg{max-width:80%;padding:9px 13px 7px;display:flex;flex-direction:column;gap:3px;box-shadow:0 14px 26px -20px rgba(0,0,0,1)}
.v-msg-in{background:#18242e;border:1px solid rgba(150,185,215,0.07);border-radius:14px 14px 14px 5px}
.v-msg-out{background:linear-gradient(180deg,#10624f,#0b4c3f);border-radius:14px 14px 5px 14px}
.v-msg-t{font-size:14.5px;line-height:1.5;color:#e7eef4}
.v-msg-m{align-self:flex-end;display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(203,223,238,0.45)}
@keyframes vwave{from{transform:scaleY(0.4)}to{transform:scaleY(1)}}

@media (hover: hover) and (pointer: fine){
}

.v-loss{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.v-loss-tile{display:flex;flex-direction:column;height:100%;gap:16px;padding:20px 20px 24px;border-radius:18px;background:linear-gradient(180deg,#0c1620,#09121a);border:1px solid rgba(150,185,215,0.1);transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1),border-color 0.4s ease}
.v-loss-tile:hover{transform:translateY(-3px);border-color:rgba(150,185,215,0.2)}
.v-loss-vis{flex-grow:1;min-height:168px;overflow:hidden;border-radius:12px;background:#070d13;border:1px solid rgba(150,185,215,0.05);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.v-mini{display:inline-block;max-width:88%;padding:7px 11px;font-size:12.5px;line-height:1.4;color:#dde7ef}
.v-mini-in{align-self:flex-start;background:#18242e;border-radius:10px 10px 10px 3px}
.v-mini-out{align-self:flex-end;background:#134a3e;border-radius:10px 10px 3px 10px}
.v-miss{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;background:#101b25;border:1px solid rgba(228,130,130,0.12)}

.v-founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:start;width:100%;max-width:880px;margin-left:auto;margin-right:auto;padding:clamp(26px,3.2cqi,44px);border-radius:24px;background:linear-gradient(180deg,rgba(15,29,42,0.85),rgba(8,17,26,0.85));border:1px solid rgba(150,185,215,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.045),0 40px 80px -50px rgba(0,0,0,1);margin-top:28px}
.v-portrait{width:112px;height:112px;border-radius:50%;object-fit:cover;border:1px solid rgba(160,195,225,0.25);box-shadow:0 0 0 6px rgba(98,177,232,0.06)}
.v-li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(160,195,225,0.24);font-size:13px;font-weight:500;color:#a8bbcc;transition:color 0.25s ease,border-color 0.25s ease,background 0.25s ease}
.v-li:hover{color:#ffffff;border-color:rgba(98,177,232,0.65);background:rgba(98,177,232,0.08)}

.v-foot{margin-top:clamp(68px,8cqi,116px);padding:44px 0 40px;border-top:1px solid rgba(150,185,215,0.12)}
.v-foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px}
.v-foot-col{display:flex;flex-direction:column;gap:11px}
.v-foot-h{font-size:11.5px;letter-spacing:0.22em;color:#6d8296}
.v-foot-l{font-size:14.5px;color:#9cb0c2;transition:color 0.22s ease}
.v-foot-l:hover{color:#ffffff}
.v-foot-bar{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid rgba(150,185,215,0.08);font-size:13px;color:#6d8296}

@keyframes vmsgA{from{opacity:0;transform:translateY(12px) scale(0.985)}to{opacity:1;transform:none}}
@keyframes vmsgB{from{opacity:0;transform:translateY(12px) scale(0.985)}to{opacity:1;transform:none}}
@keyframes vstepA{0%{opacity:0;transform:translateY(6px)}35%{opacity:1;transform:none}100%{opacity:0.45;transform:none}}
@keyframes vstepB{0%{opacity:0;transform:translateY(6px)}35%{opacity:1;transform:none}100%{opacity:0.45;transform:none}}
@keyframes vdoneA{0%{opacity:0;transform:translateY(8px) scale(0.92)}60%{opacity:1;transform:scale(1.11)}100%{opacity:1;transform:none}}
@keyframes vdoneB{0%{opacity:0;transform:translateY(8px) scale(0.92)}60%{opacity:1;transform:scale(1.11)}100%{opacity:1;transform:none}}
@keyframes vrise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.v-rise{animation:vrise 1s cubic-bezier(0.2,0.7,0.2,1) both}
.v-rise-2{animation-delay:0.1s}
.v-rise-3{animation-delay:0.2s}
.v-rise-4{animation-delay:0.3s}
.v-rise-5{animation-delay:0.42s}
.v-reveal{transition:opacity 1s cubic-bezier(0.2,0.7,0.2,1),transform 1s cubic-bezier(0.2,0.7,0.2,1)}
.v.v-anim .v-reveal:not(.is-in){opacity:0;transform:translateY(26px)}
.v-loss-tile.v-reveal:nth-child(2){transition-delay:0.1s}
.v-loss-tile.v-reveal:nth-child(3){transition-delay:0.2s}
.v-loss-tile.v-reveal:nth-child(4){transition-delay:0.3s}
@media (prefers-reduced-motion: reduce){.v *{animation:none !important;transition:none !important}.v.v-anim .v-reveal:not(.is-in){opacity:1;transform:none}.v-track-fill{height:100%}}

@keyframes vflowping{0%{transform:scale(1);opacity:0.5}72%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion: reduce){.v-flow-ping{animation:none;opacity:0}}
.v-lc{position:fixed;right:24px;bottom:24px;width:388px;max-width:calc(100vw - 32px);height:min(600px,calc(100vh - 48px));z-index:60;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid rgba(150,185,215,0.16);background:linear-gradient(180deg,#0e1b27,#080f17);box-shadow:0 40px 90px -40px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,0.4);opacity:0;transform:translateY(22px) scale(0.985);pointer-events:none;transition:opacity 0.32s cubic-bezier(0.2,0.7,0.2,1),transform 0.32s cubic-bezier(0.2,0.7,0.2,1)}
.v-lc.is-open{opacity:1;transform:none;pointer-events:auto}
.v-lc-head{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid rgba(150,185,215,0.12);background:rgba(11,22,33,0.9);flex-shrink:0}
.v-lc-av{width:38px;height:38px;border-radius:50%;background:#ffffff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v-lc-name{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
.v-lc-name b{font-size:15px;font-weight:500;color:#eaf1f7}
.v-lc-name span{display:flex;align-items:center;gap:6px;font-size:12px;color:#8697a6}
.v-lc-name i{width:6px;height:6px;border-radius:50%;background:#5fd3a0;display:block}
.v-lc-x{width:32px;height:32px;border-radius:50%;border:none;background:rgba(150,185,215,0.08);color:#9fb3c4;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s ease}
.v-lc-x:hover{background:rgba(150,185,215,0.16)}
.v-lc-body{flex-grow:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.v-lc-row{display:flex;flex-direction:column}
.v-lc-note{margin:2px 4px 0;font-size:12px;line-height:1.5;color:#8697a6;text-align:center}
.v-lc-note a{color:#7cc4f0;text-decoration:underline}
.v-lc-typing{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
.v-lc-typing i{width:6px;height:6px;border-radius:50%;background:#8697a6;display:block;animation:vlcdot 1.3s ease-in-out infinite}
.v-lc-typing i:nth-child(2){animation-delay:0.18s}
.v-lc-typing i:nth-child(3){animation-delay:0.36s}
@keyframes vlcdot{0%,60%,100%{opacity:0.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.v-lc-foot{display:flex;align-items:center;gap:9px;padding:12px 13px;border-top:1px solid rgba(150,185,215,0.12);background:rgba(9,18,27,0.9);flex-shrink:0}
.v-lc-in{flex-grow:1;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(150,185,215,0.16);background:rgba(150,185,215,0.06);color:#e6eef5;font-family:inherit;font-size:14.5px;outline:none;min-width:0}
.v-lc-in::placeholder{color:#7d8f9d}
.v-lc-in:focus{border-color:rgba(98,177,232,0.55)}
.v-lc-send{width:44px;height:44px;border-radius:50%;border:none;flex-shrink:0;cursor:pointer;background:linear-gradient(180deg,#7cc2f1,#4f9fd6);color:#062134;display:flex;align-items:center;justify-content:center;transition:transform 0.18s ease,opacity 0.2s ease}
.v-lc-send:hover{transform:translateY(-1px)}
.v-lc-send:disabled{opacity:0.45;cursor:default;transform:none}
@media (prefers-reduced-motion: reduce){.v-lc{transition:none}.v-lc-typing i{animation:none}}
@media (max-width: 720px){.v-lc{right:0;bottom:0;width:100%;max-width:100%;height:86vh;border-radius:18px 18px 0 0}}
.v-call{position:fixed;right:24px;bottom:24px;width:388px;max-width:calc(100vw - 32px);z-index:61;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid rgba(150,185,215,0.16);background:linear-gradient(180deg,#0e1b27,#080f17);box-shadow:0 40px 90px -40px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,0.4);opacity:0;transform:translateY(22px) scale(0.985);pointer-events:none;transition:opacity 0.32s cubic-bezier(0.2,0.7,0.2,1),transform 0.32s cubic-bezier(0.2,0.7,0.2,1)}
.v-call.is-open{opacity:1;transform:none;pointer-events:auto}
.v-call-ask{display:none;flex-direction:column;align-items:center;gap:18px;padding:46px 22px 42px}
.v-call.is-ask .v-call-ask{display:flex}
.v-call.is-ask .v-call-stage,.v-call.is-ask .v-call-foot{display:none}
.v-call-ask-q{margin:0;font-size:clamp(15px,1.4cqi,17px);line-height:1.5;color:#dbe9f5;text-align:center}
.v-call-ask-btns{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
.v-call-lang{display:inline-flex;align-items:center;justify-content:center;min-width:112px;height:46px;padding:0 22px;border-radius:999px;font:inherit;font-size:15px;cursor:pointer;color:#eaf2f9;background:rgba(255,255,255,0.03);border:1px solid rgba(150,185,215,0.24);transition:background .22s ease,border-color .22s ease,transform .18s ease}
.v-call-lang:hover{background:rgba(98,177,232,0.1);border-color:rgba(98,177,232,0.5);transform:translateY(-1px)}
.v-call-lang[data-call-lang="ur"]{font-size:19px}
.v-call-ask-n{margin:0;font-size:12px;color:#7b8fa0;text-align:center}
.v-call.is-ask .v-call-ask{max-height:calc(100dvh - 120px);overflow-y:auto;padding:26px 18px 28px;gap:14px}
.v-call-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 22px 30px}
.v-call-orb{position:relative;width:150px;height:150px;display:grid;place-items:center}
.v-call-orb i{position:absolute;border-radius:50%;border:1px solid rgba(98,177,232,0.28);inset:22%}
.v-call-orb .r1{inset:0;background:radial-gradient(circle at 50% 42%,rgba(98,177,232,calc(0.10 + var(--amp,0) * 0.34)),rgba(98,177,232,0) 68%);border-color:transparent;transition:background 0.12s linear}
.v-call-orb .r2{inset:11%;border-color:rgba(98,177,232,0.32)}
.v-call-orb .r3{inset:22%;background:linear-gradient(180deg,rgba(17,35,51,0.96),rgba(8,17,26,0.96));border-color:rgba(98,177,232,0.5);box-shadow:0 0 calc(18px + var(--amp,0) * 46px) -6px rgba(98,177,232,calc(0.25 + var(--amp,0) * 0.5));transition:box-shadow 0.12s linear}
.v-call-ping{position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(98,177,232,0.45);animation:vcallping 2.6s cubic-bezier(0.25,0.7,0.35,1) infinite}
.v-call-ping.p2{animation-delay:0.85s}
.v-call-ping.p3{animation-delay:1.7s}
@keyframes vcallping{0%{transform:scale(1);opacity:0.5}75%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.v-call-mark{position:relative;z-index:1;height:44px;width:auto;transform:scale(calc(1 + var(--amp,0) * 0.07));transition:transform 0.12s linear}
.v-call-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:42px;width:100%}
.v-call-wave i{display:block;width:3px;border-radius:999px;background:linear-gradient(180deg,#8fcdf5,#3f86bd);height:calc(5px + var(--h,0.3) * var(--amp,0.12) * 74px);transition:height 0.1s ease-out}
.v-call-state{font-size:14.5px;color:#cfe0ee;letter-spacing:-0.01em;text-align:center;margin:0}
.v-call-sub{font-size:12.5px;color:#7d8f9d;text-align:center;margin:-14px 0 0;line-height:1.5}
.v-call-sub a{color:#7cc4f0;text-decoration:underline}
.v-call-sub a.v-call-go{color:#062134;text-decoration:none}  /* a link styled as the panel's button (WhatsApp) */
.v-call-timer{font-size:12px;letter-spacing:0.16em;color:#5fd3a0;margin:-14px 0 0}
.v-call-foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border-top:1px solid rgba(150,185,215,0.12);background:rgba(9,18,27,0.9)}
.v-call-btn{height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(150,185,215,0.2);background:rgba(150,185,215,0.06);color:#dbe9f5;font-family:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background 0.2s ease,border-color 0.2s ease}
.v-call-btn:hover{background:rgba(150,185,215,0.12)}
.v-call-btn.is-off{border-color:rgba(216,139,139,0.45);color:#ecbcbc;background:rgba(216,139,139,0.1)}
.v-call-btn.is-off:hover{background:rgba(216,139,139,0.18)}
@media (prefers-reduced-motion: reduce){.v-call{transition:none}.v-call-ping{animation:none;opacity:0}.v-call-wave i,.v-call-mark,.v-call-orb .r1,.v-call-orb .r3{transition:none}}
@media (max-width: 720px){.v-call{right:0;bottom:0;width:100%;max-width:100%;border-radius:18px 18px 0 0}}

html:not([data-cmp]) .v-cmp-tab[data-cmp-tab="clothing"],
html[data-cmp="clothing"] .v-cmp-tab[data-cmp-tab="clothing"],
html[data-cmp="electronics"] .v-cmp-tab[data-cmp-tab="electronics"],
html[data-cmp="home"] .v-cmp-tab[data-cmp-tab="home"],
html[data-cmp="clinics"] .v-cmp-tab[data-cmp-tab="clinics"],
html:not([data-cmp]) .v-cmp-panel[data-cmp-panel="clothing"],
html[data-cmp="clothing"] .v-cmp-panel[data-cmp-panel="clothing"],
html[data-cmp="electronics"] .v-cmp-panel[data-cmp-panel="electronics"],
html[data-cmp="home"] .v-cmp-panel[data-cmp-panel="home"],
html[data-cmp="clinics"] .v-cmp-panel[data-cmp-panel="clinics"],
.v-fnd-t{display:flex;flex-direction:column;max-width:660px}
.v-fnd-p{font-size:clamp(15.5px,1.38cqi,18px);line-height:1.74;font-weight:300;letter-spacing:-0.004em;color:#dde7f0}
.v-fnd-p + .v-fnd-p{margin-top:17px}
.v-fnd-by{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.v-fnd-n{font-size:15px;font-weight:500;color:#f1f5f9}
.v-who-h{font-size:clamp(27px,3.2cqi,44px);line-height:1.14}
  .v-who-sub{margin:16px auto 0}
  .v-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8cqi,22px);width:100%;max-width:880px;margin:clamp(30px,3.4cqi,46px) auto 0;text-align:left}
  .v-who-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:clamp(22px,2.2cqi,28px);border-radius:18px;background:linear-gradient(180deg,#0c1620,#09121a);border:1px solid rgba(150,185,215,0.1);transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1),border-color 0.4s ease}
  .v-who-card:hover{transform:translateY(-3px);border-color:rgba(150,185,215,0.2)}
  .v-who-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#8ec7f2;border:1px solid rgba(98,177,232,0.28);background:rgba(98,177,232,0.08)}
  .v-who-t{margin:16px 0 0;font-size:clamp(16px,1.55cqi,19px);font-weight:500;letter-spacing:-0.015em;color:#f1f5f9}
  .v-who-x{margin:7px 0 0;font-size:clamp(12px,1.05cqi,13px);letter-spacing:0.012em;color:#73889a}
  .v-who-p{margin:14px 0 0;font-size:clamp(13.5px,1.28cqi,15px);line-height:1.55;color:#98adbf}
  .v-who-both{margin:clamp(22px,2.4cqi,32px) 0 0;font-size:13.5px;letter-spacing:-0.005em;color:#8fa9c0}
  .v-onb-h{font-size:clamp(27px,3.2cqi,44px);line-height:1.14}
.v-onb-sub{margin:16px auto 0}
.v-onb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2cqi,34px);list-style:none;width:100%;max-width:960px;margin:clamp(34px,4cqi,56px) auto 0;padding:0;text-align:left}
.v-onb-step{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:20px;border-top:1px solid rgba(150,185,215,0.12)}
.v-onb-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:600;color:#8ec7f2;border:1px solid rgba(98,177,232,0.32);background:rgba(98,177,232,0.08)}
.v-onb-t{margin:14px 0 0;font-size:clamp(16px,1.55cqi,19px);font-weight:500;letter-spacing:-0.015em;color:#f1f5f9}
.v-onb-p{margin:8px 0 0;font-size:clamp(13.5px,1.28cqi,15px);line-height:1.55;color:#98adbf}
.v-onb-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-top:clamp(34px,4cqi,52px)}
/* Every conversation makes your business smarter: three steps, each under the part of
   the business it serves, the last an owner message with a quick reply */
.v-sig-h{font-size:clamp(27px,3.2cqi,44px);line-height:1.14}
.v-sig-card{position:relative;margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.035);border:1px solid rgba(150,185,215,0.13)}
.v-sig-tag{display:inline-block;margin-bottom:6px;font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#7d92a4}
.v-sig-card p{margin:0;font-size:clamp(13px,1.2cqi,14.5px);line-height:1.5;color:#a3b4c2}
.v-sig-card b{font-weight:600;color:#cfe0ee}
.v-sig-card em{font-style:normal;font-weight:600;color:#8ec7f2}
.v-sig-label{margin-top:14px;font-size:10.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#62b1e8}
.v-sig .v-sig-label + .v-onb-t{margin-top:6px}
.v-sig-reply{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px -14px -12px;padding:10px 14px;border-top:1px solid rgba(150,185,215,0.13);font-size:14px;font-weight:500;color:#53bdeb;cursor:default;user-select:none}
.v-sig-reply svg{flex:none}
.v-sig-note{margin:clamp(28px,3cqi,40px) auto 0;max-width:560px;font-size:clamp(14px,1.25cqi,16px);line-height:1.55;color:#7d92a4}
.v-fm-scrim{position:fixed;inset:0;z-index:70;background:rgba(3,9,15,0.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.v-fm-scrim.is-on{opacity:1;visibility:visible}
.v-fm{position:fixed;z-index:71;left:50%;top:50%;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;transform:translate(-50%,-46%) scale(0.98);opacity:0;border-radius:20px;border:1px solid rgba(98,177,232,0.28);background:linear-gradient(170deg,#101f2d,#0a141d);box-shadow:0 0 0 4px rgba(98,177,232,0.04),0 50px 90px -40px rgba(0,0,0,1);visibility:hidden;transition:opacity .28s ease,transform .28s cubic-bezier(0.2,0.7,0.2,1),visibility .28s}
.v-fm.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.v-fm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 0}
.v-fm-h{margin:0;font-size:19px;font-weight:500;letter-spacing:-0.015em;color:#f1f5f9}
.v-fm-x{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:9px;cursor:pointer;color:#93a9bc;background:rgba(255,255,255,0.03);border:1px solid rgba(150,185,215,0.16)}
.v-fm-x:hover{color:#eaf2f9;border-color:rgba(150,185,215,0.32)}
.v-fm-body{display:flex;flex-direction:column;gap:13px;padding:18px 20px 22px}
.v-fm-row{display:flex;flex-direction:column;gap:6px;text-align:left}
.v-fm-row span{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:#7f929f}
.v-fm-row input{width:100%;height:44px;padding:0 13px;border-radius:11px;font:inherit;font-size:15px;color:#eaf2f9;background:rgba(255,255,255,0.03);border:1px solid rgba(150,185,215,0.18);outline:none;transition:border-color .2s ease,background .2s ease}
.v-fm-row input::placeholder{color:#5f7180}
.v-fm-row input:focus{border-color:rgba(98,177,232,0.55);background:rgba(98,177,232,0.05)}
.v-fm-row input.is-bad{border-color:rgba(216,139,139,0.7)}
.v-fm-send{margin-top:6px;justify-content:center}
.v-fm.is-sent .v-fm-body{display:none}
.v-fm.is-sent .v-fm-done{display:block}
.v-fm-done{display:none;margin:0;padding:34px 24px 38px;text-align:center;font-size:15.5px;line-height:1.6;color:#dbe9f5}
@media (prefers-reduced-motion: reduce){.v-fm,.v-fm-scrim{transition:none}}
.v-vs-h2{font-size:clamp(28px,3.4cqi,46px);line-height:1.14;max-width:900px;margin-left:auto;margin-right:auto}
.v-vsd-tabs{display:flex;justify-content:center;gap:8px;margin-top:clamp(22px,2.6cqi,34px)}
.v-vsd-tab{display:inline-flex;align-items:center;height:38px;padding:0 17px;border-radius:999px;font:inherit;font-size:13.5px;letter-spacing:-0.005em;cursor:pointer;background:rgba(255,255,255,0.02);border:1px solid rgba(150,185,215,0.2);color:#a8bbcc;transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease}
.v-vsd-tab:hover{color:#dbe9f5;border-color:rgba(150,185,215,0.34)}
html:not([data-vsd]) .v-vsd-tab[data-vsd-tab="shop"],
html[data-vsd="shop"] .v-vsd-tab[data-vsd-tab="shop"],
html[data-vsd="book"] .v-vsd-tab[data-vsd-tab="book"]{background:linear-gradient(180deg,#f7fafd,#dfeaf4);border-color:#eaf2f9;color:#07131d;font-weight:600;box-shadow:0 12px 26px -16px rgba(170,210,240,0.95)}
.v-vsd-panel{display:none}
html:not([data-vsd]) .v-vsd-panel[data-vsd-panel="shop"],
html[data-vsd="shop"] .v-vsd-panel[data-vsd-panel="shop"],
html[data-vsd="book"] .v-vsd-panel[data-vsd-panel="book"]{display:block}
.v-vsd{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;width:100%;max-width:468px;margin:clamp(26px,3cqi,40px) auto 0}
.v-vsd-one{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:468px;margin:0}
.v-vsd-tag{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase}
  .v-vsd-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.7}
  .v-vsd-then{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 0 22px;color:#8ba0b2}
  .v-vsd-then span{width:1px;height:34px;background:linear-gradient(180deg,rgba(150,185,215,0),rgba(150,185,215,0.55))}
  .v-vsd-then svg{animation:vsdnudge 2.4s ease-in-out infinite}
  @keyframes vsdnudge{0%,72%,100%{transform:translateY(0);opacity:0.8}84%{transform:translateY(3px);opacity:1}}
.v-vsd-ph{display:flex;flex-direction:column;flex-grow:1;width:100%;border-radius:20px;overflow:hidden;background:#0b141a;text-align:left}
.v-vsd-bar{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#121d25;border-bottom:1px solid rgba(255,255,255,0.05)}
.v-vsd-av{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;font-size:13px;font-weight:600;color:#eaf1f7}
.v-vsd-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.v-vsd-who b{font-size:14px;font-weight:500;color:#eaf1f7}
.v-vsd-who i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:11.5px;color:#8697a6}
.v-vsd-who i::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fd3a0}
.v-vsd-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex-grow:1;padding:15px 13px 18px}
.v-vsd-msg{max-width:88%;padding:8px 11px 6px;border-radius:9px}
.v-vsd-msg p{margin:0;font-size:13.5px;line-height:1.45;color:#e7edf2}
.v-vsd-t{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:10.5px;color:rgba(233,242,249,0.45)}
.v-vsd-me{align-self:flex-end;background:#0f4c3f;border-top-right-radius:2px}
.v-vsd-me .v-vsd-tick{color:#62b1e8}
.v-vsd-them{align-self:flex-start;background:#1f2c34;border-top-left-radius:2px}
.v-vsd-div{align-self:center;margin:5px 0 3px;padding:5px 12px;border-radius:999px;font-size:11px;letter-spacing:0.01em;text-align:center;color:#8b98a2;background:rgba(255,255,255,0.045)}
.v-vsd-alert{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,0.035);border:1px solid rgba(150,185,215,0.13);text-align:left}
  .v-vsd-alert svg{flex-shrink:0;margin-top:2px;color:#8ec7f2;opacity:0.9}
  .v-vsd-alert p{margin:0;font-size:12px;line-height:1.45;color:#a3b4c2}
  .v-vsd-alert b{font-weight:600;color:#cfe0ee}
  .v-vsd-alert em{font-style:normal;font-weight:600;color:#8ec7f2}
  .v-vsd-dim .v-vsd-body{min-height:300px}
  .v-vsd-evt{align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;letter-spacing:0.01em;color:#8b98a2;text-align:left}
  .v-vsd-evt::before{content:"";width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#5fd3a0}
  .v-vsd-none{align-self:center;margin-top:9px;margin-bottom:6px;font-size:11.5px;letter-spacing:0.01em;color:rgba(216,139,139,0.8)}
  .v-vsd-slot{position:relative;display:flex;align-self:flex-start;max-width:88%}
.v-vsd-typing{position:absolute;top:0;left:0;display:none;align-items:center;gap:4px;padding:12px 13px;border-radius:9px;border-top-left-radius:2px;background:#1f2c34}
.v-vsd-typing i{width:5px;height:5px;border-radius:50%;background:#7d8f9c;animation:vsdot 1.1s ease-in-out infinite}
.v-vsd-typing i:nth-child(2){animation-delay:.16s}
.v-vsd-typing i:nth-child(3){animation-delay:.32s}
@keyframes vsdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes vsdshow{0%{opacity:0}14%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes vsdrep{from{opacity:0;transform:translateY(7px) scale(0.985)}to{opacity:1;transform:none}}
.v-vsd-cap{font-size:clamp(14px,1.35cqi,16.5px);line-height:1.4;letter-spacing:-0.012em;text-align:center}
.v-vsd-dim .v-vsd-tag{color:#67767f}
.v-vsd-dim .v-vsd-ph{border:1px solid rgba(150,185,215,0.09);filter:saturate(0.3);opacity:0.82}
.v-vsd-dim .v-vsd-av{background:linear-gradient(160deg,#48545d,#2c353c)}
.v-vsd-dim .v-vsd-who i::before{background:#7d8f9c}
.v-vsd-dim .v-vsd-cap{color:#8a99a5;font-weight:500}
.v-vsd-lit .v-vsd-tag{color:#8ec7f2}
.v-vsd-lit .v-vsd-ph{border:1px solid rgba(98,177,232,0.32);box-shadow:0 0 0 4px rgba(98,177,232,0.05),0 44px 78px -50px rgba(98,177,232,0.9)}
.v-vsd-lit .v-vsd-av{background:linear-gradient(160deg,#3f86bb,#1f5a8a)}
.v-vsd-lit .v-vsd-cap{color:#8ec7f2;font-weight:600}
.v.v-anim .v-vsd-typing{display:flex;opacity:0}
.v.v-anim .v-vsd-an{opacity:0}
html[data-vsd] .v.v-anim .v-vsd-panel .v-vsd-typing{animation:vsdshow var(--tdur,.65s) ease both var(--td,0s)}
html[data-vsd] .v.v-anim .v-vsd-panel .v-vsd-an{animation:vsdrep .4s cubic-bezier(0.2,0.7,0.2,1) both var(--d,0s)}
@media (prefers-reduced-motion: reduce){.v.v-anim .v-vsd-typing{display:none}.v.v-anim .v-vsd-an{opacity:1}}
.v-phead{padding:clamp(30px,3.6cqi,54px) 0 clamp(24px,2.8cqi,38px);text-align:center;border-bottom:1px solid rgba(150,185,215,0.08)}
.v-phead-t{margin:0;font-size:clamp(26px,3cqi,40px);font-weight:300;line-height:1.1;letter-spacing:-0.03em;color:#f2f7fb}
.v-phead-s{margin:12px auto 0;max-width:520px;font-size:clamp(13.5px,1.3cqi,15.5px);line-height:1.6;color:#8199ab}
.v-lead-hero{margin:26px auto 0;max-width:620px;font-size:clamp(17px,1.62cqi,22px);line-height:1.5;letter-spacing:-0.012em;color:#c9dae7;text-wrap:balance}
.v-qual{margin:16px auto 0;max-width:520px;font-size:clamp(11.5px,1.02cqi,13px);line-height:1.7;letter-spacing:0.055em;color:#7b8fa0;text-wrap:balance}
.v-qual i{font-style:normal;margin:0 5px;color:#4d6172}
.v-qual-g{white-space:nowrap}
.v-tbl-h2{font-size:clamp(26px,3.1cqi,42px);line-height:1.16;max-width:820px;margin-left:auto;margin-right:auto}
.v-tbl{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto repeat(9,auto);gap:0 clamp(10px,1.4cqi,20px);width:100%;max-width:980px;margin:clamp(34px,4cqi,58px) auto 0;text-align:left}
.v-tbl-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;border-radius:16px}
.v-tbl-h{display:flex;align-items:flex-end;padding:clamp(15px,1.7cqi,20px) clamp(16px,1.8cqi,24px) 13px;font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase}
.v-tbl-c{display:flex;gap:12px;align-items:flex-start;padding:clamp(15px,1.7cqi,19px) clamp(16px,1.8cqi,24px)}
.v-tbl-c > div{min-width:0}
.v-tbl-ok,.v-tbl-no{flex-shrink:0}
.v-tbl-us{position:relative;border:1px solid rgba(98,177,232,0.3);background:linear-gradient(170deg,rgba(28,54,78,0.72) 0%,rgba(15,30,44,0.62) 55%,rgba(11,22,33,0.58) 100%);box-shadow:0 0 0 4px rgba(98,177,232,0.045),0 40px 74px -52px rgba(98,177,232,0.75)}
.v-tbl-us .v-tbl-h{color:#8ec7f2}
.v-tbl-us .v-tbl-c{border-top:1px solid rgba(98,177,232,0.13)}
.v-tbl-us .v-tbl-ok{margin-top:2px}
.v-tbl-us b{display:block;font-size:clamp(15px,1.5cqi,18px);font-weight:500;letter-spacing:-0.016em;line-height:1.3;color:#f4f9fd}
.v-tbl-us span{display:block;margin-top:6px;font-size:clamp(12.5px,1.22cqi,14.5px);line-height:1.5;color:#9db4c7}
.v-tbl-them{border:1px solid rgba(150,185,215,0.08);background:rgba(255,255,255,0.008)}
.v-tbl-them .v-tbl-h{color:#67767f}
.v-tbl-them .v-tbl-c{border-top:1px solid rgba(150,185,215,0.06);align-items:center}
.v-tbl-them span{font-size:clamp(12px,1.15cqi,14px);line-height:1.5;color:#76858f}
/* the three groups: customer interactions, business operations, smarter decisions */
.v-tbl-g{padding:clamp(16px,1.8cqi,22px) clamp(16px,1.8cqi,24px) 2px;font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase}
.v-tbl-us .v-tbl-g{color:#62b1e8;border-top:1px solid rgba(98,177,232,0.13)}
.v-tbl-them .v-tbl-g{border-top:1px solid rgba(150,185,215,0.06)}
.v-tbl-g + .v-tbl-c{border-top:0}

@container (max-width: 1080px){
  
  .v-cmp-col li{padding:15px 16px;min-height:70px}
  .v-loss{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
.v-rail-dots{display:none}
@container (max-width: 760px){

  
  .v-vsd{margin-top:22px;max-width:none}
  .v-vsd-tab{height:36px;padding:0 15px;font-size:13px}
  .v-vsd-one{gap:10px;max-width:none}
  .v-vsd-tag{gap:7px;font-size:10px;letter-spacing:0.14em;text-align:center}
  .v-vsd-ph{border-radius:14px}
  .v-vsd-bar{gap:9px;padding:10px 12px}
    .v-vsd-who b{font-size:13px}
      .v-vsd-body{gap:7px;padding:12px 11px 15px}
  .v-vsd-msg{max-width:86%;padding:7px 10px 5px;border-radius:8px}
  .v-vsd-msg p{font-size:13px;line-height:1.45}
  .v-vsd-t{gap:3px;margin-top:1px;font-size:9.5px}
    .v-vsd-div{margin:4px 0 2px;padding:4px 10px;font-size:10.5px;line-height:1.35}
  .v-vsd-none{margin-top:7px;font-size:11px}
  .v-vsd-alert{gap:9px;padding:10px 12px}
  .v-vsd-alert p{font-size:11.5px}
  .v-vsd-dim .v-vsd-body{min-height:260px}
  .v-vsd-evt{margin-top:12px;gap:7px;font-size:10.5px}
  .v-vsd-then{padding:18px 0 16px}
  .v-vsd-typing{gap:3px;padding:9px 9px}
  .v-vsd-typing i{width:4px;height:4px}
  .v-vsd-cap{font-size:13.5px;line-height:1.35}
  .v-vsd-lit .v-vsd-ph{box-shadow:0 0 0 3px rgba(98,177,232,0.05),0 30px 54px -40px rgba(98,177,232,0.9)}
  .v-phead{padding:26px 0 22px}
  .v-phead-t{font-size:26px}
  .v-phead-s{margin-top:9px;font-size:13.5px}
  .v-lead-hero{margin-top:20px;font-size:16.5px;line-height:1.48}
  .v-qual{margin-top:14px;font-size:11.5px;letter-spacing:0.045em}
  .v-qual-sep{display:none}
  .v-qual-g{display:block}
  .v-fnd-p{font-size:15px;line-height:1.7}
  .v-fnd-p + .v-fnd-p{margin-top:15px}
  .v-fnd-by{margin-top:22px}
  .v-who{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px;max-width:460px}
  .v-who-card{padding:20px}
  .v-who-t{font-size:16.5px;margin-top:14px}
  .v-who-p{font-size:13.5px;margin-top:12px}
  .v-who-both{font-size:13px}
  .v-onb{grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px;max-width:460px}
  .v-onb-step{padding:18px 0 0;margin-top:18px}
  .v-onb-step:first-child{margin-top:0}
  .v-onb-t{font-size:16.5px;margin-top:12px}
  .v-onb-p{font-size:13.5px}
  .v-onb-cta{margin-top:32px;flex-direction:column;align-items:stretch}
  .v-onb-cta .v-btn{justify-content:center}
  .v-sig-note{margin-top:24px;font-size:14px}
  .v-tbl{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:0 7px;margin-top:26px}
  .v-tbl-col{border-radius:13px}
  .v-tbl-h{padding:12px 12px 9px;font-size:9px;letter-spacing:0.16em}
  .v-tbl-c{gap:8px;padding:13px 12px}
  .v-tbl-ok{width:14px;height:14px}
  .v-tbl-no{width:12px;height:12px}
  .v-tbl-us b{font-size:14px;line-height:1.28}
  .v-tbl-us span{margin-top:5px;font-size:12px;line-height:1.42}
  .v-tbl-them span{font-size:11.5px;line-height:1.42}
  .v-tbl-g{padding:14px 12px 0;font-size:9px;letter-spacing:0.14em}
  .v-cmphead .v-h2 span{display:block}
  
  .v-rail-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:18px}
  .v-rail-dots i{display:block;width:6px;height:6px;border-radius:999px;background:rgba(150,185,215,0.2);transition:width 0.34s cubic-bezier(0.2,0.7,0.2,1),background 0.34s ease}
  .v-rail-dots i.on{width:22px;background:#62b1e8}
  .v-nav{height:76px;gap:12px}
  .v-nav-l{gap:11px}
  .v-burger{width:40px;height:40px;padding:0 10px;gap:4.5px;flex-shrink:0}
  .v-navcta{height:38px;padding:0 14px;gap:7px;font-size:13.5px;white-space:nowrap;flex-shrink:0}
  .v-nav-l > a > svg{width:30px;height:36px}
  .v-brandname{font-size:21px}
  .v-brandsub{font-size:7px;letter-spacing:0.36em}
    .v-hero{padding-top:30px;padding-bottom:26px}
  .v-heroglow{top:-70px;height:520px;opacity:0.5;--tm:1.9}
  .v-heroglow i{filter:blur(40px)}
  .v-pill-wrap::before,.v-pill-wrap::after{max-width:40px}
  .v-btn{width:100%}
  .v-sec{padding-top:72px}
  .v-msg{max-width:88%}
  .v-loss{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(20px,5.6cqi,84px);margin-left:calc(-1 * clamp(20px,5.6cqi,84px));margin-right:calc(-1 * clamp(20px,5.6cqi,84px));padding:2px clamp(20px,5.6cqi,84px) 6px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 46px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 46px),transparent 100%)}
  .v-loss::-webkit-scrollbar{display:none}
  .v-loss-tile{flex:0 0 79%;scroll-snap-align:start}
  .v-founder{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}
  .v-portrait{width:88px;height:88px}
  .v-foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .v-foot-bar{margin-top:30px}
}
@container (max-width: 344px){
    .v-vsd-tag{font-size:9.5px;letter-spacing:0.14em}
  .v-vsd-bar{gap:10px;padding:11px 12px}
  .v-vsd-av{width:28px;height:28px;font-size:12px}
  .v-vsd-who b{font-size:13px}
  .v-vsd-who i{font-size:10.5px}
      .v-vsd-body{gap:7px;padding:12px 10px 14px}
  .v-vsd-msg{max-width:90%}
      .v-vsd-div{font-size:10px;padding:4px 10px}
    }
@container (max-width: 348px){
  .v-brandtext{display:none}
  .v-nav-l{gap:9px}
  .v-navcta{padding:0 12px;font-size:13px}
}

/* ---------- Site additions (not from the export) ---------- */
html { color-scheme: dark; background: #050d15; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #62b1e8; outline-offset: 3px; }
/* the chat input has the design's own focus style (a blue border) */
.v-lc-in:focus-visible { outline: none; }
.v-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  background: #62b1e8; color: #062134; font-size: 14px; font-weight: 500;
}
.v-skip:focus { left: 0; }
/* the "tap to hear the agent" button the call panel shows when a browser mutes playback */
.v-note-btn {
  appearance: none; -webkit-appearance: none; border: 1px solid rgba(180, 210, 235, 0.3);
  background: rgba(255, 255, 255, 0.015); color: #e9f1f8; font: inherit; font-size: 14px;
  cursor: pointer; border-radius: 999px; padding: 6px 16px; margin: 8px 4px 0;
}
.v-note-btn:hover { border-color: rgba(98, 177, 232, 0.6); background: rgba(98, 177, 232, 0.08); }

/* ---------- Chat on phones ----------
   iOS zooms the page when a focused input's text is under 16px, which pushed
   the send button off screen. The input row is a flex row whose input may
   shrink, so the send button always stays on screen. */
.v-lc-foot { width: 100%; }
.v-lc-in { font-size: 16px; flex: 1 1 auto; width: 0; min-width: 0; }
.v-lc-send { flex: 0 0 44px; }
.v-lc-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Phones: a full-screen sheet. 100dvh tracks the browser bars; app.js then
   sets top and height from visualViewport while the keyboard is open, so the
   input sits directly above it. The page behind is locked (app.js). */
@media (max-width: 720px) {
  .v-lc {
    top: 0; right: 0; bottom: auto; left: 0;
    width: 100%; max-width: none;
    height: 100vh; height: 100dvh;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top);
    transform: translateY(24px);
  }
  .v-lc.is-open { transform: none; }
  .v-lc-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* with the keyboard up, the home-indicator inset is under the keyboard */
  .v-lc.is-kb .v-lc-foot { padding-bottom: 12px; }
}
/* viewport-fit=cover (needed for the safe-area insets above) lets the page run
   under the notch in landscape; keep the side gutters clear of it */
.v-in {
  padding-left: max(clamp(20px, 5.6cqi, 84px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 5.6cqi, 84px), env(safe-area-inset-right));
}

/* ---------- Founder card on phones ----------
   Photo (64px) and the name/LinkedIn row side by side at the top, the text
   below. The text column dissolves into the card's grid so its parts can be
   placed separately. */
@container (max-width: 760px) {
  .v-founder { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; }
  .v-portrait { width: 64px; height: 64px; grid-row: 1; grid-column: 1; }
  .v-fnd-t { display: contents; }
  .v-fnd-by { grid-row: 1; grid-column: 2; margin-top: 0; gap: 8px 14px; }
  .v-fnd-p { grid-column: 1 / -1; }
  .v-fnd-t > .v-fnd-p:first-child { margin-top: 20px; }
}

/* hero headline: a sentence, so smaller than the old two-line slogan */


/* call panel: plain-language help */
.v-call-sub p{margin:0}
.v-call-sub p + p,.v-call-sub p + ol,.v-call-sub ol + button,.v-call-sub button + p{margin-top:10px}
.v-call-sub{max-width:340px;margin-left:auto;margin-right:auto;font-size:13.5px;color:#a8bbcc}
.v-mic-steps{margin:8px 0 0;padding:0 0 0 20px;text-align:left;display:flex;flex-direction:column;gap:8px;color:#c9dae7}
.v-mic-steps b{color:#eef5fb;font-weight:600}
.v-call-go{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;color:#062134;background:linear-gradient(180deg,#7cc2f1,#4f9fd6);box-shadow:0 10px 22px -12px rgba(98,177,232,0.95)}
.v-call-go:focus-visible{outline:2px solid #62b1e8;outline-offset:3px}
.v-call-who{margin:-6px 0 0;font-size:14px;line-height:1.45;color:#e9f1f8;text-align:center;font-weight:500}
.v-call-who[hidden]{display:none}
.v-call-btn[hidden]{display:none}
.v-call.is-help .v-call-wave{display:none}
.v-call.is-help .v-call-orb{transform:scale(0.62);margin:-34px 0 -30px}
/* Behind the scenes, during a demo call: what the agent just put on record
   (LiveKit data, topic bc.events, from the voice agent's tools). Hidden
   until the first line; five at most, newest on top. */
.v-live{padding:12px 16px 14px;border-top:1px solid rgba(150,185,215,0.12);background:rgba(9,18,27,0.6)}
.v-live[hidden]{display:none}
.v-live-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#7cc2f1}
.v-live-h i{width:6px;height:6px;border-radius:50%;background:#5fd39a;box-shadow:0 0 0 3px rgba(95,211,154,0.18)}
.v-live-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.v-live-list li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;color:#e3edf4;overflow-wrap:anywhere;animation:vlivein .35s ease-out both}
.v-live-list li::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;border-radius:50%;background:rgba(95,211,154,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.v-live-list li:not(:first-child){color:#a3b7c8}
@keyframes vlivein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* with lines showing, the orb makes room, as it does for help */
.v-call.has-live .v-call-stage{padding:24px 22px 18px;gap:14px}
.v-call.has-live .v-call-orb{transform:scale(0.62);margin:-34px 0 -30px}
@media (max-width: 720px){.v-live-list li{font-size:13.5px}}
@media (prefers-reduced-motion: reduce){.v-live-list li{animation:none}}

.v-btn-sm{height:48px;padding:0 22px;gap:10px;font-size:15.5px;color:#eaf3fa;background:rgba(98,177,232,0.14);border:1px solid rgba(98,177,232,0.5)}
.v-btn-sm:hover{background:rgba(98,177,232,0.2);border-color:rgba(98,177,232,0.7)}
.v-btn-sm svg{width:20px;height:20px;color:#7cc2f1}
.v-call-note{color:#e9f1f8;font-weight:500}
.v-call-foot[hidden]{display:none}
/* Before a call: the heading, what to do, the microphone note, then one big Start button */
.v-call.is-help .v-call-state{font-size:23px;font-weight:600;line-height:1.25;letter-spacing:-0.02em;color:#f3f8fc}
.v-call.is-help .v-call-sub{width:100%;margin-top:-8px}
.v-call.is-help .v-call-sub .v-call-note{font-size:15.5px;line-height:1.55;font-weight:400;color:#dce8f2}
.v-call-sub p.v-call-mic{margin-top:14px;font-size:12.5px;line-height:1.5;color:#7d8f9d}
.v-call-sub .v-call-go.v-call-start{display:flex;width:100%;min-height:56px;margin-top:24px;font-size:16px}

/* Legal pages: /privacy, /terms, /data-deletion */
.lg{max-width:680px;margin:0 auto;padding-top:clamp(56px,7cqi,104px)}
.lg h1{font-size:clamp(30px,3.4cqi,46px);line-height:1.12;letter-spacing:-0.03em;font-weight:300;color:#f2f7fb;margin:22px 0 0}
.lg .lg-date{margin:14px 0 0;font-size:13.5px;color:#6d8296}
.lg .lg-intro{margin:26px 0 0;font-size:clamp(16px,1.3cqi,18px);line-height:1.7;color:#a8bbcc}
.lg h2{margin:44px 0 0;font-size:19px;font-weight:500;letter-spacing:-0.01em;color:#e3edf5}
.lg p,.lg li{font-size:15.5px;line-height:1.75;color:#a2b5c6}
.lg p{margin:12px 0 0}
.lg ul,.lg ol{margin:12px 0 0;padding-left:22px}
.lg li{margin:6px 0 0}
.lg b{color:#e3edf5;font-weight:500}
.lg a{color:#7cc2f1;text-decoration:underline;text-decoration-color:rgba(124,194,241,0.35);text-underline-offset:3px}
.lg a:hover{text-decoration-color:#7cc2f1}
.lg-box{margin:28px 0 0;padding:20px 22px;border:1px solid rgba(150,185,215,0.16);border-radius:14px;background:rgba(255,255,255,0.022)}
.lg-box p:first-child{margin-top:0}
.v-foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.v-foot-links a{color:inherit;transition:color 0.22s ease}
.v-foot-links a:hover{color:#ffffff}
.lg ul{list-style:disc}
.lg ol{list-style:decimal}
.lg li::marker{color:#62b1e8}
.lg .v-pill{margin-top:0}
.v-foot>.v-foot-bar:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---- first screen: "Try an AI agent for your business" ----
   Fills the screen under the logo bar. Phones put the input in the top half,
   so the keyboard never covers it; larger screens centre the block. */
.v-hero.v-xh{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 104px);min-height:calc(100svh - 104px);padding:0 0 clamp(88px,11vh,120px);padding:0 0 clamp(88px,11svh,120px);text-align:center;isolation:isolate}
.v-xh-glow{top:50%;height:min(900px,110vh);height:min(900px,110svh);transform:translate(-50%,-58%)}
.v-xh-ring{position:absolute;left:50%;top:50%;width:min(1180px,160vw);aspect-ratio:1;transform:translate(-50%,-57%);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,13,21,0) 61.4%,rgba(124,194,241,0.16) 61.7%,rgba(5,13,21,0) 62.2%),radial-gradient(closest-side,rgba(5,13,21,0) 79.4%,rgba(124,194,241,0.08) 79.7%,rgba(5,13,21,0) 80.2%),radial-gradient(closest-side,rgba(5,13,21,0) 96.4%,rgba(124,194,241,0.05) 96.7%,rgba(5,13,21,0) 97.2%);
  -webkit-mask-image:linear-gradient(to bottom,#000 10%,rgba(0,0,0,0.55) 55%,transparent 88%);mask-image:linear-gradient(to bottom,#000 10%,rgba(0,0,0,0.55) 55%,transparent 88%);animation:vxhring 14s ease-in-out infinite alternate}
@keyframes vxhring{from{transform:translate(-50%,-57%) scale(1)}to{transform:translate(-50%,-57%) scale(1.035)}}
.v-xh-in{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.v-xh-h{margin:0;max-width:13.5em;font-size:clamp(40px,5.5vw,84px);line-height:1.02;letter-spacing:-0.042em;font-weight:300;color:#f5f9fc;text-wrap:balance}
.v-xh-try{width:100%;max-width:700px;margin-top:clamp(36px,5.4vh,60px);min-height:240px}  /* the same height in every state, so the centred block never moves */
.v-xh-form,.v-xh-stage{display:flex;flex-direction:column;align-items:center;width:100%}
.v-xh-form[hidden],.v-xh-stage[hidden],.v-xh-acts[hidden],.v-xh-sub[hidden],.v-xh-note[hidden],.v-xh-back[hidden],.v-xh-err[hidden]{display:none}
.v-xh-label{display:block;margin-bottom:16px;font-size:clamp(17px,1.35vw,20px);font-weight:500;letter-spacing:-0.012em;color:#c3d5e3}
.v-xh-box{position:relative;width:100%}
.v-xh-input{width:100%;height:82px;padding:0 96px 0 34px;border-radius:999px;font:inherit;font-size:clamp(19px,1.55vw,23px);letter-spacing:-0.01em;color:#f3f8fc;background:rgba(8,20,32,0.68);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(150,195,230,0.34);outline:none;-webkit-appearance:none;appearance:none;box-shadow:0 34px 80px -40px rgba(98,177,232,0.85),inset 0 1px 0 rgba(255,255,255,0.05);transition:border-color .2s ease,box-shadow .2s ease}
.v-xh-input:focus{border-color:rgba(124,194,241,0.85);box-shadow:0 0 0 5px rgba(98,177,232,0.16),0 34px 80px -40px rgba(98,177,232,0.95)}
.v-xh-ph{position:absolute;z-index:1;top:0;bottom:0;left:35px;right:100px;display:flex;align-items:center;pointer-events:none;text-align:left;font-size:clamp(19px,1.55vw,23px);letter-spacing:-0.01em;color:#a3b7c8;-webkit-text-fill-color:#a3b7c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-xh-box.has-value .v-xh-ph{display:none}
.v-xh-go{position:absolute;top:11px;right:11px;width:60px;height:60px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#062134;background:linear-gradient(180deg,#86c8f3,#4f9fd6);box-shadow:0 12px 26px -12px rgba(98,177,232,0.95);transition:transform .18s ease,filter .2s ease}
.v-xh-go:hover{transform:translateX(2px);filter:brightness(1.06)}
.v-xh-go:focus-visible,.v-xh-back:focus-visible,.v-xh-cue:focus-visible{outline:2px solid #62b1e8;outline-offset:3px}
.v-xh-err{margin:16px 0 0;max-width:480px;font-size:15px;line-height:1.5;color:#ecc99b;text-wrap:balance}
.v-xh-stage{min-height:200px;justify-content:flex-start;gap:14px}
.v-xh-state{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;margin:0;font-size:clamp(21px,1.9vw,28px);line-height:1.3;letter-spacing:-0.02em;font-weight:400;color:#f3f8fc;text-wrap:balance;overflow-wrap:anywhere}
.v-xh-sub{margin:0;max-width:520px;font-size:15.5px;line-height:1.5;color:#a3b7c8;text-wrap:balance}
/* setting up: a bar that keeps moving, and which step it is on */
.v-xh-prog{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(320px,100%)}
.v-xh-prog[hidden]{display:none}
.v-xh-bar{position:relative;width:100%;height:6px;border-radius:999px;background:rgba(150,195,230,0.16);overflow:hidden}
.v-xh-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#4f9fd6,#7cc2f1);transform:scaleX(0);transform-origin:left center;transition:transform .3s linear}
.v-xh-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);animation:vxhshine 1.6s ease-in-out infinite}
@keyframes vxhshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.v-xh-step{margin:0;font-size:12.5px;letter-spacing:0.02em;color:#7d8f9d}
@media (prefers-reduced-motion: reduce){.v-xh-bar i{transition:none}.v-xh-bar i::after{animation:none}}
.v-xh-acts{display:flex;justify-content:center;gap:12px;width:100%;margin-top:10px}
.v-xh-btn{height:60px;min-width:190px;padding:0 30px;gap:11px;font-size:17px;font-weight:600}
.v-xh-btn[lang="ur"]{font-size:20px}
.v-xh-note{margin:6px 0 0;max-width:440px;font-size:14px;line-height:1.5;color:#8aa0b2;text-wrap:balance}
.v-xh-back{border:0;background:none;font:inherit;font-size:14px;color:#7f94a6;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 8px}
.v-xh-back:hover{color:#cfe0ec}
.v-xh-cue{position:absolute;left:50%;bottom:clamp(18px,3.4vh,34px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:#7389a0;text-decoration:none;transition:color .2s ease}
.v-xh-cue:hover{color:#c3d5e3}
.v-xh-cue svg{animation:vxhcue 2.4s ease-in-out infinite}
@keyframes vxhcue{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}
@media (prefers-reduced-motion: reduce){.v-xh-ring,.v-xh-cue svg{animation:none}}

@media (max-width: 720px){
  .v-hero.v-xh{justify-content:flex-start;min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);padding:clamp(28px,8vh,80px) 0 96px;padding:clamp(28px,8svh,80px) 0 96px}
  .v-xh-glow{top:52%;height:min(880px,104vh);height:min(880px,104svh);opacity:0.7}
  .v-xh-ring{top:44%;width:190vw}
  .v-xh-h{font-size:clamp(38px,11vw,46px);line-height:1.04}
  .v-xh-try{margin-top:clamp(28px,4.6svh,40px);min-height:0}
  .v-xh-label{font-size:17px;margin-bottom:12px}
  .v-xh-input{height:68px;padding:0 74px 0 22px;font-size:18px}
  .v-xh-ph{left:23px;right:76px;font-size:18px}
  .v-xh-go{top:9px;right:9px;width:50px;height:50px}
  .v-xh-stage{min-height:0}
  .v-xh-state{font-size:21px}
  .v-xh-acts{gap:10px}
  .v-xh-btn{flex:1 1 0;min-width:0;height:56px;padding:0 12px;gap:9px;font-size:16px}
  .v-xh-note{font-size:13.5px}
  #who.v-sec{padding-top:72px}
}
/* short phones: less above the line, so the input stays clear of the keyboard */
@media (max-width: 720px) and (max-height: 700px){
  .v-hero.v-xh{padding-top:20px}
  .v-xh-h{font-size:clamp(34px,9.6vw,40px)}
  .v-xh-try{margin-top:24px;min-height:0}
}

/* the line that says what Brainchild does */
.v-xh-lede{margin:clamp(18px,2.4vh,26px) 0 0;max-width:640px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;letter-spacing:-0.01em;color:#a9bdcd;text-wrap:balance}
/* Heights use svh, the small viewport (Safari with its toolbar showing), so
   the hero never resizes as the toolbar slides in and out; vh comes first as
   the fallback for browsers without svh.
   desktop: the block starts at a fixed height (centred for the first screen), so it never
   moves when the input turns into the ready state */
.v-hero.v-xh{justify-content:flex-start;padding-top:max(24px,calc((100vh - 104px - 390px) / 2 - (100vh - 104px) * 0.05));padding-top:max(24px,calc((100svh - 104px - 390px) / 2 - (100svh - 104px) * 0.05))}
.v-xh-try{min-height:0}

@media (max-width: 720px){
  /* phones: the full screen under the header, content centred; the try area
     keeps one height in every state so the block does not move */
  .v-hero.v-xh{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);justify-content:center;padding:24px 0 calc(24px + (100vh - 76px) * 0.1);padding:24px 0 calc(24px + (100svh - 76px) * 0.1)}
  .v-xh-lede{margin-top:16px;font-size:16px;line-height:1.5}
  .v-xh-try{margin-top:28px;min-height:0}
  .v-xh-glow{top:40%;height:620px}
  .v-xh-ring{top:38%}
  #who.v-sec{padding-top:56px}
}
@media (max-width: 720px) and (max-height: 700px){
  .v-hero.v-xh{padding-top:16px}
  .v-xh-lede{margin-top:12px;font-size:15px;line-height:1.45}
  .v-xh-try{margin-top:20px}
}

/* the input: a labelled Try it button, a hint under it, one glow on first load */
.v-xh-input{padding-right:168px;box-shadow:0 0 0 0 rgba(124,194,241,0),0 34px 80px -40px rgba(98,177,232,0.85),inset 0 1px 0 rgba(255,255,255,0.05);animation:vxhglow 1.9s ease-out 1.2s 1 both}
.v-xh-ph{right:172px}
.v-xh-go{width:auto;padding:0 20px 0 24px;gap:8px;border-radius:999px;font:inherit;font-size:17px;font-weight:600;letter-spacing:-0.01em}
.v-xh-go:hover{transform:translateY(-1px)}
.v-xh-go span{line-height:1}
.v-xh-hint{margin:14px 0 0;font-size:14px;line-height:1.5;color:#a3b7c8}
@keyframes vxhglow{
  0%{box-shadow:0 0 0 0 rgba(124,194,241,0),0 34px 80px -40px rgba(98,177,232,0.85),inset 0 1px 0 rgba(255,255,255,0.05)}
  35%{box-shadow:0 0 0 6px rgba(124,194,241,0.24),0 0 64px 4px rgba(98,177,232,0.6),inset 0 1px 0 rgba(255,255,255,0.05)}
  100%{box-shadow:0 0 0 0 rgba(124,194,241,0),0 34px 80px -40px rgba(98,177,232,0.85),inset 0 1px 0 rgba(255,255,255,0.05)}
}
@media (prefers-reduced-motion: reduce){.v-xh-input{animation:none}}
@media (max-width: 720px){
  /* phones: Try it sits under the input, full width */
  .v-xh-input{padding-right:22px}
  .v-xh-ph{right:22px}
  .v-xh-go{position:static;width:100%;height:56px;margin-top:12px;justify-content:center;font-size:17px}
  .v-xh-hint{margin-top:12px;font-size:13.5px}
  .v-xh-ph{bottom:auto;height:68px;right:18px;font-size:min(18px,4.3vw)}
}

/* one-tap business types under the input, text only, on one row after "Or
   try:": a tap sets that one up straight away. On narrower phones the row
   scrolls sideways, with no scrollbar. */
.v-xh-input{padding-right:212px}
.v-xh-ph{right:216px}
.v-xh-go svg{flex:none}
.v-xh-chips{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v-xh-chips::-webkit-scrollbar{display:none}
.v-xh-or{flex:none;margin-right:2px;font-size:14px;color:#7d92a4;white-space:nowrap}
.v-xh-chip{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(150,200,236,0.18);background:none;font:inherit;font-size:14px;font-weight:500;color:#cfdeea;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease,background .2s ease,color .2s ease}
.v-xh-chip:hover{border-color:rgba(124,194,241,0.6);color:#f3f8fc}
.v-xh-chip:active{background:rgba(124,194,241,0.1)}
.v-xh-chip:focus-visible{outline:2px solid #62b1e8;outline-offset:-2px}
@media (max-width: 720px){
  .v-xh-input{padding-right:22px}
  .v-xh-ph{right:18px}
  /* the row runs to the screen edges, so all five fit on one row at 390 and 375 wide */
  .v-xh-chips{width:auto;align-self:stretch;margin:12px calc(50% - 50vw) 0;padding:0 8px;gap:4px;justify-content:safe center}
  .v-xh-chip{padding:0 7px}
}
@media (max-width: 389px){
  .v-xh-or,.v-xh-chip{font-size:13px}
}
/* the smallest phones (320x568): a little tighter, so the hero still fits under the header */
@media (max-width: 360px) and (max-height: 600px){
  .v-xh-chips{margin-top:8px}
  .v-xh-input{height:56px}
  .v-xh-ph{height:56px}
  .v-xh-go{height:50px;margin-top:8px}
  .v-xh-hint{margin-top:6px}
}

/* hero headline: one light line. On phones it is sized to the screen so it
   never wraps (about 34px at 375 wide, up to 40px on wider screens). */
.v-xh-h{max-width:none;font-size:clamp(40px,4.3vw,62px);font-weight:300;line-height:1.08;letter-spacing:-0.04em;white-space:nowrap}
@media (max-width: 720px){.v-xh-h{font-size:min(40px,calc((100vw - 48px) / 9.6));line-height:1.15;letter-spacing:-0.04em}}
.v-xh-lede{color:#93a8ba;line-height:1.6}
@media (max-width: 720px){.v-xh-lede{max-width:340px;font-size:15px;line-height:1.55}}
/* the smallest phones (320x568): the subheading a touch smaller, so the hero still fits under the header */
@media (max-width: 360px) and (max-height: 600px){.v-xh-lede{margin-top:8px;font-size:14px;line-height:1.35}}
/* wider screens: two balanced lines */
@media (min-width: 721px){.v-xh-lede{max-width:800px}}

/* Talk to Brainchild: two quiet pills right after the full-screen hero,
   out of view until the visitor scrolls */
#talk{scroll-margin-top:24px}
.v-tband{display:flex;justify-content:center;width:100%;margin:clamp(40px,4vw,56px) auto 0;padding:0;outline:none}
.v-tband + #who{padding-top:clamp(96px,10cqi,150px)}
.v-tband-opts{display:flex;justify-content:center;gap:10px}
.v-tband-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(180,210,235,0.2);background:none;font:inherit;font-size:14.5px;font-weight:500;color:#d5e3ee;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s}
.v-tband-o svg{flex:none;width:16px;height:16px;color:#7cc2f1}
.v-tband-o:hover{border-color:rgba(98,177,232,0.55);background:rgba(98,177,232,0.07)}
.v-tband-o:focus-visible{outline:2px solid #62b1e8;outline-offset:3px}


@media (max-width: 720px){
  .v-tband{margin-top:40px}
  .v-tband + #who{padding-top:88px}
  .v-xh-try{min-height:206px}
  .v-tband-opts{gap:8px}
  .v-tband-o{height:40px;padding:0 13px;gap:7px;font-size:13.5px}
  .v-tband-o svg{width:15px;height:15px}
}

/* hero: content at the optical centre (about 45% down, set by the padding
   above), and a small faint chevron at the bottom as the only scroll cue */
.v-xh-cue{bottom:clamp(14px,2.6svh,26px);padding:8px;color:rgba(160,190,215,0.38)}
.v-xh-cue:hover{color:rgba(195,213,227,0.8)}
.v-xh-cue svg{animation:none}
@media (max-width: 720px){.v-xh-cue{position:absolute;margin:0;transform:translateX(-50%)}}

/* Hero centrepiece: the "b" mark above the headline, the rings centred on it,
   and one soft ring going out every few seconds, like a call ringing. The
   mark takes no room in the layout (its negative top margin equals its
   height plus the gap under it), so the headline, input and Try it stay
   exactly where they were and the mark fills the space above them. The
   wrapper is not a stacking context, so the rings and the pulse (z-index -1)
   sit behind all the text. --m is the mark's height. */
.v-xh-mark{--m:64px;--g:24px;position:relative;height:var(--m);width:calc(var(--m) * 206 / 247);margin:calc(-1 * (var(--m) + var(--g))) auto var(--g);flex:none}
.v-xh-logo{display:block;width:100%;height:100%}
.v-xh-mark .v-xh-ring{top:50%;transform:translate(-50%,-50%);animation:none}  /* the rings stay still; only the background glow drifts */
.v-xh-pulse{position:absolute;left:50%;top:50%;width:calc(var(--m) * 1.7);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(150,206,245,0.7);z-index:-1;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(1);animation:vxhpulse 3.6s cubic-bezier(0.25,0.5,0.4,1) 1s 1 both}  /* once, after the entrance */
@keyframes vxhpulse{0%{opacity:0;transform:translate(-50%,-50%) scale(0.8)}12%{opacity:0.4}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
/* The mark comes alive. Transforms and opacity only (GPU friendly, no layout).
   Entrance, once (about 1.2s): the stem rises in, the bowl sweeps in from the
   right and settles with a slight overshoot, a glint crosses, then the first
   ring goes out once (at 1s). At rest nothing moves but the background glow.
   site/app.js adds is-typing (glow brighter), is-busy (faster rings, the bowl
   shimmers) and is-hired (one bounce and a bright ripple). */
.v-xh-logo path,.v-xh-logo rect{transform-box:fill-box;transform-origin:50% 50%}
.v-xm-stem{animation:vxmstem 0.55s cubic-bezier(0.2,0.7,0.2,1) both}
.v-xm-bowl{animation:vxmbowl 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.22s both}
.v-xm-glint{opacity:0;animation:vxmglint 0.5s ease-in-out 0.72s both}
@keyframes vxmstem{from{opacity:0;transform:translateY(22%)}to{opacity:1;transform:none}}
@keyframes vxmbowl{from{opacity:0;transform:translateX(55%)}to{opacity:1;transform:none}}
@keyframes vxmglint{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(350%)}}
.v-xh-halo{position:absolute;left:50%;top:50%;width:calc(var(--m) * 2.6);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(140,204,246,0.75),rgba(124,194,241,0.25) 55%,rgba(124,194,241,0) 100%);opacity:0.6;transform:translate(-50%,-50%);transition:opacity 0.4s ease}  /* a still glow; it brightens while they type */
.v-xh-mark.is-typing .v-xh-halo{opacity:1}
.v-xh-mark.is-busy .v-xh-pulse{animation:vxhpulse 1.4s cubic-bezier(0.25,0.5,0.4,1) infinite}  /* rings only while generating */
.v-xm-shine{opacity:0}
.v-xh-mark.is-busy .v-xm-shine{animation:vxmshimmer 1.2s ease-in-out infinite}
@keyframes vxmshimmer{0%,100%{opacity:0}50%{opacity:0.28}}
.v-xh-ripple{position:absolute;left:50%;top:50%;width:calc(var(--m) * 1.7);aspect-ratio:1;border-radius:50%;border:2px solid rgba(190,226,250,0.95);z-index:-1;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.v-xh-mark.is-hired .v-xh-ripple{animation:vxmripple 0.9s cubic-bezier(0.2,0.6,0.3,1) both}
@keyframes vxmripple{0%{opacity:0.9;transform:translate(-50%,-50%) scale(0.9)}100%{opacity:0;transform:translate(-50%,-50%) scale(6)}}
.v-xh-mark.is-hired .v-xh-logo{animation:vxmbounce 0.6s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes vxmbounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-14%) scale(1.06)}70%{transform:translateY(0) scale(0.98)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){
  .v-xh-pulse,.v-xh-ripple,.v-xm-glint{display:none}
  .v-xh-mark .v-xh-ring,.v-xm-stem,.v-xm-bowl,.v-xh-halo,.v-xh-mark.is-busy .v-xm-shine,.v-xh-mark.is-hired .v-xh-logo{animation:none}
  .v-xh-halo{transform:translate(-50%,-50%);transition:none}
}
@media (max-width: 720px){
  .v-xh-mark{--m:48px;--g:16px}
  .v-xh-mark .v-xh-ring{top:50%}
  /* phones: the header keeps the wordmark, and the "b" shows once, in the hero */
  .v-nav-l > a[data-nav="home"] > svg{display:none !important}
}
@media (max-width: 720px) and (max-height: 700px){.v-xh-mark{--m:40px;--g:12px}}
@media (max-width: 720px) and (max-height: 600px){.v-xh-mark{--m:30px;--g:10px}}
/* phones, refined: the mark about a sixth smaller, its glow and ring softer,
   and less empty space between the hero and the next section */
@media (max-width: 720px){
  .v-xh-mark{--m:40px;--g:14px}
  .v-xh-halo{opacity:0.45}
  .v-xh-mark .v-xh-ring{opacity:0.7}
  /* the hero is shorter by X (about a tenth of the screen); half of X moves from
     the bottom padding to the top, so the content stays where it was and
     only the space under it shrinks */
  .v-hero.v-xh{min-height:calc((100vh - 76px) * 0.91);min-height:calc((100svh - 76px) * 0.91);padding-top:calc(24px + (100vh - 76px) * 0.045);padding-top:calc(24px + (100svh - 76px) * 0.045);padding-bottom:calc(24px + (100vh - 76px) * 0.055);padding-bottom:calc(24px + (100svh - 76px) * 0.055)}
  .v-tband{margin-top:28px}
}
@media (max-width: 720px) and (max-height: 700px){
  .v-hero.v-xh{padding-top:calc(16px + (100vh - 76px) * 0.045);padding-top:calc(16px + (100svh - 76px) * 0.045)}
}
/* the smallest phones have no space to spare: their hero stays full height */
@media (max-width: 720px) and (max-height: 600px){
  .v-hero.v-xh{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);padding-top:32px;padding-bottom:calc(24px + (100vh - 76px) * 0.1);padding-bottom:calc(24px + (100svh - 76px) * 0.1)}
}
@media (max-width: 720px) and (max-height: 700px){.v-xh-mark{--m:34px;--g:11px}}
@media (max-width: 720px) and (max-height: 600px){.v-xh-mark{--m:26px;--g:9px}}
/* the smallest phones (320x568): the helper line runs to three lines, so it sits a little tighter */
@media (max-width: 720px) and (max-height: 600px){.v-xh-hint{margin-top:8px;line-height:1.4}}
/* the narrowest phones keep the wordmark too, a little smaller (it used to hide here) */
@container (max-width: 348px){
  .v-brandtext{display:flex}
  .v-brandname{font-size:18px}
  .v-brandsub{font-size:6px;letter-spacing:0.32em;text-indent:0.32em}
}

/* "Type here": the empty box shows a blinking cursor where the text will go,
   and reads more clearly as a field (brighter edge, slightly lighter fill).
   The fake cursor goes as soon as they tap in (the real one takes over). */
.v-xh-input{background:rgba(16,34,52,0.82);border-color:rgba(150,200,236,0.6)}
.v-xh-ph::before{content:"";flex:none;width:2px;height:1.15em;margin-right:6px;border-radius:1px;background:#7cc2f1;animation:vxhcaret 1.1s steps(1) infinite}
@keyframes vxhcaret{0%,55%{opacity:1}56%,100%{opacity:0}}
.v-xh-box:focus-within .v-xh-ph::before{display:none}
@media (prefers-reduced-motion: reduce){.v-xh-ph::before{animation:none}}

/* The mark glows, then rests, then glows again: a soft light behind the "b"
   that brightens and fades every few seconds after the entrance. Opacity
   and transform only; off with prefers-reduced-motion. */
.v-xh-beat{position:absolute;left:50%;top:50%;width:calc(var(--m) * 2.4);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(170,222,255,0.95),rgba(110,190,245,0.45) 45%,rgba(98,177,232,0) 100%);
  opacity:0;transform:translate(-50%,-50%) scale(0.85);animation:vxhbeat 5s ease-in-out 1.4s infinite}
@keyframes vxhbeat{0%{opacity:0;transform:translate(-50%,-50%) scale(0.85)}30%{opacity:0.9;transform:translate(-50%,-50%) scale(1.08)}60%{opacity:0;transform:translate(-50%,-50%) scale(0.95)}100%{opacity:0;transform:translate(-50%,-50%) scale(0.85)}}
@media (prefers-reduced-motion: reduce){.v-xh-beat{animation:none;opacity:0}}
/* After a demo call: "Want this for your business?" (app.js leadCard) */
.v-lead{width:100%;text-align:left;margin-top:6px;padding:16px;border:1px solid rgba(150,185,215,0.16);border-radius:16px;background:rgba(150,185,215,0.05)}
.v-call-sub .v-lead p.v-lead-h{margin:0;font-size:15.5px;font-weight:600;color:#e6f0f8;letter-spacing:-0.01em}
.v-call-sub .v-lead p.v-lead-p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#9fb3c4}
.v-lead-f{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.v-lead-f label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#8fa4b6}
.v-lead-f input{height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(150,185,215,0.22);background:rgba(6,14,22,0.7);color:#e6f0f8;font:inherit;font-size:16px;width:100%;box-sizing:border-box}
.v-lead-f input:focus{outline:2px solid #62b1e8;outline-offset:1px;border-color:transparent}
.v-call-sub .v-lead-f p.v-lead-err{margin:0;font-size:12.5px;color:#f2b8a0}
.v-lead-f .v-call-go{width:100%;margin-top:4px}

/* ===== Hero, 2026-10: aurora, rotating line, the build loader, mobile peek ===== */

/* Aurora: four soft gradient bands in our blues, deep navy to soft sky,
   drifting slowly. Gradients only (no blur filter) and transforms only, so a
   mid-range phone composites it on the GPU. A faint static grain sits on top. */
.v-xh-aurora{position:absolute;left:50%;top:-150px;width:max(1500px,190vw);height:calc(100% + 300px);transform:translateX(-50%);z-index:-2;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 45%,transparent 100%)}
/* Each band is a soft blob (a radial gradient, no blur filter) that travels
   a good part of the hero: transforms in % of its own size, so a blob a
   third of the hero wide moves about a third of it. One full drift takes
   16 to 20 seconds, each band on its own clock, so the mix never repeats
   exactly. Under reduced motion the same drift runs four times slower. */
.v-xh-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.v-au1{left:24%;top:22%;width:26%;height:46%;background:radial-gradient(closest-side,rgba(44,108,176,0.72),rgba(44,108,176,0.3) 55%,rgba(44,108,176,0) 100%);animation:vau1 18s infinite}
.v-au2{left:50%;top:12%;width:22%;height:40%;background:radial-gradient(closest-side,rgba(124,194,241,0.5),rgba(124,194,241,0.18) 55%,rgba(124,194,241,0) 100%);animation:vau2 20s -6s infinite}
.v-au3{left:30%;top:52%;width:36%;height:38%;background:radial-gradient(closest-side,rgba(16,44,86,0.95),rgba(16,44,86,0.4) 55%,rgba(16,44,86,0) 100%);animation:vau3 17s -3s infinite}
.v-au4{left:44%;top:30%;width:14%;height:44%;background:radial-gradient(closest-side,rgba(168,218,250,0.3),rgba(168,218,250,0.1) 55%,rgba(168,218,250,0) 100%);animation:vau4 16s -9s infinite}
@keyframes vau1{0%,100%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(55%,-18%,0) scale(1.18)}50%{transform:translate3d(95%,12%,0) scale(1.05)}75%{transform:translate3d(40%,24%,0) scale(0.92)}}
@keyframes vau2{0%,100%{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(-75%,22%,0) scale(0.9)}60%{transform:translate3d(-110%,-6%,0) scale(1.15)}80%{transform:translate3d(-40%,-18%,0) scale(1.05)}}
@keyframes vau3{0%,100%{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(40%,-30%,0) scale(1.12)}70%{transform:translate3d(-25%,-12%,0) scale(0.95)}}
@keyframes vau4{0%,100%{transform:translate3d(0,0,0) rotate(-12deg)}50%{transform:translate3d(-160%,10%,0) rotate(14deg)}}
.v-xh-grain{position:absolute;left:50%;width:100vw;top:-104px;bottom:-40px;transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:0.06;mix-blend-mode:overlay;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
/* the ring round the logo breathes */
.v-xh-mark .v-xh-ring{animation:vxhbreathe 7s ease-in-out infinite alternate}
@keyframes vxhbreathe{from{transform:translate(-50%,-50%) scale(0.985);opacity:0.7}to{transform:translate(-50%,-50%) scale(1.02);opacity:1}}
.v-xh-mark{transition:opacity .5s ease,transform .5s ease}
.v-xh.is-building .v-xh-mark{opacity:0;transform:scale(0.92)}   /* the b is built below instead */

/* "It answers instantly / never sleeps / ...": ten phrases, one at a time, every
   2.5s, a soft fade and slide, CSS only. The box is as wide as the longest
   phrase, so nothing around it moves. */
.v-xh-lede.v-xh-rot{display:flex;justify-content:center;align-items:baseline;gap:0.28em;max-width:none;margin:clamp(14px,2vh,22px) 0 0;font-size:clamp(20px,2.05vw,30px);line-height:1.25;letter-spacing:-0.02em;font-weight:400;color:#dfeaf3}
.v-rot-box{display:inline-grid;text-align:left}
.v-rot-box>span{grid-area:1/1;white-space:nowrap;color:#7cc2f1;font-weight:500;opacity:0;will-change:transform,opacity;animation:vrot 25s cubic-bezier(0.4,0,0.2,1) infinite both}
.v-rot-box>span:nth-child(2){animation-delay:2.5s}
.v-rot-box>span:nth-child(3){animation-delay:5s}
.v-rot-box>span:nth-child(4){animation-delay:7.5s}
.v-rot-box>span:nth-child(5){animation-delay:10s}
.v-rot-box>span:nth-child(6){animation-delay:12.5s}
.v-rot-box>span:nth-child(7){animation-delay:15s}
.v-rot-box>span:nth-child(8){animation-delay:17.5s}
.v-rot-box>span:nth-child(9){animation-delay:20s}
.v-rot-box>span:nth-child(10){animation-delay:22.5s}
@keyframes vrot{0%{opacity:0;transform:translateY(0.45em)}2%{opacity:1;transform:none}9%{opacity:1;transform:none}11%{opacity:0;transform:translateY(-0.45em)}100%{opacity:0;transform:translateY(-0.45em)}}
.v-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Training your new hire: the b assembles in the middle, a thin ring round
   it follows the real time taken (--p, set from app.js), a soft waveform
   pulses under it, and the steps check off one by one. */
.v-xb{display:flex;justify-content:center}
.v-xb[hidden]{display:none}
.v-xb-core{--p:0;position:relative;width:118px;height:118px;display:flex;align-items:center;justify-content:center}
.v-xb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.v-xb-track{fill:none;stroke:rgba(150,195,230,0.14);stroke-width:1.6}
.v-xb-arc{fill:none;stroke:#86c8f3;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100px 100px;stroke-dashoffset:calc((1 - var(--p)) * 100px);transition:stroke-dashoffset .4s linear;filter:drop-shadow(0 0 5px rgba(124,194,241,0.65))}
.v-xb-glow{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,194,241,0.42),rgba(124,194,241,0) 100%);animation:vxbglow 2.4s ease-in-out infinite}
@keyframes vxbglow{0%,100%{transform:scale(0.86);opacity:0.6}50%{transform:scale(1.08);opacity:1}}
.v-xb-logo{position:relative;width:36px;height:43px;margin-top:-18px;overflow:visible}
.v-xb-stem,.v-xb-bowl{transform-box:fill-box;transform-origin:center}
.v-xb-stem{animation:vxbstem .9s cubic-bezier(0.2,0.75,0.2,1) both}
.v-xb-bowl{animation:vxbbowl 1s cubic-bezier(0.2,0.75,0.2,1) .25s both}
@keyframes vxbstem{from{opacity:0;transform:translate(-90%,-30%) scale(0.7)}to{opacity:1;transform:none}}
@keyframes vxbbowl{from{opacity:0;transform:translate(110%,40%) scale(0.7)}to{opacity:1;transform:none}}
.v-xb-wave{position:absolute;left:50%;bottom:22px;display:flex;align-items:center;gap:3px;height:12px;transform:translateX(-50%)}
.v-xb-wave i{display:block;width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,#a6daf8,#4f9fd6);transform:scaleY(0.3);animation:vxbwave 1.1s ease-in-out infinite alternate}
.v-xb-wave i:nth-child(2){animation-delay:.18s}.v-xb-wave i:nth-child(3){animation-delay:.36s}.v-xb-wave i:nth-child(4){animation-delay:.12s}.v-xb-wave i:nth-child(5){animation-delay:.3s}
@keyframes vxbwave{from{transform:scaleY(0.25)}to{transform:scaleY(1)}}
.v-xh-stage.is-hired .v-xb-glow{animation:vxbhired .9s ease-out both}
.v-xh-stage.is-hired .v-xb-wave i{animation-play-state:paused}
.v-xh-stage.is-hired .v-xb-logo{animation:vxbpop .6s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes vxbhired{0%{transform:scale(1);opacity:1}40%{transform:scale(1.35);opacity:1}100%{transform:scale(1.15);opacity:0.8}}
@keyframes vxbpop{0%{transform:none}40%{transform:scale(1.12)}100%{transform:none}}
.v-xb-steps{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:min(250px,100%)}
.v-xb-steps[hidden]{display:none}
.v-xb-steps li{display:flex;align-items:center;gap:11px;font-size:15.5px;line-height:1.3;letter-spacing:-0.005em;color:#dfeaf3;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(0.2,0.75,0.2,1),color .4s ease}
.v-xb-steps li.is-on,.v-xb-steps li.is-done{opacity:1;transform:none}
.v-xb-steps li.is-done{color:#a9bdcd}
.v-xb-ic{flex:none;display:flex;width:20px;height:20px}
.v-xb-ic svg{width:20px;height:20px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.v-xb-ic circle{stroke:rgba(150,195,230,0.3);transition:fill .3s ease,stroke .3s ease}
.v-xb-steps li.is-on .v-xb-ic svg{animation:vxbspin 1s linear infinite}
.v-xb-steps li.is-on .v-xb-ic circle{stroke:#7cc2f1;stroke-dasharray:16 38}
.v-xb-steps li.is-done .v-xb-ic circle{stroke:#7cc2f1;fill:rgba(124,194,241,0.18)}
.v-xb-ic path{stroke:#d6eefc;stroke-dasharray:13;stroke-dashoffset:13;transition:stroke-dashoffset .4s ease .15s}
.v-xb-steps li.is-done .v-xb-ic path{stroke-dashoffset:0}
@keyframes vxbspin{to{transform:rotate(360deg)}}
.v-xh-stage.is-busy{gap:16px}
/* every state of the stage fades in: the ready screen after the build, never a hard cut */
.v-xh-stage.is-in>*{animation:vxhin .55s cubic-bezier(0.2,0.75,0.2,1) both}
.v-xh-stage.is-in>*:nth-child(2){animation-delay:.05s}.v-xh-stage.is-in>*:nth-child(3){animation-delay:.1s}.v-xh-stage.is-in>*:nth-child(n+4){animation-delay:.15s}
@keyframes vxhin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .v-xh-mark .v-xh-ring,.v-xb-glow,.v-xb-stem,.v-xb-bowl,.v-xb-wave i,.v-xb-steps li.is-on .v-xb-ic svg,.v-xh-stage.is-in>*,.v-rot-box>span{animation:none}
  .v-rot-box>span:first-child{opacity:1}
  .v .v-xh-aurora .v-au1{animation:vau1 72s ease-in-out infinite !important}
  .v .v-xh-aurora .v-au2{animation:vau2 80s ease-in-out -24s infinite !important}
  .v .v-xh-aurora .v-au3{animation:vau3 68s ease-in-out -12s infinite !important}
  .v .v-xh-aurora .v-au4{animation:vau4 64s ease-in-out -36s infinite !important}
  .v-rot-box>span:not(:first-child){visibility:hidden}
  .v-xb-arc,.v-xb-steps li,.v-xb-ic path,.v-xh-mark{transition:none}
}

@media (max-width: 720px){
  .v-xh-aurora{top:-110px;width:240vw}
  .v-au1{left:26%;top:24%;width:24%;height:34%}
  .v-au2{left:50%;top:14%;width:20%;height:30%}
  .v-au3{left:30%;top:56%;width:34%;height:30%}
  .v-xh-lede.v-xh-rot{margin-top:14px;font-size:min(22px,5.9vw)}
  /* the hero centred in the screen, with the top of the next section showing under it */
  .v-hero.v-xh{min-height:calc(100vh - 142px);min-height:calc(100svh - 142px);justify-content:center;padding:72px 0 24px}
  .v-tband{margin-top:12px}
  .v-xh-cue{display:none}   /* the band peeking in under the hero says there is more */
  .v-xb-core{width:104px;height:104px}
  .v-xb-steps li{font-size:15px}
}
@media (max-width: 720px) and (max-height: 700px){
  .v-hero.v-xh{padding:40px 0 20px}
}

/* ===== Hero input, 2026-10: the centrepiece ===== */
/* One unit: the box carries a thin gradient edge in our blues that turns
   slowly round it (a conic gradient on a rotating square, clipped to the
   box: transform only), and one glow shared by the input and the button.
   The glow is painted once and only fades or pulses (opacity, transform).
   On focus the edge and glow brighten; while typing the glow pulses. */
.v-xh-box{isolation:isolate;border-radius:999px}
.v-xh-edge{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.v-xh-edge::before{content:"";position:absolute;left:50%;top:50%;width:max(160%,560px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,rgba(79,159,214,0.4),#4f9fd6 10%,#d2edfd 20%,#7cc2f1 28%,rgba(56,120,180,0.45) 42%,rgba(40,96,150,0.4) 54%,#5aa8de 68%,#bfe5fb 77%,#4f9fd6 86%,rgba(79,159,214,0.4) 100%);
  opacity:0.85;will-change:transform;animation:vxhedge 10s linear infinite;transition:opacity .4s ease}
.v-xh-edge::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:#0b1a29;transition:background .3s ease}
@keyframes vxhedge{to{transform:translate(-50%,-50%) rotate(360deg)}}
.v-xh-box::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 30px 1px rgba(98,177,232,0.5),0 26px 70px -22px rgba(98,177,232,0.8);opacity:0.4;transition:opacity .35s ease,transform .35s ease}
.v-xh-box:focus-within .v-xh-edge::before{opacity:1}
.v-xh-box:focus-within .v-xh-edge::after{background:#0d1f31}
.v-xh-box:focus-within::after{opacity:0.95}
.v-xh-box.is-typing::after{animation:vxhtyping 1.3s ease-in-out infinite}
@keyframes vxhtyping{0%,100%{opacity:0.8;transform:scale(1)}50%{opacity:1;transform:scale(1.012)}}
.v-xh .v-xh-input{position:relative;z-index:1;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
.v-xh .v-xh-input:focus{box-shadow:none}
/* "Type your business", with a softly blinking cursor before it */
.v-xh-ph{color:#9db3c6;-webkit-text-fill-color:#9db3c6}
.v-xh-ph::before{animation:vxhcaretsoft 1.2s ease-in-out infinite alternate}
@keyframes vxhcaretsoft{from{opacity:1}to{opacity:0.12}}

/* Try a live call: a slow shimmer sweeps across it every few seconds; it
   lifts and glows on hover or tap; it is a touch muted until something is
   typed, then lights up fully. */
.v-xh-go{z-index:2;overflow:hidden;isolation:isolate;filter:saturate(0.78) brightness(0.9);box-shadow:0 10px 24px -14px rgba(98,177,232,0.8);transition:transform .25s cubic-bezier(0.2,0.75,0.2,1),filter .35s ease,box-shadow .35s ease}
.v-xh-go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,0.55) 50%,rgba(255,255,255,0));transform:translateX(-130%) skewX(-14deg);animation:vxhsweep 4.5s ease-in-out 1.8s infinite}
@keyframes vxhsweep{0%{transform:translateX(-130%) skewX(-14deg)}24%,100%{transform:translateX(320%) skewX(-14deg)}}
.v-xh-box.has-value .v-xh-go{filter:none;box-shadow:0 0 0 1px rgba(191,229,251,0.45),0 14px 34px -10px rgba(98,177,232,1)}
.v-xh-go:hover,.v-xh-go:focus-visible{transform:translateY(-2px);filter:none;box-shadow:0 0 0 1px rgba(191,229,251,0.5),0 18px 38px -12px rgba(98,177,232,1)}
.v-xh-go:active{transform:translateY(-1px) scale(0.99)}

@media (max-width: 720px){
  /* the box holds the input and the button together, one rounded unit */
  .v-xh-box{border-radius:30px;padding:6px}
  .v-xh .v-xh-input{height:60px;padding:0 18px;border-radius:24px}
  .v-xh-ph{top:6px;bottom:auto;left:25px;right:18px;height:60px}
  .v-xh-go{position:relative;top:0;right:0;height:56px;margin-top:4px;border-radius:24px}
}
@media (max-width: 360px) and (max-height: 600px){
  .v-xh .v-xh-input{height:52px}
  .v-xh-ph{height:52px}
  .v-xh-go{height:48px;margin-top:4px}
}
@media (prefers-reduced-motion: reduce){
  .v-xh-edge::before,.v-xh-go::after,.v-xh-box.is-typing::after,.v-xh-ph::before{animation:none}
  .v-xh-go,.v-xh-box::after,.v-xh-edge::before{transition:none}
}

/* ===== Hero alignment, 2026-10 ===== */
/* The rotating line: "It" and the phrase centred as one, whatever the
   phrase. app.js sets the box to the width of the phrase on show (--rot-w),
   following each phrase's own animation, and the width eases across; the
   phrases overflow it evenly while they swap. One line high, always. */
.v-rot-box.is-fit{width:var(--rot-w);grid-template-columns:minmax(0,1fr)}
.v-rot-box.is-eased{transition:width .5s cubic-bezier(0.4,0,0.2,1)}
.v-rot-box.is-fit>span{justify-self:center}
@media (prefers-reduced-motion: reduce){.v-rot-box.is-eased{transition:none}}
@media (max-width: 720px){
  /* the chips stay 16px clear of both screen edges; when they cannot fit on
     one row they wrap to two centred rows */
  .v-xh-chips{flex-wrap:wrap;row-gap:8px;padding:0 16px;overflow:visible}
  .v-xh-chip{padding:0 5px}
}
@media (max-width: 720px){
  /* the hero and the Call / Chat pills under it as one group, centred in the
     screen under the header, with the next section's top showing below.
     --xh-c is the hero content's height (app.js); 100px is the gap, the
     pills and the next section's top showing under them. The hero keeps the
     form's height, so the pills stay put while a sample agent is set up. */
  .v-hero.v-xh{min-height:calc((100vh - 76px) / 2 + (var(--xh-c,540px) - 100px) / 2);min-height:calc((100svh - 76px) / 2 + (var(--xh-c,540px) - 100px) / 2);justify-content:flex-start;padding:0;padding-top:max(var(--xh-f,24px),calc((100vh - 76px - var(--xh-c,540px) - 100px) / 2));padding-top:max(var(--xh-f,24px),calc((100svh - 76px - var(--xh-c,540px) - 100px) / 2))}
  .v-tband{margin-top:24px}
}
/* short screens: the mark keeps clear of the header */
@media (max-width: 720px) and (max-height: 700px){.v-hero.v-xh{--xh-f:40px}}