/* Somaliabets art direction
   ---------------------------------------------------------------------------
   Visual tokens follow the shared portfolio presentation layer so the family of
   sites reads as one product: neutral near black page, dark navy card surfaces,
   a royal blue hero gradient, white hero text, and a single yellow accent
   reserved for commercial actions. Light mode is the same system inverted, with
   the hero gradient held constant in both modes because the royal blue is the
   identity, not a surface.

   Somaliabets keeps its own identity above the token layer: its own logo and
   name, Somali football and basketball photography, Somali payment rails, and
   copy written for Somalia and the diaspora. No content, brand data, compliance
   material or claims from any other country site appear here.

   Type: Inter Tight for display, Inter for body and UI, with a system stack
   fallback so a failed font request never blocks first paint.
   Every interactive target is at least 44px in its smallest dimension. */

:root {
  /* Identity constants, mode independent. */
  --hero-from: #0d2161;
  --hero-to: #1e3b8d;
  --hero-ink: #ffffff;
  --hero-ink-soft: #d5e0f7;
  --accent: #ffc920;
  --accent-hover: #ffd955;
  --accent-ink: #1c1c1c;
  --rank-ink: #a3b9f1;
  --ok: #1c7a53;
  --warn: #8a5a12;

  /* Light mode surfaces. */
  --bg: #ffffff;
  --bg-alt: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #eaeff8;
  --line: #dbe3ef;
  --ink: #16203a;
  --ink-soft: #4a5772;
  --link: #14459c;
  --link-hover: #0d2161;
  --head-bg: #1a1f2e;
  --head-ink: #ffffff;
  --foot-bg: #1a1f2e;
  --foot-ink: #d6ddea;
  --shadow: 0 1px 2px rgba(13, 33, 97, 0.08), 0 8px 24px rgba(13, 33, 97, 0.08);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --tap: 44px;
  --wrap: 1120px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Dark mode tokens. Applied when the reader has chosen dark, or when the
   operating system asks for dark and the reader has not chosen light. */
[data-theme="dark"] {
  --bg: #1c1c1c;
  --bg-alt: #171b26;
  --surface: #1a1f2e;
  --surface-2: #202737;
  --surface-3: #262f42;
  --line: #2f3a4f;
  --ink: #f2f5fa;
  --ink-soft: #a7b2c4;
  --link: #7fb0f5;
  --link-hover: #a9caf9;
  --head-bg: #1a1f2e;
  --head-ink: #ffffff;
  --foot-bg: #12161f;
  --foot-ink: #c8d2e2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #1c1c1c;
    --bg-alt: #171b26;
    --surface: #1a1f2e;
    --surface-2: #202737;
    --surface-3: #262f42;
    --line: #2f3a4f;
    --ink: #f2f5fa;
    --ink-soft: #a7b2c4;
    --link: #7fb0f5;
    --link-hover: #a9caf9;
    --head-bg: #1a1f2e;
    --head-ink: #ffffff;
    --foot-bg: #12161f;
    --foot-ink: #c8d2e2;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, .plate, .btn, .rank {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--accent); color: var(--accent-ink); padding: var(--sp-3) var(--sp-4);
  font-weight: 700; min-height: var(--tap); display: inline-flex; align-items: center;
}
.skip:focus { left: 0; }

/* --- Age bar --- */
.agebar {
  background: var(--hero-from); color: var(--hero-ink-soft);
  font-size: 13px; padding: var(--sp-2) 0;
}
.agebar strong { color: var(--hero-ink); }
.agebar a { color: var(--accent); }

/* --- Header --- */
.site-head { background: var(--head-bg); color: var(--head-ink); }
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 60px;
}
.brandmark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--head-ink); text-decoration: none; font-family: var(--font-display);
  font-weight: 800; font-size: 19px; min-height: var(--tap);
}
.brandmark svg { color: var(--accent); flex: none; }
.brandmark span em { font-style: normal; color: var(--accent); }
.head-actions { display: flex; align-items: center; gap: var(--sp-2); }

