/* CauseHub design system, "Receipts, by hand" (28 Sep 2026).
   GoFundMe shows the ask. CauseHub shows the receipt. So the pages have two voices:
   - the calm one: warm paper, very large heavy headlines, one pill button per idea, real photographs, colour fields
     with arched edges (sun yellow, forest green, sand);
   - the human hand: a pen that writes small notes in the margin, draws arrows to the proof, circles the steps and
     tapes receipts to the page.
   Two themes, each designed on purpose: Daylight (warm paper, charcoal ink) and Lamplight (warm charcoal night, lamp
   gold, photos dimmed a little so they do not blaze). Gold only where money moves. Green only where something is
   verified or has arrived. Pen blue only for the handwriting. Every text colour pair is checked by tests/contrast.php.
   No inline styles anywhere: the Content Security Policy stays strict. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url("/assets/fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url("/assets/fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The pen: Caveat (SIL Open Font License 1.1, The Caveat Project Authors), self-hosted, latin and latin-ext so Dutch
   and Romanian (ă, â, î, ș, ț) are written by the same hand. Only ever used for short notes, never for body text. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens: Daylight (warm paper, charcoal ink) ---------- */
:root {
  --paper: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F4EFE7;
  --surface-3: #EAE3D8;
  --glass: rgba(250, 247, 242, .84);
  --ink: #1F1C18;
  --ink-2: #48423A;
  --ink-3: #5F584F;
  --line: #E8E1D5;
  --line-strong: #D3C9B9;
  --line-input: #8A8174;
  --gold: #F0B03A;
  --gold-deep: #DE9A1E;
  --on-gold: #1F1C18;
  --gold-text: #7A4E00;
  --gold-soft: #FCEFD2;
  --gold-glow: rgba(240, 176, 58, .35);
  --green: #13693F;
  --green-fill: #1CB56F;
  --green-soft: #DCF2E4;
  --red: #B3261E;
  --red-soft: #FBE4E0;
  --pen: #2A4C9C;
  --focus: #1F5AE0;
  --focus-ring: rgba(31, 90, 224, .28);
  --table-edge: rgba(31, 28, 24, .16);
  --sun: #FBD56B;
  --sun-ink: #2B2100;
  --sun-ink-2: #45380F;
  --sun-line: rgba(43, 33, 0, .2);
  --forest: #173B2A;
  --forest-2: #20493A;
  --forest-ink: #F7F2E8;
  --forest-ink-2: #D9E4DA;
  --forest-ink-3: #B8CABC;
  --forest-line: rgba(247, 242, 232, .18);
  --forest-pen: #FBD56B;
  --forest-green: #A6E6C2;
  --sun-glow: none;
  --ticket-shadow: rgba(60, 42, 12, .16);
  --sand: #F2EBE0;
  --sand-2: #E6DDCF;
  --eyebrow: #FBE39F;
  --eyebrow-ink: #3D2D00;
  --polaroid: #FFFFFF;
  --polaroid-ink: #48423A;
  --tape: rgba(226, 210, 172, .86);
  --photo-filter: none;
  --shadow: 0 1px 2px rgba(60, 42, 12, .06), 0 18px 40px -22px rgba(60, 42, 12, .32);
  --shadow-float: 0 -1px 0 rgba(60, 42, 12, .05), 0 -12px 32px -16px rgba(60, 42, 12, .26);
  --shadow-photo: 0 2px 4px rgba(60, 42, 12, .08), 0 22px 36px -18px rgba(60, 42, 12, .38);
  --r-ctl: 12px;
  --r-panel: 22px;
  --r-photo: 28px;
  --arch: clamp(26px, 7vw, 104px);
  --arch-sm: clamp(18px, 4.5vw, 60px);
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;
  --fs-display: clamp(3rem, 4.6vw + 1.2rem, 5.25rem);
  --fs-section: clamp(2.25rem, 2.8vw + 1.3rem, 3.6rem);
  --fs-h1: clamp(2.5rem, 3.4vw + 1.15rem, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.5vw + 1.25rem, 2.6rem);
  --fs-h3: clamp(1.2rem, .35vw + 1.1rem, 1.4rem);
  --wrap: 1200px;
  --head-h: 68px;
  color-scheme: light;
}

/* ---------- Tokens: Lamplight (warm charcoal night, lamp gold). Two copies: the first for visitors without script
   (system dark mode), the second for the theme switch. tests/contrast.php checks that both copies stay identical. ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1B1A18; --surface: #262421; --surface-2: #302D29; --surface-3: #3A3631; --glass: rgba(27, 26, 24, .84);
    --ink: #E9E3D8; --ink-2: #C7BFB2; --ink-3: #A89F92; --line: #37332E; --line-strong: #4B463F; --line-input: #837B6F;
    --table-edge: rgba(0, 0, 0, .5);
    --gold: #F2BD51; --gold-deep: #E3A93E; --on-gold: #1B1A18; --gold-text: #F5C96C; --gold-soft: #3A2E16; --gold-glow: rgba(242, 189, 81, .26);
    --green: #74D4A2; --green-fill: #2CC27E; --green-soft: #173126; --red: #FF9C90; --red-soft: #3C1D18;
    --pen: #AFC4F5; --focus: #8AB4FF; --focus-ring: rgba(138, 180, 255, .3);
    --sun: #2E2616; --sun-ink: #F6D98E; --sun-ink-2: #E6D8BA; --sun-line: rgba(246, 217, 142, .2);
    --forest: #14271D; --forest-2: #1C3428; --forest-ink: #ECE6DA; --forest-ink-2: #CBD5CB; --forest-ink-3: #AFBEB2; --forest-line: rgba(236, 230, 218, .15); --forest-pen: #F6D98E; --forest-green: #8FDDB3;
    --sun-glow: radial-gradient(70% 90% at 50% 0%, rgba(242, 189, 81, .16), rgba(242, 189, 81, 0) 70%); --ticket-shadow: rgba(0, 0, 0, .5);
    --sand: #242220; --sand-2: #302D29; --eyebrow: #45371A; --eyebrow-ink: #F6D98E;
    --polaroid: #2C2A26; --polaroid-ink: #C7BFB2; --tape: rgba(160, 146, 112, .42); --photo-filter: brightness(.88) saturate(.94);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -20px rgba(0, 0, 0, .7);
    --shadow-float: 0 -1px 0 rgba(255, 255, 255, .04), 0 -12px 32px -16px rgba(0, 0, 0, .65);
    --shadow-photo: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 36px -18px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1B1A18; --surface: #262421; --surface-2: #302D29; --surface-3: #3A3631; --glass: rgba(27, 26, 24, .84);
  --ink: #E9E3D8; --ink-2: #C7BFB2; --ink-3: #A89F92; --line: #37332E; --line-strong: #4B463F; --line-input: #837B6F;
  --table-edge: rgba(0, 0, 0, .5);
  --gold: #F2BD51; --gold-deep: #E3A93E; --on-gold: #1B1A18; --gold-text: #F5C96C; --gold-soft: #3A2E16; --gold-glow: rgba(242, 189, 81, .26);
  --green: #74D4A2; --green-fill: #2CC27E; --green-soft: #173126; --red: #FF9C90; --red-soft: #3C1D18;
  --pen: #AFC4F5; --focus: #8AB4FF; --focus-ring: rgba(138, 180, 255, .3);
  --sun: #2E2616; --sun-ink: #F6D98E; --sun-ink-2: #E6D8BA; --sun-line: rgba(246, 217, 142, .2);
  --forest: #14271D; --forest-2: #1C3428; --forest-ink: #ECE6DA; --forest-ink-2: #CBD5CB; --forest-ink-3: #AFBEB2; --forest-line: rgba(236, 230, 218, .15); --forest-pen: #F6D98E; --forest-green: #8FDDB3;
    --sun-glow: radial-gradient(70% 90% at 50% 0%, rgba(242, 189, 81, .16), rgba(242, 189, 81, 0) 70%); --ticket-shadow: rgba(0, 0, 0, .5);
  --sand: #242220; --sand-2: #302D29; --eyebrow: #45371A; --eyebrow-ink: #F6D98E;
  --polaroid: #2C2A26; --polaroid-ink: #C7BFB2; --tape: rgba(160, 146, 112, .42); --photo-filter: brightness(.88) saturate(.94);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -20px rgba(0, 0, 0, .7);
  --shadow-float: 0 -1px 0 rgba(255, 255, 255, .04), 0 -12px 32px -16px rgba(0, 0, 0, .65);
  --shadow-photo: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 36px -18px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* The theme cross-fade at dusk and dawn (added by script for half a second, never for reduced motion). */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .55s ease, color .55s ease, border-color .55s ease, fill .55s ease, stroke .55s ease !important;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  font-feature-settings: "cv11", "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: anywhere;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; text-decoration-thickness: 1.5px; transition: text-decoration-color .15s; }
a:hover { text-decoration-color: var(--gold-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold-soft); color: var(--ink); }

