/* ============================================================
   Plan cards on a WHITE page.

   The light counterpart to pricing-block.css. Every product page carries its
   own inline copy of this; index.html and edgenie.html now share this file
   instead, so the white pricing block has one source. Scoped to
   `body.mg-light .plan-section.mg-plans-light`, so a page opts in through the
   body class plus that section class.

   The class names are a CONTRACT with pricing-cards.js — renaming
   .plan-cta.starter / .plan-cta.ultra or the [data-ultra-*] hooks silently
   unwires the buttons.
   ============================================================ */

/* ── Plans on the white product page ──────────────────────────────
   The same card system as pricing.html, re-toned for white. Structure,
   spacing and hierarchy are deliberately identical on delta-genie.html
   and memgenie.html so the two pages read as one product; only which
   dropdown starts open changes.

   The class names are a CONTRACT with pricing-cards.js. Renaming
   .plan-cta.starter / .plan-cta.ultra or the [data-ultra-*] hooks here
   silently unwires the buttons on this page. .weekly and .yearly are
   deliberately NOT in that contract — the script leaves them alone, so
   they behave as plain links to checkout. ── */
body.mg-light .plan-section.mg-plans-light {
  position: relative;
  width: auto;
  max-width: 1240px;
  margin: 0 auto;
  padding: 88px 24px 96px;
  border: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;

  --mg-red: #f40450;
  --mg-red-deep: #b80038;
  --mg-ink: #0d1117;
  --mg-line: #e7eaf0;
  --mg-surface: #f7f8fa;
  --mg-quiet: #6b7280;
  --mg-label: #8a93a3;
  --mg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.mg-light .mg-plans-light [hidden] { display: none !important; }

/* Same doodle field as the dark page, inverted back to ink-on-paper.
   One asset serves both pages, so a visitor who has seen either one
   already has it cached. */
body.mg-light .mg-plans-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/pricing-doodles.webp?v=1') center -60px / 2200px auto repeat;
  filter: invert(1);
  opacity: 0.05;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 6%, #000 64%, transparent 94%),
    radial-gradient(ellipse 42% 38% at 50% 36%, transparent 14%, #000 78%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 6%, #000 64%, transparent 94%),
    radial-gradient(ellipse 42% 38% at 50% 36%, transparent 14%, #000 78%);
  mask-composite: intersect;
}
body.mg-light .mg-plans-light > * { position: relative; z-index: 1; }

/* Heading: left-ranged over the grid, matching the pricing page. */
body.mg-light .mg-plans-light .plans-heading {
  text-align: left;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
body.mg-light .mg-plans-light .plans-heading h2 {
  margin: 0;
  text-transform: none;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .plans-sub {
  max-width: 78ch;
  margin: 10px 0 0;
  text-align: left;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
  color: var(--mg-quiet);
}

/* ── Grid ────────────────────────────────────────────────
   2026-10-20: one wide card across both columns (the paid plan, with the
   billing-period switch inside it), then the Free and Group tiles side by
   side underneath. The one-card rules are at the foot of this file. */
body.mg-light .mg-plans-light .pricing-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 1.3vw, 18px);
  margin-top: 0;
}
body.mg-light .mg-plans-light .plan-card {
  min-height: 0;
  padding: clamp(16px, 1.2vw, 20px) clamp(14px, 1.1vw, 17px) clamp(15px, 1.1vw, 18px);
  border-radius: 20px;
  border: 1px solid var(--mg-line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 14px 34px -20px rgba(13, 17, 23, 0.16);
  overflow: visible;
  transition:
    transform 0.5s var(--mg-ease),
    box-shadow 0.5s var(--mg-ease),
    border-color 0.5s var(--mg-ease);
}
body.mg-light .mg-plans-light .plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 22px 48px -20px rgba(13, 17, 23, 0.22);
}
/* Crimson marks one thing on this page: the plan it recommends. */
body.mg-light .mg-plans-light .starter-card:hover { border-color: #d7dce4; }

/* Monthly: a blush wash off the top edge and a crimson hairline. On
   white the accent has to stay this light or the card stops reading as
   part of the same set. */
body.mg-light .mg-plans-light .ultra-card {
  border-color: rgba(244, 4, 80, 0.34);
  background:
    radial-gradient(ellipse 110% 44% at 50% 0%, rgba(244, 4, 80, 0.07), transparent 72%),
    #fff;
  box-shadow: 0 1px 2px rgba(244, 4, 80, 0.06), 0 18px 44px -20px rgba(244, 4, 80, 0.28);
}
body.mg-light .mg-plans-light .ultra-card:hover {
  border-color: rgba(244, 4, 80, 0.5);
  box-shadow: 0 1px 2px rgba(244, 4, 80, 0.06), 0 26px 56px -20px rgba(244, 4, 80, 0.34);
}

/* ── Card head ───────────────────────────────────────────── */
body.mg-light .mg-plans-light .plan-top {
  display: block;
  min-height: 52px;
  margin-bottom: 4px;
}
body.mg-light .mg-plans-light .plan-card h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .pc-tagline {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mg-quiet);
}
body.mg-light .mg-plans-light .trial-chip,
body.mg-light .mg-plans-light .value-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(244, 4, 80, 0.09);
  border: 1px solid rgba(244, 4, 80, 0.28);
  color: #c2003f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Yearly's badge is about money saved, not a trial — green keeps the
   two chips from reading as the same offer. */
body.mg-light .mg-plans-light .value-chip {
  background: rgba(22, 163, 74, 0.09);
  border-color: rgba(22, 163, 74, 0.3);
  color: #15803d;
}

/* ── Price + CTA ─────────────────────────────────────────── */
/* Fixed height so the CTAs bottom-align and every card's dropdowns
   start on the same line, whether or not the tier carries a struck
   price, a per-month line, or a two-line footnote. */
body.mg-light .mg-plans-light .pc-buy {
  display: flex;
  flex-direction: column;
  min-height: 152px;
  margin: 8px 0 0;
}
body.mg-light .mg-plans-light .price {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  height: 34px;
  margin: 0;
  text-align: left;
}
body.mg-light .mg-plans-light .price strong {
  display: inline;
  font-size: clamp(24px, 1.9vw, 29px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .price span {
  display: inline;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--mg-quiet);
}
body.mg-light .mg-plans-light .price s {
  position: relative;
  display: inline-block;
  order: -1;
  margin: 0;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: #d1728e;
}
/* The struck price and its neon bar stay styled for any card that still
   carries an <s>, but nothing animates it any more: the only struck price
   was Monthly's $4.99 before the first-month discount, retired 2026-10-13. */
body.mg-light .mg-plans-light .price s::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 54%;
  height: 4px;
  border-radius: 2px;
  background: #ff1a3c;
  box-shadow: 0 0 6px #ff1a3c, 0 0 12px rgba(255, 26, 60, 0.8), 0 0 20px rgba(255, 26, 60, 0.5);
}
/* Yearly's per-month equivalent, so the row stays comparable. */
body.mg-light .mg-plans-light .pc-permo {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--mg-label);
}

body.mg-light .mg-plans-light .pc-action {
  margin-top: auto;
  border-radius: 12px;
  border: 1px solid var(--mg-line);
  background: var(--mg-surface);
}
body.mg-light .mg-plans-light .plan-cta {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition:
    transform 0.28s var(--mg-ease),
    box-shadow 0.28s var(--mg-ease),
    background 0.28s var(--mg-ease),
    border-color 0.28s var(--mg-ease);
}
body.mg-light .mg-plans-light .plan-cta:hover { transform: translateY(-2px); }
body.mg-light .mg-plans-light .plan-cta.starter,
body.mg-light .mg-plans-light .plan-cta.weekly {
  background: #fff;
  border: 1px solid #d7dce4;
  color: #333c49;
  box-shadow: inset 0 -3px 0 rgba(13, 17, 23, 0.07), 0 4px 3px rgba(13, 17, 23, 0.06);
}
body.mg-light .mg-plans-light .plan-cta.starter:hover,
body.mg-light .mg-plans-light .plan-cta.weekly:hover {
  background: #f4f6f9;
  border-color: #c3cad6;
}
body.mg-light .mg-plans-light .plan-cta.yearly {
  background: rgba(244, 4, 80, 0.07);
  border: 1px solid rgba(244, 4, 80, 0.32);
  color: #c2003f;
  box-shadow: inset 0 -3px 0 rgba(244, 4, 80, 0.12), 0 4px 3px rgba(13, 17, 23, 0.06);
}
body.mg-light .mg-plans-light .plan-cta.yearly:hover {
  background: rgba(244, 4, 80, 0.12);
  border-color: rgba(244, 4, 80, 0.5);
}
body.mg-light .mg-plans-light .plan-cta.ultra {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%),
    var(--mg-red);
  border: 1px solid transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  box-shadow:
    inset 0 -3px 0 var(--mg-red-deep),
    0 6px 4px rgba(13, 17, 23, 0.12),
    0 24px 24px -12px rgba(244, 4, 80, 0.28);
}
body.mg-light .mg-plans-light .plan-cta.ultra:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 62%),
    #ff2159;
}
/* "Ask A Parent To Pay" under the Monthly trial button (2026-10-14). The
   light pages do not load pricing-block.css, so the whole rule lives here. */
