/* Layout: floating glass capsule nav; a pinned opening scene (questions on the right, three scroll steps on the left);
   then full-width colour "wallpaper" bands carrying iOS-style glass cards. Only transform/opacity ever animate. */
:root{
 --bg:#EEF1F6; --bg2:#E6EAF2; --ink:#0B0B0F; --ink2:#5A6070; --ink3:#8A90A0;
 --accent:#0A84FF; --accent2:#5E5CE6; --accent-ink:#0066D6; --ok:#30B65A;
 --glass:rgba(255,255,255,.56); --glass-hi:rgba(255,255,255,.74); --glass-in:rgba(255,255,255,.62);
 --glass-line:rgba(255,255,255,.75); --glass-edge:rgba(255,255,255,.95); --glass-low:rgba(255,255,255,.35);
 --drop:rgba(30,50,100,.16); --drop2:rgba(30,50,100,.08); --hair:rgba(20,30,60,.10);
 --w1:rgba(10,132,255,.34); --w2:rgba(175,82,222,.26); --w3:rgba(100,210,255,.30); --w4:rgba(255,55,95,.14); --w5:rgba(48,209,88,.14);
 --nav:rgba(255,255,255,.90); --nav2:rgba(246,248,252,.84); --tint:rgba(10,132,255,.10);
 --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
 --f-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
 --r-xl:34px; --r-lg:26px; --r-md:20px; --r-sm:14px;
 --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
 --bg:#000000; --bg2:#07080B; --ink:#F5F5F7; --ink2:#A4A8B4; --ink3:#6E7280;
 --accent:#0A84FF; --accent2:#7D7AFF; --accent-ink:#4DA3FF; --ok:#32D74B;
 --glass:rgba(44,46,54,.46); --glass-hi:rgba(52,54,64,.64); --glass-in:rgba(255,255,255,.07);
 --glass-line:rgba(255,255,255,.14); --glass-edge:rgba(255,255,255,.34); --glass-low:rgba(255,255,255,.06);
 --drop:rgba(0,0,0,.55); --drop2:rgba(0,0,0,.35); --hair:rgba(255,255,255,.10);
 --w1:rgba(10,132,255,.40); --w2:rgba(150,80,230,.34); --w3:rgba(60,170,255,.22); --w4:rgba(255,55,95,.16); --w5:rgba(48,209,88,.12);
 --nav:rgba(36,36,42,.90); --nav2:rgba(20,20,24,.86); --tint:rgba(10,132,255,.16); color-scheme:dark }}
:root[data-theme="dark"]{
 --bg:#000000; --bg2:#07080B; --ink:#F5F5F7; --ink2:#A4A8B4; --ink3:#6E7280;
 --accent:#0A84FF; --accent2:#7D7AFF; --accent-ink:#4DA3FF; --ok:#32D74B;
 --glass:rgba(44,46,54,.46); --glass-hi:rgba(52,54,64,.64); --glass-in:rgba(255,255,255,.07);
 --glass-line:rgba(255,255,255,.14); --glass-edge:rgba(255,255,255,.34); --glass-low:rgba(255,255,255,.06);
 --drop:rgba(0,0,0,.55); --drop2:rgba(0,0,0,.35); --hair:rgba(255,255,255,.10);
 --w1:rgba(10,132,255,.40); --w2:rgba(150,80,230,.34); --w3:rgba(60,170,255,.22); --w4:rgba(255,55,95,.16); --w5:rgba(48,209,88,.12);
 --nav:rgba(36,36,42,.90); --nav2:rgba(20,20,24,.86); --tint:rgba(10,132,255,.16); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--f-text);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px;border-radius:12px}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.025em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:600 15px/1.2 var(--f-text);color:var(--accent-ink);letter-spacing:0}
.h-xl{font-size:clamp(38px,6vw,64px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
.h-lg{font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:700}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.45;color:var(--ink2);max-width:640px}
.muted{color:var(--ink2)}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- the glass material ---------- */
.glass{position:relative;isolation:isolate;background:var(--glass);border-radius:var(--r-lg);
 box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 var(--glass-low),inset 0 0 0 1px var(--glass-line),0 1px 2px var(--drop2),0 22px 48px -22px var(--drop)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
 background:radial-gradient(140% 70% at 0% 0%,var(--glass-low),transparent 55%),linear-gradient(180deg,var(--glass-low),transparent 38%)}
.glass.hi{background:var(--glass-hi)}
/* rim: bright top-left edge fading to the bottom-right, like iOS */
.rim::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.5px;
 background:linear-gradient(140deg,var(--glass-edge),transparent 32%,transparent 66%,var(--glass-line));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lift{transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
@media (hover:hover){ .lift:hover{translate:0 -6px} }

/* buttons: iOS capsule, tinted "prominent" glass */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;
 font:600 16px/1 var(--f-text);color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.15),0 10px 22px -10px rgba(10,110,240,.7);
 transition:transform .3s var(--ease),filter .2s}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4;cursor:default}
.btn.sm{min-height:36px;padding:0 16px;font-size:14px}
.btn.lg{min-height:54px;padding:0 30px;font-size:18px}
.btn.clear{color:var(--ink);background:var(--glass-in);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 6px 14px -8px var(--drop)}
.more{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:500}

/* ---------- floating capsule nav ---------- */
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(940px,calc(100% - 24px));
 display:flex;align-items:center;gap:8px;padding:7px 7px 7px 16px;border-radius:999px;background:linear-gradient(180deg,var(--nav),var(--nav2));
 box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 10px 30px -12px var(--drop)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font:700 17px/1 var(--f-display);letter-spacing:-.02em;margin-right:auto}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px}
.brand b{color:var(--accent-ink);font-weight:700}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:8px 12px;border-radius:999px;color:var(--ink);font-size:14px;font-weight:500}
.nav-links a:hover{text-decoration:none;background:var(--glass-in)}
@media all{ .nav-links{display:none} }

/* ---------- colour wallpaper (static gradients; never animated except by scroll transform) ---------- */
.band{position:relative;padding-block:120px;background-color:var(--bg)}
.band.w-a{background-image:radial-gradient(700px 520px at 10% 12%,var(--w1),transparent 70%),radial-gradient(620px 520px at 95% 35%,var(--w2),transparent 70%),radial-gradient(700px 520px at 45% 96%,var(--w3),transparent 70%),radial-gradient(520px 420px at 75% 78%,var(--w4),transparent 70%)}
.band.w-b{background-image:radial-gradient(640px 520px at 92% 10%,var(--w2),transparent 70%),radial-gradient(700px 600px at 6% 62%,var(--w1),transparent 70%),radial-gradient(560px 480px at 70% 96%,var(--w5),transparent 70%)}
.band.w-c{background-image:radial-gradient(620px 460px at 12% 30%,var(--w3),transparent 70%),radial-gradient(640px 460px at 88% 72%,var(--w2),transparent 70%)}
.band.w-d{background-image:radial-gradient(700px 520px at 86% 18%,var(--w1),transparent 70%),radial-gradient(600px 520px at 8% 82%,var(--w2),transparent 70%),radial-gradient(480px 380px at 50% 50%,var(--w5),transparent 70%)}
.band.w-e{background-image:radial-gradient(700px 520px at 28% 30%,var(--w1),transparent 70%),radial-gradient(700px 520px at 76% 72%,var(--w2),transparent 70%),radial-gradient(500px 400px at 50% 100%,var(--w4),transparent 70%)}
.band + .band{border-top:1px solid var(--hair)}
.below{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.head{display:grid;gap:14px;margin-bottom:56px}
.head.center{justify-items:center;text-align:center}

/* ---------- 1. opening scene ---------- */
.opener{position:relative;background-color:var(--bg)}
.pin{position:relative;overflow:clip;padding-block:120px 80px}
.wall{position:absolute;inset:-90px -5% -10%;pointer-events:none}
.wall i{position:absolute;border-radius:50%}
.wall .b1{width:820px;height:820px;left:-260px;top:-240px;background:radial-gradient(circle,var(--w1),transparent 68%)}
.wall .b2{width:760px;height:760px;right:-200px;top:-80px;background:radial-gradient(circle,var(--w2),transparent 68%)}
.wall .b3{width:700px;height:700px;left:38%;bottom:-300px;background:radial-gradient(circle,var(--w3),transparent 68%)}
.wall .b4{width:520px;height:520px;left:24%;top:30%;background:radial-gradient(circle,var(--w4),transparent 68%)}
.ring{position:absolute;left:max(-200px,calc((100% - 1180px) / 2 - 220px));top:50%;width:620px;height:620px;margin-top:-310px;pointer-events:none}
.ring span{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.ring span:nth-child(1){inset:0}.ring span:nth-child(2){inset:90px;border-style:dashed}.ring span:nth-child(3){inset:180px}
.ring b{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent);transform:rotate(var(--a)) translateX(310px)}
.ring b:nth-of-type(even){width:8px;height:8px;margin:-4px;transform:rotate(var(--a)) translateX(220px)}
.op-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.stages{position:relative;min-width:0}
.st{display:grid;gap:18px;align-content:center}
.st2,.st3{display:none}
.mark{width:64px;height:64px;border-radius:18px;display:grid;place-items:center}
.mark img{width:44px;height:44px}
.st h1{font-size:clamp(40px,5.4vw,64px);line-height:1.03;font-weight:700;letter-spacing:-.04em}
.st h2{font-size:clamp(34px,4.4vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.035em}
.st .lede{max-width:520px}
.points{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;font-size:16px}
.points li{display:flex;align-items:center;gap:10px}
.tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tick svg{width:12px;height:12px}
.chips,.pills{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px}
.chip{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md)}
.chip .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#3B9BFF,#5E5CE6);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.chip .ic svg{width:21px;height:21px;fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip b{display:block;font-size:16px;line-height:1.2}
.chip small{display:block;font-size:13px;line-height:1.3;color:var(--ink2);margin-top:2px}
.pp{display:grid;gap:2px;padding:16px 18px;border-radius:var(--r-md);color:var(--ink)}
.pp:hover{text-decoration:none}
.pp .n{font-size:14px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pp .p{font:700 32px/1.1 var(--f-display);letter-spacing:-.03em}
.pp .p small{font-size:15px;font-weight:500;color:var(--ink2);letter-spacing:0}
.pp .d{font-size:13px;color:var(--ink2)}
.pp.rec{background:linear-gradient(160deg,var(--tint),transparent 70%),var(--glass)}
.tag-rec{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font:600 11px/1.3 var(--f-text);color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.dots{display:none;gap:8px;margin-top:6px}
.dots span{width:8px;height:8px;border-radius:8px;background:var(--ink3);opacity:.45;transform-origin:0 50%}

/* questions card */
.quiz{padding:26px 26px 22px;border-radius:var(--r-xl);background:var(--glass-hi);min-width:0}
.q-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}
.q-top .step{color:var(--ink2);font-weight:500}
.q-bar{height:4px;border-radius:4px;background:var(--glass-in);margin:12px 0 22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.q-bar i{display:block;height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:0 50%;transform:scaleX(.08);transition:transform .6s var(--ease)}
.q-body{display:grid;gap:16px}
.q-body.swap{animation:qIn .45s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-body h3,.q-body h2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.q-hint{font-size:14px;color:var(--ink2);margin-top:-10px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{min-height:52px;padding:12px 14px;border-radius:16px;border:0;cursor:pointer;text-align:left;font:500 15px/1.3 var(--f-text);color:var(--ink);
 background:var(--glass-in);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 1px 2px var(--drop2);
 transition:transform .3s var(--ease),background .2s,box-shadow .2s}
.opt:hover{transform:translateY(-2px)}
.opt[aria-pressed="true"]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--accent),inset 0 1px 0 var(--glass-edge)}
.q-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.link-btn{background:none;border:0;padding:8px 4px;min-height:44px;font:500 15px/1 var(--f-text);color:var(--accent-ink);cursor:pointer}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink2)}
.field input{width:100%;min-height:46px;padding:10px 14px;border-radius:14px;border:0;font:400 16px/1.3 var(--f-text);color:var(--ink);background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 2px var(--drop2)}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2);line-height:1.4}
.consent input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}
.err{color:#E5484D;font-size:14px;font-weight:500}
.res-plan{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:20px;background:linear-gradient(160deg,var(--tint),transparent 80%),var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.res-plan b{font:700 30px/1 var(--f-display);letter-spacing:-.03em}
.res-plan span{font-size:14px;color:var(--ink2)}
.reasons{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.reasons li{display:flex;gap:10px}
.reasons li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--accent)}
.note{font-size:12px;color:var(--ink3);text-align:center}

/* ---------- 2. pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 22px 26px;border-radius:var(--r-xl);scroll-margin-top:100px}
.plan .pm{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:6px}
.plan .pm img{width:36px;height:36px}
.plan h3{font-size:28px;font-weight:700}
.plan .tg{font-size:15px;line-height:1.4;color:var(--ink2);min-height:42px}
.price{margin-top:10px;font:700 50px/1 var(--f-display);letter-spacing:-.04em}
.price .num{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.price small{font-size:17px;font-weight:500;color:var(--ink2);letter-spacing:0}
.plan .fine{font-size:13px;color:var(--ink3);margin-bottom:10px}
.plan ul{list-style:none;margin:14px 0 0;padding:18px 0 0;border-top:1px solid var(--hair);width:100%;display:grid;gap:11px;font-size:15px;line-height:1.35}
.plan.pro{background:linear-gradient(165deg,var(--tint),transparent 60%),var(--glass-hi);translate:0 -8px;
 box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 40px 80px -36px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (hover:hover){ .plan.pro.lift:hover{translate:0 -14px} }
.badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 14px;border-radius:999px;font:600 12px/1 var(--f-text);letter-spacing:.02em;color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px rgba(10,110,240,.7)}
.badge.match{background:linear-gradient(180deg,#3ED36B,#24A84B);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px rgba(36,168,75,.7)}
.plan.matched{box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 2px var(--ok),0 40px 80px -36px var(--drop)}
.cmp{margin-top:100px}
.cmp-box{margin-top:28px;overflow-x:auto;border-radius:var(--r-xl);padding:8px 22px}
table{width:100%;min-width:680px;border-collapse:collapse;font-size:15px}
th,td{padding:15px 10px;text-align:center;border-bottom:1px solid var(--hair)}
tr:last-child th,tr:last-child td{border-bottom:0}
thead th{font:700 18px/1.2 var(--f-display)}
thead th span{display:block;font:500 13px/1.4 var(--f-text);color:var(--ink2)}
tbody th{text-align:left;font-weight:500}
td.y{color:var(--accent-ink);font-size:20px}
td.n{color:var(--ink3)}
.addons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.addon{display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--r-lg)}
.addon h4{font-size:18px;font-weight:700}
.addon p{font-size:14px;color:var(--ink2);line-height:1.45}
.ap{justify-self:start;margin-top:4px;padding:6px 12px;border-radius:999px;font:600 14px/1 var(--f-text);color:var(--accent-ink);background:var(--tint)}

/* ---------- 3. services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--r-xl);min-height:280px;overflow:hidden;min-width:0}
.tile .k{font-size:14px;font-weight:600;color:var(--ink2)}
.tile h3{font-size:26px;line-height:1.12;font-weight:700}
.t-chat{grid-column:span 2}
.t-emma{grid-row:span 2;padding:0;justify-content:flex-end;color:#FFFFFF;background:#000;min-height:420px}
.t-emma img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.t-emma .cap{position:relative;margin:16px;padding:16px 18px;border-radius:22px;background:rgba(16,16,22,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12)}
.t-emma .cap b{display:block;font:700 19px/1.2 var(--f-display)}
.t-emma .cap span{font-size:13px;color:rgba(255,255,255,.8)}
.t-web{grid-column:span 2}
.t-flow{grid-column:span 2}
.chat{display:grid;gap:8px;margin-top:auto;max-width:440px}
.bub{max-width:80%;padding:10px 14px;border-radius:20px;font-size:15px;line-height:1.35}
.bub.in{justify-self:start;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line);border-bottom-left-radius:6px}
.bub.out{justify-self:end;color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);border-bottom-right-radius:6px}
.browser{margin-top:auto;border-radius:16px;overflow:hidden;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.bw-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--hair);font-size:12px;color:var(--ink2)}
.bw-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink3);opacity:.5}
.bw-bar span{margin-left:8px}
.bw-body{display:grid;gap:10px;padding:18px}
.bw-body b{height:14px;width:58%;border-radius:6px;background:var(--ink)}
.bw-body em{height:8px;border-radius:4px;background:var(--ink3);opacity:.5}
.bw-body em.s{width:70%}
.bw-body u{width:96px;height:28px;border-radius:999px;background:var(--accent)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:auto}
.cal span{aspect-ratio:1;border-radius:9px;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.cal span.on{background:linear-gradient(180deg,#3B9BFF,#0A7BF5)}
.cal span.on2{background:var(--tint);box-shadow:inset 0 0 0 2px var(--accent)}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.feed i{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,var(--w1),var(--w2))}
.feed i:nth-child(2){background:linear-gradient(135deg,var(--w3),var(--w5))}
.feed i:nth-child(3){background:linear-gradient(135deg,var(--w4),var(--w2))}
.call{margin-top:auto;display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.call .ph{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#3ED36B,#24A84B)}
.call .ph svg{width:20px;height:20px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.call b{display:block;font-size:15px}
.call small{font-size:13px;color:var(--ink2)}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.flow span{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.flow i{width:18px;height:2px;border-radius:2px;background:var(--accent)}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;margin-top:auto}
.bars span{flex:1;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--accent),var(--accent2));transform-origin:50% 100%}

/* ---------- 4. how it works ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{display:grid;gap:10px;align-content:start;padding:26px;border-radius:var(--r-lg)}
.sn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--f-display);color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.steps h3{font-size:22px;font-weight:700}
.steps p{font-size:15px;color:var(--ink2)}

/* ---------- 5. the maths ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-col{display:grid;gap:8px;padding:30px;border-radius:var(--r-xl)}
.vs-col .k{font-size:14px;font-weight:600;color:var(--ink2)}
.vs-col .k.a{color:var(--accent-ink)}
.vs-num{font:700 clamp(40px,5vw,60px)/1 var(--f-display);letter-spacing:-.04em}
.vs-num.dim{color:var(--ink3)}
.meter{height:8px;border-radius:8px;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;border-radius:8px;background:var(--ink3);transform-origin:0 50%}
.meter i.blue{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.rows{margin-top:16px;border-radius:var(--r-xl);padding:6px 24px}
.row{display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair);font-size:15px}
.row:last-child{border-bottom:0}
.row .a{color:var(--accent-ink);font-weight:600;text-align:right}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.stat{display:grid;gap:8px;padding:26px;border-radius:var(--r-lg)}
.stat .big{font:700 50px/1 var(--f-display);letter-spacing:-.04em}
.stat p{font-size:15px;color:var(--ink2)}

/* ---------- 6. FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.qa{border-radius:var(--r-md);padding:0 22px}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:66px;cursor:pointer;font:600 18px/1.3 var(--f-display);letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line);transition:transform .35s var(--ease)}
.qa summary i::before{content:"+";font:500 20px/1 var(--f-text);color:var(--ink2)}
.qa[open] summary i{transform:rotate(45deg)}
.qa p{padding:0 0 20px;color:var(--ink2);max-width:680px}

/* ---------- closing + footer ---------- */
.closing{display:grid;justify-items:center;gap:18px;text-align:center;padding:64px 28px;border-radius:40px}
.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.email{font-weight:600;user-select:all}
.foot{background:var(--bg2);border-top:1px solid var(--hair);padding-block:36px 44px;font-size:13px;color:var(--ink2)}
.notes{margin:0 0 24px;padding:0 0 20px 16px;border-bottom:1px solid var(--hair);display:grid;gap:6px;line-height:1.5}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.cols h4,.cols .fh{font:600 13px/1.4 var(--f-text);color:var(--ink);margin-bottom:6px;text-shadow:none;letter-spacing:0}
.cols a{display:block;color:var(--ink2);line-height:2.1}
.base{display:flex;justify-content:space-between;gap:16px;padding-top:16px;flex-wrap:wrap}
.float{position:fixed;z-index:40;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);display:none}

