/* =====================================================================
   SpeakoFlow · site.css
   The home page. World: the Orbit hero's. Near-white stock, graphite
   ink, one teal for the voice, white cards and squircle app tiles in
   soft shadow. The turntable's rings belong to the hero alone. Below it
   each capability is a rounded panel in its own quiet tint, and the page
   closes on graphite. Hubot Sans set heavy for display, Inter for reading.

   Only the floating surfaces (the recording pill and live card, the
   assistant panel, the conversation bar and orb, the meeting pill) are
   drawn exactly as the app draws them; their CSS is ported in the middle
   of this file. Everything around them is the website's own design.

   Rhythm: the turntable hero; a deck of panels (white, cool, graphite,
   stone, mist) with the layout turning between them; the providers
   orbiting what stays local; questions; a graphite close where the line
   is dictated as you arrive.
   ===================================================================== */

/* ---------- Font (self-hosted Inter, from @fontsource) ---------- */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hubot Sans (GitHub, SIL OFL 1.1, see ../fonts/hubot-sans-OFL.txt): a
   grotesque with a width axis, set wide and heavy for display. */
@font-face {
  font-family: "Hubot Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 600 720;
  font-stretch: 100% 102%;
  src: url("../fonts/hubot-sans-latin-standard.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Tokens ---------- */
:root {
  /* The stock the whole page is printed on, and the hero's light on it. */
  --canvas: #f5f6f4;
  --surface: #ffffff;
  --surface-strong: #eceeec;
  --surface-muted: #f7f8f7;

  /* Graphite ink. */
  --ink: #131618;
  --ink-soft: #2a2e31;
  --body: #3e4347;
  --muted: #5a5f64;
  --soft: #6b7075;
  --faint: #878c91;
  --hairline: rgba(19, 22, 24, 0.08);
  --hairline-strong: rgba(19, 22, 24, 0.15);
  --on-ink: #f6f7f6;

  /* One teal: the voice when it is lit, the accent when it is read. */
  --voice: #14b8a6;
  --accent: #0b7a6d;
  --accent-strong: #08655a;
  --accent-fill: #0f9b8a;
  --danger: #e5484d;

  --display: "Hubot Sans Variable", "Inter Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Space: a 4px base. Sections breathe; groups inside them stay tight. */
  --header-h: 4rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-gap: clamp(6rem, 4.5rem + 6vw, 10.5rem);
  --head-gap: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  --showcase: 1120px;
  --panel: 1240px;

  /* A white card lit from above, as the hero draws its text field. */
  --lift: 0 0 0 1px rgba(19, 22, 24, 0.06), 0 1px 2px rgba(19, 22, 24, 0.05),
    0 30px 50px -28px rgba(19, 22, 24, 0.42);
  /* An app tile, as the hero's turntable draws one. */
  --tile-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(19, 22, 24, 0.08), 0 12px 24px -14px rgba(19, 22, 24, 0.42);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "cv11" 1;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--accent-strong);
}
code {
  padding: 0.08em 0.36em;
  border-radius: 0.3rem;
  background: var(--surface-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
::selection {
  background: rgba(20, 184, 166, 0.2);
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 560;
  text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip-link:focus {
  top: 1rem;
  color: var(--on-ink);
}
.wrap {
  width: 100%;
  max-width: calc(var(--showcase) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.i {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Type: Hubot Sans for display, Inter for reading ---------- */
.h2,
.final-title {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 680;
  font-stretch: 100%;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2.25rem, 1.35rem + 2.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.032em;
}
.lede {
  max-width: 36rem;
  color: var(--body);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 2.75rem;
  padding: 0 1.2rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    transform 150ms var(--ease-out), box-shadow 150ms ease;
}
.btn .i {
  width: 1.05em;
  height: 1.05em;
}
.btn:active {
  transform: scale(0.98);
}
.btn-sm {
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 10px;
  font-size: 0.875rem;
}
.btn-lg {
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 14px;
  font-size: 1rem;
}
.btn-ink {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 1px 2px rgba(19, 22, 24, 0.16), 0 10px 24px -14px rgba(19, 22, 24, 0.6);
}
.btn-ink:hover {
  background: var(--ink-soft);
  color: var(--on-ink);
}
.btn-plain {
  border-color: var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(19, 22, 24, 0.05);
}
.btn-plain:hover {
  border-color: rgba(19, 22, 24, 0.28);
  color: var(--ink);
}
/* On graphite. */
.btn-light {
  background: #f6f7f6;
  color: #131618;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 14px 30px -16px rgba(0, 0, 0, 0.7);
}
.btn-light:hover {
  background: #ffffff;
  color: #131618;
}
.btn-quiet {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #f2f4f3;
}
.btn-quiet:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.gh-stars {
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(11, 122, 109, 0.1);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 600;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Header: a floating capsule ----------
   The nav is a white, frosted card that floats over the page, drawn like
   the hero's text field. It firms up once you scroll. */
.site-header {
  --wordmark-flow: #0e9e8c;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.625rem var(--gutter) 0;
  color: var(--ink);
  pointer-events: none;
  transition: transform 260ms var(--ease);
}
.nav {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--panel);
  height: calc(var(--header-h) - 0.625rem);
  margin-inline: auto;
  padding: 0 0.5rem 0 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 0 0 1px rgba(19, 22, 24, 0.06), 0 1px 2px rgba(19, 22, 24, 0.04),
    0 16px 36px -28px rgba(19, 22, 24, 0.4);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  pointer-events: auto;
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.site-header.scrolled .nav {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 1px rgba(19, 22, 24, 0.07), 0 2px 4px rgba(19, 22, 24, 0.04),
    0 22px 44px -26px rgba(19, 22, 24, 0.45);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  color: inherit;
  text-decoration: none;
}
.nav-brand:hover {
  color: inherit;
}
.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 22.5%;
}
.wordmark {
  display: block;
  width: 106px;
  height: 18px;
  overflow: visible;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.nav-links a,
.nav-github {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 10px;
  color: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}
.nav-links a:hover,
.nav-github:hover {
  background: rgba(19, 22, 24, 0.05);
  color: var(--ink);
}
.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.375rem;
}
.nav-toggle {
  position: relative;
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
}
.nav-toggle span {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease), top 200ms var(--ease);
}
.nav-toggle span:first-child {
  top: 1rem;
}
.nav-toggle span:last-child {
  top: 1.45rem;
}
.nav-toggle[aria-expanded="true"] span:first-child {
  top: 1.22rem;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:last-child {
  top: 1.22rem;
  transform: rotate(-45deg);
}

/* ---------- Hero: Orbit ----------
   Fills one screen and runs up under the see-through header. Sizes are
   fluid against the viewport and capped. The designs tried before it are
   in .archive/heroes-round-1 to heroes-round-7. */
.hero {
  --hero-gutter: clamp(1.25rem, 5vw, 4.5rem);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  overflow: hidden;
}
.hero-wrap {
  width: 100%;
  max-width: calc(1440px + 2 * var(--hero-gutter));
  margin-inline: auto;
  padding-inline: var(--hero-gutter);
}
.hero-sub {
  max-width: 30rem;
  color: var(--body);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero .cta {
  margin-top: 0;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.platforms {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--hairline-strong);
}
.platform {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  color: var(--faint);
  transition: color 140ms ease, background-color 140ms ease;
}
.platform .i {
  width: 1.05rem;
  height: 1.05rem;
}
.platform:hover,
.platform.is-current {
  color: var(--ink);
}
.platform:hover {
  background: var(--hairline);
}
.os-note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

@keyframes dot-pulse {
  50% {
    opacity: 0.35;
  }
}

/* ---------- App tiles: each app's mark on its own icon, as a dock shows it ---------- */
.app {
  --tile: 60px;
  --bg: #ffffff;
  --fg: #111111;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: 27%;
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(16, 24, 22, 0.08), 0 12px 24px -14px rgba(16, 24, 22, 0.42);
}
.app svg {
  display: block;
  width: calc(var(--tile) * 0.54);
  height: calc(var(--tile) * 0.54);
  overflow: visible;
}
.app[data-app="gmail"] svg {
  width: calc(var(--tile) * 0.58);
}
.app[data-app="chatgpt"] svg,
.app[data-app="cursor"] svg {
  width: calc(var(--tile) * 0.52);
  height: calc(var(--tile) * 0.52);
}
.app[data-app="notion"] { --fg: #111111; }
.app[data-app="chatgpt"] { --fg: #0d0d0d; }
.app[data-app="docs"] { --fg: #2f7cf6; }
.app[data-app="claude"] { --bg: #d97757; --fg: #ffffff; }
.app[data-app="cursor"] { --bg: #111111; --fg: #ffffff; }
.app[data-app="discord"] { --bg: #5865f2; --fg: #ffffff; }
.app[data-app="whatsapp"] { --bg: #25d366; --fg: #ffffff; }
.app[data-app="telegram"] { --bg: #26a5e4; --fg: #ffffff; }
.app[data-app="linear"] { --bg: #5e6ad2; --fg: #ffffff; }
.app[data-app="zoom"] { --bg: #0b5cff; --fg: #ffffff; }
.app[data-app="obsidian"] { --bg: #7c3aed; --fg: #ffffff; }
.app[data-app="github"] { --bg: #181717; --fg: #ffffff; }
/* The hero's stock: a warm light from the top left, the voice's teal
   pooling at the bottom right, fading back into the page's stock at the
   foot so the sections below continue on the same paper. */
.hero-light {
  --tile-size: 62px;
  background: linear-gradient(180deg, rgba(245, 246, 244, 0) 82%, var(--canvas)),
    radial-gradient(60% 50% at 0% 0%, #fbf8f5, transparent 70%),
    radial-gradient(60% 55% at 100% 100%, #eaf4f0, transparent 72%), var(--canvas);
  color: var(--ink);
}
.hero-light .app {
  --tile: var(--tile-size);
}
.light-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(2.5rem, 12vh, 8.5rem);
  text-align: center;
}
/* 98px at 1440 wide, 100px from there up; one line on a laptop. */
.light-title {
  max-width: 12em;
  font-family: var(--display);
  font-size: clamp(3rem, 0.8rem + 5.9vw, 6.25rem);
  font-weight: 680;
  font-stretch: 100%;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.light-sub {
  max-width: 30rem;
  margin-top: 1.5rem;
  color: var(--body);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: balance;
}
.light-top .cta {
  justify-content: center;
  margin-top: 2.25rem;
}
.light-top .hero-meta {
  justify-content: center;
  margin-top: 1.25rem;
}
/* The app's pill, as the hero draws it. */
.orbit-pill {
  --ov-surface: rgba(28, 28, 30, 0.97);
  --ov-edge: rgba(255, 255, 255, 0.08);
  display: inline-flex;
}
.orbit-pill .overlay-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.45),
    0 18px 30px -16px rgba(13, 24, 28, 0.6);
}
/* A typed word arrives out of a little blur. */
.cw {
  display: inline-block;
  animation: cw-in 520ms var(--ease) both;
}
@keyframes cw-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(0.22em);
  }
}
/* A caption that has been read leaves the same way. */
.orbit-card-text[data-phase="out"] {
  opacity: 0;
  filter: blur(6px);
}

/* ----- Orbit -----
   A turntable seen from a little above, in real perspective: the near side
   large and low, the far side small and high. Every app stands on it, each
   with its shadow and a faint reflection in the floor, around one white
   text field. It turns an app to the front; while the pill listens, rings
   of sound run out across the floor and the sentence is typed into the
   field. The stage leans a little toward the pointer. */
.hero-orbit {
  --tile-size: 54px;
}
.hero-orbit .light-top {
  padding-top: clamp(2rem, 8vh, 6rem);
}
.orbit-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(21rem, 46vh, 30rem);
  margin-top: clamp(0.25rem, 1.5vh, 1rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.orbit-floor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbit-disc {
  fill: url(#orbit-disc-fill);
}
.orbit-track {
  fill: none;
  stroke: rgba(19, 22, 24, 0.13);
  stroke-width: 1;
}
.orbit-track.is-inner {
  stroke: rgba(19, 22, 24, 0.1);
  stroke-dasharray: 3 6;
}
.orbit-lit {
  fill: none;
  stroke: url(#orbit-lit-fill);
  stroke-width: 1.5;
  opacity: 0.45;
  transition: opacity 500ms ease;
}
.orbit-stage[data-listening="true"] .orbit-lit {
  opacity: 1;
}
.orbit-spot {
  fill: url(#orbit-spot-fill);
}
/* The sentence, once typed, as a bead of light that runs round the ring. */
.orbit-comet {
  fill: none;
  stroke: #14b8a6;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
}
.orbit-drop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 55;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18), 0 0 18px 4px rgba(20, 184, 166, 0.45);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.orbit-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 24, 28, 0.3), rgba(13, 24, 28, 0.12) 55%, rgba(13, 24, 28, 0));
  will-change: transform, opacity;
}
.orbit-apps .app {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 100%;
  -webkit-box-reflect: below 12px linear-gradient(transparent 58%, rgba(0, 0, 0, 0.2));
  will-change: transform;
}
/* The field every app shares, standing at the hub. */
.orbit-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(30rem, 80vw);
  height: 92px;
  padding: 0 16px 0 18px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(19, 22, 24, 0.06), 0 1px 2px rgba(19, 22, 24, 0.05),
    0 30px 50px -28px rgba(19, 22, 24, 0.42);
  transform-origin: 50% 100%;
  -webkit-box-reflect: below 12px linear-gradient(transparent 70%, rgba(0, 0, 0, 0.14));
  transition: box-shadow 320ms ease;
  will-change: transform;
}
.orbit-stage[data-listening="true"] .orbit-card {
  box-shadow: 0 0 0 1.5px rgba(20, 184, 166, 0.6), 0 0 0 6px rgba(20, 184, 166, 0.08),
    0 30px 50px -28px rgba(19, 22, 24, 0.42);
}
.orbit-card > .app {
  --tile: 46px;
  border-radius: 13px;
  transition: opacity 260ms ease, transform 420ms var(--ease);
}
.orbit-card[data-swap="true"] > .app {
  opacity: 0;
  transform: scale(0.8);
}
.orbit-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: left;
}
.orbit-card-where {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 260ms ease;
}
.orbit-card[data-swap="true"] .orbit-card-where {
  opacity: 0;
}
.orbit-card-where b {
  margin-right: 0.45em;
  color: var(--ink);
  font-weight: 650;
}
.orbit-card-text {
  position: relative;
  min-height: 1.3em;
  max-height: 2.6em;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: opacity 420ms var(--ease), filter 420ms ease;
}
/* An empty field shows its hint, as the app's own field would. */
.orbit-card-text:not(:has(.cw))::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 3px;
  color: var(--faint);
  white-space: nowrap;
}
.orbit-card-text:not(:has(.cw)) .ob-caret {
  margin-left: 0;
}
.orbit-card-text .ob-caret {
  margin-left: 2px;
}
.orbit-pill {
  flex: none;
  scale: 1.1;
  transform-origin: right center;
}
/* The check that lands on the app the sentence went into. */
.orbit-check {
  position: absolute;
  top: var(--check-y, 0);
  left: var(--check-x, 50%);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--canvas);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms ease, transform 380ms var(--ease);
}
.orbit-check .i {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}
.orbit-check[data-on="true"] {
  opacity: 1;
  transform: none;
}

/* ---------- Sections ---------- */
.section {
  padding-top: var(--section-gap);
}
/* Heading on the left, what it does and the keys that do it on the right. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  margin-bottom: var(--head-gap);
}
.section-aside {
  display: grid;
  justify-items: start;
  gap: 1.125rem;
  padding-bottom: 0.3rem;
}
/* Or stacked on the centre line, so the layout turns from panel to panel. */
.section-head.is-center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}
.section-head.is-center .section-aside {
  justify-items: center;
  padding-bottom: 0;
}
.section-head.is-center .lede {
  max-width: 38rem;
  text-wrap: balance;
}
.keys-hint {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}
.keys {
  display: inline-flex;
  gap: 0.3rem;
}
/* Keys: white caps in the tiles' material. */
.keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem 0.15rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 55%, #f3f4f3);
  box-shadow: inset 0 0 0 1px rgba(19, 22, 24, 0.1), inset 0 -2px 0 rgba(19, 22, 24, 0.07),
    0 1px 2px rgba(19, 22, 24, 0.06), 0 8px 14px -10px rgba(19, 22, 24, 0.35);
  color: #131618;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.keys kbd .i {
  width: 0.85rem;
  height: 0.85rem;
}

/* ---------- Panels: one per capability ----------
   Each capability is a rounded panel holding its heading and its demo, so
   the page reads as a deck. The tints are quiet and each panel has its
   own: white in the hero's light, cool, graphite, stone, mist. */
.section.is-panel {
  padding-top: clamp(0.75rem, 1.4vw, 1.25rem);
}
.hero + .section.is-panel {
  padding-top: clamp(1.5rem, 3vw, 3rem);
}
.section.is-panel .wrap,
.final .wrap {
  max-width: calc(var(--panel) + 2 * var(--gutter));
}
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 1.5rem + 3.5vw, 5rem) clamp(1.25rem, 0.25rem + 3.5vw, 4rem)
    clamp(1.25rem, 0.25rem + 3vw, 3.5rem);
  border-radius: clamp(24px, 1rem + 1.2vw, 36px);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(19, 22, 24, 0.05), 0 1px 2px rgba(19, 22, 24, 0.03),
    0 40px 80px -64px rgba(19, 22, 24, 0.4);
}
.panel-light {
  background: radial-gradient(60% 70% at 100% 100%, rgba(20, 184, 166, 0.08), transparent 70%),
    radial-gradient(55% 60% at 0% 0%, #fdfbf8, transparent 70%), #ffffff;
}
.panel-cool {
  background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.8), transparent 72%), #ebeff2;
}
.panel-warm {
  background: radial-gradient(70% 60% at 0% 0%, rgba(255, 255, 255, 0.75), transparent 72%), #f2eee8;
}
.panel-mint {
  background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.75), transparent 72%), #e7f1ee;
}
/* Graphite: the reading colours turn light on it. */
.panel-dark {
  --ink: #f2f4f3;
  --ink-soft: #ffffff;
  --body: #c3c9c6;
  --muted: #979f9c;
  --soft: #979f9c;
  --faint: rgba(242, 244, 243, 0.42);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --accent: #5eead4;
  --accent-strong: #99f6e4;
  background: radial-gradient(55% 65% at 72% 62%, rgba(20, 184, 166, 0.16), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 70%), #131618;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 50px 90px -60px rgba(19, 22, 24, 0.7);
  color: var(--ink);
}
.panel-dark .keys kbd {
  background: linear-gradient(180deg, #2b3033, #22262a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4);
  color: #f2f4f3;
}
.showcase {
  display: flex;
  flex-direction: column;
  max-width: var(--showcase);
  margin-inline: auto;
}

/* Tabs: a segmented capsule. The playing segment is lifted and a teal line
   runs along its foot while it plays. */
.tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  max-width: 100%;
  margin-bottom: 1.5rem;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: rgba(19, 22, 24, 0.05);
  box-shadow: inset 0 0 0 1px rgba(19, 22, 24, 0.04);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.section-head.is-center + .showcase .tabs {
  align-self: center;
}
.tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 2.375rem;
  padding: 0 1rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color 200ms ease, color 160ms ease, box-shadow 200ms ease;
}
.tab:hover {
  color: var(--ink);
}
.tab:focus-visible {
  outline-offset: -2px;
  border-radius: 999px;
}
.tab[aria-checked="true"] {
  background: var(--surface);
  color: #131618;
  box-shadow: 0 1px 2px rgba(19, 22, 24, 0.08), 0 8px 16px -10px rgba(19, 22, 24, 0.35);
}
.tab-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tab-title .i {
  width: 1rem;
  height: 1rem;
  color: var(--faint);
  transition: color 160ms ease;
}
.tab[aria-checked="true"] .tab-title .i {
  color: var(--accent);
}
.tab-bar {
  position: absolute;
  right: 1rem;
  bottom: 4px;
  left: 1rem;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.tab[aria-checked="true"] .tab-bar {
  opacity: 1;
}
.tab-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--voice);
  transform: scaleX(0);
  transform-origin: left center;
}
.tab[aria-checked="true"] .tab-bar i {
  transform: scaleX(1);
}
@keyframes tab-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Stages: where the app's surfaces perform ----------
   Inside a panel the demo plays straight on the panel's own tint; the
   windows and the app's surfaces sit on it in the cards' own shadows. */
.stage {
  position: relative;
  isolation: isolate;
}
.talk-stage {
  position: relative;
}
.stage-screen {
  position: relative;
  height: 30rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  --ob-scale: 1;
}

/* A scene is laid out at a fixed size and scaled as a whole, because its
   parts are real surfaces at real sizes. app-demos.js sets the size and
   `--ob-scale`, and sizes the stage to the scene. */
.ob-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: var(--ob-scale);
  transform-origin: center;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.ob-scene.is-fresh {
  animation: ob-rise 420ms var(--ease) both;
}

/* ---------- Windows the surfaces work over (the website's own drawing) ---------- */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--lift);
  color: var(--ink);
}
.win-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
  background: #f8f8f7;
}
.win-dots {
  display: flex;
  gap: 6px;
}
.win-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dfe1e2;
}
.win-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win-title .i {
  width: 14px;
  height: 14px;
}
.win-aside {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  margin-left: auto;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(11, 122, 109, 0.1);
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.win-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 16px 20px;
}
.win-text {
  min-height: 1.6em;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
}
.win-field {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--faint);
  font-size: 13px;
}
.win-field b {
  color: var(--ink);
  font-weight: 500;
}
.win-field + .win-text,
.win-field + .win-field + .win-text {
  margin-top: 12px;
}
.av {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c, #8f9a9b);
  color: rgba(10, 22, 24, 0.86);
  font-size: 12px;
  font-weight: 650;
}
.msg {
  display: flex;
  gap: 12px;
}
.msg + .msg {
  margin-top: 14px;
}
.msg-name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.msg-name span {
  margin-left: 6px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 400;
}
.msg-text {
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
}
.msg .win-text {
  font-size: 14.5px;
  line-height: 1.55;
}
.bubble {
  align-self: flex-start;
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 16px 16px 16px 5px;
  background: #eff1f1;
  color: var(--ink);
  font-size: 14.5px;
}
.compose {
  margin-top: auto;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}
.compose-hint {
  color: var(--faint);
}
.code {
  color: #6b777a;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
}
.code b {
  color: #8250df;
  font-weight: 400;
}
.code em {
  color: #0a7f6f;
  font-style: normal;
}
.prompt {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--surface-muted);
}
.prompt > .i {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--accent);
}
.prompt .win-text {
  font-size: 14.5px;
  line-height: 1.55;
}

