/* Replyvoo marketing site. Golden yellow + white, ink for contrast. Ported from the approved prototype. */
:root{
  --ink:#121110; --ink2:#1E1C19; --ink3:#2C2925;
  --jade:#FFC21A; --jade-d:#F0AE00; --jade-dd:#7A5800;
  --mint:#FFF7DD; --mint2:#FFE9A6; --lime:#FFD23F;
  --bg:#FFFFFF; --soft:#FAF9F5; --line:#EEEBE2; --line2:#E2DDD0;
  --mut:#5E5A50; --mut2:#948F82;
  --violet:#6D5BFF; --coral:#FF7A59; --amber:#F5B83D; --sky:#2AABEE;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
a{color:inherit}
button{font:inherit;color:inherit}
svg{max-width:100%}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:target{scroll-margin-top:90px}
[id]{scroll-margin-top:84px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1220px;margin:0 auto;padding-inline:20px}
.h1{margin:0;font-weight:800;font-size:clamp(44px,6.8vw,92px);line-height:.95;letter-spacing:-0.055em;text-wrap:balance}
.h2{margin:0;font-weight:800;font-size:clamp(32px,4.6vw,60px);line-height:1;letter-spacing:-0.05em;text-wrap:balance}
.h3{margin:0;font-weight:800;font-size:clamp(22px,2.4vw,28px);letter-spacing:-0.035em;line-height:1.15}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
.hl{color:var(--jade-d)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--jade-dd)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.lead{margin:0;font-size:18.5px;line-height:1.6;color:var(--mut)}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.center .eyebrow::before{display:none}
.sec{padding-block:clamp(72px,9vw,120px)}
.band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--mut)}
.small{font-size:14px}.xs{font-size:12.5px}
.rel{position:relative}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
p a,.muted a{color:var(--ink);text-decoration-color:var(--jade-d);text-underline-offset:3px;text-decoration-thickness:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font-weight:800;border-radius:999px;transition:transform .2s cubic-bezier(.2,.9,.2,1),box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-main{background:var(--ink);color:#FFFFFF;padding:8px 8px 8px 24px;font-size:16.5px;box-shadow:0 14px 34px -14px rgba(18,17,16,.6)}
.btn-main .arr{width:42px;height:42px;border-radius:50%;background:var(--jade);display:flex;align-items:center;justify-content:center;transition:transform .25s}
.btn-main:hover .arr{transform:rotate(-45deg)}
.btn-jade{background:linear-gradient(180deg,#FFD23F,#FFC21A);color:var(--ink);padding:14px 24px;font-size:16px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),0 14px 30px -14px rgba(240,174,0,.8)}
.btn-jade:hover{background:linear-gradient(180deg,#FFC21A,#F0AE00)}
.btn-ink{background:var(--ink);color:#FFFFFF;padding:12px 20px;font-size:15px}
.btn-ghost{background:#FFFFFF;color:var(--ink);border:1.5px solid var(--line2);padding:13px 22px;font-size:15.5px;font-weight:700}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:9px 14px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
:focus-visible{outline:3px solid var(--jade);outline-offset:3px}

.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.8);box-shadow:0 24px 60px -30px rgba(18,17,16,.35)}
.card{background:#FFFFFF;border:1px solid var(--line);border-radius:24px}
.lift{transition:transform .3s cubic-bezier(.2,.9,.2,1),box-shadow .3s,border-color .3s}
.lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(18,17,16,.4);border-color:var(--line2)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:9px 15px;font-size:14px;font-weight:700;border:1.5px solid var(--line2);background:#FFFFFF;cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.pill{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill-mint{background:var(--mint);color:var(--jade-dd)}
.pill-jade{background:var(--jade);color:var(--ink)}
.pill-ink{background:var(--ink);color:var(--jade)}
.pill-soft{background:var(--soft);border:1px solid var(--line)}
.pill-bad{background:#FFE9E2;color:#B4442A;align-self:flex-start}
.pill-warn{background:#FFF1D6;color:#8A5A00;align-self:flex-start}
.pill-soon{background:#EEEBE2;color:#4A463E}
.pill-live{background:#E3F6EA;color:#1F6B3C}
.pill-violet{background:#ECE9FF;color:#4434C9}
.pill-dk{background:var(--ink2);border:1px solid var(--ink3);padding:10px 14px;font-size:13px;color:#fff}
.leak-c>.pill,.leak-dark>.pill{align-self:flex-start}
.pill.pill-jade.rel{align-self:flex-start}
.input{width:100%;border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink);background:#FFFFFF;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 4px var(--mint)}
textarea.input{resize:vertical;min-height:120px}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23121110' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.lbl{font-size:14px;font-weight:700}
.av{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink)}
.mesh{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;pointer-events:none}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);opacity:.7;pointer-events:none}
.bub-in{align-self:flex-start;max-width:82%;background:#FFFFFF;padding:9px 13px;border-radius:18px 18px 18px 5px;font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.06);overflow-wrap:anywhere}
.bub-out{align-self:flex-end;max-width:86%;background:var(--jade);color:var(--ink);padding:9px 13px;border-radius:18px 18px 5px 18px;font-size:14px;font-weight:500}
.bub-me{align-self:flex-end;max-width:86%;background:var(--ink);color:#FFFFFF;padding:9px 13px;border-radius:18px 18px 5px 18px;font-size:14px;overflow-wrap:anywhere}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mut2);animation:aDot 1.1s infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--jade);flex:0 0 8px}
.tiny-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}

/* motion */
@keyframes aIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes aFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes aType{from{transform:translateY(0)}to{transform:translateY(7px)}}
@keyframes aSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes aBob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes aSteam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-22px)}}
@keyframes aWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg)}75%{transform:rotate(14deg)}}
@keyframes aSpin{to{transform:rotate(360deg)}}
@keyframes aSpinB{to{transform:rotate(-360deg)}}
@keyframes aDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes aPulse{0%{box-shadow:0 0 0 0 rgba(255,194,26,.65)}100%{box-shadow:0 0 0 14px rgba(255,194,26,0)}}
@keyframes aMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes aRise{0%{opacity:0;transform:translateY(20px)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(-60px)}}
@keyframes aBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes aDrip{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(26px)}}
@keyframes aShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(6deg)}}
@keyframes aFlutter{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}}
@keyframes aCoin{0%{opacity:0;transform:translateY(-30px) rotateY(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(70px) rotateY(720deg)}}
@keyframes aMesh{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-30px,20px) scale(.95)}}
@keyframes aShine{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(220%) skewX(-20deg)}}
@keyframes aTick{0%{transform:translateY(100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes aGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes aSlideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.a-in{animation:aIn .6s cubic-bezier(.2,.9,.2,1) both}
.a-pop{animation:aPop .5s cubic-bezier(.2,.9,.2,1) both}
.a-slide{animation:aSlideIn .5s cubic-bezier(.2,.9,.2,1) both}
.a-float{animation:aFloat 6s ease-in-out infinite}
.a-float2{animation:aFloat 7s ease-in-out infinite 1.2s}
.a-arm-l{animation:aType .32s ease-in-out infinite alternate}
.a-arm-r{animation:aType .32s ease-in-out infinite alternate .16s}
.a-leaf{animation:aSway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.a-leaf2{animation:aSway 5s ease-in-out infinite .7s;transform-box:fill-box;transform-origin:bottom center}
.a-head{animation:aBob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.a-steam{animation:aSteam 2.6s ease-in infinite}.a-steam2{animation:aSteam 2.6s ease-in infinite 1.1s}
.a-wave{animation:aWave 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:20% 90%}
.a-wave2{animation:aWave 1.6s ease-in-out infinite .4s;transform-box:fill-box;transform-origin:20% 90%}
.a-wave3{animation:aWave 1.6s ease-in-out infinite .8s;transform-box:fill-box;transform-origin:20% 90%}
.a-orbit{animation:aSpin 44s linear infinite}.a-orbitb{animation:aSpinB 44s linear infinite}
.a-pulse{animation:aPulse 1.8s infinite}
.a-marq{animation:aMarq 36s linear infinite}
.a-rise{animation:aRise 4.5s ease-in-out infinite}.a-rise2{animation:aRise 4.5s ease-in-out infinite 1.5s}.a-rise3{animation:aRise 4.5s ease-in-out infinite 3s}
.a-blink{animation:aBlink 4s infinite;transform-box:fill-box;transform-origin:center}
.a-drip{animation:aDrip 1.4s ease-in infinite}.a-drip2{animation:aDrip 1.4s ease-in infinite .7s}
.a-shake{animation:aShake .5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.a-flutter{animation:aFlutter 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.a-flutter2{animation:aFlutter 1.9s ease-in-out infinite .3s;transform-box:fill-box;transform-origin:bottom center}
.a-coin{animation:aCoin 2.4s ease-in infinite}
.a-mesh{animation:aMesh 18s ease-in-out infinite}
.a-mesh2{animation:aMesh 22s ease-in-out infinite reverse}
.a-glow{animation:aGlow 4s ease-in-out infinite}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:aShine 3.6s ease-in-out infinite}
.reveal{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.9,.2,1),transform .8s cubic-bezier(.2,.9,.2,1)}
.js .reveal.pre{opacity:0;transform:translateY(28px)}

/* header */
.topstrip{background:var(--ink);color:#FFFFFF;font-size:13.5px;font-weight:600}
.topstrip-in{padding-block:10px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;text-align:center}
.topstrip a{color:var(--jade);font-weight:800;text-decoration:none}
.topstrip a:hover{text-decoration:underline}
.new-tag{background:var(--jade);color:var(--ink);font-weight:800;font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:999px}
.hdr{position:sticky;top:0;z-index:40;transition:background .3s,box-shadow .3s}
.hdr.scrolled,.hdr.menu-open{background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;padding-block:14px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr-login{background:transparent;padding:10px 12px;font-weight:700;font-size:15px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;background:none;border:0;padding:0;color:var(--ink)}
.logo-mark{width:38px;height:38px;border-radius:12px;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex:0 0 38px}
.logo-word{font-weight:800;font-size:22px;letter-spacing:-0.045em}
.logo-sub{font-size:24px;color:var(--jade-dd)}
.nav{display:flex;gap:4px;margin-left:12px;font-weight:600;font-size:15px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:4px}
.nav a{color:#3A3732;text-decoration:none;padding:8px 14px;border-radius:999px}
.nav a:hover,.nav a[aria-current]{background:var(--mint);color:var(--ink)}
.lang-wrap{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;background:#FFFFFF;border:1.5px solid var(--line2);border-radius:999px;padding:8px 12px;font-size:13.5px;font-weight:800;cursor:pointer}
.lang-menu{position:absolute;right:0;top:48px;width:230px;background:#FFFFFF;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 30px 70px -24px rgba(18,17,16,.4);display:flex;flex-direction:column;gap:2px;z-index:60;animation:aIn .3s cubic-bezier(.2,.9,.2,1) both}
.lang-item{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:12px;padding:10px;font-size:14.5px;font-weight:600;background:transparent;cursor:pointer;text-align:left}
.lang-item:hover{background:var(--soft)}
.lang-item.on{background:var(--mint)}
.lang-item .lang-chk{display:none}.lang-item.on .lang-chk{display:flex}
.lang-code{min-width:40px;text-align:center;font-size:11px;font-weight:800;padding:4px 6px;border-radius:8px;background:var(--soft);border:1px solid var(--line)}
.lang-item.on .lang-code{background:var(--jade);color:var(--ink);border-color:var(--jade)}
.menu-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.m-menu{border-top:1px solid var(--line);background:#fff;padding:12px 20px 20px;animation:aIn .3s cubic-bezier(.2,.9,.2,1) both}
.m-menu nav{display:flex;flex-direction:column}
.m-menu nav a{padding:14px 4px;font-size:18px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}
.m-menu-cta{display:flex;gap:10px;margin-top:16px}
.m-menu-cta .btn{flex:1;padding:14px}

/* hero */
.hero{position:relative;overflow:hidden;margin-top:-70px;padding-top:70px}
.hero-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-block:48px 72px}
.hero-copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px;position:relative}
.hero-art{flex:1 1 460px;min-width:0;display:flex;justify-content:center;position:relative}
.hero-it{font-size:1.08em}
.hero-sub{max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-play{padding:9px 20px 9px 9px}
.btn-play .play{width:36px;height:36px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:600;color:var(--mut)}
.hero-checks span{display:inline-flex;align-items:center;gap:7px}
.live-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:6px 14px 6px 6px;font-size:14px;font-weight:600;color:var(--mut)}
.live-n{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#FFFFFF;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800}
.ref-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--jade);color:var(--ink);font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;text-decoration:none;box-shadow:0 10px 24px -12px rgba(240,174,0,.9)}
.hero-in[dir=rtl] .hero-copy{text-align:right}
.hero-in[dir=rtl] .h1{letter-spacing:0;line-height:1.15}
.scene{position:relative;width:100%;max-width:560px;aspect-ratio:560/500}
.orbit{position:absolute;left:6%;top:4%;width:88%;height:88%;border-radius:50%;border:1.5px dashed #F0DE9E}
.orb{position:absolute;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -10px rgba(18,17,16,.35)}
.note{position:absolute;z-index:3}
.note-a{left:-48px;top:14%}.note-b{right:-36px;bottom:10%}
.note-card{border-radius:18px;padding:12px 16px 12px 12px;display:flex;align-items:center;gap:12px;max-width:300px}
.note-dark{background:var(--ink);color:#FFFFFF;box-shadow:0 22px 50px -20px rgba(18,17,16,.6)}
.note-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.note-t strong{font-size:14px}.note-t span{font-size:12.5px;color:var(--mut)}
.note-dark .note-t span{color:#FFD23F}
.note-ic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--jade);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800}
.counter-roll{display:inline-flex;overflow:hidden;height:1.1em;line-height:1.1em;vertical-align:bottom}
.counter-roll span{display:inline-block;animation:aTick .4s cubic-bezier(.2,.9,.2,1)}
.marq-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#FFFFFF;overflow:hidden}
.marq{display:flex;width:max-content}
.marq-i{display:inline-flex;align-items:center;gap:14px;padding:22px 28px;font-weight:700;font-size:16px;color:#3A3732;white-space:nowrap}

/* generic section head */
.sec-head{display:flex;flex-wrap:wrap;gap:30px 40px;align-items:flex-end;justify-content:space-between}
.sec-head-l{display:flex;flex-direction:column;gap:16px;max-width:720px}

/* leak */
.leak-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:44px}
.leak-c{padding:26px;display:flex;flex-direction:column;gap:14px;border-radius:28px;position:relative;overflow:hidden}
.leak-dark{background:var(--ink);color:#FFFFFF}
.big{font-size:46px;letter-spacing:-0.05em;line-height:1.1}

/* compare */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.vs-card{border-radius:32px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.vs-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vs-top strong{font-size:20px;letter-spacing:-0.03em}
.vs-live{display:flex;gap:16px;align-items:center;background:var(--ink2);border:1px solid var(--ink3);border-radius:22px;padding:18px;min-height:228px}
.vs-bot{flex:0 0 130px}
.vs-feed{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.vs-feed>div{display:flex;align-items:center;gap:8px;background:var(--ink3);border-radius:12px;padding:9px 12px;font-size:13.5px;font-weight:600}
.vs-feed .ok{width:20px;height:20px;border-radius:50%;background:var(--jade);display:flex;align-items:center;justify-content:center;flex:0 0 20px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat-s{background:var(--soft);border-radius:16px;padding:14px;display:flex;flex-direction:column}
.stat-s span{color:var(--mut);font-size:13px;font-weight:700}
.stat-s b,.stat-d b{font-size:24px;letter-spacing:-0.04em}
.stat-d{background:var(--ink2);border:1px solid var(--ink3);border-radius:16px;padding:14px;display:flex;flex-direction:column}
.stat-d span{font-size:13px;font-weight:700;color:#A8A294}
.stat-d b{color:var(--jade)}
.vs-table{margin-top:16px;border-radius:28px;overflow:hidden}
.vs-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-top:1px solid var(--line);align-items:stretch}
.vs-row>div{padding:16px 14px;font-size:15px;display:flex;align-items:center}
.vs-head{border-top:0;background:var(--soft)}.vs-head>div{font-weight:800}
.vs-head .good-h{background:var(--mint)}
.vs-row .bad{color:#B4442A;font-weight:600}
.vs-row .good{color:var(--jade-dd);font-weight:700;background:var(--mint)}

/* calculator */
.calc{display:flex;flex-wrap:wrap;gap:36px;align-items:stretch}
.calc-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px}
.calc-card{padding:24px;border-radius:26px;display:flex;flex-direction:column;gap:22px}
.calc-r{flex:1 1 380px;min-width:0;background:var(--ink);color:#FFFFFF;border-radius:32px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.calc-k{font-size:14px;font-weight:700;color:#A8A294}
.calc-big{font-size:clamp(54px,7vw,84px);letter-spacing:-0.06em;line-height:1;color:var(--jade)}
.calc-plan{flex-direction:row;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.calc-plan span{font-size:14px;color:#C4BFB3}
.calc-plan b{font-size:16px;letter-spacing:0}
.calc-note{font-size:12.5px;color:#8C877C}
.range-row{display:flex;flex-direction:column;gap:8px}
.range-row .top{display:flex;justify-content:space-between;font-size:14px;font-weight:700}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--jade) var(--p,50%),var(--line) var(--p,50%));outline:none;cursor:pointer}
.slider:focus-visible{outline:3px solid var(--jade);outline-offset:6px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#FFFFFF;border:3px solid var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:grab}
.slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#FFFFFF;border:3px solid var(--ink);cursor:grab}

/* how */
.how{display:flex;flex-wrap:wrap;gap:44px;align-items:center;margin-top:52px}
.beats{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.beat{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:18px;transition:all .4s cubic-bezier(.2,.9,.2,1);border:1.5px solid transparent;opacity:.45}
.no-anim .beat,.beat.done{opacity:.95}
.beat.on{opacity:1;background:#FFFFFF;border-color:var(--ink);box-shadow:0 20px 44px -28px rgba(18,17,16,.5);transform:translateX(6px)}
.beat-n{flex:0 0 32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:var(--line)}
.beat.done .beat-n{background:var(--ink);color:var(--lime)}
.beat.on .beat-n{background:var(--jade);color:var(--ink)}
.beat-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.beat-t strong{font-size:17px;letter-spacing:-0.015em}
.beat-t span{font-size:14.5px;color:var(--mut);line-height:1.5}
.how-r{flex:1 1 400px;min-width:0;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.phone{width:320px;max-width:100%;background:var(--ink);border-radius:48px;padding:11px;box-shadow:0 60px 100px -40px rgba(18,17,16,.6)}
.phone-screen{background:#F2F0EA;border-radius:38px;overflow:hidden;height:590px;display:flex;flex-direction:column}
.phone-top{background:#FFFFFF;padding:24px 16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.phone-who{display:flex;flex-direction:column;line-height:1.25}
.phone-who strong{font-size:14.5px}.phone-who span{font-size:12px;color:var(--jade-dd);font-weight:700}
.demo-chat{flex:1;padding:16px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;overflow:hidden}
.heat-col{width:220px;display:flex;flex-direction:column;gap:12px;align-self:center}
.heat-card{border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 50px -30px rgba(18,17,16,.35)}
.heat-who{display:flex;align-items:center;gap:10px}
.lead-fields{display:flex;flex-direction:column;gap:8px}
.lead-fields>div{display:flex;justify-content:space-between;gap:8px;font-size:13px;border-bottom:1px dashed var(--line2);padding-bottom:8px}
.lead-fields span{color:var(--mut2)}
.lead-stage{text-align:center;font-size:13px;font-weight:800;padding:8px;border-radius:12px;background:var(--soft);transition:all .3s}

/* channels */
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px}
.ch-tile{position:relative;overflow:hidden;border-radius:28px;padding:24px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.ch-tile p{margin:0;color:var(--mut);font-size:15px}
.ch-live{grid-row:span 2;background:var(--ink);color:#fff;border-color:var(--ink)}
.ch-live p{color:#C4BFB3;font-size:17px}
.ch-top{display:flex;align-items:center;gap:14px}
.ch-name{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ch-name strong{font-size:21px;letter-spacing:-0.03em}
.ch-live .ch-name strong{font-size:28px}
.ch-modes{display:flex;flex-direction:column;gap:10px;font-weight:700;margin-top:auto}
.ch-modes span{display:flex;align-items:center;gap:10px}
.ch-soon{background:var(--soft)}
.ch-soon .brand-ic{filter:saturate(.85)}
.ch-tile .btn{margin-top:auto;align-self:flex-start}
.wl-form{display:flex;gap:8px;margin-top:auto}
.wl-form .input{padding:10px 14px;font-size:15px}
.wl-ok{margin-top:auto;font-weight:800;color:#1F6B3C;display:flex;gap:8px;align-items:center}
.ch-note{margin:18px 0 0;font-size:13px;color:var(--mut2);text-align:center}
.ch-note a{color:var(--mut)}

/* closers */
.closer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:44px}
.closer-c{padding:22px;border-radius:28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.closer-c>*{position:relative}
.closer-c .closer-blob{position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;opacity:.22}
.closer-top{display:flex;align-items:center;gap:14px}
.closer-top>span{display:flex;flex-direction:column;line-height:1.25}
.closer-top h3{margin:0;font-size:22px;letter-spacing:-0.03em}
.closer-top span span{font-size:14px;color:var(--mut);font-weight:600}
.closer-c p{margin:0;font-size:15px;color:var(--mut)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:48px}
.bx{border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;background:#FFFFFF;border:1px solid var(--line);min-height:200px}
.bx-dark{background:var(--ink);color:#FFFFFF;border-color:var(--ink);min-height:300px}
.bx-ic{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--mint)}
.bx-dark .bx-ic{background:var(--jade)}
.bx-name{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-dd)}
.bx-dark .bx-name{color:var(--jade)}
.bx-h{margin:0;font-size:20px;letter-spacing:-0.03em;line-height:1.2}
.bx-p{font-size:15px;color:var(--mut)}
.bx-dark .bx-p{color:#C4BFB3}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}
.inbox-rows{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.inbox-row{display:flex;align-items:center;gap:10px;background:var(--ink2);border:1px solid var(--ink3);border-radius:14px;padding:10px 12px}
.inbox-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.inbox-t strong{font-size:14px}.inbox-t span{font-size:12.5px;color:#A8A294}
.wavebars{display:flex;align-items:center;gap:4px;height:40px;margin-top:auto}
.wavebars span{width:5px;border-radius:4px;background:#121110}
.jv{margin-top:14px;border-radius:28px;padding:26px;background:linear-gradient(135deg,#F1EEFF,#FFFFFF 60%);border:1px solid #E1DCFF;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.jv-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.jv-l p{margin:0;color:var(--mut);max-width:720px}

/* juno */
.juno{background:linear-gradient(135deg,#FFD23F,#FFC21A 55%,#F5B000);border-radius:40px;padding:clamp(28px,5vw,60px);display:flex;flex-wrap:wrap;gap:40px;align-items:center;position:relative;overflow:hidden}
.juno-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(18,17,16,.12) 1.2px,transparent 1.2px);background-size:22px 22px;pointer-events:none}
.juno-art{flex:0 1 270px;margin:0 auto;display:flex;justify-content:center;position:relative}
.juno-r{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px;position:relative}
.juno-tag{align-self:flex-start;background:var(--ink);color:var(--jade);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.juno-p{margin:0;font-size:17px;color:#3B3000;max-width:540px}
.juno-chips{display:flex;flex-wrap:wrap;gap:8px}
.juno-chips .chip{border:2px solid #121110}
.juno-ans{background:#FFFFFF;border:2px solid var(--ink);border-radius:22px 22px 22px 6px;padding:16px 18px;font-size:16px;line-height:1.55;box-shadow:6px 6px 0 var(--ink)}

/* wallet */
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.split-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px}
.split-r{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.costs{border-radius:24px;overflow:hidden}
.cost-row{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;font-size:15px}
.cost-row+.cost-row{border-top:1px solid var(--line)}
.cost-row span{font-weight:600}
.cost-row strong{white-space:nowrap}
.wallet-hero{position:relative;width:100%;max-width:460px}
.wallet-card{position:absolute;left:-8px;bottom:6%;border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;min-width:200px}
.wallet-card strong{font-size:30px;letter-spacing:-0.045em}
.wallet-add{font-size:13px;font-weight:700;color:#2E7D4F}

/* pricing */
.seg{display:inline-flex;background:#FFFFFF;border:1.5px solid var(--line2);border-radius:999px;padding:5px;gap:4px}
.seg button{border:0;border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:700;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.seg button.on{background:var(--ink);color:#FFFFFF;font-weight:800}
.seg-tag{background:var(--jade);color:var(--ink);font-size:11px;font-weight:800;padding:3px 7px;border-radius:999px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:48px;align-items:stretch}
.elite-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:18px}
.pricing .plan-grid:first-child{margin-top:48px}
.divider-lbl{display:flex;align-items:center;gap:14px;margin-top:36px}
.divider-lbl>span:not(.eyebrow){height:1px;flex:1;background:var(--line2)}
.divider-lbl .eyebrow::before{display:none}
.plan{display:flex;flex-direction:column;gap:14px;border-radius:30px;padding:28px;background:#FFFFFF;border:1.5px solid var(--line);position:relative;overflow:hidden}
.plan>*{position:relative}
.plan>.mesh{position:absolute}
.plan.pop{background:var(--ink);color:#FFFFFF;border-color:var(--ink);box-shadow:0 50px 90px -40px rgba(120,88,0,.55)}
.plan.elite{background:radial-gradient(400px 200px at 100% 0%,rgba(255,194,26,.28),transparent),linear-gradient(160deg,#1E1C19,#121110);border-color:#5A4A1A}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.plan-name{margin:0;font-size:21px;letter-spacing:-0.03em}
.plan.elite .plan-name{color:#FFD23F}
.plan-badge{background:var(--jade);color:var(--ink)}
.plan.elite .plan-badge{background:transparent;border:1px solid #FFC21A;color:#FFC21A}
.pdesc{font-size:14.5px;color:var(--mut)}
.plan.pop .pdesc{color:#A8A294}
.plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pnum{font-size:52px;font-weight:800;letter-spacing:-0.06em;line-height:1}
.pper{font-size:14px;font-weight:600;color:var(--mut)}
.plan.pop .pper{color:#A8A294}
.pfrom{font-weight:700}
.pold{font-size:22px;font-weight:700;color:var(--mut2);text-decoration-thickness:2px}
.plan.pop .pold{color:#8C877C}
.agents{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.plan.pop .agents{background:var(--ink2);border-color:var(--ink3)}
.agent-dots{display:flex;flex-wrap:wrap;gap:3px;max-width:70px;flex:0 0 auto}
.agent-dots span{width:10px;height:10px;border-radius:4px}
.agents-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.agents-t strong{font-size:15px}.agents-t .pdesc{font-size:12.5px}
.plan-cta{padding:14px 18px;font-size:15px;background:#121110;color:#fff}
.plan.pop .plan-cta{background:linear-gradient(180deg,#FFD23F,#FFC21A);color:#121110}
.plan-feats{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.plan-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#33403B}
.plan.pop .plan-feats li{color:#E5E0D4}
.plan-feats li.dim{opacity:.8}
.offer-rib{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-28px -28px 0;padding:10px 28px;background:var(--coral);color:#fff;font-size:13px;font-weight:800}
.offer-rib b{background:#fff;color:var(--coral);border-radius:999px;padding:2px 8px;font-size:12px}
.offer-rib em{font-style:normal;margin-left:auto;opacity:.9;font-weight:700}
.pp-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:20px}
.box{padding:24px;border-radius:28px;display:flex;flex-direction:column;gap:14px}
.box-h{margin:0;font-size:19px;letter-spacing:-0.03em}
.addons{display:flex;flex-direction:column;gap:10px}
.addon{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.addon.soon{background:var(--soft)}
.addon-t{display:flex;flex-direction:column;min-width:0}
.addon-t strong{font-size:15px}.addon-t span{font-size:13px;color:var(--mut)}
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pack{display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:18px;background:#FFFFFF;border:1.5px solid var(--line);position:relative}
.pack.feat{border-color:var(--ink)}
.pack-lbl{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-dd)}
.pack-top{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.pack-top strong{font-size:22px;letter-spacing:-0.03em}
.pack-price{font-size:19px}

/* comparison table */
.cmp-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:26px;background:#fff;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:middle}
.cmp thead th{border-top:0;background:var(--soft);font-size:16px;letter-spacing:-0.02em}
.cmp tbody th{font-weight:700;color:var(--mut);position:sticky;left:0;background:#fff;z-index:1}
.cmp .hot{background:var(--mint)}
.cmp thead th.hot{background:var(--jade)}
.cmp-badge{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--jade-dd)}
.cmp thead th.hot .cmp-badge{color:var(--ink)}
.conv{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:40px}
.conv-eq{background:var(--ink);color:#fff;border-radius:26px;padding:20px 26px;display:flex;flex-direction:column;align-items:center}
.conv-big{font-size:56px;font-weight:800;line-height:1;color:var(--jade);letter-spacing:-0.05em}
.conv-lbl{font-weight:700;font-size:14px;color:#C4BFB3}
.conv-op{font-size:30px;font-weight:800;color:var(--mut2)}
.conv-part{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;width:220px}
.conv-part span:last-child{font-size:13.5px;color:var(--mut)}
.conv-ic{width:46px;height:46px;border-radius:14px;background:var(--mint);display:flex;align-items:center;justify-content:center;margin-bottom:6px}

/* squad */
.squad{background:var(--ink);color:#FFFFFF;border-radius:40px;padding:clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;gap:36px;align-items:center;position:relative;overflow:hidden}
.squad-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px;position:relative}
.squad-l p{margin:0;font-size:17px;color:#C4BFB3;max-width:520px}
.squad-r{flex:1 1 320px;min-width:0;position:relative;display:flex;justify-content:center}
.btn-sq{background:transparent;color:#fff;border:1.5px solid var(--ink3);padding:13px 20px;font-size:15px}
.btn-sq:hover{border-color:#fff}

/* faq */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq{border-radius:22px;transition:all .3s ease;background:#FFFFFF;border:1.5px solid var(--line)}
.faq.open{border-color:var(--ink);box-shadow:0 20px 44px -30px rgba(18,17,16,.4)}
.faq-h{margin:0;font-size:inherit}
.faq-q{width:100%;background:transparent;border:0;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;font-size:17px;font-weight:700;cursor:pointer;border-radius:22px}
.faq-i{flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;transition:transform .3s,background .3s;background:var(--soft);border:1px solid var(--line)}
.faq.open .faq-i{transform:rotate(45deg);background:var(--jade);color:var(--ink);border-color:var(--jade)}
.faq-a{padding:0 22px 22px;font-size:16px;color:#3A3732;line-height:1.7;animation:aIn .4s cubic-bezier(.2,.9,.2,1) both}
.faq-a p{margin:0}

/* final cta */
.final{background:var(--ink);color:#FFFFFF;border-radius:44px;padding:72px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;overflow:hidden;position:relative}
.final-h{position:relative;font-size:clamp(38px,6vw,84px);max-width:960px}
.final-p{margin:0;position:relative;font-size:18px;color:#C4BFB3;max-width:520px}
.final-btn{position:relative;background:#FFFFFF;color:var(--ink)}
.final-people{width:100%;max-width:660px;position:relative;margin-top:8px}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--soft)}
.foot-in{padding-block:52px 28px;display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:28px;font-size:14.5px}
.f-brand{display:flex;flex-direction:column;gap:12px;min-width:0}
.f-brand p{margin:0;max-width:340px}
.f-mail{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none}
.f-mail:hover{text-decoration:underline}
.f-col{display:flex;flex-direction:column;gap:9px}
.f-col strong{margin-bottom:2px}
.f-col a{color:var(--mut);text-decoration:none}
.f-col a:hover{color:var(--ink);text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;padding-block:20px 120px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut2)}
.foot-base span:last-child{max-width:640px}
.foot-base a{color:var(--mut)}

/* chat widget */
.mobile-bar{display:none;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:44;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:6px;gap:6px;box-shadow:0 20px 50px -20px rgba(18,17,16,.45)}
.mobile-bar .btn{padding:13px 16px;font-size:15px}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;background:var(--ink);color:#FFFFFF;border-radius:999px;padding:12px 18px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);max-width:calc(100vw - 32px)}
.toast.err{background:#B4442A}
.toast-ic{width:22px;height:22px;border-radius:50%;background:var(--jade);display:flex;align-items:center;justify-content:center;flex:0 0 22px}

/* inner page hero */
.p-hero{position:relative;overflow:hidden}
.p-hero-in{position:relative;padding-block:64px 40px}
.p-h1{font-size:clamp(42px,6vw,80px)}
.err .p-hero-in{padding-block:80px 120px}
.err-art{margin-bottom:6px}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.post-card{display:flex;flex-direction:column;gap:14px;border-radius:26px;padding:14px 14px 22px;background:#FFFFFF;border:1px solid var(--line);text-decoration:none;color:inherit}
.post-art{border-radius:18px;aspect-ratio:16/10;position:relative;overflow:hidden}
.post-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 8px;font-size:13px;color:var(--mut2);font-weight:600}
.post-meta.big{padding:0;font-size:13.5px}
.post-title{margin:0;font-size:21px;letter-spacing:-0.03em;line-height:1.2;padding:0 8px}
.post-ex{font-size:15px;color:var(--mut);padding:0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feat-post{margin-top:40px;width:100%;display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding:16px;border-radius:32px;text-decoration:none;color:inherit}
.feat-art{flex:1 1 360px;min-height:260px;aspect-ratio:auto}
.feat-t{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:10px;align-items:flex-start}
.feat-h{font-size:clamp(26px,3vw,38px)}
.feat-go{font-weight:800}
.nl{background:var(--ink);color:#FFFFFF;border-radius:32px;padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.nl-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.nl-t span{color:#C4BFB3}
.nl-f{display:flex;gap:8px;flex:1 1 320px;max-width:460px}
.nl-ok{font-weight:800;color:var(--jade)}
.post-head{max-width:900px;padding-block:36px 10px;display:flex;flex-direction:column;gap:16px}
.crumbs{display:flex;gap:8px;font-size:14px;font-weight:600;color:var(--mut2)}
.crumbs a{color:var(--mut);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.post-h1{font-size:clamp(34px,5vw,62px);line-height:1.02}
.post-cover{margin-top:16px;border-radius:28px;aspect-ratio:21/9;min-height:220px}
.post-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;max-width:1100px;padding-block:30px 60px;align-items:start}
.post-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.toc{display:flex;flex-direction:column;gap:10px}
.toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;color:var(--mut);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on{border-left-color:var(--jade-d);color:var(--ink);font-weight:700}
.share,.side-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.share .tiny-k,.side-links .tiny-k{width:100%;margin-bottom:4px}
.share a,.share button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line2);background:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--ink)}
.side-links{flex-direction:column;align-items:flex-start;gap:8px}
.side-links a{font-size:14px;color:var(--mut);text-decoration:none}
.side-links a:hover{color:var(--ink);text-decoration:underline}
.prose{max-width:720px;font-size:18px;line-height:1.75;color:#2A2723;min-width:0}
.prose h2{font-size:28px;letter-spacing:-0.035em;line-height:1.2;margin:44px 0 12px;color:var(--ink)}
.prose h3{font-size:21px;letter-spacing:-0.02em;margin:30px 0 10px;color:var(--ink)}
.prose h4{font-size:18px;margin:24px 0 8px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--jade-d);font-weight:800}
.prose a{color:var(--ink);text-decoration-color:var(--jade-d);text-decoration-thickness:2px;text-underline-offset:3px}
.prose code{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.88em}
.prose pre{background:var(--ink);color:#F2EFE6;border-radius:18px;padding:18px;overflow-x:auto;font-size:14px}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line2);margin:36px 0}
.prose blockquote{margin:28px 0;padding:22px 26px;border-radius:22px;background:var(--mint);font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;color:var(--jade-dd)}
.prose blockquote p{margin:0}
.legal .prose blockquote{font-family:var(--sans);font-style:normal;font-size:16px;color:var(--ink);border:1px solid var(--mint2)}
.prose figure{margin:28px 0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.prose figure img{display:block;width:100%;height:auto}
.prose figcaption{padding:10px 16px;font-size:13.5px;color:var(--mut);border-top:1px solid var(--line);background:#fff}
.prose img{border-radius:16px}
.cta-box{margin-top:40px;background:var(--ink);color:#FFFFFF;border-radius:26px;padding:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.cta-box p{margin:6px 0 0;color:#C4BFB3;font-size:16px;line-height:1.5}
.cta-box .h3{font-family:var(--sans)}

/* legal */
.legal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.legal-card{padding:24px;border-radius:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.legal-card p{margin:0;color:var(--mut);font-size:15px}
.legal-t{margin:0;font-size:20px;letter-spacing:-0.03em}
.legal-ic{width:46px;height:46px;border-radius:14px;background:var(--mint);display:flex;align-items:center;justify-content:center}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;max-width:1040px;margin:0 auto}
.contact-f{padding:clamp(20px,3vw,32px);border-radius:30px;display:flex;flex-direction:column;gap:18px}
.fld{display:flex;flex-direction:column;gap:8px}
.form-err{margin:0;color:#B4442A;font-weight:700}
.contact-side{display:flex;flex-direction:column;gap:14px}
.side-card{padding:22px;border-radius:26px;display:flex;flex-direction:column;gap:8px}
.side-card a{font-weight:700}
.side-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.side-dark span{color:#C4BFB3;font-size:14px}
.sent{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:10px 0}
.sent-ic{width:64px;height:64px;border-radius:20px;background:var(--jade);display:flex;align-items:center;justify-content:center}

@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}.s2,.s3,.s4{grid-column:span 2}
  .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-live{grid-row:auto;grid-column:span 2}
  .foot-in{grid-template-columns:repeat(3,1fr)}
  .f-brand{grid-column:span 3}
}
@media (max-width:900px){
  .hide-sm{display:none!important}
  .mobile-bar{display:flex}
  .vs{grid-template-columns:1fr}
  .vs-row>div{padding:12px 8px;font-size:13.5px}
  .post-body{grid-template-columns:1fr;gap:20px}
  .post-side{position:static;order:-1}
  .toc{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:16px}
  .contact{grid-template-columns:1fr}
  .vs-bot{flex-basis:96px}
}
@media (max-width:600px){
  .wrap{padding-inline:16px}
  .bento{grid-template-columns:1fr}.s2,.s3,.s4{grid-column:span 1}
  .ch-grid{grid-template-columns:1fr}.ch-live{grid-column:auto}
  .hero-in{padding-block:24px 56px;gap:28px}
  .hero-copy,.hero-art{flex-basis:100%}
  .big{font-size:40px}
  .foot-in{grid-template-columns:repeat(2,1fr)}
  .f-brand{grid-column:span 2}
  .packs{grid-template-columns:1fr 1fr}
  .vs-live{flex-direction:column;align-items:stretch;min-height:0}
  .vs-bot{display:flex;justify-content:center}
  .conv-op{width:100%;text-align:center;font-size:24px;line-height:1}
  .conv-part{width:100%}
  .nl-f{flex-direction:column}
  .phone-screen{height:520px}
  .offer-rib em{margin-left:0}
}
@media (min-width:901px){.show-sm{display:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.a-marq{animation:none!important}}
.tc{text-align:center}
@media (max-width:600px){
  .bx{min-height:0}.bx-dark{min-height:0}
  .juno-art svg{width:170px;height:170px}
  .juno{gap:20px}
  .squad .tags .btn{flex:1 1 auto}
}
.post-head{max-width:1100px}
@media (min-width:901px){.post-head>:not(.post-cover){margin-left:288px;max-width:720px}}
.plan:has(.pold) .pnum{font-size:44px}

/* ---------- multi-channel SEO pages ---------- */
.f-soon{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--line);color:#4A463E;border-radius:999px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.hero-ch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--mut)}
.hero-ch-ics{display:flex}
.hero-ch-i{display:flex;border-radius:11px;border:2px solid #FFFFFF;margin-left:-8px;transition:transform .2s;opacity:.55;filter:saturate(.6)}
.hero-ch-i:first-child{margin-left:0}
.hero-ch-i.on{opacity:1;filter:none}
.hero-ch-i:hover{transform:translateY(-3px);opacity:1;filter:none}
.hero-ch-t strong{color:var(--ink)}
.ch-acts{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:auto}
.ch-acts .btn{margin-top:0}
.ch-more{font-weight:800;font-size:14.5px;text-decoration:none;color:inherit;border-bottom:2px solid var(--jade);align-self:flex-start;padding-bottom:1px}
.ch-more:hover{border-color:currentColor}
.ch-live .ch-more{color:#FFFFFF}

.chp-hero .grid-bg{opacity:.5}
.chp-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px;padding-block:36px 72px}
.chp-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.chp-art{flex:1 1 340px;min-width:0;display:flex;justify-content:center}
.chp-badge{display:flex;align-items:center;gap:12px}
.chp-badge .ch-name strong{font-size:18px}
.chp-h1{font-size:clamp(40px,5.6vw,74px)}
.chp-cta-soon{display:flex;flex-direction:column;gap:10px;max-width:520px}
.chp-wl{margin-top:0}
.chp-wl .input{padding:13px 16px;font-size:16px}
.chp-wl .btn{flex:0 0 auto}
.chp-wl-note{margin:0}
.chp-alt{font-weight:800;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--jade);align-self:flex-start;padding-bottom:1px}
.chp-alt:hover{border-color:var(--ink)}
.chp-cta-soon .wl-ok{margin-top:0}
.chp-notice{display:flex;gap:14px;align-items:flex-start;background:var(--mint);border:1px solid var(--mint2);border-radius:22px;padding:18px 20px;font-size:15.5px;line-height:1.6;color:#3A3732}
.chp-notice strong{color:var(--ink)}
.chp-notice-ic{flex:0 0 42px;height:42px;border-radius:13px;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.chp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.chp-card{padding:24px;border-radius:26px;display:flex;flex-direction:column;gap:12px}
.chp-card h3{margin:0;font-size:19px;letter-spacing:-0.03em;line-height:1.25}
.chp-card p{margin:0;color:var(--mut);font-size:15px;line-height:1.6}
.chp-setup{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;margin-top:44px;align-items:start}
.chp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.chp-steps li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px}
.chp-steps li>span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.chp-steps strong{font-size:16.5px;letter-spacing:-0.02em}
.chp-steps li>span:last-child>span{color:var(--mut);font-size:15px;line-height:1.6}
.chp-steps .beat-n{background:var(--jade)}
.chp-rules{background:var(--ink);color:#FFFFFF;border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.chp-rules .tiny-k{color:var(--jade)}
.chp-rules ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.chp-rules li{display:flex;gap:10px;font-size:15px;line-height:1.55;color:#E4E0D6}
.chp-rules .muted{color:#9C968A;margin:0}
.chp-uses{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px;margin-top:40px}
.chp-use{padding:22px;border-radius:24px;display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--jade)}
.chp-use h3{margin:0;font-size:17.5px;letter-spacing:-0.025em}
.chp-use p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.6}
.chp-others{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;margin-top:18px}
.chp-other{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;text-decoration:none;color:inherit}
.chp-other>span:last-child{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.chp-other strong{font-size:15.5px}
.chp-all{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--mint);display:flex;align-items:center;justify-content:center}
.chp-end{margin-top:0;padding:clamp(24px,4vw,40px)}
.chp-end-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wl-form.on-dark .input{background:#FFFFFF}
.wl-form.on-dark .btn-ink{background:#FFFFFF;color:var(--ink)}
.cta-box .wl-ok{color:#9BE2B4}

/* animated chat mock */
.cm-phone{width:330px}
.cm-phone .phone-screen{height:560px}
.cm-phone .phone-top{gap:10px}
.cm-ai{margin-left:auto;font-size:11px;font-weight:800;background:var(--ink);color:var(--jade);border-radius:999px;padding:4px 9px;white-space:nowrap}
.cm{gap:8px}
.cm-out{align-self:flex-end;max-width:86%;padding:9px 13px;border-radius:18px 18px 5px 18px;font-size:14px;font-weight:500;overflow-wrap:anywhere}
.cm-pay{align-self:flex-end;background:var(--ink);color:var(--jade);padding:9px 16px;border-radius:12px;font-size:13px;font-weight:800}
.cm-story{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut);font-weight:700}
.cm-story-img{width:34px;height:52px;border-radius:8px;display:block}
.cm-typing{align-self:flex-end;display:none;gap:4px;background:#FFFFFF;padding:11px 13px;border-radius:18px 18px 5px 18px}
.cm-typing span{width:6px;height:6px;border-radius:50%;background:var(--mut2);animation:aDot 1.1s infinite}
.cm-typing span:nth-child(2){animation-delay:.15s}.cm-typing span:nth-child(3){animation-delay:.3s}
.cm.playing .cm-b{display:none}
.cm.playing .cm-b.show{display:block;animation:aIn .45s cubic-bezier(.2,.9,.2,1) both}
.cm.playing .cm-story.show{display:flex}
.cm.playing .cm-typing.show{display:flex}

/* channels hub */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.hub-card{position:relative;overflow:hidden;border-radius:28px;padding:26px;background:#FFFFFF;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.hub-card p{margin:0;color:var(--mut);font-size:15.5px}
.hub-live{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.hub-live p{color:#C4BFB3}
.hub-h{margin:0;font-size:24px;letter-spacing:-0.035em;line-height:1.15}
.hub-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;font-weight:600}
.hub-pts li{display:flex;gap:8px;align-items:flex-start}
.hub-live .hub-pts svg{background:var(--jade);border-radius:50%;padding:2px;flex:0 0 18px}
.hub-card .btn{margin-top:auto;align-self:flex-start;white-space:normal;text-align:left}
.crumbs [aria-current]{color:var(--ink)}
.p-hero-in .crumbs{justify-content:center}

@media (max-width:1100px){
  .chp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .chp-setup{grid-template-columns:1fr}
  .chp-rules{position:static}
  .chp-in{padding-block:20px 56px}
}
@media (max-width:600px){
  .chp-grid{grid-template-columns:1fr}
  .chp-wl{flex-direction:column}
  .chp-wl .btn{width:100%}
  .chp-copy,.chp-art{flex-basis:100%}
  .cm-phone .phone-screen{height:500px}
  .crumbs{flex-wrap:wrap}
  .hero-ch{font-size:13px}
}

/* ---------- website chat: homepage section, landing page extras, demo scene ---------- */
.chp-scene{width:100%;max-width:760px;background:#FFFFFF;border:1px solid var(--line);border-radius:28px;padding:16px;box-shadow:0 40px 80px -50px rgba(18,17,16,.45)}
.chp-art .chp-scene{max-width:640px}
.web-sec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(28px,4vw,56px);align-items:center}
.web-sec-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.web-sec-copy .h2{margin:0}
.web-pts{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.web-pts li{display:flex;gap:12px;align-items:flex-start}
.web-pts .bx-ic{width:40px;height:40px;border-radius:13px;flex:0 0 40px}
.web-pts li>span:last-child{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--mut);line-height:1.45}
.web-pts strong{color:var(--ink);font-size:15.5px}
.web-sec-art{min-width:0}
.web-inst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center}
.web-inst-copy{display:flex;flex-direction:column;gap:14px}.web-inst-copy .h2{margin:0}
.web-plats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-weight:700}
.web-plats li{display:flex;gap:8px;align-items:flex-start}
.web-code-wrap{display:flex;flex-direction:column;gap:14px;min-width:0}
.web-code{background:var(--ink);color:#FFE58A;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(18,17,16,.6)}
.web-code-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--ink2);color:#A8A294;font-size:12.5px;font-weight:700}
.web-code-bar i{width:10px;height:10px;border-radius:50%;background:#3A3630}.web-code-bar span{margin-left:8px}
.web-code code{display:block;padding:22px;font:600 clamp(13px,1.6vw,15.5px)/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.web-price{display:flex;flex-direction:column;gap:6px;background:var(--mint);border:1px solid var(--mint2);border-radius:20px;padding:16px 18px;color:var(--jade-dd)}
.web-price strong{color:var(--ink)}.web-price a{font-weight:800;color:var(--ink)}
@media (max-width:900px){.web-sec,.web-inst{grid-template-columns:minmax(0,1fr)}.chp-scene{padding:10px;border-radius:22px}}
@media (max-width:600px){.web-pts,.web-plats{grid-template-columns:minmax(0,1fr)}}

/* Agent Studio section */
.st-steps{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.st-steps li{display:flex;gap:12px;align-items:flex-start}
.st-steps .n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--ink);color:var(--jade);display:grid;place-items:center;font-weight:800;font-size:14px}
.st-steps li>span:last-child{display:flex;flex-direction:column;gap:1px;font-size:14.5px;color:var(--mut);line-height:1.45}
.st-steps strong{color:var(--ink);font-size:15.5px}
.st-sec .chp-scene{max-width:820px}

/* highlighted "website" word (different colour from brand yellow so it pops) */
.hl-web{position:relative;display:inline-block;background:linear-gradient(90deg,#6D5BFF,#1C8FD6,#6D5BFF);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hlShine 4s linear infinite}
.hl-web::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;border-radius:6px;background:linear-gradient(90deg,#6D5BFF,#2AABEE);opacity:.85}
@keyframes hlShine{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.hl-web{animation:none}}

/* VooSquare footer link (brand green #00A86B) */
.foot-voo{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;color:inherit;font-weight:700;text-decoration:none}
.foot-voo b{color:#00A86B}
.foot-voo:hover{text-decoration:underline}