/* infoMogli — About / Contact / legal / 404.
   Reuses .lrn-header, .g-prose, .srch-box wherever possible. */

.legal-body{ max-width: 720px; margin: 48px auto 0; padding: 0 32px 64px; }
.legal-body .g-prose h2{ margin-top: 40px; font-size: 24px; }
.legal-body .g-prose h2:first-child{ margin-top: 0; }
.legal-updated{
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  margin-bottom: 28px; display: block;
}

/* ── About: principles + coverage ─────────────────────────────── */
.principles-list{ border-top: 1px solid var(--hair); margin-top: 8px; }
.principle-row{
  padding: 20px 0; border-bottom: 1px solid var(--hair);
  display: grid; grid-template-columns: 220px 1fr; gap: 20px;
}
.principle-row h3{ font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); margin: 0; }
.principle-row p{ font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.about-cta-row{ display: flex; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.about-cta-row a{ font-family: var(--sans); font-size: 15px; color: var(--accent); }

/* ── Contact form ──────────────────────────────────────────────── */
.contact-form{ max-width: 560px; margin-top: 32px; }
.field-row{ margin-bottom: 20px; }
.field-row label{
  display: block; font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); margin-bottom: 6px;
}
.field-row input, .field-row select, .field-row textarea{
  width: 100%; font: inherit; font-family: var(--sans); font-size: 15px;
  border: 1px solid var(--hair-2); border-radius: var(--r);
  padding: 10px 12px; background: var(--surface); color: var(--ink);
  min-height: 44px;
}
.field-row textarea{ min-height: 120px; resize: vertical; }
.field-row input:focus, .field-row select:focus, .field-row textarea:focus{
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.contact-note{
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 4px;
}
.contact-success{
  display: none; align-items: flex-start; gap: 10px;
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--accent-soft); padding: 14px 16px;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
}
.contact-success.show{ display: flex; }

/* ── 404 ───────────────────────────────────────────────────────── */
.err-links{ display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.err-links a{
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  border: 1px solid var(--hair-2); border-radius: 999px;
  padding: 9px 16px; background: var(--surface);
  transition: border-color .16s ease, color .16s ease;
}
.err-links a:hover{ border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }

/* ── Preview-only implementation flags ────────────────
   Marks anything that must NOT ship to production as-is: unwired forms,
   placeholder legal wording, etc. Deliberately loud/dashed so it can't be
   mistaken for real content and is easy to grep for before launch. */
.preview-flag{
  border: 1px dashed #B45309;
  background: color-mix(in srgb, #B45309 7%, var(--surface));
  border-radius: var(--r);
  padding: 10px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  color: #92400E;
}
.preview-flag b{ letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 720px){
  .legal-body{ padding: 0 20px 48px; }
  .principle-row{ grid-template-columns: 1fr; gap: 6px; }
}