/* Brand tiles: a provider's mark in its own colour, on the hero's squircle. */
.tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 27%;
  color: #fff;
  box-shadow: var(--tile-shadow);
}
.tile .b,
.tile .i {
  width: 54%;
  height: 54%;
}
.t-mono {
  background: var(--ink);
  color: var(--surface);
}
.t-nvidia {
  background: #111416;
  color: #76b900;
}
.t-qwen {
  background: linear-gradient(135deg, #6f69f7, #6336e7);
}
.t-gemma {
  background: linear-gradient(135deg, #2e96ff, #446eff);
}
.t-ours {
  background: var(--accent-fill);
}
.t-hf {
  background: #ffd21e;
  color: #1b292e;
}
.t-anthropic {
  background: #d97757;
}
.t-gemini {
  background: linear-gradient(135deg, #3186ff, #8e75b2);
}
.t-groq {
  background: #f55036;
}
.t-mistral {
  background: #fa520f;
}
.t-deepseek {
  background: #4d6bfe;
}
.t-openrouter {
  background: #5b6b82;
}
.t-together {
  background: linear-gradient(135deg, #ef2cc1, #fc4c02);
}
.t-perplexity {
  background: #0e2a2e;
  color: #22b8cd;
}
.t-azure {
  background: linear-gradient(135deg, #0078d4, #114a8b);
}
.t-aws {
  background: #222f3e;
}
.t-deepgram {
  background: #101416;
  color: #13ef93;
}

/* =====================================================================
   Ported from the app. Class names match the app's so the two can be
   compared side by side:
     RecordingOverlay.css   .overlay-*, .card-*
     AudioWaveform.css      .audio-waveform
     AssistantPanel.css     .assistant-scope, .qa-*, .ask-answer-body
     CallBar.css            .call-*, .voice-orb
     MeetingPill.css        .meeting-scope, .pill-*
     onboarding.css         .ob-*  (the tour's pointer, captions, highlights)
   Sizes are in px, as in the app; the scene is scaled as a whole.
   ===================================================================== */

/* The recording card, at the size the app gives its window (400 × 120). */
.ob-overlay {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 5;
  width: 400px;
  height: 120px;
  translate: -50% 0;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 220ms ease-out, transform 260ms var(--ease-out);
}
.ob-overlay[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.ob-overlay[data-compact="true"] {
  width: 120px;
  height: 44px;
}

@keyframes ob-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Selecting text: the highlight grows under the pointer as it drags. */
.ob-sweep {
  padding: 0.1em 0;
  border-radius: 3px;
  background-image: linear-gradient(rgba(0, 126, 112, 0.22), rgba(0, 126, 112, 0.22));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 760ms cubic-bezier(0.45, 0, 0.25, 1);
}
.ob-sweep[data-on="true"] {
  background-size: 100% 100%;
}
.ob-sweep[data-instant="true"] {
  transition: none;
}
/* Where a dictation or an answer lands: a brief wash of the accent. */
.ob-ink-in {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: ob-ink-in 1500ms var(--ease) both;
}
@keyframes ob-ink-in {
  0% {
    background-color: rgba(0, 126, 112, 0.26);
    opacity: 0.35;
  }
  18% {
    opacity: 1;
  }
  100% {
    background-color: transparent;
  }
}
.ob-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  vertical-align: -0.2em;
  background: var(--accent);
  animation: ob-caret 1s step-end infinite;
}
@keyframes ob-caret {
  50% {
    opacity: 0;
  }
}

/* The person's pointer. */
.ob-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(13, 24, 28, 0.35));
  transition: transform var(--ob-move, 0ms) cubic-bezier(0.45, 0, 0.25, 1), opacity 180ms ease;
}
.ob-pointer[data-shown="true"] {
  opacity: 1;
}
.ob-pointer svg {
  position: absolute;
  display: block;
  max-width: none;
  transition: transform 110ms ease;
}
.ob-pointer-arrow {
  top: -2px;
  left: -3px;
}
.ob-pointer-text {
  top: -11px;
  left: -8px;
}
.ob-pointer[data-down="true"] .ob-pointer-arrow {
  transform: scale(0.88);
  transform-origin: 3px 2px;
}
.ob-pointer-ripple {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(27, 41, 46, 0.4);
  opacity: 0;
  pointer-events: none;
}
.ob-pointer[data-down="true"][data-shape="arrow"] .ob-pointer-ripple {
  animation: ob-ripple 520ms ease-out;
}
@keyframes ob-ripple {
  from {
    opacity: 0.9;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(1.25);
  }
}

/* What is said, as subtitles on the desktop. */
.ob-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  transition: color 300ms ease;
  animation: ob-rise 280ms var(--ease) both;
}
.ob-caption-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ob-caption-who .i {
  width: 14px;
  height: 14px;
}
.ob-captions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  width: min(480px, 100%);
  min-height: 144px;
}
.ob-captions:has(.is-reply) .ob-caption:not(.is-reply) {
  color: var(--muted);
}

.overlay-root {
  --ov-surface: rgba(28, 28, 30, 0.97);
  --ov-edge: rgba(255, 255, 255, 0.08);
  --ov-text: #d4d4d8;
  --ov-muted: #8e8e93;
  --ov-line: 22px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  color: var(--ov-text);
}
.overlay-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 8px 8px 0 15px;
  border-radius: 14px;
  background: var(--ov-surface);
  border: 1px solid var(--ov-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.45),
    0 24px 40px -22px rgba(13, 24, 28, 0.55);
}
.card-header {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 24px;
  margin-bottom: 2px;
}
.card-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.card-wave {
  display: flex;
  flex: 0 0 23px;
  align-items: center;
  height: 24px;
}
.card-label {
  color: var(--ov-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  animation: card-label-in 200ms ease-out both;
}
@keyframes card-label-in {
  from {
    opacity: 0;
    transform: translateX(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.card-body {
  flex: 0 0 auto;
  height: calc(var(--ov-line) * 3);
  padding-inline-end: 7px;
  overflow: hidden;
}
.card-text {
  margin: 0;
  color: var(--ov-text);
  font-size: 14px;
  line-height: var(--ov-line);
  overflow-wrap: break-word;
}
.card-hint {
  color: var(--ov-muted);
}

/* The app's waveform: SVG lines with a vertical gradient. Grey on the overlay
   and the meeting pill, because state is not where colour belongs. */
.audio-waveform {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
  direction: ltr;
}
.audio-waveform .wave-base {
  stop-color: #a1a1a6;
}
.audio-waveform .wave-tip {
  stop-color: #e0e0e4;
}
.audio-waveform.working .wave-bar {
  opacity: 0.78;
}

/* ---------- The assistant's graphite language ---------- */
.assistant-scope {
  --as-surface: rgba(19, 22, 23, 1);
  --as-chip-surface: rgba(21, 24, 25, 0.96);
  --as-ink: #eef2f2;
  --as-body: #d2d8d8;
  --as-muted: #9ba5a6;
  --as-faint: #6e797a;
  --as-hairline: rgba(255, 255, 255, 0.08);
  --as-hairline-strong: rgba(255, 255, 255, 0.14);
  --as-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --as-raise: rgba(255, 255, 255, 0.06);
  --as-raise-strong: rgba(255, 255, 255, 0.11);
  --as-inset-bg: rgba(0, 0, 0, 0.28);
  --as-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--as-ink);
  font-family: var(--sans);
}

/* The quick ask: one surface that is a pill while it waits and a card once
   there is something to read. It widens in place. */
.ob-ask {
  position: absolute;
  top: 20px;
  left: 50%;
  width: min(544px, calc(100% - 48px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qa-surface {
  interpolate-size: allow-keywords;
  position: relative;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: var(--as-ink);
  background: var(--as-surface);
  border: 1px solid var(--as-hairline);
  border-radius: 18px;
  box-shadow: var(--as-inner), 0 26px 50px -22px rgba(13, 24, 28, 0.55);
  transform-origin: top center;
  animation: qa-arrive 180ms var(--as-ease) both;
  transition: width 260ms var(--as-ease), border-radius 260ms var(--as-ease);
}
.qa-surface[data-shape="pill"] {
  background: var(--as-chip-surface);
}
.qa-surface[data-shape="card"] {
  width: 100%;
}
@keyframes qa-arrive {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.qa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 6px 0 14px;
}
.qa-surface[data-shape="card"] .qa-row {
  min-height: 44px;
  padding: 8px 8px 4px 16px;
}
.qa-status {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--as-muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}
.qa-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--as-hairline);
  border-radius: 999px;
  background: var(--as-inset-bg);
  color: var(--as-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.qa-chip .i {
  width: 11px;
  height: 11px;
}
.qa-icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--as-muted);
}
.qa-icon-btn .i {
  width: 13px;
  height: 13px;
}
.qa-close {
  width: 28px;
  height: 28px;
  color: var(--as-faint);
}
.qa-surface[data-shape="pill"] .qa-close {
  width: 22px;
  height: 22px;
}
.qa-question {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--as-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qa-body {
  display: flex;
  flex-direction: column;
  animation: qa-unfold 240ms var(--as-ease) both;
}
@keyframes qa-unfold {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ask-answer-body {
  padding: 4px 18px 10px;
  color: var(--as-body);
  font-size: 14.5px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.ask-answer-body p + p {
  margin-top: 8px;
}
.ask-answer-body strong {
  color: var(--as-ink);
  font-weight: 600;
}
.ask-answer-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--as-ink);
  font-size: 0.86em;
}
.qa-surface[data-phase="answering"] .ask-answer-body > :last-child::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-inline-start: 3px;
  vertical-align: -0.16em;
  border-radius: 2px;
  background: var(--as-body);
  animation: qa-caret 1s steps(2, jump-none) infinite;
}
@keyframes qa-caret {
  50% {
    opacity: 0;
  }
}
.qa-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--as-hairline);
}
.qa-actions-gap {
  flex: 1;
}
.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--as-hairline-strong);
  border-radius: 9px;
  background: var(--as-raise);
  color: var(--as-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 120ms ease, background 140ms ease, box-shadow 140ms ease;
}
.qa-btn .i {
  width: 13px;
  height: 13px;
}
.qa-btn.primary {
  border-color: transparent;
  background: var(--as-ink);
  color: #111415;
}
.ob-ask[data-press="true"] .qa-btn.primary {
  transform: scale(0.95);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
/* What the turn is doing: the tool and its query. */
.assistant-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: calc(100% - 32px);
  margin: 2px 16px 8px;
  padding: 4px 9px;
  border: 1px solid var(--as-hairline);
  border-radius: 999px;
  background: var(--as-raise);
  color: var(--as-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}
.assistant-tool-chip .i {
  width: 12px;
  height: 12px;
}

/* Spinner and level bars, shared by the quick ask and the call bubble. */
.call-spin {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--as-muted);
  animation: call-spin 0.9s linear infinite;
}
@keyframes call-spin {
  to {
    transform: rotate(360deg);
  }
}
.call-level {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.call-level span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--as-ink);
  transform: scaleY(calc(0.25 + var(--level, 0) * 0.75));
  transition: transform 90ms ease-out;
}
.call-level span:nth-child(2) {
  transform: scaleY(calc(0.35 + var(--level, 0) * 0.65));
}
.call-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ob-call,
.ob-captions {
  transition: opacity 260ms ease, transform 260ms var(--ease);
}
.ob-call[data-leaving="true"],
.ob-captions[data-leaving="true"] {
  opacity: 0;
  transform: translateY(6px);
}
.call-bubble {
  display: inline-flex;
  align-items: center;
  max-width: 400px;
  border-radius: 16px;
  background: var(--as-chip-surface);
  border: 1px solid var(--as-hairline);
  box-shadow: var(--as-inner), 0 14px 30px -18px rgba(13, 24, 28, 0.5);
  color: var(--as-muted);
  font-size: 13px;
  line-height: 1.5;
  animation: call-bubble-in 180ms ease-out;
}
.call-bubble.hint {
  color: var(--as-faint);
}
@keyframes call-bubble-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.call-bubble-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.ob-call-bubble-space {
  height: 38px;
}
.call-bar-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
}
.call-bar {
  --call-icon: 34px;
  --call-glyph: 18px;
  --call-orb: 30px;
  display: flex;
  align-items: center;
  gap: 1px;
  height: calc(var(--call-icon) + 8px);
  padding: 0 5px;
  border-radius: 999px;
  background: var(--as-chip-surface);
  border: 1px solid var(--as-hairline-strong);
  box-shadow: var(--as-inner), 0 18px 34px -18px rgba(13, 24, 28, 0.55);
  animation: call-rise 220ms var(--ease-out);
}
@keyframes call-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--call-icon);
  height: var(--call-icon);
  border-radius: 50%;
  color: var(--as-muted);
}
.call-icon .i {
  width: var(--call-glyph);
  height: var(--call-glyph);
}
.call-divider {
  width: 1px;
  height: calc(var(--call-icon) * 0.55);
  margin: 0 3px;
  background: var(--as-hairline-strong);
}
.call-orb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--call-orb) + 6px);
  height: calc(var(--call-orb) + 6px);
}
.call-orb .voice-orb {
  --orb-size: var(--call-orb);
}
.call-orb .voice-orb-flow {
  filter: blur(4px);
}

