/* 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: #1F5A3D;
  --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: #8FD9B0; --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: #8FD9B0; --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; }
/* Keeps one word whole. A browser treats a hyphen as a line break opportunity, so Romanian forms like
   "Conectează-ți" split across two lines and read as a typo in a short bold heading. No CSS property prevents a
   break at an existing hyphen (hyphens, word-break, line-break and text-wrap were all tried), so the word itself
   is wrapped in this class. Use it only around a single word, never a phrase, or it will overflow narrow screens. */
.nb { white-space: nowrap; }

.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; }
/* Phones: the header's Sign in button is hidden there, so the menu starts with the way into an account (4 Oct 2026,
   an organiser could not find it). On wide screens the header shows it, so this list stays hidden. */
.nav .nav-account { display: none; }
.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-account { display: grid; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 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; }
/* "Opening soon" (3 Oct 2026): reviewed, public pages whose organiser Stripe is still verifying. The badge sits on the
   photo like the example tag, and the card says when donations open instead of showing amounts. Warning colours, the
   same pair as .notice-warn, so the contrast tests already cover them in both themes. */
.tag-soon { background: var(--gold-soft); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.card-soon { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--gold-soft); color: var(--ink); font-size: .9rem; line-height: 1.45; }
.card-soon svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gold-text); }
.opening-soon .section-head p { max-width: 60ch; }
/* Explore: one line under the result count that jumps to the "Opening soon" strip below the results. */
/* Organiser dashboard: messages the owner prepared for the organiser to send themselves. */
.steps-plain { margin: 8px 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.message-card { display: grid; gap: 12px; }
.message-card h2 { margin: 0; font-size: 1.2rem; }
.message-card .message-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.message-card .message-head p { margin: 2px 0 0; }
.message-card .mail { max-height: none; overflow: visible; white-space: pre-wrap; font-family: inherit; font-size: 1rem; line-height: 1.6; }
.message-card.is-sent { opacity: .82; }
.message-actions { flex-wrap: wrap; }
/* Owner desk: a small "show only this" picker above a list. */
.desk-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.desk-filter select { width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; }
.soon-jump { margin: -8px 0 18px; }
.soon-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600; }
.soon-jump a:hover { text-decoration: underline; text-decoration-color: var(--gold-deep); }
.soon-jump svg { width: 14px; height: 14px; transform: rotate(90deg); color: var(--gold-text); }
.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; }
/* The checks behind the trust badge, one line under it on the cause page; the dot never starts a line. */
.organiser .trust-checks { flex-basis: 100%; margin: -4px 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-3); }
.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); }
/* A public page whose donations are not open yet (Stripe still verifying the organiser, or a text change waiting for
   the owner): said plainly under the closed button, in the same colours as the warning notices. */
.opening-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--gold-soft); color: var(--ink); font-size: .9rem; line-height: 1.45; }
.opening-note svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--gold-text); }
.text-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.text-versions details { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; }
.text-versions summary { cursor: pointer; font-size: .92rem; }
.text-versions .prose { margin: 10px 0; }
.share-row { display: flex; gap: 8px; margin-top: 12px; }
.share-row .btn { flex: 1; min-height: 42px; padding: 0 12px; font-size: .92rem; }
.share-row { flex-wrap: wrap; }
.share-row .btn { min-width: 0; }
/* Share row on phones and tablets (one column, under 1000 px; 12 Oct 2026, Sergiu's phone: "Copia / ză / linkul").
   The page lets long words break anywhere (body overflow-wrap), so three pills sharing 238 px at 320 split the words
   inside the pill. Here a word never breaks: a button is never narrower than its longest word (min-width:
   min-content) and, if three cannot sit side by side, the row wraps instead. Under 37.5em the buttons are tiles, icon
   over label, and a two-word label may take two lines between words; wider, they stay pills on one line. 44 px taps.
   A hyphenated word ("QR-code") can still break at its hyphen when a tile is narrower than it (no CSS stops that), so
   a new label is checked with sharebtn-tools/check.py: every language, 320 to 768 px. Desktop (380 px column) untouched. */
@media (max-width: 999px) {
  .share-row .btn { flex: 1 1 0; min-width: min-content; min-height: 44px; overflow-wrap: normal; word-break: normal; hyphens: manual; white-space: nowrap; }
}
@media (max-width: 37.5em) {
  .share-row .btn { flex-direction: column; gap: 6px; min-height: 66px; padding: 10px 6px; border-radius: 16px; font-size: .84rem; line-height: 1.15; text-align: center; white-space: normal; }
  .share-row .btn svg { width: 20px; height: 20px; }
}
/* QR code panel (cause page and organiser dashboard). The code is drawn by app.js on a white square, so it scans in dark mode too. */
.qr-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); display: grid; gap: 12px; }
.qr-panel .field { margin: 0; }
.qr-panel input[type="text"] { width: 100%; }
.qr-title { margin: 0; }
.qr-code { width: min(220px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-link { margin: 0; color: var(--ink-3); overflow-wrap: anywhere; word-break: break-all; font-variant-numeric: tabular-nums; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-to { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; display: grid; gap: 6px; }
.qr-to legend { font: 700 1rem var(--font-body); letter-spacing: 0; padding: 0; margin: 0 0 4px; }
.qr-actions .btn { flex: 1 1 auto; }
.aside-sticky.qr-open { position: static; }
@supports not (aspect-ratio: 1 / 1) { .qr-code { height: 220px; } }
.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; }
/* A YouTube Short is vertical: a 9:16 box, at most 80% of the screen height, centred. */
.video-facade.is-tall { aspect-ratio: 9 / 16; width: min(100%, calc(80vh * 9 / 16)); margin-inline: auto; }

.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); }
/* "Report this message" under a supporter's message (6 Oct 2026): quieter than the message itself, still a 24 px tap target. */
.supporters .sup-report { display: inline-block; padding: 5px 0; font: 500 .75rem/1.2 var(--font-body); color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.supporters .sup-report:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- 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; }
/* width: 100%, not only max-width: a file input's native "Choose file / No file chosen" box is about 340 px wide, and
   inside a grid form max-width: 100% does not stop it from setting the column's minimum width, so on phones the proof
   upload in the organiser dashboard pushed the page 59 px sideways at 320 px (found 3 Oct 2026). A percentage width
   makes the control compressible, so the column can shrink to the screen. */
