.why-donate-page .primary-nav a[aria-current="page"] { color: var(--violet); }

.why-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 30%, rgba(156, 104, 239, 0.42), transparent 25%),
    linear-gradient(118deg, #1f104f 0%, #341078 48%, #5520ad 100%);
}

.why-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 72%);
  opacity: 0.2;
}

.why-hero-glow {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.why-hero-glow-one {
  width: 540px;
  height: 540px;
  top: -305px;
  left: 28%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.035), 0 0 0 68px rgba(255, 255, 255, 0.02);
}

.why-hero-glow-two {
  width: 310px;
  height: 310px;
  right: -120px;
  bottom: -165px;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.035);
}

.why-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  min-height: 570px;
  padding: 70px 0;
}

.why-hero-copy { max-width: 650px; }
.why-hero .eyebrow { color: #ddccff; }
.why-hero h1 { max-width: 650px; margin-bottom: 20px; color: #fff; font-size: clamp(3rem, 5vw, 4.55rem); }
.why-hero h1 span { color: #e5d6ff; }
.why-hero-copy > p { color: rgba(255, 255, 255, 0.9); font-size: var(--text-body-large); font-weight: 700; line-height: 1.6; }
.why-hero-copy .why-hero-lead { max-width: 655px; margin-bottom: 12px; color: #fff; font-size: clamp(1.2rem, 1.68vw, 1.37rem); font-weight: 800; line-height: 1.52; }
.why-hero-copy .button-row { margin-top: 28px; }
.why-hero-copy .button-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.07); }
.why-hero-copy .button-secondary:hover { background: rgba(255, 255, 255, 0.14); }
.why-hero-reassurance { display: flex; gap: 9px; align-items: center; margin: 22px 0 0 !important; color: rgba(255, 255, 255, 0.79) !important; font-size: var(--text-caption) !important; font-weight: 800 !important; line-height: 1.4 !important; }
.why-hero-reassurance .lucide { flex: 0 0 auto; width: 19px; height: 19px; color: #d9c5ff; }

.why-hero-visual {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 22px;
  box-shadow: 0 22px 44px rgba(9, 2, 41, 0.34);
  aspect-ratio: 1.03 / 0.9;
  background: #2c1067;
}

.why-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(29, 10, 75, 0.3), transparent 55%, rgba(226, 202, 255, 0.14));
}

.why-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.why-hero-visual figcaption { position: absolute; z-index: 1; right: 18px; bottom: 17px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 7px; color: #fff; background: rgba(27, 8, 74, 0.58); backdrop-filter: blur(7px); font-size: var(--text-caption); font-weight: 900; }
.why-hero-visual figcaption .lucide { width: 17px; height: 17px; color: #e4d5ff; }

.why-section-heading { max-width: 830px; }
.why-section-heading .eyebrow { margin-bottom: 9px; }
.why-section-heading h2, .voices-heading h2, .response-heading h2, .gift-copy h2 { margin-bottom: 14px; color: var(--violet); font-size: var(--heading-section); font-weight: 900; line-height: 1.14; }
.why-section-heading h2 span { color: #31215d; }
.why-section-heading > p:not(.eyebrow) { max-width: 790px; margin-bottom: 13px; color: #4c4566; font-size: var(--text-body-large); font-weight: 700; line-height: 1.6; }
.why-section-heading > p:last-child { margin-bottom: 0; }

.human-cost { padding-bottom: 64px; }
.human-cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.human-cost-card { min-height: 255px; padding: 28px; border: 1px solid #e6def7; border-radius: 17px; background: #fff; box-shadow: 0 8px 20px rgba(50, 22, 124, 0.06); }
.why-card-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px; color: #5821be; background: #efe9fb; }
.why-card-icon .lucide { width: 30px; height: 30px; stroke-width: 2.1; }
.human-cost-card h3 { margin: 20px 0 8px; color: #2f2556; font-size: var(--heading-card); font-weight: 900; line-height: 1.25; }
.human-cost-card p { margin: 0; color: #5a536f; font-size: var(--text-body); font-weight: 700; line-height: 1.58; }

.story-section { position: relative; overflow: hidden; padding: 64px 0; background: linear-gradient(130deg, #f4f0fd 0%, #faf9ff 55%, #eee8fc 100%); }
.story-section::before { content: ""; position: absolute; width: 310px; height: 310px; right: -156px; top: -160px; border: 1px solid rgba(88, 33, 190, 0.14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(88, 33, 190, 0.034), 0 0 0 56px rgba(88, 33, 190, 0.02); }
.community-voices .container { position: relative; z-index: 1; }
.voices-heading { max-width: 825px; }
.voices-heading h2 { color: #3f2580; }
.voices-heading > p:last-child { max-width: 790px; margin: 0; color: #554d6d; font-size: var(--text-body-large); font-weight: 700; line-height: 1.6; }
.voices-list { display: grid; gap: 20px; margin-top: 35px; }
.voice-statement { position: relative; display: grid; grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr); overflow: hidden; border: 1px solid #ddd2f2; border-radius: 19px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 26px rgba(51, 23, 122, 0.09); }
.voice-statement::after { content: ""; position: absolute; width: 220px; height: 220px; right: -126px; bottom: -146px; pointer-events: none; border: 1px solid rgba(84, 31, 181, 0.12); border-radius: 50%; box-shadow: 0 0 0 23px rgba(84, 31, 181, 0.024); }
.voice-statement-meta { position: relative; z-index: 1; display: grid; grid-template-columns: 51px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 4px 13px; align-content: start; padding: 31px 26px; color: #fff; background: linear-gradient(145deg, #5e28ba 0%, #31106f 100%); }
.voice-statement-zoe .voice-statement-meta { background: linear-gradient(145deg, #7040cb 0%, #3c157f 100%); }
.voice-statement-erin .voice-statement-meta { background: linear-gradient(145deg, #4d1f9f 0%, #250859 100%); }
.voice-statement-jordan .voice-statement-meta { background: linear-gradient(145deg, #7a37c5 0%, #42118e 100%); }
.voice-statement-meta::after { content: ""; position: absolute; width: 175px; height: 175px; right: -103px; bottom: -98px; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.028); }
.voice-statement-meta > * { position: relative; z-index: 1; }
.voice-quote-mark { grid-row: 1 / span 3; display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 15px; color: #fff; background: rgba(255, 255, 255, 0.12); }
.voice-quote-mark .lucide { width: 26px; height: 26px; fill: currentColor; stroke-width: 1.65; }
.voice-number { grid-column: 2; margin: 0; color: #e2d0ff; font-size: var(--text-caption); font-weight: 900; letter-spacing: 0.1em; line-height: 1.25; }
.voice-statement-meta h3 { grid-column: 2; margin: 0; color: #fff; font-size: clamp(1.45rem, 2.25vw, 1.8rem); font-weight: 900; line-height: 1.12; }
.voice-topic { grid-column: 2; margin: 5px 0 0; color: rgba(255, 255, 255, 0.85); font-size: var(--text-ui); font-weight: 800; line-height: 1.42; }
.voice-statement blockquote { position: relative; z-index: 1; max-width: 900px; margin: 0; padding: 32px clamp(25px, 4vw, 47px) 30px; color: #43385c; }
.voice-statement blockquote p { margin: 0; font-size: var(--text-body); font-weight: 700; line-height: 1.65; }
.voice-statement blockquote p + p { margin-top: 18px; }

.response-section { position: relative; overflow: hidden; color: #fff; background: linear-gradient(117deg, #28105f 0%, #40128f 56%, #5721af 100%); }
.response-section::after { content: ""; position: absolute; width: 520px; height: 520px; left: -272px; bottom: -310px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.035), 0 0 0 76px rgba(255, 255, 255, 0.018); }
.response-section .container { position: relative; z-index: 1; }
.response-heading { max-width: 810px; }
.response-heading .eyebrow { color: #ddcbff; }
.response-heading h2 { color: #fff; }
.response-heading > p:last-child { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: var(--text-body-large); font-weight: 700; line-height: 1.6; }
.response-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; margin-top: 36px; }
.response-card { position: relative; min-height: 294px; padding: 27px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 17px; background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11); }
.response-step { position: absolute; top: 23px; right: 24px; color: rgba(255, 255, 255, 0.42); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; }
.response-icon { width: 57px; height: 57px; display: grid; place-items: center; margin-bottom: 23px; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, 0.13); }
.response-icon .lucide { width: 31px; height: 31px; stroke-width: 2.1; }
.response-card h3 { margin: 0 0 9px; color: #fff; font-size: 1.3rem; font-weight: 900; line-height: 1.2; }
.response-card p { margin: 0; color: rgba(255, 255, 255, 0.89); font-size: var(--text-body); font-weight: 700; line-height: 1.56; }

.gift-section { padding: 64px 0; background: #fff; }
.gift-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(375px, 1.1fr); gap: clamp(42px, 8vw, 120px); align-items: center; }
.gift-copy h2 { color: #4e1dab; }
.gift-copy > p:not(.eyebrow) { max-width: 595px; margin: 0 0 17px; color: #4d4568; font-size: var(--text-body-large); font-weight: 700; line-height: 1.6; }
.gift-copy .gift-note { display: flex; gap: 10px; align-items: flex-start; padding-top: 9px; margin-bottom: 0; color: #5a526f; font-size: var(--text-ui); line-height: 1.52; }
.gift-note .lucide { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 2px; color: #5921bd; stroke-width: 2.15; }
.gift-list { display: grid; gap: 13px; }
.gift-list-item { display: grid; grid-template-columns: 56px 1fr; gap: 15px; align-items: center; min-height: 93px; padding: 17px 20px; border: 1px solid #e4dcf4; border-radius: 14px; background: #fbfaff; }
.gift-list-item > .lucide { width: 32px; height: 32px; margin: 0 auto; color: #5620b9; stroke-width: 2.1; }
.gift-list-item p { margin: 0; }
.gift-list-item strong { display: block; margin-bottom: 2px; color: #39255f; font-size: var(--text-body); font-weight: 900; line-height: 1.3; }
.gift-list-item span { display: block; color: #625a75; font-size: var(--text-ui); font-weight: 700; line-height: 1.45; }

.why-donate-final { position: relative; overflow: hidden; padding: 64px 0; color: #fff; background: linear-gradient(112deg, #4c1ba6 0%, #35107e 53%, #24105e 100%); }
.why-donate-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(65deg, transparent 46%, rgba(255, 255, 255, 0.06) 46.2%, transparent 46.5%), linear-gradient(-65deg, transparent 67%, rgba(255, 255, 255, 0.035) 67.2%, transparent 67.5%); background-size: 95px 95px; opacity: 0.55; }
.why-donate-final-orbit { position: absolute; width: 440px; height: 440px; right: -195px; top: -255px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.035), 0 0 0 70px rgba(255, 255, 255, 0.02); }
.final-donate-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, 0.76fr); gap: clamp(42px, 8vw, 120px); align-items: center; }
.final-donate-copy { max-width: 695px; }
.final-donate-copy .eyebrow { color: #ddccff; }
.final-donate-copy h2 { margin-bottom: 13px; color: #fff; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 900; line-height: 1.12; }
.final-donate-copy p:not(.eyebrow) { margin: 0 0 12px; color: rgba(255, 255, 255, 0.9); font-size: var(--text-body-large); font-weight: 700; line-height: 1.59; }
.final-donate-copy p:last-child { margin-bottom: 0; color: #fff; font-weight: 900; }
.donation-panel { padding: 30px; border: 1px solid rgba(255, 255, 255, 0.23); border-radius: 18px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 15px 34px rgba(19, 6, 68, 0.2); }
.donation-panel-icon { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 50%; color: #5420b3; background: #fff; }
.donation-panel-icon .lucide { width: 31px; height: 31px; stroke-width: 2.1; }
.donation-panel h3 { margin: 0 0 8px; color: #fff; font-size: 1.45rem; font-weight: 900; line-height: 1.18; }
.donation-panel p { margin: 0 0 21px; color: rgba(255, 255, 255, 0.9); font-size: var(--text-body); font-weight: 700; line-height: 1.55; }
.donation-panel .button { width: 100%; }
.panel-secondary-link { display: block; margin-top: 17px; color: #fff; font-size: var(--text-ui); font-weight: 900; line-height: 1.4; text-align: center; }
.panel-secondary-link:hover { color: #dfcdff; }

@media (max-width: 1100px) {
  .why-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, 0.88fr); gap: 42px; }
  .gift-layout, .final-donate-grid { gap: 42px; }
  .human-cost-card { min-height: 278px; }
}

@media (max-width: 910px) {
  .why-hero-grid { grid-template-columns: 1fr; min-height: 0; padding: 58px 0; }
  .why-hero-copy { max-width: 760px; }
  .why-hero-visual { max-width: 710px; width: 100%; min-height: 350px; }
  .gift-layout, .final-donate-grid { grid-template-columns: 1fr; gap: 34px; }
  .voices-heading, .gift-copy, .final-donate-copy { max-width: 760px; }
  .response-grid { grid-template-columns: 1fr; }
  .response-card { min-height: 0; }
  .human-cost-card { min-height: 0; }
  .donation-panel { max-width: 560px; }
}

@media (max-width: 760px) {
  .voice-statement { grid-template-columns: 1fr; }
  .voice-statement-meta { min-height: 0; padding: 25px 23px; }
  .voice-statement blockquote { padding: 27px 23px 25px; }
}

@media (max-width: 640px) {
  .why-hero-grid, .human-cost, .story-section, .gift-section, .why-donate-final { padding-top: 46px; padding-bottom: 46px; }
  .why-hero h1 { font-size: clamp(2.7rem, 12vw, 3.65rem); }
  .why-hero-copy > p, .why-hero-copy .why-hero-lead, .why-section-heading > p:not(.eyebrow), .voices-heading > p:last-child, .response-heading > p:last-child, .gift-copy > p:not(.eyebrow), .final-donate-copy p:not(.eyebrow) { font-size: var(--text-body); }
  .why-hero-visual { min-height: 0; border-radius: 16px; aspect-ratio: 1 / 0.92; }
  .why-hero-visual figcaption { right: 12px; bottom: 12px; font-size: 0.75rem; }
  .human-cost-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 27px; }
  .human-cost-card { padding: 23px; }
  .story-section { padding-top: 48px; }
  .voice-statement { border-radius: 15px; }
  .voice-statement-meta { grid-template-columns: 47px minmax(0, 1fr); gap: 4px 11px; padding: 23px 20px; }
  .voice-quote-mark { width: 47px; height: 47px; border-radius: 14px; }
  .voice-statement-meta h3 { font-size: 1.4rem; }
  .voice-statement blockquote { padding: 24px 20px 23px; }
  .response-grid { margin-top: 28px; }
  .response-card { padding: 23px; }
  .gift-list-item { grid-template-columns: 47px 1fr; gap: 11px; min-height: 0; padding: 16px; }
  .gift-list-item > .lucide { width: 28px; height: 28px; }
  .donation-panel { padding: 25px 21px; }
}