/*
Theme Name:  emberBet Australia — independent review
Description: emberBet AU monobrand. Ember-orange primary on a warm near-black ground with an
             amber secondary. Shares the fleet's mp- class vocabulary (qa.py and the subagent
             conventions depend on it) but deliberately differs in palette, type and tile
             geometry so the sites do not render as clones of each other.
Version:     1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS — deep navy ground, gold accent
   ========================================================================== */
:root {
  --mp-bg:            #11090c;
  --mp-bg-1:          #1e1714;
  --mp-bg-2:          #2a201a;
  --mp-bg-3:          #3a2c22;
  --mp-bg-card:       #1e1714;
  --mp-bg-card-2:     #2a201a;

  --mp-ink:           #f7f0ea;
  --mp-ink-2:         #c9b8ac;
  --mp-ink-3:         #a89386;
  --mp-ink-mute:      #7d6a5d;

  --mp-border:        rgba(255,99,33,0.16);
  --mp-border-strong: rgba(255,99,33,0.30);

  /* Primary — lime */
  --mp-brand:         #ff6321;
  --mp-brand-deep:    #d44a12;
  --mp-brand-light:   #ffae51;
  --mp-brand-glow:    rgba(255,99,33,0.45);
  --mp-brand-ink:     #1a0d04;

  /* Leaf-green (secondary surfaces / positives) */
  --mp-leaf:          #ffae51;
  --mp-leaf-deep:     #cc8300;
  --mp-leaf-glow:     rgba(255,174,81,0.40);

  /* Warm red (negatives) */
  --mp-red:           #f87171;
  --mp-red-deep:      #ef4444;
  --mp-red-glow:      rgba(248,113,113,0.42);

  /* Gold accent (secondary) */
  --mp-amber:         #ffae51;
  --mp-amber-glow:    rgba(255,174,81,0.40);

  --mp-sky:           #38bdf8;
  --mp-violet:        #a78bfa;
  --mp-magenta:       #ec4899;

  --mp-pos:           #34d399;
  --mp-neg:           #f87171;
  --mp-warn:          #ffae51;

  /* Gradients */
  --mp-grad-hero:     radial-gradient(ellipse at 92% -10%, rgba(255,99,33,0.30), transparent 55%), radial-gradient(ellipse at 8% 110%, rgba(255,174,81,0.14), transparent 55%), linear-gradient(180deg, #11090c 0%, #1e1714 100%);
  --mp-grad-cta:      linear-gradient(135deg, #ff6321 0%, #d44a12 100%);
  --mp-grad-leaf:     linear-gradient(135deg, #ff6321, #d44a12);
  --mp-grad-red:      linear-gradient(135deg, #f87171, #ef4444);
  --mp-grad-bleed:    radial-gradient(80% 100% at 90% 0%, rgba(255,99,33,0.28), transparent 55%), radial-gradient(80% 100% at 10% 100%, rgba(255,174,81,0.12), transparent 60%), linear-gradient(160deg, #1e1714, #2a201a);
  --mp-grad-card:     linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2));

  /* Type */
  --mp-font-body:     'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mp-font-display:  'Outfit', 'Manrope', system-ui, sans-serif;
  --mp-font-mono:     'Space Mono', ui-monospace, SFMono-Regular, monospace;
  --mp-font-serif:    Georgia, 'Times New Roman', serif;

  --mp-t-mega:        clamp(2.5rem, 6vw + 0.5rem, 4.5rem);
  --mp-t-display:     clamp(2rem, 4.6vw + 0.5rem, 3rem);
  --mp-t-h1:          clamp(1.75rem, 3vw + 0.5rem, 2.25rem);
  --mp-t-h2:          clamp(1.5rem, 2.5vw + 0.5rem, 1.875rem);
  --mp-t-h3:          1.125rem;
  --mp-t-body:        1rem;
  --mp-t-sm:          0.9375rem;
  --mp-t-xs:          0.75rem;

  --mp-s-1: 4px; --mp-s-2: 8px; --mp-s-3: 12px; --mp-s-4: 16px; --mp-s-5: 24px;
  --mp-s-6: 32px; --mp-s-7: 48px; --mp-s-8: 64px; --mp-s-9: 96px;

  --mp-max-w:         1200px;
  --mp-radius:        10px;
  --mp-radius-lg:     16px;
  --mp-radius-xl:     24px;
  --mp-radius-pill:   999px;

  --mp-shadow:        0 4px 24px rgba(0,0,0,0.45);
  --mp-shadow-lg:     0 12px 48px rgba(0,0,0,0.55);
  --mp-glow-brand:    0 0 0 1px var(--mp-brand), 0 0 24px var(--mp-brand-glow);
  --mp-glow-leaf:     0 0 0 1px var(--mp-leaf), 0 0 24px var(--mp-leaf-glow);
  --mp-glow-red:      0 0 0 1px var(--mp-red),  0 0 24px var(--mp-red-glow);

  --mp-t-anim:        180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Standard aliases (QA gate checks these) ---- */
  --bg:               #11090c;
  --surface:          #1e1714;
  --surface2:         #2a201a;
  --text:             #f7f0ea;
  --muted:            #c9b8ac;
  --accent:           #ff6321;
  --accent-deep:      #d44a12;
  --accent-light:     #ffae51;
  --accent-ink:       #ffae51;
  --accent-contrast:  #1a0d04;
  --secondary:        #ffae51;
  --border:           rgba(255,99,33,0.16);
  --container:        1200px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mp-bg);
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
  font-size: var(--mp-t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

a { color: var(--mp-brand-light); text-decoration: none; transition: color var(--mp-t-anim); }
a:hover { color: var(--mp-brand); }

h1, h2, h3, h4 {
  font-family: var(--mp-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0; line-height: 1.05;
  color: var(--mp-ink);
}
h1 { font-size: var(--mp-t-h1); }
h2 { font-size: var(--mp-t-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--mp-t-h3); letter-spacing: -0.015em; }
p  { margin: 0 0 var(--mp-s-4); color: var(--mp-ink-2); }
strong { font-weight: 700; color: var(--mp-ink); }

.mp-tx-ochre   { background: linear-gradient(120deg, #ff6321, #ffae51); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-tx-leaf    { background: linear-gradient(120deg, #ff6321, #d44a12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-tx-red     { background: linear-gradient(120deg, #f87171, #ef4444); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap { max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-5); }
.mp-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--mp-s-5); }
.mp-col-7 { grid-column: span 7; }
.mp-col-5 { grid-column: span 5; }

.mp-sect       { padding: var(--mp-s-8) 0; position: relative; }
.mp-sect-tinted{ background: linear-gradient(180deg, var(--mp-bg), var(--mp-bg-1)); }
.mp-sect-card  { background: var(--mp-bg-1); }
.mp-sect-bleed { background: var(--mp-bg); }
.mp-sect-h     { padding: var(--mp-s-8) 0; position: relative; background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); }

.mp-sect-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--mp-s-5); margin-bottom: var(--mp-s-6); flex-wrap: wrap;
}
.mp-sect-eyebrow {
  display: inline-block;
  font-family: var(--mp-font-mono);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--mp-brand);
  background: rgba(255,99,33,0.08);
  padding: 5px 12px; border-radius: var(--mp-radius-pill);
  border: 1px solid var(--mp-border-strong);
  margin-bottom: var(--mp-s-3);
}
.mp-sect-h2  { font-size: var(--mp-t-display); line-height: 1.12; }
.mp-sect-desc { font-size: 1.0625rem; color: var(--mp-ink-2); max-width: 60ch; margin-top: var(--mp-s-3); }
.mp-sect-link {
  font-family: var(--mp-font-mono); font-size: 0.875rem; font-weight: 700;
  color: var(--mp-brand-light); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ==========================================================================
   4. OFFER-BAR
   ========================================================================== */
.mp-offer-bar {
  background: linear-gradient(90deg, #1e1714, #2a201a, #1e1714);
  border-bottom: 1px solid var(--mp-border-strong);
  padding: 10px 0;
  position: relative; z-index: 60;
}
.mp-offer-bar-inner {
  display: flex; align-items: center; justify-content: center; gap: var(--mp-s-3);
  font-size: 0.875rem; color: var(--mp-ink-2); flex-wrap: wrap;
}
.mp-offer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mp-font-mono);
  background: rgba(255,99,33,0.10);
  color: var(--mp-leaf);
  border: 1px solid rgba(255,99,33,0.30);
  padding: 3px 10px; border-radius: var(--mp-radius-pill);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700;
}
.mp-offer-link {
  font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-brand-light);
  text-decoration: none;
}
.mp-offer-link:hover { color: var(--mp-brand); }

