@font-face {
  font-family: Inter;
  src: url("/assets/inter-latin.362b168da82d.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Tokens: graphite and violet. Dark by default, light on request.
   Violet is spent on primary actions, status and the waveform; surfaces
   stay neutral graphite so the app captures carry the colour. */
:root {
  color-scheme: dark light;
  --bg: #0d0c10;
  --bg-2: #131117;
  --panel: #18161d;
  --panel-2: #201d26;
  --ink: #efedf4;
  --muted: #b3aebf;
  /* 6.2:1 on --bg, 5.2:1 on --panel-2 (WCAG AA) */
  --faint: #948ea1;
  --accent: #b9a0f5;
  --accent-2: #7f5af0;
  --accent-ink: #160f24;
  --accent-soft: rgba(185, 160, 245, 0.12);
  --accent-line: rgba(185, 160, 245, 0.4);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --glow: rgba(127, 90, 240, 0.3);
  --header-bg: rgba(20, 18, 26, 0.72);
  --menu-bg: #17151c;
  --ghost-bg: rgba(255, 255, 255, 0.05);
  --ghost-bg-hover: rgba(255, 255, 255, 0.09);
  --primary-from: #dccfff;
  --primary-to: #b79cf7;
  --primary-ink: #150d24;
  --primary-shadow: rgba(127, 90, 240, 0.55);
  --wave-base: rgba(185, 160, 245, 0.26);
  --frame: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  /* Shadows stay quiet: content surfaces rest on a line, only floating
     layers (header, menu, results, lightbox) lift off the page. */
  --shadow: 0 20px 48px -30px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 40px 120px -64px rgba(127, 90, 240, 0.45);
  --shadow-overlay: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
  /* The hero texture: page background and the brand violet, nothing new. */
  --dither-ink: var(--accent-2);
  --dither-opacity: 0.5;
  --dither-floor: 0.32;
  /* Scrollbars: a slim thumb on a clear track, no arrows. */
  --scrollbar-thumb: rgba(239, 237, 244, 0.16);
  --scrollbar-thumb-hover: rgba(239, 237, 244, 0.3);
  --em-from: #ece4ff;
  --em-to: #9e7ff6;
  --ok: #7fd6a8;
  --warn: #f2c66d;
  --radius: 24px;
  --radius-lg: 32px;
  /* Fields stay a little firmer than surfaces. */
  --radius-field: 12px;
  --wrap: 1200px;
  --gutter: clamp(16px, 0.4rem + 2.6vw, 40px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --quick: 160ms;
  --enter: 240ms;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 96px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f6fa;
    --bg-2: #efedf5;
    --panel: #ffffff;
    --panel-2: #f3f1f8;
    --ink: #17151c;
    --muted: #4f4a5a;
    /* 5.2:1 on --bg */
    --faint: #6a6577;
    --accent: #5b3cc4;
    --accent-2: #7f5af0;
    --accent-ink: #ffffff;
    --accent-soft: rgba(91, 60, 196, 0.08);
    --accent-line: rgba(91, 60, 196, 0.36);
    --line: rgba(23, 21, 28, 0.09);
    --line-2: rgba(23, 21, 28, 0.16);
    --glow: rgba(127, 90, 240, 0.18);
    --header-bg: rgba(255, 255, 255, 0.72);
    --menu-bg: #ffffff;
    --ghost-bg: rgba(23, 21, 28, 0.03);
    --ghost-bg-hover: rgba(23, 21, 28, 0.07);
    --primary-from: #6f50dc;
    --primary-to: #5534c0;
    --primary-ink: #ffffff;
    --primary-shadow: rgba(91, 60, 196, 0.45);
    --wave-base: rgba(91, 60, 196, 0.2);
    --frame: linear-gradient(180deg, rgba(23, 21, 28, 0.1), rgba(23, 21, 28, 0.04));
    --shadow: 0 18px 40px -28px rgba(40, 30, 80, 0.22);
    --shadow-glow: 0 40px 100px -60px rgba(91, 60, 196, 0.32);
    --shadow-overlay: 0 14px 36px -18px rgba(40, 30, 80, 0.26);
    --dither-opacity: 0.34;
    --dither-floor: 0.3;
    --scrollbar-thumb: rgba(23, 21, 28, 0.18);
    --scrollbar-thumb-hover: rgba(23, 21, 28, 0.34);
    --em-from: #7b5ae6;
    --em-to: #3f2596;
    --ok: #1d7a4c;
    --warn: #8a5a00;
  }
}
/* Increased contrast: firmer lines and secondary text. */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(255, 255, 255, 0.24);
    --line-2: rgba(255, 255, 255, 0.4);
    --muted: #d6d2df;
    --header-bg: #17151c;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  overflow-x: clip;
  line-height: 1.5;
}
/* Scrollbars everywhere: slim and quiet instead of the grey system bar
   with arrows. Chromium and Safari use the pseudo-elements; scrollbar-width
   only where they are missing, because Chromium would otherwise ignore them. */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb) padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
a,
button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.skip-link:focus {
  top: 12px;
}
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.wrap.narrow {
  --wrap: 880px;
}
/* Headings: compact, slightly tight, clearly weighted. Inter has no width
   axis, so large headings get their presence from weight and spacing. */
