/* ==========================================================================
   Amelia AI — shared design system
   --------------------------------------------------------------------------
   A plain-CSS port of the Amelia landing-page system: deep ink ground,
   aviation-instrument chrome, brand purple/pink/blue, three surface levels
   and four type scales. No build step, no framework, no runtime dependency
   beyond the web fonts.

   Anything visual on either page comes from a token defined here. If a value
   is written inline in the HTML, it is because it is content (a percentage
   bar width, a chart point), not design.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ------------------------------------------------------------------ tokens */

:root {
  /* Ground */
  --ink: #07070e;
  --ink-900: #0c0b14;
  --ink-800: #12111c;
  --ink-700: #151320;
  --ink-600: #1c1a2a;

  /* Brand, carried over from the product */
  --brand: #8c3cdd;
  --brand-dark: #6c29b0;
  --pink: #eb4799;
  --azure: #306ee8;

  /* Instrument accents */
  --horizon: #4e7cf6;
  --haze: #7b5cf0;
  --signal: #22c373;
  --caution: #f5c73d;
  --alert: #f47b25;

  /* RGB triplets, for colour-mixing in gradients and rings */
  --rgb-haze: 123 92 240;
  --rgb-horizon: 78 124 246;
  --rgb-azure: 48 110 232;
  --rgb-pink: 235 71 153;
  --rgb-brand: 140 60 221;
  --rgb-signal: 34 195 115;
  --rgb-caution: 245 199 61;
  --rgb-alert: 244 123 37;

  --hairline: rgb(255 255 255 / 0.08);
  --surface: rgb(255 255 255 / 0.028);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1320px;
}

/* -------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--hairline);
}

/* `hidden` has to beat the component `display` rules below it. Without this,
   anything the sequence hides (a message, a trace step) stays on screen,
   because a class setting `display: flex` outranks the UA rule for [hidden]. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ink);
  color: rgb(255 255 255 / 0.7);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

::selection { background: rgb(var(--rgb-haze) / 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--horizon);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.1);
  border-radius: 99px;
  border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.18); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  z-index: 100;
  position: fixed;
  background: #fff;
  color: var(--ink);
  padding: 0.5rem 1rem;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* -------------------------------------------------------------- typography */

.display-xl {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #fff;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 0.98;
}
.display-lg {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1;
}
.display-md {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #fff;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.06;
}
.display-sm {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.15;
}

.lede {
  color: rgb(255 255 255 / 0.55);
  font-size: clamp(1rem, 1.15vw, 1.175rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.mono-label {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.4);
}
.mono-label.is-haze  { color: var(--haze); }
.mono-label.is-signal { color: var(--signal); }
.mono-label.is-horizon { color: var(--horizon); }

.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
}

.text-gradient {
  background: linear-gradient(100deg, #fff 10%, var(--haze) 48%, var(--pink) 78%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-cool {
  background: linear-gradient(100deg, #fff 15%, var(--horizon) 60%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.muted   { color: rgb(255 255 255 / 0.45); }
.muted-2 { color: rgb(255 255 255 / 0.3); }
.bright  { color: #fff; }

/* ---------------------------------------------------------------- surfaces */

.panel {
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background: rgb(255 255 255 / 0.028);
  backdrop-filter: blur(24px);
}

.panel-raised {
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.09);
  backdrop-filter: blur(24px);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.015)),
    rgb(12 11 20 / 0.72);
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.06) inset,
    0 30px 80px -40px rgb(0 0 0 / 0.9);
}

.panel-inset {
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.06);
  background: rgb(0 0 0 / 0.25);
}

.hairline {
  height: 1px;
  width: 100%;
  background-image: linear-gradient(to right, transparent, rgb(255 255 255 / 0.12), transparent);
}

.rule-top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.1), transparent);
  pointer-events: none;
}

/* ------------------------------------------------------------------ layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}

.section { position: relative; padding-block: 5rem; }
.section.tight { padding-block: 3.5rem; }
.section.loose { padding-block: 6rem; }
@media (min-width: 768px) {
  .section { padding-block: 6rem; }
  .section.tight { padding-block: 4rem; }
  .section.loose { padding-block: 8rem; }
}

.grid { display: grid; }
.flex { display: flex; }
.stack > * + * { margin-top: var(--gap, 1rem); }

/* --------------------------------------------------------------- backdrop */

