/* ==========================================================================
   سَنَد — donation screen. Team B: "calm modern product UI".
   1. Tokens (colour, type, space, radius, MOTION)  2. Base  3. Layout
   4. Components  5. Stage + character motion  6. No-motion  7. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour — 60 warm neutrals / 30 white surfaces / 10 deep teal */
  --bg: #F6F3EE;
  --surface: #FFFFFF;
  --surface-2: #F3EFE8;
  --line: #E6E0D6;
  --line-strong: #8C8376;  /* 3.6:1 on white: component boundaries (WCAG 1.4.11) */
  --ink: #1C2523;        /* 15.6:1 on --bg */
  --ink-2: #4D5956;      /* 6.6:1 on --surface */
  --ink-3: #66716E;      /* 4.9:1 on --surface */
  --accent: #0E5E5A;     /* 7.4:1 with white */
  --accent-hover: #0A4B48;
  --accent-soft: #E2EFEC;
  --accent-ink: #0B4D4A;
  --sun: #F2C14E;
  --focus: #0E5E5A;

  /* type */
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", sans-serif;
  --fs-12: .75rem; --fs-14: .875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem;

  /* space (4/8) + radius */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(28, 37, 35, .05), 0 1px 1px rgba(28, 37, 35, .03);
  --shadow-2: 0 10px 30px -12px rgba(28, 37, 35, .16), 0 2px 6px rgba(28, 37, 35, .05);

  /* ---- MOTION TOKENS (single source; app.js reads these, motion-spec.json mirrors them) ---- */
  --ease-enter: cubic-bezier(.34, 1.45, .55, 1);   /* gentle overshoot: "settles into place" */
  --ease-exit: cubic-bezier(.45, 0, .85, .4);      /* accelerates away, no bounce */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-sine: cubic-bezier(.37, 0, .63, 1);
  --dur-enter: 560ms;
  --dur-exit: 240ms;
  --dur-fade-in: 110ms;
  --dur-pose: 480ms;
  --dur-strap: 640ms;
  --shoe-land: 300ms;
  --swap-at: 300ms;      /* pinafore has covered the everyday clothes */
  --dur-react: 700ms;
  --dur-happy: 900ms;
  --dur-ui: 180ms;
  --stagger-up: 280ms;     /* between levels when climbing */
  --stagger-down: 170ms;   /* between levels when going back down */
  --stagger-within: 140ms; /* shoes -> stationery inside level 5 */
  --count-dur: 420ms;      /* amount number tween */
  --idle-breath: 3.8s;
  --idle-sway: 6.4s;
  --idle-blink: 4.6s;
  --idle-pony: 3.2s;
  --idle-head: 7.2s;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -60px; z-index: 10;
  background: var(--accent); color: #fff; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600; transition: top var(--dur-ui) var(--ease-standard);
}
.skip-link:focus { top: var(--s-3); }

/* ---------- 3. Layout ---------- */
.topbar { border-bottom: 1px solid var(--line); background: rgba(246, 243, 238, .9); }
.topbar__inner {
  max-width: 1280px; margin: 0 auto; padding: var(--s-3) var(--s-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.layout {
  max-width: 1280px; margin: 0 auto;
  padding: var(--s-6) var(--s-8) var(--s-8);
  display: grid;
  grid-template-columns: minmax(440px, 540px) minmax(0, 1fr); /* RTL: controls on the right */
  gap: var(--s-10);
  align-items: start;
}

/* ---------- 4. Components ---------- */
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; border-radius: var(--r-sm); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); }
.brand__tag { font-size: var(--fs-12); color: var(--ink-2); }

.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-14); font-weight: 500;
  transition: border-color var(--dur-ui) var(--ease-standard);
}
.motion-toggle:hover { border-color: var(--ink-2); }
.motion-toggle__track {
  position: relative; width: 36px; height: 20px; border-radius: var(--r-pill); background: #827A6E;
  transition: background var(--dur-ui) var(--ease-standard);
}
.motion-toggle__thumb {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform var(--dur-ui) var(--ease-standard);
}
.motion-toggle[aria-checked="true"] .motion-toggle__track { background: var(--accent); }
.motion-toggle[aria-checked="true"] .motion-toggle__thumb { transform: translateX(-16px); } /* RTL: moves to the left */

