/* ==========================================================================
   Bangbet Kenya — bangbetkenya.org
   Single stylesheet for every page. No inline styles anywhere.
   Brand palette is locked: #01B200 (green) · #FFE60F (yellow) · #FFFFFF · #111111
   ========================================================================== */

/* ---------- Self-hosted fonts (subset: latin + latin-ext) ---------- */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-black-400-latin.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:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-black-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-400-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-500-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-600-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-700-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-800-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ---------- Design tokens ---------- */
:root{
  /* Locked brand colours */
  --green:#01B200;
  --yellow:#FFE60F;
  --white:#FFFFFF;
  --ink:#111111;

  /* Derived surfaces (oklch, same hue family as the brand green) */
  --bg:oklch(0.975 0.007 150);
  --surface:oklch(1 0 0);
  --surface-2:oklch(0.955 0.010 150);
  --border:oklch(0.895 0.012 150);
  --border-strong:oklch(0.82 0.016 150);

  /* Text */
  --fg:var(--ink);
  --fg-soft:oklch(0.38 0.012 150);
  --muted:oklch(0.495 0.014 150);
  --on-dark:oklch(0.97 0.004 150);
  --on-dark-muted:oklch(0.80 0.008 150);

  /* Interaction states */
  --green-hover:oklch(0.60 0.19 148);
  --green-tint:oklch(0.955 0.045 150);
  --green-deep:oklch(0.42 0.14 148);
  --yellow-hover:oklch(0.90 0.15 100);
  --yellow-nav-hover:oklch(0.855 0.165 100);
  --yellow-edge:oklch(0.80 0.155 100);
  --dark-hover:oklch(0.28 0.008 150);
  --dark-2:oklch(0.21 0.008 150);
  --dark-3:oklch(0.165 0.008 150);

  /* Type */
  --font-display:'Archivo Black','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Space + shape */
  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px oklch(0.2 0.02 150 / .06), 0 1px 1px oklch(0.2 0.02 150 / .04);
  --shadow-md:0 8px 22px -12px oklch(0.2 0.03 150 / .28);
  --shadow-lg:0 22px 50px -28px oklch(0.2 0.04 150 / .38);
  --header-h:68px;
  --wrap:1200px;
  --wrap-text:820px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%}
picture{display:block}
img{height:auto;display:block}
a{color:var(--green-deep);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 8px}
li:last-child{margin-bottom:0}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--ink)}
hr{border:0;border-top:1px solid var(--border);margin:36px 0}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.14;margin:0 0 16px;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:clamp(1.95rem,1.25rem + 2.4vw,3.1rem)}
h2{font-size:clamp(1.42rem,1.1rem + 1.25vw,2.05rem);margin-top:0}
h3{font-family:var(--font-body);font-weight:800;font-size:clamp(1.08rem,1rem + .42vw,1.32rem);letter-spacing:-.005em;line-height:1.3}
h4{font-family:var(--font-body);font-weight:800;font-size:1rem;line-height:1.35}
.lead{font-size:clamp(1.03rem,.98rem + .3vw,1.18rem);line-height:1.68;color:var(--fg-soft)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-deep);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--green);border-radius:2px}
.eyebrow-on-dark{color:var(--yellow)}
.eyebrow-on-dark::before{background:var(--yellow)}
.mark{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 .06em}
.text-muted{color:var(--muted)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.container-narrow{max-width:var(--wrap-text)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.stack-sm>*+*{margin-top:12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 24px;border-radius:999px;
  font-family:var(--font-body);font-weight:700;font-size:.975rem;line-height:1.2;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
  white-space:normal;text-align:center;
}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px}
.btn-primary{background:var(--green);color:var(--ink);border-color:var(--green)}
.btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--ink)}
.btn-primary:active{background:var(--green-hover);border-color:var(--green-hover);transform:translateY(1px);box-shadow:inset 0 2px 5px oklch(0.2 0.05 150 / .3)}
.btn-accent{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn-accent:hover{background:var(--yellow-hover);border-color:var(--yellow-hover);color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--green-tint);border-color:var(--green);color:var(--ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink)}
.btn-on-dark{background:transparent;color:var(--white);border-color:oklch(0.42 0.01 150)}
.btn-on-dark:hover{background:var(--dark-2);border-color:var(--white);color:var(--white)}
.btn-lg{min-height:54px;padding:14px 30px;font-size:1.045rem}
.btn-sm{min-height:42px;padding:9px 18px;font-size:.9rem}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:999;background:var(--yellow);
  border-bottom:1px solid var(--yellow-edge);
}
.site-header.is-scrolled{box-shadow:0 10px 30px -18px oklch(0.34 0.09 100 / .55)}
.header-inner{
  display:flex;align-items:center;gap:22px;
  min-height:var(--header-h);padding:10px 20px;
  max-width:var(--wrap);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:132px;height:auto}
