/* ==========================================================================
   Rosanne: quiet, precise, web-app idiom.
   White page (pure black in dark), system type, small refined sizes, pills,
   hairlines and whitespace. One 768px reading column. No content cards on the
   home page. The one moving element is the dotted particle orb (orb.js).
   Layers: tokens, base, layout, controls, header and sheet, hero and orb,
   home sections, subpages, footer, motion.
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;
  --font: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

  --bg: #FFFFFF;
  --raised: #FFFFFF;
  --surface-2: #F9F9F9;
  --surface-4: #F3F3F3;

  --text: #0D0D0D;
  --text-2: #5D5D5D;
  /* Tertiary text: the #8F8F8F token darkened just enough for 4.5:1 on white (WCAG AA at 13px). */
  --text-3: #767676;
  --icon-3: #8F8F8F;

  --line: rgba(0, 0, 0, 0.10);
  --line-light: rgba(0, 0, 0, 0.05);
  --line-heavy: rgba(0, 0, 0, 0.15);
  --hover: rgba(0, 0, 0, 0.05);
  --row-hover: #F9F9F9;

  --solid: #0D0D0D;
  --solid-text: #FFFFFF;
  --solid-hover: rgba(0, 0, 0, 0.8);
  --outline-bg: transparent;

  --composer-bg: #FFFFFF;
  --composer-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 80px 8px rgba(0, 0, 0, 0.024);
  --composer-shadow-hover: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.06), 0 4px 80px 8px rgba(0, 0, 0, 0.03);
  --composer-btn: #F3F3F3;

  --accent: #93278F;
  --accent-line: rgba(147, 39, 143, 0.35);
  --focus: #93278F;

  --header-scrolled: rgba(255, 255, 255, 0.85);
  --hero-quiet: #8A8A8A;
  --floor-dot: rgba(0, 0, 0, 0.16);
  --pin-line: rgba(0, 0, 0, 0.35);
  --pin-glow: rgba(147, 39, 143, 0.14);
  --marquee-base: #A8A8A8;
  --marquee-lit: #0D0D0D;
  --orb-still: url("/assets/img/hero/orb-still-light.webp");
  --hx-floor-1: rgba(30, 14, 48, 0.16);
  --hx-floor-2: rgba(30, 14, 48, 0.05);
  --hx-floor-core: rgba(20, 8, 32, 0.22);
  --hx-cta-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 8px 20px -10px rgba(0, 0, 0, 0.35);
  --hx-cta-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 28px -12px rgba(0, 0, 0, 0.45);
  --card-line: rgba(0, 0, 0, 0.05);
  --card-wash: rgba(255, 255, 255, 0.35);

  --show-light: block;
  --show-dark: none;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Tokens: dark (system preference unless light was chosen, or chosen explicitly) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --raised: #212121;
    --surface-2: #212121;
    --surface-4: #2F2F2F;
    --text: #FFFFFF;
    --text-2: #CDCDCD;
    --text-3: #AFAFAF;
    --icon-3: #AFAFAF;
    --line: rgba(255, 255, 255, 0.15);
    --line-light: rgba(255, 255, 255, 0.05);
    --line-heavy: rgba(255, 255, 255, 0.20);
    --hover: rgba(255, 255, 255, 0.10);
    --row-hover: #171717;
    --solid: #FFFFFF;
    --solid-text: #0D0D0D;
    --solid-hover: rgba(255, 255, 255, 0.8);
    --outline-bg: #212121;
    --composer-bg: #212121;
    --composer-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2);
    --composer-shadow-hover: inset 0 0 1px rgba(255, 255, 255, 0.35);
    --composer-btn: #2F2F2F;
    --accent: #C04CBB;
    --accent-line: rgba(192, 76, 187, 0.5);
    --focus: #C04CBB;
    --header-scrolled: rgba(0, 0, 0, 0.85);
    --hero-quiet: #7C7C7C;
    --floor-dot: rgba(255, 255, 255, 0.16);
    --pin-line: rgba(255, 255, 255, 0.45);
    --pin-glow: rgba(192, 76, 187, 0.28);
    --marquee-base: #5E5E5E;
    --marquee-lit: #FFFFFF;
    --orb-still: url("/assets/img/hero/orb-still-dark.webp");
    --hx-floor-1: rgba(140, 92, 255, 0.30);
    --hx-floor-2: rgba(210, 60, 196, 0.10);
    --hx-floor-core: rgba(200, 170, 255, 0.30);
    --hx-cta-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 32px -10px rgba(192, 76, 187, 0.55);
    --hx-cta-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px -10px rgba(192, 76, 187, 0.7);
    --card-line: rgba(255, 255, 255, 0.05);
    --card-wash: rgba(0, 0, 0, 0.45);
    --show-light: none;
    --show-dark: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --raised: #212121;
  --surface-2: #212121;
  --surface-4: #2F2F2F;
  --text: #FFFFFF;
  --text-2: #CDCDCD;
  --text-3: #AFAFAF;
  --icon-3: #AFAFAF;
  --line: rgba(255, 255, 255, 0.15);
  --line-light: rgba(255, 255, 255, 0.05);
  --line-heavy: rgba(255, 255, 255, 0.20);
  --hover: rgba(255, 255, 255, 0.10);
  --row-hover: #171717;
  --solid: #FFFFFF;
  --solid-text: #0D0D0D;
  --solid-hover: rgba(255, 255, 255, 0.8);
  --outline-bg: #212121;
  --composer-bg: #212121;
  --composer-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2);
  --composer-shadow-hover: inset 0 0 1px rgba(255, 255, 255, 0.35);
  --composer-btn: #2F2F2F;
  --accent: #C04CBB;
  --accent-line: rgba(192, 76, 187, 0.5);
  --focus: #C04CBB;
  --header-scrolled: rgba(0, 0, 0, 0.85);
  --hero-quiet: #7C7C7C;
  --floor-dot: rgba(255, 255, 255, 0.16);
  --pin-line: rgba(255, 255, 255, 0.45);
  --pin-glow: rgba(192, 76, 187, 0.28);
  --marquee-base: #5E5E5E;
  --marquee-lit: #FFFFFF;
  --orb-still: url("/assets/img/hero/orb-still-dark.webp");
  --hx-floor-1: rgba(140, 92, 255, 0.30);
  --hx-floor-2: rgba(210, 60, 196, 0.10);
  --hx-floor-core: rgba(200, 170, 255, 0.30);
  --hx-cta-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 32px -10px rgba(192, 76, 187, 0.55);
  --hx-cta-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px -10px rgba(192, 76, 187, 0.7);
  --card-line: rgba(255, 255, 255, 0.05);
  --card-wash: rgba(0, 0, 0, 0.45);
  --show-light: none;
  --show-dark: block;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
