.donation-page { min-height: calc(100vh - 86px); display: grid; grid-template-columns: .88fr 1.12fr; background: #edf8ff; }
.donation-story { min-height: 860px; padding: 9vw 7vw; position: relative; overflow: hidden; display: flex; align-items: center; color: #fff; background: linear-gradient(145deg, #01070c 0%, #04243a 58%, #008ed0 100%); }
.donation-story-inner { position: relative; z-index: 2; }
.donation-story h1 { font-size: clamp(54px, 6vw, 88px); }
.donation-story h1 em { color: #79d8ff; }
.donation-story-inner > p:not(.eyebrow) { max-width: 560px; margin: 30px 0; color: rgba(255,255,255,.76); font-size: 18px; line-height: 1.75; }
.needs-list { max-width: 560px; display: flex; flex-wrap: wrap; gap: 8px; }
.needs-list span { padding: 8px 12px; color: #d9f4ff; border: 1px solid rgba(121,216,255,.32); border-radius: 20px; background: rgba(0,108,169,.18); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.meal-promise { max-width: 470px; margin-top: 42px; padding: 25px 0; display: flex; align-items: center; gap: 18px; border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.meal-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; color: var(--blue); border: 8px solid #fff; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px var(--blue); }
.meal-promise strong { font: 700 18px Manrope, sans-serif; }
.meal-promise p { margin: 5px 0 0; color: rgba(255,255,255,.6); font-size: 13px; }
.donation-trust { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 20px; color: rgba(255,255,255,.68); font-size: 12px; }
.story-rings { width: 500px; height: 500px; position: absolute; right: -270px; bottom: -210px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.story-rings span { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.story-rings span:nth-child(2) { inset: 24%; }.story-rings span:nth-child(3) { inset: 36%; }

.donation-panel { padding: 70px clamp(24px, 6vw, 95px); display: flex; align-items: center; }
.donation-form { width: min(100%, 760px); margin: 0 auto; padding: clamp(27px, 4vw, 52px); border: 1px solid #d5e3eb; border-radius: 13px; background: #fff; box-shadow: 0 28px 70px rgba(0,69,106,.12); }
.donation-form-head p { margin: 0 0 7px; color: var(--blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.donation-form-head h2 { font-size: clamp(34px, 3.5vw, 49px); letter-spacing: -.04em; }
.donation-form-head > span { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; }
.amount-grid { margin: 30px 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.amount-option { min-height: 49px; padding: 8px; color: var(--ink); border: 1px solid #cad9e2; border-radius: 5px; background: #fff; cursor: pointer; font: 700 14px Manrope, sans-serif; transition: .2s; }
.amount-option:hover { border-color: var(--blue); color: var(--blue-dark); }
.amount-option.selected { color: #fff; border-color: var(--blue-dark); background: linear-gradient(120deg, #041521, var(--blue-dark)); box-shadow: 0 7px 18px rgba(0,108,169,.18); }
.custom-amount { color: #354854; font-size: 12px; font-weight: 700; }
.custom-amount > span { margin-top: 8px; display: flex; align-items: center; overflow: hidden; border: 1px solid #cad9e2; border-radius: 5px; background: #f8fbfd; }
.custom-amount b { padding: 0 16px; color: var(--blue-dark); font-size: 19px; }
.custom-amount input { width: 100%; padding: 14px 14px 14px 0; border: 0; outline: 0; background: transparent; font: 600 16px "DM Sans", sans-serif; }
.meal-impact { margin: 22px 0; padding: 17px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; color: #fff; border-radius: 6px; background: linear-gradient(115deg, #061521, #006ca9); }
.meal-impact > span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.meal-impact strong { font: 800 24px Manrope, sans-serif; }
.meal-impact p { grid-column: 1 / -1; margin: 3px 0 0; font-size: 11px; opacity: .62; }
.donor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.donor-fields label { color: #354854; font-size: 12px; font-weight: 700; }
.donor-fields .full-field { grid-column: 1 / -1; }
.donor-fields input { width: 100%; margin: 7px 0 15px; padding: 13px 14px; border: 1px solid #cad9e2; border-radius: 5px; outline: none; font: 14px "DM Sans", sans-serif; }
.donor-fields input:focus, .custom-amount > span:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,152,220,.09); }
.consent { margin: 3px 0 21px; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.consent input { accent-color: var(--blue-dark); }
.pay-button { width: 100%; padding: 17px 19px; display: flex; justify-content: space-between; color: #fff; border: 0; border-radius: 5px; background: linear-gradient(110deg, var(--ink), #075078 60%, var(--blue)); cursor: pointer; font: 600 14px "DM Sans", sans-serif; }
.pay-button b { color: #9ee5ff; }
.pay-button:disabled { cursor: wait; opacity: .68; }
.payment-status { min-height: 20px; margin: 12px 0 0; color: var(--blue-dark); font-size: 12px; font-weight: 700; text-align: center; }
.payment-status.error { color: #b42318; }
.payment-fineprint { margin: 4px 0 0; color: #7b8990; font-size: 10px; line-height: 1.5; text-align: center; }
.donation-values { padding: 75px 8vw; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #d4e5ee; }
.donation-values > div { padding: 32px; background: #fff; }
.donation-values span { color: var(--blue-dark); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.donation-values strong { margin: 42px 0 9px; display: block; font: 700 22px Manrope, sans-serif; }
.donation-values p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 1000px) {
  .donation-page { grid-template-columns: 1fr; }
  .donation-story { min-height: 650px; }
}
@media (max-width: 600px) {
  .donation-story { min-height: 620px; padding: 80px 24px; }
  .donation-story h1 { font-size: 49px; }
  .donation-panel { padding: 45px 18px 70px; }
  .donation-form { padding: 25px 18px; }
  .amount-grid { grid-template-columns: repeat(3,1fr); }
  .donor-fields { grid-template-columns: 1fr; }
  .donor-fields .full-field { grid-column: auto; }
  .donation-values { padding: 50px 24px; grid-template-columns: 1fr; }
}