/* ==========================================================================
   5. NAV / TOPBAR
   ========================================================================== */
.mp-topbar {
  background: rgba(17,9,12,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mp-border);
  padding: var(--mp-s-3) 0;
  position: sticky; top: 0; z-index: 55;
}
.mp-topbar nav.wrap { display: flex; align-items: center; gap: var(--mp-s-5); }
.mp-brand-line {
  display: flex; align-items: center; gap: var(--mp-s-3);
  text-decoration: none; color: var(--mp-ink); margin-right: auto;
}
.mp-brand-line img { width: 32px; height: 32px; filter: drop-shadow(0 4px 10px var(--mp-brand-glow)); }
.mp-brand-line .mp-brand-name {
  font-family: var(--mp-font-display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--mp-ink);
}
.mp-nav-links { display: flex; gap: var(--mp-s-5); }
.mp-nav-links a {
  font-family: var(--mp-font-mono);
  font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; color: var(--mp-ink-2);
  position: relative; padding: 4px 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mp-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--mp-brand), var(--mp-leaf));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mp-t-anim);
}
.mp-nav-links a:hover { color: var(--mp-ink); }
.mp-nav-links a:hover::after { transform: scaleX(1); }

.mp-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  background: var(--mp-grad-cta); color: var(--mp-brand-ink);
  text-decoration: none;
  font-family: var(--mp-font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: -0.005em;
  box-shadow: 0 6px 18px -6px var(--mp-brand-glow), 0 0 0 1px rgba(255,99,33,0.30) inset;
  transition: all var(--mp-t-anim); white-space: nowrap;
}
.mp-nav-cta:hover {
  color: var(--mp-brand-ink); transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px var(--mp-brand-glow), 0 0 0 1px rgba(255,99,33,0.50) inset, 0 0 24px var(--mp-brand-glow);
}
.mp-nav-cta .mp-cta-arrow { font-size: 0.95em; opacity: 0.85; }
.mp-nav-cta .mp-cta-label-short { display: none; }

/* CSS-only hamburger (checkbox hack) */
.mp-nav-toggle { display: none; }
.mp-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 8px;
  background: rgba(255,99,33,0.06); border: 1px solid var(--mp-border-strong);
  cursor: pointer; flex: 0 0 auto;
}
.mp-burger span { display: block; width: 20px; height: 2px; background: var(--mp-ink); position: relative; }
.mp-burger span::before, .mp-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--mp-ink); }
.mp-burger span::before { top: -6px; } .mp-burger span::after { top: 6px; }

@media (max-width: 640px) {
  .mp-nav-cta { padding: 7px 12px; font-size: 0.75rem; gap: 4px; }
  .mp-nav-cta .mp-cta-label-long { display: none; }
  .mp-nav-cta .mp-cta-label-short { display: inline; }
}
@media (max-width: 860px) {
  .mp-burger { display: inline-flex; }
  .mp-nav-links {
    order: 4; flex-basis: 100%; flex-direction: column; gap: var(--mp-s-2);
    max-height: 0; overflow: hidden; transition: max-height var(--mp-t-anim);
  }
  .mp-nav-toggle:checked ~ .mp-nav-links { max-height: 420px; margin-top: var(--mp-s-3); }
}

/* ==========================================================================
   5b. 3-TIER HEADER (mp-head3): banner + centered emblem + nav row
   ========================================================================== */
.mp-head3 { position: static; padding: 0; background: var(--mp-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--mp-border); }
.mp-head3-banner { position: relative; overflow: hidden; height: 138px; display: flex; align-items: center; justify-content: center; background: var(--mp-bg); }
.mp-head3-stripes { position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(90deg,
    #ff6321 0 6.66%, #ffae51 6.66% 13.33%, #34d399 13.33% 20%,
    #ffae51 20% 26.66%, #ffae51 26.66% 33.33%, #f87171 33.33% 40%,
    #d44a12 40% 46.66%, #ff6321 46.66% 53.33%);
  background-size: 200% 100%; opacity: 0.9; filter: saturate(1.05); }
.mp-head3-stripes::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 11px); mix-blend-mode: multiply; }
.mp-head3-veil { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(125% 95% at 50% 46%, rgba(17,9,12,0.10), rgba(17,9,12,0.82) 72%),
              linear-gradient(180deg, rgba(17,9,12,0.30) 0%, rgba(17,9,12,0.52) 100%); }
.mp-head3-emblem { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 26px; text-decoration: none; background: rgba(17,9,12,0.74);
  border: 1px solid rgba(255,99,33,0.55); border-radius: 16px;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.75), 0 0 0 4px rgba(17,9,12,0.30), 0 0 28px var(--mp-brand-glow);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim); }
.mp-head3-emblem:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(0,0,0,0.8), 0 0 0 4px rgba(17,9,12,0.30), 0 0 34px var(--mp-brand-glow); }
.mp-head3-emblem img { width: 52px; height: 52px; filter: drop-shadow(0 4px 12px var(--mp-brand-glow)); }
.mp-head3-emblem-txt { display: flex; flex-direction: column; line-height: 1.12; }
.mp-head3-emblem-title { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--mp-ink); }
.mp-head3-emblem-title b { color: var(--mp-brand-light); font-weight: 800; }
.mp-head3-emblem-tag { font-family: var(--mp-font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mp-brand-light); margin-top: 4px; }
.mp-head3-nav { background: rgba(17,9,12,0.94); border-top: 1px solid var(--mp-border); position: sticky; top: 0; z-index: 55; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mp-head3-nav-inner { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 0; }
.mp-head3 .mp-nav-links { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.mp-head3 .mp-nav-links a { font-size: 0.78rem; letter-spacing: 0.06em; }
.mp-head3 .mp-nav-cta { position: static; transform: none; flex: 0 0 auto; }
@media (max-width: 860px) {
  .mp-head3-banner { height: 108px; }
  .mp-head3-emblem { padding: 10px 18px; gap: 10px; }
  .mp-head3-emblem img { width: 40px; height: 40px; }
  .mp-head3-emblem-title { font-size: 1.2rem; }
  /* burger + CTA share row 1; menu collapses to row 2 */
  .mp-head3-nav-inner { justify-content: space-between; gap: 8px; }
  .mp-head3 .mp-burger { order: 1; }
  .mp-head3 .mp-nav-cta { order: 2; flex: 1 1 0; min-width: 0; justify-content: center; }
  .mp-head3 .mp-nav-links { order: 3; flex-basis: 100%; width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   6. TICKER STRIP
   ========================================================================== */
.mp-ticker {
  background: var(--mp-bg-1);
  border-bottom: 1px solid var(--mp-border);
  padding: 10px 0; overflow: hidden; position: relative;
}
.mp-ticker::before, .mp-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.mp-ticker::before { left: 0; background: linear-gradient(90deg, var(--mp-bg-1), transparent); }
.mp-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--mp-bg-1), transparent); }
.mp-ticker-track {
  display: inline-flex; gap: var(--mp-s-3); white-space: nowrap;
  animation: mp-ticker-scroll 38s linear infinite;
}
.mp-ticker-chip {
  display: inline-flex; align-items: center; gap: var(--mp-s-2);
  font-family: var(--mp-font-mono);
  font-size: 0.75rem; font-weight: 600;
  color: var(--mp-ink-2);
  background: rgba(255,99,33,0.05);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-pill);
  padding: 5px 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mp-ticker-chip strong { color: var(--mp-brand-light); font-weight: 700; }
.mp-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-leaf); box-shadow: 0 0 8px var(--mp-leaf-glow); }
@keyframes mp-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.mp-hero {
  padding: var(--mp-s-9) 0 var(--mp-s-8);
  position: relative; background: var(--mp-grad-hero); overflow: hidden;
}
.mp-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,99,33,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,99,33,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask: radial-gradient(circle at 70% 0%, black, transparent 70%);
  pointer-events: none;
}
.mp-hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--mp-s-7); align-items: start;
}
.mp-hero-eyebrow {
  display: inline-block;
  font-family: var(--mp-font-mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--mp-leaf);
  background: rgba(255,99,33,0.08);
  padding: 5px 14px; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(255,99,33,0.30);
  margin-bottom: var(--mp-s-4);
}
.mp-mega-h1 {
  font-family: var(--mp-font-display); font-weight: 800;
  font-size: var(--mp-t-mega); line-height: 1.08; letter-spacing: -0.035em;
  margin: 0 0 var(--mp-s-4); color: var(--mp-ink);
}
.mp-mega-h1 span { text-shadow: 0 0 50px var(--mp-brand-glow); }
.mp-hero-lede {
  font-size: 1.125rem; color: var(--mp-ink-2);
  max-width: 34em; margin-bottom: var(--mp-s-6); line-height: 1.55;
}
.mp-hero-ctas { display: flex; gap: var(--mp-s-3); flex-wrap: wrap; margin-bottom: var(--mp-s-7); }

