/* ============================================================
   MENTIONED STATIC PAGES
   Shared styles for the 7 Phase 1 page templates:
   coming-soon, about, contact, newsletter, privacy, terms, cookies.
   Ports the visual layer from:
     - mentioned-placeholder-pages.html
     - mentioned-legal-pages.html
   Uses .mn-* prefix per Culturis kit convention. Tokens come from
   style.css (forest/teal-mid/coral/cream + Oswald/Source Serif 4).
   ============================================================ */

/* ============================================================
   SHARED — used by coming-soon, about hero, contact hero, newsletter
   ============================================================ */

.mn-body .mn-static-page {
  padding: 120px 56px;
  background: var(--mn-cream);
  min-height: 60vh;
}
.mn-body .mn-static-page__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.mn-body .mn-static-page__h1 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mn-forest);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.mn-body .mn-static-page__h1 .mn-accent {
  font-size: 78px;
  letter-spacing: -0.015em;
}
.mn-body .mn-static-page__lede {
  font-family: var(--mn-font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--mn-ink-mid);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

/* ============================================================
   SIGNUP FORM — used by coming-soon + newsletter
   ============================================================ */

.mn-body .mn-signup-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  background: var(--mn-paper);
  border: 0.5px solid var(--mn-hairline);
  border-radius: var(--mn-r-card);
  padding: 10px;
}
.mn-body .mn-signup-form input[type="email"],
.mn-body .mn-signup-form input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-family: var(--mn-font-body);
  font-size: 15px;
  color: var(--mn-ink);
  background: transparent;
  min-width: 0;
}
.mn-body .mn-signup-form input::placeholder { color: var(--mn-ink-soft); }
.mn-body .mn-signup-form button {
  background: var(--mn-coral);
  color: var(--mn-coral-light);
  border: none;
  padding: 14px 26px;
  border-radius: var(--mn-r-input);
  font-family: var(--mn-font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.mn-body .mn-signup-form button:hover { transform: translateY(-2px); background: var(--mn-coral-dark); color: var(--mn-coral-light); }

/* Form status message (success / error feedback once handlers wired) */
.mn-body .mn-form-message {
  max-width: 480px;
  margin: 18px auto 0;
  padding: 12px 18px;
  border-radius: var(--mn-r-input);
  font-family: var(--mn-font-body);
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
.mn-body .mn-form-message.is-visible { display: block; }
.mn-body .mn-form-message.is-success {
  background: var(--mn-mint);
  color: var(--mn-forest);
}
.mn-body .mn-form-message.is-error {
  background: var(--mn-coral-light);
  color: var(--mn-coral-dark);
}
.mn-body .mn-static-fine {
  font-family: var(--mn-font-body);
  font-style:normal;
  font-size: 13px;
  color: var(--mn-ink-soft);
  margin-top: 24px;
}

/* ============================================================
   ABOUT — two-column sticky-left layout
   ============================================================ */

.mn-body .mn-about-content {
  padding: 96px 56px;
  background: var(--mn-paper);
}
.mn-body .mn-about-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
}
.mn-body .mn-about__left {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
.mn-body .mn-about__left h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--mn-forest);
  margin: 0;
}
.mn-body .mn-about__left h2 .mn-accent {
  font-size: 46px;
  text-transform: none;
}
.mn-body .mn-about__right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mn-body .mn-about__right p {
  font-family: var(--mn-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--mn-ink);
  margin: 0;
}
.mn-body .mn-about__right p.mn-has-dropcap::first-letter {
  font-family: var(--mn-font-body);
  font-size: 54px;
  line-height: 1;
  float: left;
  margin-right: 12px;
  margin-top: 6px;
  color: var(--mn-coral);
  font-weight: 500;
}
.mn-body .mn-about__right h3 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--mn-forest);
  text-transform: uppercase;
  margin: 16px 0 0;
}
.mn-body .mn-about__right h3 .mn-accent {
  font-size: 21px;
  text-transform: none;
}

/* ============================================================
   CONTACT — two-column with sticky info card + form
   ============================================================ */