h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
h1,
h2 {
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h1 em,
h2 em {
  font-style: normal;
  /* Padded below so the gradient reaches the descenders. */
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, var(--em-from) 15%, var(--em-to) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
p {
  line-height: 1.65;
  text-wrap: pretty;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead {
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--muted);
  max-width: 620px;
}
.center {
  text-align: center;
}
.fine {
  font-size: 13px;
  color: var(--faint);
}
.fine a,
.section-head p a,
.prose a,
.cta-meta a,
.info-card a,
.steps a,
.plan-note a {
  color: var(--accent);
  text-underline-offset: 3px;
}
.icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Buttons: pills. Primary is the one download action; ghost is quiet. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition:
    transform var(--quick) var(--ease),
    background-color var(--quick),
    box-shadow var(--enter) var(--ease),
    filter var(--quick);
}
.btn:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.btn.primary {
  color: var(--primary-ink);
  background: linear-gradient(180deg, var(--primary-from), var(--primary-to));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 12px 32px -12px var(--primary-shadow);
}
.btn.ghost {
  color: var(--ink);
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.btn.large {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}
.btn.block {
  width: 100%;
}
.btn .icon {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .btn.primary:hover {
    filter: brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 18px 44px -14px var(--primary-shadow);
  }
  .btn.ghost:hover {
    background: var(--ghost-bg-hover);
  }
}

/* One download call to action, the same everywhere */
.cta-block {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
.cta-block.centered {
  justify-items: center;
  text-align: center;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-block.centered .cta-row {
  justify-content: center;
}
.cta-meta {
  margin: 0;
  font-size: 13px;
  color: var(--faint);
}
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust .icon {
  width: 16px;
  height: 16px;
  color: var(--ok);
}
.cta-block.centered .trust {
  justify-content: center;
}

/* Header: a floating bar. Over the page top only its content shows; once
   the page moves a translucent pill fades in beneath it. The material is
   reserved for this floating layer; content surfaces stay opaque. */
.read-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.read-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin: left;
  transform: scaleX(0);
}
.site-header {
  position: fixed;
  inset: 12px 0 auto;
  z-index: 50;
  padding-inline: 12px;
  pointer-events: none;
}
.header-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1160px;
  height: 60px;
  margin-inline: auto;
  padding: 0 8px 0 18px;
  pointer-events: auto;
}
/* The bar floats below the window edge as one rounded surface with a fine
   line and a light blur; once the page moves it gains a quiet shadow. */
.header-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--header-bg);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition: box-shadow var(--enter) var(--ease);
}
.site-header.scrolled .header-row::before {
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--shadow-overlay);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: 17px;
}
.site-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition:
    color var(--quick),
    background-color var(--quick);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}
.site-nav a[aria-current="page"] {
  background: var(--ghost-bg-hover);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (hover: hover) {
  .site-nav a:not([aria-current]):hover {
    background: var(--ghost-bg);
  }
}
.menu-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  position: relative;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.menu-toggle span:first-child {
  top: 18px;
}
.menu-toggle span:last-child {
  top: 25px;
}
.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Hero (home) and page heroes */
.hero,
.page-hero {
  position: relative;
}
.hero {
  padding: clamp(132px, 15vw, 184px) 0 clamp(56px, 8vw, 96px);
  overflow: clip;
}
.page-hero {
  padding: clamp(128px, 13vw, 168px) 0 clamp(40px, 5vw, 64px);
  overflow: clip;
}
.hero .wrap,
.page-hero .wrap {
  position: relative;
}
/* A violet light above the page, as from a booth lamp; no grid. */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 38% at 50% 0%, var(--glow), transparent 72%),
    radial-gradient(30% 24% at 50% 4%, var(--accent-soft), transparent 70%);
}
/* Every other page: the page hero is centred like the home hero, and the
   same texture sits behind the top of the page (render.js pageBackdrop),
   reaching below the hero and fading into the page. */
main {
  position: relative;
  isolation: isolate;
}
.dither.page-dither {
  z-index: -1;
  height: min(clamp(680px, 100vh, 980px), 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(180deg, #000 30%, transparent 100%);
}
.page-dither .dither-veil {
  background: radial-gradient(ellipse 40% 26% at 50% 32%, color-mix(in srgb, var(--bg) 80%, transparent), transparent);
}
/* Docs articles: shorter and quieter, the text starts close below. */
.page-dither.article {
  height: min(clamp(420px, 60vh, 620px), 100%);
  --dither-opacity: 0.32;
}
.page-dither.article .dither-veil {
  background: linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--bg) 60%, transparent) 30%, color-mix(in srgb, var(--bg) 60%, transparent) 70%, transparent 88%);
}
@media (max-width: 640px) {
  .page-dither .dither-veil {
    background: radial-gradient(ellipse 80% 30% at 50% 30%, color-mix(in srgb, var(--bg) 76%, transparent), transparent);
  }
}
.page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.page-hero .lead {
  margin: 0 auto;
}
.page-hero .jump {
  justify-content: center;
}
.page-hero .docs-search.large {
  width: min(640px, 100vw - 2 * var(--gutter));
  margin-inline: auto;
  text-align: left;
}

/* Home hero texture: Paper Shaders' dithering in --bg and the brand violet
   (dither.js). It reaches past the content width, fades to the sides and
   downwards, and shows most around a soft light that follows the mouse.
   Without WebGL 2 or JavaScript a static dot texture stands in. */
