/* Maeve Media typeface 2026 - Switzer  (v3 - the one that actually works)
   Fontshare / Indian Type Foundry, free for commercial use.
   Rachel, 2026-08-20, Option D of four directions.

   WHY THIS IS NOT AN @font-face OVERRIDE - v1 and v2 both tried that and both failed:

   Re-declaring @font-face for 'Mona Sans' / 'Inter' to point at Switzer files does NOT
   work on this site. Verified in the browser: all 24 rules parsed, the sheet was last in
   document order, and Mona Sans still rendered at its own metrics with zero Switzer files
   fetched. The reason is that Webflow declares those families at EXACT weights while
   Google Fonts declares the same names as VARIABLE faces with ranges. Our declarations
   had different descriptors again, so the browser treated them as ADDITIONAL faces in the
   family rather than replacements, and font matching kept choosing the pre-existing face.
   Document order only breaks ties between otherwise-equal candidates; it does not let a
   differently-described face displace one.

   So this assigns font-family DIRECTLY. Icon fonts are excluded explicitly.

   The hero needs (0,4,3) specificity: the page-level custom code carries
   'body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in--hollow'
   at (0,4,2) !important, and home-refresh.js adds (0,3,0) !important on top.

   Verify after any change with:
     performance.getEntriesByType('resource').filter(r=>/woff2/.test(r.name))
   If MonaSans-*.woff2 still appears, the swap is not live. */

