/* ClinicGrowth landing page. Builds on ds.css tokens. Bold + minimal. */

html,body{height:auto;min-height:100%;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
.lp{background:var(--bg);overflow-x:clip;}
.lp section[id]{scroll-margin-top:80px;}
.lp section{position:relative;}
.lp .btn,.lp .btn:hover,.lp .btn:focus{text-decoration:none;}
img,svg{max-width:100%;}

/* Dark band: scopes a "dark theme" set of tokens to one section so any
   component inside gets coherent dark styling without per-component overrides. */
.band-dark{
  --bg:#14121C; --bg-2:#181624; --surface:#1D1A2B; --surface-2:#232032; --surface-3:#2C2840; --surface-warm:#232032;
  --ink:#ECEAF4; --head:#F7F6FC; --muted:#A9A5BC; --muted-2:#7A7690;
  --acc:#FF7FB5; --acc-press:#FF8FC0; --acc-soft:rgba(255,127,181,.14); --acc-ink:#FF9CC8;
  --border:#2F2B43; --border-soft:#252237; --border-strong:#3D3858;
  /* blue must flip too, or light-blue bubbles render light-on-light inside the band */
  --blue:#76ACF4; --blue-press:#8AB9F7; --blue-ink:#9CC4F8; --blue-soft:#1E2A40; --blue-pastel:#1A2333;
  background:var(--bg); color:var(--ink);
}
.band-dark + .band-dark{border-top:1px solid var(--border-soft);}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);}
.nav-in{max-width:1180px;margin:0 auto;padding:15px 28px;display:flex;align-items:center;gap:22px;}
.nav .wm{font-size:30px;}
.nav .wm:hover{text-decoration:none;}
.nav-links{display:flex;gap:30px;margin-left:14px;flex:1;}
.nav-links a{color:var(--muted);font-size:14.5px;font-weight:600;text-decoration:none;}
.nav-links a:hover{color:var(--ink);text-decoration:none;}
/* scroll-spy (theme.js): the section you're reading gets the pink underline */
.nav-links a.on{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2.5px;text-underline-offset:6px;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.t-tog{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s;}
.t-tog:hover{color:var(--ink);border-color:var(--ink);}
.t-tog svg{width:18px;height:18px;}
.t-tog .sun{display:none;} :root[data-theme="dark"] .t-tog .sun{display:block;}
:root[data-theme="dark"] .t-tog .moon{display:none;}

/* ===== shared section bits ===== */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--acc);background:var(--acc-soft);padding:7px 15px;border-radius:99px;}
.pulse{width:7px;height:7px;border-radius:99px;background:var(--acc);box-shadow:0 0 0 0 var(--acc);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

.sec-kicker{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;}
.sec-kicker.left{justify-content:flex-start;}
.k-line{width:34px;height:1px;background:var(--border-strong);}
.sec-kicker.left .k-line:last-child{display:none;}
.sec-h{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;color:var(--head);text-align:center;line-height:1.06;max-width:24ch;margin:0 auto;}
.sec-h.left{text-align:left;margin:0;}
.sec-p{text-align:center;max-width:56ch;margin:18px auto 0;color:var(--muted);font-size:17px;line-height:1.6;}
.sec-p.left{text-align:left;margin-left:0;}

/* ===== HERO ===== */
.hero{padding:clamp(56px,8vw,96px) 28px clamp(56px,7vw,80px);}
.hero-in{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero-h{width:100%;font-size:clamp(38px,6.4vw,76px);font-weight:900;letter-spacing:-.045em;line-height:1.12;color:var(--head);margin:28px 0 0;text-wrap:balance;}
.hero-h br+span,.hero-h .hl{display:inline-block;margin-top:.06em;}
.hl{position:relative;color:var(--acc);white-space:nowrap;}
.hl .ul{position:absolute;left:-2%;right:-2%;width:104%;bottom:-.16em;height:.34em;color:var(--acc);opacity:.92;}
.hero-sub{font-size:clamp(15.5px,1.6vw,18px);line-height:1.6;color:var(--muted);max-width:58ch;margin:28px 0 0;}
.hero-sub b{color:var(--ink);font-weight:700;}
.hero-sub strong{display:block;margin-top:14px;color:var(--ink);font-weight:700;}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:34px;}
.hero-cta .btn-lg{padding:15px 26px;font-size:16px;}

/* one-click connect row under the CTA */
.hero-connects{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.hc-lab{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);}
.hc-icons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.hc-icons .ci{display:flex;flex-direction:column;align-items:center;gap:7px;}
.hc-icons .ci svg{width:44px;height:44px;display:block;border-radius:12px;box-shadow:0 4px 12px rgba(25,22,41,.10);}
.ci-lab{font-size:10.5px;font-weight:600;color:var(--muted-2);}

/* ===== STATS BAND ===== */
.stats{padding:clamp(56px,7vw,80px) 28px;}
.stats-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap;}
.stat{text-align:center;flex:0 1 auto;}
.stat-num{display:flex;align-items:baseline;justify-content:center;font-family:var(--font);font-weight:900;letter-spacing:-.045em;color:var(--acc);line-height:1;font-size:clamp(52px,8vw,84px);}
.stat-num .sign{font-size:.62em;font-weight:800;margin-right:.02em;}
.stat-num .unit{font-size:.4em;font-weight:800;letter-spacing:-.01em;color:var(--head);margin-left:.1em;}
.stat-lab{margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--muted);}
.stat-div{width:1px;align-self:stretch;min-height:78px;background:var(--border-strong);}
.stats-foot{text-align:center;margin-top:clamp(24px,4vw,38px);font-size:13px;color:var(--muted-2);font-weight:500;}

@media(max-width:680px){
  .stat-div{display:none;}
  .stats-in{gap:34px;}
  .stat{flex:1 1 40%;}
}

/* ===== DEMO ===== */
.demo-sec{padding:clamp(56px,7vw,80px) 24px;max-width:1140px;margin:0 auto;}
.browser{max-width:1080px;margin:38px auto 0;background:var(--surface);border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);}
.b-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.dots{display:flex;gap:7px;}
.dots i{width:11px;height:11px;border-radius:99px;background:var(--border-strong);}
.dots i:nth-child(1){background:#F0726C;} .dots i:nth-child(2){background:#F2BE4E;} .dots i:nth-child(3){background:#5FCB7E;}
.b-url{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 12px;max-width:300px;margin:0 auto;}
.b-url svg{color:var(--success);opacity:.8;}
.b-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--acc);white-space:nowrap;}
.b-view{position:relative;height:600px;background:var(--bg);overflow:hidden;}
@media(max-width:720px){.b-view{height:auto;aspect-ratio:1000/600;}}

/* demo CTA: live WhatsApp line */
.demo-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px;}
.demo-cta-sub{font-size:13px;color:var(--muted-2);font-weight:500;text-align:center;}

