/*
 * casinofind.uk design system — 1:1 port of src/styles.css (React/Tailwind)
 * into plain CSS. Colour tokens keep the original oklch values, layered over
 * hex fallbacks for engines without oklch support.
 */

/* ----------------------------------------------------------------------
 * 1. Design tokens
 * ------------------------------------------------------------------- */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Global decoration dial: ink = burgundy on ivory/cream, gold = gold on burgundy. */
  --decor-opacity-ink: 0.075;
  --decor-opacity-gold: 0.045;

  /* Hex fallbacks. */
  --color-burgundy: #5E1A24;
  --color-burgundy-foreground: #EBD5C9;
  --color-ivory: #F7F1E5;
  --color-claret: #8C2332;
  --color-claret-dark: #6E1B27;
  --color-gold: #C9930A;
  --color-gold-foreground: #46360C;
  --color-club: #471520;
  --color-club-border: rgba(201, 147, 10, 0.35);
  --color-club-mark: #F1E4C0;
  --color-club-ivory: #F7F1E5;
  --color-club-rose: #CBA5A8;
  --color-club-gold: #E0B34A;
  --color-steel: #2B6CB0;
  --color-warn: #A85B12;
  --color-surface: #EFE9DA;
  --color-band-ivory: #FAF8F0;
  --color-band-cream: #F1EADA;
  --color-newsletter-cream: #F3EFE3;

  --background: #FBF9F4;
  --foreground: #322E2A;
  --card: #FFFFFF;
  --card-foreground: #322E2A;
  --primary: #8C2332;
  --primary-foreground: #F7F1E5;
  --secondary: #EFE9DA;
  --secondary-foreground: #5E1A24;
  --muted: #EFE9DA;
  --muted-foreground: #7D756B;
  --accent: #EFE9DA;
  --accent-foreground: #5E1A24;
  --destructive: #A85B12;
  --destructive-foreground: #F7F1E5;
  --border: #E7DFCE;
  --input: #E7DFCE;
  --ring: #8C2332;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);

  --shadow-card: 0 1px 2px rgba(94, 26, 36, 0.06);
  --shadow-lift: 0 8px 20px -10px rgba(94, 26, 36, 0.28);
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --color-burgundy: oklch(0.3313 0.0984 15.87);
    --color-burgundy-foreground: oklch(0.8849 0.0212 43.84);
    --color-ivory: oklch(0.9598 0.016 82.79);
    --color-claret: oklch(0.4297 0.1395 17.58);
    --color-claret-dark: oklch(0.3638 0.1157 15.63);
    --color-gold: oklch(0.697 0.1418 81.89);
    --color-gold-foreground: oklch(0.2961 0.0559 83.87);
    --color-club: oklch(0.2835 0.0817 15.38);
    --color-club-border: oklch(0.697 0.1418 81.89 / 35%);
    --color-club-mark: oklch(0.9275 0.0419 87.37);
    --color-club-ivory: oklch(0.9598 0.016 82.79);
    --color-club-rose: oklch(0.7622 0.0391 7.77);
    --color-club-gold: oklch(0.7882 0.1315 85.44);
    --color-steel: oklch(0.5241 0.1259 252.32);
    --color-warn: oklch(0.5553 0.1455 49);
    --color-surface: oklch(0.9352 0.0185 86.15);
    --color-band-ivory: oklch(0.9812 0.0067 96);
    --color-band-cream: oklch(0.9418 0.0201 84.59);
    --color-newsletter-cream: oklch(0.9495 0.0140 88.68);

    --background: oklch(0.9823 0.0069 88.64);
    --foreground: oklch(0.2244 0.0074 67.44);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.2244 0.0074 67.44);
    --primary: oklch(0.4297 0.1395 17.58);
    --primary-foreground: oklch(0.9598 0.016 82.79);
    --secondary: oklch(0.9352 0.0185 86.15);
    --secondary-foreground: oklch(0.3313 0.0984 15.87);
    --muted: oklch(0.9352 0.0185 86.15);
    --muted-foreground: oklch(0.5184 0.0172 70.7);
    --accent: oklch(0.9352 0.0185 86.15);
    --accent-foreground: oklch(0.3313 0.0984 15.87);
    --destructive: oklch(0.5553 0.1455 49);
    --destructive-foreground: oklch(0.9598 0.016 82.79);
    --border: oklch(0.9064 0.0195 80.11);
    --input: oklch(0.9064 0.0195 80.11);
    --ring: oklch(0.4297 0.1395 17.58);

    --shadow-card: 0 1px 2px oklch(0.3313 0.0984 15.87 / 6%);
    --shadow-lift: 0 8px 20px -10px oklch(0.3313 0.0984 15.87 / 28%);
  }
}

/* ----------------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--color-border);
}

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

/* --------------------------------------------------------------------
 * Global type scale (single source of truth — no template may deviate):
 *   H1  clamp(30px, 4vw, 40px)  Fraunces 600
 *   H2  24px   ·  H3 19px  ·  body 17px / 1.7
 *   Section padding 56px desktop / 36px mobile  ·  card padding 20px
 * ------------------------------------------------------------------ */
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
  line-height: 1.2;
}
h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 600; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
dl, dt, dd, figure { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; }

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

.container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ----------------------------------------------------------------------
 * 3. Utilities
 * ------------------------------------------------------------------- */
.heading-rule::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background-color: var(--color-gold);
}

.cfuk-section-head { margin-bottom: 1rem; }
.cfuk-section-head .eyebrow { margin-bottom: 0.25rem; }
.cfuk-section-head h2 { font-size: 24px; }
.section-gap > h2::after,
.faq-section > h2::after,
.related-list > h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background-color: var(--color-gold);
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.decor-ink { color: var(--color-burgundy); opacity: var(--decor-opacity-ink); pointer-events: none; }
.decor-gold { color: var(--color-gold); opacity: var(--decor-opacity-gold); pointer-events: none; }

.link-steel { color: var(--color-steel); text-decoration: underline; }
.link-steel:hover { text-decoration: none; }

.val-gold {
  border-radius: 4px;
  background: rgba(201, 147, 10, 0.25);
  padding: 0.1rem 0.375rem;
  font-weight: 600;
  color: var(--color-gold-foreground);
}

.muted { color: var(--muted-foreground); }

/* Tone-on-tone chrome texture: tiled gold line-art suits, chip and dice. */
.chrome-texture {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23E0B34A' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M26 12c0 0-8 7-8 11.5A4 4 0 0 0 25 26l-1 4h4l-1-4a4 4 0 0 0 7-2.5C34 19 26 12 26 12z'/%3E%3Ccircle cx='104' cy='24' r='12'/%3E%3Ccircle cx='104' cy='24' r='6.5'/%3E%3Cpath d='M92 24h5M111 24h5M104 12v5M104 31v5'/%3E%3Cpath d='M60 88 L72 102 L60 116 L48 102 Z'/%3E%3Crect x='112' y='94' width='24' height='24' rx='5'/%3E%3Ccircle cx='119' cy='101' r='1.8'/%3E%3Ccircle cx='129' cy='111' r='1.8'/%3E%3Ccircle cx='124' cy='106' r='1.8'/%3E%3Cpath d='M24 118c-4-2.6-7-5.6-7-8.6A3.6 3.6 0 0 1 24 106a3.6 3.6 0 0 1 7 3.4c0 3-3 6-7 8.6z'/%3E%3Ccircle cx='140' cy='56' r='3.2'/%3E%3Ccircle cx='134.2' cy='63' r='3.2'/%3E%3Ccircle cx='145.8' cy='63' r='3.2'/%3E%3Cpath d='M139 66l-1 6h4l-1-6'/%3E%3Cpath d='M76 40 L84 50 L76 60 L68 50 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
  opacity: var(--decor-opacity-gold);
  pointer-events: none;
}

/* Mobile ergonomics: 44px tap targets via padding only; 12px min font. */
@media (max-width: 767px) {
  button,
  [role="button"],
  summary,
  nav a,
  footer a,
  header a {
    min-height: 44px;
    padding-top: max(0.35rem, var(--tap-pad, 0.35rem));
    padding-bottom: max(0.35rem, var(--tap-pad, 0.35rem));
  }
  nav a,
  footer a,
  header a {
    display: inline-flex;
    align-items: center;
  }
}

