/*
Theme Name: sitelikeuk
Theme URI: https://ledgerbet.uk
Author: sitelikeuk Editorial
Description: Independent UK casino review publication. Custom theme — no parent.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sitelikeuk
*/

/* ----------------------------------------------------------------------------
   Design tokens — mirrors src/styles.css `@theme inline` from the Lovable spec.
   Hex values are exact. Do not change.
---------------------------------------------------------------------------- */
:root {
  --color-page:                 #D8E9E2;
  --color-page-alt:             #C7DDD3;
  --color-card:                 #FFFFFF;
  --color-ink:                  #15404F;
  --color-ink-light:            #1F5562;
  --color-ink-dark:             #0F2E37;
  --color-accent:               #E0A646;
  --color-highlight:            #F4EBCD;
  --color-tint:                 #A2CFC2;

  /* shadcn aliases mapped to brand */
  --color-background:           var(--color-page);
  --color-foreground:           var(--color-ink);
  --color-card-foreground:      var(--color-ink);
  --color-popover:              var(--color-card);
  --color-popover-foreground:   var(--color-ink);
  --color-primary:              var(--color-ink);
  --color-primary-foreground:   var(--color-highlight);
  --color-secondary:            var(--color-tint);
  --color-secondary-foreground: var(--color-ink);
  --color-muted:                var(--color-highlight);
  --color-muted-foreground:     var(--color-ink);
  --color-accent-foreground:    var(--color-ink);
  --color-border:               rgba(21, 64, 79, 0.12);
  --color-input:                rgba(21, 64, 79, 0.12);
  --color-ring:                 rgba(21, 64, 79, 0.3);

  --font-serif:                 "Fraunces", Georgia, serif;
  --font-sans:                  "Inter", system-ui, sans-serif;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
}

/* ----------------------------------------------------------------------------
   Self-hosted fonts. woff2 only, latin subset.
   Files copied in Block 7 from node_modules/@fontsource/{family}/files/.
---------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
   Base reset and typography
---------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: rgba(21, 64, 79, 0.12);
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
}

p, ul, ol, blockquote, pre, figure {
  margin: 0;
}

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

img,
svg {
  max-width: 100%;
  display: block;
}

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

input,
textarea,
select {
  font-family: inherit;
  color: inherit;
}

/* ----------------------------------------------------------------------------
   Homepage radius escape — port of `.home-sharp` from src/styles.css.
   Forces border-radius:0 on every utility-style class containing "rounded-",
   EXCEPT pills (rounded-full). Wrapper applied only on the homepage.
---------------------------------------------------------------------------- */
.home-sharp [class*="rounded-"]:not([class*="rounded-full"]) {
  border-radius: 0 !important;
}

/* ----------------------------------------------------------------------------
   LiveTicker animation — preserved exactly from src/styles.css.
---------------------------------------------------------------------------- */
@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-track {
  display: inline-flex;
  gap: 32px;
  white-space: nowrap;
  animation: ticker-move 32s linear infinite;
  padding-left: 24px;
}

.ticker-container:hover .ticker-track {
  animation-play-state: paused;
}

/* ----------------------------------------------------------------------------
   Layout shell — minimal scaffold so the chrome positions correctly while
   per-component CSS for navbar/footer/sections is added in Blocks 3–6.
---------------------------------------------------------------------------- */
.sitelikeuk-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sitelikeuk-main {
  flex: 1 0 auto;
}

/* ============================================================================
   Component CSS for navbar, ticker, footer, cookie banner, hero, casino grid,
   editorial sections, and static page components is appended below in
   Blocks 3 → 6. This file is the single source of truth for all theme styling.
============================================================================ */


/* ============================================================================
   NAVBAR (Block 3) — port of src/components/layout/Navbar.tsx
============================================================================ */
.lb-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-page);
}

.lb-navbar-inner {
  padding: 4px 20px 0;
}

.lb-navbar-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.lb-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  top: -8px;
  left: 8px;
}

.lb-logo-mark {
  flex-shrink: 0;
  display: block;
}

.lb-wordmark {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.lb-nav-pill-wrapper {
  display: none;
  justify-self: center;
}

.lb-nav-pill {
  display: flex;
  align-items: center;
  gap: 18px;
  background-color: var(--color-card);
  border-radius: 9999px;          /* explicit pill — must survive zero-radius global */
  padding: 12px 16px 12px 28px;
  border: 0.5px solid rgba(21, 64, 79, 0.12);
}

.lb-nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity 200ms ease;
}

.lb-nav-link:hover {
  opacity: 0.7;
}

.lb-nav-spacer {
  display: none;
  width: 88px;
  justify-self: end;
}

.lb-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

@media (min-width: 768px) {
  .lb-nav-pill-wrapper { display: flex; }
  .lb-nav-spacer       { display: block; }
  .lb-hamburger        { display: none; }
}

/* ----------------------------------------------------------------------------
   Mobile drawer — toggled via [data-drawer-state="open"] on <body>
---------------------------------------------------------------------------- */
.lb-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--color-page);
  display: none;
  flex-direction: column;
  padding: 24px;
}

body[data-drawer-state="open"] .lb-drawer {
  display: flex;
}

@media (min-width: 768px) {
  .lb-drawer,
  body[data-drawer-state="open"] .lb-drawer {
    display: none;
  }
}

.lb-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lb-drawer-close {
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.lb-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

.lb-drawer-link {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--color-ink);
  text-decoration: none;
}


/* ============================================================================
   LIVE TICKER (Block 3) — port of src/components/ui/LiveTicker.tsx
   The keyframes (`ticker-move`) and the `.ticker-track` / `.ticker-container`
   rules are declared earlier in this file and preserved verbatim.
============================================================================ */
.lb-ticker {
  position: relative;
  width: 100%;
  background-color: var(--color-ink);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.lb-ticker-badge {
  flex-shrink: 0;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.lb-ticker-viewport {
  flex: 1;
  overflow: hidden;
  padding: 9px 0;
}

.lb-ticker-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-highlight);
  font-family: var(--font-sans);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

.lb-ticker-link:hover {
  opacity: 0.8;
}

.lb-ticker-score {
  font-weight: 500;
}

.lb-ticker-trend {
  font-size: 10px;
  line-height: 1;
}

.lb-ticker-trend-up   { color: var(--color-tint); }
.lb-ticker-trend-down { color: var(--color-accent); }
.lb-ticker-trend-flat { color: rgba(244, 235, 205, 0.6); }


/* ============================================================================
   FOOTER (Block 4) — port of src/components/layout/Footer.tsx
============================================================================ */
.lb-footer {
  padding: 0 20px 20px;
}

.lb-footer-card {
  background-color: var(--color-card);
  /* `rounded-lg` in source but radius token is 0 — sharp by design */
  border-radius: 0;
  padding: 24px;
}

/* ----- Top row ------------------------------------------------------------ */
.lb-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid rgba(21, 64, 79, 0.15);
}

.lb-footer-brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-footer-tagline {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  opacity: 0.7;
  margin-top: 4px;
}

.lb-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lb-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-ink);
  padding: 4px 12px;
  border-radius: 9999px;          /* explicit pill — must NOT collapse */
  white-space: nowrap;
}