/* step caption strip under the browser */
.demo-steps{display:flex;align-items:center;justify-content:center;gap:14px;max-width:760px;margin:24px auto 0;flex-wrap:wrap;}
.dstep{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--muted-2);transition:color .3s;}
.dstep i{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;font-style:normal;background:var(--surface-3);color:var(--muted-2);transition:background .3s,color .3s,transform .3s;}
.dstep.on{color:var(--head);}
.dstep.on i{background:var(--acc);color:#fff;transform:scale(1.08);}
:root[data-theme="dark"] .dstep.on i{color:var(--bg);}
.dstep.done{color:var(--muted);}
.dstep.done i{background:var(--acc-soft);color:var(--acc);}
.dline{width:30px;height:1px;background:var(--border-strong);}
@media(max-width:560px){.dline{display:none;}}

/* ===================== DEMO MINI-APP ===================== */
.d-canvas{position:absolute;top:0;left:0;width:1000px;height:600px;transform-origin:top left;display:flex;background:var(--bg);font-family:var(--body);color:var(--ink);}
.d-side{width:204px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 12px;}
/* width:fit-content makes the gradient span exactly the glyphs (a block box would
   stretch it across the whole sidebar and the blue end never reaches the text) */
/* spacing as margin, not padding — the sparkle pseudo-elements anchor to the padding
   box, so padding here would push them away from the glyphs (unlike the nav logo) */
.d-wm{font-size:25px;margin:6px 8px 16px;width:fit-content;}
.d-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.d-na{position:relative;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;}
.d-na .d-ni{width:19px;height:19px;color:var(--muted-2);flex-shrink:0;}
.d-na.on{background:var(--surface-2);color:var(--ink);font-weight:600;}
.d-na.on .d-ni{color:var(--ink);}
.d-na.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--acc);}
.d-bdg{margin-left:auto;font-size:11px;font-weight:700;min-width:19px;height:19px;padding:0 6px;border-radius:99px;background:var(--surface-3);color:var(--muted);display:grid;place-items:center;}
.d-na.on .d-bdg{background:var(--acc);color:#fff;}
.d-bdg.acc{background:var(--acc-soft);color:var(--acc);}
:root[data-theme="dark"] .d-na.on .d-bdg{color:var(--bg);}
.d-acct{display:flex;align-items:center;gap:10px;padding:10px 8px 2px;border-top:1px solid var(--border-soft);}
.d-av{width:28px;height:28px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--font);font-weight:800;font-size:12px;flex-shrink:0;}
:root[data-theme="dark"] .d-av{color:var(--bg);}
.d-who b{display:block;font-size:12.5px;color:var(--ink);font-weight:600;}
.d-who span{font-size:11px;color:var(--muted-2);}

.d-area{flex:1;min-width:0;display:flex;}
.d-screen{display:none;flex:1;min-width:0;flex-direction:column;background:var(--bg);opacity:1;}
.d-screen.show{display:flex;}

/* connect-once screen: QR + scan + connected */
.d-connect{align-items:center;justify-content:center;}
.d-conn-card{display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--surface);
  border:1px solid var(--border);border-radius:18px;padding:30px 40px;box-shadow:var(--shadow-md);}
.d-conn-head{display:flex;align-items:center;gap:12px;align-self:stretch;}
.d-conn-head div b{display:block;font-family:var(--font);font-size:18px;font-weight:800;color:var(--head);letter-spacing:-.01em;}
.d-conn-head div span{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.d-qr{position:relative;width:176px;height:176px;color:var(--head);background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:12px;}
.d-qr>svg{width:100%;height:100%;display:block;}
.d-qr-scan{position:absolute;left:12px;right:12px;top:12px;height:3px;border-radius:99px;background:var(--acc);
  box-shadow:0 0 12px var(--acc);animation:qrscan 1.5s ease-in-out infinite alternate;}
@keyframes qrscan{from{transform:translateY(0);}to{transform:translateY(149px);}}
.d-qr.done .d-qr-scan{display:none;}
.d-qr-ok{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);opacity:0;transition:opacity .3s;}
.d-qr-ok svg{width:54px;height:54px;color:var(--success);background:var(--surface);border-radius:99px;
  padding:14px;border:1px solid var(--border);box-shadow:var(--shadow-md);}
.d-qr.done .d-qr-ok{opacity:1;}
@media(prefers-reduced-motion:reduce){.d-qr-scan{animation:none;top:50%;}}

.d-ch{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;padding:6px;}
.d-ch.big{width:34px;height:34px;}
.d-via .d-ch{width:16px;height:16px;padding:0;border-radius:0;background:none!important;}

/* inbox */
.d-head{display:flex;align-items:center;gap:13px;padding:18px 24px 15px;border-bottom:1px solid var(--border-soft);}
.d-head h1{font-family:var(--font);font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--head);}
.d-count{font-size:13px;color:var(--muted-2);font-weight:600;}
.d-sp{flex:1;}
.d-seg{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;}
.d-seg button{border:none;background:transparent;font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 11px;border-radius:7px;cursor:pointer;white-space:nowrap;}
.d-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.d-list{padding:14px 20px;display:flex;flex-direction:column;gap:8px;}
.d-empty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:56px 0 40px;color:var(--muted-2);}
.d-empty.gone{display:none;}
.d-empty-ic{width:44px;height:44px;border-radius:13px;background:var(--surface);border:1.5px dashed var(--border-strong);display:grid;place-items:center;color:var(--muted-2);margin-bottom:4px;}
.d-empty-ic svg{width:21px;height:21px;}
.d-empty b{font-size:13.5px;font-weight:700;color:var(--muted);}
.d-empty>span:last-child{font-size:12px;}
.d-row{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--surface);border:1px solid var(--border);border-radius:13px;transition:border-color .15s,box-shadow .15s,transform .15s;}
.d-row.pop{animation:rowpop .5s cubic-bezier(.2,.7,.3,1) both;}
@keyframes rowpop{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
.d-row.hl{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);transform:translateY(-1px);}
.d-rc{flex:1;min-width:0;}
.d-nm{display:block;font-size:14px;font-weight:600;color:var(--ink);}
.d-sn{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px;}
.d-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0;}
.d-tm{font-size:11.5px;color:var(--muted-2);font-weight:500;flex-shrink:0;width:42px;text-align:right;}

