/* picomath.org — built 2026-10-21 by .build-tools/build_css.sh: GenieCheats styles.css + mobile.css purged to the guide markup, then pm.css. */
: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;
}

@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);
  }
}

/* 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. */

/* Shimmer sweep — the same shine as the hero "Sign Up" CTA. */

/* Signup — full cool treatment: lime gradient, glow, shine. */

/* Login — matching "ghost" variant: same shine, subtler fill. */

@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);
  }
}

@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;
  }
}

@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);
  }
}

/* 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. */
}

/* Clean static feature grid — replaces the old scroll-driven sticky stepper. */

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

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

@media (max-width: 1080px) {

  /* Flatten the 2-column layout into a single column, then interleave
     each visual-card right under its matching workflow-step via order. */

  /* 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. */
}

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

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

/* ── 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. ── */

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

/* 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. */

/* 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. */

/* Refined home promo banner — cleaner hierarchy and a softer panel.
   Scoped to .home-pricing-promo so the pricing page promo is untouched. */

/* On mobile / tablet, tuck the genie behind the right side of the copy
   at lower opacity so it decorates without crowding the headline. */

.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: 721px) and (max-width: 1200px) {

  /* In hamburger mode, all nav items show vertically — bring extra-link back */

  /* 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. */
}

@media (max-width: 720px) {

  /* In stacked mobile layout, restore the secondary nav links */
}

@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;
  }

  .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: 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%;
  }

  .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);
  }
}

/* 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. */

/* === MemGenie auth bridge: avatar + account dropdown === */
/* 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. */

/* Account dropdown panel */

/* =====================================================================
   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.
   ===================================================================== */

/* wrapper is transparent so nav + actions become direct grid items */

/* ---- middle nav: boxed into the 1fr track, scrolls if cramped ---- */

/* Pricing link + 30% OFF badge inside nav */

/* Support link given its own accent so it stands out in the nav */

/* ---- right-side actions: only Login + Sign up, never shrink ---- */

/* Secondary: neutral glass. It used to be lime-on-lime with the Sign up
   button beside it, which made two adjacent controls compete. */

/* Primary: the same crimson, gradient sheen and dark lip as the plan CTAs,
   so there is one action colour across the whole site. */

/* hamburger hidden on desktop */

/* ===================== TABLET / MOBILE: hamburger ===================== */
@media (max-width: 940px) {

  /* 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. */

  /* Login / Sign up move into the drawer, below the nav links */
}

/* =====================================================================
   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 ---- */

  /* Re-show the left/right videos flanking the active one (matches desktop). */

  /* (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. */

  /* ---- Hero title: drop the "|" and put MemGenie on its own line ---- */

  /* ---- Hide the secondary "See How It Works" button on mobile ---- */

  /* ---- Workflow: drop each demo video directly under its matching step ---- */

  /* Every card renders in-flow and stays visible (no scroll-toggled fade). */

  /* Keep the three step blocks visually uniform. */

  /* ---- Detection callout: cleaner, tighter heading block ---- */

  /* ---- Chrome Store section: stop it looking like a tall skinny strip ---- */

  /* ---- Footer brandline: span the full width on mobile ---- */
}

/* ---- 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. */

/* 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.
 */
@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.
 */

/* ===== Dashboard Feature Popup (desktop only, bottom-right) ===== */

/* ============================================================
   MemGenie hero — autoplay-on-scroll demo video (demo-memgenie-2.webm)
   ============================================================ */

/* Skeleton shimmer shown behind the video until it paints */

/* ============================================================
   Quiz Automation page — featured video section
   ============================================================ */

/* Premium dark video player frame */

/* Skeleton shimmer shown behind the video until it paints */

@keyframes quizSkeleton {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

/* === Custom video player (quiz demo) === */

/* Big center play button */

/* Control bar */
/* 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. */
/* Simple poster players hand over to native controls; the big button has to
   get out of the way the moment the clip plays. */

/* 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. */

/* Speed menu */

/* === Legal pages (privacy / terms) === */


/* === Header action cluster: occlude cramped-nav overflow === */

/* ============================================================
   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 ---- */

/* ---- Product switcher (the family taskbar element) ---- */
.sg-page--mem   .sg-switcher a.is-current { color: #2b0413; }

/* ---- Shared eyebrow + section heads ---- */
.sg-page--hub .sg-eyebrow { color: var(--delta); }

/* ---- Hub hero ---- */

@keyframes sgFadeUp {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---- Generic section wrappers ---- */

.sg-faq {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
}

/* ---- Product cards ---- */

/* ---- Feature grid (shared engine / previews) ---- */
.sg-page--hub .sg-feature-icon {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px var(--sg-line) inset;
}
.sg-page--hub .sg-feature-icon svg { stroke: var(--delta); }

/* ---- Steps ---- */

/* ---- Stats band ---- */

/* ---- FAQ head (reuses existing .faq-list / .faq-item) ---- */
.sg-faq .faq-list { max-width: 820px; margin: 0 auto; }

/* ---- CTA band ---- */
.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);
}

/* ---- Coming-soon hero ---- */

/* ---- Responsive ---- */

/* ============================================================
   GenieCheats v2 — compact taskbar, genie dropdown, buttons,
   motion. Overrides the earlier .sg-* header/switcher styles.
   ============================================================ */

/* ---- Compact header ---- */

/* ---- Nav (pill items) ---- */

/* ---- Actions ---- */

/* Compact login/signup inside the taskbar (override tall MemGenie buttons) */

/* ---- Buttons (hero / CTA) ---- */

/* ---- Motion: scroll reveal + counters ---- */

/* ---- Mobile taskbar tweaks ---- */

/* ============================================================
   MemGenie plug-in hero (memgenie.html only) — scoped to
   .mg-plugin-hero so it never touches other pages.
   ============================================================ */
/* 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. */

/* cable */

/* popup (rebuilt from the extension source) */
.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; } }

