/* ==========================================================================
   ELLEVUX — design system
   Direction (2026-10-15): light by default, dark on request; frosted glass
   slabs on a plain ground (no colour wash, no glowing orbs); Apple's rounded-rectangle buttons; no ambient motion (the home hero moves only with the scroll). Violet is the
   brand accent; mint means live/positive; red means negative (product UI).
   Every colour is a theme token: never hard-code a colour that only works
   in one theme. Alpha lines/fills use rgba(var(--fg-rgb), a).
   ========================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: only light;   /* "only": browsers must not force-darken the light theme */
  --fg-rgb: 17, 17, 26;
  --bg: #f5f5f7;
  --canvas-wash: none;   /* plain: no glowing orbs (the owner's call, 2026-10-15) */

  /* glass */
  --glass: rgba(255, 255, 255, 0.58);          /* slabs, cards */
  --glass-strong: rgba(255, 255, 255, 0.76);   /* nav, menus, sheets */
  --glass-bd: rgba(255, 255, 255, 0.75);
  --shadow-glass: 0 0 0 1px rgba(17, 17, 26, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 22px 44px -26px rgba(17, 17, 26, 0.16), 0 4px 14px -8px rgba(17, 17, 26, 0.10);
  --shadow-glass-hover: 0 0 0 1px rgba(17, 17, 26, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 28px 56px -28px rgba(17, 17, 26, 0.2), 0 6px 18px -10px rgba(17, 17, 26, 0.14);

  /* product windows */
  --surface: rgba(255, 255, 255, 0.66);        /* window fill (glass) */
  --surface-2: rgba(255, 255, 255, 0.72);      /* raised element inside a window */
  --surface-3: rgba(17, 17, 26, 0.045);        /* hover / selected row */
  --surface-sticky: rgba(250, 250, 252, 0.94); /* sticky headers inside windows */
  --input-bg: rgba(255, 255, 255, 0.8);
  --bubble: rgba(17, 17, 26, 0.055);           /* the visitor's chat bubble */
  --avatar-bg: #ecebf3;
  --menu-bg: rgba(255, 255, 255, 0.975);

  /* lines */
  --line: rgba(17, 17, 26, 0.08);
  --line-2: rgba(17, 17, 26, 0.11);
  --line-3: rgba(17, 17, 26, 0.18);

  /* text */
  --text: #1d1d1f;
  --text-2: #515156;
  --text-3: #6e6e73;
  --text-4: #97979d;

  /* accents */
  --violet: #6a52cf;                /* accent text, edges, focus */
  --violet-glow: #a366ff;           /* decorative only */
  --mint: #1f9d5b;                  /* live / positive */
  --neg: #dc3f4b;                   /* negative state in product UI */
  --chip-violet-fg: #5a43c2; --chip-violet-bg: rgba(106, 82, 207, 0.08); --chip-violet-bd: rgba(106, 82, 207, 0.32);
  --chip-ok-fg: #157a46;     --chip-ok-bg: rgba(31, 157, 91, 0.09);      --chip-ok-bd: rgba(31, 157, 91, 0.32);
  --chip-neg-fg: #bb2b36;    --chip-neg-bg: rgba(220, 63, 75, 0.08);     --chip-neg-bd: rgba(220, 63, 75, 0.32);

  /* actions */
  --primary: #1d1d1f;
  --on-primary: #ffffff;
  --primary-hover: #000000;
  --btn-2: rgba(17, 17, 26, 0.06);        /* the secondary button: a flat grey fill */
  --btn-2-hover: rgba(17, 17, 26, 0.1);

  /* homepage hero: a soft floor under the monitor */
  --hero-top: #fbfbfd;
  --hero-bottom: #eaeaee;
  --mon-metal-hi: #eef0f3;             /* the M9's silver metal, lit */
  --mon-metal: #c5c8ce;
  --mon-metal-lo: #8d9097;             /* in shade */
  --mon-floor: rgba(17, 17, 26, 0.2);  /* its shadow on the floor */
  --title-fade: #8e8e93;               /* the hero headline fades to this where it meets the monitor */
  --mon-shadow: rgba(17, 17, 26, 0.26);
}

/* ---------- Tokens: dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fg-rgb: 255, 255, 255;
  --bg: #07070a;
  --canvas-wash: none;   /* flat: no glowing orbs in dark mode (the owner's call, 2026-10-15) */

  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(22, 22, 28, 0.72);
  --glass-bd: rgba(255, 255, 255, 0.10);
  --shadow-glass: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 26px 52px -28px rgba(0, 0, 0, 0.85);
  --shadow-glass-hover: 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -28px rgba(0, 0, 0, 0.9);

  --surface: rgba(20, 20, 26, 0.62);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-3: rgba(255, 255, 255, 0.07);
  --surface-sticky: rgba(18, 18, 23, 0.94);
  --input-bg: rgba(0, 0, 0, 0.28);
  --bubble: rgba(255, 255, 255, 0.08);
  --avatar-bg: #1d1d24;
  --menu-bg: rgba(22, 22, 28, 0.975);

  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);

  --text: #f5f5f7;
  --text-2: #b6b6bc;
  --text-3: #8a8a92;
  --text-4: #5f5f66;

  --violet: #a998f0;
  --mint: #3fcb7f;
  --neg: #f0646a;
  --chip-violet-fg: #cfc3ff; --chip-violet-bg: rgba(153, 132, 216, 0.08); --chip-violet-bd: rgba(153, 132, 216, 0.45);
  --chip-ok-fg: #7fe0a9;     --chip-ok-bg: rgba(63, 203, 127, 0.08);     --chip-ok-bd: rgba(63, 203, 127, 0.4);
  --chip-neg-fg: #ff9a9e;    --chip-neg-bg: rgba(240, 100, 106, 0.08);   --chip-neg-bd: rgba(240, 100, 106, 0.42);

  --primary: #f5f5f7;
  --on-primary: #111114;
  --primary-hover: #ffffff;
  --btn-2: rgba(255, 255, 255, 0.1);
  --btn-2-hover: rgba(255, 255, 255, 0.16);

  /* homepage hero */
  --hero-top: #0e0e12;
  --hero-bottom: #050507;
  --mon-metal-hi: #8e9198;
  --mon-metal: #5b5e65;
  --mon-metal-lo: #2e3035;
  --mon-floor: rgba(0, 0, 0, 0.55);
  --title-fade: #6e6e73;
  --mon-shadow: rgba(0, 0, 0, 0.7);
}

