/* Shared component styles — header, hero, cards, buttons, footer and
 * everything else reused across pages. Loaded after base.css/hover.css and
 * before each page's own page-specific stylesheet, so a page file's rules
 * win a same-specificity tie without needing !important; a page file only
 * reaches for !important (or a more specific selector) when it genuinely
 * needs to outrank one of the more specific rules below.
 *
 * .legal-hero carries a deliberate difference from the design source: the
 * approved responsible-gambling.html / privacy-policy.html / terms.html hero
 * has no margin-top:-76px/padding-top:76px, so the sticky header sat on the
 * page's flat background for 76px before the hero began — the same hard seam
 * fixed on Free Bets, Best Casinos and Fancies (see those parts/design/*.php
 * files) and on parts/page-hero.php. verify-design.sh cannot see this (it
 * only compares text). This rule survives --apply because the rules above
 * are preloaded from the existing file before the scan runs (see 'Preload'
 * below) — but this comment block does not; it is rewritten from this
 * literal list every run, so keep it here, not only in the file on disk.
 *
 * Red buttons (.header-cta-primary, .hero-cta-primary,
 * .game-promo-cta-primary, .operator-cta-alt) also differ from the design
 * source on purpose: the approved design bakes their box-shadow into the
 * base state (a static mockup has no :hover), which showed as a permanent
 * glow. It is removed here; hover.css's hv3 adds it back on :hover only.
 *
 * Every Black Ops One display heading's line-height was bumped from the design's
 * 0.86/0.9 to 1.05 — deliberately, again. The tight ratio reads fine in a
 * static mockup sized for one exact wrap point, but on a live responsive
 * page the same heading can wrap onto two lines at another width, and at
 * 0.86 the second line's ascenders touch the first line's descenders.
 * 1.05 keeps the condensed look on a single line while giving two lines
 * room to breathe. verify-design.sh cannot see this (it only compares
 * text, not line-height).
 *
 * .legal-text (Privacy/Terms/Cookie Policy body paragraphs) got a
 * margin-bottom of 24px, once again matching the design source's own
 * margin:0 for that rule: with no gap, every paragraph ran straight into
 * the next numbered heading, and the final paragraph on each page ran
 * straight into the footer.
 *
 * RED-THEME REPASS: the site's canvas flipped from a near-black default
 * background to a light smoke/white one (.page-shell, .section-alt,
 * .section-fancies-alt, .newsletter, .section-game-alt — the only
 * backgrounds that actually changed — .footer has since moved to the same
 * smoke, see its own comment below), and the old signal-yellow accent
 * became red everywhere else. Every hero/chip/card that was already dark
 * (.hero, .about-hero, .legal-hero, .page-hero, .fancy-card,
 * .operator-card(-static), .game-promo, .tool-card, .helpline-banner,
 * .fancy-highlight-card) stays exactly as dark as before —
 * red reads fine as a small text/icon accent on white, but NOT on
 * near-black (a dark, saturated red is too close in luminance to the
 * near-black it would sit on), so every accent that lives on one of those
 * dark surfaces uses the brighter #C25050 instead of the base #A53232.
 * Base #A53232 is used for solid fills (buttons, badges, card-header
 * strips) and for plain text sitting directly on the new light canvas. Any
 * rule that filled a shape with the old gold and put dark ink text on top
 * (buttons, .operator-card-featured, .cta-banner, .newsletter-card,
 * .fancy-*-badge) flips its text to white instead — red is dark enough
 * that ink-on-red fails contrast the way ink-on-gold never did. */