/* The orb: a softly lit glass sphere. The light quickens while the assistant
   speaks and follows the microphone while you do. */
.voice-orb {
  --orb-size: 156px;
  --orb-speed: 14s;
  position: relative;
  flex-shrink: 0;
  width: var(--orb-size);
  height: var(--orb-size);
  isolation: isolate;
}
.voice-orb-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 23%, #eef9ff 0%, #c7e5e9 20%, #9eb9cd 42%,
      #7774a1 65%, #3d425d 85%, #303b4e 100%);
  box-shadow: inset 0 0 2px 1px #e1f2ff66, inset -8px -12px 24px #27324b55;
  transform: scale(calc(1 + var(--voice-energy, 0) * 0.12));
  transition: transform 120ms ease-out, filter 400ms, opacity 400ms;
}
.voice-orb-flow {
  position: absolute;
  inset: -25%;
  border-radius: 43%;
  background: conic-gradient(from 40deg, transparent 8%, #def7edbb 24%, #6777a855 38%,
      transparent 47%, #c9bdecbf 64%, #b7e7eabf 80%, transparent 94%);
  filter: blur(13px);
  animation: voice-orbit var(--orb-speed) linear infinite;
}
.voice-orb-light {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 19%, #faffffb3, transparent 43%),
    radial-gradient(ellipse at 74% 87%, #e5d3ff77, transparent 37%);
  box-shadow: inset 1px 1px 5px #f4ffff77, inset -2px -4px 8px #1e284866;
}
.voice-orb.speaking {
  --orb-speed: 4s;
}
.voice-orb.speaking .voice-orb-body {
  animation: voice-speak 1.4s ease-in-out infinite;
}
.voice-orb.hearing {
  --orb-speed: 7s;
}
.voice-orb.hearing .voice-orb-body {
  filter: saturate(1.15);
}
.voice-orb.responding {
  --orb-speed: 5s;
}
@keyframes voice-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes voice-speak {
  0%,
  100% {
    transform: scale(0.94);
  }
  48% {
    transform: scale(1.05);
  }
}
.overlay-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 46px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ov-surface);
  border: 1px solid var(--ov-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.45),
    0 16px 30px -16px rgba(13, 24, 28, 0.55);
}
.pill-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
}
/* The finished text replaces the live one when cleanup changed it. */
.card-text.is-revealed {
  animation: card-text-in 260ms ease-out both;
}
@keyframes card-text-in {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

/* ---------- The meeting pill (src/meeting/MeetingPill.css) ---------- */
.meeting-scope {
  --mp-surface: rgba(19, 22, 23, 0.97);
  --mp-raise: rgba(255, 255, 255, 0.06);
  --mp-raise-strong: rgba(255, 255, 255, 0.11);
  --mp-inset: rgba(0, 0, 0, 0.28);
  --mp-ink: #eef2f2;
  --mp-body: #d2d8d8;
  --mp-muted: #9ba5a6;
  --mp-faint: #6e797a;
  --mp-hairline: rgba(255, 255, 255, 0.08);
  --mp-hairline-strong: rgba(255, 255, 255, 0.14);
  --mp-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --mp-live: #ff5a52;
  --mp-accent: #5cd6be;
  color: var(--mp-ink);
  font-family: var(--sans);
}
.pill-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-hairline-strong);
  box-shadow: var(--mp-inner), 0 36px 60px -30px rgba(13, 24, 28, 0.6);
  transform-origin: left top;
  animation: card-zoom 300ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}
