/* givenepal.org — pages.css
   Additive only. Loaded AFTER app.css. Reuses app.css tokens; defines no
   selector that app.css already defines. */

.lead-in { max-width: 46rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }
.mono { font-variant-numeric: tabular-nums; }

/* ---- badges ---- */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--faint);
  background: var(--bg-2);
}
.badge-demo { border-color: var(--madder); color: var(--madder); background: transparent; }
.badge-ok { border-color: #2f6f4f; color: #2f6f4f; }
.badge-wait { border-color: var(--faint); }
html[data-theme="dark"] .badge-ok { border-color: #6ecf9e; color: #6ecf9e; }

.demo-strip {
  background: var(--madder);
  color: var(--on-madder);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.55rem 1rem;
}

/* ---- pledge calculator ---- */
.calc { display: grid; gap: 1.25rem; }
.calc-input { display: grid; gap: 0.5rem; }
.calc-input label { font-size: 0.85rem; font-weight: 600; color: var(--faint); }
.calc-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.35rem 0.9rem;
}
.calc-field span { font-family: var(--font-display); font-size: 1.4rem; color: var(--faint); }
.calc-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.5rem 0;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.calc-field input::-webkit-outer-spin-button,
.calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input[type="number"] { -moz-appearance: textfield; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--madder); color: var(--madder); }
.chip[aria-pressed="true"] { background: var(--madder); border-color: var(--madder); color: var(--on-madder); }

/* ---- two-step flow ---- */
.flow { display: grid; gap: 1rem; counter-reset: flowstep; margin: 0; padding: 0; list-style: none; }
.flow > li {
  position: relative;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem 1.2rem 3.75rem;
}
.flow > li::before {
  counter-increment: flowstep;
  content: counter(flowstep);
  position: absolute;
  left: 1.35rem;
  top: 1.35rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--madder);
  color: var(--on-madder);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.flow h3 { margin: 0 0 0.35rem; font-size: 1.12rem; }
.flow p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.flow .tag { display: block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--faint); }

/* ---- timeline (donor page) ---- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--line);
}
.tl > li { position: relative; padding: 0 0 1.9rem 2.4rem; }
.tl > li:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--bg);
}
.tl-done .tl-dot { border-color: var(--madder); background: var(--madder); }
.tl-now .tl-dot { border-color: var(--madder); background: var(--bg); box-shadow: 0 0 0 4px rgba(140, 29, 44, 0.14); }
.tl-when { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.tl h3 { margin: 0.15rem 0 0.3rem; font-size: 1.08rem; }
.tl p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.tl-pending h3, .tl-pending p { color: var(--faint); }

/* ---- evidence ---- */
.evidence { display: grid; gap: 0.75rem; margin: 0; }
.evidence div { display: grid; grid-template-columns: 12.5rem 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.evidence dt { font-size: 0.9rem; font-weight: 600; color: var(--faint); }
.evidence dd { margin: 0; font-size: 0.97rem; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.shot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.shot figcaption { padding: 0.75rem 0.9rem; font-size: 0.87rem; color: var(--muted); }
.shot-meta { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--faint); }

/* ---- checklist (field tool) ---- */
.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.check li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 0.7rem;
  padding: 0.75rem 0.95rem;
}
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--madder); }
.check b { display: block; font-weight: 600; }
.check small { display: block; color: var(--faint); margin-top: 0.2rem; font-size: 0.86rem; }
.check li:has(input:checked) { border-color: var(--madder); }
.stop { border-left: 4px solid var(--madder) !important; }
.stop b::after { content: " · STOP"; color: var(--madder); font-size: 0.76rem; letter-spacing: 0.06em; }

.count {
  position: sticky;
  bottom: calc(var(--bar) + var(--safe-b) + 0.6rem);
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  width: max-content;
  margin: 1.25rem auto 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
  .evidence div { grid-template-columns: 1fr; gap: 0.25rem; }
  .flow > li { padding: 1.2rem 1.1rem 1.2rem 3.4rem; }
  .flow > li::before { left: 0.95rem; }
}

/* ================= vertical rhythm =================
   One scale drives every gap. app.css had seven different section values
   (1.2 / 1.35 / 1.6 / 1.8 / 1.85 / 2 / 2.15rem) and three blocks whose top
   and bottom did not match. Everything below is symmetric unless the
   asymmetry is deliberate. app.css itself is untouched — delete this block
   and the repaint returns exactly as shipped. */
:root {
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1.25rem;
  --sp-lg: 1.75rem;
}

/* --- outer rhythm: equal above and below, every time --- */
.wrap.narrow { padding-top: 0; }
main > section { padding-block: var(--sp-md); }
main > .band { padding-block: var(--sp-lg); }
main > .band + section,
main > section + .band { padding-top: var(--sp-lg); }
main > footer.legal { padding-block: var(--sp-lg); }

