/* ============================================================
   MemGenie — light theme
   Scoped entirely under body.mg-light so no other page that shares
   styles.css is affected. Loaded after styles.css in memgenie.html.
   ============================================================ */

body.mg-light {
  --ink: #0d1117;
  --ink-2: #2b323c;
  --body: #5b626d;
  --soft: #79808b;
  --hair: rgba(13, 17, 23, 0.09);
  --hair-2: rgba(13, 17, 23, 0.06);
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --violet: #8b5cf6;
  --violet-2: #a855f7;
  --magenta: #e355b4;
  --ok: #16a34a;

  background: #ffffff;
  color: var(--ink);
}

/* ---------- 1. HERO ---------- */

.mgh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px) 20px clamp(56px, 6vw, 88px);
  background: #fff;
}

.mgh-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the right edge so the ribbon stays on the right and the video's
     own white half fills the left, exactly as in the reference. */
  object-position: 100% 50%;
  z-index: -3;
  pointer-events: none;
}

/* Gaussian blur on the video's top and bottom edges only, so it melts into the
   page instead of ending on a hard line.
   backdrop-filter blurs whatever is painted behind this layer (the video); the
   mask restricts that blur to the top and bottom bands and leaves the middle
   sharp. One extra element — no second video decode. */
.mgh-blur {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 7%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    #000 93%,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 7%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    #000 93%,
    #000 100%
  );
}

/* Holds the left two-thirds pure white so the centred copy keeps contrast. */
.mgh-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.1) 88%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.5) 12%, rgba(255, 255, 255, 0) 30%);
}

.mgh-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* --- video card --- */
.mgh-player {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto clamp(26px, 3vw, 40px);
  /* Matches the source video's native 1742x1080 so it fills the card
     edge-to-edge with no crop. */
  aspect-ratio: 1742 / 1080;
  border-radius: 18px;
  overflow: hidden;
  background: #14171d;
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow:
    0 2px 6px rgba(13, 17, 23, 0.06),
    0 24px 60px -18px rgba(13, 17, 23, 0.32);
}

.mgh-player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- trust row --- */
.mgh-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.mgh-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04);
  backdrop-filter: blur(8px);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  /* Width is reserved here, not on the number. A fixed-width number box left
     visible slack beside "400" and made it read as a detached chip; holding the
     pill steady instead keeps the sentence tight and still stops the row
     re-centring while the count climbs. */
  min-width: 21.8em;
  justify-content: center;
}

/* One flex item, so the pill's 8px gap applies only between the avatars and
   the sentence — bare text nodes became separate anonymous flex items and got
   8px forced between "Trusted by", "400" and "+ Students". */
.mgh-trust-text { white-space: nowrap; }

.mgh-spark {
  width: 15px;
  height: 15px;
  fill: var(--violet);
  flex: none;
}

/* --- Chrome Web Store rating: the loudest thing in the trust row --- */
.mgh-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05), 0 10px 26px -14px rgba(13, 17, 23, 0.3);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.mgh-rating:hover,
.mgh-rating:focus-visible {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 2px 4px rgba(13, 17, 23, 0.06), 0 14px 30px -14px rgba(13, 17, 23, 0.36);
}

.mgh-rating-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.mgh-rating-num {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.mgh-rating-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
}

.mgh-rating-meta small {
  color: var(--soft);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.mgh-faces { display: inline-flex; margin-right: 2px; }

.mgh-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -9px;
  box-shadow: 0 1px 3px rgba(13, 17, 23, 0.16);
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(13, 17, 23, 0.28);
}

