/* ============================================================
   MathMate marketing site — shared styles (home / about / grades)
   Tokens match the app's own stylesheet (public/index.html) exactly.
   Oct 2026 revision: bigger type throughout (Melisa's standing "keep it
   bigger" instruction — many users are teachers, some elderly, reading on
   a classroom projector or an older laptop), simpler footer, bigger nav
   logo, richer hero/about treatment, and icons borrowed directly from the
   app's own tool cards wherever the same tool is referenced here.
   ============================================================ */

:root{
  --navy:#0B1F3B;
  --navy-soft:#16305A;
  --teal:#2EC4B6;
  --teal-deep:#17A396;
  --teal-text:#1D7A71;
  --yellow:#FFC300;
  --yellow-deep:#F5A700;
  --yellow-text:#947100;
  --coral:#FF6B5B;
  --coral-deep:#E8503F;
  --bg:#F7FAFC;
  --line:#E2E8F0;
  --muted:#64748B;
  --radius:18px;
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.mm-site{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--navy);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:17px; /* base bump from the 16px browser default */
}
/* A single background for the whole page, fixed to the viewport so it
   never scrolls with the content (the "constant" half of the brief) — a
   faint coordinate grid plus two soft color washes. It only becomes
   visible where something on top of it isn't fully opaque: the gaps
   between cards, the sticky nav's frosted glass, the margins around
   sections — so which part of it shows through changes as you scroll
   past solid-colored sections (dark cards, white panels) versus open
   ones (the "changes per section" half). */
body.mm-site:before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(11,31,59,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,59,.035) 1px, transparent 1px);
  background-size:46px 46px;
}
body.mm-site:after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 34% at 8% 6%, rgba(46,196,182,.1) 0%, transparent 70%),
    radial-gradient(34% 30% at 96% 18%, rgba(255,195,0,.08) 0%, transparent 70%),
    radial-gradient(40% 36% at 50% 100%, rgba(46,196,182,.07) 0%, transparent 70%);
}
/* :not(.mm-nav) — the nav needs its own `position:sticky` (set in .mm-nav
   below) to stay pinned while scrolling. Because `body.mm-site > *` has
   higher specificity than the single class `.mm-nav`, it was winning over
   .mm-nav's position:sticky regardless of source order and silently
   turning the sticky nav into a `position:relative` one — the nav would
   scroll away instead of staying pinned, and that's what was actually
   behind the broken-feeling #features/#grades links (the nav was gone by
   the time you clicked it, it just looked like nothing happened). .mm-nav
   already sets its own z-index:50, which is already above this layer's
   z-index:0, so excluding it here loses nothing. */
body.mm-site > *:not(.mm-nav){ position:relative; z-index:1; }
.mm-site a{ color:inherit; text-decoration:none; }
.mm-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.mm-icon{ display:block; }

/* ---------- Nav ----------
   Kept deliberately plain: a short, flat list of links and one clear
   button. No dropdowns, no icon-only buttons a first-time or less
   tech-confident visitor has to decode. */
.mm-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,250,252,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.mm-nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:30px;
}
.mm-brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:22px; letter-spacing:-.02em; }
.mm-brand img{ height:42px; display:block; } /* was 30px — bumped per feedback */
.mm-brand .mate{ color:var(--teal-text); }
.mm-nav-links{ display:flex; gap:26px; margin-left:8px; font-weight:700; font-size:16.5px; color:var(--navy-soft); }
.mm-nav-links a{ padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .15s, color .15s; }
.mm-nav-links a:hover, .mm-nav-links a.active{ color:var(--teal-text); border-bottom-color:var(--teal); }
.mm-nav-spacer{ flex:1; }
.mm-cta{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color:#fff; font-weight:800; font-size:15.5px;
  padding:12px 22px; border-radius:11px; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 16px rgba(23,163,150,.34);
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
}
.mm-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(23,163,150,.42); }
.mm-nav-burger{ display:none; }

/* Oct 2026: "Explore MathMate" + the language dropdown live in the nav on the
   homepage, About and Pricing (Sign In was removed -- it duplicated Explore). */

@media (max-width:860px){
  .mm-nav-links{ display:none; }
  .mm-nav-burger{ display:inline-flex; margin-left:auto; }
}

/* Anchor targets (e.g. #features) land below the sticky nav, not under it */
[id]{ scroll-margin-top:84px; }

/* ---------- Hero ---------- */
.mm-hero{ position:relative; overflow:hidden; padding:68px 24px 96px; background:var(--bg); }

/* Layered background: a faint coordinate grid, a slow-moving "aurora"
   gradient wash for real color presence (not just near-invisible lines),
   and a handful of large, hand-placed OUTLINE math glyphs drawn as actual
   SVG strokes in the app's own icon language. Nothing here is emoji or
   random scatter, and the aurora drifts on a slow 26s loop (not a bounce)
   so it reads as alive without being distracting behind the headline. */
.mm-hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.mm-grid-field{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(11,31,59,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,59,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 15%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 15%, #000 0%, transparent 78%);
}
.mm-aurora{
  position:absolute; inset:-20%;
  background:
    radial-gradient(42% 38% at 14% 10%, rgba(46,196,182,.34) 0%, transparent 70%),
    radial-gradient(38% 34% at 86% 6%, rgba(255,195,0,.26) 0%, transparent 72%),
    radial-gradient(46% 40% at 50% 95%, rgba(11,31,59,.10) 0%, transparent 70%);
  filter:blur(10px);
  animation:mmAurora 26s ease-in-out infinite;
  will-change:transform;
}
@keyframes mmAurora{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(2%,1.5%) scale(1.06); }
}
.mm-glyph{ position:absolute; opacity:.16; animation:mmDrift 20s ease-in-out infinite; will-change:transform; }
.mm-glyph.teal{ color:var(--teal); }
.mm-glyph.yellow{ color:var(--yellow-text); }
.mm-glyph.navy{ color:var(--navy); }
@keyframes mmDrift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-12px) rotate(3deg); }
}
.mm-hero-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; text-align:center; }

/* Credibility strip: Melisa's photo + name, not a generic text pill —
   this IS the "built by a 30-year educator" claim, made concrete. */
.mm-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px;
  color:var(--navy-soft);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 22px;
  margin-bottom:28px; box-shadow:0 2px 10px rgba(11,31,59,.05);
}
.mm-eyebrow:has(img), .mm-eyebrow:has(.mm-eyebrow-fallback){ padding:7px 20px 7px 7px; }
.mm-eyebrow img, .mm-eyebrow .mm-eyebrow-fallback{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
}
.mm-eyebrow .mm-eyebrow-fallback{
  display:flex; align-items:center; justify-content:center; background:var(--teal); color:#fff; font-weight:900; font-size:13px;
}
.mm-eyebrow b{ color:var(--navy); font-weight:900; }

