/* ============================================================
   Sacred Business Momentum Lab — standalone page
   Built from the Blueprint page's vocabulary (DESIGN.md "The Engraved
   Instrument"); no new assets, no new component shapes.

   Tide arc (The Tide Rule): cold moonlit-beach hero → warm charcoals that
   step up and down for section separation → black-sand close, warm and dry.
     01 hero        #060b0d  cold   copper   moonlit-beach.webp
     02 business    #211f1d  warm   copper
     03 overwhelm   #232221  warm   gold
     04 questions   #242423  warm   gold
     05 not school  #211f1d  warm   gold
     06 built for   #232221  warm   gold
     07 clarity     #272420  warm   gold     the payoff sits on the lightest ground
     08 fit         #242423  warm   gold
     09 waitlist    #0a0908  warm   gold     black-sand.webp

   Tiffany appears only on: the nav plate, the three "Join the Waitlist"
   plates, their arrows, and form focus. Everything else is warm metal.
   ============================================================ */

.ml-page {
  --cream: #f4ece0;
  background: #0b1113;
  color: var(--ink);
}

/* ---------- Metals ---------- */
.ml-copper { --accent: #c9905f; --accent-line: rgba(201, 144, 95, .62); --hair: rgba(201, 144, 95, .3); }
.ml-gold   { --accent: #c9a063; --accent-line: rgba(201, 160, 99, .5);  --hair: rgba(201, 160, 99, .32); }

/* ---------- Section shell ---------- */
.ml-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  padding: clamp(54px, 9vh, 120px) 3.1vw clamp(48px, 8vh, 104px);
  scroll-margin-top: calc(1.8vh + 78px + 2vh);
}
/* The Diamond Pin Rule: each pin is filled with its own section's surface */
.ml-sec > .deco-frame i { background: var(--surface); }

.ml-grain::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/reframe/charcoal-grain.webp") repeat;
  background-size: 440px 440px;
  opacity: .4;
  mix-blend-mode: soft-light;
}

.ml-inner { position: relative; z-index: 2; padding: 0 clamp(16px, 2.4vw, 54px); }

/* ---------- Type ---------- */
.ml-h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 4.6vw, 82px);
  line-height: .95;
  letter-spacing: -.042em;
  word-spacing: .05em;
  color: var(--ink);
}
.ml-h2 span { display: block; }

.ml-lede {
  margin-top: clamp(16px, 2.4vh, 32px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.5vw, 29px);
  line-height: 1.5;
  color: var(--cream);
  max-width: 26em;
}
.ml-body {
  margin-top: clamp(12px, 1.8vh, 22px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.18vw, 23px);
  line-height: 1.56;
  color: rgba(244, 236, 224, .84);
  max-width: 30em;
}
/* Headline voice: Playfair 700, reserved for the single claim that closes a beat */
.ml-claim {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 1.72vw, 33px);
  line-height: 1.42;
  color: var(--ink);
}

/* rule with a pinned diamond */
.ml-divide {
  position: relative;
  height: 1px;
  width: min(100%, 30em);
  margin: clamp(22px, 3.2vh, 42px) 0 clamp(4px, .8vh, 10px);
  background: var(--accent-line);
}
.ml-divide i {
  position: absolute;
  left: 42%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}
.ml-divide i::after { content: ""; position: absolute; inset: 3px; background: var(--accent); }

/* section-closing line: a scale marking with the claim at its centre */
.ml-close {
  margin-top: clamp(40px, 6vh, 84px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 38px);
}
.ml-close::before,
.ml-close::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--accent-line); }
.ml-close span {
  flex: 0 1 auto;
  max-width: 34em;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 1.72vw, 33px);
  line-height: 1.42;
  color: var(--ink);
}

/* ---------- Plate: one rule + four drawn corner brackets ---------- */
.ml-plate {
  position: relative;
  border: 1px solid var(--accent-line);
  background: var(--surface);             /* opaque, so ornament can run behind it */
}
.ml-plate::before,
.ml-plate::after,
.ml-plate > b::before,
.ml-plate > b::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.ml-plate > b { position: absolute; inset: 0; pointer-events: none; }
.ml-plate::before      { left: 6px;  top: 6px;    border-right: 0; border-bottom: 0; }
.ml-plate::after       { right: 6px; bottom: 6px; border-left: 0;  border-top: 0; }
.ml-plate > b::before  { right: 6px; top: 6px;    border-left: 0;  border-bottom: 0; }
.ml-plate > b::after   { left: 6px;  bottom: 6px; border-right: 0; border-top: 0; }

