/* Plainova marketing site.
   No build step and no external assets on purpose: the site is three HTML files,
   this stylesheet and a logo, deployed with `aws s3 sync`. System font stack, so
   there is no webfont request to wait on or to disclose in the privacy policy. */

:root {
  /* Neutrals carry a slight blue cast so they sit with the brand colour instead
     of looking grey next to it. */
  --bg:            #ffffff;
  --bg-sunken:     #f6f8fb;
  --surface:       #ffffff;
  --surface-2:     #f1f5f9;
  --text:          #0f1922;
  --text-muted:    #51616f;
  /* Darker than it looks like it needs to be: at #7c8b99 this hit only 3.49:1 on
     white, below the 4.5:1 minimum — and it carries real information (which
     features a plan does *not* include). */
  --text-faint:    #64717d;
  --accent:        #1565c0;
  --accent-strong: #0d4a94;
  --accent-soft:   #e8f1fc;
  --border:        #e2e8ef;
  --border-strong: #cbd5e0;

  --ok-bg:   #e7f5ec;  --ok-fg:   #1c6b38;
  --wip-bg:  #fff3e0;  --wip-fg:  #8a5300;

  --shadow-sm: 0 1px 2px rgba(15, 25, 34, .05);
  --shadow:    0 1px 3px rgba(15, 25, 34, .07), 0 10px 28px -10px rgba(15, 25, 34, .12);
  --shadow-lg: 0 2px 6px rgba(15, 25, 34, .07), 0 24px 56px -18px rgba(15, 25, 34, .22);

  --radius:    12px;
  --radius-sm: 8px;
  --maxw:      1120px;

  /* One spacing rhythm for the whole page, so section padding and gaps relate. */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2rem;   --s-6: 3rem;   --s-8: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0e1319;
    --bg-sunken:     #121821;
    --surface:       #161d26;
    --surface-2:     #1c242f;
    --text:          #e9eef4;
    --text-muted:    #9dabb9;
    --text-faint:    #74838f;
    --accent:        #64b5f6;
    --accent-strong: #90caf9;
    --accent-soft:   #16283b;
    --border:        #253039;
    --border-strong: #35424e;

    --ok-bg:   #14301f;  --ok-fg:   #82d29b;
    --wip-bg:  #33260f;  --wip-fg:  #e8b872;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow:    0 1px 3px rgba(0, 0, 0, .4), 0 10px 28px -10px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 56px -18px rgba(0, 0, 0, .6);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* German compounds ("Datenschutz-Aufsichtsbehörde") are long enough to push
     past a narrow viewport as single unbreakable tokens. */
  overflow-wrap: break-word;
  hyphens: auto;

}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--s-2);
  top: var(--s-2);
  z-index: 100;
  background: var(--surface);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -.021em;
  margin: 0 0 .5em;
  text-wrap: balance;

  /* Headings hyphenate (with a visible hyphen) instead of inheriting the body's
     break-word, which snapped "Planungslösungen" mid-word with no hyphen at all. */
  overflow-wrap: normal;
  hyphens: auto;
}
h1 { font-size: clamp(1.85rem, 4.6vw, 3.4rem); font-weight: 700; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 660; }
h3 { font-size: 1.1rem; font-weight: 640; letter-spacing: -.01em; }

p { margin: 0 0 var(--s-2); }

.eyebrow {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead { font-size: 1.14rem; color: var(--text-muted); max-width: 60ch; }
.lead-center { margin-inline: auto; text-align: center; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  flex-wrap: wrap;
}
/* Only show the divider once the page is scrolled away from the top. */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-border linear both;
    animation-timeline: scroll();
    animation-range: 0 6rem;
  }
  @keyframes header-border { to { border-bottom-color: var(--border); } }
}

