/* ───────────────────────────────────────────────────────────────────
   BANAKI · Design Tokens + Basisklassen
   Logo-geführt: Petrol #1B5063 · Gelb #FFBF00

   Diese Datei liegt bewusst neben variables.css statt darin: die
   RentALL-Variablen bleiben unangetastet, die Banaki-Ebene wird
   danach geladen und überschreibt gezielt. Alle eigenen Klassen
   tragen das Präfix bnk-, weil Bootstrap .btn, .chip und .container
   bereits belegt.

   Die Tokens heißen brand/accent statt der historischen moss/sun aus
   dem Prototyp — so wie es das Handoff-README verlangt.
   ─────────────────────────────────────────────────────────────────── */

/* Fonts are self-hosted under /fonts (SIL OFL 1.1, licences next to
   the files). Until 23.09.2026 they came from fonts.googleapis.com, which
   sent every visitor's IP to Google (LG Munich I, 3 O 17493/20).
   Variable fonts: one file covers the whole weight range. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marke — unveränderlich, direkt aus den offiziellen Logo-Dateien */
  --bnk-brand: #1b5063;
  --bnk-brand-deep: #0f3b4b;
  --bnk-brand-pale: #dfe7e8;
  --bnk-brand-glow: #b9cdd3;

  --bnk-accent: #ffbf00;
  --bnk-accent-deep: #e0a500;
  --bnk-accent-soft: #ffdc7a;

  /* Auf Gelb wird immer mit diesem Petrol geschrieben, nie mit Weiß. */
  --bnk-on-accent: #123745;

  /* Flächen */
  --bnk-bg: #f6f3ec;
  --bnk-bg-soft: #e4e5df;
  --bnk-bg-card: #ffffff;
  --bnk-bg-deep: #123745;
  --bnk-bg-deep-soft: #1b5063;

  /* Text */
  --bnk-ink: #12262e;
  --bnk-ink-2: #38505a;
  --bnk-ink-3: #6b8189;
  --bnk-ink-4: #9aabb1;

  --bnk-line: rgba(18, 38, 46, 0.14);
  --bnk-line-soft: rgba(18, 38, 46, 0.06);

  /* Typo — Display ist eine geometrische Sans in 700, nicht kursiv:
     sie spiegelt die Wortmarke des Logos. */
  --bnk-font-display: "Plus Jakarta Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --bnk-font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bnk-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radien */
  --bnk-r-sm: 6px;
  --bnk-r-md: 12px;
  --bnk-r-lg: 20px;
  --bnk-r-xl: 28px;
  --bnk-r-full: 999px;

  /* Schatten */
  --bnk-shadow-soft: 0 1px 2px rgba(27, 36, 25, 0.04), 0 8px 28px rgba(27, 36, 25, 0.06);
  --bnk-shadow-card: 0 1px 2px rgba(27, 36, 25, 0.06), 0 18px 40px rgba(27, 36, 25, 0.1);
  --bnk-shadow-deep: 0 30px 80px rgba(27, 36, 25, 0.18);

  /* Statusfarben für Hinweise, Badges und Meldungen. Schrift und Fläche
     bilden je ein Paar, das auf Lesbarkeit geprüft ist (Herkunft:
     Host-Onboarding im Site-Admin). Gilt für Admin und Hauptseite. */
  --bnk-ok: #1f6f63;
  --bnk-ok-bg: #e4eeeb;
  --bnk-warn: #6b4e00;
  --bnk-warn-bg: #fff6e0;
  --bnk-error: #8a1f11;
  --bnk-error-bg: #fdecea;
  --bnk-info: #25407a;
  --bnk-info-bg: #e8ecf5;

  /* Maße */
  --bnk-header-height: 72px;
  /* Höhe der GROUNDS-Zeile über der Kopfleiste. Sie steht auf jeder
     öffentlichen Seite und schiebt alles darunter um ihren Betrag nach
     unten — die Suchseite rechnet mit festen Abständen und muss den Wert
     kennen. Wer die Zeile höher macht oder entfernt, ändert nur hier. */
  --bnk-groundsleiste-h: 38px;
  --bnk-container: 1320px;
  --bnk-container-wide: 1480px;
  --bnk-container-tight: 980px;

  /* Grundschrift der gesamten Anwendung */
  --font-family-base: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── Anschluss an die vorhandenen RentALL-Variablen ──────────────────
   Damit übernehmen bestehende Komponenten die Banaki-Farben, ohne dass
   jede einzelne CSS-Datei angefasst werden muss. */
