/* Instrument Sans, self-hosted.
 *
 * Served from our own origin rather than Google's CDN on purpose. Loading
 * webfonts from fonts.gstatic.com sends every visitor's IP address to Google
 * before they have consented to anything, which a German court found unlawful
 * under GDPR in 2022 and which sits badly with a product whose whole claim is
 * that data stays where you put it.
 *
 * Variable font, 400 to 700, so the 450 and 550 weights the page uses are
 * real instances rather than synthetic. Unicode ranges match Google's own
 * subsetting, so a latin-only visitor never downloads the extended file.
 * Files: assets/fonts/. SIL Open Font License.
 */

/* latin-ext */
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-italic-latin-ext.woff2") format("woff2");
  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;
}

/* latin */
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-italic-latin.woff2") format("woff2");
  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;
}

/* latin-ext */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  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;
}

/* latin */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  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;
}

/* =========================================================================
   Tulpa landing, editorial redesign
   White editorial canvas, hairline rules with registration dots, tight
   grotesk display type, black pill buttons, italic microcopy, warm
   lifestyle photography. Self-contained: index.html loads only this file.
   ========================================================================= */

:root {
  --ink: #0f0e0c;
  --ink-soft: #5f5b55;
  --ink-faint: #726e69; /* ≥4.5:1 on both --paper and --paper-warm */
  --paper: #ffffff;
  --paper-warm: #faf9f7;
  --hairline: #e9e6e1;
  --hairline-strong: #dcd8d2;
  --dot: #c9c5be;
  --accent: #e8481f;
  --accent-soft: #f4622e;

  /* ── Brand ramps ───────────────────────────────────────────────────────
     Two families: terracotta (the primary, which the existing --accent sits
     inside) and violet (a secondary, for the governance and security story).
     Steps run 50 (palest) to 500 (fullest). NOTE: these were read off a
     reference image, so the intermediate steps are approximate; swap in the
     exact values from the source when they are to hand. */
  --terracotta-50: #f8e8e2;
  --terracotta-100: #f2ddd3;
  --terracotta-150: #ecd0c2;
  --terracotta-200: #e5c0ae;
  --terracotta-250: #ddb098;
  --terracotta-300: #d69f85;
  --terracotta-350: #cf8e72;
  --terracotta-400: #c87d5f;
  --terracotta-450: #c2694a;
  --terracotta-500: #bb5733;
  --terracotta-600: #b4481f;

  --violet-50: #e6dff1;
  --violet-100: #d9cff0;
  --violet-150: #cabdf0;
  --violet-200: #bcaaf0;
  --violet-250: #ae97f0;
  --violet-300: #a084f0;
  --violet-350: #9271f0;
  --violet-400: #845ef0;
  --violet-450: #764bf0;
  --violet-500: #6838f0;
  --violet-600: #5a25f0;

  /* Semantic aliases, so components never reach for a raw ramp step. */
  --wash-warm: var(--terracotta-50);
  --wash-cool: var(--violet-50);

  --font-sans: "Instrument Sans", -apple-system, "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 44px);
  --radius-card: 16px;
  --radius-media: 14px;
  --radius-panel: 20px;
  --radius-control: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Reveal curve. Gentler than --ease: it leaves immediately but spends most
     of its time easing out, so a long duration reads as settling rather than
     as a slow start. */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-chip: 0 1px 2px rgba(15, 14, 12, 0.08), 0 4px 14px rgba(15, 14, 12, 0.08);
}

/* ── Reset ────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* anchor targets clear the 64px sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

::selection {
  background: rgba(232, 72, 31, 0.16);
}

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

.visually-hidden {
  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;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
}

.skip-link:focus {
  left: 12px;
}

/* ── Layout primitives ────────────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hairline rule with registration dots at both ends, the page's signature
   print-grid detail, lifted from the reference layout. */
.rule {
  position: relative;
  height: 1px;
  background: var(--hairline);
}

.rule::before,
.rule::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot);
}

.rule::before {
  left: 0;
}

.rule::after {
  right: 0;
}

/* Rules that introduce a band of content, with room below. */
.rule-band {
  margin-bottom: clamp(36px, 5vw, 56px);
}

.rule-band-lg {
  margin-bottom: clamp(48px, 7vw, 88px);
}

/* Sections that follow a flush band and drop their top padding. */
section.tight {
  padding-top: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.btn-dark {
  background: var(--ink);
  color: #fff;
}

.btn-dark:hover {
  background: #33302b;
}

.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.btn-ghost:hover {
  border-color: var(--ink-faint);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--hairline);
}

/* Three-column grid keeps the nav truly centered in the bar. */
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: radial-gradient(120% 120% at 25% 20%, var(--accent-soft), var(--accent) 58%, #b53312);
  color: #fff;
}

.brand-mark svg {
  width: 19px;
  height: 19px;
}

.nav-links {
  display: flex;
  gap: 4px;
  justify-self: center;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--paper-warm);
}

.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hamburger — hidden until the mobile breakpoint. */
.nav-toggle {
  display: none;
  justify-self: end;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
}

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.nav-toggle-bars i {
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 6px var(--gutter) 22px;
  border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-menu > a:not(.btn) {
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}

.mobile-menu .btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.mobile-menu .btn:first-of-type {
  margin-top: 18px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(48px, 8vw, 108px) 0 clamp(40px, 6vw, 72px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7.8fr) minmax(0, 4.2fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}

.hero h1 {
  font-size: clamp(2.5rem, 4.7vw, 4.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-side {
  padding-top: clamp(4px, 1vw, 14px);
  max-width: 46ch;
}

.hero-side p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vw, 40px);
}

.hero-proof {
  margin-top: 16px;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-faint);
}

.hero-proof .sep {
  margin-inline: 7px;
  font-style: normal;
}

/* ── Photo carousel ───────────────────────────────────────────────────── */

.carousel {
  position: relative;
  padding: 0;
}

.car-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding: 20px var(--gutter) 38px;
  scrollbar-width: none;
}

.car-track::-webkit-scrollbar {
  display: none;
}

.car-track {
  cursor: grab;
}

.car-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* Snap has to be off while the rewind writes scrollLeft every frame. Left on,
   the snap engine pulls back to the nearest card against each write, which is
   what used to swallow a smooth scroll across the whole strip. */
.car-track.is-wrapping {
  scroll-snap-type: none;
}