/* conversation */
.d-chead{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--border-soft);background:var(--surface);}
.d-back{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12.5px;font-weight:600;}
.d-cmeta b{display:block;font-family:var(--font);font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--head);}
.d-cmeta span{font-size:12px;color:var(--muted);}
.d-cbody{flex:1;display:flex;min-height:0;}
.d-thread{flex:1;min-width:0;display:flex;flex-direction:column;}
.d-msgs{flex:1;overflow:hidden;padding:20px 22px 8px;background:var(--bg);display:flex;flex-direction:column;}
.d-ctx{text-align:center;margin-bottom:14px;}
.d-ctx span{font-size:11.5px;color:var(--muted-2);font-weight:500;background:var(--surface);border:1px solid var(--border);padding:4px 11px;border-radius:99px;}
.d-ctx.booked span{background:#E3F4EC;border-color:#CDE8D9;color:#1F8A5B;font-weight:600;}
:root[data-theme="dark"] .d-ctx.booked span{background:rgba(63,185,127,.16);border-color:rgba(63,185,127,.3);color:var(--success);}
.d-ctx.soon span{background:var(--acc-soft);border-color:transparent;color:var(--acc);font-weight:600;}
.d-row-m{display:flex;margin-bottom:10px;}
.d-row-m.out{justify-content:flex-end;}
.d-bub{max-width:78%;padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.5;}
.d-row-m.in .d-bub{background:var(--surface);border:1px solid var(--border);border-top-left-radius:5px;color:var(--ink);}
.d-row-m.out .d-bub{background:var(--blue-pastel);border:1px solid color-mix(in srgb,var(--blue) 20%,var(--blue-pastel));border-top-right-radius:5px;color:var(--ink);}
:root[data-theme="dark"] .d-row-m.out .d-bub{background:var(--blue-soft);}

.d-comp{border-top:1px solid var(--border-soft);background:var(--surface);padding:12px 22px 16px;}
.d-rlabel{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:8px;}
.d-rlabel b{color:var(--acc);font-weight:700;}
.dotc{width:7px;height:7px;border-radius:99px;background:var(--acc);flex-shrink:0;}
.dotc.spin{border:2px solid var(--acc-soft);border-top-color:var(--acc);background:none;width:12px;height:12px;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.d-rbox{border:1px solid var(--border-strong);border-radius:13px;background:var(--surface);overflow:hidden;}
.d-rtext{padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--ink);min-height:44px;white-space:pre-wrap;}
.d-rtext.typing::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--acc);vertical-align:-2px;margin-left:1px;animation:caret .8s step-end infinite;}
@keyframes caret{50%{opacity:0;}}
.d-rbar{display:flex;align-items:center;gap:9px;padding:9px 11px;border-top:1px solid var(--border-soft);}
.d-via{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;}
.d-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:13px;font-weight:600;padding:8px 13px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap;}
.d-btn.acc{background:var(--ink-dark);color:#fff;}
:root[data-theme="dark"] .d-btn.acc{background:var(--acc);color:var(--bg);}
.d-btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong);}

/* AI panel */
.d-ai{width:280px;flex-shrink:0;border-left:1px solid var(--border-soft);background:var(--surface);padding:18px 18px 22px;opacity:0;transform:translateX(10px);transition:opacity .3s,transform .3s;overflow:hidden;}
.d-ai.reveal{opacity:1;transform:none;}
.d-ait{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:12px;}
.d-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px;}
.d-kv span{color:var(--muted);} .d-kv b{color:var(--ink);font-weight:600;text-align:right;}
.d-next{margin-top:14px;border:1px solid var(--acc-soft);background:var(--acc-soft);border-radius:13px;padding:13px;}
.d-nlab{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);}
.d-nact{font-family:var(--font);font-size:14px;font-weight:800;color:var(--ink);margin:5px 0 10px;letter-spacing:-.01em;}
.d-slots{display:flex;gap:7px;}
.d-slot{font-size:12px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:6px 10px;transition:background .3s,color .3s,border-color .3s;}
.d-slot.sel{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 4px 12px -4px var(--acc);}

/* autopilot indicator (replaces manual send/book buttons) */
.d-auto{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--acc);
  background:var(--acc-soft);padding:7px 12px;border-radius:99px;white-space:nowrap;transition:background .3s,color .3s;}
.d-auto svg{width:13px;height:13px;}
.d-auto.sent{background:#E3F4EC;color:#1F8A5B;}
.d-auto .dotc{background:currentColor;}
.d-auto.live .dotc{animation:autopulse 1.05s ease-in-out infinite;}
@keyframes autopulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.25;transform:scale(.7);}}

/* booking sheet */
.d-ov{position:absolute;inset:0;background:rgba(26,19,15,.42);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:5;}
.d-ov.on{opacity:1;visibility:visible;}
.d-sheet{width:360px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:20px;transform:scale(.94);transition:transform .3s;}
.d-ov.on .d-sheet{transform:none;}
.d-sheet h3{font-family:var(--font);font-size:17px;font-weight:800;color:var(--head);letter-spacing:-.01em;}
.d-sheet p{font-size:12.5px;color:var(--muted);margin:4px 0 14px;line-height:1.5;}
.d-spick{display:flex;flex-direction:column;gap:8px;}
.d-sopt{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);text-align:left;cursor:pointer;}
.d-sopt b{font-size:13.5px;color:var(--ink);} .d-sopt span{font-size:12px;color:var(--muted);}
.d-sopt:hover,.d-sopt.lit{border-color:var(--acc);background:var(--acc-soft);}

/* cursor + ripple */
.d-cursor{position:absolute;top:0;left:0;z-index:10;pointer-events:none;transition:transform .6s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));}
.d-cursor.down{transform-origin:top left;}
.d-cursor svg{transition:transform .12s;}
.d-cursor.down svg{transform:scale(.82);}
.d-ripple{position:absolute;width:12px;height:12px;border-radius:99px;background:color-mix(in srgb,var(--acc) 55%,transparent);transform:translate(-50%,-50%);pointer-events:none;z-index:9;animation:ripple .55s ease-out forwards;}
@keyframes ripple{from{opacity:.7;transform:translate(-50%,-50%) scale(.4);}to{opacity:0;transform:translate(-50%,-50%) scale(4.2);}}

/* ===== NOTHING SLIPS THROUGH ===== */
.track{padding:clamp(50px,7vw,86px) 28px;max-width:1120px;margin:0 auto;}
.track-head{text-align:center;margin-bottom:44px;}
.track .sec-h{max-width:22ch;}
.track-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 26px;box-shadow:var(--shadow-sm);}
.ticon{width:46px;height:46px;border-radius:13px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;margin-bottom:18px;}
.ticon svg{width:23px;height:23px;}
.tcard h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--head);margin-bottom:8px;line-height:1.2;}
.tcard p{font-size:14.5px;line-height:1.6;color:var(--muted);}

/* ===== HOW IT WORKS ===== */
.how{padding:clamp(56px,7vw,80px) 28px;background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.how-in{max-width:1120px;margin:0 auto;}
.how-head{margin-bottom:44px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 26px 28px;box-shadow:var(--shadow-sm);}
.step-n{font-family:var(--font);font-size:44px;font-weight:900;color:var(--acc);letter-spacing:-.02em;line-height:1;margin-bottom:30px;}
.step h3{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--head);margin-bottom:12px;line-height:1.15;}
.step p{font-size:15px;line-height:1.6;color:var(--muted);}

/* one-step flow: connect once → autopilot */
.how-flow{display:grid;grid-template-columns:1fr auto 1.32fr;align-items:stretch;gap:10px;}
.how-connect{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:32px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.how-badge{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-soft);padding:6px 12px;border-radius:99px;margin-bottom:20px;}
.how-connect h3{font-family:var(--font);font-size:30px;font-weight:800;letter-spacing:-.025em;color:var(--head);margin-bottom:11px;}
.how-connect>p{font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:22px;}
.how-conns{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:auto;align-items:center;}
.how-conn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:none;padding:0;border-radius:0;}
.how-conn .logo{width:20px;height:20px;flex-shrink:0;border-radius:5px;display:block;}
.how-conn-more{color:var(--muted-2);font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;}

