/* =========================================================================
   Ilyxen — Aurora Glass for the web
   -------------------------------------------------------------------------
   The app's design language, ported. Three rules govern everything here:

     1. The aurora is the color. It lives behind the interface as slow
        drifting light, never as a gradient wallpaper competing with text.
     2. Only controls are glass. Content sits on the quieter material.
     3. What stays flat, stays flat. One alpha, no gradient borders.

   Palette values are transcribed from docs/DESIGN.md, which was extracted
   from the Ilyxen Colours canvas. Do not invent colors here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* The aurora arc — cyan, violet, magenta. Gold is the star, and nothing else. */
  --cyan: 94 220 255;
  --violet: 159 142 255;
  --magenta: 255 155 214;
  --warm: 255 247 236;
  --a-cyan: 0.5;
  --a-violet: 0.5;
  --a-magenta: 0.42;
  --a-warm: 0.5;
  --gold: #c48a22;

  /* Surfaces */
  --page: #e7e9f2;
  --page-deep: #dfe2ee;
  --page-rgb: 231 233 242;

  /* Ink */
  --ink: #10132b;
  --ink-2: #444865;
  --ink-3: #5a5f80;
  --ink-rgb: 16 19 43;

  /* Accent */
  --accent: #0a6a85;
  --accent-hover: #0e86a8;

  /* Lines */
  --line: rgb(16 19 43 / 0.1);
  --line-strong: rgb(16 19 43 / 0.18);

  /* Materials */
  --glass-fill: rgb(255 255 255 / 0.5);
  --glass-fill-hover: rgb(255 255 255 / 0.66);
  --glass-ring: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.98),
    rgb(255 255 255 / 0.14) 42%,
    rgb(255 255 255 / 0) 70%,
    rgb(20 25 60 / 0.12)
  );
  --glass-sheen: radial-gradient(
    140% 90% at 50% -30%,
    rgb(255 255 255 / 0.55),
    rgb(255 255 255 / 0) 58%
  );
  --glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -6px 12px -8px rgb(255 255 255 / 0.35),
    inset 0 -1px 0 rgb(0 0 0 / 0.08),
    0 8px 24px rgb(30 35 80 / 0.14),
    0 1px 2px rgb(30 35 80 / 0.06);
  --panel-fill: rgb(255 255 255 / 0.44);
  --panel-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    0 1px 2px rgb(30 35 80 / 0.05);

  /* Solid brand colors, for marks and fills that must not shift with theme */
  --cyan-solid: #5fd8f0;
  --violet-solid: #8f7cff;
  --magenta-solid: #ff6fc2;

  /* The eight kinds. One hue per kind, one slice each of the same arc. */
  --k-tasks: #2ed3b7;
  --k-lists: #3d9bff;
  --k-notes: #ffd24d;
  --k-people: #ff6fb1;
  --k-habits: #9b7bff;
  --k-spending: #8fd14f;
  --k-alarms: #ff6a4d;
  --k-events: #6470ff;

  /* Geometry, from the app: bar 32, card 22, disc 16, token 9. */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  --gutter: clamp(20px, 5vw, 40px);
  --wide: 1140px;
  --measure: 66ch;
  --header-h: 64px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-display: clamp(2.6rem, 1.45rem + 5vw, 5rem);
  --t-h2: clamp(2rem, 1.42rem + 2.6vw, 3.25rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1.03rem + 0.42vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.75rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Night. Same hues, inverted world: an indigo sky instead of a near-white day. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cyan: 31 200 230;
    --violet: 109 76 255;
    --magenta: 255 63 164;
    --a-cyan: 0.42;
    --a-violet: 0.38;
    --a-magenta: 0.3;
    --a-warm: 0;
    --gold: #e0ae4c;

    --page: #0b0a1c;
    --page-deep: #080714;
    --page-rgb: 11 10 28;

    --ink: #eef0ff;
    --ink-2: #aeb4d6;
    --ink-3: #8b91b5;
    --ink-rgb: 238 240 255;

    --accent: #38e1f5;
    --accent-hover: #7ceafb;

    --line: rgb(238 240 255 / 0.12);
    --line-strong: rgb(238 240 255 / 0.22);

    --glass-fill: rgb(255 255 255 / 0.1);
    --glass-fill-hover: rgb(255 255 255 / 0.16);
    --glass-ring: linear-gradient(
      180deg,
      rgb(255 255 255 / 0.6),
      rgb(255 255 255 / 0.1) 42%,
      rgb(255 255 255 / 0) 70%,
      rgb(0 0 0 / 0.28)
    );
    --glass-sheen: radial-gradient(
      140% 90% at 50% -30%,
      rgb(255 255 255 / 0.26),
      rgb(255 255 255 / 0) 58%
    );
    --glass-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.28),
      inset 0 -6px 12px -8px rgb(255 255 255 / 0.14),
      inset 0 -1px 0 rgb(0 0 0 / 0.3),
      0 10px 30px rgb(0 0 0 / 0.45),
      0 1px 2px rgb(0 0 0 / 0.3);
    --panel-fill: rgb(255 255 255 / 0.055);
    --panel-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      0 1px 2px rgb(0 0 0 / 0.25);
  }
}

/* The same night, chosen explicitly. Duplicated rather than shared so the
   toggle wins in both directions — a media query cannot be overridden by an
   attribute selector that only exists inside it. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cyan: 31 200 230;
  --violet: 109 76 255;
  --magenta: 255 63 164;
  --a-cyan: 0.42;
  --a-violet: 0.38;
  --a-magenta: 0.3;
  --a-warm: 0;
  --gold: #e0ae4c;

  --page: #0b0a1c;
  --page-deep: #080714;
  --page-rgb: 11 10 28;

  --ink: #eef0ff;
  --ink-2: #aeb4d6;
  --ink-3: #8b91b5;
  --ink-rgb: 238 240 255;

  --accent: #38e1f5;
  --accent-hover: #7ceafb;

  --line: rgb(238 240 255 / 0.12);
  --line-strong: rgb(238 240 255 / 0.22);

  --glass-fill: rgb(255 255 255 / 0.1);
  --glass-fill-hover: rgb(255 255 255 / 0.16);
  --glass-ring: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.6),
    rgb(255 255 255 / 0.1) 42%,
    rgb(255 255 255 / 0) 70%,
    rgb(0 0 0 / 0.28)
  );
  --glass-sheen: radial-gradient(
    140% 90% at 50% -30%,
    rgb(255 255 255 / 0.26),
    rgb(255 255 255 / 0) 58%
  );
  --glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 -6px 12px -8px rgb(255 255 255 / 0.14),
    inset 0 -1px 0 rgb(0 0 0 / 0.3),
    0 10px 30px rgb(0 0 0 / 0.45),
    0 1px 2px rgb(0 0 0 / 0.3);
  --panel-fill: rgb(255 255 255 / 0.055);
  --panel-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 1px 2px rgb(0 0 0 / 0.25);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  min-height: 100%;
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  /* The sticky header must never sit on top of the thing you jumped to. */
  scroll-padding-top: calc(var(--header-h) + 24px + env(safe-area-inset-top));
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* `clip`, not `hidden`: hidden makes body a scroll container, which iOS
     Safari will still pan sideways when a decorative layer bleeds past the
     edge. `clip` refuses to scroll at all.

     `hidden` is kept ahead of it purely as a fallback for engines that drop
     `clip` (Safari < 16, Firefox < 102). It is deliberately on body alone: the
     `clip` on <html> is dropped in those same engines, which leaves the root
     `visible`, and a non-visible overflow on body then propagates to the
     viewport instead of turning body into a scroll container — so the sticky
     header is unaffected. Modern engines parse both and the later `clip`
     wins, so nothing about the shipped behaviour changes. Measured: the
     ornaments bleed up to ~196px past the right edge at 1280. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Nothing on this page can be scrolled to horizontally — see DESIGN.md §11 —
   so a word that does not fit is a word that is gone. An email address, a long
   compound, a URL: let them break rather than disappear. `break-word` only
   acts when the word genuinely will not fit, so normal text is untouched. */
h1,
h2,
h3,
h4,
p,
li,
dt,
dd,
a,
figcaption {
  overflow-wrap: break-word;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgb(var(--violet) / 0.32);
  color: var(--ink);
}

/* Focus is a box-shadow, not an outline: it follows the border radius and is
   never clipped by an ancestor's overflow. */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--page),
    0 0 0 4px var(--accent);
  border-radius: var(--r-sm);
}

.glass:focus-visible,
.btn:focus-visible {
  border-radius: var(--r-pill);
}

/* -------------------------------------------------------------------------
   3. The aurora
   ---------------------------------------------------------------------- */

/* Radial gradients rather than blurred rectangles: the softness is free, and
   a large `filter: blur()` pinned behind every scroll is not. */
.aurora {
  position: fixed;
  inset: 0;
  /* Paint past Safari's safe-area edges so its translucent controls can show
     the same atmosphere as the document. Important content remains inset. */
  inset: calc(0px - env(safe-area-inset-top))
    calc(0px - env(safe-area-inset-right))
    calc(0px - env(safe-area-inset-bottom))
    calc(0px - env(safe-area-inset-left));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Layout/paint/style only. `size` containment would zero the intrinsic box
     and is not wanted on a layer that is sized by its insets. */
  contain: layout paint style;
}

/* No `will-change` here: a transform animation already promotes the layer, and
   four viewport-sized layers pinned as "will change" is real memory on a phone
   for no extra smoothness. */
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.aurora .b-cyan {
  width: 78vmax;
  height: 78vmax;
  left: -20vmax;
  top: -30vmax;
  background: radial-gradient(
    circle,
    rgb(var(--cyan) / var(--a-cyan)) 0%,
    rgb(var(--cyan) / 0) 68%
  );
  animation: drift-a 34s var(--ease) infinite alternate;
}

.aurora .b-violet {
  width: 72vmax;
  height: 72vmax;
  right: -26vmax;
  top: 4vmax;
  background: radial-gradient(
    circle,
    rgb(var(--violet) / var(--a-violet)) 0%,
    rgb(var(--violet) / 0) 68%
  );
  animation: drift-b 41s var(--ease) infinite alternate;
}

.aurora .b-magenta {
  width: 84vmax;
  height: 84vmax;
  left: 12vmax;
  bottom: -46vmax;
  background: radial-gradient(
    circle,
    rgb(var(--magenta) / var(--a-magenta)) 0%,
    rgb(var(--magenta) / 0) 68%
  );
  animation: drift-c 47s var(--ease) infinite alternate;
}

.aurora .b-warm {
  width: 60vmax;
  height: 60vmax;
  left: 6vmax;
  top: -16vmax;
  mix-blend-mode: screen;
  opacity: var(--a-warm);
  background: radial-gradient(
    circle,
    rgb(var(--warm) / 0.95) 0%,
    rgb(var(--warm) / 0) 70%
  );
  animation: drift-a 38s var(--ease) infinite alternate-reverse;
}

@keyframes drift-a {
  to {
    transform: translate3d(6%, 4%, 0) scale(1.1);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-7%, 6%, 0) scale(1.08);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(5%, -5%, 0) scale(1.12);
  }
}

/* -------------------------------------------------------------------------
   4. Materials
   ---------------------------------------------------------------------- */

/* Liquid Glass — the control layer. Header, buttons, chips. Nothing else. */
.glass {
  position: relative;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    backdrop-filter: blur(22px) saturate(1.7);
  }
}

/* The ring: bright along the top edge, dark along the bottom. A masked 1px
   inset rather than a solid border, so it reads as a lit edge, not a stroke. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--glass-ring);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* The specular sheen, fading from the top. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-sheen);
}

/* Standard material — the content layer. A quieter fill, no ring, no sheen. */
.panel {
  position: relative;
  background: var(--panel-fill);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--panel-shadow);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .panel {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

/* -------------------------------------------------------------------------
   5. Layout
   ---------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

main {
  position: relative;
  z-index: 1;
}

section {
  position: relative;
  padding-block: clamp(44px, 5vw, 72px);
  scroll-margin-top: calc(var(--header-h) + 24px + env(safe-area-inset-top));
}

section + section {
  padding-block-start: 0;
}

.section-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: clamp(56px, 8vw, 104px);
}

.stack > * + * {
  margin-block-start: 1.1em;
}

/* One paragraph following another outside a .stack. */
.mt {
  margin-block-start: 1.1em;
}

/* -------------------------------------------------------------------------
   6. Type
   ---------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-h) + 24px + env(safe-area-inset-top));
}

.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.042em;
}

h2,
.t-h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.036em;
}

h3,
.t-h3 {
  font-size: var(--t-h3);
  line-height: 1.28;
  letter-spacing: -0.022em;
}

p {
  text-wrap: pretty;
  max-width: var(--measure);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.012em;
  max-width: 58ch;
}

/* A `statement` section is a heading and one paragraph with nothing between
   them; the reset zeroes every margin, so the pair has to be spaced here.
   Matches the gap `.section-head` gives the same pairing. */
h2 + .lead,
h2 + p {
  margin-block-start: 18px;
}

.small {
  font-size: var(--t-small);
}

.muted {
  color: var(--ink-2);
}

.faint {
  color: var(--ink-3);
}

.mono {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 18px;
}

/* The star from the mark, used as the rhythm mark of the whole site. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--gold);
  clip-path: polygon(
    50% 0%,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0% 50%,
    39% 39%
  );
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: rgb(var(--ink-rgb) / 0.3);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
   7. Controls
   ---------------------------------------------------------------------- */

.btn {
  --btn-fill: var(--glass-fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-fill);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    background-color 0.18s var(--ease),
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.btn:hover {
  text-decoration: none;
}

@media (hover: hover) {
  .btn:hover {
    --btn-fill: var(--glass-fill-hover);
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

/* The one filled control on the page — the same role the mic plays in the app:
   a tinted fill inside a glass field, never a second sheet of glass. */
.btn--primary {
  background: linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
  color: #0b0a1c;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 4px 14px rgb(143 124 255 / 0.4);
}

.btn--primary::before,
.btn--primary::after {
  display: none;
}

@media (hover: hover) {
  .btn--primary:hover {
    background: linear-gradient(145deg, #74dff4, #a08fff);
  }
}

.btn--quiet {
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}

.btn--quiet::before,
.btn--quiet::after {
  display: none;
}

@media (hover: hover) {
  .btn--quiet:hover {
    background: rgb(var(--ink-rgb) / 0.05);
    color: var(--ink);
  }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block-start: 32px;
}

/* A link that reads as a next step. The arrow moves, the text does not. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-weight: 550;
  font-size: var(--t-small);
}

.arrow-link svg {
  transition: transform 0.18s var(--ease);
}

@media (hover: hover) {
  .arrow-link:hover svg {
    transform: translateX(3px);
  }
}

.arrow-link:hover {
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   8. Header
   ---------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--page);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block-start: max(10px, env(safe-area-inset-top));
}

/* The capsule sits inside the gutter, not flush to the viewport edge. */
.header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  border-radius: var(--r-pill);
  padding-inline: 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  min-width: 0;
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 13px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.008em;
  transition:
    color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}

@media (hover: hover) {
  .nav a:hover {
    color: var(--ink);
    background: rgb(var(--ink-rgb) / 0.05);
    text-decoration: none;
  }
}

.nav a[aria-current="page"] {
  color: var(--ink);
  background: rgb(var(--ink-rgb) / 0.07);
}

/* `.nav a:hover` and `.nav a[aria-current="page"]` are both (0,2,1), so the
   current-page rule won on source order and the pill you are standing on was
   the one link in the header that gave no hover feedback at all. */
@media (hover: hover) {
  .nav a[aria-current="page"]:hover {
    background: rgb(var(--ink-rgb) / 0.12);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}

@media (hover: hover) {
  .icon-btn:hover {
    color: var(--ink);
    background: rgb(var(--ink-rgb) / 0.06);
  }
}

.theme-toggle .moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .moon,
.theme-toggle[data-resolved="dark"] .moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .sun,
.theme-toggle[data-resolved="dark"] .sun {
  display: none;
}

/* `data-resolved` is set by site.js, which is deferred — so for a visitor whose
   OS is dark and who has never touched the toggle, the palette was already
   night from first paint (the tokens have their own media-query fallback) while
   the button still showed the sun. The icon caught up a moment later. The
   palette's fallback needs a matching one here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .moon {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle .sun {
    display: none;
  }
}

.nav-toggle {
  display: none;
}

/* Mobile: the nav becomes a sheet. */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* The nav leaves the bar, so the actions have to claim the free space
     themselves or they sit stranded against the wordmark. */
  .header-actions {
    margin-inline-start: auto;
  }

  .nav {
    /* Safari can treat a fixed descendant of a backdrop-filter/isolation
       shell as belonging to that shell's containing block. Anchor the sheet
       to the header itself instead: the sticky header keeps it attached while
       scrolling, and the panel remains in the header's stacking context. */
    position: absolute;
    inset: calc(100% + 12px) 0 auto;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r-lg);
    /* Opaque, not glass — and this is not a style preference.

       The sheet is a child of .header-bar.glass, which sets
       `isolation: isolate`. That establishes a backdrop root, so this
       element's backdrop-filter samples the isolated group it sits in rather
       than the page behind it: the blur does nothing at all here. What was
       left was --glass-fill alone, which is 50% white by day and **10% white
       by night**, laid straight over scrolling page content. On a phone the
       menu read as transparent and the links were barely legible.

       Building the fill from --page-rgb keeps it in the palette and makes it
       work in both themes without depending on a filter that cannot run. The
       blur stays below as a no-op that costs nothing and would help if this
       ever stops being nested inside an isolated ancestor. */
    background: rgb(var(--page-rgb));
    border: 1px solid var(--line-strong);
    box-shadow: var(--glass-shadow);
    /* Nine rows at 46px plus padding needs about 440px of height. A phone in
       landscape has ~390. Without a ceiling the sheet simply ran off the bottom
       of the screen and the last items — Company, Answers, Contact and the
       waitlist link — were unreachable, with nothing to scroll because the
       sheet is fixed. dvh, not vh, so the mobile URL bar collapsing does not
       leave it cut off. */
    max-height: calc(100dvh - var(--header-h) - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    backdrop-filter: blur(22px) saturate(1.7);
    transform-origin: top right;
    transition:
      opacity 0.18s var(--ease),
      transform 0.18s var(--ease);
  }

  .nav[hidden] {
    display: none;
  }

  .nav a {
    min-height: 46px;
    padding-inline: 16px;
    font-size: 1rem;
  }

  .header-actions .cta-desktop {
    display: none;
  }
}

@media (min-width: 901px) {
  .nav[hidden] {
    display: flex;
  }
}

/* -------------------------------------------------------------------------
   9. Hero
   ---------------------------------------------------------------------- */

.hero {
  padding-block: clamp(64px, 9vw, 112px) clamp(44px, 6vw, 76px);
}

.hero .lead {
  margin-block-start: 26px;
}

.hero-figure {
  margin-block-start: clamp(48px, 7vw, 88px);
}

/* -------------------------------------------------------------------------
   10. Blocks
   ---------------------------------------------------------------------- */

.section-head {
  margin-block-end: clamp(28px, 4vw, 48px);
}

.section-head .lead,
.section-head p {
  margin-block-start: 18px;
}

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.card {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  background: var(--panel-fill);
  border: 1px solid var(--line);
  box-shadow: var(--panel-shadow);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.card h3 {
  margin-block-end: 10px;
}

.card p {
  color: var(--ink-2);
  font-size: var(--t-small);
  max-width: none;
}

.card__meta {
  display: block;
  margin-block-start: 14px;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* A numbered sequence. The number is the ornament; the text carries it. */
.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0;
}

.steps li {
  counter-increment: step;
  display: grid;
  /* minmax(0, …), not 1fr: a bare `1fr` floors at the content's min-content
     width, so one long word in the step text makes the whole row wider than
     its container. At 200% text zoom on a 320px screen that pushed every step
     21px past the edge, where the page's `overflow-x: clip` cut it off
     silently rather than scrolling to it. */
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 4px 20px;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-block-start: 1px solid var(--line);
}

.steps li:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  padding-block-start: 0.28em;
}

.steps h3 {
  font-size: var(--t-h3);
}

.steps p {
  color: var(--ink-2);
  margin-block-start: 8px;
}

/* Two things set against each other. */
.compare {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.compare__side {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

.compare__side--against {
  background: rgb(var(--ink-rgb) / 0.03);
}

.compare__side--for {
  background: var(--panel-fill);
  border-color: var(--line-strong);
  box-shadow: var(--panel-shadow);
}

.compare__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 14px;
}

.compare ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.compare li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.5;
}

.compare li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-block-start: 0.3em;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}

.compare__side--for li::before {
  border: 0;
  background: var(--gold);
  clip-path: polygon(
    50% 0%,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0% 50%,
    39% 39%
  );
}

/* An index of arguments. Each row is one whole link, so there is no dead
   area between the name of a thing and the description of it. */
.rows {
  list-style: none;
  padding: 0;
  display: grid;
}

.rows li + li {
  border-block-start: 1px solid var(--line);
}

.rows a {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 2fr) auto;
  gap: 6px 28px;
  align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 4px;
  color: inherit;
  border-radius: var(--r-sm);
}

.rows a:hover {
  text-decoration: none;
}

.rows .row-title {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
  transition: color 0.16s var(--ease);
}

.rows .row-body {
  color: var(--ink-2);
  font-size: var(--t-small);
  min-width: 0;
}

.rows .row-go {
  flex: none;
  color: var(--ink-3);
  transition:
    transform 0.18s var(--ease),
    color 0.16s var(--ease);
}

@media (hover: hover) {
  .rows a:hover .row-title {
    color: var(--accent);
  }
  .rows a:hover .row-go {
    color: var(--accent);
    transform: translateX(3px);
  }
}

@media (max-width: 720px) {
  .rows a {
    /* minmax(0, …) for the same reason as .steps: a bare 1fr cannot shrink
       below its longest word, so a long question title widened the whole row
       past the screen at large text sizes. */
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rows .row-body {
    grid-column: 1 / -1;
  }
}

/* The one place on a page that asks the reader for something. */
.cta-panel {
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-lg);
}

/* One sentence, given silence. */
.quote {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.032em;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
}

.quote::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  background: var(--gold);
  clip-path: polygon(
    50% 0%,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0% 50%,
    39% 39%
  );
}

/* The eight kinds. The only place a kind hue is allowed to appear. */
.kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 152px), 1fr));
  gap: 10px;
}