body.mg-light .mg-plans-light .pc-parent {
  display: block;
  margin: 0 10px 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dfe4ec;
  box-shadow: 0 3px 0 #dfe4ec;
  color: #0d1117;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
body.mg-light .mg-plans-light .pc-parent:hover { background: #fff; border-color: #d0d6e0; box-shadow: 0 5px 0 #dfe4ec; }
body.mg-light .mg-plans-light .pc-parent:active { transform: translateY(2px); box-shadow: 0 1px 0 #dfe4ec; }
body.mg-light .mg-plans-light .plan-note {
  min-height: 0;
  margin: 0;
  padding: 9px 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mg-label);
}

/* ── Product dropdowns ───────────────────────────────────────────
   One plan covers two extensions, so the features are split by the
   platform they act on rather than listed as one block. Each page
   opens the product it is about and collapses the other; that keeps
   four tiers comparable at a glance instead of four tall columns of
   near-identical ticks. */
body.mg-light .mg-plans-light .pc-drops {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
body.mg-light .mg-plans-light .pc-drop {
  border-radius: 12px;
  border: 1px solid var(--mg-line);
  background: var(--mg-surface);
  overflow: hidden;
}
body.mg-light .mg-plans-light .pc-drop > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s var(--mg-ease);
}
body.mg-light .mg-plans-light .pc-drop > summary::-webkit-details-marker { display: none; }
body.mg-light .mg-plans-light .pc-drop > summary:hover { background: rgba(13, 17, 23, 0.03); }
body.mg-light .mg-plans-light .pc-drop-logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--mg-line);
  background: #fff;
  object-fit: contain;
  padding: 3px;
}
body.mg-light .mg-plans-light .pc-drop-head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.mg-light .mg-plans-light .pc-drop-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .pc-drop-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--mg-label);
}
body.mg-light .mg-plans-light .pc-drop-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: #9aa3b2;
  transition: transform 0.24s var(--mg-ease);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.mg-light .mg-plans-light .pc-drop[open] .pc-drop-caret { transform: rotate(180deg); }