/* numbered diamond badge */
.ml-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.2vw, 54px);
  height: clamp(38px, 3.2vw, 54px);
  isolation: isolate;
  font-style: normal;
  color: var(--accent);
  font-size: clamp(11px, .96vw, 17px);
  letter-spacing: .16em;
}
.ml-badge::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

/* instrument mark: drawn ring, approved icon inside */
.ml-ring {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(54px, 5vw, 92px);
  height: clamp(54px, 5vw, 92px);
  border: 1px solid var(--accent-line);
  border-radius: 50%;                     /* the one permitted radius */
}
.ml-ring img { width: 56%; height: 56%; opacity: .92; }

/* ---------- CTA: every bracket plate on this page is an action → Tiffany ---------- */
main .bp-cta {
  color: var(--ink);                      /* the shared shell still says #fff */
  border-color: var(--action);
}
main .bp-cta::before,
main .bp-cta::after,
main .bp-cta i::before,
main .bp-cta i::after { border-color: var(--action); }
main .bp-cta:hover,
main .bp-cta:focus-visible { background: rgba(134, 209, 205, .12); }
main .bp-cta:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

/* ============================================================
   01 Hero
   ============================================================ */
.mlh {
  --surface: #060b0d;
  min-height: max(100vh, 880px);
  display: flex;
  align-items: center;
  padding: calc(1.8vh + 78px + 4vh) 3.1vw 7vh;
}
/* Photographic ground, from the Fit_Call_Request render (generated, not cropped):
   moonlit shore, the Lab phone half-buried in black sand right of centre, the
   left half in deep shadow for the copy. Anchored right so the phone survives
   narrower screens. Overhangs so the parallax never shows an edge;
   lab-parallax.js writes --mlh-drift. */
.mlh::before {
  content: "";
  position: absolute; inset: -10% 0; z-index: -2; pointer-events: none;
  background: #060b0d url("assets/lab/lab-shore.webp") no-repeat right center / cover;
  transform: translate3d(0, var(--mlh-drift, 0px), 0);
  will-change: transform;
}
/* legibility wash: a directional gradient, never a panel */
.mlh::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* right edge: ground for the margin rails over the moonlit water */
    linear-gradient(270deg, rgba(6, 11, 13, .78) 0%, rgba(6, 11, 13, .4) 8%, rgba(6, 11, 13, 0) 16%),
    /* the photo is already dark on the left, so the wash can let go by the phone */
    linear-gradient(90deg, rgba(6, 11, 13, .9) 0%, rgba(6, 11, 13, .7) 30%, rgba(6, 11, 13, .12) 56%, rgba(6, 11, 13, 0) 100%),
    linear-gradient(180deg, rgba(6, 11, 13, .8) 0%, rgba(6, 11, 13, 0) 22%, rgba(6, 11, 13, 0) 72%, rgba(6, 11, 13, .74) 100%);
}

.mlh-copy { width: min(100%, 980px); }

.mlh-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(44px, 6.2vw, 112px);
  line-height: .9;
  letter-spacing: -.044em;
  word-spacing: .05em;
  color: var(--ink);
}
.mlh-title span { display: block; }

.mlh-lede { max-width: 25em; }

/* the reframe: "not X — Y", voice.md's signature contrast */
.mlh-turn {
  margin-top: clamp(20px, 3vh, 40px);
  padding-left: clamp(16px, 1.6vw, 28px);
  border-left: 1px solid var(--accent-line);
  max-width: 34em;
}
.mlh-not,
.mlh-need {
  font-family: var(--serif);
  font-size: clamp(15px, 1.24vw, 24px);
  line-height: 1.5;
}
.mlh-not  { font-weight: 300; color: rgba(244, 236, 224, .66); }
.mlh-need { font-weight: 400; color: var(--ink); margin-top: clamp(6px, 1vh, 12px); }

.mlh-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 36px);
  margin-top: clamp(24px, 3.6vh, 48px);
}
.mlh-act .bp-cta { margin-top: 0; }