.mp-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-3); margin-top: var(--mp-s-6); }
.mp-hero-stat {
  display: flex; flex-direction: column; gap: var(--mp-s-1);
  padding: var(--mp-s-3) var(--mp-s-4);
  background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
}
.mp-hero-stat-num {
  font-family: var(--mp-font-display); font-size: 1.625rem; font-weight: 800;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow);
}
.mp-hero-stat-num.mp-leaf-tx { color: var(--mp-leaf); text-shadow: 0 0 24px var(--mp-leaf-glow); }
.mp-hero-stat-num.mp-red-tx  { color: var(--mp-red); text-shadow: 0 0 24px var(--mp-red-glow); }
.mp-hero-stat-num.mp-num-sm  { font-size: 1.125rem; }
.mp-hero-stat-label {
  font-family: var(--mp-font-mono);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--mp-ink-3);
}

.mp-data-panel {
  background: var(--mp-grad-card);
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-xl);
  padding: var(--mp-s-5); position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,99,33,0.15), 0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,99,33,0.10);
}
.mp-panel-label {
  font-family: var(--mp-font-mono);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  color: var(--mp-brand); margin-bottom: var(--mp-s-3);
  display: flex; align-items: center; gap: var(--mp-s-2);
}
.mp-panel-label::before {
  content: ""; width: 18px; height: 2px; background: var(--mp-brand); display: inline-block; border-radius: 2px; box-shadow: 0 0 8px var(--mp-brand-glow);
}
.mp-panel-source { font-size: 0.75rem; color: var(--mp-ink-3); margin-top: var(--mp-s-3); font-family: var(--mp-font-mono); }
.mp-sparkline { width: 100%; height: 110px; display: block; filter: drop-shadow(0 0 12px var(--mp-brand-glow)); }
.mp-panel-rows { display: flex; flex-direction: column; gap: var(--mp-s-3); margin-top: var(--mp-s-4); }
.mp-panel-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-s-3);
  padding: var(--mp-s-3) var(--mp-s-4);
  background: rgba(255,99,33,0.04); border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
}
.mp-panel-row-k { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mp-ink-3); }
.mp-panel-row-v { font-family: var(--mp-font-display); font-weight: 800; color: var(--mp-brand-light); font-size: 1.0625rem; }

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--mp-radius);
  text-decoration: none; font-family: var(--mp-font-display);
  font-weight: 700; font-size: 0.9375rem;
  border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim);
  white-space: nowrap; letter-spacing: -0.005em;
}
.mp-btn-lg { padding: 15px 28px; font-size: 1rem; }
.mp-btn-xl { padding: 17px 32px; font-size: 1.0625rem; }
.mp-btn:hover { transform: translateY(-2px); }
.mp-btn-primary {
  background: var(--mp-grad-cta); color: var(--mp-brand-ink);
  box-shadow: 0 12px 32px -10px var(--mp-brand-glow), 0 0 0 1px rgba(255,99,33,0.40) inset;
}
.mp-btn-primary:hover {
  color: var(--mp-brand-ink);
  box-shadow: 0 18px 44px -12px var(--mp-brand-glow), 0 0 0 1px rgba(255,99,33,0.50) inset;
}
.mp-btn-ghost {
  background: rgba(255,99,33,0.04); border-color: var(--mp-border-strong); color: var(--mp-ink);
}
.mp-btn-ghost:hover { border-color: var(--mp-brand); color: var(--mp-brand-light); background: rgba(255,99,33,0.10); }

/* ==========================================================================
   9. STAT-STRIP
   ========================================================================== */
.mp-stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--mp-border-strong); border-radius: var(--mp-radius-lg);
  overflow: hidden; margin: 0 0 var(--mp-s-8); box-shadow: var(--mp-shadow-lg);
}
.mp-stat { background: linear-gradient(180deg, var(--mp-bg-card), #1e1714); padding: var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2); }
.mp-stat-figure {
  font-family: var(--mp-font-display); font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1;
  color: var(--mp-brand-light); text-shadow: 0 0 28px var(--mp-brand-glow); letter-spacing: -0.025em;
}
.mp-stat-figure-small { font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.mp-stat-figure-leaf { color: var(--mp-leaf); text-shadow: 0 0 24px var(--mp-leaf-glow); }
.mp-stat-figure-red  { color: var(--mp-red);  text-shadow: 0 0 24px var(--mp-red-glow); }
.mp-stat-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-ink-2); font-weight: 600; }
.mp-stat-source { font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); margin-top: auto; opacity: 0.85; }

/* ==========================================================================
   10. STEPS
   ========================================================================== */
