/*
Theme Name: LivePanthers-Final11
Theme URI: https://livepanthers.com
Description: Live Casino Review Theme - Brutalist Design
Author: LivePanthers
Version: 1100.0.0
Text Domain: livepanthers-final11
*/

/* ============================================
   FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ============================================
   CSS VARIABLES (from index.css)
   ============================================ */
:root {
  /* RED & CREAM PALETTE */
  --background: 0 0% 93%;
  --foreground: 220 15% 10%;
  --card: 0 0% 100%;
  --card-foreground: 220 15% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 10%;

  /* DEEP MAROON PRIMARY */
  --primary: 0 85% 26%;
  --primary-foreground: 0 0% 93%;
  --primary-light: 0 65% 38%;

  --secondary: 42 67% 75%;
  --secondary-foreground: 0 85% 26%;

  --muted: 0 0% 88%;
  --muted-foreground: 220 10% 25%;

  /* BRIGHT RED ACCENT */
  --accent: 0 59% 47%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 85% 26%;
  --destructive-foreground: 0 0% 100%;

  /* BORDERS */
  --border: 0 85% 26%;
  --input: 0 0% 88%;
  --ring: 0 59% 47%;

  --radius: 0px;

  /* PALETTE COLORS */
  --gold: 42 67% 75%;
  --gold-foreground: 0 85% 26%;

  /* Functional colors */
  --success: 120 40% 40%;
  --warning: 42 67% 55%;
  --error: 0 85% 26%;
  --info: 200 50% 45%;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* NO overflow-x:hidden here — it breaks position:sticky on the header */
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

h1 {
  font-size: 2.25rem; /* text-4xl */
  letter-spacing: -2px;
  color: hsl(var(--primary));
}

h2 {
  font-size: 1.5rem; /* text-2xl */
  letter-spacing: -1px;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background: hsl(var(--accent));
}

h3 {
  font-size: 1.5rem; /* text-2xl */
}

h4 {
  font-size: 1.25rem; /* text-xl */
}

@media (min-width: 768px) {
  h1 { font-size: 3rem; /* text-5xl */ }
  h2 { font-size: 1.875rem; /* text-3xl */ }
  h3 { font-size: 1.875rem; }
  h4 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 3.75rem; /* text-6xl */ }
  h2 { font-size: 2.25rem; /* text-4xl */ }
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container-brutal {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .container-brutal { width: 72%; }
}

@media (min-width: 1024px) {
  .container-brutal { width: 68%; }
}

.section-brutal {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .section-brutal {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .section-brutal {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ============================================
   BORDER UTILITIES
   ============================================ */
.border-3 { border-width: 3px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-b-3 { border-bottom-width: 3px; border-bottom-style: solid; }
.border-t-3 { border-top-width: 3px; border-top-style: solid; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  border-width: 3px;
  border-style: solid;
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
}

/* Sizes */
.btn-sm { height: 2.5rem; padding: 0.5rem 1.5rem; font-size: 0.75rem; }
.btn-md { height: 3rem; padding: 0.75rem 2rem; font-size: 0.875rem; }
.btn-lg { height: 3.5rem; padding: 1rem 2.5rem; font-size: 1rem; }

/* Variants */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}
.btn-primary:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--secondary));
}
.btn-secondary:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.btn-outline {
  background-color: transparent;
  color: hsl(var(--accent));
  border-color: hsl(var(--accent));
}
.btn-outline:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.btn-ghost {
  background-color: transparent;
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.btn-ghost:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-gold {
  background-color: hsl(var(--gold));
  color: hsl(var(--gold-foreground));
  border-color: hsl(var(--gold));
}
.btn-gold:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.btn-full { width: 100%; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 3px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

.header-inner {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .header-inner { height: 5rem; }
}

.header-logo img {
  height: 3rem;
  width: auto;
}

@media (min-width: 768px) {
  .header-logo img { height: 4rem; }
}

/* Desktop Nav */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
}

.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: hsl(var(--foreground));
  transition: color 0.2s;
}

.nav-dropdown-toggle:hover {
  color: hsl(var(--primary));
}

.nav-dropdown-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s;
}

.nav-dropdown-toggle.active svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  width: 16rem;
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  z-index: 50;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  animation: fadeIn 0.3s ease-out;
  display: none;
}

.nav-dropdown-menu.open { display: block; }

.nav-dropdown-menu a,
.nav-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  transition: all 0.2s;
  border-bottom: 1px solid hsl(var(--border));
}

.nav-dropdown-menu a:last-child,
.nav-dropdown-menu button:last-child {
  border-bottom: none;
}

.nav-dropdown-menu .view-all {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-dropdown-menu .view-all:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.nav-dropdown-menu a:not(.view-all):hover,
.nav-dropdown-menu button:not(.view-all):hover {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.nav-dropdown-menu a:not(.view-all),
.nav-dropdown-menu button:not(.view-all) {
  color: hsl(var(--muted-foreground));
}

.nav-link {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: hsl(var(--foreground));
  transition: color 0.2s;
}

.nav-link:hover {
  color: hsl(var(--primary));
}

.header-cta {
  display: none;
}

@media (min-width: 1024px) {
  .header-cta { display: block; }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  border: 3px solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.mobile-menu-toggle:hover {
  background-color: hsl(var(--secondary));
}

/* When the drawer is open, hide the small hamburger entirely —
   the big "CLOSE MENU" button inside the drawer is the only close affordance. */
.mobile-menu-toggle.is-open {
  display: none !important;
}

.mobile-menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  stroke: currentColor;
}

@media (min-width: 1024px) {
  .mobile-menu-toggle { display: none; }
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  top: 4rem;
  background-color: hsl(var(--background));
  z-index: 40;
  animation: fadeIn 0.3s ease-out;
}

@media (min-width: 768px) {
  .mobile-menu { top: 5rem; }
}

.mobile-menu.open { display: block; }

@media (min-width: 1024px) {
  .mobile-menu { display: none !important; }
}

.mobile-menu-inner {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

/* Prominent in-menu close button (mobile/tablet) */
.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 3px solid hsl(var(--primary));
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  background-color: hsl(var(--accent));
  border-color: hsl(var(--accent));
  outline: none;
}

.mobile-menu-close svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
}

@media (min-width: 1024px) {
  .mobile-menu-close { display: none; }
}

.mobile-menu-category {
  border-bottom: 1px solid hsl(var(--border));
}

.mobile-menu-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
}

.mobile-menu-category-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s;
}

.mobile-menu-category-toggle.expanded svg {
  transform: rotate(180deg);
}