.nav-toggle, .theme-toggle {
  min-height: var(--tap); min-width: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: transparent; color: var(--head-ink);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; padding: 0 var(--sp-3); cursor: pointer;
}
.nav-toggle:hover, .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { flex: none; }
.theme-toggle .theme-label { font-size: 13px; }

#site-nav ul {
  list-style: none; margin: 0; padding: 0 0 var(--sp-3);
  display: grid; gap: var(--sp-1);
}
#site-nav a {
  color: var(--head-ink); text-decoration: none; font-weight: 600;
  display: flex; align-items: center; min-height: var(--tap);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#site-nav a:hover { color: var(--accent); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  #site-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding-bottom: var(--sp-2); }
  #site-nav a { border-top: 0; }
}

/* --- Hero --- */
.hero {
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
  color: var(--hero-ink);
  padding: var(--sp-6) 0 var(--sp-7);
}
.hero h1 {
  font-size: clamp(28px, 7.6vw, 44px); line-height: 1.08;
  margin: 0 0 var(--sp-4); color: var(--hero-ink); letter-spacing: -0.03em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin: 0 0 var(--sp-4); font-size: 17px; color: var(--hero-ink); max-width: 62ch; }
.hero .byline { font-size: 13px; color: var(--hero-ink-soft); margin: 0 0 var(--sp-2); }
.hero .byline a { color: var(--accent); }
.hero .trustline {
  font-size: 13px; color: var(--hero-ink-soft); margin: 0 0 var(--sp-4);
  border-left: 3px solid var(--accent); padding-left: var(--sp-3);
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--radius-pill);
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; font-family: var(--font-display); font-size: 16px;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--hero-ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-dark { border-color: var(--line); color: var(--ink); }
.btn-ghost-dark:hover { border-color: var(--accent); color: var(--ink); }
.btn-exit { background: var(--accent); color: var(--accent-ink); width: 100%; }
.btn-exit:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.is-disabled {
  background: var(--surface-3); color: var(--ink-soft); cursor: not-allowed;
  border-color: var(--line);
}
.btn.is-disabled:hover { background: var(--surface-3); color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.chips li {
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--hero-ink); font-size: 13px; font-weight: 600;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill);
}

/* --- Split hero with lead photograph --- */
.hero-grid { display: grid; gap: var(--sp-5); }
.hero-media { min-width: 0; }
.hero-figure { margin: 0; }
.hero-figure .editorial-img {
  width: 100%; border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); display: block; object-fit: cover;
}
.hero-figure figcaption {
  font-size: 13px; color: var(--hero-ink-soft); margin-top: var(--sp-2);
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; column-gap: var(--sp-7); }
}

/* --- Editorial imagery --- */
.editorial-figure { margin: 0 0 var(--sp-5); }
.editorial-img { width: 100%; border-radius: var(--radius); display: block; object-fit: cover; }
.editorial-figure figcaption, .sport-figure figcaption {
  font-size: 13px; color: var(--ink-soft); margin-top: var(--sp-2);
}
.editorial-img.is-pending {
  aspect-ratio: 4 / 3; background: var(--surface-2);
  border: 1px dashed var(--line); display: grid; place-items: center;
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
}

/* --- Page shell --- */
.page { padding: var(--sp-6) 0 var(--sp-8); background: var(--bg); }
.page h1 { font-size: clamp(24px, 5.4vw, 36px); line-height: 1.15; margin: 0 0 var(--sp-3); }
.page > .wrap > .byline { font-size: 13px; color: var(--ink-soft); margin: 0 0 var(--sp-5); }

/* --- Prose --- */
.prose { max-width: none; }
.prose > p, .prose > ul:not(.brand-list), .prose > ol:not(.brand-list), .prose > h3,
.prose > .callout, .prose > .note, .prose > .sources, .prose > .rg-card { max-width: 72ch; }
.prose > h2 { max-width: 62ch; }
.prose h2 {
  font-size: clamp(21px, 4.6vw, 28px); line-height: 1.2;
  margin: var(--sp-7) 0 var(--sp-3);
}
.prose h3 { font-size: 18px; margin: var(--sp-5) 0 var(--sp-2); }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
.prose li { margin-bottom: var(--sp-2); }
.section-intro { color: var(--ink-soft); margin: 0 0 var(--sp-5); max-width: 72ch; }

