/* Beckon Club landing page — "Midnight Blue"
   The design colour of this site is a deep, dark blue. It is NOT the violet of
   Beckon Access and NOT the gold of Beckon Billing; the violet appears exactly
   once, in the "Works with Beckon Access" badge, where it belongs.

   Every foreground token below was MEASURED against every ground token with the
   WCAG 2.1 relative-luminance formula, not eyeballed. The numbers are in
   CLAUDE.md and in the run report. The floor is 4.5:1 for body text on any
   ground it is actually used on, and the worst pair in the set is
   --blue on --surface-2 at 4.96:1. */

:root {
  /* grounds, darkest first */
  --bg: #070c16;
  --bg-elev: #0b1220;
  --surface: #101a2e;
  --surface-2: #16233c;

  /* the accent, and the two shades that are FILL ONLY (never text) */
  --blue: #5b8cff;
  --blue-bright: #9dc4ff;
  /* MEASURED, and the measurement moved this value: at the original #3f6fe0
     the dark end of the primary button gave --on-blue only 4.14:1, under the
     4.5:1 floor. The button label is 16px/600, which is not "large text", so
     the floor applies to it. #4a7ae8 measures 4.76:1. */
  --blue-deep: #4a7ae8;
  --blue-glow: rgba(91, 140, 255, 0.28);

  /* hairlines are the accent at low alpha, so the page has one hue */
  --line: rgba(91, 140, 255, 0.16);
  --line-strong: rgba(91, 140, 255, 0.34);

  /* text */
  --ink: #e8eef9;
  --muted: #9db0cd;
  --on-blue: #06101f;

  /* states */
  --ok: #4fd1a5;
  --alert: #e8746b;
  --violet: #b07cd6;

  /* The wordmark gradient. Beckon Access paints its whole name in one violet
     gradient and Beckon Billing its own in gold; this is the blue counterpart,
     and it is why no part of "Beckon Club" is white any more.
     MEASURED: the END stop is where a gradient over text fails, because the
     bottom of the glyphs is the darkest point. #5b8cff (= --blue) gives 6.19:1
     on --bg and 5.92:1 on --bg-elev; against the worst ground the translucent
     header can ever sit on (0.82 x --bg over --surface-2 = #0a101d) it is
     6.01:1. A darker end stop was available and rejected: #4a7ae8 measured
     4.67:1, which clears the floor but leaves no margin at all. */
  --wm-top: #cfe0ff;
  --wm-mid: #8fb8ff;
  --wm-end: #5b8cff;

  /* The hover colours of the other two products' names in the "Alle Produkte"
     panel: Access violet, Billing gold - never this site's blue. */
  --access-hover: #d0a8ec;
  --billing-hover: #f4cc6e;

  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Side gutter, in ONE place: .container takes its padding-inline from here,
     and the elements that sit outside .container (the full-screen menu, the
     back-to-top button) line up with page content from the same number. */
  --pad: 1.5rem;

  /* Height of the resting header bar. The bar is out of flow at every width, so
     the body reserves its height itself. Measured, not guessed: 34px logo +
     2x0.8rem padding-block + the 1px hairline = 60.6px, rounded up. Below 861px
     the 42x42 menu button is taller than the logo and the value changes with it
     (see the 860px block). */
  --topH: 61px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  /* The one place overflow-x belongs. NOT on body: that turns the body into a
     scroll container and kills position:fixed for the header. */
  overflow-x: hidden;
}

body {
  margin: 0;
  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,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue);
  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;
}

.skip {
  position: absolute;
  left: 0;
  top: -200px;
  z-index: 200;
  padding: 0.7rem 1rem;
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 600;
  border-radius: 0 0 8px 0;
}

.skip:focus {
  top: 0;
}

.container {
  max-width: 1160px;
  margin-inline: auto;
  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(--blue);
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  /* The display face sets its word space narrow, and the negative tracking below
     closes it further: "an keiner Stufe springt" read as one word at 400px
     (rwb4-33). A little back, measured on the three heading sizes. */
  word-spacing: 0.1em;
}

h1 {
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 21ch;
  text-wrap: balance;
}

h1 em {
  font-style: normal;
  color: var(--blue-bright);
}

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

h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  margin: 0;
}

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