/* The hero keeps the repaint's own value. Shortening it crops the mountain. */
main > section.hero,
main > section.hero:first-of-type { padding-block: 2rem; }

/* --- inner rhythm: space between blocks inside a section --- */
.wrap > h3 { margin-top: var(--sp-lg); }
.wrap > h3 + .work-list,
.wrap > h3 + .deck { margin-top: var(--sp-sm); }
.wrap.narrow > .work-list,
.wrap.narrow > .flow,
.wrap.narrow > .chain,
.wrap.narrow > .check,
.wrap.narrow > .evidence,
.wrap.narrow > .shots,
.wrap.narrow > .tl { margin-top: var(--sp-md); }
.wrap.narrow > .card.split { margin-top: var(--sp-md); }
.wrap.narrow > .hero-actions { margin-top: var(--sp-md); }
.wrap.narrow > .deck + .deck { margin-top: var(--sp-sm); }

/* --- first and last child never double up with the section padding --- */
.wrap.narrow > :first-child { margin-top: 0; }
.wrap.narrow > :last-child { margin-bottom: 0; }
.work-list li:last-child { margin-bottom: 0; }
.flow > li > p:last-child,
.tl > li > p:last-child { margin-bottom: 0; }

/* --- component tightening to match the scale --- */
.calc { gap: var(--sp-sm); }
.card.split .bar-track { margin-top: var(--sp-md); }
.rule { margin-block: var(--sp-lg); }
.count { margin-top: var(--sp-md); }

/* ================= page width =================
   Content capped at A4 portrait (210mm = 794px = 49.5rem). Backgrounds stay
   full-bleed: the body gradients and .hero-art are outside .wrap and are not
   touched. .bar-inner already reads var(--max), so the top and bottom bars
   line up with the column without another rule.
   Mobile is unaffected — .wrap is min(100% - 2rem, var(--max)), so below
   794px it stays full width with 1rem gutters. */
:root { --max: 49.5rem; }
.wrap.narrow { max-width: var(--max); }

/* Gutters widen slightly on tablet so the column does not touch the edge. */
@media (min-width: 34rem) and (max-width: 53.5rem) {
  .wrap { width: min(100% - 3rem, var(--max)); }
}

/* ================= background anchoring =================
   app.css sizes the body gradients in percentages of the page box
   (90% 42% at 50% -8%). The rhythm block above shortens every page, so those
   percentages resolved smaller and the wash compressed until it read as gone.
   Anchoring to the viewport makes the gradient independent of page length.
   No colour is restated here — app.css still owns every gradient value. */
body {
  background-attachment: fixed;
  min-height: 100dvh;
}

/* ================= inner-page backdrop =================
   .hero-art is a homepage-only element, so /pledge/ and /transparency/ had
   only the body wash, which at 0.07 alpha reads as nothing. This gives every
   page without a hero the same faded top band, using app.css's own hero-art
   values in both themes so the two never drift apart visually.
   Fixed and behind everything: it does not affect layout or scrolling. */
