/* =============================================================================
   MOODAH — public pages (apps/public)
   One stylesheet for both static sites:
     body.site-seller  →  seller.moodah.shop  (landing, apply, thank-you, legal)
     body.site-buyer   →  moodah.shop         (the buyer main page)

   Layout rule (P6b contract):
     - the mobile boards (390 px design width) are the base, fluid down to 320
     - 640–899 px: the same layout, content capped at 640 px and centred
     - ≥ 900 px: the desktop boards — one centred column capped at the boards'
       1280 px page width with their 48 px side padding (1184 px of content)

   File order — DO NOT INSERT IN THE MIDDLE:
     1. @font-face          6. shared sections / labels / cards
     2. tokens (:root)      7. seller landing (index.html, boards P1/P2)
     3. base + reset        8. legal + 404 pages
     4. utilities           9. desktop overrides (min-width: 900px)
     5. shared header/footer/buttons      10. mid range (640–899 px)
   Everything for the apply pages and for moodah.shop is APPENDED at the end of
   this file, after the marker, by the other two builders.
   ========================================================================== */

/* 1. FONTS — self-hosted, no Google Fonts request at runtime ---------------- */
/* Generated by scripts/subset-fonts.mjs — WOFF2 subsets (Latin, Latin-1 and the
   punctuation the pages use) of the @expo-google-fonts TTFs the apps ship. Re-run
   `pnpm --filter @moodah/public fonts` after changing the page texts; `build:sites`
   refuses a page that uses a character outside the subset. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/archivo-400.6be31a82.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/archivo-500.e7ad6ed5.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/archivo-600.ce98af6b.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/archivo-700.f9677f2a.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/archivo-800.d07d61dc.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400.48a2fa51.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700.700901fb.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}

/* 2. TOKENS ---------------------------------------------------------------- */

:root {
  --ink: #0a0a0a;
  --ink-800: #2a2a2a;
  --grey-700: #4a4a4a;
  --grey-600: #5a5a5a;
  --grey-550: #6a6a6a;
  --grey-500: #7a7a7a;
  --grey-450: #8a8a8a;
  --grey-400: #9a9a9a;
  --grey-350: #b3b3b3;
  --grey-on-ink: #c8c8c8;
  --line-300: #dcdcdc;
  --line-250: #e2e2e2;
  --line-200: #ececec;
  --line-150: #ededed;
  --line-100: #f0f0f0;
  --warm-100: #f4f3f1;
  --warm-150: #f3f2f0;
  --warm-200: #f2f1ef;
  --accent: #b8102b;
  --accent-line: #f0d6db;
  --accent-surface: #fdf6f7;
  --white: #ffffff;

  --font-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --page-max: 1280px;
  --gutter: 20px; /* mobile side padding (boards P1/P3/P6) */
  --gutter-desktop: 48px; /* desktop side padding (boards P2/P4/P7) */
  --header-height: 56px;
}

/* 3. BASE ------------------------------------------------------------------ */

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

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

/* Pages scroll up and down only: nothing may widen the page past the screen
   (clip, unlike hidden, keeps position: sticky working). */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Skip link — visible only on keyboard focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--white);
  font: 700 11px/1 var(--font-ui);
  letter-spacing: 0.1em;
  padding: 14px 16px;
}

.skip-link:focus {
  left: 0;
}

/* The page column: full width on a phone, 640 in the mid range, the boards'
   1280 page on a desktop. Every page wraps header + main + footer in it. */
.page {
  margin: 0 auto;
  background: var(--white);
  /* the boards' column: header, main, footer — a short page keeps its footer
     at the bottom of the window instead of floating mid-screen */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page > main {
  flex: 1 0 auto;
}

/* 4. UTILITIES ------------------------------------------------------------- */

.u-mobile-only {
  display: inline;
}

.u-desktop-only {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 5. SHARED HEADER / FOOTER / BUTTONS -------------------------------------- */

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-100);
  background: var(--white);
}

/* Only the seller landing sticks to the top on a phone (board P1). */
.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.brand-mark {
  font: 800 17px/1 var(--font-ui);
  letter-spacing: -0.03em;
}

/* moodah.shop draws the wordmark one step larger and tighter (boards P6/P7). */
.site-buyer .brand-mark {
  font-size: 18px;
  letter-spacing: -0.035em;
}