section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  /* Every section is its own containing block for the decorative glows below,
     so a glow can never widen the page. */
  position: relative;
  isolation: isolate;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
}

.btn-lg {
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
}

/* The primary button is a FILL, so the text sits on --blue-deep at its darkest
   point. --on-blue on --blue-deep measures 4.72:1, the gradient's light end is
   far better; both clear the floor. */
.btn-primary {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
  color: var(--on-blue);
  box-shadow: 0 8px 26px -10px var(--blue-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px var(--blue-glow);
}

.btn-ghost {
  background: rgba(91, 140, 255, 0.06);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  background: rgba(91, 140, 255, 0.12);
  border-color: var(--blue);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.microtrust {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
  /* The trust line is three claims joined by middots. At 320px it must wrap
     between them, not inside a word. */
  max-width: 64ch;
}

/* tick lists */
.ticks {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.ticks li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
  font-size: 0.93rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.62rem;
  height: 0.36rem;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* ---------- header ---------- */
/* Fixed on desktop. Below 861px it is absolute instead: on iOS the page cannot
   paint into the strip above a standing browser bar, and a fixed header there
   ends up half under it. Absolute means the bar rides out with the page, which
   is why the full-screen menu is a sheet and why there is a back-to-top button. */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(7, 12, 22, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  min-width: 0;
}

.brand svg {
  flex: none;
}

/* The whole name, both words, in one gradient - the same move Beckon Access
   makes with its violet and Beckon Billing with its gold. It used to be white
   "Beckon" plus blue "Gym", which read as two things rather than one name.
   `color` is declared last as the fallback: an engine that ignores
   -webkit-text-fill-color must still paint the text, not hide it. */
.wordmark {
  display: inline-flex;
  gap: 0.28em;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--wm-top), var(--wm-mid) 52%, var(--wm-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--wm-end);
}


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

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

.nav-links > a {
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links > a:hover {
  color: var(--ink);
  background: rgba(91, 140, 255, 0.08);
}

.lang-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
  text-decoration: none;
}

.lang-widget:hover {
  background: rgba(91, 140, 255, 0.12);
  border-color: var(--blue);
}

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

/* ---------- "Alle Produkte": nav item + full-width panel ----------
   Pattern of beckonaccess-homepage 4332c49. No JavaScript: <details>/<summary>.
   The panel is anchored to .site-head (its containing block), NOT to the
   <details> - hence `position: static` there; positioned, left/right:0 would
   collapse onto the width of the nav item. No sender line. */
.prod-det-wide {
  position: static;
}

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

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

.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);
}

.prod-det-wide > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

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

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

/* Fully opaque: translucent, the headline shows through the panel. */
.pp-wide {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  padding: 1.3rem 0 1.5rem;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg-elev);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

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

.pp-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pp-col:hover,
.pp-col:focus-visible {
  background: var(--surface);
  text-decoration: none;
}

.pp-col.is-current {
  border-color: var(--blue);
  background: var(--surface);
}

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

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

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

.pp-col--access:hover .pp-name,
.pp-col--access:focus-visible .pp-name {
  color: var(--access-hover);
}

.pp-col--billing:hover .pp-name,
.pp-col--billing:focus-visible .pp-name {
  color: var(--billing-hover);
}

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

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

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

.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  background: rgba(91, 140, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}

.burger-bar,
.burger-bar::before,
.burger-bar::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: translateX(-50%);
}

.burger-bar {
  top: 50%;
  margin-top: -1px;
}

.burger-bar::before,
.burger-bar::after {
  content: '';
}

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

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

/* full-screen menu */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: calc(env(safe-area-inset-top, 0px) + 5rem) var(--pad) 3rem;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-sheet.open {
  display: flex;
}

/* Centred while it fits, top-aligned while it does not (rwb4-11). Plain
   `justify-content: center` pushes the first rows above the scroll origin on a
   short screen (568x320: first link at -186px), where no scrolling can reach
   them. Auto margins on the first and last flex item share the free space and
   fall to zero on overflow - the same result as `safe center`, which older
   Safari lacks. */
.nav-sheet > a:first-of-type {
  margin-top: auto;
}

.nav-sheet > .sheet-prod {
  margin-bottom: auto;
}

.nav-sheet > a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 7vw, 2rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.nav-sheet > a span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--blue);
  flex: none;
}

