/**
 * Component CSS - only what Tailwind utilities can't express. Served
 * verbatim (no build step), so the comments ship too; keep them short.
 *
 * Two themes on one page, after apple.com: the page is LIGHT by default
 * (:root below) and a few full screens switch to the navy palette the site
 * used to be built on (the `blue` branch) by carrying .theme-dark. Both
 * blocks declare the same tokens, so every Tailwind utility (bg-paper-100,
 * text-ink/70, border-line/15) and every rule here flips per section.
 *
 * Keep the :root block in sync with the inline @theme in includes/head.php -
 * that block is the source of truth for Tailwind's generated utilities.
 */
:root {
  /* Fonts are declared here too: the Tailwind browser build only emits a
     token as a real custom property when a utility uses it, and .display
     (our own class) reads --font-display directly. */
  --font-display: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  /* Light surface scale: 200 the section background, 100 a card / an
     alternate section, 50 the most raised, 400 a recessed well. */
  --color-paper-50: #ffffff;
  --color-paper-100: #f3f6fa;
  --color-paper-200: #ffffff;
  --color-paper-300: #eef2f7;
  --color-paper-400: #e6ebf2;
  --color-ink: #09214c;
  --color-heading: #09214c;
  --color-mute: #5d6b7e;
  --color-dim: #8592a3;
  --color-line: #0d1726;
  /* Blue is a touch deeper than the logo's #0094ff so white button text
     clears 4:1 on it; the logo itself keeps its own colours. */
  --color-accent: #0a84ff;
  --color-teal: #01d0cc;
  /* Second accent, small details only (feature icons, version pills). Darker than the navy theme's #ffb454 so it reads on white. */
  --color-accent-warm: #e98a0c;
  /* Orange for small TEXT on light surfaces (version pills); the warm
     accent itself is too light to read as text on white. */
  --color-warm-ink: #b35a00;
  --color-amber: #c97400;
  --color-amber-ink: #c97400;
  --color-ok: #1fa975;
  --color-danger: #e5484d;
  /* The one divider tone, 15% of --color-line (re-declared under
     .theme-dark, since a var() here resolves against :root's line colour). */
  --hairline: color-mix(in srgb, var(--color-line) 15%, transparent);
  --radius: 22px;
}

/* ---------- dark screens ---------- */
/* The previous navy theme, unchanged, scoped to a section. .theme-dark also
   sets its own background and text colour (below), so a dark section needs
   nothing else; a section may add .mesh-night on top for the gradient.
   .header-dark (the sticky header over a dark screen) takes the tokens only -
   it must stay translucent. */
.theme-dark,
.header-dark {
  --color-paper-50: #1c3f61;
  --color-paper-100: #142438;
  --color-paper-200: #101b2b;
  --color-paper-300: #0c1623;
  --color-paper-400: #0b1522;
  --color-ink: #e9f1fb;
  --color-heading: #ffffff;
  --color-mute: #93a7b8;
  --color-dim: #6d84a0;
  --color-line: #93a7b8;
  --color-accent: #0094ff;
  --color-accent-warm: #ffb454;
  --color-warm-ink: #ffb454;
  --color-amber: #ffb454;
  --color-amber-ink: #ffb454;
  --color-ok: #3ecf9a;
  --color-danger: #ff5d5d;
  --hairline: rgba(147, 167, 184, 0.15);
}
.theme-dark {
  background-color: var(--color-paper-200);
  color: var(--color-ink);
}

/* ---------- anchor offset under the sticky header ---------- */
/* One 68px row below lg, two rows (68 + 44px) from lg up - see header.php. */
html { scroll-padding-top: 4.5rem; }
@media (min-width: 1024px) {
  html { scroll-padding-top: 7rem; }
}

/* ---------- backgrounds ---------- */
/* .mesh-night is the navy hero gradient the user liked (the `blue`
   branch's .hero-mesh): two saturated blue blooms on the right over a
   near-black navy base. It now backs the dark screens. Keep every bloom
   centred inside the section - one centred on an edge gets sliced by it. */