.panel { display: flex; flex-direction: column; gap: var(--s-4); }
.eyebrow { color: var(--accent-ink); font-weight: 600; font-size: var(--fs-14); }
h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 2.125rem;
  line-height: 1.3; letter-spacing: 0; margin-top: calc(-1 * var(--s-2));
}
.lede { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; max-width: 48ch; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6); box-shadow: var(--shadow-1);
}
.label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-16); color: var(--ink); }
.hint { color: var(--ink-3); font-size: var(--fs-14); }
.amount-card { display: flex; flex-direction: column; gap: var(--s-4); }
.amount-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }

.stepper { display: grid; grid-template-columns: 64px 1fr 64px; gap: var(--s-3); align-items: stretch; }
.step {
  display: grid; place-items: center; height: 64px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid transparent; color: var(--accent);
  transition: background var(--dur-ui) var(--ease-standard), transform 120ms var(--ease-standard);
}
.step svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.step:hover { background: #D3E7E3; }
.step:active { transform: scale(.96); }
.step[aria-disabled="true"] { color: #8A9592; background: var(--surface-2); cursor: default; }
.stepper__field {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2);
  transition: border-color var(--dur-ui) var(--ease-standard), background var(--dur-ui) var(--ease-standard);
}
.stepper__field:focus-within { border-color: var(--accent); background: var(--surface); outline: 3px solid var(--focus); outline-offset: 3px; }
.stepper__input {
  width: 4.2ch; border: 0; background: transparent; text-align: center; direction: ltr;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-32); line-height: 1;
  padding: 0; font-variant-numeric: tabular-nums; align-self: stretch;
}
.stepper__input:focus { outline: none; }
.stepper__unit { color: var(--ink-2); font-size: var(--fs-16); font-weight: 500; }
.amount-note { min-height: 0; color: var(--ink-2); font-size: var(--fs-14); }
.amount-note:empty { display: none; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.chip {
  min-height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-16);
  transition: background var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard);
}
.chip span { font-family: var(--font-ui); font-size: var(--fs-14); color: var(--ink-2); }
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip[aria-pressed="true"] span { color: #E3F1EE; }

/* level track: 5 stops, fills right→left (RTL) */
.levels-card { display: flex; flex-direction: column; gap: var(--s-3); }
.track {
  --progress: 0; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); position: relative;
}
.track::before, .track::after {
  content: ""; position: absolute; top: 9px; height: 4px; border-radius: 2px;
  inset-inline-start: 10%; width: 80%;
}
.track::before { background: #DCD5CA; }
.track::after {
  background: var(--accent); transform-origin: right center;
  transform: scaleX(calc(var(--progress) / 4));
  transition: transform 420ms var(--ease-standard);
}
.track__stop {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px; color: var(--ink-3);
}
.track__dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid #8C8478;
  margin-bottom: var(--s-1);
  transition: background 240ms var(--ease-standard), border-color 240ms var(--ease-standard), transform 360ms var(--ease-enter);
}
.track__amt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14); color: var(--ink-2); line-height: 1.3; }
.track__name { font-size: var(--fs-12); line-height: 1.35; max-width: 11ch; }
.track__stop.is-reached .track__dot { background: var(--accent); border-color: var(--accent); }
.track__stop.is-reached .track__name { color: var(--ink-2); }
.track__stop.is-current .track__dot {
  box-shadow: 0 0 0 5px var(--accent-soft); transform: scale(1.12);
}
.track__stop.is-current .track__amt, .track__stop.is-current .track__name { color: var(--accent-ink); font-weight: 600; }