/* The logo carries brand green on a transparent ground: green on yellow is only
   2.25:1, so the mark keeps the white plate it already uses in the footer. */
.site-header .brand{
  background:var(--white);border-radius:10px;padding:6px 11px;
  box-shadow:0 1px 3px oklch(0.5 0.13 100 / .3);
}
.site-header .brand:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.brand-name{
  font-family:var(--font-display);color:var(--ink);font-size:1.06rem;letter-spacing:.01em;
}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.main-nav li{margin:0}
.main-nav a{
  display:block;padding:10px 13px;border-radius:9px;
  color:var(--ink);font-weight:700;font-size:.925rem;text-decoration:none;
}
.main-nav a:hover{background:var(--yellow-nav-hover);color:var(--ink);text-decoration:none}
.main-nav a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.main-nav a.is-active{background:var(--ink);color:var(--yellow)}
.main-nav a.is-active:hover{background:var(--dark-hover);color:var(--yellow)}
.header-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Secondary header action on the yellow bar: ink outline that inverts on hover. */
.header-cta .btn-on-dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.header-cta .btn-on-dark:hover{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.nav-toggle{
  display:none;width:46px;height:46px;margin-left:auto;
  background:transparent;border:2px solid var(--yellow-edge);border-radius:11px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.nav-toggle:hover{background:var(--yellow-nav-hover);border-color:var(--ink)}
.nav-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ---------- Live score strip (single decorative flourish) ---------- */
.score-strip{background:var(--ink);border-top:1px solid var(--dark-3);border-bottom:1px solid var(--dark-3)}
.score-strip-inner{display:flex;align-items:center;gap:16px;max-width:var(--wrap);margin:0 auto;padding:11px 20px}
.score-strip-label{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);
}
.score-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:scorePulse 1.9s ease-in-out infinite}
@keyframes scorePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.score-track{flex:1 1 auto;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.score-move{display:flex;gap:10px;width:max-content;animation:scoreScroll 46s linear infinite}
.score-track:hover .score-move,.score-move:focus-within{animation-play-state:paused}
@keyframes scoreScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.score-item{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--dark-2);border:1px solid var(--dark-3);border-radius:999px;
  padding:6px 14px;font-size:.83rem;color:var(--on-dark);white-space:nowrap;
}
.score-item b{font-weight:700;color:var(--white)}
.score-item .score-league{color:var(--on-dark-muted);font-size:.78rem}
@media (prefers-reduced-motion:reduce){
  .score-move{animation:none}
  .score-dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Hero: home (accented, with image) ---------- */
.hero-home{background:var(--ink);color:var(--on-dark);padding:clamp(36px,4.6vw,68px) 0 clamp(40px,5vw,72px)}
.hero-home-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,60px);align-items:center}
.hero-copy{min-width:0}
.hero-home h1{color:var(--white);margin-bottom:18px}
.hero-home h1 .mark{background:none;color:var(--green)}
.hero-home .lead{color:var(--on-dark-muted);max-width:56ch}
.hero-chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:26px 0 0;padding:0}
.hero-chips li{
  margin:0;display:inline-flex;align-items:center;gap:7px;
  background:var(--dark-2);border:1px solid var(--dark-3);border-radius:999px;
  padding:7px 14px;font-size:.83rem;font-weight:600;color:var(--on-dark);
}
.hero-chips .chip-check{color:var(--green);font-weight:800}
.hero-note{margin:18px 0 0;font-size:.875rem;color:var(--on-dark-muted)}
.hero-note a{color:var(--yellow);text-decoration:underline}
.hero-figure{margin:0;position:relative}
.hero-figure img{
  width:auto;height:auto;max-width:100%;max-height:520px;margin:0 auto;
  border-radius:var(--radius-lg);border:1px solid var(--dark-3);background:var(--dark-2);
}
.hero-badge{
  position:absolute;left:14px;bottom:14px;
  background:var(--yellow);color:var(--ink);font-weight:800;font-size:.8rem;
  border-radius:999px;padding:8px 16px;box-shadow:var(--shadow-md);
}
.hero-badge b{font-family:var(--font-display);font-weight:400}