/* ---------- Tokens: theme-independent ---------- */
:root {
  --blur: blur(24px) saturate(180%);
  --mon-bezel: #0b0b0d;                 /* the monitor's bezel, black in both themes */
  --mon-bezel-rim: rgba(255, 255, 255, 0.1);
  --mon-lens: #4a5570;                  /* the webcam's lens */
  --mon-glare: rgba(255, 255, 255, 0.14); /* a reflection on the glass, at rest */
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem);   /* 40 → 68 */
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);          /* 32 → 52 */
  --fs-h3: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);    /* 26 → 38 */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);  /* 17 → 20 */
  --fs-body-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 16 → 18 */

  /* shape: Apple's rounded rectangles; capsules only for small tags and chips */
  --r-btn: 12px;      /* buttons */
  --r-btn-sm: 10px;   /* small buttons and icon buttons */
  --r-field: 12px;
  --r-card: 18px;     /* glass slabs and cards */
  --r-tile: 28px;     /* large slabs */
  --r-window: 16px;   /* product windows */
  --r-ui: 10px;       /* elements inside a window */
  --r-pill: 999px;    /* tags, chips, badges */

  /* motion: interaction feedback only, never ambient */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-xs: 75ms;
  --d-sm: 100ms;
  --d-md: 150ms;
  --d-lg: 200ms;
  --d-xl: 300ms;

  /* layout */
  --container: 1152px;
  --container-nav: 1080px;
  --gutter: 24px;
  --section-y: clamp(64px, 4rem + 3vw, 112px);
  --nav-h: 64px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* the colour wash the glass sits on: none today, in either theme (the owner, 2026-10-15) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--canvas-wash); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(124, 92, 240, 0.25); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

[data-icon] { display: inline-flex; align-items: center; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: var(--r-btn); font-weight: 600; font-size: 14px; transition: top var(--d-md) var(--ease); }
.skip-link:focus-visible { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }

/* ---------- Glass ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-glass);
}

/* ---------- Type ---------- */
.display, .h2, .h3 { font-family: var(--font-display); font-weight: 600; color: var(--text); text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.042em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.036em; }
.h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); letter-spacing: -0.015em; text-wrap: pretty; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.body { font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; color: var(--text-2); letter-spacing: -0.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--violet); letter-spacing: -0.01em; }
.eyebrow .ix { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: 0; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.center { text-align: center; }

/* ---------- Buttons (pills) ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--btn-bd); border-radius: var(--r-btn);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-ui); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease), transform var(--d-md) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
/* flat, as Apple's: no shadow, no glow */
.btn--primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: transparent; }
.btn--primary:hover { --btn-bg: var(--primary-hover); }
.btn--ghost { --btn-bg: var(--btn-2); --btn-fg: var(--text); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: var(--btn-2-hover); }
.btn--sm { min-height: 34px; padding: 6px 14px; border-radius: var(--r-btn-sm); font-size: 14px; font-weight: 500; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-row.center { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); transition: color var(--d-md) var(--ease); }
.link-arrow svg { width: 14px; height: 14px; }
.link-arrow:hover { color: var(--violet); }