/* An open panel takes a tint from its own platform's mark, so the two
   products stay distinguishable once both are expanded. */
body.mg-light .mg-plans-light .pc-drop--delta[open] > summary { background: rgba(54, 69, 90, 0.05); }
body.mg-light .mg-plans-light .pc-drop--membean[open] > summary { background: rgba(22, 163, 74, 0.05); }
body.mg-light .mg-plans-light .pc-drop--quizlet[open] > summary { background: rgba(37, 99, 235, 0.05); }
body.mg-light .mg-plans-light .pc-drop--edpuzzle[open] > summary { background: rgba(37, 99, 235, 0.05); }
body.mg-light .mg-plans-light .pc-drop--blooket[open] > summary { background: rgba(217, 70, 239, 0.05); }
body.mg-light .mg-plans-light .pc-drop--gimkit[open] > summary { background: rgba(109, 40, 217, 0.05); }
body.mg-light .mg-plans-light .pc-drop--wayground[open] > summary { background: rgba(224, 33, 138, 0.05); }
body.mg-light .mg-plans-light .pc-drop--nearpod[open] > summary { background: rgba(30, 107, 240, 0.06); }
body.mg-light .mg-plans-light .pc-drop--noredink[open] > summary { background: rgba(214, 40, 60, 0.05); }
body.mg-light .mg-plans-light .pc-drop--vocab[open] > summary { background: rgba(61, 154, 61, 0.06); }
body.mg-light .mg-plans-light .pc-drop--socrative[open] > summary { background: rgba(255, 106, 66, 0.07); }
body.mg-light .mg-plans-light .pc-drop--ixl[open] > summary { background: rgba(80, 182, 0, 0.06); }

