/* ============================================
   Rulaxy Landing Page · v0.3 · 2026-05-23
   Editorial Aviation — Aviation-Week meets engineering title-block
   Mobile-first · Privacy-light · No frameworks · No webfont
   ============================================ */

/* ----- Reset & Base ----- */
*, *::before, *::after { box-sizing: border-box; }
/* Defense against horizontal page scroll on narrow viewports. `clip` keeps
 * sticky positioning working (vs `hidden`). v0.14 — Sven 2026-05-25. */
html, body { overflow-x: clip; }
/* Allow shrinking below intrinsic content size in grid / flex chains.
 * Critical for <select> elements whose intrinsic min-width derives from
 * their longest <option> text. */
img, svg, video, iframe { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-base), color var(--t-base);
}

img, svg { display: block; max-width: 100%; }
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-primary-hover); }
ul, ol { padding-left: 1.2em; }
strong { font-weight: var(--font-weight-semibold); color: var(--color-text); }

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

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding-left: var(--layout-content-pad);
  padding-right: var(--layout-content-pad);
}

/* Landing-page top-level sections only — not nested ones (e.g. <section class="card">
 * inside the account-grid would otherwise inherit padding + lose its top border). */
body > section {
  padding: var(--space-7) 0;
  border-top: var(--layout-rule-strong) solid var(--color-border-rule);
}
body > section:first-of-type { border-top: none; }

/* ----- Section Header (Approach-Plate-Header-Bar) -----
   Every section opens with a thin rule + mono section code (`§ 02 · PROBLEM`) +
   serif heading. Mimics aviation-doc section conventions. */
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.section-header__code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.section-header__meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

/* ----- Typography ----- */
h1, h2, h3 {
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}
h1 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--letter-spacing-display);
}
h2 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}
h3 {
  font-size: 1.35rem;
  margin: 0 0 var(--space-2);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-medium);
}
p  { margin: 0 0 var(--space-3); }

.muted { color: var(--color-text-muted); font-size: 0.92em; }
.subtle { color: var(--color-text-subtle); }

/* Mono eyebrow — replaces the old colored eyebrow. Engineering-doc-style. */
.eyebrow {
  font-family: var(--font-family-mono);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-3);
}
.eyebrow__sep { color: var(--color-border-strong); padding: 0 0.4em; }

.section-title { margin-bottom: var(--space-2); }

/* Lead paragraph — slightly larger serif body, editorial pace */
.lead {
  font-family: var(--font-family-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  margin: 0 0 var(--space-4);
}

/* Drop-cap — first letter of body paragraph, editorial trademark. */
.dropcap::first-letter {
  font-family: var(--font-family-display);
  font-size: 4.2em;
  font-weight: var(--font-weight-medium);
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--color-primary);
}

/* ============================================================
   STATUS PILL — NOTAM/METAR-style state markers
   Examples:  [ ACTIVE ]   [ NEW ]   [ EXPIRES ]   [ EFFECTIVE ]
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.18em 0.6em;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  white-space: nowrap;
}
.pill--info    { color: var(--color-primary); }
.pill--accent  { color: var(--color-accent); }
.pill--success { color: var(--color-success); }
.pill--warning { color: var(--color-warning); }
.pill--danger  { color: var(--color-danger); }
.pill--muted   { color: var(--color-text-muted); }
.pill--solid {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* ============================================================
   NAV — sticky bar with monogram + wordmark + mono links
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border-rule);
  transition: background-color var(--t-base), border-color var(--t-base);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--layout-nav-height);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--color-text);
  text-decoration: none;
}
.nav__brand:hover { color: var(--color-text); }

.brand-monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.brand-monogram svg { width: 100%; height: 100%; }

.brand-wordmark {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  font-size: 1.3rem;
  text-transform: uppercase;
}

.nav__links { display: flex; gap: var(--space-4); align-items: center; }
.nav__links a {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.nav__links a:hover { color: var(--color-text); }
.nav__links .btn { text-decoration: none; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-system { display: none; }

/* 3-state toggle: which icon is shown depends on the *user's choice*.
 *   data-mode="system" → computer icon
 *   data-mode="light"  → sun
 *   data-mode="dark"   → moon
 * The optional small label underneath/right shows the same in text form
 * (only when the button is wide enough — drawer mode in mobile). */