/* ---------- Pill badge ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-bd); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text-2); letter-spacing: -0.01em;
  transition: color var(--d-md) var(--ease);
}
a.pill:hover { color: var(--text); }
.pill svg { width: 14px; height: 14px; color: var(--text-3); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(31, 157, 91, 0.16); flex: none; }

/* ---------- Nav (glass bar) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  border-bottom: 1px solid var(--line);
}
/* the bar's frost lives on a pseudo-element, so .nav is not a backdrop root
   and the Services dropdown inside it can blur the page too */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.nav__inner { height: 100%; max-width: var(--container-nav); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 24px; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-btn);
  font-size: 14.5px; font-weight: 500; color: var(--text-2); letter-spacing: -0.01em;
  transition: color var(--d-md) var(--ease), background-color var(--d-md) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--text); }
.nav__link svg { width: 14px; height: 14px; transition: transform var(--d-lg) var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
/* icon buttons are bare glyphs, as in Apple's nav */
.nav__toggle, .theme-toggle {
  width: 38px; height: 38px; border-radius: var(--r-btn-sm); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); background: transparent; border: 0;
  transition: color var(--d-md) var(--ease);
}
.nav__toggle { display: none; }
.nav__toggle svg, .theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover, .nav__toggle:hover { color: var(--text); }

/* On the homepage the bar is clear over the top of the hero and turns to glass as soon as the
   page scrolls (ellevux.js sets .is-scrolled) or the mobile sheet opens. */
.nav { transition: border-color var(--d-xl) var(--ease); }
.nav::before { transition: opacity var(--d-xl) var(--ease); }
body:has(.hero--monitor):not(.no-scroll) .nav:not(.is-scrolled) { border-bottom-color: transparent; }
body:has(.hero--monitor):not(.no-scroll) .nav:not(.is-scrolled)::before { opacity: 0; }

.brand { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; color: var(--text); line-height: 1; }
/* Logo: the supplied artwork is near-white on transparent. Light mode renders it as ink (#1c1c1c),
   dark mode as white; the swirl is cut out, so the page shows through it. */
.brand { line-height: 0; }
.logo-img { display: block; height: 28px; width: auto; }
.logo-img--lg { height: 32px; }
:root[data-theme="light"] .logo-img { filter: brightness(0) invert(0.11); }
:root[data-theme="dark"] .logo-img { filter: brightness(1.05); }

/* Services dropdown (glass) */
.menu { position: relative; }
.menu__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; width: min(660px, 92vw);
  transform: translate(-50%, 4px); opacity: 0; visibility: hidden; pointer-events: none;
  background: var(--menu-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bd); border-radius: var(--r-card); box-shadow: var(--shadow-glass-hover);
  padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  transition: opacity var(--d-lg) var(--ease), transform var(--d-lg) var(--ease), visibility 0s linear var(--d-lg);
}
.menu.is-open .menu__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.menu__item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px; border-radius: 12px; transition: background-color var(--d-md) var(--ease); }
.menu__item:hover, .menu__item:focus-visible, .menu__item[aria-current="page"] { background: var(--surface-3); }
.menu__item[aria-current="page"] .menu__icon { color: var(--violet); }
.menu:has(.menu__item[aria-current="page"]) > .nav__link { color: var(--text); }
.menu__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); }
.menu__icon svg { width: 16px; height: 16px; }
.menu__name { display: block; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.menu__desc { display: block; font-size: 13px; line-height: 1.45; color: var(--text-3); margin-top: 2px; }
.menu__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 12px 6px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }

/* Mobile sheet (glass) */
.sheet { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--menu-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 16px var(--gutter) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--d-lg) var(--ease), visibility 0s linear var(--d-lg); }
.sheet.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.sheet__group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.sheet__label { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.sheet__link { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 17px; font-weight: 500; color: var(--text); }
.sheet__link svg { width: 18px; height: 18px; color: var(--text-3); }
.sheet__link[aria-current="page"] { margin-inline: -12px; padding-inline: 12px; border-radius: var(--r-ui); background: var(--surface-3); }
.sheet__link[aria-current="page"] svg { color: var(--violet); }
.sheet .btn { width: 100%; margin-top: 24px; min-height: 48px; }
body.no-scroll { overflow: hidden; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.section-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 2.5rem + 2vw, 72px); }
.section-head .lead, .section-head .body-lg { margin: 18px auto 0; max-width: 620px; }
.section-head .eyebrow { margin-bottom: 16px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Product window (mock UI shell) — a glass window ---------- */
.ui-window {
  position: relative; background: var(--surface);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bd); border-radius: var(--r-window); box-shadow: var(--shadow-glass);
  overflow: hidden; color: var(--text); font-family: var(--font-ui); font-size: 13px; line-height: 1.45; letter-spacing: -0.01em;
  isolation: isolate;
}
.ui-bar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ui-bar__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.ui-bar__title svg { width: 15px; height: 15px; color: var(--text-3); }
.ui-bar__meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ui-body { padding: 14px; }
.ui-label { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--text-3); letter-spacing: 0; }
.ui-muted { color: var(--text-3); }
.ui-strong { color: var(--text); font-weight: 600; }
.ui-sep { height: 1px; background: var(--line); margin: 12px 0; }

.ui-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ui); }
.ui-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ui-row:last-child { border-bottom: 0; }