/* The same three products in the burger sheet, where .nav-links is gone.
   .nav-sheet > a (the four content links) writes big display type; the items
   here are NOT direct children, and every typographic property is stated
   explicitly so nothing is inherited - measured: name 16px, sentence 13.6px,
   text-transform none. */
.sheet-prod {
  width: 100%;
  max-width: 420px;
  margin-top: 1.6rem;
}

.sheet-prod-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.sheet-prod-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--ink);
}

.sheet-prod-item .pp-mark {
  margin-top: 0.1rem;
}

.pp-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sheet-prod-item .pp-name {
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

.sheet-prod-item .pp-satz {
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
}

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

.sheet-prod-item--access:hover .pp-name,
.sheet-prod-item--access:focus-visible .pp-name {
  color: var(--access-hover);
}

.sheet-prod-item--billing:hover .pp-name,
.sheet-prod-item--billing:focus-visible .pp-name {
  color: var(--billing-hover);
}

.nav-sheet__x {
  /* Fixed (the sheet is fixed too), not absolute: on a short screen the sheet
     scrolls, and an absolute button would scroll away with the first rows. */
  position: fixed;
  z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + 1.1rem);
  right: var(--pad);
  padding: 0.5rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

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

.hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}

.hero::before {
  /* The glow. Fixed size in vmax and clipped by .hero's overflow, so it cannot
     contribute to page width — the classic source of a 320px overflow. */
  content: '';
  position: absolute;
  z-index: -1;
  top: -20vmax;
  left: 50%;
  width: 90vmax;
  height: 60vmax;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, var(--blue-glow), transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}