.lb-badge-18   { background-color: var(--color-highlight); }
.lb-badge-ukgc { background-color: var(--color-tint); }

/* ----- 4-column grid ------------------------------------------------------ */
.lb-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 0;
}

.lb-col-tagline {
  grid-column: span 2;
}

@media (min-width: 768px) {
  .lb-footer-cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lb-col-tagline {
    grid-column: span 1;
  }
}

.lb-col-tagline-text {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  line-height: 1.55;
  opacity: 0.75;
  max-width: 220px;
  margin: 0;
}

.lb-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.lb-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-page);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.lb-social:hover {
  background-color: var(--color-tint);
}

.lb-col-label {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 12px;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.lb-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-col-list a {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  text-decoration: none;
}

.lb-col-list a:hover {
  text-decoration: underline;
}

/* ----- Responsible-gambling strip ----------------------------------------- */
.lb-rg-strip {
  background-color: var(--color-page);
  border-radius: 0;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

.lb-rg-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.lb-rg-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.lb-rg-item a {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
}

.lb-rg-item a:hover {
  text-decoration: underline;
}

.lb-rg-sep {
  color: var(--color-ink);
  opacity: 0.4;
}

/* ----- Bottom bar --------------------------------------------------------- */
.lb-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.lb-copyright {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-ink);
  opacity: 0.55;
}

.lb-legal {
  display: flex;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-ink);
  opacity: 0.55;
}

.lb-legal a {
  color: inherit;
  text-decoration: none;
}

.lb-legal a:hover {
  text-decoration: underline;
}


/* ============================================================================
   COOKIE CONSENT BANNER (Block 4) — port of src/components/layout/CookieConsent.tsx
   Default state: visible (display:flex). PHP renders an inline `display:none`
   so the banner is hidden until cookie-consent.js validates that we should
   show it (no localStorage value AND not on /cookie-policy/).
============================================================================ */
.lb-cookie-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 50;
  max-width: 720px;
  width: calc(100% - 32px);
  background-color: var(--color-ink);
  color: var(--color-highlight);
  border-radius: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

@media (min-width: 768px) {
  .lb-cookie-banner {
    flex-direction: row;
    align-items: center;
  }
}

.lb-cookie-text {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  margin: 0;
  line-height: 1.55;
}

.lb-cookie-text a {
  color: inherit;
  text-decoration: underline;
}

.lb-cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.lb-cookie-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 4px;             /* explicit, NOT pill */
  cursor: pointer;
  border: 0;
  line-height: 1.2;
}

.lb-cookie-decline {
  background: transparent;
  color: var(--color-highlight);
  border: 0.5px solid rgba(244, 235, 205, 0.6);
}

.lb-cookie-accept {
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-weight: 500;
}


/* ============================================================================
   HOMEPAGE (Block 5) — components in static-pages/home.html
============================================================================ */

/* ----- Wrapper (mirrors `pb-10 home-sharp` from index.tsx) ---------------- */
.lb-home-pb {
  padding-bottom: 40px;
}

/* ----- Italic gold accent used in several headlines ---------------------- */
.lb-accent-italic {
  color: var(--color-accent);
  font-style: italic;
}

/* ----- Generic SectionShell wrapper -------------------------------------- */
.lb-section {
  padding: 24px 0;
}

.lb-tone-a { background-color: var(--color-page); }
.lb-tone-b { background-color: var(--color-page-alt); }

.lb-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
}

.lb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
}

.lb-section-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

.lb-section-subtitle {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  margin: 4px 0 0;
  opacity: 0.65;
}

.lb-section-body {
  margin-top: 16px;
}

.lb-section-right-link {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
}


/* =================== HERO ================================================ */
.lb-hero {
  padding: 32px 0;
  background-color: var(--color-page-alt);
}

.lb-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  gap: 26px;
}

@media (min-width: 768px) {
  .lb-hero-inner {
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
  }
}

.lb-hero-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lb-hero-h1 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
}

@media (min-width: 768px) {
  .lb-hero-h1 { font-size: 56px; }
}

.lb-hero-h1-accent {
  color: var(--color-accent);
  font-style: italic;
}

.lb-hero-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.55;
  max-width: 440px;
  opacity: 0.9;
  margin: 0;
  padding: 0;
}

.lb-hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-card);
  border-radius: 9999px;          /* explicit pill */
  padding: 11px 16px;
  border: 0.5px solid rgba(21, 64, 79, 0.15);
}

.lb-hero-search-input {
  flex: 1;
  background: transparent;
  outline: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink);
}

.lb-hero-search-input::placeholder {
  color: rgba(21, 64, 79, 0.55);
}

.lb-hero-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.lb-hero-tile {
  position: relative;
  display: block;
  height: 140px;
  overflow: hidden;
  background-color: var(--color-ink);
  border-radius: 0;
  text-decoration: none;
}

.lb-hero-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-hero-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 64, 79, 0.15) 0%, rgba(21, 64, 79, 0.85) 100%);
}

.lb-hero-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  z-index: 1;
}

.lb-hero-tile-rank {
  color: var(--color-tint);
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.lb-hero-tile-name {
  font-family: var(--font-serif);
  color: var(--color-highlight);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  margin-top: 4px;
}

.lb-hero-tile-meta {
  font-family: var(--font-sans);
  color: var(--color-highlight);
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.85;
}

.lb-hero-pick {
  position: relative;
  height: 348px;
  overflow: hidden;
  background-color: var(--color-ink);
  border-radius: 0;
}

.lb-hero-pick-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 9999px;          /* explicit pill */
  padding: 4px 12px;
  letter-spacing: 0.12em;
  z-index: 2;
}

.lb-hero-pick-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  z-index: 1;
}

.lb-hero-pick-name {
  font-family: var(--font-serif);
  color: var(--color-highlight);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
}

.lb-hero-pick-meta {
  font-family: var(--font-sans);
  color: var(--color-highlight);
  font-size: 11px;
  margin-top: 8px;
  opacity: 0.85;
}

.lb-hero-pick-cta {
  align-self: flex-start;
  margin-top: 16px;
  background-color: var(--color-highlight);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  border-radius: 0;
  padding: 8px 16px;
  text-decoration: none;
}


/* =================== CASINO GRID + CARD + PAGINATION ==================== */
.lb-casino-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lb-casino-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .lb-casino-card {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 14px;
  }
}

.lb-casino-logo-frame {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;             /* inline radius in source — kept */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .lb-casino-logo-frame {
    width: 84px;
    height: 84px;
    aspect-ratio: auto;
  }
}

.lb-casino-logo-frame img {
  width: 100%;
  height: 100%;
}

.lb-casino-body {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lb-casino-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lb-casino-rank {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.lb-casino-trend-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lb-trend-up   { color: var(--color-tint); font-size: 10px; }
.lb-trend-down { color: var(--color-accent); font-size: 10px; }
.lb-trend-flat { color: rgba(21, 64, 79, 0.5); font-size: 10px; }

.lb-score-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-tint);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 9999px;          /* explicit pill */
}

.lb-casino-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-casino-name a {
  color: inherit;
  text-decoration: none;
}

.lb-casino-name a:hover { color: var(--color-accent); }

.lb-casino-bonus {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  margin-top: 6px;
  overflow-wrap: break-word;
}