@keyframes card-zoom {
  from {
    opacity: 0;
    transform: scale(0.42);
    border-radius: 999px;
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
    border-radius: 18px;
  }
}
.pill-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 9px 9px 14px;
  border-bottom: 1px solid var(--mp-hairline);
}
.pill-head-status {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
}
.pill-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mp-live);
  box-shadow: 0 0 0 3px rgba(255, 90, 82, 0.16);
  animation: pill-breathe 2s ease-in-out infinite;
}
@keyframes pill-breathe {
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 5px rgba(255, 90, 82, 0.04);
  }
}
.pill-saved {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--mp-accent);
}
.pill-clock {
  flex: none;
  color: var(--mp-ink);
  font-size: 14px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}
.pill-head-label {
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pill-head-sides {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pill-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--mp-hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mp-muted);
  font-size: 11.5px;
  font-weight: 500;
  transition: color 120ms ease;
}
.pill-side-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.pill-side[data-active="true"] {
  color: var(--mp-ink);
}
.pill-side[data-active="true"] .pill-side-light {
  background: var(--mp-accent);
  box-shadow: 0 0 0 3px rgba(92, 214, 190, 0.2);
}
.pill-head-spacer {
  flex: 1;
}
.pill-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pill-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--mp-raise);
  color: var(--mp-body);
}
.pill-action .i {
  width: 14px;
  height: 14px;
}
.pill-transcript {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  height: 300px;
  overflow: hidden;
  padding: 14px 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
.pill-turn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: ob-rise 260ms var(--ease) both;
}
.pill-turn-who {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--mp-ink);
  font-size: 12px;
  font-weight: 600;
}
.pill-turn-swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8f9a9b;
  transition: background-color 400ms ease, transform 400ms var(--ease);
}
.pill-turn-name {
  transition: color 300ms ease;
}
.pill-turn.is-relabel .pill-turn-swatch {
  transform: scale(1.5);
}
.pill-turn.is-relabel .pill-turn-name {
  animation: relabel 600ms var(--ease) both;
}
@keyframes relabel {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
.pill-turn-time {
  color: var(--mp-faint);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.pill-turn-text {
  padding-inline-start: 14px;
  color: var(--mp-body);
  font-size: 13.5px;
  line-height: 1.55;
}


/* The rest of MeetingPill.css: the call offer, labelled buttons, the answer
   and the ask bar. */
.pill-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--mp-raise);
  color: var(--mp-ink);
  font-size: 12.5px;
  font-weight: 560;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.pill-btn .i {
  width: 13px;
  height: 13px;
}
.pill-btn[data-variant="primary"] {
  background: var(--mp-ink);
  color: #111415;
}
.pill-btn[data-variant="ghost"] {
  border-color: var(--mp-hairline-strong);
  background: transparent;
  color: var(--mp-body);
}
.pill-btn[data-variant="stop"] {
  background: rgba(255, 90, 82, 0.15);
  color: #ffb0ab;
}
.pill-btn[data-variant="stop"] .i {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.pill-btn[data-press="true"] {
  transform: scale(0.94);
}
.pill-btn[data-variant="primary"][data-press="true"] {
  background: #ffffff;
}
.pill-btn[data-variant="stop"][data-press="true"] {
  background: rgba(255, 90, 82, 0.3);
  color: #fff;
}
.pill-offer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 14px 14px 12px;
  border: 1px solid var(--mp-hairline-strong);
  border-radius: 18px;
  background: var(--mp-surface);
  box-shadow: var(--mp-inner), 0 30px 50px -28px rgba(13, 24, 28, 0.6);
  animation: mpill-settle 280ms var(--ease-out) backwards;
}
@keyframes mpill-settle {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pill-offer-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pill-offer-ring {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 1.5px solid var(--mp-accent);
  border-radius: 50%;
}
.pill-offer-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pill-offer-text {
  color: var(--mp-ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}
.pill-offer-state {
  color: var(--mp-faint);
  font-size: 12px;
}
.pill-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 20px;
}
.pill-empty {
  margin: auto 0;
  padding: 18px 8px;
  color: var(--mp-faint);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
.pill-answer {
  flex: none;
  padding: 12px 16px;
  border-top: 1px solid var(--mp-hairline);
  background: rgba(255, 255, 255, 0.025);
  animation: block-in 320ms var(--ease) both;
}
.pill-answer-question {
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pill-answer-text {
  min-height: 3.2em;
  color: var(--mp-body);
  font-size: 13.5px;
  line-height: 1.6;
}
.pill-answer-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mp-faint);
  font-size: 12.5px;
}
.pill-dots {
  display: inline-flex;
  gap: 3px;
}
.pill-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mp-muted);
  animation: pill-dot 1.2s ease-in-out infinite;
}
.pill-dots span:nth-child(2) {
  animation-delay: 160ms;
}
.pill-dots span:nth-child(3) {
  animation-delay: 320ms;
}
@keyframes pill-dot {
  0%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
.pill-ask {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--mp-hairline);
}
.pill-ask-field {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 5px 0 14px;
  border: 1px solid var(--mp-hairline);
  border-radius: 999px;
  background: var(--mp-inset);
  transition: border-color 140ms ease;
}
.pill-ask-field[data-focus="true"] {
  border-color: rgba(255, 255, 255, 0.24);
}
.pill-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--mp-ink);
  font-size: 13.5px;
  white-space: nowrap;
}
.pill-ask-input.is-placeholder {
  color: var(--mp-faint);
}
.pill-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mp-raise-strong);
  color: var(--mp-faint);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.pill-send .i {
  width: 15px;
  height: 15px;
}
.pill-send[data-ready="true"] {
  background: var(--mp-ink);
  color: #111415;
}
.pill-send[data-press="true"] {
  transform: scale(0.9);
  background: #fff;
}