/* ---------- the faces ---------- */
@font-face{font-family:'Switzer';src:url('https://cdn.prod.website-files.com/69e4b9486df622df6c372d08/6a86a85a94bc114e0644ae1e_Switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Italic declared as RANGES covering 1-1000. Every recurring 'wrong font' report this
   session traced to the same cause: an element asked for italic at a weight with no
   hosted italic file (900 on the card labels, 800 on the shop overline), so the browser
   abandoned Switzer and fell back to a serif. Ranges make that impossible. */
@font-face{font-family:'Switzer';src:url('https://cdn.prod.website-files.com/69e4b9486df622df6c372d08/6a86aff4855410273c5ab4f8_Switzer-300-italic.woff2') format('woff2');font-weight:1 350;font-style:italic;font-display:swap}
@font-face{font-family:'Switzer';src:url('https://cdn.prod.website-files.com/69e4b9486df622df6c372d08/6a86a9b203fc873f75163ed5_Switzer-400-italic.woff2') format('woff2');font-weight:351 450;font-style:italic;font-display:swap}
@font-face{font-family:'Switzer';src:url('https://cdn.prod.website-files.com/69e4b9486df622df6c372d08/6a86b79ed15cfea13e9b42b6_Switzer-700-italic.woff2') format('woff2');font-weight:451 1000;font-style:italic;font-display:swap}
@font-face{font-family:'Switzer';src:url('https://cdn.prod.website-files.com/69e4b9486df622df6c372d08/6a86a85ad513e9e3d776ec09_Switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('https://cdn.prod.website-files.com/69e4b9486df622df6c372d08/6a86a85a76d95e287ecbfdb1_Switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- everything is Switzer, except icon fonts ---------- */
html body,
html body :not([class*="w-icon"]):not([class*="fa-"]){
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
  font-stretch:normal !important;
  font-variation-settings:normal !important;
}
html body [class*="w-icon"]{font-family:webflow-icons !important}

/* ---------- hero. (0,4,3) to beat the page-level and home-refresh rules ---------- */
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in,
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in--hollow,
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in--accent{
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
  font-weight:700 !important;
  font-stretch:normal !important;
  font-variation-settings:normal !important;
  text-transform:none !important;
  letter-spacing:-.028em !important;
  -webkit-text-stroke:0 !important;
}

/* Tighter leading on the hero, Rachel 2026-08-20.
   .84 not .78: the hero lines animate with overflow:hidden on .mm-hero__line, so a
   descender (the g in "self-running") gets clipped by the mask when leading is too
   tight. The padding-bottom / negative margin-bottom pair grows the clip box without
   changing the visual spacing between lines - that is what actually stops the clip;
   the leading change alone is not enough. */
html body section.mm-hero .mm-hero__title,
html body section.mm-hero .mm-hero__title .mm-hero__line,
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in{
  line-height:.84 !important;
}
html body section.mm-hero .mm-hero__title .mm-hero__line{
  margin-top:0 !important;
  padding-bottom:.16em !important;
  margin-bottom:-.16em !important;
}

/* ---------- headings sentence case. Labels, eyebrows, tags, buttons and the
             section numbers are deliberately absent and stay uppercase. ---------- */
body .mm-story__title,body .mm-prod__title,body .mm-prod__name,
body .mm-auto__title,body .mm-auto__h,body .mm-dl__title,body .mm-dl__h,
body .mm-dl__form-h,body .mm-proof__title,body .mm-cta__title,body .mm-cta__title-1,
body .mm-ft__h,body .mm-shop-hero__title,body .mm-cat__h,body .mm-mem__title,
body .mm-faq__title,body .mm-about-hero__title,body .mm-about-hero__title-1,
body .mm-pivot__title,body .mm-pill__title,body .mm-tl__title,body .mm-dl-hero__title,
body .mm-res__h,body .mm-nl__title,body .mm-contact-hero__title,body .mm-form__h,
body .mm-info__h,body .mm-legal-hero__title,body .mm-legal__h,body .mm-vai-hero__title,
body .mm-why__title,body .mm-vai-grid__title,body .mm-how__title,body .mm-tools__title,
body .mm-svc__h,body .mm-how__h,body .mm-vs__h,body .mm-fc__title,body .mm-fc__back-h,
body .mm-mem-strip__h,body .mm-vid__h,body .mm-how__step h3,body .mm-vs__col h3,
body .mm-mem-strip__inner h2,body .mm-mem-strip__inner h3,
body .mml-h2,body .mms-h2,body .mmb-h1,body .hero-h,body .sec-title,body .r-title,
body .rc-h1,body .rc-h2,body .rc-h1serif,body .rc-h2serif,body .rc-card-h3,body .rc-step-h4,
body .mm-h,body .mm-ppx__h,body .mm-ppx__h em,body .mms-h2 em,body .mml-h2 em{
  text-transform:none !important;
  letter-spacing:-.028em !important;
}

/* ---------- hero heading is ALL WHITE. Rachel 2026-08-20, superseding the acid
             green accent word. Contrast now comes from WEIGHT and ITALIC alone
             (400 italic against 700 roman), not colour. ---------- */
html body section.mm-hero .mm-hero__title,
html body section.mm-hero .mm-hero__title .mm-hero__line,
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in,
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in--hollow,
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in--accent,
html body section.mm-hero .mm-hero__title em{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}

/* ---------- italic accent words: LIGHT (300), for contrast against the 700
             around them. Rachel 2026-08-20 - "make the italic accent words in
             headings a thinner weight". This is Switzer's real Light Italic cut,
             not a synthesised light, so the strokes stay properly drawn. ---------- */
html body section.mm-hero .mm-hero__title .mm-hero__line .mm-hero__line-in--accent,
html body h1 em,html body h2 em,html body h3 em,
html body [class*="__title"] em,html body [class*="__h2"] em,
html body .mm-hero__word--tan,html body .mm-hero__word--tan em,
/* the per-section accent classes - these carry the acid green words and were
   still landing at weight 800/900, which is why they read heavier than the hero */
html body .mml-accent,html body .mmb-accent,html body .mms-accent,
html body .mm-vid__h em,html body .mm-ppx__h em,
html body [class$="-accent"],html body [class*="__accent"]{
  font-weight:300 !important;
  font-style:italic !important;
  font-stretch:normal !important;
  font-variation-settings:normal !important;
  letter-spacing:-.02em !important;
}

/* ---------- hero lede: match the overline's measure. Rachel 2026-08-20.
   The paragraph was never the constraint - .mm-hero__bottom carries a
   max-width of ~435px while the eyebrow sits in .mm-hero__chrome at ~1267px,
   which is why the lede ran to eight lines. Raising the paragraph's own
   max-width alone changed nothing; the container had to be released first.
   556px is the MEASURED rendered width of the overline text at desktop. The
   overline element is a flex row that spans the full 1267px chrome, so matching
   its container width made the paragraph look wider than the overline rather
   than equal to it - the text is what reads as the width, not the box.
   This also leaves ~711px clear on the right of the hero for the quiz box.
   If the overline copy changes, re-measure and update this number. ---------- */
html body section.mm-hero .mm-hero__bottom,
html body section.mm-hero .mm-hero__lede,
html body section.mm-hero .mm-hero__title{
  max-width:min(556px,100%) !important;
}

/* ============================================================
   HOMEPAGE SECTION RESTYLE - Rachel 2026-08-20
   "I like the fonts and colouring of this section - apply this to the
   scrolling marquee banner and the section underneath for service levels."
   Reference is the light treatment from the type mock: light grey ground,
   near-black type, white cards, lime used once as a band.

   Every child class of .mml-sec is recoloured below. That is deliberate and
   not defensive padding: the section ships as cream-on-near-black, so flipping
   only the background would leave cream text on a light ground and make the
   whole block unreadable. If new children are added to this section later,
   they need adding here too.
   ============================================================ */

/* ---- kill the interactive node canvas in the hero ---- */
html body canvas.mm-nodes{display:none !important}

/* ---- marquee: invert to a lime band with near-black type ---- */
html body .mm-marq{background:#D2FF02 !important}
html body .mm-marq__track,
html body .mm-marq__item{color:#0A0A0A !important}
html body .mm-marq__sep{color:rgba(10,10,10,.45) !important}

/* ---- service levels: dark -> light ---- */
html body .mml-sec{background:#E8E9EB !important}
html body .mml-wrap,
html body .mml-over,
html body .mml-grid{color:#0A0A0A !important}

/* .mml-onum is reused on the DARK Sarah section too, so the white treatment is
   scoped to the light section only. Rachel: "white number box in this section
   would be better grey". */
html body .mml-sec .mml-onum{
  background:#fff !important;color:#0A0A0A !important;border-color:#DCDEE0 !important;
}
html body .mms-sec .mml-onum,
html body .mmb-wrapsec .mml-onum{
  background:#2A2C30 !important;color:#F2F2EE !important;border-color:#3A3D42 !important;
}
html body .mml-oslash,
html body .mml-olbl{color:#6E7480 !important}

html body .mml-h2{color:#0A0A0A !important}
/* the italic accent stays black here - lime on a light ground is unreadable.
   Contrast comes from the 300 italic against the surrounding weight. */
html body .mml-accent{color:#0A0A0A !important}
html body .mml-sub{color:#3A3E42 !important}

html body .mml-rung{
  background:#fff !important;
  border-color:#DCDEE0 !important;
  color:#0A0A0A !important;
}
html body .mml-rung.mml-rung-lead{
  background:#fff !important;
  border-color:#D2FF02 !important;
  border-width:1.5px !important;
}
html body .mml-ricon{color:#6E7480 !important}
html body .mml-rname{color:#0A0A0A !important}
html body .mml-rtag{color:#6E7480 !important}
html body .mml-rtag.mml-rtag-lime{color:#0A0A0A !important}
html body .mml-rdesc{color:#3A3E42 !important}
html body .mml-rprice{
  color:#0A0A0A !important;
  border-top-color:#DCDEE0 !important;
}
html body .mml-rlink,
html body .mml-rlink.mml-rlink-lime{color:#0A0A0A !important}

/* ============================================================
   CARD + MARQUEE TYPE FIX - Rachel 2026-08-20
   "the scrolling marquee and the cards ... arent the right fonts"

   Measured with a Range around the text node (NOT getBoundingClientRect on the
   element - .mml-rtag is a block div, so its box width is the card width and
   tells you nothing about the glyphs):
     marquee italic  264px painted vs 263px predicted for Switzer  -> was fine
     .mml-rtag       244px painted vs 201px predicted for Switzer  -> NOT Switzer
     .mml-rname      111px painted vs  96px predicted for Switzer  -> NOT Switzer

   Cause: those labels request 900 ITALIC. Switzer italic is hosted at 300 and
   400 only, so the browser abandoned the family and fell back to a serif.
   Rather than upload two more italic cuts for labels that are not italic in the
   agreed design, they are set to real weights that exist, in roman.
   ============================================================ */
html body .mml-rname{
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
  font-style:normal !important;
  font-weight:700 !important;
}
html body .mml-rtag,
html body .mml-rtag.mml-rtag-lime{
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
  font-style:normal !important;
  font-weight:500 !important;
}
/* Marquee. The italic accent words ("AUSTRALIAN", "BACK") were rendering as a SERIF -
   confirmed visually at full resolution, after a canvas measureText comparison gave a
   false match (canvas falls back the same way the DOM does, so it agreed with itself).
   Cause was the 800-italic request with no hosted italic face. The italic is kept as a
   brand motif; the ranged @font-face above now resolves it to real Switzer 700 italic. */
html body .mm-marq__item,
html body .mm-marq__track{
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
  font-style:normal !important;
  font-weight:700 !important;
}
html body .mm-marq__item em{
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
  font-style:italic !important;
  font-weight:700 !important;
}

/* ============================================================
   HERO QUIZ BOX - Rachel 2026-08-20. Sits in the ~711px reserved
   to the right of the 556px content column. Markup and behaviour
   are injected by site-fixes-2026 (homepage only).
   ============================================================ */
html body section.mm-hero .mm-hero__chrome{position:relative}
/* top:96px is the measured offset of .mm-hero__title from .mm-hero__chrome, so the
   quiz box lines up with the heading rather than the eyebrow above it.
   Rachel 2026-08-20. */
.mm-quiz{
  position:absolute; top:96px; right:0; width:min(400px,42%);
  background:#fff; color:#111315; border-radius:20px;
  padding:26px 24px 22px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.65);
  font-family:'Switzer',-apple-system,'Helvetica Neue',Arial,sans-serif;
  z-index:6;
}
@media(max-width:1100px){
  .mm-quiz{position:static;width:100%;max-width:520px;margin:36px 0 0}
}
.mm-quiz__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mm-quiz__dots{display:flex;gap:5px}
.mm-quiz__dots i{width:22px;height:3px;border-radius:2px;background:#E4E6E8;transition:background .3s}
.mm-quiz__dots i.on{background:#D2FF02}
.mm-quiz__step{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#71767C;font-weight:500}
.mm-quiz h3{
  font-size:clamp(20px,2vw,25px);line-height:1.08;letter-spacing:-.028em;
  margin:18px 0 0;font-weight:700;color:#111315;text-wrap:balance;
}
.mm-quiz__sub{font-size:14px;color:#71767C;margin:9px 0 0;line-height:1.5}
.mm-quiz__opts{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.mm-quiz__opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;cursor:pointer;font-family:inherit;font-size:14.5px;color:#111315;
  background:#F0F1F2;border:1px solid transparent;padding:13px 15px;border-radius:10px;
  transition:background .18s,border-color .18s,transform .18s;
}
.mm-quiz__opt:hover{background:#E4E6E8;border-color:#DCDEE0;transform:translateX(2px)}
.mm-quiz__opt:focus-visible{outline:2px solid #D2FF02;outline-offset:3px}
.mm-quiz__arw{font-size:13px;color:#71767C}
.mm-quiz__foot{margin-top:16px;padding-top:14px;border-top:1px solid #DCDEE0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mm-quiz__back{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#71767C;background:none;border:0;cursor:pointer;padding:4px 0;font-family:inherit}
.mm-quiz__back[hidden]{visibility:hidden}
.mm-quiz__note{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#71767C}
.mm-quiz__field{width:100%;font-family:inherit;font-size:15px;color:#111315;background:#F0F1F2;border:1px solid #DCDEE0;padding:13px 15px;border-radius:10px}
.mm-quiz__field:focus{outline:2px solid #D2FF02;outline-offset:1px}
.mm-quiz__go{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;
  font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:14px 20px;border-radius:999px;background:#D2FF02;color:#111315;
  border:1px solid #D2FF02;cursor:pointer;text-decoration:none;
}
.mm-quiz__kicker{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#71767C;margin-top:4px}
.mm-quiz__name{font-size:clamp(22px,2.4vw,28px);line-height:1.04;letter-spacing:-.028em;font-weight:700;margin:6px 0 0}
.mm-quiz__price{font-size:12px;color:#71767C;margin-top:8px}

/* ---------- number chips on the dark sections get a white outline.
   Rachel 2026-08-20: "number box needs white outline here".

   display:inline-block matters. .mm-prod__num ships as display:block inside a
   280px flex card and measured 214px wide, so the first version of this rule
   drew one long pill across the whole card header instead of a box around the
   digits. flex:0 0 auto + align-self stop the flex parent stretching it back. */
html body .mm-prod .mm-story__num,
html body .mm-prod .mm-prod__num,
html body .mm-auto .mm-story__num,
html body .mm-proof .mm-story__num{
  display:inline-block !important;
  width:auto !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:4px !important;
  padding:3px 8px !important;
  line-height:1.1 !important;
}

/* The middle card is lime, and the number was lime on lime - invisible.
   Rachel 2026-08-20: "make the number visible on middle acid green card". */
html body .mm-prod .mm-prod__card--lime .mm-prod__num{
  color:#0A0A0A !important;
  border-color:rgba(10,10,10,.85) !important;
}

/* ---------- membership strip accent was still ALL CAPS while everything
             around it is sentence case. Rachel 2026-08-20. ---------- */
html body .mm-mem-strip__h,
html body .mm-mem-strip__h em,
html body .mm-mem__title,
html body .mm-mem__title em{
  text-transform:none !important;
}

/* ---------- light sections: the kicker was cream on cream.
   Rachel 2026-08-20 reported it as "can't see number on this section" - the number
   chip is fine (lime on a black chip), it is the LABEL beside it that vanished.
   .mm-prod__kicker is cream #F5F3EB and .mm-dl's background is also #F5F3EB. ---------- */
html body .mm-dl .mm-prod__kicker,
html body .mm-dl .mm-story__sep,
html body .mm-dl .mm-dl__kicker{
  color:#55524A !important;
}
html body .mm-dl .mm-story__num.mm-dl__num-chip{
  background:#0A0A0A !important;
  color:#D2FF02 !important;
}

/* ---------- acid green glow behind the black hero. Rachel 2026-08-20.
   The hero has position:relative and no existing ::before/::after (checked),
   so a pseudo-element is safe. pointer-events:none keeps the quiz box and
   buttons clickable through it; the chrome is lifted to z-index 1 so the
   glow sits behind the copy. ---------- */
html body section.mm-hero{position:relative}
html body section.mm-hero::before{
  content:'';
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:radial-gradient(48% 46% at 68% 38%,
              rgba(210,255,2,.16), rgba(210,255,2,.05) 45%, transparent 72%);
}
html body section.mm-hero .mm-hero__chrome{position:relative; z-index:1}

/* ---------- marquee height down ~30%. Rachel 2026-08-20.
   Measured 68px tall with 28px padding top and bottom. Trimming padding to 18px
   lands it at ~48px. Cutting padding by a flat 30% only gave 19% off the height,
   because the text line box is a fixed part of it and does not scale. ---------- */
html body .mm-marq{
  padding-top:18px !important;
  padding-bottom:18px !important;
}

/* ============================================================
   EFI BEFORE/AFTER SECTION - Rachel 2026-08-20/21
   Sits directly after the hero as section 01; the service levels
   block moves to 02. Markup + behaviour are injected by
   site-fixes-2026 (homepage only).

   The section number element carries .mm-story__num ON PURPOSE:
   the MaeveHomeFixes script renumbers .mml-onum / .mmb-badge /
   .mm-story__num sequentially at load and again at intervals, and
   it always wins that race. Hardcoding "01" here would be
   overwritten. Let it assign the number.
   ============================================================ */
.mm-ba-sec{background:#0A0A0A;color:#F2F2EE;padding:clamp(46px,7vw,92px) 0;position:relative;z-index:2}
.mm-ba-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.mm-ba-sec h2{font-size:clamp(30px,5vw,56px);font-weight:700;letter-spacing:-.028em;
  line-height:.98;margin:18px 0 0;max-width:20ch;color:#F2F2EE}
.mm-ba-sec h2 em{font-style:italic;font-weight:300}
.mm-ba-lede{font-size:clamp(16px,1.6vw,18.5px);color:#9BA1AC;max-width:64ch;margin:18px 0 0}
.mm-ba-cap{margin-top:12px;font-size:12.5px;color:#6E7480;max-width:78ch}

.mm-ba{margin-top:clamp(28px,4vw,42px);position:relative;border-radius:14px;overflow:hidden;
  border:1px solid #26292F;background:#000;user-select:none;touch-action:none;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.mm-ba img{display:block;width:100%;height:auto}
.mm-ba__after{position:absolute;inset:0}
.mm-ba__after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 0 0 var(--pos,50%))}
.mm-ba__lbl{position:absolute;top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:7px 12px;border-radius:999px;z-index:3}
.mm-ba__lbl--b{left:14px;background:rgba(10,10,10,.75);color:#fff}
.mm-ba__lbl--a{right:14px;background:#D2FF02;color:#0A0A0A}
.mm-ba__line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#D2FF02;
  transform:translateX(-1px);pointer-events:none;z-index:4}
.mm-ba__knob{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#D2FF02;color:#0A0A0A;display:flex;
  align-items:center;justify-content:center;font-size:16px;font-weight:700;z-index:5;
  box-shadow:0 8px 26px rgba(0,0,0,.55);pointer-events:none}
.mm-ba__grab{position:absolute;inset:0;cursor:ew-resize;z-index:6}
.mm-ba__grab:focus-visible{outline:3px solid #D2FF02;outline-offset:-3px}

.mm-tour-head{margin-top:clamp(48px,6vw,86px);display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid #26292F}
.mm-tour-head h3{margin:0;font-size:clamp(21px,2.6vw,30px);font-weight:700;letter-spacing:-.024em;line-height:1.06}
.mm-tour-head h3 em{font-style:italic;font-weight:300}
.mm-tour{margin-top:clamp(22px,3vw,32px);display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(18px,3vw,38px);align-items:start}
@media(max-width:900px){.mm-tour{grid-template-columns:1fr}}
.mm-frame{border-radius:14px;overflow:hidden;border:1px solid #26292F;background:#000;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.mm-frame__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#17191D;border-bottom:1px solid #26292F}
.mm-frame__bar i{width:10px;height:10px;border-radius:50%;background:#33373D;display:block}
.mm-frame__addr{margin-left:8px;font-size:11px;color:#6E7480}
.mm-view{position:relative;height:clamp(340px,50vh,540px);overflow:hidden}
.mm-view img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;will-change:transform}
.mm-view::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.55),transparent)}
.mm-scrubwrap{padding:12px 14px;background:#17191D;border-top:1px solid #26292F;display:flex;align-items:center;gap:12px}
.mm-scrub{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;background:#33373D;outline:none}
.mm-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#D2FF02;cursor:pointer;border:none}
.mm-scrub::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#D2FF02;cursor:pointer;border:none}
.mm-scrubwrap button{background:none;border:1px solid #26292F;color:#9BA1AC;font-family:inherit;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;cursor:pointer}
.mm-stops{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.mm-stops li{border:1px solid #26292F;border-radius:11px;padding:14px 16px;background:#141518;cursor:pointer;
  transition:border-color .2s,background .2s}
.mm-stops li[aria-current="true"]{border-color:#D2FF02;background:#16180F}
.mm-stops .n{font-size:10px;letter-spacing:.2em;color:#D2FF02;font-weight:500}
.mm-stops h4{margin:6px 0 0;font-size:15px;font-weight:700;letter-spacing:-.012em}
.mm-stops p{margin:5px 0 0;font-size:13.5px;color:#9BA1AC;line-height:1.45}

.mm-gains{margin-top:clamp(40px,5vw,68px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:940px){.mm-gains{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mm-gains{grid-template-columns:1fr}}
.mm-gain{border:1px solid #26292F;border-radius:12px;padding:20px;background:#141518}
.mm-gain .n{font-size:10.5px;letter-spacing:.2em;color:#D2FF02;font-weight:500}
.mm-gain h4{margin:11px 0 0;font-size:16.5px;font-weight:700;letter-spacing:-.012em;line-height:1.22}
.mm-gain p{margin:8px 0 0;font-size:14.5px;color:#9BA1AC;line-height:1.5}
.mm-ba-cta{margin-top:clamp(30px,4vw,48px);display:flex;flex-wrap:wrap;gap:12px}

/* ---------- card glow. Rachel 2026-08-21: "add some more interest to the cards
   like a soft acid green glow for engagement". Rest state carries a faint lime
   halo so the cards read as alive; hover lifts and warms it. Transitions are
   disabled under prefers-reduced-motion rather than just shortened. ---------- */
html body .mm-gain,
html body .mm-stops li,
html body .mml-rung,
html body .mm-prod__card{
  transition:box-shadow .3s cubic-bezier(.22,1,.36,1),
             border-color .3s cubic-bezier(.22,1,.36,1),
             transform .3s cubic-bezier(.22,1,.36,1) !important;
  box-shadow:0 0 0 0 rgba(210,255,2,0), 0 10px 30px -18px rgba(0,0,0,.6);
}
html body .mm-gain:hover,
html body .mm-stops li:hover,
html body .mm-prod__card:hover{
  border-color:rgba(210,255,2,.5) !important;
  box-shadow:0 0 34px -6px rgba(210,255,2,.22), 0 18px 44px -22px rgba(0,0,0,.75) !important;
  transform:translateY(-3px) !important;
}
/* the light service-levels cards need a softer halo - a lime glow on white
   goes muddy at the strength that works on near-black */
html body .mml-rung:hover{
  border-color:rgba(160,200,0,.55) !important;
  box-shadow:0 0 26px -8px rgba(160,200,0,.30), 0 16px 40px -24px rgba(0,0,0,.22) !important;
  transform:translateY(-3px) !important;
}
html body .mm-stops li[aria-current="true"]{
  box-shadow:0 0 30px -8px rgba(210,255,2,.28) !important;
}
@media(prefers-reduced-motion:reduce){
  html body .mm-gain,html body .mm-stops li,html body .mml-rung,html body .mm-prod__card{
    transition:none !important;
  }
  html body .mm-gain:hover,html body .mm-stops li:hover,
  html body .mml-rung:hover,html body .mm-prod__card:hover{transform:none !important}
}

/* ---------- Six separate cards read as a wall of boxes. Rachel 2026-08-21:
   "convert this section into a before and after - it is too many boxes".
   Same six points, now as paired rows so the contrast does the work instead
   of six equal-weight tiles competing with each other. ---------- */
.mm-vs{margin-top:clamp(38px,5vw,64px);border:1px solid #26292F;border-radius:14px;overflow:hidden}
.mm-vs__head{display:grid;grid-template-columns:1fr 1fr;background:#141518;border-bottom:1px solid #26292F}
.mm-vs__head div{padding:15px 20px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:#6E7480}
.mm-vs__head div:last-child{color:#0A0A0A;background:#D2FF02}
.mm-vs__row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #26292F}
.mm-vs__row:last-child{border-bottom:none}
.mm-vs__cell{padding:17px 20px;display:grid;grid-template-columns:18px 1fr;gap:11px;
  font-size:14.5px;line-height:1.5}
.mm-vs__cell i{font-style:normal;font-weight:700;line-height:1.35}
.mm-vs__cell--b{color:#6E7480;background:#0E0F11}
.mm-vs__cell--b i{color:#8A3A32}
.mm-vs__cell--a{color:#F2F2EE;background:#121409}
.mm-vs__cell--a i{color:#D2FF02}
.mm-vs__k{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#6E7480;margin-bottom:5px}
@media(max-width:760px){
  .mm-vs__head{display:none}
  .mm-vs__row{grid-template-columns:1fr}
  .mm-vs__cell--b::before{content:'Brochure site';display:block;grid-column:1/-1;font-size:10px;
    letter-spacing:.18em;text-transform:uppercase;color:#6E7480;margin-bottom:6px}
  .mm-vs__cell--a::before{content:'AI-enabled site';display:block;grid-column:1/-1;font-size:10px;
    letter-spacing:.18em;text-transform:uppercase;color:#D2FF02;margin-bottom:6px}
}

/* ============================================================
   MARQUEE - half height, lowercase. Rachel 2026-08-21.
   Measured 72px rendered (a 90px box at the zoom:.8 home-refresh applies)
   with a 52.9px type size. Halving it needs the TYPE to come down, not the
   padding: at the previous 18px padding the line box was still 54 of those
   90px, so padding alone tops out around a 20% cut. 26px type with 8px
   padding lands the box near 42px, ~34px rendered.
   The source markup is already lowercase - the capitals were a
   text-transform, so removing it is the whole job.
   ============================================================ */
html body .mm-marq{
  padding-top:8px !important;
  padding-bottom:8px !important;
}
html body .mm-marq__item,
html body .mm-marq__item em,
html body .mm-marq__sep,
html body .mm-marq__track{
  font-size:clamp(17px,2.05vw,26px) !important;
  text-transform:none !important;
  letter-spacing:-.012em !important;
}

/* ============================================================
   SECTION 01 - WEBSITE BUILDS, "the stack". Rachel 2026-08-21.
   Markup is injected by site-fixes-2026 on the homepage only, immediately
   before #how-it-gets-done - which therefore becomes 02.

   The number chip carries .mml-onum ON PURPOSE. MaeveHomeFixes renumbers
   .mml-onum / .mmb-badge / .mm-story__num in document order, on DOMContentLoaded,
   on load and on a six-step timer, and it always wins - so a hardcoded 01 would
   be overwritten within 400ms. Wearing the class instead means this chip is simply
   first in document order, and every chip after it shifts down by one for free.

   Ground is paper, not black. This sits between a lime marquee and a now-black
   section 02, and three dark bands running together kills the rhythm. Moving the
   concept from dark to paper was not an inversion: on #0A0A0A the planes read by
   being LIGHTER than the ground, so flipping the colours alone would have left
   five near-white cards with nothing separating them. Instead the base plate keeps
   the near-black - it is "your website", the thing everything else sits on, so it
   earns the visual weight - and the layers above are paper-white, separated by
   shadow rather than by fill. Lime behaves differently here too: #D2FF02 on white
   is far too low-contrast to glow, so the accent is a solid edge and a deeper
   olive shadow instead.
   ============================================================ */
html body #website-builds{
  background:#EFEEE9 !important;
  color:#14161A !important;
  padding:clamp(56px,7vw,96px) 0 !important;
  overflow:hidden !important;
}
html body #website-builds .mwb-wrap{
  width:min(1200px,calc(100% - 48px));
  margin:0 auto;
}
html body #website-builds .mwb-over{display:flex;align-items:center;gap:14px;margin-bottom:20px}
html body #website-builds .mml-onum{
  background:#14161A !important;border-color:#14161A !important;color:#F2F2EE !important;
}
html body #website-builds .mwb-oslash{color:#7E8C00 !important;font-weight:700}
html body #website-builds .mwb-olbl{
  color:#4A4F55 !important;font-size:14px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
}
html body #website-builds .mwb-h2{
  color:#14161A !important;
  font-size:clamp(30px,4.6vw,52px) !important;
  font-weight:700 !important;letter-spacing:-.028em !important;line-height:.99 !important;
  margin:0 !important;max-width:19ch;
}
html body #website-builds .mwb-accent{
  display:block;font-style:italic !important;font-weight:300 !important;color:#14161A !important;
}
html body #website-builds .mwb-sub{
  color:#4A4F55 !important;max-width:58ch;margin:18px 0 0 !important;
  font-size:clamp(15.5px,1.5vw,17.5px) !important;line-height:1.5 !important;
}

/* the stage: stack on the left, cards on the right */
html body #website-builds .mwb-stage{
  margin-top:clamp(40px,6vw,72px);
  display:grid;grid-template-columns:1fr 420px;
  gap:clamp(24px,4vw,56px);align-items:center;
}
@media(max-width:980px){
  html body #website-builds .mwb-stage{grid-template-columns:1fr}
}
html body #website-builds .mwb-planes{position:relative;height:440px;perspective:1400px}
html body #website-builds .mwb-plane{
  position:absolute;left:50%;top:50%;width:min(430px,84%);height:210px;
  transform-style:preserve-3d;border-radius:12px;
  border:1px solid #CFCEC6;background:#FCFCFA;
  box-shadow:0 18px 40px -22px rgba(20,22,26,.45);
  transition:transform .55s cubic-bezier(.22,1,.36,1),
             border-color .35s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px 18px;cursor:pointer;
}
html body #website-builds .mwb-pl{font-size:12.5px;letter-spacing:.02em;color:#4A4F55}
html body #website-builds .mwb-pn{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.16em;color:#8C9098;
}
/* the base plate is the website itself - it carries the weight */
html body #website-builds .mwb-plane[data-i="0"]{
  background:#14161A;border-color:#14161A;
  box-shadow:0 26px 56px -24px rgba(20,22,26,.7);
}
html body #website-builds .mwb-plane[data-i="0"] .mwb-pl{color:#F2F2EE}
html body #website-builds .mwb-plane[data-i="0"] .mwb-pn{color:#D2FF02}
html body #website-builds .mwb-plane.on{
  border-color:#B9D400;
  box-shadow:0 0 0 2px #D2FF02 inset, 0 22px 46px -20px rgba(120,150,0,.5);
}
html body #website-builds .mwb-plane.on .mwb-pl{color:#14161A}
html body #website-builds .mwb-plane[data-i="0"].on .mwb-pl{color:#fff}

html body #website-builds .mwb-legend{display:flex;flex-direction:column;gap:8px}
html body #website-builds .mwb-leg{
  border:1px solid #CFCEC6;border-radius:11px;padding:15px 17px;background:#FCFCFA;
  cursor:pointer;
  transition:border-color .25s cubic-bezier(.22,1,.36,1),
             background .25s cubic-bezier(.22,1,.36,1),
             box-shadow .25s cubic-bezier(.22,1,.36,1);
}
html body #website-builds .mwb-leg:hover{box-shadow:0 10px 26px -18px rgba(20,22,26,.4)}
html body #website-builds .mwb-leg[aria-current="true"]{
  border-color:#B9D400;background:#F7FBE4;
  box-shadow:0 0 0 1px #B9D400, 0 12px 30px -20px rgba(120,150,0,.45);
}
html body #website-builds .mwb-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.16em;color:#7E8C00;
}
html body #website-builds .mwb-leg h3{
  margin:7px 0 0 !important;font-size:15.5px !important;font-weight:700 !important;
  letter-spacing:-.012em !important;color:#14161A !important;line-height:1.25 !important;
}
html body #website-builds .mwb-leg p{
  margin:5px 0 0 !important;font-size:13.5px !important;color:#4A4F55 !important;line-height:1.45 !important;
}

/* The one thing in the section you are meant to click, so it takes a solid fill
   rather than the hover-glow the cards use - it should not have to compete with
   five highlighted cards for the same visual weight. */
html body #website-builds .mwb-cta{
  display:inline-flex;align-items:center;gap:.6em;margin-top:44px;
  padding:15px 26px;border-radius:999px;background:#14161A !important;color:#fff !important;
  font-size:15px !important;font-weight:600 !important;letter-spacing:-.01em;
  text-decoration:none !important;border:1px solid #14161A;
  transition:background .25s cubic-bezier(.22,1,.36,1),color .25s cubic-bezier(.22,1,.36,1),
             border-color .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1);
}
html body #website-builds .mwb-arrow{transition:transform .25s cubic-bezier(.22,1,.36,1)}
html body #website-builds .mwb-cta:hover{
  background:#D2FF02 !important;color:#14161A !important;border-color:#B9D400;transform:translateY(-2px);
}
html body #website-builds .mwb-cta:hover .mwb-arrow{transform:translateX(4px)}
html body #website-builds .mwb-cta:focus-visible{outline:2px solid #7E8C00;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  html body #website-builds .mwb-plane,
  html body #website-builds .mwb-leg,
  html body #website-builds .mwb-cta,
  html body #website-builds .mwb-arrow{transition:none !important}
  html body #website-builds .mwb-cta:hover{transform:none}
  html body #website-builds .mwb-cta:hover .mwb-arrow{transform:none}
}
@media(max-width:640px){
  html body #website-builds .mwb-planes{height:360px}
  html body #website-builds .mwb-plane{height:170px}
}

/* ============================================================
   SECTION 02 - AI AUTOMATION SERVICES back to black. Rachel 2026-08-21:
   "make the background black and fonts white (cards will be black with acid glow)".
   This reverses the light treatment applied to the same block on 2026-08-20;
   both live in this sheet, and these rules come later and carry an id, so they win.
   Scoped to #how-it-gets-done rather than .mml-sec so it cannot reach another page.

   Side effect worth knowing: .mml-rlink is #F5F3EB, which was near-invisible on the
   white cards - "Browse the shop" and "See the audit" were washing out. On black
   they read properly again without needing their own override.
   ============================================================ */
html body #how-it-gets-done{background:#0A0A0A !important}
html body #how-it-gets-done .mml-grid{color:#F2F2EE !important}
html body #how-it-gets-done .mml-onum{
  background:#111 !important;border-color:#333 !important;color:#F5F3EB !important;
}
html body #how-it-gets-done .mml-oslash{color:#D2FF02 !important}
html body #how-it-gets-done .mml-olbl{color:#9BA1AC !important}
html body #how-it-gets-done .mml-h2,
html body #how-it-gets-done .mml-accent{color:#F5F3EB !important}
html body #how-it-gets-done .mml-sub{color:#9BA1AC !important}
html body #how-it-gets-done .mml-ricon{color:#9BA1AC !important}
html body #how-it-gets-done .mml-rname{color:#F5F3EB !important}
html body #how-it-gets-done .mml-rtag{color:#9BA1AC !important}
html body #how-it-gets-done .mml-rtag.mml-rtag-lime{color:#D2FF02 !important}
html body #how-it-gets-done .mml-rdesc{color:#9BA1AC !important}
html body #how-it-gets-done .mml-rprice{color:#F5F3EB !important;border-top-color:#26292F !important}
html body #how-it-gets-done .mml-rlink{color:#F5F3EB !important}
html body #how-it-gets-done .mml-rlink.mml-rlink-lime{color:#D2FF02 !important}

/* black cards, acid glow. The rest state carries a faint halo so the cards read as
   alive on the dark ground; hover warms it. Lime works as a glow here in a way it
   never did on white, which is why the paper section above uses a solid edge instead. */
html body #how-it-gets-done .mml-rung{
  background:#111318 !important;
  border-color:#26292F !important;
  color:#F2F2EE !important;
  box-shadow:0 0 0 1px rgba(210,255,2,.07), 0 18px 44px -26px rgba(0,0,0,.9) !important;
}
html body #how-it-gets-done .mml-rung:hover{
  border-color:rgba(210,255,2,.55) !important;
  box-shadow:0 0 0 1px rgba(210,255,2,.35), 0 0 38px -6px rgba(210,255,2,.28),
             0 22px 50px -26px rgba(0,0,0,.95) !important;
  transform:translateY(-3px) !important;
}
html body #how-it-gets-done .mml-rung.mml-rung-lead{
  background:#111318 !important;
  border-color:#D2FF02 !important;border-width:1.5px !important;
  box-shadow:0 0 0 1px rgba(210,255,2,.45), 0 0 44px -6px rgba(210,255,2,.22),
             0 22px 50px -26px rgba(0,0,0,.95) !important;
}
@media(prefers-reduced-motion:reduce){
  html body #how-it-gets-done .mml-rung:hover{transform:none !important}
}

/* ============================================================
   AI AUDIT BOOT FLASH - see note 16 in site-fixes-2026.
   The class is added and removed by auditFlashGuard(), never by this
   sheet alone, so a failure to load the script cannot leave the page
   blank. visibility rather than display: the app keeps its box, so
   nothing below it jumps when the styled quiz appears.
   ============================================================ */
html body #audit-app.mm-audit-booting{visibility:hidden !important}

/* ============================================================
   SECTION 01 STACK/CARD ALIGNMENT. Rachel 2026-08-21: "the boxes on
   right need to move up to be more in line with animation on left and
   cta button needs to move up too".

   Measured on the live page: the planes container runs 1511-1951, but the
   RENDERED stack runs 1420-1844. Every layer above the base plate is lifted
   upward and nothing balances it below, so the stack's visual mass sits about
   90px above its own container's centre, while the cards centre on theirs.
   That 90px is exactly the misalignment.

   Moving the CARDS up by 90px was the obvious reading of the request and is
   not possible: they are 586px tall against the stack's 424, so their top
   would have had to start ~100px above the stage - straight through the lede
   sitting 72px above it. So the stack comes down to meet them instead, which
   lands the two columns on the same centre line. `top` rather than margin so
   the shift is screen-space only and the grid row height does not change.

   The stage and the CTA then both come up, which closes the dead space that
   was sitting under the stack.
   ============================================================ */
html body #website-builds .mwb-planes{top:90px}
html body #website-builds .mwb-stage{margin-top:clamp(28px,4vw,52px)}
html body #website-builds .mwb-cta{margin-top:26px}

/* ============================================================
   HERO: ONE ANIMATION, IN ORDER - see note 17 in site-fixes-2026.
   .mm-hero--seq freezes the reveal; .mm-hero--go plays it once. Both are
   added by script, so if that script fails the hero keeps its old behaviour
   instead of staying invisible.
   Specificity has to clear the page-level rules, which reach (0,4,1)
   !important on these elements; the section class here takes us past that.
   ============================================================ */
html body section.mm-hero.mm-hero--seq .mm-hero__title .mm-hero__line .mm-hero__line-in,
html body section.mm-hero.mm-hero--seq .mm-hero__title .mm-hero__line .mm-hero__line-in--accent,
html body section.mm-hero.mm-hero--seq .mm-hero__title .mm-hero__line .mm-hero__line-in--hollow{
  transform:translateY(112%) !important;
  transition:none !important;
}
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__title .mm-hero__line .mm-hero__line-in,
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__title .mm-hero__line .mm-hero__line-in--accent,
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__title .mm-hero__line .mm-hero__line-in--hollow{
  transform:translateY(0) !important;
  transition:transform 1s cubic-bezier(.19,1,.22,1) !important;
}
/* the three lines land in reading order rather than together */
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__title .mm-hero__line:nth-of-type(1) .mm-hero__line-in{transition-delay:0s !important}
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__title .mm-hero__line:nth-of-type(2) .mm-hero__line-in{transition-delay:.07s !important}
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__title .mm-hero__line:nth-of-type(3) .mm-hero__line-in{transition-delay:.14s !important}

/* The lede, buttons and meta line are deliberately NOT frozen.
   An earlier cut held all three at opacity 0 until the hero was released, and on
   staging the lede stayed at 0 even with .mm-hero--go applied: the --go rule was
   matching (its transition showed up in the computed styles) while its opacity and
   transform declarations lost to something else on the page. Rather than ship a
   hero whose paragraph can end up invisible, only the TITLE is sequenced - which is
   what actually caused the double animation and the flash of the old face. The lede
   keeps its existing reveal. */

@media(prefers-reduced-motion:reduce){
  html body section.mm-hero.mm-hero--seq .mm-hero__title .mm-hero__line .mm-hero__line-in{
    transform:none !important;opacity:1 !important;transition:none !important;
  }
}

/* ============================================================
   AUTOMATION TILES: PRODUCT KIT CHIPS - see note 19 in site-fixes-2026.
   Sits directly under the tile number, so the kit is the first thing read
   after the index. Lime is an outline here, not a fill: six filled chips on
   a black grid would outshout the lead card in the section above.
   ============================================================ */
html body #automations .mm-auto__kits{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;
}
html body #automations .mm-auto__kit{
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(210,255,2,.42);
  background:rgba(210,255,2,.05);
  color:#D2FF02 !important;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  text-decoration:none !important;line-height:1.3;
  transition:background .22s cubic-bezier(.22,1,.36,1),
             border-color .22s cubic-bezier(.22,1,.36,1),
             color .22s cubic-bezier(.22,1,.36,1);
}
html body #automations .mm-auto__kit:hover{
  background:#D2FF02;border-color:#D2FF02;color:#0A0A0A !important;
}
html body #automations .mm-auto__kit:focus-visible{outline:2px solid #D2FF02;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  html body #automations .mm-auto__kit{transition:none}
}

/* ============================================================
   WEBSITE BUILDS: cards up to meet the stack. Rachel 2026-08-21.
   The planes are transformed up and out of their 440px box, so centring the
   two grid columns left the cards sitting about 100px below the visual middle
   of the stack. Pulling the card column up closes that gap, and because the
   negative margin also shortens the grid row, the CTA under it rises with it.
   ============================================================ */
@media(min-width:981px){
  html body #website-builds .mwb-legend{margin-top:-96px}
}

/* ============================================================
   WEBSITE BUILDS on ONE COLUMN - Rachel 2026-08-26: "the website build
   animation is overlaying on top of the paragraph text and crunching"
   on mobile. The planes are absolutely anchored to the CENTRE of the
   .mwb-planes box and then translated upward by up to 4x56px, so the
   stack draws ~91px above its own box (measured on desktop, where the
   two-column grid absorbs it). In the single-column layout the box sits
   directly under the lede, so that overflow lands on the text; and the
   same geometry leaves ~107px of dead space below, which is the crunch
   against the cards reading as a gap in the wrong place. Margins move
   the box down and pull the cards up so the VISUAL stack, not the box,
   is what gets the breathing room. Heights are deliberately untouched -
   changing them moves the anchor centre and re-derives every number.
   ============================================================ */
@media(max-width:980px){
  html body #website-builds .mwb-planes{margin-top:120px;margin-bottom:-70px}
}
@media(max-width:640px){
  /* box is 360px here, so the centre rises 40px and the upward overflow grows
     to ~131px. First cut used -95px margin-bottom and the stack clipped the
     first card by 52px (measured at 375w on staging) - the dead space below
     the stack is smaller at this width because the narrower planes foreshorten
     less. 135/-20 measured out to ~140px above and ~27px below. */
  html body #website-builds .mwb-planes{margin-top:135px;margin-bottom:-20px}
}


/* ============================================================
   HERO BOTTOM: ONE OWNER, ONE FADE. Rachel 2026-08-29: the sub-heading and
   buttons still animated twice. Root cause, found by sweeping every script the
   page loads: FOUR different things animated the hero bottom - the page's own
   .95s-delayed transition on .mm-hero__bottom, a registered page-header script
   (maeveheroone, now removed) with its own freeze/reveal, home-refresh moving
   the nodes, and this sheet. Between first paint and the page code BUILDING the
   .mm-hero__bottom wrapper, the lede and buttons sat unwrapped, matched nobody's
   wrapper-keyed freeze, painted plain, vanished when the wrapper landed, then
   faded in - that is the repeat.
   So the freeze targets the LEAF elements, which exist from the first parse,
   not the wrapper, which does not. Reveal keys on --go only, with the
   transition stated in BOTH states so the page's own delayed transition on the
   wrapper never gets to compose a second fade. --seq is only ever added by
   site-fixes JS, so if that script fails nothing is hidden.
   ============================================================ */
html body section.mm-hero.mm-hero--seq:not(.mm-hero--go) .mm-hero__lede,
html body section.mm-hero.mm-hero--seq:not(.mm-hero--go) .mm-hero__ctas,
html body section.mm-hero.mm-hero--seq:not(.mm-hero--go) .mm-hero__meta,
html body section.mm-hero.mm-hero--seq:not(.mm-hero--go) .mm-hero__bottom{
  opacity:0 !important;
  transform:translateY(14px) !important;
  transition:none !important;
  animation:none !important;
}
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__lede,
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__ctas,
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__meta,
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__bottom{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:opacity .8s cubic-bezier(.19,1,.22,1) .38s,
             transform .8s cubic-bezier(.19,1,.22,1) .38s !important;
}
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__ctas{transition-delay:.5s !important}
html body section.mm-hero.mm-hero--seq.mm-hero--go .mm-hero__meta{transition-delay:.58s !important}
@media(prefers-reduced-motion:reduce){
  html body section.mm-hero .mm-hero__lede,
  html body section.mm-hero .mm-hero__ctas,
  html body section.mm-hero .mm-hero__meta,
  html body section.mm-hero .mm-hero__bottom{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}

/* ============================================================
   HERO QUIZ v2 - the two-tone card. Rachel 2026-08-29: "no header with
   gradient and white is too stark against black background", measured
   against the RJ Legal mock it was based on.

   What the RJ card does that a single flat panel did not: a dark gradient
   HEAD carrying the progress, step count, question and sub-line, then a
   separate light BODY holding the options. Two zones, not one.

   Two deliberate departures from RJ, both because this hero is black
   where RJ's is near-white:
   1. RJ's head is navy on a pale page, so it reads as the dark element.
      Here the page is already #0A0A0A, so a near-black head would vanish.
      The head gradient is LIFTED (#252A33 -> #14171C) so the card reads as
      an object sitting on the hero rather than a hole cut in it.
   2. The body is Maeve cream #F5F3EB, not #fff. That is the stark edge
      Rachel called out - pure white against pure black is the harshest
      pairing available, and the brand already owns a warm off-white.
   The corner glow is lime instead of RJ's blue, at low alpha so it reads
   as light rather than a shape.
   ============================================================ */
html body .mm-quiz{
  background:transparent !important;
  padding:0 !important;
  overflow:hidden;
  border:1px solid rgba(245,243,235,.14) !important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4) !important;
}
html body .mm-quiz__head{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,#252A33 0%,#14171C 70%);
  padding:22px 24px 24px;
}
/* the glow orb, RJ's move, in lime */
html body .mm-quiz__head::after{
  content:""; position:absolute; width:210px; height:210px;
  right:-72px; top:-92px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(210,255,2,.30),transparent 68%);
}
html body .mm-quiz__head > *{position:relative; z-index:2}
html body .mm-quiz__body{
  background:#F5F3EB;
  padding:20px 24px 20px;
}

/* progress: RJ's bars rather than pinprick dots */
html body .mm-quiz__dots{display:flex;gap:6px}
html body .mm-quiz__dots i{
  width:30px;height:4px;border-radius:3px;background:rgba(245,243,235,.22);
  transition:background .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1);
}
html body .mm-quiz__dots i.on{background:#D2FF02;width:34px}
html body .mm-quiz__step{color:rgba(245,243,235,.6) !important}
html body .mm-quiz h3{color:#F5F3EB !important;margin:16px 0 0 !important}
html body .mm-quiz__sub{color:rgba(245,243,235,.62) !important}

/* option rows: white cards on the cream body, so they lift without going stark */
html body .mm-quiz__opt{
  background:#FFFDF8 !important;
  border:1.5px solid #E2DFD4 !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  transition:border-color .3s,background .3s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .3s !important;
}
html body .mm-quiz__opt:hover{
  border-color:#B9D400 !important;background:#FBFDF0 !important;
  transform:translateX(3px) !important;
  box-shadow:0 10px 24px -18px rgba(20,22,26,.5) !important;
}
/* lime is unreadable as text on cream, so selection is carried by the ring and
   the filled radio, not by a lime label - same call as the website-builds cards */
html body .mm-quiz__radio{
  width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid #CFCBBC;display:grid;place-items:center;transition:.35s;
}
html body .mm-quiz__opt:hover .mm-quiz__radio{border-color:#7E8C00}
html body .mm-quiz__opt:hover .mm-quiz__radio i{
  width:9px;height:9px;border-radius:50%;background:#7E8C00;display:block;
}
html body .mm-quiz__foot{border-top-color:#E2DFD4 !important;margin-top:14px !important}
html body .mm-quiz__field{background:#FFFDF8 !important;border-color:#E2DFD4 !important}
@media(prefers-reduced-motion:reduce){
  html body .mm-quiz__opt,html body .mm-quiz__dots i,html body .mm-quiz__radio{transition:none !important}
  html body .mm-quiz__opt:hover{transform:none !important}
}

/* ============================================================
   OVERLINE MARK: line, not bullet. Rachel 2026-08-29.
   The same .mm-dot span is the eyebrow marker on the homepage, /about,
   /shop, /downloads and /contact, so restyling the class covers all five
   without touching markup. A rule rather than a dot also matches the
   sibling section overlines, which already lead with a rule.
   ============================================================ */
html body .mm-dot{
  width:26px !important;
  height:1px !important;
  border-radius:0 !important;
  background:#D2FF02 !important;
  display:inline-block !important;
  vertical-align:middle !important;
  margin-right:12px !important;
  flex:0 0 auto;
}