.mp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-4); counter-reset: mp-step; margin: var(--mp-s-6) 0; list-style: none; padding: 0; }
.mp-steps > li { list-style: none; }
.mp-step {
  background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-lg); padding: var(--mp-s-6);
  position: relative; counter-increment: mp-step; box-shadow: var(--mp-shadow);
  transition: transform var(--mp-t-anim);
}
.mp-step:hover { transform: translateY(-3px); }
.mp-step::before {
  content: counter(mp-step);
  /* Float, not absolute: the badge must occupy space so the step's own first line wraps
     around it. The stylesheet used to reserve room with `.mp-step h3 { padding-right }`,
     which silently did nothing on the steps written as <p><strong> or bare <strong>. */
  float: right; margin: 0 0 var(--mp-s-2) var(--mp-s-4);
  font-family: var(--mp-font-display); font-weight: 800; font-size: 2.5rem;
  background: linear-gradient(135deg, var(--mp-brand), var(--mp-amber));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0.55; line-height: 1;
}
.mp-step::after { content: ""; display: block; clear: both; }
.mp-step h3 { font-family: var(--mp-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 var(--mp-s-3); color: var(--mp-ink); }
.mp-step p { margin: 0 0 var(--mp-s-3); font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.mp-step-time {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 700; color: var(--mp-leaf);
  background: rgba(255,99,33,0.10); padding: 4px 12px; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(255,99,33,0.25);
}

/* ==========================================================================
   11. GAME TILES
   ========================================================================== */
.mp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-s-4); }
.mp-game {
  background: var(--mp-bg-card); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim);
}
.mp-game:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lg); }
.mp-game-art {
  height: 140px; position: relative; display: flex; align-items: center; justify-content: center;
  font-family: var(--mp-font-display); font-size: 2.5rem; font-weight: 800;
  color: rgba(12,6,9,0.92); letter-spacing: -0.04em; overflow: hidden;
}
.mp-game-art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.20), transparent 50%); pointer-events: none; }
.mp-game-art-aviator   { background: linear-gradient(135deg, #ff6321, #ffae51); }
.mp-game-art-superkick { background: linear-gradient(135deg, #ff6321, #d44a12); }
.mp-game-art-madpunch  { background: linear-gradient(135deg, #ffae51, #ff6321); }
.mp-game-art-spin      { background: linear-gradient(135deg, #ffae51, #d44a12); }
.mp-game-art-mcards    { background: linear-gradient(135deg, #d44a12, #ffae51); }
.mp-game-art-mines     { background: linear-gradient(135deg, #ff6321, #3a2c22); }
.mp-game-tag {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700;
  background: rgba(17,9,12,0.65); color: var(--mp-ink);
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.mp-game-tag-native { color: var(--mp-leaf); border-color: rgba(255,99,33,0.40); }
.mp-game-body { padding: var(--mp-s-4) var(--mp-s-5); display: flex; flex-direction: column; gap: var(--mp-s-2); }
.mp-game-name { font-family: var(--mp-font-display); font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--mp-ink); letter-spacing: -0.015em; }
.mp-game-meta { display: flex; gap: var(--mp-s-3); align-items: center; font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.mp-game-rtp { background: rgba(255,99,33,0.10); color: var(--mp-leaf); border: 1px solid rgba(255,99,33,0.22); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.mp-game-cta { font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--mp-brand-light); text-transform: uppercase; letter-spacing: 0.08em; }

/* ==========================================================================
   12. PROMO ROW
   ========================================================================== */
.mp-promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-4); }
.mp-promo {
  position: relative; overflow: hidden;
  background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-lg); padding: var(--mp-s-5);
  display: flex; flex-direction: column; gap: var(--mp-s-3);
  text-decoration: none; color: inherit; transition: transform var(--mp-t-anim);
}
.mp-promo:hover { transform: translateY(-3px); border-color: var(--mp-brand); }
.mp-promo-leaf { background: radial-gradient(120% 80% at 0% 100%, rgba(255,99,33,0.18), transparent 50%), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-color: rgba(255,99,33,0.30); }
.mp-promo-tag {
  font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-amber);
  background: rgba(255,174,81,0.10); border: 1px solid rgba(255,174,81,0.28);
  padding: 3px 10px; border-radius: var(--mp-radius-pill); align-self: flex-start;
}
.mp-promo-tag-on  { color: var(--mp-leaf); background: rgba(255,99,33,0.08); border-color: rgba(255,99,33,0.28); }
.mp-promo-amount { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.875rem; line-height: 1; color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow); letter-spacing: -0.02em; }
.mp-promo-name { font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--mp-ink); margin: 0; }
.mp-promo-desc { font-size: 0.875rem; color: var(--mp-ink-2); margin: 0; line-height: 1.5; }
.mp-promo-cta { font-family: var(--mp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--mp-brand-light); text-transform: uppercase; letter-spacing: 0.08em; margin-top: auto; }

/* ==========================================================================
   13. COMPARE TABLE
   ========================================================================== */
.mp-cmp { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); overflow: hidden; box-shadow: var(--mp-shadow); }
.mp-cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mp-t-sm); }
.mp-cmp-table th, .mp-cmp-table td { padding: var(--mp-s-3) var(--mp-s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--mp-border); }
.mp-cmp-table thead th { font-family: var(--mp-font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--mp-ink-3); background: var(--mp-bg-1); border-bottom: 1px solid var(--mp-border-strong); }
.mp-cmp-col-us { background: linear-gradient(180deg, rgba(255,99,33,0.10), rgba(255,99,33,0.04)); color: var(--mp-brand-light) !important; border-left: 1px solid var(--mp-border-strong); border-right: 1px solid var(--mp-border-strong); font-weight: 700; }
.mp-cmp-table tbody tr:last-child td { border-bottom: 0; }
.mp-cmp-table tbody td { color: var(--mp-ink-2); }
.mp-cmp-yes  { color: var(--mp-leaf); font-weight: 700; }
.mp-cmp-no   { color: var(--mp-red);  font-weight: 700; }
.mp-cmp-mid  { color: var(--mp-amber); font-weight: 700; }

/* ==========================================================================
   14. TRUST STRIP
   ========================================================================== */
.mp-trust-strip { background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); padding: var(--mp-s-6) 0; }
.mp-trust-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-s-5); max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-5); }
.mp-trust-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--mp-s-3); align-items: center; }
.mp-trust-item-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-brand), var(--mp-amber)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 0 18px var(--mp-brand-glow); }
.mp-trust-item-label { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mp-ink-3); font-weight: 600; }
.mp-trust-item-val { font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-ink); font-size: 0.9375rem; }
.mp-trust-strip-score { max-width: var(--mp-max-w); margin: var(--mp-s-5) auto 0; padding: var(--mp-s-5) var(--mp-s-5) 0; display: flex; align-items: center; gap: var(--mp-s-4); flex-wrap: wrap; border-top: 1px solid var(--mp-border); }
.mp-trust-strip-score-val { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.875rem; color: var(--mp-brand-light); text-shadow: 0 0 24px var(--mp-brand-glow); line-height: 1; }
.mp-trust-strip-score-val small { color: var(--mp-ink-3); font-size: 0.875rem; font-weight: 600; }
.mp-trust-strip-score a { color: var(--mp-ink-2); font-family: var(--mp-font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mp-trust-strip-score a:hover { color: var(--mp-brand-light); }

/* ==========================================================================
   15. ARTICLE
   ========================================================================== */
.mp-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mp-s-7); padding: var(--mp-s-8) 0; position: relative; }
.mp-prose { max-width: 72ch; color: var(--mp-ink-2); }
.mp-prose img { max-width: 100%; height: auto; border-radius: var(--mp-radius); }
.mp-prose h1 { color: var(--mp-ink); font-size: clamp(1.875rem, 3.6vw, 2.5rem); margin-bottom: var(--mp-s-4); }
.mp-prose h2 { position: relative; padding-top: var(--mp-s-3); color: var(--mp-ink); margin-top: var(--mp-s-8); font-family: var(--mp-font-display); }
.mp-prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-leaf)); }
.mp-prose h3 { color: var(--mp-ink); margin-top: var(--mp-s-5); font-family: var(--mp-font-display); }
.mp-prose p { color: var(--mp-ink-2); }
.mp-prose ul, .mp-prose ol { padding-left: 22px; color: var(--mp-ink-2); }
.mp-prose li { margin: var(--mp-s-2) 0; }
.mp-prose a:not([class*="mp-btn"]) { color: var(--mp-brand-light); border-bottom: 1px solid rgba(255,99,33,0.30); padding-bottom: 1px; }
.mp-prose a:not([class*="mp-btn"]):hover { color: var(--mp-brand); border-color: var(--mp-brand); }
.mp-prose strong { color: var(--mp-ink); }
.mp-prose code { background: rgba(255,99,33,0.10); padding: 1px 6px; border-radius: 4px; font-size: 0.875em; font-family: var(--mp-font-mono); color: var(--mp-leaf); }
.mp-prose blockquote { margin: var(--mp-s-5) 0; padding: var(--mp-s-5) var(--mp-s-6); border-left: 4px solid var(--mp-brand); background: linear-gradient(90deg, rgba(255,99,33,0.10), transparent); border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; color: var(--mp-ink); font-family: var(--mp-font-serif); font-style: italic; font-size: 1.0625rem; }
.mp-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--mp-s-5) 0; border-radius: var(--mp-radius-lg); overflow: hidden; background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow); }
.mp-prose thead { background: linear-gradient(180deg, rgba(255,99,33,0.16), rgba(255,99,33,0.06)); }
.mp-prose th { font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mp-ink); font-weight: 700; padding: var(--mp-s-3) var(--mp-s-4); text-align: left; border-bottom: 1px solid var(--mp-border-strong); }
.mp-prose td { padding: var(--mp-s-3) var(--mp-s-4); text-align: left; font-size: var(--mp-t-sm); color: var(--mp-ink-2); border-bottom: 1px solid var(--mp-border); vertical-align: top; }
.mp-prose tbody tr:last-child td { border-bottom: 0; }
.mp-prose tbody tr:nth-child(odd) td { background: rgba(255,99,33,0.02); }

.mp-verdict { font-family: var(--mp-font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--mp-ink); padding: var(--mp-s-6) var(--mp-s-7); background: linear-gradient(90deg, rgba(255,99,33,0.12), transparent); border-left: 4px solid var(--mp-brand); border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; margin: var(--mp-s-6) 0; position: relative; }
.mp-verdict-byline { font-family: var(--mp-font-mono); font-style: normal; font-size: 0.75rem; color: var(--mp-ink-3); margin-top: var(--mp-s-3); text-transform: uppercase; letter-spacing: 0.08em; }
.mp-verdict-byline strong { color: var(--mp-brand-light); }

