/* ── Product kit ──────────────────────────────────────────────────────
   Loaded on the eight product pages only. The extensions' own "3-D kit"
   (MgPanel.tsx / the onboarding dialog) applied to the page: solid shelves
   under buttons and cards, press-down on click, sticker-style accents,
   pill tags, and one tight vertical rhythm so the page reads as one piece.
   Each page's accent drives the colour through --accent. ── */

body.mg-light {
  --kit-accent: var(--accent, #f40450);
  --kit-deep: color-mix(in srgb, var(--accent, #f40450) 68%, #000);
  --kit-soft: color-mix(in srgb, var(--accent, #f40450) 9%, #fff);
  --kit-tint: color-mix(in srgb, var(--accent, #f40450) 5%, #fff);
  --kit-glow: color-mix(in srgb, var(--accent, #f40450) 40%, transparent);
  --kit-shelf: #dfe4ec;
  --kit-ink: #0d1117;
  --kit-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── rhythm: everything closer together ──────────────────────────── */
body.mg-light .mgh { padding-top: clamp(18px, 2.4vw, 32px); padding-bottom: clamp(22px, 2.6vw, 36px); }
body.mg-light .mgh-player { margin-bottom: clamp(18px, 2.2vw, 28px); }
body.mg-light .mgh-trust { margin-bottom: clamp(12px, 1.4vw, 18px); }
body.mg-light .mgh-title { margin-bottom: clamp(12px, 1.4vw, 18px); }
body.mg-light .mgh-sub { margin-bottom: clamp(16px, 2vw, 24px); }
body.mg-light .mgh-cta { margin-bottom: 0; }
body.mg-light .mgh-assure { margin: 14px auto 0; font-size: 13.5px; }
body.mg-light .mgh-feats { margin-top: clamp(20px, 2.4vw, 30px); }
body.mg-light .qg-how, body.mg-light .gk-how, body.mg-light .wg-how, body.mg-light .bk-how, body.mg-light .ix-how, body.mg-light .dg-how,
body.mg-light .dg-snip,
body.mg-light .eg-tiers,
body.mg-light .mgf,
body.mg-light .mgv,
body.mg-light .gk-live,
body.mg-light .bk-modes { padding-top: clamp(32px, 3.6vw, 48px) !important; padding-bottom: clamp(28px, 3.2vw, 40px) !important; }
body.mg-light [class*="-how-head"] { margin-bottom: clamp(18px, 2.2vw, 28px) !important; }
body.mg-light [class*="-how-foot"]:not([class*="-how-foot-"]) { margin-top: clamp(18px, 2.2vw, 28px) !important; }
body.mg-light .ob { padding: clamp(30px, 3.4vw, 44px) 24px clamp(30px, 3.4vw, 44px); background: #f6f7f9; }
body.mg-light .ob-head { margin-bottom: clamp(16px, 2vw, 24px); }
body.mg-light .plan-section.mg-plans-light { padding-top: clamp(32px, 3.6vw, 48px); padding-bottom: clamp(32px, 3.6vw, 48px); background: linear-gradient(180deg, #f6f7f9 0%, #fff 22%, #fff 100%); }
body.mg-light .plans-heading { margin-bottom: clamp(16px, 2vw, 24px); }
body.mg-light .faq-section { padding-top: clamp(28px, 3.2vw, 40px); padding-bottom: clamp(36px, 4vw, 56px); }
body.mg-light .faq-section > h2 { margin-bottom: clamp(14px, 1.6vw, 20px); }

/* ── headline: "The #1 IXL Hack" as a sticker, the subtitle as a tag ── */
body.mg-light .mgh-title {
  font-size: clamp(38px, 5.8vw, 74px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--kit-ink);
}
body.mg-light .mgh-g1,
body.mg-light .mgh-g2 { background: none; -webkit-text-fill-color: initial; color: inherit; }
/* "#1": a small tilted sticker in the accent */
body.mg-light .mgh-g1 {
  display: inline-block;
  padding: 0.02em 0.22em 0.06em;
  margin: 0 0.06em;
  border-radius: 0.22em;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), var(--kit-accent);
  box-shadow: 0 0.09em 0 var(--kit-deep), 0 0.3em 0.6em -0.2em var(--kit-glow);
  transform: rotate(-3deg);
  transition: transform .3s var(--kit-ease);
}
body.mg-light .mgh-title:hover .mgh-g1 { transform: rotate(2deg) scale(1.04); }
/* the platform name: solid accent with a printed offset */
body.mg-light .mgh-g2 {
  color: var(--kit-accent);
  text-shadow: 0.035em 0.035em 0 var(--kit-deep);
}
/* the second line becomes a tag on a shelf */
body.mg-light .mgh-title .mgh-title-2,
body.mg-light .mgh-title-2 {
  display: table;
  margin-left: auto; margin-right: auto;
  margin-top: 0.42em;
  padding: 0.42em 0.95em 0.46em;
  border-radius: 999px;
  border: 1px solid var(--kit-shelf);
  background: #fff;
  box-shadow: 0 3px 0 var(--kit-shelf);
  font-size: clamp(14px, 1.4vw, 21px) !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--kit-ink);
  transform: rotate(-1deg);
}
body.mg-light .mgh-sub { max-width: 560px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; }
body.mg-light .mgh-em { color: var(--kit-accent); font-weight: 700; }

/* ── buttons: the kit's accent button, with a shelf that presses ───── */
body.mg-light .mgh-btn { padding: 16px 28px; border-radius: 16px; font-size: 16px; }
body.mg-light .mgh-btn--lime,
body.mg-light [class*="-how-cta"],
body.mg-light .faq-cta a,
body.mg-light .mg-plans-light .plan-cta:not(.starter),
body.mg-light .sg-btn--lime {
  position: relative;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 62%), var(--kit-accent);
  box-shadow: inset 0 -5px 0 var(--kit-deep), 0 12px 26px -12px var(--kit-glow);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
body.mg-light .mgh-btn--lime:hover,
body.mg-light [class*="-how-cta"]:hover,
body.mg-light .faq-cta a:hover,
body.mg-light .mg-plans-light .plan-cta:not(.starter):hover,
body.mg-light .sg-btn--lime:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 62%), var(--kit-accent);
  box-shadow: inset 0 -5px 0 var(--kit-deep), 0 18px 32px -12px var(--kit-glow);
}
body.mg-light .mgh-btn--lime:active,
body.mg-light [class*="-how-cta"]:active,
body.mg-light .faq-cta a:active,
body.mg-light .mg-plans-light .plan-cta:not(.starter):active,
body.mg-light .sg-btn--lime:active {
  transform: translateY(3px);
  box-shadow: inset 0 -1px 0 var(--kit-deep), 0 4px 10px -6px var(--kit-glow);
}
body.mg-light .mgh-btn--lime svg, body.mg-light .faq-cta a svg { fill: #fff; }
body.mg-light [class*="-how-cta"] { padding: 15px 26px; font-size: 15.5px; }
body.mg-light .mg-plans-light .plan-cta:not(.starter) { min-height: 48px; border-radius: 13px; }

/* the quiet button: white on a grey shelf */
body.mg-light .mgh-btn--ghost,
body.mg-light .mg-plans-light .plan-cta.starter,
body.mg-light .sg-btn--ghost {
  border: 1px solid var(--kit-shelf);
  border-radius: 16px;
  background: #fff;
  color: var(--kit-ink);
  box-shadow: 0 4px 0 var(--kit-shelf);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
body.mg-light .mgh-btn--ghost:hover,
body.mg-light .mg-plans-light .plan-cta.starter:hover,
body.mg-light .sg-btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--kit-shelf), 0 14px 26px -16px rgba(13,17,23,.3); border-color: #d0d6e0; }
body.mg-light .mgh-btn--ghost:active,
body.mg-light .mg-plans-light .plan-cta.starter:active,
body.mg-light .sg-btn--ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kit-shelf); }
body.mg-light .mgh-btn--ghost svg { fill: var(--kit-accent); }

/* ── hero feature tiles: tinted cards with a tilted icon plate ─────── */
body.mg-light .mgh-feats { gap: 12px 10px; }
body.mg-light .mgh-feat {
  gap: 10px;
  padding: 18px 14px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--kit-accent) 18%, var(--kit-shelf));
  background: linear-gradient(180deg, #fff 0%, var(--kit-tint) 100%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--kit-accent) 22%, var(--kit-shelf));
  transition: transform .3s var(--kit-ease), box-shadow .3s var(--kit-ease);
}
body.mg-light .mgh-feat:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 8px 0 color-mix(in srgb, var(--kit-accent) 22%, var(--kit-shelf)), 0 22px 40px -22px var(--kit-glow); }
body.mg-light .mgh-feat:nth-child(even):hover { transform: translateY(-5px) rotate(.6deg); }
body.mg-light .mgh-feat-ic {
  width: 52px; height: 52px; border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), var(--kit-accent);
  border: 0;
  box-shadow: 0 4px 0 var(--kit-deep), 0 10px 18px -10px var(--kit-glow);
  transform: rotate(-6deg);
  transition: transform .3s var(--kit-ease);
}
body.mg-light .mgh-feat:hover .mgh-feat-ic { transform: rotate(4deg) scale(1.06); }
body.mg-light .mgh-feat-ic svg { width: 24px; height: 24px; }
body.mg-light .mgh-feat-ic svg[fill="none"] { stroke: #fff; }
body.mg-light .mgh-feat h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
body.mg-light .mgh-feat p { font-size: 13.5px; line-height: 1.45; }

/* ── section headings: pill eyebrow, heavier title ────────────────── */
body.mg-light [class*="-how-eyebrow"],
body.mg-light .ob-eyebrow,
body.mg-light .dg-snip-eyebrow,
body.mg-light .gk-live-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--kit-soft);
  border: 1px solid color-mix(in srgb, var(--kit-accent) 25%, #fff);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--kit-accent) 25%, #fff);
  color: var(--kit-deep);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
body.mg-light [class*="-how-head"] h2,
body.mg-light .ob-head h2,
body.mg-light .plans-heading h2,
body.mg-light .faq-section > h2 { font-weight: 900; letter-spacing: -0.04em; }

/* ── cards on a shelf ──────────────────────────────────────────────── */
body.mg-light .faq-item {
  border: 1px solid var(--kit-shelf);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--kit-shelf);
  transition: transform .25s var(--kit-ease), box-shadow .25s var(--kit-ease), border-color .25s var(--kit-ease);
}
body.mg-light .faq-item + .faq-item { margin-top: 8px; }
body.mg-light .faq-item:hover { border-color: color-mix(in srgb, var(--kit-accent) 35%, var(--kit-shelf)); transform: translateY(-1px); }
body.mg-light .faq-item[open] { border-color: color-mix(in srgb, var(--kit-accent) 45%, var(--kit-shelf)); box-shadow: 0 3px 0 color-mix(in srgb, var(--kit-accent) 30%, var(--kit-shelf)); }
body.mg-light .faq-item summary { font-weight: 700; }
body.mg-light .faq-item[open] summary::after,
body.mg-light .faq-item summary:hover::after { border-right-color: var(--kit-accent); border-bottom-color: var(--kit-accent); }

body.mg-light .mg-plans-light .plan-card { border-radius: 22px; border: 1px solid var(--kit-shelf); box-shadow: 0 4px 0 var(--kit-shelf); }
body.mg-light .mg-plans-light .plan-card:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--kit-shelf), 0 26px 50px -26px rgba(13,17,23,.3); }
body.mg-light .mg-plans-light .plan-card.ultra-card { border-color: color-mix(in srgb, var(--kit-accent) 45%, var(--kit-shelf)); box-shadow: 0 4px 0 color-mix(in srgb, var(--kit-accent) 40%, var(--kit-shelf)), 0 0 0 4px color-mix(in srgb, var(--kit-accent) 8%, transparent); }

body.mg-light .ob-step { border-radius: 16px; box-shadow: 0 3px 0 var(--kit-shelf); }
body.mg-light .ob-step:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--kit-shelf); }
body.mg-light .ob-step.is-on { box-shadow: 0 3px 0 color-mix(in srgb, var(--kit-accent) 35%, var(--kit-shelf)); }
body.mg-light .ob-device { box-shadow: 0 7px 0 var(--kit-deep), 0 40px 90px -30px rgba(0,0,0,.6); border-color: color-mix(in srgb, var(--kit-accent) 35%, rgba(255,255,255,.08)); }

body.mg-light .mgh-trust-pill,
body.mg-light .mgh-rating { border-radius: 999px; box-shadow: 0 3px 0 var(--kit-shelf); border: 1px solid var(--kit-shelf); background: #fff; }
body.mg-light .mgh-rating { transition: transform .2s var(--kit-ease), box-shadow .2s var(--kit-ease); }
body.mg-light .mgh-rating:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--kit-shelf); }
body.mg-light .mgh-player { border-radius: 22px; box-shadow: 0 7px 0 #0b0e13, 0 30px 60px -24px rgba(13,17,23,.5); }

@media (max-width: 760px) {
  body.mg-light .mgh-feats { gap: 10px 8px; }
  body.mg-light .mgh-feat { padding: 14px 10px 12px; border-radius: 16px; }
  body.mg-light .mgh-feat:hover, body.mg-light .mgh-feat:nth-child(even):hover { transform: none; }
  body.mg-light .mgh-title-2 { font-size: 12.5px; padding: .4em .85em; }
  body.mg-light .mgh-btn { padding: 15px 22px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mg-light .mgh-feat, body.mg-light .faq-item, body.mg-light .mg-plans-light .plan-card, body.mg-light .ob-step, body.mg-light .mgh-g1, body.mg-light .mgh-feat-ic { transition: none; }
}

/* The panel-section install button is styled inline on every page and that
   <style> sits after this sheet, so the kit has to insist. */
body.mg-light [class*="-how-cta"] {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 62%), var(--kit-accent) !important;
  box-shadow: inset 0 -5px 0 var(--kit-deep), 0 12px 26px -12px var(--kit-glow) !important;
  border-radius: 16px !important;
  color: #fff !important;
}
body.mg-light [class*="-how-cta"]:active { box-shadow: inset 0 -1px 0 var(--kit-deep), 0 4px 10px -6px var(--kit-glow) !important; }
body.mg-light [class*="-how-eyebrow"] {
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: var(--kit-soft) !important;
  border: 1px solid color-mix(in srgb, var(--kit-accent) 25%, #fff) !important;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--kit-accent) 25%, #fff) !important;
  color: var(--kit-deep) !important;
}