.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(var(--fg-rgb), 0.025); font-size: 11.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; letter-spacing: -0.005em; }
.ui-chip svg { width: 12px; height: 12px; }
.ui-chip--violet { border-color: var(--chip-violet-bd); color: var(--chip-violet-fg); background: var(--chip-violet-bg); }
.ui-chip--ok { border-color: var(--chip-ok-bd); color: var(--chip-ok-fg); background: var(--chip-ok-bg); }
.ui-chip--neg { border-color: var(--chip-neg-bd); color: var(--chip-neg-fg); background: var(--chip-neg-bg); }
.ui-chip--pill { border-radius: var(--r-pill); }

.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.ui-dot--live { background: var(--mint); box-shadow: 0 0 0 2px rgba(31, 157, 91, 0.16); }
.ui-dot--violet { background: var(--violet); }
.ui-dot--neg { background: var(--neg); }

.ui-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--avatar-bg); border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }

.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--line-2); color: var(--text); background: var(--surface-2); white-space: nowrap; }
.ui-btn--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.ui-btn svg { width: 13px; height: 13px; }

.ui-input { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border-radius: var(--r-ui); border: 1px solid var(--line-2); background: var(--input-bg); color: var(--text-3); font-size: 12.5px; }
.ui-input__send { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--fg-rgb), 0.07); color: var(--text-2); }
.ui-input__send svg { width: 13px; height: 13px; }

.ui-msg { max-width: 92%; font-size: 12.5px; line-height: 1.5; }
.ui-msg--user { margin-left: auto; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--bubble); border: 1px solid var(--line); color: var(--text); }
.ui-msg--agent { color: var(--text); }
.ui-msg--agent p + p { margin-top: 8px; }
.ui-worked { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); }
.ui-worked svg { width: 12px; height: 12px; }

.ui-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ui-table th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 11px; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ui-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* working indicators (shown only while answering a visitor's action) */
.ui-typing { display: inline-flex; align-items: center; gap: 4px; height: 16px; }
.ui-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: elx-dot 1.2s var(--ease) infinite; }
.ui-typing i:nth-child(2) { animation-delay: 0.15s; }
.ui-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes elx-dot { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
.ui-caret { display: none; }
.ui-enter { animation: elx-enter var(--d-lg) var(--ease) backwards; } /* backwards: no lingering fill, so nested glass keeps its blur */
@keyframes elx-enter { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Slots (content the client still has to supply) ---------- */
.slot {
  --slot-r: var(--r-card);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  padding: 20px; border-radius: var(--slot-r);
  border: 1px dashed rgba(var(--fg-rgb), 0.2);
  background: repeating-linear-gradient(135deg, rgba(var(--fg-rgb), 0.025) 0 1px, transparent 1px 9px), rgba(var(--fg-rgb), 0.015);
  color: var(--text-3);
}
.slot__tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.slot__tag::before { content: ""; width: 6px; height: 6px; border-radius: 1px; border: 1px solid currentColor; }
.slot__title { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: -0.015em; }
.slot__hint { font-size: 13px; line-height: 1.5; color: var(--text-3); max-width: 46ch; }
.slot--center { align-items: center; text-align: center; }
.slot--inline { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 14px; border-radius: var(--r-pill); }
.slot--inline .slot__title { font-size: 13px; }

/* ---------- Logo strip ---------- */
.logos { display: grid; gap: 18px; justify-items: center; }
.logos__row { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.logos__row .slot { --slot-r: 14px; height: 60px; padding: 0; align-items: center; justify-content: center; }
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; gap: 56px; }

/* ---------- Quotes (testimonial layout; slots until supplied) ---------- */

/* ---------- CTA ---------- */
.cta { text-align: center; position: relative; }
.cta .lead { margin: 18px auto 30px; max-width: 560px; }
.cta-slab { padding: clamp(40px, 2rem + 4vw, 88px) clamp(24px, 1rem + 4vw, 64px); text-align: center; border-radius: var(--r-tile); }
.cta-slab .lead { margin: 18px auto 30px; max-width: 520px; }

/* ---------- Footer ---------- */
.footer { position: relative; padding-top: 72px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 0.8fr)); gap: 40px; }
.footer__about { max-width: 320px; }
.footer__about p { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.footer__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--text-2); transition: color var(--d-md) var(--ease); }
.footer__social:hover { color: var(--text); }
.footer__social svg { width: 18px; height: 18px; }
.footer__head { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 16px; letter-spacing: -0.015em; }
.footer__list { display: grid; gap: 12px; }
.footer__list a { font-size: 14px; color: var(--text-2); transition: color var(--d-md) var(--ease); }
.footer__list a:hover { color: var(--text); }
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.footer__meta nav { display: flex; gap: 18px; }
.footer__meta a:hover { color: var(--text); }
.wordmark-xl {
  margin-top: 40px; padding-bottom: 4px; text-align: center; user-select: none;
  font-family: var(--font-display); font-weight: 600; line-height: 0.8; letter-spacing: -0.045em;
  font-size: clamp(4rem, 22vw, 17rem);
  color: transparent;
  background-image: linear-gradient(180deg, rgba(var(--fg-rgb), 0.11) 0%, rgba(var(--fg-rgb), 0.02) 92%);
  -webkit-background-clip: text; background-clip: text;
}