/* Callout box */
.mp-callout { background: linear-gradient(135deg, rgba(255,99,33,0.12), rgba(255,99,33,0.03)), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-left: 4px solid var(--mp-brand); padding: 18px 20px; margin: 1.75rem 0; border-radius: 0 var(--mp-radius-lg) var(--mp-radius-lg) 0; font-size: 0.9375rem; color: var(--mp-ink-2); line-height: 1.6; box-shadow: var(--mp-shadow); }
.mp-callout-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; color: var(--mp-brand-light); margin-bottom: 6px; letter-spacing: -0.015em; }
.mp-callout-warn { border-left-color: var(--mp-red); background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(248,113,113,0.03)), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); }
.mp-callout-warn .mp-callout-h { color: var(--mp-red); }

/* Inline article CTA block */
.mp-inline-cta { background: radial-gradient(120% 80% at 100% 0%, rgba(255,99,33,0.22), transparent 55%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: 24px; margin: 2rem 0; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; box-shadow: var(--mp-shadow-lg); }
.mp-inline-cta-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.25rem; color: var(--mp-ink); margin-bottom: 4px; letter-spacing: -0.02em; }
.mp-inline-cta-sub { color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 560px) { .mp-inline-cta { grid-template-columns: 1fr; } }

/* ==========================================================================
   16. FAQ details
   ========================================================================== */
/* Кожен <details class="mp-faq"> — окрема клікабельна картка */
.mp-faq { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--mp-shadow); margin-bottom: 12px; transition: border-color var(--mp-t-anim), box-shadow var(--mp-t-anim); }
.mp-faq:last-of-type { margin-bottom: 0; }
.mp-faq:hover { border-color: rgba(255,99,33,0.35); }
.mp-faq[open] { border-color: rgba(255,99,33,0.45); }
.mp-faq > summary { padding: 18px 22px; font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; color: var(--mp-ink); letter-spacing: -0.01em; transition: color var(--mp-t-anim); }
.mp-faq > summary:hover, .mp-faq[open] > summary { color: var(--mp-brand-light); }
.mp-faq > summary::-webkit-details-marker { display: none; }
.mp-faq > summary::after { content: "+"; flex-shrink: 0; color: var(--mp-brand-light); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 30px; height: 30px; display: inline-grid; place-items: center; background: rgba(255,99,33,0.12); border: 1px solid rgba(255,99,33,0.40); border-radius: 50%; transition: transform var(--mp-t-anim); }
.mp-faq[open] > summary::after { transform: rotate(45deg); }
/* Guard: if the markup already ships its own toggle icon, don't draw a second one */
.mp-faq > summary:has(.mp-faq-ico)::after { content: none; }
.mp-faq > summary .mp-faq-ico { flex-shrink: 0; color: var(--mp-brand-light); font-size: 1.5rem; font-weight: 400; line-height: 1; width: 30px; height: 30px; display: inline-grid; place-items: center; background: rgba(255,99,33,0.12); border: 1px solid rgba(255,99,33,0.40); border-radius: 50%; transition: transform var(--mp-t-anim); }
.mp-faq[open] > summary .mp-faq-ico { transform: rotate(45deg); }
.mp-faq > div { padding: 4px 22px 18px; color: var(--mp-ink-2); font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--mp-border); padding-top: 14px; }
.mp-faq > div p { margin: 0 0 0.75rem; }
.mp-faq > div p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. SIDEBAR
   ========================================================================== */
.mp-side { display: flex; flex-direction: column; gap: var(--mp-s-4); position: sticky; top: 88px; align-self: start; }
.mp-side-card { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); box-shadow: var(--mp-shadow); }
.mp-side-title { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mp-brand); font-weight: 700; margin: 0 0 var(--mp-s-3); display: flex; align-items: center; gap: var(--mp-s-2); }
.mp-side-title::before { content: ""; width: 14px; height: 2px; background: var(--mp-brand); display: inline-block; }
.mp-side-list { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; }
.mp-side-list li { margin: 0.5rem 0; }
.mp-side-list a { color: var(--mp-ink-2); text-decoration: none; }
.mp-side-list a:hover { color: var(--mp-brand-light); }
.mp-side-src { list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: var(--mp-ink-3); line-height: 1.6; font-family: var(--mp-font-mono); }

/* ==========================================================================
   18. BYLINE + AUTHOR CARD
   ========================================================================== */
.mp-byline { display: flex; align-items: center; gap: var(--mp-s-3); padding: var(--mp-s-4) 0; border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); margin: var(--mp-s-5) 0; }
.mp-byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-leaf), var(--mp-leaf-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 8px 24px -8px var(--mp-leaf-glow); }
.mp-byline-meta { font-size: var(--mp-t-sm); color: var(--mp-ink-2); line-height: 1.4; font-family: var(--mp-font-mono); }
.mp-byline-name { color: var(--mp-ink); font-weight: 700; }

.mp-author-card { background: radial-gradient(120% 80% at 0% 0%, rgba(255,99,33,0.10), transparent 50%), var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); margin: var(--mp-s-7) 0; display: grid; grid-template-columns: 72px 1fr; gap: var(--mp-s-5); box-shadow: var(--mp-shadow); }
.mp-author-card-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-leaf), var(--mp-leaf-deep)); color: var(--mp-brand-ink); display: grid; place-items: center; font-family: var(--mp-font-display); font-weight: 800; font-size: 1.625rem; box-shadow: 0 12px 32px -10px var(--mp-leaf-glow); }
.mp-author-card-h { font-family: var(--mp-font-display); font-weight: 700; font-size: 1.125rem; margin: 0 0 4px; color: var(--mp-ink); }
.mp-author-card-role { font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: var(--mp-s-2); }
.mp-author-card-bio { font-size: var(--mp-t-sm); color: var(--mp-ink-2); margin: 0; line-height: 1.6; }

/* ==========================================================================
   19. FINAL CTA BLOCK
   ========================================================================== */
.mp-cta-block { position: relative; overflow: hidden; border-radius: var(--mp-radius-xl); padding: var(--mp-s-9) var(--mp-s-6); background: radial-gradient(80% 100% at 50% 0%, rgba(255,99,33,0.30), transparent 55%), radial-gradient(60% 80% at 50% 100%, rgba(255,174,81,0.12), transparent 55%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border: 1px solid var(--mp-border-strong); text-align: center; box-shadow: var(--mp-shadow-lg); }
.mp-cta-block::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,99,33,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,99,33,0.05) 1px, transparent 1px); background-size: 32px 32px; mask: radial-gradient(circle at 50% 50%, black, transparent 75%); pointer-events: none; opacity: 0.5; }
.mp-cta-block-inner { position: relative; max-width: 720px; margin: 0 auto; }
.mp-cta-block-eyebrow { display: inline-block; font-family: var(--mp-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--mp-amber); background: rgba(255,174,81,0.10); padding: 5px 14px; border-radius: var(--mp-radius-pill); border: 1px solid rgba(255,174,81,0.30); margin-bottom: var(--mp-s-4); }
.mp-cta-block-h { font-family: var(--mp-font-display); font-size: var(--mp-t-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--mp-ink); margin: 0 0 var(--mp-s-4); }
.mp-cta-block-sub { font-size: 1.0625rem; color: var(--mp-ink-2); max-width: 56ch; margin: 0 auto var(--mp-s-6); }
.mp-cta-block-terms { font-family: var(--mp-font-mono); font-size: 0.6875rem; color: var(--mp-ink-3); margin-top: var(--mp-s-5); letter-spacing: 0.04em; }
.mp-cta-block-terms a { color: var(--mp-brand-light); }

/* ==========================================================================
   20. STICKY BOTTOM CTA (mobile)
   ========================================================================== */