.impact {
  font-size: var(--fs-18); line-height: 1.6; color: var(--ink); font-weight: 500; min-height: 3.2em;
  padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.next { color: var(--ink-2); font-size: var(--fs-14); margin-top: calc(-1 * var(--s-1)); }
.next b { color: var(--accent-ink); font-weight: 600; }

.donate-row { display: flex; flex-direction: column; gap: var(--s-2); }
.donate {
  min-height: 60px; width: 100%; border: 0; border-radius: var(--r-md); background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20);
  box-shadow: 0 8px 20px -10px rgba(14, 94, 90, .7);
  transition: background var(--dur-ui) var(--ease-standard), transform 120ms var(--ease-standard);
}
.donate:hover { background: var(--accent-hover); }
.donate:active { transform: translateY(1px); }
.donate[aria-disabled="true"] { background: #DCD6CC; color: #4D5956; box-shadow: none; cursor: default; }
.fineprint { color: var(--ink-3); font-size: var(--fs-12); text-align: center; }

/* ---------- 5. Stage ---------- */
.stage { position: sticky; top: var(--s-6); }
.stage__card {
  position: relative; border-radius: var(--r-xl); overflow: hidden; background: #F2ECE3;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  aspect-ratio: 600 / 640; max-height: calc(100vh - 124px); margin-inline: auto;
}
.scene { display: block; width: 100%; height: 100%; overflow: visible; }
.stage__meta {
  position: absolute; top: var(--s-5); inset-inline-start: var(--s-5); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.stage__amount {
  font-family: var(--font-display); font-size: var(--fs-16); color: var(--ink-2);
  background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-4); display: inline-flex; align-items: baseline; gap: 6px;
}
.stage__amount b { font-size: var(--fs-24); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.stage__level { font-size: var(--fs-12); color: var(--ink-2); padding-inline-start: var(--s-4); }

/* --- character items: transform/opacity only; CSS transitions are interruptible by design ---
   Each item has its own physical "from" pose. Opacity snaps in fast so nothing floats half-transparent. */
#sceneSvg .item {
  opacity: 0;
  transform-box: fill-box;
  /* exit: travel back to the entry pose, then snap invisible at the very end (no translucent ghost frames) */
  transition: opacity 0ms linear var(--dur-exit), transform var(--dur-exit) var(--ease-exit);
}
#sceneSvg .item.is-on {
  opacity: 1; transform: none;
  /* enter: fully opaque on frame 1, the gesture is carried by transform alone */
  transition: opacity 0ms linear 0ms, transform var(--dur-enter) var(--ease-enter);
}
#sceneSvg #bag-straps.is-on { transition: opacity 0ms linear 0ms, transform var(--dur-strap) var(--ease-enter) 60ms; }
#sceneSvg #books.is-on { transition: opacity 0ms linear 0ms, transform var(--dur-pose) var(--ease-enter); }
/* bag: drops onto her back with a little tilt, then settles; straps tighten a beat later */
#bag { transform-origin: 50% 100%; transform: translateY(-46px) rotate(-5deg); }
/* straps never cross the face: they start as short stubs on the shoulders and are pulled DOWN over the body */
#bag-straps { transform-origin: 50% 0%; transform: scaleY(.12); }
/* books ride on the forearm (the arm lifts them); they only grow a touch */
#books { transform-origin: 30% 100%; transform: scale(.86); }
/* pinafore: a cloth drop from the collar line */
#uniform-pinafore { transform-origin: 50% 0%; transform: scaleY(.06); }
/* shoes: land from a small hop; stationery: swings into her hand from the grip point */
#shoes { transform-origin: 50% 100%; transform: translateY(-24px) scaleY(1.06); }
#stationery { transform-origin: 50% 0%; transform: rotate(32deg) scale(.7); }

/* SNAP layers (white shirt, trousers, collar, uniform sleeves): no cross-fade. They switch while the
   pinafore covers the change, so the everyday skirt and the uniform are never both visible. */
/* Uniform swap order: the pinafore drops OVER the everyday clothes; only once it covers them (t = --swap-at)
   do the hidden layers swap (sweater/skirt -> shirt/trousers). On the way back the swap happens at t=0 under the
   pinafore, which then lifts off the everyday clothes. No frame ever shows her half-dressed. */
#sceneSvg .item.snap { transform: none; transition: opacity 0ms linear 0ms; }
#sceneSvg .item.snap.is-on { transition: opacity 0ms linear var(--swap-at); }
/* Replaced layers (everyday clothes/shoes) hide instantly when the item arrives and come back
   instantly once the item has finished leaving. */