/* ----------------------------------------------------------------------
 * 4. Header + mega menu
 * ------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-burgundy);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ivory);
  white-space: nowrap;
}
.site-logo .tld { color: var(--color-gold); }

.main-nav { margin-left: auto; display: none; }
.main-nav > ul { display: flex; align-items: center; }
.nav-item { position: static; }

.nav-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-burgundy-foreground);
  transition: color 0.15s;
}
.nav-top-link:hover,
.nav-top-link:focus { color: var(--color-ivory); }
.nav-caret { font-size: 9px; }

.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  display: none;
}
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel,
.nav-item.is-open .mega-panel { display: block; }

.mega-panel-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.mega-grid {
  display: grid;
  gap: 1.5rem;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-lift);
}
.mega-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.mega-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mega-col-title {
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.mega-col ul { display: grid; gap: 0.25rem; }
.mega-link {
  display: block;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
  transition: background-color 0.15s, color 0.15s;
}
.mega-link:hover { background: var(--color-surface); color: var(--primary); }
.mega-link.is-highlight {
  font-weight: 600;
  color: var(--color-gold-foreground);
}
.mega-link.is-highlight:hover { background: rgba(201, 147, 10, 0.2); }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-burgundy-foreground);
  transition: background-color 0.15s, color 0.15s;
}
.icon-btn:hover { background: rgba(247, 241, 229, 0.1); color: var(--color-ivory); }

.btn-league {
  display: none;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-md);
  background: var(--color-gold);
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gold-foreground);
  transition: filter 0.15s;
}
.btn-league:hover { filter: brightness(0.95); }

.header-search {
  display: none;
  border-top: 1px solid rgba(247, 241, 229, 0.15);
  background: var(--color-burgundy);
  padding: 0.75rem 1rem;
}
.header-search.is-open { display: block; }
.header-search form {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
}
.header-search input[type="search"] {
  width: 100%;
  border: 1px solid rgba(247, 241, 229, 0.2);
  border-radius: var(--radius-md);
  background: rgba(247, 241, 229, 0.1);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-ivory);
}
.header-search input[type="search"]::placeholder { color: rgba(235, 213, 201, 0.7); }
.header-search input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-gold);
}
.header-search button {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-gold);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gold-foreground);
}

/* Mobile drawer */
.mobile-drawer {
  display: none;
  border-top: 1px solid rgba(247, 241, 229, 0.15);
  background: var(--color-burgundy);
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer nav {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.drawer-section { border-bottom: 1px solid rgba(247, 241, 229, 0.1); padding: 0.25rem 0; }
.drawer-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: none;
  padding: 0.625rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ivory);
}
.drawer-panel { display: none; padding-bottom: 0.75rem; }
.drawer-section.is-open .drawer-panel { display: block; }
.drawer-col { margin-bottom: 0.75rem; }
.drawer-col-title {
  margin: 0 0 0.25rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(235, 213, 201, 0.7);
}
.drawer-col ul { display: grid; gap: 0.125rem; }
.drawer-col a {
  display: block;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--color-burgundy-foreground);
}
.drawer-col a:hover { color: var(--color-ivory); }

@media (min-width: 1024px) {
  .main-nav { display: block; }
  .header-actions { margin-left: 0; }
  .menu-toggle { display: none; }
  .mobile-drawer { display: none !important; }
}
@media (min-width: 640px) {
  .btn-league { display: inline-flex; }
}

/* ----------------------------------------------------------------------
 * 5. Footer
 * ------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: 4rem;
  background: var(--color-burgundy);
  color: var(--color-burgundy-foreground);
}

.newsletter-band {
  position: relative;
  border-top: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  background: var(--color-newsletter-cream);
  color: var(--foreground);
}
.newsletter-inner {
  display: grid;
  gap: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.newsletter-title { font-size: 1.25rem; color: var(--color-gold); }
.newsletter-sub { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.newsletter-form { display: grid; gap: 0.5rem; }
.newsletter-row { display: flex; flex-direction: column; gap: 0.5rem; }
.newsletter-row input[type="email"] {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
}
.newsletter-row input[type="email"]:focus { outline: none; box-shadow: 0 0 0 2px var(--color-gold); }
.newsletter-row button {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-gold);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gold-foreground);
}
.newsletter-row button:hover { filter: brightness(0.95); }
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--muted-foreground);
}
.newsletter-consent input { margin-top: 0.15rem; accent-color: var(--color-gold); }
.newsletter-thanks {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gold-foreground);
}

@media (min-width: 640px) {
  .newsletter-row { flex-direction: row; }
}
@media (min-width: 1024px) {
  .newsletter-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

.footer-cols {
  position: relative;
  display: grid;
  gap: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-col-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ivory);
}
.footer-cols ul { display: grid; gap: 0.375rem; }
.footer-cols a { font-size: 13px; }
.footer-cols a:hover { color: var(--color-ivory); text-decoration: underline; }

@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.footer-compliance { position: relative; border-top: 1px solid rgba(247, 241, 229, 0.15); }
.compliance-inner { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.compliance-box {
  display: grid;
  gap: 0.625rem;
  border: 1px solid rgba(247, 241, 229, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(247, 241, 229, 0.05);
  padding: 1rem;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-ivory);
}
.compliance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.badge-18 {
  display: grid;
  place-items: center;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  border: 2px solid var(--color-ivory);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ivory);
}
.compliance-row a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-ivory);
}
.compliance-row a:hover { color: var(--color-gold); }
.compliance-note { color: rgba(247, 241, 229, 0.9); }
.footer-copyright { margin-top: 1rem; font-size: 0.75rem; color: rgba(235, 213, 201, 0.7); }

/* ----------------------------------------------------------------------
 * 6. Buttons, chips, badges, ratings, marks
 * ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.15s, color 0.15s, filter 0.15s;
}
.btn-solid { background: var(--primary); color: var(--primary-foreground); }
.btn-solid:hover { background: var(--color-claret-dark); }
.btn-ghost { border: 1px solid var(--primary); background: transparent; color: var(--primary); }
.btn-ghost:hover { background: rgba(140, 35, 50, 0.05); }
.btn-gold { background: var(--color-gold); color: var(--color-gold-foreground); }
.btn-gold:hover { filter: brightness(0.95); }
.btn-gold-outline { border: 1px solid var(--color-gold); background: transparent; color: var(--color-gold-foreground); }
.btn-gold-outline:hover { background: rgba(201, 147, 10, 0.1); }
.btn-burgundy { background: var(--color-burgundy); color: var(--color-ivory); }
.btn-burgundy:hover { box-shadow: var(--shadow-lift); }
.btn-block { width: 100%; }

.btn-loadmore {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-steel);
  transition: box-shadow 0.15s;
}
.btn-loadmore:hover { box-shadow: var(--shadow-lift); }
.btn-loadmore .remaining { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }

.chip-tbc,
.chip-provisional {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border: 1px solid rgba(168, 91, 18, 0.5);
  border-radius: 999px;
  background: rgba(168, 91, 18, 0.1);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-warn);
}
.chip-testing {
  display: inline-flex;
  white-space: nowrap;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background: rgba(201, 147, 10, 0.2);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gold-foreground);
}
.chip-steel {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--color-steel);
  border-radius: 999px;
  background: var(--card);
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-steel);
}

.badge-ukgc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border: 1px solid var(--color-steel);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-steel);
}

.tag-gold {
  display: inline-flex;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background: rgba(201, 147, 10, 0.15);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gold-foreground);
}

.rating-scale { display: inline-flex; align-items: center; gap: 0.25rem; }
.rating-stars { display: inline-flex; }
.rating-num { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rating-none { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.rating-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

.card-mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-burgundy);
}
.card-mark-lg { height: 4rem; width: 4rem; border-radius: 10px; padding: 0.5rem; font-size: 1.5rem; }
.card-mark-sm { height: 2.5rem; width: 2.5rem; border-radius: var(--radius-md); padding: 0.25rem; font-size: 13px; }
.card-mark-img img { width: 100%; height: 100%; object-fit: contain; }

.monogram {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-burgundy);
}

/* ----------------------------------------------------------------------
 * 7. Page shell: content + sticky 340px rail
 * ------------------------------------------------------------------- */
.page-shell { position: relative; }
.page-shell-grid {
  position: relative;
  display: grid;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.page-shell-grid > main { min-width: 0; }
@media (min-width: 1024px) {
  .page-shell-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .site-sidebar { position: sticky; top: 6rem; align-self: start; }
}
.page-shell-single {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.site-sidebar { display: grid; gap: 1.25rem; }
.widget,
.cfuk-widget {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}
.widget-title {
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.widget-action {
  margin-top: 0.75rem;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-steel);
}
.widget-action:hover { text-decoration: underline; }

.editors-pick-head { display: flex; align-items: center; gap: 0.75rem; }
.editors-pick-head h3 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editors-pick-note { margin-top: 0.75rem; font-size: 13px; line-height: 1.4; color: var(--muted-foreground); }
.editors-pick-actions { margin-top: 0.75rem; display: grid; gap: 0.375rem; }

.toplist-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  padding: 0.625rem 0;
}
.toplist-row:last-child { border-bottom: 0; }
.toplist-rank {
  width: 1rem;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted-foreground);
}
.toplist-mark {
  display: grid; place-items: center;
  height: 2rem; width: 2rem; flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  color: var(--color-burgundy);
}
.toplist-main { min-width: 0; flex: 1; }
.toplist-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
}
.toplist-name:hover { color: var(--primary); }
.toplist-play { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.toplist-play:hover { text-decoration: underline; }

.league-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.league-mini-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.league-mini-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.league-mini-row .name:hover { color: var(--primary); }
.hours-pill {
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(201, 147, 10, 0.25);
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gold-foreground);
}