.lb-casino-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.lb-casino-chip {
  border-radius: 0;
  padding: 6px 8px;
  min-width: 0;
  background: rgba(21, 64, 79, 0.06);
}

.lb-casino-chip-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  opacity: 0.55;
}

.lb-casino-chip-value {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-casino-getbonus {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 200ms;
}

.lb-casino-getbonus:hover { filter: brightness(0.95); }


/* =================== LEAD INTRO ========================================== */
.lb-leadintro {
  padding: 32px 24px;
}

.lb-leadintro-inner {
  max-width: 720px;
  margin: 0 auto;
}

.lb-leadintro-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 20px;
}

.lb-leadintro-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.lb-leadintro-paragraphs p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0;
}


/* =================== LANDSCAPE BAND STAT CARDS =========================== */
.lb-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .lb-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lb-stat-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 14px;
}

.lb-stat-label {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.lb-stat-figure {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.lb-stat-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
  margin-top: 12px;
}

.lb-stat-bar { flex: 1; border-radius: 0; }

.lb-stat-progress {
  height: 6px;
  background-color: var(--color-highlight);
  border-radius: 0;
  overflow: hidden;
  margin-top: 12px;
}

.lb-stat-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 0;
}

.lb-stat-split {
  display: flex;
  height: 6px;
  margin-top: 12px;
  border-radius: 0;
  overflow: hidden;
}

.lb-stat-caption {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-ink);
  margin-top: 12px;
  line-height: 1.45;
  opacity: 0.65;
}


/* =================== EDITORIAL PROSE SECTION ============================= */
.lb-prose-section {
  padding: 40px 24px;
}

.lb-prose-inner {
  max-width: 720px;
  margin: 0 auto;
}

.lb-prose-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
}

.lb-prose-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
  font-size: 17px;
  line-height: 1.4;
  opacity: 0.68;
  margin: 8px 0 0;
}

.lb-prose-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.lb-prose-body p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13.5px;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0;
}


/* =================== HOW WE RATE PILLARS ================================= */
.lb-pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .lb-pillar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lb-pillar-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lb-pillar-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  margin: 12px 0 0;
}

.lb-pillar-desc {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  line-height: 1.4;
  margin-top: 4px;
  opacity: 0.7;
}

.lb-pillar-long-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb-pillar-long-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 14px;
}

.lb-pillar-long-h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
}

.lb-pillar-long-body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  line-height: 1.55;
  opacity: 0.82;
  margin: 0;
}

.lb-methodology-link-row {
  margin-top: 16px;
  text-align: center;
}

.lb-methodology-link {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}


/* =================== NETWORKS SPOTLIGHT ================================== */
.lb-networks-preamble {
  background-color: var(--color-card);
  border-radius: 0;
  margin-bottom: 16px;
  padding: 32px;
}

.lb-networks-preamble-inner {
  max-width: 720px;
  margin: 0 auto;
}

.lb-networks-preamble h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
}

.lb-networks-preamble-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.68;
  margin: 8px 0 0;
}

.lb-networks-preamble-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.lb-networks-preamble-body p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13.5px;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0;
}

.lb-network-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-network-row {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
}

.lb-network-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.lb-network-meta {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin: 4px 0 0;
  opacity: 0.65;
}

.lb-network-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lb-network-bar-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  opacity: 0.6;
  flex-shrink: 0;
}

.lb-network-bar {
  flex: 1;
  height: 8px;
  background-color: var(--color-highlight);
  border-radius: 0;
  overflow: hidden;
}

.lb-network-bar-fill {
  height: 100%;
  background-color: var(--color-ink);
}

.lb-network-arrow svg { opacity: 0.4; }

.lb-network-desc-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb-network-desc-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 14px;
}


/* =================== FROM THE GUIDES ===================================== */
.lb-guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .lb-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lb-guide-card {
  background-color: var(--color-card);
  border-radius: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.lb-guide-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  background-color: var(--color-ink);
}

.lb-guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-guide-card-body { padding: 12px; }

.lb-guide-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.lb-category-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 9999px;          /* explicit pill */
}

.lb-category-tag-tint      { background-color: var(--color-tint); }
.lb-category-tag-highlight { background-color: var(--color-highlight); }

.lb-guide-readtime {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--color-ink);
  opacity: 0.55;
}

.lb-guide-headline {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.lb-guide-card:hover .lb-guide-headline { color: var(--color-accent); }

.lb-guide-excerpt {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  line-height: 1.5;
  margin: 8px 0 0;
  opacity: 0.7;
}

.lb-guide-author {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 9px;
  margin: 12px 0 0;
  opacity: 0.55;
}


/* =================== EDITORIAL TEAM (AuthorCard) ========================= */
.lb-author-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .lb-author-grid { grid-template-columns: 1fr 1fr; }
}

.lb-author-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 18px;
}

.lb-author-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.lb-author-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 9999px;          /* explicit pill — circular avatar */
  object-fit: cover;
}

.lb-author-meta { flex: 1; }

.lb-author-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.lb-author-name a { color: inherit; text-decoration: none; }
.lb-author-name a:hover { color: var(--color-accent); }

.lb-author-role {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  opacity: 0.65;
}

.lb-author-bio {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  line-height: 1.55;
  opacity: 0.8;
  margin: 0 0 14px;
}

.lb-author-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(21, 64, 79, 0.15);
}

.lb-author-stat-value {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.lb-author-stat-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 9px;
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.lb-author-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.lb-author-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  border-radius: 0;
  padding: 8px 16px;
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: filter 200ms;
}

.lb-author-cta:hover { filter: brightness(0.95); }

.lb-author-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-tint);
  border-radius: 0;
  text-decoration: none;
  transition: background-color 200ms;
}

.lb-author-social:hover { background-color: var(--color-highlight); }


/* =================== FAQ ================================================= */
.lb-faq-card {
  background-color: var(--color-card);
}

.lb-faq-item {
  border-top: 0.5px solid rgba(21, 64, 79, 0.12);
}

.lb-faq-item:first-of-type {
  border-top: 0;
}

.lb-faq-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  text-align: left;
  transition: background-color 150ms ease;
}

.lb-faq-summary::-webkit-details-marker { display: none; }
.lb-faq-summary::marker { content: ""; }

.lb-faq-summary:hover {
  background-color: rgba(216, 233, 226, 0.4);
}

.lb-faq-question {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lb-faq-chevron {
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 200ms;
}

details[open] .lb-faq-chevron { transform: rotate(180deg); }

.lb-faq-answer {
  font-family: var(--font-sans);
  color: var(--color-ink);
  padding: 0 20px 20px;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.82;
  max-width: 760px;
  margin-top: -4px;
}


/* =================== GET IN TOUCH ======================================== */
.lb-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 768px) {
  .lb-contact-grid { grid-template-columns: 1fr 1.2fr; }
}

.lb-contact-h3 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.lb-contact-blurb {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 14px;
  opacity: 0.78;
}

.lb-contact-mailto-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-contact-mailto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border-radius: 0;
  padding: 8px 12px;
}

.lb-contact-mailto-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  width: 110px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.lb-contact-mailto-row a {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.lb-contact-form {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 18px;
}

.lb-contact-form h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 14px;
}