.theme-toggle[data-mode="system"] .icon-system { display: block; }
.theme-toggle[data-mode="light"]  .icon-sun    { display: block; }
.theme-toggle[data-mode="dark"]   .icon-moon   { display: block; }

/* Highlight active = system (subtle) so it doesn't look like a bug */
.theme-toggle[data-mode="system"] {
  color: var(--color-text);
}
.theme-toggle[data-mode="light"]  { color: var(--color-accent); border-color: var(--color-accent); }
.theme-toggle[data-mode="dark"]   { color: var(--color-primary); border-color: var(--color-primary); }

/* Label only visible inside the mobile drawer where there is space; in the
 * desktop top-nav we keep just the icon for a compact pill. */
.theme-toggle__label {
  display: none;
  font-family: var(--font-family-mono);
  font-size: 0.7rem;
  letter-spacing: var(--letter-spacing-eyebrow);
  margin-left: 0.5rem;
  color: inherit;
}
@media (max-width: 899px) {
  .theme-toggle {
    width: auto;
    padding: 0 0.85rem;
    height: 38px;
  }
  .theme-toggle__label { display: inline-block; }
}

@media (max-width: 768px) {
  .nav__links a:not(.btn):not(.theme-toggle) { display: none; }
}

/* ============================================================
   BUTTONS — sharp corners, single-rule borders, no rounded pills
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.25rem;
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
.btn--small { padding: 0.45rem 0.85rem; font-size: 0.72rem; }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}
.btn--ghost {
  background: transparent;
  border-color: var(--color-border-rule);
  color: var(--color-text);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-muted);
}
.btn--accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.btn--accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
}

/* ============================================================
   HERO — Title-Block layout, editorial display
   ============================================================ */
.hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-rule); /* still feels like a section opener */
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
  }
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.hero__meta__sep { color: var(--color-border-strong); }

.hero__headline {
  margin: 0 0 var(--space-4);
  max-width: 18ch;
}
.hero__headline em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.hero__subheadline {
  font-family: var(--font-family-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: var(--line-height-relaxed);
  max-width: 38ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}
.hero__subheadline strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }

.hero__cta {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.hero__footer {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Hero side: a NACA-style data-card. Stat panel that grounds the brand. */
.hero__data {
  border: 1px solid var(--color-border-rule);
  background: var(--color-surface);
  padding: var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.hero__data__header {
  display: flex; justify-content: space-between;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.hero__data dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.4em 1em; margin: 0;
}
.hero__data dt {
  color: var(--color-text-subtle);
  font-size: 0.78rem;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}
.hero__data dd {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hero__data dd .accent { color: var(--color-accent); }

/* ============================================================
   PILLARS — specs-sheet card grid
   ============================================================ */
.pillars { background: var(--color-bg-elevated); }
.pillars__grid {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-border-rule);
}
@media (min-width: 768px) {
  .pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pillar {
  padding: var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--t-base);
}
.pillar:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .pillar { border-bottom: none; border-right: 1px solid var(--color-border); }
  .pillar:last-child  { border-right: none; }
}
.pillar:hover { background: var(--color-surface-hover); }

.pillar__code {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.pillar__code__num { color: var(--color-primary); font-weight: var(--font-weight-medium); }

.pillar__title {
  font-family: var(--font-family-display);
  font-size: 1.6rem;
  margin: 0 0 var(--space-2);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}
.pillar__lead {
  font-family: var(--font-family-display);
  font-style: italic;
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  font-size: 1.05rem;
  margin: 0 0 var(--space-3);
}
.pillar p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 0; }

/* ============================================================
   PLAYGROUND — 8 domain cards in a 2×4 specs-sheet grid
   ============================================================ */
.playground { background: var(--color-bg); }
.playground__intro {
  font-family: var(--font-family-display);
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
  max-width: 56rem;
}
.playground__intro em { color: var(--color-accent); font-style: italic; }
.domains__grid {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-border-rule);
}
@media (min-width: 640px) {
  .domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .domains__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.domain-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transition: background-color var(--t-base);
}
.domain-card:hover { background: var(--color-surface-hover); }
.domain-card__code {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.domain-card__num { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.domain-card__title {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  margin: 0 0 var(--space-2);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}
.domain-card__lead {
  font-family: var(--font-family-display);
  font-style: italic;
  color: var(--color-text);
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}
.domain-card__data,
.domain-card__products {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  margin: var(--space-2) 0 var(--space-1);
}
.domain-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--space-2);
  line-height: 1.45;
}
.playground__cta {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-rule);
  display: flex; flex-direction: column; gap: var(--space-3);
}
@media (min-width: 768px) {
  .playground__cta {
    flex-direction: row; align-items: center; justify-content: space-between;
  }
}
.playground__cta__copy {
  font-family: var(--font-family-display);
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
  max-width: 40rem;
}
.playground__cta__copy strong { color: var(--color-primary); font-weight: var(--font-weight-bold); }