.sidebar-news-item { margin-bottom: 0.75rem; }
.sidebar-news-item:last-child { margin-bottom: 0; }
.sidebar-news-cat {
  display: inline-block;
  margin-bottom: 0.25rem;
  border-radius: 4px;
  background: var(--color-surface);
  padding: 0.125rem 0.375rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.sidebar-news-item a.title { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.sidebar-news-item a.title:hover { color: var(--primary); }
.sidebar-news-date { font-size: 12px; color: var(--muted-foreground); }

/* ----------------------------------------------------------------------
 * 8. Casino card (site-wide compact grammar)
 *
 * Uniform card grammar: every zone has a fixed height so every card in any
 * listing is identical. Offer zone row template (the card grammar):
 *   grid-template-rows: 2.5rem 1.125rem 1.5rem
 *   = bonus (2 lines, clamped) / significant terms (1 line) / stats (1 line)
 * Title row fixed at 2.5rem; actions pinned right (desktop) / bottom (mobile).
 * ------------------------------------------------------------------- */
.casino-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}
.casino-card:hover { box-shadow: var(--shadow-lift); }
.casino-card[hidden] { display: none; }

.casino-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.casino-card-ident {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  height: 2.5rem;
  overflow: hidden;
}
.rank-badge {
  display: grid;
  place-items: center;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-burgundy);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-ivory);
}
.casino-card-idmain { min-width: 0; flex: 1; }
.media-head { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.media-head-main { min-width: 0; flex: 1; }
.casino-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.25;
}
.casino-card-name a:hover { color: var(--primary); }
.casino-card-rating {
  display: flex;
  align-items: center;
  height: 1.25rem;
  margin-top: 2px;
  overflow: hidden;
}
.casino-card-rating .rating-wrap { flex-wrap: nowrap; }
.card-chips { margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* Fixed-row offer zone: bonus (2 lines) / terms (1 line) / stats (1 line). */
.casino-card-offer {
  display: grid;
  min-width: 0;
  grid-template-rows: 2.5rem 1.125rem 1.5rem;
  row-gap: 0.25rem;
  align-items: start;
}
.bonus-headline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.5rem;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.significant-terms {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.stats-row {
  display: flex;
  min-width: 0;
  height: 1.5rem;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.stat {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
}
.stat dt {
  flex-shrink: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
}
.stat dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.stat .chip-tbc { max-width: 100%; overflow: hidden; }
.stat-licence { margin-left: auto; flex-shrink: 0; }

/* Quiet licence reference at the end of card stat rows. */
.licence-line {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-steel);
  opacity: 0.85;
  white-space: nowrap;
  cursor: help;
}

.casino-card-actions {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .casino-card-grid {
    grid-template-columns: 15rem minmax(0, 1fr) 10.5rem;
    align-items: center;
    gap: 1rem;
  }
}

.casino-listing { display: grid; gap: 1rem; }
.listing-more { margin-top: 1.25rem; }

.listing-empty,
.empty-note {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ----------------------------------------------------------------------
 * 9. Homepage
 * ------------------------------------------------------------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-band-ivory);
}
.home-hero-inner { position: relative; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.home-hero h1 { max-width: 56rem; line-height: 1.15; }
.home-hero-sub { margin-top: 1rem; max-width: 42rem; font-size: 1.125rem; color: var(--muted-foreground); }
.hero-chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--color-steel);
  border-radius: 999px;
  background: var(--card);
  padding: 0.375rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-steel);
}
.hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 768px) {
  .home-hero-inner { padding-top: 5rem; padding-bottom: 5rem; }
}

.block-section { position: relative; overflow: hidden; }
.band-ivory { background: var(--color-band-ivory); }
.band-cream { background: var(--color-band-cream); }
.block-inner { position: relative; padding-top: 2.25rem; padding-bottom: 2.25rem; }
@media (min-width: 768px) { .block-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; } }
.block-eyebrow-row {
  margin-bottom: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
}
.eyebrow-gold { color: var(--color-gold); }
.eyebrow-suit { height: 0.75rem; width: 0.75rem; flex-shrink: 0; }
.block-note { font-size: 12px; color: var(--muted-foreground); }
.block-heading { font-size: 24px; }
.block-sub {
  margin-top: 0.5rem;
  max-width: 48rem;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.block-body { margin-top: 1.5rem; }
.block-footer { margin-top: 1.5rem; }

/* Sister stats strip + family cards */
.stats-strip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem;
  text-align: center;
}
.stats-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem 0.75rem;
}
.stats-strip .figure { display: flex; align-items: baseline; gap: 0.375rem; }
.stats-strip .num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-burgundy);
}
.stats-strip .label { font-size: 0.875rem; color: var(--muted-foreground); }
.stats-strip .dot { margin: 0 0.5rem; color: var(--muted-foreground); }
.stats-strip-note { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .stats-strip .num { font-size: 1.875rem; } }

.family-grid {
  margin-top: 1.25rem;
  display: grid;
  align-items: stretch;
  gap: 1rem;
}
@media (min-width: 640px) { .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .family-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.family-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}
.family-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.family-card[hidden] { display: none; }
.family-card-bar { height: 3px; width: 100%; background: var(--color-burgundy); transition: background-color 0.2s; }
.family-card:hover .family-card-bar { background: #8C2332; }
.family-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.family-card .media-head { height: 4rem; overflow: hidden; }
.family-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 600; line-height: 1.25; }
.family-card-net { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-steel); }
.family-card-net:hover { text-decoration: underline; }
.family-card-nonet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted-foreground); }
.family-card .card-chips { margin-top: 0.625rem; height: 22px; flex-wrap: nowrap; overflow: hidden; }
.family-strip {
  margin-top: 0.75rem;
  display: flex;
  height: 26px;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--muted-foreground);
}
.family-strip .avatars { display: flex; }
.family-strip .avatars .monogram {
  height: 26px;
  width: 26px;
  font-size: 11px;
  margin-left: -0.5rem;
  box-shadow: 0 0 0 2px var(--background);
}
.family-strip .avatars .monogram:first-child { margin-left: 0; }
.family-strip .more-pill {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--card);
  padding: 0.125rem 0.5rem;
  font-weight: 600;
}
.family-strip .mapped { margin-left: auto; flex-shrink: 0; }
.family-card-actions {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.family-card-actions .btn { padding: 0.5rem 0.75rem; font-size: 13px; }
.family-card-actions .btn-solid { flex: 3; }
.family-card-actions .btn-ghost { flex: 2; }

/* Payout claim cards + carousel */
.carousel { position: relative; }
.carousel-rail {
  display: flex;
  margin: 0 -0.25rem;
  padding: 0 0.25rem 0.25rem;
  gap: 1rem;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-rail::-webkit-scrollbar { display: none; }
.carousel-cell {
  min-width: 0;
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .carousel-cell { flex-basis: calc(50% - 0.5rem); } }
@media (min-width: 1024px) { .carousel-cell { flex-basis: calc(33.333% - 0.667rem); } }

.carousel-arrow {
  position: absolute;
  top: 50%;
  display: none;
  height: 2.5rem;
  width: 2.5rem;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-burgundy);
  color: var(--color-ivory);
  box-shadow: var(--shadow-lift);
  transition: opacity 0.15s, background-color 0.15s;
}
.carousel-arrow:hover { background: rgba(94, 26, 36, 0.9); }
.carousel-arrow.prev { left: -1rem; }
.carousel-arrow.next { right: -1rem; }
.carousel-arrow[disabled] { pointer-events: none; opacity: 0.3; }
@media (min-width: 768px) { .carousel-arrow { display: grid; } }

.carousel-dots {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.carousel-dot {
  height: 0.5rem;
  width: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-border);
  padding: 0;
  transition: all 0.15s;
}
.carousel-dot:hover { background: rgba(94, 26, 36, 0.4); }
.carousel-dot[aria-current="true"] { width: 1.25rem; background: var(--color-burgundy); }

.claim-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.claim-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 600; line-height: 1.25; }
.claim-card-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted-foreground); }
.claim-quote {
  position: relative;
  display: block;
  margin-top: 0.75rem;
  border-left: 2px solid var(--color-gold);
  padding-left: 0.75rem;
}
.claim-quote .bigmark {
  position: absolute;
  top: -1rem;
  left: 0.25rem;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: rgba(94, 26, 36, 0.1);
}
.claim-quote .quote-text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  max-height: 2.7em;
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
}
.claim-quote:hover .quote-text { text-decoration: underline; }
.claim-note {
  margin-top: 0.375rem;
  padding-left: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 1.35em;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.claim-stats { margin-top: 0.75rem; }
.claim-stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(231, 223, 206, 0.7);
  padding: 0.5rem 0;
}
.claim-stat-row:last-child { border-bottom: 0; }
.claim-stat-row .label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.claim-stat-row .value { text-align: right; font-size: 13px; line-height: 1.35; }
.claim-progress { font-weight: 600; color: var(--color-warn); }
.claim-card-actions { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; padding-top: 1rem; }
.claim-card-actions .btn { flex: 1; }