.mobile-menu-sub {
  display: none;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

.mobile-menu-sub.open { display: flex; flex-direction: column; gap: 0.25rem; }

.mobile-menu-sub a {
  display: block;
  padding: 0.5rem 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s;
}

.mobile-menu-sub a:first-child {
  font-weight: 600;
  color: hsl(var(--primary));
}

.mobile-menu-sub a:hover {
  color: hsl(var(--primary));
}

.mobile-nav-link {
  display: block;
  padding: 1rem 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  transition: color 0.2s;
}

.mobile-nav-link:hover {
  color: hsl(var(--primary));
}

.mobile-menu-cta {
  padding-top: 2rem;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  background-color: hsl(var(--primary));
  border-bottom: 3px solid hsl(var(--border));
}

.hero-overline {
  display: inline-block;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.5rem 1.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

.hero-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  line-height: 0.9;
  margin-bottom: 2rem;
  color: hsl(var(--primary-foreground));
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Global overflow protection */
.container-brutal { overflow-wrap: break-word; word-wrap: break-word; }
.article-body { overflow-wrap: break-word; word-wrap: break-word; max-width: 100%; }
.article-body img { max-width: 100%; height: auto; }
.review-card-v2-body { overflow-wrap: break-word; word-wrap: break-word; }
.content-sections p, .review-subsection p { overflow-wrap: break-word; word-wrap: break-word; }

.hero-title span {
  color: hsl(var(--secondary));
}

@media (min-width: 640px) {
  .hero-title { font-size: 3rem; }
}

@media (min-width: 768px) {
  .hero-title { font-size: 3.75rem; }
}

@media (min-width: 1024px) {
  .hero-title { font-size: 4.5rem; }
}

.hero-tagline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  font-style: italic;
  color: hsl(var(--secondary));
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .hero-tagline { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  .hero-tagline { font-size: 1.875rem; }
}

.hero-description {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.125rem;
  color: hsl(var(--primary-foreground) / 0.8);
  margin-bottom: 2.5rem;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .hero-description { font-size: 1.25rem; }
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; }
}

.hero-cta-primary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--secondary));
}

.hero-cta-primary:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.hero-cta-secondary {
  background-color: transparent;
  color: hsl(var(--secondary));
  border-color: hsl(var(--secondary));
}

.hero-cta-secondary:hover {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* ============================================
   CASINO GRID SECTION
   ============================================ */
.casino-grid-section {
  background-color: hsl(var(--card));
  border-bottom: 3px solid hsl(var(--border));
}

.section-header {
  margin-bottom: 3rem;
}

.section-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .section-title { font-size: 3.75rem; }
}

.section-subtitle {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
}

/* Casino Grid */
.casino-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .casino-grid { gap: 1rem; }
}

@media (min-width: 1024px) {
  .casino-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

/* Casino Card */
.casino-card {
  background-color: hsl(var(--primary-light));
  border: 3px solid hsl(var(--primary-light));
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.casino-card-rank {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 1.75rem;
  height: 1.75rem;
  background-color: hsl(var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .casino-card-rank { width: 2rem; height: 2rem; }
}

.casino-card-rank span {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: hsl(var(--accent-foreground));
}

@media (min-width: 768px) {
  .casino-card-rank span { font-size: 0.875rem; }
}

.casino-card-logo {
  width: 100%;
  height: 6rem;
  background-color: hsl(var(--primary-light));
  border-bottom: 3px solid hsl(var(--accent) / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media (min-width: 768px) {
  .casino-card-logo { height: 9rem; }
}

.casino-card-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.casino-card-logo-placeholder {
  width: 4rem;
  height: 4rem;
  background-color: hsl(var(--primary-foreground) / 0.1);
  border: 2px dashed hsl(var(--primary-foreground) / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .casino-card-logo-placeholder { width: 5rem; height: 5rem; }
}

.casino-card-logo-placeholder span {
  font-size: 8px;
  color: hsl(var(--primary-foreground) / 0.5);
  text-transform: uppercase;
  font-weight: 700;
}

@media (min-width: 768px) {
  .casino-card-logo-placeholder span { font-size: 10px; }
}

.casino-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem;
  background-color: hsl(var(--card));
}

@media (min-width: 768px) {
  .casino-card-content { padding: 1rem; }
}

.casino-card-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 0.375rem;
  color: hsl(var(--foreground));
}

@media (min-width: 768px) {
  .casino-card-name { font-size: 1rem; }
}

/* Star Rating */
.star-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .star-rating { margin-bottom: 0.75rem; }
}

.star-rating .stars {
  display: flex;
  gap: 0.125rem;
}

.star-rating svg {
  width: 0.875rem;
  height: 0.875rem;
}

@media (min-width: 768px) {
  .star-rating svg { width: 1rem; height: 1rem; }
}

.star-rating .star-filled {
  color: hsl(var(--gold));
  fill: hsl(var(--gold));
}

.star-rating .star-empty {
  color: hsl(var(--muted-foreground) / 0.3);
  fill: none;
  stroke: currentColor;
}

.star-rating .rating-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

@media (min-width: 768px) {
  .star-rating .rating-number { font-size: 0.875rem; }
}

/* Welcome Offer */
.casino-card-offer {
  text-align: center;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .casino-card-offer { margin-bottom: 1rem; }
}

.casino-card-offer p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: hsl(var(--primary));
  line-height: 1.25;
}

@media (min-width: 768px) {
  .casino-card-offer p { font-size: 0.875rem; }
}

/* Payment Icons */
.casino-card-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .casino-card-payments { margin-bottom: 1rem; }
}

.casino-card-payments img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

@media (min-width: 768px) {
  .casino-card-payments img { width: 2rem; height: 2rem; }
}

/* Perks */
.casino-card-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .casino-card-perks { margin-bottom: 1rem; }
}

.casino-card-perk {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: hsl(var(--accent));
  font-weight: 600;
  font-size: 10px;
}

@media (min-width: 768px) {
  .casino-card-perk { font-size: 0.75rem; }
}

.casino-card-perk svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* CTA */
.casino-card-cta {
  margin-top: auto;
}

/* Load More */
.load-more-wrapper {
  margin-top: 3rem;
  text-align: center;
}

/* ============================================
   ABOUT US SECTION
   ============================================ */
.about-section {
  background-color: hsl(var(--card));
  border-bottom: 3px solid hsl(var(--border));
}

.about-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .about-inner {
    flex-direction: row;
    gap: 4rem;
  }
}

.about-text { flex: 1; }

.about-text p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
  line-height: 1.625;
}

.about-text p:first-of-type {
  font-size: 1.125rem;
}

.about-text .btn {
  margin-top: 2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .team-grid {
    width: auto;
    flex-shrink: 0;
  }
}

.team-card {
  background-color: hsl(var(--background));
  border: 3px solid hsl(var(--border));
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s;
}

.team-card:hover {
  border-color: hsl(var(--accent));
}

.team-card img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border: 3px solid hsl(var(--border));
  margin: 0 auto 0.75rem;
}

@media (min-width: 768px) {
  .team-card img { width: 6rem; height: 6rem; }
}

.team-card-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  line-height: 1.25;
}