/* ============================================================
   PROBLEM — two-column editorial
   ============================================================ */
.problem__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .problem__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
.problem__col h3 {
  color: var(--color-primary);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.problem__col ul { margin: 0; padding-left: 1.1rem; list-style: none; }
.problem__col li {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: 0.97rem;
  line-height: var(--line-height-relaxed);
  position: relative;
  padding-left: 1.2rem;
}
.problem__col li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}
.problem__source {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-rule);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.problem__source strong { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ============================================================
   STEPS — procedural steps, numbered like checklist items
   ============================================================ */
.steps {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--color-border-rule);
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.steps li {
  padding: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.steps li:last-child { border-bottom: none; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 2-col grid: items 1+2 in row 1 (border-bottom), items 3+4 in row 2 (no bottom).
     Vertical border between columns. */
  .steps li { border-right: 1px solid var(--color-border); }
  .steps li:nth-child(2n) { border-right: none; }
  .steps li:nth-child(n+3) { border-bottom: none; }
}
@media (min-width: 1024px) {
  /* 4-col single row: no bottom borders anywhere, right border between items 1-3. */
  .steps li { border-bottom: none; border-right: 1px solid var(--color-border); }
  .steps li:last-child { border-right: none; }
}
.step__num {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.steps h3 {
  font-family: var(--font-family-display);
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
  letter-spacing: var(--letter-spacing-tight);
}
.steps p { color: var(--color-text-muted); margin-bottom: 0; font-size: 0.92rem; }

/* ============================================================
   TEAM — credential-card layout (more editorial bio than tech "team grid")
   ============================================================ */
.team__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .team__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.team__card {
  padding: var(--space-5) 0;
  border-top: 2px solid var(--color-border-rule);
}
.team__card h3 {
  font-family: var(--font-family-display);
  font-size: 1.75rem;
  margin-bottom: var(--space-1);
}
.team__role {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-4);
}
.team__card p { color: var(--color-text); font-size: 0.97rem; line-height: var(--line-height-relaxed); }
.team__note { font-size: 0.92rem; }

/* ============================================================
   WAITLIST — call-to-action with title-block frame
   ============================================================ */
.waitlist { background: var(--color-bg-elevated); }
.waitlist__lead {
  max-width: 55ch;
  margin: 0 auto var(--space-5);
  color: var(--color-text);
  font-family: var(--font-family-display);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: var(--line-height-relaxed);
  text-align: center;
}
.waitlist .section-header { justify-content: center; }
.waitlist .section-title { text-align: center; }
.waitlist__form { max-width: 640px; margin: 0 auto; }
.waitlist__row {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  justify-content: center;
}
.waitlist__row input,
.waitlist__row select {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: var(--font-family-sans);
  flex: 1 1 200px;
  min-width: 180px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.waitlist__row input::placeholder { color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: 0.85rem; letter-spacing: 0.05em; }
.waitlist__row input:focus,
.waitlist__row select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-primary);
}
.waitlist__row button { flex: 0 0 auto; }
.waitlist__hint {
  margin-top: var(--space-3);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  text-align: center;
}
.waitlist__success {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   FAQ — definition-list editorial style
   ============================================================ */
.faq__item {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.faq__item:last-of-type { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  cursor: pointer;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: 1.2rem;
  color: var(--color-text);
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-relaxed);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '[+]';
  font-family: var(--font-family-mono);
  color: var(--color-text-subtle);
  font-size: 0.85rem;
  letter-spacing: 0;
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
}
.faq__item[open] summary::after { content: '[−]'; color: var(--color-accent); }
.faq__item p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: 0.97rem;
  line-height: var(--line-height-relaxed);
}

/* ============================================================
   FOOTER — title-block end-of-document
   ============================================================ */
.footer {
  padding: var(--space-6) 0 var(--space-5);
  background: var(--color-bg);
  border-top: var(--layout-rule-strong) solid var(--color-border-rule);
}
.footer__inner {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; align-items: start; }
}
.footer__brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}
.footer__brand .brand-monogram { width: 28px; height: 28px; }
.footer__brand .brand-wordmark { font-size: 1.1rem; }
.footer__tag {
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}
.footer__links {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}
.footer__links a { color: var(--color-text-muted); text-decoration: none; }
.footer__links a:hover { color: var(--color-text); }
.footer__legal {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}
.footer__legal p { margin-bottom: var(--space-1); color: var(--color-text-subtle); }
.footer__legal a { color: var(--color-text-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--color-text); text-decoration: underline; }