#sceneSvg .replaced { opacity: 1; transition: opacity 0ms linear 0ms; }
#sceneSvg .replaced.is-off { opacity: 0; transition: opacity 0ms linear var(--swap-at); }
/* everyday shoes stay until the school shoes have landed on them */
#sceneSvg #shoes-everyday.is-off { transition: opacity 0ms linear var(--shoe-land); }

/* arm rig: pivots at shoulder/elbow (local 0,0) */
.arm-r-upper, .arm-r-fore, .arm-l-upper, .arm-l-fore {
  transform-box: view-box; transform-origin: 0 0;
  transition: transform var(--dur-pose) var(--ease-enter);
}
.arm-r-upper { transform: rotate(5deg); }
.arm-r-fore  { transform: rotate(-18deg); }
.arm-l-upper { transform: rotate(-10deg); }
.arm-l-fore  { transform: rotate(5deg); }
.pose-books .arm-r-upper { transform: rotate(14deg); }
.pose-books .arm-r-fore  { transform: rotate(-136deg); }
.pose-stationery .arm-l-upper { transform: rotate(-13deg); }
.pose-stationery .arm-l-fore  { transform: rotate(7deg); }

/* head reaction: a small look toward the new item + a brighter smile (< 900 ms) */
.head-react { transform-box: view-box; transform-origin: 0 -352px; }
.is-reacting .head-react { animation: react var(--dur-react) var(--ease-standard); }
@keyframes react {
  0% { transform: none; }
  35% { transform: rotate(var(--react-tilt, 3deg)) translateY(2.5px); }
  70% { transform: rotate(calc(var(--react-tilt, 3deg) * -0.25)) translateY(-1px); }
  100% { transform: none; }
}
.mouth-happy { opacity: 0; transition: opacity 120ms linear; }
.mouth-calm { transition: opacity 120ms linear; }
.is-happy .mouth-happy { opacity: 1; }
.is-happy .mouth-calm { opacity: 0; }

/* idle life: breathing, sway, blink, ponytail, head — subtle, slow, transform only */
.sway { transform-box: view-box; transform-origin: 0 0; animation: sway var(--idle-sway) var(--ease-sine) infinite alternate; }
.breath { transform-box: view-box; transform-origin: 0 0; animation: breath var(--idle-breath) var(--ease-sine) infinite alternate; }
.head-tilt { transform-box: view-box; transform-origin: 0 -352px; animation: head var(--idle-head) var(--ease-sine) infinite alternate; }
.ponytail-swing { transform-box: view-box; transform-origin: 0 0; animation: pony var(--idle-pony) var(--ease-sine) infinite alternate; }
.eye { transform-box: fill-box; transform-origin: 50% 55%; animation: blink var(--idle-blink) linear infinite; }
.eye + .eye { animation-delay: 0s; }
@keyframes sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
@keyframes breath { from { transform: scaleY(1); } to { transform: scaleY(1.012); } }
@keyframes head { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
@keyframes pony { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes blink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  93.5% { transform: scaleY(.08); }
}

/* first paint / deep-link: settled state, no transition at all */
.is-instant *, .is-instant *::before, .is-instant *::after { transition: none !important; }

/* ---------- 6. No-motion (prefers-reduced-motion OR the «إيقاف الحركة» switch) ---------- */
.no-motion .sway, .no-motion .breath, .no-motion .head-tilt, .no-motion .ponytail-swing, .no-motion .eye { animation: none; }
.no-motion #sceneSvg .item, .no-motion #sceneSvg .item.is-on, .no-motion #sceneSvg .replaced,
.no-motion #sceneSvg .replaced.is-off, .no-motion #sceneSvg #shoes-everyday.is-off { transition: none !important; }
.no-motion .arm-r-upper, .no-motion .arm-r-fore, .no-motion .arm-l-upper, .no-motion .arm-l-fore { transition: none; }
.no-motion .is-reacting .head-react { animation: none; }
.no-motion .track::after, .no-motion .track__dot { transition: none; }
.no-motion .step:active, .no-motion .donate:active { transform: none; }

/* ---------- dialog ---------- */
.thanks {
  border: 0; border-radius: var(--r-xl); padding: var(--s-8); width: min(440px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); text-align: center; box-shadow: 0 30px 80px -20px rgba(20, 30, 28, .35);
}
.thanks::backdrop { background: rgba(28, 37, 35, .38); }
.thanks[open] { animation: dialog-in 320ms var(--ease-enter); }
.no-motion .thanks[open] { animation: none; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.thanks__icon svg { width: 56px; height: 56px; display: block; margin: 0 auto var(--s-4); }
.thanks h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); margin-bottom: var(--s-2); }
.thanks p { color: var(--ink-2); line-height: 1.7; }
.thanks p b { color: var(--ink); font-family: var(--font-display); }
.thanks__demo { font-size: var(--fs-14); margin-top: var(--s-3); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-md); }
.thanks .donate { margin-top: var(--s-6); min-height: 52px; font-size: var(--fs-18); }