/* =====================================================================
   Scenes. Positions are in the scene's own px; `.is-narrow` is the
   phone layout of the same scene.
   ===================================================================== */
@keyframes block-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}
.leaving {
  opacity: 0 !important;
  translate: 0 -6px;
  transition: opacity 280ms ease, translate 280ms var(--ease);
}

/* ---------- Dictation: a language dial, the model, the note ---------- */
.dict-side {
  position: absolute;
  top: 50%;
  left: 52px;
  width: 236px;
  translate: 0 -50%;
}
.dict-k {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.dial {
  position: relative;
  height: 200px;
  margin: 6px 0 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.dial-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-40px);
  transition: transform 750ms var(--ease);
}
.dial-list.is-prev {
  transform: translateY(0);
  transition: none;
}
.dial-list li {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.4;
  transition: font-size 600ms var(--ease), color 600ms ease, opacity 600ms ease;
}
.dial-list li[data-d="0"] {
  color: var(--ink);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.03em;
  opacity: 1;
}
.dial-list li[data-d="1"] {
  opacity: 0.55;
}
.dial-list li[data-d="2"] {
  opacity: 0.28;
}
.dial-list li[data-d="3"] {
  opacity: 0;
}
.engine {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--lift);
  animation: block-in 520ms var(--ease) both;
}
.engine-name {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.engine-where {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12.5px;
}
.engine-where .i {
  width: 13px;
  height: 13px;
}
.dict-scene .win {
  top: 40px;
  left: 340px;
  width: 610px;
  height: 226px;
}
.dict-scene .ob-overlay {
  left: 645px;
  bottom: 26px;
}
.win-h {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.dict-scene.is-narrow .dict-side {
  top: 22px;
  left: 20px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0 18px;
  width: 400px;
  translate: none;
}
.dict-scene.is-narrow .dict-k {
  grid-row: 1;
}
.dict-scene.is-narrow .dial {
  height: 120px;
  margin: 4px 0 0;
}
.dict-scene.is-narrow .dial-list {
  transform: translateY(-80px);
}
.dict-scene.is-narrow .dial-list.is-prev {
  transform: translateY(-40px);
}
.dict-scene.is-narrow .dial-list li[data-d="0"] {
  font-size: 24px;
}
.dict-scene.is-narrow .engine {
  align-self: center;
  margin-top: 4px;
}
.dict-scene.is-narrow .win {
  top: 172px;
  left: 20px;
  width: 400px;
  height: 170px;
}
.dict-scene.is-narrow .ob-overlay {
  left: 50%;
  bottom: 12px;
}

/* ---------- Assistant: a window, the ask, the answer ---------- */
.ask-scene .win {
  top: 196px;
  left: 50%;
  width: 640px;
  height: 264px;
  translate: -50% 0;
}
.ask-scene .ob-ask {
  top: 22px;
  width: 560px;
  z-index: 5;
}
.ask-said {
  position: absolute;
  top: 84px;
  left: 40px;
  right: 40px;
  z-index: 4;
}
.ask-said.is-sent {
  color: var(--muted);
}
.ask-scene .ob-caption {
  font-size: 17px;
}
.doc-h {
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.doc-p {
  margin-top: 6px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
}
.err {
  align-self: flex-start;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #f3d0cf;
  border-radius: 10px;
  background: #fdf3f2;
  color: #a1302d;
  font-family: var(--mono);
  font-size: 13.5px;
}
.ask-scene.is-narrow .win {
  top: 270px;
  width: 400px;
  height: 250px;
}
.ask-scene.is-narrow .ob-ask {
  width: 400px;
}
.ask-scene.is-narrow .ask-said {
  top: 92px;
  left: 20px;
  right: 20px;
}

/* ---------- Conversation: graphite, the orb answers out loud ----------
   The words on the left, the orb on the right, glowing in the dark. */
.talk-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
.talk-panel .section-head {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-bottom: 0;
}
.talk-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 0 32px 26px;
}
.talk-orb {
  position: absolute;
  top: 34px;
  left: 50%;
  translate: -50% 0;
}
.talk-orb::before {
  content: "";
  position: absolute;
  inset: -55%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 234, 212, 0.2), rgba(167, 139, 250, 0.1) 55%, transparent);
}
.talk-orb .voice-orb {
  --orb-size: 168px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}