.mn-body .mn-contact-content {
  padding: 96px 56px;
  background: var(--mn-paper);
}
.mn-body .mn-contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}
.mn-body .mn-contact-card {
  background: var(--mn-cream);
  border-radius: var(--mn-r-card);
  padding: 40px;
}
.mn-body .mn-contact-card h3 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mn-teal-mid);
  margin: 0 0 16px;
}
.mn-body .mn-contact-card .mn-contact-value {
  font-family: var(--mn-font-body);
  font-size: 20px;
  color: var(--mn-forest);
  margin-bottom: 32px;
  line-height: 1.5;
}
.mn-body .mn-contact-card .mn-contact-value em {
  font-style:normal;
  color: var(--mn-teal-mid);
}
.mn-body .mn-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mn-body .mn-contact-form .mn-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mn-body .mn-contact-form label {
  font-family: var(--mn-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mn-teal-mid);
  font-weight: 500;
}
.mn-body .mn-contact-form input,
.mn-body .mn-contact-form textarea {
  font-family: var(--mn-font-body);
  font-size: 15px;
  padding: 14px 18px;
  border: 0.5px solid var(--mn-hairline);
  border-radius: var(--mn-r-input);
  background: var(--mn-paper);
  outline: none;
  color: var(--mn-ink);
}
.mn-body .mn-contact-form input:focus,
.mn-body .mn-contact-form textarea:focus {
  border-color: var(--mn-forest);
}
.mn-body .mn-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.mn-body .mn-contact-form button {
  background: var(--mn-forest);
  color: var(--mn-cream);
  border: none;
  padding: 16px 32px;
  border-radius: var(--mn-r-btn);
  font-family: var(--mn-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-top: 8px;
  line-height: 1;
}
.mn-body .mn-contact-form button:hover {
  transform: translateY(-2px);
  background: var(--mn-forest-soft);
  color: var(--mn-cream);
}

/* ============================================================
   LEGAL — Privacy / Terms / Cookies pages
   ============================================================ */

.mn-body .mn-legal-hero {
  background: var(--mn-cream);
  padding: 96px 56px 64px;
}
.mn-body .mn-legal-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.mn-body .mn-legal-hero h1 {
  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;
  text-transform: uppercase;
}
.mn-body .mn-legal-hero h1 .mn-accent {
  font-size: 70px;
  text-transform: none;
}
.mn-body .mn-legal-hero .mn-legal-updated {
  font-family: var(--mn-font-body);
  font-style:normal;
  font-size: 14px;
  color: var(--mn-ink-mid);
  margin: 0;
}

.mn-body .mn-legal-content {
  background: var(--mn-paper);
  padding: 80px 56px;
}
.mn-body .mn-legal-inner {
  max-width: 780px;
  margin: 0 auto;
}
.mn-body .mn-legal-inner h2 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--mn-forest);
  margin: 48px 0 18px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.mn-body .mn-legal-inner h2:first-of-type { margin-top: 0; }
.mn-body .mn-legal-inner h2 .mn-accent {
  font-size: 27px;
  text-transform: none;
  letter-spacing: -0.01em;
}
.mn-body .mn-legal-inner h3 {
  font-family: var(--mn-font-display);
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--mn-forest);
  margin: 32px 0 12px;
  letter-spacing: 0.01em;
}
.mn-body .mn-legal-inner p {
  font-family: var(--mn-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--mn-ink);
  margin: 0 0 16px;
}
.mn-body .mn-legal-inner ul {
  font-family: var(--mn-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--mn-ink);
  margin: 0 0 16px;
  padding-left: 24px;
}
.mn-body .mn-legal-inner li { margin-bottom: 8px; }
.mn-body .mn-legal-inner strong { font-weight: 600; color: var(--mn-forest); }
.mn-body .mn-legal-inner em {
  font-family: var(--mn-font-body);
  font-style:normal;
  color: var(--mn-teal-mid);
  font-weight: 400;
}
.mn-body .mn-legal-inner a {
  color: var(--mn-teal-mid);
  text-decoration: none;
}
.mn-body .mn-legal-inner a:hover { color: var(--mn-forest); }

/* ============================================================
   RESPONSIVE — augments mobile-foundation.css
   ============================================================ */

@media (max-width: 980px) {
  .mn-body .mn-static-page { padding: 80px 24px; }
  .mn-body .mn-static-page__h1 { font-size: 56px; }
  .mn-body .mn-static-page__h1 .mn-accent { font-size: 54px; }

  .mn-body .mn-about-content { padding: 64px 24px; }
  .mn-body .mn-about-inner { grid-template-columns: 1fr; gap: 40px; }
  .mn-body .mn-about__left { position: static; }
  .mn-body .mn-about__left h2 { font-size: 40px; }
  .mn-body .mn-about__left h2 .mn-accent { font-size: 38px; }

  .mn-body .mn-contact-content { padding: 64px 24px; }
  .mn-body .mn-contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .mn-body .mn-contact-card { padding: 28px; }

  .mn-body .mn-legal-hero { padding: 64px 24px 40px; }
  .mn-body .mn-legal-hero h1 { font-size: 48px; }
  .mn-body .mn-legal-hero h1 .mn-accent { font-size: 46px; }
  .mn-body .mn-legal-content { padding: 56px 24px; }
  .mn-body .mn-legal-inner h2 { font-size: 24px; }
  .mn-body .mn-legal-inner h2 .mn-accent { font-size: 23px; }

  .mn-body .mn-signup-form { flex-direction: column; }
}