/* ---------- motion: scroll-driven where supported (all composited) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes growY{from{transform:scaleY(.15)}to{transform:none}}
@keyframes stOut{from{opacity:1;visibility:visible;transform:none}to{opacity:0;visibility:hidden;transform:translateY(-44px)}}
@keyframes stIn{from{opacity:0;visibility:hidden;transform:translateY(52px)}to{opacity:1;visibility:visible;transform:none}}
@keyframes stMid{0%{opacity:0;visibility:hidden;transform:translateY(52px)}22%,74%{opacity:1;visibility:visible;transform:none}100%{opacity:0;visibility:hidden;transform:translateY(-44px)}}
@keyframes pop{from{opacity:0;transform:translateY(34px) scale(.92)}to{opacity:1;transform:none}}
@keyframes turn{from{transform:rotate(0deg) scale(.9)}to{transform:rotate(140deg) scale(1.15)}}
@keyframes drift{to{transform:translateY(-140px)}}
@keyframes dot{0%,100%{opacity:.45;transform:none}30%,70%{opacity:1;transform:scaleX(3);background:var(--accent)}}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){
 .st1>*{animation:enter .9s var(--ease) both}
 .st1>*:nth-child(2){animation-delay:.06s}.st1>*:nth-child(3){animation-delay:.12s}.st1>*:nth-child(4){animation-delay:.18s}.st1>*:nth-child(5){animation-delay:.24s}.st1>*:nth-child(6){animation-delay:.3s}
 .quiz{animation:enter 1s var(--ease) .15s both}
 @supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .meter i{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  .bars span{animation:growY linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
 }
}
@media (max-width:0px){
 @supports (animation-timeline: view()){
  .opener{height:2600px;view-timeline-name:--op}
  .pin{position:sticky;top:0;height:100vh;min-height:680px;max-height:960px;display:flex;align-items:center;padding-block:84px 24px}
  .pin>.wrap{width:100%}
  .st2,.st3{display:grid;position:absolute;left:0;right:0;top:50%;translate:0 -50%}
  .dots{display:flex}
  .wall{animation:drift linear both;animation-timeline:--op;animation-range:contain 0% contain 100%}
  .ring{animation:turn linear both;animation-timeline:--op;animation-range:contain 0% contain 100%}
  .stages>.st1{animation:stOut linear both;animation-timeline:--op;animation-range:contain 16% contain 28%}
  .stages>.st2{animation:stMid linear both;animation-timeline:--op;animation-range:contain 27% contain 61%}
  .stages>.st3{animation:stIn linear both;animation-timeline:--op;animation-range:contain 63% contain 74%}
  .chip,.pp{animation:pop linear both;animation-timeline:--op}
  .chip:nth-child(1){animation-range:contain 30% contain 38%}.chip:nth-child(2){animation-range:contain 31.5% contain 39.5%}
  .chip:nth-child(3){animation-range:contain 33% contain 41%}.chip:nth-child(4){animation-range:contain 34.5% contain 42.5%}
  .chip:nth-child(5){animation-range:contain 36% contain 44%}.chip:nth-child(6){animation-range:contain 37.5% contain 45.5%}
  .pp:nth-child(1){animation-range:contain 68% contain 76%}.pp:nth-child(2){animation-range:contain 70% contain 78%}
  .pp:nth-child(3){animation-range:contain 72% contain 80%}.pp:nth-child(4){animation-range:contain 74% contain 82%}
  .dots span{animation:dot linear both;animation-timeline:--op}
  .dots span:nth-child(1){animation-range:contain -10% contain 28%}.dots span:nth-child(2){animation-range:contain 24% contain 68%}.dots span:nth-child(3){animation-range:contain 64% contain 115%}
 }
}

/* ---------- responsive ---------- */
@media all{ .plans,.addons{grid-template-columns:repeat(2,minmax(0,1fr))} .plan.pro{translate:none} .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media all{
 .op-grid{grid-template-columns:1fr;gap:28px}
 .pin{padding-block:96px 56px}
 .ring{display:none}
 .bento{grid-template-columns:1fr 1fr}
 .t-emma{grid-row:span 1;min-height:460px}
}
@media all{
 .band{padding-block:72px}
 .head{margin-bottom:32px}
 .plans,.addons,.steps,.vs,.stats,.bento,.two,.cols{grid-template-columns:1fr}
 .t-chat,.t-web,.t-flow{grid-column:auto}
 .st .lede,.points{display:none}
 .quiz{padding:20px 16px 18px}
 .opts{grid-template-columns:1fr}
 .row{grid-template-columns:1fr;gap:4px}
 .row .a{text-align:left}
 .cmp{margin-top:64px}

}

/* ================= v2: iOS behaviour layer ================= */
:root{ --spring:cubic-bezier(.34,1.4,.64,1) }
/* app-icon logo: iOS squircle, deep glass backplate, specular top, rim */
.appicon{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;overflow:hidden;isolation:isolate;
 background:radial-gradient(120% 90% at 30% 0%,#2A3B66 0%,#0E1630 55%,#060914 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.22),0 4px 10px -3px rgba(10,80,200,.55),0 0 0 .5px rgba(0,0,0,.12)}
.appicon::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 52%),radial-gradient(70% 50% at 50% 110%,rgba(64,170,255,.55),transparent 70%)}
.appicon::after{content:"";position:absolute;left:-30%;top:-60%;width:160%;height:90%;z-index:3;pointer-events:none;border-radius:50%;
 background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);transform:rotate(-12deg)}
.appicon img{position:relative;z-index:1;width:74%;height:auto;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(70,190,255,.55))}
.appicon.lg{width:72px;height:72px;border-radius:19px}
.appicon.md{width:52px;height:52px;border-radius:14px}
.brand{gap:10px}
.brand .wm{display:grid;line-height:1}
.brand .wm span{font:700 17px/1 var(--f-display);letter-spacing:-.02em}
.brand .wm small{font:500 11.5px/1.3 var(--f-text);color:var(--ink2);letter-spacing:.02em;margin-top:2px}
@media (hover:hover){ .brand:hover .appicon{transform:scale(1.06) rotate(-3deg)} }
.appicon{transition:transform .5s var(--spring)}

/* iOS 26 tab-bar style nav: a liquid "lens" slides to the section you're in, bar tightens when you scroll */
.nav{transition:padding .45s var(--spring),width .45s var(--spring),box-shadow .3s}
.nav.compact{width:min(760px,calc(100% - 24px));padding:5px 5px 5px 10px}
.nav-links{position:relative}
.nav-links a{position:relative;z-index:1;transition:color .3s}
.nav-links a.on{color:var(--accent-ink)}
.lens{position:absolute;z-index:0;top:0;left:0;height:100%;width:var(--lw,0px);transform:translateX(var(--lx,0px));border-radius:999px;opacity:0;
 background:var(--glass-in);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 4px 12px -6px var(--drop);
 transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s}
.lens.on{opacity:1}

/* press feedback everywhere, like iOS */
.btn,.opt,.pp,.chip,.lift,.qa summary,.grow-row{-webkit-tap-highlight-color:transparent}
.btn:active,.opt:active{transform:scale(.96);transition-duration:.12s}
.lift:active{scale:.985;transition:scale .12s}
/* quiz options become iOS selection rows with a check circle */
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opt::after{content:"";flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink3);transition:background .25s,box-shadow .25s,transform .35s var(--spring)}
.opt[aria-pressed="true"]::after{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:none;transform:scale(1.08)}

/* light that follows the pointer across glass (desktop only, only on the card under the mouse) */
.glass{--mx:50%;--my:-40%}
@media (hover:hover){
 .glass.lit::before{background:radial-gradient(420px circle at var(--mx) var(--my),var(--glass-low),transparent 60%),radial-gradient(140% 70% at 0% 0%,var(--glass-low),transparent 55%),linear-gradient(180deg,var(--glass-low),transparent 38%)}
}

