/*
Theme Name: Alterplay (Latest)
Theme URI: https://alterplay.co.uk
Description: UK Casino Sister-Site Research Index — latest build with editable author pages.
Version: 2.0
Author: Alterplay
*/

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap");

/* =========================================================
   CSS CUSTOM PROPERTIES (verbatim from src/styles.css :root)
   ========================================================= */
:root {
  --radius: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
  --radius-4xl: 0px;

  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.02 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.02 250);
  --primary: oklch(0.36 0.09 255);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0.01 250);
  --secondary-foreground: oklch(0.2 0.02 250);
  --muted: oklch(0.96 0.005 250);
  --muted-foreground: oklch(0.45 0.02 250);
  --accent: oklch(0.94 0.02 250);
  --accent-foreground: oklch(0.2 0.02 250);
  --destructive: oklch(0.55 0.22 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.9 0.01 250);
  --input: oklch(0.9 0.01 250);
  --ring: oklch(0.5 0.15 255);

  /* Brand palette */
  --navy: oklch(0.36 0.09 255);
  --navy-deep: oklch(0.22 0.07 258);
  --navy-foreground: oklch(0.99 0 0);
  --action: oklch(0.55 0.21 263);
  --action-hover: oklch(0.48 0.22 263);
  --action-foreground: oklch(1 0 0);
  --paper: oklch(0.985 0.003 250);
  --rule: oklch(0.88 0.01 250);
  --ink: oklch(0.16 0.02 250);
  --ink-soft: oklch(0.4 0.02 250);

  --font-display: "Inter", system-ui, sans-serif;
  --font-headline: "Barlow Condensed", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

/* =========================================================
   GLOBAL ZERO RADIUS
   ========================================================= */
*, *::before, *::after { border-radius: 0 !important; box-sizing: border-box; }

/* =========================================================
   BASE
   ========================================================= */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-headline); letter-spacing: 0.005em; margin: 0; }
h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.font-display { font-family: var(--font-display); }
.font-headline { font-family: var(--font-headline); }
.font-sans { font-family: var(--font-sans); }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.container-x {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) { .container-x { padding-inline: 2rem; } }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action);
  color: var(--action-foreground);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.4rem;
  line-height: 1;
  transition: background 120ms ease, transform 120ms ease;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.btn-action:hover { background: var(--action-hover); }
.btn-action:active { transform: translateY(1px); }

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--navy-foreground);
  border: 1px solid rgba(255,255,255,0.4);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.2rem;
}

.rule-thick { border-top: 3px solid var(--ink); }
.rule-navy  { border-top: 3px solid var(--navy); }
.rule-action{ border-top: 3px solid var(--action); }

/* =========================================================
   TAILWIND UTILITY EQUIVALENTS
   (only what the components actually use)
   ========================================================= */

