/* Donate page. Flat fills only. */

/* ---------- Hero (night sky) ---------- */
.dn-hero .page-hero__grid { align-items: center; }
.dn-hero h1 { max-width: 16ch; font-size: clamp(2.4rem, min(9.5cqi, 8vh), 4.6rem); } /* smaller than other heroes so the picker sits above the fold on short laptops */
.dn-hero .page-hero__text { gap: clamp(.9rem, 2.2vh, 1.4rem); }
.dn-picker { padding: clamp(1.25rem, 2.6vw, 2rem); max-width: 36rem; background: var(--navy-700); border: 1px solid rgb(230 178 60 / 55%); } /* lifted off the night sky by a lighter navy and a gold edge */
.dn-picker .amounts { margin-top: 1.1rem; }
.dn-picker .give__go { margin-top: 1.25rem; }
.dn-trust { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: var(--step-caption); color: var(--navy-fg-muted); max-width: 36rem; }
.dn-trust strong { color: var(--ivory); font-weight: 650; }
.dn-art { margin: 0; display: grid; gap: .8rem; justify-items: center; }
.dn-art svg { width: 100%; max-width: 30rem; border-radius: 18px; outline: 1px solid rgb(230 178 60 / 30%); outline-offset: -1px; }
.dn-art figcaption { font-size: var(--step-micro); line-height: 1.5; color: var(--navy-fg-muted); text-align: center; max-width: 34ch; }
@media (max-width: 760px) {
  .dn-art { max-width: none; order: 2; } /* picker first on phones; the sunrise follows it, full width */
  .dn-art figcaption { max-width: 28ch; }
}

/* ---------- What gifts support ---------- */
.dn-supports .panel h3 { font-size: var(--step-subhead); line-height: 1.25; }

/* ---------- Accountability ---------- */
.dn-acc { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.dn-badge { flex: none; width: 100px; height: 100px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px rgb(9 24 50 / 14%); }
.dn-acc + .pillars { margin-top: clamp(2.5rem, 6vh, 4rem); }
.pillar .text-link { margin-top: .9rem; margin-right: 1.25rem; }
@media (max-width: 640px) { .dn-acc { flex-direction: column; align-items: flex-start; } }
/* Sunrise (gold) accountability section: muted text over the hills goes navy for contrast. */
.tone-gold .pillar p, .tone-gold .section-head p:not(.eyebrow) { color: var(--navy-700); }