/* Self-hosted Inter and Inter Tight, latin subset. Previously these came
   from fonts.googleapis.com, which put a render blocking request to a
   third party in front of first paint on every page. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Inter-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Inter-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Inter-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/InterTight-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/InterTight-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* 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;
  /* The light mode warn brown is unreadable on a dark surface, so dark mode
     gets a lighter amber that still clears 4.5:1 against --surface-2. */
  --warn: #e2a94f;
  --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;
    --warn: #e2a94f;
    --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;
}
@media (max-width: 640px) {
  /* This strip sat above the logo and took 110px of an 844px fold before the
     reader saw anything. The wording stays, the vertical cost does not. */
  .agebar { font-size: 12px; line-height: 1.35; padding: 6px 0; }
  .agebar a { padding: 6px 0; min-height: 32px; }
}
.agebar strong { color: var(--hero-ink); }
.agebar a {
  color: var(--accent);
  display: inline-block; padding: 10px 0; min-height: 36px;
  line-height: 16px; text-underline-offset: 3px;
}

/* --- 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; }

/* At 320px the wordmark plus the Dark and Menu buttons overflowed the
   viewport by 19px, which put the whole header into horizontal scroll on
   the narrowest phones still in use. The theme button keeps its icon and
   its 44px target and drops only the word, which the icon already says. */
@media (max-width: 359px){
  .theme-toggle .theme-label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .theme-toggle { padding: 0; min-width: var(--tap); }
  .brandmark { font-size: 17px; }
}

#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);
}

/* Breadcrumbs, compact hero and the competition switcher.
   The odds pages had a full marketing hero on top of a data page, so a phone
   reader scrolled past a lede, a trustline, two buttons and three chips before
   reaching a single price. On a page whose entire value is the number, that is
   the wrong order. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: 13px; margin: 0 0 var(--sp-3);
}
.crumbs a { color: var(--hero-ink-soft); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--hero-ink); font-weight: 600; }
.crumb-sep { color: var(--hero-ink-soft); opacity: .55; }

.hero--compact { padding: var(--sp-4) 0 var(--sp-5); }
.hero--compact h1 {
  font-size: clamp(24px, 5.4vw, 34px); margin: 0 0 var(--sp-2);
}
.hero--compact .lede { font-size: 15px; margin: 0 0 var(--sp-2); max-width: 58ch; }
.hero--compact .byline { margin: 0; }

/* The switcher sits tight under the hero and scrolls sideways on a phone
   rather than wrapping to three rows and pushing the table down again. */