.team-card-role {
  font-size: 0.75rem;
  color: hsl(var(--accent));
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* ============================================
   TESTING PROCESS SECTION
   ============================================ */
.testing-section {
  background-color: hsl(var(--card));
  border-bottom: 3px solid hsl(var(--border));
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.step-card {
  position: relative;
  background-color: hsl(var(--background));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
  transition: all 0.2s;
}

@media (min-width: 768px) {
  .step-card { padding: 2rem; }
}

.step-card:hover {
  border-color: hsl(var(--accent));
}

.step-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .step-card-inner { gap: 2rem; }
}

.step-icon-wrapper { flex-shrink: 0; }

.step-icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.step-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: hsl(var(--primary-foreground));
}

.step-number {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.875rem;
  color: hsl(var(--muted-foreground) / 0.4);
  display: block;
  text-align: center;
  user-select: none;
}

.step-content h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}

.step-card:hover .step-content h3 {
  color: hsl(var(--accent));
}

.step-content p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

/* ============================================
   HOW WE RATE SECTION
   ============================================ */
.rate-section {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
}

.criteria-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.criteria-card {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
  transition: border-color 0.2s;
}

@media (min-width: 768px) {
  .criteria-card { padding: 2rem; }
}

.criteria-card:hover {
  border-color: hsl(var(--accent));
}

.criteria-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .criteria-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.criteria-header h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
}

.criteria-weight {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.criteria-bar {
  width: 10rem;
  height: 0.75rem;
  background-color: hsl(var(--muted));
  overflow: hidden;
}

.criteria-bar-fill {
  height: 100%;
  background-color: hsl(var(--accent));
  transition: width 0.5s;
}

.criteria-percent {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: hsl(var(--accent));
  min-width: 3ch;
  text-align: right;
}

.criteria-card p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

/* ============================================
   WHY TRUST US SECTION
   ============================================ */
.trust-section {
  background-color: hsl(var(--primary));
  border-bottom: 3px solid hsl(var(--border));
}

.trust-section .section-title {
  color: hsl(var(--primary-foreground));
}

.trust-section .section-title::before {
  background: hsl(var(--secondary));
}

.trust-section .section-subtitle {
  color: hsl(var(--primary-foreground) / 0.8);
}

.trust-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trust-card {
  background-color: hsl(var(--primary-foreground) / 0.1);
  border: 3px solid hsl(var(--primary-foreground) / 0.2);
  padding: 1.5rem;
  transition: border-color 0.2s;
}

@media (min-width: 768px) {
  .trust-card { padding: 2rem; }
}

.trust-card:hover {
  border-color: hsl(var(--secondary));
}

.trust-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .trust-card-inner { gap: 2rem; }
}

.trust-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  background-color: hsl(var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: hsl(var(--secondary-foreground));
}

.trust-card h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: hsl(var(--primary-foreground));
  transition: color 0.2s;
}

.trust-card:hover h3 {
  color: hsl(var(--secondary));
}

.trust-card p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.75);
  line-height: 1.625;
}

/* ============================================
   GAME CATEGORIES, PROVIDERS, LIVE BETTING
   ============================================ */
.categories-section,
.betting-section,
.blog-guides-section {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
}

.providers-section {
  background-color: hsl(var(--card));
  border-bottom: 3px solid hsl(var(--border));
}

.section-header-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .section-header-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .content-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .content-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Content Card (shared by games, providers, blog, guides) */
.content-card {
  display: block;
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  overflow: hidden;
  transition: all 0.2s;
}

.content-card:hover {
  border-color: hsl(var(--accent));
}

.providers-section .content-card {
  background-color: hsl(var(--background));
}

.content-card-thumbnail {
  aspect-ratio: 16/9;
  background-color: hsl(var(--secondary));
  border-bottom: 3px solid hsl(var(--border));
  overflow: hidden;
}

.content-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.content-card:hover .content-card-thumbnail img {
  transform: scale(1.05);
}

/* Provider logo area */
.content-card-logo-area {
  aspect-ratio: 16/9;
  background-color: hsl(var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-bottom: 3px solid hsl(var(--border));
}

.content-card-logo-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.content-card-body {
  padding: 1.5rem;
}

.content-card-body h3,
.content-card-body h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: hsl(var(--foreground));
  transition: color 0.2s;
  margin-bottom: 0.5rem;
  padding: 0;
  position: static;
  display: block;
}

.content-card-body h2::before { display: none; }

.content-card:hover .content-card-body h3,
.content-card:hover .content-card-body h2 {
  color: hsl(var(--accent));
}

/* Heading variants for cards */
.content-card-heading {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: hsl(var(--foreground));
  transition: color 0.2s;
  margin-bottom: 0.5rem;
  padding: 0;
  position: static;
  display: block;
}

.content-card-heading::before { display: none; }

.content-card:hover .content-card-heading {
  color: hsl(var(--accent));
}

.content-card-heading-sm {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: hsl(var(--foreground));
  transition: color 0.2s;
  margin-bottom: 0.5rem;
  padding: 0;
  position: static;
  display: block;
}

.content-card-heading-sm::before { display: none; }

.content-card:hover .content-card-heading-sm {
  color: hsl(var(--accent));
}

.content-card-body > h3.card-title-lg {
  font-size: 1.125rem;
}

.content-card-body p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.content-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  padding: 0.5rem 1rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: all 0.2s;
}

.content-card:hover .content-card-cta {
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
}

.content-card-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s;
}

.content-card:hover .content-card-cta svg {
  transform: translateX(0.25rem);
}

/* Betting card (no thumbnail) */
.betting-card {
  display: block;
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
  transition: all 0.2s;
  overflow: hidden;
  max-width: 100%;
}

.betting-card:hover {
  border-color: hsl(var(--accent));
}

.betting-card h3,
.betting-card h2,
.betting-card-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-weight: 700;
  font-size: 1.5rem;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
  transition: color 0.2s;
  padding: 0;
  position: static;
  display: block;
}

.betting-card h2::before,
.betting-card-title::before { display: none; }

.betting-card:hover h3,
.betting-card:hover h2,
.betting-card:hover .betting-card-title {
  color: hsl(var(--accent));
}

.betting-card p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.betting-card .content-card-cta {
  margin-top: 0.5rem;
}

/* ============================================
   BLOG & GUIDES (subsections within one section)
   ============================================ */
.blog-guides-section .subsection {
  margin-bottom: 4rem;
}

.blog-guides-section .subsection:last-child {
  margin-bottom: 0;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  transition: border-color 0.2s;
}

.faq-item.open {
  border-color: hsl(var(--accent));
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  text-align: left;
  transition: background-color 0.2s;
  cursor: pointer;
}

.faq-question:hover {
  background-color: hsl(var(--secondary) / 0.5);
}

.faq-item.open .faq-question {
  background-color: hsl(var(--secondary));
}

.faq-question span {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  padding-right: 1rem;
}

.faq-question svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0.5rem 1.5rem 1.5rem;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-answer p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer-main {
  background-color: hsl(var(--primary));
  border-top: 3px solid hsl(var(--border));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
  }
}

.footer-brand-col {
  grid-column: span 1;
}

.footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.footer-brand-logo .live-badge {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.25rem 0.5rem;
}

