/*
Theme Name: Euteller kasinot
Theme URI: https://euteller-kasinot.io/
Author: Rantakaari Media Oy
Description: Euteller-navy ylapalkki ja nostoalue, vaaleat kortit ja yksi vihrea toimintovari. Sisaltaa Kasino-sisaltotyypin, kasinot-shortcoden, tekijakortin, osiobannerit ja luottamusmerkit.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: euteller-kasinot
*/

:root {
  /* Euteller's own identity: a navy wordmark with a blue/green/red swoosh.
     Navy carries the header and hero, green is the single action colour, and
     red is reserved for the one caveat this page keeps having to make - that
     the money usually does not come back the same way it went in. */
 --ink-900: #11235c;
 --ink-800: #1b3478;
 --ink-700: #16294f;
 --ink-600: #30436f;

 --act-500: #2e8f4e;
 --act-600: #256f3d;
 --act-400: #3fae62;
 --act-ink: #ffffff;

  /* the swoosh red - warnings and the "deposit only" mark, never a button */
 --flag: #cf2e2e;
 --flag-dim: #a62525;

 --link: #1b4bb0;
 --link-hover: #2e63d4;

 --bg: #fdfdfc;
 --bg-alt: #ffffff;
 --bg-tint: #eef1f7;
 --card: #ffffff;
 --card-alt: #f2f4f8;
 --cream: #f2f4f8;
 --sand: #d7dce8;
 --line: #e1e5ee;
 --line-strong: #c6cddd;

 --tx: #080724;
 --tx-soft: #45445f;
 --tx-faint: #6c6c8a;
 --on-dark: #f2f1fa;
 --on-dark-soft: #a6a4c8;

 --pos: #2d9f80;
 --pos-bg: #e6f4ef;
 --neg: #cc4b37;
 --neg-bg: #fbecea;
 --warn: #9a6b00;
 --warn-bg: #fff6e0;
 --star: #e7b400;

 --w-text: 800px;
 --w-wide: 1120px;
 --w-jump: 1340px;
 --r: 6px;
 --r-lg: 10px;
 --shadow-1: 0 1px 3px rgba(8, 7, 36, .07);
 --shadow-2: 0 6px 20px rgba(8, 7, 36, .12);
 --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.72;
 -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--w-text); margin-inline: auto; padding-inline: 20px; }
.wrap-wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: 20px; }
main section { scroll-margin-top: calc(var(--header-h) + 14px); }

.entry-content > * { max-width: var(--w-text); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--w-wide); }
.entry-content > .alignfull { max-width: none; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-weight: 800; line-height: 1.22; letter-spacing: -.015em;
  color: var(--ink-900); margin: 0 0 .55em; text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-top: 0; letter-spacing: -.026em; }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.85rem); margin-top: 2.1em; }
h3 { font-size: clamp(1.12rem, 2.2vw, 1.24rem); margin-top: 1.75em; margin-bottom: .4em; }
h4 { font-size: 1.04rem; margin-top: 1.4em; margin-bottom: .3em; }
h2 + h3, h3 + h4 { margin-top: .9em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }

strong { font-weight: 700; color: var(--ink-800); }

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

.lead { font-size: 1.1rem; }
.small { font-size: .9rem; color: var(--tx-faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* ---------------------------------------------------------------- header */

.sitehead {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--ink-900);
}
.admin-bar .sitehead { top: 32px; }
@media (max-width: 782px) { .admin-bar .sitehead { top: 46px; } }

/* Same shell width as the article below, so the logo lines up with the content. */
.sitehead .bar {
  max-width: var(--w-jump); margin-inline: auto; padding-inline: 20px;
  height: var(--header-h); display: flex; align-items: center; gap: 18px;
}
/* flex: none - otherwise the nav squeezes the wordmark and distorts it. */
.sitehead .brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; flex: none; }
.sitehead .brand img { height: 28px; width: auto; max-width: none; display: block; }

.nav-links ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: var(--act-400); }

/* The toggle only exists below the breakpoint where the menu row fits. */
.nav-toggle { display: none; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; }
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after  { transform: translateY(6px); }

@media (max-width: 1200px) {
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; position: relative;
    flex: none; width: 42px; height: 42px; margin-right: -8px;
    background: transparent; border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r); color: #fff; cursor: pointer; order: 3;
  }
  .nav-toggle:hover { border-color: rgba(255, 255, 255, .45); }
  .nav-toggle:focus-visible { outline: 2px solid var(--act-400); outline-offset: 2px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: rotate(-45deg); }

  /* Panel drops out of the header bar rather than pushing it taller, so the
     sticky header keeps its fixed height and nothing below it shifts. */
  .nav-links {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    display: none; background: var(--ink-800);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 14px 30px rgba(8, 7, 36, .3);
  }
  .nav-open .nav-links { display: block; }
  .nav-links ul {
    display: block; max-width: var(--w-jump); margin-inline: auto; padding: 6px 20px 14px;
  }
  .nav-links li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
  .nav-links a { display: block; padding: 13px 0; font-size: .88rem; }
}