/* The sky the page is printed on: graticule, plotted positions, slow glows.
   Spans the document rather than the viewport, so each chapter gets its own
   stretch of sky instead of every section meeting the same piece. */
.sky {
  position: absolute;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

.map-grid {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}

.sky__grid { position: absolute; inset: 0; opacity: 0.35; }

.sky__dots {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.16) 0.7px, transparent 1px);
  background-size: 132px 96px;
}

.sky__glow {
  position: absolute;
  border-radius: 99999px;
  filter: blur(130px);
}

.sky__rose {
  position: absolute;
  opacity: 0.15;
}

/* Section-level ambient field */
.atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.atmosphere__horizon {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 70vh;
  background: radial-gradient(ellipse 90% 55% at 50% -10%, rgb(var(--rgb-haze) / 0.22), transparent 65%);
}
.atmosphere__blob {
  position: absolute;
  border-radius: 99999px;
  filter: blur(110px);
}
.atmosphere__blob--a {
  left: -15%; top: 18%;
  width: 46vh; height: 46vh;
  background: rgb(var(--rgb-azure) / 0.14);
  animation: drift-a 22s ease-in-out infinite;
}
.atmosphere__blob--b {
  right: -12%; top: 48%;
  width: 40vh; height: 40vh;
  background: rgb(var(--rgb-pink) / 0.1);
  filter: blur(120px);
  animation: drift-b 27s ease-in-out infinite;
}
/* Film grain stops the gradients banding on wide screens. */
.atmosphere__grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- site head */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s, backdrop-filter 0.5s, border-color 0.5s;
}
.site-header.is-scrolled {
  border-bottom-color: rgb(255 255 255 / 0.07);
  background: rgb(7 7 14 / 0.7);
  backdrop-filter: blur(24px);
}
.site-header__inner {
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 768px) { .site-header__inner { height: 72px; } }

.brand-lockup { display: flex; align-items: center; gap: 0.625rem; }
.brand-lockup__name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.brand-lockup__station {
  display: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.35);
}
@media (min-width: 640px) { .brand-lockup__station { display: inline; } }

.site-nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-nav a {
  position: relative;
  font-size: 13px;
  color: rgb(255 255 255 / 0.55);
  transition: color 0.3s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 1px; width: 0;
  background: var(--horizon);
  transition: width 0.3s;
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }

.menu-toggle {
  display: inline-flex;
  height: 40px; width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.7);
}
.menu-toggle:hover { color: #fff; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(7 7 14 / 0.96);
  backdrop-filter: blur(32px);
  display: none;
}
.mobile-menu.is-open { display: block; }
.mobile-menu nav {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6rem;
}
.mobile-menu nav a {
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  padding-block: 1.25rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 99px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: filter 0.3s, background-color 0.3s, border-color 0.3s, transform 0.25s var(--ease);
}
.btn--primary {
  color: #fff;
  background: linear-gradient(100deg, #6c29b0, #8c3cdd 38%, #4e7cf6 100%);
  box-shadow: 0 18px 50px -20px rgb(123 92 240 / 0.9);
}
.btn--primary:hover { filter: brightness(1.1); }
.btn--outline {
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.03);
}
.btn--outline:hover {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.25);
}
.btn--sm { padding: 0.625rem 1.25rem; font-size: 13px; }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 99px;
  border: 1px solid;
  padding: 0.25rem 0.625rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.chip--neutral { border-color: rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.05); color: rgb(255 255 255 / 0.65); }
.chip--brand   { border-color: rgb(var(--rgb-haze) / 0.3);   background: rgb(var(--rgb-haze) / 0.12);   color: var(--haze); }
.chip--signal  { border-color: rgb(var(--rgb-signal) / 0.3); background: rgb(var(--rgb-signal) / 0.1);  color: var(--signal); }
.chip--caution { border-color: rgb(var(--rgb-caution) / 0.3);background: rgb(var(--rgb-caution) / 0.1); color: var(--caution); }
.chip--alert   { border-color: rgb(var(--rgb-alert) / 0.35); background: rgb(var(--rgb-alert) / 0.1);   color: var(--alert); }
.chip--azure   { border-color: rgb(var(--rgb-horizon) / 0.35);background: rgb(var(--rgb-horizon) / 0.12);color: var(--horizon); }
.chip--pink    { border-color: rgb(var(--rgb-pink) / 0.35);  background: rgb(var(--rgb-pink) / 0.12);   color: var(--pink); }