/* ==========================================================================
   Page patterns
   ========================================================================== */

/* Hero (home): the headline on the left, the subhead on the right, and the live workspace on a
   monitor between them. On wide screens with motion allowed, assets/js/hero.js adds .is-zoom:
   the hero pins, and scrolling zooms the monitor until its screen fills the window, then holds
   it there to be used. Otherwise the hero is a plain stack with the workspace at full size.
   The monitor is drawn after the Samsung Smart Monitor M9: a 16:9 screen in a thin black bezel with
   a silver metal rim, a webcam at the top, a wide flat column and a flat base plate. In zoom mode it
   is a 3D object, seen at rest from low on the left (--mon-tilt-x/y); scrolling turns it to face
   the visitor while it zooms. Its face is 1318 x 758 CSS px (a 1280 x 720 screen in a 16px bezel
   and a 3px rim); hero.js scales it from the size of .mon-slot up to the window. */
.hero--monitor { --face-w: 1318; --face-h: 758; --zoom-margin: 20; --mon-w: clamp(340px, min(35vw, 56vh), 620px); --mon-tilt-x: 8deg; --mon-tilt-y: 26deg; position: relative; margin-top: calc(-1 * var(--nav-h)); }
.mon-stage { position: relative; padding: calc(var(--nav-h) + 40px) var(--gutter) 48px; background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%); }
.mon-row { display: grid; gap: 22px; max-width: var(--container); margin-inline: auto; }
.mon-title { max-width: var(--container); margin: 0 auto 22px; }
.mon-copy--right { order: 1; max-width: 30ch; font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.015em; color: var(--text-2); text-wrap: pretty; }
.mon-copy--left { order: 2; }
.mon-copy--left .btn-row { margin-top: 8px; }
.mon-slot { display: none; }
.hero--monitor .display { font-size: clamp(2.4rem, 1.2rem + 2.4vw, 3.25rem); }
.mon-hint { display: flex; width: fit-content; align-items: center; gap: 10px; margin: 40px auto 16px; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: 0; text-align: center; }
.mon-hint .live-dot { width: 6px; height: 6px; }

/* the monitor. Stacked (no zoom): a plain thin bezel around the workspace, no 3D parts */
.monitor { position: relative; max-width: 1200px; margin-inline: auto; }
.monitor__face { position: relative; padding: 8px; border-radius: 18px; background: var(--mon-bezel); box-shadow: inset 0 0 0 1px var(--mon-bezel-rim), 0 40px 70px -40px var(--mon-shadow); }
.monitor__screen { position: relative; border-radius: 11px; overflow: hidden; background: var(--bg); }
/* the workspace fills the screen like a full-screen app: no window chrome of its own, and no
   blur (the screen behind it is plain, so a blur would cost frames for nothing) */
.monitor__app .d-hero__win { border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.monitor__cam, .monitor__glare, .m3d, .monitor__status { display: none; }

/* zoom mode */
.hero--monitor.is-zoom { height: 260vh; } /* 100vh stage + 110vh of zoom + 50vh of hold */
.is-zoom .mon-stage { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; }
.is-zoom .mon-row {
  position: relative; z-index: 2; height: 100%; max-width: 1320px; padding: calc(var(--nav-h) + 18vh) var(--gutter) 2vh; /* the monitor sits low: its top edge hides the foot of the headline */
  grid-template-columns: minmax(0, 1fr) var(--mon-w) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px);
}
/* the row spans the whole stage above the monitor: let clicks through it, but not through the copy */
.is-zoom .mon-row { pointer-events: none; }
.is-zoom .mon-copy { pointer-events: auto; }
.is-zoom:not(.is-live) .monitor__face { cursor: zoom-in; }
.is-zoom .mon-copy { order: 0; }
.is-zoom .mon-copy--left .btn-row { margin-top: 0; }
/* the headline sits behind the monitor and rises out of it, like the sun between two hills.
   It rises once as the page opens, then stays still; hero.js fades it as the monitor zooms. */