.how-note{margin:24px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--muted);}
.how-note svg{width:16px;height:16px;color:var(--muted-2);flex-shrink:0;}
.how-note a{color:var(--acc);font-weight:700;}
.how-note a:hover{text-decoration:none;color:var(--acc);}
.how-time{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--muted-2);display:inline-flex;align-items:center;gap:8px;}
.how-time svg{width:15px;height:15px;}
.how-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--muted-2);}
.how-arrow span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;}
.how-arrow svg{width:32px;height:32px;color:var(--acc);}
.how-auto-card{background:#191629;border-radius:var(--r-xl);padding:34px 34px;display:flex;flex-direction:column;
  justify-content:center;box-shadow:var(--shadow-lg);}
.how-auto-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.04em;color:#FF8FC0;background:rgba(255,128,148,.16);padding:7px 13px;border-radius:99px;margin-bottom:20px;}
.how-auto-tag svg{width:14px;height:14px;}
.how-auto-card h3{font-family:var(--font);font-size:25px;font-weight:800;letter-spacing:-.025em;color:#F7F6FC;line-height:1.14;margin-bottom:22px;}
.how-auto-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.how-auto-list li{display:flex;align-items:center;gap:13px;font-size:16px;color:#DBD8E8;font-weight:500;}
.how-auto-list li svg{width:21px;height:21px;color:#FF8FC0;flex-shrink:0;}
@media(max-width:860px){
  .how-flow{grid-template-columns:1fr;}
  .how-arrow{flex-direction:row;padding:4px 0;}
  .how-arrow svg{transform:rotate(90deg);}
}

/* ===== PRICING ===== */
.pricing{padding:clamp(56px,7vw,80px) 28px;max-width:1120px;margin:0 auto;}
.bill-toggle{display:flex;justify-content:center;gap:2px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:4px;width:max-content;margin:28px auto 0;}
.bill-toggle button{display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--muted);padding:9px 16px;border-radius:9px;}
.bill-toggle button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.bt-save{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--acc);
  background:var(--acc-soft);padding:3px 8px;border-radius:99px;}
.tier-bill{font-size:12.5px;font-weight:600;color:var(--muted-2);margin:2px 0 0;}
.price-reassure{text-align:center;margin-top:36px;font-size:15px;font-weight:600;color:var(--ink);}
.price-anchor{text-align:center;margin-top:10px;font-size:13.5px;color:var(--muted-2);}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:start;}
.tier{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:30px 28px;box-shadow:var(--shadow-sm);}
.tier.feat{border:1.5px solid var(--acc);box-shadow:var(--shadow-lg);position:relative;}
.tier-badge{position:absolute;top:-13px;left:28px;background:var(--acc);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 13px;border-radius:99px;box-shadow:var(--shadow-sm);}
:root[data-theme="dark"] .tier-badge{color:var(--bg);}
.tier-name{font-family:var(--font);font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.tier-price{font-family:var(--font);font-size:52px;font-weight:900;letter-spacing:-.04em;color:var(--head);line-height:1;margin:12px 0 2px;}
.tier-price .cur{font-size:26px;font-weight:800;vertical-align:super;margin-right:1px;}
.tier-price .per{font-size:17px;font-weight:600;color:var(--muted-2);letter-spacing:0;}
.tier-for{font-size:14px;color:var(--muted);margin-bottom:20px;}
.tier .btn-block{margin-bottom:22px;}
.feats{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:12px;}
.feats li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink);line-height:1.4;}
.feats li b{font-weight:700;}
.feats li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:99px;background:var(--acc-soft);}
.feats li::after{content:"";position:absolute;left:5px;top:7px;width:6px;height:3.5px;border-left:1.8px solid var(--acc);border-bottom:1.8px solid var(--acc);transform:rotate(-45deg);}
.feats li:has(b)::before,.feats li:has(b)::after{display:none;}
.feats li:has(b){padding-left:0;color:var(--muted);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;}