.dither {
  inset: 0 0 auto;
  height: min(100%, 1080px);
  background: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(180deg, #000 48%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(180deg, #000 48%, transparent 96%);
  mask-composite: intersect;
}
.dither-field {
  position: absolute;
  inset: 0;
  opacity: var(--dither-opacity);
  /* The light (radius about min(36vw, 460px), clear to 72 %) over a
     quieter floor, so the texture never disappears entirely. */
  -webkit-mask-image:
    radial-gradient(circle min(36vw, 460px) at var(--light-x, 50%) var(--light-y, 36%), #000, transparent 72%),
    linear-gradient(rgb(0 0 0 / var(--dither-floor)), rgb(0 0 0 / var(--dither-floor)));
  mask-image:
    radial-gradient(circle min(36vw, 460px) at var(--light-x, 50%) var(--light-y, 36%), #000, transparent 72%),
    linear-gradient(rgb(0 0 0 / var(--dither-floor)), rgb(0 0 0 / var(--dither-floor)));
}
.dither-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* Static stand-in: an ordered dot grid lit in a few soft fields. */
.dither-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--dither-ink) 1.1px, transparent 1.7px) 0 0 / 4px 4px;
  -webkit-mask-image:
    radial-gradient(38% 30% at 34% 30%, #000, transparent 70%),
    radial-gradient(30% 26% at 68% 46%, rgb(0 0 0 / 0.8), transparent 70%),
    radial-gradient(46% 22% at 52% 70%, rgb(0 0 0 / 0.55), transparent 72%);
  mask-image:
    radial-gradient(38% 30% at 34% 30%, #000, transparent 70%),
    radial-gradient(30% 26% at 68% 46%, rgb(0 0 0 / 0.8), transparent 70%),
    radial-gradient(46% 22% at 52% 70%, rgb(0 0 0 / 0.55), transparent 72%);
}
.dither-live .dither-field::before {
  display: none;
}
/* Readability: a soft veil in the page background behind the headline. */
.dither-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 30% at 50% 40%, color-mix(in srgb, var(--bg) 78%, transparent), transparent);
}
@media (max-width: 640px) {
  .dither-veil {
    background: radial-gradient(ellipse 70% 34% at 50% 40%, color-mix(in srgb, var(--bg) 74%, transparent), transparent);
  }
}
@media (forced-colors: active) {
  .dither {
    display: none;
  }
}
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.release-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  max-width: 100%;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition:
    color var(--quick),
    background-color var(--quick);
}
.release-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.release-pill .badge {
  padding: 3px 10px;
}
.release-pill .icon {
  width: 16px;
  height: 16px;
  color: var(--faint);
  transition: transform var(--quick) var(--ease);
}
@media (hover: hover) {
  .release-pill:hover {
    color: var(--ink);
    background: var(--ghost-bg-hover);
  }
  .release-pill:hover .icon {
    transform: translateX(2px);
  }
}
@media (pointer: coarse) {
  .release-pill {
    min-height: 44px;
  }
}
.hero h1 {
  margin: 32px 0 26px;
  font-size: clamp(48px, 8.2vw, 112px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.hero h1 .line {
  display: block;
}
.hero .lead {
  margin: 0 auto;
}
.hero-stage {
  position: relative;
  margin-top: clamp(56px, 8vw, 104px);
}
.page-hero h1 {
  margin: 22px auto 22px;
  font-size: clamp(42px, 6.4vw, 88px);
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 980px;
}

/* The waveform: Sonodex's signature, drawn like a deck's track overview. */
.waveform {
  display: block;
  pointer-events: none;
}
.wave-base {
  fill: var(--wave-base);
}
.wave-played {
  fill: var(--accent);
  opacity: 0.85;
  clip-path: inset(0 62% 0 0);
}
.wave-head {
  fill: var(--ink);
  opacity: 0.8;
}
.hero-wave {
  position: absolute;
  left: 50%;
  top: clamp(-80px, -6vw, -40px);
  width: min(1680px, 100vw);
  height: clamp(110px, 17vw, 250px);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.7;
}

/* Product view: the app in a quiet frame, lit violet from behind */
.product-preview {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--frame);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow),
    var(--shadow-glow);
}
.product-preview .shot {
  border-radius: 16px;
}
.product-preview figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 8px 4px;
  font-size: 13px;
  color: var(--faint);
}
.product-preview figcaption span:first-child {
  color: var(--muted);
}

/* Zoomable captures */
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #111013;
  cursor: zoom-in;
  overflow: hidden;
}
.shot img {
  width: 100%;
  transition:
    transform 600ms var(--ease),
    opacity var(--quick);
}
.shot:focus-visible {
  outline-offset: -4px;
}
.shot-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #efedf4;
  background: rgba(14, 13, 17, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--enter),
    transform var(--enter) var(--ease);
}
@media (hover: hover) {
  .shot:hover img {
    transform: scale(1.012);
  }
  .shot:hover .shot-hint {
    opacity: 1;
    transform: none;
  }
}
.shot:focus-visible .shot-hint {
  opacity: 1;
  transform: none;
}

/* Sections and heading variants */
.section {
  position: relative;
  padding: clamp(80px, 10vw, 144px) 0;
}
.section.alt {
  background: linear-gradient(var(--bg-2), var(--bg) 80%);
}
.section-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head h2 {
  font-size: clamp(32px, 4.4vw, 58px);
  letter-spacing: -0.04em;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 580px;
  font-size: 17px;
}
/* Two lines with a gradient second line, text beside it */
.section-head.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 16px 48px;
}
.section-head.split .eyebrow {
  grid-column: 1 / -1;
}
/* Plain sentence heading, text below */
.section-head.plain h2 {
  margin: 14px 0 16px;
  max-width: 820px;
  font-size: clamp(30px, 3.6vw, 48px);
}
/* Centered, compact */
.section-head.centered {
  text-align: center;
}
.section-head.centered h2 {
  margin: 14px auto 18px;
  max-width: 860px;
}
.section-head.centered p {
  margin-inline: auto;
}
/* Small side heading next to a list */
.section-head.side {
  margin: 0;
}
.section-head.side h2 {
  margin: 12px 0 14px;
  font-size: clamp(28px, 3vw, 40px);
}