.lightMode {
  --background-primary: var(--bnk-bg);
  --primary-foreground: var(--bnk-ink);
  --secondary-foreground: var(--bnk-ink-2);
  --tertiary-foreground: var(--bnk-ink-3);

  --primary-border: var(--bnk-line);
  --secondary-border: var(--bnk-ink);

  --primary-gray-bg: var(--bnk-bg-soft);
  --secondary-gray-bg: var(--bnk-bg-soft);
  --tertiary-gray-bg: var(--bnk-bg-soft);
  --common-hover-bg: rgba(18, 38, 46, 0.05);

  /* Ladeplatzhalter in derselben warmen Fläche wie die Karten, damit vor
     dem Laden nicht kurz ein kühles Grau aufblitzt. */
  --skeleton-primary: var(--bnk-bg-soft);
  --skeleton-secondary: #d8dad3;
  --unit-pricing-skeleton-primary-bg: var(--bnk-bg-soft);
  --unit-pricing-skeleton-secondary-bg: #d8dad3;

  --primary-bg: var(--bnk-brand);
  --primary-bg-hover: var(--bnk-brand-deep);
  --secondary-bg: var(--bnk-accent);
  --secondary-bg-hover: var(--bnk-accent-deep);
  --primary-link-foreground: var(--bnk-brand);
  --primary-btn-foreground: #ffffff;

  --footer-bg: var(--bnk-bg-deep);
  --modal-bg: var(--bnk-bg-card);
  --primary-input-bg: var(--bnk-bg-card);
}

/* ── Typografie-Helfer ── */
.bnk-display {
  font-family: var(--bnk-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.bnk-eyebrow {
  font-family: var(--bnk-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bnk-ink-3);
}

/* ── Container ── */
.bnk-container {
  max-width: var(--bnk-container);
  margin: 0 auto;
  padding: 0 32px;
}

.bnk-container-wide {
  max-width: var(--bnk-container-wide);
  margin: 0 auto;
  padding: 0 32px;
}

.bnk-container-tight {
  max-width: var(--bnk-container-tight);
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Buttons ── */
.bnk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--bnk-r-full);
  border: 1px solid transparent;
  background: var(--bnk-ink);
  color: var(--bnk-bg);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}

.bnk-btn:hover,
.bnk-btn:focus {
  transform: translateY(-1px);
  color: var(--bnk-bg);
  text-decoration: none;
}

.bnk-btn-accent {
  background: var(--bnk-accent);
  color: var(--bnk-on-accent);
}

.bnk-btn-accent:hover,
.bnk-btn-accent:focus {
  background: var(--bnk-accent-deep);
  color: var(--bnk-on-accent);
}

.bnk-btn-brand {
  background: var(--bnk-brand-deep);
  color: var(--bnk-bg);
}

.bnk-btn-ghost {
  background: transparent;
  border-color: var(--bnk-line);
  color: var(--bnk-ink);
}

.bnk-btn-ghost:hover,
.bnk-btn-ghost:focus {
  background: rgba(18, 38, 46, 0.05);
  color: var(--bnk-ink);
}

/* ── Chips ── */
.bnk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--bnk-r-full);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--bnk-line);
  font-size: 12.5px;
  color: var(--bnk-ink-2);
  text-decoration: none;
}

.bnk-chip:hover,
.bnk-chip:focus {
  text-decoration: none;
}

.bnk-chip-active {
  background: var(--bnk-brand-deep);
  border-color: transparent;
  color: #ffffff;
}

/* ── Sektionsköpfe ── */
.bnk-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.bnk-section-head h2 {
  margin: 8px 0 0;
  font-family: var(--bnk-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bnk-ink);
}

.bnk-section-index {
  font-family: var(--bnk-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bnk-ink-4);
}

.bnk-section-link {
  font-size: 14px;
  color: var(--bnk-ink-2);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}

.bnk-section-link:hover,
.bnk-section-link:focus {
  color: var(--bnk-brand-deep);
  text-decoration: none;
}

/* ── Bildbehandlung ── */
.bnk-photo {
  display: block;
  border-radius: var(--bnk-r-md);
  overflow: hidden;
  background: var(--bnk-bg-soft);
  position: relative;
}

.bnk-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.bnk-photo:hover img {
  transform: scale(1.04);
}

.bnk-photo-frame {
  border: 1px solid var(--bnk-line);
  box-shadow: var(--bnk-shadow-soft);
}

/* ── Layout-Primitive ── */
.bnk-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bnk-row-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bnk-no-scrollbar::-webkit-scrollbar {
  display: none;
}

.bnk-no-scrollbar {
  scrollbar-width: none;
}