/* iOS "inset grouped" lists for add-ons and FAQ */
.group{border-radius:var(--r-lg);overflow:hidden;padding:0}
.grow-row{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:64px;position:relative}
.grow-row+.grow-row::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--hair)}
.grow-row .gi{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.grow-row .gi svg{width:19px;height:19px;fill:none;stroke:#FFFFFF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.grow-row .gt{flex:1;min-width:0;display:grid;gap:1px}
.grow-row .gt b{font-size:16px;font-weight:600}
.grow-row .gt small{font-size:13.5px;color:var(--ink2);line-height:1.35}
.grow-row .gv{flex:none;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.addon-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.c1{background:linear-gradient(180deg,#5AC8FA,#0A84FF)}.c2{background:linear-gradient(180deg,#BF5AF2,#8E44D6)}.c3{background:linear-gradient(180deg,#FF9F0A,#F27A00)}
.c4{background:linear-gradient(180deg,#FF375F,#E0234A)}.c5{background:linear-gradient(180deg,#30D158,#22A846)}.c6{background:linear-gradient(180deg,#64D2FF,#30A8E6)}
.c7{background:linear-gradient(180deg,#5E5CE6,#4140C0)}.c8{background:linear-gradient(180deg,#8E8E93,#6C6C70)}
.faq.group{max-width:820px;margin:0 auto}
.faq .qa{border-radius:0;padding:0 20px;box-shadow:none;background:none}
.faq .qa+.qa{border-top:1px solid var(--hair)}
.faq .qa summary{min-height:62px;font-size:17px}
.faq .qa summary i{background:none;box-shadow:none;width:20px}
.faq .qa summary i::before{content:"";width:9px;height:9px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(-45deg)}
.faq .qa[open] summary i{transform:rotate(90deg)}
.faq .qa p{padding:0 0 18px}
section[id],[id^="plan-"],#addons{scroll-margin-top:92px}
.vs-note{margin-top:14px;font-size:14px;color:var(--ink2)}
@media all{ .addon-groups{grid-template-columns:1fr} .brand .wm small{display:none} }

/* ================= v3: mobile menu, chat assistant ================= */
.menu-btn{display:none;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 14px/1 var(--f-text);color:var(--ink);
 background:var(--glass-in);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line)}
.menu-btn i{position:relative;width:14px;height:10px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--spring),top .35s var(--spring)}
.menu-btn i::before{top:1px}.menu-btn i::after{top:7px}
.menu-btn[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}.menu-btn[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}
.msheet{position:fixed;z-index:49;top:calc(env(safe-area-inset-top,0px) + 70px);left:12px;right:12px;padding:8px;border-radius:26px;display:grid;
 transform-origin:50% 0;animation:sheetIn .4s var(--spring)}
.msheet a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 16px;border-radius:16px;color:var(--ink);font:600 17px/1 var(--f-text)}
.msheet a::after{content:"›";color:var(--ink3);font-size:22px}
.msheet a:hover{text-decoration:none;background:var(--glass-in)}
.msheet a+a{border-top:1px solid var(--hair)}
@keyframes sheetIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@media all{ .menu-btn{display:inline-flex} }
@media all{ .menu-btn{width:36px;padding:0;justify-content:center;font-size:0;gap:0} .nav .head-cta{padding:0 14px} .brand .wm span{font-size:16px} .nav{gap:6px;padding-left:10px} }
@media all{ .float{left:max(16px,env(safe-area-inset-left,0px));transform:none} }

/* chat launcher */
.chat-fab{position:fixed;z-index:45;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
 display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 8px;border:0;border-radius:999px;cursor:pointer;color:var(--ink);font:600 15px/1 var(--f-text);
 background:var(--glass-hi);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 18px 40px -16px var(--drop);transition:transform .4s var(--spring)}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab:active{transform:scale(.95)}
.chat-fab .appicon{width:40px;height:40px;border-radius:12px}
.chat-fab .dot{position:absolute;left:38px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg)}
@media all{ .chat-fab{padding:0 8px;min-height:56px} .chat-fab .lbl{display:none} }

/* chat sheet */
.chatbox{position:fixed;z-index:56;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
 width:min(400px,calc(100vw - 36px));height:min(640px,calc(100dvh - 120px));display:flex;flex-direction:column;border-radius:30px;overflow:hidden;
 background:var(--glass-hi);transform-origin:100% 100%;animation:chatIn .45s var(--spring)}
.chatbox.solid{background:linear-gradient(180deg,var(--glass-hi),var(--glass-hi)),var(--bg)}
@keyframes chatIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@media all{ .chatbox{left:8px;right:8px;width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);height:calc(100dvh - env(safe-area-inset-top,0px) - 24px);border-radius:28px} }
.cb-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--hair)}
.cb-head .appicon{width:38px;height:38px;border-radius:11px}
.cb-head b{display:block;font:700 16px/1.2 var(--f-display)}
.cb-head small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2)}
.cb-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.cb-x{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--ink2);font:500 20px/1 var(--f-text);background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.cb-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.m{max-width:84%;padding:10px 14px;border-radius:20px;font-size:15px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere;animation:mIn .35s var(--spring)}
@keyframes mIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.m.bot{align-self:flex-start;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line);border-bottom-left-radius:6px}
.m.me{align-self:flex-end;color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);border-bottom-right-radius:6px}
.m.sys{align-self:center;max-width:92%;font-size:12.5px;color:var(--ink2);background:none;padding:2px 8px;text-align:center}
.m b{font-weight:700}
.typing{display:inline-flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.quick{display:flex;gap:8px;overflow-x:auto;padding:4px 14px 10px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.qr{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 13.5px/1 var(--f-text);color:var(--accent-ink);background:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .3s var(--spring)}
.qr:active{transform:scale(.95)}
.cb-in{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair)}
.cb-in textarea{flex:1;min-height:42px;max-height:120px;resize:none;padding:11px 16px;border:0;border-radius:22px;font:400 16px/1.3 var(--f-text);color:var(--ink);background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line)}
.cb-in textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.send{flex:none;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:transform .3s var(--spring),opacity .2s}
.send svg{width:18px;height:18px;fill:none;stroke:#FFFFFF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.send:disabled{opacity:.4}
.send:active{transform:scale(.9)}
.m-actions{align-self:flex-start;display:flex;gap:8px;flex-wrap:wrap}
/* booking card */
.bk{align-self:stretch;display:grid;gap:12px;padding:14px;border-radius:22px;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line);animation:mIn .35s var(--spring)}
.bk h4{font-size:15px;font-weight:700}
.bk .lab{font-size:12.5px;font-weight:600;color:var(--ink2)}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day,.slot{flex:none;border:0;cursor:pointer;border-radius:14px;color:var(--ink);background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line);transition:transform .3s var(--spring)}
.day{display:grid;gap:2px;justify-items:center;width:58px;padding:9px 0;font:600 12px/1.1 var(--f-text)}
.day b{font:700 19px/1 var(--f-display)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{min-height:38px;font:600 14px/1 var(--f-text);font-variant-numeric:tabular-nums}
.day[aria-pressed="true"],.slot[aria-pressed="true"]{color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.slot:disabled{opacity:.35;text-decoration:line-through;cursor:default}
.day:active,.slot:active{transform:scale(.94)}
.bk .field input{min-height:42px;font-size:15px}
.bk .two{gap:8px}
/* owner inbox */
.owner-btn{display:none}
.owner-btn.on{display:inline}
.inbox{position:fixed;z-index:56;inset:auto 0 0 0;margin:0 auto;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:min(720px,calc(100% - 24px));max-height:78dvh;overflow:auto;padding:20px;border-radius:28px;background:var(--glass-hi);animation:chatIn .45s var(--spring)}
.inbox h3{font-size:20px;margin-bottom:10px}
.inbox table{min-width:0;font-size:13.5px}
.inbox th,.inbox td{text-align:left;padding:9px 8px;vertical-align:top}

/* overlays (chat, menu, inbox) use real frosted blur: they sit over moving content, and only cost anything while open */
:root{--sheet:rgba(244,246,250,.80)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--sheet:rgba(28,28,34,.78)} }
:root[data-theme="dark"]{--sheet:rgba(28,28,34,.78)}
.chatbox,.msheet,.inbox{background:var(--sheet) !important;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
.bk{background:var(--glass)}
.bk .field input{background:var(--bg)}

/* ================= v4: spinning "everything connected" band under the questions =================
   Pure transform/opacity: the orbit is a flat circle squashed into an ellipse; each chip un-squashes itself,
   so the spin runs on the compositor. It only animates while the band is on screen. */
.ob{position:relative;color:#F5F5F7;background:#03050B;overflow:clip}
.ob-pin{position:relative;height:720px;display:grid;place-items:center;overflow:clip}
.ob-glow{position:absolute;left:50%;top:44%;width:1100px;height:760px;margin:-380px 0 0 -550px;pointer-events:none;
 background:radial-gradient(closest-side,rgba(10,132,255,.42),rgba(94,92,230,.18) 45%,transparent 75%)}
.ob-scene{position:absolute;left:50%;top:42%;width:0;height:0}
.ob-flat{position:absolute;left:0;top:0;transform:scaleY(.34)}
.ob-ring{position:absolute;left:0;top:0;border-radius:50%;border:2px solid rgba(90,170,255,.28);transform:translate(-50%,-50%)}
.ob-ring.r1{width:820px;height:820px}.ob-ring.r2{width:600px;height:600px;border-style:dashed;border-color:rgba(150,140,255,.26)}.ob-ring.r3{width:1040px;height:1040px;border-color:rgba(90,170,255,.12)}
.ob-slot{position:absolute;left:0;top:0;transform:rotate(0deg) translateX(410px) rotate(0deg)}
.ob-chip{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scaleY(2.9412)}
.ob-chip>span{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;white-space:nowrap;font:600 15px/1 var(--f-text);color:#F5F5F7;
 background:linear-gradient(160deg,#2B3448,#121722);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -16px rgba(0,0,0,.9)}
.ob-chip i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ob-chip svg{width:19px;height:19px;fill:none;stroke:#FFFFFF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ob-dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;background:#5AC8FA;box-shadow:0 0 14px 4px rgba(90,200,250,.6);transform:rotate(0deg) translateX(300px)}
.ob-core{position:absolute;left:0;top:0;z-index:2;transform:translate(-50%,-50%) scaleY(2.9412)}
.ob-core .appicon{width:132px;height:132px;border-radius:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.18),0 30px 80px -20px rgba(10,132,255,.8),0 0 0 10px rgba(10,132,255,.08)}
.ob-text{position:absolute;left:0;right:0;bottom:56px;display:grid;justify-items:center;text-align:center;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.ob-st{grid-area:1/1;display:grid;gap:12px;justify-items:center}
.ob-st h2{font-size:clamp(34px,5vw,60px);line-height:1.04;font-weight:700;letter-spacing:-.035em;color:#F5F5F7}
.ob-st p{font-size:clamp(16px,1.8vw,20px);color:#A4A8B4;max-width:560px}
.ob-st .more{color:#5AC8FA}
.ob-st2,.ob-st3{display:none}
.ob .c1{background:linear-gradient(180deg,#5AC8FA,#0A84FF)}

@keyframes obSpin{from{transform:rotate(0deg) translateX(410px) rotate(0deg)}to{transform:rotate(360deg) translateX(410px) rotate(-360deg)}}
@keyframes obDot{from{transform:rotate(0deg) translateX(300px)}to{transform:rotate(-360deg) translateX(300px)}}
@keyframes obDepth{0%{scale:.86;opacity:.85}25%{scale:1.1;opacity:1}50%{scale:.86;opacity:.85}75%{scale:.64;opacity:.5}100%{scale:.86;opacity:.85}}
@keyframes obZ{0%,49.9%{z-index:3}50%,100%{z-index:1}}
@keyframes obBob{50%{translate:0 -10px}}
@keyframes obCam{from{transform:translateY(40px) scale(.82)}to{transform:translateY(-30px) scale(1.12)}}
@keyframes obOut{from{opacity:1;visibility:visible;transform:none}to{opacity:0;visibility:hidden;transform:translateY(-36px)}}
@keyframes obIn{from{opacity:0;visibility:hidden;transform:translateY(40px)}to{opacity:1;visibility:visible;transform:none}}
@keyframes obMid{0%{opacity:0;visibility:hidden;transform:translateY(40px)}25%,75%{opacity:1;visibility:visible;transform:none}100%{opacity:0;visibility:hidden;transform:translateY(-36px)}}

@media (prefers-reduced-motion: no-preference){
 .ob-slot{animation:obSpin 30s linear infinite,obZ 30s linear infinite;animation-delay:calc(var(--k) * -3.75s)}
 .ob-chip>span{animation:obDepth 30s linear infinite;animation-delay:calc(var(--k) * -3.75s)}
 .ob-dot{animation:obDot 18s linear infinite;animation-delay:calc(var(--k) * -6s)}
 .ob-core .appicon{animation:obBob 6s ease-in-out infinite}
 .ob:not(.live) *{animation-play-state:paused !important}
 @supports (animation-timeline: view()){
  .ob{view-timeline-name:--ob}
  .ob-cam{animation:obCam linear both;animation-timeline:--ob;animation-range:contain 0% contain 100%}
 }
}
.ob-cam{position:absolute;inset:0}
@media (max-width:0px){
 @supports (animation-timeline: view()){
  .ob{height:2300px}
  .ob-pin{position:sticky;top:0;height:100vh;min-height:680px;max-height:980px}
  .ob-st2,.ob-st3{display:grid}
  .ob-text>.ob-st1{animation:obOut linear both;animation-timeline:--ob;animation-range:contain 26% contain 36%}
  .ob-text>.ob-st2{animation:obMid linear both;animation-timeline:--ob;animation-range:contain 32% contain 70%}
  .ob-text>.ob-st3{animation:obIn linear both;animation-timeline:--ob;animation-range:contain 68% contain 78%}
 }
}
@media all{
 .ob-pin{height:640px}
 .ob-flat{transform:scaleY(.34) scale(.62)}
 .ob-text{bottom:40px}
}
@media all{ .ob-flat{transform:scaleY(.34) scale(.46)} .ob-chip>span{font-size:13px} .ob-pin{height:600px} .ob-scene{top:40%} }

/* ================= v5: parallax depth + kinetic type (scroll-scrubbed, transform/opacity only) ================= */
.band{isolation:isolate}
.par{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.par i{position:absolute;border-radius:50%}
.par .p1{width:560px;height:560px;left:-160px;top:6%;background:radial-gradient(circle,var(--w1),transparent 68%)}
.par .p2{width:640px;height:640px;right:-200px;top:38%;background:radial-gradient(circle,var(--w2),transparent 68%)}
.par .p3{width:110px;height:110px;right:9%;top:16%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.25) 26%,color-mix(in srgb,var(--accent) 45%,transparent) 62%,color-mix(in srgb,var(--accent2) 60%,transparent));
 box-shadow:inset 0 -10px 24px color-mix(in srgb,var(--accent2) 40%,transparent),0 30px 60px -20px color-mix(in srgb,var(--accent) 60%,transparent)}
.par .p4{width:54px;height:54px;left:7%;bottom:14%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.2) 28%,color-mix(in srgb,var(--w3) 100%,transparent) 64%,color-mix(in srgb,var(--accent) 50%,transparent));box-shadow:0 20px 40px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
.par .p5{width:26px;height:26px;left:46%;top:8%;background:radial-gradient(circle at 32% 28%,#FFFFFF,color-mix(in srgb,var(--accent2) 70%,transparent))}

/* kinetic marquee strip */
.kin{position:relative;overflow:hidden;padding-block:70px;background:var(--bg);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.kin-row{display:flex;gap:.5em;width:max-content;white-space:nowrap;font:800 clamp(56px,9vw,140px)/1 var(--f-display);letter-spacing:-.045em}
.kin-row span{display:inline-block}
.kin-row .dotsep{color:var(--accent)}
.kin-row.r1{background:linear-gradient(90deg,var(--ink) 0%,var(--accent) 40%,var(--accent2) 60%,var(--ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kin-row.r2{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 35%,transparent);margin-top:10px}
.kin-row.r2 .dotsep{-webkit-text-stroke:0;color:var(--accent2)}

/* kinetic headings: words are split by script */
.kt{perspective:700px}
.kt .w{display:inline-block;transform-origin:50% 100%;will-change:auto}
.kt .w.g{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

@keyframes pSlow{from{transform:translateY(-140px)}to{transform:translateY(140px)}}
@keyframes pMid{from{transform:translateY(-60px)}to{transform:translateY(80px)}}
@keyframes pFast{from{transform:translateY(260px) scale(.9)}to{transform:translateY(-260px) scale(1.1)}}
@keyframes pFaster{from{transform:translateY(420px)}to{transform:translateY(-420px)}}
@keyframes dA{from{translate:0 30px}to{translate:0 -30px}}
@keyframes dB{from{translate:0 110px}to{translate:0 -110px}}
@keyframes dHead{from{translate:0 60px}to{translate:0 -40px}}
@keyframes kL{from{transform:translateX(0)}to{transform:translateX(-38%)}}
@keyframes kR{from{transform:translateX(-38%)}to{transform:translateX(0)}}
@keyframes wIn{from{opacity:0;transform:translateY(.55em) rotateX(-75deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes wLoad{from{opacity:0;transform:translateY(.5em) rotateX(-70deg)}to{opacity:1;transform:none}}
@keyframes heroOut{to{transform:translateY(-60px) scale(.96);opacity:.0}}

@media (prefers-reduced-motion: no-preference){
 .st1 h1.kt .w{animation:wLoad .9s var(--spring) both;animation-delay:calc(.15s + var(--i) * 70ms)}
 .st1 h1.kt{animation:none !important}
 @supports (animation-timeline: view()){
  .par i{animation:pSlow linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .par .p2{animation-name:pMid}
  .par .p3{animation-name:pFast}
  .par .p4{animation-name:pFaster}
  .par .p5{animation-name:pFast}
  .bento>.tile,.steps li:nth-child(odd),.vs-col:nth-child(odd),.addon-groups>.group:nth-child(odd){animation:rise linear both,dA linear both;animation-timeline:view(),view();animation-range:entry 0% entry 55%,cover 0% cover 100%}
  .bento>.t-emma,.bento>.tile:nth-child(6),.steps li:nth-child(even),.vs-col:nth-child(even),.addon-groups>.group:nth-child(even){animation:rise linear both,dB linear both;animation-timeline:view(),view();animation-range:entry 0% entry 55%,cover 0% cover 100%}
  .head{animation:dHead linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .kt .w{animation:wIn linear both;animation-timeline:view()}
  .head.rv{animation:dHead linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .plans{animation:dHead linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 }
}
@media all{ @supports (animation-timeline: view()){ .bento>.tile,.steps li,.vs-col,.addon-groups>.group{animation-name:rise,dA !important} } }
@media all{
 .par .p3{width:70px;height:70px}
 .kin{padding-block:44px}
}

/* ================= v6: real images in the website, bookings and social tiles ================= */
.shots{position:relative;margin-top:auto;padding-right:96px}
.shot-desk{margin:0;border-radius:16px;overflow:hidden;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line),0 24px 50px -24px var(--drop)}
.shot-desk img{display:block;width:100%;height:220px;object-fit:cover;object-position:top}
.shot-phone{position:absolute;right:0;bottom:-18px;width:118px;margin:0;border-radius:24px;overflow:hidden;border:4px solid #0B0C10;background:#0B0C10;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 30px 60px -20px rgba(0,0,0,.55)}
.shot-phone img{display:block;width:100%;border-radius:19px}
.cap-real{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:13.5px;color:var(--ink2)}
.cap-real .appicon{width:22px;height:22px;border-radius:7px}
.book-ui{margin:auto 0 0;border-radius:20px;overflow:hidden;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line),0 20px 40px -22px var(--drop)}
.bu-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--hair)}
.bu-head .appicon{width:28px;height:28px;border-radius:8px}
.bu-head b{display:block;font-size:13.5px}
.bu-head small{display:block;font-size:12px;color:var(--ink2)}
.book-ui>img{display:block;width:100%}
.try-book{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font:500 15px/1 var(--f-text);color:var(--accent-ink);min-height:36px}
.ig{margin:auto 0 0;border-radius:20px;overflow:hidden;background:var(--glass-in);box-shadow:inset 0 0 0 1px var(--glass-line),0 20px 40px -22px var(--drop)}
.ig-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig-ring{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(from 200deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75)}
.ig-ring .appicon{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
.ig-head b{display:block;font-size:13.5px}
.ig-head small{display:block;font-size:12px;color:var(--ink2)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
@keyframes phoneUp{from{translate:0 50px}to{translate:0 -50px}}
@media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){
 .shot-phone{animation:phoneUp linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}}
@media all{ .shots{padding-right:64px} .shot-phone{width:92px;border-radius:18px} .shot-desk img{height:170px} }

/* ================= v7: polish + micro-interactions ================= */
.tile{position:relative}
/* scroll progress inside the floating bar */
.nav{overflow:hidden}
.nav::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:0 50%;transform:scaleX(0);opacity:.85;pointer-events:none}
@keyframes navProg{to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ .nav::after{animation:navProg linear both;animation-timeline:scroll(root)} } }
/* lens previews the link you hover */
.nav-links:hover .lens{opacity:1}
/* magnetic buttons (desktop) */
.btn{translate:var(--tx,0) var(--ty,0);transition:transform .3s var(--ease),filter .2s,translate .5s var(--spring)}
/* scroll cue on the opening scene */
.cue{display:none;align-items:center;gap:10px;margin-top:10px;font-size:13px;font-weight:500;color:var(--ink2)}
.cue i{position:relative;width:20px;height:30px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ink3)}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:cueWheel 1.6s var(--ease) infinite}
@keyframes cueWheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
@keyframes cueOut{to{opacity:0;transform:translateY(10px)}}
@media (max-width:0px){ @supports (animation-timeline: view()){
 .cue{display:inline-flex;animation:cueOut linear both;animation-timeline:scroll(root);animation-range:0px 240px}
}}
/* add-on rows are buttons that ask the assistant */
.grow-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .25s}
.grow-row:hover{background:var(--glass-in)}
.grow-row:active{background:var(--tint)}
.grow-row .chev{flex:none;color:var(--ink3);font-size:20px;line-height:1;transition:transform .35s var(--spring),color .2s}
.grow-row:hover .chev{transform:translateX(3px);color:var(--accent-ink)}
.grow-row:focus-visible{outline-offset:-3px}
/* "Ask about this" chip on service tiles */
.ask{position:absolute;right:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 12px;border:0;border-radius:999px;cursor:pointer;
 font:600 12.5px/1 var(--f-text);color:var(--accent-ink);background:var(--glass-hi);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 6px 16px -8px var(--drop);
 opacity:0;transform:translateY(-4px) scale(.96);transition:opacity .3s,transform .4s var(--spring)}
.tile:hover .ask,.tile:focus-within .ask{opacity:1;transform:none}
@media (hover:none){ .ask{opacity:1;transform:none} }
.t-emma .ask{color:#FFFFFF;background:rgba(20,20,26,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
/* images inside tiles respond to hover */
.shot-desk img,.book-ui>img,.ig-grid img,.t-emma>img{transition:transform .8s var(--ease)}
.tile:hover .shot-desk img{transform:scale(1.025)}
.tile:hover .book-ui>img,.tile:hover .ig-grid img{transform:scale(1.04)}
.tile:hover.t-emma>img{transform:scale(1.03)}
.ig-grid{overflow:hidden}
/* Emma plays */
.play-emma{position:absolute;left:50%;top:44%;z-index:2;width:74px;height:74px;margin:-37px 0 0 -37px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
 background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.35),0 18px 40px -12px rgba(0,0,0,.6);
 transition:transform .45s var(--spring)}
.play-emma svg{width:26px;height:26px;margin-left:4px;fill:#FFFFFF}
.play-emma:hover{transform:scale(1.1)}
.play-emma:active{transform:scale(.94)}
.player{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:fadeIn .3s}
.player video{max-height:calc(100dvh - 120px);max-width:100%;aspect-ratio:9/16;border-radius:28px;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.9);animation:chatIn .45s var(--spring)}
.player .cb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:max(16px,env(safe-area-inset-right,0px));width:40px;height:40px;color:#FFFFFF;background:rgba(255,255,255,.18)}
@keyframes fadeIn{from{opacity:0}}
/* steps: number springs on hover */
.steps li .sn{transition:transform .45s var(--spring)}
.steps li:hover .sn{transform:scale(1.15) rotate(-6deg)}
/* FAQ opens smoothly */
.faq .qa p{animation:none}
.faq .qa[open] p{animation:qaIn .45s var(--ease)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@supports (interpolate-size: allow-keywords){
 .faq{interpolate-size:allow-keywords}
 .faq .qa::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
 .faq .qa[open]::details-content{height:auto}
}
.faq .qa summary{transition:color .2s}
.faq .qa summary:hover{color:var(--accent-ink)}
/* chat button says hello once */
.hello{position:fixed;z-index:44;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:calc(env(safe-area-inset-bottom,0px) + 86px);max-width:250px;padding:12px 34px 12px 14px;border-radius:18px 18px 6px 18px;
 font-size:14px;line-height:1.35;background:var(--sheet);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
 box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 18px 40px -16px var(--drop);animation:chatIn .5s var(--spring);cursor:pointer}
.hello button{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:50%;background:none;color:var(--ink3);font-size:16px;cursor:pointer}
@keyframes fabRing{0%{box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}100%{box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line),0 0 0 18px transparent}}
.chat-fab.ping{animation:fabRing 1.2s var(--ease) 2}
/* plan "Choose" buttons get an arrow that moves */
.plan .btn::after{content:"›";font-size:20px;line-height:0;transition:transform .35s var(--spring)}
.plan .btn:hover::after{transform:translateX(3px)}
/* sticky focus cues */
.opt:focus-visible,.grow-row:focus-visible,.qa summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent)}
@media (prefers-reduced-motion: reduce){ .cue,.chat-fab.ping{animation:none} .faq .qa::details-content{transition:none} }

/* fixes from the full check */
.ring{left:max(-320px,calc((100% - 1180px) / 2 - 360px));opacity:.55}
.ring b{width:9px;height:9px;margin:-4.5px}
.t-emma::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(6,7,12,.92) 55%,#06070C)}
.t-emma .cap{z-index:2;background:rgba(18,18,24,.6)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ================= v9: a page for every plan and service ================= */
.pg{position:fixed;inset:0;z-index:51;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);-webkit-overflow-scrolling:touch}
html.pg-open{overflow:hidden}
html.pg-open .chat-fab{z-index:53}
html.pg-open .nav{visibility:hidden}
.pg.in .pg-in,.pg.in .pg-bar{animation:pgIn .55s var(--spring) both}
.pg.in .pg-bar{animation-name:fadeIn;animation-duration:.3s}
@keyframes pgIn{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
.pg-glow{position:fixed;inset:0;pointer-events:none}
.pg-glow i{position:absolute;border-radius:50%}
.pg-glow i:nth-child(1){width:720px;height:720px;left:-220px;top:-200px;background:radial-gradient(circle,var(--w1),transparent 68%)}
.pg-glow i:nth-child(2){width:680px;height:680px;right:-220px;top:30%;background:radial-gradient(circle,var(--w2),transparent 68%)}
.pg-glow i:nth-child(3){width:560px;height:560px;left:30%;bottom:-260px;background:radial-gradient(circle,var(--w3),transparent 68%)}
.pg-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));
 background:var(--sheet);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 -1px 0 var(--hair)}
.pg-back{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 16px 0 12px;border:0;border-radius:999px;cursor:pointer;font:600 16px/1 var(--f-text);color:var(--accent-ink);
 background:var(--glass-in);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-line);transition:transform .3s var(--spring)}
.pg-back span{font-size:24px;line-height:0;margin-top:-2px}
.pg-back:active{transform:scale(.95)}
.pg-crumb{flex:1;text-align:center;font:600 16px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-mark{width:32px;height:32px;border-radius:9px}
.pg-in{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:40px max(20px,env(safe-area-inset-right,0px)) 120px max(20px,env(safe-area-inset-left,0px))}
.pg-hero{display:grid;justify-items:center;text-align:center;gap:12px;padding:20px 0 30px}
.pg-icon{width:88px;height:88px;border-radius:24px}
.pg-icon svg{position:relative;z-index:1;width:46px;height:46px;fill:none;stroke:#7FD3FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(70,190,255,.6))}
.pg-title{font-size:clamp(44px,8vw,76px);line-height:1;font-weight:700;letter-spacing:-.045em}
.pg-tag{font-size:clamp(19px,2.4vw,24px);color:var(--ink2);font-weight:500;letter-spacing:-.015em}
.pg-price{font:700 clamp(48px,7vw,68px)/1 var(--f-display);letter-spacing:-.04em;margin-top:8px}
.pg-price small{font-size:20px;font-weight:500;color:var(--ink2);letter-spacing:0}
.pg-setup,.pg-from{font-size:15px;color:var(--ink2)}
.pg-from{padding:8px 14px;border-radius:999px;background:var(--tint);color:var(--accent-ink);font-weight:600}
.pg-intro{max-width:620px;font-size:clamp(17px,2vw,19px);line-height:1.55;color:var(--ink2);margin-top:6px}
.pg-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.pg-h{margin:56px 0 18px;font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.03em}
.pg-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pg-group{padding:20px 22px}
.pg-group h3{font-size:18px;font-weight:700;margin-bottom:12px}
.pg-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15.5px;line-height:1.4}
.pg-group li{display:flex;gap:10px;align-items:flex-start}
.pg-group .tick{margin-top:1px}
.pg-note{margin-top:16px;font-size:15px;color:var(--ink2)}
.pg-fit{display:grid;gap:4px;margin-top:16px;padding:18px 22px;border-radius:var(--r-md)}
.pg-fit b{font-size:14px;color:var(--accent-ink)}
.pg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pg-steps li{display:grid;gap:12px;align-content:start;padding:20px;border-radius:var(--r-lg);font-size:15.5px;line-height:1.45}
.pg-form{display:grid;gap:12px;padding:24px;border-radius:var(--r-xl)}
.pg-done{display:grid;justify-items:center;gap:10px;text-align:center;padding:20px 0}
.pg-done h3{font-size:26px}
.tick.big{width:56px;height:56px}
.tick.big svg{width:26px;height:26px}
.pg-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pg-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);color:var(--ink);transition:transform .4s var(--spring)}
.pg-link:hover{text-decoration:none;transform:translateY(-3px)}
.pg-link .appicon{width:40px;height:40px;border-radius:11px}
.pg-link .appicon svg{position:relative;z-index:1;width:21px;height:21px;fill:none;stroke:#7FD3FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-link b{display:block;font-size:15.5px}
.pg-link small{display:block;font-size:13px;color:var(--ink2)}
.pg-link i{margin-left:auto;font-style:normal;font-size:22px;color:var(--ink3)}
.pg-group,.pg-steps li,.pg-fit,.pg-form,.pg-link{animation:enter .7s var(--ease) both}
.pg-groups>*:nth-child(2){animation-delay:.06s}.pg-groups>*:nth-child(3){animation-delay:.12s}.pg-groups>*:nth-child(4){animation-delay:.18s}.pg-groups>*:nth-child(5){animation-delay:.24s}
.plan-more{font-size:14.5px;min-height:36px}
.tile-more{position:relative;z-index:2;align-self:flex-start;margin-top:4px;font-size:15px}
.t-emma .tile-more{position:absolute;left:34px;bottom:12px;color:#7FD3FF}
.t-emma .cap{margin-bottom:46px}
@media all{ .pg-groups,.pg-steps{grid-template-columns:1fr} .pg-in{padding-top:24px} .pg-ctas .btn{flex:1 1 100%} }
@media (prefers-reduced-motion: reduce){ .pg.in .pg-in,.pg-group,.pg-steps li,.pg-fit,.pg-form,.pg-link{animation:none} }

/* v10: cards and tiles are pages */
.pg-title:focus,.q-body h3:focus,.q-body h2:focus{outline:none}
.plan[id^="plan-"],.bento>.tile[data-page]{cursor:pointer}
.bento>.tile[data-page]:hover .tile-more{text-decoration:underline}
.grow-row .chev{font-size:22px}

/* ================= v11: tidy marquee + thin offers ticker ================= */
.kin{padding-block:64px;overflow:hidden;display:grid;gap:18px}
.kin-h{max-width:1180px;margin:0 auto 10px;padding-inline:max(20px,env(safe-area-inset-left,0px));text-align:center;font-size:clamp(26px,3.6vw,40px);line-height:1.12;font-weight:700;letter-spacing:-.03em}
.kin-track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kin-row{display:flex;gap:12px;width:max-content;font:600 clamp(15px,1.6vw,18px)/1 var(--f-text);letter-spacing:-.01em;background:none !important;-webkit-text-stroke:0 !important;color:var(--ink) !important;margin:0 !important}
.kc{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;color:var(--ink);white-space:nowrap;transition:transform .4s var(--spring)}
.kc:hover{text-decoration:none;transform:translateY(-3px)}
.kc i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3B9BFF,#5E5CE6);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.kc svg{width:18px;height:18px;fill:none;stroke:#FFFFFF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion: no-preference){
 .kin-row.r1{animation:marq 46s linear infinite}
 .kin-row.r2{animation:marqR 52s linear infinite}
 .kin-track:hover .kin-row{animation-play-state:paused}
 .kin:not(.live) .kin-row{animation-play-state:paused}
}
@media (prefers-reduced-motion: reduce){ .kin-track{overflow-x:auto} }
@media all{ .kin{padding-block:44px} .kc{padding:8px 14px 8px 8px} .kc i{width:28px;height:28px} .kc svg{width:15px;height:15px} }

/* thin ticker fixed to the bottom of the screen */
.tick-bar{position:fixed;z-index:46;left:0;right:0;bottom:0;height:calc(34px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:flex;align-items:center;overflow:hidden;
 background:linear-gradient(180deg,var(--nav),var(--nav2));box-shadow:inset 0 1px 0 var(--glass-edge),0 -1px 0 var(--hair),0 -10px 30px -18px var(--drop);font:500 13px/1 var(--f-text);color:var(--ink)}
.tick-bar .tb-label{flex:none;align-self:stretch;display:flex;align-items:center;gap:6px;padding:0 12px 0 max(12px,env(safe-area-inset-left,0px));font-weight:700;color:#FFFFFF;background:linear-gradient(180deg,#3B9BFF,#0A7BF5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.tick-bar .tb-label i{width:6px;height:6px;border-radius:50%;background:#FFFFFF;animation:tbPulse 1.6s ease-in-out infinite}
@keyframes tbPulse{50%{opacity:.35}}
.tb-track{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tb-row{display:flex;width:max-content;animation:marq 60s linear infinite}
.tb-track:hover .tb-row{animation-play-state:paused}
.tb-row a{display:inline-flex;align-items:center;gap:8px;padding:0 18px;height:34px;color:var(--ink);white-space:nowrap}
.tb-row a:hover{text-decoration:none;color:var(--accent-ink)}
.tb-row a b{color:var(--accent-ink);font-weight:700}
.tb-row a::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink3);margin-left:18px}
.tb-x{flex:none;width:34px;height:34px;margin-right:max(4px,env(safe-area-inset-right,0px));border:0;background:none;color:var(--ink3);font-size:17px;cursor:pointer}
body.has-tick{padding-bottom:34px}
body.has-tick .chat-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 52px)}
body.has-tick .hello{bottom:calc(env(safe-area-inset-bottom,0px) + 120px)}
body.has-tick .chatbox{bottom:calc(env(safe-area-inset-bottom,0px) + 46px)}
@media all{ body.has-tick .chatbox{bottom:calc(env(safe-area-inset-bottom,0px) + 42px);height:calc(100dvh - env(safe-area-inset-top,0px) - 58px)} .tick-bar .tb-label span{display:none} }
@media (prefers-reduced-motion: reduce){ .tb-row{animation:none} .tb-track{overflow-x:auto} .tick-bar .tb-label i{animation:none} }

/* ================= v12: strategy calls banner + follow section ================= */
.advice{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;margin-top:22px;padding:22px 26px;border-radius:var(--r-xl);color:var(--ink);
 background:linear-gradient(120deg,var(--tint),transparent 55%),var(--glass-hi);transition:transform .45s var(--spring)}
.advice:hover{text-decoration:none;transform:translateY(-4px)}
.adv-ic{width:56px;height:56px;border-radius:16px}
.adv-ic svg,.soc-ic svg{position:relative;z-index:1;width:28px;height:28px;fill:none;stroke:#7FD3FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.adv-t{display:grid;gap:4px;min-width:0}
.adv-t b{font:700 clamp(19px,2.2vw,24px)/1.2 var(--f-display);letter-spacing:-.02em}
.adv-t small{font-size:15px;color:var(--ink2)}
.adv-p{font:700 40px/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
.adv-p small{font-size:16px;font-weight:500;color:var(--ink2);letter-spacing:0}
.adv-go{font-size:30px;color:var(--accent-ink);transition:transform .4s var(--spring)}
.advice:hover .adv-go{transform:translateX(4px)}
@media all{ .advice{grid-template-columns:auto 1fr;gap:14px;padding:18px} .adv-p{grid-column:2} .adv-go{display:none} }
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.soc{display:grid;gap:6px;align-content:start;padding:26px;border-radius:var(--r-xl);color:var(--ink);transition:transform .45s var(--spring)}
.soc:hover{text-decoration:none;transform:translateY(-6px)}
.soc-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px -12px var(--drop)}
.soc-ic svg{stroke:#FFFFFF}
.s-yt{background:linear-gradient(180deg,#FF4D4D,#D91F1F)}.s-ig{background:linear-gradient(135deg,#FEC053,#F2203E 45%,#B729A8 75%,#5342D6)}.s-fb{background:linear-gradient(180deg,#3B9BFF,#1663D6)}
.soc b{font:700 22px/1.1 var(--f-display);letter-spacing:-.02em}
.soc small{font-size:14px;color:var(--ink2)}
.soc p{font-size:15px;color:var(--ink2);margin-top:4px}
.soc-go{margin-top:10px;font-weight:600;color:var(--accent-ink)}
@media all{ .socials{grid-template-columns:1fr} }

/* ================= v13: AI advice line as a main service + AI tools ================= */
.al{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;padding:48px;border-radius:40px;
 background:linear-gradient(130deg,var(--tint),transparent 55%),var(--glass-hi)}
.al-copy{display:grid;gap:16px;min-width:0}
.al-copy .lede{max-width:600px}
.al-points{margin:4px 0 6px}
.al-cta{justify-content:flex-start}
.al-phone{justify-self:center;width:min(270px,100%);aspect-ratio:9/17;padding:10px;border-radius:44px;background:#0B0C10;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 40px 80px -30px rgba(0,30,90,.55);rotate:4deg;transition:rotate .6s var(--spring)}
.al:hover .al-phone{rotate:0deg}
.al-screen{height:100%;border-radius:36px;display:grid;justify-items:center;align-content:center;gap:10px;padding:22px 16px;text-align:center;color:#F5F5F7;
 background:radial-gradient(120% 70% at 50% 0%,rgba(10,132,255,.55),transparent 60%),radial-gradient(90% 60% at 50% 100%,rgba(125,122,255,.4),transparent 70%),#06070C}
.al-av{width:76px;height:76px;border-radius:22px}
.al-screen b{font:600 18px/1.2 var(--f-display)}
.al-screen small{font-size:13px;color:rgba(245,245,247,.7)}
.al-wave{display:flex;gap:4px;align-items:center;height:30px;margin:6px 0}
.al-wave i{width:4px;height:100%;border-radius:4px;background:#7FD3FF;transform-origin:50% 50%;animation:wave 1.2s ease-in-out infinite;animation-play-state:paused}
.al-wave i:nth-child(2){animation-delay:-.15s}.al-wave i:nth-child(3){animation-delay:-.3s}.al-wave i:nth-child(4){animation-delay:-.45s}.al-wave i:nth-child(5){animation-delay:-.6s}.al-wave i:nth-child(6){animation-delay:-.75s}.al-wave i:nth-child(7){animation-delay:-.9s}
.al.live .al-wave i{animation-play-state:running}
@keyframes wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.al-price{font:700 42px/1 var(--f-display);letter-spacing:-.03em;color:#F5F5F7}
.al-price small{font-size:15px;color:rgba(245,245,247,.7)}
.al-call{display:grid;place-items:center;width:58px;height:58px;margin-top:6px;border-radius:50%;background:linear-gradient(180deg,#3ED36B,#24A84B);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px -8px rgba(36,168,75,.8)}
.al-call svg{width:26px;height:26px;fill:none;stroke:#FFFFFF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tools-wrap{margin-top:34px;display:grid;gap:14px}
.tools-h{text-align:center;font:600 clamp(17px,2vw,20px)/1.3 var(--f-display);letter-spacing:-.01em}
.tools-track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tools-row{display:flex;gap:12px;width:max-content;animation:marq 50s linear infinite}
.tools-track:hover .tools-row{animation-play-state:paused}
.tool{display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:9px 18px 9px 9px;border-radius:999px;white-space:nowrap}
.tool i{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font:700 17px/1 var(--f-display);font-style:normal;color:#FFFFFF;
 background:linear-gradient(135deg,hsl(var(--h) 75% 55%),hsl(calc(var(--h) + 40) 70% 42%));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.tool b{font-size:15px;line-height:1.1}
.tool small{font-size:12px;color:var(--ink2);line-height:1.2}
.tools-note{text-align:center;font-size:12px;color:var(--ink3)}
/* bottom bar: advice line pinned on the left */
.tick-bar .tb-label{text-decoration:none;font-size:13px}
.tick-bar .tb-label:hover{filter:brightness(1.08);text-decoration:none}
.tick-bar .tb-short{display:none}
@media all{ .tick-bar .tb-label span{display:none} .tick-bar .tb-label .tb-short{display:inline} }
/* the small banner under the plans: tidy on phones */
@media all{
 .advice{grid-template-columns:1fr;gap:10px;padding:20px}
 .adv-ic{width:46px;height:46px;border-radius:13px}
 .adv-p{grid-column:auto}
 .al{grid-template-columns:1fr;padding:28px 20px;border-radius:32px;gap:28px}
 .al-phone{width:190px;rotate:0deg}
 .al-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){ .tools-row{animation:none} .tools-track{overflow-x:auto} .al-wave i{animation:none} }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} .chatbox,.m,.bk,.msheet{animation:none} }

main{overflow-x:clip}
/* ---------- v15: sections build together as you scroll (subtle fold + fade, in and out) ---------- */
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
 main>.band>.wrap,main>.kin,.static main>*:not(.pg-hero){transform-origin:50% 0;animation:foldIn linear both,foldOut linear forwards;animation-timeline:view(),view();animation-range:entry 0% entry 50%,exit 35% exit 100%}
 @keyframes foldIn{from{opacity:0;transform:perspective(1400px) translateY(48px) rotateX(-8deg) scale(.97)}to{opacity:1;transform:none}}
 @keyframes foldOut{from{opacity:1;transform:none}to{opacity:.6;transform:perspective(1400px) translateY(-14px) rotateX(-4deg) scale(.98)}}
 .static .pg-group,.static .pg-steps li,.static .pg-link{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}}
/* ---------- v15: everything reacts to touch ---------- */
.tap-glow{position:fixed;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;pointer-events:none;z-index:9999;
 background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(150,190,255,.28) 40%,transparent 70%);mix-blend-mode:screen;animation:tapGlow .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tapGlow{from{opacity:.9;transform:translate(var(--x),var(--y)) scale(.2)}to{opacity:0;transform:translate(var(--x),var(--y)) scale(1.6)}}
@media (prefers-reduced-motion: reduce){ .tap-glow{display:none} }

/* ================= v16: liquid glass. A living colour field sits behind the whole site and every glass surface is see-through ================= */
:root{--lq-fill:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.24) 55%,rgba(255,255,255,.34));--lq-fill-hi:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.40));
 --lq-in:rgba(255,255,255,.38);--lq-edge:rgba(255,255,255,.95);--lq-line:rgba(255,255,255,.55);--lq-drop:rgba(60,40,120,.22);--lq-blur:blur(22px) saturate(185%);
 --lq1:rgba(255,138,76,.62);--lq2:rgba(255,84,160,.48);--lq3:rgba(132,98,255,.52);--lq4:rgba(64,156,255,.52);--lq5:rgba(80,222,230,.40)}
:root:not([data-theme="light"]){--lq-fill:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08));--lq-fill-hi:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
 --lq-in:rgba(255,255,255,.08);--lq-edge:rgba(255,255,255,.42);--lq-line:rgba(255,255,255,.16);--lq-drop:rgba(0,0,0,.55);
 --lq1:rgba(255,110,60,.40);--lq2:rgba(255,60,150,.32);--lq3:rgba(120,80,255,.42);--lq4:rgba(40,120,255,.42);--lq5:rgba(40,200,220,.26)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--lq-fill:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.24) 55%,rgba(255,255,255,.34));--lq-fill-hi:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.40));
 --lq-in:rgba(255,255,255,.38);--lq-edge:rgba(255,255,255,.95);--lq-line:rgba(255,255,255,.55);--lq-drop:rgba(60,40,120,.22);
 --lq1:rgba(255,138,76,.62);--lq2:rgba(255,84,160,.48);--lq3:rgba(132,98,255,.52);--lq4:rgba(64,156,255,.52);--lq5:rgba(80,222,230,.40)}}
:root[data-theme="light"]{--lq-fill:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.24) 55%,rgba(255,255,255,.34));--lq-fill-hi:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.40));
 --lq-in:rgba(255,255,255,.38);--lq-edge:rgba(255,255,255,.95);--lq-line:rgba(255,255,255,.55);--lq-drop:rgba(60,40,120,.22);
 --lq1:rgba(255,138,76,.62);--lq2:rgba(255,84,160,.48);--lq3:rgba(132,98,255,.52);--lq4:rgba(64,156,255,.52);--lq5:rgba(80,222,230,.40)}
:root{--glass-in:var(--lq-in)}

/* the colour field: soft blobs + glossy liquid orbs, fixed behind everything; they only move while you scroll */
.lq-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.lq-m,.lq-o{position:absolute;inset:0}
.lq-m i{position:absolute;width:75vmax;height:75vmax;margin:-37.5vmax 0 0 -37.5vmax;border-radius:50%;will-change:transform}
.lq-m .b1{left:8%;top:12%;background:radial-gradient(closest-side,var(--lq1),transparent)}
.lq-m .b2{left:92%;top:30%;background:radial-gradient(closest-side,var(--lq2),transparent)}
.lq-m .b3{left:30%;top:78%;background:radial-gradient(closest-side,var(--lq3),transparent)}
.lq-m .b4{left:84%;top:92%;background:radial-gradient(closest-side,var(--lq4),transparent)}
.lq-m .b5{left:55%;top:45%;width:55vmax;height:55vmax;margin:-27.5vmax 0 0 -27.5vmax;background:radial-gradient(closest-side,var(--lq5),transparent)}
.lq-o i{position:absolute;border-radius:50%;will-change:transform;box-shadow:inset -14px -18px 40px rgba(40,10,90,.35),inset 10px 12px 26px rgba(255,255,255,.55),0 30px 60px -20px var(--lq-drop)}
.lq-o .o1{width:min(26vw,220px);aspect-ratio:1;left:-4%;top:22%;background:radial-gradient(circle at 32% 28%,#fff 0 3%,#FFD2B0 9%,#FF8A4C 34%,#F2456E 70%,#A3205A 100%)}
.lq-o .o2{width:min(18vw,150px);aspect-ratio:1;right:4%;top:8%;background:radial-gradient(circle at 32% 28%,#fff 0 3%,#E6DCFF 10%,#9C7BFF 38%,#5B3BE0 74%,#2E1C8C 100%)}
.lq-o .o3{width:min(30vw,260px);aspect-ratio:1;right:-6%;top:62%;background:radial-gradient(circle at 32% 28%,#fff 0 3%,#CFE9FF 10%,#4FA8FF 38%,#2463E6 72%,#16307A 100%)}
.lq-o .o4{width:min(12vw,96px);aspect-ratio:1;left:6%;top:88%;background:radial-gradient(circle at 32% 28%,#fff 0 4%,#FFE1F0 12%,#FF6FB2 42%,#C42C7C 80%)}
@supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){
 .lq-m i,.lq-o i{animation:lqA linear both;animation-timeline:scroll(root)}
 .lq-m .b2,.lq-m .b4,.lq-o .o2,.lq-o .o3{animation-name:lqB}
 .lq-m .b5,.lq-o .o4{animation-name:lqC}
 .lq-o i{animation-name:lqO1 !important} .lq-o .o2,.lq-o .o3{animation-name:lqO2 !important}
 @keyframes lqO1{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(2vw,-62vh) rotate(40deg)}}
 @keyframes lqO2{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-2vw,48vh) rotate(-40deg)}}
 @keyframes lqA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,22vh) scale(1.18)}100%{transform:translate(-6vw,-14vh) scale(.92)}}
 @keyframes lqB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-22vw,26vh) scale(.88)}100%{transform:translate(8vw,-30vh) scale(1.12)}}
 @keyframes lqC{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-14vw,-20vh) rotate(160deg) scale(1.25)}100%{transform:translate(12vw,10vh) rotate(320deg)}}
}}
@media all{ .lq-o .o1{left:-12%;top:14%} .lq-o .o2{right:-6%} .lq-o .o3{right:-16%;top:70%} .lq-o .o4{left:-6%} }