.mgh-face:first-child { margin-left: 0; }
.mgh-face--a { background: linear-gradient(135deg, #f9a8d4, #c084fc); }
.mgh-face--b { background: linear-gradient(135deg, #fdba74, #f472b6); }
.mgh-face--c { background: linear-gradient(135deg, #93c5fd, #a78bfa); }

.mgh-stars {
  color: #f5a524;
  font-size: 15px;
  letter-spacing: 1px;
}

/* Stars sit under the big 4.9, so they scale down to act as a caption. */
.mgh-rating-meta .mgh-stars {
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* --- headline --- */
/* Sized so "Get Membean Answers Instantly" holds one line at desktop —
   above ~68px it wraps to three lines and loses the reference's shape. */
.mgh-title {
  margin: 0 0 clamp(16px, 2vw, 22px);
  color: var(--ink);
  font-size: clamp(34px, 5.2vw, 65px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.mgh-title-2 {
  display: block;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.mgh-g1,
.mgh-g2 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mgh-g1 { background-image: linear-gradient(100deg, #a78bfa 0%, #c084fc 100%); }
.mgh-g2 { background-image: linear-gradient(100deg, #c084fc 0%, #e355b4 55%, #f472b6 100%); }

.mgh-sub {
  margin: 0 auto clamp(24px, 3vw, 34px);
  max-width: 620px;
  color: var(--body);
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.6;
}

.mgh-em { color: var(--violet-2); font-weight: 600; }

/* --- CTAs --- */
.mgh-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.mgh-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, background 200ms ease;
}

.mgh-btn svg { width: 17px; height: 17px; flex: none; }

/* The Chrome mark is an <img>, so the svg rule above doesn't reach it. */
.mgh-btn-chrome { width: 19px; height: 19px; flex: none; }

.mgh-btn--lime {
  background: var(--lime);
  color: #16210a;
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.08), 0 10px 24px -8px rgba(160, 200, 0, 0.7);
}

.mgh-btn--lime svg { fill: #16210a; }

.mgh-btn--lime:hover,
.mgh-btn--lime:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(13, 17, 23, 0.1), 0 16px 30px -10px rgba(160, 200, 0, 0.85);
}

.mgh-btn--ghost {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hair);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05);
}

.mgh-btn--ghost svg { fill: var(--violet); }

.mgh-btn--ghost:hover,
.mgh-btn--ghost:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 8px 22px -8px rgba(13, 17, 23, 0.22);
}

.mgh-assure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 clamp(38px, 5vw, 62px);
  color: var(--soft);
  font-size: 14px;
  font-weight: 500;
}

.mgh-assure svg { width: 16px; height: 16px; fill: var(--ok); flex: none; }

/* --- feature strip --- */
.mgh-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.mgh-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 22px;
  border-left: 1px solid var(--hair-2);
}

.mgh-feat:first-child { border-left: 0; padding-left: 0; }

.mgh-feat-ic {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--violet);
}

.mgh-feat-ic svg { width: 21px; height: 21px; fill: currentColor; }
.mgh-feat-ic svg[fill="none"] { fill: none; stroke: currentColor; }

.mgh-feat h2 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mgh-feat p {
  margin: 0;
  color: var(--soft);
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .mgh-feats { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .mgh-feat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 700px) {
  /* the em reservation would overflow a narrow pill */
  .mgh-trust-pill { min-width: 0; }
  .mgh-bg { object-position: 78% 50%; }
  .mgh-veil {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 60%, rgba(255, 255, 255, 0.86) 100%);
  }
  .mgh-feats { grid-template-columns: 1fr; gap: 20px; }
  .mgh-feat { border-left: 0; padding-left: 0; }
}

/* ---------- 2. PAGE SURFACES ---------- */

body.mg-light .mg-demo,
body.mg-light .home-offer-section,
body.mg-light .quiz-feature,
body.mg-light .chrome-store-feature,
body.mg-light .faq-section {
  background: #fff;
  color: var(--ink);
}

body.mg-light .mg-demo { background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); }
body.mg-light .quiz-feature { background: linear-gradient(180deg, var(--surface-2) 0%, #fff 55%, var(--surface-2) 100%); }
body.mg-light .chrome-store-feature { background: var(--surface-2); }

body.mg-light .mg-demo h2,
body.mg-light .home-offer-section h2,
body.mg-light .quiz-feature h2,
body.mg-light .chrome-store-feature h2,
body.mg-light .faq-section h2,
body.mg-light .quiz-feature h3,
body.mg-light .chrome-store-feature h3 {
  color: var(--ink);
}

body.mg-light .mg-demo p,
body.mg-light .quiz-feature p,
body.mg-light .chrome-store-feature p,
body.mg-light .faq-section p {
  color: var(--body);
}

/* Section eyebrow — lime on dark reads as acid on white, so re-tint to violet. */
body.mg-light .hack-eyebrow,
body.mg-light .hack-section-label {
  border-color: rgba(139, 92, 246, 0.26);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03));
  color: var(--violet);
}

/* Media frames get a light rim + lift instead of glowing on black. */
body.mg-light .mg-demo-stage,
body.mg-light .quiz-feature-media,
body.mg-light .quiz-feature-video,
body.mg-light .chrome-store-media {
  border-radius: 18px;
  border: 1px solid var(--hair);
  box-shadow: 0 2px 6px rgba(13, 17, 23, 0.05), 0 24px 60px -22px rgba(13, 17, 23, 0.3);
}

/* --- FAQ --- */
body.mg-light .faq-item {
  border: 1px solid rgba(13, 17, 23, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05);
}

body.mg-light .faq-item + .faq-item { margin-top: 10px; }
body.mg-light .faq-item:hover { border-color: rgba(139, 92, 246, 0.42); }
body.mg-light .faq-item summary { padding: 16px 18px; font-weight: 650; }
body.mg-light .faq-answer { padding: 0 18px; }

body.mg-light .faq-item summary { color: var(--ink); }
body.mg-light .faq-item[open] { border-color: rgba(139, 92, 246, 0.34); background: #fff; }
body.mg-light .faq-answer p { color: var(--body); }
/* The chevron is two white border edges, not a glyph — `color` never touched
   it, so it was invisible on the light cards. */
body.mg-light .faq-item summary::after {
  border-right-color: var(--soft);
  border-bottom-color: var(--soft);
}

body.mg-light .faq-item[open] summary::after,
body.mg-light .faq-item summary:hover::after {
  border-right-color: var(--violet);
  border-bottom-color: var(--violet);
}

/* --- workflow feature cards (section is already light) --- */
body.mg-light .feature-card {
  border: 1px solid var(--hair);
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 17, 23, 0.05), 0 18px 40px -24px rgba(13, 17, 23, 0.28);
}

body.mg-light .feature-card h3 { color: var(--ink); }
body.mg-light .feature-card p { color: var(--body); }

/* --- dark-on-dark leftovers --- */
body.mg-light .mg-demo-head p,
body.mg-light .workflow-lede { color: var(--body); }

/* ---------- 3. THE TWO VIDEO-BACKED BANDS ----------
   .workflow-showcase and .chrome-store-feature are dark only because a
   decorative video sits behind them. Drop the video and they become light
   panels; without this the section text is dark-on-dark and unreadable. */

body.mg-light .workflow-bg-video,
body.mg-light .chrome-store-bg-video {
  display: none;
}

/* Both bands paint their darkness through ::before/::after overlays, and
   their text rules carry an attribute selector. Match that specificity or
   the light theme silently loses. */

body.mg-light .workflow-showcase[data-workflow-showcase] {
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 40%, var(--surface-2) 60%, #fff 100%);
  color: var(--ink);
}

body.mg-light .workflow-showcase[data-workflow-showcase]::before {
  background: none;
}

body.mg-light .chrome-store-feature {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0) 60%),
    #fff;
  color: var(--ink);
}

body.mg-light .chrome-store-feature::before,
body.mg-light .chrome-store-feature::after {
  background: none;
  background-image: none;
}

body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner h2,
body.mg-light .chrome-store-copy h2 { color: var(--ink); }

body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner .workflow-lede { color: var(--body); }

body.mg-light .chrome-store-copy p { color: var(--body); }

/* "Google Chrome Store" was lime — invisible on white. Reuse the hero gradient. */
body.mg-light .chrome-store-copy h2 span {
  background-image: linear-gradient(100deg, #c084fc 0%, #e355b4 55%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body.mg-light .availability-pill {
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05);
}

/* Card meta was lime-on-dark; darken so it reads on a white card. */
body.mg-light .feature-card-label { color: var(--violet); }

body.mg-light .feature-card-num {
  background: rgba(139, 92, 246, 0.12);
  color: var(--violet);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Any remaining lime link text on a light surface. */
body.mg-light .feature-card a,
body.mg-light .feature-card-body a { color: var(--violet); }

/* ============================================================
   4. HERO MOTION
   Entrance stagger + a looping "answer reveal" in the AFTER pane.
   Everything animates opacity/transform only, so there is no layout
   shift and no reflow cost. Honoured only when the visitor has not
   asked for reduced motion (see the block at the end).
   ============================================================ */

@keyframes mgh-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Delays stay under ~450ms total: the h1 is the LCP element, so it must
   not sit invisible for long. */
.mgh-player,
.mgh-trust,
.mgh-title,
.mgh-sub,
.mgh-cta,
.mgh-assure {
  animation: mgh-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mgh-player  { animation-delay: 0ms; }
.mgh-trust   { animation-delay: 140ms; }
.mgh-title   { animation-delay: 260ms; }
.mgh-sub     { animation-delay: 400ms; }
.mgh-cta     { animation-delay: 540ms; }
.mgh-assure  { animation-delay: 670ms; }

/* Feature strip reveals on scroll, not on load — it sits at the bottom of the
   hero and is below the fold on most screens, so a load-time animation played
   to nobody. The .js-reveal gate is added by JS, so with JS disabled the items
   simply render visible instead of being stuck at opacity 0. */
.mgh-feats.js-reveal .mgh-feat {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1150ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mgh-feats.js-reveal.is-visible .mgh-feat {
  opacity: 1;
  transform: none;
}

.mgh-feats.js-reveal .mgh-feat:nth-child(1) { transition-delay: 0ms; }
.mgh-feats.js-reveal .mgh-feat:nth-child(2) { transition-delay: 180ms; }
.mgh-feats.js-reveal .mgh-feat:nth-child(3) { transition-delay: 360ms; }
.mgh-feats.js-reveal .mgh-feat:nth-child(4) { transition-delay: 540ms; }

/* --- the product moment: MemGenie picking the answer, on a loop --- */

/* --- slow drift across the gradient words --- */

@keyframes mgh-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.mgh-g1,
.mgh-g2 {
  background-size: 220% 100%;
  animation: mgh-shimmer 10s ease-in-out infinite;
}

/* --- feature strip hover --- */

.mgh-feat-ic { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.mgh-feat:hover .mgh-feat-ic { transform: translateY(-2px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .mgh-player,
  .mgh-trust,
  .mgh-title,
  .mgh-sub,
  .mgh-cta,
  .mgh-assure,
  .mgh-feat,
  .mgh-g1,
  .mgh-g2 {
    animation: none !important;
  }
  .mgh-feat:hover .mgh-feat-ic { transform: none; }
  .mgh-feats.js-reveal .mgh-feat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- rating stars: land one at a time --- */

.mgh-stars i {
  display: inline-block;
  font-style: normal;
  animation: mgh-star 640ms cubic-bezier(0.2, 1.35, 0.4, 1) both;
}

.mgh-stars i:nth-child(1) { animation-delay: 900ms; }
.mgh-stars i:nth-child(2) { animation-delay: 1050ms; }
.mgh-stars i:nth-child(3) { animation-delay: 1200ms; }
.mgh-stars i:nth-child(4) { animation-delay: 1350ms; }
.mgh-stars i:nth-child(5) { animation-delay: 1500ms; }

@keyframes mgh-star {
  from { opacity: 0; transform: scale(0.3) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}

/* --- "400" counter --- */

.mgh-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .mgh-stars i { animation: none !important; }
}


/* ============================================================
   5. WORKFLOW CARDS — interactive extension slices  (.mgw)
   Each card shows a real slice of the popup UI, rebuilt from
   pages/popup/src/dashboard-ui in the extension. Values are the
   source's literal Tailwind equivalents (gray-100 #f3f4f6,
   green-500 #22c55e, rounded-xl 12px …). Only the control the
   card is about stays live; the rest is dimmed and inert.
   ============================================================ */

/* --- section tidy-up --- */
body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner { text-align: center; }

body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: 22ch;
  text-align: center;
}

body.mg-light .workflow-lede {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body.mg-light .feature-card {
  border-radius: 20px;
  text-align: left;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}

body.mg-light .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(13, 17, 23, 0.06), 0 26px 54px -26px rgba(13, 17, 23, 0.34);
}

body.mg-light .feature-card-body { gap: 9px; padding: clamp(20px, 1.6vw, 26px); }
body.mg-light .feature-card-body h3 { margin: 2px 0 0; font-size: 19px; letter-spacing: -0.02em; }
body.mg-light .feature-card-body p { font-size: 14.5px; line-height: 1.6; }

/* --- the stage each slice sits on (the extension's own gray backdrop) --- */
.mgw-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* The three slices are naturally 200/243/240px tall, which left each card's
     body starting at a different height. Pin one stage height and centre. */
  min-height: 318px;
  padding: 22px 18px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--hair);
}

.mgw {
  width: 100%;
  max-width: 336px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  text-align: left;
}

.mgw-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.mgw-logo { width: 108px; height: auto; display: block; }

.mgw-badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.35; }
.mgw-badge--pro { background: #facc15; color: #000; }
.mgw-badge--ultra { background: #8b5cf6; color: #fff; }

/* --- rows (quiz card) --- */
.mgw-rows { display: flex; flex-direction: column; gap: 10px; }

.mgw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border-left: 4px solid #22c55e;
  background: #f3f4f6;
}

.mgw-row-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #111827; }

.mgw-help {
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  background: #d1d5db;
  color: #4b5563;
  font-size: 10px;
  font-weight: 600;
  display: inline-grid;
  place-items: center;
}

.mgw-row--quiz {
  border-left-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15), 0 0 12px 0 rgba(59, 130, 246, 0.18);
}

/* --- IOKnob, native 44x24 --- */
.mgw-knob {
  position: relative;
  width: 44px; height: 24px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 500px;
  background: #d2d2d2;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background-color 250ms ease;
}

button.mgw-knob { cursor: pointer; }

/* Native size is 24px tall because the extension's is. Extend the touch target
   invisibly rather than inflating the control. */
button.mgw-knob::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}

button.mgw-knob:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.mgw-knob.is-on { background: #22c55e; }
.mgw-row--quiz .mgw-knob.is-on { background: #3b82f6; }

.mgw-knob-i, .mgw-knob-o {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mgw-knob-i { left: 8px; width: 1.5px; height: 9px; border-radius: 1px; background: rgba(255,255,255,.85); }
.mgw-knob-o { right: 7px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); }
.mgw-knob.is-on .mgw-knob-i, .mgw-knob.is-on .mgw-knob-o { opacity: 0; }

.mgw-knob-dot {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, #d1d1d1 100%);
  box-shadow:
    0 0.82px 1.15px -0.625px rgba(0,0,0,.26),
    0 2.1px 2.95px -1.25px rgba(0,0,0,.25),
    0 4.22px 5.91px -1.875px rgba(0,0,0,.24),
    0 8px 11.2px -2.5px rgba(0,0,0,.22);
  transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mgw-knob.is-on .mgw-knob-dot { left: calc(100% - 22px); }
.mgw-knob-dot > span { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(180deg, #f2f2f2, #e4e4e4); }

/* --- settings panel (accuracy / timing cards) --- */
.mgw-panel {
  border-radius: 12px;
  border-left: 4px solid #22c55e;
  background: #f3f4f6;
  padding: 14px;
}

.mgw-panel h4 { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: #1f2937; }

.mgw-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mgw-field--row { margin-top: 14px; margin-bottom: 0; }
.mgw-field-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #4b5563; }
.mgw-field-val { font-size: 13px; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }

/* The input is 24px tall so it's grabbable on touch, but the visible track is
   painted at the source's 6px via the track pseudo-elements. Styling the input
   itself would have left a 6px hit area. */
.mgw-slider {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  outline: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}

.mgw-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}

.mgw-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}

.mgw-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  margin-top: -6px;           /* centre the 18px thumb on the 6px track */
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: pointer;
}

.mgw-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: pointer;
}

.mgw-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(139,92,246,.35); }

.mgw-ticks { display: flex; justify-content: space-between; margin-top: 0; }
.mgw-ticks span { font-size: 10px; color: #9ca3af; }
.mgw-ticks span.is-on { color: #22c55e; font-weight: 600; }

.mgw-select {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* --- what's live vs what's context --- */
.mgw-dim {
  opacity: 0.42;
  filter: saturate(0.5);
  pointer-events: none;
  user-select: none;
}

.mgw-live {
  position: relative;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.34), 0 6px 18px -8px rgba(139, 92, 246, 0.5);
}

.mgw-row--quiz.mgw-live {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.34), 0 0 12px 0 rgba(59, 130, 246, 0.18);
}

.mgw-hint {
  margin: 0;
  color: var(--soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mgw-hint span { color: var(--violet); margin-right: 3px; }

@media (max-width: 900px) {
  .mgw-stage { min-height: 300px; padding: 18px 14px 14px; }
  .mgw { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  body.mg-light .feature-card, .mgw-knob, .mgw-knob-dot { transition: none !important; }
  body.mg-light .feature-card:hover { transform: none; }
}

/* ---------- "Why students use it" ---------- */

.mg-why {
  padding: clamp(56px, 6vw, 92px) 20px clamp(48px, 5vw, 78px);
  background: #fff;
}

.mg-why-inner { max-width: 760px; margin: 0 auto; }

.mg-why-inner .hack-eyebrow { display: inline-flex; }

.mg-why-inner h2 {
  margin: 14px 0 22px;
  color: var(--ink);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  font-weight: 860;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.mg-why-lede {
  margin: 0 0 26px;
  color: var(--body);
  font-size: clamp(15.5px, 1.35vw, 17.5px);
  line-height: 1.65;
}

.mg-why-lede strong { color: var(--ink); font-weight: 700; }
.mg-why-lede a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 2px; }

/* Reuses .faq-item so it inherits the same light-theme outline and chevron. */
.mg-why-drops .faq-answer p { margin: 0 0 14px; }
.mg-why-drops .faq-answer p:last-child { margin-bottom: 0; }
.mg-why-drops .faq-answer a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 2px; }
.mg-why-drops .faq-answer a:hover { text-decoration: none; }
.mg-why-drops .faq-answer strong { color: var(--ink); font-weight: 700; }

.mg-why-list { margin: 0 0 14px; padding-left: 20px; }
.mg-why-list li { margin-bottom: 10px; }

@media (max-width: 600px) {
  .mg-why { padding-left: 16px; padding-right: 16px; }
  .mg-why-inner h2 { font-size: 26px; }
}

/* ---------- quiz section tidy ---------- */

body.mg-light .quiz-feature-head { max-width: 640px; margin-left: auto; margin-right: auto; }
body.mg-light .quiz-feature-head h2 { text-wrap: balance; }
body.mg-light .quiz-feature-head p { max-width: 56ch; margin-left: auto; margin-right: auto; }

body.mg-light .quiz-feature-stage {
  border-radius: 20px;
  border: 1px solid var(--hair);
  box-shadow: 0 2px 8px rgba(13, 17, 23, 0.05), 0 30px 66px -30px rgba(13, 17, 23, 0.34);
}

/* ---------- reviews grid ---------- */

.reviews-showcase { padding: clamp(64px, 7vw, 104px) 20px clamp(56px, 6vw, 92px); }
.rv-inner { max-width: 1180px; margin: 0 auto; }
.rv-head { text-align: center; max-width: 720px; margin: 0 auto clamp(38px, 4.5vw, 60px); }

.rv-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
}

.rv-badge svg { width: 16px; height: 16px; color: var(--violet); flex: none; }
.rv-badge strong { color: var(--ink); font-weight: 800; }

.rv-head h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(29px, 3.4vw, 42px);
  line-height: 1.1;
  font-weight: 860;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.rv-lede { margin: 0; color: var(--body); font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.6; }

.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
}

.rv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 18px 40px -28px rgba(13, 17, 23, 0.3);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}

.rv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(13, 17, 23, 0.06), 0 26px 52px -28px rgba(13, 17, 23, 0.36);
}

.rv-card--featured {
  background: linear-gradient(180deg, #fff 0%, #faf7ff 100%);
  border-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 22px 48px -26px rgba(139, 92, 246, 0.5);
}

.rv-quote { position: absolute; top: 18px; right: 20px; }
.rv-quote svg { width: 26px; height: 26px; color: rgba(139, 92, 246, 0.16); display: block; }
.rv-card--featured .rv-quote svg { color: rgba(139, 92, 246, 0.28); }

.rv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.rv-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(13, 17, 23, 0.28);
  background: linear-gradient(135deg, #a78bfa, #f472b6);
}

.rv-avatar--jb { background: linear-gradient(135deg, #f9a8d4, #c084fc); }
.rv-avatar--et { background: linear-gradient(135deg, #fdba74, #f472b6); }
.rv-avatar--kl { background: linear-gradient(135deg, #93c5fd, #a78bfa); }
.rv-avatar--aa { background: linear-gradient(135deg, #86efac, #38bdf8); }
.rv-avatar--ts { background: linear-gradient(135deg, #c4b5fd, #818cf8); }
.rv-avatar--rd { background: linear-gradient(135deg, #fca5a5, #fbbf24); }

.rv-who h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.rv-who p { margin: 2px 0 0; color: var(--soft); font-size: 12.5px; }

.rv-stars { display: inline-flex; gap: 2px; margin-bottom: 10px; }
.rv-star { width: 15px; height: 15px; color: #f5a524; }

.rv-title { margin: 0 0 8px; color: var(--ink); font-size: 15.5px; font-weight: 750; letter-spacing: -0.01em; }
.rv-text { margin: 0; color: var(--body); font-size: 14.5px; line-height: 1.62; }

.rv-foot { display: flex; justify-content: center; margin-top: clamp(30px, 3.5vw, 46px); }

.rv-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.rv-cta img { width: 20px; height: 20px; flex: none; }
.rv-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(13, 17, 23, 0.34); }

@media (max-width: 980px) {
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .reviews-showcase { padding-left: 16px; padding-right: 16px; }
  .rv-grid { grid-template-columns: minmax(0, 1fr); }
  .rv-card { padding: 22px 20px 20px; }
  .rv-badge { font-size: 12.5px; padding: 7px 14px; }
  .rv-cta { font-size: 13.5px; padding: 12px 18px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-card, .rv-cta { transition: none; }
  .rv-card:hover, .rv-cta:hover { transform: none; }
}

/* ---------- slider thumb nudge on scroll-in ----------
   Animates the thumb pseudo-element, not the input, so the value never moves —
   it's an affordance saying "drag me", not a state change. */

@keyframes mg-thumb-bounce {
  0%   { transform: translateX(0); }
  14%  { transform: translateX(-10px); }
  30%  { transform: translateX(8px); }
  46%  { transform: translateX(-5px); }
  62%  { transform: translateX(3px); }
  78%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

.mgw-slider.is-bouncing::-webkit-slider-thumb {
  animation: mg-thumb-bounce 1150ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.mgw-slider.is-bouncing::-moz-range-thumb {
  animation: mg-thumb-bounce 1150ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@media (prefers-reduced-motion: reduce) {
  .mgw-slider.is-bouncing::-webkit-slider-thumb,
  .mgw-slider.is-bouncing::-moz-range-thumb { animation: none; }
}

/* ---------- site-wide scroll reveal ----------
   Same idea as the hero feature strip: JS adds .rv-armed so a script failure
   leaves everything visible rather than stuck at opacity 0. --i staggers
   siblings without needing a rule per child. */

.rv-armed [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.rv-armed [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv-armed [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   7. MOBILE PASS
   Audited at 390px: section gutters ranged 14–20px, vertical
   rhythm 0–76px, and the H2s ran 26–41px — the workflow (41) and
   FAQ (35) headings were both LARGER than the hero H1 (34), which
   inverted the hierarchy. This imposes one gutter, one rhythm and
   one type scale. Kept last in the file so it wins the cascade.
   ============================================================ */

@media (max-width: 640px) {
  /* --- one gutter, so every section's content edge lines up --- */
  body.mg-light .mgh,
  body.mg-light .workflow-showcase[data-workflow-showcase],
  body.mg-light .quiz-feature,
  body.mg-light .reviews-showcase,
  body.mg-light .mg-why,
  body.mg-light .faq-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* --- one vertical rhythm --- */
  body.mg-light .workflow-showcase[data-workflow-showcase],
  body.mg-light .quiz-feature,
  body.mg-light .reviews-showcase,
  body.mg-light .mg-why,
  body.mg-light .faq-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  body.mg-light .mgh { padding-top: 22px; padding-bottom: 48px; }

  /* --- type scale: H1 stays the largest thing on the page --- */
  .mgh-title { font-size: 33px; line-height: 1.08; }
  .mgh-sub { font-size: 15.5px; }

  body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner h2,
  body.mg-light .quiz-feature-head h2,
  body.mg-light #reviews-title,
  body.mg-light #mg-why-title,
  body.mg-light .faq-section h2 {
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -0.025em;
    max-width: none;
  }

  body.mg-light .workflow-lede,
  body.mg-light .quiz-feature-head p,
  body.mg-light .rv-lede,
  body.mg-light .mg-why-lede {
    font-size: 15.5px;
    line-height: 1.6;
  }

  /* --- headroom under each section heading --- */
  body.mg-light .rv-head { margin-bottom: 26px; }
  body.mg-light .feature-grid { margin-top: 30px; gap: 16px; }
  body.mg-light .quiz-feature-head { margin-bottom: 26px; }

  /* --- cards --- */
  body.mg-light .feature-card-body { padding: 20px 18px 22px; }
  body.mg-light .feature-card-body h3 { font-size: 18px; }
  body.mg-light .feature-card-body p,
  .rv-text { font-size: 14.8px; line-height: 1.6; }

  /* --- FAQ / accordions --- */
  body.mg-light .faq-item summary { padding: 15px 16px; font-size: 15.5px; line-height: 1.35; }
  body.mg-light .faq-answer { padding: 0 16px; }
  body.mg-light .faq-answer p { font-size: 14.8px; line-height: 1.62; }

  /* --- 44px minimum on the menu button (was 38px) --- */
  .menu-toggle { min-width: 44px; min-height: 44px; }

  /* --- hero CTAs go full width so they're easy to hit --- */
  .mgh-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .mgh-btn { justify-content: center; padding: 15px 20px; }
}

@media (max-width: 380px) {
  .mgh-title { font-size: 30px; }
  body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner h2,
  body.mg-light .quiz-feature-head h2,
  body.mg-light #reviews-title,
  body.mg-light #mg-why-title,
  body.mg-light .faq-section h2 { font-size: 25px; }
  .mgw { max-width: 100%; }
}

/* --- touch targets, mobile only ---
   Audited at 430px: the video scrubber was 5px tall, the product-switcher
   caret 26px, and the player buttons 34px — all under a comfortable thumb.
   Sizes grow only on touch-sized screens so the desktop look is untouched. */

@media (max-width: 640px) {
  /* scrubber: keep the thin visual track, grow the grabbable area */
  body.mg-light .qp-seek {
    height: 22px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
  }

  body.mg-light .qp-seek::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  body.mg-light .qp-seek::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  body.mg-light .qp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--lime);
    border: 2px solid rgba(255, 255, 255, 0.9);
  }

  body.mg-light .qp-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--lime);
    border: 2px solid rgba(255, 255, 255, 0.9);
  }

  /* player buttons */
  body.mg-light .qp-btn { min-width: 40px; min-height: 40px; }

  /* product switcher caret — invisible hit-area extension, same visual */
  .sg-genie-trigger { position: relative; }
  .sg-genie-trigger::after {
    content: "";
    position: absolute;
    inset: -9px;
  }

  /* speed-mode select in the workflow cards */
  .mgw-select { padding: 8px 10px; font-size: 13px; }
}