/* ============================================================
   v0.12 — LANDING-PAGE DESIGN-FIXES (2026-05-25)
   - Primary-button keeps royal-blue + white text in BOTH themes
     (was: light-blue + near-black in dark mode → "schwarze schrift auf blau")
   - Hamburger menu for mobile (<900px) — text-links were hidden < 768px
     with no fallback, so on iPhone the nav vanished entirely
   - § signs purged from nav / footer / section codes (in HTML)
   ============================================================ */

/* === Primary button: always white-on-royal-blue, ignore the inverted dark-mode tokens === */
.btn--primary {
  background: #1e3a8a !important;     /* royal blue, same as light-mode --color-primary */
  color: #fafaf5 !important;          /* off-white, always */
  border-color: #1e3a8a !important;
}
.btn--primary:hover {
  background: #1e40af !important;
  border-color: #1e40af !important;
  color: #fafaf5 !important;
}

/* === Hamburger button === */
.nav__hamburger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 7px;
  margin-left: auto;
}
.nav__hamburger:hover { border-color: #1e3a8a; }
.nav__hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* === Mobile drawer (<900px) === */
@media (max-width: 899px) {
  .nav__inner { position: relative; }
  .nav__hamburger { display: inline-flex; }
  /* Override Z255-256: bring text links back, but inside a slide-down drawer */
  .nav__links a:not(.btn):not(.theme-toggle) { display: inline-flex !important; }
  .nav__links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border-rule);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    z-index: 50;
  }
  .nav__links[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links a,
  .nav__links .btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }
  .nav__links .btn--primary {
    /* Inside the drawer, give the early-access CTA more breathing room */
    margin: var(--space-2) 0 0;
    justify-content: center;
    padding: 0.85rem 1rem;
    border-bottom: 0;
  }
  .nav__links a:last-of-type:not(.btn) { border-bottom: 0; }
  .theme-toggle {
    align-self: flex-start;
    margin-top: var(--space-2);
  }
}