.mp-bottom-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border-strong); padding: 10px var(--mp-s-4); align-items: center; gap: var(--mp-s-3); box-shadow: 0 -12px 24px rgba(0,0,0,0.5); }
.mp-bottom-cta-text { flex: 1; font-size: 0.8125rem; color: var(--mp-ink); }
.mp-bottom-cta-text strong { color: var(--mp-brand-light); font-weight: 700; }
.mp-bottom-cta a { background: var(--mp-grad-cta); color: var(--mp-brand-ink); font-family: var(--mp-font-display); font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: var(--mp-radius); font-size: 0.875rem; box-shadow: 0 8px 18px -6px var(--mp-brand-glow); display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.mp-foot { background: radial-gradient(80% 100% at 100% 0%, rgba(255,99,33,0.10), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(255,99,33,0.06), transparent 60%), linear-gradient(180deg, var(--mp-bg-1), var(--mp-bg)); border-top: 1px solid var(--mp-border-strong); padding: var(--mp-s-8) 0 var(--mp-s-5); margin-top: var(--mp-s-9); position: relative; }
.mp-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mp-brand), var(--mp-leaf), var(--mp-amber)); }
.mp-foot-top { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: var(--mp-s-7); }
.mp-foot-brand-row { display: flex; align-items: center; gap: var(--mp-s-3); margin-bottom: var(--mp-s-3); }
.mp-foot-brand-row img { width: 28px; height: 28px; }
.mp-foot-brand-row span { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.0625rem; color: var(--mp-ink); }
.mp-foot-col h4 { font-family: var(--mp-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mp-ink-3); margin: 0 0 var(--mp-s-3); font-weight: 700; }
.mp-foot-col ul { list-style: none; padding: 0; margin: 0; font-size: var(--mp-t-sm); }
.mp-foot-col li { margin: var(--mp-s-2) 0; }
.mp-foot-col a { color: var(--mp-ink-2); text-decoration: none; border-bottom: 1px solid transparent; font-family: var(--mp-font-mono); font-size: 0.8125rem; }
.mp-foot-col a:hover { color: var(--mp-brand-light); border-color: rgba(255,99,33,0.4); }
.mp-foot-disclaimer-box { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.25); border-radius: var(--mp-radius); padding: var(--mp-s-3) var(--mp-s-4); font-size: 0.8125rem; color: var(--mp-ink-2); margin-top: var(--mp-s-4); display: flex; align-items: flex-start; gap: var(--mp-s-3); }
.mp-foot-disclaimer-box a { color: var(--mp-leaf); }
.mp-foot-age-mark { flex-shrink: 0; font-family: var(--mp-font-display); font-weight: 800; font-size: 1rem; color: var(--mp-red); background: rgba(248,113,113,0.10); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(248,113,113,0.30); text-shadow: 0 0 12px var(--mp-red-glow); }
.mp-foot-bottom { margin-top: var(--mp-s-6); padding-top: var(--mp-s-4); border-top: 1px solid var(--mp-border); font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--mp-s-3); }

/* ==========================================================================
   22. SKIP LINK + REDUCED MOTION + RESPONSIVE
   ========================================================================== */
.mp-skip-link { position: absolute; left: -9999px; }
.mp-skip-link:focus { position: fixed !important; left: var(--mp-s-4) !important; top: var(--mp-s-4) !important; z-index: 9999 !important; padding: var(--mp-s-3) var(--mp-s-4) !important; background: var(--mp-brand) !important; color: var(--mp-brand-ink) !important; font-weight: 800 !important; border-radius: var(--mp-radius) !important; box-shadow: var(--mp-shadow-lg) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .mp-ticker-track { animation: none !important; }
}

@media (max-width: 980px) {
  .mp-grid-12 > .mp-col-7, .mp-grid-12 > .mp-col-5 { grid-column: 1 / -1; }
  .mp-hero { padding: var(--mp-s-7) 0; }
  .mp-hero-grid { grid-template-columns: 1fr; gap: var(--mp-s-6); }
  .mp-hero-stats { grid-template-columns: 1fr 1fr; }
  .mp-stat-strip { grid-template-columns: 1fr 1fr; margin-bottom: var(--mp-s-7); }
  .mp-steps { grid-template-columns: 1fr; }
  .mp-games { grid-template-columns: 1fr 1fr; }
  .mp-promo-grid { grid-template-columns: 1fr 1fr; }
  .mp-trust-strip-inner { grid-template-columns: 1fr 1fr; }
  .mp-article-grid { grid-template-columns: 1fr; }
  .mp-side { position: static; }
  .mp-foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mp-bottom-cta { display: flex; }
  body { padding-bottom: 64px; }
  .mp-offer-bar-inner { font-size: 0.8125rem; }
  .mp-hero-stats { grid-template-columns: 1fr 1fr; }
  .mp-stat-strip { grid-template-columns: 1fr 1fr; }
  .mp-games { grid-template-columns: 1fr; }
  .mp-promo-grid { grid-template-columns: 1fr; }
  .mp-trust-strip-inner { grid-template-columns: 1fr; }
  .mp-cmp-table { font-size: 0.8125rem; }
  .mp-cmp-table th, .mp-cmp-table td { padding: var(--mp-s-2) var(--mp-s-3); }
  .mp-cta-block { padding: var(--mp-s-7) var(--mp-s-4); }
  .mp-foot-top { grid-template-columns: 1fr; }
  .mp-author-card { grid-template-columns: 56px 1fr; }
  .mp-author-card-avatar { width: 56px; height: 56px; font-size: 1.375rem; }
}

/* --- MANDATORY layout-safety & responsive baseline --- */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%;height:auto}
h1,h2,h3,h4,p,a,li,td,th{overflow-wrap:break-word}
.container,.wrap{width:100%;max-width:var(--container,1200px);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
main,header,footer,section>.container,.container{position:relative;z-index:1}
.btn-cta,.btn-2{min-height:44px;display:inline-flex;align-items:center}
.mp-btn,.mp-nav-cta,.mp-bottom-cta a{min-height:44px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} }
input,select,textarea{font-size:16px}
.grid-auto{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* === MOBILE HEADER STANDARD (apply-mobile-header.py) === */
.kb-brand-line,.mp-brand-line{min-width:0}
.kb-brand-line img,.mp-brand-line img{flex:0 0 auto}
.kb-brand-name,.mp-brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  .kb-topbar nav.wrap,.mp-topbar nav.wrap{flex-wrap:wrap;column-gap:12px;row-gap:8px}
  .kb-brand-line,.mp-brand-line{order:1;flex:1 1 auto;min-width:0;margin-right:0}
  .kb-brand-name,.mp-brand-name{font-size:0.95rem}
  .kb-nav-burger,.mp-burger{order:2;flex:0 0 auto;display:inline-flex;margin-left:8px}
  .kb-nav-cta,.mp-nav-cta{order:3;flex:0 0 100%;width:100%;justify-content:center;margin-top:12px;padding:12px 16px;font-size:0.9375rem}
  .kb-nav-cta .kb-cta-label-long,.mp-nav-cta .mp-cta-label-long{display:inline}
  .kb-nav-cta .kb-cta-label-short,.mp-nav-cta .mp-cta-label-short{display:none}
  .kb-nav-links,.mp-nav-links{order:4}
}
@media (max-width:400px){
  .kb-brand-name,.mp-brand-name{font-size:0.84rem}
}


/* === CTA button text-color override (apply-btn-color.py) === */
.mp-btn *,.kb-btn *,.mp-nav-cta *,.kb-nav-cta *,.mp-bottom-cta a *,.kb-bottom-cta a *,.nf-links a *{color:inherit!important}
.mp-btn a,.kb-btn a,.mp-nav-cta a,.kb-nav-cta a{color:inherit!important}

/* --- cta-contrast-guard v1 --- */
a.mp-btn-primary, a.mp-btn-primary:link, a.mp-btn-primary:visited, a.mp-btn-primary:hover, a.mp-btn-primary:focus{color:var(--mp-brand-ink)!important;-webkit-text-fill-color:var(--mp-brand-ink)!important;border-bottom:0!important;text-shadow:none;}
a.mp-btn-ghost, a.mp-btn-ghost:link, a.mp-btn-ghost:visited, a.mp-btn-ghost:hover, a.mp-btn-ghost:focus{color:var(--mp-ink)!important;-webkit-text-fill-color:var(--mp-ink)!important;border-bottom:0!important;text-shadow:none;}
a.mp-nav-cta, a.mp-nav-cta:link, a.mp-nav-cta:visited, a.mp-nav-cta:hover, a.mp-nav-cta:focus{color:var(--mp-brand-ink)!important;-webkit-text-fill-color:var(--mp-brand-ink)!important;border-bottom:0!important;text-shadow:none;}
.kb-btn *,.kb-nav-cta *,.kb-bottom-cta *,.mp-btn *,.mp-nav-cta *,.mp-bottom-cta *{color:inherit!important;-webkit-text-fill-color:inherit!important;}


