/* ZEYA — zeya.dev v2. v1's bones (Inter, sapphire, the black tile, floating words, night sections, the sliders)
   with the launch product's truth. One canvas, one accent; motion in the hero and the demos, a breath everywhere else. */
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#0F172A;--ink2:#334155;--mute:#64748B;--line:#E5E7EB;--line2:#EEF0F3;--soft:#F1F5F9;--paper:#F8FAFC;--card:#fff;
  --blue:#2F7CF6;--blue2:#1F66DB;--blue3:#1A56BD;--tint:#EAF2FF;--tint2:#DCE9FF;--blue-rgb:47,124,246;--ok:#22C55E;--stop:#C24C47;--amber:#B45309;
  --night:#0B1220;--night2:#111A2E;--nline:rgba(255,255,255,.1);--ntext:#E5E7EB;--nmute:#9AA4B8;
  --r:14px;--max:1120px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
body>footer{margin-top:auto}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue2);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;letter-spacing:-.015em;line-height:1.15}
h1{font-size:clamp(38px,6vw,68px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:800}
h3{font-size:18px;font-weight:700}
p{margin:0}
img,video{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.tile{display:inline-grid;place-items:center;background:#000;color:#fff;border-radius:24%;flex:none}
.tile svg{width:60%;height:60%;overflow:visible}
.t28{width:28px;height:28px}.t36{width:36px;height:36px}.t48{width:48px;height:48px}.t64{width:64px;height:64px;border-radius:16px}
.ic{width:18px;height:18px;flex:none;vertical-align:-3px}
.sp{flex:1}
::selection{background:var(--tint2)}

/* motion — reveals, one fade-up per block; the rest is CSS and cheap */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv.l{transform:translateX(-26px)}.rv.r{transform:translateX(26px)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv.l,.rv.r{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.lhero::before,.lhero .k i{animation:none}.faq summary .pl,.toast{transition:none}}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(15,23,42,.06)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:68px;position:relative}
.nav .prog{position:absolute;left:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--blue),#12B5A5);width:0;transition:width .15s linear}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin-right:auto}
.brand:hover{text-decoration:none}
.nav .links{display:flex;gap:24px;font-size:14.5px;font-weight:500;color:var(--ink2)}
.nav .links a{color:var(--ink2);padding:6px 0;position:relative;white-space:nowrap}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blue);transition:right .3s var(--ease)}
.nav .links a:hover,.nav .links a.on{color:var(--ink);text-decoration:none}
.nav .links a:hover::after,.nav .links a.on::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;background:var(--blue2);color:#fff;font-weight:600;font-size:15px;border:0;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{background:var(--blue3);text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 24px rgba(var(--blue-rgb),.28)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{background:var(--soft);box-shadow:none}
.btn.big{height:52px;padding:0 24px;font-size:16px;border-radius:14px}
.btn.white{background:#fff;color:var(--blue2)}.btn.white:hover{background:#F1F5F9}
.btn .ic{width:20px;height:20px}
.soon{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:12px;background:var(--soft);color:var(--ink2);font-weight:600;font-size:14.5px;line-height:1.3}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;box-shadow:0 0 0 0 rgba(var(--blue-rgb),.5);animation:ping 2.2s ease-out infinite}
.soon.big{min-height:52px;padding:10px 20px;font-size:15.5px;border-radius:14px}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,124,246,.45)}70%{box-shadow:0 0 0 9px rgba(47,124,246,0)}100%{box-shadow:0 0 0 0 rgba(47,124,246,0)}}
.menu{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;place-items:center;cursor:pointer}
.menu .ic{width:20px;height:20px}
@media (max-width:960px){.nav .links{display:none}.nav .js-store,.nav .soon,.nav .btn{display:none}.menu{display:grid}
  .nav.open .links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);padding:10px 24px 16px;gap:4px;box-shadow:0 12px 30px rgba(15,23,42,.08)}
  .nav.open .links a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--line2)}.nav.open .links a::after{display:none}}

