/*
 * Bus guide — presentation layer.
 *
 * Applies to /gran-canaria-guia-autobuses-2026,
 * /en/gran-canaria-bus-guide-2026 and /de/gran-canaria-busfahrplan-2026.
 *
 * The page had no font-family declaration at all, so every browser fell back
 * to its serif default and the whole guide rendered in Times. That is the
 * first thing fixed here.
 */

/* ---------------------------------------------------------------- *
 * P0.1 — the missing font stack
 * ---------------------------------------------------------------- */
body {
  font-family:
    Montserrat,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* P0.2 — one theme, declared, so Chrome stops force-inverting. */
:root {
  color-scheme: light;

  /*
   * The two liveries, sampled from the photographs on the page. Everything
   * that has to say "yellow bus" or "turquoise bus" reads from here, so the
   * page and the vehicles agree.
   */
  --guagua: #f5b800;
  --global: #16a5c4;

  /*
   * Line colours. The map legend was the only place on the page that had
   * thought about these, so the map is the source of truth and the route
   * cards now follow it. Before this, line 5 was purple on its card and
   * amber on the map, and line 66 was orange on its card and purple on the
   * map — the same line in two colours, twice.
   */
  --line-60: #047857;
  --line-1: #1d4ed8;
  --line-5: #b45309;
  --line-66: #6d28d9;

  --ink: #101828;
  --ink-soft: #475467;
  --hairline: #e5e7eb;
}

/* ---------------------------------------------------------------- *
 * One wrapper, one width.
 *
 * The page used to run three different containers down its length —
 * px-4 at the top, px-6 through the article, px-4 again for the FAQ —
 * so the content edge stepped in and out as you scrolled.
 * ---------------------------------------------------------------- */
.bg-wrap {
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  padding-bottom: 3rem;
}

.bg-article {
  display: block;
}

.bg-sec {
  margin: 0 0 3rem;
}

.bg-h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-top: 0.75rem;
  border-top: 3px solid var(--hairline);
}

.bg-h2 .cr-icon {
  color: var(--ink-soft);
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 5rem;
}

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

/* ---------------------------------------------------------------- *
 * Breadcrumb, matching the BreadcrumbList schema that already exists
 * ---------------------------------------------------------------- */
.bg-crumb {
  font-size: 0.8125rem;
  color: #4b5563;
  padding: 0.75rem 0 0;
}

.bg-crumb a {
  color: #1d4ed8;
  text-decoration: none;
}

.bg-crumb a:hover {
  text-decoration: underline;
}

.bg-crumb span[aria-hidden] {
  color: #6b7280;
  margin: 0 0.375rem;
}

/* ---------------------------------------------------------------- *
 * Answer box — the fold. This is what the search query actually asked.
 * ---------------------------------------------------------------- */
.bg-answer {
  border: 1px solid #d7e3f8;
  background: #f5f8ff;
  border-radius: 0.875rem;
  padding: 1rem;
  margin: 1rem 0 1.25rem;
}

.bg-answer h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3f4c63;
  margin: 0 0 0.75rem;
}

.bg-fares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.bg-fare {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
}

.bg-fare-route {
  font-weight: 600;
  color: #111827;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.bg-fare-price {
  font-weight: 700;
  color: #0f5132;
  font-size: 1rem;
  white-space: nowrap;
}

.bg-fare-meta {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: #4b5563;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.bg-line {
  display: inline-block;
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  color: #fff;
  background: #1d4ed8;
}

.bg-line--yellow {
  background: #92400e;
}

/* Same line, same colour, everywhere: pill, map, legend, route card. */
.bg-line--l60 { background: var(--line-60); }
.bg-line--l66 { background: var(--line-66); }
.bg-line--l1 { background: var(--line-1); }
.bg-line--l5 { background: var(--line-5); }

/* The operator's own yellow, with ink dark enough to sit on it. */
.bg-line--guagua {
  background: var(--guagua);
  color: #422006;
}

