/* ===========================
   MGM Landing — Updated CSS
   Date: 2025-11-05
   Notes:
   - Fixed missing semicolons & typos
   - Consolidated duplicate rules (esp. h2, grid classes)
   - Defined missing CSS variables (--accent-1/2, --color-gold-light)
   - Corrected invalid clamp() on h3
   - Ensured grids are display:grid and responsive
   - Corrected selector typo (.who-for → #who-for)
   - Preserved MGM navy–gold brand
   =========================== */

/* -------- Variables -------- */
:root{
  --navy:#0d1b2a; --navy-2:#14243a;
  --gold:#d4af37; --gold-2:#f3cd62;
  --white:#fff; --muted:#8ea3b5;
  --color-navy: #0d1b2a;
  --color-navy-dark: #14243a;
  --color-gold: #d4af37;
  --color-white: #f1f2f3;
  --color-text: var(--color-navy);
  --color-gold-light:#f3cd62;     /* for legacy refs */
  --accent-1:#d4af37;             /* gradient start */
  --accent-2:#f3cd62;             /* gradient end   */

  --font-headline:'Playfair Display', Cambria, Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* -------- Base Reset -------- */
* { box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(1200px 600px at 70% -20%, rgba(212,175,55,.22), rgba(20,36,58,0)),
    linear-gradient(180deg,var(--navy),var(--navy-2));
  color:var(--white);
  font-family: var(--font-body);
  line-height:1.6;
  height: auto;
}
img,video{max-width:100%;height:auto;display:block;}
p, .emph, .card p { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* -------- Typography -------- */
h1,h2,h3{ font-family:var(--font-headline); line-height:1.2; }
h1{ font-size:clamp(2.5rem,6vw,4.5rem); font-weight:700; }
/* Single source of truth for H2 */
h2{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:600;
  text-align:center;
  margin-bottom:2.5rem;
  color:var(--color-gold-light);
}
h3{
  /* Fix: min <= max */
  font-size:clamp(1rem,3vw,1.6rem);
  margin-bottom:1rem;
  font-weight:400;
  text-align:center;
}

/* -------- Layout Utilities -------- */
.mgm-wrap{max-width:100%;margin:0;padding:0;}
.mgm-container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.mgm-section{padding:1rem 0;}
.mgm-section p { text-align:justify; }
.mgm-center{text-align:center;}
.mgm-small{font-size:12px;color:#a8b3c2;}
.muted { color: var(--muted); }
.avatar { width:44px;height:44px;border-radius:50%;background:#1a2a42;border:1px solid rgba(255,255,255,0.08); }
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(243,205,98,0.08);
  border:1px solid rgba(243,205,98,0.25);
  color:var(--gold-2);
  border-radius:999px;
  padding:8px 12px;
  font-weight:600;
}
.small{ font-size:12px; color:#a8b3c2; }

/* -------- Buttons -------- */
.mgm-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;justify-content:center;}
.mgm-btn{border:0;border-radius:999px;padding:14px 22px;font-weight:700;font-size:16px;cursor:pointer;display:inline-block;text-decoration:none;transition:transform .15s ease;}
.mgm-btn--primary{color:#0a0f17;background:linear-gradient(135deg,var(--gold),var(--gold-2));box-shadow:0 6px 16px rgba(212,175,55,.35);}
.mgm-btn--ghost{color:#e6edf4;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.mgm-btn--contrast{background:#0a2342;color:var(--gold-2);}
.mgm-btn:hover{transform:translateY(-1px);}

/* -------- Hero -------- */
.mgm-hero{
  display:flex;align-items:center;min-height:100vh;
  background:linear-gradient(113deg,#202a43 0%,#1c518b 100%);
}
.mgm-headline{
  font-family:"Playfair Display",serif;font-weight:700;
  font-size:clamp(2.5rem,6vw,4.5rem);
  margin:10px 0 12px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mgm-subhead{color:#e6edf4;font-size:clamp(1rem,2vw,1.2rem);}

/* Outer visual block width */
.mgm-hero__visual{ max-width:1080px; margin:0 auto; }

/* Two columns on desktop */
.mgm-dash-sim{
  display:grid;
  grid-template-columns:1.25fr 1fr; /* image : QR/info */
  gap:24px;
  align-items:stretch;
}

/* Media element in hero */
.mgm-hero-img{
  width:100%;height:auto;display:block;border-radius:14px;
}

/* Card look */
.mgm-pane{ background:#0f1217; border-radius:14px; padding:16px; }

/* -------- QR / Badge -------- */
.mgm-badge{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  margin:6px auto 12px; /* FIX: semicolon added */
  background:rgba(243,205,98,0.08);
  border:1px solid rgba(243,205,98,0.25);
  color:var(--gold-2);
  border-radius:999px;
  padding:8px 12px;
  font-weight:600;
}
.mgm-qr{background:#0b1421;border:1px dashed rgba(243,205,98,.4);border-radius:12px;padding:12px;display:inline-flex;align-items:center;gap:12px;}
.mgm-qr img{width:96px;height:96px;background:#fff;border-radius:8px;object-fit:contain;}
.mgm-muted{color:var(--muted);}
.mgm-ref{font-weight:800;font-size:20px;}

/* -------- Grids -------- */
.mgm-grid{ display:grid; gap:1rem; }
.mgm-grid-3{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.mgm-grid-4{ display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:stretch; justify-items:center; }

/* -------- Two-Column Sections -------- */
.mgm-section.two-col{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:2.5rem;
  align-items:center;
  padding:6rem 2rem;
  max-width:1200px;
  margin:0 auto;
}
.mgm-section.two-col.swap{ grid-template-columns:0.9fr 1.1fr; }

.mgm-section .col.text .card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:1.2rem;
  padding:2.5rem 2rem;
  backdrop-filter:blur(6px);
  color:#eaf2ff;
}
.mgm-section .col.visual img{
  width:100%;height:auto;display:block;border-radius:1rem;object-fit:contain;
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
  transition:transform .4s ease, box-shadow .4s ease;
}
.mgm-section .col.visual img:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,0.45); }

.sec-title{ font-size:2rem;font-weight:700;margin-bottom:.75rem;text-align:left; }
.bar{ width:80px;height:3px;background:linear-gradient(90deg,#d4af37,#f5e6a1);border-radius:2px;margin:1rem 0 1.5rem; }
.list{ list-style:none;padding:0;margin:1rem 0 0; }
.list li{
  display:flex;align-items:center;gap:.6rem;
  color:rgba(255,255,255,0.85);margin-bottom:.5rem;
}
.emph{
  margin-top:1rem;background:rgba(255,255,255,0.08);
  border-left:4px solid #d4af37;padding:1rem;border-radius:.5rem;font-style:italic;
}
.chips{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  background:rgba(255,255,255,0.1);
  border-radius:30px;padding:.3rem 1rem;font-size:.9rem;
  color:rgba(255,255,255,0.85);display:inline-flex;align-items:center;gap:.6rem;margin: 5px 10px;
}
.card--brand{ background:rgba(13,27,42,0.85); border:1px solid rgba(255,255,255,0.15); }
.sec-title--light{ color:#a8801f; font-family:'Playfair Display', Cambria, Georgia, serif; }

/* Icons */
.icon{ width:3.5em;height:3.5em;fill:currentColor;vertical-align:middle; }
.chip .icon{ width:2.8rem;height:2.8rem;color:#d4af37;margin-right:10px; }
.bullet svg{ width:1rem;height:1rem;color:#e85d5d; }
.list .bullet{ display:inline-flex;align-items:center;justify-content:center; }

@keyframes shimmer{ 0%{color:#d4af37;}50%{color:#f5e6a1;}100%{color:#d4af37;} }
.icon.animate{ animation:shimmer 3s ease-in-out infinite; }

/* -------- Split Card -------- */
.card--split{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:2rem; align-items:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:1.2rem; padding:2.5rem; color:#eaf2ff; backdrop-filter:blur(6px);
}
.card--split .col.text{ display:flex; flex-direction:column; justify-content:center; }
.card--split .col.visual img{
  width:100%; height:auto; border-radius:1rem; object-fit:contain;
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
  transition:transform .4s ease, box-shadow .4s ease;
}
.card--split .col.visual img:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,0.45); }

/* -------- WHO IS THIS FOR -------- */
#who-for{ padding:6rem 0; text-align:center; color:#f5f6fa; }
#who-for h2{ font-size:2.2rem; font-weight:700; color:#a8801f; margin-bottom:.75rem; }
#who-for .mgm-section-sub{ color:rgba(255,255,255,0.75); margin-bottom:3rem; font-size:1rem; }

.who-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:1.2rem;
  padding:2rem 1.5rem 2.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; transition:all .3s ease; backdrop-filter:blur(6px);
  height:100%; max-width:320px;
}
.who-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.25); box-shadow:0 12px 40px rgba(0,0,0,0.25); }
.who-img{ width:90px; height:90px; object-fit:contain; object-position:center; margin-bottom:1.2rem; flex-shrink:0; filter:brightness(1.1) contrast(1.05); }
.who-card h3{
  font-size:1.1rem; font-weight:600; color:#a8801f; margin:.8rem 0; line-height:1.3;
  min-height:3rem; display:flex; justify-content:center;
}
.who-card p{
  font-size:.95rem; color:rgba(255,255,255,0.75); line-height:1.5; margin:0; flex-grow:1;
  display:flex; justify-content:center; text-align:justify;
}

/* -------- MEET MGM -------- */
#meet-mgm .card--split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:2.5rem; align-items:center;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
  border-radius:1.5rem; padding:2.8rem 2.5rem; backdrop-filter:blur(6px);
  box-shadow:0 18px 50px rgba(0,0,0,0.25);
}
#meet-mgm .col.text p{ color:rgba(230,236,255,0.9); line-height:1.6; margin-bottom:1rem; }
.mgm-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 1.8rem; }
.mgm-pills .pill{
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px; padding:.4rem 1rem; font-size:.9rem; color:#fff;
}
.mgm-pills .pill .icon{ width:1rem; height:1rem; color:#d4af37; }
#meet-mgm .cta-row{ display:flex; align-items:center; gap:1.2rem; }
#meet-mgm .cta-row .micro{ font-size:.8rem; color:rgba(255,255,255,0.6); }

/* RIGHT VISUAL CARD (fake UI) */
.mgm-ui-card{
  background: radial-gradient(circle at top, rgba(13,27,42,0.15), rgba(2,8,17,0.5));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:1.2rem; padding:1.8rem 1.5rem 1.5rem; backdrop-filter:blur(12px);
  color:#fff; box-shadow:0 16px 40px rgba(0,0,0,0.35);
}
.mgm-ui-card .tag{
  display:inline-block; background:rgba(212,175,55,0.13);
  border:1px solid rgba(212,175,55,0.35); color:#f1e5c2;
  padding:.2rem .8rem; border-radius:999px; font-size:.88rem; letter-spacing:.02em; margin-bottom:.5rem;
}
.mgm-ui-card h3{ font-size:1.05rem; margin-bottom:.8rem; }
.mgm-ui-card h2{
  color:#a8801f; font-family:"Playfair Display",serif; font-size:30px; text-align:center; margin:0 0 10px 0;
}
.mgm-ui-card ul{ list-style:none; padding:0; margin:1rem 0 1.4rem; }
.mgm-ui-card ul li{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
  color:rgba(255,255,255,0.75); font-size:.9rem;
}
.dot{ width:10px;height:10px;border-radius:50%; }
.dot--ok{ background:#38d996; box-shadow:0 0 8px rgba(56,217,150,0.7); }
.stat-wrap{ display:flex; gap:.8rem; flex-wrap:wrap; }
.stat{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.03); border-radius:.8rem; padding:.4rem .7rem; min-width:100px; }
.stat .label{ font-size:.7rem; color:rgba(255,255,255,0.6); display:block; }
.stat .value{ font-size:1rem; font-weight:600; color:#fff; }

/* -------- Inside MGM -------- */
#inside-mgm{
  text-align:center; padding:5rem 2rem;
  background:linear-gradient(to bottom, rgba(13,27,42,0.7), rgba(2,8,17,0.9));
  border-top:1px solid rgba(255,255,255,0.05);
}
#inside-mgm h2{
  font-size:2.4rem; font-weight:700; margin-bottom:.5rem; color:#a8801f; position:relative;
}
#inside-mgm p{ text-align:center; }
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; margin-top:3rem;
}
.feature-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:1rem; padding:2rem 1.5rem; color:#fff;
  transition:all .35s ease; box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.feature-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,0.07); box-shadow:0 15px 40px rgba(0,0,0,0.35); }
.icon-wrap{
  width:60px;height:60px;border-radius:50%;margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,55,0.1); border:1px solid rgba(212,175,55,0.4); color:#d4af37;
  box-shadow:inset 0 0 12px rgba(212,175,55,0.3);
}
.icon-wrap svg{ width:28px;height:28px; }
.feature-card h3{ font-size:1.1rem;margin-bottom:.6rem;color:#f5f5f5; }
.feature-card p{ font-size:.95rem; line-height:1.6; color:rgba(230,236,255,0.85); }
.cta-center{ margin-top:3rem; text-align:center;}
.cta-center .btn--primary{
  padding:.8rem 2rem; font-weight:600; border-radius:999px;
  background:linear-gradient(135deg,#d4af37,#f7e47a); color:#0d1b2a; transition:all .3s ease; text-decoration:none;
}
.cta-center .btn--primary:hover{ background:linear-gradient(135deg,#f5d67a,#f9eaa2); }
.cta-center .micro{ margin-top:.8rem; font-size:.85rem; color:rgba(255,255,255,0.65);text-align:center; }

/* -------- Social Proof -------- */
#social-proof{ padding:6rem 0; color:#f5f6fa; text-align:center; position:relative; overflow:hidden; }
#social-proof .wrap{ max-width:960px; margin:0 auto; padding:0 1rem; }
#social-proof h2{ font-size:2.4rem; font-weight:700; margin-bottom:3rem; color:#a8801f; position:relative; }
#social-proof h2::after{
  content:""; display:block; width:80px; height:3px;
  background:linear-gradient(90deg,#d4af37,#f5e6a1); margin:1rem auto 0; border-radius:3px;
}
#social-proof .testimonial{
  display:flex; align-items:flex-start; gap:1.2rem; text-align:left;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:1.2rem; padding:1.8rem 2rem; margin:1rem 0;
  transition:all .3s ease; backdrop-filter:blur(6px); box-shadow:0 6px 24px rgba(0,0,0,0.25);
}
#social-proof .testimonial:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.3); }
#social-proof .testimonial .avatar{
  width:56px;height:56px;border-radius:50%; background:linear-gradient(135deg,#d4af37,#f5e6a1);
  flex-shrink:0; box-shadow:0 0 0 3px rgba(255,255,255,0.15); position:relative;
}
#social-proof .testimonial .avatar::after{
  content:"★"; color:#0d1b2a; font-size:1.2rem; position:absolute; inset:0; display:grid; place-items:center; font-weight:700;
}
#social-proof .testimonial p{ color:rgba(255,255,255,0.9); margin:0 0 .5rem; font-size:1rem; line-height:1.5; }
#social-proof .testimonial p.small{ font-size:.85rem; color:rgba(255,255,255,0.65); margin:0; }
#social-proof .testimonial p.muted{ font-style:italic; }

@keyframes fadeUp{ 0%{opacity:0; transform:translateY(40px);} 100%{opacity:1; transform:translateY(0);} }
#social-proof .testimonial{ opacity:0; animation:fadeUp .8s ease forwards; }
#social-proof .testimonial:nth-of-type(1){ animation-delay:.1s; }
#social-proof .testimonial:nth-of-type(2){ animation-delay:.3s; }
#social-proof .testimonial:nth-of-type(3){ animation-delay:.5s; }

/* -------- Video Frame -------- */
.mgm-video-frame{
  position:relative; background:#000; border-radius:18px; overflow:hidden;
  width:100%; max-width:960px; margin:50px auto; aspect-ratio:16/9;
  box-shadow: 0 22px 40px rgba(0,0,0,0.55), 0 8px 20px rgba(255,255,255,0.35);
}
.mgm-video-frame video,
.mgm-video-frame iframe{ width:100%; height:100%; object-fit:cover; display:block; }
.mgm-video-frame::before{
  content:""; position:absolute; inset:-15px; z-index:-1; border-radius:inherit;
  background: radial-gradient(circle, rgba(255,216,120,0.35) 0%, rgba(0,0,0,0) 70%);
  filter: blur(25px);
}

/* -------- Lists: prevent awkward breaks -------- */
.mgm-ul li,
ul.mgm-ul li,
.mgm-container .mgm-ul li{
  hyphens:none; word-break:keep-all; overflow-wrap:normal; white-space:normal; line-height:1.6;
}

/* -------- Footer -------- */
.mgm-footer{ background:#14243a; color:#fff; padding:3rem 0; border-top:5px solid var(--gold); }
.mgm-footer__links{ margin:1rem 0 2rem; display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; }
.mgm-footer__links a{ color:var(--gold); text-decoration:none; }
.mgm-footer__links a:hover{ text-decoration:underline; }
.mgm-footer__logo{ font-family:"Playfair Display",serif; font-size:1.5rem; color:var(--gold); font-weight:700; display:block; margin-bottom:.5rem; }
.mgm-logo-wrapper{ display:flex; justify-content:center; align-items:center; min-height:80px; }
.mgm-logo{ max-width:320px; height:auto; display:block; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }

/* ===========================
   Responsive Breakpoints
   =========================== */

/* 980px */
@media (max-width:980px){
  #meet-mgm .card--split{ grid-template-columns:1fr; text-align:center; }
  .mgm-pills{ justify-content:center; }
  #meet-mgm .cta-row{ justify-content:center; flex-wrap:wrap; }
  .mgm-ui-card{ max-width:360px; margin:0 auto; }
}



/* 768px */
@media (max-width:768px){
  #inside-mgm{ padding:3.5rem 1.2rem; }
  .features-grid{ gap:1.5rem; }
  #who-for{ padding:4rem 1rem; }
  .mgm-grid-4{ gap:1.2rem; }
}

/* 640px */
@media (max-width:640px){
  #who-for{ padding:4rem 1rem; } /* FIX: correct ID selector */
  .who-card{ max-width:100%; }
}

/* 560px (extra-tight phones) */
@media (max-width:560px){
  .mgm-pane{ padding:12px; border-radius:12px; }
}

/* ==== PATCH: fix grids + unify headings (place at end) ==== */

/* 1) Force 4/3/2/1 columns for WHO grid with clean breakpoints */
#who-for .mgm-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* force 4 on desktop */
  gap: 1.8rem;
  align-items: stretch;
  justify-items: stretch; /* stretch cards to full column width */
}
#who-for .who-card { max-width: none; } /* remove 320px cap that was cramping layout */
#who-for .who-img { width: 100%; height: auto; }

/* Downshift to 3 columns on large tablets/narrow laptops */
@media (max-width: 1200px) {
  #who-for .mgm-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Downshift to 2 columns on tablets */
@media (max-width: 900px) {
  #who-for .mgm-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

/* Single column on phones */
@media (max-width: 560px) {
  #who-for .mgm-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* 2) Make these section titles match “Why Most People Feel Stuck” */
#explain-title,
#problem-solution > h2,
#cta-title,
#inside-mgm > h2,
#who-for > h2,
#meet-mgm .sec-title,
.mgm-title {
  font-family: 'Playfair Display', Cambria, Georgia, serif;
  color: #a8801f; /* same as .sec-title--light */
  font-weight: 700;
  line-height: 1.2;
}

/* Give them the same size behavior you liked */
#explain-title,
#problem-solution > h2,
#cta-title,
#inside-mgm > h2,
#who-for > h2,
.mgm-title {
  font-size: clamp(2rem, 4vw, 3rem);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* 3) Safety: ensure generic .mgm-grid-4 elsewhere doesn’t override this */
.mgm-grid-4 { grid-auto-rows: auto; }

/* 4) Small tweak: cards should fill column width consistently */
#problem-solution .mgm-grid-3 > .mgm-card2,
#inside-mgm .features-grid > .feature-card {
  height: 100%;
}
/* Problem/Solution Card adjustments to contrast with dark background */
        .card[style*="#ff5757"] { background-color: var(--color-white); }
        .card[style*="#4CAF50"] { background-color: var(--color-white); }
        .card[style*="#ff5757"] h3,
        .card[style*="#4CAF50"] h3 {
             color: var(--color-navy);
        }
/* === HERO RESPONSIVE PATCH === */

/* 1) Fix headline sizing on small screens */
.mgm-headline,
header.mgm-hero h1 {
  /* scale nicely from small phones to desktop */
  font-size: clamp(1.6rem, 6.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: 0;
  max-width: 22ch;           /* keep line length readable */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* slightly larger on mid screens */
@media (min-width: 480px) {
  .mgm-headline,
  header.mgm-hero h1 {
    font-size: clamp(1.8rem, 5.5vw, 3.6rem);
  }
}

/* restore bigger cap on wide screens */
@media (min-width: 1024px) {
  .mgm-headline,
  header.mgm-hero h1 {
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    text-align: center;         /* optional: align with copy on desktop */
    /*margin-left: 0;
    margin-right: 0;*/
    max-width: 24ch;
  }
}

/* 2) Keep hero logo/text spacing compact on phones */
.mgm-logo { max-width: 220px; height: auto; }
@media (min-width: 480px) {
  .mgm-logo { max-width: 320px; }
}

/* 3) Make the hero layout breathe on mobile */
.mgm-hero { padding: 24px 0 32px; }
.mgm-hero .mgm-wrap { padding-left: 16px; padding-right: 16px; }

/* Ensure the copy block doesn't stretch too wide */
.mgm-hero__copy { max-width: 720px; margin: 0 auto; }

/* 4) Ensure the media card sits nicely below the copy on phones */
.mgm-hero__visual { margin-top: 20px; }
@media (min-width: 1024px) {
  /* On desktop, align the visual to the left with some breathing room */
  .mgm-hero__visual { margin-top: 32px; }
}

/* 5) Make the two inner panes responsive and avoid overflow */
.mgm-dash-sim { gap: 16px; }
.mgm-pane { padding: 12px; }
@media (min-width: 768px) {
  .mgm-pane { padding: 16px; }
}

/* 6) Buttons: prevent them from wrapping awkwardly on narrow devices */
.mgm-cta-row { justify-content: center; }
.mgm-btn { white-space: nowrap; }

/* 7) Ensure the viewport is respected (safety if theme injected something odd) */
html { -webkit-text-size-adjust: 100%; }

/* === HERO BALANCE + TWO-COLUMN WITHOUT CHANGING MARKUP === */

/* 1) Make the outer hero wrapper a grid so .mgm-grid (copy)
      and .mgm-hero__visual (visual) can sit side-by-side on desktop */
.mgm-hero .mgm-wrap {
  display: grid;
  gap: 28px;
}

/* Stack on mobile (default). Go 2-col on wide screens */
@media (min-width: 1024px) {
  .mgm-hero .mgm-wrap {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;               /* vertical centering of both columns */
  }
}

/* 2) Constrain widths so the left text doesn’t grow taller than needed
      and the right visual doesn’t overflow */
.mgm-hero__copy {
  max-width: 720px;    /* readable line length */
  margin: 0 auto;      /* centered on mobile */
}
@media (min-width: 1024px) {
  .mgm-hero__copy { margin: 0; }       /* align left on desktop */
}

.mgm-hero__visual {
  max-width: 560px;    /* cap the big card */
  width: 100%;
  margin: 0 auto;      /* nice on mobile */
}
@media (min-width: 1024px) {
  .mgm-hero__visual { justify-self: end; }  /* pull it to the right neatly */
}

/* 3) Headline scales better on phones (prevents “giant” look) */
.mgm-headline {
  font-size: clamp(1.6rem, 6.5vw, 3.2rem);
  line-height: 1.15;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (min-width: 1024px) {
  .mgm-headline {
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 24ch;
  }
}

/* 4) Tighten hero padding so the blocks feel aligned */
.mgm-hero { padding: 28px 0 36px; }
.mgm-hero .mgm-wrap { padding-left: 16px; padding-right: 16px; }
@media (min-width: 1024px) {
  .mgm-hero .mgm-wrap { padding-left: 24px; padding-right: 24px; }
}

/* 5) Inner visual grid: keep one-column on mobile, balanced on desktop */
.mgm-dash-sim { gap: 16px; }
@media (min-width: 900px) {
  .mgm-dash-sim { grid-template-columns: 1.25fr 1fr; }
}
.mgm-pane { padding: 12px; }
@media (min-width: 768px) {
  .mgm-pane { padding: 16px; }
}

/* 6) Buttons: avoid awkward wraps */
.mgm-cta-row { justify-content: center; }
@media (min-width: 1024px) {
  .mgm-cta-row { justify-content: flex-start; }
}
.mgm-btn { white-space: nowrap; }

/* 7) Safety: prevent any overflow from long words */
.mgm-hero p,
.mgm-hero .mgm-small { overflow-wrap: anywhere; }

/* === HERO: single-column stack (no 2-col hero) === */
.mgm-hero .mgm-wrap {
  display: block;            /* override any grid from earlier patches/themes */
  padding-left: 16px;
  padding-right: 16px;
}
.mgm-hero { padding: 28px 0 36px; }

/* Copy block: centered on mobile, constrained width */
.mgm-hero__copy {
  max-width: 720px;
  margin: 0 auto 20px;       /* copy first, then visual */
  text-align: center;
}

/* Headline scales sanely on phones */
.mgm-headline {
  font-size: clamp(1.6rem, 6.5vw, 3.2rem);
  line-height: 1.15;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .mgm-headline {
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    max-width: 24ch;
  }
}

/* Buttons: centered in hero */
.mgm-cta-row { justify-content: center; }

/* Visual block: centered, capped width */
.mgm-hero__visual {
  max-width: 960px;          /* lets the dash-sim breathe but not overflow */
  width: 100%;
  margin: 20px auto 0;
}

/* === DASH-SIM: one row (2 columns) on desktop, stack on mobile === */
.mgm-dash-sim {
  display: grid;
  gap: 16px;
  align-items: stretch;
  grid-template-columns: 1fr;        /* default: stack on mobile */
}

@media (min-width: 760px) {          /* desktop/tablet: side-by-side */
  .mgm-dash-sim { grid-template-columns: 1.25fr 1fr; }
}

.mgm-pane { padding: 12px; }
@media (min-width: 768px) { .mgm-pane { padding: 16px; } }

/* QR/card bits — safe text wrapping on tiny screens */
.mgm-hero p,
.mgm-hero .mgm-small { overflow-wrap: anywhere; }

/* Safety: make sure no other .mgm-hero grid rules win */
.mgm-hero .mgm-wrap,
.mgm-hero__copy,
.mgm-hero__visual,
.mgm-dash-sim { /* specificity anchor */ }

/* ==== REFERRAL PAGE LAYOUT FIX ====
   Problem: Theme's page grid (e.g., layout--twocol) places landing sections in a narrow column.
   Fix: When our landing sections live inside a grid parent (region-content), force them to span full width.
*/

/* Make all MGM landing blocks span full grid width inside theme grids */
.region-content .mgm-hero,
.region-content #section-problem,
.region-content #section-dream,
.region-content #explainer,
.region-content #problem-solution,
.region-content #who-for,
.region-content #meet-mgm,
.region-content #inside-mgm,
.region-content #social-proof,
.region-content [aria-labelledby="cta-title"],
.region-content .mgm-container,
.region-content .mgm-section {
  grid-column: 1 / -1 !important;   /* occupy the whole grid track */
  justify-self: center;              /* center the item within the grid */
  width: 100%;
}

/* Ensure inner wrappers still control readable width */
.mgm-wrap,
.mgm-container {
  margin-inline: auto;
}

/* Defensive: remove any unintended side gutters applied by theme at this path */
.region-content .mgm-hero,
.region-content .mgm-section,
.region-content .mgm-container {
  max-width: none;
}

/* Prevent horizontal scroll caused by glows/long tokens */
html, body { overflow-x: hidden; }

/* Tame paragraph spacing in the split cards on narrow columns */
#section-dream .card--split .col.text p,
#section-dream .card--split .col.visual p {
  text-align: left;
  overflow-wrap: anywhere;
}
.card--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.card--split.reverse { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.card--split > .col { min-width: 0; overflow-wrap: anywhere; }

/* 900px */
@media (max-width:900px){
  .mgm-dash-sim{ grid-template-columns:1fr; gap:16px; }
  .mgm-pane.mgm-center{ order:1; }
  .mgm-pane:not(.mgm-center){ order:2; }
  .card--split{ grid-template-columns:1fr; text-align:left; }
  .card--split.reverse { grid-template-columns: 1fr; }
}
/* Cards & Styling */
        .mgm-card2 {
            background-color: rgba(255, 255, 255, 0.95); /* Light cards for contrast */
            color: var(--color-text); /* Card text should be dark again */
            border-radius: 12px;
            box-shadow: var(--shadow-soft);
            padding: var(--spacing);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        .mgm-card2:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* Stronger shadow on dark background */
        }
        .mgm-card2 .mgm-ul li,.mgm-pills .mgm-ul li {list-style-type:none;margin-bottom:10px;}
        
        .mgm-card--quickstart {background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold)); border: none; color: var(--color-navy);}
        .mgm-card--quickstart p {padding:10px;}
.mgm-btn--contrast {
    background: var(--color-navy);
    color: var(--color-gold-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin: 10px;
    }
    
/* MGM Language Switcher */


.mgm-lang-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #bbb;
  text-decoration: none;
  transition: all .2s ease;
}

.mgm-lang-pill:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.mgm-lang-pill.active {
  background: linear-gradient(135deg, #c9a227, #f5d27a); /* MGM gold */
  color: #0b1c2d; /* MGM navy */
}

.mgm-lang-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:24px 0 0;
}

.mgm-lang-label{
  font-weight:600;
  letter-spacing:.3px;
  color:#d7d7d7;
}

.mgm-lang-toggle{
  display:inline-flex;
  gap:0;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(201,162,39,.7); /* gold outline */
  background: rgba(0,0,0,.15);
}

.mgm-lang-btn{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  color:#d7d7d7;
  transition: all .15s ease;
}

.mgm-lang-btn:hover{
  color:#fff;
}

.mgm-lang-btn.is-active{
  background: linear-gradient(135deg,#c9a227,#f5d27a);
  color:#0b1c2d; /* navy */
}

/* ===== FULL-WIDTH OVERRIDE FOR OLIVERO THEME ===== */

.dialog-off-canvas-main-canvas,
.layout-container,
.layout-content,
.region--content,
.layout--pass--content-medium,
.grid-full {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove side margins/padding from main tag */
main[role="main"] {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Olivero adds padding via CSS variables — override them */
:root {
  --olivero-gutters: 0px !important;
  --olivero-max-width: 100% !important;
}

/* Kill the white side gaps */
body {
  padding: 0 !important;
  margin: 0 !important;
}

.mgm-landing-page {
  width: 100% !important;
  max-width: 100% !important;
}

/* Override style.css height:100% only on the landing page */
body.path-frontpage,
body.path-frontpage html {
  height: auto !important;
}