/* On a phone the header CTA and the sticky dockbar say the same thing, and the
   two of them plus the toggle do not fit on one line. The dockbar wins: it is
   on screen the whole way down the page. */
/* .sitehead qualifier on purpose: .btn sets display later in this file at the
   same specificity and would otherwise win. */
/* The CTA is the only thing left in the header, so it stays at every width.
   It was hidden below 560px back when it shared the bar with the menu
   toggle and the wordmark and the three would not fit. */
@media (max-width: 420px) { .nav-cta { padding: 9px 13px; font-size: .78rem; } }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-weight: 800; font-size: .97rem; line-height: 1;
  padding: 14px 24px; border-radius: var(--r); border: 0;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .12s ease, transform .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-cta { background: var(--act-500); color: var(--act-ink); box-shadow: var(--shadow-1); }
.btn-cta:hover { background: var(--act-600); color: #fff; }

.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.entry-content .btn-ghost { color: var(--ink-800); border-color: var(--line-strong); }
.entry-content .btn-ghost:hover { border-color: var(--ink-800); background: var(--bg-tint); }

.btn-sm { padding: 10px 16px; font-size: .87rem; }
.btn-block { display: flex; width: 100%; }
.nav-cta { padding: 10px 18px; font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---------------------------------------------------------------- dark head band */

.pagehead {
  background: var(--ink-800); color: #fff;
  padding: 4px 0 38px;
  background-image: radial-gradient(1100px 380px at 82% -12%, rgba(229, 99, 11, .16), transparent 62%);
}
.pagehead h1 { color: #fff; margin-bottom: .45em; }
.pagehead > .wrap > p,
.pagehead .lead { color: rgba(255, 255, 255, .88); }
.pagehead a { color: #fff; }
/* The global `strong` colour is navy, which is the pagehead's own background -
   bold inside the dark head band would otherwise be invisible. */
.pagehead strong,
.pagehead b { color: inherit; }
.pagehead a:hover { color: var(--act-400); }

/* On the front page the band sits above the contents-rail shell, so it has to
   take the shell's geometry - otherwise the H1, byline and intro are centred on
   the viewport while the article text below starts somewhere else entirely.
   These two rules mirror .article-shell and .entry-content > * exactly. */
.home .pagehead > .wrap { max-width: var(--w-jump); padding-inline: 20px; }
.home .pagehead > .wrap > * { max-width: var(--w-text); margin-inline: auto; }

.crumbs { font-size: .83rem; color: rgba(255, 255, 255, .6); padding: 22px 0 14px; }
.crumbs a { color: rgba(255, 255, 255, .6); font-weight: 500; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span.sep { margin: 0 7px; opacity: .55; }

/* byline card */
.byline {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  background: var(--ink-900); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg); padding: 14px 22px; margin: 0 0 24px;
}
.by-item { display: flex; align-items: center; gap: 10px; }
.by-item img {
  width: 38px; height: 38px; border-radius: 50%; display: block; flex: none;
  background: var(--ink-700);
}
/* label and value sit side by side, so the whole card reads as one line */
.by-txt { display: flex; flex-direction: row; align-items: baseline; gap: 6px; line-height: 1.35; }
.by-txt b { color: #fff; font-size: .82rem; font-weight: 700; }
.by-txt a { color: rgba(255, 255, 255, .82); font-size: .82rem; font-weight: 500; text-decoration: underline; }
.by-txt a:hover { color: var(--act-400); }
.by-txt time { color: rgba(255, 255, 255, .82); font-size: .82rem; }
.by-date { margin-left: auto; }
@media (max-width: 720px) {
  .byline { gap: 14px 22px; padding: 14px 16px; }
  .by-date { margin-left: 0; }
}

/* keyfacts bullets inside the band */
.keyfacts { margin: 22px 0 0; }
.keyfacts-head { font-weight: 800; color: #fff; margin: 0 0 .5em; }
.keyfacts ul { list-style: none; padding: 0; margin: 0; }
.keyfacts li {
  position: relative; padding-left: 20px; margin-bottom: .45em;
  color: rgba(255, 255, 255, .88); font-size: .97rem;
}
.keyfacts li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--act-500);
}
.keyfacts strong { color: #fff; }

.lead-buttons { display: flex; flex-wrap: wrap; gap: 11px; margin: 26px 0 0; }

/* ---------------------------------------------------------------- toplist */

.toplist { display: flex; flex-direction: column; gap: 16px; margin: 30px 0 12px; }

.cmp-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px 22px 30px; display: grid; gap: 20px;
  grid-template-columns: minmax(130px, .95fr) minmax(150px, 1.05fr) minmax(170px, 1.15fr) minmax(158px, .85fr);
  align-items: center; position: relative; box-shadow: var(--shadow-1);
}
.cmp-row:hover { box-shadow: var(--shadow-2); }
.cmp-row.is-top { border-color: var(--act-500); }

/* the rank badge hangs off the top-left corner, as in the reference */
.cmp-rank {
  position: absolute; top: -12px; left: -12px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ink-800); color: #fff;
  display: grid; place-items: center; font-size: .95rem; font-weight: 800;
  box-shadow: var(--shadow-1); z-index: 2;
}
.cmp-row.is-top .cmp-rank { background: var(--act-500); }

.cmp-ribbon {
  position: absolute; top: -11px; right: 22px; background: var(--act-500); color: #fff;
  font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}

.cmp-brand { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cmp-mark {
  height: 62px; border-radius: 10px; background: var(--ink-900);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px;
}
.cmp-mark img { max-height: 48px; width: auto; }
.cmp-mark.is-empty {
  background: var(--bg-tint); border: 1px dashed var(--line-strong);
  color: var(--tx-faint); font-size: .74rem; font-weight: 600; text-align: center; padding: 8px;
}
.cmp-title { font-weight: 800; color: var(--ink-900); font-size: 1.14rem; line-height: 1.2; }
.cmp-score { font-size: .82rem; color: var(--tx-faint); display: flex; flex-direction: column; gap: 1px; }
.cmp-score b { color: var(--ink-900); font-size: .86rem; }
.cmp-stars { color: var(--star); letter-spacing: 2px; font-size: .95rem; }

.cmp-specs { margin: 0; font-size: .85rem; }
.cmp-specs div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.cmp-specs div:last-child { border-bottom: 0; }
.cmp-specs dt { color: var(--tx-faint); }
.cmp-specs dd { margin: 0; font-weight: 700; color: var(--ink-800); text-align: right; }

.cmp-wins { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.cmp-wins li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: .45em; line-height: 1.4; }
.cmp-wins li::before {
  content: "✓"; flex: none; color: var(--pos); font-weight: 800;
  font-size: .9rem; margin-top: 1px;
}

.cmp-go { display: flex; flex-direction: column; gap: 8px; }
.cmp-go .cmp-fine { font-size: .68rem; color: var(--tx-faint); text-align: center; line-height: 1.35; }

@media (max-width: 1000px) {
  .cmp-row { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr); row-gap: 18px; }
  .cmp-wins { grid-column: 1 / -1; }
  .cmp-go { grid-column: 1 / -1; }
  .cmp-ribbon { right: 16px; }
}
@media (max-width: 620px) {
  .cmp-row { grid-template-columns: 1fr; padding: 24px 18px 20px; }
  .cmp-rank { left: 14px; }
}

.slot-empty {
  border: 2px dashed var(--act-500); background: #fff6ee;
  border-radius: var(--r-lg); padding: 26px 22px; text-align: center; margin: 26px 0;
}
.slot-empty .flag {
  display: inline-block; background: var(--act-500); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; margin-bottom: 10px;
}
.slot-empty p { margin: 0; color: var(--ink-800); font-weight: 600; font-size: .93rem; }
.slot-empty code { background: rgba(13, 28, 52, .08); padding: 1px 5px; border-radius: 3px; font-size: .88em; }

/* ---------------------------------------------------------------- picks */

.picks { margin: 26px auto 0; }
.picks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .picks-grid { grid-template-columns: 1fr; } }
.picks-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 18px; text-align: center; display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--shadow-1);
}
.picks-card.is-top { border-color: var(--act-500); border-width: 2px; }
.picks-flag {
  align-self: center; background: var(--bg-tint); color: var(--ink-800); font-size: .68rem;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.picks-card.is-top .picks-flag { background: var(--act-500); color: #fff; }
.picks-logo { height: 54px; border-radius: 10px; background: var(--ink-900); display: flex; align-items: center; justify-content: center; padding: 6px; }
.picks-logo img { max-height: 42px; width: auto; }
.picks-logo.is-empty { background: var(--bg-tint); border: 1px dashed var(--line-strong); color: var(--tx-faint); font-size: .78rem; font-weight: 600; }
.picks-offer { font-weight: 800; color: var(--ink-900); font-size: 1.02rem; line-height: 1.35; }
.picks-meta { font-size: .8rem; color: var(--tx-faint); margin-top: -5px; }

/* ---------------------------------------------------------------- content blocks */

.callout {
  background: var(--ink-800); color: #fff; border-radius: var(--r-lg);
  padding: 24px 26px; margin: 2.2em auto;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.callout h3 { margin: 0 0 .25em; font-size: 1.14rem; color: #fff; }
/* The global `strong` colour is navy, and this box's background IS that navy,
   so without this the bolded lead-in of every callout renders invisible. The
   pagehead, keyfacts and howbox carry the same override for the same reason. */
.callout strong,
.callout b { color: #fff; }
.callout p { color: rgba(255, 255, 255, .82); margin: 0; font-size: .94rem; max-width: 50ch; }
.callout .btn { flex: none; }

.jump, .toc-inline {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 28px auto; box-shadow: var(--shadow-1);
}
.jump h2 { margin: 0 0 .6em; font-size: 1.02rem; }
.jump ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 28px; font-size: .9rem; }
.jump li { margin-bottom: .3em; break-inside: avoid; }
.jump a { color: var(--tx-soft); font-weight: 500; text-decoration: none; }
.jump a:hover { color: var(--link-hover); text-decoration: underline; }
@media (max-width: 640px) { .jump ol { columns: 1; } }

.note {
  background: var(--bg-alt); border: 1px solid var(--line); border-left: 4px solid var(--ink-700);
  border-radius: var(--r); padding: 17px 22px; margin: 1.7em auto; box-shadow: var(--shadow-1);
}
.note.warn { background: var(--warn-bg); border-color: #f0e0bb; border-left-color: #d9a520; }
.note.warn strong { color: var(--warn); }
.note p:last-child { margin-bottom: 0; }
.note h3, .note h4 { margin-top: 0; }

.checklist {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 1.8em auto; box-shadow: var(--shadow-1);
}
.checklist ul { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: .5em; }
.checklist li::before {
  content: "✓"; flex: none; color: #fff; background: var(--pos);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; margin-top: 3px;
}

figure { margin: 1.9em auto; }
figure img, figure svg { border-radius: var(--r-lg); display: block; width: 100%; }
figcaption { font-size: .84rem; color: var(--tx-faint); margin-top: .6em; text-align: center; }

.table-wrap {
  overflow-x: auto; margin: 1.7em auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
/* Six of these tables are wider than a phone, and a table that scrolls with no
   sign that it scrolls just reads as a cut-off table. Two background layers do
   it without JS: a solid patch pinned to the right edge of the *content*
   (attachment: local, so it scrolls in from off-screen) sitting over a shadow
   pinned to the *box*. Scrolled to the end, the patch covers the shadow; before
   that, the shadow shows and says there is more to the right. */
@media (max-width: 720px) {
  .table-wrap {
    background-image:
      linear-gradient(to right, var(--bg-alt), var(--bg-alt)),
      linear-gradient(to left, rgba(8, 7, 36, .16), rgba(8, 7, 36, 0));
    background-position: right center, right center;
    background-size: 30px 100%, 26px 100%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: local, scroll;
  }
}
table { width: 100%; border-collapse: collapse; font-size: .91rem; }
caption { caption-side: bottom; padding: 10px 14px; text-align: left; }
th, td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--ink-800); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .01em; }
tbody th { font-weight: 700; color: var(--ink-800); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--bg-tint); }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.8em auto; }
@media (max-width: 680px) { .proscons { grid-template-columns: 1fr; } }
.proscons > div { border-radius: var(--r-lg); padding: 18px 22px; border: 1px solid var(--line); }
.proscons .pro { background: var(--pos-bg); border-color: #c3e4d1; }
.proscons .con { background: var(--neg-bg); border-color: #f2cbc7; }
.proscons h3 { margin-top: 0; font-size: 1.04rem; }
.proscons .pro h3 { color: var(--pos); }
.proscons .con h3 { color: var(--neg); }
.proscons ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.proscons li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: .45em; }
.proscons .pro li::before { content: "+"; color: var(--pos); font-weight: 800; flex: none; }
.proscons .con li::before { content: "-"; color: var(--neg); font-weight: 800; flex: none; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.8em auto; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 0 50px; margin-bottom: 1.5em; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  border-radius: 50%; background: var(--act-500); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.steps h3 { margin-top: 0; margin-bottom: .3em; }

.bio {
  display: flex; gap: 17px; align-items: flex-start; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin: 1.4em auto;
  box-shadow: var(--shadow-1);
}
.bio img { width: 68px; height: 68px; border-radius: 50%; flex: none; background: var(--ink-800); }
.bio h3 { margin: 0 0 .15em; font-size: 1.08rem; }
.bio .role { color: var(--act-600); font-weight: 700; font-size: .85rem; margin-bottom: .55em; }
.bio p { margin: 0 0 .5em; font-size: .93rem; color: var(--tx-soft); }
@media (max-width: 560px) { .bio { flex-direction: column; } }

.howbox {
  background: var(--ink-800); color: rgba(255, 255, 255, .86); border-radius: var(--r-lg);
  padding: 22px 26px; margin: 1.8em auto;
}
.howbox h3 { margin-top: 0; color: #fff; }
.howbox a { color: #fff; }
.howbox strong { color: #fff; }

.faq { margin: 1.6em auto; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 22px; box-shadow: var(--shadow-1); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 16px 40px 16px 0; font-weight: 700; color: var(--ink-900);
  position: relative; list-style: none; font-size: 1rem; line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--act-500); border-bottom: 2px solid var(--act-500);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 18px; color: var(--tx-soft); font-size: .95rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- sticky mobile CTA */

.dockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink-900); border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.dockbar .txt { color: #fff; font-size: .8rem; line-height: 1.3; min-width: 0; }
.dockbar .txt b { display: block; font-size: .9rem; }
.dockbar .txt span { color: var(--on-dark-soft); }
.dockbar .btn { flex: none; margin-left: auto; }
@media (max-width: 1000px) { .dockbar { display: flex; } body { padding-bottom: 66px; } }

/* ---------------------------------------------------------------- inner pages */

.legal h2 { font-size: 1.32rem; margin-top: 2em; padding-top: .7em; border-top: 1px solid var(--line); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-size: 1.06rem; }

.entry-content { padding-top: 34px; padding-bottom: 8px; }

/* ---------------------------------------------------------------- contents rail */

.article-shell { width: 100%; max-width: var(--w-jump); margin-inline: auto; padding-inline: 20px; }
.toc-rail { display: none; }

/* The narrow-screen stand-in for the rail: same list, collapsed by default so
   thirty-odd entries do not push the article a screen and a half down. */
.toc-drop {
  margin: 0 0 2em; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.toc-drop summary {
  display: flex; align-items: center; gap: .6em; padding: 14px 16px;
  font-weight: 800; font-size: .95rem; color: var(--ink-900); cursor: pointer;
  list-style: none;
}
.toc-drop summary::-webkit-details-marker { display: none; }
.toc-drop summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--tx-faint); border-bottom: 2px solid var(--tx-faint);
  transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
}
.toc-drop[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-drop summary:focus-visible { outline: 2px solid var(--act-500); outline-offset: -2px; }
.toc-drop-n { font-weight: 500; font-size: .82rem; color: var(--tx-faint); }
.toc-drop nav { padding: 0 16px 14px; }
.toc-drop ol {
  columns: 2; column-gap: 22px; list-style: none; margin: 0; padding: 0; font-size: .87rem;
}
.toc-drop li { margin: 0; break-inside: avoid; }
.toc-drop a { display: block; padding: 6px 0; color: var(--tx-soft); font-weight: 600; text-decoration: none; }
.toc-drop a:hover { color: var(--link-hover); }
@media (max-width: 520px) { .toc-drop ol { columns: 1; } }
@media (min-width: 1200px) { .toc-drop { display: none; } }
@media (prefers-reduced-motion: reduce) { .toc-drop summary::after { transition: none; } }

@media (min-width: 1200px) {
  .article-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 48px; align-items: start;
  }
  .article-shell > .entry-content { min-width: 0; }
  .article-shell > .entry-content > * { margin-inline: 0; }
  .toc-rail { position: sticky; top: calc(var(--header-h) + 34px); display: block; }
  .toc-inline { display: none; }

  /* Above 1200px the article column is left-aligned in the grid, so the band
     content has to be too. */
  .home .pagehead > .wrap > * { margin-inline: 0; }
}

.toc-rail nav {
  border-left: 2px solid var(--line-strong); padding: 2px 0 2px 16px;
  max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain;
}
.toc-rail h2 { margin: 0 0 .7em; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-faint); }
.toc-rail ol { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.toc-rail li { margin-bottom: .1em; }
.toc-rail a { display: block; padding: 4px 0; color: var(--tx-faint); font-weight: 500; text-decoration: none; }
.toc-rail a:hover { color: var(--link-hover); }
.toc-rail a.is-active { color: var(--ink-900); font-weight: 800; }

/* ---------------------------------------------------------------- sources + changelog */

.sources { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; margin: 2em auto; box-shadow: var(--shadow-1); }
.sources h2, .sources h3 { margin-top: 0; }
.sources ol, .sources ul { margin: 0; padding-left: 1.2em; font-size: .91rem; }
.sources li { margin-bottom: .4em; }
.sources .src-note { font-size: .83rem; color: var(--tx-faint); margin: .9em 0 0; }

.changelog { list-style: none; margin: 1.1em 0 0; padding: 0; font-size: .89rem; }
.changelog li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.changelog li:last-child { border-bottom: 0; }
.changelog time { flex: none; width: 78px; color: var(--tx-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--ink-900); color: var(--on-dark-soft); font-size: .88rem; padding: 40px 0 24px; margin-top: 56px; }
.foot a { color: var(--on-dark-soft); font-weight: 500; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.sitefoot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px 24px; }
.foot h3 { color: #fff; font-size: .92rem; margin: 0 0 .8em; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .42em; }
.sitefoot-brand img { height: 24px; margin-bottom: 14px; }
.foot .addr { font-style: normal; line-height: 1.7; }

.marks {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch;
  margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .13);
}
.mark {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px; padding: 10px 14px; color: var(--on-dark);
  font-size: .78rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
a.mark:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.mark svg, .mark img { flex: none; display: block; }
.mark b { display: block; color: #fff; font-weight: 700; }
.mark span { display: block; color: var(--on-dark-soft); font-size: .7rem; font-weight: 500; }
/* `.mark .mark-18`, not `.mark-18`: the card's own `.mark span` rule is
   (0,1,1) against a bare class's (0,1,0) and was winning on display, colour,
   size and weight. display:block made place-items:center inert, which is what
   pushed "18+" out of the ring. Geometry matches the rest of the network:
   34px across at 11px/800 leaves the glyphs room the old 28px did not. */
.mark .mark-18 {
  inline-size: 34px; block-size: 34px; border-radius: 50%; border: 2px solid var(--act-400);
  color: var(--act-400); font-weight: 800; font-size: 11px; line-height: 1;
  letter-spacing: -.01em; display: inline-grid; place-items: center; flex: none;
}
@media (max-width: 560px) { .mark { flex: 1 1 100%; } }

.sitefoot-base {
  border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 26px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.sitefoot-resp { display: flex; align-items: center; gap: 11px; }

/* ---------------------------------------------------------------- utils */

.visually-hidden, .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt0 { margin-top: 0; }
.alignwide { max-width: var(--w-wide); }

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


/* ---------------------------------------------------------------- telegram link */
/* Colour-agnostic on purpose: this same rule ships on footers with different
   backgrounds, so it borrows the surrounding text colour rather than naming one. */
.sitefoot-tg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid currentColor; color: inherit;
  font-size: .88rem; font-weight: 700; line-height: 1;
  text-decoration: none; opacity: .82;
  transition: opacity .15s ease, background-color .15s ease;
}
.sitefoot-tg svg { flex: none; }
.sitefoot-tg:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.sitefoot-tg:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sitefoot-tg { transition: none; } }


/* ------------------------------------------------------ hero: toplist on the dark field */
/* The whole point of this layout: cool indigo behind warm cards, so each row
   reads as an object lit from inside rather than as more page. */
.pagehead-hero { padding-bottom: 46px; }
.pagehead-hero .lead-buttons { margin-bottom: 4px; }

.pagehead-list {
  margin-top: 34px;
  /* Same shell geometry as .article-shell so the toplist lines up with the H1
     above it and the body text below it, instead of floating in its own column. */
  max-width: var(--w-jump);
  margin-inline: auto;
  padding-inline: 20px;
}
.pagehead-list > section { margin: 0; }
.pagehead-list h2 {
  color: #fff; margin: 0 0 .35em; font-size: clamp(1.4rem, 3vw, 1.75rem);
}
.pagehead-note { color: rgba(255, 255, 255, .8); font-size: .95rem; max-width: 74ch; margin: 0; }
.pagehead-fine { color: rgba(255, 255, 255, .55); font-size: .78rem; margin: 14px 0 0; max-width: 84ch; }
.pagehead-fine a { color: rgba(255, 255, 255, .8); }
.pagehead-fine a:hover { color: #fff; }
.pagehead-list .toplist { margin-top: 20px; }

/* A slot placeholder shown on the dark field needs light text, not the body colour. */
.pagehead-list .slot-empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); }
.pagehead-list .slot-empty p { color: rgba(255, 255, 255, .85); }

@media (max-width: 680px) {
  .pagehead-hero { padding-bottom: 32px; }
  .pagehead-list { margin-top: 26px; }
}

/* ---------------------------------------------------------------- toplist card */
/* Re-skinned to the card anatomy the client picked out: a warm cream card sitting
   on the dark indigo field, a solid brand-colour panel doing the identification,
   data chunked into small white chips, and secondary facts demoted to a hairline
   strip. Class names stay .tl-* so the shared casino data works unchanged. */
.toplist, .ranklist, .cmp-list, .caslist { display: flex; flex-direction: column; gap: 20px; margin: 26px 0 8px; }

.tl-card {
 --tl-accent: var(--act-500);
 --tl-brand: var(--ink-700);
 --tl-surface: #ffffff;
 --tl-ink: var(--tx, #080724);
  display: grid; grid-template-columns: 186px minmax(0, 1fr) 190px;
  gap: 0; align-items: stretch; position: relative; overflow: hidden;
  background: var(--cream, #f1edeb); border: 0;
  /* The card sets its own text colour on purpose. It is rendered both on the
     dark hero band and in the light article body, and without this it inherits
     white from the hero - which put white text on a near-white card for every
     child that does not set a colour of its own (.tl-why, the perk bullets).
     .tl-brand and .tl-name below are dark-panelled and stay white explicitly. */
  color: var(--tl-ink);
  border-radius: var(--r-lg, 10px); box-shadow: var(--shadow-1);
}
.tl-card:hover { box-shadow: var(--shadow-2); }
.tl-card.is-top { outline: 2px solid var(--tl-accent); outline-offset: -2px; }

/* brand panel - a slab of the casino's own colour, logo reversed out of it */
.tl-brand {
  background: var(--tl-brand); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; padding: 26px 16px; min-width: 0;
  position: relative;
}
.tl-rank {
  position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff;
  font-weight: 800; font-size: .82rem;
}
.tl-card.is-top .tl-rank { background: var(--tl-accent); }
.tl-ribbon {
  position: absolute; top: 10px; right: 10px; background: #ffffff; color: var(--ink-900);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
}
.tl-logo { display: grid; place-items: center; width: 100%; }
.tl-logo img { max-height: 44px; max-width: 128px; width: auto; }
.tl-logo.is-empty { color: #fff; font-size: .95rem; font-weight: 800; text-align: center; }
.tl-name { color: #fff; font-weight: 800; font-size: 1rem; text-align: center; }
.tl-score { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255, 255, 255, .72); }
.tl-score b { color: #fff; font-size: .9rem; }
.tl-stars { color: var(--star); letter-spacing: .5px; }

/* middle - the reason anyone clicks, chunked into white chips */
.tl-mid { min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.tl-offers { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-offer {
  flex: 1 1 148px; min-width: 0; background: var(--tl-surface);
  border-radius: var(--r, 6px); padding: 9px 14px; text-align: center;
}
.tl-offer.is-alt { flex: 0 1 106px; }
.tl-olab { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-faint); }
.tl-oval { display: block; font-size: 1.22rem; font-weight: 800; color: var(--tl-ink); line-height: 1.15; margin-top: 2px; }

.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tl-chip { background: var(--tl-surface); border-radius: 5px; padding: 5px 10px; font-size: .74rem; color: var(--tx-soft); }
.tl-chip b { color: var(--tl-ink); font-weight: 700; }

.tl-lic { margin-top: 10px; font-size: .75rem; font-weight: 700; color: var(--pos); }
.tl-lic::before { content: "✓ "; }
.tl-lic.is-warn { color: var(--neg); }
.tl-lic.is-warn::before { content: "⚠ "; }

.tl-more { margin-top: 10px; }
.tl-more > summary { cursor: pointer; list-style: none; font-size: .77rem; font-weight: 700; color: var(--link); display: inline-flex; align-items: center; gap: 5px; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.tl-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.tl-more-in { padding-top: 10px; border-top: 1px solid var(--sand); margin-top: 8px; }
.tl-perks { list-style: none; margin: 0 0 8px; padding: 0; font-size: .83rem; }
.tl-perks li { position: relative; padding-left: 23px; margin-bottom: .3em; line-height: 1.45; }
.tl-perks li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--pos); font-weight: 800; background: var(--pos-bg); width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; }
.tl-terms { font-size: .71rem; color: var(--tx-faint); margin: 8px 0 0; line-height: 1.45; }

/* action column */
.tl-go { display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; padding: 22px 22px 22px 0; }
.tl-btn { font-size: 1rem; padding: 14px 12px; box-shadow: 0 4px 15px rgba(45, 159, 128, .35); }
.tl-micro { font-size: .68rem; color: var(--tx-faint); margin-top: 8px; line-height: 1.4; }
.tl-why { font-size: .75rem; font-weight: 700; color: var(--link); margin-top: 8px; }

@media (max-width: 1040px) {
  .tl-card { grid-template-columns: 160px minmax(0, 1fr); }
  .tl-go { grid-column: 1 / -1; padding: 0 22px 22px; }
  .tl-btn { padding: 15px 12px; }
}
@media (max-width: 680px) {
  .tl-card { grid-template-columns: 1fr; }
  .tl-brand { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 42px 18px 16px; }
  .tl-logo { width: auto; flex: none; }
  .tl-logo img { max-height: 34px; max-width: 96px; }
  .tl-name { text-align: left; }
  .tl-mid { padding: 18px; }
  .tl-go { padding: 0 18px 18px; }
  .tl-oval { font-size: 1.1rem; }
}

/* The card also has to survive inside a narrow reading column, not just a wide
   one, so it reflows on its own width rather than the viewport. The viewport
   queries above stay as the fallback for browsers without container queries. */
.toplist, .ranklist, .cmp-list, .caslist { container-type: inline-size; }
@container (max-width: 820px) {
  .tl-card { grid-template-columns: 160px minmax(0, 1fr); }
  .tl-go { grid-column: 1 / -1; padding: 0 22px 22px; }
  .tl-btn { padding: 15px 12px; }
}
@container (max-width: 620px) {
  .tl-card { grid-template-columns: 1fr; }
  .tl-brand { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 42px 18px 16px; }
  .tl-logo { width: auto; flex: none; }
  .tl-logo img { max-height: 34px; max-width: 96px; }
  .tl-name { text-align: left; }
  .tl-mid { padding: 18px; }
  .tl-go { padding: 0 18px 18px; }
  .tl-oval { font-size: 1.1rem; }
}

/* touch-targets: the logo and the small CTAs render 32-34px tall, which is under
   the comfortable thumb size. Only the hit area grows; the artwork is unchanged. */
@media (max-width: 860px) {
  .sitehead .brand,
    .btn-cta,
    .dockbar .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Section header image, sits directly under the H2 it belongs to. */
.section-banner { display: block; width: 100%; height: auto; margin: 4px 0 24px; border-radius: var(--r, 10px); }

/* --- 18+ age badge ------------------------------------------------------
   Drawn in CSS so it inherits the footer's text colour and needs no artwork. */
.age-badge {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: inherit;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	display: inline-grid;
	place-items: center;
	flex: none;
	opacity: .92;
	margin-right: 12px;
}

/* ------------------------------------------------- deposit step figures --- */
/* Five phone-shaped diagrams. Stacked vertically on a phone they would add
   roughly two thousand pixels to an already long page, so below 700px they
   become a snap-scrolling strip - the natural gesture for a sequence of
   screens, and it keeps each step's text beside its picture. */

.stepshots {
  list-style: none; margin: 1.7em 0 1.9em; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.stepshots li { margin: 0; min-width: 0; }
.stepshots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.stepshots .cap { margin: .75em 0 0; font-size: .92rem; line-height: 1.5; }
.stepshots .cap b { color: var(--tx); }

@media (max-width: 940px) { .stepshots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .stepshots {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* same two-layer trick as the tables: the shadow shows only while there
       is another card still off to the right */
    background-image:
      linear-gradient(to right, var(--bg), var(--bg)),
      linear-gradient(to left, rgba(17, 35, 92, .16), rgba(17, 35, 92, 0));
    background-position: right center, right center;
    background-size: 24px 100%, 22px 100%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: local, scroll;
  }
  .stepshots li { flex: 0 0 76%; scroll-snap-align: start; }
}

.stepnote { margin: -.6em 0 1.6em; font-size: .86rem; color: var(--tx-faint); }

/* wpautop leaves an empty paragraph after a block-level image or shortcode.
   They render at zero height but keep their bottom margin, which shows up as
   uneven spacing between sections. */
.entry-content p:empty { display: none; }

/* --------------------------------------------------- hero: mark on right --- */
/* The mark identifies the subject beside the heading instead of above the
   text, so the first paragraph stays above the fold. Below 900px it is
   dropped: on a phone that vertical space is worth more than the decoration. */

.pagehead-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px; align-items: start;
}
.pagehead-main { min-width: 0; }
.pagehead-mark { justify-self: end; padding-top: 6px; }
.pagehead-mark img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) { .pagehead-grid { grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; } }
@media (max-width: 900px) {
  .pagehead-grid { grid-template-columns: minmax(0, 1fr); }
  .pagehead-mark { display: none; }
}

/* ------------------------------------------------------ contrast fixes --- */

/* The hero band turns every link white (.pagehead a). The toplist card sits on
   that band but has a light background of its own, so its links were white on
   near-white. Buttons are excluded: they carry their own background. */
.pagehead .tl-card a:not(.btn),
.tl-card a:not(.btn) { color: var(--link); }
.pagehead .tl-card a:not(.btn):hover,
.tl-card a:not(.btn):hover { color: var(--link-hover); }

/* Links inside the navy callout inherited the navy link colour, which left
   them at 1.5:1 against the box. White + underline reads on the dark panel. */
.callout a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.callout a:hover { color: var(--mint, #a5e8cf); }

/* White on --act-500 measures 4.1:1, just under the 4.5 needed at this size.
   The darker step clears it without changing the button's role. */
.sitehead .nav-cta { background: var(--act-600); }
.sitehead .nav-cta:hover { background: var(--act-500); }

/* White on --act-500 measures 4.07:1 and the warn line 4.12:1, both just under
   the 4.5 WCAG AA needs at these sizes. One step darker on each clears it. */
.btn-cta { background: var(--act-600); }
.btn-cta:hover { background: var(--act-500); }
.tl-lic.is-warn { color: var(--flag-dim); }

/* Rank-1 badge: --act-500 gives white text only 4.07:1, below AA for this
   13px size. --act-600 is the same green already used on the buttons and
   reaches 6.14:1, so the badge stays on-palette and passes. */
.tl-card.is-top .tl-rank { background: var(--act-600); }