.car-track.is-dragging img {
  pointer-events: none;
}

.car-card {
  position: relative;
  flex: 0 0 auto;
  height: clamp(360px, 42vw, 520px);
  border-radius: var(--radius-media);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--paper-warm);
}

.car-card.portrait {
  aspect-ratio: 3 / 4;
}

.car-card.landscape {
  aspect-ratio : 16 / 11;
}

.car-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.car-card:hover img {
  transform: scale(1.03);
}

/* Scrim strong enough that the white label holds 4.5:1 even over the
   brightest photos in the set. */
.car-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 7, 6, 0.9),
    rgba(8, 7, 6, 0.7) 18%,
    rgba(8, 7, 6, 0) 52%
  );
  pointer-events: none;
}

.car-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 1;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.car-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.car-chip svg {
  width: 15px;
  height: 15px;
  color: var(--violet-500);
}

/* Alternate the chip hue down the strip so neither colour dominates. */
.car-card:nth-child(odd) .car-chip svg {
  color: var(--accent);
}

.car-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-chip);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.car-arrow:hover {
  transform: translateY(-50%) scale(1.05);
  border-color: var(--ink-faint);
}

/* Left arrow appears only once the strip has moved off its start. */
.car-arrow.prev {
  right: auto;
  left: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.car-arrow.prev.is-on {
  opacity: 1;
  pointer-events: auto;
}

.car-arrow svg {
  width: 16px;
  height: 16px;
}

/* ── Carousel mini-UI vignettes ───────────────────────────────────────── */

.car-ui {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  /* Never wider than the card it sits on. The fixed widths below are ideal
     sizes, not guarantees: a narrow card would otherwise clip them. */
  max-width: calc(100% - 24px);
}

/* Shared white-glass panel */
.ui-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(10, 9, 8, 0.25);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.ui-glass svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--violet-500);
}

.car-card:nth-child(odd) .ui-glass svg {
  color: var(--accent);
}

/* Icon wrapped as a soft button inside the glass panel. The panel's own left
   padding drops so the button, not the icon, sets the optical inset. */
.ui-glass .ui-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  background: var(--ink);
}

/* Dark wrapper, so the icon inverts out of the hue alternation above. */
.car-card .ui-glass .ui-btn svg {
  color: #fff;
}

.ui-glass:has(.ui-btn) {
  gap: 7px;
  padding-left: 6px;
}

/* 2 · Any app, cycling stack of app input bars */
.ui-apps {
  width: 236px;
  max-width: 100%;
  height: 36px;
}

.ui-apps .bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(10, 9, 8, 0.22);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: appcycle 6s infinite;
}

.ui-apps .bar:nth-child(1) {
  opacity: 1;
}

.ui-apps .bar:nth-child(2) {
  animation-delay: -2s;
}

.ui-apps .bar:nth-child(3) {
  animation-delay: -4s;
}

.ui-apps .bar svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--accent);
}

/* The terminal bar is the one carrying a monospace command, so tint its
   icon violet and let the other two apps keep the vermillion. */
.ui-apps .bar:has(.mono) svg {
  color: var(--violet-500);
}

.ui-apps .bar .mono {
  font-family: var(--font-mono);
  font-size: 11px;
}

@keyframes appcycle {
  0%,
  28% {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
  }
  33%,
  61% {
    opacity: 0.45;
    transform: translateY(-9px) scale(0.94);
    z-index: 1;
  }
  66%,
  94% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    z-index: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
  }
}

/* 3 · Private by default, on-device vs cloud toggle */
.ui-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(10, 9, 8, 0.25);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

/* Direct children only: the selected side now nests a recording dot, and the
   segment padding below would otherwise inflate it into a 24px blob. */
.ui-toggle > span {
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink-faint);
}

.ui-toggle .on {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: #fff;
}

/* Smaller than the pill on the recording card: the same 7px dot swamps a
   12px label. Keeps the pulse, so it still reads as live rather than a bullet. */
.ui-toggle .on .rec-dot {
  width: 6px;
  height: 6px;
}

/* 5 · No meter, endlessly scrolling transcript */
.ui-marquee {
  width: 224px;
  max-width: 100%;
  padding: 9px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(10, 9, 8, 0.25);
  overflow: hidden;
}

/* The fade masks only the scrolling text, the panel keeps its background. */
.ui-marquee .window {
  display: block;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ui-marquee .reel {
  display: inline-flex;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink-soft);
  animation: reel 16s linear infinite;
}

.ui-marquee .reel span {
  padding-right: 28px;
}

@keyframes reel {
  to {
    transform: translateX(-50%);
  }
}

/* 6 · Languages, cycling language selector */
.ui-lang .cycle {
  position: relative;
  width: 62px;
  height: 15px;
}

.ui-lang .cycle span {
  position: absolute;
  inset: 0;
  opacity: 0;
  font-weight: 550;
  animation: langcycle 8s infinite;
}

.ui-lang .cycle span:nth-child(1) {
  opacity: 1;
}

.ui-lang .cycle span:nth-child(2) {
  animation-delay: -6s;
}

.ui-lang .cycle span:nth-child(3) {
  animation-delay: -4s;
}

.ui-lang .cycle span:nth-child(4) {
  animation-delay: -2s;
}

.ui-lang .chev {
  color: var(--ink-faint);
}

@keyframes langcycle {
  0%,
  22% {
    opacity: 1;
    transform: none;
  }
  27%,
  95% {
    opacity: 0;
    transform: translateY(-6px);
  }
  96% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* 7 · Fast or thorough, alternating target */
.ui-race {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(10, 9, 8, 0.25);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.ui-race span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink-faint);
}

.ui-race span svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.ui-race span:first-child {
  background: var(--ink);
  color: #fff;
  animation: race-a 5s infinite;
}

.ui-race span:last-child {
  animation: race-b 5s infinite;
}

@keyframes race-a {
  0%,
  44% {
    background-color: var(--ink);
    color: #fff;
  }
  50%,
  94% {
    background-color: transparent;
    color: var(--ink-faint);
  }
  100% {
    background-color: var(--ink);
    color: #fff;
  }
}

@keyframes race-b {
  0%,
  44% {
    background-color: transparent;
    color: var(--ink-faint);
  }
  50%,
  94% {
    background-color: var(--ink);
    color: #fff;
  }
  100% {
    background-color: transparent;
    color: var(--ink-faint);
  }
}

