/* Beckon Billing landing page — "Onyx Ink" (cool onyx, gold as the only accent)
   Tokens mirror the product theme (beckonbilling-portal/web/src/assets/main.css). */

:root {
  --bg: #090a0d;
  --bg-elev: #0f1116;
  --surface: #14161d;
  --surface-2: #1a1d26;
  --line: rgba(236, 187, 84, 0.14);
  --line-strong: rgba(236, 187, 84, 0.32);
  --gold: #ecbb54;
  --gold-bright: #ffd47a;
  --gold-deep: #c99a34;
  --gold-glow: rgba(236, 187, 84, 0.3);
  --alert: #e56a63;
  --on-gold: #0d1016;
  --ink: #e9edf3;
  --muted: #939cad;
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* Side gutter. .container takes its padding-inline from here, so the elements
     that sit OUTSIDE .container (the full-screen menu, the back-to-top button)
     line up with the page content from one number. */
  --pad: 1.5rem;
  /* Height of the resting header bar. The bar is taken out of flow (fixed on
     desktop, absolute below 861px - see the header block), so the body has to
     reserve its height itself. Measured, not guessed: 60.59px (34px logo +
     2x0.8rem padding-block + the 1px hairline), rounded up. The logo's fixed
     34px drives the row height, so a font swap cannot move it - but below 861px
     the 42x42 menu button is taller than the logo and the value changes with it
     (69px, in the 860px block). Two numbers, one reason: measure the bar. */
  --topH: 61px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  /* The header is out of flow at every width, so its height is reserved here.
     Do NOT add overflow-x here or on html: it turns the body into a scroll
     container and kills position:sticky/fixed for everything inside. A page
     that really runs wide gets the clip on the one element that causes it
     (see .app-teaser). */
  padding-top: calc(var(--topH) + env(safe-area-inset-top, 0px));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  max-width: 1160px;
  margin-inline: auto;
  /* One number, one place: --pad is defined as this gutter so the elements that
     sit outside .container (.nav-sheet, .totop) line up with page content.
     Spelling 1.5rem out again here would let the two drift apart unnoticed. */
  padding-inline: var(--pad);
}

/* ---------- shared type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* "coming soon" tag appended to an eyebrow (e.g. the app section) */
.eyebrow-soon {
  color: var(--gold-bright);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  max-width: 24ch;
  text-wrap: balance;
}

section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* gradient hairline — the product's top-bar signature, used as the page's thread */
.problem,
.solution,
.workflow,
.breadth,
.how,
.mcp,
.app-teaser,
.video,
.faq {
  position: relative;
}

/* .phone::after is a decorative glow inset -30% either side; on a 375px screen it
   reached x=399 and was the last 24px of horizontal page scroll. Clip the bleed at
   the section edge - `clip` rather than `hidden` so no scroll container is created. */
.app-teaser {
  overflow-x: clip;
}

.problem::before,
.solution::before,
.workflow::before,
.breadth::before,
.how::before,
.mcp::before,
.app-teaser::before,
.video::before,
.faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 3rem));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 187, 84, 0.4), rgba(201, 154, 52, 0.3), transparent);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.85rem 1.6rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 236, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(201, 154, 52, 0.18);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 236, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 14px 38px rgba(201, 154, 52, 0.32);
}

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 1rem 2.1rem;
  font-size: 1.02rem;
}

