/* ============================================================
   MENTIONED HOMEPAGE
   Per brief §5 section specs (2026-05-25).
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.mn-body .mn-hero {
  background: var(--mn-cream);
  padding: 104px 56px 112px;
}
.mn-body .mn-hero__wrap {
  max-width: var(--mn-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}
.mn-body .mn-hero__copy { min-width: 0; }
.mn-body .mn-hero__h1 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 120px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--mn-forest);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.mn-body .mn-hero__h1 .mn-accent { font-size: 118px; }
.mn-body .mn-hero__lede {
  font-family: var(--mn-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mn-ink-mid);
  max-width: 480px;
  margin: 0 0 2.5rem;
}
.mn-body .mn-hero__btns {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Hero floating cards on the right */
.mn-body .mn-hero__cards {
  position: relative;
  height: 540px;
}
.mn-body .mn-hero__fc1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  background: var(--mn-paper);
  border: 0.5px solid var(--mn-hairline);
  border-radius: var(--mn-r-card);
  padding: 28px;
}
.mn-body .mn-fc-eyebrow {
  font-family: var(--mn-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mn-ink-mid);
  margin-bottom: 12px;
}
.mn-body .mn-fc-name {
  font-family: var(--mn-font-body);
  font-weight: 500;
  font-size: 28px;
  color: var(--mn-forest);
  margin-bottom: 6px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.mn-body .mn-fc-meta {
  font-family: var(--mn-font-body);
  font-size: 14px;
  color: var(--mn-ink-mid);
  margin-bottom: 20px;
}
.mn-body .mn-fc-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 0.5px solid var(--mn-hairline);
}
.mn-body .mn-fc-stat__l {
  font-family: var(--mn-font-body);
  font-size: 13px;
  color: var(--mn-ink-mid);
}
.mn-body .mn-fc-stat__v {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--mn-forest);
  line-height: 1;
}
.mn-body .mn-fc-stat__v em {
  font-family: var(--mn-font-body);
  font-style:normal;
  color: var(--mn-teal-mid);
  font-weight: 400;
  font-size: 30px;
}

