/* ============================================================
   Numivo — marketing site
   True-black cinematic. One accent. Hairline borders. Grain.
   ============================================================ */

:root {
  --bg: #0e1011;
  --bg-raise: #121416;
  --bg-card: #121416;
  --line: #1c1e22;
  --line-strong: #26292f;
  --ink: #f8fafc;
  --ink-dim: #9ca3af;
  --ink-faint: #6b7280;
  --accent: #5865f2;
  --accent-hi: #7c88f8;
  --accent-ink: #d6dafd;
  --good: #7c88f8;
  --radius: 8px;
  --radius-lg: 12px;
  /* Inter, lokal ausgeliefert — @font-face steht am Dateiende.
     Die Rangfolge entsteht hier nicht mehr ueber zwei Schriftarten, sondern
     ueber Staerke und Laufweite: Ueberschriften sehr fett und eng gesetzt,
     Fliesstext normal und offen. */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 64px;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  /* Fluid: leicht größer auf kleinen Screens, kompakt auf Desktop */
  font-size: clamp(16px, 17.6px - 0.125vw, 17.2px);
  line-height: 1.65;
  overflow-x: hidden;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  body { animation: pageIn 0.45s ease both; }
  @keyframes pageIn { from { opacity: 0; } }
}

/* subtle dark scrollbar */
html { scrollbar-color: #2a2e35 var(--bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #2a2e35;
  border-radius: 4px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #3a3f48; }

::selection { background: rgba(88, 101, 242, 0.35); color: #fff; }

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

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

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

/* ---- accessibility: visible keyboard focus (WCAG 2.4.7) ---- */
:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 2px; }

@media (prefers-contrast: more) {
  :root { --ink-dim: #d4d4d8; --ink-faint: #a1a1aa; --line: rgba(255,255,255,0.25); }
}

/* ---- grain overlay ---- */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- skip link ---- */
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 3000;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---- layout primitives ---- */
.wrap {
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
}

section { position: relative; }

.section-pad { padding-block: clamp(72px, 11vw, 140px); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Rangfolge über die Stärke: h3 sitzt eine Stufe unter h1/h2 und wird
   weniger eng gesetzt — enge Laufweite trägt nur in grossen Graden, in
   kleinen kleben die Buchstaben dann. */
h3 { font-weight: 700; letter-spacing: -0.015em; }

h2 { font-size: clamp(32px, 4.8vw, 56px); margin-bottom: 16px; }

/* Das hervorgehobene Wort in einer Überschrift.
   Die Klasse heisst historisch "serif-accent", ist aber keine Serife — sie
   setzt dasselbe Schriftbild wie die Überschrift und hebt nur ueber die Farbe
   ab. Frueher lag hier ein Farbverlauf; ein Vollton ist ruhiger und bleibt
   auch bei hohem Kontrastmodus und im Ausdruck lesbar. */
.serif-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--accent-hi);
}

.lede {
  max-width: 58ch;
  color: var(--ink-dim);
  font-size: clamp(16px, 1.6vw, 18px);
}

/* ---- reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.hidden { transform: translateY(-100%); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.nav.scrolled {
  background: rgba(5, 5, 6, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand svg { width: 26px; height: 26px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 8px 13px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

/* language switch */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.03);
}
.lang-switch button {
  padding: 4px 11px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  transition: color 0.2s ease, background 0.2s ease;
}
.lang-switch button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.lang-switch button:hover { color: var(--ink); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #5865f2, #7c88f8);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
}
/* premium sheen sweep on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  translate: -130% 0;
  transition: translate 0.05s;
  pointer-events: none;
}
.btn-primary:hover::after { translate: 130% 0; transition: translate 0.65s ease; }
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); }
.btn-lg { padding: 14px 32px; font-size: 15px; border-radius: 4px; }

/* burger */
.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 4px;
  place-items: center;
  border: 1px solid var(--line);
}
.burger svg { width: 20px; height: 20px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .lines { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 48px);
  padding-bottom: 64px;
  overflow: clip;
}

/* aurora backdrop */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-glow::before,
.hero-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: drift 18s ease-in-out infinite alternate;
}
.hero-glow::before {
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  left: -12%; top: -22%;
  background: radial-gradient(circle at 40% 40%, rgba(88, 101, 242, 0.35), transparent 65%);
}
.hero-glow::after {
  width: 44vw; height: 44vw;
  max-width: 560px; max-height: 560px;
  right: -10%; top: 10%;
  background: radial-gradient(circle at 60% 40%, rgba(88, 101, 242, 0.18), transparent 65%);
  animation-delay: -8s;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 6%, 0) scale(1.08); }
}

/* faint grid floor */
.hero-grid {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(600px) rotateX(58deg) scale(1.6);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.55), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.55), transparent 80%);
}

.hero-inner { position: relative; z-index: 1; text-align: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 28px;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

.hero h1 {
  font-size: clamp(42px, 7.6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-inline: auto;
  max-width: 15ch;
}

.hero .lede {
  margin: 22px auto 0;
  text-align: center;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-faint);
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--good); }

/* hero viewport mock */
.hero-visual {
  position: relative;
  z-index: 1;
  margin: clamp(48px, 7vw, 88px) auto 0;
  width: min(980px, 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0c0c10, #08080a);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.55), 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.hero-visual .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.hero-visual .bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.hero-visual .bar span {
  margin-left: 10px;
  font-size: 12px;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
}
.hero-visual svg.scene { width: 100%; height: auto; }

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.logos { border-block: 1px solid var(--line); padding-block: 34px; overflow: hidden; }
.logos p {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-weight: 600;
  margin-bottom: 22px;
}
.marquee {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.marquee span:hover { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   COMPARE SLIDER
   ============================================================ */
.compare-frame {
  margin-top: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: #08080a;
  box-shadow: 0 30px 90px -40px rgba(0, 0, 0, 0.9);
}
.compare {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.compare svg { width: 100%; height: auto; display: block; }
.compare .after-pane {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.compare .handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare .handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 9l-3 3 3 3M16 9l3 3-3 3'/%3E%3C/svg%3E");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.compare input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.compare .tag {
  position: absolute;
  bottom: 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 3px;
  background: rgba(8, 8, 10, 0.75);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.compare .tag.before { left: 14px; color: var(--ink-dim); }
.compare .tag.after { right: 14px; color: var(--accent-ink); border-color: rgba(88, 101, 242, 0.45); }

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.feature-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  padding: 28px 26px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(88, 101, 242, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.feature-card:hover { border-color: rgba(88, 101, 242, 0.35); transform: translateY(-3px); }
.feature-card:hover::before { opacity: 1; }
.feature-card .icon {
  width: 44px; height: 44px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.25);
  margin-bottom: 20px;
}
.feature-card .icon svg { width: 22px; height: 22px; color: var(--accent-hi); }
.feature-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.feature-card p { font-size: 14.5px; color: var(--ink-dim); }

/* ============================================================
   FEATURES SHOWCASE (homepage, Dash-style horizontal cards)
   ============================================================ */
.feat-show {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  margin-top: 52px;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.feat-show::-webkit-scrollbar { display: none; }
.show-card {
  flex: 0 0 min(320px, 84%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}
.show-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.1), transparent 60%), var(--bg-raise);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.55);
}
.show-card:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.show-card figure { aspect-ratio: 16 / 10; background: #0d0f12; }
.show-card figure svg { width: 100%; height: 100%; display: block; }
.show-card .body { padding: 16px 18px 18px; display: grid; gap: 8px; justify-items: start; }
.show-card h3 { font-size: 16px; }
.show-card p { font-size: 13.5px; color: var(--ink-dim); }
.show-card .tag-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.12);
  color: var(--accent-hi);
  margin-top: 4px;
}
/* auto-scrolling marquees: snapping would fight the motion */
.auto-scroll { scroll-snap-type: none !important; }
.auto-scroll > * { scroll-snap-align: none !important; }

/* arrows for these carousels are visible on every screen size */
.feat-show + .car-nav,
.quotes + .car-nav { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.feat-show + .car-nav button,
.quotes + .car-nav button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.feat-show + .car-nav button:hover:not(:disabled),
.quotes + .car-nav button:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.22);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.55);
}
.feat-show + .car-nav button:active:not(:disabled),
.quotes + .car-nav button:active:not(:disabled) { transform: translateY(0) scale(0.94); }
.feat-show + .car-nav button:focus-visible,
.quotes + .car-nav button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.feat-show + .car-nav button:disabled,
.quotes + .car-nav button:disabled { opacity: 0.3; cursor: default; }
.feat-show + .car-nav svg,
.quotes + .car-nav svg { width: 18px; height: 18px; }
/* pause control for the moving carousels (WCAG 2.2.2) */
.car-nav .car-pause svg + svg { display: none; }
.car-nav .car-pause[aria-pressed="true"] svg { display: none; }
.car-nav .car-pause[aria-pressed="true"] svg + svg { display: block; }

