/* The donation page (/donate) and its thank-you page.
   Colour: the site's navy and teal, with the site's amber kept for the two things a donor acts on,
   the selected amount and the final button. The glass that fills as you choose is the one
   memorable thing here, so everything around it stays plain. */

.dn [hidden] { display: none !important; }
.dn #give, .dn #where { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }

/* ---- hero ---- */
.dn .w-hero h1 { max-width: 18ch; font-size: clamp(2.2rem, 4.8vw, 3.5rem); }
.dn-figure { margin: 0; }
.dn-figure figcaption { margin: 14px auto 0; max-width: 34rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; text-align: center; }
.dn-figure figcaption a { color: var(--brand-ink); font-weight: 650; }

/* ---- the giving card ---- */
.dn .dn-give .w-head { margin-bottom: 36px; }
.dn-card { background: #fff; color: var(--ink); border-radius: 22px; padding: clamp(22px, 4vw, 44px); box-shadow: 0 24px 60px rgba(2, 8, 26, .35); }
.dn .dn-card h3 { color: var(--ink); }
.dn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.dn-col { display: grid; gap: 34px; min-width: 0; }
.dn-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.dn-step legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font-size: 1.15rem; font-weight: 720; letter-spacing: -0.01em; }
.dn-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 700; flex: none; }

.dn-error { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 26px; padding: 14px 16px; border-radius: 12px; background: #fdecea; color: #7d2616; font-weight: 600; line-height: 1.45; }
.dn-error svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* visually hidden radios, with the label's own box doing the showing */
.dn-seg input, .dn-chip input, .dn-method input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.dn-seg { display: inline-flex; padding: 3px; margin-bottom: 18px; border: 1.5px solid var(--line-2); border-radius: 999px; gap: 2px; }
.dn-seg label { position: relative; }
.dn-seg span { display: block; padding: 8px 18px; border-radius: 999px; font-weight: 650; font-size: .95rem; cursor: pointer; }
.dn-seg input:checked + span { background: var(--ink); color: #fff; }
.dn-seg input:focus-visible + span, .dn-chip input:focus-visible + span, .dn-method input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }

.dn-amount-row { display: flex; gap: 26px; align-items: flex-start; }
.dn-amount-pick { flex: 1; min-width: 0; }
.dn-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dn-chip { position: relative; display: block; }
.dn-chip span { display: grid; place-items: center; min-height: 54px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 1.1rem; font-weight: 720; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s, background-color .15s; }
.dn-chip span:hover { border-color: var(--ink); }
.dn-chip input:checked + span { background: var(--amber); border-color: var(--amber); color: var(--ink); }

.dn-custom { display: block; margin-top: 12px; }
.dn-field { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; min-height: 54px; padding-left: 16px; }
.dn-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 77, 216, .18); }
.dn-field b { font-size: 1.1rem; color: var(--muted); font-weight: 700; padding-right: 8px; }
.dn-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.1rem; font-weight: 650; color: var(--ink); padding: 14px 14px 14px 0; outline: none; }
.dn-field input::placeholder { color: var(--muted); font-weight: 500; }

/* the glass that fills as the amount grows */
.dn-gauge { display: grid; justify-items: center; gap: 6px; flex: none; width: 112px; }
.dn-gauge svg { display: block; overflow: visible; }
.dn-liquid { transition: transform .8s cubic-bezier(.25, .85, .3, 1); }
.dn-amount { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-height: 1.9rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .dn-liquid { transition: none; } }

.dn-opts { display: grid; gap: 10px; }
.dn-opt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; cursor: pointer; background: #fff; }
.dn-opt:hover { border-color: var(--ink-2); }
.dn-opt:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.dn-opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.dn-opt strong { display: block; font-size: 1rem; }
.dn-opt small { display: block; margin-top: 3px; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.dn-methods { display: flex; flex-wrap: wrap; gap: 10px; }
.dn-method { position: relative; display: block; }
.dn-method span { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--line-2); border-radius: 999px; font-weight: 680; cursor: pointer; background: #fff; }
.dn-method span:hover { border-color: var(--ink); }
.dn-method span svg { width: 18px; height: 18px; }
.dn-method input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }

.dn-panel { margin-top: 18px; padding: 20px; background: var(--wash); border: 1px solid var(--line); border-radius: 14px; }
.dn-panel + .dn-panel { margin-top: 12px; }
.dn-sendline { margin: 0 0 12px; font-size: 1.02rem; }
.dn-number { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 4px; }
.dn-number code { padding: 10px 16px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 10px; font: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.dn-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; }
.dn-copy:hover { border-color: var(--ink); }
.dn-copy svg { width: 17px; height: 17px; }
.dn-copy[data-done] { border-color: var(--teal-deep); color: var(--teal-deep); }
.dn-howto { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink-2); line-height: 1.5; }
.dn-lines { margin: 0 0 14px; }
.dn-lines > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dn-lines dt { color: var(--muted); }
.dn-lines dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.dn-lines-plain dd { text-align: left; }
.dn-extlink { margin-bottom: 4px; }
.dn-hint { margin: 12px 0 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.dn-nomethod { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--warn-tint); color: var(--warn); }

.dn-fields { display: grid; gap: 16px; }
.dn-in { display: grid; gap: 6px; }
.dn-in > span { font-weight: 650; font-size: .95rem; }
.dn-in input, .dn-in textarea { width: 100%; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; padding: 12px 14px; font: inherit; color: var(--ink); min-height: 50px; }
.dn-in textarea { resize: vertical; min-height: 78px; }
.dn-in input:focus, .dn-in textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 77, 216, .18); }
.dn-in small { color: var(--muted); font-size: .85rem; }
.dn-check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.dn-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); flex: none; }

.dn-submit { width: 100%; min-height: 58px; margin-top: 24px; border: 0; background: var(--amber); color: var(--ink); font-size: 1.12rem; font-weight: 800; border-radius: 14px; cursor: pointer; }
.dn-submit:hover { background: #e39b2c; }
.dn-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.dn-soon { max-width: 640px; display: grid; gap: 12px; justify-items: start; }
.dn-soon h3 { margin: 0; font-size: 1.5rem; }
.dn-soon p { margin: 0; color: var(--ink-2); }

/* ---- below the card ---- */
.dn-where { display: grid; }
.dn-where article { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 12px 40px; padding: 30px 0; border-top: 1px solid var(--line); }
.dn-where article:last-child { border-bottom: 1px solid var(--line); }
.dn-where h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.015em; }
.dn-where p { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
.dn-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.dn-links a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; font-size: .92rem; text-decoration: none; }
.dn-links a:hover { background: var(--brand-tint); }

.dn-thanks h2, .dn-other h2, .dn-faq h2 { margin: 0 0 12px; }
.dn-thanks p { margin: 0 0 18px; color: var(--ink-2); }
.dn-names { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dn-names li { padding: 7px 14px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-deep); font-weight: 650; }

.dn-other { background: var(--wash); }
.dn-other .w-head { margin-bottom: 28px; }
.dn-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dn-ways > div { padding-left: 18px; border-left: 3px solid var(--teal); }
.dn-ways h3 { margin: 0 0 6px; font-size: 1.1rem; }
.dn-ways p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.dn-ways a { color: var(--brand-ink); font-weight: 650; }

.dn-qa { max-width: 760px; margin-top: 18px; }
.dn-qa details { border-bottom: 1px solid var(--line); }
.dn-qa details:first-child { border-top: 1px solid var(--line); }
.dn-qa summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-weight: 650; font-size: 1.05rem; cursor: pointer; list-style: none; }
.dn-qa summary::-webkit-details-marker { display: none; }
.dn-qa summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--muted); line-height: 1; }
.dn-qa details[open] summary::after { content: "\2212"; }
.dn-qa summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.dn-qa details p { margin: 0 0 20px; color: var(--ink-2); line-height: 1.6; max-width: 62ch; }
.dn-faq .dn-hint a { color: var(--brand-ink); font-weight: 650; }

/* ---- thank-you page ---- */
.dn-ref { padding: 3px 10px; border-radius: 8px; background: var(--wash-2); color: var(--ink); font: inherit; font-weight: 750; letter-spacing: .02em; }
.dn-next-h { margin: 36px 0 12px; font-size: 1.25rem; }
.dn-next { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 8px; color: var(--ink-2); line-height: 1.55; max-width: 56ch; }

/* ---- smaller screens ---- */
@media (max-width: 980px) {
  .dn-grid { grid-template-columns: 1fr; }
  .dn-where article { grid-template-columns: 1fr; }
  .dn-ways { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .dn-card { border-radius: 18px; padding: 20px 18px 26px; }
  .dn-amount-row { flex-direction: column-reverse; gap: 16px; }
  .dn-gauge { width: 100%; grid-auto-flow: column; justify-content: start; align-items: center; gap: 18px; }
  .dn-gauge svg { width: 62px; height: 135px; }
  .dn-amount { font-size: 1.9rem; text-align: left; }
  .dn-number code { font-size: 1.3rem; }
  .dn-seg span { padding: 8px 14px; }
}

/* The site styles <small> as a heavy label elsewhere; here it is plain helper text. */
.dn small { font-weight: 400; }