.callout {
  background: var(--surface-2); border-left: 4px solid var(--accent);
  padding: var(--sp-4); border-radius: var(--radius-sm); margin: 0 0 var(--sp-5);
}
.note {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-4);
  margin: 0 0 var(--sp-5); font-size: 15px; color: var(--ink-soft);
}
.note strong { color: var(--ink); }

.sources { margin: 0 0 var(--sp-5); font-size: 14px; }
.sources h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 var(--sp-2); }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { margin-bottom: var(--sp-2); }

.rg-dest {
  display: block; background: var(--hero-from); color: var(--hero-ink);
  padding: var(--sp-5); border-radius: var(--radius); text-decoration: none;
  margin: 0 0 var(--sp-5);
}
.rg-dest:hover { background: var(--hero-to); color: var(--hero-ink); }
.rg-dest strong { display: block; font-size: 20px; color: var(--accent); margin-bottom: var(--sp-2); font-family: var(--font-display); }

/* --- Tables --- */
.table-scroll { overflow-x: auto; margin: 0 0 var(--sp-5); -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
table.data th, table.data td {
  text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th { background: var(--surface-2); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }

@media (max-width: 700px) {
  table.data, table.data thead, table.data tbody, table.data tr, table.data th, table.data td { display: block; }
  table.data thead { display: none; }
  table.data tr { border-bottom: 2px solid var(--line); padding: var(--sp-2) 0; }
  table.data td { border-bottom: 0; padding: var(--sp-2) var(--sp-3); }
  table.data td::before {
    content: attr(data-label); display: block;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-soft); font-weight: 700;
  }
}

/* --- Brand comparison rows (the full table lives on the hub pages) --- */
.brand-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-4); }
.brand-row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.brand-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.rank {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--hero-from); color: var(--rank-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.plate {
  min-width: 96px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center; padding: 0 var(--sp-2);
  font-weight: 800; font-size: 13px; text-align: center;
}
/* Logo plate. The operator's own background colour sits behind the mirrored
   mark, because most of these SVGs are white or single-colour and would be
   invisible on the card. Fixed height keeps every row on the same baseline
   whatever aspect ratio the operator ships. */
.plate-logo { padding: 0 var(--sp-2); overflow: hidden; }
.plate-logo img {
  display: block; width: auto; height: 26px; max-width: 100px;
  object-fit: contain; object-position: center;
}

.bonus-block {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
}
.bonus-label {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600;
}
.bonus-headline {
  margin: 2px 0 0; font-size: 18px; font-weight: 800; line-height: 1.25;
}
.bonus-detail { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
/* Offer published in a currency the account is not held in. Sits under the
   headline, quieter than the offer but louder than a footnote, because it
   changes what the reader should expect at the cashier. */
.bonus-caveat {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 2px solid var(--line);
  padding-left: 8px;
}
.brand-terms {
  margin: var(--sp-3) 0 0; font-size: 12px; line-height: 1.45;
  color: var(--ink-soft);
}
.brand-cta-code { font-weight: 700; color: var(--ink); white-space: nowrap; }

.brand-head .name { font-weight: 700; font-size: 16px; }
.brand-head .kind { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 500; }

.brand-body { padding: var(--sp-4); display: grid; gap: var(--sp-4); }
.brand-facts { display: grid; gap: var(--sp-3); margin: 0; }
.brand-facts dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); font-weight: 700;
}
.brand-facts dd { margin: 2px 0 0; font-size: 15px; }

.promo-code-cell {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--surface-2); border: 1px dashed var(--accent);
  color: var(--ink); border-radius: var(--radius-sm); padding: 0 var(--sp-3);
}
.brand-cta { display: grid; gap: var(--sp-2); align-content: start; }
.brand-cta .small { font-size: 12px; color: var(--ink-soft); }
.status-line { font-size: 13px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: var(--sp-3); }