@media (max-width: 560px) {
  .mn-body .mn-static-page__h1 { font-size: 40px; }
  .mn-body .mn-static-page__h1 .mn-accent { font-size: 38px; }
  .mn-body .mn-legal-hero h1 { font-size: 36px; }
  .mn-body .mn-legal-hero h1 .mn-accent { font-size: 34px; }
}

/* ============================================================
   PRICING (Part 1 skeleton) — mockup #pricing
   ============================================================ */
.mn-body .mn-pricing { background: var(--mn-cream); padding: 0 56px 96px; }
.mn-body .mn-pricing__inner { max-width: 1040px; margin: 0 auto; }
.mn-body .mn-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.mn-body .mn-price-card { display: flex; flex-direction: column; background: var(--mn-paper); border: 0.5px solid var(--mn-hairline); border-radius: var(--mn-r-card); padding: 32px 28px; }
.mn-body .mn-price-card--feat { border: 2px solid var(--mn-coral); position: relative; }
.mn-body .mn-price-card--feat::before {
  content: "MOST POPULAR"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--mn-coral); color: #fff; font-family: var(--mn-font-body);
  font-size: 10px; letter-spacing: 0.1em; padding: 4px 12px; border-radius: 6px 6px 0 6px;
}
.mn-body .mn-price-card h3 { font-family: var(--mn-font-display); font-weight: 500; font-size: 24px; color: var(--mn-forest); margin: 0; text-transform: uppercase; }
.mn-body .mn-price-amt { font-family: var(--mn-font-body); font-weight: 600; font-size: 44px; color: var(--mn-forest); margin: 8px 0 4px; line-height: 1; }
.mn-body .mn-price-amt small { font-size: 14px; color: var(--mn-ink-soft); font-weight: 400; }
.mn-body .mn-price-card ul { list-style: none; margin: 18px 0 24px; padding: 0; flex: 1; }
.mn-body .mn-price-card li { font-family: var(--mn-font-body); font-size: 14px; color: var(--mn-ink-mid); padding: 8px 0; border-bottom: 0.5px solid var(--mn-hairline); }
.mn-body .mn-price-card .mn-btn-primary,
.mn-body .mn-price-card .mn-btn-ghost { text-align: center; }

/* shared skeleton helpers (note strip + placeholder marker) — reused by how/funding/advice */
.mn-body .mn-note-strip {
  background: var(--mn-mint); border-left: 4px solid var(--mn-teal-mid);
  padding: 14px 18px; font-family: var(--mn-font-body); font-size: 14px;
  color: var(--mn-forest); margin: 28px auto 0; max-width: 1040px; border-radius: 0 10px 0 0;
}
.mn-body .mn-mock-label {
  display: inline-block; background: #fff4ee; border: 1px dashed var(--mn-coral); color: var(--mn-coral);
  font-family: var(--mn-font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; margin-bottom: 18px; border-radius: 6px;
}

@media (max-width: 860px) {
  .mn-body .mn-pricing { padding: 0 22px 64px; }
  .mn-body .mn-price-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SKELETON CONTENT (Part 1) — how-it-works / funding / advice
   ============================================================ */
.mn-body .mn-skel { background: var(--mn-cream); padding: 0 56px 96px; }
.mn-body .mn-skel__inner { max-width: 1040px; margin: 0 auto; }
.mn-body .mn-skel-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mn-body .mn-skel-card { background: var(--mn-paper); border: 0.5px solid var(--mn-hairline); border-radius: var(--mn-r-card); padding: 26px; }
.mn-body .mn-skel-card .n { font-family: var(--mn-font-body); font-style:normal; font-size: 15px; color: var(--mn-coral); margin-bottom: 10px; }
.mn-body .mn-skel-card h4 { font-family: var(--mn-font-body); font-weight: 500; font-size: 18px; color: var(--mn-forest); margin: 0 0 8px; }
.mn-body .mn-skel-card p { font-family: var(--mn-font-body); font-size: 14px; color: var(--mn-ink-mid); margin: 0; }
.mn-body .mn-skel-twocol { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; }
.mn-body .mn-skel-side h4 { font-family: var(--mn-font-body); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn-forest); margin: 18px 0 10px; }
.mn-body .mn-skel-side h4:first-child { margin-top: 0; }
.mn-body .mn-skel-side label { display: block; font-family: var(--mn-font-body); font-size: 14px; color: var(--mn-ink-mid); margin-bottom: 7px; }
.mn-body .mn-skel-prog-count { font-family: var(--mn-font-body); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mn-ink-soft); margin-bottom: 16px; }
.mn-body .mn-skel-prog { margin-bottom: 16px; }
.mn-body .mn-skel-prog h4 { font-size: 19px; }
@media (max-width: 860px) {
  .mn-body .mn-skel { padding: 0 22px 64px; }
  .mn-body .mn-skel-grid3 { grid-template-columns: 1fr; }
  .mn-body .mn-skel-twocol { grid-template-columns: 1fr; }
}