.cycle-strip {
  margin-top: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.cycle-strip-lead { font-size: 15px; line-height: 1.6; }
.cycle-bar { margin-top: 0.75rem; display: flex; gap: 3px; }
.cycle-seg { height: 0.5rem; flex: 1; border-radius: 2px; background: var(--color-border); }
.cycle-seg.done { background: var(--color-gold); }
.cycle-count {
  margin-top: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.cycle-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* VIP club cards */
.club-grid { display: grid; align-items: stretch; gap: 1rem; }
@media (min-width: 640px) { .club-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .club-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.club-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-club-border);
  border-radius: 10px;
  background: var(--color-club);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.club-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-club-gold);
  box-shadow: var(--shadow-lift);
}
.club-watermark {
  position: absolute;
  bottom: -1.5rem;
  right: -1.25rem;
  height: 10rem;
  width: 10rem;
  pointer-events: none;
  color: var(--color-club-gold);
  opacity: 0.06;
}
.club-card-body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.club-head { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.club-mark {
  display: grid;
  height: 4rem;
  width: 4rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 10px;
  background: var(--color-club-mark);
  padding: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-burgundy);
}
.club-head { height: 4rem; overflow: hidden; }
.club-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-club-ivory);
}
.club-brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-club-rose); }
.club-stats { margin-top: 0.75rem; display: grid; grid-template-rows: repeat(2, 1.5rem); gap: 0.5rem; overflow: hidden; }
.club-stat { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; overflow: hidden; }
.club-stat dt {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-club-rose);
}
.club-stat dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 14px; font-weight: 500; color: var(--color-club-ivory); }
.club-stat .figure { font-weight: 600; color: var(--color-club-gold); }
.club-tags { margin-top: 0.75rem; display: flex; height: 22px; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 0.375rem; }
.club-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(224, 179, 74, 0.6);
  border-radius: 999px;
  background: transparent;
  padding: 0.125rem 0.625rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-club-gold);
}
.club-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--color-club-border);
  padding-top: 1rem;
}
.club-cta a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-club-gold);
}
.club-cta a:hover { text-decoration: underline; }

.vip-extra { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .vip-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cashback-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.cashback-box h3 { font-size: 19px; }
.cashback-box ul { margin-top: 0.5rem; display: grid; gap: 0.375rem; font-size: 0.875rem; }
.cashback-box li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.375rem;
}
.cashback-box li:last-child { border-bottom: 0; padding-bottom: 0; }
.cashback-box a { font-weight: 500; }
.cashback-box a:hover { color: var(--primary); }
.warn-note {
  align-self: start;
  border: 1px solid rgba(168, 91, 18, 0.4);
  border-radius: var(--radius-lg);
  background: rgba(168, 91, 18, 0.1);
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-warn);
}

/* Bento */
.bento { display: grid; gap: 1rem; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bento-featured { grid-column: span 1; }
@media (min-width: 640px) { .bento-featured { grid-column: span 2; grid-row: span 2; } }
@media (min-width: 1024px) { .bento-featured { grid-column: span 1; grid-row: span 2; } }
.bento-wide { grid-column: span 1; }
@media (min-width: 640px) { .bento-wide { grid-column: span 2; } }
@media (min-width: 1024px) { .bento-wide { grid-column: span 3; } }

.bento-featured-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.bento-featured-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lift); }
.bento-watermark {
  position: absolute;
  bottom: -1.5rem;
  right: -1.25rem;
  height: 10rem;
  width: 10rem;
  pointer-events: none;
  color: var(--primary);
  opacity: 0.04;
}
.bento-featured-head { position: relative; display: flex; align-items: flex-start; gap: 0.75rem; }
.bento-featured-head svg { height: 2rem; width: 2rem; flex-shrink: 0; color: var(--primary); }
.bento-featured-head h3 { font-size: 19px; line-height: 1.35; }
.bento-featured-copy { position: relative; margin-top: 0.75rem; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }
.bento-featured-chip { position: relative; margin-top: 1rem; }
.bento-top-label {
  position: relative;
  margin-top: 1.25rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}
.bento-monograms { position: relative; margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bento-featured-cta { position: relative; margin-top: auto; padding-top: 1.25rem; }

.bento-tile {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.bento-tile:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lift); }
.bento-tile-icon {
  display: grid;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  color: var(--primary);
}
.bento-tile-main { min-width: 0; flex: 1; }
.bento-tile-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.35; }
.bento-tile-line { margin-top: 0.125rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted-foreground); }
.bento-tile-arrow { height: 1.25rem; width: 1.25rem; flex-shrink: 0; color: var(--primary); transition: transform 0.2s; }
.bento-tile:hover .bento-tile-arrow { transform: translateX(2px); }
.bento-cta { margin-top: 1.5rem; }

/* Bonus cards */
.bonus-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bonus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bonus-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.bonus-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lift); }
.bonus-card-bar { display: block; height: 3px; width: 100%; background: var(--primary); }
.bonus-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.bonus-card-icon {
  display: grid;
  height: 3rem;
  width: 3rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  color: var(--primary);
}
.bonus-card h3 { margin-top: 0.75rem; font-size: 19px; line-height: 1.35; }
.bonus-card-line { margin-top: 0.375rem; font-size: 13px; line-height: 1.55; color: var(--muted-foreground); }
.bonus-card-chip { margin-top: 0.75rem; }
.bonus-card-cta { margin-top: auto; padding-top: 1rem; }

.rules-notice {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  background: rgba(201, 147, 10, 0.05);
  padding: 1rem;
}
.rules-notice svg { flex-shrink: 0; color: var(--color-gold-foreground); }
.rules-notice p { flex: 1; font-size: 0.875rem; line-height: 1.6; color: var(--color-gold-foreground); }
@media (min-width: 640px) { .rules-notice { flex-direction: row; align-items: center; } }

/* Guides & tools split */
.guides-tools { display: grid; align-items: stretch; gap: 1.25rem; }
@media (min-width: 1024px) { .guides-tools { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } }
.guides-list-panel {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.guides-list-panel ul li { border-bottom: 1px solid var(--color-border); }
.guides-list-panel ul li:last-child { border-bottom: 0; }
.guide-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  transition: background-color 0.15s;
}
.guide-row:hover { background: var(--color-surface); }
.guide-row > svg { flex-shrink: 0; color: var(--primary); }
.guide-row-main { min-width: 0; flex: 1; }
.guide-row-title { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.35; }
.guide-row-summary { margin-top: 0.125rem; display: block; font-size: 13px; color: var(--muted-foreground); }
.guide-row-by { margin-top: 0.25rem; display: block; font-size: 12px; color: var(--muted-foreground); }
.guides-list-footer { margin-top: auto; border-top: 1px solid var(--color-border); padding: 1rem; }

.tools-panel {
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  background: rgba(201, 147, 10, 0.05);
  padding: 1.25rem;
}
.tools-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tools-panel-head h3 { font-size: 19px; color: var(--color-gold-foreground); }
.tools-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gold-foreground);
}
.tools-cards { margin-top: 1rem; display: grid; flex: 1; gap: 0.75rem; }
@media (min-width: 640px) { .tools-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tools-cards { grid-template-columns: minmax(0, 1fr); } }
.tool-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  padding: 1.25rem;
}
.tool-card-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.tool-card-head svg { flex-shrink: 0; color: var(--primary); }
.tool-card h4 { font-family: var(--font-display); font-size: 17px; line-height: 1.35; }
.tool-card-copy { margin-top: 0.25rem; font-size: 13px; line-height: 1.55; color: var(--muted-foreground); }
.tool-card-cta { margin-top: auto; padding-top: 1rem; }
.tools-panel-note { margin-top: 1rem; font-size: 12px; color: var(--muted-foreground); }