/* ---------- Hero: inner pages (no image) ---------- */
.page-hero{background:var(--surface);border-bottom:1px solid var(--border);padding:clamp(26px,3.4vw,44px) 0 clamp(26px,3.4vw,40px)}
.page-hero h1{margin-bottom:14px;max-width:22ch}
.page-hero .lead{max-width:70ch}
.page-hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0 0;padding:0;list-style:none;font-size:.85rem;color:var(--muted)}
.page-hero-meta li{margin:0;display:inline-flex;align-items:center;gap:7px}
.page-hero-meta li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{background:var(--surface-2);border-bottom:1px solid var(--border)}
.breadcrumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0;padding:12px 0;font-size:.845rem;
}
.breadcrumbs li{margin:0;color:var(--muted)}
.breadcrumbs li+li::before{content:"-";margin-right:8px;color:var(--border-strong);font-weight:700}
.breadcrumbs a{color:var(--green-deep);font-weight:600}
.breadcrumbs [aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- Article body ---------- */
.article{padding:clamp(30px,3.8vw,52px) 0 clamp(36px,4vw,60px)}
.article > *{max-width:var(--wrap-text)}
.article h2{scroll-margin-top:calc(var(--header-h) + 18px);margin:clamp(30px,3.4vw,44px) 0 16px}
.article h2:first-of-type{margin-top:clamp(24px,2.8vw,34px)}
.article h3{scroll-margin-top:calc(var(--header-h) + 18px);margin:26px 0 12px}
.article h4{margin:22px 0 10px}
.article .wide{max-width:none}

/* ---------- Table of contents ---------- */
.toc{
  max-width:var(--wrap-text);margin:26px 0 30px;
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;
}
.toc summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:15px 18px;font-weight:800;font-size:.955rem;color:var(--ink);
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2.5px solid var(--green-deep);border-bottom:2.5px solid var(--green-deep);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.toc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc summary:hover{background:var(--green-tint)}
.toc summary:focus-visible{outline:3px solid var(--green-deep);outline-offset:-3px}
.toc summary .toc-tag{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);border-radius:5px;padding:3px 7px;
}
.toc-body{padding:0 18px 18px;border-top:1px solid var(--border)}
.toc-list{columns:2;column-gap:26px;list-style:none;margin:16px 0 0;padding:0}
.toc-list li{margin:0 0 9px;break-inside:avoid}
.toc-list a{
  display:inline-flex;gap:9px;align-items:baseline;
  font-size:.925rem;font-weight:600;color:var(--fg-soft);
}
.toc-list a::before{content:"§";color:var(--green);font-weight:800;font-size:.8rem}
.toc-list a:hover{color:var(--green-deep)}

