/* ============================================================
   Vertex Slate — design implemented from mockup C (neon lobby).
   Palette taken from the live brand site: #F13E56 / #1A1B20 / radius 16px.
   ============================================================ */

:root {
  --accent: #F13E56;
  --accent-deep: #DC2F4A; /* same hue, 4.62:1 on white — for fills that carry white text */
  --accent2: #FF7A45;
  --violet: #8B3FF1;
  --bg: #1A1B20;
  --bg2: #141519;
  --card: #22242C;
  --card2: #2A2D37;
  --text: #F4F4F7;
  --muted: #B7B9C6;
  --line: #34363F;
  --gold: #F0B429;
  --green: #2ED573;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;

  --s-xs: .5rem;
  --s-sm: .85rem;
  --s-md: 16px;
  --s-lg: 2rem;

  --maxw: 1200px;
  --font: 'Segoe UI', Roboto, system-ui, -apple-system, Arial, sans-serif;
}

/* ── Reset + anti-overflow ───────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }  /* clip, not hidden — hidden breaks sticky header */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  font-size: 17px;
}
img, video, table, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0 0 .6em; line-height: 1.2; font-weight: 800; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--muted); }

/* Side gutters are non-negotiable — visual_gate.js measures computed padding.
   Never collapse this to the `padding: X 0` shorthand. */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: max(env(safe-area-inset-left), var(--s-md));
  padding-right: max(env(safe-area-inset-right), var(--s-md));
}

.section { padding: 44px 0; }
.section-dark { background: var(--bg2); }

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}

/* ── Buttons ─────────────────────────────────────────
   Backgrounds stay OPAQUE: the contrast gate reads rgba(255,255,255,.06)
   as solid white and would flag white-on-ghost as 1:1. */
.btn, .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-md);
  font-weight: 700;
  padding: 14px 22px;
  border: none;
  cursor: pointer;
  font-size: .98rem;
  min-height: 44px;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active, .cta-button:active { transform: scale(.98); }

/* Was #F13E56 → #ff5b76: 3.77:1 / 3.00:1 against white, below WCAG AA.
   Both ends now clear 4.5:1 (4.62 / 5.59) so the label passes at ANY size — the header's
   mobile CTAs stay at .86rem and can't rely on the "large text" 3:1 threshold. Brand hue kept. */