/* Newsdesk */
.newsdesk-grid { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .newsdesk-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.newsdesk-featured {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.newsdesk-cat {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--card);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.newsdesk-featured h3 { margin-top: 0.75rem; font-size: 24px; }
.newsdesk-featured h3 a:hover { color: var(--primary); }
.newsdesk-standfirst { margin-top: 0.5rem; font-size: 15px; color: var(--muted-foreground); }
.newsdesk-meta { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.newsdesk-side { display: grid; gap: 0.75rem; align-content: start; }
.newsdesk-side li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.newsdesk-side h3 { margin-top: 0.5rem; font-size: 19px; }
.newsdesk-side h3 a:hover { color: var(--primary); }
.newsdesk-side .newsdesk-meta { margin-top: 0.25rem; }

/* How we test */
.how-we-test { background: var(--color-band-cream); padding-top: 2.25rem; padding-bottom: 2.25rem; }
@media (min-width: 768px) { .how-we-test { padding-top: 3.5rem; padding-bottom: 3.5rem; } }
.how-steps { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.how-step {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.how-step-num { font-family: var(--font-display); font-size: 1.875rem; color: var(--primary); }
.how-step h3 { margin-top: 0.25rem; font-family: var(--font-display); font-size: 19px; }
.how-step p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.how-link { margin-top: 1.5rem; display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: underline; }

.team-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----------------------------------------------------------------------
 * 10. Editorial: prose, byline, breadcrumbs, pills, boxes, FAQ, tables
 * ------------------------------------------------------------------- */
.prose-editorial {
  max-width: 48rem;
  font-size: 17px;
  line-height: 1.7;
  color: var(--foreground);
}
.prose-editorial h2 { font-size: 24px; margin: 2rem 0 0.75rem; }
.prose-editorial h3 { font-size: 19px; margin: 1.5rem 0 0.5rem; }
.prose-editorial p { margin: 0.75rem 0; }
.prose-editorial ul { list-style: disc; padding-left: 1.25rem; margin: 0.75rem 0; }
.prose-editorial ol { list-style: decimal; padding-left: 1.25rem; margin: 0.75rem 0; }
.prose-editorial li { margin: 0.35rem 0; }
.prose-editorial a { color: var(--color-steel); text-decoration: underline; text-underline-offset: 2px; }
.prose-editorial blockquote {
  margin: 1rem 0;
  border-left: 2px solid var(--color-gold);
  padding-left: 1rem;
  font-style: italic;
}
.prose-editorial img { border-radius: var(--radius-lg); }
.prose-editorial code {
  background: var(--color-surface);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}
.prose-editorial pre {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  overflow-x: auto;
}

.copy-code-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 0.2rem 0.55rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
}
.copy-code-btn:hover { color: var(--primary); }

.byline {
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  font-size: 13px;
  color: var(--muted-foreground);
}
.byline-name { font-weight: 500; color: var(--color-steel); }
a.byline-name:hover { text-decoration: underline; }

.breadcrumbs { margin-bottom: 0.75rem; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs a:hover { color: var(--color-steel); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--foreground); }

.pill-nav { margin: 0 -0.25rem 1.5rem; overflow-x: auto; scrollbar-width: none; }
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav ul { display: flex; width: max-content; gap: 0.5rem; padding: 0 0.25rem; }
.pill-nav a {
  display: inline-flex;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--card);
  padding: 0.375rem 0.75rem;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
}
.pill-nav a:hover { border-color: var(--primary); color: var(--primary); }

.page-title { font-size: clamp(30px, 4vw, 40px); font-weight: 600; }
.page-intro { margin-top: 0.75rem; max-width: 48rem; font-size: 17px; line-height: 1.6; color: var(--muted-foreground); }
.mt-4 { margin-top: 1rem; }

.info-strip {
  margin: 1.25rem 0;
  border-left: 4px solid var(--color-steel);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.note-steel {
  margin-top: 1.5rem;
  border-left: 4px solid var(--color-steel);
  border-radius: var(--radius-md);
  background: rgba(43, 108, 176, 0.1);
  padding: 1rem;
  font-size: 15px;
  line-height: 1.6;
}

.key-facts,
.verdict-box,
.content-box {
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.key-facts h2, .verdict-box h2 { margin-bottom: 0.75rem; font-size: 24px; }
.key-facts dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 2rem; }
@media (min-width: 640px) { .key-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.key-fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(231, 223, 206, 0.7);
  padding: 0.375rem 0;
}
.key-fact-row dt { font-size: 13px; color: var(--muted-foreground); }
.key-fact-row dd { text-align: right; font-size: 13px; font-weight: 600; }

.verdict-head { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.verdict-cols { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .verdict-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verdict-cols h3 {
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.verdict-pros h3 { color: var(--primary); }
.verdict-cons h3 { color: var(--color-warn); }
.verdict-cols ul { display: grid; gap: 0.375rem; font-size: 0.875rem; }
.verdict-cols li { display: flex; gap: 0.5rem; }
.verdict-pros li > span { color: var(--primary); }
.verdict-cons li > span { color: var(--color-warn); }

.faq-section { margin-top: 2.5rem; }
.faq-section > h2 { margin-bottom: 1rem; font-size: 24px; }
.faq-list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.faq-list details { border-bottom: 1px solid var(--color-border); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { background: var(--color-surface); }
.faq-list summary .faq-marker { color: var(--primary); }
.faq-list summary .faq-marker::before { content: "+"; }
.faq-list details[open] summary .faq-marker::before { content: "−"; }
.faq-answer { padding: 0 1rem 1rem; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }

.author-box {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.author-avatar {
  display: grid;
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-burgundy);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ivory);
}
.author-avatar img { height: 100%; width: 100%; object-fit: cover; }
.author-box-main { min-width: 0; }
.author-box h3 { font-size: 1rem; }
.author-box h3 a:hover { color: var(--primary); }
.author-role {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.author-bio { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

.table-wrap {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table caption {
  padding: 0.75rem 1rem 0;
  text-align: left;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.data-table th {
  background: var(--color-surface);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.data-table th button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.data-table th button:hover,
.data-table th button[aria-pressed="true"] { color: var(--primary); }
.data-table td { border-top: 1px solid var(--color-border); padding: 0.75rem 1rem; }

.related-list { margin-top: 2.5rem; }
.related-list > h2 { margin-bottom: 0.75rem; font-size: 24px; }
.related-links { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .related-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related-links a {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: box-shadow 0.15s;
}
.related-links a:hover { box-shadow: var(--shadow-lift); }

.warn-aside {
  margin: 1.5rem 0;
  border-left: 4px solid var(--color-warn);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.warn-aside .lede { font-weight: 600; color: var(--color-warn); }
.warn-aside p + p { margin-top: 0.5rem; color: var(--muted-foreground); }

.gold-panel {
  margin: 1.5rem 0;
  max-width: 48rem;
  border: 1px solid rgba(201, 147, 10, 0.6);
  border-radius: var(--radius-lg);
  background: rgba(201, 147, 10, 0.1);
  padding: 1.25rem;
}
.gold-panel .kicker {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold-foreground);
}
.gold-panel p + p { margin-top: 0.5rem; font-size: 15px; line-height: 1.6; }

.league-hero {
  border: 1px solid rgba(201, 147, 10, 0.6);
  border-radius: var(--radius-lg);
  background: linear-gradient(to bottom right, rgba(201, 147, 10, 0.15), transparent);
  padding: 1.25rem;
}
@media (min-width: 768px) { .league-hero { padding: 1.75rem; } }
.league-hero-sub { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.125rem; color: var(--color-gold-foreground); }

/* ----------------------------------------------------------------------
 * 11. News magazine
 * ------------------------------------------------------------------- */
.news-image { position: relative; overflow: hidden; }
.news-image img { height: 100%; width: 100%; object-fit: cover; }
.news-image-art { position: absolute; inset: 0; }
.news-art-large { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); opacity: 0.12; }
.news-art-small { position: absolute; bottom: 10%; left: 8%; opacity: 0.18; }
.news-art-large-sq { position: absolute; right: -14%; top: 50%; transform: translateY(-50%); opacity: 0.12; }
.news-art-small-sq { position: absolute; bottom: 8%; left: 8%; opacity: 0.18; }
.news-image-ring { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(107, 31, 42, 0.14); }

.news-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: box-shadow 0.15s;
}
a.news-card:hover { box-shadow: var(--shadow-lift); }
.news-card-media { position: relative; }
.news-cat-overlay {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  display: inline-flex;
  border-radius: 999px;
  background: var(--primary);
  padding: 0.25rem 0.625rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-foreground);
}
.news-cat-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(140, 35, 50, 0.1);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.news-card-hero-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.news-card-hero-body h3 { font-size: 24px; }
.news-card-body { display: flex; gap: 1rem; padding: 1.25rem; }
.news-card-thumb { height: 6rem; width: 6rem; flex-shrink: 0; border-radius: var(--radius-md); }
.news-card-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.news-card-main h3 {
  margin-top: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  max-height: 2.7em;
  font-size: 19px;
  line-height: 1.35;
}
.news-card-standfirst {
  margin-top: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.1em;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.news-card-byline { margin-top: auto; padding-top: 0.5rem; font-size: 12px; color: var(--muted-foreground); }
.news-card-hero-body .news-card-byline { margin-top: auto; }

.news-hub-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 1024px) { .news-hub-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.news-hub-side { display: grid; gap: 1rem; align-content: start; }

.news-rail-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .news-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .news-rail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.most-read {
  margin-top: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.most-read h2 { font-size: 24px; }
.most-read ol { margin-top: 0.75rem; display: grid; gap: 0.5rem; counter-reset: mostread; }
.most-read li { display: flex; gap: 0.75rem; align-items: baseline; }
.most-read li::before {
  counter-increment: mostread;
  content: counter(mostread);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--muted-foreground);
}
.most-read a { font-size: 0.875rem; font-weight: 500; }
.most-read a:hover { color: var(--primary); }

.newsletter-block {
  margin-top: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 1.5rem;
}
.newsletter-block h2 { font-size: 24px; }
.newsletter-block p { margin-top: 0.5rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.newsletter-block .btn { margin-top: 1rem; }

.article-meta { margin: 1rem 0 1.5rem; font-size: 13px; color: var(--muted-foreground); }
.article-hero-image { margin: 1.5rem 0; border-radius: var(--radius-lg); overflow: hidden; }

/* ----------------------------------------------------------------------
 * 12. Calculators
 * ------------------------------------------------------------------- */
.calc {
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
}
.calc-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .calc-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.calc-field { display: block; }
.calc-field > span.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.calc-field input,
.calc-field select {
  margin-top: 0.25rem;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--background);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
}
.calc-field input:focus,
.calc-field select:focus { border-color: var(--primary); outline: none; }
.calc-field .hint { margin-top: 0.25rem; display: block; font-size: 12px; color: var(--muted-foreground); }

.calc-result { margin-top: 1.5rem; border-radius: var(--radius-lg); background: var(--color-surface); padding: 1.25rem; }
.calc-result .kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.calc-result .big {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-gold-foreground);
}
.calc-result .big.negative { color: var(--color-warn); }
.calc-result .explain { margin-top: 0.75rem; font-size: 15px; line-height: 1.6; }
.calc-result .neg-note { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-warn); }
.calc-breakdown { margin-top: 1rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
@media (min-width: 640px) { .calc-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc-breakdown dt { color: var(--muted-foreground); }
.calc-breakdown dd { font-weight: 600; }
.calc-disclaimer {
  margin-top: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.calc-disclaimer a { color: var(--color-steel); text-decoration: underline; }

/* ----------------------------------------------------------------------
 * 13. 404, empty states, back-to-top, decor placement
 * ------------------------------------------------------------------- */
.four04 { position: relative; max-width: 48rem; margin: 0 auto; padding: 4rem 1rem; }
.four04-code { position: relative; font-family: var(--font-display); font-size: 3.75rem; font-weight: 700; color: var(--primary); }
.four04 h1 { margin-top: 0.75rem; }
.four04-copy { margin-top: 0.75rem; font-size: 17px; line-height: 1.6; color: var(--muted-foreground); }
.four04-pillars { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .four04-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.four04-pillars a {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem;
  transition: box-shadow 0.15s;
}
.four04-pillars a:hover { box-shadow: var(--shadow-lift); }
.four04-pillars .t { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.four04-pillars .b { margin-top: 0.25rem; display: block; font-size: 0.875rem; color: var(--muted-foreground); }
.four04-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.875rem; }
.four04-note { margin-top: 2rem; font-size: 0.75rem; color: var(--muted-foreground); }

.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  display: none;
  height: 2.5rem;
  width: 2.5rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-burgundy);
  color: var(--color-ivory);
  box-shadow: var(--shadow-lift);
  transition: background-color 0.15s;
}
.back-to-top:hover { background: var(--color-claret-dark); }
.back-to-top.is-visible { display: grid; }

/* Decor placement: whitespace only, wide viewports only. */
.hero-decor {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 46%;
  display: none;
  overflow: hidden;
  user-select: none;
}
.hero-decor-a { position: absolute; right: -4rem; top: 50%; transform: translateY(-50%); }
.hero-decor-b { position: absolute; left: 1.5rem; top: 0.5rem; }
.hero-decor-c { position: absolute; bottom: 0; left: 6rem; }
@media (min-width: 900px) { .hero-decor { display: block; } }

.margin-decor { position: absolute; inset: 0; display: none; overflow: hidden; user-select: none; }
.margin-decor-a { position: absolute; left: 1.5vw; top: 2.5rem; }
.margin-decor-b { position: absolute; right: 1.5vw; bottom: 2.5rem; }
@media (min-width: 1440px) { .margin-decor { display: block; } }

.page-hero-decor {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  height: 420px;
  width: calc((100vw - 80rem) / 2);
  overflow: hidden;
  user-select: none;
}
.page-hero-decor-a { position: absolute; right: 0.5rem; top: 2rem; }
.page-hero-decor-b { position: absolute; left: 0.5rem; top: 13rem; }
@media (min-width: 1560px) { .page-hero-decor { display: block; } }

.empty-decor { position: absolute; inset: 0; overflow: hidden; user-select: none; }
.empty-decor-a { position: absolute; right: -3rem; top: -2.5rem; }
.empty-decor-b { position: absolute; bottom: -2rem; right: 1rem; display: none; }
@media (min-width: 768px) { .empty-decor-b { display: block; } }

/* Archive / author pages */
.archive-header { margin-bottom: 1.5rem; }
.post-list { display: grid; gap: 1rem; }
.post-list-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem 1.25rem;
  transition: box-shadow 0.15s;
}
.post-list-item:hover { box-shadow: var(--shadow-lift); }
.post-list-item h2 { font-size: 1.125rem; }
.post-list-item h2 a:hover { color: var(--primary); }
.post-list-meta { margin-top: 0.25rem; font-size: 12px; color: var(--muted-foreground); }
.post-list-excerpt { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

.pagination { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 0.375rem 0.75rem;
  font-weight: 500;
}
.pagination .page-numbers.current { border-color: var(--primary); background: rgba(140, 35, 50, 0.05); color: var(--primary); font-weight: 600; }
.pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary); }

.profile-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.profile-rows { margin-top: 0.5rem; }
.profile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  padding: 0.625rem 0;
}
.profile-row:last-child { border-bottom: 0; }
.profile-row dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.profile-row dd { font-size: 0.875rem; font-weight: 600; }

.section-gap { margin-top: 2.5rem; }
.section-gap > h2 { margin-bottom: 0.75rem; font-size: 24px; }

/* ============================================================
   v1.0.3 - uniform logo tiles + equal-height cards, site-wide
   ============================================================ */

/* THE logo rule: every logo everywhere renders inside a fixed tile.
   Bare plugin-emitted imgs get hard-locked dimensions so natural image
   size can never break a layout again. */
.cfuk-logotile {
	width: 48px !important;
	height: 48px !important;
	background: #fff;
	border: 1px solid oklch(0.9064 0.0195 80.11);
	border-radius: 6px;
	padding: 5px;
	box-sizing: border-box;
	flex: none;
}
img.cfuk-logotile { object-fit: contain !important; display: block; }
span.cfuk-logotile, .cfuk-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display, Georgia, serif);
	font-weight: 700;
	font-size: 1rem;
	color: oklch(0.3313 0.0984 15.87);
	background: oklch(0.9598 0.016 82.79);
}
.card-mark, .card-mark-sm, .card-mark-lg {
	background: #fff;
	border: 1px solid oklch(0.9064 0.0195 80.11);
	border-radius: 6px;
	padding: 5px;
	box-sizing: border-box;
	overflow: hidden;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card-mark-sm { width: 48px; height: 48px; }
.card-mark-lg { width: 64px; height: 64px; }
.card-mark img, .card-mark-sm img, .card-mark-lg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent;
}
/* Larger tile contexts override the base 48px */
.key-facts-box .cfuk-logotile,
.single-hero .cfuk-logotile { width: 64px !important; height: 64px !important; }
.family-strip .cfuk-logotile,
.sidebar-rail .cfuk-logotile { width: 28px !important; height: 28px !important; padding: 2px; border-radius: 50%; font-size: 0.625rem; }

/* Equal-height compact cards */
.casino-card { padding: 0.75rem 1rem; min-height: 92px; display: flex; align-items: center; }
.casino-card-grid { grid-template-columns: 13rem minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; width: 100%; }
.casino-card-ident { height: auto; }
.casino-card-name { font-size: 0.9375rem; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.5em; }
.casino-card-offer { grid-template-rows: auto auto 1.375rem; gap: 0.125rem; }
.casino-card-offer .bonus-headline { font-size: 0.8125rem; line-height: 1.3; max-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.casino-card .significant-terms { font-size: 0.625rem; min-height: 0.875rem; margin: 0; }
.casino-card .stats-row { height: 1.375rem; font-size: 0.6875rem; gap: 0.875rem; overflow: hidden; }
.casino-card .stats-row dt { font-size: 0.625rem; }
.casino-card-actions { display: flex; flex-direction: row; align-items: center; gap: 0.875rem; justify-content: flex-end; }
.actions-rating { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; min-width: 4.25rem; text-align: center; }
.actions-rating .rating-stars { font-size: 0.8125rem; letter-spacing: 1px; }
.actions-rating .rating-score { font-size: 0.9375rem; font-weight: 700; }
.actions-rating .chip-provisional { font-size: 0.5625rem; padding: 1px 6px; }
.actions-rating .rating-none { font-size: 0.625rem; color: oklch(0.5184 0.0172 70.7); }
.actions-buttons { display: flex; flex-direction: column; gap: 0.3125rem; }
.actions-buttons .btn, .actions-buttons a { min-width: 8.5rem; padding: 0.4375rem 1rem; font-size: 0.8125rem; }
@media (max-width: 767px) {
	.casino-card { min-height: 0; padding: 0.875rem; display: block; }
	.casino-card-grid { grid-template-columns: 1fr; gap: 0.625rem; }
	.casino-card-ident .media-head { display: flex; align-items: center; gap: 0.625rem; }
	.casino-card .cfuk-logotile, .casino-card .card-mark-sm { width: 40px !important; height: 40px !important; }
	.casino-card-name { font-size: 1rem; -webkit-line-clamp: 1; max-height: 1.35em; }
	.casino-card-offer { display: block; }
	.casino-card-offer .bonus-headline { max-height: none; -webkit-line-clamp: 3; font-size: 0.875rem; }
	.casino-card .significant-terms { font-size: 0.6875rem; margin: 0.125rem 0 0.375rem; }
	.casino-card .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem; height: auto; overflow: visible; font-size: 0.75rem; }
	.casino-card .stats-row .stat { display: flex; gap: 0.375rem; align-items: baseline; min-width: 0; }
	.casino-card .stats-row dt { font-size: 0.625rem; flex: none; }
	.casino-card .stats-row dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
	.casino-card .stat-licence { grid-column: 1 / -1; margin-left: 0 !important; }
	.casino-card-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; margin-top: 0.625rem; }
	.actions-rating { flex-direction: row; justify-content: flex-start; gap: 0.5rem; min-width: 0; }
	.actions-buttons { flex-direction: row; gap: 0.5rem; }
	.actions-buttons .btn, .actions-buttons a { flex: 1; min-width: 0; white-space: nowrap; text-align: center; padding: 0.625rem 0.5rem; font-size: 0.875rem; }
}

/* ============================================================
   v1.0.7 - full mobile hardening sweep (all templates)
   ============================================================ */
@media (max-width: 767px) {
	/* Global guards */
	html, body { overflow-x: clip; }
	img, svg, video { max-width: 100%; height: auto; }
	.block-inner, .section-gap { padding-left: 1rem; padding-right: 1rem; }

	/* Any data table scrolls inside its own box, never the page */
	table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; }

	/* All multi-column card grids collapse to one column */
	.family-grid, .club-grid, .bento-grid, .news-rail, .tools-split,
	.related-grid, .category-tiles, .scheme-grid, .guides-split { grid-template-columns: 1fr !important; display: grid; gap: 0.75rem; }

	/* Sidebar rail: below content, full width */
	.layout-with-rail { display: block; }
	.sidebar-rail { width: 100% !important; position: static !important; margin-top: 1.5rem; }

	/* Carousel cells: one per view */
	.carousel-cell { min-width: 86vw !important; }

	/* Family / club / claim / bento cards vertical rhythm */
	.family-card, .club-card, .claim-card, .bento-tile, .news-card { min-height: 0; }
	.family-card .media-head, .club-card .media-head, .claim-card .media-head { gap: 0.625rem; }

	/* Key facts box: single column rows */
	.key-facts-box dl, .key-facts-grid { grid-template-columns: 1fr !important; }
	.key-facts-box .cfuk-logotile { width: 48px !important; height: 48px !important; }

	/* Review long-form comfort */
	.prose-editorial, .entry-content { font-size: 1rem; line-height: 1.7; }
	.prose-editorial h2 { font-size: 1.25rem; }

	/* Pill nav: horizontal scroll strip */
	.pill-nav { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 0.5rem; padding-bottom: 0.375rem; -webkit-overflow-scrolling: touch; }
	.pill-nav a { flex: none; }

	/* Footer columns stack */
	.footer-columns { grid-template-columns: 1fr 1fr !important; gap: 1.25rem; }

	/* Tap targets & fonts floors */
	a, button { min-height: 44px; display: inline-flex; align-items: center; }
	.footer-columns a, .stats-row a, .pill-nav a, .breadcrumbs a, nav a { min-height: 32px; }
	body { -webkit-text-size-adjust: 100%; }
}

/* v1.0.8 - truly compact mobile casino card */
@media (max-width: 767px) {
	.casino-card { padding: 0.625rem 0.75rem; }
	.casino-card-grid { gap: 0.375rem; }
	.casino-card-ident .media-head { flex-wrap: nowrap; align-items: center; min-width: 0; }
	.casino-card-ident .media-head-main { min-width: 0; flex: 1; }
	.casino-card .cfuk-logotile, .casino-card .card-mark-sm { width: 34px !important; height: 34px !important; padding: 3px; }
	.casino-card .rank-badge { width: 22px; height: 22px; font-size: 0.6875rem; }
	.casino-card-name { font-size: 0.9375rem; -webkit-line-clamp: 1; max-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
	.casino-card-offer .bonus-headline { font-size: 0.8125rem; -webkit-line-clamp: 1; max-height: 1.35em; margin: 0; }
	.casino-card .significant-terms { display: none; }
	.casino-card .stats-row { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; height: auto; font-size: 0.6875rem; margin-top: 0.125rem; }
	.casino-card .stats-row .stat { display: inline-flex; gap: 0.25rem; align-items: baseline; }
	.casino-card .stat-licence { margin-left: 0 !important; flex-basis: auto; }
	.casino-card-actions { flex-direction: row; align-items: center; gap: 0.625rem; margin-top: 0.5rem; }
	.actions-rating { flex: none; flex-direction: row; align-items: center; gap: 0.3125rem; min-width: 0; }
	.actions-rating .rating-stars { font-size: 0.75rem; }
	.actions-rating .rating-score { font-size: 0.875rem; }
	.actions-rating .chip-provisional { font-size: 0.5rem; padding: 0 4px; }
	.actions-buttons { flex: 1; gap: 0.375rem; }
	.actions-buttons .btn, .actions-buttons a { min-height: 40px; padding: 0.375rem 0.375rem; font-size: 0.8125rem; }
}

/* v1.0.9 - mobile: unclip casino name, stack action buttons */
@media (max-width: 767px) {
	.casino-card-ident, .casino-card-ident .media-head, .casino-card-idmain { height: auto !important; min-height: 0 !important; overflow: visible !important; }
	.casino-card-ident .media-head { display: flex; align-items: center; }
	.casino-card-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-height: none !important;
		line-height: 1.3 !important;
		font-size: 1rem;
		display: block;
		-webkit-line-clamp: unset;
	}
	.casino-card-name a { display: inline; line-height: inherit; min-height: 0; }
	.casino-card-actions { align-items: center; }
	.actions-rating { flex: 1; justify-content: flex-start; }
	.actions-buttons { flex: none; flex-direction: column; gap: 0.375rem; width: 46%; }
	.actions-buttons .btn, .actions-buttons a { width: 100%; min-height: 40px; }
}

/* v1.1.0 - mobile stats: payout moved to second line, tighter box */
@media (max-width: 767px) {
	.casino-card { padding: 0.5rem 0.75rem; }
	.casino-card .stats-row {
		display: grid;
		grid-template-columns: auto auto 1fr;
		column-gap: 0.875rem;
		row-gap: 2px;
		align-items: baseline;
	}
	.casino-card .stats-row .stat:nth-of-type(1) { grid-column: 1; grid-row: 1; }
	.casino-card .stats-row .stat:nth-of-type(2) { grid-column: 2; grid-row: 1; }
	.casino-card .stats-row .stat:nth-of-type(4) { grid-column: 3; grid-row: 1; justify-self: end; }
	.casino-card .stats-row .stat:nth-of-type(3) { grid-column: 1 / 3; grid-row: 2; }
	.casino-card .stats-row .stat:nth-of-type(3) dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56vw; }
	.casino-card .stats-row .stat-licence { grid-column: 3; grid-row: 2; justify-self: end; margin-left: 0 !important; }
	.casino-card-offer .bonus-headline { margin-bottom: 2px; }
	.casino-card-actions { margin-top: 0.375rem; }
}

/* v1.1.1 - mobile: rating into name-row corner, buttons full-width pair, dead space removed */
@media (max-width: 767px) {
	.casino-card { position: relative; padding: 0.5rem 0.75rem 0.625rem; }
	/* Rating floats to the empty top-right corner */
	.casino-card .actions-rating {
		position: absolute;
		top: 0.625rem;
		right: 0.75rem;
		flex: none;
		flex-direction: column;
		align-items: flex-end;
		gap: 1px;
		z-index: 2;
	}
	.casino-card .actions-rating .rating-stars { font-size: 0.6875rem; }
	.casino-card .actions-rating .rating-score { font-size: 0.875rem; line-height: 1; }
	.casino-card .actions-rating .chip-provisional { font-size: 0.5rem; padding: 0 4px; }
	.casino-card .actions-rating .rating-none { font-size: 0.5625rem; }
	/* Name row leaves room for the floated rating */
	.casino-card-ident .media-head-main { max-width: calc(100% - 112px); }
	/* Buttons: full-width side-by-side pair, no leftover rating column */
	.casino-card-actions { margin-top: 0.375rem; }
	.casino-card .actions-buttons { flex-direction: row; width: 100%; gap: 0.5rem; }
	.casino-card .actions-buttons .btn, .casino-card .actions-buttons a { flex: 1; width: auto; min-height: 40px; }
	/* Kill remaining vertical slack */
	.casino-card-grid { gap: 0.25rem; }
	.casino-card .stats-row { margin-top: 0; row-gap: 1px; }
	.casino-card-offer .bonus-headline { margin: 0; }
}

/* v1.1.1b - mobile rating corner: compact provisional chip, no name overlap */
@media (max-width: 767px) {
	.casino-card .actions-rating { max-width: 100px; }
	.casino-card .actions-rating .chip-provisional { font-size: 0; line-height: 1; }
	.casino-card .actions-rating .chip-provisional::before { content: "Provisional"; font-size: 0.5rem; line-height: 1.4; }
}

/* v1.1.2 - mobile: hard containment, nothing may overlap anywhere */
@media (max-width: 767px) {
	/* Name: ellipsis restored (horizontal clip only, no vertical cut) */
	.casino-card-ident .media-head { overflow: hidden !important; }
	.casino-card-ident .media-head-main { overflow: hidden; min-width: 0; }
	.casino-card-name { overflow: hidden !important; text-overflow: ellipsis; }

	/* Stats grid: every track clamps, every cell ellipsizes, no escape */
	.casino-card .stats-row { grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr); }
	.casino-card .stats-row .stat { min-width: 0; overflow: hidden; }
	.casino-card .stats-row .stat dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
	.casino-card .stats-row .stat:nth-of-type(1) dd { max-width: 28vw; }
	.casino-card .stats-row .stat:nth-of-type(4) dd { max-width: 34vw; }
	.casino-card .stats-row .stat:nth-of-type(3) dd { max-width: 52vw; }
	.casino-card .stats-row .stat dd .chip-tbc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

	/* Generic guard for every card family: no cell may overflow its box */
	.family-card, .club-card, .claim-card, .bento-tile, .news-card, .key-facts-box { overflow: hidden; }
	.family-card dd, .club-card dd, .claim-card dd, .key-facts-box dd,
	.family-card h3, .club-card h3, .claim-card h3, .news-card h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* v1.1.3 - stats items locked to track width; name corner reserved by padding */
@media (max-width: 767px) {
	.casino-card .stats-row .stat {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: hidden !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: baseline;
		gap: 0.25rem;
	}
	.casino-card .stats-row .stat dt { flex: none; }
	.casino-card .stats-row .stat dd { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; max-width: none; }
	.casino-card .stats-row .stat:nth-of-type(4),
	.casino-card .stats-row .stat-licence { justify-content: flex-end; }
	/* Name row: reserve the rating corner with padding, ellipsis handles the rest */
	.casino-card-ident .media-head { padding-right: 122px; }
	.casino-card-ident .media-head-main { max-width: 100%; }
}

/* v1.1.5 - mobile polish: contained rating corner, small chips, labels never clipped */
@media (max-width: 767px) {
	/* Rating corner: tight 2-line grid, never taller than the name row */
	.casino-card .actions-rating {
		display: grid !important;
		grid-template-columns: auto auto;
		gap: 1px 5px;
		justify-items: end;
		align-items: center;
		max-width: 118px;
		max-height: 34px;
		top: 0.5rem;
	}
	.casino-card .actions-rating .rating-stars { font-size: 0.625rem; letter-spacing: 0.5px; grid-row: 1; }
	.casino-card .actions-rating .rating-score { font-size: 0.8125rem; grid-row: 1; }
	.casino-card .actions-rating .chip-provisional { grid-column: 1 / -1; grid-row: 2; }
	.casino-card .actions-rating .rating-none { grid-column: 1 / -1; }
	.casino-card-ident .media-head { padding-right: 126px; min-height: 42px; align-items: center; }
	.casino-card-offer { margin-top: 2px; }

	/* Amber chips inside stats: small and inline */
	.casino-card .stats-row .chip-tbc { font-size: 0.5625rem; padding: 0 5px; line-height: 1.6; border-radius: 8px; }

	/* Track balance: cap the left column so the right column always fits its labels */
	.casino-card .stats-row { grid-template-columns: minmax(0, 38vw) minmax(0, auto) minmax(0, 1fr); }
	.casino-card .stats-row .stat:nth-of-type(1) dd { max-width: 24vw; }
	/* Right-aligned stats: label always fully visible, value shrinks first */
	.casino-card .stats-row .stat:nth-of-type(4) dt,
	.casino-card .stats-row .stat-licence dt { flex: none; overflow: visible; }
	.casino-card .stats-row .stat:nth-of-type(4) dd,
	.casino-card .stats-row .stat-licence dd { flex: 0 1 auto; min-width: 0; }
}

/* v1.1.5b - right stat column guaranteed its label width */
@media (max-width: 767px) {
	.casino-card .stats-row { grid-template-columns: minmax(0, 32vw) minmax(0, 22vw) minmax(84px, 1fr); }
	.casino-card .stats-row .stat:nth-of-type(2) dd { max-width: 12vw; overflow: hidden; text-overflow: ellipsis; }
}

/* v1.1.7 - family-card descriptor + proper mobile footer */
.family-desc {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: oklch(0.5184 0.0172 70.7);
	margin: 0.375rem 0 0.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.35em;
}
@media (max-width: 767px) {
	.family-desc { min-height: 0; }
	.family-card .family-card-body { padding: 0.75rem; }
	.family-card .card-chips { margin: 0.25rem 0; }

	/* Footer: two compact columns, normal link rhythm */
	.footer-cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
	.footer-cols nav ul { margin: 0; }
	.footer-cols nav li { margin: 0; }
	.footer-cols a { min-height: 30px !important; padding: 1px 0; font-size: 0.8125rem; display: inline-flex; align-items: center; }
	.footer-col-title { font-size: 0.75rem; margin-bottom: 0.375rem; }
	.footer-compliance { text-align: center; }
}

/* v1.1.8 - clean listings: no chips, short payout, dash placeholders */
.chip-provisional { display: none !important; }
.stat-empty { color: oklch(0.72 0.012 70); font-size: 0.9em; }


/* -------------------------------------------------------------------
 * v1.2.1 — mega menu hover-gap fix: invisible bridge over the header's
 * bottom padding + a short close delay so the panel survives the mouse
 * travelling from the nav link down into the panel.
 * ------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .mega-panel {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease, visibility 0s linear 0.25s;
  }
  .mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.85rem;
    height: 0.85rem;
  }
  .nav-item:hover .mega-panel,
  .nav-item:focus-within .mega-panel,
  .nav-item.is-open .mega-panel {
    display: block;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s, 0s;
  }
}