.hero-sub {
  margin-top: 1.2rem;
  max-width: 58ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.stage {
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.2rem;
  align-items: start;
}

.stage-side {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

.stage-side-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.tile {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.tile.active {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.tile-v {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

.tile-k {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- product screenshots ---------- */
/* Real portal screenshots in a slim browser frame, as on beckonbilling: three
   dots, no address bar (ADR 0014). The <img> carries width/height, so the box
   is reserved before the picture arrives; here it only scales to the column. */

.browser {
  position: relative;
  margin: 0;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.75);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}

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

.dot-blue {
  background: var(--blue);
}

.dot-dim {
  background: var(--line-strong);
}

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

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

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

/* ---------- the one remaining sketch: the member app on a phone ---------- */
/* Built from the page's own tokens. The capture tool cannot log in to the
   member area (magic link by mail), so this row stays a sketch. */

.mk {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.mk-body {
  padding: 0.9rem;
  display: grid;
  gap: 0.55rem;
}

/* phone */
.mk-phone {
  max-width: 260px;
  margin-inline: auto;
  border-radius: 26px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: 0.5rem;
}

.mk-notch {
  width: 58px;
  height: 5px;
  margin: 0.3rem auto 0.6rem;
  border-radius: 999px;
  background: var(--line-strong);
}

.mk-phone .mk-body {
  padding: 0.5rem;
}

.mk-phone-hi {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.mk-pcard {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.mk-pcard-k {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.mk-pcard-v {
  font-size: 0.85rem;
  font-weight: 500;
}

.mk-pcta {
  margin-top: 0.2rem;
  padding: 0.6rem;
  text-align: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
  color: var(--on-blue);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- solution ---------- */

.benefits {
  margin-top: clamp(2rem, 5vw, 3.2rem);
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.6rem);
}

.benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}

/* Alternate sides so the page has rhythm. Order, not direction: with
   `direction` the text inside would flip too. */
.benefit:nth-child(even) .benefit-text {
  order: 2;
}

.benefit-text {
  min-width: 0;
}

.benefit-mock {
  min-width: 0;
}

.kicker {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}

.benefit-text h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.benefit-text > p {
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- modules ---------- */

.modules {
  background: var(--bg-elev);
  border-block: 1px solid var(--line);
}

.mod-grid {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.mod {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

.mod h3 {
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.mod ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.mod li {
  position: relative;
  padding-left: 0.95rem;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.45;
}

.mod li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---------- flow ---------- */

.flow {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  /* 200px, not 230px: the flow has FIVE stations and the container is 1160px
     wide. At 230px the fifth wraps onto a row of its own and the connector of
     the fourth then points into empty space. (1160 - 4x1rem gap) / 5 = 219px,
     so 200px is what makes one row possible; 230px silently forbade it. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.flow-step {
  position: relative;
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

/* The connecting line between stations. Drawn only where there IS a next step
   on the same row — hence inset and clipped; it never adds width. */
.flow-step::after {
  content: '';
  position: absolute;
  top: 1.75rem;
  right: -1rem;
  width: 1rem;
  height: 1px;
  background: var(--line-strong);
}

.flow-step:last-child::after {
  display: none;
}

.flow-no {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--blue);
}

.flow-step h3 {
  margin-bottom: 0.5rem;
}

.flow-step p {
  color: var(--muted);
  font-size: 0.9rem;
}

.flow-tag {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--blue);
}

/* ---------- access ---------- */

.access {
  background: var(--bg-elev);
  border-block: 1px solid var(--line);
}

.acc-cards {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.acc-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

.acc-card h3 {
  margin-bottom: 0.55rem;
}

.acc-card p {
  color: var(--muted);
  font-size: 0.91rem;
}

/* The pairing with Beckon Access: one quiet line between the lead and the three
   cards, where a bordered panel with a badge, its own heading, three ticks and a
   button used to sit. That panel was nearly as tall as the section it belonged
   to and advertised another product louder than this page's own.
   The violet is gone with it - on this page the other products are grey in the
   header and a plain link here. */
.acc-pairing {
  margin-top: 1.4rem;
  max-width: 72ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.acc-pairing a {
  color: var(--blue);
  text-underline-offset: 3px;
}

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

.pricing {
  overflow: hidden;
}

.pricing::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -30vmax;
  left: 50%;
  width: 80vmax;
  height: 55vmax;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, var(--blue-glow), transparent 62%);
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- the calculator ---------- */
/* The breakdown matters more than the total: the sum says WHAT it costs, the
   bands say WHY it flattens. So the bands get the room, not the big number. */

.calc {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
}

/* One plan since ADR 0013: the card opens straight on .calc-main. The plan
   chooser that sat above it (.calc-tariffs) is gone, with its styles. */
.calc-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  align-items: start;
}

/* Label left, value right, slider underneath - the shape both sister sites
   use. The number input that used to sit here is gone (owner, 2026-10-01): the
   slider is the only input and the value is a read-only <output>.
   ⚠️ There is no vertical-centring trick to compensate for any more. The old
   layout stacked a label over a taller boxed input; this is one baseline-aligned
   row, so the label needs no offset and none is set. */
.calc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.calc-label {
  font-size: 0.92rem;
  color: var(--muted);
  min-width: 0;
}

/* The value in the accent colour, like Beckon Billing does it - it is the one
   figure on this row that changes, and this page's identity is the blue.
   Tabular digits so the row does not twitch while the handle moves. */
.calc-value {
  /* Keeps the value on the RIGHT even when the question wraps and pushes it
     onto a line of its own - which is what happens at 320px. Without it the
     number lands left-aligned under the label and the row stops reading as
     "label left, value right" exactly where the layout is tightest. */
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Marks under the track. The scale is logarithmic, so without them the handle
   says nothing about where it is - the one thing a log slider really owes the
   reader. Positions come from build.mjs with the same formula the script maps
   with. */
/* Evenly spaced, like the Beckon Access calculator: the scale is linear now, so
   the marks no longer need a position computed from a curve, and the outer two
   no longer need pinning - space-between puts them on the edges by itself. */
.calc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
}
/* Zero members: the breakdown has no bands to list, so it says so rather
   than leaving a hole where the table was. */
.cband-empty {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.calc-range {
  width: 100%;
  /* MEASURED: 4px of inner overflow at every width. Chrome's UA stylesheet puts
     `margin: 2px` on input[type=range], and 100% width plus 2px either side is
     exactly 4px too wide. The document did not overflow because the padding of
     .calc-main absorbed it - so the page-level test stayed green while the
     slider was running under its own container's edge. Reset the inline margin
     explicitly; `box-sizing` does not cover margins. */
  margin: 0.8rem 0 0;
  accent-color: var(--blue);
}

.calc-hint {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.calc-out {
  padding: 1rem 1.1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

.calc-total strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  /* The total is a figure that changes while the slider moves; tabular digits
     stop the whole box from twitching as the width of each glyph changes. */
  font-variant-numeric: tabular-nums;
}

.calc-total-sub {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.calc-per {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.calc-break {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}

/* Die Aufschluesselung ist ein Aufklapper (Betreiber 2026-10-01: ausklappbar,
   standardmaessig eingeklappt). Derselbe Haken wie im FAQ dieser Seite, damit
   "hier steht mehr darunter" EIN Zeichen hat und nicht zwei.
   Ohne `list-style: none` setzt der Browser sein eigenes Dreieck davor. */
.calc-break > summary {
  position: relative;
  padding-right: 2rem;
  cursor: pointer;
  list-style: none;
}
.calc-break > summary::-webkit-details-marker {
  display: none;
}
.calc-break > summary::after {
  content: '';
  position: absolute;
  right: 0.3rem;
  top: 0.1rem;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}
.calc-break[open] > summary::after {
  transform: rotate(-135deg);
  top: 0.3rem;
}
/* Eingeklappt traegt die Zeile sonst den Abstand zu einer Tabelle, die gar
   nicht da ist. */
.calc-break:not([open]) > summary {
  margin-bottom: 0;
}
.calc-break-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}

.cgroup + .cgroup {
  margin-top: 1.2rem;
}

.cgroup-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

.cgroup-head b {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cbands {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Three columns: which members, how they are priced, what that costs.
   At 320px the middle column drops under the first rather than squeezing -
   see the narrow block at the end of this file. */
.cband {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.cband:last-child {
  border-bottom: none;
}

.cband-range {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--blue);
  white-space: nowrap;
}

.cband-calc {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cband-cost {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-fine {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 70ch;
}

.price-inc {
  margin-top: 2rem;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.price-inc-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.9rem;
}

.price-list {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.price-notes {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.price-note {
  padding: 1.15rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 13px;
  min-width: 0;
}

.price-note h3 {
  font-size: 0.98rem;
  margin-bottom: 0.45rem;
}

.price-note p {
  color: var(--muted);
  font-size: 0.87rem;
}

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

.faq {
  background: var(--bg-elev);
  border-block: 1px solid var(--line);
}

.faq-list {
  margin-top: clamp(1.8rem, 4vw, 2.4rem);
  display: grid;
  gap: 0.7rem;
  max-width: 860px;
}

.qa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.qa summary {
  padding: 1rem 2.6rem 1rem 1.1rem;
  position: relative;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
}

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

.qa summary::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.qa[open] summary::after {
  transform: rotate(-135deg);
  top: 1.5rem;
}

.qa p {
  padding: 0 1.1rem 1.1rem;
  color: var(--muted);
  font-size: 0.93rem;
  max-width: 76ch;
}

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

.final {
  text-align: center;
}

.final h2,
.final .lead {
  margin-inline: auto;
}

.final .cta-row {
  justify-content: center;
}

.final .microtrust {
  margin-inline: auto;
}

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

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

.foot-row {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

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

.foot-links {
  display: grid;
  gap: 0.5rem;
}

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

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

.foot-copy {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- legal pages ---------- */

.legal {
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
}

.legal h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  max-width: none;
}

.legal-intro {
  margin-top: 1rem;
  max-width: 70ch;
  color: var(--muted);
}

.legal-block {
  padding-block: 1.4rem 0;
  max-width: 76ch;
}

.legal-block h2 {
  font-size: 1.1rem;
  font-weight: 600;
  max-width: none;
  margin-bottom: 0.6rem;
}

.legal-block p {
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: 0.94rem;
  /* Legal text carries long words (Datenschutzbehörde, Verarbeitungsverzeichnis)
     and URLs. Both must break rather than widen the page at 320px. */
  overflow-wrap: break-word;
}

.legal-block ul {
  margin: 0.4rem 0 0.8rem;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.94rem;
  overflow-wrap: break-word;
}

.legal-block li {
  margin-bottom: 0.3rem;
}

.legal-block a {
  color: var(--blue);
  overflow-wrap: break-word;
}

.legal-odr {
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.88rem;
}

/* ---------- back to top ---------- */

.totop {
  position: fixed;
  z-index: 90;
  right: max(var(--pad), env(safe-area-inset-right, 0px));
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(16, 26, 46, 0.9);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  /* `visibility`, not only opacity: an invisible button must not take the tab
     stop either (rwb4-13). It flips to hidden AFTER the fade-out, at once on
     the way in. */
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.totop.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

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

/* r=25 here must match the circumference in main.js. */
.totop__bahn,
.totop__fort {
  fill: none;
  stroke-width: 2;
}

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

.totop__fort {
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: 157.08;
  stroke-dashoffset: 157.08;
}

.totop i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
}

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

.rise {
  animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--d) * 70ms);
}

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

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* No JavaScript, or a reader who asked for less motion: everything is simply
   visible. A reveal that never fires is a blank page. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

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

  .rise,
  [data-reveal] {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }

  /* The rest: button lift, chevron turn, FAQ arrow, back-to-top fade
     (rwb4-33). A blanket rule, so a transition added later is covered too. */
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* ---------- breakpoints ---------- */

@media (max-width: 1000px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-side {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: start;
  }

  .stage-side-label {
    grid-column: 1 / -1;
  }

  .price-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-head {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 880px) {
  .benefit {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On one column the mock must follow its text in BOTH rows, so the
     alternating order from the two-column layout is undone here. */
  .benefit:nth-child(even) .benefit-text {
    order: 0;
  }

  .flow-step::after {
    display: none;
  }
}

@media (max-width: 860px) {
  :root {
    --topH: 69px;
  }

  /* Absolute, not fixed: see the .site-head note. */
  .site-head {
    position: absolute;
  }

  .nav-links {
    display: none;
  }

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

  .foot-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 399px) {
  :root {
    --pad: 1.1rem;
  }

  .wordmark {
    font-size: 0.95rem;
  }

  .totop {
    width: 46px;
    height: 46px;
  }
}

/* ---------- the calculator at narrow widths ---------- */
/* The calculator is the widest construction on this page: a slider, a result
   box and a three-column breakdown. Everything below is measured, not guessed -
   see CLAUDE.md. */

@media (max-width: 820px) {
  .calc-main {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  /* The band row drops its middle column under the first. Squeezing three
     columns into 320px makes "1.600 × 0,0078 €" wrap mid-number, which reads
     as a different figure. */
  .cband {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.1rem;
  }

  .cband-range {
    grid-column: 1;
  }

  .cband-cost {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .cband-calc {
    grid-column: 1;
    font-size: 0.8rem;
  }

  .calc-value {
    font-size: 1.15rem;
  }
}

/* ---------- use cases (B4.1) ---------- */
/* The pages /anwendungen/<slug>/ and /en/use-cases/<slug>/ and the tile section
   (#anwendungen) on the start page. Built by build.mjs from
   content/usecases/*.mjs; they reuse the hero, the cards of .mod, .faq and
   .final, and add only what those do not have. */

.uc-back {
  /* At least 24px tall (WCAG 2.5.8): the bare line measured 19px (rwb4-33). The
     margin gives back what the box took, so the rhythm below stays. */
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
}

.uc-back:hover,
.uc-back:focus-visible {
  color: var(--blue-bright);
}

.uc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 5vw, 3.5rem);
  align-items: center;
}

/* The hero keeps its own glow; below it the cards follow closely. */
.uc-hero {
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Without a picture the text takes the full row. */
.uc-hero-grid > :only-child {
  grid-column: 1 / -1;
}

.uc-hero-text {
  min-width: 0;
}

.uc-motif {
  margin: 0;
  min-width: 0;
}

.uc-motif img,
.uc-tile-motif img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.uc-sections {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 4.5rem);
}

.uc-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.uc-card {
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

.uc-card h2 {
  margin-bottom: 0.7rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: none;
}

.uc-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.uc-card .ticks {
  margin-top: 0.9rem;
}

.uc-tiles {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid;
  gap: 1rem;
  /* auto-fill, not auto-fit: a tile keeps its size when there are only two. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.uc-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.uc-tile:hover,
.uc-tile:focus-visible {
  border-color: var(--line-strong);
}

.uc-tile-motif {
  margin-bottom: 0.4rem;
}

.uc-tile-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.uc-tile-line {
  color: var(--muted);
  font-size: 0.9rem;
}

.uc-tile-go {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 760px) {
  .uc-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}