/* Vyom Hospitality Suite: what every page shares — tokens, base, type, components, the header and its
   Platform menu, dark bands, the closing band and demo form, toasts, the quote pill and the footer.
   Page-specific styles: assets/landing.css (home), assets/platform.css (module pages and the hub),
   assets/pricing.css (pricing), assets/mock-kit.css (product illustrations).
   Light is the default on every device; [data-theme="dark"] (the header toggle, remembered across the
   site) is the only way into dark. Indigo is the one accent; amber only for the launch offer; green only
   for savings and the WhatsApp send buttons. Text colours clear 4.5:1 on the surfaces they sit on. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg-subtle:#F8F9FC; --muted-bg:#F2F3F8; --surface:#FFFFFF;
  --border:#E4E6EF; --border-strong:#CFD3E2; --input:#858BA6;
  --fg:#0B0D1E; --fg-muted:#4B5068; --fg-subtle:#666B85;
  --primary:#4F46E5; --primary-hover:#4338CA; --primary-soft:#EEF0FF; --primary-line:#C7CCFB; --on-primary:#FFFFFF;
  --amber:#92400E; --amber-soft:#FEF3C7; --amber-line:#F5D98A;
  --success:#047857; --success-soft:#ECFDF5;
  --danger:#B42318; --danger-soft:#FEF3F2;
  --ring:#4F46E5;
  --wa:#15803D; --wa-soft:#DCFCE7;
  --veg:#15803D; --nonveg:#9A3412;
  --warm:#FBF8F3; --warm-border:#EFE7DA;
  --shadow-sm:0 1px 2px rgba(11,13,30,.05);
  --shadow:0 1px 2px rgba(11,13,30,.04), 0 8px 24px -8px rgba(11,13,30,.10);
  --shadow-lg:0 2px 4px rgba(11,13,30,.04), 0 24px 56px -16px rgba(11,13,30,.22);
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --sans:'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap:1180px; --gutter:clamp(16px,4vw,32px);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0B14; --bg-subtle:#0D0F1D; --muted-bg:#161933; --surface:#11132A;
  --border:#23274A; --border-strong:#333861; --input:#5C6390;
  --fg:#F4F5FB; --fg-muted:#B9BDD6; --fg-subtle:#9296B4;
  --primary:#818CF8; --primary-hover:#A5B4FC; --primary-soft:#1B1E4A; --primary-line:#3A3F8A; --on-primary:#0B0D1E;
  --amber:#FCD34D; --amber-soft:#33260A; --amber-line:#6B521B;
  --success:#34D399; --success-soft:#0B2A20;
  --danger:#FDA29B; --danger-soft:#3A1511;
  --ring:#A5B4FC;
  --wa:#4ADE80; --wa-soft:#0F2E1C;
  --veg:#4ADE80; --nonveg:#FB923C;
  --warm:#0D0F1D; --warm-border:#23274A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 56px -16px rgba(0,0,0,.7);
}
/* a dark band: its own full set of tokens, so every component inside it keeps its contrast. In the dark
   theme the band sits a shade below the page, so cards inside it still stand apart. */