.mn-body .mn-hero__fc2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 290px;
  background: var(--mn-paper);
  border: 0.5px solid var(--mn-hairline);
  border-radius: var(--mn-r-card);
  padding: 22px;
}
.mn-body .mn-fc2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mn-body .mn-fc2-av {
  width: 38px;
  height: 38px;
  border-radius: var(--mn-r-avatar);
  background: var(--mn-forest);
  color: var(--mn-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  font-family: var(--mn-font-body);
  letter-spacing: 0.05em;
}
.mn-body .mn-fc2-name {
  font-family: var(--mn-font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--mn-forest);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.mn-body .mn-fc2-role {
  font-family: var(--mn-font-body);
  font-size: 12px;
  color: var(--mn-ink-mid);
  margin-top: 3px;
  font-style:normal;
}
.mn-body .mn-fc2-msg {
  font-family: var(--mn-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mn-ink-mid);
  font-style:normal;
  border-left: 2px solid var(--mn-coral);
  padding-left: 12px;
  font-weight: 400;
}

.mn-body .mn-hero__fc3 {
  position: absolute;
  top: 200px;
  right: 70px;
  background: var(--mn-forest);
  color: var(--mn-cream);
  padding: 10px 18px;
  border-radius: var(--mn-r-chip);
  font-family: var(--mn-font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mn-body .mn-fc3-dot {
  width: 6px;
  height: 6px;
  background: var(--mn-teal-mid);
  border-radius: 50%;
}

/* ============================================================
   SEARCH STRIP
   ============================================================ */

.mn-body .mn-search-strip {
  background: var(--mn-cream);
  padding: 0 56px 112px;
}
.mn-body .mn-search {
  max-width: 820px;
  margin: 0 auto;
  background: var(--mn-paper);
  border: 0.5px solid var(--mn-hairline);
  border-radius: var(--mn-r-card);
  padding: 14px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mn-body .mn-search__field {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 18px;
  border-right: 0.5px solid var(--mn-hairline);
  min-width: 0;
}
.mn-body .mn-search__field:last-of-type { border-right: none; }
.mn-body .mn-search__field--narrow { flex: 0.7; }
.mn-body .mn-search__label {
  font-family: var(--mn-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mn-teal-mid);
  margin-bottom: 4px;
}
.mn-body .mn-search__input {
  font-family: var(--mn-font-body);
  font-size: 14px;
  color: var(--mn-ink);
  font-weight: 400;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  min-width: 0;
  width: 100%;
}
.mn-body .mn-search__input::placeholder { color: var(--mn-ink-mid); }
.mn-body .mn-search__btn {
  font-family: var(--mn-font-body);
  background: var(--mn-coral);
  color: var(--mn-coral-light);
  border: none;
  padding: 0 30px;
  /* Flipped from --mn-r-input (square corner top-right) so the 90° corner sits BOTTOM-RIGHT. */
  border-radius: 14px 14px 0 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mn-body .mn-search__btn:hover { transform: translateY(-2px); background: var(--mn-coral-dark); color: var(--mn-coral-light); }

/* Hero "Browse the directory" CTA recolored coral (#12). */
.mn-body .mn-btn-ghost--coral { color: var(--mn-coral); border-color: var(--mn-coral); }
.mn-body .mn-btn-ghost--coral:hover { background: var(--mn-coral); color: var(--mn-cream); border-color: var(--mn-coral); }
.mn-body .mn-btn-ghost--coral svg, .mn-body .mn-btn-ghost--coral path { stroke: currentColor; fill: currentColor; }

/* Homepage "How Mentioned Works" — step 03 number in coral per request.
   Higher specificity (.mn-step .mn-step__n--accent) so it beats the later
   `.mn-body .mn-step__n` base rule regardless of source order. */
.mn-body .mn-step .mn-step__n--accent { color: var(--mn-coral); }

/* ============================================================
   STATS — dark forest
   ============================================================ */

.mn-body .mn-stats {
  background: var(--mn-forest);
  padding: 112px 56px;
}
.mn-body .mn-stats__wrap {
  max-width: var(--mn-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
  align-items: center;
}
.mn-body .mn-stats__copy { min-width: 0; }
.mn-body .mn-stats__h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-cream);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.mn-body .mn-stats__h2 .mn-accent-dark { font-size: 70px; }
.mn-body .mn-stats__sub {
  font-family: var(--mn-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.mn-body .mn-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.mn-body .mn-stat {
  padding: 32px 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}
.mn-body .mn-stat__num {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 88px;
  line-height: 0.9;
  color: var(--mn-teal-mid);
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}
.mn-body .mn-stat__num em {
  font-family: var(--mn-font-body);
  font-style:normal;
  color: var(--mn-teal-lighter);
  font-weight: 400;
  font-size: 86px;
  letter-spacing: -0.015em;
}
.mn-body .mn-stat__label {
  font-family: var(--mn-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

/* ============================================================
   COMMUNITY FILTER
   ============================================================ */

.mn-body .mn-comm {
  background: var(--mn-paper);
  padding: 112px 56px;
}
.mn-body .mn-comm__head {
  max-width: var(--mn-container-max);
  margin: 0 auto 3.5rem;
}
.mn-body .mn-comm__h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-forest);
  margin: 0 0 1.25rem;
  max-width: 760px;
  text-transform: uppercase;
}
.mn-body .mn-comm__h2 .mn-accent { font-size: 70px; }
.mn-body .mn-comm__sub {
  font-family: var(--mn-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mn-ink-mid);
  max-width: 560px;
  margin: 0;
}
.mn-body .mn-comm__wrap {
  max-width: var(--mn-container-max);
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mn-body .mn-comm__tag {
  font-family: var(--mn-font-body);
  font-size: 14px;
  font-weight: 400;
  padding: 9px 20px;
  border-radius: 999px; /* #13 fully rounded */
  border: 0.5px solid var(--mn-hairline);
  color: var(--mn-ink-mid);
  cursor: pointer;
  background: var(--mn-paper);
  line-height: 1.3;
  text-decoration: none; /* #13 now an <a> link */
  display: inline-block;
}
.mn-body .mn-comm__tag:hover {
  border-color: var(--mn-forest);
  color: var(--mn-forest);
}
.mn-body .mn-comm__tag.is-on {
  background: var(--mn-forest);
  color: var(--mn-teal-lighter);
  border-color: var(--mn-forest);
}

/* ============================================================
   FEATURED LISTINGS
   ============================================================ */

.mn-body .mn-feat {
  background: var(--mn-cream);
  padding: 112px 56px;
}
.mn-body .mn-feat__head {
  max-width: var(--mn-container-max);
  margin: 0 auto 3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}
.mn-body .mn-feat__left { max-width: 600px; }
.mn-body .mn-feat__h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-forest);
  margin: 0;
  text-transform: uppercase;
}
.mn-body .mn-feat__h2 .mn-accent { font-size: 70px; }
.mn-body .mn-feat__link {
  font-family: var(--mn-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--mn-forest);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mn-body .mn-feat__link:hover { gap: 14px; color: var(--mn-forest); }
.mn-body .mn-feat__cards {
  max-width: var(--mn-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mn-body .mn-card {
  background: var(--mn-paper);
  border: 0.5px solid var(--mn-hairline);
  border-radius: var(--mn-r-card);
  padding: 32px;
  cursor: pointer;
  color: inherit;
  display: block;
}
.mn-body .mn-card:hover {
  transform: translateY(-6px);
  border-color: rgba(29, 158, 117, 0.3);
  background: rgba(29, 158, 117, 0.04);
}
.mn-body .mn-card__eyebrow {
  font-family: var(--mn-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mn-ink-mid);
  margin-bottom: 14px;
}
.mn-body .mn-card__name {
  font-family: var(--mn-font-body);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--mn-forest);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.mn-body .mn-card__loc {
  font-family: var(--mn-font-body);
  font-style:normal;
  font-size: 14px;
  font-weight: 400;
  color: var(--mn-ink-mid);
  margin-bottom: 28px;
}
.mn-body .mn-card__stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 0.5px solid var(--mn-hairline);
}
.mn-body .mn-card__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 400;
  color: var(--mn-ink-mid);
  font-family: var(--mn-font-body);
}
.mn-body .mn-card__stat-v {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--mn-forest);
  line-height: 1;
}
.mn-body .mn-card__stat-v em {
  font-family: var(--mn-font-body);
  font-style:normal;
  color: var(--mn-teal-mid);
  font-weight: 400;
  font-size: 23px;
}
.mn-body .mn-card__tag {
  font-family: var(--mn-font-body);
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mn-teal-mid);
  background: rgba(29, 158, 117, 0.1);
  padding: 6px 12px;
  border-radius: var(--mn-r-badge);
  margin-top: 22px;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.mn-body .mn-how {
  background: var(--mn-paper);
  padding: 112px 56px;
}
.mn-body .mn-how__wrap {
  max-width: var(--mn-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 96px;
  align-items: flex-start;
}
.mn-body .mn-how__left {
  position: sticky;
  top: 120px;
}
.mn-body .mn-how__h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-forest);
  margin: 0;
  text-transform: uppercase;
}
.mn-body .mn-how__h2 .mn-accent { font-size: 58px; }
.mn-body .mn-how__right {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.mn-body .mn-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: flex-start;
}
.mn-body .mn-step__n {
  font-family: var(--mn-font-body);
  font-weight: 500;
  font-size: 72px;
  color: var(--mn-teal-mid);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.mn-body .mn-step__h {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--mn-forest);
  margin-bottom: 12px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.mn-body .mn-step__d {
  font-family: var(--mn-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mn-ink-mid);
  margin: 0;
}

/* ============================================================
   CTA BANNER (dark, centred — only section where centring is allowed)
   ============================================================ */

.mn-body .mn-cta {
  background: var(--mn-forest);
  padding: 120px 56px;
  position: relative;
  overflow: hidden;
}
.mn-body .mn-cta__circle {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: rgba(29, 158, 117, 0.08);
}
.mn-body .mn-cta__wrap {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.mn-body .mn-cta__h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 88px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-cream);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.mn-body .mn-cta__h2 .mn-accent-dark { font-size: 86px; }
.mn-body .mn-cta__sub {
  font-family: var(--mn-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  max-width: 560px;
  margin: 0 auto 1.25rem;
}
/* #24 register-new angle: second sub line + dual CTA */
.mn-body .mn-cta__sub--alt { color: rgba(255, 255, 255, 0.5); margin-bottom: 2.25rem; }
.mn-body .mn-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mn-body .mn-btn-cta-ghost {
  font-family: var(--mn-font-body);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--mn-cream);
  border: 1px solid rgba(244, 241, 236, 0.45);
  padding: 14px 30px;
  border-radius: var(--mn-r-btn);
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  transition: 0.16s;
}
.mn-body .mn-btn-cta-ghost:hover { transform: translateY(-2px); border-color: var(--mn-cream); color: var(--mn-cream); }

/* ============================================================
   HOMEPAGE RESPONSIVE — brief §8.4 breakpoints
   ============================================================ */

@media (max-width: 980px) {
  .mn-body .mn-hero { padding: 64px 24px 80px; }
  .mn-body .mn-hero__wrap { grid-template-columns: 1fr; gap: 40px; }
  .mn-body .mn-hero__h1 { font-size: 72px; }
  .mn-body .mn-hero__h1 .mn-accent { font-size: 70px; }
  .mn-body .mn-hero__cards { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .mn-body .mn-hero__fc1,
  .mn-body .mn-hero__fc2 { position: relative; width: 100%; top: auto; right: auto; bottom: auto; left: auto; }
  .mn-body .mn-hero__fc3 { position: relative; top: 0; right: 0; align-self: flex-start; }

  .mn-body .mn-search-strip { padding: 0 24px 64px; }
  .mn-body .mn-search { flex-direction: column; }
  .mn-body .mn-search__field { border-right: none; border-bottom: 0.5px solid var(--mn-hairline); }
  .mn-body .mn-search__field:last-of-type { border-bottom: none; }
  .mn-body .mn-search__field--narrow { flex: 1; }

  .mn-body .mn-stats { padding: 64px 24px; }
  .mn-body .mn-stats__wrap { grid-template-columns: 1fr; gap: 48px; }
  .mn-body .mn-stats__h2 { font-size: 48px; }
  .mn-body .mn-stats__h2 .mn-accent-dark { font-size: 46px; }
  .mn-body .mn-stats__grid { grid-template-columns: 1fr; }
  .mn-body .mn-stat__num { font-size: 64px; }
  .mn-body .mn-stat__num em { font-size: 62px; }

  .mn-body .mn-comm { padding: 64px 24px; }
  .mn-body .mn-comm__h2 { font-size: 48px; }
  .mn-body .mn-comm__h2 .mn-accent { font-size: 46px; }

  .mn-body .mn-feat { padding: 64px 24px; }
  .mn-body .mn-feat__h2 { font-size: 48px; }
  .mn-body .mn-feat__h2 .mn-accent { font-size: 46px; }
  .mn-body .mn-feat__cards { grid-template-columns: 1fr; }

  .mn-body .mn-how { padding: 64px 24px; }
  .mn-body .mn-how__wrap { grid-template-columns: 1fr; gap: 48px; }
  .mn-body .mn-how__left { position: static; }
  .mn-body .mn-how__h2 { font-size: 40px; }
  .mn-body .mn-how__h2 .mn-accent { font-size: 38px; }

  .mn-body .mn-cta { padding: 80px 24px; }
  .mn-body .mn-cta__h2 { font-size: 56px; }
  .mn-body .mn-cta__h2 .mn-accent-dark { font-size: 54px; }
}

@media (max-width: 560px) {
  .mn-body .mn-hero__h1 { font-size: 56px; }
  .mn-body .mn-hero__h1 .mn-accent { font-size: 54px; }
  .mn-body .mn-card__name { font-size: 26px; }
  .mn-body .mn-stat__num { font-size: 48px; }
  .mn-body .mn-stat__num em { font-size: 46px; }
}