.bg-answer-more {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
}

.bg-answer-more:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- *
 * Route finder — two selects, client-side data, no backend
 * ---------------------------------------------------------------- */
.bg-finder {
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  padding: 1rem;
  margin: 0 0 1.5rem;
  background: #fff;
}

.bg-finder h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #111827;
}

.bg-finder-row {
  display: grid;
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .bg-finder-row {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.bg-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.bg-field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  font: inherit;
  font-size: 1rem;
  background: #fff;
  color: #111827;
}

.bg-btn {
  min-height: 44px;
  border: 0;
  border-radius: 0.5rem;
  background: #1d4ed8;
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.625rem 1.125rem;
  cursor: pointer;
}

.bg-btn:hover {
  background: #1e40af;
}

.bg-result {
  margin-top: 0.875rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 0.875rem;
}

.bg-result[hidden] {
  display: none;
}

.bg-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.bg-result-price {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f5132;
}

.bg-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.bg-result-grid div {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
}

.bg-result-grid dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4b5563;
  font-weight: 700;
}

.bg-result-grid dd {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  color: #111827;
  font-weight: 600;
}

.bg-note {
  font-size: 0.875rem;
  line-height: 1.6;
  border-left: 3px solid #b45309;
  background: #fffbeb;
  padding: 0.625rem 0.75rem;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #3f3016;
}

/* ---------------------------------------------------------------- *
 * Fare table → stacked cards on mobile (no horizontal scroll trap)
 * ---------------------------------------------------------------- */
.bg-fare-cards {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .bg-fare-cards {
    display: none;
  }
}

.bg-fare-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.875rem;
  background: #fff;
}

.bg-fare-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.bg-fare-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.bg-fare-card dt {
  color: #4b5563;
}