/* Facts under the hero: a quiet row, not a scoreboard */
.stats-band {
  padding: 0 0 clamp(24px, 4vw, 48px);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.stats-band .stat-grid {
  gap: 0;
  border-block: 1px solid var(--line);
}
.stat {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stats-band .stat {
  padding: 28px 24px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.stats-band .stat + .stat {
  border-left: 1px solid var(--line);
}
.stat dt {
  font-weight: 600;
  font-size: 15px;
}
.stat dt b {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(36px, 3.6vw, 50px);
  font-weight: 640;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stats-band .stat dt b {
  font-size: clamp(28px, 2.6vw, 36px);
}
.stat dt b small {
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 3px;
}
.stat dd {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* Workflow story. Default: each step above its own view. */
.story-steps {
  display: grid;
  gap: clamp(56px, 8vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px 56px;
  align-items: center;
}
.story-text {
  max-width: 460px;
}
.step-number {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font-variant-numeric: tabular-nums;
  transition:
    color var(--enter),
    background-color var(--enter);
}
.story-text h3 {
  margin: 18px 0 12px;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}
.step-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
}
.story-text p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  transition: color var(--enter);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}
.chips li {
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--muted);
  font-size: 13px;
}
.story-shot {
  padding: 6px;
  border-radius: var(--radius);
  background: var(--frame);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow);
}
.story-shot .shot {
  border-radius: 18px;
}
/* Wide screens with JavaScript: one pinned stage beside the steps. The
   step texts give the scroll distance; the view of the step in the middle
   of the window shows, the others step back by colour, not opacity. */
@media (min-width: 1024px) {
  .story-steps.staged {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 0;
  }
  .staged .story-step {
    display: contents;
  }
  .staged .story-text {
    grid-column: 1;
    grid-row: var(--row);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 68vh;
    padding-left: 28px;
    border-left: 2px solid var(--line);
    transition: border-color var(--enter);
  }
  .staged .story-step.active .story-text {
    border-left-color: var(--accent);
  }
  .staged .story-step:not(.active) .step-kicker,
  .staged .story-step:not(.active) h3,
  .staged .story-step:not(.active) .story-text p {
    color: var(--faint);
  }
  .staged .story-step:not(.active) .step-number {
    color: var(--faint);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .staged .story-shot {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: max(104px, calc(50vh - 15vw));
    align-self: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.985);
    transition:
      opacity 420ms var(--ease),
      transform 620ms var(--ease),
      visibility 0s 420ms;
  }
  .staged .story-step.active .story-shot {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 420ms var(--ease),
      transform 620ms var(--ease);
  }
}

/* Feature overview (home) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.feature-grid + .center {
  margin-top: 40px;
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--enter) var(--ease),
    box-shadow var(--enter);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 0% 0%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--enter);
  pointer-events: none;
}
@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px var(--accent-line),
      var(--shadow);
  }
  .feature-card:hover::before {
    opacity: 1;
  }
  .feature-card:hover .card-link .icon {
    transform: translateX(3px);
  }
}
.feature-card h3 {
  font-size: 19px;
  margin-top: 8px;
}
.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.card-link .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--quick) var(--ease);
}
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.feature-icon .icon {
  width: 20px;
  height: 20px;
}

/* Feature rows (/funktionen): alternating image and text */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition:
    color var(--quick),
    background-color var(--quick);
}
.jump a:hover {
  color: var(--ink);
  background: var(--ghost-bg-hover);
}
.feature-row {
  padding: clamp(64px, 8vw, 112px) 0;
}
.feature-row + .feature-row {
  border-top: 1px solid var(--line);
}
.feature-row-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.feature-row.flip .feature-visual {
  order: 2;
}
.feature-row.text-only .feature-row-inner {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.feature-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.feature-gallery li {
  display: grid;
  gap: 8px;
  align-content: start;
}
.feature-gallery span {
  color: var(--muted);
  font-size: 13px;
}
.feature-gallery .feature-media {
  padding: 4px;
  border-radius: 14px;
}
.feature-gallery .feature-media .shot {
  border-radius: 10px;
}
.feature-media {
  padding: 6px;
  border-radius: var(--radius);
  background: var(--frame);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow);
}
.feature-media .shot {
  border-radius: 18px;
}
.feature-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.feature-text h2 {
  margin: 20px 0 14px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.035em;
}
.feature-text > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 17px;
}
.benefits {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.benefits li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
}
.benefits .icon {
  margin-top: 3px;
  color: var(--accent);
}
.more {
  border-top: 1px solid var(--line);
}
.more summary,
.faq-list summary,
.integration summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
}
.more summary::-webkit-details-marker,
.faq-list summary::-webkit-details-marker,
.integration summary::-webkit-details-marker {
  display: none;
}
.more summary {
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}
.more ul {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
.more li + li {
  margin-top: 6px;
}
.plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--muted);
  transition: transform 0.35s var(--ease);
}
.plus::after {
  transform: rotate(90deg);
}
details[open] > summary .plus::after {
  transform: rotate(0deg);
}

/* Tables */
.table-wrap {
  /* Containing block for visually hidden cell text, so it scrolls with the table. */
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  /* Sideways by swipe, Shift + wheel, trackpad or arrow keys once
     focused; no visible bar. The frame fades the side with more columns. */
  scrollbar-width: none;
}
.table-wrap::-webkit-scrollbar {
  display: none;
}
.table-frame {
  position: relative;
}
.table-frame::before,
.table-frame::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 3;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--enter) var(--ease);
}
.table-frame::before {
  left: 1px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(90deg, var(--panel), transparent);
}
.table-frame::after {
  right: 1px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(270deg, var(--panel), transparent);
}
.table-frame.more-start::before,
.table-frame.more-end::after {
  opacity: 1;
}
/* The comparison keeps its first two columns in place; nothing to fade there. */
.compare-scroller .table-frame::before {
  display: none;
}
@media (max-width: 720px) {
  .table-frame::before,
  .table-frame::after {
    width: 32px;
  }
}
.table-wrap:focus-visible {
  border-radius: var(--radius);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th,
td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
tbody tr:last-child > * {
  border-bottom: 0;
}
tbody th {
  font-weight: 600;
}
/* Competitor comparison: the feature column and Sonodex stay put, the
   other programs scroll sideways (arrows, swipe or keyboard). */
.compare-scroller {
  --label-w: 300px;
  --us-w: 168px;
  --rival-w: 156px;
}
.compare-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.compare-range {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.compare-arrows {
  display: flex;
  gap: 8px;
}
.compare-arrow {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.compare-arrow:hover:not(:disabled) {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.compare-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.compare-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.compare-scroller .table-wrap {
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.comparison {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.comparison th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--label-w);
  min-width: var(--label-w);
  white-space: normal;
  background: var(--panel);
}
.comparison .us {
  position: sticky;
  left: var(--label-w);
  z-index: 2;
  width: var(--us-w);
  min-width: var(--us-w);
  /* Opaque, so scrolling columns pass underneath. */
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel);
  box-shadow: 8px 0 12px -10px rgb(0 0 0 / 0.6);
}
.comparison td:not(.us),
.comparison thead th:not(:first-child):not(.us) {
  width: var(--rival-w);
  min-width: var(--rival-w);
}
.comparison td,
.comparison thead th:not(:first-child) {
  text-align: center;
  white-space: normal;
}
.comparison thead .us {
  color: var(--accent);
}
@media (max-width: 720px) {
  .compare-scroller {
    --label-w: 150px;
    --us-w: 120px;
    --rival-w: 128px;
  }
  .comparison th,
  .comparison td {
    padding: 12px 10px;
    font-size: 14px;
  }
}
.yes .icon {
  display: inline-block;
  color: var(--accent);
  vertical-align: middle;
}
.no,
.na {
  color: var(--faint);
}
.partial {
  color: var(--warn);
}
.compare td {
  width: 140px;
  text-align: center;
}
.compare thead th:not(:first-child) {
  text-align: center;
}
.status-table td:last-child {
  color: var(--muted);
  font-size: 14px;
}
.status-table .group-row th {
  padding-top: 26px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}
.table-wrap + .fine {
  margin-top: 20px;
}
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.pill[data-status="Verfügbar"] {
  color: var(--ok);
}
.pill[data-status="Eingeschränkt"],
.pill[data-status="Teilweise"] {
  color: var(--warn);
}
.pill[data-status="Experimentell"],
.pill[data-status="Per Datei"] {
  color: var(--accent);
}
.pill[data-status="Geplant"],
.pill[data-status="Nicht unterstützt"] {
  color: var(--faint);
}
.legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 26px;
  margin: 0 0 28px;
}
.legend div {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
}
.legend dd {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* "Neu in 2.0": the release as one lit panel */
.news-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 70% at 100% 0%, var(--glow), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, var(--accent-soft), transparent 70%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow);
  overflow: hidden;
}
.news-card h2 {
  margin: 18px 0 14px;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
}
.news-intro p {
  color: var(--muted);
  margin: 0 0 26px;
}
.news-shot {
  margin: 0;
}
.news-shot .shot {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--line-2),
    var(--shadow);
}
.news-shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--faint);
}
.news-groups {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.news-groups h3 {
  margin-bottom: 10px;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.news-groups ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-groups li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.news-groups li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-ink);
  background: var(--accent);
  white-space: nowrap;
}

