/* Hello Anytime website design system (29 Sep 2026). Shared by the homepage, trade pages and compare.
   Same look as the app: light ground, violet primary, soft 3D "puff" cards, Geist. 4px spacing base. */
@font-face{font-family:"Geist";src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url("/fonts/Fredoka-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url("/fonts/Fredoka-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:GeistFallback;src:local("Arial");size-adjust:104%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
:root{
  --brand-font:"Fredoka",var(--font-fallback,system-ui),sans-serif;
  --ground:#ECEEF6;--surface:#FFFFFF;--surface-low:#F6F7FC;--ink:#1A1C2E;--ink-soft:#3F4360;--muted:#5E6380;--hair:#E3E6F0;
  --primary:#5536F0;--primary-top:#7A5CFF;--primary-deep:#4524D8;--primary-soft:#EEEAFF;--primary-ink:#4428D8;
  --amber-soft:#FFF0DD;--amber-ink:#9A4A00;--green-soft:#E3FBEF;--green-ink:#0B7A4E;
  --puff:0 18px 36px rgba(60,64,120,.10),0 4px 10px rgba(60,64,120,.06),inset 0 2px 0 rgba(255,255,255,.9);
  --glow:0 12px 26px rgba(85,54,240,.34),inset 0 1px 0 rgba(255,255,255,.3);
  --font:"Geist",GeistFallback,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:24px;--sec:72px;
  color-scheme:light;
}
@media (min-width:900px){:root{--sec:120px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0F1020;--surface:#1A1C2E;--surface-low:#15172A;--ink:#EEF0FA;--ink-soft:#C9CCE0;--muted:#A3A8C4;--hair:#2B2E44;
  --primary-soft:#26214A;--primary-ink:#B9A8FF;--amber-soft:#3A2A14;--amber-ink:#FFC477;--green-soft:#12332A;--green-ink:#6BE0AE;
  --puff:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.05);color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0F1020;--surface:#1A1C2E;--surface-low:#15172A;--ink:#EEF0FA;--ink-soft:#C9CCE0;--muted:#A3A8C4;--hair:#2B2E44;
  --primary-soft:#26214A;--primary-ink:#B9A8FF;--amber-soft:#3A2A14;--amber-ink:#FFC477;--green-soft:#12332A;--green-ink:#6BE0AE;
  --puff:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.05);color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1rem/1.55 var(--font);overflow-x:hidden;font-feature-settings:"ss01"}
img,svg{display:block;max-width:100%}
a{color:var(--primary-ink);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--primary-top);outline-offset:2px;border-radius:10px}
.wrap{max-width:1168px;margin:0 auto;padding-inline:20px}
@media (min-width:900px){.wrap{padding-inline:24px}}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);padding:10px 14px;border-radius:12px;box-shadow:var(--puff)}
.skip:focus{top:12px}