/* sections are now see-through so the colour field shows behind them */
.opener,.kin,.band{background-color:transparent !important}
.band.w-a,.band.w-b,.band.w-c,.band.w-d,.band.w-e{background-image:none}
.band + .band,.kin{border-color:transparent}
body::before{background:transparent}

/* the liquid glass material */
.glass{background:var(--lq-fill);-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);
 box-shadow:inset 0 1px 0 var(--lq-edge),inset 0 -1px 0 var(--lq-line),inset 0 0 0 1px var(--lq-line),inset 0 18px 30px -22px rgba(255,255,255,.6),0 2px 6px rgba(30,20,80,.06),0 34px 70px -34px var(--lq-drop)}
.glass.hi,.quiz,.plan.pro,.al,.closing{background:var(--lq-fill-hi)}
.plan.pro{background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--lq-fill-hi)}
.glass::before{background:radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.55),transparent 50%),radial-gradient(80% 50% at 100% 100%,rgba(255,255,255,.18),transparent 60%)}
:root:not([data-theme="light"]) .glass::before{opacity:.35}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .glass::before{opacity:1}}
/* iridescent liquid edge on every glass surface */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;z-index:2;
 background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,190,225,.65) 18%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 62%,rgba(150,190,255,.7) 84%,rgba(255,255,255,.9));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* small inner surfaces become clear glass droplets */
