/* Landing page sections, in page order: countdown, hero (with goal bar),
   story, voice, dial, tiers, faq, about, footer, sticky CTA.
   Direction comes from <html dir>; only logical properties here. */

/* ============ countdown band ============ */
.cd {
    position: sticky; top: 0; z-index: 60; color: #fff; overflow: hidden; isolation: isolate;
    background: linear-gradient(103deg, #1C220C 0%, #3F4E1B 46%, #5E7A2A 100%);
    width: 100%; max-width: none; margin: 0;
}
.cd::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 8, 8, .72); }
/* Days on the left like every stopwatch, whatever the page direction. */
.cd-in {
    display: flex; align-items: center; justify-content: center; direction: ltr;
    gap: clamp(.9rem, 3.4vw, 2rem); padding: .5rem 1rem .3rem;
}
.cd-u { text-align: center; min-width: 38px; }
.cd-u b { display: block; font-size: clamp(1.1rem, 4vw, 1.45rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
/* .72rem floor: the accessibility statement promises AA and 9.6px text does not read. */
.cd-u span { display: block; font-size: clamp(.72rem, 2vw, .7rem); color: rgba(255, 255, 255, .75); margin-block-start: .25rem; }
.cd-note {
    margin: 0; padding: 0 1rem .6rem; text-align: center; color: rgba(255, 255, 255, .86);
    font-size: clamp(.72rem, 1.6vw, .82rem); font-weight: 700; letter-spacing: .02em;
}

/* ============ hero ============
   Two equal columns: text and picture. The hero is dark, so every text
   colour is set explicitly instead of inherited. The gradient stops at
   #4E6126 because white on it is 6.9:1, still AA. */
.hero {
    position: relative; isolation: isolate; text-align: center; overflow: hidden;
    padding-block: clamp(2.6rem, 5.6vw, 4.4rem);
    background: linear-gradient(158deg, #1C220C 0%, #2B3410 38%, #3F4E1B 72%, #4E6126 100%);
}
.hero .wrap { width: min(1180px, 94vw); max-width: none; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.hero__text { text-align: center; }
.hero .kicker { font-size: clamp(1rem, 2.1vw, 1.3rem); color: var(--sand); font-weight: 500; }
/* Underline as a border, not text-decoration: text-decoration cuts through
   Hebrew descenders; a border sits under the whole line. Sized to the
   column width, not the viewport, so it does not break into three lines. */
.hero h1 {
    display: inline-block; margin-block-start: .7rem; padding-block-end: .16em;
    border-block-end: .075em solid var(--olive-lite);
    font-size: clamp(1.55rem, 2.7vw, 2.35rem); font-weight: 900; line-height: 1.2; letter-spacing: -.028em;
    color: #fff; text-wrap: wrap; text-wrap-style: auto; text-align: center; max-width: none;
}
/* margin-inline: 0 also clears the browser's blockquote indent */
.hero .sub { margin-block: 0 .9rem; margin-inline: 0; font-size: clamp(.98rem, 1.7vw, 1.12rem); color: rgba(255, 255, 255, .9); text-align: center; }
/* The quote: no side rule and no indent, the quote marks and weight mark it. */
.hero .sub--quote { margin-block: 0 .9rem; padding: 0; border: 0; font-weight: 700; text-wrap: pretty; }
/* The closing line carries the number; a thin rule above it separates data from story. */
.hero .sub--last {
    margin-block-start: 1.5rem; padding-block-start: 1.2rem;
    border-block-start: 1px solid rgba(255, 255, 255, .18); font-weight: 700;
}
.hero .sub:last-of-type { margin-block-end: 0; }
.hero .btn-coral { margin-block-start: 2rem; }
.hero .trust { margin-block-start: 1.4rem; }
/* volunteers line */
.hero__vol {
    margin-block-start: 1.6rem; padding: .9rem 1.1rem; border-radius: 14px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.hero__vol p { margin: 0; font-size: clamp(.86rem, 1.5vw, .97rem); font-weight: 600; color: #fff; line-height: 1.7; }

/* picture column: the img sits absolute inside a 4:5 frame, so the frame
   keeps its ratio whether or not the file loads; the campaign mark shows
   through as a panel until it does. */
.hero__pic { width: 100%; }
.hero__pic .ph {
    position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
    display: grid; place-items: center;
    background:
        radial-gradient(72% 62% at 50% 36%, rgba(147, 174, 68, .22), transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .2));
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .65);
}
.hero__pic .ph__mark { width: min(54%, 250px); height: auto; opacity: .42; filter: brightness(0) invert(1); }
.hero__pic .ph__photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* ---------- goal line + progress bar (hidden unless goal and done are set) ----------
   On the dark hero the polarity flips: dark track with white percent, light
   fill with dark text, readable at 3% and at 97% alike. */
.goal-label { margin-block-start: 0; font-size: clamp(.98rem, 1.7vw, 1.1rem); color: #3A3A3A; }
.hero .goal-label { color: var(--sand); font-weight: 700; }
.bar {
    position: relative; height: 52px; border-radius: 999px; background: var(--track);
    max-width: 1020px; margin: 1rem auto 0; overflow: hidden; display: flex; align-items: center;
}
.bar-fill {
    position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--olive);
    border-radius: 999px; transition: width 1.5s cubic-bezier(.2, .8, .3, 1);
}
.bar-in {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding-inline: 1.5rem; pointer-events: none; font-weight: 800; font-size: clamp(.86rem, 1.6vw, 1.02rem);
}
.bar-done { color: #fff; white-space: nowrap; }
.bar-pct { color: var(--maroon); font-variant-numeric: tabular-nums; }
.hero .bar { max-width: none; background: rgba(0, 0, 0, .3); }
.hero .bar-fill { background: var(--cta-on-dark); }
.hero .bar-done { color: var(--olive-black); }
.hero .bar-pct { color: #fff; }

/* ============ story ============
   White, with the volunteers band as a dark card on top: the only dark
   thing on white, so it reads first. */
.story { background: #fff; color: #1F1F1F; }
.story__in { width: min(820px, 92vw); margin-inline: auto; padding-block: clamp(2.6rem, 6vw, 4.2rem); text-align: center; }
.story__band {
    background: linear-gradient(158deg, #1C220C 0%, #2B3410 45%, #3F4E1B 100%);
    color: #fff; border-radius: 16px; padding: 1rem 1.3rem; margin-block-end: clamp(1.4rem, 3vw, 2rem);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .55);
}
.story__band p { margin: 0; font-size: clamp(.92rem, 1.8vw, 1.04rem); line-height: 1.75; }
.story__band p + p { margin-block-start: .15rem; font-weight: 800; }
.story__pic { border-radius: 16px; overflow: hidden; margin-block-end: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .5); }
.story__pic img { width: 100%; height: auto; display: block; }
.story h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 3.2vw, 2.05rem); font-weight: 900; line-height: 1.3; color: var(--olive); text-wrap: balance; }
.story__text { margin: 0 auto; max-width: 70ch; font-size: clamp(.95rem, 1.8vw, 1.04rem); line-height: 1.95; color: #3A3A3A; }
.story__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    margin-block-start: clamp(1.6rem, 3.4vw, 2.3rem);
    background: var(--cta-on-light); color: #fff;
    font-family: var(--font); font-size: clamp(1rem, 1.9vw, 1.08rem); font-weight: 800;
    padding: .85rem 2rem; border: 2px solid #fff; border-radius: 999px; cursor: pointer;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45);
    transition: background-color .2s ease, transform .16s ease;
}
.story__cta:hover { background: var(--cta-on-light-h); transform: translateY(-2px); }
.story__cta svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }

/* ============ voice (testimonial) ============
   Black between two white sections: a pause, not an effect. The giant
   quote mark is decoration only (aria-hidden in the markup). */
.voice { background: #fff; padding-block: clamp(1rem, 2.4vw, 2rem); }
.voice__card {
    position: relative; isolation: isolate; overflow: hidden;
    width: min(1000px, 92vw); margin-inline: auto;
    background: #0B0D06; border-radius: 24px; padding: clamp(2rem, 4.6vw, 3.4rem);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85);
}
.voice__card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(46% 58% at 14% 42%, rgba(147, 174, 68, .2), transparent 68%);
}
.voice__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem, 3.6vw, 3rem); align-items: center; }
/* Picture in the first column; DOM order stays quote then picture so a
   screen reader hears the speaker first. Row is explicit too, or the
   picture drops to a second row and leaves half the card empty. */
.voice__pic { grid-column: 1; grid-row: 1; margin: 0; }
.voice__text { grid-column: 2; grid-row: 1; min-width: 0; }
.voice__ph {
    position: relative; width: clamp(150px, 20vw, 220px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: linear-gradient(160deg, #2B3410, #1C220C);
    box-shadow: 0 0 0 3px var(--sand), 0 0 0 10px rgba(214, 200, 154, .16), 0 22px 44px -20px rgba(0, 0, 0, .8);
}
.voice__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice__ph .voice__mark { position: static; width: 52%; height: auto; object-fit: contain; opacity: .4; filter: brightness(0) invert(1); }
.voice__q { position: relative; margin: 0; }
.voice__q::before {
    content: "\201C"; position: absolute; inset-block-start: -.44em; inset-inline-start: -.06em;
    font-size: clamp(4rem, 9vw, 7rem); line-height: 1; color: var(--olive-lite); opacity: .22; z-index: -1;
    font-family: var(--display, inherit);
}
[dir="rtl"] .voice__q::before { content: "\201D"; }
.voice__q p {
    margin: 0; color: #fff; text-align: start;
    font-size: clamp(1.12rem, 2.5vw, 1.62rem); font-weight: 800; line-height: 1.55; letter-spacing: -.012em; text-wrap: balance;
}
.voice__q p + p { margin-block-start: .75rem; font-size: .82em; font-weight: 700; color: rgba(255, 255, 255, .9); }
.voice__q cite { display: block; margin-block-start: 1rem; font-style: normal; color: var(--sand); font-weight: 700; font-size: clamp(.86rem, 1.7vw, .98rem); text-align: start; }
.voice__mission {
    margin: clamp(1.5rem, 3vw, 2.1rem) 0 0; padding-block-start: clamp(1.2rem, 2.4vw, 1.6rem);
    border-block-start: 1px solid rgba(255, 255, 255, .13);
    font-size: clamp(.9rem, 1.7vw, 1rem); line-height: 1.9; color: rgba(255, 255, 255, .68); text-align: center;
}
.voice__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin-block-start: 1.4rem;
    background: var(--sand); color: var(--olive-black);
    font-family: var(--font); font-size: clamp(.98rem, 1.9vw, 1.08rem); font-weight: 800;
    padding: .85rem 2rem; border: 0; border-radius: 999px; cursor: pointer;
    box-shadow: 0 14px 30px -14px rgba(214, 200, 154, .55);
    transition: background-color .2s ease, transform .16s ease;
}
.voice__cta:hover { background: #E4D9B4; transform: translateY(-2px); }
.voice__cta:focus-visible { outline: 3px solid var(--sand); outline-offset: 4px; }
.voice__cta svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.voice__fine { margin: .7rem 0 0; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .55); }
.voice__foot { text-align: center; }

/* ============ dial section (what the money does) ============ */
.eq-sec { text-align: center; }
.eq-sec--light { background: #fff; color: #1F1F1F; }
.facts { text-align: center; }
/* Direct children only for the sizes: the dial paragraphs keep their own. */
.facts > p { max-width: 58ch; margin-inline: auto; font-size: clamp(1.04rem, 1.9vw, 1.28rem); line-height: 1.62; text-wrap: pretty; }
.facts > p + p { margin-block-start: 1.15rem; }
/* Every paragraph in the section is ink, the dial ones included: this
   outranks the greys declared on .dial__what/.dial__scale/.dial__fine,
   exactly as on the old page. */
.eq-sec--light .facts p { color: #1F1F1F; }
/* A native range, not buttons: the amount is a continuum. Values snap to
   the tiers of LP_CONFIG. 44px tall for a thumb-drag target; the track
   itself stays thin. */
.dial { max-width: 520px; margin-inline: auto; text-align: center; }
.dial__amount { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .25rem; font-variant-numeric: tabular-nums; }
.dial__amount b { font-size: clamp(3rem, 9vw, 4.6rem); font-weight: 900; line-height: 1; color: var(--olive); }
.dial__amount span { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 800; color: var(--olive); }
.dial__what { margin: .4rem 0 1.6rem; font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 800; color: #111; }
.dial__lbl { display: block; margin-block-end: .5rem; font-size: .82rem; letter-spacing: .02em; color: #5A5A5A; }
.dial__range { width: 100%; margin: 0; accent-color: var(--olive); cursor: pointer; height: 44px; }
.dial__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; }
.dial__range::-moz-range-track { height: 6px; border-radius: 999px; }
.dial__range::-webkit-slider-thumb { margin-block-start: -7px; }
.dial__range:focus-visible { outline: 3px solid var(--olive-mid); outline-offset: 4px; border-radius: 8px; }
.dial__scale { display: flex; justify-content: space-between; margin: -.2rem 0 1.5rem; font-size: .74rem; color: #8A8A8A; font-variant-numeric: tabular-nums; }
.dial .btn-coral { margin: 0; }
.dial__fine { margin: 1.1rem 0 0; font-size: .84rem; color: #5A5A5A; }

/* ============ tiers ============
   Rows, not three cards side by side: a ladder reads once top to bottom
   and shows growth. On mobile it is three full-width rows. */
.tiers-sec { background: linear-gradient(158deg, #1C220C 0%, #2B3410 38%, #3F4E1B 70%, #55692A 100%); }
.tiers-sec::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(60% 45% at 8% 62%, rgba(255, 255, 255, .16), transparent 62%),
                radial-gradient(50% 40% at 92% 88%, rgba(255, 255, 255, .1), transparent 60%);
}
.tiers-head { text-align: center; }
.tiers-head .l1 { font-size: clamp(1.35rem, 3.1vw, 2.05rem); font-weight: 800; }
.tiers-head .l2 { font-size: clamp(1.7rem, 4.4vw, 2.9rem); font-weight: 800; margin-block-start: .2rem; }
.tiers-head .l2 u { text-decoration: none; border-bottom: 5px solid #fff; padding-bottom: 1px; }
.tiers-sec .trust { margin-block-start: clamp(1.8rem, 3vw, 2.6rem); }

.ladder { list-style: none; margin: 2.6rem auto 0; padding: 0; max-width: 1020px; display: grid; gap: 14px; }
.rung {
    position: relative; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 20px;
    padding: 18px 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.rung:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
/* The middle row stands out: one break in the symmetry gives the eye an anchor and the donor a default. */
.rung.is-pick { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); box-shadow: 0 10px 34px rgba(0, 0, 0, .22); }
.rung__tag {
    position: absolute; inset-block-start: -11px; inset-inline-start: 22px;
    margin: 0; padding: 4px 13px; border-radius: 999px;
    background: var(--olive-lite); color: var(--olive-black);
    font-size: .78rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}
/* Rounded square with a big digit until there is a photo. */
.rung__face {
    position: relative; width: 96px; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
    background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center;
}
.rung__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rung__num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .72); }
.rung__body { min-width: 0; }
.rung__body h3 { margin: 0; font-size: clamp(1.02rem, 1.9vw, 1.22rem); color: #fff; line-height: 1.25; }
.rung__body p { margin: .34rem 0 0; font-size: clamp(.86rem, 1.5vw, .96rem); color: rgba(255, 255, 255, .76); }
/* Dots say "three people" faster than any number */
.rung__who { display: flex; align-items: flex-start; gap: 6px; margin-block-start: .62rem; }
.rung__who i {
    margin-block-start: .28rem; width: 9px; height: 9px; border-radius: 50%;
    background: var(--olive-lite); box-shadow: 0 0 0 3px rgba(147, 174, 68, .24);
}
.rung__who em { font-style: normal; font-size: .79rem; font-weight: 700; color: rgba(255, 255, 255, .6); margin-inline-start: 5px; }
.rung__buy { display: grid; justify-items: center; gap: 9px; }
.rung__price { margin: 0; color: #fff; line-height: 1; white-space: nowrap; }
.rung__price b { font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 800; letter-spacing: -.02em; }
.rung__price span { font-size: 1.05rem; font-weight: 700; margin-inline-start: 3px; opacity: .85; }
.rung .btn-pill-w { padding: .62rem 1.5rem; font-size: .94rem; }
/* Tertiary on purpose; the hit area still reaches 44px. */
.other {
    display: inline-flex; align-items: center; gap: .5rem; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
    font-size: clamp(1.02rem, 2vw, 1.2rem); font-weight: 700; color: #fff; background: none; border: 0;
    padding: .6rem .4rem; min-height: 44px; cursor: pointer; font-family: inherit;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.other:hover { text-decoration-color: var(--coral); }

/* ============ faq ============
   Built on <details>: keyboard focus, Space/Enter, screen-reader
   announcement, all without a line of ARIA. Darker than any other
   section on purpose: here we answer, not sell. */
.qa-sec { background: var(--olive-black); padding-block: clamp(2.6rem, 6vw, 4.2rem); }
.qa {
    width: min(880px, 92vw); margin-inline: auto; background: #12160A; border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius); padding: clamp(1.5rem, 3.4vw, 2.4rem); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .8);
}
.qa__head { margin: 0 0 .4rem; text-align: center; font-size: clamp(1.25rem, 2.9vw, 1.75rem); font-weight: 800; color: var(--sand); }
.qa__sub { margin: 0 0 1.5rem; text-align: center; font-size: clamp(.9rem, 1.7vw, 1rem); color: rgba(255, 255, 255, .66); }
.qa details { border-block-start: 1px solid rgba(255, 255, 255, .11); }
.qa details:first-of-type { border-block-start: 0; }
.qa summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .95rem .2rem; font-size: clamp(1rem, 1.9vw, 1.1rem); font-weight: 700; color: #fff; text-align: start;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
    content: ""; flex: 0 0 auto; width: .62rem; height: .62rem;
    border-inline-end: 2px solid var(--olive-lite); border-block-end: 2px solid var(--olive-lite);
    transform: rotate(45deg); transform-origin: center; transition: transform .2s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { color: var(--olive-lite); }
.qa summary:focus-visible { outline: 3px solid var(--olive-lite); outline-offset: 3px; border-radius: 8px; }
.qa .qa__a { margin: 0; padding: 0 .2rem 1.1rem; font-size: clamp(.94rem, 1.7vw, 1.02rem); line-height: 1.85; color: rgba(255, 255, 255, .88); text-align: center; }
.qa .qa__a b { color: #fff; }
.qa__foot {
    margin: 1.4rem 0 0; padding-block-start: 1.2rem; border-block-start: 1px solid rgba(255, 255, 255, .11);
    text-align: center; font-weight: 800; color: var(--sand); font-size: clamp(.96rem, 1.8vw, 1.08rem);
}

/* ============ about ============ */
.about { background: #fff; text-align: center; }
.about .l1 { margin-block-start: 1.5rem; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; }
.about .l2 { font-size: clamp(1.8rem, 4.6vw, 3rem); font-weight: 800; margin-block-start: .1rem; }
.about .body { margin-block-start: clamp(1.8rem, 4vw, 2.6rem); }
.about .body p { font-size: clamp(1rem, 1.8vw, 1.1rem); line-height: 1.75; color: #333; }
.about .body p + p { margin-block-start: 1.6rem; }
.about .body .bold { font-weight: 800; color: var(--ink); }

/* ============ footer ============
   Two bands: olive body with picture and text, then a dark bar with the
   rights line, legal links and a button. The sticky CTA hides itself when
   the footer is in view (sticky-cta.js), so the two never show together. */
.foot { background: var(--olive); color: #fff; }
.foot__in { width: min(1000px, 92vw); margin-inline: auto; padding-block: clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.foot__pic { width: min(320px, 72vw); margin: 0 auto clamp(1.4rem, 3vw, 2rem); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .65); }
.foot__pic img { width: 100%; height: auto; display: block; }
.foot__text { margin: 0; max-width: 78ch; margin-inline: auto; font-size: clamp(.9rem, 1.7vw, 1rem); line-height: 1.95; color: rgba(255, 255, 255, .9); }
.foot__bar { background: var(--olive-black); }
.foot__row {
    width: min(1000px, 92vw); margin-inline: auto; padding-block: 1.1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.4rem; flex-wrap: wrap;
}
.foot__legal { margin: 0; flex: 1 1 20rem; text-align: start; font-size: .78rem; line-height: 1.8; color: rgba(255, 255, 255, .72); }
.foot__legal a { color: rgba(255, 255, 255, .92); text-underline-offset: 3px; }
.foot__legal a:hover { color: var(--olive-lite); }
.foot__cta {
    flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: .55rem;
    background: var(--cta-on-dark); color: var(--olive-black);
    font-family: var(--font); font-size: .98rem; font-weight: 800;
    padding: .72rem 1.6rem; border: 2px solid #fff; border-radius: 999px; cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
    transition: background-color .2s ease, transform .16s ease;
}
.foot__cta:hover { background: var(--cta-on-dark-h); transform: translateY(-2px); }
.foot__cta svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

/* ============ sticky CTA ============
   Hidden by default; sticky-cta.js shows it only while no donate button is
   on screen, so it is never doubled and never just in the way. */
.sticky {
    position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 70;
    opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sticky.is-on { opacity: 1; visibility: visible; transform: none; }
.sticky .btn {
    font-size: 1.06rem; font-weight: 800; padding: .92rem 1.9rem; pointer-events: auto;
    background: var(--crimson); border-color: #fff; color: #fff;
    box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
}
.sticky .btn:hover { background: var(--maroon); }
/* Smaller heart than the other buttons, as the old inline style had it. */
.sticky .btn svg { width: 17px; height: 17px; }

/* ============ responsive ============ */
@media (max-width: 980px) {
    .hero h1 { font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
    .hero__grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .hero__pic { order: 2; max-width: 440px; margin-inline: auto; }
    .hero__text { order: 1; }
}
@media (max-width: 760px) {
    .hero .wrap { width: min(1180px, 95vw); }
    .hero__pic { max-width: none; }
    .bar-in { padding-inline: 1rem; }
    .voice__grid { grid-template-columns: 1fr; justify-items: center; gap: 1.3rem; }
    /* Row resets too, or picture and quote share one cell. Picture stays first, above the text. */
    .voice__pic { grid-column: 1; grid-row: 1; }
    .voice__text { grid-column: 1; grid-row: 2; }
    .voice__q p, .voice__q cite { text-align: center; }
    .voice__q::before { inset-inline-start: auto; inset-inline-end: 0; opacity: .16; }
    .ladder { gap: 12px; }
    .rung { grid-template-columns: 66px 1fr; grid-template-areas: "face body" "buy buy"; gap: 14px; padding: 16px; }
    .rung__face { grid-area: face; width: 66px; border-radius: 13px; }
    .rung__num { font-size: 1.85rem; }
    .rung__body { grid-area: body; }
    .rung__buy {
        grid-area: buy; grid-template-columns: auto 1fr; align-items: center; justify-items: stretch; gap: 12px;
        margin-block-start: 4px; padding-block-start: 13px; border-block-start: 1px solid rgba(255, 255, 255, .14);
    }
    .rung__price { justify-self: start; }
    .rung .btn-pill-w { width: 100%; justify-content: center; }
    .rung__tag { inset-inline-start: 14px; font-size: .72rem; }
    /* A narrow pill in the centre, not a full-width bar, to cover as little screen as possible */
    .sticky { inset-inline: 0; inset-block-end: calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
    .sticky .btn { width: auto; padding: .75rem 1.45rem; font-size: 1rem; border-radius: 999px; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .55); }
}
@media (max-width: 640px) {
    .foot__row { justify-content: center; }
    .foot__legal { text-align: center; flex-basis: 100%; }
}
@media (max-width: 600px) {
    .lp { padding-block-end: 70px; }   /* room for the sticky CTA */
}
@media (max-width: 520px) {
    .bar { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .bar-fill, .rung, .sticky, .qa summary::after { transition: none; }
    .story__cta:hover, .voice__cta:hover, .foot__cta:hover { transform: none; }
}