.mesh-night {
  background-color: #0b1524;
  background-image:
    radial-gradient(60% 55% at 85% 15%, rgba(58, 110, 190, 0.32) 0%, transparent 62%),
    radial-gradient(55% 50% at 92% 72%, rgba(30, 60, 110, 0.38) 0%, transparent 65%),
    linear-gradient(165deg, #0a1322 0%, #0b1524 72%);
}
/* .mesh-day is the same idea for the light hero:
   pale blue/teal blooms over white, mirrored left and right because the
   layout is centred now (the dark original was built for left-aligned
   copy, so its blooms sat on the right only). */
.mesh-day {
  background-color: #ffffff;
  background-image:
    radial-gradient(55% 45% at 86% 22%, rgba(10, 132, 255, 0.13) 0%, transparent 65%),
    radial-gradient(50% 45% at 14% 34%, rgba(1, 208, 204, 0.1) 0%, transparent 65%),
    radial-gradient(70% 40% at 50% 92%, rgba(10, 132, 255, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #f6f9fd 0%, #ffffff 60%);
}

/* .cta-band is the closing #try band, dark again at the user's request -
   restored from the `blue` branch: the navy mesh spots, plus a LIGHTER top
   edge (#152740 fading out by 45%) so it reads as its own block. The step
   down to the darker .footer-mesh below separates it from the footer. */
.cta-band {
  background-color: #101b2b;
  background-image:
    linear-gradient(180deg, #152740 0%, rgba(21, 39, 64, 0) 45%),
    radial-gradient(38% 52% at 70% 42%, rgba(1, 208, 204, 0.14) 0%, transparent 70%),
    radial-gradient(42% 58% at 82% 62%, rgba(0, 148, 255, 0.16) 0%, transparent 72%),
    radial-gradient(30% 40% at 58% 70%, rgba(28, 63, 97, 0.4) 0%, transparent 75%),
    radial-gradient(45% 50% at 22% 20%, rgba(0, 148, 255, 0.08) 0%, transparent 70%),
    linear-gradient(165deg, #142438 0%, #101b2b 70%);
}

/* ---------- big display type ---------- */
/* Sized per use with a Tailwind text-[clamp(...)] utility in markup. */
.display {
  font-family: var(--font-display);
  color: var(--color-heading);
  /* 700, not 800: at 800 Rubik's rounded terminals stop reading. */
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
/* The hero h1 and the #try h2, the two biggest headings, step down a weight. */
.display-light { font-weight: 600; }

/* ---------- section intro (h2 + sub, centred) ---------- */
.sec-title { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.sec-sub {
  color: var(--color-mute);
  max-width: 40em;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- buttons ---------- */
/* Fully rounded pills with a soft coloured glow that is always on (not a
   hover effect), at the user's request - this replaced the "keycap" hard
   ledge under each button (on the `blue` branch). Each variant sets
   --glow; hover only brightens it a little and lifts the pill 1px. Sizing
   is min-height plus horizontal-only padding - a shrink-to-fit inline-flex
   box has no slack for align-items to centre against otherwise. */
.btn {
  --glow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  border-radius: 999px;
  min-height: 3.5rem;
  padding: 0 28px;
  box-shadow: var(--glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(1px); filter: brightness(0.97); }
.btn-primary {
  --glow: 0 10px 32px -6px rgba(10, 132, 255, 0.55), 0 0 22px -4px rgba(1, 208, 204, 0.45);
  background: linear-gradient(120deg, var(--color-accent), var(--color-teal));
  color: #fff;
}
.theme-dark .btn-primary {
  --glow: 0 10px 40px -4px rgba(0, 148, 255, 0.6), 0 0 30px -2px rgba(1, 208, 204, 0.45);
}
/* The quieter half of every pair (misnomer kept): a white pill with a
   hairline edge and a faint blue halo on light; the near-white pill with
   navy text and a soft white glow on dark. */
.btn-outline {
  --glow: 0 8px 28px -8px rgba(10, 132, 255, 0.28), 0 2px 8px -2px rgba(13, 23, 38, 0.08);
  background: #fff;
  color: var(--color-heading);
  border: 1px solid var(--hairline);
}
.theme-dark .btn-outline {
  --glow: 0 8px 34px -6px rgba(233, 241, 251, 0.35);
  background: var(--color-ink);
  color: var(--color-paper-200);
  border: 0;
}
/* Header-only compact variant: a smaller glow to suit the smaller pill. */
.btn-sm {
  min-height: 2.5rem;
  padding: 0 18px;
  font-size: 0.85rem;
}
/* Header CTA: a quieter glow than the page buttons (user's request). */
.btn-sm.btn-primary { --glow: 0 4px 12px -6px rgba(10, 132, 255, 0.45), 0 0 8px -4px rgba(1, 208, 204, 0.3); }
/* Round icon button: the mobile menu open/close buttons. */
.btn-icon {
  --glow: 0 4px 14px -6px rgba(13, 23, 38, 0.25);
  width: 2.5rem;
  padding: 0;
  background: #fff;
  color: var(--color-heading);
  border: 1px solid var(--hairline);
}
/* .btn's display: inline-flex is unlayered and beats Tailwind's layered
   display utilities, so a responsive lg:hidden on a .btn needs this. */
@media (min-width: 1024px) {
  .btn.lg\:hidden { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: none; }
}
/* A primary + secondary pair at one shared width: stacked full width below
   sm, from sm an inline grid of two equal 1fr tracks. */
.btn-pair { display: grid; gap: 14px; }
.btn-pair > .btn { width: 100%; }
@media (min-width: 640px) {
  .btn-pair { display: inline-grid; grid-template-columns: 1fr 1fr; width: max-content; }
}

/* ---------- sticky header: light / dark states ---------- */
/* Light over light screens; over a .theme-dark screen animations.js adds
   .header-dark and the rows cross-fade to the navy pair the `blue` branch
   used (#060f1d at 70%, #0a1a33 at 60%), links go white with the warm
   hover, and the logo swaps to the light-ink file. */
.site-header__top { background-color: rgba(255, 255, 255, 0.8); transition: background-color 0.3s ease; }
.site-header__nav { background-color: rgba(221, 231, 243, 0.85); transition: background-color 0.3s ease; }
@media (max-width: 359px) {
  .site-header__top > div { gap: 8px; }
  .site-header__top .logo-on-light,
  .site-header__top .logo-on-dark { height: 22px; }
}
.header-dark .site-header__top { background-color: rgba(6, 15, 29, 0.7); }
.header-dark .site-header__nav { background-color: rgba(10, 26, 51, 0.6); }
.site-header a,
.site-subnav a { transition: color 0.3s ease; }
.header-dark .nav-link:hover { color: var(--color-accent-warm); }
.header-dark .btn-icon {
  --glow: none;
  background: var(--color-paper-50);
  color: var(--color-ink);
  border-color: transparent;
}
.logo-on-dark { display: none; }
.header-dark .logo-on-light { display: none; }
.header-dark .logo-on-dark { display: block; }
@media (prefers-reduced-motion: reduce) {
  .site-header__top, .site-header__nav, .site-header a { transition: none; }
}

/* ---------- sub-nav strip (the feature screens) ---------- */
/* Fixed under the two-row header (68 + 44 = 112px), hidden by sliding up
   behind it; .is-open brings it down. Light tint a step lighter than the
   main strip, navy one in .header-dark. */
.site-subnav {
  position: fixed;
  top: 112px;
  left: 0;
  right: 0;
  z-index: 40;
  background-color: rgba(240, 245, 251, 0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s, background-color 0.3s ease;
}
.site-subnav.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s, background-color 0.3s ease;
}
.site-subnav.header-dark { background-color: rgba(14, 32, 60, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .site-subnav, .site-subnav.is-open { transition: none; }
}
/* Anchors inside the group land below the open sub-nav, not under it. */
@media (min-width: 1024px) {
  .subnav-target { scroll-margin-top: 9.5rem; }
  /* The features section already has space above its heading. */
  #features { scroll-margin-top: 0; }
}

/* ---------- desktop nav strip: active-section indicator ---------- */
/* A 3px bar along the bottom of the link whose section is on screen, with
   square ends (the user tried a text underline instead and went back to the
   bar, without the rounded corners it first had). The link fills the
   strip's height, so the bar sits on the strip's bottom edge; animations.js
   toggles .is-active (scroll-spy). */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-accent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-link.is-active { color: var(--color-accent); }
.nav-link.is-active::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-link::after { transition: none; }
}

/* ---------- language switcher (circular flag + dropdown) ---------- */
/* <details>/<summary>, so it works with no script; animations.js only adds
   an outside-click close. */
.lang-switch summary {
  cursor: pointer;
  list-style: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch__menu {
  top: calc(100% + 10px);
  z-index: 10;
  min-width: 10rem;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--hairline);
  background: var(--color-paper-50);
  box-shadow: 0 24px 48px -16px rgba(13, 23, 38, 0.25);
  padding: 6px;
}
.lang-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 0.7rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mute);
}
.lang-switch__item:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); }
.lang-switch__item.is-current { color: var(--color-ink); }

/* Mobile overlay's switcher: two flags side by side, the current one ringed
   (a flag has no "muted" rendering to lean on). */
.mobile-lang-item {
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  border: 2px solid transparent;
  opacity: 0.5;
}
.mobile-lang-item.is-current {
  opacity: 1;
  border-color: var(--color-accent);
}

/* ---------- icon (inline SVG marks) ---------- */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}
.flag-icon { flex: none; }

/* ---------- demo-hint inline code ---------- */
.demo-hint code {
  font-family: ui-monospace, Consolas, monospace;
  background: color-mix(in srgb, var(--color-mute) 12%, transparent);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--color-ink);
  font-size: 0.82rem;
}

/* ---------- scroll cue (bobbing orange ">") ---------- */
/* Base: the glyph, colour and bob. Used inline (the showcase intro, under
   its sub) and, with --hero, pinned to the bottom of the first screen. */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--color-accent-warm);
  transition: opacity 0.3s ease;
}
.scroll-cue .icon {
  width: 40px;
  height: 40px;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent-warm) 55%, transparent));
  animation: cue-bob 1.8s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue .icon { animation: none; }
}
/* Hero: one viewport minus the sticky header (68px, 112px from lg) minus
   its own height and a little air - or the bottom of the hero, whichever
   is higher (on phones the hero is shorter than the screen). Fades out
   once the page scrolls (animations.js adds .is-hidden). */