/* ---------- Type: large and heavy for headlines (one idea per screen), calm for reading ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 740; line-height: 1.08; letter-spacing: -.024em; margin: 0 0 .5em; color: var(--ink); font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
h2 { font-size: var(--fs-h2); font-weight: 760; letter-spacing: -.032em; line-height: 1.05; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.016em; line-height: 1.22; }
h4 { font-size: 1.05rem; font-weight: 700; }
/* The GoFundMe-scale statements: hero headline and section headline, about three words per line on a phone. */
.display { font-size: var(--fs-display); font-weight: 800; line-height: .98; letter-spacing: -.045em; }
.h-section { font-size: var(--fs-section); font-weight: 800; line-height: 1; letter-spacing: -.042em; }
p { margin: 0 0 1em; }
small, .small { font-size: .875rem; }
b, strong { font-weight: 600; }
.muted { color: var(--ink-3); }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
@media (min-width: 900px) { .lead { font-size: 1.3rem; } }
.num, .tnum { font-variant-numeric: tabular-nums; }
.prose { max-width: 65ch; }
.prose h2 { margin-top: 1.7em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose ul { padding-left: 1.2em; }
.prose a { text-decoration-color: var(--gold-deep); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-tight { padding-block: clamp(32px, 4.5vw, 56px); }
.stack > * + * { margin-top: 1.1rem; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.grid-2 { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .wrap, .narrow { width: calc(100% - 32px); } }

/* ---------- Skip link, preview ribbon ---------- */
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-ctl); z-index: 100; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.ribbon { background: var(--gold-soft); color: var(--gold-text); font-size: .88rem; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ribbon .wrap { display: flex; gap: 8px; align-items: center; }
.ribbon svg { width: 16px; height: 16px; flex: none; }

/* ---------- Header: warm paper under glass ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-head { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 760 1.24rem/1 var(--font-head); letter-spacing: -.035em; }
.brand .mark { width: 30px; height: 30px; color: var(--ink); }
.mark-gold { stroke: var(--gold); }
.mark-gold-fill { fill: var(--gold); }
.nav { display: flex; gap: 2px; margin-left: 6px; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 9px 13px; border-radius: 999px; font-weight: 500; font-size: .96rem; position: relative; transition: color .15s, background-color .15s; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--gold); }
.nav .nav-signout { display: none; margin: 0; }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.head-actions .btn { min-height: 42px; padding: 0 18px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-input); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
.burger { display: grid; gap: 4px; width: 18px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; padding: 10px 16px 16px; margin: 0; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav a { padding: 13px 12px; font-size: 1.05rem; border-radius: 12px; }
  .nav a[aria-current="page"]::after { left: 0; width: 3px; right: auto; top: 12px; bottom: 12px; height: auto; }
  .menu-toggle { display: grid; }
  .head-actions .btn-quiet { display: none; }
  .head-actions form { display: none; }
  .nav .nav-signout { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .nav .nav-signout button { display: block; width: 100%; text-align: left; padding: 13px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: 500 1.05rem/1.4 var(--font-body); cursor: pointer; }
  .nav .nav-signout button:hover { color: var(--ink); background: var(--surface-2); }
}

/* ---------- Buttons: pills, one strong one per idea ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 700 1rem/1.1 var(--font-head); letter-spacing: -.01em; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; color: var(--ink);
  transition: background-color .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: var(--on-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -10px rgba(222, 154, 30, .9); }
.btn-primary:hover { background: var(--gold-deep); color: var(--on-gold); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-input); }
.btn-secondary:hover { border-color: var(--ink); background: var(--surface); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--paper); }
.btn-lg { min-height: 58px; padding: 0 32px; font-size: 1.1rem; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: .2em; }

/* ---------- Notices ---------- */
.flash-list { display: grid; gap: 10px; margin-top: 18px; }
.notice { border-radius: 14px; padding: 14px 18px; border: 1px solid var(--line); background: var(--surface); display: flex; gap: 12px; align-items: flex-start; }
.notice > svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.notice p { margin: 0; }
.notice p + p { margin-top: .5em; }
.notice-ok { background: var(--green-soft); border-color: transparent; }
.notice-ok > svg { color: var(--green); }
.notice-warn { background: var(--gold-soft); border-color: transparent; }
.notice-warn > svg { color: var(--gold-text); }
.notice-error { background: var(--red-soft); border-color: transparent; }
.notice-error > svg { color: var(--red); }
.notice-info > svg { color: var(--ink-2); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(44px, 7vw, 96px) clamp(40px, 6vw, 80px); overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -220px; right: -120px; width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--gold-glow), rgba(240, 176, 58, 0) 72%); opacity: .55; }
.hero .wrap { position: relative; display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero .wrap { grid-template-columns: 1.02fr .98fr; } }
.hero h1 { max-width: 12ch; margin-bottom: .45em; }
.hero .lead { margin-bottom: 1.7rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .95rem; }
.hero-facts li { display: flex; gap: 8px; align-items: center; }
.hero-facts svg { width: 18px; height: 18px; color: var(--green); flex: none; }

/* The Clear Path: the signature element. A gift arcs from You, over CauseHub, through Stripe, into the organiser. */
.path-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 22px 18px; box-shadow: var(--shadow); width: 100%; max-width: 560px; justify-self: end; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .path-card { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
}
.path-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.path-head h2 { font-size: 1.15rem; margin: 0; letter-spacing: -.015em; }
.path-head span { font-size: .84rem; color: var(--ink-3); }
.path-controls { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 6px; }
@media (min-width: 480px) { .path-controls { grid-template-columns: auto 1fr; align-items: center; } }
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border-radius: 999px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-grid; place-items: center; min-width: 52px; min-height: 36px; padding: 0 12px; border-radius: 999px; font: 600 .95rem/1 var(--font-head); color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(60, 42, 12, .2); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.path-method select { min-height: 42px; padding: 8px 36px 8px 14px; border-radius: 999px; font-size: .95rem; background-color: var(--surface-2); border-color: transparent; }
.path-stage { position: relative; margin: 6px 0 4px; }
.path-svg { width: 100%; height: auto; overflow: visible; }
.path-line { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.path-line-solid { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.path-node { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.path-node-you { fill: var(--ink); }
.path-node-hub { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 5; }
.path-node-org { stroke: var(--green); }
.path-node-org-check { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.path-lock { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pulse { fill: var(--gold); }
.pulse-glow { fill: var(--gold); opacity: .28; }
.path-label-top { margin: 0 0 -6px; text-align: center; font-size: .82rem; line-height: 1.3; color: var(--ink-3); }
.path-label-top b { display: block; color: var(--ink); font: 600 .95rem/1.2 var(--font-head); }
.path-labels { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 8px; margin: 2px 0 14px; font-size: .82rem; line-height: 1.3; color: var(--ink-3); }
.path-labels > div:nth-child(2) { text-align: center; }
.path-labels > div:nth-child(3) { text-align: right; }
.path-labels b { display: block; color: var(--ink); font: 600 1.05rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.path-labels .arrives b { color: var(--green); font-size: 1.2rem; }
.split { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.split rect { transition: width .65s cubic-bezier(.25, .8, .25, 1), x .65s cubic-bezier(.25, .8, .25, 1); }
.split rect.no-anim { transition: none; }
.split-cause { fill: var(--green-fill); }
.split-fee { fill: var(--line-strong); }
.split-covered { fill: var(--gold); }
.split-tip { fill: var(--gold); }
.split-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--ink-3); }
.split-key li { display: flex; gap: 6px; align-items: center; }
.split-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.split-key .k-cause i { background: var(--green-fill); }
.split-key .k-fee i { background: var(--line-strong); }
.split-key .k-covered i { background: var(--gold); }
.split-key .k-covered { color: var(--gold-text); }
.path-card.is-covered .path-labels .arrives b { text-shadow: 0 0 18px rgba(28, 181, 111, .35); }
#path-covered-note { color: var(--gold-text); font-weight: 600; }
.split-key .k-tip i { background: var(--gold); }
.path-cover { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.path-note { margin: 12px 0 0; font-size: .82rem; color: var(--ink-3); display: flex; gap: 8px; }
.path-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  .path-card { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- Home sections ---------- */
.band { border-block: 1px solid var(--line); background: var(--surface); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 32px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: .3em; }
.section-head p { margin: 0; color: var(--ink-3); max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500; background: var(--surface); transition: border-color .15s, color .15s, transform .15s; }
a.chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.chip[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* A real sequence, so numbered. */
.steps { counter-reset: step; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding: 20px 0 0 0; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step); position: absolute; top: -18px; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); display: grid; place-items: center; font: 600 1rem/1 var(--font-head); color: var(--ink); }
.steps h3 { margin: 16px 0 .35em; }
.steps p { color: var(--ink-2); margin: 0; }

/* Promises: a ruled ledger, not a card kit. */
.promises { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.promises li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
@media (min-width: 900px) { .promises { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; } .promises li:nth-child(2) { border-top: 0; } }
.promises .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.promises .ico svg { width: 22px; height: 22px; }
.promises h3 { font-size: 1.1rem; margin: 6px 0 4px; }
.promises p { margin: 0; color: var(--ink-2); font-size: .97rem; }

/* Creator feature: night panel in daylight, lantern panel at night. */
.feature { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: var(--r-panel); padding: clamp(28px, 5vw, 60px); display: grid; gap: 28px; grid-template-columns: 1fr; }
:root[data-theme="dark"] .feature { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } }
.feature::after { content: ""; position: absolute; right: -140px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, var(--gold-glow), rgba(240, 176, 58, 0) 72%); pointer-events: none; }
@media (min-width: 900px) { .feature { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.feature h2, .feature h3 { color: inherit; }
.feature p { color: inherit; opacity: .84; }
.feature .btn-secondary { color: inherit; border-color: currentColor; opacity: .9; }
.feature .btn-secondary:hover { opacity: 1; background: transparent; }
.feature ul { margin: 0; padding-left: 1.1em; position: relative; }
.feature li { margin-bottom: .5em; opacity: .9; }
.feature a:not(.btn) { color: inherit; text-decoration-color: var(--gold); }

.partners { border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 56px); }

/* ---------- Cause cards ---------- */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .25s; }
.card:hover, .card:focus-within { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 16 / 10; background: var(--surface-2); position: relative; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-media img { transform: scale(1.035); }
.card-media .placeholder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: var(--ink-3); background: var(--surface-2); }
.card-media .placeholder svg { width: 44px; height: 44px; opacity: .5; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: .84rem; color: var(--ink-3); }
.card h3 { font-size: 1.16rem; margin: 0; line-height: 1.25; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.card h3 a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card p { margin: 0; color: var(--ink-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { margin-top: auto; padding-top: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.tag svg { width: 14px; height: 14px; }
.tag-verified { background: var(--green-soft); color: var(--green); }
.tag-example { background: var(--gold-soft); color: var(--gold-text); }
.tag-tax { background: var(--surface-2); color: var(--ink); }
.tag-over { position: absolute; left: 12px; top: 12px; z-index: 1; }
.tag-link { text-decoration: none; color: var(--pen); background: var(--surface-2); }
.tag-link:hover { text-decoration: underline; }
.org-badges { margin: 0 0 18px; }
.org-about { max-width: 62ch; }
.org-stats { max-width: 62ch; margin-top: 8px; }
/* The organiser's own thank you, on the page right after a gift: their words, in the hand of the design system. */
.organiser-thanks { margin: 0 0 22px; padding: 22px 24px 20px; background: var(--surface); }
.organiser-thanks blockquote { margin: 0; font: 400 1.5rem/1.35 var(--font-hand); color: var(--ink); }
.organiser-thanks blockquote p { margin: 0 0 .35em; }
.organiser-thanks blockquote p:last-child { margin-bottom: 0; }
.organiser-thanks figcaption { margin-top: 12px; font-size: .88rem; color: var(--ink-3); }
.row.tags { gap: 6px; position: relative; z-index: 1; }
.card .row.tags a { position: relative; }

/* Native <progress>: no inline styles needed, so the strict CSP stays strict. Gold: money on its way. */
progress.progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; color: var(--gold); }
progress.progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress.progress::-webkit-progress-value { background: var(--gold); border-radius: 999px; transition: width .6s ease; }
progress.progress::-moz-progress-bar { background: var(--gold); border-radius: 999px; }
.amounts { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .9rem; color: var(--ink-3); margin-top: 10px; }
.amounts strong { color: var(--ink); font: 600 1.15rem/1 var(--font-head); font-variant-numeric: tabular-nums; }

/* ---------- Cause page ---------- */
.cause-top { padding-block: 28px 8px; }
.crumbs { font-size: .88rem; color: var(--ink-3); margin: 0 0 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--ink-3); text-decoration-color: transparent; }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--gold-deep); }
.crumbs svg { width: 14px; height: 14px; color: var(--line-strong); }
.cause-top h1 { font-size: clamp(2rem, 3.2vw + .8rem, 3.3rem); max-width: 22ch; margin-bottom: 14px; }
.cause-layout { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
@media (min-width: 1000px) { .cause-layout { grid-template-columns: minmax(0, 1fr) 380px; } }
.cause-hero-img { border-radius: var(--r-panel); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.cause-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.cause-hero-img { position: relative; }
/* AI label: the uploader marked this picture as AI generated. Sits above the card's stretched link so it can be tapped;
   the label opens on the same line, to the left of the button. */
.ai-badge { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(24, 20, 15, .5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: help; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ai-badge svg { width: 15px; height: 15px; fill: currentColor; opacity: .9; }
.ai-badge::after { content: attr(data-label); position: absolute; top: 50%; right: calc(100% + 6px); -webkit-transform: translateY(-50%); transform: translateY(-50%); white-space: nowrap; font: 600 .78rem/1 var(--font-body); color: #fff; background: rgba(24, 20, 15, .92); padding: 7px 10px; border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none; }
.ai-badge:hover::after, .ai-badge:focus::after { opacity: 1; visibility: visible; }
.ai-badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.card-media .ai-badge { top: 8px; right: 8px; width: 24px; height: 24px; }
.card-media .ai-badge svg { width: 13px; height: 13px; }
.organiser { display: flex; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 1.05rem var(--font-head); flex: none; }
.avatar svg { width: 20px; height: 20px; }
.organiser .who { flex: 1; min-width: 200px; }
.organiser .who b { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.organiser .who span { color: var(--ink-3); font-size: .9rem; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.story { font-size: 1.06rem; }
.story p { max-width: 66ch; }
.use-box { border-left: 3px solid var(--gold); background: var(--surface); padding: 18px 22px; border-radius: 0 16px 16px 0; margin: 30px 0; }
.use-box h3 { font-size: 1.05rem; margin-bottom: .4em; }
.use-box p:last-child { margin-bottom: 0; }
.aside-sticky { position: sticky; top: calc(var(--head-h) + 20px); }
.give-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 24px; box-shadow: var(--shadow); }
.give-box .raised { font: 620 2.4rem/1 var(--font-head); letter-spacing: -.035em; margin: 0; font-variant-numeric: tabular-nums; }
.give-box .of { color: var(--ink-3); margin: 6px 0 16px; }
.give-box .progress { height: 10px; }
.give-box .counts { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .9rem; margin: 10px 0 20px; font-variant-numeric: tabular-nums; }
.give-box .fine { font-size: .85rem; color: var(--ink-3); margin: 14px 0 0; display: flex; gap: 8px; }
.give-box .fine svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--green); }
.share-row { display: flex; gap: 8px; margin-top: 12px; }
.share-row .btn { flex: 1; min-height: 42px; padding: 0 12px; font-size: .92rem; }
.give-bar { display: none; }
@media (max-width: 999px) {
  .give-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-float); transform: translateY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .give-bar { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); } }
  .give-bar.is-hidden { transform: translateY(110%); }
  .give-bar .sum { flex: 1; min-width: 0; line-height: 1.2; }
  .give-bar .sum b { display: block; font: 620 1.25rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
  .give-bar .sum span { font-size: .8rem; color: var(--ink-3); }
  .give-bar .btn { min-height: 48px; padding: 0 22px; }
  .has-give-bar .cause-layout { padding-bottom: 120px; }
}

.video-facade { position: relative; border-radius: 16px; overflow: hidden; background: #16140F; aspect-ratio: 16 / 9; display: grid; place-items: center; margin: 26px 0; border: 1px solid var(--line); }
.video-facade button { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; color: #fff; cursor: pointer; font: 600 1rem var(--font-head); padding: 24px; }
.video-facade button svg { width: 56px; height: 56px; }
.video-facade small { color: #D8D0C2; font-weight: 400; font-family: var(--font-body); max-width: 38ch; text-align: center; }
.video-facade iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

.partner { margin: 36px 0; }
.partner-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px; }
.partner-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.partner-head b { display: block; font: 600 1.12rem/1.3 var(--font-head); }
.partner-head span { color: var(--ink-3); font-size: .9rem; }
.partner-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; flex: none; }
.partner-ico svg { width: 22px; height: 22px; }
.partner-photos { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.partner-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
@media (max-width: 560px) { .partner-photos { grid-template-columns: 1fr 1fr; } .partner-photos img:nth-child(3) { display: none; } }
.partner-links a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.partner-links a svg { width: 16px; height: 16px; }

/* Proof trail: a chain. Each entry links to the one before it, like the log it is written to. */
.proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proof-head .muted { margin: 0; max-width: 60ch; }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.timeline > li { position: relative; padding: 0 0 32px 44px; }
.timeline > li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 10px); }
.timeline > li:last-child::before { display: none; }
.timeline .node { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); border: 2px solid var(--line-strong); }
.timeline .node svg { width: 14px; height: 14px; stroke-width: 2.4; }
.timeline .k-receipt .node, .timeline .k-delivery .node { background: var(--green-fill); border-color: var(--green-fill); color: #fff; }
.timeline .k-followup .node { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.timeline .when { font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 1.1rem; margin: 3px 0 6px; }
.timeline p { max-width: 62ch; }
.timeline img { border-radius: 14px; border: 1px solid var(--line); margin-top: 12px; max-height: 460px; width: auto; }
.empty-proof { border: 1px dashed var(--line-strong); border-radius: 16px; padding: 18px 20px; color: var(--ink-3); }

/* Supporters are notes laid on a thread by hand: the amount is a small gold stamp, the message is in the pen font,
   and the badges say only things that are true of that gift (the first one, and a donor who paid the fee). */
.sup-note { margin: -6px 0 16px; font-size: 1.3rem; }
.supporters { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.supporters::before { content: ""; position: absolute; left: 25px; top: 30px; bottom: 30px; border-left: 2px dashed var(--line-strong); opacity: .7; }
.supporters li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 12px; }
.supporters li:nth-child(odd) { transform: rotate(-.35deg); }
.supporters li:nth-child(even) { transform: rotate(.28deg); }
/* The ring is drawn by the avatar itself, so the letter is always dead centre inside it. The uneven radii give it the
   drawn-by-hand wobble of the rest of the design without a second element that can fall out of line. */
.supporters .sup-avatar { position: relative; width: 42px; height: 42px; margin: 1px 0 0; font: 620 1rem/1 var(--font-head);
  background: var(--surface-2); color: var(--ink-2); border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--surface);
  border-radius: 49% 51% 52% 48% / 51% 49% 51% 49%; }
.supporters li:nth-child(even) .sup-avatar { border-radius: 52% 48% 49% 51% / 48% 52% 48% 52%; }
.supporters .sup-avatar svg { width: 18px; height: 18px; }
.sup-body { min-width: 0; }
.sup-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.sup-top b { font: 620 1.02rem/1.25 var(--font-head); letter-spacing: -.012em; }
.sup-amount { font: 620 .92rem/1 var(--font-head); color: var(--gold-text); background: var(--gold-soft); border-radius: 999px; padding: 5px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.supporters q { display: block; quotes: none; margin: 6px 0 0; font: 400 1.32rem/1.25 var(--font-hand); color: var(--ink); }
.sup-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.sup-tag { font: 600 .74rem/1 var(--font-body); letter-spacing: .01em; background: var(--surface-2); color: var(--ink-3); border-radius: 999px; padding: 5px 9px; }
.sup-tag-first { background: var(--gold-soft); color: var(--gold-text); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 20px 22px; margin: 0; background: var(--surface); min-width: 0; }
legend { font: 600 1.12rem var(--font-head); letter-spacing: -.015em; padding: 0 8px; margin-left: -8px; }
.field { display: grid; gap: 6px; }
.field + .field, fieldset > .field + .check, fieldset > .check + .field, fieldset > .grid-2 + .field, fieldset > .field + .grid-2, fieldset > .hint + .field { margin-top: 16px; }
label, .label { font-weight: 600; font-size: .95rem; }
.hint { color: var(--ink-3); font-size: .86rem; font-weight: 400; }
p.hint { margin: 0 0 12px; }
.err { color: var(--red); font-size: .88rem; font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink);
  font: 400 1rem/1.4 var(--font-body); transition: border-color .15s, box-shadow .15s; }
select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F584F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring); }
[aria-invalid="true"] { border-color: var(--red) !important; }
input[type="file"] { font: inherit; color: var(--ink-2); max-width: 100%; }
input[type="file"]::file-selector-button { font: 600 .92rem var(--font-head); padding: 8px 14px; margin-right: 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--ink); }
.check span { color: var(--ink-2); }
.check b { color: var(--ink); font-weight: 600; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; font: 600 1.02rem var(--font-head); background: var(--surface); transition: border-color .15s, box-shadow .15s, background-color .15s, transform .12s; }
.choice span small { font: 400 .8rem/1.35 var(--font-body); color: var(--ink-3); }
.choice span:hover { border-color: var(--ink); }
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:active + span { transform: scale(.98); }
.methods { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.inline-input { display: flex; align-items: center; gap: 8px; }
.inline-input input { max-width: 200px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Receipt strip: the live breakdown on the donate page and the real receipt afterwards. */
.summary, .receipt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; }
.summary dl, .receipt dl { display: grid; grid-template-columns: minmax(8.5em, 1fr) auto; gap: 10px 16px; margin: 0; }
.summary dt, .summary dd, .receipt dt, .receipt dd { overflow-wrap: normal; min-width: 0; }
.summary dt, .receipt dt { color: var(--ink-2); }
.summary dd, .receipt dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-head); font-weight: 500; }
.summary .total, .receipt .total { font-weight: 640; color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; font-size: 1.12rem; }
.summary .note, .receipt .note { font-size: .85rem; color: var(--ink-3); margin: 14px 0 0; }
.receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.receipt-head h2 { font-size: 1.15rem; margin: 0; }
.receipt-head .status { font-size: .8rem; }
.receipt .split { margin-top: 16px; }
.receipt-strip { position: relative; }
.receipt-strip::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 12px; background: radial-gradient(circle at 6px 0, transparent 5px, var(--surface) 5.5px) -6px 0 / 12px 12px repeat-x; opacity: 0; }
.donate-layout { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 60px; }
@media (min-width: 980px) { .donate-layout { grid-template-columns: minmax(0, 1fr) 380px; } .donate-aside { position: sticky; top: calc(var(--head-h) + 20px); } }
.donate-aside .receipt-strip { box-shadow: var(--shadow); }
.donate-aside .btn-block { margin-top: 16px; }

.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.auth-card h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* Thanks: the moment the gift arrives. One orchestrated motion. */
.arrival { display: grid; place-items: center; margin: 0 0 28px; }
.arrival svg { width: min(100%, 380px); height: auto; overflow: visible; }
.arrival .ring { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.arrival .ring-ok { fill: none; stroke: var(--green-fill); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 0; }
.arrival .tick { fill: none; stroke: var(--green-fill); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
.arrival .coin { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .arrival .ring-ok { stroke-dashoffset: 251; animation: draw 1s .9s cubic-bezier(.4, 0, .2, 1) forwards; }
  .arrival .tick { stroke-dashoffset: 60; animation: draw .5s 1.7s ease-out forwards; }
  .arrival .coin { animation: land 1.1s cubic-bezier(.3, .7, .2, 1) forwards; transform-origin: 40px 40px; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes land { from { transform: translate(-150px, 90px) scale(.6); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); -webkit-overflow-scrolling: touch;
  /* Scroll shadows: a soft edge appears on the side where the table continues, so a phone shows the table can be
     pulled sideways. The two solid layers scroll with the content (local) and cover the shadow at the ends. */
  background-image: linear-gradient(to right, var(--surface), var(--surface)), linear-gradient(to left, var(--surface), var(--surface)),
    linear-gradient(to right, var(--table-edge), transparent), linear-gradient(to left, var(--table-edge), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
/* Cells keep whole words together. The page-wide "break anywhere" rule would otherwise let every column shrink to one
   letter per line on a phone instead of letting .table-wrap scroll the table sideways. */
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
th { font: 600 .85rem/1.3 var(--font-head); letter-spacing: 0; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--paper); }
/* On a phone the table keeps a workable width and .table-wrap scrolls it sideways, instead of squeezing five columns
   into 390 px. Nothing changes on a wider screen, where the table is already narrower than its panel. */
@media (max-width: 760px) { .table-wrap table { min-width: 52rem; } }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status { display: inline-block; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.status-live, .status-succeeded, .status-clear, .status-actioned, .status-approved, .status-refunded, .status-dispute_won { background: var(--green-soft); color: var(--green); }
.status-in_review, .status-pending, .status-requested, .status-open, .status-potential_match, .status-refund_requested, .status-created, .status-paused { background: var(--gold-soft); color: var(--gold-text); }
.status-suspended, .status-removed, .status-rejected, .status-failed, .status-disputed, .status-dispute_lost, .status-confirmed_match, .status-expired { background: var(--red-soft); color: var(--red); }

/* ---------- Dashboard and owner desk ---------- */
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { font-size: clamp(2rem, 3vw + .5rem, 3rem); margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px; }
.panel h2 { margin-top: 0; font-size: 1.25rem; }
.panel h3 { font-size: 1.05rem; }
.panel > :last-child { margin-bottom: 0; }
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.kpi { padding: 18px 20px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: -1px; transition: background-color .15s; }
.kpi b { display: block; font: 620 1.9rem/1.1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--ink-3); font-size: .86rem; display: block; margin-top: 4px; }
a.kpi:hover { background: var(--paper); }
.kpi.alert b { color: var(--red); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li svg { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; padding: 3px; }
.checklist .ok svg { color: #fff; background: var(--green-fill); }
.checklist .todo svg { color: var(--gold-text); background: var(--gold-soft); }
.desk-nav { display: flex; gap: 2px; flex-wrap: wrap; margin: 4px 0 24px; border-bottom: 1px solid var(--line); }
.desk-nav a { padding: 10px 14px; text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.desk-nav a:hover { color: var(--ink); }
.desk-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font: 600 1.05rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .04em; background: var(--surface-2); border-radius: 14px; padding: 16px; }
.qr { background: #fff; padding: 12px; border-radius: 14px; width: 212px; border: 1px solid var(--line); }
.qr svg { width: 188px; height: 188px; }
pre.mail { white-space: pre-wrap; background: var(--surface-2); padding: 14px; border-radius: 12px; font-size: .88rem; max-height: 320px; overflow: auto; }
details.panel summary { cursor: pointer; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
details.panel summary::-webkit-details-marker { display: none; }
details.panel[open] summary { margin-bottom: 12px; }
.is-desk .site-head .brand span::after { content: "desk"; margin-left: 8px; font: 500 .72rem/1 var(--font-body); color: var(--ink-3); background: var(--surface-2); padding: 4px 8px; border-radius: 999px; vertical-align: middle; letter-spacing: 0; }

/* ---------- Explore ---------- */
.filters { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; margin-bottom: 20px; }
.filters .search { grid-column: 1 / -1; display: flex; gap: 10px; }
.filters .search input { min-height: 52px; font-size: 1.05rem; }
.filters .search .btn { flex: none; white-space: nowrap; }
.filters .toggles { grid-column: 1 / -1; display: flex; gap: 18px 24px; flex-wrap: wrap; padding-top: 4px; }
.results-count { color: var(--ink-3); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-ctl); border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); background: var(--surface); padding: 0 12px; }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager span[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.empty { padding: 40px 28px; border: 1px dashed var(--line-strong); border-radius: var(--r-panel); background: var(--surface); }
.empty h2, .empty h3 { margin-bottom: .3em; }
.empty > :last-child { margin-bottom: 0; }

/* ---------- Long documents: legal, trust, fees ---------- */
.doc { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 40px; }
.doc > *, .grid-2 > *, .cause-layout > *, .donate-layout > *, .foot-top > * { min-width: 0; }
@media (min-width: 1100px) { .doc { grid-template-columns: 240px minmax(0, 1fr); } .doc-rail { position: sticky; top: calc(var(--head-h) + 24px); } }
.doc-rail { display: none; }
.doc-rail.is-ready { display: block; }
@media (max-width: 1099px) { .doc-rail.is-ready { display: none; } }
.doc-rail h2 { font-size: .9rem; color: var(--ink-3); margin-bottom: 10px; letter-spacing: 0; font-weight: 500; font-family: var(--font-body); }
.doc-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.doc-rail a { display: block; padding: 6px 14px; color: var(--ink-3); text-decoration: none; font-size: .92rem; border-left: 2px solid transparent; margin-left: -1px; transition: color .15s, border-color .15s; }
.doc-rail a:hover { color: var(--ink); }
.doc-rail a.is-active { color: var(--ink); border-left-color: var(--gold); }
.doc-body h1 { font-size: clamp(2.1rem, 3.2vw + .6rem, 3.4rem); }
.doc-body .lead { margin-bottom: 1.6em; }
.doc-body table { font-size: .95rem; }

/* ---------- Footer: a sand field under an arch, signed by hand ---------- */
.site-foot { background: var(--sand); --surface-2: var(--sand-2); border-top-left-radius: 50% var(--arch-sm); border-top-right-radius: 50% var(--arch-sm);
  padding-block: clamp(64px, 8vw, 104px) 32px; margin-top: clamp(48px, 7vw, 96px); font-size: .95rem; }
.foot-top { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .foot-top { grid-template-columns: 1.1fr 2fr; gap: 64px; } }
.foot-brand .brand { margin-bottom: 16px; }
.foot-claim { font: 780 clamp(1.5rem, 1.2vw + 1.1rem, 2rem)/1.08 var(--font-head); letter-spacing: -.035em; margin: 0 0 14px; max-width: 16ch; text-wrap: balance; }
.foot-legal-line { color: var(--ink-3); margin: 0; max-width: 52ch; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.foot-grid h2 { font: 700 .95rem/1.3 var(--font-head); margin-bottom: 12px; letter-spacing: 0; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); }
.foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-strong); color: var(--ink-3); display: flex; gap: 20px 32px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.foot-made { margin: 0; max-width: 30ch; display: flex; gap: 10px; align-items: flex-start; font: 600 1.45rem/1.15 var(--font-hand); color: var(--pen); }
.foot-made .scribble { width: 30px; height: 27px; flex: none; margin-top: 2px; stroke-width: 2.4; color: var(--red); }
.theme-block { display: grid; gap: 8px; max-width: 420px; }
.theme-switch { display: inline-flex; gap: 3px; background: var(--surface-2); border-radius: 999px; padding: 4px; width: max-content; }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); border-radius: 999px; min-height: 36px; padding: 0 14px; font: 650 .88rem var(--font-head); cursor: pointer; transition: background-color .15s, color .15s; }
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.theme-note { margin: 0; font-size: .84rem; color: var(--ink-3); }

/* ---------- Error page ---------- */
.error-page { padding-block: clamp(64px, 10vw, 128px); }
.error-page .code { font: 620 clamp(5rem, 14vw, 9rem)/1 var(--font-head); letter-spacing: -.06em; color: var(--ink); margin: 0 0 8px; }
.error-page .code b { color: var(--gold); font-weight: inherit; }
.error-page h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

@media print {
  .site-head, .site-foot, .ribbon, .no-print, .give-bar, .doc-rail { display: none !important; }
  body { background: #fff; color: #000; }
  .receipt, .summary, .panel { border-color: #000; box-shadow: none; }
}

/* Browsers without aspect-ratio (older Android WebView, Samsung Internet) */
@supports not (aspect-ratio: 1 / 1) {
  .card-media { height: 200px; }
  .cause-hero-img { height: 340px; }
  .video-facade { height: 320px; }
}

/* ---------- Owner desk: partner leads ---------- */
.leads { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }
.leads-flat { border: 0; border-radius: 0; background: transparent; }
.leads .lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.leads-flat .lead { padding-inline: 0; }
.leads .lead:last-child { border-bottom: 0; }
.leads .lead h3 { margin: 0 0 2px; font-size: 1.06rem; }
.leads .lead h3 a { text-decoration: none; }
.leads .lead h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold-deep); }
.leads .lead .meta { margin: 0; color: var(--ink-3); font-size: .86rem; }
.leads .lead .why { margin: 4px 0 0; font-size: .93rem; color: var(--ink-2); }
.leads .lead .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .82rem; color: var(--ink-3); text-align: right; }
@media (max-width: 600px) { .lead { grid-template-columns: 1fr; } .lead .side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; } }
.due { color: var(--red); font-weight: 600; }
.status-to_contact { background: var(--gold-soft); color: var(--gold-text); }
.status-contacted, .status-held, .status-queued { background: var(--surface-2); color: var(--ink-2); }
.status-replied, .status-onboarding { background: var(--green-soft); color: var(--green); }
.status-parked, .status-declined { background: var(--surface-2); color: var(--ink-3); }
.compose textarea { min-height: 360px; line-height: 1.5; }
.mail-history { list-style: none; margin: 0; padding: 0; }
.mail-history li { border-top: 1px solid var(--line); padding: 10px 0; }
.mail-history li:first-child { border-top: 0; padding-top: 0; }
.mail-history summary { cursor: pointer; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mail-history pre.mail { margin-top: 10px; }

/* ---------- Language switcher: a small flag panel in the header ---------- */
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: 999px; cursor: pointer; font: 600 .9rem var(--font-head); color: var(--ink); background: transparent; -webkit-tap-highlight-color: transparent; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { border-color: var(--ink); }
.lang[open] summary { background: var(--surface-2); }
.flag { width: 20px; height: 13.3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(31, 28, 24, .16); flex: none; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 50; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.lang-menu a:hover { background: var(--surface-2); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--surface-2); }
@media (max-width: 900px) { .lang summary span { display: none; } .lang summary { min-width: 44px; justify-content: center; padding: 0 10px; } }

/* Desk: translation panels and their state pills. */
.tr-panel summary { cursor: pointer; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 6px 0; }
.tr-panel summary::-webkit-details-marker { display: none; }
.tr-panel[open] summary { margin-bottom: 10px; }
.tr-panel .hint { white-space: pre-line; }
.status-tr-current { background: var(--green-soft); color: var(--green); }
.status-tr-stale { background: var(--gold-soft); color: var(--gold-text); }
.status-tr-missing { background: var(--surface-2); color: var(--ink-3); }
.orig-note { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-ctl); padding: 10px 12px; margin: 0 0 18px; }
.orig-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* Small screens and enlarged phone text: the header must never wrap. Queries use em so they also react to the phone's
   font-size setting, not only to the screen width. */
.brand, .head-actions .btn { white-space: nowrap; }
.brand { flex-shrink: 0; }
@media (max-width: 30em) {
  .site-head .wrap { gap: 10px; }
  .head-actions { gap: 6px; }
  .head-actions .btn { padding: 0 12px; }
  .brand { gap: 8px; font-size: 1.08rem; }
  .brand .mark { width: 26px; height: 26px; }
  .lang summary { min-width: 40px; padding: 0 8px; }
  .menu-toggle { width: 42px; height: 42px; }
}
@media (max-width: 22.5em) {
  .site-head .wrap { gap: 8px; }
  .head-actions { gap: 5px; }
  .head-actions .btn { padding: 0 10px; font-size: .95rem; }
  .brand { gap: 6px; font-size: 1.02rem; }
  .brand .mark { width: 24px; height: 24px; }
  .lang summary { min-width: 38px; padding: 0 7px; }
  .menu-toggle { width: 40px; height: 40px; }
}
@media (max-width: 20.5em) {
  .brand > span { display: none; }
}

/* ---------- Main menu: four groups (27 Sep 2026) ----------
   Native <details> groups. Desktop: each group opens a panel under the header. Phone: the menu slides down and the
   groups open in place like an accordion. Each link has an icon and one line saying what it is. */
.nav-menu { align-items: center; }
.nav-group { position: relative; }
.nav-group > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: .96rem; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .15s, background-color .15s; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover, .nav-group[open] > summary { color: var(--ink); background: var(--surface-2); }
.nav-group > summary.is-here { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.nav-group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-caret { width: 14px; height: 14px; -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: transform .2s ease; opacity: .7; }
.nav-group[open] .nav-caret { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.nav-panel { position: absolute; top: calc(100% + 12px); left: -8px; z-index: 45; width: 380px; max-width: calc(100vw - 32px); padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.nav-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav .nav-links a { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 1rem; }
.nav .nav-links a:hover { background: var(--surface-2); }
.nav .nav-links a[aria-current="page"] { background: var(--gold-soft); }
.nav .nav-links a[aria-current="page"]::after { display: none; }
.nav-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.nav-ico svg { width: 19px; height: 19px; }
.nav .nav-links a:hover .nav-ico { background: var(--surface); }
.nav-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-txt b { font-weight: 600; font-size: .98rem; line-height: 1.25; }
.nav-txt small { color: var(--ink-3); font-size: .86rem; line-height: 1.4; }
.nav-sub { margin: 10px 10px 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .84rem; }
.nav-chips { list-style: none; margin: 0 6px 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nav .nav-chips a { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: .88rem; text-decoration: none; background: var(--surface); }
.nav .nav-chips a:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.nav .nav-chips a::after { display: none; }
@media (max-width: 900px) {
  .nav-menu { align-items: stretch; gap: 0; max-height: calc(100vh - var(--head-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-group { border-bottom: 1px solid var(--line); }
  .nav-group > summary { display: flex; justify-content: space-between; width: 100%; padding: 16px 12px; font: 600 1.15rem/1.2 var(--font-head); color: var(--ink); border-radius: 0; background: transparent; }
  .nav-group > summary:hover, .nav-group[open] > summary { background: transparent; }
  .nav-group > summary.is-here { box-shadow: inset 3px 0 0 var(--gold); }
  .nav-caret { width: 18px; height: 18px; }
  .nav-panel { position: static; width: auto; max-width: none; padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .nav .nav-links a { padding: 10px 8px; }
  .nav > a { padding: 16px 12px; font: 600 1.15rem/1.2 var(--font-head); color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* ---------- Pictures with the AI label ---------- */
.ai-frame { position: relative; display: inline-block; max-width: 100%; vertical-align: top; line-height: 0; }
.ai-frame img { display: block; }
.timeline .ai-frame { margin-top: 12px; }
.timeline .ai-frame img { margin-top: 0; }
.pic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pic-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pic-list img { width: 120px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.pic-list .ai-badge { top: 6px; right: 6px; width: 22px; height: 22px; }
.pic-list .ai-badge svg { width: 12px; height: 12px; }
.pic-list .ai-badge::after { display: none; }
.pic-name { font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pic-list li { grid-template-columns: 96px minmax(0, 1fr); } .pic-list img { width: 96px; height: 64px; } .pic-list form, .pic-list .tag { grid-column: 2; justify-self: start; } }

/* ---------- Live numbers: a statement, not a billboard ----------
   One large total, then every figure as a line with its source underneath. Gold only on money that moved, green only
   on checks that passed. */
.numbers-hero { padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 0% 0%, var(--gold-soft), rgba(0, 0, 0, 0) 60%); }
.numbers-live { display: flex; width: -webkit-fit-content; width: fit-content; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-fill); box-shadow: 0 0 0 0 rgba(28, 181, 111, .5); -webkit-animation: live-dot 2.2s ease-out infinite; animation: live-dot 2.2s ease-out infinite; }
@-webkit-keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(28, 181, 111, .5); } 80%, 100% { box-shadow: 0 0 0 10px rgba(28, 181, 111, 0); } }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(28, 181, 111, .5); } 80%, 100% { box-shadow: 0 0 0 10px rgba(28, 181, 111, 0); } }
.numbers-total { font-size: clamp(4.2rem, 13vw, 10rem); font-weight: 650; letter-spacing: -.055em; line-height: .9; margin: 0 0 .18em; font-variant-numeric: tabular-nums; display: table; background-image: linear-gradient(transparent 78%, var(--gold) 78%, var(--gold) 90%, transparent 90%); }
.numbers-hero .lead { font-size: clamp(1.15rem, 1vw + .9rem, 1.45rem); color: var(--ink); max-width: 44ch; }
.numbers-note { color: var(--ink-3); max-width: 60ch; margin: 14px 0 0; }
.numbers-body { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .numbers-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numbers-body .check-panel { grid-column: 1 / -1; } }
.statement { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 22px 8px; }
.statement h2, .check-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 0 0 8px; }
.statement h2 svg, .check-panel h2 svg { width: 22px; height: 22px; color: var(--ink-3); flex: 0 0 auto; }
.statement-rows { margin: 0; }
.statement-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; border-top: 1px dashed var(--line-strong); }
.statement-rows > div:first-child { border-top: 0; }
.statement-rows dt { font-weight: 600; color: var(--ink); align-self: baseline; }
.statement-rows dd { margin: 0; font: 640 1.55rem/1.1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; align-self: baseline; }
.statement-rows dd.money-moves { color: var(--gold-text); }
.statement-rows dd.is-verified { color: var(--green); }
.statement-rows dd.is-alert { color: var(--red); }
.statement-rows dd.src { grid-column: 1 / -1; font: 400 .88rem/1.5 var(--font-body); letter-spacing: 0; color: var(--ink-3); text-align: left; max-width: 62ch; }
.check-panel { background: var(--ink); color: var(--paper); border-radius: var(--r-panel); padding: clamp(22px, 4vw, 40px); }
.check-panel h2 { color: inherit; }
.check-panel h2 svg { color: var(--gold); }
.check-panel p { max-width: 70ch; opacity: .9; }
.check-panel .muted { color: inherit; opacity: .7; }
.check-panel a:not(.btn) { color: inherit; }
.check-panel .btn-secondary { color: var(--paper); border-color: rgba(255, 255, 255, .45); background: transparent; }
.check-panel .btn-quiet { color: var(--paper); }
/* In a forest tone the panel redefines --paper as the forest colour itself, so the two rules above would paint the
   button text in the panel's own background. Inside that tone the buttons take the forest ink instead. */
.tone-forest .btn-secondary { color: var(--forest-ink); border-color: var(--forest-line); background: transparent; }
.tone-forest .btn-secondary:hover { color: var(--forest-ink); border-color: var(--forest-ink); background: var(--forest-2); }
.tone-forest .btn-quiet { color: var(--forest-ink-2); }
.tone-forest .btn-quiet:hover { color: var(--forest-ink); background: var(--forest-2); }
.hash { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.hash code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86rem; overflow-wrap: anywhere; color: var(--gold); }
:root[data-theme="dark"] .check-panel { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="dark"] .check-panel .btn-secondary, :root[data-theme="dark"] .check-panel .btn-quiet { color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .hash { background: var(--surface); border-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .check-panel { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
  :root:not([data-theme="light"]) .check-panel .btn-secondary, :root:not([data-theme="light"]) .check-panel .btn-quiet { color: var(--ink); border-color: var(--line-strong); }
  :root:not([data-theme="light"]) .hash { background: var(--surface); border-color: var(--line); }
}

/* ---------- Proof wall ---------- */
.proof-wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.proof-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.proof-img { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); }
.proof-img img { width: 100%; height: 100%; object-fit: cover; }
.proof-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.proof-body h2 { font-size: 1.2rem; margin: 0; }
.proof-kind { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .85rem; font-weight: 600; color: var(--green); }
.proof-kind svg { width: 16px; height: 16px; }
.proof-kind b { margin-left: auto; color: var(--gold-text); font: 640 1rem/1 var(--font-head); }
.k-followup .proof-kind { color: var(--ink-2); }
.proof-excerpt { margin: 0; color: var(--ink-2); font-size: .95rem; }
.proof-meta { margin: auto 0 0; padding-top: 10px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-3); border-top: 1px solid var(--line); }
.proof-meta a { color: var(--ink); font-weight: 600; }
.due-list { margin-top: 40px; }
.due-list h2 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; }
.due-list h2 svg { width: 22px; height: 22px; color: var(--ink-3); }
.due-list ul { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }
.due-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.due-list li:last-child { border-bottom: 0; }
.due-list li a { font-weight: 600; color: var(--ink); }
.due-list li span { grid-column: 1; color: var(--ink-3); font-size: .88rem; }
.due-list li b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; font-size: .9rem; color: var(--ink-2); text-align: right; }
.due-list li.is-late b { color: var(--red); }
@media (max-width: 560px) { .due-list li { grid-template-columns: 1fr; } .due-list li b { grid-column: 1; grid-row: auto; text-align: left; } }

/* ---------- Questions and answers ---------- */
.faq { border-top: 1px solid var(--line); margin-bottom: 1.5em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; font-weight: 600; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font: 400 1.5rem/1 var(--font-head); color: var(--ink-3); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq details p { margin: 0 0 18px; color: var(--ink-2); }
.prose .steps { padding-left: 0; margin: 28px 0 8px; }
.prose .steps li { margin-bottom: 0; }

/* Thank-you page: the arrival glyph, a three-step "what happens next", and the confetti canvas. */
.thanks .thanks-hero { text-align: center; }
.thanks .thanks-hero .arrival { margin-bottom: 18px; }
.thanks .thanks-hero .lead { margin-inline: auto; }
.thanks .kicker { margin: 0 0 8px; font: 600 .82rem/1.2 var(--font-head); letter-spacing: .02em; color: var(--green); }
.thanks h1 { margin: 0 0 12px; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.025em; }
.thanks .thanks-line { margin: 22px auto 0; max-width: 34ch; font: 500 1.15rem/1.5 var(--font-head); color: var(--ink); text-wrap: balance; }
.next-steps { list-style: none; margin: 36px 0 0; padding: 22px 22px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); position: relative; }
.next-steps > h2 { margin: 0 0 18px; font-size: 1.05rem; }
.next-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; position: relative; }
.next-steps li + li::before { content: ""; position: absolute; left: 10px; top: -14px; width: 2px; height: 14px; background: var(--line-strong); }
.next-steps .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; }
.next-steps .dot svg { width: 13px; height: 13px; color: var(--green); }
.next-steps li.done .dot { border-color: var(--green-fill); background: var(--green-soft); }
.next-steps li > div > b { display: block; font: 600 .95rem/1.3 var(--font-head); margin-bottom: 3px; }
.next-steps p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.next-steps p b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.thanks-actions { margin-top: 22px; justify-content: center; }
.thanks-twice { margin-top: 32px; padding: 22px; border-radius: var(--r-panel); background: var(--gold-soft); border: 1px solid transparent; }
.thanks-twice h2 { margin: 0 0 6px; font-size: 1.12rem; }
.thanks-twice p { margin: 0 0 14px; color: var(--ink-2); }
.thanks-twice .row { margin: 0; }
.thanks .notice { margin-top: 22px; }
.thanks .ref { margin-top: 18px; text-align: center; }
.confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
@media (prefers-reduced-motion: no-preference) {
  .thanks .thanks-hero > :not(.arrival) { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .thanks .thanks-hero .kicker { animation-delay: .2s; }
  .thanks .thanks-hero h1 { animation-delay: .35s; }
  .thanks .thanks-hero .lead { animation-delay: .5s; }
  .thanks .thanks-hero .thanks-line { animation-delay: 1.9s; }
  .thanks .next-steps, .thanks .thanks-actions { animation: rise .7s 1.1s cubic-bezier(.2, .7, .2, 1) both; }
}
.proof-report { margin: 8px 0 0; font-size: .82rem; } .proof-report a { color: var(--ink-3); }

/* ==========================================================================================================
   Receipts, by hand: the shared parts (28 Sep 2026). Every page is built from these.
   ========================================================================================================== */

/* Pictures of real places and people are dimmed a little at night so they do not blaze on a dark page. */
.card-media img, .cause-hero-img img, .proof-img img, .partner-photos img, .timeline img, .ph { filter: var(--photo-filter); }
:root[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A89F92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A89F92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], select, textarea { border-color: var(--line-input); }

/* Eyebrow: the small highlighted label above a headline. Only ever a true, checkable claim. */
.eyebrow { display: block; width: -webkit-fit-content; width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 6px 11px 5px; border-radius: 7px;
  background: var(--eyebrow); color: var(--eyebrow-ink); font: 700 .86rem/1.25 var(--font-head); letter-spacing: .005em; }
.eyebrow-green { background: var(--green-soft); color: var(--green); }

/* Colour fields. Each one redefines the ink tokens, so every part placed inside stays readable without extra rules.
   On the sun field the strong button is .btn-ink (a gold button would vanish into the yellow). */
.tone { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.tone-sand { background: var(--sand); --surface-2: var(--sand-2); }
.tone-sun { background-color: var(--sun); background-image: var(--sun-glow); color: var(--sun-ink);
  --paper: var(--sun); --ink: var(--sun-ink); --ink-2: var(--sun-ink-2); --ink-3: var(--sun-ink-2); --line: var(--sun-line); --line-strong: var(--sun-line);
  --line-input: var(--sun-ink-2); --eyebrow: var(--sun-ink); --eyebrow-ink: var(--sun); --pen: var(--sun-ink); --gold-text: var(--sun-ink); }
.tone-forest { background: var(--forest); color: var(--forest-ink);
  --paper: var(--forest); --surface: var(--forest-2); --surface-2: var(--forest-2); --ink: var(--forest-ink); --ink-2: var(--forest-ink-2); --ink-3: var(--forest-ink-3);
  --line: var(--forest-line); --line-strong: var(--forest-line); --line-input: var(--forest-ink-3); --eyebrow: var(--forest-pen); --eyebrow-ink: var(--forest);
  --pen: var(--forest-pen); --green: var(--forest-green); --green-soft: var(--forest-2); --gold-text: var(--forest-pen); --gold-soft: var(--forest-2);
  --surface-3: var(--forest-2); --focus: var(--forest-pen); --focus-ring: var(--forest-line); --shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); }
/* Arched edges: the top or bottom of a field is one wide, shallow curve. */
.arch-top { border-top-left-radius: 50% var(--arch); border-top-right-radius: 50% var(--arch); }
.arch-bottom { border-bottom-left-radius: 50% var(--arch); border-bottom-right-radius: 50% var(--arch); }
.tone.arch-top { padding-top: calc(clamp(64px, 9vw, 128px) + var(--arch) * .4); }
.tone.arch-bottom { padding-bottom: calc(clamp(64px, 9vw, 128px) + var(--arch) * .4); }

/* The pen: short handwritten notes in the margin, arrows that point at the proof, a sketched underline. */
.hand { font-family: var(--font-hand); font-weight: 600; letter-spacing: 0; color: var(--pen); }
.hand-label { display: block; margin: 0 0 8px; font: 600 1.6rem/1 var(--font-hand); color: var(--pen); }
.hand-note { display: flex; align-items: flex-end; gap: 8px; margin: 0; font: 600 1.5rem/1.1 var(--font-hand); color: var(--pen); }
.hand-note .scribble { flex: none; width: 70px; height: auto; }
.hand-note-left { flex-direction: row-reverse; justify-content: flex-end; }
.hand-note.center { justify-content: center; }
.hand-note .scribble-arrow-down { width: 30px; }
.scribble { overflow: visible; stroke-width: 2.4; }
.scribble-arrow-down { width: 34px; }
.underlined { position: relative; display: inline-block; white-space: nowrap; }
.underlined .scribble-underline { position: absolute; left: -3%; bottom: -.16em; width: 106%; height: .3em; color: var(--gold); stroke-width: 3.5; }

/* The spine: a drawn line through circled steps ("stop 1, 2, 3"), text on one side and the picture of that step on
   the other, alternating on wide screens. Markup: .spine > svg.spine-line + ol.stops > li.stop > .stop-mark, .stop-text, .stop-art */
.spine { position: relative; }
.spine-line { position: absolute; top: 30px; bottom: 30px; left: 21px; width: 12px; height: calc(100% - 60px); color: var(--line-input); stroke-width: 2.5; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 112px); position: relative; }
.stop { position: relative; padding-left: 72px; display: grid; gap: 26px; align-items: center; }
.stop-mark { position: absolute; left: 0; top: -6px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font: 700 1.9rem/1 var(--font-hand); color: var(--pen); }
.stop-mark .scribble { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke-width: 2.2; }
.stop-text h3 { font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.1rem); font-weight: 780; letter-spacing: -.03em; line-height: 1.08; margin-bottom: .4em; }
.stop-text p { color: var(--ink-2); max-width: 46ch; }
.stop-art { min-width: 0; }
@media (min-width: 900px) {
  .spine-line { left: 50%; margin-left: -6px; }
  .stop { padding-left: 0; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
  .stop-mark { position: relative; top: auto; grid-column: 2; grid-row: 1; justify-self: center; width: 64px; height: 64px; font-size: 2.2rem; }
  .stop-text { grid-column: 1; grid-row: 1; }
  .stop-art { grid-column: 3; grid-row: 1; }
  .stop:nth-child(even) .stop-text { grid-column: 3; }
  .stop:nth-child(even) .stop-art { grid-column: 1; }
}

/* Taped photo: a real picture on white card, slightly turned, held by a strip of tape, captioned by hand. */
.taped { position: relative; margin: 20px 0 0; padding: 10px 10px 12px; background: var(--polaroid); border-radius: 3px; box-shadow: var(--shadow-photo);
  -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
.taped::before { content: ""; position: absolute; z-index: 1; top: -14px; left: 50%; width: 104px; height: 28px; margin-left: -52px; background: var(--tape);
  -webkit-transform: rotate(-3.5deg); transform: rotate(-3.5deg); -webkit-clip-path: polygon(2% 12%, 7% 0, 93% 8%, 100% 0, 98% 88%, 91% 100%, 9% 92%, 0 100%); clip-path: polygon(2% 12%, 7% 0, 93% 8%, 100% 0, 98% 88%, 91% 100%, 9% 92%, 0 100%); }
.taped img { display: block; width: 100%; height: auto; border-radius: 2px; filter: var(--photo-filter); }
.taped figcaption { margin: 10px 4px 0; font: 600 1.4rem/1.15 var(--font-hand); color: var(--polaroid-ink); }
.taped.tilt-r { -webkit-transform: rotate(1.8deg); transform: rotate(1.8deg); }
.taped.tilt-r::before { -webkit-transform: rotate(2.5deg); transform: rotate(2.5deg); }
@media (prefers-reduced-motion: no-preference) {
  .taped { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  a:hover > .taped, a:focus-visible > .taped { -webkit-transform: rotate(0) scale(1.012); transform: rotate(0) scale(1.012); }
}

/* Ticket: a receipt with a torn zigzag edge. The shadow follows the teeth (drop-shadow, not box-shadow). */
.ticket { position: relative; background: var(--surface); border-radius: 18px 18px 0 0; padding: 20px 22px 16px; margin-bottom: 12px;
  -webkit-filter: drop-shadow(0 14px 16px var(--ticket-shadow)); filter: drop-shadow(0 14px 16px var(--ticket-shadow)); }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: var(--surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0h16L8 10z'/%3E%3C/svg%3E") 0 0 / 16px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0h16L8 10z'/%3E%3C/svg%3E") 0 0 / 16px 10px repeat-x; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ticket-head b { font: 750 1.05rem/1.2 var(--font-head); letter-spacing: -.01em; }
.ticket dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.ticket dt { color: var(--ink-2); }
.ticket dd { margin: 0; text-align: right; font: 600 1rem/1.4 var(--font-head); font-variant-numeric: tabular-nums; }
.ticket .perf { border: 0; border-top: 2px dashed var(--line-strong); margin: 14px -22px; }
.ticket .total { font: 780 1.12rem/1.3 var(--font-head); color: var(--ink); }
.ticket-foot { margin: 12px 0 0; font-size: .86rem; color: var(--ink-3); }

/* Chips: small live status, like "receipt posted". */
.chip-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font: 650 .84rem/1.2 var(--font-head); color: var(--ink-2); white-space: nowrap; }
.chip-live .pulse-dot { width: 8px; height: 8px; }
.chip-live svg { width: 15px; height: 15px; flex: none; }
.chip-ok { background: var(--green-soft); border-color: transparent; color: var(--green); }
.chip-gold { background: var(--gold-soft); border-color: transparent; color: var(--gold-text); }

/* Gentle entrance for blocks marked data-reveal. app.js arms it only when it can also undo it (script loaded,
   IntersectionObserver present, motion allowed), so without script nothing is ever hidden. */
.can-animate [data-reveal]:not(.is-in) { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); }
.can-animate [data-reveal] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.can-animate .scribble.is-armed path { transition: stroke-dashoffset 1s cubic-bezier(.6, .1, .3, 1); }
.can-animate .scribble.is-armed path + path { transition-duration: .35s; transition-delay: .8s; }
.can-animate .scribble.is-drawn path { stroke-dashoffset: 0; }
.can-animate .scribble-underline { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.6, .1, .3, 1) .25s; }
.can-animate .scribble-underline:not(.is-drawn) { -webkit-transform: scaleX(0); transform: scaleX(0); }

/* ---------- Page 1: cause page and cause card (28 Sep 2026) ---------- */
.cause-top { padding-block: clamp(28px, 4vw, 48px) 12px; }
.cause-top .eyebrow { margin-bottom: 14px; }
.cause-top h1.cause-title { font-size: clamp(2.3rem, 3.4vw + 1rem, 4rem); max-width: 20ch; margin-bottom: 22px; }
.cause-hero-img { border: 0; border-radius: var(--r-photo); box-shadow: var(--shadow-photo); }
.organiser { padding: 22px 0; }
.cause-layout .lead { margin-top: 4px; }
.story { font-size: inherit; }
.story p { max-width: 65ch; color: var(--ink); }
.use-ticket { margin: 36px 0 44px; max-width: 640px; }
.use-ticket .ticket-head { margin-bottom: 10px; }
.use-ticket .ticket-head svg { width: 24px; height: 24px; color: var(--gold-text); flex: none; }
.use-ticket p { color: var(--ink-2); }
.use-ticket p:last-child { margin-bottom: 0; }
.partner { margin: 44px 0 52px; }
.partner-card.tone-sand { border: 0; padding: clamp(20px, 3vw, 30px); }
.partner-photos { gap: 18px; padding-top: 14px; margin-bottom: 22px; }
.partner-photos .taped { margin: 0; }
.partner-photos .taped img { aspect-ratio: 4 / 3; height: auto; border-radius: 2px; }
@media (max-width: 560px) { .partner-photos .taped:nth-child(3) { display: none; } }
.proof-head h2, .cause-layout section > h2 { font-size: clamp(1.9rem, 1.6vw + 1.3rem, 2.6rem); font-weight: 800; letter-spacing: -.035em; }
/* The proof trail on one side of a drawn line, at every width. */
.trail { margin-top: 26px; }
.spine-single .spine-line { left: 21px; margin-left: 0; }
.spine-single .stops { gap: 48px; }
.spine-single .stop { display: block; padding-left: 74px; }
.spine-single .stop-mark { position: absolute; left: 0; top: -8px; width: 54px; height: 54px; }
.stop-mark .ic { position: relative; width: 22px; height: 22px; stroke-width: 2; }
.trail .hand-label { font-size: 1.45rem; }
.trail h3 { font-size: clamp(1.3rem, .6vw + 1.1rem, 1.6rem); font-weight: 780; letter-spacing: -.025em; margin: 0 0 10px; }
.trail-amount { margin: 0 0 12px; }
.trail-body p { color: var(--ink-2); max-width: 60ch; }
.trail-photo { max-width: 440px; margin: 22px 0 8px 4px; }
.trail-photo .ai-frame { display: block; }
.trail-photo img { width: 100%; max-height: none; border: 0; margin: 0; }
.trail-empty-note { margin: 18px 0 4px; }
.empty-proof { background: var(--surface); }
.give-box.ticket { border: 0; box-shadow: none; border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 26px 24px 22px; }
.give-box .raised { font: 800 clamp(2.6rem, 2vw + 2rem, 3.2rem)/1 var(--font-head); letter-spacing: -.045em; }
.give-note { margin: 26px 0 0 18px; }
.give-note .scribble { width: 54px; }
/* Cause cards: a framed photo, the title, a thin bar and the money. The chip only when real receipts exist. */
.card { box-shadow: 0 1px 2px rgba(60, 42, 12, .05); }
.card-media { aspect-ratio: 3 / 2; margin: 10px 10px 0; border-radius: 16px; }
.card-body { padding: 16px 20px 20px; }
.card h3 { font-size: 1.24rem; font-weight: 760; letter-spacing: -.022em; line-height: 1.2; }
.card p { -webkit-line-clamp: 2; }
.card-proof { margin: 0 0 12px; }
.card .row.tags .tag { font-size: .76rem; }
.cause-layout > div > section { margin-top: 56px; }
.cause-layout > div > section.partner { margin-top: 44px; }
.proof-report { margin-top: 12px; }
.supporters { margin-bottom: 36px; }

/* ---------- Page 2: donate, thank-you, receipt (28 Sep 2026) ---------- */
.step-num { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 10px; vertical-align: middle; font: 700 1.45rem/1 var(--font-hand); color: var(--pen); }
.step-num .scribble { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke-width: 2.2; }
#donate-form legend { display: flex; align-items: center; font-size: 1.2rem; font-weight: 760; letter-spacing: -.02em; }
#donate-form fieldset { padding: 18px 22px 24px; }
.choice span { border-radius: 16px; font-weight: 700; }
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--gold-soft); }
.receipt.ticket, .summary.ticket { border: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.donate-aside .receipt-strip.ticket { box-shadow: none; }
.summary dl, .receipt dl { column-gap: 0; }
.summary dd, .receipt dd { padding-left: 16px; }
.donate-note { margin: 22px 0 14px 16px; }
.donate-note .scribble { width: 54px; }
.receipt-head h2 { font-weight: 780; letter-spacing: -.02em; }
/* Thank-you: the pen signs the thank-you line, the next steps are a receipt, sharing sits on a sun field. */
.thanks-hero .eyebrow { margin-inline: auto; }
.thanks h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4rem); font-weight: 800; letter-spacing: -.04em; }
.thanks .thanks-line { display: flex; gap: 10px; align-items: flex-end; justify-content: center; max-width: 30ch; font: 600 1.85rem/1.12 var(--font-hand); color: var(--pen); text-align: center; }
.thanks .thanks-line .scribble { width: 34px; height: 31px; flex: none; color: var(--red); margin-bottom: 4px; }
.next-steps.ticket { border: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.thanks-twice.tone-sun { border: 0; padding: clamp(22px, 4vw, 32px); }
.thanks-twice.tone-sun h2 { font-size: 1.5rem; font-weight: 800; }
.ticket::after { opacity: 1; bottom: auto; }
.receipt dl { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.receipt dd { overflow-wrap: anywhere; }
.donate-aside .receipt dl { grid-template-columns: minmax(8.5em, 1fr) auto; }

/* ---------- Page 3: proof wall, a scrapbook (28 Sep 2026) ---------- */
.proof-note { margin: -8px 0 26px; }
.proof-note .scribble { width: 30px; }
.proof-wall { gap: 36px 28px; align-items: start; }
.proof-item { background: none; border: 0; border-radius: 0; overflow: visible; }
.proof-item .taped { position: relative; z-index: 1; margin: 16px 14px -34px; }
.proof-item .taped .proof-img { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); }
.proof-item .taped .proof-img img { width: 100%; height: 100%; object-fit: cover; }
.proof-item .taped figcaption { font-size: 1.3rem; line-height: 1.1; }
.proof-body.ticket { border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 22px 22px 18px; }
.has-photo .proof-body.ticket { padding-top: 54px; }
.proof-body h2 { font-size: 1.3rem; font-weight: 780; letter-spacing: -.02em; }
.due-list h2 { font-size: clamp(1.6rem, 1vw + 1.3rem, 2.1rem); font-weight: 800; letter-spacing: -.03em; }

/* ==========================================================================================================
   Page 4: home (28 Sep 2026). Calm hero with a fan of real photos, the real recording, the proof story.
   ========================================================================================================== */
.home-hero { position: relative; padding-top: clamp(36px, 6vw, 84px); overflow: hidden; }
.home-hero::before { content: ""; position: absolute; top: -320px; left: 50%; width: 1000px; height: 760px; margin-left: -500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--gold-glow), rgba(240, 176, 58, 0) 72%); opacity: .5; }
.home-hero .wrap { position: relative; }
.home-hero .eyebrow { margin-bottom: 22px; }
.home-title { max-width: 12em; margin: 0 auto .38em; text-wrap: balance; }
@media (min-width: 720px) { .home-title > span { display: block; } }
/* The pen's gold swoosh under the second sentence: a hand-drawn brush stroke under every line it wraps to. */
.swoosh { padding-bottom: .05em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C58 6.5 170 3.5 297 8.2l-.6 5.2C182 10 78 12.2 5.5 17.6z' fill='%23F2B544'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 94%; background-size: 100% .26em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
  .swoosh { animation: swoosh-draw 1.1s .45s cubic-bezier(.6, .1, .3, 1) backwards; }
  @keyframes swoosh-draw { from { background-size: 0% .26em; } }
}
.home-hero .lead { margin: 0 auto; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px 26px; justify-content: center; align-items: center; margin-top: 32px; }
.hero-link { display: inline-flex; align-items: center; gap: 6px; font: 700 1.05rem/1.2 var(--font-head); color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.hero-link svg { width: 18px; height: 18px; transition: transform .2s; }
.hero-link:hover svg { -webkit-transform: translateX(3px); transform: translateX(3px); }

/* The fan: five real photos on one curve, the middle one straight. On phones the outer ones leave the screen. */
.arc-wrap { position: relative; overflow: hidden; margin-top: clamp(34px, 5vw, 64px); padding: 18px 0 clamp(20px, 3vw, 36px); }
.arc { list-style: none; margin: 0; padding: 0 0 12px; display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 1.4vw, 22px); }
.arc-item { --r: 0deg; --y: 0px; position: relative; flex: none; width: min(58vw, 250px); -webkit-transform: translateY(var(--y)) rotate(var(--r)); transform: translateY(var(--y)) rotate(var(--r));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.arc-item a { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-photo); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-photo); }
.arc-item img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.arc-item a:hover img, .arc-item a:focus-visible img { -webkit-transform: scale(1.045); transform: scale(1.045); }
.arc-item a:focus-visible { outline-offset: 4px; }
.pos-m1 { --r: -6deg; --y: 30px; } .pos-p1 { --r: 6deg; --y: 30px; }
.pos-m2 { --r: -12deg; --y: 96px; } .pos-p2 { --r: 12deg; --y: 96px; }
@media (min-width: 760px) {
  .arc-item { width: clamp(170px, 17vw, 240px); }
  .pos-m1 { --r: -8deg; --y: 22px; } .pos-p1 { --r: 8deg; --y: 22px; }
  .pos-m2 { --r: -16deg; --y: 82px; } .pos-p2 { --r: 16deg; --y: 82px; }
  .arc-item:hover { -webkit-transform: translateY(calc(var(--y) - 10px)) rotate(calc(var(--r) * .5)); transform: translateY(calc(var(--y) - 10px)) rotate(calc(var(--r) * .5)); }
}
@supports not (aspect-ratio: 1 / 1) { .arc-item a { height: 300px; } }
@media (prefers-reduced-motion: no-preference) {
  .arc-item { animation: arc-in 1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .pos-m1, .pos-p1 { animation-delay: .12s; }
  .pos-m2, .pos-p2 { animation-delay: .24s; }
  @keyframes arc-in { from { opacity: 0; -webkit-transform: translateY(calc(var(--y) + 80px)) rotate(0deg) scale(.94); transform: translateY(calc(var(--y) + 80px)) rotate(0deg) scale(.94); } }
}
.arc-note { justify-content: center; align-items: center; margin-top: 30px; padding-inline: 16px; }
.arc-note .scribble { width: 26px; -webkit-transform: scaleY(-1); transform: scaleY(-1); }

/* How giving works: the real recording in a phone, and the steps whose rings fill in time with it. */
.howto { margin-top: clamp(20px, 3vw, 40px); }
.howto-grid { display: grid; gap: clamp(28px, 4vw, 44px) clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) {
  .howto-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); grid-template-areas: "media head" "media steps"; align-content: center; }
  .howto-head { grid-area: head; align-self: end; }
  .howto-media { grid-area: media; }
  .howto-steps { grid-area: steps; align-self: start; }
}
.howto-head .lead { margin-bottom: 0; }
.howto-media { display: grid; justify-items: center; gap: 12px; }
.phone { position: relative; width: min(250px, 66vw); padding: 9px; border-radius: 44px; background: #1D1B18; box-shadow: var(--shadow-photo), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
@media (min-width: 900px) { .phone { width: 300px; padding: 10px; } }
.phone::before { content: ""; position: absolute; z-index: 1; top: 19px; left: 50%; width: 72px; height: 20px; margin-left: -36px; border-radius: 12px; background: #1D1B18; }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; border-radius: 35px; background: var(--paper); filter: var(--photo-filter); }
.howto-toggle { position: absolute; z-index: 2; right: 20px; bottom: 20px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #1F1C18; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); cursor: pointer; }
.howto-toggle svg { width: 18px; height: 18px; }
.howto-toggle .ic-play { fill: currentColor; stroke: none; }
.howto-toggle .ic-pause { stroke-width: 2.6; }
.howto-toggle .ic-pause, .howto.is-playing .howto-toggle .ic-play { display: none; }
.howto.is-playing .howto-toggle .ic-pause { display: block; }
.howto-note { margin: 4px 0 0; }
.howto-note .scribble { width: 50px; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); }
.howto-caption { margin: 0; max-width: 34ch; text-align: center; font-size: .86rem; color: var(--ink-3); }
.howto-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.howto-steps li { border-bottom: 1px solid var(--line-strong); }
.howto-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; width: 100%; padding: 20px 2px; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.howto-step { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.howto-step:focus-visible { outline-offset: 2px; }
.ring { position: relative; width: 46px; height: 46px; display: grid; place-items: center; font: 700 1.5rem/1 var(--font-hand); color: var(--pen); }
.ring svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.ring > span { position: relative; }
.ring-track { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2.5; }
.ring-fill { fill: none; stroke: var(--pen); stroke-width: 3; stroke-linecap: round; }
.howto-text b { display: block; margin: 8px 0 6px; font: 780 clamp(1.2rem, .5vw + 1.05rem, 1.45rem)/1.2 var(--font-head); letter-spacing: -.02em; }
.howto-text > span { display: block; color: var(--ink-2); }
.howto-step[aria-current="step"] .ring-track { stroke: var(--pen); stroke-opacity: .25; }

/* The proof story: four stops on a line that follows the reader down the page. */
.story-head { max-width: 800px; margin: 0 auto clamp(56px, 8vw, 104px); }
.story-head .lead { margin-inline: auto; }
.home-spine .stops { gap: clamp(80px, 11vw, 150px); }
.home-spine .spine-line { stroke-width: 3; }
.spine-track { fill: none; stroke: var(--line-strong); stroke-width: 2.5; }
.spine-ink { fill: none; stroke: var(--pen); stroke-width: 3; stroke-linecap: round; }
.home-spine .stop-art { display: grid; gap: 16px; justify-items: start; }
.home-spine .stop-art .hand-note { margin-left: 12px; }
.home-spine .stop-text .btn { margin-top: 6px; }
.home-spine .path-card { justify-self: stretch; max-width: 540px; margin: 0; }
.can-animate .home-spine .stop .stop-mark { transition: color .4s; }
.can-animate .home-spine .stop:not(.is-reached) .stop-mark { color: var(--line-input); }
/* Stop 2: where the gift goes, and where the optional tip goes. */
.flow-card { width: 100%; max-width: 520px; padding: 22px 20px 18px; }
.flow-row { display: grid; grid-template-columns: 70px 50px minmax(0, 1fr); gap: 6px; align-items: center; }
.flow-from { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 .86rem/1.2 var(--font-head); color: var(--ink); text-align: center; }
.flow-from svg { width: 26px; height: 26px; color: var(--gold-deep); }
.flow-arrow { width: 50px; height: auto; color: var(--green); stroke-width: 2.4; }
.is-tip .flow-arrow { color: var(--gold-deep); }
.is-tip .flow-arrow path:first-child { stroke-dasharray: 3 6; }
.flow-acct { border-radius: 16px; padding: 12px 14px; }
.flow-acct.is-org { background: var(--green-soft); }
.flow-acct.is-hub { border: 1.5px dashed var(--line-input); }
.flow-acct b { display: block; font: 760 1rem/1.25 var(--font-head); letter-spacing: -.01em; }
.flow-acct small { display: flex; gap: 6px; align-items: flex-start; margin: 5px 0 9px; color: var(--ink-2); font-size: .86rem; line-height: 1.35; }
.flow-acct small svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--green); }
.flow-acct .chip-live { white-space: normal; }
.flow-card .perf { margin: 16px -20px; }
/* Stop 3: the live ledger totals. */
.ledger-card { width: 100%; max-width: 460px; padding: 22px 22px 16px; }
.ledger-card .ticket-head a.chip-live { text-decoration: none; }
.ledger-card .ticket-head a.chip-live:hover { border-color: var(--line-input); color: var(--ink); }
.ledger-rows { margin: 4px 0 0; }
.ledger-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
.ledger-rows > div.perf-row { border-top: 2px dashed var(--line-strong); margin-top: 8px; padding-top: 18px; }
.ledger-rows dt { color: var(--ink-2); }
.ledger-rows dd { margin: 0; font: 780 1.3rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.ledger-rows dd.money-moves { color: var(--gold-text); font-size: 2rem; letter-spacing: -.03em; }
.ledger-rows dd.is-verified { display: inline-flex; gap: 6px; align-items: center; color: var(--green); font-size: 1.05rem; }
.ledger-rows dd.is-alert { color: var(--red); font-size: 1.05rem; }
.ledger-rows dd svg { width: 18px; height: 18px; stroke-width: 2.4; }
.hand-link { text-decoration: none; }
.hand-link span { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.hand-link:hover span { text-decoration-thickness: 2px; }
/* Stop 4: the latest real proof, taped to the page. */
.story-proof { display: block; width: 100%; max-width: 400px; color: inherit; text-decoration: none; }
.story-proof .taped { margin-top: 18px; }
.story-proof .ai-frame { display: block; }
.story-proof img { width: 100%; height: auto; }
.story-proof-text { display: grid; gap: 10px; max-width: 420px; color: inherit; text-decoration: none; }

/* Colour fields of the home page. */
.home-causes .section-head { margin-bottom: 40px; }
.home-promises .section-head p { color: var(--ink-2); }
.tone-sun .promises, .tone-sun .promises li { border-color: var(--sun-line); }
.tone-sun .promises .ico { background: var(--sun-line); color: var(--ink); }
.home-creators { padding-block: clamp(56px, 8vw, 104px); }
.home-faith .lead { margin: 0 auto 34px; max-width: 60ch; color: var(--ink-2); }
.home-faith .chips { justify-content: center; max-width: 920px; margin: 0 auto; }
.tone-forest .chip { background: transparent; border-color: var(--forest-line); color: var(--ink); }
.tone-forest a.chip:hover { border-color: var(--ink); color: var(--ink); }
@media (min-width: 900px) { .home-spine .stop:nth-child(even) .stop-art { justify-items: end; } }
.ticket dl.ledger-rows { display: block; }
@media (max-width: 899px) {
  /* On phones the story's cards use the full width and pass over the line; the text keeps its place beside it. */
  .home-spine .stop-art { position: relative; z-index: 1; margin-left: -72px; margin-top: 28px; }
  .home-spine .stop-art .hand-note { margin-left: 0; }
}
@media (max-width: 420px) {
  .flow-row { grid-template-columns: 54px 38px minmax(0, 1fr); gap: 4px; }
  .flow-arrow { width: 38px; }
  .flow-from { font-size: .8rem; }
  .flow-acct { padding: 11px 12px; }
}

/* The gift's path (home, replaces the drawn spine there): the straight gold line of the CauseHub mark, a gold dot, your
   gift, travelling down it as you read, and the four stations it passes. Without script or with reduced motion the
   journey is simply shown complete. */
.gift-path .spine-line { left: 15px; width: 24px; top: 27px; bottom: 27px; height: calc(100% - 54px); overflow: visible; }
.gift-path .spine-track { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.gift-path .spine-ink { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; }
.spine-dot, .spine-glow { fill: var(--gold); opacity: 0; transition: opacity .3s; }
.gift-path.is-live .spine-dot { opacity: 1; }
.gift-path.is-live .spine-glow { opacity: .28; }
.gift-path .stop-mark { border-radius: 50%; background: var(--surface); border: 2.5px solid var(--line-strong); color: var(--ink-3);
  box-shadow: 0 0 0 6px var(--paper); transition: border-color .4s, background-color .4s, color .4s; }
.gift-path .stop-mark .ic { width: 24px; height: 24px; stroke-width: 1.9; }
.gift-path .stop.is-reached .stop-mark, .gift-path:not(.is-live) .stop-mark { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.gift-path .stop:last-child.is-reached .stop-mark, .gift-path:not(.is-live) .stop:last-child .stop-mark { border-color: var(--green-fill); background: var(--green-soft); color: var(--green); }
.can-animate .home-spine.gift-path .stop:not(.is-reached) .stop-mark { color: var(--ink-3); }
@media (min-width: 900px) {
  .gift-path .spine-line { left: 50%; margin-left: -12px; }
}
@media (max-width: 899px) {
  /* Handwritten notes start after the line, never on it. */
  .home-spine .stop-art .hand-note { padding-left: 64px; font-size: 1.38rem; }
}

/* The photos float very slightly, each on its own rhythm. */
@media (prefers-reduced-motion: no-preference) {
  .arc-item a { animation: arc-float 6.4s ease-in-out infinite alternate; }
  .pos-m1 a { animation-duration: 7.3s; animation-delay: -2.1s; }
  .pos-p1 a { animation-duration: 5.9s; animation-delay: -3.7s; }
  .pos-m2 a { animation-duration: 8.1s; animation-delay: -1.2s; }
  .pos-p2 a { animation-duration: 6.9s; animation-delay: -4.4s; }
  @keyframes arc-float { from { translate: 0 0; } to { translate: 0 -9px; } }
}
/* Phones: the fan becomes a strip you can swipe, photos pinned slightly crooked; it drifts on its own (app.js) and
   stops the moment a finger touches it. */
@media (max-width: 759px) {
  .arc-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .arc-wrap::-webkit-scrollbar { display: none; }
  .arc-wrap.is-drifting { scroll-snap-type: none; }
  .arc { justify-content: flex-start; width: -webkit-max-content; width: max-content; padding: 10px calc(50vw - min(29vw, 125px)) 26px; gap: 16px; }
  .arc-item { scroll-snap-align: center; }
  .pos-m2 { --r: -3deg; --y: 16px; } .pos-m1 { --r: 2deg; --y: 4px; } .pos-0 { --r: -1.5deg; --y: 0px; }
  .pos-p1 { --r: 2.5deg; --y: 12px; } .pos-p2 { --r: -2deg; --y: 20px; }
}
@media (max-width: 759px) {
  /* Endless strip: the copies on both sides replace the side padding, so a photo is always visible on both sides. */
  .arc-wrap.is-loop .arc { padding-inline: 0; }
}
@media (min-width: 760px) { .arc-item[aria-hidden="true"] { display: none; } }

/* ---------- Page 5: explore and creator pages (28 Sep 2026) ---------- */
/* Category tiles: a thin line icon on a soft square, the name under it. A swipeable row on phones, a grid on desktop. */
.cat-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 12px; margin: 8px -16px 22px; padding: 4px 16px 10px; overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cat-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .cat-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-columns: auto; margin-inline: 0; padding-inline: 0; overflow: visible; } }
.cat-tile { display: grid; justify-items: center; gap: 8px; scroll-snap-align: start; text-align: center; text-decoration: none; color: var(--ink-2); font-size: .82rem; font-weight: 500; line-height: 1.25; }
.cat-box { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, background-color .15s, transform .15s; }
@supports not (aspect-ratio: 1 / 1) { .cat-box { height: 96px; } }
.cat-ic { width: 34px; height: 34px; color: var(--ink); }
.cat-tile:hover .cat-box { border-color: var(--line-input); transform: translateY(-2px); }
.cat-tile:hover { color: var(--ink); }
.cat-tile[aria-current="true"] { color: var(--ink); font-weight: 700; }
.cat-tile[aria-current="true"] .cat-box { background: var(--gold-soft); border-color: var(--gold-deep); }
.cat-tile[aria-current="true"] .cat-ic { color: var(--gold-text); }
/* Search first; the detailed filters fold away. */
.filters { border: 0; padding: 0; background: none; gap: 14px; }
.filters .search input { border-radius: 999px; padding-left: 22px; min-height: 56px; background: var(--surface); }
.filters .search .btn { min-height: 56px; }
.more-filters { grid-column: 1 / -1; }
.more-filters > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-input);
  font: 700 .95rem var(--font-head); cursor: pointer; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary svg { width: 17px; height: 17px; }
.more-filters .more-caret { transform: rotate(90deg); transition: transform .2s; }
.more-filters[open] .more-caret { transform: rotate(-90deg); }
.more-body { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); align-items: end; margin-top: 14px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.more-body .toggles { grid-column: 1 / -1; display: flex; gap: 12px 24px; flex-wrap: wrap; }
.more-apply { grid-column: 1 / -1; margin: 0; }
.results-count { font-weight: 600; color: var(--ink-2); }
/* Creator page header. */
.creator-head { border: 0; border-radius: var(--r-panel); padding: clamp(20px, 3vw, 32px); margin-bottom: 8px; }
.creator-head .avatar { width: 64px; height: 64px; font-size: 1.5rem; }
.creator-head h1 { font-size: clamp(2rem, 2.4vw + 1.2rem, 3rem); margin: 0; }
.home-hero > .arc-note { margin: 6px 0 clamp(20px, 3vw, 36px); }

/* ---------- Page 6: live numbers (28 Sep 2026) ---------- */
.numbers-hero { border-bottom: 0; background: none; }
.numbers-total { background-image: none; font-weight: 800; }
.circled { position: relative; display: inline-block; padding: 0 .12em; }
.circle-mark { position: absolute; left: -12%; top: -14%; width: 124%; height: 128%; color: var(--gold); stroke-width: 3; pointer-events: none; }
.numbers-hero .lead { max-width: 40ch; }
.numbers-body { gap: 32px 24px; }
.statement.ticket { border: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 24px 24px 10px; }
.statement h2 { font-weight: 780; letter-spacing: -.02em; }
.check-panel.tone-forest { border: 0; border-radius: var(--r-panel); }
.check-panel.tone-forest .hash { background: rgba(255, 255, 255, .06); border-color: var(--forest-line); }
.check-panel.tone-forest .hash code { color: var(--forest-pen); }
.check-panel.tone-forest h2 svg { color: var(--forest-pen); }
:root[data-theme="dark"] .check-panel.tone-forest { background: var(--forest); border: 0; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check-panel.tone-forest { background: var(--forest); border: 0; } }
/* Every tile square the same size, whatever the length of its name; names hang below, aligned at the top. */
.cat-tile { align-content: start; grid-template-rows: auto auto; }
.cat-box { width: 88px; height: 88px; aspect-ratio: auto; }
.cat-tiles { grid-auto-columns: 92px; }
@media (min-width: 900px) {
  .cat-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); justify-items: center; row-gap: 18px; }
  .cat-tile { width: 112px; }
  .cat-box { width: 104px; height: 104px; }
}
.ticket dl.statement-rows { display: block; }
.circled { padding: 0 .22em; margin-left: -.12em; }
.circle-mark { left: -6%; top: -16%; width: 112%; height: 134%; }