/* ---------- Media figures ---------- */
.figure{margin:0 0 26px}
.figure img{
  width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface-2);
}
.figure figcaption{margin-top:10px;font-size:.845rem;color:var(--muted)}
.figure-link{display:block;border-radius:var(--radius)}
.figure-link:hover img{border-color:var(--green)}
.figure-link:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px}
.figure-right{float:right;width:min(46%,380px);margin:6px 0 22px 28px}
.figure-wide img{aspect-ratio:auto}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);height:100%;
}
.card h3{margin-bottom:9px}
.card p:last-child{margin-bottom:0}
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  background:var(--green-tint);color:var(--green-deep);
  font-family:var(--font-display);font-size:1rem;
}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--green-deep)}
.card-link::after{content:"→";transition:transform .18s ease}
.card-link:hover::after{transform:translateX(3px)}
.card-flat{box-shadow:none;background:var(--surface-2)}
.card-accent{border-top:4px solid var(--green)}
.card-cta{background:var(--ink);border-color:var(--dark-3);color:var(--on-dark)}
.card-cta h3{color:var(--white)}
.card-cta p{color:var(--on-dark-muted)}

/* News cards */
.news-card{overflow:hidden;padding:0;display:flex;flex-direction:column}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border)}
.news-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.news-card-body h3{font-size:1.06rem}
.news-tag{
  align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-deep);background:var(--green-tint);border-radius:5px;padding:4px 8px;margin-bottom:11px;
}
.news-date{font-size:.8rem;color:var(--muted);margin-top:auto;padding-top:14px}

/* ---------- Lists ---------- */
.list-check{list-style:none;padding:0;margin:0 0 20px}
.list-check li{position:relative;padding-left:30px;margin-bottom:11px}
.list-check li::before{
  content:"";position:absolute;left:0;top:.52em;width:15px;height:8px;
  border-left:2.6px solid var(--green);border-bottom:2.6px solid var(--green);
  transform:rotate(-45deg);
}
.list-plain{list-style:none;padding:0}
.list-plain li{position:relative;padding-left:22px;margin-bottom:10px}
.list-plain li::before{content:"";position:absolute;left:2px;top:.66em;width:8px;height:2.5px;background:var(--green);border-radius:2px}
.list-number{counter-reset:step;list-style:none;padding:0;margin:0 0 22px}
.list-number li{position:relative;counter-increment:step;padding-left:48px;margin-bottom:16px}
.list-number li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--ink);
  font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;
}
.list-number h4{margin:4px 0 6px}
.list-number p:last-child{margin-bottom:0}

/* ---------- Tables ---------- */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm);margin:0 0 26px;
}
.table-scroll:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
caption{
  caption-side:top;text-align:left;padding:15px 18px 13px;
  font-size:.79rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--border);
}
th,td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
thead th{background:var(--surface-2);color:var(--ink);font-weight:800;font-size:.83rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--green-tint)}
td strong{font-weight:700}
.table-compact th,.table-compact td{padding:10px 14px}

/* Pros / cons */
.pros-cons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 26px}
.pros-cons>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px}
.pros-cons .pros,.pros-cons .cons{min-width:0}
.pros-cons h4{margin:0 0 12px;display:flex;align-items:center;gap:9px}
.pros-cons h4::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--green)}
.pros-cons .cons h4::before{background:var(--border-strong)}
.pros-cons ul{margin:0;padding-left:20px}
.pros-cons li{font-size:.94rem}

/* ---------- Callouts ---------- */
.callout{
  background:var(--green-tint);border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 26px;
}
.callout h3,.callout h4{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout-dark{background:var(--ink);border-color:var(--dark-3);border-left-color:var(--yellow);color:var(--on-dark)}
.callout-dark h3,.callout-dark h4{color:var(--white)}
.callout-dark p,.callout-dark li{color:var(--on-dark-muted)}
.callout-warn{background:var(--surface-2);border-left-color:var(--border-strong)}
.callout-lg{padding:26px 28px}

/* Key-fact (paybill / support number) */
.keyfact{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;
  background:var(--ink);border-radius:var(--radius);padding:22px 26px;margin:0 0 26px;color:var(--on-dark);
}
.keyfact-label{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--yellow);grid-column:1/-1}
.keyfact-value{font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);color:var(--white);line-height:1.1}
.keyfact-meta{font-size:.88rem;color:var(--on-dark-muted);margin:0}
.keyfact .btn{grid-column:1/-1;justify-self:start;margin-top:12px}