/* scroll hint */
@keyframes ph-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@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) */
@keyframes ph-drop { from { opacity: 0; transform: translateY(-140px) scale(.96); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Plug-in hero — mobile fit (keep the whole scene inside one viewport) */
@media (max-width: 900px) {
  .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; }
}

/* Plug-in hero — compact CTAs on mobile so the panel isn't pushed off-screen */

/* Headline separator */

/* "This is what the extension looks like" — handwritten label + flowing dotted arrow */
@keyframes ph-flow { to { stroke-dashoffset: -18.2; } }

@media (max-width: 900px) {
  /* Mobile: label sits BELOW the extension with the arrow pointing up at it */
}

/* 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 */

/* ============================================================
   Logo product switcher (replaces wordmark + dot pill).
   The current product's logo shows statically; one caret opens
   the dropdown.
   ============================================================ */
/* 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. */

/* 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. */
/* 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. */
/* 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.) */
/* 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. */
/* The bar is tight on phones; the mark alone carries it there. */

/* ---- 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. */

/* ============================================================
   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 */

/* Even, contained section dividers so they don't look mismatched */

/* ---- Tablet: 2-up grids already handled; tighten head spacing ---- */

/* ---- Phones: the main cleanup ---- */
@media (max-width: 700px) {
  /* Drop the background video on phones — cleaner and much lighter */

  /* Consistent, lighter section rhythm */
   .sg-faq { padding: 50px 18px; }

  /* Cards: comfortable, not cramped; even gaps */

  /* Stats: clean 2x2, right-sized numbers */

  /* CTA band */
}

/* ---- Very small phones ---- */

/* Coming-soon (Delta/Quizlet) hero — mobile tuning */

/* MemGenie plug-in hero title — clean wrap on phones (drop the overflowing pipe) */

/* ---- 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) ---- */
/* Input + button live inside one rounded, bordered group that glows on focus. */

/* ---- Waitlist nav button (NOT wired by auth.js — always goes to the on-page form) ---- */

/* ---- Dedicated waitlist page ---- */

/* ---- Turnstile widget on the waitlist form ---- */

/* ---- 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 .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 .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 */

/* ============================================================
   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. */

::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.
   ============================================================ */

/* ── Label stagger ── */
/* 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. */
@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. */
@keyframes sg-pulse-breathe {
  from { opacity: 1; }
  to   { opacity: 0.32; }
}

/* ── Arrow disc ── */


/* ── 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-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. */

/* the hairline: brand accent in the middle, nothing at the edges */

/* 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. */

/* ============================================================
   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 \3c 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. */

  /* 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. */

  /* 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. */

  /* Privacy / Terms in the bottom bar: 15px tall, 18px apart. */

  /* 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. */

  /* "Full pricing details and FAQ" under the plan cards: 17px tall. */

  /* 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. */

  /* EdGenie plan-tier chips ("read", "yes") at 9.5px: the smallest text on
     the site that is not part of an extension mockup. */

  /* "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. */

  /* 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. */

  /* 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. */
}

/* 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. */
@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. */
}
/* With six links plus "More" the bar only needs tightening on small laptops. */
/* The last ~60px before the hamburger takes over is tighter still. */

/* Condensed header, toggled by sg.js once the page has scrolled 40px. */

/* ── "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. */
@media (min-width: 941px) {
  /* Seven items always fit, so the bar no longer scrolls or fades its edges
     (both would clip the dropdown). */
}
/* ── 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. */

@media (max-width: 720px) {

  /* ── 1. Header ───────────────────────────────────────────────────────── */

  /* ── 2. Headlines ────────────────────────────────────────────────────── */
  /* Homepage masthead */
  /* 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. */
  /* Platform grid: three across, logos and names only */
  /* 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. */

  /* Product-page hero: headline first, then the video, then the buttons */
  /* "The #1" never splits across lines */
  /* "Trusted by 3,000+" appears three times in the hero; keep the rating pill */
  /* Feature tiles: icon + title only */

  /* Other pages' h1s */
  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 */

  /* Card and list descriptions: keep the title, drop the sentence under it */

  /* Homepage */

  /* Group plan page */

  /* 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. */

  /* Onboarding stepper: five labels don't fit across a phone; numbers only */

  /* Footer: link columns side by side instead of one long list */
}

