/* ============================================================
   MINUTES MOJO LANDING — ported from Claude Design handoff
   "Variant 3.0.html" (Website Hero Design project).
   Everything generic is scoped under .mm-landing so it can't
   leak into other pages; section-scoped classes (.mmhiw-scope,
   .mmvid-scope, .mmfaq-scope, .mmcar-scope, .mm-pricing,
   .mm-cta, .mm-footer) keep the design file's names.
   ============================================================ */

/* ---- page canvas: continuous ruled legal-pad paper on cream ---- */
.mm-landing {
  --egyptian-blue: #003494;
  --egyptian-blue-600: #002975;
  --egyptian-blue-800: #00153d;
  --turquoise: #40e0d0;
  --sky-blue: #89dbfa;
  --jasmine: #ffd37d;
  --jasmine-600: #ffce6e;
  --coral: #ff8b7d;
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, sans-serif;
  color: #2c3242;
  background-color: #faf7f0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(0, 52, 148, 0.04) 39px, rgba(0, 52, 148, 0.04) 40px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- accessibility: visible keyboard focus + skip link ---- */
.mm-landing :where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid #003494;
  outline-offset: 3px;
}
.mm-landing .skip-link {
  position: absolute; left: 16px; top: 16px; z-index: 200;
  opacity: 0; pointer-events: none; transform: translateY(-90px);
  background: #003494; color: #fff; font-family: "Inter", system-ui, sans-serif;
  font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 10px;
  text-decoration: none; transition: transform .18s ease, opacity .18s ease;
  box-shadow: 0 10px 24px -8px rgba(0,21,61,.5);
}
.mm-landing .skip-link:focus { opacity: 1; transform: none; pointer-events: auto; }

/* shared keyframes (referenced by several sections) */
@keyframes ul-draw { to { stroke-dashoffset: 0; } }
@keyframes mmReveal { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* anchored sections stop below the sticky nav instead of sliding under it */
.mm-landing [id] { scroll-margin-top: 110px; }

/* ============================================================
   HERO — "Burst Through". The torn-paper photo reads as ripping
   through the ruled-cream page; a radial alpha mask feathers the
   rectangle's edges so nothing crowds the copy.
   ============================================================ */
/* content box is exactly 1140px when there's room, so the copy's left edge
   lines up with the floating nav card's edge */
/* The landing sits flush in the full-bleed <main> (no pb-20 like constrained
   pages), so pad its close to match Lovable's BottomCta→footer gap: 96px
   desktop (= the footer's 64px margin-top + this) and 64px on mobile, where
   this drops away — mirroring Lovable's own breakpoint values. */
.mm-home { padding-bottom: 32px; }
@media (max-width: 560px) { .mm-home { padding-bottom: 0; } }

.mm-landing .hero {
  max-width: calc(1140px + 2 * clamp(20px, 5vw, 48px)); margin: 0 auto; width: 100%;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 48px) 0;
  display: grid; grid-template-columns: 1fr 1.04fr;
  gap: clamp(10px, 1.6vw, 28px); align-items: center;
}
.mm-landing .hero h1 {
  font-family: "Solway", Georgia, serif; font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(31px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--egyptian-blue); margin: 0 0 30px;
}

/* hand-written underline: strokes draw on after the headline settles.
   Base state is fully visible (safe for reduced-motion); only when JS
   arms it AND motion is allowed do we hide-then-draw. */
.mm-landing .hl { position: relative; white-space: nowrap; }
.mm-landing .hl .hl-txt { position: relative; z-index: 1; }
.mm-landing .hl > svg {
  position: absolute; left: -4%; bottom: -0.26em; width: 108%; height: 0.46em;
  overflow: visible; z-index: 0; pointer-events: none;
}
.mm-landing .hl .ul-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mm-landing .hl.ul-animate .ul-stroke { stroke-dashoffset: 1; }
  .mm-landing .hl.ul-animate .ul-main  { animation: ul-draw .42s cubic-bezier(.65,.02,.32,1) .28s forwards; }
  .mm-landing .hl.ul-animate .ul-under { animation: ul-draw .34s cubic-bezier(.65,.02,.32,1) .56s forwards; }
}

/* one calm subhead instead of two stacked lines */
.mm-landing .lead {
  font-size: clamp(15.5px, 1.2vw, 17.5px); font-weight: 500; line-height: 1.5;
  color: var(--egyptian-blue-800); margin: 0 0 24px; max-width: 44ch;
}