.bg-fare-card dd {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

/* ---------------------------------------------------------------- *
 * Yellow vs blue — the single most common tourist mistake
 *
 * This comparison used to appear twice on the page, once above the H1 as
 * flat SVG drawings and once inside the article as bullet lists, in two
 * unrelated visual styles. It is one section now, and it leads with
 * photographs of the actual vehicles, because "which bus is which" is a
 * recognition problem and a drawing of a yellow rectangle does not solve
 * a recognition problem.
 * ---------------------------------------------------------------- */
.bg-ops {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0.75rem;
}

@media (min-width: 40rem) {
  .bg-ops {
    grid-template-columns: 1fr 1fr;
  }
}

.bg-op {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 0.875rem;
  overflow: hidden;
  border-top: 5px solid var(--livery);
}

.bg-op--yellow {
  --livery: var(--guagua);
  --livery-ink: #7a4a00;
  --livery-wash: #fffaeb;
}

.bg-op--blue {
  --livery: var(--global);
  --livery-ink: #0b556a;
  --livery-wash: #effafd;
}

.bg-op-shot {
  margin: 0;
}

.bg-op-shot img {
  display: block;
  width: 100%;
  /* Without this the height="853" attribute wins and aspect-ratio is ignored. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.bg-op-body {
  padding: 0.875rem 1rem 1rem;
}

.bg-op-tag {
  display: inline-block;
  margin: 0 0 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--livery-wash);
  color: var(--livery-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bg-op h3 {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
}

.bg-op-lead {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.bg-op-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.375rem;
  font-size: 0.9375rem;
  color: #374151;
}

.bg-op-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.4375rem;
  line-height: 1.45;
}

/* The app cards put a download link straight after the feature list. */
.bg-op-list + a,
.bg-op-list + p {
  display: inline-block;
  margin-top: 0.75rem;
}

.bg-figcredit {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.bg-alert {
  margin: 0;
  border-left: 4px solid #dc2626;
  background: #fef2f2;
  border-radius: 0 0.625rem 0.625rem 0;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #7f1d1d;
  font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * FAQ accordion — the schema'd questions, now actually on the page
 * ---------------------------------------------------------------- */
.bg-faq {
  display: grid;
  gap: 0.625rem;
  margin: 1rem 0 1.5rem;
}

.bg-faq details {
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  background: #fff;
}

.bg-faq summary {
  cursor: pointer;
  padding: 0.875rem 1rem;
  font-weight: 600;
  color: #111827;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bg-faq summary:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: -2px;
  border-radius: 0.625rem;
}

.bg-faq details[open] summary {
  border-bottom: 1px solid #eef2f7;
}

.bg-faq div {
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
}

/* ---------------------------------------------------------------- *
 * Figures and inline icons
 * ---------------------------------------------------------------- */
.bg-figure {
  margin: 1.25rem 0;
}

.bg-figure img,
.bg-figure svg {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  display: block;
}

.bg-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #4b5563;
}

.bg-figure--wide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- *
 * Line map
 *
 * The coastline is the real one — Natural Earth 1:10m — and the stops
 * sit at their real coordinates, so the shape of the island and the
 * distances between places are true. The four lines follow the GC-1
 * corridor they actually run on, drawn with small parallel offsets in
 * the stretches they share, the way a transit map does it.
 * ---------------------------------------------------------------- */
.bg-map-fig {
  max-width: 34rem;
  margin-inline: auto;
}

.bg-map {
  width: 100%;
  height: auto;
  display: block;
  background: #eaf2f8;
  border: 1px solid #d8e2ec;
  border-radius: 0.75rem;
}

.bg-map-land {
  fill: #f3ede2;
  stroke: #c6b9a3;
  stroke-width: 1.5;
}

.bg-map-line {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bg-map-l60 { stroke: var(--line-60); }
.bg-map-l66 { stroke: var(--line-66); }
.bg-map-l1  { stroke: var(--line-1); }
.bg-map-l5  { stroke: var(--line-5); stroke-dasharray: 2 8; }

.bg-map-stop circle {
  fill: #fff;
  stroke: #111827;
  stroke-width: 2.5;
}

/* Intermediate stops on the corridor — Telde, Vecindario, San Agustín,
   Playa del Inglés, Arguineguín — shown but not labelled, so the map
   reads as a line rather than as five disconnected places. */
.bg-map-minor circle {
  fill: #fff;
  stroke: #6b7280;
  stroke-width: 2;
}

.bg-map-label text {
  font-size: 15px;
  font-weight: 700;
  fill: #111827;
  /* Labels land on the land shape and across the route lines; the halo
     is what keeps them readable. */
  stroke: #f3ede2;
  stroke-width: 3.5;
  paint-order: stroke;
}

.bg-map-north path { fill: #4b5563; }

.bg-map-north text {
  font-size: 13px;
  font-weight: 700;
  fill: #4b5563;
}

.bg-map-scale path {
  stroke: #374151;
  stroke-width: 1.5;
  fill: none;
}

.bg-map-scale text {
  font-size: 12px;
  fill: #374151;
}

/* Legend as real HTML, so it scales with the reader's font size and
   translates with the rest of the page. */
.bg-map-key {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #1f2937;
}

@media (min-width: 480px) {
  .bg-map-key {
    grid-template-columns: 1fr 1fr;
  }
}

.bg-map-key li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bg-key {
  flex: none;
  width: 1.5rem;
  height: 0;
  border-top: 4px solid;
  border-radius: 2px;
}

.bg-key--l60 { border-color: var(--line-60); }
.bg-key--l66 { border-color: var(--line-66); }
.bg-key--l1  { border-color: var(--line-1); }
.bg-key--l5  { border-top-style: dotted; border-color: var(--line-5); }

/* ---------------------------------------------------------------- *
 * Offline / print callout
 * ---------------------------------------------------------------- */
.bg-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  border: 1px solid #d7e3f8;
  background: #f5f8ff;
  border-radius: 0.875rem;
  padding: 1rem;
  margin: 1.25rem 0 0;
}

.bg-offline p {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #374151;
}

.bg-offline strong {
  color: #111827;
}

/* ---------------------------------------------------------------- *
 * Contextual next steps
 * ---------------------------------------------------------------- */
.bg-next {
  margin: 0 0 3rem;
}

.bg-next h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem;
}

.bg-next ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .bg-next ul {
    grid-template-columns: 1fr 1fr;
  }
}

.bg-next a {
  display: block;
  min-height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.875rem 1rem;
  text-decoration: none;
}

.bg-next a:hover {
  border-color: #1d4ed8;
  background: #f8faff;
}

.bg-next strong {
  display: block;
  color: #1d4ed8;
  font-size: 1rem;
  margin-bottom: 0.1875rem;
}

.bg-next span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #4b5563;
}

/* ---------------------------------------------------------------- *
 * Reading progress + sticky index (both injected by bus-guide.js)
 * ---------------------------------------------------------------- */
.bg-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}