.band{
  color-scheme:dark;
  --bg:#0B0D1E; --bg-subtle:#10132A; --muted-bg:#1A1D3A; --surface:#14172F;
  --border:#262A4D; --border-strong:#383D69; --input:#626A99;
  --fg:#F4F5FB; --fg-muted:#BDC1DA; --fg-subtle:#9A9EBC;
  --primary:#8B93FA; --primary-hover:#A5B4FC; --primary-soft:#1E2150; --primary-line:#3D428F; --on-primary:#0B0D1E;
  --amber:#FCD34D; --amber-soft:#33260A; --amber-line:#6B521B;
  --success:#34D399; --success-soft:#0B2A20;
  --danger:#FDA29B; --danger-soft:#3A1511;
  --wa:#4ADE80; --wa-soft:#0F2E1C;
  --ring:#A5B4FC;
  --veg:#4ADE80; --nonveg:#FB923C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 56px -16px rgba(0,0,0,.75);
  background:var(--bg); color:var(--fg);
}
:root[data-theme="dark"] .band{--bg:#05060D; --bg-subtle:#090A16; --surface:#12142B; --muted-bg:#191C38; --border:#262A4D}
:root[data-theme="dark"] :is(.close-band .inner, .cta-band .inner, .suite-card, .plan.best){box-shadow:inset 0 0 0 1px #262A4D, var(--shadow-lg)}

/* ── Base ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px}
html.has-pill{scroll-padding-bottom:84px}
html.has-qbar{scroll-padding-bottom:96px}
/* without JavaScript the live parts stay out of the way; the noscript note says why */
html:not(.js) :is(.builder, .v-try, .sw-row, .mbar-q, .hpause, .qbar){display:none!important}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
svg{flex:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.ic{width:20px; height:20px}
.nowrap{white-space:nowrap}

/* ── Type ──────────────────────────────────────────── */
h1{font-weight:700; font-size:clamp(36px,4.4vw,54px); line-height:1.05; letter-spacing:-.04em; text-wrap:balance}
h1 em, h2 em, h3 em{font-style:normal; color:var(--primary)}
h2{font-weight:700; font-size:clamp(28px,3.4vw,44px); line-height:1.1; letter-spacing:-.035em; text-wrap:balance}
h3{font-weight:600; font-size:17px; line-height:1.35; letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.3vw,19px); color:var(--fg-muted); max-width:62ch; text-wrap:pretty}
.muted{color:var(--fg-muted)}
.kicker{font-size:14px; font-weight:600; color:var(--primary)}
/* a small label above a section's heading */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle)}
.eyebrow .badge{letter-spacing:0; text-transform:none}
.sec-head{display:flex; flex-direction:column; gap:12px; max-width:740px; margin-bottom:clamp(28px,4vw,48px)}
.sec-head.center{align-items:center; text-align:center; margin-inline:auto}
.fine{font-size:13.5px; color:var(--fg-subtle); line-height:1.5}
/* an H1 that leads with the search phrase, then the brand line */
h1 .h1-kw{display:block; margin-bottom:14px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); line-height:1.45}
h1 .h1-main{display:block}
.narrow{max-width:820px}

