/* Millionaire Mentorship - website design tokens.
   Mirrors Sources/DesignSystem/MMTheme.swift so the web and the app read as one
   product. If a token changes in MMTheme.swift, change it here too. */

:root {
  /* Surfaces */
  --mm-bg: #0A0A0B;
  --mm-surface: #141416;
  --mm-surface-alt: #1E1E22;
  --mm-border: #2A2A30;

  /* Text */
  --mm-text: #F5F5F7;
  --mm-text-2: #A1A1AA;
  --mm-text-3: #6B6B73;

  /* Gold ramp (the brand accent is gold, never teal) */
  --mm-gold-highlight: #FBEFC4;
  --mm-gold-light: #F2D98B;
  --mm-gold: #D4AF37;
  --mm-gold-bright: #EDC25A;
  --mm-gold-deep: #9A7B2E;
  --mm-on-accent: #0A0A0B;

  --mm-success: #34C759;
  --mm-danger: #FF453A;

  /* Spacing + radius */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px;
  --r-sm: 8px;   --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;

  --mm-gold-fill: linear-gradient(135deg, var(--mm-gold-highlight) 0%, var(--mm-gold-light) 28%, var(--mm-gold) 62%, var(--mm-gold-deep) 100%);
  --mm-gold-edge: linear-gradient(135deg, rgba(251,239,196,.85), rgba(212,175,55,.55) 55%, rgba(154,123,46,.35));
  --mm-glow: rgba(212,175,55,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Mobile background video ----------
   The app's signed-out landing (WelcomeView) plays MMBackground.mp4 aspect-filled
   under a heavy black scrim. This is the same treatment on the web, MOBILE ONLY.

   Mobile only for three reasons, all of them real:
   - the source is a near-square 1242x1080 clip, so a wide desktop viewport crops it
     into a letterboxed strip with nothing in frame,
   - a 2.3 MB autoplaying video is a rude thing to serve a desktop visitor who did
     not ask for it,
   - phones are where an invite link is actually opened.

   Nothing here is fetched on desktop: the poster lives inside the media query (a
   background-image in a non-matching query is never requested) and the <video>
   element is injected by mm-bg.js only when the query matches. */

.mm-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--mm-bg) center / cover no-repeat;
  pointer-events: none;
  contain: layout paint style;
}

/* Desktop gets a still: the summit at night from the app's own artwork. Two sizes
   rather than image-set(), so a laptop never downloads the 2400px file and no
   browser downloads both.
   Landing only: a fixed photo behind a long legal document means the body copy
   eventually crosses the lit summit, and those two pages have to stay readable
   above everything else. */
@media (min-width: 768px) {
  body.landing .mm-bg { background-image: url("/assets/img/hero-desktop-1400.jpg"); }
  body:not(.landing) .mm-bg { display: none; }
}
@media (min-width: 1500px) {
  body.landing .mm-bg { background-image: url("/assets/img/hero-desktop.jpg"); }
}

.mm-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* aspect fill, same as AVLayerVideoGravity.resizeAspectFill */
  object-position: center;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
/* Faded in by mm-bg.js on the first painted frame, never on `loadeddata`, so the
   poster is never swapped for a black rectangle. */
.mm-bg video.playing { opacity: 1; }

/* Scrim. Mirrors WelcomeView's 0.25 -> 0.45 -> 0.92 black gradient, extended for a
   page that scrolls. Without this the bright sky in the clip eats white body copy. */
.mm-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,11,.30) 0%,
    rgba(10,10,11,.55) 30%,
    rgba(10,10,11,.88) 62%,
    rgba(10,10,11,.97) 100%);
}