.footer-brand-logo .panthers-text {
  color: hsl(var(--primary-foreground));
}

.footer-brand-col p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.7);
  line-height: 1.625;
}

.footer-link-col h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  color: hsl(var(--secondary));
}

.footer-link-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-link-col a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.7);
  transition: color 0.2s;
}

.footer-link-col a:hover {
  color: hsl(var(--secondary));
}

/* Responsible Gaming */
.footer-responsible {
  background-color: hsl(var(--primary));
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
}

.footer-responsible-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .footer-responsible-inner {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
}

.footer-responsible-text { flex: 1; }

.footer-responsible-text h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: hsl(var(--secondary));
}

.footer-responsible-text p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.7);
}

.footer-responsible-badges {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-responsible-badges a {
  padding: 0.5rem 1rem;
  border: 3px solid hsl(var(--primary-foreground) / 0.3);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: hsl(var(--primary-foreground));
  transition: all 0.2s;
}

.footer-responsible-badges a:hover {
  border-color: hsl(var(--secondary));
  color: hsl(var(--secondary));
}

.footer-responsible-badges .age-badge {
  padding: 0.5rem 1rem;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 0.875rem;
  font-weight: 700;
}

/* Bottom Bar */
.footer-bottom {
  background-color: hsl(var(--primary));
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-bottom p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  color: hsl(var(--primary-foreground) / 0.5);
}

/* ============================================
   SVG ICONS (inline)
   ============================================ */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   UTILITY: group hover arrow
   ============================================ */
.btn .arrow-icon {
  transition: transform 0.2s;
}

.btn:hover .arrow-icon {
  transform: translateX(0.25rem);
}

/* ============================================
   WORDPRESS SPECIFIC
   ============================================ */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* ============================================
   TABLET FIXES (768px - 1023px)
   Matching source Tailwind breakpoints exactly
   ============================================ */

/* Casino grid: source uses grid-cols-2 on mobile, lg:grid-cols-4 on desktop.
   Tablet (768-1023) stays 2 cols — same as source. Already correct. */

/* Content grids (games/providers/blog/guides): sm:grid-cols-2 lg:grid-cols-3
   Tablet should show 2 cols */
@media (min-width: 640px) and (max-width: 1023px) {
  .content-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Footer grid: md:grid-cols-2 lg:grid-cols-5 — tablet shows 2 cols */
/* Already correct in current CSS */

/* Contact grid: md:grid-cols-3 for info cards */
@media (min-width: 768px) {
  .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Contact form grid: lg:grid-cols-2 for main section */
@media (min-width: 1024px) {
  .contact-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .contact-main-grid { gap: 4rem; }
}

/* ============================================
   WHO WE ARE SECTION FIX
   Source: flex-col lg:flex-row gap-10 lg:gap-16
   Team grid: grid-cols-2 gap-4, lg:flex-shrink-0, w-full lg:w-auto
   ============================================ */

/* The about-inner already has flex-col / lg:flex-row.
   Fix: ensure team-grid doesn't stretch too wide on desktop,
   and the flex layout matches source exactly */

/* ============================================
   INNER PAGE STYLES
   ============================================ */

/* Page Hero (reused across About, Blog, Guides, Contact, Article pages) */
.page-hero {
  background-color: hsl(var(--primary));
  border-bottom: 3px solid hsl(var(--border));
}

.page-hero-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 2rem;
  color: hsl(var(--primary-foreground));
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.page-hero-title span {
  color: hsl(var(--secondary));
}

@media (min-width: 640px) {
  .page-hero-title { font-size: 3rem; }
}

@media (min-width: 768px) {
  .page-hero-title { font-size: 3.75rem; }
}

@media (min-width: 1024px) {
  .page-hero-title { font-size: 4.5rem; }
}

.page-hero-subtitle {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  font-style: italic;
  color: hsl(var(--secondary));
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .page-hero-subtitle { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  .page-hero-subtitle { font-size: 1.875rem; }
}

.page-hero-description {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.125rem;
  color: hsl(var(--primary-foreground) / 0.8);
  line-height: 1.625;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (min-width: 768px) {
  .page-hero-description { font-size: 1.25rem; }
}

/* ============================================
   ABOUT US PAGE
   ============================================ */
.about-content-section {
  margin-bottom: 3rem;
}

.about-content-section h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -1px;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  color: hsl(var(--foreground));
}

@media (min-width: 768px) {
  .about-content-section h2 { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .about-content-section h2 { font-size: 2.25rem; }
}

.about-content-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background: hsl(var(--accent));
}

.about-content-section p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin-bottom: 1rem;
}

.about-content-section h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: hsl(var(--foreground));
}

.about-subsections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

/* Team Member Cards (About Page - detailed) */
.team-member-card {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
  transition: border-color 0.2s;
}

.team-member-card:hover {
  border-color: hsl(var(--accent));
}

.team-member-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .team-member-header { flex-direction: row; }
}

.team-member-header img {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border: 3px solid hsl(var(--border));
  flex-shrink: 0;
}

.team-member-header h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.team-member-role {
  color: hsl(var(--accent));
  font-weight: 600;
  margin-bottom: 1rem;
}

.team-member-bio {
  margin-top: 1rem;
}

.team-member-bio p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin-bottom: 1rem;
}

.team-member-bio p:last-child {
  margin-bottom: 0;
}

/* Review process steps */
.review-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.review-steps h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.review-steps p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin-bottom: 1rem;
}

.review-steps ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-left: 1rem;
}

.review-steps li {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin-bottom: 0.5rem;
}

.review-steps li strong {
  color: hsl(var(--foreground));
}

/* Values section */
.values-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.values-list p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

.values-list strong {
  color: hsl(var(--foreground));
}

/* ============================================
   CONTACT US PAGE
   ============================================ */
.contact-hero {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .contact-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-info-card {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.2s;
}

.contact-info-card:hover {
  border-color: hsl(var(--accent));
}

.contact-info-icon {
  width: 4rem;
  height: 4rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.contact-info-icon svg {
  width: 2rem;
  height: 2rem;
}

.contact-info-card h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.contact-info-card p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.contact-info-card a,
.contact-info-card .contact-value {
  color: hsl(var(--accent));
  font-weight: 600;
}

.contact-info-card a:hover {
  text-decoration: underline;
}

/* Contact Form */
.contact-main-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .contact-main-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}

.contact-form-section h2,
.contact-help-section h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -1px;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.contact-form-section h2::before,
.contact-help-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background: hsl(var(--accent));
}

@media (min-width: 768px) {
  .contact-form-section h2,
  .contact-help-section h2 { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .contact-form-section h2,
  .contact-help-section h2 { font-size: 2.25rem; }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, 1fr); }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
}

.form-group input,
.form-group textarea {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  color: hsl(var(--foreground));
  padding: 1rem;
  width: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  transition: all 0.3s;
  border-radius: 0;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: hsl(var(--accent));
  outline: none;
  box-shadow: 0 0 10px hsl(var(--accent)), 0 0 20px hsl(var(--accent) / 0.3);
}

