/* /about — v3 SAFETY-FOOTNOTE. Typographic prose in the design system. Tokens only, no emoji.
   ABOUT-BRIEF-v3: no boxes, no wash panels, no numbered circles — drama from type + hairlines.
   The bio card is the page's ONLY container. One spark (header). */

/* ── main is a plain column; header + prose set their own canonical widths ── */
.prose{max-width:none;padding-bottom:var(--space-11)}

/* ── Canonical page-header block: spark 44 → H1 → lede, centered, 76/40 (56/24 ≤560) ── */
.about-hd{text-align:center;max-width:640px;margin:0 auto;padding:76px 0 40px}
.about-hd__spark{display:block;width:44px;height:44px;margin:0 auto}
body.mktg .about-hd .about-hd__h1{margin:28px 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,5.2vw,56px);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.about-hd__lede{margin:20px auto 0;max-width:620px;font-size:17px;line-height:1.6;color:var(--muted)}
@media(max-width:560px){.about-hd{padding:56px 0 24px}}

/* ── Prose column: ONE left-aligned column, max 640, centered on the axis ── */
.prose-col{max-width:640px;margin:0 auto;text-align:left}
/* the "Partner with us" mount is 640 but left-aligned sitewide (styles.css Q228); on this centered-column page
   that shifts it off-axis. Center it to sit on the same 640 axis as the prose + header. */
.partner-section{margin-inline:auto}
body.mktg main.prose .prose-col > h2{font-family:var(--font-display);font-weight:600;font-size:28px;
  letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin:56px 0 18px}
body.mktg main.prose .prose-col > p,
body.mktg main.prose .prose-col li{color:var(--muted);font-size:15px;line-height:1.7}
body.mktg main.prose .prose-col > p{margin:0 0 14px}
.prose-col ul,.prose-col ol{margin:0 0 14px;padding-left:22px}
.prose-col li{margin:0 0 10px}
.prose-col .link{color:var(--accent-strong);font-weight:500}
.prose-col .link:hover{text-decoration:underline}

@media(max-width:560px){
  body.mktg main.prose .prose-col > h2{font-size:24px}
}

/* ── §3.1 Differentiators — TWO naked statements, 36px apart. No box, no icons. ──
   The <strong> lead reads as a head (Bricolage 600 21/1.4 --ink); the remainder is body. */
.about-diff{margin:48px 0 0}
body.mktg main.prose .about-diff p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
body.mktg main.prose .about-diff p + p{margin-top:36px}
.about-diff strong{display:block;font-family:var(--font-display);font-weight:600;font-size:21px;
  line-height:1.4;letter-spacing:-.005em;color:var(--ink);margin-bottom:10px}

/* ── §3.2 Ownership claim — display para; key phrase in --accent. No background. ── */
.ownership-claim--about{margin:26px 0 14px}
body.mktg main.prose .prose-col > p.ownership-claim--about{font-family:var(--font-display);font-weight:600;
  font-size:20px;line-height:1.5;color:var(--ink)}
/* the lead <strong> + key phrase carry the display weight; remainder continues as body */
.ownership-claim--about strong{color:var(--ink)}
.ownership-claim--about .claim-key{color:var(--accent)}
.ownership-claim--about .claim-rest{display:block;margin-top:14px;font-family:var(--font-ui);
  font-weight:400;font-size:15px;line-height:1.7;color:var(--muted)}
.ownership-claim--about .claim-rest .link{color:var(--accent-strong);font-weight:500}

/* ── §3.3 Vision tenor — pull-display: 3px --accent left rule, pad-left 22. Never a pink band. ── */
.lead--tenor{margin:18px 0}
body.mktg main.prose .prose-col > p.lead--tenor{border-left:3px solid var(--accent);padding-left:22px;
  font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.55;color:var(--ink)}
.lead--tenor strong{font-weight:600;color:var(--ink)}
@media(max-width:560px){
  body.mktg main.prose .prose-col > p.lead--tenor{font-size:17px}
}

/* ── §3.4 Theory of change — hairline-ruled rows, naked --accent numerals. <ol> kept. ── */
.prose-col h2.toc-h{margin-bottom:8px}
ol.toc{list-style:none;margin:0 0 14px;padding:0;border-bottom:1px solid var(--line);counter-reset:toc}
ol.toc li{counter-increment:toc;position:relative;
  border-top:1px solid var(--line);padding:18px 0 18px 26px;margin:0;
  font-family:var(--font-ui);font-size:15px;line-height:1.65;color:var(--muted)}
ol.toc li::before{content:counter(toc);position:absolute;left:0;top:18px;
  font-family:var(--font-display);font-weight:600;font-size:18px;
  color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.45}
ol.toc li b{color:var(--ink);font-weight:600}

/* ── §3.5 Bio card — the page's ONLY container. ARCHETYPES A1 2-col card. NO spark. ── */
.leader-card{display:flex;gap:28px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);padding:28px;margin:0}
.leader-card__hd{flex:none;width:128px;height:128px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.leader-card__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.leader-card__body{min-width:0}
body.mktg main.prose .leader-card__body > p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0 0 12px}
body.mktg main.prose .leader-card__body > p:last-child{margin-bottom:0}
body.mktg main.prose .leader-card__body > p.leader-card__name{font-family:var(--font-display);font-weight:600;
  font-size:21px;line-height:1.2;color:var(--ink);margin:0}
.leader-card__name b{font-weight:600}
.leader-card__pronoun{font-family:var(--font-ui);font-weight:400;font-size:13px;color:var(--muted)}
body.mktg main.prose .leader-card__body > p.leader-card__role{color:var(--accent-strong);font-weight:500;
  font-size:14px;margin:4px 0 14px}
@media(max-width:560px){
  .leader-card{flex-direction:column;gap:16px;align-items:center;text-align:center}
  .leader-card__body{text-align:left}
}

/* ── §4 CTA row + safety footnote — centered, after With gratitude ── */
.about-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:48px auto 0;max-width:640px}
.about-footnote{margin:18px auto 0;max-width:640px;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--muted)}
@media(max-width:560px){
  .about-cta{flex-direction:column}
  .about-cta .btn,.about-cta .btn-outline{width:100%}
}