.kind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--kind) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--kind) 28%, transparent);
}

.kind__disc {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--kind);
  box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.14);
}

.kind__name {
  font-size: var(--t-small);
  font-weight: 550;
  letter-spacing: -0.01em;
}

.kind__count {
  margin-inline-start: auto;
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* A card that belongs to one kind: the hue arrives as the disc and a tinted
   edge, never as a filled panel. Naming the kinds twice on one page — once as
   chips, once as cards — was the duplication this replaces. */
.card--kind {
  border-color: color-mix(in srgb, var(--kind) 32%, transparent);
}

/* Outside .kind's flex context the disc is an inline span, and width/height
   would be ignored — it has to be blockified to appear at all. */
.card--kind .kind__disc {
  display: block;
  margin-block-end: 16px;
}

/* -------------------------------------------------------------------------
   11. The device
   ---------------------------------------------------------------------- */

.device {
  --w: 300px;
  /* Never wider than the column it sits in. At 300px flat it filled a 320px
     phone edge to edge, losing the gutter every other element keeps, and at
     large text sizes it ran off the screen entirely — where the page clips
     rather than scrolls, so the edge of the phone was simply cut away.
     aspect-ratio keeps the proportions as it narrows. */
  width: min(var(--w), 100%);
  aspect-ratio: 360 / 720;
  border-radius: 44px;
  padding: 10px;
  background: var(--page-deep);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 40px 80px rgb(10 12 30 / 0.28),
    0 8px 24px rgb(10 12 30 / 0.16);
  position: relative;
  overflow: hidden;
  flex: none;
}

.device__screen {
  position: relative;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background: var(--page);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.device__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.device__aurora span {
  position: absolute;
  border-radius: 50%;
}

.device__aurora .d1 {
  width: 150%;
  aspect-ratio: 1;
  left: -50%;
  top: -30%;
  background: radial-gradient(
    circle,
    rgb(var(--cyan) / var(--a-cyan)) 0%,
    rgb(var(--cyan) / 0) 68%
  );
}

.device__aurora .d2 {
  width: 150%;
  aspect-ratio: 1;
  right: -60%;
  top: 18%;
  background: radial-gradient(
    circle,
    rgb(var(--violet) / var(--a-violet)) 0%,
    rgb(var(--violet) / 0) 68%
  );
}

.device__aurora .d3 {
  width: 170%;
  aspect-ratio: 1;
  left: -30%;
  bottom: -60%;
  background: radial-gradient(
    circle,
    rgb(var(--magenta) / var(--a-magenta)) 0%,
    rgb(var(--magenta) / 0) 68%
  );
}

.device__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px 0;
  overflow: hidden;
}

.device__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 4px;
  margin-block-end: 4px;
}

.device__mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.device__wordmark {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.device__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 13px;
  background: var(--panel-fill);
  border: 1px solid var(--line);
  font-size: 0.66rem;
  line-height: 1.35;
}

.device__row .d-disc {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--kind, var(--cyan-solid));
}

.device__row .d-text {
  min-width: 0;
  color: var(--ink);
  font-weight: 500;
}

.device__row .d-sub {
  color: var(--ink-3);
  font-weight: 400;
}

.device__said {
  align-self: flex-end;
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: rgb(var(--ink-rgb) / 0.07);
  font-size: 0.66rem;
  color: var(--ink-2);
}

.device__bar {
  margin: auto 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border-radius: 26px;
  font-size: 0.66rem;
  color: var(--ink-3);
}

.device__mic {
  flex: none;
  width: 38px;
  height: 38px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 4px 14px rgb(143 124 255 / 0.45);
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.55),
      0 4px 14px rgb(143 124 255 / 0.45),
      0 0 0 0 rgb(143 124 255 / 0.5);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.55),
      0 4px 14px rgb(143 124 255 / 0.45),
      0 0 0 12px rgb(143 124 255 / 0);
  }
}

/* -------------------------------------------------------------------------
   12. Waitlist
   ---------------------------------------------------------------------- */

.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-block-start: 28px;
  max-width: 520px;
}

.waitlist__field {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding-inline: 18px;
}

.waitlist input[type="email"] {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: transparent;
  /* 16px minimum: anything smaller and iOS zooms the page on focus. */
  font-size: 16px;
  letter-spacing: -0.01em;
}

.waitlist input::placeholder {
  color: var(--ink-3);
}

.waitlist input:focus {
  outline: none;
}

/* The global :focus-visible ring is a box-shadow, and cancelling `outline`
   above did nothing to it — so the input drew its own 12px-radius ring inside
   the pill's ring and the field showed two mismatched indicators at once. The
   pill is the control the eye sees; let it carry the focus alone. */
.waitlist input:focus-visible {
  box-shadow: none;
}

.waitlist__field:focus-within {
  box-shadow:
    var(--glass-shadow),
    0 0 0 2px var(--accent);
}

.form-status {
  flex-basis: 100%;
  font-size: var(--t-small);
  color: var(--ink-2);
  min-height: 1.4em;
}

.form-status[data-state="error"] {
  color: var(--ink);
}

.form-status:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  vertical-align: 0.05em;
  background: var(--gold);
}

.form-note {
  margin-block-start: 14px;
  font-size: var(--t-micro);
  color: var(--ink-3);
  max-width: 46ch;
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   13. Footer
   ---------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(72px, 10vw, 140px);
  border-block-start: 1px solid var(--line);
  padding-block: clamp(40px, 6vw, 72px)
    max(28px, env(safe-area-inset-bottom));
}

.footer-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  /* Phone first, because the desktop template cannot shrink: minmax floors of
     220px and 140px plus a gap make 388px the narrowest it can ever be, which
     is wider than a 320px phone's content box. The page clips horizontal
     overflow, so the columns that did not fit were not scrolled to — they were
     simply gone. auto-fit alone always fits, because one 140px track is
     narrower than the box at any width the site supports. */
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

/* At extreme text zoom, a navigation label's intrinsic width must not widen
   its grid track beyond the page. Let the track keep its available width and
   let the link wrap at its normal word boundaries (or within the address). */
.footer-grid > *,
.footer-grid li {
  min-width: 0;
}

.footer-grid a {
  overflow-wrap: anywhere;
}

/* The brand block carries a paragraph; it wants the full row, not a 140px
   sliver, until the wide template takes over. */
.footer-brand {
  grid-column: 1 / -1;
}

/* 860px is where 220 + three 140s + three gaps first fits, so it is where the
   original single-row footer becomes possible rather than merely intended. */
@media (min-width: 860px) {
  .footer-grid {
    grid-template-columns: minmax(220px, 1.4fr) repeat(
        auto-fit,
        minmax(140px, 1fr)
      );
  }

  .footer-brand {
    grid-column: auto;
  }
}