/* ── Logo strip ───────────────────────────────────────────────────────── */

.strip {
  padding: clamp(26px, 4vw, 44px) 0;
}

.strip-label {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-bottom: 22px;
}

.strip-label sup a {
  color: inherit;
  text-decoration: none;
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(28px, 4.5vw, 60px);
  row-gap: 16px;
}

.logo-row .item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-faint);
}

.logo-row svg {
  width: 17px;
  height: 17px;
}

/* ── Section scaffolding ──────────────────────────────────────────────── */

section {
  padding: clamp(56px, 8vw, 112px) 0;
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
  gap: clamp(20px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 60px);
}

.sec-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.15rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.sec-head .side {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 44ch;
  padding-bottom: 4px;
}

.sec-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.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;
}

/* ── Demo stage (say → lands) ─────────────────────────────────────────── */

.stage-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.8fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
}

/* The photo itself is darkened, contrast-boosted, and softly blurred, so the
   backdrop reads rich and moody like the carousel, with no flat color veil on
   top. The scale hides the blur's transparent edges. */
.stage-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  padding: clamp(22px, 3.2vw, 42px);
}

.stage-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/photos/stage-bg.webp") center 55% / cover no-repeat;
  filter: brightness(0.66) contrast(1.06) saturate(1.08) blur(3px);
  transform: scale(1.08);
}

.stage-pane .demo-sentence {
  min-height: 3.1em;
}

.stage-pane.out {
  max-height: 0;
  margin-top: 0;
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
  border-color: transparent;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.35s var(--ease), transform 0.45s var(--ease), border-color 0.35s var(--ease);
}

.stage.is-cleaned .stage-pane.out {
  max-height: 240px;
  margin-top: -64px;
  padding-block: clamp(18px, 2.4vw, 26px);
  border-color: var(--hairline);
  opacity: 1;
  transform: translateY(0);
}

.stage.is-playing .demo-static {
  display: none;
}

.stage.is-playing .demo-live::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: var(--accent);
  animation: caret 1.05s steps(1) infinite;
}

.stage.is-playing:not(.is-cleaned) .stage-pane .demo-live .cut {
  color: inherit;
  text-decoration: none;
}

.stage.is-cleaned .stage-pane:not(.out) .demo-live .cut {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(15, 14, 12, 0.28);
  text-decoration-thickness: 1px;
}

.stage-pane {
  position: relative;
  width: 100%;
  background: #f4f2ef;
  border: 1px solid var(--hairline);
  border-radius: 22px 22px 22px 7px;
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 12px 32px rgba(15, 14, 12, 0.12);
  transition: max-height 0.45s var(--ease), margin 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.35s var(--ease), transform 0.45s var(--ease), border-color 0.35s var(--ease);
}

.stage-pane:not(.out) {
  align-self: flex-start;
  width: 92%;
  margin-left: 3%;
  z-index: 1;
}

.stage-pane.out {
  align-self: stretch;
  width: 100%;
  margin-right: 0;
  border-radius: 22px 22px 7px 22px;
  background: #fff;
  z-index: 2;
}

.stage-pane::after {
  content: "";
  position: absolute;
  bottom: 14px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}

.stage-pane:not(.out)::after {
  left: -6px;
  border-left: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0 0 0 3px;
}

.stage-pane.out::after {
  right: -6px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0 0 3px 0;
}

.stage-pane.is-replayable {
  cursor: pointer;
}

.stage-pane.is-replayable:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.stage.is-cleaned .stage-pane:not(.out) {
  opacity: 0.84;
}

.stage-pane .pane-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.stage-pane .pane-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.stage-pane.out .pane-label .dot {
  background: var(--accent);
}

.stage-pane p {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.stage-pane .cut {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(15, 14, 12, 0.28);
  text-decoration-thickness: 1px;
}

.stage-foot {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 16px auto 0;
  padding-block: 2px;
}

/* Live recording pill, replica of the app's on-screen dictation overlay */
.rec-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 226px;
  max-width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 60px rgba(15, 14, 12, 0.16), 0 4px 16px rgba(15, 14, 12, 0.1);
  transition: box-shadow 0.3s var(--ease);
}

.rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: none;
}

.stage.is-listening .rec-dot {
  animation: rec-dot-pulse 1.9s infinite;
}

@keyframes rec-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 72, 31, 0.18);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
}

.rec-wave {
  width: 100%;
  height: 24px;
  overflow: hidden;
}

.rec-wave .rec-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.rec-timer {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
}

.stage-styles {
  align-self: center;
  min-width: 0;
  margin: 0;
}

.stage-styles-head {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
  color: var(--ink);
}

.stage-styles-head .sec-kicker {
  margin: 0 0 6px;
  color: var(--ink-faint);
  font-size: 12px;
}

.stage-styles-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.stage-styles .style-grid {
  grid-template-columns: 1fr;
  gap: 9px;
}

.stage-styles .style-card {
  min-width: 0;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(15, 14, 12, 0.045), 0 8px 18px rgba(15, 14, 12, 0.07);
  opacity: 0.62;
  filter: saturate(0.55);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease), opacity 0.22s var(--ease), filter 0.22s var(--ease);
}

.stage-styles .style-card.is-selected {
  opacity: 1;
  filter: none;
}

.stage-styles .style-card:hover {
  transform: translateY(-2px);
}

.stage-styles .style-card:not(.is-selected):hover {
  opacity: 0.82;
  filter: saturate(0.8);
}

.stage-styles .style-card:focus-visible {
  opacity: 1;
  filter: none;
}

.stage-styles .style-card-heading {
  gap: 8px;
}

.stage-styles .style-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.stage-styles .style-icon svg {
  width: 17px;
  height: 17px;
}

.stage-styles .style-name {
  font-size: 16px;
}

.stage-styles .style-desc {
  font-size: 12px;
  line-height: 1.4;
}

.stage-styles .style-usecase {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 14, 12, 0.055);
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1;
}

.demo-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: caret 1.05s steps(1) infinite;
}

/* Sized to the caps of the big hero headline rather than its full line box. */
.hero h1 .demo-caret {
  height: 0.74em;
  margin-left: 8px;
  vertical-align: -0.02em;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* ── Strip note ───────────────────────────────────────────────────────── */

.strip-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-top: 22px;
}

/* ── Cleanup styles and builder points ────────────────────────────────── */

