/* MUM Collective coming-soon site (WEB-1), built to the owner's landing-page design (darkSplit).
   Two deliberate departures from the board, both for WCAG AA text contrast: the pink buttons'
   hover is #E42A7C (the board's #E11D74 under black text is 4.26:1), and the muted grey on white
   and on the field fill is #6B6B6B (the board's #8A8A8A is 3.45:1 and 3.14:1). */

/* Figtree, self-hosted from Google Fonts' own files (OFL, fonts/OFL.txt): one variable font
   per subset covers every weight the page uses, and a visitor makes no third-party request. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  --focus: #0E0E0E;
  margin: 0;
  background: #fff;
  color: #0E0E0E;
  font-family: Figtree, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: #C4165F; text-decoration: none; }
a:hover { color: #E11D74; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
section[id] { scroll-margin-top: 72px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 30;
  padding: 12px 16px; border-radius: 12px; background: #0E0E0E; color: #fff; font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; --focus: #FF4F9A; }

/* Dark grounds: white focus rings. The form card is white again inside the dark section. */
.hero, .card-dark, .waitlist, .site-footer, .notfound { --focus: #fff; }
.form-card { --focus: #0E0E0E; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  white-space: nowrap; border: 0; border-radius: 14px;
  font: inherit; cursor: pointer;
}
.btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn-md { height: 52px; padding: 0 24px; font-size: 16px; align-self: flex-start; }
.btn-pink { background: #FF4F9A; color: #0E0E0E; font-weight: 800; }
.btn-pink:hover { background: #E42A7C; color: #0E0E0E; }
.btn-black { background: #0E0E0E; color: #fff; font-weight: 700; }
.btn-black:hover { background: #2A2A2A; color: #fff; }
.btn-outline { border: 1px solid #3A3A3A; color: #fff; font-weight: 700; }
.btn-outline:hover { border-color: #fff; color: #fff; }

/* Live dot and pulse ring */
@keyframes mumBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mumPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
.chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 14px;
  padding: 14px 26px; border-radius: 999px; background: #1E1E1E; color: #fff;
  font-weight: 800; font-size: 22px; letter-spacing: .01em;
}
.live-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FF4F9A;
  box-shadow: 0 0 0 4px rgba(255, 79, 154, .22);
  animation: mumBlink 1.6s ease-in-out infinite;
}
.pulse {
  position: absolute; left: 79.3%; top: 50.5%; width: 12.6%; aspect-ratio: 1;
  border: 3px solid #FF4F9A; border-radius: 50%; transform: translate(-50%, -50%);
  animation: mumPulse 2.4s ease-out infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .pulse { animation: none; }
}

/* Nav */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid #EDEDED;
}
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: #0E0E0E; }
.brand:hover { color: #0E0E0E; }
.brand img { height: 28px; width: auto; }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a:not(.nav-cta) { color: #0E0E0E; font-weight: 600; font-size: 15px; }
.nav-links a:not(.nav-cta):hover { color: #E11D74; }
.nav-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; white-space: nowrap;
  border-radius: 999px; background: #FF4F9A; color: #0E0E0E; font-weight: 700; font-size: 15px;
}
.nav-cta:hover { background: #E42A7C; color: #0E0E0E; }

/* Hero (darkSplit) */
.hero { background: #0E0E0E; color: #fff; padding: 104px 0 120px; overflow: hidden; }
.split {
  display: grid; gap: 64px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  font-size: clamp(52px, 7.4vw, 104px); line-height: .94; letter-spacing: -.045em;
  font-weight: 800; text-wrap: balance;
}
.on-dark-pink { color: #FF8FAF; }
.hero-lede { font-size: 20px; line-height: 1.5; color: #BDBDBD; max-width: 500px; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.stores li {
  padding: 10px 16px; border-radius: 12px; border: 1px solid #2E2E2E;
  font-size: 14px; font-weight: 600; color: #BDBDBD;
}
.hero-mark { position: relative; width: 100%; max-width: 560px; justify-self: start; }
.hero-mark img { width: 100%; }

/* Section heads */
.eyebrow {
  font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #C4165F;
}
.section-head { display: flex; flex-direction: column; gap: 18px; }
.section-head h2 {
  font-size: clamp(40px, 5.2vw, 72px); line-height: .98; letter-spacing: -.04em;
  font-weight: 800; text-wrap: balance;
}
.section-lede { font-size: 19px; line-height: 1.55; color: #3D3D3D; text-wrap: pretty; }
.fine { font-size: 13px; color: #6B6B6B; }

/* Two ways to drive */
.drive { padding: 120px 0 0; }
.drive .container { display: flex; flex-direction: column; gap: 48px; }
.drive .section-head { max-width: 720px; }
.drive .section-lede { max-width: 560px; }
.cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.card { border-radius: 28px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.card-light { background: #F4F4F4; }
.card-dark { background: #0E0E0E; color: #fff; }
.card-label { font-size: 14px; font-weight: 800; color: #6B6B6B; }
.card-dark .card-label { color: #FF8FAF; }
.card-copy { display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 36px; line-height: 1.02; letter-spacing: -.03em; font-weight: 800; }
.card-copy p { font-size: 17px; line-height: 1.55; color: #3D3D3D; text-wrap: pretty; }
.card-dark .card-copy p { color: #BDBDBD; }
.ticks { display: flex; flex-direction: column; border-top: 1px solid #DCDCDC; }
.ticks li {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid #DCDCDC; font-size: 16px; font-weight: 600;
}
.ticks li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #0E0E0E;
}
.card-dark .ticks, .card-dark .ticks li { border-color: #2A2A2A; }
.card-dark .ticks li::before { background: #FF4F9A; }

/* Earn-to-Own */
.earn { padding: 120px 0; }
.earn-copy { display: flex; flex-direction: column; gap: 40px; }
.earn .section-lede { max-width: 520px; }
.steps { display: flex; flex-direction: column; }
.steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0;
  border-top: 1px solid #E6E6E6;
}
.steps li:last-child { border-bottom: 1px solid #E6E6E6; }
.step-number { font-size: 15px; font-weight: 800; color: #6B6B6B; }
.step-copy { display: flex; flex-direction: column; gap: 6px; }
.step-copy h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.step-copy p { font-size: 16px; line-height: 1.5; color: #4A4A4A; }
.preview {
  background: #0E0E0E; color: #fff; border-radius: 32px; padding: 36px;
  display: flex; flex-direction: column; gap: 28px;
  max-width: 500px; width: 100%; justify-self: start;
}
.preview-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.preview-top img { height: 22px; width: auto; }
.preview-chip {
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px;
  background: #1F1F1F; color: #BDBDBD;
}
.progress { display: flex; flex-direction: column; gap: 6px; }
.progress-label { font-size: 15px; color: #BDBDBD; font-weight: 600; }
.progress-value { font-size: 72px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.progress-value span { font-size: 36px; color: #BDBDBD; }
.bar { height: 10px; border-radius: 999px; background: #262626; overflow: hidden; }
.bar span { display: block; width: 62%; height: 100%; background: #FF4F9A; border-radius: 999px; }
.milestones { display: flex; flex-direction: column; }
.milestones li {
  display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #222;
}
.mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 900;
}
.mark-done { background: #3BD17A; color: #0E0E0E; }
.mark-now { border: 2px solid #FF4F9A; }
.mark-next { border: 2px solid #3A3A3A; }
.milestone { flex: 1; font-size: 16px; font-weight: 600; }
.milestone-next { color: #8A8A8A; }
.in-progress { font-size: 14px; color: #FF8FAF; font-weight: 700; }

/* Waitlist */
.waitlist { background: #0E0E0E; color: #fff; padding: 120px 0; }
.waitlist .split { gap: 56px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.waitlist-copy { display: flex; flex-direction: column; gap: 22px; }
.waitlist h2 {
  font-size: clamp(48px, 6.4vw, 88px); line-height: .95; letter-spacing: -.045em; font-weight: 800;
}
.waitlist-lede { font-size: 19px; line-height: 1.55; color: #BDBDBD; max-width: 460px; text-wrap: pretty; }
.contact { font-size: 16px; color: #BDBDBD; }
.contact a { color: #FF8FAF; font-weight: 700; }
.contact a:hover { color: #fff; }
.form-card {
  background: #fff; color: #0E0E0E; border-radius: 24px; padding: 32px;
  max-width: 520px; width: 100%; justify-self: start;
}
.form-card form { display: flex; flex-direction: column; gap: 18px; }
.form-card fieldset { border: 0; padding: 0; min-width: 0; }
.form-card legend, .field label { padding: 0; font-size: 14px; font-weight: 700; }
.form-card legend { margin-bottom: 8px; }
.segments { display: flex; gap: 6px; padding: 4px; background: #F4F4F4; border-radius: 999px; }
.segments input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segments label {
  flex: 1; height: 40px; display: grid; place-items: center; border-radius: 999px;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.segments input:checked + label { background: #0E0E0E; color: #fff; }
.segments input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field input {
  height: 54px; border: 0; border-radius: 14px; background: #F4F4F4;
  padding: 0 16px; font: inherit; font-size: 17px; font-weight: 600; color: #0E0E0E;
  outline-offset: 2px;
}
/* The placeholder is what shows an empty box is there (the fill is 1.1:1 on white), so it is
   held to text contrast: #6B6B6B is 4.85:1 on the fill. Firefox would otherwise fade it. */
.field input::placeholder { color: #6B6B6B; opacity: 1; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #C4165F; }
.check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 14px; line-height: 1.45; color: #4A4A4A;
}
.check input { flex: none; margin: 2px 0 0; width: 18px; height: 18px; accent-color: #0E0E0E; }
.form-error { color: #C4165F; font-size: 14px; font-weight: 600; }
.submit { height: 56px; font-size: 17px; }
.submit[aria-disabled="true"] { opacity: .7; cursor: progress; }
.purpose { font-size: 13px; line-height: 1.45; color: #6B6B6B; }
.purpose a { font-weight: 700; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.done-tick {
  width: 48px; height: 48px; border-radius: 50%; background: #0E7A40; color: #fff;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
}
.done h3 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
/* Focus lands on the heading only so a screen reader reads the result; it is not a control. */
.done h3:focus { outline: none; }
.done p { font-size: 16px; color: #3D3D3D; line-height: 1.5; overflow-wrap: anywhere; }
.again {
  align-self: flex-start; height: 40px; padding: 0 16px; border: 1px solid #DADADA;
  background: #fff; border-radius: 999px; font: inherit; font-weight: 700; color: #0E0E0E;
  cursor: pointer;
}
.again:hover { border-color: #0E0E0E; }

/* Footer */
.site-footer { background: #0E0E0E; color: #fff; border-top: 1px solid #222; }
.footer {
  padding: 40px 24px 48px; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #BDBDBD; }
.footer-brand img { height: 24px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; font-weight: 600; }
.footer-links a { color: #fff; }
.footer-links a:hover { color: #FF8FAF; }

/* 404 */
.notfound { background: #0E0E0E; color: #fff; padding: 104px 0 120px; }
.notfound .container { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.notfound h1 {
  font-size: clamp(48px, 6.4vw, 88px); line-height: .95; letter-spacing: -.045em; font-weight: 800;
}

/* Phones: the board's nav does not fit below ~600px (it wraps and spills), so the two text
   links go first, as the handoff suggests, then the mark and the call to action shrink, then
   the gutters, so the name still fits on a 360-wide Android phone. */
@media (max-width: 599px) {
  .nav-links a:not(.nav-cta) { display: none; }
}
@media (max-width: 439px) {
  .brand { gap: 10px; }
  .brand img { height: 24px; }
  .brand-name { font-size: 18px; }
  .nav-cta { height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 389px) {
  .container { padding: 0 16px; }
  .footer { padding: 40px 16px 48px; }
  .brand-name { font-size: 16px; }
}
@media (max-width: 359px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}