.scroll-cue--hero {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: min(100svh - 68px - 76px, 100% - 76px);
  margin-left: -28px;
}
@media (min-width: 1024px) {
  .scroll-cue--hero { top: min(100svh - 112px - 84px, 100% - 84px); }
}
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- tablet mockup (hero + feature screens) ---------- */
/* A landscape tablet drawn in CSS: a dark bezel with a camera dot, and a
   4:3 screen (the screenshots are 1200x900) holding either an <img> or a
   .tablet__placeholder until real screenshots exist - see
   includes/tablet.php. Corner radii scale with the device, so it reads the
   same at phone and desktop widths. */
.tablet {
  --bezel: clamp(8px, 1.3vw, 18px);
  --tablet-r: clamp(18px, 3vw, 44px);
  position: relative;
  padding: var(--bezel);
  border-radius: var(--tablet-r);
  background: linear-gradient(160deg, #2b313b 0%, #12161c 55%, #1d222a 100%);
  /* A visible bluish glow around the device, at the user's request (a warm
     orange one on dark screens was tried and dropped), on top of the usual
     contact shadow; .theme-dark below is a stronger blue for the navy. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(13, 23, 38, 0.18),
    0 0 80px 4px rgba(10, 132, 255, 0.13),
    0 0 150px 24px rgba(1, 181, 216, 0.07),
    0 50px 110px -40px rgba(13, 23, 38, 0.4);
}
.theme-dark .tablet {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 80px 2px rgba(0, 148, 255, 0.18),
    0 0 160px 24px rgba(1, 208, 204, 0.07),
    0 60px 140px -40px rgba(0, 0, 0, 0.8);
}
.tablet::before {
  content: "";
  position: absolute;
  top: calc(var(--bezel) / 2);
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #3a4350;
}
.tablet__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--tablet-r) - var(--bezel));
  background: #0b1522;
}
.tablet__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Switched-off screen (the hero stand-in, at the user's request): true
   black with a faint diagonal glass reflection, like an iPad at rest. */
.tablet__off {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 38%, transparent 38.2%),
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
}
/* Stand-in screen: the card's own night-navy with a faint dot grid (the
   editor's canvas look) and a centred caption. */
.tablet__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: #0b1522;
  background-image: radial-gradient(rgba(147, 167, 184, 0.22) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: #6d84a0;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}
.tablet__placeholder svg { width: clamp(36px, 5vw, 64px); height: auto; color: #33455f; }

/* Show only the top ~2/3 of the tablet, cut flush with the bottom of its
   section so the next block starts at the cut (user's request). The box
   is 1 : 0.52 - about 2/3 of the tablet's own ~1 : 0.78 (4:3 screen plus
   bezel); clip-path rather than overflow so only the bottom is cut and the
   side/top shadow stays. The section around it carries no bottom padding. */
.tablet-crop {
  position: relative;
  /* Overlap the next block by 1px: at fractional scaling (e.g. Windows
     125%) the crop height rounds and a hairline of this section's
     background could show between the cut tablet and the next block. The
     clip-path makes this a stacking context, so it paints over the next
     section's background. */
  margin-bottom: -1px;
  aspect-ratio: 1 / 0.52;
  /* Without this, aspect-ratio's automatic minimum lets the box grow back
     to the full tablet's height (its content), and nothing gets cut. */
  min-height: 0;
  /* Generous negative insets so the tablet's glow (~200px) isn't clipped. */
  clip-path: inset(-260px -260px 0 -260px);
}

/* Our CSS tablet with a wide screen (the screens cut out of the generated
   renders are ~1.537:1, not 4:3): the device is then ~0.662 of its width
   tall, so 2/3 of it is 0.441; the hero shows ~80% (0.53). */
.tablet-crop--wide { aspect-ratio: 1 / 0.441; }
.tablet-crop--wide.tablet-crop--tall { aspect-ratio: 1 / 0.53; }
/* Kiosk: fanned iPads running off the image's bottom edge - flush on the
   section's bottom (-1px overlap, like .tablet-crop), soft bluish glow. */
.device-fan {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
  filter: drop-shadow(0 0 50px rgba(10, 132, 255, 0.14));
}
/* .device-shot: a whole cut-out device render (unused now - kept for the
   next one);
   drop-shadow follows its outline rather than the image rectangle. */
.device-shot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 50px rgba(10, 132, 255, 0.16)) drop-shadow(0 40px 50px rgba(13, 23, 38, 0.22));
}
.theme-dark .device-shot {
  filter: drop-shadow(0 0 60px rgba(0, 148, 255, 0.2)) drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}

/* ---------- floating "watch the video" pill (#light, #vacuum) ---------- */
/* Orange, over the lower-right corner of the cut tablet, bobbing slowly.
   It sits outside .tablet-crop (whose clip-path would cut it) and above
   it via z-index. Hover pauses the float and brightens it. */
.video-pill {
  position: absolute;
  z-index: 3;
  right: 3%;
  bottom: 14%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, #ffa94d, #f27a0e);
  box-shadow: 0 12px 34px -8px rgba(242, 122, 14, 0.65), 0 0 24px -6px rgba(255, 169, 77, 0.6);
  animation: pill-float 3.2s ease-in-out infinite;
  transition: filter 0.15s ease;
}
.video-pill:hover { animation-play-state: paused; filter: brightness(1.06); }
/* Hero: centred along the bottom of the tablet. Centred with margins, not
   translateX, so the float animation keeps transform to itself. */
.video-pill--center { left: 0; right: 0; width: max-content; margin: 0 auto; bottom: 9%; }
.video-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  color: #f27a0e;
}
.video-pill__icon .icon { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
@media (max-width: 639.98px) {
  .video-pill { font-size: 0.85rem; padding: 6px 14px 6px 6px; bottom: 10%; }
  .video-pill__icon { width: 30px; height: 30px; }
}
@keyframes pill-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .video-pill { animation: none; }
}