.style-playground {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: stretch;
  gap: 14px;
}

.style-options {
  display: flex;
  min-width: 0;
}

.style-preview {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.style-source {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-media);
  padding: clamp(18px, 2vw, 24px);
  background: var(--paper);
  box-shadow: 0 5px 0 rgba(15, 14, 12, 0.035), 0 14px 32px rgba(15, 14, 12, 0.055);
}

.style-source .pane-label {
  margin-bottom: 10px;
}

.style-sentence {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
}

.style-source .style-live::after,
.style-app-entry-copy.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: var(--accent);
  animation: caret 1.05s steps(1) infinite;
}

.style-playground.is-live .style-static,
.style-playground.is-live .style-result-static {
  display: none;
}

.style-app {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 270px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-media);
  background: #f7f8fa;
  box-shadow: 0 5px 0 rgba(15, 14, 12, 0.035), 0 14px 32px rgba(15, 14, 12, 0.055);
}

.style-app-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid #e7e8eb;
  background: #fff;
}

.style-app-lights {
  display: flex;
  gap: 5px;
}

.style-app-lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7d8dc;
}

.style-app-lights i:first-child { background: #ff5f57; }
.style-app-lights i:nth-child(2) { background: #febc2e; }
.style-app-lights i:last-child { background: #28c840; }

.style-app-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 550;
}

.style-app-icon {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: white;
  font-weight: 650;
}

.style-app-icon.is-professional { background: #536da7; }
.style-app-icon.is-technical { background: #467659; }
.style-app-icon.is-agentic { background: #7655b5; }

.style-app-menu {
  margin-left: auto;
  color: var(--ink-faint);
  letter-spacing: 2px;
}

.style-app-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 3vw, 38px);
}

.style-app-context {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
}

.style-app-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e5e8f0;
  color: #575f73;
  font-size: 13px;
  font-weight: 600;
}

.style-app-context strong,
.style-app-context small {
  display: block;
}

.style-app-context strong {
  font-size: 13px;
  font-weight: 550;
}

.style-app-context small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 12px;
}

.style-app-entry {
  min-height: 5.5em;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid #e2e4e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(24, 30, 45, 0.035);
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
}

.style-app-toolbar {
  display: flex;
  align-items: center;
  margin-top: 13px;
  color: var(--ink-faint);
  font-size: 13px;
}

.style-app-send {
  display: grid;
  width: 30px;
  height: 30px;
  margin-left: auto;
  place-items: center;
  border-radius: 8px;
  background: #dfe5f3;
  color: #59647e;
  font-size: 19px;
}

[data-style-app-name],
[data-style-app-context],
[data-style-app-subcontext] {
  transition: opacity 0.18s var(--ease);
}

.style-app-name.is-changing,
.style-app-context [data-style-app-context].is-changing,
.style-app-context [data-style-app-subcontext].is-changing {
  opacity: 0.35;
}

.style-app-context .style-app-subcontext {
  display: block;
}

.style-app-context > span:last-child {
  min-width: 0;
}

.style-app-context [data-style-app-subcontext] {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 12px;
}

.style-source .pane-label,
.style-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
}

.style-source .pane-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1;
  width: 100%;
  align-content: stretch;
  gap: 14px;
}

.style-card {
  appearance: none;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 4px 0 rgba(15, 14, 12, 0.045), 0 12px 24px rgba(15, 14, 12, 0.055);
  transform: translateY(0);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease);
}

.style-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.style-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #f2f3f5;
  color: #5f6675;
}

.style-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.style-icon.casual {
  background: #fff0eb;
  color: #d94c2c;
}

.style-icon.professional {
  background: #edf2ff;
  color: #536da7;
}

.style-icon.technical {
  background: #edf4ef;
  color: #467659;
}

.style-icon.agentic {
  background: #f2edff;
  color: #7655b5;
}

.style-name {
  font-size: 16px;
}

.style-app-label {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #f1f2f5;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.3;
}

.style-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: 0 6px 0 rgba(15, 14, 12, 0.04), 0 18px 32px rgba(15, 14, 12, 0.09);
}

.style-card.is-selected {
  border-color: var(--accent);
  background: #fffaf8;
  box-shadow: 0 3px 0 rgba(232, 72, 31, 0.12), 0 12px 26px rgba(232, 72, 31, 0.1);
}

.style-card.is-selected:hover {
  box-shadow: 0 5px 0 rgba(232, 72, 31, 0.12), 0 18px 32px rgba(232, 72, 31, 0.13);
}

.style-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.style-name {
  color: var(--ink);
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.015em;
}

.style-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.agent-stage {
  margin-bottom: 14px;
}

.agent-term {
  background: #141311;
  color: #efece7;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-media);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.agent-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.agent-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.agent-term .mono {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
}

.agent-prompt {
  color: var(--accent-soft);
  margin-right: 6px;
}

/* ── Comparison table ─────────────────────────────────────────────────── */

.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
}

.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}

.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: 16px clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--hairline);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare thead th {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-faint);
}

.compare thead th sup a {
  color: inherit;
  text-decoration: none;
}

.compare tbody th {
  font-weight: 500;
  color: var(--ink);
  width: 26%;
}

.compare td {
  color: var(--ink-soft);
}

.compare .is-us {
  background: var(--paper-warm);
  color: var(--ink);
  font-weight: 500;
}

.compare thead .is-us {
  color: var(--accent);
}

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

  .stage-styles-head {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .style-grid {
    grid-template-columns: 1fr;
  }

  .stage-styles .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .stage-styles .style-card {
    padding: 12px;
  }

  .stage-styles .style-icon {
    width: 27px;
    height: 27px;
  }

  .stage-styles .style-name {
    font-size: 14px;
  }

  .stage-styles .style-desc {
    font-size: 11.5px;
  }

  .stage-styles .style-usecase {
    font-size: 9px;
  }
}

/* ── Feature grid ─────────────────────────────────────────────────────── */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(280px, auto);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.feature-story {
  padding-block: clamp(56px, 7vw, 92px);
}

.feature-story + .feature-story {
  border-top: 1px solid var(--hairline);
}

.feature-story .sec-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.feature-story .feat-card {
  min-height: 300px;
}

.feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 0%, #fdfbf8 100%);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 2px 6px rgba(15, 14, 12, 0.035), 0 14px 32px rgba(15, 14, 12, 0.035);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.feat-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: 0 5px 12px rgba(15, 14, 12, 0.045), 0 18px 36px rgba(15, 14, 12, 0.06);
}