.opt,.field input,.btn.clear,.pg-back,.cb-x,.flow span,.cal span,.call,.browser,.res-plan,.bk,.day,.slot,.qa summary i,.menu-btn{background:var(--lq-in);box-shadow:inset 0 1px 0 var(--lq-edge),inset 0 0 0 1px var(--lq-line),0 6px 16px -10px var(--lq-drop)}
.opt[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,var(--lq-in));box-shadow:inset 0 0 0 2px var(--accent),inset 0 1px 0 var(--lq-edge)}

/* the floating bar is real liquid glass now: you see the page through it, softly blurred */
.nav{background:var(--lq-fill) !important;-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
 box-shadow:inset 0 1px 0 var(--lq-edge),inset 0 0 0 1px var(--lq-line),0 10px 30px -12px var(--lq-drop) !important}
.tick-bar{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}

/* plan/service pages pick up the same colour field */
.pg{background:radial-gradient(60vmax 60vmax at 0% 10%,var(--lq1),transparent 70%),radial-gradient(60vmax 60vmax at 100% 40%,var(--lq3),transparent 70%),radial-gradient(60vmax 60vmax at 40% 100%,var(--lq4),transparent 70%),var(--bg)}

/* the section fold moves only (no fade on the wrapper), so the glass inside can still see the colour field behind it */
@keyframes foldIn{from{transform:perspective(1400px) translateY(60px) rotateX(-9deg) scale(.96)}to{transform:none}}
@keyframes foldOut{from{transform:none}to{transform:perspective(1400px) translateY(-16px) rotateX(-4deg) scale(.975)}}