hr { border: 0; margin: 0; }
[hidden] { display: none !important; }
.no-trans *, .no-trans *::before, .no-trans *::after { transition: none !important; }

/* Line icons: 20px on a 20-unit grid, 1.5 stroke, round caps and joins */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Theme-dependent visibility */
.only-light { display: var(--show-light) !important; }
.only-dark { display: var(--show-dark) !important; }

.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 { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 9999px; background: var(--solid); color: var(--solid-text); font-size: 14px; line-height: 20px; font-weight: 500; transition: top 150ms; }
.skip:focus { top: 8px; }

/* Focus: 1.5px ring 2.5px away, in Rosanne purple (AA on both backgrounds) */
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 2.5px; }
.demo:focus-visible { outline: none; }

::selection { background: rgba(147, 39, 143, 0.18); }

/* ---------- Layout: one full-page shell, a 12-column grid, split sections ---------- */
:root {
  --gutter: clamp(16px, 4.2vw, 72px);
  --maxw: 1800px;
  --gap: clamp(24px, 3vw, 48px);
  --sticky-top: 92px;
}
.shell { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.section { margin-top: 112px; scroll-margin-top: 56px; }

/* Section head: title and one line of copy over the left half */
.section-head { max-width: calc(50% - var(--gap) / 2); margin-bottom: 40px; }
.section-head > p { margin-top: 12px; max-width: 560px; color: var(--text-2); }
.section-head > .section-head__note { margin-top: 8px; }

/* Split: heading on the left, content on the right (cols 1-5 | 6-12, or 1-4 | 5-12) */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.split__head { grid-column: 1 / span 5; }
.split__body { grid-column: 6 / -1; min-width: 0; }
.split--wide .split__head { grid-column: 1 / span 4; }
.split--wide .split__body { grid-column: 5 / -1; }
.split__text { margin-top: 12px; max-width: 480px; color: var(--text-2); }
.split__note { margin-top: 8px; }
.split__head--sticky { position: sticky; top: var(--sticky-top); }

.h2 { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.meta { font-size: 13px; line-height: 18px; color: var(--text-3); }

@media (max-width: 1023px) {
  .section-head { max-width: 640px; }
  .split { display: block; }
  .split__head { max-width: 640px; margin-bottom: 32px; }
  .split__head--sticky { position: static; }
}
@media (max-width: 767px) {
  .section { margin-top: 72px; }
}
@media (max-width: 599px) {
  .h2 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
}

/* ---------- Controls ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Pills: 40px CTAs (44px on touch), 36px header/cards, 32px row actions */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px;
  border-radius: 9999px; border: 1px solid transparent;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.btn .ico { width: 18px; height: 18px; }
.btn--solid { background: var(--solid); color: var(--solid-text); }
.btn--solid:hover { background: var(--solid-hover); }
.btn--outline { background: var(--outline-bg); border-color: var(--line-heavy); color: var(--text); }
.btn--outline:hover { background: var(--hover); }
.btn--md { height: 36px; padding: 0 12px; }
.btn--sm { height: 32px; padding: 0 12px; }
.btn--sm::after { content: ""; position: absolute; inset: -6px -2px; }
.btn--promo { height: 40px; padding: 0 28px; font-size: 16px; line-height: 24px; font-weight: 600; }
@media (pointer: coarse) {
  .btn:not(.btn--md):not(.btn--sm) { height: 44px; }
}

.icon-btn {
  position: relative;
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 9999px; color: var(--text);
  transition: background-color 150ms, color 150ms;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn--sm { width: 32px; height: 32px; color: var(--text-2); }
.icon-btn--sm:hover { color: var(--text); }

/* Text links */
.text-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
.text-link .ico { width: 16px; height: 16px; transition: transform 150ms var(--ease); }
.text-link:hover > span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover .ico { transform: translateX(2px); }
.inline-link { text-decoration: underline; text-decoration-color: var(--line-heavy); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms, color 150ms; }
.inline-link:hover { color: var(--text); text-decoration-color: var(--accent); }

.text-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; margin-left: -10px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); transition: background-color 150ms; }
.text-btn:hover { background: var(--hover); }

/* "New" announcement pill */
.new-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px 0 12px;
  border: 1px solid var(--line); border-radius: 9999px;
  font-size: 13px; line-height: 18px; color: var(--text-2);
  transition: background-color 150ms;
}
.new-pill:hover { background: var(--hover); }
.new-pill__new { color: var(--accent); font-weight: 500; }
.new-pill .ico { width: 16px; height: 16px; color: var(--icon-3); margin-left: -2px; }

/* Composer: 52px, radius 28px, soft halo; two rows on small screens */
.composer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px;
  width: 100%; max-width: 480px; min-height: 52px; padding: 8px;
  border-radius: 28px; background: var(--composer-bg); box-shadow: var(--composer-shadow);
  color: var(--text);
  transition: box-shadow 150ms;
}
.composer__icon, .composer__send {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 9999px;
}
.composer__icon { color: var(--text); }
.composer__send { background: var(--solid); color: var(--solid-text); transition: background-color 150ms, opacity 150ms; }
.composer__text {
  flex: 1 1 0; min-width: 0;
  font-size: 16px; line-height: 26px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The example fades with filter: opacity so the resting text keeps its full contrast colour */
.composer__cycle { display: inline; transition: filter 300ms var(--ease); }
.composer__cycle.is-out { filter: opacity(0); }
a.composer:hover { box-shadow: var(--composer-shadow-hover); }
a.composer:hover .composer__send { background: var(--solid-hover); }

@media (max-width: 599px) {
  .composer { max-width: none; padding: 12px 8px 8px; border-radius: 28px; row-gap: 6px; }
  .composer__text { order: -1; flex: 1 0 100%; padding: 0 8px; }
  .composer__icon { background: var(--composer-btn); }
  .composer__send { margin-left: auto; }
}

/* Chips (demo examples) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; min-inline-size: 0; }
.chip {
  position: relative; display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--line);
  font-size: 14px; line-height: 20px; color: var(--text-2); cursor: pointer; user-select: none;
  transition: background-color 150ms, color 150ms;
}
.chip:hover { background: var(--hover); color: var(--text); }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip.is-on, .chip:has(input:checked) { color: var(--text); background: var(--hover); }
.chip:has(input:focus-visible) { outline: 1.5px solid var(--focus); outline-offset: 2.5px; }

/* Mobile sheet, in the app-sidebar idiom */
.sheet {
  position: fixed; inset: 0 auto 0 0;
  width: 260px; max-width: calc(100vw - 48px); height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--text);
  box-shadow: 1px 0 0 var(--line);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.2); }