/* Source badge — the trust mark. Mirrors the product's verification record:
   an unconfirmed source has to read as unconfirmed. */
.verify {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 99px;
  border: 1px solid;
  padding: 0.25rem 0.625rem;
  font-size: 11px;
  font-weight: 500;
}
.verify--verified   { border-color: rgb(var(--rgb-signal) / 0.3);  background: rgb(var(--rgb-signal) / 0.1);  color: var(--signal); }
.verify--pending    { border-color: rgb(var(--rgb-caution) / 0.3); background: rgb(var(--rgb-caution) / 0.1); color: var(--caution); }
.verify--unverified { border-color: rgb(255 255 255 / 0.12);       background: rgb(255 255 255 / 0.05);       color: rgb(255 255 255 / 0.5); }
.verify--expired    { border-color: rgb(var(--rgb-alert) / 0.35);  background: rgb(var(--rgb-alert) / 0.1);   color: var(--alert); }

/* ------------------------------------------------------- data readout bits */

.data-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
.data-row + .data-row { border-top: 1px solid rgb(255 255 255 / 0.06); }
.data-row__value {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.9);
}

.readout {
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.06);
  background: rgb(0 0 0 / 0.25);
  padding: 0.875rem 1rem;
}
.readout__value {
  margin-top: 0.375rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.readout__value.is-signal  { color: var(--signal); }
.readout__value.is-caution { color: var(--caution); }
.readout__value.is-brand   { color: var(--haze); }
.readout__value.is-alert   { color: var(--alert); }
.readout__sub { margin-top: 0.25rem; font-size: 0.75rem; color: rgb(255 255 255 / 0.4); }

/* ------------------------------------------------------------------- cards */

.card {
  position: relative;
  height: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background: rgb(255 255 255 / 0.028);
  padding: 1.25rem;
  overflow: hidden;
  transition: border-color 0.4s, background-color 0.4s;
}
.card:hover { border-color: rgb(255 255 255 / 0.15); background: rgb(255 255 255 / 0.045); }

/* Cursor-tracked light. Driven by --mx/--my set in JS; no re-render cost. */
.card--spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--rgb-haze) / 0.14), transparent 70%);
  pointer-events: none;
}
.card--spotlight:hover::before { opacity: 1; }

.card__icon {
  display: inline-flex;
  height: 40px; width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: linear-gradient(to bottom right, rgb(255 255 255 / 0.08), transparent);
  color: var(--haze);
}
.card__title {
  margin-top: 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.card__body {
  margin-top: 0.625rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.5);
}
.card__tool {
  margin-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  padding-top: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgb(255 255 255 / 0.25);
  word-break: break-word;
}

/* ------------------------------------------------------------------- pills */

.pill-group {
  display: inline-flex;
  gap: 0.25rem;
  border-radius: 99px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
  padding: 0.25rem;
  flex-wrap: wrap;
}
.pill {
  position: relative;
  border-radius: 99px;
  padding: 0.5rem 1rem;
  font-size: 13px;
  color: rgb(255 255 255 / 0.45);
  transition: color 0.3s, background 0.3s;
}
.pill:hover { color: rgb(255 255 255 / 0.8); }
.pill[aria-pressed="true"], .pill[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(100deg, rgb(var(--rgb-brand) / 0.35), rgb(var(--rgb-horizon) / 0.35));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
}

/* Small outline selector, used for inventory / account switchers */
.select-chip {
  border-radius: 99px;
  border: 1px solid rgb(255 255 255 / 0.1);
  padding: 0.25rem 0.75rem;
  font-size: 11px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.45);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.select-chip:hover { color: rgb(255 255 255 / 0.8); border-color: rgb(255 255 255 / 0.25); }
.select-chip[aria-pressed="true"] {
  border-color: rgb(var(--rgb-haze) / 0.5);
  background: rgb(var(--rgb-haze) / 0.15);
  color: #fff;
}