/* Plans */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 980px;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plan.pro {
  background:
    radial-gradient(80% 60% at 100% 0%, var(--glow), transparent 70%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--accent-line),
    var(--shadow-glow);
}
.plan-kicker {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}
.plan h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 30px;
}
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 16px;
}
.plan-price b {
  font-size: 56px;
  font-weight: 640;
  letter-spacing: -0.045em;
}
.plan-price span {
  font-size: 14px;
  color: var(--muted);
}
.plan > p {
  color: var(--muted);
  font-size: 15px;
}
.plan > p.plan-founder {
  margin: 6px 0 0;
  color: var(--accent);
  font-weight: 560;
}
.plan ul {
  list-style: none;
  padding: 18px 0 0;
  margin: 4px 0 28px;
  display: grid;
  gap: 11px;
  font-size: 15px;
  border-top: 1px solid var(--line);
}
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.plan li .icon {
  color: var(--accent);
  margin-top: 2px;
}
.plan .btn {
  margin-top: auto;
}
.plan-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}
.plans + .center,
.plans + .fine {
  margin-top: 32px;
}

/* Steps */
.steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 20px 22px 20px 70px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 650;
  color: var(--accent-ink);
  background: var(--accent);
}
.steps b {
  color: var(--ink);
}

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 28px 64px;
  align-items: start;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  min-height: 64px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  transition: color var(--quick);
}
.faq-list summary:hover {
  color: var(--accent);
}
.faq-list p {
  margin: -2px 0 22px;
  color: var(--muted);
  max-width: 760px;
}

/* Integrations */
.integration-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.column-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.integration {
  border-bottom: 1px solid var(--line);
}
.integration summary {
  min-height: 72px;
  padding: 14px 0;
}
.mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}
.integration summary b {
  display: block;
  font-size: 16px;
}
.integration summary small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
.integration dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px 14px;
  margin: 0 0 20px 58px;
  font-size: 14px;
}
.integration dt {
  color: var(--faint);
}
.integration dd {
  margin: 0;
  color: var(--muted);
}

/* Cards: download, help */
.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.info-card {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.info-card h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
.info-card p {
  color: var(--muted);
}
.facts {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: 15px;
}
.facts dt {
  color: var(--faint);
}
.facts dd {
  margin: 0;
}
.platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.platform {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.platform b {
  font-size: 19px;
}
.platform span {
  font-size: 14px;
  color: var(--faint);
}
.platform p {
  margin: 8px 0;
  color: var(--muted);
  font-size: 15px;
}
.platform a {
  color: var(--accent);
  font-size: 15px;
}

/* Changelog */
.timeline {
  display: grid;
  gap: 20px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.release {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.release:first-child {
  background:
    radial-gradient(70% 50% at 100% 0%, var(--glow), transparent 70%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--accent-line),
    var(--shadow);
}
.release header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.release h2 {
  font-size: clamp(22px, 2.4vw, 30px);
}
.release .version {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.release > article > p {
  color: var(--muted);
}
.release h3 {
  margin: 22px 0 8px;
  font-size: 16px;
}
.release ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}
.release li + li {
  margin-top: 6px;
}

/* Status / analysis */
.stat-grid.analysis {
  margin-bottom: 34px;
}
.analysis-notes {
  columns: 2 340px;
  column-gap: 40px;
  color: var(--muted);
  font-size: 15px;
}
.analysis-notes p {
  margin: 0 0 14px;
  break-inside: avoid;
}
@media (min-width: 1101px) {
  .stat-grid.analysis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Published results next to Sonodex' own, each with its source */
.study {
  margin: 0 0 40px;
}
.study figcaption {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 18px;
}
.study .fine {
  margin-top: 12px;
}
.study-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.study-table tr.us > * {
  color: var(--accent);
  font-weight: 600;
}
.analysis-beat {
  max-width: 72ch;
  color: var(--muted);
}
.sources-title {
  margin: 32px 0 12px;
  font-size: 18px;
}
.sources {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14px;
}
.sources li {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.sources li:target {
  color: var(--ink);
}

/* Legal prose */
.prose {
  font-size: 16px;
}
.prose h2 {
  margin: 44px 0 12px;
  font-size: 24px;
}
.prose h2:first-child,
.prose .notice + h2 {
  margin-top: 0;
}
.prose h3 {
  margin: 22px 0 6px;
  font-size: 17px;
}
.prose p {
  margin: 0 0 12px;
  color: var(--muted);
}
.notice {
  margin: 0 0 32px !important;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--warn);
  color: var(--ink) !important;
  background: var(--panel);
}

/* Final call to action: the waveform returns at the end of the page */
.cta-card {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 48px) clamp(120px, 14vw, 180px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 50% 0%, var(--glow), transparent 70%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow);
  overflow: hidden;
}
.cta-card h2 {
  font-size: clamp(32px, 4.4vw, 58px);
  letter-spacing: -0.04em;
}
.cta-card > p {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
}
.cta-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  width: 100%;
  height: clamp(90px, 11vw, 150px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity: 0.6;
}

/* Account signup */
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
}
.account-grid > .section-head {
  margin: 0;
}
.account-grid > .section-head p + p {
  margin-top: 14px;
}
.account-form {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: clamp(20px, 4vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow);
}
.account-form label {
  font-size: 15px;
  font-weight: 600;
}
.account-form input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-field);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-2);
  transition:
    border-color var(--quick),
    box-shadow var(--quick);
}
.account-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.account-form .fine {
  margin: 0 0 8px;
  color: var(--muted);
}
.account-form summary {
  min-height: 44px;
  padding-block: 12px;
  cursor: pointer;
}
.account-form details input {
  margin-top: 8px;
}
.account-form button {
  cursor: pointer;
}
.account-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.account-recovery {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: 15px;
}
#account-result {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#account-result[data-state="success"] {
  color: var(--ok);
}
#account-result[data-state="error"] {
  color: var(--warn);
}