.lnav {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.lnav-track {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  max-width: var(--wrap, 1080px); margin: 0 auto;
  padding: 0 var(--sp-4); -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
/* A tab half off the edge reads as a rendering fault rather than as an
   invitation to scroll, so each one snaps to a whole tab. */
.lnav-item { scroll-snap-align: start; }
/* Trailing breathing room so the last competition is not flush to the edge
   when the reader scrolls to the end. */
.lnav-track::after {
  content: ""; flex: 0 0 var(--sp-2);
}
/* The fade only appears while there is something past the edge to reach. */
.lnav { position: sticky; }
.lnav-wrap { position: relative; }
.lnav-wrap::after, .lnav-wrap::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 32px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 1;
}
.lnav-wrap::after {
  right: 0; background: linear-gradient(to right, transparent, var(--surface-2));
}
/* Landing on Serie A scrolls the strip so the active tab is centred, which
   means the first competitions are now clipped on the left. Without a signal
   there, a half cut word reads as a broken layout. */
.lnav-wrap::before {
  left: 0; background: linear-gradient(to left, transparent, var(--surface-2));
}
.lnav-wrap.has-more::after { opacity: 1; }
.lnav-wrap.has-prev::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lnav-wrap::after { transition: none; }
}
.lnav-track::-webkit-scrollbar { display: none; }
.lnav-item {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 44px; padding: 0 var(--sp-3); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.lnav-item:hover, .lnav-item:focus-visible { color: var(--ink); }
.lnav-item.is-here { color: var(--ink); border-bottom-color: var(--accent); }

/* When the switcher is present it is the top of the content, so the page does
   not need its usual opening gutter as well. Every pixel here is a pixel the
   first price is pushed below the fold. */
.page:has(.lnav) { padding-top: 0; }
.lnav + .fixtures, .lnav + .oddscompare { margin-top: var(--sp-5); }
.lnav + .fixtures h2, .lnav + .oddscompare h2 { margin-top: 0; }
.hero--compact { padding-bottom: var(--sp-4); }
.fixtures .section-intro, .oddscompare .section-intro { margin-bottom: 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 {
  /* Deliberately not pill shaped. A rounded pill in a hero reads as a button,
     and these are facts, not controls. */
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20);
  border-left: 3px solid var(--accent);
  color: var(--hero-ink); font-size: 13px; font-weight: 600;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  cursor: default;
}

/* --- 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;
  }
}

/* --- Fixtures and prices ---
   One price per outcome, the best we hold, with the book named under it. The
   whole cell is the tap target and it clears the 44px floor on a phone. On
   mobile the row becomes a grid so the three prices sit side by side instead
   of stacking into a five block tower. */
.fixtures, .oddscompare { margin: 0 0 var(--sp-6); }
.fixtures .section-intro, .oddscompare .section-intro { margin-bottom: var(--sp-4); }
.fixtures h2, .oddscompare h2 { margin-bottom: var(--sp-3); }
.fixtures .table-scroll, .oddscompare .table-scroll { margin-bottom: var(--sp-3); }
.fixtures-table .fx-match { font-weight: 700; display: block; line-height: 1.35; }
.fixtures-table td, .fixtures-table th { vertical-align: middle; }
.fx-price {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 4px;
  min-height: var(--tap); text-decoration: none; color: var(--link);
}
.fx-price strong { font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fx-book { font-size: 12px; color: var(--ink-soft); }
.fx-price:hover strong, .fx-price:focus-visible strong { text-decoration: underline; }

/* Logos are mirrored locally and vary from 1.3:1 to 4.6:1, so the box is fixed
   and the mark is contained inside it. Without that a wide wordmark would set
   the column width and a square one would tower over the price beside it. */
.fx-chip {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); padding: 3px 6px; line-height: 0;
}
.fx-chip--md { padding: 4px 8px; }
.fx-logo {
  display: block; height: 14px; width: auto; max-width: 54px;
  object-fit: contain;
}
.fx-logo--md { height: 18px; max-width: 72px; }

.fixtures-stamp {
  font-size: 13px; color: var(--ink-soft); line-height: 1.55;
  margin: 0 0 var(--sp-5); max-width: 62ch;
}

/* --- Book by book comparison ---
   One block per fixture, one row per operator, best price in each column
   marked. This is the section that answers "is a second account worth it". */
.fx-compare { margin: 0 0 var(--sp-5); }
.fx-compare-title {
  font-size: 17px; margin: 0 0 var(--sp-2); line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
}
.fx-compare-when { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.compare-table th[scope="row"] { padding-block: var(--sp-2); }
.fx-bookcell { display: inline-flex; align-items: center; min-height: var(--tap); }
.compare-table .fx-cell { font-variant-numeric: tabular-nums; font-size: 16px; }
.compare-table .is-best {
  font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.fx-spread {
  font-size: 13px; color: var(--ink-soft); line-height: 1.55;
  margin: var(--sp-2) 0 0; max-width: 62ch;
}

@media (max-width: 700px) {
  /* Beats the generic table.data stacking rule, which is more specific than a
     bare .fixtures-table tr and would otherwise stack five blocks per match. */
  table.data.fixtures-table tr {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-1) var(--sp-2); padding: var(--sp-3) var(--sp-1);
    align-items: end;
  }
  table.data.fixtures-table td { padding: 0 var(--sp-2); }
  table.data.fixtures-table td:nth-child(1),
  table.data.fixtures-table td:nth-child(2) { grid-column: 1 / -1; }
  table.data.fixtures-table td:nth-child(1) { margin-bottom: var(--sp-1); }
  table.data.fixtures-table td:nth-child(1)::before { display: none; }
  table.data.fixtures-table td:nth-child(2) { margin-bottom: var(--sp-2); }
  table.data.fixtures-table td:nth-child(2)::before { display: inline; margin-right: 6px; }
  table.data.fixtures-table .fx-match { font-size: 16px; }
  table.data.fixtures-table td:nth-child(n+3) { padding-top: var(--sp-1); }

  /* The comparison table gets the same grid treatment as the fixtures table.
     Left to the generic stacking rule each operator became a four block tower,
     so three books across four fixtures filled roughly six phone screens and
     the comparison stopped being a comparison. Now the logo leads the row and
     the three prices sit side by side under it, which is the shape the reader
     is actually trying to scan down. */
  table.data.compare-table tr {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px var(--sp-2); padding: var(--sp-2) var(--sp-1);
    align-items: end;
  }
  table.data.compare-table th[scope="row"] {
    grid-column: 1 / -1; padding: 0 var(--sp-2) var(--sp-1);
  }
  table.data.compare-table th[scope="row"]::before { display: none; }
  table.data.compare-table td { padding: 0 var(--sp-2); }
  table.data.compare-table td::before {
    display: block; font-size: 11px; letter-spacing: .02em;
    color: var(--ink-soft); margin-bottom: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  table.data.compare-table .is-best { border-radius: var(--radius-sm); }
  /* Still the 36px floor. Compacting the row must not shrink the only
     tap target that opens the operator. */
  .fx-bookcell { min-height: 36px; align-items: center; }
  .fx-compare-title { font-size: 16px; }
}

/* --- 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;flex-direction:column;align-items:flex-start;gap:.4rem;margin:0 0 .7rem}
.row-links a{font-size:.82rem;font-weight:600;color:var(--link);text-decoration:none;white-space:nowrap;
  /* These are the only route from a brand row into its review and promo page,
     so they are real navigation, not incidental text links. They measured 24px
     tall on a 390 wide viewport. */
  display:inline-flex;align-items:center;min-height:36px;
  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)}

/* --- Key boxes ---------------------------------------------------------------
   A titled callout used to lift the answer, the risk or the next step out of
   the body copy. Three tones share one shape so the pattern is learnable at a
   glance. Tone is carried by the left rule and the label colour only, never by
   colour alone: the label text always names what kind of box it is, so the
   distinction survives greyscale and screen readers. */
.keybox {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.keybox-label {
  margin: 0 0 var(--sp-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.keybox-title { margin: 0 0 var(--sp-2); font-size: 18px; line-height: 1.3;
  font-weight: 700; color: var(--ink); font-family: var(--font-display);
  letter-spacing: -0.01em; }
.keybox p:last-child { margin-bottom: 0; }
.keybox ul { margin: var(--sp-2) 0 0; padding-left: 1.15em; }
.keybox li { margin-bottom: var(--sp-2); }
.keybox li:last-child { margin-bottom: 0; }
.keybox-more { margin: var(--sp-3) 0 0; font-weight: 600; }

.keybox-answer { border-left-color: var(--accent); }
.keybox-watch  { border-left-color: var(--warn); }
.keybox-watch .keybox-label { color: var(--warn); }
.keybox-check  { border-left-color: var(--ink-soft); }

/* --- Hero offer card ------------------------------------------------------
   Review and promo pages are commercial pages, and both used to put their
   first tappable exit about three screens down: 3297px on a review and 1991px
   on a promo page, measured at 390x844. The offer now sits in the hero.

   The card is an opaque surface on top of the blue hero, so it has to reset
   the foreground the hero sets. Everything here comes from the data layer. No
   licence badge and no verified date are rendered, because the brand records
   carry neither. */
.hero-offer{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  color: var(--ink); box-shadow: 0 10px 30px rgba(8, 20, 52, 0.24);
}
.hero-offer-head{ display: flex; align-items: center; gap: var(--sp-3); }
.hero-offer-name{ font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.hero-offer-label{
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero-offer-headline{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 5.4vw, 28px); line-height: 1.12;
  margin: calc(var(--sp-3) * -1) 0 0; color: var(--ink); letter-spacing: -0.02em;
}
.hero-offer-code{
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  padding: var(--sp-3); background: var(--surface-2);
}
.hero-offer-code-label{
  flex: 1 0 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero-offer-code-value{
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink);
}
.copy-code{
  flex: 0 0 auto; min-height: var(--tap); min-width: 68px;
  padding: 0 var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.copy-code:hover{ border-color: var(--accent); }
.copy-code[data-copied="1"]{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hero-offer .btn{ width: 100%; }
.hero-offer-facts{ margin: 0; padding: 0; }
.hero-offer-facts div{
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 13px; border-top: 1px solid var(--line); padding-top: var(--sp-3);
}
.hero-offer-facts dt{ color: var(--ink-soft); }
.hero-offer-facts dd{ margin: 0; font-weight: 600; text-align: right; color: var(--ink); }
.hero-offer .small{ font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.hero-offer-terms{ margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.hero-offer-terms a{ color: var(--link); }

/* The hero stacks on mobile, so the card follows the byline and the exit lands
   inside the first screen. The chips are the least useful thing in that space,
   so they give way to the offer rather than pushing it under the fold. */
@media (max-width: 899px){
  .hero--offer .hero-grid{ display: flex; flex-direction: column; gap: var(--sp-4); }
  .hero--offer .hero-copy .chips{ display: none; }
  .hero--offer .hero-copy .cta-row{ margin-bottom: var(--sp-3); }
}