/* Tab strip inside panels */
.tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  padding: 0 0.5rem;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  white-space: nowrap;
  padding: 0.875rem 0.875rem;
  font-size: 13px;
  color: rgb(255 255 255 / 0.45);
  transition: color 0.3s;
}
.tab:hover { color: rgb(255 255 255 / 0.8); }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0.875rem; right: 0.875rem; bottom: -1px;
  height: 1px;
  background: var(--haze);
}

/* ---------------------------------------------------------------- sliders */

.control + .control { margin-top: 1.125rem; }
.control__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.control__value {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: #fff;
}

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--haze) 0%,
    var(--horizon) var(--fill, 50%),
    rgb(255 255 255 / 0.09) var(--fill, 50%),
    rgb(255 255 255 / 0.09) 100%
  );
}
.range::-moz-range-track { height: 4px; border-radius: 99px; background: rgb(255 255 255 / 0.09); }
.range::-moz-range-progress {
  height: 4px; border-radius: 99px;
  background: linear-gradient(to right, var(--haze), var(--horizon));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  height: 16px; width: 16px;
  border-radius: 99px;
  background: #f7f7fb;
  border: 3px solid var(--ink-900);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
  transition: box-shadow 0.2s;
}
.range::-moz-range-thumb {
  height: 16px; width: 16px;
  border-radius: 99px;
  background: #f7f7fb;
  border: 3px solid var(--ink-900);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
}
.range:hover::-webkit-slider-thumb,
.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.4), 0 0 0 6px rgb(var(--rgb-haze) / 0.22);
}
.range:hover::-moz-range-thumb,
.range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.4), 0 0 0 6px rgb(var(--rgb-haze) / 0.22);
}

/* ------------------------------------------------------------ Amelia chrome */

.orb {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  box-shadow: 0 0 0 1.5px var(--ring, rgb(255 255 255 / 0.14));
}
.orb[data-state="listening"] { --ring: rgb(var(--rgb-horizon) / 0.75); }
.orb[data-state="thinking"]  { --ring: rgb(var(--rgb-haze) / 0.85); }
.orb[data-state="answering"] { --ring: rgb(var(--rgb-signal) / 0.7); }
.orb[data-state="listening"] .orb__ring,
.orb[data-state="thinking"] .orb__ring { animation: ring-breathe 2s ease-in-out infinite; }

.orb__sweep {
  position: absolute;
  inset: -4px;
  border-radius: 99px;
  opacity: 0.6;
  animation: sweep 7s linear infinite;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, rgb(var(--rgb-haze) / 0.55) 355deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 62%, #000 66%);
  mask-image: radial-gradient(circle, transparent 62%, #000 66%);
}

/* The portrait is framed on her face and torso rather than centre-cropped:
   the source frame is rendered at 157% of the orb and lifted 2% of its own
   height, which puts crown-to-mid-chest inside the circle. */
.orb__frame {
  position: relative;
  display: block;
  height: 100%; width: 100%;
  overflow: hidden;
  border-radius: 99px;
  background: #141726;
}
.orb__frame img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 157%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -2%);
}

.portrait { position: relative; }
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 48% at 50% 42%, rgb(var(--rgb-haze) / 0.32), transparent 72%);
}
.portrait img {
  height: 100%; width: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 40px 80px rgb(0 0 0 / 0.7));
}

.identity {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
}

/* --------------------------------------------------------------- messages */