/* ---------- Page 7 (and every long document): a long sheet of paper with a torn receipt edge (28 Sep 2026) ---------- */
.doc { padding-top: clamp(8px, 2vw, 24px); padding-bottom: 56px; }
.doc-body { position: relative; background: var(--surface); border-radius: var(--r-panel) var(--r-panel) 0 0; padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 48px);
  box-shadow: 0 1px 2px rgba(60, 42, 12, .05); max-width: none; }
.doc-body::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: var(--surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M0 0h18L9 12z'/%3E%3C/svg%3E") 0 0 / 18px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M0 0h18L9 12z'/%3E%3C/svg%3E") 0 0 / 18px 12px repeat-x; }
@media (max-width: 560px) { .doc-body { margin-inline: -4px; } }
.doc-body > * { max-width: 68ch; }
.doc-body > .table-wrap, .doc-body > .notice { max-width: none; }
.doc-body h1 { font-size: clamp(2.3rem, 3vw + 1.2rem, 3.8rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: .3em; }
.doc-body .lead { margin-bottom: 1.4em; }
.doc-body h2 { margin-top: 1.9em; padding-top: 1.1em; border-top: 2px dashed var(--line-strong); font-size: clamp(1.45rem, .8vw + 1.2rem, 1.8rem); font-weight: 780; letter-spacing: -.028em; }
.doc-body h1 + .lead + h2, .doc-body .lead + h2 { margin-top: 1.2em; }
.doc-body h3 { font-weight: 740; }
.doc-body ul { list-style: none; padding-left: 0; }
.doc-body ul > li { position: relative; padding-left: 1.4em; margin-bottom: .6em; }
.doc-body ul > li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .45em; height: .45em; border-radius: 50%; background: var(--gold); }
.doc-body ol { padding-left: 1.3em; }
.doc-body ol > li { margin-bottom: .6em; padding-left: .2em; }
.doc-body ol > li::marker { font-weight: 700; color: var(--gold-text); }
.doc-body .table-wrap { border-radius: 16px; margin: 1.2em 0; }
.doc-body table th { background: var(--surface-2); }
.doc-rail h2 { font: 700 .82rem/1.2 var(--font-head); text-transform: none; letter-spacing: .01em; color: var(--ink-3); border: 0; padding: 0; }
.doc-rail ol { border-left: 2px solid var(--line); }
.doc-rail a { font-size: .9rem; border-left-width: 2px; margin-left: -2px; }
.doc-rail a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--gold); }

