/* AlphaTag website. The tag is shown the way a fine object is shown: on a quiet, cool platinum ground,
   lit from above, with plenty of room around it. Obsidian type, set large and light. The logo's blue is
   kept for links and the few things that should catch the eye. Amber and red only ever mean an emergency.
   One typeface, Plus Jakarta Sans: light at display sizes, medium for labels. Indian scripts use the
   phone's Noto fonts. Shapes echo the tag: rounded rectangles with a punched hole. */
@font-face{font-family:"AT Sans";src:url(/static/fonts/sans.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
:root{
  --ink:#f4f5f7;--char:#ebedf0;--panel:#ffffff;--panel2:#f1f2f5;--line:#e2e4e9;--line2:#cdd1d8;
  --text:#0b0c0f;--graphite:#3b4049;--muted:#646a74;--blue:#006bfc;--blue2:#006bfc;--blue3:#0052c4;--wash:#eef4ff;--navy:#04214f;--glow:rgba(0,107,252,.28);
  --amber:#ffb020;--red:#d92d20;--green:#0b7a3e;--coal:#0b0c0f;--coal2:#17191e;--onCoal:#f2f3f5;--onCoal2:rgba(242,243,245,.62);--coalLine:rgba(255,255,255,.11);
  --silver:linear-gradient(135deg,#fdfdfe 0%,#d9dde3 38%,#f6f7f9 55%,#c3c8d0 100%);
  --noto:"Noto Sans","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Gujarati","Noto Sans Gurmukhi","Noto Sans Oriya","Noto Nastaliq Urdu";
  --display:"AT Sans",system-ui,-apple-system,"Segoe UI",Roboto,var(--noto),sans-serif;
  --body:"AT Sans",system-ui,-apple-system,"Segoe UI",Roboto,var(--noto),sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(20px,4.6vw,64px);--sec:clamp(96px,11vw,168px);
  --r:18px;--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.4,.5,1);
  --lift:0 1px 1px rgba(11,12,15,.04),0 24px 48px -32px rgba(11,12,15,.22);
  --float:0 2px 2px rgba(11,12,15,.04),0 50px 90px -48px rgba(11,12,15,.42);color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
::selection{background:var(--text);color:#fff}
a{color:var(--blue);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:10px}
.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;color:var(--text)}
h1{font-size:clamp(44px,6.6vw,100px);font-weight:300;line-height:1;letter-spacing:-.045em}
h2{font-size:clamp(34px,4.6vw,66px);font-weight:300;line-height:1.04;letter-spacing:-.04em}
h3{font-size:19px;font-weight:550;line-height:1.3;letter-spacing:-.012em}
:lang(hi) :is(h1,h2,h3),:lang(bn) :is(h1,h2,h3),:lang(mr) :is(h1,h2,h3),:lang(ta) :is(h1,h2,h3),:lang(te) :is(h1,h2,h3),:lang(kn) :is(h1,h2,h3),:lang(ml) :is(h1,h2,h3),:lang(gu) :is(h1,h2,h3),:lang(pa) :is(h1,h2,h3),:lang(or) :is(h1,h2,h3),:lang(as) :is(h1,h2,h3),:lang(ur) :is(h1,h2,h3){line-height:1.3;letter-spacing:0}
:lang(hi) :is(h1,h2),:lang(bn) :is(h1,h2),:lang(mr) :is(h1,h2),:lang(ta) :is(h1,h2),:lang(te) :is(h1,h2),:lang(kn) :is(h1,h2),:lang(ml) :is(h1,h2),:lang(gu) :is(h1,h2),:lang(pa) :is(h1,h2),:lang(or) :is(h1,h2),:lang(as) :is(h1,h2),:lang(ur) :is(h1,h2){font-weight:500}
:lang(ta) h1,:lang(ml) h1,:lang(te) h1,:lang(kn) h1{font-size:clamp(34px,5vw,68px)}
p{margin:0;color:var(--muted)}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:40ch;line-height:1.6;color:var(--graphite);font-weight:400}
/* a small sentence-case label with a punched-hole mark, used only where a section needs naming */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 14px/1.2 var(--body);letter-spacing:.02em;color:var(--graphite)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--wash)}
.head{display:grid;gap:18px}
.fine{font-size:14.5px;color:var(--muted)}
section{position:relative}main{overflow-x:clip}
.progress{display:none}