.form-group textarea {
  resize: vertical;
  min-height: 9rem;
}

/* Help section cards */
.help-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.help-card {
  display: flex;
  gap: 1rem;
}

.help-card-icon {
  width: 3rem;
  height: 3rem;
  background-color: hsl(var(--secondary));
  color: hsl(var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.help-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.help-card h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.help-card p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

/* Privacy box */
.privacy-box {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background-color: hsl(var(--muted));
  border: 3px solid hsl(var(--border));
}

.privacy-box h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.privacy-box p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Bottom CTA */
.bottom-cta {
  background-color: hsl(var(--card));
  border-top: 3px solid hsl(var(--border));
  text-align: center;
}

.bottom-cta h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -1px;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.bottom-cta h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background: hsl(var(--accent));
}

@media (min-width: 768px) {
  .bottom-cta h2 { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .bottom-cta h2 { font-size: 2.25rem; }
}

.bottom-cta p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}

/* ============================================
   TERMS AND CONDITIONS PAGE
   ============================================ */
.terms-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.terms-content h1 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: hsl(var(--primary));
}

@media (min-width: 768px) {
  .terms-content h1 { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .terms-content h1 { font-size: 3.75rem; }
}

.terms-content .terms-updated {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  line-height: 1.625;
}

.terms-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.terms-section h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  padding-bottom: 0;
  margin-bottom: 0;
}

.terms-section h2::before {
  display: none;
}

.terms-section p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

/* ============================================
   BLOG / GUIDES LISTING PAGES
   ============================================ */
/* Uses existing page-hero, content-grid, content-card styles */

/* ============================================
   BLOG ARTICLE / GUIDE TEMPLATE
   ============================================ */
.article-featured-image {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
}

.article-featured-image-inner {
  max-width: 64rem;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 3px solid hsl(var(--border));
  background-color: hsl(var(--muted));
}

.article-featured-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--foreground));
  line-height: 1.625;
}

.article-body h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  position: relative;
  display: inline-block;
}

@media (min-width: 768px) {
  .article-body h2 { font-size: 1.875rem; }
}

.article-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background: hsl(var(--accent));
}

.article-body p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--foreground));
  line-height: 1.625;
}

.article-body h2.pt-4 {
  padding-top: 1rem;
}

/* Article FAQ */
.article-faq {
  background-color: hsl(var(--background));
  border-bottom: 3px solid hsl(var(--border));
}

.article-faq-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.875rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .article-faq-title { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  .article-faq-title { font-size: 3rem; }
}

/* Reuses .faq-list, .faq-item etc from homepage */

/* Author Box */
.author-box {
  background-color: hsl(var(--background));
}

.author-box-inner {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 2rem;
}

.author-box-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .author-box-flex { flex-direction: row; }
}

.author-box-flex img {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  object-fit: cover;
  border: 3px solid hsl(var(--border));
}