.lb-contact-input-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  .lb-contact-input-row { grid-template-columns: 1fr 1fr; }
}

.lb-contact-input,
.lb-contact-textarea {
  background-color: #ffffff;
  border-radius: 0;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink);
  outline: none;
  border: 0.5px solid rgba(21, 64, 79, 0.18);
  width: 100%;
  margin-bottom: 8px;
}

.lb-contact-textarea { resize: vertical; }

.lb-contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}

.lb-contact-form-footer p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  opacity: 0.55;
  margin: 0;
}

.lb-cta-btn-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: filter 200ms;
}

.lb-cta-btn-md:hover { filter: brightness(0.95); }

/* On static pages the GetInTouch send button keeps its rounded-[4px] —
   it is only zeroed on the homepage by the .home-sharp wrapper. */
.lb-staticpage .lb-cta-btn-md { border-radius: 4px; }


/* =================== NEWSLETTER ========================================== */
.lb-newsletter {
  padding: 24px 0;
}

.lb-newsletter-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
}

.lb-newsletter-card {
  background-color: var(--color-ink);
  padding: 26px 24px;
}

.lb-newsletter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}

@media (min-width: 768px) {
  .lb-newsletter-grid { grid-template-columns: 1fr auto; }
}

.lb-newsletter-h2 {
  font-family: var(--font-serif);
  color: var(--color-highlight);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.lb-newsletter-blurb {
  font-family: var(--font-sans);
  color: var(--color-highlight);
  font-size: 12px;
  opacity: 0.75;
  margin: 0;
}

.lb-newsletter-blurb-tint {
  color: var(--color-tint);
  opacity: 1;
}

.lb-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lb-newsletter-input {
  background-color: var(--color-highlight);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  border-radius: 9999px;          /* explicit pill */
  outline: none;
  border: 0;
  padding: 9px 14px;
  min-width: 200px;
}

.lb-newsletter-input::placeholder { color: rgba(21, 64, 79, 0.55); }

.lb-newsletter-btn {
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  border-radius: 9999px;          /* explicit pill */
  padding: 9px 16px;
  border: 0;
  cursor: pointer;
}


/* ============================================================================
   STATIC PAGES (Block 6) — components in src/components/static/*
============================================================================ */

/* ----- StaticPageLayout outer + breadcrumb ------------------------------- */
.lb-staticpage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.lb-breadcrumb {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  margin-bottom: 28px;
}

.lb-breadcrumb-link { opacity: 0.6; }
.lb-breadcrumb-link a { color: inherit; text-decoration: none; }
.lb-breadcrumb-link a:hover { color: var(--color-accent); }
.lb-breadcrumb-current { opacity: 0.85; }
.lb-breadcrumb-sep { opacity: 0.6; margin: 0 6px; }

.lb-staticpage-content {
  max-width: 720px;
  margin: 0 auto;
}

/* TOC layout — desktop sidebar + mobile <details> ------------------------- */
.lb-staticpage-grid {
  display: block;
}

@media (min-width: 1024px) {
  .lb-staticpage-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
  }
  .lb-staticpage-content--with-toc {
    margin: 0;
    max-width: 720px;
  }
}

.lb-toc-aside { display: none; }
@media (min-width: 1024px) {
  .lb-toc-aside { display: block; }
}

.lb-toc {
  position: sticky;
  top: 24px;
  width: 220px;
}

.lb-toc-eyebrow {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 10px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.lb-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lb-toc-item {
  border-top: 0.5px solid rgba(21, 64, 79, 0.08);
}
.lb-toc-item:first-child { border-top: 0; }

.lb-toc-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  text-decoration: none;
  padding: 5px 0;
  opacity: 0.7;
  transition: opacity 200ms;
}
.lb-toc-link:hover { opacity: 1; }

.lb-toc-mobile {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 12px;
  margin-bottom: 24px;
}

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

.lb-toc-mobile summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.lb-toc-mobile summary::-webkit-details-marker { display: none; }
.lb-toc-mobile summary::marker { content: ""; }

.lb-toc-mobile-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-toc-mobile-list a {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  text-decoration: none;
  opacity: 0.75;
}

/* ----- PageHero (static variant) ----------------------------------------- */
.lb-page-hero {
  margin-bottom: 36px;
}

.lb-page-hero-h1 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
}

.lb-page-hero-h1 em {
  color: var(--color-accent);
  font-style: italic;
}

.lb-page-hero-sub {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.65;
  max-width: 600px;
  margin: 18px 0 0;
}

.lb-page-hero-updated {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  opacity: 0.55;
  margin: 12px 0 0;
}

/* ----- ContentSection ---------------------------------------------------- */
.lb-content-section {
  margin-bottom: 32px;
  scroll-margin-top: 32px;
}

.lb-content-section h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  line-height: 1.2;
}

/* ----- Prose ------------------------------------------------------------- */
.lb-prose {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.7;
  max-width: 720px;
}

.lb-prose p { margin: 0 0 16px; }
.lb-prose p:last-child { margin-bottom: 0; }

.lb-prose ol {
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: decimal;
}
.lb-prose ol li { margin-bottom: 8px; }

.lb-prose ul {
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: disc;
}
.lb-prose ul li { margin-bottom: 8px; }

.lb-prose a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}
.lb-prose a:hover { text-decoration: underline; }

.lb-prose code {
  background-color: var(--color-card);
  padding: 2px 6px;
  border-radius: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95em;
}

.lb-prose pre {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.55;
  max-width: 600px;
  margin: 0 0 16px;
  white-space: pre-wrap;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.lb-prose pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.lb-prose strong { font-weight: 500; }

/* Methodology overall-calculation pre block (sits outside Prose) */
.lb-formula-pre {
  background-color: var(--color-card);
  border-radius: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--color-ink);
  margin-bottom: 16px;
  padding: 14px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-width: 600px;
}

/* ----- CardGrid ---------------------------------------------------------- */
.lb-cardgrid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .lb-cardgrid-2,
  .lb-cardgrid-3,
  .lb-cardgrid-4 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .lb-cardgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-cardgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lb-cardgrid-item {
  background: #ffffff;
  border-radius: 0;
  padding: 16px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
}

.lb-cardgrid-icon { display: block; margin-bottom: 8px; }

.lb-cardgrid-heading {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 6px;
}

.lb-cardgrid-body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  opacity: 0.78;
  line-height: 1.55;
}

/* ----- CTACard (static-page variant — uses pill md button) --------------- */
.lb-cta-card {
  background: #ffffff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  max-width: 600px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .lb-cta-card {
    flex-direction: row;
    align-items: center;
  }
}

.lb-cta-card-content { flex: 1; }

.lb-cta-card-heading {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 4px;
}

.lb-cta-card-body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  opacity: 0.75;
  line-height: 1.55;
}

.lb-cta-card-action { flex-shrink: 0; }

.lb-cta-pill-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 9999px;          /* pill */
  text-decoration: none;
  transition: filter 200ms;
}
.lb-cta-pill-md:hover { filter: brightness(0.95); }

/* ----- PullQuote --------------------------------------------------------- */
.lb-pullquote {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-style: italic;
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 600px;
  padding-left: 14px;
  border-left: 2px solid var(--color-accent);
  margin: 20px 0;
}