.panel-dark .call-bar {
  outline: 1px solid rgba(255, 255, 255, 0.06);
}
/* The saved list is a paper card again. */
.panel-dark .talk-saved {
  --ink: #131618;
  --body: #3e4347;
  --muted: #5a5f64;
  --faint: #878c91;
  --hairline: rgba(19, 22, 24, 0.08);
  --accent: #0b7a6d;
  --accent-strong: #08655a;
}
.talk-saved {
  position: absolute;
  top: 236px;
  left: 50%;
  width: 420px;
  margin-left: -210px;
  padding: 8px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--lift);
  animation: block-in 480ms var(--ease) both;
}
.talk-saved-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.talk-saved-head .i {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.talk-saved-head span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
}
.talk-saved li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  font-size: 14px;
}
.talk-saved li.is-new {
  background: rgba(11, 122, 109, 0.07);
  animation: block-in 420ms var(--ease) 200ms both;
}
.talk-saved li strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 560;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.talk-saved li span {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.talk-saved li > .i {
  width: 16px;
  height: 16px;
  color: var(--faint);
}
.talk-saved li.is-new > .i {
  color: var(--accent);
}
.talk-scene.is-narrow .talk-saved {
  width: 400px;
  margin-left: -200px;
}

/* ---------- Meetings: the call, the pill, the notes ---------- */
.mt-scene .win {
  top: 28px;
  left: 40px;
  width: 540px;
  height: 464px;
}
.mt-pill {
  position: absolute;
  top: 28px;
  left: 600px;
  z-index: 4;
  width: 400px;
}
.mt-scene .pill-card {
  transform-origin: right top;
  box-shadow: var(--mp-inner), 0 36px 60px -30px rgba(13, 24, 28, 0.6);
}
.mt-scene .pill-transcript {
  height: 416px;
}
.mt-scene[data-chapter="3"] .pill-transcript {
  height: 230px;
}
.mt-scene.is-narrow .win {
  top: 20px;
  left: 20px;
  width: 400px;
  height: 468px;
}
.mt-scene.is-narrow .mt-pill {
  top: 506px;
  left: 20px;
}
.mt-scene.is-narrow .pill-transcript {
  height: 290px;
}
.mt-scene.is-narrow[data-chapter="3"] .pill-transcript {
  height: 136px;
}
.mt-call .win-body {
  position: relative;
}
.mt-doc {
  animation: block-in 420ms var(--ease) both;
}
.mt-call .win-body {
  padding: 0;
  background: #16191b;
}
.call-grid {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  transition: opacity 400ms ease, filter 400ms ease;
}
.call-tile {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 26%, #202326), #1a1d1f 70%);
  transition: box-shadow 220ms ease;
}
.call-tile[data-speaking="true"] {
  box-shadow: inset 0 0 0 2px var(--c);
}
.call-tile .av {
  width: 56px;
  height: 56px;
  color: #131618;
  font-size: 20px;
}
.call-name {
  position: absolute;
  bottom: 8px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #e8eeee;
  font-size: 11.5px;
  font-weight: 500;
}
.call-share {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  border-radius: 10px;
  background: #f4f5f5;
  color: var(--ink);
}
.call-share b {
  font-size: 14px;
  font-weight: 650;
}
.call-share i {
  height: 7px;
  border-radius: 4px;
  background: #e1e3e4;
}
.call-controls {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px 12px;
}
.call-ctl {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #dfe6e6;
}
.call-ctl .i {
  width: 16px;
  height: 16px;
}
.call-leave {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.call-ended {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: fit-content;
  height: fit-content;
  margin: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  animation: block-in 360ms var(--ease) both;
}
.mt-call.is-ended .call-grid {
  opacity: 0.35;
  filter: grayscale(0.7);
}

/* The notes: a document, not a dashboard. */
.mt-doc .win-body {
  padding: 22px 26px;
  overflow: hidden;
}
.doc-title {
  color: var(--ink);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.doc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.av-stack {
  display: flex;
}
.av-stack .av {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid #fff;
  font-size: 10px;
}
.av-stack .av:first-child {
  margin-left: 0;
}
.doc-sec {
  margin-top: 20px;
  animation: block-in 440ms var(--ease) both;
}
.doc-sec .doc-h {
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
.doc-steps {
  margin-top: 4px;
}
.doc-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 14px;
  animation: block-in 400ms var(--ease) both;
}
.doc-steps li:last-child {
  border-bottom: 0;
}
.doc-check {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 5px;
}
.owner {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-left: auto;
  padding: 0 10px 0 7px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--body);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.owner i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.doc-writing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 13.5px;
}
.doc-writing .i {
  width: 15px;
  height: 15px;
  color: var(--accent);
  animation: call-spin 1.4s linear infinite;
}
.doc-skel {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}
.doc-skel i {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-strong) 0%, #f7f8f8 50%, var(--surface-strong) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* ---------- Cleanup: what you said, what it typed ---------- */
.clean-before {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 400px;
  min-height: 222px;
  padding: 16px 20px;
  border: 1px dashed rgba(19, 22, 24, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}
.clean-label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}
.clean-label .i {
  width: 14px;
  height: 14px;
}
.clean-label .audio-waveform {
  width: 23px;
}
.clean-label .audio-waveform .wave-base {
  stop-color: #7d898c;
}
.clean-label .audio-waveform .wave-tip {
  stop-color: #a9b3b5;
}
.clean-raw {
  margin-top: 14px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.75;
}
.clean-raw .w {
  opacity: 0;
  transition: opacity 180ms ease;
}
.clean-raw .w.on {
  opacity: 1;
}
.clean-raw .cut {
  background-image: linear-gradient(var(--danger), var(--danger));
  background-position: 0 58%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 380ms var(--ease), color 380ms ease;
}
.clean-raw .cut.is-cut {
  background-size: 100% 2px;
  color: var(--faint);
}
.clean-arrow {
  position: absolute;
  top: 151px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(13, 24, 28, 0.7);
}
.clean-arrow .i {
  width: 20px;
  height: 20px;
}
.clean-arrow.is-on {
  animation: arrow-glow 1.3s var(--ease-out);
}
@keyframes arrow-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.45), 0 14px 30px -14px rgba(19, 22, 24, 0.7);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(20, 184, 166, 0), 0 14px 30px -14px rgba(19, 22, 24, 0.7);
  }
}
.clean-scene .win {
  top: 40px;
  left: 560px;
  width: 400px;
  height: 222px;
}
.clean-scene.is-narrow .clean-before {
  top: 20px;
  left: 20px;
  min-height: 200px;
}
.clean-scene.is-narrow .clean-arrow {
  top: 262px;
}
.clean-scene.is-narrow .win {
  top: 300px;
  left: 20px;
  height: 230px;
}