.author-box-flex h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.author-box-title {
  font-size: 0.875rem;
  color: hsl(var(--accent));
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.author-box-bio {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.625;
}

/* ============================================
   BADGE (overline) reusable
   ============================================ */
.page-badge {
  display: inline-block;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.5rem 1.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

/* ============================================
   iPad Pro FIXES (1024px - 1199px)
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
  .container-brutal { width: 72%; }
  .hero-title { font-size: 3.75rem; }
  .casino-grid { gap: 0.75rem; }
  .about-inner { gap: 2.5rem; }
  .footer-grid { gap: 1.5rem; }
  .desktop-nav { gap: 1rem; }
  .nav-dropdown-toggle { font-size: 0.75rem; }
  .nav-link { font-size: 0.75rem; }
}

/* ============================================
   ACCENT BADGE (red bg variant)
   ============================================ */
.page-badge-accent {
  display: inline-block;
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ============================================
   CATEGORY SUBSECTION TITLE
   ============================================ */
.category-subsection-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0;
  position: static;
  display: block;
  color: hsl(var(--foreground));
}

h2.category-subsection-title::before { display: none; }
@media (min-width: 768px) { .category-subsection-title { font-size: 1.875rem; } }
.category-subsection-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background: hsl(var(--accent));
}

/* ============================================
   HERO WITH SIDEBAR (review pages)
   ============================================ */
.hero-with-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .hero-with-sidebar { flex-direction: row; align-items: flex-start; gap: 2rem; } }
.hero-main-content { flex: 1; min-width: 0; }
.hero-sidebar { width: 100%; flex-shrink: 0; background-color: hsl(var(--background)); border: 3px solid hsl(var(--accent)); }
@media (min-width: 1024px) { .hero-sidebar { width: 18rem; } }
@media (min-width: 1280px) { .hero-sidebar { width: 20rem; } }
.hero-sidebar-header { background-color: hsl(var(--accent)); padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.hero-sidebar-header svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--accent-foreground)); }
.hero-sidebar-header h3 { font-weight: 700; font-size: 1.125rem; color: hsl(var(--accent-foreground)); padding: 0; margin: 0; }
.hero-sidebar-header h3::before { display: none; }
.hero-sidebar-body { padding: 1rem; }
.hero-sidebar-item { background-color: hsl(var(--card)); border: 3px solid hsl(var(--border)); padding: 0.75rem; margin-bottom: 0.75rem; transition: border-color 0.2s; }
.hero-sidebar-item:hover { border-color: hsl(var(--accent)); }
.hero-sidebar-item.featured { border-color: hsl(var(--accent)); }
.hero-sidebar-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.hero-sidebar-rank { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.hero-sidebar-rank-num { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.hero-sidebar-rank-num.top { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.hero-sidebar-rank-num.regular { background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.hero-sidebar-name { font-weight: 700; font-size: 0.875rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sidebar-rating { display: flex; align-items: center; gap: 0.25rem; background-color: hsl(var(--accent) / 0.1); padding: 0.25rem 0.5rem; flex-shrink: 0; }
.hero-sidebar-rating svg { width: 0.75rem; height: 0.75rem; fill: hsl(var(--accent)); color: hsl(var(--accent)); }
.hero-sidebar-rating span { font-family: monospace; font-size: 0.75rem; font-weight: 700; }
.hero-sidebar-bonus { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; padding-left: 2.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sidebar-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 3px solid hsl(var(--border)); display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* Hero author */
.hero-author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .hero-author { gap: 1rem; margin-bottom: 1.5rem; } }
.hero-author img { width: 2.5rem; height: 2.5rem; object-fit: cover; border: 3px solid hsl(var(--border)); flex-shrink: 0; }
@media (min-width: 768px) { .hero-author img { width: 3rem; height: 3rem; } }
.hero-author-name { font-weight: 700; font-size: 0.875rem; text-transform: uppercase; color: hsl(var(--primary-foreground)); }
.hero-author-meta { font-size: 0.75rem; color: hsl(var(--primary-foreground) / 0.7); }

/* ============================================
   COMPARISON TABLES
   ============================================ */
.comparison-table-wrapper { overflow-x: auto; }
.comparison-table { width: 100%; border: 3px solid hsl(var(--border)); border-collapse: collapse; }
.comparison-table thead tr { background-color: hsl(var(--secondary)); }
.comparison-table th { padding: 1rem; font-weight: 700; text-transform: uppercase; font-size: 0.875rem; border-bottom: 3px solid hsl(var(--border)); text-align: center; }
.comparison-table th:first-child { text-align: left; }
.comparison-table td { padding: 1rem; font-size: 0.875rem; border-bottom: 1px solid hsl(var(--border)); text-align: center; color: hsl(var(--foreground)); }
.comparison-table td:first-child { text-align: left; font-weight: 700; }
.comparison-table tbody tr:hover { background-color: hsl(var(--secondary) / 0.5); }
.check-yes { color: #22c55e; }
.check-no { color: #ef4444; }

/* ============================================
   REVIEW SITE BLOCKS
   ============================================ */
.review-site-block { margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 3px solid hsl(var(--border)); }
.review-site-block:last-child { border-bottom: none; }
.review-site-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.review-site-rank { width: 3rem; height: 3rem; background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; flex-shrink: 0; }
.review-site-name { font-weight: 700; font-size: 1.5rem; }
@media (min-width: 768px) { .review-site-name { font-size: 1.875rem; } }
.review-site-rating { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.review-site-rating svg { width: 1.25rem; height: 1.25rem; fill: hsl(var(--accent)); color: hsl(var(--accent)); }
.review-site-rating span { font-family: monospace; }
.review-subsection { margin-bottom: 1.5rem; }
.review-subsection h4 { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.review-subsection p { color: hsl(var(--foreground)); line-height: 1.625; }

/* Payment tags */
.payment-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.payment-tag { background-color: hsl(var(--secondary)); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }

/* Verdict box */
.verdict-box { background-color: hsl(var(--accent) / 0.1); border: 3px solid hsl(var(--accent)); padding: 1.5rem; }
.verdict-box-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.verdict-box-icon { width: 2.5rem; height: 2.5rem; background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); display: flex; align-items: center; justify-content: center; }
.verdict-box-icon svg { width: 1.25rem; height: 1.25rem; }
.verdict-box-label { font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: hsl(var(--accent)); }
.verdict-box p { color: hsl(var(--foreground)); font-style: italic; line-height: 1.625; }
.verdict-box .verdict-author { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.75rem; font-style: normal; }

/* Pros/Cons */
.pros-cons { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .pros-cons { flex-direction: row; } }
.pros-list, .cons-list { flex: 1; padding: 1rem; }
.pros-list { background-color: hsl(120 40% 40% / 0.05); border: 2px solid hsl(120 40% 40% / 0.2); }
.cons-list { background-color: hsl(0 85% 26% / 0.05); border: 2px solid hsl(0 85% 26% / 0.2); }
.pros-list h5, .cons-list h5 { font-weight: 700; font-size: 0.875rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.pros-list h5 { color: hsl(120 40% 40%); }
.cons-list h5 { color: hsl(0 85% 26%); }
.pros-list ul, .cons-list ul { list-style: none; padding: 0; }
.pros-list li, .cons-list li { font-size: 0.875rem; padding: 0.25rem 0 0.25rem 1.25rem; position: relative; }
.pros-list li::before { content: '\2713'; position: absolute; left: 0; color: hsl(120 40% 40%); font-weight: 700; }
.cons-list li::before { content: '\2717'; position: absolute; left: 0; color: hsl(0 85% 26%); font-weight: 700; }

/* Variety grid */
.variety-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .variety-list { grid-template-columns: repeat(2, 1fr); } }
.variety-item { background-color: hsl(var(--background)); border: 2px solid hsl(var(--border)); padding: 0.75rem; }
.variety-item h5 { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem; }
.variety-item p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }

/* Content sections */
.content-sections { display: flex; flex-direction: column; gap: 2rem; }
.content-sections h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .content-sections h3 { font-size: 1.5rem; } }
.content-sections p { color: hsl(var(--foreground)); line-height: 1.625; margin-bottom: 0.75rem; }

/* Game/feature tags */
.game-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.game-tag { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }

/* Hero features list */
.hero-features-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.hero-feature-tag { display: flex; align-items: center; gap: 0.375rem; background-color: hsl(var(--primary-foreground) / 0.1); border: 1px solid hsl(var(--primary-foreground) / 0.2); padding: 0.25rem 0.75rem; font-size: 0.75rem; color: hsl(var(--primary-foreground)); }
.hero-feature-tag svg { width: 0.75rem; height: 0.75rem; color: hsl(var(--secondary)); }

/* ============================================
   GLOBAL: Tighter section padding for detail pages
   ============================================ */
.section-tight {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .section-tight { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (min-width: 1024px) {
  .section-tight { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ============================================
   REVIEW CARD V2 — matches source design
   Bordered container with bg-secondary header bar
   ============================================ */
.review-card-v2 {
  background-color: hsl(var(--background));
  border: 3px solid hsl(var(--border));
  margin-bottom: 3rem;
}

.review-card-v2:last-child { margin-bottom: 0; }

.review-card-v2-header {
  padding: 1.5rem;
  border-bottom: 3px solid hsl(var(--border));
  background-color: hsl(var(--secondary));
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-card-v2-rank {
  width: 3rem;
  height: 3rem;
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.review-card-v2-header h3 {
  font-weight: 700;
  font-size: 1.5rem;
  color: hsl(var(--foreground));
  padding: 0;
  margin: 0;
  position: static;
  display: block;
}
@media (min-width: 768px) {
  .review-card-v2-header h3 { font-size: 1.875rem; }
}
.review-card-v2-header h3::before { display: none; }

.review-card-v2-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.review-card-v2-rating svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: hsl(var(--accent));
  color: hsl(var(--accent));
}
.review-card-v2-rating span { font-family: monospace; }

.review-card-v2-body {
  padding: 1.5rem;
}

.review-card-v2-body .review-subsection {
  margin-bottom: 2rem;
}

.review-card-v2-body .review-subsection:last-child {
  margin-bottom: 0;
}

.review-card-v2-body .review-subsection h4,
.review-card-v2-body .review-subsection h3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  padding: 0;
  position: static;
  display: block;
}
.review-card-v2-body .review-subsection h4::before,
.review-card-v2-body .review-subsection h3::before { display: none; }

/* Pros/Cons TABLE layout (matching source) */
.pros-cons-table {
  width: 100%;
  border: 3px solid hsl(var(--border));
  border-collapse: collapse;
}

.pros-cons-table thead tr {
  background-color: hsl(var(--secondary));
}

.pros-cons-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  border-bottom: 3px solid hsl(var(--border));
  width: 50%;
}

.pros-cons-table td {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  vertical-align: top;
  border-bottom: 1px solid hsl(var(--border));
}

.pros-cons-table .pro-item,
.pros-cons-table .con-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pros-cons-table .pro-item svg { color: #22c55e; flex-shrink: 0; margin-top: 0.125rem; }
.pros-cons-table .con-item svg { color: hsl(var(--accent)); flex-shrink: 0; margin-top: 0.125rem; }

/* ============================================
   TESTIMONIAL CARDS — matching source
   ============================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
  position: relative;
}

.testimonial-quote-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  color: hsl(var(--accent) / 0.3);
}

.testimonial-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.testimonial-avatar {
  width: 3rem;
  height: 3rem;
  background-color: hsl(var(--secondary));
  border: 3px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-avatar svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--muted-foreground));
}

.testimonial-name {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
}

.testimonial-location {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.testimonial-text {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
  line-height: 1.625;
}

/* ============================================
   RELATED PAGES SECTION — matching source
   ============================================ */
.related-pages-section {
  background-color: hsl(var(--card));
  border-bottom: 3px solid hsl(var(--border));
}

.related-pages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .related-pages-grid { grid-template-columns: repeat(3, 1fr); } }

.related-page-card {
  display: block;
  background-color: hsl(var(--background));
  border: 3px solid hsl(var(--border));
  overflow: hidden;
  transition: border-color 0.2s;
}

.related-page-card:hover { border-color: hsl(var(--accent)); }

.related-page-thumb {
  aspect-ratio: 16/9;
  background-color: hsl(var(--secondary));
  border-bottom: 3px solid hsl(var(--border));
  overflow: hidden;
}

.related-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.related-page-card:hover .related-page-thumb img {
  transform: scale(1.05);
}

.related-page-body {
  padding: 1.5rem;
}

.related-page-body h3 {
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  position: static;
}

.related-page-body h3::before { display: none; }

.related-page-card:hover .related-page-body h3 { color: hsl(var(--accent)); }

.related-page-body h3 svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ============================================
   AUTHOR BOX V2 — matching source (bg-card section, bg-background inner)
   ============================================ */
.author-box-v2 {
  background-color: hsl(var(--card));
  border-bottom: 3px solid hsl(var(--border));
}

.author-box-v2-inner {
  background-color: hsl(var(--background));
  border: 3px solid hsl(var(--border));
  padding: 2rem;
}

.author-box-v2-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 640px) { .author-box-v2-flex { flex-direction: row; } }

.author-box-v2-flex img {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  object-fit: cover;
  border: 3px solid hsl(var(--border));
}

.author-box-v2-flex h3 {
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding: 0;
  position: static;
  display: block;
}
.author-box-v2-flex h3::before { display: none; }

.author-box-v2-title {
  font-size: 0.875rem;
  color: hsl(var(--accent));
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.author-box-v2-bio {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

/* ============================================
   HERO CTA BUTTON (secondary style for detail pages)
   ============================================ */
.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 3.5rem;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  border-width: 3px;
  border-style: solid;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--secondary));
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.btn-hero-cta:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.btn-hero-cta svg { width: 1rem; height: 1rem; }

/* ============================================
   GAMBLE RESPONSIBLY SECTION
   ============================================ */
.gamble-responsibly {
  background-color: hsl(var(--primary));
  text-align: center;
}

.gamble-responsibly h2 {
  color: hsl(var(--primary-foreground));
  padding: 0;
  margin-bottom: 1rem;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.gamble-responsibly h2::before { display: none; }
.gamble-responsibly h2 svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--primary-foreground));
}

.gamble-responsibly p {
  color: hsl(var(--primary-foreground) / 0.8);
  margin-bottom: 1.5rem;
}

.gamble-responsibly-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.gamble-responsibly-links a {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: all 0.2s;
}

.gamble-responsibly-links a:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.gamble-responsibly .disclaimer {
  font-size: 0.75rem;
  color: hsl(var(--primary-foreground) / 0.6);
  margin-top: 1.5rem;
}

/* ============================================
   NOT RECOMMENDED WARNING CARDS
   ============================================ */
.warning-card {
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  padding: 1.5rem;
}

.warning-card-icon {
  width: 100%;
  height: 5rem;
  background-color: hsl(var(--destructive) / 0.1);
  border: 3px solid hsl(var(--destructive) / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.warning-card-icon svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--destructive));
}

.warning-card h3 {
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: hsl(var(--destructive));
  padding: 0;
  position: static;
  display: block;
}
.warning-card h3::before { display: none; }

.warning-card p {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
}

/* Variety items inside review cards */
.review-variety-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .review-variety-grid { grid-template-columns: repeat(2, 1fr); } }

.review-variety-item {
  background-color: hsl(var(--background));
  border: 2px solid hsl(var(--border));
  padding: 0.75rem;
}

.review-variety-item h5 {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.review-variety-item p {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

/* ============================================
   SCREENSHOT GALLERY (Preview slots in reviews)
   ============================================ */
.screenshot-gallery {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.screenshot-slot {
  flex-shrink: 0;
  width: 12rem;
  height: 8rem;
  background-color: hsl(var(--secondary));
  border: 3px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  cursor: pointer;
}

.screenshot-slot:hover {
  border-color: hsl(var(--accent));
}

.screenshot-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screenshot-slot-placeholder {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  font-weight: 700;
}

/* Screenshot Lightbox Overlay */
.screenshot-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background-color: hsl(var(--background) / 0.95);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.screenshot-lightbox.open {
  display: flex;
}

.screenshot-lightbox img {
  max-width: 100%;
  max-height: 80vh;
  border: 3px solid hsl(var(--border));
  object-fit: contain;
}

.screenshot-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem;
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  cursor: pointer;
  transition: border-color 0.2s;
}

.screenshot-lightbox-close:hover {
  border-color: hsl(var(--accent));
}

.screenshot-lightbox-close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.screenshot-lightbox-prev,
.screenshot-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  background-color: hsl(var(--card));
  border: 3px solid hsl(var(--border));
  cursor: pointer;
  transition: border-color 0.2s;
}

.screenshot-lightbox-prev:hover,
.screenshot-lightbox-next:hover {
  border-color: hsl(var(--accent));
}

.screenshot-lightbox-prev { left: 1rem; }
.screenshot-lightbox-next { right: 1rem; }

.screenshot-lightbox-prev svg,
.screenshot-lightbox-next svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================
   PROVIDER HERO WITH LOGO (card-style layout)
   Like the Betfair review image: logo on left, content on right
   ============================================ */
.provider-hero-card {
  background-color: hsl(var(--primary));
  border: 3px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .provider-hero-card { flex-direction: row; }
}

.provider-hero-logo {
  background-color: hsl(var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 12rem;
}

@media (min-width: 768px) {
  .provider-hero-logo {
    width: 16rem;
    flex-shrink: 0;
    min-height: auto;
  }
}

@media (min-width: 1024px) {
  .provider-hero-logo { width: 20rem; }
}

.provider-hero-logo img {
  max-width: 100%;
  max-height: 8rem;
  object-fit: contain;
}

.provider-hero-content {
  padding: 1.5rem;
  flex: 1;
}

@media (min-width: 768px) {
  .provider-hero-content { padding: 2rem; }
}

.provider-hero-content h1 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: hsl(var(--primary-foreground));
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .provider-hero-content h1 { font-size: 2rem; }
}

@media (min-width: 1024px) {
  .provider-hero-content h1 { font-size: 2.25rem; }
}

.provider-hero-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.provider-hero-rating .stars {
  display: flex;
  gap: 0.125rem;
}

.provider-hero-rating .stars svg {
  width: 1rem;
  height: 1rem;
}

.provider-hero-rating .star-filled {
  color: hsl(var(--gold));
  fill: hsl(var(--gold));
}

.provider-hero-rating .star-empty {
  color: hsl(var(--muted-foreground) / 0.3);
  fill: none;
  stroke: currentColor;
}

.provider-hero-rating span {
  font-weight: 700;
  font-size: 0.875rem;
  color: hsl(var(--secondary));
}

.provider-hero-description {
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.8);
  line-height: 1.625;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .provider-hero-description { font-size: 1rem; }
}

.provider-hero-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.provider-hero-stat-value {
  font-weight: 700;
  font-size: 1.25rem;
  color: hsl(var(--secondary));
  display: block;
}

.provider-hero-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: hsl(var(--primary-foreground) / 0.6);
  letter-spacing: 0.05em;
}

.provider-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: hsl(var(--primary-foreground) / 0.7);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid hsl(var(--primary-foreground) / 0.2);
}

.provider-hero-meta span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.provider-hero-meta svg {
  width: 0.875rem;
  height: 0.875rem;
}

.provider-hero-disclaimer {
  font-size: 0.6875rem;
  color: hsl(var(--primary-foreground) / 0.5);
  margin-top: 0.75rem;
}

.provider-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 3px solid hsl(var(--secondary));
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: all 0.2s;
  cursor: pointer;
}

.provider-hero-cta:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.provider-hero-cta svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================
   HERO FEATURE GRID (Lucky Streak style)
   ============================================ */
.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .hero-feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--primary-foreground) / 0.8);
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .hero-feature-item { font-size: 0.875rem; }
}