@media (hover: none) {
  .show-card:hover { transform: none; }
}

/* ============================================================
   WORKFLOW STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 52px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 18px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-dim); }

/* engines strip */
.engines {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.engine-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 60%);
}
.engine-card svg { width: 40px; height: 40px; flex: none; color: var(--ink); opacity: 0.9; }
.engine-card strong { display: block; font-family: var(--font-display); font-size: 16px; }
.engine-card span { font-size: 13.5px; color: var(--ink-dim); }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.metric {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align: center;
  background: var(--bg-raise);
}
.metric b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.metric span {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  margin-top: 52px;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 min(360px, 84%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease, background 0.28s ease;
}
.quote:hover {
  border-color: rgba(88, 101, 242, 0.5);
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.07), transparent 55%), var(--bg-raise);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.85), 0 0 26px -14px rgba(0, 0, 0, 0.55);
}
.quote .avatar { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.quote:hover .avatar { transform: scale(1.06); }

/* precise 5-star rating: orange fill clipped to --fill */
.stars-5 {
  --fill: 100%;
  display: block;
  width: 86px;
  height: 15px;
  flex: none;
  background: linear-gradient(90deg, var(--accent-hi) var(--fill), rgba(255, 255, 255, 0.16) var(--fill));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(17.5)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(35)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(52.5)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(70)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(17.5)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(35)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(52.5)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3Cpath transform='translate(70)' d='M8 1.2l2 4.1 4.5.6-3.3 3.2.8 4.5L8 11.4l-4 2.1.8-4.5L1.5 5.9l4.5-.6z'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}
.quote p {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.quote p::before { content: "“"; color: var(--accent-hi); }
.quote p::after { content: "”"; color: var(--accent-hi); }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #5865f2, #7c88f8);
}
.quote .avatar.v2 { background: linear-gradient(135deg, #e5e7eb, #5865f2); }
.quote .avatar.v3 { background: linear-gradient(135deg, #9ca3af, #7c88f8); }
.quote b { display: block; font-size: 14px; }
.quote span { font-size: 12.5px; color: var(--ink-faint); }

/* ============================================================
   PRICING
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 52px;
  align-items: stretch;
}
/* four cards need slightly tighter cards on narrower desktops */
@media (min-width: 1151px) and (max-width: 1280px) {
  .plans { gap: 12px; }
  .plan { padding: 26px 20px; }
  .plan .price { font-size: 38px; }
}
/* below that a 4-across row leaves too little width for the flag and the
   discount ribbon to coexist — fall back to a 2×2 grid */
@media (min-width: 981px) and (max-width: 1150px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan li.excl svg { color: var(--ink-faint); }
.plan li.excl span { color: var(--ink-faint); }
.plan {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.plan.featured {
  border-color: rgba(88, 101, 242, 0.5);
  background:
    linear-gradient(180deg, rgba(88, 101, 242, 0.09), transparent 55%),
    var(--bg-raise);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.55);
}
.plan .flag {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* while a discount ribbon occupies the top-right corner the flags move to
   the left edge — centred flags would collide on narrower cards */
body.has-deal .plan .flag { left: 18px; translate: none; }
/* secondary flag (e.g. Lifetime): outlined so it never competes with
   the filled "Most popular" flag on the Pro card */
.plan .flag.flag-alt {
  background: var(--bg-raise);
  border: 1px solid rgba(88, 101, 242, 0.55);
  color: var(--ink);
  font-size: 10px;
  padding: 4px 11px;
  animation: none;
}
.plan h3 { font-size: 17px; }
.plan .price {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan .price small {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.plan ul { list-style: none; display: grid; gap: 11px; font-size: 14.5px; color: var(--ink-dim); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--good); }
.plan .btn { margin-top: auto; }
.pricing-note {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}

/* pricing section: centered like Dash */
#pricing > .wrap > .kicker { display: flex; justify-content: center; }
#pricing > .wrap > h2, #pricing > .wrap > .lede { text-align: center; margin-inline: auto; }
#pricing .trust-row { justify-content: center; }
#pricing .bill-toggle { display: inline-flex; }
#pricing > .wrap { text-align: center; }
#pricing .plans, #pricing .table-scroll, #pricing .guarantees { text-align: left; }

/* billing toggle: monthly / annual */
.bill-toggle {
  position: relative;
  display: inline-flex;
  gap: 4px;
  margin-top: 26px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
/* sliding thumb glides between the two options */
.bill-thumb {
  position: absolute;
  top: 4px; bottom: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent), var(--accent-hi));
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
  z-index: 0;
  transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.bill-toggle.has-thumb button { position: relative; z-index: 1; }
.bill-toggle.has-thumb button[aria-pressed="true"] { background: none; box-shadow: none; }
.bill-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: background 0.25s ease, color 0.25s ease;
}
.bill-toggle button[aria-pressed="true"] {
  background: linear-gradient(to right, var(--accent), var(--accent-hi));
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
}
.save-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2.5px 9px;
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.16);
  color: #d1d5db;
  white-space: nowrap;
}
.bill-toggle button[aria-pressed="true"] .save-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.plan .price .amount { letter-spacing: -0.03em; display: inline-block; }

/* price switch: numbers roll in, period label fades */
[data-price-m].flip .amount,
small[data-price-m].flip { animation: price-roll 0.46s cubic-bezier(0.22, 1, 0.36, 1); }
small[data-price-m] { display: inline-block; }
@keyframes price-roll {
  0% { opacity: 0; transform: translateY(-15px) scale(0.93); filter: blur(4px); }
  55% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.plan .price small { transition: opacity 0.3s ease; }
.plan .price.dim small { opacity: 0; }
.save-pill.pop { animation: pill-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pill-pop {
  0% { transform: scale(0.55); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* trust row (social proof above plans) */
.trust-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  flex-wrap: wrap;
}
.stars { display: inline-flex; gap: 2px; color: #7c88f8; }
.stars svg { width: 16px; height: 16px; }

/* plan microcopy (value framing) */
.plan .micro {
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 10px;
}

/* risk-reversal badges */
.guarantees {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
}
.guarantees li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
}
.guarantees svg { width: 18px; height: 18px; flex: none; color: var(--good); }

/* comparison table */
.table-scroll {
  overflow-x: auto;
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  padding: 20px 22px 6px;
}
.compare-table th, .compare-table td {
  padding: 13px 18px;
  text-align: center;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
}
.compare-table thead th {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  padding-top: 18px;
}
.compare-table thead th small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-top: 2px;
}
.compare-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  font-size: 13.5px;
}
.compare-table .hl {
  background: rgba(88, 101, 242, 0.07);
  color: var(--ink);
}
.compare-table thead .hl {
  color: var(--accent-hi);
  box-shadow: 0 2px 0 var(--accent) inset;
}
.compare-table .ok { color: var(--good); font-weight: 700; }
.compare-table .no { color: var(--ink-faint); opacity: 0.6; }
.compare-table tfoot td { padding: 18px; }
.compare-table tfoot .btn { width: 100%; padding: 10px 14px; font-size: 13px; }

@media (max-width: 620px) {
  .guarantees { gap: 10px 18px; padding: 14px 16px; }
  .guarantees li { font-size: 12.5px; }
  .compare-table tbody th { min-width: 150px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { margin-top: 48px; display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
/* category sections */
.faq-group { display: grid; gap: 10px; }
.faq-group + .faq-group { margin-top: 30px; }
.faq-group-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.faq-group-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: rgba(88, 101, 242, 0.35); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain;
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 22px 20px; color: var(--ink-dim); font-size: 14.5px; max-width: 65ch; }
.faq-item[open] .faq-body { animation: faq-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes faq-in {
  from { opacity: 0; translate: 0 -6px; }
}

/* FAQ page: search + category chips */
.faq-tools {
  max-width: 820px;
  margin: 36px auto 0;
  display: grid;
  gap: 16px;
}
.faq-tools .docs-search { margin-bottom: 0; padding-block: 12px; font-size: 15px; }
.faq-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.faq-cats button {
  padding: 7px 16px;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.faq-cats button:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.faq-cats button[aria-pressed="true"] {
  background: linear-gradient(to right, var(--accent), var(--accent-hi));
  border-color: transparent;
  color: #fff;
}
.faq-empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 36px 0;
  font-size: 15px;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
  text-align: center;
  border-top: 1px solid var(--line);
  overflow: clip;
}
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -40%;
  width: 800px; height: 500px;
  translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(88, 101, 242, 0.22), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.cta-final h2 { font-size: clamp(32px, 5.4vw, 60px); max-width: 18ch; margin-inline: auto; }
.cta-final .hero-actions { margin-top: 32px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site {
  border-top: 1px solid var(--line);
  padding: 56px 0 calc(40px + env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--ink-dim);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-grid h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--ink); }
.footer-brand p { max-width: 34ch; margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.socials a:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-faint);
}
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--ink); }

/* footer language picker (custom dropdown) */
.lang-picker { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--ink-dim);
  font: 600 13px var(--font-body);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lang-btn:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.lang-btn svg { width: 16px; height: 16px; flex: none; }
.lang-btn .chev { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.lang-btn[aria-expanded="true"] { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 168px;
  list-style: none;
  padding: 6px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(18, 20, 22, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.85);
  animation: lang-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-menu[hidden] { display: none; }
@keyframes lang-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
}
.lang-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-menu li:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.lang-menu li:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.lang-menu li[aria-selected="true"] { color: var(--accent-hi); font-weight: 600; }
.lang-menu li[aria-selected="true"]::after {
  content: "";
  width: 14px; height: 14px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c88f8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.consent {
  position: fixed;
  z-index: 1500;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin-inline: auto;
  max-width: 560px;
  background: rgba(12, 12, 15, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.consent.show { transform: none; opacity: 1; }
.consent h3 { font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.consent h3 svg { width: 17px; height: 17px; color: var(--accent-hi); }
.consent p { font-size: 13px; color: var(--ink-dim); }
.consent p a { text-decoration: underline; text-underline-offset: 3px; }
/* standard consent pattern: ALWAYS exactly three equal-width buttons —
   "Settings" is swapped for "Save selection" when the panel expands,
   so the row never changes its shape */
.consent .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.consent .btn {
  padding: 9px 14px;
  font-size: 13px;
  border-radius: 4px;
  justify-content: center;
  white-space: nowrap;
}
.consent .btn[hidden] { display: none; }
/* phones: accept/reject side by side, the third button spans the full width */
@media (max-width: 599px) {
  .consent .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent #ckSettings,
  .consent #ckSave { grid-column: 1 / -1; }
}
/* narrow phones: slightly tighter buttons so long FR/ES labels never clip */
@media (max-width: 480px) {
  .consent .btn { padding-inline: 8px; font-size: 12.5px; }
}

/* consent: granular settings */
.consent-cats { display: none; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; gap: 12px; }
.consent.expanded .consent-cats { display: grid; }
.consent-cat { display: flex; align-items: flex-start; gap: 12px; }
.consent-cat .txt b { display: block; font-size: 13.5px; }
.consent-cat .txt span { font-size: 12.5px; color: var(--ink-faint); }
.switch { position: relative; flex: none; width: 40px; height: 22px; margin-top: 2px; }
.switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.switch .track {
  position: absolute; inset: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line-strong);
  transition: background 0.2s ease;
  pointer-events: none;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: translate 0.2s ease;
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { translate: 18px 0; }
.switch input:disabled + .track { opacity: 0.55; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-page {
  padding-top: calc(var(--nav-h) + 64px);
  padding-bottom: 100px;
}
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 10px; }
.legal-page .updated { color: var(--ink-faint); font-size: 13px; margin-bottom: 40px; }
.legal-page h2 { font-size: 20px; margin: 40px 0 12px; }
.legal-page h3 { font-size: 16px; margin: 26px 0 8px; }
.legal-page p, .legal-page li { color: var(--ink-dim); font-size: 15px; }
.legal-page ul { padding-left: 22px; margin-block: 10px; display: grid; gap: 6px; }
.legal-page .placeholder {
  background: rgba(88, 101, 242, 0.12);
  border: 1px dashed rgba(88, 101, 242, 0.5);
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--accent-ink);
  font-size: 0.92em;
}
.legal-page .note-box {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 14px 18px;
  margin-block: 22px;
  font-size: 13.5px;
  color: var(--ink-dim);
  background: var(--bg-raise);
}
.legal-page a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* 404 */
.err-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}
.err-page .code {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(90px, 20vw, 180px);
  line-height: 1;
  color: var(--ink);
}

/* ============================================================
   CAROUSELS (small screens: swipe left/right through cards)
   ============================================================ */
.car-nav { display: none; }

@media (max-width: 980px) {
  .carousel {
    display: flex !important;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 2px 8px;
    scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * {
    flex: 0 0 min(340px, 84%);
    scroll-snap-align: center;
  }
  .carousel .plan.featured { transform: none; }
  /* room for the "Most popular" flag that floats 12px above its card —
     without this the scroll container clips it */
  .plans.carousel { padding-top: 16px; }

  .car-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
  }
  .car-nav button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.03);
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  }
  .car-nav button:hover:not(:disabled) {
    border-color: var(--accent);
    background: rgba(88, 101, 242, 0.22);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.55);
  }
  .car-nav button:active:not(:disabled) { transform: translateY(0) scale(0.94); }
  .car-nav button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
  .car-nav button:disabled { opacity: 0.3; cursor: default; }
  .car-nav svg { width: 18px; height: 18px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .plan.featured { transform: none; }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 20px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .burger { display: grid; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-primary { padding: 9px 14px; font-size: 13px; }
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero-actions .btn { width: 100%; max-width: 340px; }
}

@media (max-width: 460px) {
  .nav-cta .btn-primary { padding: 9px 13px; font-size: 12.5px; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 36px); }
  .steps, .engines { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .compare .tag { bottom: 10px; font-size: 10px; }
}

/* large screens: featured plan pops */
@media (min-width: 981px) {
  .plan.featured { transform: scale(1.03); }
  .plan.featured:hover { transform: scale(1.03) translateY(-4px); }
}

/* ============================================================
   SUBPAGE HERO
   ============================================================ */
.page-hero {
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 88px)) 0 clamp(32px, 5vw, 56px);
  position: relative;
  overflow: clip;
}
.page-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: -260px;
  width: 720px; height: 420px;
  translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(88, 101, 242, 0.16), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
}
.page-hero h1 {
  font-size: clamp(36px, 5.6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.page-hero .lede { margin-top: 14px; }
.page-hero .chip { margin-bottom: 18px; }

/* ---- chips / status badges ---- */
/* Phasenmarke im Fahrplan.
   War eine Kapsel mit Punkt davor — die Form, die auf jeder zweiten Seite
   steht. Jetzt eine gesetzte Marke: Versalien, gesperrt, mit einer Linie
   darunter. Die Phase unterscheidet sich durch Helligkeit und Linienstärke,
   nicht durch eine Umrandung. */
.chip {
  display: inline-block;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 600;
  /* Versalien brauchen mehr Luft als Gemeine, sonst kleben sie. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.chip.now   { color: var(--ink); border-bottom-color: var(--accent); border-bottom-width: 2px; }
.chip.next  { color: var(--ink-dim); }
.chip.later { color: var(--ink-faint); border-bottom-color: var(--line); }
.chip.done  { color: var(--ink-faint); }

/* ============================================================
   ROADMAP BOARD
   ============================================================ */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
  align-items: start;
}
.board-col { display: grid; gap: 12px; }
.board-col > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.board-col > header h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 10px; }
.board-col > header .count {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 9px;
}
.board-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  padding: 20px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.board-card:hover { border-color: rgba(88, 101, 242, 0.35); transform: translateY(-2px); }
.board-card h3 { font-size: 15px; margin-bottom: 6px; }
.board-card p { font-size: 13.5px; color: var(--ink-dim); }
.board-card .meta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.board-card .meta .eta { font-size: 12px; color: var(--ink-faint); }
.progress {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 14px;
}
.progress i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #7c88f8, var(--accent-hi));
  width: var(--p, 40%);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- roadmap: scroll-driven vertical timeline ----
   The glowing line grows with scroll (computed per frame from
   scrollY — reverse & fast scrolling stay perfectly in sync). */
.rm-flow {
  position: relative;
  max-width: 900px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding-bottom: 8px;
}
.rm-track {
  position: absolute;
  left: 50%;
  top: 6px; bottom: 6px;
  width: 3px;
  translate: -50% 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
}
.rm-progress {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #7c88f8, #5865f2 45%, #9ca3af);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.rm-phase {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 10px 0 26px;
}
.rm-phase .chip { background: var(--bg); }
.rm-item {
  position: relative;
  width: calc(50% - 44px);
  margin-bottom: 22px;
}
.rm-item.from-left { margin-right: auto; }
.rm-item.from-right { margin-left: auto; }
.rm-dot {
  position: absolute;
  top: 26px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid #3a3f48;
  z-index: 1;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.rm-item.from-left .rm-dot { left: calc(100% + 37px); }
.rm-item.from-right .rm-dot { right: calc(100% + 37px); }
.rm-item[data-phase="now"] .rm-dot.lit { background: #7c88f8; border-color: #7c88f8; box-shadow: 0 0 14px rgba(0, 0, 0, 0.55); }
.rm-item[data-phase="next"] .rm-dot.lit { background: #e5e7eb; border-color: #e5e7eb; box-shadow: 0 0 14px rgba(255, 255, 255, 0.7); }
.rm-item[data-phase="later"] .rm-dot.lit { background: #9ca3af; border-color: #9ca3af; box-shadow: 0 0 14px rgba(156, 163, 175, 0.8); }

/* directional reveals (horizontal slide-in, used by the timeline) */
.reveal.from-left { transform: translateX(-30px); }
.reveal.from-right { transform: translateX(30px); }
.reveal.in { transform: none; }

@media (max-width: 860px) {
  .rm-track { left: 9px; translate: 0; }
  .rm-item,
  .rm-item.from-left,
  .rm-item.from-right { width: auto; margin-left: 38px; margin-right: 0; }
  .rm-item.from-left .rm-dot,
  .rm-item.from-right .rm-dot { left: -35px; right: auto; }
  .rm-phase { text-align: left; padding-left: 38px; }
  .reveal.from-left, .reveal.from-right { transform: translateY(22px); }
  .reveal.in { transform: none; }
}

/* ============================================================
   DISCORD COMMUNITY EMBED (two-click, privacy-friendly)
   ============================================================ */
.discord-embed {
  position: relative;
  height: clamp(420px, 60vh, 600px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0c0e;
  box-shadow: 0 30px 90px -40px rgba(0, 0, 0, 0.9);
  margin-top: 44px;
}
.discord-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.discord-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(600px circle at 50% 30%, rgba(255, 255, 255, 0.14), transparent 60%),
    #0b0d10;
}
.discord-cover .inner { max-width: 460px; display: grid; gap: 14px; justify-items: center; }
.discord-cover svg.dc { width: 52px; height: 52px; color: var(--accent-hi); }
.discord-cover h3 { font-size: 20px; }
.discord-cover p { font-size: 13.5px; color: var(--ink-dim); }
.discord-cover .privacy-note { font-size: 12px; color: var(--ink-faint); }
.discord-cover .privacy-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   RELEASE NOTES TIMELINE (Steam-like history)
   ============================================================ */
.timeline {
  /* one source of truth: the line's x position and the indent */
  --tl-pad: 34px;
  --tl-x: 7px;
  position: relative;
  margin-top: clamp(32px, 5vw, 56px);
  padding-left: var(--tl-pad);
}
.timeline::before {
  content: "";
  position: absolute;
  left: var(--tl-x);
  translate: -50% 0;
  top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(88, 101, 242, 0.45) 55%, rgba(88, 101, 242, 0.12));
}
.release { position: relative; margin-bottom: 22px; }
.release::before {
  content: "";
  position: absolute;
  /* dead-centre on the line, whatever the indent is */
  left: calc(var(--tl-x) - var(--tl-pad));
  translate: -50% 0;
  top: 28px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink-faint);
}
.release.latest::before {
  border-color: var(--accent-hi);
  background: var(--accent);
}
.release-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  padding: 24px 26px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.release-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.7);
}
.release.latest .release-card {
  border-color: rgba(88, 101, 242, 0.45);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.06), transparent 50%), var(--bg-raise);
}
.release-card:hover { border-color: var(--line-strong); }
.release.latest .release-card:hover { border-color: rgba(88, 101, 242, 0.6); }
.release-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.release-head h2 {
  font-size: 23px;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Die neueste Version wird nicht durch Farbe hervorgehoben, sondern durch
   Gewicht und eine Marke am Rand — das bleibt auch bei Farbenblindheit und
   im Ausdruck erkennbar. */
.release.latest .release-head h2 {
  color: var(--ink);
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}
.release-head time { font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.release-name { font-size: 14px; color: var(--accent-hi); font-weight: 600; }
.release-card ul { list-style: none; margin-top: 14px; display: grid; gap: 9px; }
.release-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-dim); }
.tag {
  flex: none;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2.5px 9px;
  border-radius: 5px;
  min-width: 58px;
  text-align: center;
}
.tag.new { color: #aeb6fb; background: rgba(88, 101, 242, 0.14); }

/* expandable details per release (+ optional screenshots) */
.release-more {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.release-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-hi);
  transition: color 0.2s ease;
}
.release-more > summary::-webkit-details-marker { display: none; }
.release-more > summary::after {
  content: "";
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c88f8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.release-more[open] > summary::after { transform: rotate(180deg); }
.release-more > summary:hover { color: #fff; }
.release-detail {
  padding-top: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 72ch;
}
.release-more[open] .release-detail { animation: faq-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
/* drop an <img> in here and it just works */
.release-shot {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #0a0c0e;
}
.release-shot img,
.release-shot video {
  width: 100%;
  height: auto;
  display: block;
}
.release-shot figcaption {
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}
.tag.imp { color: #d1d5db; background: rgba(255, 255, 255, 0.08); }
.tag.fix { color: #9ca3af; background: rgba(156, 163, 175, 0.12); }

/* ============================================================
   DOCS (Stripe-like: sticky sidebar + content)
   ============================================================ */
.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 100px;
  align-items: start;
}
.docs-side {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 6px;
}
.docs-search {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 15px no-repeat;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.docs-search::placeholder { color: var(--ink-faint); }
.docs-side .group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 18px 0 8px;
}
.docs-side a {
  display: block;
  padding: 6px 12px;
  font-size: 13.5px;
  color: var(--ink-dim);
  border-left: 2px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.docs-side a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.docs-side a.active { color: var(--accent-hi); border-left-color: var(--accent); font-weight: 600; }

.docs-content > section { padding-bottom: 40px; }
.docs-content h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; margin-bottom: 10px; }
.docs-content section h2 {
  font-size: 24px;
  margin: 0 0 14px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.docs-content section:first-of-type h2 { border-top: 0; padding-top: 10px; }
.docs-content h3 { font-size: 16.5px; margin: 24px 0 8px; }
.docs-content p, .docs-content li { color: var(--ink-dim); font-size: 15px; }
.docs-content ul, .docs-content ol { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.docs-content a:not(.btn) { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

pre {
  background: #0a0c0e;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 14px 0;
  font: 500 13px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  color: #d1d9e4;
}
pre .c { color: #6b7280; }
pre .k { color: #aeb6fb; }
pre .s { color: #d1d5db; }
code {
  font: 500 0.9em ui-monospace, "Cascadia Code", Consolas, monospace;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  padding: 1.5px 6px;
  border-radius: 5px;
  color: var(--ink);
}
pre code { background: none; border: 0; padding: 0; color: inherit; }
kbd {
  font: 600 12px ui-monospace, Consolas, monospace;
  background: linear-gradient(180deg, #1f1f24, #14171b);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--ink);
}
.callout {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--ink-dim);
  background: var(--bg-raise);
}

.docs-content table, .req-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}
.docs-content th, .docs-content td, .req-table th, .req-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.docs-content th, .req-table th {
  color: var(--ink);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: 12px; }
  .docs-side {
    position: static;
    max-height: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    background: var(--bg-raise);
    margin-bottom: 20px;
  }
}

/* ============================================================
   INSTALL PAGE
   ============================================================ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}
.platform-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.platform-card:hover { border-color: rgba(88, 101, 242, 0.35); transform: translateY(-3px); }
.platform-card svg.os { width: 36px; height: 36px; color: var(--ink); }
.platform-card h3 { font-size: 17px; }
.platform-card .meta { font-size: 12.5px; color: var(--ink-faint); }
.platform-card .btn { margin-top: auto; }

.tabs {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.02);
  gap: 3px;
  margin: 28px 0 4px;
}
.tabs button {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: background 0.2s ease, color 0.2s ease;
}
.tabs button[aria-selected="true"] {
  background: linear-gradient(to right, var(--accent), var(--accent-hi));
  color: #fff;
}
[data-panel][hidden] { display: none; }

.install-steps {
  counter-reset: istep;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  gap: 12px;
}
.install-steps li {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  padding: 18px 20px 18px 64px;
  font-size: 14.5px;
  color: var(--ink-dim);
}
.install-steps li::before {
  counter-increment: istep;
  content: counter(istep);
  position: absolute;
  left: 18px; top: 16px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
}
.install-steps b { color: var(--ink); }

/* ============================================================
   FEATURES PAGE (alternating media rows + animated demos)
   ============================================================ */
.feature-rows { display: grid; }
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(44px, 7vw, 80px);
  border-top: 1px solid var(--line);
}
.feature-row:first-child { border-top: 0; }
.feature-row.flip .feature-media { order: -1; }
.feature-copy .kicker { margin-bottom: 12px; }
.feature-copy h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.feature-copy p { color: var(--ink-dim); font-size: 15.5px; }
.feature-copy ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.feature-copy li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-dim); }
.feature-copy li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--good); }
.feature-media {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0c0e;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.feature-media svg { width: 100%; height: auto; display: block; }
.media-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 500;
}
.media-caption .rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 24px; }
  .feature-row.flip .feature-media { order: 0; }
  .platform-grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .release-head h2 { font-size: 19px; }
  .timeline { --tl-pad: 26px; }
}

/* ============================================================
   GOLDEN-STANDARD RESPONSIVE / TOUCH / A11Y POLISH
   ============================================================ */

/* Touch devices: WCAG 2.5.8 target size (≥44px) + no iOS input zoom */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .nav-links a { padding: 13px 16px; }
  .lang-switch button { padding: 8px 14px; min-height: 34px; }
  .faq-item summary { padding: 20px 22px; min-height: 48px; }
  .socials a { width: 44px; height: 44px; }
  .car-nav button { width: 48px; height: 48px; }
  .switch { width: 46px; height: 26px; }
  .switch .track::after { width: 20px; height: 20px; }
  .switch input:checked + .track::after { translate: 20px 0; }
  .docs-search { font-size: 16px; }
  .docs-side a { padding: 10px 12px; }
}

/* No sticky hover-lift on devices without hover */
@media (hover: none) {
  .feature-card:hover, .plan:hover, .board-card:hover,
  .platform-card:hover, .socials a:hover, .release-card:hover { transform: none; }
  .btn-primary:hover { transform: none; filter: none; }
}

/* German long words: hyphenate on narrow screens */
@media (max-width: 700px) {
  p, li, summary, h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
  .lede { font-size: 17px; }
}

/* Back-to-top button */
.to-top {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18, 20, 22, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, border-color 0.2s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: rgba(88, 101, 242, 0.5); }
.to-top svg { width: 19px; height: 19px; }

/* ============================================================
   PROMO BAR (discount campaigns, configured in promo.js)
   ============================================================ */
:root { --promo-h: 38px; }
.promo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  /* fixed floor — --promo-h is OUTPUT by JS from the measured height,
     never read here (self-referencing min-height would inflate forever) */
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 4px 44px 4px 12px;
  background: linear-gradient(90deg, #232a7e, #4650db 46%, #2c3499);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* soft light sweep across the banner */
.promo-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.13) 48%, rgba(255, 255, 255, 0.03) 52%, transparent 70%);
  transform: translateX(-100%);
  animation: promoSheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoSheen {
  0%, 55% { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}
.promo-flag {
  padding: 2px 8px;
  border-radius: 3px;
  background: #fff;
  color: #2c3499;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  animation: promoPulse 2.4s ease-in-out infinite;
}
@keyframes promoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
/* live countdown */
.promo-cd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cd-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
  padding: 2px 5px 1px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cd-num {
  font: 700 12.5px/1.1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.cd-num.tick { animation: cdTick 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes cdTick {
  0% { transform: translateY(-90%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.cd-lab {
  font-size: 7.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.75;
  margin-top: 0;
}
.cd-sep {
  font-weight: 800;
  opacity: 0.55;
  animation: cdBlink 1s steps(1) infinite;
}
@keyframes cdBlink { 50% { opacity: 0.15; } }
.promo-bar .promo-cta {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 3px;
  background: #fff;
  color: #2c3499;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.5);
}
.promo-bar .promo-cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
}
.promo-bar .promo-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.promo-bar .promo-x {
  position: absolute;
  right: 5px;
  top: 50%;
  translate: 0 -50%;
  width: 28px; height: 28px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.8);
}
.promo-bar .promo-x:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.promo-bar .promo-x svg { width: 14px; height: 14px; }

body.has-promo .nav { top: var(--promo-h); }
body.has-promo { scroll-padding-top: calc(var(--nav-h) + var(--promo-h) + 16px); }
body.has-promo .hero,
body.has-promo .page-hero,
body.has-promo .docs-layout,
body.has-promo .legal-page { padding-top: calc(var(--nav-h) + var(--promo-h) + 24px); }

@media (max-width: 720px) {
  .promo-bar { font-size: 12px; gap: 5px 10px; padding-right: 44px; }
  .promo-bar .promo-msg { display: none; }
  .cd-cell { min-width: 32px; }
}

/* ---- promo pricing: struck regular price + discounted price ---- */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.plan .price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 10px;
}
/* native line-through: the browser centres it on the font's own metrics,
   so it always sits exactly through the middle of the digits */
.plan .price .price-was {
  /* own line above the current price: consistent across all cards and a
     stronger anchor than an inline struck number */
  flex: 0 0 100%;
  margin-bottom: -6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  animation: wasStrike 0.5s 0.35s ease backwards;
}
@keyframes wasStrike {
  from { text-decoration-color: transparent; opacity: 0.4; }
  to { text-decoration-color: currentColor; opacity: 1; }
}
/* small inline chip — comparison-table headers only */
.deal-chip {
  align-self: center;
  padding: 3px 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: dealPop 0.5s 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes dealPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- rotated corner ribbon on the plan cards ---- */
.deal-ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  overflow: hidden;
  border-top-right-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 2;
}
.deal-ribbon span {
  position: absolute;
  display: block;
  top: 5px;
  right: -70px;
  width: 190px;
  padding: 7px 0;
  text-align: center;
  transform: rotate(35deg);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  animation: ribbonIn 0.6s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes ribbonIn {
  from { transform: rotate(35deg) translate(60%, -60%); opacity: 0; }
  to { transform: rotate(35deg) translate(0, 0); opacity: 1; }
}
/* light sweep so the eye catches it immediately */
.deal-ribbon span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: ribbonShine 3.6s 1.2s ease-in-out infinite;
}
@keyframes ribbonShine {
  0%, 55% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

/* ---- seat picker: volume licensing ---- */
.seat-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.seat-picker > label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-dim);
}
.seat-label { font-size: 13.5px; font-weight: 600; color: var(--ink-dim); }
/* custom listbox — the native <select> popup is OS-rendered and can't be styled */
.seat-drop { position: relative; }
.seat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 108px;
  height: 40px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--bg-raise);
  color: var(--ink);
  font: 700 15px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.seat-btn:hover { border-color: var(--accent); background: rgba(88, 101, 242, 0.1); }
.seat-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.seat-btn .chev { width: 15px; height: 15px; opacity: 0.65; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.seat-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}
.seat-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.seat-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 216px;
  max-height: 290px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  padding: 6px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(18, 20, 22, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.9);
  animation: lang-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
}
.seat-menu[hidden] { display: none; }
.seat-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.14s ease, color 0.14s ease;
}
.seat-menu li:hover { background: rgba(88, 101, 242, 0.16); color: var(--ink); }
.seat-menu li:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.seat-menu li[aria-selected="true"] { background: rgba(88, 101, 242, 0.24); color: #fff; }
.seat-menu li .off {
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(124, 136, 248, 0.2);
  border: 1px solid rgba(124, 136, 248, 0.4);
  color: #cdd3ff;
  font-size: 11.5px;
  font-weight: 700;
}
.seat-menu li[aria-selected="true"] .off { background: rgba(255, 255, 255, 0.2); border-color: transparent; color: #fff; }
.seat-menu .seat-more {
  position: sticky;
  bottom: -6px;
  margin-top: 4px;
  justify-content: center;
  font-size: 13px;
  color: var(--accent-hi);
  background: rgba(18, 20, 22, 0.97);
  border-top: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
}
.seat-menu .seat-more:hover { background: rgba(88, 101, 242, 0.18); color: #fff; }
.seat-badge {
  padding: 4px 11px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.seat-badge.pop { animation: dealPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

.plan .seat-total {
  margin-top: -10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ---- real savings line under the price ---- */
.price-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: -12px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.price-note .save-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.16);
  border: 1px solid rgba(88, 101, 242, 0.4);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.price-note .save-badge svg { width: 12px; height: 12px; color: var(--accent-hi); }
.price-note .per-day { color: var(--ink-faint); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .deal-ribbon span,
  .deal-ribbon span::after,
  .plan .price .price-was { animation: none !important; }
  .deal-ribbon span { transform: rotate(35deg); }
}
/* comparison-table header: keep the struck price subtle */
.compare-table th small .price-was,
.compare-table th small s {
  color: var(--ink-faint);
  margin-right: 4px;
}
/* legal footnote for the campaign */
.pricing-note.promo-legal {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .promo-bar::after,
  .promo-flag,
  .cd-num.tick,
  .cd-sep,
  .plan .price .price-was::after,
  .deal-chip { animation: none !important; }
  .plan .price .price-was::after { transform: scaleX(1); }
}

/* ============================================================
   SUPPORT PAGE — form
   ============================================================ */
/* support: heading + form centered */
#form { text-align: center; }
#form .support-form { text-align: left; margin-inline: auto; }
#form .btn { margin-inline: auto; display: flex; }
#form .form-note { text-align: center; }

.support-form {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  padding: clamp(22px, 4vw, 36px);
  max-width: 720px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.05);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.support-form .form-note {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 14px;
}
.support-form .btn { margin-top: 18px; }
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SMALL DELIGHTS — the details people notice
   ============================================================ */

/* reading progress line (docs & legal pages) */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 1400;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  pointer-events: none;
}
body.has-promo .read-progress { top: var(--promo-h); }

/* brand mark gets a subtle lift on hover */
.brand svg { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover svg { transform: translateY(-2px) rotate(-6deg); }

/* footer links: underline slides in */
.footer-grid a, .footer-bottom nav a {
  position: relative;
  background-image: linear-gradient(var(--accent-hi), var(--accent-hi));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.footer-grid a:hover, .footer-bottom nav a:hover { background-size: 100% 1px; }

/* showcase thumbnails breathe on hover */
.show-card figure { overflow: hidden; }
.show-card figure svg { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.show-card:hover figure svg { transform: scale(1.05); }

/* comparison table: row highlight follows the cursor */
.compare-table tbody tr { transition: background 0.18s ease; }
.compare-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

/* FAQ rows lift a hair */
.faq-item { transition: border-color 0.25s ease, transform 0.25s ease; }
.faq-item:hover { transform: translateX(2px); }

/* install step numbers glow when you read them */
.install-steps li { transition: border-color 0.25s ease; }
.install-steps li::before { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.install-steps li:hover { border-color: var(--line-strong); }
.install-steps li:hover::before {
  box-shadow: 0 0 18px -2px rgba(0, 0, 0, 0.55);
  transform: scale(1.06);
}

/* back-to-top arrow nudges */
.to-top svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.to-top:hover svg { transform: translateY(-2px); }

/* hero visual reacts to the pointer and drifts with scroll (set from JS) */
.hero-visual {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform: perspective(1200px) translateY(var(--py, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
/* parallax layers: a slower drift reads as depth */
.feature-media, .discord-embed {
  transform: translateY(var(--py, 0px));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* metric numbers while counting */
.metric b { font-variant-numeric: tabular-nums; }

/* code blocks: copy button */
.code-wrap { position: relative; }
.code-wrap pre { margin-top: 0; }
.code-copy {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: rgba(20, 22, 24, 0.9);
  color: var(--ink-dim);
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.22s ease, color 0.2s ease, border-color 0.2s ease;
}
.code-wrap:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.code-copy svg { width: 13px; height: 13px; }

/* docs search: result count */
.search-count {
  font-size: 12px;
  color: var(--ink-faint);
  margin: -8px 0 14px;
  min-height: 16px;
}
.docs-side mark, .faq-item mark {
  background: rgba(88, 101, 242, 0.22);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px;
}

/* transform-driven marquee: sub-pixel smooth, GPU composited
   (scrollLeft snaps to whole pixels and visibly judders at low speed) */
.marquee-host { overflow: hidden; }
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  backface-visibility: hidden;
}

@media (hover: none) {
  .quote:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bill-thumb { transition: none; }
  .brand:hover svg, .show-card:hover figure svg,
  .faq-item:hover, .to-top:hover svg, .quote:hover { transform: none; }
  .hero-visual { transform: none; }
}

/* Print: legal pages readable on paper */
@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; animation: none; }
  body::after, .nav, footer.site, .consent, .skip-link, .car-nav, .to-top,
  .hero-glow, .hero-grid, .burger { display: none !important; }
  .legal-page { padding-top: 0; }
  .legal-page h1, .legal-page h2, .legal-page h3,
  .legal-page p, .legal-page li, h1, h2, h3, p, li { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .placeholder { background: none !important; border-color: #999 !important; color: #000 !important; }
  .note-box, .callout { background: none !important; border-color: #999 !important; color: #000 !important; }
}

/* ============================================================
   BLOG
   ============================================================ */
/* cross-page transitions (progressive: browsers without the API ignore it) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

.blog-tools-row { display: flex; gap: 10px; align-items: stretch; }
.blog-tools-row .docs-search { flex: 1; }
.blog-sort {
  padding: 0 36px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-raise) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center / 16px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
}
.blog-sort:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.blog-cats button .cnt {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}
.blog-cats button[aria-pressed="true"] .cnt { background: rgba(255, 255, 255, 0.22); }

/* featured hero card */


/* ---- article page ---- */
.blog-article { padding-top: calc(var(--nav-h) + 48px); }
body.has-promo .blog-article { padding-top: calc(var(--nav-h) + var(--promo-h) + 48px); }
.blog-head { max-width: 780px; }
.blog-head h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 14px 0 12px; letter-spacing: -0.02em; }
.blog-head .lede { font-size: 16.5px; color: var(--ink-dim); max-width: 64ch; }
.blog-cover {
  margin: 28px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #0d0f12;
}
.blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 40px;
  align-items: start;
  margin-top: 26px;
}
.blog-content { max-width: 720px; font-size: 15.5px; line-height: 1.75; color: var(--ink-dim); }
.blog-content h2 { font-size: 23px; color: var(--ink); margin: 38px 0 12px; scroll-margin-top: calc(var(--nav-h) + 24px); letter-spacing: -0.01em; }
.blog-content h3 { font-size: 17.5px; color: var(--ink); margin: 26px 0 10px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.blog-content p { margin: 0 0 16px; }
.blog-content ul, .blog-content ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 7px; }
.blog-content a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.blog-content strong { color: var(--ink); }
.blog-content blockquote {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 0 16px;
  color: var(--ink);
  font-style: italic;
}
.blog-content img { max-width: 100%; border-radius: 4px; border: 1px solid var(--line); cursor: zoom-in; }
.blog-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blog-content th, .blog-content td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.blog-content th { color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.blog-content .table-scroll { overflow-x: auto; margin: 0 0 16px; }

.blog-toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  font-size: 13px;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.blog-toc h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 10px; }
.blog-toc ul { list-style: none; display: grid; gap: 2px; }
.blog-toc a {
  display: block; padding: 5px 8px; margin-left: -8px;
  border-radius: 4px; color: var(--ink-faint);
  transition: color 0.15s ease, background 0.15s ease;
}
.blog-toc a:hover { color: var(--ink); background: rgba(88, 101, 242, 0.1); }
.blog-toc a.active { color: var(--accent-hi); font-weight: 600; }

.blog-author {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 20px; margin-top: 40px;
}
.blog-author .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5865f2, #7c88f8);
  color: #fff; font-weight: 800; font-size: 18px; font-family: var(--font-display);
}
.blog-author small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.blog-author b { display: block; font-size: 14.5px; color: var(--ink); }
.blog-author div > span { font-size: 12.5px; color: var(--ink-dim); }
.blog-author .share { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); }
.blog-author .share a, .blog-author .share button {
  width: 34px; height: 34px; border-radius: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--ink-dim);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.blog-author .share a:hover, .blog-author .share button:hover { border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.blog-author .share svg { width: 15px; height: 15px; }

.blog-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 44px 0; }
.blog-pn .pn {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 20px; display: grid; gap: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.blog-pn .pn:hover { border-color: var(--accent); transform: translateY(-3px); }
.blog-pn .pn.next { text-align: right; }
.blog-pn small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.blog-pn b { font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.blog-related h2 { font-size: 20px; margin-bottom: 4px; }

/* image lightbox */
.blog-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: rgba(5, 6, 8, 0.92);
  padding: 4vmin; cursor: zoom-out;
  animation: lbIn 0.22s ease;
}
.blog-lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; }
@keyframes lbIn { from { opacity: 0; } }

@media (max-width: 1080px) {
  .blog-body-layout { grid-template-columns: 1fr; }
  .blog-toc { display: none; }
}
@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-pn { grid-template-columns: 1fr; }
  .blog-tools-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card img,
  .blog-card.flip-move, .read-more::after, .blog-lightbox { transition: none !important; animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---- blog index: Parqet-style sections ---------------------- */
.blog-browse { display: grid; gap: 56px; margin-top: 40px; }
.blog-sec { display: grid; gap: 16px; }
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.sec-head h2 {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sec-head > a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.18s ease, transform 0.18s ease;
}
.sec-head > a:hover { color: var(--accent-hi); transform: translateX(2px); }
.sec-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  align-self: center;
  order: -1;
  max-width: 0;
}

/* first row: two articles + the sidebar column */

/* three-across rows for the category sections */
.blog-row3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}


/* card meta: chip left, date right (like Parqet) */
.blog-card .meta { justify-content: space-between; width: 100%; }
.blog-card .body { flex: 1; }
.blog-card .read-more { margin-top: auto; padding-top: 4px; }

/* category chips — tonal variants inside the blurple/gray palette */
.tag-chip.cat-updates {
  background: rgba(88, 101, 242, 0.18);
  border-color: rgba(88, 101, 242, 0.5);
  color: #b8c0ff;
}
.tag-chip.cat-tutorials {
  background: rgba(124, 136, 248, 0.14);
  border-color: rgba(124, 136, 248, 0.42);
  color: #cdd3ff;
}

@media (max-width: 1080px) {
  .blog-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .blog-browse { gap: 44px; }
  .blog-row3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-head > a { transition: none !important; }
}

/* ---- article page: centred, distraction-free reading column ---- */
.blog-article > .wrap { max-width: 1180px; }

/* back button */
.blog-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px 0 12px;
  margin-bottom: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-raise);
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.blog-back-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.blog-back-btn:hover {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.14);
  color: #fff;
  transform: translateX(-2px);
}
.blog-back-btn:hover svg { transform: translateX(-2px); }
.blog-back-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

/* header, cover and body all share one centred column */
.blog-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.blog-head .meta { justify-content: center; }
.blog-head .lede { margin-inline: auto; }
.blog-cover { max-width: 980px; margin-inline: auto; }

.blog-body-layout {
  display: block;
  position: relative;
  margin-top: 30px;
}
.blog-content {
  max-width: 720px;
  margin-inline: auto;
}
/* the table of contents floats in the left margin so the text stays centred */
.blog-toc {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  max-height: calc(100vh - var(--nav-h) - 60px);
  overflow-y: auto;
  border-left: 0;
  border-right: 1px solid var(--line);
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
}
.blog-toc a { margin-left: 0; margin-right: -8px; }
.blog-body-layout > .blog-toc { position: sticky; float: left; }

.blog-author, .blog-pn, .blog-related { max-width: 860px; margin-inline: auto; }
.blog-related { text-align: center; }
.blog-related .blog-grid { text-align: left; }

@media (max-width: 1180px) {
  .blog-toc { display: none; }
  .blog-content { max-width: 720px; }
}

/* ---- article cards (restored) ---------------------------------- */
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.blog-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.55);
}
.blog-card figure { aspect-ratio: 16 / 10; overflow: hidden; background: #0d0f12; }
.blog-card h3 { font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.blog-card .body > p { font-size: 13.5px; color: var(--ink-dim); }
.blog-card.is-hidden { display: none; }

/* category chip on blog cards — base pill shape, colour comes from .cat-* */
.blog-card .tag-chip,
.blog-head .tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* card body + meta row (restored) */
.blog-card .body {
  padding: 18px 20px 20px;
  display: grid;
  gap: 9px;
  justify-items: start;
  align-content: start;
}
.blog-card .meta, .blog-head .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.blog-card .meta { justify-content: space-between; width: 100%; }
.blog-card .read-more { margin-top: auto; padding-top: 4px; }

/* ---- pricing controls: seat picker LEFT of the billing toggle ---- */
.pricing-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}
#pricing .pricing-controls .bill-toggle { display: inline-flex; }
.seat-picker { margin-top: 0; }

/* ---- volume licensing dialog (100+ seats) ---- */
.ent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 6, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ent-backdrop.show { opacity: 1; }
.ent-backdrop[hidden] { display: none; }
.ent-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(16, 18, 21, 0.98);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ent-backdrop.show .ent-dialog { transform: none; }
.ent-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: var(--ink-faint);
  transition: background 0.15s ease, color 0.15s ease;
}
.ent-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.ent-close svg { width: 16px; height: 16px; }
.ent-dialog h2 { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 8px; }
.ent-lede { font-size: 14px; color: var(--ink-dim); max-width: 52ch; margin-bottom: 22px; }
.ent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ent-field { display: grid; gap: 6px; }
.ent-field.ent-span { grid-column: 1 / -1; }
.ent-field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.ent-field input, .ent-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-raise);
  color: var(--ink);
  font: 500 14px/1.45 inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ent-field textarea { resize: vertical; min-height: 88px; }
.ent-field input::placeholder, .ent-field textarea::placeholder { color: var(--ink-faint); }
.ent-field input:focus-visible, .ent-field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}
.ent-error { margin-top: 12px; font-size: 13px; color: #f0a8b6; }
.ent-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}
.ent-note { font-size: 12px; color: var(--ink-faint); max-width: 34ch; }

@media (max-width: 560px) {
  .ent-dialog { padding: 24px 20px; }
  .ent-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ent-backdrop, .ent-dialog { transition: none !important; }
}

/* ---- engine multi-select inside the volume-licensing dialog ---- */
.ent-multi { position: relative; }
.ent-multi-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-raise);
  color: var(--ink-faint);
  font: 500 14px/1.45 inherit;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ent-multi-btn:hover { border-color: var(--accent); }
.ent-multi-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}
.ent-multi-btn .chev { width: 15px; height: 15px; flex: none; opacity: 0.65; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.ent-multi-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}
.ent-multi-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ent-multi-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-multi-value.has-sel { color: var(--ink); font-weight: 600; }

.ent-multi-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  z-index: 40;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  padding: 6px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(18, 20, 22, 0.98);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.9);
  animation: lang-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
}
.ent-multi-menu[hidden] { display: none; }
.ent-multi-menu .grp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: default;
}
.ent-multi-menu .grp + .grp,
.ent-multi-menu li[data-val] + .grp { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 11px; }
.ent-multi-menu .grp svg { width: 14px; height: 14px; color: var(--accent-hi); }
.ent-multi-menu li[data-val] {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.ent-multi-menu li[data-val]:hover { background: rgba(88, 101, 242, 0.14); color: var(--ink); }
.ent-multi-menu li[data-val]:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
/* custom checkbox square with a check that pops in */
.ent-multi-menu li[data-val]::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: transparent center / 11px no-repeat;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ent-multi-menu li[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.ent-multi-menu li[aria-selected="true"]::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  animation: dealPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* selected engines as removable chips under the field */
.ent-multi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.ent-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(88, 101, 242, 0.45);
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.16);
  color: #cdd3ff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  animation: dealPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ent-tag svg { width: 11px; height: 11px; opacity: 0.75; }
.ent-tag:hover { background: rgba(88, 101, 242, 0.3); border-color: var(--accent); color: #fff; }
.ent-tag:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ent-multi-menu, .ent-tag,
  .ent-multi-menu li[aria-selected="true"]::before { animation: none !important; }
}

/* ============================================================
   Kaufkraftanpassung — schmale Leiste über der Preistabelle
   ============================================================
   Bewusst ruhig: kein Countdown, keine Verknappung, keine Farbe, die zum
   Klicken drängt. Die Leiste ist eine Zustandsanzeige ("dein Preis ist
   angepasst"), keine Werbung — und Zustandsanzeigen dürfen nicht drängeln
   (DSA Art. 25). */
.ppp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto var(--sp-5);
  max-width: 760px;
  padding: 9px 16px;
  border-radius: 3px;
  /* Farben, Schriftgroesse und Text kommen aus der Verwaltung (ppp.js setzt
     sie als Inline-Stil). Hier stehen nur noch Form und Verhalten. */
  line-height: 1.45;
  text-align: left;
  /* Startzustand der Einblendung. Die Leiste steht ausserhalb des
     Textflusses der Karten, deshalb verschiebt das Einblenden nichts. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2, .7, .3, 1);
}

.ppp-bar.is-in {
  opacity: 1;
  transform: none;
}

.ppp-flag {
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .ppp-bar { transition: none; }
}

/* Während der Checkout-Broker antwortet: Knopf sichtbar beschäftigt, aber
   nicht deaktiviert — ein deaktivierter Knopf verliert den Tastaturfokus. */
a[aria-busy="true"] {
  opacity: .72;
  pointer-events: none;
}

/* Hinweis, wenn der angepasste Preis kurzfristig nicht zu haben ist.
   Ehrlich, kurz, und ohne Grund — der Grund ginge niemanden etwas an und
   würde Angreifern verraten, welche Prüfung angeschlagen hat. */
.ppp-note {
  max-width: 760px;
  margin: 0 auto var(--sp-4);
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2, rgba(255, 255, 255, .04));
  color: var(--text-secondary);
  font-size: 13.5px;
  text-align: left;
}

