/* Sahaj public site. Colours are the Foundation Kit tokens (light), font is self-hosted Figtree.
   No inline styles anywhere (the CSP forbids them): stagger delays use the .d1-.d6 classes. */
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  color-scheme:light;
  --accent:#0e6b5c;--accent-ink:#0a5749;--accent-wash:#e6f2ef;--accent-200:#c9e4dc;
  --deep:#08332c;--deeper:#06231f;--mint:#5fd3b6;--mint-2:#8ee6cf;
  --surface:#fff;--canvas:#f7f9f8;--subtle:#edf1ef;--border:#e3e9e6;--border-strong:#ccd6d2;
  --ink:#0f1a17;--soft:#4a5b56;--muted:#6b7a75;--dim:#a8b5b0;
  --ok:#167a3c;--ok-wash:#e8f5ec;--warn:#b45309;--warn-wash:#fdf3e7;--bad:#c0342b;--bad-wash:#fcedec;--info:#1d4ed8;--info-wash:#eaf0fe;
  --g-bg:#0a1512;--g-card:#122320;--g-card-2:#18302b;--g-line:#21403a;--g-ink:#eaf5f1;--g-soft:#8fb0a6;--g-go:#19b888;--g-stop:#e04a3c;--g-hold:#e8a33d;
  --shadow:0 1px 2px rgba(8,51,44,.05),0 12px 30px rgba(8,51,44,.08);
  --shadow-lg:0 2px 6px rgba(8,51,44,.08),0 40px 80px rgba(8,51,44,.22);
  --radius:22px;--max:1180px;
  --font:"Figtree","Noto Sans Devanagari",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--font);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit}button{font:inherit;color:inherit}