@media (min-width: 760px) {
  .brand-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas: "head head" "body cta";
  }
  .brand-head { grid-area: head; }
  .brand-body { grid-area: body; border-right: 1px solid var(--line); }
  /* Top aligned, not centred. The left column now carries the bonus block and
     runs tall, so centring the exit column left the code box floating in the
     middle of the card with the offer it belongs to sitting above it. */
  .brand-cta-wrap {
    grid-area: cta; padding: var(--sp-4); display: grid;
    align-content: start; gap: var(--sp-3);
  }
}
.brand-cta-wrap { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }

/* --- Homepage: published order preview (a teaser, never the full table) --- */
.picks { margin: var(--sp-7) 0; }
.picks-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.picks-head h2 { margin: 0 0 var(--sp-2); }
.picks-all { font-weight: 700; min-height: var(--tap); display: inline-flex; align-items: center; }
.pick-list { list-style: none; margin: var(--sp-4) 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.pick-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3);
  grid-template-columns: 28px minmax(0, 1fr); align-items: center;
}
.pick-main { min-width: 0; }
.pick-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; display: block; }
.pick-meta { display: block; font-size: 13px; color: var(--ink-soft); }
.pick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); grid-column: 1 / -1; }
.pick-actions .btn { flex: 1 1 auto; min-width: 140px; font-size: 15px; padding: 0 var(--sp-4); }
.picks-foot { font-size: 14px; color: var(--ink-soft); margin: 0; }
@media (min-width: 760px) {
  .pick-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .pick-actions { grid-column: auto; justify-content: flex-end; }
  .pick-actions .btn { flex: 0 0 auto; }
}

/* --- Card grids --- */
.cards { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 var(--sp-2); font-size: 18px; }
.card p { margin: 0 0 var(--sp-3); font-size: 15px; }
.card a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* --- Resident and diaspora pathways --- */
.pathways, .catgrid, .sportcards, .payrail, .matcher, .tools, .authorcards { margin: var(--sp-7) 0; }
.path-grid, .cat-grid, .sport-grid, .rail-grid, .tool-grid, .author-grid {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-4);
}
.path-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow);
}
.path-where {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-2);
}
.path-card h3 { margin: 0 0 var(--sp-2); font-size: 18px; }
.path-card p { margin: 0 0 var(--sp-3); font-size: 15px; }
.path-warn { color: var(--ink-soft); font-size: 13px; }
.path-link { font-weight: 700; display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 700px) { .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Category discovery grid --- */
@media (min-width: 560px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-tile { display: block; }
.cat-tile a {
  display: grid; gap: var(--sp-1); min-height: var(--tap);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); text-decoration: none;
  color: var(--ink); height: 100%;
}
.cat-tile a:hover { border-color: var(--accent); background: var(--surface-3); }
.cat-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.cat-body { font-size: 14px; color: var(--ink-soft); }

/* --- Sport imagery cards --- */
@media (min-width: 760px) { .sport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sport-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.sport-figure { margin: 0; }
.sport-figure .editorial-img { border-radius: 0; aspect-ratio: 4 / 3; }
.sport-figure figcaption { padding: var(--sp-2) var(--sp-4) 0; }
.sport-copy { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.sport-copy h3 { margin: 0; font-size: 19px; }
.sport-copy p { margin: 0; font-size: 15px; }

/* --- Payment rail strip --- */
@media (min-width: 560px) { .rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); display: grid; gap: var(--sp-1);
}
.rail-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.rail-kind {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-ink); background: var(--accent); justify-self: start;
  padding: 2px var(--sp-2); border-radius: var(--radius-pill); font-weight: 700;
}
.rail-note { font-size: 14px; color: var(--ink-soft); }
.rail-caveat { margin: var(--sp-4) 0 var(--sp-2); font-size: 14px; color: var(--ink-soft); max-width: 72ch; }
.rail-foot { margin: 0; font-weight: 700; }
.rail-foot a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --- Matcher --- */
.matcher {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5);
}
.match-form { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 0; }
.match-q { border: 0; padding: 0; margin: 0; }
.match-q legend {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  padding: 0; margin-bottom: var(--sp-2);
}
.opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.opt {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); font-size: 15px; cursor: pointer;
}
.opt input { width: 18px; height: 18px; accent-color: var(--hero-to); }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.match-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.match-result {
  margin: var(--sp-4) 0 0; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: var(--sp-4);
}
.match-result p { margin: 0 0 var(--sp-2); }
.match-result p:last-child { margin-bottom: 0; }
.match-result ul { margin: 0 0 var(--sp-2); padding-left: 1.25em; }
.match-result[data-empty="true"] { color: var(--ink-soft); }
.match-caveat { font-size: 13px; color: var(--ink-soft); margin: var(--sp-3) 0 0; }