.site-header > * { max-width: 100%; }
.brand img { display: block; height: 30px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.site-nav > a:not(.btn) {
  color: var(--text-muted);
  font-size: .93rem;
  font-weight: 500;
}
.site-nav > a:not(.btn):hover { color: var(--text); text-decoration: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .62rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 560;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

.btn-sm { padding: .45rem .9rem; font-size: .88rem; }
.btn-lg { padding: .78rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-strong); box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #06121f; } }

.btn-ghost { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

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

.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-8) var(--s-3) var(--s-6);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-6);
  align-items: center;
}
/* Soft wash behind the hero so the page does not open on flat white. */
.hero::before {
  content: "";
  position: absolute;
  /* Bleeds vertically (up behind the sticky header) but not horizontally: a
     sideways bleed makes the whole page scrollable, and no amount of overflow
     clipping on an ancestor reliably prevents that. The gradients are sized
     generously instead, so the wash still fades out softly at the edges. */
  inset: -20% 0 30% 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 18% 26%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    radial-gradient(60% 50% at 84% 10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
  pointer-events: none;
}

.hero-inner { min-width: 0; }
.hero-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-3); }
.hero-note { margin-top: var(--s-2); font-size: .87rem; color: var(--text-faint); }

.hero-visual { min-width: 0; }
.hero-visual svg { width: 100%; height: auto; color: var(--accent); }

/* Hero visual: loose task chips (left) → assistant → scheduled plan (right). */
.hv-chip rect {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.hv-chip-line path { stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; opacity: .5; }

.hv-spark path { fill: var(--accent); }
.hv-spark .hv-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hv-grid path { stroke: var(--border); stroke-width: 1; }
.hv-dep path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.hv-bar rect { fill: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.hv-bar .hv-bar-phase { fill: var(--accent); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--s-6); gap: var(--s-4); }
  .hero-visual { order: -1; max-width: 26rem; }
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { max-width: var(--maxw); margin: 0 auto; padding: var(--s-8) var(--s-3); }

.section-alt {
  max-width: none;
  background: var(--bg-sunken);
  border-block: 1px solid var(--border);
}
.section-alt > * { max-width: var(--maxw); margin-inline: auto; }

.section-head { max-width: 60ch; margin-bottom: var(--s-4); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-sub { color: var(--text-muted); margin: 0; }

/* ── Solutions ──────────────────────────────────────────────────────────── */

.solutions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--s-2);
}

.solution {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.solution:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
@media (prefers-reduced-motion: reduce) { .solution:hover { transform: none; } }

.solution h3 { margin: .15rem 0 .25rem; }
.solution p { margin: 0; color: var(--text-muted); font-size: .94rem; }

.solution-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: .35rem;
}
.solution-icon svg { width: 1.5rem; height: 1.5rem; }

/* Planned work is visually quieter, so it cannot be mistaken for shipped. */
.solution-planned { background: transparent; border-style: dashed; box-shadow: none; }
.solution-planned .solution-icon { background: var(--surface-2); color: var(--text-faint); }

.tag {
  align-self: flex-start;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.tag-live { background: var(--ok-bg); color: var(--ok-fg); }
.tag-planned { background: var(--wip-bg); color: var(--wip-fg); }

/* ── Split layout ───────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-6);
  align-items: start;
}
.split-text { min-width: 0; }
.split-text > p { color: var(--text-muted); }
.split-reverse .split-text { order: 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
  .split-reverse .split-text { order: 0; }
}

.checklist { list-style: none; padding: 0; margin: 0 0 var(--s-2); }
.checklist li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .45rem;
  color: var(--text-muted);
}
.checklist li strong { color: var(--text); font-weight: 600; }
.checklist li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .58em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
}

.facts {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: .85rem var(--s-2); }
.facts dt { font-weight: 620; font-size: .93rem; }
.facts dd { margin: .1rem 0 0; color: var(--text-muted); font-size: .9rem; }

/* ── Pricing ────────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-2);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.plan-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  /* Lifted rather than scaled: scaling blurs text on some displays. */
  margin-block: -.75rem;
  padding-block: calc(var(--s-3) + .75rem);
}

.plan-badge {
  align-self: flex-start;
  margin: 0 0 .5rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}