.btn-sm {
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* ---------- header ---------- */

/* The bar stands still on a computer and rides along on a phone. That is not a
   taste call: Safari 26 lays the page UNDER the status strip, which is
   translucent glass the scrolling layer shows through, while fixed elements are
   laid out against - and clipped to - the unobscured area. A bar that stays put
   therefore always has a strip above it that page content scrolls through, and
   the page cannot paint into that strip (nine attempts measured on an iPhone,
   all without effect - see docs/decisions/0010-kopfleiste-ios26-safe-area.md).
   A bar that scrolls out of frame has no strip left to own. */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

/* Condensed state, set by main.js past 40px of scroll. */
.site-head.solid {
  background: rgba(9, 10, 13, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* The gradient hairline is the page's thread, kept - but it only shows once the
   bar has a body to underline. Over the hero the bar is glass. */
.site-head::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 187, 84, 0.5), rgba(201, 154, 52, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.site-head.solid::after {
  opacity: 1;
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.8rem;
  transition: padding-block 0.4s ease;
}

.site-head.solid .head-row {
  padding-block: 0.55rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  filter: drop-shadow(0 0 14px rgba(236, 187, 84, 0.28));
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

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

.nav-links .btn-primary {
  color: var(--on-gold);
}

/* ---------------------------------------------------------------------------
   "Alle Produkte": the nav item and its full-width panel (ADR 0021)
   Taken from beckonaccess-homepage (commit 4332c49), where the operator picked
   it on 2026-10-05 out of five directions. Only the accent moved: Access'
   violet there, this site's gold here. It replaces the three brands side by
   side in the header (ADR 0020) and their CSS.
   No JavaScript: <details>/<summary>.
   The panel is NOT anchored to the <details> but to .site-head, which is
   `position: fixed` and therefore the containing block. Hence `static` here:
   with the <details> positioned, left/right:0 would collapse onto the width of
   the nav item - a narrow strip on a computer, off the right edge on a phone.
   The three products carry no sender line - see build.mjs productPanelHtml().
--------------------------------------------------------------------------- */
.prod-det-wide {
  position: static;
}

.prod-det-wide > summary {
  list-style: none;
  cursor: pointer;
}

.prod-det-wide > summary::-webkit-details-marker {
  display: none;
}

/* Reads exactly like the four content links beside it (.nav-links a). */
.prodmenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease;
}

.prod-det-wide > summary:hover,
.prod-det-wide[open] > summary {
  color: var(--ink);
}

.pp-chev {
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.prod-det-wide[open] > summary .pp-chev {
  transform: rotate(180deg);
}

/* Fully opaque: in the template a 0.98 alpha let the headline show through.
   No margin-top: .site-head::after (the gradient hairline) is an in-flow block
   at the bottom of the bar, so top:100% already sits below it - a 1px margin
   would leave a see-through slit between bar and panel. */
.pp-wide {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  padding: 1.3rem 0 1.5rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg-elev);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.pp-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

/* .nav-links a (0,1,1) also matches these links; it only sets colour, size and
   weight of the <a> itself, and every span below sets its own. */
.pp-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pp-col:hover,
.pp-col:focus-visible {
  background: rgba(236, 187, 84, 0.08);
  text-decoration: none;
}

.pp-col.is-current {
  border-color: rgba(236, 187, 84, 0.55);
  background: rgba(236, 187, 84, 0.06);
}

.pp-mark {
  display: inline-flex;
  flex: 0 0 auto;
}

.pp-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}

.pp-col.is-current .pp-name {
  color: var(--gold);
}

.pp-satz {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.pp-go,
.pp-hier {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* "Du bist hier" is a statement, not an invitation - so it stays muted. */
.pp-hier {
  color: var(--muted);
}

/* The same three products in the burger sheet, where .nav-links is gone.
   .nav-sheet a writes uppercase display type at clamp(2.4rem, 11vw, 5rem) and
   0.55 opacity; the sentences would inherit that and come out in CAPITALS (as
   measured in the template), so every one of those properties is reset here. */
.sheet-prod {
  width: 100%;
  max-width: 420px;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-strong);
}

.sheet-prod-label {
  margin: 0 0 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-sheet .sheet-prod-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.45rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

.nav-sheet .sheet-prod-item:hover,
.nav-sheet .sheet-prod-item:focus-visible {
  transform: none;
}

.pp-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-sheet .sheet-prod-item .pp-name,
.nav-sheet .sheet-prod-item .pp-satz {
  letter-spacing: normal;
  text-transform: none;
}

/* Phone body sizes, not the panel's desktop sizes. */
.nav-sheet .sheet-prod-item .pp-name {
  font-size: 1rem;
  color: var(--ink);
}

.nav-sheet .sheet-prod-item .pp-satz {
  font-size: 0.85rem;
}

.nav-sheet .sheet-prod-item.is-current .pp-name,
.nav-sheet .sheet-prod-item:hover .pp-name,
.nav-sheet .sheet-prod-item:focus-visible .pp-name {
  color: var(--gold);
}

/* Menu button: a 42x42 circle, per the owner's spec (ADR 0010, "Nachlauf
   2026-09-19"). The size is the point - it is the only finger target left in the
   header on a phone, and 36x31 (what stood here until then) was below every
   thumb-sized recommendation. Measured with border-box: exactly 42x42 on both
   axes, border included. The icon is ONE bar plus its two pseudo-bars at -5/+5,
   not three elements: the outer bar has to be the positioning context. */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
}

.burger-bar {
  display: block;
  position: relative;
  width: 16px;
  height: 1.5px;
  background: var(--gold);
}

.burger-bar::before,
.burger-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: var(--gold);
}

.burger-bar::before {
  top: -5px;
}

.burger-bar::after {
  top: 5px;
}

/* Language switcher widget: a 36x31 square button that
   shows the CURRENT language. It used to be the size of the burger; since the menu
   button became a 42x42 circle (2026-09-19) the two only share the border token.
   Two placements share this style - one in the desktop
   nav where the old text switch sat (.lang-widget-desk), one top-right on mobile
   (.lang-widget-mob) - each shown only at its breakpoint. Scoped under .nav so it
   wins over the muted `.nav-links a` colour when it sits inside nav-links. */
.nav .lang-widget {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 31px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.nav .lang-widget:hover,
.nav .lang-widget:active {
  color: var(--gold-bright);
  border-color: var(--gold);
}

.lang-widget-desk {
  display: inline-flex;
}

.lang-widget-mob {
  display: none;
}

/* ---------- full-screen menu ---------- */

/* Opaque, but not shut: rgba(...,.97) plus a strong blur keeps the connection to
   the page underneath while nothing shows through hard enough to disturb. */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  /* `safe center`: centred while it fits, top-aligned once it does not. Plain
     `center` pushes an overflowing list above the scroll origin, where no
     scrolling reaches it. Browsers without `safe` keep the line above. */
  justify-content: center;
  justify-content: safe center;
  /* The four links plus the three products (ADR 0021) can outgrow a short
     viewport (a phone on its side) or a large system font; without this the
     surplus would just be cut off. */
  overflow-y: auto;
  gap: 0.4rem;
  padding: calc(var(--pad) + env(safe-area-inset-top, 0px))
    calc(var(--pad) + env(safe-area-inset-right, 0px))
    calc(var(--pad) + env(safe-area-inset-bottom, 0px))
    calc(var(--pad) + env(safe-area-inset-left, 0px));
  background: rgba(9, 10, 13, 0.97);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  /* visibility, not opacity alone: with opacity:0 by itself the links stay
     reachable with the tab key while the menu is shut.
     The two directions get different timing on purpose. Opening: visibility
     flips at once (delay 0), so main.js can move the focus into the sheet in
     the same tick - focus() is silently ignored on a visibility:hidden element.
     Closing: the flip waits out the fade (delay .35s) so the menu does not
     vanish mid-transition. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.nav-sheet.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

/* Above the header breakpoint the burger is gone, so the sheet can never be
   opened - take it out of the document entirely rather than leaving an
   unreachable overlay lying around (and so a resize from phone to desktop
   cannot strand it open). */
@media (min-width: 861px) {
  .nav-sheet {
    display: none;
  }
}

.nav-sheet a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 11vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.nav-sheet a:hover,
.nav-sheet a:focus-visible {
  opacity: 1;
  color: var(--gold);
  transform: translateX(12px);
}

/* The leading number is deliberate - it gives the list rhythm.
   The "01".."04" numerals in front of the four content links - and ONLY those.
   The child combinator matters: the links are direct children of .nav-sheet,
   the product items below them are not. Unscoped, this rule (0,1,2) outranks
   .pp-name/.pp-satz (0,1,0) and would write the product names and sentences in
   mono at 0.6rem/9.6px - exactly what happened in the template (ADR 0021). */
.nav-sheet > a span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.nav-sheet__x {
  position: absolute;
  top: calc(1.4rem + env(safe-area-inset-top, 0px));
  right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  padding: 0.6rem 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-sheet__x:hover {
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  /* No fade at all: visibility then flips instantly in both directions, which is
     exactly what both sides need - focusable on open, untabbable on close. The
     .open selector is listed too, or its own transition would survive this. */
  .nav-sheet,
  .nav-sheet.open {
    transition: none;
  }

  .nav-sheet a {
    transition: none;
  }

  .nav-sheet a:hover,
  .nav-sheet a:focus-visible {
    transform: none;
  }
}

/* ---------- back to the top of the page ---------- */

/* Bottom right, never top: on iOS the page cannot paint into the strip above a
   standing bar (see .site-head), at the bottom it can. The safe-area insets are
   part of the offsets so the button never sticks under the browser's own bar. */
.totop {
  position: fixed;
  z-index: 150;
  right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(9, 10, 13, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
}

.totop.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.totop:hover {
  background: rgba(9, 10, 13, 0.9);
}

.totop svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.totop circle {
  fill: none;
  stroke-width: 1.5;
}

.totop .totop__bahn {
  stroke: var(--line-strong);
}

.totop .totop__fort {
  stroke: var(--gold);
  stroke-linecap: round;
}

/* The arrow is two borders of an empty box - no character, no icon font, no
   dependency that can fail to load. */
.totop i {
  display: block;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
  transform: rotate(45deg);
}

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

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}

.hero .eyebrow {
  justify-content: center;
}

.hero .eyebrow::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.hero h1 {
  margin-inline: auto;
  max-width: 17ch;
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

.hero-sub {
  margin: 1.4rem auto 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--muted);
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}

/* The secondary "Jetzt anmelden" CTA is desktop-only - on mobile the primary
   CTA stands alone (login is reachable via the header language-row / burger). */
@media (max-width: 760px) {
  .cta-secondary {
    display: none;
  }
}

.microtrust {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* hero stage: screenshot + floating company switcher */

.stage {
  position: relative;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.stage::before {
  content: '';
  position: absolute;
  inset: auto -10% -12% -10%;
  height: 55%;
  background: radial-gradient(55% 90% at 50% 100%, var(--gold-glow), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.browser {
  position: relative;
  margin: 0;
  background: var(--bg-elev);
  border: 1px solid rgba(236, 187, 84, 0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 212, 122, 0.12) inset,
    0 30px 90px rgba(0, 0, 0, 0.6);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #111318;
  border-bottom: 1px solid rgba(236, 187, 84, 0.12);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-ember { background: var(--alert); }
.dot-gold { background: var(--gold); }
.dot-dim { background: #313846; }

.browser img {
  display: block;
  width: 100%;
}

.switcher {
  position: absolute;
  top: 52px;
  right: -26px;
  width: 272px;
  padding: 0.65rem;
  text-align: left;
  background: rgba(15, 17, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(236, 187, 84, 0.08);
}

.switcher-label {
  margin: 0.2rem 0 0.5rem;
  padding-inline: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.co {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.co-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: all 0.35s ease;
}

.co-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.co-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.co-check {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.co.active {
  background: var(--surface-2);
  border-color: rgba(236, 187, 84, 0.35);
  box-shadow: inset 2px 0 0 var(--gold);
}

.co.active .co-avatar {
  color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-color: transparent;
}

.co.active .co-check {
  opacity: 1;
}

/* ---------- problem: the ledger ---------- */

.problem h2 {
  margin-bottom: 2.5rem;
}

.entry {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1.5rem 2rem;
  align-items: baseline;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}

/* Dividers sit only between entries - no line above the first or below the last. */
.entry:last-child {
  border-bottom: none;
}

.entry-no {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--gold);
}

.entry-no::before {
  content: '№ ';
  color: var(--muted);
}

.entry-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entry-body p {
  margin: 0.5rem 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 0.97rem;
}

.entry-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--alert);
  white-space: nowrap;
}

/* ---------- solution: feature rows ---------- */

.solution .lead {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.feature {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.feature-flip .feature-text {
  order: 2;
}

.kicker {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.feature-text h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.feature-text p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 48ch;
}

.browser-mini .browser-bar {
  padding: 7px 12px;
}

.browser-mini {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- workflow: the path, drawn ---------- */
/* The diagram is generated in build.mjs (the WF_* block there) and emitted
   TWICE - a wide fassung and a narrow one; CSS shows exactly one. Two drawings,
   not one squeezed: the wide one is 1200 user units across, which at phone
   width would put the half-sentences at roughly 5px.
   Colours come from the tokens only - gold for the path, muted for everything
   hanging off it. The throwaway comparison page used four extra hues to keep
   the strands apart; here the alternating row bands do that. */

.workflow .lead {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.wf-fig {
  /* Barely any side padding: every horizontal pixel spent here is a pixel the
     diagram is scaled down by, and the drawing carries its own margin inside
     the viewBox. */
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  padding: 0.9rem 0.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.workflow svg.wf-dia {
  display: block;
  width: 100%;
  height: auto;
}

/* One class MORE specific than the rule above on purpose. On the comparison
   page `svg.dia { display: block }` (0,1,1) beat `.v-narrow { display: none }`
   (0,1,0) and BOTH fassungen rendered, quadrupling the page height without an
   error anywhere. Equal specificity plus source order would work here too, but
   it breaks as soon as someone moves a rule. */
/* 1040px, not the 900 this switched at. The wide fassung is 1200 user units
   across and scales to the column it gets: at a 900px viewport that is 0.70,
   which puts its half-sentences at 9.5px and the "ab Pro" badge at 7.0px
   (measured). 1040 is where the scale reaches 0.82 and the half-sentence 11px,
   the floor this page keeps for body-sized text. Below it the narrow fassung
   takes over, and it is the more legible of the two there: capped at 420px it
   renders the same half-sentence at 15.5px. */
@media (min-width: 1040px) {
  .workflow .wf-fig svg.wf-narrow {
    display: none;
  }
}

@media (max-width: 1039px) {
  .workflow .wf-fig svg.wf-wide {
    display: none;
  }
  /* The narrow fassung is 366 units wide, so at 1039px it would be blown up
     2.8x - 37px labels in a diagram. Cap it and centre it: a phone-shaped
     column on a tablet reads fine. */
  .workflow .wf-fig svg.wf-narrow {
    max-width: 420px;
    margin-inline: auto;
  }
}

.wf-box {
  fill: #181b23;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.wf-sta .wf-box {
  fill: #1d212b;
  stroke: rgba(236, 187, 84, 0.5);
  stroke-width: 1.3;
}

/* A Pro extra is dashed, never dimmed. Dimming its text - which is what the
   comparison page's switch did - took the half-sentence under 4.5:1. The mark
   carries the meaning instead, and every label keeps full contrast: ink on the
   box fill is 14.6:1, the muted half-sentence 6.2:1 (5.8:1 on the lighter
   station fill). The dashed border is 3.1:1 against the box fill - 3:1 is what
   WCAG 1.4.11 asks of a component boundary, and the alpha is what decides it:
   the 0.55 this started at blends to 2.8:1, not to the 6.2:1 the unblended
   token measures. 0.6 clears it. */
.wf-pro .wf-box,
.wf-max .wf-box {
  stroke: rgba(147, 156, 173, 0.6);
  stroke-dasharray: 5 4;
}

.wf-lbl {
  fill: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
}

.wf-sta .wf-lbl {
  font-family: var(--font-display);
  font-weight: 700;
}

.wf-edge {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wf-rail {
  fill: none;
  stroke: rgba(236, 187, 84, 0.26);
  stroke-linecap: round;
}

.wf-stop {
  fill: #1d212b;
  stroke: var(--gold);
  stroke-width: 2;
}

.wf-num {
  fill: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.wf-row {
  fill: rgba(255, 255, 255, 0.028);
}

.wf-band {
  fill: rgba(236, 187, 84, 0.05);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.wf-cap {
  fill: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

/* The .tier-mark pill, as SVG. Same outlined treatment for the same reason:
   there are a dozen of them in one picture and a filled gold pill would shout
   down the names it annotates. Uppercasing happens in build.mjs, not here -
   text-transform on SVG text is not dependable. */
.wf-mark rect {
  fill: rgba(236, 187, 84, 0.08);
  stroke: rgba(236, 187, 84, 0.5);
  stroke-width: 1;
}

.wf-mark text {
  fill: var(--gold);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* .tier-mark--max rides on the Max marks (the integrations row of the diagram,
   the Max lines of the feature sections). Same pill, same size - only the label
   differs, so it adds no rule of its own; it is the hook if Max ever needs one. */

/* ---------- breadth: beyond invoices ---------- */

.breadth-head {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.breadth .lead {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.breadth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 2.5rem;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
}

.breadth-cell {
  border-top: 1px solid var(--line-strong);
  padding-top: 1rem;
}

/* Dividers sit above every cell except the topmost row. The grid reflows
   3 -> 2 -> 1 columns (see the 960px/760px queries), so which cells form the
   first row changes; those queries restore the border on cells that drop to
   row 2. */
.breadth-cell:nth-child(-n + 3) {
  border-top: none;
  padding-top: 0;
}

.breadth-cell h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.breadth-cell p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 34ch;
}

/* ---------- metrics ---------- */

.metrics {
  background: linear-gradient(180deg, #0e0f14, #0b0c10);
  border-block: 1px solid var(--line);
}

.metrics h2 {
  margin-bottom: 2.5rem;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.metric {
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 1px solid var(--line-strong);
}

.metric-figure {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  line-height: 1.1;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

.metric-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 26ch;
}

/* ---------- how it works ---------- */

.how h2 {
  margin-bottom: 3.4rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.step {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
}

/* No divider above the first row. The step number normally straddles that line
   (negative margin + bg cutout); with no line it sits flush at the top instead.
   The grid collapses 3 -> 1 column at 960px, so steps 2/3 regain their divider
   there. */
.step:nth-child(-n + 3) {
  border-top: none;
  padding-top: 0;
}

.step:nth-child(-n + 3) .step-no {
  margin-top: 0;
}

.step-no {
  display: inline-block;
  margin-top: -2.32rem;
  padding-right: 0.8rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--gold);
}

.step h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.step p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

/* ---------- app teaser ---------- */

.app-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.app-body {
  margin: 1.2rem 0 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: 1rem;
}

.app-platforms {
  margin: 1.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Store badges under the app pitch. The App Store one is a <span> (no confirmed
   apps.apple.com URL yet), so this row is left-aligned like the copy above it,
   not centered like .cta-row - and a span naturally keeps the text cursor,
   which is the only affordance telling the two apart. */
.app-badges {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.phone {
  position: relative;
  width: 264px;
  justify-self: center;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(180deg, #12141a, #0d0e12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* dynamic-island notch, floating over the top of the screen */
.phone-island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 24px;
  border-radius: 13px;
  background: #040507;
  z-index: 2;
  pointer-events: none;
}

.phone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 212, 122, 0.6), rgba(201, 154, 52, 0.35), rgba(255, 212, 122, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.phone::after {
  content: '';
  position: absolute;
  inset: auto -30% -18% -30%;
  height: 40%;
  background: radial-gradient(50% 80% at 50% 100%, var(--gold-glow), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  z-index: -1;
}

.phone-screen {
  position: relative;
  min-height: 468px;
  background: #0c0d11;
  border-radius: 36px;
  padding: 0.85rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* status bar: time left, system icons right, island floats in the gap */
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 0.35rem;
  font-family: var(--font-mono);
}

.phone-time {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.phone-sys {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-sys .ic-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
}

.phone-sys .ic-dot:nth-child(1) { opacity: 0.5; }
.phone-sys .ic-dot:nth-child(2) { opacity: 0.75; }

.phone-sys .ic-batt {
  position: relative;
  width: 18px;
  height: 9px;
  margin-left: 3px;
  border: 1px solid var(--muted);
  border-radius: 2px;
}

.phone-sys .ic-batt::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  width: 62%;
  border-radius: 1px;
  background: var(--gold);
}

.phone-sys .ic-batt::after {
  content: '';
  position: absolute;
  top: 2.5px;
  right: -2.5px;
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: var(--muted);
}

.phone-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.phone-section {
  margin: 0.2rem 0 -0.1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* home indicator, pinned to the bottom safe area */
.phone-home {
  margin-top: auto;
  align-self: center;
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: rgba(236, 239, 243, 0.4);
}

.phone-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.phone-kpi {
  padding: 0.9rem 0.85rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.phone-kpi-value {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.45rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

.phone-kpi-label {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.phone-notif {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--ink);
}

.notif-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.notif-ok {
  color: #6fb98a;
  background: rgba(111, 185, 138, 0.12);
}

.notif-gold {
  color: var(--gold);
  background: rgba(236, 187, 84, 0.12);
}

.notif-sent {
  color: var(--muted);
  background: rgba(147, 156, 173, 0.12);
}

/* ---------- MCP / AI connector ---------- */

.mcp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mcp-points {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mcp-points li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.mcp-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
}

.mcp-chat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.15rem 1.15rem 1.25rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.mcp-chat-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.mcp-spark {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--gold-bright);
}

.mcp-chat-head span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.mcp-ask {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-size: 0.93rem;
  line-height: 1.5;
}

.mcp-cap {
  margin: 0.95rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.mcp-doc {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.mcp-doc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.mcp-doc-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.mcp-doc-sub {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.mcp-chip {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(236, 187, 84, 0.12);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
}

.mcp-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem 1rem;
  margin: 0.95rem 0;
}

.mcp-meta .lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.mcp-meta .lbl-gap {
  margin-top: 0.5rem;
}

.mcp-meta .val {
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.45;
}

.mcp-meta .r {
  text-align: right;
}

.mcp-pos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink);
}

.mcp-pos .q {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mcp-tot {
  border-top: 1px solid var(--line);
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  display: grid;
  gap: 0.3rem;
}

.mcp-tot div {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mcp-tot .grand {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
}

.mcp-tot .grand b {
  color: var(--gold-bright);
  font-weight: 800;
}

.mcp-reply {
  margin: 1rem 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.55;
}

.mcp-reply span {
  color: var(--gold-bright);
}

/* ---------- pricing ---------- */

/* The section header is centred over the cards. The eyebrow's leading hairline
   gets a trailing twin so it reads symmetrically, same trick as the hero. */
.pricing {
  text-align: center;
}

.pricing > .container > .eyebrow {
  justify-content: center;
}

.pricing > .container > .eyebrow::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.pricing > .container > h2 {
  margin-inline: auto;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

/* Three tiers side by side on a computer, one column on a phone (960px, the
   site's wide breakpoint - below it three cards leave no room for the feature
   lists). `align-items: stretch` keeps the cards the same height; each card is
   itself a flex column so its CTA can sit on the bottom edge however long its
   list is. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border-radius: 20px;
  background: linear-gradient(180deg, #12141a, #0d0e12);
  text-align: center;
}

/* The recommended tier stands a little proud of its neighbours. */
.price-card--popular {
  transform: translateY(-10px);
  box-shadow: 0 24px 60px rgba(201, 154, 52, 0.22);
}

.badge-popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color: var(--on-gold);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* The quiet sibling of .badge-popular: same pill, same mono capitals, but
   outlined instead of filled. It rides inline in the feature sections
   (solution kicker, breadth cell heading, mcp eyebrow) to say which tier a
   feature starts in, and there are up to a dozen of them on one screen - a
   filled gold pill that often would shout down the headings it annotates. */
.tier-mark {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  /* 0.5 rather than the 0.4 this started at: against the page ground that is
     3.46:1, over the 3:1 WCAG 1.4.11 asks of a component boundary (0.4 gave
     2.59:1). The label itself sits at 9.95:1 either way. */
  border: 1px solid rgba(236, 187, 84, 0.5);
  border-radius: 999px;
  background: rgba(236, 187, 84, 0.08);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  /* The headings around it are tight; keep the pill off their line height. */
  line-height: 1.45;
}

.price-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 212, 122, 0.65), rgba(201, 154, 52, 0.35), rgba(255, 212, 122, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.price-card .eyebrow {
  justify-content: center;
}

.price-card .eyebrow::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

/* Tier name. It is an h3, not an h2 - the section's own h2 now sits above the
   grid, so the cards must not each claim a second-level heading. */
.price-card h3 {
  margin: 0.2rem 0 0;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.price {
  margin: 1.2rem 0 0;
}

.price-figure {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

/* Eight characters and more ("1.234,56 €", typed into the number field) would
   overrun a card at the full size; main.js sets the class by length. */
.price-figure--long {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.price-unit {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.price-rate {
  margin: 0.45rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* One-sentence promise of the tier. */
.tier-claim {
  margin: 1.3rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-bright);
}

/* "Fuer wen" and "Benutzer" rows - label in ink, value muted. */
.tier-meta {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.tier-meta strong {
  color: var(--ink);
  font-weight: 600;
}

.includes-label {
  margin: 1.5rem 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Single column inside a tier card (the old flat card ran two). The bottom
   margin is the CTA's minimum gap - the button itself uses `margin-top: auto`
   to sit on the card's bottom edge, which on the tallest card would otherwise
   leave no space at all. */
.includes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.includes li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

.includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--gold);
}

/* An entry with a tooltip (ADR 0015): dotted underline and the help cursor
   say "there is more", the bubble below carries it. */
.includes li.has-tip {
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline dotted rgba(147, 156, 173, 0.7);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.includes li.has-tip:hover,
.includes li.has-tip.tip-open {
  text-decoration-color: var(--gold);
}

/* Bottom-aligned so all three CTAs line up across cards of different length. */
.price-card .btn {
  margin-top: auto;
}

/* ---------- price calculator (ADR 0017) ---------- */

/* One slider and one number field above the cards: "Belege im Monat". The
   slider runs on raster points at equal distance (0, 10, 25 ... 1600) with a
   linear stretch between them, so the small quantities most customers have
   get as much travel as the large ones. */
.belege-calc {
  max-width: 640px;
  margin: 0 auto clamp(2.6rem, 4.5vw, 3.6rem);
  text-align: left;
}

.belege-lead {
  margin: 0 0 1.2rem;
  text-align: center;
  text-wrap: balance;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
}

.belege-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.belege-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Read-only value next to the label (ADR 0017): the slider is the only input. */
.belege-n {
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.belege-range {
  display: block;
  width: 100%;
  margin: 0;
  height: 28px;
  background: transparent;
  accent-color: var(--gold);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.belege-range:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}

.belege-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright) var(--fill, 25%), rgba(147, 156, 173, 0.3) var(--fill, 25%));
}

.belege-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(147, 156, 173, 0.3);
}

.belege-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
}

.belege-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.belege-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

/* Raster labels under the track. The thumb centre travels from 10px to
   100% - 10px, so the labels sit on the same inset line. */
.belege-ticks {
  position: relative;
  height: 1.2rem;
  margin: 0.3rem 10px 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
}

.belege-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Hint under the slider after the intro run (main.js, ADR 0018): below the
   raster labels, with a small point up to the thumb at --tip-x. Same look as
   the tooltip bubble below. Absolute inside .belege-calc, so it takes no room
   (no layout shift) and is clamped by main.js to the block's width - on a
   phone it slides left of the thumb and only the point stays on it. It covers
   nothing inside the calculator; it may lie over the top of the plan cards,
   hence the calculator's own z-index above the card grid. */
.belege-calc {
  position: relative;
  z-index: 2;
}

.belege-hint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  max-width: min(360px, 100%);
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(236, 187, 84, 0.6);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.belege-hint.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.belege-hint::after {
  content: '';
  position: absolute;
  left: var(--tip-x, 50%);
  top: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-left: 1px solid rgba(236, 187, 84, 0.6);
  border-top: 1px solid rgba(236, 187, 84, 0.6);
  background: var(--surface-2);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .belege-hint {
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s;
  }
}

/* ---------- tooltip bubble (main.js, ADR 0015) ---------- */

/* One element for the whole page, placed by main.js with position:fixed and
   clamped 8px inside the viewport. Hidden by opacity/visibility, not display,
   so main.js can measure it before it shows. Dark on dark with the gold edge
   the price cards use; 320px at most, less on a narrow phone. */
.tip-bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  max-width: min(320px, calc(100vw - 16px));
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(236, 187, 84, 0.6);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s;
}

.tip-bubble.on {
  opacity: 1;
  visibility: visible;
}

.wf-n[data-tip] {
  cursor: help;
  /* The tap flash and focus ring of mobile browsers draw a blue box around the
     node; the gold stroke below is the only highlight it needs. */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.wf-n.tip-open .wf-box {
  stroke: var(--gold);
}

/* ---------- video (ADR 0019) ---------- */

/* Portrait clip at phone width: 360px at most on a computer, the full content
   width (viewport minus --pad) on a phone. Header centred like the pricing one.
   The thin gold edge is the price card's masked-gradient border. */
.video {
  text-align: center;
}

.video > .container > .eyebrow {
  justify-content: center;
}

.video > .container > .eyebrow::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.video > .container > h2 {
  margin-inline: auto;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.video-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #0d0e12;
  box-shadow: 0 24px 60px rgba(201, 154, 52, 0.16);
}

.video-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 212, 122, 0.65), rgba(201, 154, 52, 0.35), rgba(255, 212, 122, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1286;
  background: #0d0e12;
}

/* ---------- faq ---------- */

.faq h2 {
  margin-bottom: 2rem;
}

.faq-list {
  max-width: 800px;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

/* Dividers between items only - no trailing line under the last question. */
.faq-list details:last-child {
  border-bottom: none;
}

.faq-list summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.3rem 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--gold);
  flex: none;
}

.faq-list details[open] summary::after {
  content: '−';
}

.faq-list details p {
  margin: 0;
  padding: 0 3rem 1.5rem 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- final cta ---------- */

.final {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.final::before {
  content: '';
  position: absolute;
  inset: auto -20% -50% -20%;
  height: 90%;
  background: radial-gradient(50% 70% at 50% 100%, var(--gold-glow), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.final h2 {
  margin-inline: auto;
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.final p {
  margin: 1.2rem auto 0;
  max-width: 56ch;
  color: var(--muted);
}

/* ---------- legal pages (Impressum) ---------- */

.legal {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
  min-height: 55vh;
}

.legal h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.legal-intro {
  /* generous bottom margin: clear break before the first block */
  margin: 1rem 0 3.4rem;
  color: var(--muted);
  max-width: 62ch;
}

.legal-block {
  /* .legal-block is a <section>: cancel the global section padding */
  padding-block: 0;
  margin-top: 2rem;
  max-width: 62ch;
}

.legal-block h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: none;
}

.legal-block p {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}

.legal-block ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-block a {
  color: var(--gold);
}

.legal-odr {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.foot-tagline {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 34ch;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.foot-links a {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- cookie toast (Hauptbuch stamp) ---------- */

/* Fixed bottom-right, non-interactive decoration. Hidden until main.js adds
   .is-in (enter) once per session, then removes it (exit). The [hidden] attribute
   is dropped by main.js so no-JS users never see it. */
.cookie-toast {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 60;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cookie-toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* The toast and the back-to-top button share the bottom right corner. The button
   appears past 0.8 screen heights, the toast in the first 5.5s of a session -
   they collide exactly when a reader lands and scrolls straight down, which is
   the common case, and at 390px the toast's caption runs right through the
   button (measured). Lift the toast clear of the button's slot for as long as
   the button is actually there. Where :has() is missing the two simply overlap
   as before and the button (z-index 150) draws on top; the toast is decorative
   and pointer-events:none, so it never swallows a tap either way. */
body:has(.totop.show) .cookie-toast {
  bottom: calc(clamp(14px, 3vw, 26px) + 54px + 0.9rem + env(safe-area-inset-bottom, 0px));
}

.cookie-stamp {
  display: inline-block;
  transform: rotate(-6deg);
  padding: 8px 16px;
  border: 2px solid var(--gold-deep);
  border-radius: 8px;
  background: rgba(201, 154, 52, 0.08);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.cookie-cap {
  display: block;
  margin: 8px 2px 0;
  max-width: 30ch;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-toast {
    transition: opacity 0.3s ease;
    transform: none;
  }
  .cookie-toast.is-in {
    transform: none;
  }
}

/* ---------- motion ---------- */

.rise {
  animation: rise 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  animation-delay: calc(var(--d, 0) * 110ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

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

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

  .rise {
    animation: none;
  }

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

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .switcher {
    right: 14px;
  }
}

@media (max-width: 960px) {
  .feature,
  .feature-flip {
    grid-template-columns: 1fr;
  }

  .feature-flip .feature-text {
    order: 0;
  }

  .entry {
    grid-template-columns: 48px 1fr;
  }

  .entry-tag {
    grid-column: 2;
    justify-self: start;
  }

  .metric-row,
  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* One tier per row. The cards are capped and centred so a single column does
     not stretch a feature list across the whole tablet width, and the popular
     card drops its lift - nothing to stand proud of when it is stacked. */
  .price-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 560px;
    margin-inline: auto;
  }

  .price-card--popular {
    transform: none;
  }

  .breadth-head {
    grid-template-columns: 1fr;
  }

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

  /* Two columns now: cell 3 is in row 2, so it regains its divider. */
  .breadth-cell:nth-child(3) {
    border-top: 1px solid var(--line-strong);
    padding-top: 1rem;
  }

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

  /* Stack the connector section; lead with the copy, mock below it. */
  /* minmax(0, 1fr): a bare 1fr is minmax(auto, 1fr), so the track grew to the
     min-content of its widest child and pushed the 320 px page 7 px wide. */
  .mcp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mcp-copy {
    order: -1;
  }

  .phone {
    margin-top: 1rem;
  }

  .step {
    max-width: 520px;
  }

  /* One column now: steps 2 and 3 are their own rows, so they get the divider
     (and the straddling number) back. */
  .step:nth-child(2),
  .step:nth-child(3) {
    border-top: 1px solid var(--line-strong);
    padding-top: 1.5rem;
  }

  .step:nth-child(2) .step-no,
  .step:nth-child(3) .step-no {
    margin-top: -2.32rem;
  }

  .switcher {
    position: static;
    width: auto;
    max-width: 340px;
    margin: 1rem auto 0;
  }
}

/* ---------- header breakpoint: 860px, not 760px ----------
   The header's own breakpoint sits ABOVE the rest of the mobile layout on
   purpose. 861px is where the bar stops standing still and starts riding along
   (see the .site-head block), and the navigation has to fold into the burger at
   exactly the same width - a desktop nav on a bar that scrolls away would take
   the links out of reach with it. Everything else that reflows for phones stays
   at 760px below. */
@media (max-width: 860px) {
  /* Below 861px the 42x42 menu button, not the 34px logo, is the tallest thing
     in the row, so the bar is 8px taller here than on a computer: 42 + 2x0.8rem
     + the 1px hairline = 68.59px, measured in Chromium and WebKit at 360, 390
     and 768. The reservation has to follow the bar, or its lower edge lies over
     the first 7.6px of main - the bar is out of flow at every width. */
  :root {
    --topH: 69px;
  }

  /* Riding along instead of standing still. Absolute, not static: the body
     reserves --topH either way, and absolute keeps the bar out of the flow so
     the reservation stays the single source of its height. */
  .site-head {
    position: absolute;
  }

  /* No condensed state while riding along - it would be scrolled out of frame
     before it could ever show itself. */
  .site-head.solid {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-head.solid::after {
    opacity: 0;
  }

  .site-head.solid .head-row {
    padding-block: 0.8rem;
  }

  .nav-burger {
    display: flex;
  }

  /* Header folds into the burger: the mobile language widget sits left of it; the
     desktop-placed widget (inside nav-links) is hidden with the rest of the
     desktop nav. The .nav becomes a flex row for the widget + burger. */
  .nav {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lang-widget-mob {
    display: inline-flex;
  }

  .lang-widget-desk {
    display: none;
  }

  /* The links move to the full-screen sheet, not to a dropdown under the bar -
     a dropdown anchored to a bar that scrolls away is unreachable the moment
     the reader has scrolled. */
  .nav-links {
    display: none;
  }
}

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

  /* One column now: only cell 1 is the first row; cell 2 regains its divider
     (cell 3 is already restored by the 960px query above). */
  .breadth-cell:nth-child(2) {
    border-top: 1px solid var(--line-strong);
    padding-top: 1rem;
  }

  .faq-list details p {
    padding-right: 0;
  }

  .foot-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Only two legal links remain (imprint + privacy), so they sit inline in the
     base flex row - no need for the old 5-link two-column grid - just a
     comfortable 44px tap height on mobile. */
  .foot-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
  }
}