/* Footer */
.site-footer {
  position: relative;
  padding: 72px 0 0;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
}
.footer-brand p {
  color: var(--muted);
  font-size: 14px;
  max-width: 320px;
}
.footer-grid nav {
  display: grid;
  align-content: start;
  gap: 2px;
}
.footer-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.footer-grid nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--quick);
}
.footer-grid nav a:hover {
  color: var(--ink);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}
.footer-bottom a {
  color: var(--faint);
  text-decoration: none;
}
.footer-bottom a:hover {
  color: var(--ink);
}

/* Lightbox */
.lightbox {
  width: min(1500px, 94vw);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--shadow-overlay);
}
.lightbox[open] {
  animation: lightbox-in var(--enter) var(--ease);
}
.lightbox::backdrop {
  background: rgba(6, 5, 9, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 8px 18px;
  font-size: 15px;
  font-weight: 600;
}
.lightbox-bar button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--quick);
}
.lightbox-bar button:hover {
  background: var(--ghost-bg-hover);
}
.lightbox img {
  width: 100%;
}
.lightbox p {
  margin: 0;
  padding: 10px 18px 14px;
  font-size: 13px;
  color: var(--faint);
}
@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* Docs: sidebar, article, table of contents, search */
.docs-shell [hidden],
.docs-search[hidden],
.docs-results[hidden] {
  display: none !important;
}
.docs-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 208px;
  grid-template-areas:
    "side head toc"
    "side body toc"
    "side foot toc";
  grid-template-rows: auto 1fr auto;
  column-gap: 48px;
  align-items: start;
  padding: 100px 0 72px;
}
.docs-sidebar {
  grid-area: side;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 6px 24px 0;
  overflow-x: hidden;
}
/* Side lists show their thumb only while you are in them. */
.docs-sidebar::-webkit-scrollbar-thumb,
.docs-toc::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.docs-sidebar:is(:hover, :focus-within)::-webkit-scrollbar-thumb,
.docs-toc:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}
.docs-sidebar:is(:hover, :focus-within)::-webkit-scrollbar-thumb:hover,
.docs-toc:is(:hover, :focus-within)::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}
@supports not selector(::-webkit-scrollbar) {
  .docs-sidebar,
  .docs-toc {
    scrollbar-color: transparent transparent;
  }
  .docs-sidebar:is(:hover, :focus-within),
  .docs-toc:is(:hover, :focus-within) {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}
.docs-head {
  grid-area: head;
  min-width: 0;
}
.docs-body {
  grid-area: body;
  min-width: 0;
}
.docs-foot {
  grid-area: foot;
  min-width: 0;
  margin-top: 48px;
}
.docs-toc {
  grid-area: toc;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-size: 14px;
}
.docs-toc summary {
  display: none;
}
.docs-toc-title,
.docs-nav-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.docs-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}
.docs-toc li a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}
.docs-toc li.level-3 a {
  padding-left: 26px;
}
.docs-toc li a:hover {
  color: var(--ink);
}
.docs-toc li a.active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Sidebar navigation */
.docs-nav {
  font-size: 14px;
}
.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-nav-home {
  display: block;
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.docs-nav-section + .docs-nav-section {
  margin-top: 20px;
}
.docs-nav-section a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
}
.docs-nav-section a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}
.docs-nav-section a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.docs-flag {
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.docs-card .docs-flag {
  margin-left: 6px;
}
.docs-nav-toggle {
  display: none;
}

/* Search */
.docs-search {
  position: relative;
  margin: 0 0 22px;
}
.docs-search-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.docs-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius-field);
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--faint);
}
.docs-search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.docs-search-field input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.docs-search-field input::placeholder {
  color: var(--faint);
}
.docs-search.large {
  max-width: 640px;
  margin: 28px 0 0;
}
.docs-search.large .docs-search-field {
  padding: 0 18px;
  border-radius: var(--radius-field);
}
.docs-search.large .docs-search-field input {
  height: 56px;
  font-size: 17px;
}
.docs-search-status {
  margin: 6px 2px 0;
  font-size: 13px;
  color: var(--faint);
}
.docs-search-status:empty {
  margin: 0;
}
.docs-results {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--menu-bg);
  box-shadow: var(--shadow-overlay);
  max-height: min(60vh, 520px);
  overflow-y: auto;
}
.docs-search.large .docs-results {
  /* Inline: the hero clips overflowing content. */
  max-height: min(56vh, 480px);
}
.docs-results a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.docs-results a:hover,
.docs-results a:focus-visible {
  background: var(--accent-soft);
}
.docs-results b {
  font-size: 15px;
  font-weight: 600;
}
.docs-results small {
  font-size: 13px;
  color: var(--faint);
}
.docs-results span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.docs-results mark {
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px;
}