.brand-tag {
  font: 400 8px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--grey-500);
  border: 1px solid var(--line-250);
  padding: 3px 5px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The in-page nav words (How it works / Why Moodah / Questions) — desktop only. */
.nav-link {
  display: none;
  font: 500 13px/1 var(--font-ui);
}

.nav-link:hover {
  color: var(--grey-550);
}

.hdr-link {
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.hdr-link:hover {
  color: var(--grey-550);
}

.hdr-btn {
  background: var(--ink);
  color: var(--white);
  font: 700 10px/1 var(--font-ui);
  letter-spacing: 0.1em;
  padding: 11px 12px;
  white-space: nowrap;
}

.hdr-btn:hover {
  background: var(--ink-800);
}

.site-footer {
  margin-top: 20px;
  padding: 30px var(--gutter);
  border-top: 1px solid var(--line-100);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-buyer .site-footer {
  margin-top: 26px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.06em;
}

.footer-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-links a:hover {
  color: var(--grey-550);
}

.footer-meta {
  font: 400 10px/1.8 var(--font-mono);
  color: var(--grey-400);
}

/* Buttons. The boards draw them as full-width blocks with a fixed height and
   the label centred on the line box. */
.btn {
  display: block;
  width: 100%;
  border: 0;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-ui);
}

.btn-primary {
  height: 54px;
  background: var(--ink);
  color: var(--white);
  font: 700 12px/54px var(--font-ui);
  letter-spacing: 0.14em;
}

.btn-primary:hover {
  background: var(--ink-800);
}

/* The white button inside the black call-to-action block. */
.btn-invert {
  height: 52px;
  background: var(--white);
  color: var(--ink);
  font: 700 11px/52px var(--font-ui);
  letter-spacing: 0.14em;
}

.btn-invert:hover {
  background: var(--line-200);
}

/* Outlined button that fills with ink on hover (thank-you / legal / 404). */
.btn-outline {
  height: 52px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: 700 11px/50px var(--font-ui);
  letter-spacing: 0.14em;
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--white);
}

/* 6. SHARED SECTIONS ------------------------------------------------------- */

.section {
  --section-gap: 14px;
  padding: 34px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  scroll-margin-top: calc(var(--header-height) + 8px);
}

.section-label {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--grey-500);
}

.section-body {
  display: flex;
  flex-direction: column;
}

/* 7. SELLER LANDING — index.html (boards P1 / P2) -------------------------- */