/* ---------- Page 8: story, help, for creators / charities / companies (28 Sep 2026) ---------- */
/* Steps inside documents: gold stations on a dashed line, like the gift path on the home page. */
.doc-body .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 26px 0 10px; }
.doc-body .steps li { border-top: 0; padding: 2px 0 0 64px; min-height: 44px; }
.doc-body .steps li::before { top: 0; left: 0; width: 44px; height: 44px; border: 2.5px solid var(--gold); background: var(--gold-soft); color: var(--gold-text); font: 800 1.05rem/1 var(--font-head); }
.doc-body .steps li + li::after { content: ""; position: absolute; left: 21px; top: -26px; height: 26px; border-left: 2.5px dashed var(--line-strong); }
.doc-body .steps h3 { margin: 6px 0 .3em; font-size: 1.2rem; }
/* Questions: ruled rows, a round plus that turns into a minus, the answer in a calmer ink. */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { padding: 18px 52px 18px 0; font: 700 1.06rem/1.35 var(--font-head); letter-spacing: -.01em; }
.faq summary::after { content: "+"; right: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-input); font: 500 1.3rem/1 var(--font-body); color: var(--ink); }
.faq details[open] summary::after { content: "\2212"; background: var(--gold-soft); border-color: var(--gold-deep); }
.faq details p { color: var(--ink-2); padding-right: 20px; }
.doc-body .steps li + li::after { content: none; }
.doc-body .steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -22px; border-left: 2.5px dashed var(--line-strong); }