@media (max-width: 767px) {
  .mm-bg {
    display: block;
    background-image: url("/assets/video/mm-bg-poster.jpg");
  }
  /* Surfaces go translucent so the motion reads through the page rather than
     stopping dead at the first card. */
  .card { background: rgba(20,20,22,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .card--lit {
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(212,175,55,.12), transparent 60%),
      rgba(20,20,22,.74);
  }
  .field, .link-row { background: rgba(30,30,34,.7); }
  .site-foot { border-top-color: rgba(255,255,255,.10); }
}

/* Reduce Motion gets the poster and nothing else. mm-bg.js never inserts the video
   in that case, so this is belt and braces for a mid-session preference change. */
@media (prefers-reduced-motion: reduce) {
  .mm-bg video { display: none; }
}

/* Ambient gold bloom behind the whole page, same idea as the app's hero backdrop. */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(212,175,55,.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

a { color: var(--mm-gold-bright); text-decoration: none; }
a:hover { color: var(--mm-gold-light); }

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

.wrap {
  position: relative;
  z-index: 1;
  width: min(1080px, 100% - 40px);
  margin-inline: auto;
}

.wrap--narrow { width: min(560px, 100% - 40px); }

/* ---------- Type ---------- */

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; }

h1 { font-size: clamp(38px, 7vw, 68px); font-weight: 800; }
h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--mm-text-2); margin: 0 0 var(--sp-md);
}

.lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--mm-text-2); max-width: 56ch; }

.gold {
  background: var(--mm-gold-fill);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.muted { color: var(--mm-text-2); }
.tiny  { font-size: 13px; color: var(--mm-text-3); }

/* ---------- Header / footer ---------- */

.site-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-lg) 0;
}

/* Header lockup on the legal pages. White and uppercase to match the landing
   lockup: `a { color: gold }` was tinting the wordmark and it read as a link. */
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 30px; height: 30px; }
.brand span {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.brand:hover span { color: #fff; }

@media (max-width: 480px) {
  .brand span { font-size: 11px; letter-spacing: .18em; white-space: normal; }
}

.nav { display: flex; gap: var(--sp-lg); font-size: 15px; }
.nav a { color: var(--mm-text-2); }
.nav a:hover { color: var(--mm-text); }
@media (max-width: 640px) { .nav { display: none; } }

.site-foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--mm-border);
  margin-top: var(--sp-xxl);
  padding: var(--sp-xl) 0 var(--sp-xxl);
  color: var(--mm-text-3); font-size: 14px;
}
.site-foot .row { display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-lg); justify-content: space-between; }
.site-foot a { color: var(--mm-text-2); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--gold {
  background: var(--mm-gold-fill);
  color: var(--mm-on-accent);
  box-shadow: 0 10px 30px rgba(212,175,55,.22);
}
.btn--gold:hover { color: var(--mm-on-accent); box-shadow: 0 14px 40px rgba(212,175,55,.32); transform: translateY(-1px); }

.btn--ghost {
  background: rgba(255,255,255,.03);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
.btn--ghost:hover { background: rgba(255,255,255,.06); color: var(--mm-text); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

/* ---------- Cards ---------- */

.card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}

.card--lit {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(212,175,55,.10), transparent 60%),
    var(--mm-surface);
  border-color: rgba(212,175,55,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.06) inset;
}

.grid { display: grid; gap: var(--sp-md); }
@media (min-width: 760px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Hero ---------- */

.hero { padding: clamp(48px, 9vw, 110px) 0 clamp(40px, 7vw, 80px); }
.hero .lede { margin: var(--sp-lg) 0 var(--sp-xl); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.07);
  font-size: 13px; font-weight: 600; color: var(--mm-gold-light);
  margin-bottom: var(--sp-lg);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mm-gold-bright); }

/* ---------- Invite / QR surfaces ---------- */

.centered { text-align: center; padding: clamp(40px, 8vw, 80px) 0 0; }

.code-plate {
  display: block;
  margin: var(--sp-lg) auto 0;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
  border: 1px solid rgba(212,175,55,.4);
  background: rgba(212,175,55,.06);
  font: 700 clamp(26px, 6vw, 38px)/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  background-clip: padding-box;
  color: var(--mm-gold-light);
  word-break: break-all;
}