.footer-grid h2 {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 14px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-grid a {
  color: var(--ink-2);
  font-size: var(--t-small);
}

.footer-grid a:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand--footer {
  padding-inline: 0;
}

.footer-brand p {
  margin-block-start: 14px;
  font-size: var(--t-small);
  color: var(--ink-3);
  max-width: 34ch;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: baseline;
  margin-block-start: clamp(36px, 5vw, 56px);
  padding-block-start: 22px;
  border-block-start: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/* -------------------------------------------------------------------------
   14. Reveal
   ---------------------------------------------------------------------- */

/* Only applied once JS confirms IntersectionObserver — a no-JS visitor gets
   the finished page, not a page of invisible sections.

   site.js strips both classes as soon as the entrance completes. An element
   that keeps a `transition` on opacity stays a promoted layer and a backdrop
   root, and the frosted panels inside it stop sampling the aurora — so the
   animation must leave no trace of itself behind. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}

/* -------------------------------------------------------------------------
   15. Utilities
   ---------------------------------------------------------------------- */

.center {
  text-align: center;
}

.center p,
.center .lead {
  margin-inline: auto;
}

.flow-lg > * + * {
  margin-block-start: clamp(28px, 3.5vw, 44px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.split--device {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 860px) {
  .split--device {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Only the phone is centred. `justify-items: center` on the grid would also
     switch the text column from filling its track to sizing to its own
     content, which at large text sizes made it wider than the track and hung
     it off both edges. */
  .split--device > .device {
    justify-self: center;
  }
}

/* -------------------------------------------------------------------------
   15b. Without JavaScript
   ---------------------------------------------------------------------- */

/* These rules used to live in a `<noscript><style>` block in every hand-written
   page's head. That block was blocked in production and nowhere else: the CSP is
   `style-src 'self'` with no `unsafe-inline` and no hash, so the browser dropped
   it — and the failure was invisible to every test, because with JavaScript
   ENABLED a <noscript> body is never parsed, so the style element never exists
   and never violates anything. It failed only for the exact visitor it was
   written for. The 31 generated answer pages never carried the block at all,
   while still shipping both controls.

   So the rules live here, in the external stylesheet the CSP already allows, and
   every page gets them.

   `.has-js` is set by the inline theme guard in <head>, which runs before first
   paint, so nothing flashes. It is deliberately NOT the `.js` class: that one is
   added by site.js once it loads, and gates the reveal animation's starting
   opacity. Keying these rules on `.js` would mean a failed or slow site.js
   leaves the page permanently blank rather than merely unanimated. */

html:not(.has-js) .theme-toggle,
html:not(.has-js) .nav-toggle {
  display: none !important;
}

@media (max-width: 900px) {
  /* The nav sheet is opened and closed by script. With no script it would sit
     permanently open over the content, so it becomes a plain wrapped row. */
  html:not(.has-js) .header-bar {
    height: auto;
    flex-wrap: wrap;
    padding-block: 8px;
  }

  html:not(.has-js) .nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    padding: 4px 0 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    width: 100%;
    margin-inline-start: 0;
  }

  html:not(.has-js) .nav a {
    min-height: 40px;
    font-size: 0.9375rem;
  }
}

/* -------------------------------------------------------------------------
   16. Reduced motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Theme switching must not animate: every transitioning element would
   otherwise shimmer to the new palette at its own duration. */
html[data-switching] *,
html[data-switching] *::before,
html[data-switching] *::after {
  transition: none !important;
}

/* -------------------------------------------------------------------------
   16b. Forced colors
   ---------------------------------------------------------------------- */

/* Windows High Contrast and friends replace the palette with the user's own
   and, crucially, do not paint `box-shadow` at all. The focus ring above is a
   box-shadow, so in this mode there was no focus indicator anywhere on the
   site — a keyboard user could not see where they were. Give it a real
   outline in the system's own highlight colour. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }

  /* Every decorative layer is aria-hidden and exists to tint the page. The
     user has asked for a specific palette; honour it rather than painting
     gradients behind their text. */
  .aurora,
  .cosmos,
  .ornament,
  .starfield {
    display: none;
  }

  /* A gradient still paints in this mode and would sit under forced button
     text at a contrast nobody chose. Let the system colours through. */
  .btn,
  .btn--primary {
    background-image: none;
    border: 1px solid ButtonText;
  }
}

/* -------------------------------------------------------------------------
   17. Print
   ---------------------------------------------------------------------- */

@media print {
  /* Paper is always the day palette. Forcing only `body { color: #000 }` left
     every element that draws its colour from a token — leads, ledes, headings,
     footer type — holding whatever the screen theme had set. Printed from dark
     mode that put pale text on white paper at around 1.1:1, which is to say
     invisible.

     There are THREE selectors to answer, not two, and missing the third is the
     easy mistake: the palette is set by `:root[data-theme="dark"]` (0,2,0) for
     an explicit toggle, by `:root[data-theme="light"]` (0,2,0), and by
     `:root:not([data-theme="light"])` (0,2,0 — `:not()` takes its argument's
     specificity) inside the prefers-color-scheme media query. A bare `:root`
     here is only (0,1,0), so for the commonest case of all — OS in dark, toggle
     never touched, no attribute on the element — the print reset LOST and the
     night ink printed on white paper. Specificity is resolved before source
     order, so being later in the file does not help.

     Only the ink, page and line tokens are restated. Everything else derives
     from them, and the brand hues read the same on paper either way. */
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --page: #fff;
    --page-deep: #fff;
    --page-rgb: 255 255 255;
    --ink: #10132b;
    --ink-2: #444865;
    --ink-3: #5a5f80;
    --ink-rgb: 16 19 43;
    --accent: #0a6a85;
    --accent-hover: #0e86a8;
    --line: rgb(16 19 43 / 0.28);
    --line-strong: rgb(16 19 43 / 0.4);
    --glass-fill: transparent;
    --glass-fill-hover: transparent;
    --glass-shadow: none;
    color-scheme: light;
  }

  .aurora,
  .cosmos,
  .ornament,
  .starfield,
  .site-header,
  .btn,
  .waitlist {
    display: none !important;
  }

  /* Frosted panels have nothing to sample on paper; a hairline reads better
     than a grey slab that costs ink and hides the text on a cheap printer. */
  .glass {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid var(--line);
  }

  body {
    background: #fff;
    color: var(--ink);
  }
}

/* -------------------------------------------------------------------------
   18. The cosmos
   -------------------------------------------------------------------------
   The site's own sky, built only from shapes the brand already owns: the
   eight-point star, the constellation from icon direction D, and the orb from
   direction C. Everything here is decorative and `aria-hidden`; nothing in
   this section may ever carry meaning a screen reader would need.

   Two hard rules, both learned the hard way:
     - Ornaments are SIBLINGS of content, never ancestors of it. An animated
       ancestor with opacity becomes a backdrop root and kills the frosted
       glass inside it (see the .reveal note in site.js).
     - Transform and opacity only. Nothing here may trigger layout.
   ---------------------------------------------------------------------- */

.cosmos {
  position: fixed;
  inset: 0;
  inset: calc(0px - env(safe-area-inset-top))
    calc(0px - env(safe-area-inset-right))
    calc(0px - env(safe-area-inset-bottom))
    calc(0px - env(safe-area-inset-left));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

/* The stars come out at night. By day the sky is simply too bright for them —
   which is literal, correct, and gives the theme toggle something to reveal. */
.stars {
  position: absolute;
  inset: -8%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

:root[data-theme="dark"] .stars {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stars {
    opacity: 1;
  }
}

.stars__layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  will-change: transform;
}

.stars__layer--far {
  --star-ink: rgb(238 240 255 / 0.78);
  background-image:
    radial-gradient(1.08px 1.08px at 32.7% 15.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 8.1% 53.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 6.7% 50.7%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 43.5% 7.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 42.6% 82.0%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 22.9% 62.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 57.6% 39.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 5.6% 85.1%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 15.1% 12.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 81.0% 18.7%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 63.6% 37.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 7.2% 6.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 67.7% 42.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 58.4% 45.4%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 78.8% 69.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 57.3% 52.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 72.5% 29.2%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 12.6% 42.0%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 15.9% 48.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 66.5% 75.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 86.8% 31.7%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 59.2% 57.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 83.3% 93.6%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 66.1% 6.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 64.4% 98.3%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 28.9% 38.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 3.2% 46.2%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 12.5% 6.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 13.7% 25.3%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.08px 1.08px at 86.4% 8.9%, var(--star-ink) 50%, transparent 51%);
  background-size: 900px 900px;
}

.stars__layer--mid {
  --star-ink: rgb(var(--violet) / .95);
  background-image:
    radial-gradient(2.34px 2.34px at 54.8% 87.6%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 85.7% 28.3%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 36.2% 87.7%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 15.8% 18.3%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 23.9% 48.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 26.7% 1.4%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 37.2% 56.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 68.7% 51.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 67.3% 6.3%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 77.4% 86.7%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 39.5% 40.1%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 63.2% 7.1%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 21.5% 16.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 6.2% 1.0%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 10.9% 36.6%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 86.7% 61.2%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 25.7% 35.0%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 13.0% 84.2%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 46.7% 48.4%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(1.62px 1.62px at 11.0% 34.6%, var(--star-ink) 50%, transparent 51%);
  background-size: 1150px 1150px;
}

/* The nearest layer picks up the aurora's cyan rather than staying white, so
   depth reads as colour temperature and not only as size. */
.stars__layer--near {
  --star-ink: rgb(var(--cyan) / 0.85);
  background-image:
    radial-gradient(2.34px 2.34px at 82.2% 16.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 94.2% 52.8%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 54.2% 3.7%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(3.24px 3.24px at 96.9% 85.6%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 26.6% 36.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(3.24px 3.24px at 76.6% 53.2%, rgb(var(--magenta) / .95) 50%, transparent 51%),
    radial-gradient(3.24px 3.24px at 33.3% 22.9%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(3.24px 3.24px at 97.5% 84.6%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 81.2% 73.5%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 51.7% 35.8%, rgb(var(--magenta) / .95) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 3.7% 28.4%, var(--star-ink) 50%, transparent 51%),
    radial-gradient(2.34px 2.34px at 68.9% 94.7%, var(--star-ink) 50%, transparent 51%);
  background-size: 1400px 1400px;
}

/* ---- Ornaments ---------------------------------------------------------

   One per section at most. Absolutely positioned inside the section, painted
   behind its text, bleeding off the edge it enters from. */

.ornament {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* How far a shape hangs off the edge it entered from. A circle reads fine as
   an arc when most of it is gone; a constellation just looks broken, so it
   overrides this to stay almost fully on screen. */
.ornament--left {
  left: calc(var(--bleed, clamp(40px, 8vw, 180px)) * -1);
}

.ornament--right {
  right: calc(var(--bleed, clamp(40px, 8vw, 180px)) * -1);
}

.ornament--top {
  top: 4%;
}

.ornament--mid {
  top: 50%;
  margin-block-start: calc(var(--size, 240px) / -2);
}

.ornament--bottom {
  bottom: 6%;
}

/* ---- The orb: icon direction C, the mic as a glass planet --------------- */

.orb {
  --size: clamp(140px, 22vw, 340px);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.6),
      rgb(255 255 255 / 0) 46%),
    linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.34),
    inset -18px -26px 60px rgb(11 10 28 / 0.34),
    0 40px 90px rgb(30 35 80 / 0.22);
  --o: 0.55;
  opacity: var(--o);
}

:root[data-theme="dark"] .orb {
  --o: 0.68;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .orb {
    --o: 0.68;
  }
}

/* ---- The orbit: a ring seen almost edge-on, with one point going round --- */

.ring {
  --size: clamp(180px, 30vw, 460px);
  width: var(--size);
  aspect-ratio: 1;
  transform: perspective(900px) rotateX(74deg) rotateZ(-12deg);
  transform-style: preserve-3d;
}

.ring__path {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.ring__orbit {
  position: absolute;
  inset: 0;
  animation: orbit 24s linear infinite;
}

.ring__sat {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-inline-start: -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px 2px rgb(var(--violet) / 0.7);
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

/* ---- The comet: one point and the light it drags behind it -------------- */

.comet {
  --size: clamp(120px, 18vw, 260px);
  width: var(--size);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgb(var(--violet) / 0) 0%,
    rgb(var(--violet) / 0.55) 62%,
    rgb(var(--violet) / 0.95) 100%
  );
  animation: comet 9s var(--ease) infinite;
  opacity: 0;
}

.comet::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px 3px rgb(var(--magenta) / 0.6);
}

@keyframes comet {
  0% {
    transform: translate3d(-40%, 30%, 0) rotate(-18deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  46% {
    opacity: 1;
  }
  70%,
  100% {
    transform: translate3d(60%, -34%, 0) rotate(-18deg);
    opacity: 0;
  }
}

/* ---- The constellation: icon direction D, at the size of a section ------ */

.constellation {
  --bleed: clamp(0px, 1.5vw, 28px);
  --size: clamp(200px, 30vw, 440px);
  width: var(--size);
  aspect-ratio: 1;
  color: var(--ink);
  /* Ink on a near-white ground needs less alpha than ink on a night sky to
     read at the same weight, but 0.16 was below the threshold entirely. */
  --o: 0.26;
  opacity: var(--o);
}

:root[data-theme="dark"] .constellation {
  --o: 0.3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .constellation {
    --o: 0.3;
  }
}

.constellation svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The links draw themselves once the shape scrolls into view, then the nodes
   arrive one after another. Set by site.js adding .is-lit. */
.constellation line {
  stroke-dasharray: var(--len, 260);
  stroke-dashoffset: var(--len, 260);
}

.constellation .node,
.constellation .star {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
}

.constellation.is-lit line {
  animation: draw 0.9s var(--ease) forwards;
}

.constellation.is-lit .node,
.constellation.is-lit .star {
  animation: pop 0.5s var(--ease) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pop {
  60% {
    transform: scale(1.18);
  }
  to {
    transform: scale(1);
  }
}

/* The brightest node keeps twinkling after it arrives. */
.constellation.is-lit .star {
  animation:
    pop 0.5s var(--ease) forwards,
    twinkle 4.5s var(--ease) 1.2s infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* ---- Ornament entrance -------------------------------------------------
   Ornaments are leaves with no glass inside them, so animating their own
   opacity is safe here in a way it is not on a section. */

.js .ornament {
  opacity: 0;
}

.js .ornament.is-in {
  opacity: var(--o, 1);
  transition: opacity 1.1s var(--ease);
}

/* Set by site.js when the entrance has finished. See the note there. */
.js .ornament.is-settled {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .ornament {
    opacity: var(--o, 1);
  }

  .comet,
  .ring__orbit {
    animation: none;
  }

  .comet {
    opacity: 0.6;
  }

  .constellation line {
    stroke-dashoffset: 0;
  }

  .constellation .node,
  .constellation .star {
    transform: none;
  }
}

/* On a phone there is no column of space beside the text, so the large shapes
   go and the sky carries the effect on its own. The comet stays: it is a thin
   line sitting high in its section and it never crosses a word. */
@media (max-width: 700px) {
  .ornament--hide-sm.orb,
  .ornament--hide-sm.ring,
  .ornament--hide-sm.constellation {
    display: none;
  }

  .ornament--hide-sm.comet {
    opacity: 0.65;
  }
}

/* -------------------------------------------------------------------------
   19. The mic orb
   -------------------------------------------------------------------------
   Icon direction C: the app's hero control as a glass planet. The orb keeps
   the cyan-to-violet fill the mic has at rest in the app; the personalized
   body is dark with the gold X-star so it reads at any size against that fill.

   The breathing is a box-shadow ring, not a transform — the parallax loop
   owns `transform` on every ornament, and an inline style would win over a
   CSS animation. The halo is on ::before, which the loop never touches, so
   that one can scale freely.
   ---------------------------------------------------------------------- */

.orb--mic {
  --o: 0.92;
  --bleed: calc(var(--size) * .25);
  color: #111;
  background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / .55), transparent 48%), linear-gradient(135deg, #5fd8f0, #8f7cff);
  animation: orb-breathe 2.8s ease-in-out infinite;
}

[data-theme="dark"] .orb--mic {
  background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / .55), transparent 48%), linear-gradient(135deg, #38e1f5, #8f7cff);
}

:root[data-theme="dark"] .orb--mic {
  --o: 0.96;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .orb--mic {
    --o: 0.96;
  }
}

/* The light the mic throws. Transparent across the orb itself, so it reads as
   a glow around the edge rather than a wash over the face. */
.orb--mic::before {
  content: "";
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgb(var(--violet) / 0) 56%,
    rgb(var(--violet) / 0.5) 64%,
    rgb(var(--magenta) / 0.28) 74%,
    rgb(var(--magenta) / 0) 88%
  );
  animation: orb-halo 2.8s ease-in-out infinite;
}

.orb__mic {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  height: 72%;
  display: block;
  filter: none;
}

@keyframes orb-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.34),
      inset -18px -26px 60px rgb(11 10 28 / 0.34),
      0 40px 90px rgb(30 35 80 / 0.22),
      0 0 0 0 rgb(var(--violet) / 0.45);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.34),
      inset -18px -26px 60px rgb(11 10 28 / 0.34),
      0 40px 90px rgb(30 35 80 / 0.22),
      0 0 0 34px rgb(var(--violet) / 0);
  }
}

@keyframes orb-halo {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb--mic,
  .orb--mic::before {
    animation: none;
  }

  .orb--mic::before {
    opacity: 0.8;
  }
}

/* -------------------------------------------------------------------------
   20. The mark, by theme
   -------------------------------------------------------------------------
   The mark is a tile, so it needs the opposite tile to the page behind it: the
   dark (night) tile on the day site, the light (day) tile on the night site.
   Using one tile for both leaves it dissolving into the page it sits on.
   ---------------------------------------------------------------------- */

.brand-mark,
.device__mark {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
}

.brand-mark img,
.device__mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.mark-day {
  display: none;
}

:root[data-theme="dark"] .mark-night {
  display: none;
}

:root[data-theme="dark"] .mark-day {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark-night {
    display: none;
  }

  :root:not([data-theme="light"]) .mark-day {
    display: block;
  }
}

/* -------------------------------------------------------------------------
   21. The reference library
   -------------------------------------------------------------------------
   Every page answers one question. The answer sits first, large, and complete
   on its own — that paragraph is what a search result excerpts and what an
   assistant quotes, so it is treated as the most important object on the page
   rather than as an introduction to the real content.
   ---------------------------------------------------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  /* A flex row does not wrap by default, so a long cluster name ran off the
     edge at large text sizes and the page clipped it away. */
  flex-wrap: wrap;
  gap: 9px;
  margin-block-end: 18px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.crumbs a {
  color: var(--ink-3);
}

.crumbs a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* A question is longer than a headline, so it sets smaller than the display
   size the marketing pages use, or it wraps to five lines on a laptop. */
.answer-q {
  font-size: clamp(1.9rem, 1.25rem + 2.9vw, 3.1rem);
  letter-spacing: -0.034em;
  line-height: 1.08;
  max-width: 20ch;
}

.answer-lede {
  position: relative;
  margin-block-start: 26px;
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--panel-fill);
  border: 1px solid var(--line);
  box-shadow: var(--panel-shadow);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.012em;
  max-width: 62ch;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .answer-lede {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.answer-lede::before {
  content: "";
  position: absolute;
  inset-block: clamp(20px, 2.6vw, 28px);
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan-solid), var(--violet-solid));
}

.bullets {
  list-style: none;
  padding: 0;
  margin-block-start: 16px;
  display: grid;
  gap: 11px;
  max-width: var(--measure);
}

.bullets li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}

.bullets li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-block-start: 0.42em;
  background: var(--gold);
  clip-path: polygon(
    50% 0%,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0% 50%,
    39% 39%
  );
}

/* The body of an answer: h2 sections with prose under each. */
.answer-body > * + * {
  margin-block-start: clamp(34px, 4.5vw, 56px);
}

.answer-body h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  letter-spacing: -0.026em;
  margin-block-end: 16px;
  max-width: 30ch;
}

.answer-body p + p {
  margin-block-start: 1.05em;
}

.answer-body p {
  color: var(--ink-2);
}

/* The hub: one block per cluster. */
.cluster + .cluster {
  margin-block-start: clamp(44px, 6vw, 76px);
}

.cluster > h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  letter-spacing: -0.026em;
}