/* phones: a slightly lighter blur keeps scrolling smooth */
@media all{ :root{--lq-blur:blur(16px) saturate(180%)} }
html.lq-lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--lq-fill-hi)}
@media (prefers-reduced-transparency: reduce){ .glass{background:var(--glass-hi);-webkit-backdrop-filter:none;backdrop-filter:none} }

/* ================= v17: lighter blue background, tiled Sonnatt mark, clear 20% frosted glass ================= */
:root:not([data-theme="light"]){--bg:#071226;--bg2:#0A1830;--lq1:rgba(40,120,255,.34);--lq2:rgba(70,90,230,.28);--lq3:rgba(30,170,240,.26);--lq4:rgba(40,110,255,.30);--lq5:rgba(80,160,255,.20);
 --lq-fill:rgba(255,255,255,.08);--lq-fill-hi:rgba(255,255,255,.10);--lq-in:rgba(255,255,255,.08);--lq-edge:rgba(255,255,255,.32);--lq-line:rgba(255,255,255,.14);--tile-op:.07}
:root,:root[data-theme="light"]{--bg:#EEF6FF;--bg2:#E4F0FF}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#EEF6FF;--bg2:#E4F0FF}}
:root,:root[data-theme="light"]{--lq1:rgba(120,190,255,.45);--lq2:rgba(150,170,255,.38);--lq3:rgba(110,215,255,.40);--lq4:rgba(90,160,255,.40);--lq5:rgba(190,225,255,.55);
 --lq-fill:rgba(255,255,255,.20);--lq-fill-hi:rgba(255,255,255,.20);--lq-in:rgba(255,255,255,.20);--lq-edge:rgba(255,255,255,.9);--lq-line:rgba(255,255,255,.6);--lq-drop:rgba(30,80,170,.16);--lq-blur:blur(10px) saturate(140%);--tile-op:.10}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--lq1:rgba(120,190,255,.45);--lq2:rgba(150,170,255,.38);--lq3:rgba(110,215,255,.40);--lq4:rgba(90,160,255,.40);--lq5:rgba(190,225,255,.55);
 --lq-fill:rgba(255,255,255,.20);--lq-fill-hi:rgba(255,255,255,.20);--lq-in:rgba(255,255,255,.20);--lq-edge:rgba(255,255,255,.9);--lq-line:rgba(255,255,255,.6);--lq-drop:rgba(30,80,170,.16);--tile-op:.10}}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#EEF6FF;--bg2:#E4F0FF}}
