/* =========================================================
   Mahjong Matchmaker — Marketing Site
   Layered on top of colors_and_type.css. Nothing here invents
   new colors; we only compose the tokens.
   ========================================================= */

:root {
  --page-max: 1240px;
  --page-gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(72px, 9vw, 136px);
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--mm-white) !important;
  color: var(--mm-near-black) !important;
  overflow-x: hidden;
}
/* Force light-mode rendering regardless of system preference — the brand is hot pink, not navy by default */
:root {
  color-scheme: light;
  --mm-background: var(--mm-hot-pink);
  --mm-card: var(--mm-white);
  --mm-primary: var(--mm-near-black);
  --mm-secondary: var(--mm-warm-gray);
  --mm-border: var(--mm-frost);
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; display: block; }

/* NAV MODE — navy overlay when in dark hero mode */
body[data-mode="navy"] { background: var(--mm-deep-navy); color: #fff; }
body[data-mode="navy"] .inv-surface { background: var(--mm-elevated-navy); color: #fff; }

/* ------- shared page shell ------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

section { position: relative; }

.section-pad { padding-block: var(--section-y); }

/* Eyebrow — uppercase tracked label. */
.eyebrow {
  font-family: var(--mm-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-warm-gray);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow.on-pink { color: rgba(255,255,255,0.92); }
.eyebrow.on-navy { color: #CFD6E3; }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.7;
}

/* Display headline */
.headline {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--mm-near-black);
  margin: 0;
  text-wrap: balance;
}
.headline .italic { font-style: italic; font-weight: 400; }

.sec-title {
  font-family: var(--mm-font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--mm-near-black);
}
.pink-band .sec-title, .events .sec-title, .about .sec-title, .navy-band .sec-title, .founding .sec-title { color: #fff; }
.features .feat__title, .features .sec-title, .how .sec-title, .pricing .sec-title, .faq .sec-title, .teachers .sec-title, .social .sec-title { color: var(--mm-near-black); }
.features .lede, .how .lede, .pricing .lede, .faq .lede, .teachers .lede, .social .lede { color: var(--mm-warm-gray); }
.features .eyebrow, .how .eyebrow, .pricing .eyebrow, .faq .eyebrow, .teachers .eyebrow, .social .eyebrow { color: var(--mm-warm-gray); }
.features .step__title, .features .step__body, .how .step__title, .how .step__body { color: inherit; }
.features .feat__body { color: var(--mm-warm-gray); }

.lede {
  font-family: var(--mm-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mm-warm-gray);
  max-width: 52ch;
  margin: 0;
}
.on-pink .lede, .lede.on-pink { color: rgba(255,255,255,0.92); }
.on-navy .lede, .lede.on-navy { color: #CFD6E3; }

/* ------- pink brand band ------- */
.pink-band { background: var(--mm-hot-pink); color: #fff; }
.navy-band { background: var(--mm-deep-navy); color: #fff; }
.cream-band { background: #FBF7F1; color: var(--mm-near-black); }
.ivory-band { background: #F6F3EE; }

/* Tile motif background — subtle engraving effect */
.tile-motif {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.11;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(255,255,255,0.6) 0.5px, transparent 1.2px),
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  mix-blend-mode: overlay;
}

/* ------- buttons (reuse tokens) ------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--mm-radius-cta);
  font-family: var(--mm-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mm-duration) var(--mm-easing),
              transform var(--mm-duration-fast) var(--mm-easing),
              color var(--mm-duration) var(--mm-easing);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn--primary { background: var(--mm-kelly-green); color: #fff; }
.btn--primary:hover { background: #009652; }
.btn--primary:active { background: #008547; transform: scale(0.98); }

.btn--ghost-light {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn--ghost-dark {
  background: transparent; color: var(--mm-near-black);
  border: 1.5px solid var(--mm-near-black);
}
.btn--ghost-dark:hover { background: var(--mm-near-black); color: #fff; }

.btn--outline-green {
  background: transparent; color: var(--mm-kelly-green);
  border: 2px solid var(--mm-kelly-green);
}
.btn--outline-green:hover { background: var(--mm-kelly-15); }

.btn--gold {
  background: var(--mm-sunflower-gold); color: #3A2A00;
  font-weight: 600;
}
.btn--gold:hover { background: #ECBA1F; }

.btn--sm { height: 40px; padding: 0 16px; font-size: 11.5px; }

/* ------- card base ------- */
.card {
  background: var(--mm-white);
  border-radius: var(--mm-radius-card);
  box-shadow: var(--mm-shadow-card);
  padding: var(--mm-space-xl);
  position: relative;
}
.card--flat { box-shadow: 0 1px 2px rgba(20,31,46,0.04); }
.card--raised { box-shadow: 0 18px 40px -20px rgba(20,31,46,0.22), 0 6px 14px rgba(20,31,46,0.06); }

/* ------- pills (inherit tokens) ------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--mm-font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; }
.pill--gold  { background: rgba(244,196,49,0.16); color: #9A7A00; }
.pill--green { background: rgba(0,166,90,0.15); color: #00874A; }
.pill--pink  { background: rgba(252,41,138,0.15); color: #C41E6A; }
.pill--gray  { background: #F1F3F6; color: #666B85; }
.pill--white { background: rgba(255,255,255,0.16); color: #fff; backdrop-filter: blur(4px); }

/* ------- nav ------- */
.mm-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--mm-hot-pink);
  color: #fff;
  transition: background var(--mm-duration) var(--mm-easing);
}
body[data-mode="navy"] .mm-nav { background: var(--mm-deep-navy); }
.mm-nav--scrolled {
  background: rgba(252, 41, 138, 0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
body[data-mode="navy"] .mm-nav--scrolled { background: rgba(13, 21, 48, 0.94); }

.mm-nav__inner {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
  padding-block: 10px;
}
.mm-nav__logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.mm-nav__logo img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.mm-nav__wordmark {
  font-family: var(--mm-font-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}

.mm-nav__links {
  display: flex; align-items: center; gap: 22px;
  flex: 1;
  font-family: var(--mm-font-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.mm-nav__links a {
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  position: relative;
  padding-block: 6px;
  transition: color var(--mm-duration) var(--mm-easing);
}
.mm-nav__links a:hover { color: #fff; }
.mm-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mm-duration) var(--mm-easing);
}
.mm-nav__links a:hover::after { transform: scaleX(1); }

.mm-nav__cta { display: flex; align-items: center; gap: 14px; }
.mm-nav__cta .btn--ghost-light { height: 40px; padding: 0 18px; font-size: 11.5px; }
.mm-nav__cta .btn--primary { height: 40px; padding: 0 18px; font-size: 11.5px; }

/* mobile nav */
.mm-nav__toggle { display: none; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 8px; }

@media (max-width: 1040px) {
  .mm-nav__links, .mm-nav__cta .btn--ghost-light { display: none; }
  .mm-nav__toggle { display: flex; }
  .mm-nav__inner { gap: 16px; }
}

/* ------- HERO (invitation card) ------- */
.hero {
  position: relative;
  background: var(--mm-hot-pink);
  color: #fff;
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 120px);
  overflow: hidden;
}
html, body { overflow-x: hidden; }
.invitation-stack { overflow: hidden; border-radius: 16px; }
body[data-mode="navy"] .hero { background: var(--mm-deep-navy); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__copy { max-width: 580px; }
.hero__copy .headline { color: #fff; font-size: clamp(44px, 6.2vw, 92px); }
body[data-mode="navy"] .hero__copy .headline { color: #fff; }

.hero__lede {
  font-family: var(--mm-font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  max-width: 48ch;
  margin: 24px 0 36px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__microproof {
  margin-top: 40px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.hero__avatars { display: flex; }
.hero__avatars .av {
  width: 36px; height: 36px; border-radius: 999px;
  border: 2px solid var(--mm-hot-pink);
  margin-left: -10px;
  background: #fff;
  display: grid; place-items: center;
  font-family: var(--mm-font-serif);
  font-size: 14px;
  color: var(--mm-near-black);
}
body[data-mode="navy"] .hero__avatars .av { border-color: var(--mm-deep-navy); }
.hero__avatars .av:first-child { margin-left: 0; }
.hero__microproof span {
  font-family: var(--mm-font-sans);
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
}

/* HERO — the signature invitation card */
.invitation {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(20,31,46,0.45),
              0 18px 30px -12px rgba(20,31,46,0.25);
  padding: 28px 28px 24px;
  position: relative;
  color: var(--mm-near-black);
  transform: rotate(-1.2deg);
  transition: transform 400ms var(--mm-easing);
  max-width: 480px;
  margin-left: auto;
  margin-right: 0;
}
.invitation:hover { transform: rotate(0deg) translateY(-2px); }

.invitation__seal {
  position: absolute;
  top: -16px; right: -16px;
  width: 64px; height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #FFDD6B, #F4C431);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #F4C431, 0 12px 24px rgba(244,196,49,0.35);
  font-family: var(--mm-font-serif);
  font-size: 28px;
  color: #6B4E00;
  line-height: 1;
  transform: rotate(10deg);
}

.invitation__ribbon {
  font-family: var(--mm-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9A7A00;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center; gap: 8px;
}
.invitation__ribbon::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--mm-sunflower-gold);
}

.invitation__title {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mm-near-black);
  margin: 0 0 4px;
}
.invitation__sub {
  font-family: var(--mm-font-sans);
  font-size: 13.5px;
  color: var(--mm-warm-gray);
  margin: 0;
}

.invitation__divider { height: 1px; background: var(--mm-frost); margin: 20px 0 18px; border: 0; }

.invitation__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.invitation__meta .k {
  font-family: var(--mm-font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mm-warm-gray); margin-bottom: 4px;
}
.invitation__meta .v {
  font-family: var(--mm-font-sans); font-size: 14.5px; color: var(--mm-near-black); font-weight: 500;
}

.invitation__host {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--mm-frost);
}
.invitation__host .av {
  width: 38px; height: 38px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mm-hot-pink), var(--mm-sunflower-gold));
  display: grid; place-items: center; color: #fff;
  font-family: var(--mm-font-serif); font-size: 16px;
}
.invitation__host .n { font-family: var(--mm-font-sans); font-size: 13.5px; font-weight: 500; color: var(--mm-near-black); }
.invitation__host .r { font-family: var(--mm-font-sans); font-size: 11.5px; color: var(--mm-warm-gray); margin-top: 2px; }

.invitation__seats {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px;
}
.invitation__seats .label {
  font-family: var(--mm-font-serif); font-size: 16px; color: var(--mm-near-black); font-weight: 500;
}
.invitation__seats .label em { color: var(--mm-kelly-green); font-style: normal; }
.invitation__seats .cta {
  height: 44px; padding: 0 22px; background: var(--mm-kelly-green); color: #fff;
  border: 0; border-radius: var(--mm-radius-cta);
  font-family: var(--mm-font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}

/* tile decorations behind invitation */
.invitation-stack {
  position: relative;
  padding: 20px 0;
}
.invitation-stack::before,
.invitation-stack::after {
  content: "";
  position: absolute;
  border-radius: 16px;
  background: #fff;
  opacity: 0.18;
  pointer-events: none;
}
.invitation-stack::before {
  inset: 10px -10px 30px 30px;
  transform: rotate(3deg);
}
.invitation-stack::after {
  inset: 20px 10px 20px -20px;
  transform: rotate(-5deg);
  opacity: 0.12;
}

/* HERO — promo pill above the headline */
.hero__promo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mm-font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 28px;
}
.hero__promo b {
  background: var(--mm-sunflower-gold);
  color: #3A2A00;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ------- HOW IT WORKS (editorial) ------- */
.how {
  background: var(--mm-white);
  color: var(--mm-near-black);
}
.how__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 860px) { .how__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; } }

.how__steps.editorial {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.how__steps.stacked {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--mm-frost);
}
.how__steps.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .how__steps.editorial { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .how__steps.editorial { grid-template-columns: 1fr; }
}

.step {
  display: flex; flex-direction: column; gap: 14px;
}
.step__num {
  font-family: var(--mm-font-serif);
  font-size: 52px;
  font-weight: 400;
  color: var(--mm-hot-pink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.step__rule { height: 1px; background: var(--mm-frost); margin: 4px 0 6px; }
.step__title {
  font-family: var(--mm-font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--mm-near-black);
  letter-spacing: -0.005em;
  margin: 0;
}
.step__body {
  font-family: var(--mm-font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mm-warm-gray);
  margin: 0;
}

.step--stacked {
  display: grid;
  grid-template-columns: 80px 240px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--mm-frost);
  align-items: start;
}
@media (max-width: 720px) { .step--stacked { grid-template-columns: 60px 1fr; } .step--stacked .step__body { grid-column: 1 / -1; } }

.step--card {
  background: #fff;
  border: 1px solid var(--mm-frost);
  border-radius: 14px;
  padding: 28px;
  transition: transform var(--mm-duration) var(--mm-easing), box-shadow var(--mm-duration) var(--mm-easing);
}
.step--card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-card); }

/* ------- FEATURES — alternating editorial rows ------- */
.features { background: #FBF7F1; }
.feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 80px);
}
.feat-row:not(:last-child) { border-bottom: 1px solid rgba(20,31,46,0.08); }
.feat-row--reverse { direction: rtl; }
.feat-row--reverse > * { direction: ltr; }
@media (max-width: 860px) { .feat-row, .feat-row--reverse { grid-template-columns: 1fr; direction: ltr; } }

.feat__copy .eyebrow { color: var(--mm-hot-pink); }
.feat__title {
  font-family: var(--mm-font-serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.008em;
  margin: 10px 0 14px;
}
.feat__body {
  font-family: var(--mm-font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--mm-warm-gray);
  max-width: 44ch;
  margin-bottom: 24px;
}
.feat__bullets {
  list-style: none;
  padding: 0; margin: 0 0 24px;
  display: grid; gap: 10px;
}
.feat__bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--mm-font-sans);
  font-size: 14px;
  color: var(--mm-near-black);
}
.feat__bullets svg { width: 16px; height: 16px; color: var(--mm-kelly-green); flex-shrink: 0; margin-top: 2px; }
.feat__link {
  font-family: var(--mm-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-kelly-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.feat__link:hover { gap: 12px; }

/* ------- feature "visuals" — embedded product glimpses ------- */
.visual {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #F4F0EA);
  box-shadow: 0 40px 80px -30px rgba(20,31,46,0.25), 0 10px 20px -10px rgba(20,31,46,0.12);
  overflow: hidden;
  isolation: isolate;
}

/* Player-profile visual */
.visual--profile { background: linear-gradient(160deg, #FFF2F7 0%, #FFE1EC 100%); }
.visual--matchflow { background: linear-gradient(160deg, #0D1530 0%, #1F2948 100%); color: #fff; }
.visual--events { background: linear-gradient(160deg, #FFF7E1 0%, #FBEDBD 100%); }
.visual--teachers { background: linear-gradient(160deg, #E8FAF1 0%, #C9F0DB 100%); }
.visual--search { background: linear-gradient(160deg, #FBF7F1 0%, #ECE6DC 100%); }

.visual__art-note {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mm-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-warm-gray);
}
.visual--matchflow .visual__art-note { background: rgba(255,255,255,0.2); color: #fff; }

/* ------- TEACHERS ------- */
.teachers { background: var(--mm-white); }
.teachers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
@media (max-width: 960px) { .teachers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .teachers__grid { grid-template-columns: 1fr; } }

.teacher-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--mm-frost);
  transition: transform var(--mm-duration) var(--mm-easing), box-shadow var(--mm-duration) var(--mm-easing);
  display: flex; flex-direction: column;
}
.teacher-card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-card); }

.teacher-card__photo {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.teacher-card__tag {
  position: absolute; top: 12px; left: 12px;
  z-index: 2;
}
.teacher-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.teacher-card__name {
  font-family: var(--mm-font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--mm-near-black);
  letter-spacing: -0.005em;
}
.teacher-card__role {
  font-family: var(--mm-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-warm-gray);
  margin-top: -4px;
}
.teacher-card__bio {
  font-family: var(--mm-font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mm-warm-gray);
}
.teacher-card__meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--mm-frost);
  font-family: var(--mm-font-sans);
  font-size: 12.5px;
  color: var(--mm-near-black);
}
.teacher-card__meta .rating { font-weight: 500; }
.teacher-card__meta .rating span { color: var(--mm-sunflower-gold); margin-right: 4px; }
.teacher-card__price {
  font-family: var(--mm-font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--mm-near-black);
}
.teacher-card__price small { font-family: var(--mm-font-sans); font-size: 11px; color: var(--mm-warm-gray); font-weight: 400; margin-left: 2px; }
.teacher-card__cta {
  margin-top: 14px;
  width: 100%;
  height: 44px;
  background: var(--mm-kelly-green); color: #fff;
  border: 0; border-radius: var(--mm-radius-cta);
  font-family: var(--mm-font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.teacher-card__cta:hover { background: #009652; }

/* ------- EVENTS ------- */
.events {
  background: var(--mm-hot-pink);
  color: #fff;
  position: relative;
}
.events__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  margin-top: 48px;
}
@media (max-width: 860px) { .events__grid { grid-template-columns: 1fr; } }

.event-card {
  background: #fff;
  color: var(--mm-near-black);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 3px 12px rgba(20,31,46,0.08);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: hidden;
}
.event-card--feature {
  grid-row: span 2;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.event-card--feature .event-card__art {
  height: 240px;
  background: linear-gradient(135deg, #FFE1EC, #FBEDBD);
  position: relative;
}
.event-card--feature .event-card__body { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

.event-card__date {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mm-font-serif);
}
.event-card__date .day { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.event-card__date .mo { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--mm-font-sans); color: var(--mm-warm-gray); }

.event-card__title {
  font-family: var(--mm-font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--mm-near-black);
}
.event-card--feature .event-card__title { font-size: 32px; }

.event-card__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  font-family: var(--mm-font-sans);
  font-size: 13px;
}
.event-card__details .k {
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mm-warm-gray); margin-bottom: 2px;
}
.event-card__details .v { color: var(--mm-near-black); font-weight: 500; }

.event-card__foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--mm-frost);
  font-family: var(--mm-font-sans);
  font-size: 13px;
}
.event-card__seats em { color: var(--mm-kelly-green); font-style: normal; font-weight: 500; }

.event-card__cta {
  height: 40px; padding: 0 16px;
  background: var(--mm-kelly-green); color: #fff;
  border: 0; border-radius: var(--mm-radius-cta);
  font-family: var(--mm-font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}

/* ------- SEARCH/FILTER INTERFACE ------- */
.search-demo {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 18px 40px -20px rgba(20,31,46,0.22), 0 4px 10px rgba(20,31,46,0.04);
}
.search-demo__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: #F6F3EE;
  border-radius: 12px;
}
.search-demo__bar svg { width: 18px; height: 18px; color: var(--mm-warm-gray); }
.search-demo__bar .q { font-family: var(--mm-font-sans); font-size: 15px; color: var(--mm-near-black); flex: 1; }
.search-demo__bar .loc { font-family: var(--mm-font-sans); font-size: 12px; color: var(--mm-warm-gray); padding-left: 12px; border-left: 1px solid var(--mm-frost); }

.search-demo__chips {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 4px 4px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--mm-frost);
  font-family: var(--mm-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--mm-near-black);
  cursor: pointer;
}
.chip--active {
  background: var(--mm-kelly-green); color: #fff; border-color: var(--mm-kelly-green);
}
.chip--active svg { color: #fff; }
.chip svg { width: 12px; height: 12px; color: var(--mm-warm-gray); }

/* ------- SOCIAL PROOF ------- */
.social { background: #F6F3EE; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 80px;
  border-top: 1px solid rgba(20,31,46,0.12);
  border-bottom: 1px solid rgba(20,31,46,0.12);
}
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
  padding: 36px 28px;
  border-right: 1px solid rgba(20,31,46,0.08);
}
.stat:last-child { border-right: 0; }
@media (max-width: 760px) { .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(20,31,46,0.08); } }
.stat__num {
  font-family: var(--mm-font-serif);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mm-near-black);
  margin-bottom: 8px;
}
.stat__num .accent { color: var(--mm-hot-pink); }
.stat__lbl {
  font-family: var(--mm-font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-warm-gray);
  font-weight: 500;
}

.testimonials {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
}
@media (max-width: 860px) { .testimonials { grid-template-columns: 1fr; } }

.quote {
  background: #fff;
  border-radius: 14px;
  padding: 40px 36px 32px;
  position: relative;
  box-shadow: var(--mm-shadow-card);
}
.quote--big { grid-row: span 2; padding: 56px 48px 40px; }
.quote__glyph {
  font-family: var(--mm-font-serif);
  font-size: 72px;
  line-height: 0.6;
  color: var(--mm-sunflower-gold);
  margin-bottom: -10px;
}
.quote p {
  font-family: var(--mm-font-serif);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--mm-near-black);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 24px;
}
.quote--big p { font-size: 28px; }
.quote__attr {
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--mm-frost);
}
.quote__avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mm-hot-pink), var(--mm-sunflower-gold));
  display: grid; place-items: center; color: #fff;
  font-family: var(--mm-font-serif); font-size: 18px;
}
.quote__name {
  font-family: var(--mm-font-sans); font-size: 14px; font-weight: 500; color: var(--mm-near-black);
}
.quote__meta {
  font-family: var(--mm-font-sans); font-size: 12px; color: var(--mm-warm-gray); margin-top: 2px;
}

/* ------- FOUNDING MEMBER ------- */
.founding {
  background: linear-gradient(180deg, #0D1530 0%, #1A2544 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.founding::before {
  content: "";
  position: absolute;
  top: -120px; right: -140px;
  width: 520px; height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(244,196,49,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.founding__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) { .founding__inner { grid-template-columns: 1fr; gap: 40px; } }

.founding__title {
  font-family: var(--mm-font-serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-top: 16px;
  color: #fff;
}
.founding__title .gold { color: var(--mm-sunflower-gold); }
.founding__lede {
  font-family: var(--mm-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: #CFD6E3;
  max-width: 48ch;
  margin: 20px 0 32px;
}

.founding__counter {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(244,196,49,0.4);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.founding__counter-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mm-font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CFD6E3;
}
.founding__counter-num {
  font-family: var(--mm-font-serif);
  font-size: 44px;
  font-weight: 500;
  color: var(--mm-sunflower-gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.founding__counter-num span { color: rgba(244,196,49,0.5); font-size: 22px; margin-left: 4px; }

.founding__progress {
  position: relative;
  height: 6px;
  background: rgba(244,196,49,0.2);
  border-radius: 999px;
  overflow: hidden;
}
.founding__progress span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--mm-sunflower-gold);
  border-radius: 999px;
  animation: progressIn 1400ms var(--mm-easing) forwards;
}
@keyframes progressIn { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

.founding__benefits { margin-top: 24px; }
.founding__benefits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.founding__benefits li {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: var(--mm-font-sans);
  font-size: 15px;
  color: #fff;
  line-height: 1.4;
}
.founding__benefits svg { width: 18px; height: 18px; color: var(--mm-sunflower-gold); flex-shrink: 0; margin-top: 2px; }

.founding__cta-row { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* ------- PRICING ------- */
.pricing { background: var(--mm-white); }
.pricing__head { text-align: center; max-width: 620px; margin: 0 auto 64px; }
.pricing__head .lede { margin-inline: auto; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.price-card {
  background: #fff;
  border: 1px solid var(--mm-frost);
  border-radius: 14px;
  padding: 32px 30px 30px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform var(--mm-duration) var(--mm-easing);
}
.price-card:hover { transform: translateY(-2px); }
.price-card--featured {
  border: 2px solid var(--mm-sunflower-gold);
  background: #FFFBF0;
  box-shadow: 0 18px 40px -20px rgba(244,196,49,0.4);
}
.price-card--featured::before {
  content: "★ Founding Member";
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--mm-sunflower-gold);
  color: #3A2A00;
  font-family: var(--mm-font-sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card__name {
  font-family: var(--mm-font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--mm-near-black);
}
.price-card__tag {
  font-family: var(--mm-font-sans);
  font-size: 13px;
  color: var(--mm-warm-gray);
  line-height: 1.45;
}
.price-card__price {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--mm-font-serif);
  margin-top: 4px;
}
.price-card__price .num { font-size: 52px; font-weight: 500; line-height: 1; color: var(--mm-near-black); letter-spacing: -0.02em; }
.price-card__price .unit { font-family: var(--mm-font-sans); font-size: 14px; color: var(--mm-warm-gray); font-weight: 400; }
.price-card__divider { height: 1px; background: var(--mm-frost); border: 0; }
.price-card__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; }
.price-card__features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--mm-font-sans); font-size: 14px; color: var(--mm-near-black); line-height: 1.4;
}
.price-card__features svg { width: 15px; height: 15px; color: var(--mm-kelly-green); flex-shrink: 0; margin-top: 3px; }

/* ------- FAQ ------- */
.faq { background: #FBF7F1; }
.faq__grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; gap: 32px; } }

.faq__list { border-top: 1px solid rgba(20,31,46,0.14); }
.faq__item { border-bottom: 1px solid rgba(20,31,46,0.14); }
.faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--mm-font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--mm-near-black);
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.faq__q-icon {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--mm-frost);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform var(--mm-duration) var(--mm-easing), background var(--mm-duration), border-color var(--mm-duration);
}
.faq__q-icon svg { width: 12px; height: 12px; color: var(--mm-near-black); transition: transform var(--mm-duration) var(--mm-easing); }
.faq__item.open .faq__q-icon { background: var(--mm-kelly-green); border-color: var(--mm-kelly-green); }
.faq__item.open .faq__q-icon svg { color: #fff; transform: rotate(45deg); }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--mm-duration-slow) var(--mm-easing);
}
.faq__item.open .faq__a { max-height: 400px; }
.faq__a-body {
  padding: 0 0 28px;
  font-family: var(--mm-font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--mm-warm-gray);
  max-width: 60ch;
}

/* ------- ABOUT ------- */
.about {
  background: var(--mm-hot-pink);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } }

.about__title { color: #fff; }
.about__body {
  font-family: var(--mm-font-serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  font-style: italic;
  font-weight: 400;
  max-width: 46ch;
  margin-top: 24px;
}
.about__body + .about__body { margin-top: 20px; font-style: normal; font-family: var(--mm-font-sans); font-size: 15.5px; color: rgba(255,255,255,0.85); line-height: 1.55; }

.about__card {
  background: #fff;
  color: var(--mm-near-black);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 30px 60px -30px rgba(20,31,46,0.4);
  transform: rotate(1.5deg);
}
.about__card h3 {
  font-family: var(--mm-font-serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
}
.about__card p {
  font-family: var(--mm-font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mm-warm-gray);
  margin-bottom: 18px;
}
.about__card .signature {
  font-family: var(--mm-font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--mm-hot-pink);
  margin-top: 8px;
}

/* ------- FOOTER ------- */
.footer {
  background: var(--mm-deep-navy);
  color: #CFD6E3;
  padding: 80px 0 48px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand .logo-row { display: flex; align-items: center; gap: 12px; }
.footer__brand .logo-row img { width: 40px; height: 40px; border-radius: 10px; }
.footer__brand .wordmark {
  font-family: var(--mm-font-serif);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
.footer__brand .tag {
  font-family: var(--mm-font-serif);
  font-style: italic;
  font-size: 18px;
  color: #CFD6E3;
  max-width: 28ch;
}

.footer__col h4 {
  font-family: var(--mm-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-sunflower-gold);
  margin: 0 0 18px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer__col a {
  font-family: var(--mm-font-sans);
  font-size: 14px;
  color: #CFD6E3;
  text-decoration: none;
  transition: color var(--mm-duration);
}
.footer__col a:hover { color: #fff; }

.footer__newsletter h4 { margin-bottom: 14px; }
.footer__newsletter p { font-family: var(--mm-font-sans); font-size: 13px; color: #A6B3CC; line-height: 1.5; margin: 0 0 14px; }
.footer__newsletter form {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.footer__newsletter input {
  flex: 1; min-width: 160px;
  height: 44px; padding: 0 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: #fff;
  font-family: var(--mm-font-sans); font-size: 14px;
}
.footer__newsletter input::placeholder { color: #A6B3CC; }
.footer__newsletter input:focus { outline: none; border-color: var(--mm-sunflower-gold); }
.footer__newsletter button {
  height: 44px; padding: 0 18px;
  background: var(--mm-sunflower-gold); color: #3A2A00;
  border: 0; border-radius: var(--mm-radius-cta);
  font-family: var(--mm-font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
  padding-top: 32px;
  font-family: var(--mm-font-sans);
  font-size: 12.5px;
  color: #A6B3CC;
}
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  display: grid; place-items: center;
  color: #CFD6E3;
  transition: background var(--mm-duration), color var(--mm-duration);
}
.footer__social a:hover { background: var(--mm-sunflower-gold); color: #3A2A00; border-color: transparent; }

.footer__legal { display: flex; gap: 24px; }
.footer__legal a { color: #A6B3CC; text-decoration: none; }
.footer__legal a:hover { color: #fff; }

/* ------- tweaks panel ------- */
.tweaks {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 300px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px -10px rgba(20,31,46,0.3), 0 4px 10px rgba(20,31,46,0.1);
  padding: 18px 20px 20px;
  z-index: 100;
  color: var(--mm-near-black);
  font-family: var(--mm-font-sans);
  font-size: 13px;
}
.tweaks__title {
  font-family: var(--mm-font-serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
}
.tweaks__subtitle {
  font-size: 11px; color: var(--mm-warm-gray);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 16px;
}
.tweaks__group { margin-bottom: 14px; }
.tweaks__group:last-child { margin-bottom: 0; }
.tweaks__label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mm-warm-gray);
  margin-bottom: 8px; display: block;
}
.tweaks__options { display: flex; flex-wrap: wrap; gap: 6px; }
.tweaks__opt {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--mm-frost);
  background: #fff;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mm-near-black);
  cursor: pointer;
  transition: all 160ms var(--mm-easing);
}
.tweaks__opt:hover { border-color: var(--mm-kelly-green); }
.tweaks__opt--active {
  background: var(--mm-kelly-green); color: #fff; border-color: var(--mm-kelly-green);
}
.tweaks__toggle {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--mm-near-black); color: #fff;
  border: 0; cursor: pointer;
  box-shadow: 0 8px 20px rgba(20,31,46,0.3);
  z-index: 99;
  display: grid; place-items: center;
}

/* ------- reveal on scroll ------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--mm-easing), transform 700ms var(--mm-easing);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

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

/* ------- photo placeholders (art-directed gradients) ------- */
.photo {
  position: relative;
  background: linear-gradient(135deg, var(--ph-a, #E8D5B7), var(--ph-b, #C9A77C));
  overflow: hidden;
}
.photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.3), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.12), transparent 60%);
}
.photo__caption {
  position: absolute;
  bottom: 10px; left: 10px;
  font-family: var(--mm-font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 4px 8px;
  background: rgba(20,31,46,0.4);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  z-index: 2;
}

/* subtle mm tile pattern for hero */
.mm-tile-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 72px 108px;
  opacity: 1;
  mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 70%);
}

/* =========================================================
   TERMS OF SERVICE
   An editorial long-form layout: hot-pink gutter, cream card,
   sticky TOC on the left, document on the right.
   Kept quiet on purpose; legal deserves room to breathe.
   ========================================================= */
.tos {
  background: var(--mm-hot-pink);
  color: var(--mm-near-black);
  scroll-margin-top: 80px;
}
.tos .container { position: relative; }

.tos__header {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
  color: #fff;
}
.tos__header .eyebrow { color: rgba(255,255,255,0.78); }
.tos__title {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 10px 0 18px;
  color: #fff;
}
.tos__intro {
  font-family: var(--mm-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin: 0 auto;
  max-width: 640px;
  text-wrap: pretty;
}
.tos__meta {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.28);
  font-family: var(--mm-font-sans);
}
.tos__meta > div { text-align: left; }
.tos__meta dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.tos__meta dd {
  margin: 4px 0 0;
  font-size: 13px;
  color: #fff;
  font-weight: 500;
}

/* Mobile jump menu — hidden on desktop */
.tos__jump {
  display: none;
  margin: 0 0 24px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
.tos__jumpBtn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--mm-font-serif);
  font-size: 20px;
  color: var(--mm-near-black);
  text-align: left;
}
.tos__jumpBtn:hover { background: #fafaf8; }
.tos__jumpList {
  list-style: none;
  margin: 0;
  padding: 8px 0 16px;
  border-top: 1px solid var(--mm-frost);
  max-height: 60vh;
  overflow-y: auto;
}
.tos__jumpList li { margin: 0; }
.tos__jumpList button {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mm-font-sans);
  font-size: 14px;
  color: var(--mm-near-black);
  text-align: left;
  line-height: 1.4;
}
.tos__jumpList button:hover { background: #faf7f4; color: var(--mm-accent); }
.tos__jumpNum {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mm-warm-gray);
  min-width: 22px;
}

/* Two-column layout — TOC + document */
.tos__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 72px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}

.tos__toc {
  position: sticky;
  top: 96px;
  align-self: start;
  color: #fff;
  font-family: var(--mm-font-sans);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
}
.tos__toc::-webkit-scrollbar { width: 4px; }
.tos__toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }
.tos__tocLabel {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.tos__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tos;
}
.tos__toc li { margin: 0; }
.tos__toc a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  transition: color 160ms ease;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
}
.tos__toc a:hover { color: #fff; }
.tos__toc li.is-active a {
  color: #fff;
  border-left-color: var(--mm-highlight);
  font-weight: 500;
}
.tos__toc li.is-active .tos__tocNum { color: var(--mm-highlight); }
.tos__tocNum {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.tos__tocTitle { flex: 1; text-wrap: pretty; }

/* The document — a single long cream card */
.tos__doc {
  background: #FBF7F2;
  border-radius: 14px;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 80px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
  color: var(--mm-near-black);
}

.tos__section { padding: 28px 0; border-bottom: 1px solid rgba(13,21,48,0.08); scroll-margin-top: 96px; }
.tos__section:first-of-type { padding-top: 0; }
.tos__section:last-of-type { border-bottom: 0; padding-bottom: 16px; }

.tos__sectionHead {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-bottom: 18px;
}
.tos__num {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: 34px;
  color: var(--mm-hot-pink);
  line-height: 1;
  min-width: 54px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tos__h {
  font-family: var(--mm-font-serif);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  margin: 0;
  color: var(--mm-near-black);
  letter-spacing: -0.005em;
  flex: 1;
  text-wrap: balance;
}

.tos__body { padding-left: 72px; }
@media (max-width: 720px) { .tos__body { padding-left: 0; } }

.tos__p {
  font-family: var(--mm-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: #2a3247;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.tos__p:last-child { margin-bottom: 0; }
.tos__lead {
  font-weight: 600;
  color: var(--mm-near-black);
}
.tos__p--caps {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: #3a4258;
  padding: 16px 20px;
  background: #fff;
  border-left: 3px solid var(--mm-near-black);
  border-radius: 0 12px 12px 0;
  margin-bottom: 16px;
}
.tos__callout {
  font-family: var(--mm-font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-near-black);
  padding: 18px 22px;
  background: rgba(244, 196, 49, 0.14);
  border-left: 3px solid var(--mm-highlight);
  border-radius: 0 12px 12px 0;
  margin: 4px 0 16px;
  text-wrap: pretty;
}
.tos__list {
  margin: 0 0 14px;
  padding-left: 20px;
  color: #2a3247;
  font-family: var(--mm-font-sans);
  font-size: 15px;
  line-height: 1.7;
}
.tos__list li { margin-bottom: 8px; padding-left: 4px; text-wrap: pretty; }
.tos__list li::marker { color: var(--mm-accent); }

.tos__contact {
  font-style: normal;
  font-family: var(--mm-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--mm-near-black);
  padding: 20px 24px;
  background: #fff;
  border-radius: 12px;
  margin-top: 4px;
}

.tos__ack { margin-top: 40px; padding-top: 36px; position: relative; }
.tos__ackRule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,21,48,0.25), transparent);
  margin-bottom: 36px;
}
.tos__ack h4 {
  font-family: var(--mm-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--mm-near-black);
}
.tos__ack p {
  font-family: var(--mm-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: #2a3247;
  margin: 0;
  text-wrap: pretty;
}
.tos__ackFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(13,21,48,0.1);
  font-family: var(--mm-font-sans);
  font-size: 12px;
  color: var(--mm-warm-gray);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
  gap: 12px;
}
.tos__backTop {
  color: var(--mm-accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tos__backTop:hover { text-decoration: underline; }

/* Tablet & mobile */
@media (max-width: 980px) {
  .tos__layout { grid-template-columns: 1fr; gap: 0; }
  .tos__toc { display: none; }
  .tos__jump { display: block; }
}

/* =========================================================
   PRIVACY POLICY — extends .tos layout with a summary card,
   a three-column data table, and grouped subheads inside
   longer sections. Lives on the same hot-pink page as Terms.
   ========================================================= */
.priv__glance {
  max-width: 1120px;
  margin: 0 auto 48px;
  background: #fff;
  border-radius: 14px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.priv__glanceHead .eyebrow { color: var(--mm-warm-gray); }
.priv__glanceHead p {
  font-family: var(--mm-font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--mm-near-black);
  margin: 10px 0 0;
  text-wrap: pretty;
}
.priv__glanceList {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
}
.priv__glanceList > div {
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(13,21,48,0.08);
}
.priv__glanceList > div:last-child,
.priv__glanceList > div:nth-last-child(2) { border-bottom: 0; padding-bottom: 0; }
.priv__glanceList dt {
  font-family: var(--mm-font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-warm-gray);
  margin-bottom: 6px;
}
.priv__glanceList dd {
  margin: 0;
  font-family: var(--mm-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mm-near-black);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .priv__glance { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .priv__glanceList { grid-template-columns: 1fr; gap: 14px; }
  .priv__glanceList > div { padding-bottom: 14px; }
  .priv__glanceList > div:nth-last-child(2) { border-bottom: 1px solid rgba(13,21,48,0.08); padding-bottom: 14px; }
}

/* Subheads inside a Privacy section — lighter than section title, heavier than lead */
.priv__subhead {
  font-family: var(--mm-font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 19px;
  line-height: 1.3;
  color: var(--mm-near-black);
  margin: 18px 0 10px;
  letter-spacing: -0.003em;
}
.priv__subhead:first-child { margin-top: 0; }

/* Data table */
.priv__tableWrap {
  margin: 6px 0 18px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(13,21,48,0.08);
  overflow-x: auto;
}
.priv__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mm-font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: #2a3247;
  min-width: 620px;
}
.priv__table thead th {
  text-align: left;
  padding: 14px 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mm-hot-pink);
}
.priv__table tbody td {
  padding: 14px 18px;
  vertical-align: top;
  border-top: 1px solid rgba(13,21,48,0.08);
  text-wrap: pretty;
}
.priv__table tbody tr:nth-child(even) td { background: #FBF7F2; }
.priv__table tbody td:first-child {
  width: 22%;
  color: var(--mm-near-black);
}
.priv__table tbody td:nth-child(2) { width: 42%; }

/* TOC cross-link footer */
.tos__tocFoot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.28);
  font-family: var(--mm-font-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tos__tocFoot a {
  color: var(--mm-highlight);
  text-decoration: none;
  font-weight: 500;
}
.tos__tocFoot a:hover { color: #fff; }

/* Avoid seam between Privacy and Terms — both are hot-pink. */
.tos + .tos { padding-top: 0; }
.tos + .tos .tos__header { padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.22); }