.ml-page .mlh-status,
.mlz-status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
  font-size: clamp(10px, .9vw, 16px);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.mlh-status i,
.mlz-status i {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

.mlh-rail {
  position: absolute;
  z-index: 2;
  right: 4.4vw;
  color: var(--accent);
  font-size: clamp(10px, .82vw, 15px);
  line-height: 1.9;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: right;
  pointer-events: none;
}
.mlh-rail.tr { top: calc(1.8vh + 78px + 4.4vh); }
.mlh-rail.br { bottom: 7vh; display: grid; gap: 2px; }

/* ============================================================
   02 The business side
   ============================================================ */
.mlb { --surface: #211f1d; }

.mlb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 84px);
}

.mlb-pile { padding: clamp(18px, 2.6vh, 34px) clamp(20px, 2.2vw, 42px); }
.mlb-pile ol { list-style: none; }
.mlb-pile li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(14px, 1.5vw, 28px);
  padding: clamp(12px, 1.8vh, 22px) 0;
}
.mlb-pile li + li { border-top: 1px solid var(--hair); }
.mlb-n {
  color: var(--accent);
  font-size: clamp(11px, .96vw, 17px);
  letter-spacing: .2em;
}
.mlb-pile li p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.36vw, 26px);
  line-height: 1.42;
  color: var(--ink);
}
/* "three more things" — drawn, literally */
.mlb-three { display: flex; gap: 7px; align-self: center; }
.mlb-three i { width: 8px; height: 8px; border: 1px solid var(--accent); transform: rotate(45deg); }
.mlb-three i:nth-child(2) { opacity: .7; }
.mlb-three i:nth-child(3) { opacity: .42; }

.mlb-foot {
  margin-top: clamp(6px, 1vh, 12px);
  padding-top: clamp(14px, 2.1vh, 26px);
  border-top: 1px solid var(--accent-line);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 23px);
  line-height: 1.54;
  color: var(--cream);
}

/* ============================================================
   03 Less overwhelm
   ============================================================ */
.mlm { --surface: #232221; }

.mlm-burst {
  position: absolute; z-index: 0; pointer-events: none;
  top: 4%; right: -3vw;
  width: min(22vw, 320px);
  opacity: .42;
  mix-blend-mode: screen;
  transform: rotate(160deg);
}

.mlm-head { width: min(100%, 1080px); }
.mlm-head .ml-lede { max-width: 30em; }
.mlm-pieces-lead { margin-top: clamp(22px, 3.2vh, 40px); }

/* the seven pieces as a ruler: one rule, a diamond tick over each label */
.mlm-scale {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
  row-gap: clamp(26px, 3.4vh, 40px);
  margin-top: clamp(22px, 3vh, 36px);
  border-top: 1px solid var(--accent-line);
}
.mlm-scale li {
  position: relative;
  padding-top: clamp(18px, 2.4vh, 28px);
  color: var(--ink);
  font-size: clamp(10px, .92vw, 17px);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mlm-scale li::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

.mlm-goal {
  margin-top: clamp(40px, 6vh, 80px);
  width: min(100%, 980px);
  padding: clamp(26px, 3.8vh, 52px) clamp(22px, 3vw, 60px);
}
.mlm-not {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 27px);
  line-height: 1.5;
  color: rgba(244, 236, 224, .66);
}
.mlm-goal .ml-divide { margin-bottom: clamp(18px, 2.6vh, 30px); width: min(100%, 22em); }
.mlm-goal .ml-claim { max-width: 26em; }

/* ============================================================
   04 The questions
   ============================================================ */
.mlq { --surface: #242423; }

.mlq-compass {
  position: absolute; z-index: 0; pointer-events: none;
  bottom: 4%; left: -6vw;
  width: min(30vw, 440px);
  opacity: .32;
  mix-blend-mode: screen;
}

.mlq-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(28px, 4.4vw, 92px);
}
/* the head holds still while the seven questions scroll past it */
.mlq-head { position: sticky; top: calc(1.8vh + 78px + 5vh); }
.mlq-head .ml-h2 { font-size: clamp(34px, 3.9vw, 70px); }
.mlq-head .ml-lede { margin-top: clamp(4px, .8vh, 10px); }

.mlq-list { list-style: none; }
.mlq-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(18px, 2vw, 38px);
  padding: clamp(18px, 2.8vh, 34px) 0;
}
.mlq-list li + li { border-top: 1px solid var(--hair); }
.mlq-list .ml-badge { margin-top: 2px; }
.mlq-list h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 1.52vw, 29px);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--ink);
}
.mlq-list p {
  margin-top: clamp(6px, 1vh, 12px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 21px);
  line-height: 1.54;
  color: var(--cream);
  max-width: 30em;
}
/* 07 is where the other six land: it becomes a plate and carries the path mark */
.mlq-list li.is-next {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  margin-top: clamp(14px, 2vh, 24px);
  padding: clamp(24px, 3.4vh, 42px) clamp(18px, 2vw, 36px);
  border-top: 1px solid var(--accent-line);
}
.mlq-list li.is-next .ml-ring { border-color: var(--accent); }