:root[data-theme="light"]{--bg:#EEF6FF}
:root{--lq-blur:blur(10px) saturate(140%)}
body{background:var(--bg)}
/* tiled, see-through Sonnatt mark across the whole background */
.lq-bg::after{content:"";position:absolute;inset:-25%;background:url(/img/v2/tile.webp) 0 0/180px 180px repeat;opacity:var(--tile-op);transform:rotate(-12deg);will-change:transform}
@supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){
 .lq-bg::after{animation:lqTile linear both;animation-timeline:scroll(root)}
 @keyframes lqTile{from{transform:rotate(-12deg) translateY(0)}to{transform:rotate(-12deg) translateY(-360px)}}
}}
/* orbs become soft blue glass bubbles */
.lq-o .o1{background:radial-gradient(circle at 32% 28%,#fff 0 4%,#E3F1FF 12%,#9CCBFF 40%,#4D93F0 76%,#2A62C4 100%)}
.lq-o .o2{background:radial-gradient(circle at 32% 28%,#fff 0 4%,#EEF0FF 12%,#B3BCFF 40%,#6F7FEA 76%,#4252B8 100%)}
.lq-o .o3{background:radial-gradient(circle at 32% 28%,#fff 0 4%,#E0F8FF 12%,#8FDDFF 40%,#3AA8E8 76%,#1D72B8 100%)}
.lq-o .o4{background:radial-gradient(circle at 32% 28%,#fff 0 5%,#E8F3FF 14%,#A8D2FF 46%,#5A9BEA 84%)}
.lq-o i{opacity:.75;box-shadow:inset -12px -16px 34px rgba(20,60,140,.28),inset 10px 12px 26px rgba(255,255,255,.6),0 24px 50px -22px var(--lq-drop)}
/* glass: 20% clear tint, light frost: you see the background (and the tiled logo) softly through every surface */
.glass,.glass.hi,.quiz,.plan.pro,.al,.closing,.nav{background:var(--lq-fill) !important}
.plan.pro{box-shadow:inset 0 1px 0 var(--lq-edge),inset 0 0 0 1px var(--lq-line),0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),0 34px 70px -34px var(--lq-drop)}
.glass::before{background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 38%)}
.glass::after{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(200,225,255,.55) 22%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 64%,rgba(150,195,255,.6) 86%,rgba(255,255,255,.85))}
.nav,.tick-bar{-webkit-backdrop-filter:blur(14px) saturate(150%) !important;backdrop-filter:blur(14px) saturate(150%) !important}
.pg{background:radial-gradient(60vmax 60vmax at 0% 10%,var(--lq1),transparent 70%),radial-gradient(60vmax 60vmax at 100% 50%,var(--lq3),transparent 70%),var(--bg)}
@media all{ :root{--lq-blur:blur(9px) saturate(140%)} }
html.lq-lite .glass{background:rgba(255,255,255,.55) !important}

/* ================= v18: 3D type everywhere; headlines extruded and stronger ================= */
:root:not([data-theme="light"]){--h-ink:#FFFFFF;--x1:#5B82C8;--x2:#4A71B8;--x3:#3A61A6;--x4:#2B5193;--x5:#1E427F;--xd:rgba(0,0,0,.55);--t3d:0 1px 0 rgba(0,0,0,.55),0 2px 3px rgba(0,0,0,.45);--t3d-hi:rgba(255,255,255,.12)}
:root,:root[data-theme="light"]{--h-ink:#0A1A3F;--x1:#C9DBF5;--x2:#B3CBEF;--x3:#9DBBE8;--x4:#87ABE1;--x5:#739CD9;--xd:rgba(20,60,140,.28);--t3d:0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(20,50,120,.16);--t3d-hi:rgba(255,255,255,.9)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--h-ink:#0A1A3F;--x1:#C9DBF5;--x2:#B3CBEF;--x3:#9DBBE8;--x4:#87ABE1;--x5:#739CD9;--xd:rgba(20,60,140,.28);--t3d:0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(20,50,120,.16);--t3d-hi:rgba(255,255,255,.9)}}
/* every piece of text gets a soft raised, embossed edge */
body{text-shadow:var(--t3d)}
/* headlines: solid deep ink, heavier, with a 5-layer extrusion and a floating shadow */
h1,h2,.h-xl,.h-lg,.pg-title,.kin-h{color:var(--h-ink);font-weight:800;letter-spacing:-.03em;
 text-shadow:0 -1px 0 var(--t3d-hi),0 1px 0 var(--x1),0 2px 0 var(--x2),0 3px 0 var(--x3),0 4px 0 var(--x4),0 5px 0 var(--x5),0 7px 6px var(--xd),0 14px 24px var(--xd)}
h3{color:var(--h-ink);text-shadow:0 -1px 0 var(--t3d-hi),0 1px 0 var(--x2),0 2px 0 var(--x4),0 4px 6px var(--xd)}
@media all{
 h1,h2,.h-xl,.h-lg,.pg-title,.kin-h{text-shadow:0 -1px 0 var(--t3d-hi),0 1px 0 var(--x1),0 2px 0 var(--x2),0 3px 0 var(--x3),0 4px 0 var(--x5),0 6px 5px var(--xd),0 12px 18px var(--xd)}}
/* gradient words can't carry text-shadow, so they get the same extrusion as stacked drop-shadows */
.grad,.price .num,.kt .w.g,.kin-row.r1{text-shadow:none !important;filter:drop-shadow(0 1px 0 var(--x2)) drop-shadow(0 1px 0 var(--x3)) drop-shadow(0 1px 0 var(--x4)) drop-shadow(0 6px 8px var(--xd))}
.price .num,.grad{filter:drop-shadow(0 1px 0 var(--x3)) drop-shadow(0 1px 0 var(--x4)) drop-shadow(0 4px 6px var(--xd))}
/* white text on blue buttons and badges: a darker raised edge instead of a light one */
.btn:not(.clear),.chat-fab,.tb-label,[class*="badge"],.m.me,.bub.out,.tick-bar b:first-child{text-shadow:0 1px 0 rgba(0,40,120,.45),0 2px 3px rgba(0,30,90,.35)}
.ob,.ob *{text-shadow:0 1px 0 rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.4)}
.ob h2,.ob .h-xl{text-shadow:0 1px 0 #3d5a99,0 2px 0 #2f4b86,0 3px 0 #223d73,0 4px 0 #173061,0 8px 14px rgba(0,0,0,.6)}
input,textarea,select{text-shadow:none}
small,.muted,.pg-setup,.price small,figcaption{text-shadow:0 1px 0 rgba(255,255,255,.6)}
:root:not([data-theme="light"]) small,:root:not([data-theme="light"]) .muted{text-shadow:0 1px 1px rgba(0,0,0,.5)}
/* the floating bar keeps enough frost to stay readable over the dark orbit section */
:root .nav{background:rgba(255,255,255,.5) !important}
:root:not([data-theme="light"]) .nav{background:rgba(20,30,60,.35) !important}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .nav{background:rgba(255,255,255,.5) !important}}
.nav,.nav *{text-shadow:none}
@media (prefers-contrast: more){ body,h1,h2,h3,.h-xl{text-shadow:none} .grad,.price .num,.kt .w.g{filter:none} }

/* ================= v19: many blues, floating Sonnatt marks, clear glass, livelier buttons, orbit section in the same light style ================= */
:root:not([data-theme="light"]){--bg:#061430;--lq1:rgba(56,189,248,.30);--lq2:rgba(37,99,235,.40);--lq3:rgba(99,102,241,.32);--lq4:rgba(14,116,224,.38);--lq5:rgba(125,211,252,.18);--mk-op:1}
:root,:root[data-theme="light"]{--bg:#E9F3FF;--lq1:rgba(56,189,248,.45);--lq2:rgba(59,130,246,.40);--lq3:rgba(129,140,248,.36);--lq4:rgba(14,165,233,.38);--lq5:rgba(147,197,253,.60);--mk-op:1}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#E9F3FF;--lq1:rgba(56,189,248,.45);--lq2:rgba(59,130,246,.40);--lq3:rgba(129,140,248,.36);--lq4:rgba(14,165,233,.38);--lq5:rgba(147,197,253,.60)}}
.lq-bg{background:linear-gradient(180deg,#EAF5FF 0%,#DDEBFF 30%,#E6F0FF 60%,#D9E9FF 100%),var(--bg)}
:root:not([data-theme="light"]) .lq-bg{background:linear-gradient(180deg,#061633 0%,#0A2150 35%,#071A40 70%,#04112B 100%),var(--bg)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .lq-bg{background:linear-gradient(180deg,#EAF5FF 0%,#DDEBFF 30%,#E6F0FF 60%,#D9E9FF 100%),var(--bg)}}
:root[data-theme="light"] .lq-bg{background:linear-gradient(180deg,#EAF5FF 0%,#DDEBFF 30%,#E6F0FF 60%,#D9E9FF 100%),var(--bg)}
.lq-m i{display:none !important}
/* all the blue blobs painted on ONE layer that slowly shifts as you scroll (cheap on phones) */
.lq-m{inset:0;background:
 radial-gradient(38% 30% at 18% 20%,var(--lq1),transparent 70%),radial-gradient(34% 30% at 86% 30%,var(--lq2),transparent 70%),
 radial-gradient(40% 32% at 28% 72%,var(--lq3),transparent 70%),radial-gradient(36% 30% at 80% 82%,var(--lq4),transparent 70%),
 radial-gradient(30% 26% at 55% 48%,var(--lq5),transparent 70%)}
@supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){
 .lq-m{animation:none}
 @keyframes lqMesh{0%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(4%,-6%) rotate(8deg) scale(1.06)}100%{transform:translate(-3%,-10%) rotate(-6deg) scale(1)}} }}
/* the opening scene's colour wash uses the same blues (no pink/purple/green) */
:root,:root:not([data-theme="light"]),:root[data-theme="light"]{--w1:rgba(59,130,246,.30);--w2:rgba(56,189,248,.26);--w3:rgba(96,165,250,.28);--w4:rgba(14,165,233,.18);--w5:rgba(147,197,253,.26)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--w1:rgba(59,130,246,.30);--w2:rgba(56,189,248,.26);--w3:rgba(96,165,250,.28);--w4:rgba(14,165,233,.18);--w5:rgba(147,197,253,.26)}}
/* no more balls */
.lq-o,.par{display:none !important}
.lq-bg::after{content:none !important}
/* floating Sonnatt marks, scattered behind everything */
.lq-s{position:absolute;inset:-8% 0}
.lq-s i{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);opacity:var(--o);
 background:url(/img/v2/mark.webp) center/contain no-repeat;transform:rotate(var(--r));}
.lq-s i.far{filter:blur(2px)}
@media (prefers-reduced-motion: no-preference){
 .lq-s i{animation:mkFloat var(--d) ease-in-out var(--dl) infinite alternate}
 @keyframes mkFloat{0%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(calc(var(--fx)*.6),calc(var(--fy)*-.5)) rotate(calc(var(--r) + 12deg))}100%{transform:translate(var(--fx),var(--fy)) rotate(calc(var(--r) - 10deg))}}
 @supports (animation-timeline: scroll()){ .lq-s{animation:mkPar linear both;animation-timeline:scroll(root)} @keyframes mkPar{from{transform:translateY(0)}to{transform:translateY(-12%)}} }
}
@media all{ .lq-s i{width:calc(var(--s)*.7);height:calc(var(--s)*.7);margin:calc(var(--s)*-.35) 0 0 calc(var(--s)*-.35)} }
/* clear glass: no tint, no frost; just the edge light, a soft shine and a shadow */
:root{--lq-fill:transparent;--lq-fill-hi:transparent;--lq-in:transparent}
.glass,.glass.hi,.quiz,.plan.pro,.al,.closing{background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.3),0 24px 50px -30px rgba(20,70,160,.35)}
:root:not([data-theme="light"]) .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.16),0 24px 50px -30px rgba(0,0,0,.6)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.3),0 24px 50px -30px rgba(20,70,160,.35)}}
.glass::before{background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 34%)}
.opt,.field input,.btn.clear,.pg-back,.cb-x,.flow span,.cal span,.call,.browser,.res-plan,.day,.slot,.qa summary i,.menu-btn{background:transparent}
.chatbox .field input,.bk .field input,.pg-form .field input{background:rgba(255,255,255,.35)}
/* the bar stays clear too, with just enough blur that text scrolling under it doesn't clash */
:root .nav,:root:not([data-theme="light"]) .nav{background:transparent !important;-webkit-backdrop-filter:blur(16px) saturate(160%) !important;backdrop-filter:blur(16px) saturate(160%) !important}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .nav{background:transparent !important}}
html.lq-lite .glass{background:transparent !important}
html.lq-lite .lq-s,html.lq-lite .lq-s i{animation:none !important}

/* ---------- every button and tappable surface reacts ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.15) 56%,transparent 70%);transform:translateX(-130%);transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(130%)}
.btn:not(.clear):hover{filter:brightness(1.08) saturate(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 4px rgba(59,130,246,.16),0 16px 32px -12px rgba(10,110,245,.7)}
.btn.clear:hover,.opt:hover,.pg-back:hover,.menu-btn:hover,.cb-x:hover,.day:hover,.slot:hover{background:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.8),0 0 0 4px rgba(59,130,246,.12),0 10px 22px -12px rgba(20,90,200,.45)}
.tile:hover,.plan:hover,.pg-link:hover,.chip:hover,.tool:hover,.social:hover,.group:hover{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px rgba(255,255,255,.85),0 0 0 4px rgba(59,130,246,.10),0 30px 60px -28px rgba(20,90,200,.45)}
.qa summary{transition:background .25s}
.qa summary:hover{background:rgba(255,255,255,.18)}
a:not(.btn):not(.tile):not(.pg-link){transition:color .2s,text-shadow .2s}
a:not(.btn):not(.tile):not(.pg-link):hover{text-shadow:0 0 12px rgba(59,130,246,.35)}
.btn:focus-visible,.opt:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(59,130,246,.6);outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .btn::before{display:none} }

/* ---------- "Everything connected": same light blue world as the rest of the site ---------- */
.ob{background:transparent !important;color:var(--ink)}
.ob-glow{background:radial-gradient(closest-side,rgba(59,130,246,.30),rgba(56,189,248,.16) 45%,transparent 75%)}
.ob-ring{border-color:rgba(59,130,246,.30)}
.ob-ring.r2{border-color:rgba(99,102,241,.28)}
.ob-ring.r3{border-color:rgba(59,130,246,.14)}
.ob-dot{background:#3B82F6;box-shadow:0 0 12px 3px rgba(59,130,246,.45)}
.ob-chip>span{color:var(--h-ink);background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.7),0 16px 34px -18px rgba(20,70,160,.45)}
:root:not([data-theme="light"]) .ob-chip>span{color:#F5F7FF;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.18),0 16px 34px -18px rgba(0,0,0,.6)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .ob-chip>span{color:var(--h-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.7),0 16px 34px -18px rgba(20,70,160,.45)}}
.ob-core .appicon{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 30px 70px -24px rgba(20,90,220,.6),0 0 0 10px rgba(59,130,246,.10)}
.ob,.ob *{text-shadow:var(--t3d)}
.ob .ob-chip>span{text-shadow:var(--t3d)}
.ob-st h2,.ob h2{color:var(--h-ink);font-weight:800;text-shadow:0 -1px 0 var(--t3d-hi),0 1px 0 var(--x1),0 2px 0 var(--x2),0 3px 0 var(--x3),0 4px 0 var(--x4),0 5px 0 var(--x5),0 7px 6px var(--xd),0 14px 24px var(--xd)}
.ob-st p{color:var(--ink2)}
.ob-st .more{color:var(--accent-ink)}

/* ================= v20: near-white background, logos travel with scroll, a real in-call phone screen ================= */
:root,:root[data-theme="light"]{--bg:#F8FBFF;--lq1:rgba(96,165,250,.13);--lq2:rgba(56,189,248,.11);--lq3:rgba(129,160,255,.10);--lq4:rgba(59,130,246,.10);--lq5:rgba(186,214,255,.22)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#F8FBFF;--lq1:rgba(96,165,250,.13);--lq2:rgba(56,189,248,.11);--lq3:rgba(129,160,255,.10);--lq4:rgba(59,130,246,.10);--lq5:rgba(186,214,255,.22)}}
:root,:root[data-theme="light"]{--w1:rgba(59,130,246,.08);--w2:rgba(56,189,248,.07);--w3:rgba(96,165,250,.08);--w4:rgba(14,165,233,.05);--w5:rgba(147,197,253,.08)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--w1:rgba(59,130,246,.08);--w2:rgba(56,189,248,.07);--w3:rgba(96,165,250,.08);--w4:rgba(14,165,233,.05);--w5:rgba(147,197,253,.08)}}
.lq-bg{background:linear-gradient(180deg,#FDFEFF 0%,#F6FAFF 35%,#FBFDFF 65%,#F3F8FF 100%),var(--bg)}
:root:not([data-theme="light"]) .lq-bg{background:linear-gradient(180deg,#061633 0%,#0A2150 35%,#071A40 70%,#04112B 100%),var(--bg)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .lq-bg{background:linear-gradient(180deg,#FDFEFF 0%,#F6FAFF 35%,#FBFDFF 65%,#F3F8FF 100%),var(--bg)}}
:root[data-theme="light"] .lq-bg{background:linear-gradient(180deg,#FDFEFF 0%,#F6FAFF 35%,#FBFDFF 65%,#F3F8FF 100%),var(--bg)}
/* on near-white, clear glass needs a slightly stronger edge and shadow to read as glass */
.glass{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,185,235,.45),inset 0 -1px 0 rgba(255,255,255,.6),0 24px 50px -30px rgba(30,80,160,.30)}
:root:not([data-theme="light"]) .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.16),0 24px 50px -30px rgba(0,0,0,.6)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .glass{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,185,235,.45),inset 0 -1px 0 rgba(255,255,255,.6),0 24px 50px -30px rgba(30,80,160,.30)}}

/* logos: the outer layer travels as you scroll (each at its own speed, drift and spin); the inner one keeps floating */
.lq-s{inset:0;animation:none !important}
.lq-s i{background:none;opacity:1;animation:none !important;transform:none}
.lq-s i b{position:absolute;inset:0;opacity:var(--o);background:url(/img/v2/mark.webp) center/contain no-repeat;transform:rotate(var(--r));will-change:transform}
.lq-s i.far{filter:none}
.lq-s i.far b{filter:blur(2px)}
@media (prefers-reduced-motion: no-preference){
 .lq-s i b{animation:mkFloat var(--d) ease-in-out var(--dl) infinite alternate}
 @supports (animation-timeline: scroll()){
  .lq-s i{will-change:transform;animation:mkScroll linear both !important;animation-timeline:scroll(root) !important}
  @keyframes mkScroll{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}}
 }
}
html.lq-lite .lq-s i b{animation:none}

/* ---------- the advice line phone: a real in-call screen ---------- */
.al-phone{position:relative;aspect-ratio:9/19.3;width:min(280px,100%);padding:9px;border-radius:48px;background:linear-gradient(145deg,#2A2D35,#0B0C10 40%,#1B1E25);
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 4px #050608,0 2px 0 rgba(255,255,255,.4),0 40px 80px -30px rgba(0,30,90,.55)}
.al-phone::before{content:"";position:absolute;right:-3px;top:24%;width:3px;height:64px;border-radius:0 3px 3px 0;background:#2A2D35}
.al-phone::after{content:"";position:absolute;left:-3px;top:18%;width:3px;height:30px;border-radius:3px 0 0 3px;background:#2A2D35;box-shadow:0 46px 0 #2A2D35,0 92px 0 #2A2D35}
.al-screen.cu{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:12px 16px 10px;border-radius:40px;overflow:hidden;text-align:center;color:#fff;text-shadow:none;
 background:radial-gradient(130% 60% at 50% -5%,#3A6FB8 0%,transparent 60%),radial-gradient(120% 55% at 50% 105%,#1C2A4A 0%,transparent 65%),linear-gradient(180deg,#22314F,#0E1424 70%,#0A0F1B)}
.al-screen.cu *{text-shadow:none}
.cu-status{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 4px 0 10px;font:600 12.5px/1 var(--f-text);color:#fff}
.cu-island{position:absolute;left:50%;top:10px;width:72px;height:22px;margin-left:-36px;border-radius:14px;background:#000;display:flex;align-items:center;justify-content:flex-end;padding-right:8px}
.cu-island i{width:6px;height:6px;border-radius:50%;background:#34C759;box-shadow:0 0 6px #34C759}
.cu-icons{display:flex;align-items:center;gap:4px}
.cu-icons svg{height:10px;width:auto;fill:#fff}
.cu-icons svg:last-child{height:11px}
.cu-who{display:grid;justify-items:center;gap:4px;margin-top:22px}
.cu-av{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,#16243F,#05080F);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -10px #000;margin-bottom:6px}
.cu-av img{width:72%;height:auto}
.cu-who b{font:600 19px/1.2 var(--f-display);letter-spacing:-.01em;color:#fff}
.cu-timer{font:500 14px/1 var(--f-text);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.cu-wave{display:flex;gap:3px;align-items:center;height:18px;margin-top:6px}
.cu-wave i{width:3px;height:100%;border-radius:3px;background:rgba(255,255,255,.75);transform:scaleY(.3);animation:wave 1.1s ease-in-out infinite;animation-play-state:paused}
.cu-wave i:nth-child(2){animation-delay:-.15s}.cu-wave i:nth-child(3){animation-delay:-.3s}.cu-wave i:nth-child(4){animation-delay:-.45s}.cu-wave i:nth-child(5){animation-delay:-.6s}.cu-wave i:nth-child(6){animation-delay:-.75s}.cu-wave i:nth-child(7){animation-delay:-.9s}
.al.live .cu-wave i{animation-play-state:running}
.cu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-top:auto;padding:0 2px}
.cu-b{display:grid;justify-items:center;gap:6px}
.cu-b i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.cu-b.on i{background:#fff}
.cu-b svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cu-b:nth-child(2) svg{fill:#fff;stroke:none}
.cu-b.on svg{stroke:#0B0C10}
.cu-b em{font:500 11px/1 var(--f-text);font-style:normal;color:#fff}
.cu-end{display:grid;place-items:center;width:58px;height:58px;margin:18px auto 12px;border-radius:50%;background:#FF3B30;box-shadow:0 10px 24px -8px rgba(255,59,48,.7)}
.cu-end svg{width:28px;height:28px;fill:#fff}
.cu-home{display:block;width:96px;height:4px;margin:0 auto;border-radius:4px;background:rgba(255,255,255,.75)}
/* price tag floats on the corner of the phone */
.al-tag{position:absolute;left:-44px;top:45%;z-index:3;display:inline-flex;align-items:baseline;gap:2px;padding:10px 16px;border-radius:20px;font:800 28px/1 var(--f-display);letter-spacing:-.03em;
 background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,185,235,.5),0 18px 36px -16px rgba(20,70,160,.45);rotate:-6deg}
.al-tag small{font:600 13px/1 var(--f-text);color:var(--ink2)}
@media (prefers-reduced-motion: no-preference){ .al-tag{animation:tagBob 5s ease-in-out infinite} @keyframes tagBob{50%{translate:0 -8px}} }
@media all{
 .al-phone{width:min(250px,78vw)}
 .cu-b i{width:44px;height:44px} .cu-b svg{width:20px;height:20px} .cu-grid{gap:10px 6px}
 .cu-who{margin-top:16px} .cu-av{width:58px;height:58px} .cu-who b{font-size:17px}
 .cu-end{width:50px;height:50px;margin:14px auto 10px}
 .al-tag{left:-30px;font-size:23px;padding:8px 13px}
}

/* ================= v21: liquid everything ================= */
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}

/* background logos: faster, bigger, wobbly liquid motion; they also sweep further as you scroll */
@media (prefers-reduced-motion: no-preference){
 .lq-s i b{animation:mkLiquid calc(var(--d)*.32) ease-in-out var(--dl) infinite alternate !important}
 @keyframes mkLiquid{
  0%{transform:translate(0,0) rotate(var(--r)) scale(1,1)}
  25%{transform:translate(calc(var(--fx)*1.4),calc(var(--fy)*-1.2)) rotate(calc(var(--r) + 22deg)) scale(1.14,.88)}
  50%{transform:translate(calc(var(--fx)*-.8),calc(var(--fy)*1.6)) rotate(calc(var(--r) - 16deg)) scale(.88,1.14)}
  75%{transform:translate(calc(var(--fx)*2),calc(var(--fy)*.6)) rotate(calc(var(--r) + 34deg)) scale(1.08,.94)}
  100%{transform:translate(calc(var(--fx)*-1.4),calc(var(--fy)*-1.8)) rotate(calc(var(--r) - 28deg)) scale(.95,1.06)}}
 @supports (animation-timeline: scroll()){
  @keyframes mkScroll{
   0%{transform:translate(0,0) rotate(0) scale(1)}
   35%{transform:translate(calc(var(--sx)*-1.4),calc(var(--sy)*.7)) rotate(calc(var(--sr)*.8)) scale(1.18)}
   70%{transform:translate(calc(var(--sx)*1.8),calc(var(--sy)*1.3)) rotate(calc(var(--sr)*-.6)) scale(.9)}
   100%{transform:translate(calc(var(--sx)*-1),calc(var(--sy)*2)) rotate(calc(var(--sr)*1.6)) scale(1.1)}}
 }
}
.lq-s i b{filter:drop-shadow(0 6px 10px rgba(40,110,230,.18))}

/* water droplet wherever you touch or click */
.drop{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none;transform:translate(var(--x),var(--y))}
.drop i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;
 border:2px solid rgba(96,165,250,.85);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),inset 0 0 16px rgba(59,130,246,.35),0 0 14px rgba(59,130,246,.35);
 opacity:0;animation:ripple 1s cubic-bezier(.15,.7,.3,1) forwards}
.drop i:nth-child(2){animation-delay:.12s;border-width:1.2px}
.drop i:nth-child(3){animation-delay:.26s;border-width:1px}
.drop b{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50% 50% 50% 50%;
 background:radial-gradient(circle at 35% 30%,#fff 0 12%,rgba(210,232,255,.9) 28%,rgba(90,160,255,.7) 60%,rgba(40,110,240,.35) 100%);
 box-shadow:inset -2px -3px 6px rgba(40,100,200,.35),0 4px 10px rgba(40,100,200,.25);animation:splash .7s cubic-bezier(.2,1.6,.4,1) forwards}
.drop em{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(170,210,255,.95);box-shadow:0 0 6px rgba(120,180,255,.8);opacity:0;
 animation:spray .6s cubic-bezier(.2,.8,.3,1) forwards;--dx:0px;--dy:0px}
@keyframes ripple{0%{opacity:.95;transform:scale(.08)}70%{opacity:.35}100%{opacity:0;transform:scale(1.9)}}
@keyframes splash{0%{transform:scale(0,0)}35%{transform:scale(1.25,.8)}60%{transform:scale(.85,1.15);opacity:1}100%{transform:scale(.2);opacity:0}}
@keyframes spray{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* liquid glass edge light on every button, card, table and tile: it runs around the edge as you scroll */
.lqh{position:relative}
.lq-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;padding:2px;overflow:hidden;container-type:size;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lq-ring i{position:absolute;left:50%;top:50%;width:150cqmax;height:150cqmax;translate:-50% -50%;border-radius:50%;
 background:conic-gradient(from 0deg,transparent 0 6%,rgba(56,189,248,.55) 11%,#3B82F6 17%,#fff 20%,#60A5FA 24%,rgba(129,140,248,.7) 29%,transparent 37%,transparent 50%,rgba(34,211,238,.6) 58%,#2563EB 64%,#fff 67%,#7DD3FC 71%,transparent 80%)}
.lq-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 12px rgba(59,130,246,.35)}
.btn .lq-ring,.opt .lq-ring{padding:1.4px}
.btn:not(.clear) .lq-ring i{background:conic-gradient(from 0deg,transparent 0 10%,rgba(255,255,255,1) 18%,rgba(190,230,255,.9) 24%,transparent 34%,transparent 55%,rgba(255,255,255,.85) 66%,transparent 76%)}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
 .lq-ring{animation:ringGlow linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 .lq-ring i{animation:ringRun linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 @keyframes ringRun{from{rotate:-200deg}to{rotate:340deg}}
 @keyframes ringGlow{0%{opacity:.25}40%{opacity:1}60%{opacity:1}100%{opacity:.25}}
}}
/* outer liquid glow under each ring while it's in the middle of the screen */
.lqh.glass,.lqh.btn,.lqh.opt{--glow:0}
/* text links: a liquid gradient underline that flows as you scroll */
a.lql{text-decoration:none;background:linear-gradient(90deg,var(--accent),#38BDF8,#818CF8,var(--accent)) 0 100%/300% 1.5px no-repeat;padding-bottom:1px}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
 a.lql{animation:linkFlow linear both;animation-timeline:view()} @keyframes linkFlow{from{background-position:0% 100%}to{background-position:100% 100%}} }}
a.lql:hover{background-size:300% 2.5px}
@media (prefers-reduced-motion: reduce){ .drop{display:none} }

html,body{margin:0;padding:0}
/* footer: links one per line again (with bigger tap areas), email on its own line, and the band blends into the page */
.cols a,.cols .email{display:block !important;padding-block:3px}
.foot a.lql{background:none;animation:none !important}
.base a{display:inline-block;padding-block:10px}
.foot{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(219,234,254,.45))}
:root:not([data-theme="light"]) .foot{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25))}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .foot{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(219,234,254,.45))}}
/* close the gap between the questions and "Everything connected" on phones, and make the orbit bigger there */
@media all{
 .opener .pin{padding-bottom:16px}
 .ob-pin{height:540px}
 .ob-scene{top:31%}
 .ob-flat{transform:scaleY(.34) scale(.5)}
 .ob-chip>span{font-size:13px}
 .ob-text{bottom:28px}
}
/* the chat hello bubble is smaller so it never hides a headline, and it goes away once you scroll on */
.hello{max-width:220px;font-size:13.5px;line-height:1.35;padding:10px 30px 10px 13px}
/* ================= v22: water touch + liquid tilt entrances ================= */
.lq-water{position:fixed;left:0;top:0;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;pointer-events:none;z-index:9998;
 -webkit-backdrop-filter:url(#lq-water);backdrop-filter:url(#lq-water);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
 transform:translate(var(--x),var(--y)) scale(.18);animation:lqWater 1.2s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes lqWater{0%{opacity:1;transform:translate(var(--x),var(--y)) scale(.18)}60%{opacity:.8}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.45)}}
.drop{display:none !important}

/* every card, row, tile, button and link pours in: it tilts and turns slightly, settles with a little liquid wobble,
   and tips away again as it leaves, in both scroll directions */
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
 html:root body :is(.plan,.tile,.pg-link,.soc,.advice,.closing,.faq .qa,.plan li,.group li,.pg-group li,.steps li,.pg-steps li,.vs-col,.grow-row,.reasons li,.al-points li,.lede,.pg-fit,.pg-form,.res-plan,a.lql,.socials>*,.bento>*,.addon-groups>.group,.pg-group),
 html:root body .btn:not(.float):not(.nav .btn):not(.chatbox .btn):not(.hello .btn){
  animation:liqIn linear both !important;animation-timeline:view() !important;animation-range:cover 0% cover 100% !important;animation-delay:0s !important;transform-origin:50% 100%}
 html:root body :is(.plan,.tile,.plan li,.group li,.steps li,.reasons li,.al-points li,.faq .qa,.bento>*,.socials>*,.pg-group li):nth-child(even){--td:-1}
 a.lql{display:inline-block}
 @keyframes liqIn{
  0%{opacity:0;transform:perspective(900px) translateY(50px) rotateX(20deg) rotateY(calc(var(--td,1)*11deg)) rotateZ(calc(var(--td,1)*-1.5deg)) scale(.9)}
  12%{opacity:1;transform:perspective(900px) translateY(-5px) rotateX(-4deg) rotateY(calc(var(--td,1)*-2.5deg)) scale(1.025,.975)}
  19%{transform:perspective(900px) translateY(2px) rotateX(1.5deg) rotateY(calc(var(--td,1)*1deg)) scale(.99,1.012)}
  26%,74%{opacity:1;transform:none}
  82%{transform:perspective(900px) translateY(-2px) rotateX(-1.5deg) scale(1.01,.99)}
  100%{opacity:0;transform:perspective(900px) translateY(-46px) rotateX(-18deg) rotateY(calc(var(--td,1)*-10deg)) rotateZ(calc(var(--td,1)*1.5deg)) scale(.9)}}
}}

/* ================= v23: background logos very subtle ================= */
.lq-s i b{opacity:calc(var(--o) * .38) !important;filter:none !important}
.lq-s i.far b{opacity:calc(var(--o) * .3) !important;filter:blur(2px) !important}
:root:not([data-theme="light"]) .lq-s i b{opacity:calc(var(--o) * .45) !important}

/* ================= v24: speed. Scroll-linked effects (which made the phone redraw every frame) are replaced by
   one-shot transitions that play when something enters or leaves the screen, then go completely still ================= */
html:root body :is(.plan,.tile,.pg-link,.soc,.advice,.closing,.faq .qa,.plan li,.group li,.pg-group li,.steps li,.pg-steps li,.vs-col,.grow-row,.reasons li,.al-points li,.lede,.pg-fit,.pg-form,.res-plan,a.lql,.socials>*,.bento>*,.addon-groups>.group,.pg-group,.btn,.rv,.kt .w,.lq-ring,.lq-ring i),
main>.band>.wrap,main>.kin,.static main>*,a.lql{animation:none !important}
.lq-s{animation:none !important}
/* no live blur anywhere while scrolling: blur over moving content is the most expensive thing a phone can draw */
.nav{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(255,255,255,.88) !important}
:root:not([data-theme="light"]) .nav{background:rgba(10,22,48,.88) !important}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .nav{background:rgba(255,255,255,.88) !important}}
.tick-bar,.al-tag{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
/* fewer, lighter background logos */
.lq-s i:nth-child(n+13){display:none}
.lq-s i{will-change:auto} .lq-s i b{will-change:transform}

/* liquid entrance: tilts and turns in from the side you scroll from, settles with a springy wobble, then stops */
@media (prefers-reduced-motion: no-preference){
 .lqe{opacity:0;transform:perspective(900px) translateY(44px) rotateX(15deg) rotateY(calc(var(--td,1)*8deg)) scale(.95);
  transition:opacity .55s ease,transform .95s cubic-bezier(.2,1.5,.35,1);transition-delay:calc(var(--si,0) * 50ms)}
 .lqe.from-top{transform:perspective(900px) translateY(-44px) rotateX(-15deg) rotateY(calc(var(--td,1)*-8deg)) scale(.95)}
 .lqe.lq-in{opacity:1;transform:none}
 .lqe:nth-child(even){--td:-1}
 /* kinetic headlines: words rise in one after another */
 .kt .w{opacity:0;transform:translateY(.45em) rotateX(55deg);transition:opacity .45s ease,transform .8s cubic-bezier(.2,1.45,.35,1);transition-delay:calc(var(--i,0) * 55ms)}
 .kt.lq-in .w{opacity:1;transform:none}
 /* the edge light sweeps once around each card or button as it arrives */
 .lq-ring{opacity:.35;transition:opacity 1.2s ease}
 .lq-in>.lq-ring{opacity:.6}
 .lq-ring i{rotate:-160deg;transition:rotate 1.5s cubic-bezier(.3,.75,.2,1)}
 .lq-in>.lq-ring i{rotate:200deg}
}

/* ================= v25: the dropdown menu is solid again (it had become see-through) ================= */
html:root body .msheet{background:#FFFFFF !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,185,235,.55),0 30px 70px -20px rgba(20,50,120,.35) !important}
:root:not([data-theme="light"]) .msheet{background:#0C1834 !important}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .msheet{background:#FFFFFF !important}}
/* menu rows: clean list, no flowing underline, no entrance tilt */
.msheet a,.msheet a.lql{display:flex !important;background-image:none !important;padding-bottom:0;text-shadow:none;opacity:1 !important;transform:none !important;transition:background .2s}
.msheet a:hover,.msheet a:active{background:rgba(59,130,246,.08) !important}
.msheet a+a{box-shadow:0 -1px 0 rgba(150,185,235,.35)}
.msheet .lq-ring{display:none}

/* ================= v26: desktop shows the phone design, centred in a comfortable column ================= */
.wrap{max-width:720px !important;margin-inline:auto !important}
.nav{width:min(720px,calc(100% - 24px)) !important}
.opener .pin,.ob-pin{max-width:720px;margin-inline:auto}
.msheet{max-width:696px;margin-inline:auto}
.chatbox{right:max(18px,calc(50% - 360px))}
.tick-bar{justify-content:center}
@media (min-width:900px){
 body{font-size:18px}
 .al-phone{width:min(260px,70%)}
}

/* ================= v27: wide screens get the phone background: the phone's logo field is repeated side by side ================= */
.lq-s.lq-tilew{inset:-8% auto -8% var(--lx,0px);width:430px}
.lq-s.lq-tilew.flip{transform:scaleX(-1)}
.lq-s.lq-tilew.shift{top:-14%;bottom:-2%}
:root{color-scheme:light}

/* ================= v29: solid chat window; a bigger, zoomed-in scroll story for "Everything connected" ================= */
html:root body :is(.chatbox,.hello){background:#FFFFFF !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(150,185,235,.55),0 30px 70px -20px rgba(20,50,120,.35) !important}
.chatbox .m.bot,.chatbox .bk{background:#EEF4FF !important;box-shadow:inset 0 0 0 1px rgba(150,185,235,.5) !important}
.chatbox .lq-ring{display:none}
.chatbox a.lql{background-image:none !important;display:inline !important;opacity:1 !important;transform:none !important}
.chatbox .m,.chatbox .m *{text-shadow:none}

/* the orbit pins to the screen and the camera flies in from very close, then pulls back while the three lines change */
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
 .ob{height:280vh !important;view-timeline-name:--ob}
 .ob-pin{position:sticky !important;top:0;height:100vh !important;min-height:560px;max-height:none !important;max-width:none !important}
 .ob-scene{top:40% !important}
 .ob-cam{animation:obZoom linear both !important;animation-timeline:--ob !important;animation-range:contain 0% contain 100% !important;transform-origin:50% 40%}
 @keyframes obZoom{0%{transform:scale(3.1) rotate(-10deg)}35%{transform:scale(1.75) rotate(-2deg)}65%{transform:scale(1.4) rotate(1deg)}100%{transform:scale(1.15) translateY(-24px) rotate(4deg)}}
 .ob-glow{animation:obGlow linear both;animation-timeline:--ob;animation-range:contain 0% contain 100%}
 @keyframes obGlow{0%{opacity:.4;transform:scale(1.8)}50%{opacity:1;transform:scale(1.1)}100%{opacity:.8;transform:scale(1)}}
 .ob-st2,.ob-st3{display:grid}
 .ob-text>.ob-st1{animation:obOut linear both;animation-timeline:--ob;animation-range:contain 28% contain 38%}
 .ob-text>.ob-st2{animation:obMid linear both;animation-timeline:--ob;animation-range:contain 34% contain 70%}
 .ob-text>.ob-st3{animation:obIn linear both;animation-timeline:--ob;animation-range:contain 68% contain 78%}
 .ob-text{bottom:9vh !important}
 .ob-st h2{font-size:clamp(38px,7vw,64px) !important}
}}