.mm-hero-card{
  background:rgba(255,255,255,.97); border:1px solid rgba(46,196,182,.22); border-radius:32px;
  padding:48px 48px 44px; box-shadow:0 22px 54px rgba(11,31,59,.12), 0 0 0 1px rgba(255,255,255,.6) inset;
  max-width:800px; margin:0 auto 34px; position:relative;
}
.mm-hero-card:before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:33px;
  background:linear-gradient(120deg, rgba(46,196,182,.5), rgba(255,195,0,.4), rgba(46,196,182,.5));
  background-size:200% 200%; opacity:.55; filter:blur(1px);
  animation:mmBorderGlow 8s ease-in-out infinite;
}
@keyframes mmBorderGlow{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.mm-tagline{ color:#475569; font-size:23px; font-weight:700; margin:0 0 16px; }
.mm-tagline .right{
  background:linear-gradient(120deg, var(--yellow-deep), var(--yellow) 60%); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:900;
}
.mm-h1{ font-size:clamp(32px,4.6vw,46px); line-height:1.1; letter-spacing:-1.2px; font-weight:900; margin:0; }
.mm-h1 .accent{
  background:linear-gradient(120deg, var(--teal-text), var(--teal-deep) 60%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion: reduce){
  .mm-hero-card:before{ animation:none; }
}
.mm-sub{ font-size:18.5px; color:var(--muted); max-width:640px; margin:0 auto 34px; line-height:1.6; }
.mm-hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.mm-btn-primary{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color:#fff; font-weight:800; font-size:17px; padding:16px 30px;
  border-radius:999px; box-shadow:0 10px 24px rgba(23,163,150,.36); transition:transform .15s, box-shadow .15s;
  display:inline-flex; align-items:center; gap:10px;
}
.mm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(23,163,150,.46); }
.mm-btn-ghost{
  background:#fff; color:var(--navy); font-weight:800; font-size:17px; padding:16px 30px;
  border-radius:999px; border:1px solid var(--line); transition:transform .15s, border-color .15s, box-shadow .15s;
}
.mm-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--teal); box-shadow:0 10px 22px rgba(11,31,59,.1); }

/* ---------- Section shell ---------- */
.mm-section{ padding:92px 24px; }
.mm-section.alt{
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(46,196,182,.06) 0%, transparent 60%),
    radial-gradient(50% 45% at 100% 100%, rgba(255,195,0,.07) 0%, transparent 60%),
    #fff;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.mm-section-head{ max-width:740px; margin:0 auto 50px; text-align:center; }
.mm-kicker{ font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-text); margin-bottom:10px; }
.mm-h2{ font-size:clamp(28px,3.8vw,39px); font-weight:900; letter-spacing:-.9px; margin:0 0 14px; }
.mm-lede{ color:var(--muted); font-size:17.5px; line-height:1.6; }