/* ============================================================
   05 This isn't business school
   ============================================================ */
.mln { --surface: #211f1d; }

.mln-compare {
  margin-top: clamp(32px, 5vh, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 52px);
  align-items: stretch;
}

/* the other programs: an unframed, dimmed ledger — no brackets, it is not ours */
.mln-else {
  padding: clamp(24px, 3.4vh, 44px) clamp(20px, 2.4vw, 46px);
  border: 1px dashed rgba(201, 160, 99, .26);
  display: flex;
  flex-direction: column;
}
.mln-figs { display: flex; gap: clamp(28px, 3.4vw, 64px); }
.mln-figs p { display: grid; gap: 6px; }
.mln-figs b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(54px, 6vw, 110px);
  line-height: .86;
  letter-spacing: -.05em;
  color: rgba(242, 239, 233, .26);
}
.mln-figs span {
  font-size: clamp(10px, .88vw, 16px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 236, 224, .5);
}
.mln-else .ml-body { color: rgba(244, 236, 224, .7); margin-top: clamp(20px, 3vh, 36px); }
.mln-that {
  margin-top: auto;
  padding-top: clamp(18px, 2.6vh, 30px);
  font-size: clamp(11px, .96vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.mln-lab { padding: clamp(24px, 3.4vh, 44px) clamp(20px, 2.4vw, 46px); }
.mln-lab .ml-body { margin-top: 0; color: var(--cream); }
.mln-four { list-style: none; margin-top: clamp(12px, 1.8vh, 22px); }
.mln-four li {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 56px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ink);
}
.mln-four li + li { margin-top: clamp(2px, .5vh, 6px); }

.mln-look { margin-top: clamp(40px, 6vh, 80px); text-align: center; }
.mln-look .ml-lede { margin: 0 auto; color: var(--ink); }
.mln-your {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.4vh, 18px) 0;
  margin-top: clamp(16px, 2.4vh, 28px);
}
.mln-your li {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 31px);
  letter-spacing: -.015em;
  color: rgba(242, 239, 233, .72);
}
.mln-your li:last-child { color: var(--ink); }
.mln-your li + li::before {
  content: "";
  width: 7px; height: 7px;
  margin: 0 clamp(14px, 1.6vw, 30px);
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* ============================================================
   06 Built for practitioners
   ============================================================ */
.mlw { --surface: #232221; }

.mlw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 4vw, 84px);
}
.mlw-copy .ml-h2 { font-size: clamp(34px, 4.2vw, 76px); }
.mlw-copy .ml-lede { margin-top: clamp(14px, 2vh, 24px); }

.mlw-good { padding: clamp(28px, 4vh, 54px) clamp(22px, 2.6vw, 50px); }
.mlw-good > p:not(.mlw-word) {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 27px);
  line-height: 1.5;
  color: var(--cream);
}
.mlw-good > p + p { margin-top: clamp(10px, 1.5vh, 18px); }
.mlw-good .ml-divide { width: min(100%, 14em); margin-bottom: clamp(16px, 2.4vh, 28px); }
.mlw-word {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(64px, 8vw, 150px);
  line-height: .86;
  letter-spacing: -.05em;
  color: var(--ink);
}