body.mg-light .mg-plans-light .pc-drop-body {
  padding: 0 13px 13px;
  border-top: 1px solid rgba(13, 17, 23, 0.06);
}
body.mg-light .mg-plans-light .pc-drop-note {
  margin: 11px 0 0;
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid var(--mg-line);
  background: #fff;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--mg-quiet);
}
body.mg-light .mg-plans-light .pc-drop-note strong { color: var(--mg-ink); }

/* ── Feature lists ───────────────────────────────────────
   One list per product now, carrying both what the tier includes and
   what it does not, so nothing about DeltaMath appears under Membean
   or the other way round. */
body.mg-light .mg-plans-light .feature-list {
  display: block;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
body.mg-light .mg-plans-light .feature-list li {
  position: relative;
  min-height: 0;
  padding: 8px 0 8px 25px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #333c49;
}
body.mg-light .mg-plans-light .feature-list li + li { border-top: 1px solid rgba(13, 17, 23, 0.06); }
body.mg-light .mg-plans-light .feature-list li:first-child { padding-top: 2px; }
body.mg-light .mg-plans-light .feature-list li:last-child { padding-bottom: 2px; }
body.mg-light .mg-plans-light .fl-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: #9aa3b2;
}

/* Same stroked marks as the dark page, in ink instead of white. */
body.mg-light .mg-plans-light .feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: #1f2733;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.9 3.4 3.4 6.1-9.2'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.9 3.4 3.4 6.1-9.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.mg-light .mg-plans-light .feature-list li:first-child::before { top: 3px; }
body.mg-light .mg-plans-light .feature-list li::after { content: none; }

/* Membean's ticks stay green so an expanded panel is readable as the
   other product even without its header in view. */