/* --- Educational tools --- */
@media (min-width: 800px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); display: grid; gap: var(--sp-3);
  align-content: start;
}
.tool h3 { margin: 0; font-size: 18px; }
.tool-note { margin: 0; font-size: 14px; color: var(--ink-soft); }
.tool-fields { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.tool-fields label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.tool-fields input, .tool-fields select {
  min-height: var(--tap); width: 100%; font: inherit; font-size: 16px;
  padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
}
.tool-out {
  display: block; font-size: 15px; background: var(--surface-2);
  border-radius: var(--radius-sm); padding: var(--sp-3); color: var(--ink-soft);
}
.tool-out strong { color: var(--ink); }
.tool-caveat { font-size: 14px; color: var(--ink-soft); margin: var(--sp-4) 0 0; max-width: 72ch; }

/* --- Author surfaces --- */
@media (min-width: 700px) { .author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.author-tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4);
  align-items: start;
}
.author-portrait {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2); border: 2px solid var(--accent);
}
.author-portrait.is-pending { display: grid; place-items: center; font-size: 11px; color: var(--ink-soft); text-align: center; }
.author-tile h3 { margin: 0 0 var(--sp-1); font-size: 18px; }
.author-role { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: var(--sp-2); }
.author-tile p { margin: 0 0 var(--sp-2); font-size: 15px; }
.author-tile a { font-weight: 700; display: inline-flex; align-items: center; min-height: var(--tap); }

.author-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-5);
}
.author-card .role { font-weight: 700; color: var(--ink); }
.author-card .where { font-size: 14px; color: var(--ink-soft); }

/* --- FAQ --- */
.faq { margin: var(--sp-7) 0 0; }
.faq h2 { margin-top: 0; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3); background: var(--surface);
}
.faq summary {
  cursor: pointer; font-weight: 700; padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap); display: flex; align-items: center;
}
.faq .answer { padding: 0 var(--sp-4) var(--sp-4); margin: 0; color: var(--ink); }

