/* GENERATED — do not edit by hand.
 *
 * One rule per distinct inline style that used to sit in the templates.
 * Class names are looked up in ../../../../bin/class-names.json (hash of the
 * declaration -> readable name), so regenerating keeps these names instead
 * of reverting to the raw s-xxxxxxxx hash. A declaration with no entry in
 * that file falls back to the hash — add a name there rather than leaving it.
 *
 * Loaded last (see tdb_enqueue) so these win over the normal rules in
 * base/hover/page CSS exactly as the inline styles did, while the
 * !important rules in those files keep overriding them as before.
 *
 * .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 #FF4136 instead of the base #CE0608.
 * Base #CE0608 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. */

.error-hero { max-width:1240px;margin:0 auto;padding:180px 32px 120px;text-align:center; }
.eyebrow { font-size:13px;font-weight:700;color:#CE0608;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:#FF4136; }
.error-title { font-family:'Black Ops One',sans-serif;font-size:52px;line-height:1.05;text-transform:uppercase;margin:0 0 16px;color:#262220; }
.error-text { font-size:17px;line-height:1.6;color:rgba(38,34,32,0.6);margin:0 auto 32px;max-width:520px; }
.error-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; }
.error-cta-primary { background:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;padding:16px 28px;border-radius:999px;display:inline-flex;align-items:center;gap:8px; }
.error-cta-ghost { border:1px solid rgba(38,34,32,0.2);color:#262220;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;padding:16px 28px;border-radius:999px;display:inline-flex;align-items:center;gap:8px; }
/* 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:#F6F6F6;color:#262220; }
.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(38,34,32,0.6);margin:0;max-width:290px; }
.footer-col-heading { font-size:13px;font-weight:700;color:rgba(38,34,32,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(38,34,32,0.15);border-radius:20px;padding:24px 26px;display:flex;gap:22px;align-items:flex-start;background-color: white;; }
.footer-rg-badge { flex-shrink:0;width:50px;height:50px;border:2px solid #262220;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Rubik,sans-serif;font-weight:700;font-size:17px; }
.footer-rg-text { font-size:13.5px;line-height:1.65;color:rgba(38,34,32,0.65);margin:0 0 12px; }
.footer-rg-text-strong { color:#262220;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:#CE0608;text-decoration:underline; }
.footer-helpline { font-size:13.5px;color:rgba(38,34,32,0.6); }
.footer-helpline-tel { color:inherit; }
.footer-disclaimer { font-size:12px;line-height:1.65;color:rgba(38,34,32,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(38,34,32,0.14);font-size:12.5px;color:rgba(38,34,32,0.65); }
.page-shell { background:#F6F6F6;color:#262220;font-family:'Rubik',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:37px;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:#F6F6F6;border:none;color:#262220;font-family:Rubik,sans-serif;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:999px;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:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:999px;border:none; }
.hamburger-button { width:40px;height:40px;flex-shrink:0;align-items:center;justify-content:center;background:#CE0608;border:none;border-radius:50%;cursor:pointer;padding:0; }
.mobile-menu { border-top:1px solid rgba(38,34,32,0.08);background:#fff; }
.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:#F6F6F6;color:#262220;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:14px 20px;border-radius:999px;box-shadow:0 0 22px rgba(0,0,0,0.14); }
.mobile-menu-cta-primary { text-align:center;background:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:14px 20px;border-radius:999px; }
.blog-list { max-width:1240px;margin:0 auto;padding:150px 32px 96px; }
.blog-post { margin-bottom:48px; }
.blog-post-title { font-family:'Black Ops One',sans-serif;font-size:34px;text-transform:uppercase;margin:0 0 12px;color:#262220; }
.blog-post-title-link { color:#262220; }
.blog-post-excerpt { color:rgba(38,34,32,0.65);font-size:16px;line-height:1.7; }
.blog-empty { color:rgba(38,34,32,0.65); }
.content-section { max-width:1240px;margin:0 auto;padding:64px 32px 96px; }
.content-prose { max-width:820px;color:rgba(38,34,32,0.72);font-size:16.5px;line-height:1.8; }
.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(255,65,54,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:rgba(250,250,250,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:#FF4136;font-weight:700;transition:color 200ms ease; }
/* Same idea as .about-hero-highlight, for the light-canvas hero paragraphs
   on Home/Free Bets/Best Casinos/Fancies/Responsible Gambling — base red
   (#CE0608), not the bright #FF4136 reserved for dark surfaces (see the
   RED-THEME REPASS note above). No hover state: plain emphasised text, not
   a link. */
.text-highlight { color:#CE0608;font-weight:700; }
.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:20px;padding:20px 22px; }
.stat-value { font-family:Rubik,sans-serif;font-weight:800;font-size:32px;line-height:1;color:#FF4136;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-narrow { max-width:1240px;margin:0 auto;padding:88px 32px; }
.eyebrow-alt { font-size:13px;font-weight:700;color:#CE0608;margin-bottom:12px; }
.section-title-spaced { font-family:'Black Ops One',sans-serif;font-size:34px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#262220;margin:0 0 32px; }
.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:20px;overflow:hidden;border:1px solid rgba(18,16,15,0.12);box-shadow:0 20px 40px -24px rgba(23,20,18,0.3); }
.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:#F6F6F6;border-radius:14px;font-size:14px; }
.career-timeline-club { color:rgba(38,34,32,0.65); }
.career-timeline-stats { color:#CE0608;font-weight:700; }
/* .about-section-smoke is the same white-cap-wave-over-smoke technique as
   #fancies on the homepage, sized for this shorter statement section. */
.about-section-smoke { position:relative;background:#F6F6F6;padding-top:170px;padding-bottom:170px; }
.about-section-smoke .section-narrow { padding-top:0;padding-bottom:0; }
/* .section-title-white/.section-text-white sit in a plain <section> with no
   dark wrapper of its own — on the old near-black canvas that meant white
   text; on the new smoke canvas it means ink instead. Name kept as-is
   (only the value changed) so it still matches the markup's class. */
.section-title-white { font-family:'Black Ops One',sans-serif;font-size:34px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#262220;margin:0 0 18px; }
.section-text-white { font-size:17px;line-height:1.65;color:rgba(38,34,32,0.65);margin:0;text-wrap:pretty; }
.section-title-tight { font-family:'Black Ops One',sans-serif;font-size:34px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;color:#262220;margin:0 0 18px; }
.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 { color:#fff;border-radius:20px;padding:52px; }
/* .cta-banner-photo: same photo + rgba(206,6,8,0.85) wash as
   .fancy-highlight-card-photo on Callum's fancies — .cta-banner-content
   needs its own stacking context so the grid paints above the glow. */
.cta-banner-photo { background-color:#fff;background-image:url('../images/newsletter-bg.webp');background-size:cover;background-position:center 60%;background-repeat:no-repeat;position:relative;overflow:hidden; }
.cta-banner-glow { position:absolute;inset:0;background-color:rgba(206,6,8,0.85);pointer-events:none; }
.cta-banner-content { position:relative;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center; }
.cta-banner-eyebrow { font-size:13px;font-weight:700;color:rgba(255,255,255,0.88);margin-bottom:8px; }
.cta-banner-title { font-family:'Black Ops One',sans-serif;font-size:32px;line-height:1.05;letter-spacing:-0.015em;text-transform:uppercase;margin:0; }
.cta-banner-actions { display:flex;gap:12px;flex-wrap:wrap; }
.cta-banner-primary { background:#F6F6F6;color:#CE0608;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:16px 26px;border-radius:999px;display:inline-flex;align-items:center;gap:8px; }
.cta-banner-ghost { border:1px solid rgba(255,255,255,0.45);color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:15px 24px;border-radius:999px; }
.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(255,65,54,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; }
/* Matches .fancy-list-grid's own gap (20px) — same "list of cards" pattern
   on Home/Free Bets/Best Casinos, previously a smaller, unrelated 12px. */
.op-list-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
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; }
.fancy-highlight-card { background:linear-gradient(135deg,#171717 0%,#12100F 100%);border:1px solid rgba(255,65,54,0.3);border-radius:20px;padding:40px; }
.fancy-highlight-eyebrow { font-size:12px;font-weight:700;color:#FF4136;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:12px; }
.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:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:15px 26px;border-radius:999px;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:#F6F6F6;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('../images/newsletter-bg.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(206,6,8,0.85);pointer-events:none; }
.fancy-highlight-content { position:relative; }
/* Callum's strongest fancies reuses the homepage's .fancy-card component but
   on smoke instead of white, per explicit request for this page only. */
.section-fancies-alt .fancy-card { background:#F6F6F6; }
.section-fancies-alt { background:#fff;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; }
.hero { position:relative;margin-top:-76px;padding-top:76px;padding-bottom:140px;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;background-color:#12100F;background-image:url('../images/home-hero-bg.webp');background-position:center 38%;background-size:cover;background-repeat:no-repeat;color:#262220;overflow:hidden; }
/* Wave divider along the landing hero's bottom edge instead of a straight
   line — filled white to match .section-alt immediately below, so the hero
   reads as curving down into it. Last child in the DOM (after .hero-glow
   and .hero-body), so it paints on top with no z-index needed. */
.hero-wave { position:absolute;bottom:0;left:0;width:100%;height:110px;display:block;pointer-events:none; }
.hero-body { position:relative;flex:1;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:640px; }
.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-badge { display:inline-flex;align-items:center;gap:9px;background:rgba(38,34,32,0.08);border:1px solid rgba(38,34,32,0.16);border-radius:20px;padding:7px 15px;font-size:13px;font-weight:600;color:rgba(38,34,32,0.75);margin-bottom:26px; }
.hero-badge-dot { width:7px;height:7px;border-radius:50%;background:#3BD16F; }
.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; }
.hero-title-accent { color:#CE0608; }
.hero-subtitle { font-size:19px;line-height:1.55;color:rgba(38,34,32,0.72);max-width:520px;margin:0 0 34px;text-wrap:pretty; }
.hero-actions { display:flex;gap:12px;flex-wrap:wrap;align-items:center; }
.hero-cta-primary { background:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;padding:17px 30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none; }
.hero-cta-ghost { background:#F6F6F6;border:none;color:#262220;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;padding:17px 28px;border-radius:999px;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(38,34,32,0.6); }
.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-blob { position:absolute;top:-2%;left:-4%;right:-4%;bottom:-4%;background:linear-gradient(150deg,#E5231C 0%,#9C0406 100%);border-radius:25% 75% 70% 30% / 71% 30% 70% 29%;transform:rotate(-6deg);box-shadow:0 30px 60px -20px rgba(206,6,8,0.55); }
.hero-media-badge { position:absolute;right:52px;bottom:44px;background:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.6);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 12px 30px -10px rgba(0,0,0,0.5);border-radius:20px;padding:12px 16px;z-index:2; }
.hero-media-badge-title { font-family:Rubik,sans-serif;font-weight:800;font-size:20px;line-height:1; }
.hero-media-badge-subtitle { font-size:13px;color:rgba(38,34,32,0.65);margin-top:3px; }
.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; }
.section { max-width:1240px;margin:0 auto;padding:96px 32px; }
/* Wave dividers reused on #fancies (top+bottom) and .footer (top) — same
   idea as .hero-wave, filled to match whichever section sits on the other
   side of that edge so the seam reads as a curve instead of a hard line.
   A shorter, more frequent undulation than the landing hero's wave on
   purpose, so the two don't feel like a copy-pasted repeat. */
/* left:50%/100vw/translateX(-50%) instead of left:0/width:100% — #fancies
   is a .section (max-width:1240px, centered), so a plain 100%-wide child
   only spans that narrow centered box, not the full-bleed smoke behind it.
   This "full-bleed" trick breaks the wave out to the true viewport width
   regardless of how narrow its positioned ancestor is (works the same,
   harmlessly, on .footer, which is already full-width). */
.section-wave-top, .section-wave-bottom { position:absolute;left:50%;width:100vw;transform:translateX(-50%);height:100px;display:block;pointer-events:none; }
.section-wave-top { top:0; }
.section-wave-bottom { bottom:0; }
/* overflow stays visible (not hidden) — the waves are full-bleed via
   left:50%/100vw/translateX(-50%) below, deliberately wider than this
   narrow centered .section box, so clipping to the box would cut them
   back down to the container's width right back to the original bug. */
#fancies { position:relative;padding-top:170px;padding-bottom:170px; }
.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:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:16px 30px;border-radius:999px;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('../images/newsletter-bg.webp');background-size:cover;background-position:center 60%;background-repeat:no-repeat;color:#262220;border-radius:20px;padding:52px 56px;margin-top: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(250,250,250,0.85);pointer-events:none; }
.game-promo-content { position:relative;flex:1;min-width:300px; }
.game-promo-eyebrow { display:inline-block;background:rgba(206,6,8,0.08);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;color:#CE0608;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:#CE0608;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:17px;padding:18px 34px;border:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.game-promo-cta-ghost { background:#F6F6F6;border:none;color:#262220;font-family:Rubik,sans-serif;font-weight:700;font-size:17px;padding:18px 28px;border-radius:999px;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.62);margin:0;max-width:620px;text-wrap:pretty; }
.fancy-list-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
/* .btn-see-all-ghost is only ever used in that same plain fancies section. */
.btn-see-all-ghost { background:#CE0608;border:none;color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:16px 30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.newsletter { position:relative;overflow:hidden;background:#fff; }
.newsletter-bg { position:absolute;inset:0; }
.newsletter-overlay { position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.7) 35%,rgba(255,255,255,0.7) 65%,rgba(255,255,255,0.94) 100%); }
.newsletter-container { position:relative;max-width:1240px;margin:0 auto;padding:96px 32px; }
.newsletter-card { position:relative;overflow:hidden;background:linear-gradient(100deg,#CE0608 0%,#B10507 52%,#9C0406 100%);color:#fff;border-radius:20px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;box-shadow:0 20px 40px -24px rgba(206,6,8,0.35);transition:box-shadow 340ms cubic-bezier(.22,.61,.36,1); }
.newsletter-card-glow { position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 120% at 90% 0%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%); }
.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:20px;padding:18px 20px;font-family:'Rubik',sans-serif;font-size:16px;color:#262220;outline:none; }
.newsletter-submit { background:#fff;color:#CE0608;border:none;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;padding:18px 30px;border-radius:999px;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,#CE0608 0%,#9C0406 100%); }
/* Same red as .operator-card-featured, so the bright dark-bg eyebrow accent
   (#FF4136) 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:Rubik,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 #CE0608;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Rubik,sans-serif;font-weight:700;font-size:13px;color:#CE0608; }
.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; }
/* .tool-card moved off the dark canvas onto the same smoke card used by
   .operator-card(-static) — background, border and ink text below match
   that rule, and the icon accent drops from the bright #FF4136 (reserved
   for dark surfaces, see the RED-THEME REPASS note above) to the base
   #CE0608 used for accents on the light canvas. */
.tool-card { background:#F6F6F6;border:1px solid rgba(38,34,32,0.1);border-radius:20px;padding:26px; }
.tool-card-head { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.tool-card-icon { width:40px;height:40px;flex-shrink:0;background:rgba(206,6,8,0.1);border-radius:20px;display:flex;align-items:center;justify-content:center; }
.tool-card-title { font-family:Rubik,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(6,6,6,0.55);margin:0 0 12px; }
.support-card-link { font-size:13.5px;font-weight:600;color:#CE0608; }
.helpline-banner { background:linear-gradient(135deg,#171717 0%,#12100F 100%);border:1px solid rgba(255,65,54,0.3);border-radius:20px;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:#CE0608;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px; }
.helpline-number { font-family:Rubik,sans-serif;font-weight:800;font-size:26px;color:#fff; }
.helpline-number-tel { color:#F6F6F6; }
.helpline-number-tel:hover { color:#fff; }
.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. */
.fancy-card { display:flex;flex-direction:column;justify-content:space-between;background:#fff;padding: 24px;border:none;border-radius:20px;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-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:linear-gradient(100deg,#E5231C 0%,#CE0608 100%); }
.fancy-card-meta { font-family:Rubik,sans-serif;font-weight:800;font-size:12.5px;color:#fff;letter-spacing:0.04em;text-transform:uppercase; }
.fancy-card-odds { font-family:Rubik,sans-serif;font-weight:800;font-size:18px;color:#fff;flex-shrink:0; }
.fancy-card-top { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.fancy-card-top .fancy-card-meta { color:rgba(38,34,32,0.65); }
.fancy-card-crest { width:68px;height:68px;flex-shrink:0;background:#F6F6F6;border-radius:10px;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:#CE0608;padding:16px 0px 0px; }
.fancy-card-title { font-family:Rubik,sans-serif;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-0.015em;padding:14px 0px 0px;color:#262220; }
.fancy-card-body { padding:16px 0px 0px; }
.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 { 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; }
.fancy-card-compact { background:#fff;border:none;border-radius:20px;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-head-static { display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:linear-gradient(100deg,#E5231C 0%,#CE0608 100%); }
.fancy-card-odds-static { font-family:Rubik,sans-serif;font-weight:800;font-size:18px;color:#fff; }
.fancy-card-compact-body { padding:22px 24px 26px; }
.fancy-card-compact-title { font-family:Rubik,sans-serif;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-0.015em;margin-bottom:12px;color:#262220; }
.fancy-card-compact-text { font-size:14px;line-height:1.6;color:rgba(38,34,32,0.65);margin:0 0 18px; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.newsletter-admin-notice { font:12px/1.6 ui-monospace,monospace;color:rgba(255,255,255,0.65);margin-top:10px; }
.operator-card-featured { grid-column:1 / -1;position:relative;background:linear-gradient(135deg,#CE0608 0%,#9C0406 100%);color:#fff;border-radius:20px;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:Rubik,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:20px;overflow:hidden; }
.operator-card-name-row { display:flex;align-items:center;gap:11px;margin-bottom:6px;flex-wrap:wrap; }
.operator-card-name { font-family:Rubik,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; }
/* Base is smoke (#F6F6F6), not pure white — matches every other smoke-pill
   CTA on a red card (.cta-banner-primary, .game-promo-cta-ghost,
   .hero-cta-ghost) — so hv4/hv16's hover (turning it white) is an actual
   visible change, not white-on-white. */
.operator-cta-featured { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#F6F6F6;color:#CE0608;border:none;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:16px 20px;border-radius:999px;box-shadow:0 10px 22px -12px rgba(0,0,0,0.4); }
.operator-review-link-featured { font-size:12.5px;text-align:center;color:rgba(255,255,255,0.8); }
.operator-card-static { background:#F6F6F6;color:#262220;border:1px solid rgba(38,34,32,0.1);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px; }
.operator-card-row { display:flex;align-items:center;gap:16px; }
.operator-card-cta-row { 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:20px;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(206,6,8,0.1);color:#CE0608;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:#CE0608;color:#fff;border:none;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:14px 22px;border-radius:999px; }
.operator-review-link-static { font-size:12.5px;color:rgba(38,34,32,0.62); }
.operator-card-badge { position:absolute;top:-12px;left:26px;background:#12100F;color:#fff;font-family:Rubik,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 { background:#F6F6F6;color:#262220;border:1px solid rgba(38,34,32,0.1);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;transition:box-shadow 1s ease; }
.operator-review-link { font-size:12.5px;color:rgba(38,34,32,0.65); }
/* 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). extracted.css loads last, so !important here beats the
   !important rules already in the page CSS files for the same properties
   at this breakpoint (padding, .operator-card-logo width). */
@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; }
}
.fancy-content-wrap { max-width:820px; }
.fancy-odds-badge { display:inline-flex;align-items:center;gap:10px;background:#CE0608;color:#fff;border-radius:20px;padding:12px 20px;margin-bottom:28px; }
.fancy-odds-label { font-family:Rubik,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase; }
.fancy-odds-value { font-family:Rubik,sans-serif;font-weight:800;font-size:22px;line-height:1; }
.fancy-content-text { color:rgba(255,255,255,0.72);font-size:17px;line-height:1.8; }
.fancy-confidence-row { display:flex;align-items:center;gap:10px;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08); }
.fancy-disclaimer { font-size:12.5px;line-height:1.7;color:rgba(255,255,255,0.38);margin:36px 0 0; }
.fancy-disclaimer-link { color:rgba(255,255,255,0.55);text-decoration:underline; }
.fancy-back-link-wrap { margin-top:40px; }
.fancy-back-link { border:1px solid rgba(255,255,255,0.18);color:#fff;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;padding:16px 30px;border-radius:999px;display:inline-flex;align-items:center;gap:8px; }

/* 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.
 * Fowler Bets doesn't set --tdb-hero-bg on any page — there's no editorial
 * action photography of a content creator 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-fill { min-height:100vh;display:flex;flex-direction:column;justify-content:center; }
.page-hero-bg-20 { background-position:center 20%; }
/* .page-hero-landing-bg reuses the home landing hero's own photo + flat
   rgba(250,250,250,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('../images/home-hero-bg.webp');background-position:center 38%; }
.page-hero-landing-bg .page-hero-gradient { background:rgba(250,250,250,0.85); }
.page-hero-landing-bg .page-hero-gradient-vertical, .page-hero-landing-bg .page-hero-glow { background:none; }
.page-hero-landing-bg .eyebrow { color:#CE0608; }
.page-hero-landing-bg .page-hero-title { color:#262220; }
.page-hero-landing-bg .page-hero-subtitle, .page-hero-landing-bg .page-hero-subtitle-narrow { color:rgba(38,34,32,0.72); }
.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('../images/home-hero-bg.webp');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(206,6,8,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; }
/* Same idea on Responsible Gambling's .legal-hero — white reads better here
   than the bright #FF4136 against this particular dark red gradient. */
.legal-hero .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); }
/* Mirrors .hero-media-blob's irregular shape behind the landing photo, but
   white instead of red since this sits on the About page's red wash — the
   inverse of the homepage's white-bg/red-blob pairing. */
.about-portrait-blob { position:absolute;top:-2%;left:-4%;right:-4%;bottom:-4%;background:linear-gradient(150deg,#fff 0%,#F6F6F6 100%);border-radius:25% 75% 70% 30% / 71% 30% 70% 29%;transform:rotate(-6deg);box-shadow:0 30px 60px -20px rgba(0,0,0,0.35); }
/* .about-hero-portrait/-frame mirror .hero-media/.hero-media-frame exactly —
   the cutout sits unclipped and drop-shadowed over the blob, not boxed into
   a bordered, overflow:hidden frame like the real photos elsewhere on this
   page (.portrait-frame/-alt). */
.about-hero-portrait { height:600px; }
.about-hero-portrait-frame { position:absolute;right:-10px;top:20px;bottom:0;left:22px;filter:drop-shadow(0 30px 40px rgba(0,0,0,0.45)); }
/* .header-on-red (About, Terms, Privacy, Responsible Gambling — every page
   whose header sits over the solid red hero wash) keeps the header readable
   in the default (unscrolled) state, then falls back to the site-wide
   dark-on-glass look the moment .is-scrolled is added, exactly like every
   other page. All of these are scoped to .header-on-red, so none of this
   touches the default (non-red) header on Home/Free Bets/Best Casinos/
   Fancies.
   - Regular nav links: smoke (lighter muted-white, brighter than
     .about-hero-text's body-copy tone since this is nav chrome, not body
     copy), full white on hover — overriding the site-wide .hv1:hover (light
     red) which is unreadable on a red background.
   - Current nav link: full white, unchanged — already correct.
   - Claim free bets: matches Play game exactly, at rest and on hover
     (smoke → white/ink) — overriding the site-wide hv3 (red button) hover
     it also carries, so both buttons read as one family on this header.
   - Hamburger button: same smoke → white treatment, with ink (not white)
     bars — matching the buttons' own ink text, not the brand red — but only
     while the drawer is closed. Once it's open, the page-shell's light
     background shows through (see the drawer-open note below), and
     smoke-on-light would be nearly invisible, so the open state keeps the
     original solid red circle / white bars, which reads fine there.
   - Claim free bets in the open drawer (.mobile-menu-cta-primary): matches
     Play game's own drawer button (.mobile-menu-cta-ghost) exactly — same
     smoke/ink/shadow at rest (it had no shadow at all before), same "stay
     smoke, text goes dark red" on hover that the ghost button gets for free
     from its own lack of an hv class — overriding the hv3 it carries, which
     would otherwise flip it solid-red-with-white-text like the site-wide
     Claim-free-bets button does everywhere else. */
.header-on-red:not(.is-scrolled) .header-nav-link { color:rgba(255,255,255,0.8); }
.header-on-red:not(.is-scrolled) .header-nav-link.hv1:hover { color:#fff !important; }
.header-on-red:not(.is-scrolled) .header-nav-link.is-current { color:#fff; }
/* box-shadow included, matching .header-cta's own rest style exactly — without
   it this button was invisible once the drawer opens: the drawer-open state
   makes the page-shell's own #F6F6F6 show through behind the header (see the
   drawer-open note above), the exact same colour as this button's fill, so
   only Play game's shadow was keeping it visible as a pill at all. */
.header-on-red:not(.is-scrolled) .header-cta-primary { background:#F6F6F6;color:#262220;box-shadow:0 0 22px rgba(0,0,0,0.14); }
/* #9C0406, not the expected ink #262220: Play game's own hover text isn't
   set by .hv2 at all, so the site-wide `a:hover { color:#9C0406 }` in
   base.css wins there (a:hover's element+pseudo-class specificity beats
   .header-cta's plain class) — match that exactly, not what .hv2 looks
   like it implies, or the two buttons visibly disagree on hover. */
.header-on-red:not(.is-scrolled) .header-cta-primary.hv3:hover { background:#fff !important;color:#9C0406 !important;box-shadow:0 0 26px rgba(0,0,0,0.2) !important; }
.header-on-red:not(.is-scrolled):not(:has(.mobile-menu.is-open)) .hamburger-button { background:#F6F6F6; }
.header-on-red:not(.is-scrolled):not(:has(.mobile-menu.is-open)) .hamburger-bar { background:#262220; }
.header-on-red:not(.is-scrolled):not(:has(.mobile-menu.is-open)) .hamburger-button:hover { background:#fff;box-shadow:0 0 26px rgba(0,0,0,0.2); }
.header-on-red:not(.is-scrolled) .mobile-menu-cta-primary { background:#F6F6F6 !important;color:#262220 !important;box-shadow:0 0 22px rgba(0,0,0,0.14) !important; }
.header-on-red:not(.is-scrolled) .mobile-menu-cta-primary.hv3:hover { background:#F6F6F6 !important;color:#9C0406 !important;box-shadow:0 0 22px rgba(0,0,0,0.14) !important; }
/* Opening the mobile drawer inserts .mobile-menu's own ~400px of real
   content between .header-inner and .about-hero, so the hero's own
   margin-top:-76px (sized for the closed, 76px-tall header) no longer lines
   its red wash up behind .header-inner — the page-shell's light background
   shows through the transparent header instead. The white (alt) logo reads
   fine on red but disappears on that light backdrop, so swap to the dark
   (default) logo — same as the off-red pages — only while the drawer is
   open, and only in the unscrolled on-red state; closing the drawer (or
   scrolling) reverts to the normal .header-on-red logo straight away. */
.header-on-red:not(.is-scrolled):has(.mobile-menu.is-open) .header-logo-image-alt { display:none; }
.header-on-red:not(.is-scrolled):has(.mobile-menu.is-open) .header-logo-image-default { display:block; }
.header-logo-image-default { display:none; }
.header-on-red.is-scrolled .header-logo-image-alt { display:none; }
.header-on-red.is-scrolled .header-logo-image-default { display:block; }
.header-nav-link { color:#262220; }
.header-nav-link.is-current { color:#CE0608;font-weight:800; }
.mobile-nav-link { padding:12px 0;font-size:17px;font-weight:600;border-bottom:1px solid rgba(38,34,32,0.08);color:#CE0608; }
.mobile-nav-link.is-current { color:#CE0608;font-weight:800; }
.footer-link-item { color:rgba(38,34,32,0.75); }
.footer-link-item.is-current { color:#CE0608; }
.safer-gambling-wording { font-size:13.5px;color:rgba(38,34,32,0.6);margin-top:10px; }
.safer-gambling-placeholder { font-size:12px;color:rgba(38,34,32,0.65);margin-top:10px;font-family:ui-monospace,monospace; }
.operator-logo-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:700 11px/1 Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(38,34,32,0.65);text-align:center;padding:0 6px; }
.newsletter-submit:disabled { cursor:not-allowed;opacity:0.55; }