/* ---------- 7. Responsive ---------- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(400px, 460px) minmax(0, 1fr); gap: var(--s-8); padding-inline: var(--s-6); }
  h1 { font-size: var(--fs-32); }
}
/* Tablet (768): controls first in two balanced columns; the stage fills the rest of the viewport (no scroll at 768×1024) */
@media (max-width: 960px) {
  body { display: flex; flex-direction: column; min-height: 100vh; }
  .topbar__inner { padding: var(--s-3) var(--s-6); }
  .layout {
    flex: 1 1 auto; width: 100%; display: flex; flex-direction: column;
    gap: var(--s-4); padding: var(--s-4) var(--s-6) var(--s-5);
  }
  .panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); align-items: start; }
  .panel > .eyebrow, .panel > h1, .panel > .lede { grid-column: 1 / -1; }
  .lede { font-size: var(--fs-16); max-width: none; }
  h1 { font-size: var(--fs-32); margin-top: calc(-1 * var(--s-3)); }
  .amount-card { grid-column: 1; grid-row: 4; padding: var(--s-4) var(--s-5); }
  .donate-row { grid-column: 1; grid-row: 5; }
  .donate-row .donate { min-height: 56px; }
  .levels-card { grid-column: 2; grid-row: 4 / span 2; align-self: stretch; padding: var(--s-4) var(--s-5); }
  .stage { position: relative; top: auto; align-self: stretch; flex: 1 1 0; min-height: 440px; }
  .stage__card { position: absolute; inset: 0; aspect-ratio: auto; height: auto; max-height: none; }
  .scene { position: absolute; inset: 0; height: 100%; }
  .track__name { font-size: 11px; }
}
/* Short desktop windows (e.g. 1280×800): tighten the vertical rhythm so donate stays above the fold */
@media (min-width: 961px) and (max-height: 840px) {
  .layout { padding-top: var(--s-4); }
  .panel { gap: var(--s-3); }
  h1 { font-size: 1.875rem; }
  .lede { font-size: var(--fs-16); line-height: 1.6; }
  .card { padding: var(--s-4) var(--s-6); }
  .amount-card, .levels-card { gap: var(--s-3); }
  .impact { min-height: 0; font-size: var(--fs-16); }
  .donate { min-height: 52px; font-size: var(--fs-18); }
  .layout { padding-bottom: var(--s-3); }
  .step { height: 54px; }
  .stepper { grid-template-columns: 54px 1fr 54px; }
  .stepper__input { font-size: 1.75rem; }
  .chip { min-height: 40px; }
  .stage__card { max-height: calc(100vh - 104px); }
}
/* laptop heights (1366×768, 1024×768): drop the eyebrow and tighten once more */
@media (min-width: 961px) and (max-height: 790px) {
  .eyebrow { display: none; }
  h1 { margin-top: 0; font-size: 1.75rem; }
  .lede { line-height: 1.55; }
  .panel { gap: 10px; }
  .card { padding: var(--s-3) var(--s-5); }
  .levels-card { gap: var(--s-2); }
  .impact { padding-top: var(--s-2); line-height: 1.5; }
  .donate-row { gap: 4px; }
}
@media (max-width: 640px) {
  .panel { display: flex; }
  h1 { font-size: var(--fs-24); }
  .stage { flex: none; height: 420px; min-height: 0; }
  .stepper__input { width: 3.4ch; }
  .stage__level { display: none; }
}