/* ---------- Score preview panel ---------- */
.preview-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.preview-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface-2);
}
.preview-head h4{margin:0}
.preview-tag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border-radius:5px;padding:4px 8px}
.preview-rows{list-style:none;margin:0;padding:0}
.preview-rows li{
  display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--border);margin:0;
}
.preview-rows li:last-child{border-bottom:0}
.preview-fixture{font-weight:700;color:var(--ink)}
.preview-league{grid-column:1;font-size:.8rem;color:var(--muted)}
.preview-time{grid-column:2;grid-row:1/3;font-size:.85rem;font-weight:700;color:var(--green-deep);white-space:nowrap}
.preview-foot{padding:13px 20px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--border);background:var(--surface-2)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--wrap-text);margin:0 0 8px}
.faq details{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:10px;overflow:hidden;
}
.faq details[open]{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;font-weight:700;font-size:1rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;margin-top:7px;width:9px;height:9px;flex:0 0 auto;
  border-right:2.5px solid var(--green-deep);border-bottom:2.5px solid var(--green-deep);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{background:var(--green-tint)}
.faq summary:focus-visible{outline:3px solid var(--green-deep);outline-offset:-3px}
.faq-answer{padding:8px 18px 18px;color:var(--fg-soft);font-size:.955rem}
.faq-answer p:last-child{margin-bottom:0}

/* ---------- Author block ---------- */
.author-block{
  max-width:var(--wrap-text);display:grid;grid-template-columns:auto 1fr;gap:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-sm);margin:0 0 34px;
}
.author-avatar{
  width:66px;height:66px;border-radius:50%;background:var(--ink);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.22rem;letter-spacing:.02em;
}
.author-info h3{margin:0 0 4px;font-size:1.06rem}
.author-role{font-size:.83rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin:0 0 10px}
.author-bio{font-size:.93rem;color:var(--fg-soft);margin:0}
.author-meta{margin:12px 0 0;font-size:.82rem;color:var(--muted)}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);border-top:2px solid var(--green);
  padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.sticky-cta .btn{flex:1 1 0;min-height:40px;padding:8px 8px}
.sticky-cta-label{
  flex:1 1 100%;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-dark-muted);margin:0 0 2px;text-align:center;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark-muted);padding:clamp(38px,4.4vw,60px) 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px 30px}
