/* ==========================================================================
   Minipreneurs Academy — page sections built from native Divi 5 modules.
   Each module carries an mp-* class (Advanced → Attributes → CSS class).
   Layout-critical rules use !important so Divi's defaults don't override them;
   text, images and links stay editable in the Visual Builder.
   ========================================================================== */

:root {
  --mp-purple-soft: #7a4bc6;
  --mp-purple-text: #5a2aa3;
  --mp-turquoise-light: #6ff0e6;
  --mp-coral: #ff7a66;
  --mp-ink-soft: #4a4060;
  --mp-line: rgba(36, 27, 53, 0.14);
  --mp-step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --mp-step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
  --mp-step-3: clamp(2rem, 1.45rem + 2.4vw, 3.6rem);
  --mp-section: clamp(3.5rem, 2rem + 6vw, 8rem);
  --mp-r-m: 20px;
  --mp-r-l: 32px;
  --mp-r-xl: 44px;
  --mp-shadow: 5px 5px 0 var(--mp-ink);
}

/* --- Section / row / column / module resets ------------------------------------
   Generic resets use :where() so the layout classes further down always win. */
.et_pb_section.mp-section {
  position: relative;
  background-color: var(--mp-cream) !important;
  padding: var(--mp-section) 0 !important;
  font-family: var(--mp-font-body);
  font-size: var(--mp-step-0);
  line-height: 1.6;
  color: var(--mp-ink);
  -webkit-font-smoothing: antialiased;
}
.et_pb_section.mp-section--flush-top {
  padding-top: 0 !important;
}
.mp-section .et_pb_row {
  display: block !important;
  width: calc(100% - var(--mp-gutter) * 2) !important;
  max-width: var(--mp-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.mp-section .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
:where(.mp-section) .et_pb_module {
  margin: 0 !important;
}
:where(.mp-section) .et_pb_group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  min-width: 0;
}
.mp-section *,
.mp-section *::before,
.mp-section *::after {
  box-sizing: border-box;
}

/* Divi 5 turns every section, row, column, group and module into a flexbox with built-in gaps
   (60px sections, 40px rows, 30px modules) and sets ".et_pb_text { line-height: 1.7em }".
   Inside our sections the layout classes below decide spacing, so neutralise those defaults. */
.et_pb_section.mp-section {
  row-gap: 0 !important;
  column-gap: 0 !important;
}
:where(.mp-section) :is(.et_pb_row, .et_pb_column, .et_pb_group, .et_pb_module) {
  row-gap: 0 !important;
  column-gap: 0 !important;
}
:where(.mp-section) :is(.et_pb_text, .et_pb_heading, .et_pb_image, .et_pb_code, .et_pb_toggle, .et_pb_accordion) {
  display: block !important;
}
:where(.mp-section) :is(.et_pb_text, .et_pb_heading, .et_pb_code, .et_pb_toggle, .et_pb_accordion) {
  line-height: inherit !important;
}
:where(.mp-section) .et_pb_image {
  line-height: 0 !important;
}

/* Typography inside sections */
.mp-section p {
  padding: 0;
  margin: 0;
}
.mp-section p + p {
  margin-top: 1rem;
}
.mp-section a {
  color: var(--mp-purple-text);
}
.mp-section .et_pb_text_inner a,
.mp-section .mp-steps a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--mp-turquoise);
}
.mp-section h1,
.mp-section h2,
.mp-section h3,
.mp-section h4,
.mp-section h5,
.mp-section h6 {
  font-family: var(--mp-font-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: inherit;
  padding: 0;
  margin: 0;
  text-wrap: balance;
}
.mp-section ul,
.mp-section ol {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  line-height: inherit !important;
}

/* Stacks: vertical rhythm for groups of text */
.mp-stack {
  gap: 0 !important;
}
.mp-eyebrow p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--mp-step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-purple-text);
}
.mp-eyebrow p::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: url("../img/icons/spark.svg") center / contain no-repeat;
}
.mp-eyebrow + .et_pb_module {
  margin-top: 1rem !important;
}
.mp-h2 + .mp-muted {
  margin-top: 1.25rem !important;
}
.mp-section .et_pb_toggle_title {
  margin: 0 !important;
}
.mp-h2 :is(h1, h2, h3) {
  font-size: var(--mp-step-3);
  text-transform: uppercase;
}
.mp-h2--intro :is(h1, h2, h3) {
  max-width: 15ch;
}
.mp-h2--narrow :is(h1, h2, h3) {
  max-width: 14ch;
}
.mp-h3 :is(h2, h3, h4) {
  font-size: var(--mp-step-2);
  text-transform: uppercase;
  max-width: 12ch;
}
.mp-lede {
  margin-top: 1.5rem !important;
}
.mp-lede p {
  font-size: var(--mp-step-1);
  line-height: 1.5;
  max-width: 44ch;
}
.mp-muted p {
  color: var(--mp-ink-soft);
  max-width: 62ch;
}
.mp-note {
  margin-top: 1.5rem !important;
}
.mp-note p {
  font-size: var(--mp-step--1);
  color: var(--mp-ink-soft);
  border-left: 4px solid var(--mp-turquoise);
  padding-left: 1rem !important;
}

/* Two-column splits */
.mp-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem) !important;
  align-items: center;
}
.mp-split--activity {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.mp-split--how {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.mp-split--faq {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}
.mp-section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 2rem 4.5rem !important;
  align-items: end;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem) !important;
}
@media (max-width: 900px) {
  .mp-split,
  .mp-split--activity,
  .mp-split--how,
  .mp-split--faq,
  .mp-section-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Buttons (Divi Button module) ----------------------------------------------- */
:where(.mp-section) .et_pb_button_module_wrapper {
  margin: 0 !important;
}
.mp-button .et_pb_button,
.mp-button.et_pb_button {
  --mp-bg: var(--mp-turquoise);
  --mp-fg: var(--mp-ink);
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.6rem !important;
  min-height: 52px;
  padding: 0.8rem 1.5rem !important;
  border-radius: var(--mp-r-pill) !important;
  border: 2.5px solid var(--mp-ink) !important;
  background: var(--mp-bg) !important;
  color: var(--mp-fg) !important;
  font-family: var(--mp-font-body) !important;
  font-weight: 700 !important;
  font-size: 1.0625rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 4px 4px 0 var(--mp-ink);
  transition:
    transform 180ms var(--mp-ease),
    box-shadow 180ms var(--mp-ease),
    background-color 180ms var(--mp-ease) !important;
}
.mp-button .et_pb_button:hover,
.mp-button.et_pb_button:hover,
.mp-button .et_pb_button:focus-visible,
.mp-button.et_pb_button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mp-ink);
  padding: 0.8rem 1.5rem !important;
}
.mp-button .et_pb_button:active,
.mp-button.et_pb_button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--mp-ink);
}
/* Replace Divi's hover icon with our arrow (or nothing) */
.mp-button .et_pb_button::before,
.mp-button.et_pb_button::before {
  display: none !important;
}
.mp-button .et_pb_button::after,
.mp-button.et_pb_button::after {
  display: none !important;
}
.mp-button--arrow .et_pb_button::after,
.mp-button--arrow.et_pb_button::after,
.mp-button--down .et_pb_button::after,
.mp-button--down.et_pb_button::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  margin: 0 !important;
  opacity: 1 !important;
  width: 20px;
  height: 20px;
  font-size: 0 !important;
  background-color: currentColor;
  -webkit-mask: var(--mp-arrow) center / contain no-repeat;
  mask: var(--mp-arrow) center / contain no-repeat;
  transition: transform 180ms var(--mp-ease);
  --mp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.mp-button--down .et_pb_button::after,
