/* ============================================================
   OnlinePokiesTime — main stylesheet (all styles in one file)
   Generated from style.css + components.css + pages.css.
   Edit THIS file for all styling. style.css only holds the theme header.
   ============================================================ */

/* ===== BASE / TOKENS / LAYOUT (from style.css) ===== */

/* ============================================================
   Fonts + Design Tokens (ported from the original theme.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --background: #0c1420;
  --foreground: #f0f4f8;
  --card: #152033;
  --card-foreground: #f0f4f8;
  --primary: #f5c518;
  --secondary: #1e2d42;
  --muted-foreground: #7a92a8;
  --accent: #00b74a;
  --accent-hover: #00a042;
  --border: rgba(255, 255, 255, 0.08);
  --gold: #f5c518;
  --gold-hover: #e6b614;
  --radius: 0.625rem;
  --max: 80rem; /* 1280px = max-w-7xl */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; margin: 0; }
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-mono { font-family: 'DM Mono', monospace; }

.container { max-width: var(--max); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.text-gold { color: var(--gold); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted-foreground); }

/* ---- Nav ---- */
.site-nav { background: rgba(12,20,32,.95); backdrop-filter: blur(4px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.site-nav .inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand { display: flex; align-items: center; gap: .5rem; }
.brand .mark { width: 2rem; height: 2rem; background: var(--gold); border-radius: .375rem; display: flex; align-items: center; justify-content: center; }
.brand .mark svg { width: 20px; height: 20px; color: #0c1420; }
.brand .name { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.25rem; }
.nav-links { display: none; align-items: center; gap: 1.5rem; font-size: .875rem; font-weight: 500; }
.nav-links a { color: var(--muted-foreground); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-toggle { background: none; color: var(--foreground); display: flex; }
.mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--card); padding: .75rem 1rem; flex-direction: column; gap: .75rem; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: .875rem; color: var(--muted-foreground); padding: .25rem 0; }
@media (min-width:1024px){ .nav-links{ display:flex; } .nav-toggle{ display:none; } .mobile-menu{ display:none !important; } }

/* ---- Buttons ---- */
.btn { font-weight: 700; border-radius: .5rem; transition: background .2s, color .2s; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-gold { background: var(--gold); color: #0c1420; font-weight: 900; }
.btn-gold:hover { background: var(--gold-hover); }
.btn-secondary { background: var(--secondary); color: var(--foreground); font-weight: 500; }
.btn-secondary:hover { background: #243348; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-block { width: 100%; }

/* ---- Badge / rating ---- */
.badge { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .25rem .625rem; border-radius: 2px; display: inline-block; }
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.stars.lg svg { width: 20px; height: 20px; }
.stars .val { margin-left: 4px; font-weight: 600; color: var(--gold); font-size: .75rem; }
.stars.lg .val { font-size: 1.125rem; }
.star-full { fill: #f5c518; color: #f5c518; }
.star-half { fill: #f5c51880; color: #f5c518; }
.star-empty { fill: none; color: #2a3d55; }

/* ---- Cards / generic ---- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; }
.grid { display: grid; }
.gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-8 { gap: 2rem; }

section { }
.section { padding: 3rem 0; }
.bg-dark2 { background: #08101a; }
.bg-base { background: var(--background); }

/* ---- Footer ---- */
.site-footer { background: #060d15; border-top: 1px solid var(--border); padding: 2rem 0; }
.site-footer .row { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.site-footer .mark { width: 1.75rem; height: 1.75rem; background: var(--gold); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.site-footer .mark svg { width: 16px; height: 16px; color: #0c1420; }
.site-footer .disclaimer { font-size: .75rem; color: var(--muted-foreground); max-width: 28rem; }
.site-footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; font-size: .75rem; color: var(--muted-foreground); }
.site-footer .links a { transition: color .2s; }
.site-footer .links a:hover { color: var(--gold); }
@media (min-width:640px){ .site-footer .row{ flex-direction: row; justify-content: space-between; } }

/* Footer trust bar (moved from the old top bar) */
.footer-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); font-size: .75rem; color: var(--muted-foreground); text-align: center; }
.footer-trust .pill { display: inline-flex; align-items: center; gap: .375rem; }
.footer-trust svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Sticky mobile CTA ---- */
.mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(12,20,32,.95); backdrop-filter: blur(4px); border-top: 1px solid var(--border); padding: .75rem; }
.mobile-cta .inner { display: flex; align-items: center; gap: .75rem; }
.mobile-cta .logo { width: 2.5rem; height: 2.5rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .875rem; flex-shrink: 0; }
@media (min-width:1024px){ .mobile-cta{ display:none; } }
.pad-bottom { padding-bottom: 5rem; }
@media (min-width:1024px){ .pad-bottom{ padding-bottom: 0; } }

/* Shared responsive helpers */
.hide-mobile { display: none; }
@media (min-width:640px){ .sm-flex{ display:flex; } .hide-mobile{ display:inline-flex; } }
@media (min-width:1024px){ .hide-lg-down{ display:block; } }

/* ============================================================
   Mobile responsiveness fixes (v2)
   Root cause: CSS grid/flex children default to min-width:auto, so a
   wide child (the pokies table, long headings) refuses to shrink and
   blows the whole column past the viewport, creating horizontal scroll.
   ============================================================ */

/* 1. Hard stop on any horizontal page overflow. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.site-wrap,
main,
.container,
.pk-body,
.section {
  max-width: 100%;
  overflow-x: clip;            /* clip = contain overflow without a scroll gutter */
}

/* 2. Let every grid/flex track actually shrink (fixes the blowout). */
.pk-layout,
.pk-content,
.pk-section,
.reviews-grid,
.reviews-main,
.hero-inner,
.pk-hero-grid,
.two-col-grid,
.rtp-grid,
.bc-cols,
.pay-grid,
.rg-grid {
  min-width: 0;
}
.pk-layout > *,
.pk-content > *,
.reviews-grid > *,
.hero-inner > *,
.pk-hero-grid > *,
.two-col-grid > *,
.rtp-grid > *,
.bc-cols > *,
.pay-grid > *,
.rg-grid > * {
  min-width: 0;
}

/* 3. Wide tables scroll INSIDE their own card instead of stretching the
   page. The wrapper is the scroll container; the table keeps a readable
   min-width but is fully contained by the wrapper. */
.opt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.pk-table { min-width: 460px; }              /* pokies rankings table */
.desktop-table .opt-table { min-width: 640px; }

/* 4. Compact casino rows: wrap cleanly instead of overflowing. */
.casino-compact { flex-wrap: wrap; gap: .625rem; }
.casino-compact .mid { flex: 1 1 55%; }
.casino-compact .stars,
.casino-compact .btn { flex-shrink: 0; }
@media (max-width: 430px) {
  .casino-compact .stars { margin-left: auto; }
  .casino-compact .btn { flex: 1 1 100%; text-align: center; }
}

/* 5. Long words/strings wrap rather than push width. */
h1, h2, h3, h4, p, a, span, li, td, .cn, .bn, .ps-desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 6. Media never exceeds its container. */
img, svg, video, iframe { max-width: 100%; }

/* 7. Sticky mobile CTA stays within the screen. */
.mobile-cta { max-width: 100%; }
.mobile-cta .inner > div { min-width: 0; }
.pad-bottom { padding-bottom: 6rem; }
@media (min-width: 1024px) { .pad-bottom { padding-bottom: 0; } }

/* 8. Keep scrollable-table cells on their own lines (don't wrap — the
   wrapper scrolls horizontally instead). */
.opt-table th,
.opt-table td,
.opt-table .cn { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.opt-table .cell-casino { white-space: nowrap; }

/* ============================================================
   Mobile responsiveness fixes (v3) — definitive overflow kill
   The body content column was still overflowing because deeply nested
   grid/flex items keep their default min-width:auto. Rather than list
   every nested container, scope a blanket min-width:0 to the whole
   content area, and use overflow-x:hidden (broadest support) as the
   hard clip on the page-level wrappers.
   ============================================================ */

/* Every descendant inside the article body and hero can shrink. */
.pk-body *,
.pk-content *,
.home-main *,
.pokies-main *,
.site-main * {
  min-width: 0;
}

/* Page-level wrappers hard-clip horizontal overflow (hidden is more
   widely supported than clip and behaves the same here). */
html, body, .site-wrap, main.site-main, main.pokies-main, main.home-main, .pk-body {
  overflow-x: hidden;
  max-width: 100%;
}

/* The scrollable rankings table keeps its own internal scroll — restore
   its min-width AFTER the blanket rule above (which would otherwise zero
   it out), so its columns stay readable and it scrolls within its card. */
.pk-table { min-width: 460px; }
.desktop-table .opt-table { min-width: 640px; }

/* Under 380px, drop the hero quick-stats to one column so they never
   force width on the narrowest phones. */
@media (max-width: 380px) {
  .pk-quickstats { grid-template-columns: 1fr; }
}

/* ============================================================
   Fixes v4 — Best Pokies page: text breaking out of card
   backgrounds + rankings table scroll containment.
   ============================================================ */

/* A. Make the rankings-table card a proper horizontal scroll container.
   components.css sets overflow:hidden + radius; here we explicitly allow
   horizontal scroll while keeping vertical clipped, so the nowrap table
   scrolls INSIDE the rounded card instead of spilling past its edges. */
.opt-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  border-radius: .75rem;          /* preserve rounded card while scrolling */
  -webkit-overflow-scrolling: touch;
}
/* The table defines its own width; the wrapper scrolls to reveal it. */
.opt-table { width: max-content; min-width: 100%; }
.pk-table { min-width: 460px; }
.desktop-table .opt-table { min-width: 640px; }

/* B. Soften the global break rule so normal words don't get chopped and
   pushed oddly against card edges. break-word only splits a word when it
   truly cannot fit; it does NOT break every word like the old rule could. */
h1, h2, h3, h4, p, a, span, li, .cn, .bn, .ps-desc,
.kt-def, .kt-term, .rtp-desc, .bc-cols p, .tc-tags span, .vb-head b {
  overflow-wrap: break-word;
  word-break: normal;
}

/* C. Content inside cards must never render outside the card box.
   Give the padded cards their own clip + guaranteed shrink so any child
   (including a stray long token) stays within the rounded background. */
.card,
.key-terms,
.icon-card,
.type-card,
.rtp-card,
.bonus-card,
.step-card,
.pk-side-cta,
.pk-play-at,
.inline-picks,
.final-cta {
  overflow: hidden;
  min-width: 0;
}

/* D. Emoji/number tags and example chips shouldn't stretch their row. */
.tc-tags { flex-wrap: wrap; }
.tc-tags span { max-width: 100%; }

/* ============================================================
   Fixes v5 — force the rankings table to scroll inside its own
   full-width card, and stop content from being clipped by ancestors.
   The prior `width:max-content` let the table escape its wrapper;
   this pins the wrapper to the column width so overflow-x:auto engages.
   ============================================================ */

/* The wrapper is a block that exactly fills its grid column and scrolls
   horizontally within itself. This is what actually contains the table. */
.opt-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Undo max-content (it defeated the wrapper). Let the table take its
   natural min-width and scroll; on wide screens it fills 100%. */
.opt-table { width: auto; }
.opt-table.pk-table { width: max-content; min-width: 460px; }
.desktop-table .opt-table { min-width: 640px; }

/* Guarantee the grid column that holds the content can shrink to the
   viewport so the wrapper's own scroll takes over (instead of the whole
   column widening). This is the crucial min-width:0 on the exact chain. */
.pk-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .pk-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}
.pk-content { min-width: 0; max-width: 100%; }
.pk-content > * { max-width: 100%; }

/* Belt-and-braces: the container that carries pk-body must not itself
   exceed the viewport, and should clip nothing (children handle their
   own scroll), so text is never sliced by an ancestor clip. */
.container.pk-body { overflow: visible; max-width: var(--max); }

/* ===== COMPONENTS (from components.css) ===== */
/* ============================================================
   Component styles: casino cards, tables, payment pills, etc.
   ============================================================ */

.ic-accent { color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.ic-xs { width: 12px; height: 12px; }

/* Payment pills */
.pay { font-size: .75rem; padding: .25rem .5rem; border-radius: 4px; font-weight: 500; }
.pay-payid   { background: #0077cc20; color: #4da6ff; }
.pay-crypto  { background: #f7931a20; color: #f7931a; }
.pay-neosurf { background: #e05c0020; color: #e08a50; }

.logo { border-radius: .375rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.casino-compact .logo { width: 2.5rem; height: 2.5rem; font-size: .875rem; flex-shrink: 0; }
.logo.lg { width: 3.5rem; height: 3.5rem; border-radius: .75rem; font-weight: 900; font-size: 1.125rem; }

/* Compact card */
.casino-compact { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: .5rem; transition: border-color .2s; }
.casino-compact:hover { border-color: #f5c51840; }
.casino-compact .rk { color: var(--muted-foreground); font-size: .875rem; width: 1.25rem; flex-shrink: 0; }
.casino-compact .mid { flex: 1; min-width: 0; }
.casino-compact .nm { font-weight: 600; font-size: .875rem; }
.casino-compact .bn { font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Full card */
.casino-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; padding: 1.25rem; transition: border-color .2s; }
.casino-card:hover { border-color: #f5c51840; }
.casino-card.rank1::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #f5c518, #f5c518, transparent); }
.cc-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.cc-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex-shrink: 0; }
.cc-logo-wrap .est { color: var(--muted-foreground); font-size: .75rem; }
.cc-title { flex: 1; min-width: 0; }
.cc-name-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.cc-name-row h3 { font-weight: 700; font-size: 1.125rem; }
.cc-bonus { background: rgba(30,45,66,.5); border-radius: .5rem; padding: .75rem; margin-bottom: 1rem; }
.cc-bonus .lbl { font-size: .75rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; font-weight: 500; }
.cc-bonus .val { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.cc-bonus .fs { color: var(--gold); font-size: .875rem; font-weight: 500; margin-top: .125rem; }
.cc-bonus .meta { display: flex; gap: .75rem; margin-top: .5rem; font-size: .75rem; color: var(--muted-foreground); }
.cc-bonus .meta b { color: var(--foreground); font-weight: 500; }
.cc-pays { display: flex; gap: .5rem; margin-bottom: 1rem; }
.cc-highlights { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.cc-highlights li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.cc-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .5rem; }
.cc-actions .btn { padding: .625rem; font-size: .875rem; }
.cc-tcs { text-align: center; font-size: .75rem; color: var(--muted-foreground); margin: .5rem 0 0; opacity: .7; }

/* Tables */
.opt-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.opt-table { width: 100%; border-collapse: collapse; }
.opt-table th { text-align: left; padding: .875rem 1.25rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; }
.opt-table thead tr, .opt-table tbody tr { border-bottom: 1px solid var(--border); }
.opt-table tbody tr:last-child { border-bottom: 0; }
.opt-table tbody tr:hover { background: rgba(30,45,66,.3); }
.opt-table tbody tr.first { background: #f5c51805; }
.opt-table td { padding: 1rem 1.25rem; font-size: .875rem; vertical-align: middle; }
.opt-table .cell-casino { display: flex; align-items: center; gap: .75rem; }
.opt-table .cell-casino .logo { width: 2.5rem; height: 2.5rem; font-size: .875rem; }
.opt-table .cn { font-weight: 700; font-size: .875rem; }
.opt-table .cb { font-weight: 600; font-size: .875rem; }
.opt-table .cfs { color: var(--gold); font-size: .75rem; }
.opt-table .cell-pays { display: flex; gap: .375rem; }
.opt-table .cell-pays .pay { padding: .125rem .375rem; }

.hide-on-mobile-table { display: table-cell; }
@media (max-width: 1023px){ .desktop-table { display: none; } }
@media (min-width: 1024px){ .mobile-cards { display: none; } }

.vol { font-size: .75rem; font-weight: 500; padding: .125rem .5rem; border-radius: 4px; }
.vol-high { background: rgba(127,29,29,.3); color: #f87171; }
.vol-med { background: rgba(113,63,18,.3); color: #facc15; }
.vol-low { background: rgba(20,83,45,.3); color: #4ade80; }

.tcs-note { text-align: center; font-size: .75rem; color: var(--muted-foreground); margin-top: 1rem; opacity: .6; }

/* Section header row */
.sec-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width:640px){ .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.sec-head h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: .25rem; }
.sec-head p { color: var(--muted-foreground); font-size: .875rem; }

.filter-tabs { display: flex; gap: .5rem; }
.filter-tabs button { padding: .375rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; background: var(--card); color: var(--muted-foreground); border: 1px solid var(--border); transition: all .2s; }
.filter-tabs button:hover { color: var(--foreground); }
.filter-tabs button.active { background: var(--gold); color: #0c1420; border-color: var(--gold); }

.stack { display: flex; flex-direction: column; gap: .75rem; }

/* ===== PAGES (from pages.css) ===== */
/* ============================================================
   Page layouts: Home + Best Pokies guide
   ============================================================ */

.ic-gold { color: var(--gold); }
.ic-gold-lg { color: var(--gold); width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; }

/* ---------- HERO (home) ---------- */
.hero { position: relative; overflow: hidden; background: #0c1420; }
.hero-bg { position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(ellipse at 70% 50%, #f5c51820 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, #00b74a15 0%, transparent 50%); }
.hero-inner { position: relative; padding: 3rem 1rem; display: grid; gap: 2rem; align-items: start; }
.hero h1 { font-size: 1.875rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; }
.hero-badges { display: flex; gap: .5rem; margin-bottom: 1rem; }
.hero-lede { color: var(--muted-foreground); line-height: 1.6; margin-bottom: 1.5rem; }
.hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.hero-stats .stat { background: var(--card); border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; text-align: center; }
.hero-stats .v { font-family: 'Poppins',sans-serif; font-size: 1.25rem; font-weight: 900; color: var(--gold); }
.hero-stats .l { font-size: .75rem; color: var(--muted-foreground); margin-top: .125rem; }
.hero-points { display: flex; flex-direction: column; gap: .5rem; }
.hero-points .pt { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.hero-featured-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: .875rem; font-weight: 600; color: var(--gold); font-family: 'Poppins',sans-serif; }
@media (min-width:1024px){ .hero-inner{ grid-template-columns: 2fr 3fr; padding: 4rem 1rem; } .hero h1{ font-size: 2.25rem; } }

/* ---------- Reviews grid ---------- */
.reviews-grid { display: grid; gap: 2rem; }
@media (min-width:1024px){ .reviews-grid{ grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.reviews-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.reviews-head h2 { font-size: 1.5rem; font-weight: 900; }
.viewall { font-size: .875rem; color: var(--gold); display: inline-flex; align-items: center; gap: .25rem; }
.review-cards { display: grid; gap: 1.25rem; }
@media (min-width:640px){ .review-cards{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; transition: border-color .2s; }
.review-card:hover { border-color: #f5c51830; }
.rc-img { position: relative; height: 11rem; background: var(--secondary); overflow: hidden; }
.rc-img img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .3s, transform .5s; }
.review-card:hover .rc-img img { opacity: .9; transform: scale(1.05); }
.rc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--card), transparent 60%); }
.rc-badge { position: absolute; top: .75rem; left: .75rem; z-index: 2; }
.rc-body { padding: 1.25rem; }
.rc-body h3 { font-weight: 700; font-size: 1rem; line-height: 1.35; margin-bottom: .5rem; }
.review-card:hover .rc-body h3 { color: var(--gold); }
.rc-body p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-meta { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--muted-foreground); }
.rc-meta-left { display: flex; gap: .75rem; }
.rc-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.rc-meta svg { width: 12px; height: 12px; }

.exclusive-banner { grid-column: 1 / -1; position: relative; background: linear-gradient(to right, #152033, #1e2d42, #152033); border: 1px solid #f5c51830; border-radius: .75rem; padding: 1.5rem; overflow: hidden; }
.eb-inner { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width:640px){ .eb-inner{ flex-direction: row; align-items: center; justify-content: space-between; } }
.eb-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; color: var(--gold); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .03em; }
.exclusive-banner h3 { font-size: 1.25rem; font-weight: 900; margin-bottom: .25rem; }
.exclusive-banner p { font-size: .875rem; color: var(--muted-foreground); margin: 0; }
.exclusive-banner .code { font-family: 'DM Mono',monospace; color: var(--gold); font-weight: 700; }

/* Sidebar */
.reviews-side { display: flex; flex-direction: column; gap: 1.25rem; }
.side-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.side-head h3 { font-weight: 900; font-size: 1.125rem; }
.side-head svg { width: 16px; height: 16px; color: var(--gold); }
.news-list { display: flex; flex-direction: column; gap: .75rem; }
.news-item { display: block; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; transition: border-color .2s; }
.news-item:hover { border-color: #f5c51840; }
.ni-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.ni-date { font-size: .75rem; color: var(--muted-foreground); }
.news-item h4 { font-size: .875rem; font-weight: 600; line-height: 1.35; margin: 0 0 .25rem; font-family: 'Inter',sans-serif; }
.news-item:hover h4 { color: var(--gold); }
.news-item p { font-size: .75rem; color: var(--muted-foreground); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-rankings { padding: 1rem; }

/* Payment methods */
.center-head { text-align: center; margin-bottom: 2rem; }
.center-head h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: .5rem; }
.center-head p { font-size: .875rem; color: var(--muted-foreground); max-width: 36rem; margin: 0 auto; }
.pay-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width:640px){ .pay-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width:1024px){ .pay-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); } }
.pay-card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1.25rem; transition: border-color .2s; }
.pay-card:hover { border-color: #f5c51840; }
.pm-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.pm-icon svg { width: 24px; height: 24px; }
.pay-card h3 { font-weight: 700; margin-bottom: .25rem; font-family: 'Inter',sans-serif; }
.pay-card > p { font-size: .875rem; color: var(--muted-foreground); margin: 0 0 .75rem; }
.pm-rows { display: flex; flex-direction: column; gap: .375rem; }
.pm-rows > div { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; }
.pm-rows span { color: var(--muted-foreground); }
.pm-rows b { color: var(--foreground); font-weight: 500; }
.pm-btn { width: 100%; margin-top: 1rem; padding: .5rem; border-radius: .5rem; font-size: .75rem; font-weight: 700; }

/* Responsible gambling */
.rg-card { background: var(--card); border: 1px solid #f5c51830; border-radius: 1rem; padding: 2rem; }
.rg-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width:1024px){ .rg-grid{ grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.rg-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.rg-icon { width: 2.5rem; height: 2.5rem; background: #f5c51820; border-radius: .75rem; display: flex; align-items: center; justify-content: center; }
.rg-icon svg { width: 20px; height: 20px; }
.rg-head h2 { font-size: 1.25rem; font-weight: 900; }
.rg-text p { color: var(--muted-foreground); font-size: .875rem; line-height: 1.6; margin: 0 0 1rem; }
.rg-resources { display: flex; flex-wrap: wrap; gap: .75rem; }
.rg-res { font-size: .75rem; font-weight: 500; background: var(--secondary); border: 1px solid var(--border); padding: .375rem .75rem; border-radius: .5rem; }
.rg-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; }
.rg-tool { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem; background: var(--secondary); border-radius: .75rem; text-align: center; }
.rg-tool svg { width: 20px; height: 20px; color: var(--accent); }
.rg-tool span { font-size: .75rem; color: var(--muted-foreground); }

/* Authors */
.authors-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width:640px){ .authors-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
.author-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; transition: border-color .2s, transform .2s; }
.authors-grid .author-card:hover { border-color: #f5c51840; transform: translateY(-2px); }
.authors-grid .author-card:hover .au-name { color: var(--gold); }
.au-viewlink { display: inline-flex; align-items: center; gap: .2rem; margin-top: .55rem; font-size: .72rem; font-weight: 600; color: var(--gold); }
.au-viewlink svg { width: 12px; height: 12px; }
.au-avatar { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .875rem; flex-shrink: 0; }
.au-name { font-weight: 700; font-size: .875rem; }
.au-role { font-size: .75rem; color: var(--accent); margin-bottom: .375rem; }
.author-card p { font-size: .75rem; color: var(--muted-foreground); line-height: 1.55; margin: 0; }

/* ============================================================
   BEST POKIES GUIDE
   ============================================================ */
.pk-hero { background: #0c1420; border-bottom: 1px solid var(--border); padding: 2.5rem 0; }
@media (min-width:1024px){ .pk-hero{ padding: 3.5rem 0; } }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.breadcrumb svg { width: 12px; height: 12px; }
.pk-hero-grid { display: grid; gap: 2rem; }
@media (min-width:1024px){ .pk-hero-grid{ grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.pk-hero h1 { font-size: 1.875rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; }
@media (min-width:1024px){ .pk-hero h1{ font-size: 3rem; } }
.pk-sub { display: block; font-size: 1.5rem; color: var(--muted-foreground); font-weight: 600; margin-top: .25rem; }
@media (min-width:1024px){ .pk-sub{ font-size: 1.875rem; } }
.pk-lede { color: var(--muted-foreground); line-height: 1.6; margin-bottom: 1.5rem; max-width: 42rem; }
.pk-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; color: var(--muted-foreground); }
.pk-meta span { display: inline-flex; align-items: center; gap: .375rem; }
.pk-meta svg { width: 14px; height: 14px; }
.pk-author { display: flex; align-items: center; gap: .375rem; color: inherit; transition: color .2s; }
.pk-author:hover { color: var(--gold); }
.pk-author:hover b { color: var(--gold); }
.mini-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #1a3a5c; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 700; }
.pk-quickstats { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; align-content: start; }
.pk-hero-right { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pk-hero-figure { border-radius: .9rem; overflow: hidden; border: 1px solid var(--border); line-height: 0; }
.pk-hero-figure img, img.pk-hero-img { display: block; width: 100%; height: auto; object-fit: cover; }
.qs-card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }
.qs-icon { margin-bottom: .5rem; }
.qs-icon svg { width: 20px; height: 20px; }
.qs-v { font-family: 'Poppins',sans-serif; font-size: 1.25rem; font-weight: 900; }
.qs-l { font-size: .75rem; color: var(--muted-foreground); }

.pk-body { padding: 2.5rem 1rem; }
.pk-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width:1024px){ .pk-layout{ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } }
.pk-toc-side { display: none; }
@media (min-width:1024px){ .pk-toc-side{ display: block; } }
.pk-sticky { position: sticky; top: 6rem; }
.pk-toc { padding: 1.25rem; margin-bottom: 1.25rem; }
.pk-toc h3 { font-size: .875rem; font-weight: 700; margin-bottom: .75rem; }
.pk-toc nav { display: flex; flex-direction: column; gap: .25rem; }
.pk-toc a { font-size: .75rem; color: var(--muted-foreground); padding: .375rem 0 .375rem .75rem; border-left: 2px solid var(--border); line-height: 1.35; transition: color .2s, border-color .2s; }
.pk-toc a:hover { color: var(--gold); border-color: var(--gold); }
.pk-side-cta { padding: 1.25rem; border-color: #f5c51830; }
.pk-side-cta > svg { width: 24px; height: 24px; margin-bottom: .75rem; }
.ps-title { font-weight: 700; font-size: .875rem; margin-bottom: .25rem; font-family: 'Poppins',sans-serif; }
.ps-desc { font-size: .75rem; color: var(--muted-foreground); margin-bottom: .75rem; }
.ps-bonus { font-weight: 600; color: var(--gold); font-size: .875rem; margin-bottom: .75rem; }
.ps-tcs { font-size: .75rem; color: var(--muted-foreground); text-align: center; margin: .5rem 0 0; opacity: .6; }

.pk-content { display: flex; flex-direction: column; gap: 3.5rem; }
.pk-section h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem; }
.pk-section > p { color: var(--muted-foreground); line-height: 1.6; margin: 0 0 1rem; }
.pk-sub-p { font-size: .875rem; margin-bottom: 1.5rem !important; }

.key-terms { padding: 1.5rem; }
.key-terms h3 { font-weight: 700; margin-bottom: 1rem; font-size: 1rem; }
.kt-grid { display: grid; gap: .75rem; }
@media (min-width:640px){ .kt-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.kt-item { display: flex; gap: .75rem; padding: .75rem; background: var(--secondary); border-radius: .5rem; }
.kt-item svg { margin-top: .125rem; }
.kt-term { font-weight: 600; font-size: .875rem; }
.kt-def { font-size: .75rem; color: var(--muted-foreground); margin-top: .125rem; }

.pk-table .col-sm { display: none; }
.pk-table .col-md { display: none; }
.pk-table .col-lg { display: none; }
@media (min-width:640px){ .pk-table .col-sm{ display: table-cell; } }
@media (min-width:768px){ .pk-table .col-md{ display: table-cell; } }
@media (min-width:1024px){ .pk-table .col-lg{ display: table-cell; } }
.pk-play-at { padding: 1.25rem; }

.two-col-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width:640px){ .two-col-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.icon-card { padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; transition: border-color .2s; }
.icon-card:hover { border-color: #f5c51840; }
.ic-box { width: 2.5rem; height: 2.5rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-box svg { width: 20px; height: 20px; }
.icon-card h3 { font-weight: 700; font-size: .875rem; margin-bottom: .25rem; font-family: 'Inter',sans-serif; }
.icon-card p { font-size: .75rem; color: var(--muted-foreground); line-height: 1.55; margin: 0; }

.type-card { padding: 1.25rem; transition: border-color .2s; }
.type-card:hover { border-color: #f5c51840; }
.tc-emoji { font-size: 1.5rem; margin-bottom: .75rem; }
.type-card h3 { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.type-card > p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 .75rem; }
.tc-lbl { font-size: .75rem; color: var(--muted-foreground); margin-bottom: .375rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.tc-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.tc-tags span { font-size: .75rem; background: var(--secondary); color: var(--muted-foreground); padding: .125rem .5rem; border-radius: 4px; }
.tc-best { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--muted-foreground); }
.tc-best b { color: var(--foreground); font-weight: 500; }

.rtp-grid { display: grid; gap: 1.25rem; }
@media (min-width:1024px){ .rtp-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.rtp-card { padding: 1.5rem; }
.rtp-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.rtp-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; }
.rtp-icon svg { width: 20px; height: 20px; }
.rtp-head h3 { font-weight: 700; }
.rtp-card > p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 1rem; }
.rtp-rows { display: flex; flex-direction: column; gap: .75rem; }
.rtp-row { display: flex; align-items: center; gap: .75rem; padding: .625rem; background: var(--secondary); border-radius: .5rem; }
.rtp-range { font-family: 'DM Mono',monospace; font-weight: 700; font-size: .875rem; width: 4rem; flex-shrink: 0; }
.rtp-lbl { font-size: .75rem; font-weight: 600; }
.rtp-desc { font-size: .75rem; color: var(--muted-foreground); }
.vol-block { padding: .75rem; background: var(--secondary); border-radius: .5rem; }
.vb-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.vb-head b { font-size: .875rem; }
.vol-block p { font-size: .75rem; color: var(--muted-foreground); margin: 0 0 .25rem; }
.vb-best { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--accent); }
.vb-best svg { width: 12px; height: 12px; }

.bonus-card { padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; }
.bc-emoji { font-size: 1.5rem; flex-shrink: 0; }
.bc-body { flex: 1; }
.bonus-card h3 { font-weight: 700; font-size: 1rem; margin-bottom: .75rem; }
.bc-cols { display: grid; gap: .75rem; }
@media (min-width:640px){ .bc-cols{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
.bc-lbl { font-size: .75rem; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.bc-cols p { font-size: .75rem; color: var(--muted-foreground); line-height: 1.5; margin: 0; }
.bonus-cta { background: linear-gradient(to right, #152033, #1e2d42); border: 1px solid #f5c51830; border-radius: .75rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width:640px){ .bonus-cta{ flex-direction: row; align-items: center; justify-content: space-between; } }
.bonus-cta h3 { font-weight: 900; font-size: 1.125rem; margin-bottom: .25rem; }
.bonus-cta p { font-size: .875rem; color: var(--muted-foreground); margin: 0; }

.step-card { padding: 1.25rem; display: flex; gap: 1.25rem; align-items: flex-start; transition: border-color .2s; }
.step-card:hover { border-color: #f5c51840; }
.step-num { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #f5c51820; border: 1px solid #f5c51840; display: flex; align-items: center; justify-content: center; font-family: 'Poppins',sans-serif; font-weight: 900; color: var(--gold); flex-shrink: 0; }
.step-card h3 { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; }
.step-card p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; margin: 0; }

.inline-picks { padding: 1.5rem; border-radius: 1rem; }

.faq-list { display: flex; flex-direction: column; gap: .5rem; }
.faq-item { border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; text-align: left; background: transparent; color: var(--foreground); font-weight: 600; font-size: .875rem; transition: background .2s; }
.faq-q:hover { background: rgba(30,45,66,.3); }
.faq-q span { padding-right: 1rem; }
.faq-chev { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 1.25rem 1.25rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 1rem; }
.faq-item.open .faq-a { display: block; }

.final-cta { background: linear-gradient(135deg, #152033, #1a2840, #0c1420); border: 1px solid #f5c51830; border-radius: 1rem; padding: 2rem; text-align: center; }
.final-cta h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: .5rem; }
.final-cta > p { color: var(--muted-foreground); font-size: .875rem; max-width: 32rem; margin: 0 auto 1.5rem; }
.fc-tcs { font-size: .75rem; color: var(--muted-foreground); margin-top: .75rem; opacity: .6; }

/* ============================================================
   Universal scrollable tables
   Every table scrolls horizontally inside its own rounded card
   instead of overflowing. Applies to current tables and any added
   later. Loaded last so it wins the cascade.
   ============================================================ */

/* Wrapper is the scroll container. (Do not force display here — the
   home page's .desktop-table must stay hidden on mobile. Block layout is
   the default for a div anyway.) */
.opt-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  border-radius: .75rem;
}
/* Keep the mobile hide winning over anything above. */
@media (max-width: 1023px) { .opt-table-wrap.desktop-table { display: none; } }

/* Tables take their natural width and scroll; fill the card when narrow. */
.opt-table-wrap > table,
.opt-table-wrap > .opt-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

/* Keep cells on one line so the table scrolls rather than squashing. */
.opt-table-wrap th,
.opt-table-wrap td {
  white-space: nowrap;
}

/* Readable minimums so columns don't collapse on small screens. */
.opt-table.pk-table { min-width: 560px; }
.desktop-table .opt-table { min-width: 640px; }

/* Safety net: any stray <table> not in a wrapper still scrolls. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* ...but tables inside our wrapper keep normal table layout (the wrapper
   handles scrolling), so restore table display for them. */
.opt-table-wrap > table,
.opt-table-wrap > .opt-table {
  display: table;
}

/* Subtle hint that the table scrolls (fade on the right edge). */
.opt-table-wrap {
  background-image: linear-gradient(to left, rgba(12,20,32,.6), transparent 2.5rem);
  background-attachment: local;
  background-repeat: no-repeat;
  background-position: right center;
}

/* ============================================================
   Author showcase page
   ============================================================ */
.author-hero { position: relative; overflow: hidden; background: #0c1420; border-bottom: 1px solid var(--border); padding: 2.5rem 0; }
@media (min-width:1024px){ .author-hero { padding: 3.5rem 0; } }
.author-hero-bg { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(ellipse at 80% 20%, #f5c51830 0%, transparent 55%), radial-gradient(ellipse at 10% 90%, #00b74a15 0%, transparent 50%); pointer-events: none; }
.author-hero-inner { position: relative; }
.author-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted-foreground); margin-bottom: 1.5rem; }
.author-breadcrumb svg { width: 12px; height: 12px; }

.author-id { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width:640px){ .author-id { flex-direction: row; align-items: center; gap: 1.5rem; } }
.author-avatar { width: 5rem; height: 5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Poppins',sans-serif; font-weight: 900; font-size: 1.75rem; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(0,0,0,.35); }
@media (min-width:640px){ .author-avatar { width: 6rem; height: 6rem; font-size: 2rem; } }
.author-role { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Poppins',sans-serif; font-size: .8rem; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.author-role svg { width: 14px; height: 14px; }
.author-id-text h1 { font-size: 1.875rem; font-weight: 900; line-height: 1.15; }
@media (min-width:1024px){ .author-id-text h1 { font-size: 2.5rem; } }
.author-tagline { color: var(--foreground); font-size: 1rem; margin: .5rem 0 0; max-width: 40rem; opacity: .9; }
.author-verified { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; font-size: .8rem; color: var(--muted-foreground); }
.author-verified svg { width: 14px; height: 14px; }

.author-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-top: 1.75rem; max-width: 32rem; }
.author-stat { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: .9rem; text-align: center; }
.author-stat .v { font-family: 'Poppins',sans-serif; font-size: 1.35rem; font-weight: 900; color: var(--gold); }
.author-stat .l { font-size: .7rem; color: var(--muted-foreground); margin-top: .15rem; }

.author-body { padding: 2.5rem 1rem; }
.author-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0,1fr); }
@media (min-width:1024px){ .author-layout { grid-template-columns: minmax(0,3fr) minmax(0,1fr); } }
.author-content { display: flex; flex-direction: column; gap: 2.75rem; min-width: 0; }
.author-section { min-width: 0; }
.author-section h2 { font-size: 1.4rem; font-weight: 900; margin-bottom: 1rem; }
.author-bio { color: var(--muted-foreground); line-height: 1.7; }
.author-bio p { margin: 0 0 1rem; }

.expertise-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; }
@media (min-width:640px){ .expertise-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.expertise-item { display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--border); border-radius: .6rem; padding: .8rem 1rem; font-size: .9rem; font-weight: 500; }
.expertise-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px; background: linear-gradient(to bottom, var(--gold), var(--border)); }
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -1.5rem; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(245,197,24,.15); }
.timeline-period { display: inline-block; font-family: 'DM Mono',monospace; font-size: .72rem; color: var(--gold); margin-bottom: .25rem; }
.timeline-content h3 { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.timeline-content p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; margin: 0; }

/* Author posts */
.author-posts { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width:640px){ .author-posts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.author-post { display: block; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1.1rem; transition: border-color .2s; }
.author-post:hover { border-color: #f5c51840; }
.author-post h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.author-post:hover h3 { color: var(--gold); }
.author-post p { font-size: .8rem; color: var(--muted-foreground); line-height: 1.5; margin: 0 0 .6rem; }
.author-post-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted-foreground); }
.author-post-meta svg { width: 12px; height: 12px; }

/* Sidebar */
.author-side { min-width: 0; }
.author-sticky { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.25rem; }
.credentials-card, .author-trust-card, .meet-team-card { padding: 1.25rem; }
.credentials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.credentials-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--muted-foreground); line-height: 1.45; }
.credentials-list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.author-trust-card p { font-size: .82rem; color: var(--muted-foreground); line-height: 1.55; margin: 0; }

.team-links { display: flex; flex-direction: column; gap: .6rem; }
.team-link { display: flex; align-items: center; gap: .7rem; padding: .55rem; border-radius: .6rem; border: 1px solid var(--border); transition: border-color .2s, background .2s; }
.team-link:hover { border-color: #f5c51840; background: rgba(30,45,66,.35); }
.team-avatar { width: 2.1rem; height: 2.1rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .78rem; flex-shrink: 0; }
.team-meta { display: flex; flex-direction: column; min-width: 0; }
.team-meta .tn { font-size: .82rem; font-weight: 600; }
.team-meta .tr { font-size: .7rem; color: var(--muted-foreground); }

/* ============================================================
   Standard content pages (About, Contact, Disclaimer, etc.)
   ============================================================ */
.page-hero { background: #0c1420; border-bottom: 1px solid var(--border); padding: 2.5rem 0; }
@media (min-width:1024px){ .page-hero { padding: 3.25rem 0; } }
.page-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.page-breadcrumb svg { width: 12px; height: 12px; }
.page-hero h1 { font-size: 1.875rem; font-weight: 900; line-height: 1.15; }
@media (min-width:1024px){ .page-hero h1 { font-size: 2.5rem; } }
.page-hero-lede { color: var(--muted-foreground); line-height: 1.6; margin: 1rem 0 0; max-width: 46rem; }

.page-body { padding: 2.5rem 1rem; }
.page-prose { max-width: 46rem; min-width: 0; color: var(--muted-foreground); line-height: 1.75; font-size: .975rem; }
.page-prose > *:first-child { margin-top: 0; }
.page-prose .lead { font-size: 1.075rem; color: var(--foreground); line-height: 1.65; margin-bottom: 1.5rem; }
.page-prose h2 { font-size: 1.4rem; font-weight: 900; color: var(--foreground); margin: 2rem 0 .85rem; }
.page-prose h3 { font-size: 1.1rem; font-weight: 700; color: var(--foreground); margin: 1.5rem 0 .5rem; }
.page-prose p { margin: 0 0 1rem; }
.page-prose ul, .page-prose ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.page-prose li { margin-bottom: .5rem; }
.page-prose li::marker { color: var(--gold); }
.page-prose strong { color: var(--foreground); font-weight: 600; }
.page-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.page-prose a:hover { color: var(--gold-hover); }
.page-prose em { color: var(--muted-foreground); }

.callout { border-radius: .75rem; padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; font-size: .9rem; line-height: 1.6; }
.callout strong { color: var(--foreground); }
.callout-help { background: rgba(0,183,74,.08); border: 1px solid rgba(0,183,74,.3); }
.callout-help a { color: var(--accent); }

/* Meet the Team grid */
.team-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0,1fr); }
@media (min-width:640px){ .team-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width:1024px){ .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.team-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: .85rem; padding: 1.35rem; transition: border-color .2s, transform .2s; min-width: 0; }
.team-card:hover { border-color: #f5c51840; transform: translateY(-2px); }
.team-card-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.team-card-avatar { width: 3.25rem; height: 3.25rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Poppins',sans-serif; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; }
.team-card-name { font-weight: 800; font-size: 1.05rem; }
.team-card:hover .team-card-name { color: var(--gold); }
.team-card-role { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: .15rem; }
.team-card-role svg { width: 12px; height: 12px; }
.team-card-bio { font-size: .875rem; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 1rem; }
.team-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.team-card-tags span { font-size: .7rem; background: var(--secondary); color: var(--muted-foreground); padding: .2rem .55rem; border-radius: 4px; }
.team-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--gold); }
.team-card-link svg { width: 13px; height: 13px; }