.sheet[open] { display: block; }
.sheet__inner { display: flex; flex-direction: column; height: 100%; padding: 0 8px 16px; overflow-y: auto; }
@supports (padding: env(safe-area-inset-top)) { .sheet__inner { padding-top: env(safe-area-inset-top, 0px); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); } }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 0 0 8px; flex: none; }
.sheet__nav { margin-top: 8px; }
.sheet__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 36px; padding: 0 10px; border-radius: 10px;
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text); text-align: left;
  transition: background-color 150ms;
}
.sheet__row:hover { background: var(--hover); }
.sheet__row[aria-current="page"] { background: var(--hover); }
.sheet__row .ico { color: var(--text); }
.sheet__mark { width: 16px; height: 16px; margin-inline: 2px; flex: none; }
.sheet__rule { height: 1px; background: var(--line); margin: 8px 10px; }
.sheet__foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.sheet__foot-title { font-size: 14px; line-height: 20px; font-weight: 600; }
.sheet__foot-text { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-3); }
.sheet__foot-btn { width: 100%; margin-top: 16px; }
@media (pointer: coarse) { .sheet__row { height: 40px; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 220ms var(--ease); }
  .sheet[open]::backdrop { animation: fade-in 220ms var(--ease); }
}
@keyframes sheet-in { from { transform: translateX(-24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Header: slim 44px bar, full-bleed background, content on the page shell, no line ---------- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: background-color 150ms; }
/* The page draws edge to edge (viewport-fit=cover): keep the bar clear of the iPhone notch and Dynamic Island */
@supports (padding: env(safe-area-inset-top)) { .masthead { padding-top: env(safe-area-inset-top, 0px); } }
.masthead.is-scrolled { background: var(--header-scrolled); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.masthead__bar { display: flex; align-items: center; height: 44px; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; height: 28px; padding: 0 4px; margin-left: -4px; border-radius: 8px; flex: none; }
.brand__logo { width: auto; height: 16px; }
.colophon .brand { height: 36px; }
.colophon .brand__logo { height: 20px; } /* the footer keeps the larger mark */
.nav { margin-left: 16px; } /* 20px from the monogram (the brand link has 4px padding) */
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__list a { display: block; padding: 4px 9px; border-radius: 9999px; font-size: 13px; line-height: 18px; color: var(--text-2); transition: background-color 150ms, color 150ms; }
.nav__list a:hover { background: var(--hover); color: var(--text); }
.nav__list a[aria-current="page"] { color: var(--text); }
.masthead__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Slim controls: 28px pills and icon buttons, 13px labels, 16px icons; an invisible pad keeps taps easy */
.masthead .btn { height: 28px; padding: 0 12px; gap: 4px; font-size: 13px; line-height: 18px; }
.masthead .icon-btn { width: 28px; height: 28px; }
.masthead .ico { width: 16px; height: 16px; }
.masthead .btn::after, .masthead .icon-btn::after { content: ""; position: absolute; inset: -8px -3px; }
.menu-open { display: none; }
@media (max-width: 767px) {
  .nav, .theme-toggle, .masthead__contact { display: none; }
  .masthead__tools { gap: 4px; }
  .menu-open { display: inline-grid; margin-right: -4px; }
  .masthead .menu-open .ico { width: 18px; height: 18px; }
}

/* ---------- Hero: a centred keynote composition ----------
   Headline, one primary action and the availability line on top. Below, the rig: the particle orb standing on
   a dotted perspective floor (hero.js draws it; the CSS dot plane is the no-JS fallback) with four hairline
   callouts for the agent loop. Partners glide past a centre spotlight at the foot. No rings, no halos. */
.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: 848px; min-height: min(calc(100vh - 44px), 1000px); min-height: min(calc(100svh - 44px), 1000px);
  overflow-x: clip;
}
@supports not (overflow-x: clip) { .hero { overflow: hidden; } }
.hero__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(36px, 5.4vh, 72px); }

/* Eyebrow: a quiet announcement link, no outline; a soft wash only on hover */
.hx__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px;
  border-radius: 9999px; font-size: 13px; line-height: 18px; color: var(--text-2);
  transition: background-color 200ms, color 200ms;
}
.hx__eyebrow:hover { background: var(--hover); color: var(--text); }
.hx__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hx__new { color: var(--accent); font-weight: 500; }
.hx__eyebrow .ico { width: 14px; height: 14px; margin-left: -2px; color: var(--icon-3); transition: transform 250ms var(--ease), color 200ms; }
.hx__eyebrow:hover .ico { transform: translateX(2px); color: var(--text); }