/* ---------- Scroll reveal ---------- */
.mm-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.mm-reveal.in{ opacity:1; transform:translateY(0); }
.mm-reveal.d1{ transition-delay:.08s; } .mm-reveal.d2{ transition-delay:.16s; }
.mm-reveal.d3{ transition-delay:.24s; } .mm-reveal.d4{ transition-delay:.32s; }
.mm-zoom{ opacity:0; transform:scale(.86); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.mm-zoom.in{ opacity:1; transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .mm-glyph, .mm-aurora{ animation:none; }
  .mm-reveal, .mm-zoom{ opacity:1; transform:none; transition:none; }
}

/* ---------- Pillars (CRA / Curriculum / PBL) ---------- */
.mm-pillars{ display:grid; gap:18px; max-width:var(--maxw); margin:0 auto; }
.mm-pillars-sub{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .mm-pillars-sub{ grid-template-columns:1fr; } }
.mm-card{
  background:linear-gradient(175deg,#fff 0%,#fff 62%,#F3FBFA 100%); border:1px solid var(--line); border-radius:24px; padding:30px 30px 28px;
  box-shadow:0 10px 26px rgba(11,31,59,.055); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mm-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(11,31,59,.14); border-color:rgba(46,196,182,.4); }
.mm-card:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--teal), var(--teal-deep)); opacity:.95; }
.mm-card.navy{ background:linear-gradient(175deg,#fff 0%,#fff 60%,#EEF2F8 100%); }
.mm-card.navy:before{ background:linear-gradient(180deg, var(--navy-soft), var(--navy)); }
.mm-card.yellow{ background:linear-gradient(175deg,#fff 0%,#fff 60%,#FFF7E0 100%); }
.mm-card.yellow:before{ background:linear-gradient(180deg, var(--yellow), var(--yellow-deep)); }
.mm-card.featured{ padding:0; overflow:hidden; background:#fff; }
.mm-card-row{ display:flex; align-items:flex-start; gap:20px; padding:36px 38px 32px; }
.mm-card-icon{
  flex:0 0 auto; width:50px; height:50px; display:flex; align-items:center; justify-content:center; color:#fff;
  border-radius:15px; background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  box-shadow:0 8px 18px rgba(23,163,150,.32);
}
.mm-card.navy .mm-card-icon{ background:linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow:0 8px 18px rgba(11,31,59,.32); }
.mm-card.yellow .mm-card-icon{ background:linear-gradient(135deg, var(--yellow), var(--yellow-deep)); box-shadow:0 8px 18px rgba(245,167,0,.32); color:#4A3700; }
.mm-card-tag{ display:inline-block; font-size:12px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-text); background:#EAFDFB; border-radius:999px; padding:4px 10px; margin-bottom:10px; }
.mm-card h3{ font-size:20px; font-weight:900; margin:0 0 9px; letter-spacing:-.2px; }
.mm-card p{ color:var(--muted); font-size:15.5px; line-height:1.6; margin:0; }

/* ---------- Live CRA demo ----------
   An auto-cycling 3-frame showcase (Concrete -> Representational ->
   Abstract), styled like a real product panel — a tab strip you'd see in
   the app itself, a top progress rail that fills in real time, and each
   frame builds itself in (counters drop and stagger, the bar grows,
   the equation snaps in) instead of just crossfading static art.
   Pauses on hover/focus; respects reduced-motion by freezing on frame 1
   with the progress rail hidden. */
.mm-demo{ position:relative; background:linear-gradient(165deg,#0B1F3B,#15335D); border-radius:0 0 24px 24px; padding:26px 38px 34px; overflow:hidden; }
.mm-demo-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mm-demo-title{ color:#fff; font-weight:900; font-size:15px; letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.mm-demo-title:before{ content:""; width:8px; height:8px; border-radius:50%; background:#5EEAD4; box-shadow:0 0 0 3px rgba(94,234,212,.25); animation:mmLiveDot 1.8s ease-in-out infinite; }
@keyframes mmLiveDot{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.mm-demo-sub{ color:#9FB3CE; font-size:13px; }

/* Tab strip — reads as the app's own step control, not decoration */
.mm-demo-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.mm-demo-tab{
  flex:1; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:9px 12px;
  color:#9FB3CE; font-weight:800; font-size:12.5px; letter-spacing:.02em; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.mm-demo-tab:hover{ background:rgba(255,255,255,.08); color:#fff; }
.mm-demo-tab .n{
  flex:none; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#fff;
}
.mm-demo-tab.active{ background:rgba(46,196,182,.14); border-color:rgba(46,196,182,.5); color:#fff; }
.mm-demo-tab.active .n{ background:var(--teal); color:#07332F; }

.mm-demo-stage{
  position:relative; height:232px; background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden;
}
/* Progress rail across the very top of the stage — fills over the dwell
   time of each frame, reset+replayed by JS on every transition. */
.mm-demo-rail{ position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); z-index:2; }
.mm-demo-rail-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--teal), #5EEAD4); transition:width linear; }
.mm-demo-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 65% at 50% 42%, rgba(46,196,182,.18) 0%, transparent 72%);
}
.mm-demo-frame{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:26px;
  padding:24px 20px 20px; opacity:0; transform:scale(.92) translateY(10px); filter:blur(4px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease;
  pointer-events:none;
}
.mm-demo-frame.active{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); pointer-events:auto; }
.mm-demo-frame-label{ position:absolute; top:14px; left:18px; font-size:11.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#8FE3DB; }

/* Concrete frame: counters stagger in with a little bounce */
.mm-demo-frame[data-step="0"] svg circle{
  opacity:0; transform:scale(.3); transform-origin:center; transform-box:fill-box;
  animation:mmCounterPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.mm-demo-frame[data-step="0"].active svg circle{ animation-play-state:running; }
.mm-demo-frame[data-step="0"] svg circle:nth-child(1){ animation-delay:.05s; } .mm-demo-frame[data-step="0"] svg circle:nth-child(2){ animation-delay:.11s; }
.mm-demo-frame[data-step="0"] svg circle:nth-child(3){ animation-delay:.17s; } .mm-demo-frame[data-step="0"] svg circle:nth-child(4){ animation-delay:.23s; }
.mm-demo-frame[data-step="0"] svg circle:nth-child(5){ animation-delay:.29s; } .mm-demo-frame[data-step="0"] svg circle:nth-child(6){ animation-delay:.35s; }
.mm-demo-frame[data-step="0"] svg circle:nth-child(7){ animation-delay:.41s; } .mm-demo-frame[data-step="0"] svg circle:nth-child(8){ animation-delay:.47s; }
.mm-demo-frame[data-step="0"] svg circle:nth-child(9){ animation-delay:.53s; } .mm-demo-frame[data-step="0"] svg circle:nth-child(10){ animation-delay:.59s; }
.mm-demo-frame[data-step="0"] svg circle:nth-child(11){ animation-delay:.65s; } .mm-demo-frame[data-step="0"] svg circle:nth-child(12){ animation-delay:.71s; }
@keyframes mmCounterPop{ 0%{ opacity:0; transform:scale(.3); } 70%{ opacity:1; transform:scale(1.14); } 100%{ opacity:1; transform:scale(1); } }

/* Representational frame: bar segments grow in from the left */
.mm-demo-frame[data-step="1"] svg rect{ transform:scaleX(0); transform-origin:left center; transform-box:fill-box; animation:mmBarGrow .6s cubic-bezier(.22,1,.36,1) .1s forwards; }
.mm-demo-frame[data-step="1"] svg line{ opacity:0; animation:mmFadeIn .4s ease .55s forwards; }
.mm-demo-frame[data-step="1"] svg text{ opacity:0; animation:mmFadeIn .4s ease .7s forwards; }
@keyframes mmBarGrow{ to{ transform:scaleX(1); } }
@keyframes mmFadeIn{ to{ opacity:1; } }

/* Abstract frame: the equation snaps in with a confident overshoot */
.mm-demo-eq{ opacity:0; transform:scale(.7); animation:mmEqPop .55s cubic-bezier(.34,1.56,.64,1) .1s forwards; }
@keyframes mmEqPop{ to{ opacity:1; transform:scale(1); } }
.mm-demo-eq .eq-answer{ color:#5EEAD4; }

.mm-demo-dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.mm-demo-dot{
  width:8px; height:8px; border-radius:999px; background:#2E4A77; border:none; padding:0;
  transition:background .2s ease, width .25s ease; cursor:pointer;
}
.mm-demo-dot:hover{ background:#3D5A8A; }
.mm-demo-dot.active{ background:var(--teal); width:22px; }
@media (prefers-reduced-motion: reduce){
  .mm-demo-frame, .mm-demo-frame svg *, .mm-demo-eq,
  .mm-std-select, .mm-std-tool, .mm-pbl-title, .mm-pbl-sub{ transition:none; animation:none !important; opacity:1; transform:none; filter:none; }
  .mm-demo-rail{ display:none; }
}

/* ---------- Curriculum demo (teal card) ----------
   Same stage/tab/rail chrome as the CRA demo, tinted teal instead of navy
   so it still reads as "this card's own panel" rather than a copy-paste. */
.mm-demo-teal.mm-demo{ background:linear-gradient(165deg,#0B2E2A,#0F3F38); }
.mm-demo-teal .mm-demo-glow{ background:radial-gradient(60% 65% at 50% 42%, rgba(94,234,212,.2) 0%, transparent 72%); }
.mm-demo-teal .mm-demo-tab.active{ background:rgba(94,234,212,.16); border-color:rgba(94,234,212,.5); }
.mm-demo-teal .mm-demo-tab.active .n{ background:#5EEAD4; color:#07332F; }
.mm-demo-teal .mm-demo-dot.active{ background:#5EEAD4; }
.mm-demo-teal .mm-demo-rail-fill{ background:linear-gradient(90deg,#2EC4B6,#5EEAD4); }

.mm-std-select{
  display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:14px 18px; min-width:280px;
  opacity:0; transform:translateY(8px) scale(.96); animation:mmFadeUp .5s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.mm-std-select-flag{
  flex:none; width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#2EC4B6,#17A396);
  color:#07332F; font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center;
}
.mm-std-select-main{ color:#fff; font-weight:800; font-size:15px; }
.mm-std-select-sub{ color:#9FB3CE; font-size:12.5px; margin-top:1px; }
.mm-std-select svg{ margin-left:auto; }
@keyframes mmFadeUp{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }

.mm-demo-teal .mm-demo-frame[data-step="1"] svg{ opacity:0; transform:scale(.92); animation:mmEqPop .5s cubic-bezier(.34,1.56,.64,1) .08s forwards; }
.mm-demo-teal .mm-demo-frame[data-step="1"] svg circle, .mm-demo-teal .mm-demo-frame[data-step="1"] svg path:last-child{
  opacity:0; animation:mmFadeIn .35s ease .5s forwards;
}

.mm-std-tools{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:280px; }
.mm-std-tool{
  display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:10px 14px; color:#fff; font-weight:700; font-size:14px;
  opacity:0; transform:scale(.85); animation:mmCounterPop .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
.mm-std-tool svg{ flex:none; background:#5EEAD4; border-radius:50%; padding:3px; width:14px; height:14px; box-sizing:content-box; }
.mm-std-tool:nth-child(1){ animation-delay:.1s; } .mm-std-tool:nth-child(2){ animation-delay:.3s; } .mm-std-tool:nth-child(3){ animation-delay:.5s; }

/* ---------- PBL demo (yellow card) ---------- */
.mm-demo-yellow.mm-demo{ background:linear-gradient(165deg,#2E2206,#3D2D08); }
.mm-demo-yellow .mm-demo-glow{ background:radial-gradient(60% 65% at 50% 42%, rgba(255,195,0,.2) 0%, transparent 72%); }
.mm-demo-yellow .mm-demo-tab.active{ background:rgba(255,195,0,.16); border-color:rgba(255,195,0,.5); }
.mm-demo-yellow .mm-demo-tab.active .n{ background:var(--yellow); color:#4A3700; }
.mm-demo-yellow .mm-demo-dot.active{ background:var(--yellow); }
.mm-demo-yellow .mm-demo-rail-fill{ background:linear-gradient(90deg,var(--yellow),#FFE07A); }
.mm-demo-yellow .mm-demo-title:before{ background:var(--yellow); box-shadow:0 0 0 3px rgba(255,195,0,.25); }

.mm-pbl-body{ display:flex; flex-direction:column; align-items:flex-start; max-width:300px; text-align:left; }
.mm-pbl-bar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; width:100%; }
.mm-pbl-bar svg{ flex:none; background:rgba(255,255,255,.08); border-radius:7px; }
.mm-pbl-bar svg rect{ transform-origin:left center; transform-box:fill-box; opacity:0; animation:mmPblBarGrow .6s cubic-bezier(.22,1,.36,1) .12s forwards; }
@keyframes mmPblBarGrow{ from{ opacity:1; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
.mm-pbl-bar span{ color:#FFE07A; font-weight:800; font-size:13px; white-space:nowrap; }
.mm-pbl-title{ color:#fff; font-weight:900; font-size:19px; margin-bottom:6px; opacity:0; animation:mmFadeUp .5s ease .22s forwards; }
.mm-pbl-sub{ color:#D8C9A3; font-size:14px; line-height:1.5; opacity:0; animation:mmFadeUp .5s ease .32s forwards; }

/* ---------- Tool strip ---------- */
.mm-strip{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:var(--maxw); margin:0 auto; }
.mm-chip{
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 20px 11px 14px;
  font-weight:700; font-size:14.5px; color:var(--navy-soft); display:flex; align-items:center; gap:10px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  cursor:default;
}
.mm-chip svg{ color:var(--teal-text); flex:none; transition:color .2s ease; }
/* Hover fills the pill solid with a brand color, cycled across the row so
   the strip reads as colorful rather than ten identical white pills. */
.mm-chip:hover{
  transform:translateY(-3px); border-color:transparent; color:#fff;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  box-shadow:0 10px 22px rgba(23,163,150,.34);
}
.mm-chip:hover svg{ color:#fff; }
.mm-chip:nth-child(3n+2):hover{ background:linear-gradient(135deg, var(--yellow), var(--yellow-deep)); color:#4A3700; box-shadow:0 10px 22px rgba(245,167,0,.34); }
.mm-chip:nth-child(3n+2):hover svg{ color:#4A3700; }
.mm-chip:nth-child(3n):hover{ background:linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow:0 10px 22px rgba(11,31,59,.34); }

/* ---------- Testimonials ---------- */
.mm-testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:var(--maxw); margin:0 auto; }
@media (max-width:1050px){ .mm-testi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .mm-testi-grid{ grid-template-columns:1fr; } }
.mm-testi{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--teal); border-radius:var(--radius);
  padding:24px 22px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mm-testi:hover{ transform:translateY(-5px); box-shadow:0 16px 32px rgba(11,31,59,.1); }
.mm-testi:nth-child(4n+2){ border-top-color:var(--yellow-deep); }
.mm-testi:nth-child(4n+3){ border-top-color:var(--coral); }
.mm-testi:nth-child(4n){ border-top-color:var(--navy); }
.mm-testi-quote{ font-size:16px; line-height:1.6; color:var(--navy); font-weight:600; }
.mm-testi-quote::before{ content:'\201C'; color:var(--teal-text); font-size:28px; font-weight:900; line-height:0; display:inline-block; margin-bottom:-4px; }
.mm-testi:nth-child(4n+2) .mm-testi-quote::before{ color:var(--yellow-deep); }
.mm-testi:nth-child(4n+3) .mm-testi-quote::before{ color:var(--coral-deep); }
.mm-testi:nth-child(4n) .mm-testi-quote::before{ color:var(--navy); }
.mm-testi-who{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.mm-testi-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; background:var(--line); }
.mm-testi-avatar.initial{ display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); font-size:15px; }
.mm-testi:nth-child(4n+2) .mm-testi-avatar.initial{ background:linear-gradient(135deg,var(--yellow),var(--yellow-deep)); color:#4A3700; }
.mm-testi:nth-child(4n+3) .mm-testi-avatar.initial{ background:linear-gradient(135deg,var(--coral),var(--coral-deep)); }
.mm-testi:nth-child(4n) .mm-testi-avatar.initial{ background:linear-gradient(135deg,var(--navy-soft),var(--navy)); }
.mm-testi-name{ font-weight:800; font-size:14px; }
.mm-testi-role{ font-size:12.5px; color:var(--muted); }

/* ---------- About teaser (homepage) ---------- */
.mm-about-teaser{
  max-width:920px; margin:0 auto; background:linear-gradient(135deg,#0B1F3B 0%,#15335D 100%);
  border-radius:28px; padding:48px 52px; display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center;
  position:relative; overflow:hidden; border:1px solid rgba(46,196,182,.18); box-shadow:0 24px 54px rgba(11,31,59,.28);
}
.mm-about-teaser:before{
  content:""; position:absolute; inset:-35%; pointer-events:none; z-index:0;
  background:
    radial-gradient(36% 46% at 6% 20%, rgba(46,196,182,.36) 0%, transparent 70%),
    radial-gradient(32% 40% at 96% 90%, rgba(255,195,0,.24) 0%, transparent 70%);
  filter:blur(14px); animation:mmAurora 24s ease-in-out infinite;
}
.mm-about-teaser > *{ position:relative; z-index:1; }
@media (max-width:700px){ .mm-about-teaser{ grid-template-columns:1fr; text-align:center; padding:40px 28px; } }
.mm-about-teaser-photo{ width:132px; height:132px; border-radius:50%; object-fit:cover; border:4px solid rgba(255,255,255,.28); box-shadow:0 0 0 6px rgba(46,196,182,.14); flex:none; }
.mm-about-teaser-photo.initial{ display:flex; align-items:center; justify-content:center; background:var(--teal); color:#fff; font-weight:900; font-size:42px; }
.mm-about-teaser blockquote{ color:#fff; font-size:21px; font-weight:700; line-height:1.5; margin:0 0 14px; font-style:italic; }
.mm-about-teaser .by{ color:#9FB3CE; font-size:14.5px; margin-bottom:18px; }
.mm-about-teaser .by b{ color:#fff; }

/* ---------- Grades page ---------- */
.mm-grade-block{
  max-width:var(--maxw); margin:0 auto 54px; background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:38px 34px; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
}
@media (max-width:860px){ .mm-grade-block{ grid-template-columns:1fr; } }
.mm-grade-block.rev .mm-grade-copy{ order:2; }
.mm-grade-num{ font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-text); margin-bottom:8px; }
.mm-grade-title{ font-size:27px; font-weight:900; margin:0 0 10px; letter-spacing:-.6px; }
.mm-grade-sub{ color:var(--muted); font-size:15.5px; margin:0 0 20px; }
.mm-grade-list{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; }
.mm-grade-list li{ display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600; color:var(--navy-soft); }
.mm-grade-list li svg{ flex:none; color:var(--teal-text); background:#EAFDFB; border-radius:9px; padding:5px; width:30px; height:30px; box-sizing:border-box; }
.mm-grade-list li.navy svg{ color:var(--navy); background:#EEF2F8; }
.mm-grade-list li.yellow svg{ color:var(--yellow-text); background:#FFF7E0; }
/* Each band's right-hand panel reads as a small screenshot of that band's
   actual MathMate screen — a real app header, a grid of mini widgets built
   from that band's own tools, and a floating confirmation pill breaking the
   card's edge — rather than a gradient mood-tile gesturing at the product.
   One quiet accent color per band (set via --accent) carries the header
   mark, the pill, the doodle and one tile's active state; everything else
   in the card stays neutral so that accent reads clearly. */
.mm-grade-panel{
  --accent:var(--navy); --accent-soft:#EEF2F8;
  position:relative; background:
    radial-gradient(120% 90px at 100% 0%, var(--accent-soft) 0%, transparent 100%),
    #fff;
  border:1px solid var(--line); border-radius:20px;
  padding:20px 20px 32px; box-shadow:0 20px 40px rgba(15,32,59,.12);
}
.mm-grade-panel.teal{ --accent:var(--teal-deep); --accent-soft:#E6FBF8; }
.mm-grade-panel.yellow{ --accent:var(--yellow-text); --accent-soft:#FFF7DE; }
.mm-grade-panel.coral{ --accent:var(--coral-deep); --accent-soft:#FFECE9; }

.mm-grade-panel-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.mm-grade-panel-id{ display:flex; align-items:center; gap:10px; min-width:0; }
.mm-grade-panel-mark{
  width:32px; height:32px; border-radius:9px; background:var(--accent); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px;
  box-shadow:0 6px 14px -2px var(--accent);
}
.mm-grade-panel-eyebrow{ font-size:11.5px; color:var(--muted); font-weight:700; line-height:1.3; }
.mm-grade-panel-name{ font-size:16px; font-weight:800; color:var(--navy); line-height:1.2; }
.mm-grade-panel-pill{ position:relative; font-size:12px; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:6px 11px; border-radius:999px; white-space:nowrap; flex:none; }

.mm-grade-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mm-grade-tile{
  background:linear-gradient(180deg, var(--accent-soft) 0%, #F8FAFC 46%);
  border:1px solid var(--line); border-radius:13px; padding:12px 13px 13px;
  display:flex; flex-direction:column; justify-content:space-between; gap:12px; min-height:94px;
  transition:border-color .15s ease;
}
.mm-grade-tile:hover{ border-color:var(--accent); }
.mm-grade-tile-label{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--navy-soft); }
.mm-grade-tile-label span[data-icon]{ flex:none; color:var(--accent); }

/* Small building blocks the per-band markup composes into each tile's mini preview. */
.mm-tile-dots{ display:flex; gap:5px; }
.mm-tile-dots span{ width:16px; height:16px; border-radius:50%; background:var(--accent-soft); border:1.5px solid var(--accent); flex:none; }
.mm-tile-dots span.on{ background:var(--accent); }
.mm-tile-dots.sm span{ width:10px; height:10px; }
.mm-tile-chips{ display:flex; }
.mm-tile-chips span{ width:22px; height:22px; border-radius:50%; background:var(--accent-soft); border:2px solid #F8FAFC; box-shadow:0 0 0 1px var(--accent); margin-left:-7px; flex:none; }
.mm-tile-chips span:first-child{ margin-left:0; }
.mm-tile-bars{ display:flex; align-items:flex-end; gap:4px; height:30px; }
.mm-tile-bars span{ width:7px; border-radius:3px 3px 0 0; background:var(--accent-soft); border:1px solid var(--accent); flex:none; }
.mm-tile-bars span.on{ background:var(--accent); }
.mm-tile-track{ height:7px; border-radius:4px; background:var(--accent-soft); position:relative; overflow:hidden; }
.mm-tile-track i{ position:absolute; inset:0; width:60%; background:var(--accent); border-radius:4px; }
.mm-tile-ring{ width:36px; height:36px; border-radius:50%; background:conic-gradient(var(--accent) 0 72%, var(--accent-soft) 0 100%); display:flex; align-items:center; justify-content:center; flex:none; }
.mm-tile-ring span{ width:24px; height:24px; border-radius:50%; background:#F8FAFC; font-size:9.5px; font-weight:900; color:var(--navy); display:flex; align-items:center; justify-content:center; }
.mm-tile-steps{ display:flex; align-items:center; gap:4px; }
.mm-tile-steps span{ width:9px; height:9px; border-radius:50%; background:var(--accent-soft); border:1.5px solid var(--accent); flex:none; }
.mm-tile-steps span.on{ background:var(--accent); }
.mm-tile-steps i{ flex:1; height:2px; background:var(--accent-soft); }
.mm-tile-pills{ display:flex; gap:5px; flex-wrap:wrap; }
.mm-tile-pills span{ font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.mm-tile-pills span.on{ background:var(--accent); color:#fff; }
.mm-tile-stack{ position:relative; width:32px; height:26px; flex:none; }
.mm-tile-stack i{ position:absolute; width:26px; height:19px; border-radius:4px; background:var(--accent-soft); border:1.5px solid var(--accent); }
.mm-tile-stack i:nth-child(1){ top:7px; left:5px; }
.mm-tile-stack i:nth-child(2){ top:3.5px; left:2.5px; }
.mm-tile-stack i:nth-child(3){ top:0; left:0; background:#F8FAFC; }
.mm-tile-score{ font-size:19px; font-weight:900; color:var(--navy); }
.mm-tile-score small{ font-size:11px; font-weight:700; color:var(--muted); margin-left:4px; }
.mm-tile-chat{ width:32px; height:26px; border-radius:9px 9px 9px 2px; background:var(--accent-soft); border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.mm-tile-chat svg{ width:15px; height:15px; color:var(--accent); }

.mm-grade-callout{
  position:absolute; left:26px; bottom:-18px; display:flex; align-items:center; gap:7px;
  background:var(--accent); color:#fff; font-size:12.5px; font-weight:800;
  padding:9px 15px; border-radius:999px; box-shadow:0 14px 24px -6px var(--accent);
  border:3px solid #fff;
}
.mm-grade-callout svg{ flex:none; width:14px; height:14px; }

.mm-grade-doodle{ position:absolute; top:-20px; right:-14px; color:var(--accent); opacity:.7; pointer-events:none; }
.mm-grade-doodle.sm{ top:auto; bottom:4px; right:auto; left:-10px; opacity:.4; }

@media (max-width:860px){
  .mm-grade-callout{ left:18px; }
}

/* ---------- About page ---------- */
.mm-about-wrap{ max-width:780px; margin:0 auto; padding:70px 24px 90px; position:relative; }
.mm-about-head{ text-align:center; margin-bottom:36px; }
.mm-about-avatar-wrap{ position:relative; width:160px; height:160px; margin:0 auto 20px; }
.mm-about-avatar-wrap:before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--teal), var(--yellow), var(--coral), var(--teal));
  animation:mmRingSpin 7s linear infinite; opacity:.85; transform-origin:50% 50%;
}
@keyframes mmRingSpin{ to{ transform:rotate(360deg); } }
.mm-about-avatar{ position:relative; width:160px; height:160px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 12px 32px rgba(11,31,59,.18); border:4px solid #fff; }
.mm-about-avatar.initial{ display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--teal),var(--teal-deep)); color:#fff; font-weight:900; font-size:46px; }
@media (prefers-reduced-motion: reduce){ .mm-about-avatar-wrap:before{ animation:none; } }

.mm-about-stats{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:28px 0 44px; }
.mm-about-stat{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px 22px; text-align:center; min-width:150px; box-shadow:0 8px 22px rgba(11,31,59,.07);
  transition:transform .18s ease, box-shadow .18s ease;
}
.mm-about-stat:before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; }
.mm-about-stat:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(11,31,59,.12); }
.mm-about-stat:nth-child(4n+1):before{ background:linear-gradient(90deg,var(--teal),var(--teal-deep)); }
.mm-about-stat:nth-child(4n+2):before{ background:linear-gradient(90deg,var(--yellow),var(--yellow-deep)); }
.mm-about-stat:nth-child(4n+3):before{ background:linear-gradient(90deg,var(--coral),var(--coral-deep)); }
.mm-about-stat:nth-child(4n+4):before{ background:linear-gradient(90deg,var(--navy-soft),var(--navy)); }
.mm-about-stat .n{ font-size:27px; font-weight:900; color:var(--navy); }
.mm-about-stat:nth-child(4n+1) .n{ color:var(--teal-text); }
.mm-about-stat:nth-child(4n+2) .n{ color:var(--yellow-text); }
.mm-about-stat:nth-child(4n+3) .n{ color:var(--coral-deep); }
.mm-about-stat .l{ font-size:13px; color:var(--muted); font-weight:700; margin-top:3px; }

.mm-about-body{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:28px;
  padding:44px 48px; box-shadow:0 14px 36px rgba(11,31,59,.07);
}
.mm-about-body:before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--teal), var(--yellow), var(--coral));
}
.mm-about-body p{ font-size:17.5px; line-height:1.8; color:var(--navy-soft); margin:0 0 20px; }
.mm-about-sign{ font-weight:800; color:var(--navy); margin-top:30px; font-size:17px; display:flex; align-items:center; gap:12px; }
.mm-about-sign:before{
  content:""; width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,var(--teal),var(--teal-deep));
}
.mm-about-sign .role{ display:block; font-weight:600; color:var(--muted); font-size:14.5px; margin-top:2px; }
.mm-pullquote{
  position:relative; border-left:5px solid transparent; padding:14px 26px 14px 30px; font-size:22px;
  font-weight:700; color:var(--navy); margin:36px 0; font-style:italic; line-height:1.5;
  background:linear-gradient(90deg,#EAFDFB,#FFF9E6 60%,transparent); border-radius:0 16px 16px 0;
  border-image:linear-gradient(180deg,var(--teal),var(--yellow)) 1;
}
.mm-pullquote:before{
  content:"\201C"; position:absolute; left:18px; top:-6px; font-size:54px; font-weight:900; line-height:1;
  color:var(--teal); opacity:.35; font-style:normal;
}

/* ---------- Footer (brand + Privacy + Terms only, per feedback) ----------
   Oct 2026 restyle: same content as before (nothing new added, per
   Melisa's "keep it minimal" call) — just a clearer visual hierarchy: a
   thin brand-colored top edge, the wordmark given room to breathe, and a
   softened divider instead of the old flat space between the link row
   and the copyright line. */
.mm-footer{
  background:var(--navy); color:#cbd5e1; padding:0 24px 30px; position:relative;
  background-image:linear-gradient(180deg, rgba(46,196,182,.07), transparent 220px);
}
.mm-footer:before{ content:""; display:block; height:3px; background:linear-gradient(90deg, var(--teal), var(--yellow)); }
.mm-footer-inner{ max-width:var(--maxw); margin:0 auto; padding-top:44px; }
.mm-footer-top{
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08);
}
/* logo.png already bakes the "MathMate" wordmark into the image itself —
   no separate text label needed next to it (per feedback: "logo is
   enough"). The fallback (if the image 404s) recreates the wordmark in
   text so the brand still reads even without the asset.
   Oct 2026: moved to the end of the footer (below the contact form, next
   to the copyright line) per Abdul/Melisa — it no longer sits at the top
   of .mm-footer-top.
   The source file is a flat RGB export with an opaque white background
   (no alpha channel), so placed directly on the navy footer it showed up
   as a hard-edged white rectangle. Rather than fight that with a blend
   mode (multiply would crush the navy wordmark to near-black against this
   background), it's wrapped in a small white badge — a deliberate chip,
   not a stray box — sized to the logo with its own rounded corners and a
   soft lift off the footer. */
.mm-footer-logo-badge{
  display:flex; align-items:center; justify-content:center; width:max-content; margin:0 auto 14px; padding:9px 16px;
  background:#fff; border-radius:12px; box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.mm-footer-logo{ height:26px; display:block; }
.mm-footer-brand-fallback{ font-weight:900; font-size:21px; color:#fff; letter-spacing:-.01em; }
.mm-footer-brand-fallback .mate{ color:var(--teal); }
.mm-footer-links{ display:flex; gap:30px; font-size:15px; font-weight:600; }
.mm-footer-links a{ color:#A9B7CC; padding-bottom:2px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s; }
.mm-footer-links a:hover{ color:#fff; border-color:var(--teal); }

/* ---------- Footer contact form ----------
   Was bare inputs floating on the footer background — now grouped into a
   visible card (its own surface, border + soft glow) so the form reads
   as one unit, with icon-led fields and a livelier submit button. */
.mm-contact{ display:grid; grid-template-columns:1fr 1.3fr; gap:40px; align-items:start; padding-bottom:8px; }
@media (max-width:760px){ .mm-contact{ grid-template-columns:1fr; } }
.mm-contact-head h3{ color:#fff; font-size:21px; font-weight:900; margin:0 0 8px; }
.mm-contact-head p{ color:#A9B7CC; font-size:14.5px; line-height:1.6; margin:0; max-width:320px; }
.mm-contact-form{
  display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:22px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.mm-contact-row{ display:flex; gap:12px; flex-wrap:wrap; }
.mm-contact-row input{ flex:1; min-width:160px; }
.mm-contact-field{ position:relative; display:flex; flex:1; min-width:160px; }
.mm-contact-row .mm-contact-field{ min-width:160px; }
.mm-contact-field svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#7E91AC; pointer-events:none; transition:color .15s ease; }
.mm-contact-form .mm-contact-field input{ padding-left:40px; width:100%; }
.mm-contact-field:focus-within svg{ color:var(--teal); }
.mm-contact-form input, .mm-contact-form textarea{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:11px;
  padding:13px 14px; font-size:14.5px; font-family:inherit; color:#fff; outline:none; width:100%;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.mm-contact-form input::placeholder, .mm-contact-form textarea::placeholder{ color:#7E91AC; }
.mm-contact-form input:focus, .mm-contact-form textarea:focus{
  border-color:var(--teal); background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(46,196,182,.18);
}
.mm-contact-form textarea{ min-height:96px; resize:vertical; }
.mm-contact-hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:-9999px; }
.mm-contact-err{ color:#FCA5A5; font-size:13.5px; font-weight:600; }
.mm-contact-ok{ color:#86EFAC; font-size:14.5px; font-weight:700; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); border-radius:10px; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.mm-contact-form button{
  align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
}
.mm-contact-form button:disabled{ opacity:.7; cursor:default; transform:none !important; }

/* Request a Curriculum / Standard form */
.mm-curric-card{
  max-width:720px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:30px 32px; box-shadow:0 24px 56px rgba(11,31,59,.08);
  position:relative; overflow:hidden;
}
.mm-curric-card:before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--teal), var(--yellow), var(--coral));
}
.mm-curric-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.mm-curric-field{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:7px; }
.mm-curric-field-full{ margin-bottom:16px; }
.mm-curric-field label{ font-size:13.5px; font-weight:700; color:var(--navy); }
.mm-optional{ font-weight:500; color:var(--muted); }
.mm-curric-field input, .mm-curric-field select, .mm-curric-field textarea{
  background:#F6F8FB; border:1px solid var(--line); border-radius:11px;
  padding:12px 14px; font-size:14.5px; font-family:inherit; color:var(--navy); outline:none; width:100%;
  transition:border-color .15s, background .15s, box-shadow .15s; appearance:none;
}
.mm-curric-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E91AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
.mm-curric-field textarea{ min-height:84px; resize:vertical; }
.mm-curric-field input:focus, .mm-curric-field select:focus, .mm-curric-field textarea:focus{
  border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(46,196,182,.14);
}
.mm-hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:-9999px; }
.mm-form-msg{ font-size:13.5px; font-weight:600; margin-bottom:14px; }
.mm-form-msg.err{ color:#C0372B; }
.mm-form-msg.ok{ color:#15803D; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.mm-curric-submit{ display:inline-flex; align-items:center; gap:9px; }
.mm-curric-submit:disabled{ opacity:.7; cursor:default; transform:none !important; }

.mm-footer-bottom{
  max-width:var(--maxw); margin:26px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.08);
  font-size:13px; color:#7E91AC; text-align:center;
}

/* ---------- Final CTA band ----------
   Was a flat navy box — now carries the same glow/grid treatment as the
   hero (so the page feels like one system, not a dull box tacked on at
   the end), plus a badge and a pulsing ring on the primary button so the
   single most important click on the page actually draws the eye. */
.mm-cta-band{
  background:linear-gradient(135deg, var(--navy) 0%, #15335D 100%); border-radius:28px; padding:64px 40px;
  max-width:var(--maxw); margin:0 auto; text-align:center; position:relative; overflow:hidden;
  border:1px solid rgba(46,196,182,.18);
  box-shadow:0 30px 70px rgba(11,31,59,.35);
}
.mm-cta-band:before{
  content:""; position:absolute; inset:-2px; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 85% 80% at 50% 20%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 20%, #000 0%, transparent 75%);
}
.mm-cta-band:after{
  content:""; position:absolute; inset:-30%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 50% at 12% 15%, rgba(46,196,182,.4) 0%, transparent 70%),
    radial-gradient(34% 44% at 90% 85%, rgba(255,195,0,.3) 0%, transparent 70%),
    radial-gradient(30% 36% at 95% 10%, rgba(255,107,91,.18) 0%, transparent 70%);
  filter:blur(14px);
  animation:mmAurora 22s ease-in-out infinite;
}
.mm-cta-band > *{ position:relative; z-index:1; }
.mm-cta-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:#8FE3DB; background:rgba(46,196,182,.14); border:1px solid rgba(46,196,182,.34);
  border-radius:999px; padding:7px 16px; margin-bottom:18px;
}
.mm-cta-band h2{ color:#fff; font-size:clamp(25px,3.3vw,36px); font-weight:900; margin:0 0 12px; }
.mm-cta-band p{ color:#B9C6DC; margin:0 0 30px; font-size:17px; }
.mm-cta-band .mm-btn-primary{
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%); color:#4A3700;
  box-shadow:0 0 0 0 rgba(255,195,0,.5), 0 12px 28px rgba(0,0,0,.28);
  animation:mmPulseRing 2.6s ease-out infinite;
}
.mm-cta-band .mm-btn-primary:hover{ animation-play-state:paused; transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.32); }
@keyframes mmPulseRing{
  0%{ box-shadow:0 0 0 0 rgba(255,195,0,.45), 0 12px 28px rgba(0,0,0,.28); }
  70%{ box-shadow:0 0 0 16px rgba(255,195,0,0), 0 12px 28px rgba(0,0,0,.28); }
  100%{ box-shadow:0 0 0 0 rgba(255,195,0,0), 0 12px 28px rgba(0,0,0,.28); }
}
@media (prefers-reduced-motion: reduce){
  .mm-cta-band:after{ animation:none; }
  .mm-cta-band .mm-btn-primary{ animation:none; }
  .mm-about-teaser:before{ animation:none; }
}


/* ---------- Nav actions (Oct 2026) ----------
   Shared by the pricing page (language dropdown, Resources, Tutorials,
   avatar / Sign In) and by home + About (Sign In + Explore MathMate). */
.mm-nav-actions{ display:flex; align-items:center; gap:12px; }
.mm-pill-link{
  padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:#fff;
  color:var(--navy); font-size:15px; font-weight:800; white-space:nowrap;
  box-shadow:0 2px 8px rgba(11,31,59,.05); transition:border-color .15s, color .15s;
}
.mm-pill-link:hover{ border-color:var(--teal-text); color:var(--teal-text); }
.mm-signin{
  display:inline-flex; align-items:center; padding:10px 22px; border:2px solid var(--navy-soft); border-radius:12px;
  background:#fff; color:var(--navy); font-weight:800; font-size:15.5px; white-space:nowrap; transition:background .15s, color .15s;
}
.mm-signin:hover{ background:var(--navy); color:#fff; }
.mm-acct{ position:relative; display:flex; align-items:center; gap:12px; }
.mm-avatar{
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,var(--teal),#7FE3D8); color:#fff; font-weight:900; font-size:18px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(23,163,150,.3);
}
.mm-avatar:focus-visible{ outline:3px solid rgba(46,196,182,.5); outline-offset:2px; }
.mm-acct-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px; max-width:calc(100vw - 24px); padding:12px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(11,31,59,.18); z-index:80;
}
.mm-acct-menu[hidden]{ display:none; }
.mm-acct-name{ font-weight:800; padding:6px 8px 0; word-break:break-word; }
.mm-acct-email{ font-size:13.5px; color:var(--muted); padding:2px 8px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; word-break:break-all; }
.mm-acct-link{ display:block; padding:10px 8px; border-radius:8px; font-weight:800; color:var(--teal-text); }
.mm-acct-link:hover{ background:#F1F5F9; }
.mm-acct-out{ width:100%; margin-top:4px; padding:10px; border:0; border-radius:8px; background:#FEE2E2; color:#991B1B; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit; }
@media (max-width:1180px){ .mm-nav-actions .mm-pill-link{ display:none; } }
@media (max-width:860px){ .mm-nav-actions{ display:none; } .mm-nav-actions.keep-mobile{ display:flex; } }

/* ---------- Homepage v2 (Oct 2026): compact hero + grade nav + testimonials ---------- */
.hv2{ position:relative; padding:18px 24px 14px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg,#E6F4FC 0%,#F1F9FD 70%,#F7FAFC 100%); }
.hv2:before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 70% at 12% 30%, rgba(46,196,182,.14), transparent 70%), radial-gradient(40% 70% at 88% 40%, rgba(88,184,246,.16), transparent 70%); }
.hv2-inner{ position:relative; max-width:760px; margin:0 auto; }
.hv2-h1{ margin:0 0 12px; font-size:clamp(30px,3.8vw,46px); line-height:1.06; font-weight:900; letter-spacing:-.025em; color:var(--navy); }
.hv2-h1 .r{ color:var(--teal-deep); } .hv2-h1 .g{ color:#2FAE4E; }
.hv2-desc{ margin:0 auto 6px; font-size:17px; line-height:1.4; color:var(--navy-soft); }
.hv2-free{ margin:0 auto 12px; font-size:16px; line-height:1.4; color:#334155; }
.hv2-btn{ display:inline-flex; align-items:center; padding:12px 38px; border-radius:12px; font-weight:900; font-size:18.5px; color:#fff !important;
  background:linear-gradient(135deg,#3B9C94,#1D7A71); box-shadow:0 8px 20px rgba(29,122,113,.35); transition:transform .15s, box-shadow .15s; }
.hv2-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(29,122,113,.45); }
.hv2-note{ margin-top:6px; font-size:15px; color:var(--navy); font-weight:700; }
.hv2-art{ position:absolute; top:6px; width:210px; pointer-events:none; }
.hv2-art-l{ left:max(10px, calc(50% - 720px)); } .hv2-art-r{ right:max(10px, calc(50% - 720px)); }
@media (max-width:1180px){ .hv2-art{ display:none; } }
.hv2-title{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:clamp(21px,2.4vw,28px); font-weight:900; letter-spacing:-.01em; color:var(--navy); margin:0 0 8px; }
.hv2-title .g{ color:#1E9C8C; }
.hv2-title .spark{ width:16px; height:16px; background:
  linear-gradient(#F7B731,#F7B731) 0 0/100% 3px no-repeat; display:inline-block; transform:rotate(-30deg); border-radius:2px; opacity:.9; }
.hv2-grades{ padding:12px 24px 4px; max-width:var(--maxw); margin:0 auto; }
.hv2-gcards{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.hv2-g{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px 6px; background:#fff; border:1px solid #D9E7F3; border-radius:16px;
  box-shadow:0 6px 16px rgba(11,31,59,.06); text-align:center; transition:transform .15s, box-shadow .15s, border-color .15s; }
.hv2-g:hover{ transform:translateY(-3px); border-color:var(--teal); box-shadow:0 12px 24px rgba(11,31,59,.12); }
.hv2-g .n{ font-weight:900; font-size:17px; color:var(--navy); line-height:1.1; }
.hv2-g .go{ color:var(--teal-text); font-weight:900; font-size:18px; line-height:1; }
@media (max-width:980px){ .hv2-gcards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .hv2-gcards{ grid-template-columns:repeat(2,1fr); } }
.hv2-testi{ padding:6px 24px 22px; max-width:var(--maxw); margin:0 auto; }
.hv2-tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .hv2-tgrid{ grid-template-columns:1fr; } }
.hv2-t{ margin:0; padding:12px 16px 10px; border-radius:18px; background:#EEF5FD; border:1px solid #D9E7F3; display:flex; flex-direction:column; text-align:left; position:relative; }
.hv2-t.g{ background:#EBF8F0; border-color:#CDEBD8; } .hv2-t.p{ background:#F1EEFB; border-color:#DDD6F3; }
.hv2-t .q{ position:absolute; left:14px; top:2px; font-size:54px; line-height:1; font-weight:900; color:#58B8F6; font-family:Georgia,serif; }
.hv2-t.g .q{ color:#2FAE4E; } .hv2-t.p .q{ color:#8B6FE0; }
.hv2-t blockquote{ margin:0 0 8px 44px; font-size:14px; line-height:1.38; color:#1F2F46; flex:1; display:flex; align-items:center; }
.hv2-t figcaption{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:8px; min-height:66px; border-top:1px solid rgba(11,31,59,.1); font-size:13.5px; line-height:1.25; color:#475569; }
.hv2-t figcaption b{ font-size:15px; color:var(--navy); }
.hv2-t .av{ flex:none; width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle at 50% 36%, var(--c) 0 20%, transparent 21%), radial-gradient(ellipse at 50% 108%, var(--c) 0 46%, transparent 47%), var(--bg2); --c:#2F6FD8; --bg2:#CFE2F9; }
.hv2-t .av.gr{ --c:#2FAE4E; --bg2:#CDEBD8; } .hv2-t .av.pu{ --c:#7B5CD6; --bg2:#DDD6F3; }
@media (max-width:700px){ .hv2{ padding:22px 18px 18px; } }

/* ---------- About v2 (Oct 2026): warm, clean, no photo, no stat boxes ---------- */
.ab2{ position:relative; overflow:hidden; padding:64px 24px 80px;
  background:linear-gradient(180deg,#FFF8E8 0%,#F4FAF8 380px,#F7FAFC 100%); }
.ab2-g{ position:absolute; pointer-events:none; color:#2EC4B6; opacity:.22; }
.ab2-g.g1{ left:3%; top:60px; width:230px; } .ab2-g.g2{ right:4%; top:90px; width:170px; color:#F5A700; opacity:.3; }
.ab2-g.g3{ left:6%; bottom:90px; width:130px; color:#2F6FD8; opacity:.18; } .ab2-g.g4{ right:6%; bottom:140px; width:130px; color:#17A396; opacity:.22; }
@media (max-width:1100px){ .ab2-g{ display:none; } }
.ab2-wrap{ position:relative; max-width:780px; margin:0 auto; }
.ab2-kicker{ text-align:center; font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:14.5px; color:var(--teal-text); margin-bottom:14px; }
.ab2-h1{ text-align:center; font-size:clamp(30px,4.4vw,46px); line-height:1.12; font-weight:900; letter-spacing:-.02em; margin:0 0 34px; color:var(--navy); }
.ab2-body{ font-size:19.5px; line-height:1.65; color:#1F2F46; }
.ab2-body p{ margin:0 0 20px; }
.ab2-body .ab2-that{ font-weight:900; font-size:22px; color:var(--teal-text); }
.ab2-quote{ margin:34px 0 26px; padding:24px 28px; border-radius:18px; font-size:clamp(22px,2.6vw,27px); line-height:1.35; font-weight:800; color:var(--navy);
  background:linear-gradient(135deg,#DDF5F1 0%,#FFF1C9 100%); border-left:7px solid var(--teal); box-shadow:0 10px 26px rgba(23,163,150,.14); }
.ab2-sign{ font-weight:900; font-size:21px; color:var(--navy); } .ab2-sign span{ font-weight:700; font-size:17px; color:var(--muted); }
.ab2-cta{ text-align:center; margin-top:40px; }
.ab2-cta .mm-btn-primary{ color:#fff; }

/* Phones: keep logo + language + burger on one row; Explore MathMate moves into the burger menu. */
@media (max-width:640px){
  .mm-nav-actions.keep-mobile .mm-cta, .mm-nav-actions.keep-mobile .mm-signin{ display:none; }
  .mm-nav-actions.keep-mobile{ margin-left:auto; }
  .mm-nav-inner{ gap:8px; }
}

.ab2-photo{ margin:0 auto 22px; }


/* ---------- Grades page (Oct 2026): six compact grade-level cards ----------
   Heading, short description, two-column resource list with the small
   colored icons, one button. No dashboard illustrations. */
.gr-page{ padding:34px 24px 70px; background:linear-gradient(180deg,#EAF5FB 0,#F7FAFC 340px); }
.gr-head{ max-width:var(--maxw); margin:0 auto 26px; text-align:center; }
.gr-h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.1; font-weight:900; letter-spacing:-.02em; color:var(--navy); margin:0 0 8px; }
.gr-h1 span{ color:#1E9C8C; }
.gr-sub{ color:var(--muted); font-size:17px; margin:0; }
.gr-card{ max-width:1100px; margin:0 auto 22px; background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:28px 32px 30px; box-shadow:0 8px 24px rgba(11,31,59,.06); scroll-margin-top:96px; transition:box-shadow .3s, border-color .3s; }
.gr-card:target{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(46,196,182,.25), 0 12px 30px rgba(11,31,59,.1); }
.gr-top{ display:flex; gap:20px; align-items:flex-start; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.gr-mark{ flex:none; width:64px; height:64px; border-radius:18px; background:#EAF4F3; display:flex; align-items:center; justify-content:center; }
.gr-eyebrow{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.gr-title{ font-size:28px; line-height:1.15; font-weight:900; letter-spacing:-.01em; margin:2px 0 6px; color:var(--navy); }
.gr-desc{ color:#475569; font-size:17px; line-height:1.45; margin:0; }
.gr-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 44px; }
.gr-list li{ display:flex; align-items:center; gap:12px; font-size:17px; font-weight:600; line-height:1.3; color:var(--navy-soft); }
.gr-list li svg{ flex:none; width:34px; height:34px; padding:7px; box-sizing:border-box; border-radius:10px; color:var(--teal-text); background:#EAFDFB; }
.gr-list li.navy svg{ color:var(--navy); background:#EEF2F8; }
.gr-list li.yellow svg{ color:var(--yellow-text); background:#FFF7E0; }
.gr-btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:12px; font-weight:800; font-size:18px; color:#fff !important;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%); box-shadow:0 6px 16px rgba(23,163,150,.3); transition:transform .15s, box-shadow .15s; }
.gr-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(23,163,150,.4); }
@media (max-width:760px){
  .gr-card{ padding:22px 20px 24px; }
  .gr-list{ grid-template-columns:1fr; gap:12px; }
  .gr-title{ font-size:24px; }
  .gr-btn{ width:100%; justify-content:center; box-sizing:border-box; }
}

/* Responsive (Oct 2026): iOS Safari zooms the whole page when a focused field is under 16px,
   which made the contact/request forms and login jump around on phones. */
@media screen and (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea{ font-size:16px !important; }
}