/* ---------- video pop-up (<dialog id="video-modal">) ---------- */
/* Large 16:9 player over a dimmed, blurred page. The dialog itself is
   transparent - only the player and the close button show. */
.video-modal {
  /* Tailwind's preflight zeroes the dialog's margin, which is what centres
     a modal <dialog> - so put it back. Width is also capped by the viewport
     height, keeping the 16:9 player (and the close button above it) on
     screen on short, wide windows. */
  margin: auto;
  width: min(1200px, calc(100vw - 32px), calc((100svh - 140px) * 16 / 9));
  max-width: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: #fff;
}
.video-modal::backdrop {
  background: rgba(4, 9, 18, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-modal[open] { animation: modal-in 0.25s ease; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.video-modal .video-frame { box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8); }
.video-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  transition: background-color 0.15s ease;
}
.video-modal__close:hover { background: rgba(255, 255, 255, 0.24); }
@media (prefers-reduced-motion: reduce) {
  .video-modal[open] { animation: none; }
}

/* ---------- feature screens (#light / #vacuum / #zigbee / #kiosk) ---------- */
/* Near full-viewport, centred: big h3, one two-sentence paragraph, then a
   large tablet cut off at the bottom (.tablet-crop). From lg each screen is
   at least one viewport minus the two-row header, with the content pushed
   to the bottom so the cut tablet always meets the section edge. */
.screen {
  padding: 5rem 0 0;
}
@media (min-width: 1024px) {
  .screen {
    min-height: calc(100svh - 7rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 7rem 0 0;
  }
}
.screen__title { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.screen__desc {
  max-width: 38em;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-mute);
  text-wrap: pretty;
}

.chip {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-mute);
  border: 1px solid color-mix(in srgb, var(--color-line) 22%, transparent);
  border-radius: 999px;
  padding: 7px 16px;
}

/* ---------- features grid (#features hairline grid) ---------- */
/* The container owns the surface (cells stay transparent, so it reads as
   one field, not 12 tiles); dividers are per-cell border-top/left, flipped
   per breakpoint (1 column, 2 from sm, 4 from lg). No transform on a cell
   ever - it would paint over the neighbouring divider. */
.features-grid { background: var(--color-paper-50); }
@media (max-width: 639.98px) {
  .features-grid { background: transparent; border-radius: 0; }
}
.feature-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border-top: 1px solid var(--hairline);
}
.feature-cell--video { text-decoration: none; transition: background-color 0.2s ease; }
.feature-cell--video:hover { background-color: rgba(10, 132, 255, 0.045); }
.feature-cell--video:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
.feature-cell__video {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.feature-cell__video .icon { width: 11px; height: 11px; margin-right: -3px; }
.feature-cell__video .icon { fill: currentColor; stroke: none; }
.screen--review { position: relative; }
.screen-actions {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: calc(100% - 40px);
  transform: translateX(-50%);
  bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: calc(100% - 40px);
}
.feature-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffa94d, #f27a0e);
  color: #fff;
  box-shadow: 0 0 18px 3px rgba(9, 33, 76, 0.11), 0 0 32px 6px rgba(9, 33, 76, 0.05);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: filter 0.15s ease;
}
.feature-action--watch { color: #4b5663; background: #e6e9ed; }
.feature-action:hover { filter: brightness(1.08); }
.feature-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.feature-action .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.feature-action--watch .icon { margin-right: -3px; }
.hero-device { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 36px rgba(10, 132, 255, 0.15)); }
.tablet-crop--artwork { aspect-ratio: 1 / 0.52; }
@media (max-width: 639.98px) {
  .tablet-crop--artwork,
  .tablet-crop--wide.tablet-crop--tall { aspect-ratio: 1 / 0.68; }
}
.vacuum-brand { display: inline-flex; align-items: center; justify-content: center; width: 132px; height: 54px; }
.vacuum-brand img { max-width: 100%; max-height: 46px; object-fit: contain; }
.vacuum-brand--xiaomi { width: 160px; gap: 10px; }
.vacuum-brand--xiaomi img { width: 38px; height: 38px; }
.vacuum-brand__name { font-size: 25px; font-weight: 600; letter-spacing: -0.04em; color: #30343b; }
@media (max-width: 639.98px) {
  .vacuum-brand { width: 105px; height: 42px; }
  .vacuum-brand--xiaomi { width: 150px; }
  .vacuum-brand img { max-height: 36px; }
}
.feature-cell:first-child { border-top: none; }
@media (min-width: 640px) {
  .feature-cell { border-left: none; }
  .feature-cell:nth-child(-n+2) { border-top: none; }
  .feature-cell:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .feature-cell:nth-child(2n) { border-left: 1px solid var(--hairline); }
}
@media (min-width: 1024px) {
  .feature-cell:nth-child(2n) { border-left: none; }
  .feature-cell:nth-child(n+3) { border-top: none; }
  .feature-cell:nth-child(-n+4) { border-top: none; }
  .feature-cell:nth-child(n+5) { border-top: 1px solid var(--hairline); }
  .feature-cell:nth-child(4n+1) { border-left: none; }
  .feature-cell:not(:nth-child(4n+1)) { border-left: 1px solid var(--hairline); }
}
/* Glyph only, no chip; non-scaling-stroke keeps feature_icon()'s 1.4 stroke
   a literal ~1.4px at the 60px render size. */
.ic { display: inline-flex; align-items: center; justify-content: center; }
.ic svg { width: 60px; height: 60px; color: var(--color-accent-warm); }
.ic svg * { vector-effect: non-scaling-stroke; }

/* ---------- version pill (#updates) ---------- */
/* Orange, at the user's request: a tint of the warm accent with darker
   orange text (--color-warm-ink) - a solid orange fill with white text
   would be under 3:1 at this size. */
.new-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-warm-ink);
  background: color-mix(in srgb, var(--color-accent-warm) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-warm) 45%, transparent);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- video review (#review) ---------- */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.7);
}
.video-frame iframe { display: block; border: 0; background: #000; }

/* ---------- release feed (#updates) ---------- */
.updates__item { border-top: 1px solid var(--hairline); }
.updates__source { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--color-accent); font-size: 0.85em; }
.release-details__body a { display: inline-flex; align-items: center; gap: 4px; }
.updates__source:hover { text-decoration: underline; text-underline-offset: 4px; }
.release-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--color-accent); font-size: 15px; font-weight: 600; list-style: none; }
.release-toggle::-webkit-details-marker, .updates-archive__toggle::-webkit-details-marker { display: none; }
.release-toggle:focus-visible, .updates-archive__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }
.disclosure-open { display: none; }
details[open] > summary .disclosure-open { display: inline; }
details[open] > summary .disclosure-closed { display: none; }
details[open] > summary > .icon { transform: rotate(45deg); }
.release-details[open] > summary > .icon { transform: rotate(90deg); }
.release-detail { padding: 24px; border-radius: 20px; background: var(--color-paper-100); }
.release-fixes { border-left: 2px solid var(--color-accent-warm); padding: 4px 0 4px 20px; }
.updates-archive__toggle { display: flex; width: max-content; max-width: 100%; margin: 32px auto 0; cursor: pointer; list-style: none; }
.updates-archive[open] > summary { margin-bottom: 32px; }
.updates-archive:not([open]) > ol { display: none; }
.updates__points li { position: relative; padding-left: 1.1rem; }
.updates__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-warm);
}