/* Banner unten statt oben — dieselbe Leiste, anderer Platz. */
.ppp-bar[data-pos="bottom"] {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(6px);
  z-index: 60;
  width: calc(100% - 32px);
  max-width: 760px;
  margin: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.ppp-bar[data-pos="bottom"].is-in { transform: translateX(-50%); }

/* Beim Scrollen sichtbar lassen. Nur oben sinnvoll — unten klebt die Leiste
   ohnehin schon am Rand. */
.ppp-bar[data-sticky="true"][data-pos="top"] {
  position: sticky;
  top: 8px;
  z-index: 60;
}

.ppp-msg { flex: 1; min-width: 0; }

/* Wegklicken muss möglich sein: Ein Hinweis, den man nicht loswird, ist eine
   Belästigung — unabhängig davon, wie freundlich er formuliert ist. */
.ppp-close {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: .65;
  cursor: pointer;
}
.ppp-close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }

/* Spar-Knopf. `currentColor` statt fester Farbe: Das Banner erbt seine Farben
   aus der gewählten Vorlage, und ein fest eingetragener Wert wäre bei der
   hellen Vorlage unlesbar. So passt der Knopf zu jeder von ihnen. */
.ppp-cta {
  flex: none;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: inherit;
  font-size: .8125em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, opacity .15s ease;
}