@media (prefers-color-scheme: dark) { .plan-badge { color: #06121f; } }

.price { margin: .35rem 0 .25rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.price .amount { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; }
.price .per { font-size: .85rem; color: var(--text-faint); }

.plan-for { color: var(--text-muted); font-size: .92rem; min-height: 2.8em; }

.plan-features { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); flex: 1; }
.plan-features li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5rem;
  font-size: .93rem;
  color: var(--text-muted);
}
.plan-features li strong { color: var(--text); font-weight: 620; }
.plan-features li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .42em;
  width: .75rem;
  height: .42rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* What a plan does NOT include is marked, not omitted — omitting it invites the
   reader to assume it is there. */
.plan-features li.off { color: var(--text-faint); }
.plan-features li.off::before {
  border: 0;
  top: .62em;
  height: 2px;
  width: .7rem;
  background: var(--border-strong);
  transform: none;
}

.plans-note {
  margin: var(--s-4) auto 0;
  max-width: 68ch;
  font-size: .88rem;
  color: var(--text-faint);
  text-align: center;
}

/* ── Code card ──────────────────────────────────────────────────────────── */

.code-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.code-card figcaption {
  padding: .6rem var(--s-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.code-card pre {
  margin: 0;
  padding: var(--s-2);
  overflow-x: auto;
  font-size: .8rem;
  line-height: 1.7;
}
.code-card code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text);
}
.c-cm { color: var(--text-faint); }
.c-fn { color: var(--accent); font-weight: 600; }
.c-st { color: #0f7b55; }
.c-va { color: #a4560c; }
@media (prefers-color-scheme: dark) {
  .c-st { color: #6cc39a; }
  .c-va { color: #e0a35f; }
}

.link-arrow { font-weight: 560; }
.link-arrow::after { content: " →"; }

/* ── Closing CTA ────────────────────────────────────────────────────────── */

.section-cta { text-align: center; }
.section-cta h2 { max-width: 26ch; margin-inline: auto; }
.cta-actions { display: flex; gap: var(--s-1); justify-content: center; flex-wrap: wrap; margin-top: var(--s-3); }
.cta-note { margin-top: var(--s-3); font-size: .87rem; color: var(--text-faint); }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s-4) var(--s-3);
  font-size: .9rem;
  color: var(--text-muted);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.footer-inner nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.footer-inner a { color: var(--text-muted); }
.footer-inner a:hover { color: var(--text); }

/* ── Legal pages ────────────────────────────────────────────────────────── */

.legal { max-width: 70ch; margin: 0 auto; padding: var(--s-6) var(--s-3) var(--s-8); }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.2rem); }
.legal h2 { font-size: 1.12rem; margin-top: var(--s-4); }
.legal dl { margin: 0 0 var(--s-3); }
.legal dt { font-weight: 620; margin-top: .75rem; }
.legal dd { margin: 0; color: var(--text-muted); }

.todo {
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: var(--s-2) 1.25rem;
  background: var(--accent-soft);
  font-size: .93rem;
}
.todo strong { color: var(--accent); }

/* ── Language switch ────────────────────────────────────────────────────── */

.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-switch a {
  padding: .3rem .5rem;
  font-size: .78rem;
  font-weight: 620;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1;
}
.lang-switch a + a { border-left: 1px solid var(--border-strong); }
.lang-switch a:hover { background: var(--surface-2); color: var(--text); }
.lang-switch a[aria-current] {
  background: var(--accent);
  color: #fff;
  cursor: default;
}
@media (prefers-color-scheme: dark) {
  .lang-switch a[aria-current] { color: var(--bg); }
}

.legal-lang { font-size: .8em; color: var(--text-faint); }

/* ── AI section: the four-step flow ─────────────────────────────────────── */

.flow {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: none;
}
.flow > li {
  position: relative;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.flow-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.flow h3 { margin: var(--s-2) 0 .35rem; font-size: 1.02rem; }
.flow p { margin: 0; color: var(--text-muted); font-size: .93rem; }

.ai-more { margin-top: var(--s-6); }
.ai-more > h3 {
  margin: 0 0 var(--s-3);
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 620;
}
.ai-grid {
  display: grid;
  gap: var(--s-3) var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.ai-grid h4 { margin: 0 0 .3rem; font-size: .97rem; }
.ai-grid p { margin: 0; color: var(--text-muted); font-size: .92rem; }

.ai-guard {
  margin: var(--s-4) 0 0;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
  font-size: .93rem;
}

/* ── Solution cards: link through to the detail page ────────────────────── */

.solution h3 a { color: inherit; text-decoration: none; }
.solution h3 a:hover { color: var(--accent); text-decoration: underline; }
.solution-more { margin: var(--s-2) 0 0; }

/* ── Solution detail pages ──────────────────────────────────────────────── */

.sub-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--s-3) var(--s-4);
}
.sub-hero h1 {
  margin: var(--s-2) 0 0;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  letter-spacing: -.02em;
}
.sub-hero .lead { margin-top: var(--s-2); max-width: 46rem; }

.crumb { margin: 0 0 var(--s-3); font-size: .9rem; }
.link-back { color: var(--text-muted); text-decoration: none; }
.link-back::before { content: "\2190"; margin-right: .4rem; }
.link-back:hover { color: var(--accent); text-decoration: underline; }

.subpage .split { align-items: center; }
.sub-icon { display: grid; place-items: center; min-width: 0; }
.sub-icon svg {
  width: 100%;
  max-width: 13rem;
  height: auto;
  color: var(--accent);
  opacity: .5;
}

.caps {
  display: grid;
  gap: var(--s-3) var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: var(--s-4);
}
.caps article {
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.caps h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.caps p { margin: 0; color: var(--text-muted); font-size: .93rem; }

.facts-wide { margin-top: var(--s-4); }

.ai-callout {
  padding: var(--s-4);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
}
.ai-callout h2 { margin: 0 0 var(--s-2); }
.ai-callout p { margin: 0 0 var(--s-2); max-width: 52rem; }
.ai-callout p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .lang-switch { margin-left: 0; }
}

/* ── Dark mode and small-screen corrections ─────────────────────────────── */

/* The logo PNG has an opaque near-white background (alpha 255 throughout) and a
   dark wordmark, so in dark mode it painted as a raw white block. Transparency
   alone would not fix it — a dark wordmark on a dark header is unreadable — so
   the white is turned into a deliberate chip instead. A proper light-on-dark
   logo variant from the brand assets would let this rule go away. */
@media (prefers-color-scheme: dark) {
  .brand img {
    background: #fff;
    padding: .2rem .4rem;
    border-radius: 6px;
  }
}

@media (max-width: 700px) {
  /* Six wrapped nav links pushed the sticky header to 223px — 28% of a phone
     viewport, permanently. The section links go; logo, call to action and the
     language switch stay, and subpages still have their own back link. */
  .site-nav > a:not(.btn) { display: none; }

  /* With the links gone the remainder fits on one row, but only just: the
     default 1.5rem gap and padding overshot 375px by a couple of pixels and
     wrapped it into two rows anyway. */
  .site-header { padding: var(--s-1) var(--s-2); gap: var(--s-2); }
  .site-nav { gap: var(--s-1); }
}

/* Decorative only, and at small sizes the outline icon reads like a UI control
   rather than an illustration. */
@media (max-width: 900px) {
  .sub-icon { display: none; }
}

/* Split columns are wide enough that body copy ran to 78 characters per line in
   the data-model section; comfortable reading tops out around 75. The grid keeps
   its proportions, the text just stops using the full column. */
.split-text p,
.split-text ul { max-width: 68ch; }

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

/* <details> rather than a script: it opens without JavaScript, it is keyboard
   operable and screen readers announce the state, all of which a div with a
   click handler would have had to reimplement badly. */
.faq {
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.faq details + details { border-top: 1px solid var(--border); }
.faq summary {
  padding: var(--s-2) var(--s-3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1.1rem;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.5;
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { background: var(--bg-sunken); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq p {
  margin: 0;
  padding: 0 var(--s-3) var(--s-3) calc(var(--s-3) + 1.7rem);
  color: var(--text-muted);
  max-width: 68ch;
}

/* ── Consent banner ─────────────────────────────────────────────────────────
   Only present when a measurement id is configured; see GA_MEASUREMENT_ID in
   build.py. A bar rather than a modal overlay: nothing about the page is worth
   blocking to ask this, and an overlay that blocks reading is the pattern that
   pushes people to click whatever makes it go away. */

.footer-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link:hover { color: var(--text); }

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 24px rgb(15 25 34 / 10%);
  padding: var(--s-3);
}
.consent-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.consent-text { max-width: 68ch; }
.consent-text strong { display: block; margin-bottom: .2rem; }
.consent-text p { margin: 0; font-size: .92rem; color: var(--text-muted); }
/* Equal weight on purpose: rejecting must be no harder than accepting. */
.consent-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }
.consent-actions .btn { min-width: 8.5rem; justify-content: center; }

@media (max-width: 640px) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-actions .btn { flex: 1; min-width: 0; }
}

.consent-options {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .6rem;
}
.consent-options label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .9rem;
  cursor: pointer;
}
.consent-options input { margin-top: .25rem; flex-shrink: 0; }
.consent-options strong { font-weight: 620; }
.consent-options span { color: var(--text-muted); }
.consent-options strong { color: var(--text); }