.feat-card h3 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.015em;
}

.feat-card > p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.feat-card .grow {
  flex: 1;
}

.custom-words-demo { display: grid; gap: 7px; margin-top: auto; }
.word-group { display: grid; gap: 5px; }
.word-group-label { color: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; transition: color .25s ease; }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.word-chips > span { padding: 6px 9px; border: 1px solid var(--hairline); border-radius: 8px; background: rgba(255,255,255,.76); color: var(--ink-soft); font-size: 11px; line-height: 1.2; transition: color .25s ease, background .25s ease, border-color .25s ease, opacity .4s ease, transform .4s ease, filter .4s ease; }
.word-group.is-active .word-chips > span:not(.word-add-control) { border-color: rgba(232,72,31,.2); background: rgba(232,72,31,.07); color: #9e391e; }
.word-add-control { display: none; min-height: 0; cursor: default; color: var(--accent) !important; }
.word-group.is-active .word-add-control:not(.is-complete) { display: inline-flex; align-items: center; }
.word-group.is-editing .word-add-control { border-color: rgba(232,72,31,.3); background: rgba(232,72,31,.07); color: #9e391e; }
.word-group.is-clicking .word-add-control { transform: scale(.93); }
.word-group.is-editing .word-add-control::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.12em; background: var(--accent); animation: caret 1s steps(1) infinite; }
.word-pill-new { animation: word-commit .24s ease-out both; }
.word-pill-new.is-dissolving { animation: word-poof .55s ease forwards; }
@keyframes word-commit { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes word-poof { to { opacity: 0; filter: blur(5px); transform: translateY(-5px) scale(.7); } }

.feat-big {
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Unit sitting beside a big number. Smaller and lighter so the figure still
   carries the line, but on the same baseline rather than as a second line. */
.feat-unit {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.visualizer-gallery {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 2px 0 3px;
}

.visualizer-gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.visualizer-gallery-head span:first-child {
  color: var(--ink);
  font-size: 12px;
  font-weight: 550;
}

.visualizer-gallery-head span:last-child {
  color: var(--ink-faint);
  font-size: 10px;
  white-space: nowrap;
}

.visualizer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.visualizer-sample {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  gap: 2px;
  padding: 7px 8px 6px;
  border: 1px solid rgba(15, 14, 12, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.visualizer-sample svg {
  width: 100%;
  height: 23px;
  overflow: visible;
  color: var(--accent);
}

.visualizer-sample span {
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1;
}

.visualizer-sample.is-ribbon svg path,
.visualizer-sample.is-helix svg path {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visualizer-sample.is-ribbon svg path + path,
.visualizer-sample.is-helix svg path + path {
  stroke: var(--ink-soft);
  opacity: 0.65;
}

.visualizer-sample.is-ribbon svg path:nth-child(3) {
  opacity: 0.4;
}

.visualizer-sample.is-bars svg rect {
  fill: var(--accent);
}

.visualizer-sample.is-grid svg {
  color: var(--workflow-accent);
}

.visualizer-sample.is-grid svg circle:nth-child(3n) {
  color: var(--accent);
}

/* embedded mini-UIs */
.tile-apps .row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  font-size: 12px;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--hairline);
  transition: opacity 0.34s ease, transform 0.34s ease;
}

.tile-apps .row:last-child { border-bottom: 0; }
.tile-apps .mono { font-family: var(--font-mono); font-size: 11px; }
.tile-apps .app-kind {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  width: 92px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--paper-warm);
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1;
}
.tile-apps .app-kind svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-apps .app-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tile-apps .app-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-apps .app-copy.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: caret 1.05s steps(1) infinite;
}
.tile-apps.is-shifting .row:first-child { opacity: 0; transform: translateY(-12px); }
.tile-apps.is-shifting .row:nth-child(2),
.tile-apps.is-shifting .row:nth-child(3) { transform: translateY(-12px); }
.tile-apps .row.is-new { opacity: 0; transform: translateY(12px); }

.tile-langs .l {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: 13.5px;
  color: var(--ink-soft);
}

.tile-langs .l:last-child {
  border-bottom: 0;
}

/* The languages card: a big "hello" in the language of the lit row below.
   Only the word moves; the block keeps one line's height so the card never
   jumps as the words change length. */
.lang-hello {
  margin-bottom: 14px;
}

.lang-hello p {
  margin: 0 0 8px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.lang-hello-word {
  display: inline-block;
  transition:
    opacity 0.32s var(--ease-reveal),
    transform 0.32s var(--ease-reveal);
}

.lang-hello-word.is-leaving {
  opacity: 0;
  transform: translateY(-0.14em);
}

.lang-hello-word.is-entering {
  transition: none;
  opacity: 0;
  transform: translateY(0.14em);
}

.tile-langs .l {
  transition: color 0.3s ease, opacity 0.42s var(--ease), transform 0.42s var(--ease);
}

.tile-langs .l.is-active {
  color: var(--ink);
}

.tile-langs .lt {
  flex: none;
  width: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.tile-profiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tile-profiles .prof {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  padding: 12px 14px;
}

.tile-profiles .prof.sel {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.tile-profiles .prof-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tile-profiles .prof-name {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
}

.tile-profiles .prof-tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.tile-profiles .prof.sel .prof-tag {
  color: var(--accent);
}

.tile-profiles .prof-model {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}

.tile-profiles .prof-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tile-profiles .prof-list li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tile-profiles .prof-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.tile-profiles .prof:not(.sel) .prof-list li,
.tile-profiles .prof:not(.sel) .prof-model {
  color: var(--ink-faint);
}

.tile-modes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.78);
}

.mode-label { color: var(--ink-faint); font-size: 12px; font-weight: 550; transition: color 0.3s ease; }
.mode-label.is-active { color: var(--ink); }
.mode-switch { position: relative; flex: none; width: 44px; height: 25px; padding: 3px; border-radius: 99px; background: #e9e4de; transition: background 0.35s ease; }
.mode-switch i { display: block; width: 19px; height: 19px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 4px rgba(15, 14, 12, 0.18); transition: transform 0.35s var(--ease), background 0.35s ease; }
.tile-modes.is-api .mode-switch { background: var(--violet-500); }
.tile-modes.is-api .mode-switch i { transform: translateX(19px); }
.tile-modes.is-api [data-mode-label="api"] { color: var(--ink); }
.tile-modes.is-api [data-mode-label="local"] { color: var(--ink-faint); }

.tile-states { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.tile-states .state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--paper);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.state-symbol { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; background: rgba(15,14,12,.045); color: var(--ink-faint); font-size: 12px; }
.tile-states .state.is-on { border-color: rgba(232,72,31,.22); background: rgba(232,72,31,.035); }
.tile-states .state.is-on .state-symbol { background: rgba(232,72,31,.1); color: var(--accent); }
.state-toggle { display: grid; width: 30px; height: 17px; place-items: center start; margin-left: auto; padding: 2px; border-radius: 99px; background: #e5dfd9; transition: background 0.35s ease; }
.state-toggle i { display: block; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(15,14,12,.18); transition: transform 0.35s var(--ease); }
.state.is-on .state-toggle { background: var(--accent); }
.state.is-on .state-toggle i { transform: translateX(13px); }
.transcribing-status { display: flex; align-items: center; gap: 7px; padding: 5px 2px 0; color: var(--ink-soft); font-size: 11px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(232,72,31,.1); }
.status-wave { display: flex; align-items: center; gap: 2px; height: 14px; margin-left: auto; }
.status-wave i { width: 2px; height: 4px; border-radius: 2px; background: var(--accent); animation: status-wave .8s ease-in-out infinite alternate; }
.status-wave i:nth-child(2n) { animation-delay: -.3s; }
.status-wave i:nth-child(3n) { animation-delay: -.55s; }
@keyframes status-wave { to { height: 12px; opacity: .48; } }

/* "w∞rds" — the infinity glyph stands in for the double o, so the card's
   headline number reads as a word instead of a bare symbol. The mark is the
   Phosphor icon rather than the ∞ character so it matches the rest of the
   icon set and scales with the type. */
/* Both lines are one flex item, so the card's 10px column gap no longer
   splits them into two separate things. */
.word-stack {
  display: flex;
  flex-direction: column;
}

.word-infinity {
  display: inline-flex;
  align-items: center;
  gap: 0.02em;
  letter-spacing: -0.04em;
  /* Hold the row to the line height: the glyph is deliberately larger than
     the type, and without this its box would push the two lines apart. */
  height: 1em;
}

.word-infinity svg {
  color: var(--accent);
  /* Never let the glyph shrink: as a flex item it is otherwise allowed to
     collapse to nothing when the card is narrow, silently turning the word
     back into "wrds". */
  flex: none;
  width: 1.12em;
  height: 1.12em;
  margin: 0 -0.05em;
  /* Phosphor's icon box is centred on the em, but the surrounding letters sit
     on the baseline with their weight in the x-height, so the glyph has to
     drop to sit with them rather than float mid-line. */
  transform: translateY(0.11em);
}

/* ── Document pages (privacy, terms, support) ─────────────────────────────
   Utilitarian reading layout: one column at a comfortable measure, a clear
   heading hierarchy, and no decoration competing with the text. These are
   read, not scanned, so the craft goes into rhythm and legibility. */
.doc-main {
  padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px);
}

.doc-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.doc-head h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.doc-head .lede {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.doc-meta {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
}

.doc-body {
  max-width: 68ch;
}

.doc-body section + section {
  margin-top: clamp(30px, 4vw, 44px);
}

.doc-body h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.doc-body h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 20px 0 8px;
}

.doc-body p,
.doc-body li {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
}

.doc-body p + p {
  margin-top: 14px;
}

.doc-body strong {
  color: var(--ink);
  font-weight: 600;
}

.doc-body ul {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.doc-body li {
  position: relative;
  padding-left: 20px;
}

.doc-body li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet-400);
}

.doc-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong);
}

.doc-body a:hover {
  text-decoration-color: var(--accent);
}

/* A callout for the things that matter most on these pages: the plain-English
   summary of what actually happens to someone's data. */
/* Neutral ground on a hairline rather than the violet wash: the note is a
   status caveat, not a governance point, and violet is doing semantic work
   elsewhere on the site. */
.doc-note {
  margin: 18px 0;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper-warm);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.doc-note strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Support page: question cards. */
/* Numbered argument steps on the security page. Same card shape as the
   governance modes and the offline states, scaled up for a paragraph. */
.doc-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 46px;
}

.doc-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
}