/* ---------- Pages 9 to 12: organiser pages, account pages, report and error pages, owner desk frame (28 Sep 2026) ---------- */
.page-head h1 { font-weight: 800; letter-spacing: -.04em; }
.panel { border-radius: var(--r-panel); }
.panel h2 { font-weight: 780; letter-spacing: -.02em; }
legend { display: flex; align-items: center; font-weight: 760; }
/* Long forms: every section numbered in a gold circle, like the stations of the gift path. */
.form.numbered { counter-reset: part; }
.form.numbered fieldset > legend::before { counter-increment: part; content: counter(part); flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
  margin-right: 10px; border-radius: 50%; border: 2.5px solid var(--gold); background: var(--gold-soft); color: var(--gold-text); font: 800 1rem/1 var(--font-head); }
.checklist li svg { width: 26px; height: 26px; }
/* Sign-in, register, reset and two-step cards: a receipt with a torn edge. */
.auth-card { position: relative; border: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; box-shadow: none; margin-bottom: 12px;
  -webkit-filter: drop-shadow(0 14px 16px var(--ticket-shadow)); filter: drop-shadow(0 14px 16px var(--ticket-shadow)); }
.auth-card::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: var(--surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0h16L8 10z'/%3E%3C/svg%3E") 0 0 / 16px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0h16L8 10z'/%3E%3C/svg%3E") 0 0 / 16px 10px repeat-x; }
.auth-card h1 { font-weight: 800; letter-spacing: -.04em; }
/* Error pages: the code circled by the pen. */
.error-page .code { font-weight: 800; }
.error-page .code .circled { padding: 0 .16em; }
.error-page .code .circle-mark { left: -8%; top: -10%; width: 116%; height: 122%; stroke-width: 2.6; }
/* Owner desk frame: pill tabs, the active one on gold. */
.desk-nav { gap: 6px; border-bottom: 0; margin-bottom: 26px; }
.desk-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; margin: 0; background: var(--surface); }
.desk-nav a:hover { border-color: var(--line-input); }
.desk-nav a[aria-current="page"] { border-color: var(--gold-deep); background: var(--gold-soft); color: var(--ink); font-weight: 650; }
/* The pen's ring stretches around the whole number (an oval for wide numbers), line width stays even. */
.numbers-total .circle-mark { left: -10%; top: -14%; width: 120%; height: 128%; stroke-width: 3; }
.circle-mark, .scribble-underline, .stop-mark .scribble, .step-num .scribble { max-width: none; }
.numbers-total .circled { margin-left: .2em; }
/* Amounts never break inside themselves, however long the number gets. */
.amounts strong, .give-box .raised, .give-bar .sum b, .ledger-rows dd, .statement-rows dd, .receipt dd.total, .summary dd, .path-labels b, .numbers-total { white-space: nowrap; overflow-wrap: normal; }
/* The grey source line under a number is a sentence, not an amount: it wraps like normal prose. Without this it
   inherits the nowrap above and runs off the side of the screen on a phone. */
