/* ---- /styles.css?v=71 ---- */
:root {
  --black: #050607;
  --header: #090a0c;
  --header-soft: #101216;
  --white: #ffffff;
  --muted: #9b9da3;
  --line: #34373d;
  /* Brand accent. Named --lime from when it was #c8ff00; the value is the
     brand crimson now (the sign-up button), and the name is kept because
     ~100 rules reference it. */
  --lime: #f40450;
  --lime-deep: #2b0413;
  --pink: #f40450;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body:has(.entry-loader:not([hidden])) {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.entry-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  pointer-events: all;
  transform: translate3d(0, 0, 0);
  animation: entryPanelExit 980ms cubic-bezier(0.76, 0, 0.24, 1) 2.35s forwards;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style;
}

.entry-loader[hidden] {
  display: none;
}

.entry-mark {
  width: clamp(96px, 9.6vw, 177px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(0, 112vh, 0) rotate(-34deg) scale(0.72);
  transform-origin: center 56%;
  animation: entryGenieIntro 1680ms cubic-bezier(0.19, 1, 0.22, 1) 120ms forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.entry-mark img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  /* PNG ships with a solid black background instead of true alpha; `screen`
     blend mode drops pure black to invisible against any backdrop while
     keeping the neon magenta pixels intact. No re-export needed. */
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.36))
    drop-shadow(0 0 34px rgba(255, 255, 255, 0.18));
}

@keyframes entryGenieIntro {
  0% {
    opacity: 0;
    transform: translate3d(0, 112vh, 0) rotate(-34deg) scale(0.72);
  }

  42% {
    opacity: 1;
  }

  72% {
    opacity: 1;
    transform: translate3d(0, -2.8vh, 0) rotate(8deg) scale(1.035);
  }

  86% {
    transform: translate3d(0, 0.65vh, 0) rotate(-2deg) scale(0.992);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes entryPanelExit {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -104%, 0);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.45vw, 26px);
  min-height: 124px;
  padding: 22px clamp(18px, 2.2vw, 42px);
  background: rgba(8, 9, 11, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

/* Driven off height now, not width: the shared mark is taller than it is wide
   (90x114), so a width clamp made it overflow the header bar. */
.brand-logo {
  display: block;
  height: clamp(34px, 3.4vw, 44px);
  width: auto;
}

.site-menu {
  display: contents;
}

.menu-toggle {
  display: none;
  appearance: none;
  border: 0;
  font: inherit;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.25vw, 28px);
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(15px, 0.95vw, 20px);
  font-weight: 650;
  white-space: nowrap;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  transition: color 160ms ease, opacity 160ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--white);
}

.main-nav .active {
  color: var(--lime);
}

.nav-divider {
  width: 2px;
  height: 34px;
  background: var(--line);
  opacity: 0.9;
}

.chrome-link {
  gap: 10px;
}

.chrome-link img {
  width: 32px;
  height: 32px;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.pricing-button,
.login-button,
.signup-button,
.support-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: clamp(14px, 0.92vw, 19px);
  font-weight: 760;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.pricing-button:hover,
.login-button:hover,
.signup-button:hover,
.support-button:hover,
.pricing-button:focus-visible,
.login-button:focus-visible,
.signup-button:focus-visible,
.support-button:focus-visible {
  transform: translateY(-1px);
}

.support-button {
  gap: 8px;
  min-width: 102px;
  padding: 0 14px;
  color: #fff;
  background: #5865F2;
  border: 1px solid #5865F2;
}

.support-button:hover,
.support-button:focus-visible {
  background: #4752c4;
  border-color: #4752c4;
}

.support-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.pricing-button {
  position: relative;
  gap: 9px;
  min-width: 104px;
  padding: 0 14px;
  color: #f4f4f4;
  background: #1b1d21;
}

.pricing-button strong {
  position: absolute;
  left: 22px;
  bottom: -16px;
  min-width: 82px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.tag-icon,
.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tag-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.login-button,
.signup-button {
  position: relative;
  overflow: hidden;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 220ms ease,
    filter 160ms ease;
}

/* Shimmer sweep — the same shine as the hero "Sign Up" CTA. */
.login-button::before,
.signup-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 620ms ease;
  pointer-events: none;
}

.login-button:hover::before,
.login-button:focus-visible::before,
.signup-button:hover::before,
.signup-button:focus-visible::before {
  left: 130%;
}

/* Signup — full cool treatment: lime gradient, glow, shine. */
.signup-button {
  min-width: 92px;
  padding: 0 18px;
  color: #2b0413;
  background: linear-gradient(135deg, #ff3d70 0%, var(--lime) 48%, #c9033f 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 12px 26px rgba(244, 4, 80, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.signup-button:hover,
.signup-button:focus-visible {
  filter: brightness(1.04);
  box-shadow:
    0 16px 34px rgba(244, 4, 80, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Login — matching "ghost" variant: same shine, subtler fill. */
.login-button {
  min-width: 76px;
  padding: 0 16px;
  color: var(--lime);
  background: rgba(244, 4, 80, 0.08);
  border: 1px solid rgba(244, 4, 80, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-button:hover,
.login-button:focus-visible {
  background: rgba(244, 4, 80, 0.13);
  border-color: rgba(244, 4, 80, 0.5);
  box-shadow:
    0 10px 24px rgba(244, 4, 80, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 124px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(58px, 7vh, 86px) clamp(24px, 5vw, 96px) clamp(66px, 8vh, 98px);
  background:
    radial-gradient(circle at 66% 48%, rgba(79, 47, 98, 0.22), transparent 34%),
    linear-gradient(180deg, #080b0d 0%, #060708 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  z-index: -1;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1.5px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
}

.hero::after {
  z-index: -1;
  background:
    radial-gradient(circle at 77% 40%, rgba(199, 255, 0, 0.12), transparent 18%),
    radial-gradient(circle at 18% 74%, rgba(69, 94, 255, 0.13), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.88;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3, 4, 5, 0.86) 0%, rgba(3, 4, 5, 0.58) 44%, rgba(3, 4, 5, 0.38) 100%),
    radial-gradient(circle at 62% 44%, rgba(199, 255, 0, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.2) 0%, rgba(4, 5, 6, 0.38) 100%);
  pointer-events: none;
}

.hero-content {
  width: min(1680px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
  align-items: center;
  gap: clamp(42px, 5.4vw, 96px);
}

.hero-copy {
  max-width: 820px;
  text-align: left;
}

.hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 3.6vw, 68px);
  line-height: 1.04;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero-genie-glow {
  display: inline-block;
  color: transparent;
  background:
    linear-gradient(105deg, #dfff32 0%, #43f1b7 27%, #66b8ff 52%, #c99cff 74%, #ff7272 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 18px rgba(199, 255, 0, 0.32),
    0 0 38px rgba(102, 184, 255, 0.22),
    0 0 58px rgba(255, 114, 114, 0.14);
  filter: saturate(1.18);
  animation: genieTextGlow 4.2s ease-in-out infinite;
}

@keyframes genieTextGlow {
  0%,
  100% {
    background-position: 0% 50%;
    text-shadow:
      0 0 16px rgba(199, 255, 0, 0.28),
      0 0 34px rgba(102, 184, 255, 0.2),
      0 0 54px rgba(255, 114, 114, 0.12);
  }

  45% {
    background-position: 100% 50%;
    text-shadow:
      0 0 22px rgba(67, 241, 183, 0.32),
      0 0 44px rgba(201, 156, 255, 0.26),
      0 0 68px rgba(255, 114, 114, 0.18);
  }

  70% {
    background-position: 64% 50%;
    text-shadow:
      0 0 20px rgba(223, 255, 50, 0.32),
      0 0 42px rgba(102, 184, 255, 0.26),
      0 0 62px rgba(201, 156, 255, 0.16);
  }
}

.hero p {
  max-width: 760px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(20px, 1.45vw, 29px);
  line-height: 1.5;
  font-weight: 430;
}

.hero-copy-short {
  display: none;
}

.hero-proof-strip {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-proof-strip span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(8, 10, 12, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 30px rgba(0, 0, 0, 0.16);
  font-size: clamp(12px, 0.82vw, 15px);
  font-weight: 830;
  line-height: 1;
}

.hero-proof-strip span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 16px rgba(199, 255, 0, 0.6);
}

.hero-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  margin-top: 42px;
  flex-wrap: wrap;
}

.hero-media {
  position: relative;
  justify-self: stretch;
  perspective: 1400px;
}

.hero-reel {
  position: relative;
  width: min(100%, 880px);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #05070a;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  /* Black-and-white preview scene; bursts into color once the viewer hits play. */
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s ease;
}

.hero-reel.has-started .hero-reel-video {
  filter: none;
}

.video-carousel {
  position: relative;
  min-height: clamp(520px, 60vh, 820px);
  aspect-ratio: 0.94;
  width: min(100%, 820px);
  margin-left: auto;
}

.video-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.video-slot {
  position: absolute;
  width: min(64%, 520px);
  aspect-ratio: 10 / 16;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 34px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 0, -120px) scale(0.72);
  transform-origin: center;
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease,
    filter 520ms ease;
  will-change: transform, opacity;
}

.video-slot.is-active {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.video-slot.is-left,
.video-slot.is-right {
  z-index: 2;
  opacity: 0.68;
  filter: saturate(0.9) brightness(0.74);
}

.video-slot.is-left {
  transform: translate3d(-47%, 3%, -180px) rotateY(14deg) scale(0.68);
}

.video-slot.is-right {
  transform: translate3d(47%, 3%, -180px) rotateY(-14deg) scale(0.68);
}

.video-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(22px, 2.2vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.045)),
    radial-gradient(circle at 50% 34%, rgba(199, 255, 0, 0.17), transparent 31%),
    radial-gradient(circle at 52% 74%, rgba(56, 96, 255, 0.12), transparent 36%),
    rgba(10, 11, 13, 0.62);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.48),
    0 0 70px rgba(199, 255, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  text-align: center;
}

.video-frame::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 26px;
  pointer-events: none;
}

.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.38), transparent 36%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px);
  opacity: 0.8;
  pointer-events: none;
}

.video-slot.is-active .video-frame::before {
  border-color: rgba(199, 255, 0, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 36px rgba(199, 255, 0, 0.11);
}

.video-kicker,
.video-frame strong,
.video-caption {
  position: relative;
  z-index: 1;
}

.video-kicker {
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 900;
  color: var(--lime);
  letter-spacing: 0.08em;
}

.video-frame strong {
  max-width: 380px;
  font-size: clamp(32px, 3vw, 56px);
  line-height: 1.08;
}

.video-caption {
  max-width: 320px;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 650;
}

.video-slot.is-left .video-kicker,
.video-slot.is-right .video-kicker {
  font-size: 13px;
}

.video-slot.is-left .video-frame strong,
.video-slot.is-right .video-frame strong {
  font-size: clamp(22px, 2vw, 34px);
}

.video-slot.is-left .video-caption,
.video-slot.is-right .video-caption {
  display: none;
}

.video-slot:hover,
.video-slot:focus-visible {
  filter: brightness(1.08);
}

.video-sound-button {
  position: absolute;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  z-index: 5;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(5, 7, 9, 0.74);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  font: inherit;
  font-size: 14px;
  font-weight: 830;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.video-sound-button:hover,
.video-sound-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(199, 255, 0, 0.36);
  background: rgba(11, 14, 16, 0.86);
}

.sound-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sound-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.speaker-shape {
  fill: currentColor;
  stroke: none;
}

.video-sound-button .sound-wave {
  opacity: 0;
}

.video-sound-button.is-unmuted .sound-wave {
  opacity: 1;
}

.video-sound-button.is-unmuted .sound-slash {
  opacity: 0;
}

.primary-cta,
.secondary-cta {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 780;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.primary-cta {
  gap: 11px;
  min-width: 240px;
  padding: 0 22px;
  color: #f8f8f8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(23, 24, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.secondary-cta {
  gap: 12px;
  min-width: 246px;
  padding: 0 24px;
  color: #1c1d1f;
  background:
    linear-gradient(180deg, #fff 0%, rgba(241, 244, 247, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 18px 42px rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.18);
}

.primary-cta:hover,
.secondary-cta:hover,
.primary-cta:focus-visible,
.secondary-cta:focus-visible {
  transform: translateY(-1px);
}

.signup-cta {
  position: relative;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 820;
  line-height: 1;
  color: #2b0413;
  background: linear-gradient(135deg, #ff3d70 0%, var(--lime) 48%, #c9033f 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 18px 42px rgba(244, 4, 80, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 220ms ease, filter 160ms ease;
}

.signup-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 620ms ease;
  pointer-events: none;
}

.signup-cta svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}

.signup-cta:hover,
.signup-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 22px 52px rgba(244, 4, 80, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.signup-cta:hover::before,
.signup-cta:focus-visible::before {
  left: 130%;
}

.signup-cta:hover svg,
.signup-cta:focus-visible svg {
  transform: translateX(3px);
}

.cta-chrome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-chrome-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.play-icon svg {
  width: 22px;
  height: 22px;
}

.play-icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.play-icon path {
  fill: currentColor;
}

.home-offer-section {
  padding: clamp(60px, 5.5vw, 92px) 18px;
  background:
    linear-gradient(180deg, #050607 0%, #050608 100%);
}

.pricing-promo.home-pricing-promo {
  margin-bottom: 0;
  min-height: clamp(258px, 19.2vw, 286px);
}

.promo-plan-button {
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: clamp(14px, 1.2vw, 22px);
  padding: 0 19px 0 21px;
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(135deg, #ff1d67 0%, var(--pink) 56%, #b4003b 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 12px 28px rgba(244, 4, 80, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 900;
  line-height: 1;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.promo-plan-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.promo-plan-button:hover,
.promo-plan-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 16px 34px rgba(244, 4, 80, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.detection-callout-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 126px;
  padding: clamp(72px, 6.5vw, 112px) 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(199, 255, 0, 0.07), transparent 21%),
    linear-gradient(180deg, #050608 0%, #111315 42%, #050608 100%);
}

.detection-callout-section::before,
.detection-callout-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.detection-callout-section::before {
  opacity: 0.48;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%, rgba(255, 255, 255, 0.03));
  background-size: 34px 34px, 100% 100%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.detection-callout-section::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.03) 43px 44px, transparent 45px 86px),
    radial-gradient(ellipse at 50% 52%, transparent 0%, rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.62) 100%);
  opacity: 0.72;
}

.detection-callout {
  width: min(100%, 1000px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.undetectable-pill {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(24px, 2vw, 38px);
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(26, 27, 29, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 56px rgba(0, 0, 0, 0.28),
    0 0 42px rgba(199, 255, 0, 0.06);
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 800;
  line-height: 1;
}

.undetectable-pill span {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  filter: drop-shadow(0 0 14px rgba(199, 255, 0, 0.45));
}

.undetectable-pill svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.detection-callout h2 {
  margin: 0;
  color: #f8f8f8;
  text-transform: uppercase;
  font-size: clamp(36px, 3.7vw, 60px);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 28px rgba(0, 0, 0, 0.32);
}

.detection-callout h2 span {
  display: inline;
}

.detection-callout h2 > span {
  display: block;
}

.detection-title-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 22px);
  white-space: normal;
}

.wembean-word,
.detected-word {
  display: inline-flex !important;
}

.wembean-logo-inline {
  width: clamp(90px, 7vw, 140px);
  height: auto;
  flex: 0 0 auto;
  margin: -0.12em 0 -0.18em;
  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.09));
}

.detection-callout p {
  max-width: 660px;
  margin: clamp(22px, 1.8vw, 32px) auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.5;
  font-weight: 520;
}

.detection-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 2.4vw, 40px);
}

.detection-action-button {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 clamp(26px, 2.2vw, 38px);
  border-radius: 14px;
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 900;
  line-height: 1;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.detection-action-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.detection-reviews-button {
  color: #050705;
  background:
    linear-gradient(180deg, #ff5c84 0%, var(--lime) 58%, #c9033f 100%);
  box-shadow:
    0 22px 50px rgba(199, 255, 0, 0.24),
    0 0 70px rgba(199, 255, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.detection-reviews-button:hover,
.detection-reviews-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 26px 58px rgba(199, 255, 0, 0.3),
    0 0 82px rgba(199, 255, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.proof-arrow {
  position: absolute;
  left: 0;
  top: -88px;
  width: 106px;
  height: 106px;
  display: block;
  color: #8f9aff;
  filter:
    drop-shadow(0 0 12px rgba(88, 101, 242, 0.62))
    drop-shadow(0 0 22px rgba(199, 255, 0, 0.14));
  animation: proofArrowFloat 2.2s ease-in-out infinite;
}

.proof-arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.proof-arrow-tail,
.proof-arrow-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: proofArrowDraw 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.proof-arrow-head {
  stroke-width: 5.5;
  animation-delay: 160ms;
}

@keyframes proofArrowFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes proofArrowDraw {
  0% {
    stroke-dashoffset: 190;
    opacity: 0;
  }

  18%,
  74% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -190;
    opacity: 0;
  }
}

.memgenie-update {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 39vw, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(84px, 8vw, 150px) 24px;
  background:
    radial-gradient(circle at 48% 50%, rgba(44, 130, 255, 0.24), transparent 21%),
    radial-gradient(circle at 35% 42%, rgba(17, 91, 160, 0.26), transparent 26%),
    linear-gradient(105deg, #0b1a23 0%, #0b1017 47%, #0b0c10 100%);
}

.memgenie-update::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 28% 18%, rgba(70, 229, 255, 0.08), transparent 30%),
    linear-gradient(90deg, rgba(73, 155, 255, 0.08), transparent 34%, rgba(244, 4, 80, 0.05));
}

.update-grid {
  position: absolute;
  inset: -18%;
  z-index: -2;
  opacity: 0;
  background:
    linear-gradient(rgba(92, 192, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 192, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(900px) rotateX(58deg) scale(1.2) translateY(18%);
}

.update-scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(92, 237, 255, 0.1) 48%, transparent 100%);
  transform: translateY(-115%);
}

.memgenie-update-card {
  position: relative;
  width: min(780px, 100%);
  min-height: 178px;
  display: grid;
  place-items: center;
  text-align: center;
}

.update-lockup {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  filter: blur(10px);
}

.update-alert {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(211, 225, 242, 0.9);
  font-size: clamp(18px, 1.25vw, 25px);
  font-weight: 840;
  line-height: 1;
  text-shadow: 0 0 18px rgba(84, 196, 255, 0.28);
}

.warning-mark {
  position: relative;
  width: 20px;
  height: 18px;
  display: inline-block;
}

.warning-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ffd94a, #ffb72e);
  filter: drop-shadow(0 0 9px rgba(255, 205, 70, 0.35));
}

.warning-mark::after {
  content: "!";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  color: #1b1720;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.update-title-shell {
  position: relative;
  min-height: clamp(62px, 4.8vw, 86px);
  display: grid;
  place-items: center;
  padding: 0 clamp(28px, 3vw, 52px);
  overflow: visible;
  background:
    linear-gradient(90deg, transparent 0%, rgba(45, 128, 255, 0.2) 16%, rgba(83, 238, 255, 0.18) 84%, transparent 100%);
  clip-path: inset(0 50% 0 50%);
  box-shadow:
    0 0 0 1px rgba(112, 214, 255, 0),
    0 0 60px rgba(49, 130, 255, 0);
}

.update-title-shell h2 {
  margin: 0;
  background: linear-gradient(90deg, #2f7fff 0%, #46a7ff 38%, #6ff7ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(40px, 3.2vw, 62px);
  line-height: 1.08;
  font-weight: 850;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  filter: blur(8px);
  text-shadow: 0 0 22px rgba(74, 188, 255, 0.24);
}

.update-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  border-color: rgba(127, 215, 255, 0.62);
}

.update-corner.top-left {
  left: -18px;
  top: -18px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.update-corner.top-right {
  right: -18px;
  top: -18px;
  border-top: 1px solid;
  border-right: 1px solid;
}

.update-corner.bottom-left {
  left: -18px;
  bottom: -18px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.update-corner.bottom-right {
  right: -18px;
  bottom: -18px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.memgenie-update.is-open .update-grid {
  animation: updateGridOpen 1400ms ease forwards;
}

.memgenie-update.is-open .update-scan {
  animation: updateScanOpen 2100ms cubic-bezier(0.22, 1, 0.36, 1) 240ms forwards;
}

.memgenie-update.is-open .update-lockup {
  animation: updateLockupOpen 900ms cubic-bezier(0.22, 1, 0.36, 1) 560ms forwards;
}

.memgenie-update.is-open .update-title-shell {
  animation: updateShellOpen 1150ms cubic-bezier(0.16, 1, 0.3, 1) 740ms forwards;
}

.memgenie-update.is-open .update-title-shell h2 {
  animation: updateTitleOpen 820ms cubic-bezier(0.22, 1, 0.36, 1) 1180ms forwards;
}

.memgenie-update.is-open .update-corner {
  animation: updateCornerOpen 820ms ease 1080ms forwards;
}

@keyframes updateGridOpen {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateX(58deg) scale(1.2) translateY(18%);
  }

  100% {
    opacity: 1;
    transform: perspective(900px) rotateX(58deg) scale(1) translateY(5%);
  }
}

@keyframes updateScanOpen {
  0% {
    opacity: 0;
    transform: translateY(-115%);
  }

  18%,
  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(115%);
  }
}

@keyframes updateLockupOpen {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes updateShellOpen {
  0% {
    clip-path: inset(0 50% 0 50%);
    box-shadow:
      0 0 0 1px rgba(112, 214, 255, 0),
      0 0 60px rgba(49, 130, 255, 0);
  }

  62% {
    clip-path: inset(0 -4% 0 -4%);
  }

  100% {
    clip-path: inset(0 0 0 0);
    box-shadow:
      0 0 0 1px rgba(112, 214, 255, 0.08),
      0 0 70px rgba(49, 130, 255, 0.22);
  }
}

@keyframes updateTitleOpen {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes updateCornerOpen {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.chrome-store-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(480px, 42vw, 640px);
  display: grid;
  place-items: center;
  padding: clamp(72px, 6.5vw, 112px) 24px;
  background: #050707;
}

.chrome-store-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.105) 1px, transparent 1.35px);
  background-size: 24px 24px;
  opacity: 0.34;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.84) 48%, transparent 100%);
  pointer-events: none;
}

.chrome-store-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 80%, rgba(248, 249, 248, 0.45) 92%, #f8f9f8 100%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.34) 68%, rgba(0, 0, 0, 0.78) 86%, #030405 100%),
    radial-gradient(circle at 31% 86%, rgba(16, 151, 116, 0.4), transparent 30%),
    radial-gradient(circle at 58% 70%, rgba(45, 117, 255, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(3, 5, 6, 0.88) 0%, rgba(5, 10, 10, 0.58) 46%, rgba(2, 3, 4, 0.72) 76%, #030405 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 50%, rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.chrome-store-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  filter: brightness(0.76) saturate(1.08) contrast(1.06);
  transform: scale(1.01);
}

.chrome-store-copy {
  position: relative;
  z-index: 3;
  width: min(1050px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  text-align: center;
}

.availability-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  padding: 0 20px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: clamp(18px, 1.25vw, 25px);
  font-weight: 610;
  line-height: 1;
}

.chrome-store-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 4.1vw, 66px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.chrome-store-copy h2 span {
  display: block;
  color: var(--lime);
  text-shadow: 0 0 24px rgba(244, 4, 80, 0.22);
}

.chrome-store-copy p {
  max-width: 820px;
  margin: clamp(26px, 2.2vw, 40px) 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(19px, 1.28vw, 26px);
  line-height: 1.45;
  font-weight: 520;
}

.chrome-store-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: clamp(42px, 4.3vw, 72px);
  flex-wrap: wrap;
}

.chrome-store-cta {
  min-height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 34px;
  border-radius: 16px;
  color: #050705;
  background: var(--lime);
  box-shadow:
    0 20px 52px rgba(113, 255, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  font-size: clamp(21px, 1.38vw, 27px);
  font-weight: 900;
  line-height: 1;
  transition: transform 160ms ease, filter 160ms ease;
}

.chrome-store-cta:hover,
.chrome-store-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.download-icon,
.chrome-store-icon,
.chrome-cta-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chrome-cta-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.14);
}

.chrome-cta-logo img {
  display: block;
  width: 24px;
  height: 24px;
}

.download-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.chrome-store-icon {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.chrome-store-icon img {
  display: block;
  width: 37px;
  height: 37px;
}

.chrome-store-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050607;
}

.workflow-showcase {
  padding: clamp(72px, 6.5vw, 112px) 24px;
  color: #111418;
  background: #f7f8f7;
}

.workflow-inner {
  width: min(1420px, 100%);
  margin: 0 auto;
}

.workflow-inner h2 {
  margin: 0 0 clamp(44px, 4.5vw, 68px);
  color: #111418;
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1.08;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.workflow-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(70px, 7vw, 130px);
  margin-top: clamp(84px, 8vw, 148px);
}

.workflow-row:first-of-type {
  margin-top: 0;
}

.workflow-row.is-reversed {
  grid-template-columns: minmax(520px, 1.18fr) minmax(280px, 0.82fr);
}

.workflow-row.is-reversed .workflow-copy {
  order: 2;
}

.workflow-row.is-reversed .workflow-media {
  order: 1;
}

.workflow-copy {
  max-width: 560px;
  justify-self: center;
}

.workflow-copy h3 {
  margin: 0 0 20px;
  color: #111418;
  font-size: clamp(34px, 2.55vw, 54px);
  line-height: 1.04;
  font-weight: 900;
  text-transform: uppercase;
}

.workflow-copy p {
  margin: 0;
  color: rgba(17, 20, 24, 0.84);
  font-size: clamp(20px, 1.25vw, 27px);
  line-height: 1.38;
  font-weight: 500;
}

.workflow-media {
  position: relative;
  min-height: clamp(350px, 28vw, 520px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 30px;
  background:
    linear-gradient(rgba(10, 14, 18, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 14, 18, 0.045) 1px, transparent 1px),
    #f0f1f0;
  background-size: 26px 26px;
}

.workflow-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.035));
  pointer-events: none;
}

.workflow-video-card {
  position: relative;
  z-index: 1;
  width: min(74%, 640px);
  min-height: clamp(300px, 25vw, 450px);
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 10%, rgba(199, 255, 0, 0.08), transparent 28%),
    linear-gradient(180deg, #111418, #090b0d);
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.24);
}

.workflow-video-screen {
  height: clamp(154px, 12.8vw, 230px);
  margin: 0 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(135deg, rgba(61, 135, 255, 0.28), rgba(199, 255, 0, 0.1)),
    radial-gradient(circle at 62% 40%, rgba(255, 255, 255, 0.2), transparent 18%),
    #17202c;
}

.workflow-video-screen span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.workflow-tools {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 24px 0;
  flex-wrap: wrap;
}

.workflow-tools span,
.workflow-grid-top span,
.workflow-grid-top strong {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  font-size: 15px;
  font-weight: 800;
}

.workflow-prompt {
  min-height: 88px;
  margin: 28px 24px 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.055);
  font-size: 17px;
  font-weight: 700;
}

.workflow-prompt strong {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #050705;
  background: var(--lime);
  font-size: 23px;
  line-height: 1;
}

.workflow-video-card.image-grid {
  width: min(72%, 600px);
  min-height: clamp(330px, 27vw, 480px);
  padding: 24px;
}

.workflow-grid-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.workflow-grid-top strong {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.workflow-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.workflow-image-grid span {
  min-height: clamp(116px, 9.5vw, 168px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(88, 136, 255, 0.44), rgba(199, 255, 0, 0.16)),
    #1c2329;
}

.workflow-image-grid span:nth-child(2) {
  transform: rotate(-4deg) translate(12px, -10px);
  border: 2px solid rgba(199, 255, 0, 0.72);
}

.workflow-image-grid span:nth-child(3) {
  background:
    radial-gradient(circle at 52% 40%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(244, 4, 80, 0.28), rgba(86, 177, 255, 0.18)),
    #1b2027;
}

.workflow-video-card.timeline-card {
  padding-bottom: 24px;
}

.workflow-timeline {
  display: grid;
  grid-template-columns: 1fr 0.78fr 1.16fr;
  gap: 10px;
  margin: 30px 24px 0;
}

.workflow-timeline span {
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.workflow-timeline span:nth-child(2) {
  background: rgba(199, 255, 0, 0.26);
}

.workflow-showcase[data-workflow-showcase] {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 9vw, 168px) clamp(24px, 4vw, 72px);
  overflow: visible;
  color: #fff;
  background:
    radial-gradient(circle at 76% 18%, rgba(199, 255, 0, 0.08), transparent 24%),
    radial-gradient(circle at 24% 42%, rgba(53, 112, 255, 0.11), transparent 28%),
    linear-gradient(180deg, #030405 0%, #060708 48%, #030405 100%);
}

.workflow-showcase[data-workflow-showcase]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 4, 5, 0.68) 0%, rgba(3, 4, 5, 0.44) 34%, rgba(3, 4, 5, 0.6) 78%, #030405 100%),
    radial-gradient(circle at 70% 28%, rgba(199, 255, 0, 0.12), transparent 30%),
    radial-gradient(circle at 25% 60%, rgba(53, 112, 255, 0.16), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, auto, auto, 72px 72px, 72px 72px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  pointer-events: none;
}

.workflow-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.48;
  filter: brightness(0.76) saturate(1.16) contrast(1.04);
  pointer-events: none;
}

/* Tap-to-play button injected on phones for foreground demo videos (script.js). */
.mg-video-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 700px) {
  /* Playback is already stopped by script.js — this just matches
     .sg-hero-video in also hiding it visually. */
  .workflow-bg-video { display: none; }
}

.workflow-showcase[data-workflow-showcase] .workflow-inner {
  position: relative;
  z-index: 2;
  width: min(1520px, 100%);
  margin: 0 auto;
}

.workflow-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #ffd172;
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 850;
}

.workflow-eyebrow span {
  color: var(--lime);
}

.workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
  max-width: 920px;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 5vw, 92px);
  line-height: 0.98;
  font-weight: 920;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-wrap: balance;
}

.workflow-lede {
  max-width: 710px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.45;
  font-weight: 520;
}

/* Clean static feature grid — replaces the old scroll-driven sticky stepper. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 1.8vw, 30px);
  margin-top: clamp(48px, 4.5vw, 76px);
}

.feature-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.32);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(199, 255, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 36px 84px rgba(0, 0, 0, 0.44);
}

.feature-card-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #0a0e16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

.feature-card-media--auto {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 139, 233, 0.34), transparent 46%),
    radial-gradient(circle at 74% 76%, rgba(66, 105, 255, 0.32), transparent 48%),
    linear-gradient(145deg, #2a1140 0%, #161a3a 52%, #0a0e1a 100%);
}

.feature-auto-orb {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 255, 0, 0.3), transparent 68%);
  filter: blur(6px);
  animation: featureAutoPulse 3.6s ease-in-out infinite;
}

.feature-auto-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 10, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 750;
}

.feature-auto-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(199, 255, 0, 0.8);
  animation: featureAutoPulse 1.5s ease-in-out infinite;
}

@keyframes featureAutoPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.68; }
  50% { transform: scale(1.06); opacity: 1; }
}

.feature-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 1.8vw, 30px);
}

.feature-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #080a0b;
  background: var(--lime);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 26px rgba(199, 255, 0, 0.2);
}

.feature-card-label {
  color: var(--lime);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.feature-card-label--new {
  color: #2b0413;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lime);
  letter-spacing: 0.08em;
}

.feature-card-body h3 {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(23px, 1.65vw, 29px);
  line-height: 1.12;
  font-weight: 880;
  letter-spacing: -0.01em;
  text-transform: none;
}

.feature-card-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  font-weight: 500;
}

.feature-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  width: fit-content;
  color: var(--lime);
  font-size: 15px;
  font-weight: 800;
  transition: gap 160ms ease, color 160ms ease;
}

.feature-card-link span {
  transition: transform 160ms ease;
}

.feature-card:hover .feature-card-link {
  gap: 10px;
}

.feature-card-link:hover span,
.feature-card-link:focus-visible span {
  transform: translateX(3px);
}

@media (max-width: 920px) {
  .feature-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-auto-orb,
  .feature-auto-dot {
    animation: none;
  }
}

.workflow-sticky-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(440px, 1fr);
  align-items: start;
  gap: clamp(48px, 5vw, 88px);
  margin-top: clamp(36px, 3.5vw, 56px);
}

.workflow-panel-list {
  display: grid;
  gap: clamp(34px, 6vh, 76px);
  padding-bottom: 12vh;
}

.workflow-step {
  min-height: clamp(520px, 78vh, 760px);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 3vw, 48px);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0.4;
  transform: translateY(36px) scale(0.96);
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms ease,
    background 360ms ease,
    box-shadow 360ms ease;
}

.workflow-step.is-active {
  border-color: rgba(199, 255, 0, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(199, 255, 0, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 26px 80px rgba(0, 0, 0, 0.25);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.workflow-step-number {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #080a0b;
  background: var(--lime);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(199, 255, 0, 0.18);
}

.workflow-step-label {
  margin: 0 0 16px;
  color: var(--lime);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workflow-step-copy h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(38px, 3.25vw, 64px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

.workflow-step-copy p:not(.workflow-step-label) {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(18px, 1.25vw, 23px);
  line-height: 1.5;
  font-weight: 500;
}

.workflow-step-copy a {
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  padding: 0 21px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 16px;
  font-weight: 850;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.workflow-step-copy a:hover,
.workflow-step-copy a:focus-visible {
  transform: translateY(-1px);
  background: rgba(199, 255, 0, 0.14);
  border-color: rgba(199, 255, 0, 0.26);
}

.workflow-visual-sticky {
  position: sticky;
  top: clamp(96px, 11vh, 142px);
  align-self: start;
  height: min(60vh, 520px);
  min-height: min(60vh, 520px);
  display: grid;
  place-items: center;
}

.workflow-visual-shell {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 4/3;
  border-radius: 28px;
  transform-style: preserve-3d;
}

.workflow-visual-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111522;
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  filter: blur(12px) saturate(0.8);
  transform: translate3d(0, 38px, -80px) scale(0.94) rotateX(3deg);
  transition:
    opacity 520ms ease,
    filter 620ms ease,
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.workflow-visual-card.is-active {
  z-index: 2;
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
}

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

.visual-gradient {
  position: absolute;
  inset: 0;
}

.accuracy-card .visual-gradient {
  background:
    radial-gradient(circle at 30% 24%, rgba(199, 255, 0, 0.9), transparent 22%),
    radial-gradient(circle at 77% 68%, rgba(46, 145, 255, 0.9), transparent 34%),
    linear-gradient(135deg, #151c10 0%, #143720 42%, #071117 100%);
}

.delay-card .visual-gradient {
  background:
    radial-gradient(circle at 30% 18%, rgba(239, 227, 107, 0.95), transparent 24%),
    radial-gradient(circle at 74% 78%, rgba(66, 105, 255, 0.95), transparent 36%),
    linear-gradient(135deg, #836dff 0%, #1d43ba 54%, #0c1120 100%);
}

.typing-card .visual-gradient {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 139, 233, 0.95), transparent 24%),
    radial-gradient(circle at 72% 72%, rgba(40, 67, 155, 0.95), transparent 34%),
    linear-gradient(145deg, #ff7f48 0%, #f675db 45%, #131737 100%);
}

.membean-window,
.delay-console,
.typing-console {
  position: relative;
  z-index: 1;
  width: min(78%, 560px);
  padding: clamp(22px, 2.5vw, 34px);
  border-radius: 30px;
  background: rgba(7, 12, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 82px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.window-top {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.window-top span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

.accuracy-meter {
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
}

.accuracy-meter span,
.answer-choice small,
.delay-row span,
.typing-line span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.accuracy-meter strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: clamp(54px, 6vw, 78px);
  line-height: 0.94;
}

.accuracy-meter div {
  height: 10px;
  margin-top: 17px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.accuracy-meter div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
}

.answer-choice {
  min-height: 70px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 0 18px;
  border-radius: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.answer-choice.is-selected {
  outline: 2px solid rgba(199, 255, 0, 0.55);
  background: rgba(199, 255, 0, 0.12);
}

.answer-choice > span {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #071009;
  background: #fff;
  font-weight: 950;
}

.answer-choice strong {
  font-size: 20px;
}

.delay-console {
  display: grid;
  gap: 14px;
}

.delay-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
}

.delay-row strong {
  color: var(--lime);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
}

.delay-wave {
  height: 112px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
}

.delay-wave span {
  width: 14%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lime), rgba(199, 255, 0, 0.18));
}

.delay-wave span:nth-child(1) { height: 42%; }
.delay-wave span:nth-child(2) { height: 70%; }
.delay-wave span:nth-child(3) { height: 54%; }
.delay-wave span:nth-child(4) { height: 88%; }
.delay-wave span:nth-child(5) { height: 48%; }

.typing-line {
  min-height: 112px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
}

.typing-line strong {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 16px;
  color: #fff;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
}

.typing-line strong::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 7%;
  width: 3px;
  height: 88%;
  border-radius: 999px;
  background: var(--lime);
  animation: caretBlink 920ms steps(1) infinite;
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}

.typing-fix {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  color: #071009;
  background: var(--lime);
  font-weight: 900;
}

.keyboard-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.keyboard-grid span {
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.13);
}

@media (max-width: 1080px) {
  .workflow-showcase[data-workflow-showcase] {
    padding: clamp(64px, 8vw, 96px) 24px;
  }

  .workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
    font-size: clamp(32px, 5vw, 48px);
  }

  /* Flatten the 2-column layout into a single column, then interleave
     each visual-card right under its matching workflow-step via order. */
  .workflow-sticky-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 40px;
  }

  .workflow-panel-list,
  .workflow-visual-sticky,
  .workflow-visual-shell {
    display: contents;
  }

  .workflow-step[data-workflow-step="0"] { order: 1; }
  .workflow-visual-card[data-workflow-visual="0"] { order: 2; }
  .workflow-step[data-workflow-step="1"] { order: 3; }
  .workflow-visual-card[data-workflow-visual="1"] { order: 4; }
  .workflow-step[data-workflow-step="2"] { order: 5; }
  .workflow-visual-card[data-workflow-visual="2"] { order: 6; }

  /* Each card is no longer absolutely stacked — they each render in place.
     Use [data-workflow-visual] to match specificity of .is-active so source
     order wins, ensuring all three cards stay visible on mobile. */
  .workflow-visual-card[data-workflow-visual] {
    position: relative;
    inset: auto;
    width: min(100%, 560px);
    aspect-ratio: 1.4;
    margin: 0 auto;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .workflow-step {
    min-height: auto;
    opacity: 1;
    transform: none;
  }

  .workflow-step {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .workflow-showcase[data-workflow-showcase] {
    padding: 68px 16px 74px;
  }

  .workflow-eyebrow {
    margin-bottom: 16px;
    font-size: 13px;
  }

  .workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
    max-width: 11ch;
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1;
  }

  .workflow-lede {
    max-width: 30ch;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.45;
  }

  .workflow-sticky-layout {
    gap: 24px;
    margin-top: 36px;
  }

  .workflow-visual-card[data-workflow-visual] {
    width: 100%;
    aspect-ratio: 1.02;
    border-radius: 22px;
  }

  .workflow-step {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
    border-radius: 20px;
  }

  .workflow-step-number {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 12px;
  }

  .workflow-step-copy h3 {
    margin-bottom: 12px;
    font-size: clamp(27px, 7.8vw, 36px);
  }

  .workflow-step-copy p:not(.workflow-step-label) {
    font-size: 15px;
    line-height: 1.45;
  }

  .workflow-step-copy a {
    min-height: 43px;
    margin-top: 22px;
    padding: 0 16px;
    font-size: 14px;
  }

  .membean-window,
  .delay-console,
  .typing-console {
    width: 85%;
    padding: 16px;
    border-radius: 22px;
  }

  .window-top {
    margin-bottom: 14px;
  }

  .accuracy-meter {
    padding: 14px;
    border-radius: 17px;
  }

  .accuracy-meter strong {
    font-size: 42px;
  }

  .answer-choice {
    min-height: 52px;
    grid-template-columns: 30px 1fr;
    padding: 0 12px;
    border-radius: 15px;
  }

  .answer-choice > span {
    width: 28px;
    height: 28px;
  }

  .answer-choice strong {
    font-size: 15px;
  }

  .answer-choice small {
    display: none;
  }

  .delay-row {
    min-height: 52px;
    padding: 0 14px;
    border-radius: 15px;
  }

  .delay-row strong {
    font-size: 26px;
  }

  .delay-wave {
    height: 76px;
    gap: 8px;
    border-radius: 16px;
  }

  .typing-line {
    min-height: 88px;
    padding: 17px;
    border-radius: 18px;
  }

  .typing-line strong {
    font-size: 28px;
  }

  .typing-fix {
    padding: 12px;
    border-radius: 14px;
    font-size: 13px;
  }

  .keyboard-grid {
    gap: 7px;
  }

  .keyboard-grid span {
    height: 24px;
    border-radius: 8px;
  }
}