.is-zoom .mon-title {
  position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--nav-h) + 16vh);
  width: min(92vw, 1240px); margin: 0 auto; text-align: center;
  font-size: clamp(3.5rem, min(7.4vw, 12vh), 7.5rem); line-height: 0.96; letter-spacing: -0.05em;
  color: transparent; background: linear-gradient(180deg, var(--text) 38%, var(--title-fade) 100%);
  -webkit-background-clip: text; background-clip: text;
  animation: mon-rise 1.8s cubic-bezier(0.3, 0, 0.2, 1) 0.2s backwards; /* slow and steady, like a sunrise */
}
@keyframes mon-rise { from { transform: translate3d(0, 46%, 0); opacity: 0; } 35% { opacity: 1; } }
.is-zoom .mon-copy--right { justify-self: end; max-width: 25ch; }
.is-zoom .mon-slot { display: block; width: var(--mon-w); aspect-ratio: 1318 / 758; }
.is-zoom .monitor { position: absolute; left: 0; top: 0; z-index: 1; width: 1318px; max-width: none; margin: 0; transform-origin: 0 0; perspective: 2300px; perspective-origin: 659px 560px; }
/* the 3D object; hero.js turns it from the rest pose to face-on */
.is-zoom .monitor__body { position: relative; width: 1318px; height: 758px; transform-style: preserve-3d; transform-origin: 659px 379px; transform: rotateX(var(--mon-tilt-x)) rotateY(var(--mon-tilt-y)); }
/* the face: 3px silver rim, 16px black bezel, 1280 x 720 screen */
.is-zoom .monitor__face {
  position: absolute; inset: 0; padding: 16px; border: 3px solid transparent; border-radius: 22px;
  background: linear-gradient(var(--mon-bezel), var(--mon-bezel)) padding-box, linear-gradient(120deg, var(--mon-metal-hi), var(--mon-metal) 48%, var(--mon-metal-lo)) border-box;
  box-shadow: inset 0 0 0 1px var(--mon-bezel-rim);
}
.is-zoom .monitor__cam { display: block; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--mon-lens) 0, var(--mon-bezel) 70%); }
.is-zoom .monitor__screen { width: 1280px; height: 720px; border-radius: 6px; pointer-events: none; }
.is-zoom.is-live .monitor__screen { pointer-events: auto; }
.is-zoom .monitor__app, .is-zoom .monitor__app .d-hero__win { height: 100%; }
.is-zoom .monitor__glare { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(116deg, var(--mon-glare) 0%, transparent 34%, transparent 62%, var(--mon-glare) 100%); }
/* the 3D parts, all metal: the panel's near edges, the column, the base plate, a shadow on the floor */
.is-zoom .m3d { display: block; position: absolute; }
.is-zoom .m3d--edge-l { left: 0; top: 12px; width: 22px; height: 734px; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(180deg, var(--mon-metal-hi), var(--mon-metal-lo)); }
.is-zoom .m3d--edge-b { left: 12px; top: 758px; width: 1294px; height: 22px; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(90deg, var(--mon-metal), var(--mon-metal-lo)); }
.is-zoom .m3d--neck { left: 489px; top: 560px; width: 340px; height: 320px; transform: translateZ(-80px); border-radius: 3px; background: linear-gradient(180deg, var(--mon-metal-hi) 0%, var(--mon-metal) 58%, var(--mon-metal-lo) 100%); }
.is-zoom .m3d--neck-l { left: 489px; top: 560px; width: 28px; height: 320px; transform-origin: 0 50%; transform: translateZ(-80px) rotateY(90deg); background: var(--mon-metal-lo); }
.is-zoom .m3d--base { left: 399px; top: 730px; width: 520px; height: 300px; transform: translateZ(-54px) rotateX(90deg); border-radius: 16px; background: linear-gradient(180deg, var(--mon-metal-lo) 0%, var(--mon-metal) 55%, var(--mon-metal-hi) 100%); }
.is-zoom .m3d--base-f { left: 399px; top: 880px; width: 520px; height: 10px; transform: translateZ(96px); border-radius: 0 0 6px 6px; background: var(--mon-metal-lo); }
.is-zoom .m3d--base-l { left: 399px; top: 880px; width: 300px; height: 10px; transform-origin: 0 50%; transform: translateZ(96px) rotateY(90deg); background: var(--mon-metal-lo); }
.is-zoom .m3d--shadow { left: 109px; top: 630px; width: 1100px; height: 520px; transform: translateY(1px) translateZ(-54px) rotateX(90deg); background: radial-gradient(closest-side, var(--mon-floor), transparent); }
/* ---------- phone mode: portrait screens get an iPhone 18 Pro in place of the monitor ----------
   hero.js adds .is-phone (with .is-zoom) when the window is portrait. The phone is drawn after the
   iPhone 18 Pro (Sept 2026): a 6.3-inch 19.5:9 screen with large rounded corners, a thin black border,
   a metal frame with its side buttons, and the smaller Dynamic Island in the status bar. Its face is
   366 x 765 CSS px: a 340 x 739 screen (the 18 Pro's 402 x 874 points, scaled so the workspace stays
   legible once zoomed) in a 10px border and a 3px frame. Same story as the monitor: the headline rises
   behind it, it starts turned and tilted, and scrolling turns it face-on and zooms in. */