/* ----- CalloutBanner (legal | help | info) ------------------------------- */
.lb-callout {
  font-family: var(--font-sans);
  padding: 12px 16px;
  border-radius: 6px;
  max-width: 600px;
  margin-bottom: 28px;
}

.lb-callout-legal {
  background-color: var(--color-highlight);
  border-left: 3px solid var(--color-accent);
  color: var(--color-ink);
}

.lb-callout-help {
  background-color: var(--color-ink);
  color: var(--color-highlight);
}

.lb-callout-info {
  background-color: #ffffff;
  border-left: 3px solid var(--color-tint);
  color: var(--color-ink);
}

.lb-callout-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.lb-callout-body {
  font-size: 11px;
  line-height: 1.55;
}

.lb-callout-help-phone {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  color: #F4EBCD;
  margin: 8px 0;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* ----- DataTable --------------------------------------------------------- */
.lb-datatable-wrap {
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 16px;
}

.lb-datatable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 11px;
}

.lb-datatable thead tr {
  background-color: #15404F;
}

.lb-datatable th {
  text-align: left;
  color: #F4EBCD;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 9px 12px;
}

.lb-datatable tbody tr:nth-child(odd) { background-color: #FFFFFF; }
.lb-datatable tbody tr:nth-child(even) { background-color: #FAFBFA; }
.lb-datatable tbody tr + tr {
  border-top: 0.5px solid rgba(21, 64, 79, 0.08);
}

.lb-datatable td {
  padding: 9px 12px;
  line-height: 1.5;
  color: var(--color-ink);
}

/* ----- EditorialCard (organisation variant on Responsible Gambling) ------ */
.lb-editorial-card {
  background: #ffffff;
  border-radius: 0;
  padding: 18px;
}

.lb-editorial-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.lb-editorial-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 15px;
}

.lb-editorial-role {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  opacity: 0.65;
}

.lb-editorial-body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.55;
}

.lb-editorial-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}
.lb-editorial-link:hover { text-decoration: underline; }

/* ============================================================================
   CASINO SINGLE (Session 2) — TEMP minimal header; full review layout deferred
============================================================================ */
.lb-casino-single {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background-color: var(--color-card);
  padding: 20px;
  max-width: 760px;
}

@media (min-width: 640px) {
  .lb-casino-single {
    flex-direction: row;
    align-items: flex-start;
  }
}

.lb-casino-single-logo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-casino-single-logo img {
  width: 100%;
  height: 100%;
}

.lb-casino-single-info {
  flex: 1;
  min-width: 0;
}

.lb-casino-single-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-casino-single-name {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 0;
}

.lb-casino-single-bonus {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 8px 0 0;
}

.lb-casino-single .lb-casino-chips {
  margin-top: 14px;
  max-width: 380px;
}

.lb-casino-single-cta {
  margin-top: 16px;
  width: auto;
  align-self: flex-start;
  padding-left: 22px;
  padding-right: 22px;
}
/* ============================================================================
   /casinos ARCHIVE PAGE (Session 3) — port of src/routes/casinos.index.tsx
============================================================================ */
.lb-archive {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.lb-archive-breadcrumb-wrap {
  padding: 24px 22px 0;
}

/* ----- PageHero (ui/PageHero) -------------------------------------------- */
.lb-archive-hero-wrap {
  padding: 24px 22px 0;
}

.lb-archive-hero {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-archive-hero { padding: 40px; }
}

.lb-archive-hero-kicker {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.lb-archive-hero-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
}

@media (min-width: 768px) {
  .lb-archive-hero-title { font-size: 48px; }
}

.lb-archive-hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.lb-archive-hero-lead {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.65;
  max-width: 680px;
  margin: 16px 0 0;
  opacity: 0.85;
}

/* ----- Search + sort bar -------------------------------------------------- */
.lb-archive-barwrap {
  padding: 16px 22px 0;
}

.lb-archive-bar {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lb-archive-search {
  flex: 1;
  min-width: 200px;
  background-color: var(--color-page);
  border-radius: 9999px;            /* explicit pill */
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink);
  outline: none;
  border: 0.5px solid rgba(21, 64, 79, 0.15);
}

.lb-archive-sort {
  background-color: var(--color-page);
  border-radius: 9999px;            /* explicit pill */
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink);
  outline: none;
  border: 0.5px solid rgba(21, 64, 79, 0.15);
  cursor: pointer;
}

/* ----- Directory grid ----------------------------------------------------- */
.lb-archive-gridwrap {
  padding: 16px 22px 0;
}

.lb-archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .lb-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lb-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lb-archive-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 0.5px solid transparent;
  transition: border-color 150ms ease;
}

.lb-archive-card:hover {
  border-color: rgba(21, 64, 79, 0.2);
}

.lb-archive-logo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 0.5px solid rgba(21, 64, 79, 0.1);
  overflow: hidden;
}

.lb-archive-logo-img {
  width: 100%;
  height: 100%;
}

.lb-fit-cover   { object-fit: cover; }
.lb-fit-contain { object-fit: contain; }

.lb-archive-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-ink);
  font-weight: 500;
  margin-bottom: 12px;
}

.lb-archive-btn {
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 0;
  width: 100%;
  text-align: center;
  text-decoration: none;
  transition: filter 200ms ease;
}

.lb-archive-btn:hover {
  filter: brightness(0.95);
}

.lb-archive-empty {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 32px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink);
}

.lb-archive-disclaimer {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--color-ink);
  opacity: 0.5;
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

/* ----- Decorative pagination ---------------------------------------------- */
.lb-archive-pagination {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
}

.lb-archive-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 9999px;            /* explicit pill */
  background-color: var(--color-card);
  color: var(--color-ink);
  border: 0.5px solid rgba(21, 64, 79, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lb-archive-page-btn-active {
  background-color: var(--color-ink);
  color: var(--color-highlight);
}

.lb-archive-page-next {
  width: auto;
  padding: 0 12px;
  margin-left: 4px;
}

.lb-archive-page-dots {
  color: rgba(21, 64, 79, 0.5);
  padding: 0 4px;
}
/* ============================================================================
   CASINO REVIEW PAGE (Session 3) — port of src/routes/casinos.$slug.tsx
============================================================================ */
.lb-review {
  padding-bottom: 40px;
}

.lb-review-narrow {
  max-width: 900px;
  margin: 0 auto;
}

.lb-review-narrow-lower {
  margin-top: 16px;
}

/* ----- Breadcrumb --------------------------------------------------------- */
.lb-review-breadcrumb {
  padding: 24px 22px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink);
  opacity: 0.7;
}
.lb-review-breadcrumb a { color: inherit; text-decoration: none; }
.lb-review-breadcrumb a:hover { color: var(--color-accent); }
.lb-review-bc-sep { margin: 0 8px; opacity: 0.5; }
.lb-review-bc-current { opacity: 0.95; }

/* ----- Hero --------------------------------------------------------------- */
.lb-review-hero-wrap {
  padding: 16px 22px 0;
}

.lb-review-hero {
  position: relative;
  background-color: var(--color-ink);
  color: var(--color-highlight);
  border-radius: 0;
  overflow: hidden;
  padding: 20px;
}