/* =====================================================================
   Private by default: two cards, side by side. What runs on your computer
   is a white card lit the way the hero's field is lit while it listens,
   each model on its tile with its name. The cloud is a dashed card beside
   it, its providers in quiet grey, because they stay off until you add a
   key. Nothing moves.
   ===================================================================== */
.zones {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  max-width: var(--showcase);
  margin-inline: auto;
}
.zone {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 0.75rem + 1.6vw, 2rem);
  border-radius: 28px;
}
.zone-local {
  background: radial-gradient(70% 60% at 50% 110%, rgba(20, 184, 166, 0.09), transparent 70%), var(--surface);
  box-shadow: 0 0 0 1.5px rgba(20, 184, 166, 0.5), 0 0 0 7px rgba(20, 184, 166, 0.07),
    0 1px 2px rgba(19, 22, 24, 0.05), 0 30px 50px -30px rgba(19, 22, 24, 0.4);
}
.zone-cloud {
  border: 1px dashed rgba(19, 22, 24, 0.2);
}
.zone-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.zone-app,
.zone-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 22.5%;
}
.zone-app {
  box-shadow: var(--tile-shadow);
}
.zone-icon {
  display: grid;
  place-items: center;
  background: rgba(19, 22, 24, 0.05);
  color: var(--muted);
}
.zone-icon .i {
  width: 20px;
  height: 20px;
}
.zone-label {
  min-width: 0;
}
.zone-title {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.zone-note {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.zone-tag {
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(11, 122, 109, 0.1);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}
.zone-models {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.375rem 0.75rem;
}
.zone-models li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.zone-models .tile {
  width: 52px;
  height: 52px;
}
.zone-name {
  max-width: 100%;
  color: var(--body);
  font-size: 0.8125rem;
  font-weight: 560;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
/* The cloud: every mark in one quiet grey, on a white tile. */
.zone-marks {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: center;
  justify-items: center;
  gap: 0.75rem 0.5rem;
}
.zone-marks .tile {
  width: min(40px, 100%);
  height: auto;
  aspect-ratio: 1;
  background: var(--surface);
  color: #7c8186;
  box-shadow: inset 0 0 0 1px rgba(19, 22, 24, 0.08), 0 1px 2px rgba(19, 22, 24, 0.04);
  filter: grayscale(1);
}

/* ---------- FAQ: the questions beside a heading that stays put ---------- */
.faq .wrap {
  display: grid;
  gap: 0 clamp(3rem, 6vw, 6rem);
}
.faq-list {
  border-top: 1px solid var(--hairline-strong);
}
.faq-item {
  border-bottom: 1px solid var(--hairline-strong);
}
.faq-item h3 {
  font-size: inherit;
  font-weight: inherit;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 640;
  font-stretch: 102%;
  line-height: 1.35;
  letter-spacing: -0.008em;
  text-align: left;
}
.faq-q .i {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--muted);
  transition: transform 260ms var(--ease), color 160ms ease;
}
.faq-q:hover .i {
  color: var(--ink);
}
.faq-q[aria-expanded="true"] .i {
  transform: rotate(45deg);
  color: var(--accent);
}
/* Answers open on a grid row, so nothing animates height directly. Without
   JS every answer stays open. */
.faq-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--ease);
}
.js .faq-a {
  grid-template-rows: 0fr;
}
.js .faq-item:has(.faq-q[aria-expanded="true"]) .faq-a {
  grid-template-rows: 1fr;
}
.faq-a p {
  min-height: 0;
  max-width: 64ch;
  overflow: hidden;
  padding: 0 0.25rem;
  color: var(--body);
  line-height: 1.65;
}
.faq-a p::after {
  content: "";
  display: block;
  height: 1.375rem;
}