.eyebrow { font-size:13px;font-weight:700;color:#A53232;margin-bottom:12px; }
/* .eyebrow is reused inside the still-dark hero sections (page-hero,
   about-hero, legal-hero) where the base red above would be unreadable
   against near-black — brighten it back up there only. */
.hero .eyebrow, .about-hero .eyebrow, .legal-hero .eyebrow, .page-hero .eyebrow { color:#C25050; }
/* Footer moved from a near-black panel to the same smoke used across the
   page's other light sections — every rgba(255,255,255,*) text/border tint
   below (sized for white-on-dark) becomes rgba(38,34,32,*) ink-on-light at
   the same alpha, and the few solid #fff values become #262220. */
.footer { position:relative;overflow:hidden;padding-top:70px;background:#12100F;color:#fff; }
.footer-cols { max-width:1240px;margin:0 auto;padding:68px 32px 36px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px; }
.footer-brand { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.footer-tagline { font-size:14.5px;line-height:1.65;color:rgba(255,255,255,0.6);margin:0;max-width:290px; }
.footer-col-heading { font-size:13px;font-weight:700;text-transform: uppercase;letter-spacing: 0.25rem;color:rgba(255,255,255,0.65);margin-bottom:14px; }
.footer-links { display:flex;flex-direction:column;gap:11px;font-size:14.5px; }
.footer-legal { max-width:1240px;margin:0 auto;padding:0 32px 36px; }
.footer-rg-notice { border:1px solid rgba(255,255,255,0.15);border-radius:6px;padding:24px 26px;display:flex;gap:22px;align-items:flex-start;background-color: rgba(255,255,255,0.05); }
.footer-rg-badge { flex-shrink:0;width:50px;height:50px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-weight:700;font-size:17px; }
.footer-rg-text { font-size:13.5px;line-height:1.65;color:rgba(255,255,255,0.65);margin:0 0 12px; }
.footer-rg-text-strong { color:#fff;font-weight:600; }
.footer-rg-bodies { display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;margin-bottom:10px; }
.footer-rg-body-link { color:#C25050;text-decoration:underline; }
.footer-helpline { font-size:13.5px;color:rgba(255,255,255,0.6); }
.footer-helpline-tel { color:inherit; }
.footer-disclaimer { font-size:12px;line-height:1.65;color:rgba(255,255,255,0.65);margin:20px 0 0; }
.footer-bottom { display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.14);font-size:12.5px;color:rgba(255,255,255,0.65); }
.page-shell { background:#E8E6E3;color:#262220;font-family:'Inter',system-ui,-apple-system,sans-serif;min-height:100vh; }
.scroll-sentinel { position:absolute;top:0;left:0;width:1px;height:26px;pointer-events:none; }
.header { position:sticky;top:0;z-index:50;background:transparent;border-bottom:none;box-shadow:none;transition:background 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease; }
.header-inner { max-width:1240px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;gap:36px; }
/* Play game/Claim free bets share one flex group so the gap between just
   these two buttons can match .hero-actions (12px) without shrinking
   .header-inner's own gap, which also separates the logo/nav/hamburger. */
.header-cta-group { display:flex;align-items:center;gap:12px; }
.header-logo { display:flex;align-items:center;gap:12px;color:#fff;white-space:nowrap; }
.header-logo-image { display:block;height:44px;width:auto; }
.header-spacer { flex:1; }
.header-nav { display:flex;gap:26px;align-items:center;font-size:15px;font-weight:600; }
.header-cta { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#E8E6E3;border:none;color:#262220;font-family:Inter,sans-serif;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:6px;box-shadow:0 0 22px rgba(0,0,0,0.14); }
/* Once the header itself has a light glass panel behind it (.is-scrolled,
   toggled in main.js), the button's own shadow only needs to be half as
   strong — the panel already separates it from the page below. */
.header.is-scrolled .header-cta { box-shadow:0 0 22px rgba(0,0,0,0.07); }
.header-cta-primary { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#A53232;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:6px;border:none; }
.hamburger-button { width:40px;height:40px;flex-shrink:0;align-items:center;justify-content:center;background:#A53232;border:none;border-radius:50%;cursor:pointer;padding:0; }
.mobile-menu { border-top:1px solid rgba(255,255,255,0.08);background:#12100F; }
.mobile-menu-nav { max-width:1240px;margin:0 auto;padding:20px 32px;display:flex;flex-direction:column;gap:4px; }
.mobile-menu-cta { flex-direction:column;gap:10px;margin-top:12px; }
.mobile-menu-cta-ghost { text-align:center;background:#E8E6E3;color:#262220;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:14px 20px;border-radius:6px;box-shadow:0 0 22px rgba(0,0,0,0.14); }
.mobile-menu-cta-primary { text-align:center;background:#A53232;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:14px 20px;border-radius:6px; }
.about-hero { position:relative;margin-top:-76px;padding-top:76px;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:#0C0C0C; }
.hero-glow { position:absolute;inset:0;background:radial-gradient(115% 85% at 76% 18%, rgba(194,80,80,0.32) 0%, rgba(18,16,15,0) 60%); }
/* On the homepage, .hero-glow carries the landing photo's wash instead of
   the red radial glow used on the still-dark about/legal heroes: a flat
   colour at one opacity, no gradient. */
.hero .hero-glow { background:linear-gradient(to right, rgba(18,16,15,1) 0%, rgba(18,16,15,1) 33.333%, rgba(165,50,50,1) 33.333%, rgba(165,50,50,1) 66.666%, rgba(18,16,15,1) 66.666%, rgba(18,16,15,1) 100%);opacity:0.85; }
.about-hero-body { position:relative;flex:1;width:100%;box-sizing:border-box;max-width:1304px;margin:0 auto;padding:120px 32px 96px;display:flex;flex-direction:column;justify-content:center; }
.relative-box { position:relative; }
.portrait-image { display:block;width:100%;height:100%;object-fit:cover; }
.about-hero-title { font-family:'Black Ops One',sans-serif;font-size:44px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0 0 20px;color:#fff; }
.about-hero-text { font-size:18px;line-height:1.65;color:rgba(255,255,255,0.65);margin:0 0 32px;max-width:600px;text-wrap:pretty; }
.about-hero-highlight { color:#C25050;font-weight:700;transition:color 200ms ease; }
.stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.stat-card { background:#1E1E1E;border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:20px 22px; }
.stat-value { font-family:Inter,sans-serif;font-weight:800;font-size:32px;line-height:1;color:#C25050;letter-spacing:-0.02em; }
.stat-label { font-size:13px;font-weight:600;color:rgba(255,255,255,0.5);margin-top:6px; }
.section-alt { background:#fff; }
/* .section-cream: the homepage's "The bookies we trust" section only —
   same smoke fill as the "Play game" ghost button (.hero-cta-ghost),
   instead of .section-alt's plain white, so the lighter cards on top
   of it still read as distinct. */
.section-cream { background:#E8E6E3; }
.section-narrow { max-width:1240px;margin:0 auto;padding:88px 32px; }
.eyebrow-alt { font-size:13px;font-weight:700;color:#A53232;margin-bottom:12px; }
.career-grid { display:grid;grid-template-columns:1fr 1.35fr;gap:56px;align-items:start; }
.portrait-frame-alt { position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden; }
.career-text { font-size:17px;line-height:1.65;color:rgba(38,34,32,0.65);margin:0 0 20px;text-wrap:pretty; }
.career-text-tight { font-size:17px;line-height:1.65;color:rgba(38,34,32,0.65);margin:0 0 32px;text-wrap:pretty; }
/* Timeline rows redesigned from a thin-line list into smoke pill rows, to
   match the card language used everywhere else on the site. */
.career-timeline { display:flex;flex-direction:column;gap:10px; }
.career-timeline-row, .career-timeline-row-last { display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#E8E6E3;border-radius:14px;font-size:14px; }
.career-timeline-club { color:rgba(38,34,32,0.65); }
/* text-align:right so a wrapped second line still hugs the row's right
   edge (flush-right, ragged-left) instead of trailing off to the left
   under the first line's longer width. */
.career-timeline-stats { color:#A53232;font-weight:700;text-align:right; }
.section-text-spaced { font-size:17px;line-height:1.65;color:rgba(38,34,32,0.65);margin:0 0 28px;text-wrap:pretty; }
.cta-banner-actions { display:flex;gap:12px;flex-wrap:wrap; }
.cta-banner-primary { background:#E8E6E3;color:#A53232;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:16px 26px;border-radius:6px;display:inline-flex;align-items:center;gap:8px; }
.cta-banner-ghost { border:1px solid rgba(255,255,255,0.45);color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:15px 24px;border-radius:6px; }
.page-hero-gradient { position:absolute;inset:0;background:linear-gradient(115deg,rgba(4,3,3,1) 0%,rgba(6,5,4,0.96) 22%,rgba(9,8,7,0.8) 45%,rgba(12,12,12,0.5) 68%,rgba(12,12,12,0.22) 100%); }
.page-hero-gradient-vertical { position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,0.5) 0%,rgba(8,7,6,0) 35%,rgba(8,7,6,0) 65%,rgba(8,7,6,0.9) 100%); }
.page-hero-glow { position:absolute;inset:0;background:radial-gradient(90% 70% at 82% 15%, rgba(194,80,80,0.24) 0%, rgba(18,16,15,0) 55%); }
.page-hero-content { position:relative;max-width:1240px;margin:0 auto;padding:150px 32px 72px; }
.page-hero-title { font-family:'Black Ops One',sans-serif;font-size:52px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0 0 14px;color:#fff; }
/* .page-hero-title is reused on the homepage inside the plain (now light)
   fancies section, not a hero — flip it back to ink there specifically. */
.section .page-hero-title, .section-alt .page-hero-title, .section-fancies-alt .page-hero-title { color:#262220; }
.page-hero-subtitle-narrow { font-size:17px;line-height:1.6;color:rgba(255,255,255,0.62);margin:0;max-width:640px; }
.section-wide { max-width:1240px;margin:0 auto;padding:96px 32px; }
.op-list-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
/* Added for the WordPress theme's live operator list (parts/op-list.php):
   .operator-list wraps the cards purely to carry KTag's data-listid/
   data-version/data-listtype attributes — it isn't part of the design's own
   markup, which has no such wrapper, and must not create a nested grid cell
   around the cards it wraps. display:contents makes it invisible to layout so
   its .operator-item children sit directly in .op-list-grid, same as the
   static fallback's cards (which have no wrapper div at all). */
.operator-list { display:contents; }
div.page-hero-content-tall { position:relative;width:calc(100% - 64px);max-width:1240px;margin:0 auto;padding:120px 32px 120px; }
.page-hero-subtitle { font-size:17px;line-height:1.6;color:rgba(255,255,255,0.62);margin:0;max-width:660px; }
/* Same highlighted-phrase treatment as .hero-subtitle-highlight (home) and
   .about-hero-highlight (about) — bold, full white against the muted
   rgba(255,255,255,0.62) subtitle around it — for Free Bets/Best Casinos/
   Fancies' own page-hero subtitles. */
.page-hero-subtitle-highlight { color:#fff;font-weight:700;transition:color 200ms ease; }
.fancy-highlight-card { background:linear-gradient(135deg,#171717 0%,#12100F 100%);border:1px solid rgba(194,80,80,0.3);border-radius:6px;padding:40px; }
.fancy-highlight-title { font-family:'Black Ops One',sans-serif;font-size:30px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#fff;margin:0 0 16px; }
.fancy-highlight-text { font-size:15.5px;line-height:1.65;color:rgba(255,255,255,0.65);margin:0 0 14px; }
.fancy-highlight-actions { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px; }
.fancy-highlight-cta { background:#A53232;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:15px 26px;border-radius:6px;display:inline-flex;align-items:center;gap:8px; }
.fancy-highlight-note { font-size:12.5px;color:rgba(255,255,255,0.4); }
.section-header-spaced { margin-top:56px; }
.section-header-tight { margin-bottom:12px; }
/* On the red-photo highlight card, text needs more opacity than the flat
   dark-card version to stay readable over the photo. */
.fancy-highlight-card-photo .fancy-highlight-text { color:rgba(255,255,255,0.88); }
.fancy-highlight-card-photo .fancy-highlight-note { color:rgba(255,255,255,0.78); }
/* hv24: this card's CTA matches the homepage's Play game button
   (.hero-cta-ghost/hv2) exactly — smoke fill, ink text, same hover. */
.fancy-highlight-card-photo .fancy-highlight-cta { background:#E8E6E3;color:#262220;box-shadow:0 0 22px rgba(0,0,0,0.14); }
/* .fancy-highlight-card-photo swaps the flat dark-gradient card for the same
   photo + rgba wash trick as .game-promo/.hero, but red instead of white or
   smoke — it needs its own stacking context (.fancy-highlight-content) so
   the text paints above the absolutely-positioned .fancy-highlight-glow. */
.fancy-highlight-card-photo { background-color:#fff;background-image:url('../assets/images/tft-bets-old-trafford-2.webp');background-size:cover;background-position:center 60%;background-repeat:no-repeat;border:none;position:relative;overflow:hidden; }
.fancy-highlight-glow { position:absolute;inset:0;background-color:rgba(165,50,50,0.85);pointer-events:none; }
.fancy-highlight-content { position:relative; }
/* The fancies page reuses the homepage's .fancy-card component as-is
   (white card on smoke section), matching the card treatment used
   everywhere else on the site. */
.section-fancies-alt { background:#E8E6E3;padding:96px 0; }
.container { max-width:1240px;margin:0 auto;padding:0 32px; }
.section-header { display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px;flex-wrap:wrap; }
.section-header-text { max-width:660px; }
.section-title { font-family:'Black Ops One',sans-serif;font-size:38px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0 0 14px;color:#262220; }
.section-subtitle { font-size:15px;line-height:1.6;color:rgba(38,34,32,0.6);margin:0; }
/* min-height, not a fixed height: with overflow:hidden below, a fixed
   height:100vh clips whatever content doesn't fit (the title's own top
   edge, on short/mobile viewports) instead of letting the hero grow —
   same min-height floor every other hero on the site (.about-hero,
   .legal-hero, .page-hero) already uses. */
.hero { position:relative;margin-top:-76px;padding-top:76px;padding-bottom:56px;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;background-color:#12100F;background-image:url('../assets/images/home-hero-bg-custom.jpeg');background-position:center 38%;background-size:cover;background-repeat:no-repeat;color:#fff;overflow:hidden; }
.hero-body { position:relative;flex:1;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:0; }
.hero-grid { max-width:1304px;width:100%;box-sizing:border-box;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.06fr 0.94fr;gap:56px;align-items:center; }
.hero-content { padding-top: clamp(56px, calc(100vh - 660px), 120px); padding-bottom: 84px; }
.hero-title { font-family:'Black Ops One',sans-serif;font-size:65px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0 0 26px;color:#E8E6E3; }
.hero-title-accent { color:#fff; }
.hero-title-red { color:#C25050; }
.hero-title-smoke { color:#C4C4C4; }
.hero-subtitle { font-size:19px;line-height:1.55;color:rgba(255,255,255,0.82);max-width:520px;margin:0 0 34px;text-wrap:pretty; }
.hero-subtitle-highlight { color:#fff;font-weight:700;transition:color 200ms ease; }
.hero-actions { display:flex;gap:12px;flex-wrap:wrap;align-items:center; }
.hero-cta-primary { background:#A53232;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;padding:17px 30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none; }
.hero-cta-ghost { background:#E8E6E3;border:none;color:#262220;font-family:Inter,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;padding:17px 28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 22px rgba(0,0,0,0.14); }
.hero-compliance { display:flex;gap:22px;margin-top:38px;font-size:13.5px;color:rgba(255,255,255,0.7); }
.hero-media { position:relative;height:600px; }
/* Irregular "blob" instead of a plain circle behind the cutout photo — an
   asymmetric border-radius (four different corner pairs) plus a slight
   rotation, so it reads as an organic shape rather than a perfect ellipse. */
.hero-media-frame { position:absolute;right:-10px;top:20px;bottom:0;left:22px;filter:drop-shadow(0 30px 40px rgba(0,0,0,0.45)); }
.hero-media-image { display:block;width:100%;height:100%;object-fit:contain; }
/* The big crest logo floating in the landing hero is the only thing using
   this frame — scoped here, not on the shared .hero-media-image class
   itself, since that class is reused for operator/crest logos elsewhere. */
.hero-media > .hero-media-frame .hero-media-image { transform:scale(0.8); }
section.section { max-width:1240px;margin:0 auto;padding:96px 32px; }
#fancies { position:relative;padding-top:0;padding-bottom:0; }
.section-title-hero { font-family:'Black Ops One',sans-serif;font-size:52px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0 0 14px;color:#262220; }
.section-subtitle-hero { font-size:17px;line-height:1.6;color:rgba(38,34,32,0.62);margin:0;text-wrap:pretty; }
.section-cta { display:flex;justify-content:center;margin-top:32px; }
.btn-see-all { background:#A53232;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:16px 30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.icon { flex-shrink:0; }
/* Moved inside #fancies (was its own .section-game-alt strip above it) and
   switched from the near-black fill to plain white — no border, per the
   fancy-card precedent; a soft ambient shadow does the separating-from-
   the-grey-section work a border would otherwise have done. */
.game-promo { position:relative;overflow:hidden;background-color:#fff;background-image:url('../assets/images/tft-bets-old-trafford-1.jpg');background-size:cover;background-position:center 60%;background-repeat:no-repeat;color:#262220;border-radius:6px;padding:52px 56px;display:flex;align-items:center;gap:48px;flex-wrap:wrap;box-shadow:0 8px 20px -6px rgba(0,0,0,0.14);transition:box-shadow 340ms cubic-bezier(.22,.61,.36,1); }
/* Same technique as the landing hero's .hero-glow: a separate absolutely
   positioned layer with a plain background-color wash, not a gradient
   baked into the photo's own background-image. */
.game-promo-glow { position:absolute;inset:0;background-color:rgba(232,230,227,0.85);pointer-events:none; }
.game-promo-content { position:relative;flex:1;min-width:300px; }
.game-promo-eyebrow { display:inline-block;background:rgba(165,50,50,0.08);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;color:#A53232;margin-bottom:16px; }
.promo-title { font-family:'Black Ops One',sans-serif;font-size:46px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0 0 12px; }
.game-promo-text { font-size:17px;line-height:1.6;color:rgba(38,34,32,0.65);margin:0;max-width:520px; }
.game-promo-actions { position:relative;display:flex;gap:12px;align-items:center; }
.game-promo-cta-primary { background:#A53232;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:17px;padding:18px 34px;border:none;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.game-promo-cta-ghost { background:#E8E6E3;border:none;color:#262220;font-family:Inter,sans-serif;font-weight:700;font-size:17px;padding:18px 28px;border-radius:6px;box-shadow:0 0 22px rgba(0,0,0,0.14); }
/* .section-subtitle-fancies sits under .page-hero-title in that same plain
   (light) fancies section — flip its text to ink too, only used here. */
.section-subtitle-fancies { font-size:17px;line-height:1.6;color:rgba(38,34,32,0.82);margin:0;max-width:620px;text-wrap:pretty; }
.fancy-list-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
/* .fancies-split: the homepage-only "This weekend's three" layout — a
   full-bleed (container-fluid) red band breaking out of #fancies'
   normal 1240px .section constraint via the standard full-bleed trick
   (left:50%/width:100vw/margin-left:-50vw), 60/40 split between the
   header text and the picks. The picks sit in a 2-column, 2-row grid:
   three dark, square (not rounded) cards plus a fourth tile holding
   the "See all" button. Every .fancy-card text colour below is flipped
   from ink-on-light to white/light-on-dark, scoped to this block only —
   the fancies page's own cards (.section-fancies-alt) stay untouched. */
.fancies-split { display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;position:relative;left:50%;width:100vw;margin-left:-50vw;box-sizing:border-box; }
.fancies-split-text-extra { font-size:15px;line-height:1.6;color:rgba(38,34,32,0.65);margin:18px 0 0;text-wrap:pretty; }
.fancies-split-link { display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#262220;font-family:Inter,sans-serif;font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;transition:opacity 200ms ease; }
.fancies-split-link:hover { opacity:0.72; }
.fancies-split-text { padding:56px;background-color:#E8E6E3;background-image:linear-gradient(rgba(232,230,227,0.9),rgba(232,230,227,0.9)),url('../assets/images/tft-fans.avif');background-size:cover;background-position:center;box-sizing:border-box; }
.fancies-split-text .eyebrow { color:#A53232; }
.fancies-split .page-hero-title { color:#262220; }
.fancies-split-text .section-subtitle-fancies { color:rgba(38,34,32,0.72); }
.fancies-split .fancy-list-grid { grid-template-columns:repeat(2,1fr);gap:0; }
/* Tint is a solid inset box-shadow (not a background gradient layer) so it
   can transition smoothly on hover — background-image isn't reliably
   animatable across browsers, box-shadow is. */
.fancies-split .fancy-card, .fancy-cta-tile { background-size:cover;border-radius:0;transition:box-shadow 220ms ease; }
.fancies-split .fancy-card:nth-child(1) { background-color:#A53232;background-image:url('../assets/images/tft-bets-old-trafford-3.webp');background-position:center;box-shadow:inset 0 0 0 999px rgba(165,50,50,0.85) !important; }
.fancies-split .fancy-card:nth-child(1):hover { box-shadow:inset 0 0 0 999px rgba(165,50,50,0.96) !important; }
.fancies-split .fancy-card:nth-child(2) { background-color:#12100F;background-image:url('../assets/images/tft-fans.avif');background-position:center;box-shadow:inset 0 0 0 999px rgba(18,16,15,0.82) !important; }
.fancies-split .fancy-card:nth-child(2):hover { box-shadow:inset 0 0 0 999px rgba(18,16,15,0.94) !important; }
.fancies-split .fancy-card:nth-child(3) { background-color:#12100F;background-image:url('../assets/images/tft-man-united-game.avif');background-position:center;box-shadow:inset 0 0 0 999px rgba(18,16,15,0.82) !important; }
.fancies-split .fancy-card:nth-child(3):hover { box-shadow:inset 0 0 0 999px rgba(18,16,15,0.94) !important; }
.fancy-cta-tile { background-color:#E8E6E3;background-image:url('../assets/images/tft-bets-old-trafford-1.jpg');background-position:center;box-shadow:inset 0 0 0 999px rgba(232,230,227,0.85) !important; }
.fancy-cta-tile:hover { box-shadow:inset 0 0 0 999px rgba(232,230,227,0.96) !important; }
.fancies-split .fancy-card-top .fancy-card-meta { color:rgba(255,255,255,0.65); }
.fancies-split .fancy-card-odds-big { color:#C25050; }
.fancies-split .fancy-card-title { color:#fff; }
.fancies-split .fancy-card-text { color:rgba(255,255,255,0.65); }
.fancies-split .fancy-card-confidence { border-top-color:rgba(255,255,255,0.14); }
.fancies-split .fancy-card-confidence-label { color:rgba(255,255,255,0.65); }
/* Tile 1 sits on the theme red instead of near-black, so its own odds
   number and filled confidence stars (both the base red) need to flip
   to white to stay readable — the empty/unfilled stars (fill:none) are
   left alone. */
.fancies-split .fancy-card:nth-child(1) .fancy-card-odds-big { color:#fff; }
.fancies-split .fancy-card:nth-child(1) svg[fill="#A53232"] { fill:#fff !important;stroke:#fff !important; }
/* These flush, square cards sit edge-to-edge with no gap, so hv8's usual
   lift-on-hover (translateY) would visually overlap/clash with its
   neighbours — kept off just for this block. */
.fancies-split .fancy-card:hover { transform:none !important; }
.fancy-cta-tile { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:48px 24px; }
.fancy-cta-tile-logo { width:88px;height:auto;opacity:0.85; }
/* .btn-see-all-ghost is only ever used in that same plain fancies section. */
.btn-see-all-ghost { background:#A53232;border:none;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:16px 30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.newsletter { position:relative;overflow:hidden;background-color:#A53232;background-image:linear-gradient(rgba(165,50,50,0.85),rgba(165,50,50,0.85)),url('../assets/images/fancies-tile-red-bg.webp');background-size:cover;background-position:center 38%; }
.newsletter-container { position:relative;max-width:1240px;margin:0 auto;padding:96px 32px; }
.newsletter-card { position:relative;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; }
.newsletter-card .cta-banner-actions { justify-content: flex-end; }
.newsletter-eyebrow { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.18);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;margin-bottom:16px; }
.newsletter-text { font-size:17px;line-height:1.6;color:rgba(255,255,255,0.85);margin:0; }
.newsletter-form { display:flex;gap:10px;flex-wrap:wrap; }
.newsletter-input { flex:1;min-width:200px;background:#fff;border:none;border-radius:6px;padding:18px 20px;font-family:'Inter',sans-serif;font-size:16px;color:#262220;outline:none; }
.newsletter-submit { background:#fff;color:#A53232;border:none;font-family:Inter,sans-serif;font-weight:700;font-size:16px;padding:18px 30px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.newsletter-disclaimer { font-size:13px;color:rgba(255,255,255,0.75);margin-top:12px; }
.legal-hero { position:relative;margin-top:-76px;padding-top:76px;box-sizing:border-box;overflow:hidden;background:linear-gradient(135deg,#A53232 0%,#7A2626 100%); }
/* Same red as .operator-card-featured, so the bright dark-bg eyebrow accent
   (#C25050) needs to switch to white here — it would blend into a red bg. */
.legal-hero .eyebrow { color:#fff; }
.page-hero-meta { font-size:15px;color:rgba(255,255,255,0.88);margin:0; }
.legal-grid-narrow { display:grid;grid-template-columns:260px minmax(0,680px);gap:64px;align-items:start;padding-top:8px; }
.legal-toc { position:sticky;top:100px;align-self:start; }
/* .legal-toc-* sit in the section-wide body below the (still-dark)
   legal-hero, on the new light canvas — flip every one of these to ink. */
.legal-toc-label { font-size:12px;font-weight:700;color:rgba(38,34,32,0.65);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px; }
.legal-toc-nav { display:flex;flex-direction:column;gap:2px;border-left:1px solid rgba(38,34,32,0.12); }
.legal-toc-link { padding:9px 16px;font-size:14px;color:rgba(38,34,32,0.62);border-left:2px solid transparent;margin-left:-1px; }
.legal-intro { font-size:16px;line-height:1.75;color:rgba(38,34,32,0.68);margin:0 0 36px; }
.legal-heading { font-family:Inter,sans-serif;font-weight:700;font-size:24px;color:#262220;margin:0 0 14px;scroll-margin-top:110px; }
.legal-text { font-size:15.5px;line-height:1.75;color:rgba(38,34,32,0.65);margin:0 0 24px; }
.legal-intro a, .legal-text a { text-decoration: underline; }
.page-hero-subtitle-spaced { font-size:17px;line-height:1.6;color:rgba(255,255,255,0.62);margin:0 0 24px;max-width:660px; }
.page-hero-age-notice { display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:14px 20px; }
.age-badge { flex-shrink:0;width:36px;height:36px;border:2px solid #A53232;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-weight:700;font-size:13px;color:#A53232; }
.age-notice-text { font-size:14px;color:rgba(38,34,32,0.7); }
.legal-grid { display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;align-items:start;padding-top:8px; }
/* .rg-* sit in responsible-gambling.html's section-wide body, same light
   canvas as .legal-* above. */
.rg-intro { font-size:16px;line-height:1.7;color:rgba(38,34,32,0.68);margin:0 0 64px;max-width:760px; }
.rg-heading { font-family:'Black Ops One',sans-serif;font-size:34px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#262220;scroll-margin-top:110px;margin:0 0 28px;max-width:640px; }
.rg-tools { margin-bottom:80px; }
/* Same bottom-pinning fix as .fancy-card: a stretched grid row card with a
   trailing link (.support-card-link, the 3-across GambleAware/GamCare/
   GamStop row) left that link sitting right under its own text instead of
   lined up with its row-mates whenever one card's text ran shorter. */
.tool-card { display:flex;flex-direction:column;background:#F7F6F4;border:1px solid rgba(18,16,15,0.08);border-radius:6px;padding:26px; }
.tool-card-head { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.tool-card-title { font-family:Inter,sans-serif;font-weight:700;font-size:17px;color:#262220; }
.tool-card-text { font-size:13.5px;line-height:1.55;color:rgba(38,34,32,0.65);margin:0; }
.rg-support { margin-bottom:40px; }
.support-card-text { font-size:13.5px;line-height:1.55;color:rgba(38,34,32,0.65);margin:0 0 12px; }
.support-card-link { margin-top:auto;font-size:13.5px;font-weight:600;color:#A53232; }
.helpline-banner { background:linear-gradient(135deg,#171717 0%,#12100F 100%);border:1px solid rgba(194,80,80,0.3);border-radius:6px;padding:28px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:80px; }
.helpline-banner-text { flex:1;min-width:220px; }
.helpline-label { font-size:12px;font-weight:700;color:#C25050;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px; }
.helpline-number { font-family:Inter,sans-serif;font-weight:800;font-size:26px;color:#fff; }
.helpline-number-tel { color:inherit; }
.helpline-note { font-size:14px;line-height:1.5;color:rgba(255,255,255,0.55);margin:0;max-width:340px; }
.rg-heading-signs { font-family:'Black Ops One',sans-serif;font-size:34px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#262220;scroll-margin-top:110px;margin:0 0 24px;max-width:640px; }
.rg-signs-intro { font-size:16px;line-height:1.7;color:rgba(38,34,32,0.68);margin:0 0 20px;max-width:720px; }
.rg-signs-list { font-size:15px;line-height:1.9;color:rgba(38,34,32,0.75);margin:0;padding-left:22px;max-width:640px; }
/* Fancy cards redesigned as clean white cards (were near-black): a soft
   ambient shadow does the separating-from-the-page work the old dark fill
   used to do for free, the red header strip gets a touch more presence
   (taller, bolder odds), and the crest gets its own light chip + ring since
   a plain white circle on a white card would otherwise disappear. */
/* display:flex column — the grid row already stretches this card to match
   the tallest one in the row (CSS Grid's default align-items:stretch), so
   .fancy-card-body can push .fancy-card-confidence to the card's bottom
   edge below, regardless of how long .fancy-card-text runs. (An explicit
   height:100% here would fight that stretch — percentage heights inside an
   auto-sized grid row are circular and can undersize the row instead.) */
.fancy-card { display:flex;flex-direction:column;background:#fff;border:none;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(23,20,18,0.04),0 20px 40px -24px rgba(23,20,18,0.16);transition:transform 340ms cubic-bezier(.22,.61,.36,1),box-shadow 340ms cubic-bezier(.22,.61,.36,1); }
.fancy-card-meta { font-family:Inter,sans-serif;font-weight:800;font-size:12.5px;color:#fff;letter-spacing:0.04em;text-transform:uppercase; }
.fancy-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 0; }
.fancy-card-top .fancy-card-meta { color:rgba(38,34,32,0.65); }
.fancy-card-crest { width:68px;height:68px;flex-shrink:0;background:#E8E6E3;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.fancy-card-odds-big { font-family:'Black Ops One',sans-serif;font-size:42px;line-height:1;color:#A53232;padding:16px 24px 0; }
.fancy-card-title { font-family:Inter,sans-serif;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-0.015em;padding:14px 24px 0;color:#262220; }
.fancy-card-body { flex:1;display:flex;flex-direction:column;padding:16px 24px 26px; }
.fancy-card-text { font-size:14.5px;line-height:1.6;color:rgba(38,34,32,0.65);margin:0 0 18px; }
.fancy-card-confidence { margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid rgba(38,34,32,0.08); }
.fancy-card-confidence-label { font-size:12.5px;font-weight:600;color:rgba(38,34,32,0.65); }
.fancy-card-confidence-stars { display:flex;gap:3px; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.operator-card-featured { grid-column:1 / -1;position:relative;background:linear-gradient(135deg,#A53232 0%,#7A2626 100%);color:#fff;border-radius:6px;padding:26px 28px;display:grid;grid-template-columns:150px minmax(0,1fr) 230px;gap:26px;align-items:center; }
.operator-card-badge-alt { position:absolute;top:-12px;left:26px;background:#12100F;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:12px;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:8px; }
.operator-card-logo { height:60px;background:#fff;border:1px solid rgba(18,16,15,0.07);border-radius:6px;overflow:hidden; }
.operator-card-name-row { display:flex;align-items:center;gap:11px;margin-bottom:6px;flex-wrap:wrap; }
.operator-card-name { font-family:Inter,sans-serif;font-weight:700;font-size:21px;letter-spacing:-0.01em; }
.operator-rating-badge { display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.22);color:#fff;border-radius:20px;padding:4px 10px;font-size:12.5px;font-weight:700; }
.operator-offer-title { font-size:19px;font-weight:600;margin-bottom:7px; }
.operator-offer-terms { font-size:12px;line-height:1.5;color:rgba(255,255,255,0.88);margin:0;max-width:540px; }
.operator-card-actions { display:flex;flex-direction:column;align-items:center;gap:8px; }
.operator-cta-featured { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#E8E6E3;color:#A53232;border:none;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:16px 20px;border-radius:6px;box-shadow:0 10px 22px -12px rgba(0,0,0,0.4); }
/* display:flex column (the grid row already stretches this card to match
   its row-mate's height) + margin-top:auto on the CTA row below: same
   bottom-pinning fix as .fancy-card — "Visit site" sat right under its own
   terms text instead of lined up with its row-mate whenever one operator's
   terms ran longer/shorter than the other's. */
.operator-card-static { display:flex;flex-direction:column;background:#F7F6F4;color:#262220;border:none;border-radius:6px;padding:24px;gap:16px;transition:transform 340ms cubic-bezier(.22,.61,.36,1),box-shadow 340ms cubic-bezier(.22,.61,.36,1),background-color 260ms ease; }
.operator-card-row { display:flex;align-items:center;gap:16px; }
.operator-card-cta-row { margin-top:auto;justify-content:flex-start;width:100%; }
.operator-card-logo-sm { height:44px;width:96px;flex-shrink:0;background:#fff;border:1px solid rgba(18,16,15,0.07);border-radius:6px;overflow:hidden; }
.operator-card-name-row-alt { display:flex;align-items:center;gap:11px;flex-wrap:wrap; }
.operator-rating-badge-alt { display:flex;align-items:center;gap:5px;background:rgba(165,50,50,0.1);color:#A53232;border-radius:20px;padding:4px 10px;font-size:12.5px;font-weight:700; }
.operator-offer-terms-alt { font-size:12px;line-height:1.5;color:rgba(38,34,32,0.65);margin:0; }
.operator-cta { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#A53232;color:#fff;border:none;font-family:Inter,sans-serif;font-weight:700;font-size:15px;padding:14px 22px;border-radius:6px; }
.operator-card-badge { position:absolute;top:-12px;left:26px;background:#12100F;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:12px;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.operator-card { display:flex;flex-direction:column;background:#F7F6F4;color:#262220;border:none;border-radius:6px;padding:24px;gap:16px;transition:transform 340ms cubic-bezier(.22,.61,.36,1),box-shadow 340ms cubic-bezier(.22,.61,.36,1),background-color 260ms ease; }
/* Mobile-only operator-card typography/spacing pass, brought over from the
   troydeneeybets-wp reference theme's own 680px oplist refinement. Desktop
   is untouched — this only fires <=680px, the breakpoint already used for
   mobile layout elsewhere (see free-bets.css/best-casinos.css/index.css
   680px blocks). !important here is deliberate: it wins over those page
   files' own (non-important) padding/.operator-card-logo rules at the same
   breakpoint regardless of load order, so this pass is always the final
   word on those two properties. */
@media (max-width: 680px) {
	.operator-card-featured,
	.operator-card-static,
	.operator-card { padding: 20px 24px !important; gap: 14px !important; }

	.operator-card-logo { width: 120px !important; height: 84px !important; margin: 0 auto !important; }
	.operator-card-logo-sm { width: 96px !important; height: 64px !important; }

	.operator-card-name { font-size: 16px !important; }

	.operator-offer-title { font-size: 30px !important; font-weight: 900 !important; line-height: 1.05 !important; margin-bottom: 6px !important; }

	.operator-offer-terms,
	.operator-offer-terms-alt { font-size: 11px !important; line-height: 1.45 !important; }

	.operator-cta-featured,
	.operator-cta { font-weight: 800 !important; padding: 16px 24px !important; }

   .section-wide, .container {
      padding-left: 20px;
      padding-right: 20px;
   }

   .page-hero-title { font-size: 46px; }
}

/* Added by hand — inline styles that were previously left in place because
 * they sat inside a PHP string (printf/echo), not template markup, and the
 * old extractor script only ever scanned markup. Moved out now that there's
 * no risk of a regex mangling a format string: the style value itself was
 * always 100% static (any %s/%d in the surrounding printf lands elsewhere in
 * the string, never inside the style attribute), or the "dynamic" part is a
 * simple two-state toggle better expressed as a modifier class or a native
 * pseudo-class (:disabled) than as computed inline CSS.
 *
 * .page-hero's background-image is a CSS custom property, --tdb-hero-bg, set
 * inline per page — that one value is the only part of these four hero
 * sections (parts/design/free-bets|best-casinos|fancies.php, parts/page-
 * hero.php) that genuinely cannot live here: the URL is built from TDB_IMG,
 * a PHP constant resolved from get_template_directory_uri() at request time
 * (different on localhost, staging and live), so no static CSS file can
 * know it ahead of time. Position/size/repeat/fallback colour do not vary
 * that way and live here instead; free-bets and fancies use this class's
 * own default 22% position, best-casinos overrides it with .page-hero-bg-20.
 * Terrace Bets doesn't set --tdb-hero-bg on any page — there's no editorial
 * action photography of a fan media channel to hang a full-bleed background
 * on, so all three hero sections fall through to the flat --tdb-hero-bg,
 * none) background-color below and stay flat dark red instead. */
.page-hero { position:relative;margin-top:-76px;padding-top:76px;box-sizing:border-box;overflow:hidden;background-color:#0C0C0C;background-image:var(--tdb-hero-bg, none);background-position:center 22%;background-size:cover;background-repeat:no-repeat; }
/* .page-hero-landing-bg reuses the home landing hero's own photo + flat
   rgba(232,230,227,0.85) wash (see .hero .hero-glow) instead of the dark
   gradient/glow trio, so free-bets and best-casinos open with the same look
   as the homepage. Only .page-hero-gradient carries the wash; the other two
   overlay divs are switched off so the washes don't stack and go too pale. */
.page-hero-landing-bg { background-image:url('../assets/images/home-hero-bg.webp');background-position:center 38%; }
.page-hero-landing-bg .page-hero-gradient { background:rgba(18,16,15,0.85); }
.page-hero-landing-bg .page-hero-gradient-vertical, .page-hero-landing-bg .page-hero-glow { background:none; }
.page-hero-landing-bg .page-hero-content { padding-bottom:150px; }
/* .about-hero-landing-bg is the same treatment for the About page's hero,
   which uses its own .about-hero/.hero-glow markup rather than .page-hero. */
.about-hero-landing-bg { background-image:url('../assets/images/tft-fans.avif');background-position:center 38%;background-size:cover;background-repeat:no-repeat; }
/* Same photo + wash trick as .page-hero-landing-bg, but the About page uses
   the theme's own red for the wash instead of the smoke white, so text
   flips to white (rather than ink) to stay readable on top of it. */
.about-hero-landing-bg .hero-glow { background:rgba(165,50,50,0.85); }
.about-hero-landing-bg .eyebrow { color:rgba(255,255,255,0.85); }
.about-hero-landing-bg .about-hero-title { color:#fff; }
.about-hero-landing-bg .about-hero-text { color:rgba(255,255,255,0.88); }
.about-hero-landing-bg .about-hero-highlight { color:#fff; }
.about-hero-landing-bg .about-hero-body { padding-bottom:150px; }
.about-hero-landing-bg .stat-card { background:#fff; }
.about-hero-landing-bg .stat-label { color:rgba(38,34,32,0.65); }
/* .header-on-red (About page only) keeps the header readable while it sits
   over the solid red hero wash: nav/logo flip to white in the default
   (unscrolled) state, then fall back to the site-wide dark-on-glass look the
   moment .is-scrolled is added, exactly like every other page. */
.header-on-red:not(.is-scrolled) .header-nav-link { color:#fff; }
.header-on-red:not(.is-scrolled) .header-nav-link.is-current { color:#fff; }
.header-on-red:not(.is-scrolled) .header-cta-primary { background:#fff;color:#A53232; }
.header-nav-link { color:#262220; }
.header-nav-link.is-current { color:#A53232;font-weight:800; }
/* .header-on-dark (index only, over the dark/red-banded landing hero)
   mirrors the .header-on-red pattern above: smoke nav + logo while
   unscrolled. free-bets/best-casinos/fancies keep the plain dark-ink nav
   pre-scroll — their hero is a light photo wash, not a dark one. */
.header-on-dark:not(.is-scrolled) .header-nav-link { color:#E8E6E3; }
.header-on-dark:not(.is-scrolled) .header-nav-link.is-current { color:#fff; }
/* Once scrolled, the header itself becomes a dark glass panel (see
   main.js) on every page, so nav text goes smoke there too — regardless
   of which of the three hero treatments above was showing beforehand.
   Buttons are untouched; only the nav link colour changes here. */
.header.is-scrolled .header-nav-link { color:#E8E6E3; }
/* ...except the current-page link, which stays the theme red (bright
   on-dark variant, since the scrolled panel is dark) instead of going
   smoke like its siblings. */
.header.is-scrolled .header-nav-link.is-current { color:#C25050; }
.mobile-nav-link { padding:12px 0;font-size:17px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.08);color:#fff; }
.mobile-nav-link.is-current { color:#C25050;font-weight:800; }
.footer-link-item { color:rgba(255,255,255,0.75); }
.footer-link-item.is-current { color:#C25050; }
.safer-gambling-placeholder { font-size:12px;color:rgba(255,255,255,0.65);margin-top:10px;font-family:ui-monospace,monospace; }
.newsletter-submit:disabled { cursor:not-allowed;opacity:0.55; }

/* ---------------------------------------------------------------------------
 * WordPress-only states.
 *
 * The static design never had a single-Fancy page, a 404, or a plain blog
 * list — those only exist once the theme is wired to WordPress. Styled here
 * to match the design's own system (light #E8E6E3 body, #262220 ink, #A53232
 * accent, Black Ops One display type, Inter body, 6px radius) rather than
 * inventing a different visual language for them.
 * ------------------------------------------------------------------------ */

.content-section { max-width:1240px;margin:0 auto;padding:72px 32px 96px; }
.content-prose { max-width:760px;margin:0 auto; }

/* Single Fancy (single-tft_fancy.php) */
.fancy-content-wrap { max-width:680px;margin:0 auto; }
.fancy-odds-badge { display:inline-flex;align-items:baseline;gap:8px;background:#fff;border-radius:6px;padding:10px 18px;margin-bottom:28px;box-shadow:0 6px 18px -10px rgba(0,0,0,0.18); }
.fancy-odds-label { font-size:12.5px;font-weight:700;color:rgba(38,34,32,0.55);text-transform:uppercase;letter-spacing:0.03em; }
.fancy-odds-value { font-family:'Black Ops One',sans-serif;font-size:22px;color:#A53232; }
.fancy-confidence-row { display:flex;align-items:center;gap:10px;margin:28px 0;padding-top:20px;border-top:1px solid rgba(38,34,32,0.1); }
.fancy-disclaimer { font-size:13.5px;line-height:1.7;color:rgba(38,34,32,0.55);margin:28px 0 0; }
.fancy-disclaimer-link { color:#A53232;text-decoration:underline; }
.fancy-back-link-wrap { margin-top:36px; }
.fancy-back-link { font-family:Inter,sans-serif;font-weight:700;font-size:14px;color:#A53232;text-decoration:underline; }

/* 404 (404.php) — reuses .legal-hero's red gradient treatment rather than a
   third hero style, since a 404 is a similarly "off to the side" page. */
.error-hero { position:relative;margin-top:-76px;padding-top:76px;box-sizing:border-box;overflow:hidden;background:linear-gradient(135deg,#A53232 0%,#7A2626 100%);text-align:center;padding-bottom:96px; }
.error-hero .eyebrow { color:#fff;justify-content:center;display:flex; }
.error-title { font-family:'Black Ops One',sans-serif;font-size:42px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#fff;margin:0 auto 16px;max-width:720px; }
.error-text { font-size:17px;line-height:1.6;color:rgba(255,255,255,0.78);margin:0 auto 32px;max-width:560px; }
.error-actions { display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; }
.error-cta-primary { background:#262220;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;padding:17px 30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none; }
.error-cta-ghost { background:#fff;border:none;color:#262220;font-family:Inter,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;padding:17px 28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }

/* Plain blog fallback (index.php) — not used in normal operation, since
   every real URL is served by front-page.php, a page template, or 404.php. */
.blog-list { max-width:760px;margin:0 auto;padding:96px 32px; }
.blog-post { padding:28px 0;border-bottom:1px solid rgba(38,34,32,0.1); }
.blog-post-title { font-family:'Black Ops One',sans-serif;font-size:24px;text-transform:uppercase;color:#262220;margin:0 0 10px; }
.blog-post-title-link { color:#262220; }
.blog-post-title-link:hover { color:#A53232; }
.blog-post-excerpt { font-size:15px;line-height:1.7;color:rgba(38,34,32,0.65); }
.blog-empty { text-align:center;padding:96px 32px;color:rgba(38,34,32,0.55); }

/* US-market "no offers yet" holding state (parts/op-list.php) — the design
   has no equivalent, since it was never built with a non-UK market in mind. */
.affiliate-note { background:#fff;border-radius:6px;padding:28px 32px;box-shadow:0 6px 18px -10px rgba(0,0,0,0.18); }
.affiliate-note-title { font-family:'Black Ops One',sans-serif;font-size:18px;text-transform:uppercase;color:#262220;margin:0 0 8px; }
.affiliate-note-text { font-size:14.5px;line-height:1.6;color:rgba(38,34,32,0.65);margin:0; }