/* =====================================================================
   Dvaari — shared stylesheet for every page (index, contact, policies).
   Design grammar: Apple product-page layout, a 980px column, white / black / light-grey bands,
   glass cards over an aurora, Dvaari blue where Apple's blue would be. Light by default,
   dark via the in-page toggle (html[data-dv-theme="dark"]).
   ===================================================================== */
/* Self-hosted Google Fonts (SIL Open Font License): Inter and JetBrains Mono, latin + latin-ext. Generated by optimize-assets.js. */
@font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/fonts/inter-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/fonts/inter-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(assets/fonts/inter-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(assets/fonts/inter-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(assets/fonts/inter-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(assets/fonts/inter-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 700;font-display: swap;src: url(assets/fonts/inter-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 700;font-display: swap;src: url(assets/fonts/inter-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 800;font-display: swap;src: url(assets/fonts/inter-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 800;font-display: swap;src: url(assets/fonts/inter-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'JetBrains Mono';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/fonts/jetbrains-mono-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'JetBrains Mono';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/fonts/jetbrains-mono-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'JetBrains Mono';font-style: normal;font-weight: 500;font-display: swap;src: url(assets/fonts/jetbrains-mono-latin-ext.woff2?v=202611120512) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'JetBrains Mono';font-style: normal;font-weight: 500;font-display: swap;src: url(assets/fonts/jetbrains-mono-latin.woff2?v=202611120512) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  /* Layout (Apple product-page grammar): a 980px column, centred hero with the product name as the headline, one big image under it,
     full-bleed bands that alternate white / black / light grey, a horizontal card gallery with round arrows, a black closing band, footnoted fine print.
     Palette: white, Apple-grey #f5f5f7 bands, near-black ink, #86868b secondary text; Dvaari blue stands where Apple's blue would. */
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#86868b;
  --muted-2:#b8b8bd;
  --rule:#d2d2d7;
  --rule-soft:#e8e8ed;
  --accent:#2362eb;
  --accent-2:#1a4fc4;
  --accent-soft:rgba(35,98,235,.14);
  --on-accent:#ffffff;
  --green:#22b573;
  --on-green:#ffffff;
  --warn:#e0a106;
  --err:#d7263d;
  --black:#000000;
  --black-2:#1d1d1f;
  --on-black:#f5f5f7;
  --muted-on-black:#86868b;
  --hw:#0b0b0d;
  --hw-ring:rgba(255,255,255,.1);
  --scr-ink:#ffffff;
  /* Glass */
  --glass-bg:rgba(255,255,255,.52);
  --glass-bg-strong:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.7);
  --glass-hi:rgba(255,255,255,.95);
  --glass-shadow:0 14px 44px -14px rgba(11,18,32,.18);
  --aur-1:rgba(35,98,235,.22);
  --aur-2:rgba(99,150,255,.16);
  --aur-3:rgba(79,134,255,.2);
  --display:"Inter","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:980px;
  --gx:clamp(20px,5vw,44px);
  --nav-h:52px;
  --r:28px;
  --ease:cubic-bezier(.25,.1,.25,1);
}
/* Light by default; dark only via the page's own toggle. To follow the OS instead, duplicate this block under @media (prefers-color-scheme:dark){ :root:not([data-dv-theme="light"]){…} } */
:root[data-dv-theme="dark"]{
  --bg:#000000; --bg-alt:#161617; --card:#1d1d1f; --ink:#f5f5f7; --ink-2:#d2d2d7; --muted:#86868b; --muted-2:#6e6e73; --rule:#424245; --rule-soft:#2c2c2e;
  --accent:#4f86ff; --accent-2:#2362eb; --accent-soft:rgba(79,134,255,.22); --green:#34d399; --on-green:#06200f; --warn:#f0b429; --err:#ff6b7a;
  --black:#000000; --black-2:#161617; --hw-ring:rgba(255,255,255,.18); color-scheme:dark;
  --glass-bg:rgba(29,29,31,.48); --glass-bg-strong:rgba(22,22,23,.8); --glass-border:rgba(255,255,255,.12); --glass-hi:rgba(255,255,255,.18); --glass-shadow:0 14px 44px -14px rgba(0,0,0,.65);
  --aur-1:rgba(35,98,235,.32); --aur-2:rgba(99,150,255,.2); --aur-3:rgba(79,134,255,.28);
}

/* ---------- Glass + aurora (the light behind the glass) ---------- */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)}
.band.black .glass,.band.black.aurora .glass{--glass-bg:rgba(255,255,255,.08);--glass-border:rgba(255,255,255,.16);--glass-hi:rgba(255,255,255,.22);--glass-shadow:0 24px 70px -24px rgba(0,0,0,.7)}
.aurora{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.aurora::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 45% at 15% 12%,var(--aur-1),transparent 65%),radial-gradient(45% 40% at 85% 25%,var(--aur-2),transparent 65%),radial-gradient(50% 45% at 55% 100%,var(--aur-3),transparent 65%)}
.band.black.aurora{--aur-1:rgba(35,98,235,.42);--aur-2:rgba(99,150,255,.24);--aur-3:rgba(79,134,255,.34)}
.band.black.aurora.final{--aur-1:rgba(35,98,235,.16);--aur-2:rgba(99,150,255,.08);--aur-3:rgba(79,134,255,.12)}
.blob{position:absolute;border-radius:50%;filter:blur(64px);z-index:-1;pointer-events:none;will-change:transform;aspect-ratio:1}
.blob.b1{width:min(560px,85vw);left:-12%;top:-24%;background:var(--aur-1);animation:drift1 26s ease-in-out infinite alternate}
.blob.b2{width:min(460px,70vw);right:-10%;bottom:-28%;background:var(--aur-3);animation:drift2 32s ease-in-out infinite alternate}
.blob.b3{width:min(360px,60vw);left:40%;top:30%;background:var(--aur-2);animation:drift3 36s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,16%) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-14%,-18%) scale(.92)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(-18%,22%)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.modal .card,.nav{background:var(--glass-bg-strong)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.47 var(--body);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
sup{font-size:.55em;line-height:0;vertical-align:.7em;margin-left:1px;color:inherit;font-weight:500}
.tm{font-size:.3em;line-height:0;vertical-align:top;position:relative;top:.5em;margin-left:.08em;font-weight:500;letter-spacing:0}
.tm-nav{font-size:9px;top:-5px;margin-left:-6px;color:var(--ink)}

.wrap{max-width:calc(var(--maxw) + 2*var(--gx));margin-inline:auto;padding-left:max(var(--gx),env(safe-area-inset-left,0px));padding-right:max(var(--gx),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:999px;z-index:50;text-decoration:none;font-size:13px}
.skip:focus{left:16px}
.lead-in{color:var(--muted)}
.band{padding-block:clamp(72px,10vw,130px)}
.band.alt{background:var(--bg-alt)}
.band.black{background:var(--black);color:var(--on-black)}
.band.black .lead-in,.band.black .sub{color:var(--muted-on-black)}
.center{text-align:center}

/* Type scale */
.h-hero{font:700 clamp(48px,8vw,88px)/1 var(--display);letter-spacing:-.025em}
.h-tag{font:500 clamp(22px,3vw,30px)/1.2 var(--display);letter-spacing:-.018em;margin-top:12px}
.h2{font:700 clamp(32px,5vw,56px)/1.07 var(--display);letter-spacing:-.025em;text-wrap:balance}
.h3{font:600 clamp(22px,2.8vw,30px)/1.15 var(--display);letter-spacing:-.02em}
.sub{font:400 clamp(17px,2vw,21px)/1.4 var(--body);color:var(--muted);letter-spacing:-.012em}
.fine{font-size:12px;line-height:1.5;color:var(--muted);letter-spacing:-.005em}
.incl{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.3 var(--body);color:var(--ink-2);background:var(--accent-soft);border-radius:999px;padding:7px 12px 7px 10px;justify-self:start}
.incl svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fine a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.fine a:hover{color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:4px;color:var(--accent);text-decoration:none;font:400 17px/1.2 var(--body);transition:color .2s ease}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}
.tlink svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);display:inline-block;flex:none}
.dot.ok{background:var(--green)}
.dot.accent{background:var(--accent)}
.dot.warn{background:var(--warn)}

/* ---------- Local nav (Apple product-nav style) ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--glass-bg);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.nav.scrolled{border-bottom-color:var(--glass-border);box-shadow:0 10px 30px -18px rgba(11,18,32,.18)}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}
.nav-ind{position:absolute;bottom:-1px;left:0;width:0;height:2px;border-radius:2px;background:var(--accent);opacity:0;transition:left .4s var(--ease),width .4s var(--ease),opacity .3s ease;pointer-events:none}
@media (max-width:760px){.nav-ind{display:none}}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.brand .mark{height:30px;width:auto}
.brand .word{height:22px;width:auto;position:relative;top:1px}
:root[data-dv-theme="dark"] .brand .word{filter:invert(1)}  /* the wordmark PNG is black; invert it on dark */
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;padding:0;margin:0}
.nav-links a{font:400 12px/1 var(--body);letter-spacing:-.01em;color:var(--ink);text-decoration:none;opacity:.85;transition:opacity .2s ease}
.nav-links a:hover{opacity:1;color:var(--accent)}
@media (max-width:760px){.nav-links{display:none}}
.nav-right{display:flex;align-items:center;gap:14px}
.theme{width:30px;height:30px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;flex:none;color:var(--muted);transition:color .2s ease}
.theme:hover{color:var(--ink)}
.theme svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}
.theme[data-mode="dark"] .moon{display:block}
.theme[data-mode="dark"] .sun{display:none}

/* ---------- Buttons: layered "expensive" primary (gradient fill, inner top highlight, bottom shade, tinted glow) ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:12px;font:600 16px/1.2 var(--body);letter-spacing:-.012em;color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;border:0;
  background:linear-gradient(180deg,#4a84ff 0%,var(--accent) 48%,#1f57d9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(11,18,32,.24),0 10px 22px -10px rgba(35,98,235,.65);
  transition:transform .22s var(--ease),box-shadow .22s ease,filter .22s ease}
.pill::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);pointer-events:none}
.pill{overflow:hidden}
.pill::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);transform:translateX(-130%);transition:transform .75s var(--ease);pointer-events:none}
.pill:hover::after{transform:translateX(130%)}
.pill:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.22),0 2px 4px rgba(11,18,32,.22),0 16px 30px -12px rgba(35,98,235,.7)}
.pill:active{transform:translateY(0) scale(.99);filter:brightness(.97);box-shadow:inset 0 2px 4px rgba(0,0,0,.28),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 2px rgba(11,18,32,.2)}
.pill.sm{padding:7px 14px;font-size:13px;border-radius:9px;gap:6px}
.pill.full{width:100%;padding:15px 22px}
.pill[disabled]{opacity:.6;cursor:progress;transform:none;filter:none}
.pill svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease);position:relative}
.pill:hover svg{transform:translateX(3px)}
.pill.sm svg{width:13px;height:13px}
:root[data-dv-theme="dark"] .pill{background:linear-gradient(180deg,#6a9bff 0%,var(--accent) 48%,#2a63e6 100%)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,80px);text-align:center}
.hero .ctas{display:flex;align-items:center;justify-content:center;gap:12px 28px;flex-wrap:wrap;margin-top:28px}
.hero .fine{margin-top:22px}
.hero-ph{width:100%;aspect-ratio:16/9;margin-top:clamp(40px,6vw,72px);transform-origin:50% 0;will-change:transform}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .14em .14em .02em;margin:-.08em -.14em -.14em -.02em}
.w > span{display:inline-block}
@media (max-width:640px){.hero-ph{aspect-ratio:4/5}}

/* ---------- Placeholders (swap each .ph for the real asset) ---------- */
.ph{position:relative;display:grid;place-items:center;background-color:var(--glass-bg);background-image:repeating-linear-gradient(135deg,transparent 0 18px,rgba(120,130,150,.12) 18px 19px);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);border-radius:var(--r);color:var(--muted);text-align:center;overflow:hidden;max-width:100%}
.band.black .ph{background-color:rgba(255,255,255,.06);background-image:repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.08) 18px 19px);border-color:rgba(255,255,255,.14)}
.ph-label{display:grid;gap:4px;justify-items:center;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--glass-bg-strong);border:1px solid var(--glass-border);border-radius:14px;padding:12px 16px}
.ph-label svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.ph-label small{font-size:9.5px;letter-spacing:.06em;color:var(--muted);text-transform:none}
@media (max-width:640px){.ph{border-radius:18px}}

/* ---------- Device band ---------- */
.device-band .h2{max-width:20ch;margin-inline:auto}
.device-wrap{display:grid;place-items:center;gap:76px;margin-top:150px}  /* covers extend ~11% beyond the device on all sides, ears up to ~29% above */
@property --bz1{syntax:'<color>';inherits:true;initial-value:#2a2b30}
@property --bz2{syntax:'<color>';inherits:true;initial-value:#0b0b0d}
@property --bzr{syntax:'<color>';inherits:true;initial-value:#4f86ff}
.device{--bz1:#2a2b30;--bz2:#0b0b0d;--bzr:#4f86ff;width:min(360px,100%);aspect-ratio:1;border-radius:50%;padding:3%;position:relative;isolation:isolate;box-shadow:0 60px 120px -60px rgba(79,134,255,.45),0 30px 60px -30px rgba(0,0,0,.8);transition:--bz1 .6s ease,--bz2 .6s ease,--bzr .6s ease}
.device::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:radial-gradient(circle at 30% 24%,var(--bz1),var(--bz2) 72%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 6px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);transition:inherit}
/* Bezel designs */
.device.bz-brushed::before{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.3),transparent 60%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.35),transparent 60%),repeating-conic-gradient(from 0deg,var(--bz1) 0deg .5deg,color-mix(in srgb,var(--bz1) 62%,var(--bz2)) .5deg 1deg)}
.device.bz-ring::before{background:radial-gradient(circle at 30% 24%,var(--bz1),var(--bz2) 72%)}
.device.bz-ring .screen{box-shadow:0 0 0 2px var(--bzr),0 0 0 3px rgba(0,0,0,.6)}
.device.bz-ring{padding:3.6%}
.device.bz-ceramic::before{background:radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--bz1) 70%,#fff),var(--bz1) 45%,var(--bz2) 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.1)}
/* Device stage + 3D-printed covers */
.device-stage{position:relative;width:min(360px,100%);aspect-ratio:1;transition:transform .15s ease-out,margin .4s var(--ease)}
@media (max-width:640px){.device-stage{width:min(360px,66vw)}}
.device-band{overflow:hidden}
.device-stage .device{width:100%;position:relative;z-index:1}
.cover{position:absolute;left:-35%;top:-40%;width:170%;height:180%;max-width:none;pointer-events:none;z-index:0;overflow:visible;filter:drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.cover g{transform-origin:100px 100px}
.cover g.pop{animation:coverIn .55s var(--ease)}
@keyframes coverIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.cfg-tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.08);border-radius:999px;padding:3px}
.cfg-tabs button{border:0;background:transparent;color:var(--muted-on-black);font:500 13px/1 var(--body);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.cfg-tabs button:hover{color:var(--on-black)}
.cfg-tabs button[aria-selected="true"],.cfg-tabs button[aria-checked="true"]{background:var(--on-black);color:#000}
.cfg-pane{display:grid;gap:16px;justify-items:center;width:100%}
/* Bezel controls */
.bezel-ui{display:grid;gap:16px;justify-items:center;padding:18px 22px 20px;border-radius:22px;width:min(460px,100%)}
.bz-design{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.bz-name{display:grid;gap:3px;text-align:center;min-width:0}
.bz-name small{font:500 11px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-black)}
.bz-name strong{font:600 17px/1.2 var(--display);letter-spacing:-.015em;color:var(--on-black)}
.bz-dots{display:flex;gap:6px}
.bz-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.25);transition:width .3s var(--ease),background .2s ease}
.bz-dots i.on{width:18px;background:var(--on-black)}
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sw{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;background:radial-gradient(circle at 32% 28%,var(--c1),var(--c2) 75%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 0 0 2px transparent,0 0 0 3px transparent;transition:transform .2s var(--ease),box-shadow .2s ease}
.sw:hover{transform:scale(1.08)}
.sw[aria-checked="true"]{box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 0 0 2px #000,0 0 0 3.5px var(--on-black)}
.bz-finish{font:500 13px/1.3 var(--body);color:var(--muted-on-black);min-height:1.3em}
.bz-finish b{color:var(--on-black);font-weight:600}

.screen{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;background:#06070b;isolation:isolate}
.scr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;opacity:0;z-index:0;transition:opacity .9s var(--ease)}
.scr-img.on{opacity:1;z-index:1}
.scr-img.out{opacity:1;z-index:0;transition:none}  /* the outgoing wallpaper stays opaque underneath while the next one fades in on top */
.screen::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 36%);pointer-events:none;mix-blend-mode:screen}
.band.black .fine{color:var(--muted-on-black)}