/* header: glass over the platinum ground */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(244,245,247,.72);backdrop-filter:saturate(1.4) blur(20px);-webkit-backdrop-filter:saturate(1.4) blur(20px);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
.js.scrolled header.top{border-bottom-color:var(--line);background:rgba(255,255,255,.8)}
header.top .wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:10px;flex:none}
.logo .logomark{height:28px;width:auto;transition:transform .8s var(--spring)}.logo .logoword{height:21px;width:auto}
.logo:hover .logomark{transform:rotate(-10deg)}
@media(max-width:420px){.logo .logoword{height:18px}.logo .logomark{height:24px}}
nav.links{display:flex;gap:2px;margin-inline-start:auto}
nav.links a{position:relative;padding:8px 14px;color:var(--graphite);font-weight:500;font-size:14.5px;letter-spacing:.005em;transition:color .3s}
nav.links a::after{content:"";position:absolute;inset-inline:14px;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
nav.links a:hover{color:var(--text)}nav.links a:hover::after,nav.links a.on::after{transform:none}nav.links a.on{color:var(--text)}
.tools{display:flex;align-items:center;gap:8px}
@media(max-width:860px){nav.links{display:none}.tools{margin-inline-start:auto}}
@media(max-width:440px){details.lang summary .ln{display:none}.top .wrap{gap:10px}}

/* buttons: rounded like the tag, never a bare pill. Obsidian for the main action, a hairline for the rest. */
.btn{--b:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:14px;background:var(--b);color:var(--text);font:550 15.5px/1.15 var(--body);letter-spacing:.005em;border:1px solid var(--line2);cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),box-shadow .4s var(--ease),background .3s,border-color .3s,color .3s}
.btn:hover{border-color:var(--text)}.btn:active{transform:scale(.98)}
.btn.primary{--b:var(--text);border-color:var(--text);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 18px 34px -20px rgba(11,12,15,.7)}
.btn.primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn.primary:hover{border-color:var(--blue);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 22px 40px -20px rgba(0,82,196,.75)}.btn.primary:hover::before{transform:none}
.btn.ghost{background:transparent}
.btn.small{min-height:42px;padding:0 18px;font-size:14.5px;border-radius:12px}
.btn.off{color:var(--muted);cursor:default;opacity:.65}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* language menu + bar */
details.lang{position:relative}
details.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:42px;padding:0 13px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--graphite);font-size:14.5px;font-weight:500;transition:border-color .3s}
details.lang summary:hover{border-color:var(--text)}
details.lang summary::-webkit-details-marker{display:none}
details.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 10px);margin:0;padding:8px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:270px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--float);animation:pop .35s var(--ease)}
details.lang li a{display:block;padding:9px 12px;border-radius:10px;color:var(--text)}details.lang li a:hover{background:var(--panel2)}details.lang li a.on{background:var(--text);color:#fff}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--text);color:#fff;font-weight:600;transition:top .2s}.skip:focus{top:12px}
main:focus{outline:none}
.langbar{position:relative;z-index:1;background:transparent;border-bottom:1px solid var(--line)}
.langbar .wrap{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding-block:10px;font-size:14px}.langbar span{color:var(--muted)}
.langbar a{color:var(--graphite);font-weight:500;transition:color .3s}.langbar a:hover{color:var(--text)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* header menu on phones */
details.menu{display:none;position:relative}
details.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);display:grid;place-content:center;gap:5px;background:transparent}
details.menu summary::-webkit-details-marker{display:none}
details.menu summary span{display:block;width:18px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .4s var(--ease),opacity .2s}
details.menu summary span:nth-child(2){width:12px;justify-self:end}
details.menu[open] summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}details.menu[open] summary span:nth-child(2){opacity:0}details.menu[open] summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
details.menu nav{position:absolute;inset-inline-end:0;top:54px;display:grid;min-width:250px;padding:10px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--float);animation:pop .35s var(--ease)}
details.menu nav a{padding:13px 14px;border-radius:12px;color:var(--text);font-weight:500}details.menu nav a:hover{background:var(--panel2)}
details.menu nav .btn{margin-top:8px;color:#fff}
@media(max-width:860px){details.menu{display:block}}
@media(max-width:560px){.tools>.btn.small{display:none}}
.login{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 12px;border-radius:12px;font-weight:500;font-size:14.5px;color:var(--graphite);transition:color .3s}.login:hover,.login[aria-current]{color:var(--text)}
.login svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(max-width:1060px){.login span{display:none}}@media(max-width:560px){.login{display:none}}

/* headline entrance: words rise out of their line, once */
.w{display:inline-block}
.js .split .w{opacity:0;transform:translateY(.6em);animation:word 1.2s var(--ease) forwards;animation-delay:calc(var(--i)*60ms + 80ms)}
@keyframes word{to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- the hero ---------- */
.hero{display:grid;gap:28px;align-items:center;padding-block:40px 24px;overflow-y:clip}
@media(min-width:960px){.hero{grid-template-columns:1.08fr .92fr;gap:40px;min-height:min(760px,calc(100svh - 68px));padding-block:40px}}
.hero .copy{display:grid;gap:24px;min-width:0;align-content:center}
.hero h1{max-width:13ch}
:lang(hi) .hero h1,:lang(bn) .hero h1,:lang(mr) .hero h1,:lang(ta) .hero h1,:lang(te) .hero h1,:lang(kn) .hero h1,:lang(ml) .hero h1,:lang(gu) .hero h1,:lang(pa) .hero h1,:lang(or) .hero h1,:lang(as) .hero h1,:lang(ur) .hero h1{max-width:16ch}
.hero .actions{margin-top:6px}

/* the physical tag (also on the product pages and in the scroll story) */
.stage{position:relative;width:100%;justify-self:center}
.tag{position:absolute;inset:9% 18%;border-radius:30px;background:linear-gradient(165deg,#fff 30%,#f1f5fb);border:1.5px solid #cfd9e6;
  box-shadow:0 1px 0 #fff inset,0 -3px 0 rgba(13,17,23,.05) inset,0 40px 70px -36px rgba(4,33,79,.55),0 12px 24px -16px rgba(13,17,23,.35);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .6s var(--ease)}
.tag::after{content:"";position:absolute;inset-inline:0;bottom:0;height:13%;border-radius:0 0 28px 28px;background:var(--blue)}
.tag .hole{position:absolute;top:4.5%;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--ink);box-shadow:inset 0 2px 3px rgba(13,17,23,.25),0 0 0 4px #e3e9f1}
.tag .qr{position:absolute;inset:15% 13% 34%;border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden;padding:4%}
.tag .qr svg{width:100%;height:100%;display:block}
.tag .beam{position:absolute;inset-inline:0;height:30%;top:-32%;background:linear-gradient(180deg,transparent,rgba(0,107,252,.28) 75%,var(--blue));mix-blend-mode:multiply;opacity:0}
.tag .tagword{position:absolute;bottom:18%;left:22%;width:56%;height:auto}
.ping{display:none}

.scene{aspect-ratio:1/1.02;max-width:560px;perspective:1200px}
.scene .hang{position:absolute;top:0;inset-inline-start:0;width:44%;transform-origin:50% 0;z-index:1}
.scene .cord{display:none}.scene .hang .tag .hole::after{content:"";position:absolute;bottom:50%;left:50%;width:2px;height:900px;margin-left:-1px;background:linear-gradient(transparent,#8b97a8 40%,#6f7c90)}
.scene .hang .tag{position:relative;inset:auto;margin-top:16%;aspect-ratio:.76}

.hphone{position:absolute;inset-inline-end:2%;top:4%;width:50%;aspect-ratio:9/17.4;border-radius:42px;padding:9px;background:linear-gradient(150deg,#2a313c,#0d1117 60%);box-shadow:0 0 0 1.5px #3a4350 inset,0 60px 90px -40px rgba(4,33,79,.6),0 24px 40px -24px rgba(13,17,23,.5);z-index:2}
.hphone::before{content:"";position:absolute;top:17px;left:50%;width:30%;height:20px;margin-left:-15%;border-radius:12px;background:#05070a;z-index:3}
.hscreen{position:relative;height:100%;border-radius:34px;background:#fff;overflow:hidden;padding:46px 14px 14px;display:flex;flex-direction:column;gap:12px}
.hs-top{display:grid;gap:8px;justify-items:start}.hs-top img{width:34px;height:auto}
.hs-top b{font:650 clamp(14px,1.45vw,17px)/1.2 var(--display);letter-spacing:-.01em;color:var(--text)}
.hs-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.hs-opts .o{display:flex;align-items:center;min-height:50px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);font-size:12.5px;font-weight:650;line-height:1.2;color:var(--text);transition:background .25s,color .25s,border-color .25s}
.hs-opts .o.red{background:#fff1ef;border-color:#f7c6c0;color:#a8180d}
.hs-call{display:flex;align-items:center;justify-content:center;min-height:42px;padding:6px 10px;border-radius:12px;background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;text-align:center;line-height:1.2}
.hs-fine{font-size:11.5px;line-height:1.35;text-align:center}
.hs-sent{position:absolute;inset-inline:12px;bottom:14px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#e7f7ee;color:#0b5e30;font-size:12.5px;font-weight:650;line-height:1.25;opacity:0;transform:translateY(12px)}
.hs-sent i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-style:normal;font-size:12px}
.tap{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(0,107,252,.35);top:0;left:0;opacity:0;pointer-events:none}
.notif{position:absolute;bottom:12%;inset-inline-start:6%;z-index:4;display:flex;align-items:center;gap:11px;width:min(300px,64%);padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(4,33,79,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(-14px) scale(.96)}
.notif i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#25d366}.notif i img{width:66%;height:auto;filter:brightness(0) invert(1)}
.notif span{display:grid;min-width:0;flex:1;line-height:1.25}.notif b{font-size:14px}.notif small{font-size:13.5px;color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif time{align-self:start;font-size:12px;color:var(--muted)}
/* without the script, or with reduced motion: the finished moment, standing still */
html:not(.js) .hs-opts .o1,.still .hs-opts .o1{background:var(--blue);border-color:var(--blue);color:#fff}
html:not(.js) .hs-sent,html:not(.js) .notif{opacity:1;transform:none}
/* the moment: drop, swing, scan, tap, sent, the owner's phone lights up; the last four repeat */
.js .scene .hang{animation:hang 2.2s var(--ease) both,sway 7s 2.2s ease-in-out infinite}
.js .scene .hphone{animation:phonein 1s .7s var(--ease) both}
.js .scene .beam{animation:beam 9s 1.6s infinite}
.js .scene .o1{animation:pick 9s 1.6s infinite}
.js .scene .tap{animation:tap 9s 1.6s infinite}
.js .scene .hs-sent{animation:sent 9s 1.6s infinite}
.js .scene .notif{animation:notif 9s 1.6s infinite}
@keyframes hang{0%{transform:translateY(-70%) rotate(-14deg);opacity:0}25%{opacity:1}45%{transform:translateY(0) rotate(9deg)}62%{transform:rotate(-5deg)}78%{transform:rotate(2.5deg)}100%{transform:rotate(0)}}
@keyframes sway{0%,100%{transform:rotate(0)}35%{transform:rotate(2.2deg)}70%{transform:rotate(-1.6deg)}}
@keyframes phonein{from{opacity:0;transform:translateY(60px) rotate(8deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes beam{0%{transform:none;opacity:0}2%{opacity:1}14%{transform:translateY(440%);opacity:1}15%,100%{transform:translateY(440%);opacity:0}}
@keyframes pick{0%,17%{background:var(--panel2);border-color:var(--line);color:var(--text)}20%,74%{background:var(--blue);border-color:var(--blue);color:#fff}80%,100%{background:var(--panel2);border-color:var(--line);color:var(--text)}}
@keyframes tap{0%,15%{opacity:0;transform:translate(var(--tx,30px),var(--ty,150px)) scale(.2)}17%{opacity:1}24%,100%{opacity:0;transform:translate(var(--tx,30px),var(--ty,150px)) scale(1.8)}}
@keyframes sent{0%,24%{opacity:0;transform:translateY(12px)}28%,74%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(12px)}}
@keyframes notif{0%,30%{opacity:0;transform:translateY(-14px) scale(.96)}34%,76%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-8px) scale(.98)}}
@media(max-width:959px){.scene{max-width:440px;margin-top:8px}.notif{bottom:10%;inset-inline-start:0}.scene .hang .tag .hole::after{height:120px;background:linear-gradient(transparent,#8b97a8)}}
@media(max-width:480px){.scene{max-width:360px}.hscreen{padding:36px 10px 10px;gap:8px;border-radius:28px}.hphone{border-radius:34px;padding:7px}.hphone::before{top:13px;height:16px}.hs-opts .o{min-height:40px;font-size:11px;padding:6px 8px;border-radius:10px}.hs-call{min-height:34px;font-size:11px}.hs-fine{font-size:10px}.hs-top img{width:26px}.hs-top b{font-size:12.5px}.hs-sent{font-size:11px;padding:8px}.notif{padding:9px 11px;gap:9px;border-radius:16px}.notif i{width:32px;height:32px}.notif b{font-size:13px}.notif small{font-size:12.5px}.tag .hole{width:14px;height:14px;margin-left:-7px}}

/* the four promises under the hero */
.proof{padding-block:8px 56px}
.proof .chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.proof .chips li{display:flex;align-items:center;gap:12px;padding:20px 18px;background:none;border-radius:0;font-weight:600;font-size:15.5px;line-height:1.35;color:var(--text)}
.proof .chips li+li{border-inline-start:1px solid var(--line)}
.proof .chips li{position:relative}.proof .chips li::before{content:"";flex:none;width:26px;height:26px;border-radius:8px;background:var(--wash)}.proof .chips li::after{content:"";position:absolute;inset-inline-start:27px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid var(--blue);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@media(max-width:860px){.proof .chips{grid-template-columns:1fr 1fr}.proof .chips li:nth-child(3){border-inline-start:0}.proof .chips li:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:420px){.proof .chips li{padding:16px 10px;font-size:14px;gap:9px}.proof .chips li::after{inset-inline-start:19px}}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border-radius:10px;background:var(--wash);color:var(--blue3);font-weight:600;font-size:14px}

/* language marquee */
.marquee{padding-block:30px 26px;background:var(--panel);border-block:1px solid var(--line);overflow:hidden;position:relative;z-index:1}
.marquee .row{display:flex;gap:44px;width:max-content;animation:marquee 46s linear infinite;font:700 clamp(30px,4.6vw,58px)/1.2 var(--display);white-space:nowrap;letter-spacing:-.01em}
.marquee .row+.row{margin-top:4px;animation-direction:reverse;animation-duration:54s}
.marquee .row span{color:#c3ccd8}
.marquee .row span.hl{color:var(--text)}
.marquee p{text-align:center;margin-top:18px;font-weight:550}
@keyframes marquee{to{transform:translateX(-50%)}}
[dir=rtl] .marquee .row{animation-name:marquee-rtl}@keyframes marquee-rtl{to{transform:translateX(50%)}}

/* scroll story: the tag turns and help arrives, step by step */
.story-scroll{position:relative;height:340vh;background:linear-gradient(var(--ink),#e9eff8 30%,#e9eff8 70%,var(--ink))}
.story-scroll .sticky{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden}
.sgrid{display:grid;gap:28px;align-items:center}
@media(min-width:960px){.sgrid{grid-template-columns:1fr 1fr;gap:64px}}
.scopy{display:grid;gap:18px;min-width:0}
.sstages{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;counter-reset:st}
.sstages li{counter-increment:st;position:relative;padding:16px 18px 16px 62px;border-radius:18px;border:1px solid transparent;opacity:.45;transition:opacity .5s var(--ease),background .5s,border-color .5s,box-shadow .5s}
.sstages li::before{content:counter(st);position:absolute;inset-inline-start:16px;top:15px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:700 15px/1 var(--display);background:#dfe6f0;color:var(--muted);transition:background .4s,color .4s}
[dir=rtl] .sstages li{padding:16px 62px 16px 18px}
.sstages li b{display:block;font:650 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--text)}.sstages li p{font-size:15.5px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.story-scroll[data-stage="0"] li[data-s="0"],.story-scroll[data-stage="1"] li[data-s="1"],.story-scroll[data-stage="2"] li[data-s="2"],.story-scroll[data-stage="3"] li[data-s="3"]{opacity:1;background:var(--panel);border-color:var(--line);box-shadow:0 24px 50px -36px rgba(4,33,79,.5)}
.story-scroll[data-stage="0"] li[data-s="0"]::before,.story-scroll[data-stage="1"] li[data-s="1"]::before,.story-scroll[data-stage="2"] li[data-s="2"]::before,.story-scroll[data-stage="3"] li[data-s="3"]::before{background:var(--blue);color:#fff}
.story-scroll[data-stage="3"] li[data-s="3"]::before{background:var(--red)}
.story-scroll[data-stage="0"] li[data-s="0"] p,.story-scroll[data-stage="1"] li[data-s="1"] p,.story-scroll[data-stage="2"] li[data-s="2"] p,.story-scroll[data-stage="3"] li[data-s="3"] p{max-height:120px;margin-top:4px}
.sviz{position:relative;aspect-ratio:1;width:min(470px,100%);justify-self:center;display:grid;place-items:center;perspective:1200px}
.sviz .orbit{position:absolute;inset:4%;border-radius:50%;border:1.5px dashed rgba(0,107,252,.22);animation:spin 40s linear infinite}.sviz .orbit.o2{inset:18%;animation-duration:28s;animation-direction:reverse;border-style:solid;border-color:rgba(0,107,252,.1);background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.stag{position:relative;width:62%;aspect-ratio:1/1.05;transform-style:preserve-3d;transform:rotateY(calc(var(--s,0) * 56deg - 28deg)) rotateX(calc(10deg - var(--s,0) * 20deg)) rotateZ(calc(var(--s,0) * 8deg - 4deg)) scale(calc(.92 + var(--s,0) * .16));transition:transform .1s linear}
.stag .beam{opacity:1;animation:beam2 2.8s var(--ease) infinite}@keyframes beam2{0%{transform:none}55%,100%{transform:translateY(440%)}}
.sbubble{position:absolute;display:flex;width:max-content;max-width:78%;white-space:nowrap;z-index:2;align-items:center;gap:10px;padding:11px 16px 11px 11px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(4,33,79,.45);font-size:14.5px;font-weight:650;opacity:0;transform:translateY(16px) scale(.92);transition:opacity .5s var(--ease),transform .5s var(--spring)}
.sbubble i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--wash);color:var(--blue);font-style:normal}
.sbubble.ok i{background:#d9fdd3;color:#008069}.sbubble.red i{background:var(--red);color:#fff}
.sbubble.b0{top:8%;inset-inline-start:0}.sbubble.b1{top:30%;inset-inline-end:-2%}.sbubble.b2{bottom:24%;inset-inline-start:-2%;font-variant-numeric:tabular-nums;direction:ltr}.sbubble.b3{bottom:4%;inset-inline-end:4%}
.story-scroll[data-stage="0"] .b0,.story-scroll[data-stage="1"] .b0,.story-scroll[data-stage="1"] .b1,.story-scroll[data-stage="2"] .b0,.story-scroll[data-stage="2"] .b1,.story-scroll[data-stage="2"] .b2,.story-scroll[data-stage="3"] .sbubble{opacity:1;transform:none}
.srail{position:absolute;inset-inline:18%;bottom:-6%;height:4px;border-radius:4px;background:#d6dee9;overflow:hidden}.srail span{display:block;height:100%;width:calc(var(--s,0) * 100%);background:var(--blue);border-radius:4px}
@media(max-width:959px){.story-scroll .sticky{align-items:start;padding-top:76px}.sgrid{gap:10px}.sviz{order:-1;width:min(240px,62%)}.scopy h2{font-size:28px}.scopy{gap:10px}.scopy .eyebrow{display:none}.sstages{gap:4px;margin-top:2px}.sstages li{padding:9px 12px 9px 50px}.sstages li::before{top:9px;width:26px;height:26px;font-size:13px;inset-inline-start:12px}.sstages li b{font-size:16px}.sstages li p{font-size:14px}.sbubble{font-size:12px;padding:7px 10px 7px 7px}.sbubble i{width:22px;height:22px}.sbubble.b1{inset-inline-end:-10%}.sbubble.b2{inset-inline-start:-14%}.sbubble.b0{inset-inline-start:-10%}}
html:not(.js) .story-scroll{height:auto}html:not(.js) .story-scroll .sticky{position:static;height:auto;padding-block:72px}
html:not(.js) .sstages li{opacity:1}html:not(.js) .sstages li p{max-height:none}html:not(.js) .sbubble{opacity:1;transform:none}

/* how it works: sticky phone + steps (a real sequence, so numbered) */
.how{padding-block:110px}
.how .head{margin-bottom:44px}
.story{display:grid;gap:28px}
@media(min-width:960px){.story{grid-template-columns:.9fr 1.1fr;gap:72px}.story .phone-col{position:sticky;top:110px;align-self:start}}
.phone{position:relative;width:min(320px,100%);aspect-ratio:9/18.5;margin-inline:auto;border-radius:44px;padding:11px;background:linear-gradient(150deg,#2a313c,#0d1117 60%);box-shadow:0 0 0 1.5px #3a4350 inset,0 60px 100px -44px rgba(4,33,79,.55)}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#000;z-index:3}
.screen{position:absolute;inset:11px;border-radius:34px;background:#fff;overflow:hidden}
.view .bar{display:flex;align-items:center;gap:10px;padding:52px 16px 12px;background:#008069;font-weight:600;font-size:15px;color:#fff}
.view .bar i{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}.view .bar i img{width:76%;height:auto}
.view .bar small{display:block;color:rgba(255,255,255,.85);font-weight:400;font-size:12px}
.view{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.phone[data-step="1"] .v1,.phone[data-step="2"] .v2,.phone[data-step="3"] .v3{opacity:1;transform:none}
.chat{display:grid;align-content:start;gap:10px;padding:16px;background:#efeae2;min-height:100%}
.msg{max-width:84%;padding:8px 11px;border-radius:8px;font-size:13.5px;line-height:1.45;color:#111b21;background:#fff;border-top-left-radius:0;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.msg.me{justify-self:end;background:#d9fdd3;border-radius:8px;border-top-right-radius:0;font-variant-numeric:tabular-nums;letter-spacing:.04em}
[dir=rtl] .msg{border-top-left-radius:8px;border-top-right-radius:0}[dir=rtl] .msg.me{border-top-right-radius:8px;border-top-left-radius:0}
.phone[data-step="2"] .v2 .msg{animation:msg .5s var(--ease) both}.phone[data-step="2"] .v2 .msg:nth-child(2){animation-delay:.5s}.phone[data-step="2"] .v2 .msg:nth-child(3){animation-delay:1.1s}
@keyframes msg{from{opacity:0;transform:translateY(10px) scale(.96)}}
.cam{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#2a3342,#0c0f14 70%)}
.cam .frame{position:relative;width:62%;aspect-ratio:1}
.cam .frame::before,.cam .frame::after{content:"";position:absolute;inset:0;border:3px solid #3b9bff;border-radius:18px;clip-path:polygon(0 0,28% 0,28% 100%,0 100%,0 0,100% 0,100% 100%,72% 100%,72% 0)}
.cam .frame::after{animation:breathe 2.2s ease-in-out infinite}
.cam .frame svg{position:absolute;inset:14%;width:72%;height:72%;border-radius:8px;background:#fff}
.cam .line{position:absolute;inset-inline:10%;height:2px;background:var(--blue);box-shadow:0 0 16px 3px var(--glow);animation:camscan 2.2s ease-in-out infinite}
@keyframes camscan{0%,100%{top:18%}50%{top:80%}}@keyframes breathe{50%{transform:scale(1.05);opacity:.6}}
.alertcard{margin:16px;padding:16px;border-radius:18px;background:var(--panel2);border:1px solid var(--line);display:grid;gap:8px;animation:msg .6s var(--ease) both}
.alertcard b{font-size:17px}.alertcard.call{animation-delay:.6s;background:var(--wash);border-color:rgba(0,107,252,.3)}
.alertcard .dots{display:flex;gap:5px}.alertcard .dots span{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:dot 1.2s infinite}.alertcard .dots span:nth-child(2){animation-delay:.2s}.alertcard .dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:.25;transform:translateY(-3px)}}
.steps{display:grid;gap:0;counter-reset:s;border-inline-start:2px solid var(--line)}
.step{counter-increment:s;position:relative;padding:28px 0 28px 44px;display:grid;gap:12px;transition:opacity .4s}
[dir=rtl] .step{padding:28px 44px 28px 0}
.step::before{content:counter(s);position:absolute;inset-inline-start:-21px;top:26px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 18px/1 var(--display);background:var(--panel);border:2px solid var(--line);color:var(--muted);transition:background .4s,color .4s,border-color .4s}
.step.on::before{background:var(--blue);border-color:var(--blue);color:#fff}
@media(min-width:960px){.step{min-height:44vh;align-content:center}.step::before{top:auto}.step .mini{display:none}.js .step:not(.on){opacity:.42}}
.step h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em}.step p{max-width:42ch;font-size:17.5px}
.step .mini{margin-top:8px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff;min-height:220px;position:relative}
.step .mini .view{position:relative;opacity:1;transform:none;inset:auto}.mini .view .bar{padding-top:12px}
.step .mini .cam{position:relative;height:220px}
@media(max-width:959px){.phone-col{display:none}}

/* masked number */
.mask{padding-block:40px 110px;text-align:center;display:grid;gap:26px;justify-items:center}
.mask h2{max-width:20ch}
.number{font:700 clamp(36px,8.4vw,112px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.mask .pair{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--graphite);font-size:14.5px;font-weight:600}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.15)}

/* product cards: the car leads, the child and the school follow */
.cards{padding-block:100px;display:grid;gap:36px}
.cardgrid{display:grid;gap:16px}
@media(min-width:900px){.cardgrid{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}.cardgrid .card:first-child{grid-row:span 2}}
.card{position:relative;overflow:hidden;display:grid;gap:12px;align-content:start;padding:28px;border-radius:28px;border:1px solid var(--line);background:var(--panel);color:var(--text);isolation:isolate;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.card .ico{width:100%;max-width:180px;height:auto;aspect-ratio:120/84;padding:14px;border-radius:20px;background:var(--wash);box-sizing:border-box}
.cardgrid .card:first-child .ico{max-width:none;padding:clamp(24px,6vw,64px);aspect-ratio:16/10}
.cardgrid .card:first-child h3{font-size:clamp(26px,2.8vw,36px)}
.card h3{font-size:24px;letter-spacing:-.02em}
.card:hover{transform:translateY(-4px);border-color:rgba(0,107,252,.45);box-shadow:0 34px 60px -40px rgba(4,33,79,.5)}
.card .go{margin-top:4px;font-weight:650;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
.card .go::after{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;transition:width .3s var(--ease)}.card:hover .go::after{width:36px}
.contact .card{cursor:default}

/* features: four topics, each a ruled list */
.features{padding-block:100px;display:grid;gap:36px}
.features .head .lead{max-width:56ch}
.tabs{display:grid;gap:26px}.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tablist{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:18px;background:var(--panel);border:1px solid var(--line);width:fit-content;max-width:100%}
.tablist label{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:13px;cursor:pointer;font-weight:650;color:var(--graphite);transition:color .25s,background .25s}
.tablist label:hover{background:var(--panel2)}
@media(max-width:600px){.tablist{display:grid;grid-template-columns:1fr 1fr;width:100%}.tablist label{padding:11px 10px;font-size:14.5px}}
.tablist label i{font-style:normal}
.ft-car:checked~.tablist .tl-car,.ft-child:checked~.tablist .tl-child,.ft-family:checked~.tablist .tl-family,.ft-privacy:checked~.tablist .tl-privacy{background:var(--text);color:#fff}
.tabs>input:focus-visible~.tablist{outline:2.5px solid var(--blue);outline-offset:3px}
.tabpill{display:none}
.panel{display:none;gap:0 40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--line)}
.ft-car:checked~.p-car,.ft-child:checked~.p-child,.ft-family:checked~.p-family,.ft-privacy:checked~.p-privacy{display:grid}
.fcard{position:relative;display:grid;gap:8px;align-content:start;padding:26px 0 28px;border-bottom:1px solid var(--line)}
.fcard h3{font-size:20px;display:flex;align-items:center;gap:12px}
.fcard h3::before{content:"";flex:none;width:12px;height:12px;border-radius:4px;background:var(--blue);box-shadow:0 0 0 5px var(--wash)}
.p-privacy .fcard h3::before{background:var(--text);box-shadow:0 0 0 5px #e3e8ef}
.fcard p{font-size:16px;padding-inline-start:24px}
.js .panel .fcard{animation:cardin .5s var(--ease) both}.panel .fcard[data-n="1"]{animation-delay:.04s}.panel .fcard[data-n="2"]{animation-delay:.08s}.panel .fcard[data-n="3"]{animation-delay:.12s}.panel .fcard[data-n="4"]{animation-delay:.16s}.panel .fcard[data-n="5"]{animation-delay:.2s}
@keyframes cardin{from{opacity:0;transform:translateY(12px)}}

/* price: a real price tag */
.price{padding-block:100px;display:grid;gap:48px;align-items:center}
@media(min-width:900px){.price{grid-template-columns:.85fr 1.15fr;gap:80px}}
.ptag{position:relative;justify-self:center;width:min(380px,100%);padding:76px 34px 40px;border-radius:40px;background:var(--panel);border:2px solid var(--text);display:grid;justify-items:center;gap:6px;text-align:center;transform:rotate(-4deg);box-shadow:14px 18px 0 -2px var(--blue)}
.js .ptag.in{animation:ptag 1.4s var(--ease) both}@keyframes ptag{0%{transform:rotate(-16deg) translateY(-30px);opacity:0}45%{transform:rotate(3deg);opacity:1}70%{transform:rotate(-6deg)}100%{transform:rotate(-4deg)}}
.phole{position:absolute;top:24px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--ink);border:2px solid var(--text)}
.ptag .brandmark.big{width:88px;margin-bottom:6px}
.price .big{font:700 clamp(84px,12vw,148px)/.9 var(--display);letter-spacing:-.05em;color:var(--text);font-variant-numeric:tabular-nums}
.price .then{font-size:16px;font-weight:600;color:var(--graphite);max-width:22ch}
.pside{display:grid;gap:20px;min-width:0;justify-items:start}
.pside .ticks{grid-template-columns:1fr 1fr;width:100%}
@media(max-width:560px){.pside .ticks{grid-template-columns:1fr}}

/* the logo mark, in two layers: the "a" draws in, the blue tag drops onto it and swings on its hole */
.brandmark{position:relative;width:100%;aspect-ratio:640/484}
.brandmark img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.brandmark .bt{transform-origin:67.63% 59.5%}
.brandmark .holeping{position:absolute;left:67.63%;top:59.5%;width:12%;aspect-ratio:1;border-radius:50%;border:2px solid var(--blue);translate:-50% -50%;opacity:0;pointer-events:none}
.js .in .brandmark .bt,.js dialog.sheet[open] .brandmark .bt{animation:drop 1.7s .3s both}
.brandmark.wiggle .bt{animation:wiggle 1.1s var(--ease)!important}
@keyframes drop{0%{transform:rotate(-55deg);opacity:0}30%{opacity:1;transform:rotate(30deg)}48%{transform:rotate(-18deg)}63%{transform:rotate(10deg)}76%{transform:rotate(-5deg)}88%{transform:rotate(2deg)}100%{transform:none}}
@keyframes wiggle{0%{transform:rotate(0)}20%{transform:rotate(22deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.chooser .brandmark.mini{width:60px;margin-bottom:-6px}

/* fee */
.fee{padding-block:0 100px;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.fee>div{display:grid;gap:12px;align-content:start;padding-top:26px;border-top:2px solid var(--text)}
.fee>div+div{border-top-color:var(--line2)}
.fee h2,.fee h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em}
.fee p{max-width:48ch}

/* FAQ */
.homefaq{padding-block:40px 80px;display:grid;gap:30px}
.faq{display:grid;max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 2px;font:600 19px/1.35 var(--display);letter-spacing:-.01em;transition:color .2s}
.faq summary:hover{color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:10px;background:linear-gradient(var(--blue),var(--blue)) center/14px 2.4px no-repeat,linear-gradient(var(--blue),var(--blue)) center/2.4px 14px no-repeat,var(--panel);border:1px solid var(--line);transition:transform .35s var(--spring),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 24px 2px;max-width:70ch;animation:msg .35s var(--ease)}

/* refer a friend and partner bands */
.refer{margin-block:24px 0;display:grid;gap:26px;align-items:center;padding:clamp(28px,4.5vw,52px);border-radius:32px;background:var(--wash);border:1px solid #cfe0fb;position:relative;overflow:hidden}
@media(min-width:900px){.refer{grid-template-columns:auto 1.5fr auto}}
.refer p,.partner p{max-width:52ch}.refer .pcopy,.partner .pcopy{display:grid;gap:12px}
.rgift{display:flex;gap:12px}.rgift span{display:grid;place-items:center;width:92px;aspect-ratio:.8;border-radius:22px;font:700 26px/1 var(--display);letter-spacing:-.02em;color:#fff;background:var(--blue);transform:rotate(-6deg);position:relative;box-shadow:0 18px 30px -18px rgba(0,80,192,.9)}
.rgift span::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--wash)}
.rgift span+span{background:var(--text);transform:rotate(5deg) translateY(10px)}
.js .refer.in .rgift span{animation:gift .9s var(--spring) both}.js .refer.in .rgift span+span{animation-delay:.15s}
@keyframes gift{0%{opacity:0;transform:scale(.4) rotate(-30deg)}100%{opacity:1}}
.partner{margin-block:24px 100px;display:grid;gap:26px;align-items:center;padding:clamp(28px,5vw,60px);border-radius:32px;color:#fff;background:radial-gradient(700px circle at 100% 0%,#2f8cff,transparent 60%),linear-gradient(135deg,#0050c0,#006bfc);overflow:hidden;position:relative}
@media(min-width:900px){.partner{grid-template-columns:1.4fr auto}}
.partner .eyebrow,.partner h2{color:#fff}.partner .eyebrow::before{background:radial-gradient(circle at 5px 6px,#0050c0 2px,transparent 2.6px),#fff}
.partner p{color:rgba(255,255,255,.88)}
.partner .btn.primary{--b:#fff;border-color:#fff;color:var(--blue3);box-shadow:none}.partner .btn.primary:hover{--b:#eaf2ff}
.partner .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}.partner .btn.ghost:hover{border-color:#fff}
.partner::after{content:"";position:absolute;width:280px;aspect-ratio:.78;inset-inline-end:-70px;bottom:-150px;border-radius:44px;border:2px solid rgba(255,255,255,.22);transform:rotate(-14deg)}
@media(max-width:1239px){.wrap.partner,.wrap.refer{margin-inline:16px}}


/* Everything is a WhatsApp away: a chat that plays out once it scrolls into view. */
.wa{display:grid;gap:44px;align-items:center;padding-block:110px}
@media(min-width:900px){.wa{grid-template-columns:1fr 1fr;gap:72px}}
.wa-copy{display:grid;gap:18px;min-width:0}.wa-copy h2{text-wrap:balance}.wa .lead{color:var(--muted)}
.wa .more{color:var(--text);font-weight:600;max-width:40ch;padding-inline-start:14px;border-inline-start:3px solid var(--blue)}
.wa-chat{--wa-green:#008069;--wa-bg:#efeae2;--wa-out:#d9fdd3;--wa-in:#fff;--wa-ink:#111b21;--wa-meta:#667781;--wa-tick:#53bdeb;justify-self:center;width:100%;max-width:400px;min-width:0;border-radius:46px;padding:11px;background:linear-gradient(160deg,#262b33,#0f1216);box-shadow:0 50px 90px -46px rgba(0,107,252,.45),0 18px 40px -30px rgba(17,21,28,.45);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,sans-serif;color:var(--wa-ink)}
.wa-chat>*{position:relative}
.wa-chat .top{display:flex;align-items:center;gap:8px;padding:40px 10px 10px 8px;background:var(--wa-green);color:#fff;border-radius:36px 36px 0 0}
.wa-chat .top::before{content:"";position:absolute;top:12px;left:50%;width:86px;height:22px;margin-left:-43px;border-radius:12px;background:#000}
.wa-chat .top svg{width:22px;height:22px;fill:currentColor;flex:none}[dir=rtl] .wa-chat .back svg{transform:scaleX(-1)}
.wa-chat .back{display:flex}
.wa-chat .av{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}.wa-chat .av img{width:74%;height:auto}
.wa-chat .who{min-width:0;flex:1;line-height:1.2}.wa-chat .who b{display:block;font-size:16.5px;font-weight:600}.wa-chat .who small{display:block;font-size:12.5px;opacity:.85}
.wa-chat .acts{display:flex;gap:18px;padding-inline-end:4px}
.thread{list-style:none;margin:0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;background:radial-gradient(circle at 10px 10px,rgba(84,101,111,.07) 2px,transparent 2.5px) 0 0/34px 34px,radial-gradient(circle at 27px 27px,rgba(84,101,111,.05) 3px,transparent 3.5px) 0 0/34px 34px,var(--wa-bg)}
.thread::before{content:attr(data-day);align-self:center;margin-bottom:6px;padding:5px 12px;border-radius:8px;background:#fff;color:#54656f;font-size:12.5px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.thread .b{position:relative;max-width:82%;padding:6px 9px 8px;border-radius:8px;font-size:14.5px;line-height:1.38;overflow-wrap:anywhere;box-shadow:0 1px .5px rgba(11,20,26,.13);margin-top:6px}
.thread .b::before{content:"";position:absolute;top:0;width:0;height:0;border-bottom:10px solid transparent}
.thread .bot{align-self:flex-start;background:var(--wa-in);border-start-start-radius:0}
.thread .bot::before{inset-inline-start:-8px;border-inline-end:8px solid var(--wa-in)}
.thread .me{align-self:flex-end;background:var(--wa-out);border-start-end-radius:0}
.thread .me::before{inset-inline-end:-8px;border-inline-start:8px solid var(--wa-out)}
.wt{float:inline-end;display:inline-flex;align-items:center;gap:3px;margin-block:8px -5px;margin-inline-start:10px;font-size:11px;line-height:1;color:var(--wa-meta);white-space:nowrap}
.wt svg{width:16px;height:11px;fill:var(--wa-tick)}
.thread .doc{padding:4px 4px 8px}.thread .doc .file{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;background:rgba(11,20,26,.05);min-width:200px}
.thread .doc i{font:700 10px/1 system-ui,sans-serif;font-style:normal;background:#e2483d;color:#fff;padding:8px 5px;border-radius:4px}
.thread .doc .wt{margin-inline-end:4px}
.thread .voice{display:grid;gap:2px;min-width:240px}
.vn{display:flex;align-items:center;gap:8px;height:42px}
.vav{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}.vav img{width:74%;height:auto}
.vn i{flex:none;width:0;height:0;border-block:8px solid transparent;border-inline-start:13px solid #54656f}[dir=rtl] .vn i{transform:scaleX(-1)}
.vn .bars{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.vn .bars span{flex:1;max-width:3px;height:35%;border-radius:2px;background:#8696a0;transform-origin:center}
.vn .bars span:nth-child(-n+5){background:#2c9c7a}
.vn .bars span:nth-child(3n){height:80%}.vn .bars span:nth-child(4n+1){height:55%}.vn .bars span:nth-child(5n+2){height:100%}.vn .bars span:nth-child(7n){height:25%}
.vmeta{display:flex;align-items:center;padding-inline-start:46px}.vmeta small{font-size:11px;color:var(--wa-meta)}.vmeta .wt{margin:0;margin-inline-start:auto;float:none}
.thread .said{display:block;padding-top:4px;border-top:1px solid rgba(11,20,26,.08);font-size:13px;font-style:italic;color:#3b4a54}
.compose{display:flex;align-items:center;gap:6px;padding:6px 8px 12px;background:var(--wa-bg);border-radius:0 0 36px 36px}
.compose .field{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:24px;background:#fff;color:#8696a0;font-size:15px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.compose .field span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose svg{width:22px;height:22px;fill:#8696a0;flex:none}
.compose .mic{flex:none;width:46px;height:46px;border-radius:50%;background:#00a884;display:grid;place-items:center}.compose .mic svg{fill:#fff}
.typing{display:none;align-self:flex-start;gap:4px;margin-top:6px;padding:12px 14px;background:var(--wa-in);border-radius:0 8px 8px 8px;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow:hidden}
.typing span{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:tdot 1s ease-in-out infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.js .wa-chat .thread>.b{opacity:0}
.js .wa-chat.in .thread>.b{animation:bub .55s var(--ease) both}
.js .wa-chat.in .typing{display:flex;height:31px;margin:0 0 -35px;pointer-events:none;transform-origin:0 0;animation:typing .7s linear both}
.js .wa-chat.in .vn .bars span{animation:wave 1.1s 4.3s ease-in-out 3 both}.js .wa-chat.in .vn .bars span:nth-child(odd){animation-delay:4.5s}
.js .wa-chat.in .thread>li:nth-child(1){animation-delay:0.50s}.js .wa-chat.in .thread>li:nth-child(2){animation-delay:1.12s}.js .wa-chat.in .thread>li:nth-child(3){animation-delay:1.74s}.js .wa-chat.in .thread>li:nth-child(4){animation-delay:2.36s}.js .wa-chat.in .thread>li:nth-child(5){animation-delay:2.98s}.js .wa-chat.in .thread>li:nth-child(6){animation-delay:3.60s}.js .wa-chat.in .thread>li:nth-child(7){animation-delay:4.22s}.js .wa-chat.in .thread>li:nth-child(8){animation-delay:4.84s}.js .wa-chat.in .thread>li:nth-child(9){animation-delay:5.46s}.js .wa-chat.in .thread>li:nth-child(10){animation-delay:6.08s}.js .wa-chat.in .thread>li:nth-child(11){animation-delay:6.70s}.js .wa-chat.in .thread>li:nth-child(12){animation-delay:7.32s}
@keyframes bub{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
/* the "typing" bubble floats over the spot of the message that follows, so the page never moves while the chat plays */
@keyframes typing{0%,100%{opacity:0;transform:scale(.85)}15%,82%{opacity:1;transform:none}}
@keyframes tdot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}

/* inner pages */
.page-hero{display:grid;gap:36px;align-items:center;padding-block:56px 40px}
@media(min-width:960px){.page-hero{grid-template-columns:1.15fr .85fr;padding-block:84px 56px}}
.page-hero .copy{display:grid;gap:22px;min-width:0}
.page-hero h1{font-size:clamp(40px,5.6vw,76px)}
.page-hero .stage{aspect-ratio:1/1.05;max-width:400px;margin-bottom:24px}
.page-hero .stage .tag{animation:float 7s ease-in-out infinite}
.js .page-hero .stage .beam{opacity:1;animation:beam2 2.8s var(--ease) infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.toast{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;max-width:70%;padding:10px 15px 10px 10px;border-radius:16px;background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(4,33,79,.45);font-size:14.5px;font-weight:650;color:var(--text);animation:toast 9s var(--ease) infinite;opacity:0}
.toast i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--wash);color:var(--blue);font-style:normal;font-size:15px}
.toast.t1{top:6%;inset-inline-start:-4%}.toast.t2{top:44%;inset-inline-end:-6%;animation-delay:3s}.toast.t3{bottom:-18px;inset-inline-start:2%;animation-delay:6s}
.toast.red i{background:var(--red);color:#fff}
@keyframes toast{0%{opacity:0;transform:translateY(14px) scale(.96)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-10px) scale(.98)}}
html:not(.js) .toast{opacity:1;animation:none}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:0 36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);color:var(--text);font-weight:550;line-height:1.45}
.ticks li{position:relative}.ticks li::before{content:"";flex:none;width:26px;height:26px;margin-top:-1px;border-radius:8px;background:var(--blue)}.ticks li::after{content:"";position:absolute;inset-inline-start:10px;top:22px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.block{padding-block:40px 80px;display:grid;gap:36px}
.block>.ticks{border-top:1px solid var(--line)}
.cta{display:grid;gap:18px;justify-items:start;padding:clamp(28px,5vw,52px);border-radius:32px;background:radial-gradient(600px circle at 100% 0%,#2f8cff,transparent 60%),linear-gradient(135deg,#0050c0,#006bfc);color:#fff;position:relative;overflow:hidden}
.cta h2{color:#fff;font-size:clamp(28px,3.6vw,44px)}.cta p{color:rgba(255,255,255,.88);max-width:56ch}
.cta .btn.primary{--b:#fff;border-color:#fff;color:var(--blue3);box-shadow:none}.cta .btn.primary:hover{--b:#eaf2ff}
.cta::after{content:"";position:absolute;width:220px;aspect-ratio:.78;inset-inline-end:-50px;bottom:-110px;border-radius:38px;border:2px solid rgba(255,255,255,.22);transform:rotate(-14deg)}
.arrive{display:grid;gap:0 36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));counter-reset:a;list-style:none;padding:0;margin:0}
.arrive li{counter-increment:a;padding:24px 0;border-top:2px solid var(--text);display:grid;gap:12px;align-content:start}
.arrive li::before{content:counter(a);font:700 44px/1 var(--display);color:var(--blue);letter-spacing:-.03em}
.arrive li p{color:var(--text);font-weight:550}
.contact{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.contact .card{gap:14px}.contact .card h2{margin:0;font-size:26px;font-weight:400;letter-spacing:-.03em;line-height:1.3}.contact .card .btn{justify-self:start}
.legal{max-width:780px;padding-block:64px 90px;display:grid;gap:16px}
.legal h1{font-size:clamp(40px,5.4vw,64px);margin-bottom:8px}.legal h2{font-size:24px;margin-top:22px;letter-spacing:-.02em}.legal p,.legal li{color:var(--graphite);max-width:68ch}.legal ul{margin:0;padding-inline-start:20px;display:grid;gap:8px}
.legal .faq{margin-top:12px}
.note{padding:14px 18px;border-radius:14px;background:var(--wash);border:1px solid #cfe0fb;color:var(--text)}

/* grievance form */
.gform{padding-block:0 100px;max-width:780px}
.gform form,.gdone{display:grid;gap:18px;padding:clamp(24px,4vw,40px);border-radius:28px;background:var(--panel);border:1px solid var(--line);box-shadow:0 30px 70px -50px rgba(4,33,79,.45)}
.gform h2{font-size:clamp(28px,3.4vw,40px)}
.grow{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.gf{display:grid;gap:7px;font-weight:600;font-size:15px;color:var(--text)}
.gf input,.gf textarea,.gf select{font:inherit;font-weight:400;font-size:16px;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--text);transition:border-color .2s,box-shadow .2s;width:100%}
.gf select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:40px;background:var(--panel) linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 20px) 50%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--muted) 50%) calc(100% - 14px) 50%/6px 6px no-repeat}
[dir=rtl] .gf select{background-position:20px 50%,14px 50%}
.gf input:hover,.gf textarea:hover,.gf select:hover{border-color:#9aa7b9}
.gf input:focus,.gf textarea:focus,.gf select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,107,252,.16)}
.gerr{padding:12px 14px;border-radius:12px;background:#fff1ef;color:#a8180d;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gform button{justify-self:start}
.kinds{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.kinds legend{padding:0;margin-bottom:8px;font-weight:600;font-size:15px}
.kind{position:relative;cursor:pointer}.kind input{position:absolute;opacity:0;pointer-events:none}
.kind span{display:flex;align-items:center;min-height:52px;padding:10px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font-weight:650;transition:background .2s,border-color .2s,color .2s}
.kind input:checked+span{background:var(--text);border-color:var(--text);color:#fff}.kind input:focus-visible+span{outline:2.5px solid var(--blue);outline-offset:3px}
#bulk{position:relative;top:-90px}

/* buy chooser (sheet and inline) */
dialog.sheet{padding:0;border:0;background:transparent;color:var(--text);max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0}
dialog.sheet::backdrop{background:rgba(13,17,23,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.sheet[open]{display:grid;align-items:end;justify-items:center}
@media(min-width:700px){dialog.sheet[open]{align-items:center}}
.chooser{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;padding:28px 24px calc(24px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;background:var(--panel);box-shadow:0 -30px 80px -30px rgba(13,17,23,.45);display:grid;gap:18px}
@media(min-width:700px){.chooser{border-radius:28px;padding:32px}}
dialog.sheet[open] .chooser{animation:sheet .5s var(--ease)}
@media(min-width:700px){dialog.sheet[open] .chooser{animation-name:modal}}
@keyframes sheet{from{transform:translateY(100%)}}@keyframes modal{from{opacity:0;transform:translateY(24px) scale(.96)}}
.chooser .x{position:absolute;top:16px;inset-inline-end:16px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.chooser .x:hover{border-color:var(--text)}
.chooser h2{font-size:clamp(26px,4vw,34px);padding-inline-end:48px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);position:relative}
.chooser>input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;text-align:center;padding:12px 8px;border-radius:12px;font-weight:650;cursor:pointer;color:var(--graphite);transition:color .3s}
.seg .pill{position:absolute;z-index:0;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);border-radius:12px;background:var(--text);transition:transform .45s var(--ease)}
.pc:checked~.seg .pill{transform:translateX(100%)}[dir=rtl] .pc:checked~.seg .pill{transform:translateX(-100%)}
.pv:checked~.seg .lv,.pc:checked~.seg .lc{color:#fff}
.pv:focus-visible~.seg .lv,.pc:focus-visible~.seg .lc{outline:2.5px solid var(--blue);outline-offset:2px}
.prod{display:none;gap:14px}
.pv:checked~.prods .vehicle,.pc:checked~.prods .child{display:grid}
.prod .amt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.prod .amt b{font:700 48px/1 var(--display);letter-spacing:-.04em}
.storegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.store{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:72px;padding:14px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);color:var(--text);font:700 17px/1.2 var(--display);transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.store:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 18px 30px -22px rgba(0,80,192,.8)}
.store small{display:block;margin-top:3px;font:500 13px/1.3 var(--body);color:var(--muted)}
.store .arrow{color:var(--blue);transition:transform .25s var(--ease)}.store:hover .arrow{transform:translate(3px,-3px)}
.store.off{opacity:.55;cursor:default;background:var(--panel2)}.store.off:hover{transform:none;border-color:var(--line2);box-shadow:none}
dialog.sheet[open] .store{animation:msg .45s var(--ease) both;animation-delay:.12s}dialog.sheet[open] .store:nth-child(2){animation-delay:.18s}dialog.sheet[open] .store:nth-child(3){animation-delay:.24s}dialog.sheet[open] .store:nth-child(4){animation-delay:.3s}
.chooser .fine a{font-weight:650}
.inline-chooser .chooser{width:100%;max-width:640px;border-radius:28px;max-height:none;border:1px solid var(--line);box-shadow:0 40px 100px -50px rgba(4,33,79,.45)}

/* footer */
footer{position:relative;z-index:1;padding-block:64px calc(96px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line)}
footer .wrap{display:grid;gap:24px}
footer .bigname{max-width:820px;margin-bottom:12px}footer .bigname img{width:100%;height:auto;display:block}
.js footer .bigname.reveal{opacity:1;transform:none}.js footer .bigname.reveal img{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease)}.js footer .bigname.reveal.in img{clip-path:inset(0)}[dir=rtl].js footer .bigname.reveal img{clip-path:inset(0 0 0 100%)}[dir=rtl].js footer .bigname.reveal.in img{clip-path:inset(0)}
.fcols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));padding-block:28px;border-block:1px solid var(--line)}
.fcol{display:grid;gap:11px;align-content:start}.fcol h2{margin:0 0 4px;font:650 15px/1.3 var(--display);letter-spacing:normal;color:var(--muted)}
.fcol a{color:var(--text);font-weight:550;width:fit-content;transition:color .2s}.fcol a:hover{color:var(--blue)}
footer .venture{font-size:16px;color:var(--text)}footer .venture a{font-weight:700}
footer .facts{color:var(--muted)}footer .fine{font-size:13.5px;color:var(--muted);max-width:90ch}
footer p{font-size:14px}

/* the WhatsApp button, once the visitor scrolls past the first screen */
.wa-fab{position:fixed;z-index:40;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;min-height:52px;padding:0 18px 0 14px;border-radius:16px;background:#128c4a;color:#fff;font-weight:650;font-size:15px;box-shadow:0 16px 34px -14px rgba(13,17,23,.55);transition:transform .25s var(--ease),background .2s}
.wa-fab svg{width:24px;height:24px;fill:currentColor}.wa-fab:hover{transform:translateY(-3px);background:#0e7a40}
.js .wa-fab{opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}.js.past .wa-fab{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media(max-width:560px){.wa-fab span{display:none}.wa-fab{padding:0 14px}}

/* the customer's account */
[hidden]{display:none!important}
.acct{padding-block:56px 100px;display:grid;gap:28px}.ahead{display:grid;gap:12px;max-width:660px}.ahead h1{font-size:clamp(40px,5.4vw,64px)}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3.5vw,34px);box-shadow:0 30px 70px -54px rgba(4,33,79,.5);display:grid;gap:16px;align-content:start}
.acard h2{font-size:clamp(22px,2.6vw,30px)}.acard>.btn,.acard form>.btn,.acard>form>button{justify-self:start;align-self:start}
.signin{max-width:540px}.signin form{display:grid;gap:14px}.amsg{min-height:1.4em;margin:0;color:var(--muted);font-weight:600}.amsg.bad{color:#a8180d}.amsg.good{color:var(--green)}
#dash{display:grid;gap:22px}.dtop{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.dtop h2{font-size:clamp(28px,3.2vw,40px)}
.aacct{display:grid;gap:18px}.ameta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--muted);font-size:14.5px}.ameta b{color:var(--text);font:650 18px/1.2 var(--display)}
.pill{display:inline-flex;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:700;background:#e7f7ee;color:var(--green)}.pill.lapsed,.pill.frozen{background:#fff1ef;color:#a8180d}
.agrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.aitem{border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:12px;align-content:start;background:var(--panel);transition:border-color .25s,box-shadow .3s}
.aitem:hover{border-color:var(--line2);box-shadow:0 24px 50px -40px rgba(4,33,79,.6)}
.aitem h3{font-size:19px;display:flex;gap:10px;align-items:center}.aitem h3 i{font-style:normal;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--wash)}
.aitem dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14.5px}.aitem dt{color:var(--muted)}.aitem dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}.aitem dd.none{color:var(--muted);font-weight:400}
.aitem form{display:grid;gap:10px}.aitem .gf input{min-height:44px;padding:9px 12px}.aitem .actions,.acard .actions{display:flex;flex-wrap:wrap;gap:10px}
.asmall{font-size:13.5px;color:var(--muted);margin:0}
.rcode{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.rcode code{font:700 clamp(24px,4vw,32px)/1 var(--display);letter-spacing:.04em;padding:12px 18px;border-radius:14px;background:var(--wash);color:var(--blue)}
.rtable{display:grid;gap:7px;font-size:15px;font-variant-numeric:tabular-nums}.rtable div{display:flex;justify-content:space-between;gap:12px}.rtable div.tot{border-top:1px solid var(--line);padding-top:9px;font-weight:700}
.dcols{display:grid;gap:22px}@media(min-width:900px){.dcols{grid-template-columns:1fr 1fr}}

/* ======================================================================
   Showroom finish. Each section below refines the layout above it: more air, lighter type,
   hairlines instead of boxes, and one dark chapter (the scroll story) for contrast.
   ====================================================================== */

/* the hero: the tag lit like an object in a vitrine */
.hero{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px);gap:clamp(28px,4vw,64px)}
@media(min-width:960px){.hero{grid-template-columns:1.02fr .98fr;min-height:min(860px,calc(100svh - 76px))}}
.hero .copy{gap:30px}
.hero h1{max-width:14ch;font-size:clamp(44px,6vw,92px)}
.hero .lead{max-width:36ch}
.hero .fine{display:flex;align-items:center;gap:12px;color:var(--graphite)}
.hero .fine::before{content:"";width:28px;height:1px;background:var(--line2)}
@media(max-width:600px){.hero .fine::before{display:none}}
.scene{isolation:isolate}
.scene::before{content:"";position:absolute;z-index:-1;inset:-14% -18% 2%;background:radial-gradient(closest-side at 50% 42%,#fff 0%,rgba(255,255,255,.85) 38%,rgba(255,255,255,0) 72%);pointer-events:none}
.scene::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(11,12,15,.2),rgba(11,12,15,0));filter:blur(6px);pointer-events:none}
.hphone{background:linear-gradient(150deg,#2b2f36,#0b0c0f 62%);box-shadow:0 0 0 1px #3a3f48 inset,0 0 0 2px #0b0c0f,0 70px 110px -50px rgba(11,12,15,.55),0 26px 44px -26px rgba(11,12,15,.45)}
.notif{border-radius:22px;background:rgba(255,255,255,.9);border-color:rgba(226,228,233,.9);box-shadow:0 40px 80px -36px rgba(11,12,15,.4)}
.scene .hang .tag .hole::after{background:linear-gradient(transparent,#a9afb8 40%,#7d848f)}

/* the tag itself: porcelain face, a silver edge, and a slow glint */
.tag{background:linear-gradient(170deg,#ffffff 0%,#fbfbfc 46%,#eef0f3 100%);border:1px solid #d6dae0;
  box-shadow:0 1px 0 #fff inset,0 0 0 4px rgba(255,255,255,.7),0 0 0 5px #dfe2e7,0 50px 90px -44px rgba(11,12,15,.5),0 14px 26px -18px rgba(11,12,15,.32)}
.tag::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%) no-repeat;background-size:260% 100%;background-position:160% 0;pointer-events:none;animation:glint 7s 2.4s var(--ease) infinite}
@keyframes glint{0%{background-position:160% 0}24%,100%{background-position:-60% 0}}
.tag .hole{background:var(--ink);box-shadow:inset 0 2px 3px rgba(11,12,15,.28),0 0 0 3px #fff,0 0 0 4.5px #cfd3da}
.tag .qr{border-color:#eceef1;border-radius:12px}

/* the four promises under the hero: a quiet ruled line */
.proof{padding-block:0 clamp(56px,7vw,96px)}
.proof .chips{border-block:1px solid var(--line)}
.proof .chips li{padding:26px 22px;font-weight:500;font-size:15px;color:var(--graphite);gap:14px}
.proof .chips li::before{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--wash)}
.proof .chips li::after{display:none}
@media(max-width:420px){.proof .chips li{padding:18px 10px;font-size:14px}}

/* languages: one slow line of scripts, set light */
.marquee{padding-block:clamp(48px,6vw,80px) clamp(40px,5vw,64px);background:transparent;border-block:0}
.marquee .row{gap:clamp(36px,4vw,64px);animation-duration:90s;font:300 clamp(30px,4.2vw,60px)/1.25 var(--display);letter-spacing:-.02em}
.marquee .row+.row{display:none}
.marquee .row span{color:#c4c8cf}
.marquee .row span.hl{color:var(--text)}
@media(prefers-reduced-motion:reduce){.marquee .row span:nth-child(n+14){display:none}.marquee .row{font-size:clamp(24px,3vw,40px)}}
.marquee p{margin-top:26px;font-weight:500;font-size:15px;color:var(--graphite)}

/* the scroll story: the one dark chapter */
.story-scroll{background:linear-gradient(var(--ink) 0,var(--coal) 9%,var(--coal) 91%,var(--ink) 100%);color:var(--onCoal)}
.story-scroll h2{color:#fff}
.story-scroll .eyebrow{color:var(--onCoal2)}.story-scroll .eyebrow::before{box-shadow:0 0 0 4px rgba(0,107,252,.25)}
.sstages li{opacity:.38;border-radius:16px}
.sstages li::before{background:rgba(255,255,255,.08);color:var(--onCoal2);font-weight:500;border-radius:50%}
.sstages li b{color:#fff;font-weight:500}.sstages li p{color:var(--onCoal2)}
.story-scroll[data-stage="0"] li[data-s="0"],.story-scroll[data-stage="1"] li[data-s="1"],.story-scroll[data-stage="2"] li[data-s="2"],.story-scroll[data-stage="3"] li[data-s="3"]{background:rgba(255,255,255,.05);border-color:var(--coalLine);box-shadow:none}
.sviz .orbit{border-color:rgba(255,255,255,.14)}.sviz .orbit.o2{border-color:rgba(255,255,255,.07)}
.sviz::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,107,252,.22),transparent 70%);pointer-events:none}
.sbubble{background:rgba(23,25,30,.86);border-color:var(--coalLine);color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sbubble i{background:rgba(0,107,252,.18);color:#7fb2ff}
.srail{background:rgba(255,255,255,.1);height:2px}
.stag .tag{box-shadow:0 1px 0 #fff inset,0 0 0 4px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,107,252,.45),0 30px 50px -30px rgba(0,0,0,.8)}
html:not(.js) .story-scroll{background:var(--coal)}

/* WhatsApp chapter */
.wa{padding-block:var(--sec) 0}
.wa .more{font-weight:500;color:var(--graphite);border-inline-start:1px solid var(--text);padding-inline-start:18px}
.wa-chat{box-shadow:0 0 0 1px #3a3f48 inset,0 0 0 2px #0b0c0f,0 80px 120px -60px rgba(11,12,15,.55),0 26px 44px -30px rgba(11,12,15,.4);background:linear-gradient(160deg,#2b2f36,#0b0c0f)}

/* how it works: a real sequence, so numbered */
.how{padding-block:var(--sec) 0}
.how .head{margin-bottom:clamp(40px,5vw,72px)}
.phone{background:linear-gradient(150deg,#2b2f36,#0b0c0f 62%);box-shadow:0 0 0 1px #3a3f48 inset,0 0 0 2px #0b0c0f,0 80px 120px -60px rgba(11,12,15,.55)}
.steps{border-inline-start:1px solid var(--line2)}
.step::before{inset-inline-start:-20px;width:40px;height:40px;border-radius:50%;font:400 15px/1 var(--display);background:var(--ink);border:1px solid var(--line2);color:var(--graphite);transition:background .5s,border-color .5s,color .5s}
.step.on::before{background:var(--text);border-color:var(--text);color:#fff}
.step h3{font-size:clamp(26px,2.8vw,40px);font-weight:300;letter-spacing:-.035em}
.step .mini{border-radius:22px;border-color:var(--line);box-shadow:var(--lift)}

/* the masked number, set like an engraving */
.mask{padding-block:var(--sec) 0;gap:34px}
.number{font-weight:200;letter-spacing:-.04em}
.chip{border-radius:999px;padding:9px 18px;font-weight:500;color:var(--graphite);border-color:var(--line)}

/* product cards */
.cards{padding-block:var(--sec) 0;gap:clamp(36px,4vw,60px)}
.cardgrid{gap:20px}
.card{border-radius:26px;padding:clamp(26px,3vw,40px);border-color:var(--line);background:var(--panel);box-shadow:var(--lift);transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .5s}
.card .ico{background:linear-gradient(160deg,#f6f8fb,#e9eef6);border-radius:18px}
.card h3{font-weight:400;letter-spacing:-.03em;font-size:26px}
.cardgrid .card:first-child h3{font-size:clamp(28px,3vw,40px)}
.card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--float)}
.card .go{font-weight:550;color:var(--text);font-size:15px}
.card .go::after{width:28px;height:1px;background:var(--blue)}.card:hover .go::after{width:48px}

/* features */
.features{padding-block:var(--sec) 0;gap:clamp(36px,4vw,56px)}
.tablist{gap:0;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;width:100%}
.tablist label{position:relative;padding:16px 22px 18px;border-radius:0;font-weight:500;color:var(--muted)}
.tablist label::after{content:"";position:absolute;inset-inline:22px;bottom:-1px;height:1.5px;background:var(--text);transform:scaleX(0);transition:transform .6s var(--ease)}
.tablist label:hover{background:transparent;color:var(--text)}
.ft-car:checked~.tablist .tl-car,.ft-child:checked~.tablist .tl-child,.ft-family:checked~.tablist .tl-family,.ft-privacy:checked~.tablist .tl-privacy{background:transparent;color:var(--text)}
.ft-car:checked~.tablist .tl-car::after,.ft-child:checked~.tablist .tl-child::after,.ft-family:checked~.tablist .tl-family::after,.ft-privacy:checked~.tablist .tl-privacy::after{transform:none}
@media(max-width:600px){.tablist{grid-template-columns:1fr 1fr}.tablist label{padding:14px 8px 16px;font-size:14.5px}.tablist label::after{inset-inline:8px}}
.panel{border-top:0;gap:0 56px}
.fcard{padding:30px 0 32px;gap:10px}
.fcard h3{font-weight:550}
.fcard h3::before{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 4px var(--wash)}
.p-privacy .fcard h3::before{box-shadow:0 0 0 4px #e6e8ec}
.fcard p{padding-inline-start:19px;font-size:15.5px}

/* price: a porcelain price tag */
.price{padding-block:var(--sec) 0;gap:clamp(48px,6vw,96px)}
.ptag{border:1px solid #d6dae0;border-radius:44px;background:linear-gradient(170deg,#fff,#f3f4f7);box-shadow:0 1px 0 #fff inset,0 0 0 6px rgba(255,255,255,.7),0 0 0 7px #dfe2e7,0 70px 110px -60px rgba(11,12,15,.5);padding:84px 36px 46px}
.ptag::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) no-repeat;background-size:260% 100%;background-position:160% 0;pointer-events:none;animation:glint 8s 3s var(--ease) infinite}
.phole{border:0;background:var(--ink);box-shadow:inset 0 2px 4px rgba(11,12,15,.3),0 0 0 4px #fff,0 0 0 5.5px #cfd3da}
.price .big{font-weight:200;letter-spacing:-.06em}
.price .then{font-weight:500;color:var(--graphite)}

/* the ruled lists */
.ticks li{font-weight:500;color:var(--text);padding:20px 0}
.ticks li::before{width:22px;height:22px;border-radius:50%;background:var(--text)}
.ticks li::after{inset-inline-start:8px;top:25px;width:5px;height:9px}

/* fee */
.fee{padding-block:var(--sec) 0;gap:clamp(28px,4vw,64px)}
.fee>div{padding-top:30px;border-top:1px solid var(--text)}
.fee>div+div{border-top-color:var(--line2)}
.fee h2,.fee h3{font-weight:300;font-size:clamp(26px,2.8vw,38px);letter-spacing:-.035em}

/* prices */
.prices.block{gap:clamp(22px,3vw,34px)}
.plist{display:grid;border-top:1px solid var(--text)}
.prow{display:flex;gap:24px;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);min-width:0}
.prow h3{font:500 19px/1.3 var(--display);letter-spacing:-.01em}
.prow p{color:var(--graphite);margin-top:6px;max-width:56ch}
.pamt{text-align:end;flex:none;display:grid;gap:2px}
.pamt b{font:400 clamp(26px,3vw,36px)/1 var(--display);letter-spacing:-.03em;color:var(--blue)}
.pamt small{color:var(--muted);font-size:14px}
.prices .ticks{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.prices>h3{font:300 clamp(24px,2.6vw,32px)/1.2 var(--display);letter-spacing:-.03em;margin-top:clamp(20px,3vw,40px)}
@media(max-width:560px){.prow{flex-direction:column;gap:10px}.pamt{text-align:start}}

/* questions */
.homefaq{padding-block:var(--sec) 0;gap:clamp(30px,4vw,48px)}
.faq summary{padding:26px 2px;font:500 18.5px/1.4 var(--display)}
.faq summary:hover{color:var(--text)}
.faq summary::after{width:34px;height:34px;border-radius:50%;background:linear-gradient(var(--text),var(--text)) center/12px 1.5px no-repeat,linear-gradient(var(--text),var(--text)) center/1.5px 12px no-repeat,transparent;border:1px solid var(--line2);transition:transform .5s var(--ease),border-color .3s}
.faq details[open] summary::after{border-color:var(--text)}
.faq details p{color:var(--graphite)}

/* refer a friend: white, hairline */
.refer{margin-block:var(--sec) 0;background:var(--panel);border:1px solid var(--line);border-radius:30px;box-shadow:var(--lift);padding:clamp(28px,4.5vw,64px)}
.rgift span{border-radius:20px;font-weight:400;box-shadow:0 26px 40px -24px rgba(11,12,15,.55)}
.rgift span::before{background:var(--panel)}

/* partner and buy bands: obsidian with a single blue light */
.partner,.cta{background:radial-gradient(900px circle at 100% 0%,rgba(0,107,252,.32),transparent 55%),var(--coal);border-radius:30px;box-shadow:0 60px 110px -60px rgba(11,12,15,.7)}
.partner{margin-block:24px var(--sec);padding:clamp(32px,5.5vw,80px)}
.partner .eyebrow{color:var(--onCoal2)}.partner .eyebrow::before{background:var(--blue);box-shadow:0 0 0 4px rgba(0,107,252,.28)}
.partner p,.cta p{color:var(--onCoal2)}
.partner .btn.primary,.cta .btn.primary{--b:#fff;border-color:#fff;color:var(--text);box-shadow:none}
.partner .btn.primary:hover,.cta .btn.primary:hover{color:#fff;border-color:var(--blue)}
.partner .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}.partner .btn.ghost:hover{border-color:#fff}
.partner::after,.cta::after{border:1px solid rgba(255,255,255,.14);border-radius:46px}
.cta h2{font-weight:300}

/* inner pages */
.page-hero{padding-block:clamp(48px,6vw,104px) clamp(32px,4vw,64px);gap:clamp(36px,5vw,72px)}
.page-hero h1{font-size:clamp(42px,5.6vw,84px)}
.page-hero .stage::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0) 72%)}
.toast{border-radius:18px;background:rgba(255,255,255,.92);border-color:rgba(226,228,233,.9);box-shadow:0 30px 60px -30px rgba(11,12,15,.4);font-weight:500}
.toast i{border-radius:50%;background:var(--wash)}
.block{padding-block:clamp(32px,4vw,56px) var(--sec);gap:clamp(36px,4vw,56px)}
.arrive li{border-top:1px solid var(--text);padding:30px 0}
.arrive li::before{font-weight:200;font-size:56px;color:var(--text)}
.arrive li p{font-weight:500}
.legal{padding-block:clamp(56px,6vw,104px) var(--sec)}
.legal h1{font-size:clamp(42px,5.4vw,72px)}.legal h2{font-weight:400;font-size:26px;letter-spacing:-.03em;margin-top:28px}
.legal p,.legal li{color:var(--graphite)}
.note{border-radius:16px;background:var(--panel);border-color:var(--line)}

/* forms */
.gform{padding-block:0 var(--sec)}
.gform form,.gdone{border-radius:28px;border-color:var(--line);box-shadow:var(--lift);padding:clamp(26px,4vw,48px);gap:20px}
.gform h2{font-weight:300}
.gf{font-weight:500;font-size:14.5px;color:var(--graphite)}
.gf input,.gf textarea,.gf select{border-radius:12px;border-color:var(--line2);background:var(--panel);min-height:54px;transition:border-color .3s,box-shadow .3s}
.gf input:hover,.gf textarea:hover,.gf select:hover{border-color:#9ba1ab}
.gf input:focus,.gf textarea:focus,.gf select:focus{border-color:var(--text);box-shadow:0 0 0 4px rgba(11,12,15,.07)}
.kind span{font-weight:500;border-radius:12px;transition:background .3s,border-color .3s,color .3s}

/* the Buy sheet */
dialog.sheet::backdrop{background:rgba(11,12,15,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chooser{border-radius:30px 30px 0 0;box-shadow:0 -40px 100px -30px rgba(11,12,15,.45)}
@media(min-width:700px){.chooser{border-radius:30px;padding:40px}}
.chooser h2{font-weight:300}
.chooser .x{border-radius:50%;background:transparent;border-color:var(--line2);transition:border-color .3s,transform .5s var(--ease)}.chooser .x:hover{transform:rotate(90deg)}
.seg{border-radius:14px;background:var(--panel2);border-color:var(--line)}
.seg label{font-weight:500}
.seg .pill{border-radius:10px;transition:transform .6s var(--ease)}
.prod .amt b{font-weight:200;font-size:56px;letter-spacing:-.05em}
.store{border-radius:16px;border-color:var(--line);font-weight:550;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.store:hover{border-color:var(--text);box-shadow:var(--lift)}
.store .arrow{color:var(--text)}
.inline-chooser .chooser{border-color:var(--line);box-shadow:var(--float)}

/* footer */
footer{background:var(--panel);border-top:1px solid var(--line);padding-block:clamp(64px,8vw,120px) calc(96px + env(safe-area-inset-bottom,0px))}
footer .wrap{gap:30px}
.fcols{padding-block:36px;gap:36px}
.fcol{gap:12px}.fcol h2{font:500 13.5px/1.3 var(--display);letter-spacing:.02em;color:var(--muted)}
.fcol a{font-weight:400;color:var(--graphite)}.fcol a:hover{color:var(--text)}
footer .venture{font-size:15px;color:var(--graphite)}footer .venture a{font-weight:600}

/* the WhatsApp button */
.wa-fab{border-radius:999px;box-shadow:0 24px 40px -18px rgba(11,12,15,.5)}

/* the customer's account */
.acct{padding-block:clamp(48px,6vw,96px) var(--sec)}
.acard{border-radius:26px;box-shadow:var(--lift);border-color:var(--line)}
.acard h2{font-weight:300}
.aitem{border-radius:20px;border-color:var(--line)}
.aitem:hover{box-shadow:var(--lift)}
.aitem h3 i{border-radius:50%}
.rcode code{background:var(--panel2);color:var(--text);font-weight:500;letter-spacing:.08em}

/* With GSAP running (motion.js), the hero scene is one GSAP timeline instead of these keyframes.
   The CSS keyframes above stay as the fallback when the libraries don't load. */
html.lenis{scroll-behavior:auto}
.gsap .scene .hang,.gsap .scene .hphone,.gsap .scene .beam,.gsap .scene .o1,.gsap .scene .tap,.gsap .scene .hs-sent,.gsap .scene .notif{animation:none}
.gsap .scene .tap{translate:var(--tx,30px) var(--ty,150px)}
.gsap .scene .o1{transition:background-color .25s,border-color .25s,color .25s}.gsap .scene .o1.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* Direction B, "Signal": a thin line of logo blue carries the alert from the tag to the phone to the owner.
   Drawn and timed by motion.js, so without GSAP (or with reduced motion) it simply isn't there. */
.signal,.sring{display:none}
.gsap .signal{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:5;pointer-events:none;filter:drop-shadow(0 0 6px rgba(0,107,252,.55))}
.signal path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;opacity:0}
.signal .sgdot{fill:#fff;stroke:var(--blue);stroke-width:2.5;opacity:0}
.gsap .sring{display:block;position:absolute;z-index:3;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1.5px solid rgba(0,107,252,.45);opacity:0;pointer-events:none}
/* the headline's letters (English) or words rise out of a mask, from soft to sharp */
.gsap .hero h1 .mk{display:inline-block;overflow:clip;padding-block:.14em;margin-block:-.14em;vertical-align:top}
.gsap .hero h1 .mk>span{display:inline-block;will-change:transform}
.gsap .split .w{animation:none;opacity:1;transform:none}
.gsap .hero h1 .mk{perspective:600px}
/* the scene's three planes (tag, phone, message) move apart a little with the pointer and the scroll */
.gsap .scene .hang,.gsap .scene .hphone,.gsap .scene .notif{will-change:transform}
.gsap .scene .tag::before{animation:none}.gsap .scene .tag.lit::before{animation:glint 5s var(--ease) 1}

/* Signal, carried through the rest of the site */
/* headings rise word by word out of a mask as they scroll in (motion.js); the words never change */
.gsap .rise .mk{display:inline-block;overflow:clip;padding-block:.14em;margin-block:-.14em;vertical-align:top;perspective:600px}
.gsap .rise .mk>span{display:inline-block}
/* the story: the signal runs out from behind the tag to each message as it arrives */
.ssig{display:none}
.gsap .stag{z-index:1}
.gsap .ssig{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none;filter:drop-shadow(0 0 6px rgba(0,107,252,.7))}
.ssig path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ssig path.red{stroke:var(--red)}
/* how it works: the rail beside the steps fills with blue as you read down */
.gsap .steps{position:relative}
.gsap .step::before{z-index:1}
.gsap .steps::after{content:"";position:absolute;z-index:0;inset-inline-start:-1px;top:0;width:2px;height:100%;background:linear-gradient(var(--blue),var(--blue) 92%,rgba(0,107,252,0));box-shadow:0 0 10px rgba(0,107,252,.5);transform-origin:50% 0;transform:scaleY(var(--fill,0))}
.gsap .step.on::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px rgba(0,107,252,.14)}
/* product heroes: each alert sends a soft ring out from the tag */
.js .page-hero .stage::after{content:"";position:absolute;z-index:0;left:50%;top:45%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;border:1.5px solid rgba(0,107,252,.4);opacity:0;pointer-events:none;animation:sigring 3s var(--ease) infinite}
@keyframes sigring{0%{opacity:0;transform:scale(.4)}12%{opacity:.9}70%,100%{opacity:0;transform:scale(1.7)}}
/* the price tag: a ring leaves its hole once it lands */
.js .ptag.in .phole{animation:holering 1.6s 1.2s var(--ease) both}
@keyframes holering{0%{box-shadow:0 0 0 0 rgba(0,107,252,.5)}100%{box-shadow:0 0 0 36px rgba(0,107,252,0)}}
/* buttons press in; focus rings settle into place */
.btn:active{transform:scale(.97);transition-duration:.12s}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,input:focus-visible,textarea:focus-visible{animation:focusin .35s var(--ease)}
@keyframes focusin{from{outline-offset:9px;outline-color:rgba(0,107,252,0)}}
/* form fields: the focus line grows, messages ease in */
.gf input,.gf textarea,.gf select{transition:border-color .35s var(--ease),box-shadow .45s var(--ease),background-color .35s}
.gf:focus-within>span{color:var(--blue);transition:color .3s}
.gerr:not([hidden]),.gdone,.amsg:not(:empty){animation:msgin .5s var(--ease)}
@keyframes msgin{from{opacity:0;transform:translateY(-6px)}}
/* answers open and close smoothly (motion.js animates the height; this is the plain fallback) */
.gsap .faq details>p{animation:none;overflow:hidden}
/* moving between pages: the header stays put while the page settles in (browsers that support it) */
@view-transition{navigation:auto}
header.top{view-transition-name:at-header}
::view-transition-old(root){animation:vtout .22s ease-in both}
::view-transition-new(root){animation:vtin .5s var(--ease) both}
@keyframes vtout{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtin{from{opacity:0;transform:translateY(18px)}}

/* ---------- immersive layer (19 Oct 2026) ---------- */
/* a thin blue line under the header fills as you read down the page (browsers with scroll timelines) */
@supports (animation-timeline: scroll()){header.top::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);animation:readline linear both;animation-timeline:scroll(root)}[dir=rtl] header.top::after{transform-origin:100% 50%}}
@keyframes readline{to{transform:scaleX(1)}}

/* the hero tag is a real object: it has an edge, a back, and turns on its cord when you drag it */
.scene .hang{perspective:1400px}.scene{-webkit-user-select:none;user-select:none}
.scene .hang .tag{transform-style:preserve-3d;transition:none;touch-action:pan-y;cursor:grab}
.scene .hang .tag.drag{cursor:grabbing}
.tag .ed{position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(170deg,#e9ecf0,#c9ced6);pointer-events:none}
.tag .e1{transform:translateZ(-1.6px)}.tag .e2{transform:translateZ(-3.2px)}.tag .e3{transform:translateZ(-4.8px)}.tag .e4{transform:translateZ(-6.4px);background:linear-gradient(170deg,#d7dbe1,#aeb5bf)}
.tag .back{position:absolute;inset:-1px;border-radius:inherit;transform:translateZ(-6.6px) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(120% 80% at 30% 10%,#23272f,var(--coal) 60%);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.tag .back img{width:62%;height:auto;filter:invert(1) hue-rotate(180deg) saturate(1.6) brightness(1.05);opacity:.95}
.tag .bhole{position:absolute;top:4.5%;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.tag .hole,.tag .qr,.tag .tagword{transform:translateZ(.4px)}
/* light moves across the face as it turns */
.gsap .scene .hang .tag::before,.gsap .scene .hang .tag.lit::before{animation:none;background-position:var(--gx,160%) 0;opacity:var(--go,1)}

/* the dive: scrolling on from the hero, the camera flies into the tag's QR and comes out in the dark story */
.dive{display:none}
.gsap .dive{display:block;position:relative;height:230vh;background:var(--ink);margin-bottom:-1px}
.gsap .dive+.story-scroll{background:linear-gradient(var(--coal),var(--coal) 91%,var(--ink) 100%)}
.dsticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.dqr{position:relative;width:min(58vmin,520px);aspect-ratio:1;will-change:transform;transform-origin:18.97% 18.97%}
.dqr svg{width:100%;height:100%;display:block}.dqr svg path,.dqr svg rect[fill]{fill:var(--coal)}.dqr svg rect[stroke]{stroke:var(--coal)}
.dcorner{position:absolute;inset:-9%;border-radius:22px;background:linear-gradient(var(--blue),var(--blue)) 0 0/34px 3px,linear-gradient(var(--blue),var(--blue)) 0 0/3px 34px,linear-gradient(var(--blue),var(--blue)) 100% 0/34px 3px,linear-gradient(var(--blue),var(--blue)) 100% 0/3px 34px,linear-gradient(var(--blue),var(--blue)) 0 100%/34px 3px,linear-gradient(var(--blue),var(--blue)) 0 100%/3px 34px,linear-gradient(var(--blue),var(--blue)) 100% 100%/34px 3px,linear-gradient(var(--blue),var(--blue)) 100% 100%/3px 34px;background-repeat:no-repeat}
.dbeam{position:absolute;inset-inline:-4%;top:0;height:3px;border-radius:3px;background:var(--blue);box-shadow:0 0 24px 4px rgba(0,107,252,.55);opacity:0}

/* try it yourself: two phones, the stranger's and yours */
.tryit{padding-block:var(--sec) 0;display:grid;gap:clamp(30px,4vw,52px)}
.tdemo{display:grid;gap:28px;justify-items:center}
.tdemo>input{position:absolute;opacity:0;pointer-events:none}
.tdemo .seg{width:min(100%,360px)}
.tstage{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,180px) minmax(0,1fr);align-items:center;max-width:1000px}
.tphone{margin:0;display:grid;gap:14px;justify-items:center}
.tphone figcaption{font-weight:500;color:var(--graphite);font-size:15px}
.tscreen{position:relative;width:min(100%,264px);aspect-ratio:9/17.5;border-radius:44px;padding:52px 16px 18px;background:var(--panel);box-shadow:0 0 0 9px var(--coal),0 0 0 10px #3a3f48,0 70px 110px -50px rgba(11,12,15,.55),0 26px 44px -26px rgba(11,12,15,.45);overflow:hidden;display:grid;align-content:start;gap:14px}
.tscreen::before{content:"";position:absolute;top:14px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:var(--coal)}
.tpage{display:none;gap:14px;align-content:start}
.pv:checked~.tstage .tv,.pc:checked~.tstage .tc{display:grid}
.ttop{display:grid;gap:10px}.ttop img{width:34px;height:auto}.ttop b{font:500 19px/1.25 var(--display);letter-spacing:-.01em}
.topts{display:grid;grid-template-columns:1fr 1fr;gap:9px}.topts.one{grid-template-columns:1fr}
.tb{font:inherit;font-size:14px;font-weight:500;min-height:58px;padding:10px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);cursor:pointer;text-align:start;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.tb:hover{border-color:var(--text)}.tb:active{transform:scale(.96)}
.tb.red{color:var(--red);border-color:rgba(217,45,32,.35);background:#fff5f4}
.tb.call{min-height:50px;background:var(--blue);border-color:var(--blue);color:#fff;text-align:center}
.tb.on{background:var(--text);border-color:var(--text);color:#fff}.tb.red.on{background:var(--red);border-color:var(--red);color:#fff}
.tsent,.tcalling{position:absolute;inset-inline:14px;bottom:18px;border-radius:16px;padding:12px 14px;background:#eaf7ef;color:var(--green);font-weight:500;font-size:14px;display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.tsent i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.tcalling{top:52px;bottom:18px;inset-inline:10px;flex-direction:column;justify-content:center;gap:18px;background:var(--coal);color:var(--onCoal);font-size:17px}
.tcalling b{font-weight:400;letter-spacing:.04em}
.tcalling .ring,.tincall .av{position:relative;width:76px;height:76px;border-radius:50%;background:var(--blue)}
.tcalling .ring::before,.tcalling .ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);animation:ringout 1.6s var(--ease) infinite}.tcalling .ring::after{animation-delay:.8s}
@keyframes ringout{to{transform:scale(1.9);opacity:0}}
.tdemo.sent .tsent,.tdemo.calling .tcalling{opacity:1;transform:none}
.dots{display:flex;gap:6px}.dots span{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;animation:blink 1.2s infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{40%{opacity:1}}
.tbar{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}.tbar i{width:36px;height:36px;border-radius:50%;background:var(--panel2);display:grid;place-items:center}.tbar i img{width:22px;height:auto}.tbar span{display:grid;font-weight:500}.tbar small{color:var(--muted);font-weight:400;font-size:12px}
.tthread{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start;overflow:hidden;max-height:100%}
.tthread li{justify-self:start;max-width:92%;padding:10px 12px;border-radius:4px 16px 16px 16px;background:var(--panel2);font-size:13.5px;line-height:1.4;animation:bubin .55s var(--ease) both}
.tthread li.red{background:#fff1f0;color:var(--red);font-weight:500}
.tthread li small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.tthread li time{float:inline-end;margin-inline-start:8px;color:var(--muted);font-size:11px}
@keyframes bubin{from{opacity:0;transform:translateY(16px) scale(.94)}}
.tincall{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#123b77,var(--coal));color:#fff;display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;opacity:0;transform:scale(1.04);transition:opacity .4s,transform .5s var(--ease);pointer-events:none}
.tincall .av{display:grid;place-items:center;background:#fff;animation:pulse 1.4s ease-in-out infinite}.tincall .av img{width:44px;height:auto}
.tincall b{font-weight:500;font-size:17px}.tincall p{font-size:13px;color:rgba(255,255,255,.75);margin:0}
.tincall .pick{width:58px;height:58px;border-radius:50%;background:#1faa59;display:grid;place-items:center;margin-top:10px;animation:pulse 1.4s ease-in-out infinite}.tincall .pick svg{width:26px;fill:#fff}
@keyframes pulse{50%{transform:scale(1.08)}}
.tdemo.calling .tincall{opacity:1;transform:none}
.tsig{width:100%;height:60px;overflow:visible}.tsig path{fill:none;stroke:var(--line2);stroke-width:1.2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.tsig circle{fill:var(--blue);opacity:0;offset-path:path("M0 10 C30 -4 70 24 100 10")}
.tdemo.fire .tsig circle{animation:travel .8s var(--ease) both}.tdemo.fire.red .tsig circle{fill:var(--red)}
[dir=rtl] .tsig{transform:scaleX(-1)}
@keyframes travel{0%{opacity:1;offset-distance:0%}90%{opacity:1}100%{opacity:0;offset-distance:100%}}
.tnote{max-width:52ch;text-align:center;color:var(--graphite);min-height:3em;margin:0}
html:not(.js) .tryit{display:none}
@media(max-width:760px){.tstage{grid-template-columns:1fr 1fr;gap:16px}.tsig{display:none}.tscreen{border-radius:30px;padding:40px 10px 12px;box-shadow:0 0 0 6px var(--coal),0 0 0 7px #3a3f48,0 40px 70px -40px rgba(11,12,15,.5)}.tscreen::before{top:10px;width:56px;height:16px;margin-left:-28px}.ttop b{font-size:14px}.topts{grid-template-columns:1fr}.tb{min-height:42px;font-size:12px;padding:8px;border-radius:11px}.tthread li{font-size:12px}.tincall b{font-size:14px}.tincall .av,.tcalling .ring{width:56px;height:56px}.tcalling{font-size:14px}.tsent{inset-inline:8px;bottom:10px;padding:8px 10px;font-size:11.5px;gap:8px}.tsent i{width:20px;height:20px}}

/* what will I pay each year? */
.calc{display:grid;gap:4px;padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--panel);border:1px solid var(--line);box-shadow:0 40px 80px -60px rgba(11,12,15,.5);max-width:620px;width:100%}
.calc h3{font:300 clamp(24px,2.6vw,32px)/1.2 var(--display);letter-spacing:-.03em;margin-bottom:10px}
.crow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:500}
.cstep{display:flex;align-items:center;gap:6px}
.cstep button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-size:22px;line-height:1;cursor:pointer;transition:border-color .25s,transform .2s var(--ease)}
.cstep button:hover{border-color:var(--text)}.cstep button:active{transform:scale(.9)}.cstep button:disabled{opacity:.35;cursor:default;transform:none}
.cstep output{min-width:2.2ch;text-align:center;font:400 24px/1 var(--display);font-variant-numeric:tabular-nums}
.ctog{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:500;cursor:pointer}
.ctog input{position:absolute;opacity:0}
.ctog .sw{width:48px;height:28px;border-radius:20px;background:var(--line2);position:relative;transition:background .3s;flex:none}
.ctog .sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(11,12,15,.25);transition:transform .35s var(--ease)}
.ctog input:checked+.sw{background:var(--blue)}.ctog input:checked+.sw::after{transform:translateX(20px)}[dir=rtl] .ctog input:checked+.sw::after{transform:translateX(-20px)}
.ctog input:focus-visible+.sw{outline:2.5px solid var(--blue);outline-offset:3px}
.ctot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;flex-wrap:wrap}
.ctot small{color:var(--graphite);font-size:15px}
.ctot b{font:400 clamp(40px,5vw,56px)/1 var(--display);letter-spacing:-.04em;color:var(--blue);font-variant-numeric:tabular-nums}
.ctot b.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:translateY(-4px) scale(1.04)}}
html:not(.js) .calc{display:none}

/* people who ask their phone for less motion get every section complete and still */
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js .reveal,.js .split .w{opacity:1!important;transform:none!important}
.scene .hs-opts .o1{background:var(--blue);border-color:var(--blue);color:#fff}.scene .hs-sent,.scene .notif{opacity:1!important;transform:none!important}.scene .hphone{transform:rotate(-3deg)}
.story-scroll{height:auto!important}.story-scroll .sticky{position:static!important;height:auto!important;padding-block:72px}.sstages li{opacity:1!important}.sstages li p{max-height:none!important}.sbubble{opacity:1!important;transform:none!important}.stag{transform:none!important}
.js footer .bigname.reveal img{clip-path:none!important}.toast{opacity:1}.toast.t2,.toast.t3{display:none}.marquee .row{width:auto;flex-wrap:wrap}.js .wa-chat .thread>.b{opacity:1}.typing{display:none!important}.js .step:not(.on){opacity:1}}