/* Hallmark · shape: Workbench, shared by both modes · genre: modern-minimal · theme: Dusk (by request, night mode of a day/night pair with Hum) · job: sign up · draw: manual
 * hero: Settled, the head left, the app in smoked glass, the router and a laptop trading traffic along its foot · nav: pill links and a day/night switch · footer: a mast on the deepest slate · imagery: the product, built · signature: the router-to-laptop scene with Tx/Rx packets both ways · dusk: none/periwinkle-apricot/glass
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
:root:where([data-mode="night"]){color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(17.5% 0.014 268); --color-paper-2: oklch(21% 0.016 268); --color-paper-3: oklch(25% 0.017 268);
  --color-ink: oklch(96% 0.006 75); --color-ink-2: oklch(85% 0.010 262); --color-muted: oklch(70% 0.016 262);
  --color-rule: oklch(30% 0.016 266); --color-light: oklch(100% 0 0); --color-shade: oklch(10% 0.022 268);
  --color-accent: oklch(77% 0.10 274); --color-accent-ink: oklch(19% 0.035 274); --color-accent-hi: oklch(84% 0.085 274);
  --color-accent-deep: oklch(44% 0.13 274); --color-accent-soft: oklch(91% 0.038 274); --color-focus: oklch(80% 0.10 274);
  --color-accent-2: oklch(83% 0.095 62); --color-dusk: oklch(70% 0.12 330);
  --color-day-ink: oklch(22% 0.022 268); --color-day-muted: oklch(38% 0.022 266); --color-fog: oklch(94% 0.012 70);
  --color-well: oklch(95.5% 0.008 75); --color-well-2: oklch(92% 0.010 75); --color-well-ink: oklch(21% 0.016 268); --color-well-muted: oklch(47% 0.016 265); --color-well-rule: oklch(87.5% 0.009 75); --color-card: oklch(99.5% 0.003 75);
  --glass: oklch(22% 0.018 268 / 0.58); --glass-blur: 22px;
  --glass-hi: inset 0 1px 0 oklch(100% 0 0 / 0.10), inset 0 0 0 1px oklch(100% 0 0 / 0.06);
  --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 40px 80px -32px oklch(8% 0.02 268 / 0.7);
  --font-display: "Wix Madefor Display", ui-sans-serif, system-ui, sans-serif; --font-body: "Wix Madefor Text", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 18px; --radius-inner: 10px; --radius-pill: 999px; --rule-hair: 1px;
  --tracking-display: -0.022em; --display-weight: 500;}
:where(:root[data-mode="night"]) *,:where(:root[data-mode="night"]) *::before,:where(:root[data-mode="night"]) *::after{box-sizing: border-box;}
html:where([data-mode="night"]),:where(:root[data-mode="night"]) body{overflow-x: clip;}
html:where([data-mode="night"]){scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl);}
:where(:root[data-mode="night"]) body{margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent);}
:where(:root[data-mode="night"]) ::selection{background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink);}
:where(:root[data-mode="night"]) :focus-visible{outline: 2px solid var(--color-focus); outline-offset: 2px;}
:where(:root[data-mode="night"]) a{color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em;}
:where(:root[data-mode="night"]) h1,:where(:root[data-mode="night"]) h2,:where(:root[data-mode="night"]) h3{margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance;}
:where(:root[data-mode="night"]) h1{max-width: 20ch; font-size: var(--text-display);}
:where(:root[data-mode="night"]) h2{max-width: 30ch; font-size: var(--text-section);}
:where(:root[data-mode="night"]) h3{max-width: 40ch; font-size: var(--text-title); line-height: 1.2;}
:where(:root[data-mode="night"]) .lead{font-size: var(--text-lead); line-height: 1.45; max-width: 52ch;}
:where(:root[data-mode="night"]) p{margin: 0; text-wrap: pretty;}
:where(:root[data-mode="night"]) p:not([class]){max-width: 65ch;}
:where(:root[data-mode="night"]) img,:where(:root[data-mode="night"]) video{max-width: 100%; height: auto; display: block;}
:where(:root[data-mode="night"]) svg{display: block;}
:where(:root[data-mode="night"]) [hidden]{display: none !important;}
:where(:root[data-mode="night"]) button,:where(:root[data-mode="night"]) input,:where(:root[data-mode="night"]) select,:where(:root[data-mode="night"]) textarea{font: inherit;}
:where(:root[data-mode="night"]) .container{width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box;}
:where(:root[data-mode="night"]) .num,:where(:root[data-mode="night"]) .figure,:where(:root[data-mode="night"]) td.num{font-variant-numeric: tabular-nums;}
:where(:root[data-mode="night"]) .visually-hidden{position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
:where(:root[data-mode="night"]) [data-slot]{position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper)));}
:where(:root[data-mode="night"]) [data-slot] > img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
:where(:root[data-mode="night"]) [data-slot]:has(> img) > :not(img):not([data-keep]){display: none !important;}
@media (max-width: 60rem){:root:where([data-mode="night"]){--gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px;}}
@media (max-width: 40rem){:root:where([data-mode="night"]){--gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px;}}
@media (prefers-reduced-motion: reduce){:where(:root[data-mode="night"]) *:not(.keep-motion),:where(:root[data-mode="night"]) *:not(.keep-motion)::before,:where(:root[data-mode="night"]) *:not(.keep-motion)::after{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}
:where(:root[data-mode="night"]) [data-slot] > img{filter: contrast(1.04) saturate(1.03);}
:root:where([data-mode="night"]){--font-arabic: "Noto Sans Arabic", var(--font-body);

  --ink: var(--color-ink);
  --ink-2: var(--color-ink-2);
  --teal: var(--color-accent);
  --teal-dark: var(--color-accent);
  --mint: var(--color-paper-3);
  --mint-2: var(--color-paper-2);
  --paper: var(--color-paper);
  --white: var(--color-paper-2);
  --amber: var(--color-accent);
  --amber-deep: var(--color-accent-2);
  --coral: var(--color-accent-2);
  --line: var(--color-rule);
  --line-light: var(--color-rule);
  --text: var(--color-ink);
  --text-soft: var(--color-muted);
  --on-ink: var(--color-ink);
  --on-ink-soft: var(--color-muted);
  --on-ink-softer: var(--color-ink-2);
  --header-bg: color-mix(in oklab, var(--color-paper) 72%, transparent);
  --chip-line: color-mix(in oklab, var(--color-light) 22%, transparent);
  --display: var(--font-display);
  --body: var(--font-body);
  --arabic: var(--font-arabic);
  --arabic-display: var(--font-arabic);
  --wrap: 1160px;}
:where(:root[data-mode="night"]) body{background: var(--color-paper); color: var(--color-ink); font-size: 1.0625rem;}
:where(:root[data-mode="night"]) p{margin: 0 0 1em;}
:where(:root[data-mode="night"]) .card p,:where(:root[data-mode="night"]) .ruled p,:where(:root[data-mode="night"]) .seesnot p,:where(:root[data-mode="night"]) .faq details p{margin: 0;}
:where(:root[data-mode="night"]) h1,:where(:root[data-mode="night"]) h2,:where(:root[data-mode="night"]) h3,:where(:root[data-mode="night"]) h4{font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display);}
:where(:root[data-mode="night"]) h1{font-size: clamp(2.6rem, 4.6vw + 0.6rem, 4.5rem); line-height: 1.04;}
:where(:root[data-mode="night"]) h2{font-size: clamp(1.8rem, 2vw + 1rem, 2.75rem); line-height: 1.08;}
:where(:root[data-mode="night"]) h3{font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em;}
:where(:root[data-mode="night"]) .lede{color: var(--color-muted);}
:where(:root[data-mode="night"]) :focus-visible{outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 8px;}
:where(:root[data-mode="night"]) a{text-decoration-color: color-mix(in oklab, var(--color-accent) 55%, transparent);}
:where(:root[data-mode="night"]) .site-header{background: var(--header-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid color-mix(in oklab, var(--color-light) 8%, transparent);}
:where(:root[data-mode="night"]) .nav a{color: var(--color-ink-2); font-weight: 500; border-bottom: 0;}
:where(:root[data-mode="night"]) .nav a:hover{color: var(--color-ink);}
:where(:root[data-mode="night"]) .nav a[aria-current="page"]{color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent);}
:where(:root[data-mode="night"]) .nav .lang{color: var(--color-muted);}
:where(:root[data-mode="night"]) .nav a.btn-primary{color: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .menu-btn{color: var(--color-ink); border: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .btn{min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 6%, transparent); color: var(--color-ink); font-weight: 600; font-size: 0.97rem; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 14%, transparent); transition: transform var(--dur-micro) var(--ease-out), background var(--dur-short) var(--ease-out);}
:where(:root[data-mode="night"]) .btn:hover{transform: none; background: color-mix(in oklab, var(--color-light) 10%, transparent);}
:where(:root[data-mode="night"]) .btn:active{transform: translateY(1px);}
:where(:root[data-mode="night"]) .btn-primary,:where(:root[data-mode="night"]) .band-ink .btn-primary,[dir="rtl"]:where([data-mode="night"]) .btn-primary{background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent);}
:where(:root[data-mode="night"]) .btn-primary:hover,:where(:root[data-mode="night"]) .band-ink .btn-primary:hover{background: var(--color-accent-hi); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent), 0 0 0 4px color-mix(in oklab, var(--color-accent) 22%, transparent);}
:where(:root[data-mode="night"]) .btn-dark{background: var(--color-paper-3); color: var(--color-ink);}
:where(:root[data-mode="night"]) .band-ink .btn{color: var(--color-ink); border: 0;}
:where(:root[data-mode="night"]) .hero{position: relative; isolation: isolate; overflow: clip; padding: var(--space-2xl) 0 var(--space-3xl); background:
  radial-gradient(ellipse 46% 55% at 72% 100%, color-mix(in oklab, var(--color-accent-2) 16%, transparent), transparent 72%),
  radial-gradient(ellipse 46% 60% at 26% 96%, color-mix(in oklab, var(--color-accent) 14%, transparent), transparent 72%),
  linear-gradient(var(--color-paper), var(--color-paper-2));}
:where(:root[data-mode="night"]) .hero.has-scene{padding-bottom: calc(min(100vw, 960px) * 0.2917 + var(--space-lg));}
:where(:root[data-mode="night"]) .hero h1{max-width: 12ch;}
:where(:root[data-mode="night"]) .hero-solo .wrap > div{max-width: 640px;}
:where(:root[data-mode="night"]) .hero-scene{position: absolute; inset-inline-start: 50%; bottom: 0; translate: -50% 0; width: min(100%, 960px); height: auto; z-index: -1; pointer-events: none; overflow: visible; filter: drop-shadow(0 24px 30px var(--color-shade));}
[dir="rtl"]:where([data-mode="night"]) .hero-scene{translate: 50% 0;}
:where(:root[data-mode="night"]) .hero-scene .stop-apricot{stop-color: var(--color-accent-2); stop-opacity: 0.2;}
:where(:root[data-mode="night"]) .hero-scene .stop-peri{stop-color: var(--color-accent); stop-opacity: 0.18;}
:where(:root[data-mode="night"]) .hero-scene .stop-clear{stop-color: var(--color-paper-2); stop-opacity: 0;}
:where(:root[data-mode="night"]) .hero-scene .stop-desk{stop-color: var(--color-paper-3); stop-opacity: 1;}
:where(:root[data-mode="night"]) .hero-scene .sc-cable{fill: none; stroke: var(--color-rule); stroke-width: 4; stroke-linecap: round;}
:where(:root[data-mode="night"]) .hero-scene .sc-air{fill: none; stroke: color-mix(in oklab, var(--color-accent) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round;}
:where(:root[data-mode="night"]) .hero-scene .lt-lid,:where(:root[data-mode="night"]) .hero-scene .lt-base{fill: var(--color-paper-3); stroke: color-mix(in oklab, var(--color-light) 10%, transparent); stroke-width: 1;}
:where(:root[data-mode="night"]) .hero-scene .lt-screen{fill: var(--color-shade);}
:where(:root[data-mode="night"]) .hero-scene .lt-line{fill: var(--color-ink-2); fill-opacity: 0.7;}
:where(:root[data-mode="night"]) .hero-scene .lt-line-2{fill: var(--color-muted); fill-opacity: 0.5;}
:where(:root[data-mode="night"]) .hero-scene .lt-av{fill: var(--color-accent-deep);}
:where(:root[data-mode="night"]) .hero-scene .lt-ok,:where(:root[data-mode="night"]) .hero-scene .lt-act{fill: var(--color-accent);}
:where(:root[data-mode="night"]) .hero-scene .lt-wait{fill: var(--color-accent-2);}
:where(:root[data-mode="night"]) .hero-scene .lt-notch,:where(:root[data-mode="night"]) .hero-scene .lt-port,:where(:root[data-mode="night"]) .hero-scene .rt-foot{fill: var(--color-shade);}
:where(:root[data-mode="night"]) .hero-scene .rt-ant{fill: var(--color-paper-3);}
:where(:root[data-mode="night"]) .hero-scene .rt-body{fill: color-mix(in oklab, var(--color-paper-3) 86%, var(--color-ink));}
:where(:root[data-mode="night"]) .hero-scene .rt-edge{fill: none; stroke: color-mix(in oklab, var(--color-light) 18%, transparent); stroke-width: 1.5; stroke-linecap: round;}
:where(:root[data-mode="night"]) .hero-scene .rt-touch{fill: var(--color-accent-2);}
:where(:root[data-mode="night"]) .hero-scene .rt-glyph{fill: none; stroke: var(--color-accent-ink); stroke-width: 3; stroke-linecap: round;}
:where(:root[data-mode="night"]) .hero-scene .rt-dot{fill: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .hero-scene .led-on,:where(:root[data-mode="night"]) .hero-scene .led-tx{fill: var(--color-accent);}
:where(:root[data-mode="night"]) .hero-scene .led-rx{fill: var(--color-accent-2);}
:where(:root[data-mode="night"]) .hero-scene .led-label{fill: var(--color-muted); font: 500 9px var(--font-body);}
:where(:root[data-mode="night"]) .hero-scene .pk-tx{fill: var(--color-accent-hi);}
:where(:root[data-mode="night"]) .hero-scene .pk-rx{fill: var(--color-accent-2);}
:where(:root[data-mode="night"]) .hero-scene .pk-halo{fill-opacity: 0.22;}
:where(:root[data-mode="night"]) .app,[dir="rtl"]:where([data-mode="night"]) .app{max-width: 380px; border: 0; border-radius: var(--radius-card); background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); color: var(--color-ink);}
:where(:root[data-mode="night"]) .app-top strong{font-family: var(--font-display); font-weight: 500;}
:where(:root[data-mode="night"]) .waiting{background: color-mix(in oklab, var(--color-accent-2) 14%, transparent); color: var(--color-ink); border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent-2) 40%, transparent);}
:where(:root[data-mode="night"]) .waiting span{color: var(--color-ink-2);}
:where(:root[data-mode="night"]) .chip-btn{font-weight: 600;}
:where(:root[data-mode="night"]) .chip-approve{background: var(--color-accent); color: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .chip-block{color: var(--color-ink); border-color: var(--chip-line);}
:where(:root[data-mode="night"]) .people button{background: color-mix(in oklab, var(--color-light) 5%, transparent); color: var(--color-ink); border-color: color-mix(in oklab, var(--color-light) 10%, transparent);}
:where(:root[data-mode="night"]) .people button[aria-pressed="true"]{background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink);}
:where(:root[data-mode="night"]) .avatar{background: color-mix(in oklab, var(--color-light) 10%, transparent); color: var(--color-ink); font-weight: 600;}
:where(:root[data-mode="night"]) .people button[aria-pressed="true"] .avatar{background: var(--color-accent); color: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .person-head p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .status::before{content: none;}
:where(:root[data-mode="night"]) .status{color: var(--color-accent); font-weight: 600;}
:where(:root[data-mode="night"]) .is-paused .status,:where(:root[data-mode="night"]) .is-paused .devices .st{color: var(--color-accent-2);}
:where(:root[data-mode="night"]) .devices li{border-top-color: color-mix(in oklab, var(--color-light) 7%, transparent);}
:where(:root[data-mode="night"]) .devices .ico{background: color-mix(in oklab, var(--color-light) 6%, transparent);}
:where(:root[data-mode="night"]) .devices .ico svg{stroke: var(--color-ink);}
:where(:root[data-mode="night"]) .devices .sub{color: var(--color-muted);}
:where(:root[data-mode="night"]) .devices .st{color: var(--color-accent); font-weight: 500;}
:where(:root[data-mode="night"]) .pause{border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; min-height: 52px;}
:where(:root[data-mode="night"]) .is-paused .pause{background: var(--color-accent-2); color: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .app-hint{color: var(--color-muted);}
:where(:root[data-mode="night"]) .band-white{background: var(--color-paper); border-top: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .band-mint{background: var(--color-paper-2);}
:where(:root[data-mode="night"]) .band-ink{background: var(--color-shade); color: var(--color-ink);}
:where(:root[data-mode="night"]) .band-ink .lede,:where(:root[data-mode="night"]) .band-ink p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .section-head h2 + p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .steps li{border-top: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .steps li::before,:where(:root[data-mode="night"]) .band-ink .steps li::before{font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--color-accent-ink); background: var(--color-accent); width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;}
:where(:root[data-mode="night"]) .band-ink .steps li{border-color: var(--color-rule);}
:where(:root[data-mode="night"]) .steps p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .split{gap: 1px; background: var(--color-rule);}
:where(:root[data-mode="night"]) .split .for-parents{background: var(--color-paper-2);}
:where(:root[data-mode="night"]) .split .for-business{background: var(--color-paper-3); color: var(--color-ink);}
:where(:root[data-mode="night"]) .split .for-business p,:where(:root[data-mode="night"]) .split p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .split li{border-top-color: var(--color-rule); color: var(--color-ink-2);}
:where(:root[data-mode="night"]) .split li::before,:where(:root[data-mode="night"]) .for-business li::before,[dir="rtl"]:where([data-mode="night"]) .split li::before{width: 7px; height: 7px; border: 0; top: 21px; background: var(--color-accent);}
:where(:root[data-mode="night"]) .split .btn-dark{background: var(--color-accent); color: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .ruled article{border-top: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .ruled .ic{border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-paper-2);}
:where(:root[data-mode="night"]) .ruled .ic svg{stroke: var(--color-accent); stroke-width: 1.6;}
:where(:root[data-mode="night"]) .ruled p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .card,:where(:root[data-mode="night"]) .zones,:where(:root[data-mode="night"]) .plans,:where(:root[data-mode="night"]) .seesnot,:where(:root[data-mode="night"]) .log{border: 0; background: var(--color-paper-2); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 7%, transparent), 0 0 0 1px var(--color-rule), 0 30px 60px -36px var(--color-shade);}
:where(:root[data-mode="night"]) .card{border-radius: var(--radius-card);}
:where(:root[data-mode="night"]) .band-mint .card{background: var(--color-paper-3);}
:where(:root[data-mode="night"]) .card .when{color: var(--color-accent-2); font-weight: 500;}
:where(:root[data-mode="night"]) .card p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .card .does{color: var(--color-ink-2); border-top-color: var(--color-rule); font-weight: 500;}
:where(:root[data-mode="night"]) .zones,:where(:root[data-mode="night"]) .plans,:where(:root[data-mode="night"]) .seesnot{border-radius: var(--radius-card);}
:where(:root[data-mode="night"]) .zone + .zone,:where(:root[data-mode="night"]) .plan + .plan,:where(:root[data-mode="night"]) .seesnot > div + div{border-inline-start: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .zone:nth-child(1),:where(:root[data-mode="night"]) .zone:nth-child(2),:where(:root[data-mode="night"]) .zone:nth-child(3){background: transparent; color: var(--color-ink);}
:where(:root[data-mode="night"]) .zone:nth-child(3) p,:where(:root[data-mode="night"]) .zone:nth-child(3) li,:where(:root[data-mode="night"]) .zone p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .zone li,:where(:root[data-mode="night"]) .zone:nth-child(3) li{border-top-color: var(--color-rule);}
:where(:root[data-mode="night"]) .zone .tag{border: 0; background: color-mix(in oklab, var(--color-accent) 16%, transparent); color: var(--color-accent-hi); font-weight: 500;}
:where(:root[data-mode="night"]) .zone:nth-child(3) .tag{background: color-mix(in oklab, var(--color-accent-2) 16%, transparent); color: var(--color-accent-2);}
:where(:root[data-mode="night"]) .plan{background: transparent;}
:where(:root[data-mode="night"]) .plan.feat{background: var(--color-paper-3);}
:where(:root[data-mode="night"]) .plan.biz{background: transparent;}
:where(:root[data-mode="night"]) .plan p,:where(:root[data-mode="night"]) .plan.feat p,:where(:root[data-mode="night"]) .plan.feat li{color: var(--color-muted);}
:where(:root[data-mode="night"]) .plan li,:where(:root[data-mode="night"]) .plan.feat li{border-top-color: var(--color-rule); color: var(--color-ink-2);}
:where(:root[data-mode="night"]) .plan .price{font-family: var(--font-display); font-weight: 500;}
:where(:root[data-mode="night"]) .plan li::before,:where(:root[data-mode="night"]) .plan.feat li::before{border-color: var(--color-accent);}
:where(:root[data-mode="night"]) .seesnot > div{background: transparent;}
:where(:root[data-mode="night"]) .seesnot > div + div{background: var(--color-paper-3); color: var(--color-ink);}
:where(:root[data-mode="night"]) .seesnot li{border-top-color: var(--color-rule); color: var(--color-ink-2);}
:where(:root[data-mode="night"]) .seesnot > div + div li{color: var(--color-muted);}
:where(:root[data-mode="night"]) .day{border: 0; border-radius: var(--radius-card); background: var(--color-well); color: var(--color-well-ink); padding: clamp(var(--space-lg), 3vw, var(--space-xl));}
:where(:root[data-mode="night"]) .day h3{color: var(--color-well-ink);}
:where(:root[data-mode="night"]) .day > p,:where(:root[data-mode="night"]) .day p{color: var(--color-well-muted) !important;}
:where(:root[data-mode="night"]) .bar{border: 0; border-radius: 12px; gap: var(--space-2xs); height: 58px;}
:where(:root[data-mode="night"]) .bar span{border-radius: 9px; font-weight: 600;}
:where(:root[data-mode="night"]) .seg-sleep{background: var(--color-well-ink); color: var(--color-well);}
:where(:root[data-mode="night"]) .seg-school{background: var(--color-accent-soft); color: var(--color-well-ink);}
:where(:root[data-mode="night"]) .seg-home{background: var(--color-accent-2); color: var(--color-well-ink);}
:where(:root[data-mode="night"]) .legend{color: var(--color-well-ink);}
:where(:root[data-mode="night"]) .legend i{border: 0;}
:where(:root[data-mode="night"]) .legend span:nth-child(1) i{background: var(--color-well-ink) !important;}
:where(:root[data-mode="night"]) .legend span:nth-child(2) i{background: var(--color-accent-soft) !important;}
:where(:root[data-mode="night"]) .legend span:nth-child(3) i{background: var(--color-accent-2) !important;}
:where(:root[data-mode="night"]) .hours{color: var(--color-well-muted);}
:where(:root[data-mode="night"]) .bubble{border: 0; background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule);}
:where(:root[data-mode="night"]) .bubble.reply{background: var(--color-accent); color: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .bubble .chip-btn[style]{border-color: var(--chip-line) !important; color: var(--color-ink); background: transparent;}
:where(:root[data-mode="night"]) .log{border-radius: var(--radius-card);}
:where(:root[data-mode="night"]) .log div{border-top-color: var(--color-rule);}
:where(:root[data-mode="night"]) .log div:first-child{background: transparent; color: var(--color-muted); font-weight: 500;}
:where(:root[data-mode="night"]) .log div:first-child time{color: var(--color-muted);}
:where(:root[data-mode="night"]) .log time{color: var(--color-muted);}
:where(:root[data-mode="night"]) .log .tg{color: var(--color-accent); font-weight: 500;}
:where(:root[data-mode="night"]) .log .tg.bad{color: var(--color-accent-2);}
:where(:root[data-mode="night"]) .compare th,:where(:root[data-mode="night"]) .compare td{border-bottom-color: var(--color-rule);}
:where(:root[data-mode="night"]) .compare thead th{font-family: var(--font-display); font-weight: 500; color: var(--color-muted); border-bottom-color: var(--color-rule);}
:where(:root[data-mode="night"]) .compare .us{background: color-mix(in oklab, var(--color-accent) 8%, transparent);}
:where(:root[data-mode="night"]) .compare thead .us{background: color-mix(in oklab, var(--color-accent) 16%, transparent); color: var(--color-accent-hi);}
:where(:root[data-mode="night"]) .compare td{color: var(--color-ink-2);}
:where(:root[data-mode="night"]) .compare .yes::before{color: var(--color-accent);}
:where(:root[data-mode="night"]) .compare .no::before,:where(:root[data-mode="night"]) .compare .part::before{color: var(--color-accent-2);}
:where(:root[data-mode="night"]) .specs th,:where(:root[data-mode="night"]) .specs td,:where(:root[data-mode="night"]) .band-ink .specs th,:where(:root[data-mode="night"]) .band-ink .specs td{border-top-color: var(--color-rule);}
:where(:root[data-mode="night"]) .specs td,:where(:root[data-mode="night"]) .band-ink .specs td{color: var(--color-muted);}
:where(:root[data-mode="night"]) .note,:where(:root[data-mode="night"]) .band-ink .note{border-inline-start: 2px solid var(--color-accent-2); color: var(--color-muted);}
:where(:root[data-mode="night"]) .faq details{border-top-color: var(--color-rule);}
:where(:root[data-mode="night"]) .faq details:last-child{border-bottom-color: var(--color-rule);}
:where(:root[data-mode="night"]) .faq summary{font-weight: 500;}
:where(:root[data-mode="night"]) .faq summary::after{color: var(--color-accent); font-weight: 300;}
:where(:root[data-mode="night"]) .faq details p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .signup{background: color-mix(in oklab, var(--color-light) 4%, transparent); border-radius: 28px; padding: var(--space-xs); box-shadow: inset 0 0 0 1px var(--color-rule);}
:where(:root[data-mode="night"]) .signup fieldset{padding: var(--space-sm) var(--space-md) 0;}
:where(:root[data-mode="night"]) .signup input[type="email"]{border: 0; background: transparent; color: var(--color-ink); border-radius: var(--radius-pill);}
:where(:root[data-mode="night"]) .signup input[type="email"]::placeholder{color: var(--color-muted);}
:where(:root[data-mode="night"]) .signup .opt input{accent-color: var(--color-accent);}
:where(:root[data-mode="night"]) .checks li{border-top-color: var(--color-rule);}
:where(:root[data-mode="night"]) .checks li::before{border-color: var(--color-accent);}
:where(:root[data-mode="night"]) .checks span{color: var(--color-muted);}
:where(:root[data-mode="night"]) .help-grid > div{border-top: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .help-grid p{color: var(--color-muted);}
:where(:root[data-mode="night"]) .rf-body{fill: var(--color-paper-3);}
:where(:root[data-mode="night"]) .rf-ink2{fill: var(--color-paper-2);}
:where(:root[data-mode="night"]) .rf-signal{stroke: var(--color-accent);}
:where(:root[data-mode="night"]) .rf-port{fill: var(--color-accent-deep);}
:where(:root[data-mode="night"]) .rf-led{fill: var(--color-accent);}
:where(:root[data-mode="night"]) .rf-touch{fill: var(--color-accent-2);}
:where(:root[data-mode="night"]) .rf-touch-ink{stroke: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .rf-touch-dot{fill: var(--color-accent-ink);}
:where(:root[data-mode="night"]) .hero .router-fig{filter: drop-shadow(0 40px 50px var(--color-shade));}
:where(:root[data-mode="night"]) .site-footer{background: var(--color-shade); color: var(--color-muted); border-top: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .site-footer .fh{color: var(--color-ink); font-weight: 500;}
:where(:root[data-mode="night"]) .site-footer a:hover{color: var(--color-accent);}
:where(:root[data-mode="night"]) .site-footer .legal{border-top-color: var(--color-rule);}
[dir="rtl"]:where([data-mode="night"]) body{font-family: var(--font-arabic);}
[dir="rtl"]:where([data-mode="night"]) h1,[dir="rtl"]:where([data-mode="night"]) h2,[dir="rtl"]:where([data-mode="night"]) h3{font-family: var(--font-arabic); font-weight: 600; letter-spacing: 0; line-height: 1.3;}
@media (max-width: 900px){:where(:root[data-mode="night"]) .zone + .zone,:where(:root[data-mode="night"]) .plan + .plan,:where(:root[data-mode="night"]) .seesnot > div + div{border-inline-start: 0; border-top: 1px solid var(--color-rule);}
:where(:root[data-mode="night"]) .nav{background: var(--color-paper);}}
@media (prefers-reduced-motion: reduce){:where(:root[data-mode="night"]) .hero-scene .pk{display: none;}}
:root:where([data-mode="night"]){--radius-card: 24px;}
:where(:root[data-mode="night"]) body{font-size: 1.0938rem; line-height: 1.5;}
:where(:root[data-mode="night"]) h1{font-size: clamp(2.8rem, 5.4vw + 0.6rem, 5rem); line-height: 1.02;}
:where(:root[data-mode="night"]) h2{font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem); line-height: 1.04;}
:where(:root[data-mode="night"]) h3{font-size: 1.35rem; line-height: 1.15;}
:where(:root[data-mode="night"]) .btn{min-height: 54px; border-radius: 16px;}
:where(:root[data-mode="night"]) .btn-small{min-height: 42px;}
:where(:root[data-mode="night"]) .pause{border-radius: 16px;}
:where(:root[data-mode="night"]) .site-header{padding-bottom: var(--space-xs);}
:where(:root[data-mode="night"]) .nav{gap: var(--space-xs);}
:where(:root[data-mode="night"]) .nav > a:not(.btn){padding: var(--space-xs) var(--space-md); border-radius: 16px; background: color-mix(in oklab, var(--color-light) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 10%, transparent); font-size: 0.92rem;}
:where(:root[data-mode="night"]) .nav > a:not(.btn):hover{background: color-mix(in oklab, var(--color-light) 9%, transparent);}
:where(:root[data-mode="night"]) .nav a[aria-current="page"]{background: var(--color-ink); color: var(--color-accent-ink); box-shadow: none;}
:where(:root[data-mode="night"]) .logo-day{display: none;}
:where(:root[data-mode="night"]) .logo-night{display: block;}
:where(:root[data-mode="night"]) .band-ink{padding-block: calc(var(--section) + var(--space-sm));}
:where(:root[data-mode="night"]) .steps li{border-top: 0; background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 7%, transparent), 0 0 0 1px var(--color-rule);}
:where(:root[data-mode="night"]) .band-mint .steps li{background: var(--color-paper-3);}
:where(:root[data-mode="night"]) .steps li::before,:where(:root[data-mode="night"]) .band-ink .steps li::before{width: 56px; height: 56px; font-size: 1.7rem;}
:where(:root[data-mode="night"]) .split{gap: var(--space-lg); padding: var(--section) var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; background: transparent;}
:where(:root[data-mode="night"]) .split > div{border-radius: var(--radius-card); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 7%, transparent), 0 0 0 1px var(--color-rule);}
:where(:root[data-mode="night"]) .split .inner,:where(:root[data-mode="night"]) .split .for-business .inner{margin: 0; max-width: none;}
:where(:root[data-mode="night"]) .zones,:where(:root[data-mode="night"]) .plans,:where(:root[data-mode="night"]) .seesnot{gap: var(--space-lg); border-radius: 0; overflow: visible; background: transparent; box-shadow: none;}
:where(:root[data-mode="night"]) .zone,:where(:root[data-mode="night"]) .plan,:where(:root[data-mode="night"]) .seesnot > div{border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 7%, transparent), 0 0 0 1px var(--color-rule), 0 30px 60px -36px var(--color-shade);}
:where(:root[data-mode="night"]) .zone + .zone,:where(:root[data-mode="night"]) .plan + .plan,:where(:root[data-mode="night"]) .seesnot > div + div{border-inline-start: 0;}
:where(:root[data-mode="night"]) .zone:nth-child(3),:where(:root[data-mode="night"]) .plan.feat,:where(:root[data-mode="night"]) .seesnot > div + div{background: var(--color-paper-3);}
:where(:root[data-mode="night"]) .zone:nth-child(1),:where(:root[data-mode="night"]) .zone:nth-child(2){background: var(--color-paper-2);}
:where(:root[data-mode="night"]) .card .when{align-self: flex-start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 6%, transparent); font-size: 0.88rem;}
:where(:root[data-mode="night"]) .table-scroll{background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-2xs) var(--space-xs); box-shadow: 0 0 0 1px var(--color-rule);}
:where(:root[data-mode="night"]) .help-grid > div{border-top: 0; background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: 0 0 0 1px var(--color-rule);}
:where(:root[data-mode="night"]) .faq summary::after{content: "+"; width: 36px; height: 36px; top: 16px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in oklab, var(--color-accent) 18%, transparent); color: var(--color-accent-hi); font-size: 1.4rem; line-height: 1;}
:where(:root[data-mode="night"]) .site-header .wrap{gap: var(--space-md);}
:where(:root[data-mode="night"]) .nav{gap: var(--space-xs);}
:where(:root[data-mode="night"]) .nav > a{white-space: nowrap;}
:where(:root[data-mode="night"]) .nav > a:not(.btn){padding: var(--space-xs) var(--space-sm); font-size: 0.9rem;}
:where(:root[data-mode="night"]) .nav a.btn-small{padding: 0 var(--space-md);}
:where(:root[data-mode="night"]) .mode-btn{border: 0; border-radius: 16px; background: color-mix(in oklab, var(--color-light) 6%, transparent); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 14%, transparent);}
:where(:root[data-mode="night"]) .mode-btn:hover{background: color-mix(in oklab, var(--color-light) 10%, transparent);}
:where(:root[data-mode="night"]) .mode-btn svg{stroke: var(--color-accent-2);}
:where(:root[data-mode="night"]) .mode-btn .mode-to-night{display: none;}
:where(:root[data-mode="night"]) .mode-btn .mode-to-day{display: inline-grid;}
@media (max-width: 900px){:where(:root[data-mode="night"]) .zone + .zone,:where(:root[data-mode="night"]) .plan + .plan,:where(:root[data-mode="night"]) .seesnot > div + div{border-top: 0;}
:where(:root[data-mode="night"]) .nav > a:not(.btn){box-shadow: none; background: transparent; padding: var(--space-xs) 0;}}