/* ---------- Film placeholder ---------- */
.video-ph{position:relative;aspect-ratio:16/9;width:100%;margin-top:clamp(28px,4vw,44px)}
.video-ph .ph-label{position:absolute;left:16px;bottom:16px}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;place-items:center}
.play svg{width:30px;height:30px;fill:var(--accent);margin-left:4px}
.play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.6s ease-out infinite}
@media (max-width:640px){.video-ph{aspect-ratio:16/10}.play{width:60px;height:60px}.play svg{width:24px;height:24px}}
/* ---------- Why pre-order ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);margin-top:clamp(40px,6vw,64px);text-align:center}
@media (max-width:700px){.why-grid{grid-template-columns:1fr;gap:36px}}
.why{display:grid;justify-items:center;gap:12px;padding:32px 24px 30px;border-radius:24px;transition:transform .35s var(--ease)}
.why:hover{transform:translateY(-4px)}
.why .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.why .ico svg{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.why b{font:600 21px/1.2 var(--display);letter-spacing:-.02em}
.why p{color:var(--muted);font-size:17px;max-width:26ch}

/* ---------- How it works: segmented control + panel + progress dots ---------- */
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;border-radius:999px;padding:4px;margin-top:clamp(28px,4vw,44px)}
.seg button{border:0;background:transparent;border-radius:999px;padding:10px 18px;font:500 14px/1 var(--body);letter-spacing:-.01em;color:var(--ink);cursor:pointer;transition:background .25s ease,color .25s ease;white-space:nowrap}
.seg button:hover{color:var(--accent)}
.seg{position:relative}
.seg button{position:relative;z-index:1}
.seg button[aria-selected="true"]{color:var(--bg)}
.seg button[aria-selected="true"]:hover{color:var(--bg)}
.seg-thumb{position:absolute;left:4px;top:4px;width:0;height:0;border-radius:999px;background:var(--ink);transition:left .45s var(--ease),width .45s var(--ease),top .45s var(--ease),height .45s var(--ease);z-index:0}
@media (max-width:560px){.seg{border-radius:22px}.seg button{padding:9px 14px;font-size:13px}}
.step-panels{margin-top:clamp(32px,5vw,56px);min-height:7.5em}
.step-panel{display:grid;gap:12px;justify-items:center;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.step-panel.on{opacity:1;transform:none}
.step-panel .h3{font-size:clamp(26px,4vw,40px);letter-spacing:-.025em;text-wrap:balance;max-width:20ch}
.step-panel p{color:var(--muted);font-size:clamp(17px,2vw,21px);max-width:40ch}
.sdots{display:flex;gap:8px;justify-content:center;margin-top:clamp(28px,4vw,40px)}
.sdots button{position:relative;width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--rule);cursor:pointer;overflow:hidden;transition:width .35s var(--ease)}
.sdots button.on{width:44px}
.sdots button i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.sdots button.done i{transform:scaleX(1);opacity:.35}

/* ---------- Gallery (Apple "Get to know" scroller) ---------- */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 2px 12px;margin:clamp(28px,4vw,48px) -2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-2px}
.track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.track{scroll-behavior:auto}}
.tile{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;border-radius:var(--r);padding:28px 28px 24px;display:grid;grid-template-rows:auto auto 1fr;gap:10px;min-width:0;min-height:460px}
.tile.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.64);box-shadow:inset 0 1px 0 var(--glass-hi)}  /* no blur or drop shadow inside the scroll track: Chrome paints a frosted rectangle around blurred children of a scroller, and clips shadows */
:root[data-dv-theme="dark"] .tile.glass{background:rgba(29,29,31,.62)}
.tile .ph{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(255,255,255,.35);box-shadow:none}
:root[data-dv-theme="dark"] .tile .ph{background-color:rgba(255,255,255,.05)}
@media (max-width:900px){.tile{flex-basis:calc((100% - 20px)/2)}}
@media (max-width:600px){.tile{flex-basis:84%;min-height:420px;border-radius:22px;padding:22px 22px 20px}}
.tile .label{font:600 13px/1.3 var(--body);color:var(--muted);letter-spacing:-.005em}
.tile .h3{font-size:clamp(22px,2.4vw,27px);text-wrap:balance}
.tile .ph{align-self:stretch;border-radius:18px;aspect-ratio:auto;min-height:200px;margin-top:14px;width:100%}
.tile .ph .ph-label{padding:9px 12px;font-size:9.5px;border-radius:10px}
.tile .ph .ph-label svg{width:16px;height:16px;margin-bottom:2px}
.arrows{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}
.arrow{width:36px;height:36px;border-radius:50%;border:0;background:var(--rule-soft);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s ease,opacity .2s ease}
.arrow:hover{background:var(--rule)}
.arrow[disabled]{opacity:.35;cursor:default}
.arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.arrow.prev svg{transform:rotate(180deg)}
.band.black .arrow{background:#2c2c2e;color:var(--on-black)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}
.faq-grid .sub{margin-top:14px}
.email{font-family:var(--mono);font-size:13px;color:var(--ink-2);-webkit-user-select:all;user-select:all}
details{border-top:1px solid var(--rule-soft)}
details:last-of-type{border-bottom:1px solid var(--rule-soft)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 19px/1.3 var(--display);letter-spacing:-.018em;transition:color .2s ease}
summary:hover{color:var(--accent)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;font:300 24px/1 var(--display);color:var(--muted);transition:transform .3s var(--ease),color .2s ease}
details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
details .ans{overflow:hidden}
details > p,details .ans > p{padding:0 0 22px;color:var(--muted);font-size:17px;line-height:1.5;max-width:60ch}

/* ---------- Closing band ---------- */
.final-card{position:relative;overflow:hidden;max-width:720px;margin-inline:auto;padding:clamp(36px,6vw,64px) clamp(24px,5vw,56px);border-radius:var(--r)}
.final-card::after{content:"";position:absolute;inset:-10%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);transform:translateX(-120%) skewX(-10deg);animation:sweep 8s var(--ease) infinite;pointer-events:none}
@keyframes sweep{0%,55%{transform:translateX(-120%) skewX(-10deg)}100%{transform:translateX(120%) skewX(-10deg)}}
.final .sub{margin-top:14px}
.final .pill{margin-top:28px}
.final .fine{margin-top:18px}

/* ---------- Footer (Apple-style footnotes) ---------- */
footer{background:var(--bg-alt);color:var(--muted);font-size:12px;line-height:1.5}
.foot{padding-block:28px 40px;display:grid;gap:18px}
.notes{list-style:none;padding:0;margin:0;display:grid;gap:6px;max-width:80ch}
.notes li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--rule);padding-top:16px}
.flinks{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;padding:0;margin:0}
.flinks li + li::before{content:"";display:inline-block;width:1px;height:12px;background:var(--rule);margin:0 10px;vertical-align:-1px}
.flinks a{color:var(--ink-2);text-decoration:none}
.flinks a:hover{text-decoration:underline}

