/*
Theme Name:  Winmasters Nepal — svatantra samiksha (light)
Description: Winmasters NP monobrand. LIGHT theme, per TZ section 3: cream ground (#f7f6fb), white
             cards, orange CTA (#ec1f27) in pill form, amber accents, near-black ink. Text tokens
             are tuned for a light ground — the polarity is the reverse of the fleet's dark lands.
             Shares the fleet mp- class vocabulary.
Version:     1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS — cream ground, orange CTA, amber accent
   ========================================================================== */
:root {
  --mp-bg:            #f7f6fb;
  --mp-bg-1:          #ffffff;
  --mp-bg-2:          #efedf7;
  --mp-bg-3:          #e4e1f0;
  --mp-bg-card:       #ffffff;
  --mp-bg-card-2:     #efedf7;

  --mp-ink:           #1f242b;
  --mp-ink-2:         #343a40;
  --mp-ink-3:         #4e565f;
  --mp-ink-mute:      #5a636e;

  --mp-border:        #e2e0ec;
  --mp-border-strong: #d2cfe2;

  /* Primary — Winmasters orange */
  --mp-brand:         #ec1f27;
  --mp-brand-deep:    #d81420;
  --mp-brand-light:   #c2101c;
  --mp-brand-glow:    rgba(236,31,39,0.45);
  --mp-brand-ink:     #ffffff;

  /* Positives (readable green on a light ground) */
  --mp-leaf:          #1e8e5a;
  --mp-leaf-deep:     #17724a;
  --mp-leaf-glow:     rgba(139,92,246,0.40);

  /* Warm red (negatives) */
  --mp-red:           #8c2f22;
  --mp-red-deep:      #77281d;
  --mp-red-glow:      rgba(140,47,34,0.42);

  /* Gold accent (secondary) */
  --mp-amber:         #5b21b6;
  --mp-deco:          #8b5cf6;   /* decorative amber — gradients, dots, rules only */
  --mp-amber-glow:    rgba(139,92,246,0.40);

  --mp-sky:           #5b21b6;
  --mp-violet:        #5b21b6;
  --mp-magenta:       #6d28d9;

  --mp-pos:           #1e8e5a;
  --mp-neg:           #8c2f22;
  --mp-warn:          #5b21b6;

  /* Gradients */
  --mp-grad-hero:     radial-gradient(ellipse at 92% -10%, rgba(236,31,39,0.16), transparent 58%), radial-gradient(ellipse at 8% 110%, rgba(139,92,246,0.14), transparent 58%), linear-gradient(180deg, #fbfaff 0%, #f7f6fb 100%);
  --mp-grad-cta:      linear-gradient(135deg, #ec1f27 0%, #d81420 100%);
  --mp-grad-leaf:     linear-gradient(135deg, #ec1f27, #d81420);
  --mp-grad-red:      linear-gradient(135deg, #8c2f22, #77281d);
  --mp-grad-bleed:    radial-gradient(80% 100% at 90% 0%, rgba(236,31,39,0.14), transparent 58%), radial-gradient(80% 100% at 10% 100%, rgba(139,92,246,0.12), transparent 60%), linear-gradient(160deg, #ffffff, #f7f6fb);
  --mp-grad-card:     linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2));

  /* Type */
  --mp-font-body:     'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Kohinoor Devanagari', 'Devanagari Sangam MN', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mp-font-display:  'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Kohinoor Devanagari', 'Devanagari Sangam MN', system-ui, 'Segoe UI', Roboto, sans-serif;
  --mp-font-mono:     ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
  --mp-font-serif:    'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Kohinoor Devanagari', 'Devanagari Sangam MN', Georgia, 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 2px 10px rgba(120,72,20,0.08);
  --mp-shadow-lg:     0 10px 34px rgba(120,72,20,0.14);
  --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:               #f7f6fb;
  --surface:          #ffffff;
  --surface2:         #efedf7;
  --text:             #1f242b;
  --muted:            #343a40;
  --accent:           #ec1f27;
  --accent-deep:      #d81420;
  --accent-light:     #c2101c;
  --accent-ink:       #c2101c;
  --accent-contrast:  #ffffff;
  --secondary:        #8b5cf6;
  --border:           #e2e0ec;
  --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, #ec1f27, #c9a6f2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-tx-leaf    { background: linear-gradient(120deg, #ec1f27, #d81420); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-tx-red     { background: linear-gradient(120deg, #8c2f22, #77281d); -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(236,31,39,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, #ffffff, #efedf7, #ffffff);
  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(236,31,39,0.10);
  color: var(--mp-leaf);
  border: 1px solid rgba(236,31,39,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(247,246,251,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-deco));
  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(236,31,39,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(236,31,39,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(236,31,39,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,
    #ec1f27 0 6.66%, #c9a6f2 6.66% 13.33%, #1e8e5a 13.33% 20%,
    #c9a6f2 20% 26.66%, #c9a6f2 26.66% 33.33%, #8c2f22 33.33% 40%,
    #d81420 40% 46.66%, #ec1f27 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(120,72,20,0.06) 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(247,246,251,0.10), rgba(247,246,251,0.82) 72%),
              linear-gradient(180deg, rgba(247,246,251,0.30) 0%, rgba(247,246,251,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(247,246,251,0.74);
  border: 1px solid rgba(236,31,39,0.55); border-radius: 16px;
  box-shadow: 0 12px 32px -10px rgba(120,72,20,0.16), 0 0 0 4px rgba(247,246,251,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(120,72,20,0.16), 0 0 0 4px rgba(247,246,251,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(247,246,251,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(236,31,39,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(236,31,39,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,31,39,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(236,31,39,0.08);
  padding: 5px 14px; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(236,31,39,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 { }
.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);
}
.mp-hero-stat-num.mp-leaf-tx { color: var(--mp-leaf); }
.mp-hero-stat-num.mp-red-tx  { color: var(--mp-red); }
.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(236,31,39,0.15), 0 30px 80px -20px rgba(120,72,20,0.16), inset 0 1px 0 rgba(236,31,39,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(236,31,39,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(236,31,39,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(236,31,39,0.50) inset;
}
.mp-btn-ghost {
  background: rgba(236,31,39,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(236,31,39,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), #ffffff); 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); 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); }
.mp-stat-figure-red  { color: var(--mp-red); }
.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-deco));
  -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(236,31,39,0.10); padding: 4px 12px; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(236,31,39,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(18,18,18,0.20), transparent 50%); pointer-events: none; }
.mp-game-art-aviator   { background: linear-gradient(135deg, #ec1f27, #c9a6f2); }
.mp-game-art-superkick { background: linear-gradient(135deg, #ec1f27, #d81420); }
.mp-game-art-madpunch  { background: linear-gradient(135deg, #c9a6f2, #ec1f27); }
.mp-game-art-spin      { background: linear-gradient(135deg, #c9a6f2, #d81420); }
.mp-game-art-mcards    { background: linear-gradient(135deg, #d81420, #c9a6f2); }
.mp-game-art-mines     { background: linear-gradient(135deg, #ec1f27, #e4e1f0); }
.mp-game-tag {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mp-font-mono); font-size: 0.6875rem; font-weight: 700;
  background: rgba(247,246,251,0.65); color: var(--mp-ink);
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid rgba(18,18,18,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.mp-game-tag-native { color: var(--mp-leaf); border-color: rgba(236,31,39,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(236,31,39,0.10); color: var(--mp-leaf); border: 1px solid rgba(236,31,39,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(236,31,39,0.18), transparent 50%), linear-gradient(180deg, var(--mp-bg-card), var(--mp-bg-card-2)); border-color: rgba(236,31,39,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(139,92,246,0.10); border: 1px solid rgba(139,92,246,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(236,31,39,0.08); border-color: rgba(236,31,39,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); 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(236,31,39,0.10), rgba(236,31,39,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-deco)); 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); 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-deco)); }
.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(236,31,39,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(236,31,39,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(236,31,39,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(236,31,39,0.16), rgba(236,31,39,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(236,31,39,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(236,31,39,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(236,31,39,0.12), rgba(236,31,39,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(140,47,34,0.10), rgba(140,47,34,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(236,31,39,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(236,31,39,0.35); }
.mp-faq[open] { border-color: rgba(236,31,39,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(236,31,39,0.12); border: 1px solid rgba(236,31,39,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(236,31,39,0.12); border: 1px solid rgba(236,31,39,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(236,31,39,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(236,31,39,0.30), transparent 55%), radial-gradient(60% 80% at 50% 100%, rgba(139,92,246,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(236,31,39,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236,31,39,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(139,92,246,0.10); padding: 5px 14px; border-radius: var(--mp-radius-pill); border: 1px solid rgba(139,92,246,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(120,72,20,0.14); }
.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(236,31,39,0.10), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(236,31,39,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-deco), var(--mp-brand-deep)); }
.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(236,31,39,0.4); }
.mp-foot-disclaimer-box { background: rgba(140,47,34,0.06); border: 1px solid rgba(140,47,34,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(140,47,34,0.10); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(140,47,34,0.30); }
.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); 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 SQUARE (249x249) with the game wordmark across the bottom
   third. Any non-1:1 ratio crops through the wordmark, so the tiles stay 1:1. */
.mp-tile img, .mp-pokie-tile img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
/* Every cover in this kit is 1:1, so the live grid needs no aspect override. */
.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(236,31,39,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(18,18,18,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; }
}



/* ==========================================================================
   PL ADDITIONS — provider-logo plates
   --------------------------------------------------------------------------
   The supplied kit mixes two kinds of provider artwork: white-on-transparent
   marks (Evolution, Playtech, Wazdan, Amatic, SG Digital…) and dark-outlined
   ones (Betsoft, Play'n GO, RubyPlay). On this dark ground the second group is
   effectively invisible — it was measured, not guessed: `_scripts/audit_media.py`
   averages the luminance of every non-transparent pixel and writes the plate
   class into `_media_alt_map.json`.

   One background cannot serve both, so each logo gets the plate its own artwork
   needs. Use the class from the alt map; do not pick by eye.
   ========================================================================== */
.mp-logo-row img.mp-logo--on-dark,
.mp-logo-row img.mp-logo--on-light {
  height: 34px;
  width: auto;
  padding: 10px 14px;
  border-radius: var(--mp-radius-sm, 8px);
  box-sizing: content-box;
  opacity: 1;
}

/* light artwork: keep it on the dark card so the white mark reads */
.mp-logo-row img.mp-logo--on-dark {
  background: #1b1815;
  border: 1px solid rgba(18,18,18,0.18);
}

/* dark artwork: it needs a light plate or the black outlines disappear */
.mp-logo-row img.mp-logo--on-light {
  background: #efedf7;
  border: 1px solid rgba(18,18,18,0.14);
}

@media (max-width: 560px) {
  .mp-logo-row img.mp-logo--on-dark,
  .mp-logo-row img.mp-logo--on-light { height: 26px; padding: 8px 10px; }
}

/* ── FR add-ons: lien-alternatif bar, RG page suppression, RGPD banner ─────── */
.mp-linkbar{background:linear-gradient(180deg,#ffffff,#fbfaff);border-bottom:1px solid rgba(236,31,39,.28)}
.mp-linkbar-inner{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.6rem 0;font-size:.875rem;color:var(--mp-ink-2)}
.mp-linkbar-dot{width:.55rem;height:.55rem;border-radius:50%;background:#1e8e5a;box-shadow:0 0 0 3px rgba(30,142,90,.18);flex:none}
.mp-linkbar-status{color:var(--mp-ink);font-weight:600}
.mp-linkbar-date{font-family:"Space Mono",ui-monospace,monospace;font-size:.8rem;color:var(--mp-ink-3)}
.mp-linkbar-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .8rem;border-radius:999px;background:var(--mp-brand);color:var(--mp-brand-ink)!important;font-weight:700;font-size:.82rem;white-space:nowrap}
.mp-linkbar-alt{color:var(--mp-brand-light)}
@media(max-width:640px){.mp-linkbar-cta{margin-left:0}}

.mp-rg .mp-nav-cta,.mp-rg .mp-linkbar,.mp-rg .mp-offer-bar,.mp-rg .mp-bottom-cta{display:none!important}

.mp-cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;max-width:56rem;margin:0 auto;padding:1rem 1.15rem;border:1px solid var(--mp-line,rgba(18,18,18,0.12));border-radius:14px;background:#ffffff;box-shadow:0 18px 48px rgba(120,72,20,0.15);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--mp-ink-2)}
.mp-cookie[hidden]{display:none}
.mp-cookie p{margin:0;flex:1 1 22rem}
.mp-cookie-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.mp-cookie button{cursor:pointer;border-radius:999px;padding:.45rem 1rem;font-weight:700;font-size:.82rem;border:1px solid var(--mp-brand)}
.mp-cookie .mp-ck-yes{background:var(--mp-brand);color:var(--mp-brand-ink)}
.mp-cookie .mp-ck-no{background:transparent;color:var(--mp-brand-light)}

/* NOTE: no .mp-logo-row override here. An earlier FR block forced every plate light and
   pinned the height with !important — which inverted the plate logic above (mp-logo--on-dark
   means "white artwork, needs a DARK plate") and made Evolution, Playtech, Wazdan, Amatic,
   Inspired, SG Digital and Yggdrasil invisible. The rules at ~1114 are already correct. */

/* Headings inherit line-height 1.05 from the base rule — fine for a one-line display H1,
   far too tight for the two-line French H2/H3 in body copy. */
.mp-prose h2, .mp-prose h3, .mp-prose h4 { line-height: 1.18; }
/* The base rule zeroes heading margins and .mp-prose only restores margin-TOP, so a heading
   sat flush on its own first paragraph. Give it a bottom gap too. */
.mp-prose > h2 { margin-bottom: var(--mp-s-4); }
.mp-prose > h3, .mp-prose > h4 { margin-bottom: var(--mp-s-3); }
/* Do NOT zero margin-top on a section's first heading: these sections carry no padding of
   their own, so that 64px margin is exactly what collapses out through the section boundary
   and separates one section from the next. */

/* ── Provider logo row: one uniform dark strip ──────────────────────────────
   The kit mixes white artwork with dark artwork. The dark ones used to sit on a cream plate
   so their outlines would read, which left a few light rectangles in an otherwise dark row.
   They now get the same dark plate and the artwork is flipped to a white silhouette.
   The plate lives on the wrapper, NOT on the <img>: a CSS filter paints the element's own
   background too, so filtering the image directly would turn its plate white as well. */
.mp-logo-row .mp-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-bg-2); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-sm, 8px); padding: 10px 14px;
}
.mp-logo-row .mp-logo-chip img.mp-logo--on-light {
  background: none; border: 0; padding: 0;
  filter: brightness(0) invert(1); opacity: .92;
}
@media (max-width: 560px) {
  .mp-logo-row .mp-logo-chip { padding: 8px 10px; }
}

/* ── Block rhythm inside .mp-prose ──────────────────────────────────────────
   .mp-prose restores heading margins for its DIRECT children only, and the theme zeroes
   h1..h4 globally. So a heading nested in a card or an FAQ item rendered flush against the
   text below it, and .mp-grid carried no margin at all — the "no spacing" report. These are
   descendant rules on purpose. */
.mp-prose .mp-grid,
.mp-prose .mp-card-grid,
.mp-prose .mp-logo-row,
.mp-prose .mp-table-wrap,
.mp-prose .mp-callout,
.mp-prose .mp-steps { margin: var(--mp-s-5) 0; }

.mp-prose .mp-card h3,
.mp-prose .mp-card h4,
.mp-prose .mp-faq h3,
.mp-prose .mp-faq h4 { margin-bottom: var(--mp-s-4); line-height: 1.25; }

.mp-prose .mp-card > :first-child,
.mp-prose .mp-faq  > :first-child { margin-top: 0; }

.mp-prose .mp-card li,
.mp-prose .mp-faq li { margin: 10px 0; }

.mp-prose .mp-card p + h3,
.mp-prose .mp-card ul + h3 { margin-top: var(--mp-s-5); }

/* The FAQ section is <section class="wrap mp-faq">, a SIBLING of the .mp-prose sections —
   not nested inside one. So the rules above never reached it and its questions stayed flush
   against their answers. Scope these to .mp-faq directly. */
.mp-faq h3, .mp-faq h4 { margin-bottom: var(--mp-s-4); line-height: 1.25; }
.mp-faq li { margin: 10px 0; }
.mp-faq > :first-child { margin-top: 0; }

/* ── Classes the page builders were told to use but the theme never defined ──
   `.mp-grid` rendered as display:block, so the card stacks had a zero gap — that was the
   "no space between blocks" report. `.mp-pros` / `.mp-cons` (42 uses) and `.mp-note`
   (46 uses) had no rules at all. Listing a class in the build brief does not create it. */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--mp-s-5);
  align-items: start;
}
.mp-grid > * { margin: 0; }

/* Pros / cons: same card shell, an accent edge and a marker per item. */
.mp-pros, .mp-cons { border-left: 3px solid var(--mp-line, rgba(18,18,18,0.12)); }
.mp-pros { border-left-color: var(--mp-pos); }
.mp-cons { border-left-color: var(--mp-neg); }
.mp-pros > ul, .mp-cons > ul { list-style: none; padding-left: 0; }
.mp-pros > ul > li, .mp-cons > ul > li { position: relative; padding-left: 1.6rem; }
.mp-pros > ul > li::before,
.mp-cons > ul > li::before {
  position: absolute; left: 0; top: 0; font-weight: 700; line-height: inherit;
}
.mp-pros > ul > li::before { content: "+"; color: var(--mp-pos); }
.mp-cons > ul > li::before { content: "\2212"; color: var(--mp-neg); }

/* A flagged aside: source conflicts, hedges, "à confirmer" notes. */
.mp-note {
  margin: var(--mp-s-5) 0;
  padding: var(--mp-s-4) var(--mp-s-5);
  border-left: 3px solid var(--mp-amber);
  border-radius: var(--mp-radius-sm, 8px);
  background: rgba(255, 210, 63, 0.06);
  color: var(--mp-ink-2);
  font-size: var(--mp-t-sm);
}
.mp-note > :first-child { margin-top: 0; }
.mp-note > :last-child  { margin-bottom: 0; }

/* Byline / freshness line, and a standalone CTA paragraph. */
.mp-meta { color: var(--mp-ink-3); font-size: var(--mp-t-sm); margin-bottom: var(--mp-s-5); }
.mp-cta-line { margin: var(--mp-s-5) 0; }

/* ==========================================================================
   HugeWin GR — post-review fixes (2026-08-05)
   ========================================================================== */

/* 1. The brand mark. The supplied file was a 115x115 canvas holding a 93x21 wordmark in dark
   navy — 92% transparent margin, and the word itself the colour of the background. A white
   plate fixed the contrast but read as a box inside a box. The asset is now cropped to the
   wordmark and its dark strokes recoloured to cream (the gold accent kept), so it sits
   directly on the emblem like a normal lockup — no plate, no filter. A filter was never an
   option: `brightness(0) invert(1)` renders the alpha silhouette, which is how the emberBet
   provider logos were lost. */
.mp-head3-emblem img { width: 34px; height: 34px; filter: none; background: none; padding: 0; }
.mp-head3-emblem { padding: 9px 18px; gap: 11px; }
.mp-head3-emblem-title { font-size: 1.25rem; }
.mp-head3-emblem-tag { font-size: 0.625rem; letter-spacing: 0.16em; }
@media (max-width: 860px) {
  .mp-head3-emblem img { width: 28px; height: 28px; }
  .mp-head3-emblem { padding: 8px 14px; gap: 9px; }
  .mp-head3-emblem-title { font-size: 1.05rem; }
  .mp-head3-emblem-tag { font-size: 0.5625rem; }
}
.mp-foot .mp-brand-line img { width: 30px; height: 30px; filter: none; background: none; padding: 0; }

/* 2. The footer disclaimer box is a flex row, so its three paragraphs became three
   ~90px columns on a phone. Below the desktop breakpoint it stacks; the 21+ badge
   floats so the text still wraps beside it instead of eating a whole row. */
@media (max-width: 900px) {
  .mp-foot-disclaimer-box { display: block; }
  .mp-foot-disclaimer-box > p { margin: 0 0 0.7rem; }
  .mp-foot-disclaimer-box > p:last-child { margin-bottom: 0; }
  .mp-foot-age-mark { float: left; margin: 2px 10px 6px 0; }
}

/* 3. The sticky offer bar (z-index 90, ~64px tall) sat on top of the consent banner
   (z-index 70, bottom 1rem), so the Accept/Decline buttons were unreachable on mobile —
   the one control that must never be covered. Lift the banner clear of it. */
@media (max-width: 640px) {
  .mp-cookie { bottom: calc(64px + 0.75rem); z-index: 95; }
}

/* 4. Game tiles were 300px wide with a forced 3/4 portrait crop, so a 200x148 table
   screenshot was upscaled to 300x398 — blurry, badly cropped and a wall of images.
   Most of this kit's artwork is landscape, so the tiles get a 4/3 box and a smaller
   track: six per row instead of three, at the source's own resolution. */
.mp-tile-grid, .mp-pokie-grid, .mp-live-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 190px));
  gap: var(--mp-s-3);
}
.mp-tile img, .mp-pokie-tile img { aspect-ratio: 4 / 3; }
.mp-tile-cap, .mp-tile figcaption, .mp-pokie-name { padding: 6px 8px; font-size: 0.75rem; }
@media (max-width: 560px) {
  .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .mp-tile-grid, .mp-pokie-grid, .mp-live-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Wintino RS — kit-specific overrides
   ========================================================================== */

/* The brand mark here is a 430x112 WORDMARK (gold on transparent), not a square badge, so the
   emblem sizing inherited from the previous land — which was tuned for a 34px round disc —
   would squash it. Width-driven instead, and no accompanying title text: the wordmark already
   says the name. */
.mp-head3-emblem img { width: auto; height: 30px; filter: none; background: none; padding: 0; }
.mp-head3-emblem { padding: 9px 18px; gap: 12px; }
.mp-head3-emblem-tag { font-size: 0.625rem; letter-spacing: 0.16em; }
@media (max-width: 860px) {
  .mp-head3-emblem img { width: auto; height: 24px; }
  .mp-head3-emblem { padding: 8px 14px; gap: 9px; }
  .mp-head3-emblem-tag { font-size: 0.5625rem; }
}
.mp-foot .mp-brand-line img { width: auto; height: 26px; filter: none; background: none; padding: 0; }

/* Every game asset in this kit is a transparent LOGO wordmark, not box art. `object-fit: cover`
   — the fleet default — would crop the game's own name off its tile. Contain them on a card
   instead, with padding so the artwork breathes. */
.mp-tile img, .mp-pokie-tile img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 10px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(236,31,39,0.10), transparent 70%),
              linear-gradient(180deg, var(--mp-bg-2), var(--mp-bg-1));
}

/* Game logos are wordmarks with heavy black outlines: roughly half of this kit has a dark-pixel
   share above 35%, and on the dark tile card those strokes merge into the background. Each tile
   image therefore carries the `plate` class from the alt map, exactly like a payment logo —
   `mp-logo--on-light` means "dark artwork, needs a light card". */
.mp-tile img.mp-logo--on-light, .mp-pokie-tile img.mp-logo--on-light {
  background: linear-gradient(180deg, #efedf7, #e4e1f0);
}
.mp-tile img.mp-logo--on-dark, .mp-pokie-tile img.mp-logo--on-dark {
  background: radial-gradient(120% 100% at 50% 0%, rgba(236,31,39,0.12), transparent 70%),
              linear-gradient(180deg, var(--mp-bg-2), var(--mp-bg-1));
}


/* ==========================================================================
   GOLISIMO HR — build overrides (appended last on purpose)
   ========================================================================== */
:root{
  /* the logo is a flame wordmark; keep that heat available without letting it become the accent */
  --mp-flame:      #5b21b6;
  --mp-flame-glow: rgba(249,115,22,0.38);
}

/* Header brand mark: a wide wordmark, not a square badge. No filter -- the artwork is a light
   flame-orange lockup on transparent, so it needs the dark plate the header already provides. */
.mp-head3-emblem img{width:auto;height:32px;filter:none;background:none;padding:0}
@media (max-width:600px){.mp-head3-emblem img{height:26px}}

/* Game tiles are real 2:3 lobby covers here (sliced out of the operator's own strips), so they
   crop with `cover` -- unlike wintino, whose tiles were transparent wordmarks needing `contain`. */
.mp-tile img,.mp-pokie-tile img{aspect-ratio:1/1;object-fit:cover;padding:0;background:#f7f6fb}
.mp-tile-grid{grid-template-columns:repeat(auto-fill,minmax(140px,200px));gap:var(--mp-s-3)}
@media (max-width:560px){.mp-tile-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:380px){.mp-tile-grid{grid-template-columns:repeat(2,1fr)}}

/* Payment / crypto / provider marks: half the kit is white artwork and half is black, so the
   plate class from _media_alt_map.json decides the ground. See _scripts/check_plates.py. */
.mp-logo-row img{object-fit:contain;border-radius:8px;padding:7px 12px}
.mp-logo-row img.mp-logo--on-light{background:linear-gradient(180deg,#ffffff,#f7f6fb)}
.mp-logo-row img.mp-logo--on-dark{background:linear-gradient(180deg,#efedf7,#ffffff);
  border:1px solid rgba(236,31,39,0.22)}

/* Footer disclaimer is a flex row of three paragraphs -- on a phone that collapses into three
   cramped columns (the HugeWin bug). Stack it. */
@media (max-width:900px){
  .mp-foot-disclaimer-box{display:block}
  .mp-foot-age-mark{float:left;margin:2px 10px 6px 0}
}
/* The sticky offer bar (z90, ~64px tall) sat on top of the consent banner (z70). */
@media (max-width:640px){.mp-cookie{bottom:calc(64px + 0.75rem);z-index:95}}

/* ==========================================================================
   TAB66 NEPAL — light-theme corrections
   Everything above was authored for a dark ground and mechanically inverted. These rules fix the
   handful of places where inversion alone is not enough.
   ========================================================================== */
:root{
  /* Devanagari first: most Nepali readers are on Android, which ships Noto Sans Devanagari.
     No webfont is loaded — this market is bandwidth-constrained (TZ section 8) and a 120 kB
     Devanagari face would cost more LCP than the typography buys. */
  --mp-font-body:    'Noto Sans Devanagari', 'Mangal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-font-display: 'Noto Sans Devanagari', 'Mangal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-font-mono:    ui-monospace, SFMono-Regular, 'Segoe UI Mono', monospace;

  --mp-link:  #5b21b6;   /* TZ section 3: links are blue, not orange — orange is reserved for CTA */
  --mp-link-2:#34489b;
  --mp-line:  #e2e0ec;
}

/* Orange at #ec1f27 on cream is ~2.6:1 — fine for a filled button, unreadable as link text. */
a{color:var(--mp-link)}
a:hover{color:var(--mp-link-2)}
.mp-sect-link,.mp-crumb a,.mp-foot a{color:var(--mp-link)}
.mp-btn a,.mp-btn-primary,.mp-nav-cta,.mp-bottom-cta a{color:#fff}

/* TZ section 3: pill CTAs, radius 9999px. Cards keep their soft 10px. */
.mp-btn,.mp-nav-cta,.mp-bottom-cta a,.mp-btn-ghost{border-radius:9999px}
.mp-btn-primary{background:linear-gradient(135deg,#d81420,#b00d18);color:#fff;border-color:#b00d18;
  box-shadow:0 6px 16px rgba(236,31,39,.26)}
.mp-btn-primary:hover{background:linear-gradient(135deg,#ec1f27,#d81420);box-shadow:0 8px 22px rgba(236,31,39,.34)}
.mp-btn-ghost{color:#c2101c;border-color:#ec1f27;background:#fff}
.mp-btn-ghost:hover{background:#f7f6fb;color:#c2101c}

/* Cards are white on cream — the inherited translucent fills read as dirty smudges. */
.mp-card,.mp-stat,.mp-tile,.mp-pokie-tile,.mp-faq,.mp-note,.mp-pros,.mp-cons,.mp-cta-block{
  background:#fff;border:1px solid #e2e0ec}
.mp-sect-tinted{background:linear-gradient(180deg,#f7f6fb,#fbfaff)}
.mp-sect-card{background:#efedf7}
.mp-sect-h{background:linear-gradient(180deg,#fbfaff,#f7f6fb)}

/* Header/footer: the emblem glow and stripe veil were built to sit on black. */
.mp-head3,.mp-head3-banner{background:#fff}
.mp-head3-veil{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(247,246,251,.85))}
.mp-head3-emblem{box-shadow:0 6px 18px rgba(120,72,20,.12)}
.mp-head3-emblem:hover{box-shadow:0 10px 24px rgba(120,72,20,.18)}
.mp-head3-emblem img{filter:none}
.mp-foot{background:#efedf7;border-top:1px solid #e2e0ec;color:#343a40}

/* Logo plates invert on a light page: DARK artwork needs no chip, LIGHT artwork needs a dark one. */
.mp-logo-row img{object-fit:contain;border-radius:8px;padding:7px 12px}
.mp-logo-row img.mp-logo--on-light{background:#fff;border:1px solid #e2e0ec}
.mp-logo-row img.mp-logo--on-dark{background:linear-gradient(180deg,#2a2320,#191412);border:1px solid #2a2320}

/* Game tiles are real cover art, not transparent wordmarks. */
.mp-tile img,.mp-pokie-tile img{aspect-ratio:1/1;object-fit:cover;padding:0;background:#f7f6fb}

/* .mp-note is an advisory, not brand chrome — amber ink on a pale amber wash. */
.mp-note{background:#f6f2fd;border:1px solid #ded0f5;color:#41156f}
.mp-note strong{color:#41156f}

/* Semantic columns */
.mp-pros{border-left:3px solid #1e8e5a}
.mp-cons{border-left:3px solid #8c2f22}

/* Tables */
.mp-table thead th{background:#f7f6fb;color:#1f242b;border-bottom:2px solid #ddd2f3}
.mp-table tbody tr:hover td{background:#fbfaff}
.mp-table td,.mp-table th{border-color:#e2e0ec}

/* Cookie banner must clear the mobile sticky CTA, not sit under it. */
.mp-cookie{background:#fff;border:1px solid #e2e0ec;color:#343a40;
  box-shadow:0 10px 34px rgba(120,72,20,.16);bottom:calc(64px + 0.75rem);z-index:95}
@media (min-width:900px){.mp-cookie{bottom:1rem}}

/* The access-link widget: green dot = checked, on a white strip. */
.mp-linkbar{background:linear-gradient(180deg,#efedf7,#f7f6fb);border-bottom:1px solid #e2e0ec;color:#343a40}
.mp-linkbar-dot{background:#1e8e5a;box-shadow:0 0 0 3px rgba(30,142,90,.18)}

/* Devanagari sits lower and taller than Latin; the display line-height clips matras. */
h1,h2,h3,h4{line-height:1.28}
.mp-sect-h2{line-height:1.3}
body{line-height:1.75}

/* RG / about / legal pages carry no offer chrome at all. */
.mp-rg .mp-nav-cta,.mp-rg .mp-linkbar,.mp-rg .mp-bottom-cta,.mp-rg .mp-offer-bar{display:none!important}

@media (max-width:720px){
  .mp-foot{display:block}
}

/* --- mobile nav, final word -------------------------------------------------
   The base theme drives the mobile menu with a checkbox hack and collapses
   `.mp-nav-links` to `max-height:0` under 860px. This land's chrome uses a real
   <button aria-expanded> that toggles `.is-open`, and an earlier override for it
   sits in the middle of this file where later `.mp-nav-links` declarations were
   still winning in practice — measured on a 375px viewport, the menu stayed 0px
   tall with `.is-open` applied, i.e. the nav was unreachable on every phone in a
   mobile-first market. This block is last and explicit so it cannot lose again. */
@media (max-width: 860px) {
  /* The collapsed menu is driven by `display`, not `max-height`. Three earlier rules in this
     file set max-height on this element and the collapsed 0px kept winning in the live
     cascade even against an id-anchored `!important` — rather than keep escalating a
     specificity fight, the open/closed state now uses a property nothing else touches. */
  #mp-nav {
    display: none;
    max-height: none;
    overflow: visible;
  }
  #mp-nav.is-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: var(--mp-s-3);
    padding-bottom: var(--mp-s-2);
  }
  #mp-nav.is-open a {
    display: block;
    padding: 10px 2px;
    border-bottom: 1px solid var(--mp-border);
    font-size: 0.875rem;
  }
}

/* --- never upscale a raster past its intrinsic size -------------------------
   `.mp-figure > img`, `.mp-media-block > img` and `.mp-section-art` all carried
   `width:100%` with a 420-520px cap. That is right for the 1200px SVG heroes and
   wrong for the kit's small icons (128-207px), which got blown up to ~520px and
   rendered visibly soft. `width:auto` lets each image sit at its own intrinsic
   width; the cap still holds the big art down. Small art is centred rather than
   stretched. */
.mp-figure > img,
.mp-media-block > img,
.mp-prose > img,
.mp-section-art,
.mp-prose > .mp-section-art,
.mp-prose > p > .mp-section-art,
.mp-figure > .mp-section-art {
  width: auto;
  max-width: min(100%, 460px);
  height: auto;
  margin-inline: auto;
}
/* the wide operator banners and the 1200x675 heroes still want the full column */
.mp-figure > .mp-theme-band,
.mp-figure > img[width="1200"],
.mp-figure > img[width="1298"], .mp-figure > img[width="1284"],
.mp-figure > img[width="1271"], .mp-figure > img[width="1350"],
.mp-figure > img[width="1364"], .mp-figure > img[width="1377"],
.mp-figure > img[width="847"],  .mp-figure > img[width="821"],
.mp-figure > img[width="709"],  .mp-figure > img[width="698"],
.mp-figure > img[width="660"],  .mp-figure > img[width="602"],
.mp-figure > img[width="596"],  .mp-figure > img[width="576"] {
  width: 100%;
  max-width: min(100%, 720px);
}

/* The row is a 6-column grid, so in a ~600px prose column each cell is ~100px and the
   200x64 method plates were squeezed to 87x34 — the wordmark inside them became
   unreadable. Widen the track instead of fighting the height: auto-fit at 140px min
   lets each plate render near its intrinsic size and reflows to fewer columns when
   the container is narrow. */
.mp-logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  justify-items: center; align-items: center;
  gap: 20px 24px;
}
.mp-logo-row img { height: auto; width: auto; max-width: 100%; max-height: 54px; }
.mp-logo-row img.mp-logo--on-dark,
.mp-logo-row img.mp-logo--on-light {
  height: auto !important; max-height: 34px;
  padding: 9px 14px; box-sizing: content-box;
}
@media (max-width: 560px) {
  .mp-logo-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px 16px; }
  .mp-logo-row img { max-height: 42px; }
  .mp-logo-row img.mp-logo--on-dark,
  .mp-logo-row img.mp-logo--on-light { max-height: 26px; padding: 7px 10px; }
}

/* --- white line-art on a cream ground ---------------------------------------
   Ten of the kit's decorative icons are white strokes on transparency, drawn for a
   dark UI and invisible here. Nine were re-tinted to the deep brand orange in the
   asset itself (see scratchpad/winmasters_tint.py). The tenth, `winmasters-fast-game-wings`,
   is DreamGaming's own brand mark — a third-party logo must keep its real colours,
   so it gets a dark plate under it instead of being re-hued. */
img[src$="winmasters-fast-game-wings.webp"] {
  background: linear-gradient(180deg, #2a2320, #191412);
  border: 1px solid #2a2320;
  border-radius: var(--mp-radius);
  padding: 12px 16px;
  box-sizing: content-box;
}

/* Provider cards from the operator kit are portrait 213x308, not the square game covers the
   `.mp-tile img` ratio above assumes. Same grid, taller cell. */
.mp-tile-grid--tall .mp-tile img { aspect-ratio: 213 / 308; }

/* FIX: decorative banner overlays must not eat clicks on the link-widget button */
.mp-head3-stripes,.mp-head3-veil{pointer-events:none}
.mp-promo-chip,.mp-linkwidget{position:relative;z-index:2}


/*
Casino lobby shell — third layout family for lands.
Prefix: mp-lb-*   ·   Load AFTER the land's theme.css.

Идея взята с examples/rubyonreels.com: «витрина казино» сверху (шапка → баннер оффера → рейка
категорий → сетки игр с обложками → логотипы) и SEO-лонгрид под ней. Это НЕ копия: см. README.

Всё цветное — через токены на :root ленда (--mp-*) плюс восемь --lb-* ниже. Перекраска семейства =
восемь строк, а не 253 литерала, как в референсе.
*/

:root {
  --lb-brand:        var(--mp-brand);          /* акцент: чипы, кнопки, заголовки секций   */
  --lb-brand-deep:   var(--mp-brand-deep);     /* нижняя точка градиента кнопки            */
  --lb-brand-ink:    var(--mp-brand-ink);      /* текст НА акценте                         */
  --lb-gold:         var(--mp-amber);          /* второй акцент: рамка оффера, таймер      */
  --lb-chip:         var(--mp-bg-2);           /* неактивный чип рейки                     */
  --lb-chip-ink:     var(--mp-ink-2);
  --lb-surface:      var(--mp-bg-card);
  --lb-top-h:        62px;                     /* высота липкой шапки — от неё scroll-margin */
}

/* ==========================================================================
   1. TOPBAR — логотип · навигация · CTA
   Навигация на телефоне НЕ превращается в выдвижное меню: она становится
   горизонтальной рейкой. Тогглить нечего, значит нечему и сломаться (FIX-44).
   ========================================================================== */
.mp-lb-top {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--mp-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mp-border);
}
.mp-lb-top-in {
  max-width: var(--mp-max-w); margin: 0 auto;
  display: flex; align-items: center; gap: var(--mp-s-4);
  padding: 10px var(--mp-s-4); min-height: var(--lb-top-h);
}
.mp-lb-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mp-lb-logo img { height: 30px; width: auto; }
.mp-lb-logo b {
  font-family: var(--mp-font-display); font-size: 1.05rem; letter-spacing: -0.02em;
  color: var(--mp-ink); white-space: nowrap;
}
.mp-lb-nav {
  display: flex; gap: 2px; align-items: center;
  margin-left: auto; overflow-x: auto; scrollbar-width: none;
}
.mp-lb-nav::-webkit-scrollbar { display: none; }
.mp-lb-nav a {
  padding: 8px 11px; border-radius: var(--mp-radius); white-space: nowrap;
  font-size: var(--mp-t-sm); color: var(--mp-ink-2);
}
.mp-lb-nav a:hover, .mp-lb-nav a:focus-visible { color: var(--mp-ink); background: var(--mp-bg-2); }
.mp-lb-lang { display: flex; gap: 4px; flex-shrink: 0; }
.mp-lb-lang a {
  font-size: var(--mp-t-xs); font-weight: 700; letter-spacing: 0.04em;
  padding: 6px 9px; border-radius: var(--mp-radius); border: 1px solid var(--mp-border);
  color: var(--mp-ink-3);
}
.mp-lb-lang a.is-on { color: var(--lb-brand-ink); background: var(--lb-brand); border-color: transparent; }
.mp-lb-top-cta { flex-shrink: 0; }

@media (max-width: 900px) {
  /* Две строки, не три: логотип + языки + CTA обязаны поместиться в одну.
     На 375px это 105 + 81 + ~120 плюс два зазора — поэтому зазор ужимается,
     а словесная марка рядом с логотипом уходит: три строки липкой шапки съедали
     161px из 812 (пятую часть экрана). */
  .mp-lb-top-in { flex-wrap: wrap; row-gap: 8px; gap: 10px; }
  .mp-lb-nav { order: 3; width: 100%; margin-left: 0; }
  .mp-lb-lang { margin-left: auto; }
  /* .mp-lb-top .… — а не голый класс: .mp-lb-btn описан НИЖЕ по файлу (секция 2),
     при равной специфичности выигрывает он, и медиазапрос молча ничего не делает. */
  .mp-lb-top .mp-lb-top-cta { font-size: var(--mp-t-sm); padding: 9px 14px; }
}
@media (max-width: 700px) {
  .mp-lb-logo b { display: none; }
  /* 105 (лого) + 81 (языки) + кнопка + два зазора по 10 обязаны уложиться в 343px
     на 375-м экране; при 15px в кнопке она весила 146 и уезжала на третью строку. */
  .mp-lb-top .mp-lb-top-cta { font-size: var(--mp-t-xs); padding: 9px 12px; }
}

/* ==========================================================================
   2. HERO — оффер слева, арт справа
   ========================================================================== */
.mp-lb-hero { background: var(--mp-grad-hero); border-bottom: 1px solid var(--mp-border); }
.mp-lb-hero-in {
  max-width: var(--mp-max-w); margin: 0 auto; padding: var(--mp-s-7) var(--mp-s-4);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--mp-s-6); align-items: center;
}
.mp-lb-eyebrow {
  font-family: var(--mp-font-display); font-style: italic; font-weight: 700;
  color: var(--lb-gold); margin: 0 0 6px; font-size: 1.1rem;
}
.mp-lb-hero h1 { font-size: var(--mp-t-display); font-style: italic; }
.mp-lb-hero-sub { margin: var(--mp-s-4) 0 0; color: var(--mp-ink-2); max-width: 56ch; }
.mp-lb-hero-art img { width: 100%; height: auto; border-radius: var(--mp-radius-lg); }
.mp-lb-hero-btns { display: flex; flex-wrap: wrap; gap: var(--mp-s-3); margin-top: var(--mp-s-5); }

/* Кнопка семейства: скруглена по диагонали — узнаваемая форма, как в референсе */
.mp-lb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; font-weight: 700; font-size: var(--mp-t-sm);
  color: var(--lb-brand-ink); background: linear-gradient(135deg, var(--lb-brand), var(--lb-brand-deep));
  border: 0; border-radius: 24px 4px 24px 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim);
}
.mp-lb-btn:hover { color: var(--lb-brand-ink); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,0.45); }
.mp-lb-btn-ghost {
  background: none; color: var(--mp-ink); border: 1px solid var(--mp-border-strong); box-shadow: none;
}
.mp-lb-btn-ghost:hover { color: var(--mp-ink); background: var(--mp-bg-2); }

/* Плашка рейтинга/фактов под оффером */
.mp-lb-facts { display: flex; flex-wrap: wrap; gap: var(--mp-s-2); margin-top: var(--mp-s-5); }
.mp-lb-fact {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--mp-radius-pill);
  background: var(--mp-bg-2); border: 1px solid var(--mp-border);
  font-size: var(--mp-t-xs); color: var(--mp-ink-2); font-weight: 600;
}
.mp-lb-fact b { color: var(--mp-ink); }

@media (max-width: 860px) {
  .mp-lb-hero-in { grid-template-columns: 1fr; padding: var(--mp-s-6) var(--mp-s-4); }
  .mp-lb-hero-art { order: -1; max-width: 360px; }
}

/* ==========================================================================
   3. RAIL — рейка категорий (чипы), горизонтальный скролл со snap
   ========================================================================== */
.mp-lb-rail {
  max-width: var(--mp-max-w); margin: 0 auto; padding: var(--mp-s-4);
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.mp-lb-rail::-webkit-scrollbar { height: 6px; }
.mp-lb-rail::-webkit-scrollbar-thumb { background: var(--mp-bg-3); border-radius: 3px; }
.mp-lb-rail a {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; scroll-snap-align: start;
  padding: 11px 18px; border-radius: var(--mp-radius);
  background: var(--lb-chip); color: var(--lb-chip-ink);
  font-size: var(--mp-t-sm); font-weight: 600;
  border: 1px solid var(--mp-border);
}
.mp-lb-rail a:hover { color: var(--mp-ink); border-color: var(--mp-border-strong); }
.mp-lb-rail a.is-on {
  background: var(--lb-brand); color: var(--lb-brand-ink); border-color: transparent;
}
.mp-lb-rail svg { width: 17px; height: 17px; }

/* ==========================================================================
   4. SECTION — заголовок + «все» + сетка карточек игр
   ========================================================================== */
.mp-lb-sect { max-width: var(--mp-max-w); margin: 0 auto; padding: var(--mp-s-5) var(--mp-s-4); }
.mp-lb-sect > h2, .mp-lb-sect > h3 { scroll-margin-top: calc(var(--lb-top-h) + 12px); }
.mp-lb-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--mp-s-4); margin-bottom: var(--mp-s-4);
}
.mp-lb-head h2 {
  font-size: 1.375rem; font-weight: 700; color: var(--lb-brand);
  font-family: var(--mp-font-display);
}
.mp-lb-all {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 15px; border-radius: var(--mp-radius);
  background: var(--mp-bg-2); border: 1px solid var(--mp-border);
  color: var(--mp-ink-2); font-size: var(--mp-t-sm); font-weight: 600;
}
.mp-lb-all:hover { color: var(--mp-ink); background: var(--mp-bg-3); }

.mp-lb-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mp-s-3);
}
@media (max-width: 1080px) { .mp-lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .mp-lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .mp-lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Карточка игры: обложка на всю площадь, подпись поверх градиента.
   Это ССЫЛКА на /go/, а не инертная <figure> (правило 7 скила). */
.mp-lb-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--lb-surface); color: #fff; isolation: isolate;
}
.mp-lb-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  transition: transform 300ms ease;
}
.mp-lb-card:hover img { transform: scale(1.06); }
.mp-lb-card:hover { color: #fff; }
.mp-lb-cardinfo {
  /* и заголовок, и подпись часто приезжают <span>-ами внутри ссылки-карточки —
     без display:block они остаются строчными и padding не работает */
  display: block;
  position: relative; z-index: 2; padding: 22px 12px 11px;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}
.mp-lb-cardtitle { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; margin: 0 0 3px; color: #fff; }
.mp-lb-cardsub { display: block; font-size: 0.75rem; margin: 0; color: rgba(255,255,255,0.86); }
.mp-lb-flag {
  position: absolute; top: 0; right: 0; z-index: 3;
  padding: 4px 9px; border-bottom-left-radius: 9px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--lb-gold); color: #1a1206;
}
.mp-lb-flag--hot { background: var(--lb-brand); color: var(--lb-brand-ink); }

/* --------------------------------------------------------------------------
   SPECS — короткая сводка фактов внутри лонгрида.
   Пришло на смену .mp-trust-strip базового кита: тот рисовал эмодзи в круглых
   плашках и жёстко в 4 колонки, из-за чего пятое значение висело сиротой.
   Здесь <dl>: семантика «характеристика → значение», сетка считается от
   количества, никаких эмодзи.
   -------------------------------------------------------------------------- */
.mp-lb-specs {
  /* Ровно три колонки: значений шесть, и auto-fit давал 4 + 2 — снова рваный
     хвост. Сетка подбирается под КОЛИЧЕСТВО значений, а не наоборот. */
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: var(--mp-s-5) 0; padding: 0;
  background: var(--mp-border);              /* просветы решётки = 1px фон */
  border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg);
  overflow: hidden;
}
.mp-lb-specs > div {
  background: var(--lb-surface); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.mp-lb-specs dt {
  font-family: var(--mp-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mp-ink-3); font-weight: 600;
}
.mp-lb-specs dd {
  margin: 0; font-family: var(--mp-font-display); font-weight: 700;
  font-size: 1.0625rem; color: var(--mp-ink); line-height: 1.2;
}
.mp-lb-specs dd small { display: block; font-family: var(--mp-font-body); font-weight: 500;
  font-size: 0.75rem; color: var(--mp-ink-3); margin-top: 2px; }
@media (max-width: 720px) { .mp-lb-specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .mp-lb-specs { grid-template-columns: 1fr; } }


/* ==========================================================================
   5. PROMO — акция/турнир с таймером
   ========================================================================== */
.mp-lb-promo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mp-s-5);
  align-items: center; padding: var(--mp-s-5);
  border-radius: var(--mp-radius-lg);
  background: var(--mp-grad-bleed);
  border: 1px solid var(--lb-gold);
}
.mp-lb-promo h3 { margin: 0 0 8px; }
.mp-lb-promo p { margin: 0; color: var(--mp-ink-2); }
/* Блок терпить і «голі» діти (h3 + p + кнопка без обгортки): текст лишається в лівій
   колонці, а кнопка/таймер їдуть у праву. Без цього h3 потрапляв у 1fr-колонку поруч із
   p в auto-колонці, стискався до ширини літери й розсипався в вертикальний стовпчик. */
.mp-lb-promo > h3, .mp-lb-promo > p { grid-column: 1; }
/* Шаблонний контракт — промо лежить у <section class="mp-lb-sect">, який і дає max-width.
   Коли ленд робить промо самостійною секцією, обмежувати ширину нема кому й блок їде на всю
   ширину вікна, тоді як решта сторінки центрована. Селектор по тегу б'є тільки в цьому випадку:
   всередині .mp-lb-sect промо — <div>. */
section.mp-lb-promo { max-width: calc(var(--mp-max-w) - 2 * var(--mp-s-4)); width: calc(100% - 2 * var(--mp-s-4)); margin-inline: auto; }
.mp-lb-timer { display: flex; gap: 10px; }
.mp-lb-timerbox {
  min-width: 74px; padding: 11px 14px; text-align: center;
  background: rgba(0,0,0,0.45); border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border);
}
.mp-lb-timernum {
  font-family: var(--mp-font-mono); font-size: 1.35rem; font-weight: 700;
  color: var(--mp-ink); line-height: 1.1;
}
.mp-lb-timerlab { font-size: var(--mp-t-xs); color: var(--mp-ink-3); }
@media (max-width: 760px) {
  .mp-lb-promo { grid-template-columns: 1fr; }
  .mp-lb-timerbox { min-width: 62px; padding: 8px; }
  .mp-lb-timernum { font-size: 1.1rem; }
}

/* ==========================================================================
   6. LONGREAD — SEO-текст под витриной
   ========================================================================== */
.mp-lb-read { background: var(--mp-bg-1); border-top: 1px solid var(--mp-border); }
.mp-lb-read-in { max-width: 880px; margin: 0 auto; padding: var(--mp-s-7) var(--mp-s-4); }
.mp-lb-read-in h1, .mp-lb-read-in h2, .mp-lb-read-in h3 {
  scroll-margin-top: calc(var(--lb-top-h) + 12px);
}
.mp-lb-read-in h2 { margin: var(--mp-s-7) 0 var(--mp-s-3); }
.mp-lb-read-in h3 { margin: var(--mp-s-5) 0 var(--mp-s-2); }
.mp-lb-read-in > p, .mp-lb-read-in > ul, .mp-lb-read-in > ol { max-width: 72ch; }

/* ==========================================================================
   7. FAQ — <details>, а не JS-аккордеон: раскрывается без скриптов и печатается
   ========================================================================== */
.mp-lb-faq { display: grid; gap: 12px; }
.mp-lb-q {
  background: var(--lb-surface); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius); overflow: hidden;
}
.mp-lb-q > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 17px 52px 17px 18px;
  font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--mp-ink);
}
.mp-lb-q > summary::-webkit-details-marker { display: none; }
.mp-lb-q > summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; line-height: 1; color: var(--lb-brand);
}
.mp-lb-q[open] > summary::after { content: '\2212'; }
.mp-lb-q > div { padding: 0 18px 18px; color: var(--mp-ink-2); }
.mp-lb-q > div > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   8. STICKY CTA — на всех брейкпойнтах, но НИКОГДА на правовых страницах
   ========================================================================== */
.mp-lb-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: var(--mp-s-4);
  padding: 10px var(--mp-s-4);
  background: color-mix(in srgb, var(--mp-bg-1) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--lb-gold);
}
.mp-lb-sticky p { margin: 0; font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.mp-lb-sticky b { color: var(--mp-ink); }
.mp-lb-sticky .mp-lb-btn { margin-left: auto; flex-shrink: 0; }
body:has(.mp-lb-sticky) { padding-bottom: 70px; }
@media (max-width: 560px) {
  .mp-lb-sticky p { font-size: var(--mp-t-xs); }
  .mp-lb-sticky span { font-size: var(--mp-t-xs); }
  .mp-lb-sticky .mp-lb-btn { padding: 11px 16px; }
  /* 70 px vale enquanto o texto da barra couber numa linha. No telemóvel o texto do land
     enrola e a barra passa a 74 px — medido em winkey-pt a 375 px — pelo que os últimos 4 px
     do rodapé ficavam por baixo dela. A altura depende do TEXTO do land, coisa que a família
     não conhece; a folga é invisível (fica atrás de uma barra fixa) e custa zero. */
  body:has(.mp-lb-sticky) { padding-bottom: 88px; }
}

/* Правовые страницы (privacy/cookies/RG) помечаются классом .mp-rg на <body>.
   Оффер там не показывается — ни в шапке, ни липкой полосой, ни карточкой.
   Тот же промах уже ловили на sidebar-shell (FIX-61): правило жило в ленде,
   а не в семействе, и второй ленд уехал с живой кнопкой «забрать бонус». */
.mp-rg .mp-lb-sticky,
.mp-rg .mp-lb-top-cta,
.mp-rg .mp-lb-promo { display: none !important; }
.mp-rg:has(.mp-lb-sticky) { padding-bottom: 0; }

/* ==========================================================================
   9. СОВМЕСТИМОСТЬ С БАЗОВЫМ КИТОМ
   Секционные компоненты (.mp-inline-cta, .mp-trust-strip, .mp-prov-row…) живут
   в theme.css ленда и ничего не знают про эту оболочку. Два столкновения
   встречаются всегда — они здесь, чтобы следующий ленд их не переоткрывал.
   ========================================================================== */

/* Промо-карточка: в базовом ките она где-то получает display:flex с двумя
   колонками, из-за чего заголовок и подзаголовок встают В РЯД, а кнопка
   уезжает на отдельную строку. Карточка должна быть стопкой. */
.mp-lb-read-in .mp-inline-cta { display: block; }
.mp-lb-read-in .mp-inline-cta > .mp-btn { width: auto; display: inline-flex; }

/* Чорнило кнопки всередині лонгріду. Базовий кит фарбує посилання в прозі і САМ намагається
   вивести кнопки з-під правила:

       .mp-prose a:not([class*="mp-btn"]) { color: var(--mp-brand-light); … }

   Але виняток шукає підрядок `mp-btn`, а кнопка цієї родини зветься `mp-lb-btn` — підрядка
   `mp-btn` у ній НЕМАЄ. Тож захист не спрацьовує, а `.mp-prose a:not(…)` (0,2,0) б'є
   `.mp-lb-btn` (0,1,0): кожен CTA всередині `.mp-lb-read-in.mp-prose` виходить кольором
   `--mp-brand-light` замість `--lb-brand-ink`.

   Виміряно на winkey-pt: світла бузкова #c39cff на фіолетовій заливці #7800e4 дає 3,26:1 при
   потрібних 4,5 — і це на КОЖНІЙ кнопці лонгріду. На ленді зі світлою маркою напис зникав би
   зовсім. Знайдено 2026-08-28; станом на ту дату вражені ще sankra-ar (15 кнопок),
   yatri77-np (13), betmatch-gr (2), crashloot-ar (2), jugabet-pl (1).

   Правило живе ТУТ, а не в ленді: зіткнення між класом родини і винятком кита — властивість
   родини, і повторювати обхід у кожному ленді означало б чекати, поки хтось його забуде. */
.mp-prose a.mp-lb-btn,
.mp-prose a.mp-lb-all { color: var(--lb-brand-ink); border-bottom: 0; padding-bottom: 0; }
.mp-prose a.mp-lb-all { color: var(--mp-ink-2); }

/* Полоса фактов: жёсткие 4 колонки базового кита оставляют сиротскую строку,
   если значений пять. Сетка должна считаться от количества. */
.mp-lb-read-in .mp-trust-strip-inner {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 20px; padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mp-lb-card img, .mp-lb-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Готовые палитры (перекрасить = переопределить 8 токенов в :root ленда):

   rubin (starzbet-de):  --lb-brand #e5183b · deep #a5102b · gold #c5a059
   изумруд:              --lb-brand #17b978 · deep #0e8a58 · gold #d8b35a
   кобальт:              --lb-brand #2f6bff · deep #1c47c4 · gold #e0b64a
   -------------------------------------------------------------------------- */

/* ===== winmasters-fr components ===== */
/* ===== winmasters-fr components =====
   Appended to theme.css by _build/theme.py, AFTER the recoloured kit and the LOBBY shell, so
   every rule here wins on order at equal specificity. Anything that has to beat a
   HIGHER-specificity family rule says so on the line, with the selector it is beating.

   This is the fleet's second LIGHT land in the LOBBY family (after 1go-np), and most of what
   follows exists because the family was written for a dark ground. */

/* --------------------------------------------------------------------------------------------
   FIX-110, LIGHT SIDE. The recoloured kit's `.mp-btn-primary` gradient is pinned in
   recolour.py's LINES to the measured pair #d81420 -> #b00d18 (white ink 5.20 and 7.20:1),
   because the kit fills that button with the DECORATIVE brand and white on #ec1f27 is 4.38:1.
   These variables are the LOBBY shell's own copy of the same idea; they have to agree with it.
   -------------------------------------------------------------------------------------------- */
:root {
  --mp-cta-1: var(--mp-brand-deep);
  --mp-cta-2: #b00d18;
  --mp-grad-cta: linear-gradient(135deg, var(--mp-brand-deep) 0%, #b00d18 100%);
  --lb-brand: var(--mp-brand-deep);   /* section headings: 4.83:1, the logo red would be 4.08 */
}

/* FIX-92 — the anchor lives on the SECTION, not on its <h2>. The family only gives
   scroll-margin to `.mp-lb-sect > h2`; every id on this page sits on the section itself. */
.mp-lb-sect[id], .mp-lb-read[id], section[id] { scroll-margin-top: calc(var(--lb-top-h) + 14px); }

/* --------------------------------------------------------------------------------------------
   THE TILE GRID HOLDS TRANSPARENT WORDMARKS, NOT FULL-BLEED COVERS.
   Every game file in this pack is a logotype on transparency, 189-400 px wide and roughly 5:4.
   The family's card is 3/4 PORTRAIT with `object-fit: cover`, which on a wordmark crops the
   title out of the picture — the whole content of the file. That is FIX-109, and it shipped once
   on tikitaka-sg before anyone looked at a screenshot. Landscape card, `contain`, and a white
   plate the mark can sit on.
   -------------------------------------------------------------------------------------------- */
.mp-lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .mp-lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .mp-lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mp-lb-card {
  aspect-ratio: auto;                 /* the caption is text, not an overlay: let it size */
  background: var(--mp-bg-card);
  border: 1px solid var(--mp-border);
  display: grid; gap: 6px; padding: 14px 14px 12px; justify-items: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mp-lb-card:hover, .mp-lb-card:focus-visible {
  border-color: var(--mp-brand-deep); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31,36,43,0.10);
}
/* `.mp-lb-card img` in the shell is `position:absolute; inset:0; object-fit:cover` — a
   (0,1,1) selector, so a bare class cannot undo it. Answered at the same weight. */
.mp-lb-card img {
  position: static; inset: auto; width: 100%; height: 104px; object-fit: contain;
  transform: none;
}
.mp-lb-card:hover img { transform: none; }   /* the family scales the cover; a wordmark must not */

/* The caption is BELOW the mark, not over it: there is no artwork to lay text on. */
.mp-lb-cardinfo { position: static; background: none; padding: 0; text-align: center; }
.mp-lb-cardtitle { color: var(--mp-ink); font-size: 0.875rem; line-height: 1.25; }
.mp-lb-cardsub { color: var(--mp-ink-3); font-size: 0.75rem; }
.mp-lb-card:hover { color: inherit; }
.mp-lb-card:hover .mp-lb-cardtitle { color: var(--mp-brand-light); }

.mp-lb-eyebrow {
  display: block; margin-bottom: 4px; color: var(--mp-amber);   /* violet #5b21b6, 8.35:1 */
  font-size: var(--mp-t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
/* The family's section head is space-between because its second child is a «see all» link; this
   land puts an eyebrow there, and space-between threw the two to opposite ends of one line. */
.mp-lb-head { display: block; }

.mp-lb-flag { background: var(--mp-amber); color: #fff; }          /* violet fill, white 8.98:1 */
.mp-lb-flag--hot { background: var(--mp-brand-deep); color: #fff; } /* red fill, white 5.20:1 */

/* --------------------------------------------------------------------------------------------
   PAYMENT AND BRAND MARKS — THE PLATE IS PER MARK, AND IT IS A MEASUREMENT.
   prep.py rasterises every mark over both candidate plates and records which one it needs. Nine
   of the ten payment marks read best on white (8.68 to 21.00:1). ONE does not: `neteller` is the
   light-green variant drawn for dark backgrounds and reaches 2.05:1 on white against 7.63:1 on
   the ink. So the row is not styled once — each tile gets the class its own measurement asked
   for. The same trap as pay-eth.svg on yatri77-np and the Tether mark on lotogreen-review, and
   the third time it has appeared: a mark that is invisible while every automated check passes.
   -------------------------------------------------------------------------------------------- */
.wm-marks { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none;
            grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) { .wm-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .wm-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-marks li { display: grid; place-items: center; gap: 6px; min-height: 78px;
               padding: 12px 14px; border-radius: var(--mp-radius); }
.wm-marks img { max-width: 100%; height: 26px; width: auto; object-fit: contain; display: block; }
.wm-marks span { font-size: 0.6875rem; letter-spacing: 0.02em; }
.wm-chip-light { background: var(--mp-bg-card); border: 1px solid var(--mp-border); }
.wm-chip-light span { color: var(--mp-ink-3); }
.wm-chip-dark  { background: var(--mp-ink); border: 1px solid var(--mp-ink); }
.wm-chip-dark span { color: #e9ecf2; }   /* on #1f242b: 13.0:1 */

/* Methods the brief calls priorities for France that ship no artwork are NAMED, never drawn. */
.wm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0;
            list-style: none; }
.wm-chips li { font-size: var(--mp-t-sm); font-weight: 600; color: var(--mp-ink-2);
               background: var(--mp-bg-2); border: 1px solid var(--mp-border);
               border-radius: 999px; padding: 7px 14px; }

/* --------------------------------------------------------------------------------------------
   TABLES — fixed layout, because the first column holds «Retrait maximum depuis le bonus» and
   the second holds «10× le montant du bonus»; auto layout hands the width to the label and wraps
   the number nobody came to read.
   -------------------------------------------------------------------------------------------- */
.wm-tw { overflow-x: auto; margin: 18px 0 0; }
.wm-t { width: 100%; min-width: 460px; border-collapse: collapse; table-layout: fixed;
        font-size: var(--mp-t-sm); background: var(--mp-bg-card);
        border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg);
        overflow: hidden; }
.wm-t th, .wm-t td { padding: 11px 13px; text-align: left; vertical-align: top;
                     border-bottom: 1px solid var(--mp-border); overflow-wrap: anywhere; }
.wm-t thead th { background: var(--mp-bg-2); color: var(--mp-brand-light); font-weight: 700;
                 white-space: nowrap; font-size: 0.8125rem; text-transform: uppercase;
                 letter-spacing: 0.04em; }
.wm-t tbody tr:last-child td { border-bottom: 0; }
.wm-t td:first-child { color: var(--mp-ink); font-weight: 600; }
.wm-t--2 th:first-child, .wm-t--2 td:first-child { width: 44%; }
.wm-t--3 th:first-child, .wm-t--3 td:first-child { width: 32%; }

/* Steps, score bars, cards, figures. */
.wm-steps { counter-reset: s; list-style: none; padding: 0; margin: 18px 0 0; display: grid;
            gap: 12px; }
.wm-steps li { counter-increment: s; position: relative; padding: 13px 16px 13px 54px;
               background: var(--mp-bg-card); border: 1px solid var(--mp-border);
               border-radius: 12px; color: var(--mp-ink-2); line-height: 1.55; }
.wm-steps li::before {
  content: counter(s); position: absolute; left: 15px; top: 12px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--mp-brand-deep); color: #fff; font-weight: 800; font-size: 0.8125rem;
}
.wm-steps b { color: var(--mp-ink); }

.wm-score { display: grid; gap: 9px; margin: 18px 0 0; }
.wm-row { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr auto; gap: 12px;
          align-items: center; font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.wm-bar { height: 8px; border-radius: 999px; background: var(--mp-bg-3); overflow: hidden; }
.wm-bar i { display: block; height: 100%; border-radius: 999px;
            background: linear-gradient(90deg, #b00d18, var(--mp-brand-deep)); }
.wm-row b { color: var(--mp-brand-light); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .wm-row { grid-template-columns: 1fr auto; }
                            .wm-bar { grid-column: 1 / -1; } }

.wm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
            margin: 18px 0 0; }
@media (max-width: 860px) { .wm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wm-cards { grid-template-columns: 1fr; } }
.wm-cards > div { background: var(--mp-bg-card); border: 1px solid var(--mp-border);
                  border-radius: 12px; padding: 15px 16px; }
.wm-cards h3 { margin: 0 0 6px; font-size: 1rem; color: var(--mp-brand-light); }
.wm-cards p { margin: 0; color: var(--mp-ink-2); font-size: var(--mp-t-sm); line-height: 1.6; }

.wm-fig { margin: 20px 0 0; }
.wm-fig img { width: 100%; height: auto; display: block; border-radius: var(--mp-radius-lg);
              border: 1px solid var(--mp-border); background: var(--mp-bg-card); }
.wm-fig figcaption { font-size: 0.8125rem; color: var(--mp-ink-3); margin-top: 8px; }
.wm-band { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 0; }
@media (max-width: 620px) { .wm-band { grid-template-columns: 1fr; } }
.wm-band .wm-fig { margin: 0; }
/* The two mobile captures are 375x667 portrait; side by side at full width they would be taller
   than the viewport. Capped and centred instead of stretched. */
.wm-band--phones img { height: 420px; object-fit: contain; padding: 8px; }

/* --------------------------------------------------------------------------------------------
   THE LEGAL NOTICE. Not styled like a warning box on purpose: it is the single most useful fact
   on the page for a French reader, so it reads as a statement, not as boilerplate they have
   learnt to skip. Ochre rule rather than red — red is the brand colour here, and a brand-coloured
   box is exactly what gets skipped.
   -------------------------------------------------------------------------------------------- */
.wm-legal { margin: 20px 0 0; padding: 16px 18px 16px 20px; background: var(--mp-bg-2);
            border-left: 4px solid var(--mp-amber); border-radius: 0 12px 12px 0; }
.wm-legal h3 { margin: 0 0 8px; font-size: 1.0625rem; color: var(--mp-ink); }
.wm-legal p { margin: 0 0 10px; color: var(--mp-ink-2); font-size: var(--mp-t-sm);
              line-height: 1.65; }
.wm-legal p:last-child { margin: 0; }
.wm-legal strong { color: var(--mp-ink); }

/* «Lien actif» — the access widget the brief asks to carry through the page. Deliberately NOT in
   the brand red: the red is the offer colour, and a box that says «this is the address that
   works» has to read as information rather than as a third CTA. */
.wm-mirror { display: grid; gap: 12px; margin: 20px 0 0; padding: 16px 18px;
             background: var(--mp-bg-card); border: 1px solid var(--mp-border-strong);
             border-radius: 14px; }
.wm-mirror-h { display: flex; align-items: center; gap: 10px; font-weight: 700;
               color: var(--mp-ink); }
.wm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mp-pos);
          flex: 0 0 auto; }
.wm-mirror p { margin: 0; color: var(--mp-ink-2); font-size: var(--mp-t-sm); line-height: 1.6; }

.wm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
            margin: 22px 0 0; padding: 0; list-style: none; }
@media (max-width: 700px) { .wm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wm-facts li { background: var(--mp-bg-card); border: 1px solid var(--mp-border);
               border-radius: 12px; padding: 12px 14px; }
.wm-facts span { display: block; font-size: var(--mp-t-xs); color: var(--mp-ink-3);
                 text-transform: uppercase; letter-spacing: 0.05em; }
.wm-facts b { display: block; margin-top: 3px; color: var(--mp-brand-light);
              font-size: 1.0625rem; }

/* --------------------------------------------------------------------------------------------
   FIX-111 AGAIN, AND IT CAME DOWN TO THREE PIXELS.
   On a 375 px screen the sticky header rendered THREE rows and stood 157 px tall — a fifth of
   the viewport, and the same failure measured on tikitaka-sg at 149 px. Measured, not guessed:
   the first row wants logo 128 + switcher 80 + CTA 118 + two 10 px gaps = 346 px against 343 px
   of usable width. Three pixels over, so the CTA wrapped onto a row of its own.
   Shrinking the logotype to 24 px tall takes it to about 102 px and brings the row to 314 px,
   which fits with room to spare. Two rows, 115 px.
   -------------------------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .mp-lb-top .mp-lb-logo img { height: 24px; }
  .mp-lb-top .mp-lb-top-cta { padding: 8px 10px; }
  .mp-lb-top .mp-lb-lang a { padding: 5px 7px; }
}

/* The sticky bottom bar overlaps the last section unless the body reserves room for it. */
body:has(.mp-lb-sticky) { padding-bottom: 92px; }
@media (max-width: 560px) { body:has(.mp-lb-sticky) { padding-bottom: 104px; } }

/* `.mp-prose img` is (0,1,1) and beats a bare class, so the prose column's image rule has to be
   answered at the same weight or the mark rows inherit its max-width and margins. */
.mp-prose .wm-marks img, .mp-prose .wm-band img, .mp-prose .wm-fig img { margin: 0; }

/* Legal pages lose every offer surface (FIX-94). */
.mp-rg .mp-lb-sticky, .mp-rg .mp-lb-rail { display: none; }