.mp-button--down.et_pb_button::after {
  --mp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
body #page-container .mp-section .mp-button--arrow.et_pb_button::after,
body #page-container .mp-section .mp-button--arrow .et_pb_button::after,
body #page-container .mp-section .mp-button--down.et_pb_button::after,
body #page-container .mp-section .mp-button--down .et_pb_button::after {
  display: inline-block !important;
}
.mp-button--arrow .et_pb_button:hover::after,
.mp-button--arrow.et_pb_button:hover::after {
  transform: translateX(3px);
}
.mp-button--ghost .et_pb_button,
.mp-button--ghost.et_pb_button {
  --mp-bg: transparent;
  --mp-fg: var(--mp-cream);
  border-color: var(--mp-cream) !important;
  box-shadow: none;
}
.mp-button--ghost .et_pb_button:hover,
.mp-button--ghost.et_pb_button:hover {
  --mp-bg: rgba(255, 255, 255, 0.1);
  box-shadow: 4px 4px 0 var(--mp-purple-deep);
}
.mp-button--purple .et_pb_button,
.mp-button--purple.et_pb_button {
  --mp-bg: var(--mp-purple);
  --mp-fg: #fff;
}
.mp-actions {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1rem !important;
}

/* Sticker labels */
.mp-sticker p,
.mp-hero__tag p {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem 0.55rem !important;
  border-radius: var(--mp-r-pill);
  border: 2.5px solid var(--mp-ink);
  background: var(--mp-turquoise);
  color: var(--mp-ink);
  font-weight: 700;
  font-size: var(--mp-step--1);
  line-height: 1.3;
  box-shadow: 3px 3px 0 var(--mp-ink);
  white-space: nowrap;
}
.mp-sticker--gold p,
.mp-hero__tag p {
  background: var(--mp-gold);
}