.btn-accent, .cta-button {
  background: linear-gradient(135deg, #DC2F4A, #C9203C);
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.25;
  box-shadow: 0 0 0 1px rgba(220, 47, 74, .45), 0 8px 24px -6px rgba(201, 32, 60, .7);
}
.btn-accent:hover, .cta-button:hover {
  box-shadow: 0 0 0 1px rgba(241, 62, 86, .6), 0 10px 28px -6px rgba(241, 62, 86, .8);
  color: #fff;
}
.btn-ghost {
  background: var(--card2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.btn-ghost:hover { background: #333743; color: #fff; }
.btn-block { width: 100%; }

/* ── Header ──────────────────────────────────────────
   Mobile: row 1 = logo + burger, row 2 = two equal full-width CTAs (never hidden).
   Desktop (>=900): logo + menu + the same two CTAs. */
header.site {
  background: linear-gradient(180deg, #17181d, #131318);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.hdr-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  flex: 0 0 auto;
}
.logo img, .logo-img {
  width: auto;
  max-height: 40px;
  object-fit: contain;   /* never crop the wordmark; also keeps the img gate happy */
}
.logo-text { white-space: nowrap; }

.burger {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hdr-cta-row { display: flex; gap: 10px; padding-bottom: 12px; }
.hdr-cta-row .btn { flex: 1 1 0; font-size: .86rem; padding: 13px 10px; min-width: 0; }

.hdr-desktop-cta { display: none; }

nav.menu { display: none; }
nav.menu.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #17181d;
  border-bottom: 1px solid var(--line);
  padding: var(--s-sm);
  z-index: 999;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
}
nav.menu a {
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
  padding: .75rem .5rem;
  border-bottom: 1px solid var(--line);
}
nav.menu a:last-child { border-bottom: none; }

/* Nine menu items plus the logo and two CTAs do not fit one row on a narrow desktop: the flex
   items shrank and labels like "Ana Səhifə" broke onto a second line, giving the header a
   ragged two-storey look. nowrap fixes the wrap but the row still needs ~1160px to clear the
   logo and the CTAs — at 1100 it merely overlapped them instead. So the burger holds until
   1180 (tablets still collapse, which is what the 900px rule was for). */
@media (min-width: 1180px) {
  .hdr-row1 { padding: 16px 0; gap: 20px; }
  .burger { display: none; }
  .hdr-cta-row { display: none; }
  .hdr-desktop-cta { display: flex; gap: 10px; flex: 0 0 auto; }
  .hdr-desktop-cta .btn { padding: 12px 16px; font-size: .86rem; white-space: nowrap; }
  nav.menu {
    display: flex;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    position: static;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  nav.menu a { color: var(--muted); padding: 0; border-bottom: none; white-space: nowrap; }
  nav.menu a:hover { color: #fff; }
}

@media (min-width: 1280px) {
  .hdr-row1 { gap: 24px; }
  nav.menu { gap: 20px; font-size: .9rem; }
  .hdr-desktop-cta .btn { padding: 12px 18px; font-size: .9rem; }
}

/* ── Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 52px 0 44px;
  background:
    radial-gradient(circle at 15% 20%, rgba(139, 63, 241, .55), transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(255, 122, 69, .45), transparent 50%),
    radial-gradient(circle at 70% 90%, rgba(241, 62, 86, .5), transparent 55%),
    linear-gradient(180deg, #1c1029, #171018 60%, var(--bg));
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 792px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 180, 41, .14);
  border: 1px solid rgba(240, 180, 41, .5);
  color: var(--gold);
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero h1 { color: #fff; text-shadow: 0 0 26px rgba(241, 62, 86, .55); }
.hero .offer {
  font-size: 1.05rem;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 18px 0 26px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-cta .btn { min-width: 200px; flex: 1 1 auto; max-width: 320px; }
.hero-fifa {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* ── Category icons ──────────────────────────────────── */
.cat-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scrollbar-width: thin;
}
.cat-item { flex: 0 0 auto; width: 88px; text-align: center; }
.cat-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(241, 62, 86, .15) inset;
}
.cat-circle svg { width: 28px; height: 28px; }
.cat-item span { font-size: .72rem; color: var(--muted); font-weight: 600; }

/* ── Game tiles ([game_gallery]) ─────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: var(--s-lg) 0;
}
@media (min-width: 640px) { .games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .games-grid { grid-template-columns: repeat(4, 1fr); } }

.game-card {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.game-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;   /* required: fixed width/height attrs + object-fit:fill trips IMG-DISTORT */
  display: block;
  background: linear-gradient(135deg, var(--card2), var(--violet));
}
.game-card .game-name {
  padding: 10px 12px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
}

/* ── Crash cards ─────────────────────────────────────── */
.crash-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .crash-row { grid-template-columns: 1fr 1fr; } }
.crash-card {
  border-radius: var(--r-lg);
  padding: 22px;
  background: linear-gradient(135deg, rgba(241, 62, 86, .18), rgba(139, 63, 241, .18));
  border: 1px solid rgba(241, 62, 86, .35);
  display: flex;
  align-items: center;
  gap: 16px;
}
.crash-card svg { width: 56px; height: 56px; flex: 0 0 auto; }
.crash-card h3 { margin: 0 0 4px; color: #fff; }
.crash-card p { margin: 0; font-size: .85rem; }

/* ── Sport grid ──────────────────────────────────────── */
.sport-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .sport-grid { grid-template-columns: repeat(5, 1fr); } }
.sport-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 10px;
  text-align: center;
}
.sport-item svg { width: 32px; height: 32px; margin: 0 auto 8px; display: block; }
.sport-item span { font-size: .78rem; font-weight: 700; color: #fff; }

/* ── Review block ([review_block]) — numbers mirror the schema ── */
.review-block {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: var(--s-lg) 0;
}
.rating-head { flex: 0 0 auto; text-align: center; min-width: 120px; }
.rating-score { font-size: 2.6rem; font-weight: 800; color: var(--gold); line-height: 1; }
.review-block .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }
.rating-meta { color: var(--muted); font-size: .85rem; }
.rating-body { flex: 1; min-width: 220px; }
.rb-byline { font-size: .9rem; color: var(--text); font-weight: 700; margin-bottom: .5rem; }
.rb-job { color: var(--muted); font-weight: 400; }
.review-block blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--muted);
}