.review-entry-transition {
  --transition-bg-opacity: 0;
  --transition-card-opacity: 0;
  --transition-card-y: 120px;
  --transition-card-scale: 0.84;
  --transition-circle-size: 7%;
  --transition-grid-opacity: 0.58;
  --transition-grid-scale: 1;
  --transition-grid-y: 0px;
  --transition-glow-opacity: 0.26;
  --transition-rings-opacity: 1;
  --transition-rings-scale: 0.72;
  --transition-rings-rotate: 0deg;
  --transition-wash-blur: 0px;
  position: relative;
  z-index: 3;
  height: 150vh;
  margin-top: -1px;
  overflow: visible;
  isolation: isolate;
  background: #030405;
}

.review-entry-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 54%, rgba(199, 255, 0, 0.09), transparent 18%),
    radial-gradient(circle at 50% 54%, rgba(59, 129, 255, 0.13), transparent 28%),
    #030405;
}

.review-entry-sticky::before,
.review-entry-sticky::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.review-entry-sticky::before {
  inset: -18%;
  z-index: 1;
  opacity: var(--transition-glow-opacity);
  background:
    radial-gradient(circle at 50% 54%, rgba(199, 255, 0, 0.28), transparent 18%),
    conic-gradient(from 0deg at 50% 54%, transparent 0deg, rgba(199, 255, 0, 0.18) 13deg, transparent 28deg, transparent 54deg, rgba(64, 156, 255, 0.14) 70deg, transparent 92deg, transparent 360deg);
  filter: blur(1px);
  transform: scale(var(--transition-rings-scale)) rotate(var(--transition-rings-rotate));
}

.review-entry-sticky::after {
  inset: auto 0 -2px;
  z-index: 5;
  height: 24vh;
  opacity: var(--transition-bg-opacity);
  background: linear-gradient(180deg, rgba(248, 249, 248, 0), #f8f9f8 74%);
}

.review-entry-grid {
  position: absolute;
  inset: -30% -16%;
  z-index: 1;
  opacity: var(--transition-grid-opacity);
  background:
    linear-gradient(rgba(199, 255, 0, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 255, 0, 0.14) 1px, transparent 1px),
    radial-gradient(circle at 50% 54%, transparent 0%, rgba(3, 4, 5, 0.22) 34%, rgba(3, 4, 5, 0.92) 72%);
  background-size: 76px 76px, 76px 76px, auto;
  transform: perspective(900px) rotateX(62deg) translate3d(0, var(--transition-grid-y), 0) scale(var(--transition-grid-scale));
  transform-origin: center 58%;
}

.review-entry-lightwash {
  position: absolute;
  inset: -14%;
  z-index: 2;
  opacity: var(--transition-bg-opacity);
  /* Soft, full-bleed dissolve to the reviews background colour — no hard
     clip-path circle edge, so the dark-to-light reveal feels fluid.
     At full opacity this is exactly #f8f9f8, giving a seamless handoff. */
  background:
    radial-gradient(circle at 50% 46%, #ffffff, rgba(248, 249, 248, 0.94) 56%, #f8f9f8 100%);
  filter: blur(calc(10px + var(--transition-wash-blur)));
}

.review-entry-rings {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: var(--transition-rings-opacity);
  transform: scale(var(--transition-rings-scale)) rotate(var(--transition-rings-rotate));
  transform-origin: center;
  pointer-events: none;
}

.review-entry-rings span {
  grid-area: 1 / 1;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(199, 255, 0, 0.34);
  box-shadow:
    0 0 34px rgba(199, 255, 0, 0.12),
    inset 0 0 34px rgba(199, 255, 0, 0.06);
}

.review-entry-rings span:nth-child(2) {
  width: min(62vw, 820px);
  border-color: rgba(72, 155, 255, 0.22);
}

.review-entry-rings span:nth-child(3) {
  width: min(84vw, 1120px);
  border-color: rgba(255, 255, 255, 0.13);
}

.review-entry-card {
  position: relative;
  z-index: 4;
  width: min(92vw, 620px);
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: 26px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 34px;
  color: #101317;
  background:
    radial-gradient(circle at 92% 12%, rgba(199, 255, 0, 0.32), transparent 28%),
    rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(16, 19, 23, 0.08);
  box-shadow:
    0 40px 130px rgba(0, 0, 0, 0.28),
    0 0 0 10px rgba(255, 255, 255, 0.08);
  opacity: var(--transition-card-opacity);
  transform: translate3d(0, var(--transition-card-y), 0) scale(var(--transition-card-scale));
  transform-origin: center;
}

.review-entry-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.review-entry-card span {
  color: #101317;
  font-size: 17px;
  letter-spacing: 0.22em;
}

.review-entry-card small {
  color: rgba(16, 19, 23, 0.56);
  font-size: 13px;
  font-weight: 930;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.review-entry-card strong {
  display: block;
  color: #101317;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 0.98;
  font-weight: 940;
  letter-spacing: 0;
  text-wrap: balance;
}

.reviews-showcase {
  --reviews-opacity: 1;
  --reviews-rise: 0px;
  --reviews-card-rise: 0px;
  --reviews-progress-rise: 0px;
  --reviews-trust-rise: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -1px;
  padding: clamp(72px, 6.5vw, 112px) clamp(18px, 4vw, 64px);
  color: #101317;
  background:
    radial-gradient(circle at 18% 18%, rgba(199, 255, 0, 0.32), transparent 18%),
    radial-gradient(circle at 82% 12%, rgba(35, 109, 255, 0.17), transparent 22%),
    radial-gradient(circle at 72% 78%, rgba(244, 4, 80, 0.08), transparent 26%),
    linear-gradient(180deg, #f8f9f8 0%, #f1f3f1 100%);
}

.reviews-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background:
    linear-gradient(rgba(10, 13, 16, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 13, 16, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 36%, #000 0%, transparent 72%);
}

.reviews-showcase::after {
  content: "";
  position: absolute;
  top: 22%;
  right: -12%;
  z-index: -1;
  width: min(46vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(199, 255, 0, 0.28), rgba(199, 255, 0, 0.06) 36%, transparent 68%);
  filter: blur(10px);
  opacity: 0.8;
}

.reviews-header {
  width: min(1420px, 100%);
  margin: 0 auto clamp(48px, 5vw, 86px);
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) auto;
  align-items: end;
  gap: 34px;
  opacity: var(--reviews-opacity);
  transform: translate3d(0, var(--reviews-rise), 0);
  transition: opacity 180ms linear, transform 180ms linear;
  will-change: opacity, transform;
}

.reviews-kicker {
  width: fit-content;
  margin: 0 0 12px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #111418;
  background: rgba(199, 255, 0, 0.9);
  font-size: 13px;
  font-weight: 930;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reviews-header h2 {
  max-width: 780px;
  margin: 0;
  color: #101317;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1.02;
  font-weight: 940;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.reviews-header p:not(.reviews-kicker) {
  max-width: 640px;
  margin: 22px 0 0;
  color: rgba(16, 19, 23, 0.58);
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.45;
  font-weight: 520;
}

.review-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.review-stats div {
  min-width: 132px;
  padding: 15px 17px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 19, 23, 0.06);
  box-shadow: 0 18px 42px rgba(10, 14, 18, 0.06);
}

.review-stats strong {
  display: block;
  color: #101317;
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
}

.review-stats span {
  display: block;
  margin-top: 7px;
  color: rgba(16, 19, 23, 0.58);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reviews-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.chrome-store-review-cta {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 22px;
  border-radius: 15px;
  color: #050705;
  background: var(--lime);
  border: 1px solid rgba(5, 7, 5, 0.06);
  box-shadow:
    0 20px 42px rgba(108, 134, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.chrome-store-review-cta::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -44%;
  width: 36%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  animation: chromeCtaSheen 3.8s ease-in-out infinite;
}

@keyframes chromeCtaSheen {
  0%, 42% {
    left: -44%;
  }

  72%, 100% {
    left: 112%;
  }
}

.chrome-store-review-cta:hover,
.chrome-store-review-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 24px 50px rgba(108, 134, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.chrome-store-review-cta img {
  width: 28px;
  height: 28px;
  display: block;
}

.review-arrows {
  display: flex;
  gap: 12px;
}

.review-arrows button {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: rgba(16, 19, 23, 0.58);
  background: rgba(16, 19, 23, 0.06);
  font: inherit;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.review-arrows button:hover,
.review-arrows button:focus-visible {
  transform: translateY(-1px);
  color: #101317;
  background: rgba(199, 255, 0, 0.58);
}

.reviews-carousel {
  width: min(1540px, 100%);
  margin: 0 auto;
  opacity: var(--reviews-opacity);
  transform: translate3d(0, var(--reviews-card-rise), 0);
  transition: opacity 180ms linear, transform 180ms linear;
  will-change: opacity, transform;
}

.reviews-viewport {
  overflow: hidden;
  padding: 18px 6px 26px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.reviews-track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.review-card {
  flex: 0 0 calc((100% - 72px) / 4);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: #eef0ef;
  border: 1px solid rgba(16, 19, 23, 0.06);
  box-shadow:
    inset 0 0 0 4px rgba(16, 19, 23, 0.035),
    0 28px 76px rgba(10, 14, 18, 0.08);
  transform: translateY(0) scale(1);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms ease,
    border-color 360ms ease,
    background 360ms ease;
}

.review-card[aria-current="true"] {
  border-color: rgba(199, 255, 0, 0.56);
  background: linear-gradient(180deg, rgba(199, 255, 0, 0.16), #eef0ef);
  box-shadow:
    inset 0 0 0 4px rgba(199, 255, 0, 0.2),
    0 34px 92px rgba(73, 92, 0, 0.18);
  transform: translateY(-12px) scale(1.018);
}

.review-card-main {
  position: relative;
  flex: 1;
  padding: 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
}

.review-card-main::before {
  content: "“";
  position: absolute;
  right: 24px;
  bottom: -28px;
  color: rgba(16, 19, 23, 0.045);
  font-size: 150px;
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: none;
}

.review-card-top {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

.review-card h3 {
  margin: 0;
  color: #15191e;
  font-size: clamp(18px, 1.2vw, 24px);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: 0;
}

.review-stars {
  color: #111418;
  font-size: 18px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: 0 6px 18px rgba(199, 255, 0, 0.24);
}

.review-card-main p {
  margin: clamp(34px, 4vw, 62px) 0 0;
  color: rgba(16, 19, 23, 0.88);
  font-size: clamp(18px, 1.15vw, 24px);
  line-height: 1.36;
  font-weight: 580;
}

.review-author {
  min-height: 82px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 4px 14px;
  padding: 0 26px;
}

.review-author span,
.review-avatar-stack span {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: #101317;
  font-size: 12px;
  font-weight: 950;
}

.review-author strong {
  color: #15191e;
  font-size: 18px;
  font-weight: 820;
}

.review-author small {
  grid-column: 2;
  margin-top: -12px;
  color: rgba(16, 19, 23, 0.48);
  font-size: 12px;
  font-weight: 780;
}

.reviews-progress {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(16, 19, 23, 0.06);
  box-shadow: 0 16px 42px rgba(10, 14, 18, 0.07);
  opacity: var(--reviews-opacity);
  transform: translate3d(0, var(--reviews-progress-rise), 0);
  transition: opacity 180ms linear, transform 180ms linear;
}

.reviews-progress button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 19, 23, 0.18);
  cursor: pointer;
  transition: width 260ms ease, background 260ms ease;
}

.reviews-progress button.is-active {
  width: 34px;
  background: #101317;
}

.reviews-trust {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px auto 0;
  color: rgba(16, 19, 23, 0.82);
  font-size: 17px;
  font-weight: 740;
  opacity: var(--reviews-opacity);
  transform: translate3d(0, var(--reviews-trust-rise), 0);
  transition: opacity 180ms linear, transform 180ms linear;
}

.review-avatar-stack {
  display: flex;
}

.review-avatar-stack span {
  width: 34px;
  height: 34px;
  margin-left: -9px;
  border: 2px solid #f1f3f1;
  background: #101317;
}

.review-avatar-stack span:first-child {
  margin-left: 0;
  background: #2c6cff;
}

.review-avatar-stack span:nth-child(2) {
  background: #f40450;
}

.review-avatar-stack span:nth-child(3) {
  background: #101317;
}

.reviews-trust p {
  margin: 0;
}

@media (max-width: 900px) {
  .review-entry-transition {
    height: 130vh;
  }

  .review-entry-grid {
    inset: -26% -44%;
    background-size: 58px 58px, 58px 58px, auto;
  }

  .review-entry-rings span {
    width: min(72vw, 520px);
  }

  .review-entry-rings span:nth-child(2) {
    width: min(94vw, 680px);
  }

  .review-entry-rings span:nth-child(3) {
    width: 124vw;
  }
}

@media (max-width: 720px) {
  .review-entry-transition {
    height: 115vh;
  }

  .review-entry-sticky::after {
    height: 32vh;
  }

  .review-entry-card {
    width: min(90vw, 380px);
    min-height: 210px;
    gap: 18px;
    padding: 26px;
    border-radius: 26px;
    justify-items: center;
    text-align: center;
  }

  .review-entry-card div {
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  .review-entry-card span {
    font-size: 13px;
  }

  .review-entry-card small {
    font-size: 11px;
  }

  .review-entry-card strong {
    font-size: clamp(32px, 10vw, 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-entry-transition {
    height: 34vh;
  }

  .review-entry-sticky {
    position: relative;
    height: 34vh;
  }

  .review-entry-lightwash {
    opacity: 1;
    clip-path: circle(120% at 50% 54%);
  }

  .review-entry-rings,
  .review-entry-card,
  .review-entry-grid {
    display: none;
  }
}

@media (max-width: 1180px) {
  .reviews-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .reviews-actions {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .review-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 720px) {
  .reviews-showcase {
    padding: 104px 14px 76px;
  }

  .reviews-header {
    margin-bottom: 32px;
    gap: 24px;
  }

  .reviews-header h2 {
    font-size: clamp(34px, 9.4vw, 44px);
    line-height: 1.02;
  }

  .reviews-header p:not(.reviews-kicker) {
    margin-top: 16px;
    font-size: 15px;
  }

  .review-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 20px;
  }

  .review-stats div {
    min-width: 0;
    padding: 13px 15px;
  }

  .reviews-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .chrome-store-review-cta {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
  }

  .review-arrows {
    justify-content: center;
  }

  .review-arrows button {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }

  .reviews-track {
    gap: 14px;
  }

  .review-card {
    flex-basis: 100%;
    min-height: 330px;
    border-radius: 22px;
  }

  .review-card[aria-current="true"] {
    transform: translateY(-6px) scale(1.006);
  }

  .review-card-main {
    padding: 22px;
    border-radius: 20px;
  }

  .review-card-top {
    min-height: 54px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .review-stars {
    font-size: 15px;
  }

  .review-card-main p {
    margin-top: 28px;
    font-size: 17px;
  }

  .review-author {
    min-height: 74px;
    padding: 0 20px;
  }

  .reviews-progress {
    margin-top: 14px;
  }

  .reviews-trust {
    width: min(100%, 330px);
    justify-content: center;
    text-align: center;
    font-size: 14px;
  }
}

/* ── Site footer ──────────────────────────────────────────────────────────
   Was a full-bleed coloured band with min-height: clamp(600px, 54vw, 860px)
   and 900-weight uppercase links, which left most of the footer empty and gave
   every column a different weight and size. One black panel now, one type
   scale, and height driven by the content. ── */
.site-footer {
  color: #fff;
  background: #08090b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-lime {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.2vw, 46px);
  padding: clamp(44px, 4.4vw, 68px) clamp(22px, 4vw, 64px) clamp(26px, 2.4vw, 36px);
  background: none;
  min-height: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(28px, 3vw, 52px);
  align-items: start;
}

.footer-brandline p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-transform: none;
}

.footer-column {
  display: grid;
  gap: 11px;
  align-content: start;
}

.footer-column h2 {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-column a {
  width: fit-content;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  transition: color 160ms ease;
}

.footer-column a small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12.5px;
  font-weight: 500;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: #fff;
  opacity: 1;
  transform: none;
}

.footer-lime-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-top: clamp(22px, 2.2vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
}

.footer-lime-bottom p {
  margin: 0;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(18px, 2.2vw, 36px);
}

.footer-socials a {
  transition: opacity 160ms ease, transform 160ms ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  opacity: 0.62;
  transform: translateY(-2px);
}

.footer-black {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px clamp(22px, 4vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.44);
  font-size: 12.5px;
}

.footer-black p { margin: 0; }

.footer-black nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-black a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  transition: color 160ms ease;
}

.footer-black a:hover,
.footer-black a:focus-visible { color: #fff; }

@media (max-width: 1120px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px 42px;
  }

  .footer-brandline {
    grid-column: 1 / -1;
  }

  .footer-brandline p {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .footer-lime {
    min-height: 0;
    gap: 46px;
    padding: 34px 18px 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }

  .footer-brandline p {
    font-size: clamp(28px, 9.5vw, 42px);
    line-height: 1.08;
  }

  .footer-column {
    gap: 11px;
  }

  .footer-column h2 {
    font-size: 14px;
  }

  .footer-column a {
    font-size: 14px;
    line-height: 1.22;
  }

  .footer-lime-bottom,
  .footer-black {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-socials,
  .footer-black nav {
    justify-content: flex-start;
    gap: 14px 20px;
  }

  .footer-black {
    padding: 20px 18px 24px;
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-column a {
    width: 100%;
  }
}

.hack-page {
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(180deg, #050607 0%, #090b10 44%, #050607 100%);
}

.hack-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 124px);
  display: grid;
  align-items: center;
  padding: clamp(72px, 8vw, 132px) 24px clamp(68px, 7vw, 120px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hack-hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: saturate(1.08) contrast(1.08) brightness(0.78);
}

.hack-hero::before,
.hack-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hack-hero::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.92) 0%, rgba(5, 6, 7, 0.76) 45%, rgba(5, 6, 7, 0.46) 100%),
    radial-gradient(circle at 82% 40%, rgba(199, 255, 0, 0.18), transparent 28%);
}

.hack-hero::after {
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: 0.17;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.hack-hero-inner {
  width: min(860px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hack-hero-copy {
  max-width: 800px;
}

.hack-hero-copy .hack-eyebrow {
  margin-inline: auto;
}

.hack-eyebrow,
.hack-section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 22px;
  padding: 8px 15px 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(199, 255, 0, 0.26);
  background:
    linear-gradient(180deg, rgba(199, 255, 0, 0.10), rgba(199, 255, 0, 0.03));
  color: var(--lime);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hack-eyebrow::before,
.hack-section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px 1px rgba(199, 255, 0, 0.85);
}

.hack-hero-copy h1 {
  margin: 0 auto;
  max-width: 15ch;
  color: #fff;
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hack-hero-copy > p:not(.hack-eyebrow) {
  max-width: 600px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 600;
  line-height: 1.55;
}

.hack-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.hack-status-panel {
  position: relative;
  min-height: 490px;
  padding: 28px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(199, 255, 0, 0.18);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(12, 15, 18, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 42px 100px rgba(0, 0, 0, 0.42),
    0 0 70px rgba(199, 255, 0, 0.09);
  backdrop-filter: blur(16px);
}

.hack-status-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  pointer-events: none;
}

.hack-panel-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 900;
}

.hack-panel-top img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.32));
}

.hack-panel-meter {
  position: relative;
  z-index: 1;
  margin-top: 42px;
  padding: 24px;
  border-radius: 22px;
  color: #071006;
  background: var(--lime);
  box-shadow: 0 22px 52px rgba(199, 255, 0, 0.18);
}

.hack-panel-meter span,
.hack-panel-meter strong {
  display: block;
}

.hack-panel-meter span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
}

.hack-panel-meter strong {
  margin-top: 8px;
  font-size: clamp(34px, 3vw, 52px);
  line-height: 0.95;
  font-weight: 950;
}

.hack-panel-lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: 34px 0;
}

.hack-panel-lines span {
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(199, 255, 0, 0.7), rgba(255, 255, 255, 0.16));
}

.hack-panel-lines span:nth-child(2) {
  width: 78%;
}

.hack-panel-lines span:nth-child(3) {
  width: 58%;
}

.hack-status-panel ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hack-status-panel li {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.055);
  font-weight: 780;
}

.hack-intro,
.hack-feature-section,
.hack-process,
.hack-comparison {
  padding: clamp(82px, 8vw, 132px) 24px;
}

.hack-intro {
  background:
    radial-gradient(circle at 12% 0%, rgba(199, 255, 0, 0.1), transparent 28%),
    #07090a;
}

.hack-intro-grid,
.hack-feature-section,
.hack-process,
.hack-comparison {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.hack-intro-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: start;
}

.hack-intro h2,
.hack-heading-block h2,
.hack-process h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 950;
  text-wrap: balance;
}

.hack-intro-copy {
  display: grid;
  gap: 22px;
}

.hack-intro-copy p,
.hack-heading-block p:not(.hack-eyebrow),
.hack-process-copy > p:not(.hack-eyebrow),
.hack-steps p,
.hack-feature-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.6;
}

.hack-feature-section {
  padding-top: clamp(88px, 8vw, 142px);
  padding-bottom: clamp(92px, 8vw, 150px);
}

.hack-heading-block {
  max-width: 790px;
  margin-bottom: clamp(34px, 4vw, 62px);
}

.hack-heading-block p:not(.hack-eyebrow) {
  max-width: 690px;
  margin-top: 20px;
}

.hack-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hack-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 284px;
  padding: 30px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(125% 90% at 100% 0%, rgba(199, 255, 0, 0.06), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
    #0d1014;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.hack-feature-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199, 255, 0, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hack-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(199, 255, 0, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 32px 80px rgba(0, 0, 0, 0.46),
    0 0 54px rgba(199, 255, 0, 0.11);
}

.hack-feature-card:hover::before {
  opacity: 1;
}

.hack-feature-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: auto;
  border-radius: 14px;
  color: #0a1200;
  background: linear-gradient(150deg, #ff3d70, var(--lime));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 26px rgba(199, 255, 0, 0.26);
  font-size: 16px;
  font-weight: 950;
}

.hack-feature-card h3 {
  padding-top: 30px;
}

.hack-feature-card h3,
.hack-steps h3,
.hack-compare-card h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(20px, 1.5vw, 26px);
  line-height: 1.1;
  font-weight: 930;
}

.hack-feature-card p {
  font-size: clamp(15px, 1.05vw, 17px);
}

.hack-process {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 86px);
  align-items: start;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(199, 255, 0, 0.1), rgba(244, 4, 80, 0.08)),
    #0c0f14;
}

.hack-process-copy {
  position: sticky;
  top: 142px;
}

.hack-steps {
  display: grid;
  gap: 18px;
}

.hack-steps article {
  position: relative;
  padding: clamp(26px, 2.4vw, 34px) clamp(26px, 2.4vw, 34px) clamp(26px, 2.4vw, 34px) clamp(36px, 3vw, 50px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.35s ease,
    background 0.35s ease;
}

.hack-steps article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--lime), rgba(199, 255, 0, 0.08));
}

.hack-steps article:hover {
  transform: translateX(5px);
  border-color: rgba(199, 255, 0, 0.28);
  background:
    linear-gradient(180deg, rgba(199, 255, 0, 0.05), rgba(255, 255, 255, 0.018));
}