.mlw-close {
  margin-top: clamp(40px, 6vh, 84px);
  padding-top: clamp(26px, 3.8vh, 48px);
  border-top: 1px solid var(--accent-line);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: baseline;
}
.mlw-not {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 27px);
  line-height: 1.5;
  color: rgba(244, 236, 224, .62);
}
.mlw-is {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.72vw, 33px);
  line-height: 1.5;
  color: var(--ink);
}

/* ============================================================
   07 What you'll walk away with
   ============================================================ */
.mlc { --surface: #272420; text-align: center; }

.mlc-burst {
  position: absolute; z-index: 0; pointer-events: none;
  top: 30%;
  width: min(20vw, 300px);
  opacity: .36;
  mix-blend-mode: screen;
}
.mlc-burst.l { left: -3vw; transform: rotate(-24deg); }
.mlc-burst.r { right: -3vw; transform: rotate(156deg); }

.mlc-head { width: min(100%, 980px); margin: 0 auto; }
.mlc-head .deco-eyebrow { justify-content: center; }
.mlc-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 60px);
  line-height: 1;
  letter-spacing: -.04em;
  word-spacing: .05em;
  color: var(--ink);
}
.mlc-head .ml-lede { margin: clamp(14px, 2vh, 24px) auto 0; }

.mlc-word {
  margin-top: clamp(26px, 4vh, 56px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 46px);
}
.mlc-word::before,
.mlc-word::after { content: ""; flex: 1 1 0; height: 1px; background: var(--accent-line); }
.mlc-word span {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(72px, 11vw, 210px);
  line-height: .9;
  letter-spacing: -.055em;
  color: var(--ink);
}

.mlc-list {
  list-style: none;
  margin: clamp(24px, 3.6vh, 48px) auto 0;
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mlc-list li {
  padding: clamp(14px, 2vh, 24px) clamp(10px, 1.4vw, 26px);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 1.42vw, 27px);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--ink);
}
.mlc-list li + li { border-left: 1px solid var(--hair); }
.mlc-list li span {
  display: block;
  margin-bottom: clamp(6px, 1vh, 12px);
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(10px, .86vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.mlc-most {
  margin: clamp(34px, 5vh, 66px) auto 0;
  width: min(100%, 860px);
  padding-top: clamp(24px, 3.6vh, 44px);
  border-top: 1px solid var(--accent-line);
}
.mlc-road {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 28px);
  margin-top: clamp(18px, 2.8vh, 34px);
  text-align: left;
}
.mlc-road .ml-ring { border-color: var(--accent); }
.mlc-road .ml-body { margin-top: 0; max-width: 24em; }

/* ============================================================
   08 Fit
   ============================================================ */
.mlf { --surface: #242423; }

.mlf-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: clamp(22px, 3.4vw, 72px);
}
.mlf-head .ml-h2 { font-size: clamp(34px, 4.2vw, 76px); }
.mlf-turn .ml-claim { font-size: clamp(20px, 2vw, 38px); }
.mlf-turn .ml-body { margin-top: clamp(8px, 1.2vh, 14px); }

.mlf-grid {
  list-style: none;
  margin-top: clamp(32px, 5vh, 66px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 26px);
}
/* four across, then three across: seven thoughts without an orphan */
.mlf-grid li { grid-column: span 3; }
.mlf-grid li:nth-child(n + 5) { grid-column: span 4; }

.mlf-grid li {
  padding: clamp(22px, 3.2vh, 40px) clamp(18px, 1.8vw, 34px);
  transition: border-color .45s var(--ease);
}
.mlf-grid li p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.32vw, 25px);
  line-height: 1.46;
  color: var(--ink);
}
/* the opening quote mark, engraved in metal */
.mlf-grid li p::before {
  content: "“";
  display: block;
  height: .5em;
  margin-bottom: clamp(8px, 1.2vh, 14px);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 2.6em;
  line-height: .9;
  color: var(--accent);
}
.mlf-grid li p::after { content: "”"; }

@media (hover: hover) {
  .mlf-grid li:hover { border-color: var(--accent); }
}

/* ============================================================
   09 Waitlist — black sand
   ============================================================ */