.doc-step-idx {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--accent);
}

.doc-step:nth-child(even) .doc-step-idx {
  color: var(--violet-600);
}

.doc-step h2 {
  font-size: 16.5px;
  font-weight: 550;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.doc-step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.doc-step strong {
  font-weight: 550;
  color: var(--ink);
}

/* Buttons under the closing CTA sit in a row that wraps on narrow screens. */
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.faq-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: none;
}

.faq-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--paper);
}

.faq-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.faq-card h2 svg {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 7px;
  border-radius: 999px;
  background: var(--wash-cool);
  color: var(--violet-500);
}

/* Alternate down the grid so the page reads in both brand colours. */
.faq-card:nth-child(odd) h2 svg {
  background: var(--wash-warm);
  color: var(--accent);
}

.faq-card p,
.faq-card li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .faq-groups {
    grid-template-columns: 1fr;
  }
}

/* ── Governance rows ──────────────────────────────────────────────────── */

.gov-rows {
  border-top: 1px solid var(--hairline);
}

.gov-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3.4fr) minmax(0, 5.6fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--hairline);
}

.gov-row .idx {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
}

.gov-row h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.gov-row p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ── Audience duo ─────────────────────────────────────────────────────── */

/* Audience sections. Solo and teams each get a section of their own rather
   than sharing a two-up row: side by side, neither had room for more than a
   sentence, and the value props are the point. Media alternates sides
   between the two so the pair still reads as a pair. */
.aud-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.aud-split.is-flipped .aud-body {
  order: 2;
}

.aud-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--radius-media);
}

/* Same treatment as the carousel's corner chips, widened into a pill because
   this one carries a word rather than a glyph. */
/* The mark inside the chip. Circular rather than the header's rounded square,
   because it sits in a pill and a squircle inside a pill reads as a mistake.
   Vermillion for Solo, violet for Teams, matching the hue split the rest of
   the page already uses for individual versus governed. */
.chip-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 25% 20%, var(--accent-soft), var(--accent) 58%, #b53312);
  color: #fff;
}