/* ── Components ────────────────────────────────────── */
.badge{text-decoration:none; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); white-space:nowrap}
.badge.primary{background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary)}
.badge.amber{background:var(--amber-soft); border-color:var(--amber-line); color:var(--amber)}
.badge.success{background:var(--success-soft); border-color:transparent; color:var(--success)}
.badge.new{height:20px; padding:0 7px; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.code{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--fg-subtle)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--fg); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--muted-bg)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px; height:17px}
.btn.primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-hover); border-color:var(--primary-hover)}
.btn.ghost{border-color:transparent; background:transparent; box-shadow:none}
.btn.ghost:hover{background:var(--muted-bg)}
.btn.wa{background:#15803D; border-color:#15803D; color:#fff}
.btn.wa:hover{background:#166534; border-color:#166534}
.btn.lg{height:50px; padding:0 22px; font-size:16px; border-radius:12px}
.btn.sm{height:36px; padding:0 13px; font-size:14px}
.btn.block{width:100%; white-space:normal; text-align:center; height:auto; min-height:44px; padding-block:10px; line-height:1.3}
.btn.lg.block{min-height:50px}
/* a secondary action named for where it goes */
.go{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); text-decoration:none}
.go svg{width:15px; height:15px; transition:transform .2s}
.go:hover svg, a:hover > .go svg{transform:translateX(3px)}
.link{color:var(--primary); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
/* a labelled switch standing in for a toggle button: the name never changes, the state does */
.switch{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; -webkit-user-select:none; user-select:none}
.switch input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.switch .track{position:relative; width:38px; height:22px; border-radius:999px; background:var(--input); transition:background .2s; flex:none}
.switch .track::after{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.switch input:checked + .track{background:var(--primary)}
.switch input:checked + .track::after{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--ring); outline-offset:2px}
.sw-row{display:inline-flex; align-items:center; justify-content:space-between; gap:14px; height:50px; padding:0 14px 0 18px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); font-weight:600; font-size:16px; box-shadow:var(--shadow-sm); cursor:pointer; -webkit-user-select:none; user-select:none; transition:background .15s, border-color .15s}
.sw-row:hover{background:var(--muted-bg)}
.sw-row:has(input:checked){background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary)}
.sw-row.sm{height:40px; padding:0 10px 0 14px; font-size:14.5px}
.quote-line{font-size:14px; color:var(--fg-subtle)}
.quote-line a{color:var(--primary); font-weight:600; white-space:nowrap}
.chip-code{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border-radius:7px; border:1px solid var(--border); background:var(--surface); font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--fg-muted); text-decoration:none}
a.chip-code:hover{border-color:var(--primary-line); color:var(--primary)}
.vm{width:12px; height:12px; vertical-align:-1px}
.vm.veg{color:var(--veg)} .vm.nonveg{color:var(--nonveg)}
.link-btn{border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--primary); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.stretch::after{content:''; position:absolute; inset:0; border-radius:inherit}
.mi{width:40px; height:40px; border-radius:11px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; flex:none}
.mi svg{width:20px; height:20px}
/* breadcrumb */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--fg-subtle)}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--fg); text-decoration:underline}
.crumbs svg{width:14px; height:14px}
.crumbs [aria-current="page"]{color:var(--fg)}
/* questions and answers */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 2px; cursor:pointer; list-style:none; font-weight:600; font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px; height:18px; color:var(--fg-subtle); transition:transform .25s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 2px 18px; color:var(--fg-muted); max-width:66ch}
/* an example setup: a kind of property, its modules and their yearly total */
.setup{position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; transition:border-color .2s, box-shadow .25s}
.setup:hover{border-color:var(--primary-line); box-shadow:var(--shadow)}
.setup h3{font-size:18px; letter-spacing:-.02em}
.setup > p{font-size:15px; color:var(--fg-muted)}
.setup .go, .setup .btn{margin-top:auto}
.seg-top{display:flex; justify-content:space-between; align-items:center}
.tag{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-subtle)}
.codes{display:flex; flex-wrap:wrap; gap:6px}
.setup > .codes{margin-top:2px}
.setup > .mods{font-size:14px; font-weight:600; color:var(--fg); line-height:1.5}
.seg-price{font-size:15px; color:var(--fg-muted)}
.seg-price b{font-size:22px; font-weight:700; letter-spacing:-.025em; color:var(--fg)}
.setup > .seg-more{font-size:13.5px; color:var(--fg-subtle); margin-top:-6px; text-wrap:pretty}
.fine, .lead{text-wrap:pretty}

/* ── Announcement bar ──────────────────────────────── */
.announce{display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 16px; font-size:14px; font-weight:500; background:var(--primary-soft); color:var(--fg); border-bottom:1px solid var(--primary-line); text-decoration:none; text-align:center}
.announce .badge.new{flex:none}
.announce svg{width:15px; height:15px; color:var(--primary); transition:transform .2s}
.announce:hover svg{transform:translateX(3px)}