/* ==========================================================================
   MEDIA & LAYOUT COMPONENTS — paste into every build's theme.css.
   Codified from the Realz AU build: parallel subagents INVENT layout classes
   for images/tables/breadcrumbs (mp-logo-row, mp-tile-grid, mp-card-grid,
   mp-figure, mp-media-grid, mp-table, mp-crumbs, mp-hero-cta-row, mp-pay-row…)
   that DON'T exist in a cloned theme.css — so those blocks collapse to a single
   column (block-level <img>/<div> stack) or render unstyled. Ship these classes
   up front and the media just works.

   Prefix note: these use the `mp-` prefix. For a `kb-` theme, s/mp-/kb-/.
   Depends on the standard token vars (--mp-bg-card, --mp-border, --mp-brand,
   --mp-ink*, --mp-s-*, --mp-radius*, --mp-shadow*, --mp-t-anim, --mp-font-*).
   ========================================================================== */

/* --- PROSE WIDTH TRAP -------------------------------------------------------
   If .mp-prose has `max-width: 72ch`, ANY grid placed inside it (steps, tiles,
   logo rows) is squeezed into that ~720px column. Fix: drop the cap on the
   container, re-apply it to TEXT children only, so grids/tables/media go full
   width while paragraphs stay readable. */
.mp-prose { max-width: none; }
.mp-prose > p, .mp-prose > ul:not(.mp-steps), .mp-prose > ol:not(.mp-steps),
.mp-prose > h1, .mp-prose > h2, .mp-prose > h3, .mp-prose > h4, .mp-prose > blockquote {
  max-width: 72ch;
}

/* --- Provider / payment logo row (flex, never a column) --- */
.mp-logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; margin: var(--mp-s-5) 0; }
.mp-logo-row img { height: 38px; width: auto; opacity: 0.9; }
.mp-pay-row { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); align-items: center; margin: var(--mp-s-4) 0; }
.mp-pay-row img { height: 30px; width: auto; }

/* --- Two-up cards (welcome fiat/crypto, compare) --- */
.mp-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; list-style: none; padding: 0; }
.mp-card { background: var(--mp-grad-card); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: var(--mp-s-5); box-shadow: var(--mp-shadow); }
.mp-card > h3 { font-family: var(--mp-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 var(--mp-s-3); color: var(--mp-ink); }
.mp-card ul { padding-left: 20px; margin: var(--mp-s-3) 0 0; color: var(--mp-ink-2); font-size: var(--mp-t-sm); }
.mp-card li { margin: var(--mp-s-2) 0; }
.mp-card-big { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--mp-brand-light); margin: 0 0 var(--mp-s-2); text-shadow: 0 0 24px var(--mp-brand-glow); letter-spacing: -0.01em; }

/* --- Game tiles (pokies, live, crash). ~5 across on desktop, 2 on mobile.
   minmax 190px reads as premium; 150px looks like a dense afterthought. --- */
/* The upper bound is deliberate. Most game art in the kit is 315px wide, so a `1fr`
   track let the tiles grow to ~340px on a wide screen and every thumbnail was being
   upscaled — that is what read as "bad quality". Capping the track below the source
   width means the browser only ever downscales. justify-content spreads the leftover
   space instead of stretching the tiles. */
.mp-tile-grid, .mp-pokie-grid, .mp-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 300px)); justify-content: center; gap: var(--mp-s-4); margin: var(--mp-s-5) 0; }
.mp-tile, .mp-pokie-tile { margin: 0; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; background: var(--mp-bg-card); text-decoration: none; display: block; transition: transform var(--mp-t-anim), border-color var(--mp-t-anim); }
.mp-tile:hover, .mp-pokie-tile:hover { transform: translateY(-3px); border-color: var(--mp-border-strong); }
/* This kit's game art is 315x236 — LANDSCAPE. The inherited 3/4 portrait ratio would
   crop ~44% off each tile horizontally, cutting the game logo out of the artwork. */
.mp-tile img, .mp-pokie-tile img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
/* Live art from the kit is 4:3 / 1:1, pokie art is 3:4. One shared aspect would crop one
   of the two through its wordmark, so the live grid overrides it. */
.mp-live-grid .mp-tile img { aspect-ratio: 4 / 3; }
.mp-tile figcaption, .mp-pokie-name { padding: 8px 10px; font-size: 0.8125rem; color: var(--mp-ink-2); font-family: var(--mp-font-mono); text-align: center; }
@media (max-width: 560px) { .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Promo banner strip: several reload/bonus banners in a row, not stacked --- */
.mp-promo-strip { display: flex; flex-wrap: wrap; gap: var(--mp-s-4); margin: var(--mp-s-5) 0; }
.mp-promo-strip img { flex: 1 1 260px; max-width: calc(50% - var(--mp-s-3)); height: auto; margin: 0; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); }
@media (max-width: 560px) { .mp-promo-strip img { max-width: 100%; } }

/* --- Lone promo banners in prose: CAP + centre. A raw 730px webp dominates the
   column and reads as "huge image". Place these LATE in theme.css: `.mp-prose > img`
   ties specificity with the base `.mp-prose img{max-width:100%}` and only wins if
   it comes AFTER it in source order. --- */
.mp-prose > img, .mp-prose > p > img, .mp-prose > figure:not([class]) > img {
  max-width: 460px; width: 100%; height: auto; display: block; margin: var(--mp-s-5) auto;
  border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow);
}
.mp-figure { margin: var(--mp-s-5) 0; text-align: center; }
.mp-figure > img { max-width: 460px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); }
.mp-figure figcaption { font-size: 0.8125rem; color: var(--mp-ink-3); margin-top: 8px; font-family: var(--mp-font-mono); }
.mp-media-block { margin: var(--mp-s-5) 0; text-align: center; }
.mp-media-block > img { max-width: 520px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow); }
.mp-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mp-s-4); margin: var(--mp-s-5) 0; }
.mp-media-grid .mp-figure { margin: 0; }
.mp-media-grid .mp-figure > img { max-width: 100%; }

/* --- Tables: subagents emit <div class="mp-table-wrap"><table class="mp-table"> and
   leave them unstyled (no borders/padding). Style + keep them scrollable on mobile
   so a wide table never forces the whole PAGE into horizontal scroll. --- */
.mp-table-wrap { overflow-x: auto; margin: var(--mp-s-5) 0; -webkit-overflow-scrolling: touch; }
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--mp-t-sm); background: var(--mp-bg-card); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; }
.mp-table th, .mp-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--mp-border); vertical-align: top; }
.mp-table thead th { background: rgba(255,99,33,0.09); color: var(--mp-ink); font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.01em; }
.mp-table td { color: var(--mp-ink-2); }
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
/* (the th background rgba is the BRAND accent — swap 232,178,74 for your brand rgb) */

/* --- Breadcrumbs: an <ol class="mp-crumbs"> renders as a numbered vertical list
   until styled. Make it a horizontal flex row with "/" separators. --- */
.mp-breadcrumb { margin: 0 0 var(--mp-s-3); }
.mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: var(--mp-s-3) 0; font-family: var(--mp-font-mono); font-size: 0.75rem; color: var(--mp-ink-3); }
.mp-crumbs li { display: flex; align-items: center; gap: 6px; margin: 0; }
.mp-crumbs li:not(:last-child)::after { content: "/"; color: var(--mp-ink-mute); }
.mp-crumbs a { color: var(--mp-ink-2); text-decoration: none; border: 0; }
.mp-crumbs a:hover { color: var(--mp-brand-light); }