/* ---------- Reservation modal ---------- */
.no-scroll{overflow:hidden}
.modal{border:0;padding:0;background:transparent;color:var(--ink);width:min(520px,calc(100vw - 32px));max-width:none;max-height:none;margin:auto;overflow:visible}
.modal::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal[open]{animation:modalIn .4s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal .card{position:relative;max-height:calc(100vh - 32px);overflow:auto;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--glass-border);box-shadow:0 40px 100px -30px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi)}
/* Buy-sheet layout: product image left, configurator right (Apple's buy page) */
.modal.modal{width:min(960px,calc(100vw - 32px))}
.modal .sheet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:0;overflow:hidden}
.sheet-media{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(70% 60% at 20% 10%,var(--aur-1),transparent 65%),radial-gradient(60% 50% at 90% 90%,var(--aur-3),transparent 65%),radial-gradient(40% 40% at 70% 20%,var(--aur-2),transparent 65%);padding:clamp(24px,3vw,40px);display:grid;align-content:center;gap:14px;border-right:1px solid var(--glass-border)}
.sheet-media .ph{aspect-ratio:1;width:100%;border-radius:22px}
.sheet-media .fine{text-align:center}
.sheet-body{padding:clamp(22px,3vw,36px);overflow:auto;max-height:calc(100vh - 32px)}
@media (max-width:860px){
  .modal .sheet{grid-template-columns:1fr}
  .sheet-media{display:none}
}
@media (max-width:640px){
  .modal.modal{width:100vw;margin:auto 0 0}
  .modal .card{border-radius:22px 22px 0 0;max-height:94vh}
  .sheet-body{max-height:94vh;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  @keyframes modalIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}
/* Option tiles, like Apple's configurator */
.opts{display:grid;gap:10px}
.opts .lbl{font:500 12px/1.3 var(--body);color:var(--ink-2)}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt-in{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--glass-bg);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;transition:border-color .2s ease,box-shadow .2s ease}
.opt-in > span{display:grid;gap:2px;min-width:0}
.opt-in b{font:600 15px/1.25 var(--body);letter-spacing:-.012em}
.opt-in small{font-size:12.5px;color:var(--muted)}
.opt-in i{width:20px;height:20px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;flex:none;transition:background .2s ease,border-color .2s ease}
.opt-in i svg{width:11px;height:11px;stroke:var(--on-accent);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.opt:hover .opt-in{border-color:var(--muted-2)}
.opt input:checked + .opt-in{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.opt input:checked + .opt-in i{background:var(--accent);border-color:var(--accent)}
.opt input:checked + .opt-in i svg{opacity:1}
.opt input:focus-visible + .opt-in{box-shadow:0 0 0 3px var(--accent-soft)}
.close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;background:var(--rule-soft);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s ease}
.close:hover{background:var(--rule)}
.close svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card{background:var(--card);border-radius:22px;padding:clamp(22px,3vw,30px);min-width:0}
.card .title{font:600 clamp(24px,3vw,32px)/1.1 var(--display);letter-spacing:-.025em;padding-right:44px}
.card .title + .fine{margin-top:6px;font-size:13px}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:22px 0 0}
.step{position:relative;flex:1;font:500 11px/1.3 var(--body);letter-spacing:-.005em;color:var(--muted-2);padding-top:9px;border-top:2px solid var(--rule-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}
.step::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease),background .3s ease}
.step.on{color:var(--ink)}
.step.on::before{transform:scaleX(1)}
.step.done{color:var(--muted)}
.step.done::before{transform:scaleX(1);background:var(--green)}
.pane{margin-top:22px}
.pane.enter{animation:paneIn .45s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
form.pane{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font:500 12px/1.3 var(--body);color:var(--ink-2)}
.field input{width:100%;background:var(--bg-alt);border:1px solid transparent;border-radius:12px;padding:13px 14px;font:400 17px/1.3 var(--body);letter-spacing:-.012em;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;min-width:0}
.field input::placeholder{color:var(--muted-2)}
.field input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--card)}
.field.bad input{border-color:var(--err)}
.field .err{display:none;font-size:12px;line-height:1.4;color:var(--err)}
.field.bad .err{display:block}
.phone{display:flex;min-width:0}
.prefix{display:flex;align-items:center;padding:0 12px;background:var(--bg-alt);border-radius:12px 0 0 12px;font:500 14px var(--body);color:var(--muted);flex:none}
.phone input{border-radius:0 12px 12px 0}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px}
@media (max-width:360px){.row2{grid-template-columns:1fr}}
.sheet-foot{position:sticky;bottom:calc(-1 * clamp(22px,3vw,36px));background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);margin:6px calc(-1 * clamp(22px,3vw,36px)) calc(-1 * clamp(22px,3vw,36px));padding:0 clamp(22px,3vw,36px) clamp(22px,3vw,36px);display:grid;gap:14px;box-shadow:0 -12px 24px -16px rgba(0,0,0,.18)}
@media (max-width:640px){.sheet-foot{bottom:calc(-1 * (22px + env(safe-area-inset-bottom,0px)));margin-bottom:calc(-1 * (22px + env(safe-area-inset-bottom,0px)));padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}}
.amount{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 4px;border-top:1px solid var(--rule-soft);margin-top:4px}
.amount .lbl{display:flex;flex-direction:column;gap:3px}
.amount .lbl small{font-size:12px;color:var(--muted)}
.amount strong{font:600 24px/1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.refund{display:inline-flex;align-items:center;gap:6px;color:var(--green);font:500 12px/1 var(--body);white-space:nowrap}
.refund svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:480px){.amount{flex-direction:column;align-items:flex-start;gap:10px}}
.pane .h3{font-size:24px}
.pane .sub{font-size:15px;margin-top:6px}
.summary{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);margin-top:18px}
.srow{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.4}
.srow span:first-child{color:var(--muted);flex:none}
.srow span:last-child{text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}
.srow.total span:last-child{font:600 20px/1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.methods{display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0 18px;font-size:12px;color:var(--muted)}
.back{display:inline-block;margin-top:14px;font-size:14px;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.back:hover{text-decoration:underline}
.done-mark{width:52px;height:52px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin-bottom:18px;animation:pop .6s var(--ease)}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.done-mark svg{width:24px;height:24px;stroke:var(--on-green);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .35s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rid{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--ink-2);background:var(--bg-alt);border-radius:999px;padding:8px 8px 8px 14px;max-width:100%}
.rid button{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:0;background:var(--card);cursor:pointer;padding:0;flex:none;color:var(--ink);transition:color .2s ease}
.rid button:hover{color:var(--accent)}
.rid button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.next-steps{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.next-steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.next-steps li i{font:500 11px/1 var(--mono);color:var(--accent);padding-top:5px;font-style:normal}
.toast{font-size:12px;color:var(--green);margin-top:8px;min-height:1.2em}

/* ---------- Motion ---------- */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.reveal.pre{opacity:.75;transform:translateY(28px)}
.reveal.in{opacity:1;transform:none}
.reveal.pre .why,.why.reveal.pre,.tile.reveal.pre{opacity:.6}
.why.reveal,.tile.reveal{transition-delay:calc(var(--i,0)*110ms + 80ms)}
@media (prefers-reduced-motion:no-preference){
  .hero .w > span{transform:translateY(112%);animation:wordUp 1s var(--ease) forwards}
  .hero .h-tag .w > span{animation-delay:.14s}
  .hero > .wrap > .h-hero,.hero > .wrap > .h-tag{animation:none}
  .hero-ph{animation:heroIn 1.1s .3s var(--ease) backwards}
  .device-band .reveal.in .device{animation:wake 1.3s var(--ease) both}
  .why .ico svg *{stroke-dasharray:90;stroke-dashoffset:90}
  .why.in .ico svg *{animation:draw90 1.1s var(--ease) forwards;animation-delay:calc(var(--i,0)*110ms + .35s)}
  .nav{animation:navIn .7s var(--ease) both}
  .hero > .wrap > *{animation:rise .9s var(--ease) both}
  .hero > .wrap > :nth-child(2){animation-delay:.08s}
  .hero > .wrap > :nth-child(3){animation-delay:.16s}
  .hero > .wrap > :nth-child(4){animation-delay:.24s}
  .hero > .wrap > :nth-child(5){animation-delay:.32s}
  .hero > .wrap > :nth-child(6){animation-delay:.45s}
}
@keyframes rise{from{opacity:.15;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wordUp{to{transform:translateY(0)}}
@keyframes heroIn{from{opacity:.3;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes wake{from{transform:scale(.9);filter:brightness(.45)}to{transform:none;filter:none}}
@keyframes draw90{to{stroke-dashoffset:0}}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal.pre{opacity:1;transform:none}}

/* =====================================================================
   Shared chrome for the secondary pages (contact + policies).
   Everything below reuses the tokens, nav, buttons, bands and footer above.
   ===================================================================== */

/* ---------- Nav: current page + anchor offsets ---------- */
.nav-links a[aria-current="page"]{opacity:1;color:var(--accent)}
.band[id],.legal-content [id],.faq-group h3[id],#contact{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---------- Eyebrow pill (home hero + page heroes) ---------- */
.eyebrow{font:500 13px/1.2 var(--body);color:var(--ink-2);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:9px 16px 9px 13px;border-radius:999px}

/* ---------- Page hero (title band on secondary pages) ---------- */
.page-hero{padding-block:clamp(52px,8vw,96px) clamp(28px,4vw,44px);text-align:center}
.page-hero .h1{font:700 clamp(36px,6vw,64px)/1.05 var(--display);letter-spacing:-.028em;text-wrap:balance;max-width:18ch;margin-inline:auto}
.page-hero .sub{margin-top:14px;max-width:56ch;margin-inline:auto}
.page-hero .fine{margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  .page-hero > .wrap > *{animation:rise .9s var(--ease) both}
  .page-hero > .wrap > :nth-child(2){animation-delay:.08s}
  .page-hero > .wrap > :nth-child(3){animation-delay:.16s}
  .page-hero > .wrap > :nth-child(4){animation-delay:.24s}
}

/* ---------- Ghost pill (secondary action) ---------- */
.pill.ghost,:root[data-dv-theme="dark"] .pill.ghost{background:var(--rule-soft);color:var(--ink);box-shadow:none;filter:none}
.pill.ghost::before,.pill.ghost::after{display:none}
.pill.ghost:hover{background:var(--rule);transform:translateY(-1px);box-shadow:none;filter:none}
.pill.ghost:active{transform:none}

/* ---------- Document layout: optional sticky "On this page" + article ---------- */
.doc-band{padding-block:clamp(20px,4vw,44px) clamp(72px,10vw,130px)}
.band.tight{padding-top:clamp(16px,3vw,32px)}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
@media (min-width:980px){.doc.has-toc{grid-template-columns:220px minmax(0,1fr);gap:clamp(48px,6vw,80px)}}
details.toc,details.toc:last-of-type{position:sticky;top:calc(var(--nav-h) + 24px);border:0}
.toc summary{font:600 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 0;cursor:pointer;justify-content:flex-start;gap:10px}
.toc summary::after{content:"+";font:300 18px/1 var(--display);margin-left:auto}
.toc[open] summary::after{transform:rotate(45deg)}
.toc ol{list-style:none;padding:0;margin:4px 0 16px;display:grid;gap:2px;border-left:1px solid var(--rule-soft)}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);text-decoration:none;font-size:13px;line-height:1.4;letter-spacing:-.005em;transition:color .2s ease,border-color .2s ease}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--ink)}
@media (max-width:979px){
  details.toc,details.toc:last-of-type{position:static;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
  .toc ol{margin-bottom:18px}
}
@media (min-width:980px){.toc summary::after{display:none}.toc summary{pointer-events:none;padding-top:0}}

/* ---------- Long-form legal prose ---------- */
.legal-content{max-width:72ch;min-width:0}
.legal-content > :first-child{margin-top:0}
.legal-content h2{font:600 clamp(24px,3vw,32px)/1.15 var(--display);letter-spacing:-.022em;text-wrap:balance;margin-top:clamp(40px,5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--rule-soft)}
.legal-content h3{font:600 20px/1.25 var(--display);letter-spacing:-.018em;margin-top:30px}
.legal-content h4{font:600 17px/1.3 var(--display);letter-spacing:-.012em;margin-top:22px}
.legal-content p{margin-top:14px;color:var(--ink-2);font-size:17px;line-height:1.55}
.legal-content h2 + p,.legal-content h3 + p,.legal-content h4 + p{margin-top:12px}
.legal-content strong{color:var(--ink);font-weight:600}
.legal-content ul,.legal-content ol{margin:14px 0 0;padding-left:22px;color:var(--ink-2);font-size:17px;line-height:1.55;display:grid;gap:8px}
.legal-content li::marker{color:var(--muted)}
.legal-content ul ul,.legal-content ol ol,.legal-content ul ol,.legal-content ol ul{margin-top:8px}
.legal-content dl{margin-top:16px}
.legal-content dt{font-weight:600;color:var(--ink);margin-top:18px}
.legal-content dd{margin:6px 0 0 18px;color:var(--ink-2);font-size:17px;line-height:1.55}
.legal-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-soft);transition:text-decoration-color .2s ease;overflow-wrap:anywhere}
.legal-content a:hover{text-decoration-color:currentColor}
.legal-content .table-scroll{overflow-x:auto;margin-top:18px;border:1px solid var(--rule-soft);border-radius:16px;-webkit-overflow-scrolling:touch}
.legal-content table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.legal-content th,.legal-content td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.legal-content th{font-weight:600;color:var(--ink);background:var(--bg-alt);font-size:13px;white-space:nowrap}
.legal-content tbody tr:last-child td{border-bottom:0}
.legal-content .callout{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--bg-alt);border:1px solid var(--rule-soft)}
.legal-content .callout p{margin-top:0}
.legal-content .callout p + p{margin-top:10px}
.endnote{margin-top:40px;padding-top:18px;border-top:1px solid var(--rule-soft);font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.legal-content .endnote{font-size:12px}

/* ---------- Cards (contact page) ---------- */
.card-h{font:600 clamp(22px,2.6vw,27px)/1.15 var(--display);letter-spacing:-.02em}
.card-sub{color:var(--muted);margin-top:6px;font-size:15px;line-height:1.45}
.support-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:start}
.info-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
@media (max-width:860px){.support-grid,.info-grid{grid-template-columns:minmax(0,1fr)}}
.card.glass{border-radius:var(--r);background:var(--glass-bg)}
@media (max-width:640px){.card.glass{border-radius:22px}}
.contact-list{display:grid;gap:16px;margin-top:22px}
.contact-list > div{display:grid;gap:3px}
.contact-list dt{font:500 12px/1.3 var(--body);color:var(--muted)}
.contact-list dd{color:var(--ink);font-size:16px;line-height:1.5}
.contact-list dd a{color:var(--accent);text-decoration:none}
.contact-list dd a:hover{text-decoration:underline;text-underline-offset:3px}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ---------- Contact form (same grammar as the pre-order sheet) ---------- */
.cf-form{display:grid;gap:14px;margin-top:22px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.cf-row{grid-template-columns:1fr}}
.cf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cf-field label{font:500 12px/1.3 var(--body);color:var(--ink-2)}
.cf-field label::after{content:" *";color:var(--err);font-weight:600}
.cf-field input,.cf-field textarea{width:100%;background:var(--bg-alt);border:1px solid transparent;border-radius:12px;padding:13px 14px;font:400 17px/1.3 var(--body);letter-spacing:-.012em;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;min-width:0}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--muted-2)}
.cf-field input:focus-visible,.cf-field textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--card)}
.cf-field textarea{resize:vertical;min-height:140px;line-height:1.45}
.cf-field textarea.short{min-height:72px}
.row2.addr-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.field.bad select{border-color:var(--err)}
.cf-field select,.field select{width:100%;background:var(--bg-alt);border:1px solid transparent;border-radius:12px;padding:13px 40px 13px 14px;font:400 17px/1.3 var(--body);letter-spacing:-.012em;color:var(--ink);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;min-width:0;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.cf-field select:invalid,.field select:invalid{color:var(--muted-2)}
.cf-field select option,.field select option{color:var(--ink)}
.cf-field select:focus-visible,.field select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background-color:var(--card)}
.cf-form.narrow{max-width:460px;margin-inline:auto;text-align:left}
.phone-group{display:flex;min-width:0}
.phone-group input{flex:1;min-width:0;border-radius:0 12px 12px 0}
.cc-select{position:relative;flex:0 0 auto}
.cc-display{display:flex;align-items:center;height:100%;padding:0 28px 0 14px;background:var(--bg-alt);border-radius:12px 0 0 12px;font:500 14px var(--body);color:var(--muted);position:relative;transition:color .15s ease,box-shadow .15s ease}
.cc-display::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.cc-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit}
.phone .cc-select{display:flex}
.phone .cc-display{border-radius:12px 0 0 12px}
.cc-select:focus-within .cc-display{color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-form .pill{margin-top:4px}
.cf-form .pill[disabled]{opacity:.45;cursor:not-allowed}
.cf-status,.ea-status{display:none;font-size:14px;line-height:1.45;margin-top:14px;padding:12px 14px;border-radius:12px}
.ea-status{max-width:460px;margin-inline:auto;text-align:center}
.cf-status a,.ea-status a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cf-status.success,.ea-status.success{display:block;background:rgba(34,181,115,.12);color:var(--green)}
.cf-status.error,.ea-status.error{display:block;background:rgba(215,38,61,.1);color:var(--err)}

/* ---------- Pre-order sheet: solid surface (the translucent glass read as grey above the sticky footer) ---------- */
.modal .card,.sheet-foot{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet-foot{box-shadow:0 -12px 24px -16px rgba(0,0,0,.12)}

/* ---------- Pre-order sheet: larger step labels, included-pills row ---------- */
.step{font-size:13px;padding-top:10px}
.incl-row{display:flex;flex-wrap:wrap;gap:8px}
.incl-row .incl{justify-self:auto}

/* ---------- Pre-order sheet while Razorpay's window is open: out of the top layer, but still visible and centred ---------- */
.modal.behind[open]{position:fixed;inset:0;margin:auto;z-index:35;height:fit-content;animation:none}
.modal.behind .card{background:var(--card)}
.sheet-dim{display:none;position:fixed;inset:0;z-index:34;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet-dim.on{display:block}

/* ---------- Pre-order sheet: Razorpay status line + fine print ---------- */
.pay-msg{display:none;font-size:13px;line-height:1.45;margin-top:12px;padding:10px 12px;border-radius:10px}
.pay-msg.info{display:block;background:var(--bg-alt);color:var(--ink-2)}
.pay-msg.error{display:block;background:rgba(215,38,61,.1);color:var(--err)}
.pay-fine{margin-top:12px}

/* ---------- Track a booking ---------- */
.mono-input{font-family:var(--mono) !important;text-transform:uppercase;letter-spacing:.08em}
.mono-input::placeholder{text-transform:none;letter-spacing:.04em}
.track-result{max-width:640px;margin:20px auto 0;text-align:left;padding:clamp(24px,3vw,32px);scroll-margin-top:calc(var(--nav-h) + 20px)}
.track-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.track-head small{display:block;font:500 12px/1.3 var(--body);color:var(--muted)}
.track-head strong{font:500 18px/1.3 var(--mono);letter-spacing:.06em;color:var(--ink)}
.track-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--body);padding:7px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.track-badge.ok{background:rgba(34,181,115,.14);color:var(--green)}
.track-badge.bad{background:rgba(215,38,61,.12);color:var(--err)}
.track-badge.warn{background:rgba(224,161,6,.16);color:var(--warn)}
/* Courier-style tracker: icon steps joined by a line; horizontal on desktop, vertical on phones */
.timeline{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.timeline li{position:relative;display:grid;justify-items:center;text-align:center;gap:10px 0;padding:0 4px;align-content:start}
.timeline li::before{content:"";position:absolute;top:22px;left:calc(50% + 26px);right:calc(-50% + 26px);height:2px;border-radius:2px;background:var(--rule-soft);transition:background .4s ease}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--green)}
.timeline li i{width:44px;height:44px;border-radius:50%;border:2px solid var(--rule);background:var(--card);display:grid;place-items:center;position:relative;font-style:normal;color:var(--muted);transition:background .3s ease,border-color .3s ease,color .3s ease}
.timeline li i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.timeline li.done i{background:var(--green);border-color:var(--green);color:#fff}
.timeline li.on i{border-color:var(--accent);color:var(--accent);background:var(--card);box-shadow:0 0 0 5px var(--accent-soft)}
.timeline li.on i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.4s ease-out infinite}
.timeline li.bad i{background:var(--err);border-color:var(--err);color:#fff}
.timeline li b{display:block;font:600 14px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.timeline li.todo b{color:var(--muted)}
.timeline li small{display:block;font-size:12px;line-height:1.35;color:var(--muted);min-height:1.35em;text-wrap:balance}
.timeline li.on small{color:var(--accent);font-weight:500}
@media (max-width:640px){
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline li{grid-template-columns:44px minmax(0,1fr);justify-items:start;text-align:left;gap:3px 14px;padding:0 0 24px;align-items:start}
  .timeline li i{grid-row:1 / span 2}
  .timeline li b{margin-top:2px;font-size:16px}
  .timeline li::before{top:48px;bottom:-4px;left:21px;right:auto;width:2px;height:auto}
  .timeline li:last-child{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.timeline li.on i::after{display:none}}
@keyframes ping{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.track-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule-soft)}
@media (max-width:480px){.track-meta{grid-template-columns:1fr}}
.track-meta dt{font:500 12px/1.3 var(--body);color:var(--muted)}
.track-meta dd{margin:3px 0 0;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.track-result .fine{margin-top:18px}
/* Cancel a booking: a quiet link, then an inline confirmation */
.cancel-wrap{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.cancel-wrap .back{margin-top:0;color:var(--muted)}
.cancel-wrap .back:hover{color:var(--err)}
.cancel-box{margin-top:14px;padding:16px 18px;border-radius:16px;background:rgba(215,38,61,.06);border:1px solid rgba(215,38,61,.18)}
.cancel-box b{display:block;font:600 16px/1.3 var(--display);letter-spacing:-.012em;color:var(--ink)}
.cancel-box p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cancel-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill.danger,:root[data-dv-theme="dark"] .pill.danger{background:linear-gradient(180deg,#ef5a6c 0%,var(--err) 48%,#b81c30 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(11,18,32,.24),0 10px 22px -10px rgba(215,38,61,.55)}
.pill.danger:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.22),0 2px 4px rgba(11,18,32,.22),0 16px 30px -12px rgba(215,38,61,.6)}
.cancel-box .pay-msg{margin-top:12px}

/* ---------- Waiting list card ---------- */
.waitlist{max-width:640px;margin-inline:auto;text-align:center;padding:clamp(28px,4vw,44px) clamp(22px,4vw,40px)}
.waitlist .card-h{font-size:clamp(24px,3vw,30px)}
.waitlist .card-sub{font-size:16px}
.waitlist .fine{margin-top:18px}

/* ---------- FAQ groups (contact page); <details> styling is shared with the home FAQ ---------- */
.faq-group + .faq-group{margin-top:40px}
.faq-group h3{font:600 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.answer{padding:0 0 22px;color:var(--muted);font-size:17px;line-height:1.5;max-width:60ch;display:grid;gap:10px}
.answer p{margin:0;padding:0}
.answer ul,.answer ol{margin:0;padding-left:22px;display:grid;gap:6px}
.answer a,.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-soft)}
.answer a:hover,.prose a:hover{text-decoration-color:currentColor}
.answer strong{color:var(--ink-2);font-weight:600}

/* ---------- Short prose inside cards ---------- */
.prose h3{font:600 17px/1.3 var(--display);letter-spacing:-.012em;margin:22px 0 8px}
.prose .card-h + h3{margin-top:14px}
.prose .card-h + ul,.prose .card-h + p,.prose .card-h + ol{margin-top:14px}
.prose p,.prose li{color:var(--ink-2);font-size:16px;line-height:1.55}
.prose p + p{margin-top:10px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:6px}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- Diwali launch dressing. Everything here is switched on by <body class="festive-diwali">; remove that class after the festival. ---------- */
.lights{display:none;position:absolute;left:0;right:0;top:0;height:72px;pointer-events:none;z-index:2}
.festive-diwali .lights{display:block}
.lights .wire{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(20,20,30,.26);stroke-width:1.3}
.band.black .lights .wire,:root[data-dv-theme="dark"] .lights .wire{stroke:rgba(255,255,255,.26)}
.bulb{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--c);transform:translate(-50%,0);box-shadow:0 0 7px 2px var(--c),0 0 18px 6px color-mix(in srgb,var(--c) 40%,transparent);animation:twinkle 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s)}
.bulb::before{content:"";position:absolute;left:50%;top:-5px;width:4px;height:5px;transform:translateX(-50%);background:#44464d;border-radius:1px 1px 0 0}
@keyframes twinkle{0%,100%{opacity:1;filter:brightness(1.05)}50%{opacity:.5;filter:brightness(.75)}}
@media (prefers-reduced-motion:reduce){.bulb{animation:none}}
.page-hero{position:relative}
.festive-diwali .hero,.festive-diwali .page-hero.aurora,.festive-diwali main > .aurora{--aur-1:rgba(255,166,56,.30);--aur-3:rgba(255,120,48,.22)}
:root[data-dv-theme="dark"] .festive-diwali .hero,:root[data-dv-theme="dark"] .festive-diwali .page-hero.aurora,:root[data-dv-theme="dark"] .festive-diwali main > .aurora{--aur-1:rgba(255,150,40,.34);--aur-3:rgba(255,110,40,.26)}
.eyebrow-diwali{display:none}
.festive-diwali .eyebrow-diwali{display:inline-flex}
.festive-diwali .eyebrow-normal{display:none}
.festive-only{display:none}
.festive-diwali .festive-only{display:inline}
.diya{width:18px;height:18px;flex:none;filter:drop-shadow(0 0 4px rgba(255,176,46,.8))}
.festive-only .diya{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:6px}
@media (max-width:640px){.lights i:nth-of-type(even){display:none}}

/* ---------- Tech specs (home): compact icon tiles ---------- */
.specs{list-style:none;padding:0;margin:clamp(36px,5vw,56px) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;text-align:center}
.spec{flex:0 0 calc((100% - 42px) / 4);min-width:0}
@media (max-width:860px){.spec{flex-basis:calc((100% - 14px) / 2)}}
@media (max-width:360px){.spec{flex-basis:100%}}
.spec{display:grid;justify-items:center;align-content:start;gap:8px;padding:26px 16px 24px;border-radius:22px;transition:transform .35s var(--ease)}
.spec:hover{transform:translateY(-3px)}
.spec .ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi);margin-bottom:4px}
.spec .ico svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spec b{font:600 17px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
.spec p{color:var(--muted);font-size:14px;line-height:1.4;max-width:22ch;text-wrap:balance}
.spec.reveal{transition-delay:calc(var(--i,0)*70ms + 60ms)}
.specs-fine{margin-top:clamp(22px,3vw,30px)}

/* ---------- App download links (after a confirmed booking) ---------- */
.apps{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.apps-h{font:600 15px/1.3 var(--display);letter-spacing:-.012em;color:var(--ink)}
.app-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.app-btn{padding:8px 16px 8px 12px;gap:10px;border-radius:12px;text-align:left;font-size:14px}
.app-btn svg{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
.app-btn:hover svg{transform:none}
.app-btn span{display:grid;line-height:1.15}
.app-btn small{font:500 10px/1.2 var(--body);color:var(--muted);letter-spacing:.01em}
.app-btn b{font:600 14px/1.2 var(--display);letter-spacing:-.01em}
.apps .fine{margin-top:10px}

/* ---------- Feature tiles: label, headline, one-line description, image ---------- */
/* The track's 2px side padding made the first snap point 2px in, so "previous" started enabled. Scroll padding puts it at 0. */
.track{scroll-padding-inline:2px}
.tile{grid-template-rows:auto auto auto 1fr;min-height:500px}
.tile .h3{font-size:clamp(20px,2.2vw,24px)}
.tile p{color:var(--muted);font-size:15px;line-height:1.45;text-wrap:pretty}
@media (max-width:600px){.tile{min-height:460px}}

/* ---------- Early-bird price line (home hero) + struck prices ---------- */
.hero-price{display:inline-flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-price s{color:var(--muted);font:400 clamp(15px,1.6vw,17px)/1 var(--body);letter-spacing:-.01em;text-decoration-thickness:1px}
.hero-price strong{font:600 clamp(22px,2.6vw,28px)/1 var(--display);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-price .tag{align-self:center;font:600 12px/1 var(--body);letter-spacing:-.005em;color:var(--accent);background:var(--accent-soft);padding:7px 11px;border-radius:999px;white-space:nowrap}
.hero-price .tag sup{font-size:.75em;vertical-align:.45em;margin-left:2px;color:inherit}
.hero-terms{list-style:none;padding:0;margin:18px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font:400 clamp(15px,1.7vw,17px)/1.4 var(--body);letter-spacing:-.01em;color:var(--ink-2)}
.hero-terms li{display:inline-flex;align-items:center;gap:8px;text-align:left}
.hero-terms li svg{width:18px;height:18px;flex:none;padding:3px;border-radius:50%;background:var(--green);stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-terms b{font-weight:600;color:var(--ink)}
.hero-terms sup{color:var(--muted)}
@media (max-width:640px){.hero-terms{flex-direction:column;align-items:center;gap:10px}}
.hero .hero-terms + .origin{margin-top:18px}
.sub s,.fine s,.srow s{color:var(--muted);text-decoration-thickness:1px}
.srow span:last-child s{font-weight:400}

/* ---------- "Made in India" mark: the tiranga with the Ashoka Chakra, as an inline SVG (3:2) ---------- */
.tri{display:inline-block;width:21px;height:14px;border-radius:2px;overflow:hidden;flex:none;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
:root[data-dv-theme="dark"] .tri{box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.origin{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:500 13px/1.2 var(--body);color:var(--ink-2);letter-spacing:-.005em}
.flinks .made-in{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}

/* ---------- SEO copy additions ---------- */
.feat-sub{margin-top:12px;max-width:52ch}
.foot-about{color:var(--muted);margin:0 0 10px;max-width:34ch}

/* ---------- Footer: site map (all pages) ---------- */
.foot-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.notes + .foot-map{border-top:1px solid var(--rule);padding-top:22px}
@media (max-width:760px){.foot-map{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.foot-map{grid-template-columns:1fr}}
.foot-h{font:600 12px/1.3 var(--body);color:var(--ink);margin:0 0 10px;letter-spacing:-.005em}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.foot-col a{color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.foot-col address{font-style:normal;color:var(--muted);display:grid;gap:8px}
.foot-col address a{color:var(--ink-2)}

/* ---------- Top bar: Track order (quiet outline beside the primary Book pill) ---------- */
.nav-track{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;border:1px solid rgba(110,118,135,.34);border-color:color-mix(in srgb,var(--ink) 20%,transparent);font:500 13px/1.2 var(--body);letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.nav-track svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-track:hover,.nav-track[aria-current="page"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.nav-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:440px){.nav-right{gap:10px}.nav-track{padding:6px 8px}.nav-track span{display:none}}
/* Smallest phones (320px class): brand, theme, track icon and Book pill share one row without touching */
@media (max-width:350px){.nav-in{gap:8px}.nav-right{gap:6px}.brand{gap:6px}.brand .mark{height:26px}.brand .word{height:18px}.theme{width:26px}.nav-right .pill.sm{padding:7px 10px}.nav-track{padding:6px 7px}}
/* Tablet widths: brand, the home links, theme, Track order and Book need ~975px in one row.
   Below 920px the links hide, as they already do on phones; between 920 and 999px Track order shows just its icon. */
@media (min-width:920px) and (max-width:999px){.nav-track{padding:6px 8px}.nav-track span{display:none}}
@media (max-width:919px){.nav-links,.nav-ind{display:none}}

/* ---------- Device customiser: "None" beside the Screen / Bezel / Cover tabs resets bezel and cover ---------- */
.cfg-head{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.cfg-reset{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--muted-on-black);font:500 13px/1 var(--body);padding:10px 14px;border-radius:999px;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.cfg-reset svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfg-reset:hover{color:var(--on-black);border-color:rgba(255,255,255,.34)}
.cfg-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Device render to match the CAD reference: wider bezel, black surround round the display, camera + sensor in the top bezel ---------- */
.device,.device.bz-ring{padding:9%}  /* bezel 9% of the diameter; the screen meets it directly (the 3% black surround ring was removed, user 2026-11-04) */
.dev-cam{position:absolute;top:2.25%;left:50%;width:4.5%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:1;background:radial-gradient(circle at 38% 32%,#9ca1ab,#4a4d55 55%,#26282d 100%);box-shadow:0 1px 1px rgba(255,255,255,.12),inset 0 -1px 2px rgba(0,0,0,.55)}
.dev-cam::before{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle at 36% 32%,rgba(205,215,255,.85) 0 7%,transparent 18%),radial-gradient(circle at 50% 50%,#4b4fae 0,#2a2d78 42%,#0d0e26 78%,#06070f 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.dev-cam::after{content:"";position:absolute;width:40%;aspect-ratio:1;left:230%;top:63%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3c3f46,#0b0b0d 72%);box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.07)}

/* ---------- Doorbell demo: hotspot over the bell on the home screen; a phone pops up beside the device with the alert ---------- */
.ring-btn{position:absolute;left:50.2%;top:79.9%;width:10.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.ring-btn::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;box-shadow:0 0 0 0 rgba(79,134,255,.7)}
.ring-btn.hint::before{animation:ringHint 2.2s ease-out infinite}
.ring-btn.rung::before{animation:ringPulse .9s ease-out 2}
@keyframes ringHint{0%{opacity:.9;box-shadow:0 0 0 0 rgba(79,134,255,.7)}100%{opacity:0;box-shadow:0 0 0 14px rgba(79,134,255,0)}}
@keyframes ringPulse{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.85)}100%{opacity:0;box-shadow:0 0 0 20px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.ring-btn.hint::before{animation:none;opacity:.7;box-shadow:0 0 0 3px rgba(79,134,255,.6)}}
.ring-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ring-phone{position:absolute;left:calc(100% + 28px);top:50%;width:150px;aspect-ratio:9/19;margin-top:-158px;z-index:3;border-radius:22px;padding:6px;background:linear-gradient(160deg,#3a3c43,#121317);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 50px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6);transform-origin:left center;transform:perspective(800px) rotateY(-26deg) translateX(40px);opacity:0;transition:transform .55s var(--ease),opacity .4s ease}
.ring-phone.in{opacity:1;transform:perspective(800px) rotateY(-16deg)}
.ring-phone[hidden]{display:none}
.rp-screen{position:relative;height:100%;border-radius:17px;overflow:hidden;background:radial-gradient(120% 70% at 30% 0%,#2a4f9c,#0b1020 60%,#05060c);color:#fff;font:400 10px/1.3 var(--body);padding:9px 9px}
.rp-screen::before{content:"";position:absolute;left:50%;top:6px;width:34%;height:8px;border-radius:999px;background:#000;transform:translateX(-50%)}
.rp-status{display:flex;justify-content:space-between;align-items:center;font:600 8px/1 var(--body);opacity:.9}
.rp-batt{width:14px;height:7px;border-radius:2px;border:1px solid rgba(255,255,255,.7);position:relative}
.rp-batt::after{content:"";position:absolute;inset:1px;right:3px;background:#34d399;border-radius:1px}
.rp-clock{font:600 30px/1 var(--display);letter-spacing:-.03em;text-align:center;margin-top:24px}
.rp-date{text-align:center;font-size:8.5px;opacity:.75;margin-top:4px}
.rp-card{margin-top:22px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 9px;display:grid;gap:3px;transform:translateY(-12px);opacity:0;transition:transform .5s var(--ease) .25s,opacity .4s ease .25s}
.ring-phone.in .rp-card{transform:none;opacity:1}
.rp-head{display:flex;align-items:center;gap:5px;font:600 8.5px/1 var(--body);opacity:.95}
.rp-head img{width:10px;height:12px;display:block}
.rp-head span{margin-left:auto;font-weight:400;opacity:.7}
.rp-card strong{font:600 10.5px/1.25 var(--body);letter-spacing:-.01em}
.rp-card p{font-size:8.5px;opacity:.8}
.rp-acts{display:flex;gap:5px;margin-top:4px}
.rp-acts span{flex:1;text-align:center;font:600 8.5px/1 var(--body);padding:6px 0;border-radius:8px;background:rgba(255,255,255,.14)}
.rp-acts span.on{background:var(--accent)}
@media (max-width:640px){.ring-phone{left:auto;right:-14%;top:auto;bottom:-6%;margin:0;width:114px;transform-origin:center bottom}}

/* ---------- Ring screen: replaces the home screen for 2 s when the bell is pressed (opaque; sizes in cqw so it scales with the screen) ---------- */
.screen{container-type:inline-size}
.ring-screen{position:absolute;inset:0;border-radius:50%;z-index:3;background:#0a0a0c;color:#fff;text-align:center;opacity:0;transition:opacity .35s ease;pointer-events:none}
.ring-screen.on{opacity:1}
.ring-screen>*{position:absolute;left:50%;transform:translateX(-50%)}
/* Ring screen, spacious (user, 2026-11-03): four zones down the round screen, logo on its own with clear space, smaller bell */
.rs-wifi{top:4.5%;width:4.2cqw;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#2ecc71}
.rs-wifi svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.rs-x{left:auto;right:19%;top:17%;transform:none;width:4.2cqw;aspect-ratio:1;border-radius:50%;background:rgba(255,59,59,.9);display:grid;place-items:center}
.rs-x svg{width:46%;height:46%;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round}
.rs-brand{top:11%;display:block;filter:drop-shadow(0 0 2.2cqw rgba(79,134,255,.45))}
.rs-brand img{display:block;width:auto;height:15cqw}  /* the white stacked logo (mark over name) supplied by Dvaari */
.rs-welcome{top:33.5%;width:76%;display:grid;gap:.6cqw;margin:0}
.rs-welcome span{font:400 3.4cqw/1.2 var(--body);letter-spacing:.02em;color:rgba(255,255,255,.62)}
.rs-welcome b{font:600 5.4cqw/1.2 var(--display);letter-spacing:-.015em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-bell{top:63.5%;transform:translate(-50%,-50%);width:25cqw;aspect-ratio:1;border-radius:50%;background:#16171b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);display:grid;place-items:center}
.rs-bell::before{content:"";position:absolute;inset:-12%;border-radius:50%;border:1px solid rgba(79,134,255,.35)}
.rs-bell::after{content:"";position:absolute;inset:16%;border-radius:50%;background:#2362eb;box-shadow:0 0 4cqw rgba(35,98,235,.6)}
.rs-bell svg{position:relative;z-index:1;width:8cqw;height:8cqw;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ring-screen.on .rs-bell::before{animation:rsRing 1s ease-out infinite}
@keyframes rsRing{from{transform:scale(.9);opacity:1}to{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.ring-screen.on .rs-bell::before{animation:none}}
.rs-count{top:84.5%;display:inline-flex;align-items:center;gap:1.6cqw;padding:1.3cqw 3.4cqw;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font:400 3.1cqw/1.2 var(--body);color:rgba(255,255,255,.75);white-space:nowrap}
.rs-count b{font-weight:700;color:#fff}

/* ---------- "Press the doorbell" cue: arrow + label pointing at the bell on the home screen until the first ring ---------- */
.ring-cue{position:absolute;left:57.6%;top:84%;z-index:4;display:flex;align-items:flex-start;gap:4px;pointer-events:none;color:#fff;animation:cueNudge 1.1s ease-in-out infinite alternate}
.ring-cue svg{width:22px;height:22px;flex:none;stroke:var(--accent);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.ring-cue span{margin-top:10px;padding:6px 11px;border-radius:999px;background:var(--accent);color:#fff;font:600 12px/1.2 var(--body);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(35,98,235,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.ring-cue[hidden]{display:none}
@keyframes cueNudge{from{transform:translate(0,0)}to{transform:translate(-5px,-5px)}}
@media (prefers-reduced-motion:reduce){.ring-cue{animation:none}}
@media (max-width:640px){.ring-cue svg{width:18px;height:18px}.ring-cue span{font-size:11px;padding:5px 9px;margin-top:8px}}

/* Phone mockup screen = the real app screenshot (324x702, fills the 9:19 screen) */
.ring-phone{aspect-ratio:324/702;margin-top:-163px}
.rp-screen{padding:0;background:#f4f5f8}
.rp-screen::before{display:none}
.rp-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* "None" moved to the foot of the customiser card: a quiet outline button under the open pane */
.bezel-ui > .cfg-reset{margin-top:-2px;padding:8px 14px}

/* "None" turns red while a bezel design, finish or cover is applied; neutral outline when the device is at its defaults */
.cfg-reset[data-bezel="1"],.cfg-reset[data-cover="1"]{color:#fff;background:var(--err);border-color:transparent;box-shadow:0 8px 18px -8px rgba(215,38,61,.7)}
.cfg-reset[data-bezel="1"]:hover,.cfg-reset[data-cover="1"]:hover{color:#fff;background:#c01f33;border-color:transparent}

/* ---------- Hero scene: device in the middle, frosted feature cards popping out a group at a time ---------- */
.hero-stage{position:relative;isolation:isolate;cursor:pointer;--hcb:rgba(255,255,255,.34);--hcl:rgba(255,255,255,.8);--hch:rgba(255,255,255,.95)}
:root[data-dv-theme="dark"] .hero-stage{--hcb:rgba(40,42,48,.42);--hcl:rgba(255,255,255,.16);--hch:rgba(255,255,255,.22)}
/* Colour behind the glass, so the frosting has something to blur */
.hero-stage::before{content:"";position:absolute;inset:-6%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 22% 26%,rgba(35,98,235,.26),transparent),radial-gradient(closest-side at 80% 24%,rgba(52,211,153,.2),transparent),radial-gradient(closest-side at 20% 78%,rgba(255,154,60,.18),transparent),radial-gradient(closest-side at 80% 78%,rgba(99,150,255,.28),transparent)}  /* closest-side: each glow fades to nothing before the layer edge, so no rectangle shows */
.orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dotted rgba(35,98,235,.28);pointer-events:none;aspect-ratio:1}
.orbit.o1{width:46%}.orbit.o2{width:66%;border-color:rgba(35,98,235,.2)}.orbit.o3{width:88%;border-color:rgba(35,98,235,.12)}
.orbit::before,.orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.orbit::before{left:14%;top:14%}.orbit::after{right:14%;bottom:14%}
.hero-dev{position:absolute;left:50%;top:50%;width:33%;transform:translate(-50%,-50%);z-index:1}
.hero-dev .device{width:100%;transition:--bz1 .8s ease,--bz2 .8s ease,--bzr .8s ease}  /* the wrapper gives the device % padding its own width to resolve against */
.hero-dev .screen{container-type:inline-size}
.hero-dev .scr-img{transition:opacity .8s var(--ease)}
/* The device reacts to the group on show: set 1 shows the family nameplate, set 2 wears the Midnight finish with the accent ring */
.hero-stage.set-1 .hs-0{opacity:0;z-index:0}.hero-stage.set-1 .hs-1{opacity:1;z-index:1}
.hero-stage.set-2 .device{--bz1:#2f55b8;--bz2:#0d1b45;--bzr:#7ea6ff;padding:9%}
@media (prefers-reduced-motion:no-preference){.hero-dev{animation:heroDev 1s .15s var(--ease) backwards}}
@keyframes heroDev{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%)}}
.hc-dots{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.hc-dots i{width:6px;height:6px;border-radius:999px;background:var(--rule);transition:width .3s var(--ease),background .2s ease}
.hc-dots i.on{width:18px;background:var(--accent)}
/* Cards: real frosted glass. Tucked toward the device until their group is .show; then they pop out and float */
.hc{position:absolute;left:var(--x);top:var(--y);z-index:2;text-align:left;color:var(--ink);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--hcb);-webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.06);backdrop-filter:blur(26px) saturate(190%) brightness(1.06);border:1px solid var(--hcl);box-shadow:0 24px 50px -22px rgba(11,25,48,.4),0 2px 6px -2px rgba(11,25,48,.12),inset 0 1px 0 var(--hch),inset 0 -1px 0 rgba(255,255,255,.25),inset 1px 0 0 rgba(255,255,255,.35);opacity:0;transform:translate(var(--fx),var(--fy)) scale(.4);pointer-events:none;transition:opacity .45s ease,transform .75s var(--ease);transition-delay:0s;overflow:hidden}
.hc::after{content:"";position:absolute;left:-40%;top:-120%;width:60%;height:300%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:rotate(12deg);pointer-events:none}  /* a soft sheen across the glass */
:root[data-dv-theme="dark"] .hc::after{opacity:.35}
.hc.show{opacity:1;transform:none;transition-delay:var(--d)}
@media (prefers-reduced-motion:no-preference){.hc.show{animation:hcFloat 6s ease-in-out infinite alternate;animation-delay:calc(var(--d) + 1s)}}
@keyframes hcFloat{from{translate:0 0}to{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){.hc{transition:none}}
/* Slots around the device (desktop); --fx/--fy is the direction each card comes from */
.s-tl{--x:2%;--y:7%;--w:25%;--fx:60%;--fy:60%}
.s-tr{--x:77%;--y:6%;--w:20%;--fx:-60%;--fy:60%}
.s-r{--x:73%;--y:10%;--w:26%;--fx:-80%;--fy:0}
.s-bl{--x:3%;--y:58%;--w:27%;--fx:60%;--fy:-80%}
.s-br{--x:68%;--y:70%;--w:21%;--fx:-60%;--fy:-80%}
.s-br strong,.s-br p,.hc-nfc p{white-space:nowrap}
.s-br strong{font-size:clamp(10.5px,1.3vw,15px)}
.s-pt{--x:50%;--y:1%;--fx:-50%;--fy:140%;transform:translate(calc(-50% + var(--fx)),var(--fy)) scale(.4)}
.s-pb{--x:50%;--y:90%;--fx:-50%;--fy:-160%;transform:translate(calc(-50% + var(--fx)),var(--fy)) scale(.4)}
.s-pt.show,.s-pb.show{transform:translateX(-50%)}
.hc-card{width:var(--w);padding:clamp(8px,1.4vw,16px) clamp(9px,1.5vw,18px);border-radius:clamp(12px,1.6vw,20px);display:grid;gap:clamp(3px,.5vw,6px);align-content:start;justify-items:start}
.hc-card > *{max-width:100%}
.hc-acts,.hc-ctl,.hc-digits,.hc-sw,.hc-row,.hc-head,.hc-upi,.hc-name,.hc-feed{width:100%}
.hc-pill{display:inline-flex;align-items:center;gap:8px;padding:clamp(5px,.8vw,10px) clamp(10px,1.4vw,16px) clamp(5px,.8vw,10px) clamp(6px,.8vw,9px);border-radius:999px;font:600 clamp(10px,1.25vw,14px)/1.2 var(--body);letter-spacing:-.01em;white-space:nowrap}
.hc-pill i{width:clamp(18px,2.4vw,28px);aspect-ratio:1;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.hc-pill svg,.hc-app svg,.hc-ctl svg{width:55%;height:55%;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hc small{font:600 clamp(8.5px,1vw,11px)/1.2 var(--body);color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.hc p{font:400 clamp(9px,1.05vw,12px)/1.3 var(--body);color:var(--ink-2)}
.hc p b{color:var(--ink);font-weight:600}
.hc strong{font:600 clamp(11px,1.45vw,16px)/1.2 var(--display);letter-spacing:-.015em}
.hc-head{display:flex;align-items:center;gap:6px;font:600 clamp(9px,1.05vw,12px)/1 var(--body)}
.hc-head span:last-child{margin-left:auto;font-weight:400;color:var(--ink-2)}
.hc-app{width:clamp(16px,2vw,24px);aspect-ratio:1;border-radius:30%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 clamp(9px,1.1vw,13px)/1 var(--display)}
.hc-app.g{background:var(--green)}
.hc-acts{display:flex;gap:6px;margin-top:2px}
.hc-acts span,.hc-upi{flex:1;text-align:center;font:600 clamp(9px,1.05vw,12px)/1 var(--body);padding:clamp(5px,.7vw,8px) 0;border-radius:999px;background:rgba(11,25,48,.09);box-shadow:inset 0 0 0 1px rgba(11,25,48,.08);color:var(--ink)}
:root[data-dv-theme="dark"] .hc-acts span{background:rgba(255,255,255,.14);box-shadow:none}
.hc-acts span.ok,.hc-upi{background:var(--green);color:#fff}
.hc-digits{display:flex;gap:clamp(4px,.6vw,8px)}
.hc-digits b{flex:1;text-align:center;font:600 clamp(14px,2vw,24px)/1.5 var(--display);color:var(--accent);background:rgba(255,255,255,.5);border-radius:clamp(6px,.8vw,10px);box-shadow:inset 0 0 0 1px rgba(35,98,235,.18)}
:root[data-dv-theme="dark"] .hc-digits b{background:rgba(79,134,255,.18)}
.hc-nfc,.hc-plate{text-align:center;justify-items:center}
.hc-cardtile{position:relative;width:78%;aspect-ratio:1.6;border-radius:clamp(8px,1vw,12px);padding:8% 9%;display:flex;align-items:flex-start;gap:5px;color:#fff;background:linear-gradient(135deg,#1d2b4d,#0b1020 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(11,25,48,.6);overflow:hidden}
.hc-cardtile img{width:auto;height:22%;display:block}
.hc-cardtile b{font:600 clamp(9px,1.05vw,12px)/1 var(--display);margin-top:2px}
.hc-cardtile svg{position:absolute;right:9%;top:10%;width:18%;height:18%;stroke:#9ec0ff;fill:none;stroke-width:2;stroke-linecap:round}
.hc-nfc .hc-tag{margin-top:2px}
.hc-tag{display:inline-block;justify-self:center;padding:4px 10px;border-radius:999px;background:rgba(34,181,115,.16);color:#0f7a4a;font-weight:600}
:root[data-dv-theme="dark"] .hc-tag{color:var(--green)}
.hc-row{display:flex;align-items:center;gap:clamp(7px,.9vw,11px);padding:clamp(7px,1vw,12px) 0;border-top:1px solid rgba(255,255,255,.45)}
:root[data-dv-theme="dark"] .hc-row{border-top-color:rgba(255,255,255,.1)}
.hc-row:nth-of-type(1){border-top:0}
.hc-row:last-child{padding-bottom:clamp(2px,.4vw,4px)}
.hc-list{padding:clamp(12px,1.9vw,22px) clamp(12px,1.9vw,22px) clamp(10px,1.6vw,18px);gap:clamp(2px,.4vw,4px)}
.hc-list small{margin-bottom:clamp(4px,.7vw,8px)}
.hc-list .hc-row{padding:clamp(9px,1.2vw,14px) 0}
.hc-list .hc-row span{gap:2px}
.hc-row em{margin-left:clamp(10px,1.2vw,16px)}
.hc-row i{width:clamp(14px,1.8vw,22px);aspect-ratio:1;border-radius:50%;background:var(--c);flex:none}
.hc-row span{display:grid;flex:1;font:400 clamp(8px,.9vw,10.5px)/1.3 var(--body);color:var(--ink-2);min-width:0;white-space:normal}  /* the time line may wrap; it must never be clipped */
.hc-row span b{font-weight:600;color:var(--ink);font-size:clamp(9px,1.05vw,12px)}
.hc-row em{margin-left:auto;flex:none;font:600 clamp(7.5px,.85vw,10px)/1 var(--body);font-style:normal;padding:3px 6px;border-radius:999px;background:rgba(35,98,235,.14);color:var(--accent);white-space:nowrap}
.hc-row em.ok{background:rgba(34,181,115,.16);color:#0f7a4a}
:root[data-dv-theme="dark"] .hc-row em.ok{color:var(--green)}
.hc-cod strong{font-size:clamp(16px,2.4vw,28px);letter-spacing:-.03em}
/* Live feed: a night-time doorstep frame with the visitor, LIVE badge, timer and call controls */
.hc-feed{position:relative;aspect-ratio:16/10;border-radius:clamp(8px,1vw,12px);overflow:hidden;background:radial-gradient(70% 60% at 50% 100%,#2b3550,#121622 75%),#121622}
.hc-rider{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 40%}
.hc-feed em,.hc-feed u{position:absolute;top:7px;font:700 clamp(7px,.8vw,9px)/1 var(--body);font-style:normal;text-decoration:none;color:#fff;background:rgba(0,0,0,.5);padding:3px 6px;border-radius:999px;z-index:2}
.hc-feed em{left:7px;color:#ff6b7a}.hc-feed u{right:7px;font-weight:500}
.hc-ctl{display:flex;align-items:center;gap:6px;margin-top:2px}
.hc-ctl span{width:clamp(20px,2.4vw,28px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;flex:none}
.hc-ctl span svg{stroke:var(--ink)}
.hc-ctl .ans{flex:1;aspect-ratio:auto;border-radius:999px;background:var(--green);color:#fff;font:600 clamp(9px,1.05vw,12px)/1 var(--body);padding:clamp(5px,.7vw,8px) 0}
.hc-ctl .end{background:var(--err)}.hc-ctl .end svg{stroke:#fff}
.hc-name{display:grid;justify-items:center;gap:2px;padding:clamp(6px,.9vw,10px);border-radius:clamp(8px,1vw,12px);background:#0b0b0d;color:#fff}
.hc-name span{font:400 clamp(8px,.95vw,11px)/1 var(--body);opacity:.8}
.hc-name b{font:600 clamp(11px,1.4vw,16px)/1.2 var(--display);letter-spacing:-.01em}
.hc-sw{display:flex;gap:clamp(5px,.7vw,9px);padding:2px 0}
.hc-sw i{width:clamp(16px,2.2vw,26px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 24%,var(--c1),var(--c2) 72%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.08)}
.hc-sw i.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}
@media (max-width:640px){  /* phone: four corner slots; each group leaves one corner free for its pill */
  .hero-dev{width:42%}
  .s-tl{--x:2%;--y:3%;--w:54%}
  .s-tr,.s-r{--x:58%;--y:5%;--w:40%}
  .s-bl{--x:2%;--y:70%;--w:46%}
  .s-br{--x:52%;--y:70%;--w:46%}
  .s-pt{--x:2%;--y:72%;--fx:40%;--fy:-80%;transform:translate(var(--fx),var(--fy)) scale(.4)}
  .s-pb{--x:52%;--y:72%;--fx:-40%;--fy:-80%;transform:translate(var(--fx),var(--fy)) scale(.4)}
  .s-pt.show,.s-pb.show{transform:none}
  .hc-pill{font-size:11px;max-width:46%;white-space:normal;text-align:left;line-height:1.15}
  .hc-row em{display:none}
  .hc-row span b{white-space:normal}
  .hc-dots{bottom:-14px}
  .hc-list{padding:12px 12px 10px}
  .hc-list .hc-row{padding:7px 0}
}
@media (max-width:360px){.hero-ph.hero-stage{aspect-ratio:5/7}}  /* the smallest phones: a taller scene so the bottom cards stay inside it */

/* ---------- Features (original slider): bolder type, and a small animated scene in each tile ---------- */
.feat-h2{font-size:clamp(36px,5.6vw,64px);letter-spacing:-.035em;font-weight:800}
.tile{min-height:440px;grid-template-rows:auto auto auto 1fr}
.tile .label{font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tile .h3{font:800 clamp(22px,2.3vw,26px)/1.15 var(--display);letter-spacing:-.03em;color:var(--ink)}
.tile p{font-size:15.5px;color:var(--ink-2)}
/* The graphic: a fixed 5:4 box at the foot of each tile. It is a size container, so every scene is laid out in cqw/em of the box and cannot spill over */
.tile-fx{position:relative;isolation:isolate;align-self:end;width:100%;aspect-ratio:5/4;margin-top:16px;border-radius:18px;overflow:hidden;container-type:inline-size;background:radial-gradient(closest-side at 22% 22%,rgba(35,98,235,.2),transparent),radial-gradient(closest-side at 82% 82%,rgba(99,150,255,.22),transparent),radial-gradient(closest-side at 84% 18%,rgba(52,211,153,.14),transparent),rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
:root[data-dv-theme="dark"] .tile-fx{background:radial-gradient(closest-side at 22% 22%,rgba(35,98,235,.32),transparent),radial-gradient(closest-side at 82% 82%,rgba(99,150,255,.24),transparent),#121316;border-color:rgba(255,255,255,.08);box-shadow:none}
.sc{position:absolute;inset:0;font-size:5cqw;color:var(--ink)}
/* shared parts */
.sc .mc{position:absolute;display:grid;gap:.5em;padding:.9em 1em;border-radius:1em;text-align:left;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(255,255,255,.95);box-shadow:0 1.4em 2.6em -1.3em rgba(11,25,48,.42),inset 0 1px 0 #fff}
:root[data-dv-theme="dark"] .sc .mc{background:rgba(44,46,52,.74);border-color:rgba(255,255,255,.12);box-shadow:0 1.4em 2.6em -1.3em rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14)}
.sc .lbl{font:600 .74em/1.2 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.sc .ttl{font:700 1.05em/1.2 var(--display);letter-spacing:-.02em}
.sc .meta{font:400 .8em/1.3 var(--body);color:var(--muted)}
.sc .hd{display:flex;align-items:center;gap:.5em;font:600 .82em/1.1 var(--body)}
.sc .hd .meta,.sc .hd .chip{margin-left:auto}
.sc .btn{display:grid;place-items:center;padding:.62em 0;border-radius:999px;font:600 .8em/1 var(--body);background:rgba(11,25,48,.08);color:var(--ink)}
:root[data-dv-theme="dark"] .sc .btn{background:rgba(255,255,255,.12)}
:root[data-dv-theme="dark"] .sc .btn.ok{background:var(--green);color:#fff}
.sc .btn.ok{background:var(--green);color:#fff}
.sc .row2{display:grid;grid-template-columns:1fr 1fr;gap:.45em}
.sc .chip{display:inline-flex;align-items:center;gap:.35em;padding:.4em .7em;border-radius:999px;font:600 .74em/1 var(--body);background:rgba(34,181,115,.16);color:#0f7a4a;white-space:nowrap;text-decoration:none}
:root[data-dv-theme="dark"] .sc .chip{color:var(--green)}
.sc .chip.b{background:rgba(35,98,235,.13);color:var(--accent)}
.sc .chip.r{background:rgba(215,38,61,.12);color:var(--err)}
.sc .dot{width:.55em;height:.55em;border-radius:50%;background:currentColor;display:inline-block;animation:scBlink 1.2s steps(2) infinite}
@keyframes scBlink{to{opacity:.3}}
.sc .ic{width:1.7em;height:1.7em;border-radius:.5em;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 .9em/1 var(--display);flex:none}
.sc svg.i{width:1.05em;height:1.05em;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sc .ic svg.i{width:1em;height:1em}
/* the mini Dvaari device: bezel, camera and a round screen showing a real home screen */
@property --f1{syntax:'<color>';inherits:true;initial-value:#3a3b40}
@property --f2{syntax:'<color>';inherits:true;initial-value:#0b0b0d}
.sc .md{position:absolute;width:var(--s);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 24%,var(--f1),var(--f2) 72%);box-shadow:0 1.5em 2.4em -1.1em rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.3),0 0 0 1px rgba(0,0,0,.25);display:grid;place-items:center}
/* same geometry as the main device: 9% bezel, 3% black surround, camera centred in the bezel band, sensor dot to its right */
.sc .md::before{content:"";position:absolute;top:2.25%;left:50%;width:4.5%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);z-index:1;background:radial-gradient(circle at 42% 38%,#8c94f0 0 8%,#2a2d78 22%,#0d0e26 44%,#3a3d44 54%,#9ca1ab 70%,#4a4d55 86%,#26282d 100%)}
.sc .md::after{content:"";position:absolute;top:5.1%;left:58.1%;width:1.8%;aspect-ratio:1;border-radius:50%;z-index:1;background:radial-gradient(circle at 40% 35%,#3c3f46,#0b0b0d 72%);box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.sc .ms{position:relative;width:82%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#05060a}  /* meets the 9% bezel, no black ring */
.sc .ms img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* row lists (visitors, attendance) */
.sc .vr,.sc .ar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65em;padding:.55em 0;border-top:1px solid rgba(11,25,48,.07)}
:root[data-dv-theme="dark"] .sc .vr,:root[data-dv-theme="dark"] .sc .ar{border-top-color:rgba(255,255,255,.08)}
.sc .lbl + .vr,.sc .hd + .ar{border-top:0}
.sc .vr > i,.sc .ar > i,.sc .av{width:2.1em;height:2.1em;border-radius:50%;background:var(--c,#34d399);color:#fff;display:grid;place-items:center;font:700 .78em/1 var(--display);font-style:normal;flex:none}
.sc .vr span,.sc .ar span,.sc .who{display:grid;min-width:0}
.sc .vr b,.sc .ar b,.sc .who b{font:600 .84em/1.25 var(--body);white-space:nowrap}
.sc .vr em,.sc .ar em,.sc .who em{font:400 .76em/1.3 var(--body);color:var(--muted);font-style:normal;white-space:nowrap}
/* 01 Video doorbell */
.s01 .pulse{position:absolute;left:8cqw;top:10cqw;width:44cqw;aspect-ratio:1;border-radius:50%;border:2px solid rgba(35,98,235,.45);animation:scPulse 2.4s ease-out infinite}
.s01 .p2{animation-delay:1.2s}
@keyframes scPulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.5);opacity:0}}
.s01 .notif{right:5cqw;bottom:7cqw;width:57cqw;animation:scSlide 6s var(--ease) infinite both}
@keyframes scSlide{0%{opacity:0;transform:translateX(18%)}10%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateX(18%)}}
.s01 .btn.ok{animation:scPress 6s ease-in-out infinite}
@keyframes scPress{0%,52%,68%,100%{transform:none;box-shadow:none}58%{transform:scale(.92);box-shadow:0 0 0 .4em rgba(34,181,115,.25)}}
/* 02 Visitor management */
.s02 .list{left:7cqw;right:7cqw;top:50%;transform:translateY(-50%)}
.s02 .vr{animation:scRow 6s var(--ease) infinite both;animation-delay:calc(var(--k)*.45s)}
@keyframes scRow{0%{opacity:0;transform:translateY(.6em)}9%,90%{opacity:1;transform:none}100%{opacity:0}}
/* 03 Cash on delivery */
.s03 .pay{left:13cqw;right:13cqw;top:50%;transform:translateY(-50%);gap:.6em}
.s03 .amt{font:800 2.1em/1 var(--display);letter-spacing:-.03em}
.s03 .paybtn{position:relative;height:2.6em}
.s03 .paybtn span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4em;border-radius:999px;font:600 .86em/1 var(--body);color:#fff}
.s03 .paybtn .a{background:var(--accent);animation:s03a 6s ease infinite}
.s03 .paybtn .w{background:var(--accent-2);opacity:0;animation:s03w 6s ease infinite}
.s03 .paybtn .b{background:var(--green);opacity:0;animation:s03b 6s ease infinite}
.s03 .paybtn .w i{width:1em;height:1em;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:scSpin .8s linear infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
@keyframes s03a{0%,34%{opacity:1}38%,96%{opacity:0}100%{opacity:1}}
@keyframes s03w{0%,34%{opacity:0}38%,54%{opacity:1}58%,100%{opacity:0}}
@keyframes s03b{0%,54%{opacity:0;transform:scale(.96)}58%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
/* 04 Automated wake-up */
.s04 .sleep{position:absolute;inset:0;background:#05060a;animation:s04sleep 6s ease infinite}
@keyframes s04sleep{0%,38%{opacity:1}50%,88%{opacity:0}96%,100%{opacity:1}}
.s04 .walker{position:absolute;left:4cqw;top:28cqw;width:15cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:rgba(255,255,255,.85);box-shadow:0 1em 1.8em -1em rgba(11,25,48,.45);font-size:6cqw;animation:s04walk 6s var(--ease) infinite}
:root[data-dv-theme="dark"] .s04 .walker{background:rgba(44,46,52,.85)}
@keyframes s04walk{0%{transform:translateX(-30%);opacity:0}8%{opacity:1}40%,88%{transform:translateX(130%);opacity:1}100%{transform:translateX(130%);opacity:0}}
.s04 .wave{position:absolute;left:46cqw;top:12cqw;width:46cqw;aspect-ratio:1;border-radius:50%;border:2px solid rgba(35,98,235,.5);opacity:0;animation:s04wave 6s ease-out infinite}
.s04 .w2{animation-delay:.35s}
@keyframes s04wave{0%,30%{opacity:0;transform:scale(1)}36%{opacity:.9;transform:scale(1)}56%,100%{opacity:0;transform:scale(1.35)}}
.s04 .tag{position:absolute;left:50%;bottom:6cqw;transform:translateX(-50%);opacity:0;animation:s04tag 6s ease infinite}
@keyframes s04tag{0%,46%{opacity:0;transform:translate(-50%,.5em)}54%,88%{opacity:1;transform:translate(-50%,0)}96%,100%{opacity:0}}
/* 05 Live feed */
.s05 .live{left:10cqw;right:10cqw;top:50%;transform:translateY(-50%);gap:.55em;padding:.8em .85em}
.s05 .feed{position:relative;aspect-ratio:16/9;border-radius:.7em;overflow:hidden;background:#121622}
.s05 .feed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.s05 .feed u{position:absolute;right:.5em;bottom:.5em;padding:.25em .5em;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 .66em/1 var(--mono);text-decoration:none;display:inline-flex}
.s05 .sec::after{content:"2";animation:scSec 10s steps(10) infinite}
@keyframes scSec{0%{content:"0"}10%{content:"1"}20%{content:"2"}30%{content:"3"}40%{content:"4"}50%{content:"5"}60%{content:"6"}70%{content:"7"}80%{content:"8"}90%{content:"9"}}
.s05 .scan{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.55);box-shadow:0 0 10px rgba(255,255,255,.8);animation:s05scan 3s linear infinite}
@keyframes s05scan{from{transform:translateY(0)}to{transform:translateY(40cqw)}}
.s05 .ctl{display:grid;grid-template-columns:auto 1fr auto;gap:.45em;align-items:center}
.s05 .ctl .c{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:rgba(11,25,48,.08);color:var(--ink)}
:root[data-dv-theme="dark"] .s05 .ctl .c{background:rgba(255,255,255,.12)}
:root[data-dv-theme="dark"] .s05 .ctl .end{background:var(--err);color:#fff}
.s05 .ctl .end{background:var(--err);color:#fff}
/* 06 Hassle-free delivery */
.s06 .nfc{position:absolute;left:5cqw;top:24cqw;width:38cqw;aspect-ratio:1.58;border-radius:.8em;padding:.7em .8em;display:flex;align-items:flex-start;gap:.35em;color:#fff;font-size:.86em;background:linear-gradient(135deg,#21325a,#0b1020 70%);box-shadow:0 1.2em 2em -1em rgba(11,25,48,.7),inset 0 1px 0 rgba(255,255,255,.2);animation:s06tap 5s var(--ease) infinite}
.s06 .nfc img{height:1.25em;width:auto}
.s06 .nfc b{font:600 .95em/1.2 var(--display)}
.s06 .nfc svg.i{position:absolute;right:.7em;top:.7em;color:#9ec0ff}
@keyframes s06tap{0%,18%{transform:rotate(-9deg)}42%,70%{transform:translateX(26cqw) rotate(0)}92%,100%{transform:rotate(-9deg)}}
.s06 .ripple{position:absolute;left:50cqw;top:8cqw;width:44cqw;aspect-ratio:1;border-radius:50%;border:2px solid rgba(52,211,153,.6);opacity:0;animation:s06rip 5s ease-out infinite}
.s06 .r2{animation-delay:.3s}
@keyframes s06rip{0%,40%{opacity:0;transform:scale(1)}44%{opacity:.9}64%,100%{opacity:0;transform:scale(1.35)}}
.s06 .tag{position:absolute;left:50%;bottom:6cqw;transform:translateX(-50%);opacity:0;animation:s06tag 5s ease infinite}
@keyframes s06tag{0%,44%{opacity:0;transform:translate(-50%,.5em)}52%,88%{opacity:1;transform:translate(-50%,0)}96%,100%{opacity:0}}
/* 07 Digital nameplate */
.s07 .ms img.n2{opacity:0;animation:s07n2 9s ease infinite}
.s07 .ms img.n3{opacity:0;animation:s07n3 9s ease infinite}
@keyframes s07n2{0%,30%{opacity:0}36%,64%{opacity:1}70%,100%{opacity:0}}
@keyframes s07n3{0%,64%{opacity:0}70%,94%{opacity:1}100%{opacity:0}}
.s07 .dots{position:absolute;left:50%;bottom:5cqw;transform:translateX(-50%);display:flex;gap:.45em}
.s07 .dots i{width:.5em;height:.5em;border-radius:999px;background:rgba(11,25,48,.2);animation:s07dot 9s steps(1) infinite}
.s07 .dots i:nth-child(2){animation-delay:-6s}.s07 .dots i:nth-child(3){animation-delay:-3s}
@keyframes s07dot{0%{width:1.4em;background:var(--accent)}33.3%,100%{width:.5em;background:rgba(11,25,48,.2)}}
/* 08 Multilingual */
.s08 .bubble{right:6cqw;top:12cqw;width:52cqw;height:30cqw;padding:0;display:block}
.s08 .bubble::before{content:"";position:absolute;left:-1.1em;bottom:2.2em;width:1.3em;height:1.3em;background:inherit;border-left:inherit;border-bottom:inherit;transform:rotate(45deg);border-radius:0 0 0 .3em;clip-path:polygon(0 0,0 100%,100% 100%)}
.s08 .g{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.2em;opacity:0;animation:s08g 8s ease infinite both;animation-delay:calc(var(--k)*2s)}
.s08 .g b{font:800 1.75em/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.s08 .g em{font:600 .68em/1 var(--body);font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
@keyframes s08g{0%{opacity:0;transform:translateY(.5em)}5%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-.5em)}}
/* 09 Location sharing */
.s09 .map{position:absolute;left:7cqw;right:7cqw;top:50%;aspect-ratio:4/3;transform:translateY(-50%);border-radius:.9em;overflow:hidden;background:#e8eef8;box-shadow:inset 0 0 0 1px rgba(11,25,48,.06),0 1.2em 2.4em -1.4em rgba(11,25,48,.4)}
:root[data-dv-theme="dark"] .s09 .map{background:#1a2132}
.s09 svg{position:absolute;inset:0;width:100%;height:100%}
.s09 .blk{fill:#dbe4f3}:root[data-dv-theme="dark"] .s09 .blk{fill:#232c40}
.s09 .road{stroke:#fff;stroke-width:7;fill:none}:root[data-dv-theme="dark"] .s09 .road{stroke:#2c3650}
.s09 .route{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:3 6}
.s09 .rider{fill:#ff8a3d;stroke:#fff;stroke-width:2.5}
.s09 .pinG{transform-box:fill-box;transform-origin:50% 100%;animation:s09pin 4.5s ease infinite}  /* map pin drawn in the map: its tip sits exactly on the end of the route */
@keyframes s09pin{0%,70%{transform:translateY(0) scale(1)}78%{transform:translateY(-3px) scale(1.12)}86%,100%{transform:translateY(0) scale(1)}}
.s09 .lab{left:.7em;bottom:.7em;padding:.55em .75em;gap:.1em;border-radius:.7em}
.s09 .lab b{font:700 .86em/1.2 var(--display)}.s09 .lab em{font:400 .7em/1.2 var(--body);color:var(--muted);font-style:normal}
/* 10 Device customisation */
.s10 .cyc{animation:s10fin 10s ease infinite}
@keyframes s10fin{0%,16%{--f1:#3a3b40;--f2:#0b0b0d}20%,36%{--f1:#eef0f3;--f2:#9aa0a8}40%,56%{--f1:#eedcb8;--f2:#a98a55}60%,76%{--f1:#2f55b8;--f2:#0d1b45}80%,96%{--f1:#2d6b52;--f2:#0b2a1f}100%{--f1:#3a3b40;--f2:#0b0b0d}}
.s10 .sw{position:absolute;left:50%;bottom:7cqw;transform:translateX(-50%);display:flex;align-items:center;gap:2.6cqw;height:7cqw}
.s10 .sw i{flex:none;width:7cqw;height:7cqw;border-radius:50%;background:radial-gradient(circle at 30% 24%,var(--c1),var(--c2) 72%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.1)}
.s10 .sel{position:absolute;left:0;top:0;width:7cqw;height:7cqw;border-radius:50%;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent);animation:s10sel 10s var(--ease) infinite}
@keyframes s10sel{0%,16%{transform:translateX(0)}20%,36%{transform:translateX(9.6cqw)}40%,56%{transform:translateX(19.2cqw)}60%,76%{transform:translateX(28.8cqw)}80%,96%{transform:translateX(38.4cqw)}100%{transform:translateX(0)}}
/* 11 On-behalf delivery */
.s11 .ob{left:9cqw;right:9cqw;top:50%;transform:translateY(-50%);gap:.7em}
.s11 .av{--c:#34d399}
.s11 .code{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em}
.s11 .code b{display:grid;place-items:center;height:2em;border-radius:.5em;font:700 1.35em/1 var(--display);color:var(--accent);background:rgba(35,98,235,.1);box-shadow:inset 0 0 0 1px rgba(35,98,235,.18);animation:s11flip 6s var(--ease) infinite both;animation-delay:calc(var(--k)*.18s)}
@keyframes s11flip{0%{opacity:0;transform:rotateX(-90deg)}8%,92%{opacity:1;transform:none}100%{opacity:0;transform:rotateX(90deg)}}
.s11 .chip{justify-self:start;opacity:0;animation:s11ok 6s ease infinite}
@keyframes s11ok{0%,34%{opacity:0;transform:translateY(.4em)}42%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
/* 12 Smart attendance */
.s12 .att{left:6cqw;right:6cqw;top:50%;transform:translateY(-50%)}
.s12 .ar{animation:scRow 6s var(--ease) infinite both;animation-delay:calc(var(--k)*.5s)}
.s12 .bar{display:block;height:.32em;margin-top:.35em;border-radius:999px;background:rgba(11,25,48,.08);overflow:hidden;text-decoration:none}
:root[data-dv-theme="dark"] .s12 .bar{background:rgba(255,255,255,.1)}
.s12 .bar u{display:block;height:100%;width:100%;border-radius:inherit;background:var(--green);transform-origin:left;animation:s12bar 6s var(--ease) infinite}
@keyframes s12bar{0%,10%{transform:scaleX(0)}50%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* no motion: every scene shows a sensible resting state */
@media (prefers-reduced-motion:reduce){.tile-fx *{animation:none!important}.s04 .sleep{opacity:0}.s04 .tag,.s06 .tag,.s11 .chip,.s03 .paybtn .b{opacity:1}.s08 .g{opacity:0}.s08 .g:first-child{opacity:1}.s07 .dots i:first-child{width:1.4em;background:var(--accent)}.s09 .rider{display:none}}

/* Hero: air above the "Pre-order now open" badge (was clamp(56px,9vw,120px), then clamp(22px,3.5vw,44px), then clamp(32px,5vw,72px); user asked for more twice, 2026-11-04/05) */
.hero{padding-top:clamp(40px,6.5vw,100px)}
/* Hero COD card: its note may wrap ("Even when you're not at home.") */
.hc-cod p{white-space:normal}

/* ---------- Hero text block: room between the parts, and the price + terms grouped in one frosted offer panel ---------- */
.hero .eyebrow{margin-bottom:26px}
.hero .h-tag{margin-top:14px}
.hero > .wrap > .sub{margin:14px auto 0;max-width:58ch;text-wrap:balance}
.hero .ctas{margin-top:34px}
.hero-offer{display:grid;justify-items:center;gap:14px;width:fit-content;max-width:100%;margin:40px auto 0;padding:20px clamp(18px,3vw,32px) 22px;border-radius:22px}
.hero-offer .hero-price{margin-top:0}
.hero-offer{width:min(100%,760px)}
.hero-offer .hero-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 26px;width:100%;margin:0;padding-top:16px;border-top:1px solid var(--rule-soft)}
.hero-offer .hero-terms li{display:grid;justify-items:center;align-content:start;gap:7px;text-align:center;font:400 14px/1.4 var(--body);color:var(--muted)}
.hero-offer .hero-terms li span{display:grid;gap:2px}
.hero-offer .hero-terms b{font:600 16px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)}
.hero .hero-offer + .origin{margin-top:22px}
@media (max-width:640px){  /* phones: one term per row, icon beside the text */
  .hero-offer{margin-top:30px;padding:18px 18px 20px}
  .hero-offer .hero-terms{grid-template-columns:1fr;gap:12px}
  .hero-offer .hero-terms li{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:start;text-align:left;gap:10px}
  .hero-offer .hero-terms li svg{margin-top:2px}
}

/* ---------- FAQ: heading + contact CTA on the left, the questions in a fixed-height scrolling glass panel on the right ---------- */
#faq .faq-grid{align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-head .h2{font-size:clamp(30px,3.2vw,42px);line-height:1.08}
.faq-head .h2 .nb{white-space:nowrap}
.faq-head .sub{max-width:34ch}
.faq-cta{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule-soft);display:grid;justify-items:start;gap:12px}
.faq-cta p{font:600 17px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.faq-panel{position:relative;border-radius:26px;padding:6px 6px 6px clamp(18px,2.4vw,28px)}
.faq-scroll{max-height:min(540px,66vh);overflow-y:auto;padding:6px clamp(12px,1.6vw,20px) 10px 0;counter-reset:faq;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
.faq-scroll::-webkit-scrollbar{width:6px}
.faq-scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:6px}
.faq-scroll::-webkit-scrollbar-track{background:transparent}
.faq-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
/* fade whichever edge still hides questions */
.faq-panel.scrolled .faq-scroll{-webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 64px),transparent)}
.faq-panel.at-end .faq-scroll{-webkit-mask-image:linear-gradient(#000 100%,#000);mask-image:none}
.faq-panel.scrolled.at-end .faq-scroll{-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
/* numbered rows */
.faq-scroll details{counter-increment:faq}
.faq-scroll details:first-of-type{border-top:0}
.faq-scroll details:last-of-type{border-bottom:0}
.faq-scroll summary{justify-content:flex-start;gap:14px;padding:18px 0;font-size:17px}
.faq-scroll summary::before{content:counter(faq,decimal-leading-zero);flex:none;width:24px;font:500 12px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted-2);transition:color .2s ease}
.faq-scroll summary::after{margin-left:auto}
.faq-scroll details[open] summary,.faq-scroll details[open] summary::before{color:var(--accent)}
.faq-scroll details > p,.faq-scroll details .ans > p{padding:0 0 20px 38px;font-size:16px;max-width:62ch}
.faq-scroll details a{color:var(--accent);text-decoration:none}
.faq-scroll details a:hover{text-decoration:underline}
/* "Scroll for more" hint: fades out at the end of the list */
.faq-more{position:relative;display:flex;width:fit-content;margin:6px auto 8px;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:600 12px/1 var(--body);color:var(--ink-2);background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease)}
.faq-more svg{width:12px;height:12px;transform:rotate(90deg);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.faq-more svg{animation:faqNudge 1.6s ease-in-out infinite}}
@keyframes faqNudge{50%{translate:0 2px}}
.faq-panel.at-end .faq-more{opacity:0;transform:translateY(4px)}
@media (max-width:860px){
  .faq-head{position:static}
  .faq-head .sub{max-width:none}
  .faq-cta{grid-template-columns:auto auto;align-items:center;justify-content:start;column-gap:16px}
  .faq-scroll{max-height:460px}
}
@media (max-width:600px){
  .faq-panel{padding-left:16px;border-radius:22px}
  .faq-scroll{max-height:420px}
  .faq-scroll summary{font-size:16px;gap:10px}
  .faq-scroll summary::before{width:20px}
  .faq-scroll details > p,.faq-scroll details .ans > p{padding-left:30px;font-size:15px}
  .faq-cta{grid-template-columns:1fr}
}

/* ---------- How it works: eyebrow, longer intro and a step label above each panel ---------- */
.sec-eyebrow{font:600 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.how-sub{max-width:52ch;margin:14px auto 0;text-wrap:balance}
.step-panels{min-height:9.5em}
.step-panel p{max-width:46ch;text-wrap:balance}
@media (max-width:560px){.seg{display:grid;grid-template-columns:1fr 1fr;width:min(100%,340px);border-radius:20px}.seg button{text-align:center}}  /* phones: the four steps as an even 2 x 2 grid */

/* ---------- Why pre-book: perk cards in one row (the gift is the 4th, early app access the 5th); see the five-card rules further down ---------- */
.why-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.why{padding:28px 20px 26px}
.why b{font-size:19px;text-wrap:balance}
.why p{font-size:16px;text-wrap:balance}
@media (max-width:980px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- Device band: room between the heading and the intro; a line under the tabs that changes with Screen / Bezel / Cover ---------- */
.device-band .h2{max-width:22ch}
.device-band .device-sub{margin:22px auto 0;max-width:56ch;text-wrap:balance}
.cfg-desc{max-width:36ch;text-align:center;font:400 14px/1.45 var(--body);letter-spacing:-.01em;color:var(--muted-on-black);text-wrap:balance}
@media (prefers-reduced-motion:no-preference){.cfg-pane:not([hidden]) .cfg-desc{animation:cfgDesc .4s var(--ease) both}}
@keyframes cfgDesc{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Film ("Watch Dvaari") band: a little air between the heading and its line */
#film .h2 + .sub{margin-top:16px;text-wrap:balance}

/* ---------- Film cover: a real night entrance with the Dvaari device on the pillar, until the film is ready ---------- */
.film-cover{overflow:hidden;background:#0b0c10;border-color:rgba(255,255,255,.12);box-shadow:0 30px 70px -30px rgba(11,25,48,.55)}
.fc-scene{position:absolute;inset:0;transform-origin:74% 53.5%}
@media (prefers-reduced-motion:no-preference){.fc-scene{animation:fcPush 18s ease-in-out infinite alternate}}
@keyframes fcPush{from{transform:scale(1)}to{transform:scale(1.07)}}
.fc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the device sits on the wall right of the flat door at doorbell height (scene coordinates 74% / 53.5%); the halo behind it breathes */
.fc-glow{position:absolute;left:74%;top:53.5%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(200,218,255,.42),rgba(120,160,255,.16) 45%,transparent);mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){.fc-glow{animation:fcGlow 4s ease-in-out infinite}}
@keyframes fcGlow{50%{opacity:.5;transform:translate(-50%,-50%) scale(.92)}}
.fc-dev{position:absolute;left:74%;top:53.5%;width:6.8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 30% 24%,#3a3b40,#0b0b0d 72%);box-shadow:0 0 1.6vw .2vw rgba(190,210,255,.45),0 .5vw 1vw -.2vw rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.3),0 0 0 1px rgba(0,0,0,.4);display:grid;place-items:center}  /* outer glow = light spilling from behind the bezel */
.fc-cam{position:absolute;top:2.25%;left:50%;width:4.5%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);z-index:1;background:radial-gradient(circle at 42% 38%,#8c94f0 0 8%,#2a2d78 22%,#0d0e26 44%,#3a3d44 54%,#9ca1ab 70%,#4a4d55 86%,#26282d 100%)}
.fc-cam::after{content:"";position:absolute;width:40%;aspect-ratio:1;left:230%;top:63%;border-radius:50%;background:#0b0b0d}
.fc-scr{position:relative;width:82%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#05060a;box-shadow:0 0 1.2vw rgba(120,160,255,.45)}  /* meets the 9% bezel, no black ring */
.fc-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-scr img.n2{opacity:0}
@media (prefers-reduced-motion:no-preference){.fc-scr img.n2{animation:fcScr 8s ease-in-out infinite}}
@keyframes fcScr{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
/* legibility: a soft dark wash at the bottom-left for the caption, and around the centre for the play button */
.fc-shade{position:absolute;inset:0;background:linear-gradient(to top right,rgba(5,7,12,.72),rgba(5,7,12,.15) 45%,transparent 70%),radial-gradient(closest-side at 50% 50%,rgba(0,0,0,.22),transparent);pointer-events:none}
.fc-chip{position:absolute;left:18px;top:18px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.02em;color:#fff;background:rgba(10,12,18,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.fc-chip i{width:7px;height:7px;border-radius:50%;background:#ff6b5e;box-shadow:0 0 0 3px rgba(255,107,94,.25)}
.fc-cap{position:absolute;left:clamp(18px,3vw,32px);bottom:clamp(16px,3vw,30px);display:grid;gap:4px;text-align:left;color:#fff}
.fc-cap b{font:700 clamp(20px,2.6vw,30px)/1.1 var(--display);letter-spacing:-.025em}
.fc-cap small{font:400 clamp(13px,1.3vw,15px)/1.3 var(--body);color:rgba(255,255,255,.78)}
.film-cover .play{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.4);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.film-cover .play svg{fill:#fff}
.film-cover .play::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
@media (prefers-reduced-motion:no-preference){.film-cover .play::after{animation:fcPlay 2.4s ease-out infinite}}
@keyframes fcPlay{from{transform:scale(1);opacity:.9}to{transform:scale(1.55);opacity:0}}
@media (max-width:640px){.video-ph.film-cover{aspect-ratio:16/9}.fc-chip{left:10px;top:10px;padding:5px 9px;font-size:10.5px}.fc-cap small{display:none}}  /* keep the photo 16:9 so the device stays on the pillar */

/* Customiser device: finishes switch instantly (no --bz colour transition, which could stall), with a brief flash on the bezel */
#deviceImg{transition:none}
#deviceImg.bz-swap::before{animation:bzSwap .5s var(--ease)}
@keyframes bzSwap{from{filter:brightness(1.7) saturate(.5)}to{filter:none}}
@media (prefers-reduced-motion:reduce){#deviceImg.bz-swap::before{animation:none}}

/* Features: cards are always at full strength (no faded "pre-reveal" state for the section or its tiles), and their graphics always run */
#features .reveal.pre,#features .tile.reveal.pre{opacity:1}

/* ---------- Credentials row: Designed and developed in India · Indian patent granted · PCT application filed · Dvaari™ filed ---------- */
.creds{list-style:none;padding:0;margin:24px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:12px}
.creds li{display:inline-flex;align-items:center;gap:9px;padding:0 18px;font:500 13.5px/1.2 var(--body);letter-spacing:-.005em;color:var(--ink-2);white-space:nowrap}
.creds li + li{border-left:1px solid var(--rule)}
.creds .ci{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(35,98,235,.14)}
.creds .ci svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.creds .ci.flag{background:transparent;box-shadow:none;width:auto}
.creds .ci.flag svg.tri{width:21px;height:14px;stroke:none}
@media (max-width:640px){  /* phones: one item per row, the block centred */
  .creds{display:grid;grid-template-columns:auto;justify-content:center;gap:10px}
  .creds li{padding:0;border:0!important;font-size:13px}
}
/* footer version: left-aligned, quieter */
.creds-foot{margin:0;justify-content:flex-start}
.creds-foot li:first-child{padding-left:0}
.creds-foot li{font-size:13px}
@media (max-width:640px){.creds-foot{grid-template-columns:1fr;justify-content:start}}


/* Features header centred (heading and description); Why pre-book cards never fade (user, 2026-11-03) */
#features .gallery-head{justify-content:center;text-align:center}
#features .gallery-head > div{display:grid;justify-items:center}
#features .feat-sub{margin-inline:auto;text-wrap:balance}
.reveal.pre .why,.why.reveal.pre{opacity:1}

/* Why pre-book: the section never fades, and the perk icons are visible even if their draw-in never runs */
section[aria-labelledby="whyTitle"] .reveal.pre{opacity:1}
.why .ico svg *{stroke-dasharray:none;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.why.in .ico svg *{stroke-dasharray:90;animation:whyDraw 1.1s var(--ease) backwards;animation-delay:calc(var(--i,0)*110ms + .35s)}}
@keyframes whyDraw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
/* full-colour credential marks (patent seal, globe) sit beside the flag at the same visual size */
.creds .ci.flag svg.cr{width:20px;height:20px;stroke:none}

/* Hero badge: "Pre-order now open" with "Delivery in Jan’27" inside the capsule at its right end, small, after a thin divider (user, 2026-11-04) */
.hero .eyebrow{white-space:nowrap}
/* two lines inside the capsule: "Pre-order now open", then a smaller "Delivery in Jan’27" right-aligned under it (user, 2026-11-04) */
.hero .eyebrow{display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;row-gap:1px;border-radius:16px;padding:7px 14px 7px 12px}
.eyebrow .eb-note{grid-column:1/-1;justify-self:end;font:600 9px/1.2 var(--body);letter-spacing:.04em;color:var(--ink)}
/* feature tiles without the "NN · Feature" label: heading, line, then the graphic at the foot */
#features .tile{grid-template-rows:auto auto 1fr}

/* ---------- Booking sheet: product shot in the left panel (1:1): the device on a dark studio backdrop with a spotlight, screens cycling ---------- */
.sheet-shot{position:relative;isolation:isolate;aspect-ratio:1;width:100%;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:none;box-shadow:none;container-type:inline-size}  /* no card behind the device (user, 2026-11-04): it sits straight on the panel */
.ss-spot{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(35,98,235,.10),rgba(35,98,235,.03) 60%,transparent);z-index:0}
@media (prefers-reduced-motion:no-preference){.ss-spot{animation:ssSpot 6s ease-in-out infinite}}
@keyframes ssSpot{50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}}
.sheet-dev{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-50%);z-index:1}
.sheet-dev .device{width:100%}
.sheet-dev .screen{container-type:inline-size}
.sheet-dev .scr-img{transition:opacity .9s var(--ease)}
.sheet-dev .ss-2,.sheet-dev .ss-3{opacity:0;z-index:2}
@media (prefers-reduced-motion:no-preference){.sheet-dev .ss-2{animation:ss2 12s ease-in-out infinite}.sheet-dev .ss-3{animation:ss3 12s ease-in-out infinite}}
@keyframes ss2{0%,30%{opacity:0}36%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes ss3{0%,62%{opacity:0}68%,94%{opacity:1}100%{opacity:0}}
.ss-shadow{position:absolute;left:50%;top:88%;width:58%;height:5%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(11,25,48,.28),transparent);filter:blur(6px);z-index:0}
.sheet-media .fine{color:var(--muted)}

/* sheet product shot: the device box sits dead centre (its own shadow below it); same white backdrop in dark mode, like a product photo */
.sheet-dev .device{box-shadow:0 30px 50px -28px rgba(11,25,48,.45)}


/* ---------- Hero: "Journey to Dvaari" and its pop-up price card (out of the page flow, so the landing section stays light) ---------- */
.hero .ctas{position:relative;z-index:5}  /* each hero child runs the "rise" animation (fill both), which makes it its own stacking layer; lift the CTA row so its pop-up paints over the pay line, credentials and the feature cards below */
button.tlink{background:none;border:0;padding:0;cursor:pointer;font:400 17px/1.2 var(--body);color:var(--accent)}
.journey-btn svg{transition:transform .25s var(--ease)}
.journey-btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.journey-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
#heroOffer.hero-offer{position:absolute;left:50%;top:calc(100% + 66px);z-index:40;margin:0;width:min(760px,calc(100vw - 32px));text-align:center;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 30px 70px -24px rgba(11,25,48,.38),0 0 0 1px rgba(11,25,48,.08);opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.98);transform-origin:50% 0;transition:opacity .22s ease,transform .28s var(--ease),visibility 0s linear .28s}
:root[data-dv-theme="dark"] #heroOffer.hero-offer{background:#1d1d1f;box-shadow:0 30px 70px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
/* top: the card opens under "Designed and developed in India" (user, 2026-11-04): 24px credentials margin + 26px credentials row + 16px gap */
#heroOffer.hero-offer.open{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
@media (prefers-reduced-motion:reduce){#heroOffer.hero-offer{transition:none}}
#heroOffer.hero-offer::before,#heroOffer.hero-offer::after{display:none}  /* solid card: nothing behind it shows through */

/* ---------- Hero on wide screens (user, 2026-11-04): two columns. The copy sits on the left; the device scene moves up beside it on the right.
   Named areas keep the markup and the staggered entrance as they are; the copy starts level with the top of the scene and a 1fr row below takes up the rest.
   The badge sits centred between the two columns, above both; side margins are slimmer than the rest of the page.
   The scene is near-square here, so the cards use corner slots as on phones (each group leaves one corner free for its pill). ---------- */
@media (min-width:1000px){
  .hero > .wrap{--gx:clamp(12px,1.25vw,20px);max-width:calc(1400px + 2*var(--gx));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto repeat(5,auto) minmax(180px,1fr);grid-template-areas:"eb scene" "h1 scene" "tag scene" "sub scene" "cta scene" "cred scene" ". scene";column-gap:clamp(32px,4vw,64px);text-align:left}
  .hero > .wrap > .eyebrow{grid-area:eb;justify-self:start;margin-top:3%;margin-bottom:8px}  /* top level with the first card, which sits 3% down the square scene (user, 2026-11-05) */  /* left column, above Dvaari (user, 2026-11-04) */
  .hero > .wrap > .h-hero{grid-area:h1;margin-top:0}  /* straight under the badge; the badge now carries the alignment with the first card */
  .hero > .wrap > .h-tag{grid-area:tag;white-space:nowrap;font-size:min(30px,2.5vw)}  /* one line */
  .hero > .wrap > .sub{grid-area:sub;margin:14px 0 0}
  .hero > .wrap > .ctas{grid-area:cta;justify-content:flex-start}
  .hero > .wrap > .creds{grid-area:cred;margin:24px 0 0;justify-content:flex-start}
  .hero .creds li:first-child{padding-left:0}
  .hero{padding-top:calc(clamp(40px,6.5vw,100px) + 51px)}  /* + the badge row (43px badge, 8px gap) that used to sit above the scene, so the scene keeps its place */
  .hero > .wrap > .hero-ph{grid-area:scene;align-self:start;margin-top:0;aspect-ratio:1}
  .hero-dev{width:38%}
  .s-tl{--x:1%;--y:3%;--w:46%}
  .s-tr,.s-r{--x:57%;--y:4%;--w:42%}
  .s-bl,.s-br,.s-pt,.s-pb{top:auto;bottom:4%}
  .s-bl{--x:1%;--w:44%}
  .s-br{--x:55%;--w:44%}
  .s-pt{--x:1%;--fx:40%;--fy:-80%;transform:translate(var(--fx),var(--fy)) scale(.4)}
  .s-pb{--x:55%;--fx:-40%;--fy:-80%;transform:translate(var(--fx),var(--fy)) scale(.4)}
  .s-pt.show,.s-pb.show{transform:none}
  .hc-pill{max-width:44%;white-space:normal;text-align:left;line-height:1.2}
  /* smaller cards, each shrinking toward its own corner so the device keeps clear space around it */
  .hero-stage .hc{scale:.76}
  .hero-stage .s-tl{transform-origin:0 0}.hero-stage .s-tr,.hero-stage .s-r{transform-origin:100% 0}
  .hero-stage .s-bl,.hero-stage .s-pt{transform-origin:0 100%}.hero-stage .s-br,.hero-stage .s-pb{transform-origin:100% 100%}
  /* the price card opens in the left column, under the copy; the last row is at least 180px so, with the bottom padding, the card always fits above the section edge */
  #heroOffer.hero-offer{left:0;width:min(560px,100%);max-width:none;transform:translateY(-8px) scale(.98);transform-origin:0 0}
  #heroOffer.hero-offer.open{transform:none}
}

/* ---------- The Dvaari logo on the bottom bezel of every device (user, 2026-11-04), mirroring the camera at the top ---------- */
.dev-logo{position:absolute;left:50%;bottom:1.9%;width:13%;aspect-ratio:640/252;transform:translateX(-50%);z-index:1;background:url(assets/dvaari-wordmark-white.png?v=202611120512) center/contain no-repeat;filter:drop-shadow(0 .5px 1px rgba(0,0,0,.5));pointer-events:none}  /* the shadow keeps the white logo legible on the silver and champagne finishes */

/* ---------- Device band (user, 2026-11-04): covers are hidden, so the room kept above the device for cover ears goes and the gaps tighten;
   "Default" sits at the top right of the settings card, level with the tabs (tabs move left on phones so the two never meet) ---------- */
.device-wrap{margin-top:64px;gap:44px}
.bezel-ui{position:relative}
.bezel-ui > .cfg-reset{position:absolute;top:21px;right:18px;margin:0;padding:7px 12px}
@media (max-width:480px){.bezel-ui > .cfg-tabs{justify-self:start}}
@media (max-width:360px){.bezel-ui{padding-inline:14px}.bezel-ui > .cfg-reset{right:12px;padding:7px 10px}}  /* the smallest phones: keep clear space between the tabs and Default */

/* ---------- Hero scene on phones (user, 2026-11-04): smaller cards and a slightly smaller device, so no card overlaps the device.
   Each card shrinks toward its own corner; the bottom cards are anchored to the scene's bottom edge so they shrink away from the device ---------- */
@media (max-width:640px){
  .hero-dev{width:38%}
  .hero-stage .hc{scale:.8}
  .hero-stage .s-tl{transform-origin:0 0}.hero-stage .s-tr,.hero-stage .s-r{transform-origin:100% 0}
  .hero-stage .s-bl,.hero-stage .s-pt{transform-origin:0 100%}.hero-stage .s-br,.hero-stage .s-pb{transform-origin:100% 100%}
  .s-bl,.s-br,.s-pt,.s-pb{top:auto;bottom:3%}
}
@media (max-width:360px){.hero-stage .hc{scale:.74}}  /* the smallest phones: the visitor list would otherwise touch the device */

/* How it works (user, 2026-11-04): with the step labels gone, the panel heading sits closer to the tabs */
.step-panels{margin-top:clamp(20px,3vw,28px)}

/* ---------- 13 Connected family (user, 2026-11-04): each family member's delivery lands in turn and the one device pulses ---------- */
.s13 .pulse{position:absolute;left:61cqw;top:22cqw;width:35cqw;aspect-ratio:1;border-radius:50%;border:2px solid rgba(35,98,235,.45);animation:scPulse 2.4s ease-out infinite}
.s13 .p2{animation-delay:1.2s}
.s13 .fam{left:5cqw;width:54cqw;top:50%;transform:translateY(-50%)}
.s13 .hd + .vr{border-top:0}
.s13 .vr{grid-template-columns:auto minmax(0,1fr);animation:scRow 6s var(--ease) infinite both;animation-delay:calc(var(--k)*.6s)}

/* FAQ heading (user, 2026-11-04): "Questions?" in Dvaari blue */
.faq-q{color:var(--accent)}

/* Features head (user, 2026-11-04): more room under the big heading (its descenders nearly touched the description), less between the description and the tiles */
#features .feat-sub{margin-top:20px}
#features .track{margin-top:clamp(20px,2.4vw,28px)}

/* Hero scene, narrower desktops (user, 2026-11-04): the cards keep their full text size up to here, so the device and cards shrink a little more to stay clear of each other */
@media (min-width:1000px) and (max-width:1279px){.hero-dev{width:34%}.hero-stage .hc{scale:.72}}

/* ---------- Pre-order benefits, five cards (user, 2026-11-10): five in a row on wide screens, where this section widens to fit them;
   3 + 2 (centred) on laptops and tablets, 2 per row with the last one centred on small tablets, one per row on phones ---------- */
.why-grid > .why{align-content:start}  /* content stacks from the top, so a taller neighbour does not spread it out */
@media (min-width:1200px){
  section[aria-labelledby="whyTitle"] > .wrap{max-width:calc(1200px + 2*var(--gx))}
  .why-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .why-grid > .why{padding:28px 16px 26px}
}
@media (min-width:761px) and (max-width:1199px){
  .why-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .why-grid > .why{grid-column:span 2}
  .why-grid > .why:nth-child(4){grid-column:2 / span 2}
}
@media (min-width:561px) and (max-width:760px){.why-grid > .why:nth-child(5){grid-column:1 / -1;justify-self:center;width:calc(50% - 8px)}}

/* ---------- Footer with "Download the app" (user, 2026-11-10): brand | Explore | Support | Download the app; policy links stay in the bottom row.
   Same footer background and type; the store badges are the black badges used on the booking confirmation. ---------- */
.foot-map-app{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1.15fr)}
.foot-logo{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;text-decoration:none}
.foot-logo .mark{height:24px;width:auto}
.foot-logo .word{height:17px;width:auto}
.foot-brand .foot-about{margin:0}
.foot-app-text{color:var(--muted);margin:0 0 12px;max-width:32ch}
.foot-badges{display:grid;gap:8px;justify-items:start}
.foot-col .store-badge{width:152px;min-height:42px;justify-content:flex-start;gap:9px;padding:6px 14px;border-radius:10px;color:#fff;text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.foot-col .store-badge:hover{color:#fff;text-decoration:none;background:#1a2031;transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(12,26,58,.55)}
.foot-col .store-badge svg{width:20px;height:20px}
.foot-col .store-badge b{font-size:14px}
@media (max-width:760px){.foot-map-app{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){
  .foot-map-app{grid-template-columns:1fr}
  .foot-badges{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:stretch;max-width:320px}
  .foot-col .store-badge{width:auto;justify-content:center}
}

/* ---------- SEO / accessibility pass (2026-11-11) ----------
   Secondary grey text: #86868b fails WCAG AA contrast on white and on the footer's #f5f5f7 (3.3–3.6:1). #6e6e73 (Apple's light-mode
   secondary text) passes at 4.7–5.1:1 and looks nearly the same. Footer bottom links get a taller tap target on touch screens. */
:root{--muted:#6e6e73}
.flinks a{display:inline-block;padding:5px 0}

/* ---------- Footer social links (user, 2026-11-11): Instagram, Facebook, YouTube, LinkedIn under the brand text, same greys as the footer ---------- */
.foot-col .foot-social{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}  /* .foot-col ul is a vertical grid; this row is horizontal */
.foot-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--card);border:1px solid var(--rule-soft);transition:color .2s ease,border-color .2s ease,transform .2s ease}
.foot-social a:hover{border-color:var(--rule);transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(12,26,58,.35);text-decoration:none}
.foot-social a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.foot-social svg{width:19px;height:19px;stroke:none;fill:none}  /* full-colour logos: each shape sets its own fill */

/* ---------- Booking confirmed (user, 2026-11-10): the success view of the pre-order sheet. White, Dvaari blue for actions, dark navy for
   headings, soft blue only on the early-app-access card. Everything is scoped to #donePane, .is-done and .sm-reserved. ---------- */
.sheet.is-done .sheet-body > .title,.sheet.is-done .sheet-body > .fine,.sheet.is-done .sheet-body > .steps{display:none}
.sheet.is-done .sheet-body{background:#fff}
.sheet.is-done .sheet-media{background:radial-gradient(55% 45% at 50% 46%,rgba(35,98,235,.12),transparent 72%),linear-gradient(180deg,#f7f9fe,#eef3fc);justify-items:center;align-content:center;gap:18px}
.sm-reserved{display:none}
.sheet.is-done .sm-reserved{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid #e3e9f6;box-shadow:0 6px 16px -10px rgba(12,26,58,.25);font:600 13px/1.2 var(--body);color:#0c1a3a;letter-spacing:-.005em}
.sm-reserved i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,181,115,.18)}

#donePane{--dn-navy:#0c1a3a;--dn-soft:#f2f6ff;--dn-blue-line:#d5e2ff;--dn-line:#e6ebf3;color:var(--ink-2)}
#donePane b,#donePane h3,#donePane h4{color:var(--dn-navy)}
#donePane h3,#donePane h4{margin-bottom:0}  /* the site-wide heading margin added a 28px gap under the card titles */
#donePane:focus{outline:none}  /* focused by script when it appears, so screen readers start here; it is not a control */

/* 1. confirmation */
.dn-head .done-mark{width:44px;height:44px;margin-bottom:14px}
.dn-head .done-mark svg{width:20px;height:20px}
.dn-title{font:700 clamp(23px,2.6vw,27px)/1.18 var(--display);letter-spacing:-.025em;text-wrap:balance}
.dn-lead{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* booking ID and the customer's details */
.dn-booking{margin-top:20px;border:1px solid var(--dn-line);border-radius:16px;padding:16px 18px 14px;background:#fff;box-shadow:0 1px 2px rgba(12,26,58,.04)}
.dn-label,.dn-meta dt{display:block;font:500 12px/1.2 var(--body);color:var(--muted);letter-spacing:.01em}
.dn-id-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;flex-wrap:wrap}
.dn-id-val{font:600 19px/1.2 var(--mono);letter-spacing:.05em;color:var(--dn-navy);overflow-wrap:anywhere}
.dn-copy{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--dn-blue-line);background:#fff;color:var(--accent);font:600 13px/1 var(--body);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.dn-copy:hover{background:var(--dn-soft);border-color:#b9cdfb}
.dn-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dn-copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#donePane .toast{margin-top:4px;min-height:1.2em}
.dn-meta{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px 18px;margin:8px 0 0;padding-top:12px;border-top:1px solid var(--dn-line)}
.dn-meta dd{margin:4px 0 0;font:500 14.5px/1.35 var(--body);color:var(--dn-navy);overflow-wrap:anywhere}
.dn-note{margin-top:12px;font-size:12.5px;color:var(--muted)}

/* 2. early app access: the main next action */
.dn-ea{margin-top:16px;padding:22px 20px 20px;border-radius:20px;background:var(--dn-soft);border:1px solid var(--dn-blue-line)}
.dn-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid var(--dn-blue-line);font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.dn-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dn-ea-title{margin-top:12px;font:700 21px/1.22 var(--display);letter-spacing:-.02em;text-wrap:balance}
.dn-ea-text{margin-top:8px;font-size:15px;line-height:1.55}
.dn-cta.pill{margin-top:16px;font-size:16px;padding:15px 22px}
.dn-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.store-badge{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:6px 12px;border-radius:12px;background:#0b0f19;color:#fff;text-decoration:none;transition:transform .2s ease,background .2s ease}
.store-badge:hover{background:#1a2031;transform:translateY(-1px)}
.store-badge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.store-badge svg{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
.store-badge span{display:grid;line-height:1.1;text-align:left}
.store-badge small{font:500 10px/1.2 var(--body);color:rgba(255,255,255,.75);letter-spacing:.01em}
.store-badge b{font:600 15px/1.2 var(--display);letter-spacing:-.01em;color:#fff}
#donePane .store-badge b{color:#fff}
.dn-ea-note{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
/* the three onboarding steps: a short vertical sequence joined by a line */
.dn-steps{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--dn-blue-line);display:grid}
.dn-steps li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding-bottom:14px}
.dn-steps li:last-child{padding-bottom:0}
.dn-steps li:not(:last-child)::before{content:"";position:absolute;left:18px;top:40px;bottom:2px;width:2px;border-radius:2px;background:var(--dn-blue-line)}
.dn-step-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--dn-blue-line);color:var(--accent)}
.dn-step-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dn-steps small{display:block;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.dn-steps b{display:block;margin-top:3px;font:600 15px/1.3 var(--display);letter-spacing:-.01em}
.dn-steps p{margin-top:2px;font-size:13.5px;line-height:1.45}

/* 3. the device is still to come */
.dn-info{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;margin-top:14px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--dn-line)}
.dn-info-ic,.dn-refund-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--dn-soft);color:var(--accent)}
.dn-info-ic svg,.dn-refund-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dn-info b,.dn-refund b{display:block;font:600 14.5px/1.3 var(--display);letter-spacing:-.01em}
.dn-info p,.dn-refund p{margin-top:3px;font-size:13.5px;line-height:1.5}

/* 4. what's next */
.dn-next{margin-top:24px}
.dn-h{font:700 18px/1.2 var(--display);letter-spacing:-.015em}
.dn-next-list{list-style:none;margin:10px 0 0;padding:0}
.dn-next-list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--dn-line)}
.dn-next-list li:first-child{border-top:0;padding-top:4px}
.dn-next-list i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--dn-soft);color:var(--accent);font:600 11.5px/1 var(--mono);font-style:normal;letter-spacing:.02em}
.dn-next-list b{display:block;font:600 14.5px/1.3 var(--display);letter-spacing:-.01em}
.dn-next-list p{margin-top:2px;font-size:13.5px;line-height:1.45}

/* 5. refund and tracking: present, but quieter than the app card */
.dn-refund{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--bg-alt)}
.dn-refund-ic{background:#fff;color:var(--ink-2)}
.dn-refund p a{color:var(--accent)}
.dn-track{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:600 13.5px/1.2 var(--body);color:var(--accent);text-decoration:none}
.dn-track svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.dn-track:hover svg{transform:translateX(3px)}

@media (max-width:640px){
  .dn-title{font-size:23px}
  .dn-booking{padding:14px 14px 12px}
  .dn-ea{padding:18px 16px 16px;border-radius:18px}
  .dn-cta.pill{padding:16px 20px}
}
@media (max-width:420px){
  .dn-meta{grid-template-columns:1fr}
}
@media (max-width:340px){
  .dn-stores{grid-template-columns:1fr}
}