.hero-photo {
  height: 300px;
  overflow: hidden;
  background: var(--warm-150);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.hero-copy {
  padding: 30px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-title {
  font: 800 34px/1.05 var(--font-ui);
  letter-spacing: -0.035em;
}

.hero-pitch {
  font: 400 15px/1.55 var(--font-ui);
  color: var(--grey-700);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.hero-login {
  text-align: center;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: 0.06em;
  padding-top: 6px;
}

.hero-login a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-login a:hover {
  color: var(--grey-550);
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-200);
  border-top: 1px solid var(--line-200);
  border-bottom: 1px solid var(--line-200);
  margin-top: 30px;
}

.fact {
  background: var(--white);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fact-n {
  font: 800 22px/1 var(--font-ui);
  letter-spacing: -0.02em;
}

.fact-l {
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--grey-500);
}

.section--who {
  --section-gap: 12px;
}

.who-copy {
  font: 400 15px/1.6 var(--font-ui);
  color: var(--ink-800);
}

.section--how {
  --section-gap: 16px;
}

.step {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line-100);
}

.step-n {
  font: 700 10px/1.5 var(--font-mono);
  color: var(--grey-400);
  flex: none;
  width: 22px;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.step-t {
  font: 600 15px/1.3 var(--font-ui);
}

.step-d {
  font: 400 13px/1.55 var(--font-ui);
  color: var(--grey-550);
}

.section--why {
  --section-gap: 16px;
}

.why-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.why-card {
  border: 1px solid var(--line-150);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.why-t {
  font: 700 16px/1.25 var(--font-ui);
  letter-spacing: -0.01em;
}

.why-d {
  font: 400 13px/1.6 var(--font-ui);
  color: var(--grey-600);
}

.need {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line-100);
  font: 400 14px/1.5 var(--font-ui);
}

.need .check {
  flex: none;
  width: 12px;
  height: 12px;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 0;
  border-top: 1px solid var(--line-100);
}

.faq-q {
  font: 600 15px/1.3 var(--font-ui);
}

.faq-a {
  font: 400 13px/1.6 var(--font-ui);
  color: var(--grey-600);
}

.cta {
  padding: 36px var(--gutter) 0;
}

.cta-inner {
  background: var(--ink);
  color: var(--white);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta-title {
  font: 800 24px/1.15 var(--font-ui);
  letter-spacing: -0.025em;
}

.cta-sub {
  font: 400 13px/1.6 var(--font-ui);
  color: var(--grey-on-ink);
}

/* 8. LEGAL PAGES AND 404 (no board — same tokens and rhythm) --------------- */

.doc {
  padding: 26px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.doc-note {
  font: 400 9px/1.6 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--grey-350);
}

.doc-title {
  font: 800 24px/1.18 var(--font-ui);
  letter-spacing: -0.02em;
}

.doc p:not(.doc-note) {
  font: 400 14px/1.6 var(--font-ui);
  color: var(--grey-700);
}

.doc-list {
  border: 1px solid var(--accent-line);
  background: var(--accent-surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font: 400 13px/1.6 var(--font-ui);
  color: var(--ink-800);
}

.doc-list .cross {
  flex: none;
  width: 9px;
  height: 9px;
  color: var(--accent);
}

.doc-back {
  padding: 30px var(--gutter) 0;
}

.notfound {
  padding: 64px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.notfound-number {
  font: 800 56px/1 var(--font-ui);
  letter-spacing: -0.04em;
}

.notfound-title {
  font: 800 24px/1.2 var(--font-ui);
  letter-spacing: -0.02em;
}

.notfound-body {
  font: 400 14px/1.6 var(--font-ui);
  color: var(--grey-700);
}

.notfound .btn-outline {
  margin-top: 14px;
  width: 100%;
}

/* 9. DESKTOP — the boards drawn at 1280 (P2 / P4 / P7) --------------------- */

@media (min-width: 900px) {
  :root {
    --header-height: 72px;
  }

  .page {
    max-width: var(--page-max);
  }

  .u-mobile-only {
    display: none;
  }

  .u-desktop-only {
    display: inline;
  }

  /* Header ---------------------------------------------------------------- */
  .site-header {
    padding: 0 var(--gutter-desktop);
  }

  .site-header--sticky {
    position: static;
  }

  .brand {
    gap: 9px;
  }

  .brand-mark {
    font-size: 22px;
  }

  .brand-tag {
    font-size: 9px;
    padding: 4px 6px;
  }

  .site-nav {
    gap: 28px;
  }

  .nav-link {
    display: inline;
  }

  .hdr-link {
    font-size: 12px;
    text-underline-offset: 4px;
  }

  .hdr-btn {
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 15px 20px;
  }

  /* Sections -------------------------------------------------------------- */
  .section {
    padding: 64px var(--gutter-desktop);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    border-bottom: 1px solid var(--line-200);
    scroll-margin-top: 0;
  }

  /* Hero ------------------------------------------------------------------ */
  .hero {
    display: flex;
    border-bottom: 1px solid var(--line-200);
  }

  .hero-photo {
    order: 2;
    width: 520px;
    flex: none;
    height: auto;
  }

  .hero-photo img {
    object-position: 50% 50%;
  }

  .hero-copy {
    order: 1;
    flex: 1;
    min-width: 0;
    padding: 72px var(--gutter-desktop);
    justify-content: center;
    gap: 20px;
  }

  .hero-title {
    font-size: 60px;
    line-height: 1.02;
    letter-spacing: -0.04em;
    max-width: 560px;
  }

  .hero-pitch {
    font-size: 17px;
    max-width: 520px;
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
  }

  .hero-actions .btn-primary {
    width: auto;
    height: auto;
    padding: 20px 32px;
    font: 700 12px/1 var(--font-ui);
    letter-spacing: 0.14em;
  }

  .hero-login {
    padding-top: 0;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .hero-login a {
    text-underline-offset: 4px;
  }

  /* Facts ----------------------------------------------------------------- */
  .facts {
    grid-template-columns: repeat(4, 1fr);
    border-top: 0;
    margin-top: 0;
  }

  .fact {
    padding: 28px 32px;
    gap: 8px;
  }

  .fact-n {
    font-size: 32px;
    letter-spacing: -0.03em;
  }

  /* Who we are ------------------------------------------------------------ */
  .who-copy {
    font-size: 20px;
    line-height: 1.55;
    max-width: 720px;
  }

  /* How it works — five cells in a hairline grid --------------------------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line-200);
    border: 1px solid var(--line-200);
  }

  .step {
    background: var(--white);
    flex-direction: column;
    gap: 10px;
    padding: 24px 20px;
    border-top: 0;
  }

  .step-n {
    width: auto;
    line-height: 1;
  }

  /* the title and the description become cells of the column */
  .step-body {
    display: contents;
  }

  .step-d {
    font-size: 12px;
  }

  /* Why sell on Moodah ---------------------------------------------------- */
  .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .why-card {
    padding: 26px;
    gap: 9px;
  }

  .why-t {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  .why-d {
    font-size: 14px;
  }

  /* What you need --------------------------------------------------------- */
  .needs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }

  .need {
    padding: 16px 0;
    font-size: 15px;
  }

  .need .check {
    width: 13px;
    height: 13px;
  }

  /* Questions ------------------------------------------------------------- */
  .faqs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }

  .faq {
    padding: 20px 0;
    gap: 8px;
  }

  .faq-q {
    font-size: 16px;
  }

  .faq-a {
    font-size: 14px;
  }

  /* Call to action — a full-width black band ------------------------------ */
  .cta {
    padding: 0;
  }

  .cta-inner {
    padding: 64px var(--gutter-desktop);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .cta-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cta-title {
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-width: 560px;
  }

  .cta-sub {
    font-size: 15px;
    max-width: 460px;
  }

  .cta-inner .btn-invert {
    width: auto;
    height: auto;
    flex: none;
    padding: 22px 36px;
    font: 700 12px/1 var(--font-ui);
    letter-spacing: 0.14em;
  }

  /* Footer ---------------------------------------------------------------- */
  .site-footer,
  .site-buyer .site-footer {
    margin-top: 0;
    padding: 34px var(--gutter-desktop);
    border-top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  .footer-links {
    gap: 26px;
    font-size: 12px;
  }

  .footer-links a {
    text-decoration: none;
  }

  .footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Legal + 404 ----------------------------------------------------------- */
  .doc {
    padding: 56px var(--gutter-desktop) 0;
    gap: 18px;
  }

  .doc-title {
    font-size: 34px;
  }

  .doc p:not(.doc-note) {
    font-size: 15px;
    line-height: 1.7;
  }

  .doc-back {
    padding: 40px var(--gutter-desktop) 56px;
  }

  .doc-back .btn-outline {
    width: auto;
    display: inline-block;
    padding: 0 36px;
  }

  .notfound {
    padding: 96px var(--gutter-desktop) 96px;
  }

  .notfound-number {
    font-size: 72px;
  }

  .notfound .btn-outline {
    width: auto;
    display: inline-block;
    padding: 0 36px;
  }
}

/* 10. MID RANGE — the phone layout, content capped at 640 ------------------ */

@media (min-width: 640px) and (max-width: 899px) {
  .page {
    max-width: 640px;
    border-left: 1px solid var(--line-100);
    border-right: 1px solid var(--line-100);
    min-height: 100vh;
  }
}

/* =============================================================================
   APPEND BELOW THIS LINE ONLY.
   The apply pages (apply/, apply/thank-you/) and moodah.shop (moodah/) add
   their own blocks here, each one opened by a comment that names its pages.
   ========================================================================== */

/* =============================================================================
   MOODAH.SHOP — the public main page (boards P6 mobile / P7 desktop)
   Owner: BUYER-SITE.  Pages: moodah/index.html and moodah/terms|privacy|contact.
   The shell comes from the blocks above (.page .site-header .brand .site-nav
   .nav-link .hdr-link .section .section-label .site-footer .footer-links
   .footer-meta .doc .doc-back .btn-outline .u-mobile-only .u-desktop-only);
   only the hero, the HOW IT WORKS points and the photo strip are new, and they
   are all prefixed mm-.  Desktop overrides are in the one media query at the
   end of this block.
   ========================================================================== */

/* Hero — P6: a 330 px photo above the wordmark; P7: copy left, 2x2 grid right.
   The three .mm-tile photos are the desktop grid and are hidden on a phone;
   the phone shows two of them again in .mm-strip, below HOW IT WORKS. */
.mm-hero {
  display: flex;
  flex-direction: column;
}

.mm-hero-media {
  height: 330px;
  overflow: hidden;
  background: var(--warm-150);
}

.mm-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-hero-img {
  object-position: 50% 40%;
}

.mm-tile {
  display: none;
}

.mm-hero-copy {
  padding: 32px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mm-hero-title {
  font: 800 38px/1.02 var(--font-ui);
  letter-spacing: -0.04em;
}

.mm-hero-pitch {
  font: 400 16px/1.5 var(--font-ui);
  color: var(--ink-800);
}

/* Store buttons — the boards' plain black blocks with typographic labels, not
   the official Apple / Google badges.  The destinations are set at launch. */
.mm-stores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.mm-store {
  height: 56px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.mm-store:hover {
  background: var(--ink-800);
}

.mm-store-sm {
  /* the boards' light grey on ink for the small caps line */
  font: 400 8px/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: #b8b8b8;
}

.mm-store-lg {
  font: 700 14px/1 var(--font-ui);
  letter-spacing: 0.02em;
}

/* HOW IT WORKS — four buyer points, a hairline list on a phone, 2x2 cards on
   a desktop.  The section frame itself is the shared .section. */
.section--points {
  --section-gap: 16px;
}

.mm-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mm-point {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 0;
  border-top: 1px solid var(--line-100);
}

.mm-point-t {
  font: 700 17px/1.25 var(--font-ui);
  letter-spacing: -0.015em;
}

.mm-point-d {
  font: 400 13px/1.6 var(--font-ui);
  color: var(--grey-600);
}

/* The 2-up photo strip — phone only (board P6); on a desktop the same photos
   are in the hero grid. */
.mm-strip {
  padding: 30px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mm-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--warm-100);
}

/* moodah.shop desktop — board P7 ------------------------------------------ */

@media (min-width: 900px) {
  .mm-hero {
    /* media first in the source (it is above the wordmark on a phone), so the
       row is reversed to put the copy on the left and the grid on the right */
    flex-direction: row-reverse;
    border-bottom: 1px solid var(--line-200);
  }

  .mm-hero-media {
    width: 560px;
    flex: none;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-200);
    border-left: 1px solid var(--line-200);
  }

  .mm-hero-media img {
    height: 280px;
    background: var(--warm-100);
  }

  .mm-hero-img {
    object-position: 50% 50%;
  }

  .mm-tile {
    display: block;
  }

  .mm-hero-copy {
    flex: 1;
    min-width: 0;
    padding: 86px var(--gutter-desktop);
    justify-content: center;
    gap: 22px;
  }

  .mm-hero-title {
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .mm-hero-pitch {
    font-size: 20px;
    max-width: 520px;
  }

  .mm-stores {
    flex-direction: row;
    gap: 14px;
    padding-top: 10px;
  }

  .mm-store {
    height: 60px;
    min-width: 190px;
    padding: 0 20px;
  }

  .mm-store-lg {
    font-size: 15px;
    letter-spacing: 0;
  }

  .mm-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .mm-point {
    border: 1px solid var(--line-150);
    padding: 26px;
    gap: 9px;
  }

  .mm-point-t {
    font-size: 20px;
    line-height: 1.2;
  }

  .mm-point-d {
    font-size: 14px;
  }

  .mm-strip {
    display: none;
  }
}

/* Board P7 draws the moodah.shop wordmark at 22 px on a desktop; the shared
   `.site-buyer .brand-mark` size above is more specific than the desktop
   `.brand-mark` rule, so the buyer site restates it here. */
@media (min-width: 900px) {
  .site-buyer .brand-mark {
    font-size: 22px;
  }
}

/* =============================================================================
   APPLY — the apply form and its confirmation.
   Owner: APPLY.  Pages: apply/index.html (boards P3 mobile / P4 desktop) and
   apply/thank-you/index.html (board P5, mobile + desktop).
   The shell comes from the blocks above (.page .skip-link .site-header .brand
   .brand-mark .brand-tag .site-nav .hdr-link .site-footer .footer-meta .btn
   .btn-primary .btn-outline .section-label .visually-hidden .u-mobile-only
   .u-desktop-only); new here are the six form fields, their error states, the
   WHAT HAPPENS NEXT panel and the thank-you column, all prefixed ap- / ty-.
   Desktop overrides are in the one media query at the end of this block.
   ========================================================================== */

/* Both pages are a full-height column: the desktop split (P4/P5) fills the
   viewport, and on a phone the thank-you button sits on the bottom edge. */
.page-apply,
.page-thanks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-apply > .site-header,
.page-thanks > .site-header {
  flex: none;
}

/* =============================================================================
   APPLY FORM (board P3)
   ========================================================================== */

.ap-head {
  padding: 28px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-title {
  font: 800 28px/1.1 var(--font-ui);
  letter-spacing: -0.03em;
}

.ap-intro {
  font: 400 14px/1.55 var(--font-ui);
  color: var(--grey-700);
}

.ap-form {
  padding: 26px var(--gutter) 0;
  display: flex;
  flex-direction: column;
}

.ap-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ap-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.ap-label {
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--grey-500);
}

.ap-input,
.ap-area,
.ap-phone {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line-300);
  color: var(--ink);
}

.ap-input {
  height: 52px;
  padding: 0 14px;
  font: 400 15px/1 var(--font-ui);
}

.ap-area {
  display: block;
  height: 96px;
  padding: 12px 14px;
  font: 400 14px/1.5 var(--font-ui);
  resize: none;
}

/* +961 | number, one shared border (the same row as the apps' PhoneInput). */
.ap-phone {
  display: flex;
  height: 52px;
}

.ap-prefix {
  flex: none;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 14px/1 var(--font-ui);
  color: var(--grey-700);
  border-right: 1px solid #e0e0e0;
}

.ap-phone-input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0 14px;
  background: var(--white);
  color: var(--ink);
  font: 400 15px/1 var(--font-ui);
}

.ap-input::placeholder,
.ap-area::placeholder,
.ap-phone-input::placeholder {
  color: var(--grey-400);
  opacity: 1;
}

/* Touch screens: iOS Safari zooms into any field whose text is under 16px when
   it is tapped, and the zoomed page then slides sideways. The boards draw
   14–15px; on a touch screen the fields (and the +961 beside the number) are
   16px so no tap zooms. A mouse keeps the boards' sizes. Pinch-zoom stays
   free: the viewport tag sets no maximum-scale. */
@media (hover: none) and (pointer: coarse) {
  .ap-input,
  .ap-area,
  .ap-phone-input,
  .ap-prefix {
    font-size: 16px;
  }
}

/* The row owns the focus ring so it does not cut through the +961 divider. */
.ap-phone:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.ap-phone-input:focus-visible {
  outline: none;
}

/* Errors — no board. The design system's red: a #b8102b border on the field
   and a 12 px Archivo 500 line under it; the form-level line is the shared
   notice box (accent border, accent surface). */
.ap-input.is-error,
.ap-area.is-error,
.ap-phone.is-error {
  border-color: var(--accent);
}

.ap-err {
  font: 500 12px/1.5 var(--font-ui);
  color: var(--accent);
}

.ap-err[hidden] {
  display: none;
}

.ap-formerr {
  margin-top: 22px;
  border: 1px solid var(--accent-line);
  background: var(--accent-surface);
  padding: 16px;
  font: 500 13px/1.5 var(--font-ui);
  color: var(--accent);
}

.ap-formerr[hidden] {
  display: none;
}

/* Focused by script when a submit fails; the alert is read, not outlined. */
.ap-formerr:focus {
  outline: none;
}

/* The honeypot: off-screen, never display:none — a bot must be able to fill it. */
.ap-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ap-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ap-btn {
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* Submitting: the label dims and a spinner joins it (the apps' Button shows an
   ActivityIndicator in the same place). Only then does the button go flex, so
   the board's 54 px line box centres the label the rest of the time. */
.ap-btn.is-busy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ap-btn.is-busy .ap-btn-label {
  opacity: 0.45;
}

.ap-btn:disabled {
  cursor: default;
}

.ap-spin {
  display: none;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: ap-spin 0.7s linear infinite;
}

.ap-btn.is-busy .ap-spin {
  display: block;
}

@keyframes ap-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-spin {
    animation-duration: 2.4s;
  }
}

.ap-legal {
  font: 400 11px/1.7 var(--font-ui);
  color: var(--grey-400);
}

.ap-legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ap-legal a:hover {
  color: var(--ink);
}

/* WHAT HAPPENS NEXT is drawn on the desktop board only (P4). */
.ap-next {
  display: none;
}

/* =============================================================================
   THANK YOU (board P5 · mobile)
   ========================================================================== */

.ty-split {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ty-main {
  flex: 1;
  padding: 40px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ty-check {
  flex: none;
  align-self: flex-start;
  width: 46px;
  height: 46px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ty-check svg {
  display: block;
  width: 22px;
  height: 22px;
}

.ty-title {
  font: 800 30px/1.1 var(--font-ui);
  letter-spacing: -0.03em;
}

.ty-body {
  font: 400 15px/1.6 var(--font-ui);
  color: var(--grey-700);
}

.ty-tip {
  margin-top: 6px;
  border: 1px solid var(--line-150);
  background: #fafaf9;
  padding: 16px;
  font: 400 13px/1.6 var(--font-ui);
  color: var(--grey-600);
}

/* The board keeps the button on the bottom edge of the screen; the auto margin
   eats the free space and the 8 px joins the column's 14 px gap into 22 px. */
.ty-actions {
  margin-top: auto;
  padding: 8px 0 26px;
}

.ty-terms {
  font: 600 13px/1 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ty-terms:hover {
  color: var(--grey-550);
}

/* The photo column is drawn on the desktop frame only. */
.ty-photo {
  display: none;
}

/* =============================================================================
   DESKTOP — boards P4 and P5 · desktop, from 900 px
   ========================================================================== */

@media (min-width: 900px) {
  /* --- apply (P4): the form left, WHAT HAPPENS NEXT in a 520 px column ---- */
  .ap-split {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
  }

  .ap-main {
    min-width: 0;
    padding: 64px var(--gutter-desktop);
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .ap-head {
    padding: 0;
  }

  .ap-title {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-width: 520px;
  }

  .ap-intro {
    font-size: 16px;
    max-width: 480px;
  }

  .ap-form {
    padding: 0;
    gap: 26px;
  }

  .ap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
    max-width: 640px;
  }

  .ap-formerr {
    margin-top: 0;
    max-width: 640px;
  }

  .ap-actions {
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    max-width: 640px;
  }

  .ap-actions .btn-primary {
    width: auto;
    height: auto;
    padding: 20px 40px;
    font: 700 12px/1 var(--font-ui);
    letter-spacing: 0.14em;
  }

  .ap-legal {
    font-size: 12px;
    max-width: 340px;
  }

  /* P4 has no footer: the two full-height columns run to the bottom edge. */
  .page-apply .site-footer {
    display: none;
  }

  .ap-next {
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: #fafaf9;
    border-left: 1px solid var(--line-200);
    padding: 64px 40px;
  }

  .ap-steps {
    display: flex;
    flex-direction: column;
  }

  .ap-step {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--line-200);
  }

  .ap-step-n {
    flex: none;
    width: 22px;
    font: 700 10px/1.5 var(--font-mono);
    color: var(--grey-400);
  }

  .ap-step-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .ap-step-t {
    font: 600 14px/1.3 var(--font-ui);
  }

  .ap-step-d {
    font: 400 12px/1.55 var(--font-ui);
    color: var(--grey-550);
  }

  .ap-note {
    border: 1px solid var(--line-150);
    background: var(--white);
    padding: 18px;
    font: 400 13px/1.6 var(--font-ui);
    color: var(--grey-600);
  }

  /* --- thank you (P5 · desktop): the copy left, a 460 px photo right ------ */
  .ty-split {
    flex-direction: row;
    min-height: 476px;
  }

  .ty-main {
    min-width: 0;
    padding: 80px var(--gutter-desktop);
    gap: 18px;
    justify-content: center;
  }

  .ty-check {
    width: 52px;
    height: 52px;
  }

  .ty-check svg {
    width: 24px;
    height: 24px;
  }

  .ty-title {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    max-width: 620px;
  }

  .ty-body {
    font-size: 17px;
    line-height: 1.55;
    max-width: 560px;
  }

  /* The tip box is the phone board's; the desktop board folds it into the
     body sentence ("Keep a few product photos ready."). */
  .ty-tip {
    display: none;
  }

  .ty-actions {
    margin-top: 0;
    padding: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .ty-actions .btn-outline {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 19px 30px;
    font: 600 12px/1 var(--font-ui);
    letter-spacing: 0.12em;
  }

  .ty-photo {
    display: block;
    flex: none;
    width: 460px;
    background: var(--warm-150);
    overflow: hidden;
  }

  .ty-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}