input[type="file"] { font: inherit; color: var(--ink-2); width: 100%; 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; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.receipt-head h2 { font-size: 1.15rem; margin: 0; flex: 1 1 12rem; min-width: 0; overflow-wrap: break-word; }
/* A long status (bank transfers, in Romanian) moves under the title instead of squeezing it into one letter per line. */
.receipt-head .status { font-size: .8rem; white-space: normal; max-width: 100%; }
.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; min-width: 0; }
.theme-switch { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--surface-2); border-radius: 22px; padding: 4px; width: -webkit-fit-content; width: fit-content; max-width: 100%; }
.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); }
/* The three labels are long in Spanish ("Automático") and Romanian ("Întunecat"), and width: max-content let the switch
   push the whole page sideways on small phones, even at normal text size (27 px at 320 px in Spanish, 3 Oct 2026).
   It also made the footer column as wide as the switch, so max-width: 100% capped the switch against itself; the
   width is fit-content now, which takes the room that is there and no more. flex-wrap is the guarantee: if it still
   does not fit, the buttons wrap onto a second row instead of overflowing. The 22 px radius is a full pill on one row
   and a clean shape on two.
   Before it comes to that, the decorative icons go and the padding tightens, but only where the icons would not fit,
   so phones that showed them keep them. Measured room needed with icons at normal text size: English 18.3em, Dutch
   19.4em, Romanian 22.1em, Spanish 22.6em (em so it follows the phone's text-size setting). Hence 20em for everyone
   and 23em for the two long-labelled languages. A new language falls back on the wrap until it gets its own line. */
@media (max-width: 20em) {
  .theme-switch button { padding: 0 10px; flex: 1 1 auto; justify-content: center; }
  .theme-switch button svg { display: none; }
}
@media (max-width: 23em) {
  :lang(es) .theme-switch button, :lang(ro) .theme-switch button { padding: 0 10px; flex: 1 1 auto; justify-content: center; }
  :lang(es) .theme-switch button svg, :lang(ro) .theme-switch button svg { display: none; }
}


/* ---------- 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; }
  .video-facade.is-tall { height: 80vh; width: min(100%, 45vh); }
}

/* ---------- 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, .status-helped { 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; }
/* The wordmark yields before anything overflows. Fixed em breakpoints were tuned to "Give now"; "Donează acum" is half
   as long again and pushed the Romanian header 2 to 18 px off screen between 332 and 368 px, and on many widths the
   burger sat 0 to 6 px from the edge instead of 16 (3 Oct 2026). Instead of a breakpoint per language, the brand in the
   header may shrink: it wraps internally, and a wrapped "CauseHub" lands on a second row that the fixed height clips,
   leaving the mark. With room to spare nothing changes. min-width equals the mark, so the logo itself is never
   clipped. The link keeps its aria-label, so the name is still announced. Only the header brand: the footer one is
   untouched. Tried and dropped: letting the actions borrow part of the side margin before the wordmark yields.
   Flexbox cannot express "use this room first, then shrink that" without either moving the burger on every phone or
   shrinking the brand early; measured both, both were worse. Phones only (900px, where the desktop menu leaves the
   header row): above that the menu shares the row, and in Romanian and Spanish at 1024 px the brand would yield to it. */
@media (max-width: 900px) {
  .site-head .brand { flex: 0 1 auto; min-width: 30px; flex-wrap: wrap; height: 30px; overflow: hidden; }
}
@media (max-width: 30em) {
  .site-head .wrap { gap: 8px; }
  .head-actions { gap: 4px; }
  .head-actions .btn { padding: 0 11px; }
  .brand { gap: 8px; font-size: 1.08rem; }
  .brand .mark { width: 26px; height: 26px; }
  .site-head .brand { height: 26px; min-width: 26px; }
  .lang summary { min-width: 40px; padding: 0 8px; }
  .menu-toggle { width: 42px; height: 42px; }
}
@media (max-width: 22.5em) {
  .site-head .wrap { gap: 6px; }
  .head-actions { gap: 4px; }
  .head-actions .btn { padding: 0 9px; font-size: .95rem; }
  .brand { gap: 6px; font-size: 1.02rem; }
  .brand .mark { width: 24px; height: 24px; }
  .site-head .brand { height: 24px; min-width: 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; }
/* Cover photo changes (3 Oct 2026): the current cover next to the one waiting for review, in the organiser dashboard
   and the owner desk; and the line under a public cover that says when it was changed after going public. */
.cover-pair { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 18px; }
.cover-pair:empty { display: none; }
.cover-pair figure { margin: 0; width: min(240px, 100%); }
.cover-pair img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.cover-pair figcaption { margin-top: 6px; font-size: .84rem; color: var(--ink-3); }
.cover-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cover-history li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .9rem; }
.cover-history img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.photo-note { margin: 8px 2px 0; font-size: .84rem; color: var(--ink-3); }
.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; } }

/* ---------- Cause photo gallery (7 Oct 2026): the cover, then up to six photos in the same 16:9 box ----------
   A native scroll-snap row, so it swipes without the script and never changes the page height. The cover keeps its
   crop; every other photo is shown whole ("contain", so a sketch or an invoice is never cut) on a letterbox that
   follows the theme. Arrows only on screens with a mouse; dots always. Controls stay invisible (and out of the tab
   order) until app.js is ready, while keeping their space so nothing below moves. */
