/*!
 * MegaPerya child theme styles
 * Design tokens are CSS custom properties near the top — override them
 * in a plugin or the Additional CSS panel without touching this file.
 */
/* ============================================================
   MEGAPERYA CHILD THEME — DESIGN TOKENS
   Scoped prefix: mp-
   ============================================================ */
:root{
  /* Palette — sampled from megaperya.com reference */
  --mp-blue-900:#0d1550;
  --mp-blue-800:#141d78;
  --mp-blue:#1f3ecd;
  --mp-blue-400:#4a6bff;
  --mp-purple:#7a2bd6;
  --mp-purple-600:#5f1cb0;
  --mp-magenta:#ff2e9a;
  --mp-red:#e0272f;
  --mp-gold:#ffc422;
  --mp-gold-200:#ffe27a;
  --mp-gold-600:#d99a00;
  --mp-cream:#fff6e6;
  --mp-cream-200:#fdecd0;
  --mp-white:#ffffff;
  --mp-ink:#14164a;
  --mp-ink-70:#4a4d7d;
  --mp-line:rgba(20,22,74,.14);

  /* Type */
  --mp-font-display:"Alfa Slab One", Georgia, serif;
  --mp-font-util:"Barlow Condensed", Impact, sans-serif;
  --mp-font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale */
  --mp-step-0:1rem;
  --mp-step-1:1.15rem;
  --mp-step-2:1.45rem;
  --mp-step-3:1.9rem;
  --mp-step-4:2.6rem;
  --mp-step-5:clamp(2.6rem,7vw,4.6rem);

  /* Layout */
  --mp-wrap:1140px;
  --mp-wrap-narrow:820px;
  --mp-gutter:clamp(1rem,4vw,2rem);
  --mp-radius:18px;
  --mp-radius-lg:26px;
  --mp-shadow:0 14px 34px rgba(13,21,80,.13);
  --mp-shadow-lift:0 22px 48px rgba(13,21,80,.22);
  --mp-section-y:clamp(3.5rem,8vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--mp-font-body);
  font-size:var(--mp-step-0);
  line-height:1.7;
  color:var(--mp-ink);
  background:var(--mp-cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--mp-blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--mp-magenta);outline-offset:3px;border-radius:6px}

.mp-wrap{width:100%;max-width:var(--mp-wrap);margin-inline:auto;padding-inline:var(--mp-gutter)}
.mp-wrap--narrow{max-width:var(--mp-wrap-narrow)}
.mp-section{padding-block:var(--mp-section-y)}
.mp-section--cream{background:var(--mp-cream)}
.mp-section--cream-alt{background:var(--mp-cream-200)}
.mp-section--deep{background:var(--mp-blue-900);color:#e8ebff}
.mp-section--deep .mp-eyebrow{color:var(--mp-gold)}
.mp-section--deep .mp-h2{color:#fff}
.mp-section--deep p{color:#c9cffb}

/* ---------- Type helpers ---------- */
.mp-eyebrow{
  font-family:var(--mp-font-util);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  font-size:.95rem;
  color:var(--mp-purple);
  margin:0 0 .6rem;
  display:flex;align-items:center;gap:.6rem;
}
.mp-eyebrow::before{
  content:"";width:26px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--mp-magenta),var(--mp-gold));
}
.mp-h2{
  font-family:var(--mp-font-display);
  font-size:clamp(1.8rem,4.2vw,2.8rem);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 1rem;
  color:var(--mp-ink);
}
.mp-h3{
  font-family:var(--mp-font-body);
  font-weight:800;
  font-size:var(--mp-step-2);
  line-height:1.25;
  margin:0 0 .5rem;
}
.mp-lede{font-size:var(--mp-step-1);color:var(--mp-ink-70);max-width:66ch;margin:0 0 1.4rem}
.mp-section--deep .mp-lede{color:#c9cffb}
.mp-tl{color:var(--mp-ink-70)}
.mp-fil{font-style:italic}

/* ---------- Buttons ---------- */
.mp-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mp-font-util);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  font-size:1.1rem;
  padding:.85rem 1.7rem;
  border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.mp-btn:hover{text-decoration:none;transform:translateY(-2px)}
.mp-btn--gold{
  background:linear-gradient(180deg,var(--mp-gold-200),var(--mp-gold));
  color:#4a3200;
  box-shadow:0 6px 0 var(--mp-gold-600),0 14px 26px rgba(0,0,0,.28);
}
.mp-btn--gold:hover{box-shadow:0 8px 0 var(--mp-gold-600),0 18px 30px rgba(0,0,0,.32)}
.mp-btn--magenta{
  background:linear-gradient(180deg,#ff5cb0,var(--mp-magenta));
  color:#fff;
  box-shadow:0 6px 0 #b3005f,0 14px 26px rgba(0,0,0,.28);
}
.mp-btn--magenta:hover{box-shadow:0 8px 0 #b3005f,0 18px 30px rgba(0,0,0,.32)}
.mp-btn--ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:2px solid rgba(255,255,255,.45);
  backdrop-filter:blur(4px);
}
.mp-btn--sm{font-size:.95rem;padding:.6rem 1.2rem}

/* ============================================================
   HEADER
   ============================================================ */
.mp-header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,var(--mp-blue-800),var(--mp-blue));
  border-bottom:3px solid var(--mp-gold);
  box-shadow:0 6px 20px rgba(13,21,80,.35);
}
.mp-header__inner{display:flex;align-items:center;gap:1.2rem;min-height:70px}
.mp-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mp-logo__mark{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:radial-gradient(circle at 30% 25%,var(--mp-gold-200),var(--mp-gold) 45%,var(--mp-red) 100%);
  display:grid;place-items:center;
  box-shadow:0 4px 0 var(--mp-gold-600), inset 0 0 0 3px rgba(255,255,255,.55);
  font-family:var(--mp-font-display);font-size:1.35rem;color:#4a1200;
}
.mp-logo__text{font-family:var(--mp-font-display);font-size:1.35rem;line-height:1;color:#fff;letter-spacing:.01em}
.mp-logo__text span{color:var(--mp-gold)}
.mp-logo__sub{
  display:block;font-family:var(--mp-font-util);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:#a9baff;margin-top:.25rem
}
.mp-nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.mp-nav a{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.09em;
  font-size:1.02rem;font-weight:600;color:#dfe5ff;text-decoration:none;
  padding:.3rem 0;border-bottom:2px solid transparent;
}
.mp-nav a:hover{color:var(--mp-gold);border-bottom-color:var(--mp-gold)}

/* ============================================================
   HERO — signature "perya booth" marquee
   ============================================================ */
.mp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(122,43,214,.85),transparent 70%),
    linear-gradient(165deg,var(--mp-blue) 0%,var(--mp-blue-800) 45%,var(--mp-purple-600) 100%);
  padding-block:clamp(3rem,7vw,5rem) clamp(3.5rem,8vw,6rem);
  color:#fff;
}

