/* Hallmark · shape: Workbench, shared by both modes · genre: playful · theme: Hum (by request, day mode of a day/night pair with Dusk) · job: sign up · draw: manual
 * hero: Settled, the head left, the app as a card sheet, the router and a laptop trading traffic along its foot · nav: pill links and a day/night switch · footer: a torn ink sheet · imagery: the product, built · signature: the same router-to-laptop scene as night, in cut paper
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
:root:where([data-mode="day"]){color-scheme: light;
  --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(52% 0.19 27); --color-success: oklch(50% 0.12 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(97% 0.012 95); --color-paper-2: oklch(94.5% 0.018 95); --color-paper-3: oklch(91% 0.022 95);
  --color-ink: oklch(20% 0.014 255); --color-ink-2: oklch(29% 0.014 255); --color-muted: oklch(47% 0.014 255);
  --color-rule: oklch(87% 0.016 95);
  --color-accent: oklch(87% 0.175 96); --color-accent-deep: oklch(72% 0.16 92); --color-accent-ink: oklch(20% 0.014 255);
  --color-accent-2: oklch(50% 0.17 250); --color-accent-3: oklch(70% 0.2 22);
  --color-mint: oklch(82% 0.15 152); --color-mint-deep: oklch(48% 0.12 155); --color-focus: oklch(50% 0.17 250);
  --color-card: oklch(98.8% 0.007 95); --color-edge: oklch(83% 0.04 88); --color-fringe: oklch(99.2% 0.006 95);
  --color-kraft: oklch(63% 0.085 62); --color-sand: oklch(77% 0.1 76); --color-sugar: oklch(89% 0.035 236);
  --color-hill-1: oklch(94.5% 0.03 118); --color-hill-2: oklch(91.5% 0.045 135); --color-leaf: oklch(64% 0.15 150);
  --font-display: "Chillax", ui-rounded, ui-sans-serif, sans-serif; --font-body: var(--font-display);
  --font-outlier: "Geist Mono", ui-monospace, monospace;
  --radius-card: 24px; --radius-stock: 16px; --radius-input: 14px; --radius-pill: 999px; --rule-hair: 1px;
  --shadow-card: 0 1px 2px oklch(20% 0.014 255 / 0.06), 0 12px 28px -14px oklch(20% 0.014 255 / 0.22);
  --shadow-paper: drop-shadow(0 0 0.6px oklch(20% 0.014 255 / 0.32)) drop-shadow(1.5px 2.5px 1.5px oklch(20% 0.014 255 / 0.1)) drop-shadow(6px 14px 16px oklch(20% 0.014 255 / 0.13));
  --tracking-display: -0.03em; --display-weight: 600;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);}
:where(:root[data-mode="day"]) *,:where(:root[data-mode="day"]) *::before,:where(:root[data-mode="day"]) *::after{box-sizing: border-box;}
html:where([data-mode="day"]),:where(:root[data-mode="day"]) body{overflow-x: clip;}
html:where([data-mode="day"]){scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl);}
:where(:root[data-mode="day"]) 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="day"]) ::selection{background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink);}
:where(:root[data-mode="day"]) :focus-visible{outline: 2px solid var(--color-focus); outline-offset: 2px;}
:where(:root[data-mode="day"]) a{color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em;}
:where(:root[data-mode="day"]) h1,:where(:root[data-mode="day"]) h2,:where(:root[data-mode="day"]) 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="day"]) h1{max-width: 20ch; font-size: var(--text-display);}
:where(:root[data-mode="day"]) h2{max-width: 30ch; font-size: var(--text-section);}
:where(:root[data-mode="day"]) h3{max-width: 40ch; font-size: var(--text-title); line-height: 1.2;}
:where(:root[data-mode="day"]) .lead{font-size: var(--text-lead); line-height: 1.45; max-width: 52ch;}
:where(:root[data-mode="day"]) p{margin: 0; text-wrap: pretty;}
:where(:root[data-mode="day"]) p:not([class]){max-width: 65ch;}
:where(:root[data-mode="day"]) img,:where(:root[data-mode="day"]) video{max-width: 100%; height: auto; display: block;}
:where(:root[data-mode="day"]) svg{display: block;}
:where(:root[data-mode="day"]) [hidden]{display: none !important;}
:where(:root[data-mode="day"]) button,:where(:root[data-mode="day"]) input,:where(:root[data-mode="day"]) select,:where(:root[data-mode="day"]) textarea{font: inherit;}
:where(:root[data-mode="day"]) .container{width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box;}
:where(:root[data-mode="day"]) .num,:where(:root[data-mode="day"]) .figure,:where(:root[data-mode="day"]) td.num{font-variant-numeric: tabular-nums;}
:where(:root[data-mode="day"]) .visually-hidden{position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
:where(:root[data-mode="day"]) [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="day"]) [data-slot] > img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
:where(:root[data-mode="day"]) [data-slot]:has(> img) > :not(img):not([data-keep]){display: none !important;}
@media (max-width: 60rem){:root:where([data-mode="day"]){--gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px;}}
@media (max-width: 40rem){:root:where([data-mode="day"]){--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="day"]) *:not(.keep-motion),:where(:root[data-mode="day"]) *:not(.keep-motion)::before,:where(:root[data-mode="day"]) *: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="day"]) [data-slot] > img{filter: saturate(1.06) brightness(1.04);}
:root:where([data-mode="day"]){--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --torn-both: polygon(0.0% 0.0px, 2.08% 0.0px, 4.17% 1.1px, 6.25% 0.0px, 8.33% 0.3px, 10.42% 0.0px, 12.5% 0.0px, 14.58% 0.1px, 16.67% 0.0px, 18.75% 0.0px, 20.83% 0.0px, 22.92% 0.0px, 25.0% 0.0px, 27.08% 2.3px, 29.17% 0.0px, 31.25% 0.0px, 33.33% 0.9px, 35.42% 4.0px, 37.5% 4.6px, 39.58% 3.8px, 41.67% 7.2px, 43.75% 4.0px, 45.83% 6.5px, 47.92% 5.0px, 50.0% 2.5px, 52.08% 0.0px, 54.17% 0.0px, 56.25% 2.2px, 58.33% 0.0px, 60.42% 0.6px, 62.5% 1.5px, 64.58% 0.7px, 66.67% 1.0px, 68.75% 0.0px, 70.83% 0.0px, 72.92% 0.0px, 75.0% 1.3px, 77.08% 0.8px, 79.17% 0.0px, 81.25% 0.6px, 83.33% 0.3px, 85.42% 0.0px, 87.5% 2.1px, 89.58% 3.5px, 91.67% 1.7px, 93.75% 2.2px, 95.83% 2.4px, 97.92% 5.0px, 100.0% 6.6px, 100.0% calc(100% - 7.4px), 97.92% calc(100% - 4.7px), 95.83% calc(100% - 5.7px), 93.75% calc(100% - 6.3px), 91.67% calc(100% - 7.8px), 89.58% calc(100% - 5.3px), 87.5% calc(100% - 3.0px), 85.42% calc(100% - 0.3px), 83.33% calc(100% - 0.0px), 81.25% calc(100% - 0.0px), 79.17% calc(100% - 2.6px), 77.08% calc(100% - 0.0px), 75.0% calc(100% - 0.0px), 72.92% calc(100% - 0.0px), 70.83% calc(100% - 1.9px), 68.75% calc(100% - 0.0px), 66.67% calc(100% - 0.3px), 64.58% calc(100% - 2.9px), 62.5% calc(100% - 5.3px), 60.42% calc(100% - 5.5px), 58.33% calc(100% - 8.9px), 56.25% calc(100% - 7.7px), 54.17% calc(100% - 8.5px), 52.08% calc(100% - 10.0px), 50.0% calc(100% - 10.0px), 47.92% calc(100% - 9.4px), 45.83% calc(100% - 8.3px), 43.75% calc(100% - 6.9px), 41.67% calc(100% - 10.0px), 39.58% calc(100% - 9.8px), 37.5% calc(100% - 10.0px), 35.42% calc(100% - 9.5px), 33.33% calc(100% - 7.1px), 31.25% calc(100% - 7.5px), 29.17% calc(100% - 6.9px), 27.08% calc(100% - 6.2px), 25.0% calc(100% - 4.9px), 22.92% calc(100% - 6.2px), 20.83% calc(100% - 3.5px), 18.75% calc(100% - 3.0px), 16.67% calc(100% - 1.2px), 14.58% calc(100% - 0.0px), 12.5% calc(100% - 0.0px), 10.42% calc(100% - 0.0px), 8.33% calc(100% - 1.9px), 6.25% calc(100% - 0.1px), 4.17% calc(100% - 0.7px), 2.08% calc(100% - 3.4px), 0.0% calc(100% - 0.0px));
  --torn-top: polygon(0.0% 0.0px, 2.08% 0.0px, 4.17% 1.1px, 6.25% 0.0px, 8.33% 0.3px, 10.42% 0.0px, 12.5% 0.0px, 14.58% 0.1px, 16.67% 0.0px, 18.75% 0.0px, 20.83% 0.0px, 22.92% 0.0px, 25.0% 0.0px, 27.08% 2.3px, 29.17% 0.0px, 31.25% 0.0px, 33.33% 0.9px, 35.42% 4.0px, 37.5% 4.6px, 39.58% 3.8px, 41.67% 7.2px, 43.75% 4.0px, 45.83% 6.5px, 47.92% 5.0px, 50.0% 2.5px, 52.08% 0.0px, 54.17% 0.0px, 56.25% 2.2px, 58.33% 0.0px, 60.42% 0.6px, 62.5% 1.5px, 64.58% 0.7px, 66.67% 1.0px, 68.75% 0.0px, 70.83% 0.0px, 72.92% 0.0px, 75.0% 1.3px, 77.08% 0.8px, 79.17% 0.0px, 81.25% 0.6px, 83.33% 0.3px, 85.42% 0.0px, 87.5% 2.1px, 89.58% 3.5px, 91.67% 1.7px, 93.75% 2.2px, 95.83% 2.4px, 97.92% 5.0px, 100.0% 6.6px, 100% 100%, 0% 100%);
  --torn-bottom: polygon(0% 0%, 100% 0%, 100.0% calc(100% - 7.4px), 97.92% calc(100% - 4.7px), 95.83% calc(100% - 5.7px), 93.75% calc(100% - 6.3px), 91.67% calc(100% - 7.8px), 89.58% calc(100% - 5.3px), 87.5% calc(100% - 3.0px), 85.42% calc(100% - 0.3px), 83.33% calc(100% - 0.0px), 81.25% calc(100% - 0.0px), 79.17% calc(100% - 2.6px), 77.08% calc(100% - 0.0px), 75.0% calc(100% - 0.0px), 72.92% calc(100% - 0.0px), 70.83% calc(100% - 1.9px), 68.75% calc(100% - 0.0px), 66.67% calc(100% - 0.3px), 64.58% calc(100% - 2.9px), 62.5% calc(100% - 5.3px), 60.42% calc(100% - 5.5px), 58.33% calc(100% - 8.9px), 56.25% calc(100% - 7.7px), 54.17% calc(100% - 8.5px), 52.08% calc(100% - 10.0px), 50.0% calc(100% - 10.0px), 47.92% calc(100% - 9.4px), 45.83% calc(100% - 8.3px), 43.75% calc(100% - 6.9px), 41.67% calc(100% - 10.0px), 39.58% calc(100% - 9.8px), 37.5% calc(100% - 10.0px), 35.42% calc(100% - 9.5px), 33.33% calc(100% - 7.1px), 31.25% calc(100% - 7.5px), 29.17% calc(100% - 6.9px), 27.08% calc(100% - 6.2px), 25.0% calc(100% - 4.9px), 22.92% calc(100% - 6.2px), 20.83% calc(100% - 3.5px), 18.75% calc(100% - 3.0px), 16.67% calc(100% - 1.2px), 14.58% calc(100% - 0.0px), 12.5% calc(100% - 0.0px), 10.42% calc(100% - 0.0px), 8.33% calc(100% - 1.9px), 6.25% calc(100% - 0.1px), 4.17% calc(100% - 0.7px), 2.08% calc(100% - 3.4px), 0.0% calc(100% - 0.0px));
  --font-arabic: "Baloo Bhaijaan 2", var(--font-display);

  --ink: var(--color-ink);
  --ink-2: var(--color-ink-2);
  --teal: var(--color-accent-2);
  --teal-dark: var(--color-mint-deep);
  --mint: var(--color-mint);
  --mint-2: var(--color-paper-2);
  --paper: var(--color-paper);
  --white: var(--color-card);
  --amber: var(--color-accent);
  --amber-deep: var(--color-accent-deep);
  --coral: var(--color-accent-3);
  --line: var(--color-rule);
  --line-light: color-mix(in oklab, var(--color-paper) 20%, transparent);
  --text: var(--color-ink);
  --text-soft: var(--color-muted);
  --on-ink: var(--color-paper);
  --on-ink-soft: color-mix(in oklab, var(--color-paper) 76%, var(--color-ink));
  --on-ink-softer: color-mix(in oklab, var(--color-paper) 70%, var(--color-ink));
  --header-bg: var(--color-paper);
  --chip-line: var(--color-edge);
  --display: var(--font-display);
  --body: var(--font-body);
  --arabic: var(--font-arabic);
  --arabic-display: var(--font-arabic);
  --wrap: 1180px;}
:where(:root[data-mode="day"]) body{background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: 1.0938rem; line-height: 1.5;}
:where(:root[data-mode="day"]) p{margin: 0 0 1em;}
:where(:root[data-mode="day"]) .card p,:where(:root[data-mode="day"]) .ruled p,:where(:root[data-mode="day"]) .seesnot p,:where(:root[data-mode="day"]) .faq details p{margin: 0;}
:where(:root[data-mode="day"]) h1,:where(:root[data-mode="day"]) h2,:where(:root[data-mode="day"]) h3,:where(:root[data-mode="day"]) h4{font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display);}
:where(:root[data-mode="day"]) h1{font-size: clamp(2.8rem, 5.4vw + 0.6rem, 5rem); line-height: 1.02;}
:where(:root[data-mode="day"]) h2{font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem); line-height: 1.04;}
:where(:root[data-mode="day"]) h3{font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em;}
:where(:root[data-mode="day"]) .lede{color: var(--color-ink-2);}
:where(:root[data-mode="day"]) a{color: var(--color-accent-2);}
:where(:root[data-mode="day"]) .btn,:where(:root[data-mode="day"]) .nav a,:where(:root[data-mode="day"]) .site-footer a,:where(:root[data-mode="day"]) .brand{color: inherit;}
:where(:root[data-mode="day"]) :focus-visible{outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 10px;}
:where(:root[data-mode="day"]) .site-header{background: var(--grain), var(--color-paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; clip-path: var(--torn-bottom); padding-bottom: var(--space-xs); filter: drop-shadow(0 4px 6px color-mix(in oklab, var(--color-ink) 10%, transparent));}
:where(:root[data-mode="day"]) .nav{gap: var(--space-sm);}
:where(:root[data-mode="day"]) .nav > a:not(.btn){padding: var(--space-xs) var(--space-md); border-radius: var(--radius-stock); border: 0; background: var(--grain), var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-edge); font-weight: 500; font-size: 0.92rem; transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap);}
:where(:root[data-mode="day"]) .nav > a:not(.btn):hover{translate: 0 -1px; box-shadow: inset 0 0 0 1px var(--color-rule), 0 4px 0 var(--color-edge);}
:where(:root[data-mode="day"]) .nav a[aria-current="page"]{background: var(--color-ink); color: var(--color-paper); box-shadow: 0 3px 0 var(--color-ink-2);}
:where(:root[data-mode="day"]) .nav .lang{color: var(--color-ink-2);}
:where(:root[data-mode="day"]) .menu-btn{border: 0; border-radius: var(--radius-stock); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 4px 0 var(--color-edge);}
:where(:root[data-mode="day"]) .btn{--edge: 5px; min-height: 54px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-weight: 600; background: var(--grain), var(--fibre), var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap);}
:where(:root[data-mode="day"]) .btn:hover{--edge: 7px; transform: none; translate: 0 -2px;}
:where(:root[data-mode="day"]) .btn:active{--edge: 1px; translate: 0 4px;}
:where(:root[data-mode="day"]) .btn-primary,:where(:root[data-mode="day"]) .band-ink .btn-primary,[dir="rtl"]:where([data-mode="day"]) .btn-primary{background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); border: 0; box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent); transition-timing-function: var(--ease-spring);}
:where(:root[data-mode="day"]) .btn-primary:hover,:where(:root[data-mode="day"]) .band-ink .btn-primary:hover{box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent);}
:where(:root[data-mode="day"]) .btn-dark{background: var(--color-ink); color: var(--color-paper); box-shadow: 0 var(--edge) 0 0 var(--color-ink-2);}
:where(:root[data-mode="day"]) .band-ink .btn:not(.btn-primary){background: var(--grain), var(--color-ink-2); color: var(--color-paper); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-paper) 20%, transparent), 0 var(--edge) 0 0 color-mix(in oklab, var(--color-ink) 60%, var(--color-ink-2));}
:where(:root[data-mode="day"]) .btn-small{min-height: 42px; --edge: 4px; padding: 0 var(--space-md);}
:where(:root[data-mode="day"]) .hero{position: relative; isolation: isolate; padding-bottom: calc(var(--section) + var(--space-2xl));}
:where(:root[data-mode="day"]) .hero::after{content: ""; position: absolute; inset: auto 0 0 0; height: 64px; z-index: -1; background: var(--grain), var(--color-hill-2); clip-path: var(--torn-top);}
:where(:root[data-mode="day"]) .hero::before{content: ""; position: absolute; inset: auto 0 0 0; height: 104px; z-index: -2; background: var(--grain), var(--color-hill-1); clip-path: var(--torn-top);}
:where(:root[data-mode="day"]) .hero h1{max-width: 12ch;}
:where(:root[data-mode="day"]) .app,[dir="rtl"]:where([data-mode="day"]) .app{max-width: 380px; border: 0; border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: none; filter: var(--shadow-paper); rotate: -1.2deg; overflow: visible;}
:where(:root[data-mode="day"]) .hero:not(.hero-solo) .wrap > div:last-child{position: relative;}
:where(:root[data-mode="day"]) .hero:not(.hero-solo) .wrap > div:last-child::before{content: ""; position: absolute; inset: 6% 4% 12% 8%; z-index: -1; background: var(--grain), var(--color-sugar); rotate: 3deg; border-radius: 6px; clip-path: var(--torn-both);}
:where(:root[data-mode="day"]) .app-top strong{font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;}
:where(:root[data-mode="day"]) .waiting{background: var(--grain), var(--color-ink); color: var(--color-paper); border-radius: var(--radius-stock);}
:where(:root[data-mode="day"]) .waiting span{color: color-mix(in oklab, var(--color-paper) 76%, var(--color-ink));}
:where(:root[data-mode="day"]) .chip-btn{border-radius: 12px; font-weight: 600;}
:where(:root[data-mode="day"]) .chip-approve{background: var(--grain), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 3px 0 var(--color-accent-deep);}
:where(:root[data-mode="day"]) .chip-block{color: var(--color-paper); border-color: color-mix(in oklab, var(--color-paper) 40%, transparent);}
:where(:root[data-mode="day"]) .people button{border: 0; border-radius: var(--radius-stock); background: var(--grain), var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-edge);}
:where(:root[data-mode="day"]) .people button[aria-pressed="true"]{background: var(--color-ink); color: var(--color-paper); box-shadow: 0 3px 0 var(--color-ink-2);}
:where(:root[data-mode="day"]) .avatar{background: var(--color-mint); color: var(--color-ink); font-weight: 600;}
:where(:root[data-mode="day"]) .people button[aria-pressed="true"] .avatar{background: var(--color-accent);}
:where(:root[data-mode="day"]) .status::before{content: none;}
:where(:root[data-mode="day"]) .status{color: var(--color-mint-deep); font-weight: 600;}
:where(:root[data-mode="day"]) .is-paused .status,:where(:root[data-mode="day"]) .is-paused .devices .st{color: var(--color-accent-3);}
:where(:root[data-mode="day"]) .devices .ico{background: var(--grain), var(--color-paper-2); border-radius: 12px;}
:where(:root[data-mode="day"]) .devices .st{color: var(--color-mint-deep); font-weight: 600;}
:where(:root[data-mode="day"]) .pause{border: 0; border-radius: var(--radius-stock); background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); font-weight: 600; box-shadow: 0 5px 0 var(--color-accent-deep); transition: translate var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring);}
:where(:root[data-mode="day"]) .pause:active{transform: none; translate: 0 4px; box-shadow: 0 1px 0 var(--color-accent-deep);}
:where(:root[data-mode="day"]) .is-paused .pause{background: var(--grain), var(--color-accent-3); color: var(--color-ink); box-shadow: 0 5px 0 color-mix(in oklab, var(--color-accent-3) 70%, var(--color-ink));}
:where(:root[data-mode="day"]) .app-hint{color: var(--color-muted);}
:where(:root[data-mode="day"]) .band-white{background: var(--grain), var(--fibre), var(--color-paper-2);}
:where(:root[data-mode="day"]) .band-mint{background: var(--grain), var(--color-paper-3);}
:where(:root[data-mode="day"]) .band-ink{background: var(--grain), var(--color-ink); color: var(--color-paper); clip-path: var(--torn-both); padding-block: calc(var(--section) + var(--space-sm));}
:where(:root[data-mode="day"]) .band-ink h2{color: var(--color-paper);}
:where(:root[data-mode="day"]) .cta-band h2{max-width: 16ch;}
:where(:root[data-mode="day"]) .steps li{border-top: 0; background: var(--grain), var(--color-card); border-radius: var(--radius-card); padding: var(--space-lg) var(--space-lg) var(--space-lg); filter: var(--shadow-paper);}
:where(:root[data-mode="day"]) .steps li:nth-child(odd){rotate: -0.8deg;}
:where(:root[data-mode="day"]) .steps li:nth-child(even){rotate: 0.7deg;}
:where(:root[data-mode="day"]) .steps li::before,:where(:root[data-mode="day"]) .band-ink .steps li::before{width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--grain), var(--color-accent); color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.7rem;}
:where(:root[data-mode="day"]) .steps p{color: var(--color-ink-2);}
:where(:root[data-mode="day"]) .split{gap: clamp(var(--space-md), 2vw, var(--space-lg)); padding: var(--section) var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;}
:where(:root[data-mode="day"]) .split > div{border-radius: var(--radius-card); filter: var(--shadow-paper);}
:where(:root[data-mode="day"]) .split .for-parents{background: var(--grain), var(--fibre), var(--color-accent); rotate: -0.6deg;}
:where(:root[data-mode="day"]) .split .for-business{background: var(--grain), var(--color-ink); rotate: 0.5deg;}
:where(:root[data-mode="day"]) .split .inner,:where(:root[data-mode="day"]) .split .for-business .inner{margin: 0; max-width: none;}
:where(:root[data-mode="day"]) .split li{border-top-color: color-mix(in oklab, var(--color-ink) 18%, transparent);}
:where(:root[data-mode="day"]) .for-business li{border-top-color: color-mix(in oklab, var(--color-paper) 18%, transparent);}
:where(:root[data-mode="day"]) .split li::before,:where(:root[data-mode="day"]) .for-business li::before,[dir="rtl"]:where([data-mode="day"]) .split li::before{width: 12px; height: 12px; border: 0; background: var(--color-ink); top: 20px; border-radius: 4px;}
:where(:root[data-mode="day"]) .for-business li::before,[dir="rtl"]:where([data-mode="day"]) .for-business li::before{background: var(--color-mint);}
:where(:root[data-mode="day"]) .for-parents .btn-dark{box-shadow: 0 var(--edge) 0 0 var(--color-ink-2);}
:where(:root[data-mode="day"]) .ruled article{border-top: 2px dashed var(--color-edge);}
:where(:root[data-mode="day"]) .ruled .ic{border: 0; border-radius: 14px; background: var(--grain), var(--color-accent); box-shadow: 0 3px 0 var(--color-accent-deep);}
:where(:root[data-mode="day"]) .ruled article:nth-child(3n+2) .ic{background: var(--grain), var(--color-mint); box-shadow: 0 3px 0 var(--color-mint-deep);}
:where(:root[data-mode="day"]) .ruled article:nth-child(3n+3) .ic{background: var(--grain), var(--color-sugar); box-shadow: 0 3px 0 var(--color-edge);}
:where(:root[data-mode="day"]) .ruled .ic svg{stroke: var(--color-ink); stroke-width: 2;}
:where(:root[data-mode="day"]) .card,:where(:root[data-mode="day"]) .zones,:where(:root[data-mode="day"]) .plans,:where(:root[data-mode="day"]) .seesnot,:where(:root[data-mode="day"]) .day,:where(:root[data-mode="day"]) .log,:where(:root[data-mode="day"]) .bubble{border: 0; filter: var(--shadow-paper);}
:where(:root[data-mode="day"]) .card{border-radius: var(--radius-card); background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .cards .card:nth-child(odd){rotate: -0.6deg;}
:where(:root[data-mode="day"]) .cards .card:nth-child(even){rotate: 0.6deg; translate: 0 8px;}
:where(:root[data-mode="day"]) .band-mint .card{background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .card .when{align-self: flex-start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--grain), var(--color-paper-3); color: var(--color-ink-2); font-weight: 500; font-size: 0.88rem;}
:where(:root[data-mode="day"]) .card .does{border-top: 2px dashed var(--color-edge);}
:where(:root[data-mode="day"]) .zones,:where(:root[data-mode="day"]) .plans,:where(:root[data-mode="day"]) .seesnot{gap: clamp(var(--space-md), 2vw, var(--space-lg)); border-radius: 0; overflow: visible; background: transparent; filter: none;}
:where(:root[data-mode="day"]) .zone,:where(:root[data-mode="day"]) .plan,:where(:root[data-mode="day"]) .seesnot > div{border-radius: var(--radius-card); filter: var(--shadow-paper);}
:where(:root[data-mode="day"]) .zone + .zone,:where(:root[data-mode="day"]) .plan + .plan,:where(:root[data-mode="day"]) .seesnot > div + div{border-inline-start: 0;}
:where(:root[data-mode="day"]) .zone:nth-child(1),:where(:root[data-mode="day"]) .plan{background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .zone:nth-child(2){background: var(--grain), var(--color-mint);}
:where(:root[data-mode="day"]) .zone:nth-child(3),:where(:root[data-mode="day"]) .plan.feat,:where(:root[data-mode="day"]) .seesnot > div + div{background: var(--grain), var(--color-ink); color: var(--color-paper);}
:where(:root[data-mode="day"]) .zone .tag{border: 0; background: var(--color-ink); color: var(--color-paper); font-weight: 600;}
:where(:root[data-mode="day"]) .zone:nth-child(3) .tag{background: var(--color-accent); color: var(--color-ink);}
:where(:root[data-mode="day"]) .zone li{border-top-color: color-mix(in oklab, var(--color-ink) 14%, transparent);}
:where(:root[data-mode="day"]) .plan.biz{background: var(--grain), var(--color-sugar);}
:where(:root[data-mode="day"]) .plan.feat{rotate: -0.8deg;}
:where(:root[data-mode="day"]) .plan .price{font-family: var(--font-display); font-weight: 600;}
:where(:root[data-mode="day"]) .plan li::before,[dir="rtl"]:where([data-mode="day"]) .plan li::before{border-color: var(--color-mint-deep);}
:where(:root[data-mode="day"]) .plan.feat li::before{border-color: var(--color-accent);}
:where(:root[data-mode="day"]) .seesnot > div:first-child{background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .day{border-radius: var(--radius-card); background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .bar{border: 0; height: 64px; gap: var(--space-2xs); border-radius: 16px;}
:where(:root[data-mode="day"]) .bar span{border-radius: 12px; font-weight: 600;}
:where(:root[data-mode="day"]) .seg-sleep{background: var(--grain), var(--color-ink); color: var(--color-paper);}
:where(:root[data-mode="day"]) .seg-school{background: var(--grain), var(--color-mint);}
:where(:root[data-mode="day"]) .seg-home{background: var(--grain), var(--color-accent);}
:where(:root[data-mode="day"]) .legend i{border: 0; border-radius: 5px;}
:where(:root[data-mode="day"]) .legend span:nth-child(2) i{background: var(--color-mint) !important;}
:where(:root[data-mode="day"]) .legend span:nth-child(3) i{background: var(--color-accent) !important;}
:where(:root[data-mode="day"]) .bubble{border-radius: 24px 24px 24px 8px; background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .bubble.reply{background: var(--grain), var(--color-accent); border-radius: 24px 24px 8px 24px;}
:where(:root[data-mode="day"]) .bubble .chip-btn[style]{border-color: var(--color-edge) !important; background: var(--color-card);}
:where(:root[data-mode="day"]) .log{border-radius: var(--radius-card); background: var(--grain), var(--color-card);}
:where(:root[data-mode="day"]) .log div:first-child{background: var(--grain), var(--color-ink);}
:where(:root[data-mode="day"]) .log .tg{color: var(--color-mint-deep); font-weight: 600;}
:where(:root[data-mode="day"]) .log .tg.bad{color: var(--color-ink); background: var(--grain), var(--color-accent); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill);}
:where(:root[data-mode="day"]) .table-scroll{background: var(--grain), var(--color-card); border-radius: var(--radius-card); filter: var(--shadow-paper); padding: var(--space-2xs) var(--space-xs);}
:where(:root[data-mode="day"]) .compare th,:where(:root[data-mode="day"]) .compare td{border-bottom-color: var(--color-rule);}
:where(:root[data-mode="day"]) .compare thead th{font-family: var(--font-display); font-weight: 600; border-bottom: 2px solid var(--color-ink);}
:where(:root[data-mode="day"]) .compare .us{background: color-mix(in oklab, var(--color-accent) 22%, transparent);}
:where(:root[data-mode="day"]) .compare thead .us{background: var(--color-ink); color: var(--color-paper);}
:where(:root[data-mode="day"]) .compare .yes::before{color: var(--color-mint-deep);}
:where(:root[data-mode="day"]) .compare .no::before{color: var(--color-accent-3);}
:where(:root[data-mode="day"]) .compare .part::before{color: var(--color-accent-deep);}
:where(:root[data-mode="day"]) .specs th,:where(:root[data-mode="day"]) .specs td{border-top-color: var(--color-rule);}
:where(:root[data-mode="day"]) .note{border-inline-start: 6px solid var(--color-accent); border-radius: 4px;}
:where(:root[data-mode="day"]) .faq details{border-top: 2px dashed var(--color-edge);}
:where(:root[data-mode="day"]) .faq details:last-child{border-bottom: 2px dashed var(--color-edge);}
:where(:root[data-mode="day"]) .faq summary{font-weight: 600;}
:where(:root[data-mode="day"]) .faq summary::after{content: "+"; width: 36px; height: 36px; top: 16px; display: grid; place-items: center; border-radius: 12px; background: var(--grain), var(--color-accent); font-size: 1.4rem; line-height: 1; box-shadow: 0 3px 0 var(--color-accent-deep);}
:where(:root[data-mode="day"]) .signup input[type="email"]{border: 1px solid var(--color-muted); border-radius: var(--radius-input); min-height: 54px; background: var(--color-card);}
:where(:root[data-mode="day"]) .signup .opt input{accent-color: var(--color-accent);}
:where(:root[data-mode="day"]) .checks li{border-top: 2px dashed var(--color-edge);}
:where(:root[data-mode="day"]) .checks li::before{border-color: var(--color-mint-deep);}
:where(:root[data-mode="day"]) .help-grid > div{border-top: 0; background: var(--grain), var(--color-card); border-radius: var(--radius-card); padding: var(--space-lg); filter: var(--shadow-paper);}
:where(:root[data-mode="day"]) .rf-body{fill: var(--color-ink);}
:where(:root[data-mode="day"]) .rf-ink2{fill: var(--color-ink-2);}
:where(:root[data-mode="day"]) .rf-signal{stroke: var(--color-accent-2);}
:where(:root[data-mode="day"]) .rf-port{fill: var(--color-mint);}
:where(:root[data-mode="day"]) .rf-led{fill: var(--color-accent);}
:where(:root[data-mode="day"]) .rf-touch{fill: var(--color-accent);}
:where(:root[data-mode="day"]) .router-fig svg{filter: var(--shadow-paper);}
:where(:root[data-mode="day"]) .site-footer{background: var(--grain), var(--color-ink); color: color-mix(in oklab, var(--color-paper) 74%, var(--color-ink)); border-top: 0; clip-path: var(--torn-top); padding-top: 80px;}
:where(:root[data-mode="day"]) .site-footer a:hover{color: var(--color-accent);}
[dir="rtl"]:where([data-mode="day"]) body{font-family: var(--font-arabic);}
[dir="rtl"]:where([data-mode="day"]) h1,[dir="rtl"]:where([data-mode="day"]) h2,[dir="rtl"]:where([data-mode="day"]) h3{font-family: var(--font-arabic); font-weight: 600; letter-spacing: 0; line-height: 1.3;}
[dir="rtl"]:where([data-mode="day"]) .app{rotate: 1.2deg;}
@media (max-width: 900px){:where(:root[data-mode="day"]) .nav > a:not(.btn){box-shadow: none; background: transparent; padding: var(--space-xs) 0;}
:where(:root[data-mode="day"]) .nav{background: var(--grain), var(--color-paper);}
:where(:root[data-mode="day"]) .site-header{clip-path: none;}
:where(:root[data-mode="day"]) .cards .card:nth-child(even){translate: none;}
:where(:root[data-mode="day"]) .zone + .zone,:where(:root[data-mode="day"]) .plan + .plan,:where(:root[data-mode="day"]) .seesnot > div + div{border-top: 0;}}
@media (prefers-reduced-motion: reduce){:where(:root[data-mode="day"]) .btn,:where(:root[data-mode="day"]) .pause,:where(:root[data-mode="day"]) .nav a{transition: none;}}
:where(:root[data-mode="day"]) .hero{padding-top: var(--space-2xl);}
:where(:root[data-mode="day"]) .hero.has-scene{padding-bottom: calc(min(100vw, 960px) * 0.2917 + var(--space-lg));}
:where(:root[data-mode="day"]) .cards .card:nth-child(even){translate: none;}
:where(:root[data-mode="day"]) .zones,:where(:root[data-mode="day"]) .plans,:where(:root[data-mode="day"]) .seesnot{gap: var(--space-lg);}
:where(:root[data-mode="day"]) .hero-scene{position: absolute; inset-inline-start: 50%; bottom: 0; translate: -50% 0; width: min(100%, 960px); height: auto; z-index: 0; pointer-events: none; overflow: visible; filter: var(--shadow-paper);}
[dir="rtl"]:where([data-mode="day"]) .hero-scene{translate: 50% 0;}
:where(:root[data-mode="day"]) .hero-scene .stop-apricot{stop-color: var(--color-accent); stop-opacity: 0.28;}
:where(:root[data-mode="day"]) .hero-scene .stop-peri{stop-color: var(--color-sugar); stop-opacity: 0.7;}
:where(:root[data-mode="day"]) .hero-scene .stop-clear{stop-color: var(--color-paper); stop-opacity: 0;}
:where(:root[data-mode="day"]) .hero-scene .stop-desk{stop-color: var(--color-sand); stop-opacity: 0.55;}
:where(:root[data-mode="day"]) .hero-scene .sc-cable{fill: none; stroke: var(--color-ink-2); stroke-width: 4; stroke-linecap: round;}
:where(:root[data-mode="day"]) .hero-scene .sc-air{fill: none; stroke: var(--color-accent-2); stroke-opacity: 0.5; stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round;}
:where(:root[data-mode="day"]) .hero-scene .lt-lid,:where(:root[data-mode="day"]) .hero-scene .lt-base{fill: var(--color-card); stroke: var(--color-edge); stroke-width: 1.5;}
:where(:root[data-mode="day"]) .hero-scene .lt-screen{fill: var(--color-ink);}
:where(:root[data-mode="day"]) .hero-scene .lt-line{fill: var(--color-paper); fill-opacity: 0.75;}
:where(:root[data-mode="day"]) .hero-scene .lt-line-2{fill: var(--color-paper); fill-opacity: 0.4;}
:where(:root[data-mode="day"]) .hero-scene .lt-av,:where(:root[data-mode="day"]) .hero-scene .lt-ok{fill: var(--color-mint);}
:where(:root[data-mode="day"]) .hero-scene .lt-wait{fill: var(--color-accent-3);}
:where(:root[data-mode="day"]) .hero-scene .lt-act{fill: var(--color-accent);}
:where(:root[data-mode="day"]) .hero-scene .lt-notch,:where(:root[data-mode="day"]) .hero-scene .lt-port,:where(:root[data-mode="day"]) .hero-scene .rt-foot{fill: var(--color-ink-2);}
:where(:root[data-mode="day"]) .hero-scene .rt-ant{fill: var(--color-ink-2);}
:where(:root[data-mode="day"]) .hero-scene .rt-body{fill: var(--color-ink);}
:where(:root[data-mode="day"]) .hero-scene .rt-edge{fill: none; stroke: var(--color-ink-2); stroke-width: 1.5; stroke-linecap: round;}
:where(:root[data-mode="day"]) .hero-scene .rt-touch{fill: var(--color-accent);}
:where(:root[data-mode="day"]) .hero-scene .rt-glyph{fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round;}
:where(:root[data-mode="day"]) .hero-scene .rt-dot{fill: var(--color-ink);}
:where(:root[data-mode="day"]) .hero-scene .led-on{fill: var(--color-mint);}
:where(:root[data-mode="day"]) .hero-scene .led-tx{fill: var(--color-sugar);}
:where(:root[data-mode="day"]) .hero-scene .led-rx{fill: var(--color-accent-3);}
:where(:root[data-mode="day"]) .hero-scene .led-label{fill: var(--color-paper); fill-opacity: 0.7; font: 500 9px var(--font-body);}
:where(:root[data-mode="day"]) .hero-scene .pk-tx{fill: var(--color-accent-2);}
:where(:root[data-mode="day"]) .hero-scene .pk-rx{fill: var(--color-accent-3);}
:where(:root[data-mode="day"]) .hero-scene .pk-halo{fill-opacity: 0.25;}
:where(:root[data-mode="day"]) .site-header .wrap{gap: var(--space-md);}
:where(:root[data-mode="day"]) .nav{gap: var(--space-xs);}
:where(:root[data-mode="day"]) .nav > a{white-space: nowrap;}
:where(:root[data-mode="day"]) .nav > a:not(.btn){padding: var(--space-xs) var(--space-sm); font-size: 0.9rem;}
:where(:root[data-mode="day"]) .nav a.btn-small{padding: 0 var(--space-md);}
:where(:root[data-mode="day"]) .mode-btn{border: 0; border-radius: var(--radius-stock); background: var(--grain), var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule), 0 4px 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap);}
:where(:root[data-mode="day"]) .mode-btn:hover{translate: 0 -1px; box-shadow: inset 0 0 0 1px var(--color-rule), 0 5px 0 var(--color-edge);}
:where(:root[data-mode="day"]) .mode-btn:active{translate: 0 3px; box-shadow: inset 0 0 0 1px var(--color-rule), 0 1px 0 var(--color-edge);}
:where(:root[data-mode="day"]) .mode-btn svg{stroke: var(--color-accent-deep);}
@media (prefers-reduced-motion: reduce){:where(:root[data-mode="day"]) .hero-scene .pk{display: none;}
:where(:root[data-mode="day"]) .mode-btn{transition: none;}}