body:not(:has(.hero))::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 26rem;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244, 239, 230, 0.15) 0%, rgba(244, 239, 230, 0.55) 48%, var(--bg) 100%),
    radial-gradient(90% 80% at 70% 20%, rgba(140, 29, 44, 0.1), transparent 55%),
    linear-gradient(165deg, #d5dcc8 0%, #e2d3b8 48%, #ead9c4 100%);
}
html[data-theme="dark"] body:not(:has(.hero))::before {
  background:
    linear-gradient(180deg, rgba(18, 20, 22, 0.25) 0%, rgba(18, 20, 22, 0.78) 58%, #121416 100%),
    linear-gradient(180deg, #2a3138 0%, #1a1d22 100%);
}

/* The backdrop sits at z-index 0, so page content is lifted above it.
   The bars are deliberately NOT listed here: app.css gives them z-index 50,
   and setting them to 1 alongside main put main — which comes later in the
   DOM — on top of the fixed topbar, which reads as the bar going transparent.
   The bars keep their own stacking and stay above everything. */
body:not(:has(.hero)) > main,
body:not(:has(.hero)) > .demo-strip {
  position: relative;
  z-index: 1;
}

/* ================= bar opacity =================
   app.css sets the bars to color-mix(... 88%, transparent) with a blur.
   Two ways that goes see-through: a browser without color-mix drops the
   declaration entirely and leaves the bar fully transparent, and a browser
   without backdrop-filter keeps the 12% gap with no blur behind it.
   Solid fallback first, glass second, and solid again where blur is absent. */
.topbar,
.bottombar {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar,
  .bottombar { background: var(--bg); }
}

/* ================= agreement modal ================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20, 16, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }
.modal-box {
  width: min(100%, 44rem);
  max-height: min(92dvh, 52rem);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-head h2 { margin: 0; font-size: 1.4rem; }
.modal-sum {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--bg-2);
  border-radius: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.modal-doc {
  margin-top: 0.9rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  white-space: pre-wrap;
  font-size: 0.87rem;
  line-height: 1.62;
  color: var(--muted);
}
.modal-doc:focus-visible { outline: 2px solid var(--madder); outline-offset: 2px; }
.modal-gate { margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--madder); }
.modal-sign { margin-top: 1rem; display: grid; gap: 0.9rem; }
.agree-row { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.95rem; }
.agree-row input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--madder); }
.sign-grid { display: grid; gap: 0.8rem; }
.calc-field.sm input { font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; }
.modal-done { margin-top: 0.6rem; }
.modal-done h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.modal-done p { margin: 0 0 0.7rem; font-size: 0.95rem; }
#pp-mount { margin-top: 0.9rem; }
@media (min-width: 34rem) { .sign-grid { grid-template-columns: 1fr 1fr; } .sign-grid > :last-child { grid-column: 1 / -1; } }

/* ---- modal: one scrollbar, not two ----
   .modal-box and .modal-doc both scrolled. The box becomes a flex column
   sized to the viewport, and only the agreement scrolls inside it. */
.modal-box {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-doc {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: none;
}
.modal-head,
.modal-sum,
.modal-gate,
.modal-sign,
.modal-done { flex: 0 0 auto; }
.modal-sign,
.modal-done { overflow-y: auto; max-height: 22rem; }

/* ---- modal controls: reading small, acting large ----
   The agreement stays at 0.87rem because it is read. Everything the donor has
   to hit or type into is sized up to a proper target. */
.modal-sign .agree-row { font-size: 1.02rem; line-height: 1.5; gap: 0.85rem; }
.modal-sign .agree-row input { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; }
.modal-sign .calc-input label { font-size: 0.95rem; color: var(--ink); }
.modal-sign .calc-field.sm { padding: 0.2rem 0.9rem; }
.modal-sign .calc-field.sm input { font-size: 1.12rem; padding: 0.72rem 0; }
.modal-sign #ag-submit { width: 100%; padding: 0.95rem 1.4rem; font-size: 1.05rem; }
.modal-sign .tiny { font-size: 0.85rem; }
.modal-head .icon-btn { width: 2.6rem; height: 2.6rem; }
.modal-done .btn { width: 100%; padding: 0.95rem 1.4rem; font-size: 1.05rem; }

/* ---- blocked state: a dead button must say why ---- */
.modal-sign #ag-submit[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.modal-sign .hint.msg-blocked {
  color: var(--madder);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---- the signing moment ----
   Not confetti. A mark that draws itself once, then holds. The gravity of what
   the donor just did is carried by the words; this only marks the instant. */
.seal { display: grid; place-items: center; margin: 0.4rem 0 1rem; }
.seal svg { width: 4.6rem; height: 4.6rem; overflow: visible; }
.seal-ring {
  fill: none;
  stroke: var(--madder);
  stroke-width: 3;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: seal-ring 0.75s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.seal-tick {
  fill: none;
  stroke: var(--madder);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: seal-tick 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards;
}
@keyframes seal-ring { to { stroke-dashoffset: 0; } }
@keyframes seal-tick { to { stroke-dashoffset: 0; } }
.seal-line {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1rem !important;
}
.modal-done h3 { text-align: center; font-size: 1.5rem; margin-bottom: 0.6rem; }
@media (prefers-reduced-motion: reduce) {
  .seal-ring, .seal-tick { animation: none; stroke-dashoffset: 0; }
}

/* ---- once signed, the agreement gets out of the way ----
   .modal-box is overflow:hidden and .modal-doc flexes to fill it, so the
   success block rendered below the visible area and was clipped. When the
   done block appears, the document and the running summary are dismissed. */
.modal-box:has(.modal-done:not([hidden])) .modal-doc,
.modal-box:has(.modal-done:not([hidden])) .modal-sum,
.modal-box:has(.modal-done:not([hidden])) .modal-gate {
  display: none;
}
.modal-box:has(.modal-done:not([hidden])) {
  overflow-y: auto;
}
.modal-done:not([hidden]) {
  flex: 1 1 auto;
  max-height: none;
  overflow: visible;
}

/* ---- donor page: photo caption, quarterly card, rejected list ---- */
.shot-cap { display: block; font-weight: 500; color: var(--ink); }
.shot figcaption .shot-meta { margin-top: 0.35rem; }

.card.upd { display: grid; gap: 0.7rem; }
.upd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.upd-when {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
}
.upd-body { margin: 0; font-size: 1rem; line-height: 1.6; }
.upd-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--faint);
}
.chain .card.upd + .card.upd,
.wrap.narrow > .card.upd + .card.upd { margin-top: 0.85rem; }

.work-list li.rej { display: grid; gap: 0.3rem; }
.rej-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.rej-kind {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}
.rej-when { font-size: 0.82rem; color: var(--faint); margin-left: auto; }
.rej-why { color: var(--muted); }

/* block elements now, so the reset must match */
.shot figcaption .shot-cap,
.shot figcaption .shot-meta { margin: 0; }
.card.upd .upd-when { margin: 0; font-size: 1.12rem; }
.card.upd .upd-foot p { margin: 0; }
.work-list li.rej .rej-head,
.work-list li.rej .rej-why { margin: 0; }

/* ---- donor page Q&A ---- */
.faq { display: grid; gap: 0.55rem; margin-top: 1rem; }
.faq-item {
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: var(--surface); padding: 0.85rem 1rem;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--madder); font-weight: 700; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { margin-bottom: 0.6rem; }
.faq-item p { margin: 0; color: var(--muted); font-size: 0.97rem; line-height: 1.62; }

/* ---- currency picker on the 88% only ----
   The 12% fee is invoiced in France and never converts, so it carries no picker. */
.fx-line { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0.5rem; }
.fx-lab { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.fx-line select {
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  color: inherit; background: transparent; border: 1px solid currentColor;
  border-radius: 999px; padding: 0.2rem 0.55rem; opacity: 0.85;
}
.fx-line select:hover { opacity: 1; }
.split-direct .fx-line select { color: var(--bg); border-color: rgba(255,255,255,0.45); }
.split-direct .fx-line select option { color: var(--ink); background: var(--bg); }

/* ---- language notice on mission material ---- */
.lang-note {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--faint);
}

/* ---- the signature hold ---- */
.hold-note {
  margin: 0.6rem 0 0.9rem !important;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--madder);
  border-radius: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--madder);
}
.hold-note strong { font-variant-numeric: tabular-nums; }