img,svg{max-width:100%}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:80;padding:10px 16px;background:var(--accent);color:#fff;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:800}
h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:800}
h3{font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:700}
.grad{background:linear-gradient(100deg,var(--accent) 10%,#14957f 55%,var(--mint) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.on-dark .eyebrow{color:var(--mint)}
section{padding:110px 0;position:relative}
.head{max-width:44em;margin-bottom:56px}
.head.center{margin-inline:auto;text-align:center}.head.center .eyebrow::before{display:none}
.head p{margin-top:16px;color:var(--soft);font-size:19px}
.on-dark .head p{color:#a9c9c0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:14px;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,border-color .25s}
.btn .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}.btn:hover .ic{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(14,107,92,.28)}
.btn-primary:hover{background:var(--accent-ink);box-shadow:0 14px 30px rgba(14,107,92,.34)}
.btn-ghost{background:var(--surface);color:var(--accent-ink);border-color:var(--accent-200)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-mint{background:var(--mint);color:var(--deeper);box-shadow:0 10px 30px rgba(95,211,182,.3)}
.btn-mint:hover{background:var(--mint-2)}
.btn-line-light{color:#fff;border-color:rgba(255,255,255,.35)}.btn-line-light:hover{border-color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(247,249,248,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-color:var(--border);box-shadow:0 6px 24px rgba(8,51,44,.06)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:10px}
.nav{display:flex;align-items:center;gap:30px;font-weight:600;font-size:15px;color:var(--soft)}
.nav a{text-decoration:none;position:relative;transition:color .2s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{padding:11px 20px;font-size:15px;color:#fff}
.menu-btn{display:none;background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer;border-radius:10px}

/* ---------- hero ---------- */
.hero{padding:76px 0 40px;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:-1}
.orb.o1{width:520px;height:520px;right:-120px;top:-160px;background:#bfe7dc;animation:drift 18s ease-in-out infinite alternate}
.orb.o2{width:380px;height:380px;left:-160px;top:220px;background:#d9efe9;animation:drift 22s ease-in-out infinite alternate-reverse}
.grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%);opacity:.6}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--soft);box-shadow:var(--shadow);margin-bottom:24px}
.badge b{background:var(--accent-wash);color:var(--accent-ink);padding:3px 10px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.04em}
.hero .lead{margin-top:24px;font-size:20px;color:var(--soft);max-width:31em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ticks-row{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:15px;font-weight:600;color:var(--soft)}
.ticks-row li{display:flex;align-items:center;gap:8px}
.ticks-row .ic{width:20px;height:20px;color:var(--ok)}

/* hero stage */
.stage{position:relative;height:600px;display:flex;justify-content:center;align-items:center}
.ring{position:absolute;border-radius:50%;border:1px dashed var(--accent-200)}
.ring.r1{width:520px;height:520px;animation:spin 60s linear infinite}
.ring.r2{width:380px;height:380px;border-style:solid;border-color:rgba(14,107,92,.08)}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:12px 16px 12px 12px;font-size:14px;animation:float 6s ease-in-out infinite}
.chip b{display:block;font-weight:700;line-height:1.25}.chip small{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
.chip .ci{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}.chip .ci .ic{width:20px;height:20px}
.chip.c1{left:-10px;top:96px}
.chip.c2{right:-20px;top:210px;animation-delay:-2s}
.chip.c3{left:10px;bottom:84px;animation-delay:-4s}

/* phone */
.phone{position:relative;z-index:2;width:288px;border-radius:44px;background:#0d1714;padding:11px;box-shadow:var(--shadow-lg),inset 0 0 0 2px #26332f}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:20px;background:#0d1714;z-index:2}
.scr{border-radius:34px;background:var(--canvas);overflow:hidden;height:560px;padding:44px 15px 0;position:relative;font-size:13px}
.scr.dark{background:var(--g-bg);color:var(--g-ink)}
.p-hello{color:var(--muted);font-size:12.5px;font-weight:500}
.p-title{font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.p-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.p-top span{color:var(--muted);font-size:12px;font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:13px}
.due{margin:14px 0 4px;border-radius:20px;padding:16px;background:linear-gradient(135deg,var(--accent),#0b5246);color:#fff;position:relative;overflow:hidden}
.due::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08)}
.due small{opacity:.8;font-size:12px;font-weight:600}
.due b{display:block;font-size:31px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.due .meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.due .meta em{font-style:normal;font-size:12px;opacity:.85}
.due .pay{background:#fff;color:var(--accent-ink);font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:10px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 6px}
.qa span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--soft)}
.qa i{width:44px;height:44px;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent)}
.qa .ic{width:19px;height:19px}
.sec-t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:14px 2px 2px}
.row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:10px 11px;margin-top:8px}
.row .pi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.row .pi .ic{width:17px;height:17px}
.row b{display:block;font-weight:700;font-size:13px;line-height:1.3}
.row small{display:block;color:var(--muted);font-size:11.5px;font-weight:500}
.row>div{min-width:0}
.amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.pill{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.ok{background:var(--ok-wash);color:var(--ok)}.warn{background:var(--warn-wash);color:var(--warn)}.info{background:var(--info-wash);color:var(--info)}.bad{background:var(--bad-wash);color:var(--bad)}.acc{background:var(--accent-wash);color:var(--accent)}
.tabbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:10px 6px 18px;background:var(--surface);border-top:1px solid var(--border);font-size:10.5px;font-weight:600;color:var(--dim)}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px}.tabbar .ic{width:19px;height:19px}.tabbar .on{color:var(--accent)}
.dark .tabbar{background:var(--g-card);border-color:var(--g-line);color:var(--g-soft)}.dark .tabbar .on{color:var(--g-go)}

/* resident screens: approval, UPI, booking, helpdesk */
.approve{margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.approve .face{width:64px;height:64px;margin:4px auto 10px;border-radius:50%;background:var(--subtle);display:grid;place-items:center;color:var(--muted)}
.approve .face .ic{width:30px;height:30px}
.approve h4{font-size:17px;font-weight:800}.approve p{color:var(--muted);font-size:12.5px;margin-top:2px}
.countdown{height:6px;border-radius:6px;background:var(--subtle);margin:14px 0;overflow:hidden}
.countdown i{display:block;height:100%;width:100%;background:var(--warn);border-radius:6px;transform-origin:left;animation:shrink 45s linear infinite}
.acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.acts span{padding:10px 0;border-radius:12px;font-weight:700;font-size:12.5px}
.acts .a1{background:var(--ok);color:#fff}.acts .a2{background:var(--bad-wash);color:var(--bad)}.acts .a3{background:var(--subtle);color:var(--ink)}
.upi{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;text-align:center;margin-top:6px}
.upi small{color:var(--muted);font-weight:600}.upi b{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em}
.qr{width:136px;height:136px;margin:12px auto;border-radius:14px;border:1px solid var(--border);padding:10px;background:var(--surface)}
.qr svg{width:100%;height:100%;display:block}
.timer{font-size:12px;font-weight:600;color:var(--warn)}
.p-btn{display:block;margin-top:12px;padding:11px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;text-align:center}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.slots span{padding:9px 0;border-radius:11px;text-align:center;font-weight:600;font-size:12px;background:var(--surface);border:1px solid var(--border)}
.slots .on{background:var(--accent);border-color:var(--accent);color:#fff}.slots .off{color:var(--dim);background:var(--subtle);text-decoration:line-through}
.days{display:flex;gap:6px;margin-top:6px}
.days span{flex:1;text-align:center;padding:8px 0;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);line-height:1.2}
.days span b{display:block;font-size:15px;color:var(--ink)}
.days .on{background:var(--accent-wash);border-color:var(--accent-200)}.days .on b{color:var(--accent-ink)}
.steps-v{margin-top:12px;position:relative;padding-left:4px}
.steps-v div{display:flex;gap:12px;padding-bottom:16px;position:relative}
.steps-v div::before{content:"";position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--border)}
.steps-v div:last-child::before{display:none}
.steps-v i{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);flex:none;margin-top:2px;position:relative;z-index:1}
.steps-v .done i{background:var(--ok);border-color:var(--ok)}
.steps-v .now i{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-wash)}
.steps-v b{display:block;font-size:13px}.steps-v small{color:var(--muted);font-size:11.5px}

/* gate (dark) */
.g-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.g-head b{font-size:19px;font-weight:800}
.g-dot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--g-go)}
.g-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g-go);animation:pulse 2s infinite}
.g-code{background:var(--g-card);border:1px solid var(--g-line);border-radius:18px;padding:14px;text-align:center}
.g-code small{color:var(--g-soft);font-weight:600}
.g-digits{display:flex;justify-content:center;gap:8px;margin:10px 0 4px}
.g-digits span{width:38px;height:48px;border-radius:12px;background:var(--g-card-2);border:1px solid var(--g-line);display:grid;place-items:center;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.g-digits span.typed{border-color:var(--g-go);animation:typein .5s var(--ease) both}
.g-digits span:nth-child(2){animation-delay:.25s}.g-digits span:nth-child(3){animation-delay:.5s}.g-digits span:nth-child(4){animation-delay:.75s}
.g-ok{margin-top:12px;border-radius:18px;padding:14px;background:rgba(25,184,136,.12);border:1px solid rgba(25,184,136,.35);display:flex;gap:12px;align-items:center}
.g-ok .gi{width:40px;height:40px;border-radius:12px;background:var(--g-go);color:#04231b;display:grid;place-items:center;flex:none}
.g-ok b{display:block;font-size:14px}.g-ok small{color:var(--g-soft);font-size:12px}
.g-btn{display:block;margin-top:12px;padding:13px;border-radius:14px;background:var(--g-go);color:#04231b;font-weight:800;text-align:center;font-size:14px}
.g-row{display:flex;align-items:center;gap:10px;background:var(--g-card);border:1px solid var(--g-line);border-radius:14px;padding:10px 11px;margin-top:8px}
.g-row b{display:block;font-size:13px}.g-row small{color:var(--g-soft);font-size:11.5px}
.g-row .t{margin-left:auto;color:var(--g-soft);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.g-row .pi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--g-card-2);color:var(--g-go)}
.g-row .pi .ic{width:16px;height:16px}
.g-row .pi.h{color:var(--g-hold)}.g-row .pi.s{color:var(--g-stop)}

/* ---------- strip (facts marquee) ---------- */
.strip{padding:26px 0;border-block:1px solid var(--border);background:var(--surface);overflow:hidden}
.marquee{display:flex;width:max-content;animation:marquee 40s linear infinite}
.strip:hover .marquee{animation-play-state:paused}
.marquee ul{display:flex;gap:48px;padding-right:48px}
.marquee li{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--soft);white-space:nowrap;font-size:16px}
.marquee .ic{width:20px;height:20px;color:var(--accent)}

/* ---------- problems ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.pain:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-200)}
.pain .before{display:flex;gap:12px;align-items:flex-start;color:var(--soft);font-size:16px}
.pain .before .x{width:30px;height:30px;border-radius:9px;background:var(--bad-wash);color:var(--bad);display:grid;place-items:center;flex:none}
.pain .before .x .ic{width:16px;height:16px}
.pain .before q{quotes:none;font-weight:600;color:var(--ink)}
.pain .arrow{height:28px;margin:14px 0 12px 14px;border-left:2px dashed var(--accent-200)}
.pain .after{display:flex;gap:12px;align-items:flex-start}
.pain .after .y{width:30px;height:30px;border-radius:9px;background:var(--ok-wash);color:var(--ok);display:grid;place-items:center;flex:none}
.pain .after .y .ic{width:16px;height:16px}
.pain .after b{display:block;font-size:17px}
.pain .after span{display:block;color:var(--soft);font-size:15.5px;margin-top:4px}

/* ---------- tour carousel (admin console) ---------- */
.tour{background:linear-gradient(180deg,var(--canvas),var(--surface))}
.carousel{position:relative}
.car-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:6px 2px 24px;outline:none}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{scroll-snap-align:start;flex:none}
.car-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.car-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.car-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-btn .ic{width:20px;height:20px}
.dots{display:flex;gap:7px}
.dot-btn{width:8px;height:8px;padding:0;border-radius:8px;border:0;background:var(--border-strong);cursor:pointer;transition:width .35s var(--ease),background .35s}
.dot-btn.on{width:28px;background:var(--accent)}
.on-dark .car-btn{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.on-dark .dot-btn{background:rgba(255,255,255,.25)}.on-dark .dot-btn.on{background:var(--mint)}

.slide{width:100%;display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:44px;box-shadow:var(--shadow)}
.slide-copy .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-wash);padding:5px 12px;border-radius:99px;margin-bottom:16px}
.slide-copy h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;font-weight:800;line-height:1.15}
.slide-copy p{margin-top:12px;color:var(--soft)}
.slide-copy ul{margin-top:18px;display:grid;gap:10px}
.slide-copy li{display:flex;gap:10px;font-size:16px;font-weight:500}
.slide-copy li .ic{width:20px;height:20px;color:var(--ok);margin-top:2px}
.slide .slide-copy>*{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.is-active .slide-copy>*{opacity:1;transform:none}
.slide.is-active .slide-copy>:nth-child(2){transition-delay:.06s}.slide.is-active .slide-copy>:nth-child(3){transition-delay:.12s}.slide.is-active .slide-copy>:nth-child(4){transition-delay:.18s}
.no-js .slide .slide-copy>*{opacity:1;transform:none}

/* desktop mock */
.desk{border-radius:16px;border:1px solid var(--border);background:var(--canvas);overflow:hidden;box-shadow:0 30px 60px rgba(8,51,44,.14);font-size:12.5px}
.desk-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.desk-bar i{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
.desk-bar span{margin-left:12px;padding:4px 14px;border-radius:8px;background:var(--subtle);color:var(--muted);font-size:11.5px;font-weight:600}
.desk-in{display:grid;grid-template-columns:150px 1fr;min-height:330px}
.side{background:var(--surface);border-right:1px solid var(--border);padding:14px 10px}
.side .lg{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;margin:0 6px 14px}
.side .lg img{width:22px;height:22px;border-radius:6px}
.side span{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;color:var(--soft);font-weight:600;font-size:12px}
.side span .ic{width:15px;height:15px}
.side .on{background:var(--accent-wash);color:var(--accent-ink)}
.main{padding:16px 18px}
.main h4{font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center}
.main h4 em{font-style:normal;font-size:11px;font-weight:700;background:var(--accent);color:#fff;padding:5px 10px;border-radius:8px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.tile small{color:var(--muted);font-weight:600;font-size:11px}
.tile b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile b.bad-t{color:var(--bad)}
.tbl{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tbl div{display:grid;grid-template-columns:1.1fr 1.4fr .9fr .9fr;gap:8px;padding:8px 12px;border-top:1px solid var(--border);align-items:center}
.tbl div:first-child{border-top:0;background:var(--subtle);color:var(--muted);font-weight:700;font-size:11px}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.tbl .pill{margin:0;justify-self:start}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:12px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--accent-200);transform-origin:bottom;transform:scaleY(.1);transition:transform .9s var(--ease)}
.bars i.hi{background:var(--accent)}
.is-active .bars i,.no-js .bars i{transform:none}
.h1{height:45%}.h2{height:62%}.h3{height:55%}.h4{height:78%}.h5{height:70%}.h6{height:92%}
.quorum{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}
.meter{height:10px;border-radius:10px;background:var(--subtle);margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--accent),var(--mint));border-radius:10px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.is-active .meter i,.no-js .meter i{transform:none}
.vote{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-top:10px;font-weight:600}
.vote span{color:var(--soft)}.vote b{font-variant-numeric:tabular-nums}

/* ---------- features ---------- */
.feat-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-24px 0 36px}
.feat-tabs button{border:1px solid var(--border);background:var(--surface);padding:9px 18px;border-radius:99px;font-weight:700;font-size:14.5px;color:var(--soft);cursor:pointer;transition:all .25s var(--ease)}
.feat-tabs button:hover{border-color:var(--accent-200);color:var(--ink)}
.feat-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .3s}
.feat::after{content:"";position:absolute;inset:auto -40% -60% auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(var(--accent-wash),transparent 70%);opacity:0;transition:opacity .4s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.feat:hover::after{opacity:1}
.feat .fi{width:48px;height:48px;border-radius:14px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin-bottom:18px;transition:transform .4s var(--ease),background .3s,color .3s}
.feat:hover .fi{transform:rotate(-6deg) scale(1.06);background:var(--accent);color:#fff}
.feat p{margin-top:8px;color:var(--soft);font-size:15.5px}
.feat .who{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feat.hide{display:none}

/* ---------- apps (dark) ---------- */
.apps{background:radial-gradient(900px 500px at 15% 0,#0f4a40,transparent 60%),radial-gradient(800px 500px at 100% 100%,#0c3d35,transparent 60%),var(--deeper);color:#fff;overflow:hidden}
.apps .wrap{position:relative}
.app-block{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.app-block+.app-block{margin-top:110px}
.app-block.flip .app-copy{order:2}
.app-copy h3{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.app-copy p{margin-top:14px;color:#a9c9c0;font-size:18px}
.app-copy ul{margin-top:24px;display:grid;gap:14px}
.app-copy li{display:flex;gap:14px;align-items:flex-start}
.app-copy li .li{width:38px;height:38px;border-radius:12px;background:rgba(95,211,182,.12);color:var(--mint);display:grid;place-items:center;flex:none}
.app-copy li .li .ic{width:19px;height:19px}
.app-copy li b{display:block;font-size:16.5px}.app-copy li span{color:#9fc0b7;font-size:15px}
.phones .car-track{gap:28px;padding:20px 4px 30px;scroll-padding-inline:4px}
.ph{width:300px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .5s var(--ease),opacity .5s}
.phones .ph{opacity:.55;transform:scale(.94)}
.phones .ph.is-active{opacity:1;transform:none}
.no-js .phones .ph{opacity:1;transform:none}
.ph figcaption{margin-top:20px;max-width:270px}
.ph figcaption b{display:block;font-size:17px}.ph figcaption span{color:#9fc0b7;font-size:14.5px}

/* ---------- roles ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.role{border-radius:var(--radius);padding:30px;background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.role:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.role .ri{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;color:#fff;background:linear-gradient(135deg,var(--accent),#14957f)}
.role .ri .ic{width:26px;height:26px}
.role li{display:flex;gap:10px;margin-top:11px;color:var(--soft);font-size:15.5px}
.role li .ic{width:18px;height:18px;color:var(--accent);margin-top:4px}
.role .rtag{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.role h3{margin-top:4px;font-size:22px}

/* ---------- how ---------- */
.how-list{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;position:relative}
.how-list::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--accent-200) 0 8px,transparent 8px 14px)}
.how-list li{counter-increment:s;position:relative}
.how-list li::before{content:counter(s);display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--surface);border:2px solid var(--accent-200);color:var(--accent);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums;margin-bottom:20px;position:relative;transition:background .3s,color .3s,border-color .3s}
.how-list li:hover::before{background:var(--accent);color:#fff;border-color:var(--accent)}
.how-list p{margin-top:8px;color:var(--soft);font-size:15.5px}

/* ---------- trust ---------- */
.trust-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:32px;padding:56px;box-shadow:var(--shadow)}
.trust-list{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.trust-list li{display:flex;gap:14px}
.trust-list .ti{width:42px;height:42px;border-radius:13px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;flex:none}
.trust-list .ti .ic{width:20px;height:20px}
.trust-list b{display:block}.trust-list span{color:var(--soft);font-size:15px}
.shield{position:relative;width:200px;height:200px;margin:28px auto 0;display:grid;place-items:center}
.shield::before,.shield::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-200);animation:ripple 3s var(--ease) infinite}
.shield::after{animation-delay:1.5s}
.shield i{width:110px;height:110px;border-radius:32px;background:linear-gradient(135deg,var(--accent),#14957f);display:grid;place-items:center;color:#fff;box-shadow:0 20px 40px rgba(14,107,92,.3);position:relative;z-index:1}
.shield .ic{width:52px;height:52px;stroke-width:1.6}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:32px;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.plan.featured{background:linear-gradient(160deg,var(--accent),var(--deep));color:#fff;border-color:transparent;box-shadow:var(--shadow-lg)}
.plan .ptag{position:absolute;top:-13px;left:32px;background:var(--mint);color:var(--deeper);font-size:12px;font-weight:800;padding:5px 12px;border-radius:99px;letter-spacing:.04em}
.plan h3{font-size:22px}
.plan .units{color:var(--muted);font-weight:600;margin-top:2px}
.plan.featured .units{color:#a9d8cc}
.plan .price{font-size:46px;font-weight:800;letter-spacing:-.04em;margin:18px 0 4px;font-variant-numeric:tabular-nums}
.plan .price small{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan.featured .price small{color:#a9d8cc}
.plan .per{font-size:14px;color:var(--muted);font-weight:500}
.plan.featured .per{color:#a9d8cc}
.plan ul{margin:22px 0 28px;display:grid;gap:11px;flex:1}
.plan li{display:flex;gap:10px;font-size:15.5px}
.plan li .ic{width:19px;height:19px;color:var(--ok);margin-top:3px}
.plan.featured li .ic{color:var(--mint)}
.plan .btn{width:100%}
.plan.featured .btn{background:#fff;color:var(--deep);box-shadow:none}
.more{text-align:center;margin-top:30px;color:var(--soft)}
.more a{color:var(--accent);font-weight:700}
.fine{text-align:center;margin:10px auto 0;max-width:44em;color:var(--muted);font-size:14px}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-grid .head{margin-bottom:0;position:sticky;top:110px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:700;font-size:18px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:30px;height:30px;border-radius:50%;background:var(--accent-wash);flex:none;position:relative;transition:transform .35s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--accent)}
.faq summary i::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.faq details[open] summary i{background:var(--accent);transform:rotate(180deg)}
.faq details[open] summary i::before{background:#fff}
.faq details[open] summary i::after{transform:rotate(0);background:#fff}
.faq details p{padding:0 50px 22px 0;color:var(--soft);animation:fadein .4s var(--ease)}

/* ---------- final ---------- */
.final{padding-top:20px}
.band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--deeper));color:#fff;text-align:center;border-radius:36px;padding:84px 28px}
.band::before,.band::after{content:"";position:absolute;border-radius:50%;background:rgba(95,211,182,.16);filter:blur(10px)}
.band::before{width:360px;height:360px;left:-120px;top:-160px;animation:drift 14s ease-in-out infinite alternate}
.band::after{width:300px;height:300px;right:-80px;bottom:-160px;animation:drift 16s ease-in-out infinite alternate-reverse}
.band>*{position:relative;z-index:1}
.band p{margin:16px auto 32px;max-width:36em;color:#cfe9e2;font-size:19px}
.band .cta{justify-content:center;margin-top:0}

/* ---------- footer ---------- */
footer{padding:64px 0 40px;border-top:1px solid var(--border);margin-top:110px;background:var(--surface)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot p{margin-top:12px;color:var(--muted);font-size:15px;max-width:22em}
.foot h4{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot li+li{margin-top:9px}
.foot a{text-decoration:none;color:var(--soft);font-size:15px}.foot a:hover{color:var(--accent)}
.copy{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}.js .reveal.d4{transition-delay:.32s}.js .reveal.d5{transition-delay:.4s}
.hero-in>*{animation:rise .9s var(--ease) both}
.hero-in>:nth-child(2){animation-delay:.08s}.hero-in>:nth-child(3){animation-delay:.16s}.hero-in>:nth-child(4){animation-delay:.24s}.hero-in>:nth-child(5){animation-delay:.32s}
.stage .phone{animation:rise 1.1s .2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(25,184,136,.6)}70%{box-shadow:0 0 0 8px rgba(25,184,136,0)}100%{box-shadow:0 0 0 0 rgba(25,184,136,0)}}
@keyframes typein{from{opacity:0;transform:translateY(-8px) scale(.8)}to{opacity:1;transform:none}}
@keyframes ripple{from{transform:scale(.55);opacity:1}to{transform:scale(1.15);opacity:0}}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .slide .slide-copy>*{opacity:1;transform:none}.bars i,.meter i{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero .wrap{grid-template-columns:1fr;gap:20px}
  .stage{height:600px}
  .slide{grid-template-columns:1fr;padding:30px;gap:28px}
  .feat-grid,.pain-grid,.roles,.plans{grid-template-columns:1fr 1fr}
  .app-block,.trust-box,.faq-grid{grid-template-columns:1fr;gap:36px}
  .app-block.flip .app-copy{order:0}
  .faq-grid .head{position:static}
  .how-list{grid-template-columns:1fr 1fr;row-gap:36px}.how-list::before{display:none}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  section{padding:76px 0}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:var(--canvas);padding:12px 20px 22px;border-bottom:1px solid var(--border);box-shadow:0 20px 30px rgba(8,51,44,.08)}
  .nav a:not(.btn){padding:12px 4px}.nav a:not(.btn)::after{display:none}
  .site-header.menu-open .nav{display:flex}
  .feat-grid,.pain-grid,.roles,.plans,.trust-list,.how-list{grid-template-columns:1fr}
  .plans{gap:28px}
  .stage{height:560px;transform:scale(.92)}
  .ring.r1{width:400px;height:400px}
  .chip.c1{left:-6px;top:40px}.chip.c2{right:-10px;top:250px}.chip.c3{left:0;bottom:30px}
  .chip{padding:9px 12px 9px 9px;font-size:13px}.chip .ci{width:32px;height:32px}
  .desk-in{grid-template-columns:1fr}.side{display:none}
  .tiles{grid-template-columns:1fr 1fr}.tiles .tile:nth-child(3){display:none}
  .tbl div{grid-template-columns:1fr 1fr .8fr}.tbl div>:nth-child(2){display:none}
  .slide{padding:22px;border-radius:22px}
  .trust-box{padding:28px;border-radius:24px}
  .band{padding:60px 22px;border-radius:26px}
  .foot{grid-template-columns:1fr}
  .faq details p{padding-right:0}
  .ph{width:280px}
}

/* ---------- fixes: phone text colour, grid overflow, hidden page scrollbar ---------- */
.scr{color:var(--ink);text-align:left}
.scr.dark{color:var(--g-ink)}
.app-block,.hero .wrap,.slide,.trust-box,.faq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.slide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.app-block>*,.hero .wrap>*,.slide>*{min-width:0}
.phones{max-width:100%}
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
@media (max-width:1040px){.app-block,.hero .wrap,.slide,.trust-box,.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- demo request dialog ---------- */
.demo{width:min(560px,100% - 32px);max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:26px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);overflow:auto;scrollbar-width:none}
.demo::-webkit-scrollbar{display:none}
.demo::backdrop{background:rgba(6,35,31,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.demo[open]{animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.demo-head{position:relative;padding:28px 28px 20px;background:linear-gradient(135deg,var(--accent),var(--deep));color:#fff}
.demo-head h2{font-size:26px;letter-spacing:-.03em}
.demo-head p{margin-top:6px;color:#cfe9e2;font-size:15.5px}
.x-btn{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.x-btn:hover{background:rgba(255,255,255,.25)}
.x-btn .ic{width:18px;height:18px}
.demo form,.demo .done{padding:24px 28px 28px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:700}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:12px;padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.field [aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-wash)}
.field input[type="tel"]{font-variant-numeric:tabular-nums}
.phone-in{display:flex;align-items:stretch}
.phone-in span{display:grid;place-items:center;padding:0 12px;border:1.5px solid var(--border-strong);border-right:0;border-radius:12px 0 0 12px;background:var(--subtle);font-weight:600;color:var(--soft)}
.phone-in input{border-radius:0 12px 12px 0}
.err{min-height:0;font-size:13px;font-weight:600;color:var(--bad)}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}.ts{display:flex;justify-content:center;margin:2px 0 4px}
.form-err{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bad-wash);color:var(--bad);font-weight:600;font-size:14.5px}
.submit{width:100%;margin-top:20px}
.submit.busy{opacity:.7;pointer-events:none}
.consent{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}
.done{text-align:center}
.done:focus{outline:none}
.done .big{width:72px;height:72px;margin:8px auto 16px;border-radius:50%;background:var(--ok-wash);color:var(--ok);display:grid;place-items:center;animation:pop .5s var(--ease)}
.done .big .ic{width:36px;height:36px;stroke-width:2.2}
.done h3{font-size:24px}
.done p{margin-top:8px;color:var(--soft)}
.done .btn{margin-top:22px}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.demo form,.demo .done{padding:20px}.demo-head{padding:24px 20px 18px}}

/* ---------- phone widths ---------- */
@media (max-width:760px){
  .wrap{width:calc(100% - 32px)}
  h1{font-size:clamp(34px,10vw,44px)}
  h2{font-size:clamp(27px,7.6vw,34px)}
  .head{margin-bottom:36px}.head p{font-size:17px}
  .hero{padding:44px 0 20px}
  .hero .lead{font-size:17.5px}
  .badge{font-size:12.5px}
  .cta .btn{flex:1 1 100%}
  .ticks-row{gap:8px 18px;font-size:14px}
  .stage{height:540px;margin:0 -16px;transform:none}
  .stage .phone{transform:scale(.9)}
  .ring.r1{width:340px;height:340px}.ring.r2{width:260px;height:260px}
  .chip{max-width:220px}
  .chip.c1{left:4px;top:30px}.chip.c2{right:4px;top:auto;bottom:150px}.chip.c3{left:4px;bottom:24px}
  .marquee li{font-size:14.5px}
  .pain{padding:22px}
  .feat-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:-12px -16px 28px;padding:0 16px 4px}
  .feat-tabs::-webkit-scrollbar{display:none}
  .feat-tabs button{flex:none}
  .feat{padding:22px}
  .slide-copy h3{font-size:24px}
  .desk{font-size:11.5px}
  .tiles b{font-size:16px}
  .app-block+.app-block{margin-top:72px}
  .phones .car-track{gap:16px}
  .ph{width:min(280px,82vw)}
  .ph .phone{width:100%}
  .how-list li::before{width:48px;height:48px;font-size:19px;margin-bottom:14px}
  .trust-box{gap:24px}
  .shield{width:150px;height:150px;margin-top:20px}.shield i{width:84px;height:84px;border-radius:24px}.shield .ic{width:40px;height:40px}
  .plan{padding:26px}.plan .price{font-size:40px}
  .faq summary{font-size:16.5px;padding:18px 0}
  .band h2{font-size:28px}.band p{font-size:17px}
  footer{margin-top:72px}
}
@media (max-width:380px){
  .stage{height:500px}.stage .phone{transform:scale(.82)}
  .chip{font-size:12px;max-width:190px}
}

/* ---------- demo form: Foundation Kit controls (46px box, 1px border, 11px radius) and a compact layout ---------- */
.demo{width:min(640px,100% - 32px)}
.demo-head{padding:22px 26px 18px}
.demo-head h2{font-size:24px}
.demo-head p{font-size:15px;margin-top:4px}
.demo form,.demo .done{padding:20px 26px 22px}
.fgrid{gap:12px 14px}
.field{gap:5px;position:relative}
.field label{font-size:13.5px}
.field input,.field select,.field textarea,.dd-btn{height:46px;padding:0 14px;border:1px solid var(--border-strong);border-radius:11px;font:500 14.5px/1 var(--font);transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{height:auto;min-height:64px;padding:12px 14px;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:#8a9995;font-weight:400}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,107,92,.14)}
.field [aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(192,52,43,.12)}
.phone-in span{border-width:1px;border-radius:11px 0 0 11px;font-size:14.5px}
.phone-in input{border-radius:0 11px 11px 0}
.submit{margin-top:16px}
.consent{margin-top:10px}

/* custom dropdown (same pattern as Dropdown in packages/ui FormFields.tsx) */
.cs-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.dd{position:relative}
.dd-btn{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface);color:var(--ink);cursor:pointer;outline:none}
.dd-btn.empty{color:#8a9995}
.dd-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn svg{width:16px;height:16px;flex:none;color:var(--soft);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.dd-btn:focus-visible,.dd.open .dd-btn{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,107,92,.14);border-radius:11px}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-btn[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(192,52,43,.12)}
.dd-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);margin:0;padding:5px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 40px -18px rgba(15,26,23,.35),0 2px 6px rgba(15,26,23,.06);max-height:260px;overflow-y:auto;font:500 14px/1.35 var(--font);animation:ddIn .14s var(--ease) both}
.dd-list.up{top:auto;bottom:calc(100% + 6px)}
.dd-list[hidden]{display:none}
.dd-list li{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 10px 9px 12px;border-radius:8px;cursor:pointer;color:var(--ink)}
.dd-list li.act{background:var(--canvas)}
.dd-list li[aria-selected="true"]{background:var(--accent-wash);color:var(--accent-ink);font-weight:600}
.dd-list li span{flex:1}
.dd-list li svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.dd-list li[aria-selected="true"] svg{visibility:visible}
.dd-sheet-bg{display:none}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}

/* phone: the list becomes a bottom sheet, the dialog may scroll */
@media (max-width:560px){
  .dd-sheet-bg{display:block;position:fixed;inset:0;z-index:30;background:rgba(6,35,31,.4)}
  .dd-sheet-bg[hidden]{display:none}
  .dd-list,.dd-list.up{position:fixed;z-index:31;left:0;right:0;top:auto;bottom:0;max-height:70dvh;padding:10px 10px calc(14px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;font-size:15px;animation:sheetIn .22s var(--ease) both}
  .dd-list::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--border-strong);margin:2px auto 10px}
  .dd-list li{min-height:48px}
}
/* desktop: everything fits, the dialog never scrolls */
@media (min-width:561px) and (min-height:700px){.demo{max-height:none;overflow:visible}}
.demo-head{border-radius:26px 26px 0 0}
.demo:focus{outline:none}

/* phone: the dialog sits at the top and never extends under the on-screen keyboard; it scrolls inside */
@media (max-width:560px){
  .demo{margin:calc(var(--vvtop,0px) + 12px) auto auto;max-height:calc(var(--vvh,100dvh) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .demo form{padding-bottom:28px}
}
/* desktop: only skip scrolling when the screen is tall enough; short screens still scroll */
@media (min-width:561px) and (max-height:699px){.demo{max-height:calc(100dvh - 32px);overflow-y:auto}}