.lb-review-hero-circle {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}
.lb-review-hero-circle-1 {
  top: -80px;
  right: -80px;
  width: 256px;
  height: 256px;
  background: radial-gradient(circle, rgba(224, 166, 70, 0.18), transparent 70%);
}
.lb-review-hero-circle-2 {
  bottom: -96px;
  left: -64px;
  width: 288px;
  height: 288px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
}

.lb-review-hero-inner { position: relative; }

.lb-review-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lb-review-license-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.14);
}

.lb-review-score-block {
  text-align: right;
  flex-shrink: 0;
}
.lb-review-score-label {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.75;
}
.lb-review-score-num {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1;
  margin-top: 4px;
}
.lb-review-score-val  { font-size: 26px; color: #E0A646; }
.lb-review-score-max  { font-size: 12px; opacity: 0.7; }
.lb-review-score-rank {
  font-family: var(--font-sans);
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.8;
}

.lb-review-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}
@media (min-width: 768px) {
  .lb-review-hero-grid { grid-template-columns: 1.6fr 1fr; }
}

.lb-review-hero-h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
@media (min-width: 768px) {
  .lb-review-hero-h1 { font-size: 34px; }
}

.lb-review-hero-byline {
  font-family: var(--font-sans);
  font-size: 11px;
  margin: 8px 0 0;
  opacity: 0.78;
}

.lb-review-hero-intro {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 16px;
  opacity: 0.85;
}
.lb-review-hero-intro p { margin: 0 0 10px; }
.lb-review-hero-intro p:last-child { margin-bottom: 0; }

/* Bonus panel */
.lb-review-bonus-panel {
  background-color: var(--color-highlight);
  color: var(--color-ink);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  border-left: 3px solid #E0A646;
}
.lb-review-bonus-logo {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-review-bonus-logo img { width: 100%; height: 100%; }
.lb-review-bonus-body {
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lb-review-bonus-label {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: 0.65;
}
.lb-review-bonus-amount {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.25;
}
.lb-review-bonus-terms {
  font-family: var(--font-sans);
  font-size: 10px;
  margin: 4px 0 0;
  opacity: 0.75;
}
.lb-review-bonus-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: filter 200ms ease;
}
.lb-review-bonus-cta:hover { filter: brightness(0.95); }
.lb-review-bonus-18 {
  font-family: var(--font-sans);
  font-size: 10px;
  margin: 6px 0 0;
  opacity: 0.6;
}

/* ----- Main body ---------------------------------------------------------- */
.lb-review-body-wrap {
  padding: 0 22px;
}
.lb-review-body-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}
@media (min-width: 768px) {
  .lb-review-body-card { padding: 32px; }
}
.lb-review-body-card h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 28px 0 10px;
}
.lb-review-body-card h2:first-child { margin-top: 0; }
.lb-review-body-card h3 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 500;
  margin: 22px 0 8px;
}
.lb-review-body-card p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 12px;
  opacity: 0.85;
}
.lb-review-body-card ul,
.lb-review-body-card ol {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0 0 12px;
  padding-left: 20px;
}
.lb-review-body-card li { margin-bottom: 6px; }
.lb-review-body-card a { color: var(--color-accent); font-weight: 500; }
.lb-review-body-card blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.9;
  margin: 16px 0;
  padding-left: 16px;
  border-left: 2px solid #E0A646;
}
.lb-review-pending { text-align: center; }
.lb-review-pending h2 {
  margin: 0 0 8px;
}
.lb-review-pending p {
  max-width: 560px;
  margin: 0 auto;
  opacity: 0.78;
  line-height: 1.65;
}

/* ----- Section h2 (FAQ / Related) ----------------------------------------- */
.lb-review-section-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

/* ----- FAQ accordion ------------------------------------------------------ */
.lb-review-faq-wrap {
  padding: 16px 22px 0;
}
.lb-rfaq {
  background-color: var(--color-card);
}
.lb-rfaq-item {
  border-top: 0.5px solid rgba(21, 64, 79, 0.12);
}
.lb-rfaq-item:first-child { border-top: 0; }
.lb-rfaq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.lb-rfaq-question {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.lb-rfaq-chevron {
  flex-shrink: 0;
  margin-top: 3px;
  transition: transform 200ms ease;
}
.lb-rfaq-open .lb-rfaq-chevron { transform: rotate(180deg); }
.lb-rfaq-a {
  padding: 0 20px 18px;
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.82;
}
.lb-rfaq-a p { margin: 0 0 10px; }
.lb-rfaq-a p:last-child { margin-bottom: 0; }

/* ----- Related casinos ---------------------------------------------------- */
.lb-review-related {
  padding: 16px 22px 0;
}
.lb-review-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lb-review-related-list {
  background-color: var(--color-card);
}
.lb-review-related-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 0.5px solid rgba(21, 64, 79, 0.1);
}
.lb-review-related-row:first-child { border-top: 0; }
.lb-review-related-rank {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 18px;
  opacity: 0.5;
}
.lb-review-related-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.lb-review-related-meta {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.65;
}
.lb-review-related-link {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* ----- Author box --------------------------------------------------------- */
.lb-review-author-wrap {
  padding: 16px 22px 0;
}
.lb-author-eyebrow {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.14em;
  opacity: 0.6;
}
.lb-author-namerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lb-author-datemeta {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  opacity: 0.6;
}
/* ============================================================================
   /networks ARCHIVE PAGE (Session 4) — port of src/routes/networks.index.tsx
============================================================================ */
.lb-networks {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.lb-networks-breadcrumb-wrap {
  padding: 24px 22px 0;
}

/* Generic per-section spacing wrapper */
.lb-networks-section {
  padding: 16px 22px 0;
}

/* ----- Section 1 — Hero + stats strip ------------------------------------ */
.lb-networks-hero {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-networks-hero { padding: 40px; }
}

.lb-networks-hero-kicker {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.lb-networks-hero-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
}

@media (min-width: 768px) {
  .lb-networks-hero-title { font-size: 48px; }
}

.lb-networks-hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.lb-networks-hero-lead {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.65;
  max-width: 680px;
  margin: 16px 0 0;
  opacity: 0.85;
}

.lb-networks-stats {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: rgba(21, 64, 79, 0.12);
  border: 0.5px solid rgba(21, 64, 79, 0.12);
}

@media (min-width: 768px) {
  .lb-networks-stats { grid-template-columns: repeat(4, 1fr); }
}

.lb-networks-stat {
  background-color: var(--color-card);
  padding: 16px;
}

.lb-networks-stat-value {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lb-networks-stat-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin-top: 6px;
  opacity: 0.6;
}

/* ----- Section 2 — Network cards ----------------------------------------- */
.lb-networks-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .lb-networks-cards { grid-template-columns: 1fr 1fr; }
}

.lb-networks-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 0.5px solid transparent;
  transition: border-color 150ms ease;
}

.lb-networks-card:hover {
  border-color: rgba(21, 64, 79, 0.2);
}

.lb-networks-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lb-networks-card-head {
  flex: 1;
  min-width: 0;
}

.lb-networks-card-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lb-networks-card-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