/* ---------- contact cards (#contacts) ---------- */
/* Whole card is the link: a big rounded grey panel, brand icon in a round
   accent chip. Hover lifts the card a little; no colour change on the text. */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--color-paper-100);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 1024px) { .contact-card { padding: 32px 28px; } }
a.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -30px rgba(13, 23, 38, 0.25);
}
.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--color-accent), var(--color-teal));
  box-shadow: 0 10px 28px -8px rgba(10, 132, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .contact-card, .contact-card:hover { transition: none; transform: none; }
}

/* ---------- quality stats (#quality) ---------- */
.error-page { display: grid; align-items: center; min-height: calc(100svh - 7rem); padding-top: 64px; padding-bottom: 80px; }
.error-page__code { font-size: clamp(7.5rem, 23vw, 17rem); line-height: 0.9; letter-spacing: -0.075em; color: var(--color-heading); }
.quality-gradient { background: linear-gradient(180deg, #edf5ff 0%, #f7fbff 50%, #ffffff 100%); }
.stat {
  padding: 28px 14px;
  text-align: center;
  background: #eef6ff;
  border-radius: var(--radius);
}
@media (min-width: 640px) { .stat { padding: 44px 24px; } }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  margin-bottom: 8px;
}
.stat span { font-size: 0.95rem; color: var(--color-mute); }

/* ---------- footer ---------- */
/* Unchanged from the navy theme, at the user's request: the footer carries
   .theme-dark plus this darker band with dimmed hero-style colour spots,
   and no fade-in at the top - the step in tone separates it from #try. */
.footer-mesh {
  background-color: #08111b;
  background-image:
    radial-gradient(40% 70% at 18% 40%, rgba(0, 148, 255, 0.09) 0%, transparent 70%),
    radial-gradient(35% 60% at 78% 65%, rgba(1, 208, 204, 0.06) 0%, transparent 72%),
    linear-gradient(180deg, #0a1420 0%, #08111b 100%);
}
.footer-title { font-size: 13px; font-weight: 700; color: var(--color-heading); }
.footer-list { margin-top: 1rem; display: grid; gap: 0.65rem; font-size: 14px; }
.footer-list a { color: var(--color-mute); transition: color 0.15s ease; }
.footer-list a:hover { color: var(--color-heading); }
.footer-release {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(233, 241, 251, 0.05);
  font-size: 13px;
  transition: background-color 0.15s ease;
}
.footer-release:hover { background: rgba(233, 241, 251, 0.09); }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(233, 241, 251, 0.05);
  color: var(--color-ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.footer-social:hover { background: rgba(233, 241, 251, 0.1); color: var(--color-accent-warm); }
.footer-lang {
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  color: var(--color-mute);
}
.footer-lang:hover { color: var(--color-heading); }
.footer-lang.is-current { color: var(--color-heading); background: rgba(233, 241, 251, 0.08); }

/* Wall displays sit in a full-width room scene with a white upper edge. */
.kiosk-scene {
  /* The TV starts 19.875vw into the image. Crop 60% of that empty wall. */
  --kiosk-image-crop: 11.925vw;
  overflow: hidden;
  justify-content: flex-start;
  min-height: 0;
  padding-bottom: calc(50vw - var(--kiosk-image-crop));
}
.kiosk-scene__image {
  position: absolute;
  inset: auto 0 0;
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(var(--kiosk-image-crop) 0 0);
  mask-image: linear-gradient(to bottom, transparent var(--kiosk-image-crop), #000 calc(var(--kiosk-image-crop) + 5vw));
}

.kiosk-scene .screen-actions { bottom: 40px; }

@media (min-width: 1024px) {
  #light.screen {
    min-height: 0;
    padding-top: 5rem;
  }
}