.hack-steps span {
  display: block;
  margin-bottom: 14px;
  color: var(--lime);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hack-comparison {
  width: 100%;
  max-width: none;
  color: #fff;
  background:
    radial-gradient(circle at 14% 0%, rgba(199, 255, 0, 0.1), transparent 30%),
    radial-gradient(circle at 86% 100%, rgba(244, 4, 80, 0.1), transparent 32%),
    linear-gradient(180deg, #07090a 0%, #0a0d11 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hack-comparison .hack-heading-block {
  width: min(1180px, 100%);
  margin: 0 auto clamp(40px, 4.5vw, 66px);
  text-align: center;
}

.hack-comparison .hack-eyebrow {
  margin-inline: auto;
}

.hack-comparison h2 {
  max-width: 820px;
  margin-inline: auto;
  color: #fff;
}

.hack-comparison-grid {
  width: min(1060px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.hack-compare-card {
  position: relative;
  min-height: 380px;
  padding: clamp(30px, 3vw, 46px);
  border-radius: 26px;
  overflow: hidden;
}

.hack-compare-card.muted {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    #0c0f12;
  color: rgba(255, 255, 255, 0.6);
}

.hack-compare-card.muted h3 {
  color: rgba(255, 255, 255, 0.82);
}

.hack-compare-card.featured {
  color: #fff;
  border: 1px solid rgba(199, 255, 0, 0.34);
  background:
    radial-gradient(125% 80% at 100% 0%, rgba(199, 255, 0, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
    #0b0f0a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(199, 255, 0, 0.1);
}

.hack-compare-card.featured::after {
  content: "Recommended";
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(150deg, #ff3d70, var(--lime));
  color: #0a1200;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(199, 255, 0, 0.28);
}

.hack-compare-card ul {
  display: grid;
  gap: 15px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hack-compare-card li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-left: 0;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
  line-height: 1.4;
}

.hack-compare-card li::before {
  content: "";
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  margin-top: 0.04em;
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px;
}

.hack-compare-card.muted li::before {
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808890' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.hack-compare-card.featured li::before {
  background-color: rgba(199, 255, 0, 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f40450' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.hack-compare-card.featured a {
  min-height: 50px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 0 26px;
  border-radius: 12px;
  color: #0a1200;
  background: linear-gradient(150deg, #ff3d70, var(--lime));
  font-weight: 950;
  box-shadow: 0 16px 40px rgba(199, 255, 0, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hack-compare-card.featured a:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(199, 255, 0, 0.32);
}

.hack-faq {
  margin-top: 90px;
}

@media (max-width: 1040px) {
  .hack-hero-inner,
  .hack-intro-grid,
  .hack-process {
    grid-template-columns: 1fr;
  }

  .hack-status-panel {
    width: min(100%, 620px);
    min-height: 0;
  }

  .hack-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hack-process-copy {
    position: static;
  }
}

@media (max-width: 720px) {
  .hack-hero {
    min-height: auto;
    padding: 58px 16px 70px;
  }

  .hack-hero::before {
    background:
      linear-gradient(180deg, rgba(5, 6, 7, 0.92) 0%, rgba(5, 6, 7, 0.72) 100%),
      radial-gradient(circle at 50% 18%, rgba(199, 255, 0, 0.16), transparent 34%);
  }

  .hack-hero-copy {
    text-align: center;
  }

  .hack-eyebrow {
    margin-inline: auto;
  }

  .hack-hero-copy h1 {
    font-size: clamp(38px, 11.5vw, 58px);
  }

  .hack-hero-copy > p:not(.hack-eyebrow) {
    max-width: 32ch;
    margin-inline: auto;
    font-size: 17px;
  }

  .hack-hero-actions {
    justify-content: center;
  }

  .hack-status-panel {
    padding: 20px;
    border-radius: 22px;
  }

  .hack-panel-top img {
    width: 52px;
    height: 52px;
  }

  .hack-panel-meter {
    margin-top: 26px;
  }

  .hack-intro,
  .hack-feature-section,
  .hack-process,
  .hack-comparison {
    padding: 66px 16px;
  }

  .hack-section-label {
    margin-inline: auto;
  }

  .hack-intro-grid,
  .hack-heading-block,
  .hack-process-copy {
    text-align: center;
  }

  .hack-intro h2,
  .hack-heading-block h2,
  .hack-process h2 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .hack-intro-copy p,
  .hack-heading-block p,
  .hack-process-copy > p:not(.hack-eyebrow) {
    font-size: 16px;
  }

  .hack-feature-grid,
  .hack-comparison-grid {
    grid-template-columns: 1fr;
  }

  .hack-feature-card {
    min-height: 0;
    padding: 22px;
  }

  .hack-feature-card span {
    margin-bottom: 28px;
  }

  .hack-process {
    border-radius: 0;
    margin-inline: -16px;
    width: calc(100% + 32px);
  }

  .hack-compare-card {
    min-height: 0;
    border-radius: 18px;
  }
}

.pricing-page {
  min-height: calc(100vh - 124px);
  padding: 20px 18px 64px;
  background:
    radial-gradient(circle at 80% 4%, rgba(244, 4, 80, 0.1), transparent 24%),
    linear-gradient(180deg, #111315 0%, #07090b 34%, #030407 100%);
}

.pricing-promo {
  position: relative;
  isolation: isolate;
  width: calc(100% - 48px);
  max-width: 1336px;
  min-height: 220px;
  margin: 20px auto 22px;
  padding: clamp(26px, 3vw, 44px) clamp(28px, 3.4vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  overflow: hidden;
  /* Gradient border via padding-box / border-box trick — a soft pink rim
     that's strongest at the top-left and fades into transparency. */
  border: 2px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(244, 4, 80, 0.05) 0%, rgba(244, 4, 80, 0.18) 100%) padding-box,
    linear-gradient(135deg, rgba(244, 4, 80, 0.55) 0%, rgba(244, 4, 80, 0.12) 55%, rgba(255, 255, 255, 0.05) 100%) border-box;
  box-shadow:
    inset 0 0 64px 0 rgba(244, 4, 80, 0.32),
    0 8px 24px 0 rgba(0, 0, 0, 0.12);
}

.pricing-promo::before {
  /* Subtle radial bloom in the lower-left so the banner has depth without
     fighting the gradient border. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 14% 96%, rgba(244, 4, 80, 0.18), transparent 38%);
  pointer-events: none;
  z-index: 0;
}

.pricing-promo-copy {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(820px, 100%);
}

/* Decorative organic blob was removed — the MemGenie genie art is the
   only right-side graphic. Hide any blob nodes still present in old
   cached HTML so nothing leaks through. */
.pricing-promo-blob { display: none !important; }

.sale-badge,
.popular-ribbon,
.discount-chip,
.new-chip {
  background: var(--pink);
  color: #fff;
  font-weight: 950;
  line-height: 1;
}

.sale-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(18px, 1.55vw, 26px);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: clamp(13px, 1vw, 17px);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 26px rgba(244, 4, 80, 0.3);
}

.mini-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mini-tag svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pricing-promo h1,
.pricing-promo h2,
.plans-heading h2,
.plan-card h3 {
  text-transform: uppercase;
}

.pricing-promo h1 {
  margin: 0;
  color: var(--pink);
  font-size: clamp(26px, 2.3vw, 42px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: normal;
}

.pricing-promo h2 {
  margin: clamp(4px, 0.4vw, 8px) 0 0;
  color: #fff;
  font-size: clamp(26px, 2.3vw, 42px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.pricing-promo p {
  margin: clamp(12px, 1vw, 18px) 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.35;
  font-weight: 500;
}

/* Genie art on the right of the promo.
   `mix-blend-mode: screen` drops the PNG's black backdrop so only the
   neon-stroke genie shows over the gradient panel. */
.pricing-promo .pricing-genie-art {
  display: block;
  position: absolute;
  right: clamp(-12px, 1.5vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: clamp(150px, 82%, 240px);
  opacity: 0.95;
  object-fit: contain;
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

/* Refined home promo banner — cleaner hierarchy and a softer panel.
   Scoped to .home-pricing-promo so the pricing page promo is untouched. */
.pricing-promo.home-pricing-promo {
  gap: clamp(24px, 4vw, 64px);
  background:
    linear-gradient(115deg, rgba(244, 4, 80, 0.18) 0%, rgba(244, 4, 80, 0.06) 44%, rgba(244, 4, 80, 0) 72%) padding-box,
    linear-gradient(130deg, rgba(244, 4, 80, 0.62) 0%, rgba(244, 4, 80, 0.16) 42%, rgba(255, 255, 255, 0.06) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 20px 54px rgba(244, 4, 80, 0.14);
}

.pricing-promo.home-pricing-promo .sale-badge {
  margin-bottom: clamp(16px, 1.4vw, 22px);
  padding: 7px 15px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ff6c95;
  background: rgba(244, 4, 80, 0.12);
  border: 1px solid rgba(244, 4, 80, 0.4);
  box-shadow: none;
}

.pricing-promo.home-pricing-promo h1 {
  color: #fff;
  font-size: clamp(27px, 2.55vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pricing-promo.home-pricing-promo h1 .promo-accent {
  color: var(--pink);
}

.pricing-promo.home-pricing-promo h2 {
  margin-top: clamp(8px, 0.7vw, 12px);
  text-transform: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 600;
  letter-spacing: 0;
}

/* On mobile / tablet, tuck the genie behind the right side of the copy
   at lower opacity so it decorates without crowding the headline. */
@media (max-width: 900px) {
  .pricing-promo .pricing-genie-art {
    right: -28px;
    height: 64%;
    max-height: 220px;
    opacity: 0.5;
  }
  .pricing-promo-copy {
    position: relative;
    z-index: 2;
  }
}

.plan-section {
  width: calc(100% - 60px);
  max-width: 1336px;
  margin: 0 auto;
  padding: 24px 30px 22px;
  border: 1px solid rgba(81, 54, 130, 0.5);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(61, 27, 96, 0.48), transparent 33%),
    radial-gradient(circle at 88% 22%, rgba(244, 4, 80, 0.08), transparent 24%),
    linear-gradient(180deg, #080a12 0%, #060710 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 22px 70px rgba(0, 0, 0, 0.18);
}

.plans-heading {
  text-align: center;
  margin-bottom: 20px;
}

.plans-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 2.9vw, 46px);
  line-height: 1.08;
  font-weight: 950;
}

.plans-heading span {
  color: var(--pink);
}

.plans-heading p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(15px, 1.16vw, 18px);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: 26px;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 486px;
  padding: 24px 20px 16px;
  border-radius: 14px;
  border: 1px solid rgba(91, 76, 142, 0.68);
  background:
    radial-gradient(circle at 50% 104%, rgba(52, 78, 100, 0.26), transparent 47%),
    linear-gradient(180deg, rgba(18, 21, 30, 0.98) 0%, rgba(12, 14, 23, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 44px rgba(0, 0, 0, 0.22);
}

.plan-card.popular {
  padding-top: 64px;
  border-color: var(--pink);
  box-shadow:
    0 0 0 1px rgba(244, 4, 80, 0.12),
    0 18px 66px rgba(244, 4, 80, 0.24);
}

.popular-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px 13px 0 0;
  font-size: 13px;
  text-transform: uppercase;
}

.plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  margin-bottom: 16px;
}

.plan-card h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1;
  font-weight: 920;
}

.plan-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(13px, 0.98vw, 15px);
  line-height: 1.38;
}

.discount-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  vertical-align: middle;
  font-size: 12px;
  font-style: italic;
}

.price {
  min-width: 92px;
  text-align: right;
}

.price strong {
  display: block;
  color: #fff;
  font-size: clamp(29px, 2.35vw, 36px);
  line-height: 0.95;
  font-weight: 820;
}

.price span,
.price s {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.price s {
  margin-top: 2px;
  font-size: 17px;
}

.included-box {
  flex: 1;
  min-height: 314px;
  padding: 16px 18px 15px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 255, 255, 0.04), transparent 40%),
    linear-gradient(145deg, rgba(35, 39, 49, 0.94), rgba(24, 28, 37, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.included-box h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 840;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  min-height: 19px;
  padding-left: 30px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.22;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-radius: 0;
}

.feature-list li::after {
  content: none;
}

.feature-list .is-included {
  color: rgba(255, 255, 255, 0.82);
}

.feature-list .is-included::before {
  background-image: url('assets/icon-check.png');
}

.feature-list .is-included::after {
  content: none;
}

.feature-list .is-excluded {
  color: rgba(255, 255, 255, 0.5);
}

.feature-list .is-excluded::before {
  background-image: url('assets/icon-x.png');
}

.feature-list .is-excluded::after {
  content: none;
}

.feature-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 19px 0 17px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}

.feature-divider::before,
.feature-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.feature-divider span {
  white-space: nowrap;
}

.new-chip {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10px;
  font-style: italic;
  vertical-align: middle;
}

.plan-cta {
  min-height: 46px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 900;
  transition: transform 160ms ease, filter 160ms ease;
}

.plan-cta:hover,
.plan-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.plan-cta.starter {
  color: #151515;
  background: #fff;
}

.plan-cta.plus {
  color: #050705;
  background: linear-gradient(90deg, #ff2e66, #f40450);
}

.plan-cta.ultra {
  color: #fff;
  background: var(--pink);
}

.plan-note {
  min-height: 20px;
  margin: 10px 0 0;
  text-align: center;
}

.plan-note strong {
  color: #eaff00;
}

.faq-section {
  max-width: 760px;
  margin: clamp(72px, 6.5vw, 112px) auto 0;
  padding: 0 16px clamp(60px, 5.5vw, 92px);
}

.faq-section h2 {
  margin: 0 0 34px;
  color: #fff;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1.1;
  font-weight: 880;
  text-align: center;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.faq-item[open] {
  border-color: rgba(244, 4, 80, 0.22);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 40px rgba(0, 0, 0, 0.16);
}

.faq-item summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(17px, 1.28vw, 22px);
  font-weight: 780;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  transition: color 220ms ease, padding-left 220ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid rgba(255, 255, 255, 0.48);
  border-bottom: 2px solid rgba(255, 255, 255, 0.48);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms ease, border-color 220ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
  border-color: var(--pink);
}

.faq-item[open] summary {
  color: #fff;
  padding-left: 28px;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 260ms ease, opacity 220ms ease, transform 260ms ease;
}

.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.faq-answer p {
  overflow: hidden;
  margin: -4px 24px 22px;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
}

.faq-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 42px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 800;
}

.faq-cta a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border-radius: 10px;
  color: #071009;
  background: var(--lime);
  font-weight: 900;
}

/* Compact desktop: shrink the header so the full nav + 4 buttons fit on one
   row without overlap, all the way down to the hamburger breakpoint. */
@media (min-width: 1201px) and (max-width: 1600px) {
  .site-header {
    gap: clamp(10px, 1vw, 18px);
    min-height: 96px;
    padding: 18px clamp(18px, 1.8vw, 28px);
  }

  .brand-logo {
    width: clamp(176px, 13vw, 210px);
  }

  .main-nav {
    gap: clamp(10px, 0.9vw, 18px);
    font-size: clamp(13.5px, 0.92vw, 15.5px);
  }

  .header-actions {
    gap: 8px;
  }

  .pricing-button,
  .login-button,
  .signup-button,
  .support-button {
    min-height: 46px;
    font-size: 14px;
    border-radius: 12px;
  }

  .support-button {
    min-width: 0;
    padding: 0 13px;
    gap: 7px;
  }

  .support-button svg {
    width: 17px;
    height: 17px;
  }

  .pricing-button {
    min-width: 0;
    padding: 0 13px;
    gap: 7px;
  }

  .pricing-button strong {
    left: 13px;
    min-width: 70px;
    min-height: 21px;
    font-size: 11.5px;
  }

  .tag-icon svg {
    width: 19px;
    height: 19px;
  }

  .login-button {
    min-width: 0;
    padding: 0 14px;
  }

  .signup-button {
    min-width: 0;
    padding: 0 16px;
  }
}

@media (max-width: 1340px) {
  .hero {
    min-height: calc(100vh - 112px);
    padding-top: 42px;
    padding-bottom: 56px;
  }

  .hero h1 {
    font-size: clamp(39px, 3.7vw, 53px);
    line-height: 1.08;
  }

  .hero p {
    margin-top: 20px;
    font-size: clamp(18px, 1.32vw, 21px);
    line-height: 1.45;
  }

  .hero-buttons {
    margin-top: 30px;
    gap: 18px;
  }

  .video-carousel {
    min-height: 0;
    aspect-ratio: 1.08;
  }

  .video-frame strong {
    font-size: clamp(30px, 3vw, 44px);
  }

  .pricing-page {
    min-height: calc(100vh - 112px);
    padding-top: 8px;
  }

  .pricing-promo {
    min-height: 230px;
    padding-block: 28px;
  }

  .pricing-promo h1 {
    font-size: clamp(30px, 3vw, 40px);
  }

  .pricing-promo h2 {
    font-size: clamp(26px, 2.7vw, 36px);
  }

  .plan-section {
    padding: 18px 28px 20px;
  }

  .pricing-cards {
    gap: 24px;
  }

  .plan-card {
    min-height: 486px;
  }

  .feature-list li {
    font-size: 13px;
  }
}

@media (max-width: 1080px) {
  .site-header {
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 18px 22px 22px;
  }

  .main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding: 8px 2px 0;
    scrollbar-width: thin;
  }

  .header-actions {
    margin-left: auto;
  }

  .hero {
    min-height: auto;
    padding-top: 78px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-copy {
    max-width: 820px;
  }

  .video-carousel {
    width: min(100%, 760px);
    min-height: 460px;
    aspect-ratio: 16 / 10.5;
    margin: 0;
  }

  .pricing-promo {
    align-items: flex-start;
  }

  .pricing-promo-copy {
    max-width: 680px;
  }

  .pricing-promo h1 {
    white-space: normal;
  }

  .pricing-genie-art {
    right: 10px;
    width: 260px;
    height: auto;
    opacity: 0.55;
  }

  .plan-section {
    padding: 24px;
  }

  .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-card {
    min-height: auto;
  }
}

@media (min-width: 721px) and (max-width: 1200px) {
  .site-header {
    position: sticky;
    top: 0;
    min-height: 94px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 17px 26px;
  }

  /* In hamburger mode, all nav items show vertically — bring extra-link back */
  .main-nav .nav-extra-link {
    display: inline-flex;
  }

  .chrome-link span {
    display: inline;
  }

  .brand {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .brand-logo {
    width: min(252px, 44vw);
  }

  .menu-toggle {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 15px;
    border: 1px solid rgba(199, 255, 0, 0.18);
    color: #f5f5f5;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(18, 20, 24, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 14px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  }

  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(199, 255, 0, 0.36);
    background:
      linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(18, 20, 24, 0.96);
  }

  .menu-toggle span {
    width: 24px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 230ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  }

  .site-header.is-menu-open .menu-toggle span:first-child {
    transform: translateY(8px) rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.45);
  }

  .site-header.is-menu-open .menu-toggle span:last-child {
    transform: translateY(-8px) rotate(-45deg);
  }

  .site-menu {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    gap: 16px;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      max-height 340ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 210ms ease,
      padding-top 260ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-header.is-menu-open .site-menu {
    max-height: 460px;
    opacity: 1;
    padding-top: 17px;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-menu .main-nav {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
    gap: 10px;
    justify-content: stretch;
    padding: 0;
    overflow: visible;
    white-space: normal;
    font-size: 15px;
  }

  /* Boxed, full-width links belong to the OPEN dropdown only. The consolidated
     header keeps the nav inline at these widths, and without the is-menu-open
     guard every plain link wore a grey box. */
  .site-header.is-menu-open .site-menu .main-nav a {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 0 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    line-height: 1.1;
  }

  .site-header.is-menu-open .site-menu .main-nav .active {
    color: var(--lime);
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.15);
  }

  .nav-divider {
    display: none;
  }

  .site-menu .main-nav .chrome-link {
    grid-column: 1 / -1;
    justify-self: stretch;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78);
  }

  .site-menu .chrome-link img {
    width: 26px;
    height: 26px;
  }

  .site-menu .header-actions {
    order: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-self: start;
    justify-content: stretch;
    align-items: stretch;
    margin-left: 0;
    padding: 0;
  }

  .site-menu .pricing-button,
  .site-menu .login-button,
  .site-menu .signup-button,
  .site-menu .support-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    border-radius: 14px;
    font-size: 16px;
  }

  .site-menu .support-button {
    gap: 10px;
    padding: 0 14px;
  }

  .site-menu .support-button svg {
    width: 20px;
    height: 20px;
  }

  .site-menu .pricing-button {
    gap: 9px;
    padding: 0 14px;
  }

  .site-menu .pricing-button strong {
    position: static;
    min-width: 84px;
    min-height: 25px;
    margin-left: 4px;
    padding: 0 9px;
    transform: none;
    border-radius: 7px;
    font-size: 12px;
  }

  .hero {
    min-height: auto;
    padding: 64px 42px 80px;
  }

  .hero-content {
    width: min(980px, 100%);
    grid-template-columns: 1fr;
    gap: 76px;
  }

  .hero-copy {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
  }

  .hero h1 {
    max-width: 900px;
    margin-inline: auto;
    font-size: clamp(46px, 5.25vw, 66px);
    line-height: 1.07;
    text-wrap: balance;
  }

  .hero p {
    max-width: 830px;
    margin: 22px auto 0;
    font-size: clamp(19px, 2.18vw, 25px);
    line-height: 1.48;
  }

  .hero-buttons {
    position: relative;
    z-index: 4;
    justify-content: center;
    margin-top: 32px;
  }

  .hero-media {
    width: 100%;
    justify-self: center;
  }

  .video-carousel {
    width: min(720px, 90vw);
    min-height: clamp(460px, 58vw, 620px);
    aspect-ratio: 1.02;
    margin: 0 auto;
  }

  .video-slot {
    width: min(58%, 410px);
  }

  .video-slot.is-left {
    transform: translate3d(-42%, 4%, -170px) rotateY(13deg) scale(0.65);
  }

  .video-slot.is-right {
    transform: translate3d(42%, 4%, -170px) rotateY(-13deg) scale(0.65);
  }

  .pricing-page {
    min-height: auto;
    padding-top: 14px;
  }

  .pricing-promo,
  .plan-section {
    width: calc(100% - 44px);
  }
}

@media (max-width: 720px) {
  .entry-mark {
    width: clamp(84px, 24.75vw, 130px);
  }

  .site-header {
    align-items: flex-start;
    min-height: 0;
    padding: 16px;
  }

  .brand-logo {
    width: min(236px, 62vw);
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pricing-button,
  .login-button,
  .signup-button,
  .support-button {
    min-height: 48px;
    border-radius: 14px;
    font-size: 16px;
  }

  .support-button {
    flex: 1 1 100%;
    min-width: 0;
  }

  .pricing-button strong {
    left: 18px;
    bottom: -14px;
    min-height: 24px;
    font-size: 12px;
  }

  .main-nav {
    gap: 18px;
    font-size: 16px;
  }

  /* In stacked mobile layout, restore the secondary nav links */
  .main-nav .nav-extra-link {
    display: inline-flex;
  }

  .chrome-link {
    gap: 10px;
  }

  .chrome-link span {
    display: inline;
  }

  .nav-divider {
    height: 28px;
  }

  .chrome-link img {
    width: 28px;
    height: 28px;
  }

  .hero {
    min-height: auto;
    padding: 64px 18px 78px;
  }

  .hero-content {
    gap: 34px;
  }

  .hero h1 {
    font-size: clamp(36px, 11.05vw, 49px);
    line-height: 1.12;
  }

  .hero p {
    margin-top: 20px;
    font-size: 19px;
  }

  .hero-buttons {
    gap: 14px;
    margin-top: 28px;
  }

  .primary-cta,
  .secondary-cta {
    width: min(100%, 310px);
    min-height: 56px;
  }

  .video-carousel {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1.2;
    overflow: visible;
  }

  .video-slot {
    width: min(74%, 340px);
    border-radius: 26px;
  }

  .video-slot.is-left {
    transform: translate3d(-46%, 4%, -150px) rotateY(13deg) scale(0.7);
  }

  .video-slot.is-right {
    transform: translate3d(46%, 4%, -150px) rotateY(-13deg) scale(0.7);
  }

  .video-frame {
    padding: 24px 18px;
  }

  .video-frame::before {
    inset: 16px;
    border-radius: 18px;
  }

  .video-kicker {
    font-size: 12px;
  }

  .video-frame strong {
    font-size: clamp(27px, 8.4vw, 34px);
  }

  .video-caption {
    font-size: 14px;
  }

  .video-sound-button {
    right: 18px;
    bottom: 18px;
    min-height: 40px;
    padding: 0 13px;
    font-size: 13px;
  }

  .home-offer-section {
    padding: 18px 8px 18px;
  }

  .promo-plan-button {
    min-height: 46px;
    margin-top: 16px;
    padding-inline: 17px;
    border-radius: 10px;
    font-size: 15px;
  }

  .memgenie-update {
    min-height: 430px;
    padding: 72px 18px;
  }

  .update-lockup {
    gap: 14px;
  }

  .update-alert {
    font-size: 17px;
  }

  .warning-mark {
    width: 17px;
    height: 15px;
  }

  .warning-mark::after {
    top: 2px;
    font-size: 10px;
  }

  .update-title-shell {
    min-height: 112px;
    padding-inline: 22px;
  }

  .update-title-shell h2 {
    max-width: 330px;
    font-size: clamp(35px, 10vw, 46px);
    line-height: 1.08;
  }

  .update-corner.top-left,
  .update-corner.bottom-left {
    left: -8px;
  }

  .update-corner.top-right,
  .update-corner.bottom-right {
    right: -8px;
  }

  .chrome-store-feature {
    min-height: 650px;
    padding: 62px 18px 54px;
  }

  .availability-pill {
    min-height: 34px;
    margin-bottom: 22px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 16px;
  }

  .chrome-store-copy h2 {
    font-size: clamp(34px, 8.5vw, 46px);
    line-height: 1.06;
  }

  .chrome-store-copy h2 span {
    display: inline;
  }

  .chrome-store-copy p {
    max-width: 340px;
    margin-top: 22px;
    font-size: 17px;
  }

  .chrome-store-actions {
    gap: 14px;
    margin-top: 34px;
  }

  .chrome-store-cta {
    min-height: 58px;
    padding: 0 24px;
    border-radius: 14px;
    font-size: 19px;
  }

  .download-icon svg {
    width: 22px;
    height: 22px;
  }

  .chrome-store-icon {
    width: 50px;
    height: 50px;
  }

  .chrome-store-icon img {
    width: 32px;
    height: 32px;
  }

  .workflow-showcase {
    padding: 72px 18px 82px;
  }

  .workflow-inner h2 {
    margin-bottom: 60px;
    font-size: clamp(31px, 8.6vw, 42px);
    line-height: 1.1;
  }

  .workflow-row,
  .workflow-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 70px;
  }

  .workflow-row.is-reversed .workflow-copy,
  .workflow-row.is-reversed .workflow-media {
    order: initial;
  }

  .workflow-copy {
    justify-self: start;
    max-width: 100%;
  }

  .workflow-copy h3 {
    margin-bottom: 14px;
    font-size: clamp(27px, 7.6vw, 36px);
  }

  .workflow-copy p {
    font-size: 17px;
    line-height: 1.45;
  }

  .workflow-media {
    min-height: 300px;
    border-radius: 22px;
  }

  .workflow-video-card,
  .workflow-video-card.image-grid {
    width: min(88%, 390px);
    min-height: 280px;
    border-radius: 24px;
  }

  .workflow-video-card.image-grid {
    padding: 16px;
  }

  .workflow-video-screen {
    height: 130px;
    margin-inline: 18px;
  }

  .workflow-tools {
    gap: 8px;
    margin: 20px 16px 0;
  }

  .workflow-tools span,
  .workflow-grid-top span,
  .workflow-grid-top strong {
    min-height: 34px;
    padding: 0 11px;
    font-size: 12px;
  }

  .workflow-prompt {
    min-height: 66px;
    margin: 20px 16px 0;
    border-radius: 18px;
    font-size: 14px;
  }

  .workflow-prompt strong {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .workflow-grid-top {
    margin-bottom: 16px;
  }

  .workflow-image-grid {
    gap: 12px;
  }

  .workflow-image-grid span {
    min-height: 95px;
    border-radius: 14px;
  }

  .workflow-timeline {
    margin: 22px 16px 0;
  }

  .pricing-page {
    padding: 12px 8px 42px;
  }

  .pricing-promo {
    aspect-ratio: auto;
    width: 100%;
    min-height: 0;
    margin-top: 0;
    padding: 24px 20px 120px;
    border-radius: 20px;
  }

  .pricing-promo.home-pricing-promo {
    min-height: 0;
  }

  .pricing-promo-copy {
    width: 100%;
    max-width: 100%;
  }

  .sale-badge {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .pricing-promo h1 {
    font-size: clamp(27px, 8.7vw, 38px);
  }

  .pricing-promo h2 {
    margin-top: 14px;
    font-size: clamp(24px, 8vw, 34px);
  }

  .pricing-promo p {
    margin-top: 18px;
    font-size: 17px;
  }

  .pricing-genie-art {
    right: -26px;
    bottom: -18px;
    top: auto;
    width: 220px;
    height: auto;
  }

  .plan-section {
    width: 100%;
    padding: 22px 14px 16px;
    border-radius: 16px;
  }

  .plans-heading h2 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .plan-card {
    padding: 22px 16px 16px;
  }

  .plan-card.popular {
    padding-top: 72px;
  }

  .plan-top {
    gap: 12px;
  }

  .included-box {
    padding: 16px 14px;
  }

  .feature-list li {
    padding-left: 28px;
  }
}

@media (max-width: 440px) {
  .main-nav {
    font-size: 15px;
  }

  .hero h1 {
    font-size: clamp(31px, 10.2vw, 39px);
  }

  .hero p {
    font-size: 17px;
  }

  .video-carousel {
    min-height: 330px;
  }

  .video-slot {
    width: min(68%, 230px);
  }

  .video-frame strong {
    font-size: clamp(25px, 8vw, 31px);
  }

  .chrome-store-feature {
    min-height: 620px;
    padding-inline: 12px;
  }

  .chrome-store-copy h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  .chrome-store-copy h2 span {
    display: inline;
  }

  .chrome-store-copy p {
    font-size: 16px;
  }

  .chrome-store-cta {
    width: min(100%, 236px);
  }

  .workflow-showcase {
    padding: 72px 18px 82px;
  }

  .workflow-inner h2 {
    margin-bottom: 60px;
    font-size: clamp(31px, 8.6vw, 42px);
    line-height: 1.1;
  }

  .workflow-row,
  .workflow-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 70px;
  }

  .workflow-row.is-reversed .workflow-copy,
  .workflow-row.is-reversed .workflow-media {
    order: initial;
  }

  .workflow-copy {
    justify-self: start;
    max-width: 100%;
  }

  .workflow-copy h3 {
    margin-bottom: 14px;
    font-size: clamp(27px, 7.6vw, 36px);
  }

  .workflow-copy p {
    font-size: 17px;
    line-height: 1.45;
  }

  .workflow-media {
    min-height: 300px;
    border-radius: 22px;
  }

  .workflow-video-card,
  .workflow-video-card.image-grid {
    width: min(88%, 390px);
    min-height: 280px;
    border-radius: 24px;
  }

  .workflow-video-card.image-grid {
    padding: 16px;
  }

  .workflow-video-screen {
    height: 130px;
    margin-inline: 18px;
  }

  .workflow-tools {
    gap: 8px;
    margin: 20px 16px 0;
  }

  .workflow-tools span,
  .workflow-grid-top span,
  .workflow-grid-top strong {
    min-height: 34px;
    padding: 0 11px;
    font-size: 12px;
  }

  .workflow-prompt {
    min-height: 66px;
    margin: 20px 16px 0;
    border-radius: 18px;
    font-size: 14px;
  }

  .workflow-prompt strong {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .workflow-grid-top {
    margin-bottom: 16px;
  }

  .workflow-image-grid {
    gap: 12px;
  }

  .workflow-image-grid span {
    min-height: 95px;
    border-radius: 14px;
  }

  .workflow-timeline {
    margin: 22px 16px 0;
  }
}

@media (max-width: 720px) {
  body {
    /* clip (not hidden) so horizontal overflow is contained WITHOUT turning
       body into a scroll container — that would break position: sticky
       (e.g. the review-entry transition). */
    overflow-x: clip;
  }

  .site-header {
    justify-content: center;
    align-items: center;
    gap: 13px;
    padding: 14px 14px 18px;
  }

  .brand {
    width: 100%;
    justify-content: center;
  }

  .brand-logo {
    width: min(226px, 74vw);
  }

  .header-actions {
    order: 2;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    padding-bottom: 12px;
  }

  .pricing-button,
  .login-button,
  .signup-button {
    min-height: 44px;
    border-radius: 13px;
    font-size: 14px;
  }

  .pricing-button {
    min-width: 96px;
    padding: 0 11px;
    gap: 7px;
  }

  .pricing-button strong {
    left: 50%;
    bottom: -14px;
    min-width: 74px;
    min-height: 22px;
    padding: 0 8px;
    transform: translateX(-50%);
    border-radius: 7px;
    font-size: 11px;
  }

  .tag-icon svg {
    width: 19px;
    height: 19px;
  }

  .login-button {
    min-width: 72px;
    padding: 0 13px;
  }

  .signup-button {
    min-width: 90px;
    padding: 0 15px;
  }

  .main-nav {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: center;
    gap: 8px 9px;
    overflow: visible;
    padding: 4px 0 0;
    white-space: normal;
    scrollbar-width: none;
    font-size: 13.5px;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a {
    min-height: 32px;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1;
  }

  .main-nav .active {
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.13);
  }

  .nav-divider {
    display: none;
  }

  .main-nav .chrome-link {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 0;
    gap: 8px;
    padding-inline: 12px;
    color: rgba(255, 255, 255, 0.72);
  }

  .chrome-link img {
    width: 22px;
    height: 22px;
  }

  .hero {
    padding: 34px 18px 50px;
    text-align: center;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 4, 5, 0.82) 0%, rgba(3, 4, 5, 0.55) 44%, rgba(3, 4, 5, 0.76) 100%),
      radial-gradient(circle at 52% 40%, rgba(199, 255, 0, 0.08), transparent 34%);
  }

  .hero-content {
    gap: 24px;
  }

  .hero-copy {
    max-width: 100%;
    text-align: center;
  }

  .hero h1 {
    max-width: 11.5ch;
    margin-inline: auto;
    font-size: clamp(32px, 9vw, 39px);
    line-height: 1.08;
    text-wrap: balance;
  }

  .hero p {
    max-width: none;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.45;
  }

  .hero-copy-full {
    display: none;
  }

  .hero-copy-short {
    display: inline;
  }

  .hero-buttons {
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .primary-cta,
  .secondary-cta {
    width: min(100%, 278px);
    min-height: 47px;
    border-radius: 11px;
    font-size: 15px;
  }

  .video-carousel {
    min-height: 300px;
    aspect-ratio: 1 / 1.03;
    margin-inline: auto;
  }

  .video-slot {
    width: min(65%, 236px);
    border-radius: 22px;
  }

  .video-slot.is-left {
    transform: translate3d(-40%, 5%, -150px) rotateY(12deg) scale(0.65);
  }

  .video-slot.is-right {
    transform: translate3d(40%, 5%, -150px) rotateY(-12deg) scale(0.65);
  }

  .video-frame strong {
    font-size: clamp(25px, 7.6vw, 32px);
  }

  .video-sound-button {
    right: 14px;
    bottom: 14px;
  }

  .home-offer-section {
    padding: 18px 8px;
  }

  .pricing-promo {
    width: 100%;
    padding: 22px 18px 106px;
    border-radius: 20px;
  }

  .pricing-promo h1 {
    max-width: 13ch;
    font-size: clamp(26px, 8.35vw, 37px);
    line-height: 1.02;
    text-wrap: balance;
  }

  .pricing-promo h2 {
    max-width: 13ch;
    margin-top: 10px;
    font-size: clamp(24px, 7.55vw, 33px);
    line-height: 1.03;
    text-wrap: balance;
  }

  .pricing-promo p {
    margin-top: 13px;
    font-size: 16px;
  }

  .pricing-genie-art {
    right: 6px;
    bottom: -20px;
    width: min(190px, 50vw);
    opacity: 0.44;
  }

  .promo-plan-button {
    min-height: 44px;
    margin-top: 17px;
    font-size: 14px;
  }

  .memgenie-update {
    min-height: 390px;
    padding: 62px 16px;
  }

  .update-title-shell {
    width: min(100%, 346px);
    min-height: 104px;
    padding-inline: 18px;
  }

  .update-title-shell h2 {
    max-width: 300px;
    font-size: clamp(32px, 9.2vw, 42px);
  }

  .chrome-store-feature {
    min-height: 560px;
    padding: 58px 18px 52px;
  }

  .chrome-store-copy h2 {
    font-size: clamp(32px, 7.8vw, 44px);
    line-height: 1.06;
    text-wrap: balance;
  }

  .chrome-store-copy h2 span {
    display: inline;
  }

  .chrome-store-copy p {
    max-width: none;
    font-size: 16px;
    line-height: 1.48;
  }

  .chrome-store-actions {
    justify-content: center;
  }

  .workflow-showcase {
    padding: 62px 16px 70px;
  }

  .workflow-inner h2 {
    max-width: 12ch;
    margin-inline: auto;
    margin-bottom: 44px;
    font-size: clamp(30px, 8.6vw, 40px);
    text-wrap: balance;
  }

  .workflow-row,
  .workflow-row.is-reversed {
    gap: 25px;
    margin-top: 56px;
  }

  .workflow-copy {
    justify-self: center;
    text-align: center;
  }

  .workflow-copy h3 {
    font-size: clamp(25px, 7.2vw, 33px);
    line-height: 1.06;
    text-wrap: balance;
  }

  .workflow-copy p {
    max-width: 34ch;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.5;
  }

  .workflow-media {
    min-height: 270px;
    border-radius: 20px;
  }

  .workflow-video-card,
  .workflow-video-card.image-grid {
    width: min(94%, 374px);
    min-height: 250px;
    border-radius: 22px;
  }

  .pricing-page {
    padding: 10px 8px 42px;
  }

  .plan-section {
    width: 100%;
    padding: 20px 12px 14px;
    border-radius: 16px;
  }

  .plans-heading {
    margin-bottom: 18px;
  }

  .plans-heading h2 {
    font-size: clamp(25px, 7.5vw, 32px);
    line-height: 1.08;
    text-wrap: balance;
  }

  .plans-heading p {
    max-width: 28ch;
    margin-inline: auto;
    font-size: 14px;
    line-height: 1.4;
  }

  .pricing-cards {
    gap: 16px;
  }

  .plan-card {
    padding: 20px 14px 15px;
    border-radius: 13px;
  }

  .plan-card.popular {
    padding-top: 64px;
  }

  .popular-ribbon {
    height: 38px;
    font-size: 12px;
  }

  .plan-top {
    gap: 10px;
    min-height: 50px;
    margin-bottom: 13px;
  }

  .plan-card h3 {
    font-size: clamp(23px, 7.2vw, 30px);
  }

  .price {
    min-width: 74px;
  }

  .price strong {
    font-size: clamp(29px, 8.4vw, 37px);
  }

  .included-box {
    min-height: auto;
    padding: 15px 13px;
  }

  .feature-list {
    gap: 9px;
  }

  .feature-list li {
    padding-left: 27px;
    font-size: 13px;
    line-height: 1.26;
  }

  .feature-list li::before {
    width: 15px;
    height: 15px;
  }

  .feature-divider {
    gap: 10px;
    margin: 17px 0 15px;
    font-size: 13px;
  }

  .plan-cta {
    min-height: 44px;
  }

  .faq-section {
    margin-top: 58px;
    padding: 0 6px 38px;
  }

  .faq-section h2 {
    margin-bottom: 24px;
    font-size: clamp(29px, 8vw, 38px);
    text-wrap: balance;
  }

  .faq-list {
    gap: 10px;
  }

  .faq-item {
    border-radius: 10px;
  }

  .faq-item summary {
    min-height: 58px;
    gap: 14px;
    padding: 0 16px;
    font-size: 15.5px;
    line-height: 1.25;
  }

  .faq-item[open] summary {
    padding-left: 16px;
  }

  .faq-answer p {
    margin: -2px 16px 18px;
    font-size: 14.5px;
    line-height: 1.58;
  }

  .faq-cta {
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding-inline: 10px;
  }

  .brand-logo {
    width: min(210px, 76vw);
  }

  .header-actions {
    gap: 6px;
  }

  .pricing-button,
  .login-button,
  .signup-button {
    font-size: 13px;
  }

  .pricing-button {
    min-width: 88px;
    padding-inline: 8px;
  }

  .login-button {
    min-width: 66px;
  }

  .signup-button {
    min-width: 82px;
  }

  .main-nav {
    gap: 7px;
    font-size: 12.5px;
  }

  .main-nav a {
    min-height: 31px;
    padding-inline: 7px;
  }

  .hero {
    padding-inline: 14px;
  }

  .hero h1 {
    font-size: clamp(30px, 8.6vw, 34px);
  }

  .hero p {
    max-width: 25ch;
    font-size: 13px;
    line-height: 1.45;
  }

  .primary-cta,
  .secondary-cta {
    width: min(100%, 258px);
    min-height: 45px;
    font-size: 14px;
  }

  .video-carousel {
    min-height: 280px;
  }

  .video-slot {
    width: min(66%, 214px);
  }

  .pricing-promo h1,
  .pricing-promo h2 {
    max-width: 12ch;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: sticky;
    top: 0;
    min-height: 78px;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 12px 14px;
  }

  .brand {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .brand-logo {
    width: min(202px, 62vw);
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    border: 1px solid rgba(199, 255, 0, 0.18);
    color: #f5f5f5;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(18, 20, 24, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 14px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  }

  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(199, 255, 0, 0.36);
    background:
      linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(18, 20, 24, 0.96);
  }

  .menu-toggle span {
    width: 21px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 230ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  }

  .site-header.is-menu-open .menu-toggle span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.45);
  }

  .site-header.is-menu-open .menu-toggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-menu {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-height: 0;
    display: grid;
    gap: 12px;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      max-height 340ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 210ms ease,
      padding-top 260ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-header.is-menu-open .site-menu {
    max-height: 560px;
    opacity: 1;
    padding-top: 16px;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-menu .main-nav {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    justify-content: stretch;
    padding: 0;
    overflow: visible;
    white-space: normal;
    font-size: 15px;
  }

  .site-menu .main-nav a {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 0 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    line-height: 1.1;
  }

  .site-menu .main-nav .active {
    color: var(--lime);
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.15);
  }

  .site-menu .main-nav .chrome-link {
    grid-column: auto;
    justify-self: stretch;
    gap: 9px;
    color: rgba(255, 255, 255, 0.78);
  }

  .site-menu .chrome-link img {
    width: 24px;
    height: 24px;
  }

  .site-menu .header-actions {
    order: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
    margin-left: 0;
    padding: 2px 0 0;
  }

  .site-menu .pricing-button,
  .site-menu .login-button,
  .site-menu .signup-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 13px;
    font-size: 15px;
  }

  .site-menu .pricing-button {
    gap: 8px;
    padding: 0 14px;
  }

  .site-menu .pricing-button strong {
    position: static;
    min-width: 78px;
    min-height: 24px;
    margin-left: 4px;
    padding: 0 9px;
    transform: none;
    border-radius: 7px;
    font-size: 12px;
  }

  .hero {
    padding-top: 44px;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding-inline: 12px;
  }

  .brand-logo {
    width: min(188px, 60vw);
  }

  .menu-toggle {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .site-menu .main-nav {
    font-size: 14px;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  .site-header {
    min-height: 98px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(12px, 1.35vw, 22px);
    padding: 18px clamp(18px, 2vw, 32px);
  }

  .brand {
    width: auto;
    flex: 0 0 auto;
  }

  .brand-logo {
    width: clamp(190px, 20vw, 258px);
  }

  .menu-toggle {
    display: none;
  }

  .site-menu {
    display: contents;
    width: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding-top: 0;
    pointer-events: auto;
    transform: none;
  }

  .site-menu .main-nav {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    gap: clamp(12px, 1.35vw, 20px);
    padding: 0;
    overflow: visible;
    font-size: clamp(14px, 1.25vw, 16px);
    white-space: nowrap;
  }

  .site-menu .main-nav a {
    width: auto;
    min-height: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .site-menu .nav-divider {
    width: 2px;
    height: 28px;
    display: block;
  }

  .site-menu .main-nav .chrome-link {
    gap: 9px;
  }

  .site-menu .chrome-link img {
    width: 28px;
    height: 28px;
  }

  .site-menu .header-actions {
    width: auto;
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    padding: 0;
  }

  .site-menu .pricing-button,
  .site-menu .login-button,
  .site-menu .signup-button {
    width: auto;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px;
    font-size: 14px;
  }

  .site-menu .pricing-button {
    min-width: 96px;
    gap: 7px;
    padding: 0 12px;
  }

  .site-menu .pricing-button strong {
    position: absolute;
    left: 17px;
    bottom: -15px;
    min-width: 74px;
    min-height: 24px;
    margin-left: 0;
    padding: 0 8px;
    border-radius: 7px;
    transform: none;
    font-size: 12px;
  }

  .site-menu .login-button {
    min-width: 72px;
    padding: 0 14px;
  }

  .site-menu .signup-button {
    min-width: 90px;
    padding: 0 16px;
  }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .site-header {
    gap: 12px;
    padding-inline: 16px;
  }

  .brand-logo {
    width: clamp(180px, 19vw, 204px);
  }

  .site-menu .main-nav {
    gap: 11px;
    font-size: 13px;
  }

  .site-menu .main-nav .chrome-link {
    gap: 7px;
  }

  .site-menu .chrome-link img {
    width: 26px;
    height: 26px;
  }

  .site-menu .header-actions {
    gap: 8px;
  }

  .site-menu .pricing-button,
  .site-menu .login-button,
  .site-menu .signup-button {
    min-height: 46px;
    font-size: 13px;
  }

  .site-menu .pricing-button {
    min-width: 88px;
    padding-inline: 10px;
  }

  .site-menu .login-button {
    min-width: 66px;
    padding-inline: 12px;
  }

  .site-menu .signup-button {
    min-width: 82px;
    padding-inline: 13px;
  }
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    /* clip (not hidden) to avoid making html/body a scroll container, which
       would break position: sticky on the review-entry transition. */
    overflow-x: clip;
  }

  img,
  video {
    max-width: 100%;
  }

  .site-header {
    position: sticky;
    top: 0;
    min-height: 78px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 12px 16px;
  }

  .brand {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .brand-logo {
    width: min(218px, 62vw);
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    border: 1px solid rgba(199, 255, 0, 0.18);
    color: #f5f5f5;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(18, 20, 24, 0.94);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 14px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }

  .menu-toggle span {
    width: 21px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 230ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  }

  .site-header.is-menu-open .menu-toggle span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.45);
  }

  .site-header.is-menu-open .menu-toggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-menu {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-height: 0;
    display: grid;
    gap: 12px;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      max-height 340ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 210ms ease,
      padding-top 260ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-header.is-menu-open .site-menu {
    max-height: calc(100svh - 90px);
    overflow-y: auto;
    opacity: 1;
    padding-top: 16px;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-menu .main-nav {
    order: 1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    justify-content: stretch;
    padding: 0;
    overflow: visible;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    white-space: normal;
  }

  .site-menu .main-nav a {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 0 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    line-height: 1.12;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .site-menu .nav-divider {
    display: none;
  }

  .site-menu .main-nav .active {
    color: var(--lime);
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.15);
  }

  .site-menu .main-nav .chrome-link {
    grid-column: auto;
    justify-self: stretch;
    gap: 9px;
  }

  .site-menu .chrome-link img {
    width: 24px;
    height: 24px;
  }

  .site-menu .header-actions {
    order: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
    margin-left: 0;
    padding: 2px 0 0;
  }

  .site-menu .pricing-button,
  .site-menu .login-button,
  .site-menu .signup-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 13px;
    font-size: 15px;
  }

  .site-menu .pricing-button {
    gap: 8px;
    padding: 0 14px;
  }

  .site-menu .pricing-button strong {
    position: static;
    min-width: 78px;
    min-height: 24px;
    margin-left: 4px;
    padding: 0 9px;
    transform: none;
    border-radius: 7px;
    font-size: 12px;
  }

  .hero {
    min-height: auto;
    padding: 54px 16px 62px;
    align-items: start;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 4, 5, 0.88) 0%, rgba(3, 4, 5, 0.66) 48%, rgba(3, 4, 5, 0.78) 100%),
      radial-gradient(circle at 50% 20%, rgba(199, 255, 0, 0.08), transparent 34%);
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-copy {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .hero h1 {
    max-width: 10ch;
    margin: 0 auto;
    font-size: clamp(44px, 12vw, 64px);
    line-height: 0.98;
    text-wrap: balance;
  }

  .hero p {
    max-width: none;
    margin: 22px auto 0;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.48;
  }

  .hero-copy-full {
    display: none;
  }

  .hero-copy-short {
    display: inline;
  }

  .hero-proof-strip {
    width: min(100%, 420px);
    justify-content: center;
    margin: 20px auto 0;
    gap: 8px;
  }

  .hero-proof-strip span {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  .hero-buttons,
  .hack-hero-actions {
    width: min(100%, 520px);
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .primary-cta,
  .secondary-cta {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: 17px;
  }

  .hero-media {
    width: 100%;
    min-height: 360px;
    perspective: none;
  }

  .video-carousel {
    width: 100%;
    max-width: 420px;
    min-height: 360px;
    aspect-ratio: auto;
    margin: 0 auto;
  }

  .video-slot {
    width: min(100%, 310px);
    aspect-ratio: 9 / 12;
    border-radius: 24px;
  }

  .video-slot.is-left,
  .video-slot.is-right {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, -80px) scale(0.82);
  }

  .video-frame {
    padding: 22px;
    border-radius: inherit;
  }

  .video-frame::before {
    inset: 16px;
    border-radius: 18px;
  }

  .video-frame strong {
    max-width: 250px;
    font-size: clamp(30px, 9vw, 42px);
  }

  .video-caption {
    font-size: 15px;
  }

  .video-sound-button {
    left: 50%;
    right: auto;
    bottom: 8px;
    transform: translateX(-50%);
  }

  .home-offer-section {
    padding: 24px 12px 18px;
  }

  .pricing-promo,
  .pricing-promo.home-pricing-promo {
    width: 100%;
    max-width: 560px;
    min-height: 420px;
    aspect-ratio: auto;
    padding: 24px;
    align-items: flex-start;
    border-radius: 22px;
  }

  .pricing-promo-copy {
    max-width: 100%;
  }

  .pricing-promo h1 {
    max-width: 11ch;
    font-size: clamp(34px, 9.7vw, 48px);
    line-height: 1.02;
    white-space: normal;
  }

  .pricing-promo h2 {
    max-width: 12ch;
    margin-top: 12px;
    font-size: clamp(30px, 8.8vw, 42px);
    line-height: 1.02;
  }

  .pricing-promo p {
    margin-top: 14px;
    font-size: 16px;
  }

  .sale-badge {
    margin-bottom: 18px;
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 12px;
  }

  .pricing-genie-art {
    right: -44px;
    top: auto;
    bottom: -12px;
    height: 52%;
    opacity: 0.42;
  }

  .promo-plan-button {
    min-height: 48px;
    margin-top: 20px;
    padding: 0 16px;
    font-size: 15px;
  }

  .detection-callout-section {
    padding: 58px 14px 66px;
  }

  .detection-callout {
    min-height: 0;
  }

  .undetectable-pill {
    min-height: 48px;
    gap: 10px;
    margin-bottom: 28px;
    padding: 0 16px;
    border-radius: 15px;
    font-size: clamp(17px, 4.8vw, 22px);
  }

  .undetectable-pill span {
    width: 28px;
    height: 28px;
  }

  .detection-callout h2 {
    width: min(100%, 620px);
    max-width: none;
    margin-inline: auto;
    font-size: clamp(29px, 7.4vw, 48px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
  }

  .detection-callout h2 span {
    display: inline;
  }

  .detection-title-line {
    display: inline !important;
    white-space: normal;
  }

  .wembean-word,
  .detected-word {
    display: inline !important;
  }

  .wembean-logo-inline {
    width: clamp(82px, 20vw, 124px);
    margin: -0.16em 0 -0.26em;
    vertical-align: middle;
  }

  .detection-callout p {
    max-width: 520px;
    margin-top: 24px;
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1.42;
  }

  .detection-actions {
    width: min(100%, 320px);
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
  }

  .detection-action-button {
    width: 100%;
    min-width: min(100%, 260px);
    min-height: 60px;
    gap: 12px;
    padding: 15px 24px;
    border-radius: 16px;
    font-size: 22px;
    line-height: 1.25;
  }

  .detection-action-button svg {
    width: 30px;
    height: 30px;
  }

  .proof-arrow {
    left: clamp(88px, 40vw, 160px);
    top: -62px;
    width: 72px;
    height: 72px;
  }

  .chrome-store-feature {
    min-height: 620px;
    padding: 76px 16px 88px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .chrome-store-copy {
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .chrome-store-copy h2 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(32px, 8.5vw, 44px);
    line-height: 1.04;
  }

  .chrome-store-copy h2 span {
    display: inline;
  }

  .chrome-store-copy p {
    max-width: none;
    margin-inline: auto;
    font-size: 16px;
  }

  .chrome-store-actions {
    justify-content: center;
    gap: 12px;
  }

  .chrome-store-cta {
    min-height: 54px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: 16px;
  }

  .chrome-store-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .workflow-showcase[data-workflow-showcase] {
    padding: 70px 16px 76px;
  }

  .workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
    max-width: 11ch;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(36px, 10vw, 52px);
  }

  .workflow-lede {
    max-width: 31ch;
    margin: 18px auto 0;
    text-align: center;
  }

  .workflow-sticky-layout {
    display: block;
    margin-top: 34px;
  }

  .workflow-visual-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 22px;
  }

  .workflow-visual-shell {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1.08;
    margin: 0 auto;
    border-radius: 22px;
  }

  .workflow-panel-list {
    gap: 16px;
    padding-bottom: 0;
  }

  .workflow-step {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
    opacity: 1;
    transform: none;
  }

  .workflow-step-number {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .workflow-step-copy h3 {
    font-size: clamp(28px, 8.5vw, 38px);
  }

  .workflow-step-copy p:not(.workflow-step-label) {
    font-size: 15px;
  }

  .membean-window,
  .delay-console,
  .typing-console {
    width: min(88%, 360px);
    padding: 18px;
    border-radius: 22px;
  }

  .answer-choice {
    grid-template-columns: 34px 1fr;
    min-height: 62px;
    padding: 0 12px;
  }

  .answer-choice small {
    display: none;
  }

  .delay-row {
    min-height: 60px;
    padding: 0 14px;
  }

  .delay-wave {
    height: 80px;
  }

  .typing-line strong {
    font-size: clamp(27px, 8vw, 40px);
  }

  .keyboard-grid span {
    height: 28px;
  }

  .review-entry-transition {
    height: 46vh;
  }

  .review-entry-sticky {
    position: relative;
    height: 46vh;
  }

  .review-entry-rings {
    opacity: 0.35;
  }

  .review-entry-card {
    width: min(90vw, 360px);
    min-height: 190px;
    padding: 24px;
  }

  .review-entry-card strong {
    font-size: clamp(28px, 8vw, 38px);
  }

  .reviews-showcase {
    padding: 76px 14px 72px;
  }

  .reviews-header {
    gap: 22px;
    margin-bottom: 28px;
  }

  .reviews-header h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .reviews-header p:not(.reviews-kicker) {
    max-width: 34ch;
  }

  .reviews-viewport {
    padding: 10px 0 22px;
    mask-image: none;
  }

  .review-card {
    flex-basis: 100%;
    min-height: 310px;
  }

  .review-card-main {
    padding: 20px;
  }

  .faq-section,
  .hack-faq {
    width: 100%;
    max-width: 760px;
    margin: 58px auto 0;
    padding: 0 14px 52px;
  }

  .faq-section h2 {
    max-width: 11ch;
    margin-inline: auto;
    margin-bottom: 24px;
    font-size: clamp(32px, 9vw, 42px);
  }

  .faq-item {
    border-radius: 12px;
  }

  .faq-item summary {
    min-height: 60px;
    padding: 0 16px;
    font-size: 16px;
  }

  .faq-answer p {
    margin: -2px 16px 18px;
    font-size: 15px;
    line-height: 1.55;
  }

  .faq-cta {
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .faq-cta a {
    width: min(100%, 280px);
  }

  .pricing-page {
    min-height: auto;
    padding: 16px 12px 52px;
  }

  .plan-section {
    width: 100%;
    padding: 20px 12px 16px;
    border-radius: 18px;
  }

  .plans-heading h2 {
    font-size: clamp(30px, 8.8vw, 40px);
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .plan-card {
    min-height: 0;
    padding: 20px 14px 16px;
    border-radius: 16px;
  }

  .plan-top {
    min-height: 0;
    gap: 12px;
  }

  .plan-card h3 {
    font-size: 27px;
  }

  .price {
    min-width: 82px;
  }

  .included-box {
    min-height: 0;
    padding: 16px 14px;
  }

  .feature-list {
    gap: 11px;
  }

  .feature-list li {
    padding-left: 28px;
    font-size: 13.5px;
    line-height: 1.28;
  }

  .plan-cta {
    min-height: 48px;
  }

  .hack-hero {
    min-height: auto;
    padding: 58px 16px 66px;
  }

  .hack-hero-inner,
  .hack-intro-grid,
  .hack-process,
  .hack-comparison-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hack-hero-copy,
  .hack-intro-grid,
  .hack-heading-block,
  .hack-process-copy {
    text-align: center;
  }

  .hack-eyebrow,
  .hack-section-label {
    margin-inline: auto;
  }

  .hack-hero-copy h1 {
    max-width: 11ch;
    margin-inline: auto;
    font-size: clamp(37px, 10.4vw, 54px);
  }

  .hack-hero-copy > p:not(.hack-eyebrow) {
    max-width: 33ch;
    margin-inline: auto;
    font-size: 16px;
  }

  .hack-status-panel {
    width: 100%;
    min-height: 0;
    padding: 20px;
    border-radius: 22px;
  }

  .hack-panel-top {
    font-size: 16px;
  }

  .hack-panel-top img {
    width: 50px;
    height: 50px;
  }

  .hack-panel-meter {
    margin-top: 24px;
    padding: 20px;
  }

  .hack-panel-lines {
    margin: 24px 0;
  }

  .hack-intro,
  .hack-feature-section,
  .hack-process,
  .hack-comparison {
    padding: 64px 16px;
  }

  .hack-intro h2,
  .hack-heading-block h2,
  .hack-process h2 {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(32px, 9vw, 44px);
  }

  .hack-intro-copy p,
  .hack-heading-block p:not(.hack-eyebrow),
  .hack-process-copy > p:not(.hack-eyebrow) {
    max-width: 34ch;
    margin-inline: auto;
    font-size: 16px;
  }

  .hack-feature-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hack-feature-card {
    min-height: 0;
    padding: 20px;
    border-radius: 16px;
  }

  .hack-feature-card span {
    margin-bottom: 18px;
  }

  .hack-feature-card h3 {
    padding-top: 0;
  }

  .hack-process {
    width: calc(100% + 32px);
    margin-inline: -16px;
    border-radius: 0;
  }

  .hack-steps {
    gap: 14px;
  }

  .hack-steps article,
  .hack-compare-card {
    padding: 22px;
    border-radius: 16px;
  }

  .hack-compare-card {
    min-height: 0;
  }

  .hack-compare-card.featured a {
    width: 100%;
  }

  .site-footer {
    overflow: hidden;
  }

  .footer-lime {
    min-height: 0;
    gap: 38px;
    padding: 32px 16px 26px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }

  .footer-brandline {
    grid-column: 1 / -1;
  }

  .footer-brandline p {
    max-width: 11ch;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.08;
  }

  .footer-column {
    gap: 10px;
  }

  .footer-column h2 {
    font-size: 13px;
  }

  .footer-column a {
    width: 100%;
    font-size: 13.5px;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .footer-lime-bottom,
  .footer-black {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-socials,
  .footer-black nav {
    justify-content: flex-start;
    gap: 12px 18px;
  }

  .footer-black {
    padding: 20px 16px 24px;
    font-size: 13px;
  }
}

/* Tablet-range home promo (≈581–900px).
   The shared mobile block above caps this panel to 560px wide and the
   headline to 11ch — built for the big-font phone layout. At tablet widths
   that crams the desktop-style copy into a thin column. Restore a roomy,
   balanced two-column layout for this range only. */
@media (min-width: 581px) and (max-width: 900px) {
  .pricing-promo.home-pricing-promo {
    max-width: none;
    min-height: 240px;
    padding: clamp(26px, 4vw, 40px);
    align-items: center;
  }

  .pricing-promo.home-pricing-promo .pricing-promo-copy {
    max-width: 62%;
  }

  .pricing-promo.home-pricing-promo h1 {
    max-width: none;
    font-size: clamp(26px, 4.1vw, 34px);
    line-height: 1.08;
  }

  .pricing-promo.home-pricing-promo h2 {
    max-width: none;
    font-size: clamp(15px, 1.9vw, 18px);
  }

  .pricing-promo.home-pricing-promo .pricing-genie-art {
    right: clamp(6px, 2vw, 28px);
    height: clamp(150px, 64%, 210px);
    opacity: 0.9;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(42px, 13vw, 54px);
  }

  .hero-media {
    min-height: 330px;
  }

  .video-carousel {
    min-height: 330px;
  }

  .video-slot {
    width: min(100%, 286px);
  }

  .pricing-promo,
  .pricing-promo.home-pricing-promo {
    min-height: 390px;
    padding: 20px;
  }

  .pricing-promo h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .pricing-promo h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .detection-callout-section {
    padding: 48px 12px 58px;
  }

  .detection-callout h2 {
    font-size: clamp(29px, 8.3vw, 42px);
  }

  .detection-title-line {
    gap: 4px 12px;
  }

  .wembean-logo-inline {
    width: clamp(76px, 21vw, 92px);
  }

  .detection-callout p {
    font-size: 16px;
  }

  .detection-actions {
    width: 100%;
  }

  .detection-action-button {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 14px 22px;
    line-height: 1.25;
  }

  .proof-arrow {
    left: clamp(76px, 40vw, 142px);
    top: -56px;
    width: 64px;
    height: 64px;
  }

  .chrome-store-copy h2,
  .workflow-showcase[data-workflow-showcase] .workflow-inner h2,
  .hack-hero-copy h1 {
    font-size: clamp(34px, 10.5vw, 46px);
  }

  .workflow-visual-shell {
    aspect-ratio: 1 / 1.18;
  }

  .review-card-main p {
    font-size: 16px;
  }

  .plan-top {
    display: grid;
    grid-template-columns: 1fr;
  }

  .price {
    text-align: left;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-loader {
    animation: entryPanelExit 1ms ease 280ms forwards;
  }

  .entry-mark {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: none;
  }

  .hero-genie-glow {
    animation: none;
    background-position: 50% 50%;
  }

  .video-slot {
    transition-duration: 1ms;
  }

  .memgenie-update,
  .memgenie-update * {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .memgenie-update .update-grid,
  .memgenie-update .update-scan,
  .memgenie-update .update-lockup,
  .memgenie-update .update-title-shell h2,
  .memgenie-update .update-corner {
    opacity: 1;
    filter: none;
  }

  .memgenie-update .update-lockup,
  .memgenie-update .update-title-shell h2 {
    transform: none;
  }

  .memgenie-update .update-title-shell {
    clip-path: inset(0 0 0 0);
  }
}

/* === MemGenie auth bridge: avatar + account dropdown === */
.mg-account {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Avatar (2026-10-16): just the picture — the user's own photo or the grey
   default badge. No border, ring, glow, tint or status dot outside the frame. */
.mg-avatar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  transition: transform 0.15s ease;
}
.mg-avatar-link:hover { transform: translateY(-1px); }
.mg-avatar-link:focus { outline: none; }
.mg-avatar-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mg-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Account dropdown panel */
.mg-account-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  min-width: 260px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #14161b, #0c0d10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px -20px rgba(0, 0, 0, 0.85),
    0 8px 24px -12px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.14s ease,
    transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    visibility 0.18s;
  pointer-events: none;
}
.mg-account.is-open .mg-account-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mg-account-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}
.mg-account-head-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.mg-account-head-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mg-account-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.mg-account-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f3f5ef;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Plan line under the email (2026-10-22): "Ultimate" as a solid pill,
   "Free plan" as a quiet grey one. Gray/white only — no lime, no pink. */
.mg-account-plan {
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #b4b8bf;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.mg-account-plan.is-ultimate {
  background: #ffffff;
  color: #0d1117;
}
.mg-account-email {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #d6d9d1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.mg-account-item:hover,
.mg-account-item:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  outline: none;
}
.mg-account-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
@media (max-width: 720px) {
  .mg-account-panel {
    right: 0;
    left: auto;
    min-width: 240px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mg-account-panel { transition: opacity 0.1s ease, visibility 0.1s; transform: none; }
  .mg-avatar-link { transition: none; }
}

/* =====================================================================
   HEADER SYSTEM (overhauled) — robust 3-column grid: [logo | nav | actions]
   The middle nav lives in a 1fr track with overflow-x, so it can never
   collide with the logo or the action buttons. Selectors are prefixed with
   `header.site-header` to win over all earlier header rules.
   ===================================================================== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 44px);
  min-height: 88px;
  padding: 14px clamp(18px, 2.4vw, 44px);
  background: rgba(8, 9, 11, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

header.site-header .brand {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

header.site-header .brand-logo {
  display: block;
  height: clamp(34px, 3.4vw, 44px);
  width: auto;
}

/* wrapper is transparent so nav + actions become direct grid items */
header.site-header .site-menu {
  display: contents;
}

/* ---- middle nav: boxed into the 1fr track, scrolls if cramped ---- */
header.site-header .main-nav {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.6vw, 12px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  color: var(--muted);
  font-size: clamp(13.5px, 0.92vw, 16px);
  font-weight: 600;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

header.site-header .main-nav::-webkit-scrollbar {
  display: none;
}

header.site-header .main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 10px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}

header.site-header .main-nav a:hover,
header.site-header .main-nav a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

header.site-header .main-nav a.active {
  color: var(--lime);
}

/* Pricing link + 30% OFF badge inside nav */
header.site-header .nav-pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Support link given its own accent so it stands out in the nav */
header.site-header .nav-support {
  color: #98a0f5;
}

header.site-header .nav-support:hover,
header.site-header .nav-support:focus-visible {
  color: #fff !important;
  background: rgba(88, 101, 242, 0.18) !important;
}

header.site-header .nav-support svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* ---- right-side actions: only Login + Sign up, never shrink ---- */
header.site-header .header-actions {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

header.site-header .header-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

/* The account menu lives inside .header-actions, so the button rule above
   (inline-flex, 44px tall, 20px padding) was hitting its items and laying
   them out in a row. Put them back to plain full-width rows. */
header.site-header .header-actions a.mg-account-item {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

header.site-header .header-actions a:hover {
  transform: translateY(-1px);
}
header.site-header .header-actions a.mg-account-item:hover {
  transform: none;
}

/* Secondary: neutral glass. It used to be lime-on-lime with the Sign up
   button beside it, which made two adjacent controls compete. */
header.site-header .login-button {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

header.site-header .login-button:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Primary: the same crimson, gradient sheen and dark lip as the plan CTAs,
   so there is one action colour across the whole site. */
header.site-header .signup-button {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%),
    var(--pink);
  border: 1px solid transparent;
  box-shadow:
    inset 0 -3px 0 #b80038,
    0 4px 3px rgba(0, 0, 0, 0.25),
    0 16px 20px -12px rgba(244, 4, 80, 0.55);
}

header.site-header .signup-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
    #ff2159;
}

/* hamburger hidden on desktop */
header.site-header .menu-toggle {
  display: none;
  grid-column: 4;
  grid-row: 1;
  width: 48px;
  height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 13px;
  border: 1px solid rgba(199, 255, 0, 0.18);
  color: #f5f5f5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(18, 20, 24, 0.92);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

header.site-header .menu-toggle span {
  width: 22px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transition: transform 230ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

/* ===================== TABLET / MOBILE: hamburger ===================== */
@media (max-width: 940px) {
  header.site-header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 14px 10px;
    min-height: 0;
    padding: 14px clamp(14px, 3vw, 24px);
  }

  header.site-header .brand {
    grid-column: 1;
    grid-row: 1;
  }

  header.site-header .brand-logo {
    width: 46px;
  }

  header.site-header .menu-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 42px;
    height: 42px;
  }

  header.site-header .menu-toggle:hover,
  header.site-header .menu-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(199, 255, 0, 0.36);
  }

  header.site-header.is-menu-open .menu-toggle span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  header.site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }

  header.site-header.is-menu-open .menu-toggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* The whole drawer (nav links + login/signup) becomes one collapsible
     panel spanning the full width on row 2 — .site-menu stops being a grid
     pass-through here so its children (nav, actions) stack vertically. */
  header.site-header .site-menu {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      max-height 340ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 200ms ease,
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  header.site-header.is-menu-open .site-menu {
    max-height: 620px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    padding-top: 4px;
  }

  header.site-header .main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    font-size: 15px;
    -webkit-mask-image: none;
            mask-image: none;
  }

  header.site-header .main-nav a {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }

  header.site-header .main-nav a.active {
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.16);
  }

  header.site-header .nav-support {
    background: rgba(88, 101, 242, 0.16);
    border-color: rgba(88, 101, 242, 0.28);
    color: #c2c8fb;
  }

  /* Login / Sign up move into the drawer, below the nav links */
  header.site-header .header-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
  }

  header.site-header .header-actions a {
    flex: 1 1 0;
    height: 48px;
    padding: 0 13px;
    font-size: 14.5px;
    border-radius: 12px;
  }
}

@media (max-width: 540px) {
  header.site-header {
    gap: 10px 8px;
    padding: 12px 14px;
  }

  header.site-header .brand-logo {
    width: 40px;
  }

  header.site-header .menu-toggle {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  header.site-header .menu-toggle span {
    width: 18px;
  }
}

@media (max-width: 380px) {
  header.site-header .brand-logo {
    width: 34px;
  }
}

/* =====================================================================
   MOBILE POLISH OVERRIDES  (appended last so they win the cascade)
   Consolidated fixes for phone layout. Scoped to <=720px.
   ===================================================================== */
@media (max-width: 720px) {
  /* ---- Hero video carousel: bigger active video + peeking side videos ---- */
  .hero-media {
    width: 100%;
    min-height: 0;
    perspective: 1100px;
  }

  .video-carousel {
    width: 100%;
    max-width: 460px;
    min-height: clamp(440px, 122vw, 540px);
    aspect-ratio: auto;
    margin: 0 auto;
    overflow: hidden;            /* clip the peeking flanks at the carousel edge,
                                    so they show without causing page scroll */
    border-radius: 28px;
  }

  .video-slot {
    width: min(72%, 300px);
    aspect-ratio: 10 / 16;
    border-radius: 26px;
  }

  /* Re-show the left/right videos flanking the active one (matches desktop). */
  .video-slot.is-left,
  .video-slot.is-right {
    opacity: 0.5;
    pointer-events: auto;
    filter: saturate(0.9) brightness(0.7);
  }

  .video-slot.is-left {
    transform: translate3d(-46%, 3%, -120px) rotateY(13deg) scale(0.7);
  }

  .video-slot.is-right {
    transform: translate3d(46%, 3%, -120px) rotateY(-13deg) scale(0.7);
  }

  .video-slot.is-active {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .video-frame strong {
    max-width: 220px;
    font-size: clamp(26px, 7.6vw, 34px);
  }

  /* (mobile genie hide was removed — the new compact promo design tucks
     the genie behind the headline at lower opacity, so we want it
     visible at all breakpoints. Positioning is handled by the
     `.pricing-promo .pricing-genie-art` rule earlier in the file.) */

  /* On mobile keep the main promo heading but drop the secondary line, and
     keep the heading at a sensible size so it doesn't dominate the card. */
  .home-pricing-promo h2 {
    display: none;
  }

  .pricing-promo.home-pricing-promo h1 {
    max-width: 14ch;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.06;
  }

  .pricing-promo.home-pricing-promo {
    min-height: 0;
  }

  /* ---- Hero title: drop the "|" and put MemGenie on its own line ---- */
  .hero-title-sep {
    display: none;
  }

  .hero-genie-glow {
    display: block;
  }

  /* ---- Hide the secondary "See How It Works" button on mobile ---- */
  .secondary-cta {
    display: none;
  }

  /* ---- Workflow: drop each demo video directly under its matching step ---- */
  .workflow-sticky-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 34px;
  }

  .workflow-panel-list,
  .workflow-visual-sticky,
  .workflow-visual-shell {
    display: contents;
  }

  .workflow-step[data-workflow-step="0"] { order: 1; }
  .workflow-visual-card[data-workflow-visual="0"] { order: 2; }
  .workflow-step[data-workflow-step="1"] { order: 3; }
  .workflow-visual-card[data-workflow-visual="1"] { order: 4; }
  .workflow-step[data-workflow-step="2"] { order: 5; }
  .workflow-visual-card[data-workflow-visual="2"] { order: 6; }

  /* Every card renders in-flow and stays visible (no scroll-toggled fade). */
  .workflow-visual-card[data-workflow-visual] {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1.05;
    margin: 0 auto;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .workflow-step {
    min-height: auto;
    opacity: 1;
    transform: none;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
    border-radius: 20px;
  }

  /* Keep the three step blocks visually uniform. */
  .workflow-step-copy h3 {
    margin-bottom: 12px;
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.06;
  }

  .workflow-step-copy p:not(.workflow-step-label) {
    max-width: none;
    font-size: 15px;
    line-height: 1.46;
  }

  /* ---- Detection callout: cleaner, tighter heading block ---- */
  .detection-callout-section {
    padding: 52px 16px 60px;
  }

  .detection-callout h2 {
    font-size: clamp(28px, 7.4vw, 44px);
    line-height: 1.16;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
  }

  .detection-callout h2 > span,
  .detection-callout h2 span {
    display: inline;
  }

  .detection-title-line {
    display: inline !important;
    white-space: normal;
  }

  .wembean-word,
  .detected-word {
    display: inline !important;
  }

  .wembean-logo-inline {
    width: clamp(88px, 22vw, 120px);
    margin: -0.1em 0 -0.18em;
  }

  .detection-callout p {
    max-width: 36ch;
    margin-top: 22px;
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 1.45;
  }

  .proof-arrow {
    top: -44px;
    width: 60px;
    height: 60px;
  }

  /* ---- Chrome Store section: stop it looking like a tall skinny strip ---- */
  .chrome-store-feature {
    min-height: 0;
    padding: 56px 18px 60px;
  }

  .chrome-store-copy {
    width: 100%;
    max-width: 560px;
  }

  .chrome-store-copy h2 {
    font-size: clamp(34px, 9.2vw, 46px);
    line-height: 1.06;
  }

  .chrome-store-copy p {
    max-width: 40ch;
    margin-inline: auto;
  }

  /* ---- Footer brandline: span the full width on mobile ---- */
  .footer-brandline {
    grid-column: 1 / -1;
  }

  .footer-brandline p {
    max-width: none;
  }
}

/* ---- Review entry transition: re-enable the desktop-style sticky scroll
   animation on mobile. An earlier max-width:900px rule had pinned it to
   position:relative / 46vh, which disabled the whole effect on phones.
   Scoped to no-preference so reduced-motion users keep the static fallback. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .review-entry-transition {
    height: 170vh;
  }

  .review-entry-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
  }
}

/* Genie-art positioning for the home-page promo card is handled by the
   shared `.pricing-promo .pricing-genie-art` rule above (lines ~4358).
   This block was previously a homepage-only override; it's no longer
   needed because the new design applies on both pages. */

/* ── Cross-site nav transition (memgenie.net → api.memgenie.net) ────────
 * When the user clicks Dashboard / Login / Sign up on the marketing site,
 * we re-show the .entry-loader and slide it DOWN over the page (reverse
 * of its exit animation), then navigate. The dashboard then mounts with
 * the same loader already covering the screen, so the two pages feel
 * visually continuous despite the cross-origin hop.
 */
.entry-loader.is-leaving {
  display: grid;
  animation: entryPanelEnter 480ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.entry-loader.is-leaving .entry-mark {
  animation: entryGenieFlashIn 480ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes entryPanelEnter {
  0%   { transform: translate3d(0, -104%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes entryGenieFlashIn {
  0%   { opacity: 0; transform: translate3d(0, -40vh, 0) scale(0.7); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ── Final pricing-promo genie positioning override ───────────────────
 * The PNG has a black background so mix-blend-mode:screen drops the
 * black to invisible while keeping the neon pixels — no re-export needed.
 */
.pricing-promo .pricing-genie-art {
  display: block;
  position: absolute;
  top: 50%;
  bottom: auto;
  right: clamp(-12px, 1.5vw, 56px);
  left: auto;
  width: auto;
  height: clamp(150px, 82%, 240px);
  max-height: none;
  opacity: 1;
  object-fit: contain;
  mix-blend-mode: screen;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 900px) {
  .pricing-promo .pricing-genie-art {
    right: -32px;
    height: clamp(160px, 58%, 220px);
    opacity: 0.55;
  }
  .pricing-promo .pricing-promo-copy {
    position: relative;
    z-index: 2;
  }
}

/* ===== Dashboard Feature Popup (desktop only, bottom-right) ===== */
.dbp {
  display: none;
}

@media (min-width: 768px) {
  .dbp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 308px;
    background: #0c1400;
    border: 1px solid rgba(244, 4, 80, 0.16);
    border-radius: 20px;
    padding: 16px 16px 14px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0 48px -6px rgba(244, 4, 80, 0.18),
      0 28px 72px rgba(0, 0, 0, 0.65);
    z-index: 8900;
    transform: translateY(calc(100% + 48px));
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .dbp--in {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .dbp--out {
    transform: translateY(calc(100% + 48px));
    opacity: 0;
    pointer-events: none;
  }
}

.dbp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dbp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lime);
}

.dbp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.dbp-close:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.dbp-title {
  margin: -6px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.01em;
}

.dbp-video-wrap {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(244, 4, 80, 0.08);
  box-shadow: 0 0 24px -4px rgba(244, 4, 80, 0.12);
}

.dbp-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--lime);
  color: #0c1400;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 10px 16px 11px;
  border-radius: 10px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.dbp-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ============================================================
   MemGenie hero — autoplay-on-scroll demo video (demo-memgenie-2.webm)
   ============================================================ */
.mg-demo {
  position: relative;
  padding: clamp(56px, 6vw, 100px) clamp(18px, 4vw, 64px);
  background: linear-gradient(180deg, #050607 0%, #07090b 100%);
}

.mg-demo-head {
  max-width: 720px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  text-align: center;
}

.mg-demo-head .hack-eyebrow { justify-content: center; }

.mg-demo-head h2 {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mg-demo-stage {
  position: relative;
  width: min(100%, 960px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  padding: clamp(8px, 0.85vw, 12px);
  border-radius: clamp(16px, 1.6vw, 24px);
  background: linear-gradient(180deg, #15181d 0%, #0a0c10 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px -30px rgba(0, 0, 0, 0.6),
    0 50px 120px -24px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.4s ease;
}

.mg-demo-stage:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 60px 140px -24px rgba(0, 0, 0, 0.75),
    0 0 70px -10px rgba(199, 255, 0, 0.1);
}

/* Skeleton shimmer shown behind the video until it paints */
.mg-demo-stage::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 0.85vw, 12px);
  border-radius: clamp(9px, 1vw, 15px);
  background: #1f2125;
  animation: quizSkeleton 1.8s ease-in-out infinite;
  z-index: 0;
}

.mg-demo-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(9px, 1vw, 15px);
  cursor: pointer;
}

/* ============================================================
   Quiz Automation page — featured video section
   ============================================================ */
.quiz-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Was up to 124px top and bottom, which left the video marooned. */
  padding: clamp(44px, 4.4vw, 72px) clamp(18px, 4vw, 64px);
  background:
    linear-gradient(180deg, #06080a 0%, #0a0d11 48%, #06080a 100%);
}

.quiz-feature-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, rgba(199, 255, 0, 0.10), transparent 40%),
    radial-gradient(circle at 82% 82%, rgba(56, 96, 255, 0.10), transparent 46%),
    radial-gradient(circle at 16% 78%, rgba(244, 4, 80, 0.06), transparent 42%);
}

.quiz-feature-head {
  max-width: 680px;
  margin: 0 auto clamp(22px, 2.2vw, 32px);
  text-align: center;
}

.quiz-feature-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.quiz-feature-head .hack-eyebrow {
  justify-content: center;
}

.quiz-feature-head > p {
  margin: 12px auto 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  font-weight: 400;
}

/* Premium dark video player frame */
.quiz-feature-stage {
  position: relative;
  width: min(100%, 920px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  padding: clamp(8px, 0.85vw, 12px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: linear-gradient(180deg, #15181d 0%, #0a0c10 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px -30px rgba(0, 0, 0, 0.6),
    0 50px 120px -24px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.4s ease;
}

.quiz-feature-stage:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 60px 140px -24px rgba(0, 0, 0, 0.75),
    0 0 70px -10px rgba(199, 255, 0, 0.1);
}

/* Skeleton shimmer shown behind the video until it paints */
.quiz-feature-stage::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 0.85vw, 12px);
  border-radius: clamp(9px, 1vw, 13px);
  background: #1f2125;
  animation: quizSkeleton 1.8s ease-in-out infinite;
  z-index: 0;
}

@keyframes quizSkeleton {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

.quiz-feature-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(9px, 1vw, 13px);
  background: #05070a;
  outline: none;
}

.quiz-feature-badge {
  position: absolute;
  top: clamp(16px, 1.6vw, 26px);
  left: clamp(16px, 1.6vw, 26px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 7, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.quiz-feature-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(199, 255, 0, 0.85);
  animation: featureAutoPulse 1.5s ease-in-out infinite;
}

.quiz-feature-actions {
  margin-top: clamp(30px, 3vw, 46px);
  display: flex;
  justify-content: center;
}

@media (max-width: 720px) {
  .quiz-feature-badge {
    top: 12px;
    left: 12px;
    padding: 6px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-feature-dot {
    animation: none;
  }
}

/* === Custom video player (quiz demo) === */
.quiz-feature-video {
  cursor: pointer;
}

/* Big center play button */
.qp-bigplay {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 3;
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 12, 16, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, opacity 0.3s ease;
}

.qp-bigplay svg {
  width: 38%;
  height: 38%;
  fill: currentColor;
  margin-left: 8%;
}

.qp-bigplay:hover {
  transform: scale(1.06);
  background: rgba(10, 12, 16, 0.58);
}

[data-quiz-player].has-started .qp-bigplay {
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

/* Control bar */
.qp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: clamp(30px, 5vw, 46px) clamp(12px, 1.4vw, 18px) clamp(11px, 1.2vw, 15px);
  /* The controls sit on VIDEO, not on the page, so the frame behind them can
     be any colour. The scrim has to carry the contrast on its own: ramp it
     early enough that the scrub row is already backed, and hard enough that
     the button row reads over a white frame. */
  background: linear-gradient(
    180deg,
    rgba(4, 6, 9, 0) 0%,
    rgba(4, 6, 9, 0.18) 22%,
    rgba(4, 6, 9, 0.52) 46%,
    rgba(4, 6, 9, 0.82) 72%,
    rgba(4, 6, 9, 0.94) 100%
  );
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

[data-quiz-player].has-started:hover .qp-bar,
[data-quiz-player].has-started:focus-within .qp-bar,
[data-quiz-player].is-paused .qp-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Touch: a tap brings the bar up (script.js adds .show-controls). Two seconds
   without input while playing adds .is-idle, which hides the bar even under a
   resting mouse and takes the cursor with it. Pausing clears it. */
[data-quiz-player].has-started.show-controls .qp-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
[data-quiz-player].has-started.is-idle .qp-bar,
[data-quiz-player].has-started.is-idle:hover .qp-bar {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
[data-quiz-player].has-started.is-idle { cursor: none; }
/* Simple poster players hand over to native controls; the big button has to
   get out of the way the moment the clip plays. */
[data-simple-player].is-playing .qp-bigplay {
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

.qp-scrub {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qp-seek {
  flex: 1;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.qp-seek:focus { outline: none; }

/* Track. The gradient stop is the played fraction, published by script.js as
   --qp-p; Firefox gets the same fill from ::-moz-range-progress instead. */
.qp-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--lime) 0 var(--qp-p, 0%),
      rgba(255, 255, 255, 0.34) var(--qp-p, 0%) 100%
    );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.qp-seek::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.qp-seek::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--lime);
}
.qp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: var(--lime);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.qp-seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: var(--lime);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.qp-seek:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }
.qp-seek:focus-visible::-moz-range-thumb { outline: 2px solid #fff; outline-offset: 2px; }

.qp-time {
  flex: 0 0 auto;
  color: #fff;
  font-size: clamp(11.5px, 0.9vw, 13px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.qp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qp-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.qp-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 9px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.qp-btn svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.qp-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}

.qp-btn:active {
  transform: scale(0.92);
}

/* Speed menu */
.qp-settings-wrap {
  position: relative;
}

.qp-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 132px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 15, 19, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.qp-menu.open {
  display: flex;
}

.qp-menu-title {
  padding: 4px 10px 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.qp-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.qp-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.qp-menu button.active {
  color: var(--lime);
}

.qp-menu button.active::after {
  content: "✓";
  font-weight: 900;
}

@media (max-width: 720px) {
  .qp-btn {
    width: 34px;
    height: 34px;
  }
  .qp-btn svg {
    width: 19px;
    height: 19px;
  }
}

/* === Legal pages (privacy / terms) === */
.legal-page {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(46px, 7vw, 96px) clamp(20px, 5vw, 32px) clamp(80px, 10vw, 128px);
}
.legal-hero {
  padding-bottom: clamp(26px, 4vw, 40px);
  margin-bottom: clamp(34px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.legal-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime);
}
.legal-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 12px 1px rgba(244, 4, 80, 0.55);
}
.legal-page h1 {
  margin: 16px 0 0;
  font-size: clamp(34px, 6vw, 54px); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.025em; color: var(--white);
}
.legal-meta {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px 0 0; padding: 6px 14px;
  font-size: 13px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: 999px;
}
.legal-meta time { color: #d8dade; font-weight: 600; }
.legal-intro {
  margin: 24px 0 0; max-width: 68ch;
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.75; color: #c4c7ce;
}
.legal-body { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 58px); }
.legal-block h2 {
  position: relative; margin: 0 0 16px; padding-left: 18px;
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.015em; color: var(--white);
}
.legal-block h2::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 4px; border-radius: 4px; background: var(--lime);
}
.legal-block h3 {
  margin: 26px 0 10px; font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; color: #eceef2;
}
.legal-block p {
  margin: 0 0 14px; max-width: 72ch;
  font-size: 15.5px; line-height: 1.78; color: var(--muted);
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-note { font-size: 14px; color: #797d85; font-style: italic; }
.legal-block ul {
  list-style: none; margin: 4px 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.legal-block ul li {
  position: relative; padding-left: 28px; max-width: 72ch;
  font-size: 15px; line-height: 1.6; color: #c9ccd3;
}
.legal-block ul li::before {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 9px 0 rgba(244, 4, 80, 0.4);
}
.legal-block--deny ul li::before,
.legal-block ul.legal-deny li::before {
  content: "\00d7"; width: auto; height: auto; left: 4px; top: 0;
  background: none; box-shadow: none;
  color: var(--pink); font-size: 14px; font-weight: 800; line-height: 1.6;
}
.legal-quote {
  position: relative; overflow: hidden;
  margin: clamp(54px, 7vw, 84px) 0 0; padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, rgba(244, 4, 80, 0.045), rgba(255, 255, 255, 0.012));
}
.legal-quote::before {
  content: "\201C"; position: absolute; top: -18px; left: 16px;
  font-family: Georgia, "Times New Roman", serif; font-size: 130px; line-height: 1;
  color: rgba(244, 4, 80, 0.13);
}
.legal-quote blockquote {
  position: relative; margin: 0; max-width: 60ch;
  font-size: clamp(17px, 2vw, 21px); line-height: 1.6; font-style: italic; color: #eceef2;
}
.legal-quote figcaption {
  margin-top: 16px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--lime);
}


/* === Header action cluster: occlude cramped-nav overflow === */
@media (min-width: 1201px) {
  .header-actions {
    position: relative;
    z-index: 2;
    padding-left: clamp(12px, 1.4vw, 22px);
    background: rgba(8, 9, 11, 0.98);
  }
}

/* ============================================================
   GenieCheats universal layer — family hub, product switcher,
   coming-soon teasers. Framer-flavored dark/mono aesthetic.
   Per-product accents; MemGenie page keeps its own styling.
   ============================================================ */

.sg-page {
  --accent: var(--lime);
  --accent-ink: #2b0413;
  --mem: #f40450;
  --delta: #3d8bff;
  --quizlet: #4255ff;
  --blooket: #d946ef;
  --edpuzzle: #0d7de4;
  --sg-card: #101216;
  --sg-card-2: #0d0f13;
  --sg-line: rgba(255, 255, 255, 0.08);
  --sg-line-soft: rgba(255, 255, 255, 0.05);
}
.sg-page--mem   { --accent: var(--mem);   --accent-ink: #2b0413; }
.sg-page--delta { --accent: var(--delta); --accent-ink: #ffffff; }
.sg-page--quizlet { --accent: var(--quizlet); --accent-ink: #ffffff; }
.sg-page--blooket { --accent: var(--blooket); --accent-ink: #ffffff; }
.sg-page--edpuzzle { --accent: var(--edpuzzle); --accent-ink: #ffffff; }

/* ---- Universal brand wordmark ---- */
.sg-brand { gap: 12px; }
.sg-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--mem) 0%, var(--delta) 52%, var(--quizlet) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 6px 18px rgba(0, 0, 0, 0.5);
  position: relative;
}
.sg-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85) 0 1.6px, transparent 2px),
    radial-gradient(circle at 64% 62%, rgba(255, 255, 255, 0.55) 0 1.1px, transparent 1.6px);
}
.sg-wordmark {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.55vw, 27px);
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.sg-wordmark b {
  font-weight: 900;
  background: linear-gradient(92deg, var(--mem), var(--delta) 55%, var(--quizlet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Product switcher (the family taskbar element) ---- */
.sg-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px;
  border: 1px solid var(--sg-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.sg-switcher::-webkit-scrollbar { display: none; }
.sg-switcher a {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  padding: 8px 13px;
  border-radius: 10px;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.sg-switcher a:hover,
.sg-switcher a:focus-visible { color: var(--white); background: rgba(255, 255, 255, 0.05); }
.sg-switcher a[data-genie="mem"]:hover   { color: var(--mem); }
.sg-switcher a[data-genie="delta"]:hover { color: var(--delta); }
.sg-switcher a[data-genie="quizlet"]:hover   { color: var(--quizlet); }
.sg-switcher a.is-current { color: var(--accent-ink); background: var(--accent); font-weight: 600; }
.sg-page--mem   .sg-switcher a.is-current { color: #2b0413; }

/* ---- Shared eyebrow + section heads ---- */
.sg-eyebrow {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}
.sg-page--hub .sg-eyebrow { color: var(--delta); }
.sg-section-head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sg-section-head h2,
.sg-section-head h1 {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}
.sg-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.55;
}
.sg-grad {
  background: linear-gradient(92deg, var(--mem), var(--delta) 55%, var(--quizlet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Hub hero ---- */
.sg-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 12vh, 150px) clamp(20px, 5vw, 64px) clamp(60px, 9vh, 120px);
  text-align: center;
  border-bottom: 1px solid var(--sg-line);
}
.sg-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  z-index: 0;
}
.sg-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10, 12, 16, 0.2) 0%, rgba(5, 6, 7, 0.86) 62%, var(--black) 100%);
}
.sg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: sgFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sg-hero h1 {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.sg-hero-lede {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
}
.sg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}
.sg-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}
.sg-hero-stars { color: var(--mem); letter-spacing: 2px; }

@keyframes sgFadeUp {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---- Generic section wrappers ---- */
.sg-products,
.sg-engine,
.sg-steps,
.sg-faq {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
}
.sg-engine,
.sg-steps { border-top: 1px solid var(--sg-line); }

/* ---- Product cards ---- */
.sg-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sg-product-card {
  --card-accent: var(--mem);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--sg-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--card-accent) 14%, transparent) 0%, transparent 55%),
    var(--sg-card);
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.sg-product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent);
  opacity: 0.9;
}
.sg-product-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--sg-line));
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}
.sg-product-card--mem   { --card-accent: var(--mem); }
.sg-product-card--delta { --card-accent: var(--delta); }
.sg-product-card--quizlet   { --card-accent: var(--quizlet); }
.sg-product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sg-product-status {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--sg-line);
}
.sg-product-status.is-live {
  color: var(--accent-ink, #2b0413);
  color: #2b0413;
  background: var(--card-accent);
  border-color: transparent;
}
.sg-product-platform {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.sg-product-name {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--white);
}
.sg-product-copy {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.sg-product-feats {
  list-style: none;
  margin: 4px 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sg-product-feats li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: #cdd0d6;
  line-height: 1.4;
}
.sg-product-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--card-accent) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent) 45%, transparent) inset;
}
.sg-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 13px;
  font-weight: 800;
  font-size: 15px;
  color: #2b0413;
  background: var(--card-accent);
  transition: filter 160ms ease, transform 160ms ease;
}
.sg-product-card--delta .sg-product-cta,
.sg-product-card--quizlet .sg-product-cta { color: #fff; }
.sg-product-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sg-product-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---- Feature grid (shared engine / previews) ---- */
.sg-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sg-feature-card {
  padding: 28px;
  border: 1px solid var(--sg-line);
  border-radius: 18px;
  background: var(--sg-card-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset;
}
.sg-page--hub .sg-feature-icon {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px var(--sg-line) inset;
}
.sg-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-page--hub .sg-feature-icon svg { stroke: var(--delta); }
.sg-feature-card h3 {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--white);
}
.sg-feature-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---- Steps ---- */
.sg-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: sg-step;
}
.sg-step {
  padding: 28px;
  border: 1px solid var(--sg-line);
  border-radius: 18px;
  background: var(--sg-card-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-step-num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--delta);
  letter-spacing: 0.06em;
}
.sg-step h3 {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.sg-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---- Stats band ---- */
.sg-stats {
  border-top: 1px solid var(--sg-line);
  border-bottom: 1px solid var(--sg-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1240px;
  margin: 0 auto;
}
.sg-stat {
  padding: clamp(36px, 5vw, 60px) 20px;
  text-align: center;
  border-right: 1px solid var(--sg-line);
}
.sg-stat:last-child { border-right: 0; }
.sg-stat strong {
  display: block;
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.04em;
  color: var(--white);
}
.sg-stat span { color: var(--muted); font-size: 14px; }

/* ---- FAQ head (reuses existing .faq-list / .faq-item) ---- */
.sg-faq .faq-list { max-width: 820px; margin: 0 auto; }

/* ---- CTA band ---- */
.sg-cta {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--sg-line);
}
.sg-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--sg-line);
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%),
    var(--sg-card);
}
.sg-page--hub .sg-cta-inner {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(61, 139, 255, 0.14) 0%, transparent 60%),
    var(--sg-card);
}
.sg-cta-inner h2 {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}
.sg-cta-inner p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 19px); }

/* ---- Coming-soon hero ---- */
.sg-soon {
  position: relative;
  min-height: min(78vh, 720px);
  display: grid;
  place-items: center;
  padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px);
  text-align: center;
  border-bottom: 1px solid var(--sg-line);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
    var(--black);
}
.sg-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 75%);
  z-index: 0;
}
.sg-soon-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: sgFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sg-soon h1 {
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 8vw, 104px);
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0;
}
.sg-soon-lede { max-width: 620px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.55; }
.sg-soon-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; opacity: 0.85; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .sg-product-grid,
  .sg-feature-grid,
  .sg-step-list { grid-template-columns: 1fr 1fr; }
  .sg-stats { grid-template-columns: 1fr 1fr; }
  .sg-stat:nth-child(2) { border-right: 0; }
  .sg-stat:nth-child(1),
  .sg-stat:nth-child(2) { border-bottom: 1px solid var(--sg-line); }
}
@media (max-width: 760px) {
  .sg-product-grid,
  .sg-feature-grid,
  .sg-step-list { grid-template-columns: 1fr; }
  .sg-switcher a { padding: 7px 10px; }
  .sg-wordmark { font-size: 19px; }
}
@media (max-width: 460px) {
  .sg-wordmark { display: none; }
  .sg-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   GenieCheats v2 — compact taskbar, genie dropdown, buttons,
   motion. Overrides the earlier .sg-* header/switcher styles.
   ============================================================ */

/* ---- Compact header ---- */
.sg-header {
  min-height: 64px;
  padding: 10px clamp(14px, 2.2vw, 40px);
  gap: clamp(8px, 1.4vw, 20px);
  background: rgba(9, 10, 12, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--sg-line);
}
.sg-brandwrap {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-width: 0;
}
.sg-brand { gap: 9px; flex: 0 0 auto; }
.sg-mark { width: 30px; height: 30px; border-radius: 9px; }
.sg-wordmark { font-size: clamp(17px, 1.3vw, 21px); }

/* ---- Nav (pill items) ---- */
.sg-nav {
  gap: 2px;
  margin-inline: clamp(6px, 1.4vw, 16px) auto;
  font-family: "Geist", Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.sg-nav a {
  min-height: 0;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--muted);
  transition: color 150ms ease, background 150ms ease;
}
.sg-nav a:hover,
.sg-nav a:focus-visible { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.sg-nav-sep { width: 1px; height: 14px; background: var(--sg-line); margin: 0 5px; align-self: center; flex: 0 0 auto; }

/* ---- Actions ---- */
.sg-actions { gap: 8px; }
.sg-pricing {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 10px;
  color: var(--white); font-family: "Geist", Inter, sans-serif; font-weight: 600; font-size: 14px;
  transition: background 150ms ease;
}
.sg-pricing:hover { background: rgba(255, 255, 255, 0.06); }
.sg-discount {
  font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 6px; color: #2b0413; background: var(--mem);
}
.sg-actions-divider { width: 1px; height: 20px; background: var(--sg-line); margin: 0 3px; flex: 0 0 auto; }

/* Compact login/signup inside the taskbar (override tall MemGenie buttons) */
.sg-header .login-button,
.sg-header .signup-button {
  min-height: 36px; height: 36px; padding: 0 15px; border-radius: 10px;
  font-size: 14px; font-weight: 700;
}
.sg-header .login-button {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--sg-line);
  box-shadow: none;
}
.sg-header .login-button:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.sg-header .signup-button {
  color: #2b0413;
  background: linear-gradient(135deg, #ff3d70 0%, var(--mem) 52%, #c9033f 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 20px rgba(244, 4, 80, 0.24);
}

/* ---- Buttons (hero / CTA) ---- */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  padding: 0 26px;
  border-radius: 15px;
  font-family: "Geist", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 170ms ease, box-shadow 240ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease;
}
.sg-btn:hover { transform: translateY(-2px); }
.sg-btn:active { transform: translateY(0); }
.sg-btn-arrow {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms ease;
}
.sg-btn:hover .sg-btn-arrow { transform: translateX(4px); }
.sg-btn--lime { color: #fff; background: linear-gradient(135deg, #ff3d70, var(--mem) 52%, #c9033f); box-shadow: 0 12px 30px rgba(244, 4, 80, 0.28); }
.sg-btn--lime:hover { box-shadow: 0 18px 42px rgba(244, 4, 80, 0.42); filter: brightness(1.03); }
.sg-btn--accent { color: var(--accent-ink); background: var(--accent); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 34%, transparent); }
.sg-btn--accent:hover { filter: brightness(1.06); box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 48%, transparent); }
.sg-btn--ghost { color: var(--white); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--sg-line); }
.sg-btn--ghost:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.2); }
.sg-btn::before {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left 640ms ease;
  pointer-events: none;
}
.sg-btn--lime:hover::before,
.sg-btn--accent:hover::before { left: 135%; }

/* ---- Motion: scroll reveal + counters ---- */
.sg-anim .sg-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.sg-anim .sg-reveal.is-in { opacity: 1; transform: none; }
.sg-stat strong { font-variant-numeric: tabular-nums; }
.sg-product-card,
.sg-feature-card { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .sg-anim .sg-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .sg-hero-inner, .sg-soon-inner { animation: none !important; }
}

/* ---- Mobile taskbar tweaks ---- */
@media (max-width: 760px) {
  .sg-header { min-height: 58px; padding: 8px 14px; }
}
@media (max-width: 460px) {
  .sg-wordmark { display: none; }
}

/* ============================================================
   MemGenie plug-in hero (memgenie.html only) — scoped to
   .mg-plugin-hero so it never touches other pages.
   ============================================================ */
.mg-plugin-hero {
  position: relative;
  height: 260vh;
  background: #050607;
  --energy: #34e07a;
  --energy-soft: rgba(52, 224, 122, .55);
  --pf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.mg-plugin-hero .ph-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.mg-plugin-hero .ph-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mg-plugin-hero .ph-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(75% 60% at 62% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 60% at 62% 50%, #000 0%, transparent 78%);
  opacity: .5;
}
.mg-plugin-hero .ph-glow {
  position: absolute; left: 64%; top: 52%; width: 900px; height: 900px;
  transform: translate(-50%, -50%) scale(calc(.7 + var(--pw,0) * .5));
  background: radial-gradient(circle, var(--energy-soft) 0%, transparent 62%);
  opacity: calc(var(--pw,0) * .5); filter: blur(8px);
}
/* Soft fade at the bottom of the pinned stage so the green glow (and grid) melt
   into the base color instead of being hard-clipped by overflow:hidden. */
.mg-plugin-hero .ph-stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30vh;
  background: linear-gradient(180deg, transparent 0%, rgba(5,6,7,.7) 55%, var(--black) 100%);
  z-index: 1; pointer-events: none;
}

.mg-plugin-hero .ph-scene {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 76px);
  width: 100%;
  max-width: 1180px;
  padding: 96px clamp(20px, 5vw, 48px) 0;
}
.mg-plugin-hero .ph-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mg-plugin-hero .ph-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--lime);
}
.mg-plugin-hero .ph-title {
  font-family: 'Geist', Inter, system-ui, sans-serif;
  font-weight: 900; font-size: clamp(44px, 5.4vw, 82px); letter-spacing: -.05em; line-height: .96;
  text-transform: uppercase; margin: 0; color: #fff;
}
.mg-plugin-hero .ph-title .ph-on { transition: color .5s ease, text-shadow .5s ease; color: #3a3f4a; }
.mg-plugin-hero.is-lit .ph-title .ph-on { color: var(--energy); text-shadow: 0 0 30px var(--energy-soft); }
.mg-plugin-hero .ph-sub {
  max-width: 440px; margin: 0; color: var(--muted);
  font-family: var(--pf); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
}
.mg-plugin-hero .ph-cta { margin-top: 8px; }

.mg-plugin-hero .ph-panel-wrap { position: relative; will-change: transform, opacity; justify-self: center; }

/* cable */
.mg-plugin-hero .ph-cable { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mg-plugin-hero .ph-core { fill: none; stroke: #3b4048; stroke-width: 4; stroke-linecap: round; transition: stroke .45s ease; }
.mg-plugin-hero .ph-cglow { fill: none; stroke: var(--energy); stroke-width: 7; stroke-linecap: round; opacity: 0; filter: blur(5px); transition: opacity .5s ease; }
.mg-plugin-hero.is-lit .ph-core { stroke: var(--energy); }
.mg-plugin-hero.is-lit .ph-cglow { opacity: .85; }
.mg-plugin-hero .ph-plug path, .mg-plugin-hero .ph-plug rect { fill: #2b2f37; stroke: #454b55; stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease; }
.mg-plugin-hero.is-lit .ph-plug path, .mg-plugin-hero.is-lit .ph-plug rect { fill: #14361f; stroke: var(--energy); }
.mg-plugin-hero .ph-spark { fill: #eafff2; opacity: 0; }

/* popup (rebuilt from the extension source) */
.mg-plugin-hero .ph-pop {
  position: relative; width: 360px; background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.18);
  font-family: var(--pf); filter: grayscale(.55) brightness(.9) saturate(.7);
  transition: filter .6s ease, box-shadow .6s ease;
}
.mg-plugin-hero .ph-pop.is-live { filter: none; box-shadow: 0 26px 74px -14px rgba(52,224,122,.34), 0 0 0 1px rgba(52,224,122,.16), 0 2px 8px rgba(0,0,0,.2); }
.mg-plugin-hero .ph-port { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 30px; height: 12px; border-radius: 5px 5px 3px 3px; background: #d7dbe1; border: 1px solid #c4c9d1; transition: background .4s, box-shadow .4s, border-color .4s; }
.mg-plugin-hero .ph-pop.is-live .ph-port { background: var(--energy); border-color: var(--energy); box-shadow: 0 0 16px var(--energy-soft); }
.mg-plugin-hero .pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mg-plugin-hero .pop-brand { display: flex; align-items: center; gap: 12px; }
.mg-plugin-hero .pop-logo { width: 96px; height: auto; display: block; }
.mg-plugin-hero .pop-badge { background: #8b5cf6; color: #fff; font: 700 12px var(--pf); padding: 2px 7px; border-radius: 4px; letter-spacing: .02em; }
.mg-plugin-hero .pop-avatar { width: 32px; height: 32px; border-radius: 50%; border: none; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg,#c7d2fe,#a5b4fc); color: #4b5563; }
.mg-plugin-hero .pop-avatar svg { width: 20px; height: 20px; }
.mg-plugin-hero .pop-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.mg-plugin-hero .pop-row { display: flex; align-items: center; justify-content: space-between; border-radius: 12px; border-left: 4px solid #22c55e; background: #f3f4f6; padding: 12px 16px; }
.mg-plugin-hero .pop-row--quiz { border-left-color: #3b82f6; box-shadow: 0 0 0 1px rgba(59,130,246,.15), 0 0 12px 0 rgba(59,130,246,.18); }
.mg-plugin-hero .pop-row-left { display: flex; align-items: center; gap: 8px; }
.mg-plugin-hero .pop-row-label { font: 500 12px var(--pf); color: #111827; }
.mg-plugin-hero .pop-help { width: 16px; height: 16px; border-radius: 50%; background: #d1d5db; color: #4b5563; font: 600 11px var(--pf); display: grid; place-items: center; }
.mg-plugin-hero .tgl { position: relative; width: 44px; height: 24px; flex-shrink: 0; border-radius: 500px; background: #d2d2d2; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); transition: background .3s ease; }
.mg-plugin-hero .ph-pop.is-live .tgl { background: #22c55e; }
.mg-plugin-hero .tgl-i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 1.5px; height: 9px; background: rgba(255,255,255,.85); border-radius: 1px; transition: opacity .25s; }
.mg-plugin-hero .tgl-o { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); transition: opacity .25s; }
.mg-plugin-hero .ph-pop.is-live .tgl-i, .mg-plugin-hero .ph-pop.is-live .tgl-o { opacity: 0; }
.mg-plugin-hero .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg,#fff,#d1d1d1); box-shadow: 0 .8px 1.2px -.6px rgba(0,0,0,.26), 0 2.1px 3px -1.25px rgba(0,0,0,.25), 0 4.2px 5.9px -1.9px rgba(0,0,0,.24), 0 8px 11px -2.5px rgba(0,0,0,.22), 0 16px 22px -3px rgba(0,0,0,.16); display: grid; place-items: center; transition: left .3s cubic-bezier(.4,0,.2,1); }
.mg-plugin-hero .ph-pop.is-live .knob { left: calc(100% - 22px); }
.mg-plugin-hero .knob-face { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(180deg,#f2f2f2,#e4e4e4); }
.mg-plugin-hero .pop-row:nth-of-type(2) .knob, .mg-plugin-hero .pop-row:nth-of-type(2) .tgl { transition-delay: .1s; }
.mg-plugin-hero .pop-row:nth-of-type(3) .knob, .mg-plugin-hero .pop-row:nth-of-type(3) .tgl { transition-delay: .2s; }
.mg-plugin-hero .pop-tiles { display: flex; align-items: flex-start; justify-content: center; gap: 24px; margin-bottom: 22px; }
.mg-plugin-hero .pop-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6b7280; }
.mg-plugin-hero .pop-tile-ic { position: relative; display: flex; }
.mg-plugin-hero .pop-tile-ic svg { width: 20px; height: 20px; }
.mg-plugin-hero .pop-tile-ic .dot { position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #eab308; }
.mg-plugin-hero .pop-tile-label { font: 400 12px var(--pf); }
.mg-plugin-hero .pop-tile-prem { display: inline-flex; align-items: center; gap: 3px; border-radius: 4px; padding: 0 4px; background: #e5e7eb; color: #374151; font: 500 11px var(--pf); }
.mg-plugin-hero .pop-tile-prem svg { width: 12px; height: 12px; color: #eab308; }
.mg-plugin-hero .pop-dash { position: relative; margin-top: 16px; border-radius: 12px; overflow: hidden; padding: 1.5px; box-shadow: 0 0 16px 2px rgba(99,102,241,.28), 0 0 5px 0 rgba(139,92,246,.18); }
.mg-plugin-hero .pop-dash-aura { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: conic-gradient(from 0deg, transparent 0%, #3730a3 20%, #818cf8 35%, transparent 50%); animation: ph-aura-spin 3s linear infinite; z-index: 0; }
.mg-plugin-hero .pop-dash-inner { position: relative; z-index: 1; width: 100%; height: 52px; background: radial-gradient(90px at 80% -20%, rgba(255,255,255,.1), #0a0c16 64%); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.mg-plugin-hero .pop-dash-shim { position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }
.mg-plugin-hero .pop-dash-inner svg { width: 15px; height: 15px; stroke: #6366f1; }
.mg-plugin-hero .pop-dash-text { font: 600 13px 'Geist Mono', monospace; color: #a5b4fc; letter-spacing: .06em; white-space: nowrap; }
.mg-plugin-hero .pop-count { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; padding: 10px 16px; background: #f0fdf4; border: 1px solid #dcfce7; }
.mg-plugin-hero .pop-count-label { font: 500 12px var(--pf); color: #4b5563; }
.mg-plugin-hero .pop-count-val { font: 700 14px var(--pf); color: #15803d; font-variant-numeric: tabular-nums; }

@keyframes ph-aura-spin { to { transform: rotate(360deg); } }
@keyframes ph-port-flash { 0% { box-shadow: 0 0 0 0 var(--energy-soft); } 100% { box-shadow: 0 0 0 22px transparent; } }
.mg-plugin-hero .ph-pop.just-connected .ph-port { animation: ph-port-flash .7s ease-out; }

/* scroll hint */
.mg-plugin-hero .ph-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: calc(1 - var(--pw,0) * 2); transition: opacity .3s; }
.mg-plugin-hero .ph-hint svg { width: 16px; height: 16px; animation: ph-bob 1.6s ease-in-out infinite; }
@keyframes ph-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 900px) {
  .mg-plugin-hero { height: 260vh; }
  .mg-plugin-hero .ph-scene { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; padding-top: 84px; }
  .mg-plugin-hero .ph-copy { align-items: center; }
  .mg-plugin-hero .ph-sub { max-width: 420px; }
  .mg-plugin-hero .ph-glow { left: 50%; }
  .mg-plugin-hero .ph-grid { -webkit-mask-image: radial-gradient(70% 55% at 50% 56%, #000 0%, transparent 78%); mask-image: radial-gradient(70% 55% at 50% 56%, #000 0%, transparent 78%); }
}
@media (max-width: 420px) {
  .mg-plugin-hero .ph-pop { width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-plugin-hero .pop-dash-aura { animation: none; }
}

/* Panel entrance (plays on load so the extension is already "dropped" at rest) */
.mg-plugin-hero .ph-panel-wrap { animation: ph-drop 1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ph-drop { from { opacity: 0; transform: translateY(-140px) scale(.96); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .mg-plugin-hero .ph-panel-wrap { animation: none; } }

/* Plug-in hero — mobile fit (keep the whole scene inside one viewport) */
@media (max-width: 900px) {
  .mg-plugin-hero .ph-scene { gap: 16px; padding-top: 62px; }
  .mg-plugin-hero .ph-copy { gap: 12px; }
  .mg-plugin-hero .ph-title { font-size: clamp(34px, 8.6vw, 50px); line-height: 1; }
  .mg-plugin-hero .ph-sub { display: none; }
  .mg-plugin-hero .ph-pop { padding: 18px; }
  .mg-plugin-hero .pop-head { margin-bottom: 12px; }
  .mg-plugin-hero .pop-rows { gap: 12px; margin-bottom: 16px; }
  .mg-plugin-hero .pop-tiles { margin-bottom: 16px; }
  .mg-plugin-hero .ph-hint { display: none; }
}

/* Plug-in hero — compact CTAs on mobile so the panel isn't pushed off-screen */
@media (max-width: 900px) {
  .mg-plugin-hero .ph-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
  .mg-plugin-hero .ph-cta .primary-cta,
  .mg-plugin-hero .ph-cta .signup-cta { min-height: 46px; height: 46px; padding: 0 16px; font-size: 14px; }
  .mg-plugin-hero .ph-cta .cta-chrome-icon img { width: 18px; height: 18px; }
}

/* Headline separator */
.mg-plugin-hero .ph-title .ph-sep { color: #464b56; font-weight: 400; }

/* "This is what the extension looks like" — handwritten label + flowing dotted arrow */
.mg-plugin-hero .ph-annot {
  position: absolute;
  bottom: calc(100% - 34px);
  right: calc(100% - 92px);
  width: 208px;
  display: flex; flex-direction: column; align-items: flex-end;
  z-index: 5; pointer-events: none;
  opacity: calc(1 - var(--pw, 0) * .8);
  transition: opacity .3s ease;
}
.mg-plugin-hero .ph-annot-text {
  margin: 0 8px 0 0;
  font-family: 'Caveat', ui-rounded, cursive;
  font-weight: 600; font-size: 23px; line-height: 1.12;
  text-align: right; color: #e4e8ee; max-width: 196px;
}
.mg-plugin-hero .ph-annot-arrow { width: 116px; height: 68px; margin: 0 -4px -8px 0; overflow: visible; }
.mg-plugin-hero .ph-annot-line {
  stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 0.1 9;
  animation: ph-flow 1.05s linear infinite;
}
.mg-plugin-hero .ph-annot-head { stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ph-flow { to { stroke-dashoffset: -18.2; } }

@media (max-width: 900px) {
  .mg-plugin-hero .ph-cta { display: none; }
  /* Mobile: label sits BELOW the extension with the arrow pointing up at it */
  .mg-plugin-hero .ph-annot {
    right: auto; bottom: auto;
    top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    width: 300px;
    flex-direction: column-reverse; align-items: center; gap: 2px;
    /* label lives below the panel (below the fold) so keep it legible instead
       of fading it out on scroll like the desktop side-label */
    opacity: 1;
  }
  .mg-plugin-hero .ph-annot-text { text-align: center; font-size: 20px; max-width: 300px; margin: 0; }
  .mg-plugin-hero .ph-annot-arrow { transform: rotate(-122deg); width: 78px; height: 48px; margin: 0 0 2px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-plugin-hero .ph-annot-line { animation: none; }
}

/* Plug-in hero — mobile: pull the panel up so there is room BELOW it for the
   label, and leave a little breathing space before the next section */
@media (max-width: 900px) {
  .mg-plugin-hero .ph-scene { gap: 20px; padding-top: 20px; padding-bottom: 128px; }
  .mg-plugin-hero .ph-title { font-size: clamp(28px, 7.2vw, 40px); }
  .mg-plugin-hero .ph-annot { width: 288px; }
  .mg-plugin-hero .ph-annot-text { font-size: 19px; }
  .mg-plugin-hero .ph-annot-arrow { width: 78px; height: 48px; }
}

/* ============================================================
   Logo product switcher (replaces wordmark + dot pill).
   The current product's logo shows statically; one caret opens
   the dropdown.
   ============================================================ */
.sg-brandwrap { gap: 7px; }
.sg-logo-link { display: flex; align-items: center; flex: 0 0 auto; }
/* One mark for the whole site. This used to be a four-logo filmstrip that
   the page's product class slid up by 25% steps; with a single logo there is
   nothing to slide, so the reel, the strip and those transforms are gone. */
.sg-logo-mark {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* The mark alone was too quiet at header size, so the logo is a lockup: tile
   plus name. Set in Geist uppercase to match the plan-card titles on the
   pricing page — same weight, same tight tracking. */
.sg-logo-link,
a.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
/* Wordmark as artwork rather than type, cut from the supplied GenieCheats
   lockup. It replaces .sg-logo-word and with it the crimson gradient on the
   tail of the name. Kept as a separate image from the mark on purpose: in the
   supplied lockup the wordmark is only 18.8% of the artwork height, so
   dropping the whole thing into a 38px header would render the name at about
   7px. Split, the header keeps its own proportions — 38px mark, 22px name. */
.sg-logo-word-img {
  display: block;
  height: 22px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}
@media (max-width: 900px) { .sg-logo-word-img { height: 19px; } }
/* Phones keep the name too — 16px tall, ~142px wide, which still clears the
   hamburger at 320px. (It was hidden here until 2026-09-10; the owner asked
   for it back.) */
@media (max-width: 560px) { .sg-logo-word-img { height: 16px; } }

.sg-logo-word {
  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
/* A little warmth on the tail of the word — white for most of it, easing into
   the brand crimson over the last third. Behind @supports because without
   background-clip the transparent fill would leave the name invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sg-logo-word {
    background: linear-gradient(96deg, #fff 0%, #fff 64%, #ffa8bf 86%, #ff5c84 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* The bar is tight on phones; the mark alone carries it there. */
@media (max-width: 560px) {
  .sg-logo-word { display: none; }
}

@media (max-width: 760px) {
  .sg-logo-mark { width: 34px; height: 34px; }
}

.sg-logo-mark { width: 54px; height: 54px; }
@media (max-width: 760px) {
  .sg-logo-mark { width: 46px; height: 46px; }
}

/* ---- Logo mark living inside the restored classic grid header ----
   It replaces the static .brand, so it takes the brand's grid slot. The mark
   is square and small, so it no longer needs the per-breakpoint shrinking the
   wide reel did to stay clear of the Login / Sign up buttons. */
header.site-header .sg-brandwrap { grid-column: 1; grid-row: 1; align-self: center; }
@media (max-width: 540px) {
  header.site-header .sg-logo-mark { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  header.site-header .sg-logo-mark { width: 34px; height: 34px; }
}

/* ============================================================
   BLOG / LONG-FORM RESOURCE LAYOUT  (.blog-*)
   Adapted from the SkipDelta blog style, branded to MemGenie.
   Two-column article + sticky TOC + reading-progress bar.
   Scoped strictly under .blog-* so it never leaks to other pages.
   ============================================================ */
.blog-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(72px, 8vh, 96px) 20px 72px;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 14px;
  transition: color .18s ease;
}

/* Lede banner image — first meaningful visual, kept high on the page */
.blog-lede-img {
  margin: 2px 0 6px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05070a;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
}
.blog-lede-img img { display: block; width: 100%; height: auto; }
.blog-back:hover { color: var(--white); }
.blog-back svg { width: 16px; height: 16px; }

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ---- Article card ---- */
.blog-article {
  background: linear-gradient(160deg, rgba(28, 30, 36, .55), rgba(9, 10, 12, .55));
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 52px);
}

.blog-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(244, 4, 80, .1);
  border: 1px solid rgba(244, 4, 80, .28);
  color: var(--lime);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 22px;
}
.blog-badge svg { width: 15px; height: 15px; }

.blog-title {
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.blog-title .lit { color: var(--lime); }

.blog-lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: #c8cad0;
  margin: 0 0 30px;
}

/* ---- Byline + share ---- */
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 30px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.blog-byline { display: flex; align-items: center; gap: 14px; }
.blog-avatar {
  width: 46px; height: 46px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  color: var(--lime-deep);
  background: radial-gradient(circle at 30% 25%, #e6ff66, var(--lime));
  box-shadow: 0 0 0 1px rgba(244, 4, 80, .3), 0 8px 22px rgba(244, 4, 80, .18);
}
.blog-author { font-weight: 700; font-size: 15px; }
.blog-byline .blog-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.blog-share { display: flex; align-items: center; gap: 10px; }
.blog-share span { color: var(--muted); font-size: 13px; }
.blog-share a {
  width: 34px; height: 34px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  transition: background .18s ease, transform .18s ease;
}
.blog-share a:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.blog-share svg { width: 16px; height: 16px; fill: #cfd1d6; }

/* ---- Featured figure ---- */
.blog-figure {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  margin-bottom: 40px;
}
.blog-figure video, .blog-figure img {
  display: block; width: 100%; height: auto;
}

/* ---- Prose ---- */
.blog-prose { font-size: 16.5px; line-height: 1.72; color: #c3c6cc; }
.blog-prose h2 {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 44px 0 16px;
  scroll-margin-top: 100px;
}
.blog-prose h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  margin: 30px 0 12px;
}
.blog-prose p { margin: 0 0 18px; }
.blog-prose strong { color: var(--white); font-weight: 700; }
.blog-prose a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.blog-prose a:hover { text-decoration: none; }
.blog-prose > *:first-child { margin-top: 0; }

/* callout card */
.blog-callout {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
  margin: 8px 0 26px;
}
.blog-callout h3 { margin: 0 0 14px; }
.blog-callout ul { margin: 0; padding: 0; list-style: none; }
.blog-callout li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.blog-callout li::before {
  content: "•"; position: absolute; left: 2px; color: var(--lime); font-weight: 700;
}
.blog-callout li:last-child { margin-bottom: 0; }

/* numbered step card */
.blog-step {
  background: linear-gradient(150deg, rgba(244, 4, 80, .08), rgba(244, 4, 80, .02));
  border: 1px solid rgba(244, 4, 80, .2);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 0 0 18px;
}
.blog-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.blog-step-num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--lime); color: var(--lime-deep);
  font-weight: 800; font-size: 15px;
}
.blog-step-head h3 { margin: 0; }
.blog-step p { margin: 0; padding-left: 48px; }

/* feature / subject grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 26px;
}
.blog-grid-card {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.blog-grid-card h4 { margin: 0 0 6px; font-size: 15.5px; color: var(--white); font-weight: 700; }
.blog-grid-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* checkmark list card */
.blog-checks {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 28px;
  margin: 8px 0 26px;
}
.blog-checks ul { margin: 0; padding: 0; list-style: none; }
.blog-checks li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 15px;
}
.blog-checks li:last-child { margin-bottom: 0; }
.blog-checks svg { flex: none; width: 20px; height: 20px; fill: var(--lime); margin-top: 1px; }

/* testimonials */
.blog-quote {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.blog-quote p { margin: 0 0 8px; font-style: italic; color: #d3d5da; }
.blog-quote cite { color: var(--muted); font-size: 13px; font-style: normal; }

/* ---- bottom CTA card ---- */
.blog-cta {
  margin-top: 44px;
  text-align: center;
  background: linear-gradient(160deg, rgba(28, 30, 36, .6), rgba(9, 10, 12, .6));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(30px, 5vw, 52px);
}
.blog-cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(244, 4, 80, .1); border: 1px solid rgba(244, 4, 80, .28);
  color: var(--lime); font-size: 13px; font-weight: 600; margin-bottom: 20px;
}
.blog-cta-pill svg { width: 15px; height: 15px; fill: var(--lime); }
.blog-cta h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.02em; }
.blog-cta p { color: #c3c6cc; font-size: 17px; line-height: 1.5; margin: 0 auto 10px; max-width: 560px; }
.blog-cta .blog-cta-sub { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.blog-cta-btn {
  display: inline-block;
  background: var(--lime); color: var(--lime-deep);
  font-weight: 800; font-size: 16px;
  padding: 15px 34px; border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 30px rgba(244, 4, 80, .22);
}
.blog-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(244, 4, 80, .32); }

/* ---- Sidebar ---- */
.blog-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.blog-side-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px;
}
.blog-side-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--white); }
.blog-toc-nav { display: flex; flex-direction: column; gap: 4px; }
.blog-toc-nav a {
  display: block;
  font-size: 13.5px; line-height: 1.4;
  color: var(--muted);
  padding: 6px 10px; border-radius: 8px;
  border-left: 2px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.blog-toc-nav a:hover { color: var(--white); background: rgba(255, 255, 255, .04); }
.blog-toc-nav a.is-active {
  color: var(--lime);
  border-left-color: var(--lime);
  background: rgba(244, 4, 80, .06);
}
.blog-toc-btn {
  display: block; text-align: center;
  margin-top: 16px; padding: 12px;
  background: var(--lime); color: var(--lime-deep);
  border-radius: 10px; font-weight: 800; font-size: 14px;
  transition: transform .18s ease;
}
.blog-toc-btn:hover { transform: translateY(-1px); }

.blog-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.blog-progress-head span:first-child { color: var(--muted); font-size: 13px; }
.blog-progress-pct { color: var(--lime); font-size: 13px; font-weight: 600; }
.blog-progress-track { width: 100%; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.blog-progress-fill {
  height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime), #e6ff66);
  transition: width .12s linear;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  /* minmax(0, …), not 1fr: a bare 1fr track is minmax(auto, 1fr), and `auto`
     resolves to the column's min-content width. The DeltaMath guides carry a
     560px .blog-table, so the track grew to 600px inside a 335px phone and the
     whole article — title, lede, CTA — ran 245px off the right edge. The table
     already sits in an overflow-x wrapper; this lets that wrapper do its job.
     The desktop rule above uses minmax(0, 2fr) for the same reason. */
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
  .blog-aside { display: none; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-step p { padding-left: 0; }
  .blog-meta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   EXTENSION EXPLAINER  (.exr-*)  — scroll-revealed annotated
   mockup of the real MemGenie popup. Desktop: callout lines
   draw to each control. Mobile: highlighted checklist below.
   Scoped strictly under .exr — no leakage.
   ============================================================ */
.exr {
  --pf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --en: #34e07a;
  position: relative;
  margin: 6px calc(-1 * clamp(24px, 4vw, 52px)) 42px;
  padding: 10px clamp(14px, 3vw, 34px) 0;
}
.exr-stage {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG connector overlay */
.exr-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.exr-lines path { fill: none; stroke: rgba(244, 4, 80, .6); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.exr-lines path.on { stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease; }
.exr-lines circle { fill: var(--lime); opacity: 0; transition: opacity .3s ease .35s; }
.exr-lines circle.on { opacity: 1; }

/* ---- Popup card (re-scoped copy of the real extension UI) ---- */
.exr-pop {
  position: relative; z-index: 3;
  width: 300px; max-width: 100%;
  background: #fff; border-radius: 16px; padding: 18px;
  font-family: var(--pf); color: #111827;
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .3);
  transition: box-shadow .6s ease;
}
.exr-pop.live { box-shadow: 0 30px 76px -18px rgba(52, 224, 122, .3), 0 0 0 1px rgba(52, 224, 122, .16), 0 2px 8px rgba(0, 0, 0, .3); }
.exr-pop .pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.exr-pop .pop-brand { display: flex; align-items: center; gap: 12px; }
.exr-pop .pop-logo { width: 88px; height: auto; display: block; }
.exr-pop .pop-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #c7d2fe, #a5b4fc); color: #4b5563; }
.exr-pop .pop-avatar svg { width: 18px; height: 18px; }
.exr-pop .pop-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.exr-pop .pop-row { display: flex; align-items: center; justify-content: space-between; border-radius: 12px; border-left: 4px solid #22c55e; background: #f3f4f6; padding: 11px 14px; transition: box-shadow .4s ease; }
.exr-pop .pop-row--quiz { border-left-color: #3b82f6; }
.exr-pop .pop-row.lit { box-shadow: 0 0 0 1px rgba(34, 197, 94, .2), 0 0 14px 0 rgba(34, 197, 94, .16); }
.exr-pop .pop-row--quiz.lit { box-shadow: 0 0 0 1px rgba(59, 130, 246, .22), 0 0 14px 0 rgba(59, 130, 246, .2); }
.exr-pop .pop-row-left { display: flex; align-items: center; gap: 8px; }
.exr-pop .pop-row-label { font: 500 12px var(--pf); color: #111827; }
.exr-pop .pop-help { width: 16px; height: 16px; border-radius: 50%; background: #d1d5db; color: #4b5563; font: 600 11px var(--pf); display: grid; place-items: center; }
/* toggle: default OFF, lights green when its annotation reveals */
.exr-pop .tgl { position: relative; width: 44px; height: 24px; flex-shrink: 0; border-radius: 500px; background: #d2d2d2; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); transition: background .35s ease; }
.exr-pop .tgl.lit { background: #22c55e; }
.exr-pop .pop-row--quiz .tgl.lit { background: #3b82f6; }
.exr-pop .tgl-i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 1.5px; height: 9px; background: rgba(255, 255, 255, .85); border-radius: 1px; transition: opacity .25s; }
.exr-pop .tgl-o { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); transition: opacity .25s; }
.exr-pop .tgl.lit .tgl-i, .exr-pop .tgl.lit .tgl-o { opacity: 0; }
.exr-pop .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #fff, #d1d1d1); box-shadow: 0 2px 3px -1px rgba(0, 0, 0, .25), 0 6px 10px -2px rgba(0, 0, 0, .2); display: grid; place-items: center; transition: left .35s cubic-bezier(.4, 0, .2, 1); }
.exr-pop .tgl.lit .knob { left: calc(100% - 22px); }
.exr-pop .knob-face { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(180deg, #f2f2f2, #e4e4e4); }
.exr-pop .pop-tiles { display: flex; align-items: flex-start; justify-content: center; gap: 22px; margin-bottom: 18px; }
.exr-pop .pop-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #9ca3af; transition: color .35s ease; }
.exr-pop .pop-tile.lit { color: #111827; }
.exr-pop .pop-tile-ic { position: relative; display: flex; }
.exr-pop .pop-tile-ic svg { width: 20px; height: 20px; transition: stroke .35s ease; }
.exr-pop .pop-tile.lit .pop-tile-ic svg { stroke: #16a34a; }
.exr-pop .pop-tile-ic .dot { position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #eab308; }
.exr-pop .pop-tile-label { font: 400 12px var(--pf); }
.exr-pop .pop-tile-prem { display: inline-flex; align-items: center; gap: 3px; border-radius: 4px; padding: 0 4px; background: #e5e7eb; color: #374151; font: 500 11px var(--pf); }
.exr-pop .pop-tile.lit .pop-tile-prem { background: #fef3c7; color: #92400e; }
.exr-pop .pop-tile-prem svg { width: 12px; height: 12px; color: #eab308; }
.exr-pop .pop-dash { position: relative; margin-top: 14px; border-radius: 12px; overflow: hidden; padding: 1.5px; box-shadow: 0 0 16px 2px rgba(99, 102, 241, .28); }
.exr-pop .pop-dash-aura { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: conic-gradient(from 0deg, transparent 0%, #3730a3 20%, #818cf8 35%, transparent 50%); animation: ph-aura-spin 3s linear infinite; z-index: 0; }
.exr-pop .pop-dash-inner { position: relative; z-index: 1; width: 100%; height: 50px; background: radial-gradient(90px at 80% -20%, rgba(255, 255, 255, .1), #0a0c16 64%); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.exr-pop .pop-dash-shim { position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }
.exr-pop .pop-dash-inner svg { width: 15px; height: 15px; stroke: #6366f1; }
.exr-pop .pop-dash-text { font: 600 12.5px 'Geist Mono', ui-monospace, monospace; color: #a5b4fc; letter-spacing: .06em; white-space: nowrap; }
.exr-pop .pop-count { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; padding: 9px 14px; background: #f0fdf4; border: 1px solid #dcfce7; }
.exr-pop .pop-count-label { font: 500 12px var(--pf); color: #4b5563; }
.exr-pop .pop-count-val { font: 700 14px var(--pf); color: #15803d; font-variant-numeric: tabular-nums; }

/* ---- Floating annotation notes (desktop) ---- */
.exr-note {
  position: absolute; width: 158px; z-index: 4;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.exr-note.on { opacity: 1; transform: none; }
.exr-note[data-side="left"] { left: 0; text-align: right; }
.exr-note[data-side="right"] { right: 0; text-align: left; }
.exr-note.s-a { top: 3%; }
.exr-note.s-b { top: 38%; }
.exr-note.s-c { top: 71%; }
.exr-note .exr-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--lime-deep); font: 800 12px var(--pf); margin-bottom: 7px; }
.exr-note h4 { margin: 0 0 3px; font: 700 13.5px var(--pf); color: #fff; letter-spacing: -0.01em; }
.exr-note p { margin: 0; font: 400 12px/1.45 var(--pf); color: var(--muted); }

/* ---- Mobile checklist (hidden on desktop) ---- */
.exr-list { display: none; }
@media (max-width: 760px) {
  .exr { margin-left: calc(-1 * clamp(16px, 4vw, 52px)); margin-right: calc(-1 * clamp(16px, 4vw, 52px)); padding: 4px clamp(16px, 4vw, 24px) 0; }
  .exr-stage { min-height: 0; display: block; }
  .exr-lines, .exr-note { display: none; }
  .exr-pop { margin: 0 auto; width: 290px; }
  .exr-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }
  .exr-li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); opacity: .4; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, border-color .45s ease, background .45s ease; }
  .exr-li.on { opacity: 1; transform: none; border-color: rgba(244, 4, 80, .3); background: rgba(244, 4, 80, .05); }
  .exr-li .exr-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--lime-deep); font: 800 12px var(--pf); }
  .exr-li h4 { margin: 0 0 3px; font: 700 14px var(--pf); color: #fff; }
  .exr-li p { margin: 0; font: 400 13px/1.5 var(--pf); color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .exr-note, .exr-li, .exr-lines path, .exr-lines circle { transition: none; }
}

/* ---- Step media (image / video inside blog-step) ---- */
.blog-step-media {
  margin: 14px 0 2px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05070a;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7);
}
.blog-step-media img, .blog-step-media video { display: block; width: 100%; height: auto; }
.blog-step-cap { margin: 8px 0 0 !important; padding-left: 0 !important; font-size: 12.5px !important; color: var(--muted) !important; }

/* ---- Interactive accuracy + timing controls (.mgctl) ---- */
.mgctl {
  --pf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin: 16px 0 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mgctl-card {
  border-radius: 14px;
  border-left: 4px solid #22c55e;
  background: rgba(31, 41, 55, .55);
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-right: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  padding: 16px 18px;
}
.mgctl-card h4 { margin: 0 0 16px; font: 600 14px var(--pf); color: #fff; }
.mgctl-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mgctl-label { display: flex; align-items: center; gap: 8px; font: 400 13px var(--pf); color: #d1d5db; }
.mgctl-help { width: 16px; height: 16px; border-radius: 50%; background: #4b5563; color: #d1d5db; font: 600 11px var(--pf); display: grid; place-items: center; cursor: help; }
.mgctl-val { font: 600 14px var(--pf); color: #fff; font-variant-numeric: tabular-nums; }
.mgctl-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 9999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #22c55e 0%, #22c55e var(--fill, 100%), #374151 var(--fill, 100%), #374151 100%);
}
.mgctl-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px #0c0e12, 0 0 0 5px rgba(34, 197, 94, .22); cursor: pointer; transition: box-shadow .15s ease; }
.mgctl-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 3px #0c0e12, 0 0 0 7px rgba(34, 197, 94, .35); }
.mgctl-slider::-webkit-slider-thumb:active { box-shadow: 0 0 0 3px #0c0e12, 0 0 0 9px rgba(34, 197, 94, .4); }
.mgctl-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #22c55e; border: 3px solid #0c0e12; cursor: pointer; }
.mgctl-ticks { display: flex; justify-content: space-between; margin-top: 7px; }
.mgctl-ticks span { font: 400 10px var(--pf); color: #6b7280; transition: color .15s ease; }
.mgctl-ticks span.on { font-weight: 600; color: #22c55e; }
.mgctl-note {
  grid-column: 1 / -1;
  margin: 4px 0 2px !important;
  padding: 12px 14px !important;
  border-radius: 12px;
  font: 400 13px/1.5 var(--pf) !important;
  border: 1px solid rgba(34, 197, 94, .28);
  background: rgba(34, 197, 94, .08);
  color: #c9ccd2 !important;
  transition: border-color .25s ease, background .25s ease;
}
.mgctl-note b { color: #fff; font-weight: 700; }
.mgctl-note.warn { border-color: rgba(234, 179, 8, .4); background: rgba(234, 179, 8, .1); }
.mgctl-note.warn b { color: #fde047; }
@media (max-width: 560px) {
  .mgctl { grid-template-columns: 1fr; }
}

/* Pill above the extension explainer */
.exr-pill { display: flex; justify-content: center; margin-bottom: 20px; }
.exr-pill span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(244, 4, 80, .09);
  border: 1px solid rgba(244, 4, 80, .3);
  color: var(--lime);
  font: 700 13px var(--pf);
  letter-spacing: .01em;
  text-align: center;
}
.exr-pill svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 480px) { .exr-pill span { font-size: 12px; padding: 7px 14px; } }

/* ---- AI-Overview-style "short version" box with scroll-triggered highlight sweep ---- */
.ai-overview {
  --pf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin: 4px 0 30px;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
}
.ai-ov-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ai-ov-spark { width: 22px; height: 22px; flex: none; color: var(--lime); display: grid; place-items: center; }
.ai-ov-spark svg { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(244, 4, 80, .5)); }
.ai-ov-head > span:last-child { font: 700 14.5px var(--pf); color: #fff; letter-spacing: -0.01em; }
.ai-ov-lead { margin: 0 0 12px !important; font: 400 16.5px/1.72 var(--pf); color: #c3c6cc; }
.ai-ov-lead strong { color: #fff; font-weight: 700; }
.ai-ov-mark {
  color: #fff;
  background-color: transparent;
  background-image: linear-gradient(rgba(244, 4, 80, .3), rgba(244, 4, 80, .3));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  padding: 1px 1px;
  border-radius: 3px;
  transition: background-size 1.05s cubic-bezier(.22, 1, .36, 1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ai-overview.lit .ai-ov-mark { background-size: 100% 100%; }
.ai-ov-list { margin: 0; padding: 0; list-style: none; }
.ai-ov-list li { position: relative; padding-left: 20px; margin-bottom: 7px; font: 400 14.5px/1.5 var(--pf); color: var(--muted); }
.ai-ov-list li:last-child { margin-bottom: 0; }
.ai-ov-list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
@media (prefers-reduced-motion: reduce) { .ai-ov-mark { transition: none; } }

/* Placeholder for the lede hero image until the real one is supplied */
.blog-lede-img.is-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1904 / 824;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 14px, rgba(255, 255, 255, .045) 14px 28px);
}
.blog-lede-img.is-placeholder span {
  font: 600 13.5px 'Inter', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--line);
  padding: 9px 16px;
  border-radius: 9px;
  background: rgba(5, 7, 10, .5);
}

/* Lighter, less-crowded reading on phones for the resource/blog pages */
@media (max-width: 560px) {
  .blog-main { padding-top: 66px; }
  .blog-article { padding: 20px 18px; }
  .blog-title { font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 14px; }
  .blog-lede { font-size: 15.5px; line-height: 1.52; margin-bottom: 22px; }
  .blog-prose { font-size: 15.5px; line-height: 1.65; }
  .blog-prose p { margin-bottom: 15px; }
  .blog-prose h2 { font-size: 21px; margin: 32px 0 12px; }
  .ai-ov-lead { font-size: 15.5px !important; line-height: 1.6; }
  .blog-cta { padding: 26px 20px; }
}

/* ---- Custom video player (.mg-video): prominent unmute + controls ---- */
.mg-video { position: relative; width: 100%; background: #000; line-height: 0; }
.mg-video-el { display: block; width: 100%; height: auto; }

/* prominent unmute button — shown while muted, centered over the video */
.mg-video-unmute {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(244, 4, 80, .5);
  background: rgba(10, 12, 8, .72); backdrop-filter: blur(4px);
  color: var(--lime); font: 700 14px 'Inter', system-ui, sans-serif; line-height: 1;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45), 0 0 0 6px rgba(244, 4, 80, .08);
  transition: transform .15s ease, background .2s ease, opacity .3s ease;
  z-index: 3;
}
.mg-video-unmute:hover { transform: translate(-50%, -50%) scale(1.04); background: rgba(20, 24, 12, .85); }
.mg-video-unmute svg { width: 18px; height: 18px; }
.mg-video:not(.is-muted) .mg-video-unmute { opacity: 0; pointer-events: none; }

/* control bar */
.mg-video-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 20px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  line-height: 1;
}
.mg-video-bar button {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: none; color: #fff;
  transition: background .18s ease;
}
.mg-video-bar button:hover { background: rgba(255, 255, 255, .22); }
.mg-video-bar button svg { width: 18px; height: 18px; }
.mg-video .ic-pause, .mg-video .ic-sound { display: none; }
.mg-video.is-playing .ic-play { display: none; }
.mg-video.is-playing .ic-pause { display: block; }
.mg-video:not(.is-muted) .ic-muted { display: none; }
.mg-video:not(.is-muted) .ic-sound { display: block; }
.mg-video-time { flex: none; color: #fff; font: 600 12.5px 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-video-time .mg-dur { color: rgba(255, 255, 255, .6); }
.mg-video-seek {
  flex: 1 1 auto; height: 16px; display: flex; align-items: center; cursor: pointer;
}
.mg-video-seek::before {
  content: ""; position: absolute; /* fallback removed */
}
.mg-video-seek { position: relative; }
.mg-video-seek::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .28);
}
.mg-video-seek-fill {
  position: relative; z-index: 1; height: 4px; width: 0%; border-radius: 999px;
  background: var(--lime); transition: width .1s linear;
}
.mg-video-seek-fill::after {
  content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 3px rgba(244, 4, 80, .2);
}
@media (max-width: 560px) {
  .mg-video-bar { gap: 9px; padding: 18px 10px 10px; }
  .mg-video-unmute { font-size: 13px; padding: 11px 17px; }
}

/* ============================================================
   HOMEPAGE POLISH — calmer hero, consistent rhythm, and a
   focused mobile pass. Additive overrides (load order wins).
   ============================================================ */

/* Calmer, more legible hero */
.sg-hero-video { opacity: 0.2; }
.sg-hero-shade {
  background:
    radial-gradient(125% 95% at 50% 0%, rgba(10, 12, 16, .12) 0%, rgba(5, 6, 7, .9) 56%, var(--black) 100%);
}
.sg-hero-inner { gap: 18px; }

/* Even, contained section dividers so they don't look mismatched */
.sg-stats { border-left: 1px solid var(--sg-line); border-right: 1px solid var(--sg-line); }

/* ---- Tablet: 2-up grids already handled; tighten head spacing ---- */
@media (max-width: 1024px) {
  .sg-section-head { margin-bottom: 40px; }
}

/* ---- Phones: the main cleanup ---- */
@media (max-width: 700px) {
  /* Drop the background video on phones — cleaner and much lighter */
  .sg-hero-video { display: none; }
  .sg-hero {
    padding: 90px 20px 52px;
    background: radial-gradient(120% 80% at 50% -10%, rgba(244, 4, 80, .07) 0%, transparent 55%), var(--black);
  }
  .sg-hero-inner { gap: 15px; max-width: 100%; }
  .sg-hero h1 { font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; }
  .sg-hero-lede { font-size: 15.5px; line-height: 1.5; }
  .sg-hero-actions { width: 100%; flex-direction: column; gap: 10px; margin-top: 4px; }
  .sg-hero-actions > * { width: 100%; justify-content: center; }

  /* Consistent, lighter section rhythm */
  .sg-products, .sg-engine, .sg-steps, .sg-faq, .sg-cta { padding: 50px 18px; }
  .sg-section-head { margin: 0 auto 28px; gap: 10px; }
  .sg-section-head h2, .sg-section-head h1 { font-size: 27px; letter-spacing: -0.03em; line-height: 1.08; }
  .sg-section-head p { font-size: 15px; }
  .sg-eyebrow { font-size: 12px; }

  /* Cards: comfortable, not cramped; even gaps */
  .sg-product-grid, .sg-feature-grid, .sg-step-list { gap: 14px; }
  .sg-product-card, .sg-feature-card, .sg-step { padding: 22px; border-radius: 16px; gap: 13px; }
  .sg-product-name { font-size: 25px; }
  .sg-product-copy, .sg-feature-card p, .sg-step p { font-size: 14.5px; }
  .sg-product-cta { width: 100%; }
  .sg-feature-card h3, .sg-step h3 { font-size: 18px; }

  /* Stats: clean 2x2, right-sized numbers */
  .sg-stat { padding: 28px 14px; }
  .sg-stat strong { font-size: 32px; }
  .sg-stat span { font-size: 13px; }

  /* CTA band */
  .sg-cta-inner { padding: 34px 22px; border-radius: 20px; }
  .sg-cta-inner h2 { font-size: 27px; }
  .sg-cta-inner p { font-size: 15px; }
}

/* ---- Very small phones ---- */
@media (max-width: 400px) {
  .sg-hero h1 { font-size: 30px; }
  .sg-section-head h2, .sg-section-head h1, .sg-cta-inner h2 { font-size: 24px; }
  .sg-product-card, .sg-feature-card, .sg-step { padding: 20px; }
  .sg-stat strong { font-size: 28px; }
}

@media (max-width: 700px) {
  .sg-hero-trust { flex-direction: column; gap: 7px; text-align: center; }
}

/* Coming-soon (Delta/Quizlet) hero — mobile tuning */
@media (max-width: 700px) {
  .sg-soon { padding: 84px 20px 60px; min-height: auto; }
  .sg-soon h1 { font-size: 46px; line-height: 1; }
  .sg-soon-lede { font-size: 15.5px; line-height: 1.5; }
  .sg-soon-inner { gap: 16px; }
  .sg-soon-note { font-size: 12.5px; }
}
@media (max-width: 400px) {
  .sg-soon h1 { font-size: 38px; }
}

/* MemGenie plug-in hero title — clean wrap on phones (drop the overflowing pipe) */
@media (max-width: 700px) {
  .mg-plugin-hero .ph-title .ph-sep { display: none; }
  .mg-plugin-hero .ph-title .ph-on { display: block; margin-top: 2px; }
  .mg-plugin-hero .ph-title { font-size: clamp(30px, 8vw, 44px); }
}

/* ---- Comparison table + image caption (Delta Genie cluster) ---- */
.blog-imgcap { margin: 10px 2px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.blog-table-wrap { overflow-x: auto; margin: 8px 0 26px; border: 1px solid var(--line); border-radius: 16px; -webkit-overflow-scrolling: touch; }
.blog-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.blog-table th, .blog-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.blog-table thead th { background: rgba(255, 255, 255, .04); color: var(--white); font-weight: 700; font-size: 13px; }
.blog-table thead th:last-child { color: var(--lime); }
.blog-table tbody td:first-child { color: var(--white); font-weight: 600; }
.blog-table tbody td { color: var(--muted); }
.blog-table tbody td:last-child { color: var(--lime); font-weight: 600; }
.blog-table tbody tr:last-child td { border-bottom: none; }

/* ---- Waitlist form (Delta Genie) ---- */
.wl-form { margin: 0 auto; max-width: 520px; }
/* Input + button live inside one rounded, bordered group that glows on focus. */
.wl-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wl-fields:focus-within {
  border-color: rgba(244, 4, 80, .55);
  box-shadow: 0 0 0 3px rgba(244, 4, 80, .14), 0 12px 34px rgba(0, 0, 0, .32);
}
.wl-input {
  flex: 1 1 auto; min-width: 0;
  height: 48px; padding: 0 16px;
  border: none; background: transparent;
  color: var(--white);
  font: 500 15.5px var(--pf, 'Inter', system-ui, sans-serif);
}
.wl-input:focus { outline: none; }
.wl-input::placeholder { color: rgba(255, 255, 255, .42); }
.wl-btn {
  flex: 0 0 auto;
  height: 48px; padding: 0 22px;
  border-radius: 11px; border: none;
  background: linear-gradient(135deg, #ff3d70 0%, var(--lime) 48%, #c9033f 100%);
  color: var(--lime-deep);
  font: 800 14.5px var(--pf, 'Inter', system-ui, sans-serif);
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 16px rgba(244, 4, 80, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: filter .15s ease, transform .05s ease;
}
.wl-btn:hover { filter: brightness(1.05); }
.wl-btn:active { transform: translateY(1px); }
.wl-btn:disabled { opacity: .6; cursor: default; }
.wl-msg { margin: 14px 0 0; font-size: 14px; font-weight: 600; min-height: 18px; text-align: center; }
.wl-msg.wl-ok { color: var(--lime); }
.wl-msg.wl-err { color: #ff6b6b; }
@media (max-width: 540px) {
  .wl-fields { flex-direction: column; align-items: stretch; gap: 9px; padding: 9px; }
  .wl-input {
    height: 50px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    background: rgba(255, 255, 255, .05);
  }
  .wl-btn { height: 50px; width: 100%; }
}

/* ---- Waitlist nav button (NOT wired by auth.js — always goes to the on-page form) ---- */
.wl-nav {
  min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  font-size: clamp(14px, 0.92vw, 19px);
  font-weight: 760; line-height: 1;
  min-width: 92px; padding: 0 18px;
  color: #2b0413;
  background: linear-gradient(135deg, #ff3d70 0%, var(--lime) 48%, #c9033f 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 12px 26px rgba(244, 4, 80, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 220ms ease;
}
.wl-nav:hover, .wl-nav:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 34px rgba(244, 4, 80, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#waitlist { scroll-margin-top: 90px; }

/* ---- Dedicated waitlist page ---- */
.wl-form--page { margin-top: 26px; }
.wl-perks { list-style: none; margin: 28px auto 0; padding: 0; max-width: 520px; display: grid; gap: 12px; text-align: left; }
.wl-perks li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.wl-perks strong { color: var(--white); font-weight: 700; }
.wl-perk-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(244, 4, 80, .16); color: var(--lime); margin-top: 1px; }
.wl-perk-ic svg { width: 13px; height: 13px; }

/* ---- Turnstile widget on the waitlist form ---- */
.wl-turnstile { margin: 16px auto 0; display: flex; justify-content: center; min-height: 65px; }

/* ---- Interactive hero panel (hero-panel.js) ---------------------------- */
/* The scroll animation lights every switch at once via .is-live; .is-off is
   the per-switch override the visitor drives, so it needs to outrank it. */
.mg-plugin-hero .ph-pop.is-live .tgl.is-off { background: #d2d2d2; }
.mg-plugin-hero .ph-pop.is-live .tgl.is-off .knob { left: 2px; }
.mg-plugin-hero .ph-pop.is-live .tgl.is-off .tgl-i,
.mg-plugin-hero .ph-pop.is-live .tgl.is-off .tgl-o { opacity: 1; }

/* Staggered power-on delays would make a real click feel broken. */
.mg-plugin-hero .ph-pop[data-manual="1"] .pop-row .knob,
.mg-plugin-hero .ph-pop[data-manual="1"] .pop-row .tgl { transition-delay: 0s; }

/* A switched-off row reads as inert rather than merely unlit. */
.mg-plugin-hero .ph-pop .pop-row.is-off { border-left-color: #cbd0d8; background: #f6f7f9; }
.mg-plugin-hero .ph-pop .pop-row--quiz.is-off { box-shadow: none; }
.mg-plugin-hero .ph-pop .pop-row.is-off .pop-row-label { color: #6b7280; }

.mg-plugin-hero .ph-pop .is-interactive { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mg-plugin-hero .ph-pop .pop-row.is-interactive { transition: background .25s ease, border-color .25s ease, transform .06s ease; }
.mg-plugin-hero .ph-pop .pop-row.is-interactive:hover { background: #eceef2; }
.mg-plugin-hero .ph-pop .pop-row.is-interactive:active { transform: scale(.99); }
.mg-plugin-hero .ph-pop .is-interactive:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; border-radius: 12px; }

.mg-plugin-hero .ph-pop .pop-tile.is-interactive { transition: color .25s ease, transform .06s ease; }
.mg-plugin-hero .ph-pop .pop-tile.is-interactive:hover { color: #111827; }
.mg-plugin-hero .ph-pop .pop-tile.is-interactive:active { transform: scale(.96); }
.mg-plugin-hero .ph-pop .pop-tile.is-off { opacity: .55; }

/* Premium gate bubble */
.mg-plugin-hero .ph-prem {
  position: absolute; z-index: 6; transform: translate(-50%, -118%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: max-content; max-width: 220px; padding: 11px 13px;
  border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #1d2130, #12141d);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(234,179,8,.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mg-plugin-hero .ph-prem.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -128%); }
.mg-plugin-hero .ph-prem::after {
  content: ""; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg); background: #12141d;
}
.mg-plugin-hero .ph-prem-txt { font: 500 12px var(--pf); color: #e5e7eb; line-height: 1.4; }
.mg-plugin-hero .ph-prem-cta {
  font: 600 11.5px var(--pf); color: #0a0c16; text-decoration: none;
  background: linear-gradient(180deg, #fde047, #eab308);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  transition: filter .15s ease;
}
.mg-plugin-hero .ph-prem-cta:hover { filter: brightness(1.07); }

@media (prefers-reduced-motion: reduce) {
  .mg-plugin-hero .ph-prem { transition: none; }
}

/* ============================================================
   Genie switcher — square mascot tiles (Aug 2026)
   The dropdown now shows the square 1080x1080 mascot art instead
   of the wide wordmarks {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
}

/* Name label — hidden until hover/focus {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 5px 0 6px;
  border-radius: 10px;
  text-align: center;
  font-family: "Geist", Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: rgba(5, 6, 8, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 170ms ease, transform 230ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Product accents: lime for MemGenie { border-color: rgba(244, 4, 80, 0.5); }

/* ============================================================
   Liquid page glide — cross-document View Transitions.

   Pure CSS: `navigation: auto` makes the browser animate between
   any two same-origin pages that BOTH ship this rule, so there is
   no link interception and no JS that can strand a navigation.
   Browsers without support just navigate instantly.

   The motion: the outgoing page recedes and dissolves to the left
   while the incoming page glides in from the right, settling out
   of a soft blur. The sticky header is lifted into its own
   transition group so it holds rock-steady through the whole
   thing and only its logo cross-fades.
   ============================================================ */
@view-transition { navigation: auto; }

:root {
  --mg-glide-in: 620ms;
  --mg-glide-out: 460ms;
  /* easeOutQuint — a long, soft settle. This curve is what makes the
     arrival read as "liquid" rather than as a card being slid over. */
  --mg-glide-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  /* Gentle acceleration away, so the old page leaves without a jolt. */
  --mg-glide-ease-out: cubic-bezier(0.55, 0, 0.85, 0.35);
}

/* The UA cross-fades old/new with plus-lighter inside an isolated pair.
   That is tuned for two similar frames; here a dark page can hand off to
   a light one, and additive blending flashes bright at the midpoint.
   Normal stacking keeps the dissolve true to both pages. */
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

::view-transition-old(root) {
  animation: mg-glide-out var(--mg-glide-out) var(--mg-glide-ease-out) both;
}
::view-transition-new(root) {
  animation: mg-glide-in var(--mg-glide-in) var(--mg-glide-ease-in) both;
}

@keyframes mg-glide-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0px); }
  to   { opacity: 0; transform: translate3d(-3.5%, 0, 0) scale(0.975); filter: blur(8px); }
}

/* The incoming page starts slightly OVER-scaled (1.03, not 0.97) on purpose:
   a blurred snapshot samples past its own edges, so anything under 1 would
   show soft translucent borders on the page the visitor actually lands on.
   Starting overscaled keeps the frame fully covered the whole way in. */
@keyframes mg-glide-in {
  from { opacity: 0; transform: translate3d(5%, 0, 0) scale(1.03); filter: blur(12px); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0px); }
}

/* Header rides above the glide as its own group, so the nav never slides
   or blurs — only the logo and menu contents dissolve between products. */
header.site-header { view-transition-name: mg-header; }

::view-transition-group(mg-header) { animation-duration: var(--mg-glide-in); }
::view-transition-old(mg-header),
::view-transition-new(mg-header) {
  animation-duration: var(--mg-glide-in);
  animation-timing-function: var(--mg-glide-ease-in);
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the snapshot entirely where supported... */
  @view-transition { navigation: none; }
  /* ...and neutralise the animations if this build honours the at-rule but
     not its use inside a media query, so it degrades to a plain cut. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   Pulse CTA — .sg-btn--pulse

   Idle: a soft dark dot breathes on the lime, ~2s ease-in-out.
   Hover: the dot clears, an arrow disc slides in from the right
   while its arrow spins to true, and the label re-enters one
   character at a time.

   .sg-btn already sets position:relative + overflow:hidden, and
   that clip is doing real work here — it's what hides the disc
   while it travels in from outside the pill.
   ============================================================ */
.sg-btn--pulse {
  gap: 0;
  padding-right: 60px;
}

/* ── Label stagger ── */
.sg-pulse-label { position: relative; z-index: 1; }
.sg-pulse-label .ch {
  display: inline-block;
  white-space: pre;   /* keeps the split spaces from collapsing */
}
/* Gated on .sg-anim (set by sg.js only when motion is allowed), so a
   no-JS or reduced-motion visitor keeps a plain, fully visible label. */
html.sg-anim .sg-btn--pulse:hover .sg-pulse-label .ch,
html.sg-anim .sg-btn--pulse:focus-visible .sg-pulse-label .ch {
  animation: sg-pulse-ch 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 26ms);
}
@keyframes sg-pulse-ch {
  from { opacity: 0; transform: translateY(0.34em); }
  to   { opacity: 1; transform: none; }
}

/* ── Idle dot ── */
/* Two elements on purpose. A running keyframe animation outranks a plain
   declaration, so if the breathing lived on the same element as the hover
   exit, :hover { opacity: 0 } would lose to it and the dot would never
   fully clear — it would just freeze mid-pulse. The wrapper owns the exit,
   the ::after owns the breathing, and the two opacities multiply. */
.sg-pulse-dot {
  position: absolute;
  right: 23px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  transition:
    opacity 0.16s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sg-pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #14200a;
  /* Stands in for the reference's blurred glow twin — one shadow instead
     of a second element, since a spread shadow reads the same at 10px. */
  box-shadow: 0 0 11px 3px rgba(20, 32, 10, 0.5);
  animation: sg-pulse-breathe 2s ease-in-out infinite alternate;
}
@keyframes sg-pulse-breathe {
  from { opacity: 1; }
  to   { opacity: 0.32; }
}
.sg-btn--pulse:hover .sg-pulse-dot,
.sg-btn--pulse:focus-visible .sg-pulse-dot {
  opacity: 0;
  transform: scale(0.4);
}

/* ── Arrow disc ── */
.sg-pulse-arrow {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #14200a;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.16),
    -9px 0 26px rgba(20, 32, 10, 0.34);
  opacity: 0;
  transform: translateX(150%) scale(0.5);
  transition:
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}
.sg-btn--pulse:hover .sg-pulse-arrow,
.sg-btn--pulse:focus-visible .sg-pulse-arrow {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.09s;   /* disc follows the label, it doesn't lead it */
}
.sg-pulse-arrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--mem);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-95deg);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
.sg-btn--pulse:hover .sg-pulse-arrow svg,
.sg-btn--pulse:focus-visible .sg-pulse-arrow svg {
  transform: rotate(0deg);
  transition-delay: 0.11s;
}

@media (prefers-reduced-motion: reduce) {
  .sg-pulse-dot::after { animation: none; }
  .sg-pulse-dot,
  .sg-pulse-arrow,
  .sg-pulse-arrow svg { transition: none; }
}


/* ── Active page in the primary nav ───────────────────────────────────────
   One nav across the whole site now, so the only thing telling you where you
   are is the current item. aria-current carries the state (screen readers get
   it for free); the rule under it is the paint.

   .main-nav is overflow-y: hidden for its horizontal scroll on narrow screens,
   which clipped an underline hung below the link box — so every link gets the
   same bottom padding and the marker sits inside it. Padding goes on ALL of
   them, not just the current one, or the active item would jump.
   The colour needs the extra .site-header specificity to beat the nav's own
   muted link rule. */
.site-header .main-nav a { padding-bottom: 7px; }

.site-header .main-nav a[aria-current="page"] {
  position: relative;
  color: #fff;
  font-weight: 700;
}
.site-header .main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  /* a brighter tint than --lime: the flat brand crimson reads almost black
     against the header's #08090b */
  background: #ff2e66;
  box-shadow: 0 0 12px rgba(255, 46, 102, 0.75);
}
body.mg-light .site-header .main-nav a[aria-current="page"] { color: #fff; }


/* ── Site-wide announcement bar ───────────────────────────────────────────
   Skinny, above the sticky header, one per page. Its own dark navy rather than
   the header's near-black, so the two read as separate bars instead of one
   thick one, with a hairline underneath that fades out at both ends. Blue here
   rather than the site crimson, so the announcement reads as separate from the
   product chrome. Dismissal is per-browser and handled in sg.js. */
.gc-banner {
  position: relative;
  width: 100%;
  background: #0b1120;
  color: #fff;
}

/* the hairline: brand accent in the middle, nothing at the edges */
.gc-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.4), transparent);
}

.gc-banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* room on the right so long copy never runs under the dismiss button */
  padding: 9px 46px;
  color: inherit;
  text-decoration: none;
  font: 500 13.5px/1.4 "Geist", Inter, system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-align: center;
}

.gc-banner-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #60a5fa;
}

.gc-banner-text strong {
  font-weight: 650;
  color: #93c5fd;
}

.gc-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-weight: 650;
  color: #93c5fd;
  transition: color 0.2s ease;
}

.gc-banner-cta svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.gc-banner-link:hover .gc-banner-cta { color: #bfdbfe; }
.gc-banner-link:hover .gc-banner-cta svg { transform: translateX(2px); }

.gc-banner-x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.gc-banner-x svg { width: 14px; height: 14px; }

.gc-banner-x:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* On a phone the arrow link and the icon are the first things to go — the
   sentence is the message and it needs the width. */
@media (max-width: 720px) {
  .gc-banner-icon,
  .gc-banner-cta { display: none; }
  .gc-banner-link {
    padding: 8px 40px 8px 14px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-banner-cta,
  .gc-banner-cta svg,
  .gc-banner-x { transition: none; }
}

/* ============================================================
   Mobile pass — measured, not guessed
   Every rule here fixes a defect found by auditing all 24 sitemap
   pages at 375px. The `html` prefixes are deliberate: product pages
   carry their plan CSS in an inline <style> block that loads after
   this sheet, so these win on specificity rather than load order.
   ============================================================ */
@media (max-width: 640px) {
  /* "Back to …" link on resource pages: 17px tall. The padding makes a
     thumb-sized hit area; the margins give back exactly what the padding
     adds, so the text does not move. */
  .blog-back { padding: 11px 0; margin-top: -11px; margin-bottom: 3px; }

  /* Accuracy/timing sliders in the resource-page demo widget. The input box
     was 4px tall, so the touch target was 4px. Grow the box to 32px and keep
     the 4px bar by painting the gradient into the content box only. */
  .mgctl-slider { box-sizing: border-box; height: 32px; padding: 14px 0; background-clip: content-box; }

  /* Video scrubber: 16px (24px on themed pages) is narrower than a fingertip.
     The thin visual track is drawn by the slider pseudo-elements, so a taller
     input only grows the grabbable area. */
  html .qp-seek,
  html body.mg-light .qp-seek { height: 32px; }

  /* Plan-card captions at 11-11.5px grey were the smallest body text on the
     site. One step up. Mirrors the inline plan CSS on product pages and
     pricing-block(-light).css, one selector deeper so it wins. */
  html body.mg-light .mg-plans-light .fl-sub,
  html body.mg-light .mg-plans-light .pc-drop-note,
  html .pricing-page .fl-sub,
  html .pricing-page .pc-drop-note { font-size: 12.5px; }

  /* Footer links: 16px rows (13.5px text x 1.22 line-height) stacked 10px
     apart — the densest small targets on every page. Padding, not flex,
     because some links hold a <small> ("MemGenie · Membean") and a flex row
     would swallow the space before it. The gap goes to 0 so the row height
     does the spacing: the footer gets taller, not wider. */
  html .footer-column { gap: 0; }
  html .footer-column a { display: block; padding-block: 12px; }

  /* Privacy / Terms in the bottom bar: 15px tall, 18px apart. */
  html .footer-black nav { gap: 0 20px; }
  html .footer-black nav a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Announcement close: 26x26. .gc-banner-link already reserves 46px on the
     right for it, so a 40x40 target fits without touching the copy. The icon
     itself stays 14px. */
  html .gc-banner-x { width: 40px; height: 40px; right: 4px; }

  /* "Full pricing details and FAQ" under the plan cards: 17px tall. */
  html .plan-links a,
  html .eg-tiers-foot a { display: inline-block; padding: 11px 6px; }

  /* Product-page hero: the main CTA straddled a 375x812 fold by 13-30px. Four
     gaps trimmed by 32px in total; nothing shrinks and every gap stays >= 12px. */
  html body.mg-light .mgh { padding-top: 12px; }
  html body.mg-light .mgh-player { margin-bottom: 16px; }
  html body.mg-light .mgh-trust { margin-bottom: 12px; }
  html body.mg-light .mgh-sub { margin-bottom: 18px; }

  /* EdGenie plan-tier chips ("read", "yes") at 9.5px: the smallest text on
     the site that is not part of an extension mockup. */
  html body.mg-light .eg-verdict { font-size: 11px; }

  /* "See how it works ->" on the MemGenie feature cards: 18px tall. Padding
     makes the hit area; the negative margins give back exactly what it adds
     (the rule's own margin-top is 4px), so the card does not move. */
  html .feature-card-link { padding-block: 11px; margin-block: -7px -11px; }

  /* The MemGenie widget slider is 24px because the extension's is, and the
     toggle beside it already extends its touch area invisibly
     (button.mgw-knob::after). Range inputs cannot take ::after, so do the
     equivalent: a 32px input with negative margins that keep the native 24px
     footprint. The bar is drawn by the slider pseudo-elements, so it does not
     grow with the input. */
  html .mgw-slider { height: 32px; margin: -4px 0; }

  /* EdGenie tier-comparison rows set `font: 500 11.5px` on the li, so every
     description inherits it — the same role as the plan captions above. The
     shorthand is overridden by size alone; weight and family stay. */
  html body.mg-light .eg-rows li { font-size: 12.5px; }
}

/* Seven nav links (Gimkit then Wayground) need ~475px at default spacing, and
   between the 940px hamburger breakpoint and ~1180px the bar has less than that
   to give, which clipped the last link. Tighten the links across that band
   rather than move the breakpoint, which a dozen other rules are keyed to.
   2026-10-13: ten links now (BossGenie, then Group plan). At default spacing
   they need ~745px, and from ~1181px to ~1260px the bar gives only ~630px, so
   the band reaches 1260px; tightened, the ten fit in ~606px. Below ~1150px
   the bar still scrolls sideways under its edge fade, as it already did. */
/* 2026-10-18: twelve product links (Nearpod, then NoRedInk) need ~840px at
   default spacing, more than the middle grid column gives below ~1480px, and
   the nav spilled under Login. The band now reaches 1480px, and min-width: 0
   keeps the nav inside its column (it scrolls under the edge fade) instead of
   overlapping the buttons at any width. */
header.site-header .main-nav { min-width: 0; max-width: 100%; }
@media (min-width: 941px) {
  /* The nav fades 14px at each edge (mask-image). Pad it by the same, so the
     fade only ever covers padding, never the first and last link; and if it
     ever overflows, start at the left instead of centring Delta Math off-screen. */
  header.site-header .main-nav { padding-left: 14px; padding-right: 14px; justify-content: safe center; }
}
/* With six links plus "More" the bar only needs tightening on small laptops. */
@media (min-width: 941px) and (max-width: 1200px) {
  header.site-header .main-nav { gap: 0; }
  header.site-header .main-nav a, header.site-header .nav-more-btn { padding-left: 5px; padding-right: 5px; font-size: 13px; letter-spacing: -0.01em; }
}
/* The last ~60px before the hamburger takes over is tighter still. */
@media (min-width: 941px) and (max-width: 1000px) {
  header.site-header .main-nav a { padding-left: 2px; padding-right: 2px; font-size: 12px; }
}

/* Condensed header, toggled by sg.js once the page has scrolled 40px. */
header.site-header {
  transition: min-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.28s ease, box-shadow 0.28s ease;
}
header.site-header .sg-logo-mark,
header.site-header .sg-logo-word-img { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; }
@media (min-width: 941px) {
  header.site-header.is-condensed {
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: rgba(8, 9, 11, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  }
  header.site-header.is-condensed .sg-logo-mark,
  header.site-header.is-condensed .sg-logo-word-img { transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  header.site-header,
  header.site-header .sg-logo-mark,
  header.site-header .sg-logo-word-img { transition: none; }
}

/* ── "More" in the header nav (2026-10-18) ─────────────────────────────────
   The bar shows the first six Genies (Membean, Delta Math, IXL, NoRedInk,
   EdPuzzle, Nearpod); the rest sit behind "More". Opens on hover, on keyboard
   focus, and on click/tap (sg.js toggles .is-open). In the phone menu the
   button disappears and every link lists out like the others. */
.nav-more { position: relative; display: inline-flex; align-items: center; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px;
  padding: 7px 11px; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  transition: color 160ms ease, opacity 160ms ease;
}
.nav-more-btn svg { width: 11px; height: 11px; transition: transform 160ms ease; }
.nav-more-btn:hover, .nav-more-btn:focus-visible, .nav-more.is-open .nav-more-btn,
.nav-more:has(a[aria-current="page"]) .nav-more-btn { color: var(--text, #fff); }
.nav-more.is-open .nav-more-btn svg { transform: rotate(180deg); }
.nav-more-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  display: none; flex-direction: column; min-width: 200px; padding: 6px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.09);
  background: #111318; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
.nav-more-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-more-panel a { min-height: 0; padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
.nav-more-panel a:hover, .nav-more-panel a:focus-visible { background: rgba(255, 255, 255, 0.06); }
@media (min-width: 941px) {
  /* Seven items always fit, so the bar no longer scrolls or fades its edges
     (both would clip the dropdown). */
  header.site-header .main-nav { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .nav-more:hover .nav-more-panel, .nav-more:focus-within .nav-more-panel, .nav-more.is-open .nav-more-panel { display: flex; }
}
@media (max-width: 940px) {
  .nav-more, .nav-more-panel { display: contents; }
  .nav-more-btn { display: none; }
}

/* ---- /light-theme.css?v=15 ---- */
/* ============================================================
   GenieCheats — site-wide light theme (GENERATED)

   Derived from styles.css by scratchpad/gen_light.py: every rule
   in the base sheet that assumed a dark background gets a light
   counterpart here, scoped under body.mg-light so the dark theme
   still renders for anything without the class.

   Brand accents (lime / green / pink / violet) are deliberately
   untouched — they already read correctly on white.

   Regenerate rather than hand-editing the bulk of this file;
   hand-tuning belongs in the OVERRIDES section at the end.
   ============================================================ */

/* ---------- base ---------- */
body.mg-light {
  --black: #ffffff;
  --header: #ffffff;
  --header-soft: #f6f7f9;
  --white: #0d1117;
  --muted: #5b626d;
  --line: rgba(13, 17, 23, 0.09);
  background: #ffffff;
  color: #0d1117;
}
body.mg-light .entry-loader {
  background: #ffffff;
}
body.mg-light .site-header {
  background: rgba(13, 17, 23, 0.1);
  border-bottom: 1px solid rgba(13, 17, 23, 0.022);
}
body.mg-light .support-button {
  color: #0d1117;
}
body.mg-light .pricing-button {
  color: #0d1117;
  background: #ffffff;
}
body.mg-light .pricing-button strong {
  color: #0d1117;
}
body.mg-light .login-button::before,
body.mg-light .signup-button::before {
  background: linear-gradient(100deg, transparent, rgba(13, 17, 23, 0.275), transparent);
}
body.mg-light .signup-button {
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 12px 26px rgba(244, 4, 80, 0.26),
    inset 0 1px 0 rgba(13, 17, 23, 0.303);
}
body.mg-light .signup-button:hover,
body.mg-light .signup-button:focus-visible {
  box-shadow: 0 16px 34px rgba(244, 4, 80, 0.42),
    inset 0 1px 0 rgba(13, 17, 23, 0.33);
}
body.mg-light .login-button {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066);
}
body.mg-light .login-button:hover,
body.mg-light .login-button:focus-visible {
  box-shadow: 0 10px 24px rgba(244, 4, 80, 0.16),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .hero {
  background: radial-gradient(circle at 66% 48%, rgba(13, 17, 23, 0.013), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.mg-light .hero::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.12) 1px, transparent 1.5px);
}
body.mg-light .hero-shade {
  background: linear-gradient(90deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 44%, rgba(13, 17, 23, 0.1) 100%),
    radial-gradient(circle at 62% 44%, rgba(199, 255, 0, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 100%);
}
body.mg-light .hero h1 {
  color: #0d1117;
}
body.mg-light .hero p {
  color: #0d1117;
}
body.mg-light .hero-proof-strip span {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.083), rgba(13, 17, 23, 0.028)),
    rgba(13, 17, 23, 0.1);
  border: 1px solid rgba(13, 17, 23, 0.099);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 12px 30px rgba(13, 17, 23, 0.1);
}
body.mg-light .hero-reel {
  border: 1px solid rgba(13, 17, 23, 0.12);
  background: #ffffff;
  box-shadow: 0 34px 90px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .video-slot {
  color: #0d1117;
}
body.mg-light .video-frame {
  border: 1px solid rgba(13, 17, 23, 0.132);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.088), transparent 22%),
    linear-gradient(145deg, rgba(13, 17, 23, 0.12), rgba(13, 17, 23, 0.05)),
    radial-gradient(circle at 50% 34%, rgba(199, 255, 0, 0.17), transparent 31%),
    radial-gradient(circle at 52% 74%, rgba(56, 96, 255, 0.12), transparent 36%),
    rgba(13, 17, 23, 0.1);
  box-shadow: 0 34px 90px rgba(13, 17, 23, 0.1),
    0 0 70px rgba(199, 255, 0, 0.08),
    inset 0 1px 0 rgba(13, 17, 23, 0.12);
}
body.mg-light .video-frame::before {
  border: 1px dashed rgba(13, 17, 23, 0.121);
}
body.mg-light .video-frame::after {
  background: linear-gradient(0deg, rgba(13, 17, 23, 0.1), transparent 36%),
    repeating-linear-gradient(180deg, rgba(13, 17, 23, 0.039) 0 1px, transparent 1px 13px);
}
body.mg-light .video-slot.is-active .video-frame::before {
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.033),
    0 0 36px rgba(199, 255, 0, 0.11);
}
body.mg-light .video-caption {
  color: #0d1117;
}
body.mg-light .video-sound-button {
  border: 1px solid rgba(13, 17, 23, 0.12);
  color: #0d1117;
  background: rgba(13, 17, 23, 0.1);
  box-shadow: 0 18px 38px rgba(13, 17, 23, 0.1);
}
body.mg-light .video-sound-button:hover,
body.mg-light .video-sound-button:focus-visible {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .primary-cta {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.022)),
    rgba(13, 17, 23, 0.05);
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .secondary-cta {
  background: linear-gradient(180deg, #fff 0%, rgba(13, 17, 23, 0.533) 100%);
  border: 1px solid rgba(13, 17, 23, 0.506);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.088),
    0 16px 34px rgba(13, 17, 23, 0.1);
}
body.mg-light .signup-cta {
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 18px 42px rgba(244, 4, 80, 0.28),
    inset 0 1px 0 rgba(13, 17, 23, 0.303);
}
body.mg-light .signup-cta::before {
  background: linear-gradient(100deg, transparent, rgba(13, 17, 23, 0.303), transparent);
}
body.mg-light .signup-cta:hover,
body.mg-light .signup-cta:focus-visible {
  box-shadow: 0 22px 52px rgba(244, 4, 80, 0.42),
    inset 0 1px 0 rgba(13, 17, 23, 0.33);
}
body.mg-light .home-offer-section {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.mg-light .promo-plan-button {
  color: #0d1117;
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: 0 12px 28px rgba(244, 4, 80, 0.26),
    inset 0 1px 0 rgba(13, 17, 23, 0.12);
}
body.mg-light .promo-plan-button:hover,
body.mg-light .promo-plan-button:focus-visible {
  box-shadow: 0 16px 34px rgba(244, 4, 80, 0.32),
    inset 0 1px 0 rgba(13, 17, 23, 0.12);
}
body.mg-light .detection-callout-section {
  background: radial-gradient(circle at 50% 42%, rgba(199, 255, 0, 0.07), transparent 21%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #ffffff 100%);
}
body.mg-light .detection-callout-section::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.12) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(13, 17, 23, 0.044), transparent 34%, rgba(13, 17, 23, 0.033));
}
body.mg-light .detection-callout-section::after {
  background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(13, 17, 23, 0.033) 43px 44px, transparent 45px 86px),
    radial-gradient(ellipse at 50% 52%, transparent 0%, rgba(13, 17, 23, 0.1) 48%, rgba(13, 17, 23, 0.1) 100%);
}
body.mg-light .undetectable-pill {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.088), rgba(13, 17, 23, 0.039)),
    rgba(13, 17, 23, 0.05);
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.099),
    0 18px 56px rgba(13, 17, 23, 0.1),
    0 0 42px rgba(199, 255, 0, 0.06);
}
body.mg-light .detection-callout h2 {
  color: #0d1117;
}
body.mg-light .detection-callout p {
  color: #0d1117;
}
body.mg-light .detection-reviews-button {
  box-shadow: 0 22px 50px rgba(199, 255, 0, 0.24),
    0 0 70px rgba(199, 255, 0, 0.16),
    inset 0 1px 0 rgba(13, 17, 23, 0.275);
}
body.mg-light .detection-reviews-button:hover,
body.mg-light .detection-reviews-button:focus-visible {
  box-shadow: 0 26px 58px rgba(199, 255, 0, 0.3),
    0 0 82px rgba(199, 255, 0, 0.2),
    inset 0 1px 0 rgba(13, 17, 23, 0.297);
}
body.mg-light .memgenie-update {
  background: radial-gradient(circle at 48% 50%, rgba(44, 130, 255, 0.24), transparent 21%),
    radial-gradient(circle at 35% 42%, rgba(17, 91, 160, 0.26), transparent 26%),
    linear-gradient(105deg, #0b1a23 0%, #ffffff 47%, #ffffff 100%);
}
body.mg-light .chrome-store-feature {
  background: #ffffff;
}
body.mg-light .chrome-store-feature::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.116) 1px, transparent 1.35px);
}
body.mg-light .chrome-store-feature::after {
  background: linear-gradient(180deg, transparent 80%, rgba(13, 17, 23, 0.248) 92%, #f8f9f8 100%),
    linear-gradient(180deg, transparent 50%, rgba(13, 17, 23, 0.1) 68%, rgba(13, 17, 23, 0.1) 86%, #ffffff 100%),
    radial-gradient(circle at 31% 86%, rgba(16, 151, 116, 0.4), transparent 30%),
    radial-gradient(circle at 58% 70%, rgba(45, 117, 255, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 46%, rgba(13, 17, 23, 0.1) 76%, #ffffff 100%),
    linear-gradient(90deg, rgba(13, 17, 23, 0.1), transparent 50%, rgba(13, 17, 23, 0.1));
}
body.mg-light .availability-pill {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.088);
  border: 1px solid rgba(13, 17, 23, 0.05);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.044);
}
body.mg-light .chrome-store-copy h2 {
  color: #0d1117;
}
body.mg-light .chrome-store-copy p {
  color: #5b626d;
}
body.mg-light .chrome-store-cta {
  box-shadow: 0 20px 52px rgba(113, 255, 0, 0.18),
    inset 0 1px 0 rgba(13, 17, 23, 0.209);
}
body.mg-light .chrome-cta-logo {
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.06),
    0 2px 6px rgba(13, 17, 23, 0.1);
}
body.mg-light .chrome-store-icon {
  background: rgba(13, 17, 23, 0.528);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.1);
}
body.mg-light .chrome-store-video {
  background: #ffffff;
}
body.mg-light .workflow-copy p {
  color: #0d1117;
}
body.mg-light .workflow-media {
  background: linear-gradient(rgba(13, 17, 23, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.045) 1px, transparent 1px),
    #f0f1f0;
}
body.mg-light .workflow-media::after {
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(13, 17, 23, 0.035));
}
body.mg-light .workflow-video-card {
  background: radial-gradient(circle at 18% 10%, rgba(199, 255, 0, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 28px 58px rgba(13, 17, 23, 0.1);
}
body.mg-light .workflow-video-screen {
  background: linear-gradient(135deg, rgba(61, 135, 255, 0.28), rgba(199, 255, 0, 0.1)),
    radial-gradient(circle at 62% 40%, rgba(13, 17, 23, 0.12), transparent 18%),
    #ffffff;
}
body.mg-light .workflow-video-screen span {
  color: #0d1117;
}
body.mg-light .workflow-tools span,
body.mg-light .workflow-grid-top span,
body.mg-light .workflow-grid-top strong {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .workflow-prompt {
  border: 1px solid rgba(13, 17, 23, 0.088);
  color: #5b626d;
  background: rgba(13, 17, 23, 0.061);
}
body.mg-light .workflow-grid-top strong {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .workflow-image-grid span {
  background: radial-gradient(circle at 50% 38%, rgba(13, 17, 23, 0.154), transparent 24%),
    linear-gradient(135deg, rgba(88, 136, 255, 0.44), rgba(199, 255, 0, 0.16)),
    #ffffff;
}
body.mg-light .workflow-image-grid span:nth-child(3) {
  background: radial-gradient(circle at 52% 40%, rgba(13, 17, 23, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(244, 4, 80, 0.28), rgba(86, 177, 255, 0.18)),
    #ffffff;
}
body.mg-light .workflow-timeline span {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .workflow-showcase[data-workflow-showcase] {
  color: #0d1117;
  background: radial-gradient(circle at 76% 18%, rgba(199, 255, 0, 0.08), transparent 24%),
    radial-gradient(circle at 24% 42%, rgba(53, 112, 255, 0.11), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #ffffff 100%);
}
body.mg-light .workflow-showcase[data-workflow-showcase]::before {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 34%, rgba(13, 17, 23, 0.1) 78%, #ffffff 100%),
    radial-gradient(circle at 70% 28%, rgba(199, 255, 0, 0.12), transparent 30%),
    radial-gradient(circle at 25% 60%, rgba(53, 112, 255, 0.16), transparent 34%),
    linear-gradient(rgba(13, 17, 23, 0.033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.028) 1px, transparent 1px);
}
body.mg-light .mg-video-play-btn {
  background: rgba(13, 17, 23, 0.1);
  color: #0d1117;
}
body.mg-light .workflow-showcase[data-workflow-showcase] .workflow-inner h2 {
  color: #0d1117;
}
body.mg-light .workflow-lede {
  color: #0d1117;
}
body.mg-light .feature-card {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.05), rgba(13, 17, 23, 0.013));
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 24px 60px rgba(13, 17, 23, 0.1);
}
body.mg-light .feature-card:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 36px 84px rgba(13, 17, 23, 0.1);
}
body.mg-light .feature-card-media {
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 17, 23, 0.066);
}
body.mg-light .feature-card-media--auto {
  background: radial-gradient(circle at 30% 26%, rgba(255, 139, 233, 0.34), transparent 46%),
    radial-gradient(circle at 74% 76%, rgba(66, 105, 255, 0.32), transparent 48%),
    linear-gradient(145deg, #2a1140 0%, #ffffff 52%, #ffffff 100%);
}
body.mg-light .feature-auto-chip {
  color: #0d1117;
  border: 1px solid rgba(13, 17, 23, 0.12);
}
body.mg-light .feature-card-body h3 {
  color: #0d1117;
}
body.mg-light .feature-card-body p {
  color: #0d1117;
}
body.mg-light .workflow-step {
  border: 1px solid rgba(13, 17, 23, 0.077);
  background: linear-gradient(145deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.017)),
    rgba(13, 17, 23, 0.022);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.044);
}
body.mg-light .workflow-step.is-active {
  background: radial-gradient(circle at 0% 0%, rgba(199, 255, 0, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(13, 17, 23, 0.088), rgba(13, 17, 23, 0.02)),
    rgba(13, 17, 23, 0.028);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 26px 80px rgba(13, 17, 23, 0.1);
}
body.mg-light .workflow-step-copy h3 {
  color: #0d1117;
}
body.mg-light .workflow-step-copy p:not(.workflow-step-label) {
  color: #0d1117;
}
body.mg-light .workflow-step-copy a {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.11);
  border: 1px solid rgba(13, 17, 23, 0.12);
}
body.mg-light .workflow-visual-card {
  border: 1px solid rgba(13, 17, 23, 0.11);
  background: #ffffff;
  box-shadow: 0 38px 100px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.11);
}
body.mg-light .accuracy-card .visual-gradient {
  background: radial-gradient(circle at 30% 24%, rgba(199, 255, 0, 0.9), transparent 22%),
    radial-gradient(circle at 77% 68%, rgba(46, 145, 255, 0.9), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #143720 42%, #071117 100%);
}
body.mg-light .membean-window,
body.mg-light .delay-console,
body.mg-light .typing-console {
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: 0 30px 82px rgba(13, 17, 23, 0.1),
    inset 0 1px 0 rgba(13, 17, 23, 0.088);
}
body.mg-light .window-top span {
  background: rgba(13, 17, 23, 0.176);
}
body.mg-light .accuracy-meter {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .accuracy-meter span,
body.mg-light .answer-choice small,
body.mg-light .delay-row span,
body.mg-light .typing-line span {
  color: #0d1117;
}
body.mg-light .accuracy-meter strong {
  color: #0d1117;
}
body.mg-light .accuracy-meter div {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .answer-choice {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.077);
}
body.mg-light .delay-row {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .delay-wave {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .typing-line {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .typing-line strong {
  color: #0d1117;
}
body.mg-light .keyboard-grid span {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .review-entry-transition {
  background: #ffffff;
}
body.mg-light .review-entry-sticky {
  color: #0d1117;
  background: radial-gradient(circle at 50% 54%, rgba(199, 255, 0, 0.09), transparent 18%),
    radial-gradient(circle at 50% 54%, rgba(59, 129, 255, 0.13), transparent 28%),
    #ffffff;
}
body.mg-light .review-entry-sticky::after {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.0), #f8f9f8 74%);
}
body.mg-light .review-entry-grid {
  background: linear-gradient(rgba(199, 255, 0, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 255, 0, 0.14) 1px, transparent 1px),
    radial-gradient(circle at 50% 54%, transparent 0%, rgba(13, 17, 23, 0.1) 34%, rgba(13, 17, 23, 0.1) 72%);
}
body.mg-light .review-entry-lightwash {
  background: radial-gradient(circle at 50% 46%, #ffffff, rgba(13, 17, 23, 0.517) 56%, #f8f9f8 100%);
}
body.mg-light .review-entry-rings span:nth-child(3) {
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .review-entry-card {
  background: radial-gradient(circle at 92% 12%, rgba(199, 255, 0, 0.32), transparent 28%),
    rgba(13, 17, 23, 0.517);
  border: 1px solid rgba(13, 17, 23, 0.005);
  box-shadow: 0 40px 130px rgba(13, 17, 23, 0.1),
    0 0 0 10px rgba(13, 17, 23, 0.088);
}
body.mg-light .review-entry-card small {
  color: #0d1117;
}
body.mg-light .reviews-showcase::before {
  background: linear-gradient(rgba(13, 17, 23, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.035) 1px, transparent 1px);
}
body.mg-light .reviews-header p:not(.reviews-kicker) {
  color: #0d1117;
}
body.mg-light .review-stats div {
  background: rgba(13, 17, 23, 0.396);
  border: 1px solid rgba(13, 17, 23, 0.004);
  box-shadow: 0 18px 42px rgba(13, 17, 23, 0.06);
}
body.mg-light .review-stats span {
  color: #0d1117;
}
body.mg-light .chrome-store-review-cta {
  border: 1px solid rgba(13, 17, 23, 0.06);
  box-shadow: 0 20px 42px rgba(108, 134, 0, 0.16),
    inset 0 1px 0 rgba(13, 17, 23, 0.286);
}
body.mg-light .chrome-store-review-cta::after {
  background: linear-gradient(90deg, transparent, rgba(13, 17, 23, 0.341), transparent);
}
body.mg-light .chrome-store-review-cta:hover,
body.mg-light .chrome-store-review-cta:focus-visible {
  box-shadow: 0 24px 50px rgba(108, 134, 0, 0.2),
    inset 0 1px 0 rgba(13, 17, 23, 0.319);
}
body.mg-light .review-arrows button {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.004);
}
body.mg-light .review-card {
  border: 1px solid rgba(13, 17, 23, 0.004);
  box-shadow: inset 0 0 0 4px rgba(13, 17, 23, 0.002),
    0 28px 76px rgba(13, 17, 23, 0.08);
}
body.mg-light .review-card-main {
  background: rgba(13, 17, 23, 0.506);
}
body.mg-light .review-card-main::before {
  color: #0d1117;
}
body.mg-light .review-card-main p {
  color: #0d1117;
}
body.mg-light .review-author span,
body.mg-light .review-avatar-stack span {
  color: #0d1117;
  background: #ffffff;
}
body.mg-light .review-author small {
  color: #0d1117;
}
body.mg-light .reviews-progress {
  background: rgba(13, 17, 23, 0.385);
  border: 1px solid rgba(13, 17, 23, 0.004);
  box-shadow: 0 16px 42px rgba(13, 17, 23, 0.07);
}
body.mg-light .reviews-progress button {
  background: rgba(13, 17, 23, 0.011);
}
body.mg-light .reviews-progress button.is-active {
  background: #ffffff;
}
body.mg-light .reviews-trust {
  color: #0d1117;
}
body.mg-light .review-avatar-stack span {
  background: #ffffff;
}
body.mg-light .review-avatar-stack span:nth-child(3) {
  background: #ffffff;
}
body.mg-light .hack-page {
  color: #0d1117;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 44%, #ffffff 100%);
}
body.mg-light .hack-hero {
  border-top: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light .hack-hero::before {
  background: linear-gradient(90deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 45%, rgba(13, 17, 23, 0.1) 100%),
    radial-gradient(circle at 82% 40%, rgba(199, 255, 0, 0.18), transparent 28%);
}
body.mg-light .hack-hero::after {
  background: linear-gradient(rgba(13, 17, 23, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.033) 1px, transparent 1px);
}
body.mg-light .hack-hero-copy h1 {
  color: #0d1117;
}
body.mg-light .hack-hero-copy > p:not(.hack-eyebrow) {
  color: #0d1117;
}
body.mg-light .hack-status-panel {
  background: linear-gradient(160deg, rgba(13, 17, 23, 0.12), rgba(13, 17, 23, 0.039)),
    rgba(13, 17, 23, 0.1);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.12),
    0 42px 100px rgba(13, 17, 23, 0.1),
    0 0 70px rgba(199, 255, 0, 0.09);
}
body.mg-light .hack-status-panel::before {
  border: 1px dashed rgba(13, 17, 23, 0.12);
}
body.mg-light .hack-panel-top {
  color: #0d1117;
}
body.mg-light .hack-panel-lines span {
  background: linear-gradient(90deg, rgba(199, 255, 0, 0.7), rgba(13, 17, 23, 0.12));
}
body.mg-light .hack-status-panel li {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.061);
}
body.mg-light .hack-intro {
  background: radial-gradient(circle at 12% 0%, rgba(199, 255, 0, 0.1), transparent 28%),
    #ffffff;
}
body.mg-light .hack-intro h2,
body.mg-light .hack-heading-block h2,
body.mg-light .hack-process h2 {
  color: #0d1117;
}
body.mg-light .hack-intro-copy p,
body.mg-light .hack-heading-block p:not(.hack-eyebrow),
body.mg-light .hack-process-copy > p:not(.hack-eyebrow),
body.mg-light .hack-steps p,
body.mg-light .hack-feature-card p {
  color: #0d1117;
}
body.mg-light .hack-feature-card {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: radial-gradient(125% 90% at 100% 0%, rgba(199, 255, 0, 0.06), transparent 56%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.018)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 24px 60px rgba(13, 17, 23, 0.1);
}
body.mg-light .hack-feature-card:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.099),
    0 32px 80px rgba(13, 17, 23, 0.1),
    0 0 54px rgba(199, 255, 0, 0.11);
}
body.mg-light .hack-feature-card span {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.303),
    0 10px 26px rgba(199, 255, 0, 0.26);
}
body.mg-light .hack-feature-card h3,
body.mg-light .hack-steps h3,
body.mg-light .hack-compare-card h3 {
  color: #0d1117;
}
body.mg-light .hack-process {
  background: linear-gradient(135deg, rgba(199, 255, 0, 0.1), rgba(244, 4, 80, 0.08)),
    #ffffff;
}
body.mg-light .hack-steps article {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.066), rgba(13, 17, 23, 0.02));
}
body.mg-light .hack-steps article:hover {
  background: linear-gradient(180deg, rgba(199, 255, 0, 0.05), rgba(13, 17, 23, 0.02));
}
body.mg-light .hack-comparison {
  color: #0d1117;
  background: radial-gradient(circle at 14% 0%, rgba(199, 255, 0, 0.1), transparent 30%),
    radial-gradient(circle at 86% 100%, rgba(244, 4, 80, 0.1), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-top: 1px solid rgba(13, 17, 23, 0.066);
  border-bottom: 1px solid rgba(13, 17, 23, 0.066);
}
body.mg-light .hack-comparison h2 {
  color: #0d1117;
}
body.mg-light .hack-compare-card.muted {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.039), rgba(13, 17, 23, 0.011)),
    #ffffff;
  color: #5b626d;
}
body.mg-light .hack-compare-card.muted h3 {
  color: #0d1117;
}
body.mg-light .hack-compare-card.featured {
  color: #0d1117;
  background: radial-gradient(125% 80% at 100% 0%, rgba(199, 255, 0, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.055), rgba(13, 17, 23, 0.015)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.088),
    0 30px 80px rgba(13, 17, 23, 0.1),
    0 0 70px rgba(199, 255, 0, 0.1);
}
body.mg-light .hack-compare-card.muted li::before {
  background-color: rgba(13, 17, 23, 0.055);
}
body.mg-light .pricing-page {
  background: radial-gradient(circle at 80% 4%, rgba(244, 4, 80, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 34%, #ffffff 100%);
}
body.mg-light .pricing-promo {
  background: linear-gradient(180deg, rgba(244, 4, 80, 0.05) 0%, rgba(244, 4, 80, 0.18) 100%) padding-box,
    linear-gradient(135deg, rgba(244, 4, 80, 0.55) 0%, rgba(244, 4, 80, 0.12) 55%, rgba(13, 17, 23, 0.055) 100%) border-box;
  box-shadow: inset 0 0 64px 0 rgba(244, 4, 80, 0.32),
    0 8px 24px 0 rgba(13, 17, 23, 0.1);
}
body.mg-light .sale-badge,
body.mg-light .popular-ribbon,
body.mg-light .discount-chip,
body.mg-light .new-chip {
  color: #0d1117;
}
body.mg-light .pricing-promo h2 {
  color: #0d1117;
}
body.mg-light .pricing-promo p {
  color: #0d1117;
}
body.mg-light .pricing-promo.home-pricing-promo {
  background: linear-gradient(115deg, rgba(244, 4, 80, 0.18) 0%, rgba(244, 4, 80, 0.06) 44%, rgba(244, 4, 80, 0) 72%) padding-box,
    linear-gradient(130deg, rgba(244, 4, 80, 0.62) 0%, rgba(244, 4, 80, 0.16) 42%, rgba(13, 17, 23, 0.066) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.077),
    0 20px 54px rgba(244, 4, 80, 0.14);
}
body.mg-light .pricing-promo.home-pricing-promo h1 {
  color: #0d1117;
}
body.mg-light .pricing-promo.home-pricing-promo h2 {
  color: #0d1117;
}
body.mg-light .plan-section {
  border: 1px solid rgba(13, 17, 23, 0.03);
  background: radial-gradient(circle at 50% 0%, rgba(61, 27, 96, 0.48), transparent 33%),
    radial-gradient(circle at 88% 22%, rgba(244, 4, 80, 0.08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.022),
    0 22px 70px rgba(13, 17, 23, 0.1);
}
body.mg-light .plans-heading h2 {
  color: #0d1117;
}
body.mg-light .plans-heading p {
  color: #0d1117;
}
body.mg-light .plan-card {
  border: 1px solid rgba(13, 17, 23, 0.041);
  background: radial-gradient(circle at 50% 104%, rgba(13, 17, 23, 0.016), transparent 47%),
    linear-gradient(180deg, #f6f7f9 0%, #f6f7f9 100%);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.033),
    0 18px 44px rgba(13, 17, 23, 0.1);
}
body.mg-light .plan-card h3 {
  color: #0d1117;
}
body.mg-light .plan-card p {
  color: #0d1117;
}
body.mg-light .price strong {
  color: #0d1117;
}
body.mg-light .price span,
body.mg-light .price s {
  color: #0d1117;
}
body.mg-light .included-box {
  background: radial-gradient(circle at 96% 0%, rgba(13, 17, 23, 0.044), transparent 40%),
    linear-gradient(145deg, rgba(13, 17, 23, 0.05), rgba(13, 17, 23, 0.05));
  border: 1px solid rgba(13, 17, 23, 0.033);
}
body.mg-light .included-box h4 {
  color: #0d1117;
}
body.mg-light .feature-list li {
  color: #0d1117;
}
body.mg-light .feature-list .is-included {
  color: #0d1117;
}
body.mg-light .feature-list .is-excluded {
  color: #5b626d;
}
body.mg-light .feature-divider {
  color: #5b626d;
}
body.mg-light .feature-divider::before,
body.mg-light .feature-divider::after {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .plan-cta.ultra {
  color: #0d1117;
}
body.mg-light .faq-section h2 {
  color: #0d1117;
}
body.mg-light .faq-item {
  border: 1px solid rgba(13, 17, 23, 0.044);
  background: rgba(13, 17, 23, 0.028);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.022);
}
body.mg-light .faq-item[open] {
  background: rgba(13, 17, 23, 0.044);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.033),
    0 16px 40px rgba(13, 17, 23, 0.1);
}
body.mg-light .faq-item summary {
  color: #0d1117;
}
body.mg-light .faq-item summary::after {
  border-right: 2px solid rgba(13, 17, 23, 0.264);
  border-bottom: 2px solid rgba(13, 17, 23, 0.264);
}
body.mg-light .faq-item[open] summary {
  color: #0d1117;
}
body.mg-light .faq-answer p {
  color: #5b626d;
}
body.mg-light .faq-cta {
  color: #0d1117;
}
body.mg-light .mg-account-panel {
  border: 1px solid rgba(13, 17, 23, 0.088);
  background: linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 1px 0 rgba(13, 17, 23, 0.044) inset,
    0 24px 60px -20px rgba(13, 17, 23, 0.1),
    0 8px 24px -12px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-account-head {
  border-bottom: 1px solid rgba(13, 17, 23, 0.066);
}
body.mg-light .mg-account-name {
  color: #0d1117;
}
body.mg-light .mg-account-item {
  color: #5b626d;
}
body.mg-light .mg-account-item:hover,
body.mg-light .mg-account-item:focus-visible {
  background: rgba(13, 17, 23, 0.055);
  color: #0d1117;
}
body.mg-light .mg-account-plan {
  background: rgba(13, 17, 23, 0.06);
  color: #5b626d;
}
body.mg-light .mg-account-plan.is-ultimate {
  background: #0d1117;
  color: #ffffff;
}
body.mg-light header.site-header {
  background: rgba(13, 17, 23, 0.1);
  border-bottom: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light header.site-header .main-nav a:hover,
body.mg-light header.site-header .main-nav a:focus-visible {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light header.site-header .nav-pill-badge {
  color: #0d1117;
}
body.mg-light header.site-header .nav-support:hover,
body.mg-light header.site-header .nav-support:focus-visible {
  color: #0d1117 !important;
}
body.mg-light header.site-header .menu-toggle {
  color: #0d1117;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
    rgba(13, 17, 23, 0.05);
}
body.mg-light .dbp-close {
  background: rgba(13, 17, 23, 0.066);
  color: #5b626d;
}
body.mg-light .dbp-close:hover {
  background: rgba(13, 17, 23, 0.12);
  color: #0d1117;
}
body.mg-light .dbp-title {
  color: #0d1117;
}
body.mg-light .dbp-video-wrap {
  background: #ffffff;
}
body.mg-light .mg-demo {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.mg-light .mg-demo-head h2 {
  color: #0d1117;
}
body.mg-light .mg-demo-stage {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(13, 17, 23, 0.099);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 24px 60px -30px rgba(13, 17, 23, 0.1),
    0 50px 120px -24px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-demo-stage:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 60px 140px -24px rgba(13, 17, 23, 0.1),
    0 0 70px -10px rgba(199, 255, 0, 0.1);
}
body.mg-light .mg-demo-stage::before {
  background: #ffffff;
}
body.mg-light .quiz-feature {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #ffffff 100%);
}
body.mg-light .quiz-feature-head h2 {
  color: #0d1117;
}
body.mg-light .quiz-feature-head > p {
  color: #0d1117;
}
body.mg-light .quiz-feature-stage {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(13, 17, 23, 0.099);
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.055),
    0 24px 60px -30px rgba(13, 17, 23, 0.1),
    0 50px 120px -24px rgba(13, 17, 23, 0.1);
}
body.mg-light .quiz-feature-stage:hover {
  box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
    0 60px 140px -24px rgba(13, 17, 23, 0.1),
    0 0 70px -10px rgba(199, 255, 0, 0.1);
}
body.mg-light .quiz-feature-stage::before {
  background: #ffffff;
}
body.mg-light .quiz-feature-video {
  background: #ffffff;
}
body.mg-light .quiz-feature-badge {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.1);
  border: 1px solid rgba(13, 17, 23, 0.12);
  box-shadow: 0 10px 26px rgba(13, 17, 23, 0.1);
}
/* ── Video player chrome does NOT follow the page theme ──────────────────
   Everything else on a light page is ink on paper. The player controls are
   not on the page — they float over a video frame that can be any colour, so
   inking them dark and dropping the scrim to a 10% wash made them disappear
   into the footage (worst over the white Edpuzzle and DeltaMath recordings).
   These rules deliberately restore the dark-chrome player from styles.css.
   If a light-tinted player is ever wanted, it needs an opaque bar, not a
   recolour. ── */
body.mg-light .qp-bigplay {
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(10, 12, 16, 0.46);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
}
body.mg-light .qp-bigplay:hover {
  background: rgba(10, 12, 16, 0.62);
}
body.mg-light .qp-bar {
  background: linear-gradient(
    180deg,
    rgba(4, 6, 9, 0) 0%,
    rgba(4, 6, 9, 0.18) 22%,
    rgba(4, 6, 9, 0.52) 46%,
    rgba(4, 6, 9, 0.82) 72%,
    rgba(4, 6, 9, 0.94) 100%
  );
}
body.mg-light .qp-time {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.mg-light .qp-btn {
  color: #fff;
}
body.mg-light .qp-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
body.mg-light .qp-menu {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 15, 19, 0.96);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
body.mg-light .qp-menu-title {
  color: rgba(255, 255, 255, 0.5);
}
body.mg-light .qp-menu button {
  color: rgba(255, 255, 255, 0.85);
}
body.mg-light .qp-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.mg-light .legal-meta {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .legal-meta time {
  color: #5b626d;
}
body.mg-light .legal-intro {
  color: #5b626d;
}
body.mg-light .legal-block h3 {
  color: #0d1117;
}
body.mg-light .legal-block ul li {
  color: #5b626d;
}
body.mg-light .legal-quote {
  background: linear-gradient(180deg, rgba(244, 4, 80, 0.045), rgba(13, 17, 23, 0.013));
}
body.mg-light .legal-quote blockquote {
  color: #0d1117;
}
body.mg-light .sg-mark {
  box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.12) inset, 0 6px 18px rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-mark::after {
  background: radial-gradient(circle at 32% 30%, rgba(13, 17, 23, 0.468) 0 1.6px, transparent 2px),
    radial-gradient(circle at 64% 62%, rgba(13, 17, 23, 0.303) 0 1.1px, transparent 1.6px);
}
body.mg-light .sg-switcher {
  background: rgba(13, 17, 23, 0.033);
}
body.mg-light .sg-switcher a:hover,
body.mg-light .sg-switcher a:focus-visible {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .sg-hero-shade {
  background: radial-gradient(120% 90% at 50% 0%, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 62%, var(--black) 100%);
}
body.mg-light .sg-product-card:hover {
  box-shadow: 0 22px 50px rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-product-feats li {
  color: #5b626d;
}
body.mg-light .sg-product-card--delta .sg-product-cta,
body.mg-light .sg-product-card--quizlet .sg-product-cta {
  color: #0d1117;
}
body.mg-light .sg-page--hub .sg-feature-icon {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .sg-soon::before {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.055) 1px, transparent 1px);
}
body.mg-light .sg-header {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .sg-nav a:hover,
body.mg-light .sg-nav a:focus-visible {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-pricing:hover {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-header .login-button:hover {
  background: rgba(13, 17, 23, 0.066);
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .sg-header .signup-button {
  border: 1px solid rgba(13, 17, 23, 0.154);
}
body.mg-light .sg-btn--ghost {
  background: rgba(13, 17, 23, 0.066);
}
body.mg-light .sg-btn--ghost:hover {
  background: rgba(13, 17, 23, 0.12);
  border-color: rgba(13, 17, 23, 0.12);
}
body.mg-light .sg-btn::before {
  background: linear-gradient(100deg, transparent, rgba(13, 17, 23, 0.248), transparent);
}
body.mg-light .mg-plugin-hero {
  background: #ffffff;
}
body.mg-light .mg-plugin-hero .ph-grid {
  background-image: radial-gradient(circle, rgba(13, 17, 23, 0.055) 1px, transparent 1px);
}
body.mg-light .mg-plugin-hero .ph-stage::after {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 23, 0.1) 55%, var(--black) 100%);
}
body.mg-light .mg-plugin-hero .ph-title {
  color: #0d1117;
}
body.mg-light .mg-plugin-hero .ph-core {
  stroke: #ffffff;
}
body.mg-light .mg-plugin-hero .ph-plug path,
body.mg-light .mg-plugin-hero .ph-plug rect {
  fill: #ffffff;
  stroke: #f6f7f9;
}
body.mg-light .mg-plugin-hero .ph-pop {
  box-shadow: 0 24px 60px -18px rgba(13, 17, 23, 0.1), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .ph-pop.is-live {
  box-shadow: 0 26px 74px -14px rgba(52,224,122,.34), 0 0 0 1px rgba(52,224,122,.16), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .pop-badge {
  color: #0d1117;
}
body.mg-light .mg-plugin-hero .tgl {
  box-shadow: inset 0 1px 2px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .tgl-i {
  background: rgba(13, 17, 23, 0.468);
}
body.mg-light .mg-plugin-hero .tgl-o {
  border: 2px solid rgba(13, 17, 23, 0.468);
}
body.mg-light .mg-plugin-hero .knob {
  box-shadow: 0 .8px 1.2px -.6px rgba(13, 17, 23, 0.1), 0 2.1px 3px -1.25px rgba(13, 17, 23, 0.1), 0 4.2px 5.9px -1.9px rgba(13, 17, 23, 0.1), 0 8px 11px -2.5px rgba(13, 17, 23, 0.1), 0 16px 22px -3px rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-plugin-hero .pop-dash-inner {
  background: radial-gradient(90px at 80% -20%, rgba(13, 17, 23, 0.11), #ffffff 64%);
}
body.mg-light .mg-plugin-hero .pop-dash-shim {
  background: linear-gradient(90deg, transparent, rgba(13, 17, 23, 0.138), transparent);
}
body.mg-light .mg-plugin-hero .ph-annot-text {
  color: #0d1117;
}
body.mg-light .blog-lede-img {
  background: #ffffff;
  box-shadow: 0 18px 40px -22px rgba(13, 17, 23, 0.1);
}
body.mg-light .blog-article {
  background: linear-gradient(160deg, rgba(13, 17, 23, 0.033), rgba(13, 17, 23, 0.1));
}
body.mg-light .blog-lede {
  color: #5b626d;
}
body.mg-light .blog-share a {
  background: rgba(13, 17, 23, 0.055);
}
body.mg-light .blog-share a:hover {
  background: rgba(13, 17, 23, 0.12);
}
body.mg-light .blog-figure {
  background: #ffffff;
}
body.mg-light .blog-prose {
  color: #5b626d;
}
body.mg-light .blog-callout {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-grid-card {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-checks {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-quote {
  background: rgba(13, 17, 23, 0.039);
}
body.mg-light .blog-quote p {
  color: #5b626d;
}
body.mg-light .blog-cta {
  background: linear-gradient(160deg, rgba(13, 17, 23, 0.036), rgba(13, 17, 23, 0.1));
}
body.mg-light .blog-cta p {
  color: #5b626d;
}
body.mg-light .blog-side-card {
  background: rgba(13, 17, 23, 0.033);
}
body.mg-light .blog-toc-nav a:hover {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .blog-progress-track {
  background: rgba(13, 17, 23, 0.088);
}
body.mg-light .exr-pop {
  box-shadow: 0 30px 70px -22px rgba(13, 17, 23, 0.1), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop.live {
  box-shadow: 0 30px 76px -18px rgba(52, 224, 122, .3), 0 0 0 1px rgba(52, 224, 122, .16), 0 2px 8px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop .tgl {
  box-shadow: inset 0 1px 2px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop .tgl-i {
  background: rgba(13, 17, 23, 0.468);
}
body.mg-light .exr-pop .tgl-o {
  border: 2px solid rgba(13, 17, 23, 0.468);
}
body.mg-light .exr-pop .knob {
  box-shadow: 0 2px 3px -1px rgba(13, 17, 23, 0.1), 0 6px 10px -2px rgba(13, 17, 23, 0.1);
}
body.mg-light .exr-pop .pop-tile {
  color: #5b626d;
}
body.mg-light .exr-pop .pop-dash-inner {
  background: radial-gradient(90px at 80% -20%, rgba(13, 17, 23, 0.11), #ffffff 64%);
}
body.mg-light .exr-pop .pop-dash-shim {
  background: linear-gradient(90deg, transparent, rgba(13, 17, 23, 0.138), transparent);
}
body.mg-light .exr-note h4 {
  color: #0d1117;
}
body.mg-light .blog-step-media {
  background: #ffffff;
  box-shadow: 0 14px 34px -18px rgba(13, 17, 23, 0.1);
}
body.mg-light .mgctl-card {
  background: rgba(13, 17, 23, 0.033);
  border-top: 1px solid rgba(13, 17, 23, 0.055);
  border-right: 1px solid rgba(13, 17, 23, 0.055);
  border-bottom: 1px solid rgba(13, 17, 23, 0.055);
}
body.mg-light .mgctl-card h4 {
  color: #0d1117;
}
body.mg-light .mgctl-label {
  color: #5b626d;
}
body.mg-light .mgctl-help {
  background: #f6f7f9;
  color: #5b626d;
}
body.mg-light .mgctl-val {
  color: #0d1117;
}
body.mg-light .mgctl-slider {
  background: linear-gradient(to right, #22c55e 0%, #22c55e var(--fill, 100%), #ffffff var(--fill, 100%), #ffffff 100%);
}
body.mg-light .mgctl-note {
  color: #5b626d !important;
}
body.mg-light .mgctl-note b {
  color: #0d1117;
}
body.mg-light .ai-overview {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.05), rgba(13, 17, 23, 0.022));
}
body.mg-light .ai-ov-head > span:last-child {
  color: #0d1117;
}
body.mg-light .ai-ov-lead {
  color: #5b626d;
}
body.mg-light .ai-ov-lead strong {
  color: #0d1117;
}
body.mg-light .ai-ov-mark {
  color: #0d1117;
}
body.mg-light .blog-lede-img.is-placeholder {
  background: repeating-linear-gradient(45deg, rgba(13, 17, 23, 0.022) 0 14px, rgba(13, 17, 23, 0.05) 14px 28px);
}
body.mg-light .blog-lede-img.is-placeholder span {
  background: rgba(13, 17, 23, 0.1);
}
body.mg-light .mg-video {
  background: #ffffff;
}
body.mg-light .mg-video-unmute {
  background: rgba(13, 17, 23, 0.1);
  box-shadow: 0 8px 30px rgba(13, 17, 23, 0.1), 0 0 0 6px rgba(244, 4, 80, .08);
}
body.mg-light .mg-video-unmute:hover {
  background: rgba(13, 17, 23, 0.05);
}
body.mg-light .mg-video-bar {
  background: linear-gradient(to top, rgba(13, 17, 23, 0.1), rgba(13, 17, 23, 0.0));
}
body.mg-light .mg-video-bar button {
  background: rgba(13, 17, 23, 0.11);
  color: #0d1117;
}
body.mg-light .mg-video-bar button:hover {
  background: rgba(13, 17, 23, 0.121);
}
body.mg-light .mg-video-time {
  color: #0d1117;
}
body.mg-light .mg-video-time .mg-dur {
  color: #5b626d;
}
body.mg-light .mg-video-seek::after {
  background: rgba(13, 17, 23, 0.154);
}
body.mg-light .sg-hero-shade {
  background: radial-gradient(125% 95% at 50% 0%, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 56%, var(--black) 100%);
}
body.mg-light .blog-table thead th {
  background: rgba(13, 17, 23, 0.044);
}
body.mg-light .wl-fields {
  border: 1px solid rgba(13, 17, 23, 0.12);
  background: rgba(13, 17, 23, 0.05);
  box-shadow: 0 12px 34px rgba(13, 17, 23, 0.1);
}
body.mg-light .wl-fields:focus-within {
  box-shadow: 0 0 0 3px rgba(244, 4, 80, .14), 0 12px 34px rgba(13, 17, 23, 0.1);
}
body.mg-light .wl-input::placeholder {
  color: #5b626d;
}
body.mg-light .wl-btn {
  box-shadow: 0 6px 16px rgba(244, 4, 80, .28), inset 0 1px 0 rgba(13, 17, 23, 0.275);
}
body.mg-light .wl-nav {
  border: 1px solid rgba(13, 17, 23, 0.176);
  box-shadow: 0 12px 26px rgba(244, 4, 80, 0.26), inset 0 1px 0 rgba(13, 17, 23, 0.303);
}
body.mg-light .wl-nav:hover,
body.mg-light .wl-nav:focus-visible {
  box-shadow: 0 16px 34px rgba(244, 4, 80, 0.42), inset 0 1px 0 rgba(13, 17, 23, 0.33);
}
body.mg-light .mg-plugin-hero .ph-prem {
  background: linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 18px 40px -16px rgba(13, 17, 23, 0.1), 0 0 0 1px rgba(234,179,8,.28);
}
body.mg-light .mg-plugin-hero .ph-prem::after {
  background: #ffffff;
}
body.mg-light .mg-plugin-hero .ph-prem-txt {
  color: #0d1117;
}

@media (max-width: 720px) {
  body.mg-light .hack-hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 100%),
        radial-gradient(circle at 50% 18%, rgba(199, 255, 0, 0.16), transparent 34%);
  }
  body.mg-light .main-nav a {
    background: rgba(13, 17, 23, 0.039);
    border: 1px solid rgba(13, 17, 23, 0.066);
  }
  body.mg-light .main-nav .chrome-link {
    color: #0d1117;
  }
  body.mg-light .hero-shade {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 44%, rgba(13, 17, 23, 0.1) 100%),
        radial-gradient(circle at 52% 40%, rgba(199, 255, 0, 0.08), transparent 34%);
  }
  body.mg-light .menu-toggle {
    color: #0d1117;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
        rgba(13, 17, 23, 0.05);
    box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
        0 14px 30px rgba(13, 17, 23, 0.1);
  }
  body.mg-light .menu-toggle:hover,
  body.mg-light .menu-toggle:focus-visible {
    background: linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(13, 17, 23, 0.022)),
        rgba(13, 17, 23, 0.05);
  }
  body.mg-light .site-menu .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
  body.mg-light .site-menu .main-nav .chrome-link {
    color: #0d1117;
  }
}

@media (min-width: 721px) and (max-width: 1200px) {
  body.mg-light .menu-toggle {
    color: #0d1117;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
        rgba(13, 17, 23, 0.05);
    box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
        0 14px 30px rgba(13, 17, 23, 0.1);
  }
  body.mg-light .menu-toggle:hover,
  body.mg-light .menu-toggle:focus-visible {
    background: linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(13, 17, 23, 0.022)),
        rgba(13, 17, 23, 0.05);
  }
  body.mg-light .site-menu .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
  body.mg-light .site-menu .main-nav .chrome-link {
    color: #0d1117;
  }
}

@media (max-width: 900px) {
  body.mg-light .menu-toggle {
    color: #0d1117;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.061), rgba(13, 17, 23, 0.02)),
        rgba(13, 17, 23, 0.05);
    box-shadow: inset 0 1px 0 rgba(13, 17, 23, 0.066),
        0 14px 30px rgba(13, 17, 23, 0.1);
  }
  body.mg-light .site-menu .main-nav {
    color: #0d1117;
  }
  body.mg-light .site-menu .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
  body.mg-light .hero-shade {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.1) 0%, rgba(13, 17, 23, 0.1) 48%, rgba(13, 17, 23, 0.1) 100%),
        radial-gradient(circle at 50% 20%, rgba(199, 255, 0, 0.08), transparent 34%);
  }
}

@media (max-width: 940px) {
  /* only inside the open dropdown — inline links stay bare */
  body.mg-light header.site-header.is-menu-open .main-nav a {
    background: rgba(13, 17, 23, 0.044);
    border: 1px solid rgba(13, 17, 23, 0.077);
  }
}

@media (min-width: 768px) {
  body.mg-light .dbp {
    box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.1),
        0 0 48px -6px rgba(244, 4, 80, 0.18),
        0 28px 72px rgba(13, 17, 23, 0.1);
  }
}

@media (min-width: 1201px) {
  body.mg-light .header-actions {
    background: rgba(13, 17, 23, 0.1);
  }
}

@media (max-width: 760px) {
  body.mg-light .exr-li {
    background: rgba(13, 17, 23, 0.033);
  }
  body.mg-light .exr-li h4 {
    color: #0d1117;
  }
}

@media (max-width: 540px) {
  body.mg-light .wl-input {
    border: 1px solid rgba(13, 17, 23, 0.12);
    background: rgba(13, 17, 23, 0.055);
  }
}


/* ============================================================
   HAND-TUNED OVERRIDES
   Everything above is generated. These are the cases the derivation
   can't get right on its own, so they live last and win.
   ============================================================ */

/* Header — the derived rule turned it into a 10% ink wash because the dark
   sheet built it from a white-alpha frost. It wants to be plain white with a
   single hairline, matching memgenie.html. */
body.mg-light .site-header {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(13, 17, 23, 0.09);
}

/* The wordmark is a WHITE png,
so on a white header it disappears entirely.
   Every logo-*.png in assets is white-on-transparent,
so there's no dark
   variant to point at — invert it back to dark instead. hue-rotate keeps the
   genie mark's green from flipping to magenta under the inversion. */
body.mg-light .brand-logo,
body.mg-light .sg-logo-strip img,
body.mg-light .sg-logo-link img {
  filter: invert(1) hue-rotate(180deg);
}

/* Login button: the dark theme styles it as lime-on-lime-wash, which relies on
   a black backdrop to read. On white it's lime text on near-white — invisible.
   Give it the same ink text as the rest of the nav plus a real border. */
body.mg-light .login-button {
  background: #ffffff;
  color: #0d1117;
  border: 1px solid rgba(13, 17, 23, 0.09);
  box-shadow: none;
}
body.mg-light .login-button:hover,
body.mg-light .login-button:focus-visible {
  background: #f6f7f9;
  border-color: rgba(13, 17, 23, 0.18);
}

/* Active states. The dark theme marks "you are here" with lime text, which has
   plenty of contrast on black and almost none on white. Keep the lime as the
   background wash (it still reads as a highlight) but set the text to ink. */
body.mg-light .blog-toc-nav a.is-active,
body.mg-light .blog-toc-nav a[aria-current],
body.mg-light .main-nav a.active,
body.mg-light .main-nav a.is-active,
body.mg-light .site-menu a.active,
body.mg-light .site-menu a.is-active {
  color: #0d1117;
  font-weight: 600;
}
body.mg-light .blog-toc-nav a.is-active {
  background: rgba(244, 4, 80, 0.22);
}
body.mg-light .availability-pill,
body.mg-light .hack-eyebrow,
body.mg-light .blog-tag {
  color: #0d1117;
}

/* Safety net for nav/link text. A handful of the dark sheet's rules set link
   colour as a white ALPHA (rgba(255,255,255,.1) and friends) used against a
   black page; mapped to ink-alpha those come out at 10% opacity — technically
   present, practically invisible. Pin the nav's own colours rather than trying
   to rescue each derived rule. */
body.mg-light .main-nav a,
body.mg-light .site-menu a,
body.mg-light .header-actions a:not(.signup-button) {
  color: #5b626d;
}
body.mg-light .main-nav a:hover,
body.mg-light .site-menu a:hover {
  color: #0d1117;
}

/* Cards and panels: the derived pass flattens their dark fills to a whisper of
   tint, which alone leaves them shapeless on white. Give the shared surfaces a
   real hairline so they read as cards again. */
body.mg-light .blog-article,
body.mg-light .blog-side-card,
body.mg-light .blog-grid-card,
body.mg-light .blog-callout,
body.mg-light .blog-quote,
body.mg-light .exr-note,
body.mg-light .pop-tile,
body.mg-light .mgctl-card,
body.mg-light .feature-card,
body.mg-light .faq-item {
  background: #ffffff;
  border: 1px solid rgba(13, 17, 23, 0.09);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04);
}

/* Inset/secondary surfaces stay faintly grey so nested blocks are still
   distinguishable from the card they sit in. */
body.mg-light .blog-step,
body.mg-light .pop-row,
body.mg-light .mgctl-row {
  background: #f6f7f9;
  border: 1px solid rgba(13, 17, 23, 0.09);
}

/* Body copy: the dark sheet leans on pure white and near-white greys for text.
   Mapped 1:1 those land too light on a white page, so pin the prose scale. */
body.mg-light .blog-prose,
body.mg-light .blog-prose p,
body.mg-light .blog-prose li,
body.mg-light .exr-note,
body.mg-light .blog-lede {
  color: #5b626d;
}
body.mg-light h1,
body.mg-light h2,
body.mg-light h3,
body.mg-light h4,
body.mg-light .blog-title {
  color: #0d1117;
}
body.mg-light .blog-meta,
body.mg-light .exr-num,
body.mg-light .blog-step-num {
  color: #79808b;
}

/* Lime CTAs keep dark text — same as the dark theme, and the contrast is
   better on white than any inverted variant. The derived pass flipped their
   inner white highlight to dark, which read as a dent. */
body.mg-light .signup-button,

/* Anything painting a full-bleed dark video/backdrop behind light text has to
   keep its own contrast — leave those alone rather than bleaching them. */

/* ============================================================
   HEADER STAYS DARK — site-wide rule (Aug 2026)
   The header bar keeps the dark theme even on light pages: the
   logo PNGs are white-on-transparent, and inverting them for a
   white bar made them too hard to see. Everything here restores
   styles.css's dark header verbatim (literal values — the vars
   like --muted/--white are remapped under body.mg-light) and
   must stay LAST so it beats every earlier header rule above.
   ============================================================ */

body.mg-light .site-header,
body.mg-light header.site-header {
  background: rgba(8, 9, 11, 0.98);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* Logos stay white-on-transparent on the dark bar — no inversion. */
body.mg-light .brand-logo,
body.mg-light .sg-logo-strip img,
body.mg-light .sg-logo-link img {
  filter: none;
}

/* Nav links: grey on dark, white on hover, lime when active. */
body.mg-light .main-nav { color: #9b9da3; }
body.mg-light .main-nav a,
body.mg-light .site-menu a,
body.mg-light header.site-header .main-nav a {
  color: #9b9da3;
}
body.mg-light .main-nav a:hover,
body.mg-light .main-nav a:focus-visible,
body.mg-light .site-menu a:hover,
body.mg-light header.site-header .main-nav a:hover,
body.mg-light header.site-header .main-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
body.mg-light .main-nav .active,
body.mg-light .main-nav a.active,
body.mg-light .main-nav a.is-active,
body.mg-light .site-menu a.active,
body.mg-light .site-menu a.is-active,
body.mg-light header.site-header .main-nav a.active {
  color: var(--lime);
}
body.mg-light header.site-header .nav-pill-badge { color: #ffffff; }
body.mg-light header.site-header .nav-support { color: #98a0f5; }
body.mg-light header.site-header .nav-support:hover,
body.mg-light header.site-header .nav-support:focus-visible {
  color: #ffffff !important;
  background: rgba(88, 101, 242, 0.18) !important;
}

/* Login / signup back to the lime-on-dark treatment. */
body.mg-light .login-button {
  color: var(--lime);
  background: rgba(244, 4, 80, 0.08);
  border: 1px solid rgba(244, 4, 80, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.mg-light .login-button:hover,
body.mg-light .login-button:focus-visible {
  background: rgba(244, 4, 80, 0.13);
  border-color: rgba(244, 4, 80, 0.5);
  box-shadow:
    0 10px 24px rgba(244, 4, 80, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.mg-light .login-button::before,
body.mg-light .signup-button::before {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
body.mg-light .signup-button {
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 12px 26px rgba(244, 4, 80, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.mg-light .signup-button:hover,
body.mg-light .signup-button:focus-visible {
  box-shadow:
    0 16px 34px rgba(244, 4, 80, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (min-width: 1201px) {
  body.mg-light .header-actions {
    background: rgba(8, 9, 11, 0.98);
  }
}

/* Mobile: hamburger + drawer keep the dark treatment too. (Scoped to the
   widths where the toggle exists so desktop stays byte-exact.) */
@media (max-width: 1200px) {
body.mg-light .menu-toggle {
  color: #f5f5f5;
  border: 1px solid rgba(199, 255, 0, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(18, 20, 24, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.2);
}
body.mg-light .menu-toggle:hover,
body.mg-light .menu-toggle:focus-visible {
  border-color: rgba(199, 255, 0, 0.36);
  background:
    linear-gradient(180deg, rgba(199, 255, 0, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(18, 20, 24, 0.96);
}
body.mg-light .site-menu .main-nav { color: #9b9da3; }
}
/* NOTE: pill backgrounds on nav links are MOBILE-ONLY in the dark theme.
   They are restored inside the media queries below — never unscoped, or
   the desktop nav grows outlines it never had (display: contents makes
   .site-menu match the desktop nav too). */
body.mg-light .site-menu .main-nav .chrome-link,
body.mg-light .main-nav .chrome-link {
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 720px) {
  body.mg-light .site-menu .main-nav .active {
    color: var(--lime);
    background: rgba(199, 255, 0, 0.09);
    border-color: rgba(199, 255, 0, 0.15);
  }
}

/* --- Specificity fixes for the block above: these selectors mirror the
   light rules they must beat (same or higher specificity, placed later).
   Verified against membean-bot.html's dark header, computed-style diff. --- */

/* Header text inherits white again (body.mg-light sets ink), and the border
   matches the sg-layer's header.site-header value (0.05, not the base 0.02). */
body.mg-light .site-header,
body.mg-light header.site-header {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Beats: body.mg-light header.site-header .menu-toggle (ink wash). The dark
   theme colours the toggle at every width but only adds its shadow in the
   squeezed layouts, so the shadow is scoped and the colours are not. */
body.mg-light header.site-header .menu-toggle,
body.mg-light .site-header .menu-toggle {
  color: #f5f5f5;
  border: 1px solid rgba(199, 255, 0, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(18, 20, 24, 0.92);
}
@media (max-width: 1200px) {
  body.mg-light header.site-header .menu-toggle,
  body.mg-light .site-header .menu-toggle {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 14px 30px rgba(0, 0, 0, 0.2);
  }
}

/* Beats: body.mg-light .header-actions a:not(.signup-button) (grey text),
   and undoes the .site-menu a grey from the block above on both buttons. */
body.mg-light .header-actions a.login-button,
body.mg-light .site-menu a.login-button {
  color: var(--lime);
  background: rgba(199, 255, 0, 0.07);
  border: 1px solid rgba(199, 255, 0, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.mg-light .header-actions a.login-button:hover,
body.mg-light .header-actions a.login-button:focus-visible {
  background: rgba(199, 255, 0, 0.12);
}
body.mg-light .header-actions a.signup-button,
body.mg-light .site-menu a.signup-button {
  color: #050705;
}

/* Nav pills in the squeezed layouts: the light media rules ink-wash them;
   restore the dark white-alpha pills at the same breakpoints. */
@media (max-width: 940px) {
  body.mg-light header.site-header .main-nav a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
}
@media (max-width: 720px) {
  body.mg-light .main-nav a,
  body.mg-light .site-menu .main-nav a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
}
@media (min-width: 721px) and (max-width: 1200px) {
  body.mg-light .site-menu .main-nav a {
    background: rgba(255, 255, 255, 0.04);
    border: 0;
  }
}


/* ── Family sections on a white page ──────────────────────────────────────
   .sg-feature-card / .sg-product-card / .sg-step were only ever used on the
   dark hub, so they had no light counterpart — on white they rendered as
   black cards with near-invisible headings. index.html is white now. */
body.mg-light .sg-feature-card,
body.mg-light .sg-product-card,
body.mg-light .sg-step {
  background: #fff;
  border: 1px solid #e7eaf0;
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 16px 34px -26px rgba(13, 17, 23, 0.4);
}
body.mg-light .sg-feature-card h3,
body.mg-light .sg-product-card h3,
body.mg-light .sg-step h3,
body.mg-light .sg-product-name { color: #0d1117; }
body.mg-light .sg-feature-card p,
body.mg-light .sg-product-copy,
body.mg-light .sg-step p { color: #5b626d; }
body.mg-light .sg-feature-icon {
  background: rgba(244, 4, 80, 0.08);
  border: 1px solid rgba(244, 4, 80, 0.16);
}
body.mg-light .sg-feature-icon svg { stroke: #f40450; }
body.mg-light .sg-section-head h2,
body.mg-light .sg-section-head h1 { color: #0d1117; }
body.mg-light .sg-section-head p { color: #5b626d; }
body.mg-light .sg-eyebrow { color: #f40450; }
body.mg-light .sg-cta-inner {
  background: #f7f8fa;
  border: 1px solid #e7eaf0;
}
body.mg-light .sg-cta-inner h2 { color: #0d1117; }
body.mg-light .sg-cta-inner p { color: #5b626d; }
body.mg-light .sg-btn--ghost {
  color: #0d1117;
  background: #fff;
  border: 1px solid #e7eaf0;
}
body.mg-light .sg-btn--ghost:hover { background: #f2f4f7; border-color: #d8dee7; }


/* The footer is one black panel on every page now, light or dark — these used
   to repaint it for white pages and left ink-on-lime text on a black ground. */
body.mg-light .site-footer { color: #fff; background: #08090b; }


/* The blanket heading colour above also catches the footer's column titles,
   which sit on the black panel — put them back. */
body.mg-light .site-footer h2,
body.mg-light .footer-column h2 { color: rgba(255, 255, 255, 0.42); }
body.mg-light .site-footer p,
body.mg-light .footer-brandline p { color: rgba(255, 255, 255, 0.82); }
body.mg-light .footer-lime-bottom,
body.mg-light .footer-lime-bottom p { color: rgba(255, 255, 255, 0.5); }
body.mg-light .footer-column a { color: rgba(255, 255, 255, 0.76); }
body.mg-light .footer-column a:hover { color: #fff; }

/* ── Inline nav links are bare ──────────────────────────────────────────
   Several breakpoint blocks above (721–1200px, ≤940px, ≤720px) give
   `.main-nav a` a translucent box because they were written for the OPEN
   hamburger dropdown, where the links stack full-width. The consolidated
   header keeps the nav inline through most of those widths, so every plain
   link wore a grey rectangle. This outranks all of them and strips the box
   unless the menu is actually open; hover and keyboard focus keep their
   highlight from the rules above. ── */
body.mg-light header.site-header:not(.is-menu-open) .main-nav a:not(:hover):not(:focus-visible) {
  background: transparent;
  border-color: transparent;
}

/* ── Account menu items on the light theme ─────────────────────────────
   auth.js mounts the account panel inside .header-actions, which lives in
   .site-menu — so the mobile-menu rule `body.mg-light .site-menu a:hover
   { color: #fff }` (same specificity, later in this file) was winning over
   `body.mg-light .mg-account-item:hover` and painting the hovered item white
   on the white panel. One extra class on the selector settles it. ── */
body.mg-light .site-menu .mg-account-item:hover,
body.mg-light .site-menu .mg-account-item:focus-visible,
body.mg-light .header-actions .mg-account-item:hover,
body.mg-light .header-actions .mg-account-item:focus-visible {
  color: #0d1117;
  background: rgba(13, 17, 23, 0.055);
}

/* ---- /memgenie-light.css?v=39 ---- */
/* ============================================================
   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; }

/* Class name kept — it is on markup across several pages — but the fill is
   the brand crimson now, matching the header's Sign up and the plan CTAs. */
.mgh-btn--lime {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%),
    #f40450;
  color: #fff;
  box-shadow:
    inset 0 -3px 0 #b80038,
    0 4px 3px rgba(13, 17, 23, 0.14),
    0 16px 24px -12px rgba(244, 4, 80, 0.45);
}

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

.mgh-btn--lime:hover,
.mgh-btn--lime:focus-visible {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
    #ff2159;
  box-shadow:
    inset 0 -3px 0 #b80038,
    0 4px 3px rgba(13, 17, 23, 0.14),
    0 22px 32px -12px rgba(244, 4, 80, 0.55);
}

.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: #f40450; }

.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; }

/* --- quiz demo block ---
   build-light-theme.py derived both of these as dark-on-light alphas: the
   play button landed at 10% ink over a bright video still and the CTA at 5%,
   so neither was really visible. Same crimson as every other action. */
/* The crimson fill that used to be here made this button a different control
   from the hero's, which is the translucent blurred glass in styles.css
   (.qp-bigplay). Two big play buttons on one page reading as two different
   things is worse than the visibility problem the fill was solving — the glass
   already carries its own border, blur and drop shadow over a bright still. */

body.mg-light .quiz-feature .primary-cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%),
    #f40450;
  border: 1px solid transparent;
  color: #fff;
  box-shadow:
    inset 0 -3px 0 #b80038,
    0 6px 4px rgba(13, 17, 23, 0.12),
    0 24px 24px -12px rgba(244, 4, 80, 0.28);
}
body.mg-light .quiz-feature .primary-cta:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
    #ff2159;
}

body.mg-light .quiz-feature-actions { margin-top: 22px; }

/* --- header buttons on the light pages ---
   light-theme.css re-applies the old lime to these two at
   `body.mg-light .header-actions a.<class>`, which out-specifies the
   site-wide rule in styles.css and lands after it. The result was the new
   crimson fill wearing the generated theme's near-black label and a lime
   drop shadow. The header bar is dark on every page, so the generated
   theme's light-background assumptions are simply wrong here.

   Pinned in this sheet because it loads last, and matched to the same
   selector shape so it wins on source order rather than an !important. */
body.mg-light .header-actions a.login-button,
body.mg-light .site-menu a.login-button {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
body.mg-light .header-actions a.login-button:hover,
body.mg-light .header-actions a.login-button:focus-visible,
body.mg-light .site-menu a.login-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

body.mg-light .header-actions a.signup-button,
body.mg-light .site-menu a.signup-button {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%),
    #f40450;
  border: 1px solid transparent;
  box-shadow:
    inset 0 -3px 0 #b80038,
    0 4px 3px rgba(0, 0, 0, 0.25),
    0 16px 20px -12px rgba(244, 4, 80, 0.55);
}
body.mg-light .header-actions a.signup-button:hover,
body.mg-light .header-actions a.signup-button:focus-visible,
body.mg-light .site-menu a.signup-button:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
    #ff2159;
  box-shadow:
    inset 0 -3px 0 #b80038,
    0 4px 3px rgba(0, 0, 0, 0.25),
    0 20px 26px -12px rgba(244, 4, 80, 0.6);
}

/* The generated theme darkened the shimmer sweep for a white button. These
   are dark and crimson, so it goes back to a light sheen. */
body.mg-light .login-button::before,
body.mg-light .signup-button::before {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
}

/* --- footer legibility ---
   build-light-theme.py collapsed the footer's ink down to
   rgba(13, 17, 23, 0.1) — 10% opacity on a bright lime panel, which is why
   the column titles and every link under them were barely there. Restored to
   the dark sheet's own values, which were correct for this background. */
/* The footer is a black panel on every page now, so these ink-on-lime
   colours would render dark text on a dark ground. Left intentionally
   blank — styles.css owns the footer palette. */

/* --- feature strip ---
   Four centred columns: icon plate, title, one line of copy.

   The title rule below used to read `.mgh-feat h2`, but both pages that ship
   this component (memgenie, delta-genie) mark the titles up as <h3>. It
   therefore never matched anything, and the titles had been rendering at the
   browser's default 18.7px with 1em margins above and below — which is what
   made the strip look unstyled and knocked the columns out of line with each
   other. */
.mgh-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.mgh-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

/* The plate tints itself from the icon's own colour, so each page keeps its
   own accent without this file needing to know what that accent is. */
.mgh-feat-ic {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--violet);
  background: rgba(139, 92, 246, 0.08);
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
}

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

.mgh-feat h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.mgh-feat h3,
.mgh-feat p { text-wrap: balance; }

/* No max-width: the column is already narrow, and capping it further forced
   "real-time." to break at its hyphen. The grid cell sets the measure. */
.mgh-feat p {
  margin: 5px 0 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .mgh-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
}

@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: repeat(2, minmax(0, 1fr)); gap: 26px 8px; }
  .mgh-feat { padding: 0 4px; }
  .mgh-feat-ic { width: 42px; height: 42px; }
  .mgh-feat p { font-size: 12.5px; }
}

/* ---------- 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.
     Colours (track fill, thumb) come from styles.css now — only the sizes
     that make it thumb-friendly belong here. */
  body.mg-light .qp-seek {
    height: 24px;
  }

  body.mg-light .qp-seek::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    margin-top: -5px;
  }

  body.mg-light .qp-seek::-moz-range-thumb {
    width: 15px;
    height: 15px;
  }

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

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

/* ---- /mobile.css?v=8 ---- */
/* ── Phone pass (2026-10-16) ─────────────────────────────────────────────
   Loaded LAST on every page, and every rule sits inside the ≤720px query, so
   tablets and desktop are untouched. Three jobs:
     1. Header: logo centred, smaller burger pinned right, shorter bar.
     2. Headlines bigger, subtitles shorter.
     3. Far less text: section ledes, card descriptions and footnotes are
        hidden on phones; headings, visuals, prices and buttons stay.
   The hidden copy is still in the page (desktop shows it), so nothing here
   changes what the site says — only how much of it a phone has to scroll.
   `html body` prefixes win the cascade over styles.css / light-theme.css
   without !important. ── */

/* Short phone-only copy, written next to the long version in the markup. */
.m-only { display: none; }

@media (max-width: 720px) {
  .m-only { display: revert; }
  .m-hide { display: none; }

  /* ── 1. Header ───────────────────────────────────────────────────────── */
  html body header.site-header,
  html body.mg-light header.site-header {
    grid-template-columns: 36px 1fr 36px;
    row-gap: 0;
    align-items: center;
    min-height: 0;
    padding: 9px 12px;
  }
  html body header.site-header .sg-brandwrap {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }
  html body header.site-header .sg-logo-link { gap: 8px; }
  html body header.site-header .sg-logo-mark { width: 30px; height: 30px; }
  html body header.site-header .sg-logo-word-img { width: 124px; height: auto; }

  html body header.site-header .menu-toggle,
  html body.mg-light header.site-header .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 9px;
    gap: 3px;
  }
  html body header.site-header .menu-toggle span { width: 15px; height: 1.5px; }
  html body header.site-header .site-menu { grid-column: 1 / -1; grid-row: 2; }
  html body header.site-header.is-menu-open .site-menu { margin-top: 10px; }

  /* ── 2. Headlines ────────────────────────────────────────────────────── */
  /* Homepage masthead */
  html body.mg-light .hp-fan { padding-top: 26px; padding-left: 16px; padding-right: 16px; }
  /* Fixed lines that never wrap: "GenieCheats" / "The #1" / "Automation Tool"
     (index.html breaks after #1 with a phone-only <br class="m-only">; desktop
     keeps "The #1 Automation Tool" on one line). The longest phone line,
     "Automation Tool", is ~7.9em wide; dividing by 8.6 leaves room for Safari's
     wider rendering and the fallback font. 2026-10-18: the copy had become
     "The #1 Automation Tool" on one ~10.5em line, which ran off the screen. */
  html body.mg-light .hp-fan h1 .hp-line-in { white-space: nowrap; }
  html body.mg-light .hp-fan h1 {
    font-size: min(50px, calc((100vw - 32px) / 8.6));
    line-height: 1;
    letter-spacing: -0.035em;
  }
  html body.mg-light .hp-fan-lede {
    font-size: 16px;
    line-height: 1.45;
    max-width: 30ch;
    margin-top: 12px;
  }
  html body.mg-light .hp-fan-cta { margin-top: 18px; gap: 10px; }
  /* Platform grid: three across, logos and names only */
  html body.mg-light .hp-fan-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
  }
  html body.mg-light .hp-fan-item { padding: 12px 4px 10px; gap: 4px; }
  /* Three across, on a six-column grid so a short last row can be centred:
     one tile left over sits in the middle, two sit side by side in the middle. */
  html body.mg-light .hp-fan-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html body.mg-light .hp-fan-row > .hp-fan-item { grid-column: span 2; }
  html body.mg-light .hp-fan-row > .hp-fan-item:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  html body.mg-light .hp-fan-row > .hp-fan-item:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  html body.mg-light .hp-fan-item img { width: 34px; height: 34px; }
  html body.mg-light .hp-fan-item strong { font-size: 13px; }
  html body.mg-light .hp-fan-item small { display: none; }
  html body.mg-light .hp-fan-ssa,
  html body.mg-light .hp-fan-new { font-size: 7.5px; padding: 2px 5px; top: 4px; }

  /* Product-page hero: headline first, then the video, then the buttons */
  html body.mg-light .mgh-inner { display: flex; flex-direction: column; align-items: stretch; }
  html body.mg-light .mgh-title { order: 1; }
  html body.mg-light .mgh-sub { order: 2; }
  html body.mg-light .mgh-player { order: 3; }
  html body.mg-light .mgh-cta { order: 4; }
  html body.mg-light .mgh-trust { order: 5; }
  html body.mg-light .mgh-feats { order: 6; }
  /* "The #1" never splits across lines */
  html body.mg-light .mgh-title .mgh-g1 { white-space: nowrap; }
  html body.mg-light .mgh-title {
    font-size: clamp(40px, 12vw, 50px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 6px 0 10px;
  }
  html body.mg-light .mgh-sub {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 auto 16px;
    max-width: 32ch;
  }
  html body.mg-light .mgh-sub-b,
  html body.mg-light .mgh-sub br { display: none; }
  html body.mg-light .mgh-player { margin: 0 0 16px; }
  html body.mg-light .mgh-cta { margin-bottom: 14px; }
  /* "Trusted by 3,000+" appears three times in the hero; keep the rating pill */
  html body.mg-light .mgh-assure { display: none; }
  html body.mg-light .mgh-trust { flex-direction: row; justify-content: center; margin: 0 0 18px; }
  html body.mg-light .mgh-trust > :first-child:not(:only-child) { display: none; }
  /* Feature tiles: icon + title only */
  html body.mg-light .mgh-feat p { display: none; }
  html body.mg-light .mgh-feat { padding-bottom: 14px; }

  /* Other pages' h1s */
  html body .gp-hero h1,
  html body .plan-section h1,
  html body .plans-heading h1 { font-size: clamp(36px, 10.5vw, 44px); line-height: 1.04; }
  html body.sg-page:not(.mg-light) main h1 { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.08; }

  /* ── 3. Less text ────────────────────────────────────────────────────── */
  /* Section intros under an h2 */
  html body .sg-section-head > p,
  html body .plans-sub,
  html body .ob-lede,
  html body .mgv-head > p,
  html body [class$="-how-lede"],
  html body [class*="-how-lede "],
  html body [class$="-how-foot-note"],
  html body .dg-snip-lede,
  html body .gk-live-lede,
  html body .eg-lede,
  html body .eg-tiers-foot,
  html body .bk-modes-lede,
  html body .bk-modes-note,
  html body .gp-head > p,
  html body .gp-calc-note,
  html body .sg-cta-inner > p { display: none; }

  /* Card and list descriptions: keep the title, drop the sentence under it */
  html body .hp-steps-grid p,
  html body .sg-feature-card p,
  html body .mgf-copy p,
  html body .mgv-cap p,
  html body .dg-how-body p,
  html body .dg-snip-points p,
  html body ol[class$="x-legend"] li > p,
  html body .gp-steps-grid p,
  html body .gp-who-card p,
  html body [class*="-set-note"] { display: none; }

  /* Homepage */
  html body.mg-light .hp-steps-grid { gap: 8px; }
  html body.mg-light .hp-steps-grid li {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 0;
  }
  html body.mg-light .hp-steps-grid li h3 { margin: 0; font-size: 17px; }
  html body.mg-light .hp-step-num { margin: 0; flex: none; }
  html body.mg-light .hp-discord-copy p { display: none; }
  html body.mg-light .hp-shelf .hp-lede,
  html body.mg-light .hp-shelf .hp-note { display: none; }
  html body.mg-light .hp-shelf .hp-points li { font-size: 14.5px; }
  html body.mg-light .hp-gp-lede,
  html body.mg-light .hp-gp-ways li span:not(:first-child),
  html body.mg-light .hp-gp-ways li p,
  html body.mg-light .hp-parent .sg-section-head p { display: none; }
  html body .footer-brandline { display: none; }

  /* Group plan page */
  html body .gp-final-card > p { display: none; }
  html body .gp-steps-grid { gap: 8px; }
  html body .gp-steps-grid li {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 0;
  }
  html body .gp-steps-grid li h3 { margin: 0; font-size: 18px; }
  html body .gp-steps-grid li > :first-child { margin: 0; flex: none; }

  /* Plan cards: price and button up front. The eight per-platform dropdowns
     made every card ~1,400px tall; a product page keeps only its own
     (the one pricing-block.js opens), the homepage keeps none. */
  html body.mg-light .pc-drops > .pc-drop:not([open]) { display: none; }
  html body.mg-light .pc-drops:not(:has(.pc-drop[open])) { display: none; }
  html body.mg-light .pc-ssa p { display: none; }
  html body.mg-light .pc-drop-body .fl-sub,
  html body.mg-light .pc-drop-note { display: none; }

  /* Onboarding stepper: five labels don't fit across a phone; numbers only */
  html body .ob-rail .ob-step-t,
  html body .ob-rail .ob-step-s { display: none; }
  html body.mg-light .pc-extra-copy { display: none; }
  html body.mg-light .pc-extra-note { display: none; }

  /* Footer: link columns side by side instead of one long list */
  html body footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }
}

@media (max-width: 380px) {
  html body.mg-light .hp-fan-item strong { font-size: 12px; }
  html body header.site-header .sg-logo-word-img { width: 112px; }
}