/* Headline: ink, then a quieter grey. One line on wide screens, two below 1200px. */
.hero__title {
  --ls-from: 0.01em; --ls-to: -0.04em;
  margin-top: 20px;
  font-size: clamp(38px, min(3.2vw + 18px, 7.4vh), 72px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero__line { display: block; padding-bottom: 0.04em; }
@media (min-width: 1200px) { .hero__line { display: inline-block; } }
.hero__quiet { color: var(--hero-quiet); }
.hero__sub { margin-top: 18px; max-width: 600px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 28px; }
.btn--lg { height: 44px; padding: 0 20px; font-size: 15px; line-height: 20px; }
.btn--lg .ico { width: 18px; height: 18px; }
/* The one primary action: lifts a pixel on hover, the arrow nods down */
.hx__cta {
  box-shadow: var(--hx-cta-shadow);
  transition: background-color 150ms, transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.hx__cta:hover { transform: translateY(-1px); box-shadow: var(--hx-cta-shadow-hover); }
.hx__cta:active { transform: translateY(0); transition-duration: 80ms; }
.hx__dl-arrow { transition: transform 300ms var(--ease); }
.hx__cta:hover .hx__dl-arrow { transform: translateY(1.5px); }
.hx__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text); }
.hx__link > span {
  padding-block: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size 350ms var(--ease);
}
.hx__link:hover > span, .hx__link:focus-visible > span { background-size: 100% 1px; }
.hx__link .ico { width: 16px; height: 16px; transition: transform 300ms var(--ease); }
.hx__link:hover .ico { transform: translateX(3px); }
.hero__avail { margin-top: 16px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.hero__avail span { margin-inline: 4px; }
.hero__avail b { font-weight: inherit; }

/* The rig: orb, floor and callouts share one coordinate box (--s = orb size) */
.rig {
  --s: clamp(280px, min(26vw + 20px, 100vh - 500px), 460px);
  --s: clamp(280px, min(26vw + 20px, 100svh - 500px), 460px);
  position: relative; flex: 1 0 auto; z-index: 1;
  min-height: calc(var(--s) * 1.02 + 24px);
  display: grid; place-items: center;
}
.rig__core { position: relative; z-index: 1; width: var(--s); height: var(--s); margin-top: -8px; }
.orb--hero { width: 100%; }
/* Without WebGL (or without JS) the orb is a still frame of itself; the image loads only when this shows */
.orb--hero::before { content: ""; position: absolute; inset: -10%; background: var(--orb-still) center / contain no-repeat; display: none; }
.no-js .orb--hero::before, .rig__core.is-static .orb--hero::before { display: block; }
/* Contact shadow: a wide soft pool and a darker core where the orb meets the floor (a violet glow in dark) */
.rig__shadow { position: absolute; left: 50%; bottom: -2%; width: 62%; height: 11%; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.rig__shadow::before, .rig__shadow::after { content: ""; position: absolute; border-radius: 50%; }
.rig__shadow::before { inset: 0; background: radial-gradient(closest-side, var(--hx-floor-1), var(--hx-floor-2) 45%, transparent 100%); }
.rig__shadow::after { left: 26%; right: 26%; top: 34%; bottom: 34%; background: radial-gradient(closest-side, var(--hx-floor-core), transparent 100%); }

/* Floor: full-bleed, starts at the orb's equator, fades into the page before the partner line */
.rig__floor {
  position: absolute; left: 50%; top: 22%; bottom: 0; width: 100vw; transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%);
}
/* Fallback plane (no JS / no canvas): the same dots, tilted into perspective */
.rig__floor::before {
  content: ""; position: absolute; left: -25%; right: -25%; top: 18%; bottom: -30%;
  background: radial-gradient(circle, var(--floor-dot) 1px, transparent 1.4px) 0 0 / 28px 28px;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask: radial-gradient(ellipse 60% 90% at 50% 0, #000 20%, transparent 70%);
  mask: radial-gradient(ellipse 60% 90% at 50% 0, #000 20%, transparent 70%);
}
.rig__floor.is-live::before { display: none; }
.rig__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Callouts: keynote annotations. A pin just outside the orb's silhouette (0.47 x size from the centre),
   a hairline wire, a quiet label; only the active step is lit. Placed from the orb centre. */
.callouts { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.callout {
  --len: calc(var(--s) * 0.3);
  position: absolute; display: flex; align-items: center;
  color: var(--text-3);
  transition: color 500ms var(--ease);
}
.callout__pin {
  position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--pin-line), 0 0 0 2px var(--bg);
  transition: background-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.callout__wire { position: relative; flex: none; width: var(--len); height: 1px; background: var(--line); overflow: hidden; }
.callout__wire::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%); opacity: 0;
}
.callout__text { position: relative; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding-inline: 12px; white-space: nowrap; text-align: left; }
.callout__text::before {
  content: ""; position: absolute; inset: -14px -18px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 55%, transparent);
}
.callout__n { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 16px; letter-spacing: 0.02em; color: var(--text-3); }
.callout__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-3); transition: color 500ms var(--ease); }
.callout__note { grid-column: 2; font-size: 12px; line-height: 16px; color: var(--text-3); transition: color 500ms var(--ease); }
/* Left-hand callouts read right-to-left: label, wire, pin */
.callout--plan, .callout--approve { flex-direction: row-reverse; }
.callout--plan .callout__text, .callout--approve .callout__text { text-align: right; justify-items: end; grid-template-columns: auto auto; }
.callout--plan .callout__wire::after, .callout--approve .callout__wire::after { transform: translateX(250%); }
/* Positions: each pin centre sits on one circle of radius 0.47 x size, just outside the dots (4px is half a pin) */
.callout--plan { right: calc(var(--s) * 0.415 - 4px); top: calc(var(--s) * -0.22); transform: translateY(-50%); }
.callout--act { left: calc(var(--s) * 0.459 - 4px); top: calc(var(--s) * -0.1); transform: translateY(-50%); }
.callout--approve { right: calc(var(--s) * 0.449 - 4px); top: calc(var(--s) * 0.14); transform: translateY(-50%); }
.callout--report { left: calc(var(--s) * 0.392 - 4px); top: calc(var(--s) * 0.26); transform: translateY(-50%); }
/* Active step (hero.js cycles it; the first one is lit without JS) */
.callout.is-active { color: var(--text); }
.callout.is-active .callout__name { color: var(--text); }
.callout.is-active .callout__note { color: var(--text-2); }
.callout.is-active .callout__pin { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2px var(--bg), 0 0 0 5px var(--pin-glow); }
/* Wide screens: no step numbers, the name sits over its note */
@media (min-width: 900px) {
  .callout__n { display: none; }
  .callout__text, .callout--plan .callout__text, .callout--approve .callout__text { grid-template-columns: auto; }
  .callout__note { grid-column: 1; }
}

/* Partners: caption on the left, logos gliding endlessly with feathered edges. They rest in grey and are lit
   as they pass the centre (a second, masked copy of the track). Pure CSS; hero.js only eases the speed on hover. */