/* ── Charts ([chart]) ────────────────────────────────── */
.chart-fig, .diagram-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin: var(--s-lg) 0;
}
.chart-fig svg { display: block; width: 100%; height: auto; }
.chart-title {
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* ── Content body ────────────────────────────────────
   No padding here on purpose: .container owns the gutters.
   Adding `padding: X 0` at this level is what killed gutters before. */
.content-body { padding-block: var(--s-lg); }
.content-body h2 {
  margin: var(--s-lg) 0 var(--s-sm);
  color: #fff;
  border-left: 4px solid var(--accent);
  padding-left: .7rem;
}
.content-body h3 { margin: var(--s-md) 0 var(--s-xs); color: #fff; }
.content-body ul, .content-body ol { margin: 0 0 1em 1.3rem; padding: 0; color: var(--muted); }
.content-body li { margin-bottom: .4rem; }
.content-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* `.content-body a` (0,1,1) outranks `.cta-button` (0,1,0), so in-content CTAs were painting
   accent-coloured underlined text on the accent gradient — 1.22:1, the label was unreadable.
   Buttons are not body links: white, no underline, wherever they sit. The :hover/:focus
   states are listed too — `.content-body a:hover` recolours links to gold, which on the red
   gradient is 2.48:1 and would quietly undo this on mouseover. */
.content-body a.btn,
.content-body a.btn-accent,
.content-body a.cta-button,
.cta-block a,
.content-body a.btn:hover,
.content-body a.btn-accent:hover,
.content-body a.cta-button:hover,
.cta-block a:hover,
.content-body a.btn:focus,
.content-body a.btn-accent:focus,
.content-body a.cta-button:focus,
.cta-block a:focus {
  color: #fff;
  text-decoration: none;
}
.content-body a:hover { color: var(--gold); }
.content-body strong { color: var(--text); }
.content-body code {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .4em;
  font-size: .9em;
  word-break: break-word;
}
.content-body img { max-width: 100%; }
.content-body img:not(.shot) { object-fit: cover; }

.content-img {
  display: block;
  max-width: 800px;
  width: 100%;
  height: auto;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}
/* Vertical screenshots: no aspect-ratio / no object-fit — must not be cropped. */
.shot {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

/* ── Tables (auto-wrapped in .table-scroll by the_content filter) ── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: var(--s-md) 0;
  background: var(--card);
}
table { width: 100%; border-collapse: collapse; background: var(--card); }
caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px;
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
  border-bottom: 1px solid var(--line);
}
th, td {
  padding: 12px 14px;
  text-align: left;
  font-size: .85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  word-break: break-word;   /* let cells shrink instead of forcing a wide table */
}
th {
  background: var(--card2);
  color: var(--gold);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
}
td { color: var(--muted); }
tr:last-child td { border-bottom: none; }

/* ── Draft content blocks (classes used across the 27 drafts) ── */
.byline { font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.aff-disclosure {
  font-size: .8rem;
  color: var(--muted);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: var(--s-md);
}
.lead { font-size: 1.08rem; color: var(--text); }

.cta-block { margin: var(--s-lg) 0; text-align: center; }

.rg-mini {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: var(--s-md) 0;
}
.rg-mini p { margin: 0; font-size: .85rem; }

.age-gate-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin: var(--s-lg) 0;
}
/* --accent (#F13E56) is 3.77:1 against white — fine as a brand fill, not as a backdrop for
   white text at 18px/800 (13.8pt bold falls under WCAG's large-text cutoff, so it needs 4.5:1).
   --accent-deep is the same hue at 4.62:1 and is used wherever white text sits on the fill. */
.age-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1.15rem;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(241, 62, 86, .2);
}
.age-gate-badge p { margin: 0; flex: 1; min-width: 200px; font-size: .88rem; }

.legal-note-short, .legal-note-full, .legal-note-c, .tax-note {
  background: rgba(240, 180, 41, .08);
  border: 1px solid rgba(240, 180, 41, .35);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: var(--s-md) 0;
  font-size: .86rem;
  color: var(--muted);
}
.wager-note {
  background: rgba(241, 62, 86, .08);
  border: 1px solid rgba(241, 62, 86, .35);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: var(--s-md) 0;
  font-size: .86rem;
}
.test-note, .source-note {
  border-left: 3px solid var(--violet);
  background: var(--bg2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin: var(--s-md) 0;
  font-size: .82rem;
  color: var(--muted);
}
.license-block, .license-short {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin: var(--s-md) 0;
}
.license-block h3 { margin-top: 0; }
.contact-email { font-weight: 700; color: var(--gold); }

/* ── Post list (index.php fallback) ──────────────────── */
.post-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
}
.post-item h2 { font-size: 1.2rem; margin: 0 0 .4em; border: none; padding: 0; }

/* ── Footer ──────────────────────────────────────────── */
footer.site {
  background: var(--bg2);
  border-top: 1px solid var(--line);
  padding: 36px 0 24px;
  margin-top: var(--s-lg);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }

/* Not <h4>: a jump from H2 to H4 fails the heading-hierarchy gate. */
.footer-title {
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  margin: 0 0 12px;
}
.footer-about { font-size: .82rem; }
.footer-col a { display: block; color: var(--muted); font-size: .82rem; padding: .25rem 0; }
.footer-col a:hover { color: #fff; }

.footer-rg {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}
.age-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(241, 62, 86, .2);
}
.footer-rg p { margin: 0; font-size: .78rem; }

.footer-bottom {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  color: var(--muted);
}
.disclaimer { font-size: .72rem; color: #7d7f8a; max-width: 900px; margin-top: 14px; }

/* ── Cookie notice ───────────────────────────────────── */
#cn-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #111;
  color: #fff;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.4;
  display: none;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .35);
}
#cn-banner .cn-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#cn-banner .cn-text { flex: 1; min-width: 240px; }
#cn-banner .cn-text strong { display: block; font-size: 15px; margin-bottom: 2px; }
#cn-banner button {
  background: #fff;
  color: #111;
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 700;
  min-height: 40px;
}
#cn-banner button.reject { background: #333; color: #fff; border: 1px solid #666; }
@media (max-width: 520px) {
  #cn-banner .cn-text { min-width: 0; flex: 1 1 100%; }
  #cn-banner button { flex: 1 1 0; }
}

/* ── Small screens ───────────────────────────────────── */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 32px 0; }
  .hero { padding: 40px 0 36px; }
  .content-body { padding-block: var(--s-md); }
  th, td { padding: .55rem .6rem; font-size: .8rem; }
  caption { padding: 10px; font-size: .75rem; }
  .review-block, .age-gate-badge { padding: 16px; gap: 16px; }
  .chart-fig, .diagram-card { padding: 14px; }
  .crash-card { padding: 16px; gap: 12px; }
  .crash-card svg { width: 40px; height: 40px; }
}


/* No reading-column cap here. Capping body copy at 78ch while tables and charts kept the
   full container made the text visibly narrower than the tables sitting right above it —
   the page read as misaligned. Text and tables share one width. */