/* --- Display & flex --- */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.contents { display: contents; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.shrink-0 { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-stretch  { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.content-start { align-content: flex-start; }

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-px { gap: 1px; }

.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-10 { row-gap: 2.5rem; }

/* --- Grid --- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0,1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
.auto-rows-fr { grid-auto-rows: 1fr; }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-12 { grid-column: span 12 / span 12; }

.divide-y-2 > * + * { border-top-width: 2px; border-top-style: solid; }
.divide-ink > * + * { border-color: var(--ink); }

/* --- Sizing --- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-\[60px\] { width: 60px; }

.h-0\.5 { height: 0.125rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-full { height: 100%; }
.h-\[60px\] { height: 60px; }

.min-h-0 { min-height: 0; }
.min-h-\[7\.5rem\] { min-height: 7.5rem; }
.min-h-\[4\.5rem\] { min-height: 4.5rem; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.min-w-\[220px\] { min-width: 220px; }
.min-w-\[260px\] { min-width: 260px; }

.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-\[72ch\] { max-width: 72ch; }

.aspect-\[5\/2\] { aspect-ratio: 5 / 2; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.fixed { position: fixed; }

.inset-0 { inset: 0; }
.top-0 { top: 0; }
.top-full { top: 100%; }
.top-24 { top: 6rem; }
.top-28 { top: 7rem; }
.left-0 { left: 0; }
.-top-\[2px\] { top: -2px; }
.-left-\[2px\] { left: -2px; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* --- Spacing: margin --- */
.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-auto { margin-top: auto; }
.-mt-1 { margin-top: -0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.space-y-px > * + * { margin-top: 1px; }

/* --- Spacing: padding --- */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }

.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-0 { padding-left: 0; }

/* --- Typography --- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-\[8px\]  { font-size: 8px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[17px\] { font-size: 17px; }
.text-\[26px\] { font-size: 26px; }
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl  { font-size: 3rem; line-height: 1; }
.text-6xl  { font-size: 3.75rem; line-height: 1; }
.text-7xl  { font-size: 4.5rem; line-height: 1; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }

.tracking-tight    { letter-spacing: -0.025em; }
.tracking-wider    { letter-spacing: 0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-\[0\.9\]  { line-height: 0.9; }
.leading-\[0\.95\] { line-height: 0.95; }
.leading-\[1\]     { line-height: 1; }
.leading-\[1\.05\] { line-height: 1.05; }

.underline { text-decoration: underline; }
.underline-offset-2 { text-underline-offset: 2px; }
.no-underline { text-decoration: none; }
.break-words { overflow-wrap: break-word; word-wrap: break-word; }
.break-all { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }
.decoration-action\/40 { text-decoration-color: rgba(72, 92, 235, 0.4); }

/* --- Colors / backgrounds --- */
.bg-background { background-color: var(--background); }
.bg-navy { background-color: var(--navy); }
.bg-navy-deep { background-color: var(--navy-deep); }
.bg-action { background-color: var(--action); }
.bg-paper { background-color: var(--paper); }
.bg-ink { background-color: var(--ink); }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }

.bg-white\/5  { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-white\/15 { background-color: rgba(255,255,255,0.15); }
.bg-action\/60 { background-color: oklch(0.55 0.21 263 / 0.6); }
.bg-ink\/5 { background-color: oklch(0.16 0.02 250 / 0.05); }

/* --- Text colors --- */
.text-ink             { color: var(--ink); }
.text-ink-soft        { color: var(--ink-soft); }
.text-action          { color: var(--action); }
.text-navy            { color: var(--navy); }
.text-navy-foreground { color: var(--navy-foreground); }
.text-background      { color: var(--background); }
.text-white           { color: #fff; }
.text-foreground      { color: var(--foreground); }
.text-ink\/60   { color: oklch(0.16 0.02 250 / 0.6); }
.text-ink\/70   { color: oklch(0.16 0.02 250 / 0.7); }
.text-ink\/75   { color: oklch(0.16 0.02 250 / 0.75); }
.text-ink\/80   { color: oklch(0.16 0.02 250 / 0.8); }
.text-ink\/85   { color: oklch(0.16 0.02 250 / 0.85); }
.text-ink\/90   { color: oklch(0.16 0.02 250 / 0.9); }
.text-ink\/15   { color: oklch(0.16 0.02 250 / 0.15); }
.text-white\/40  { color: rgba(255,255,255,0.40); }
.text-white\/50  { color: rgba(255,255,255,0.50); }
.text-white\/55  { color: rgba(255,255,255,0.55); }
.text-white\/60  { color: rgba(255,255,255,0.60); }
.text-white\/65  { color: rgba(255,255,255,0.65); }
.text-white\/70  { color: rgba(255,255,255,0.70); }
.text-white\/75  { color: rgba(255,255,255,0.75); }
.text-white\/80  { color: rgba(255,255,255,0.80); }
.text-white\/85  { color: rgba(255,255,255,0.85); }
.text-white\/90  { color: rgba(255,255,255,0.90); }
.placeholder\:text-white\/40::placeholder { color: rgba(255,255,255,0.40); }
.placeholder\:text-white\/50::placeholder { color: rgba(255,255,255,0.50); }

/* --- Borders --- */
.border    { border: 1px solid var(--border); }
.border-0  { border-width: 0; }
.border-2  { border-width: 2px; border-style: solid; }
.border-4  { border-width: 4px; border-style: solid; }
.border-t   { border-top-width: 1px; border-top-style: solid; }
.border-b   { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l   { border-left-width: 1px; border-left-style: solid; }
.border-r   { border-right-width: 1px; border-right-style: solid; }
.border-t-2 { border-top-width: 2px; border-top-style: solid; }
.border-t-4 { border-top-width: 4px; border-top-style: solid; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.border-r-2 { border-right-width: 2px; border-right-style: solid; }

.border-ink      { border-color: var(--ink); }
.border-rule     { border-color: var(--rule); }
.border-action   { border-color: var(--action); }
.border-navy     { border-color: var(--navy); }
.border-white    { border-color: #fff; }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/15 { border-color: rgba(255,255,255,0.15); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.border-white\/40 { border-color: rgba(255,255,255,0.4); }
.border-ink\/15   { border-color: oklch(0.16 0.02 250 / 0.15); }
.border-ink\/20   { border-color: oklch(0.16 0.02 250 / 0.2); }

.last\:border-r-0:last-child { border-right-width: 0; }
.first\:border-t-0:first-child { border-top: 0; }
.first\:pt-0:first-child { padding-top: 0; }

/* --- Object fit --- */
.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }

/* --- Misc --- */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.cursor-pointer { cursor: pointer; }
.opacity-80 { opacity: 0.8; }
.opacity-100 { opacity: 1; }
.brightness-0 { filter: brightness(0); }
.invert { filter: invert(1); }
.brightness-0.invert, .brightness-0.invert { filter: brightness(0) invert(1); }
img.brightness-0.invert { filter: brightness(0) invert(1); }

.outline-none { outline: none; }
.scroll-mt-28 { scroll-margin-top: 7rem; }

/* Transitions */
.transition-colors  { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.transition-opacity { transition: opacity 150ms ease; }
.transition-transform { transition: transform 150ms ease; }
.rotate-180 { transform: rotate(180deg); }

/* =========================================================
   HOVER STATES
   ========================================================= */
.hover\:bg-action:hover          { background-color: var(--action); }
.hover\:bg-action-hover:hover    { background-color: var(--action-hover); }
.hover\:bg-ink:hover             { background-color: var(--ink); }
.hover\:bg-white\/5:hover        { background-color: rgba(255,255,255,0.05); }
.hover\:bg-white\/90:hover       { background-color: rgba(255,255,255,0.9); }
.hover\:bg-background:hover      { background-color: var(--background); }
.hover\:text-action:hover        { color: var(--action); }
.hover\:text-ink:hover           { color: var(--ink); }
.hover\:text-white:hover         { color: #fff; }
.hover\:text-background:hover    { color: var(--background); }
.hover\:text-navy:hover          { color: var(--navy); }
.hover\:border-action:hover      { border-color: var(--action); }
.hover\:opacity-100:hover        { opacity: 1; }
.hover\:underline:hover          { text-decoration: underline; }
.hover\:no-underline:hover       { text-decoration: none; }
.hover\:decoration-action:hover  { text-decoration-color: var(--action); }
.group:hover .group-hover\:text-background     { color: var(--background); }
.group:hover .group-hover\:text-background\/80 { color: rgba(255,255,255,0.8); }

/* =========================================================
   RESPONSIVE — md (768+)
   ========================================================= */
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:justify-between { justify-content: space-between; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .md\:col-span-9 { grid-column: span 9 / span 9; }

  .md\:h-20   { height: 5rem; }
  .md\:h-10   { height: 2.5rem; }
  .md\:h-full { height: 100%; }
  .md\:aspect-auto { aspect-ratio: auto; }
  .md\:flex-1 { flex: 1 1 0%; }
  .md\:w-auto { width: auto; }
  .md\:min-h-0 { min-height: 0; }
  .md\:mt-0 { margin-top: 0; }
  .md\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .md\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .md\:p-4 { padding: 1rem; }
  .md\:p-6 { padding: 1.5rem; }
  .md\:p-8 { padding: 2rem; }
  .md\:gap-3 { gap: 0.75rem; }
  .md\:gap-5 { gap: 1.25rem; }
  .md\:gap-10 { gap: 2.5rem; }
  .md\:mb-1 { margin-bottom: 0.25rem; }
  .md\:mb-2 { margin-bottom: 0.5rem; }
  .md\:mt-0 { margin-top: 0; }
  .md\:text-sm    { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:text-base  { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg    { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl    { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-2xl   { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl   { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl   { font-size: 3rem; line-height: 1; }
  .md\:text-6xl   { font-size: 3.75rem; line-height: 1; }
  .md\:text-7xl   { font-size: 4.5rem; line-height: 1; }
  .md\:text-\[10px\] { font-size: 10px; }
  .md\:text-\[26px\] { font-size: 26px; }
}

/* =========================================================
   RESPONSIVE — sm (640+) and lg (1024+)
   ========================================================= */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid { display: grid; }
  .sm\:hidden { display: none; }
  .sm\:items-center { align-items: center; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sm\:w-24 { width: 6rem; }
  .sm\:h-24 { height: 6rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:gap-5 { gap: 1.25rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-\[11px\] { font-size: 11px; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-9 { grid-column: span 9 / span 9; }
  .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* =========================================================
   EDITORIAL ARTICLE (Crimson Pro) — verbatim from source
   ========================================================= */
.article-prose {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: #E5E7EB;
}
@media (min-width: 768px) { .article-prose { font-size: 18px; } }
.article-prose p { margin-bottom: 1.4em; }
.article-prose p:last-child { margin-bottom: 0; }
.article-prose em, .article-prose i { font-style: italic; }
.article-prose a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.article-prose a:hover { color: #fff; }

.article-h1 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
@media (min-width: 768px) { .article-h1 { font-size: 56px; } }

.article-h2 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  margin-top: 56px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .article-h2 { font-size: 32px; margin-top: 80px; }
}

.dropcap::first-letter {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  color: var(--action);
  float: left;
  font-size: 64px;
  line-height: 1;
  padding-right: 10px;
  margin-top: -4px;
}
@media (min-width: 768px) {
  .dropcap::first-letter { font-size: 78px; margin-top: -6px; padding-right: 12px; }
}

.article-pullquote {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  color: #fff;
  border-left: 4px solid var(--action);
  padding-left: 32px;
  margin: 64px auto;
  max-width: 840px;
}
@media (min-width: 768px) { .article-pullquote { font-size: 28px; } }

.article-meta, .article-byline, .article-stamp {
  font-family: 'Crimson Pro', Georgia, serif;
  color: rgba(229, 231, 235, 0.6);
}
.article-byline, .article-stamp { font-style: italic; font-size: 14px; }

.contributor-name {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}
.contributor-bio {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: #E5E7EB;
}
.contributor-link {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--action);
}

/* Force round avatar in editorial */
.editorial-avatar { border-radius: 50% !important; }

/* Mobile collapsible TOC */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* =========================================================
   APPEND: Casino grid (.ap-casino-*) — Block 5
   ========================================================= */

/* Missing Tailwind utility used by the EditorPick grid wrapper.
   Without this, on >=768px the cards become a horizontal flex row
   instead of stacking vertically. Required for visual parity with Lovable. */
@media (min-width: 768px) {
  .md\:flex-col { flex-direction: column; }
}

/* T&C small print, rendered inside the card below the stat row.
   Sits on the card's paper background, separated from the navy stat row
   by a thin rule. Inter, muted, slightly indented to align with the bonus column. */
.ap-casino-terms {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
  background-color: var(--paper);
  padding: 10px 12px 12px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .ap-casino-terms {
    font-size: 12px;
    padding: 12px 20px 14px;
  }
}

/* Hooks for future overrides — currently no-op. The card structure inherits
   all visual properties from the Tailwind utility classes already in this file. */
.ap-casino-section { /* navy bg + action top border come from utility classes */ }
.ap-casino-card-wrap { /* layout comes from utility classes */ }

/* =========================================================
   APPEND: Sister Site single template — Block 4
   ========================================================= */

/* -----------------------------------------------------------
   Missing Tailwind utilities used by single-sister_site.php
   (lg: breakpoint, 1024px+). Required for desktop layout.
   ----------------------------------------------------------- */
@media (min-width: 1024px) {
  .lg\:hidden        { display: none; }
  .lg\:flex          { display: flex; }
  .lg\:flex-col      { flex-direction: column; }
  .lg\:grid-cols-12  { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:col-span-5    { grid-column: span 5 / span 5; }
  .lg\:col-span-7    { grid-column: span 7 / span 7; }
  .lg\:col-span-12   { grid-column: span 12 / span 12; }
  .lg\:sticky        { position: sticky; }
  .lg\:top-28        { top: 7rem; }
}

/* `order-1` and `order-last` for the body two-column layout */
.order-1     { order: 1; }
.order-last  { order: 9999; }

/* -----------------------------------------------------------
   Hero — diagonal stripe overlay
   ----------------------------------------------------------- */
.ap-sister-hero { /* layout comes from utility classes */ }

.ap-sister-hero-stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 14px);
}

/* -----------------------------------------------------------
   Brand card — offset action-colour shadow + decorative circles
   ----------------------------------------------------------- */
.ap-sister-card-offset {
  position: absolute;
  inset: 0;
  transform: translate(0.75rem, 0.75rem); /* translate-x-3 translate-y-3 */
  background-color: var(--action);
  border: 2px solid var(--ink);
}

.ap-sister-brand-card { /* relative positioning + structure from utilities */ }

/* Logo block — 16:9 ratio */
.ap-sister-logo-block {
  aspect-ratio: 16 / 9;
}

/* Decorative circles (exception to global border-radius: 0) */
.ap-sister-circle {
  position: absolute;
  border-radius: 50% !important;
  pointer-events: none;
}
.ap-sister-circle-tl {
  top: -3rem;     /* -top-12  */
  right: -3rem;   /* -right-12 */
  width: 12rem;   /* w-48 */
  height: 12rem;
  background-color: oklch(0.55 0.21 263 / 0.15);  /* action/15 */
}
.ap-sister-circle-br {
  bottom: -4rem;  /* -bottom-16 */
  left: -2.5rem;  /* -left-10   */
  width: 14rem;   /* w-56 */
  height: 14rem;
  background-color: rgba(255, 255, 255, 0.05);    /* white/5 */
}

/* 3-stat divider row */
.ap-sister-stats > * + * {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* -----------------------------------------------------------
   Intro paragraph (inside hero left column)
   ----------------------------------------------------------- */
:where(.ap-sister-intro p) {
  margin-bottom: 1em;
  line-height: 1.625;
}
:where(.ap-sister-intro p:last-child) { margin-bottom: 0; }

/* -----------------------------------------------------------
   Article body — fallback styling for bare HTML elements
   Uses :where() so any class on the element overrides these
   ----------------------------------------------------------- */
.ap-sister-content   { /* container; utilities handle layout */ }
.ap-sister-article   { /* wrapper around editor HTML */ }

:where(.ap-sister-article p) {
  margin-bottom: 1em;
  line-height: 1.625;
  color: var(--ink);
}

:where(.ap-sister-article h2) {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 0.95;
  margin: 4rem 0 1.5rem;
  color: var(--ink);
  scroll-margin-top: 7rem;
  letter-spacing: 0.005em;
}
@media (min-width: 768px) {
  :where(.ap-sister-article h2) { font-size: 2.25rem; }
}

:where(.ap-sister-article h3) {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
  color: var(--ink);
}
@media (min-width: 768px) {
  :where(.ap-sister-article h3) { font-size: 1.5rem; }
}

:where(.ap-sister-article ul) {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
:where(.ap-sister-article ol) {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
:where(.ap-sister-article li) { margin-bottom: 0.25rem; }

:where(.ap-sister-article a) {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:where(.ap-sister-article a:hover) { color: var(--ink); }

:where(.ap-sister-article table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}
:where(.ap-sister-article table th),
:where(.ap-sister-article table td) {
  padding: 0.75rem;
  text-align: left;
  border-right: 1px solid oklch(0.16 0.02 250 / 0.1);
}
:where(.ap-sister-article table th:last-child),
:where(.ap-sister-article table td:last-child) {
  border-right: 0;
}
:where(.ap-sister-article table thead) {
  background: var(--navy);
  color: #fff;
}
:where(.ap-sister-article table thead th) {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  border-right-color: rgba(255, 255, 255, 0.1);
}
:where(.ap-sister-article table tbody tr:nth-child(even)) {
  background: var(--paper);
}

/* -----------------------------------------------------------
   Pros / Cons helper blocks (use inside Content HTML)
   ----------------------------------------------------------- */
.ap-sister-pros,
.ap-sister-cons {
  padding: 1.5rem;
  border-top-width: 4px;
  border-top-style: solid;
}
.ap-sister-pros {
  background-color: #ecfdf5;       /* emerald-50 */
  border-top-color: #059669;       /* emerald-600 */
}
.ap-sister-cons {
  background-color: #fef2f2;       /* red-50 */
  border-top-color: #dc2626;       /* red-600 */
}
.ap-sister-pros .ap-sister-label,
.ap-sister-cons .ap-sister-label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}
.ap-sister-pros .ap-sister-label { color: #047857; } /* emerald-700 */
.ap-sister-cons .ap-sister-label { color: #b91c1c; } /* red-700     */

.ap-sister-pros .ap-sister-mark,
.ap-sister-cons .ap-sister-mark {
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.25;
}
.ap-sister-pros .ap-sister-mark { color: #059669; } /* emerald-600 */
.ap-sister-cons .ap-sister-mark { color: #dc2626; } /* red-600     */

:where(.ap-sister-pros ul, .ap-sister-cons ul) {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
:where(.ap-sister-pros li, .ap-sister-cons li) {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.625;
}
:where(.ap-sister-pros li:last-child, .ap-sister-cons li:last-child) {
  margin-bottom: 0;
}

/* -----------------------------------------------------------
   FAQ (native <details> with rotation on open)
   ----------------------------------------------------------- */
.ap-sister-faq { /* outer wrapper from utility border-t-2 */ }

.ap-sister-faq-item {
  border-bottom: 2px solid var(--ink);
}
.ap-sister-faq-item > summary {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  list-style: none;
}
.ap-sister-faq-item > summary::-webkit-details-marker { display: none; }
:where(.ap-sister-faq-item > summary > :first-child) {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--ink);
}
@media (min-width: 768px) {
  :where(.ap-sister-faq-item > summary > :first-child) { font-size: 1.25rem; }
}
.ap-sister-faq-plus {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--action);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms ease;
  display: inline-block;
}
.ap-sister-faq-item[open] .ap-sister-faq-plus {
  transform: rotate(45deg);
}
:where(.ap-sister-faq-item > p) {
  padding-bottom: 1.25rem;
  color: var(--ink-soft);
  line-height: 1.625;
}

/* -----------------------------------------------------------
   Sidebar — "Explore Other Sister Sites"
   ----------------------------------------------------------- */
.ap-sister-sidebar { /* layout from utility classes */ }

.ap-sister-sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-sister-sidebar-list > * + * {
  border-top: 1px solid oklch(0.16 0.02 250 / 0.1);
}

/* =========================================================
   APPEND: Casino Group (Network) single template — Block 4
   ========================================================= */

/* -----------------------------------------------------------
   Missing Tailwind utilities used by single-casino_group.php
   ----------------------------------------------------------- */
.border-background { border-color: var(--background); }
.max-w-md          { max-width: 28rem; }

/* -----------------------------------------------------------
   Layout hooks (no-op; structure comes from utility classes)
   ----------------------------------------------------------- */
.ap-network-page                 { /* page wrapper */ }
.ap-network-hero                 { /* dark hero — bg-ink + text-background utilities handle colours */ }
.ap-network-card                 { /* operator card */ }
.ap-network-content              { /* article column */ }
.ap-network-sidebar              { /* sticky sidebar */ }
.ap-network-mobile-card-section  { /* lg:hidden mobile card wrapper */ }

/* -----------------------------------------------------------
   Hero — grid-line overlay (different from sister sites' diagonal stripes)
   90° + 0° gradients with 80px gaps, opacity 0.06
   ----------------------------------------------------------- */
.ap-network-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(90deg, var(--background) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  var(--background) 0 1px, transparent 1px 80px);
}

/* -----------------------------------------------------------
   Operator card offset shadow
   Difference from sister-sites: border is `background` (matches the dark hero)
   not `ink`. Without this the offset would look wrong against the dark bg.
   ----------------------------------------------------------- */
.ap-network-card-offset {
  position: absolute;
  inset: 0;
  transform: translate(0.75rem, 0.75rem);
  background-color: var(--action);
  border: 2px solid var(--background);
}

/* -----------------------------------------------------------
   3-stat bottom row inside the operator card
   divide-x divide-ink/10 equivalent
   ----------------------------------------------------------- */
.ap-network-stats > * + * {
  border-left: 1px solid oklch(0.16 0.02 250 / 0.1);
}

/* -----------------------------------------------------------
   Intro paragraph over the dark hero — slightly muted white
   ----------------------------------------------------------- */
:where(.ap-network-intro p) {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1em;
  line-height: 1.625;
}
:where(.ap-network-intro p:last-child) { margin-bottom: 0; }

/* =========================================================
   APPEND: Online Casinos directory page
   ========================================================= */
.ap-casino-dir-logo { aspect-ratio: 4 / 3; }

/* =========================================================
   APPEND: Author profile + author box — Block 5
   ========================================================= */

/* -----------------------------------------------------------
   Missing utilities used by single-author.php
   ----------------------------------------------------------- */
.order-2 { order: 2; }
.gap-14  { gap: 3.5rem; }

@media (min-width: 768px) {
  .md\:order-1  { order: 1; }
  .md\:order-2  { order: 2; }
  .md\:gap-14   { gap: 3.5rem; }
}

/* -----------------------------------------------------------
   Hero grid spacing
   ----------------------------------------------------------- */
.ap-author-page                { /* layout from utilities */ }
.ap-author-hero                { /* bg-navy-deep from utility */ }
.ap-author-hero-grid {
  display: grid;
  gap: 2.5rem;          /* gap-10 */
}
@media (min-width: 768px) {
  .ap-author-hero-grid { gap: 3.5rem; }   /* md:gap-14 */
}

/* -----------------------------------------------------------
   Hero copy
   ----------------------------------------------------------- */
.ap-author-eyebrow {
  letter-spacing: 0.2em;
  font-size: 11px;
}

.ap-author-role {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;          /* text-2xl mobile */
  line-height: 1.3;
  font-style: italic;
  color: var(--action);
}
@media (min-width: 768px) {
  .ap-author-role { font-size: 28px; }   /* md:text-[28px] desktop */
}

.ap-author-tagline {
  color: rgba(255, 255, 255, 0.8);       /* text-white/80 */
  font-size: 1.125rem;                   /* text-lg mobile */
  line-height: 1.625;                    /* leading-relaxed */
  max-width: 36rem;                      /* max-w-xl */
}
@media (min-width: 768px) {
  .ap-author-tagline { font-size: 1.25rem; }  /* md:text-xl */
}
/* The wp_editor wraps saved content in <p> tags — neutralise their default
   margins inside the tagline container so the visual spacing stays the same. */
.ap-author-tagline > p:first-child { margin-top: 0; }
.ap-author-tagline > p:last-child  { margin-bottom: 0; }
.ap-author-tagline p + p           { margin-top: 0.5rem; }
.ap-author-tagline a               { color: var(--action); text-decoration: underline; }
.ap-author-tagline strong          { color: rgba(255, 255, 255, 0.95); font-weight: 600; }

/* Same paragraph-margin cleanup for the compact author box on light pages */
.ap-author-box-tagline > p:first-child { margin-top: 0; }
.ap-author-box-tagline > p:last-child  { margin-bottom: 0; }
.ap-author-box-tagline p + p           { margin-top: 0.5rem; }
.ap-author-box-tagline a               { color: var(--action); text-decoration: underline; }
.ap-author-box-tagline strong          { color: var(--ink); font-weight: 600; }

/* -----------------------------------------------------------
   Email + LinkedIn pill buttons — matches Lovable AuthorProfile.tsx
   rounded-full border-2 border-action/40 text-action hover:bg-action/10 px-5 py-2.5 text-sm
   ----------------------------------------------------------- */
.ap-author-pill-btn {
  padding: 0.625rem 1.25rem;             /* py-2.5 px-5 */
  font-family: var(--font-display);
  font-size: 0.875rem;                   /* text-sm */
  font-weight: 500;
  border: 2px solid oklch(0.55 0.21 263 / 0.4);  /* border-2 border-action/40 */
  color: var(--action);
  border-radius: 9999px !important;
  transition: background 150ms ease;
}
.ap-author-pill-btn:hover {
  background: oklch(0.55 0.21 263 / 0.1); /* hover:bg-action/10 */
}

/* Legacy aliases — same styling as the new .ap-author-pill-btn */
.ap-author-email-btn,
.ap-author-linkedin-btn {
  padding: 0.625rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  border: 2px solid oklch(0.55 0.21 263 / 0.4);
  color: var(--action);
  border-radius: 9999px !important;
  transition: background 150ms ease;
}
.ap-author-email-btn:hover,
.ap-author-linkedin-btn:hover {
  background: oklch(0.55 0.21 263 / 0.1);
}

/* -----------------------------------------------------------
   Photo — Lovable spec:
   w-60 md:w-80 aspect-square object-cover rounded-2xl
   border-4 border-action/30 shadow-2xl shadow-action/10
   ----------------------------------------------------------- */
.ap-author-photo {
  width: 15rem;                          /* w-60 */
  height: 15rem;                         /* aspect-square */
  aspect-ratio: 1 / 1;
  border-radius: 16px !important;        /* rounded-2xl */
  border: 4px solid oklch(0.55 0.21 263 / 0.3);   /* border-4 border-action/30 */
  box-shadow: 0 25px 50px -12px oklch(0.55 0.21 263 / 0.15);  /* shadow-2xl shadow-action/10 */
  display: block;
  object-fit: cover;
}
@media (min-width: 768px) {
  .ap-author-photo { width: 20rem; height: 20rem; }  /* md:w-80 */
}
.ap-author-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

/* -----------------------------------------------------------
   Profile content wrapper — everything below the hero
   The author writes raw HTML; the global :where() fallbacks
   inherit from .article-prose where used.
   ----------------------------------------------------------- */
.ap-author-profile-content {
  /* container; sections handle their own bg + padding */
}

/* -----------------------------------------------------------
   Hero stat row (used inside the profile HTML field)
   Each .ap-author-stat = one stat: value + label
   Wrapper class .ap-author-stats lays them in a divided row
   ----------------------------------------------------------- */
.ap-author-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.ap-author-stat-value {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.ap-author-stat-label {
  margin-top: 0.375rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}
.ap-author-stats > .ap-author-stat + .ap-author-stat {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* -----------------------------------------------------------
   Expertise tag chips
   ----------------------------------------------------------- */
.ap-author-tag {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid oklch(0.55 0.21 263 / 0.3);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0.5rem 0.5rem 0;
}

/* -----------------------------------------------------------
   Editorial-focus cards — border-radius: 8px exception
   Lovable spec: bg-white/[0.03] border border-white/10 rounded-lg p-6
   ----------------------------------------------------------- */
.ap-author-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px !important;
  padding: 1.5rem;
}
.ap-author-card h3 {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
}
.ap-author-card p {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.6;
}
.ap-author-cards-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* -----------------------------------------------------------
   By-the-Numbers big value
   ----------------------------------------------------------- */
.ap-author-number {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--action);
}
.ap-author-number-label {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* -----------------------------------------------------------
   Contact buttons (action color pill block)
   ----------------------------------------------------------- */
.ap-author-contact-btn {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--action);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  transition: background 150ms ease;
}
.ap-author-contact-btn:hover { background: var(--action-hover); }
.ap-author-contact-btn .ap-author-contact-email {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}
.ap-author-contact-btn .ap-author-contact-sub {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* =========================================================
   APPEND: Missing lg:col-span utilities needed by casino_group hero
   ========================================================= */
@media (min-width: 1024px) {
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
}

/* =========================================================
   APPEND: .ap-force-dark — force-convert light content to dark
   ========================================================= */
/* `.ap-force-dark` no longer sets its own background — pair it with
   `.bg-navy-deep` on the wrapper to get the navy palette. The class is
   responsible only for converting light Tailwind utilities (text-ink,
   bg-paper, etc.) to dark-readable colours. */
.ap-force-dark {
  color: rgba(255, 255, 255, 0.92);
}
.ap-force-dark section,
.ap-force-dark .bg-background,
.ap-force-dark .bg-paper {
  background-color: transparent !important;
}
.ap-force-dark .bg-white { background-color: rgba(255, 255, 255, 0.04) !important; }
.ap-force-dark .text-ink,
.ap-force-dark .text-foreground {
  color: rgba(255, 255, 255, 0.92) !important;
}
.ap-force-dark .text-ink\/60   { color: rgba(255, 255, 255, 0.6)  !important; }
.ap-force-dark .text-ink\/70   { color: rgba(255, 255, 255, 0.7)  !important; }
.ap-force-dark .text-ink\/75   { color: rgba(255, 255, 255, 0.75) !important; }
.ap-force-dark .text-ink\/80   { color: rgba(255, 255, 255, 0.8)  !important; }
.ap-force-dark .text-ink\/85   { color: rgba(255, 255, 255, 0.85) !important; }
.ap-force-dark .text-ink\/90   { color: rgba(255, 255, 255, 0.9)  !important; }
.ap-force-dark .text-ink\/15   { color: rgba(255, 255, 255, 0.2)  !important; }
.ap-force-dark .text-ink-soft  { color: rgba(255, 255, 255, 0.65) !important; }
.ap-force-dark .border-ink,
.ap-force-dark .border-rule {
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.ap-force-dark .border-ink\/10  { border-color: rgba(255, 255, 255, 0.1)  !important; }
.ap-force-dark .border-ink\/15  { border-color: rgba(255, 255, 255, 0.15) !important; }
.ap-force-dark .border-ink\/20  { border-color: rgba(255, 255, 255, 0.2)  !important; }
.ap-force-dark hr               { border-color: rgba(255, 255, 255, 0.15) !important; }

/* Tables — keep bg-navy header (already dark), zebra rows go subtle white */
.ap-force-dark table thead {
  background: var(--navy) !important;
  color: #fff !important;
}
.ap-force-dark table tbody tr:nth-child(odd)  { background: rgba(255, 255, 255, 0.04) !important; }
.ap-force-dark table tbody tr:nth-child(even) { background: transparent !important; }
.ap-force-dark table th,
.ap-force-dark table td {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Links */
.ap-force-dark a {
  color: var(--action);
}
.ap-force-dark a:hover {
  color: #fff;
}

/* Pros / Cons blocks stay light-coloured (intentional green/red accents)
   but body text inside needs to stay readable */
.ap-force-dark .ap-sister-pros li,
.ap-force-dark .ap-sister-cons li,
.ap-force-dark .ap-sister-pros li span,
.ap-force-dark .ap-sister-cons li span {
  color: var(--ink) !important;
}

/* =========================================================
   APPEND: extra author-profile classes used by seed content
   ========================================================= */

/* Section H2 used inside the author profile sections — Crimson Pro italic */
.ap-author-section-h2 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
@media (min-width: 768px) {
  .ap-author-section-h2 { font-size: 36px; }
}

/* Contact card (3-card grid at the bottom of author profile) */
.ap-author-contact-card {
  display: block;
  padding: 1.25rem 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px !important;
  color: #fff;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.ap-author-contact-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: oklch(0.55 0.21 263 / 0.5);
}
.ap-author-contact-card .text-action { color: var(--action); }
.ap-author-contact-card .text-white\/65 { color: rgba(255, 255, 255, 0.65); }
.ap-author-contact-card * { color: inherit; }
.ap-author-contact-card > div:first-child { color: #fff; }
.ap-author-contact-card .italic.mt-1\.5 { color: var(--action); }

/* Missing utility classes used by profile content */
.justify-center { justify-content: center; }
.max-w-5xl { max-width: 64rem; }
.max-w-xl  { max-width: 36rem; }
@media (min-width: 768px) {
  .md\:gap-14 { gap: 3.5rem; }
}

/* =========================================================
   FORCE MORE BREATHABLE SPACING INSIDE ARTICLES
   (Sister Sites + Casino Groups)
   Higher specificity than inline `mt-*` / `mb-*` Tailwind classes.
   ========================================================= */
.ap-sister-article > h2,
.ap-network-content .ap-sister-article > h2 {
  margin-top: 5rem;
  margin-bottom: 1.75rem;
}
.ap-sister-article > h3,
.ap-network-content .ap-sister-article > h3 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.ap-sister-article > p,
.ap-network-content .ap-sister-article > p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.ap-sister-article > div,
.ap-sister-article > details,
.ap-sister-article > section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.ap-sister-article > .border-2 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.ap-sister-article > h2 + .border-2,
.ap-sister-article > h2 + div {
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .ap-sister-article > h2,
  .ap-network-content .ap-sister-article > h2 {
    margin-top: 6rem;
    margin-bottom: 2rem;
  }
  .ap-sister-article > h3,
  .ap-network-content .ap-sister-article > h3 {
    margin-top: 3.5rem;
  }
  .ap-sister-article > p,
  .ap-network-content .ap-sister-article > p {
    margin-bottom: 1.5rem;
  }
}

/* The very first H2 in an article shouldn't push way down from the top */
.ap-sister-article > h2:first-of-type,
.ap-sister-article > details:first-child + h2,
.ap-sister-article > *:first-child {
  margin-top: 0;
}

/* =========================================================
   CASINO-GROUP OPERATOR CARD — extra safety so it always renders
   ========================================================= */
.ap-network-card {
  position: relative;
  z-index: 2;
  min-height: 1px;
}
.ap-network-card-offset {
  z-index: 1;
}
/* Ensure the desktop card column actually claims width on lg+ */
@media (min-width: 1024px) {
  .ap-network-hero .lg\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
  .ap-network-hero .lg\:col-span-8 {
    grid-column: span 8 / span 8 !important;
  }
  .ap-network-hero .hidden.lg\:block {
    display: block !important;
  }
}

/* =========================================================
   APPEND: Standalone utility classes required by author profile spec
   ========================================================= */

/* Background opacities */
.bg-white\/\[0\.03\] { background-color: rgba(255, 255, 255, 0.03); }
.bg-white\/\[0\.04\] { background-color: rgba(255, 255, 255, 0.04); }

/* Action color opacities (border + bg) */
.border-action\/30 { border-color: oklch(0.55 0.21 263 / 0.3); }
.border-action\/40 { border-color: oklch(0.55 0.21 263 / 0.4); }
.bg-action\/10     { background-color: oklch(0.55 0.21 263 / 0.1); }
.bg-action\/15     { background-color: oklch(0.55 0.21 263 / 0.15); }
.bg-action\/20     { background-color: oklch(0.55 0.21 263 / 0.2); }
.hover\:bg-action\/10:hover { background-color: oklch(0.55 0.21 263 / 0.1); }

/* Rounded radius — exceptions to the global border-radius:0 rule */
.rounded-lg   { border-radius: 8px !important; }
.rounded-2xl  { border-radius: 16px !important; }
.rounded-full { border-radius: 9999px !important; }

/* aspect-square */
.aspect-square { aspect-ratio: 1 / 1; }

/* w-60, w-80, md:w-80 */
.w-60 { width: 15rem; }
.w-80 { width: 20rem; }
@media (min-width: 768px) { .md\:w-80 { width: 20rem; } }

/* Drop-shadow utilities used by author photo */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-action\/10 { box-shadow: 0 25px 50px -12px oklch(0.55 0.21 263 / 0.1); }

/* Standalone author pill class (kept in addition to .ap-author-pill-btn) */
.ap-author-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 2px solid oklch(0.55 0.21 263 / 0.4);
  border-radius: 9999px !important;
  color: var(--action);
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.2s;
}
.ap-author-pill:hover {
  background-color: oklch(0.55 0.21 263 / 0.1);
}

/* =============================================================================
   LEGAL PAGES (TYPE B) — Privacy Policy, Terms & Conditions
   Light background, dark text, sticky sidebar TOC on desktop.
   ============================================================================ */

.ap-legal-breadcrumb {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.ap-legal-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}
.ap-legal-breadcrumb a:hover {
  color: var(--action);
}

.ap-legal-h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 0.95;
}

.ap-legal-updated {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--ink-soft);
}

/* Two-column grid wrapper — used by .ap-legal-grid */
.ap-legal-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .ap-legal-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ---------- TOC sidebar ---------- */
.ap-legal-toc-mobile {
  border: 1px solid rgba(15, 17, 23, 0.15);
  border-radius: 4px;
  padding: 1rem;
  background-color: rgba(15, 17, 23, 0.04);
}
.ap-legal-toc-mobile summary {
  cursor: pointer;
  font-family: var(--font-headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--ink);
}
.ap-legal-toc-mobile[open] summary {
  margin-bottom: 0.5rem;
}

.ap-legal-toc-desktop {
  /* Sticky positioning handled by inline `.sticky.top-24` utilities */
}
.ap-legal-toc-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  margin-bottom: 0.75rem;
}

.ap-legal-toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid rgba(15, 17, 23, 0.15);
}
.ap-legal-toc-list li {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.ap-legal-toc-list li + li {
  margin-top: 0.5rem;
}
.ap-legal-toc-list a {
  display: block;
  color: rgba(15, 17, 23, 0.75);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  padding: 2px 0;
}
.ap-legal-toc-list a:hover,
.ap-legal-toc-list a:focus-visible {
  color: var(--action);
}

/* ---------- Article body ---------- */
.ap-legal-content {
  max-width: 72ch;
  color: rgba(15, 17, 23, 0.9);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
}

.ap-legal-content p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(15, 17, 23, 0.9);
  margin: 0 0 1rem 0;
}
.ap-legal-content p + p {
  margin-top: 1rem;
}

.ap-legal-content h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 96px;
}
@media (min-width: 768px) {
  .ap-legal-content h2 {
    font-size: 26px;
  }
}

.ap-legal-content a {
  color: var(--action);
  text-decoration: underline;
  text-decoration-color: rgba(34, 102, 232, 0.4);
  text-underline-offset: 3px;
}
.ap-legal-content a:hover {
  text-decoration-color: var(--action);
}

.ap-legal-content strong {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Related cards ---------- */
.ap-legal-related {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .ap-legal-related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ap-legal-related-card {
  display: block;
  border: 1px solid rgba(15, 17, 23, 0.15);
  padding: 1.25rem;
  text-decoration: none;
  transition: border-color 0.2s;
  color: var(--ink);
}
.ap-legal-related-card:hover {
  border-color: var(--action);
}
.ap-legal-related-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: var(--action);
  margin-bottom: 0.5rem;
}
.ap-legal-related-title {
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--ink);
}

/* ---------- Utility shims (only the ones not already defined above) ---------- */
/* lg:col-span-3 / lg:col-span-9 — desktop column spans for the legal TOC + body */
@media (min-width: 1024px) {
  .lg\:col-span-3  { grid-column: span 3  / span 3; }
  .lg\:col-span-9  { grid-column: span 9  / span 9; }
}