.hero-feature-item svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--secondary));
  flex-shrink: 0;
}

/* Provider logo sidebar (Lucky Streak hero) */
.hero-provider-logo {
  width: 100%;
  flex-shrink: 0;
  background-color: hsl(var(--background));
  border: 3px solid hsl(var(--border));
}

@media (min-width: 1024px) { .hero-provider-logo { width: 18rem; } }
@media (min-width: 1280px) { .hero-provider-logo { width: 20rem; } }

.hero-provider-logo-inner {
  aspect-ratio: 1/1;
  background-color: hsl(var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.hero-provider-logo-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================
   MOBILE FIXES
   ============================================ */

/* Mobile - match source: h-16 (4rem) mobile, md:h-20 (5rem) tablet */
/* Header heights already correct at base level (4rem default, 5rem at 768px+) */
/* Logo: h-12 (3rem) mobile, md:h-16 (4rem) tablet - already correct */

@media (max-width: 767px) {
  /* Prevent ALL horizontal overflow on mobile */
  main, footer, section { max-width: 100vw; overflow-x: hidden; }
  /* DO NOT put overflow-x:hidden on .site-header - it breaks position:sticky */

  /* Hero titles - smaller on mobile */
  .page-hero-title { font-size: 1.75rem; line-height: 1.15; }
  .hero-title { font-size: 1.75rem; }
  .page-hero-subtitle { font-size: 1rem; }
  .page-hero-description { font-size: 0.9375rem; }

  /* Casino cards - proper 2-col on mobile, matching source grid-cols-2 */
  .casino-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .casino-card-logo { height: 5rem; padding: 0.75rem; }
  .casino-card-content { padding: 0.5rem; }
  .casino-card-name { font-size: 0.75rem; }
  .casino-card-offer p { font-size: 0.625rem; }
  .casino-card-payments img { width: 1.25rem; height: 1.25rem; }
  .casino-card-perk { font-size: 8px; }

  /* Content cards - single col on small mobile */
  .content-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Section padding tighter on mobile */
  .section-brutal { padding-top: 2rem; padding-bottom: 2rem; }
  .section-tight { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  /* Container width wider on mobile */
  .container-brutal { width: 90%; }

  /* Mobile menu overlay - top matches header h-16 = 4rem */
  .mobile-menu { top: 4rem; overflow-y: auto; overflow-x: hidden; max-width: 100vw; }

  /* Testimonial grid single column */
  .testimonial-grid { grid-template-columns: 1fr; }

  /* Related pages single column */
  .related-pages-grid { grid-template-columns: 1fr; }

  /* Review cards - reduce padding */
  .review-card-v2-header { padding: 1rem; }
  .review-card-v2-body { padding: 1rem; }
  .review-card-v2-rank { width: 2.5rem; height: 2.5rem; font-size: 1rem; }

  /* Provider hero card stack */
  .provider-hero-card { flex-direction: column; }
  .provider-hero-logo { min-height: 8rem; padding: 1.5rem; }
  .provider-hero-content { padding: 1.25rem; }
  .provider-hero-content h1 { font-size: 1.375rem; }

  /* Author box */
  .author-box-v2-flex { flex-direction: column; }
  .author-box-v2-flex img { width: 4rem; height: 4rem; }

  /* Hero author */
  .hero-author img { width: 2rem; height: 2rem; }
  .hero-author-name { font-size: 0.75rem; }
  .hero-author-meta { font-size: 0.625rem; }

  /* Buttons */
  .btn-hero-cta { font-size: 0.75rem; padding: 0.75rem 1.25rem; height: auto; white-space: normal; }
  .btn-lg { font-size: 0.75rem; padding: 0.75rem 1.5rem; height: auto; white-space: normal; }

  /* Tables must scroll horizontally, not break layout */
  .comparison-table-wrapper, .pros-cons-table { max-width: 100%; }
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Screenshot gallery scroll */
  .screenshot-gallery { max-width: 100%; }

  /* Footer grid single column */
  .footer-grid { grid-template-columns: 1fr; }

  /* Hero CTA full width on mobile */
  .btn-hero-cta { width: 100%; justify-content: center; }

  /* Comparison table smaller text */
  .comparison-table th, .comparison-table td { padding: 0.5rem; font-size: 0.75rem; }

  /* Review card header stack on very narrow screens */
  .review-card-v2-header { flex-wrap: wrap; }
  .review-card-v2-header h3 { font-size: 1.125rem; }

  /* Provider hero card content smaller */
  .provider-hero-stats { gap: 1rem; flex-wrap: wrap; }
  .provider-hero-stat-value { font-size: 1rem; }
  .provider-hero-meta { flex-wrap: wrap; gap: 0.5rem; }

  /* FAQ smaller */
  .faq-question span { font-size: 0.875rem; }
}

/* Tablet content grid - 2 cols */
@media (min-width: 640px) and (max-width: 1023px) {
  .content-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .related-pages-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop content grid rule is set above in the main content-grid section */