.bg-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #1d4ed8;
}

/*
 * The rail is parked in the left gutter, so it can only appear once the
 * viewport is wide enough to hold it beside the 56rem article without
 * overlapping. 1400px is the first width where that is true.
 */
.bg-rail {
  display: none;
}

@media (min-width: 1400px) {
  .bg-rail {
    display: block;
    position: fixed;
    top: 7rem;
    left: max(1rem, calc(50% - 42.5rem));
    width: 13rem;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    z-index: 30;
    font-size: 0.8125rem;
  }
}

.bg-rail h2 {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 0.5rem;
}

.bg-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #e5e7eb;
}

.bg-rail a {
  display: block;
  padding: 0.375rem 0.75rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #4b5563;
  text-decoration: none;
  line-height: 1.4;
}

.bg-rail a:hover {
  color: #1d4ed8;
}

.bg-rail a[aria-current="true"] {
  color: #1d4ed8;
  font-weight: 600;
  border-left-color: #1d4ed8;
}

/* Mobile counterpart: a pill that opens the same list upwards. */
.bg-mini {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 50;
}

.bg-mini[hidden] {
  display: none;
}

@media (min-width: 1400px) {
  .bg-mini {
    display: none;
  }
}

.bg-mini summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.25);
}

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

.bg-mini ol {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  width: min(17rem, calc(100vw - 1.5rem));
  max-height: 60vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgb(15 23 42 / 0.18);
}

.bg-mini ol a {
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.9375rem;
}

.bg-mini ol a:hover {
  background: #eef2ff;
}

/* ---------------------------------------------------------------- *
 * Print: the fares and routes are the reason anyone saves this page.
 * ---------------------------------------------------------------- */
@media print {
  .bg-progress,
  .bg-rail,
  .bg-mini,
  .bg-finder,
  .bg-offline,
  .bg-next,
  .bg-cta,
  nav[aria-label] {
    display: none !important;
  }

  /* Ink-heavy panels turn into plain text on paper. */
  .bg-hero,
  .bg-hero-title,
  .bg-hero-sub {
    background: none !important;
    color: #000 !important;
    padding: 0 !important;
  }

  .bg-hero-kicker,
  .bg-hero-facts {
    display: none !important;
  }

  .bg-route,
  .bg-op {
    break-inside: avoid;
  }

  /* On paper there is room for the real table, so the mobile cards would
     only duplicate it. */
  .bg-fare-cards {
    display: none !important;
  }

  .bg-faq details {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
}

/* ---------------------------------------------------------------- *
 * Card — one treatment for every panel on the page.
 *
 * There used to be two: hairline-bordered cards in the newer components
 * and drop-shadowed `rounded-xl shadow-sm` cards in the older sections.
 * Side by side they read as two different sites.
 * ---------------------------------------------------------------- */
.bg-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 0.875rem;
  padding: 1.125rem;
}

.bg-card--flush {
  padding: 0;
  overflow: hidden;
}

.bg-card--gap {
  margin-bottom: 1.25rem;
}

.bg-card-head {
  padding: 0.875rem 1.125rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--hairline);
}

.bg-card-head h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.bg-card-body {
  padding: 1.125rem;
}

/*
 * Panels side by side, equal height, and — the point of routing them
 * through one class — all stacking at the same width. The Tailwind grids
 * broke at md (768px) while the components here break at 40rem (640px),
 * so between those two widths the page had columns in some sections and
 * stacked cards in others.
 */
.bg-duo,
.bg-trio {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .bg-duo {
    grid-template-columns: 1fr 1fr;
  }

  .bg-trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * List marker. The lists were typing a literal "•" into every <li>, which
 * a screen reader reads out and which cannot be aligned.
 */
.bg-dots {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #374151;
}

.bg-dots li {
  position: relative;
  padding-left: 0.9375rem;
}

.bg-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9ca3af;
}

.bg-dots strong {
  color: var(--ink);
}

/*
 * Label-and-value rows ("Travel time: 30 minutes"). No marker — the bold
 * label is the marker.
 */
.bg-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #374151;
}

.bg-facts strong {
  color: var(--ink);
}

.bg-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.125rem;
}

.bg-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 44px;
  color: #1d4ed8;
  text-decoration: none;
  font-size: 0.9375rem;
}

.bg-links a:hover {
  text-decoration: underline;
}

/* Small tinted note inside a card. */
.bg-inset {
  margin: 1rem 0 0;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #374151;
}

.bg-inset strong {
  color: var(--ink);
}

/* Titled callout. --warn is the red one. */
.bg-callout {
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid #cfe6ee;
  border-left: 4px solid var(--global);
  background: #f2fbfd;
}

.bg-callout p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #374151;
}

.bg-callout-h {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 700;
  color: var(--ink) !important;
  margin-bottom: 0.375rem !important;
}

.bg-callout--warn {
  border-color: #fecaca;
  border-left-color: #dc2626;
  background: #fef2f2;
}

.bg-callout--warn .bg-callout-h {
  color: #991b1b !important;
}

/* ---------------------------------------------------------------- *
 * Insider tips
 *
 * Four cards on one grid, so the rows line up. They were nested two-deep
 * as a column of two beside a column of two, which left a ragged step at
 * the bottom of the section whenever the cards had different heights.
 *
 * The pastel washes are gone. They were green, blue, purple and amber —
 * the same four hues the map legend uses for lines 60, 1, 66 and 5 — so
 * a page that had just taught the reader a colour key immediately spent
 * that key on decoration.
 * ---------------------------------------------------------------- */
.bg-tips {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .bg-tips {
    grid-template-columns: 1fr 1fr;
  }
}

.bg-tip {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 0.875rem;
  padding: 1.125rem;
}

.bg-tip-h {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.bg-tip-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #eaf7fb;
  color: #0b6b84;
}

.bg-tip-ico .cr-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  color: inherit;
}

/* ---------------------------------------------------------------- *
 * Common mistakes
 *
 * The content was already numbered — "Mistake #1", "#2" — but the numbers
 * were buried in four differently-tinted boxes. It is a numbered list, so
 * it is marked up as one, and problem and solution are told apart by more
 * than the shade of the box they sit in.
 * ---------------------------------------------------------------- */
.bg-mistakes {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.bg-mistake {
  display: flex;
  gap: 0.875rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 0.875rem;
  padding: 1.125rem;
}

.bg-mistake-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 1.0625rem;
  font-weight: 800;
}

.bg-mistake-body {
  min-width: 0;
}

.bg-mistake-kicker {
  margin: 0 0 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b91c1c;
}

.bg-mistake h3 {
  margin: 0 0 0.625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.bg-mistake p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #374151;
}

.bg-mistake-problem,
.bg-mistake-solution {
  position: relative;
  padding-left: 1.125rem;
}

.bg-mistake-problem::before,
.bg-mistake-solution::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.bg-mistake-problem::before {
  content: "×";
  color: #b91c1c;
}

.bg-mistake-solution {
  margin-top: 0.375rem !important;
}

.bg-mistake-solution::before {
  content: "✓";
  color: #047857;
}

.bg-mistake strong {
  color: var(--ink);
}

/* Night-service line badges, sharing the map's colours. */
.bg-pills {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bg-pills li {
  display: flex;
  /* Not centred: when the description wraps to two lines, a centred badge
     drifts away from the line it labels. */
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #374151;
}

.bg-pills .bg-line {
  flex: none;
  margin-top: 0.0625rem;
  font-size: 0.75rem;
  padding: 0.1875rem 0.5rem;
}

/* ---------------------------------------------------------------- *
 * Hero
 *
 * The old one was a blue-to-purple gradient, which is the default look of
 * every template on the internet and had nothing to do with buses. This
 * one is built from the page's own subject: deep Atlantic under the
 * Global turquoise, with the Guaguas yellow as the rule across the top.
 *
 * It also sits at the top of the page now. The H1 used to be the fifth
 * heading, below the fare box, the route finder and the yellow-vs-blue
 * comparison.
 * ---------------------------------------------------------------- */
.bg-hero {
  position: relative;
  margin: 1rem 0 1rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: 1rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 140% at 88% 8%, rgb(34 211 238 / 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #072134 0%, #0c4560 52%, #14758f 100%);
}

.bg-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--guagua);
}

.bg-hero-kicker {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guagua);
}

.bg-hero-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 2.75rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.bg-hero-sub {
  margin: 0 0 1.25rem;
  max-width: 44ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.82);
}

.bg-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The badge icons carry semantic colours (.cr-ok green, .cr-warn amber)
 * that were picked for a white background. On the dark hero they read as
 * smudges, so inside the hero they take the text colour.
 */
.bg-hero-facts .cr-icon {
  color: inherit;
  opacity: 0.85;
}

.bg-hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.18);
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* The credibility note that follows the hero. */
.bg-trust {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border-radius: 0.875rem;
  border: 1px solid #fde68a;
  border-left: 4px solid var(--guagua);
  background: #fffbeb;
}

.bg-trust .bg-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: #b45309;
}

.bg-trust p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #4b5563;
}

.bg-trust-h {
  font-weight: 700;
  color: var(--ink) !important;
  margin-bottom: 0.25rem !important;
}

/*
 * On a phone this block sits between the hero and the fares, and at full
 * size it pushed the thing people actually came for below the fold. It is
 * supporting material, so it is sized as supporting material here.
 */
@media (max-width: 39.99rem) {
  .bg-trust {
    gap: 0.5625rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
  }

  .bg-trust .bg-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.0625rem;
  }

  .bg-trust p {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .bg-trust-h {
    font-size: 0.875rem;
    margin-bottom: 0.1875rem !important;
  }
}

/* ---------------------------------------------------------------- *
 * Table of contents
 * ---------------------------------------------------------------- */
.bg-toc {
  margin: 0 0 2.5rem;
  padding: 1rem 1.125rem 1.125rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 0.875rem;
}

.bg-toc h2 {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.bg-toc ul {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .bg-toc ul {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
}

.bg-toc a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0.375rem;
  border-radius: 0.5rem;
  color: #1d4ed8;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.bg-toc a:hover {
  background: #eef4ff;
  text-decoration: underline;
}

/* ---------------------------------------------------------------- *
 * Route cards
 *
 * Each card takes --line from the map legend, so a reader who has just
 * traced line 5 across the map in amber meets the same amber on its card.
 * ---------------------------------------------------------------- */
.bg-routes {
  display: grid;
  gap: 1rem;
}

.bg-route {
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--line);
  border-radius: 0.875rem;
  overflow: hidden;
}

.bg-route-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: color-mix(in srgb, var(--line) 7%, #fff);
  border-bottom: 1px solid var(--hairline);
}