.footer-col h4{
  color:var(--white);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid #d9d9d9;
}
.footer-col p{font-size:.9rem;color:var(--on-dark-muted);margin-bottom:16px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:9px}
.footer-col a{color:var(--on-dark);font-size:.9rem;font-weight:500}
.footer-col a:hover{color:var(--yellow);text-decoration:none}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-brand img{width:150px;height:auto;background:var(--white);border-radius:8px;padding:7px 10px}
.footer-trust{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.footer-trust li{margin:0}
.trust-seal{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:88px;min-height:60px;padding:9px 11px;
  background:var(--dark-2);border:1px solid var(--dark-3);border-radius:11px;
  text-decoration:none;text-align:center;
}
.trust-seal:hover{border-color:var(--green);text-decoration:none}
.trust-seal b{display:block;font-size:.78rem;font-weight:800;color:var(--white);line-height:1.2}
.trust-seal span{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.footer-payments{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 18px}
.footer-payments li{margin:0}
.payment-badge{
  display:inline-flex;align-items:center;min-height:36px;padding:7px 14px;
  background:var(--dark-2);border:1px solid var(--dark-3);border-radius:8px;
  font-size:.83rem;font-weight:700;color:var(--on-dark);
}
.footer-contact{list-style:none;padding:0;margin:0}
.footer-contact li{display:flex;gap:10px;font-size:.9rem;margin-bottom:10px}
.footer-contact .label{color:var(--on-dark-muted);min-width:74px;flex:0 0 auto}
.footer-contact a{color:var(--white)}
.footer-bottom{
  margin-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--dark-3);
  padding:20px 0 26px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0}
.footer-legal li{margin:0}
.footer-legal a{font-size:.83rem;color:var(--on-dark-muted)}
.footer-legal a:hover{color:var(--yellow)}
.footer-copy{font-size:.83rem;color:var(--on-dark-muted);margin:0}
.age-sign{display:inline-flex;align-items:center;gap:10px}
.age-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--yellow);color:var(--ink);
  font-family:var(--font-display);font-size:.98rem;line-height:1;
}
.age-text{font-size:.8rem;color:var(--on-dark-muted);max-width:22ch}
.footer-18{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Utility ---------- */
.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}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--yellow);padding:12px 18px;font-weight:800;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mb-lg{margin-bottom:28px}
.nowrap{white-space:nowrap}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:30px 24px}
  .footer-grid .footer-col:nth-child(4){grid-column:1/-1}
}
@media (max-width:960px){
  :root{--header-h:64px}
  .nav-toggle{display:flex}
  .main-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--yellow);border-bottom:1px solid var(--yellow-edge);
    box-shadow:0 24px 40px -24px oklch(0.34 0.09 100 / .55);
    display:none;padding:10px 12px 18px;margin:0;
  }
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a{padding:10px 14px;font-size:1rem;border-radius:10px}
  .header-inner{position:relative;flex-wrap:wrap;gap:12px}
  .header-cta{display:none}
  .hero-home-grid{grid-template-columns:1fr}
  .hero-figure{max-width:420px;margin:0 auto}
  .split{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc-list{columns:1}
  .figure-right{float:none;width:100%;margin:0 0 22px}
  .sticky-cta{display:flex;flex-wrap:wrap}
  .site-footer{padding-bottom:84px}
  .score-strip-label span{display:none}
}
@media (max-width:720px){
  body{font-size:.985rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .keyfact{grid-template-columns:1fr}
  .keyfact .btn{justify-self:stretch}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .author-block{grid-template-columns:1fr}
  .article h2{margin-top:32px}
  .score-strip-inner{padding:9px 16px;gap:10px}
}
@media (max-width:430px){
  .container{padding:0 16px}
  .header-inner{padding:10px 16px}
  .brand img{width:112px}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .hero-chips li{font-size:.78rem}
}


.payments-wrap {
  margin: 30px 0 30px;
}
.payments-wrap h4 {
  color: #fff;
  margin: 0 0 18px;
}
.payments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
}
.payment-item img {
  display: block;
  box-shadow: none;
  margin: 0 !important;
  border-radius: 0;
  border: none;
  max-width: 70px;
  max-height: 30px;
}
.footer-icons {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  gap: 10px;
}
.footer-icons .pay-icon {
  display: flex;
  align-items: center;
}
.footer-icons .pay-icon span {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  font-size: 12px;
  border-radius: 100%;
  border: 1px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-icons .pay-icon img {
  filter: brightness(100);
}
.main-title {
  display: flex;
  align-items: center;
}

.main-title .__right {
  margin-left: 60px;
  flex: 0 0 240px;
}
@media (max-width:800px) {
  .payments-grid {
    gap: 16px;
  }
  .payment-item img {
    max-width: 65px;
    max-height: 30px;
  }

  .table-wrap {
    overflow-x: scroll;
  }

      .main-title .__right {
    margin-left: 20px;
    flex: 0 0 220px;
  }
}
@media (max-width:639.98px) {
      .main-title {
    flex-direction: column;
  }

  .main-title .__right {
    margin-left: 0;
    flex: inherit;
  }
  .main-title .__right img {
    width: 300px !important;
  }
}