/* --- Scalloped edges (CSS only, no extra markup) ---------------------------------- */
.mp-hero::after,
.mp-journey::before,
.mp-journey::after {
  content: "";
  --mp-s: 88px;
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--mp-s) * 0.5);
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 100%, var(--mp-cream) 49%, transparent 50.5%) 0 100% / var(--mp-s) var(--mp-s) repeat-x,
    radial-gradient(circle at 50% 100%, var(--mp-cream) 49%, transparent 50.5%) calc(var(--mp-s) * 0.5) 100% /
      calc(var(--mp-s) * 0.62) calc(var(--mp-s) * 0.62) repeat-x;
}
.mp-hero::after,
.mp-journey::after {
  bottom: -1px;
}
.mp-journey::before {
  top: -1px;
  transform: scaleY(-1);
}
@media (max-width: 700px) {
  .mp-hero::after,
  .mp-journey::before,
  .mp-journey::after {
    --mp-s: 56px;
  }
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.et_pb_section.mp-hero {
  background-color: var(--mp-purple) !important;
  color: var(--mp-cream);
  z-index: 2;
  overflow: visible !important;
  padding-top: clamp(2rem, 1rem + 4vw, 4.5rem) !important;
  padding-bottom: clamp(12rem, 6rem + 12vw, 17rem) !important;
  isolation: isolate;
}
/* Let the mascot and decorations position against the section, not the row */
.mp-hero .et_pb_row,
.mp-hero .et_pb_column {
  position: static !important;
}
.mp-hero .et_pb_column {
  text-align: center;
}
.mp-hero .et_pb_column > .et_pb_module:not(.mp-hero__figure) {
  position: relative;
  z-index: 3;
}
.mp-hero__label p {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem 0.55rem !important;
  border-radius: var(--mp-r-pill);
  border: 2.5px solid var(--mp-cream);
  background: var(--mp-purple-deep);
  color: var(--mp-cream);
  font-weight: 700;
  font-size: var(--mp-step--1);
  box-shadow: 3px 3px 0 var(--mp-ink);
}
.mp-hero__title {
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
}
.mp-hero__title h1 {
  font-size: clamp(2.65rem, 0.9rem + 8.4vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
  color: var(--mp-cream);
}
.mp-hero__title .mp-line {
  display: block;
}
.mp-hero__title .mp-accent {
  color: var(--mp-turquoise);
}
.mp-hero__title .mp-squiggle {
  position: relative;
  display: inline-block;
}
.mp-hero__title .mp-squiggle::after {
  content: "";
  position: absolute;
  left: 2%;
  bottom: -0.16em;
  width: 96%;
  height: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16c40-9 70-10 96-4s54 6 86-2 66-8 98-2 70 7 112-4' fill='none' stroke='%23F7F5EE' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mp-hero__copy {
  margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.5rem) !important;
}
.mp-hero__copy p {
  max-width: 34ch;
  margin-inline: auto;
  font-size: var(--mp-step-1);
  line-height: 1.5;
  color: #f1ecfb;
}
.mp-hero .mp-actions {
  margin-top: clamp(1.5rem, 1rem + 1.2vw, 2.25rem) !important;
}
.mp-hero__figure {
  position: absolute !important;
  right: clamp(0.5rem, 6vw, 7rem);
  bottom: clamp(-4.5rem, -1rem - 3vw, -1.5rem);
  width: clamp(220px, 12rem + 10vw, 380px);
  z-index: 4;
  pointer-events: none;
}
/* Percentage-width images need a full-width wrapper (Divi's wrapper shrinks to fit otherwise,
   collapsing the image to 0px so it never lazy-loads). */
.mp-hero__mascot .et_pb_image_wrap,
.mp-founder__portrait .et_pb_image_wrap {
  display: block !important;
  width: 100% !important;
}
.mp-hero__mascot img {
  width: 100%;
  rotate: -5deg;
  filter: drop-shadow(0 22px 22px rgba(36, 27, 53, 0.28));
}
.mp-hero__tag {
  position: absolute !important;
  right: 72%;
  top: 22%;
  rotate: -8deg;
  z-index: 2;
}
.mp-hero__tag p {
  font-size: 1rem;
}

/* Decorative layer injected by minipreneurs.js */
.mp-hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mp-hero__blob {
  position: absolute;
  border-radius: 50%;
  background: var(--mp-purple-soft);
  opacity: 0.55;
}
.mp-hero__blob--a {
  width: 46vw;
  max-width: 640px;
  aspect-ratio: 1;
  left: -14vw;
  bottom: -18vw;
}
.mp-hero__blob--b {
  width: 30vw;
  max-width: 420px;
  aspect-ratio: 1;
  right: -8vw;
  top: -10vw;
  opacity: 0.35;
}
.mp-hero__float {
  position: absolute;
  z-index: 1;
  background: center / contain no-repeat;
}
.mp-hero__float--coin {
  background-image: url("../img/icons/coin.svg");
  width: clamp(64px, 6vw, 104px);
  aspect-ratio: 1;
  left: 7%;
  top: 16%;
  rotate: -14deg;
}
.mp-hero__float--bulb {
  background-image: url("../img/icons/bulb.svg");
  width: clamp(64px, 6.2vw, 108px);
  aspect-ratio: 1;
  right: 8%;
  top: 14%;
  rotate: 12deg;
}
.mp-hero__float--notebook {
  background-image: url("../img/icons/notebook.svg");
  width: clamp(80px, 8vw, 132px);
  aspect-ratio: 1;
  left: 9%;
  bottom: clamp(5rem, 3rem + 4vw, 8rem);
  rotate: -8deg;
}
.mp-hero__float--stall {
  background-image: url("../img/icons/stall.svg");
  width: clamp(72px, 6vw, 104px);
  aspect-ratio: 1;
  left: 25%;
  bottom: clamp(3.5rem, 2rem + 3vw, 6rem);
  rotate: 7deg;
}
.mp-star {
  position: absolute;
  z-index: 1;
  width: 26px;
  aspect-ratio: 1;
  background: center / contain no-repeat;
}
.mp-star--turq {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3c2 12 9 19 21 21-12 2-19 9-21 21-2-12-9-19-21-21 12-2 19-9 21-21z' fill='%2308CEC1' stroke='%23241B35' stroke-width='2.75' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mp-star--gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3c2 12 9 19 21 21-12 2-19 9-21 21-2-12-9-19-21-21 12-2 19-9 21-21z' fill='%23FFC845' stroke='%23241B35' stroke-width='2.75' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mp-star--cream {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3c2 12 9 19 21 21-12 2-19 9-21 21-2-12-9-19-21-21 12-2 19-9 21-21z' fill='%23F7F5EE' stroke='%23241B35' stroke-width='2.75' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mp-star--1 { left: 18%; top: 34%; }
.mp-star--2 { right: 19%; top: 38%; width: 18px; }
.mp-star--3 { left: 38%; bottom: 22%; width: 20px; }
.mp-star--4 { left: 30%; top: 12%; width: 14px; }
.mp-star--5 { left: 12%; top: 52%; width: 16px; }
.mp-star--6 { right: 6%; top: 46%; width: 22px; }
.mp-star--7 { right: 30%; top: 9%; width: 12px; }
.mp-star--8 { left: 54%; bottom: 18%; width: 14px; }

.mp-twinkle-toggle {
  position: absolute;
  left: var(--mp-gutter);
  bottom: clamp(3.25rem, 2rem + 3vw, 4.5rem);
  z-index: 5;
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: var(--mp-r-pill);
  background: rgba(36, 27, 53, 0.28);
  color: var(--mp-cream);
  font-family: var(--mp-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.mp-twinkle-toggle:hover {
  background: rgba(36, 27, 53, 0.45);
}
.mp-twinkle-toggle:focus-visible {
  outline: 3px solid var(--mp-turquoise);
  outline-offset: 3px;
}
.mp-twinkle-toggle .mp-ico {
  width: 14px;
  height: 14px;
}
.mp-ico--pause {
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z'/%3E%3C/svg%3E");
}
.mp-ico--play {
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .mp-twinkle-toggle {
    display: inline-flex;
  }
  .mp-hero__figure {
    animation: mp-fly-in 900ms 120ms var(--mp-ease) backwards;
  }
  .mp-hero__float {
    animation: mp-pop-in 600ms var(--mp-ease) backwards;
  }
  .mp-hero__float--bulb { animation-delay: 100ms; }
  .mp-hero__float--notebook { animation-delay: 200ms; }
  .mp-hero__float--stall { animation-delay: 300ms; }
  .mp-star {
    animation: mp-twinkle var(--mp-tw, 3s) ease-in-out var(--mp-tw-delay, 0s) infinite;
  }
  .mp-star--1 { --mp-tw: 3.2s; --mp-tw-delay: 0.2s; }
  .mp-star--2 { --mp-tw: 2.6s; --mp-tw-delay: 1.1s; }
  .mp-star--3 { --mp-tw: 3.6s; --mp-tw-delay: 0.6s; }
  .mp-star--4 { --mp-tw: 2.8s; --mp-tw-delay: 1.6s; }
  .mp-star--5 { --mp-tw: 3.4s; --mp-tw-delay: 2.1s; }
  .mp-star--6 { --mp-tw: 2.9s; --mp-tw-delay: 0.9s; }
  .mp-star--7 { --mp-tw: 3.8s; --mp-tw-delay: 2.6s; }
  .mp-star--8 { --mp-tw: 3.1s; --mp-tw-delay: 1.4s; }
  .mp-hero.mp-is-paused .mp-star {
    animation-play-state: paused;
  }
}
@keyframes mp-fly-in {
  from {
    transform: translate(24px, 48px) rotate(4deg);
  }
}
@keyframes mp-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(16px);
  }
}
@keyframes mp-twinkle {
  0%,
  100% {
    opacity: 0.35;
    scale: 0.7;
  }
  45% {
    opacity: 1;
    scale: 1.08;
  }
  60% {
    opacity: 0.85;
    scale: 0.95;
  }
}

@media (max-width: 860px) {
  .et_pb_section.mp-hero {
    padding-bottom: 0 !important;
  }
  .mp-hero__figure {
    position: relative !important;
    right: auto;
    bottom: -2.5rem;
    width: clamp(200px, 58vw, 320px);
    margin: 4.5rem auto 0 !important;
  }
  .mp-hero__tag {
    right: auto;
    left: 50%;
    top: -3.25rem;
    translate: -50% 0;
    rotate: -4deg;
  }
  .mp-hero__float--coin {
    left: auto;
    right: 7%;
    top: auto;
    bottom: 20%;
  }
  .mp-hero__float--notebook {
    left: 5%;
    bottom: 20%;
    width: 72px;
  }
  .mp-hero__float--stall,
  .mp-hero__float--bulb,
  .mp-star--3,
  .mp-star--8 {
    display: none;
  }
  /* Keep the stars in the illustrated scene below the buttons */
  .mp-star--1 { left: 8%; right: auto; top: auto; bottom: 30%; }
  .mp-star--2 { left: auto; right: 10%; top: auto; bottom: 34%; }
  .mp-star--4 { left: 74%; right: auto; top: auto; bottom: 24%; }
  .mp-star--5 { left: 20%; right: auto; top: auto; bottom: 14%; }
  .mp-star--6 { left: auto; right: 4%; top: auto; bottom: 10%; }
  .mp-star--7 { left: 30%; right: auto; top: auto; bottom: 36%; }
  /* Compact icon button on phones so it clears the mascot; label stays for screen readers */
  .mp-twinkle-toggle {
    left: 0.75rem;
    right: auto;
    bottom: 3.5rem;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .mp-twinkle-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .mp-hero__blob--a {
    width: 120vw;
    left: -10vw;
    bottom: -60vw;
  }
}

/* ==========================================================================
   2. Parent introduction
   ========================================================================== */
.mp-examples {
  margin-top: 2rem !important;
}
.mp-examples ul {
  display: grid;
  gap: 0.9rem;
}
.mp-examples li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: center;
  font-weight: 600;
  font-size: var(--mp-step-1);
  line-height: 1.35;
}
.mp-examples li::before {
  content: "";
  width: 48px;
  height: 48px;
  background: url("../img/icons/coin.svg") center / contain no-repeat;
}
.mp-examples li:nth-child(2)::before {
  background-image: url("../img/icons/speech.svg");
}
.mp-examples li:nth-child(3)::before {
  background-image: url("../img/icons/stall.svg");
}

.mp-project {
  position: relative;
  background: var(--mp-lavender);
  border-radius: var(--mp-r-xl);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
.mp-project::before,
.mp-project::after {
  content: "";
  position: absolute;
  background: center / contain no-repeat;
  z-index: 2;
}
.mp-project::before {
  background-image: url("../img/icons/coin.svg");
  width: 78px;
  height: 78px;
  right: -18px;
  top: -26px;
  rotate: 12deg;
}
.mp-project::after {
  background-image: url("../img/icons/tag.svg");
  width: 70px;
  height: 70px;
  left: -20px;
  bottom: 22%;
  rotate: -16deg;
}
.mp-project__sheet {
  position: relative;
  background-color: #fff !important;
  border: 2.5px solid var(--mp-ink);
  border-radius: var(--mp-r-m);
  box-shadow: var(--mp-shadow);
  padding: 1.75rem 1.75rem 1.5rem 3.25rem;
  rotate: -2deg;
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(104, 53, 180, 0.12) 39px 41px) !important;
  background-position: 0 66px !important;
}
.mp-project__sheet::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 0;
  bottom: 0;
  border-left: 2px solid rgba(255, 122, 102, 0.55);
}
.mp-project__title {
  font-family: var(--mp-font-display);
  font-weight: 800;
  font-size: var(--mp-step-2);
  line-height: 1.05;
  margin-bottom: 1rem !important;
}
.mp-project__sheet ol {
  counter-reset: mp-step;
  display: grid;
}
.mp-project__sheet li {
  counter-increment: mp-step;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 40px;
  padding-top: 0.45rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.mp-project__sheet li::before {
  content: counter(mp-step);
  font-family: var(--mp-font-display);
  font-weight: 800;
  color: var(--mp-purple-text);
}
.mp-project__caption {
  margin-top: 1.5rem !important;
}
.mp-project__caption p {
  font-size: var(--mp-step--1);
  color: var(--mp-ink-soft);
}

/* ==========================================================================
   3. Four areas (bento)
   ========================================================================== */
.mp-bento {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 1vw, 1.5rem) !important;
}
.mp-panel {
  border-radius: var(--mp-r-l);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border: 2.5px solid var(--mp-ink);
  overflow: hidden;
  transition:
    transform 220ms var(--mp-ease),
    box-shadow 220ms var(--mp-ease);
}
.mp-panel:hover {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: var(--mp-shadow);
}
.mp-panel .et_pb_text p {
  margin-top: 0.75rem;
  max-width: 40ch;
}
.mp-panel__art {
  flex: none !important;
  width: auto !important;
}
.mp-panel__art img {
  width: 80px !important;
  height: 80px !important;
  margin-bottom: 1.5rem;
}
.mp-panel__modules {
  margin-top: auto !important;
}
.mp-panel__modules p {
  padding-top: 1.5rem !important;
  font-size: var(--mp-step--1);
  font-weight: 600;
}
.mp-panel--feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--mp-purple);
  color: var(--mp-cream);
  justify-content: flex-end;
  min-height: 500px;
}
.mp-panel--feature :is(h2, h3) {
  font-size: var(--mp-step-3);
}
.mp-panel--feature .et_pb_text p {
  color: #f1ecfb;
  font-size: var(--mp-step-1);
}
.mp-panel--feature .mp-panel__modules p {
  color: var(--mp-turquoise-light);
  font-size: var(--mp-step-1);
  padding-top: 0 !important;
  margin-top: 1.25rem;
}
.mp-panel__jars {
  margin-bottom: auto !important;
  padding-bottom: 2rem;
}
.mp-panel__jars img {
  width: min(100%, 300px) !important;
}
.mp-panel--wide {
  grid-column: 2 / span 2;
  background: var(--mp-mint);
  flex-direction: row !important;
  gap: 1.5rem !important;
  align-items: flex-start;
}
.mp-panel--wide .mp-panel__art img {
  width: 96px !important;
  height: 96px !important;
  margin: 0;
}
.mp-panel--lav {
  grid-column: 2;
  background: var(--mp-lavender);
}
.mp-panel--white {
  grid-column: 3;
  background: #fff;
}
@media (max-width: 1080px) {
  .mp-bento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .mp-panel--feature {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
  }
  .mp-panel--wide {
    grid-column: 1 / -1;
  }
  .mp-panel--lav {
    grid-column: 1;
  }
  .mp-panel--white {
    grid-column: 2;
  }
}
@media (max-width: 640px) {
  .mp-bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-panel--lav,
  .mp-panel--white {
    grid-column: 1;
  }
  .mp-panel--wide {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   4. Learning journey
   ========================================================================== */
.et_pb_section.mp-journey {
  background-color: var(--mp-lavender) !important;
  padding: calc(var(--mp-section) + 2rem) 0 !important;
}
.mp-stops {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem !important;
  counter-reset: mp-stop;
  margin-top: clamp(1rem, 0.5rem + 2vw, 2rem) !important;
}
.mp-stops::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 210px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 210' preserveAspectRatio='none'%3E%3Cpath d='M120 58 C 220 58, 260 150, 360 150 S 500 58, 600 58 S 740 150, 840 150 S 980 58, 1080 58' fill='none' stroke='%236835B4' stroke-width='5' stroke-dasharray='2 16' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  pointer-events: none;
}
.mp-stop {
  position: relative;
  counter-increment: mp-stop;
  align-items: center !important;
  text-align: center;
}
.mp-stop:nth-child(even) {
  padding-top: 92px;
}
.mp-stop__icon {
  position: relative;
  display: grid !important;
  place-items: center;
  flex: none;
  width: 108px !important;
  height: 108px !important;
  border-radius: 50%;
  border: 3px solid var(--mp-ink);
  background: #fff;
  box-shadow: 4px 4px 0 var(--mp-ink);
  line-height: 0;
  transition:
    transform 200ms var(--mp-ease),
    box-shadow 200ms var(--mp-ease);
}
.mp-stop:hover .mp-stop__icon {
  transform: translate(-2px, -2px) rotate(-4deg);
  box-shadow: 6px 6px 0 var(--mp-ink);
}
.mp-stop__icon img {
  width: 58px !important;
  height: 58px !important;
}
.mp-stop__icon::before {
  content: counter(mp-stop);
  position: absolute;
  top: -8px;
  left: -6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--mp-ink);
  background: var(--mp-purple);
  color: #fff;
  font-family: var(--mp-font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
.mp-stop--finish .mp-stop__icon {
  background: var(--mp-gold);
}
.mp-stop--finish .mp-stop__icon::before {
  content: "★";
}
.mp-stop__label {
  margin-top: 0.75rem !important;
}
.mp-stop__label :is(h2, h3, h4) {
  font-size: var(--mp-step-1);
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 11ch;
  margin-inline: auto;
}
.mp-stop__modules {
  margin-top: 0.75rem !important;
}
.mp-stop__modules ul {
  display: grid;
  gap: 0.2rem;
  font-size: var(--mp-step--1);
  font-weight: 600;
  color: var(--mp-ink-soft);
  line-height: 1.5;
}
/* Divi Toggle restyled as "Read summary" */
.mp-stop__toggle {
  margin-top: 0.75rem !important;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.mp-stop__toggle .et_pb_toggle_title {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem !important;
  border-radius: var(--mp-r-pill);
  font-family: var(--mp-font-body) !important;
  font-size: var(--mp-step--1) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--mp-purple-text) !important;
  cursor: pointer;
}
.mp-stop__toggle .et_pb_toggle_title::before {
  content: "" !important;
  position: static !important;
  order: 2;
  margin: 0 !important;
  width: 14px;
  height: 14px;
  font-size: 0 !important;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate 200ms var(--mp-ease);
}
.mp-stop__toggle.et_pb_toggle_open .et_pb_toggle_title::before {
  rotate: 180deg;
}
.mp-stop__toggle .et_pb_toggle_content {
  margin-top: 0.75rem;
  padding: 1rem 1.15rem !important;
  background: #fff;
  border: 2px solid var(--mp-ink);
  border-radius: var(--mp-r-m);
  text-align: left;
  font-size: 1rem;
  color: var(--mp-ink);
}
.mp-stop__toggle .et_pb_toggle_content p {
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .mp-stops {
    grid-template-columns: minmax(0, 1fr);
    gap: 0 !important;
  }
  .mp-stops::before {
    display: none;
  }
  .mp-stop,
  .mp-stop:nth-child(even) {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start !important;
    text-align: left;
    padding: 0 0 1.75rem;
  }
  .mp-stop::after {
    content: "";
    position: absolute;
    left: 40px;
    top: 84px;
    bottom: 0;
    border-left: 4px dashed var(--mp-purple);
  }
  .mp-stop:last-child::after {
    display: none;
  }
  .mp-stop__icon {
    grid-row: 1 / span 3;
    width: 80px !important;
    height: 80px !important;
  }
  .mp-stop__icon img {
    width: 44px !important;
    height: 44px !important;
  }
  .mp-stop__label {
    margin-top: 1.1rem !important;
  }
  .mp-stop__label :is(h2, h3, h4) {
    max-width: none;
    margin: 0;
  }
  .mp-stop__modules,
  .mp-stop__toggle {
    grid-column: 2;
  }
  .mp-stop__modules {
    margin-top: 0.4rem !important;
  }
  .mp-stop__toggle .et_pb_toggle_title {
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   5. £10 activity (rendered by minipreneurs.js into the Code module)
   ========================================================================== */
.mp-money {
  position: relative;
  background: var(--mp-mint);
  border: 2.5px solid var(--mp-ink);
  border-radius: var(--mp-r-xl);
  box-shadow: 8px 8px 0 var(--mp-ink);
  padding: clamp(1.25rem, 0.75rem + 2.4vw, 2.75rem);
  font-family: var(--mp-font-body);
  color: var(--mp-ink);
}
.mp-money::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: -22px;
  top: -30px;
  rotate: 14deg;
  background: url("../img/icons/coin.svg") center / contain no-repeat;
}
.mp-money__fallback {
  font-size: var(--mp-step-1);
  font-weight: 600;
}
.mp-money__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mp-money__amount {
  font-family: var(--mp-font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
}
.mp-money__label {
  font-weight: 600;
  font-size: var(--mp-step--1);
  color: var(--mp-ink-soft);
}
.mp-money__coins {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
}
.mp-money__coins span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--mp-ink);
  background: var(--mp-gold);
  transition:
    background-color 200ms var(--mp-ease),
    transform 200ms var(--mp-ease);
}
.mp-money__coins span.is-used {
  background: transparent;
  border-style: dashed;
  transform: scale(0.85);
}
.mp-money__pots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.mp-pot {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 2.5px solid var(--mp-ink);
  border-radius: var(--mp-r-l);
  padding: 1.1rem 0.75rem 1rem;
  text-align: center;
}
.mp-pot__jar {
  width: clamp(72px, 9vw, 112px);
  height: auto;
  display: block;
}
.mp-pot__name {
  font-family: var(--mp-font-display);
  font-weight: 800;
  font-size: var(--mp-step-1);
  text-transform: uppercase;
  line-height: 1;
}
.mp-pot__value {
  font-family: var(--mp-font-display);
  font-weight: 800;
  font-size: var(--mp-step-2);
  line-height: 1;
}
.mp-pot__controls {
  display: flex;
  gap: 0.5rem;
}
.mp-step-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 2.5px solid var(--mp-ink);
  background: var(--mp-cream);
  color: var(--mp-ink);
  box-shadow: 2px 2px 0 var(--mp-ink);
  cursor: pointer;
  font: 700 1.4rem/1 var(--mp-font-body);
  transition:
    transform 150ms var(--mp-ease),
    box-shadow 150ms var(--mp-ease),
    background-color 150ms;
}
.mp-step-btn:hover:not([aria-disabled="true"]) {
  background: var(--mp-turquoise);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--mp-ink);
}
.mp-step-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.mp-step-btn:focus-visible,
.mp-money__reset:focus-visible {
  outline: 3px solid var(--mp-purple);
  outline-offset: 3px;
}
.mp-money__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  min-height: 56px;
}
.mp-money__msg {
  flex: 1 1 260px;
  font-weight: 600;
  font-size: var(--mp-step-1);
  line-height: 1.4;
}
.mp-money__msg.is-hint {
  font-weight: 500;
  font-size: 1rem;
  color: var(--mp-ink-soft);
}
.mp-money__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: var(--mp-r-pill);
  border: 2.5px solid var(--mp-ink);
  background: var(--mp-cream);
  color: var(--mp-ink);
  font: 700 1rem/1.1 var(--mp-font-body);
  box-shadow: 4px 4px 0 var(--mp-ink);
  cursor: pointer;
}
@media (max-width: 520px) {
  .mp-money__pots {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-pot {
    grid-template-columns: 56px 1fr auto;
    gap: 0.1rem 1rem;
    justify-items: start;
    text-align: left;
    align-items: center;
    padding: 0.75rem 0.9rem;
  }
  .mp-pot__jar {
    width: 56px;
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .mp-pot__name {
    grid-column: 2;
    grid-row: 1;
  }
  .mp-pot__value {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--mp-step-1);
  }
  .mp-pot__controls {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

/* ==========================================================================
   6. How it works
   ========================================================================== */
.mp-how__aside {
  position: sticky !important;
  top: 2rem;
}
.mp-how__art {
  position: relative;
  margin-top: 2.5rem !important;
  max-width: 460px;
}
.mp-how__thumb img {
  border-radius: var(--mp-r-m);
  border: 2.5px solid var(--mp-ink);
  box-shadow: var(--mp-shadow);
  rotate: -2.5deg;
}
.mp-how__sticker {
  position: absolute !important;
  right: -10px;
  bottom: -18px;
  rotate: 5deg;
}
.mp-steps ol {
  counter-reset: mp-how;
  display: grid;
}
.mp-steps li {
  counter-increment: mp-how;
  display: grid;
  grid-template-columns: clamp(64px, 4rem + 2vw, 112px) 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-top: 2.5px solid var(--mp-ink);
}
.mp-steps li:last-child {
  border-bottom: 2.5px solid var(--mp-ink);
}
.mp-steps li::before {
  content: counter(mp-how, decimal-leading-zero);
  grid-row: 1 / span 2;
  white-space: nowrap; /* Divi's break-word wrapping would split "02" over two lines */
  font-family: var(--mp-font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 2rem + 3vw, 5rem);
  line-height: 0.85;
  color: var(--mp-purple);
}
.mp-steps h3 {
  font-size: var(--mp-step-2);
  text-transform: uppercase;
}
.mp-steps p {
  margin-top: 0.6rem;
  max-width: 52ch;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .mp-how__aside {
    position: relative !important;
    top: 0;
  }
  .mp-how__art {
    max-width: 380px;
  }
}

/* ==========================================================================
   7. Founder
   ========================================================================== */
.mp-founder {
  display: grid !important;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem) !important;
  align-items: center;
  background: var(--mp-mint);
  border-radius: var(--mp-r-xl);
  padding: clamp(1.75rem, 1rem + 4vw, 5rem);
  overflow: hidden;
}
.mp-founder__portrait {
  position: relative;
  align-self: end;
  margin-bottom: calc(clamp(1.75rem, 1rem + 4vw, 5rem) * -1) !important;
}
.mp-founder__portrait::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 92%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--mp-turquoise);
  border: 2.5px solid var(--mp-ink);
}
.mp-founder__portrait .et_pb_image {
  text-align: center;
}
.mp-founder__portrait img {
  position: relative;
  display: block;
  margin-inline: auto;
  width: min(100%, 300px) !important;
}
.mp-founder__text .et_pb_text {
  margin-top: 1.25rem !important;
}
.mp-founder__text .et_pb_text p {
  max-width: 56ch;
}
.mp-founder__text .et_pb_button_module_wrapper,
.mp-founder__text .mp-button {
  margin-top: 1.5rem !important;
}
@media (max-width: 820px) {
  .mp-founder {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-founder__portrait {
    order: 2;
    max-width: 260px;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   8. FAQs (Divi Accordion)
   ========================================================================== */
.mp-faq {
  border-top: 2.5px solid var(--mp-ink);
}
.mp-faq .et_pb_toggle {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2.5px solid var(--mp-ink) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.mp-faq .et_pb_toggle_title {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 1.1rem 0.25rem !important;
  font-family: var(--mp-font-body) !important;
  font-weight: 700 !important;
  font-size: var(--mp-step-1) !important;
  line-height: 1.3 !important;
  color: var(--mp-ink) !important;
  cursor: pointer;
}
.mp-faq .et_pb_toggle_title:hover {
  color: var(--mp-purple-text) !important;
}
.mp-faq .et_pb_toggle_title::before {
  content: "" !important;
  position: static !important;
  order: 2;
  flex: none;
  margin: 0 !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--mp-ink);
  font-size: 0 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241B35' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
      center / 16px no-repeat,
    var(--mp-lavender);
  transition:
    rotate 220ms var(--mp-ease),
    background-color 220ms;
}
.mp-faq .et_pb_toggle_open .et_pb_toggle_title::before {
  rotate: 45deg;
  background-color: var(--mp-turquoise);
}
.mp-faq .et_pb_toggle_content {
  padding: 0 3.5rem 1.5rem 0.25rem !important;
  max-width: 64ch;
  color: var(--mp-ink);
  font-size: var(--mp-step-0);
}

/* ==========================================================================
   9. Closing call to action
   ========================================================================== */
.mp-cta {
  position: relative;
  background: var(--mp-purple);
  color: var(--mp-cream);
  border-radius: var(--mp-r-xl);
  padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.mp-cta::before,
.mp-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: center / contain no-repeat;
}
.mp-cta::before {
  background-image: url("../img/icons/coin.svg");
  width: clamp(60px, 7vw, 110px);
  aspect-ratio: 1;
  left: 6%;
  top: 14%;
  rotate: -16deg;
}
.mp-cta::after {
  background-image: url("../img/icons/bulb.svg");
  width: clamp(60px, 7vw, 110px);
  aspect-ratio: 1;
  right: 6%;
  bottom: 14%;
  rotate: 12deg;
}
.mp-cta__title h2 {
  font-size: clamp(2.4rem, 1rem + 5.6vw, 6rem);
  line-height: 0.92;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
  color: var(--mp-cream);
}
.mp-cta__title .mp-accent {
  color: var(--mp-turquoise);
}
.mp-cta__copy {
  margin: 1.5rem auto 0 !important;
  max-width: 44ch;
}
.mp-cta__copy p {
  font-size: var(--mp-step-1);
  color: #f1ecfb;
}
.mp-cta .mp-actions {
  margin-top: 2rem !important;
}
@media (max-width: 700px) {
  .mp-cta::after {
    display: none;
  }
  .mp-cta::before {
    left: auto;
    right: -12px;
    top: auto;
    bottom: -12px;
    width: 72px;
  }
}

/* Focus rings: turquoise on purple, purple on light */
.mp-section :focus-visible {
  outline: 3px solid var(--mp-purple);
  outline-offset: 3px;
  border-radius: 6px;
}
.mp-hero :focus-visible,
.mp-cta :focus-visible,
.mp-panel--feature :focus-visible {
  outline-color: var(--mp-turquoise);
}

@media (prefers-reduced-motion: reduce) {
  .mp-section *,
  .mp-section *::before,
  .mp-section *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reference parity — 1.2.0. Divi wrappers are reset explicitly so native
   modules preserve the source page's dimensions and responsive breakpoints. */
html:has(.mp-hero) { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body:has(.mp-hero) { overflow-x: clip; background: var(--mp-cream); }
.mp-section p { text-wrap: pretty; }
.mp-section .et_pb_module { min-width: 0; }
.mp-section .et_pb_image img { display:block; }
.mp-hero__label .mp-dot { width:5px; height:5px; border-radius:50%; background:var(--mp-turquoise); }
.mp-hero__label p { line-height:1.3; }
.mp-hero__figure { inset:0 !important; width:auto !important; margin:0 !important; }
.mp-hero__mascot { position:absolute !important; right:clamp(.5rem,6vw,7rem); bottom:clamp(-4.5rem,-1rem - 3vw,-1.5rem); width:clamp(220px,12rem + 10vw,380px) !important; }
.mp-hero__tag { top:auto; right:calc(clamp(.5rem,6vw,7rem) + clamp(170px,10rem + 8vw,330px)); bottom:clamp(9rem,6rem + 8vw,15rem); }
.mp-hero__scene { z-index:-1; }
.mp-panel p { margin-top:.75rem; max-width:40ch; }
.mp-panel__modules p { margin-top:0; }
.mp-panel--wide .mp-panel__art { flex:none; width:96px !important; }
.mp-panel--feature .mp-panel__modules { margin-top:1.25rem !important; }
.mp-panel--feature .mp-panel__modules p { margin-top:0; }
.mp-split--activity,.mp-split--faq { gap:clamp(2rem,1rem + 4vw,5rem) !important; }
.mp-split--how { gap:clamp(2rem,1rem + 5vw,6rem) !important; }
.mp-activity .mp-h2 h2 { max-width:10ch; }
.mp-activity .mp-lede p { max-width:36ch; }
.mp-founder .mp-h2 h2 { max-width:12ch; }
.mp-founder__portrait .et_pb_image_wrap { display:block !important; width:100% !important; }
.mp-cta__title .mp-accent { display:block; }
.mp-cta__copy p { max-width:44ch; margin-inline:auto; }
.mp-cta__jar,.mp-cta__spark { position:absolute; z-index:-1; background:center/contain no-repeat; }
.mp-cta__jar { width:clamp(56px,6vw,96px); aspect-ratio:1; left:10%; bottom:10%; rotate:8deg; background-image:url('../img/icons/jar.svg'); }
.mp-cta__spark { width:28px; aspect-ratio:1; right:14%; top:18%; background-image:url('../img/icons/spark.svg'); }
.mp-faq { gap:0 !important; }
.mp-section [hidden] { display:none !important; }
.mp-stop__control { display:grid; justify-items:center; gap:.75rem; background:none; border:0; padding:.25rem; cursor:pointer; border-radius:var(--mp-r-m); color:var(--mp-ink); font:inherit; }
.mp-stop__text { display:grid; justify-items:center; gap:.35rem; }
.mp-stop__name { font-family:var(--mp-font-display); font-weight:800; font-size:var(--mp-step-1); line-height:1.05; text-transform:uppercase; max-width:11ch; }
.mp-stop__hint { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--mp-step--1); font-weight:700; color:var(--mp-purple-text); }
.mp-stop__hint::after { content:''; display:block; width:14px; height:14px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:rotate .2s; }
.mp-stop__control[aria-expanded=true] .mp-stop__hint::after { rotate:180deg; }
.mp-stop__control[aria-expanded=true] .mp-stop__icon { background:var(--mp-turquoise); }
.mp-stop--finish .mp-stop__icon { background:var(--mp-gold) !important; }
.mp-stop__control .mp-stop__icon::before { line-height:1.6; }
.mp-stop { justify-items:center; align-content:start; }
.mp-stops { margin-top:clamp(2rem,1rem + 3vw,4rem) !important; }
.mp-stage-inline { margin-top:.75rem; padding:1rem 1.15rem; background:#fff; border:2px solid var(--mp-ink); border-radius:var(--mp-r-m); font-size:1rem; }
.mp-journey-panel { margin-top:clamp(2rem,1rem + 2vw,3rem); background:#fff; border:2.5px solid var(--mp-ink); border-radius:var(--mp-r-l); box-shadow:var(--mp-shadow); padding:clamp(1.5rem,1rem + 2vw,2.5rem); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.5rem 2rem; align-items:center; }
.mp-journey-panel__num { font-family:var(--mp-font-display); font-weight:800; font-size:clamp(3rem,2rem + 3vw,5rem); line-height:.8; color:var(--mp-purple); }
.mp-journey-panel h3 { font-size:var(--mp-step-2); text-transform:uppercase; }
.mp-journey-panel p { margin-top:.5rem; max-width:62ch; }
.mp-pot__value { min-width:3ch; }
.mp-pot__controls { align-items:center; }
.mp-step-btn svg { width:18px; height:18px; }
.mp-money__reset { gap:.6rem; }
.mp-money__reset svg { width:20px; height:20px; }
@media (min-width:901px) {
  .mp-stage-inline { display:none !important; }
  .mp-stop { display:grid !important; }
}
@media (min-width:821px) and (max-width:900px) {
  .mp-section-head { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); }
}
@media (max-width:960px) { .mp-split--activity { grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px) {
  .mp-journey-panel { display:none !important; }
  .mp-stop,.mp-stop:nth-child(even) { justify-items:start; }
  .mp-stop__control { grid-column:1/-1; grid-template-columns:84px minmax(0,1fr); justify-items:start; align-items:center; text-align:left; gap:1.25rem; width:100%; }
  .mp-stop__control .mp-stop__icon { grid-row:auto; }
  .mp-stop__name { max-width:none; }
  .mp-stop__text { justify-items:start; }
  .mp-stop__modules { margin-top:.35rem !important; }
  .mp-stage-inline { grid-column:2; }
  .mp-stop::after { z-index:0; pointer-events:none; }
  .mp-stop__control { position:relative; z-index:1; }
}
@media (max-width:860px) {
  .mp-hero__scene { position:relative; inset:auto; z-index:0; height:clamp(300px,70vw,440px); margin-top:2rem; }
  .mp-hero__figure { position:absolute !important; }
  .mp-hero__mascot { right:50%; translate:50% 0; bottom:-2.5rem; width:clamp(200px,58vw,320px) !important; }
  .mp-hero__tag { right:auto; left:50%; translate:-50% 0; rotate:-4deg; bottom:clamp(250px,66vw,380px); }
  .mp-hero__float--coin { left:auto; right:7%; top:30%; bottom:auto; }
  .mp-hero__float--notebook { left:5%; bottom:12%; }
  .mp-star--1 { left:8%; top:52%; bottom:auto; }
  .mp-star--2 { right:19%; top:38%; bottom:auto; }
  .mp-star--4 { left:72%; top:4%; bottom:auto; }
  .mp-star--5 { left:22%; top:22%; bottom:auto; }
  .mp-star--6 { right:6%; top:46%; bottom:auto; }
  .mp-star--7 { left:auto; right:14%; top:62%; bottom:auto; }
  .mp-twinkle-toggle { left:auto; right:.75rem; bottom:3.25rem; width:auto; height:auto; padding:.35rem .85rem; }
  .mp-twinkle-toggle__text { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; }
}
@media (max-width:700px) { .mp-cta__jar,.mp-cta__spark { display:none; } }
@media (prefers-reduced-motion:no-preference) {
  .mp-journey-panel:not([hidden]) { animation:mp-panel-in 320ms var(--mp-ease); }
}
@keyframes mp-panel-in { from { opacity:0; transform:translateY(8px); } }
.mp-faq__item { width:100%; }
.mp-hero__label p { line-height:1.6; }
@media (min-width:901px) {
  .mp-stop__control { width:100%; }
  .mp-stop__text { display:block; }
  .mp-stop__name { display:inline; }
}
/* Divi button wrappers must not add a second margin inside the founder stack. */
.mp-founder__text > .et_pb_module + .et_pb_module { margin-top:1.25rem !important; }
.mp-founder__text .et_pb_button { margin-top:0 !important; }
.mp-founder__portrait { max-width:100%; }
@media (max-width:820px) {
  .mp-founder__portrait { width:min(100%,260px) !important; max-width:260px !important; }
}
.mp-how .mp-h2 h2 { max-width:none; }
.mp-stop__modules ul { line-height:1.6; }
html:has(.mp-hero) { overflow-x:clip; }
@media (max-width:380px) {
  .mp-pot { grid-template-columns:44px minmax(0,1fr) auto; column-gap:.5rem; padding:.75rem .6rem; }
  .mp-pot__jar { width:44px; }
  .mp-pot__name { font-size:.9375rem; }
  .mp-pot__controls { gap:4px; }
  .mp-step-btn { width:44px; height:44px; }
}

.mp-founder__text > .et_pb_button_module_wrapper { align-self:flex-start; width:auto; }
.mp-founder__text .et_pb_button { align-self:flex-start; }
.mp-panel__jars { display:flex !important; flex-direction:row !important; align-items:flex-end; gap:clamp(.5rem,1vw,1rem) !important; }
.mp-feature-jar { display:grid !important; justify-items:center; gap:.5rem !important; }
.mp-feature-jar__image img { width:clamp(72px,7vw,108px) !important; height:auto; }
.mp-feature-jar__label p { margin:0 !important; font-size:var(--mp-step--1) !important; font-weight:700; color:var(--mp-cream) !important; }
.mp-feature-jar:nth-child(1) { rotate:-5deg; }
.mp-feature-jar:nth-child(2) { margin-bottom:1.25rem !important; }
.mp-feature-jar:nth-child(3) { rotate:6deg; }


/* Minipreneurs 1.2.1: tested against the live Divi 5 module markup. */
.mp-section .et_pb_text,
.mp-section .et_pb_text_inner { font-weight:400; }
/* Divi sets text-align:start on Text modules, so parent alignment cannot inherit. */
.et_pb_section.mp-hero .mp-hero__label,
.et_pb_section.mp-hero .mp-hero__title,
.et_pb_section.mp-hero .mp-hero__copy,
.et_pb_section.mp-hero .mp-hero__label .et_pb_text_inner,
.et_pb_section.mp-hero .mp-hero__title .et_pb_text_inner,
.et_pb_section.mp-hero .mp-hero__copy .et_pb_text_inner,
.et_pb_section.mp-hero .mp-hero__title h1,
.et_pb_section.mp-hero .mp-hero__copy p,
.mp-section .mp-cta__title,
.mp-section .mp-cta__title .et_pb_text_inner,
.mp-section .mp-cta__title h2,
.mp-section .mp-cta__copy,
.mp-section .mp-cta__copy .et_pb_text_inner,
.mp-section .mp-cta__copy p { text-align:center !important; }
/* Native Image wrappers stretch across their module; centre the art inside the dot. */
.mp-section .mp-stop__icon .et_pb_image_wrap { display:grid !important; place-items:center; width:100% !important; }
.mp-section .mp-stop__icon img { margin-inline:auto !important; }
.mp-section .mp-feature-jar__label,
.mp-section .mp-feature-jar__label p { text-align:center !important; }
/* Divi clips the rotated image to its unrotated wrapper unless both are visible. */
.mp-section .mp-how__thumb,
.mp-section .mp-how__thumb .et_pb_image_wrap { overflow:visible !important; }
/* Module wrapper overrides can otherwise prevent flex auto margins from taking effect. */
.mp-section .mp-panel__modules { margin-top:auto !important; }
.mp-section .mp-panel--feature .mp-panel__modules { margin-top:1.25rem !important; }