.msg { display: flex; gap: 0.75rem; }
.msg__body { min-width: 0; flex: 1; }
.msg__head { display: flex; align-items: center; gap: 0.5rem; }
.msg__who {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.msg--amelia  .msg__who { color: var(--haze); }
.msg--advisor .msg__who { color: var(--signal); }
.msg--buyer   .msg__who { color: rgb(255 255 255 / 0.4); }
.msg__meta { font-family: "JetBrains Mono", monospace; font-size: 10px; color: rgb(255 255 255 / 0.25); }

.msg__bubble {
  margin-top: 0.375rem;
  border-radius: 0.6rem;
  border-top-left-radius: 0.2rem;
  border: 1px solid;
  padding: 0.625rem 0.875rem;
  font-size: 13.5px;
  line-height: 1.6;
}
.msg--buyer   .msg__bubble { border-color: rgb(255 255 255 / 0.07); background: rgb(255 255 255 / 0.035); color: rgb(255 255 255 / 0.7); }
.msg--amelia  .msg__bubble { border-color: rgb(var(--rgb-haze) / 0.2);  background: rgb(var(--rgb-haze) / 0.07);  color: rgb(255 255 255 / 0.85); }
.msg--advisor .msg__bubble { border-color: rgb(var(--rgb-signal) / 0.2); background: rgb(var(--rgb-signal) / 0.06); color: rgb(255 255 255 / 0.85); }

.avatar-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.55);
  width: 36px; height: 36px;
}
.avatar-icon--advisor {
  border-color: rgb(var(--rgb-signal) / 0.3);
  background: rgb(var(--rgb-signal) / 0.1);
  color: var(--signal);
}

/* Reasoning trace */
.trace { display: grid; gap: 0.375rem; }
.trace__step { display: flex; align-items: center; gap: 0.625rem; }
.trace__dot {
  display: flex;
  height: 16px; width: 16px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border: 1px solid rgb(var(--rgb-haze) / 0.4);
  background: rgb(var(--rgb-haze) / 0.1);
  color: var(--haze);
}
.trace__step.is-done .trace__dot {
  border-color: rgb(var(--rgb-signal) / 0.4);
  background: rgb(var(--rgb-signal) / 0.15);
  color: var(--signal);
}
.trace__label { font-size: 13px; color: rgb(255 255 255 / 0.85); }
.trace__step.is-done .trace__label { color: rgb(255 255 255 / 0.55); }
.trace__tool {
  margin-left: auto;
  display: none;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgb(255 255 255 / 0.25);
}
@media (min-width: 640px) { .trace__tool { display: block; } }

.typing { display: inline-flex; align-items: center; gap: 0.25rem; }
.typing span {
  height: 6px; width: 6px;
  border-radius: 99px;
  background: var(--haze);
  animation: blink 1.1s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.16s; }
.typing span:nth-child(3) { animation-delay: 0.32s; }

.caret {
  display: inline-block;
  height: 14px; width: 1px;
  background: rgb(255 255 255 / 0.7);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1.4s ease-in-out infinite;
}

.shimmer-bar {
  background: linear-gradient(90deg, transparent, rgb(var(--rgb-horizon) / 0.65), rgb(var(--rgb-haze) / 0.65), transparent);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

/* ------------------------------------------------------- waypoint / marker */

.waypoint { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.waypoint__dot {
  position: relative;
  display: inline-flex;
  height: 8px; width: 8px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.3);
}
.waypoint.is-active .waypoint__dot { background: var(--horizon); }
.waypoint.is-active .waypoint__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--horizon);
  animation: pulse-ring 2.8s var(--ease) infinite;
}

.marker { display: inline-flex; align-items: center; gap: 0.625rem; }
.marker__index {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgb(var(--rgb-horizon) / 0.8);
}
.marker__rule {
  height: 1px; width: 32px;
  background: linear-gradient(to right, rgb(var(--rgb-horizon) / 0.7), transparent);
}

.section-head { position: relative; max-width: 48rem; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head__eyebrow { display: flex; align-items: center; gap: 0.75rem; }
.section-head.is-centered .section-head__eyebrow { justify-content: center; }

/* ------------------------------------------------------------- comparison */

.contrast {
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .contrast { grid-template-columns: minmax(140px, 0.7fr) 1fr 1.15fr; }
}
.contrast__head { display: none; padding: 0.75rem 1.25rem; background: rgb(255 255 255 / 0.03); }
.contrast__head.is-after { background: rgb(var(--rgb-haze) / 0.09); }
@media (min-width: 768px) { .contrast__head { display: block; } }

.contrast__dim { padding: 1rem 1.25rem 0.25rem; }
.contrast__before { padding: 0 1.25rem 0.5rem; }
.contrast__after { padding: 0.5rem 1.25rem 1rem; background: rgb(var(--rgb-haze) / 0.05); }
@media (min-width: 768px) {
  .contrast__dim, .contrast__before, .contrast__after {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 0.06);
  }
}
.contrast__dim { border-top: 1px solid rgb(255 255 255 / 0.06); }
.contrast__dim p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #fff;
}
.contrast__line { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 13.5px; line-height: 1.6; }
.contrast__before .contrast__line { color: rgb(255 255 255 / 0.35); }
.contrast__after  .contrast__line { color: rgb(255 255 255 / 0.75); }