.hero__foot { position: relative; z-index: 2; overflow: clip; display: flex; align-items: center; gap: 24px 56px; padding-block: 28px 32px; }
.hero__foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line);
}
.marquee {
  --mq-gap: clamp(48px, 5.6vw, 96px); --dur: 56s;
  position: relative; flex: 1; min-width: 0; overflow: hidden; width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent 0, transparent 2%, #000 11%, #000 88%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, transparent 2%, #000 11%, #000 88%, transparent 100%);
}
.marquee__track { display: flex; width: max-content; }
.marquee__set { display: flex; flex: none; align-items: center; gap: var(--mq-gap); padding-right: var(--mq-gap); height: 44px; }
.marquee .partner { height: 24px; background-color: var(--marquee-base); transition: background-color 300ms var(--ease); }
.marquee__set li:hover .partner { background-color: var(--marquee-lit); }
.marquee__lens {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000 46%, #000 54%, transparent 70%);
  mask: linear-gradient(90deg, transparent 30%, #000 46%, #000 54%, transparent 70%);
}
.marquee__lens .partner { background-color: var(--marquee-lit); }
.marquee__set--copy { display: none; }

/* Without JS the steps sit as one quiet row under the orb's still frame */
.no-js .callout__wire, .no-js .callout__pin, .no-js .callout__text::before { display: none; }
.no-js .rig { padding-bottom: 20px; }
.no-js .callouts { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
.no-js .callout, .no-js .callout--plan, .no-js .callout--approve { position: static; transform: none; flex-direction: row; }
.no-js .callout .callout__text { text-align: left; justify-items: start; padding: 0; }
.no-js .callout--plan .callout__text, .no-js .callout--approve .callout__text { text-align: left; justify-items: start; }

/* ---------- Hero motion (only when motion is allowed and the page script is alive) ----------
   The entrance plays once; hero.js marks the hero settled when the last label lands, so a resize never replays it. */
@media (prefers-reduced-motion: no-preference) {
  .marquee__set--copy { display: flex; }
  .marquee__track { animation: marquee var(--dur) linear infinite; }
  .rig__shadow::before, .rig__shadow::after { animation: hx-floor 9s ease-in-out infinite alternate; }

  .motion .hero:not(.is-settled) .hero__line { animation: hero-settle 1400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .motion .hero:not(.is-settled) .hero__line + .hero__line { animation-delay: 140ms; }
  .motion .hero:not(.is-settled) .hero__in { animation: hero-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .motion .hero:not(.is-settled) .hero__sub.hero__in { animation-delay: 380ms; }
  .motion .hero:not(.is-settled) .hero__actions.hero__in { animation-delay: 480ms; }
  .motion .hero:not(.is-settled) .hero__avail.hero__in { animation-delay: 580ms; }
  .motion .hero:not(.is-settled) .rig__floor { animation: floor-in 1600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
  .motion .hero:not(.is-settled) .callout__wire { animation: wire-in 900ms cubic-bezier(0.65, 0, 0.35, 1) both; transform-origin: left center; }
  .motion .hero:not(.is-settled) .callout--plan .callout__wire, .motion .hero:not(.is-settled) .callout--approve .callout__wire { transform-origin: right center; }
  .motion .hero:not(.is-settled) .callout__pin { animation: pin-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .motion .hero:not(.is-settled) .callout__text { animation: label-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .motion .hero:not(.is-settled) .callout--plan > * { animation-delay: 700ms; } .motion .hero:not(.is-settled) .callout--plan .callout__wire { animation-delay: 800ms; } .motion .hero:not(.is-settled) .callout--plan .callout__text { animation-delay: 1250ms; }
  .motion .hero:not(.is-settled) .callout--act > * { animation-delay: 850ms; } .motion .hero:not(.is-settled) .callout--act .callout__wire { animation-delay: 950ms; } .motion .hero:not(.is-settled) .callout--act .callout__text { animation-delay: 1400ms; }
  .motion .hero:not(.is-settled) .callout--approve > * { animation-delay: 1000ms; } .motion .hero:not(.is-settled) .callout--approve .callout__wire { animation-delay: 1100ms; } .motion .hero:not(.is-settled) .callout--approve .callout__text { animation-delay: 1550ms; }
  .motion .hero:not(.is-settled) .callout--report > * { animation-delay: 1150ms; } .motion .hero:not(.is-settled) .callout--report .callout__wire { animation-delay: 1250ms; } .motion .hero:not(.is-settled) .callout--report .callout__text { animation-delay: 1700ms; }
  .motion .hero:not(.is-settled) .hero__foot::before { animation: line-in 1200ms cubic-bezier(0.65, 0, 0.35, 1) 500ms both; transform-origin: 50% 50%; }
  .motion .hero:not(.is-settled) .hero__foot .partners__title { animation: hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both; }
  .motion .hero:not(.is-settled) .marquee { animation: hero-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both; }

  .callout.is-active .callout__wire::after { animation: wire-signal 1800ms cubic-bezier(0.45, 0, 0.2, 1) 200ms both; }
  .callout--plan.is-active .callout__wire::after, .callout--approve.is-active .callout__wire::after { animation-name: wire-signal-rev; }
  .callout.is-active .callout__pin::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--accent);
    animation: pin-ping 1800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
  }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hero-settle { from { opacity: 0; letter-spacing: var(--ls-from, 0.01em); filter: blur(14px); transform: translateY(0.18em); } to { opacity: 1; letter-spacing: var(--ls-to, -0.04em); filter: blur(0); transform: none; } }
@keyframes floor-in { from { opacity: 0; transform: translateX(-50%) translateY(24px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes wire-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pin-in { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes label-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes wire-signal { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(250%); opacity: 1; } }
@keyframes wire-signal-rev { 0% { transform: translateX(250%); opacity: 1; } 100% { transform: translateX(-100%); opacity: 1; } }
@keyframes pin-ping { from { transform: scale(1); opacity: 0.45; } to { transform: scale(3.2); opacity: 0; } }
@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes hx-floor { from { transform: scale(0.86); opacity: 0.7; } to { transform: scale(1.04); opacity: 1; } }

/* Medium: callouts come in closer; below 900px they become one row of steps under the orb */
@media (max-width: 1199px) {
  .rig { --s: clamp(280px, 30vw + 20px, 380px); }
  .callout { --len: calc(var(--s) * 0.2); }
  .callout__note { display: none; }
}
@media (max-width: 899px) {
  .rig { --s: min(340px, 78vw); display: flex; flex-direction: column; align-items: center; padding-bottom: 28px; min-height: 0; }
  .rig__core { margin-top: 8px; }
  .rig__floor { top: 18%; }
  .callouts { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 4px; }
  .callout, .callout--plan, .callout--approve, .callout--act, .callout--report { position: static; transform: none; flex-direction: row; gap: 8px; }
  .callout__wire, .callout__note, .callout__text::before { display: none; }
  /* No dot markers in the step row: the active step is marked by ink and a short accent underline */
  .callout__pin { display: none; }
  .callout__name { text-decoration: underline 1.5px transparent; text-underline-offset: 7px; transition: color 500ms var(--ease), text-decoration-color 500ms var(--ease); }
  .callout.is-active .callout__name { text-decoration-color: var(--accent); }
  .callout__text, .callout--plan .callout__text, .callout--approve .callout__text { display: flex; gap: 6px; padding: 0; text-align: left; }
  .hero__foot { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
  .marquee { width: auto; margin-inline: calc(var(--gutter) * -1); -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
}
@media (max-width: 767px) {
  .hero { min-height: 0; }
  /* Clear room under the header for the announcement link, even while it rises into place */
  .hero__head { padding-top: 48px; }
}
@media (max-width: 599px) {
  .hero__title { --ls-from: -0.01em; --ls-to: -0.03em; font-size: 36px; line-height: 40px; letter-spacing: -0.03em; }
  .hero__sub { font-size: 16px; line-height: 24px; }
  .hero__actions { gap: 12px 20px; margin-top: 24px; }
  .hero__avail span { display: none; }
  .hero__avail b { display: block; }
  .rig { --s: min(300px, 80vw); }
  .callouts { gap: 8px 16px; }
  .hero__foot { padding-block: 24px 8px; }
  .marquee { --mq-gap: 44px; --dur: 40s; }
  .marquee .partner { height: 22px; }
}
/* Reduced motion: the partners sit still in one centred row that wraps */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; margin-inline: 0; }
  .marquee__track { width: auto; justify-content: center; }
  .marquee__set { flex-wrap: wrap; justify-content: center; height: auto; row-gap: 20px; padding-right: 0; }
  .marquee__lens { display: none; }
}

/* The particle orb (home only): a square box; the canvas is 120% of it so the fluid edge never clips */
.orb { position: relative; flex: none; aspect-ratio: 1 / 1; pointer-events: none; }
.orb__canvas { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; opacity: 0; transition: opacity 900ms ease; }
.orb.is-on .orb__canvas { opacity: 1; }

/* ---------- Partners: caption on the left edge, logos spread across the page ---------- */
.partners__inner { display: flex; align-items: center; gap: 24px 64px; padding-top: 16px; }
.partners__title { flex: none; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-3); }
.partners__row { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; }
.partner {
  display: block; height: 22px;
  background-color: var(--icon-3);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color 150ms;
}
.partners__row li:hover .partner { background-color: var(--text); }
.partner--sisu { --logo: url("/assets/img/partners/sisu-ai.svg"); width: 63px; }
.partner--skylake { --logo: url("/assets/img/partners/skylake.svg"); width: 73px; }
.partner--kalon { --logo: url("/assets/img/partners/kalon.svg"); width: 61px; }
.partner--openai4africa { --logo: url("/assets/img/partners/openai4africa.svg"); width: 71px; }
.partner--vadersoft { --logo: url("/assets/img/partners/vadersoft.svg"); width: 82px; }
@media (max-width: 1023px) {
  .partners__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .partners__row { justify-content: center; }
}
@media (max-width: 599px) { .partners__row { gap: 20px 32px; } }

/* ---------- Products: side by side across the full width ---------- */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.product { max-width: 560px; }
.app-icon { width: 40px; height: 40px; }
.product__name { margin-top: 20px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.product .meta { margin-top: 2px; }
.product__text { margin-top: 12px; color: var(--text-2); }
.checks { display: grid; gap: 8px; margin-top: 20px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; }
.checks .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.product .text-link { margin-top: 24px; }
@media (max-width: 767px) {
  .products { grid-template-columns: minmax(0, 1fr); }
  .product + .product { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
}

/* ---------- Demo: heading and examples on the left, the run on the right ---------- */
.demo { outline: none; }
.demo .chips { margin-top: 24px; }
.composer--demo { max-width: none; }
.composer__goal { color: var(--text-3); white-space: normal; overflow: visible; text-overflow: clip; }
.composer__goal.is-typed { color: var(--text); }
.composer__goal.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 18px; margin-left: 2px; vertical-align: -3px; background: currentColor; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.composer__send:disabled { opacity: 0.35; cursor: default; }
.composer--demo .composer__send:not(:disabled):hover { background: var(--solid-hover); }

.plan { margin-top: 24px; border-bottom: 1px solid var(--line); }
.plan__row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.plan__icon { display: grid; place-items: center; width: 20px; height: 22px; color: var(--icon-3); }
.plan__icon .ico { width: 20px; height: 20px; }
.plan__text { font-size: 15px; line-height: 22px; color: var(--text-2); transition: color 150ms; }
.plan__agent { font-size: 13px; line-height: 22px; color: var(--text-3); white-space: nowrap; }
.plan__flag { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.plan__row.is-running .plan__text, .plan__row.is-waiting .plan__text, .plan__row.is-done .plan__text { color: var(--text); }
.plan__row.is-running .plan__icon, .plan__row.is-done .plan__icon { color: var(--text); }
.plan__row.is-waiting .plan__icon { color: var(--accent); }
.plan__row.is-skipped .plan__text { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-heavy); }
.plan__row.is-running .plan__icon .ico { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.approval { grid-column: 2 / -1; margin-top: 12px; }
.approval__title { font-size: 15px; line-height: 22px; font-weight: 500; }
.approval__detail { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-2); max-width: 520px; }
.approval .actions { margin-top: 12px; }
.demo__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-top: 16px; }
.demo__status { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 22px; color: var(--text); }
.demo__status .ico { margin-top: 1px; color: var(--text); }
.demo__status.is-hint { font-size: 13px; line-height: 18px; color: var(--text-3); }
.demo .text-btn { margin-left: 0; margin-right: -10px; }
@media (max-width: 1023px) { .demo .split__head { margin-bottom: 16px; } }
@media (max-width: 599px) {
  .plan__row { grid-template-columns: 20px minmax(0, 1fr); padding: 12px 0; }
  .plan__agent { grid-column: 2; line-height: 18px; }
}

/* ---------- Columns across the full width (steps, answers, features): hairline on top ---------- */
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.col { padding-top: 20px; border-top: 1px solid var(--line); }
@supports (grid-template-rows: subgrid) {
  .col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .col:not(:has(.col__meta)) { grid-row: span 3; }
}
.col > .ico { color: var(--text); }
.col__meta { margin-top: 16px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.col__title { margin-top: 4px; font-size: 18px; line-height: 26px; font-weight: 600; }
.col > .ico + .col__title { margin-top: 16px; }
.col__text { margin-top: 8px; max-width: 400px; font-size: 15px; line-height: 22px; color: var(--text-2); }
@media (max-width: 1023px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col { margin-bottom: 40px; }
  .col:nth-last-child(-n + 2) { margin-bottom: 0; }
}
@media (max-width: 479px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col, .col:nth-last-child(2) { margin-bottom: 24px; }
  .col:last-child { margin-bottom: 0; }
}

/* ---------- Hairline rows (platforms on home, contact channels) ---------- */
.rows { margin-inline: -12px; }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border-radius: 12px; transition: background-color 150ms; }
.row::before, .row:last-child::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1px; background: var(--line); transition: opacity 150ms; }
.row::before { top: 0; }
.row:last-child::after { bottom: 0; }
.row:hover { background: var(--row-hover); }
.row:hover::before, .row:hover::after, .row:hover + .row::before { opacity: 0; }
.row__icon { color: var(--text); }
.row__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; min-width: 0; flex: 1; }
.row__name { font-size: 16px; line-height: 24px; font-weight: 500; }
.row__meta { font-size: 13px; line-height: 18px; color: var(--text-3); }
.row__action { margin-left: auto; flex: none; }
.row__link { margin-left: auto; font-size: 14px; line-height: 20px; color: var(--text-2); text-align: right; overflow-wrap: anywhere; transition: color 150ms; }
.row__link:hover { color: var(--text); }
@media (max-width: 479px) { .row__main { flex-direction: column; gap: 0; } }

/* ---------- Stats: four across, hairlines in the gaps ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.stat { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-block: 4px; }
.stat + .stat::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--line); }
.stat__value { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 4px; max-width: 260px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.source { margin-top: 24px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.source a { text-decoration: underline; text-decoration-color: var(--line-heavy); text-underline-offset: 3px; transition: color 150ms, text-decoration-color 150ms; }
.source a:hover { color: var(--text); text-decoration-color: var(--accent); }
.answer { margin-top: 72px; }
.answer__title { margin-bottom: 32px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
@media (max-width: 599px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stat + .stat::before { display: none; }
  .stat:nth-child(even)::before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--line); }
  .stat:nth-child(n + 3)::after { content: ""; position: absolute; top: -20px; height: 1px; background: var(--line); }
  .stat:nth-child(3)::after { left: 0; right: calc(var(--gap) / -2); }
  .stat:nth-child(4)::after { left: calc(var(--gap) / -2); right: 0; }
  .answer { margin-top: 56px; }
  .answer__title { margin-bottom: 24px; }
}

/* ---------- Vision quotes ---------- */
.quote { padding-block: 28px; border-top: 1px solid var(--line); }
.quote:first-child { padding-top: 0; border-top: 0; }
.quote:last-child { padding-bottom: 0; }
.quote blockquote p { max-width: 720px; font-size: 20px; line-height: 30px; font-weight: 400; letter-spacing: -0.01em; }
.quote figcaption { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-3); }
@media (max-width: 599px) { .quote { padding-block: 24px; } }

/* ---------- Event row: meta and title, theme, link across the full width ---------- */
.event-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.event-row__main { grid-column: 1 / span 4; }
.event-row__title { margin-top: 4px; font-size: 18px; line-height: 26px; font-weight: 600; }
.event-row__theme { grid-column: 5 / span 6; max-width: 620px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.event-row__link { grid-column: 11 / -1; justify-self: end; flex: none; }
@media (max-width: 1023px) {
  .event-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 24px; }
}

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 16px; line-height: 24px; font-weight: 500;
  border-radius: 8px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico { color: var(--text-2); transition: transform 150ms var(--ease); }
.qa[open] summary .ico { transform: rotate(180deg); }
.qa__a { padding: 0 40px 20px 0; }
.qa__a p { max-width: 680px; font-size: 15px; line-height: 24px; color: var(--text-2); }
.qa__a .inline-link { color: var(--text); }
@media (max-width: 599px) { .qa summary { padding: 16px 0; } }

/* ---------- Final call to action: one statement, centred on the full width ---------- */
.finale { padding-block: 120px; margin-top: 16px; }
.finale__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.finale__icon { width: 48px; height: 48px; }
.finale .h2 { margin-top: 16px; }
.finale p { margin-top: 12px; color: var(--text-2); }
.finale .actions { justify-content: center; margin-top: 24px; }
@media (max-width: 1023px) { .finale { padding-block: 96px; } }
@media (max-width: 767px) { .finale { padding-block: 64px; margin-top: 0; } }

/* ---------- Subpages ---------- */
.pagehead { padding-top: 48px; overflow-x: clip; }
.pagehead__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.pagehead__text { grid-column: 1 / span 6; max-width: 600px; position: relative; z-index: 1; }
.pagehead__art { grid-column: 7 / -1; display: flex; justify-content: center; align-items: center; min-width: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-3); }
.crumbs a { transition: color 150ms; }
.crumbs a:hover { color: var(--text); }
.pagehead__icon { width: 48px; height: 48px; margin-top: 20px; }
.page-title { margin-top: 12px; max-width: 600px; font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.pagehead__icon + .page-title { margin-top: 16px; }
.pagehead__sub { margin-top: 12px; max-width: 560px; color: var(--text-2); }
.pagehead .meta { margin-top: 12px; }
.pagehead .actions { margin-top: 24px; }
.pagehead .actions .text-link { margin-left: 16px; }
@media (max-width: 767px) {
  .pagehead { padding-top: 32px; }
  .pagehead__grid { display: block; }
  .pagehead__art { margin-top: 40px; }
}
@media (max-width: 599px) {
  .page-title { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
}

/* Page visuals (one per subpage; the orb is the home page's alone) */
.field { position: relative; flex: none; width: min(500px, 100%); aspect-ratio: 1 / 1; pointer-events: none; }
.field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; }
.field.is-on .field__canvas { opacity: 1; }
.field--notfound { width: min(320px, 100%); aspect-ratio: 16 / 9; }
.field__badge {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 9999px;
  background: var(--raised); box-shadow: 0 0 0 1px var(--line), 0 6px 24px rgba(0, 0, 0, 0.06); color: var(--text);
}
.field__badge .ico { width: 24px; height: 24px; }
@media (max-width: 1023px) { .field { width: min(360px, 100%); } }
@media (max-width: 767px) { .pagehead__art .field { width: 280px; } }
@media (max-width: 599px) { .pagehead__art .field { width: 260px; } }

/* Download: the app icon, floating, with platform labels */
.appviz { display: flex; flex-direction: column; align-items: center; gap: 28px; width: min(580px, 100%); }
.appviz__stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4; }
.appviz__stage .field { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.appviz__float { position: relative; z-index: 1; }
.appviz__tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--ease); }
.appviz__icon { width: 160px; height: 160px; filter: drop-shadow(0 28px 44px rgba(13, 13, 13, 0.14)) drop-shadow(0 6px 12px rgba(13, 13, 13, 0.07)); }
:root[data-theme="dark"] .appviz__icon { filter: drop-shadow(0 28px 60px rgba(147, 39, 143, 0.35)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appviz__icon { filter: drop-shadow(0 28px 60px rgba(147, 39, 143, 0.35)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6)); } }
@media (prefers-reduced-motion: no-preference) { .appviz__float { animation: float 7s ease-in-out infinite; } }
@keyframes float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(7px); } }
.appviz__labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.appviz__label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9999px; font-size: 13px; line-height: 18px; color: var(--text); }
.appviz__label .ico { width: 16px; height: 16px; }
.appviz__label.is-soon { color: var(--text-3); }
@media (max-width: 1023px) { .appviz__icon { width: 136px; height: 136px; } }
@media (max-width: 767px) { .appviz { width: 100%; gap: 20px; } .appviz__stage { width: 280px; } .appviz__icon { width: 120px; height: 120px; } }

/* Two paragraphs of reading copy */
.copy p { max-width: 620px; color: var(--text-2); }
.copy p + p { margin-top: 16px; }
.copy .text-link { margin-top: 20px; }
.copy .actions { margin-top: 24px; }
.split .copy { padding-top: 4px; }

/* The one promo card per subpage, across the full shell: soft colour from a blurred full-bleed image */
.promo {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: 380px; padding: 56px 24px;
  border: 1px solid var(--card-line); border-radius: 24px; text-align: center;
}
.promo__bg { position: absolute; inset: 0; z-index: -1; filter: blur(40px) saturate(1.5); }
.promo__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.05); filter: blur(40px); }
.promo__bg .promo__img-dark { filter: blur(40px) brightness(0.55) contrast(1.1) saturate(0.75); }
.promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card-wash); }
.promo__body { display: flex; flex-direction: column; align-items: center; }
.promo__icon { width: 44px; height: 44px; }
.promo__title { margin-top: 8px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.promo__text { margin-top: 8px; max-width: 520px; font-size: 14px; line-height: 24px; color: var(--text-2); }
.promo .btn { margin-top: 24px; }
.promo__link { margin-top: 20px; font-size: 15px; }
@media (max-width: 599px) {
  .promo { min-height: 360px; padding: 40px 20px; }
  .promo__title { font-size: 18px; line-height: 24px; }
  .promo__text { font-size: 13px; line-height: 20px; }
}

/* Download: platform rows */
.platforms { border-bottom: 1px solid var(--line); }
.platform { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 80px; padding-block: 16px; border-top: 1px solid var(--line); }
.platform > .ico { width: 24px; height: 24px; color: var(--text); }
.platform__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
.platform__meta { font-size: 13px; line-height: 18px; color: var(--text-3); }
.device-tag { visibility: hidden; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--accent-line); border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--accent); }
.platform.is-detected .device-tag { visibility: visible; }
@media (max-width: 599px) {
  .platform { grid-template-columns: 24px minmax(0, 1fr); row-gap: 12px; }
  .platform__action { grid-column: 2; justify-self: start; }
}

