/* Sport Bold: shared visual theme. All page content remains semantic HTML. */
:root {
  --ink: #171c19;
  --muted: #5c635e;
  --purple: #354b23;
  --purple-dark: #213515;
  --line: #dce0da;
  --paper: #f7f8f4;
  --lime: #c6f358;
}
body, body.premium-review { background: var(--paper); color: var(--ink); }
.header { min-height: 100px; border-bottom: 1px solid var(--line); }
.header .wordmark, .premium-review .wordmark, .premium-review .header nav { color: var(--ink); }
.wordmark { font-size: 28px; font-weight: 900; letter-spacing: -1.4px; }
.brand-icon { background: var(--lime); color: var(--ink); border-radius: 4px; }
.brand-dot { color: #476d15; }
.age, .premium-review .age { color: var(--ink); border: 1px solid #bdc4ba; border-radius: 9px; }
.button, .primary, .operator-link, .hero .primary, .premium-gold {
  background: var(--lime); color: #11170d; border: 1px solid var(--lime);
  box-shadow: none; border-radius: 12px; font-weight: 800;
}
.button:hover, .primary:hover, .operator-link:hover, .hero .primary:hover, .premium-gold:hover {
  background: #b6e741; color: #11170d; box-shadow: none; transform: translateY(-1px);
}
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #648d21; }
.hero { isolation: isolate; background: var(--lime); color: var(--ink); border-radius: 20px; padding: 48px; min-height: 430px; gap: 0; }
.hero h1 { font-style: italic; font-size: clamp(38px, 4.6vw, 65px); font-weight: 900; letter-spacing: -2.5px; }
.hero h1 span, .hero .eyebrow, .hero .intro, .hero-secondary, .hero-points { color: var(--ink); }
.hero .eyebrow { font-weight: 800; }
.hero .primary { background: var(--ink); border-color: var(--ink); color: white; }
.hero .primary:hover { background: #303a32; color: white; }
.live-dot { background: var(--ink); box-shadow: none; }
.hero-copy { position: relative; z-index: 3; }
.sport-home-visual { position: relative; align-self: stretch; min-height: 320px; }
.sport-athlete { position: absolute; width: 720px; max-width: none; height: 480px; object-fit: contain; right: -75px; bottom: -135px; filter: grayscale(1); pointer-events: none; }
.sport-arcs { position: absolute; width: 600px; height: 600px; right: -200px; top: -80px; border: 45px solid #171c19; border-radius: 50%; transform: rotate(-25deg); }
.sport-arcs::after { content: ''; position: absolute; inset: 60px; border: 25px solid #171c19; border-radius: 50%; }
.trust-strip { padding-block: 18px; }
.trust-strip p { border-color: var(--line); color: var(--ink); background: white; border-radius: 8px; }
.compact-card { background: #fff; border: 1px solid #cfd5cb; border-radius: 18px; box-shadow: none; }
.compact-card::before { height: 5px; background: var(--lime); }
.compact-card .brand-row { background: var(--ink); color: white; margin: -30px -30px 24px; padding: 24px 30px; }
.brand-monogram, .compact-card .brand-monogram { background: var(--lime); color: var(--ink); box-shadow: none; border-radius: 10px; }
.compact-card .brand-caption { color: #d3d9cf; }
.card-metrics { background: #f7f8f4; border-color: var(--line); border-radius: 12px; }
.metric-icon { color: #45513c; }
.compact-card .review-link, .odds-link { color: #314b1f; }
.card-highlights .benefit-check { background: #e6f5cb; color: #385b19; }
.comparison-section, .reviews-section { background: #edf0e8; }
.guide-grid article, .reader-review, .brand-benefits { background: white; border-color: var(--line); box-shadow: none; }
.guide-number, .avatar { color: var(--ink); background: var(--lime); }
.guide-banner, .article-hero, .prose > h1, .contact-title { background: var(--ink); color: white; border-radius: 16px; }
.guide-banner small, .guide-banner b, .article-hero h1 span { color: var(--lime); }
.article-hero .breadcrumbs, .article-hero .article-lead, .article-hero .eyebrow { color: #d7e0d1; }
.pill { background: #e5eddc; color: #34452b; border-color: #d1dbca; }
.premium-breadcrumb { color: var(--muted); padding-block: 18px; }
.premium-hero { grid-template-columns: 1fr 350px; gap: 0; }
.premium-stage { grid-column: 1 / -1; isolation: isolate; background: var(--lime); border: 0; border-radius: 18px 18px 0 0; min-height: 340px; padding: 36px 40px; color: var(--ink); }
.premium-stage h1 { max-width: 65%; font-family: 'Arial Black', 'Segoe UI', sans-serif; font-size: clamp(58px, 8vw, 110px); font-style: italic; font-weight: 900; letter-spacing: -5px; color: var(--ink); margin: 18px 0 0; }
.premium-stage h1 span { color: var(--ink); }
.premium-label { border: 0; color: var(--ink); padding: 0; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; margin: 0; }
.premium-tagline { font-size: clamp(23px,3vw,36px); font-style: italic; font-weight: 800; margin: 4px 0 0; text-transform: uppercase; }
.premium-stage .sport-athlete { width: 720px; height: 480px; right: -15px; bottom: -140px; z-index: 1; }
.premium-stage .sport-arcs { z-index: 0; }
.banner-facts { grid-column: 1; grid-row: 2 / 4; grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--ink); border: 0; color: white; padding: 14px; border-radius: 0 0 0 18px; }
.banner-facts > div { padding: 18px; border-color: #ffffff24; display: flex; flex-direction: column; justify-content: center; }
.banner-facts dt { color: #c0c8ba; font-size: 10px; letter-spacing: .6px; }
.banner-facts dt svg { display: block; width: 29px; height: 29px; color: #f6f9f0; margin-bottom: 10px; }
.banner-facts dd { color: white; font-size: 18px; font-weight: 800; line-height: 1.3; overflow-wrap: normal; }
.premium-action { grid-column: 2; grid-row: 2 / 4; padding: 28px 24px; border: 0; border-left: 1px solid #ffffff24; background: var(--ink); border-radius: 0 0 18px; box-shadow: none; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.premium-action .button { width: 100%; min-width: 0; min-height: 56px; margin: 0; font-size: 15px; }
.premium-action .premium-compare { color: var(--ink); background: white; border-color: white; }
.premium-action .premium-terms { text-align: left; font-size: 10px; color: #c5cdbf; }
.premium-terms a { color: var(--lime); display: inline-block; margin-left: 0; }
.premium-jump { justify-content: flex-start; gap: 9px; margin: 25px auto; }
.premium-jump a { color: var(--ink); border: 1px solid #d2d8cc; background: transparent; border-radius: 9px; padding: 9px 20px; font-weight: 700; }
.premium-jump a:first-child { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.premium-detail-heading h2 { color: var(--ink); font-family: inherit; font-size: clamp(29px,4vw,45px); font-weight: 900; letter-spacing: -1.5px; }
.premium-detail-heading p { color: var(--muted); }
.premium-review .article-body { max-width: none; background: white; border-color: var(--line); box-shadow: none; border-radius: 16px; }
.premium-review .article-body h2, .premium-review .article-body h3 { color: var(--ink); }
.premium-review .article-body p, .premium-review .article-body li { color: #50594d; }
.premium-review .article-body a:not(.button) { color: #385821; text-decoration-color: #93ae78; }
.premium-review .related-links, .premium-review .article-callout, .premium-review blockquote { background: #f0f4e9; color: var(--ink); border-color: #cedcc0; }
footer, .premium-review footer { background: #e9eee2; color: #50594a; border-color: var(--line); }
@media (max-width: 900px) {
  .header { flex-wrap: wrap; gap: 12px; padding-block: 20px; }
  .header nav { order: 3; width: 100%; gap: 18px; font-size: 12px; }
  .premium-hero { grid-template-columns: 1fr 280px; }
  .banner-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .banner-facts > div { border: 0; border-bottom: 1px solid #ffffff24; }
  .banner-facts > div:nth-child(odd) { border-right: 1px solid #ffffff24; }
  .hero { padding: 32px; grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 32px); }
  .wordmark { font-size: 25px; }
  .hero { grid-template-columns: 1fr; padding: 28px 24px 0; border-radius: 16px; }
  .hero h1 { font-size: 40px; letter-spacing: -2px; }
  .hero .intro { font-size: 16px; }
  .hero-points { display: none; }
  .sport-home-visual { min-height: 245px; margin-top: 15px; }
  .sport-home-visual .sport-athlete { width: 570px; height: 380px; right: -45px; bottom: -135px; }
  .sport-arcs { width: 420px; height: 420px; right: -130px; top: -70px; border-width: 28px; }
  .compact-card .brand-row { margin: -23px -23px 20px; padding: 20px 23px; }
  .premium-hero { grid-template-columns: 1fr; }
  .premium-stage { min-height: 330px; padding: 24px; }
  .premium-stage h1 { font-size: clamp(47px,13vw,74px); max-width: 100%; letter-spacing: -3px; }
  .premium-tagline { font-size: 21px; }
  .premium-stage .sport-athlete { width: 450px; height: 300px; right: -15px; bottom: -90px; }
  .premium-stage .sport-arcs { top: 110px; }
  .banner-facts { grid-column: 1; grid-row: auto; padding: 10px; border-radius: 0; }
  .banner-facts > div { padding: 14px; min-height: 115px; }
  .banner-facts dt { font-size: 9px; }
  .banner-facts dd { font-size: 16px; }
  .banner-facts dt svg { width: 25px; height: 25px; }
  .premium-action { grid-column: 1; grid-row: auto; border-radius: 0 0 16px 16px; border-left: 0; padding: 20px; }
  .premium-action .premium-terms { font-size: 11px; }
  .premium-review .article-body { padding: 22px; }
  .premium-jump a { font-size: 12px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button:hover { transform: none; } }

@media (max-width: 700px) {
  .premium-stage { min-height: 420px; }
  .premium-stage .sport-arcs { top: 200px; }
}


.sport-home-visual { overflow: hidden; }
@media (max-width: 700px) { .sport-home-visual .sport-arcs { top: 0; } }


/* Individual editorial brand emblems, each drawn as native vector artwork. */
.operator-emblem { position: absolute; z-index: 1; width: 300px; right: 55px; top: 6px; text-align: center; }
.operator-emblem svg { display: block; width: 100%; height: auto; }
.operator-emblem > span { display: inline-block; margin-top: -8px; font-size: 11px; font-weight: 900; letter-spacing: 5px; }
.premium-stage:has(.operator-emblem) .sport-arcs { opacity: .07; }
.emblem-betking { transform: rotate(-7deg); }
.emblem-beton { transform: rotate(7deg); }
.emblem-ggbet { transform: rotate(-4deg); }
@media(max-width:900px) and (min-width:701px) { .operator-emblem { width: 245px; right: 20px; top: 35px; } }
@media(max-width:700px) {
 .operator-emblem { width: 195px; top: auto; bottom: 14px; right: 20px; }
 .operator-emblem > span { font-size: 9px; letter-spacing: 4px; }
 .premium-stage:has(.operator-emblem) { min-height: 410px; }
}