/* ================= header and footer: one line, centred =================
   The header stays a single bar: brand, every link, then the tools. No second
   bar beneath it. On narrow screens the links step out of the header (the
   footer still carries all of them) so the bar never wraps to two lines. */
.topbar .bar-inner {
  justify-content: center;
  gap: 1.4rem;
}
.topbar .brand { flex: 0 0 auto; }
.topbar .bar-tools { flex: 0 0 auto; }
.topnav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
}
.topnav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--madder); }
.topnav a[aria-current="page"] { color: var(--madder); border-bottom-color: var(--madder); }
@media (max-width: 60rem) { .topnav { display: none; } }
@media (max-width: 60rem) { .topbar .bar-inner { justify-content: space-between; } }

.legal { text-align: center; }
.legal .wrap { display: grid; justify-items: center; }
.footnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.footnav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.footnav a:hover { color: var(--madder); text-decoration: underline; }
.footnav a[aria-current="page"] { color: var(--madder); }
.legal p { margin: 0.25rem 0; }

/* ================= mobile footer: one line, always =================
   Five links must sit on a single line at any width. Below the desktop
   breakpoint the header links are hidden, so the footer is the only full
   navigation a phone has. It never wraps: the font scales with the viewport
   and the gap tightens, so all five stay on one row down to 320px. */
@media (max-width: 60rem) {
  .footnav {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .footnav a {
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: clamp(0.66rem, 3.1vw, 0.92rem);
    letter-spacing: -0.01em;
    padding: 0.4rem 0;
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
  }
  .legal { padding-inline: 0.75rem; }
  .legal p { font-size: 0.8rem; line-height: 1.5; }
}
@media (max-width: 22rem) {
  .footnav a { font-size: 0.64rem; letter-spacing: -0.02em; }
}

/* ---- bilingual agreement ----
   Translation for understanding, then the governing English. Same scroll. */
.ag-translation { color: var(--ink); }
.ag-divider {
  margin: 1.2rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--madder);
}
.ag-english { color: var(--faint); font-size: 0.82rem; }

/* ---- top notice on a donor page, in the language they signed in ---- */
.page-notice {
  padding: 0.9rem 0 0 !important;
}
.page-notice .wrap {
  border: 1px solid var(--madder);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--madder) 6%, var(--bg));
}
.page-notice-head { margin: 0 0 0.3rem; font-weight: 700; color: var(--madder); font-size: 1rem; }
.page-notice-body { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }