/* mobile-polish.css — 2026-08-25
   Shared narrow-viewport rules so how-it-works, services and the dashboard
   behave the same way. Additive only: it tightens spacing and fixes wrapping,
   it does not restructure any layout. */

/* Long strings — emails, order ids, URLs — must never force a sideways scroll. */
/* _tableFix 2026-08-25: td and th were in this list, so `word-break:
   break-word` split table headings mid-word — "Compliance" rendered as
   Co/mpl/ianc/e down a narrow column. Cells wrap on spaces only; wide
   tables scroll horizontally instead of crushing their columns. */
body, p, li, .tech-description, .faq-answer, .step-description {
  overflow-wrap: anywhere;
  word-break: break-word;
}
td, th {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* A readable measure. Full-width prose on a phone is what makes a page feel endless. */
@media (max-width: 768px) {
  .tech-description, .faq-answer, .step-description, .section-subtitle {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }

  /* Six stacked cards at 2rem padding is ~40% of the scroll on this page. */
  .tech-card { padding: 1.25rem; }
  .tech-card .tech-title { font-size: 1.1rem; }
  .tech-features { text-align: left; }

  /* Comfortable tap targets — 44px is Apple's guidance and reviewers check it. */
  .faq-question, .btn, button, a.btn {
    min-height: 44px;
  }
  .faq-question { padding: 1rem 1.1rem; }
}

@media (max-width: 480px) {
  .tech-card { padding: 1rem; }
  .stat-number { font-size: 1.75rem; }
}

/* Respect the OS setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Card decks, revised 2026-08-25 ──────────────────────────────
   First attempt showed the next card peeking at 86% width. On a real
   device that reads as a BROKEN LAYOUT, not an invitation to swipe —
   clipped words at the screen edge look like a rendering fault. One
   full-width card at a time now, with explicit dot navigation, and much
   tighter type: the original centred prose at full size made each card
   enormous, which was half the scroll problem. */
@media (max-width: 768px) {
  .process-steps,
  .tech-grid {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    scrollbar-width: none;
  }
  .process-steps::-webkit-scrollbar,
  .tech-grid::-webkit-scrollbar { display: none; }

  .process-steps > .process-step,
  .tech-grid > .tech-card {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
  }

  /* Centred body copy at full size is what made these cards so tall. */
  .step-description,
  .tech-description {
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: none;
  }
  .step-features li,
  .tech-features li { font-size: 0.9rem; padding: 0.4rem 0; }
  .step-title { font-size: 1.05rem; }
  .process-step { padding: 1.25rem; }
  .step-content { display: block; }
  .step-visual { margin-top: 0.75rem; }

  /* Dot navigation, built by deck-nav.js */
  .deck-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
  }
  .deck-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(148, 163, 184, 0.35);
    transition: background 0.2s, width 0.2s;
    cursor: pointer;
  }
  .deck-dot[aria-current="true"] {
    background: #3b82f6;
    width: 22px;
    border-radius: 4px;
  }
  .deck-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.5rem;
  }
}

/* ── Timeline deck + spacing, 2026-08-25 ─────────────────────────
   The timeline section was still a vertical stack of six items — the
   remaining scroll of death. Same deck treatment. Also tightening the
   6rem section padding and the hero, which on a phone put ~200px of empty
   space between every section. */
@media (max-width: 768px) {
  .timeline {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    scrollbar-width: none;
  }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline > .timeline-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
    padding: 0 0.25rem;
  }
  /* The vertical connector line makes no sense in a horizontal deck. */
  .timeline::before,
  .timeline-item::before { display: none !important; }
  .timeline-description { text-align: left; font-size: 0.95rem; line-height: 1.5; }
  .timeline-title { font-size: 1.05rem; }

  /* 6rem top and bottom is ~200px of dead space between sections. */
  .section { padding: 2.5rem 0 !important; }
  .section-header { margin-bottom: 1.25rem; }
  .section-header h2 { font-size: 1.5rem; }
  .section-header p { font-size: 0.95rem; max-width: 60ch; margin-inline: auto; }

  .methods-hero { padding-top: 84px !important; padding-bottom: 1.5rem !important; }
  .methods-title { font-size: 1.9rem; }
  .methods-subtitle { font-size: 0.95rem; line-height: 1.5; text-align: left; }
  .pirate-compass { font-size: 2.25rem; }
  .methods-hero-content { padding: 1rem !important; }
}