body.mg-light .mg-plans-light .pc-drop--membean .feature-list li::before { background-color: #16a34a; }
body.mg-light .mg-plans-light .pc-drop--delta .feature-list li::before { background-color: #36455a; }
body.mg-light .mg-plans-light .pc-drop--quizlet .feature-list li::before { background-color: #2563eb; }
body.mg-light .mg-plans-light .pc-drop--edpuzzle .feature-list li::before { background-color: #2563eb; }
body.mg-light .mg-plans-light .pc-drop--blooket .feature-list li::before { background-color: #d946ef; }
body.mg-light .mg-plans-light .pc-drop--gimkit .feature-list li::before { background-color: #6d28d9; }
body.mg-light .mg-plans-light .pc-drop--wayground .feature-list li::before { background-color: #e0218a; }
body.mg-light .mg-plans-light .pc-drop--nearpod .feature-list li::before { background-color: #1e6bf0; }
body.mg-light .mg-plans-light .pc-drop--noredink .feature-list li::before { background-color: #d6283c; }
body.mg-light .mg-plans-light .pc-drop--vocab .feature-list li::before { background-color: #3d9a3d; }
body.mg-light .mg-plans-light .pc-drop--socrative .feature-list li::before { background-color: #ff6a42; }
body.mg-light .mg-plans-light .pc-drop--ixl .feature-list li::before { background-color: #50b600; }

/* Free's missing features: struck through in red inside the product
   that lacks them, rather than pooled in one grey box at the foot of
   the card. Each dropdown is now a self-contained pros-and-cons list
   for its own platform. The selector carries .pc-drop so it outranks
   the per-product tick colours set above. */
body.mg-light .mg-plans-light .feature-list li.is-locked {
  color: #d23a5a;
  text-decoration: line-through;
  text-decoration-color: rgba(210, 58, 90, 0.6);
  text-decoration-thickness: 1.5px;
}
body.mg-light .mg-plans-light .pc-drop .feature-list li.is-locked::before {
  background-color: #e11d48;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='m7.5 7.5 9 9m0-9-9 9'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='m7.5 7.5 9 9m0-9-9 9'/%3E%3C/svg%3E");
}

/* ── Footer link ─────────────────────────────────────────── */
body.mg-light .mg-plans-light .plan-links {
  display: flex;
  justify-content: center;
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-size: 13.5px;
}
body.mg-light .mg-plans-light .plan-links a {
  color: var(--mg-quiet);
  text-decoration: underline;
  text-decoration-color: rgba(13, 17, 23, 0.2);
  text-underline-offset: 3px;
  transition: color 0.2s var(--mg-ease), text-decoration-color 0.2s var(--mg-ease);
}
body.mg-light .mg-plans-light .plan-links a:hover {
  color: var(--mg-ink);
  text-decoration-color: var(--mg-red);
}

@media (max-width: 900px) {
  body.mg-light .mg-plans-light .pricing-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body.mg-light .plan-section.mg-plans-light { padding: 64px 16px 72px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mg-light .mg-plans-light .plan-card:hover,
  body.mg-light .mg-plans-light .plan-cta:hover { transform: none; }
  body.mg-light .mg-plans-light .pc-drop-caret { transition: none; }
}

/* ── Section seams ─────────────────────────────────────────────
   The machine-derived light theme left each section's background
   self-contained, so neighbours meet on visible steps: workflow ends
   white against quiz's #f6f7f9, Rule: every section must END on the
   colour the next one BEGINS with. Scoped to this page — affiliates
   and delta-genie share these classes. */
body.mg-light .workflow-showcase[data-workflow-showcase] {
  /* was: …60% f6f7f9 → 100% white, colliding with quiz's f6f7f9 start.
     The attribute repeat matches memgenie-light.css's specificity. */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f6f7f9 40%,
    #f6f7f9 100%
  );
}
body.mg-light .quiz-feature {
  /* end on white → the plans section follows it directly now that the
     reviews band is gone, and that section starts on flat white */
  background: linear-gradient(
    180deg,
    #f6f7f9 0%,
    #ffffff 55%,
    #ffffff 100%
  );
}

/* ── Server Side Automation (light cards) ─────────────────────────────────
   Same block as pricing-block.css, recoloured for the light pricing page. */
.pc-ssa {
  margin: 0 0 14px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #eef2ff, #f5f3ff);
}
.pc-ssa-chip {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #4338ca;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pc-ssa strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1e1b4b;
}
.pc-ssa p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #4338ca;
}

/* The same row on Free, struck through: what a paid plan adds is clearer when
   the line is present and crossed out than when it is simply missing. */
.pc-ssa--off { opacity: 0.72; }
.pc-ssa--off strong { text-decoration: line-through; text-decoration-thickness: 2px; }
.pc-ssa--off { border-color: #e2e8f0; background: #f8fafc; }
.pc-ssa--off strong { color: #64748b; }
.pc-ssa--off p { color: #64748b; }
.pc-ssa p b { font-weight: 800; color: #312e81; }

/* ── Lifetime + Group plan tiles (2026-10-13) ──────────────────────────────
   Rendered by pricing-block.js after the four cards, two to a row: in the
   four-column grid each spans two columns, in the two-column band each takes
   the full row, and in one column they simply stack. order:10 keeps them under
   the cards in the narrow layouts, which reorder the cards with order 1-4.
   Lifetime is the one ink tile on the page (a one-off purchase, set apart from
   the subscriptions); the Group plan wears Monthly's blush so it reads as a
   plan you can pick, not an ad. Both take the page's accent (--kit-accent,
   set by product-kit.css / home-kit.css), so on a product page they match
   that page's buttons; crimson where nothing sets it. */
body.mg-light .mg-plans-light .pc-extra {
  --pcx: var(--kit-accent, #f40450);
  --pcx-deep: var(--kit-deep, #b80038);
  grid-column: auto;
  order: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 22px;
  min-width: 0;
  padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.8vw, 26px);
  border-radius: 20px;
  border: 1px solid var(--mg-line);
  background: #fff;
  box-shadow: 0 4px 0 #e3e7ee, 0 20px 40px -28px rgba(13, 17, 23, 0.3);
  transition: transform 0.5s var(--mg-ease), box-shadow 0.5s var(--mg-ease);
}
body.mg-light .mg-plans-light .pc-extra:hover { transform: translateY(-3px); }
/* Light since 2026-10-15 (owner: no dark tile) — same paper as the Group tile,
   the ink shelf is what still sets it apart. */
body.mg-light .mg-plans-light .pc-extra--lifetime {
  border-color: #0d1117;
  background:
    radial-gradient(110% 120% at 0% 0%, color-mix(in srgb, var(--pcx) 8%, transparent), transparent 66%),
    #fff;
  box-shadow: 0 4px 0 #0d1117, 0 22px 42px -28px rgba(13, 17, 23, 0.35);
}
body.mg-light .mg-plans-light .pc-extra--group {
  border-color: color-mix(in srgb, var(--pcx) 34%, #fff);
  background:
    radial-gradient(110% 120% at 0% 0%, color-mix(in srgb, var(--pcx) 8%, transparent), transparent 66%),
    #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pcx) 26%, #fff), 0 22px 42px -28px color-mix(in srgb, var(--pcx) 35%, transparent);
}
body.mg-light .mg-plans-light .pc-extra-main { min-width: 0; }
body.mg-light .mg-plans-light .pc-extra-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font: 700 11px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-label);
}
body.mg-light .mg-plans-light .pc-extra-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pcx);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 0 var(--pcx-deep);
}
body.mg-light .mg-plans-light .pc-extra h3 {
  margin: 0;
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .pc-extra-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}
body.mg-light .mg-plans-light .pc-extra-price strong {
  font-size: clamp(26px, 2.1vw, 32px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .pc-extra-price span { font-size: 13px; color: var(--mg-quiet); }
body.mg-light .mg-plans-light .pc-extra-copy {
  max-width: 44ch;
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4b5563;
}
body.mg-light .mg-plans-light .pc-extra-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(210px, 42%);
}
body.mg-light .mg-plans-light .pc-extra-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
body.mg-light .mg-plans-light .pc-extra-cta--group {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%), var(--pcx);
  box-shadow: inset 0 -4px 0 var(--pcx-deep), 0 12px 24px -12px color-mix(in srgb, var(--pcx) 45%, transparent);
}
body.mg-light .mg-plans-light .pc-extra-cta--lifetime {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%), #0d1117;
  box-shadow: inset 0 -4px 0 #000, 0 12px 24px -12px rgba(13, 17, 23, 0.5);
}
body.mg-light .mg-plans-light .pc-extra-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
body.mg-light .mg-plans-light .pc-extra-cta:active { transform: translateY(2px); }
body.mg-light .mg-plans-light .pc-extra-note {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
body.mg-light .mg-plans-light .pc-extra-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pcx-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pcx-deep) 30%, transparent);
  text-underline-offset: 3px;
}
body.mg-light .mg-plans-light .pc-extra-link:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  body.mg-light .mg-plans-light .pc-extra { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body.mg-light .mg-plans-light .pc-extra { flex-direction: column; align-items: stretch; }
  body.mg-light .mg-plans-light .pc-extra-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.mg-light .mg-plans-light .pc-extra,
  body.mg-light .mg-plans-light .pc-extra-cta { transition: none; }
  body.mg-light .mg-plans-light .pc-extra:hover { transform: none; }
}


/* ── One offer card (2026-10-20) ───────────────────────────────────────────
   In the style of a single-offer checkout page: a segmented switch picks the
   billing period; under it one big headline, one Get Started button, a trust
   line, six perks, and a tile per platform. Class names stay the
   pricing-cards.js contract: every period's button is in the DOM and only the
   picked panel is displayed. */
body.mg-light .plan-section.mg-plans-light { overflow: hidden; }
body.mg-light .mg-plans-light .plans-heading { text-align: center; }
body.mg-light .mg-plans-light .plans-sub { margin-inline: auto; text-align: center; }
body.mg-light .mg-plans-light .pricing-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 18px;
  padding: 12px 0 4px;
}
body.mg-light .mg-plans-light .pricing-cards .mg-plan-notice { width: 100%; max-width: 640px; justify-self: stretch; }

body.mg-light .mg-plans-light .pc-one {
  --pcx: var(--kit-accent, #f40450);
  --pcx-deep: var(--kit-deep, #b80038);
  width: 100%;
  max-width: 640px;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 30px 70px -30px rgba(13, 17, 23, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
}
body.mg-light .mg-plans-light .pc-one:hover { transform: none; box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 30px 70px -30px rgba(13, 17, 23, 0.3); }

/* The switch */
body.mg-light .mg-plans-light .pc-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--mg-line);
  background: var(--mg-surface);
}
body.mg-light .mg-plans-light .pc-period-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  margin: 0;
  padding: 6px 6px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--mg-quiet);
  cursor: pointer;
  transition: background 0.2s var(--mg-ease), color 0.2s var(--mg-ease), box-shadow 0.2s var(--mg-ease);
}
body.mg-light .mg-plans-light .pc-period-btn:hover { color: var(--mg-ink); }
body.mg-light .mg-plans-light .pc-period-btn.is-on {
  background: #fff;
  color: var(--mg-ink);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.08), 0 6px 16px -8px rgba(13, 17, 23, 0.25);
}
body.mg-light .mg-plans-light .pc-period-btn:focus-visible { outline: 2px solid var(--pcx); outline-offset: 2px; }
body.mg-light .mg-plans-light .pc-period-name { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
body.mg-light .mg-plans-light .pc-period-sub { font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--mg-label); white-space: nowrap; }
body.mg-light .mg-plans-light .pc-period-save { color: #15803d; font-weight: 800; }

/* Headline + button */
body.mg-light .mg-plans-light .pc-kicker {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font: 700 11px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-label);
}
body.mg-light .mg-plans-light .pc-period { display: none; }
body.mg-light .mg-plans-light .pc-one[data-period="weekly"] .pc-period[data-period="weekly"],
body.mg-light .mg-plans-light .pc-one[data-period="ultra"] .pc-period[data-period="ultra"],
body.mg-light .mg-plans-light .pc-one[data-period="yearly"] .pc-period[data-period="yearly"],
body.mg-light .mg-plans-light .pc-one[data-period="lifetime"] .pc-period[data-period="lifetime"] { display: block; }
body.mg-light .mg-plans-light .pc-one[data-period="semester"] .pc-period[data-period="semester"] { display: block; }
body.mg-light .mg-plans-light .plan-card h3.pc-h {
  display: block;
  justify-content: center;
  gap: 0;
  margin: 6px 0 0;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--mg-ink);
}
body.mg-light .mg-plans-light .plan-card h3.pc-h b { font-weight: 900; color: var(--pcx); }
body.mg-light .mg-plans-light .pc-under { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--mg-quiet); }
body.mg-light .mg-plans-light .pc-one .pc-action { margin-top: 16px; border: 0; background: none; }
body.mg-light .mg-plans-light .pc-one .plan-cta {
  min-height: 56px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.mg-light .mg-plans-light .pc-one .plan-cta.weekly,
body.mg-light .mg-plans-light .pc-one .plan-cta.ultra,
body.mg-light .mg-plans-light .pc-one .plan-cta.yearly,
body.mg-light .mg-plans-light .pc-one .plan-cta.lifetime,
body.mg-light .mg-plans-light .pc-one .plan-cta.semester {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%), var(--pcx);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: inset 0 -4px 0 var(--pcx-deep), 0 8px 6px rgba(13, 17, 23, 0.1), 0 26px 30px -14px color-mix(in srgb, var(--pcx) 45%, transparent);
}
body.mg-light .mg-plans-light .pc-one .plan-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
body.mg-light .mg-plans-light .pc-one .plan-cta:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--pcx-deep), 0 3px 4px rgba(13, 17, 23, 0.1); }
body.mg-light .mg-plans-light .pc-one .plan-note {
  margin: 10px 0 0;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mg-label);
}
body.mg-light .mg-plans-light .pc-one .plan-note i { font-style: normal; margin: 0 7px; color: #c6ccd6; }

/* Perks */
body.mg-light .mg-plans-light .pc-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(18px, 2vw, 24px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
body.mg-light .mg-plans-light .pc-perks li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #333c49;
}
body.mg-light .mg-plans-light .pc-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--pcx) 14%, #fff);
  mask: none;
  -webkit-mask: none;
}
body.mg-light .mg-plans-light .pc-perks li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: var(--pcx);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 12.5 3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 12.5 3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* What you are buying: a tile per platform */
body.mg-light .mg-plans-light .pc-logos-head {
  margin: clamp(18px, 2vw, 24px) 0 0;
  font: 700 11px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-label);
}
body.mg-light .mg-plans-light .pc-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
body.mg-light .mg-plans-light .pc-logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 74px;
  padding: 8px 4px 7px;
  border-radius: 12px;
  border: 1px solid var(--mg-line);
  background: #fff;
}
body.mg-light .mg-plans-light .pc-logos img {
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}
body.mg-light .mg-plans-light .pc-logos span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #333c49;
}

@media (max-width: 700px) {
  body.mg-light .mg-plans-light .pc-one { padding: 16px 16px 20px; border-radius: 22px; }
  body.mg-light .mg-plans-light .pc-periods { gap: 3px; padding: 3px; }
  body.mg-light .mg-plans-light .pc-period-btn { min-height: 44px; padding: 5px 3px; }
  body.mg-light .mg-plans-light .pc-period-name { font-size: 13px; }
  body.mg-light .mg-plans-light .pc-period-sub { font-size: 10px; }
  body.mg-light .mg-plans-light .pc-perks { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  body.mg-light .mg-plans-light .pc-one .plan-note i { display: block; height: 0; overflow: hidden; margin: 0; }
  body.mg-light .mg-plans-light .pc-logos li { width: 70px; padding: 8px 2px 7px; }
  body.mg-light .mg-plans-light .pc-logos span { font-size: 10px; }
}
@media (max-width: 400px) {
  body.mg-light .mg-plans-light .pc-period-sub { display: none; }
  body.mg-light .mg-plans-light .pc-period-btn { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mg-light .mg-plans-light .pc-period-btn { transition: none; }
}