.gallery { margin: 0; }
.gallery-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: inherit; }
.gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; background: var(--surface-2); }
.cause-hero-img .gallery-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cause-hero-img .gallery-slide.is-cover img { object-fit: cover; }
.gallery-arrow { position: absolute; z-index: 3; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: none; 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; }
.gallery-arrow svg { width: 20px; height: 20px; }
.gallery-prev { left: 12px; }
.gallery-arrow .ic-flip { transform: scaleX(-1); }
.photo-actions .ic-up { transform: rotate(-90deg); }
.photo-actions .ic-down { transform: rotate(90deg); }
.gallery-next { right: 12px; }
@media (hover: hover) and (pointer: fine) { .gallery-arrow { display: grid; } }
.gallery-bar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 6px; }
.gallery-dots { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery-dot { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.gallery-dot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ink-3); opacity: .5; transition: width .2s ease, opacity .2s ease; }
.gallery-dot[aria-current="true"]::before { width: 20px; background: var(--ink); opacity: 1; }
.gallery-play { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.gallery-play svg { width: 16px; height: 16px; }
.gallery-play .ic-play { fill: currentColor; stroke: none; }
.gallery-play .ic-pause { stroke-width: 2.6; }
.gallery-play .ic-play, .gallery-play.is-paused .ic-pause { display: none; }
.gallery-play.is-paused .ic-play { display: block; }
.gallery-play[hidden] { display: none; }
.gallery:not(.is-ready) .gallery-bar, .gallery:not(.is-ready) .gallery-arrow { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .gallery-dot::before { transition: none; } }
.photo-alt { display: block; font-weight: 400; }
.photo-list { margin-bottom: 18px; }
.photo-alt-edit { margin-top: 6px; font-weight: 400; }
.photo-alt-edit .form { margin-top: 8px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.photo-actions form { margin: 0; }
.earlier-covers img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); vertical-align: middle; margin-right: 6px; }
@media (max-width: 560px) { .pic-list .photo-actions { grid-column: 2; justify-content: flex-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; }
.share-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.share-chips .btn[hidden] { display: none; }
.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 photo arc (11 Oct 2026): every live cause with a real cover, on one curve, the middle photo straight and the
   others tilting and dipping as they fan out. It turns by itself like a slow wheel (app.js). The geometry lives here and
   only here: each photo has one number, --k, its slot (0 = the middle, negative = left, may be a fraction while it turns),
   and --a = |k|. app.js only moves those two numbers (and --K, --step for the width), so the first paint without the
   script is the same fan. Photos past slot K slide in under the outer one and fade, so a photo is only seen whole; on
   phones they leave the screen instead (the sides peek, so you can see there is more). */
.arc-wrap { --w: min(58vw, 250px); --gap: 16px; --step: calc(var(--w) + var(--gap)); --K: 1; --tuck: 1; --rs: 5; --yc: 14px; --ye: 0px;
  --fade: .7; --shrink: 0; --room: 40px; --bar: 56px;
  position: relative; overflow: hidden; margin-top: clamp(34px, 5vw, 64px); padding: 20px 0 0; touch-action: pan-y; }
.arc { position: relative; list-style: none; margin: 0; padding: 0; height: calc(var(--w) * 1.25 + var(--room) + var(--bar)); }
/* The photos keep their own layers (app.js gives the middle one 40) inside the ring, so the header and the phone menu (40)
   always stay on top (13 Oct 2026: the middle photo covered the open menu). */
.arc { isolation: isolate; }
.arc-wrap.is-ring .arc { -webkit-user-select: none; user-select: none; cursor: grab; }
.arc-item { --k: 0; --a: 0; --KK: var(--fit-K, var(--K)); --st: var(--fit-step, var(--step));
  --c: clamp(calc(var(--KK) * -1), var(--k), var(--KK));
  --e: max(0, calc(var(--a) - var(--KK)));
  --m: calc(min(var(--a), var(--KK)) + var(--tuck) * var(--e));
  --sx: calc(var(--c) + var(--tuck) * (var(--k) - var(--c)));
  position: absolute; top: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2);
  -webkit-transform: translateX(calc(var(--sx) * var(--st))) translateY(calc(var(--m) * var(--m) * var(--yc) + var(--e) * var(--ye) + var(--lift, 0px))) rotate(calc(var(--sx) * var(--rs) * var(--rh, 1) * 1deg)) scale(calc(1 - var(--e) * var(--shrink)));
  transform: translateX(calc(var(--sx) * var(--st))) translateY(calc(var(--m) * var(--m) * var(--yc) + var(--e) * var(--ye) + var(--lift, 0px))) rotate(calc(var(--sx) * var(--rs) * var(--rh, 1) * 1deg)) scale(calc(1 - var(--e) * var(--shrink)));
  opacity: calc(1 - var(--e) * var(--fade)); }
.arc-wrap:not(.is-moving) .arc-item { transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
.arc-item.is-far { display: none; }
/* app.js reads the values above for this width from one hidden probe (getComputedStyle gives them in pixels). */
.arc-probe { position: absolute; top: 0; left: 0; box-sizing: content-box; width: var(--step); height: calc(var(--K) * 1px); padding: 0 0 0 calc(var(--rs) * 1px);
  margin: calc(var(--shrink) * 100px) 0 0 calc(var(--tuck) * 100px); border: 0; visibility: hidden; pointer-events: none; }
.arc-item.is-gone a { pointer-events: none; }
.arc-item a { display: block; height: calc(var(--w) * 1.25); border-radius: var(--r-photo); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-photo);
  -webkit-user-drag: none; -webkit-touch-callout: none; }
.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); -webkit-user-drag: none; }
.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; }
/* Where each photo starts (the server picks the slot; the middle one is first in the page, so Tab starts there). */
.pos-0 { --k: 0; --a: 0; z-index: 20; }
.pos-m1 { --k: -1; --a: 1; z-index: 16; } .pos-p1 { --k: 1; --a: 1; z-index: 16; }
.pos-m2 { --k: -2; --a: 2; z-index: 12; } .pos-p2 { --k: 2; --a: 2; z-index: 12; }
.pos-m3 { --k: -3; --a: 3; z-index: 8; } .pos-p3 { --k: 3; --a: 3; z-index: 8; }
/* Previous, pause or play, next: under the photos on phones, in the hollow under the middle photo on wide screens.
   Shown only once the script turns the arc (the space is kept, so nothing moves). */