/* audience qualifier — quiet uppercase microline above the CTA */
.mm-landing .audience {
  display: flex; align-items: center; gap: 13px; margin: 0 0 36px;
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--egyptian-blue-800);
}
.mm-landing .audience i { font-style: normal; font-weight: 400; color: #c2c7d1; transform: translateY(-1px); }

/* pill CTA */
.mm-landing .cta-block { margin: 0 0 30px; }
.mm-landing .cta {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 11px;
  font-size: 14.5px; font-weight: 600; white-space: nowrap; color: #fff;
  background: var(--egyptian-blue); padding: 11px 20px; border-radius: 999px;
  text-decoration: none; box-shadow: 0 6px 18px -6px rgba(0,52,148,.5);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.mm-landing .cta:hover { background: var(--egyptian-blue-600); transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(0,52,148,.55); }
.mm-landing .cta .arr { transition: transform .2s ease; }
.mm-landing .cta:hover .arr { transform: translateX(4px); }
.mm-landing .cta-note { margin: 11px 2px 0; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #5b6473; }

/* testimonial quote card — sits visibly separate from the CTA.
   Solway has no true italic, so the quote is set roman. */
.mm-landing .quote-card {
  display: inline-flex; flex-direction: column; gap: 6px; background: #fff;
  border: 1px solid #f0ece1; border-left: 3px solid var(--jasmine);
  border-radius: 4px 12px 12px 4px; padding: 16px 22px 16px 18px; max-width: 44ch;
  box-shadow: 0 1px 3px rgba(0,21,61,.06); position: relative; margin-top: 14px;
}
.mm-landing .qtext {
  font-family: "Solway", Georgia, serif; font-style: normal; font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.35; color: #14161b; margin: 0;
}
.mm-landing .qwho { font-size: 13.5px; color: #6b7280; margin: 4px 0 0; }

/* ---- art stage ---- */
.mm-landing .art { position: relative; display: flex; justify-content: center; align-items: flex-end; overflow: visible; }
.mm-landing .stage {
  position: relative; width: min(100%, 440px); min-height: 458px;
  display: flex; justify-content: center; align-items: center;
  transform: translateY(-44px);
}
.mm-landing .photo-card { position: relative; z-index: 2; width: 100%; max-width: 440px; aspect-ratio: 1 / 1.02; }
.mm-landing .hero-photo {
  display: block; width: 100%; height: 100%; max-height: none;
  -o-object-fit: cover;
     object-fit: cover; -o-object-position: 50% 46%; object-position: 50% 46%; filter: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 47%, #000 50%, rgba(0,0,0,0) 92%);
          mask-image: radial-gradient(ellipse 70% 78% at 50% 47%, #000 50%, rgba(0,0,0,0) 92%);
}

/* sparkles popping around the torn hole (static at rest; drift outward
   + rotate on CTA hover, no fade) */
.mm-landing .accents { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mm-landing .sparkle { position: absolute; transform-origin: center; transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .55s ease; }
.mm-landing .sp1 { top: 5%;  right: 17%; width: 30px; color: var(--coral);     --bx: 30px;  --by: -42px; }
.mm-landing .sp2 { top: 8%;  left: 18%;  width: 22px; color: var(--turquoise); --bx: -34px; --by: -30px; }
.mm-landing .sp3 { top: 46%; right: 9%;  width: 18px; color: var(--sky-blue);  --bx: 42px;  --by: -22px; }
.mm-landing .sp4 { bottom: 11%; left: 17%;  width: 20px; color: var(--jasmine); --bx: -30px; --by: -50px; }
.mm-landing .sp5 { bottom: 5%;  right: 18%; width: 25px; color: var(--coral);   --bx: 28px;  --by: -56px; }
.mm-landing .hero:has(.cta:hover) .sparkle { transform: translate(var(--bx), var(--by)) rotate(16deg) scale(1.06); opacity: 1; }

/* sparkle field fades in after the hero image settles, with a gentle pop */
@media (prefers-reduced-motion: no-preference) {
  .mm-landing .accents { opacity: 0; transform: scale(.9); transform-origin: 52% 55%;
    transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  /* animation: none cancels the mmRevealSafety fill once the real reveal runs
     (see the .reveal.is-in note below). */
  .mm-landing .accents.spark-in { opacity: 1; transform: none; animation: none; }
}

/* one-time staggered entrance on load (light nod, not a demo).
   Transition-based so the END state is visible — if anything stalls,
   content snaps in rather than getting stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
  .mm-landing .reveal { opacity: 0; transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1); }
  .mm-landing .reveal.reveal-img { transform: translateY(10px) scale(.965); }
  /* animation: none cancels the mmRevealSafety fill (below) once the real
     reveal owns the element — a lingering forwards fill would pin transform
     and block any later transform on the same element (hover lifts etc.). */
  .mm-landing .reveal.is-in { opacity: 1; transform: none; animation: none; }
  .mm-landing .r1 { transition-delay: .05s; }
  .mm-landing .r2 { transition-delay: .16s; }
  .mm-landing .r3 { transition-delay: .24s; }
  .mm-landing .r4 { transition-delay: .32s; }
  .mm-landing .r5 { transition-delay: .44s; }
  .mm-landing .reveal-img { transition-delay: .14s; }

  /* Safety net: `.is-in` / `.spark-in` are added by React, so if hydration
     never happens (JS disabled, blocked, or the bundle fails) the hero would
     stay invisible forever. This CSS-only animation reveals it regardless.
     `to`-only keyframes make it a visual no-op when the normal reveal already
     ran — it animates from the current (visible) state to identical values. */
  .mm-landing .reveal,
  .mm-landing .accents { animation: mmRevealSafety .6s ease 2.2s forwards; }
}
@keyframes mmRevealSafety { to { opacity: 1; transform: none; } }

/* ============================================================
   HOW IT WORKS — editorial split, scoped to .mmhiw-scope.
   Transparent + width-matched to the hero/nav so it reads as
   one page rather than a pasted-in card.
   ============================================================ */
.mmhiw-scope{
  margin-top:96px;
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --cream:#faf7f0; --jasmine:#ffd37d; --jasmine-600:#ffce6e;
  --turquoise:#40e0d0; --sky:#89dbfa; --coral:#ff8b7d;
  --muted:#5b6473; --rule:rgba(0,40,120,.07);
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.mm-frame{
  position:relative; max-width:1140px; margin:0 auto;
  padding:24px clamp(20px,5vw,48px) 80px;
  display:grid; grid-template-columns:1.08fr 0.92fr; gap:64px; align-items:center;
}

.mm-eyebrow{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:12px; font-weight:700; letter-spacing:.17em; color:var(--navy); text-transform:uppercase; margin-bottom:18px; }
.mm-eyebrow-tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }

.mm-h2{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(28px, 3.6vw, 40px); line-height:1.12; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.mm-hl-underline{ position:relative; white-space:nowrap; }
.mm-hl-underline > .mm-hl-txt{ position:relative; z-index:1; }
.mm-hl-underline > svg{ position:absolute; left:-4%; bottom:-.22em; width:108%; height:.42em; overflow:visible; z-index:0; pointer-events:none; }
/* hand-drawn underline draws on (matches hero); base state fully drawn so
   reduced-motion shows it complete. */
.mm-hl-underline .ul-stroke{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion: no-preference){
  .mm-frame .mm-hl-underline .ul-stroke, .mmvid-frame .mm-hl-underline .ul-stroke{ stroke-dashoffset:1; }
  .mm-frame.is-in .mm-hl-underline .ul-main, .mmvid-frame.is-in .mm-hl-underline .ul-main{ animation:ul-draw .42s cubic-bezier(.65,.02,.32,1) .58s forwards; }
  .mm-frame.is-in .mm-hl-underline .ul-under, .mmvid-frame.is-in .mm-hl-underline .ul-under{ animation:ul-draw .34s cubic-bezier(.65,.02,.32,1) .86s forwards; }
}

/* staggered entrance — slides up when the section scrolls into view.
   Opacity is driven statically by .is-in (never stuck hidden); the
   keyframe only animates the slide. */
@media (prefers-reduced-motion: no-preference){
  .mmhiw-scope .mm-reveal{ opacity:0; }
  .mm-frame.is-in .mm-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mm-frame.is-in .d1{ animation-delay:.04s; }
  .mm-frame.is-in .d2{ animation-delay:.14s; }
  .mm-frame.is-in .d3{ animation-delay:.30s; }
  .mm-frame.is-in .d4{ animation-delay:.40s; }
  .mm-frame.is-in .d5{ animation-delay:.50s; }
  .mm-frame.is-in .d6{ animation-delay:.62s; }
}

.mm-step-title{ font-family:var(--sans); font-weight:700; font-size:17px; color:var(--ink); margin:0; }
.mm-step-desc{ font-size:14.5px; line-height:1.5; color:var(--muted); font-weight:400; margin:6px 0 0; }

.mm-btn{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; background:var(--navy); color:#fff; font-family:var(--sans); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:999px; text-decoration:none; cursor:pointer; box-shadow:0 14px 26px -12px rgba(0,52,148,.6); transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.mm-btn:hover{ transform:translateY(-2px); background:var(--navy-600); box-shadow:0 20px 34px -12px rgba(0,52,148,.62); }
.mm-arr{ transition:transform .18s ease; }
.mm-btn:hover .mm-arr{ transform:translateX(4px); }
.mm-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:34px; }
.mm-cta-primary{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.mm-cta-note{ font-size:12.5px; font-weight:500; line-height:1.4; color:#5b6473; white-space:nowrap; }

.mm-steplist{ display:flex; flex-direction:column; gap:22px; margin-top:26px; }
.mm-steprow-h{ display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:flex-start; }
.mm-step-chip{ position:relative; width:46px; height:46px; }
.mm-step-chip-ico{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#003494; box-shadow:0 8px 16px -9px rgba(0,52,148,.55); }
.mm-step-chip-n{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 4px; border-radius:10px; background:var(--navy); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }

.mm-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:432px; }
.mm-arch{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:380px; height:452px; background:#dbe8ff; border-radius:190px 190px 40px 40px; z-index:0; }
.mm-arch::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 30px 60px -30px rgba(0,52,148,.35); }
.mm-star{ position:absolute; z-index:3; }
.mm-star-a{ top:5%; right:5%; } .mm-star-b{ bottom:13%; left:3%; } .mm-star-c{ top:42%; left:-1%; }

@media (max-width:880px){
  .mm-frame{ grid-template-columns:1fr; gap:40px; padding:24px 28px 56px; }
  .mm-stage{ min-height:0; order:-1; }
  .mm-arch{ width:320px; height:392px; }
}

/* ---- walkthrough animation (wm-*) — blue-gradient card ---- */
.mmhiw-scope .wm-media{ position:relative; overflow:hidden; width:340px; border-radius:18px;
  background:radial-gradient(125% 85% at 50% 0%, #eef3ff 0%, #e7edfb 58%, #e1e8f8 100%);
  border:1px solid #d7e0f5; box-shadow:0 24px 60px -24px rgba(0,52,148,.35);
  display:flex; flex-direction:column; align-items:center; gap:22px; padding:24px; height:432px; }
.wm-anim{ flex:1; min-height:0; position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; }
.wm-stage{ position:relative; flex:1; min-height:0; }
.wm-scene{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; opacity:0; transform:scale(.98); transition:opacity .65s ease, transform .65s ease; pointer-events:none; }
.wm-scene.on{ opacity:1; transform:scale(1); }
.wm-scene-cap{ font-size:12.5px; font-weight:700; color:#1f2c52; letter-spacing:.01em; white-space:nowrap; }
.wm-scene-sub{ font-size:11px; font-weight:500; color:#41506b; margin-top:-12px; white-space:nowrap; }

.wm-rec-dot{ display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.14em; color:#f0563f; }
.wm-rec-dot b{ width:8px; height:8px; border-radius:50%; background:#f0563f; }
.wm-scene.on .wm-rec-dot b{ animation:wmBlink 1.2s steps(1, end) infinite; }
@keyframes wmBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:.3;} }
.wm-devices{ position:relative; display:flex; align-items:flex-end; justify-content:center; }
.wm-laptop{ width:138px; }
.wm-laptop-screen{ height:86px; background:#fff; border:2px solid #003494; border-bottom:0; border-radius:9px 9px 0 0; display:flex; align-items:center; justify-content:center; }
.wm-laptop-base{ height:9px; background:#aebfe6; border-radius:0 0 11px 11px; margin:0 -12px; }
.wm-phone{ position:absolute; right:-10px; bottom:6px; width:42px; height:74px; background:#fff; border:2px solid #003494; border-radius:9px; display:flex; align-items:center; justify-content:center; box-shadow:-8px 8px 18px -10px rgba(0,52,148,.4); }
.wm-wave{ display:flex; align-items:center; gap:5px; height:50px; }
.wm-wave i{ width:6px; height:100%; border-radius:3px; transform-origin:center; transform:scaleY(.4); }
.wm-wave-sm{ height:30px; gap:3px; }
.wm-wave-sm i{ width:3.5px; }
@keyframes wmWaveA{ 0%{transform:scaleY(.42);} 25%{transform:scaleY(.9);} 55%{transform:scaleY(.5);} 80%{transform:scaleY(1);} 100%{transform:scaleY(.42);} }
@keyframes wmWaveB{ 0%{transform:scaleY(.72);} 30%{transform:scaleY(.36);} 62%{transform:scaleY(.92);} 100%{transform:scaleY(.72);} }
@keyframes wmWaveC{ 0%{transform:scaleY(.5);} 22%{transform:scaleY(.95);} 48%{transform:scaleY(.4);} 72%{transform:scaleY(.78);} 100%{transform:scaleY(.5);} }
@keyframes wmWaveD{ 0%{transform:scaleY(.85);} 38%{transform:scaleY(.44);} 66%{transform:scaleY(1);} 100%{transform:scaleY(.85);} }

.wm-upzone{ position:relative; overflow:hidden; min-width:158px; border:2px dashed #9db2e6; border-radius:16px; background:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px 22px; }
.wm-scene.on .wm-upzone{ animation:wmZoneFill .01s linear 2.05s forwards; }
@keyframes wmZoneFill{ to{ border-style:solid; border-color:#003494; } }
.wm-upfill-clip{ position:absolute; inset:0; border-radius:15px; overflow:hidden; z-index:0; pointer-events:none; }
.wm-upfill{ position:absolute; left:50%; top:50%; width:30px; height:30px; border-radius:50%; background:rgba(0,52,148,.08); transform:translate(-50%,-50%) scale(0); }
.wm-scene.on .wm-upfill{ animation:wmRadiate .65s cubic-bezier(.3,.7,.3,1) 2.05s forwards; }
@keyframes wmRadiate{ from{transform:translate(-50%,-50%) scale(0);} to{transform:translate(-50%,-50%) scale(22);} }
.wm-upfile{ position:relative; z-index:1; width:56px; height:64px; background:#fff; border:1px solid #e0e6f4; border-radius:8px; padding:8px; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:0 10px 22px -10px rgba(0,52,148,.45); }
.wm-upfile-thumb{ width:100%; height:30px; border-radius:4px; background:#003494; display:flex; align-items:center; justify-content:center; }
.wm-upfile-thumb svg{ color:#fff; }
.wm-upfile-tag{ font-size:8px; font-weight:800; letter-spacing:.08em; color:#003494; background:#e0e9fb; padding:1px 6px; border-radius:3px; }
.wm-cursor{ position:absolute; right:-9px; bottom:-7px; color:#003494; filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)); }
.wm-scene.on .wm-cursor{ animation:wmCursorOut .4s ease 2.05s forwards; }
@keyframes wmCursorOut{ to{ opacity:0; transform:translate(7px, 5px) scale(.85); } }
.wm-scene.on .wm-upfile{ animation:wmDragIn 2s cubic-bezier(.22,1,.36,1) both, wmDeshadow .45s ease 2.05s forwards; }
@keyframes wmDragIn{ 0%{transform:translate(48px,-64px) rotate(-9deg) scale(.9); opacity:0;} 22%{opacity:1;} 70%{transform:translate(0,0) rotate(0) scale(1);} 82%{transform:translate(0,-5px);} 100%{transform:translate(0,0); opacity:1;} }
@keyframes wmDeshadow{ to{ box-shadow:0 0 0 0 rgba(0,52,148,0); } }
.wm-genwrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; opacity:0; }
.wm-scene.on .wm-genwrap{ animation:wmFadeIn .45s ease 2.2s both; }
.wm-progress{ width:116px; height:7px; border-radius:99px; background:rgba(0,52,148,.12); overflow:hidden; }
.wm-progress span{ display:block; height:100%; width:0; border-radius:99px; background:#ffce5c; }
.wm-scene.on .wm-progress span{ animation:wmFill 2.6s cubic-bezier(.4,.05,.25,1) 2.35s forwards; }
@keyframes wmFill{ from{width:0;} to{width:100%;} }
.wm-gen-label{ font-size:10px; font-weight:600; letter-spacing:.03em; color:#41506b; }

.wm-done-wrap{ position:relative; }
.wm-confetti{ position:absolute; left:50%; top:46%; width:0; height:0; z-index:0; pointer-events:none; }
.wm-confetti-bit{ position:absolute; top:0; left:0; border-radius:2px; opacity:0; }
.wm-scene.on .wm-confetti-bit{ animation:wmBurst 1.9s cubic-bezier(.18,.7,.3,1) both; }
@keyframes wmBurst{ 0%{transform:translate(0,0) rotate(0deg) scale(.3); opacity:0;} 22%{opacity:1;} 100%{transform:translate(var(--tx), var(--ty)) rotate(var(--r)); opacity:0;} }
.wm-doc{ position:relative; z-index:2; width:98px; height:118px; background:#fff; border-radius:10px; box-shadow:0 16px 34px -16px rgba(0,52,148,.45); padding:16px 14px; display:flex; flex-direction:column; gap:8px; }
.wm-doc i{ height:5px; border-radius:3px; background:#dbe3f7; }
.wm-doc i:nth-child(1){ width:58%; background:#003494; }
.wm-doc i:nth-child(3){ width:82%; }
.wm-doc i:nth-child(5){ width:50%; }
.wm-scene.on .wm-doc{ animation:wmDocIn .55s ease both; }
@keyframes wmDocIn{ 0%{opacity:0; transform:translateY(10px) scale(.96);} 100%{opacity:1; transform:none;} }
.wm-check{ position:absolute; right:-13px; bottom:-13px; width:44px; height:44px; border-radius:50%; background:#003494; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(0,52,148,.7); transform:scale(0); z-index:5; }
.wm-scene.on .wm-check{ animation:wmPop .6s cubic-bezier(.34,1.56,.64,1) .42s both; }
@keyframes wmPop{ 0%{transform:scale(0);} 100%{transform:scale(1);} }
.wm-spark{ position:absolute; opacity:0; z-index:1; }
.wm-spark-1{ top:-14px; left:-18px; color:#40e0d0; } .wm-spark-2{ top:16px; right:-24px; color:#f0a92a; }
.wm-spark-3{ bottom:30px; left:-22px; color:#ff8b7d; } .wm-spark-4{ top:-22px; right:-14px; color:#ffce5c; } .wm-spark-5{ bottom:6px; right:-26px; color:#40e0d0; }
.wm-scene.on .wm-spark-1{ animation:wmTwinkle 1.6s ease .55s infinite; }
.wm-scene.on .wm-spark-2{ animation:wmTwinkle 1.6s ease .9s infinite; }
.wm-scene.on .wm-spark-3{ animation:wmTwinkle 1.6s ease 1.25s infinite; }
.wm-scene.on .wm-spark-4{ animation:wmTwinkle 1.8s ease .75s infinite; }
.wm-scene.on .wm-spark-5{ animation:wmTwinkle 1.8s ease 1.45s infinite; }
@keyframes wmTwinkle{ 0%,100%{opacity:0; transform:scale(.4);} 45%{opacity:1; transform:scale(1);} }
@keyframes wmFadeIn{ from{opacity:0;} to{opacity:1;} }

.wm-steps{ display:flex; align-items:flex-start; justify-content:center; gap:2px; padding-top:8px; }
.wm-step{ display:flex; flex-direction:column; align-items:center; gap:7px; width:66px; background:transparent; border:0; cursor:pointer; font-family:inherit; padding:2px 0; animation:wmBob 2.8s ease-in-out infinite; }
@keyframes wmBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
.wm-step-ico{ width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid #d7e0f5; color:#003494; display:inline-flex; align-items:center; justify-content:center; transition:background .3s, color .3s, border-color .2s, box-shadow .2s, transform .2s; }
.wm-step:hover .wm-step-ico{ transform:scale(1.12); border-color:#9db2e6; box-shadow:0 6px 14px -5px rgba(0,52,148,.35); }
.wm-step.is-active .wm-step-ico{ background:#ffce5c; color:#003494; border-color:#ffce5c; box-shadow:0 8px 16px -7px rgba(255,191,71,.75); }
.wm-step.is-active:hover .wm-step-ico{ box-shadow:0 9px 18px -6px rgba(255,191,71,.85); }
.wm-step.is-done .wm-step-ico{ background:#003494; color:#fff; border-color:#003494; }
.wm-step-label{ font-size:10px; font-weight:600; color:#5b6b94; transition:color .3s; }
.wm-step.is-active .wm-step-label, .wm-step.is-done .wm-step-label{ color:#003494; font-weight:700; }
.wm-step-line{ flex:0 0 18px; height:0; margin-top:17px; border-top:1.5px dashed #b9c6e8; transition:border-color .3s; }
.wm-step-line.is-filled{ border-top-style:solid; border-color:#003494; }
.wm-replay{ margin:10px auto 0; background:transparent; border:0; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; color:#41506b; font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:8px; transition:color .15s, background .15s; }
.wm-replay:hover{ color:#003494; background:#e7edfb; }
.wm-controls{ display:flex; align-items:center; justify-content:center; gap:8px; }
.wm-media.is-paused *{ animation-play-state:paused !important; }
/* honor reduced-motion: freeze the walkthrough's looping animations (WCAG 2.3.3 / 2.2.2) */
@media (prefers-reduced-motion: reduce){
  .wm-media *{ animation:none !important; }
  .wm-scene{ transition:opacity .12s linear !important; transform:none !important; }
  .wm-spark, .wm-confetti-bit, .wm-cursor{ display:none !important; }
  .wm-check{ transform:none !important; }
}

/* ============================================================
   PRODUCT VIDEO — centered, breaks the left/right rhythm above.
   ============================================================ */
.mmvid-scope{
  margin-top:72px;
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --jasmine:#ffd37d; --jasmine-600:#ffce6e; --turquoise:#40e0d0; --sky:#89dbfa; --coral:#ff8b7d;
  --muted:#5b6473;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.mmvid-frame{ max-width:1000px; margin:0 auto; padding:0 clamp(20px,5vw,48px) 96px; text-align:center; }
.mmvid-head{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:38px; }
.mmvid-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.17em; color:var(--navy); text-transform:uppercase; }
.mmvid-eyebrow .mm-eyebrow-tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }
.mmvid-h2{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(28px, 3.6vw, 40px); line-height:1.12; letter-spacing:-.02em; margin:0; max-width:24ch; text-wrap:balance; }

/* video placeholder card */
.mmvid-player{ position:relative; display:block; -moz-appearance:none; appearance:none; -webkit-appearance:none; padding:0; font:inherit; color:inherit; text-align:center; width:100%; max-width:640px; margin:0 auto; aspect-ratio:16/9; border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%, #eaf0ff 0%, #dbe8ff 55%, #cfe0ff 100%);
  border:1px solid #ccdcfb; box-shadow:0 40px 80px -36px rgba(0,52,148,.5), 0 2px 0 rgba(255,255,255,.6) inset; cursor:pointer; }
/* the demo's real first frame fills the card; a soft navy scrim keeps the
   play button and tag legible over the screenshot */
.mmvid-thumb{ position:absolute; inset:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:50% 12%; object-position:50% 12%; pointer-events:none; }
.mmvid-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,21,61,.08) 0%, rgba(0,21,61,.02) 45%, rgba(0,21,61,.38) 100%); }
.mmvid-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:90px; height:90px; border-radius:50%;
  background:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy);
  box-shadow:0 18px 40px -14px rgba(0,52,148,.6); transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s ease, background .18s ease, color .18s ease; z-index:3; }
.mmvid-play svg{ margin-left:5px; }
.mmvid-player:hover .mmvid-play{ transform:translate(-50%,-50%) scale(1.08); background:var(--navy); color:#fff; box-shadow:0 22px 48px -14px rgba(0,52,148,.7); }
.mmvid-play::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,.55); }
.mmvid-tag{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); background:rgba(255,255,255,.78); border:1px solid rgba(0,52,148,.12); padding:5px 12px; border-radius:999px; backdrop-filter:blur(3px); }

/* once playing, the placeholder swaps to a real <video> */
.mmvid-video{ display:block; width:100%; max-width:640px; margin:0 auto; aspect-ratio:16/9; border-radius:22px; overflow:hidden;
  background:#00153d; border:1px solid #ccdcfb; box-shadow:0 40px 80px -36px rgba(0,52,148,.5); }

.mmvid-star{ position:absolute; z-index:2; }
.mmvid-star-a{ top:-16px; right:6%; } .mmvid-star-b{ bottom:-14px; left:5%; }

/* reveal — static opacity (clock-independent), keyframe only slides */
@media (prefers-reduced-motion: no-preference){
  .mmvid-scope .vid-reveal{ opacity:0; }
  .mmvid-frame.is-in .vid-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mmvid-frame.is-in .vd1{ animation-delay:.04s; }
  .mmvid-frame.is-in .vd2{ animation-delay:.14s; }
  .mmvid-frame.is-in .vd3{ animation-delay:.26s; }
}

@media (max-width:880px){
  .mmvid-play{ width:68px; height:68px; }
  .mmvid-frame{ padding-bottom:72px; }
}

/* ============================================================
   FOUNDER TEASER — credibility beat before the demo: copy left,
   Marci's portrait + the founder's books right. Teases /about.
   ============================================================ */
.mmfounder-scope{
  margin-top:72px;
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --jasmine:#ffd37d; --jasmine-600:#ffce6e; --turquoise:#40e0d0; --sky:#89dbfa; --coral:#ff8b7d;
  --muted:#5b6473;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.mmfounder-frame{ max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,48px) 80px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,6vw,72px); align-items:center; }

.mmfounder-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.17em; color:var(--navy); text-transform:uppercase; margin-bottom:18px; }
.mmfounder-eyebrow .mm-eyebrow-tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }
.mmfounder-h2{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(28px, 3.6vw, 40px); line-height:1.12; letter-spacing:-.02em; margin:0; max-width:16ch; text-wrap:balance; }
.mmfounder-body{ font-size:16px; line-height:1.6; color:var(--muted); margin:20px 0 0; max-width:50ch; }

/* ghost pill — quiet secondary action, won't compete with the navy
   conversion CTAs around it (mirrors the closing/about ghost buttons) */
.mmfounder-cta{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; margin-top:26px;
  background:#fff; color:var(--navy); font-family:var(--sans); font-weight:600; font-size:14.5px; padding:11px 20px;
  border-radius:999px; border:1.5px solid rgba(0,52,148,.22); text-decoration:none; cursor:pointer;
  box-shadow:0 8px 18px -12px rgba(0,52,148,.45); transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.mmfounder-cta:hover{ border-color:var(--navy); box-shadow:0 14px 26px -12px rgba(0,52,148,.5); transform:translateY(-2px); }
.mmfounder-cta svg{ flex:none; transition:transform .16s ease; }
.mmfounder-cta:hover svg{ transform:translateX(4px); }

/* media: books as the main image, small round headshot of Marci as accent.
   An asymmetrical flat blob sits behind, mirroring the closing/bottom-cta
   blobs (organic border-radius, solid tint, slight rotation, no gradient).
   The book art carries its own soft shadow, so no drop-shadow filter here. */
.mmfounder-media{ position:relative; justify-self:center; width:100%; max-width:430px; }
.mmfounder-blob{ position:absolute; z-index:0; pointer-events:none; left:2%; top:4%; width:84%; aspect-ratio:1/1;
  border-radius:46% 54% 57% 43% / 55% 46% 54% 45%; transform:rotate(-9deg); background:#d9e8ff; }
.mmfounder-books{ position:relative; display:block; width:100%; height:auto; z-index:1; }
.mmfounder-portrait{ position:absolute; left:-3%; bottom:3%; width:140px; height:140px; -o-object-fit:cover; object-fit:cover; -o-object-position:50% 28%; object-position:50% 28%;
  border-radius:50%; border:5px solid #fff; box-shadow:0 18px 38px -16px rgba(0,52,148,.45); z-index:2; }

/* staged entrance: blob settles, books rise, then Marci's face pops in
   (springy overshoot) — keyed off the same .is-in flip as the copy reveal */
@media (prefers-reduced-motion: no-preference){
  .mmfounder-scope .mmfounder-blob,
  .mmfounder-scope .mmfounder-books,
  .mmfounder-scope .mmfounder-portrait{ opacity:0; }
  /* dedicated keyframe so the entrance preserves the blob's base rotation
     (mmReveal ends at transform:none, which would flatten the tilt) */
  .mmfounder-frame.is-in .mmfounder-blob{ animation:mmBlobIn .6s cubic-bezier(.2,.7,.3,1) .06s both; }
  .mmfounder-frame.is-in .mmfounder-books{ animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) .16s both; }
  .mmfounder-frame.is-in .mmfounder-portrait{ animation:mmPop .5s cubic-bezier(.34,1.56,.64,1) .44s both; }
}
@keyframes mmPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes mmBlobIn{ from{ opacity:0; transform:translateY(18px) rotate(-9deg); } to{ opacity:1; transform:translateY(0) rotate(-9deg); } }

@media (prefers-reduced-motion: no-preference){
  .mmfounder-scope .fd-reveal{ opacity:0; }
  .mmfounder-frame.is-in .fd-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mmfounder-frame.is-in .fd1{ animation-delay:.04s; }
  .mmfounder-frame.is-in .fd2{ animation-delay:.14s; }
  .mmfounder-frame.is-in .fd3{ animation-delay:.26s; }
}

.mmfounder-frame .mm-hl-underline .ul-stroke{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion: no-preference){
  .mmfounder-frame .mm-hl-underline .ul-stroke{ stroke-dashoffset:1; }
  .mmfounder-frame.is-in .mm-hl-underline .ul-main{ animation:ul-draw .42s cubic-bezier(.65,.02,.32,1) .5s forwards; }
  .mmfounder-frame.is-in .mm-hl-underline .ul-under{ animation:ul-draw .34s cubic-bezier(.65,.02,.32,1) .78s forwards; }
}

@media (max-width:860px){
  .mmfounder-frame{ grid-template-columns:1fr; gap:36px; padding-bottom:64px; text-align:center; }
  .mmfounder-eyebrow{ justify-content:center; }
  .mmfounder-h2, .mmfounder-body{ margin-left:auto; margin-right:auto; }
  .mmfounder-media{ order:-1; max-width:340px; }
}

/* ============================================================
   FAQ — "Questions, answered". One white card, clean accordion.
   ============================================================ */
.mmfaq-scope{
  margin-top:72px;
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --jasmine:#ffd37d; --jasmine-600:#ffce6e; --coral:#ff8b7d;
  --muted:#5b6473; --faq-border:#eef0f2;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.mmfaq-frame{ max-width:720px; margin:0 auto; padding:0 clamp(20px,5vw,48px) 16px; }

.mmfaq-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin-bottom:38px; }
.mmfaq-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.17em; color:var(--navy); text-transform:uppercase; }
.mmfaq-eyebrow .mm-eyebrow-tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }
.mmfaq-h2{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(28px, 3.6vw, 40px); line-height:1.12; letter-spacing:-.02em; margin:0; max-width:20ch; text-wrap:balance; }

/* one white card, same family as the nav / quote surfaces */
.mmfaq-card{ background:#fff; border:1px solid #eee7d8; border-radius:20px; padding:6px 34px;
  box-shadow:0 22px 50px -30px rgba(0,21,61,.4); }

.mmfaq-list{ list-style:none; margin:0; padding:0; }
.c-row{ border-top:1px solid var(--faq-border); }
.c-row:first-child{ border-top:none; }
.c-btn{ width:100%; display:flex; align-items:flex-start; gap:16px; background:none; border:none;
  cursor:pointer; text-align:left; font-family:var(--sans); padding:24px 0; }

.c-label{ flex:1; font-size:17px; font-weight:600; line-height:1.4; color:var(--ink); letter-spacing:-.005em; }
.c-chev{ flex:0 0 auto; color:#9fb0c8; display:grid; place-items:center; margin-top:3px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), color .25s ease; }
.c-chev svg{ width:20px; height:20px; }
.c-row.is-open .c-chev{ transform:rotate(180deg); color:var(--navy); }

/* smooth height reveal via grid-rows trick (no JS measuring) */
.c-answer-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.2,.7,.3,1); }
.c-row.is-open .c-answer-wrap{ grid-template-rows:1fr; }
/* hide collapsed answers from the accessibility tree, not just visually */
.c-answer-inner{ overflow:hidden; visibility:hidden; transition:visibility 0s linear .42s; }
.c-row.is-open .c-answer-inner{ visibility:visible; transition-delay:0s; }
.c-answer{ padding:0 26px 28px 0; }
.c-answer p{ font-size:16px; line-height:1.55; color:var(--muted); margin:0; max-width:64ch; }
.c-answer p + p{ margin-top:14px; }

/* a quiet contact line under the card */
.mmfaq-foot{ text-align:center; margin:48px 0 0; font-size:15px; color:var(--muted); }
.mmfaq-foot a, .mmfaq-foot button{ color:var(--navy); font-family:inherit; font-size:inherit; background:none; border:none; padding:0 0 1px; cursor:pointer; font-weight:700; text-decoration:none; border-bottom:2px solid var(--jasmine); transition:border-color .18s ease; }
.mmfaq-foot a:hover, .mmfaq-foot button:hover{ border-color:var(--navy); }

/* hand-drawn underline draws on when the section scrolls in (matches above) */
.mmfaq-frame .mm-hl-underline .ul-stroke{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion: no-preference){
  .mmfaq-frame .mm-hl-underline .ul-stroke{ stroke-dashoffset:1; }
  .mmfaq-frame.is-in .mm-hl-underline .ul-main{ animation:ul-draw .42s cubic-bezier(.65,.02,.32,1) .5s forwards; }
  .mmfaq-frame.is-in .mm-hl-underline .ul-under{ animation:ul-draw .34s cubic-bezier(.65,.02,.32,1) .78s forwards; }
}

/* staggered entrance — same vocabulary as the sections above */
@media (prefers-reduced-motion: no-preference){
  .mmfaq-scope .faq-reveal{ opacity:0; }
  .mmfaq-frame.is-in .faq-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mmfaq-frame.is-in .fd1{ animation-delay:.04s; }
  .mmfaq-frame.is-in .fd2{ animation-delay:.14s; }
  .mmfaq-frame.is-in .fd4{ animation-delay:.34s; }
  .mmfaq-frame.is-in .fd5{ animation-delay:.44s; }
}

@media (max-width:680px){
  .mmfaq-card{ padding:4px 22px; }
  .c-label{ font-size:16px; }
  .c-answer{ padding-left:0; padding-right:6px; }
  .mmfaq-frame{ padding-bottom:36px; }
}

/* ============================================================
   TESTIMONIALS — spotlight carousel (Sherri / Paula / Mark)
   ============================================================ */
.mmcar-scope{
  margin-top:72px;
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --jasmine:#ffd37d; --jasmine-600:#ffce6e; --muted:#5b6473;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  color:var(--ink); font-family:var(--sans);
}
.mmcar-scope *{ box-sizing:border-box; }
.mmcar-frame{ max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,48px); position:relative; }

.mmcar-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:15px; margin-bottom:8px; }
.mmcar-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.17em; color:var(--navy); text-transform:uppercase; }
.mmcar-eyebrow .tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }
.mmcar-h2{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(28px,3.6vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0; max-width:20ch; text-wrap:balance; }
.mmcar-rating{ display:inline-flex; align-items:center; gap:9px; margin-top:4px; font-size:14px; font-weight:600; color:var(--muted); }
.mmcar-rating b{ color:var(--navy); }

/* underline draw — gated on this scope's .is-in, matching the rest of the page */
@media (prefers-reduced-motion: no-preference){
  .mmcar-frame .mm-hl-underline .ul-stroke{ stroke-dashoffset:1; }
  .mmcar-frame.is-in .mm-hl-underline .ul-main{ animation:ul-draw .42s cubic-bezier(.65,.02,.32,1) .45s forwards; }
  .mmcar-frame.is-in .mm-hl-underline .ul-under{ animation:ul-draw .34s cubic-bezier(.65,.02,.32,1) .72s forwards; }
}

/* staggered fade-up entrance — same vocabulary as how-it-works / pricing */
@media (prefers-reduced-motion: no-preference){
  .mmcar-scope .mm-reveal{ opacity:0; }
  .mmcar-frame.is-in .mm-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mmcar-frame.is-in .cd1{ animation-delay:.04s; }
  .mmcar-frame.is-in .cd2{ animation-delay:.14s; }
  .mmcar-frame.is-in .cd3{ animation-delay:.24s; }
  .mmcar-frame.is-in .cd4{ animation-delay:.34s; }
}

/* shared avatar — headshot photo, or a calm navy disc with initials */
.mmcar-scope .av{ flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; color:#fff; letter-spacing:.01em;
  background:var(--navy); box-shadow:0 6px 14px -8px rgba(0,21,61,.6); }
.mmcar-scope img.av{ -o-object-fit:cover; object-fit:cover; border:2px solid #fff; }

/* spotlight stage */
.car{ max-width:920px; margin:30px auto 0; display:flex; flex-direction:column; align-items:center; text-align:center; }
/* all quotes occupy the same grid cell, so the stage is always as tall as
   the LONGEST one — rotating quotes can't push the content below around */
.car-stage{ position:relative; width:100%; display:grid; align-items:center; justify-items:center; }
.car-item{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; margin:0; visibility:hidden; }
.car-item.is-active{ visibility:visible; }
.car-quote{ font-family:var(--display); font-weight:400; font-size:27px; line-height:1.42; letter-spacing:-.01em; color:var(--ink); margin:0; max-width:34ch; }
.car-quote b{ font-weight:700; color:var(--navy); }
.car-by{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.car-by .av{ width:52px; height:52px; font-size:19px; }
.car-by-meta{ text-align:left; display:flex; flex-direction:column; gap:2px; }
.car-by-name{ font-size:16px; font-weight:700; color:var(--ink); }
.car-by-role{ font-size:13.5px; font-weight:500; color:var(--muted); }
@media (prefers-reduced-motion: no-preference){
  .car-item.is-active{ animation:carIn .55s cubic-bezier(.2,.7,.3,1); }
}
/* each quote slides in left-to-right */
@keyframes carIn{ from{ transform:translateX(-32px); opacity:0; } to{ transform:none; opacity:1; } }

.car-nav{ display:flex; align-items:center; gap:18px; margin-top:38px; }
.car-arrow{ -webkit-appearance:none; -moz-appearance:none; appearance:none; width:40px; height:40px; border-radius:50%; border:1.5px solid #d8dbe2;
  background:#fff; color:var(--navy); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 18px -12px rgba(0,21,61,.4); transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.car-arrow:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(0,21,61,.45); }
.car-dots{ display:flex; align-items:center; gap:10px; }
.car-dot{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border:0; padding:0; width:9px; height:9px; border-radius:50%; background:#d3d7e0; cursor:pointer; transition:transform .2s cubic-bezier(.3,1.5,.5,1), background .2s ease; }
.car-dot.on{ background:var(--navy); transform:scale(1.35); }

@media (max-width:680px){
  .mmcar-scope{ margin-top:56px; }
  .car-quote{ font-size:22px; }
}

/* ============================================================
   PRICING — single centered card, harmonized to the page
   ============================================================ */
.mm-pricing{
  --navy:#003494; --navy-deep:#002975; --navy-soft:#3a5a93;
  --ink:#00153d; --body:#5b6473; --body-soft:#8b93a3;
  --jasmine:#ffd37d; --turquoise:#40e0d0; --coral:#ff8b7d;
  --green:#12936f; --green-soft:#e3f4ec;
  --sans:'Inter',system-ui,sans-serif; --slab:'Solway',Georgia,serif;
  position:relative; box-sizing:border-box;
  margin-top:72px; padding:8px 32px 12px;
  font-family:var(--sans); color:var(--ink); text-align:center;
  background:transparent; -webkit-font-smoothing:antialiased;
}
.mm-pricing *, .mm-pricing *::before, .mm-pricing *::after { box-sizing:border-box; }
.mm-pricing .mm-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; }

.mm-pricing .mm-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:12px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--navy);
  margin:0 0 16px;
}
.mm-pricing .mm-eyebrow-tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }

.mm-pricing .mm-head{
  font-family:var(--slab); font-weight:700; color:var(--navy);
  letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(28px, 3.6vw, 40px); margin:0 0 56px; text-wrap:balance;
}
/* staggered fade-up entrance — same vocabulary as the hero / how-it-works */
@media (prefers-reduced-motion: no-preference){
  .mm-pricing .pr-reveal{ opacity:0; }
  .mm-pricing.is-in .pr-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mm-pricing.is-in .pd1{ animation-delay:.04s; }
  .mm-pricing.is-in .pd2{ animation-delay:.14s; }
  .mm-pricing.is-in .pd3{ animation-delay:.28s; }
  .mm-pricing.is-in .pd4{ animation-delay:.4s; }
}
/* hand-drawn underline — same treatment as the hero / video / FAQ heads */
.mm-pricing .mm-hl-underline .ul-stroke{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion: no-preference){
  .mm-pricing .mm-hl-underline .ul-stroke{ stroke-dashoffset:1; }
  .mm-pricing.is-in .mm-hl-underline .ul-main{ animation:ul-draw .42s cubic-bezier(.65,.02,.32,1) .4s forwards; }
  .mm-pricing.is-in .mm-hl-underline .ul-under{ animation:ul-draw .34s cubic-bezier(.65,.02,.32,1) .68s forwards; }
}

.mm-pricing .mm-card{
  position:relative; background:#fff; border-radius:18px;
  border:1px solid #eee7d8;
  box-shadow:0 24px 56px -28px rgba(0,21,61,.38), 0 3px 12px -6px rgba(0,21,61,.1);
  max-width:430px; margin:0 auto; padding:38px 34px 34px; text-align:left;
}

.mm-pricing .mm-free-badge{
  position:absolute; top:-14px; right:24px;
  display:inline-flex; align-items:center; white-space:nowrap;
  background:#d3f5ee; color:#0b7268; border:1px solid rgba(11,114,104,.18);
  font-weight:800; font-size:12.5px;
  letter-spacing:.01em; padding:8px 16px; border-radius:999px;
  box-shadow:0 12px 22px -14px rgba(11,114,104,.45); line-height:1.15;
}

.mm-pricing .mm-from{
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--body);
  margin:2px 0 6px;
}
.mm-pricing .mm-price{
  font-family:var(--slab); font-weight:700; color:var(--navy);
  line-height:.9; letter-spacing:-.02em;
  display:inline-flex; align-items:flex-end; gap:6px;
  font-size:60px; margin:0 0 14px;
}
.mm-pricing .mm-price .mm-cur{ font-size:.44em; align-self:flex-start; transform:translateY(.18em); font-weight:600; }
.mm-pricing .mm-price .mm-per{ font-size:.24em; transform:translateY(-.55em); color:var(--body); font-weight:600; font-family:var(--sans); }

.mm-pricing .mm-lead{
  font-family:var(--sans); font-size:15.5px; line-height:1.5;
  color:var(--ink); font-weight:600; margin:0 0 22px;
}

.mm-pricing .mm-outcomes{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.mm-pricing .mm-outcomes li{
  display:grid; grid-template-columns:21px 1fr; gap:11px; align-items:start;
  font-size:14px; line-height:1.4; color:#2c3858; font-weight:450;
}
.mm-pricing .mm-check{
  width:20px; height:20px; border-radius:50%; background:#dbe8ff;
  display:inline-flex; align-items:center; justify-content:center; flex:none; margin-top:1px;
}
.mm-pricing .mm-check svg{ width:11.5px; height:11.5px; display:block; }

.mm-pricing .mm-cta{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:14.5px; color:#fff;
  background:var(--navy); padding:12px 22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  width:100%; box-shadow:0 16px 30px -10px rgba(0,52,148,.55);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; text-decoration:none;
}
.mm-pricing .mm-cta:hover{ transform:translateY(-2px); background:var(--navy-deep); box-shadow:0 22px 38px -10px rgba(0,52,148,.62); }
.mm-pricing .mm-cta:active{ transform:translateY(0); }
.mm-pricing .mm-cta .mm-arrow{ transition:transform .18s ease; display:inline-flex; }
.mm-pricing .mm-cta:hover .mm-arrow{ transform:translateX(5px); }
.mm-pricing .mm-cta svg{ width:18px; height:18px; display:block; }

.mm-pricing .mm-cta-sub{ margin:13px 0 0; text-align:center; font-size:13px; color:#5b6473; }
.mm-pricing .mm-cta-sub a{ color:#003494; font-weight:600; text-decoration:none; white-space:nowrap; }
.mm-pricing .mm-cta-sub a:hover{ text-decoration:underline; }

.mm-pricing .mm-spk{ position:absolute; z-index:1; pointer-events:none; opacity:1; transform:translate(var(--dx,0), var(--dy,0)); }
.mm-pricing .mm-spk svg{ display:block; transition:transform .45s cubic-bezier(.2,.7,.3,1); }
/* sparkles drift further out + rotate when the CTA is hovered (matches the hero) */
.mm-pricing:has(.mm-cta:hover) .mm-spk svg{ transform:translate(var(--hx,0), var(--hy,0)) rotate(14deg) scale(1.12); }
@media (prefers-reduced-motion: no-preference){
  .mm-pricing.is-in .mm-spk{ animation:mm-spk-drift .9s cubic-bezier(.2,.7,.3,1) both; }
  .mm-pricing.is-in .mm-spk:nth-of-type(1){ animation-delay:.06s; }
  .mm-pricing.is-in .mm-spk:nth-of-type(2){ animation-delay:.2s; }
  .mm-pricing.is-in .mm-spk:nth-of-type(3){ animation-delay:.34s; }
}
@keyframes mm-spk-drift{
  from{ opacity:0; transform:translate(0,0) scale(.5); }
  to{ opacity:1; transform:translate(var(--dx,0), var(--dy,0)) scale(1); }
}

/* two tiers side by side — the $499 card leads, the group card is its
   slightly smaller companion (and the answer to "starting at") */
.mm-pricing .mm-cards{
  display:grid; grid-template-columns:430px 350px; gap:26px;
  justify-content:center; align-items:stretch;
}
/* both cards are bottom-anchored flex columns with the same bottom padding
   and a shared min-height on the under-button line, so the two CTAs sit on
   exactly the same baseline regardless of how much copy is above them */
.mm-pricing .mm-cards .mm-card{ margin:0; max-width:none; display:flex; flex-direction:column; }
.mm-pricing .mm-cards .mm-cta{ margin-top:auto; }
.mm-pricing .mm-cards .mm-cta-sub{ min-height:39px; }
.mm-pricing .mm-card--group{
  padding:38px 30px 34px;
  background:linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}
.mm-pricing .mm-price--custom{ font-size:38px; line-height:1; margin:2px 0 16px; }
.mm-pricing .mm-card--group .mm-outcomes{ margin-bottom:26px; }
.mm-pricing .mm-cta--ghost{
  background:#fff; color:var(--navy);
  border:1.5px solid rgba(0,52,148,.25);
  padding:10.5px 22px; /* compensate the border so both CTAs are the same height */
  box-shadow:0 8px 18px -12px rgba(0,52,148,.45);
}
.mm-pricing .mm-cta--ghost:hover{ background:#fff; border-color:var(--navy); box-shadow:0 14px 26px -12px rgba(0,52,148,.5); }
.mm-pricing .mm-card--group .mm-cta-sub{ font-size:12.5px; line-height:1.45; }

@media (max-width:880px){
  .mm-pricing .mm-cards{ grid-template-columns:min(430px, 100%); }
}
@media (max-width:720px){
  .mm-pricing{ padding:8px 22px 0; }
  .mm-pricing .mm-price{ font-size:52px; }
  .mm-pricing .mm-cards .mm-card{ padding:26px 20px 22px; }
}

/* ============================================================
   PAIN SECTION — "eighth job" sticky-note collage + stressed-person
   illustration, right after the hero (scoped to .mm-closing, the
   class kept from its original closing-CTA placement). The 1280px
   canvas is scaled to fit, capped at 1:1 so wide screens don't blow
   the artwork up.
   ============================================================ */
.mm-closing{ --primary:#003494; --turquoise:#40e0d0; --sky:#89dbfa; --jasmine:#ffd37d; --coral:#ff8b7d; --blue-700:#001e57;
  --headline:"Solway",Georgia,serif; --sub:"Inter",system-ui,sans-serif; --hand:"Caveat",cursive;
  /* width-matched to the hero/nav frame so the collage's left edge lines
     up with the rest of the page (the 1280px canvas scales down to fit) */
  position:relative; width:100%; max-width:calc(1140px + 2 * clamp(20px, 5vw, 48px));
  margin:96px auto 0; padding:0 clamp(20px, 5vw, 48px); }
.mm-closing *{ box-sizing:border-box; }
/* rounded contained band — gives the section its own "moment" on the
   legal pad without a full-bleed break (same vocabulary as the video
   card / footer's rounded surfaces) */
.mm-closing::before{
  content:""; position:absolute; z-index:0;
  inset:-44px clamp(20px, 5vw, 48px) -36px;
  border-radius:28px;
  /* very light jasmine — a pale wash of the brand yellow (#ffd37d) */
  background:linear-gradient(180deg, #fff9ee 0%, #fff3dc 100%);
  border:1px solid #f8e8c8;
  box-shadow:0 24px 56px -40px rgba(214,160,50,.28);
}
/* the band fades in with the collage/copy entrance (.is-in lands with the
   canvas's .play); base state is visible so it can never stay hidden for
   reduced-motion users or if the observer misfires */
@media (prefers-reduced-motion: no-preference){
  .mm-closing::before{ opacity:0; transition:opacity .8s ease; }
  .mm-closing.is-in::before{ opacity:1; }
}
.mm-closing .mm-wrap{ position:relative; z-index:1; width:100%; overflow:hidden; background:transparent; }
.mm-closing .mm-copy-m{ position:relative; z-index:1; }
.mm-closing .mm-canvas{ position:absolute; top:0; left:0; width:1280px; height:460px; transform-origin:top left; background:transparent; }

/* the whole illustration (woman + post-its) lives in one group so it can
   be scaled down as a unit, clearing room for the copy. */
.mm-closing .mm-graphics{ position:absolute; left:0; top:-30px; width:1280px; height:520px; z-index:3; transform:scale(.75); transform-origin:left center; }

.mm-closing .mm-blob{ position:absolute; z-index:3; pointer-events:none; left:128px; top:8px; width:512px; height:512px;
  border-radius:42% 58% 56% 44% / 56% 42% 58% 44%; transform:rotate(-7deg); background:#ffd4cb; box-shadow:0 30px 60px -42px rgba(0,21,61,.4); }
.mm-closing .mm-person{ position:absolute; left:-34px; top:6px; height:558px; width:auto; z-index:4; transform:scaleX(-1);
  filter:drop-shadow(0 16px 26px rgba(0,21,61,.14));
  /* fade the cropped bottom edge so the figure melts into the ruled paper */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 84%, rgba(0,0,0,0) 99%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 84%, rgba(0,0,0,0) 99%); }

.mm-closing .mm-copy{ position:absolute; right:56px; top:0; width:466px; height:460px; display:flex; flex-direction:column; justify-content:center; z-index:7; }
.mm-closing .hero-h{ font-family:var(--headline); font-weight:800; color:var(--primary); letter-spacing:-.005em; line-height:1.12; font-size:33px; max-width:370px; margin:0; }
.mm-closing .hero-h-l2{ display:block; margin-top:.55em; }

/* CTA cluster */
.mm-closing .mm-pain-cta{ display:flex; align-items:flex-start; gap:18px; margin:32px 0 0; flex-wrap:wrap; }
.mm-closing .mm-pain-primary{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.mm-closing .mm-pain-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; background:var(--primary); color:#fff; font-family:var(--sub); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:999px; text-decoration:none; box-shadow:0 14px 26px -12px rgba(0,52,148,.6); transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.mm-closing .mm-pain-btn svg{ transition:transform .18s ease; }
.mm-closing .mm-pain-btn:hover svg{ transform:translateX(4px); }
.mm-closing .mm-pain-btn:hover{ transform:translateY(-2px); background:var(--blue-700); box-shadow:0 20px 34px -12px rgba(0,52,148,.62); }
/* matches the hero's .cta-note so supporting lines read as one voice */
.mm-closing .mm-pain-note{ font-family:var(--sub); font-weight:500; font-size:12.5px; line-height:1.4; color:#5b6473; white-space:nowrap; }
/* the desktop copy lives inside the canvas, which renders at 0.89 scale at
   full width — these canvas-unit sizes are the standard sizes ÷ 0.8906 so
   the button and note match the rest of the page on screen. (The mobile
   copy block is unscaled and uses the standard sizes above.) */
.mm-closing .mm-canvas .mm-pain-btn{ font-size:16.3px; padding:12.4px 22.5px; gap:11px; }
.mm-closing .mm-canvas .mm-pain-btn svg{ width:19px; height:19px; }
.mm-closing .mm-canvas .mm-pain-note{ font-size:14px; }
.mm-closing .mm-pain-cta .mm-capture{ flex-basis:100%; margin-top:14px; }
.mm-closing .mm-canvas .mm-capture{ font-size:15.7px; }
.mm-closing .mm-pain-ghost{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; background:#fff; color:var(--primary); font-family:var(--sub); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:999px; border:1.5px solid rgba(0,52,148,.22); text-decoration:none; cursor:pointer; box-shadow:0 8px 18px -12px rgba(0,52,148,.45); transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.mm-closing .mm-pain-ghost:hover{ border-color:var(--primary); box-shadow:0 14px 26px -12px rgba(0,52,148,.5); transform:translateY(-2px); }
.mm-closing .mm-pain-ghost svg{ flex:none; }

/* underline sits just below the text baseline, but stays behind it */
.mm-closing .hl{ position:relative; isolation:isolate; white-space:nowrap; }
.mm-closing .hl .hl-txt{ position:relative; z-index:1; }
.mm-closing .hl > svg{ position:absolute; left:-4%; width:108%; overflow:visible; pointer-events:none; z-index:0; bottom:-0.22em; height:0.46em; }

.mm-closing .note{ position:absolute; font-family:var(--hand); color:#1d2233; display:flex; align-items:center; justify-content:center; text-align:center;
  line-height:1.06; border-radius:2px; padding:12px; background:var(--jasmine);
  box-shadow:0 1px 2px rgba(0,21,61,.12), 0 9px 17px -7px rgba(0,21,61,.22);
  transition:transform .16s cubic-bezier(.2,.8,.25,1), box-shadow .16s ease; }
.mm-closing .note.coral{ background:var(--coral); }
.mm-closing .note.sky{ background:var(--sky); }
.mm-closing .note.turq{ background:var(--turquoise); }
.mm-closing .note.jas{ background:var(--jasmine); }
.mm-closing .note.cream{ background:#fff3d6; }
.mm-closing .note:hover{ transform:rotate(var(--r,0deg)) translateY(-8px) scale(1.05); box-shadow:10px 20px 30px -12px rgba(0,21,61,.42); z-index:20; }

@keyframes mm-dropIn{0%{opacity:0; transform:translateY(-40px) rotate(var(--r,0deg)) scale(.85)} 70%{opacity:1} 100%{opacity:1; transform:translateY(0) rotate(var(--r,0deg)) scale(1)}}
@keyframes mm-fadeUp{0%{opacity:0; transform:translateY(16px)} 100%{opacity:1; transform:translateY(0)}}
.mm-closing .anim{ opacity:1; }
.mm-closing .mm-canvas.play .a-drop{ animation:mm-dropIn .62s cubic-bezier(.2,.8,.25,1) both; }
.mm-closing .mm-canvas.play .a-fade{ animation:mm-fadeUp .6s ease both; }
@media (prefers-reduced-motion: reduce){
  .mm-closing .mm-canvas.play .anim{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* on phones the scaled 1280px canvas made the headline and CTAs
   tiny/untappable. Show full-size copy in normal flow instead; the
   sticky-note collage above remains as a decorative band. */
.mm-closing .mm-copy-m{ display:none; }
@media (max-width:700px){
  .mm-closing .mm-canvas{ transform-origin:300px 0; left:calc(50% - 300px); }
  .mm-closing .mm-canvas .mm-copy{ display:none; }
  .mm-closing .mm-copy-m{ display:block; padding:clamp(18px,5vw,28px) 18px 6px; }
  .mm-closing .mm-copy-m .hero-h{ font-size:clamp(27px,7.6vw,36px); max-width:none; }
  .mm-closing .mm-copy-m .mm-pain-cta{ margin-top:24px; flex-direction:column; align-items:stretch; gap:14px; }
  .mm-closing .mm-copy-m .mm-pain-primary{ align-items:stretch; gap:8px; }
  .mm-closing .mm-copy-m .mm-pain-btn{ width:100%; padding-top:14px; padding-bottom:14px; }
  .mm-closing .mm-copy-m .mm-pain-note{ text-align:center; }
  .mm-closing .mm-copy-m .mm-pain-ghost{ width:100%; justify-content:center; padding-top:14px; padding-bottom:14px; }
}

/* ============================================================
   QUIZ TEASER — the Reality Check side door between pricing and
   the bottom CTA. The page's only dark band: a navy gradient card
   with jasmine accents, mirroring og-quiz.png and the /quiz
   benchmark card so the quiz keeps one identity site-wide.
   ============================================================ */
.mmquiz-scope{
  margin-top:96px;
  --navy:#003494; --ink:#00153d;
  --jasmine:#ffd37d; --jasmine-600:#ffce6e;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.mmquiz-frame{ max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.mmquiz-band{ position:relative; overflow:hidden; background:linear-gradient(165deg,#00307f,#001b52);
  border-radius:22px; padding:clamp(32px,4.5vw,52px) clamp(24px,4vw,52px); color:#eaf0ff;
  box-shadow:0 30px 64px -30px rgba(0,21,61,.6); }
.mmquiz-spark{ position:absolute; top:28px; right:8%; }
.mmquiz-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,56px); align-items:center; }

.mmquiz-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.17em; color:var(--jasmine); text-transform:uppercase; margin-bottom:16px; }
.mmquiz-eyebrow .mm-eyebrow-tick{ width:20px; height:3px; border-radius:2px; background:var(--jasmine); }
.mmquiz-h2{ font-family:var(--display); font-weight:700; color:#fff; font-size:clamp(26px,3.2vw,36px); line-height:1.16; letter-spacing:-.02em; margin:0; max-width:19ch; text-wrap:balance; }
.mmquiz-body{ font-size:15.5px; line-height:1.6; color:#c9d6f0; margin:16px 0 0; max-width:52ch; }

/* jasmine pill — the band's inversion of the site's navy .mm-btn, matching
   the "FREE 5-MINUTE QUIZ" pill on the share card. The reveal class sits on
   .mmquiz-cta (the wrapper), never on the button: mmReveal's filled final
   keyframe would pin transform:none and suppress the hover lift. */
.mmquiz-cta{ margin-top:24px; }
.mmquiz-btn{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--jasmine); color:var(--ink); font-family:var(--sans); font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:999px; text-decoration:none; cursor:pointer;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5); transition:transform .16s ease, background .16s ease, box-shadow .16s ease; }
.mmquiz-btn:hover{ transform:translateY(-2px); background:var(--jasmine-600); box-shadow:0 20px 34px -12px rgba(0,0,0,.55); }
.mmquiz-btn .mm-arr{ transition:transform .18s ease; }
.mmquiz-btn:hover .mm-arr{ transform:translateX(4px); }

.mmquiz-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:18px;
  font-size:13.5px; font-weight:600; color:#9fb4e0; }
.mmquiz-sep{ color:rgba(255,255,255,.28); }

/* benchmark teaser card — the shared BenchmarkCard component carries its own
   (inline) panel styling; this class only handles in-context layout */

/* staggered entrance — same vocabulary as the sections above */
@media (prefers-reduced-motion: no-preference){
  .mmquiz-scope .qz-reveal{ opacity:0; }
  .mmquiz-frame.is-in .qz-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mmquiz-frame.is-in .qz1{ animation-delay:.04s; }
  .mmquiz-frame.is-in .qz2{ animation-delay:.14s; }
  .mmquiz-frame.is-in .qz3{ animation-delay:.26s; }
  .mmquiz-frame.is-in .qz4{ animation-delay:.36s; }
}

@media (max-width:860px){
  .mmquiz-scope{ margin-top:72px; }
  .mmquiz-grid{ grid-template-columns:1fr; gap:32px; }
  .mmquiz-chart{ max-width:420px; }
}
@media (max-width:560px){
  .mmquiz-btn{ display:flex; justify-content:center; }
}

/* ============================================================
   BOTTOM CTA — the closing note at the very end of the page.
   Copy + buttons are real; .bc-art is an acknowledged placeholder
   panel until the closing illustration lands.
   ============================================================ */
.mm-bottomcta{
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --jasmine:#ffd37d; --muted:#5b6473;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  margin-top:104px; font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.mm-bottomcta .bc-frame{
  /* width-matched to the sections around it (quiz teaser, founder,
     testimonials — the 1080px convention) so the closing note doesn't
     read wider than the rest of the page; the art column still gets the
     larger share so the figure stays prominent */
  max-width:1080px; margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,3.5vw,56px); align-items:center;
}
.mm-bottomcta .bc-h2{
  font-family:var(--display); font-weight:700; color:var(--navy);
  font-size:clamp(28px,3.6vw,40px); line-height:1.14; letter-spacing:-.02em;
  margin:16px 0 30px; text-wrap:balance;
}
/* buttons stack vertically so the copy column stays narrow and the
   figure gets the room */
.mm-bottomcta .bc-cta-row{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.mm-capture{ margin:26px 0 0; font-size:14px; line-height:1.5; color:var(--muted); }
.mm-capture button{
  background:none; border:none; padding:0 0 1px; cursor:pointer;
  font-family:inherit; font-size:inherit; font-weight:700; color:var(--navy);
  border-bottom:2px solid var(--jasmine); transition:border-color .18s ease;
}
.mm-capture button:hover{ border-color:var(--navy); }
.mmhiw-scope .mm-capture{ margin-top:18px; }
.mm-bottomcta .bc-primary{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.mm-bottomcta .bc-note{ font-size:12.5px; font-weight:500; color:var(--muted); white-space:nowrap; }
.mm-bottomcta .bc-ghost{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  background:#fff; color:var(--navy); font-family:var(--sans); font-weight:600; font-size:14.5px;
  padding:11px 20px; border-radius:999px; border:1.5px solid rgba(0,52,148,.22);
  box-shadow:0 8px 18px -12px rgba(0,52,148,.45);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mm-bottomcta .bc-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(0,52,148,.5); }

/* closing art — the calm-at-last figure over an asymmetrical light-teal
   blob (mirrors the pain section's blob, resolved) */
.mm-bottomcta .bc-art{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  padding:18px 12px 0;
}
.mm-bottomcta .bc-blob{
  position:absolute; left:19%; top:4%; width:60%; height:84%;
  background:#d3e5ff; border-radius:44% 56% 58% 42% / 58% 44% 56% 42%;
  transform:rotate(7deg);
  box-shadow:0 30px 60px -42px rgba(0,21,61,.35);
}
.mm-bottomcta .bc-photo{
  position:relative; z-index:1; display:block; width:100%; max-width:720px; height:auto;
  /* desk and edges feather away into the page (same trick as the hero photo) */
  -webkit-mask-image:radial-gradient(ellipse 66% 76% at 50% 44%, #000 52%, rgba(0,0,0,0) 94%);
          mask-image:radial-gradient(ellipse 66% 76% at 50% 44%, #000 52%, rgba(0,0,0,0) 94%);
}
/* sparkles drift outward + rotate while the primary CTA is hovered
   (the hero's .sparkle hover vocabulary) */
.mm-bottomcta .bc-art-spark{ position:absolute; z-index:2; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.mm-bottomcta .bc-spark-a{ top:8%; right:10%; --bx:28px; --by:-34px; }
.mm-bottomcta .bc-spark-b{ top:30%; left:6%; --bx:-32px; --by:-24px; }
.mm-bottomcta .bc-spark-c{ bottom:10%; right:5%; --bx:32px; --by:26px; }
.mm-bottomcta:has(.mm-btn:hover) .bc-art-spark{ transform:translate(var(--bx), var(--by)) rotate(16deg) scale(1.08); }

/* staggered entrance — same vocabulary as the sections above */
@media (prefers-reduced-motion: no-preference){
  .mm-bottomcta .bc-reveal{ opacity:0; }
  .mm-bottomcta.is-in .bc-reveal{ opacity:1; animation:mmReveal .6s cubic-bezier(.2,.7,.3,1) both; }
  .mm-bottomcta.is-in .bd1{ animation-delay:.04s; }
  .mm-bottomcta.is-in .bd2{ animation-delay:.14s; }
  .mm-bottomcta.is-in .bd3{ animation-delay:.26s; }
  .mm-bottomcta.is-in .bd4{ animation-delay:.36s; }
}

@media (max-width:880px){
  .mm-bottomcta{ margin-top:72px; }
  .mm-bottomcta .bc-frame{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .mm-bottomcta .bc-cta-row{ flex-direction:column; align-items:stretch; }
  .mm-bottomcta .bc-primary{ align-items:stretch; }
  .mm-bottomcta .bc-primary .mm-btn{ justify-content:center; }
  .mm-bottomcta .bc-note{ text-align:center; }
  .mm-bottomcta .bc-ghost{ justify-content:center; }
}


/* ============================================================
   MOBILE REFINEMENTS (audit follow-up: P0 / P1 / P2)
   ============================================================ */
@media (max-width:900px){
  /* hero must stack — headline first, photo after */
  .mm-landing .hero{ grid-template-columns:1fr; gap:30px; }
  .mm-landing .hero .art{ order:0; }
  .mm-landing .stage{ transform:none; min-height:0; }
}

@media (max-width:560px){
  /* walkthrough caption + replay control larger / tappable */
  .wm-scene-cap{ font-size:13.5px; }
  .wm-scene-sub{ font-size:12px; }
  .wm-replay{ font-size:12px; padding:8px 12px; }
  /* audience strip a touch larger, allowed to wrap */
  .mm-landing .audience{ font-size:12.5px; gap:11px; flex-wrap:wrap; }
  /* pricing demo-fallback link bigger + tappable */
  .mm-pricing .mm-cta-sub{ font-size:14px; }
  .mm-pricing .mm-cta-sub a{ display:inline-block; padding:8px 4px; }
  /* footer link tap targets → ~44px (free vertical room, single column) */
  .foot-list{ gap:4px; }
  .foot-list a, .foot-list button{ padding:11px 0; }
}

@media (max-width:480px){
  .mm-landing .hero h1 { font-size: clamp(31px, 9vw, 40px); }
  .mm-landing .quote-card { max-width: none; }
}

/* ============================================================
   SUBPAGES (About, Resources, …) — same canvas, type system and
   surfaces as the landing. Pages wrap in .mm-landing.mm-subpage;
   .mm-landing supplies the ruled-paper cream canvas and focus
   styles, .mm-subpage supplies the design tokens the generic
   mm-* classes (eyebrow, buttons) resolve against.
   ============================================================ */
.mm-subpage{
  --navy:#003494; --navy-600:#002975; --ink:#00153d;
  --jasmine:#ffd37d; --jasmine-600:#ffce6e; --turquoise:#40e0d0; --coral:#ff8b7d;
  --muted:#5b6473;
  --display:'Solway',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
.mm-subpage main{ flex:1 0 auto; }
.mm-subpage .sub-frame{
  width:100%; max-width:1140px; margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(20px,5vw,48px) 0;
}
.mm-subpage .sub-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
/* About: keep the headline aligned to the body column width below it */
.mm-subpage .sub-head--about{ max-width:740px; margin:0 auto; }
.mm-subpage .sub-h1{
  font-family:var(--display); font-weight:700; color:var(--navy);
  font-size:clamp(28px,3.6vw,40px); line-height:1.2; letter-spacing:-.02em;
  margin:0; text-wrap:balance;
}
.mm-subpage .sub-lead{
  font-size:clamp(15.5px,1.2vw,17.5px); font-weight:500; line-height:1.5;
  color:var(--muted); margin:0; max-width:54ch;
}

/* ghost pill (mirrors the closing CTA's secondary button) for quiet
   navigation like "Back to main page" */
.mm-subpage .sub-back{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  background:#fff; color:var(--navy); font-weight:600; font-size:14.5px;
  padding:11px 20px; border-radius:999px; border:1.5px solid rgba(0,52,148,.22);
  text-decoration:none; box-shadow:0 8px 18px -12px rgba(0,52,148,.45);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mm-subpage .sub-back:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(0,52,148,.5); }

/* ---- About: founder letter ---- */
.mm-subpage .about-body{
  max-width:740px; margin:44px auto 0; display:flex; flex-direction:column; gap:22px;
  font-size:16.5px; line-height:1.6; font-weight:450; color:#3c455a;
}
.mm-subpage .about-intro{ display:flex; gap:40px; align-items:center; }
.mm-subpage .about-portrait{
  width:200px; height:200px; border-radius:50%; -o-object-fit:cover; object-fit:cover; flex:none;
  border:4px solid #fff; box-shadow:0 24px 56px -28px rgba(0,21,61,.38);
}
.mm-subpage .about-subhead{
  font-family:var(--display); font-weight:700; color:var(--navy);
  font-size:clamp(20px,2.1vw,24px); line-height:1.25; letter-spacing:-.01em;
  margin:18px 0 0;
}
.mm-subpage .about-sign{ font-family:var(--display); font-weight:700; color:var(--navy); margin-top:18px; }
.mm-subpage .about-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:14px; }
.mm-subpage .about-cta-note{ font-size:14px; font-weight:500; color:var(--muted); }
.mm-subpage .sub-foot{ text-align:center; margin-top:56px; }
@media (max-width:720px){
  .mm-subpage .about-intro{ flex-direction:column; gap:26px; }
}



/* ============================================================
   QUIZ LANDING (/quiz) — "Board Minutes Reality Check"
   Ported from the Claude Design handoff "Board Minutes Reality
   Check v4.dc.html". The page reuses the .mm-landing canvas
   (cream ruled paper, brand tokens) and the @keyframes mmReveal
   defined in landing.css. This file adds only:
     1. the section-reveal stagger classes (matches the landing
        page's reveal feel exactly), and
     2. the real :hover states (the design used a `style-hover`
        attribute that does not exist in plain CSS/React).
   ============================================================ */

/* ---- section reveal: same recipe as the landing sections ----
   Each section's frame gets `.is-in` from useSectionReveal once it
   scrolls into view; its `.q-reveal` children then rise + fade in,
   staggered by the .qdN delay classes. Skipped under reduced motion,
   where content is simply shown. */
@media (prefers-reduced-motion: no-preference) {
  /* Transition-based entrance (same mechanism as the hero's .reveal), with the
     mmRevealSafety no-JS/hydration-failure net trailing it. `.is-in` CANCELS
     the safety animation (animation: none): a forwards fill would otherwise
     (a) fight the entrance when a below-fold section scrolls in after ~3.2s
     (visible content would blink hidden and replay), and (b) pin transform on
     elements that are both .q-reveal and .q-btn, killing their hover lift. */
  .mm-landing .q-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
    animation: mmRevealSafety .6s ease 2.6s forwards;
  }
  .mm-landing .q-frame.is-in .q-reveal { opacity: 1; transform: none; animation: none; }
  /* Stagger delays match the canonical landing-page rhythm (landing.css .d1–.d6). */
  .mm-landing .q-frame.is-in .qd1 { transition-delay: .04s; }
  .mm-landing .q-frame.is-in .qd2 { transition-delay: .14s; }
  .mm-landing .q-frame.is-in .qd3 { transition-delay: .30s; }
  .mm-landing .q-frame.is-in .qd4 { transition-delay: .40s; }
  .mm-landing .q-frame.is-in .qd5 { transition-delay: .50s; }
  .mm-landing .q-frame.is-in .qd6 { transition-delay: .62s; }
}

/* ---- hover states (were `style-hover` in the design) ----
   Base styles + transition come from the inline styles on each
   element; these rules only supply the :hover target. */
.mm-landing .q-btn:hover { background: #002975; transform: translateY(-2px); }
/* Ghost/secondary action button (e.g. "Share on LinkedIn") — mirrors the
   landing's .mmfounder-cta: the navy border firms up on hover. */
.mm-landing .q-btn-ghost:hover { border-color: #003494; box-shadow: 0 14px 26px -12px rgba(0, 52, 148, .5); transform: translateY(-2px); }
.mm-landing .q-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -26px rgba(0, 21, 61, .44); }

/* ---- footer links: same hover treatment as the landing navbar
   (.nav-wrap .nav-links a) — a jasmine underline that scales in while the
   text darkens. This also reskins <PrivacyChoices>'s `.foot-privacy-choices`
   button, which is styled for the dark navy site footer (#aebcdf → #fff) and
   would be low-contrast / invisible-on-hover against this light footer. */
.mm-landing .q-foot { display: flex; gap: 18px; align-items: center; }
.mm-landing .q-foot a,
.mm-landing .q-foot button {
  position: relative;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
  color: #434c5c; text-decoration: none; white-space: nowrap;
  transition: color .15s ease;
}
.mm-landing .q-foot a::after,
.mm-landing .q-foot button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: 2px; background: #ffd37d;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.mm-landing .q-foot a:hover,
.mm-landing .q-foot button:hover { color: #00153d; }
.mm-landing .q-foot a:hover::after,
.mm-landing .q-foot button:hover::after { transform: scaleX(1); }


/* ============================================================
   ASTRO INTEGRATION OVERRIDES
   The site's <html> already paints the cream ruled-paper canvas
   (see global.css), so the ported .mm-landing wrapper must NOT
   repaint it — a second ruled-line layer would misalign with the
   global 40px grid and read as doubled lines.
   ============================================================ */
.mm-landing { background: transparent; }