.statement-rows dd.src, .ledger-rows dd.src, .summary dd.src { white-space: normal; overflow-wrap: break-word; }
/* 404: a search right under the message, so a lost visitor can go straight on. */
.error-search { display: flex; gap: 10px; max-width: 520px; margin: 8px 0 4px; }
.error-search input { border-radius: 999px; padding-left: 20px; min-height: 52px; }
.error-search .btn { flex: none; min-height: 52px; }
/* Language panel on phones: anchored to the header's right edge, not to the flag button, so a longer "Give now" in
   another language can never push it off the screen. */
@media (max-width: 900px) {
  .site-head .wrap { position: relative; }
  .lang { position: static; }
  .lang-menu { right: 0; top: calc(100% + 2px); max-width: calc(100vw - 32px); }
}
/* Thank-you arrival: the ring sits in the middle (the drawing is symmetric around it now), the gold coin, the gift,
   lands in the ring and then melts away as the green tick draws, so the tick is what stays. */
.arrival svg { width: min(100%, 320px); }
@media (prefers-reduced-motion: no-preference) {
  .arrival .coin { animation: land-in 1.1s cubic-bezier(.3, .7, .2, 1) forwards, absorb .5s 1.55s ease-in forwards; }
  @keyframes land-in { from { transform: translate(-100px, 60px) scale(.6); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
  @keyframes absorb { from { transform: none; opacity: 1; } to { transform: scale(0); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .arrival .coin { display: none; } }