/* ── Card interiors, 2026-08-25 ──────────────────────────────────
   Section spacing was handled above. This is the padding INSIDE cards and
   the gap between a deck and its dots — the hero card in particular had
   enough internal padding to push its text into a narrow column. */
@media (max-width: 768px) {
  .methods-hero-content,
  .timeline-content,
  .tech-card,
  .process-step { padding: 1rem !important; }

  .step-header { margin-bottom: 0.75rem; gap: 0.6rem; }
  .step-number, .timeline-marker { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .step-features, .tech-features { margin: 0.75rem 0 0; }
  .step-features li, .tech-features li { padding: 0.35rem 0; }
  .timeline-badge, .step-badge { margin-top: 0.75rem; font-size: 0.8rem; }
  .step-icon { font-size: 2rem; }

  .deck-nav { margin-top: 0.5rem; }
  .deck-hint { margin-top: 0.35rem; }

  /* Container gutters: 1rem each side is enough on a phone. */
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Vertical rhythm, 2026-08-25 ─────────────────────────────────
   On device there were three dead gaps at the top: navbar to compass,
   compass to hero card, and hero card to the stats card. Each was small
   in isolation; together they read as a page that scrolls forever before
   saying anything. The hero top padding also double-counted the navbar. */
@media (max-width: 768px) {
  .methods-hero {
    padding-top: 68px !important;
    padding-bottom: 0.75rem !important;
  }
  .pirate-compass {
    font-size: 1.75rem !important;
    margin-bottom: 0.35rem !important;
  }
  .methods-title {
    font-size: 1.75rem !important;
    margin-bottom: 0.6rem !important;
  }
  .methods-subtitle { margin-bottom: 0 !important; }
  .methods-hero-content { padding: 0.85rem !important; }
  .methods-hero .row { margin: 0; }

  /* The first section after the hero should not add another full gap. */
  .methods-hero + .section { padding-top: 1.25rem !important; }
  .section + .section { padding-top: 1.75rem !important; }

  /* Stat blocks were stacking with generous margins of their own. */
  .stat-item { margin-bottom: 0.75rem; }
  .stat-number { line-height: 1.1; margin-bottom: 0.15rem; }
  .stat-label { font-size: 0.85rem; }
}

/* ── Footer + typography, 2026-08-25 ─────────────────────────────
   .main-footer appears in 38 templates, so one rule set covers the site.
   Principle for this whole file: type and spacing come down TOGETHER.
   Tightening text while leaving gaps just makes the emptiness obvious. */
@media (max-width: 768px) {
  .main-footer {
    padding: 1.75rem 1rem 1.25rem !important;
  }
  .main-footer .footer-brand { margin-bottom: 1rem !important; }
  .main-footer h3, .main-footer h4, .main-footer h5 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }
  .main-footer ul { margin-bottom: 1rem; padding-left: 0; }
  .main-footer li { padding: 0.3rem 0; line-height: 1.4; }
  .main-footer a { font-size: 0.9rem; }
  .main-footer .row > [class*="col-"] { margin-bottom: 1rem; }
  .main-footer hr { margin: 0.85rem 0; }
  .footer-note, .footer-quick-links { font-size: 0.82rem; line-height: 1.45; }
}

/* Wrapping — applies at every width, not just mobile. */
h1, h2, h3, .section-header h2, .methods-title, .step-title, .timeline-title {
  text-wrap: balance;          /* headlines break evenly instead of one orphan */
}
p, .step-description, .tech-description, .timeline-description, .faq-answer {
  text-wrap: pretty;           /* avoids a single trailing word on its own line */
}

/* One vertical scale, so nothing is left oversized beside something tightened. */
@media (max-width: 768px) {
  .row { --bs-gutter-y: 0.75rem; }
  .mb-5 { margin-bottom: 1.25rem !important; }
  .mb-4 { margin-bottom: 1rem !important; }
  .mt-5 { margin-top: 1.25rem !important; }
  .mt-4 { margin-top: 1rem !important; }
  .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
}

/* ── Footer gap, 2026-08-25 ──────────────────────────────────────
   The footer row is `row g-4 mb-4`. On a phone every column is col-12, so
   the brand blurb sits alone on a row and the 1.5rem gutter becomes a gap
   between it and the link columns — plus the brand block's own margin.
   Seen on device as a large void mid-footer. */
@media (max-width: 768px) {
  .main-footer .row.g-4 { --bs-gutter-y: 0.75rem; --bs-gutter-x: 0.75rem; }
  .main-footer .footer-brand p { margin-bottom: 0 !important; font-size: 0.88rem; line-height: 1.45; }
  .main-footer .footer-brand + * { margin-top: 0 !important; }

  /* Four link columns read better as a 2x2 grid than as full-width stacks. */
  .main-footer .row > .col-6 { padding-bottom: 0.25rem; }
  .main-footer .row > .col-12.col-lg-3:first-child { margin-bottom: 0.5rem; }
}

/* ── Footer congruence, 2026-08-25 ───────────────────────────────
   The footer column headings (SERVICES / SUPPORT / LEGAL / CONNECT) carry
   an inline color:#e2e8f0, and the markup is identical across all 38
   templates. Inline styles beat a plain rule, so these are deliberately
   over-specific — that is the cost of overriding without editing 38 files.
   Amber #f59e0b is --pirate-gold, the wordmark colour, so the headings now
   echo the logo. Applies at every width, not just mobile. */
footer.main-footer h6[style],
.main-footer h6[style] {
  color: #f59e0b !important;
  margin-bottom: 0.75rem !important;
}

@media (max-width: 768px) {
  /* Columns are col-6 on a phone: a 2x2 grid with uneven item counts.
     A minimum height keeps the rows aligned instead of ragged. */
  .main-footer .row > .col-6 { min-height: 8.5rem; }
  .main-footer h6[style] { font-size: 0.7rem !important; }
}

/* ── Floating controls, 2026-08-25 ───────────────────────────────
   Two stacked circles at the right edge overlapped card content on device.
   back-to-top is a DESKTOP convention: on a phone the iOS status-bar tap
   and the Android gesture already do this, so it earns no screen space.
   The chat bubble stays — being reachable matters for a privacy product —
   but sits above the safe-area inset and is smaller.
   Note templates already carry !important rules for these around line 3134
   of how-it-works.html; these are later in the cascade and win on ties. */
@media (max-width: 768px) {
  .back-to-top,
  #back-to-top,
  .scroll-to-top,
  #scroll-to-top {
    display: none !important;
  }

  .chat-bubble,
  #chat-bubble,
  .chat-widget-button,
  #chat-widget-button {
    width: 44px !important;
    height: 44px !important;
    right: 0.75rem !important;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    opacity: 0.92;
  }
  .chat-bubble img,
  #chat-bubble img,
  .chat-bubble-logo { width: 22px !important; height: 22px !important; }

  /* Nothing should sit under the bubble at the end of a page. */
  .main-footer { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Document sections, 2026-08-25 ───────────────────────────────
   Styling for the <details> blocks doc-collapse.js builds on the legal
   pages. Amber heading matches the wordmark and the footer headings. */
@media (max-width: 768px) {
  .doc-section {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: rgba(30, 41, 59, 0.35);
    overflow: hidden;
  }
  .doc-section-head {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 2.25rem 0.85rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f59e0b;
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .doc-section-head::-webkit-details-marker { display: none; }
  .doc-section-head::after {
    content: '+';
    position: absolute;
    right: 0.9rem;
    font-size: 1.15rem;
    line-height: 1;
    color: #94a3b8;
  }
  .doc-section[open] > .doc-section-head::after { content: '\2212'; }
  .doc-section[open] > .doc-section-head {
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }
  .doc-section > *:not(.doc-section-head) {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .doc-section h3 { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; }
  /* padding-BLOCK only. The shorthand `padding: 0.2rem 0` reset padding-left
     to zero, and .privacy-section li relies on padding-left:2rem to clear an
     absolutely positioned lock icon at left:0 — so every line rendered with
     the icon sitting on its first letter. */
  .doc-section li { font-size: 0.9rem; line-height: 1.45; padding-block: 0.2rem; }
  /* .privacy-section li has padding-left:2rem with an absolutely
     positioned lock at left:0. Overriding the list padding put the icon
     on top of the first letter, so leave the li padding alone. */
  /* _listPaddingLeftAlone 2026-08-25: this rule used to set padding-left: 0.
     accessibility, cookies, privacy-policy and terms all draw their bullet
     icon as a ::before pinned at left:0 and rely on the list's own indent
     to clear it — zeroing it put every icon on top of its first letter.
     Set the vertical margin only; never the horizontal padding. */
  .doc-section ul, .doc-section ol { margin-bottom: 0.6rem; }
  .doc-section .section-number { margin-right: 0.4rem; }
}

/* ── Every hero, 2026-08-25 ──────────────────────────────────────
   The earlier rules named .methods-hero only, which exists on ONE page.
   terms-hero, privacy-hero, services-hero, results-hero, referral-hero,
   success-hero, verification-hero and hero-section were all untouched and
   still carried desktop-sized padding, leaving a screenful of dead space
   between the navbar and the title. Attribute selector so any future hero
   is covered without another round of this. */
@media (max-width: 768px) {
  section[class*="hero"],
  div[class*="hero"]:not([class*="hero-"]) {
    padding-top: 4.25rem !important;
    padding-bottom: 1.25rem !important;
    min-height: 0 !important;
  }
  section[class*="hero"] h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
  section[class*="hero"] p  { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0; }
  section[class*="hero"] .container { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ── Anchor landing, 2026-08-25 ──────────────────────────────────
   The header is position:fixed and nothing reserves space for it, so an
   anchor scroll puts the target's top edge underneath the navbar — you see
   the scroll happen and then apparently nothing, because the heading you
   jumped to is behind the header. scroll-margin-top offsets the landing
   point. Applies at every width; the header is fixed on desktop too. */
[id^="section-"],
.privacy-section,
.terms-section,
.doc-section {
  scroll-margin-top: 90px;
}
@media (max-width: 768px) {
  [id^="section-"],
  .privacy-section,
  .terms-section,
  .doc-section { scroll-margin-top: 76px; }
}

/* ── Tables on narrow screens, 2026-08-25 ────────────────────────
   Eight tables across six templates, up to seven columns. A phone cannot
   show seven columns; squeezing them is what produced the broken headings.
   Each table scrolls in its own track, with the type and padding reduced so
   fewer rows wrap at all — no dead space added. */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: auto; }
  th, td {
    padding: 0.5rem 0.6rem !important;
    line-height: 1.35;
    vertical-align: top;
    min-width: 6.5rem;
  }
  th { font-size: 0.78rem; letter-spacing: 0; }
  /* The floating audio button was landing on top of table cells. */
  .accessibility-audio-btn, #audio-toggle, .audio-btn {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 0.75rem !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── Topic lists, 2026-08-25 ─────────────────────────────────────
   The legal pages open with a Navigation card listing up to 14 topics, one
   full-width row each — a screen and a half before any content. Two columns
   halves that. Four class names (privacy-nav, terms-nav, cookies-nav,
   accessibility-nav) for the same structure, hence the selector list.
   _navGrid */
@media (max-width: 768px) {
  .privacy-nav, .terms-nav, .cookies-nav, .accessibility-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin: 0;
  }
  .privacy-nav li, .terms-nav li, .cookies-nav li,
  .accessibility-nav li {
    margin-bottom: 0 !important;
  }
  .privacy-nav a, .terms-nav a, .cookies-nav a,
  .accessibility-nav a {
    padding: 0.55rem 0.6rem !important;
    font-size: 0.82rem !important;
    line-height: 1.25;
    border-width: 1px !important;
    display: flex;
    align-items: center;
    min-height: 44px;   /* tap target preserved despite the smaller box */
    text-align: left;
  }
  /* The sidebar card itself does not need desktop padding either. */
  .privacy-sidebar, .terms-sidebar,
  .cookies-sidebar, .accessibility-sidebar {
    padding: 1rem !important;
  }
  .privacy-sidebar h3, .terms-sidebar h3,
  .cookies-sidebar h3, .accessibility-sidebar h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
}

/* ── Stat rows, 2026-08-25 ───────────────────────────────────────
   The legal pages open with a stat card — GDPR / 5 / 24-7 on cookies. Their
   columns are `col-md-6 col-lg-6 col-sm-4` with NO extra-small class, so on
   a phone each one goes full width and the three stack into a whole screen
   of mostly empty space. The figures are short, so three across fits easily.
   Overriding the column width in CSS avoids touching six templates.
   _statRow */
@media (max-width: 768px) {
  .stat-item { padding: 0.25rem !important; margin: 0 !important; }
  .stat-item .stat-number, .stat-number.d-block {
    font-size: 1.4rem !important;
    line-height: 1.1;
    margin-bottom: 0.15rem !important;
  }
  /* _statLabelWrap: at one third width these pills kept their padding and
     stayed on one line, so "COOKIE CATEGORIES" overflowed into its
     neighbours. Let the label wrap inside its own column instead. */
  .stat-item .stat-label, .stat-label.small {
    font-size: 0.62rem !important;
    line-height: 1.25;
    padding: 0.25rem 0.3rem !important;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-align: center;
    letter-spacing: 0 !important;
  }
  .stat-item { overflow: hidden; }
  /* Three across, since these labels are one or two short words. */
  .row > [class*="col-sm-4"]:has(.stat-item) { flex: 0 0 33.333%; max-width: 33.333%; }
  .row:has(> [class*="col"] .stat-item) { --bs-gutter-y: 0.5rem; }
}

/* ── Stat card box, 2026-08-26 ───────────────────────────────────
   _heroStatsBox: .hero-stats carries `padding: 2.5rem; margin: 2rem 0` —
   40px inside plus 32px above and below. That was proportionate when three
   stats stacked into a tall column; now they sit in one row about 50px
   high, so the box is mostly empty. Padding and margin come down with the
   content, which is the whole rule: never tighten one without the other. */
@media (max-width: 768px) {
  .hero-stats {
    padding: 0.75rem !important;
    margin: 1rem 0 !important;
  }
  .hero-stats .row { --bs-gutter-y: 0.25rem; --bs-gutter-x: 0.25rem; margin: 0; }
  .hero-stats .row > [class*="col"] { padding-left: 0.25rem; padding-right: 0.25rem; }
  .stat-item { padding: 0.25rem !important; }
  /* The hero itself should not add another full gap under the box. */
  [class*="hero"] .hero-stats:last-child { margin-bottom: 0 !important; }
}

/* ── how-it-works follow-ups, 2026-08-26 ─────────────────────────
   _deckHeights */
@media (max-width: 768px) {
  /* Flex children stretch to the tallest sibling, so every card carried the
     height of the longest one — a void under the short cards. Only one card
     is ever visible in a snap deck, so they need not match. */
  .process-steps, .tech-grid, .timeline { align-items: flex-start !important; }

  /* The amber rule was 2px at left:0 with 1rem of padding, which reads as
     touching the text. Widen the gap and inset the bar. */
  .step-features li { padding-left: 1.4rem !important; }
  .step-features li::before { left: 0.25rem !important; }

  /* step-content is a 1fr/300px grid on desktop; block-stacking it leaves
     the visual block with the grid's 2rem gap above it. */
  .step-content { gap: 0.75rem !important; }
  .step-visual { margin-top: 0.5rem !important; }
  .step-icon { font-size: 2.5rem !important; margin-bottom: 0.5rem !important; animation: none !important; }
  .step-badge { margin-bottom: 0 !important; }
  .process-step { padding-bottom: 1rem !important; }
}

/* ── how-it-works, whole page, 2026-08-26 ────────────────────────
   _hiwWhole. Audited rather than patched section by section: 4 step-features
   lists (done), 6 tech-features lists still on check marks, 4 list-unstyled,
   and a hero-stats block whose four stats stack. */
@media (max-width: 768px) {
  /* tech-features draws its marker via a ::before inside padding-left:25px,
     so the padding STAYS — only the glyph changes to the amber rule. */
  .tech-features li i { display: none !important; }
  .tech-features li { position: relative; padding-left: 1.4rem !important; }
  .tech-features li::before {
    content: '' !important;
    position: absolute;
    left: 0.25rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f59e0b, rgba(245,158,11,0.25));
  }
  /* list-unstyled items with icons get the same treatment. */
  .list-unstyled li i.fa-check { display: none !important; }

  /* Four stats stacked is most of a screen. Two by two. */
  .hero-stats .row > [class*="col"] { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ── Stat blocks without a grid wrapper, 2026-08-26 ──────────────
   _statGrid: on how-it-works the .stat-item divs sit DIRECTLY inside
   .hero-stats with no Bootstrap .row or column classes, so the
   column-width override written for cookies.html never matched. Making the
   container itself a grid works whatever the children are. Two across for
   four stats, three for three. */
@media (max-width: 768px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    align-items: start;
  }
  .hero-stats > .stat-item {
    padding: 0.4rem 0.25rem !important;
    margin: 0 !important;
    text-align: center;
  }
  .hero-stats > .stat-item .stat-number {
    display: block;
    font-size: 1.35rem !important;
    line-height: 1.15;
    margin-bottom: 0.1rem !important;
  }
  .hero-stats > .stat-item .stat-label {
    display: block;
    font-size: 0.68rem !important;
    line-height: 1.25;
    white-space: normal;
  }
  /* A .row inside hero-stats (cookies.html) must not become a grid cell. */
  .hero-stats > .row { grid-column: 1 / -1; display: flex !important; }
}

/* ── Stat columns follow the count, 2026-08-26 ───────────────────
   _statCount: a fixed two-column grid leaves an empty cell whenever there
   are three stats (cookies: GDPR / 5 / 24-7), which reads as a mistake.
   Count the children and choose the columns: 3 across for three, 2 for
   four. Pills are given equal width so the row is even. */
@media (max-width: 768px) {
  /* three stat-items, or a .row holding three columns */
  .hero-stats:has(> .stat-item:nth-child(3)):not(:has(> .stat-item:nth-child(4))) {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero-stats .row > [class*="col"]:nth-child(3):last-child,
  .hero-stats .row > [class*="col"] { flex: 1 1 0 !important; max-width: none !important; }
  .hero-stats .row { display: flex !important; flex-wrap: nowrap !important; gap: 0.4rem; }

  /* Even pills: fill the cell rather than sizing to their own text. */
  .hero-stats .stat-label, .hero-stats .stat-label.small {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.6rem !important;
    padding: 0.25rem 0.2rem !important;
  }
  .hero-stats .stat-item { display: flex; flex-direction: column; align-items: stretch; }
}