/* ===== CTA BAND ===== */
/* deep ink, not a pink wall — pink stays the special ingredient (underline, button text) */
.cta-band{background:var(--ink-dark);padding:clamp(60px,9vw,104px) 28px;text-align:center;}
.cta-chat{display:flex;flex-direction:column;gap:10px;max-width:440px;margin:0 auto 38px;text-align:left;transform:rotate(-1.2deg);}
.cb{max-width:85%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;}
.cb.in{align-self:flex-start;background:#1D1A2B;color:#ECEAF4;border:1px solid #2F2B43;border-top-left-radius:5px;box-shadow:var(--shadow-sm);}
.cb.out{align-self:flex-end;background:#1E2A40;color:#ECEAF4;border:1px solid rgba(118,172,244,.25);border-top-right-radius:5px;box-shadow:var(--shadow-sm);}
.cb-meta{align-self:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#fff;opacity:.78;margin-top:6px;}
:root[data-theme="dark"] .cb.in{background:#fff;}
:root[data-theme="dark"] .cb-meta{color:#fff;}
.cta-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.cta-band h2{width:100%;font-size:clamp(34px,6vw,62px);font-weight:900;letter-spacing:-.035em;line-height:1.02;color:#fff;text-wrap:balance;}
.cta-hl{position:relative;display:inline-block;white-space:nowrap;}
.cta-hl .ul{position:absolute;left:-2%;right:-2%;width:104%;bottom:-.14em;height:.32em;color:#F669A7;opacity:.9;}
:root[data-theme="dark"] .cta-hl .ul{color:#F669A7;}
:root[data-theme="dark"] .cta-band h2{color:#F7F6FC;}
.cta-btn{margin-top:34px;background:#5E9BEF;color:#fff;padding:16px 32px;font-size:16.5px;font-weight:700;}
.cta-btn:hover{background:#4A8BE6;filter:none;}
:root[data-theme="dark"] .cta-btn{background:#76ACF4;color:#14121C;}
:root[data-theme="dark"] .cta-btn:hover{background:#8AB9F7;}
.cta-sub{margin-top:18px;font-size:14px;font-weight:600;color:#fff;opacity:.86;}
:root[data-theme="dark"] .cta-sub{color:var(--bg);}

/* ===== FOOTER ===== */
.foot{max-width:1180px;margin:0 auto;padding:38px 28px 28px;display:flex;flex-direction:column;gap:24px;}
.foot .wm{font-size:18px;}
.foot-top{display:flex;gap:36px 48px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;}
.foot-co{display:flex;flex-direction:column;gap:13px;max-width:340px;}
.foot-id{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0;}
.foot-id strong{color:var(--ink);font-weight:700;}
.foot-id a{color:var(--muted);font-weight:500;}
.foot a{text-decoration:none;}
.foot a:hover{text-decoration:underline;}
.foot-li{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:9px;color:var(--muted);}
.foot-li:hover{color:var(--ink);border-color:var(--ink);text-decoration:none;}
.foot-li svg{width:17px;height:17px;}
.foot-copy{font-size:13px;color:var(--muted-2);border-top:1px solid var(--border-soft);padding-top:18px;}
.foot-links{display:flex;gap:12px 24px;font-size:13.5px;flex-wrap:wrap;max-width:440px;justify-content:flex-end;}
.foot-links a{color:var(--muted);font-weight:500;}
.foot-links a:hover{color:var(--ink);text-decoration:none;}
@media(max-width:680px){.foot-links{justify-content:flex-start;}}

/* ===== responsive ===== */
@media(max-width:860px){
  .steps{grid-template-columns:1fr;}
  .track-cards{grid-template-columns:1fr;}
  .tiers{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}
  .step-n{margin-bottom:18px;}
  .nav-links{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .pulse{animation:none;}
}

/* ============================================================= */
/* ===============  SALVE additions  =========================== */
/* ============================================================= */

/* brand lockup (logo image + wordmark) */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand-mark{width:46px;height:46px;display:block;flex-shrink:0;}
.brand .wm{font-size:25px;}
.brand-mark.dk{display:none;}
:root[data-theme="dark"] .brand-mark.lt{display:none;}
:root[data-theme="dark"] .brand-mark.dk{display:block;}
.foot .brand-mark{width:30px;height:30px;}

/* hero app-icon mark */
.hero-mark{width:clamp(92px,13vw,124px);height:clamp(92px,13vw,124px);margin-bottom:2px;}
.hero-mark.dk{display:none;}
:root[data-theme="dark"] .hero-mark.lt{display:none;}
:root[data-theme="dark"] .hero-mark.dk{display:block;}

/* ===== FEATURE GRID (6) ===== */
.features{padding:clamp(56px,7vw,80px) 28px;}
.features > *{max-width:1140px;margin-left:auto;margin-right:auto;}
.features .track-head{text-align:center;margin-bottom:48px;}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .15s,border-color .15s;}
.fcard:hover{transform:translateY(-2px);border-color:var(--border-strong);}
.fcard.lead{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--shadow-md);}
.fcard .ficon{width:46px;height:46px;border-radius:13px;background:var(--acc-soft);color:var(--acc);
  display:grid;place-items:center;margin-bottom:18px;}
.fcard .ficon svg{width:23px;height:23px;}
.fcard h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--head);margin-bottom:8px;line-height:1.2;}
.fcard p{font-size:14.5px;line-height:1.6;color:var(--muted);}
.fcard p strong{color:var(--head);font-weight:700;}
.fcard .ftag{position:absolute;top:20px;right:20px;font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--acc);background:var(--acc-soft);padding:5px 10px;border-radius:99px;}
.fcard .ftag.soft{color:var(--muted-2);background:none;border:1px solid var(--border-strong);padding:4px 9px;font-weight:600;letter-spacing:.05em;}
.try-trailer{margin-top:48px;text-align:center;font-size:17px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;}
.try-trailer .lead{color:var(--head);}
.try-trailer strong{color:var(--head);font-weight:800;text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:4px;text-decoration-color:var(--acc);}
.try-trailer .ftrial{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:12px 22px;border-radius:var(--r);font-weight:700;font-size:15px;text-decoration:none;transition:background .15s;}
.try-trailer .ftrial:hover{background:var(--acc-press);color:#fff;text-decoration:none;}
.try-trailer .ftrial svg{width:16px;height:16px;}
:root[data-theme="dark"] .try-trailer .ftrial{color:var(--bg);}
:root[data-theme="dark"] .try-trailer .ftrial:hover{color:var(--bg);}
@media(max-width:860px){.fgrid{grid-template-columns:1fr;}}

/* ===== COMING SOON TAG (inline, headings & list items) ===== */
.soon-tag{display:inline-block;vertical-align:middle;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acc);background:var(--acc-soft);padding:5px 11px;border-radius:99px;
  margin-left:12px;transform:translateY(-4px);white-space:nowrap;}
.feats .soon-tag{font-size:9.5px;padding:3px 8px;margin-left:6px;transform:translateY(-1px);}

/* ===== DEPOSIT / WAITLIST line items ===== */
.dep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px,4vw,44px);}
.dep-item{display:flex;align-items:flex-start;gap:13px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--shadow-sm);font-size:14.5px;line-height:1.55;color:var(--ink);font-weight:500;}
.dep-item svg{box-sizing:border-box;width:30px;height:30px;padding:6px;background:var(--acc-soft);border-radius:9px;color:var(--acc);flex-shrink:0;margin-top:-1px;}
@media(max-width:860px){.dep-grid{grid-template-columns:1fr;}}

/* ===== SPLIT SECTION (missed-call text-back) ===== */
.split-sec{padding:clamp(56px,7vw,80px) 28px;}
.split-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,4.5vw,60px);align-items:center;}
.split-in .dep-grid{grid-template-columns:1fr;gap:12px;margin-top:26px;}
.mock-chat{display:flex;flex-direction:column;gap:10px;max-width:430px;width:100%;margin:0 auto;text-align:left;transform:rotate(1.2deg);}
.split-in>.mock-chat:first-child{transform:rotate(-1.2deg);}
.mock-chat .cb.in{background:var(--surface);color:var(--ink);border:1px solid var(--border);}
.mock-chat .cb.out{background:var(--blue-pastel);border:1px solid color-mix(in srgb,var(--blue) 20%,var(--blue-pastel));color:var(--ink);}
:root[data-theme="dark"] .mock-chat .cb.out{background:var(--blue-soft);color:var(--ink);}
.mock-chat .cb-meta{color:var(--muted-2);opacity:1;}
/* The generic dark-mode .cb.in override (footer band) out-specifies the mock-chat skin;
   re-assert the token-driven colours so inbound bubbles stay readable in dark mode. */
:root[data-theme="dark"] .mock-chat .cb.in{background:var(--surface);color:var(--ink);border:1px solid var(--border);}
:root[data-theme="dark"] .mock-chat .cb-meta{color:var(--muted-2);}
/* Success meta pill: the money moment ("deposit paid · booked") wears green. */
.cb-meta.ok, .mock-chat .cb-meta.ok{
  display:inline-flex;align-self:center;
  background:color-mix(in srgb,#1FA855 14%,var(--surface));
  border:1px solid color-mix(in srgb,#1FA855 30%,transparent);
  color:#15803D;padding:4px 12px;border-radius:99px;opacity:1;
}
.band-dark .cb-meta.ok{color:#5AD48F;background:rgba(31,168,85,.16);border-color:rgba(90,212,143,.35);}
:root[data-theme="dark"] .cb-meta.ok{color:#5AD48F;}
@media(max-width:880px){.split-in{grid-template-columns:1fr;}
  .split-in>.mock-chat:first-child{order:2;}}

/* ===== DEPOSITS + WAITLIST DUO ===== */
.duo-sec{padding:clamp(56px,7vw,80px) 28px;background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.duo-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:start;}
.duo-h{font-size:clamp(26px,3vw,36px);}
.duo-in .dep-grid{grid-template-columns:1fr;gap:12px;margin-top:24px;}
.duo-in .mock-chat{margin:26px 0 0;max-width:430px;transform:rotate(-.8deg);}
@media(max-width:880px){.duo-in{grid-template-columns:1fr;gap:48px;}}

/* ===== WEEKLY MONEY REPORT mock bubble ===== */
.wmr-mock{margin-top:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;border-top-left-radius:5px;padding:12px 14px;transform:rotate(-1deg);}
.band-dark .wmr-mock{background:var(--surface-3);}
.wmr-from{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px;}
.wmr-mock p{font-size:13.5px;line-height:1.5;color:var(--ink);}
.wmr-mock p b{color:var(--head);font-weight:700;}

/* condensed extra-capabilities strip under the feature grid */
.more-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;}
.mf{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted);
  border:1px solid var(--border-strong);border-radius:99px;padding:8px 15px;}
.mf .soon-tag{margin-left:0;transform:none;font-size:9.5px;padding:3px 8px;}

/* ===== TRUST PILLS (compliance section) ===== */
.trust-in{max-width:1120px;margin:0 auto;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(34px,4vw,48px);}
.tpill{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:24px 22px 22px;box-shadow:var(--shadow-sm);}
.tpill .ti{width:48px;height:48px;border-radius:13px;background:var(--acc-soft);
  display:grid;place-items:center;color:var(--acc);}
.tpill .ti svg{width:24px;height:24px;}
.tpill b{font-size:16px;font-weight:800;color:var(--head);letter-spacing:-.015em;line-height:1.2;}
.tpill p{font-size:14px;line-height:1.55;color:var(--muted);margin-top:-3px;}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr 1fr;gap:16px;}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr;}}

/* ===== ROI CALCULATOR ===== */
.roi-sec{max-width:1020px;margin:0 auto;padding:clamp(56px,7vw,80px) 28px;}
.roi-sec .roi-grid{margin-top:clamp(32px,4vw,46px);}
.roi-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start;}
.roi-controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);}
.roi-field{margin-bottom:24px;}
.roi-field label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.roi-field output{font-family:var(--font);font-size:18px;font-weight:800;color:var(--acc);letter-spacing:-.01em;white-space:nowrap;}
/* Custom range styling: the browser default track reads as an outlined hollow pill
   (worst in dark mode). Slim borderless track, pink fill driven by the --p custom
   property (set from JS on input), round thumb with a surface ring. */
.roi-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;}
.roi-field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;border:none;background:linear-gradient(to right,var(--acc) var(--p,50%),var(--border) var(--p,50%));}
.roi-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.22);margin-top:-6px;}
.roi-field input[type=range]::-moz-range-track{height:6px;border-radius:99px;border:none;background:var(--border);}
.roi-field input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--acc);}
.roi-field input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.22);}
.roi-field.small label{font-size:13.5px;}
.roi-field.small output{font-size:15px;}
.roi-assume{margin-top:6px;border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:18px 20px 6px;background:var(--surface-2);}
.roi-assume h3{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}
.roi-assume>p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 16px;}
.roi-result{position:sticky;top:90px;background:var(--ink-dark);color:#ECEAF4;border-radius:var(--r-2xl);padding:clamp(26px,3.5vw,36px);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;box-shadow:var(--shadow-lg);}
:root[data-theme="dark"] .roi-result{background:var(--surface);border:1px solid var(--border);}
.roi-result-lab{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#FF9CC8;background:rgba(255,127,181,.16);padding:6px 12px;border-radius:99px;margin-bottom:10px;}
.roi-result-line{font-size:15.5px;color:#A9A5BC;margin:0;}
.roi-result-num{font-family:var(--font);font-size:clamp(44px,6vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1;color:#FF7FB5;margin:2px 0;}
.roi-break{list-style:none;margin:18px 0 22px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:9px;width:100%;}
:root[data-theme="dark"] .roi-break{border-top-color:var(--border);}
.roi-break li{font-size:14px;color:#A9A5BC;}
.roi-break li span{font-weight:800;color:#ECEAF4;font-family:var(--font);}
.roi-result .btn{align-self:stretch;justify-content:center;}
/* The default primary button is ink-dark, invisible on this dark result card: go pink
   in both themes here. */
/* theme-pinned: the dark ROI card keeps the band's dark tokens, but the button follows
   the THEME's button style — standard blue/white in light, lifted blue/dark in dark */
.roi-result .btn-acc{background:#5E9BEF;color:#fff;}
.roi-result .btn-acc:hover{background:#4A8BE6;}
:root[data-theme="dark"] .roi-result .btn-acc{background:#76ACF4;color:#14121C;}
:root[data-theme="dark"] .roi-result .btn-acc:hover{background:#8AB9F7;}
.roi-note{align-self:center;margin-top:10px;font-size:12px;color:#7A7690;}
@media(max-width:820px){.roi-grid{grid-template-columns:1fr;}.roi-result{position:static;}}

/* ===== FOUNDERS STRIP ===== */
.about-sec{max-width:880px;margin:0 auto;padding:clamp(56px,7vw,80px) 28px;}
.founders-strip{display:flex;gap:52px;align-items:center;max-width:840px;margin:clamp(38px,5vw,56px) auto 0;}
.founder-photo span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;}
.founders-name{font-size:13.5px;font-weight:700;color:var(--acc);margin:0 0 8px;}
.founders-name strong{color:var(--head);}
.founders-body>p:not(.founders-names){font-size:16px;line-height:1.75;color:var(--ink);margin:0 0 16px;}
.about-links{display:flex;align-items:center;gap:14px;}
.about-links a[href^="mailto"]{font-size:14.5px;color:var(--acc);font-weight:700;}
.about-legal{margin-top:26px;text-align:center;font-size:13.5px;color:var(--muted-2);}
.about-legal strong{color:var(--muted);}
@media(max-width:560px){.founders-strip{flex-direction:column;align-items:center;text-align:center;}
  .about-links{justify-content:center;}}

/* ===== COMPLIANCE & TRUST ===== */
.compliance{padding:clamp(56px,7vw,80px) 28px;}
.compliance .trust-grid{grid-template-columns:repeat(3,1fr);}
.compliance .tpill p a{color:var(--acc);font-weight:700;}
@media(max-width:980px){.compliance .trust-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.compliance .trust-grid{grid-template-columns:1fr;}}

/* ===== FAQ ===== */
.faq{max-width:840px;margin:0 auto;padding:clamp(56px,7vw,80px) 28px;}
.faq-list{margin-top:40px;border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px 4px;font-family:var(--font);font-size:clamp(17px,2.1vw,20px);font-weight:800;
  letter-spacing:-.02em;color:var(--head);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--acc);}
.faq-item[open] summary{color:var(--acc);}
.faq-chev{flex-shrink:0;width:22px;height:22px;color:var(--muted-2);transition:transform .25s ease,color .15s;}
.faq-item[open] .faq-chev{transform:rotate(180deg);color:var(--acc);}
.faq-a{padding:0 4px 24px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:70ch;}
.faq-a b{color:var(--ink);font-weight:600;}
.faq-foot{text-align:center;margin-top:38px;font-size:15px;color:var(--muted);}
.faq-foot a{color:var(--acc);font-weight:700;}

/* ===== BUILT FOR ===== */
.builtfor{padding:clamp(50px,7vw,80px) 28px clamp(40px,5vw,60px);}
.bf-in{max-width:920px;margin:0 auto;text-align:center;}
.bf-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;margin-top:34px;max-width:780px;margin-left:auto;margin-right:auto;line-height:1.9;}
.bf-chip{font-size:16px;font-weight:600;color:var(--muted);background:none;border:none;padding:0 16px;border-radius:0;box-shadow:none;transition:color .15s;position:relative;}
.bf-chip + .bf-chip::before{content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:99px;background:var(--border-strong);}
.bf-chip:hover{color:var(--ink);}

/* ===== INTEGRATIONS ===== */
.integ{max-width:1140px;margin:0 auto;padding:clamp(54px,8vw,90px) 28px clamp(20px,3vw,32px);text-align:center;}
.integ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(36px,4vw,52px);}
.integ-card{display:flex;flex-direction:column;align-items:flex-start;gap:13px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:22px 20px;box-shadow:var(--shadow-sm);
  text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s;}
.integ-card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-md);}
.integ-logo{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-soft);}
.integ-logo svg{width:25px;height:25px;display:block;}
.integ-card .nm{font-size:15.5px;font-weight:800;color:var(--head);letter-spacing:-.015em;line-height:1.15;}
.integ-card .role{font-size:12.5px;color:var(--muted);margin-top:-5px;}
.integ-note{margin-top:26px;font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;}
.integ-note svg{width:16px;height:16px;color:var(--acc);}
@media(max-width:860px){.integ-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.integ-grid{grid-template-columns:1fr;}}

/* ===== COMPLIANCE SPEC BOARD ===== */
/* Dense two-group checklist replacing the six tall pills: more claims, less scroll. */
.comp-board{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1060px;margin-left:auto;margin-right:auto;text-align:left;align-items:start;}
.comp-group{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;box-shadow:var(--shadow-sm);}
.comp-glab{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:2px;}
.comp-it{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--muted);}
.comp-it b{color:var(--ink);}
.comp-it svg{box-sizing:border-box;width:27px;height:27px;padding:5px;background:var(--acc-soft);color:var(--acc);border-radius:8px;flex-shrink:0;margin-top:1px;}
.comp-foot{text-align:center;margin-top:20px;font-size:13.5px;}
@media(max-width:760px){.comp-board{grid-template-columns:1fr;gap:16px;}.comp-group{padding:22px;}}

/* ===== FEATURES BENTO ===== */
/* Replaces the uniform fcard grid: one hero cell + artifact-led cards, every cell
   shows a tiny piece of real UI (chat, inbox rows, stat strip) instead of prose. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px;}
.bz{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;transition:transform .15s,border-color .15s;}
.bz:hover{transform:translateY(-2px);border-color:var(--border-strong);}
.bz-lg{grid-column:span 2;grid-row:span 2;border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);}
.bz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px;}
.bz-tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);background:var(--acc-soft);padding:5px 11px;border-radius:99px;}
.bz h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--head);margin:0 0 8px;}
.bz-lg h3{font-size:24px;}
.bz p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0;}
.bz-lg p{font-size:15px;max-width:52ch;}

/* mini chat artifact (hero cell) */
.bz-chat{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:8px;max-width:420px;transform:rotate(-1.2deg);transform-origin:bottom left;}
.bz-b{padding:9px 13px;border-radius:13px;font-size:13px;line-height:1.45;}
.bz-b.in{align-self:flex-start;background:var(--surface-2);color:var(--ink);border:1px solid var(--border);border-top-left-radius:4px;}
.bz-b.out{align-self:flex-end;background:var(--blue-pastel);border:1px solid color-mix(in srgb,var(--blue) 20%,var(--blue-pastel));color:var(--ink);border-top-right-radius:4px;}
.bz-ok{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#5AD48F;background:rgba(31,168,85,.14);border:1px solid rgba(90,212,143,.32);padding:4px 11px;border-radius:99px;}
.bz-chat .bz-ok{margin-top:4px;align-self:flex-end;}
.bz-body .bz-ok{margin-top:12px;}

/* mini inbox rows */
.bz-rows{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:7px;}
.bz-row{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;padding:8px 11px;font-size:12.5px;color:var(--muted);}
.bz-row i{width:8px;height:8px;border-radius:99px;flex-shrink:0;}
.bz-row b{color:var(--ink);font-weight:700;}
.bz-row em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted-2);}

/* follow-up / filter chips */
.bz-chips{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:7px;}
.bz-chips span{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border-soft);border-radius:99px;padding:5px 11px;}
.bz-chips span.g{color:#5AD48F;background:rgba(31,168,85,.14);border-color:rgba(90,212,143,.32);}

/* money-report stat strip */
.bz-stats{margin-top:auto;padding-top:18px;display:flex;gap:22px;}
.bz-stats b{display:block;font-family:var(--font);font-size:21px;font-weight:900;letter-spacing:-.02em;color:var(--acc);}
.bz-stats span{font-size:11px;color:var(--muted-2);font-weight:600;}

@media(max-width:920px){
  .bento{grid-template-columns:1fr 1fr;}
  .bz-lg{grid-column:span 2;grid-row:span 1;}
}
@media(max-width:600px){.bento{grid-template-columns:1fr;}.bz-lg{grid-column:span 1;}}

/* TLDR bento artifact: a mini calendar-event card. */
.bz-card{margin-top:18px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:5px;}
.bz-card-t{font-size:12.5px;font-weight:700;color:var(--head);}
.bz-card-d{font-size:12px;line-height:1.5;color:var(--muted);}
.bz-card-l{font-size:11.5px;font-weight:700;color:var(--acc);}

/* Pricing: the shared everything-strip above the tiers. Cards only carry their
   differentiators, so the three columns finally balance. */
.price-includes{max-width:760px;margin:34px auto 26px;text-align:center;}
.pi-lab{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:14px;}
.pi-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.pi-chips span{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:7px 14px;}
.pi-chips span b{font-weight:800;}

/* Wordmark-only brand: the gradient text from ds.css IS the mark — no colour override
   here, or it paints over the gradient clip. */

/* Founders: one cohesive row, overlapping photo pair + inline LinkedIn marks. */
.founders-faces{display:flex;flex-shrink:0;align-items:center;}
.fz{width:128px;height:128px;border-radius:50%;overflow:hidden;border:4px solid var(--bg);box-shadow:var(--shadow-md);flex-shrink:0;display:block;}
.fz + .fz{margin-left:-30px;}
.fz img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}

.founders-names{font-size:15.5px;color:var(--head);margin:0 0 10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.founders-role{color:var(--muted-2);font-weight:500;}
.li-mini{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#0A66C2;color:#fff;}
.li-mini svg{width:12px;height:12px;}
.li-mini:hover{background:#084d96;}
.founders-personal{margin-top:10px;font-weight:600;}
@media(max-width:640px){.founders-strip{flex-direction:column;align-items:center;text-align:center;}.founders-names{justify-content:center;}}

.founders-body a:not(.li-mini){color:var(--acc);text-decoration:underline;text-underline-offset:3px;}
.founders-body a strong{font-weight:inherit;}
.founders-body a:not(.li-mini):hover{color:var(--acc);}

/* ============================================================= */
/* ===============  MOBILE  ==================================== */
/* Everything below is additive and scoped to max-width queries
   (plus the one display:contents shim for the bento markup), so
   desktop rendering is untouched. */

/* Features bento: .bz-body wraps each small cell's expandable content so the
   mobile accordion has something to collapse. display:contents keeps desktop
   layout identical: p and artifact stay direct flex items of .bz, so the
   margin-top:auto artifact push still works. */
.bz-body{display:contents;}

/* --- tablet (<=860px): tidy the nav + stacked pricing order --- */
@media(max-width:860px){
  .nav-cta{margin-left:auto;} /* .nav-links (the flex:1 spacer) is hidden here */
  .tier.feat{order:-1;} /* Most-popular card first once the tiers stack */
}

/* --- <=780px: compact nav, never wraps --- */
@media(max-width:780px){
  .nav-links{display:none;}
  .nav-in{padding:12px 18px;gap:14px;flex-wrap:nowrap;}
  .nav-cta{gap:9px;}
  .nav .btn-acc{padding:10px 14px;font-size:14px;}
  .lp section[id]{scroll-margin-top:70px;} /* shorter sticky nav */
}

/* --- <=680px: footer stacks, left-aligned --- */
@media(max-width:680px){
  .foot-top{flex-direction:column;gap:26px;}
}

/* --- <=640px: section rhythm + stacked layouts --- */
@media(max-width:640px){
  /* tighter vertical rhythm, comfortable side padding */
  .stats,.how,.split-sec,.duo-sec,.compliance,.features,.roi-sec,.pricing,.about-sec,.faq{padding:44px 20px;}
  .demo-sec{padding:44px 14px;} /* slim sides give the live demo more width */
  .hero{padding:40px 20px 48px;}
  .cta-band{padding:56px 20px;}

  /* untilt the mock chats: rotation risks horizontal overflow on tiny screens */
  .mock-chat,.split-in>.mock-chat:first-child,.duo-in .mock-chat{transform:none;}
  .cta-chat{transform:none;}

  /* how it works: tighter cards + chip row */
  .how-conns{gap:10px 14px;}
  .how-connect{padding:24px 20px;}
  .how-auto-card{padding:26px 22px;}

  /* deposits + waitlist duo: clearer separation between the stacked blocks */
  .duo-block+.duo-block{border-top:1px solid var(--border-strong);padding-top:36px;}

  /* features chip strip */
  .more-feats{gap:8px;}
  .mf{font-size:12.5px;padding:10px 16px;line-height:1.45;text-align:center;border-radius:14px;}

  /* pricing chips + toggle */
  .pi-chips{gap:6px;}
  .pi-chips span{font-size:12px;padding:6px 11px;}
}

/* --- <=640px: features bento accordion --- */
@media(max-width:640px){
  .bento{grid-template-columns:1fr;}
  .bento .bz-lg{grid-column:span 1;grid-row:span 1;}
  .bz.collapsible{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 12px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .bz.collapsible:hover{transform:none;}
  .bz.collapsible .bz-head{margin-bottom:0;flex:0 0 auto;}
  .bz.collapsible .bz-tag{display:none;}
  .bz.collapsible .ficon{width:38px;height:38px;border-radius:11px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;flex-shrink:0;}
  .bz.collapsible .ficon svg{width:19px;height:19px;}
  .bz.collapsible h3{flex:1;min-width:0;margin:0;font-size:16px;line-height:1.3;position:relative;padding:8px 30px 8px 0;}
  .bz.collapsible h3::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.2px solid var(--muted-2);border-bottom:2.2px solid var(--muted-2);transform:rotate(45deg);transition:transform .25s ease,margin-top .25s ease;}
  .bz.collapsible.open h3::after{margin-top:-2px;transform:rotate(225deg);}
  .bz.collapsible .bz-body{display:block;flex:1 0 100%;min-width:0;max-height:0;overflow:hidden;transition:max-height .32s ease;}
  .bz.collapsible.open .bz-body{max-height:600px;}
  .bz.collapsible .bz-body>p{padding-top:12px;}
  .bz.collapsible .bz-body .bz-ok{display:inline-flex;margin-top:14px;}
}

/* --- <=520px: hero connects 4x2, demo chrome + steps --- */
@media(max-width:520px){
  .hero-h{font-size:clamp(28px,10.4vw,38px);} /* identical at 375px and up, only shrinks below ~365px */
  .hc-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;width:100%;max-width:330px;}
  .hc-icons .ci{min-width:0;}
  .ci-lab{font-size:10px;white-space:nowrap;}
  .b-live{display:none;} /* keeps the address pill readable in the demo chrome */
  .b-url{min-width:0;}
  .demo-steps{display:grid;grid-template-columns:auto auto;gap:10px 18px;width:max-content;max-width:100%;}
}

/* --- <=480px: stats stack singly, small-screen polish --- */
@media(max-width:480px){
  .stats-in{flex-direction:column;gap:30px;}
  .stat{flex:0 0 auto;}
  .stat-num{font-size:clamp(46px,15vw,56px);}
  .bill-toggle button{font-size:13px;padding:9px 12px;}
  .bt-save{font-size:10px;padding:3px 7px;}
  .comp-group{padding:20px 18px;}
  .foot-id,.founders-personal,.faq-a,.how-note{overflow-wrap:break-word;}
  .how-note{flex-wrap:wrap;}
}

/* Dark mode: the closing band joins the other dark bands instead of full pink,
   bubbles take the bento palette. Light mode keeps the pink moment. */
/* The closing band is pinned to ONE palette in both themes — same as light. */
:root[data-theme="dark"] .cta-band{background:#191629;}
:root[data-theme="dark"] .cta-band .cb.in{background:#1D1A2B;color:#ECEAF4;border:1px solid #2F2B43;}
:root[data-theme="dark"] .cta-band .cb.out{background:#1E2A40;color:#ECEAF4;}
:root[data-theme="dark"] .cta-band .cb-meta.ok{background:color-mix(in srgb,#1FA855 14%,#fff);border-color:rgba(31,168,85,.30);color:#15803D;}
:root[data-theme="dark"] .cta-sub{color:#A9A5BC;opacity:1;}