/* ── Header ────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--border)}
.top .wrap{position:relative; display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; font-size:18px; letter-spacing:-.02em}
.brand-mark{width:28px; height:28px; border-radius:8px; background:var(--primary); display:grid; place-items:center; color:var(--on-primary)}
.brand-mark svg{width:16px; height:16px}
.brand small{font-size:14px; font-weight:500; color:var(--fg-subtle); letter-spacing:0}
.nav{display:flex; align-items:center; gap:2px; margin-inline:auto}
.nav > a, .nav-menu > button{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; border:0; background:none; font-weight:500; font-size:15px; color:var(--fg-muted); text-decoration:none; transition:background .15s, color .15s}
.nav > a:hover, .nav > a[aria-current="page"], .nav > a[aria-current="true"], .nav-menu > button:hover, .nav-menu > button[aria-expanded="true"]{color:var(--fg); background:var(--muted-bg)}
.nav > a .badge.new{height:18px; font-size:10.5px; padding:0 6px}
.nav .m-only{display:none}
.nav .m-only svg{width:18px; height:18px}
.m-theme{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 10px; border:0; border-radius:8px; background:none; font-weight:500; font-size:16px; color:var(--fg-muted); text-align:left}
.m-theme .i-sun, .m-theme[aria-pressed="true"] .i-moon{display:none}
.m-theme[aria-pressed="true"] .i-sun{display:block}
.top-cta{display:flex; gap:8px; align-items:center}
.menu-btn{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); place-items:center}
.menu-btn svg{width:18px; height:18px}
.theme-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-muted); display:grid; place-items:center; transition:background .15s, color .15s}
.theme-btn:hover{background:var(--muted-bg); color:var(--fg)}
.theme-btn svg{width:18px; height:18px}
.theme-btn .i-sun, .theme-btn[aria-pressed="true"] .i-moon{display:none}
.theme-btn[aria-pressed="true"] .i-sun{display:block}
::view-transition-old(root), ::view-transition-new(root){animation:none; mix-blend-mode:normal}
/* the Platform menu: four groups of modules, each with its code, line and price, beside a featured card */
.nav-menu{position:static}
.nav-menu > button svg{width:14px; height:14px; transition:transform .2s}
.nav-menu > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-panel{position:absolute; z-index:5; top:calc(100% - 4px); left:50%; transform:translateX(-50%); width:min(1100px, calc(100vw - 32px)); border-radius:18px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); display:grid; grid-template-columns:minmax(0,1fr) 260px; overflow:hidden}
.menu-groups{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:14px 10px}
.mg{display:flex; flex-direction:column; gap:2px; min-width:0; padding:0 4px; border-left:1px solid var(--border)}
.mg:first-child{border-left:0}
.mg > p{padding:6px 10px 6px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle)}
.menu-panel .mitem{display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; padding:9px 10px; border-radius:10px; text-decoration:none; transition:background .15s}
.menu-panel .mitem:hover, .menu-panel .mitem[aria-current="page"]{background:var(--muted-bg)}
.menu-panel .mi{width:30px; height:30px; border-radius:8px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.menu-panel .mi svg{width:16px; height:16px}
.menu-panel .mitem b{display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:14.5px; font-weight:600; line-height:1.3}
.menu-panel .mitem small{display:block; font-size:13px; color:var(--fg-subtle); line-height:1.4; margin-top:2px}
.menu-panel .mitem .price{display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--fg-muted)}
.menu-feature{display:flex; flex-direction:column; gap:10px; padding:20px; background:linear-gradient(160deg, var(--primary-soft), var(--surface) 75%); border-left:1px solid var(--border); text-decoration:none}
.menu-feature b{font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.menu-feature p{font-size:14px; color:var(--fg-muted); line-height:1.45}
.menu-feature .go{margin-top:auto}
.menu-feature:focus-visible{outline-offset:-3px}
.menu-foot{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px 24px; padding:12px 20px; border-top:1px solid var(--border); background:var(--bg-subtle)}
.menu-foot a{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--primary); text-decoration:none}
.menu-foot a:hover{text-decoration:underline; text-underline-offset:3px}
.menu-foot svg{width:15px; height:15px}

/* ── Sections ──────────────────────────────────────── */
.section{padding-block:clamp(64px,8vw,112px)}
.section.subtle{background:var(--bg-subtle); border-block:1px solid var(--border)}
.section.warm{background:var(--warm); border-block:1px solid var(--warm-border)}
.section.band{border:0}