/* Article */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--faint);
}
.breadcrumbs li + li::before {
  content: "/";
  margin: 0 8px;
  color: var(--faint);
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--accent);
}
.breadcrumbs a[aria-current="page"] {
  color: var(--ink);
}
.docs-head h1 {
  font-size: clamp(32px, 4vw, 46px);
}
.docs-lead {
  margin: 14px 0 0;
  font-size: 18px;
  color: var(--muted);
}
.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 16px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}
.pill.docs-plan {
  color: var(--accent);
}
.docs-body > :first-child {
  margin-top: 24px;
}
.docs-body h2.docs-heading {
  margin: 44px 0 12px;
  font-size: 25px;
  scroll-margin-top: 92px;
}
.docs-body h3.docs-heading {
  margin: 28px 0 8px;
  font-size: 19px;
  scroll-margin-top: 92px;
}
.docs-heading .anchor {
  margin-left: 10px;
  color: var(--faint);
  text-decoration: none;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
}
.docs-heading:hover .anchor,
.docs-heading .anchor:focus-visible,
.docs-heading .anchor.copied {
  opacity: 1;
}
.docs-heading .anchor.copied::after {
  content: " Link kopiert";
  font-size: 13px;
  letter-spacing: 0;
  color: var(--accent);
}
.docs-body p,
.docs-body li,
.docs-body dd {
  color: var(--muted);
  line-height: 1.7;
}
.docs-body strong {
  color: var(--ink);
  font-weight: 600;
}
.docs-body a:not(.anchor):not(.shot) {
  color: var(--accent);
}
.docs-body ul,
.docs-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.docs-body li + li {
  margin-top: 6px;
}
.docs-body ol.docs-steps {
  padding: 0;
  list-style: none;
  counter-reset: docstep;
}
.docs-steps li {
  position: relative;
  padding-left: 40px;
  counter-increment: docstep;
}
.docs-steps li + li {
  margin-top: 10px;
}
.docs-steps li::before {
  content: counter(docstep);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.docs-body code {
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
.docs-body kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.docs-code {
  margin: 0 0 18px;
}
.docs-code figcaption {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--faint);
}
.docs-code pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow-x: auto;
}
.docs-code pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
}
.callout {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel);
}
.callout.tip {
  border-left-color: var(--ok);
}
.callout.important {
  border-left-color: var(--warn);
}
.callout p {
  margin: 0;
}
.docs-body .callout-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.docs-body .callout.tip .callout-title {
  color: var(--ok);
}
.docs-body .callout.important .callout-title {
  color: var(--warn);
}
.docs-table {
  margin: 0 0 20px;
}
.docs-table::before,
.docs-table::after {
  width: 40px;
}
.docs-table table {
  font-size: 14px;
}
.docs-table.wide table {
  min-width: 560px;
}
.docs-table td,
.docs-table th {
  padding: 11px 14px;
}
.docs-table tbody th {
  color: var(--ink);
}
.docs-table td {
  color: var(--muted);
}
.docs-dl {
  margin: 0 0 18px;
}
.docs-dl dt {
  font-weight: 600;
  color: var(--ink);
}
.docs-dl dd {
  margin: 2px 0 12px;
}
.docs-shot {
  margin: 24px 0 8px;
}
.docs-shot figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--faint);
}
.docs-release h3.docs-subtle {
  margin: 18px 0 6px;
  font-size: 17px;
}
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 18px;
}
.docs-pager a {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  transition: border-color 0.2s;
}
.docs-pager a:hover {
  border-color: var(--accent);
}
.docs-pager .next {
  text-align: right;
  grid-column: 2;
}
.docs-pager small {
  font-size: 13px;
  color: var(--faint);
}
.docs-pager span {
  font-weight: 600;
}
.docs-foot .fine a {
  color: var(--accent);
}

/* Overview */
.docs-cards {
  columns: 3 300px;
  column-gap: 20px;
  margin-bottom: 28px;
}
.docs-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 20px;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  scroll-margin-top: 90px;
}
.docs-card h2 {
  margin: 14px 0 6px;
  font-size: 21px;
}
.docs-card h2 a {
  text-decoration: none;
}
.docs-card h2 a:hover {
  color: var(--accent);
}
.docs-card > p {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--muted);
}
.docs-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 15px;
}
.docs-card li a {
  color: var(--muted);
  text-decoration: none;
}
.docs-card li a:hover {
  color: var(--accent);
  text-decoration: underline;
}

@media (min-width: 901px) {
  /* The search stays in view while the long navigation scrolls. */
  .docs-search.side {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 14px;
    margin-bottom: 8px;
    background: var(--bg);
  }
}
@media (max-width: 1180px) {
  .docs-shell {
    grid-template-columns: 228px minmax(0, 1fr);
    grid-template-areas:
      "side head"
      "side toc"
      "side body"
      "side foot";
    grid-template-rows: auto auto 1fr auto;
    column-gap: 40px;
  }
  .docs-toc {
    position: static;
    max-height: none;
    margin-top: 22px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .docs-toc summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .docs-toc summary::-webkit-details-marker {
    display: none;
  }
  .docs-toc[open] summary {
    margin-bottom: 8px;
  }
  .docs-toc-title {
    display: none;
  }
}
@media (max-width: 900px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "side"
      "head"
      "toc"
      "body"
      "foot";
    grid-template-rows: none;
    padding-top: 88px;
  }
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 22px;
    padding: 0;
  }
  .docs-nav-toggle:not([hidden]) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: var(--panel);
    font-weight: 600;
    cursor: pointer;
  }
  .docs-nav-toggle[aria-expanded="true"] .plus::after {
    transform: rotate(0deg);
  }
  .docs-sidebar.collapsible:not(.open) .docs-nav {
    display: none;
  }
  .docs-sidebar.open .docs-nav {
    margin-top: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .docs-search {
    margin-bottom: 12px;
  }
  .docs-search.side .docs-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .docs-search-field input {
    font-size: 16px;
  }
}
@media (max-width: 640px) {
  .docs-pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-pager .next {
    grid-column: 1;
  }
  .docs-lead {
    font-size: 17px;
  }
  .docs-body h2.docs-heading {
    font-size: 22px;
  }
  .docs-heading .anchor {
    opacity: 1;
  }
  .docs-card {
    padding: 20px;
  }
}