/* hero */
.hero{position:relative;padding:76px 0 24px;overflow:hidden;text-align:center}
.floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.floaters span{position:absolute;font-weight:700;color:var(--blue);opacity:.11;white-space:nowrap;font-size:var(--fs,22px);animation:floaty var(--t,12s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);will-change:transform}
@keyframes floaty{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,20px),var(--dy,-26px),0)}}
.hero .wrap{position:relative;z-index:1}
.hero .k{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue2);background:var(--tint);padding:8px 14px;border-radius:999px;margin-bottom:22px}
.hero .k i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;animation:ping 2.2s ease-out infinite}
.hero h1{max-width:900px;margin:0 auto}
.hero h1 .rot{display:block;color:var(--blue);min-height:1.15em;position:relative}
.hero h1 .rot span{display:block;position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero h1 .rot span.on{position:relative;opacity:1;transform:none}
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--ink2);max-width:640px;margin:22px auto 28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.hero .facts{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:var(--mute);margin-top:16px}
.hero .facts b{color:var(--ink);font-weight:600}
/* hear it — three real voices, before you install */
.hear{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:26px}
.hear .lab{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 8px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.chip:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(var(--blue-rgb),.16);transform:translateY(-1px)}
.chip .pb{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.chip .pb svg{width:14px;height:14px;fill:currentColor}
.chip small{color:var(--mute);font-weight:500}
.chip .wv{display:none;align-items:flex-end;gap:2px;height:16px;width:26px}
.chip .wv i{flex:1;background:var(--blue);border-radius:2px;height:30%;animation:wv 1s ease-in-out infinite;animation-delay:calc(var(--i)*.09s)}
.chip.playing .wv{display:flex}.chip.playing small{display:none}
.chip.playing .pb{background:var(--ink)}
.chip.busy .pb{background:var(--mute)}
@keyframes wv{0%,100%{height:25%}50%{height:100%}}
/* the demo frame */
.demow{position:relative;max-width:980px;margin:44px auto 0}
.demow .glow{position:absolute;inset:-40px -80px -60px;background:radial-gradient(ellipse at 50% 40%,rgba(47,124,246,.22),transparent 62%);filter:blur(10px);pointer-events:none}
.demo{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(15,23,42,.22);border:1px solid rgba(15,23,42,.08)}
.demo video,.demo img{display:block;width:100%;height:auto}
.demo .cap{padding:11px 16px;font-size:13px;color:#CBD5E1;background:#0B1220;text-align:left;border-top:1px solid rgba(255,255,255,.08)}
.demo .cap b{color:#fff;font-weight:600}
@media (max-width:640px){.hero{padding:44px 0 16px}.hero .k{margin-bottom:16px}.demow{margin-top:30px}.demo{border-radius:12px}.demo .cap{font-size:12px}}

/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:#fff;margin-top:52px}
.ticker .track{display:flex;gap:56px;width:max-content;animation:tick 46s linear infinite;font-size:20px;font-weight:600;color:var(--ink2)}
.ticker .track span{display:flex;align-items:center;gap:56px;white-space:nowrap}
.ticker .track em{font-style:normal;color:#CBD5E1}
.ticker:hover .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}.floaters span{animation:none}.soon i,.hero .k i{animation:none}.chip .wv i{animation:none;height:60%}}
@media (max-width:640px){.ticker .track{font-size:16px;gap:36px}.ticker .track span{gap:36px}}

/* sections */
section.s{padding:84px 0}
section.s.alt{background:var(--paper);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);margin-bottom:14px}
.eyebrow i{width:18px;height:2px;background:var(--blue);display:inline-block}
.sub{color:var(--ink2);max-width:680px;margin-top:14px;font-size:17px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
.rule{width:52px;height:3px;background:var(--blue);border-radius:2px;margin:18px auto 0}
@media (max-width:640px){section.s{padding:56px 0}}

/* the problem, and the answer */
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.two h2{font-size:clamp(26px,3.2vw,38px)}
.two .soft{color:var(--mute);font-weight:500;display:block;margin-top:14px;font-size:.6em;line-height:1.4;letter-spacing:0}
.answer{background:var(--night);color:#fff;border-radius:20px;padding:34px;box-shadow:0 30px 70px rgba(11,18,32,.28);position:relative;overflow:hidden}
.answer::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(47,124,246,.38),transparent 62%);right:-160px;top:-180px;animation:blob 14s ease-in-out infinite alternate}
@keyframes blob{to{transform:translate(-8%,12%) scale(1.15)}}
.answer h3{font-size:24px;color:#fff;position:relative}
.answer p{color:#CBD5E1;margin:12px 0 22px;position:relative;font-size:16px}
.answer .btn{position:relative}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:28px}}
/* the same video, played twice */
.cmp{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin-top:34px;box-shadow:0 18px 44px rgba(15,23,42,.06)}
.cmp .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:700;font-size:18px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.cmp .h small{color:var(--mute);font-weight:500;font-size:14px}
.cmp .row{display:grid;grid-template-columns:130px 1fr 190px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line2)}
.cmp .row:last-of-type{border-bottom:0}
.cmp .row b{font-size:14.5px;color:var(--mute)}.cmp .row.yes b{color:var(--blue2)}
.cmp .row .rt{font-size:13.5px;color:var(--mute);text-align:right}.cmp .row.yes .rt{color:#15803D;font-weight:700}
.track{position:relative;height:10px;background:var(--soft);border-radius:999px}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:#CBD5E1}
.track .head{position:absolute;top:50%;left:0;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #CBD5E1;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(15,23,42,.15)}
.row.yes .track .fill{background:var(--blue)}.row.yes .track .head{border-color:var(--blue)}
.track .capw{position:absolute;top:-38px;left:0;background:var(--ink);color:#fff;font-size:12.5px;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0}
.cmp.play .row.no .fill{animation:noFill 6s var(--ease) infinite}.cmp.play .row.no .head{animation:noHead 6s var(--ease) infinite}
.cmp.play .row.yes .fill{animation:yesFill 6s linear infinite}.cmp.play .row.yes .head{animation:yesHead 6s linear infinite}.cmp.play .row.yes .capw{animation:capRide 6s linear infinite}
@keyframes noFill{0%{width:0}18%{width:14%}26%{width:9%}44%{width:24%}52%{width:18%}70%{width:30%}78%{width:26%}100%{width:34%}}
@keyframes noHead{0%{left:0}18%{left:14%}26%{left:9%}44%{left:24%}52%{left:18%}70%{left:30%}78%{left:26%}100%{left:34%}}
@keyframes yesFill{from{width:0}to{width:100%}}@keyframes yesHead{from{left:0}to{left:100%}}
@keyframes capRide{0%{left:0;transform:translateX(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%;transform:translateX(-100%);opacity:0}}
.cmp .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cmp .tags span{background:var(--tint);color:var(--blue2);font-weight:600;font-size:13px;padding:7px 12px;border-radius:999px}
@media (max-width:640px){.cmp{padding:18px}.cmp .row{grid-template-columns:1fr;gap:10px}.cmp .row .rt{text-align:left}.track{margin-top:30px}}
@media (prefers-reduced-motion:reduce){.cmp.play .row.no .fill,.cmp.play .row.no .head,.cmp.play .row.yes .fill,.cmp.play .row.yes .head,.cmp.play .row.yes .capw{animation:none}.cmp.play .row.no .fill{width:34%}.cmp.play .row.no .head{left:34%}.cmp.play .row.yes .fill{width:100%}.cmp.play .row.yes .head{left:100%}.answer::before{animation:none}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 0 22px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.step:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(15,23,42,.1)}
.step .pic{background:#0B1220;aspect-ratio:16/10;overflow:hidden;position:relative}
.step .pic img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s var(--ease)}
.step:hover .pic img{transform:scale(1.03)}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;margin:-15px 0 10px 22px;position:relative;box-shadow:0 0 0 4px #fff}
.step h3{padding:0 22px;margin-bottom:6px}
.step p{padding:0 22px;color:var(--ink2);font-size:15px}
.note{display:flex;gap:16px;align-items:flex-start;background:var(--tint);border:1px solid #D9E6FF;border-radius:16px;padding:18px 20px;margin-top:22px}
.note .ico{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--blue);display:grid;place-items:center;flex:none}
.note b{display:block;margin-bottom:4px}.note p{color:var(--ink2);font-size:15px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* the night section — what you get */
.night{background:var(--night);color:var(--ntext);position:relative;overflow:hidden}
.night::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(47,124,246,.30),transparent 60%);left:-200px;top:-260px;animation:blob 18s ease-in-out infinite alternate}
.night::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(18,181,165,.18),transparent 60%);right:-180px;bottom:-240px;animation:blob 22s ease-in-out infinite alternate-reverse}
.night .wrap{position:relative;z-index:1}
.night h2{color:#fff}.night .sub{color:var(--nmute)}.night .eyebrow{color:#8EC0FF}.night .eyebrow i{background:#8EC0FF}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.feat{background:rgba(255,255,255,.04);border:1px solid var(--nline);border-radius:18px;padding:22px;transition:background .3s,transform .3s var(--ease)}
.feat:hover{background:rgba(255,255,255,.07);transform:translateY(-3px)}
.feat .ico{width:42px;height:42px;border-radius:12px;background:rgba(47,124,246,.16);color:#8EC0FF;display:grid;place-items:center;margin-bottom:14px}
.feat .ico .ic{width:22px;height:22px}
.feat h3{color:#fff;margin-bottom:6px}.feat p{color:var(--nmute);font-size:14.5px}.feat p a{color:#8EC0FF}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.shots2 figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--nline);background:#000;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.shots2 img{display:block;width:100%;height:auto}
.shots2 figcaption{padding:12px 16px;font-size:13.5px;color:var(--nmute);background:var(--night2)}
.shots2 figcaption b{color:#fff;font-weight:600}
.seecant{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.seecant div{border-radius:16px;padding:20px 22px;border:1px solid var(--nline);background:rgba(255,255,255,.04)}
.seecant h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.seecant .can h4{color:#86EFAC}.seecant .cant h4{color:#FCA5A5}
.seecant ul{margin:0;padding-left:20px;color:var(--ntext);font-size:14.5px}.seecant li{margin:5px 0}
@media (max-width:860px){.feats{grid-template-columns:1fr 1fr}.shots2,.seecant{grid-template-columns:1fr}}
@media (max-width:560px){.feats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.night::before,.night::after{animation:none}}

/* languages */
.langs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:36px}
.lang{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.lang:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,23,42,.08);border-color:#C7DBFF}
.lang small.code{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--blue2)}
.lang b{display:block;font-size:22px;font-weight:600;margin:6px 0 2px}
.lang small{color:var(--mute);font-size:12.5px}
@media (max-width:860px){.langs{grid-template-columns:repeat(3,1fr)}}@media (max-width:480px){.langs{grid-template-columns:repeat(2,1fr)}}

/* where it works */
.where{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.wcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.wcard .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#DCFCE7;color:#15803D}
.wcard .tag.soon2{background:var(--tint);color:var(--blue2)}
.wcard h3{font-size:20px;margin:14px 0 8px}.wcard p{color:var(--ink2);font-size:15px}
.wcard.live{background:var(--night);color:#fff;border-color:transparent}
.wcard.live h3{color:#fff}.wcard.live p{color:#CBD5E1}.wcard.live .tag{background:rgba(255,255,255,.12);color:#fff}
.wcard .btn{margin-top:16px}
@media (max-width:860px){.where{grid-template-columns:1fr}}

/* faq */
.faq{max-width:760px;margin:32px auto 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:0 12px 30px rgba(15,23,42,.07)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;font-weight:600;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--ink2);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .3s}
.faq details[open] summary .pl{transform:rotate(45deg);background:var(--tint);color:var(--blue)}
.faq .a{color:var(--ink2);font-size:15px}
.faq .a a{font-weight:600}

/* the band */
.band{background:linear-gradient(135deg,#1F66DB,#1A56BD 60%,#0F766E);background-size:200% 200%;animation:grad 14s ease infinite;color:#fff;padding:72px 0;text-align:center}
@keyframes grad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.band h2{color:#fff}.band p{color:#fff;font-size:17px;max-width:620px;margin:14px auto 26px}
.band .fine{font-size:13px;color:#fff;opacity:.88;margin-top:14px}
@media (prefers-reduced-motion:reduce){.band{animation:none}}

/* prose pages */
.page{padding:64px 0 80px}
.page .head{margin-bottom:34px;max-width:760px}
.page .head .date{color:var(--mute);font-size:13.5px;margin-top:10px}
.prose{max-width:760px}
.prose h2{font-size:22px;margin:36px 0 10px}
.prose h3{font-size:17px;margin:24px 0 8px}
.prose p{margin:0 0 12px;color:var(--ink2)}
.prose ul,.prose ol{margin:0 0 12px;padding-left:22px;color:var(--ink2)}.prose li{margin:6px 0}
.prose .box{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0}
.prose .box p:last-child{margin:0}
.prose kbd{font-family:inherit;font-weight:600;background:var(--soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:13px}
.prose .ex{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0 18px}
.prose .ex div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14.5px;color:var(--ink2)}
.prose .ex div b{color:var(--ink);display:block;margin-bottom:2px}
.prose .ex div em{font-style:normal;color:#15803D;font-weight:600}.prose .ex div em.no{color:#B91C1C}
.toc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 8px}
.toc a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);font-weight:500;font-size:14.5px}
.toc a:hover{border-color:var(--blue);text-decoration:none}
.cc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 22px}
.cc div{border-radius:14px;padding:16px 18px;border:1px solid var(--line)}
.cc .can{background:#F0FDF4;border-color:#BBF7D0}.cc .cant{background:#FEF2F2;border-color:#FECACA}
.cc h4{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;line-height:1.4}
.cc .can h4{color:#15803D}.cc .cant h4{color:#B91C1C}
.cc ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink2)}.cc li{margin:4px 0}
@media (max-width:560px){.toc,.cc{grid-template-columns:1fr}}

/* help centre */
.hsearch{display:flex;align-items:center;gap:10px;max-width:560px;margin:20px 0 0;height:48px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:#fff}
.hsearch input{flex:1;border:0;outline:0;font:inherit;font-size:15.5px;color:var(--ink);background:transparent;text-overflow:ellipsis}
.hsearch:focus-within{border-color:var(--blue2);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14)}
.hsearch .ic{color:var(--mute)}
.hcats{margin-top:34px}
.hcat{margin-bottom:34px}
.hcat h2{font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.hcat h2 .ico{width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--blue);display:grid;place-items:center}
.hlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hitem{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.hitem:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.hitem b{display:block;font-size:15.5px;margin-bottom:3px}.hitem small{color:var(--mute);font-size:13.5px;line-height:1.5}
.hitem.hide,.hcat.hide{display:none}
.hnone{display:none;color:var(--mute);margin-top:20px}.hnone.on{display:block}
.crumb{font-size:13.5px;color:var(--mute);margin-bottom:14px}.crumb a{color:var(--mute)}
.next{margin-top:40px;padding-top:18px;border-top:1px solid var(--line2);font-size:14.5px;color:var(--mute)}
@media (max-width:720px){.hlist{grid-template-columns:1fr}}

/* contact & forms */
.cform{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 18px 44px rgba(15,23,42,.06)}
.cform label{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin:16px 0 6px}
.cform .row label,.cform>label:first-child{margin-top:0}
.cform .row+label{margin-top:16px}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.cform textarea{height:160px;padding:10px 12px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14)}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform .file{font-size:13.5px;color:var(--mute)}
.cform input[type=file]{width:100%;max-width:100%;min-width:0;font:inherit;font-size:14px;color:var(--mute)}
.cform input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:14px;height:36px;padding:0 12px;margin-right:10px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--ink);cursor:pointer}
.cform .hp,.wl .hp{display:none}
.cform .foot{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.cform .msg{font-size:14px;color:var(--mute)}.cform .msg.ok{color:#15803D}.cform .msg.bad{color:var(--stop)}
@media (max-width:640px){.cform .row{grid-template-columns:1fr}}   /* v4.12: the card is 780px at most, so the two fields share a row down to a phone */

/* live page */
.lhero{background:var(--night);color:#fff;padding:84px 0 70px;position:relative;overflow:hidden}
.lhero::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(47,124,246,.35),transparent 60%);right:-240px;top:-300px;animation:blob 16s ease-in-out infinite alternate}
.lhero .wrap{position:relative;z-index:1}
.lhero .k{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8EC0FF;background:rgba(47,124,246,.16);padding:8px 14px;border-radius:999px;margin-bottom:20px}
.lhero .k i{width:8px;height:8px;border-radius:50%;background:#F87171;display:inline-block;animation:ping 1.8s ease-out infinite}
.lhero h1{color:#fff;max-width:820px}
.lhero p.lead{color:#CBD5E1;font-size:18px;max-width:640px;margin:20px 0 0}
.wl{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;max-width:560px}
.wl input{flex:1;min-width:220px;height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font:inherit;font-size:15px}
.wl input::placeholder{color:#94A3B8}
.wl input:focus{outline:none;border-color:#8EC0FF;box-shadow:0 0 0 4px rgba(47,124,246,.25)}
.wl select{height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:0 12px;font:inherit;font-size:15px}
.wl select option{color:var(--ink)}
.wl .btn{height:50px}
.wl .msg{width:100%;font-size:13.5px;color:#94A3B8;margin-top:6px}.wl .msg.ok{color:#86EFAC}.wl .msg.bad{color:#FCA5A5}
.lhow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.lhow .step{padding-top:22px}
@media (max-width:860px){.lhow{grid-template-columns:1fr}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;position:relative;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(15,23,42,.1)}
.plan h2{font-size:19px}
.plan .pr{font-size:34px;font-weight:800;margin:10px 0 0;letter-spacing:-.02em}.plan .pr small{font-size:14px;color:var(--mute);font-weight:500;letter-spacing:0}
.plan .who{color:var(--mute);font-size:13.5px;margin:4px 0 16px}
.plan .hrs{background:var(--tint);border-radius:12px;padding:14px;margin-bottom:12px}
.plan .hrs b{display:block;font-size:20px;color:var(--blue2)}.plan .hrs small{color:var(--ink2);font-size:13px;display:block;min-height:40px}
.plan .answers{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start}
.plan .answers .ic{color:var(--blue2);margin-top:2px}
.plan .answers b{display:block;font-size:14.5px}.plan .answers small{color:var(--mute);font-size:12.5px}
.plan ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink2);flex:1}
.plan li{padding:8px 0;border-top:1px solid var(--line2);display:flex;gap:8px;align-items:flex-start}
.plan li .ic{width:16px;height:16px;color:#15803D;margin-top:3px}
.plan li b{color:var(--ink);font-weight:600}
.plan .btn{margin-top:16px;width:100%}
.plan.free .btn{background:#fff;color:var(--ink);border:1px solid var(--line)}
.guar{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:26px;font-size:14px;color:var(--ink2)}
.guar span{display:inline-flex;align-items:center;gap:6px}.guar .ic{color:#15803D;width:16px;height:16px}
.tops{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.top{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.top b{display:block;font-size:18px}.top .pr2{color:var(--blue2);font-weight:800;font-size:20px;margin:4px 0 8px}.top small{color:var(--mute);font-size:12.5px}
@media (max-width:1100px){.plans{grid-template-columns:1fr 1fr}}@media (max-width:560px){.plans,.tops{grid-template-columns:1fr}}
@media (max-width:860px){.tops{grid-template-columns:1fr 1fr}}

/* changelog */
.log{max-width:760px;margin-top:10px}
.entry{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line2);align-items:baseline}
.entry h2{font-size:16px;margin-bottom:6px}
.entry .v{font-weight:800;font-size:18px}.entry .v small{display:block;color:var(--mute);font-weight:500;font-size:13px;margin-top:2px}
.entry h3{font-size:16px;margin-bottom:6px}.entry ul{margin:0;padding-left:18px;color:var(--ink2);font-size:14.5px}.entry li{margin:4px 0}
@media (max-width:560px){.entry{grid-template-columns:1fr;gap:6px}}

/* footer */
footer{background:var(--night);color:#94A3B8;padding:48px 0 40px;margin-top:0;font-size:14px}
footer .top2{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--nline)}
footer .brand{color:#fff;font-size:16px}
footer .fl{display:flex;flex-wrap:wrap;gap:18px}footer .fl a{color:#CBD5E1}footer .fl a:hover{color:#fff}
footer .bot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-top:18px;font-size:13px;color:#7C8AA5}
footer .bot a{color:#94A3B8}
/* toast + 404 */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);z-index:60;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.nf{text-align:center;padding:90px 0 110px}.nf .big{font-size:96px;font-weight:800;line-height:1;color:var(--tint2);letter-spacing:-.03em}.nf h1{font-size:clamp(26px,4vw,38px);margin-top:6px}

/* the night section's feature cards carry a real screen on top */
.feat{padding:0;overflow:hidden;display:flex;flex-direction:column}
.feat .pic{aspect-ratio:16/10;background:#000;overflow:hidden;border-bottom:1px solid var(--nline)}
.feat .pic img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .6s var(--ease)}
.feat:hover .pic img{transform:scale(1.03)}
.feat .pic.contain{display:grid;place-items:center;background:#0B1220;padding:18px}
.feat .pic.contain img{object-fit:contain;height:auto}
.feat .fb{padding:22px}
.feat .seecant{margin:0 22px 22px;grid-template-columns:1fr;gap:10px}
.feat .seecant div{padding:14px 16px}
.feat .seecant ul{font-size:13.5px;padding-left:16px}
.cform .hp,.wl .hp{display:none}
.hero .hear .chip small{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.nf .cta .btn{min-width:130px}

/* the mark as a watermark on the blue band and the Live hero */
.band,.lhero{position:relative;overflow:hidden}
.wm{position:absolute;right:-60px;bottom:-90px;width:380px;height:380px;color:#fff;opacity:.07;pointer-events:none}
.wm svg{width:100%;height:100%}
.lhero .wm{opacity:.05;right:-40px;top:-60px;bottom:auto}
.band .wrap{position:relative;z-index:1}
@media (max-width:640px){.wm{width:240px;height:240px;right:-70px;bottom:-70px}}
.btn.dis,.btn.dis:hover{background:var(--soft);color:var(--ink2);cursor:default;box-shadow:none;transform:none}
.plan .pcap{margin-top:16px;text-align:center;font-size:14px;font-weight:600;color:var(--ink2);padding:12px;border-top:1px solid var(--line2)}
@media (max-width:420px){.hero h1{font-size:34px}.soon.big,.hero .cta .soon.big,.band .soon.big{font-size:13.5px;padding:10px 12px}}
@media (max-width:640px){.cform input,.cform select,.cform textarea,.wl input,.hsearch input{font-size:16px}}
@media (max-width:860px){.step .pic{max-height:280px;aspect-ratio:auto;height:280px}}
@media (max-width:480px){.step .pic{height:auto;max-height:none;aspect-ratio:16/10}}
.nav.open .menu{background:var(--soft)}
.demo .cap .sound{font:inherit;font-size:13px;color:#fff;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* ============================================================================================================
   v3 — the demo that moves, the platforms, twelve voices, the motion system
   Rule: transform and opacity only. Nothing here asks the browser to lay out or paint again while it moves.
   ============================================================================================================ */
/* page-to-page: a short cross-fade with a lift (Chrome's cross-document view transitions; others just navigate) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .18s ease-in both}
::view-transition-new(root){animation:vtIn .28s var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* the nav: one indicator that slides between the items instead of an underline that grows on each */
.nav .links{position:relative}
.nav .links .ind{position:absolute;bottom:2px;left:0;height:2px;width:0;background:var(--blue2);border-radius:2px;transition:transform .35s var(--ease),width .35s var(--ease);transform:translateX(var(--x,0));pointer-events:none;opacity:0}
.nav .links.has .ind{opacity:1}
.nav .links a::after{display:none}
.nav .links a{transition:color .2s}
@media (max-width:960px){.nav .links .ind{display:none}}

/* buttons, chips, cards: a press you can feel, a lift you can see */
.btn:active{transform:translateY(0) scale(.98)}
.chip:active{transform:scale(.97)}
.lang,.step,.feat,.hitem,.wcard,.plan,.top,.lf{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s,background .3s}
.lang:hover,.hitem:hover{transform:translateY(-3px)}
a:not(.btn):not(.brand):not(.hitem):not(.chip){background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease)}
a:not(.btn):not(.brand):not(.hitem):not(.chip):hover{text-decoration:none;background-size:100% 1px}
.nav .links a,.fl a,.crumb a,.nav .links a:hover,.fl a:hover,.crumb a:hover{background-image:none!important}

/* the FAQ opens with a glide, not a jump */
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);padding:0 20px}
.faq .a>div{overflow:hidden}
.faq details[open] .a{grid-template-rows:1fr;padding-bottom:18px}
.faq details[open] .a>div{padding-top:0}
.faq details summary{transition:color .2s}
.faq details:hover summary{color:var(--blue2)}

/* twelve voices: two rows of chips that wrap, the one playing lit */
.hear{max-width:900px;margin-left:auto;margin-right:auto;gap:8px}
.chip{height:40px;padding:0 14px 0 6px;font-size:14px}
.chip .pb{width:28px;height:28px}
.chip.playing{border-color:var(--blue2);box-shadow:0 6px 18px rgba(var(--blue-rgb),.18)}
@media (max-width:640px){.hear .lab{width:100%;text-align:center}.chip{height:36px;font-size:13px}}

/* the demo: the real screen, the words arriving on it, the state chip alive */
.demo{aspect-ratio:1600/712}
.demo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo .cap{display:none}
.dstate{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(11,18,32,.82);color:#E5E7EB;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 12px 7px 10px;font-size:12.5px;font-weight:600;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3}
.dstate i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:ping 1.6s ease-out infinite}
.dstate em{font-style:normal;color:#9AA4B8;font-weight:500;font-variant-numeric:tabular-nums}
.dsub{position:absolute;left:5%;right:5%;bottom:64px;z-index:2;min-height:96px}
.dl{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.78);border-radius:12px;padding:12px 18px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);will-change:transform,opacity}
.dl.on{opacity:1;transform:none}
.dl .hi{display:block;color:#fff;font-weight:700;font-size:clamp(13px,1.9vw,22px);line-height:1.35}
.dl .en{display:block;color:#CBD5E1;font-size:clamp(12px,1.3vw,15px);margin-top:4px}
@media (max-width:900px){.dstate{font-size:11px;padding:5px 9px 5px 8px;left:10px;bottom:10px}.dsub{bottom:50px}.dl .en{display:none}}
@media (max-width:640px){.dsub{left:3%;right:3%;bottom:9%;min-height:70px}.dl{padding:8px 10px;border-radius:8px}.dstate{left:8px;bottom:8px;font-size:11px;padding:5px 9px 5px 8px}}
@media (prefers-reduced-motion:reduce){.dl{transition:none}.dstate i{animation:none}}

/* with the clip, the film is the demo: the drawn words and the state chip step aside (the script brings them back if the film fails to load) */
body[data-clip] .dsub,body[data-clip] .dstate{display:none}
.demo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* parallax, hero only: the floating words drift against the scroll (a transform set by JS, once per frame) */
.floaters span{transition:none}
.hero .wrap{will-change:auto}

/* the platforms: a wall of the sites a video plays on, each in its own mark, lit when it works */
.plats{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:36px}
.plat{display:flex;flex-direction:column;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 10px 12px;text-align:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.plat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.08)}
.plat .pm{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background:var(--soft);color:var(--ink2)}
.plat .pm svg{width:22px;height:22px;fill:currentColor}
.plat .pm.txt{font-weight:800;font-size:18px;color:var(--ink2)}
.plat b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.plat small{display:block;font-size:11px;color:var(--mute);margin-top:auto;padding-top:4px;white-space:nowrap}
.plat.is-now{border-color:#BBF7D0;background:#F0FDF4}
.plat.is-now .pm{background:#DCFCE7;color:#15803D}
.plat.is-now small{color:#15803D;font-weight:600}
@media (max-width:1050px){.plats{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.plats{grid-template-columns:repeat(3,1fr);gap:8px}.plat{padding:12px 6px 10px}.plat .pm{width:38px;height:38px}.plat b{font-size:11.5px}}

/* Live: four things it brings */
.lfeats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.lf{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.lf:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.08)}
.lf .ico{width:38px;height:38px;border-radius:11px;background:var(--tint);color:var(--blue2);display:grid;place-items:center;margin-bottom:12px}
.lf b{display:block;font-size:15px;margin-bottom:4px}.lf span{font-size:13.5px;color:var(--ink2)}
@media (max-width:860px){.lfeats{grid-template-columns:1fr 1fr}}@media (max-width:480px){.lfeats{grid-template-columns:1fr}}

/* help centre: the list answers the search as you type; articles get a reading line and a quiet focus */
.hitem{will-change:auto}
.hitem.hide{display:none}
.prose h2{scroll-margin-top:90px}
.prose h2::before{content:"";display:block;width:26px;height:3px;background:var(--blue2);border-radius:2px;margin-bottom:10px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.prose h2.in::before{transform:none}
.prose .box{transition:box-shadow .3s}.prose .box:hover{box-shadow:0 10px 26px rgba(15,23,42,.06)}
/* long pages render only what is on screen */
.log,.prose{content-visibility:auto;contain-intrinsic-size:auto 600px}   /* v4: not the home sections — an anchor must land where it points */
@media (max-width:640px){.demo{aspect-ratio:16/10}.demo img{object-position:top left}.dsub{left:3%;right:3%;bottom:14%}.dl .en{display:none}.dl .hi{font-size:14px}.dstate{left:6px;bottom:6px;font-size:10.5px;padding:4px 8px 4px 7px}.dstate em{display:none}}

/* ============================================================================================================
   v4 — the demo above the fold, the voices sheet with faces, Ask Zeya on every page, fourteen platforms in their
   own colour on hover, the aurora, the tilt, the spotlight. Same rule: transform and opacity only while it moves.
   ============================================================================================================ */
/* the hero, re-ordered: pill, one line, the demo, then the buttons — the demo is visible without scrolling on a laptop */
.hero{padding:36px 0 20px}
.hero h1{font-size:clamp(34px,4.8vw,58px)}
.hero .k{margin-bottom:16px}
.hero p.lead{margin:14px auto 20px;max-width:720px;font-size:clamp(16px,1.6vw,18px)}
.demow{margin:0 auto;max-width:920px}
.hero .cta{margin-top:28px;gap:12px}
.btn small{font-weight:500;color:var(--mute);font-size:13px;margin-left:6px}
.btn.ghost.big{height:52px}
.hero .facts{margin-top:18px}
@media (max-width:480px){.hero .k .kx{display:none}}
@media (max-width:360px){.hero .k .kl{display:none}}
/* laptops with a short screen (1366×768, 1280×720): the demo still fits above the fold */
@media (min-width:1101px) and (max-height:770px){.hero{padding-top:30px}.hero h1{font-size:clamp(34px,4vw,48px)}.hero p.lead{margin:10px auto 14px}.demow{max-width:820px}.hero .k{margin-bottom:12px}}
@media (max-width:640px){.hero{padding:28px 0 12px}.hero h1{font-size:32px}.hero p.lead{margin:12px auto 18px}.hero .cta{margin-top:20px}.btn small{display:none}}

/* the aurora: three soft lights drifting behind the hero — pre-blurred gradients moved by transform, nothing repaints */
.aurora{position:absolute;inset:-20% -10% 0;pointer-events:none;z-index:0;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;will-change:transform;display:block}
.aurora .a1{width:62vw;height:62vw;max-width:980px;max-height:980px;left:-14%;top:-24%;background:radial-gradient(closest-side,rgba(47,124,246,.20),rgba(47,124,246,0));animation:aur1 26s ease-in-out infinite alternate}
.aurora .a2{width:46vw;height:46vw;max-width:700px;max-height:700px;right:-14%;top:-18%;background:radial-gradient(closest-side,rgba(18,181,165,.17),rgba(18,181,165,0));animation:aur2 32s ease-in-out infinite alternate}
.aurora .a3{width:46vw;height:46vw;max-width:700px;max-height:700px;left:32%;top:8%;background:radial-gradient(closest-side,rgba(124,110,245,.13),rgba(124,110,245,0));animation:aur3 38s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate3d(14%,12%,0) scale(1.12)}}
@keyframes aur2{to{transform:translate3d(-16%,16%,0) scale(1.08)}}
@keyframes aur3{to{transform:translate3d(-12%,-10%,0) scale(1.16)}}
@media (max-width:640px){.aurora .a3{display:none}}
.hero:not(.vis) .aurora i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.aurora .a1,.aurora .a2,.aurora .a3{animation:none}}

/* the demo tilts toward the pointer (JS sets one transform per frame); the glow follows */
.demo{transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s var(--ease);will-change:transform}
.demow.live .demo{transition:box-shadow .6s var(--ease)}

/* the spotlight: a soft light that follows the pointer across a card — a pseudo-element moved by transform */
.spot{position:relative;overflow:hidden}
.spot::after{content:"";position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(closest-side,rgba(47,124,246,.15),rgba(47,124,246,0));opacity:0;transform:translate3d(var(--sx,0px),var(--sy,0px),0);transition:opacity .35s;pointer-events:none;will-change:transform,opacity;z-index:0}
.spot:hover::after{opacity:1}
.night .spot::after{background:radial-gradient(closest-side,rgba(142,192,255,.16),rgba(142,192,255,0))}
.spot>*{position:relative;z-index:1}
.step.spot .n{z-index:2}
@media (hover:none){.spot::after{display:none}}

/* the problem, said once, centred — the dark card is gone; the two sliders carry the answer */
.whyh{max-width:900px;margin:0 auto;text-align:center}
.whyh h2{font-size:clamp(24px,3vw,36px)}
.whyh .soft{color:var(--mute);font-weight:500;display:block;margin-top:14px;font-size:.6em;line-height:1.45;letter-spacing:0}

/* the voices: a sheet over the home page, a page of its own; every voice a card with its face */
.vsheet{position:fixed;inset:0;z-index:70;background:rgba(11,18,32,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px}
.vsheet[hidden]{display:none}
.vbox{background:#fff;border-radius:22px;width:min(980px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(11,18,32,.35);transform:translateY(16px) scale(.98);opacity:0;animation:vIn .35s var(--ease) forwards;outline:none}
@keyframes vIn{to{transform:none;opacity:1}}
.vhead{display:flex;align-items:flex-start;gap:16px;padding:26px 28px 16px;border-bottom:1px solid var(--line2)}
.vhead h2{font-size:24px}.vhead p{color:var(--ink2);margin-top:6px;font-size:15px}
.vclose{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink2);transition:background .2s}
.vclose:hover{background:var(--soft)}
.vscroll{overflow:auto;padding:4px 28px 24px;overscroll-behavior:contain}
.vgroups{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.vg{padding:16px 0;border-bottom:1px solid var(--line2)}
.vg h3{font-size:15.5px;display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.vg h3 small{color:var(--mute);font-weight:500;font-size:13.5px}
.vcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vcard{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.vcard:hover{border-color:var(--blue);box-shadow:0 10px 26px rgba(var(--blue-rgb),.14);transform:translateY(-2px)}
.vcard:active{transform:scale(.98)}
.vface{width:54px;height:54px;flex:none;border-radius:50%;overflow:hidden;background:var(--soft)}
.vface svg{width:100%;height:100%;display:block}
.vt{flex:1;min-width:0}.vt b{display:block;font-size:15px}.vt small{display:block;color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp{width:34px;height:34px;border-radius:50%;background:var(--blue2);color:#fff;display:grid;place-items:center;flex:none;transition:background .2s,transform .2s var(--ease)}
.vp svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.vcard:hover .vp{transform:scale(1.08)}
.vcard .wv{display:none;align-items:flex-end;gap:2px;height:18px;width:26px;flex:none}
.vcard .wv i{flex:1;background:var(--blue2);border-radius:2px;height:30%;animation:wv 1s ease-in-out infinite;animation-delay:calc(var(--i)*.09s)}
.vcard.playing{border-color:var(--blue2);box-shadow:0 10px 26px rgba(var(--blue-rgb),.18)}
.vcard.playing .wv{display:flex}.vcard.playing .vp{background:var(--ink)}
.vcard.busy .vp{background:var(--mute)}
.vmore{color:var(--ink2);font-size:14.5px;margin-top:22px;text-align:center}
.vpage .vgroups{margin-top:16px}
.vpage .head{margin:0 auto 10px;max-width:760px}
.vpage h1{font-size:clamp(34px,4.6vw,56px)}
.vpage .head.center .sub{margin-left:auto;margin-right:auto}
body.noscroll{overflow:hidden}
@media (max-width:860px){.vgroups{grid-template-columns:1fr}.vsheet{padding:0}.vbox{width:100%;max-height:100vh;max-height:100dvh;height:100%;border-radius:0}.vhead{padding:18px 18px 12px}.vhead h2{font-size:20px}.vhead p{font-size:14px}.vscroll{padding:0 18px 18px}}
@media (max-width:480px){.vcards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.vbox{animation:none;transform:none;opacity:1}.vcard .wv i{animation:none;height:60%}}

/* the platforms: every mark in its own colour, always (his call, 1 Oct); under the pointer the mark lifts, nothing turns red */
.plats{grid-template-columns:repeat(7,1fr)}
.plat .pm{color:var(--bc,var(--blue2));background:var(--soft);transition:background .25s,transform .3s var(--ease)}
@supports (background:color-mix(in srgb,#000 10%,#fff)){.plat .pm{background:color-mix(in srgb,var(--bc,var(--blue2)) 9%,#fff)}.plat:hover .pm{background:color-mix(in srgb,var(--bc,var(--blue2)) 16%,#fff)}}
.plat:hover .pm{transform:scale(1.08)}
.plat .pm.txt{color:var(--bc,var(--blue2))}
.plat.is-now .pm{color:var(--bc,#15803D)}
.plats.big{grid-template-columns:repeat(7,1fr);margin-top:30px}
.allp{text-align:center;margin-top:16px;font-size:14.5px;font-weight:600}
.ppage .head{margin:0 auto 10px;max-width:760px}.ppage .head.center .sub{margin-left:auto;margin-right:auto}
.ppage h1{font-size:clamp(34px,4.6vw,56px)}
/* next languages: the ones people ask for, as a quiet row — none promised */
.nextl{margin-top:34px;padding-top:26px;border-top:1px solid var(--line2);display:grid;grid-template-columns:260px 1fr;gap:12px 24px;align-items:center}
.nlh b{display:block;font-size:15.5px}.nlh span{color:var(--ink2);font-size:13.5px}
.nls{display:flex;flex-wrap:wrap;gap:8px}
.nl{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;border:1px dashed var(--line);color:var(--ink2);font-size:13.5px;font-weight:500;background:#fff}
.nl.more{border-style:solid;color:var(--blue2);border-color:#C7DBFF;background:var(--tint)}
@media (max-width:860px){.nextl{grid-template-columns:1fr}}
/* voices on the way: silhouettes, no names, no dates */
.vnext{margin-top:44px;padding-top:36px;border-top:1px solid var(--line2)}
.vnext h2{font-size:clamp(24px,3vw,32px)}
.vghosts{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:26px}
.vghost{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border:1px dashed var(--line);border-radius:16px;background:#fff;color:var(--ink)}
.vghost .vface{opacity:.9}
.vghost .vt b{color:var(--ink2)}
@media (max-width:1050px){.vghosts{grid-template-columns:repeat(3,1fr)}}@media (max-width:560px){.vghosts{grid-template-columns:repeat(2,1fr)}}
/* a voice being fetched says so */
.vcard.busy .vt small{color:var(--blue2)}
.pask{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:grid;grid-template-columns:280px 1fr;gap:12px 24px;align-items:center}
.pask .pt b{display:block;font-size:15.5px}.pask .pt span{color:var(--ink2);font-size:13.5px}
.pask .row{display:flex;gap:10px;flex-wrap:wrap}
.pask select,.pask input{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:15px;color:var(--ink);background:#fff;flex:1 1 170px;min-width:0;width:170px}
.pask select:focus,.pask input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14)}
.pask .hp{display:none}
.pask .msg{grid-column:1/-1;font-size:13.5px;color:var(--mute)}.pask .msg.ok{color:#15803D}.pask .msg.bad{color:var(--stop)}
@media (max-width:1050px){.plats{grid-template-columns:repeat(5,1fr)}}
@media (max-width:860px){.pask{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.plats{grid-template-columns:repeat(3,1fr)}.pask select,.pask input{font-size:16px}}

/* Ask Zeya on every page: the button, the panel, the messages */
.ask{position:fixed;right:22px;bottom:22px;z-index:65}
.askb{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 10px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:#fff;color:var(--ink);font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;box-shadow:0 14px 40px rgba(15,23,42,.18);transition:transform .25s var(--ease),box-shadow .25s}
.askb:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(15,23,42,.22)}
.askb:active{transform:scale(.97)}
.askb .tile{width:32px;height:32px}
.askp{position:absolute;right:0;bottom:64px;width:min(380px,calc(100vw - 44px));height:min(70vh,600px);background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(15,23,42,.25);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:askIn .3s var(--ease)}
.askp[hidden]{display:none}
@keyframes askIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.askh{display:flex;align-items:center;gap:12px;padding:14px 12px 12px 16px;border-bottom:1px solid var(--line2);flex:none}
.askh b{display:block;font-size:15px}.askh small{display:block;color:var(--mute);font-size:12.5px}
.askx{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink2);transition:background .2s}
.askx:hover{background:var(--soft)}
.askm{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.am{max-width:92%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.am.z{background:var(--soft);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.am.u{background:var(--blue2);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.am.w{background:var(--soft);align-self:flex-start;padding:12px 14px;display:flex;gap:5px;align-items:center}
.am.w i{display:block;width:6px;height:6px;border-radius:50%;background:var(--mute);animation:dot 1s ease-in-out infinite}
.am.w i:nth-child(2){animation-delay:.15s}.am.w i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
.am.bad{background:#FEF2F2;color:#B91C1C}
.am a{font-weight:600}
.asks{display:flex;flex-wrap:wrap;gap:6px}
.asks button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;transition:border-color .2s,color .2s}
.asks button:hover{border-color:var(--blue);color:var(--blue2)}
.askf{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line2);flex:none}
.askf input{flex:1;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:15px;color:var(--ink);min-width:0}
.askf input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14)}
.askf .btn{width:42px;height:42px;padding:0;border-radius:12px;flex:none}
.askn{font-size:11.5px;color:var(--mute);padding:0 14px 10px;text-align:center;flex:none}
.linkb{font:inherit;font-weight:600;color:var(--blue2);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;vertical-align:baseline}
.linkb:hover{text-decoration:underline}
.linkb .ic{width:16px;height:16px}
@media (max-width:640px){.ask{right:14px;bottom:14px}.askb .lbl{display:none}.askb{padding:0 10px}.askp{position:fixed;left:12px;right:12px;bottom:80px;width:auto;height:min(70vh,560px)}.askf input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.askp{animation:none}.am.w i{animation:none}}
.nav .links{gap:22px}

/* ---- v4.2 ---- */
/* the nav has six doors now; between a tablet and a small laptop it breathes less, and the store pill says the short thing */
@media (min-width:961px) and (max-width:1180px){.nav .wrap{gap:18px}.nav .links{gap:14px;font-size:14px}.nav .soon{font-size:13px;padding:8px 12px}}
.nav .soon .s{display:none}
@media (min-width:961px) and (max-width:1180px){.nav .soon .l{display:none}.nav .soon .s{display:inline}}
/* v4.7: the store is live — the nav's Add to Chrome button says the short thing in the same range */
.nav .btn .s{display:none}
@media (min-width:961px) and (max-width:1180px){.nav .btn{font-size:14px;padding:0 14px}.nav .btn .l{display:none}.nav .btn .s{display:inline}}
/* the platforms page, in groups: a heading, a line, a count, the tiles */
.pgroup{margin-top:34px}
.pgroup:first-of-type{margin-top:8px}
.pgh{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pgh h2{font-size:22px;letter-spacing:-.01em;margin:0}
.pgh span{color:var(--mute);font-size:14px}
.pgh em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--soft);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.pgroup .plats.big{margin-top:16px}
@media (max-width:640px){.pgh{flex-wrap:wrap;gap:6px 10px}.pgh h2{font-size:19px}.pgh span{flex-basis:100%;order:3}.pgh em{margin-left:auto}}

/* v4.3: the sound button on the clip — off by default, a pill at the corner of the video */
.demo .sound{position:absolute;right:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(11,18,32,.78);color:#fff;font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,transform .25s var(--ease),border-color .2s}
.demo .sound:hover{background:rgba(11,18,32,.96);border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.demo .sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
.demo .sound .ic{width:16px;height:16px;flex:none}
.demo .sound .i-on,.demo .sound.on .i-off{display:none}
.demo .sound.on .i-on{display:block}
.demo .sound.on{background:rgba(31,102,219,.9);border-color:rgba(142,192,255,.6)}
@media (max-width:900px){.demo .sound{height:32px;font-size:12px;right:10px;bottom:10px}}

/* ---- v4.4: the same site on a phone ---- */
@media (max-width:1100px){.floaters{display:none}}
@media (max-width:640px){.aurora .a3{display:block}}
.rv.z{transform:scale(.94)}
.plat.rv{transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .35s var(--ease),border-color .3s;transition-delay:var(--d,0s)}
.plat.rv.in{transition-delay:0s}
/* the hero arrives: the words rise, the demo settles, the buttons follow — once, on load, on every screen */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
.hero h1,.hero p.lead,.hero .cta,.hero .facts{animation:rise .8s var(--ease) both}
.hero p.lead{animation-delay:.08s}.hero .cta{animation-delay:.22s}.hero .facts{animation-delay:.3s}
.demow{animation:settle .9s var(--ease) .14s both}
@media (prefers-reduced-motion:reduce){.hero h1,.hero p.lead,.hero .cta,.hero .facts,.demow{animation:none}.rv.z{transform:none}}
/* the full platforms grid on tablets and phones — .big used to win over the phone rule and spill off the screen */
@media (max-width:1050px){.plats.big{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){.plats.big{grid-template-columns:repeat(3,1fr)}}
body{overflow-x:clip}
@media (max-width:640px){.vghosts{grid-template-columns:repeat(2,1fr)}.vghost{min-width:0}.vghost .vt{min-width:0}}
section.s,.ppage,.vpage,.band{overflow-x:clip}

/* ---- v4.5: a phone is not a narrow laptop ---- */
@media (max-width:640px){
  .hero{padding:34px 0 22px}.hero .k{margin-bottom:14px}.hero h1{font-size:36px;line-height:1.08}.hero p.lead{font-size:16px;line-height:1.55;margin:14px auto 22px;max-width:34ch}
  .demow{margin:0 -24px;max-width:none}.demo{border-radius:0;border-left:0;border-right:0}.demow .glow{display:none}
  .hero .cta{margin-top:22px;gap:10px}.hero .cta .soon.big{font-size:13.5px;min-height:44px;padding:8px 14px;white-space:nowrap}
  .hero .facts{margin-top:16px;gap:8px 14px;font-size:12.5px}.hero .facts span:first-child{display:none}
  section.s{padding:64px 0}.s h2{font-size:30px}
}
/* interface, not prose: a long press on a phone should not select a card and offer to rewrite it */
.nav,.hero,.demo,.plat,.lang,.step,.feat,.wcard,.plan,.band,.cta,.facts,.k,.chip,.vcard,.pgh,.faq summary,.askb,.ticker,.pask .pt,footer .top2{-webkit-user-select:none;user-select:none}
img,video,.demo,.plat,.vface{-webkit-touch-callout:none}
/* the cards that tilt on a laptop */
.step,.feat,.wcard,.lang{transform-style:preserve-3d}
.step.tilt,.feat.tilt,.wcard.tilt,.lang.tilt{transition:box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.step,.feat,.wcard,.lang{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s,background .3s}}

/* ---- v4.9 ---- */
/* the plans page's comparison: first the twelve things every plan has, two to a row, each with the check the cards use;
   then the small table of what differs — under 600px it scrolls sideways inside its card, the row's name staying put, a shadow at the edge */
.every{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:6px 24px;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.every .er{display:flex;gap:10px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line2);font-size:14px;color:var(--ink2);min-width:0}
.every .er:nth-child(-n+2){border-top:0}
.every .er .ic{width:16px;height:16px;color:#15803D;margin-top:4px}
.every .er b{display:block;color:var(--ink);font-weight:600;font-size:15px;line-height:1.4}
.every .er span{display:block;margin-top:2px;line-height:1.5}
.difft{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.difft table{width:100%;border-collapse:collapse;font-size:14.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.difft th,.difft td{padding:13px 16px;text-align:center;border-top:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
.difft thead th{border-top:0;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:14px 16px 12px}
.difft th[scope=row]{text-align:left;font-weight:600;color:var(--ink);padding-left:24px;white-space:nowrap}
.difft td.no{color:var(--mute)}
.difft td b{display:block;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-.01em}
.difft td small{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.difft .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:700px){.every{grid-template-columns:1fr;padding:4px 20px}.every .er:nth-child(2){border-top:1px solid var(--line2)}}
@media (max-width:599px){.difft table{min-width:480px}.difft th,.difft td{padding:12px 12px}.difft th[scope=row],.difft thead th:first-child{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line2)}.difft th[scope=row]{padding-left:18px;white-space:normal;min-width:150px;max-width:150px;line-height:1.35}
  /* a shadow at the edge where there is more table to scroll to (the cells are transparent; the card paints the cue) */
  .difft{background:linear-gradient(90deg,var(--card) 30%,rgba(255,255,255,0)),linear-gradient(90deg,rgba(255,255,255,0),var(--card) 70%) 100% 0,linear-gradient(90deg,rgba(15,23,42,.12),rgba(15,23,42,0)),linear-gradient(270deg,rgba(15,23,42,.12),rgba(15,23,42,0)) 100% 0;background-color:var(--card);background-repeat:no-repeat;background-size:40px 100%,40px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll}}
/* (v4.9's WhatsApp card rule moved into the v4.12 contact block — the card is one of the feature cards now) */

/* ---- v4.12: the contact page, in the site's own clothes (the form and the receipt are v4.11's) ---- */
/* The hero is the Live page's night hero, centred: the mark as a watermark at the right, the badge, two white lines, the
   lead — and "write to us" in twelve scripts drifting in the side bands (the home's floaters, in the night's light blue;
   they and the light behind them pause once the hero has left the screen). The form card floats over the hero's bottom
   edge into the light section; on a phone it simply follows the hero. Rule, as everywhere: transform and opacity while it
   moves; the one height transition is the card's turn into the receipt. */
.chero{padding:76px 0 150px;text-align:center}
.chero .k i{background:var(--ok)}
.chero h1{margin:0 auto;max-width:900px}
.chero h1 .l2{display:block}
.chero p.lead{margin:20px auto 0;max-width:640px}
.chero .k,.chero h1,.chero p.lead{animation:rise .8s var(--ease) both}
.chero h1{animation-delay:.05s}.chero p.lead{animation-delay:.14s}
.chero .floaters span{color:#8EC0FF;opacity:.16}
.chero:not(.vis) .floaters span,.chero:not(.vis)::before{animation-play-state:paused}
section.cbody{padding:0 0 84px}
.cbody .wrap{position:relative;z-index:1}
.cmain{max-width:780px;margin:-104px auto 0;min-width:0}
.cmain .ccard{box-shadow:0 24px 64px rgba(11,18,32,.16)}
/* what happens next: the centred head, then the home's feature cards on the light section — the tinted tile, the title,
   one line; the trust cards in the same family, two to a row (an odd last one takes the row); the warning keeps its tint */
.cnext{margin-top:72px}
.feats.csteps{margin-top:32px}
.feats.ctrust{margin-top:28px;grid-template-columns:1fr 1fr}
.ctrust>.feat:last-child:nth-child(odd){grid-column:1/-1}
.cbody .feat{background:var(--card);border-color:var(--line)}
.cbody .feat:hover{background:var(--card);box-shadow:0 22px 48px rgba(15,23,42,.1)}
.cbody .feat .ico{background:var(--tint);color:var(--blue2)}
.cbody .feat h3{color:var(--ink)}
.cbody .feat p{color:var(--ink2);line-height:1.55}
.cbody .feat p a{color:var(--blue2);font-weight:600}
.cbody .feat.warn,.cbody .feat.warn:hover{background:#FFFBEB;border-color:#FDE68A}
.cbody .feat.warn .ico{background:#FEF3C7;color:var(--amber)}
.cbody .feat.warn.spot::after{background:radial-gradient(closest-side,rgba(245,158,11,.13),rgba(245,158,11,0))}
.cbody .feat.grey .ico{background:var(--soft);color:var(--ink2)}
.cbody .feat .btn{margin-top:14px;white-space:normal;height:auto;min-height:44px;padding:10px 16px;line-height:1.3;text-align:center}
.cext{margin-top:18px}
.cext p strong{color:var(--ink);font-weight:600}
@media (max-width:860px){.feats.csteps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .chero{padding:48px 0 44px}.chero p.lead{font-size:16px;line-height:1.55}
  section.cbody{padding:20px 0 64px}
  .cmain{margin-top:0}.cmain .ccard{box-shadow:0 18px 44px rgba(15,23,42,.06)}
  .cnext{margin-top:56px}
  .feats.csteps,.feats.ctrust{grid-template-columns:1fr}
  .ctrust>.feat:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:360px){.chero .k .kl{display:none}}
/* the card lifts while a field in it has the focus, and a sapphire ring comes up around it. The ring is a pseudo-element
   fading in (opacity), the card stays on its own layer — so the lift costs the browser a transform, never a repaint of the card. */
.ccard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 44px rgba(15,23,42,.06);transition:transform .35s var(--ease);will-change:transform}
.ccard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 4px rgba(var(--blue-rgb),.1),0 26px 60px rgba(15,23,42,.1);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;will-change:opacity}
.ccard:not(.rcpt):focus-within{transform:translateY(-2px)}
.ccard:not(.rcpt):focus-within::before{opacity:1}
.ccard.morph{overflow:hidden;transition:height .42s var(--ease),transform .35s var(--ease)}
.ccard.morph .receipt,.ccard.morph .cform{will-change:transform,opacity}
.cform{background:none;border:0;border-radius:0;box-shadow:none;padding:26px;transition:opacity .22s}
.ccard>.fade,.ccard>.pre{opacity:0}
.ccard{scroll-margin-top:84px}
.cform .f{position:relative;margin-top:6px;min-width:0}
.cform .row{gap:14px}
.cform .row .f{margin-top:0}
.cform .f label,.cform .f .lbl{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.cform .opt{font-weight:400;color:var(--mute)}
.cform input[type=text],.cform input[type=email],.cform textarea{transition:border-color .2s,box-shadow .2s;max-width:100%}
.cform input:focus,.cform textarea:focus{border-color:var(--blue)}
/* a field left empty: a red hairline, one line under it, a short shake (transform only). The line's slot is always
   there, so a line appearing or going as a field is left never moves the button under a pointer that is on its way down. */
.cform .err{display:block;font-size:12.5px;line-height:17px;min-height:17px;color:var(--stop);margin-top:4px;opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cform .f.bad .err{opacity:1;transform:none}
.cform .f.bad input,.cform .f.bad textarea{border-color:var(--stop);box-shadow:0 0 0 4px rgba(194,76,71,.12)}
.cform .f.bad .tchip[aria-checked=false]{border-color:#E7A8A5}
.cform .f.bad .drop{border-color:var(--stop)}
.cform .f.shake{animation:shake .3s var(--ease)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* the topic: one chip at a time, the chosen one filled, a spring under the press */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{display:inline-flex;align-items:center;min-height:38px;max-width:100%;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);font:inherit;font-size:14px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s,box-shadow .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.tchip:hover{border-color:#BFD5FF;background:var(--tint);color:var(--blue2);transform:translateY(-1px)}
.tchip:active{transform:scale(.94)}
.tchip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tchip[aria-checked=true]{background:var(--blue2);border-color:var(--blue2);color:#fff;box-shadow:0 8px 20px rgba(var(--blue-rgb),.28);animation:chipPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes chipPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:none}}
/* the picture: a dashed zone — drop it, or press to choose; then the thumbnail, the name, Remove */
.drop{position:relative;border:1.5px dashed #CBD5E1;border-radius:12px;background:var(--paper);transition:border-color .2s,background .2s,transform .3s var(--ease),box-shadow .2s}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--tint)}
.drop.over{transform:scale(1.012);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14)}
.drop:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14)}
.drop input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;padding:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drop .dp{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0;cursor:pointer;font-weight:400;color:var(--ink);font-size:14.5px;min-width:0}
.drop .dico{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--blue2);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.drop .dico .ic{width:20px;height:20px}
.drop:hover .dico,.drop.over .dico{transform:translateY(-2px) rotate(-4deg)}
.drop .dt{min-width:0}
.drop .dp b{display:block;font-weight:600;color:var(--ink);line-height:1.35}
.drop .dp em{font-style:normal;color:var(--blue2);border-bottom:1px solid rgba(var(--blue-rgb),.4)}
.drop .dp small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.drop .dsel{display:flex;align-items:center;gap:12px;padding:10px 12px;animation:rise .35s var(--ease) both}
.drop .dsel[hidden]{display:none}
.drop .dsel img{width:50px;height:50px;border-radius:10px;object-fit:cover;background:#fff;border:1px solid var(--line);flex:none;display:block}
.drop .dsel img.none{visibility:hidden}
.drop .dn{flex:1;min-width:0}
.drop .dn b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop .dn small{display:block;color:var(--mute);font-size:12.5px}
.drop .drm{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;flex:none;transition:border-color .2s,color .2s,transform .2s var(--ease)}
.drop .drm .ic{width:14px;height:14px}
.drop .drm:hover{border-color:var(--stop);color:var(--stop);transform:translateY(-1px)}
.drop .drm:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Send: the icon turns into a ring while it goes; the button never changes size */
.cform .foot{margin-top:6px}
.cform .foot .btn{min-width:176px}
.cform .btn .bi{display:inline-grid;place-items:center;width:20px;height:20px}
.cform .btn .bi .ic{grid-area:1/1;width:20px;height:20px;transition:opacity .2s,transform .3s var(--ease)}
.cform .btn .bi .ic:last-child{opacity:0;transform:scale(.6)}
.cform .btn.busy .bi .ic:first-child{opacity:0;transform:scale(.6)}
.cform .btn.busy .bi .ic:last-child{opacity:1;transform:none;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cform .btn:disabled{cursor:default;transform:none;box-shadow:none;background:var(--blue2);opacity:.85}
@media (max-width:640px){.cform .foot .btn{width:100%}.cform .foot .msg{text-align:center;width:100%}}
/* the receipt: the same card, the check drawing itself, the number, the three steps */
.receipt{padding:30px 28px 24px;transition:opacity .35s var(--ease);outline:none}
.receipt[hidden]{display:none}
.rtop{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ck{width:64px;height:64px;flex:none}
.ck circle{fill:#fff;stroke:var(--blue2);stroke-width:2.5;stroke-dasharray:184;stroke-dashoffset:184}
.ck path{fill:none;stroke:var(--blue2);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:38;stroke-dashoffset:38}
.receipt.in .ck circle{animation:draw .55s var(--ease) forwards}
.receipt.in .ck path{animation:draw .4s var(--ease) .38s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rt{flex:1;min-width:0}
.rt h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em}
.rsub{margin-top:4px;color:var(--ink2);font-size:15px}
.rquote{margin-top:18px;padding:14px 16px 14px 18px;border-left:3px solid var(--blue);background:#F3F7FF;border-radius:0 12px 12px 0}
.rquote .rq-lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);margin-bottom:6px}
.rquote p{margin:0;color:var(--ink);font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.rline{margin-top:18px;color:var(--ink2);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.rline b{color:var(--ink)}
.rtl{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rtl li{position:relative;min-width:0;opacity:0}
.receipt.in .rtl li{animation:rise .5s var(--ease) both;animation-delay:calc(.55s + var(--i)*.14s)}
.rtl .dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--mute);display:grid;place-items:center}
.rtl .dot .ic{width:17px;height:17px}
.rtl li.done .dot{background:var(--blue2);border-color:var(--blue2);color:#fff}
.rtl li::after{content:"";position:absolute;left:42px;right:-6px;top:16px;height:2px;background:var(--line2);border-radius:2px}
.rtl li:last-child::after{display:none}
.rtl li b{display:block;margin-top:10px;font-size:14.5px}
.rtl li small{display:block;color:var(--mute);font-size:12.5px;line-height:1.45;margin-top:2px}
.rfoot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line2);font-size:14.5px}
.rfoot .linkb .ic{width:16px;height:16px}
@media (max-width:560px){
  .receipt{padding:24px 20px 20px}
  .rtl{grid-template-columns:1fr;gap:0}
  .rtl li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding-bottom:18px}
  .rtl li .dot{grid-row:1/3}
  .rtl li b{grid-column:2;margin-top:6px}
  .rtl li small{grid-column:2}
  .rtl li::after{left:16px;right:auto;top:38px;bottom:-2px;width:2px;height:auto}
}
@media (max-width:480px){.cform{padding:20px 16px}}
@media (hover:none){.tchip:hover{transform:none;background:#fff;color:var(--ink2);border-color:var(--line)}.tchip[aria-checked=true]:hover{background:var(--blue2);color:#fff;border-color:var(--blue2)}}
@media (prefers-reduced-motion:reduce){
  .chero .k,.chero h1,.chero p.lead,.tchip[aria-checked=true],.cform .f.shake,.drop .dsel,.receipt.in .rtl li,.receipt.in .ck circle,.receipt.in .ck path{animation:none}
  /* the night hero's light and the badge's dot: the rule near the top of this file lost to the later .lhero rules — said again here, after them (the Live page too) */
  .lhero::before,.lhero .k i{animation:none}
  .rtl li{opacity:1;transform:none;transition:none}
  .ck circle,.ck path{stroke-dashoffset:0}
  .ccard,.ccard::before,.ccard.morph,.tchip,.drop,.cform,.receipt,.drop .dico,.cbody .feat{transition:none}
  .ccard:not(.rcpt):focus-within,.tchip:hover,.drop.over,.cbody .feat:hover{transform:none}
}

/* ---- v4.15: December — guess the price, win the plan (docs/DECEMBER.md). The one page where motion is the point. ---- */
/* The Live page's night hero, centred, at its most alive: the aurora's four lights — two sapphire, one violet, one emerald,
   never a warm colour — whose opacities site.js slides with the number being typed (four layers, nothing repainted while
   the hue moves: twelve layers measured badly on a 4× throttle); "December" in twelve
   scripts in the side bands, drifting faster while a field is typed in; a soft light under the pointer on a laptop. The
   word assembles letter by letter, the two lines and the headline follow; the white cards rise over the hero's edge 120 ms
   apart; Submit wakes when all three hold a number; on Submit the numbers fold into the envelope, its stroke draws over
   600 ms, the mark seals it, and it slides up under the headline. Transform and opacity only — but the envelope's stroke,
   drawn like the contact receipt's check — and every bit of it still under prefers-reduced-motion. */
.dhero{padding:84px 0 182px;text-align:center}
.dhero::before{display:none}
.dhero .wrap{position:relative;z-index:2}
.dau{position:absolute;inset:-20% -10% 0;pointer-events:none;z-index:0;overflow:hidden}
.dau i{position:absolute;border-radius:50%;display:block;will-change:transform,opacity;transition:opacity 1.1s var(--ease)}
.dau .a1{width:64vw;height:64vw;max-width:1000px;max-height:1000px;left:-16%;top:-30%;background:radial-gradient(closest-side,rgba(47,124,246,.42),rgba(47,124,246,0));opacity:calc(.3 + .7 * var(--ws,1));animation:aur1 26s ease-in-out infinite alternate}
.dau .a2{width:50vw;height:50vw;max-width:760px;max-height:760px;right:-14%;top:-14%;background:radial-gradient(closest-side,rgba(31,102,219,.40),rgba(31,102,219,0));opacity:var(--ws,1);animation:aur2 32s ease-in-out infinite alternate}
.dau .a3{width:58vw;height:58vw;max-width:900px;max-height:900px;left:22%;top:-6%;background:radial-gradient(closest-side,rgba(124,110,245,.40),rgba(124,110,245,0));opacity:var(--wv,0);animation:aur3 38s ease-in-out infinite alternate}
.dau .a4{width:58vw;height:58vw;max-width:900px;max-height:900px;left:20%;top:4%;background:radial-gradient(closest-side,rgba(16,185,129,.34),rgba(16,185,129,0));opacity:var(--we,0);animation:aur1 30s ease-in-out infinite alternate-reverse;transition-duration:1.6s}
.dhero:not(.vis) .dau i,.dhero:not(.vis) .floaters span{animation-play-state:paused}
.dhero .floaters span{color:#8EC0FF;opacity:.16}
.dspot{position:absolute;left:0;top:0;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;background:radial-gradient(closest-side,rgba(142,192,255,.13),rgba(142,192,255,0));opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:1;will-change:transform,opacity}
.dhero.lit .dspot{opacity:1}
@media (hover:none),(pointer:coarse){.dspot{display:none}}
/* arrival: the letters 40 ms apart, each rising 12 px; the lines 300 ms after the last lands; the headline a beat after */
.dword{margin:0 auto;font-size:clamp(60px,11vw,136px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.dword .dlt{display:inline-block}
.dword .dlt span{display:inline-block;animation:dLetter .5s var(--ease) both;animation-delay:calc(.12s + var(--i) * 40ms)}
@keyframes dLetter{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.dlines{margin:24px auto 0;max-width:640px;color:#CBD5E1;font-size:clamp(17px,1.9vw,20px);line-height:1.55;animation:rise .7s var(--ease) 1.2s both}
.dlines span{display:block}
.dhead{margin:30px auto 0;max-width:900px;color:#fff;font-size:clamp(30px,4.6vw,54px);letter-spacing:-.025em;animation:dHead .8s var(--ease) 1.5s both}
.dhead em{font-style:normal;color:#8EC0FF;white-space:nowrap}
@keyframes dHead{from{opacity:0;transform:translate3d(0,18px,0) scale(.97)}to{opacity:1;transform:none}}
.dstore{margin-top:30px;animation:rise .7s var(--ease) 1.75s both}
.dec:not([data-mode=visit]) .dstore{display:none}
/* the cards: white, floating up over the hero's edge; the one being typed in lifts 4 px and glows (a ring fading in) */
section.dbody{padding:0 0 84px}
.dbody .wrap{position:relative;z-index:3}
.dgame{max-width:1000px;margin:-132px auto 0;will-change:opacity,transform}
.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dcol{opacity:0;transform:translate3d(0,56px,0)}
.dcol.in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d),transform .9s cubic-bezier(.16,.84,.24,1) var(--d)}
.dcard{position:relative;height:100%;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 24px 20px;text-align:left;box-shadow:0 24px 64px rgba(11,18,32,.18);transition:transform .35s var(--ease);will-change:transform;cursor:text}
.dcard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 4px rgba(var(--blue-rgb),.16),0 28px 70px rgba(var(--blue-rgb),.32);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.dcard:focus-within{transform:translate3d(0,-4px,0)}
.dcard:focus-within::before{opacity:1}
.dn{font-size:22px;font-weight:800}
.dh,.da{color:var(--ink2);font-size:15px;line-height:1.5}
.dh{margin-top:10px}
.dh b,.da b{color:var(--ink);font-weight:700}
.df{display:flex;align-items:center;gap:6px;margin-top:20px;height:60px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);transition:border-color .2s,background-color .2s}
.dcard:focus-within .df{border-color:var(--blue);background:#fff}
.df .dr{font-size:24px;font-weight:700;color:var(--mute)}
.df input{flex:1;min-width:0;width:100%;height:100%;border:0;padding:0;background:none;font:inherit;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.df input::placeholder{font-size:17px;font-weight:500;letter-spacing:0;color:#94A3B8}
.df input.gone{color:transparent}
.du{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--mute);cursor:text}
.dall{margin-top:26px;text-align:center;color:var(--ink2);font-size:15.5px}
/* Submit: asleep until the three fields hold a number, then it wakes — a spring and a ring going out */
.dgo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.dsend{position:relative;min-width:200px}
.dsend .bi{display:none;width:20px;height:20px}
.dsend.busy .bi{display:inline-grid;place-items:center}
.dsend.busy .bi .ic{width:20px;height:20px;animation:spin 1s linear infinite}
.dsend .b-play,.dec[data-mode=visit] .dsend .b-sub{display:none}
.dec[data-mode=visit] .dsend .b-play{display:inline}
.dsend:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none;background:var(--blue2)}
.dsend::after{content:"";position:absolute;inset:-6px;border-radius:17px;box-shadow:0 0 0 2px rgba(var(--blue-rgb),.55);opacity:0;pointer-events:none}
.dsend.wake{animation:dWake .62s cubic-bezier(.34,1.56,.64,1)}
.dsend.wake::after{animation:dHalo .9s var(--ease)}
@keyframes dWake{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:none}}
@keyframes dHalo{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.14)}}
.dfold{max-width:760px;margin:60px auto 0}
.dfold .a p{margin:0;line-height:1.65}
/* sealed: the envelope under the headline — white paper, a sapphire stroke drawn round it and its flap, the mark at the
   flap's point, the three numbers on its face; the line, then the share line */
.dec.sealed .dhero{padding-bottom:96px}
.dec.sealed section.dbody{padding-top:48px}
.dec.sealed .dfold{margin-top:0}
.dseal{margin:40px auto 0;max-width:600px;outline:none}
.env{position:relative;width:min(340px,100%);aspect-ratio:240/170;margin:0 auto}
.env::before{content:"";position:absolute;inset:1%;border-radius:7%/10%;box-shadow:0 26px 60px rgba(4,9,20,.42);opacity:0}
.env svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.env .ep{fill:#fff;opacity:0}
.env .es{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 101;stroke-dashoffset:100}
.env .eseal{position:absolute;left:50%;top:50.6%;width:15%;height:auto;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;opacity:0;transform:scale(.4) rotate(-14deg)}
.envn{position:absolute;left:7%;right:7%;bottom:8%;display:flex;justify-content:space-around;gap:6px}
.envn span{display:flex;flex-direction:column;align-items:center;min-width:0;opacity:0}
.envn small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1.4}
.envn b{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.env.draw::before,.env.draw .ep{animation:dFade .45s var(--ease) forwards}
.env.draw .es{animation:draw .6s var(--ease) .18s forwards}
.env.draw .ef{animation-duration:.5s;animation-delay:.28s}
.env.draw .eseal{animation:dStamp .5s cubic-bezier(.34,1.56,.64,1) .78s forwards}
.env.draw .envn span{animation:rise .45s var(--ease) .46s both}
.env.draw .envn span:nth-child(2){animation-delay:.53s}.env.draw .envn span:nth-child(3){animation-delay:.6s}
.env.catch .envn span{animation:none;transition:opacity .18s}
.env.done::before,.env.done .ep,.env.done .envn span,.env.done .eseal{opacity:1;transform:none;animation:none}
.env.done .es{stroke-dashoffset:0;animation:none}
@keyframes dFade{to{opacity:1}}
@keyframes dStamp{0%{opacity:0;transform:scale(.4) rotate(-14deg)}60%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:none}}
.env.ghost{position:absolute;z-index:45;margin:0;pointer-events:none;will-change:transform}
.dfly{position:absolute;z-index:46;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);white-space:nowrap;pointer-events:none;will-change:transform,opacity;font-variant-numeric:tabular-nums}
.dseal.pre .env{opacity:0}
.dsl{margin-top:28px;font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em;color:#fff}
.dshare{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px}
.dshare p{color:#CBD5E1;font-size:16.5px;line-height:1.5}
.dshare p b{color:#fff;font-weight:700}
.dwa{background:#fff;color:var(--ink)}.dwa:hover{background:#F1F5F9;box-shadow:0 10px 24px rgba(4,9,20,.35)}
.dseal .dsl,.dseal .dshare{opacity:0}
.dseal.in .dsl{animation:rise .6s var(--ease) var(--w,1s) both}
.dseal.in .dshare{animation:rise .6s var(--ease) calc(var(--w,1s) + .18s) both}
/* phones: the cards stack, the envelope and the share line fit, the spotlight is off, nothing needs a hover */
@media (max-width:860px){.dcards{grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto;gap:14px}.dsend{width:100%;max-width:460px}}
@media (max-width:640px){
  .dhero{padding:56px 0 132px}.dword{font-size:clamp(52px,17vw,88px)}.dlines{margin-top:18px;font-size:16.5px}.dhead{margin-top:22px;font-size:clamp(28px,8.4vw,38px)}
  .dgame{margin-top:-100px}.dcard{padding:20px 20px 18px}.df{height:56px}
  .dec.sealed .dhero{padding-bottom:64px}.dseal{margin-top:30px}.env{width:min(320px,100%)}
  .dshare{flex-direction:column;gap:12px}.dshare .dwa{width:100%;max-width:340px}
}
@media (max-width:380px){.envn b{font-size:17px}.envn small{font-size:10px}}
@media (prefers-reduced-motion:reduce){
  .dword .dlt span,.dlines,.dhead,.dstore,.dsend.wake,.dsend.wake::after,.env.draw::before,.env.draw .ep,.env.draw .es,.env.draw .eseal,.env.draw .envn span,.dseal.in .dsl,.dseal.in .dshare,.dsend.busy .bi .ic{animation:none}
  .dau .a1,.dau .a2,.dau .a3,.dau .a4{animation:none}
  .dcol{opacity:1;transform:none;transition:none}
  .dcard,.dcard::before,.dau i,.dspot,.df{transition:none}
  .dcard:focus-within{transform:none}
  .env::before,.env .ep,.env .envn span,.env .eseal,.dseal .dsl,.dseal .dshare{opacity:1;transform:none}
  .env .es{stroke-dashoffset:0}
}

/* v4.18 — the two ways to reach the team: two big cards at the top of the help centre, each one door; the WhatsApp
   card on the contact page; the footer clears the Ask Zeya pill */
.cways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 8px;max-width:860px}
.cways.one{grid-template-columns:1fr}
.cway{border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;display:flex;gap:16px;background:var(--card);color:var(--ink);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.cway:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.cway .ico{width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--blue2);display:grid;place-items:center;flex:none}
.cway .ico.wa{background:#E7F8EE;color:#25D366}
.cway .ico .ic{width:24px;height:24px}
.cway .cwb{display:flex;flex-direction:column;gap:6px;min-width:0}
.cway b{font-size:18px;color:var(--ink);letter-spacing:-.2px}
.cway small{color:var(--ink2);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.cway .cwgo{margin-top:6px;font-weight:600;color:var(--blue2);font-size:15px;display:inline-flex;align-items:center;gap:6px}
.cway .cwgo .arr{display:inline-block;transition:transform .25s var(--ease)}
.cway:hover .cwgo .arr{transform:translateX(4px)}
.page .head .hsearch{margin-top:20px}
@media (max-width:640px){.cways{grid-template-columns:1fr;gap:10px}.cway{padding:16px}.cway .ico{width:42px;height:42px}.cway b{font-size:16.5px}}
.feat .ico.wa{background:rgba(37,211,102,.16);color:#5EE09A}
.feat .wanum{font-weight:600;font-size:16px;margin:-2px 0 8px}.cbody .feat .wanum a{color:var(--ink)}
.feat .warow{padding-top:14px}
footer{padding-bottom:96px}
@media (max-width:640px){footer{padding-bottom:104px}}
.band .fine a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* v4.20 — the help centre in two parts: Contact us first, then the pages; a lone page in a group takes the whole row */
.hpage .head.hhelp{margin-top:64px;padding-top:48px;border-top:1px solid var(--line2)}
.hpage .h1{font-size:clamp(38px,6vw,68px);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.hpage .cways{margin-top:26px}
.hlist > .hitem:only-child{grid-column:1 / -1}
@media (max-width:640px){.hpage .head.hhelp{margin-top:44px;padding-top:36px}}