/* type */
h1,h2,h3{margin:0;text-wrap:balance}
h1{font:800 2.75rem/1.0 var(--font);letter-spacing:-.045em}
h1 em,h2 em{font-style:normal;color:var(--primary)}
:root[data-theme="dark"] h1 em,:root[data-theme="dark"] h2 em{color:var(--primary-top)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1 em,:root:not([data-theme="light"]) h2 em{color:var(--primary-top)}}
h2{font:700 1.875rem/1.1 var(--font);letter-spacing:-.03em}
h3{font:600 1.125rem/1.3 var(--font);letter-spacing:-.01em}
@media (min-width:900px){h1{font-size:4.5rem;line-height:.98}h2{font-size:2.875rem;line-height:1.05}h3{font-size:1.25rem}}
.eyebrow{display:block;font:600 0.8125rem/1 var(--font);letter-spacing:.02em;color:var(--primary-ink);margin-bottom:14px}
.lead{font-size:1.0625rem;line-height:1.5;color:var(--muted);max-width:34em;margin:14px 0 0}
@media (min-width:900px){.lead{font-size:1.1875rem}}
.small{font:500 0.8125rem/1.45 var(--font);color:var(--muted)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.head{max-width:40em;margin-bottom:32px}
@media (min-width:900px){.head{margin-bottom:48px}}
section{padding-block:var(--sec)}
section+section{padding-top:0}
.center{text-align:center}.center .head,.head.center{margin-inline:auto}.center .lead{margin-inline:auto}

/* cards and icons */
.puff{background:var(--surface);border-radius:var(--r);box-shadow:var(--puff)}
.flat{background:var(--surface-low);border:1px solid var(--hair);border-radius:20px}
.ic{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary-ink);display:grid;place-items:center;flex:none}
.ic svg{width:20px;height:20px}
.ic.amber{background:var(--amber-soft);color:var(--amber-ink)}
.ic.green{background:var(--green-soft);color:var(--green-ink)}
.i{width:20px;height:20px;flex:none}
.badge{display:inline-flex;align-items:center;gap:4px;font:600 0.75rem/1 var(--font);padding:5px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-ink);white-space:nowrap}
.badge.soon{background:var(--amber-soft);color:var(--amber-ink)}
.badge.v{background:var(--primary-soft);color:var(--primary-ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;font:600 1rem/1 var(--font);text-decoration:none;border-radius:999px;padding:0 24px;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}
.btn-main{background:linear-gradient(180deg,var(--primary-top),var(--primary));color:#fff;box-shadow:var(--glow)}
.btn-main:hover{box-shadow:0 16px 32px rgba(85,54,240,.42),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-soft{background:var(--surface);color:var(--ink);box-shadow:var(--puff)}
.btn-block{width:100%}
.link{font:600 1rem var(--font);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.link b{color:var(--primary-ink)}
.link:hover{text-decoration:underline}

/* logo */
.orb{--s:32px;width:var(--s);height:var(--s);flex:none;display:block}
.orb svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 calc(var(--s)*.12) calc(var(--s)*.18) rgba(85,54,240,.35))}
symbol .eyes,.orb .eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
/* Any is alive: breathes, follows you with its eyes, and grins when you come close (set by site.js). */
.orb svg{animation:breathe 4.6s ease-in-out infinite;transform-origin:50% 60%}
symbol .look,.orb .look{transform:translate(calc(var(--ex,0)*1px),calc(var(--ey,0)*1px));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
symbol .smile,.orb .smile{opacity:0}
symbol .grin,.orb .grin{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--happy,0) * .12));transition:transform .25s}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5%) scale(1.025)}}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.wm{font:700 1.65rem/1 var(--brand-font);letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:baseline}
.wm .any{margin-left:.22em;background:linear-gradient(135deg,var(--primary-top),var(--primary-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.wm .t{font-size:.42em;font-weight:600;letter-spacing:.02em;color:var(--muted);opacity:.7;margin-left:.08em}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 84%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.nav .wrap>nav{display:none;gap:28px;font:500 0.9375rem var(--font)}
.nav .wrap>nav a{color:var(--ink-soft);text-decoration:none}.nav .wrap>nav a:hover{color:var(--ink)}
.nav .btn{min-height:42px;padding:0 18px;font-size:0.9375rem}
@media (min-width:900px){.nav .wrap>nav{display:flex}}

/* hero */
.hero{padding-block:28px 56px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.hero .wrap>*{min-width:0}
.hero h1{max-width:11ch}
.hero .lead{max-width:30em}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
.cta .btn{width:100%;max-width:360px}
.fine{display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 0 0;padding:0;list-style:none;font:500 0.875rem var(--font);color:var(--ink-soft)}
.fine li{display:flex;align-items:center;gap:6px}.fine .i{width:16px;height:16px;color:var(--green-ink)}
.picker{margin-top:28px}
.picker p{font:600 0.8125rem var(--font);color:var(--muted);margin:0 0 10px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin:0 -20px;padding-inline:20px}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;flex:none;font:600 0.875rem/1 var(--font);min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);cursor:pointer}
.chip svg{width:16px;height:16px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:56px}
}
@media (min-width:900px){
  .hero{padding-block:48px 96px}
  .cta{flex-direction:row;align-items:center;gap:22px}.cta .btn{width:auto}
  .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
}

/* phone demo */
.stage{position:relative;width:min(250px,68vw);margin:0 auto}
@media (min-width:900px){.stage{width:300px}}
.phone{position:relative;aspect-ratio:9/19;border-radius:46px;background:#14152A;padding:10px;box-shadow:0 50px 80px -40px rgba(40,30,120,.55),0 18px 40px -18px rgba(40,30,120,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.screen{position:relative;height:100%;border-radius:37px;overflow:hidden;background:linear-gradient(180deg,#F4F2FF,#ECEEF6 40%);color:#1A1C2E;display:flex;flex-direction:column}
.island{position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:#0B0B16;z-index:3}
.sbar{display:flex;justify-content:space-between;padding:14px 22px 0;font:600 0.75rem var(--font);color:#1A1C2E}
.callhead{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 10px;text-align:center}
.callhead .orb{--s:54px}
.ring{position:relative}
.ring::before,.ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(85,54,240,.35);animation:pulse 1.8s ease-out infinite}
.ring::after{animation-delay:.9s}
@keyframes pulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.callhead b{font:700 0.9375rem/1.2 var(--font)}
.callhead small{font:500 0.75rem var(--font);color:#5E6380}
.wave{display:flex;gap:3px;align-items:center;height:16px}
.wave i{width:3px;border-radius:2px;background:#7A5CFF;animation:wv 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}
@keyframes wv{0%,100%{height:4px}50%{height:16px}}
.lines{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:24px 12px 16px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}
.bub{display:none;flex:none;max-width:86%;padding:8px 11px;border-radius:15px;font:400 0.7812rem/1.4 var(--font)}
.bub.on{display:block;animation:bubin .35s ease-out}
@keyframes bubin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bub.ai{background:#fff;border-bottom-left-radius:5px;box-shadow:0 2px 6px rgba(60,64,120,.08)}
.bub.me{align-self:flex-end;background:#5536F0;color:#fff;border-bottom-right-radius:5px}
.bub small{display:block;opacity:.7;font-size:0.6875rem;margin-top:2px}
.notif{position:absolute;left:8px;right:8px;top:8px;z-index:4;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-radius:20px;padding:11px 12px;box-shadow:0 14px 30px rgba(20,10,60,.25);transform:translateY(-130%);transition:transform .5s cubic-bezier(.2,.8,.2,1);color:#1A1C2E}
.notif.on{transform:none}
.notif .top{display:flex;align-items:center;gap:7px;font:600 0.7188rem var(--font);color:#5E6380}
.notif .top .orb{--s:18px}.notif .top span:last-child{margin-left:auto}
.notif b{display:block;font:700 0.8438rem/1.3 var(--font);margin-top:5px}
.notif p{margin:2px 0 0;font:400 0.7812rem/1.4 var(--font)}
.tag{display:inline-block;font:700 0.6562rem/1 var(--font);padding:4px 7px;border-radius:999px;background:#FFF0DD;color:#9A4A00;margin-right:4px;vertical-align:1px}
.tag.ok{background:#E3FBEF;color:#0B7A4E}
.float{position:absolute;display:none;align-items:center;gap:10px;background:var(--surface);border-radius:18px;padding:10px 14px;box-shadow:var(--puff);font:600 0.8438rem/1.25 var(--font);white-space:nowrap}
.float small{display:block;font-weight:500;color:var(--muted);font-size:0.75rem}
.float .ic{width:32px;height:32px;border-radius:10px}.float .ic svg{width:16px;height:16px}
/* Feature pop-ups floating around the phone, never over it: two at a time, slow enough to read */
.feats .fp{display:flex;opacity:0;z-index:6;white-space:normal;width:172px;padding:9px 12px;gap:9px;font-size:.8125rem;line-height:1.2;animation:fpop 40s infinite both,fbob 5s ease-in-out infinite;will-change:transform,opacity}
.feats .fp small{font-size:.7rem;margin-top:2px}
.feats .fp .ic{width:30px;height:30px}
.fp1,.fp3,.fp5,.fp7,.fp9{right:calc(100% + 18px)}
.fp2,.fp4,.fp6,.fp8,.fp10{left:calc(100% + 18px)}
.fp1{top:6%}.fp2{top:14%}.fp3{top:26%}.fp4{top:34%}.fp5{top:46%}.fp6{top:54%}.fp7{top:66%}.fp8{top:74%}.fp9{top:84%}.fp10{top:9%}
.feats .fp1{animation-delay:0s,0s}.feats .fp2{animation-delay:4s,.5s}.feats .fp3{animation-delay:8s,1s}.feats .fp4{animation-delay:12s,1.5s}.feats .fp5{animation-delay:16s,2s}
.feats .fp6{animation-delay:20s,2.5s}.feats .fp7{animation-delay:24s,3s}.feats .fp8{animation-delay:28s,3.5s}.feats .fp9{animation-delay:32s,4s}.feats .fp10{animation-delay:36s,4.5s}
@keyframes fpop{0%{opacity:0;scale:.85}1.5%{opacity:1;scale:1.04}2.5%{scale:1}19%{opacity:1;scale:1}21%{opacity:0;scale:.92}100%{opacity:0;scale:.92}}
@keyframes fbob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.ic.amber{background:var(--amber-soft);color:var(--amber-ink)}
/* Small phones: no room beside the phone, so they appear one after another in a slot under it */
@media (max-width:679px){
  .feats{position:relative;height:62px;margin:18px 0 0}
  .feats .fp{left:50%!important;right:auto!important;top:0!important;translate:-50% 0;width:max-content;max-width:92vw;white-space:nowrap;animation-name:fpopm,none!important}
}
@keyframes fpopm{0%{opacity:0;scale:.9}1%{opacity:1;scale:1}9%{opacity:1;scale:1}10%{opacity:0;scale:.95}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.feats .fp{animation:none!important;opacity:1}.feats .fp9,.feats .fp10{display:none}}
@media (prefers-reduced-motion:reduce) and (max-width:679px){.feats .fp{display:none}.feats .fp1{display:flex}}
.stage>.orb{position:absolute;right:-18px;top:-26px;--s:72px;z-index:5}
.stage .cap{text-align:center;margin-top:14px}

/* trust strip */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;margin:0;padding:0}
.trust li{display:flex;align-items:center;gap:10px;font:600 0.875rem/1.3 var(--font);color:var(--ink-soft)}
@media (min-width:900px){.trust{grid-template-columns:repeat(5,1fr);gap:20px}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{position:relative;padding:0 0 28px 56px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--primary-top),var(--primary));color:#fff;font:700 0.9375rem var(--font);box-shadow:var(--glow)}
.steps li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--hair)}
.steps li:last-child::after{display:none}
.steps h3{margin:6px 0 4px}.steps p{margin:0;color:var(--muted)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .steps li{padding:56px 0 0}.steps li::after{left:44px;right:-24px;top:17px;bottom:auto;width:auto;height:2px}
}
.codes{margin-top:28px}
.codes summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;font:600 0.9375rem var(--font)}
.codes summary::-webkit-details-marker{display:none}
.codes summary svg{width:18px;height:18px;transition:transform .2s}.codes[open] summary svg{transform:rotate(180deg)}
.codes table{width:100%;border-collapse:collapse;font-size:0.9375rem}
.codes td,.codes th{padding:10px 20px;border-top:1px solid var(--hair);text-align:left}
.codes code{font:600 0.9375rem ui-monospace,Menlo,monospace;color:var(--primary-ink)}

/* what you get: SMS + app */
.duo{display:grid;gap:24px}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.sms{padding:22px}
.sms .from{display:flex;align-items:center;gap:10px;font:600 0.9375rem var(--font);margin-bottom:12px}
.sms .from small{margin-left:auto;color:var(--muted);font-weight:500}
.sms dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:0.9375rem}
.sms dt{color:var(--muted);font-weight:500}.sms dd{margin:0;font-weight:500}
.sms .acts{display:flex;gap:8px;margin-top:16px}
.sms .acts span{flex:1;text-align:center;font:600 0.8125rem var(--font);padding:10px 6px;border-radius:12px;background:var(--primary-soft);color:var(--primary-ink)}
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 20px 24px;margin:0 -20px}
.shots::-webkit-scrollbar{display:none}
.shots figure{margin:0;flex:0 0 64%;scroll-snap-align:center}
.frame{aspect-ratio:390/844;border-radius:34px;padding:7px;background:#14152A;box-shadow:0 30px 50px -30px rgba(40,30,120,.5)}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:28px;background:linear-gradient(180deg,#F4F2FF,#ECEEF6)}
.shots figcaption{font:600 0.875rem var(--font);text-align:center;margin-top:12px}
@media (min-width:900px){.shots{overflow:visible;margin:0;padding:0;gap:24px}.shots figure{flex:1}.shots figure:nth-child(2),.shots figure:nth-child(3){transform:translateY(-24px)}}

/* features */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:var(--puff);margin-bottom:24px}
.tabs button{font:600 0.9375rem var(--font);border:0;border-radius:999px;min-height:42px;padding:0 18px;background:transparent;color:var(--ink-soft);cursor:pointer}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--primary-top),var(--primary));color:#fff;box-shadow:var(--glow)}
.grid{display:grid;gap:12px}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid.g3{grid-template-columns:repeat(3,1fr);gap:20px}}
.feat{padding:18px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-content:start}
@media (max-width:899px){.feat p{font-size:0.9062rem}}
.feat .ic{grid-row:span 3}
.feat h3{font-size:1.0625rem;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.feat p{margin:0;color:var(--muted);font-size:0.9375rem}
@media (min-width:900px){.feat{padding:28px;grid-template-columns:1fr}.feat .ic{grid-row:auto;margin-bottom:10px}}

/* honest answers */
.honest{display:grid;gap:12px}
@media (min-width:900px){.honest{grid-template-columns:repeat(3,1fr);gap:20px}}
.honest .puff{padding:24px}
.honest h3{margin:12px 0 6px}.honest p{margin:0;color:var(--muted);font-size:0.9375rem}

/* calculator */
.calc{padding:24px;display:grid;gap:24px}
@media (min-width:900px){.calc{padding:40px;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}}
.calc label{display:grid;gap:8px;font:500 0.875rem var(--font);color:var(--muted);margin-bottom:18px}
.calc label span{display:flex;justify-content:space-between}
.calc output{font:600 1.25rem var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.calc input[type=range]{width:100%;accent-color:var(--primary);height:28px}
.result{background:var(--primary-soft);border-radius:20px;padding:24px}
.big{font:800 2.75rem/1 var(--font);letter-spacing:-.04em;color:var(--primary-ink);font-variant-numeric:tabular-nums}
@media (min-width:900px){.big{font-size:3.75rem}}
.result p{margin:8px 0 0;color:var(--ink-soft);font-size:0.9375rem}

/* pricing */
.pilotbar{display:flex;gap:14px;align-items:center;padding:16px 20px;margin-bottom:20px;border-radius:20px;background:var(--primary-soft);color:var(--primary-ink);font:600 0.9375rem/1.4 var(--font)}
.plans{display:grid;gap:16px}
@media (min-width:900px){.plans{grid-template-columns:1fr 1fr;gap:24px}}
.plan{padding:28px;display:flex;flex-direction:column;gap:6px;position:relative}
.plan.pick{box-shadow:var(--puff),0 0 0 2px var(--primary)}
.plan .badge{position:absolute;top:18px;right:18px}
.amt{font:800 3rem/1 var(--font);letter-spacing:-.04em;margin:12px 0 0;font-variant-numeric:tabular-nums}
.amt small{font:500 1rem var(--font);color:var(--muted);letter-spacing:0}
.plan .per{margin:4px 0 0;font:500 0.875rem var(--font);color:var(--muted)}
.ticks{list-style:none;padding:0;margin:18px 0 8px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:0.9375rem}
.ticks .i{width:18px;height:18px;color:var(--green-ink);margin-top:2px}
.plan details{margin:0 0 18px;font-size:0.9062rem;color:var(--muted)}
.plan details summary{cursor:pointer;font:600 0.875rem var(--font);color:var(--primary-ink);padding:6px 0}
.plan details ul{margin:6px 0 0;padding-left:18px}
.plan .btn{margin-top:auto}
.promise{display:grid;gap:12px;margin-top:20px}
@media (min-width:900px){.promise{grid-template-columns:repeat(3,1fr);gap:20px}}
.promise div{display:flex;gap:12px;align-items:flex-start;padding:18px 20px}
.promise b{display:block;font:600 0.9375rem var(--font);color:var(--ink)}.promise span span{font-size:0.875rem;color:var(--muted)}

/* tables */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px;position:relative}
.tbl table{width:100%;min-width:640px;border-collapse:collapse;font-size:0.9375rem;background:var(--surface)}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl thead th{font:600 0.875rem var(--font);color:var(--muted);background:var(--surface-low)}
.tbl tbody th{font-weight:600}
.tbl th:first-child{position:sticky;left:0;background:inherit;z-index:1}
.tbl tbody th:first-child{background:var(--surface)}
.tbl tr:last-child>*{border-bottom:0}
.tbl .us{background:color-mix(in srgb,var(--primary-soft) 70%,var(--surface));font-weight:600}
.yes{color:var(--green-ink);font-weight:600}.no{color:var(--muted)}

/* faq */
.faqwrap{display:grid;gap:24px}
@media (min-width:900px){.faqwrap{grid-template-columns:1fr 2fr;gap:64px}.faqwrap .head{position:sticky;top:96px;align-self:start}}
.faq{display:grid;gap:10px}
.faq details{padding:0 20px;background:var(--surface);border-radius:20px;box-shadow:var(--puff)}
.faq summary{cursor:pointer;list-style:none;font:600 1rem/1.4 var(--font);padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--primary-ink);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--muted)}

/* final CTA form */
.final{border-radius:32px;padding:28px 20px;background:linear-gradient(160deg,#6F4FFF,#4524D8);color:#fff;display:grid;gap:28px;box-shadow:0 30px 60px -30px rgba(69,36,216,.6)}
@media (min-width:900px){.final{padding:56px;grid-template-columns:1fr 1fr;gap:56px;align-items:center}}
:root[data-theme="dark"] .final{background:var(--surface);box-shadow:0 0 0 1px var(--primary),0 30px 80px -30px rgba(122,92,255,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .final{background:var(--surface);box-shadow:0 0 0 1px var(--primary),0 30px 80px -30px rgba(122,92,255,.5)}}
.final .eyebrow{color:#DCD3FF}.final h2{color:#fff}.final .lead{color:rgba(255,255,255,.86)}
.final ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.final li{display:flex;gap:10px;align-items:flex-start}.final li .i{width:18px;height:18px;margin-top:3px}
form.lead{display:grid;gap:14px}
.field{display:grid;gap:6px;font:600 0.875rem var(--font)}
.field input{font:400 1rem var(--font);min-height:52px;padding:0 16px;border-radius:14px;border:2px solid transparent;background:#fff;color:#1A1C2E;width:100%}
.field input:focus{border-color:#C9B8FF;outline:none}
.field input:user-invalid{border-color:#FFB4A8}
.final .btn-main{background:#fff;color:#4524D8;box-shadow:0 10px 24px rgba(20,10,80,.3)}
:root[data-theme="dark"] .final .btn-main{background:linear-gradient(180deg,var(--primary-top),var(--primary));color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .final .btn-main{background:linear-gradient(180deg,var(--primary-top),var(--primary));color:#fff}}
.msg{font-weight:600;min-height:1.4em;margin:0}
.hp{position:absolute;left:-9999px}
.final .small{color:rgba(255,255,255,.8)}.final .small a{color:#fff}

/* trades strip / links */
.trades{display:flex;flex-wrap:wrap;gap:8px}
.trades a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);box-shadow:var(--puff);color:var(--ink);text-decoration:none;font:600 0.9062rem var(--font)}
.trades a svg{width:18px;height:18px;color:var(--primary-ink)}
.trades a:hover{background:var(--primary-soft)}

/* sticky mobile bar + chat */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--hair);transform:translateY(110%);transition:transform .25s}
.sticky.on{transform:none}
.sticky .btn{flex:1;min-height:48px;padding:0 12px;font-size:0.9375rem}
.sticky .askbtn{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--puff);display:grid;place-items:center;cursor:pointer;padding:0}
.sticky .askbtn .orb{--s:30px}
@media (min-width:900px){.sticky{display:none}}
.askmi{display:none;position:fixed;right:24px;bottom:24px;z-index:30;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 18px 10px 10px;background:var(--surface);color:var(--ink);font:600 0.9375rem var(--font);box-shadow:0 14px 34px rgba(40,30,120,.25);cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;pointer-events:none}
.askmi.on{opacity:1;transform:none;pointer-events:auto}
@media (min-width:900px){.askmi{display:flex}}
.chatbox{position:fixed;right:12px;left:12px;bottom:84px;z-index:41;max-height:min(560px,calc(100dvh - 120px));display:none;flex-direction:column;background:var(--surface);border-radius:24px;box-shadow:0 30px 70px rgba(30,20,90,.35);overflow:hidden;padding:0}
@media (min-width:900px){.chatbox{left:auto;right:24px;bottom:92px;width:380px}}
.chatbox.open{display:flex}
.chatbox header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(160deg,#6F4FFF,#4524D8);color:#fff}
.chatbox header b{font:700 1rem var(--font)}.chatbox header small{display:block;opacity:.85;font-size:0.75rem}
.chatbox header button{margin-left:auto;background:rgba(255,255,255,.2);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.chatbox header button svg{width:18px;height:18px}
.chatlog{flex:1;overflow-y:auto;padding:14px;display:grid;gap:8px;align-content:start}
.chatlog .m{max-width:85%;padding:9px 13px;border-radius:16px;font-size:0.9375rem;line-height:1.45}
.chatlog .mi{background:var(--primary-soft);border-bottom-left-radius:5px}
.chatlog .me{background:var(--surface-low);border:1px solid var(--hair);justify-self:end;border-bottom-right-radius:5px}
.chatq{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.chatq button{font:600 0.8125rem var(--font);border:1px solid var(--hair);background:var(--surface-low);color:var(--ink);border-radius:999px;min-height:36px;padding:0 12px;cursor:pointer}
.chatform{display:flex;gap:8px;padding:10px;border-top:1px solid var(--hair)}
.chatform input{flex:1;min-width:0;font:400 1rem var(--font);border:1px solid var(--hair);border-radius:14px;padding:10px 12px;background:var(--surface-low);color:var(--ink)}
.chatform button{border:0;border-radius:14px;padding:0 16px;background:var(--primary);color:#fff;font:700 0.9375rem var(--font);cursor:pointer}
.chatnote{font-size:0.7188rem;color:var(--muted);padding:0 14px 10px;margin:0}

/* video dialog */
dialog.vid{padding:0;border:0;border-radius:24px;background:#000;width:min(900px,calc(100vw - 24px));box-shadow:0 40px 120px rgba(0,0,0,.5)}
dialog.vid::backdrop{background:rgba(15,16,32,.7);backdrop-filter:blur(4px)}
dialog.vid video{width:100%;display:block;aspect-ratio:16/9}
dialog.vid button{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;display:grid;place-items:center}

/* footer */
footer{padding-block:56px 110px;color:var(--muted);font-size:0.875rem;border-top:1px solid var(--hair)}
@media (min-width:900px){footer{padding-bottom:56px}}
footer .cols{display:grid;gap:28px}
footer .cols{grid-template-columns:1fr 1fr}footer .cols>div:first-child{grid-column:1/-1}
@media (min-width:900px){footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}footer .cols>div:first-child{grid-column:auto}}
footer .fh{font:600 0.875rem var(--font);color:var(--ink);margin:0 0 12px;letter-spacing:0}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--ink);text-decoration:underline}
footer .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--hair)}
.theme{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);box-shadow:var(--puff)}
.theme button{border:0;background:transparent;border-radius:999px;width:42px;height:38px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.theme button[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary-ink)}
.theme svg{width:16px;height:16px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(12px);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  symbol .eyes,.orb .eyes,.orb svg,.ring::before,.ring::after,.wave i{animation:none}
  symbol .look,.orb .look{transition:none}
  .bub.on{animation:none}.notif{transition:none}
  .btn{transition:none}
}

/* trade and content pages */
.crumbs{font:500 0.875rem var(--font);color:var(--muted);margin-bottom:18px}.crumbs a{color:var(--muted)}
.prose{max-width:44em}.prose p{color:var(--ink-soft)}
.prose h2{margin:40px 0 12px;font-size:1.625rem}
@media (min-width:900px){.prose h2{font-size:2rem}}
.callcard{padding:20px;display:grid;gap:8px}
.callcard .b{max-width:88%;padding:10px 14px;border-radius:16px;font-size:0.9375rem;line-height:1.45}
.callcard .b.ai{background:var(--primary-soft);border-bottom-left-radius:5px}
.callcard .b.me{justify-self:end;background:var(--surface-low);border:1px solid var(--hair);border-bottom-right-radius:5px}
.callcard .meta{display:flex;justify-content:space-between;font:500 0.8125rem var(--font);color:var(--muted)}

/* 29 Sep persona-test fixes */
.navr{display:flex;align-items:center;gap:8px}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
@media (min-width:900px){.menu-btn{display:none}}
.mmenu{display:grid;padding:8px 20px 16px;background:var(--ground);border-bottom:1px solid var(--hair)}
.mmenu a{display:flex;align-items:center;min-height:48px;font:600 1.0625rem var(--font);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.mmenu a:last-child{border-bottom:0;color:var(--primary-ink)}
@media (min-width:900px){.mmenu{display:none!important}}
@media (max-width:899px){html{scroll-padding-bottom:96px}}
.thanks{background:rgba(255,255,255,.14);border-radius:20px;padding:24px;outline:none}
.thanks h3{color:#fff;font-size:1.375rem;margin-bottom:8px}.thanks p{margin:0;color:rgba(255,255,255,.9)}
:root[data-theme="dark"] .thanks{background:var(--surface-low)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thanks{background:var(--surface-low)}}
.field input:focus{border-color:#1A1C2E;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.field input[aria-invalid="true"]{border-color:#FFB4A8}
.stage>.orb{right:-26px;top:-34px}
@media (max-width:899px){.stage>.orb{--s:56px;right:-22px;top:-30px}}
@media (prefers-reduced-motion:reduce){.notif{top:auto;bottom:8px}}
.wm{white-space:nowrap}
.trust li{min-width:0}
.sticky .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Very small screens or large text: keep the header and sticky bar inside the screen */
@media (max-width:360px){.navr .btn{display:none}.sticky .btn{font-size:.875rem;padding:0 8px}}
/* Tables become stacked cards on phones, with each value labelled */
@media (max-width:700px){
  .tbl.stack table{min-width:0}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:block;padding:14px 16px;border-bottom:1px solid var(--hair)}
  .tbl.stack tbody th,.tbl.stack td{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border:0;text-align:right}
  .tbl.stack tbody th{position:static;display:block;text-align:left;font-size:1.0625rem;padding-bottom:8px}
  .tbl.stack td::before{content:attr(data-label);color:var(--muted);font-weight:500;text-align:left;flex:0 0 42%}
  .tbl.stack td.us{background:transparent;color:var(--primary-ink)}
}
.plans{grid-template-columns:minmax(0,1fr)}
.plans.one{max-width:420px!important;grid-template-columns:minmax(0,1fr)!important}
@media (min-width:900px){.plans{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.plan{min-width:0}.amt{font-size:clamp(2.25rem,11vw,3rem);overflow-wrap:anywhere}
.sticky .btn{min-width:0}
@media (max-width:360px){.sticky{gap:6px;padding-inline:8px}.sticky .askbtn{width:44px;height:44px}}
.ticks li>svg.i:not(:only-child){flex:none}
.ticks .soonic{color:var(--amber-ink)}

/* Public visitor counter */
.visits{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.9rem;color:var(--muted)}
.visits b{color:var(--ink);font-variant-numeric:tabular-nums}
.visits .live{width:8px;height:8px;border-radius:50%;background:#1DB954;box-shadow:0 0 0 0 rgba(29,185,84,.5);animation:vpulse 2s infinite}
@keyframes vpulse{70%{box-shadow:0 0 0 8px rgba(29,185,84,0)}100%{box-shadow:0 0 0 0 rgba(29,185,84,0)}}
@media (prefers-reduced-motion:reduce){.visits .live{animation:none}}

/* The brand name in running text, styled like the logo */
.brand{font-family:var(--brand-font);font-weight:700;letter-spacing:-.005em;white-space:nowrap;color:inherit}
.brand b{font-weight:700;background:linear-gradient(135deg,var(--primary-top),var(--primary-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{font-size:.48em;font-weight:600;letter-spacing:.02em;margin-left:.06em;opacity:.6}
.btn .brand b,.btn-main .brand b{background:none;color:inherit}
/* Keep the brand's parts inline and sized to the text around it, whatever the surrounding "b" or "small" rules say (e.g. the chat header) */
.brand b,.brand small{display:inline!important;font-family:inherit!important;line-height:inherit!important}
.brand b{font-size:inherit!important}
.brand small{font-size:.48em!important}
/* On violet panels the violet "Any" disappears: show it in the text colour instead */
.chatbox header .brand b,.final .brand b{background:none;color:inherit}

/* Any's face stays visible on violet: a soft white halo behind the orb */
.chatbox header .orb{background:#fff;border-radius:50%;padding:2px;box-sizing:content-box}
/* In small print the brand name reads as plain text (the styled version is for normal and big text) */
.chatbox .brand,footer .brand,small .brand,figcaption .brand,.fine .brand,.cap .brand,.small .brand,.eyebrow .brand,.crumbs .brand,.notif .brand,.from .brand,.meta .brand,.per .brand,th .brand,td .brand{font-family:inherit;font-weight:inherit;letter-spacing:inherit}
.chatbox .brand b,footer .brand b,small .brand b,figcaption .brand b,.fine .brand b,.cap .brand b,.small .brand b,.eyebrow .brand b,.crumbs .brand b,.notif .brand b,.from .brand b,.meta .brand b,.per .brand b,th .brand b,td .brand b{background:none;color:inherit;font-weight:inherit}
.chatbox .brand small,footer .brand small,small .brand small,figcaption .brand small,.fine .brand small,.cap .brand small,.small .brand small,.eyebrow .brand small,.crumbs .brand small,.notif .brand small,.from .brand small,.meta .brand small,.per .brand small,th .brand small,td .brand small{font-size:1em!important;font-weight:inherit;opacity:1;margin:0;letter-spacing:inherit}

/* Flex rows (FAQ questions, links): keep the text, including the brand name, as one flowing item */
.faq summary>span,.codes summary>span,.link>span{flex:1 1 auto;min-width:0}
/* Footer and crumb links: a taller hit area on phones without changing the layout */
@media (max-width:899px){footer li a,.crumbs a{display:inline-block;padding:6px 0;margin:-6px 0}}
/* On the violet sign-up panel "time" stays crisp */
.final .brand small{opacity:.9}

/* "Talk to Any": a voice call with Any in the browser */
.btn-talk{background:var(--surface);color:var(--primary-ink);box-shadow:var(--puff);gap:8px}
.btn-talk svg{width:18px;height:18px}
.btn-talk:hover{background:var(--primary-soft)}
.cta2{margin-top:14px}
.sticky .btn svg{width:16px;height:16px;margin-right:4px}
.talkbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(15,16,32,.55);backdrop-filter:blur(6px)}
.talkbox[hidden]{display:none}
.tb-card{position:relative;width:min(420px,100%);background:var(--surface);border-radius:28px;padding:32px 24px 22px;text-align:center;box-shadow:0 30px 80px rgba(20,10,80,.35)}
.tb-card h2{font:700 1.6rem/1.1 var(--brand-font);margin:14px 0 6px}
.tb-orb{display:inline-block;border-radius:50%;transition:transform .3s}
.tb-orb .orb{--s:104px}
.talkbox.live .tb-orb{animation:tbpulse 1.6s ease-in-out infinite}
.talkbox.speaking .tb-orb{animation:tbpulse .7s ease-in-out infinite}
@keyframes tbpulse{0%,100%{box-shadow:0 0 0 0 rgba(122,92,255,.45)}50%{box-shadow:0 0 0 22px rgba(122,92,255,0)}}
.tb-status{color:var(--ink-soft);min-height:3em;margin:0 0 8px}
.tb-time[hidden]{display:none}
.tb-time{font:700 1.1rem var(--font);color:var(--primary-ink);margin:0 0 8px}
.tb-btns{display:flex;gap:10px;justify-content:center;margin:10px 0 14px}
.tb-btns .btn svg{width:18px;height:18px;margin-right:6px}
.tb-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:var(--surface-low);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.tb-x svg{width:18px;height:18px}
.tb-card .small{color:var(--muted);font-size:.8rem;margin:0}
@media (prefers-reduced-motion:reduce){.talkbox .tb-orb{animation:none!important}}
@media (min-width:1280px){.hero .lead{max-width:27em}}
@media (min-width:1280px) and (max-width:1439px){.feats .fp{width:158px}.fp1,.fp3,.fp5,.fp7,.fp9{right:calc(100% + 12px)}.fp2,.fp4,.fp6,.fp8,.fp10{left:calc(100% + 12px)}}

/* Mid-size screens (900-1279px, e.g. a phone in desktop mode): phone stays beside the text, a bit smaller,
   with compact pop-ups (title only) in a column on its left, never over the phone. Slots are interleaved
   so the two pop-ups showing together (fp1+fp2, fp2+fp3 ... fp10+fp1) are always well apart. */
@media (min-width:900px) and (max-width:1279px){
  .stage{width:240px}
  .feats .fp{width:118px;padding:7px 9px;gap:7px;font-size:.72rem;border-radius:14px}
  .feats .fp small{display:none}
  .feats .fp .ic{width:24px;height:24px;border-radius:8px}.feats .fp .ic svg{width:13px;height:13px}
  .feats .fp{right:calc(100% + 10px);left:auto}
  .fp1{top:3%}.fp2{top:53%}.fp3{top:13%}.fp4{top:63%}.fp5{top:23%}.fp6{top:73%}.fp7{top:33%}.fp8{top:83%}.fp9{top:43%}.fp10{top:92%}
}

.tb-log{max-height:190px;overflow-y:auto;text-align:left;background:var(--surface-low);border-radius:16px;padding:10px 12px;margin:4px 0 8px;font-size:.88rem;line-height:1.35}
.tb-log[hidden]{display:none}
.tb-log p{margin:0 0 6px}.tb-log p:last-child{margin:0}
.tb-log b{font-weight:700;margin-right:2px}.tb-log .any b{color:var(--primary-ink)}.tb-log .me b{color:var(--ink)}

/* The new Any (headset): the waving hands rock gently on the big version */
.orb.big svg{overflow:visible}

.tagline{font:700 1.05rem/1.2 var(--brand-font);color:var(--primary-ink);margin:12px 0 0}
/* Switching offer (home, compare, Clara page) */
.switch{display:grid;gap:16px;padding:24px;align-items:center;box-shadow:var(--puff),0 0 0 2px var(--green-soft)}
.switch h2,.switch h3{font:700 1.375rem/1.2 var(--font);letter-spacing:-.02em;margin:0}
.switch p{margin:8px 0 0;color:var(--ink-soft)}
.switch .eyebrow{color:var(--green-ink);margin-bottom:10px}
.switch .btn{width:100%}
@media (min-width:900px){.switch{grid-template-columns:auto 1fr auto;gap:24px;padding:28px 32px}.switch .btn{width:auto}.switch h2,.switch h3{font-size:1.5rem}}
.offer-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.16);font:600 .9375rem/1.4 var(--font)}
.offer-note .i{width:18px;height:18px;flex:none;margin-top:2px}
/* Calculator: presets, number boxes, full page */
.presets{margin:4px 0 22px}
.presets p{font:600 .8125rem/1.4 var(--font);color:var(--muted);margin:0 0 10px}
.presets .chips{margin:0;padding:0;flex-wrap:wrap;overflow:visible}
.no-js .presets{display:none}
.calc .pair{display:grid;grid-template-columns:1fr 96px;gap:12px;align-items:center}
.calc input[type=number]{font:600 1rem var(--font);min-height:44px;padding:0 10px;border-radius:12px;border:1px solid var(--hair);background:var(--surface-low);color:var(--ink);width:100%;font-variant-numeric:tabular-nums}
.calc .yr{font:700 1.5rem/1.2 var(--font);color:var(--ink);margin-top:14px;font-variant-numeric:tabular-nums}
.calc .cost{display:flex;gap:10px;align-items:center;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--surface);font:600 .9375rem/1.35 var(--font);color:var(--ink)}
.calc .cost .i{width:18px;height:18px;color:var(--green-ink);flex:none}
.calc .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.calc .acts .btn{flex:1 1 160px}

/* Any, the assistant: always a violet name tag (4 Oct 2026). Plain on buttons and dark panels. */
.anyname{font-weight:700;color:var(--primary-ink,#4428D8)}
.btn .anyname,.btn-main .anyname,.final .anyname,button .anyname,.sticky .anyname{color:inherit}

/* Minimal homepage (4 Oct 2026): same content, folded into tabs, swipe rows and "Show all" buttons.
   Without JS (no .fold class) every panel and list shows in full. The hero is untouched. */
.home{--sec:52px}
@media (min-width:900px){.home{--sec:80px}}
.home .head{margin-bottom:22px}
@media (min-width:900px){.home .head{margin-bottom:32px}}
html:not(.fold) [role="tablist"]{display:none}
.fold .foldable:not(.open) .more{display:none}
.more-btn{min-height:44px}
.more-btn[aria-expanded="true"]{box-shadow:none;background:var(--primary-soft);color:var(--primary-ink)}

/* Swipe rows on phones and tablets: cards side by side, snapping, with the next one peeking in */
@media (max-width:899px){
  .swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:6px 20px 20px;scroll-padding-inline:20px}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 82%;min-width:0;scroll-snap-align:start}
}
@media (min-width:640px) and (max-width:899px){.swipe>*{flex-basis:46%}}

/* trust strip: one sideways row on phones */
.trustsec{padding-block:0 var(--sec)}
@media (max-width:899px){
  .trustsec .trust{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -20px;padding:4px 20px 10px}
  .trustsec .trust::-webkit-scrollbar{display:none}
  .trustsec .trust li{flex:none;scroll-snap-align:start;white-space:nowrap;background:var(--surface);border-radius:999px;padding:5px 14px 5px 5px;box-shadow:var(--puff);font-size:.8125rem;gap:8px}
  .trustsec .trust .ic{width:30px;height:30px;border-radius:50%}.trustsec .trust .ic svg{width:16px;height:16px}
}

/* how it works */
.home .steps li{padding-bottom:18px}
.home .steps p{font-size:.9375rem}
@media (min-width:900px){.home .steps li{padding:52px 0 0}}
.home .codes{margin-top:18px}

/* what you get: text and app screens as two tabs */
#app .duo{align-items:start}
@media (min-width:900px){#app .duo{align-items:center}}
#app .tabs{margin:20px 0 0}
.tabs button{display:inline-flex;align-items:center;gap:8px}
.tabs button svg{width:16px;height:16px}
.panes{min-width:0}
#app .shots{overflow-x:auto;margin:0 -20px;padding:6px 20px 14px;gap:12px}
#app .shots figure{flex:0 0 46%;transform:none}
#app .shots figcaption{font-size:.8125rem;margin-top:8px}
#app .frame{border-radius:26px;padding:5px}#app .frame img{border-radius:21px}
#app #p-shots .small{margin:4px 0 0}
@media (min-width:900px){#app .shots{margin:0;padding:6px 2px 14px}#app .shots figure{flex:0 0 31%}}

/* features: compact cards, icon beside the title */
#features .tabs{margin-bottom:14px}
.home .feat{padding:16px;gap:4px 12px}
@media (min-width:900px){
  #features .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .home .feat{padding:20px;grid-template-columns:auto 1fr}.home .feat .ic{grid-row:span 3;margin:0}
}

/* honest answers */
.home .honest .puff{padding:18px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-content:start}
.home .honest .ic{grid-row:span 2}
.home .honest h3{margin:0;align-self:center;font-size:1.0625rem}
@media (min-width:900px){.home .honest{gap:16px}.home .honest .puff{padding:22px}}

/* calculator */
.home .calc{padding:20px;gap:18px}
.home .calc label{margin-bottom:10px}
.home .result{padding:20px}
@media (min-width:900px){.home .calc{padding:32px;gap:40px}}

/* pricing */
.home .pilotbar{margin-bottom:14px;padding:12px 16px}
.home .plan{padding:22px}
.home .ticks{margin:14px 0 6px;gap:8px}
.home .plan details{margin-bottom:14px}
@media (max-width:899px){.plans.swipe>*{flex-basis:86%}}
@media (min-width:640px) and (max-width:899px){.plans.swipe>*{flex-basis:58%}}
.promise.puff{gap:0;margin-top:14px;padding:4px 0}
.promise.puff>div{padding:12px 18px}
.promise.puff>div+div{border-top:1px solid var(--hair)}
@media (min-width:900px){.promise.puff{grid-template-columns:repeat(3,1fr);gap:0}.promise.puff>div{padding:18px 22px}.promise.puff>div+div{border-top:0;border-left:1px solid var(--hair)}}
.home .switch{margin-top:14px}
@media (max-width:899px){.home .switch{padding:18px;gap:12px}.home .switch>.ic{display:none}.home .switch h3{font-size:1.1875rem}.home .switch .eyebrow{margin-bottom:6px}}

/* compare: first rows, then "Show all" */
.morebar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.morebar .link{font-size:.9375rem}

/* FAQ: first five, then "Show all" */
.faq .more{display:contents}
.home .faq summary{padding:14px 0}
.home .faq details p{margin-bottom:14px}
#faqs .more-btn{margin-top:12px}

/* trades: folded on phones, all shown on bigger screens */
.trades .trades-btn{min-height:44px;padding:0 16px;font-size:.9062rem;border:0;background:var(--primary-soft);color:var(--primary-ink)}
@media (min-width:900px){.fold .foldable:not(.open) .trades a.more{display:inline-flex}#trades .trades-btn{display:none}}

/* final sign-up */
.home .final{padding:24px 18px;gap:22px}
.home .final ul{margin-top:14px;gap:8px}
.home form.lead{gap:12px}
@media (min-width:900px){.home .final{padding:44px;gap:48px}}

/* footer link groups: folded on phones (site.js), open columns on bigger screens */
footer .fgrp summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
footer .fgrp summary::-webkit-details-marker{display:none}
footer .fgrp summary .i{width:18px;height:18px;transition:transform .2s}
footer .fgrp[open] summary .i{transform:rotate(180deg)}
@media (max-width:899px){
  footer{padding-top:36px}
  footer .cols{grid-template-columns:minmax(0,1fr);gap:0}
  footer .cols>div:first-child{margin-bottom:18px}
  footer .fgrp{border-top:1px solid var(--hair)}
  footer .fgrp summary{min-height:48px}
  footer .fgrp .fh{margin:0}
  footer .fgrp ul{padding-bottom:14px}
  footer .bottom{margin-top:0}
}
@media (min-width:900px){footer .fgrp summary{cursor:default}footer .fgrp summary .i{display:none}}

/* Tighter rhythm (round 2) */
.home{--sec:44px}
@media (min-width:900px){.home{--sec:64px}}
.home h2{font-size:1.625rem}
@media (min-width:900px){.home h2{font-size:2.375rem;line-height:1.08}}
.home .head .lead{font-size:1rem}
@media (min-width:900px){
  .home section:not(#faq) .head:not(.center){max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .home section:not(#faq) .head:not(.center) .eyebrow{grid-column:1}
  .home section:not(#faq) .head:not(.center) h2{grid-column:1}
  .home section:not(#faq) .head:not(.center) .lead{grid-column:2;grid-row:2;margin:0;max-width:none}
  /* features: tabs sit beside the heading */
  #features .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:24px}
  #features .head{grid-column:1}
  #features .tabs{grid-column:2;margin-bottom:32px;align-self:end}
  #features .wrap>[role="tabpanel"],#features .wrap>p{grid-column:1/-1}
  /* trades: heading and chips side by side */
  #trades .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
  #trades .head{display:block!important;margin:0}
  #trades .head .lead{margin-top:12px!important}
}
/* steps: a swipe row of small cards on phones */
@media (max-width:899px){
  .home .steps.swipe>li{padding:16px;background:var(--surface);border-radius:20px;box-shadow:var(--puff)}
  .home .steps.swipe>li::before{position:static;display:grid;width:30px;height:30px;font-size:.875rem;margin-bottom:10px}
  .home .steps.swipe>li::after{display:none}
  .home .steps.swipe h3{margin:0 0 4px}
}
/* promises: a swipe row on phones */
@media (max-width:899px){
  .promise.puff.swipe{background:none;box-shadow:none;border-radius:0;padding:6px 20px 16px;margin-top:8px}
  .promise.puff.swipe>div{background:var(--surface);border-radius:20px;box-shadow:var(--puff);border:0!important;padding:14px 16px}
}
@media (max-width:899px){
  .home .big{font-size:2.375rem}
  .home .calc h2{font-size:1.5rem!important}
  .home .final ul{font-size:.9375rem;gap:6px}
  .home .field input{min-height:48px}
  .home .tbl.stack tr{padding:10px 14px}
  .home .tbl.stack tbody th,.home .tbl.stack td{padding:3px 0}
  .home .switch .btn{min-height:46px}
}

/* round 3: honest answers live in a features tab */
.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;white-space:nowrap}
@media (max-width:420px){.tabs button{padding:0 12px;font-size:.875rem}}
.hlead{margin:0 0 12px;color:var(--muted);font-size:.9375rem;max-width:46em}
.hlead b{color:var(--ink)}
@media (min-width:900px){.honestp .honest{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home .trades a,.home .trades .trades-btn{min-height:40px;padding:0 14px;font-size:.875rem}
@media (min-width:900px){
  .home{--sec:56px}
  footer{padding-block:40px}
  footer .bottom{margin-top:28px}
  .home .final{padding:36px 40px}
}

/* round 4: phone tightening */
@media (max-width:899px){
  .home{--sec:40px}
  .home .head{margin-bottom:18px}
  .home .sms{padding:18px}.home .sms dl{gap:6px 12px;font-size:.875rem}.home .sms .acts{margin-top:12px}
  .home .calc{padding:18px;gap:14px}
  .home .calc label{gap:2px;margin-bottom:6px}
  .home .calc input[type=range]{height:24px}
  .home .result{padding:16px}
  .home .result .cost{margin-top:10px;padding:10px 12px}
  .home .result .small{margin-top:8px!important}
  .home .pilotbar{font-size:.875rem}
  .home .plan{padding:20px}
  .home .ticks li{font-size:.875rem}
  .home .final{padding:22px 18px}
  .home .final .lead{font-size:1rem}
  footer{padding-bottom:96px}
  footer .tagline{margin-top:8px}
}

/* round 5 */
.also{margin-top:10px}
.also summary{cursor:pointer;font-weight:600;color:var(--primary-ink);padding:6px 0;width:max-content;max-width:100%}
.also p{margin:4px 0 0;max-width:60em}
@media (min-width:900px){#features .wrap>details{grid-column:1/-1}}
/* compare on phones: each service as one compact card, three values side by side */
@media (max-width:700px){
  .home .tbl.stack tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px;padding:12px 14px}
  .home .tbl.stack tbody th{grid-column:1/-1;padding:0 0 4px;font-size:1rem}
  .home .tbl.stack td{display:block;text-align:left;padding:0;font-size:.875rem;line-height:1.35}
  .home .tbl.stack td::before{display:block;font-size:.75rem;margin-bottom:2px}
  .fold .home .foldable:not(.open) tr.more,.fold .foldable:not(.open) .tbl.stack tr.more{display:none}
}
#pricing .head .lead p{margin:0}
#pricing .head .pilotbar{margin:12px 0 0}
@media (max-width:899px){.home .swipe{padding-bottom:14px}.home .promise.puff.swipe{padding-bottom:12px}}
@media (max-width:899px){
  .home{--sec:36px}
  .home h2{font-size:1.5rem}
  .home .calc h2{font-size:1.375rem!important}
  .home .result .cost{background:none;padding:0;margin-top:8px}
}
@media (max-width:639px){.plans.swipe>*{flex-basis:88%}}
.promise span span{display:block;line-height:1.4;margin-top:2px}
@media (min-width:900px){.home #features .head{display:block!important;max-width:40em}}
.t-sm{display:none}
@media (max-width:420px){.t-lg{display:none}.t-sm{display:inline}}