.lb-networks-ukgc-tag {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  background-color: var(--color-highlight);
  border: 0.5px solid rgba(21, 64, 79, 0.15);
  border-radius: 3px;
  padding: 2px 6px;
}

.lb-networks-card-tagline {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  line-height: 1.55;
  margin: 8px 0 0;
  opacity: 0.7;
}

.lb-networks-card-score {
  text-align: right;
  flex-shrink: 0;
}

.lb-networks-card-score-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.lb-networks-card-score-num {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.lb-networks-card-score-max {
  font-size: 13px;
  opacity: 0.45;
}

.lb-networks-card-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(21, 64, 79, 0.12);
}

@media (min-width: 480px) {
  .lb-networks-card-stats { grid-template-columns: repeat(4, 1fr); }
}

.lb-networks-card-stat-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.lb-networks-card-stat-value {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.lb-networks-card-link {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 16px;
}

.lb-networks-card-link:hover {
  text-decoration: underline;
}

/* ----- Decorative pagination --------------------------------------------- */
.lb-networks-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
}

.lb-networks-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 9999px;            /* explicit pill */
  background-color: var(--color-card);
  color: var(--color-ink);
  border: 0.5px solid rgba(21, 64, 79, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lb-networks-page-btn-active {
  background-color: var(--color-ink);
  color: var(--color-highlight);
}

.lb-networks-page-next {
  width: auto;
  padding: 0 12px;
  margin-left: 4px;
}

.lb-networks-page-dots {
  color: rgba(21, 64, 79, 0.5);
  padding: 0 4px;
}

/* ----- Section 3 — Comparison table -------------------------------------- */
.lb-networks-table-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-networks-table-card { padding: 36px; }
}

.lb-networks-eyebrow {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.lb-networks-table-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}

.lb-networks-table-scroll {
  overflow-x: auto;
}

.lb-networks-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink);
}

.lb-networks-table thead th {
  text-align: left;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.55;
  padding: 0 12px 10px;
  border-bottom: 0.5px solid rgba(21, 64, 79, 0.2);
  white-space: nowrap;
}

.lb-networks-table tbody td {
  padding: 12px;
  border-bottom: 0.5px solid rgba(21, 64, 79, 0.1);
  white-space: nowrap;
}

.lb-networks-table tbody tr:last-child td {
  border-bottom: 0;
}

.lb-networks-table-right {
  text-align: right;
}

.lb-networks-table-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
}

.lb-networks-table-name:hover {
  color: var(--color-accent);
}

.lb-networks-table-score {
  font-weight: 600;
}

/* ----- Section 4 — Editorial explainer ----------------------------------- */
.lb-networks-editorial {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-networks-editorial { padding: 36px; }
}

.lb-networks-editorial-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 8px 0 16px;
}

.lb-networks-editorial-p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 14px;
  opacity: 0.82;
  max-width: 760px;
}

.lb-networks-editorial-p:last-child {
  margin-bottom: 0;
}

/* ----- Section 5 — FAQ (reuses .lb-section-head + .lb-faq-* components) --- */
.lb-networks-faq .lb-faq-card {
  margin-top: 4px;
}

/* ============================================================================
   NETWORK REVIEW PAGE (Session 4) — port of src/routes/networks.$slug.tsx
============================================================================ */
.lb-network {
  padding-bottom: 40px;
}

.lb-network-narrow {
  max-width: 1000px;
  margin: 0 auto;
}

.lb-network-narrow-lower {
  margin-top: 16px;
}

/* Generic per-section spacing wrapper */
.lb-network-section {
  padding: 16px 22px 0;
}

/* ----- Section 2 — Hero cover -------------------------------------------- */
.lb-network-hero {
  position: relative;
  background-color: var(--color-ink);
  border-radius: 0;
  overflow: hidden;
  padding: 28px;
}

.lb-network-hero-circle {
  position: absolute;
  border-radius: 9999px;            /* explicit pill — decorative circle */
  pointer-events: none;
}

.lb-network-hero-circle-1 {
  width: 50%;
  height: 75%;
  top: -15%;
  right: -10%;
  background-color: var(--color-ink-light);
  opacity: 0.5;
}

.lb-network-hero-circle-2 {
  width: 42%;
  height: 65%;
  bottom: -18%;
  left: -8%;
  background-color: var(--color-ink-dark);
  opacity: 0.55;
}

.lb-network-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media (min-width: 768px) {
  .lb-network-hero-grid { grid-template-columns: 1.2fr 1fr; }
}

.lb-network-hero-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink);
  background-color: var(--color-tint);
  border-radius: 9999px;            /* explicit pill */
  padding: 2.5px 10px;
}

.lb-network-hero-h1 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-highlight);
  margin: 10px 0 0;
}

.lb-network-hero-scorerow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
}

.lb-network-hero-score-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-highlight);
  opacity: 0.6;
}

.lb-network-hero-score-num {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-highlight);
}

.lb-network-hero-score-max {
  font-size: 14px;
  opacity: 0.55;
}

.lb-network-hero-mean {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  color: var(--color-tint);
  margin-top: 6px;
}

.lb-network-hero-stats {
  padding: 20px;
}

.lb-network-hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lb-network-stat-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-highlight);
  opacity: 0.6;
}

.lb-network-stat-value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-highlight);
  margin-top: 6px;
}

.lb-network-stat-value-sm {
  font-size: 16px;
  letter-spacing: 0;
}

.lb-network-stat-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-highlight);
  opacity: 0.55;
  margin-top: 4px;
}

/* ----- Section 3 — Short intro ------------------------------------------- */
.lb-network-intro-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 16px 20px;
}

.lb-network-intro-card p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0 0 10px;
}

.lb-network-intro-card p:last-child { margin-bottom: 0; }

/* ----- Section 6 — Other UK operator networks ---------------------------- */
.lb-network-others-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lb-network-others-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

.lb-network-others-all {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
}

.lb-network-others {
  background-color: var(--color-card);
}

.lb-network-others-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 0.5px solid rgba(21, 64, 79, 0.1);
}

.lb-network-others-row:first-child { border-top: 0; }