.mlz {
  --surface: #0a0908;
  min-height: max(92vh, 860px);
  display: flex;
  align-items: center;
}
/* the cards and compass sit in the photo's right third; sand carries the copy */
.mlz::before {
  content: "";
  position: absolute; inset: -12% 0; z-index: -2; pointer-events: none;
  background: #0a0908 url("assets/fit/black-sand.webp") no-repeat center right / cover;
  transform: translate3d(0, var(--mlz-drift, 0px), 0);
  will-change: transform;
}
.mlz::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 9, 8, .95) 0%, rgba(10, 9, 8, .86) 38%, rgba(10, 9, 8, .4) 66%, rgba(10, 9, 8, .12) 100%),
    linear-gradient(180deg, rgba(10, 9, 8, .8) 0%, rgba(10, 9, 8, 0) 22%, rgba(10, 9, 8, 0) 74%, rgba(10, 9, 8, .78) 100%);
}

.mlz-copy { width: min(100%, 900px); }
.mlz-copy .ml-h2 { font-size: clamp(36px, 4.8vw, 88px); }
.mlz-turn { color: var(--accent); }       /* display weight + size clears contrast; it is the line, not body */
.mlz-copy .ml-lede { max-width: 28em; }
.mlz-status { margin-top: clamp(14px, 2vh, 24px); }

.mlz-form {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1vw, 18px);
  margin-top: clamp(20px, 3vh, 38px);
  max-width: 720px;
}
.mlz-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 clamp(14px, 1.4vw, 24px);
  background: rgba(244, 236, 224, .03);
  border: 1px solid var(--accent-line);
  border-radius: 0;
  color: var(--ink);
  font: 400 clamp(12px, 1vw, 18px)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mlz-form input[type="email"]::placeholder { color: rgba(239, 230, 216, .45); }
.mlz-form input[type="email"]:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-color: var(--action); }
.mlz-form .bp-cta {
  margin-top: 0;
  flex: 0 0 auto;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}

.mlz-fine {
  margin-top: clamp(14px, 2vh, 24px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.06vw, 20px);
  line-height: 1.5;
  color: rgba(239, 230, 216, .72);
}

/* ============================================================
   Wide screens: the hero rails get their own gutter
   ============================================================ */
@media (min-width: 1181px) {
  .mlh-copy { padding-right: clamp(132px, 12.6vw, 258px); width: min(100%, 1160px); }
}

/* ============================================================
   Responsive
   ============================================================ */
/* Tablet: keep the desktop composition, copy left and phone right. The copy
   column narrows to the left half, and the photo slides so the phone (which sits
   ~72% across the image) lands in the right half instead of under the text. */
@media (min-width: 761px) and (max-width: 1180px) {
  .mlh-copy { width: min(54%, 560px); }
  .mlh-title { font-size: clamp(40px, 5.6vw, 66px); }
  .mlh-turn { max-width: none; }
  .mlh::before { background-position: 60% center; }   /* lower % slides the photo right */
  .mlh::after {
    background:
      linear-gradient(90deg, rgba(6, 11, 13, .92) 0%, rgba(6, 11, 13, .78) 38%, rgba(6, 11, 13, .2) 56%, rgba(6, 11, 13, 0) 70%),
      linear-gradient(180deg, rgba(6, 11, 13, .8) 0%, rgba(6, 11, 13, 0) 22%, rgba(6, 11, 13, 0) 72%, rgba(6, 11, 13, .74) 100%);
  }
}
/* narrowest tablets: pull the phone back in from the right edge */
@media (min-width: 761px) and (max-width: 880px) {
  .mlh::before { background-position: 72% center; }
}

/* Phones: there is no room beside the copy, so stack. Copy on top over the dark
   sky, the phone scene anchored to the foot of the section beneath the CTA. */
@media (max-width: 760px) {
  .mlh { min-height: 0; align-items: flex-start; padding-bottom: 124vw; }
  .mlh::before { inset: 0; transform: none; }
  .mlh::before { background-size: 210% auto; background-position: 74% 100%; }
  .mlh::after {
    background: linear-gradient(180deg,
      rgba(6, 11, 13, 1) 0%,
      rgba(6, 11, 13, .96) calc(100% - 136vw),
      rgba(6, 11, 13, .3) calc(100% - 100vw),
      rgba(6, 11, 13, 0) calc(100% - 80vw),
      rgba(6, 11, 13, .45) 100%);
  }
}