.arc-bar { position: absolute; left: 50%; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.arc-wrap:not(.is-ring) .arc-bar { visibility: hidden; }
.arc-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.arc-btn svg { width: 18px; height: 18px; }
.arc-btn .ic-flip { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.arc-play svg { width: 16px; height: 16px; }
.arc-play .ic-play { fill: currentColor; stroke: none; }
.arc-play .ic-pause { stroke-width: 2.6; }
.arc-play .ic-play, .arc-play.is-paused .ic-pause { display: none; }
.arc-play.is-paused .ic-play { display: block; }
.arc-play[hidden] { display: none; }
/* Before the script (or without it) the fan shows at most the five photos around the middle and only the ones that fit
   whole; the script then takes over every photo. */
.arc-wrap:not(.is-ring) .pos-m3, .arc-wrap:not(.is-ring) .pos-p3 { display: none; }
@media (min-width: 760px) and (max-width: 1023px) {
  .arc-wrap:not(.is-ring) .pos-m2, .arc-wrap:not(.is-ring) .pos-p2 { visibility: hidden; }
}
@media (min-width: 760px) {
  .arc-wrap { --w: clamp(170px, 17vw, 240px); --gap: clamp(12px, 1.4vw, 22px); --K: 1; --tuck: .12; --rs: 8; --yc: 20.5px; --ye: 40px; --fade: 1.6; --shrink: .08; --room: 44px; --bar: 60px; }
}
@media (min-width: 1024px) {
  /* Five photos across; the buttons sit in the hollow under the middle photo, inside the room the outer ones need. */
  .arc-wrap { --K: 2; --room: 136px; --bar: 0px; }
  .arc-bar { bottom: 22px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
  .arc-item:hover { --lift: -10px; --rh: .5; }
}
@media (prefers-reduced-motion: no-preference) {
  .arc-item { -webkit-animation: arc-in 1s cubic-bezier(.2, .7, .2, 1) backwards; animation: arc-in 1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .pos-m1, .pos-p1 { -webkit-animation-delay: .12s; animation-delay: .12s; }
  .pos-m2, .pos-p2, .pos-m3, .pos-p3 { -webkit-animation-delay: .24s; animation-delay: .24s; }
  @-webkit-keyframes arc-in { from { opacity: 0; translate: 0 80px; } }
  @keyframes arc-in { from { opacity: 0; translate: 0 80px; } }
  /* The photos float very slightly, each on its own rhythm. */
  .arc-item a { -webkit-animation: arc-float 6.4s ease-in-out infinite alternate; 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; }
  .pos-m3 a, .is-far a { animation-duration: 7.7s; animation-delay: -2.9s; }
  .pos-p3 a { animation-duration: 6.1s; animation-delay: -0.8s; }
  @-webkit-keyframes arc-float { from { translate: 0 0; } to { translate: 0 -9px; } }
  @keyframes arc-float { from { translate: 0 0; } to { translate: 0 -9px; } }
}
.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; }
/* The same phone as SevinHub's device demos (4 Oct 2026): the camera sits in the top bezel and never covers the
   recording, a thin rim, two side buttons. */
.phone { position: relative; width: min(250px, 66vw); padding: 22px 9px 14px; border-radius: 42px; background: #1D1B18; box-shadow: var(--shadow-photo), inset 0 0 0 2px #3A3631, 0 0 0 1px rgba(255, 255, 255, .06); }
.phone::before { content: ""; position: absolute; z-index: 1; top: 8px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B4A6B 0 25%, #10131C 45%); box-shadow: 0 0 0 2px #15151E; }
.phone::after { content: ""; position: absolute; right: -3px; top: 92px; width: 3px; height: 46px; border-radius: 0 3px 3px 0; background: #3A3631; box-shadow: 0 60px 0 -10px #3A3631; }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; border-radius: 30px 30px 32px 32px; background: var(--paper); filter: var(--photo-filter); }
@media (min-width: 900px) { .phone { width: 300px; padding: 26px 11px 16px; border-radius: 48px; } .phone::after { top: 110px; height: 54px; box-shadow: 0 72px 0 -12px #3A3631; } }
/* The laptop for computers (4 Oct 2026), SevinHub's device-demo laptop in CauseHub's ink: thin bezel with the
   camera in it, a 16:10 screen, an aluminium deck with the opening notch. app.js turns .phone into .laptop. */
.laptop { position: relative; width: 100%; max-width: 780px; padding: 14px 14px 16px; border-radius: 18px 18px 6px 6px; background: #1D1B18; box-shadow: var(--shadow-photo), inset 0 0 0 2px #3A3631, 0 0 0 1px rgba(255, 255, 255, .06); }
.laptop::before { content: ""; position: absolute; z-index: 1; top: 4px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B4A6B 0 25%, #10131C 45%); }
.laptop video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; background: var(--paper); filter: var(--photo-filter); }
.laptop-base { position: relative; width: calc(min(100%, 780px) + 9%); height: 16px; margin-top: -12px; border-radius: 2px 2px 16px 16px; background: linear-gradient(#D9D4CB, #A7A197 70%, #8D877E); box-shadow: 0 14px 30px rgba(31, 28, 24, .25); }
.laptop-base::after { content: ""; position: absolute; top: 0; left: 50%; width: 110px; height: 6px; margin-left: -55px; border-radius: 0 0 8px 8px; background: #8D877E; }
.howto-laptop .howto-media { gap: 0; }
.howto-laptop .howto-note { margin-top: 16px; }
@media (min-width: 1024px) {
  .howto-laptop .howto-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.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 list: sort and category chips that open Explore with the filter set (7 Oct 2026). On phones the chips scroll
   sideways inside their own row, never the page. */
.home-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: -16px 0 28px; min-width: 0; max-width: 100%; }
.home-pick-sort { display: flex; align-items: center; gap: 10px; flex: none; }
.home-pick-sort label { font-weight: 600; font-size: .93rem; color: var(--ink-2); }
.home-pick-sort select { width: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.home-pick-cats { flex: 1 1 320px; min-width: 0; }
.home-pick .chip { min-height: 44px; cursor: pointer; font-family: var(--font-body); }
.home-pick .chip svg { width: 18px; height: 18px; flex: none; }
.home-pick .chip:hover, .home-pick .chip:focus-visible { border-color: var(--ink); color: var(--ink); }
@media (max-width: 599px) {
  .home-pick { flex-direction: column; align-items: stretch; margin-top: -20px; }
  .home-pick-cats { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; max-width: 100%; }
  .home-pick-cats::-webkit-scrollbar { display: none; }
  .home-pick .chip { flex: none; }
}
.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; }
}


/* ---------- 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; } }

/* ---------- Bank Lane: choose card or bank transfer, and the bank details a donor copies ---------- */
.via-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 0 0 24px; max-width: 560px; background: var(--surface-2); border-radius: 18px; }
.via-switch a { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 14px; border: 1px solid transparent; border-radius: 14px; color: var(--ink-2); text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
.via-switch a span { display: grid; gap: 1px; min-width: 0; }
.via-switch a b { font: 700 1rem/1.2 var(--font-head); }
.via-switch a small { font: 400 .8rem/1.3 var(--font-body); color: var(--ink-3); }
.via-switch a:hover { color: var(--ink); border-color: var(--line-strong); }
.via-switch a[aria-current="page"] { color: var(--ink); background: var(--gold-soft); border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.via-switch a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.via-switch svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 360px) { .via-switch a { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; } }
.via-switch.via-3 { grid-template-columns: 1fr 1fr 1fr; max-width: 760px; }
@media (max-width: 560px) { .via-switch.via-3 a { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; } }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.bank-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin: 16px 0; }
.bank-details dt { color: var(--ink-3); font-size: .88rem; margin-top: 10px; }
.bank-details dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.bank-details dd span { min-width: 0; font-size: 1.05rem; overflow-wrap: break-word; }
.bank-details dd .btn { justify-self: end; }
/* Only a Copy button sits beside the value. A note or a link goes on its own line under it: in the auto column a long
   note took the whole width and squeezed the value to one letter per line on a phone (owner desks, 6 Oct 2026). */
.bank-details dd > .small, .bank-details dd > a { grid-column: 1 / -1; }
.bank-details dd > span.small { font-size: .875rem; }
.bank-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 6px 0 14px; }
.bank-qr[hidden] { display: none; }
.bank-qr-code { width: 168px; padding: 10px; background: #FFFFFF; border-radius: 12px; border: 1px solid var(--line); flex: none; }
.bank-qr-code svg { display: block; width: 100%; height: auto; }
.bank-qr p { flex: 1 1 220px; margin: 0; }
.bank-open { display: grid; gap: 12px; }
.bank-open .bank-item { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.bank-open .bank-item.is-sent { border-color: var(--line-strong); background: var(--surface-2); }
.bank-open .bank-item .row { gap: 8px; }
.bank-open .bank-item p { margin: 0; }
.notice .mono { white-space: nowrap; }
.bank-open .bank-amount { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bank-open .bank-amount input { max-width: 8em; }

/* UK fundraising agreement (6 Oct 2026): the signed text keeps its lines and wraps on phones. */
pre.agreement-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: 14px; border-radius: 12px; font-family: inherit; font-size: .9rem; line-height: 1.55; margin: 0; }
.uk-statement { border-left: 3px solid var(--line, currentColor); padding-left: 12px; }

/* Press pages (8 Oct 2026): a private page per newsroom with every public block ready to copy. Phone first: one column,
   copy buttons beside each heading wrap under it on narrow screens, long links break anywhere so nothing scrolls sideways. */
.press-intro .lead { max-width: 62ch; }
.press-actions .btn { flex: 0 1 auto; }
.press-body { display: grid; gap: 16px; padding-bottom: clamp(32px, 5vw, 64px); }
.press-block { min-width: 0; }
.press-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.press-head h2 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.press-head .btn { flex: none; }
.press-hint { margin: -2px 0 10px; }
.press-text { max-width: 70ch; overflow-wrap: break-word; }
.press-text p { margin: 0 0 .8em; }
.press-text > :last-child { margin-bottom: 0; }
.press-title { font: 700 1.2rem/1.3 var(--font-head); letter-spacing: -.01em; }
.press-totals { font-weight: 600; }
.press-block .progress { max-width: 420px; margin-top: 8px; }
.press-url, .press-desk-url { overflow-wrap: anywhere; word-break: break-all; margin: 0; }
.press-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 760px) { .press-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press-photos figure { margin: 0; }
.press-photos img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--surface-2); }
.press-photos figcaption { margin-top: 8px; font-size: .9rem; line-height: 1.45; }
.press-photo-actions { margin-top: 10px; gap: 8px; }
.press-qr { display: grid; gap: 10px; max-width: 320px; }
.press-tr { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.press-tr:first-of-type { border-top: 0; padding-top: 0; }
.press-tr summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.press-tr .press-text { margin-top: 10px; }
.press-foot { margin: 0; }
.press-desk { display: grid; gap: 6px; justify-items: end; max-width: 100%; }
.press-desk p { margin: 0; }
.press-desk .row { gap: 6px; justify-content: flex-end; }
.press-desk-panel .press-desk { justify-items: start; }
.press-desk-panel .press-desk .row { justify-content: flex-start; }
@media (max-width: 600px) { .press-desk { justify-items: start; } .press-desk .row { justify-content: flex-start; } }

/* Photo viewer (8 Oct 2026): full screen, dark in both themes, a swipe strip like the gallery. Opened from the cover
   (.hero-open, added by app.js), a gallery photo (.gallery-open) or a press page photo (.press-photo-open). */
.hero-open, .gallery-open, .press-photo-open { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; color: inherit; }
.press-photo-open { height: auto; border-radius: 12px; }
.hero-open:focus-visible, .gallery-open:focus-visible, .press-photo-open:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
html.viewer-open, html.viewer-open body { overflow: hidden; }
dialog.viewer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #0E0D0C; color: #F4F0EA; overflow: hidden; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, .85); }
.viewer-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(14, 13, 12, .85), rgba(14, 13, 12, 0)); }
.viewer-count { margin: 0; font: 600 .95rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.viewer-close, .viewer-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(14, 13, 12, .55); color: #fff; cursor: pointer; padding: 0; }
.viewer-close:hover, .viewer-arrow:hover { background: rgba(255, 255, 255, .16); }
.viewer-close:focus-visible, .viewer-arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.viewer-close .ic, .viewer-arrow .ic { width: 24px; height: 24px; }
.viewer-close { margin-left: auto; }
.viewer-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track:focus { outline: none; }
.viewer-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  scroll-snap-align: start; scroll-snap-stop: always; padding: 64px 0 0; }
.viewer-slide img { display: block; max-width: 100%; max-height: calc(100% - 4.5rem); width: auto; height: auto; object-fit: contain; margin: auto; }
.viewer-slide figcaption { width: 100%; max-width: 70ch; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
  font-size: .95rem; line-height: 1.45; color: #E7E1D7; text-align: center; }
.viewer-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: none; }
.viewer-prev { left: 16px; }
.viewer-next { right: 16px; }
@media (hover: hover) and (pointer: fine) { .viewer-arrow:not([hidden]) { display: grid; } }
@media (prefers-reduced-motion: reduce) { .viewer-track { scroll-behavior: auto; } }

/* ==========================================================================================================
   Design refresh, 7 Oct 2026: "Stamped and filed". CauseHub's own signature in place of the scrapbook look (tape,
   ballpoint margin notes, drawn timelines), which read as 1ClickImpact's. A receipt is checked and stamped by a
   person: a few ink stamps in ledger green (--pen), photos filed with the receipt (straight, a row of punched holes
   along the top), and every list hangs on the gold gift path of the mark. Handwriting stays in one place only: the
   footer sign-off. Older markup (.taped, .hand-note, scribbles) gets the new look here, so no page is left half-styled.
   ========================================================================================================== */

/* The stamp: a short uppercase label pressed slightly off square, double ruled. Text, so it is translated; at most two
   per page. --stamp-bg is the colour around it, so the gap between the two rules matches what it sits on. */
.stamp { --stamp-bg: var(--paper); display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px 4px;
  border: 2px solid currentColor; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--stamp-bg), inset 0 0 0 3.5px currentColor;
  font: 760 .74rem/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--pen);
  -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
.stamp svg { width: 14px; height: 14px; flex: none; stroke-width: 2.6; }
.give-note { margin: 18px 0 0 14px; }

/* The gift path behind a list: one gold line from the mark, a gold-ringed dot per row. */
.ledger-path { position: relative; list-style: none; margin: 0; padding: 0; }
.ledger-path::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 17px; width: 2px; border: 0; border-radius: 2px; background: var(--gold); opacity: 1; }
.ledger-path > li:focus { outline: none; }
.ledger-path > li:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }

/* Supporters: the public ledger of a cause. Compact rows, straight, newest first. */
.ledger-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -2px 0 14px; color: var(--ink-2); }
.ledger-sum b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.supporters.ledger-path { display: block; margin-bottom: 0; }
.supporters.ledger-path li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; -webkit-transform: none; transform: none; }
.supporters.ledger-path li:last-child { border-bottom: 0; }
.supporters.ledger-path .sup-avatar { width: 36px; height: 36px; margin: 0; border-radius: 50%; background: var(--surface); color: var(--gold-text);
  border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--paper); font-size: .92rem; }
.supporters.ledger-path .sup-avatar svg { width: 16px; height: 16px; }
.supporters.ledger-path .sup-top { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.supporters.ledger-path .sup-top b { min-width: 0; overflow-wrap: anywhere; }
.supporters.ledger-path .sup-amount { flex: none; padding: 0; background: none; color: var(--ink); font: 720 1.02rem/1.25 var(--font-head); }
.supporters.ledger-path q { margin: 4px 0 0; font: 400 1rem/1.5 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.supporters.ledger-path q::before { content: "\201C"; color: var(--gold-text); font-weight: 800; }
.supporters.ledger-path q::after { content: "\201D"; color: var(--gold-text); font-weight: 800; }
.sup-msg-tools { margin: 0; }
.supporters.ledger-path .sup-report { padding: 3px 0; font-size: .74rem; }
.supporters.ledger-path .sup-meta { display: block; margin: 3px 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.sup-meta .sep { color: var(--ink-3); }
.supporters.ledger-path .sup-tag-first { display: inline-block; margin-left: 4px; padding: 3px 8px; font-size: .72rem; vertical-align: 1px; }

/* "Show 10 more": adds the next rows in place (app.js), or loads the page with them (no script). Never endless. */
.list-more { margin: 12px 0 0 50px; }
.list-more .btn { min-height: 46px; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; text-align: left; }
.list-more-count { font-weight: 500; font-size: .86rem; color: var(--ink-3); }
.list-more .btn[aria-busy="true"] { opacity: .6; }

/* The proof trail on the same gold path; date and kind in small capitals instead of handwriting. */
.trail.ledger-path { display: grid; gap: 40px; margin-top: 26px; }
.trail.ledger-path::before { left: 21px; }
.trail.ledger-path .stop { display: block; padding-left: 62px; }
.trail.ledger-path .stop-mark { position: absolute; left: 0; top: -4px; width: 44px; height: 44px; grid-column: auto; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--gold); color: var(--gold-text); box-shadow: 0 0 0 5px var(--paper); }
.trail.ledger-path .stop-mark .ic { width: 20px; height: 20px; }
.stop-kicker { margin: 0 0 6px; font: 700 .76rem/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.trail-photo { max-width: 440px; margin: 22px 0 8px; }

/* Filed photo (and every older .taped one): straight, on a receipt card, a row of punched holes along the top. */
.filed, .taped, .taped.tilt-r { position: relative; margin: 20px 0 0; padding: 22px 10px 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); -webkit-transform: none; transform: none; }
.filed::before, .taped::before, .taped.tilt-r::before { content: ""; position: absolute; z-index: 1; top: 8px; left: 16px; right: 16px; width: auto; height: 8px; margin: 0;
  background: radial-gradient(circle, var(--paper) 2.6px, var(--line-strong) 3.1px, transparent 3.6px) 0 50% / 14px 8px repeat-x;
  -webkit-clip-path: none; clip-path: none; -webkit-transform: none; transform: none; }
.filed img, .taped img { display: block; width: 100%; height: auto; border-radius: 10px; filter: var(--photo-filter); }
.filed figcaption, .taped figcaption { margin: 10px 4px 2px; font: 700 .76rem/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.proof-item .taped figcaption { font-size: .74rem; line-height: 1.35; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a:hover > .taped, a:focus-visible > .taped { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}

/* Former margin notes: plain short captions now, no pen, no drawn arrows. */
.hand { font-family: var(--font-body); font-weight: 600; color: inherit; }
.hand-label, .trail .hand-label { display: block; margin: 0 0 8px; font: 700 .76rem/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hand-note, .home-spine .stop-art .hand-note { gap: 8px; font: 500 .9rem/1.45 var(--font-body); letter-spacing: 0; color: var(--ink-2); }
.hand-note .scribble, .proof-note .scribble, .donate-note .scribble, .give-note .scribble { display: none; }
.hand-link span { text-decoration-color: var(--line-input); }
.sup-note { display: none; }
/* Organiser and donor words are read, not admired: the body face, in quote marks of the lamp colour. */
.organiser-thanks blockquote { font: 400 1.15rem/1.55 var(--font-body); }

/* Underlined words: the straight gold line of the mark instead of a sketched stroke. */
.underlined .scribble-underline { display: none; }
.underlined { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% .12em no-repeat; padding-bottom: .02em; }

/* Numbers in rings: set type in a gold ring, no drawn circle. */
.step-num, .stop-mark, .ring { font-family: var(--font-head); font-weight: 760; }
.step-num { width: 32px; height: 32px; font-size: 1rem; color: var(--gold-text); border: 2px solid var(--gold); border-radius: 50%; }
.step-num .scribble, .stop-mark .scribble { display: none; }
.ring { font-size: 1.05rem; }
.thanks .thanks-line { font: 650 1.3rem/1.35 var(--font-head); letter-spacing: -.01em; color: var(--ink-2); }
.thanks .thanks-line .scribble { display: none; }

/* The one handwritten line left: the footer sign-off, in ledger green. */
.foot-made { color: var(--pen); }

/* ---------- Home and Explore, quick wins (design refresh, 7 Oct 2026) ---------- */
/* Cards: a bar you can see even at a few percent, a little more air between the parts. */
progress.progress { height: 8px; }
.card .amounts { margin-top: 12px; }
/* Phones: the home list shows its first four causes, then one link to all of them (same order, same data). */
.home-all-phone { display: none; }
@media (max-width: 640px) {
  .home-causes .cards > :nth-child(n+5) { display: none; }
  .home-all-phone { display: block; margin: 24px 0 0; text-align: center; }
}
/* Rows that scroll sideways on phones fade at the right edge, so it is clear there is more; the end can scroll clear of it. */
@media (max-width: 599px) {
  .home-pick-cats { padding-right: 36px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
}
@media (max-width: 899px) {
  .cat-tiles { padding-right: 40px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
}
/* Explore on narrow phones: the search field takes the whole width, so the hint is never cut; the button sits under it. */
@media (max-width: 480px) {
  .filters .search { flex-wrap: wrap; }
  .filters .search input { flex: 1 1 100%; min-width: 0; }
  .filters .search .btn { flex: 1 1 100%; }
}
/* Proof wall: the caption under a filed photo is a cause title, so it stays in normal case, easy to read. */
.proof-item .taped figcaption { font: 600 .86rem/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
/* /numbers: the big number stands on its own, no drawn ring around it. */
.circled .circle-mark { display: none; }
#trail-list + .list-more { margin-left: 62px; }
/* Supporter messages: "Translate" (8 Oct 2026, Services\MessageTranslations). The translation takes the message's place
   and reads like it (the q rule above); the link, the note and the quiet failure line are as small as "Report this
   message" beside them, with the same 25 px tap height. The anchor sits low enough that the message above stays in view. */
.supporters .sup-tr { scroll-margin-top: 10rem; }
.supporters .sup-tr a, .supporters .sup-tr-note, .supporters .sup-tr-fail { display: inline-block; padding: 5px 0; font: 500 .75rem/1.2 var(--font-body); color: var(--ink-3); }
.supporters .sup-tr a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.supporters .sup-tr a:hover { color: var(--ink); text-decoration-color: currentColor; }
.supporters .sup-tr a[aria-busy="true"] { cursor: progress; text-decoration: none; }
.supporters .sup-tr-fail:focus { outline: none; }
/* In the ledger list (design refresh, 8 Oct 2026) the tools line is a little smaller; the separator dot follows it. */
.supporters.ledger-path .sup-tr a, .supporters.ledger-path .sup-tr-note, .supporters.ledger-path .sup-tr-fail { padding: 3px 0; font-size: .74rem; }
.sup-msg-tools .sep { font-size: .74rem; color: var(--ink-3); }

/* ---------- In the press (8 Oct 2026): articles about a cause, text only, filed like the ledger rows ---------- */
.press-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.press-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.press-list li:focus { outline: none; }
.press-list li:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.press-meta { margin: 0 0 4px; font: 700 .76rem/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.press-meta .sep { color: var(--ink-3); }
.press-title { display: inline; font: 650 1.05rem/1.4 var(--font-head); letter-spacing: -.01em; color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line-input); text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.press-title:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.press-title .press-out { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -1px; color: var(--gold-text);
  -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.press-sec + section .list-more, .press-sec .list-more { margin-left: 0; }

/* ---------- Owner desk, "WhatsApp to send" (8 Oct 2026): one card per chat, read and sent on a phone ----------
   Open in WhatsApp takes the whole first row (the thumb's target), Copy and Mark sent share the second; Skip and Edit are
   folded away under them. 16 px text in the box so iOS never zooms in while typing. */
.wa-h { margin: 8px 0 0; font-size: 1.2rem; }
.wa-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wa-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; display: grid; gap: 12px; min-width: 0; scroll-margin-top: 6rem; }
.wa-card:target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.wa-top { min-width: 0; }
.wa-top h3 { margin: 0 0 2px; font-size: 1.12rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wa-top p { margin: 0; overflow-wrap: anywhere; }
.wa-meta { color: var(--ink-2); font-size: .92rem; }
.wa-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-why { margin-top: 6px !important; font-size: .93rem; color: var(--ink-2); }
.wa-lead, .wa-added, .wa-when { font-size: .84rem; color: var(--ink-3); margin-top: 4px !important; }
.wa-send { display: grid; gap: 10px; min-width: 0; }
.wa-send textarea { min-height: 200px; font-size: 1rem; line-height: 1.5; }
/* The whole message shows before it is sent: the box grows with its text (Chrome, Android), up to most of the screen. */
@supports (field-sizing: content) { .wa-send textarea { field-sizing: content; max-height: 75vh; } }
.wa-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.wa-actions .btn { padding: 0 12px; min-width: 0; white-space: nowrap; }
.wa-actions .wa-open { grid-column: 1 / -1; min-height: 54px; font-size: 1.05rem; }
.wa-send.is-opened .wa-mark { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.wa-small { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0; font-size: .84rem; color: var(--ink-3); }
.wa-small a { color: var(--ink-3); padding: 8px 0; }
.wa-small a:hover { color: var(--ink); }
.wa-small .btn-sm { margin-left: -16px; }
.wa-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.wa-count.is-over { color: var(--red); font-weight: 600; }
.wa-more { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 10px; }
.wa-fold { min-width: 0; }
.wa-fold[open] { flex-basis: 100%; }
.wa-fold > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 38px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.wa-fold > summary:hover { color: var(--ink); }
.wa-fold > .form { margin-top: 8px; gap: 14px; }
.wa-fold .grid-2 { gap: 14px; }
@media (min-width: 640px) { .wa-fold .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wa-done summary .small { font-weight: 400; }
.wa-cards-done .wa-card { padding: 14px 16px; gap: 8px; background: var(--surface-2); }
.wa-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; color: var(--ink-2); }
.wa-cards-done form { margin: 0; }
@media (max-width: 400px) { .wa-card { padding: 14px; } .wa-actions .btn { font-size: .95rem; } }

/* ==========================================================================================================
   Goal reached, 10 Oct 2026 (Services\GoalReached). A fully funded page carries the ledger-green stamp on its ticket,
   near the total; the "0% platform fee" line under the ticket stays, as plain small capitals, so a page still shows at
   most two stamps. The bar stays full and the percent keeps counting. The donor whose gift completed a page sees one
   stamp pressed once (never with reduced motion), and no extra confetti.
   ========================================================================================================== */
.give-funded { margin: 0 0 14px; }
.give-box .stamp-funded, .funded-panel .stamp-funded, .goal-done .stamp { --stamp-bg: var(--surface); font-size: .8rem; }
.give-note-plain { display: inline-block; font: 700 .74rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.extra-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.extra-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--pen); }
.extra-note span, .funded-note p, .funded-extra { min-width: 0; overflow-wrap: anywhere; }
.extra-note q, .funded-note q, .funded-extra q { font-style: normal; color: var(--ink); }
.funded-note { margin: 0 0 22px; }
/* Cards: the small stamp sits with the receipts chip above the bar, never over the photo. ".card p" clamps and clips
   paragraphs, so the stamped row undoes that (the stamp is turned a little and must not lose its corners). */
.card .card-proof.has-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 3px 0 0 2px;
  overflow: visible; -webkit-line-clamp: unset; }
.stamp-card { --stamp-bg: var(--surface); padding: 4px 8px 3px; font-size: .66rem; }
.stamp-card svg { width: 12px; height: 12px; }
/* Organiser dashboard: the panel with the two next steps, and a mark in the causes table. */
.funded-panel h2 { margin: 0 0 8px; }
.funded-panel p { margin: 0; }
.funded-panel .give-funded { margin: 0 0 16px; }
/* What donors see under Donate, set apart as their view of the page. */
.funded-extra { display: block; margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: .95rem; line-height: 1.5; }
.funded-steps { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 1.3em; }
.funded-steps li { padding-left: 2px; overflow-wrap: anywhere; }
.funded-mark { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: .8rem; font-weight: 650; color: var(--pen); white-space: nowrap; }
.funded-mark svg { width: 14px; height: 14px; }
/* Thank-you and receipt pages: "Your gift completed this cause". */
.goal-done { margin: 0 0 30px; padding: 24px 22px 20px; text-align: center; }
.goal-done-stamp { margin: 0 0 14px; }
.goal-done h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 1vw + 1.1rem, 1.7rem); letter-spacing: -.02em; }
.goal-done p { max-width: 46ch; margin: 0 auto 8px; overflow-wrap: anywhere; }
.goal-done p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .goal-done .stamp { -webkit-animation: stamp-press .45s cubic-bezier(.2, .7, .2, 1) .3s both; animation: stamp-press .45s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .thanks .goal-done .stamp { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
  @-webkit-keyframes stamp-press { from { opacity: 0; -webkit-transform: rotate(-2deg) scale(1.3); transform: rotate(-2deg) scale(1.3); } 60% { opacity: 1; } to { opacity: 1; -webkit-transform: rotate(-2deg) scale(1); transform: rotate(-2deg) scale(1); } }
  @keyframes stamp-press { from { opacity: 0; -webkit-transform: rotate(-2deg) scale(1.3); transform: rotate(-2deg) scale(1.3); } 60% { opacity: 1; } to { opacity: 1; -webkit-transform: rotate(-2deg) scale(1); transform: rotate(-2deg) scale(1); } }
}

/* Cause social links, 14 Oct 2026 (Services\CauseLinks, views/cause.php): the organiser's own Facebook page and Instagram as
   the last row of the organiser box, so it sits near the top of the page and the box's line closes under it. A short
   muted lead, like the checks line above it, then pills that carry only the brand name, so no long sentence ever sits
   in a pill (Canvas: phones break words inside pills). The two pills are one group, so they wrap together. The icons are our own line drawings in the page colour; nothing is
   loaded from Meta. Every rule is scoped to the organiser box. */
.organiser .organiser-social { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 0; }
.organiser .organiser-social-lead { margin-right: 4px; font-size: .875rem; line-height: 1.45; color: var(--ink-3); }
.organiser .organiser-social .organiser-social-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.organiser .organiser-social .btn { min-height: 44px; padding: 0 16px; font-size: .92rem; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.organiser .organiser-social .btn svg { width: 18px; height: 18px; }

/* Privacy version history, 14 Oct 2026 (views/legal/privacy*.php): the top of the policy keeps one short line that links
   here. One row per version, newest first, the current one marked with the green tag. Phones put the version and date
   above the sentence; from 720px they sit side by side, like a two-column table. */
.prose .version-history { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.prose .version-history li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.version-history .version-when { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: .92rem; }
.version-history .version-when b { color: var(--ink); }
.version-history .version-when .tag { margin-left: 2px; vertical-align: 1px; }
@media (min-width: 720px) { .prose .version-history li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; } .version-history .version-when { margin: 0; } }