/* ── Header ─────────────────────────────────────────────────────────
   Diese Datei wird nach app-common.css geladen und überschreibt deren
   Header-Regeln gezielt, damit die Vendor-Datei unangetastet bleibt.
   .bnkHeaderScrolled setzt Header.js ab 10 px Scrollweg. */

.bnkHeader,
.bnkHeader > div {
  background: transparent;
}

.bnkHeader .commonHeader.navbar-default {
  background: transparent;
  min-height: var(--bnk-header-height);
  max-width: var(--bnk-container-wide);
  padding: 0 32px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* Innenseiten: von Anfang an mit Fläche hinterlegt.

   Die Fläche liegt auf dem vollbreiten Band, nicht auf der Nav. Die Nav ist auf
   --bnk-container-wide begrenzt und zentriert; auf breiteren Monitoren blieb
   links und rechts von ihr der Wrapper durchsichtig. Im Gastgeber-Onboarding
   schien dort das fixierte Hintergrundbild des Seitenpanels durch — als heller
   Streifen links neben dem Logo, der die Kopfzeile nach rechts versetzt wirken
   ließ.

   Das Band braucht dafür eine eigene Stapelposition: der Wrapper ist statisch,
   und ein fixiertes Element liegt immer über einem nicht positionierten — egal
   welche Farbe das statische trägt und in welcher Reihenfolge beide im Dokument
   stehen. Genau daran ist der erste Anlauf gescheitert, der die Farbe auf den
   Wrapper gelegt hat. */
.bnkHeader .bnkHeaderBand {
  background: var(--bnk-bg);
  border-bottom: 1px solid var(--bnk-line);
  position: relative;
  z-index: 10;
}

/* Die Nav behält ihre eigene Fläche: auf der Suchseite ist sie fixiert und
   vollbreit, während das Band mitscrollt — ohne sie wäre die Kopfzeile dort
   beim Scrollen durchsichtig. Die Trennlinie trägt dagegen das Band, sonst
   stünden zwei Linien 1 px versetzt übereinander. */
.bnkHeader .commonHeader.navbar-default:not(.homeHeader) {
  background: var(--bnk-bg);
  border-bottom: 0;
}

/* Ausnahme Suchseite: dort ist die Nav fixiert und vollbreit, das Band scrollt
   unter ihr weg. Die Linie gehört deshalb an die Nav. */
.bnkHeader .commonHeader.navbar-default.searchFixedHeader {
  border-bottom: 1px solid var(--bnk-line);
}

/* Startseite: erst beim Scrollen. */
.bnkHeaderScrolled .commonHeader.navbar-default {
  background: rgba(246, 243, 236, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--bnk-line);
}

.bnkHeader .commonHeader.navbar-default .navbar-nav > li > a,
.bnkHeader .commonHeader.navbar-default .navbar-nav > li > form > button {
  font-family: var(--bnk-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  padding: 8px 16px;
  border-radius: var(--bnk-r-full);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.bnkHeader .commonHeader.navbar-default .navbar-nav > li > a:hover,
.bnkHeader .commonHeader.navbar-default .navbar-nav > li > form > button:hover {
  opacity: 1;
}

/* Über dem Hero steht die Navigation auf dem Foto — hell, bis gescrollt wird. */
.bnkHeader:not(.bnkHeaderScrolled) .homeHeader.navbar-default .navbar-nav > li > a,
.bnkHeader:not(.bnkHeaderScrolled) .homeHeader.navbar-default .navbar-nav > li > form > button {
  color: #ffffff;
}

/* Die Gastgeber-Seite hat denselben Foto-Hero. Ihr Header liegt laut
   app-common.css absolut über dem Inhalt und bleibt transparent, also
   auch hier helle Schrift — aber erst ab 1201 px: darunter wird er
   fixiert und bekommt eine helle Fläche, auf der Weiß verschwände. */
@media (min-width: 1201px) {
  .bnkHeader .whyHostHeader.navbar-default {
    border-bottom-color: transparent;
  }

  .bnkHeader .whyHostHeader.navbar-default .navbar-nav > li > a,
  .bnkHeader .whyHostHeader.navbar-default .navbar-nav > li > form > button {
    color: #ffffff;
  }
}

/* ── Responsiv ── */
@media (max-width: 900px) {
  .bnk-container,
  .bnk-container-wide,
  .bnk-container-tight {
    padding: 0 20px;
  }

  .bnk-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ── Units step ──────────────────────────────────────────────────────
   Spacing follows one scale here: 8 / 12 / 16 / 24 / 32. Before this the
   step mixed 15, 24, 30 and a 350px tail with no relation between them.

   The heading and its two actions share a row: they belong together, and
   splitting them across two lines with opposite alignments read as two
   unrelated blocks. */
.unitsSectionHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bnk-line);
}

.unitsSectionHeadText {
  min-width: 0;
}

.unitsSectionTitle {
  font-family: var(--bnk-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bnk-ink);
  margin: 0 0 4px;
}

.unitsSectionSubtitle {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--bnk-ink-2);
  margin: 0;
  max-width: 62ch;
}

.unitsSectionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

/* Secondary: adding a unit is a repeated side action next to the primary
   "continue" further down. Two dark buttons competed with it and with
   each other. */
.unitKindButton,
.unitKindButton:active,
.unitKindButton:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border-radius: var(--bnk-r-full);
  background: var(--bnk-bg-card);
  border: 1px solid var(--bnk-line);
  color: var(--bnk-ink);
  font-size: 14px;
  line-height: 1.4;
  /* Bootstrap's .btn forbids wrapping; a label longer than the column
     then ran out of the pill. */
  white-space: normal;
  text-align: left;
  max-width: 100%;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.unitKindButton:hover,
.unitKindButton:focus {
  background: var(--bnk-bg-soft);
  border-color: var(--bnk-ink-4);
  color: var(--bnk-ink);
}

/* No disc needed now that the button is light — the icon carries its own
   two colours against a near-white surface. */
.unitKindButtonIcon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Units workspace ─────────────────────────────────────────────────
   Sidebar with every unit, one form beside it. The sidebar sticks so the
   overview stays reachable while a long form scrolls past it. */
.unitsWorkspace {
  display: grid;
  /* The sidebar grows with its content (e.g. the longer English button
     labels) up to 360px instead of a fixed 260px that labels overflowed. */
  grid-template-columns: fit-content(360px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.unitsSidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 240px;
}

.unitsNavList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
}

.unitsNavItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--bnk-r-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.unitsNavItem:hover {
  background: var(--bnk-bg-soft);
}

/* The active entry is the one thing on this screen that says "you are
   here", so it carries the surface and a full border, not a tint. */
.unitsNavItemActive,
.unitsNavItemActive:hover {
  background: var(--bnk-bg-card);
  border-color: var(--bnk-line);
}

.unitsNavIcon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.unitsNavText {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.unitsNavName {
  font-size: 14px;
  color: var(--bnk-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unitsNavMeta {
  font-family: var(--bnk-font-mono);
  font-size: 11.5px;
  color: var(--bnk-ink-3);
  flex-shrink: 0;
}

.unitsSidebarActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--bnk-line);
}

/* No unit yet: the list above is not rendered, so the rule separates the two
   buttons from nothing and pushes them 17px below the hint in the column
   beside them. That offset is what made the step look misaligned. */
.unitsSidebarActions:first-child {
  padding-top: 0;
  border-top: 0;
}

.unitsDetail {
  min-width: 0;
}

/* Below 1100px the sidebar has no room beside a form of this width; it
   becomes a horizontal strip above it and stops sticking. */
@media screen and (max-width: 1100px) {
  .unitsWorkspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .unitsSidebar {
    position: static;
    min-width: 0;
  }

  .unitsNavList {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
  }

  .unitsNavItem {
    width: auto;
    border-color: var(--bnk-line);
  }

  .unitsSidebarActions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.unitsEmptyHint {
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px dashed var(--bnk-line);
  border-radius: var(--bnk-r-md);
  background: var(--bnk-bg-soft);
  color: var(--bnk-ink-2);
  font-size: 14.5px;
}

/* ---------------------------------------------------------------------------
   Facilities — the grouped equipment list

   The list runs to over a hundred entries, so it is read in blocks rather
   than scanned as one column. Each block states its name and how many of its
   entries are ticked, which is what a host wants to know while working
   through a long page: not "how far down am I" but "have I dealt with this
   group yet".
   --------------------------------------------------------------------------- */

.facilityIntro {
  margin: 0 0 28px;
}

.facilityIntroText {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bnk-ink-2);
  margin: 0;
  max-width: 68ch;
}

.facilityCategory {
  margin: 0 0 32px;
}

.facilityCategory:last-child {
  margin-bottom: 8px;
}

.facilityCategoryTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--bnk-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--bnk-ink);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bnk-line-soft);
}

.facilityCategoryCount {
  font-family: var(--bnk-font-body, inherit);
  font-weight: 500;
  font-size: 13px;
  color: var(--bnk-ink-4);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}