/* --- Footer --- */
.site-foot { background: var(--foot-bg); color: var(--foot-ink); padding: var(--sp-7) 0 var(--sp-6); margin-top: var(--sp-8); }
.foot-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-foot h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 var(--sp-2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot a { color: var(--foot-ink); text-decoration: none; display: flex; align-items: center; min-height: var(--tap); font-size: 15px; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: var(--sp-5); padding-top: var(--sp-4); font-size: 13px; }
.foot-legal p { margin: 0 0 var(--sp-2); }
.foot-legal a { display: inline; color: var(--accent); text-decoration: underline; min-height: 0; }

/* --- 404 --- */
.err { text-align: left; padding: var(--sp-8) 0; }
.err h1 { font-size: clamp(28px, 7vw, 44px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --- Desktop composition ---------------------------------------------------
   Below 1100px the site is a single readable column, which is right on a phone
   and on a small laptop. Above it, the viewport is wide enough that a single
   column leaves a large dead gutter on the right, so the layout changes shape
   rather than simply getting more margin. Nothing here changes the mobile
   layout, the 44px minimum target, or the single column reading order below the
   breakpoint. */
@media (min-width: 1100px) {
  :root { --wrap: 1320px; }
  body { font-size: 17px; }

  .hero { padding: var(--sp-7) 0 var(--sp-8); }
  .hero h1 { font-size: clamp(40px, 3.3vw, 54px); }
  .hero .lede { font-size: 20px; max-width: 48ch; }

  /* Single column hero: title and lede left, supporting meta on a right rail.
     The split hero keeps its own two column grid and is excluded. */
  .hero:not(.hero--split) .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    column-gap: var(--sp-8);
    grid-template-areas:
      "title meta"
      "lede  actions"
      "lede  chips";
    align-items: start;
  }
  .hero:not(.hero--split) h1 { grid-area: title; margin-bottom: var(--sp-4); }
  .hero:not(.hero--split) .lede { grid-area: lede; }
  .hero:not(.hero--split) .byline { grid-area: meta; margin: 0 0 var(--sp-2); font-size: 14px; }
  .hero:not(.hero--split) .trustline { grid-area: meta; align-self: end; }
  .hero:not(.hero--split) .cta-row { grid-area: actions; margin-bottom: var(--sp-4); }
  .hero:not(.hero--split) .chips { grid-area: chips; align-self: start; }

  /* Editorial two column reading layout. Asides float into a right rail so
     body copy keeps a comfortable measure and the right half of a wide viewport
     carries supporting material instead of sitting empty. Floats rather than a
     grid on purpose: with a grid, a tall aside sets the height of its row and
     punches a visible hole in the text column beside it. Wide surfaces clear
     the rail and use the full width. */
  .prose { max-width: none; }
  .prose::after { content: ""; display: block; clear: both; }
  .prose--text { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .prose > p,
  .prose > ul:not(.brand-list),
  .prose > ol:not(.brand-list),
  .prose > h2,
  .prose > h3 { max-width: 74ch; }
  .prose > .callout,
  .prose > .note,
  .prose > .sources,
  .prose > .rg-card {
    float: right; clear: right;
    width: 360px; max-width: 40%;
    margin: 0 0 var(--sp-5) var(--sp-8);
  }
  .prose > .brand-list,
  .prose > .cards,
  .prose > .table-scroll,
  .prose > .picks,
  .prose > .pathways,
  .prose > .catgrid,
  .prose > .sportcards,
  .prose > .payrail,
  .prose > .matcher,
  .prose > .tools,
  .prose > .authorcards { clear: both; max-width: none; }
  .prose > h2#brand-list,
  .prose > div#brand-list { clear: both; }

  /* Two balanced columns of brand cards on the hub pages. */
  .brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .brand-row { grid-template-columns: minmax(0, 1fr) 244px; }

  .plate { min-width: 120px; height: 48px; font-size: 15px; }
  .plate-logo img { height: 30px; max-width: 116px; }
  .bonus-headline { font-size: 20px; }
  .bonus-detail { font-size: 15px; }
  .brand-terms { font-size: 13px; }
  .rank { width: 32px; height: 32px; font-size: 14px; }
  .brand-head { padding: var(--sp-5); gap: var(--sp-4); }
  .brand-head .name { font-size: 19px; }
  .brand-head .kind { font-size: 14px; }
  .brand-body { padding: var(--sp-5); }
  .brand-facts dd { font-size: 16px; }
  .brand-facts dt { font-size: 12px; }
  .status-line { font-size: 14px; }
  .brand-cta-wrap { padding: var(--sp-5); }
  .brand-cta .small { font-size: 13px; }
  .promo-code-cell { font-size: 16px; }
  .card p { font-size: 16px; }
  .cards { gap: var(--sp-5); }
  table.data { font-size: 16px; }
}

/* Very wide screens: hold the measure, do not keep stretching the cards. */
@media (min-width: 1600px) {
  :root { --wrap: 1440px; }
}

/* Review and bonus links inside a brand row. They let a reader reach the full
   assessment or the offer conditions without exiting to the operator first. */
.row-links{display:flex;gap:.9rem;margin:0 0 .55rem}
.row-links a{font-size:.82rem;font-weight:600;color:var(--link);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--link) 40%,transparent);padding-bottom:.15rem}
.row-links a:hover,.row-links a:focus-visible{border-bottom-color:var(--link)}