/*
 * about.html in the mc design — the mockup's contact page look, minus the parts
 * css/about.css already carries. Loaded after mc.css; light theme rides tokens.
 */

body.mc .about-brand {
  font-family: var(--font-display);
  color: var(--accent-gold);
  text-shadow: var(--text-sh);
}

body.mc .about-lede {
  color: var(--text-secondary);
}

/* Feature card: dark plate, gold left edge — straight from the mockup. */
body.mc .about-feature {
  background: var(--panel-2);
  border-color: var(--border-dark);
  border-inline-start-color: var(--accent-gold);
}

body.mc .about-feature__title {
  color: var(--accent-gold);
  text-shadow: var(--text-sh);
}

body.mc .about-feature__body {
  color: var(--text-secondary);
}

/* The olive highlight plate, as on the volunteer identity bar. */
body.mc .about-note {
  background: var(--bar-olive);
  border-color: var(--border-dark);
  border-inline-start-color: var(--accent-emerald);
  color: var(--bar-olive-text);
}

body.mc .about-wa-hint,
body.mc .about-or {
  color: var(--text-muted);
}

body.mc .about-or::before,
body.mc .about-or::after {
  border-top-color: rgba(0, 0, 0, 0.35);
}

/* WhatsApp green, darkened for the white label the way contact.html did:
   the brand #25d366 gives white only 1.98:1. 5.39:1 on the light end. */
body.mc .about-wa {
  background: linear-gradient(180deg, #177a40 0%, #0f5c30 100%);
}

/* Light theme: the olive plate flips to the light-olive identity pair. */
:root[data-mc-theme="light"] body.mc .about-note {
  background: #ccd6a3;
  border-inline-start-color: #1e6b2e;
  color: #3c4a1c;
}