.ppp-cta:hover { background: rgba(127, 127, 127, .22); }

/* Sichtbarer Fokusring: Der Knopf ist mit der Tastatur erreichbar, und ohne
   Ring wüsste niemand, wo er gerade steht. */
.ppp-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .ppp-cta { transition: none; } }

/* Einblendung — derselbe Inhalt wie das Banner, nur auffälliger platziert.
   Bewusst kein abdunkelnder Hintergrund und keine Sperre der Seite: Es ist
   eine Preisauskunft, kein Vorgang, der abgeschlossen werden muss. */
.ppp-pop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 340px;
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.ppp-pop.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ppp-pop { transition: none; }
}

@media (max-width: 480px) {
  .ppp-pop { left: 16px; right: 16px; max-width: none; }
}

/* ============================================================
   Flaggen-Schrift
   ============================================================
   Windows zeigt Länderflaggen nicht: Segoe UI Emoji lässt die Glyphen bewusst
   weg und rendert die zwei Buchstaben des Ländercodes — aus 🇧🇷 wird "BR".
   Ohne diese Schrift wäre die Flagge im Banner auf jedem Windows-Rechner ein
   Buchstabenpaar.

   `unicode-range` ist hier entscheidend: Die 78 KB werden NUR geladen, wenn
   tatsächlich eine Flagge auf der Seite steht — also nur bei Besuchern, die
   ein Länderangebot bekommen. Wer keines bekommt, lädt nichts nach.

   Auszug aus Twemoji Mozilla (CC-BY 4.0), lokal ausgeliefert. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Inter — lokal ausgeliefert, nicht von Google.
   Ueber Google Fonts erfaehrt deren Server die IP jedes Besuchers; das
   waere in Deutschland ein Datenschutzproblem und zwaenge uns ausserdem,
   fonts.gstatic.com in der Sicherheitsrichtlinie zu erlauben. Lokal
   bleibt font-src auf 'self'.

   Eine Datei fuer alle Staerken (Variable Font, 100-900) — deshalb
   `font-weight: 100 900`. Frueher waren das fuenf einzelne Dateien.

   Zwei Schnitte nach Zeichenbereich getrennt: `latin` deckt Deutsch und
   Englisch ab (48 KB), `latin-ext` nur Zeichen wie ł, ő, ș. Ueber
   `unicode-range` laedt der Browser die zweite Datei nur, wenn solch ein
   Zeichen wirklich vorkommt.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* ACHTUNG: `inherit` darf in einer Schriftliste NICHT vorkommen — es ist nur
   als alleiniger Wert gültig, und eine Liste mit `inherit` wird komplett
   verworfen. Deshalb steht hier die echte Schriftfolge. */
.ppp-flag,
.ppp-msg,
.ppp-pop {
  font-family: "Twemoji Country Flags", var(--font-body);
}

/* ------------------------------------------------------------------
   Support-Formular: Rückmeldung nach dem Absenden.
   Das Formular legt jetzt ein Ticket an, statt ein Mailprogramm zu
   öffnen — dafür braucht es einen Platz für Fehler und Bestätigung.
   ------------------------------------------------------------------ */

.support-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #ff9d94;
}

.support-done {
  padding: 28px;
  border: 1px solid rgba(124, 136, 248, .35);
  border-radius: 4px;
  background: rgba(124, 136, 248, .08);
}

.support-done h3 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -.01em;
}

.support-done p {
  margin: 0 0 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
}

.support-done .btn {
  margin-top: 4px;
}

.support-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}