@media (max-width: 1180px) {
  .mlh-rail, .mlh-rail.br { display: none; }
  .mlb-grid,
  .mlq-grid,
  .mlw-grid,
  .mln-compare,
  .mlf-head,
  .mlw-close { grid-template-columns: 1fr; }
  .mlq-head { position: static; }
  .mlf-head { align-items: start; }
  .mlm-scale { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: clamp(28px, 5vw, 64px); border-top: 0; }
  .mlm-scale li { border-top: 1px solid var(--accent-line); padding-right: 8px; }
  .mlc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlc-list li:nth-child(3) { border-left: 0; }
  .mlc-list li:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .mlf-grid li,
  .mlf-grid li:nth-child(n + 5) { grid-column: span 6; }
  .mlf-grid li:last-child { grid-column: 1 / -1; }
  .mlz::after {
    background: linear-gradient(180deg, rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .8) 50%, rgba(10, 9, 8, .9) 100%);
  }
  .mlq-compass, .mlm-burst, .mlc-burst { opacity: .2; }
}

@media (max-width: 760px) {
  .ml-sec { padding: clamp(44px, 7vh, 72px) 6vw clamp(40px, 6vh, 64px); }
  .ml-inner { padding: 0; }
  .mlh { min-height: 0; padding: calc(1.8vh + 64px + 5vh) 6vw 124vw; }   /* bottom room = the phone scene */
  .mlh-title { font-size: clamp(38px, 11vw, 64px); }
  .mlz { min-height: 0; }
  .mlz-copy .ml-h2 span:not(.mlz-turn) { display: inline; }
  .deco-eyebrow em { display: none; }
  .mlq-compass, .mlm-burst, .mlc-burst { display: none; }
  .mlq-list li.is-next { grid-template-columns: auto minmax(0, 1fr); }
  .mlq-list li.is-next .ml-ring { display: none; }
  .mlc-list { grid-template-columns: 1fr; }
  .mlc-list li + li { border-left: 0; border-top: 1px solid var(--hair); }
  .mlf-grid li,
  .mlf-grid li:nth-child(n + 5),
  .mlf-grid li:last-child { grid-column: 1 / -1; }
  .mlz-form { flex-direction: column; }
  .mlz-form input[type="email"] { padding: 16px; }
  .mlz-form .bp-cta { justify-content: center; }
  .ml-close::before, .ml-close::after { display: none; }
  .mlc-road { flex-direction: column; text-align: center; }
  .mln-your { flex-direction: column; }
  .mln-your li + li::before { display: none; }
  .mlm-scale { grid-template-columns: repeat(2, auto); }
}

@media (prefers-reduced-motion: reduce) {
  .mlh::before, .mlz::before { transform: none; }
  .mlf-grid li { transition: none; }
}

/* ---------- Shared shell responsive (mirrors blueprint-page.css) ---------- */
@media (max-width: 1024px) {
  .nav { padding-left: 32px; background: rgba(20, 20, 20, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 5vh 6vw; }
  .foot-col + .foot-col { border-left: 0; padding-left: 0; }
  .foot-col:first-child { grid-column: 1 / -1; }
  .foot-sub { max-width: none; }
  .foot-base { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 14px; }
  .foot-base i { min-width: 40px; }
}
@media (max-width: 640px) {
  .nav { height: 64px; padding: 0 12px 0 16px; }
  .nav-end::before { display: none; }
  .nav .bp-cta { padding: 10px 16px; font-size: 12px; letter-spacing: .08em; gap: 0; white-space: nowrap; }
  .nav .bp-cta svg { display: none; }
  .nav .bp-cta::before, .nav .bp-cta::after,
  .nav .bp-cta i::before, .nav .bp-cta i::after { width: 7px; height: 7px; left: auto; right: auto; }
  .nav .bp-cta::before { left: 4px; top: 4px; }
  .nav .bp-cta::after { right: 4px; bottom: 4px; }
  .nav .bp-cta i::before { right: 4px; top: 4px; }
  .nav .bp-cta i::after { left: 4px; bottom: 4px; }
  .brand img { height: 26px; margin-left: calc(26px * -0.15); }
  .foot-grid { grid-template-columns: 1fr; gap: 4.5vh; }
  .foot-form { flex-direction: column; }
  .foot-join { justify-content: center; }
  .foot-base i { display: none; }
  .foot-base { flex-direction: column; gap: 16px; }
}