/* ============================================================
   PicoMath chrome: header, footer, home page. Appended after the
   purged GenieCheats blog rules by build_css.sh, so it can rely on
   the same :root tokens (--black, --header, --white, --muted, --line,
   --lime = brand crimson, --lime-deep).
   ============================================================ */
body { font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }

/* ---- Header ---- */
.pm-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(9, 10, 12, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.pm-header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 64px;
  display: flex; align-items: center; gap: 22px;
}
.pm-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--white);
}
.pm-mark {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--lime); color: #fff;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-weight: 600; font-size: 20px; line-height: 1;
  box-shadow: 0 6px 18px rgba(244, 4, 80, .28);
}
.pm-nav { display: flex; gap: 2px; margin-left: auto; }
.pm-nav a {
  padding: 8px 12px; border-radius: 999px;
  color: var(--muted); font-size: 14.5px; font-weight: 600;
  transition: color .16s ease, background .16s ease;
}
.pm-nav a:hover { color: var(--white); background: rgba(255, 255, 255, .06); }
.pm-cta {
  padding: 9px 16px; border-radius: 10px;
  background: var(--lime); color: #fff;
  font-weight: 800; font-size: 14px; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease;
  box-shadow: 0 8px 22px rgba(244, 4, 80, .22);
}
.pm-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(244, 4, 80, .3); }

/* ---- Footer ---- */
.pm-footer { border-top: 1px solid var(--line); background: var(--header); margin-top: 40px; }
.pm-footer-grid {
  max-width: 1200px; margin: 0 auto; padding: 56px 20px 40px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
}
.pm-footer-brand p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 16px 0 0; max-width: 360px; }
.pm-footer-col { display: flex; flex-direction: column; gap: 9px; }
.pm-footer-col h2 { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.pm-footer-col a { color: var(--muted); font-size: 14.5px; transition: color .16s ease; }
.pm-footer-col a:hover { color: var(--white); }
.pm-footer-bottom {
  border-top: 1px solid var(--line);
  max-width: 1200px; margin: 0 auto; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--muted); font-size: 13.5px;
}
.pm-footer-bottom p { margin: 0; }
.pm-footer-bottom nav { display: flex; gap: 18px; }
.pm-footer-bottom a:hover { color: var(--white); }

/* ---- Home ---- */
.pm-home main { max-width: 1200px; margin: 0 auto; padding: 0 20px 40px; }
.pm-hero { padding: clamp(72px, 10vh, 120px) 0 56px; max-width: 820px; }
.pm-hero--short { padding-top: 96px; }
.pm-eyebrow { margin: 0 0 14px; color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pm-hero h1 { margin: 0 0 20px; font-size: clamp(34px, 5.6vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.pm-lede { margin: 0; color: #c3c6cc; font-size: clamp(16.5px, 2vw, 19px); line-height: 1.6; max-width: 680px; }
.pm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pm-btn {
  display: inline-block; padding: 13px 24px; border-radius: 12px;
  background: var(--lime); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 30px rgba(244, 4, 80, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pm-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(244, 4, 80, .32); }
.pm-btn--ghost { background: rgba(255, 255, 255, .06); color: var(--white); box-shadow: none; border: 1px solid var(--line); }
.pm-btn--ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }

.pm-section { padding: 36px 0; scroll-margin-top: 80px; }
.pm-section-head { max-width: 720px; margin-bottom: 26px; }
.pm-section-head h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; }
.pm-section-head p { margin: 0 0 12px; color: #c3c6cc; font-size: 16.5px; line-height: 1.65; }
.pm-section-head a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.pm-section-head a:hover { text-decoration: none; }
.pm-note { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); font-size: 14.5px !important; color: var(--muted) !important; }

.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pm-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(28, 30, 36, .55), rgba(9, 10, 12, .55));
  border: 1px solid var(--line);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pm-card:hover { transform: translateY(-3px); border-color: rgba(244, 4, 80, .45); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
.pm-card-badge {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: rgba(244, 4, 80, .1); border: 1px solid rgba(244, 4, 80, .28);
  color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.pm-card h3 { margin: 4px 0 0; font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; color: var(--white); }
.pm-card p { margin: 0; color: #c3c6cc; font-size: 14.5px; line-height: 1.55; flex: 1; }
.pm-card-meta { color: var(--muted); font-size: 12.5px; }

@media (max-width: 1024px) {
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pm-header-inner { gap: 12px; }
  .pm-cta { display: none; }
  .pm-nav a { padding: 8px 9px; font-size: 13.5px; }
  .pm-word { display: none; }
  .pm-br { display: none; }
  .pm-grid { grid-template-columns: 1fr; }
  .pm-footer-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .pm-footer-bottom { flex-direction: column; align-items: flex-start; }
  .pm-hero { padding-top: 56px; }
}