.chip-mark svg {
  width: 11px;
  height: 11px;
}

/* Same gradient geometry as the vermillion mark, stepped down the violet ramp
   so the two badges read as one family in two hues rather than two designs. */
#for-teams .chip-mark {
  background: radial-gradient(
    120% 120% at 25% 20%,
    var(--violet-400),
    var(--violet-600) 58%,
    #4118b8
  );
}

.aud-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 6px 13px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.aud-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.aud-split:hover .aud-media img {
  transform: scale(1.03);
}

.aud-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.aud-body {
  --aud-h2: clamp(1.6rem, 2.8vw, 2.3rem);
}

.aud-body h2 {
  font-size: var(--aud-h2);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* Bubbles sit above the heading, which puts the heading back on the same
   left edge as the claims and price below it. Stacked, none of the row
   alignment applies: no cap-height offset, and no chance of the heading
   wrapping under the bubbles. */
.aud-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Bubbles and the tier name share a row above the heading, so the group reads
   as one badge rather than as a picture with a caption under it. */
.aud-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aud-tier {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.aud-props {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 6px;
  list-style: none;
}

/* Separated by a hairline above rather than by markers, so the list reads as
   a set of claims instead of as bullets. */
.aud-props li {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.aud-props li:first-child {
  padding-top: 0;
  border-top: 0;
}

.aud-props strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 550;
  color: var(--ink);
}

/* Price, action and trial terms as one block at the foot of each section,
   so the number sits with the case for paying it rather than in a separate
   card further down the page. */
.aud-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  align-self: stretch;
}

.aud-trial {
  font-size: 13px;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .aud-split,
  .aud-split.is-flipped {
    grid-template-columns: 1fr;
  }

  /* Media leads on a narrow screen: the flip only exists to alternate the
     two sections side by side, and stacked it just moves the picture below
     the button. */
  .aud-split .aud-media {
    order: -1;
  }

  .aud-split.is-flipped .aud-body {
    order: 0;
  }
}

/* Avatar bubbles rather than a glyph: one head for Solo, an overlapping row
   for Team. The tier is legible as a shape before it is read, and it says
   "seats" in a way a single figure cannot. */
.avatars {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.avatars .av {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--paper-warm);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}

/* The files are already cropped to the head at 76px, exactly twice the 38px
   they display at, so the bubble only has to clip them to a circle. */
.avatars .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlap, and let each bubble cut a notch out of the one behind it so the
   row reads as separate people rather than as one blurred shape. */
.avatars.is-stack .av + .av {
  margin-left: -13px;
  box-shadow: -2px 0 0 var(--paper);
}

/* The "+" is drawn rather than written: inside a heading, a literal glyph
   ends up in the element's text, so it read as "+Set it up once" to anything
   extracting copy even though aria-hidden keeps it from screen readers. */
.avatars .av-more::after {
  content: "+";
}

.avatars .av-more {
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 550;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--paper);
}

.aud-buy .amt {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1;
}

.aud-buy .amt .per {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  margin-left: 3px;
}

.aud-buy .price-coming-soon {
  display: inline-flex;
  align-items: center;
  margin-left: 11px;
  padding: 6px 9px;
  vertical-align: 0.38em;
  border: 1px solid var(--terracotta-150);
  border-radius: 999px;
  background: var(--terracotta-50);
  color: var(--terracotta-600);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq-wrap {
  max-width: 780px;
  margin-inline: auto;
}

.faq-wrap .sec-head {
  display: block;
}

.faqx {
  border-top: 1px solid var(--hairline);
}

.faqx details {
  border-bottom: 1px solid var(--hairline);
}

.faqx summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faqx summary::-webkit-details-marker {
  display: none;
}

.faqx summary:hover {
  color: var(--ink-soft);
}

.faqx summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-faint);
  transition: transform 0.25s var(--ease);
}

.faqx details[open] summary::after {
  transform: rotate(45deg);
}

.faqx .a {
  padding: 0 0 22px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── CTA band ─────────────────────────────────────────────────────────── */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: none;
  margin-inline: auto;
  padding: clamp(46px, 7vw, 88px) 24px;
  border: 1px solid rgba(232, 72, 31, 0.17);
  border-radius: 30px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 239, 230, 0.95), transparent 62%), linear-gradient(145deg, #fffdfa 0%, #f8f3ee 100%);
  box-shadow: 0 24px 72px rgba(75, 43, 25, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* On the home page a wrapping section spaces this; on a doc page the CTA is a
   bare sibling of the content above it, so it needs its own separation. */
.doc-main .cta {
  margin-top: clamp(52px, 7vw, 88px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--hairline);
}

.cta .sec-kicker {
  justify-content: center;
}

.cta h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.cta .cta-lede {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.cta > .btn {
  margin-top: 8px;
  padding: 14px 26px;
  box-shadow: 0 8px 20px rgba(15, 14, 12, 0.15);
}

.access-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 28px auto 0;
}

.access-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 20px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px; /* 16px+ avoids iOS Safari's focus auto-zoom */
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.access-form input::placeholder {
  color: var(--ink-faint);
}

.access-form input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15, 14, 12, 0.14);
}

.form-status {
  min-height: 22px;
  margin-top: 12px;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-faint);
}

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

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

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(40px, 6vw, 64px) 0 32px;
  background: var(--paper-warm);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
}

.footer-brand p {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.footer-col h3 {
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

.footer-col li + li {
  margin-top: 9px;
}

.footer-col a {
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--ink);
}

.footer-disclaimer {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.footer-disclaimer p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 88ch;
}

.footer-disclaimer .marker {
  color: var(--ink-soft);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-faint);
}

.footer-bottom span:last-child {
  font-style: italic;
}

/* ── Reveal-on-scroll ─────────────────────────────────────────────────── */