.hero--monitor.is-phone {
  --face-w: 366; --face-h: 765; --zoom-margin: 12; --mon-tilt-x: 7deg; --mon-tilt-y: 22deg;
  --t-fs: clamp(30px, 9.2vw, 54px);
}
.hero--monitor.is-zoom.is-phone { height: 250svh; } /* 100svh stage + 110svh of zoom + 40svh of hold */
.is-zoom.is-phone .mon-stage { height: 100svh; }
.is-zoom.is-phone .mon-row {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: stretch;
  gap: 18px; max-width: none; padding: calc(var(--nav-h) + 2.5svh + 2.78 * var(--t-fs)) var(--gutter) max(18px, 2.5svh);
}
.is-zoom.is-phone .mon-slot { grid-row: 1; width: auto; height: 100%; max-width: 74vw; aspect-ratio: 366 / 765; }
.is-zoom.is-phone .mon-copy--left { grid-row: 2; width: 100%; max-width: 420px; }
.is-zoom.is-phone .mon-copy--left .btn-row { justify-content: center; }
.is-zoom.is-phone .mon-copy--right, .is-zoom.is-phone .mon-hint { display: none; }
.is-zoom.is-phone .mon-title { top: calc(var(--nav-h) + 2.5svh); width: calc(100% - 2 * var(--gutter)); font-size: var(--t-fs); line-height: 0.96; letter-spacing: -0.045em; }
.is-phone .mon-title .t-line { display: block; }

.is-zoom.is-phone .monitor { width: 366px; perspective: 1000px; perspective-origin: 183px 600px; }
.is-zoom.is-phone .monitor__body { width: 366px; height: 765px; transform-origin: 183px 382px; }
.is-zoom.is-phone .monitor__face { padding: 10px; border-width: 3px; border-radius: 68px; box-shadow: inset 0 0 0 1px var(--mon-bezel-rim), 0 40px 80px -36px var(--mon-shadow); }
.is-zoom.is-phone .monitor__cam { display: none; }
.is-zoom.is-phone .monitor__screen { display: flex; flex-direction: column; width: 340px; height: 739px; border-radius: 55px; }
.is-zoom.is-phone .monitor__app { flex: 1 1 0; min-height: 0; height: auto; }
/* the iOS status bar: time, the Dynamic Island, signal, Wi-Fi, battery */
.is-zoom.is-phone .monitor__status {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; height: 46px; padding: 3px 24px 0 34px;
  background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
}
.monitor__island { position: relative; width: 79px; height: 29px; border-radius: 999px; background: var(--mon-bezel); }
.monitor__island::after { content: ""; position: absolute; right: 10px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--mon-lens) 0, var(--mon-bezel) 70%); }
.monitor__sys { justify-self: end; display: inline-flex; align-items: center; gap: 5px; }
.monitor__sys svg { display: block; height: 11px; width: auto; }
.monitor__battery { position: relative; width: 24px; height: 12px; border-radius: 4px; border: 1px solid rgba(var(--fg-rgb), 0.4); }
.monitor__battery::before { content: ""; position: absolute; inset: 1.5px; right: 5px; border-radius: 2px; background: currentColor; }
.monitor__battery::after { content: ""; position: absolute; right: -3.5px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(var(--fg-rgb), 0.4); }
/* the phone's 3D parts: its near edges (with the action and volume buttons) and a shadow below; no stand */
.is-zoom.is-phone .m3d--edge-l {
  top: 70px; height: 625px; width: 24px;
  background:
    linear-gradient(180deg, transparent 10%, var(--mon-metal-hi) 10% 14%, transparent 14% 19%, var(--mon-metal-hi) 19% 28%, transparent 28% 31%, var(--mon-metal-hi) 31% 40%, transparent 40%),
    linear-gradient(180deg, var(--mon-metal), var(--mon-metal-lo));
}
.is-zoom.is-phone .m3d--edge-b { left: 70px; top: 765px; width: 226px; height: 24px; }
.is-zoom.is-phone .m3d--neck, .is-zoom.is-phone .m3d--neck-l, .is-zoom.is-phone .m3d--base, .is-zoom.is-phone .m3d--base-f, .is-zoom.is-phone .m3d--base-l { display: none; }
.is-zoom.is-phone .m3d--shadow { left: -67px; top: 725px; width: 500px; height: 260px; transform: translateZ(-12px) rotateX(90deg); }

.is-zoom .mon-hint { position: absolute; left: 50%; bottom: 34px; z-index: 3; margin: 0; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--d-xl) var(--ease); }
.is-zoom.is-live .mon-hint { opacity: 1; }

/* Services (home): an index of the six, grouped by job (assets/js/lineup.js).
   After sana.ai's overview and Apple's feature accordions: names only, the open one in ink,
   the rest grey; the open one shows its line of copy and a link to its page.
   Wide windows: the title on the left, the index on the right. Without JS every item stays open. */