.cluster > p {
  margin-block: 12px 20px;
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* -------------------------------------------------------------------------
   22. The starfield
   -------------------------------------------------------------------------
   A real depth field behind the home hero: points streaming toward the camera,
   twinkling on their own phase, barrel-rolling slowly, pushed aside by the
   cursor. Hand-written WebGL2 — no library, same origin, so the site's
   `default-src 'none'` CSP and its no-third-party claim both survive.

   It lives ONLY behind the hero and fades out as the hero leaves, because
   DESIGN.md rule 1 says decoration sits behind the interface and never
   competes with text. Under reduced motion, or without WebGL2, it never
   initialises and the CSS aurora carries the page exactly as before.
   ---------------------------------------------------------------------- */

.starfield {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  /* Fades in once the first frame has been drawn, so there is never a flash
     of an empty black canvas over the aurora. */
  transition: opacity 1.2s var(--ease);
}

.starfield.is-live {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .starfield {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   23. States that were missing
   -------------------------------------------------------------------------
   Found by audit: the one moment the primary control is guaranteed not to work
   — mid-request — it looked and behaved exactly like a live button, and the
   status line rendered success and in-progress identically.
   ---------------------------------------------------------------------- */

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (hover: hover) {
  .btn:disabled:hover,
  .btn[aria-disabled="true"]:hover {
    transform: none;
    background: var(--btn-fill);
  }

  .btn--primary:disabled:hover {
    background: linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
  }
}

/* Success has to be readable at a glance, not only by reading the sentence.
   The dot carries it: gold while something is in flight, accent once it has
   resolved, and the text steps up to full ink so it stops looking provisional. */
.form-status[data-state="ok"] {
  color: var(--ink);
  font-weight: 550;
}

.form-status[data-state="ok"]::before {
  background: var(--accent);
  clip-path: none;
  border-radius: 50%;
}

.form-status[data-state="error"] {
  color: var(--ink);
}

/* The default dot is gold, which is the in-flight colour. A failed submit was
   therefore indistinguishable at a glance from one still sending — the reader
   had to read the sentence to find out nothing had happened. Three states, three
   dots: gold sending, accent sent, magenta failed. */
.form-status[data-state="error"]::before {
  background: var(--magenta-solid, rgb(var(--magenta)));
}

/* -------------------------------------------------------------------------
   24. Mobile CTA, and press feedback
   -------------------------------------------------------------------------
   Found by audit: hiding .cta-desktop below 900px removed the site's only
   primary call to action from the header and put nothing in its place, so on a
   phone the waitlist was reachable only by scrolling to a page CTA. The link
   now lives inside the nav sheet, where a phone user is already looking.
   ---------------------------------------------------------------------- */

/* Written `.nav a.nav__cta`, not `.nav__cta`, and that is the whole point of
   this rule. `.nav a` above sets `display: inline-flex` at specificity (0,1,1);
   a bare `.nav__cta` is (0,1,0) and loses to it no matter where it sits in the
   file. The mobile CTA was therefore visible at every width, so the header
   carried "Join the waitlist" twice on desktop — once as this link and once as
   the primary button beside it — on all 39 pages. */
.nav a.nav__cta {
  display: none;
}

@media (max-width: 900px) {
  .nav a.nav__cta {
    display: inline-flex;
    margin-block-start: 6px;
    justify-content: center;
    font-weight: 600;
    background: linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
    color: #0b0a1c;
  }

  .nav a.nav__cta[aria-current="page"] {
    background: linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
    color: #0b0a1c;
  }
}

/* Every icon-only control had a hover state and no press state, so on a touch
   screen — where hover does not exist — a tap produced no feedback at all until
   whatever it triggered finished. */
.icon-btn:active {
  transform: scale(0.92);
  background: rgb(var(--ink-rgb) / 0.1);
}

.icon-btn {
  transition:
    color 0.16s var(--ease),
    background-color 0.16s var(--ease),
    transform 0.12s var(--ease);
}

.nav a:active,
.rows a:active {
  opacity: 0.7;
}

/* Company story — Aurora Glass, September 2026.
   Illustrations are native vectors; copy stays on the established page ground. */
.app-cta { white-space: nowrap; }
.company-hero { padding-block: clamp(60px, 8vw, 108px) 0; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 12px; }
.hero-copy { position: relative; z-index: 2; }
.company-hero .display { font-size: clamp(3rem, 5.4vw, 4.8rem); line-height: 1.04; letter-spacing: -.055em; max-width: 12ch; }
.horizon-word { color: var(--accent); }
.company-hero .lead { max-width: 42ch; margin-block-start: 28px; }
.hero-footnote { margin-block-start: 25px; color: var(--ink-3); font-size: .8rem; }
.story-journey { scroll-margin-top: 100px; }
.landscape-art, .space-art { overflow: visible; }
.world-orbits { transform-origin: center; }
.hero-visual { position: relative; min-width: 0; }
.world-art { display: block; width: 116%; max-width: none; margin-left: -8%; }
.world-note { position: absolute; font: .64rem var(--mono); letter-spacing: .14em; color: var(--ink-3); }
.world-note--top { top: 2%; right: 3%; }
.world-note--bottom { bottom: 5%; left: 5%; }
.journey-index { margin-block-start: 72px; border-top: 1px solid var(--line-strong); display: flex; align-items: center; gap: 30px; padding-block: 22px; font: .7rem var(--mono); letter-spacing: .05em; }
.journey-index > span { margin-right: auto; color: var(--ink-3); }
.journey-index a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); }
.story-scene { padding-block: clamp(58px, 8vw, 120px); position: relative; scroll-margin-top: 110px; }
.story-scene + .story-scene { border-top: 1px solid var(--line); }
.story-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(35px, 7vw, 110px); }
.story-split--reverse .story-copy { order: 2; }
.story-split--reverse .story-visual { order: 1; }
.story-copy h2 { font-size: clamp(2.5rem, 4.2vw, 3.8rem); line-height: 1.08; letter-spacing: -.045em; }
.story-copy > p:not(.eyebrow) { margin-block: 23px; }
.scene-note { color: var(--ink-3); font-size: .875rem; border-left: 2px solid var(--line-strong); padding-left: 16px; }
.story-visual { margin: 0; min-width: 0; }
.story-visual svg { display: block; width: 100%; height: auto; }
.story-visual figcaption, .art-caption { margin-top: 22px; text-align: center; font: .64rem var(--mono); letter-spacing: .15em; color: var(--ink-3); }
.assistant-art { padding: 18px 0; position: relative; }
.assistant-phone { width: min(310px, 100%); margin: auto; padding: 20px 24px 24px; border-radius: 42px; background: var(--page); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgb(var(--ink-rgb) / .1), inset 0 0 0 6px var(--panel-fill); transform: rotate(4deg); }
.phone-island { width: 82px; height: 20px; border-radius: 20px; background: var(--ink); margin: 0 auto; }
.phone-time { font: .68rem var(--mono); margin-block: -16px 48px; }
.assistant-phone .eyebrow { font-size: .6rem; }
.phone-title { font-size: 1.8rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.18; margin-block: 12px 25px; }
.routine { display: flex; align-items: center; gap: 12px; background: var(--panel-fill); border-radius: 16px; padding: 14px 11px; margin-block: 10px; }
.routine > span { font: .66rem var(--mono); color: var(--accent); }
.routine strong { display: block; font-size: .8rem; font-weight: 600; }
.routine small { display: block; color: var(--ink-3); font-size: .62rem; margin-top: 4px; }
.phone-mic { display: flex; align-items: center; justify-content: center; margin: 30px auto 0; width: 60px; height: 60px; border-radius: 24px; color: #10132b; background: linear-gradient(135deg, var(--cyan-solid), var(--violet-solid)); }
.story-visual .phone-mic svg { width: 27px; }
.relay-scene .section-head { max-width: 760px; }
.relay-demo { border: 1px solid var(--line-strong); background: var(--panel-fill); border-radius: 22px; padding: clamp(20px, 4vw, 48px); }
.relay-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.relay-top .eyebrow { margin: 0; }
.relay-label { color: var(--ink-3); font: .7rem var(--mono); }
.relay-network { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20px, .65fr) minmax(0, 1fr) minmax(20px, .65fr) minmax(0, 1fr); align-items: start; margin: 45px auto 32px; max-width: 760px; }
.relay-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; min-width: 0; }
.relay-person strong { font-size: 1rem; }
.relay-person small { color: var(--ink-3); font-size: .72rem; }
.relay-avatar { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: var(--page); border: 1px solid var(--line-strong); color: var(--accent); font-size: 1.5rem; transition: box-shadow .3s, opacity .3s; }
.relay-hop { height: 2px; margin-top: 35px; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 11px); position: relative; }
.relay-hop::after { content: ''; position: absolute; width: 100%; height: 9px; background: radial-gradient(circle at 4.5px 4.5px, var(--accent) 4px, transparent 4.5px); top: -4px; left: -4.5px; opacity: 0; }
.relay-demo[data-stage="first"] .relay-hop:first-of-type::after,
.relay-demo[data-stage="second"] .relay-hop:last-of-type::after { opacity: 1; animation: relay-travel .8s linear both; }
.relay-demo[data-stage="first"] .relay-middle .relay-avatar,
.relay-demo[data-stage="second"] .relay-middle .relay-avatar,
.relay-demo[data-stage="delivered"] .relay-recipient .relay-avatar { box-shadow: 0 0 0 7px rgb(var(--cyan) / .15); border-color: var(--accent); }
.relay-demo[data-connected="false"] .relay-middle .relay-avatar { opacity: .4; }
.relay-demo[data-connected="false"] .relay-hop { opacity: .2; }
.relay-message { text-align: center; margin: 0 auto 24px; color: var(--ink); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.relay-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.relay-status { text-align: center; margin: 24px auto 10px; min-height: 3.3em; color: var(--ink-2); }
.relay-demo .form-note { max-width: 80ch; margin-inline: auto; text-align: center; }
html:not(.has-js) .relay-controls { display: none; }
.product-card { display: flex; flex-direction: column; align-items: start; gap: 14px; padding: clamp(25px, 4vw, 44px); }
.product-card h3 { font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.2; }
.product-card p { margin: 0; }
.product-number { font: .7rem var(--mono); letter-spacing: .12em; color: var(--ink-3); margin-bottom: 16px; }
.status-pill { display: inline-flex; font: .68rem var(--mono); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 10px; }
.product-card .arrow-link { margin-top: auto; padding-top: 22px; }
.investor-invitation { padding-block: clamp(52px, 6vw, 88px); border-top: 1px solid var(--line-strong); }
.investor-invitation h2 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); line-height: 1.05; max-width: 19ch; }
.investor-invitation .lead { margin-top: 28px; max-width: 54ch; }
.company-facts { margin-top: 40px; }
.company-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; border-top: 1px solid var(--line); padding-block: 22px; }
.company-facts dt { color: var(--ink-3); }
.company-facts dd { margin: 0; }
.company-facts a { display: inline-flex; align-items: center; min-height: 44px; }
@keyframes relay-travel { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: no-preference) {
  [data-enter] { transition: transform .8s var(--ease); }
  .story-ready [data-enter="left"]:not(.entered) { transform: translateX(-48px); }
  .story-ready [data-enter="right"]:not(.entered) { transform: translateX(48px); }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .nav a { padding-inline: 8px; font-size: .82rem; }
  .header-bar { gap: 5px; }
  .app-cta { padding-inline: 15px; font-size: .82rem; }
}
@media (max-width: 700px) {
  .hero-layout, .story-split { grid-template-columns: minmax(0, 1fr); }
  .company-hero { padding-top: 55px; }
  .company-hero .display { max-width: 14ch; font-size: clamp(2.65rem, 9.6vw, 4.5rem); }
  .home-main > .company-hero .hero-copy .hero-eyebrow-line { display: block; }
  /* Keep the company's visual language in the first phone view. The globe
     leads the copy on narrow screens, while the copy remains in normal flow
     for readable text, natural scroll and JS-off support. */
  .hero-visual { order: -1; width: min(390px, 88vw); margin: -28px auto -8px; }
  .world-art { width: 100%; margin-left: 0; }
  .world-note { font-size: .55rem; }
  .journey-index { margin-top: 25px; gap: 20px; flex-wrap: wrap; }
  .journey-index > span { width: 100%; }
  .story-split--reverse .story-copy, .story-split--reverse .story-visual { order: initial; }
  .story-visual { width: min(500px, 100%); margin-inline: auto; }
  .story-copy h2 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .story-split { gap: 45px; }
  .assistant-phone { transform: none; }
  .relay-network { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); }
  .relay-avatar { width: 52px; height: 52px; font-size: 1.2rem; }
  .relay-hop { margin-top: 26px; }
  .relay-person small { font-size: .62rem; }
  .relay-demo { padding-inline: 16px; }
  .company-facts > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .site-header > .wrap { padding-inline: 10px; }
  .header-bar { gap: 3px; }
  .header-bar .brand { padding-inline: 7px; gap: 5px; font-size: 1rem; }
  .header-actions { gap: 2px; }
  .header-actions .app-cta { font-size: .68rem; padding-inline: 10px; min-height: 44px; }
  .header-actions .icon-btn { width: 36px; min-width: 36px; }
  .header-bar .brand-mark { display: none; }
  .world-note--bottom { bottom: 1%; }
  .hero-visual { width: min(350px, 86vw); margin-top: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-enter], .assistant-phone { transform: none !important; transition: none !important; }
  .relay-hop::after { animation: none !important; }
}
@media (forced-colors: active) {
  .hero-visual, .story-visual { display: none; }
  .relay-avatar, .relay-demo, .status-pill { border: 1px solid CanvasText; }
  .relay-hop { background: CanvasText; }
}
@media print {
  .hero-visual, .story-visual, .journey-index, .relay-controls { display: none; }
  .hero-layout, .story-split { display: block; }
  [data-enter] { transform: none !important; }
  .story-scene, .investor-invitation { padding-block: 24px; }
  .relay-demo { break-inside: avoid; }
}

/* Earth / Space: two keyboard stops, two explicit destinations. The underlying
   light/dark preference keys remain compatible with previously saved choices. */
.appearance-toggle { display: inline-flex; align-items: center; flex: none; position: relative; min-height: 44px; padding: 4px; gap: 2px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(var(--page-rgb) / .5); color: var(--ink-3); cursor: pointer; }
.appearance-choice { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 9px; min-height: 34px; position: relative; z-index: 1; border-radius: 999px; transition: color .2s, background-color .2s; font: 500 .7rem var(--font); }
.appearance-earth { background: var(--page); color: var(--accent); box-shadow: 0 1px 5px rgb(var(--ink-rgb) / .08); }
.appearance-earth[data-resolved="dark"] { background: transparent; color: var(--ink-3); box-shadow: none; }
.appearance-space[data-resolved="dark"] { background: var(--page); color: var(--accent); box-shadow: 0 1px 5px rgb(var(--ink-rgb) / .08); }
@media (min-width: 901px) { .nav a { padding-inline: 9px; font-size: .85rem; } .header-bar { gap: 6px; } }
@media (max-width: 1100px) {
  .appearance-choice > span { display: none; }
  .appearance-choice { padding: 7px 5px; }
  .appearance-toggle { padding: 2px; gap: 0; }
}
@media (max-width: 360px) {
  .header-actions .app-cta { padding-inline: 8px; font-size: .65rem; }
  .header-bar .brand { padding-inline: 4px; }
  .header-actions .icon-btn { width: 32px; min-width: 32px; }
}
@media (prefers-reduced-motion: reduce) { .appearance-choice { transition: none; } }
@media (forced-colors: active) {
  .appearance-toggle { border-color: ButtonText; }
  .appearance-earth { outline: 1px solid Highlight; }
  .appearance-earth[data-resolved="dark"] { outline: none; }
  .appearance-space[data-resolved="dark"] { outline: 1px solid Highlight; }
}

.appearance-choice { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; min-width: 28px; }
.appearance-choice[aria-pressed="true"] { background: var(--page); color: var(--accent); box-shadow: 0 1px 5px rgb(var(--ink-rgb) / .08); }
html:not(.has-js) .appearance-toggle { display: none; }
.appearance-mobile { display: none; position: relative; }
.appearance-mobile-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 58px; min-height: 36px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(var(--page-rgb) / .5); color: var(--ink-2); cursor: pointer; font-size: .72rem; font-weight: 550; }
.appearance-mobile-icon { display: inline-flex; width: 15px; height: 15px; }
.appearance-mobile-icon svg { width: 15px; height: 15px; }
.appearance-mobile-menu { position: absolute; z-index: 70; top: calc(100% + 8px); right: 0; display: grid; gap: 2px; min-width: 168px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgb(var(--page-rgb) / .98); box-shadow: var(--glass-shadow); }
.appearance-mobile-menu[hidden] { display: none; }
.appearance-mobile-menu .appearance-choice { width: 100%; min-height: 42px; justify-content: flex-start; padding: 7px 10px; color: var(--ink-2); }
.appearance-mobile-menu .appearance-choice > span { display: inline; }
.appearance-mobile-menu .appearance-choice[aria-pressed="true"] { color: var(--accent); }
html:not(.has-js) .appearance-mobile { display: none; }

@media (max-width: 480px) { .header-bar .brand { font-size: 0; } .header-bar .brand-mark { display: block; } }

/* Human direction and delegated technical work: readable without motion. */
.operating-map { margin: 52px 0 0; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line-strong); border-radius: 22px; background: var(--panel-fill); }
.founder-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: min(470px, 100%); margin-inline: auto; padding: 28px 16px; background: var(--page); border: 1px solid var(--line-strong); border-radius: 22px; }
.founder-node svg { color: var(--accent); }
.founder-node strong { font-size: 1.15rem; }
.founder-node > span { font-size: .8rem; color: var(--ink-2); }
.delegation-flow { display: flex; justify-content: center; gap: 32px; padding: 30px 0; color: var(--ink-3); font: .66rem var(--mono); text-align: center; }
.delegation-flow span:first-child::before { content: '↓ '; color: var(--accent); }
.delegation-flow span:last-child::before { content: '↑ '; color: var(--accent); }
.agent-roles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; border-top: 1px solid var(--line-strong); padding-top: 24px; }
.agent-role { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; position: relative; padding: 20px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.agent-role::before { content: ''; position: absolute; top: -25px; height: 24px; width: 1px; background: var(--line-strong); }
.agent-symbol { font-size: 1.5rem; color: var(--accent); }
.agent-role strong { font-size: .85rem; overflow-wrap: anywhere; }
.agent-role > span:last-child { font-size: .7rem; color: var(--ink-3); }
.operating-map figcaption { font-size: .8rem; color: var(--ink-3); text-align: center; margin-top: 28px; }
@media (max-width: 700px) { .agent-roles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; } .delegation-flow { gap: 16px; font-size: .6rem; } }
.operating-map { position: relative; overflow: clip; }
.operating-neural { position: absolute; inset: 40px 0 auto; width: 100%; height: 75%; color: var(--accent); pointer-events: none; }
.founder-node, .delegation-flow, .agent-roles, .operating-map figcaption { position: relative; }
.agent-roles { border-top: 0; }
.agent-role::before { display: none; }
@media (max-width: 700px) { .operating-neural { height: 60%; opacity: .6; } }
@media (forced-colors: active), print { .operating-neural { display: none; } }
@media (max-width: 900px) {
  .has-js .header-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); height: auto; min-height: var(--header-h); padding-block: 6px; }
  .header-actions { min-width: 0; justify-content: flex-end; }
  .header-actions .app-cta { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
  .header-actions .nav-toggle { flex: none; }
}

/* Ambient artwork keeps its original target-specific motion, independently of
   scrolling. story.js only pauses it while the containing visual is offscreen. */