/* ── The closing band: what happens next, and the demo form ── */
.close-band{padding-block:clamp(48px,7vw,96px)}
.close-band .inner{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:start; padding:clamp(28px,5vw,64px); border-radius:28px}
.close-band .inner::after{content:''; position:absolute; right:-60px; top:-80px; width:340px; height:340px; background:radial-gradient(closest-side, color-mix(in srgb, var(--primary) 30%, transparent), transparent); pointer-events:none}
.close-band h2{font-size:clamp(32px,4vw,52px)}
.close-band .lead{margin-top:14px}
.next-steps{display:flex; flex-direction:column; gap:14px; margin-top:28px; counter-reset:ns}
.next-steps li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; align-items:center; font-weight:600; font-size:16px}
.next-steps li::before{counter-increment:ns; content:counter(ns); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--fg); color:var(--bg); font-weight:700; font-size:15px}
.direct{display:flex; flex-direction:column; gap:10px; margin-top:28px}
.direct a{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--border); text-decoration:none; transition:border-color .15s}
.direct a:hover{border-color:var(--border-strong)}
.direct .di{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--muted-bg); color:var(--fg)}
.direct .di svg{width:18px; height:18px}
.direct b{display:block; font-weight:600; font-size:15px}
.direct span{display:block; font-size:14px; color:var(--fg-muted)}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; position:relative}
form.demo-form{position:relative; padding:clamp(18px,3vw,28px); display:flex; flex-direction:column; gap:16px; border-radius:20px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg)}
.demo-form h3{font-size:19px; letter-spacing:-.02em}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:14px; font-weight:600}
.field label .opt{font-weight:400; color:var(--fg-subtle)}
.field input, .field textarea, .field select{height:44px; font-size:15.5px; background:var(--surface); border:1px solid var(--input); border-radius:10px; padding:0 12px; width:100%; min-width:0; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s}
.field textarea{height:auto; min-height:84px; padding:10px 12px; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:var(--fg-subtle)}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:2px solid var(--ring); outline-offset:1px}
.field [aria-invalid="true"], .field [aria-invalid="true"]:focus{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.error{font-size:14px; font-weight:500; color:var(--danger)}
.picked{padding:12px 14px; border-radius:12px; background:var(--bg-subtle); border:1px solid var(--border); font-size:14.5px; color:var(--fg-muted)}
.picked b{color:var(--fg)}
.picked a{color:var(--primary); font-weight:600}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.grid2 .btn{white-space:normal; text-align:center; min-width:0; height:auto; min-height:50px; padding-block:10px; line-height:1.3}
.field select{-webkit-appearance:none; appearance:none; padding-right:36px; background-image:linear-gradient(45deg, transparent 50%, var(--fg-subtle) 50%), linear-gradient(135deg, var(--fg-subtle) 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.sent-note{padding:10px 14px; border-radius:12px; background:var(--success-soft); color:var(--fg); font-size:14px}
.sent-note a{color:var(--success); font-weight:600}
.sent-note .link-btn{font-size:14px}
.close-band .eyebrow{color:var(--fg-subtle)}
.noscript{margin:0; padding:16px; text-align:center; font-size:14.5px; background:var(--amber-soft); color:var(--fg)}

/* the small dark band that closes a platform or pricing page */
.cta-band{padding-block:clamp(48px,7vw,88px)}
.cta-band .inner{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:24px 40px; align-items:center; padding:clamp(28px,5vw,56px); border-radius:24px}
.cta-band .inner::after{content:''; position:absolute; right:-80px; top:-100px; width:320px; height:320px; background:radial-gradient(closest-side, color-mix(in srgb, var(--primary) 28%, transparent), transparent); pointer-events:none}
.cta-band h2{position:relative}
.cta-band p{position:relative; margin-top:12px; color:var(--fg-muted); max-width:52ch}
.cta-band .row{position:relative}

/* ── Toasts and the quote pill ─────────────────────── */
.toasts{position:fixed; z-index:60; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; width:max-content; max-width:calc(100% - 32px); pointer-events:none}
.toast{display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; background:var(--surface); color:var(--fg); border:1px solid var(--border); box-shadow:var(--shadow-lg); font-size:14.5px; font-weight:500; animation:toast-in .3s cubic-bezier(.2,.8,.2,1)}
.toast svg{width:17px; height:17px; color:var(--success)}
@keyframes toast-in{from{opacity:0; transform:translateY(8px) scale(.98)}}
.qpill{position:fixed; z-index:35; right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border-radius:999px; background:var(--fg); color:var(--bg); box-shadow:var(--shadow-lg); text-decoration:none; font-weight:600; font-size:15px; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s}
.qpill.away{transform:translateY(140%); opacity:0; pointer-events:none; visibility:hidden; transition:transform .35s, opacity .35s, visibility 0s .35s}
.qpill small{opacity:.7; font-weight:500; font-size:13.5px}
.qpill i{font-style:normal; background:var(--primary); color:var(--on-primary); border-radius:999px; padding:6px 13px; font-size:14px}
:root[data-theme="dark"] .qpill i{background:#4F46E5; color:#fff}

/* ── Footer (dark) ─────────────────────────────────── */
.foot{padding-block:56px calc(36px + env(safe-area-inset-bottom,0px)); font-size:14.5px; color:var(--fg-muted)}
.foot .wrap{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr)); gap:32px}
.foot h2{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:14px}
.foot ul{display:flex; flex-direction:column; gap:9px}
.foot a{text-decoration:none} .foot a:hover{color:var(--fg)}
.foot .about p{margin-top:14px; max-width:36ch}
.foot .about .row{margin-top:18px}
.foot .legal{grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:22px; border-top:1px solid var(--border); font-size:13.5px; color:var(--fg-subtle)}

/* ── Motion: sections rise in as they arrive (only when the visitor allows motion) ─ */
.js-motion [data-rise]{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.js-motion [data-rise].in{opacity:1; transform:none}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .menu-panel{grid-template-columns:minmax(0,1fr)}
  .menu-feature{display:none}
  .foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot .about{grid-column:1 / -1}
}
@media (max-width:940px){
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; padding:8px var(--gutter) 14px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:var(--shadow); max-height:calc(100vh - 64px); overflow-y:auto}
  .nav.open{display:flex}
  .nav > a, .nav-menu > button{padding:12px 10px; font-size:16px; text-align:left; width:100%; justify-content:space-between}
  .nav-menu > button[aria-expanded="true"]{background:none}
  .nav .m-only{display:flex; align-items:center; gap:10px}
  .nav .m-wa{margin-top:6px; border-top:1px solid var(--border); border-radius:0; padding-top:16px; justify-content:flex-start}
  .menu-panel{position:static; transform:none; width:auto; box-shadow:none; border:0; border-radius:0; background:transparent}
  .menu-groups{grid-template-columns:minmax(0,1fr); padding:0 0 8px}
  .mg{border-left:0; padding:0}
  .menu-foot{background:transparent; padding:8px 10px; border-top:0}
  .menu-btn{display:grid}
  .top .wrap{justify-content:space-between}
  .close-band .inner, .cta-band .inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .brand small{display:none}
  .top-cta .theme-btn{display:none}
  .fields{grid-template-columns:minmax(0,1fr)}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qpill [data-pill-count]{display:none}
  .qpill small{font-size:12.5px}
  .close-band .inner{border-radius:20px}
  .announce{font-size:13.5px}
}
@media print{
  .js-motion [data-rise]{opacity:1!important; transform:none!important}
  .top{position:static}
  .qpill, .toasts, .menu-btn, .announce, .mbar{display:none!important}
  .band{background:none!important; color:inherit!important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important; animation-duration:0s!important}
}