.lb-network-others-name {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.lb-network-others-meta {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.65;
}

.lb-network-others-link {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.lb-network-others-note {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin: 10px 0 0;
  opacity: 0.6;
}

/* ----- Section 7 — FAQ head (accordion reuses .lb-rfaq-* components) ----- */
.lb-network-faq-head {
  margin-bottom: 12px;
}

.lb-network-faq-head .lb-review-section-h2 {
  margin-bottom: 4px;
}

.lb-network-faq-sub {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11px;
  margin: 0;
  opacity: 0.65;
}

/* ----- Section 9 — Bottom nav -------------------------------------------- */
.lb-network-backlink {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.lb-network-backlink:hover { text-decoration: underline; }

/* ============================================================================
   /guides HUB PAGE (Session 5) — port of src/routes/guides.index.tsx
============================================================================ */
.lb-guides {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.lb-guides-breadcrumb-wrap {
  padding: 24px 22px 0;
}

/* Generic per-section spacing wrapper */
.lb-guides-section {
  padding: 20px 22px 0;
}

/* ----- Section 1 — Hero + 4-stat strip ----------------------------------- */
.lb-guides-hero {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-guides-hero { padding: 40px; }
}

.lb-guides-hero-kicker {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.lb-guides-hero-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
}

@media (min-width: 768px) {
  .lb-guides-hero-title { font-size: 48px; }
}

.lb-guides-hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.lb-guides-hero-lead {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.65;
  max-width: 680px;
  margin: 16px 0 0;
  opacity: 0.85;
}

.lb-guides-stats {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(21, 64, 79, 0.15);
}

@media (min-width: 768px) {
  .lb-guides-stats { grid-template-columns: repeat(4, 1fr); }
}

.lb-guides-stat-value {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.lb-guides-stat-label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
  opacity: 0.55;
}

/* ----- Section 2 — Featured article -------------------------------------- */
.lb-guides-featured {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--color-card);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
}

@media (min-width: 768px) {
  .lb-guides-featured { grid-template-columns: 1fr 1fr; }
}

.lb-guides-featured-img {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
  min-height: 280px;
}

.lb-guides-featured-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-guides-featured-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .lb-guides-featured-body { padding: 32px; }
}

.lb-guides-featured-toprow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.lb-guides-featured-readtime {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  opacity: 0.55;
}

.lb-guides-featured-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  transition: color 150ms ease;
}

@media (min-width: 768px) {
  .lb-guides-featured-title { font-size: 30px; }
}

.lb-guides-featured:hover .lb-guides-featured-title {
  color: var(--color-accent);
}

.lb-guides-featured-excerpt {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 12px;
  line-height: 1.65;
  margin: 12px 0 0;
  opacity: 0.78;
}

.lb-guides-featured-meta {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin: 16px 0 0;
  opacity: 0.55;
}

.lb-guides-featured-cta {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  margin-top: 12px;
  display: inline-block;
}

/* ----- Section 3 — Regular guide grid ------------------------------------ */
.lb-guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .lb-guides-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .lb-guides-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.lb-guides-card {
  display: block;
  background-color: var(--color-card);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
}

.lb-guides-card-img {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
  height: 160px;
}

.lb-guides-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-guides-card-body {
  padding: 12px;
}

.lb-guides-card-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.lb-guides-card-readtime {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 9px;
  opacity: 0.55;
}

.lb-guides-card-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  transition: color 150ms ease;
}

.lb-guides-card:hover .lb-guides-card-title {
  color: var(--color-accent);
}

/* ----- Category tags / pills (explicit pill radius) ---------------------- */
.lb-guides-pill,
.lb-guides-tag {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 9999px;            /* explicit pill */
}

.lb-guides-pill {
  background-color: var(--color-tint);
}

.lb-guides-tag-mint {
  background-color: var(--color-tint);
}

.lb-guides-tag-sand {
  background-color: var(--color-highlight);
}

/* ============================================================================
   GUIDE ARTICLE PAGE (Session 5) — port of src/routes/guides.$slug.tsx
   Author-free: no hero byline, no "About the author" box.
============================================================================ */
.lb-guide {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.lb-guide-section {
  padding: 20px 22px 0;
}

/* ----- Hero — magazine cover --------------------------------------------- */
.lb-guide-hero {
  position: relative;
  background-color: var(--color-card);
  border-radius: 0;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse at top right, color-mix(in oklab, var(--color-tint) 22%, transparent), transparent 60%),
    radial-gradient(ellipse at bottom left, color-mix(in oklab, var(--color-highlight) 35%, transparent), transparent 55%);
}

.lb-guide-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .lb-guide-hero-grid { grid-template-columns: 1.3fr 1fr; }
}

.lb-guide-hero-main {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .lb-guide-hero-main { padding: 40px; }
}

.lb-guide-hero-toprow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.lb-guide-hero-kicker {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

.lb-guide-hero-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

@media (min-width: 768px) {
  .lb-guide-hero-title { font-size: 46px; }
}

.lb-guide-hero-img {
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-guide-hero-img { padding: 40px 40px 40px 0; }
}

.lb-guide-hero-img-inner {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
  border-radius: 0;
  height: 260px;
}

.lb-guide-hero-img-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Body — two-column ------------------------------------------------- */
.lb-guide-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .lb-guide-body-grid { grid-template-columns: 1fr 280px; }
}

/* ----- Article column ---------------------------------------------------- */
.lb-guide-article {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 28px;
}

@media (min-width: 768px) {
  .lb-guide-article { padding: 40px; }
}

.lb-guide-article p {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13.5px;
  line-height: 1.75;
  margin: 0 0 16px;
  opacity: 0.88;
}

/* Lead paragraph — larger, full opacity, with drop-cap */
.lb-guide-article > p:first-of-type {
  font-size: 15px;
  opacity: 1;
}

.lb-guide-article > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  float: left;
  font-size: 56px;
  line-height: 0.9;
  margin: 4px 8px 0 0;
  color: var(--color-accent);
}

.lb-guide-article h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 28px 0 12px;
}

.lb-guide-article h2:first-child { margin-top: 0; }

.lb-guide-article h3 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 500;
  margin: 22px 0 8px;
}

.lb-guide-article ul,
.lb-guide-article ol {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 13.5px;
  line-height: 1.75;
  opacity: 0.88;
  margin: 0 0 16px;
  padding-left: 20px;
}

.lb-guide-article li { margin-bottom: 6px; }

.lb-guide-article a {
  color: var(--color-accent);
  font-weight: 500;
}

.lb-guide-article blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 32px 0;
  padding-left: 20px;
  border-left: 3px solid var(--color-accent);
}

@media (min-width: 768px) {
  .lb-guide-article blockquote { font-size: 22px; }
}

.lb-guide-article blockquote p {
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
  margin: 0;
}

.lb-guide-article > *:last-child { margin-bottom: 0; }

/* ----- Sidebar ----------------------------------------------------------- */
.lb-guide-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb-guide-side-card {
  background-color: var(--color-card);
  border-radius: 0;
  padding: 20px;
}

.lb-guide-side-eyebrow {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.55;
  margin-bottom: 12px;
}

.lb-guide-side-dl {
  margin: 0;
}

.lb-guide-side-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 11.5px;
  margin-bottom: 8px;
}

.lb-guide-side-row:last-child { margin-bottom: 0; }

.lb-guide-side-dt {
  margin: 0;
  opacity: 0.6;
}

.lb-guide-side-dd {
  margin: 0;
  font-weight: 500;
}

.lb-guide-takeaways {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lb-guide-takeaway {
  display: flex;
  gap: 8px;
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.9;
  margin-bottom: 10px;
}

.lb-guide-takeaway:last-child { margin-bottom: 0; }

.lb-guide-takeaway-num {
  font-family: var(--font-serif);
  color: var(--color-accent);
  font-size: 14px;
  line-height: 1.3;
  flex-shrink: 0;
}

/* ----- Keep reading ------------------------------------------------------ */
.lb-guide-keepreading-h2 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.lb-guide-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .lb-guide-related-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.lb-guide-related-card {
  display: block;
  background-color: var(--color-card);
  border-radius: 0;
  padding: 20px;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.lb-guide-related-card:hover {
  background-color: rgba(244, 235, 205, 0.3);
}

.lb-guide-related-title {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
}

.lb-guide-related-meta {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: 10px;
  margin-top: 12px;
  opacity: 0.55;
}