.scene-depth { position: relative; }
.hero-visual::before, .story-visual::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgb(var(--cyan) / .27), rgb(var(--violet) / .2) 40%, rgb(var(--magenta) / .13) 60%, transparent 73%); pointer-events: none; }
.story-visual { position: relative; }
.living-core { position: absolute; width: 148px; height: 148px; left: 5%; bottom: 15%; z-index: 2; }
.mic-heart { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #eef0ff; background: linear-gradient(135deg, #5fd8f0, #8f7cff 67%, #ff6fc2); box-shadow: inset 0 2px 2px rgb(255 255 255 / .85), inset -12px -18px 24px rgb(11 10 28 / .25), 0 20px 55px rgb(var(--violet) / .3); }
.mic-heart svg { width: 44%; height: 44%; filter: drop-shadow(0 2px 3px rgb(11 10 28 / .3)); }
.mic-ring { position: absolute; inset: -22%; border: 1px solid rgb(var(--cyan) / .55); border-radius: 50%; background: radial-gradient(circle, transparent 57%, rgb(var(--violet) / .17) 68%, transparent 72%); }
.mic-ring--outer { inset: -45%; border-color: rgb(var(--magenta) / .3); }
.mic-wave { position: absolute; display: flex; justify-content: center; align-items: center; gap: 5px; height: 27px; bottom: -48px; width: 100%; }
.mic-wave i { width: 3px; height: 22px; border-radius: 9px; background: var(--accent); }
.mic-wave i:nth-child(2n) { height: 13px; }
.mic-wave i:nth-child(3) { height: 27px; }
.phone-mic { position: relative; isolation: isolate; }
.phone-mic::before, .phone-mic::after { content: ''; position: absolute; inset: -14px; border: 1px solid rgb(var(--violet) / .5); border-radius: 34px; z-index: -1; }
.phone-mic::after { inset: -27px; border-color: rgb(var(--cyan) / .3); border-radius: 44px; }
.mic-heart, .phone-mic {
  animation: living-breath 3.4s ease-in-out infinite;
  animation-play-state: paused;
  transform-origin: center;
}
.mic-ring, .phone-mic::before, .phone-mic::after {
  animation: living-ring 3.4s ease-in-out infinite;
  animation-play-state: paused;
  transform-origin: center;
}
.mic-ring--outer, .phone-mic::after { animation-delay: -.85s; }
.mic-wave i {
  animation: living-wave 1.5s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: center;
}
.mic-wave i:nth-child(2n) { animation-delay: -.8s; }
.mic-wave i:nth-child(3) { animation-delay: -.4s; }
.living-core.art-in-view :is(.mic-heart, .mic-ring, .mic-wave i),
.phone-mic.art-in-view,
.phone-mic.art-in-view::before,
.phone-mic.art-in-view::after { animation-play-state: running; }
.world-orbits { animation: living-orbit 48s linear infinite; transform-origin: 330px 330px; animation-play-state: paused; }
.assistant-phone { animation: living-float 7s ease-in-out infinite; animation-play-state: paused; }
.space-art { animation: living-space 11s ease-in-out infinite; transform-origin: center; animation-play-state: paused; }
.landscape-art { animation: living-landscape 12s ease-in-out infinite; transform-origin: center; animation-play-state: paused; }
.hero-visual::before, .story-visual::before { animation: living-aura 8s ease-in-out infinite alternate; animation-play-state: paused; }
.art-in-view .world-orbits,
.art-in-view .assistant-phone,
.art-in-view .space-art,
.art-in-view .landscape-art,
.hero-visual.art-in-view::before,
.story-visual.art-in-view::before { animation-play-state: running; }
@keyframes living-breath { 0%,100% { transform: scale(.94); } 50% { transform: scale(1.08); } }
@keyframes living-ring { 0%,100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.15); opacity: .9; } }
@keyframes living-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes living-orbit { to { transform: rotate(360deg); } }
@keyframes living-float { 0%,100% { transform: translateY(9px) rotate(3deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes living-space { 0%,100% { transform: translateY(7px) rotate(-1.5deg) scale(.98); } 50% { transform: translateY(-9px) rotate(1.5deg) scale(1.025); } }
@keyframes living-landscape { 0%,100% { transform: translateY(7px) scale(.98); } 50% { transform: translateY(-7px) scale(1.025); } }
@keyframes living-aura { from { transform: scale(.92) translate(-5%, 3%); opacity: .65; } to { transform: scale(1.18) translate(5%, -3%); opacity: 1; } }
@media (max-width: 700px) {
  .living-core { width: 94px; height: 94px; bottom: 13%; left: 8%; }
  .mic-wave { bottom: -30px; height: 18px; }
  .mic-wave i { height: 15px; }
  .mic-wave i:nth-child(3) { height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-depth { animation: none !important; transform: none !important; }
  .motion-item { opacity: 1 !important; transform: none !important; }
  .living-core *, .phone-mic, .phone-mic::before, .phone-mic::after { animation: none !important; }
  .world-orbits, .assistant-phone, .space-art, .landscape-art,
  .hero-visual::before, .story-visual::before { animation: none !important; transform: none !important; }
}
@media (forced-colors: active), print { .living-core, .hero-visual::before, .story-visual::before { display: none; } }

/* A neural landscape, not a hierarchy of boxes. */
.neural-map { padding: 0; border: 0; background: none; overflow: visible; }
.neural-stage { position: relative; width: 100%; min-height: 540px; }
.neural-cosmos { display: block; width: 100%; height: auto; overflow: visible; }
.neural-links { fill: none; stroke: var(--accent); stroke-width: 1; }
.neural-thread { opacity: .3; }
.neural-bridge { opacity: .55; stroke-width: 1.5; }
.neural-signals { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.neural-signal { stroke-dasharray: 3 97; opacity: .95; }
.neural-nodes { fill: var(--accent); }
.neuron-1 { fill: var(--violet-solid); }
.neuron-2 { fill: var(--magenta-solid); }
.human-figure { fill: var(--page); stroke: var(--accent); stroke-width: 2; }
.human-orbit { fill: none; stroke-width: 1; opacity: .32; stroke-dasharray: 2 8; }
.human-mesh { fill: none; opacity: .4; stroke-width: 1; }
.human-label { position: absolute; top: 76%; left: 50%; transform: translateX(-50%); width: 40%; display: flex; flex-direction: column; text-align: center; gap: 8px; }
.human-label strong { font-size: 1.15rem; }
.human-label span { font-size: .75rem; color: var(--ink-2); }
.neural-choice { position: absolute; width: 190px; min-height: 72px; border: 0; border-radius: 22px; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; font: 600 1rem var(--font); }
.neural-choice small { font-size: .68rem; color: var(--ink-2); font-weight: 400; }
.neural-choice--architecture { left: 4%; top: 5%; }
.neural-choice--design { right: 4%; top: 5%; }
.neural-choice--implementation { left: 1%; top: 69%; }
.neural-choice--checks { right: 1%; top: 69%; }
.neural-choice[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 5px; }
.neural-detail { margin: 0 auto; max-width: 72ch; text-align: center; min-height: 148px; border-top: 1px solid var(--line-strong); padding: 24px 16px; }
.neural-detail strong { display: block; font-size: 1.2rem; margin-bottom: 12px; }
.neural-detail p { margin: 0 auto; color: var(--ink-2); }
.neural-map[data-selected] .neural-thread { opacity: .12; }
.neural-map[data-selected="architecture"] .cluster-architecture,
.neural-map[data-selected="design"] .cluster-design,
.neural-map[data-selected="implementation"] .cluster-implementation,
.neural-map[data-selected="checks"] .cluster-checks { opacity: 1; stroke-width: 2; }
.motion-enabled .neural-signal { animation: neural-travel 4s linear infinite; }
.motion-enabled .signal-1 { animation-delay: -1s; }
.motion-enabled .signal-2 { animation-delay: -2s; }
.motion-enabled .signal-3 { animation-delay: -3s; }
.motion-enabled .neuron { animation: neural-light 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.motion-enabled .neuron-1 { animation-delay: -1.1s; }
.motion-enabled .neuron-2 { animation-delay: -2.2s; }
.motion-enabled .human-aura { animation: living-aura 5s ease-in-out infinite alternate; transform-origin: center; }
@keyframes neural-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes neural-light { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.45); } }
@media (max-width: 700px) {
  .neural-stage { padding-top: 72px; padding-bottom: 150px; min-height: 0; }
  .neural-cosmos { width: 100%; }
  .neural-choice { width: 44%; min-height: 64px; font-size: .85rem; }
  .neural-choice small { font-size: .6rem; }
  .neural-choice--architecture, .neural-choice--design { top: 0; }
  .neural-choice--architecture, .neural-choice--implementation { left: 0; }
  .neural-choice--design, .neural-choice--checks { right: 0; }
  .neural-choice--implementation, .neural-choice--checks { top: auto; bottom: 8px; }
  .human-label { top: auto; bottom: 100px; width: 100%; }
  .human-label strong { font-size: 1rem; }
  .human-label span { font-size: .65rem; }
  .neural-detail { padding-inline: 0; min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .neural-stage *, .neural-stage *::before { animation: none !important; }
  .neural-signal { stroke-dasharray: none; opacity: .4; }
}
@media (forced-colors: active) { .neural-links, .human-figure { stroke: CanvasText; } .neural-nodes { fill: CanvasText; } }

/* The real logo star replaces the initial i's tittle; DOM text stays ilyxen. */
.inline-brand { white-space: nowrap; text-transform: none; }
.brand-initial { position: relative; display: inline-block; line-height: 1; -webkit-text-fill-color: transparent; }
.brand-initial::before { content: ''; position: absolute; left: 50%; bottom: .075em; width: .10em; height: .46em; border-radius: .05em; transform: translateX(-50%); background: currentColor; }
.brand-initial::after { content: ''; position: absolute; left: 50%; bottom: .60em; width: .24em; height: .24em; transform: translateX(-50%); background: var(--gold); clip-path: polygon(100% 0,67% 50%,100% 100%,50% 67%,0 100%,33% 50%,0 0,50% 33%); }
.intelligence-scene { padding-block: clamp(66px, 9vw, 126px); border-top: 1px solid var(--line); }
.model-core { position: relative; isolation: isolate; width: min(440px, 100%); aspect-ratio: 1; margin: auto; display: grid; place-items: center; }
.intelligence-cloud { position: absolute; z-index: 0; top: -50%; right: -60%; bottom: -50%; left: -60%; width: 220%; height: 200%; pointer-events: none; }
.storm-mark { position: relative; z-index: 2; width: clamp(4.875rem, 13.5vw, 7.125rem); height: clamp(4.875rem, 13.5vw, 7.125rem); color: #fff; pointer-events: none; filter: drop-shadow(0 1px 12px rgb(var(--page-rgb) / .45)); }
.storm-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes model-turn { from { transform: rotateX(40deg) rotate(0deg); } to { transform: rotateX(40deg) rotate(360deg); } }
@media (max-width: 700px) { .model-core { width: 88%; } .intelligence-cloud { top: -50%; right: -32%; bottom: -50%; left: -32%; width: 164%; height: 200%; } .storm-mark { width: clamp(4.2rem, 22.5vw, 5.7rem); height: clamp(4.2rem, 22.5vw, 5.7rem); } }
@media (forced-colors: active) { .brand-initial { -webkit-text-fill-color: currentColor; } .brand-initial::before, .brand-initial::after { display: none; } }

/* Personalized microphone transcribed from ios/App/Aurora.swift, IlyxenMic. */
.mic-heart, .phone-mic { color: #111; background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / .75), transparent 45%), linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / .28)), linear-gradient(135deg, #5fd8f0, #8f7cff); }
[data-theme="dark"] .mic-heart, [data-theme="dark"] .phone-mic { background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / .75), transparent 45%), linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / .28)), linear-gradient(135deg, #38e1f5, #8f7cff); }
.mic-heart .personalized-mic, .story-visual .phone-mic .personalized-mic { width: 72%; height: 72%; filter: none; }
.personalized-mic { display: block; }
.phone-mic { border-radius: 50%; color: #111; }
.mic-ring--inner { opacity: .8; }
.neuron-0 { fill: var(--accent); }
.signal-0 { animation-delay: 0s; }
.model-visual { min-width: 0; }

.brand-link-text { min-width: 0; }
/* Keep the local Storm orb inside the Intelligence illustration. */
.model-core { width: min(440px, 88%); }
@media (max-width: 700px) {
  .neural-stage { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: 'architecture design' 'cosmos cosmos' 'human human' 'implementation checks'; gap: 20px 14px; padding: 0 0 24px; }
  .neural-cosmos { grid-area: cosmos; }
  .human-label { grid-area: human; position: static; transform: none; width: auto; }
  .neural-choice { position: static; width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .neural-choice--architecture { grid-area: architecture; }
  .neural-choice--design { grid-area: design; }
  .neural-choice--implementation { grid-area: implementation; }
  .neural-choice--checks { grid-area: checks; }
}

@media (prefers-reduced-motion: reduce) { canvas.starfield { display: none; } }

/* Violet rim and halo match the supplied app screenshot. */
.mic-heart { box-shadow: inset 0 2px 2px rgb(255 255 255 / .55), 0 0 0 10px rgb(var(--violet) / .2), 0 14px 40px rgb(var(--violet) / .45); }
.phone-mic { box-shadow: inset 0 1px 1px rgb(255 255 255 / .55), 0 0 0 4px rgb(var(--violet) / .2), 0 5px 14px rgb(var(--violet) / .45); }
/* One woven landscape, with a human portrait at its center. */
.neural-thread { opacity: .48; }
.neural-weave { opacity: .44; stroke-width: 1.2; }
.neural-map[data-selected] .neural-thread { opacity: .32; }
.neural-choice { width: 172px; min-height: 60px; padding: 8px 8px 8px 20px; background: transparent; border-radius: 4px; box-shadow: none; align-items: flex-start; text-align: left; gap: 5px; }
.neural-choice::before { content: ''; position: absolute; left: 3px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgb(var(--cyan) / .5); }
.neural-choice::after { content: ''; position: absolute; bottom: 4px; left: 20px; right: 20px; height: 1px; background: var(--accent); opacity: .35; }
.neural-choice:hover, .neural-choice[aria-pressed="true"] { color: var(--accent); background: rgb(var(--cyan) / .06); outline: none; }
.neural-choice:hover::after, .neural-choice[aria-pressed="true"]::after { opacity: 1; height: 2px; }
.neural-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.neural-choice--architecture { left: 8%; top: 8%; }
.neural-choice--design { right: 6%; top: 8%; }
.neural-choice--implementation { left: 5%; top: 75%; }
.neural-choice--checks { right: 5%; top: 75%; }
.human-label { top: 84%; }
.portrait-ground { fill: var(--page); fill-opacity: .91; stroke: none; }
.portrait-contour { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.portrait-echo { stroke: var(--violet-solid); opacity: .75; stroke-width: 1; }
.portrait-mesh { fill: none; stroke: var(--accent); stroke-width: .8; opacity: .45; }
.portrait-feature { fill: none; stroke: var(--accent); stroke-width: 1.3; opacity: .72; }
[data-theme="dark"] .portrait-contour { filter: drop-shadow(0 0 4px rgb(var(--cyan) / .4)); }
.mic-heart, .phone-mic { background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / .55), transparent 48%), linear-gradient(135deg, #5fd8f0, #8f7cff); }
[data-theme="dark"] .mic-heart, [data-theme="dark"] .phone-mic { background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / .55), transparent 48%), linear-gradient(135deg, #38e1f5, #8f7cff); }
@media (max-width: 700px) {
  .neural-choice { position: relative; inset: auto; width: 100%; padding-left: 16px; }
  .neural-choice::before { left: 0; }
  .human-label { position: static; }
}
/* Investor argument: readable prose, inspectable work, explicit next milestones. */
.investor-thesis { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px,6vw,90px); align-items: start; }
.investor-evidence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 52px; }
.investor-evidence article { padding-top: 26px; border-top: 1px solid var(--line-strong); }
.investor-evidence h3 { margin-top: 26px; }
.investor-note { margin-top: 42px; color: var(--ink-2); }
@media (max-width: 700px) { .investor-thesis, .investor-evidence { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.human-portrait { pointer-events: none; }

@media (max-width: 900px) { .nav { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Organic company illustration: short connected edges and local activation. */
.neural-map--organic .neural-stage { min-height: 0; }
.neural-map--organic .neural-human-raster { display:block; width:100%; height:auto; min-height:300px; object-fit:contain; object-position:center; filter:drop-shadow(0 0 18px rgb(var(--cyan)/.18)); }
.neural-map--organic .neural-art-frame > .neural-cosmos { display:none; }
.neural-map--organic .human-label { position:static; transform:none; width:auto; margin:16px auto 0; max-width:32rem; padding:12px 16px; border-top:1px solid var(--line); background:transparent; box-shadow:none; backdrop-filter:none; }
@media (max-width:700px){.neural-map--organic .neural-human-raster{width:100%;max-width:none;margin:0;min-height:0;object-position:left center;}}
.neural-depth { fill: none; stroke: var(--violet-solid); stroke-width: .65; opacity: .12; }
.synapse-base { fill: none; stroke: var(--accent); stroke-width: .7; opacity: .36; }
.synapse-light { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.synapse-activity { opacity: .08; }
.synapse-points { fill: var(--accent); }
.synapse-junction { opacity: .45; }
.synapse-base .region-design, .synapse-light .region-design { stroke: var(--violet-solid); }
.synapse-points .region-design { fill: var(--violet-solid); }
.synapse-base .region-checks, .synapse-light .region-checks { stroke: var(--violet-solid); }
.synapse-points .region-checks { fill: var(--violet-solid); }
.human-profile { pointer-events: none; }
.profile-body { fill: url(#profile-fill); }
.profile-light { fill: none; stroke: var(--cyan-solid); stroke-width: 1.5; opacity: .75; }
.profile-detail { fill: none; stroke: var(--cyan-solid); stroke-width: 1; opacity: .25; }
.neural-map--organic .human-label { left: 25%; top: 83%; width: 30%; }
.neural-map--organic .human-label span { line-height: 1.7; }
.neural-map--organic .neural-choice--architecture { left: 41%; top: 3%; }
.neural-map--organic .neural-choice--design { right: 4%; top: 6%; }
.neural-map--organic .neural-choice--implementation { left: 40%; top: 85%; }
.neural-map--organic .neural-choice--checks { right: 4%; top: 85%; }
.neural-map--organic .neural-choice { width: 180px; }
/* Desktop labels occupy their own rows below the artwork. This keeps the
   founder-direction text clear of Implementation and Checks at every width. */
@media (min-width: 701px) {
  .neural-map--organic .neural-stage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'architecture design' 'art art' 'implementation checks' 'human human'; gap:18px clamp(22px,4vw,56px); align-items:start; }
  .neural-map--organic .neural-art-frame { display:block; grid-area:art; }
  .neural-map--organic .neural-choice { position:static; width:100%; min-height:56px; }
  .neural-map--organic .neural-choice--architecture { grid-area:architecture; }
  .neural-map--organic .neural-choice--design { grid-area:design; }
  .neural-map--organic .neural-choice--implementation { grid-area:implementation; }
  .neural-map--organic .neural-choice--checks { grid-area:checks; }
  .neural-map--organic .human-label { grid-area:human; position:static; transform:none; width:auto; margin:0 auto; }
}
.neural-map--organic[data-selected] .synapse-base { opacity: .25; }
.neural-map--organic[data-selected="architecture"] .region-architecture,
.neural-map--organic[data-selected="design"] .region-design,
.neural-map--organic[data-selected="implementation"] .region-implementation,
.neural-map--organic[data-selected="checks"] .region-checks { stroke-width: 1.35; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .synapse-activity { animation: synapse-spread 6.8s ease-in-out infinite; }
  .motion-enabled .synapse-junction { animation: junction-spread 6.8s ease-in-out infinite; }
  .motion-enabled .wave-0 { animation-delay: 0s; }
  .motion-enabled .wave-1 { animation-delay: .15s; }
  .motion-enabled .wave-2 { animation-delay: .30s; }
  .motion-enabled .wave-3 { animation-delay: .45s; }
  .motion-enabled .wave-4 { animation-delay: .60s; }
  .motion-enabled .wave-5 { animation-delay: .75s; }
  .motion-enabled .wave-6 { animation-delay: .90s; }
  .motion-enabled .wave-7 { animation-delay: 1.05s; }
  .motion-enabled .wave-8 { animation-delay: 1.20s; }
  .motion-enabled .wave-9 { animation-delay: 1.35s; }
  .motion-enabled .wave-10 { animation-delay: 1.50s; }
  .motion-enabled .wave-11 { animation-delay: 1.65s; }
  .motion-enabled .wave-12 { animation-delay: 1.80s; }
  .motion-enabled .wave-13 { animation-delay: 1.95s; }
  .motion-enabled .wave-14 { animation-delay: 2.10s; }
  .motion-enabled .wave-15 { animation-delay: 2.25s; }
}
@keyframes synapse-spread { 0%,8%,55%,100% { opacity: .03; } 23% { opacity: .78; } 38% { opacity: .13; } }
@keyframes junction-spread { 0%,8%,55%,100% { opacity: .3; } 23% { opacity: .95; } 38% { opacity: .5; } }
@media (max-width: 700px) {
  .neural-map--organic .neural-choice { position: relative; inset: auto; width: 100%; }
  .neural-map--organic .human-label { position: static; width: auto; }
  .neural-map--organic .organic-field { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .neural-map--organic .synapse-activity, .neural-map--organic .synapse-junction { animation: none !important; }
  .neural-map--organic .synapse-activity { opacity: .16; }
}
.motion-scene:not(.motion-active) .synapse-activity, .motion-scene:not(.motion-active) .synapse-junction,
.motion-hidden .synapse-activity, .motion-hidden .synapse-junction { animation-play-state: paused !important; }
@media (forced-colors: active) { .profile-body { fill: CanvasText; } .profile-light { stroke: Canvas; } .synapse-base, .synapse-light { stroke: CanvasText; } }
.synapse-edge { stroke-linecap: round; }

/* Projected 3D neighborhoods: stronger foreground, fine receding structure. */
.neural-map--organic .synapse-base { opacity: .66; stroke-width: .65; }
.neural-map--organic .depth-far { opacity: .18; }
.neural-map--organic .depth-middle { opacity: .48; }
.neural-map--organic .depth-near { opacity: .92; }
.neural-map--organic .synapse-light { stroke-width: 1; }
.neural-map--organic .synapse-points { opacity: .8; }
[data-theme="dark"] .neural-map--organic .profile-body { stroke: rgb(var(--violet) / .3); stroke-width: 1; }

/* Earth-only landscape; the existing aurora and Space layers retain their rules. */
.earth-landscape { position: fixed; inset: auto 0 0; width: 100%; height: 68vh; height: 68svh; z-index: 0; pointer-events: none; contain: strict; }
.earth-landscape[hidden], [data-theme="dark"] .earth-landscape { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .earth-landscape { display: none; } }
@media (max-width: 700px) { .earth-landscape { height: 58vh; height: 58svh; opacity: .8; } }
@media print, (forced-colors: active) { .earth-landscape { display: none; } }

/* Company review refinements: compact mobile frame and connected direction. */
.neural-art-frame { display: contents; }
.direction-bridges { fill: none; stroke: var(--accent); stroke-width: 1.15; opacity: .7; stroke-linecap: round; }
[data-theme="light"] .neural-map--organic .synapse-base { opacity: .85; }
[data-theme="light"] .neural-map--organic .depth-near { stroke-width: 1.05; }
[data-theme="light"] .neural-map--organic .synapse-points { opacity: 1; }
[data-theme="light"] .neural-map--organic .profile-body { fill: rgb(11 10 28 / .25); }
[data-theme="light"] .neural-map--organic .human-profile .filament-cyan { opacity: .78; }
[data-theme="light"] .neural-map--organic .human-profile .filament-violet { opacity: .8; }
[data-theme="light"] .neural-map--organic .brain-node { opacity: .95; }
[data-theme="light"] .neural-map--organic .region-design,
[data-theme="light"] .neural-map--organic .region-checks { --violet-solid: #7160bd; }
.neural-map--organic .profile-body { fill: rgb(11 10 28 / .16); }
.neural-map--organic .profile-outline { fill: none; stroke: var(--cyan-solid); stroke-width: 1.15; opacity: .65; }
.neural-map--organic .human-profile .profile-light { opacity: .9; stroke-width: 1.35; }
.neural-map--organic .human-profile [class^="filament-"] { fill: none; stroke-width: .72; opacity: .5; stroke-linecap: round; }
.neural-map--organic .human-profile .filament-cyan { stroke: var(--cyan-solid); }
.neural-map--organic .human-profile .filament-violet { stroke: var(--violet-solid); opacity: .62; }
.neural-map--organic .human-profile .filament-gold { stroke: #e0ae4c; opacity: .72; }
.neural-map--organic .brain-link { stroke: var(--cyan-solid); stroke-width: .55; opacity: .65; }
.neural-map--organic .brain-links { fill: none; }
.neural-map--organic .brain-node { fill: var(--cyan-solid); opacity: .72; }
.neural-map--organic .brain-node.brain-gold { fill: #e0ae4c; opacity: .95; }
.neural-map--organic .human-profile .brain-nodes { animation: brain-breathe 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes brain-breathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
@media (max-width: 700px) {
 .neural-map--organic .neural-art-frame { display: flow-root; grid-area: cosmos; overflow: hidden; }
 .neural-map--organic .organic-field { width: 118%; max-width: none; min-height: 0; margin: -13% -9%; }
 .neural-map--organic .neural-stage { row-gap: 14px; }
 .neural-map--organic .human-label { margin-bottom: 8px; }
}

.earth-landscape[data-state="unavailable"] { visibility: hidden; }

/* The personalized microphone sits between the mission and chapter links. */
.journey-index--with-mic { display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); gap: 28px; padding-block: 56px 70px; }
.journey-index--with-mic > span { margin: 0; width: auto; line-height: 1.7; }
.journey-index .journey-mic { position: relative; left: auto; bottom: auto; width: 112px; height: 112px; margin-inline: auto; }
.journey-links { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; column-gap: 24px; row-gap: 0; min-width: 0; }
.journey-links a { white-space: nowrap; }
@media (max-width: 900px) {
  .journey-index--with-mic { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 46px; padding-block: 30px 28px; text-align: center; }
  .journey-index .journey-mic { width: 96px; height: 96px; margin-block: 4px 12px; }
  .journey-links { justify-content: center; column-gap: clamp(14px, 4vw, 30px); }
}

/* Use the font's own stem so the starred initial keeps the wordmark's weight. */
.brand-initial { min-width: .26em; margin-inline-end: .018em; }
.brand-initial::before { content: '\0131'; left: 0; bottom: 0; width: auto; height: auto; border-radius: 0; transform: none; background: none; font: inherit; line-height: inherit; -webkit-text-fill-color: currentColor; }
.brand-initial::after { bottom: .64em; width: .30em; height: .30em; filter: drop-shadow(0 .012em .012em rgb(var(--ink-rgb) / .4)); }
@media (max-width: 480px) {
  .header-bar .brand { font-size: 1rem; }
  .header-bar .brand-mark { display: block; }
  .header-bar .brand > .inline-brand { display: inline; }
}

/* Ordinary references are text; reserve the X-star for the header mark and display titles. */
.inline-brand:not(.brand .inline-brand):not(.intelligence-scene h2 .inline-brand) .brand-initial {
  min-width: 0;
  margin-inline-end: 0;
  -webkit-text-fill-color: currentColor;
}
.inline-brand:not(.brand .inline-brand):not(.intelligence-scene h2 .inline-brand) .brand-initial::before,
.inline-brand:not(.brand .inline-brand):not(.intelligence-scene h2 .inline-brand) .brand-initial::after {
  display: none;
}

/* The header brand tile uses the lighter Space-mode asset in every theme. */
.brand-mark .mark-night { display: none !important; }
.brand-mark .mark-day { display: block !important; }

/* Larger mission statement and unmistakable chapter navigation controls. */
.journey-statement { display: grid; gap: 7px; font: 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.4 var(--font); letter-spacing: -.02em; color: var(--ink-2); min-width: 0; }
.journey-statement strong { font-size: clamp(1.55rem, 2vw, 1.9rem); font-weight: 650; color: var(--ink); }
.journey-links { display: grid; gap: 12px; width: min(240px, 100%); justify-self: end; }
.journey-links .journey-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; width: 100%; min-height: 54px; padding: 13px 18px; border-radius: 18px; font: 600 1rem/1.35 var(--font); letter-spacing: 0; text-align: left; white-space: normal; color: var(--ink); }
.journey-number { font: 500 .875rem/1.35 var(--mono); color: var(--accent); }
.journey-link svg { color: var(--accent); }
@media (max-width: 900px) { .journey-links { justify-self: center; width: min(280px, 100%); } }

/* Readable secondary text across the company site. */
:root { --t-micro: .9375rem; --t-small: 1rem; }
.eyebrow { letter-spacing: .1em; line-height: 1.55; color: var(--ink-2); }
.world-note { font-size: .875rem; font-weight: 500; line-height: 1.5; letter-spacing: .07em; color: var(--ink-2); max-width: calc(100% - 24px); }
.motion-enabled .world-note { letter-spacing: .07em; }
.hero-footnote, .scene-note { font-size: .9375rem; line-height: 1.6; }
.story-visual figcaption, .art-caption, .product-number, .relay-label { font-size: .875rem; line-height: 1.6; letter-spacing: .07em; color: var(--ink-2); }
.status-pill, .relay-person small, .human-label span, .neural-choice small { font-size: .875rem; line-height: 1.5; }
.neural-choice { font-size: 1rem; }
.model-name small { font-size: .875rem; line-height: 1.5; letter-spacing: .07em; }

/* Zero Gravity is an opt-in independent mode. Visible scene layers—including
   copy, controls and artwork—share the approved desktop movement. */
:root[data-zero-gravity] { overflow-x: clip; }
:root[data-zero-gravity] body { overflow-x: clip; touch-action: pan-y; }
:root[data-zero-gravity] main > * {
  animation: zero-gravity-drift var(--zg-duration, 15s) ease-in-out infinite alternate;
  animation-delay: calc(var(--zg-index, 0) * -0.31s);
  animation-play-state: paused;
  transform-origin: center;
}
:root[data-zero-gravity] main > *.zero-in-view { animation-play-state: running; }
@keyframes zero-gravity-drift {
  0% { transform: translate3d(-32px, -22px, 0) rotate(-2.5deg); }
  35% { transform: translate3d(38px, 17px, 0) rotate(3deg); }
  68% { transform: translate3d(-24px, 28px, 0) rotate(-3.5deg); }
  100% { transform: translate3d(34px, -25px, 0) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-zero-gravity] main > * {
    animation: none !important;
    transform: none !important;
  }
}

/* Homepage story rhythm: reduce the accumulated section padding without
   changing type, artwork sizing, anchor clearance, or the other pages. */
.home-main > .company-hero .journey-index--with-mic { margin-block-start: clamp(32px, 4vw, 48px); padding-block: clamp(30px, 4vw, 42px) clamp(36px, 5vw, 50px); }
.home-main > .intelligence-scene { padding-block: clamp(46px, 6vw, 76px) clamp(31px, 3.6vw, 50px); }
.home-main > .intelligence-scene + #journey > #everyday { padding-block-start: clamp(18px, 2.1vw, 31px); }
.home-main #journey > .story-scene { padding-block: clamp(44px, 5.5vw, 76px); }
.home-main > #products { padding-block: clamp(46px, 5vw, 72px); }
.home-main > .investor-invitation { padding-block: clamp(46px, 5vw, 74px); }
@media (max-width: 900px) {
  .home-main > .company-hero .journey-index--with-mic { margin-block-start: 24px; padding-block: 24px 26px; }
  .home-main > .intelligence-scene { padding-block: 40px 29px; }
  .home-main > .intelligence-scene + #journey > #everyday { padding-block-start: 17px; }
  .home-main #journey > .story-scene { padding-block: 38px; }
  .home-main > #products, .home-main > .investor-invitation { padding-block: 40px 48px; }
}
/* The later homepage chapters need room for their artwork, not repeated empty bands. */
.home-main #journey > .story-scene { padding-block: clamp(30px, 3.5vw, 52px); }
.home-main > #products { padding-block: clamp(34px, 3.75vw, 54px); }
.home-main > .investor-invitation { padding-block: clamp(36px, 4vw, 56px); }
@media (max-width: 900px) {
  .home-main #journey > .story-scene { padding-block: 28px; }
  .home-main > #products { padding-block: 30px 34px; }
  .home-main > .investor-invitation { padding-block: 32px 36px; }
}
.phone-time, .routine > span { font-size: .875rem; }
.assistant-phone .eyebrow { font-size: .875rem; letter-spacing: .08em; }
.routine strong { font-size: 1rem; line-height: 1.4; }
.routine small { font-size: .875rem; line-height: 1.5; }
.appearance-choice { font-size: .8125rem; }
.appearance-zero { min-width: max-content; }
@media (max-width: 480px) {
  .header-actions .app-cta { font-size: .8125rem; line-height: 1.3; }
}

/* Zero Gravity keeps its buoyant character on phones, but the desktop travel
   range is too wide for a narrow reading column. Small bounded drift keeps
   copy and controls inside the viewport at every phase of the loop. */
@keyframes zero-gravity-drift-mobile {
  0% { transform: translate3d(-12px, -11px, 0) rotate(-1.8deg); }
  35% { transform: translate3d(14px, 9px, 0) rotate(2deg); }
  68% { transform: translate3d(-10px, 14px, 0) rotate(-2.2deg); }
  100% { transform: translate3d(13px, -12px, 0) rotate(1.8deg); }
}
@media (max-width: 700px) {
  :root[data-zero-gravity] main > * {
    animation-name: zero-gravity-drift-mobile;
  }
}

/* -------------------------------------------------------------------------
   Mobile companion composition — September 2026
   ----------------------------------------------------------------------
   Phones keep the desktop idea: words and their visual are one scene. The
   tracks become narrow rather than becoming a long copy-first stack. This is
   intentionally scoped below 700px; desktop remains the reference layout.
   ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  .home-main > .company-hero {
    padding-block: 28px 0;
    overflow: clip;
  }

  .home-main > .company-hero .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(112px, .82fr);
    align-items: center;
    gap: clamp(8px, 3vw, 18px);
    min-height: clamp(470px, 126vw, 650px);
  }

  .home-main > .company-hero .hero-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    max-width: 68%;
    padding-block: 18px;
    z-index: 2;
  }

  .home-main > .company-hero .hero-visual {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 220%;
    margin: 0 0 0 -96%;
    z-index: 1;
    opacity: .86;
    pointer-events: none;
    transform: translateY(-14%) scale(1.08);
  }

  .home-main > .company-hero .world-art {
    width: 100%;
    margin: 0;
  }

  .home-main > .company-hero .hero-copy::before {
    content: '';
    position: absolute;
    inset: -12% -18% -12% -12%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--page-rgb) / .92), rgb(var(--page-rgb) / .58) 65%, transparent);
    filter: blur(12px);
  }

  .home-main > .company-hero .display {
    max-width: 10ch;
    font-size: clamp(2.2rem, 9.4vw, 3.7rem);
    line-height: 1.01;
  }

  .home-main > .company-hero .lead {
    margin-block-start: 18px;
    max-width: 34ch;
    font-size: clamp(.98rem, 3.3vw, 1.12rem);
    line-height: 1.5;
  }

  .home-main > .company-hero .btn-row {
    gap: 8px;
    margin-block-start: 18px;
  }

  .home-main > .company-hero .btn-row .btn {
    min-height: 42px;
    padding-inline: 12px;
    font-size: .82rem;
  }

  .home-main > .company-hero .hero-footnote {
    margin-block-start: 14px;
    font-size: .82rem;
  }

  .home-main > .company-hero .world-note {
    font-size: .68rem;
  }

  .home-main > .company-hero .journey-index--with-mic {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'statement mic' 'links links';
    gap: 16px 12px;
    margin-block-start: 12px;
    padding-block: 22px 24px;
    text-align: left;
  }

  .home-main > .company-hero .journey-statement { grid-area: statement; }
  .home-main > .company-hero .journey-mic { grid-area: mic; width: 72px; height: 72px; margin: 0; }
  .home-main > .company-hero .journey-links {
    grid-area: links;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  .home-main > .company-hero .journey-links .journey-link {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 46px;
    gap: 5px;
    padding: 9px 8px;
    font-size: .82rem;
  }
  .home-main > .company-hero .journey-links .journey-link svg { display: none; }

  .home-main #intelligence .story-split,
  .home-main #journey > .story-scene .story-split {
    grid-template-columns: minmax(0, 1.04fr) minmax(112px, .8fr);
    align-items: center;
    gap: clamp(8px, 3vw, 18px);
    min-height: clamp(430px, 112vw, 580px);
  }

  .home-main #intelligence .story-copy,
  .home-main #journey > .story-scene .story-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    max-width: 70%;
    padding-block: 16px;
    z-index: 2;
  }

  .home-main #intelligence .story-visual,
  .home-main #journey > .story-scene .story-visual {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 176%;
    margin: 0 0 0 -74%;
    z-index: 1;
    opacity: .8;
  }

  .home-main #intelligence .story-copy::before,
  .home-main #journey > .story-scene .story-copy::before {
    content: '';
    position: absolute;
    inset: -12% -18% -12% -12%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--page-rgb) / .94), rgb(var(--page-rgb) / .62) 66%, transparent);
    filter: blur(10px);
  }

  .home-main #intelligence .story-copy h2,
  .home-main #journey > .story-scene .story-copy h2 {
    font-size: clamp(1.85rem, 7.1vw, 2.8rem);
    line-height: 1.04;
  }

  .home-main #intelligence .story-copy > p:not(.eyebrow),
  .home-main #journey > .story-scene .story-copy > p:not(.eyebrow) {
    margin-block: 14px;
    font-size: clamp(.94rem, 3.1vw, 1.06rem);
    line-height: 1.52;
  }

  .home-main #journey > #everyday .story-visual { transform: translate(4%, -3%) rotate(3deg); }
  .home-main #journey > #earth .story-visual { transform: translate(8%, 1%) scale(1.12); }
  .home-main #journey > #space .story-visual { transform: translate(-5%, -2%) scale(1.12); }

  .home-main #journey > #earth,
  .home-main #journey > #space,
  .home-main #journey > #everyday { overflow: clip; }

  .home-main .relay-scene {
    padding-block: 38px;
  }

  .home-main .relay-scene .section-head h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .home-main .relay-demo {
    margin-block-start: 24px;
    padding: 16px 12px;
  }

  /* Compact appearance control at the smallest practical width. Labels stay
     in the accessible names and titles, while the icons preserve all three
     choices without pushing the app link out of the header. */
  .header-actions .appearance-toggle { gap: 0; }
}

@media (max-width: 340px) {
  .header-actions .appearance-choice span { display: none; }
  .header-actions .appearance-choice { min-width: 34px; padding-inline: 6px; }
  .header-actions .appearance-choice svg { width: 16px; height: 16px; }
  .header-actions .app-cta { padding-inline: 8px; font-size: .72rem; }
  .home-main > .company-hero .hero-layout,
  .home-main #intelligence .story-split,
  .home-main #journey > .story-scene .story-split { grid-template-columns: minmax(0, 1.12fr) minmax(96px, .7fr); gap: 6px; }
  .home-main > .company-hero .hero-copy,
  .home-main #intelligence .story-copy,
  .home-main #journey > .story-scene .story-copy { max-width: 74%; }
  .home-main > .company-hero .display { font-size: 2rem; }
}

/* The global CSS sky uses large desktop tiles. Smaller tiles retain the same
   authored star art but repeat it often enough to read as a sky on phones. */
@media (max-width: 700px) {
  :root[data-theme="dark"] .stars,
  :root:not([data-theme="light"]) .stars { opacity: 1; }
  .stars { inset: -18%; }
  .stars__layer--far { background-size: 300px 300px; }
  .stars__layer--mid { background-size: 370px 370px; }
  .stars__layer--near { background-size: 455px 455px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-main > .company-hero .hero-copy::before,
  .home-main #intelligence .story-copy::before,
  .home-main #journey > .story-scene .story-copy::before { filter: none; }
  .home-main #journey > #everyday .story-visual,
  .home-main #journey > #earth .story-visual,
  .home-main #journey > #space .story-visual { transform: none; }
}

/* Final mobile readability correction: keep the two desktop partners in
   genuinely separate tracks. Artwork may crop within its own rail, but never
   sits behind a paragraph or relies on a translucent text mask. */
@media (max-width: 700px) {
  .home-main > .company-hero .hero-layout {
    grid-template-columns: minmax(0, 1.38fr) minmax(94px, .82fr);
    min-height: clamp(430px, 112vw, 580px);
  }

  .home-main > .company-hero .hero-copy,
  .home-main #intelligence .story-copy,
  .home-main #journey > .story-scene .story-copy {
    grid-column: 1;
    max-width: none;
    padding-block: 10px;
  }

  .home-main > .company-hero .hero-copy::before,
  .home-main #intelligence .story-copy::before,
  .home-main #journey > .story-scene .story-copy::before { display: none; }

  .home-main > .company-hero .hero-visual,
  .home-main #intelligence .story-visual,
  .home-main #journey > .story-scene .story-visual {
    grid-column: 2;
    width: 100%;
    margin: 0;
    opacity: .88;
  }

  .home-main > .company-hero .hero-visual { transform: translateY(-8%); }
  .home-main > .company-hero .world-art { width: 180%; max-width: none; margin-left: -12%; }

  .home-main #intelligence .story-split,
  .home-main #journey > .story-scene .story-split {
    grid-template-columns: minmax(0, 1.38fr) minmax(94px, .82fr);
    min-height: clamp(390px, 102vw, 520px);
  }

  .home-main #intelligence .story-visual,
  .home-main #journey > .story-scene .story-visual { transform: none; }
  .home-main #journey > #everyday .story-visual { transform: translateY(-4%) rotate(2deg); }
  .home-main #journey > #earth .story-visual,
  .home-main #journey > #space .story-visual { transform: translateY(-2%) scale(1.08); }

  /* The journey zigzags on the phone just as it does on desktop. */
  .home-main #journey > .story-scene .story-split--reverse {
    grid-template-columns: minmax(94px, .82fr) minmax(0, 1.38fr);
  }
  .home-main #journey > .story-scene .story-split--reverse .story-copy { grid-column: 2; }
  .home-main #journey > .story-scene .story-split--reverse .story-visual { grid-column: 1; }

  .home-main #intelligence .story-copy h2,
  .home-main #journey > .story-scene .story-copy h2 {
    font-size: clamp(1.72rem, 6.8vw, 2.6rem);
  }

  .home-main #intelligence .story-copy > p:not(.eyebrow),
  .home-main #journey > .story-scene .story-copy > p:not(.eyebrow) {
    font-size: clamp(.9rem, 2.9vw, 1rem);
    line-height: 1.48;
  }
}

@media (max-width: 340px) {
  .home-main > .company-hero .hero-layout,
  .home-main #intelligence .story-split,
  .home-main #journey > .story-scene .story-split {
    grid-template-columns: minmax(0, 1.42fr) minmax(88px, .76fr);
    gap: 5px;
  }
  .home-main > .company-hero .hero-copy,
  .home-main #intelligence .story-copy,
  .home-main #journey > .story-scene .story-copy { overflow-wrap: anywhere; }
}

/* -------------------------------------------------------------------------
   Phone composition — explicit single-column reading order
   ----------------------------------------------------------------------
   The phone keeps the desktop relationships without forcing copy into an
   artwork rail. The hero deliberately interleaves its headline, globe, and
   explanation; later chapters keep full-width artwork and readable copy.
   ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  .site-header > .wrap { padding-inline: 8px; }
  .header-bar { gap: 4px; min-width: 0; }
  .header-bar .brand { flex: 0 0 auto; padding-inline: 4px; gap: 4px; font-size: .95rem; white-space: nowrap; }
  .header-bar .brand-mark { display: block; width: 22px; height: 22px; }
  .header-bar .brand > .inline-brand { display: inline; }
  .nav { display: none; }
  .header-actions { min-width: 0; flex: 1 1 auto; gap: 2px; flex-wrap: nowrap; }
  .header-actions .appearance-toggle { gap: 0; padding: 2px; min-height: 36px; }
  .header-actions .appearance-choice { min-width: 29px; min-height: 30px; padding: 5px; }
  .header-actions .appearance-choice span { display: none; }
  .header-actions .appearance-choice svg { width: 15px; height: 15px; }
  .header-actions .nav-toggle { width: 32px; min-width: 32px; height: 36px; }
  .header-actions .app-cta { min-width: max-content; min-height: 36px; padding-inline: 7px; font-size: .68rem; line-height: 1; white-space: nowrap; }
  html.has-js .header-actions .appearance-toggle { display: none; }
  html.has-js .header-actions .appearance-mobile { display: block; }

  .home-main > .company-hero { padding-block: 42px 0; overflow: visible; }
  .home-main > .company-hero .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .home-main > .company-hero .hero-copy { display: contents; }
  .home-main > .company-hero .hero-copy .eyebrow { grid-column: 1; grid-row: 1; max-width: 25ch; margin-block: 0 16px; }
  .home-main > .company-hero .display { grid-column: 1; grid-row: 2; max-width: none; margin: 0; font-size: clamp(1.8rem, 8.25vw, 3.7rem); line-height: 1.06; white-space: normal; }
  .home-main > .company-hero .hero-visual { grid-column: 1; grid-row: 3; width: min(390px, 100%); margin: 8px auto 0; opacity: 1; transform: none; pointer-events: none; }
  .home-main > .company-hero .world-art { width: 100%; max-width: 390px; margin: 0; }
  .home-main > .company-hero .world-note { font-size: .58rem; }
  .home-main > .company-hero .hero-copy .lead { grid-column: 1; grid-row: 4; max-width: 48ch; margin-block: 18px 0; font-size: clamp(.98rem, 3.7vw, 1.12rem); line-height: 1.5; }
  .home-main > .company-hero .btn-row { grid-column: 1; grid-row: 5; display: flex; flex-wrap: nowrap; gap: 7px; margin-block: 18px 0; }
  .home-main > .company-hero .btn-row .btn { min-width: 0; min-height: 42px; flex: 1 1 0; padding-inline: 8px; font-size: clamp(.68rem, 2.5vw, .82rem); white-space: normal; }
  .home-main > .company-hero .hero-footnote { grid-column: 1; grid-row: 6; margin-block: 12px 0; font-size: clamp(.78rem, 3vw, .9rem); white-space: normal; }

  .home-main > .company-hero .journey-index--with-mic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 38%); grid-template-areas: 'statement statement' 'mic links'; align-items: start; gap: 14px 14px; margin-block-start: 26px; padding-block: 24px 28px; text-align: left; }
  .home-main > .company-hero .journey-statement { grid-area: statement; display: block; min-width: 0; font-size: clamp(.95rem, 3.4vw, 1.25rem); line-height: 1.25; white-space: normal; }
  .home-main > .company-hero .journey-statement strong,
  .home-main > .company-hero .journey-statement span { display: inline; font-size: inherit; }
  .home-main > .company-hero .journey-statement strong::after { content: ' '; }
  .home-main > .company-hero .journey-mic { grid-area: mic; width: 72px; height: 72px; margin: 0; }
  .home-main > .company-hero .journey-links { grid-area: links; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 7px; justify-self: stretch; }
  .home-main > .company-hero .journey-links .journey-link { min-height: 42px; padding: 8px 9px; gap: 6px; border-radius: 14px; font-size: .78rem; }
  .home-main > .company-hero .journey-links .journey-link svg { width: 14px; height: 14px; }

  .home-main #intelligence .story-split,
  .home-main #journey > .story-scene .story-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; align-items: start; }
  .home-main #intelligence .story-copy,
  .home-main #journey > .story-scene .story-copy { grid-column: 1; grid-row: auto; max-width: none; padding-block: 0; }
  .home-main #intelligence .story-copy h2,
  .home-main #journey > .story-scene .story-copy h2 { font-size: clamp(2rem, 8.5vw, 3.5rem); line-height: 1.06; }
  .home-main #intelligence .story-copy > p:not(.eyebrow),
  .home-main #journey > .story-scene .story-copy > p:not(.eyebrow) { font-size: clamp(.98rem, 3.7vw, 1.12rem); line-height: 1.52; }
  .home-main #intelligence .story-visual,
  .home-main #journey > .story-scene .story-visual { grid-column: 1; grid-row: auto; width: min(500px, 100%); margin-inline: auto; opacity: 1; transform: none; }
  .home-main #intelligence .model-core { width: min(440px, 100%); margin-inline: auto; }
  .home-main #journey > .story-scene .story-split--reverse .story-copy { grid-column: 1; grid-row: 2; }
  .home-main #journey > .story-scene .story-split--reverse .story-visual { grid-column: 1; grid-row: 1; }
  .home-main #journey > #everyday,
  .home-main #journey > #earth,
  .home-main #journey > #space { overflow: visible; }
  .home-main #journey > .story-scene { padding-block: 42px; }
  .home-main #journey > .story-scene .story-visual svg { width: 100%; height: auto; }
}

@media (max-width: 360px) {
  .header-bar .brand > .inline-brand { display: none; }
  .header-bar .brand { font-size: .88rem; }
  .header-actions .app-cta { padding-inline: 4px; font-size: .58rem; }
  .home-main > .company-hero .display { font-size: clamp(1.65rem, 8vw, 2rem); }
  .home-main > .company-hero .btn-row .btn { font-size: .64rem; padding-inline: 6px; }
  .home-main > .company-hero .journey-index--with-mic { grid-template-columns: minmax(0, 1fr) minmax(105px, 39%); gap: 10px; }
  .home-main > .company-hero .journey-statement { font-size: .84rem; }
}

/* Final mobile reading order: each illustrated chapter introduces its idea,
   then shows the illustration, then explains the work in prose. */
@media (max-width: 700px) {
  .home-main #intelligence .story-split,
  .home-main #journey > .story-scene .story-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-main #intelligence .story-copy,
  .home-main #journey > .story-scene .story-copy { display: contents; }
  .home-main #intelligence .story-copy > .eyebrow,
  .home-main #journey > .story-scene .story-copy > .eyebrow { grid-column: 1; grid-row: 1; }
  .home-main #intelligence .story-copy > h2,
  .home-main #journey > .story-scene .story-copy > h2 { grid-column: 1; grid-row: 2; }
  .home-main #intelligence .story-visual,
  .home-main #journey > .story-scene .story-visual { grid-column: 1 !important; grid-row: 3 !important; width: min(500px, 100%); margin-inline: auto; }
  .home-main #intelligence .story-copy > p:not(.eyebrow),
  .home-main #journey > .story-scene .story-copy > p:not(.eyebrow) { margin-block: 0; }
  .home-main #intelligence .story-visual figcaption,
  .home-main #journey > .story-scene .story-visual figcaption { margin-top: 8px; }
  .home-main #journey > #earth .story-visual { width: min(70%, 500px); }
  .home-main #journey > #earth .story-visual figcaption { width: calc(100% / .7); margin-left: calc((100% - (100% / .7)) / 2); white-space: normal; font-size: .68rem; letter-spacing: .08em; }
  .home-main #intelligence .story-copy > .lead,
  .home-main #journey > .story-scene .story-copy > .lead { grid-column: 1; grid-row: 4; }
  .home-main #intelligence .story-copy > p:not(.eyebrow):not(.lead):not(.scene-note),
  .home-main #journey > .story-scene .story-copy > p:not(.eyebrow):not(.lead):not(.scene-note) { grid-column: 1; grid-row: 5; }
  .home-main #intelligence .story-copy > .arrow-link,
  .home-main #journey > .story-scene .story-copy > .arrow-link,
  .home-main #journey > .story-scene .story-copy > .scene-note { grid-column: 1; grid-row: 6; }
  .home-main #journey > .story-scene .story-copy > .scene-note { grid-row: 6; }
  .home-main #journey > .story-scene .story-copy > .arrow-link { grid-row: 7; }
  .home-main #intelligence .model-core { width: min(440px, 100%); }
  .home-main > .company-hero .journey-mic { align-self: center; }
}

@media (max-width: 700px) {
  .home-main > .investor-invitation .btn-row { flex-wrap: nowrap; gap: 4px; }
  .home-main > .investor-invitation .btn-row .btn {
    min-width: 0;
    min-height: 44px;
    padding-inline: 5px;
    font-size: 11px;
    white-space: nowrap;
  }
  .home-main > .investor-invitation .btn-row .btn:first-child { flex: 1 1 auto; }
  .home-main > .investor-invitation .btn-row .btn:last-child { flex: 0 0 auto; }
  .home-main > .investor-invitation .btn-row .btn--primary > span[aria-hidden="true"] { display: none; }
}

@media (max-width: 700px) {
  .home-main #journey > #everyday .assistant-art { padding-block: 8px; }
  /* Scale the phone as one illustration. Keeping its original
     dimensions inside a zoomed layout preserves the screen, type, spacing,
     and mic proportions while the zoomed box reserves the reduced footprint. */
  .home-main #journey > #everyday .assistant-phone {
    width: min(310px, calc(100% / .58));
    max-width: none;
    margin-inline: auto;
    zoom: .58;
    transform: none;
    animation: living-float 7s ease-in-out infinite;
    animation-play-state: paused;
    transform-origin: center;
  }
  .home-main #journey > #everyday .art-in-view .assistant-phone { animation-play-state: running; }
}

@media (max-width: 340px) {
  .home-main #connection .relay-controls { gap: 6px; }
  .home-main #connection .relay-controls .btn { min-height: 40px; padding: 9px 12px; font-size: .75rem; }
  .home-main #connection .relay-message { margin-bottom: 14px; font-size: 1rem; }
}

@media (max-width: 700px) {
  html.has-js .site-header > .wrap { width: 100%; max-width: none; padding-inline: 8px; margin-inline: 0; }
  html.has-js .header-bar { height: 52px; min-height: 52px; padding-block: 4px; padding-inline: 4px; }
  .header-actions { gap: 8px; }
  .header-actions .appearance-mobile { order: 1; }
  .header-actions .app-cta { order: 2; min-height: 44px; }
  .header-actions .nav-toggle { order: 3; width: 44px; min-width: 44px; height: 44px; }
  .header-actions .appearance-mobile-trigger { min-height: 44px; }
  .appearance-mobile-menu .appearance-choice > span { display: inline; }
}

@media (max-width: 700px) {
  /* Keep the horizontal shell length; only the two visible pills should
     approach their labels. Their 44px height remains the touch target. */
  .header-actions .appearance-mobile-trigger {
    min-width: 44px;
    padding-inline: 4px;
    gap: 0;
  }
  .header-actions .appearance-mobile-trigger .appearance-mobile-icon { display: none; }
  .header-actions .app-cta {
    min-width: 0;
    padding-inline: 3px;
    font-size: .58rem;
    letter-spacing: -.025em;
  }
  .header-actions .nav-toggle {
    border: 1px solid var(--line-strong);
    background: rgb(var(--page-rgb) / .5);
    color: var(--ink-2);
  }
}

/* Shared mobile composition for the prose-led pages and generated answers.
   Homepage scenes have their own approved art/copy ordering above; these
   rules keep the other page families on the same readable rhythm without
   changing their desktop layouts. */
@media (max-width: 700px) {
  main:not(.home-main) .hero { padding-block: 48px 36px; }
  main:not(.home-main) .hero .display { max-width: 18ch; font-size: clamp(2.2rem, 10vw, 4rem); }
  main:not(.home-main) .hero .lead { font-size: clamp(1rem, 3.7vw, 1.15rem); line-height: 1.52; }
  main:not(.home-main) .grid { gap: 16px; }
  main:not(.home-main) .card { padding: 18px; }
  main:not(.home-main) .btn-row { gap: 8px; }
  main:not(.home-main) .btn-row .btn { flex: 1 1 180px; min-width: 0; }
  main:not(.home-main) .answer-lede { padding: 18px 20px; }
  main:not(.home-main) .answer-body > * + * { margin-block-start: 34px; }
}

@media (max-width: 700px) {
  .home-main > #products .grid { gap: 10px; }
  .home-main > #products .product-card {
    gap: 8px;
    padding: 16px;
  }
  .home-main > #products .product-number { margin-bottom: 4px; }
  .home-main > #products .product-card h3 { margin-block: 0 4px; font-size: 1.35rem; line-height: 1.16; }
  .home-main > #products .product-card p { font-size: .9rem; line-height: 1.45; }
  .home-main > #products .product-card .status-pill { margin-top: 2px; padding: 5px 8px; }
  .home-main > #products .product-card .arrow-link { margin-top: 2px; padding-top: 8px; min-height: 40px; }
}

@media (max-width: 700px) {
  /* Keep the mobile shell at the requested full width with a little more
     vertical presence around the 44px controls. */
  html.has-js .header-bar { height: auto; min-height: var(--mobile-header-bar-height); padding-block: 7px; }

  /* The open menu is a compact stack of distinct controls, not one wide
     low-contrast rectangle. Each row keeps a practical 44px target. */
  .appearance-mobile-menu {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 16px);
    gap: 6px;
    padding: 6px;
  }
  .appearance-mobile-menu .appearance-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 128px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: rgb(var(--page-rgb) / .7);
    color: var(--ink-2);
  }
  .appearance-mobile-menu .appearance-choice[aria-pressed="true"] {
    border-color: var(--accent);
    background: rgb(var(--cyan) / .16);
    color: var(--accent);
    box-shadow: 0 1px 5px rgb(var(--ink-rgb) / .12);
  }
}

@media (max-width: 700px) {
  /* The WebGL field supplies the moving foreground on phones. Leave only a
     sparse, small far layer behind it; the larger mid/near CSS tiles were
     stationary enough to dominate the mobile composition. */
  .stars__layer--far {
    opacity: .38;
    background-size: 1200px 1200px;
  }
  .stars__layer--mid,
  .stars__layer--near { display: none; }
}

@media (max-width: 700px) {
  /* The CTA is the centered primary action; View belongs beside the menu on
     the right. At the narrowest width it shifts only as far as needed to
     clear that right-hand control group. */
  html.has-js .header-bar { position: relative; }
  html.has-js .header-actions { position: static; }
  html.has-js .header-actions .appearance-mobile { order: 1; margin-inline-start: auto; }
  html.has-js .header-actions .nav-toggle { order: 2; }
  html.has-js .header-actions .app-cta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 360px) {
  html.has-js .header-actions .app-cta { left: calc(50% - 40px); }
}

@media (max-width: 700px) {
  /* Keep View and the app CTA as readable horizontal pills. The controls
     retain 44px hit boxes, while their visible glass surfaces are thinner. */
  .header-actions .appearance-mobile-trigger {
    min-width: 58px;
    min-height: 44px;
    padding: 5px 8px;
    gap: 5px;
    position: relative;
    z-index: 0;
    border: 0;
    background: transparent;
  }
  .header-actions .appearance-mobile-trigger::before,
  .header-actions .app-cta::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 6px 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgb(var(--page-rgb) / .5);
    pointer-events: none;
  }
  .header-actions .appearance-mobile-trigger > *,
  .header-actions .app-cta > * {
    position: relative;
    z-index: 1;
  }
  .header-actions .appearance-mobile-trigger .appearance-mobile-icon { display: inline-flex; }
  .header-actions .app-cta {
    min-width: max-content;
    min-height: 44px;
    padding-inline: 7px;
    font-size: .68rem;
    letter-spacing: normal;
    position: relative;
    z-index: 0;
    border-color: transparent;
    background: transparent;
  }
}

@media (max-width: 700px) {
  /* Keep the app CTA's established primary treatment while making its
     horizontal footprint content-led. The pseudo-surface stays thin; the
     44px element remains the usable hit area. */
  .header-actions .app-cta {
    padding-inline: 4px;
    font-size: .64rem;
    color: #0b0a1c;
    font-weight: 600;
    background: linear-gradient(
      to bottom,
      transparent 0 6px,
      var(--cyan-solid) 6px,
      var(--violet-solid) calc(100% - 6px),
      transparent calc(100% - 6px) 100%
    );
    box-shadow: none;
  }
  .header-actions .app-cta::before {
    display: none;
  }
}

/* At compact tablet widths the menu stays a right-aligned sheet instead of
   expanding across the full header. Phone and desktop compositions are left
   to their existing breakpoints. */
@media (min-width: 701px) and (max-width: 900px) {
  html.has-js .nav {
    inset-block-start: calc(100% + 12px);
    inset-inline: auto 0;
    width: min(220px, calc(100vw - 32px));
    max-width: calc(100% - 24px);
    padding: 6px;
  }
  html.has-js .nav a {
    min-height: 44px;
    padding-inline: 12px;
    font-size: .9375rem;
  }
}

/* Safari 26 can tint the browser edge when a fixed container meets it.
   The phone header is fixed with a gap below that edge; its original layout
   space is reserved on the body. The atmospheric layers remain document-sized
   and scroll normally. Desktop and tablet retain their composition above.

   The Earth canvas stays one fixed 58svh fragment, inset from the phone's top
   and bottom edges. Scrolling never repositions it or changes its drawing
   buffer. Aurora and tiled cosmos remain document-sized. */
@media (max-width: 700px) {
  html.has-js { --mobile-header-bar-height: 58px; }

  body {
    position: relative;
  }

  .site-header {
    position: relative;
    top: auto;
    transition: opacity .18s var(--ease);
  }

  /* Reserve the bar's original flow height while
     the one real header is fixed below Safari's 4px edge-sampling band. */
  html.has-js body {
    padding-block-start: calc(var(--mobile-header-reserved-height, var(--mobile-header-bar-height)) + max(10px, env(safe-area-inset-top)));
  }

  html.has-js .site-header {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    inset-inline: 0;
    width: 100%;
    padding-block-start: 0;
  }

  /* Keep the real header in the tab order. Opacity and hit-testing hide it
     visually; keyboard focus recalls it immediately, without an inert clone. */
  html.has-js .site-header[data-scroll-hidden="true"] {
    opacity: 0;
    pointer-events: none;
  }

  .aurora,
  .cosmos {
    position: absolute;
    inset: 0;
    min-height: 100%;
  }

  .aurora {
    /* A lightweight repeating wash replaces the viewport-pinned continuity.
       It keeps the middle of long pages atmospheric without allocating a
       document-height canvas or promoting a full-page animated layer. */
    background-image:
      radial-gradient(58vmax 46svh at 5% 14%, rgb(var(--cyan) / .08), transparent 72%),
      radial-gradient(64vmax 52svh at 96% 68%, rgb(var(--violet) / .07), transparent 72%),
      radial-gradient(52vmax 42svh at 28% 98%, rgb(var(--magenta) / .055), transparent 74%);
    background-repeat: repeat-y;
    background-size: 100% 180svh;
  }

  .cosmos .stars {
    inset: 0;
  }

  .stars__layer {
    will-change: auto;
  }

  /* Anchor from the stable large viewport: a fixed bottom anchor follows
     Safari's toolbar as it changes height. This keeps the low foreground still. */
  .earth-landscape {
    position: fixed;
    inset-inline: 0;
    bottom: auto;
    top: calc(42vh - 10px);
    top: calc(100lvh - 58svh - 10px);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

@media (max-width: 700px) {
  /* Use a real rounded surface so the compact CTA cannot expose the hard
     corners created by a transparent horizontal gradient stop. */
  .header-actions .app-cta {
    background: transparent;
    box-shadow: none;
  }
  .header-actions .app-cta::before {
    display: block;
    inset: 6px 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--cyan-solid), var(--violet-solid));
    box-shadow: none;
  }
  .header-actions .app-cta::after {
    content: '↗';
    display: inline;
    position: relative;
    z-index: 1;
    margin-inline-start: 3px;
  }
}

/* The compact mobile composition hides the desktop nav by default. Once the
   disclosure script removes the `hidden` state, the sheet must win that later
   compact-layout rule and become a vertical flex panel again. */
@media (max-width: 700px) {
  html.has-js .nav {
    width: max-content;
    min-width: 142px;
    max-width: calc(100% - 8px);
    inset-inline-start: auto;
    inset-inline-end: 4px;
    gap: 6px;
    padding: 6px;
  }
  html.has-js .nav:not([hidden]) { display: flex; }
  html.has-js .nav a {
    width: 100%;
    min-width: 128px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: rgb(var(--page-rgb) / .7);
  }
  html.has-js .nav a[aria-current="page"] {
    background: rgb(var(--ink-rgb) / .09);
  }
}

/* Enlarged text can outgrow the centered phone CTA's clear space. Preserve
   the accepted single row while it fits; reserve a second row when needed. */
@media (max-width: 700px) {
  html.has-js .site-header[data-text-reflow] .header-bar {
    height: auto;
    padding-block-end: 58px;
  }
  html.has-js .site-header[data-text-reflow] .app-cta {
    left: 50%;
    bottom: 7px;
    width: max-content;
    max-width: calc(100% - 16px);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html.has-js .site-header[data-text-reflow] .appearance-mobile { position: static; }
  html.has-js .site-header[data-text-reflow] .appearance-mobile-menu {
    top: calc(100% + 12px);
    right: 56px;
  }
  html.has-js:has(.site-header[data-text-reflow]) {
    scroll-padding-top: calc(var(--mobile-header-reserved-height) + 24px + env(safe-area-inset-top));
  }
  .home-neural-section .section-head .eyebrow { flex-wrap: wrap; }
}


/* Keep primary navigation available at phone widths when JavaScript is off.
   The disclosure script is absent, so the wrapped row is the usable fallback. */
@media (max-width: 700px) {
  html:not(.has-js) .nav {
    display: flex;
  }
}

/* Company opening: one aligned raster/ activity frame, with controls in their
   own rows. Scoped rules leave every other page and the Home scenes intact. */
.company-opening { padding-block: 16px 32px; }
.company-opening > .wrap { max-width: 1400px; }
.company-opening .company-neural-opening { margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
.company-neural-opening .neural-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: 'art art art art' 'human human human human' 'architecture design implementation checks'; gap: 14px 18px; padding: 0; min-height: 0; }
.company-neural-opening .neural-art-viewport { grid-area: art; width: min(100%, 1360px, calc((100svh - 310px) * 2)); min-width: min(100%, 600px); margin-inline: auto; }
.company-neural-opening .neural-art-frame { display: block; position: relative; width: 100%; aspect-ratio: 2; }
.company-neural-opening .neural-human-raster { display: block; width: 100%; height: auto; min-height: 0; margin: 0; filter: drop-shadow(0 0 18px rgb(var(--cyan) / .18)); }
.company-neural-opening .company-neural-activity { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.company-neural-opening .human-label { grid-area: human; position: static; inset: auto; transform: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; width: auto; max-width: none; margin: 0; padding: 8px 0; border: 0; }
.company-neural-opening .human-label span { text-align: left; line-height: 1.5; }
.company-neural-opening .neural-choice { position: relative; inset: auto; width: 100%; min-height: 58px; padding: 10px 12px 10px 22px; }
.company-neural-opening .neural-choice--architecture { grid-area: architecture; }
.company-neural-opening .neural-choice--design { grid-area: design; }
.company-neural-opening .neural-choice--implementation { grid-area: implementation; }
.company-neural-opening .neural-choice--checks { grid-area: checks; }
.company-neural-opening .neural-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.company-neural-opening .neural-detail { min-height: 0; margin-top: 14px; padding: 16px 0 0; max-width: 76ch; }
.company-neural-opening .neural-detail strong { font-size: 1rem; margin-bottom: 6px; }
.company-neural-opening .neural-detail p { font-size: .875rem; line-height: 1.5; }
.company-neural-opening .neural-motion-toggle { display: block; margin: 10px auto 0; padding: 7px 12px; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink-2); background: transparent; font: inherit; font-size: .75rem; cursor: pointer; }
.company-neural-opening .neural-motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.company-neural-opening .neural-motion-toggle[hidden] { display: none; }
.company-neural-opening figcaption { margin-top: 10px; font-size: .72rem; }
.company-opening + .hero { padding-top: 28px; }
@media (max-width: 700px) {
  .company-opening { padding-block: 10px 28px; }
  .company-neural-opening .neural-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'art art' 'human human' 'architecture design' 'implementation checks'; gap: 10px 12px; }
  .company-neural-opening .neural-art-viewport { width: 100%; min-width: 0; }
  .company-neural-opening .neural-art-viewport { width: calc(100% + 24px); margin-inline: -12px; }
  .company-neural-opening .neural-art-frame { width: 100%; margin: 0; }
  .company-neural-opening .human-label { gap: 12px; padding-block: 4px; }
  .company-neural-opening .human-label strong { font-size: .95rem; }
  .company-neural-opening .human-label span { font-size: .7rem; }
  .company-neural-opening .neural-choice { min-height: 52px; font-size: .85rem; }
  .company-neural-opening .neural-choice small { font-size: .64rem; }
  .company-neural-opening .neural-detail { margin-top: 12px; padding-top: 12px; }
}
@media (forced-colors: active), print { .company-neural-opening .company-neural-activity { display: none; } }

/* The enhanced Company portrait carries raster and light on the same surface.
   Hide the fallback only after a complete GPU frame has been drawn. */
.company-neural-opening .company-neural-portrait { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 18px rgb(var(--cyan) / .18)); }
.company-neural-opening .company-neural-portrait[hidden] { display: none; }
.company-neural-opening[data-portrait="ready"] .neural-human-raster,
.company-neural-opening[data-portrait="ready"] .company-neural-activity { opacity: 0; }
@media (forced-colors: active), print {
  .company-neural-opening .company-neural-portrait { display: none; }
  .company-neural-opening[data-portrait="ready"] .neural-human-raster { opacity: 1; }
}


/* Home wrapper for the second appearance of the approved Company illustration. */
.home-neural-section { padding-block: clamp(30px, 5vw, 64px); scroll-margin-top: 110px; }
.home-neural-section > .wrap { max-width: 1400px; }
.home-neural-section .company-neural-opening { margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
.home-neural-section .neural-human-picture { display: block; width: 100%; }
@media (max-width: 700px) {
  .home-neural-section { padding-block: 26px 34px; }
}