/* The QR must sit on pure white with a real quiet zone or scanners struggle. */
.qr-frame {
  display: inline-block;
  padding: 16px;
  background: #fff;
  border-radius: var(--r-md);
  line-height: 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.qr-frame img, .qr-frame canvas, .qr-frame svg {
  width: clamp(200px, 60vw, 260px);
  height: auto;
  image-rendering: pixelated;
}

.field {
  width: 100%;
  padding: 14px var(--sp-md);
  border-radius: var(--r-md);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface-alt);
  color: var(--mm-text);
  font: 600 17px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.field:focus { outline: none; border-color: rgba(212,175,55,.6); box-shadow: 0 0 0 3px rgba(212,175,55,.14); }

.label { display: block; font-size: 13px; font-weight: 600; color: var(--mm-text-2); margin-bottom: var(--sp-sm); }

.link-row {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-top: var(--sp-md);
  padding: 12px var(--sp-md);
  border-radius: var(--r-md);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface-alt);
}
.link-row code {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; color: var(--mm-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copy-btn {
  flex: 0 0 auto;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--mm-border); background: rgba(255,255,255,.04);
  color: var(--mm-text); font-size: 13px; font-weight: 700; cursor: pointer;
}
.copy-btn:hover { background: rgba(255,255,255,.08); }
.copy-btn[data-copied="1"] { border-color: rgba(52,199,89,.5); color: var(--mm-success); }

.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--sp-xl) 0 0; text-align: left; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-md);
  padding: 12px 0; color: var(--mm-text-2); font-size: 15px;
}
.steps li::before {
  content: counter(s);
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.4);
  color: var(--mm-gold-light); font-size: 13px; font-weight: 700;
}

/* ---------- Landing page ----------
   One viewport, no scroll, everything centred on the vertical axis of the hero
   image. Only the landing gets `overflow: hidden`; the legal pages still scroll. */

body.landing,
html:has(body.landing) {
  height: 100%;
  overflow: hidden;
}

body.landing { display: block; }

/* Uses dvh so the iOS URL bar collapsing does not clip the CTA, with vh as the
   fallback for browsers that lack it. */
.stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  width: min(1080px, 100% - 40px);
  margin-inline: auto;
  padding: clamp(18px, 3vh, 34px) 0 clamp(16px, 2.5vh, 28px);
  text-align: center;
}

/* Logo lockup: MILLIONAIRE, the mark, MENTORSHIP. The two words are balanced
   columns so the mark sits on the exact optical centre of the page no matter how
   wide the words render. */
.lockup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  justify-self: center;
  color: #fff;
}
.lockup img {
  width: clamp(30px, 4.2vh, 46px);
  height: auto;
  grid-column: 2;
}
.lockup .word {
  font-size: clamp(10px, 1.35vh, 14px);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
/* Tracking adds a trailing space to the last letter. Pulling the left word right
   and pushing the right word out by the same amount re-centres the mark. */
.lockup .word--left  { text-align: right; text-indent: .34em; }
.lockup .word--right { text-align: left; }

@media (max-width: 420px) {
  .lockup { gap: 8px; }
  .lockup .word { letter-spacing: .2em; font-size: 10px; }
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 20px);
  min-height: 0;               /* lets the row shrink instead of forcing a scrollbar */
}

/* "INVITE ONLY" is gold leaf, not flat gold: a metal gradient with a highlight
   that sweeps across it, the same treatment as `goldShimmer()` on the app's
   paywall and Invite screens. */
.landing-hero .eyebrow {
  margin: 0;
  font-size: clamp(11px, 1.4vh, 13px);
  letter-spacing: .34em;
  text-indent: .34em;
  background: linear-gradient(100deg,
    var(--mm-gold) 0%, var(--mm-gold) 32%,
    var(--mm-gold-highlight) 46%, #fff8e2 50%, var(--mm-gold-highlight) 54%,
    var(--mm-gold) 68%, var(--mm-gold) 100%);
  background-size: 260% 100%;
  background-position: 160% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mm-shimmer 5.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(212,175,55,.35));
}