/* ---------- Final: the line is dictated ----------
   A graphite panel. As it comes into view the app's pill listens and the
   headline is typed into it word by word, a teal caret after it; then the
   download. heroes.js plays it; without it the line simply stands. */
.final {
  padding-top: var(--section-gap);
}
.final-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(4.5rem, 3rem + 6vw, 9rem) clamp(1.25rem, 4vw, 4rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  text-align: center;
  background: radial-gradient(60% 75% at 50% 118%, rgba(20, 184, 166, 0.34), transparent 70%),
    radial-gradient(45% 55% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 70%), #131618;
}
.final-pill {
  --ov-surface: rgba(32, 34, 37, 0.98);
  --ov-edge: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  scale: 1.35;
}
.final-pill .overlay-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 30px -16px rgba(0, 0, 0, 0.7);
}
.final-title {
  max-width: 12ch;
  color: var(--ink);
  font-size: clamp(2.75rem, 0.9rem + 5.4vw, 6.25rem);
  font-weight: 700;
  font-stretch: 100%;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.js .final-title .fw {
  opacity: 0;
}
.js .final-title .fw.is-said {
  opacity: 1;
  animation: cw-in 520ms var(--ease) both;
}
.final-title .fw {
  display: inline-block;
}
/* The caret takes no width, so nothing reflows as it moves. */
.final-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.8em;
  margin-right: -0.06em;
  vertical-align: -0.04em;
  border-radius: 2px;
  background: var(--voice);
  animation: ob-caret 1s step-end infinite;
}
.final-cta {
  justify-content: center;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.final-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
.final-note a {
  color: var(--body);
}
.final-note a:hover {
  color: var(--ink);
}

/* ---------- Footer: on the same stock, under a hairline ---------- */
.site-footer {
  --wordmark-flow: #0e9e8c;
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--hairline);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2.5rem;
}
.footer-brand {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
}
.footer-mark:hover {
  color: var(--ink);
}
.footer-mark img {
  width: 32px;
  height: 32px;
  border-radius: 22.5%;
}
.footer-mark .wordmark {
  width: 118px;
  height: 20px;
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.footer-badge {
  justify-self: start;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.footer-links > div {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}
.footer-h {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
.footer-links a {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-bottom a {
  color: var(--body);
}

/* ---------- Scroll reveal: visible by default, moves only once JS runs ---------- */
.motion-ready .rv {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 900ms var(--ease), translate 900ms var(--ease);
}
.motion-ready .rv.is-in {
  opacity: 1;
  translate: none;
}
.motion-ready .showcase.rv {
  transition-delay: 80ms;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (min-width: 1800px) {
  :root {
    --showcase: 1240px;
    --panel: 1360px;
  }
}
@media (min-width: 1024px) {
  .faq .wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
  .faq .section-head {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
  }
}
@media (max-width: 1023px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .nav-toggle {
    display: block;
  }
  .nav-github span {
    display: none;
  }
  .nav {
    padding: 0 0.375rem 0 0.875rem;
  }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 0 0 1px rgba(19, 22, 24, 0.06), 0 24px 44px -24px rgba(19, 22, 24, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 220ms var(--ease), visibility 0s linear 220ms;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 220ms var(--ease);
  }
  .nav-links a {
    height: 2.75rem;
    font-size: 1rem;
  }
  .site-header.nav-hidden {
    transform: translateY(calc(-100% - 1rem));
  }
}
/* Short laptop screens: the hero scales with the height too, so the
   apps stay inside the first screen. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero-light {
    --tile-size: 52px;
  }
  .light-top {
    padding-top: clamp(1.5rem, 7vh, 4rem);
  }
  .light-title {
    font-size: min(clamp(3rem, 0.8rem + 5.9vw, 6.25rem), 11.5vh);
  }
  .light-sub {
    margin-top: 1.125rem;
  }
  .light-top .cta {
    margin-top: 1.75rem;
  }
}
@media (max-width: 860px) {
  .hero-light {
    --tile-size: 54px;
  }
  .talk-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Short laptop screens: the Orbit stage keeps its height by trimming the gap above. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero-orbit .light-top {
    padding-top: clamp(1.25rem, 4vh, 2.5rem);
  }
  .hero-orbit {
    --tile-size: 52px;
  }
}
@media (max-width: 760px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .tab-title .i {
    display: none;
  }
  .tab {
    padding: 0 0.875rem;
  }
  .section.is-panel .wrap,
  .final .wrap {
    padding-inline: 0.625rem;
  }
  .panel > .section-head,
  .panel > .showcase > .tabs {
    margin-inline: 0.375rem;
  }
  /* The demo runs to the panel's edges on a phone. */
  .panel .stage {
    margin-inline: calc(-1 * clamp(1.25rem, 0.25rem + 3.5vw, 4rem));
  }
  .zones {
    grid-template-columns: minmax(0, 1fr);
  }
  .zone-models .tile {
    width: 46px;
    height: 46px;
  }
}
@media (max-width: 640px) {
  .hero .cta {
    width: 100%;
  }
  .hero .cta .btn {
    flex: 1 1 100%;
  }
  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .hero-light {
    --tile-size: 44px;
  }
  .light-top {
    padding-top: 2.75rem;
  }
  .light-sub {
    max-width: 22rem;
    margin-top: 1.125rem;
  }
  .light-top .cta {
    margin-top: 1.75rem;
  }
  .hero-orbit {
    --tile-size: 42px;
  }
  .orbit-stage {
    min-height: 22rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .orbit-card {
    gap: 10px;
    width: min(18.5rem, 78vw);
    height: 80px;
    padding: 0 10px 0 12px;
    border-radius: 18px;
  }
  .orbit-card > .app {
    --tile: 36px;
    border-radius: 10px;
  }
  .orbit-card-text {
    font-size: 0.9375rem;
  }
  .orbit-card-where {
    font-size: 0.75rem;
  }
  .orbit-pill {
    scale: 0.9;
  }
  .platforms {
    padding-left: 0;
    border-left: 0;
  }
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  /* The capsule keeps the mark, the download and the menu; GitHub is in the hero. */
  .nav-github {
    display: none;
  }
}
/* =====================================================================
   A demo that has left the screen holds still until it is back.
   ===================================================================== */
[data-paused="true"] *,
[data-paused="true"] *::before,
[data-paused="true"] *::after {
  animation-play-state: paused !important;
}
/* =====================================================================
   Reduced motion: demos hold one frame, nothing drifts or loops.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .voice-orb-flow,
  .pill-dot,
  .pill-dots span,
  .ob-caret,
  .call-spin,
  .doc-skel i {
    animation: none !important;
  }
  .motion-ready .rv {
    opacity: 1;
    translate: none;
  }
}