/* --- Hero copy/media/cta split + misc lists --- */
.mp-hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); margin: var(--mp-s-5) 0; }
.mp-hero-media { margin: 0; }
.mp-hero-media > img { width: 100%; height: auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow-lg); }
.mp-list { padding-left: 20px; color: var(--mp-ink-2); margin: var(--mp-s-4) 0; }
.mp-list li { margin: var(--mp-s-2) 0; }

/* modifier alias: ordered-list variant of .mp-steps (no extra rules needed) */
.mp-steps-ol { list-style: none; }

.mp-tile-cap { padding: 8px 10px; font-size: 0.8125rem; color: var(--mp-ink-2); font-family: var(--mp-font-mono); text-align: center; display: block; }
a.mp-tile:hover .mp-tile-cap { color: var(--mp-brand-light); }

/* Combined `wrap mp-prose` must keep the page container: `.mp-prose{max-width:none}`
   frees inner grids from the 72ch text cap, but on an element that is ALSO `.wrap`
   it removes the page gutter and the section renders edge-to-edge. */
.wrap.mp-prose { max-width: var(--mp-max-w, 1200px); }

/* Classes the SPEC references that the base theme doesn't define. */
.mp-cta-block-actions { display: flex; flex-wrap: wrap; gap: var(--mp-s-3);
  align-items: center; justify-content: center; margin: var(--mp-s-5) 0 var(--mp-s-4); }
.mp-toc { background: var(--mp-bg-card); border: 1px solid var(--mp-border);
  border-left: 3px solid var(--mp-brand); border-radius: var(--mp-radius);
  padding: var(--mp-s-4) var(--mp-s-5); margin: var(--mp-s-5) 0; font-size: var(--mp-t-sm); }
.mp-toc-title { font-family: var(--mp-font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink-3); margin: 0 0 var(--mp-s-3); }
.mp-toc ol, .mp-toc ul { margin: 0; padding-left: 20px; color: var(--mp-ink-2); }
.mp-toc li { margin: var(--mp-s-2) 0; }
.mp-toc a { color: var(--mp-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.mp-toc a:hover { color: var(--mp-brand-light); border-bottom-color: var(--mp-brand-light); }

/* FAQ: the accordion CARD is `details.mp-faq`; this wrapper is spacing only. */
.mp-faq-list { margin: var(--mp-s-5) 0; }
/* Answers ship as a bare <p> far more often than as a wrapping <div> — style both,
   or the answer sits flush against the card edge with no separator. */
.mp-faq > p { padding: 14px 22px 18px; margin: 0; color: var(--mp-ink-2);
  font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--mp-border); }
.mp-faq > p ~ p { border-top: 0; padding-top: 0; }

/* Author card: flex, never a fixed grid track. If the avatar is removed from layout by
   an extension or a content blocker, a `72px 1fr` grid drops the TEXT into the 72px
   track and the bio wraps a few characters per line. Flex has no slot to fall into. */
.mp-author-card { display: flex; align-items: flex-start; flex-wrap: wrap; }
.mp-author-card-avatar { flex: 0 0 72px; }
.mp-author-card > :not(.mp-author-card-avatar) { flex: 1 1 260px; min-width: 0; }
@media (max-width: 640px) { .mp-author-card-avatar { flex-basis: 56px; } }

/* The kit's promo images are 144x144 / 100x100 despite `500x500` filenames. Cap them so
   a page can never stretch a thumbnail into a blurry banner. */
/* `.mp-prose > img` (0,1,1) outranks a bare `.mp-promo-thumb` (0,1,0) no matter where it
   sits in the file, so the 160px cap silently lost to that rule's 460px and thumbnails
   rendered ~4x their real size, badly blurred. Match the container's specificity. */
.mp-promo-thumb,
.mp-prose > .mp-promo-thumb,
.mp-prose > p > .mp-promo-thumb,
.mp-figure > .mp-promo-thumb {
  max-width: 160px; width: auto; height: auto;
  border-radius: var(--mp-radius); box-shadow: none;
}

/* --- Newly commissioned artwork (2026-07-20) -------------------------------
   Two new shapes, both downscaled INTO their box so they stay sharp — the
   opposite of the thumbnails they replace, which were upscaled 4x and mushy. */

/* 3:1 band introducing a themed slot section. Full container width. */
.mp-theme-band,
.mp-prose > .mp-theme-band,
.mp-prose > p > .mp-theme-band,
.mp-figure > .mp-theme-band {
  display: block; width: 100%; max-width: none; height: auto;
  margin: var(--mp-s-5) 0 var(--mp-s-4);
  border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow);
}
/* 4:3 section illustration. Capped and centred — `.mp-prose > img` (0,1,1) would
   otherwise win with its 460px, so match that specificity here too. */
.mp-section-art,
.mp-prose > .mp-section-art,
.mp-prose > p > .mp-section-art,
.mp-figure > .mp-section-art {
  display: block; max-width: 420px; width: 100%; height: auto;
  margin: var(--mp-s-5) auto; border-radius: var(--mp-radius-lg);
  border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow);
}
@media (max-width: 560px) {
  .mp-theme-band { border-radius: var(--mp-radius); margin: var(--mp-s-4) 0 var(--mp-s-3); }
}

/* ==========================================================================
   MOBILE NAV — reconciled with the markup this land actually uses.

   The base theme drives the mobile menu with a checkbox hack
   (.mp-nav-toggle:checked ~ .mp-nav-links) and hides .mp-nav-toggle outright. This land's
   chrome uses a real <button aria-expanded> instead, which is better for screen readers but
   meant the button inherited that display:none, the burger nested inside it vanished with
   it, and the JS toggled an .is-open class no rule matched. Net effect: on any phone the six
   nav links sat in a zero-height container with nothing able to open it.
   ========================================================================== */
@media (max-width: 860px) {
  .mp-head3 .mp-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 2; margin-left: 8px; flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 1px solid var(--mp-border-strong);
    border-radius: var(--mp-radius); cursor: pointer;
  }
  .mp-head3 .mp-nav-links.is-open { max-height: 480px; margin-top: var(--mp-s-3); }
}
/* The base styles the bars as `.mp-burger span`, so the element needs an inner span. */
.mp-burger { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 14px; }

/* This land's footer has four blocks (brand + three link columns); the base grid declares
   three tracks, so the fourth wrapped onto its own row. */
.mp-foot-top { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .mp-foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mp-foot-top { grid-template-columns: 1fr; } }

/* The theme's emblem slot is built for a SQUARE badge (52x52) sitting next to a text
   lockup. emberBet ships a horizontal wordmark at 171x44, which that rule squashes into a
   square. The wordmark already carries the brand name, so let it keep its aspect and drop
   the separate text block rather than distorting the client's logo. */
.mp-head3-emblem img { width: auto; height: 38px; }
@media (max-width: 860px) { .mp-head3-emblem img { height: 30px; } }
.mp-foot .mp-brand-line img { width: auto; height: 30px; }

/* --- provider logo strip -------------------------------------------------
   Twelve logos in a flex-wrap row broke as 11 + 1. A six-track grid gives 6 + 6.
   `auto-fit` is deliberately NOT used: on the one page with only two logos it would
   stretch each into a half-width track. Fixed tracks keep every logo the same size. */
.mp-logo-row { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; align-items: center; gap: 22px 28px; }
.mp-logo-row:has(img:nth-child(3):last-child), .mp-logo-row:has(img:nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(0, 140px)); justify-content: center; }
@media (max-width: 900px) { .mp-logo-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .mp-logo-row { grid-template-columns: repeat(3, 1fr); } }

/* --- inline CTA ----------------------------------------------------------
   The rule is `1fr auto`, which assumes two children: text block + button. Some pages
   emit heading, subtext and button as three flat children, which put the button in
   column 1 row 2. Pin the text to column 1 and let the button own column 2 outright. */
.mp-inline-cta > .mp-inline-cta-h,
.mp-inline-cta > .mp-inline-cta-sub { grid-column: 1; }
.mp-inline-cta > .mp-btn { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end; }
@media (max-width: 560px) {
  .mp-inline-cta > .mp-inline-cta-h,
  .mp-inline-cta > .mp-inline-cta-sub,
  .mp-inline-cta > .mp-btn { grid-column: 1; grid-row: auto; justify-self: stretch; }
}