/* Reveal: visible by default, animated only when motion is allowed */
.motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 640ms var(--ease),
    transform 640ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.motion .reveal.in {
  opacity: 1;
  transform: none;
}

/* The one orchestrated moment, on arrival only: the headline settles out
   of a slight blur, the track loads into the waveform from left to right,
   then the app window rises flat as it scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line {
    animation: line-in 900ms var(--ease) both;
    animation-delay: calc(60ms + var(--i, 0) * 110ms);
  }
  .hero h1 .line + .line {
    --i: 1;
  }
  .hero .release-pill {
    animation: rise-in 700ms var(--ease) both;
  }
  .hero .lead {
    animation: rise-in 800ms var(--ease) 260ms both;
  }
  .hero .cta-block {
    animation: rise-in 800ms var(--ease) 340ms both;
  }
  .hero-wave {
    animation: wave-load 1600ms var(--ease) 380ms both;
  }
  .hero-wave .wave-played {
    animation: wave-play 1800ms var(--ease) 900ms both;
  }
  .hero-stage .product-preview {
    animation: rise-in 1000ms var(--ease) 460ms both;
  }
  @supports (animation-timeline: view()) {
    .hero-stage {
      perspective: 1800px;
    }
    .hero-stage .product-preview {
      transform-origin: 50% 0%;
      animation: tilt-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
  }
}
@keyframes line-in {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes wave-load {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes wave-play {
  from {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes tilt-in {
  from {
    transform: rotateX(16deg) scale(0.93) translateY(24px);
  }
  to {
    transform: none;
  }
}

/* Wide screens */
@media (min-width: 1600px) {
  :root {
    --wrap: 1360px;
    font-size: 17px;
  }
  .wrap.narrow {
    --wrap: 960px;
  }
  .lead {
    font-size: 21px;
  }
  .header-row {
    max-width: 1280px;
  }
  .product-preview {
    max-width: 1300px;
  }
  .feature-row-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* Tablets */
@media (max-width: 1100px) {
  .site-nav a {
    padding: 0 10px;
  }
  .feature-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-band .stat:nth-child(3) {
    border-left: 0;
  }
  .stats-band .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .news-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .section-head.split,
  .integration-columns,
  .news-card,
  .faq,
  .account-grid,
  .download-grid,
  .feature-row-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-row.flip .feature-visual {
    order: 0;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Phones and small tablets: the links move into a menu behind one button */
@media (max-width: 900px) {
  .site-nav {
    position: fixed;
    top: 80px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    padding: 8px;
    border-radius: 24px;
    background: var(--menu-bg);
    box-shadow:
      inset 0 0 0 1px var(--line-2),
      var(--shadow-overlay);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity 180ms var(--ease),
      transform var(--enter) var(--ease),
      visibility 0s var(--enter);
  }
  .site-nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      opacity 180ms var(--ease),
      transform var(--enter) var(--ease);
  }
  .site-nav a {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
  }
  .site-nav a:hover {
    background: var(--ghost-bg-hover);
  }
  .menu-toggle {
    display: block;
  }
  .header-cta {
    margin-left: auto;
  }
  /* The open menu needs a surface behind the bar, even at the page top. */
  .site-header:has(.site-nav.open) .header-row::before {
    opacity: 1;
    transform: none;
  }
  .story-step {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-text {
    max-width: 640px;
  }
}
@media (max-width: 640px) {
  .site-header {
    inset: 8px 0 auto;
    padding-inline: 8px;
  }
  .header-row {
    height: 56px;
    gap: 8px;
    padding: 0 6px 0 12px;
  }
  .site-nav {
    top: 72px;
    left: 8px;
    right: 8px;
  }
  .brand {
    font-size: 16px;
  }
  .cta-long {
    display: none;
  }
  .hero {
    padding-top: 116px;
  }
  .page-hero {
    padding-top: 112px;
  }
  .hero h1 {
    margin: 26px 0 20px;
    font-size: clamp(42px, 13.4vw, 64px);
  }
  .btn.large {
    width: 100%;
  }
  .cta-row {
    width: 100%;
  }
  .product-preview {
    padding: 5px;
    border-radius: 16px;
  }
  .product-preview .shot {
    border-radius: 11px;
  }
  .product-preview figcaption {
    flex-direction: column;
    padding: 10px 6px 4px;
  }
  .feature-grid,
  .stat-grid,
  .plans,
  .platforms,
  .news-groups {
    grid-template-columns: minmax(0, 1fr);
  }
  .btn {
    white-space: normal;
    text-align: center;
  }
  .stats-band .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-band .stat {
    padding: 20px 14px;
  }
  .stat {
    padding: 20px;
  }
  .feature-card {
    padding: 22px;
  }
  .plan-price b {
    font-size: 46px;
  }
  .integration dl {
    margin-left: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .integration dd {
    margin-bottom: 8px;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .facts dd {
    margin-bottom: 10px;
  }
  .steps li {
    padding: 18px 18px 18px 62px;
  }
  .steps li::before {
    left: 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bottom {
    flex-direction: column;
  }
  th,
  td {
    padding: 12px 14px;
  }
}
@media (max-width: 380px) {
  .header-cta {
    padding: 0 12px;
  }
  /* Only the mark; the link keeps its accessible name. */
  .brand {
    gap: 0;
    font-size: 0;
  }
  .stats-band .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats-band .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Reduced transparency: the floating layer becomes opaque. */
@media (prefers-reduced-transparency: reduce) {
  .header-row::before {
    background: var(--menu-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lightbox::backdrop {
    background: rgba(6, 5, 9, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}