@keyframes mm-shimmer {
  0%   { background-position: 160% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

.landing-hero h1 {
  margin: 0;
  font-size: clamp(30px, min(7.2vw, 8.4vh), 76px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.65);
}

.landing-hero .lede {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(14px, 1.95vh, 18px);
  color: rgba(245,245,247,.78);
  text-wrap: pretty;
  text-shadow: 0 1px 20px rgba(0,0,0,.6);
}

/* The CTA is polished metal: a richer gold ramp, a breathing glow, and a specular
   highlight that travels across the face. The sweep is a pseudo-element clipped to
   the pill so it never paints outside the button. */
.landing-hero .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(4px, 1vh, 12px);
  padding: clamp(13px, 1.8vh, 17px) clamp(30px, 4vw, 46px);
  font-size: clamp(15px, 1.9vh, 17px);
  background: linear-gradient(135deg,
    var(--mm-gold-highlight) 0%, var(--mm-gold-light) 22%, var(--mm-gold) 52%,
    var(--mm-gold-light) 74%, var(--mm-gold-deep) 100%);
  box-shadow:
    0 10px 30px rgba(212,175,55,.28),
    0 0 0 1px rgba(251,239,196,.45) inset,
    0 -8px 18px rgba(154,123,46,.35) inset;
  animation: mm-cta-glow 3.6s ease-in-out infinite;
}

.landing-hero .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.16) 54%, transparent 62%);
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: mm-shimmer 5.5s ease-in-out infinite;
  pointer-events: none;
}

.landing-hero .btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 44px rgba(212,175,55,.42),
    0 0 0 1px rgba(251,239,196,.6) inset,
    0 -8px 18px rgba(154,123,46,.35) inset;
}

@keyframes mm-cta-glow {
  0%, 100% { box-shadow: 0 10px 30px rgba(212,175,55,.24), 0 0 0 1px rgba(251,239,196,.45) inset, 0 -8px 18px rgba(154,123,46,.35) inset; }
  50%      { box-shadow: 0 12px 40px rgba(212,175,55,.44), 0 0 0 1px rgba(251,239,196,.55) inset, 0 -8px 18px rgba(154,123,46,.35) inset; }
}

/* Reduce Motion keeps the gold and drops every moving part. */
@media (prefers-reduced-motion: reduce) {
  .landing-hero .eyebrow,
  .landing-hero .btn,
  .landing-hero .btn::after { animation: none; }
  .landing-hero .eyebrow { background-position: 50% 0; }
}

.landing-hero .platforms {
  margin: 0;
  font-size: clamp(11px, 1.4vh, 13px);
  color: var(--mm-text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.landing-hero .platforms svg { width: 1em; height: 1em; fill: currentColor; }

/* Copyright left, legal links bottom right, sharing one baseline. Small and quiet,
   but always reachable: these two pages are the URLs App Store Connect points at.
   A two-column grid rather than flex, because a wrapping flex row let the links
   box stretch to the container height and sit 30px below the copyright. */
.landing-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  /* `center`, not `baseline`: baseline alignment stretches the links box to the
     row height and shunts its content down, which inflated the footer to 79px and
     stole that space from the hero. Both sides share a font size and line height,
     so centring puts them on the same baseline anyway. */
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
  font-size: clamp(10px, 1.2vh, 12px);
  line-height: 1.4;
  color: var(--mm-text-3);
  text-align: left;
}
/* Named `foot-links`, not `legal`: `.legal` is the legal-pages wrapper and carries
   a 64px top padding, which silently made this box 79px tall and knocked the two
   sides of the footer out of alignment. */
.landing-foot .foot-links {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}
.landing-foot a { color: var(--mm-text-3); }
.landing-foot a:hover { color: var(--mm-gold-bright); }

@media (max-width: 560px) {
  .landing-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .landing-foot .foot-links { justify-content: center; }
}

/* Short viewports (landscape phones, small laptops) drop the least important line
   rather than letting the page overflow, because the page must not scroll. */
@media (max-height: 520px) {
  .landing-hero .lede { display: none; }
}

/* The landing scrim is centred rather than top-to-bottom: the hero image is dark at
   the edges and bright at the summit, so a directional gradient would either wash
   out the artwork or leave the headline sitting on the glow. */
body.landing .mm-bg::after {
  background:
    radial-gradient(72% 62% at 50% 46%, rgba(10,10,11,.62), rgba(10,10,11,.80) 62%, rgba(10,10,11,.92) 100%),
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.18) 32%, rgba(10,10,11,.55) 100%);
}