/* Events */
.event { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.event__main { grid-column: 1 / span 6; }
.event__title { margin-top: 8px; }
.event__theme { margin-top: 12px; color: var(--text-2); max-width: 520px; }
.event__poster { grid-column: 8 / -1; justify-self: end; width: min(100%, 420px); }
.event__poster img { width: 100%; border-radius: 16px; }
@media (max-width: 767px) {
  .event { display: block; }
  .event__poster { width: 280px; margin-top: 24px; }
}

/* Legal: a short sticky title block on the left, prose on the right */
.legal { padding-block: 48px 112px; }
.legal .split__head { grid-column: 1 / span 4; }
.legal .split__body { grid-column: 5 / span 7; }
.prose { font-size: 16px; line-height: 26px; }
.prose p { max-width: 720px; }
.prose p + p { margin-top: 16px; }
.prose h2 { margin: 40px 0 12px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.prose ul { display: grid; gap: 8px; margin: 20px 0; }
.prose li { position: relative; max-width: 720px; padding-left: 20px; }
.prose li::before { content: "\2013"; position: absolute; left: 0; color: var(--text-3); }
.prose a { text-decoration: underline; text-decoration-color: var(--line-heavy); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.legal .split__body { padding-top: 38px; }
@media (max-width: 1023px) { .legal .split__body { padding-top: 0; } }
@media (max-width: 767px) { .legal { padding-block: 32px 72px; } }

/* 404: a single short statement, centred */
.notfound { display: grid; place-items: center; min-height: calc(100svh - 44px - 280px); padding-block: 72px 96px; text-align: center; }
.notfound .field { margin: 0 auto 24px; }
.notfound .page-title { margin-inline: auto; }
.notfound p { margin-top: 12px; color: var(--text-2); }
.notfound .actions { justify-content: center; margin-top: 24px; }

/* Subpages end with breathing room before the footer; text-only heads sit close to their content */
.page--sub > .section:last-child { margin-bottom: 112px; }
.pagehead:not(.pagehead--art) + .section { margin-top: 72px; }
@media (max-width: 767px) {
  .page--sub > .section:last-child { margin-bottom: 72px; }
  .pagehead:not(.pagehead--art) + .section { margin-top: 48px; }
}

/* ---------- Footer ---------- */
.colophon { padding-block: 64px 48px; border-top: 1px solid var(--line); }
.colophon__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.colophon__brand { grid-column: 1 / span 4; }
.colophon__line { margin-top: 12px; max-width: 400px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.colophon__nav { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); }
.colophon__h { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-3); }
.colophon__col ul { display: grid; gap: 8px; margin-top: 12px; }
.colophon__col a { font-size: 14px; line-height: 20px; color: var(--text-2); transition: color 150ms; }
.colophon__col a:hover { color: var(--text); }
.colophon__col a[aria-current="page"] { color: var(--text); }
.colophon__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.social { display: flex; gap: 4px; margin-right: -6px; }
@media (max-width: 1023px) {
  .colophon__top { display: block; }
  .colophon__nav { margin-top: 40px; }
}
@media (max-width: 599px) {
  .colophon { padding-block: 56px 40px; }
  .colophon__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .colophon__base { margin-top: 40px; }
}

/* ---------- Motion: fade and 8px rise, once, only when allowed ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .plan__row.is-running .plan__icon .ico { animation: none; }
}