/* ------------------------------------------------------------- accordion */

.faq { border-radius: 0.6rem; border: 1px solid rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.02); overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.faq + .faq { margin-top: 0.5rem; }
.faq.is-open { border-color: rgb(var(--rgb-haze) / 0.35); background: rgb(var(--rgb-haze) / 0.05); }
.faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 13.5px;
  color: rgb(255 255 255 / 0.85);
}
.faq__q span { flex: 1; }
.faq__chevron { flex-shrink: 0; color: rgb(255 255 255 / 0.25); transition: transform 0.3s, color 0.3s; }
.faq.is-open .faq__chevron { transform: rotate(-90deg); color: var(--haze); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__inner { padding: 0 1rem 1rem; }

/* -------------------------------------------------------------- bar meter */

.meter {
  height: 5px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.07);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(to right, var(--haze), var(--horizon));
  width: 0;
  transition: width 0.9s var(--ease);
}
.meter__fill.is-signal  { background: linear-gradient(to right, var(--signal), #4ade9b); }
.meter__fill.is-caution { background: linear-gradient(to right, var(--caution), #f8dd8a); }
.meter__fill.is-alert   { background: linear-gradient(to right, var(--alert), #f9a76a); }

/* ------------------------------------------------------------------ table */

.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.4);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  white-space: nowrap;
}
.grid-table td {
  padding: 0.875rem 1rem;
  font-size: 13.5px;
  color: rgb(255 255 255 / 0.7);
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  vertical-align: middle;
}
.grid-table tr:last-child td { border-bottom: none; }
.grid-table tr.is-lead td { background: rgb(var(--rgb-haze) / 0.06); }
.table-scroll { overflow-x: auto; scrollbar-width: thin; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  position: relative;
  border-top: 1px solid rgb(255 255 255 / 0.07);
  background: var(--ink-900);
}
.site-footer__grid { position: absolute; inset: 0; opacity: 0.3; pointer-events: none; }
.site-footer a { font-size: 13px; color: rgb(255 255 255 / 0.45); transition: color 0.3s; }
.site-footer a:hover { color: #fff; }

.disclaimer {
  max-width: 48rem;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.3);
}

/* ---------------------------------------------------------------- reveals */

/* One scroll-reveal for the whole site, driven by IntersectionObserver.
   Elements are visible by default and only hidden once JS confirms it is
   running — a page with broken JS still shows all of its content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="left"]  { transform: translateX(24px); }
.js [data-reveal="right"] { transform: translateX(-24px); }
.js [data-reveal="none"]  { transform: none; }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------- animations */

@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes ring-breathe {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--ring); }
  50%      { box-shadow: 0 0 0 3px var(--ring); }
}
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(18px, -30px, 0); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-22px, 34px, 0); }
}
@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
@keyframes dash-flow { to { stroke-dashoffset: -200; } }
@keyframes scroll-cue {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

.route-path {
  stroke-dasharray: 5 7;
  animation: dash-flow 9s linear infinite;
}

/* ------------------------------------------------------------ small print */

.note {
  border-top: 1px solid rgb(255 255 255 / 0.07);
  padding: 0.625rem 1rem;
  font-size: 10px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.25);
}

/* Motion is meaning here, but never mandatory. */
@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;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- narrow screens */

/* A capsule is only a capsule while it fits on one line. The five-way
   comparison switcher wraps to three rows on a phone, where a 99px radius
   reads as a lozenge with buttons loose inside it. */
@media (max-width: 768px) {
  .pill-group { border-radius: 1.25rem; }
}

/* The console's chrome bar carries a session label on the left and a live
   status on the right. Under ~520px both wrap, and a status readout broken
   across three lines is worse than no label at all — so the label goes and
   the status, which is the part that changes, stays on one line. */
@media (max-width: 520px) {
  [data-console-waypoint] + .mono { display: none; }
  [data-console-status] { white-space: nowrap; }
}