.lineup { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 1.25rem + 2vw, 48px); }
.lineup__list { border-bottom: 1px solid var(--line); }
.lineup__group { padding: 14px 0 12px; border-top: 1px solid var(--line); }
.lineup__job { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--text-3); margin-bottom: 4px; }
.lineup__name { margin: 0; font: inherit; }
.lineup__btn { display: block; width: 100%; padding: 5px 0; text-align: left; font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.034em; color: var(--text-4); cursor: pointer; transition: color var(--d-md) var(--ease); }
.lineup__btn:hover { color: var(--text-2); }
.lineup__item.is-open .lineup__btn, .lineup:not(.is-ready) .lineup__btn { color: var(--text); cursor: default; }
.lineup__body { display: grid; grid-template-rows: 1fr; }
.lineup__inner { min-height: 0; overflow: hidden; }
.lineup.is-ready .lineup__item:not(.is-open) .lineup__body { grid-template-rows: 0fr; visibility: hidden; }
.lineup__text { max-width: 48ch; padding-top: 4px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.lineup__link { margin: 12px 0 12px; }
@media (min-width: 960px) {
  .lineup { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(40px, 5vw, 80px); }
  .lineup__body { transition: grid-template-rows var(--d-xl) var(--ease), visibility var(--d-xl); }
}

/* FAQ (home): the services index's language: title left, hairline list right.
   Native <details>; the open/close height eases where ::details-content is supported. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 1.25rem + 2vw, 48px); interpolate-size: allow-keywords; }
.faq__list { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; font-family: var(--font-display); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--text); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline-offset: 2px; }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; color: var(--text-3); transition: color var(--d-md) var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--d-xl) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__q:hover .faq__icon, .faq__item[open] .faq__icon { color: var(--text); }
.faq__a { padding: 0 38px 22px 0; }
.faq__a p { max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.faq__link { display: block; width: fit-content; margin-top: 12px; font-weight: 600; color: var(--text); }
.faq__link:hover { color: var(--violet); }
.faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--d-xl) var(--ease), content-visibility var(--d-xl) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__slot { margin: 20px 0; }
@media (min-width: 960px) {
  .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(40px, 5vw, 80px); }
}

/* Client results (home): two real builds, word for word from the outreach copy's proof
   (outreach-engine/COPY.md "THE PROOF RULE"; never change the name or the numbers).
   The same frame as the services index and the FAQ: title left, hairline rows right. */
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 1.25rem + 2vw, 48px); }
.proof__list { border-bottom: 1px solid var(--line); }
.proof__item { padding: 22px 0 34px; border-top: 1px solid var(--line); }
.proof__who { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font: inherit; }
.proof__name { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.proof__field { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.proof__stats { display: flex; flex-wrap: wrap; gap: 20px clamp(36px, 6vw, 80px); margin-top: 28px; }
.proof__num { display: block; font-family: var(--font-display); font-size: clamp(3.5rem, 2.2rem + 4.5vw, 6.5rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; color: var(--text); font-variant-numeric: tabular-nums; }
.proof__unit { display: block; margin-top: 12px; font-size: 15px; color: var(--text-2); }
.proof__statement { margin-top: 22px; max-width: 24ch; font-family: var(--font-display); font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.035em; color: var(--text); text-wrap: balance; }
.proof__text { margin-top: 18px; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 960px) {
  .proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(40px, 5vw, 80px); }
}

/* Media stage (a product window on a page) */
.glow-stage { position: relative; }
.glow-stage > .demo { position: relative; z-index: 1; }

@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__inner { justify-content: space-between; gap: 12px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .logos__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .btn-row:not(.keep) { width: 100%; }
  .btn-row:not(.keep) .btn { flex: 1 1 auto; }
  .cta-slab { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Interactive demos
   ========================================================================== */
/* :where() keeps these resets at zero specificity so component classes (.ui-btn--primary etc.) always win */
:where(.demo) button { font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit; }
.demo [data-act] { cursor: pointer; }
.demo [data-act]:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; border-radius: 6px; }
:where(.demo) input, :where(.demo) textarea { font: inherit; color: var(--text); background: transparent; border: 0; outline: none; min-width: 0; }
:where(.demo) input::placeholder, :where(.demo) textarea::placeholder { color: var(--text-3); }
:where(.demo) :focus:not(:focus-visible) { outline: none; }
/* text fields show focus on their field box (.ui-input:focus-within), not as a ring on the bare input */
:where(.demo) input:focus-visible, :where(.demo) textarea:focus-visible { outline: none; }
.ui-input:focus-within { border-color: var(--chip-violet-bd); }
.demo .ui-btn { cursor: pointer; transition: background-color var(--d-md) var(--ease), border-color var(--d-md) var(--ease), color var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.demo .ui-btn:hover { background: rgba(var(--fg-rgb), 0.06); border-color: var(--line-3); }
.demo .ui-btn--primary:hover { background: var(--primary-hover); border-color: transparent; }
.demo .ui-btn:active { transform: scale(0.97); }
/* embedded variant: a demo rendered as a view inside the hero console */
.demo[data-variant="embedded"] { height: 100%; }
.demo[data-variant="embedded"] > .ui-window { height: 100% !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* thin scrollbars inside product windows */
.ui-window * { scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), 0.16) transparent; }
.ui-window *::-webkit-scrollbar { width: 8px; height: 8px; }
.ui-window *::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.ui-window *::-webkit-scrollbar-track { background: transparent; }