.bg-route-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 0.625rem;
  background: var(--line);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bg-route-head h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.bg-route-head p {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.bg-route-body {
  padding: 1.125rem;
}

.bg-route-cols {
  display: grid;
  gap: 1rem 1.5rem;
}

@media (min-width: 40rem) {
  .bg-route-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.bg-route-tip {
  margin: 1rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--line) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--line) 22%, #fff);
  font-size: 0.875rem;
  line-height: 1.6;
  color: #374151;
}

.bg-route-tip strong {
  color: color-mix(in srgb, var(--line) 75%, #000);
}

/* ---------------------------------------------------------------- *
 * Closing call to action + sources, in the hero's palette rather than
 * the stock purple gradient they used to share with it.
 * ---------------------------------------------------------------- */
.bg-cta {
  margin: 0 0 3rem;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border-radius: 1rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #072134 0%, #0c4560 52%, #14758f 100%);
}

.bg-cta h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.bg-cta p {
  margin: 0 auto 1.5rem;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.82);
}

.bg-sources {
  padding: 1.25rem;
  border-radius: 1rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

/* ---------------------------------------------------------------- *
 * Site header
 *
 * Matches the homepage: wordmark, tagline, section links, language
 * control, and a hamburger that opens the same links on a phone. The
 * guide previously had none of that — just a wordmark and three language
 * chips — so arriving from search left you with no way into the rest of
 * the site on mobile.
 *
 * Two things from the homepage markup are deliberately not copied. Its
 * language buttons are five empty <span class="language-flag"></span>
 * controls driven by a client-side switcher; here they are real links to
 * the sibling URLs. And its labels come from data-* attributes swapped in
 * the browser; here each page ships its own language as text.
 * ---------------------------------------------------------------- */
.bg-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
}

.bg-hdr-bar {
  max-width: 72rem;
  margin-inline: auto;
  padding: 0.625rem clamp(1rem, 4vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bg-hdr-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.bg-hdr-brand a {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.bg-hdr-tag {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The tagline is the first thing to go when space runs out. */
@media (max-width: 47.99rem) {
  .bg-hdr-tag {
    display: none;
  }
}

.bg-hdr-nav {
  display: none;
  align-items: center;
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .bg-hdr-nav {
    display: flex;
  }
}

.bg-hdr-nav a {
  color: #374151;
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.bg-hdr-nav a:hover {
  color: #c2410c;
  text-decoration: underline;
}

/* Language control: real links, not DOM-rewriting buttons. */
.bg-hdr-lang {
  display: flex;
  gap: 0.375rem;
}

.bg-hdr-lang a,
.bg-hdr-lang span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  color: #374151;
}

.bg-hdr-lang a:hover {
  background: #f3f4f6;
}

.bg-hdr-lang [aria-current="true"] {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

/* Hamburger */
.bg-hdr-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

@media (min-width: 48rem) {
  .bg-hdr-burger {
    display: none;
  }
}

.bg-hdr-burger:focus-visible,
.bg-hdr-nav a:focus-visible,
.bg-hdr-lang a:focus-visible,
.bg-hdr-brand a:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.bg-hdr-burger svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.bg-hdr-menu {
  border-top: 1px solid var(--hairline);
  background: #fff;
}

.bg-hdr-menu[hidden] {
  display: none;
}

@media (min-width: 48rem) {
  .bg-hdr-menu {
    display: none;
  }
}

.bg-hdr-menu ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem clamp(1rem, 4vw, 1.5rem) 1rem;
  display: grid;
  gap: 0.125rem;
}

.bg-hdr-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 1rem;
}

.bg-hdr-menu a:hover {
  background: #f3f4f6;
}

.bg-hdr-menu .bg-hdr-lang {
  padding: 0.5rem clamp(1rem, 4vw, 1.5rem) 1rem;
}

@media print {
  .bg-hdr {
    display: none !important;
  }
}