/* Duration and travel are both up from 0.7s/14px: a longer distance over a
   longer time is what makes the movement read as smooth rather than as a
   quick nudge. --reveal-i is set in main.js from the element's position
   among its siblings, so a row of cards cascades instead of arriving at
   once; it defaults to 0 so anything untouched simply reveals immediately. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease-reveal), transform 1.1s var(--ease-reveal);
  transition-delay: calc(var(--reveal-i, 0) * 0.08s);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

#focus-feature {
  padding-bottom: clamp(72px, 10vw, 132px);
}

.focus-feature-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.focus-feature-panel {
  --workflow-accent: var(--terracotta-600);
  --workflow-wash: #fbf4f0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
  min-height: 280px;
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #fffdfa 0%, #f8f3ee 100%);
  box-shadow: 0 4px 0 rgba(15, 14, 12, 0.025), 0 12px 28px rgba(15, 14, 12, 0.04);
}

.focus-feature-copy { max-width: 520px; }
.focus-feature-copy h3 { max-width: 470px; font-size: clamp(26px, 4vw, 42px); font-weight: 520; letter-spacing: -0.045em; line-height: 1.08; }
.focus-feature-copy p { max-width: 450px; margin-top: 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

.feature-new-stamp {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 9px;
  border: 1px solid rgba(232, 72, 31, 0.18);
  border-radius: 999px;
  background: rgba(232, 72, 31, 0.06);
  color: var(--terracotta-700);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.focus-feature-visual {
  display: flex;
  min-width: 0;
  min-height: 190px;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--workflow-accent) 15%, white);
  border-radius: 15px;
  background: var(--workflow-wash);
  box-shadow: 0 18px 38px rgba(45, 57, 83, 0.08);
}

.focus-feature-visual.is-updating [data-focus-app],
.focus-feature-visual.is-updating [data-focus-label],
.focus-feature-visual.is-updating [data-focus-text] {
  animation: focus-content-arrive 0.45s var(--ease) both;
}

@keyframes focus-content-arrive {
  from { opacity: 0.35; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.focus-feature-foot { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: var(--ink-soft); font-size: 11px; }

.focus-feature-panel .workflow-index,
.focus-feature-visual .workflow-visual-label {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.workflow-index { display: inline-block; margin-bottom: 14px; color: var(--workflow-accent); }

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--workflow-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-accent) 13%, white); }

.mini-app-top { display: flex; align-items: center; gap: 7px; padding: 0 0 10px; border-bottom: 1px solid rgba(15, 14, 12, 0.09); color: var(--ink-soft); font-size: 10px; }
.mini-app-icon { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: var(--workflow-accent); color: white; font-size: 10px; font-weight: 600; }
.mini-app-more { margin-left: auto; color: var(--ink-faint); letter-spacing: 1px; }
.mini-app-body { padding-top: 11px; }
.mini-app-label { color: var(--ink-faint); font-size: 9px; }
.mini-input { position: relative; display: flex; align-items: center; gap: 2px; min-height: 38px; margin-top: 5px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--workflow-accent) 55%, white); border-radius: 7px; background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--workflow-accent) 12%, transparent); color: var(--ink-faint); font-size: 9px; }
.input-caret { width: 1px; height: 12px; background: var(--workflow-accent); animation: caret 1.05s steps(1) infinite; }
@media (max-width: 900px) {
  .focus-feature-panel { grid-template-columns: 1fr minmax(250px, 0.85fr); gap: 28px; }
}

@media (max-width: 560px) {
  .focus-feature-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .focus-feature-visual { min-height: 168px; padding: 16px; }
  .focus-feature-copy p { font-size: 14px; }
}

/* Drop the compositor hint once the element has arrived: holding a layer for
   every revealed block for the life of the page costs memory for nothing. */
.js [data-reveal].is-settled {
  will-change: auto;
}

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

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .status-wave i {
    animation: none;
  }

  .word-group.is-clicking .word-add-control,
  .word-group.is-editing .word-add-control::after,
  .word-pill-new.is-dissolving {
    animation: none;
  }

  .car-card img,
  .aud-media img,
  .style-card,
  .stage-pane {
    transition: none;
  }

  .style-card:hover,
  .style-card.is-selected,
  .style-card.is-selected:hover {
    transform: none;
  }

  .feat-card,
  .feat-card:hover {
    transform: none;
    transition: none;
  }

  .input-caret,
  .focus-feature-visual.is-updating [data-focus-app],
  .focus-feature-visual.is-updating [data-focus-label],
  .focus-feature-visual.is-updating [data-focus-text],
  .visualizer-sample svg path,
  .visualizer-sample svg circle {
    animation: none;
    transform: none;
  }

  .stage.is-playing .demo-live::after,
  .style-source .style-live::after,
  .style-app-entry-copy.is-typing::after {
    animation: none;
  }

  .rec-dot,
  .demo-caret,
  .ui-apps .bar,
  .ui-marquee .reel,
  .ui-lang .cycle span,
  .ui-race span:first-child,
  .ui-race span:last-child {
    animation: none;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(250px, auto);
  }

  .gov-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .gov-row .idx {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  /* Keep the nav links; drop the secondary CTA to make room. */
  .nav-actions .btn-ghost {
    display: none;
  }

  .nav-links a {
    padding: 8px 8px;
    font-size: 14px;
  }

  .hero-grid,
  .sec-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sec-head {
    align-items: start;
  }

  .stage-pane {
    width: 100%;
  }

  .stage-pane:not(.out) {
    width: 96%;
    margin-left: 2%;
  }

  .stage-pane.out {
    width: 100%;
    margin-right: 0;
  }

  .stage-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stage-styles .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .gov-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: collapse the nav into a hamburger menu that also holds the CTAs. */
@media (max-width: 700px) {
  .site-header .container {
    grid-template-columns: 1fr auto;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: inline-grid;
  }

  .mobile-menu.open {
    display: flex;
  }
}

/* Keep story cards in natural document flow on narrow screens. */
@media (max-width: 860px) {
  .feat-grid [data-reveal],
  .feat-grid [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 560px) {
  .site-header .container {
    gap: 12px;
  }

  .stage-pane {
    width: 100%;
  }

  .nav-links {
    display: none; /* the footer repeats every link */
  }

  .feat-grid { grid-template-columns: 1fr; }
  .feature-story { padding-block: 52px; }
  .feature-story .feat-card { min-height: 260px; }

  /* Width-driven sizing on phones. Height-driven sizing derived width from
     each card's aspect ratio, so a 3:4 portrait card came out ~177px on a
     375px screen while its overlay wanted 236px, and the overlay was clipped.
     One shared width and height makes every card a uniform tile; the photos
     already use object-fit: cover, so they simply recrop. */
  .car-card,
  .car-card.portrait,
  .car-card.landscape {
    aspect-ratio: auto;
    width: min(80vw, 330px);
    height: min(105vw, 420px);
  }

  .access-form {
    flex-direction: column;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}