/* banderitas / bunting */
.mp-bunting{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  margin:0 0 clamp(1.5rem,4vw,2.5rem);padding:0;list-style:none;
}
.mp-bunting li{
  width:34px;height:44px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  animation:mp-sway 3.4s ease-in-out infinite;
}
.mp-bunting li:nth-child(5n+1){background:var(--mp-gold);animation-delay:0s}
.mp-bunting li:nth-child(5n+2){background:var(--mp-magenta);animation-delay:.18s}
.mp-bunting li:nth-child(5n+3){background:#39d0e8;animation-delay:.36s}
.mp-bunting li:nth-child(5n+4){background:var(--mp-red);animation-delay:.54s}
.mp-bunting li:nth-child(5n+5){background:#5ee08a;animation-delay:.72s}
@keyframes mp-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* marquee bulb frame */
.mp-booth{
  position:relative;
  max-width:940px;margin-inline:auto;
  border:4px solid var(--mp-gold);
  border-radius:var(--mp-radius-lg);
  background:rgba(9,14,60,.42);
  backdrop-filter:blur(6px);
  padding:clamp(2rem,5vw,3.2rem) clamp(1.4rem,5vw,3rem);
  text-align:center;
  box-shadow:0 0 0 8px rgba(255,196,34,.14),var(--mp-shadow-lift);
}
.mp-booth::before,.mp-booth::after{
  content:"";position:absolute;left:14px;right:14px;height:12px;
  background-image:radial-gradient(circle,var(--mp-gold-200) 3.5px,rgba(255,196,34,.25) 4px,transparent 4.5px);
  background-size:26px 12px;background-repeat:repeat-x;
  animation:mp-bulbs 1.4s steps(2) infinite;
}
.mp-booth::before{top:-6px}
.mp-booth::after{bottom:-6px}
@keyframes mp-bulbs{0%{background-position:0 0;opacity:1}50%{background-position:13px 0;opacity:.55}100%{background-position:0 0;opacity:1}}

.mp-hero__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.9rem;font-weight:700;color:#0d1550;
  background:var(--mp-gold);
  padding:.35rem 1rem;border-radius:999px;margin-bottom:1.2rem;
}
.mp-hero__title{
  font-family:var(--mp-font-display);
  font-size:var(--mp-step-5);
  line-height:.95;margin:0 0 .4rem;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 4px 0 var(--mp-purple-600),0 9px 22px rgba(0,0,0,.45);
}
.mp-hero__title em{
  font-style:normal;
  background:linear-gradient(180deg,#fff6cf,var(--mp-gold) 55%,var(--mp-gold-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 4px 0 rgba(90,45,0,.55));
}
.mp-hero__tagline{
  font-family:var(--mp-font-util);
  text-transform:uppercase;letter-spacing:.18em;font-weight:700;
  font-size:clamp(1rem,2.6vw,1.4rem);
  color:var(--mp-gold-200);margin:0 0 1.1rem;
}
.mp-hero__sub{
  font-size:var(--mp-step-1);color:#dfe4ff;max-width:60ch;margin:0 auto 1.8rem;
}
.mp-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.mp-hero__note{
  margin:1.4rem 0 0;font-family:var(--mp-font-util);
  text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:#b7c0ff;
}

/* trust chips */
.mp-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin:clamp(1.6rem,4vw,2.4rem) auto 0;list-style:none;padding:0;max-width:900px;
}
.mp-trust li{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:.45rem 1rem;
  font-family:var(--mp-font-util);font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;
}
.mp-trust b{color:var(--mp-gold)}

/* ============================================================
   TICKER
   ============================================================ */
.mp-ticker{
  background:linear-gradient(90deg,var(--mp-magenta),var(--mp-purple) 50%,var(--mp-blue));
  border-block:3px solid var(--mp-gold);
  overflow:hidden;padding:.65rem 0;
}
.mp-ticker__track{display:flex;gap:0;width:max-content;animation:mp-slide 32s linear infinite}
.mp-ticker__group{display:flex;gap:2.5rem;padding-right:2.5rem}
.mp-ticker__item{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;
  font-size:1.05rem;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:.6rem;
}
.mp-ticker__item::before{content:"★";color:var(--mp-gold)}
@keyframes mp-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   AT A GLANCE — ticket stub
   ============================================================ */
.mp-glance{
  background:var(--mp-white);
  border-radius:var(--mp-radius-lg);
  box-shadow:var(--mp-shadow);
  overflow:hidden;
  border:2px solid var(--mp-line);
}
.mp-glance__head{
  background:linear-gradient(90deg,var(--mp-blue-800),var(--mp-purple));
  color:#fff;padding:1rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.mp-glance__head h3{font-family:var(--mp-font-display);font-size:1.25rem;margin:0}
.mp-glance__head span{font-family:var(--mp-font-util);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;color:var(--mp-gold-200)}
.mp-glance dl{margin:0;display:grid;grid-template-columns:minmax(180px,1fr) 2fr}
.mp-glance dt,.mp-glance dd{padding:.85rem 1.4rem;margin:0;border-bottom:1px dashed var(--mp-line)}
.mp-glance dt{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.09em;
  font-size:1rem;font-weight:600;color:var(--mp-purple);background:#faf9ff;
}
.mp-glance dd{color:var(--mp-ink)}
.mp-glance dl>*:nth-last-child(-n+2){border-bottom:0}

/* ============================================================
   CARD GRIDS
   ============================================================ */
.mp-grid{display:grid;gap:1.2rem}
.mp-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.mp-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.mp-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}

.mp-card{
  background:var(--mp-white);
  border-radius:var(--mp-radius);
  padding:1.5rem;
  border:2px solid var(--mp-line);
  box-shadow:var(--mp-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  position:relative;overflow:hidden;
}
.mp-card:hover{transform:translateY(-4px);box-shadow:var(--mp-shadow-lift);border-color:var(--mp-gold)}
.mp-card__badge{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:.9rem;
  background:linear-gradient(160deg,var(--mp-gold-200),var(--mp-gold));
  box-shadow:0 4px 0 var(--mp-gold-600);
}
.mp-card--c1 .mp-card__badge{background:linear-gradient(160deg,#ff8fc7,var(--mp-magenta));box-shadow:0 4px 0 #b3005f}
.mp-card--c2 .mp-card__badge{background:linear-gradient(160deg,#a878ff,var(--mp-purple));box-shadow:0 4px 0 var(--mp-purple-600)}
.mp-card--c3 .mp-card__badge{background:linear-gradient(160deg,#6f8dff,var(--mp-blue));box-shadow:0 4px 0 #10269b}
.mp-card--c4 .mp-card__badge{background:linear-gradient(160deg,#ff7a80,var(--mp-red));box-shadow:0 4px 0 #9c1219}
.mp-card p{margin:0;color:var(--mp-ink-70);font-size:.98rem}
.mp-card ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--mp-ink-70);font-size:.96rem}

/* providers */
.mp-provider{
  background:var(--mp-white);border:2px solid var(--mp-line);border-radius:var(--mp-radius);
  padding:1.3rem;text-align:center;box-shadow:var(--mp-shadow);
  transition:transform .2s ease,border-color .2s ease;
}
.mp-provider:hover{transform:translateY(-4px);border-color:var(--mp-magenta)}
.mp-provider__name{
  font-family:var(--mp-font-display);font-size:1.25rem;margin:0 0 .4rem;
  background:linear-gradient(180deg,var(--mp-purple),var(--mp-magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mp-provider p{margin:0;font-size:.92rem;color:var(--mp-ink-70)}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.mp-quote{
  margin:2rem 0 0;padding:1.6rem 1.8rem;
  border-left:6px solid var(--mp-gold);
  background:linear-gradient(90deg,rgba(255,196,34,.16),transparent);
  border-radius:0 var(--mp-radius) var(--mp-radius) 0;
}
.mp-quote p{
  margin:0;font-family:var(--mp-font-display);font-size:var(--mp-step-2);
  line-height:1.3;color:var(--mp-ink);
}

/* ============================================================
   BONUS CARDS
   ============================================================ */
.mp-bonus{
  position:relative;border-radius:var(--mp-radius-lg);padding:1.8rem;color:#fff;overflow:hidden;
  box-shadow:var(--mp-shadow-lift);border:3px solid var(--mp-gold);
}
.mp-bonus--welcome{background:linear-gradient(150deg,var(--mp-purple),var(--mp-blue-800))}
.mp-bonus--reload{background:linear-gradient(150deg,var(--mp-magenta),var(--mp-red))}
.mp-bonus__label{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.9rem;color:var(--mp-gold-200);margin:0 0 .4rem;
}
.mp-bonus__amount{
  font-family:var(--mp-font-display);font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;margin:0 0 .3rem;
  background:linear-gradient(180deg,#fff6cf,var(--mp-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.mp-bonus__for{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:#fff;margin:0 0 .9rem}
.mp-bonus p{color:rgba(255,255,255,.9);font-size:.98rem;margin:0}
.mp-bonus__fine{
  display:block;margin-top:1rem;padding-top:.9rem;border-top:1px dashed rgba(255,255,255,.4);
  font-size:.85rem;color:rgba(255,255,255,.78);
}

/* checklist */
.mp-check{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.mp-check li{
  display:flex;gap:.8rem;align-items:flex-start;
  background:var(--mp-white);border:2px solid var(--mp-line);border-radius:14px;padding:.85rem 1rem;
}
.mp-check li::before{
  content:"✓";flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--mp-gold);color:#4a3200;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;margin-top:.1rem;
}
.mp-check b{display:block;font-size:.98rem}
.mp-check span{font-size:.92rem;color:var(--mp-ink-70)}

/* ============================================================
   TABS — how it works
   ============================================================ */
.mp-tabs__list{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0;list-style:none;
}
.mp-tab{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  font-size:1.05rem;padding:.6rem 1.3rem;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#c9cffb;border:2px solid rgba(255,255,255,.2);
  transition:all .18s ease;
}
.mp-tab:hover{color:#fff;border-color:var(--mp-gold)}
.mp-tab[aria-selected="true"]{
  background:linear-gradient(180deg,var(--mp-gold-200),var(--mp-gold));
  color:#4a3200;border-color:var(--mp-gold);
  box-shadow:0 4px 0 var(--mp-gold-600);
}
.mp-tabs__panel[hidden]{display:none}
.mp-steps{list-style:none;counter-reset:mp-step;margin:0;padding:0;display:grid;gap:.9rem}
.mp-steps li{
  counter-increment:mp-step;
  display:flex;gap:1rem;align-items:flex-start;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--mp-gold);
  border-radius:14px;padding:1rem 1.2rem;
}
.mp-steps li::before{
  content:counter(mp-step,decimal-leading-zero);
  font-family:var(--mp-font-display);font-size:1.3rem;color:var(--mp-gold);
  flex:none;line-height:1.2;min-width:2.2ch;
}
.mp-steps b{display:block;color:#fff;font-size:1.05rem;margin-bottom:.15rem}
.mp-steps span{color:#c1c8f7;font-size:.96rem}
.mp-tabs__note{
  margin:1.4rem 0 0;padding:1rem 1.2rem;border-radius:14px;
  background:rgba(255,46,154,.14);border:1px solid rgba(255,46,154,.4);
  color:#ffd9ec;font-size:.95rem;
}
.mp-tabs__note b{color:#fff}

/* ============================================================
   LEGIT PANEL
   ============================================================ */
.mp-verify{
  display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-top:1.6rem;
}
.mp-verify__item{
  background:var(--mp-white);border-radius:var(--mp-radius);padding:1.3rem;
  border:2px solid var(--mp-line);border-top:5px solid var(--mp-blue);
}
.mp-verify__item dt{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.12em;
  font-size:.88rem;color:var(--mp-purple);margin-bottom:.35rem;
}
.mp-verify__item dd{margin:0;font-weight:700;font-size:1.05rem}

/* ============================================================
   RESPONSIBLE GAMING — deliberately quiet
   ============================================================ */
.mp-rg{
  background:#101538;color:#dfe3ff;border-radius:var(--mp-radius-lg);
  padding:clamp(1.8rem,4vw,2.6rem);border:1px solid rgba(255,255,255,.14);
}
.mp-rg__flag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.14em;
  font-size:.9rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  padding:.35rem 1rem;border-radius:999px;margin-bottom:1rem;color:#fff;
}
.mp-rg h2{font-family:var(--mp-font-display);font-size:clamp(1.6rem,3.6vw,2.2rem);margin:0 0 .8rem;color:#fff}
.mp-rg p{color:#bcc3ef;max-width:70ch}
.mp-rg ul{margin:1rem 0 0;padding-left:1.2rem;color:#bcc3ef}
.mp-rg li{margin-bottom:.4rem}

/* ============================================================
   FAQ
   ============================================================ */
.mp-faq{display:grid;gap:.7rem;margin-top:1.6rem}
.mp-faq details{
  background:var(--mp-white);border:2px solid var(--mp-line);border-radius:14px;overflow:hidden;
  transition:border-color .18s ease;
}
.mp-faq details[open]{border-color:var(--mp-gold)}
.mp-faq summary{
  cursor:pointer;list-style:none;padding:1rem 1.2rem;
  font-weight:700;font-size:1.03rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.mp-faq summary::-webkit-details-marker{display:none}
.mp-faq summary::after{
  content:"+";font-family:var(--mp-font-display);font-size:1.3rem;color:var(--mp-magenta);
  flex:none;transition:transform .2s ease;
}
.mp-faq details[open] summary::after{content:"–";transform:rotate(0)}
.mp-faq summary:hover{background:#fffaf0}
.mp-faq__body{padding:0 1.2rem 1.1rem;color:var(--mp-ink-70);font-size:.98rem}

/* ============================================================
   CTA BAND
   ============================================================ */
.mp-cta{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%,rgba(255,196,34,.35),transparent 60%),
    linear-gradient(120deg,var(--mp-purple),var(--mp-magenta) 55%,var(--mp-red));
  padding-block:clamp(3rem,7vw,4.5rem);
  border-block:4px solid var(--mp-gold);
}
.mp-cta h2{font-family:var(--mp-font-display);font-size:clamp(1.9rem,5vw,3rem);margin:0 0 .7rem;line-height:1.08;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.mp-cta p{max-width:62ch;margin:0 auto 1.6rem;color:rgba(255,255,255,.94);font-size:var(--mp-step-1)}

/* ============================================================
   FOOTER
   ============================================================ */
.mp-footer{background:var(--mp-blue-900);color:#a8b0e8;padding-block:3rem 1.6rem;font-size:.94rem}
.mp-footer__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.mp-footer h4{
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.14em;
  color:var(--mp-gold);font-size:.95rem;margin:0 0 .8rem;
}
.mp-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mp-footer a{color:#c3caf5}
.mp-footer a:hover{color:var(--mp-gold)}
.mp-footer__bottom{
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;color:#8d96da;font-size:.86rem;
}
.mp-footer__age{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:2px solid var(--mp-gold);color:var(--mp-gold);font-family:var(--mp-font-display);font-size:.85rem;flex:none;
}

/* ============================================================
   REVEAL + RESPONSIVE + A11Y
   ============================================================ */
.mp-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.mp-reveal.is-in{opacity:1;transform:none}

@media (max-width:860px){
    .mp-header__cta{display:none}
  .mp-glance dl{grid-template-columns:1fr}
  .mp-glance dt{border-bottom:0;padding-bottom:.2rem}
  .mp-glance dd{padding-top:.2rem}
}

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

/* ============================================================
   HEADER — logo + menu come from Customizer
   ============================================================ */
.mp-header{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,var(--mp-blue-800),var(--mp-blue));
  border-bottom:3px solid var(--mp-gold);box-shadow:0 6px 20px rgba(13,21,80,.35)}
.mp-header__inner{display:flex;align-items:center;gap:1.2rem;min-height:72px}
.mp-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.mp-logo__img{height:46px;width:auto}
.mp-logo__text{font-family:var(--mp-font-display);font-size:1.3rem;line-height:1;color:#fff}
.mp-logo__text span{color:var(--mp-gold)}
.mp-logo__sub{display:block;font-family:var(--mp-font-util);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:#a9baff;margin-top:.25rem}

.mp-menu{margin-left:auto;display:flex;align-items:center;gap:.2rem;list-style:none;margin-block:0;padding:0}
.mp-menu li{position:relative}
.mp-menu > li > a{display:flex;align-items:center;gap:.35rem;
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.09em;
  font-size:1.02rem;font-weight:600;color:#dfe5ff;text-decoration:none;
  padding:.55rem .8rem;border-radius:8px;border-bottom:2px solid transparent}
.mp-menu > li > a:hover,.mp-menu > li.is-current > a{color:var(--mp-gold);border-bottom-color:var(--mp-gold)}
.mp-menu .mp-caret{font-size:.7rem;opacity:.8}
.mp-sub{position:absolute;top:100%;left:0;min-width:230px;list-style:none;margin:0;padding:.4rem;
  background:var(--mp-blue-800);border:2px solid var(--mp-gold);border-radius:14px;
  box-shadow:var(--mp-shadow-lift);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:5}
.mp-menu li:hover > .mp-sub,.mp-menu li:focus-within > .mp-sub{opacity:1;visibility:visible;transform:none}
.mp-sub a{display:block;padding:.5rem .8rem;border-radius:9px;color:#dfe5ff;
  font-family:var(--mp-font-util);letter-spacing:.06em;text-transform:uppercase;font-size:.98rem}
.mp-sub a:hover{background:rgba(255,255,255,.1);color:var(--mp-gold);text-decoration:none}
.mp-header__cta{margin-left:1rem}
.mp-navtoggle{display:none;margin-left:auto;background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;width:44px;height:40px;
  align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem}

/* ============================================================
   PAGE / POST HERO BANNER
   ============================================================ */
.mp-phero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(ellipse 70% 90% at 20% -10%,rgba(122,43,214,.9),transparent 65%),
             linear-gradient(120deg,var(--mp-blue) 0%,var(--mp-blue-800) 55%,var(--mp-purple-600) 100%);
  padding-block:clamp(2.2rem,5vw,3.4rem);border-bottom:4px solid var(--mp-gold)}
.mp-phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background-image:radial-gradient(circle,var(--mp-gold-200) 3px,transparent 3.5px);
  background-size:24px 10px;opacity:.55}
.mp-phero__dots{position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(circle,var(--mp-gold) 2px,transparent 2.5px);background-size:64px 64px}
.mp-crumbs{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.12em;
  font-size:.88rem;color:#b7c0ff;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.mp-crumbs a{color:#dfe5ff}
.mp-crumbs span{opacity:.55}
.mp-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mp-font-util);
  text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;font-weight:700;
  background:var(--mp-gold);color:#4a3200;padding:.3rem .9rem;border-radius:999px}
.mp-chip--magenta{background:var(--mp-magenta);color:#fff}
.mp-chip--soft{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.mp-phero__title{font-family:var(--mp-font-display);font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:1.08;margin:.9rem 0 .7rem;text-shadow:0 4px 0 rgba(0,0,0,.22);max-width:22ch}
.mp-phero__sub{font-size:var(--mp-step-1);color:#d9deff;max-width:62ch;margin:0}
.mp-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.2rem 0 0;padding:0;list-style:none;
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;color:#c3caf5}
.mp-meta b{color:var(--mp-gold);font-weight:600}

/* ============================================================
   CONTENT LAYOUT
   ============================================================ */
.mp-layout{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr) 320px;
  padding-block:var(--mp-section-y);align-items:start}
.mp-layout--full{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.mp-layout{grid-template-columns:minmax(0,1fr)}}

/* featured image frame */
.mp-featured{position:relative;border-radius:var(--mp-radius-lg);overflow:hidden;
  border:4px solid var(--mp-gold);box-shadow:var(--mp-shadow);margin-bottom:1.8rem;
  aspect-ratio:16/8;background:
    repeating-linear-gradient(135deg,#7a2bd6 0 40px,#1f3ecd 40px 80px,#ff2e9a 80px 120px,#ffc422 120px 160px)}
.mp-featured__cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(0deg,rgba(9,14,60,.92),transparent);
  color:#fff;padding:1.6rem 1.2rem .9rem;font-size:.9rem;font-family:var(--mp-font-util);
  letter-spacing:.1em;text-transform:uppercase}

/* prose */
.mp-prose{font-size:1.06rem}
.mp-prose > p:first-of-type{font-size:1.18rem;color:var(--mp-ink);font-weight:500}
.mp-prose h2{font-family:var(--mp-font-display);font-size:clamp(1.5rem,3.2vw,2rem);
  line-height:1.2;margin:2.4rem 0 .9rem;padding-top:1.2rem;position:relative}
.mp-prose h2::before{content:"";position:absolute;top:0;left:0;width:64px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--mp-magenta),var(--mp-gold))}
.mp-prose h3{font-weight:800;font-size:1.25rem;margin:1.8rem 0 .5rem;color:var(--mp-purple)}
/* Levels 1 and 4-6 were unstyled, so browsers fell back to defaults —
   h4 matched body text and h5/h6 rendered SMALLER than it. Full scale below. */
.mp-prose h1{
  font-family:var(--mp-font-display);
  font-size:clamp(1.9rem,4.4vw,2.5rem);
  line-height:1.12;
  margin:2.6rem 0 1rem;
  color:var(--mp-ink);
}
.mp-prose h4{
  font-weight:800;
  font-size:1.08rem;
  line-height:1.35;
  margin:1.5rem 0 .4rem;
  color:var(--mp-ink);
}
.mp-prose h5{
  font-family:var(--mp-font-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1rem;
  margin:1.4rem 0 .35rem;
  color:var(--mp-magenta);
}
.mp-prose h6{
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  margin:1.3rem 0 .35rem;
  color:var(--mp-ink-70);
}
/* Sticky header would otherwise cover a heading jumped to from the
   table of contents or a shared anchor link. */
.mp-prose h1,.mp-prose h2,.mp-prose h3,
.mp-prose h4,.mp-prose h5,.mp-prose h6{
  scroll-margin-top:100px;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
/* A heading opening the article should not carry the full top gap */
.mp-prose > :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}
.mp-prose h2:first-child{padding-top:.4rem}
/* Two headings in a row: tighten the gap between them */
.mp-prose :is(h2,h3,h4,h5) + :is(h3,h4,h5,h6){margin-top:.9rem}
.mp-prose p{margin:0 0 1.1rem;color:#2c2f63}
.mp-prose ul,.mp-prose ol{margin:0 0 1.2rem;padding-left:1.3rem;color:#2c2f63}
.mp-prose li{margin-bottom:.4rem}
.mp-prose ul li::marker{color:var(--mp-magenta)}
.mp-prose ol li::marker{color:var(--mp-purple);font-weight:700}
.mp-prose blockquote{margin:1.8rem 0;padding:1.4rem 1.6rem;border-left:6px solid var(--mp-gold);
  background:linear-gradient(90deg,rgba(255,196,34,.16),transparent);border-radius:0 var(--mp-radius) var(--mp-radius) 0}
.mp-prose blockquote p{margin:0;font-family:var(--mp-font-display);font-size:1.3rem;line-height:1.35;color:var(--mp-ink)}
.mp-prose a{border-bottom:2px solid rgba(255,46,154,.35)}
.mp-prose a:hover{text-decoration:none;border-bottom-color:var(--mp-magenta)}
.mp-prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;background:#fff;
  border-radius:var(--mp-radius);overflow:hidden;box-shadow:var(--mp-shadow);font-size:.98rem}
.mp-prose th{background:linear-gradient(90deg,var(--mp-blue-800),var(--mp-purple));color:#fff;
  text-align:left;padding:.85rem 1rem;font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em}
.mp-prose td{padding:.8rem 1rem;border-bottom:1px dashed var(--mp-line)}
.mp-prose tr:last-child td{border-bottom:0}
.mp-prose figure{margin:1.8rem 0}
.mp-prose figcaption{font-size:.88rem;color:var(--mp-ink-70);margin-top:.5rem;text-align:center}

/* callouts */
.mp-note{border-radius:var(--mp-radius);padding:1.1rem 1.3rem;margin:1.6rem 0;
  border:2px solid var(--mp-line);background:#fff;display:flex;gap:.9rem;align-items:flex-start}
.mp-note__icon{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem}
.mp-note p{margin:0;font-size:.98rem}
.mp-note b{display:block;font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.12em;
  font-size:.9rem;margin-bottom:.2rem}
.mp-note--tip{border-color:rgba(255,196,34,.55);background:#fffaf0}
.mp-note--tip .mp-note__icon{background:var(--mp-gold);color:#4a3200}
.mp-note--tip b{color:var(--mp-gold-600)}
.mp-note--warn{border-color:rgba(224,39,47,.4);background:#fff5f5}
.mp-note--warn .mp-note__icon{background:var(--mp-red);color:#fff}
.mp-note--warn b{color:var(--mp-red)}
.mp-note--info{border-color:rgba(31,62,205,.35);background:#f4f6ff}
.mp-note--info .mp-note__icon{background:var(--mp-blue);color:#fff}
.mp-note--info b{color:var(--mp-blue)}

/* tags + share */
.mp-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0;list-style:none}
.mp-tags a{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;
  background:#fff;border:2px solid var(--mp-line);border-radius:999px;padding:.35rem 1rem;color:var(--mp-ink-70)}
.mp-tags a:hover{border-color:var(--mp-magenta);color:var(--mp-magenta);text-decoration:none}
.mp-share{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem;
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.12em;font-size:.9rem;color:var(--mp-ink-70)}
.mp-share a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--mp-purple);font-size:.95rem}
.mp-share a:nth-child(3){background:var(--mp-blue)}
.mp-share a:nth-child(4){background:var(--mp-magenta)}
.mp-share a:nth-child(5){background:var(--mp-red)}

/* author */
.mp-author{display:flex;gap:1.2rem;align-items:flex-start;margin-top:2.4rem;padding:1.5rem;
  background:#fff;border:2px solid var(--mp-line);border-radius:var(--mp-radius-lg);box-shadow:var(--mp-shadow)}
.mp-author__avatar{flex:none;width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,var(--mp-gold-200),var(--mp-gold) 45%,var(--mp-magenta));
  display:grid;place-items:center;font-family:var(--mp-font-display);font-size:1.5rem;color:#4a1200;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.mp-author h4{margin:0 0 .2rem;font-size:1.1rem}
.mp-author p{margin:0;font-size:.95rem;color:var(--mp-ink-70)}
.mp-author__role{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.12em;
  font-size:.85rem;color:var(--mp-purple);margin-bottom:.4rem;display:block}

/* prev / next */
.mp-adjacent{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:2rem}
.mp-adjacent a{background:#fff;border:2px solid var(--mp-line);border-radius:var(--mp-radius);
  padding:1.1rem 1.3rem;display:block;transition:border-color .18s ease,transform .18s ease}
.mp-adjacent a:hover{border-color:var(--mp-gold);transform:translateY(-3px);text-decoration:none}
.mp-adjacent small{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.14em;
  color:var(--mp-magenta);display:block;margin-bottom:.3rem}
.mp-adjacent strong{color:var(--mp-ink);font-size:1.02rem;line-height:1.35;display:block}
.mp-adjacent .mp-next{text-align:right}

/* ============================================================
   SIDEBAR
   ============================================================ */
.mp-side{display:grid;gap:1.2rem;position:sticky;top:100px}
@media (max-width:980px){.mp-side{position:static}}
.mp-widget{background:#fff;border:2px solid var(--mp-line);border-radius:var(--mp-radius);
  overflow:hidden;box-shadow:var(--mp-shadow)}
.mp-widget__head{background:linear-gradient(90deg,var(--mp-blue-800),var(--mp-purple));color:#fff;
  padding:.8rem 1.1rem;font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.14em;font-size:.98rem}
.mp-widget__body{padding:1.1rem}
.mp-toc{list-style:none;margin:0;padding:0;counter-reset:toc}
.mp-toc li{counter-increment:toc;border-bottom:1px dashed var(--mp-line)}
.mp-toc li:last-child{border-bottom:0}
.mp-toc a{display:flex;gap:.6rem;padding:.55rem 0;font-size:.96rem;color:var(--mp-ink-70)}
.mp-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mp-font-util);
  color:var(--mp-magenta);font-weight:700;flex:none}
.mp-toc a:hover{color:var(--mp-purple);text-decoration:none}
.mp-toc a.is-active{color:var(--mp-purple);font-weight:700}

.mp-side-cta{border-radius:var(--mp-radius);padding:1.4rem;text-align:center;color:#fff;
  background:linear-gradient(150deg,var(--mp-purple),var(--mp-blue-800));border:3px solid var(--mp-gold);
  box-shadow:var(--mp-shadow-lift)}
.mp-side-cta h4{font-family:var(--mp-font-display);font-size:1.2rem;margin:0 0 .4rem}
.mp-side-cta__amount{font-family:var(--mp-font-display);font-size:1.9rem;line-height:1;margin:.3rem 0 .5rem;
  background:linear-gradient(180deg,#fff6cf,var(--mp-gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.mp-side-cta p{margin:0 0 1rem;font-size:.9rem;color:rgba(255,255,255,.85)}
.mp-side-cta small{display:block;margin-top:.7rem;font-size:.78rem;color:rgba(255,255,255,.7)}

.mp-mini{display:flex;gap:.8rem;padding:.7rem 0;border-bottom:1px dashed var(--mp-line);align-items:flex-start}
.mp-mini:last-child{border-bottom:0}
.mp-mini__thumb{flex:none;width:62px;height:62px;border-radius:12px;
  background:repeating-linear-gradient(135deg,#7a2bd6 0 14px,#ff2e9a 14px 28px);border:2px solid var(--mp-gold)}
.mp-mini__thumb--b{background:repeating-linear-gradient(135deg,#1f3ecd 0 14px,#ffc422 14px 28px)}
.mp-mini__thumb--c{background:repeating-linear-gradient(135deg,#e0272f 0 14px,#ffc422 14px 28px)}
.mp-mini strong{display:block;font-size:.96rem;line-height:1.3;color:var(--mp-ink)}
.mp-mini span{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--mp-ink-70)}

.mp-cats{list-style:none;margin:0;padding:0}
.mp-cats li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--mp-line)}
.mp-cats li:last-child{border-bottom:0}
.mp-cats a{color:var(--mp-ink-70);font-size:.98rem}
.mp-cats b{font-family:var(--mp-font-util);background:var(--mp-cream-200);color:var(--mp-purple);
  border-radius:999px;padding:0 .6rem;font-size:.85rem;min-width:32px;text-align:center}

/* ============================================================
   ARCHIVE
   ============================================================ */
.mp-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.mp-filter{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;
  background:#fff;border:2px solid var(--mp-line);border-radius:999px;padding:.45rem 1.15rem;
  color:var(--mp-ink-70);cursor:pointer;transition:all .18s ease}
.mp-filter:hover{border-color:var(--mp-magenta);color:var(--mp-magenta)}
.mp-filter[aria-pressed="true"]{background:linear-gradient(180deg,var(--mp-gold-200),var(--mp-gold));
  border-color:var(--mp-gold);color:#4a3200;box-shadow:0 4px 0 var(--mp-gold-600)}

.mp-lead-post{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;
  border:3px solid var(--mp-gold);border-radius:var(--mp-radius-lg);overflow:hidden;
  box-shadow:var(--mp-shadow-lift);margin-bottom:1.6rem}
@media (max-width:760px){.mp-lead-post{grid-template-columns:1fr}}
.mp-lead-post__media{min-height:260px;position:relative;
  background:repeating-linear-gradient(135deg,#7a2bd6 0 40px,#1f3ecd 40px 80px,#ff2e9a 80px 120px,#ffc422 120px 160px)}
.mp-lead-post__flag{position:absolute;top:1rem;left:1rem}
.mp-lead-post__body{padding:clamp(1.4rem,3vw,2rem)}
.mp-lead-post__body h2{font-family:var(--mp-font-display);font-size:clamp(1.4rem,3vw,1.9rem);
  line-height:1.18;margin:.6rem 0 .7rem}
.mp-lead-post__body h2 a{color:var(--mp-ink)}
.mp-lead-post__body h2 a:hover{color:var(--mp-purple);text-decoration:none}

.mp-postgrid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.mp-post-card{background:#fff;border:2px solid var(--mp-line);border-radius:var(--mp-radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--mp-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.mp-post-card:hover{transform:translateY(-5px);box-shadow:var(--mp-shadow-lift);border-color:var(--mp-gold)}
.mp-post-card__media{aspect-ratio:16/9;position:relative}
.mp-post-card__media--a{background:repeating-linear-gradient(135deg,#7a2bd6 0 26px,#ff2e9a 26px 52px)}
.mp-post-card__media--b{background:repeating-linear-gradient(135deg,#1f3ecd 0 26px,#ffc422 26px 52px)}
.mp-post-card__media--c{background:repeating-linear-gradient(135deg,#e0272f 0 26px,#ffc422 26px 52px)}
.mp-post-card__media--d{background:repeating-linear-gradient(135deg,#0d1550 0 26px,#4a6bff 26px 52px)}
.mp-post-card__media--e{background:repeating-linear-gradient(135deg,#ff2e9a 0 26px,#ffc422 26px 52px)}
.mp-post-card__media--f{background:repeating-linear-gradient(135deg,#5f1cb0 0 26px,#39d0e8 26px 52px)}
.mp-post-card__flag{position:absolute;top:.8rem;left:.8rem}
.mp-post-card__body{padding:1.2rem;display:flex;flex-direction:column;flex:1}
.mp-post-card__body h3{font-size:1.12rem;line-height:1.32;margin:0 0 .5rem;font-weight:800}
.mp-post-card__body h3 a{color:var(--mp-ink)}
.mp-post-card__body h3 a:hover{color:var(--mp-purple);text-decoration:none}
.mp-post-card__body p{margin:0 0 1rem;font-size:.95rem;color:var(--mp-ink-70)}
.mp-post-card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding-top:.8rem;border-top:1px dashed var(--mp-line);
  font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--mp-ink-70)}
.mp-post-card__foot a{color:var(--mp-magenta)}

/* pagination — ticket buttons */
.mp-pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem}
.mp-pagination a,.mp-pagination span{min-width:46px;height:46px;display:grid;place-items:center;
  border-radius:12px;font-family:var(--mp-font-util);font-size:1.15rem;letter-spacing:.06em;
  background:#fff;border:2px solid var(--mp-line);color:var(--mp-ink-70);padding-inline:.8rem}
.mp-pagination a:hover{border-color:var(--mp-magenta);color:var(--mp-magenta);text-decoration:none}
.mp-pagination .is-current{background:linear-gradient(180deg,var(--mp-gold-200),var(--mp-gold));
  border-color:var(--mp-gold);color:#4a3200;box-shadow:0 4px 0 var(--mp-gold-600)}

/* archive intro / seo text */
.mp-archive-intro{background:#fff;border:2px solid var(--mp-line);border-radius:var(--mp-radius-lg);
  padding:clamp(1.3rem,3vw,2rem);margin-top:2.4rem;box-shadow:var(--mp-shadow)}
.mp-archive-intro h2{font-family:var(--mp-font-display);font-size:1.5rem;margin:0 0 .7rem}
.mp-archive-intro p{color:var(--mp-ink-70);margin:0 0 .9rem}
.mp-archive-intro p:last-child{margin-bottom:0}

/* ============================================================
   RESPONSIBLE GAMING BLOCK (page template)
   ============================================================ */
.mp-rg{background:#101538;color:#dfe3ff;border-radius:var(--mp-radius-lg);
  padding:clamp(1.6rem,4vw,2.4rem);border:1px solid rgba(255,255,255,.14);margin:2rem 0}
.mp-rg__flag{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mp-font-util);
  text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);padding:.35rem 1rem;border-radius:999px;margin-bottom:1rem;color:#fff}
.mp-rg h3{font-family:var(--mp-font-display);font-size:1.4rem;margin:0 0 .7rem;color:#fff}
.mp-rg p,.mp-rg li{color:#bcc3ef}
.mp-rg ul{margin:.8rem 0 0;padding-left:1.2rem}

/* ============================================================
   POPUP BANNER (Customizer-controlled)
   ============================================================ */
.mp-pop-overlay{position:fixed;inset:0;z-index:300;background:rgba(9,14,60,.72);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:1.2rem;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.mp-pop-overlay.is-open{opacity:1;visibility:visible}
.mp-pop{position:relative;width:min(560px,100%);border-radius:var(--mp-radius-lg);overflow:hidden;
  border:4px solid var(--mp-gold);box-shadow:0 0 0 8px rgba(255,196,34,.16),var(--mp-shadow-lift);
  background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(255,46,154,.5),transparent 70%),
             linear-gradient(160deg,var(--mp-purple),var(--mp-blue-800));
  color:#fff;transform:translateY(22px) scale(.97);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.mp-pop-overlay.is-open .mp-pop{transform:none}
.mp-pop::before{content:"";position:absolute;top:6px;left:14px;right:14px;height:12px;
  background-image:radial-gradient(circle,var(--mp-gold-200) 3.5px,rgba(255,196,34,.25) 4px,transparent 4.5px);
  background-size:26px 12px;background-repeat:repeat-x;animation:mp-bulbs 1.4s steps(2) infinite}
@keyframes mp-bulbs{0%{background-position:0 0;opacity:1}50%{background-position:13px 0;opacity:.55}100%{background-position:0 0;opacity:1}}
.mp-pop__close{position:absolute;top:.7rem;right:.7rem;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(9,14,60,.75);border:2px solid rgba(255,255,255,.4);color:#fff;font-size:1.1rem;
  cursor:pointer;display:grid;place-items:center;line-height:1}
.mp-pop__close:hover{background:var(--mp-red);border-color:var(--mp-red)}

/* bottom-bar variant */
.mp-popbar{position:fixed;left:0;right:0;bottom:0;z-index:290;transform:translateY(110%);
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
  background:linear-gradient(90deg,var(--mp-magenta),var(--mp-purple) 55%,var(--mp-blue));
  border-top:4px solid var(--mp-gold);box-shadow:0 -10px 30px rgba(9,14,60,.4);color:#fff}
.mp-popbar.is-open{transform:none}
.mp-popbar__close{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);color:#fff;
  width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;flex:none}

/* corner card variant */
.mp-popcorner{position:fixed;right:1.2rem;bottom:1.2rem;z-index:290;width:min(330px,calc(100vw - 2.4rem));
  border-radius:var(--mp-radius-lg);overflow:hidden;border:3px solid var(--mp-gold);color:#fff;
  background:linear-gradient(160deg,var(--mp-purple),var(--mp-blue-800));box-shadow:var(--mp-shadow-lift);
  transform:translateY(20px) scale(.96);opacity:0;visibility:hidden;
  transition:all .28s cubic-bezier(.2,.8,.3,1)}
.mp-popcorner.is-open{transform:none;opacity:1;visibility:visible}
.mp-popcorner__close{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;border-radius:50%;
  background:rgba(9,14,60,.7);border:2px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:.95rem;line-height:1}


/* ============================================================
   FOOTER
   ============================================================ */
.mp-footer{background:var(--mp-blue-900);color:#a8b0e8;padding-block:2.6rem 1.4rem;font-size:.94rem;margin-top:0}
.mp-footer__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.mp-footer h4{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.14em;
  color:var(--mp-gold);font-size:.95rem;margin:0 0 .8rem}
.mp-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mp-footer a{color:#c3caf5}
.mp-footer a:hover{color:var(--mp-gold)}
.mp-footer__bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;color:#8d96da;font-size:.86rem}
.mp-footer__age{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:2px solid var(--mp-gold);color:var(--mp-gold);font-family:var(--mp-font-display);font-size:.85rem;flex:none}

@media (max-width:860px){
  .mp-menu{position:absolute;top:100%;left:0;right:0;background:var(--mp-blue-800);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--mp-gutter) 1rem;
    display:none;border-bottom:3px solid var(--mp-gold)}
  .mp-menu.is-open{display:flex}
  .mp-menu > li > a{padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0}
  .mp-sub{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    background:rgba(0,0,0,.2);border-radius:0;padding-left:1rem;display:none}
  .mp-menu li.is-open > .mp-sub{display:block}
  .mp-navtoggle{display:inline-flex}
  .mp-header__cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   WORDPRESS INTEGRATION — classes the templates add on top of
   the approved previews.
   ============================================================ */

/* Accessibility helpers */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
.screen-reader-text:focus{
  background:var(--mp-gold);clip:auto!important;clip-path:none;color:#14164a;
  display:block;font-size:1rem;height:auto;left:1rem;line-height:normal;padding:.8rem 1.2rem;
  text-decoration:none;top:1rem;width:auto;z-index:400;border-radius:10px;
}
.mp-skip:focus{position:fixed}

/* Header fallback logo mark (shown until a logo is uploaded) */
.mp-logo__mark{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:radial-gradient(circle at 30% 25%,var(--mp-gold-200),var(--mp-gold) 45%,var(--mp-red) 100%);
  display:grid;place-items:center;
  box-shadow:0 4px 0 var(--mp-gold-600), inset 0 0 0 3px rgba(255,255,255,.55);
  font-family:var(--mp-font-display);font-size:1.35rem;color:#4a1200;text-transform:uppercase;
}
.mp-menu__cta{margin-left:1rem}

/* The header button is a menu item, so the generic mobile link rules
   (.mp-menu > li > a) would strip its padding and radius. Re-assert them
   at higher specificity instead of fighting with !important. */
@media (max-width:860px){
  .mp-menu > li.mp-menu__cta{margin-left:0;margin-top:1rem}
  .mp-menu > li.mp-menu__cta > a.mp-header__cta{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;
    padding:.8rem 1.6rem;
    border-radius:999px;
    border-bottom:0;
    text-align:center;
    line-height:1.1;
  }
  .mp-menu > li.mp-menu__cta > a.mp-header__cta:hover{
    color:#4a3200;
    border-bottom:0;
  }
}

/* Featured images inside the decorative frames */
.mp-featured img{width:100%;height:100%;object-fit:cover}
.mp-post-card__media{display:block;overflow:hidden}
.mp-post-card__media img{width:100%;height:100%;object-fit:cover}
.mp-lead-post__media{display:block;overflow:hidden}
.mp-lead-post__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.mp-mini__thumb{overflow:hidden}
.mp-mini__thumb img{width:100%;height:100%;object-fit:cover}
.mp-mini{text-decoration:none}
.mp-mini:hover strong{color:var(--mp-purple)}

/* Promo card in the games grid */
.mp-card--promo{
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,var(--mp-blue-800),var(--mp-purple));
  border-color:var(--mp-gold);color:#fff;
}
.mp-card--promo p{color:rgba(255,255,255,.88)}
.mp-card--promo .mp-btn{margin-top:1rem;align-self:flex-start}

/* WordPress pagination markup */
.mp-pagination{display:block}
.mp-pagination .nav-links{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;
}
.mp-pagination .page-numbers{
  min-width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  font-family:var(--mp-font-util);font-size:1.15rem;letter-spacing:.06em;
  background:#fff;border:2px solid var(--mp-line);color:var(--mp-ink-70);padding-inline:.8rem;
  text-decoration:none;
}
.mp-pagination a.page-numbers:hover{border-color:var(--mp-magenta);color:var(--mp-magenta)}
.mp-pagination .page-numbers.current{
  background:linear-gradient(180deg,var(--mp-gold-200),var(--mp-gold));
  border-color:var(--mp-gold);color:#4a3200;box-shadow:0 4px 0 var(--mp-gold-600);
}
.mp-pagination .page-numbers.dots{border:0;background:transparent;box-shadow:none}

/* Search form */
.mp-searchform{display:flex;gap:.5rem;flex-wrap:wrap}
.mp-searchform input[type="search"]{
  flex:1;min-width:150px;padding:.7rem .9rem;border:2px solid var(--mp-line);
  border-radius:12px;font:inherit;background:#fff;color:var(--mp-ink);
}
.mp-searchform input[type="search"]:focus{border-color:var(--mp-magenta);outline:none}

/* Filter chips render as links on archives */
a.mp-filter{text-decoration:none;display:inline-flex;align-items:center}
a.mp-filter:hover{text-decoration:none}

/* Footer menu */
.mp-footer__menu{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;padding:0;margin:1.6rem 0 0}
.mp-footer__menu a{font-family:var(--mp-font-util);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem}
.mp-footer .mp-logo__text{font-size:1.2rem}
.mp-footer .mp-logo__img{height:40px}

/* Copy-link feedback */
.mp-copy.is-copied{background:var(--mp-gold)!important;color:#4a3200!important}

/* Editor-inserted media inside prose */
.mp-prose img{border-radius:var(--mp-radius);height:auto}
.mp-prose .wp-caption{max-width:100%}
.mp-prose .alignleft{float:left;margin:0 1.4rem 1rem 0}
.mp-prose .alignright{float:right;margin:0 0 1rem 1.4rem}
.mp-prose .aligncenter{margin-inline:auto}
.mp-prose .wp-block-image{margin:1.8rem 0}
.mp-pagelinks{
  margin:1.6rem 0;font-family:var(--mp-font-util);text-transform:uppercase;
  letter-spacing:.1em;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
}

/* Comments inherit the card look */
.comment-list{list-style:none;padding:0}
.comment-body{
  background:#fff;border:2px solid var(--mp-line);border-radius:var(--mp-radius);
  padding:1.2rem;margin-bottom:1rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;padding:.7rem .9rem;border:2px solid var(--mp-line);border-radius:12px;font:inherit;
}

/* ============================================================
   POPUP BANNER — image only (v1.0.1)
   The banner is a single clickable image; no text is rendered,
   so nothing can overlap or dim the artwork.
   ============================================================ */
.mp-pop--image{
  background:transparent;
  padding:0;
  line-height:0;
}
.mp-pop__link{display:block;line-height:0}
.mp-pop__img{
  display:block;width:100%;height:auto;
  border-radius:calc(var(--mp-radius-lg) - 6px);
}
.mp-pop--bare{border:0;box-shadow:var(--mp-shadow-lift)}
.mp-pop--bare::before{display:none}
.mp-pop--image.mp-pop--bare .mp-pop__img{border-radius:var(--mp-radius-lg)}

/* Bottom bar */
.mp-popbar--image{
  background:transparent;border-top:0;box-shadow:none;
  display:flex;justify-content:center;align-items:flex-end;
  padding:0 1rem 1rem;pointer-events:none;
}
.mp-popbar--image .mp-popbar__media{
  position:relative;width:100%;pointer-events:auto;line-height:0;
  border:4px solid var(--mp-gold);border-radius:var(--mp-radius-lg);overflow:hidden;
  box-shadow:var(--mp-shadow-lift);
}
.mp-popbar--image.mp-pop--bare .mp-popbar__media{border:0}
.mp-popbar--image .mp-popbar__close{
  position:absolute;top:.6rem;right:.6rem;pointer-events:auto;
  background:rgba(9,14,60,.78);border:2px solid rgba(255,255,255,.45);
}
.mp-popbar--image .mp-popbar__close:hover{background:var(--mp-red);border-color:var(--mp-red)}

/* Corner card */
.mp-popcorner--image{line-height:0;background:transparent}
.mp-popcorner--image.mp-pop--bare{border:0}

/* Close buttons sit above the artwork in every layout */
.mp-pop__close,
.mp-popcorner__close{z-index:4}

@media (max-width:700px){
  .mp-popbar--image{padding:0 .6rem .6rem}
}

/* ============================================================
   CTA BAND — strapline (v1.0.2)
   Its own class rather than an inline style, so the centring from
   .mp-cta p is not overridden by a shorthand margin.
   ============================================================ */
.mp-cta__strapline{
  max-width:none;
  margin:1.4rem auto 0;
  font-family:var(--mp-font-util);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.88rem;
  text-align:center;
}

/* ============================================================
   HEADER HARDENING (v1.0.4)
   Scoped under .mp-header so a parent theme or plugin's generic
   button/anchor styles cannot repaint the nav toggle or the CTA.
   ============================================================ */
.mp-header .mp-navtoggle{
  background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:10px;
  box-shadow:none;
  font-size:1.2rem;
  line-height:1;
  padding:0;
}
.mp-header .mp-navtoggle:hover,
.mp-header .mp-navtoggle:focus{
  background:rgba(255,255,255,.22);
  border-color:var(--mp-gold);
  color:var(--mp-gold);
}
.mp-header .mp-navtoggle[aria-expanded="true"]{
  background:var(--mp-gold);
  border-color:var(--mp-gold);
  color:#4a3200;
}
.mp-header .mp-btn--gold{
  background:linear-gradient(180deg,var(--mp-gold-200),var(--mp-gold));
  color:#4a3200;
}

/* Menu text should never be clipped by a narrow viewport */
.mp-menu > li > a{word-break:normal;overflow-wrap:anywhere}

/* Keep the open menu scrollable on short screens */
@media (max-width:860px){
  .mp-menu.is-open{
    max-height:calc(100vh - 72px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ============================================================
   MOBILE PASS (v1.0.5)
   Everything below is about fitting a 320–430px viewport without
   horizontal scroll, oversized type, or a header that eats the screen.
   ============================================================ */

/* Nothing should ever push the page sideways */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}

@media (max-width:860px){

  /* --- Header: shorter bar, logo capped so the toggle always fits --- */
  .mp-header__inner{min-height:60px;gap:.6rem}
  .mp-logo__img{height:38px;max-width:58vw;object-fit:contain}
  .mp-logo__mark{width:38px;height:38px;font-size:1.15rem}
  .mp-logo__text{font-size:1.1rem}
  .mp-logo__sub{font-size:.62rem;letter-spacing:.16em}
  .mp-navtoggle{width:42px;height:38px;flex:none}
  .mp-menu.is-open{max-height:calc(100vh - 60px)}

  /* --- Hero --- */
  .mp-hero{padding-block:1.8rem 2.6rem}
  .mp-bunting{
    flex-wrap:nowrap;overflow:hidden;height:34px;margin-bottom:1.2rem;
  }
  .mp-bunting li{width:26px;height:34px}
  .mp-booth{padding:1.6rem 1.1rem;border-width:3px}
  .mp-hero__title{font-size:clamp(2.2rem,13vw,3rem);text-shadow:0 3px 0 var(--mp-purple-600)}
  .mp-hero__tagline{letter-spacing:.12em}
  .mp-hero__sub{font-size:1rem}
  .mp-hero__cta{flex-direction:column;align-items:stretch}
  .mp-hero__cta .mp-btn{width:100%;justify-content:center}
  .mp-trust{gap:.45rem}
  .mp-trust li{font-size:.88rem;padding:.35rem .8rem}

  /* --- Buttons sized for thumbs, not desktop --- */
  .mp-btn{font-size:1rem;padding:.75rem 1.3rem}
  .mp-btn--sm{font-size:.9rem;padding:.55rem 1rem}

  /* --- Sections --- */
  :root{--mp-section-y:2.6rem}
  .mp-h2{font-size:clamp(1.5rem,6.4vw,1.9rem)}
  .mp-lede{font-size:1.02rem}
  .mp-grid{gap:1rem}
  .mp-card{padding:1.2rem}
  .mp-quote{padding:1.1rem 1.2rem}
  .mp-quote p{font-size:1.15rem}

  /* --- Page / post hero --- */
  .mp-phero{padding-block:1.6rem}
  .mp-phero__title{font-size:clamp(1.6rem,7.6vw,2.2rem);max-width:none}
  .mp-phero__sub{font-size:1rem}
  .mp-meta{gap:.35rem 1rem;font-size:.85rem}
  .mp-crumbs{font-size:.82rem}

  /* --- Article body --- */
  .mp-layout{padding-block:2.2rem;gap:1.8rem}
  .mp-prose{font-size:1rem}
  .mp-prose > p:first-of-type{font-size:1.08rem}
  .mp-prose h2{font-size:1.4rem;margin-top:1.9rem}
  .mp-prose h1{font-size:1.6rem;margin-top:2rem}
  .mp-prose h3{font-size:1.14rem;margin-top:1.5rem}
  .mp-prose h4{font-size:1.03rem}
  .mp-prose h5,.mp-prose h6{font-size:.94rem}
  .mp-prose h1,.mp-prose h2,.mp-prose h3,
  .mp-prose h4,.mp-prose h5,.mp-prose h6{scroll-margin-top:80px}
  .mp-featured{aspect-ratio:16/10;border-width:3px}
  .mp-author{flex-direction:column;gap:.9rem;padding:1.2rem}
  .mp-adjacent .mp-next{text-align:left}
  .mp-share a{width:42px;height:42px}

  /* Wide tables scroll inside their own box instead of the page */
  .mp-prose table{display:block;overflow-x:auto;white-space:nowrap}
  .mp-prose td,.mp-prose th{white-space:normal;min-width:8rem}

  /* --- Archive --- */
  .mp-filters{gap:.4rem}
  .mp-filter{font-size:.92rem;padding:.4rem .9rem}
  .mp-lead-post{border-width:2px}
  .mp-lead-post__media{min-height:180px}
  .mp-pagination .page-numbers{min-width:42px;height:42px;font-size:1.05rem}

  /* --- Bonus cards --- */
  .mp-bonus{padding:1.3rem;border-width:2px}
  .mp-bonus__amount{font-size:clamp(1.9rem,9vw,2.4rem)}

  /* --- Tabs --- */
  .mp-tabs__list{gap:.4rem}
  .mp-tab{font-size:.95rem;padding:.5rem 1rem}
  .mp-steps li{padding:.85rem 1rem;gap:.75rem}

  /* --- FAQ --- */
  .mp-faq summary{padding:.85rem 1rem;font-size:.98rem}
  .mp-faq__body{padding:0 1rem 1rem}

  /* --- CTA + footer --- */
  .mp-cta{padding-block:2.6rem}
  .mp-cta h2{font-size:clamp(1.6rem,7.4vw,2.1rem)}
  .mp-cta p{font-size:1.02rem}
  .mp-cta .mp-btn{width:100%;justify-content:center}
  .mp-footer__bottom{flex-direction:column;align-items:flex-start;gap:.8rem}

  /* --- Popup --- */
  .mp-popcorner{right:.7rem;bottom:.7rem}
  .mp-pop-overlay{padding:.8rem}
}

/* Very narrow phones (320–360px) */
@media (max-width:380px){
  :root{--mp-gutter:.9rem}
  .mp-logo__img{height:34px;max-width:52vw}
  .mp-hero__title{font-size:clamp(2rem,14vw,2.6rem)}
  .mp-trust li{width:100%;justify-content:center}
  .mp-tab{font-size:.9rem;padding:.45rem .85rem}
}

/* Landscape phones: don't let a tall hero swallow the viewport */
@media (max-height:520px) and (orientation:landscape){
  .mp-hero{padding-block:1.2rem 1.8rem}
  .mp-bunting{display:none}
  .mp-menu.is-open{max-height:70vh}
}

/* ============================================================
   HERO BACKGROUND CAROUSEL (v1.0.7)
   Field colours are sampled from the MegaPerya lockup and scoped
   to the hero, so the header and the rest of the site keep the
   brighter blue they were designed around.
   ============================================================ */
.mp-hero--carousel{
  --mp-hero-deep:#111360;
  --mp-hero-mid:#161766;
  --mp-hero-top:#22236b;
  --mp-hero-glow:#2f2a8c;
  background:
    radial-gradient(ellipse 90% 70% at 50% 15%,var(--mp-hero-glow) 0%,transparent 62%),
    linear-gradient(170deg,var(--mp-hero-top) 0%,var(--mp-hero-mid) 55%,var(--mp-hero-deep) 100%);
}

.mp-hero__slides{position:absolute;inset:0;z-index:-3;overflow:hidden}
.mp-hero__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
}
.mp-hero__slide picture,
.mp-hero__slide img{display:block;width:100%;height:100%}
.mp-hero__slide img{object-fit:cover;object-position:center}
.mp-hero__slide.is-active{opacity:1}

/* Slow zoom, only when the Customizer asks for it */
.mp-hero--zoom .mp-hero__slide img{transform:scale(1.04);transition:transform .8s ease}
.mp-hero--zoom .mp-hero__slide.is-active img{animation:mp-kenburns 9s ease-out forwards}
@keyframes mp-kenburns{from{transform:scale(1.04)}to{transform:scale(1.13)}}

/* Overlay keeps the headline readable over busy artwork.
   --mp-scrim is set inline from the Customizer value. */
.mp-hero__scrim{
  position:absolute;inset:0;z-index:-2;
  --mp-scrim:.72;
  background:
    linear-gradient(180deg,
      rgba(17,19,96,calc(var(--mp-scrim) * 1))    0%,
      rgba(22,23,102,calc(var(--mp-scrim) * .78)) 45%,
      rgba(17,19,96,calc(var(--mp-scrim) * 1.15)) 100%),
    radial-gradient(ellipse 70% 60% at 50% 40%,rgba(107,47,201,.38),transparent 70%);
}

/* Slide dots */
.mp-hero__dotnav{
  position:relative;display:flex;gap:.5rem;justify-content:center;
  margin-top:1.6rem;
}
.mp-hero__dotnav button{
  width:34px;height:6px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);
  transition:background .2s ease,width .2s ease;
}
.mp-hero__dotnav button:hover{background:rgba(255,255,255,.6)}
.mp-hero__dotnav button[aria-current="true"]{background:var(--mp-gold);width:52px}

@media (max-width:860px){
  .mp-hero__dotnav{margin-top:1.1rem}
  .mp-hero__dotnav button{width:26px}
  .mp-hero__dotnav button[aria-current="true"]{width:40px}
}

@media (prefers-reduced-motion:reduce){
  .mp-hero--zoom .mp-hero__slide.is-active img{animation:none;transform:none}
  .mp-hero__slide{transition:none}
}

/* ============================================================
   HERO WORDMARK (v1.0.9)
   Two-ring outline, matching the logo build-up:
   fill -> amber inner ring -> black outer keyline -> drop shadow.
   The stacks live in custom properties so the fill colour is the
   only thing that differs between MEGA and PERYA.
   ============================================================ */
:root{
  --mp-mark-red:#f90530;
  --mp-mark-yellow:#ffeb00;
  --mp-mark-amber:#fcc100;
  --mp-mark-amber-deep:#c08c00;
  --mp-mark-black:#0b0600;

  /* Shadows paint in order, first on top: amber sits inside, black outside. */
  --mp-mark-outline:
    -2px -2px 0 var(--mp-mark-amber),
     2px -2px 0 var(--mp-mark-amber),
    -2px  2px 0 var(--mp-mark-amber),
     2px  2px 0 var(--mp-mark-amber),
     0   -3px 0 var(--mp-mark-amber),
     0    3px 0 var(--mp-mark-amber),
    -3px  0   0 var(--mp-mark-amber),
     3px  0   0 var(--mp-mark-amber),
     0    4px 0 var(--mp-mark-amber-deep),

    -4px -4px 0 var(--mp-mark-black),
     4px -4px 0 var(--mp-mark-black),
    -4px  4px 0 var(--mp-mark-black),
     4px  4px 0 var(--mp-mark-black),
     0   -5px 0 var(--mp-mark-black),
     0    5px 0 var(--mp-mark-black),
    -5px  0   0 var(--mp-mark-black),
     5px  0   0 var(--mp-mark-black),
    -3px -5px 0 var(--mp-mark-black),
     3px -5px 0 var(--mp-mark-black),
    -3px  5px 0 var(--mp-mark-black),
     3px  5px 0 var(--mp-mark-black),
    -5px -3px 0 var(--mp-mark-black),
     5px -3px 0 var(--mp-mark-black),
    -5px  3px 0 var(--mp-mark-black),
     5px  3px 0 var(--mp-mark-black),

     0    8px 0 var(--mp-mark-black),
     0   14px 24px rgba(0,0,0,.55);

  --mp-mark-outline-sm:
    -1px -1px 0 var(--mp-mark-amber),
     1px -1px 0 var(--mp-mark-amber),
    -1px  1px 0 var(--mp-mark-amber),
     1px  1px 0 var(--mp-mark-amber),
     0   -2px 0 var(--mp-mark-amber),
     0    2px 0 var(--mp-mark-amber),
    -2px  0   0 var(--mp-mark-amber),
     2px  0   0 var(--mp-mark-amber),

    -3px -3px 0 var(--mp-mark-black),
     3px -3px 0 var(--mp-mark-black),
    -3px  3px 0 var(--mp-mark-black),
     3px  3px 0 var(--mp-mark-black),
     0   -3px 0 var(--mp-mark-black),
     0    3px 0 var(--mp-mark-black),
    -3px  0   0 var(--mp-mark-black),
     3px  0   0 var(--mp-mark-black),

     0    5px 0 var(--mp-mark-black),
     0    9px 16px rgba(0,0,0,.5);
}

/* Layered shadows rather than -webkit-text-stroke: a stroke cannot
   coexist with a clipped gradient fill, and only gives one ring. */
.mp-hero--mark-logo .mp-hero__title{
  color:var(--mp-mark-red);
  text-shadow:var(--mp-mark-outline);
}

.mp-hero--mark-logo .mp-hero__title em{
  font-style:normal;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--mp-mark-yellow);
  filter:none;
  text-shadow:var(--mp-mark-outline);
}

@media (max-width:860px){
  .mp-hero--mark-logo .mp-hero__title,
  .mp-hero--mark-logo .mp-hero__title em{text-shadow:var(--mp-mark-outline-sm)}
}

/* ============================================================
   DEFAULT HERO FIELD (v1.0.11)
   Soft carnival bokeh built from gradients, so the hero looks
   finished before any carousel slides are uploaded. Static -
   nothing rotates.
   ============================================================ */
.mp-hero{
  background:
    radial-gradient(circle 220px at 12% 22%,rgba(120,90,255,.30),transparent 70%),
    radial-gradient(circle 260px at 84% 18%,rgba(70,130,255,.26),transparent 72%),
    radial-gradient(circle 200px at 22% 78%,rgba(255,60,150,.20),transparent 70%),
    radial-gradient(circle 240px at 74% 82%,rgba(120,60,220,.26),transparent 72%),
    radial-gradient(circle 180px at 50% 45%,rgba(90,110,255,.20),transparent 70%),
    radial-gradient(ellipse 85% 65% at 50% 8%,rgba(122,43,214,.75),transparent 72%),
    linear-gradient(168deg,#2a2f8f 0%,#1d246a 48%,#141a5e 100%);
}