/* ---------- Legal pages (/privacy, /terms) ----------
   Long-form prose. Measure is capped near 70ch because these are documents people
   actually have to read, not marketing copy. */

main.legal { padding: clamp(32px, 6vw, 64px) 0 0; }

.legal-head { border-bottom: 1px solid var(--mm-border); padding-bottom: var(--sp-lg); }
.legal-head h1 { margin-bottom: var(--sp-md); }
.legal-dates { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg); font-size: 14px; color: var(--mm-text-3); }
.legal-dates strong { color: var(--mm-text-2); font-weight: 600; }

.toc { margin: var(--sp-xl) 0; }
.toc ol { columns: 2; column-gap: var(--sp-xl); margin: 0; padding-left: 1.2em; font-size: 15px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { color: var(--mm-text-2); }
.toc a:hover { color: var(--mm-gold-bright); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

.legal-body { max-width: 70ch; }

.legal-body section { padding-top: var(--sp-xl); scroll-margin-top: var(--sp-lg); }

.legal-body h2 {
  font-size: clamp(21px, 3vw, 26px);
  margin-bottom: var(--sp-md);
  letter-spacing: -.015em;
}
.legal-body h2 .num { color: var(--mm-gold); font-variant-numeric: tabular-nums; margin-right: .5em; }

.legal-body h3 {
  font-size: 17px;
  margin: var(--sp-lg) 0 var(--sp-sm);
  color: var(--mm-gold-light);
  letter-spacing: 0;
}

.legal-body p { color: var(--mm-text-2); margin: 0 0 var(--sp-md); font-size: 16px; }
.legal-body strong { color: var(--mm-text); font-weight: 650; }
.legal-body ul, .legal-body ol { color: var(--mm-text-2); padding-left: 1.3em; margin: 0 0 var(--sp-md); font-size: 16px; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--mm-gold-deep); }

/* The one thing in a legal document that must not be skimmed past. */
.legal-body .callout {
  border-left: 2px solid var(--mm-gold);
  background: rgba(212,175,55,.06);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-md) var(--sp-lg);
  margin: 0 0 var(--sp-md);
}
.legal-body .callout p:last-child { margin-bottom: 0; }
.legal-body .callout strong { color: var(--mm-gold-light); }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-md); font-size: 15px; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mm-border);
  color: var(--mm-text-2);
}
.legal-table th { color: var(--mm-text); font-weight: 650; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.legal-table td:first-child { color: var(--mm-text); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { border-bottom: 1px solid var(--mm-border); padding: var(--sp-sm) 0; }
  .legal-table td { border: none; padding: 3px 0; }
  .legal-table td:first-child { white-space: normal; }
}

.legal-foot {
  margin-top: var(--sp-xxl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--mm-border);
}

/* ---------- Motion ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- Print: the invite card ---------- */

@media print {
  body { background: #fff; color: #000; }
  body::before, .mm-bg, .site-head, .site-foot, .no-print { display: none !important; }
  .card, .card--lit {
    border: none; background: none; box-shadow: none; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .qr-frame { box-shadow: none; padding: 0; }
  .code-plate { color: #000; border-color: #000; background: none; }
}