/* Narrow polish */
@media (max-width: 480px) {
  .brand-wordmark { font-size: 1.15rem; }
  .nav__inner { padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* ----- REDUCED MOTION ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   v0.16 — Auth-state slot in the landing nav (Dropdown pattern)
   ============================================================
   Sven 2026-05-25 review: "Auch der Sign-in button darf nicht auf der
   Landing page stehen, wenn man eingeloggt ist, nur der Button für das
   User-menu wie auf den Playground zum Beispiel."

   → Landing reuses the exact `.user-menu` component from the app
   (avatar + label + chevron + dropdown panel with Account/RFPs/Keys/
   Sign-out). The styles below mirror `app.css .user-menu*` so both
   shells render the same affordance.

   [hidden] defense: `.btn { display: inline-flex }` defeats the HTML
   `hidden` attribute. Same trap on `.user-menu`. Reinstating with
   `!important` is the documented pattern (CLAUDE.md Konvention 6). */

/* The Sign-In is a .btn — `display: inline-flex` wins over [hidden] unless
   we reinstate it explicitly. */
.btn[hidden],
#landing-signin[hidden],
.user-menu[hidden],
.user-menu__panel[hidden],
[data-nav][hidden] { display: none !important; }

/* === User-menu (shared component, same as app.css) === */
.user-menu { position: relative; display: inline-block; }
.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}
.user-menu__trigger:hover { border-color: var(--color-primary); }
.user-menu__trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
}
.user-menu__avatar {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-primary);
}
.user-menu__label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-family-body);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu__chev { font-size: 0.8em; color: var(--color-text-muted); }
.user-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-menu__panel a,
.user-menu__panel button {
  display: block;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  width: 100%;
}
.user-menu__panel a:hover,
.user-menu__panel button:hover {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}
.user-menu__panel hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-1) 0;
}

/* Mobile drawer: expand the trigger to full row, drop panel inline */
@media (max-width: 899px) {
  .landing-user-menu {
    align-self: stretch;
    width: 100%;
  }
  .landing-user-menu .user-menu__trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0.85rem 0.5rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .landing-user-menu .user-menu__panel {
    position: static;
    right: auto;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 0;
  }
}

/* ============================================================
   Anchor-only targets for the consolidated nav (Story, Platform).
   ============================================================
   These are zero-height jump targets that sit BETWEEN sections —
   we keep the original #problem / #solution / #data / #playground
   anchors for deep-links while letting the new top-nav point to the
   consolidated topic. The scroll-margin-top compensates for the
   sticky header so the destination heading lands below it. */
.anchor-target {
  display: block;
  height: 0;
  scroll-margin-top: var(--layout-nav-height, 64px);
  /* Don't influence layout: */
  pointer-events: none;
}

/* ============================================================
   Legal pages (imprint.html, privacy.html) — v0.18 (DSGVO).
   ============================================================
   Pure prose layout: narrow column, generous line-height, no
   marketing styling. Reuses the shared nav + token system but
   skips the hero / section-eyebrow patterns. */
.legal-page main.legal {
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(3rem, 6vw, 6rem);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: calc(100vh - var(--layout-nav-height, 64px));
}
.legal__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.legal__head {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}
.legal__eyebrow {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}
.legal__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.legal__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 60ch;
}
.legal__section {
  margin: 2rem 0;
}
.legal__section h2 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.legal__section h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin: 1.25rem 0 0.5rem;
  color: var(--color-text);
}
.legal__section p,
.legal__section li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}
.legal__section p {
  margin: 0 0 0.75rem;
}
.legal__section ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}
.legal__section li {
  margin-bottom: 0.4rem;
}
.legal__section a {
  color: var(--color-primary, #1e3a8a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal__section a:hover {
  text-decoration-thickness: 2px;
}
.legal__section code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85em;
  background: var(--color-surface, rgba(0,0,0,0.04));
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.legal__foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.legal__foot p {
  margin: 0.25rem 0;
}
.legal__foot a {
  color: var(--color-primary, #1e3a8a);
  text-decoration: underline;
}