/* ============================================
   HopePath — Design System
   ============================================ */

:root {
  /* HopePath palette — warm peach / lavender / cream + charcoal ink.
     Legacy var NAMES kept (--teal/--mint/--coral) for compatibility; they now
     hold the new palette values. */
  --teal: #2D3A4A;          /* Deep Slate */
  --teal-deep: #1E2630;     /* Charcoal Ink */
  --mint: #8D87A8;          /* Dusty Lavender */
  --mint-soft: #CDBECF;     /* Pale Lavender */
  --mint-deep: #5C5684;     /* Muted Indigo Lavender */
  --offwhite: #FAF4F0;      /* Warm Ivory */
  --offwhite-2: #F3EAE7;    /* warm pale cream */
  --coral: #DDA07A;         /* Soft Peach */
  --coral-soft: #F6CBB7;    /* Warm Peach */
  --coral-deep: #C77E4F;    /* deep peach (hovers / gradient depth) */
  --gray: #6B7280;
  --gray-soft: #9CA3AF;
  --gray-line: #EAE0E2;     /* warm hairline */
  --text: #1E2630;
  --text-soft: #6B7280;

  /* New palette tokens */
  --peach: #DDA07A;
  --peach-warm: #F6CBB7;
  --peach-cream: #FDDAC2;
  --lav-pale: #CDBECF;
  --cream: #FBF7F2;         /* Soft Cream */
  --ivory: #FAF4F0;         /* Warm Ivory */

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(30,38,48,.04), 0 2px 6px rgba(30,38,48,.04);
  --shadow: 0 2px 8px rgba(30,38,48,.05), 0 8px 24px rgba(30,38,48,.06);
  --shadow-lg: 0 4px 16px rgba(30,38,48,.06), 0 16px 48px rgba(30,38,48,.10);

  --container: 1200px;
  --header-h: 72px;
  --header-h-mobile: 60px;

  --ease: cubic-bezier(.4,.0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--offwhite);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); }

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) { .container { padding: 0 18px; } }

/* Typography */
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; color: var(--text); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { color: var(--text-soft); }
.lead { font-size: 1.1rem; color: var(--text-soft); font-weight: 500; }
.muted { color: var(--gray); }
.eyebrow { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-deep); }

/* ============================================
   Buttons — flat, clean, premium colors
   ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  border: 0;
  transition:
    transform .15s var(--ease),
    box-shadow .2s var(--ease),
    background .2s var(--ease),
    color .15s var(--ease),
    border-color .15s var(--ease);
}
.btn > svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-lg > svg { width: 20px; height: 20px; }
.btn-sm > svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }

/* Primary — Charcoal Blue, solid, flat */
.btn-primary {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(30,38,48,.08), 0 6px 16px rgba(45,58,74,.22);
}
.btn-primary:hover {
  background: var(--teal-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(30,38,48,.12), 0 12px 26px rgba(45,58,74,.28);
}

/* Secondary — same charcoal family */
.btn-secondary {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(30,38,48,.08), 0 6px 16px rgba(45,58,74,.22);
}
.btn-secondary:hover { background: var(--teal-deep); }

/* Ghost — clean outlined */
.btn-ghost {
  background: #fff;
  color: var(--teal-deep);
  border: 1.5px solid var(--gray-line);
}
.btn-ghost:hover {
  border-color: var(--mint);
  color: var(--teal-deep);
}

/* Soft Peach — donation / high-value CTA (flat, no glass) */
.btn-amber {
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(170,90,40,.10), 0 6px 18px rgba(199,126,79,.28);
}
.btn-amber:hover {
  background: var(--coral-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(170,90,40,.14), 0 12px 28px rgba(199,126,79,.32);
}
.btn-amber:active { transform: translateY(0); }

.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-sm { padding: 8px 18px; font-size: .85rem; }
.btn-block { width: 100%; }

/* Donation/sticky/summary CTAs — flat peach */
.donate-cta, .summary-cta, .sd-cta, .donations-empty .btn-primary {
  background: var(--coral) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(170,90,40,.10), 0 6px 18px rgba(199,126,79,.28) !important;
}
.donate-cta:hover, .summary-cta:hover, .sd-cta:hover, .donations-empty .btn-primary:hover {
  background: var(--coral-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(170,90,40,.14), 0 12px 28px rgba(199,126,79,.32) !important;
}

/* ============================================
   Header — floating glass navigation
   ============================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border: 0;
  padding-top: 14px;
  transition: padding-top .4s var(--ease);
  pointer-events: none; /* let clicks pass through the transparent gap */
}
.site-header > .container {
  pointer-events: auto;
  max-width: 1120px;
}
.header-inner,
.header-mobile {
  position: relative;
  background: rgba(250,244,240,.55);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 6px 24px rgba(30,38,48,.05);
  padding: 0 22px;
  transition:
    background .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease),
    -webkit-backdrop-filter .4s var(--ease),
    backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled .header-inner,
.site-header.is-scrolled .header-mobile {
  background: rgba(250,244,240,.72);
  -webkit-backdrop-filter: saturate(185%) blur(18px);
  backdrop-filter: saturate(185%) blur(18px);
  border-color: rgba(255,255,255,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 10px 32px rgba(30,38,48,.09);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  gap: 24px;
}
.header-inner .nav-links { justify-self: center; }
.header-inner .header-tools { justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--teal-deep); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.brand:hover { color: var(--teal); }
.brand-mark { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; display: block; }

/* HopePath wordmark — Cormorant serif with optional doorway icon */
.brand { gap: 8px; }
.wm-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(30,38,48,.06));
}
.wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.95rem; line-height: 1; letter-spacing: .002em; white-space: nowrap; display: inline-flex; }
.wordmark .wm-hope { color: var(--teal-deep); }
.wordmark .wm-path { color: #8D8AA8; }
.brand:hover .wordmark .wm-hope { color: var(--teal); }
@media (max-width: 900px) { .wordmark { font-size: 1.78rem; } .wm-icon { width: 26px; height: 26px; } }
.site-header { --header-h: 68px; }
.header-inner { height: 68px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  color: var(--text);
  font-weight: 500;
  font-size: .92rem;
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-links a:hover {
  background: rgba(141,138,168,.16);
  color: var(--teal-deep);
}
.nav-links a.active { color: var(--teal-deep); background: rgba(141,138,168,.12); }
.nav-links a.active::after { content: none; }

.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .18s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.icon-btn:hover { background: rgba(141,138,168,.20); color: var(--teal); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.icon-btn svg { width: 20px; height: 20px; }
.nav-search-active svg { animation: search-pulse .4s ease-out; }
@keyframes search-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.mobile-only { display: none; }
.desktop-only { display: inline-flex; }

@media (max-width: 900px) {
  .desktop-only.nav-links { display: none; }
  .mobile-only { display: inline-flex; }
  .site-header { padding-top: 10px; }
  .site-header > .container { padding: 0 14px; }
  .header-inner { height: var(--header-h-mobile); }
  .header-mobile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    height: var(--header-h-mobile);
    padding: 0 12px 0 16px;
    border-radius: 18px;
  }
  .header-mobile .header-tools { display: flex; align-items: center; gap: 4px; }
  .header-mobile .brand .wordmark { display: inline-flex; }
  .header-mobile .brand .brand-mark { width: 48px; height: 48px; }
  .header-desktop { display: none; }
}
@media (min-width: 901px) {
  .header-mobile { display: none; }
}

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(30,38,48,.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14vh 20px 20px;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-box {
  width: 100%; max-width: 640px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform .25s var(--ease);
}
.search-overlay.open .search-box { transform: translateY(0); }
.search-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--gray-line);
}
.search-input-wrap svg { width: 20px; height: 20px; color: var(--gray); }
.search-input-wrap input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 1.05rem; color: var(--text);
}
.search-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.search-result {
  display: flex; gap: 14px; padding: 12px; align-items: center;
  border-radius: var(--radius); cursor: pointer;
  transition: background .15s var(--ease);
}
.search-result:hover { background: var(--offwhite-2); }
.search-result img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.search-result-meta { font-size: .85rem; color: var(--gray); }
.search-empty { padding: 32px 24px; text-align: center; color: var(--text-soft); }
.search-empty p { margin: 0 0 18px; font-size: .95rem; }
.search-empty strong { color: var(--text); font-weight: 700; }
.search-empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Sidebar */
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(30,38,48,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: 300px; max-width: 84vw;
  background: var(--offwhite);
  box-shadow: -20px 0 40px rgba(30,38,48,.12);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
}
.sidebar.open { transform: translateX(0); }
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 18px;
}
.sidebar-head .brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--teal-deep);
}
.sidebar-head .sb-brand-text {
  display: inline;
  font-family: 'Cormorant Garamond', 'Inter', system-ui, serif;
  font-weight: 700;
  font-size: 1.35rem;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  line-height: 1;
}
.sidebar-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(141,138,168,.12);
  color: var(--teal-deep);
}
.sidebar-close:hover { background: rgba(141,138,168,.22); }
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 22px;
}
.sidebar-group {
  display: flex; flex-direction: column;
}
.sidebar-group:not(:first-child) {
  border-top: 1px solid rgba(227,225,234,.6);
  padding-top: 18px;
}
.sidebar-label {
  font-size: .76rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-deep);
  opacity: .65;
  padding: 0 10px 10px;
}
.sidebar-group nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-group nav a {
  display: block;
  padding: 11px 12px;
  font-size: .98rem; font-weight: 500;
  color: var(--text);
  border-radius: 10px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar-group nav a:hover {
  background: rgba(141,138,168,.16);
  color: var(--teal-deep);
}
.sidebar-cta {
  padding: 16px 18px 20px;
  border-top: 1px solid rgba(227,225,234,.6);
  background: linear-gradient(180deg, transparent, rgba(141,138,168,.06));
}
.sidebar-cta .btn { padding: 13px 22px; font-weight: 700; }
.sidebar-foot {
  margin-top: 12px;
  color: var(--gray);
  font-size: .78rem;
  text-align: center;
}

body.no-scroll { overflow: hidden; }
.page-blur { transition: filter .25s var(--ease); }
body.sidebar-open .page-blur { filter: blur(4px); pointer-events: none; user-select: none; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal-deep); color: #fff;
  padding: 10px 16px; border-radius: 0 0 12px 0;
  font-weight: 700; font-size: .9rem;
  z-index: 100;
}
.skip-link:focus { left: 0; outline: 2px solid var(--mint); outline-offset: 2px; }

/* ============================================
   Hero — clean two-zone layout
   ============================================ */
.hero {
  position: relative;
  padding: clamp(16px, 3vw, 40px) 0 clamp(36px, 5vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 90% 0%, rgba(141,138,168,.18), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(221,160,122,.10), transparent 70%),
    var(--offwhite);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.hero-content { max-width: 560px; }
.hero h1 { margin-bottom: 12px; }
.hero h1 .accent { color: var(--mint-deep); }
.hero .lead { max-width: 520px; margin-bottom: 20px; color: var(--text); opacity: .82; font-weight: 500; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-trust {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 16px;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-soft); font-size: .85rem; font-weight: 500;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(141,138,168,.25);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hero-trust li svg { flex-shrink: 0; }

.hero .container { position: relative; z-index: 1; }

/* Organic "path forward" line drifting in the background */
.hero-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; }
.hero-path-line { animation: hero-path-drift 9s linear infinite; }
@keyframes hero-path-drift { to { stroke-dashoffset: -180; } }

.hero-art {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  animation: float-y 8s ease-in-out infinite;
}
.hero-art::before {
  content: ''; position: absolute; inset: -6% -4% -8% -6%;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(141,138,168,.30), transparent 65%),
    radial-gradient(50% 50% at 20% 90%, rgba(221,160,122,.18), transparent 65%);
  filter: blur(26px);
  z-index: 0;
}
.hero-photo {
  position: relative;
  z-index: 1;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 2px 8px rgba(30,38,48,.08), 0 18px 44px rgba(30,38,48,.14);
  border: 1px solid rgba(255,255,255,.6);
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.hero-photo:hover img { transform: scale(1.04); }

/* Floating trust / impact cards */
.hero-float {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid rgba(141,138,168,.18);
  border-radius: 16px;
  padding: 11px 14px;
  box-shadow: 0 2px 6px rgba(30,38,48,.05), 0 14px 30px rgba(30,38,48,.12);
  max-width: 220px;
}
.hero-float-1 { top: 24px; left: -26px; animation: float-y 6s ease-in-out infinite; }
.hero-float-2 { bottom: 28px; right: -24px; animation: float-y 7.5s ease-in-out infinite .9s; }
.hf-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.hf-icon svg { width: 18px; height: 18px; }
.hf-icon-green { background: rgba(141,138,168,.16); color: var(--mint-deep); }
.hf-icon-teal { background: rgba(45,58,74,.12); color: var(--teal); }
.hf-body { display: flex; flex-direction: column; line-height: 1.2; }
.hf-body strong { font-size: .82rem; color: var(--teal-deep); font-weight: 800; letter-spacing: -.01em; }
.hf-body span { font-size: .72rem; color: var(--gray); }

@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-float, .hero-path-line { animation: none; }
}

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-art { order: -1; max-width: 330px; }
  .hero-float { display: none; }
}

/* ============================================
   Sections — compact rhythm
   ============================================ */
section { padding: clamp(32px, 4.5vw, 60px) 0; }
.section-head { margin-bottom: 20px; max-width: 720px; }
.section-head h2 { margin-bottom: 6px; }
.section-head .lead { font-size: .98rem; }

/* ============================================
   Active Fundraisers — editorial layout
   ============================================ */
.active-fundraisers {
  background:
    radial-gradient(60% 50% at 90% 0%, rgba(141,138,168,.12), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(233,231,239,.18), transparent 70%),
    var(--offwhite);
}
.active-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; margin-bottom: 24px;
}
.active-head-text { max-width: 540px; }
.active-head-text h2 { margin-bottom: 4px; }
.active-head-text .lead { font-size: .96rem; }
.active-categories-wrap { position: relative; }
.active-view-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 600; color: var(--teal);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(141,138,168,.3);
  transition: background .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer;
  font-family: inherit;
}
.active-view-all:hover { background: #fff; border-color: var(--teal); }
.active-view-all svg { transition: transform .2s var(--ease); }
.active-view-all.open svg { transform: rotate(180deg); }

.categories-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(141,138,168,.10), transparent 70%),
    linear-gradient(180deg, var(--offwhite) 0%, var(--offwhite-2) 100%);
  border-radius: 24px;
  border: 1px solid rgba(141,138,168,.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 12px 32px rgba(30,38,48,.18),
    0 32px 80px rgba(30,38,48,.22);
  padding: 22px 20px 20px;
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 80;
  animation: cat-pop .28s var(--ease);
}
@keyframes cat-pop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.categories-panel[hidden] { display: none; }

/* Close button (top-left) — plain X */
.cat-panel-close {
  position: absolute;
  top: 14px; left: 14px;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  opacity: .7;
  transition: opacity .15s var(--ease);
}
.cat-panel-close:hover { opacity: 1; }
.cat-panel-close svg { width: 18px; height: 18px; }

/* Header */
.cat-panel-head { text-align: center; margin-bottom: 18px; }
.cat-panel-head h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.cat-panel-head p {
  font-size: .82rem;
  color: var(--gray);
  margin: 0;
}

/* Grid of category tiles */
.cat-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.7);
  color: var(--text);
  font-size: .85rem; font-weight: 600;
  text-align: center;
  transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease), color .15s var(--ease);
  text-decoration: none;
}
.cat-tile:hover, .cat-tile:focus-visible {
  background: linear-gradient(160deg, rgba(141,138,168,.18), rgba(141,138,168,.06));
  border-color: rgba(141,138,168,.45);
  color: var(--teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(141,138,168,.20);
}
.cat-tile:active { transform: translateY(0); }
.cat-tile-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(141,138,168,.22), rgba(141,138,168,.08));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.cat-tile-icon svg { width: 18px; height: 18px; }
.cat-tile:hover .cat-tile-icon { background: linear-gradient(135deg, var(--mint), var(--mint-deep)); color: #fff; }
.cat-tile-label { font-weight: 600; line-height: 1.2; }

/* All campaigns CTA — kept dark, full width */
.cat-chip-all {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  margin-top: 12px;
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 6px 16px rgba(30,38,48,.20);
}
.cat-chip-all:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(30,38,48,.28);
  color: #fff;
}
.cat-chip-all svg { width: 14px; height: 14px; }

/* Backdrop — softer dark teal */
body.cat-panel-open::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(30,38,48,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 75;
  animation: fade-in .25s ease;
}

/* Uniform 3-card grid */
.active-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .active-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 600px) { .active-grid { grid-template-columns: 1fr; } }

/* Featured layout when there are very few campaigns */
@media (min-width: 901px) {
  .active-grid.count-1 { grid-template-columns: 1.4fr 1fr; }
  .active-grid.count-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .active-grid.count-1, .active-grid.count-2 { grid-template-columns: 1fr; }
}

.active-more-soon {
  background: linear-gradient(160deg, rgba(141,138,168,.18), rgba(250,244,240,.5) 70%);
  border: 1px dashed rgba(141,138,168,.45);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
.active-more-soon h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; line-height: 1.18; margin: 0 0 8px;
  color: var(--teal-deep);
}
.active-more-soon p { color: var(--gray); margin: 0 0 18px; font-size: .92rem; }
.active-more-soon .btn { align-self: flex-start; }
@media (max-width: 900px) {
  .active-more-soon { padding: 24px 20px; }
}

.active-editorial {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) {
  .active-editorial { grid-template-columns: 1fr; gap: 16px; }
  .active-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .active-view-all { align-self: flex-start; }
}

/* Featured card */
.featured-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(227,225,234,.55);
  box-shadow: 0 2px 6px rgba(30,38,48,.04), 0 16px 44px rgba(30,38,48,.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 3px 8px rgba(30,38,48,.05), 0 22px 56px rgba(30,38,48,.12); }
.featured-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--offwhite-2);
}
.featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.featured-card:hover .featured-media img { transform: scale(1.03); }
.featured-cat {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.95); color: var(--teal-deep);
  padding: 7px 13px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(30,38,48,.08);
}
.featured-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.featured-title {
  font-size: clamp(1.18rem, 2.5vw, 1.35rem);
  line-height: 1.22;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.015em;
}
.featured-org { font-size: .88rem; color: var(--gray); }
.featured-progress { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.featured-progress .progress-bar { height: 7px; }
.featured-progress .progress-fill { background: linear-gradient(90deg, var(--coral), var(--coral-deep)); }
.featured-stats {
  display: flex; gap: 8px; align-items: baseline;
  font-size: .92rem;
}
.featured-stats .raised { font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.featured-stats .of { color: var(--gray); font-size: .8rem; font-weight: 500; }
.featured-stats .pct { margin-left: auto; color: var(--mint-deep); font-weight: 800; }
.featured-impact {
  font-size: .82rem;
  color: var(--coral-deep);
  padding: 10px 14px;
  background: rgba(221,160,122,.10);
  border-radius: 12px;
  border-left: 3px solid var(--coral);
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
  margin-top: 4px;
}
.featured-impact::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(221,160,122,.25);
}

/* Mini stack — 2 compact horizontal cards */
.mini-stack { display: flex; flex-direction: column; gap: 14px; }
.mini-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(227,225,234,.6);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 6px 16px rgba(30,38,48,.04);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration: none;
  color: inherit;
  min-height: 116px;
}
.mini-row:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(30,38,48,.04), 0 10px 22px rgba(30,38,48,.07); }
.mini-row-media {
  position: relative;
  background: var(--offwhite-2);
  overflow: hidden;
}
.mini-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-row-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.mini-row-cat {
  display: inline-block;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mint-deep);
  width: max-content;
}
.mini-row-title {
  font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-row-progress { margin-top: 4px; }
.mini-row-progress .progress-bar { height: 4px; }
.mini-row-stats {
  display: flex; justify-content: space-between;
  font-size: .78rem; margin-top: 4px;
  color: var(--text-soft);
}
.mini-row-stats span:first-child { font-weight: 700; color: var(--text); }
.mini-row-stats .pct { color: var(--mint-deep); font-weight: 700; }

/* Mobile tweaks */
@media (max-width: 540px) {
  .featured-title { font-size: 1.1rem; }
  .featured-body { padding: 16px 18px 18px; gap: 10px; }
  .featured-media { aspect-ratio: 16/10; }
  .mini-row { grid-template-columns: 96px 1fr; min-height: 100px; }
  .mini-row-body { padding: 12px 14px; }
  .mini-row-title { font-size: .88rem; }
}

/* Fallback (broken image) */
.featured-media.img-broken,
.mini-row-media.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.30), rgba(221,160,122,.20));
  position: relative;
}
.featured-media.img-broken::before,
.mini-row-media.img-broken::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3A4A' stroke-width='1.4' stroke-linecap='round' opacity='.55'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/><path d='m21 16-4-4-8 8'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 32px;
}
.featured-media.img-broken::after,
.mini-row-media.img-broken::after {
  content: attr(data-category);
  position: absolute; bottom: 16%; left: 0; right: 0; text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); opacity: .7;
}

/* Filters */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.chip {
  padding: 9px 16px; border-radius: 999px;
  background: #fff; color: var(--text-soft);
  border: 1.5px solid var(--gray-line);
  font-size: .88rem; font-weight: 500;
  transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Campaign grid */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-cards { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  display: flex; flex-direction: column;
  cursor: pointer;
  border: 1px solid rgba(227,225,234,.6);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-media {
  position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--offwhite-2);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-cat {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--teal-deep);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body .card-title { font-size: 1rem; line-height: 1.28; font-weight: 700; }
.card-body .card-org { font-size: .82rem; color: var(--gray); margin-bottom: 4px; }
.card-body .card-progress { gap: 6px; margin-top: 2px; }
.card-body .card-stats { font-size: .85rem; }
.card-title {
  font-size: 1.08rem; font-weight: 700; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-org { font-size: .85rem; color: var(--gray); }
.card-progress {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.progress-bar {
  height: 6px; background: var(--gray-line); border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 999px;
  transition: width .6s var(--ease);
}
.card-stats { display: flex; justify-content: space-between; font-size: .85rem; }
.card-stats .raised { font-weight: 700; color: var(--text); }
.card-stats .pct { color: var(--mint-deep); font-weight: 700; }
.card-impact { font-size: .82rem; color: var(--coral-deep); font-style: italic; }

/* ============================================
   How it works — dark teal section
   ============================================ */
/* How it works — minimalist, monochromatic */
.how-section {
  background: var(--offwhite);
  color: var(--text);
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  margin: 16px 14px;
  border: 1px solid var(--gray-line);
}
@media (max-width: 540px) {
  .how-section { border-radius: 24px; margin: 12px 10px; }
}
.how-section .section-head h2 { color: var(--teal-deep); }
.how-section .section-head .lead { color: var(--text-soft); }
.how-section .section-head .eyebrow { color: var(--mint-deep); }
.howit-wrap { display: flex; flex-direction: column; gap: 22px; max-width: 880px; margin: 0 auto; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: 10px; }
}
.step-card {
  position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(227,225,234,.6);
  cursor: pointer;
  transition: all .2s var(--ease);
  overflow: hidden;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
}
.step-card h4 { color: var(--teal-deep); }
.step-card p { color: var(--text-soft); }
.step-card .step-num {
  background: var(--offwhite-2);
  color: var(--teal-deep);
}

/* ============================================
   How it Works — v2 (phone animation + steps)
   ============================================ */
.howit-section { padding-top: 4px; padding-bottom: 28px; }
.howit-section + section { padding-top: 16px; }
.howit-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 880px) {
  .howit-stage { grid-template-columns: 320px 1fr; gap: 48px; }
}

.phone-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}
@media (min-width: 880px) {
  .phone-col { position: sticky; top: 80px; align-self: start; }
}
.phone-progress {
  width: 100%;
  max-width: 300px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
}
.phone-progress .pp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.phone-progress .pp-eyebrow {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint-deep);
  white-space: nowrap;
}
.phone-progress .pp-label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  text-align: right;
  flex: 1; min-width: 0;
}
.phone-progress .pp-dots {
  display: flex; gap: 6px;
}
.phone-progress .pp-dot {
  flex: 1; height: 4px;
  background: rgba(141,138,168,.18);
  border-radius: 999px;
  transition: background .3s var(--ease);
}
.phone-progress .pp-dot.is-active {
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
.phone-progress .pp-bar {
  height: 3px;
  background: rgba(141,138,168,.12);
  border-radius: 999px;
  overflow: hidden;
  display: none; /* dots replace it visually; keep for transition fill use */
}
.phone-progress .pp-fill { display: none; }

/* Phone frame */
.phone-frame {
  position: relative;
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 9 / 18;
  background: linear-gradient(160deg, #2D3A4A, #1E2630);
  border-radius: 38px;
  padding: 12px 10px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 24px 50px rgba(30,38,48,.22),
    0 8px 18px rgba(30,38,48,.18);
}
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 18px;
  background: #161C24;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone-status {
  position: absolute; top: 14px; left: 0; right: 0;
  z-index: 4;
  padding: 3px 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .58rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}
.phone-status-right { display: inline-flex; align-items: center; gap: 5px; }
.ps-sig {
  width: 12px; height: 8px;
  background:
    linear-gradient(to top, currentColor 30%, transparent 30%) 0 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 50%, transparent 50%) 3px 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 70%, transparent 70%) 6px 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 100%, transparent 0) 9px 0 / 2px 100% no-repeat;
}
.ps-bat {
  width: 16px; height: 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
  background: linear-gradient(to right, currentColor 70%, transparent 70%);
  background-clip: content-box;
  padding: 1px;
}
.ps-bat::after {
  content: ''; position: absolute;
  right: -3px; top: 2px;
  width: 2px; height: 3px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}
.phone-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 4px;
  background: rgba(255,255,255,.45);
  border-radius: 4px;
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--offwhite);
  border-radius: 28px;
  overflow: hidden;
}

/* Scenes shared — slide + opacity + child stagger */
.scene {
  position: absolute; inset: 0;
  padding: 36px 14px 22px;
  opacity: 0;
  transform: translateX(28px) scale(.98);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  display: flex; flex-direction: column;
  gap: 10px;
}
.scene.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.scene.is-leaving {
  opacity: 0;
  transform: translateX(-28px) scale(.98);
}
/* Stagger children entrance when scene becomes active */
.scene.is-active > * {
  animation: sceneIn .55s var(--ease) both;
}
.scene.is-active > *:nth-child(2) { animation-delay: .08s; }
.scene.is-active > *:nth-child(3) { animation-delay: .16s; }
.scene.is-active > *:nth-child(4) { animation-delay: .24s; }
.scene.is-active > *:nth-child(5) { animation-delay: .32s; }
.scene.is-active > *:nth-child(6) { animation-delay: .40s; }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.sc-lbl {
  font-size: .54rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-deep);
}

/* Cursor — animated pointer that mimics user interaction */
.scene-cursor {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 6;
  filter: drop-shadow(0 3px 6px rgba(30,38,48,.35));
  pointer-events: none;
  opacity: 0;
}
.scene-cursor svg { display: block; width: 100%; height: 100%; }
.scene-cursor .scene-ripple {
  position: absolute; left: -10px; top: -10px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid var(--mint-deep);
  background: rgba(141,138,168,.12);
  opacity: 0;
  pointer-events: none;
}
@keyframes tapPulse {
  0% { transform: scale(1); }
  40% { transform: scale(.78); }
  100% { transform: scale(1); }
}
@keyframes ripplePop {
  0% { transform: scale(.3); opacity: .9; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Scene 1 cursor: from search to top card */
.scene-browse.is-active .s1-cursor {
  animation: s1Move 3.6s cubic-bezier(.45,.05,.25,1) .2s 1 forwards,
             tapPulse .45s ease-out 2s 1;
  opacity: 1;
}
.scene-browse.is-active .s1-cursor .scene-ripple {
  animation: ripplePop .9s ease-out 1.95s 1 both;
}
@keyframes s1Move {
  0%   { left: 22%; top: 16%; }
  35%  { left: 60%; top: 16%; }
  100% { left: 55%; top: 42%; }
}

/* Scene 2 cursor: down to Support button */
.scene-story.is-active .s2-cursor {
  animation: s2Move 3.6s cubic-bezier(.45,.05,.25,1) .2s 1 forwards,
             tapPulse .45s ease-out 2.6s 1;
  opacity: 1;
}
.scene-story.is-active .s2-cursor .scene-ripple {
  animation: ripplePop .9s ease-out 2.55s 1 both;
}
@keyframes s2Move {
  0%   { left: 60%; top: 30%; }
  100% { left: 55%; top: 72%; }
}

/* Scene 3 cursor: tap $100, then Donate */
.scene-amount.is-active .s3-cursor {
  animation: s3Move 3.6s cubic-bezier(.45,.05,.25,1) .2s 1 forwards,
             tapPulse .4s ease-out 1.3s 2;
  opacity: 1;
}
.scene-amount.is-active .s3-cursor .scene-ripple {
  animation: rippleTwice 3.6s ease-out .6s 1 both;
}
@keyframes s3Move {
  0%   { left: 18%; top: 55%; }
  35%  { left: 55%; top: 55%; }
  100% { left: 55%; top: 88%; }
}
@keyframes rippleTwice {
  0%  { opacity: 0; transform: scale(.3); }
  18% { opacity: .9; transform: scale(.7); }
  32% { opacity: 0; transform: scale(1.4); }
  60% { opacity: 0; transform: scale(.3); }
  78% { opacity: .9; transform: scale(.7); }
  92% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; }
}

/* Scene 4 cursor: press Confirm */
.scene-confirm.is-active .s4-cursor {
  animation: s4Move 3s cubic-bezier(.45,.05,.25,1) .6s 1 forwards,
             tapPulse .45s ease-out 2.4s 1;
  opacity: 1;
}
.scene-confirm.is-active .s4-cursor .scene-ripple {
  animation: ripplePop .9s ease-out 2.35s 1 both;
}
@keyframes s4Move {
  0%   { left: 55%; top: 55%; }
  100% { left: 55%; top: 88%; }
}

/* Scene 5 cursor: sweep across share icons */
.scene-thanks.is-active .s5-cursor {
  animation: s5Move 3.6s cubic-bezier(.45,.05,.25,1) .8s 1 forwards;
  opacity: 1;
}
.scene-thanks.is-active .s5-cursor .scene-ripple {
  animation: rippleSweep 3.6s ease-out 1s 1 both;
}
@keyframes s5Move {
  0%   { left: 18%; top: 82%; }
  25%  { left: 35%; top: 82%; }
  50%  { left: 52%; top: 82%; }
  75%  { left: 68%; top: 82%; }
  100% { left: 82%; top: 82%; }
}
@keyframes rippleSweep {
  0%, 25%, 50%, 75% { opacity: .9; transform: scale(.55); }
  12%, 37%, 62%, 87%, 100% { opacity: 0; transform: scale(1.4); }
}

/* Scene 1 — Browse */
.sb-header { padding: 4px 2px 6px; display: flex; flex-direction: column; gap: 6px; }
.sb-search {
  background: #fff; border: 1px solid rgba(227,225,234,.7);
  border-radius: 999px;
  padding: 7px 12px;
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem; color: var(--gray);
}
.sb-search svg { width: 12px; height: 12px; }
.sb-typing { position: relative; color: var(--text); font-weight: 600; }
.sb-typing::after { content: '|'; animation: blink 1s steps(2) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.sb-chips { display: flex; gap: 4px; overflow: hidden; }
.sb-chip {
  font-size: .54rem; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
  background: var(--offwhite-2);
  color: var(--text-soft);
  white-space: nowrap;
}
.sb-chip.is-on {
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: #fff;
}
.sb-list { display: flex; flex-direction: column; gap: 6px; }
.sb-row {
  background: #fff; border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(227,225,234,.6);
  display: flex; gap: 8px;
  font-size: .66rem;
  align-items: center;
}
.sb-row-pop {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.18);
  transform: translateY(-1px);
  transition: all .3s var(--ease);
}
.sb-img {
  width: 44px; height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.18));
}
.sb-img-medical { background: linear-gradient(135deg, #c6948a, #8f5a52); }
.sb-img-emergency { background: linear-gradient(135deg, #b69e7a, #6e5b3f); }
.sb-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sb-cat {
  align-self: flex-start;
  padding: 2px 6px; border-radius: 999px;
  font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.sb-title {
  font-weight: 700; color: var(--teal-deep);
  line-height: 1.25; font-size: .62rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-pct {
  font-size: .54rem; color: var(--mint-deep); font-weight: 700;
}
.sb-mini-bar {
  height: 3px;
  background: rgba(141,138,168,.18);
  border-radius: 999px;
  margin: 1px 0;
  overflow: hidden;
}
.sb-mini-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
.sb-img-edu { background: linear-gradient(135deg, #a8b5c7, #5e6e85); }
.scene-cursor { position: relative; }
.scene-ripple {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(141,138,168,.6);
  opacity: 0;
  animation: rippleOut 1.6s ease-out infinite;
}
@keyframes rippleOut {
  0% { transform: scale(.7); opacity: .7; }
  100% { transform: scale(2); opacity: 0; }
}

/* Scene 2 — Story */
.sc-cover {
  height: 90px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(30,38,48,.05), rgba(30,38,48,.25)),
    linear-gradient(135deg, #c6948a, #8f5a52);
  margin-bottom: 4px;
  position: relative;
}
.sc-cover::after { display: none; }
.sc-org { display: flex; align-items: center; gap: 8px; padding: 2px 2px; }
.sc-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .7rem;
}
.sc-name { font-weight: 700; font-size: .76rem; color: var(--teal-deep); }
.sc-story { font-size: .62rem; line-height: 1.5; color: var(--text-soft); padding: 0 2px; }
.sc-story p { margin: 0 0 4px; }
.sc-progress { margin-top: auto; padding: 0 2px; }
.sc-bar {
  height: 5px; background: rgba(141,138,168,.20);
  border-radius: 999px; overflow: hidden;
}
.sc-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
.sc-meta { font-size: .6rem; color: var(--text-soft); margin-top: 4px; }
.sc-meta b { color: var(--teal-deep); }
.sc-title-overlay {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.sc-cover { position: relative; }
.sc-loc { color: var(--gray); font-weight: 500; }
.sc-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .6rem;
  color: var(--text-soft);
  margin-top: 4px;
}
.sc-meta-row b { color: var(--teal-deep); font-weight: 800; }
.sc-meta-row .sc-pct { color: var(--mint-deep); font-weight: 700; }
.sc-support-btn {
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: var(--teal-deep);
  font-weight: 800; font-size: .7rem;
  padding: 8px 12px;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(141,138,168,.30);
}
.sc-supporters {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px;
}
.sc-supporters .sc-lbl { margin-bottom: 2px; }
.sc-sup-row {
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .6rem;
  color: var(--text);
}
.sc-sup-av {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .55rem;
  flex-shrink: 0;
}
.sc-sup-av-1 { background: linear-gradient(135deg, var(--mint), var(--mint-deep)); color: #fff; }
.sc-sup-av-2 { background: linear-gradient(135deg, var(--coral), #b6754f); color: #fff; }
.sc-sup-amt { margin-left: auto; font-weight: 800; color: var(--teal-deep); font-size: .58rem; }

/* Scene 3 — Amount */
.sa-head {
  padding: 0 2px 2px;
  display: flex; flex-direction: column; gap: 2px;
}
.sa-head b { font-size: .8rem; color: var(--teal-deep); letter-spacing: -.01em; }
.sa-head .sa-sub { font-size: .6rem; color: var(--text-soft); font-weight: 500; }
.sa-mini-camp {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 10px;
  padding: 6px;
}
.sa-mini-img {
  width: 32px; height: 32px;
  border-radius: 7px;
  flex-shrink: 0;
}
.sa-mini-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sa-mini-lbl {
  font-size: .5rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mint-deep);
}
.sa-mini-title {
  font-weight: 700; font-size: .64rem;
  color: var(--teal-deep);
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sa-helper {
  font-size: .58rem;
  color: var(--text-soft);
  text-align: center;
  font-style: italic;
  margin-top: 2px;
}
.sa-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.sa-amt {
  background: #fff;
  border: 1.5px solid rgba(227,225,234,.7);
  border-radius: 10px;
  padding: 10px 4px;
  font-weight: 800; font-size: .78rem;
  color: var(--text);
  position: relative;
}
.sa-amt.sa-pop {
  background: linear-gradient(160deg, rgba(141,138,168,.30), rgba(141,138,168,.10));
  border-color: var(--mint-deep);
  color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.18);
}
.scene-amount.is-active .sa-pop { animation: amtPulse 1.6s ease-in-out 1s infinite; }
@keyframes amtPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(141,138,168,.18); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(141,138,168,.30); transform: scale(1.04); }
}
.scene-amount.is-active .sa-cta { animation: ctaPress 1.8s ease-in-out 1.6s infinite; }
@keyframes ctaPress {
  0%, 90%, 100% { transform: scale(1); }
  92% { transform: scale(.96); }
  95% { transform: scale(1); }
}
.sa-badge {
  position: absolute; top: -6px; right: 4px;
  background: var(--coral); color: #fff;
  font-size: .44rem; font-weight: 800;
  padding: 2px 5px; border-radius: 999px;
  letter-spacing: .06em; text-transform: uppercase;
}
.sa-cta {
  margin-top: auto;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: var(--teal-deep);
  font-weight: 800; font-size: .8rem;
  padding: 11px 14px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 12px rgba(141,138,168,.35);
}
.sa-cta svg { width: 13px; height: 13px; }

/* Scene 4 — Confirm */
.sc-back { font-size: .66rem; color: var(--teal); font-weight: 700; padding: 2px; }
.sc-back-row { display: flex; align-items: center; gap: 8px; }
.sc-rev-title {
  font-size: .76rem; font-weight: 800; color: var(--teal-deep);
  letter-spacing: -.01em;
  flex: 1;
}
.sc-supporting {
  background: #fff; border: 1px solid rgba(227,225,234,.7);
  border-radius: 12px; padding: 8px;
  display: flex; gap: 8px; align-items: center;
}
.sc-supporting-img {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #c6948a, #8f5a52);
  flex-shrink: 0;
}
.sc-sup-title {
  font-size: .7rem; font-weight: 700; color: var(--teal-deep);
  line-height: 1.25; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-rev {
  background: #fff; border: 1px solid rgba(227,225,234,.7);
  border-radius: 12px;
  padding: 4px 12px;
}
.sc-rev-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: .68rem;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(227,225,234,.5);
}
.sc-rev-row:last-child { border-bottom: 0; }
.sc-rev-total b { color: var(--teal-deep); font-size: .92rem; }
.sa-cta-confirm { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; }
.sc-trust {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  font-size: .6rem; color: var(--mint-deep); font-weight: 700;
  background: rgba(141,138,168,.14);
  padding: 4px 10px; border-radius: 999px;
}
.sc-trust svg { width: 11px; height: 11px; }

/* Scene 5 — Thanks */
.scene-thanks { align-items: center; justify-content: center; text-align: center; padding-top: 48px; }
.st-check {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: 0 6px 16px rgba(141,138,168,.40), 0 0 0 6px rgba(141,138,168,.16);
}
.st-check svg { width: 26px; height: 26px; }
.scene-thanks.is-active .st-check { animation: checkPop .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes checkPop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.st-ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--mint-deep);
  opacity: 0;
}
.scene-thanks.is-active .st-ring { animation: ringPulse 1.8s ease-out .5s infinite; }
@keyframes ringPulse {
  0% { opacity: .55; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.6); }
}
.scene-thanks.is-active .st-soc {
  opacity: 0; transform: translateY(8px);
  animation: socIn .45s var(--ease) both;
  animation-delay: calc(.55s + var(--d) * .08s);
}
@keyframes socIn {
  to { opacity: 1; transform: translateY(0); }
}
.st-donated-card {
  display: flex; gap: 8px; align-items: center;
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 12px;
  padding: 8px;
  text-align: left;
}
.st-donated-img {
  width: 42px; height: 42px;
  border-radius: 8px;
  flex-shrink: 0;
}
.st-donated-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-donated-title {
  font-weight: 700; font-size: .64rem;
  color: var(--teal-deep);
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-donated-bar {
  height: 3px;
  background: rgba(141,138,168,.2);
  border-radius: 999px;
  overflow: hidden;
}
.st-donated-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
.st-donated-amt { font-size: .56rem; color: var(--text-soft); }
.st-donated-amt b { color: var(--teal-deep); font-weight: 800; font-size: .68rem; }
.st-title {
  font-size: .96rem; font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  line-height: 1.2;
  padding: 0 8px;
}
.st-sub { font-size: .66rem; color: var(--text-soft); padding: 0 12px; }
.st-share { margin-top: 6px; }
.st-share-lbl { font-size: .58rem; color: var(--gray); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.st-socials { display: flex; justify-content: center; gap: 10px; }
.st-soc {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--offwhite-2);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.st-soc svg { width: 14px; height: 14px; }

/* Steps list (numbered cards) */
.howit-steps {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
  counter-reset: hstep;
  padding: 0;
  margin: 0;
}
.hstep {
  background: #fff;
  border: 1px solid rgba(227,225,234,.65);
  border-radius: 18px;
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
}
.hstep:hover { border-color: rgba(141,138,168,.45); background: rgba(141,138,168,.04); }
.hstep.is-active {
  border-color: var(--mint-deep);
  background: linear-gradient(160deg, rgba(141,138,168,.16), rgba(141,138,168,.04) 65%, #fff);
  box-shadow: 0 0 0 3px rgba(141,138,168,.18), 0 10px 24px rgba(141,138,168,.18);
}
.hstep-head {
  display: flex; align-items: center; gap: 12px;
}
.hstep-num {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--offwhite-2);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .92rem;
  border: 1px solid rgba(227,225,234,.7);
  transition: all .2s var(--ease);
}
.hstep.is-active .hstep-num {
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: #fff;
  border-color: transparent;
}
.hstep-icon {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  background: rgba(141,138,168,.16);
  border-radius: 8px;
  color: var(--teal-deep);
  flex-shrink: 0;
}
.hstep-icon svg { width: 15px; height: 15px; }
.hstep h4 {
  font-size: 1.02rem;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
  flex: 1; min-width: 0;
}
.hstep p {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}
.hstep-foot {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 2px;
}
.hstep-tag {
  font-size: .7rem; font-weight: 700;
  color: var(--text-soft);
  background: var(--offwhite-2);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.hstep.is-active .hstep-tag {
  background: rgba(141,138,168,.18);
  color: var(--teal-deep);
}

/* Role cards */
.role-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 760px) {
  .role-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.role-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(30,38,48,.025), 0 10px 28px rgba(30,38,48,.05);
}
.role-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal-deep);
  margin-bottom: 14px;
}
.role-icon svg { width: 24px; height: 24px; }
.role-icon-donor { background: rgba(141,138,168,.18); }
.role-icon-org { background: rgba(221,160,122,.16); color: var(--coral-deep); }
.role-eyebrow {
  display: inline-block;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-deep);
  margin-bottom: 4px;
}
.role-icon-org + .role-eyebrow { color: var(--coral-deep); }
.role-card h3 {
  font-size: 1.18rem;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  margin: 0 0 8px;
  line-height: 1.25;
}
.role-card > p {
  font-size: .92rem; color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 14px;
}
.role-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid rgba(227,225,234,.6);
  padding-top: 14px;
}
.role-list li {
  font-size: .86rem; color: var(--text);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.role-list li::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint-deep);
  flex-shrink: 0;
}

/* Secondary CTA button (used on dark CTA band) */
.btn-cta-secondary {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn-cta-secondary:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); color: #fff; transform: translateY(-1px); }

/* How it Works CTA polish */
.howit-section + section .cta-band { margin-top: 12px; }
.cta-band .hero-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cta-band .hero-actions .btn-lg {
  padding: 14px 26px;
  font-size: 1rem;
  border-radius: 999px;
  min-width: 180px;
  font-weight: 700;
}
@media (max-width: 540px) {
  .cta-band .hero-actions { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; gap: 10px; }
  .cta-band .hero-actions .btn-lg { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-cursor, .sb-typing::after { animation: none !important; }
  .scene { transition: none !important; }
}
.step-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: transparent;
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.step-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 0;
}
.step-card:not(.active) .step-progress i { width: 0% !important; }
.step-card:hover { border-color: var(--gray-soft); }
.step-card.active {
  border-color: var(--gray-line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 8px 22px rgba(30,38,48,.06);
}
.step-card.active::before { display: none; }
.step-num {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--offwhite-2);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  transition: background .2s ease, color .2s ease;
}
.step-card.active .step-num { background: var(--teal-deep); color: #fff; }
.step-body h4 { margin-bottom: 4px; }
.step-body p { font-size: .9rem; }

/* Preview canvas — calm light card, single accent line on top */
.preview-pane {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-xl);
  padding: 26px;
  min-height: 380px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 12px 36px rgba(30,38,48,.06);
  overflow: hidden;
}
.preview-pane::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--coral);
  opacity: .9;
  pointer-events: none;
}
.preview-stage { position: relative; min-height: 340px; }
.preview-slide {
  display: none;
  position: relative;
}
.preview-slide.active {
  display: block;
  animation: fade-in .4s var(--ease);
}
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Cursor / pointer — JS-driven positioning */
.cursor {
  position: absolute;
  width: 22px; height: 22px;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(0, 0);
  transition: transform .9s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF8F5' stroke='%231E2630' stroke-width='1.5' stroke-linejoin='round'><path d='M5 3l5 16 3-6 6-3z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.cursor.show { opacity: 1; }
.cursor::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
}
.cursor.clicking::after {
  animation: cursor-ring .6s ease-out;
}
@keyframes cursor-ring {
  0%   { box-shadow: 0 0 0 0 rgba(199,126,79,.55); }
  100% { box-shadow: 0 0 0 20px rgba(199,126,79,0); }
}

/* Click hit highlights — single Peach accent */
.mini-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; position: relative; }
.mini-card.cursor-hit { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral), 0 4px 14px rgba(199,126,79,.18); transform: translateY(-1px); }

#howAmounts span { transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; cursor: default; }
#howAmounts span.cursor-hit { background: var(--coral); color: #fff; transform: scale(1.04); box-shadow: 0 0 0 2px rgba(199,126,79,.30); }
#howAmounts span.selected { background: var(--coral); color: #fff; }

.mini-donate { transition: transform .15s ease, box-shadow .25s ease; cursor: default; }
.mini-donate.cursor-hit { transform: scale(.96); box-shadow: 0 2px 8px rgba(199,126,79,.30); }

.mini-share span { transition: background .25s ease, color .25s ease, transform .25s ease; }
.mini-share span.cursor-hit { background: var(--offwhite-2); color: var(--coral-deep); transform: translateY(-3px) scale(1.08); }

/* Share icons stagger when slide 3 becomes active */
.preview-slide[data-slide="3"].active .mini-share span {
  opacity: 0; transform: translateY(8px) scale(.85);
  animation: share-in .5s var(--ease) forwards;
}
.preview-slide[data-slide="3"].active .mini-share span:nth-child(1) { animation-delay: .15s; }
.preview-slide[data-slide="3"].active .mini-share span:nth-child(2) { animation-delay: .25s; }
.preview-slide[data-slide="3"].active .mini-share span:nth-child(3) { animation-delay: .35s; }
.preview-slide[data-slide="3"].active .mini-share span:nth-child(4) { animation-delay: .45s; }
.preview-slide[data-slide="3"].active .mini-share span:nth-child(5) { animation-delay: .55s; }
.preview-slide[data-slide="3"].active .mini-share span:nth-child(6) { animation-delay: .65s; }
@keyframes share-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle scroll movement on slide 1 list while cursor walks */
.preview-slide[data-slide="1"].active .mini-list {
  animation: list-nudge 5s ease-in-out forwards;
}
@keyframes list-nudge {
  0%, 25% { transform: translateY(0); }
  60%, 100% { transform: translateY(-4px); }
}

/* Mini donate button — single peach accent */
.mini-donate {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 18px;
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  font-family: inherit;
  width: 100%;
  border: 0;
  box-shadow: 0 2px 8px rgba(30,38,48,.10);
}

.mini-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--offwhite);
  border: 1px solid var(--gray-line);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: .9rem; color: var(--gray);
}
.mini-search svg { width: 16px; height: 16px; }
.mini-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.mini-chips span { padding: 5px 11px; background: var(--offwhite-2); color: var(--text-soft); border-radius: 999px; font-size: .72rem; font-weight: 600; }
.mini-chips span.on { background: var(--teal); color: #fff; }
.mini-card {
  background: var(--offwhite); border: 1px solid var(--gray-line);
  border-radius: 14px; padding: 10px; margin-bottom: 10px;
  display: flex; gap: 12px; align-items: center;
}
.mini-card img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }
.mini-card .mc-body { flex: 1; min-width: 0; }
.mini-card .mc-title { font-size: .85rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card .mc-bar { height: 4px; background: var(--gray-line); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.mini-card .mc-bar i { display: block; height: 100%; background: var(--coral); border-radius: 999px; }
.mini-card .mc-pct { font-size: .7rem; color: var(--text-soft); font-weight: 700; margin-top: 3px; }

.mini-campaign { background: var(--offwhite); border: 1px solid var(--gray-line); border-radius: 16px; padding: 14px; }
.mini-campaign img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.mini-campaign h5 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mini-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.mini-amounts span { padding: 8px; background: #fff; border: 1px solid var(--gray-line); color: var(--text); border-radius: 8px; text-align: center; font-weight: 700; font-size: .78rem; }
.mini-amounts span.on { background: var(--coral); border-color: var(--coral); color: #fff; }

.mini-done { text-align: center; color: var(--text); padding: 20px 0; }
.mini-done .check {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px rgba(199,126,79,.28);
}
.mini-done .check svg { width: 30px; height: 30px; }
.mini-done h5 { font-size: 1.05rem; color: var(--teal-deep); margin-bottom: 6px; font-weight: 700; }
.mini-done p { color: var(--text-soft); font-size: .85rem; margin-bottom: 18px; }
.mini-share { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mini-share span {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--offwhite-2); color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease;
}
.mini-share span svg { width: 16px; height: 16px; }

/* ============================================
   Almost There — innovative trail layout
   ============================================ */
.almost-there {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(244,250,245,1), rgba(229,239,231,1));
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(48px, 6vw, 80px);
}
.almost-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 88% -10%, rgba(141,138,168,.30), transparent 65%),
    radial-gradient(50% 60% at -10% 110%, rgba(184,182,203,.35), transparent 65%);
}
.almost-there .container { position: relative; }
.almost-there::before { display: none; }

.almost-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.almost-head > div:first-child { max-width: 640px; }
.almost-head .eyebrow { display: inline-block; }
.almost-head h2.mt-1 { margin-top: 10px; margin-bottom: 0; }
.almost-head h2 { font-size: clamp(1.55rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--teal-deep); line-height: 1.18; }
.almost-head .lead { font-size: .96rem; color: var(--text-soft); line-height: 1.55; margin: 12px 0 0; max-width: 520px; }
.almost-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.7);
  color: var(--teal-deep);
  border: 1px solid rgba(141,138,168,.45);
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.005em;
  border-radius: 999px;
  box-shadow: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
  flex-shrink: 0;
}
.almost-cta:hover {
  background: #fff;
  border-color: var(--mint-deep);
  color: var(--teal-deep);
  transform: translateY(-1px);
}
.almost-cta svg { width: 13px; height: 13px; }
@media (max-width: 600px) {
  .almost-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }
  .almost-head h2 { font-size: 1.5rem; }
  .almost-head .lead { font-size: .92rem; margin-top: 10px; }
  .almost-cta { align-self: flex-start; margin-top: 2px; }
}
.almost-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mint-deep);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(141,138,168,.35);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .7rem;
}
.almost-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint-deep);
  box-shadow: 0 0 0 4px rgba(141,138,168,.25);
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%,100% { box-shadow: 0 0 0 4px rgba(141,138,168,.25); }
  50%    { box-shadow: 0 0 0 7px rgba(141,138,168,.10); }
}
.almost-trail {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 980px) {
  .almost-trail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  .almost-trail > * { flex: 0 0 78%; scroll-snap-align: start; }
  .almost-trail::after { content: ''; flex: 0 0 4px; }
}
.almost-card {
  background: #fff;
  border-radius: 22px;
  padding: 14px 14px 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 10px 28px rgba(30,38,48,.08);
  border: 1px solid rgba(255,255,255,.7);
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.almost-card:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(30,38,48,.05), 0 18px 40px rgba(30,38,48,.12); }
.almost-card h4 {
  padding: 0 4px;
  font-size: 1rem; line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}
.almost-card .ac-progress { padding: 4px 4px 0; }
.almost-card .progress-bar {
  height: 6px;
  background: rgba(141,138,168,.20);
  border-radius: 999px;
}
.almost-card .progress-fill {
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
.ac-stats {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 4px;
  gap: 10px;
}
.ac-raised, .ac-pct {
  font-weight: 800;
  font-size: .98rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.ac-raised em, .ac-pct em {
  font-style: normal; font-weight: 600;
  font-size: .72rem;
  color: var(--gray);
  letter-spacing: .04em;
  margin-left: 2px;
  text-transform: lowercase;
}
.ac-pct { color: var(--mint-deep); }
.almost-card .near-badge {
  position: absolute; top: -10px; left: 14px;
  background: var(--mint-deep); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(92,86,132,.35);
}
.almost-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; }
.almost-card h4 { font-size: .98rem; line-height: 1.3; }
.almost-card .pct { color: var(--mint-deep); font-weight: 800; font-size: .9rem; }

/* ============================================
   Urgent — editorial block, coral tint
   ============================================ */
.urgent-section {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(141,138,168,.22), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(45,58,74,.10), transparent 70%),
    #C9C7DA;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}
@media (min-width: 761px) { .urgent-section { padding-bottom: 0; } }
.urgent-section::before { display: none; }
.urgent-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.urgent-head h2 { color: var(--teal-deep); }
.urgent-trail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 1100px) {
  .urgent-trail { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
  .urgent-trail { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  .urgent-trail > * { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 500px) {
  .urgent-trail > * { flex: 0 0 85%; }
}
.urgent-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(141,138,168,.25);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  position: relative;
}
.urgent-card:hover { border-color: rgba(141,138,168,.50); transform: translateY(-3px); box-shadow: var(--shadow); }
.urgent-card .urgent-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--teal-deep); color: #fff;
  padding: 5px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(30,38,48,.20);
}
.urgent-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.urgent-card .uc-body { padding: 18px; }
.urgent-card h4 { font-size: 1rem; margin-bottom: 8px; line-height: 1.3; }
.urgent-card .pct { color: var(--mint-deep); font-weight: 700; font-size: .85rem; margin-top: 8px; }
.urgent-cta {
  background: var(--teal-deep);
  color: #fff;
  padding: 11px 18px;
  font-size: .9rem;
  box-shadow: 0 6px 18px rgba(30,38,48,.18);
}
.urgent-cta:hover { background: var(--teal); transform: translateY(-1px); }
.urgent-cta svg { width: 16px; height: 16px; }

/* ============================================
   Trust section
   ============================================ */
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .trust-grid { grid-template-columns: 1fr; } }
/* 2x2 enforced on mobile */
.trust-grid.trust-2x2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 901px) { .trust-grid.trust-2x2 { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.trust-item {
  background: #fff; padding: 22px 20px; border-radius: 18px;
  border: 1px solid rgba(227,225,234,.6);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.trust-item::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 32px; height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 0 0 4px 0;
  opacity: .8;
}
.trust-item:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(30,38,48,.07); }
.trust-item:hover::after { width: 48px; transition: width .25s var(--ease); }
.trust-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(141,138,168,.22), rgba(141,138,168,.08));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 4px;
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-item h4 { font-size: 1rem; line-height: 1.3; }
.trust-item p { font-size: .88rem; line-height: 1.5; color: var(--text-soft); }

.trust-section {
  background: linear-gradient(180deg, var(--offwhite), rgba(227,225,234,.25));
}

/* ============================================
   Why support here matters
   ============================================ */
.why-trust {
  position: relative;
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(141,138,168,.12), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(221,160,122,.06), transparent 70%),
    linear-gradient(180deg, var(--offwhite), rgba(227,225,234,.20));
}
.why-trust-head { text-align: center; margin: 0 auto 28px; }
.why-trust-head .eyebrow {
  display: inline-block;
  color: var(--mint-deep);
}
.why-trust-head h2 { max-width: 540px; margin: 6px auto 8px; }
.why-trust-head .lead { font-size: .95rem; max-width: 480px; margin: 0 auto; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.why-card {
  background: #fff;
  border-radius: 20px;
  padding: 26px 22px 22px;
  border: 1px solid rgba(227,225,234,.5);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 6px 18px rgba(30,38,48,.04);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 48px; height: 48px;
  background: radial-gradient(circle at top right, rgba(141,138,168,.18), transparent 70%);
  pointer-events: none;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(30,38,48,.04), 0 14px 32px rgba(30,38,48,.08);
  border-color: rgba(141,138,168,.45);
}
.why-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 6px 16px rgba(45,58,74,.22);
}
.why-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.why-card h4 { font-size: .98rem; line-height: 1.25; color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.why-card p { font-size: .84rem; line-height: 1.5; color: var(--text-soft); margin: 0; }

.why-quote {
  margin: 28px auto 0;
  max-width: 620px;
  padding: 22px 26px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(141,138,168,.20), rgba(221,160,122,.10));
  border: 1px solid rgba(141,138,168,.30);
  display: flex; align-items: center; gap: 16px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.why-quote::before { display: none; }
.why-quote-mark {
  width: 28px; height: 28px;
  color: var(--mint-deep);
  flex-shrink: 0;
  opacity: .42;
}
.why-quote p {
  margin: 0;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--teal-deep);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
}
@media (max-width: 540px) {
  .why-quote { padding: 18px 20px; gap: 12px; }
  .why-quote-mark { width: 26px; height: 26px; }
  .why-quote p { font-size: .94rem; }
  .why-trust-head { margin-bottom: 22px; }
}

/* ============================================
   CTA
   ============================================ */
.cta-band {
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  border-radius: var(--radius-xl);
  color: #fff;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px) clamp(28px, 4vw, 40px);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 50% at 50% 0%, rgba(141,138,168,.22), transparent 70%);
}
.cta-band h2 { color: #fff; margin-top: 0; margin-bottom: 8px; position: relative; }
.cta-band p { color: rgba(255,255,255,.78); margin-top: 0; margin-bottom: 18px; max-width: 540px; margin-left: auto; margin-right: auto; position: relative; }
.cta-band .hero-actions { justify-content: center; position: relative; margin-bottom: 0; }

/* Tighten the section padding when it ends with a cta-band so it doesn't
   feel disconnected from the footer. */
section:has(> .container > .cta-band:last-child),
section:has(> .container > .about-wrap > .cta-band:last-child) {
  padding-bottom: clamp(16px, 2.5vw, 28px);
}

/* ============================================
   Footer — universal, mobile-first
   ============================================ */
.site-footer {
  background: linear-gradient(165deg, #34424F 0%, #2D3A4A 48%, #222D3A 100%);
  color: rgba(255,255,255,.72);
  padding: 56px 0 26px;
  margin-top: -2px;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(141,138,168,.14);
}
#footerMount { background: #34424F; line-height: 0; }
#footerMount .site-footer { line-height: 1.55; }

/* Brand block — top of footer */
.footer-brand-block {
  margin-bottom: 44px;
  max-width: 520px;
}
.footer-brand {
  color: #fff;
  font-family: 'Cormorant Garamond', 'Inter', system-ui, serif;
  font-weight: 700;
  font-size: 2rem;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 14px;
  line-height: 1;
  text-decoration: none;
}
.footer-brand .brand-mark {
  width: 56px !important; height: 56px !important;
  flex-shrink: 0;
}
.footer-brand span {
  position: relative;
  font-family: inherit;
  font-weight: inherit;
  color: #fff;
}
.footer-brand .wordmark { font-size: inherit; line-height: 1; }
.footer-brand .wordmark .wm-hope { color: #fff; }
.footer-brand .wordmark .wm-path { color: var(--coral); }
.footer-tagline {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 460px;
}
/* Small Instagram link — round icon, left-aligned with the brand block */
.footer-ig {
  display: inline-flex;
  align-items: center;
  margin: 22px 0 0;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .15s;
}
.footer-ig-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.footer-ig-icon svg { width: 20px; height: 20px; }
.footer-ig-handle {
  letter-spacing: -.005em;
}
.footer-ig:hover { color: #fff; }
.footer-ig:hover .footer-ig-icon {
  background: rgba(141,138,168,.18);
  border-color: rgba(141,138,168,.36);
  color: #fff;
}
.footer-ig:focus-visible .footer-ig-icon {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* Group columns — MOBILE: strict single-column vertical stack (no grid, no wrap) */
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.footer-col {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.footer-col h5 {
  color: rgba(255,255,255,.95);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 800;
}
.footer-col ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 0; margin: 0;
  width: 100%;
}
.footer-col li { width: 100%; }
.footer-col a {
  display: block;
  width: 100%;
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  font-weight: 500;
  transition: color .15s ease;
  text-decoration: none;
}
.footer-col a:hover { color: #fff; }
.footer-col a:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Divider + centered copyright */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 44px;
  padding-top: 24px;
  display: flex; justify-content: center; align-items: center;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  text-align: center;
  width: 100%;
}

/* DESKTOP — only switch to multi-column at 900px+ (tablets stay vertical) */
@media (min-width: 900px) {
  .site-footer { padding: 64px 0 30px; }
  .site-footer .container {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 64px;
  }
  .footer-brand-block { margin-bottom: 0; }
  .footer-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px 56px;
  }
  .footer-col { flex: 1 1 140px; width: auto; }
  .footer-col a { width: auto; display: inline-block; }
  .footer-bottom {
    grid-column: 1 / -1;
    margin-top: 56px;
  }
}

/* Wider desktop refinement */
@media (min-width: 1100px) {
  .site-footer .container { grid-template-columns: 1.2fr 2.2fr; gap: 80px; }
  .footer-grid { gap: 40px 64px; }
}

/* Small mobile polish */
@media (max-width: 480px) {
  .site-footer { padding: 48px 0 24px; }
  .footer-brand { font-size: 1.8rem; gap: 12px; }
  .footer-brand .brand-mark { width: 48px !important; height: 48px !important; }
  .footer-tagline { font-size: .96rem; }
  .footer-brand-block { margin-bottom: 36px; }
  .footer-grid { gap: 28px; }
  .footer-col h5 { font-size: .72rem; margin-bottom: 12px; }
  .footer-col a { font-size: .96rem; }
  .footer-bottom { margin-top: 36px; padding-top: 22px; font-size: .78rem; }
}

/* ============================================
   Browse page
   ============================================ */
.browse-head { padding: 40px 0 24px; }
.browse-controls {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; align-items: center;
}

/* New browse toolbar (search + filters button) */
.browse-toolbar {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 16px;
}
.browse-toolbar .search-bar { flex: 1; min-width: 0; }
.filters-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px;
  background: #fff;
  border: 1.5px solid var(--gray-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  white-space: nowrap;
}
.filters-btn:hover { border-color: var(--teal); background: var(--offwhite); }
.filters-btn svg { width: 18px; height: 18px; }
.filters-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: var(--mint-deep); color: #fff;
  font-size: .72rem; font-weight: 800;
  margin-left: 2px;
}
.filters-count[hidden] { display: none; }

/* Active filter pills */
.active-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 14px;
  background: rgba(141,138,168,.16);
  border: 1px solid rgba(141,138,168,.3);
  border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--teal-deep);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s var(--ease);
}
.active-pill:hover { background: rgba(141,138,168,.28); }
.active-pill svg { width: 14px; height: 14px; }

/* Filters modal */
.filters-modal {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: flex-end; justify-content: center;
}
.filters-modal[hidden] { display: none; }
.filters-backdrop {
  position: absolute; inset: 0;
  background: rgba(30,38,48,.55);
  backdrop-filter: blur(6px);
  animation: fade-in .2s ease;
}
.filters-sheet {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--offwhite);
  border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  max-height: 85vh;
  animation: sheet-up .28s var(--ease);
}
@media (min-width: 640px) {
  .filters-modal { align-items: center; }
  .filters-sheet { border-radius: 22px; max-height: 80vh; }
}
@keyframes sheet-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--gray-line);
}
.filters-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--teal-deep); }
.filters-body {
  flex: 1; overflow-y: auto;
  padding: 18px 22px 8px;
}
.filter-group { margin-bottom: 30px; }
.filter-group:last-child { margin-bottom: 8px; }
.filter-group h4 {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-deep);
  margin-bottom: 14px;
}
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
/* Softer, cleaner inactive pills — bigger touch targets, less border noise */
.filter-chips .chip {
  font-size: .9rem; font-weight: 600;
  padding: 11px 18px;
  background: var(--offwhite-2);
  border: 1px solid transparent;
  color: var(--text-soft);
}
.filter-chips .chip:hover {
  background: rgba(141,138,168,.18);
  border-color: transparent;
  color: var(--teal-deep);
}
.filter-chips .chip.active {
  background: var(--mint);
  color: #fff;
  border-color: var(--mint);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(141,138,168,.30);
}
/* "More categories" — quiet ghost pill */
.filter-chips .chip-more {
  background: transparent;
  border: 1px dashed rgba(141,138,168,.5);
  color: var(--mint-deep);
  font-weight: 700;
}
.filter-chips .chip-more:hover {
  background: rgba(141,138,168,.10);
  border-color: var(--mint-deep);
  color: var(--mint-deep);
}

.filters-foot {
  display: flex; gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--gray-line);
  background: #fff;
}
.filters-foot .btn { flex: 1; }
.filters-foot .btn-primary { flex: 2; }

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 6px;
  margin-top: 30px;
}
.pag-arrow, .pag-num {
  min-width: 38px; height: 38px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--gray-line);
  font-family: inherit;
  font-weight: 700; font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pag-arrow svg { width: 16px; height: 16px; }
.pag-arrow:hover:not(:disabled), .pag-num:hover:not(.is-current) {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--offwhite);
}
.pag-arrow:disabled { opacity: .4; cursor: not-allowed; }
.pag-num.is-current {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #fff;
  cursor: default;
}
.search-bar {
  flex: 1; min-width: 240px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--gray-line); border-radius: 999px;
  padding: 10px 18px;
  transition: border-color .15s var(--ease), box-shadow .25s var(--ease);
}
.search-bar:focus-within { border-color: var(--mint-deep); box-shadow: 0 0 0 3px rgba(141,138,168,.18); }
.search-bar.arrive-highlight {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 4px rgba(141,138,168,.25);
  animation: search-arrive 1.5s ease-out;
}
@keyframes search-arrive {
  0% { transform: scale(1); }
  20% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.search-bar svg { width: 18px; height: 18px; color: var(--gray); }
.search-bar input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: .95rem; background: transparent; }
.sort-select {
  padding: 11px 16px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--gray-line);
  font-family: inherit; font-size: .9rem; color: var(--text);
}
.empty-state {
  text-align: center; padding: 60px 20px;
  background: #fff; border-radius: var(--radius-lg); border: 1px dashed var(--gray-line);
}
.empty-state h3 { margin-bottom: 8px; }
.empty-state .hero-actions { justify-content: center; margin-top: 22px; }

/* ----- Skeleton loaders ----- */
@keyframes sk-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.sk-line, .sk-bar, .sk-cta, .sk-gallery, .sk-ring, .sk-row .sk-lines span {
  background: linear-gradient(90deg, rgba(227,225,234,.5) 0%, rgba(227,225,234,.85) 50%, rgba(227,225,234,.5) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: sk-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.campaign-skeleton {
  padding: 24px 0 60px;
  display: flex; flex-direction: column; gap: 24px;
}
.campaign-skeleton .sk-gallery {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  max-height: 420px;
}
.campaign-skeleton .sk-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(227,225,234,.55);
  padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.campaign-skeleton .sk-row { display: flex; align-items: center; gap: 18px; }
.campaign-skeleton .sk-ring { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.campaign-skeleton .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.campaign-skeleton .sk-lines span { height: 14px; border-radius: 6px; }
.campaign-skeleton .sk-lines span:first-child { width: 60%; }
.campaign-skeleton .sk-lines span:last-child { width: 90%; height: 10px; }
.campaign-skeleton .sk-bar { height: 8px; width: 100%; border-radius: 999px; }
.campaign-skeleton .sk-cta { height: 48px; width: 100%; border-radius: 999px; }
.campaign-skeleton .sk-line-block { display: flex; flex-direction: column; gap: 10px; padding: 8px 4px; }
.campaign-skeleton .sk-line { height: 12px; }
.campaign-skeleton .sk-line.w-100 { width: 100%; }
.campaign-skeleton .sk-line.w-90 { width: 90%; }
.campaign-skeleton .sk-line.w-80 { width: 80%; }
@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-bar, .sk-cta, .sk-gallery, .sk-ring, .sk-row .sk-lines span { animation: none; }
}

.more-soon { margin-top: 36px; }
.more-soon-card {
  position: relative;
  text-align: center;
  padding: 44px 28px;
  background: linear-gradient(160deg, rgba(141,138,168,.14), rgba(250,244,240,.6) 60%);
  border: 1px solid rgba(141,138,168,.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 14px 36px rgba(30,38,48,.06);
}
.more-soon-card .eyebrow { display: inline-block; margin-bottom: 10px; }
.more-soon-card h3 { margin: 0 0 8px; font-size: 1.4rem; }
.more-soon-card p { color: var(--gray); margin: 0 0 22px; max-width: 460px; margin-left: auto; margin-right: auto; }
@media (max-width: 540px) {
  .more-soon-card { padding: 32px 20px; }
  .more-soon-card h3 { font-size: 1.2rem; }
}

/* ============================================
   Campaign detail
   ============================================ */
.campaign-hero {
  padding: 32px 0 28px;
}

/* ============================================
   Create Campaign CTA — end of homepage
   ============================================ */
.create-cta { padding-top: 0; }
.create-cta-card {
  max-width: 980px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  border-radius: 28px;
  padding: 36px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px; align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(30,38,48,.18);
}
.create-cta-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(141,138,168,.30), transparent 70%);
  pointer-events: none;
}
.create-cta-art {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.create-cta-art img { border-radius: 50%; }
.create-cta-body { min-width: 0; position: relative; }
.create-cta-body .eyebrow { color: var(--mint); font-size: .7rem; }
.create-cta-body h2 {
  color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.2; margin: 6px 0 8px;
}
.create-cta-body p { color: rgba(255,255,255,.78); font-size: .92rem; max-width: 480px; margin: 0; }
/* Premium Create Campaign button */
.btn-create-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 16px 26px 16px 30px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.005em;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 50%),
    linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(30,38,48,.06),
    0 2px 4px rgba(30,38,48,.10),
    0 8px 20px rgba(199,126,79,.40),
    0 18px 40px rgba(199,126,79,.30);
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.btn-create-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .8s var(--ease);
  pointer-events: none;
}
.btn-create-cta:hover::before { left: 130%; }
.btn-create-cta:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 50%),
    linear-gradient(135deg, #E3AC86 0%, var(--coral-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(30,38,48,.08),
    0 4px 8px rgba(30,38,48,.12),
    0 12px 28px rgba(199,126,79,.48),
    0 24px 56px rgba(199,126,79,.36);
}
.btn-create-cta:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 2px 4px rgba(30,38,48,.10),
    0 2px 6px rgba(199,126,79,.30);
}
.btn-create-cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.6),
    0 0 0 6px rgba(199,126,79,.55),
    0 8px 20px rgba(199,126,79,.35);
}
.btn-create-text { position: relative; z-index: 1; }
.btn-create-arrow {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  color: #fff;
  transition: transform .25s var(--ease), background .2s var(--ease);
}
.btn-create-arrow svg { width: 14px; height: 14px; display: block; }
.btn-create-cta:hover .btn-create-arrow {
  transform: translateX(4px);
  background: rgba(255,255,255,.32);
}

@media (max-width: 760px) {
  .btn-create-cta {
    width: 100%;
    padding: 15px 22px 15px 28px;
    font-size: 1rem;
    justify-content: space-between;
  }
}
.create-cta-card .btn { flex-shrink: 0; position: relative; }
@media (max-width: 760px) {
  .create-cta-card {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 26px 24px;
    border-radius: 24px;
    gap: 16px;
  }
  .create-cta-card .btn { width: 100%; padding: 14px 22px; }
  .create-cta-body h2 { font-size: 1.25rem; }
}

/* ============================================
   Campaign hero V2 — immersive cover
   ============================================ */
.campaign-hero-v2 { padding: 0; position: relative; }
.campaign-hero-v2 .container {
  position: relative; z-index: 3;
  margin-top: -56px;
  padding: 0;
}
@media (min-width: 761px) {
  .campaign-hero-v2 .container { max-width: 800px; margin-top: -68px; padding: 0; }
}

/* Gallery carousel */
.campaign-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 78vh;
  overflow: hidden;
  background: var(--offwhite-2);
}
@media (min-width: 761px) {
  .campaign-gallery {
    max-width: 760px;
    margin: 18px auto 0;
    border-radius: 24px;
    aspect-ratio: 4/5;
    max-height: 680px;
  }
}
.campaign-gallery::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(30,38,48,.45) 55%, rgba(30,38,48,.82));
  pointer-events: none;
  z-index: 1;
  transition: opacity .25s var(--ease);
}
.campaign-gallery.is-summary-view::after { opacity: 0; }
.campaign-gallery-track {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.campaign-gallery-track::-webkit-scrollbar { display: none; }
.campaign-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  background: var(--offwhite-2);
  position: relative;
}
.campaign-gallery-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-gallery-slide.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.20));
}

/* Summary slide (last in gallery) */
.campaign-gallery-slide.is-summary {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(141,138,168,.32), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(221,160,122,.18), transparent 60%),
    linear-gradient(155deg, var(--teal-deep), #1A222C);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  position: relative;
}
@media (min-width: 761px) {
  .campaign-gallery-slide.is-summary { padding: 28px 24px; }
}
.campaign-gallery-slide.is-summary::after { display: none; }
.summary-slide {
  width: 100%;
  max-width: 720px;
  position: relative;
  z-index: 1;
}
.summary-card {
  background: #FAF4F0;
  border: 0;
  border-radius: 20px;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,.30);
  text-align: center;
}
.summary-org {
  display: inline-block;
  align-self: center;
  background: rgba(141,138,168,.22);
  color: var(--teal-deep);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.summary-title {
  font-size: clamp(1.3rem, 4.5vw, 1.55rem);
  line-height: 1.22;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.02em;
  margin: 0;
}
.summary-excerpt {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.summary-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 0 6px;
  border-top: 1px solid rgba(227,225,234,.7);
  border-bottom: 1px solid rgba(227,225,234,.7);
  margin: 4px 0;
}
.summary-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.summary-stat .ss-num {
  font-weight: 800;
  color: var(--teal-deep);
  font-size: 1rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.summary-stat .ss-lbl {
  font-size: .66rem;
  color: var(--gray);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.summary-cta {
  width: 100%;
  padding: 12px 18px;
  font-size: .94rem;
  font-weight: 700;
  margin-top: 4px;
}
.summary-cta svg { width: 16px; height: 16px; }

/* Hide title overlay when on summary slide */
.campaign-hero-overlay.is-hidden { opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }

/* Summary dot subtle differentiation */
.g-dot.is-summary-dot { background: rgba(221,160,122,.65); }
.g-dot.is-summary-dot.is-active { background: var(--coral); width: 20px; }

@media (max-width: 540px) {
  .campaign-gallery-slide.is-summary { padding: 22px 16px; }
  .summary-card { padding: 18px 18px 16px; gap: 10px; }
  .summary-stat .ss-num { font-size: .92rem; }
}
.campaign-gallery-dots {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  z-index: 3;
  padding: 5px 9px;
  background: rgba(30,38,48,.32);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}
.g-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 0; padding: 0;
  cursor: pointer;
  transition: width .25s var(--ease), background .2s var(--ease);
}
.g-dot:hover { background: rgba(255,255,255,.85); }
.g-dot.is-active { background: #fff; width: 20px; border-radius: 999px; }

.campaign-hero-overlay {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 64px;
  z-index: 2;
  color: #fff;
  display: flex; flex-direction: column;
}
@media (min-width: 761px) {
  .campaign-hero-overlay { left: 22px; right: 22px; bottom: 84px; }
}
.campaign-hero-overlay h1 {
  font-size: clamp(1.85rem, 5.8vw, 2.55rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.campaign-hero-org {
  font-size: 1.02rem;
  color: rgba(255,255,255,.92);
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.campaign-back {
  position: absolute; top: 16px; left: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(30,38,48,.18);
  border: 1px solid rgba(255,255,255,.6);
  transition: transform .18s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
  z-index: 4;
}
.campaign-back:hover {
  transform: translateX(-3px);
  background: #fff;
  box-shadow: 0 6px 20px rgba(30,38,48,.20);
}
.campaign-back svg { width: 18px; height: 18px; }
.container.compact { max-width: 920px; }
.campaign-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--gray); font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(227,225,234,.6);
  transition: color .15s ease, background .15s ease;
}
.campaign-breadcrumb:hover { color: var(--teal); background: #fff; }
.campaign-breadcrumb svg { width: 14px; height: 14px; }

.campaign-cover-wrap {
  position: relative;
  width: 100%;
  margin: 16px auto 0;
  max-width: 920px;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--offwhite-2);
  border-radius: 24px;
}
@media (max-width: 760px) {
  .campaign-cover-wrap {
    margin: 0;
    border-radius: 0;
    aspect-ratio: 4/3;
    max-width: none;
    box-shadow: none;
  }
}
.campaign-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-cover-wrap::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(30,38,48,.35));
  pointer-events: none;
}
.campaign-cover-cat {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(255,255,255,.95); color: var(--teal-deep);
  padding: 8px 16px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(30,38,48,.18);
  z-index: 2;
}
.campaign-cover-wrap.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.20));
}
.campaign-cover-wrap.img-broken::before {
  content: ''; position: absolute;
  top: 38%; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3A4A' stroke-width='1.4' stroke-linecap='round' opacity='.5'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.campaign-cover-wrap.img-broken::after {
  content: attr(data-category);
  position: absolute; top: 62%; left: 0; right: 0; text-align: center;
  font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); opacity: .65;
}

.campaign-title-block-v2 {
  max-width: 760px;
  padding: 0 2px;
}
.campaign-title-block-v2 h1 {
  font-size: clamp(1.55rem, 4.2vw, 2.15rem);
  line-height: 1.15;
  margin: 0;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--teal-deep);
}
.campaign-loc {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gray); font-size: .9rem; font-weight: 500;
  padding: 4px 12px 4px 8px;
  background: rgba(141,138,168,.10);
  border-radius: 999px;
}
.campaign-loc svg { width: 14px; height: 14px; color: var(--mint-deep); }

/* Donate card V2 — refined editorial */
.donate-card-v2 {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(227,225,234,.55);
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
  position: relative;
}
.donate-card-v2.is-overlay {
  background: var(--offwhite);
  border: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 24px rgba(30,38,48,.08);
  padding: 20px 18px 8px;
  max-width: none;
}
@media (min-width: 761px) {
  .donate-card-v2.is-overlay { border-radius: 28px 28px 0 0; padding: 24px 28px 10px; }
}
.donate-amount-row {
  display: flex; align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.donate-amount { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.donate-amount .lbl {
  font-size: .82rem; font-weight: 600; letter-spacing: 0;
  color: var(--mint-deep);
  margin-bottom: 3px;
}
.donate-amount .raised {
  font-size: clamp(2.05rem, 6vw, 2.55rem); font-weight: 800; color: var(--teal-deep);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.donate-amount .goal-line { font-size: 1rem; color: var(--gray); font-weight: 500; }
/* Progress ring */
.donate-ring {
  position: relative;
  width: 86px; height: 86px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.donate-ring-svg { width: 100%; height: 100%; display: block; }
.donate-ring-track { stroke: rgba(141,138,168,.22); }
.donate-ring-bar {
  stroke: var(--coral);
  transition: stroke-dasharray .6s var(--ease);
}
.donate-ring-num {
  position: absolute;
  font-size: 1.3rem; font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.donate-ring-num small { font-size: .6em; font-weight: 800; margin-left: 1px; opacity: .75; }
@media (max-width: 540px) { .donate-ring { width: 78px; height: 78px; } .donate-ring-num { font-size: 1.18rem; } }
.donate-bar { margin: 2px 0 12px; }
.donate-bar .progress-bar {
  height: 8px;
  background: rgba(141,138,168,.18);
  border-radius: 999px;
  overflow: hidden;
}
.donate-bar .progress-fill {
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 999px;
  height: 100%;
  position: relative;
}
.donate-bar .progress-fill::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
  background: rgba(255,255,255,.6);
  border-radius: 999px;
}
.donate-meta {
  display: flex; align-items: flex-start;
  margin-bottom: 14px;
}
.donate-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.donate-meta-item svg { width: 17px; height: 17px; color: var(--mint-deep); }
/* Donor rotator — soft pill aligned with the left edge of the card content
   (progress bar / Donate button) since it sits inside the same .donate-card */
.donor-rotator {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem;
  line-height: 1.3;
  padding: 6px 12px 6px 10px;
  background: rgba(141,138,168,.14);
  border: 1px solid rgba(141,138,168,.26);
  border-radius: 999px;
  color: var(--text);
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donor-rotator > svg {
  width: 15px; height: 15px;
  color: var(--mint-deep);
  flex-shrink: 0;
}
.donor-name {
  font-weight: 700;
  color: var(--teal-deep);
  transition: opacity .28s ease;
  min-width: 0;
}
.donor-suffix { color: var(--text-soft); font-weight: 500; }
.donate-meta-item:first-child { font-weight: 700; color: var(--text); }
.donate-meta-dot { opacity: .35; font-weight: 700; }

/* Donate + Share buttons */
.donate-actions { display: flex; gap: 8px; align-items: stretch; }
.donate-cta {
  flex: 1;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(141,138,168,.30), 0 8px 22px rgba(141,138,168,.25);
}
.donate-cta svg { width: 20px; height: 20px; }
.donate-cta:hover {
  box-shadow: 0 4px 10px rgba(141,138,168,.40), 0 16px 36px rgba(141,138,168,.35);
  transform: translateY(-1px);
}
.btn-share-pill {
  width: 54px; flex-shrink: 0;
  border-radius: 999px;
  background: rgba(141,138,168,.14);
  color: var(--teal-deep);
  border: 1.5px solid rgba(141,138,168,.30);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease);
  cursor: pointer;
}
.btn-share-pill svg { width: 18px; height: 18px; }
.btn-share-pill:hover {
  background: var(--mint);
  border-color: var(--mint-deep);
  color: var(--teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(141,138,168,.35);
}

/* Organizer V2 — premium */
.organizer-card-v2 {
  max-width: 760px;
  margin: 10px auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(227,225,234,.55);
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.organizer-card-v2::before {
  content: '';
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  border-radius: 0 4px 4px 0;
}
.organizer-card-v2 .organizer-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(141,138,168,.18), 0 4px 12px rgba(30,38,48,.12);
}
.organizer-card-v2 .organizer-meta { flex: 1; min-width: 0; }
.organizer-card-v2 .small {
  font-size: .65rem; color: var(--mint-deep);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
}
.organizer-card-v2 .org-name {
  font-weight: 700;
  color: var(--teal-deep);
  font-size: .95rem;
  margin-top: 1px;
  letter-spacing: -.01em;
}
.org-loc-chip {
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal-deep);
  background: rgba(141,138,168,.18);
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
@media (max-width: 540px) {
  .donate-card-v2 { padding: 16px 16px 14px; }
  .donate-amount-row { gap: 12px; }
  .organizer-card-v2 { padding: 10px 12px; gap: 10px; }
  .organizer-card-v2 .organizer-avatar { width: 38px; height: 38px; }
}

.campaign-content { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }

/* Story toggle V2 — centered */
.story-toggle-wrap { text-align: center; margin-top: 8px; }
.story-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(141,138,168,.12);
  border: 1px solid rgba(141,138,168,.3);
  color: var(--teal); font-weight: 700; font-size: .9rem;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.story-toggle:hover { background: rgba(141,138,168,.20); border-color: var(--mint-deep); }
.story-toggle[hidden] { display: none; }
.story-toggle svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }

/* Supporters head */
.supporters-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  padding: 0 4px;
}
.supporters-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.015em; color: var(--teal-deep); }
.supporters-count { font-size: .8rem; color: var(--gray); font-weight: 600; }
#toggleSupporters { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#toggleSupporters svg { width: 16px; height: 16px; }

/* ============================================
   Share section V3 — editorial
   ============================================ */
.share-section-v3 {
  margin-top: 36px;
  padding: 24px 22px;
  border-radius: 22px;
  background:
    radial-gradient(60% 50% at 90% 0%, rgba(141,138,168,.16), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(221,160,122,.07), transparent 70%),
    #fff;
  border: 1px solid rgba(141,138,168,.22);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 10px 28px rgba(30,38,48,.05);
}

/* Share card v4 — pro-platform feel */
.share-card {
  margin-top: 32px;
  padding: 26px 22px;
  border-radius: 22px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(141,138,168,.16), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(221,160,122,.08), transparent 65%),
    #fff;
  border: 1px solid rgba(141,138,168,.22);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 14px 32px rgba(30,38,48,.06);
}
/* Share section — refined, warm-sand card container */
.share-bare {
  margin-top: 36px;
  padding: 32px 22px 26px;
  background:
    radial-gradient(85% 70% at 50% 0%, rgba(141,138,168,.18), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(221,160,122,.07), transparent 65%),
    linear-gradient(180deg, #F0E6D2 0%, #E9DEC5 100%);
  border: 1px solid rgba(141,138,168,.32);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 1px 2px rgba(30,38,48,.04),
    0 18px 40px rgba(30,38,48,.08);
  text-align: center;
}
.share-bare .share-card-head { margin-bottom: 22px; text-align: center; padding: 0 6px; }
.share-bare .share-card-head h3 {
  font-size: 1.3rem; margin: 0 0 6px; color: var(--teal-deep);
  letter-spacing: -.015em; font-weight: 800;
  font-family: 'Cormorant Garamond', 'Inter', system-ui, serif;
  font-optical-sizing: auto;
}
.share-bare .share-card-head p { font-size: .9rem; color: var(--text-soft); margin: 0; line-height: 1.45; }

/* Preview fan — 3 fully-composed cards, blurred siblings for depth */
.share-preview-fan {
  position: relative;
  margin: 0 auto 24px;
  width: 100%;
  max-width: 320px;
  height: 240px;
}
.share-fan-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(227,225,234,.7);
  box-shadow: 0 10px 26px rgba(30,38,48,.12), 0 1px 2px rgba(30,38,48,.04);
  display: flex; flex-direction: column;
}
.share-fan-card.is-left,
.share-fan-card.is-right {
  width: 150px; height: 210px;
  top: 16px;
  z-index: 1;
  opacity: .72;
  filter: blur(2px) saturate(.85);
}
.share-fan-card.is-left  { left:  -4px; transform: rotate(-9deg) scale(.92); transform-origin: bottom right; }
.share-fan-card.is-right { right: -4px; transform: rotate( 9deg) scale(.92); transform-origin: bottom left; }
.share-fan-card.is-center {
  width: 170px; height: 230px;
  left: 50%; top: 0;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 14px 36px rgba(30,38,48,.18), 0 2px 4px rgba(30,38,48,.05);
}
.share-fan-card .fan-img { width: 100%; height: 116px; overflow: hidden; flex-shrink: 0; }
.share-fan-card .fan-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-fan-card .fan-caption {
  padding: 8px 10px 10px;
  text-align: left;
  background: #fff;
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0;
}
.share-fan-card .fan-title {
  font-weight: 700; color: var(--teal-deep);
  font-size: .78rem;
  line-height: 1.25;
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.share-fan-card .fan-bar {
  height: 4px;
  background: rgba(141,138,168,.18);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 6px;
}
.share-fan-card .fan-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 999px;
}
.share-fan-card .fan-stats {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.share-fan-card .fan-stats .raised {
  font-weight: 800; color: var(--teal-deep);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.share-fan-card .fan-stats .pct {
  font-size: .68rem;
  color: var(--mint-deep);
  font-weight: 700;
}

/* Socials grid refined */
.share-bare .share-socials-grid {
  max-width: 340px; margin: 0 auto;
  gap: 12px;
}
.share-card-head { text-align: center; margin-bottom: 18px; }
.share-card-head h3 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em;
  color: var(--teal-deep); margin: 0 0 4px;
}
.share-card-head p { font-size: .92rem; color: var(--text-soft); margin: 0; }

.share-socials-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 6px auto 0;
  max-width: 320px;
  padding: 0 4px;
}
@media (max-width: 540px) {
  .share-socials-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 100%; }
}
.share-big {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 2px;
  background: transparent; border: 0; cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: transform .15s var(--ease);
}
.share-big:hover { transform: translateY(-2px); }
.share-big .sb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--offwhite-2);
  border: 1px solid rgba(227,225,234,.6);
  color: var(--teal-deep);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.share-big .sb-icon svg { width: 22px; height: 22px; }
.share-big .sb-lbl {
  font-size: .72rem; font-weight: 600; color: var(--text-soft);
  letter-spacing: -.005em;
}
.share-big.is-fb:hover .sb-icon { background: #1877F2; color: #fff; border-color: transparent; }
.share-big.is-ig:hover .sb-icon { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); color: #fff; border-color: transparent; }
.share-big.is-tk:hover .sb-icon { background: #000; color: #fff; border-color: transparent; }
.share-big.is-wa:hover .sb-icon { background: #25D366; color: #fff; border-color: transparent; }
.share-big.is-link:hover .sb-icon { background: var(--mint); color: var(--teal-deep); border-color: transparent; }
@media (max-width: 540px) {
  .share-big .sb-icon { width: 46px; height: 46px; }
  .share-big .sb-icon svg { width: 20px; height: 20px; }
  .share-big .sb-lbl { font-size: .66rem; }
}

/* Preview stack — 2 cards slightly tilted */
.share-preview-stack {
  position: relative;
  margin: 0 auto 18px;
  max-width: 320px;
  height: 200px;
}
.share-preview-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(227,225,234,.6);
  box-shadow: 0 4px 16px rgba(30,38,48,.08), 0 1px 2px rgba(30,38,48,.04);
}
.share-preview-card.is-back {
  width: 78%;
  top: 8px; right: 6px;
  height: 160px;
  transform: rotate(4deg);
  opacity: .9;
}
.share-preview-card.is-main {
  width: 84%;
  top: 18px; left: 6px;
  height: 170px;
  transform: rotate(-2deg);
  display: flex; flex-direction: column;
}
.share-preview-card .spc-img {
  width: 100%; height: 100px;
  overflow: hidden;
  background: var(--offwhite-2);
}
.share-preview-card .spc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-preview-card .spc-img.img-broken { background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.20)); }
.share-preview-card .spc-body { padding: 8px 12px; }
.spc-title {
  font-size: .76rem; font-weight: 700; color: var(--teal-deep);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}
.spc-stats { display: flex; align-items: center; gap: 6px; font-size: .66rem; }
.spc-stats .raised { font-weight: 700; color: var(--text); }
.spc-stats .pct { color: var(--mint-deep); font-weight: 700; }
.spc-stats .dot { opacity: .4; }

.share-card-cta {
  width: 100%;
  font-size: 1rem;
  padding: 14px 22px;
}
.share-card-cta svg { width: 18px; height: 18px; }
@media (max-width: 540px) {
  .share-card { padding: 22px 18px; }
  .share-card-head h3 { font-size: 1.18rem; }
}
.share-v3-head { margin-bottom: 16px; }
.share-v3-head .eyebrow { font-size: .7rem; }
.share-v3-head h3 { font-size: 1.25rem; line-height: 1.2; margin: 4px 0 4px; }
.share-v3-head p { font-size: .9rem; max-width: 460px; }

.share-v3-grid {
  display: flex; flex-direction: column;
  gap: 14px;
}

.share-v3-preview {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex; flex-direction: column;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.share-v3-preview-img {
  position: relative; width: 100%; aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--offwhite-2);
  border-radius: 14px;
}
.share-v3-preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-v3-preview-img.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.20));
}
.share-v3-preview-body { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.share-v3-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(141,138,168,.18);
  padding: 4px 10px; border-radius: 999px;
  width: max-content;
}
.share-v3-brand img { border-radius: 50%; }
.share-v3-title {
  font-weight: 700; color: var(--text); font-size: .98rem;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.share-v3-stats {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem;
}
.share-v3-stats .raised { font-weight: 700; color: var(--text); }
.share-v3-stats .pct { color: var(--mint-deep); font-weight: 700; }
.share-v3-stats .dot { opacity: .4; }
.share-v3-url {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; color: var(--gray);
  margin-top: 2px;
}
.share-v3-url svg { width: 12px; height: 12px; }

.share-v3-actions {
  display: flex; flex-direction: column; gap: 10px;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.share-v3-main, .share-v3-copy { width: 100%; }
.share-v3-main svg, .share-v3-copy svg { width: 18px; height: 18px; }
.share-v3-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: .74rem; color: var(--gray);
  text-align: center;
  margin: 2px 0;
}
.share-v3-divider::before, .share-v3-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--gray-line);
}
.share-v3-divider span { letter-spacing: .04em; }
.share-v3-socials {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.share-v3-socials .share-circle {
  width: 100%; height: 48px;
  border-radius: 12px;
}
@media (max-width: 540px) {
  .share-section-v3 { padding: 22px 18px; border-radius: 22px; }
  .share-v3-head h3 { font-size: 1.18rem; }
}
.campaign-hero .breadcrumb { font-size: .85rem; color: var(--gray); margin-bottom: 16px; }
.campaign-hero .breadcrumb a:hover { color: var(--teal); }
.campaign-media-wrap {
  width: 100%; aspect-ratio: 16/9; max-height: 480px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: var(--offwhite-2);
}
.campaign-media {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.campaign-media-wrap.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.30), rgba(221,160,122,.20));
}
.campaign-media-wrap.img-broken::before {
  content: ''; position: absolute;
  top: 38%; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3A4A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/><path d='m21 16-4-4-8 8'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.campaign-media-wrap.img-broken::after {
  content: attr(data-category);
  position: absolute; top: 64%; left: 0; right: 0; text-align: center;
  font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); opacity: .7;
}
.campaign-title-block { padding-top: 22px; }
.campaign-title-block .card-cat { position: static; display: inline-block; margin-bottom: 10px; background: rgba(141,138,168,.22); color: var(--teal-deep); }
.campaign-title-block h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 12px; }
.campaign-title-block .org-line { color: var(--gray); font-size: .95rem; }

.campaign-layout {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; padding: 24px 0 60px;
}
@media (max-width: 980px) { .campaign-layout { grid-template-columns: 1fr; } }
.campaign-content { max-width: 760px; margin: 0 auto; }

/* Summary card */
.summary-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-line);
}
/* Inline (below image) variant — full-width on mobile, two-column on desktop */
.summary-inline {
  margin-top: 18px;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
}
@media (min-width: 720px) {
  .summary-inline {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px;
    padding: 22px 26px;
  }
  .summary-inline .summary-actions { flex-direction: row; min-width: 320px; }
  .summary-inline .summary-actions .btn { flex: 1; }
}
.circ-wrap { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.circ-progress {
  --pct: 0;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--mint-deep) calc(var(--pct) * 1%), var(--gray-line) 0);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.circ-progress::before {
  content: ''; position: absolute; width: 76px; height: 76px;
  background: #fff; border-radius: 50%;
}
.circ-progress { position: relative; }
.circ-progress span { position: relative; font-weight: 800; font-size: 1.05rem; color: var(--teal-deep); }
.summary-stats .raised { font-size: 1.5rem; font-weight: 800; color: var(--text); display: block; line-height: 1.1; }
.summary-stats .goal-line { font-size: .9rem; color: var(--gray); margin-top: 4px; }
.summary-supporters { font-size: .88rem; color: var(--gray); margin-top: 6px; }
.summary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.summary-actions .btn { width: 100%; }

/* Story */
.story-block h2,
.story-card h2 {
  margin: 0 0 18px;
  font-size: 1.55rem;
  letter-spacing: -.015em;
  color: var(--teal-deep);
}
.story-block p,
.story-card p { margin-bottom: 18px; color: var(--text); line-height: 1.78; font-size: 1.02rem; }
.story-card p:last-child { margin-bottom: 0; }
.story-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 20px;
  padding: 24px 22px 8px;
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.story-card .story-collapsed { max-height: 380px; overflow: hidden; position: relative; }
.story-card .story-collapsed::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 56px;
  background: linear-gradient(transparent, #fff 92%);
}
.story-card .story-toggle-wrap {
  text-align: center;
  margin: 14px -22px -8px;
  padding: 12px 22px 16px;
  border-top: 1px solid rgba(227,225,234,.5);
  background: linear-gradient(180deg, transparent, rgba(141,138,168,.04));
}
.story-card .story-toggle {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  color: var(--teal);
  font-weight: 700;
}
.story-card .story-toggle:hover { background: rgba(141,138,168,.10); }
.story-block p:last-child { margin-bottom: 0; }
.story-block img { width: 100%; border-radius: var(--radius); margin: 22px 0; }

/* Section: campaign story */
.story-section { padding-top: 22px; padding-bottom: 36px; }
@media (min-width: 761px) {
  .story-section { padding-top: 32px; padding-bottom: 48px; }
}

/* Decorative section divider */
.section-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px;
  max-width: 120px;
  gap: 10px;
}
.section-divider::before, .section-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,138,168,.55), transparent);
}
.section-divider span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint-deep);
  box-shadow: 0 0 0 4px rgba(141,138,168,.18);
}
@media (min-width: 761px) {
  .section-divider { margin-bottom: 32px; }
}
.story-toggle { color: var(--teal); font-weight: 700; margin-top: 6px; }
.story-collapsed { max-height: 360px; overflow: hidden; position: relative; }
.story-collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--offwhite)); }

/* Use of funds */
.use-funds {
  background: rgba(141,138,168,.12);
  border-radius: var(--radius-lg); padding: 24px;
  margin-top: 30px;
}
.use-funds h3 { margin-bottom: 14px; }
.use-funds ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.use-funds li { display: flex; gap: 10px; align-items: center; color: var(--text); font-weight: 500; }
.use-funds li svg { color: var(--mint-deep); width: 18px; height: 18px; flex-shrink: 0; }

/* Supporters */
.supporters-block { margin-top: 30px; }
.supporters-block #toggleSupporters {
  margin-top: 14px;
  background: transparent;
  border: 1px solid rgba(141,138,168,.45);
  color: var(--teal);
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
}
.supporters-block #toggleSupporters:hover {
  background: rgba(141,138,168,.10);
  border-color: var(--mint-deep);
}
.supporters-list { display: flex; flex-direction: column; gap: 8px; }
.supporter-row {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(227,225,234,.6);
  box-shadow: 0 1px 2px rgba(30,38,48,.02);
}
.supporter-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem;
  flex-shrink: 0;
}
.supporter-meta { flex: 1; min-width: 0; line-height: 1.2; }
.supporter-meta .name { font-weight: 700; color: var(--text); font-size: .92rem; }
.supporter-meta .when { font-size: .76rem; color: var(--gray); margin-top: 2px; }
.supporter-amt { font-weight: 800; color: var(--teal-deep); font-size: .98rem; font-variant-numeric: tabular-nums; }

/* Reactions */
/* Reactions — refined grid */
/* Mini organizer card under recent supporters */
.organizer-mini-card {
  margin-top: 18px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
}

/* Organizer section — no card bg, refined with subtle divider */
.organizer-section {
  margin: 32px 4px 12px;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(227,225,234,.7);
}
.organizer-section-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(141,138,168,.16), 0 4px 14px rgba(30,38,48,.12);
}
.organizer-section-meta { flex: 1; min-width: 0; line-height: 1.3; }
.organizer-section-label {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-deep);
}
.organizer-section-name {
  font-weight: 800;
  color: var(--teal-deep);
  font-size: 1.2rem;
  margin-top: 3px;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.organizer-section-loc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .86rem; color: var(--gray);
  margin-top: 5px;
}
.organizer-section-loc svg { width: 13px; height: 13px; color: var(--mint-deep); }
.organizer-mini-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
  flex-shrink: 0;
}
.organizer-mini-meta { flex: 1; min-width: 0; line-height: 1.3; }
.organizer-mini-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mint-deep);
}
.organizer-mini-name {
  font-weight: 700; color: var(--teal-deep);
  font-size: .96rem;
  margin-top: 1px;
}
.organizer-mini-loc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; color: var(--gray);
  margin-top: 3px;
}
.organizer-mini-loc svg { width: 12px; height: 12px; }

.organizer-report {
  margin-top: 10px;
  display: inline-flex;
  font-size: .82rem;
}

.reactions-block {
  margin-top: 22px;
  padding: 20px 20px 18px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(141,138,168,.10), transparent 70%),
    #fff;
  border-radius: 20px;
  border: 1px solid rgba(227,225,234,.6);
  box-shadow: 0 1px 2px rgba(30,38,48,.025);
}
.reactions-head { margin-bottom: 14px; }
.reactions-head h3 {
  font-size: 1.1rem; font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  margin: 0 0 2px;
  line-height: 1.2;
}
.reactions-head p { font-size: .82rem; color: var(--text-soft); margin: 0; line-height: 1.4; }
.reactions-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.react-btn {
  display: inline-flex; align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: var(--offwhite-2);
  border: 1px solid rgba(227,225,234,.6);
  font-family: inherit;
  font-weight: 600; font-size: .84rem;
  color: var(--text);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
  cursor: pointer;
  line-height: 1;
}
.react-btn:hover {
  background: rgba(141,138,168,.10);
  border-color: rgba(141,138,168,.4);
}
.react-btn:active { transform: scale(.97); }
.react-btn.on {
  background: rgba(141,138,168,.22);
  border-color: var(--mint-deep);
  color: var(--teal-deep);
  font-weight: 700;
}
.react-btn .emo {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mint-deep);
  width: 18px; height: 18px;
}
.react-btn.on .emo { color: var(--mint-deep); }
.react-btn .emo svg { width: 17px; height: 17px; }
.react-btn .num {
  color: var(--gray);
  font-weight: 700;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  background: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(227,225,234,.6);
  margin-left: 2px;
  line-height: 1.2;
}
.react-btn.on .num {
  color: var(--teal-deep);
  background: #fff;
  border-color: rgba(141,138,168,.45);
}

/* ============================================
   Share band V2 — campaign page
   ============================================ */
.share-band-v2 {
  margin-top: 36px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, rgba(141,138,168,.14), rgba(221,160,122,.10));
  border: 1px solid rgba(141,138,168,.25);
  position: relative;
  overflow: hidden;
}
.share-band-v2::before {
  content: ''; position: absolute; top: -60px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(141,138,168,.20), transparent 70%);
  pointer-events: none;
}
.share-head { position: relative; margin-bottom: 20px; }
.share-head h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 6px; }
.share-head p { font-size: .95rem; max-width: 480px; }

.share-mockup {
  display: flex; gap: 14px; align-items: center;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 22px;
  border: 1px solid rgba(227,225,234,.6);
  box-shadow: 0 2px 12px rgba(30,38,48,.06);
  position: relative;
  max-width: 460px;
}
.share-mockup-img {
  width: 88px; height: 88px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--offwhite-2);
  position: relative;
}
.share-mockup-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-mockup-img.img-broken { background: linear-gradient(135deg, rgba(141,138,168,.30), rgba(221,160,122,.20)); }
.share-mockup-img.img-broken::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3A4A' stroke-width='1.4' stroke-linecap='round' opacity='.55'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 30px;
}
.share-mockup-body { flex: 1; min-width: 0; }
.share-mockup-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(141,138,168,.18);
  padding: 4px 10px; border-radius: 999px;
}
.share-mockup-brand img { border-radius: 50%; }
.share-mockup-title {
  font-weight: 700; color: var(--text); font-size: .95rem;
  margin: 6px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.25;
}
.share-mockup-meta {
  display: flex; gap: 10px; font-size: .8rem;
}
.share-mockup-meta .raised { font-weight: 700; color: var(--text); }
.share-mockup-meta .pct { color: var(--mint-deep); font-weight: 700; }

.share-socials {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 20px;
  position: relative;
}
.share-circle {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid rgba(227,225,234,.7);
  color: var(--text);
  transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  cursor: pointer;
}
.share-circle:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,38,48,.10); }
.share-circle svg { width: 22px; height: 22px; }
.share-circle.is-fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.share-circle.is-wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.share-circle.is-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; border-color: transparent; }
.share-circle.is-tk:hover { background: #000; color: #fff; border-color: #000; }

.share-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  position: relative;
}
.share-actions .btn { flex: 1; min-width: 140px; padding: 12px 18px; }
.share-actions .share-copy { background: #fff; }
.share-actions svg { width: 18px; height: 18px; }
@media (max-width: 540px) {
  .share-band-v2 { padding: 22px 18px; }
  .share-head h3 { font-size: 1.15rem; }
  .share-mockup { padding: 10px; gap: 12px; }
  .share-mockup-img { width: 72px; height: 72px; }
  .share-circle { width: 44px; height: 44px; }
  .share-actions { flex-direction: column; }
  .share-actions .btn { flex: 1 1 auto; width: 100%; }
}

/* Old .share-band (legacy in thank-you page) */
.share-band {
  margin-top: 36px;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(141,138,168,.18), rgba(221,160,122,.10));
  border: 1px solid rgba(141,138,168,.3);
  position: relative; overflow: hidden;
}
.share-band h3 { margin-bottom: 6px; }
.share-band p { margin-bottom: 20px; max-width: 480px; }
.share-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 600px) { .share-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.share-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px;
  background: var(--offwhite-2);
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 14px;
  color: var(--text); font-weight: 600; font-size: .74rem;
  transition: all .15s var(--ease);
  cursor: pointer;
  font-family: inherit;
}
.share-btn:hover { border-color: var(--mint-deep); background: rgba(141,138,168,.10); color: var(--teal-deep); transform: translateY(-1px); }
.share-btn svg { width: 20px; height: 20px; color: var(--teal-deep); }

.share-preview {
  margin-top: 22px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--gray-line);
  max-width: 460px;
}
.share-preview img { width: 78px; height: 78px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.share-preview-meta { min-width: 0; flex: 1; }
.share-preview-meta .small { font-size: .72rem; color: var(--gray); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.share-preview-meta .title { font-weight: 700; color: var(--text); font-size: .96rem; margin: 2px 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.share-preview-meta .url { font-size: .75rem; color: var(--gray); }

/* Organizer card */
.organizer-card {
  margin-top: 26px;
  padding: 22px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-line);
  display: flex; gap: 14px; align-items: center;
}
.organizer-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.organizer-card .small { font-size: .78rem; color: var(--gray); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.organizer-card .org-name { font-weight: 700; color: var(--text); }
.organizer-card .loc { font-size: .85rem; color: var(--gray); }
.report-link {
  font-size: .82rem; color: var(--gray); margin-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 4px 0;
  font-family: inherit; cursor: pointer;
}
.report-link svg { width: 14px; height: 14px; }
.report-link:hover { color: var(--coral-deep); }
.report-link:disabled { opacity: .5; cursor: wait; }

/* Sticky donate bar — mini-card with progress ring + raised + Donate CTA */
.sticky-donate {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(180%);
  width: min(640px, calc(100vw - 24px));
  z-index: 30;
  transition: transform .4s var(--ease);
  pointer-events: none;
}
.sticky-donate.show { pointer-events: auto; }
/* Safe area: push bottom padding so the last visible section doesn't sit
   under the bar. */
body:has(.sticky-donate.show) .urgent-section { padding-bottom: 140px; }
@media (max-width: 540px) {
  body:has(.sticky-donate.show) .urgent-section { padding-bottom: 130px; }
}
.sticky-donate.show { transform: translateX(-50%) translateY(0); }
/* Stacked layout: top row = ring + raised/goal · bottom row = wide Donate */
.sd-card {
  background: #fff;
  border-radius: 22px;
  padding: 14px 16px 14px;
  box-shadow: 0 18px 44px rgba(30,38,48,.22), 0 0 0 1px rgba(227,225,234,.55);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
}
.sd-ring {
  position: relative;
  width: 54px; height: 54px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sd-ring svg { width: 100%; height: 100%; display: block; }
.sd-pct {
  position: absolute;
  font-size: .88rem; font-weight: 800;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sd-info { flex: 1; min-width: 0; line-height: 1.2; }
.sd-info .sd-raised {
  font-weight: 800; color: var(--teal-deep);
  font-size: 1.35rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sd-info .sd-goal {
  font-size: .88rem; color: var(--gray);
  margin-top: 3px;
}
/* Full-width Donate, breaks to its own row */
.sd-cta {
  flex: 1 0 100%;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .005em;
}
@media (max-width: 540px) {
  .sticky-donate { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sd-card { padding: 12px 14px 12px; gap: 10px 12px; border-radius: 20px; }
  .sd-ring { width: 48px; height: 48px; }
  .sd-pct { font-size: .8rem; }
  .sd-info .sd-raised { font-size: 1.2rem; }
  .sd-info .sd-goal { font-size: .84rem; }
  .sd-cta { padding: 14px 22px; font-size: 1rem; min-height: 54px; }
}
@media (max-width: 360px) {
  .sd-card { padding: 10px 12px 10px; }
  .sd-ring { width: 44px; height: 44px; }
  .sd-info .sd-raised { font-size: 1.1rem; }
  .sd-cta { padding: 13px 18px; font-size: .96rem; min-height: 52px; }
}

/* ============================================
   Checkout
   ============================================ */
.checkout-wrap { max-width: 560px; margin: 0 auto; padding: 4px 0 48px; }
/* Donate page: tighten the empty space above "Back to campaign" */
section:has(> .container > .checkout-wrap) { padding-top: clamp(10px, 1.5vw, 18px); }

/* Donate page V3 — emotional */
.donate-hero {
  margin-bottom: 12px;
  position: relative;
}
.donate-hero-img {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--offwhite-2);
  position: relative;
}
.donate-hero-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30,38,48,.55));
  pointer-events: none;
}
.donate-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.donate-hero-meta {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  color: #fff;
  z-index: 1;
}
.donate-hero-cat {
  display: inline-block;
  background: rgba(255,255,255,.95);
  color: var(--teal-deep);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.donate-hero-title {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.donate-hero-org {
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.20);
}

/* Progress card — warm tone */
.donate-progress-card {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(221,160,122,.14), transparent 70%),
    linear-gradient(180deg, #fff, var(--offwhite-2));
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 16px;
  padding: 12px 16px 12px;
  margin-bottom: 20px;
}
.donate-progress-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.donate-progress-amount { display: flex; flex-direction: column; gap: 2px; }
.donate-progress-eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-deep);
}
.donate-progress-raised {
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-top: 1px;
}
.donate-progress-goal { font-size: .82rem; color: var(--gray); font-weight: 500; }
.donate-progress-pct {
  display: flex; flex-direction: column; align-items: flex-end;
  color: var(--coral-deep);
}
.donate-progress-pct .num {
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.donate-progress-pct .num small { font-size: .65em; font-weight: 800; }
.donate-progress-pct .lbl {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-top: 3px; opacity: .85;
}
.donate-progress-bar { margin-bottom: 10px; }
.donate-progress-bar .progress-bar { height: 8px; background: rgba(221,160,122,.18); }
.donate-progress-bar .progress-fill {
  background: linear-gradient(90deg, var(--mint-deep), var(--coral));
}
.donate-progress-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--text-soft);
}
.donate-progress-foot .dot { opacity: .4; }

.donate-encourage { display: none; }
.donate-helper-em { display: none; }

/* Suggested badge on amount */
.amount-btn { position: relative; }
.amount-suggested-badge {
  position: absolute; top: -8px; right: 8px;
  background: var(--coral);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(221,160,122,.30);
}

.donate-helper-em {
  font-size: .88rem;
  font-style: italic;
  color: var(--gray);
  text-align: center;
}

/* Trust card */
.donate-trust {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(141,138,168,.08);
  border: 1px solid rgba(141,138,168,.20);
  border-radius: 12px;
  display: flex; gap: 10px; align-items: center;
}
.donate-trust-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(141,138,168,.25);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.donate-trust-icon svg { width: 14px; height: 14px; }
.donate-trust p {
  font-size: .78rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin: 0;
}
.donate-trust a { color: var(--teal); text-decoration: underline; }

@media (max-width: 540px) {
  .donate-progress-card { padding: 16px 18px 14px; }
  .donate-progress-top { gap: 10px; }
  .donate-hero-meta { left: 14px; right: 14px; bottom: 14px; }
}

/* Donate page V2 — Fellow Hope-inspired */
.donate-backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 600;
  color: var(--teal);
  margin-bottom: 14px;
  padding: 4px 0;
  background: transparent; border: 0;
  cursor: pointer; font-family: inherit;
}
.donate-backlink:hover { color: var(--teal-deep); }
.donate-backlink svg { width: 16px; height: 16px; }

.donate-support {
  display: flex; gap: 14px; align-items: center;
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.donate-support::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  border-radius: 0 4px 4px 0;
}
.donate-support-img {
  width: 78px; height: 78px;
  border-radius: 12px; overflow: hidden;
  background: var(--offwhite-2);
  flex-shrink: 0;
}
.donate-support-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.donate-support-body { flex: 1; min-width: 0; }
.donate-support-eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-deep);
}
.donate-support-title {
  font-weight: 700; color: var(--teal-deep); font-size: .96rem;
  margin: 2px 0 4px;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.donate-support-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; color: var(--gray);
}
.donate-support-pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--mint-deep);
}
.donate-support-bar { margin-top: 8px; }
.donate-support-bar .progress-bar { height: 4px; }

.donate-amount-block { margin-bottom: 16px; }
.donate-amount-head { margin-bottom: 10px; }
.donate-amount-head h2 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--teal-deep);
  margin: 0;
}
.donate-amount-head p { font-size: .92rem; color: var(--gray); margin: 0; }

.donate-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 8px;
}
.donate-continue {
  width: 100%;
  justify-content: space-between;
}
.donate-continue[disabled] {
  opacity: .5; cursor: not-allowed;
  filter: grayscale(.2);
}
.donate-continue[disabled]:hover { transform: none; }
.donate-helper {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem;
  color: var(--gray);
}
.donate-helper svg { color: var(--mint-deep); }

/* Review rows */
.review-rows {
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 16px;
  padding: 4px 18px;
}
.review-rows .review-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(227,225,234,.55);
  font-size: .92rem;
}
.review-rows .review-row:last-child { border-bottom: 0; }
.review-rows .review-row .lbl { color: var(--gray); }
.review-rows .review-row .val { font-weight: 700; color: var(--text); }
.review-rows .review-row.total .val.big {
  font-size: 1.6rem; font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.02em;
}
.checkout-wrap .small-head { font-size: .82rem; color: var(--gray); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.support-card {
  display: flex; gap: 14px; align-items: center;
  background: #fff;
  border: 1px solid rgba(227,225,234,.5);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 28px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 10px 28px rgba(30,38,48,.06);
  position: relative;
  overflow: hidden;
}
.support-card::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  border-radius: 0 4px 4px 0;
}
.support-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.support-card .small { font-size: .66rem; color: var(--mint-deep); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.support-card .title { font-weight: 700; color: var(--teal-deep); margin: 4px 0; letter-spacing: -.01em; line-height: 1.3; }
.support-card .org { font-size: .85rem; color: var(--gray); }

.amount-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 0 0 14px;
}
/* Keep a strict 3×2 layout at every width (no collapse to 2 cols) */
@media (max-width: 540px) { .amount-grid { gap: 8px; } }
@media (max-width: 380px) { .amount-grid { gap: 6px; } }
.amount-btn {
  padding: 16px 12px;
  background: #fff; border: 1.5px solid var(--gray-line);
  border-radius: 14px;
  font-weight: 800; font-size: 1.15rem;
  color: var(--text);
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.01em;
  min-width: 0;
}
/* Narrower screens — shrink padding/text so $1,000 still fits cleanly in a 3-col row */
@media (max-width: 540px) {
  .amount-btn { padding: 14px 6px; font-size: 1rem; }
  .amount-suggested-badge { right: 4px; padding: 2px 6px; font-size: .54rem; }
}
@media (max-width: 380px) {
  .amount-btn { padding: 12px 4px; font-size: .92rem; border-radius: 12px; }
  .amount-suggested-badge { right: 2px; top: -7px; padding: 2px 5px; font-size: .5rem; }
}
.amount-btn:hover { border-color: var(--mint); background: rgba(141,138,168,.06); }
.amount-btn.on {
  background:
    linear-gradient(160deg, rgba(141,138,168,.32), rgba(141,138,168,.10) 60%, #fff);
  border-color: var(--mint-deep);
  color: var(--teal-deep);
  box-shadow: 0 0 0 4px rgba(141,138,168,.20), 0 8px 22px rgba(141,138,168,.30);
  transform: translateY(-1px);
}

.continue-block { text-align: center; margin-top: 30px; }
.continue-block .btn { min-width: 240px; padding: 16px 32px; font-size: 1.05rem; }
.continue-block .helper { font-size: .85rem; color: var(--gray); margin-top: 12px; font-style: italic; }

.review-card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-line);
  padding: 22px;
  margin-bottom: 22px;
}
.review-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gray-line); }
.review-row:last-child { border-bottom: 0; }
.review-row .lbl { color: var(--gray); }
.review-row .val { font-weight: 700; color: var(--text); }
.review-row .val.big { font-size: 1.4rem; color: var(--teal-deep); }
.checkout-actions { display: flex; gap: 12px; flex-direction: column; }
@media (min-width: 540px) { .checkout-actions { flex-direction: row; justify-content: flex-end; } }

/* ============================================
   Thank you (success page) — minimalist
   ============================================ */
.thanks-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 0 56px;
  text-align: center;
}

@keyframes tyFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tyIconPop {
  0%   { transform: scale(.45); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tyGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.08); }
}

/* ---- Icon (heart in halo) ---- */
.ty-icon {
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto 26px;
  display: flex; align-items: center; justify-content: center;
  animation: tyFade .5s ease-out both;
}
.ty-icon-glow {
  position: absolute; inset: -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(141,138,168,.45), rgba(141,138,168,0) 70%);
  animation: tyGlow 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.ty-icon-mark {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
  box-shadow:
    0 12px 28px rgba(92,86,132,.38),
    inset 0 1px 0 rgba(255,255,255,.4);
  animation: tyIconPop .6s cubic-bezier(.34,1.56,.64,1) .05s both;
}
.ty-icon-mark svg { width: 38px; height: 38px; }

/* ---- Pill ---- */
.ty-pill {
  display: inline-block;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mint-deep);
  background: rgba(141,138,168,.14);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  animation: tyFade .45s ease-out .08s both;
}

/* ---- Title (Cormorant Garamond, emotional) ---- */
.ty-title {
  margin: 0 auto 22px;
  max-width: 18ch;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.15rem);
  letter-spacing: -.024em;
  line-height: 1.15;
  color: var(--teal-deep);
  animation: tyFade .45s ease-out .12s both;
}

/* ---- Amount (small accent pill) ---- */
.ty-amount {
  display: inline-block;
  padding: 8px 18px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gray-line);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(30,38,48,.05);
  animation: tyFade .45s ease-out .16s both;
}

/* ---- Description ---- */
.ty-desc {
  margin: 0 auto 32px;
  max-width: 360px;
  font-size: .95rem;
  color: var(--text-soft);
  line-height: 1.6;
  animation: tyFade .45s ease-out .2s both;
}

/* ---- Primary CTA ---- */
.ty-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px;
  padding: 15px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow:
    0 8px 22px rgba(92,86,132,.38),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: tyFade .45s ease-out .24s both;
}
.ty-primary:hover,
.ty-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(92,86,132,.48),
    inset 0 1px 0 rgba(255,255,255,.32);
}
.ty-primary:active { transform: translateY(0); }

/* ---- Secondary actions (text links) ---- */
.ty-secondary {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 10px;
  margin: 18px auto 0;
  font-size: .88rem;
  animation: tyFade .45s ease-out .28s both;
}
.ty-secondary a,
.ty-secondary button {
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 4px 2px;
  font: inherit;
  color: var(--gray);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}
.ty-secondary a:hover,
.ty-secondary button:hover,
.ty-secondary a:focus-visible,
.ty-secondary button:focus-visible {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ty-sep {
  color: var(--gray-soft);
  user-select: none;
}

/* ---- Footer note ---- */
.ty-foot {
  margin-top: 56px;
  font-size: .82rem;
  color: var(--gray);
  line-height: 1.5;
  animation: tyFade .45s ease-out .34s both;
}
.ty-foot p { margin: 0; }
.ty-foot p + p { margin-top: 6px; }
.ty-foot-thanks {
  font-style: italic;
  color: var(--gray-soft);
}

@media (min-width: 640px) {
  .thanks-wrap { padding: 80px 0 72px; }
  .ty-icon { width: 100px; height: 100px; margin-bottom: 30px; }
  .ty-icon-mark svg { width: 42px; height: 42px; }
  .ty-foot { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ty-icon, .ty-icon-glow, .ty-icon-mark, .ty-pill, .ty-title,
  .ty-amount, .ty-desc, .ty-primary, .ty-secondary, .ty-foot {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   Start a fundraiser (wizard)
   ============================================ */
.wizard-wrap { max-width: 760px; margin: 0 auto; padding: 40px 0 60px; }
.wizard-stepper {
  display: flex; gap: 8px; margin-bottom: 30px;
}
.wizard-stepper .step {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--gray-line);
}
.wizard-stepper .step.on { background: var(--mint-deep); }
.wizard-stepper .step.done { background: var(--mint); }

.wizard-step h2 { margin-bottom: 8px; }
.wizard-step > p { margin-bottom: 24px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 16px;
  background: #fff; border: 1.5px solid var(--gray-line);
  border-radius: 12px;
  font-family: inherit; font-size: .95rem; color: var(--text);
  transition: border .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); outline: none; }
.field textarea { resize: vertical; min-height: 160px; }
.field .hint { font-size: .8rem; color: var(--gray); margin-top: 6px; }
.field .req { color: var(--coral-deep); font-weight: 800; margin-left: 2px; }
.field-error {
  margin-top: 6px;
  font-size: .82rem;
  color: var(--coral-deep);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.field-error::before {
  content: ''; width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C77E4F' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v4M12 16h.01'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  flex-shrink: 0;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select,
.field.has-error .rich-editor,
.field.has-error .goal-amount-wrap {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(221,160,122,.15);
}
.who-title {
  margin: 22px 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
}
.who-title .req { color: var(--coral-deep); font-weight: 800; margin-left: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.option-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}
.option-btn {
  background: #fff; border: 1.5px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-weight: 600; font-size: .9rem; color: var(--text);
  transition: all .15s var(--ease);
  min-height: 110px;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}
@media (max-width: 900px) {
  .option-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .option-grid .option-btn:nth-child(5) { grid-column: 1 / -1; flex-direction: row; min-height: 64px; padding: 14px 18px; gap: 14px; }
  .option-grid .option-btn:nth-child(5) svg { width: 24px; height: 24px; }
}
.option-btn:hover { border-color: var(--mint); }
.option-btn.on { background: linear-gradient(140deg, rgba(141,138,168,.20), #fff); border-color: var(--mint-deep); }
.option-btn svg { width: 28px; height: 28px; color: var(--teal); }

.duration-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 540px) { .duration-grid { grid-template-columns: repeat(2, 1fr); } }
.duration-btn {
  background: #fff; border: 1.5px solid var(--gray-line);
  border-radius: 12px; padding: 14px; font-weight: 700; color: var(--text);
  transition: all .15s var(--ease);
}
.duration-btn:hover { border-color: var(--mint); }
.duration-btn.on { background: var(--mint); color: var(--teal-deep); border-color: var(--mint-deep); }

/* Rich-text story editor */
.rich-editor {
  background: #fff;
  border: 1.5px solid var(--gray-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rich-editor:focus-within { border-color: var(--teal); }
.rich-content {
  min-height: 180px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
  outline: none;
  overflow-y: auto;
  max-height: 360px;
}
.rich-content:empty::before {
  content: attr(data-placeholder);
  color: var(--gray);
  pointer-events: none;
}
.rich-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; display: block; }
.rich-content a { color: var(--teal); text-decoration: underline; }
.rich-content p { margin: 0 0 8px; }

/* Story image figure inside the rich editor */
.story-img-wrap {
  position: relative;
  margin: 12px 0;
  display: block;
  max-width: 100%;
  user-select: none;
}
.story-img-wrap img {
  width: 100%; height: auto; max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 2px 6px rgba(30,38,48,.08);
}
.story-img-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
  background: var(--offwhite-2);
  border: 1px dashed var(--gray-line);
  border-radius: 12px;
  color: var(--gray);
  font-weight: 600;
  font-size: .9rem;
}
.story-img-remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  background: rgba(30,38,48,.7); color: #fff;
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease);
  font-family: inherit;
}
.story-img-remove:hover { background: rgba(30,38,48,.9); }
.story-img-remove:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* Hide remove buttons when not in edit context */
.review-story .story-img-remove,
#storyBody .story-img-remove { display: none; }

/* Story figure rendered on campaign page */
.story-figure { margin: 18px 0; }
.story-figure img {
  width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 10px 24px rgba(30,38,48,.08);
  display: block;
}
#storyBody a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#storyBody a:hover { color: var(--teal-deep); }

.rich-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--gray-line);
  background: var(--offwhite-2);
}
.rich-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--gray-line);
  color: var(--teal-deep);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.rich-tool:hover { background: rgba(141,138,168,.18); border-color: var(--mint-deep); }
.rich-tool svg { width: 16px; height: 16px; }
.rich-counter {
  margin-left: auto;
  font-size: .78rem;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.rich-counter.ok { color: var(--mint-deep); font-weight: 600; }

/* Goal step — premium card */
.goal-card {
  background: #fff;
  border-radius: 22px;
  padding: 26px 24px 24px;
  border: 1px solid rgba(227,225,234,.55);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 14px 36px rgba(30,38,48,.06);
  margin-top: 4px;
}
.goal-label {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.goal-label-text {
  font-size: .98rem;
  font-weight: 700;
  color: var(--teal-deep);
  letter-spacing: -.01em;
}
.goal-label-meta {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint-deep);
}
.goal-amount-field { margin: 0 0 18px; }
.goal-amount-wrap {
  display: flex; align-items: center;
  background: linear-gradient(180deg, var(--offwhite-2), #fff);
  border: 1.5px solid var(--gray-line);
  border-radius: 18px;
  padding: 10px 22px;
  transition: border-color .15s var(--ease), box-shadow .2s var(--ease), background .15s var(--ease);
}
.goal-amount-wrap:focus-within {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 4px rgba(141,138,168,.18), 0 8px 22px rgba(141,138,168,.18);
  background: #fff;
}
.goal-amount-currency {
  font-size: 2.6rem; font-weight: 800;
  color: var(--mint-deep);
  margin-right: 8px;
  line-height: 1;
  opacity: .8;
}
.goal-amount-input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-family: inherit;
  font-size: 2.6rem; font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  padding: 14px 0;
  width: 100%;
  min-width: 0;
  line-height: 1.05;
}
.goal-amount-input::placeholder { color: rgba(107,114,128,.35); font-weight: 700; }
.goal-amount-hint {
  font-size: .8rem;
  color: var(--gray);
  margin-top: 10px;
  padding: 0 4px;
}

.goal-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-line), transparent);
  margin: 20px 0;
}

.goal-duration-field { margin: 0; }
.goal-duration-field .duration-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .goal-duration-field .duration-grid { grid-template-columns: repeat(4, 1fr); }
}
.duration-btn {
  background: #fff;
  border: 1.5px solid var(--gray-line);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease), color .15s var(--ease);
  color: var(--text);
}
.duration-btn:hover { border-color: var(--mint); background: rgba(141,138,168,.05); }
.duration-btn.on {
  background: linear-gradient(160deg, rgba(141,138,168,.32), rgba(141,138,168,.10) 60%, #fff);
  border-color: var(--mint-deep);
  color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.18), 0 6px 18px rgba(141,138,168,.20);
  transform: translateY(-1px);
}
.duration-main { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.duration-sub { font-size: .72rem; color: var(--gray); font-weight: 600; }
.duration-btn.on .duration-sub { color: var(--mint-deep); }

@media (max-width: 540px) {
  .goal-card { padding: 22px 18px 20px; }
  .goal-amount-currency { font-size: 2.3rem; }
  .goal-amount-input { font-size: 2.3rem; padding: 12px 0; }
}

/* Dropzone — large 1:1 */
.dropzone {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 2px dashed var(--gray-line);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, var(--offwhite-2));
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--mint-deep);
  background: linear-gradient(180deg, #fff, rgba(141,138,168,.10));
}
.dropzone.drag-over { transform: scale(1.01); }
.dropzone.has-error { border-color: var(--coral); }
.dropzone-inner {
  text-align: center;
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.dropzone-icon {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(141,138,168,.25), rgba(141,138,168,.08));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.dropzone-icon svg { width: 42px; height: 42px; }
.dropzone-title {
  font-size: 1.15rem; font-weight: 700;
  color: var(--teal-deep);
  letter-spacing: -.01em;
}
.dropzone-sub {
  font-size: .92rem;
  color: var(--gray);
}
.dropzone-counter {
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--mint-deep);
  background: rgba(141,138,168,.16);
  padding: 6px 14px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Media gallery */
.media-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 18px;
}
@media (max-width: 540px) { .media-gallery { grid-template-columns: repeat(3, 1fr); } }
.media-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--offwhite-2);
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  border: 2px solid transparent;
}
.media-thumb:hover { transform: translateY(-2px); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb.is-main {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.30), 0 6px 18px rgba(141,138,168,.30);
}
.media-thumb .main-badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--mint-deep);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(30,38,48,.20);
}
.media-thumb .remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(30,38,48,.7); color: #fff;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  transition: background .15s ease;
}
.media-thumb .remove:hover { background: var(--coral-deep); }
.media-hint { text-align: center; margin-top: 12px; }

/* Review extras grid */
.review-extras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 10px;
}
@media (max-width: 540px) { .review-extras { grid-template-columns: repeat(3, 1fr); } }
.review-extra {
  aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--offwhite-2);
}
.review-extra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-story {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.review-story img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; display: block; }
.review-story a { color: var(--teal); text-decoration: underline; overflow-wrap: anywhere; }
.review-story p { margin: 0 0 8px; overflow-wrap: anywhere; word-break: break-word; }

.review-story-wrap { position: relative; max-width: 100%; }
.review-story-wrap.is-collapsed .review-story {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.review-story-wrap.is-expanded .review-story {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.review-story-toggle {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--gray-line);
  color: var(--teal);
  font: inherit; font-weight: 700; font-size: .85rem;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.review-story-toggle:hover { background: rgba(141,138,168,.10); border-color: var(--mint-deep); color: var(--teal-deep); }
.review-story-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.review-preview {
  position: relative;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(227,225,234,.65);
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(30,38,48,.03),
    0 14px 40px -10px rgba(30,38,48,.10),
    0 8px 18px -10px rgba(30,38,48,.06);
  max-width: 100%;
  min-width: 0;
}
.review-preview * { min-width: 0; max-width: 100%; }
.review-preview-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: rgba(30,38,48,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.review-preview-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--offwhite-2);
}
.review-preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-preview-cat {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--teal-deep);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(30,38,48,.10);
}
.review-preview-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray); font-weight: 600; font-size: .9rem;
  background: var(--offwhite-2);
}
.review-extras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px;
}
.review-extra {
  aspect-ratio: 1/1; overflow: hidden; border-radius: 8px;
  background: var(--offwhite-2);
}
.review-preview-body {
  padding: 22px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.review-preview-body > * { margin: 0; }
.review-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere; word-break: break-word;
}
.review-org {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-org-avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .02em;
}
.review-org-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.review-org-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--mint-deep);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.review-org-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--teal-deep);
  overflow-wrap: anywhere; word-break: break-word;
}
/* Goal block — just label + amount, no progress bar (always 0 in preview) */
.review-goal-block {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(227,225,234,.55);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-goal-label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mint-deep);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-goal-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
@media (max-width: 540px) {
  .review-preview-body { padding: 18px 18px 20px; gap: 12px; }
  .review-title { font-size: 1.25rem; }
  .review-raised { font-size: 1.3rem; }
}
.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.checklist li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text); }
.checklist li svg { width: 18px; height: 18px; color: var(--mint-deep); }
.checklist li.off { color: var(--gray); }
.checklist li.off svg { color: var(--gray-soft); }

/* Review step — confirmation block (tight to preview above) */
.review-confirm { margin-top: 0; }
.review-confirm-head {
  display: flex;
  gap: 14px;
  background: linear-gradient(180deg, rgba(141,138,168,.10) 0%, rgba(141,138,168,.04) 100%);
  border: 1px solid rgba(141,138,168,.28);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 6px 18px -10px rgba(141,138,168,.30);
}
.review-confirm-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(141,138,168,.22);
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-confirm-icon svg { width: 20px; height: 20px; }
.review-confirm-text { min-width: 0; flex: 1; }
.review-confirm-text h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 2px 0 6px;
}
.review-confirm-text p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Confirmation row — full-row clickable, custom checkbox box */
.review-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 0;
  padding: 16px 18px;
  border: 1px solid var(--gray-line);
  border-radius: 14px;
  background: #fff;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.review-confirm-check:hover { border-color: var(--mint); }
.review-confirm-check:focus-within {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.22);
}

/* Custom checkbox visual */
.review-confirm-check .rcc-box {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.review-confirm-check .rcc-box input[type="checkbox"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.review-confirm-check .rcc-mark {
  position: absolute; inset: 0;
  border: 1.8px solid var(--gray-soft);
  border-radius: 6px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .12s;
}
.review-confirm-check .rcc-mark svg {
  width: 14px; height: 14px;
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s, transform .12s;
}
.review-confirm-check .rcc-box input:checked ~ .rcc-mark {
  background: var(--mint-deep);
  border-color: var(--mint-deep);
}
.review-confirm-check .rcc-box input:checked ~ .rcc-mark svg {
  opacity: 1;
  transform: scale(1);
}
.review-confirm-check .rcc-box input:focus-visible ~ .rcc-mark {
  outline: 2px solid var(--mint-deep);
  outline-offset: 2px;
}

.review-confirm-check .rcc-copy {
  flex: 1; min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.review-confirm-check a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(45,58,74,.32);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.review-confirm-check a:hover {
  color: var(--teal-deep);
  text-decoration-color: var(--teal-deep);
}

.review-confirm-check.has-error {
  border-color: var(--coral);
  background: rgba(221,160,122,.06);
}
.review-confirm-check.has-error .rcc-mark { border-color: var(--coral); }
.review-confirm-error {
  margin-top: 10px;
  font-size: .85rem;
}

@media (max-width: 540px) {
  .review-confirm-head { padding: 16px 16px 14px; gap: 12px; border-radius: 16px; }
  .review-confirm-icon { width: 36px; height: 36px; border-radius: 11px; }
  .review-confirm-icon svg { width: 18px; height: 18px; }
  .review-confirm-text h3 { font-size: .98rem; }
  .review-confirm-text p { font-size: .85rem; }
  .review-confirm-check { padding: 14px 14px; gap: 12px; font-size: .88rem; }
}

.wizard-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(227,225,234,.6);
}
/* Review step — tighten the gap between checkbox row and Back/Publish */
.wizard-step:has(.review-confirm) + .wizard-nav {
  margin-top: 10px;
  padding-top: 12px;
}
/* Step 1 "Your info" — no Back; center the single Continue button */
.wizard-nav.wizard-nav-single { justify-content: center; }
.wizard-nav #prevBtn { padding: 12px 20px; }
.wizard-nav #nextBtn {
  padding: 13px 26px;
  font-size: 1rem;
  min-height: 48px;
  box-shadow: 0 2px 6px rgba(141,138,168,.35), 0 10px 28px rgba(141,138,168,.30);
}
.wizard-nav #nextBtn:hover { box-shadow: 0 4px 10px rgba(141,138,168,.40), 0 14px 32px rgba(141,138,168,.36); transform: translateY(-1px); }
@media (max-width: 600px) {
  /* Mobile: keep natural order — Back on the LEFT, Continue on the RIGHT */
  .wizard-nav { gap: 10px; }
  .wizard-nav #nextBtn {
    flex: 1; min-height: 54px; padding: 14px 22px; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .wizard-nav #prevBtn { padding: 12px 16px; min-height: 54px; flex: 0 0 auto; }
  .wizard-nav.wizard-nav-single #nextBtn { flex: 0 1 auto; min-width: 220px; }
}

/* ============================================
   Submitted-for-review confirmation (start.html)
   ============================================ */
.subrev-section {
  background:
    radial-gradient(50% 45% at 12% 0%, rgba(221,160,122,.16), transparent 62%),
    radial-gradient(52% 50% at 92% 100%, rgba(141,138,168,.20), transparent 64%),
    var(--offwhite);
}
.subrev-done {
  max-width: 520px; margin: 0 auto;
  padding: clamp(18px, 4vw, 40px) 0;
  display: flex; flex-direction: column; gap: 16px;
}
.subrev-card {
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  padding: clamp(26px, 5vw, 38px) clamp(22px, 4vw, 34px);
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 18px 44px -22px rgba(45,58,74,.42);
}
.subrev-check {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  box-shadow: 0 8px 22px -6px rgba(199,126,79,.55), 0 0 0 6px rgba(221,160,122,.14);
}
.subrev-check svg { width: 26px; height: 26px; }
.subrev-card h1 {
  font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15;
  margin: 0 0 10px; color: var(--teal-deep);
}
.subrev-lead {
  font-size: .98rem; line-height: 1.55; color: var(--text-soft);
  margin: 0 auto 18px; max-width: 420px;
}
.subrev-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600; color: var(--teal-deep);
  background: rgba(141,138,168,.14);
  border: 1px solid rgba(141,138,168,.28);
  padding: 8px 16px; border-radius: 999px;
}
.subrev-status b { font-weight: 800; }
.subrev-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 3px rgba(221,160,122,.25);
}

/* Campaign preview card */
.subrev-preview {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid rgba(227,225,234,.7);
  border-radius: 18px; padding: 12px; text-align: left;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 12px 30px -22px rgba(30,38,48,.5);
}
.subrev-preview-media {
  width: 96px; height: 72px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden; background: var(--offwhite-2);
}
.subrev-preview-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subrev-preview-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.subrev-preview-cat {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mint-deep);
}
.subrev-preview-body h3 {
  font-size: 1rem; line-height: 1.3; color: var(--teal-deep); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.subrev-preview-status {
  align-self: flex-start;
  font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--coral-deep);
  background: rgba(221,160,122,.16);
  padding: 3px 10px; border-radius: 999px;
}

/* Actions — close to the content, not pinned to the bottom */
.subrev-actions { display: flex; gap: 12px; justify-content: center; margin-top: 4px; }
.subrev-actions .btn { min-height: 48px; }
@media (max-width: 460px) {
  .subrev-actions { flex-direction: column; }
  .subrev-actions .btn { width: 100%; justify-content: center; }
  .subrev-preview-media { width: 84px; height: 64px; }
}

/* ============================================
   Legal / About / Contact
   ============================================ */
.page-head { padding: 50px 0 24px; text-align: center; }
.page-head h1 { margin-bottom: 12px; }
.page-head .lead { max-width: 620px; margin: 0 auto; }

/* Keep dark CTA card text white even inside about/legal pages */
.about-wrap .cta-band h2,
.legal-wrap .cta-band h2 { color: #fff; margin-top: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.about-wrap .cta-band p,
.legal-wrap .cta-band p { color: rgba(255,255,255,.82); margin-top: 0; }

.legal-wrap, .about-wrap, .contact-wrap {
  max-width: 760px; margin: 0 auto; padding: 20px 0 80px;
}
.legal-wrap h2, .about-wrap h2 { margin-top: 48px; margin-bottom: 14px; font-size: 1.45rem; scroll-margin-top: 96px; letter-spacing: -0.01em; }
.legal-wrap h3 { margin-top: 26px; margin-bottom: 8px; font-size: 1.05rem; scroll-margin-top: 96px; color: var(--teal-deep); }
.legal-wrap p, .about-wrap p { margin-bottom: 14px; color: var(--text); line-height: 1.75; }
.legal-wrap ul, .about-wrap ul { padding-left: 22px; margin-bottom: 16px; }
.legal-wrap ul li, .about-wrap ul li { margin-bottom: 8px; color: var(--text); line-height: 1.65; }
.legal-wrap > p:first-of-type { font-size: 1.02rem; color: var(--teal-deep); }
.legal-meta { font-size: .85rem; color: var(--gray); padding: 10px 14px; background: var(--offwhite-2); border-radius: 10px; display: inline-block; border: 1px solid var(--gray-line); }

/* Legal page — table of contents */
.legal-toc {
  margin: 28px 0 40px;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, #fff 0%, var(--offwhite) 100%);
  border: 1px solid var(--gray-line);
  border-radius: 18px;
}
.legal-toc-label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin: 0 0 14px;
}
/* Vertical numbered index — numbers auto-generated so they always match order */
.legal-toc-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: toc;
}
.legal-toc-list li { margin: 0; counter-increment: toc; }
.legal-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 12px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.legal-toc-list a::before {
  content: counter(toc);
  flex: 0 0 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .82rem;
  color: var(--coral-deep);
  transition: color .15s ease;
}
.legal-toc-list a:hover,
.legal-toc-list a:focus-visible {
  background: var(--offwhite-2);
  color: var(--teal);
}
.legal-toc-list a:hover::before,
.legal-toc-list a:focus-visible::before { color: var(--coral); }

/* Legal page — soft callout for important notes */
.legal-callout {
  margin: 18px 0 20px;
  padding: 16px 18px;
  background: var(--offwhite-2);
  border-left: 3px solid var(--mint-deep);
  border-radius: 10px;
}
.legal-callout p { margin-bottom: 8px; }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout strong { color: var(--teal-deep); }

@media (max-width: 640px) {
  .legal-toc { padding: 18px 16px 14px; border-radius: 14px; margin: 22px 0 32px; }
  .legal-toc-list { gap: 1px; }
  .legal-toc-list a { font-size: .9rem; padding: 9px 10px; gap: 12px; }
  .legal-wrap h2 { font-size: 1.25rem; margin-top: 38px; }
  .legal-wrap h3 { font-size: 1rem; }
}

.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
@media (max-width: 600px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid div { background: #fff; padding: 18px; border-radius: 12px; border: 1px solid var(--gray-line); font-weight: 600; }

.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--gray-line); padding: 24px; }
.contact-info h3 { margin-bottom: 8px; }
.contact-info a { font-weight: 600; }

/* Page transition overlay */
.page-transition {
  position: fixed; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(141,138,168,.18), transparent 60%),
    radial-gradient(50% 50% at 50% 100%, rgba(221,160,122,.06), transparent 60%),
    var(--offwhite);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.page-transition.is-loading {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.page-transition-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: pt-rise .35s ease;
}
@keyframes pt-rise {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.page-transition-logo {
  width: auto; height: 62px;
  object-fit: contain;
  animation: pt-pulse 1.4s ease-in-out infinite;
}
/* Header / sidebar brand logo image */
.brand-logo { height: 40px; width: auto; display: block; }
@media (max-width: 900px) { .brand-logo { height: 36px; } }
/* Footer logo — full lockup turned solid white for the dark footer */
.footer-logo { height: 48px; width: auto; display: block; filter: brightness(0) invert(1); }
@media (max-width: 760px) { .footer-logo { height: 44px; } }
.page-transition-brand {
  font-family: 'Cormorant Garamond', 'Inter', system-ui, serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  font-optical-sizing: auto;
  line-height: 1;
}
.page-transition-label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray);
  letter-spacing: .01em;
  margin-top: -4px;
}
@keyframes pt-pulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50%      { opacity: 1; transform: scale(1.06); }
}
.page-transition-bar {
  width: 140px; height: 3px;
  border-radius: 999px;
  background: rgba(141,138,168,.20);
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.page-transition-bar span {
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--mint-deep), transparent);
  animation: pt-slide 1.1s ease-in-out infinite;
}
@keyframes pt-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition-inner { animation: none; }
  .page-transition-logo { animation: none; opacity: .8; }
  .page-transition-bar span { animation: none; left: 0; width: 100%; opacity: .5; }
  .page-transition { transition: opacity .1s ease; }
}

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--teal-deep); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: all .3s var(--ease);
  z-index: 100;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--offwhite-2), var(--gray-line), var(--offwhite-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 24px; }

/* ============================================
   Image fallback (when img errors)
   ============================================ */
.card-media.img-broken,
.ac-media.img-broken,
.uc-media.img-broken,
.mc-thumb.img-broken,
.mc-hero.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.30), rgba(221,160,122,.20));
  position: relative;
  overflow: hidden;
}
.card-media.img-broken::before,
.ac-media.img-broken::before,
.uc-media.img-broken::before,
.mc-hero.img-broken::before {
  content: '';
  position: absolute;
  top: 28%; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3A4A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/><path d='m21 16-4-4-8 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.card-media.img-broken::after,
.ac-media.img-broken::after,
.uc-media.img-broken::after,
.mc-hero.img-broken::after {
  content: attr(data-category);
  position: absolute;
  top: 58%; left: 0; right: 0;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  opacity: .7;
  pointer-events: none;
}
.mc-thumb.img-broken::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3A4A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'><rect x='3' y='5' width='18' height='14' rx='3'/><circle cx='9' cy='11' r='2'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
}

/* Almost-card media wrapper */
.ac-media {
  width: 100%; aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--offwhite-2);
  position: relative;
}
.ac-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-thumb {
  width: 60px; height: 60px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--offwhite-2);
  position: relative;
}
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-thumb.img-broken { background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.18)); }
.mc-hero {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--offwhite-2);
  position: relative;
  margin-bottom: 12px;
}
.mc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-hero.img-broken { background: linear-gradient(135deg, rgba(141,138,168,.28), rgba(221,160,122,.18)); }


/* Urgent media wrapper */
.uc-media { position: relative; width: 100%; aspect-ratio: 16/10; background: var(--offwhite-2); overflow: hidden; }
.uc-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }

/* ============================================
   Carousel wrapper + dynamic fade
   ============================================ */
.trail-wrap {
  position: relative;
  --fade: 32px;
}
.trail-wrap.fade-right::after,
.trail-wrap.fade-left::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
  transition: opacity .2s var(--ease);
}
.trail-wrap.fade-right::after {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--offwhite));
}
.trail-wrap.fade-left::before {
  left: 0;
  background: linear-gradient(270deg, transparent, var(--offwhite));
}
.almost-there .trail-wrap.fade-right::after { background: linear-gradient(90deg, transparent, rgba(229,239,231,1)); }
.almost-there .trail-wrap.fade-left::before { background: linear-gradient(270deg, transparent, rgba(229,239,231,1)); }
.urgent-section .trail-wrap.fade-right::after { background: linear-gradient(90deg, transparent, rgba(172,169,196,1)); }
.urgent-section .trail-wrap.fade-left::before { background: linear-gradient(270deg, transparent, rgba(172,169,196,1)); }

/* Hide scrollbars on carousels */
.almost-trail, .urgent-trail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.almost-trail::-webkit-scrollbar,
.urgent-trail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

/* Trust card equal height */
.trust-grid { align-items: stretch; }
.trust-item { height: 100%; }

/* Mobile carousel sizing — smaller cards, no scrollbar */
@media (max-width: 980px) {
  .almost-trail > * { flex: 0 0 72%; max-width: 72%; }
}
@media (max-width: 600px) {
  .almost-trail > * { flex: 0 0 82%; max-width: 82%; }
  .urgent-trail > * { flex: 0 0 86%; max-width: 86%; }
}
@media (max-width: 420px) {
  .almost-trail > * { flex: 0 0 88%; max-width: 88%; }
}

/* No horizontal overflow safety */
html, body { overflow-x: hidden; }

/* ============================================
   MOBILE HOME REFINEMENT
   ============================================ */
@media (max-width: 760px) {

  /* Section rhythm — tight mobile */
  section { padding: 28px 0; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 4px; }
  .section-head .lead { font-size: .92rem; }
  .eyebrow { font-size: .7rem; letter-spacing: .12em; }
  .grid-cards { gap: 14px; }
  .grid-cards + .mt-4 { margin-top: 16px; }

  /* Hero — photo on top, copy below */
  .hero { padding: 20px 0 28px; }
  .hero .container { position: relative; z-index: 2; }
  .hero-content { max-width: 100%; }
  .hero .eyebrow { display: inline-block; margin-bottom: 8px; }
  .hero h1 {
    font-size: 2.1rem; line-height: 1.06;
    margin: 0 0 12px;
    max-width: 100%;
    letter-spacing: -.025em;
    font-weight: 800;
  }
  .hero h1 .accent { color: var(--mint-deep); }
  .hero .lead {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 18px;
    color: var(--text-soft);
    max-width: 100%;
    font-weight: 500;
  }
  .hero .hero-actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero .hero-actions .btn { width: 100%; padding: 15px 22px; font-size: 1rem; }
  .hero-trust { gap: 8px 10px; margin-top: 18px; }
  .hero-trust li { font-size: .8rem; padding: 5px 11px; }

  /* Filter chips — single horizontal row, no wrap */
  .filter-row {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    gap: 8px;
    margin: 0 -18px 22px;
    padding: 4px 18px 8px;
    scroll-padding: 0 18px;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; padding: 8px 14px; font-size: .82rem; }

  /* Active fundraisers cards — single column, refined proportions */
  .grid-cards { gap: 14px; }
  .card { border-radius: 18px; box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 6px 18px rgba(30,38,48,.05); }
  .card-media { aspect-ratio: 16/9; }
  .card-body { padding: 14px 16px 16px; gap: 8px; }
  .card-title { font-size: 1rem; line-height: 1.3; }
  .card-org { font-size: .8rem; }
  .card-cat { font-size: .66rem; padding: 5px 10px; }
  .card-impact { font-size: .78rem; }
  .progress-bar { height: 5px; }

  /* "View all" button under grid */
  .grid-cards + .mt-4 { margin-top: 22px; }

  /* HOW IT WORKS — lighter, less heavy */
  .howit-grid { gap: 22px; }
  .step-card { padding: 16px 18px; border-radius: 16px; border-width: 1px; gap: 14px; }
  .step-card .step-num { width: 32px; height: 32px; font-size: .88rem; }
  .step-card h4 { font-size: .98rem; }
  .step-card p { font-size: .86rem; line-height: 1.5; }
  .step-card.active { box-shadow: 0 0 0 3px rgba(141,138,168,.16); }
  .step-card.active::before { width: 2px; top: 16px; bottom: 16px; }

  .preview-pane {
    padding: 22px;
    border-radius: 20px;
    min-height: auto;
    box-shadow: 0 8px 28px rgba(30,38,48,.12);
  }
  .mini-card { padding: 8px; border-radius: 12px; }
  .mini-card .mc-title { font-size: .82rem; }
  .mini-campaign { padding: 12px; border-radius: 14px; }
  .mini-campaign h5 { font-size: .9rem; }
  .mini-amounts span { padding: 7px; font-size: .74rem; }
  .mini-done .check { width: 60px; height: 60px; margin-bottom: 12px; }
  .mini-done .check svg { width: 28px; height: 28px; }
  .mini-done h5 { font-size: 1rem; }
  .mini-done p { font-size: .82rem; margin-bottom: 14px; }
  .mini-share span { width: 36px; height: 36px; }

  /* ALMOST THERE & URGENT — tight */
  .almost-there { padding: 28px 0 32px; }
  .urgent-section { padding: 28px 0 24px; }
  .almost-there::before { display: none; } /* hide dotted line on mobile */

  .trail-wrap {
    position: relative;
    margin: 0 -18px;
  }
  /* Remove fade overlays on mobile — let edges breathe naturally with peek */
  .trail-wrap.fade-left::before,
  .trail-wrap.fade-right::after { display: none; }

  .almost-trail, .urgent-trail {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    padding: 6px 18px 8px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
  }
  .almost-trail > *, .urgent-trail > * {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    scroll-snap-align: start;
  }
  /* Trailing spacer so last card can fully snap to start */
  .almost-trail::after, .urgent-trail::after {
    content: '';
    flex: 0 0 4px;
  }

  /* Refine almost-card on mobile */
  .almost-card {
    padding: 14px;
    border-radius: 18px;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 6px 18px rgba(30,38,48,.06);
  }
  .almost-card img { aspect-ratio: 16/10; border-radius: 12px; }
  .almost-card h4 { font-size: .94rem; line-height: 1.3; }
  .almost-card .near-badge { font-size: .62rem; padding: 4px 9px; top: -8px; }

  /* Refine urgent-card on mobile */
  .urgent-card { border-radius: 18px; }
  .urgent-card .uc-media { aspect-ratio: 16/10; }
  .urgent-card .uc-body { padding: 14px 16px 16px; }
  .urgent-card h4 { font-size: .96rem; line-height: 1.3; margin-bottom: 6px; }
  .urgent-card .pct { font-size: .8rem; }
  .urgent-card .urgent-badge { font-size: .62rem; padding: 4px 9px; }

  /* Soften urgent section background (no harsh circle) */
  .urgent-section::before { display: none; }

  /* "View all urgent campaigns" button — better placement on mobile */
  .urgent-head { gap: 14px; margin-bottom: 22px; }
  .urgent-head .btn { width: auto; padding: 10px 18px; font-size: .88rem; }

  /* TRUST — 2x2 grid, compact and balanced */
  .trust-grid { gap: 12px; }
  .trust-item {
    padding: 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(227,225,234,.6);
    background: linear-gradient(180deg, #fff, rgba(141,138,168,.04));
    box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 4px 14px rgba(30,38,48,.04);
    gap: 10px;
  }
  .trust-item .trust-icon { width: 42px; height: 42px; border-radius: 12px; }
  .trust-item .trust-icon svg { width: 22px; height: 22px; }
  .trust-item h4 { font-size: .95rem; line-height: 1.25; }
  .trust-item p { font-size: .82rem; line-height: 1.5; }

  /* CTA — tight */
  .cta-band {
    padding: 24px 20px 22px;
    border-radius: 22px;
    background: linear-gradient(155deg, var(--teal), var(--teal-deep));
  }
  .cta-band::before {
    background: radial-gradient(60% 50% at 50% 0%, rgba(141,138,168,.20), transparent 70%);
  }
  .cta-band h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 6px; }
  .cta-band p { font-size: .9rem; margin: 0 auto 16px; }
  .cta-band .hero-actions { flex-direction: column; gap: 10px; }
  .cta-band .hero-actions .btn { width: 100%; padding: 13px 22px; font-size: .95rem; }

  /* Footer rhythm */
  .site-footer { padding: 32px 0 18px; margin-top: 0; }
  .footer-grid { gap: 22px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 1.95rem; }
  .section-head h2 { font-size: 1.4rem; }
  .almost-trail > *, .urgent-trail > * { flex-basis: 84% !important; max-width: 84% !important; }
  .card-body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}


/* ============================================================================
   CAMPAIGN DETAIL — Trust card, Donations, Words, Organizer row (NEW)
   ============================================================================ */

/* ---- Trust / Donation protected — refined card ---- */
.trust-card {
  background: linear-gradient(180deg, rgba(141,138,168,.10) 0%, rgba(141,138,168,.05) 100%);
  border: 1px solid rgba(141,138,168,.28);
  border-radius: 16px;
  padding: 16px 18px 14px;
  margin-top: 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 4px 14px -8px rgba(141,138,168,.18);
}
.trust-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.trust-card-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(141,138,168,.22);
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-card-icon svg { width: 20px; height: 20px; }
.trust-card-head-text { min-width: 0; flex: 1; }
.trust-card-title {
  font-weight: 700;
  color: var(--teal-deep);
  font-size: .98rem;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0 0 2px;
}
.trust-card-sub {
  font-size: .8rem;
  color: var(--gray);
  line-height: 1.4;
  margin: 0;
}
.trust-card-points {
  list-style: none;
  margin: 0 0 10px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(141,138,168,.22);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.trust-card-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  color: var(--teal-deep);
  line-height: 1.35;
}
.trust-card-points .tcp-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--mint-deep);
  padding: 2px;
  background: rgba(141,138,168,.22);
  border-radius: 999px;
  box-sizing: content-box;
}
.trust-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  padding: 2px 0;
  transition: color .15s, gap .15s;
}
.trust-card-link:hover {
  color: var(--teal-deep);
  gap: 6px;
}
@media (max-width: 540px) {
  .trust-card { padding: 14px 16px 12px; }
  .trust-card-title { font-size: .94rem; }
  .trust-card-points li { font-size: .82rem; }
}

/* ---- Reactions block — minimal pills, icon + count only ---- */
.reactions-block {
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 16px;
  padding: 16px 18px 14px;
  margin-top: 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.02);
}
.reactions-head { margin-bottom: 12px; }
.reactions-head .eyebrow { font-size: .7rem; }
.reactions-head h3 {
  font-size: .94rem;
  font-weight: 700;
  color: var(--teal-deep);
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 4px 0 0;
}
.reactions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.react-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--offwhite);
  border: 1px solid rgba(227,225,234,.85);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .12s var(--ease);
}
.react-btn:hover {
  background: #fff;
  border-color: rgba(141,138,168,.5);
  transform: translateY(-1px);
}
.react-btn.on {
  background: rgba(141,138,168,.16);
  border-color: var(--mint-deep);
  color: var(--teal-deep);
}
.react-btn .emo {
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  transition: color .15s var(--ease);
}
.react-btn .emo svg { width: 15px; height: 15px; }
.react-btn.on .emo { color: var(--mint-deep); }
/* Visually hide the label but keep it for screen readers */
.react-btn .rb-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.react-btn .num {
  font-weight: 700;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
}
.react-btn.on .num { color: var(--mint-deep); }
.react-btn:focus-visible {
  outline: 2px solid var(--mint-deep);
  outline-offset: 2px;
}

/* ---- Donations block ---- */
.donations-block {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 22px;
  padding: 24px 22px;
  margin-top: 22px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 6px 18px rgba(30,38,48,.04);
}
.donations-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.donations-head h3 {
  font-size: 1.08rem; font-weight: 700; color: var(--teal-deep);
  letter-spacing: -.01em; margin: 0;
}
.donations-count {
  font-size: .82rem; font-weight: 700; color: var(--mint-deep);
  background: rgba(141,138,168,.14);
  padding: 5px 12px; border-radius: 999px;
}
.donations-list {
  display: flex; flex-direction: column; gap: 0;
}
.donation-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(227,225,234,.55);
}
.donation-row:last-child { border-bottom: 0; }
.donation-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint-soft), var(--mint));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem;
  flex-shrink: 0;
}
.donation-meta { min-width: 0; }
.donation-name {
  font-weight: 700; color: var(--text); font-size: .94rem;
  line-height: 1.2;
}
.donation-when {
  font-size: .8rem; color: var(--gray); margin-top: 2px;
}
.donation-amount {
  font-weight: 800; color: var(--teal-deep); font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.donations-toggle { margin-top: 14px; }
@media (max-width: 540px) {
  .donations-block { padding: 20px 18px; }
  .donations-head { flex-direction: column; align-items: flex-start; }
}

/* Recent / Top tabs inside donations */
.donations-tabs {
  display: inline-flex;
  background: var(--offwhite-2);
  padding: 4px;
  border-radius: 999px;
  gap: 0;
  margin: 4px 0 14px;
}
.dt-btn {
  border: 0; background: transparent;
  padding: 7px 16px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  letter-spacing: -.005em;
}
.dt-btn:hover { color: var(--teal-deep); }
.dt-btn.on {
  background: #fff;
  color: var(--teal-deep);
  box-shadow: 0 1px 2px rgba(30,38,48,.06), 0 4px 10px rgba(30,38,48,.05);
}
.donations-empty {
  text-align: center;
  padding: 32px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.donations-empty p { margin: 0; color: var(--gray); font-size: .95rem; }

/* ---- Words of support — elegant list ---- */
.words-block {
  margin-top: 22px;
}
.words-head { margin-bottom: 14px; padding: 0 4px; }
.words-head h3 {
  font-size: 1.08rem; font-weight: 700; color: var(--teal-deep);
  letter-spacing: -.01em; margin: 4px 0 0;
}
.words-list {
  list-style: none;
  margin: 0;
  padding: 4px 24px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 6px 18px rgba(30,38,48,.04);
}
.word-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(227,225,234,.55);
}
.word-item:last-child { border-bottom: 0; }
.word-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint-soft), var(--mint));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .94rem;
  flex-shrink: 0;
}
.word-body { min-width: 0; }
.word-line {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: .82rem;
}
.word-name {
  font-weight: 800; color: var(--text); font-size: .94rem;
  letter-spacing: -.005em;
}
.word-amount {
  font-weight: 800; color: var(--mint-deep);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
}
.word-when {
  color: var(--gray);
  font-size: .8rem;
  margin-left: auto;
}
.word-text {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
@media (max-width: 540px) {
  .words-list { padding: 4px 18px; }
  .word-item { gap: 12px; padding: 16px 0; }
  .word-when { margin-left: 0; }
}

/* ---- Organizer row (avatar + meta + report; no card chrome) ---- */
.organizer-row {
  display: block;
  margin-top: 28px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.organizer-row .organizer-section {
  margin: 0;
  padding: 0;
  border-top: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.organizer-row .organizer-section-avatar { flex-shrink: 0; }
.organizer-row .organizer-section-meta {
  min-width: 0;
  word-break: break-word;
}
.organizer-report-row {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.organizer-row .organizer-section-name {
  overflow-wrap: anywhere;
}
.organizer-row .report-link {
  margin-top: 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(227,225,234,.7);
  background: transparent;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  width: fit-content;
}
.organizer-row .report-link:hover {
  color: var(--coral-deep);
  background: rgba(221,160,122,.08);
  border-color: rgba(221,160,122,.35);
}
.organizer-row .report-link svg { width: 14px; height: 14px; }
.organizer-row .report-link .rl-text { line-height: 1; }
@media (max-width: 460px) {
  .organizer-row { gap: 10px; }
}

/* ============================================================================
   ABOUT page — refined
   ============================================================================ */
.about-intro-card {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(141,138,168,.16), transparent 65%),
    linear-gradient(180deg, #fff, #FAF4F0);
  border: 1px solid rgba(141,138,168,.25);
  border-radius: 24px;
  padding: 28px 26px;
  margin: 18px 0 28px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 16px 36px rgba(30,38,48,.06);
}
.about-intro-meta {
  margin-bottom: 12px;
}
.about-intro-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint-deep);
  background: rgba(141,138,168,.16);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.about-intro-card h2 {
  margin: 4px 0 0;
  font-size: 1.55rem;
  color: var(--teal-deep);
  letter-spacing: -.015em;
}
.about-intro-card p {
  margin: 14px 0 0;
  color: var(--text);
  line-height: 1.65;
  font-size: 1rem;
}
@media (max-width: 540px) {
  .about-intro-card { padding: 22px 20px; }
  .about-intro-card h2 { font-size: 1.35rem; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 14px;
}
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 20px;
  padding: 22px 20px 20px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 8px 22px rgba(30,38,48,.04);
}
.team-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .98rem;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(45,58,74,.22);
}
.team-name {
  font-weight: 800;
  color: var(--teal-deep);
  font-size: 1.02rem;
  letter-spacing: -.005em;
}
.team-role {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin: 2px 0 10px;
}
.team-card p {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

.about-values {
  list-style: none; padding: 0; margin: 8px 0 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.about-values li {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 14px;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--text);
}
.about-values li strong { color: var(--teal-deep); }

/* ============================================================================
   CONTACT page — refined
   ============================================================================ */
.contact-head { padding-bottom: 8px; }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 20px;
  padding: 22px 20px 20px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 8px 22px rgba(30,38,48,.04);
}
.contact-card-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(45,58,74,.20);
}
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin-bottom: 4px;
}
.contact-card-link {
  display: block;
  font-weight: 700; color: var(--teal-deep);
  font-size: 1.02rem;
  letter-spacing: -.005em;
  word-break: break-word;
}
a.contact-card-link:hover { color: var(--teal); }
.contact-card-meta {
  font-size: .82rem;
  color: var(--gray);
  margin: 8px 0 0;
  line-height: 1.5;
}

.contact-wrap-v2 {
  max-width: 720px;
  margin: 0 auto;
}
.contact-form-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 12px 28px rgba(30,38,48,.05);
}
.contact-form-head { margin-bottom: 20px; }
.contact-form-head h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  color: var(--teal-deep);
  letter-spacing: -.01em;
}
.contact-form-head p { margin: 0; color: var(--text-soft); font-size: .92rem; }
.contact-report-banner {
  background: rgba(221,160,122,.10);
  border: 1px solid rgba(221,160,122,.30);
  color: var(--coral-deep);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.contact-report-banner strong { color: #B97A52; }
.contact-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.contact-form-note {
  margin: 0;
  font-size: .82rem;
  color: var(--gray);
  flex: 1 1 auto;
}
@media (max-width: 540px) {
  .contact-form-card { padding: 24px 20px; }
  .contact-form-foot .btn { width: 100%; justify-content: center; }
}

/* ============================================
   Contact page — hero + support cards + form
   ============================================ */
.contact-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(141,138,168,.28), transparent 58%),
    radial-gradient(80% 70% at 100% 100%, rgba(221,160,122,.16), transparent 62%),
    linear-gradient(180deg, var(--offwhite) 0%, var(--offwhite-2) 100%);
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
  text-align: center;
}
/* Decorative blobs */
.contact-hero::before,
.contact-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  opacity: .55;
}
.contact-hero::before {
  width: 360px; height: 360px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(141,138,168,.55), rgba(141,138,168,0) 70%);
}
.contact-hero::after {
  width: 320px; height: 320px;
  bottom: -140px; right: -80px;
  background: radial-gradient(circle, rgba(221,160,122,.42), rgba(221,160,122,0) 70%);
}
.contact-hero .container { position: relative; z-index: 1; }
.contact-hero .container {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Team trio + label above the eyebrow — humanizes the hero */
.contact-hero-team {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: #fff;
  border: 1px solid rgba(141,138,168,.32);
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(30,38,48,.04), 0 8px 24px -12px rgba(141,138,168,.30);
}
.contact-hero-team .cht-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  margin-left: -10px;
  border: 2px solid #fff;
  letter-spacing: 0;
}
.contact-hero-team .cht-avatar:first-child { margin-left: 0; }
.contact-hero-team .cht-a { background: linear-gradient(135deg, var(--mint), var(--mint-deep)); }
.contact-hero-team .cht-b { background: linear-gradient(135deg, var(--coral-soft), var(--coral)); }
.contact-hero-team .cht-c { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
.contact-hero-team .cht-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--teal-deep);
  letter-spacing: -.005em;
  padding-left: 4px;
}
/* Tiny status line under the lead */
.contact-hero-meta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mint-deep);
}
.contact-hero-meta .cm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mint-deep);
  box-shadow: 0 0 0 4px rgba(141,138,168,.20);
  animation: cmPulse 2.4s ease-in-out infinite;
}
@keyframes cmPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(141,138,168,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(141,138,168,.05); }
}
.contact-hero .eyebrow {
  display: inline-block;
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 14px 0 12px;
  max-width: 620px;
}
.contact-hero .lead {
  margin: 0 auto;
  max-width: 480px;
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.contact-support {
  padding: clamp(16px, 2vw, 28px) 0 clamp(56px, 7vw, 80px);
}
.contact-support-head {
  text-align: center;
  max-width: 540px;
  margin: 0 auto 28px;
}
.contact-support-head .eyebrow {
  display: inline-block;
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-support-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 1.95rem);
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0;
}
.contact-support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 980px) { .contact-support-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 540px) { .contact-support-grid { grid-template-columns: 1fr; max-width: 560px; } }
.contact-support .contact-support-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.65);
  border-radius: 16px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .2s, transform .15s;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 4px 12px -10px rgba(30,38,48,.08);
}
.contact-support .contact-support-card:hover {
  border-color: rgba(141,138,168,.45);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 14px 30px -12px rgba(141,138,168,.30);
  transform: translateY(-2px);
}
/* Per-card palette tints — each card carries a different paletted accent
   so the grid doesn't read as four identical white tiles. */
.contact-support .contact-support-card.is-email {
  background: linear-gradient(170deg, rgba(141,138,168,.10) 0%, #fff 55%);
  border-color: rgba(141,138,168,.30);
}
.contact-support .contact-support-card.is-email:hover {
  border-color: rgba(141,138,168,.55);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 14px 30px -12px rgba(141,138,168,.35);
}
.contact-support .contact-support-card.is-email .contact-support-card-icon {
  background: rgba(141,138,168,.24);
  color: var(--mint-deep);
}
.contact-support .contact-support-card.is-instagram {
  background: linear-gradient(170deg, rgba(221,160,122,.10) 0%, #fff 50%);
  border-color: rgba(221,160,122,.28);
}
.contact-support .contact-support-card.is-instagram .contact-support-card-icon {
  background: rgba(221,160,122,.20);
  color: var(--coral-deep);
}
.contact-support .contact-support-card.is-instagram:hover {
  border-color: rgba(221,160,122,.50);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 14px 30px -12px rgba(221,160,122,.32);
}
.contact-support .contact-support-card.is-instagram .contact-support-card-link {
  color: var(--coral-deep);
}
.contact-support .contact-support-card.is-instagram:hover .contact-support-card-link {
  color: #B97A52;
}
.contact-support .contact-support-card.is-safety {
  background: linear-gradient(170deg, rgba(45,58,74,.06) 0%, #fff 50%);
  border-color: rgba(45,58,74,.18);
}
.contact-support .contact-support-card.is-safety .contact-support-card-icon {
  background: rgba(45,58,74,.12);
  color: var(--teal-deep);
}
.contact-support .contact-support-card.is-response {
  background: linear-gradient(170deg, rgba(243,237,226,.7) 0%, #fff 50%);
  border-color: rgba(205,187,170,.45);
}
.contact-support .contact-support-card.is-response .contact-support-card-icon {
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
}
.contact-support .contact-support-card--static { cursor: default; }
.contact-support .contact-support-card--static:hover {
  transform: none;
  border-color: rgba(227,225,234,.65);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 6px 16px -10px rgba(30,38,48,.10);
}
.contact-support-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.contact-support-card-icon svg { width: 17px; height: 17px; }
.contact-support .contact-support-card h3 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.005em;
  margin: 0;
}
.contact-support .contact-support-card p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-soft);
  flex: 1;
}
.contact-support-card-link {
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s, gap .15s;
  overflow-wrap: anywhere;
}
.contact-support .contact-support-card:hover .contact-support-card-link {
  color: var(--teal-deep);
  gap: 7px;
}
.contact-support-card-meta {
  font-size: .78rem;
  font-weight: 600;
  color: var(--mint-deep);
  letter-spacing: .04em;
  margin-top: 4px;
}

.contact-form-section {
  padding: 0 0 clamp(48px, 6vw, 70px);
  position: relative;
}
/* Contact form card — premium look: subtle gradient bg, mint left accent,
   stronger paletted shadow. */
.contact-form-section .contact-form-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(141,138,168,.07), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(141,138,168,.22);
  border-radius: 24px;
  padding: 30px 28px;
  box-shadow:
    0 1px 2px rgba(30,38,48,.03),
    0 12px 32px -10px rgba(30,38,48,.10),
    0 22px 60px -16px rgba(141,138,168,.32);
  overflow: hidden;
}
.contact-form-section .contact-form-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
}
.contact-form-section .contact-form-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact-form-section .contact-form-head-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(141,138,168,.32), rgba(141,138,168,.10));
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-form-section .contact-form-head-icon svg { width: 22px; height: 22px; }
.contact-form-section .contact-form-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  margin-top: 4px;
}
/* Bigger, friendlier inputs */
.contact-form-section .contact-form-card .field input,
.contact-form-section .contact-form-card .field textarea,
.contact-form-section .contact-form-card .field select {
  padding: 13px 15px;
  border-radius: 13px;
  font-size: .96rem;
}
.contact-form-section .contact-form-card .field { margin-bottom: 16px; }
/* Submit button with arrow icon — wider, taller, mint glow */
.contact-form-submit {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(141,138,168,.30), 0 14px 32px -10px rgba(141,138,168,.35);
}
.contact-form-submit svg { width: 18px; height: 18px; transition: transform .15s; }
.contact-form-submit:hover svg { transform: translateX(2px); }
.contact-form-submit:disabled { opacity: .7; cursor: wait; }
@media (max-width: 540px) {
  .contact-form-section .contact-form-card { padding: 26px 22px; border-radius: 22px; }
}

/* "Need more details?" — small card at the bottom of Contact wrapping
   Terms / Privacy / Reports links as discreet pills */
.contact-legal {
  padding: 0 0 clamp(48px, 6vw, 72px);
}
.contact-legal-card {
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(141,138,168,.12), transparent 55%),
    #ffffff;
  border: 1px solid rgba(141,138,168,.24);
  border-radius: 20px;
  padding: 22px 22px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon text"
    "icon pills";
  column-gap: 16px;
  row-gap: 12px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 10px 28px -16px rgba(141,138,168,.30);
}
.contact-legal-icon {
  grid-area: icon;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(141,138,168,.22);
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: start;
}
.contact-legal-icon svg { width: 19px; height: 19px; }
.contact-legal-text { grid-area: text; min-width: 0; }
.contact-legal-text h3 {
  margin: 2px 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.005em;
}
.contact-legal-text p {
  margin: 0;
  font-size: .87rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.contact-legal-pills {
  grid-area: pills;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-legal-pill {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(141,138,168,.10);
  border: 1px solid rgba(141,138,168,.28);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.contact-legal-pill:hover {
  background: rgba(141,138,168,.20);
  border-color: rgba(141,138,168,.5);
  color: var(--teal-deep);
  transform: translateY(-1px);
}
@media (max-width: 540px) {
  .contact-legal-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "text"
      "pills";
    text-align: left;
    padding: 20px 20px 18px;
  }
  .contact-legal-pill { font-size: .78rem; padding: 7px 12px; }
}

/* (Legacy) Compact donation policies strip — kept harmless in case markup
   returns. Currently unused on the Contact page. */
.contact-policies-strip {
  padding: clamp(16px, 2vw, 28px) 0 clamp(56px, 7vw, 80px);
}
.contact-policies-strip-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 24px;
}
.contact-policies-strip-head .eyebrow {
  display: inline-block;
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-policies-strip-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0 0 8px;
}
.contact-policies-strip-head p {
  margin: 0;
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.contact-policies-strip-list {
  list-style: none;
  margin: 0 auto 22px;
  padding: 0;
  max-width: 820px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 8px 22px -10px rgba(30,38,48,.08);
  overflow: hidden;
}
.contact-policies-strip-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid rgba(227,225,234,.55);
}
.contact-policies-strip-list li:first-child { border-top: 0; }
.contact-policies-strip-list .cp-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(141,138,168,.20);
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-policies-strip-list .cp-icon svg { width: 14px; height: 14px; }
.contact-policies-strip-list .cp-text {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
}
.contact-policies-strip-list .cp-link {
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, gap .15s;
}
.contact-policies-strip-list .cp-link:hover { color: var(--teal-deep); }
.contact-policies-strip-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-policies-strip-foot .btn { font-size: .85rem; padding: 9px 16px; }
@media (max-width: 600px) {
  .contact-policies-strip-list li {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon text"
      "icon link";
    padding: 12px 14px;
    gap: 8px 12px;
  }
  .contact-policies-strip-list .cp-icon { grid-area: icon; align-self: start; margin-top: 2px; }
  .contact-policies-strip-list .cp-text { grid-area: text; }
  .contact-policies-strip-list .cp-link { grid-area: link; justify-self: start; }
  .contact-policies-strip-foot .btn { width: 100%; justify-content: center; }
}
.contact-form-section .contact-form-card {
  max-width: 720px;
  margin: 0 auto;
}
/* Polish form fields a bit (mint focus glow) */
.contact-form-card .field input,
.contact-form-card .field textarea,
.contact-form-card .field select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-line);
  background: #fff;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.contact-form-card .field input:focus,
.contact-form-card .field textarea:focus,
.contact-form-card .field select:focus {
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.22);
  outline: none;
}
.contact-form-card .field label {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.contact-form-card .field { margin-bottom: 14px; }
.contact-form-card .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .contact-form-card .field-row { grid-template-columns: 1fr; gap: 0; }
}
.contact-form-card .contact-form-foot { margin-top: 12px; }

.contact-policies {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(141,138,168,.10), transparent 65%),
    linear-gradient(180deg, var(--offwhite), var(--offwhite-2));
  padding-top: clamp(48px, 5.5vw, 72px);
  padding-bottom: clamp(48px, 5.5vw, 72px);
}
.policies-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.policies-head h2 { color: var(--teal-deep); }
.policies-head .lead { color: var(--text-soft); font-size: .98rem; }
.policies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 960px) { .policies-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .policies-grid { grid-template-columns: 1fr; gap: 12px; } }
.policy-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 8px 22px rgba(30,38,48,.04);
}
.policy-card-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(141,138,168,.25), rgba(141,138,168,.10));
  color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(141,138,168,.25);
}
.policy-card-icon svg { width: 20px; height: 20px; }
.policy-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--teal-deep);
  margin: 0 0 8px;
  letter-spacing: -.005em;
}
.policy-card p {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}
.policy-card a { color: var(--teal); font-weight: 600; }
.policy-card a:hover { color: var(--teal-deep); }
.policies-foot {
  text-align: center;
  margin-top: 30px;
  font-size: .88rem;
  color: var(--gray);
}
.policies-foot a { color: var(--teal); font-weight: 700; }

/* ---- Compact "Donation safety" summary (replaces the long policy grid) ---- */
.contact-policies-mini {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(141,138,168,.10), transparent 65%),
    linear-gradient(180deg, var(--offwhite), var(--offwhite-2));
  padding-top: clamp(48px, 5.5vw, 72px);
  padding-bottom: clamp(48px, 5.5vw, 72px);
}
.policies-mini-head { text-align: center; max-width: 580px; margin: 0 auto 28px; }
.policies-mini-head h2 { color: var(--teal-deep); }
.policies-mini-head .lead { color: var(--text-soft); font-size: .95rem; }
.policies-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 820px) { .policies-mini-grid { grid-template-columns: 1fr; gap: 12px; max-width: 560px; } }
.policy-mini {
  background: #fff;
  border: 1px solid rgba(227,225,234,.6);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 4px 14px rgba(30,38,48,.04);
  display: flex; flex-direction: column;
}
.policy-mini-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  border: 1px solid rgba(141,138,168,.22);
}
.policy-mini-icon svg { width: 17px; height: 17px; }
.policy-mini h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin: 0 0 6px;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.policy-mini p {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 10px;
}
.policy-mini-link {
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  margin-top: auto;
  transition: color .15s, gap .15s;
  display: inline-flex; align-items: center; gap: 2px;
}
.policy-mini-link:hover { color: var(--teal-deep); gap: 6px; }
.policies-mini-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.policies-mini-foot .btn { font-size: .85rem; padding: 9px 16px; }
@media (max-width: 540px) {
  .policies-mini-foot .btn { width: 100%; justify-content: center; }
}

/* Long-form policy articles below the grid */
.policies-detail {
  max-width: 760px;
  margin: 36px auto 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.policy-detail {
  background: #fff;
  border: 1px solid rgba(227,225,234,.55);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03);
}
.policy-detail h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--teal-deep);
  margin: 0 0 10px;
  letter-spacing: -.005em;
}
.policy-detail p,
.policy-detail li {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 10px;
}
.policy-detail p:last-child,
.policy-detail ul:last-child { margin-bottom: 0; }
.policy-detail ul {
  margin: 4px 0 12px;
  padding-left: 20px;
}
.policy-detail ul li { margin-bottom: 6px; }
.policy-detail a { color: var(--teal); font-weight: 700; }
.policy-detail a:hover { color: var(--teal-deep); }
.policy-detail strong { color: var(--teal-deep); }
@media (max-width: 540px) {
  .policy-detail { padding: 20px 20px; }
}

/* ============================================================================
   CAMPAIGN META ROW — small line with "Started X ago · Category · [badge]"
   ============================================================================ */
.campaign-meta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  text-align: center;
  max-width: 100%;
  min-width: 0;
}
.campaign-meta-row .cm-started {
  font-size: .76rem;
  color: var(--gray);
  line-height: 1.3;
}

/* ---- "Donation protected" pill badge ---- */
.rt-pill-protected {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(141,138,168,.16);
  color: var(--teal-deep);
  border: 1px solid rgba(141,138,168,.32);
  border-radius: 999px;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rt-pill-protected:hover {
  background: rgba(141,138,168,.24);
  border-color: rgba(141,138,168,.5);
}
.rt-pill-protected:active { transform: translateY(.5px); }
.rt-pill-protected:focus-visible {
  outline: 2px solid var(--mint-deep);
  outline-offset: 2px;
}
.rt-pill-icon { width: 12px; height: 12px; color: var(--mint-deep); flex-shrink: 0; }

/* ============================================================================
   RT-MODAL — generic centered modal (used by donation guarantee)
   ============================================================================ */
.rt-modal[hidden] { display: none; }
.rt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .18s ease;
}
.rt-modal.is-open { opacity: 1; }
.rt-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,38,48,.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rt-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 60px -12px rgba(30,38,48,.32), 0 4px 12px rgba(30,38,48,.12);
  transform: translateY(8px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
  outline: none;
}
.rt-modal.is-open .rt-modal-dialog { transform: translateY(0) scale(1); }
.rt-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(107,114,128,.08);
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.rt-modal-close:hover { background: rgba(107,114,128,.16); }
.rt-modal-close svg { width: 16px; height: 16px; }
.rt-modal-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rt-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(141,138,168,.18);
  color: var(--mint-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.rt-modal-icon svg { width: 26px; height: 26px; }
.rt-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--teal-deep);
  margin: 0 0 8px;
  line-height: 1.2;
  padding-right: 28px;
}
.rt-modal-lead {
  font-size: .95rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0 0 6px;
}
.rt-modal-link {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: rgba(45,58,74,.3);
  text-underline-offset: 3px;
  margin-bottom: 6px;
}
.rt-modal-link:hover { color: var(--teal-deep); text-decoration-color: var(--teal-deep); }
.rt-modal-divider {
  height: 1px;
  background: var(--gray-line);
  margin: 18px 0 16px;
}
.rt-modal-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rt-modal-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--teal-deep);
  line-height: 1.5;
}
.rt-modal-point-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(141,138,168,.16);
  color: var(--mint-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rt-modal-point-icon svg { width: 16px; height: 16px; }
body.rt-modal-lock { overflow: hidden; }

@media (max-width: 540px) {
  .rt-modal { padding: 0; align-items: flex-end; }
  .rt-modal-dialog {
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 26px 22px 28px;
    max-height: 92vh;
    transform: translateY(20px);
  }
  .rt-modal.is-open .rt-modal-dialog { transform: translateY(0); }
  .rt-modal-title { font-size: 1.35rem; }
}

/* ============================================================================
   CONTACT PAGE v3 — dark hero + stacked info cards + clean form
   ============================================================================ */

/* Hero — dark teal panel */
.cu-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px);
  /* Lilac/lavender to match the homepage "How It Works" panel (was blue).
     Dark indigo-lavender base keeps the white text readable; the lighter
     lavenders (#8D87A8 / #CDBECF) + a whisper of peach sit on top as glows. */
  background:
    radial-gradient(62% 55% at 50% -8%, rgba(253,218,194,.18), transparent 60%),
    radial-gradient(60% 60% at 100% 106%, rgba(205,190,207,.30), transparent 62%),
    radial-gradient(56% 56% at 0% 100%, rgba(141,138,168,.30), transparent 62%),
    linear-gradient(155deg, #6E6699 0%, #5C5684 55%, #463F66 100%);
  color: #fff;
}
.cu-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 40% at 50% 0%, rgba(141,138,168,.16), transparent 70%);
  pointer-events: none;
}
.cu-hero .container { position: relative; z-index: 1; max-width: 720px; }
.cu-eyebrow {
  display: inline-block;
  color: var(--coral-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cu-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.cu-hero p {
  margin: 0 auto;
  max-width: 520px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* Stacked info cards (single column mobile, 2 cols ≥820px) */
.cu-cards {
  padding: clamp(20px, 3vw, 32px) 0 clamp(56px, 7vw, 80px);
}
.cu-cards .container {
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 820px) {
  .cu-cards .container { max-width: 980px; grid-template-columns: 1fr 1fr; gap: 16px; }
}
.cu-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px 18px 18px;
  background: #fff;
  border: 1px solid rgba(227,225,234,.65);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 6px 18px -10px rgba(30,38,48,.08);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.cu-card:hover {
  transform: translateY(-2px);
  border-color: rgba(141,138,168,.40);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 14px 28px -12px rgba(30,38,48,.14);
}
.cu-card--static { cursor: default; }
.cu-card--static:hover { transform: none; }
.cu-card-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.cu-card-icon svg { width: 22px; height: 22px; }
.cu-tone-mint       { background: rgba(141,138,168,.22); color: var(--mint-deep); }
.cu-tone-mint-soft  { background: rgba(182,214,189,.40); color: var(--teal-deep); }
.cu-tone-coral      { background: rgba(221,160,122,.20); color: var(--coral-deep); }
.cu-tone-teal       { background: rgba(45,58,74,.10);    color: var(--teal-deep); }
.cu-card-body { min-width: 0; }
.cu-card-body h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.005em;
  line-height: 1.25;
}
.cu-card-body p {
  margin: 0 0 6px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.cu-card-body p:last-child { margin-bottom: 0; }
.cu-card-link {
  display: inline-block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.cu-card:hover .cu-card-link { color: var(--teal-deep); }

/* Form card */
.cu-form-section { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); }
.cu-form-section .container { max-width: 720px; }
.cu-form-card {
  background: #fff;
  border: 1px solid rgba(227,225,234,.65);
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow:
    0 1px 2px rgba(30,38,48,.03),
    0 14px 32px -12px rgba(30,38,48,.10),
    0 24px 60px -20px rgba(141,138,168,.28);
}
.cu-form-head { margin-bottom: 22px; }
.cu-form-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  margin: 0 0 6px;
}
.cu-form-head p { margin: 0; font-size: .92rem; color: var(--text-soft); line-height: 1.55; }
.cu-report-banner {
  background: rgba(221,160,122,.10);
  border: 1px solid rgba(221,160,122,.30);
  color: var(--coral-deep);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.cu-report-banner strong { color: #B97A52; }

.cu-field { margin-bottom: 16px; }
.cu-field label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 8px;
  letter-spacing: -.005em;
}
.cu-req { color: var(--coral-deep); margin-left: 2px; }
.cu-field input,
.cu-field textarea,
.cu-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid var(--gray-line);
  border-radius: 14px;
  font-family: inherit;
  font-size: .96rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.cu-field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.cu-field input::placeholder,
.cu-field textarea::placeholder {
  color: var(--gray-soft);
}
.cu-field input:focus,
.cu-field textarea:focus,
.cu-field select:focus {
  outline: none;
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(141,138,168,.22);
}

/* Submit — deep teal pill with arrow */
.cu-submit {
  width: 100%;
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow:
    0 6px 16px rgba(30,38,48,.20),
    0 16px 36px -12px rgba(30,38,48,.32);
  transition: transform .15s, box-shadow .2s, filter .15s;
}
.cu-submit svg { width: 18px; height: 18px; transition: transform .15s; }
.cu-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 8px 20px rgba(30,38,48,.25),
    0 22px 44px -14px rgba(30,38,48,.38);
}
.cu-submit:hover svg { transform: translateX(3px); }
.cu-submit:disabled { opacity: .75; cursor: wait; }

@media (max-width: 540px) {
  .cu-form-card { padding: 26px 22px; border-radius: 20px; }
  .cu-card { padding: 16px 16px 16px 16px; grid-template-columns: 48px 1fr; gap: 14px; }
  .cu-card-icon { width: 44px; height: 44px; }
  .cu-card-icon svg { width: 20px; height: 20px; }
  .cu-card-body h3 { font-size: 1rem; }
}

/* ============================================================================
   HOW IT WORKS — Donors / Organizers experience
   ============================================================================ */
.hw-intro { padding-bottom: 16px; }

.hw-section {
  position: relative;
  padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 6vw, 84px);
  background: linear-gradient(180deg, var(--offwhite) 0%, var(--offwhite-2) 100%);
  overflow: hidden;
}
.hw-bg-curves {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hw-section > .container { position: relative; z-index: 1; }

/* Segmented toggle — animated thumb */
.hw-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin: 0 auto 32px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 10px 26px rgba(30,38,48,.06);
  width: 100%;
  max-width: 380px;
}
.hw-section > .container { display: flex; flex-direction: column; align-items: center; }
.hw-toggle-thumb {
  position: absolute;
  top: 6px; bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(30,38,48,.18), 0 1px 0 rgba(255,255,255,.10) inset;
  transition: transform .42s cubic-bezier(.5,0,.2,1);
  z-index: 0;
}
.hw-toggle-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 11px 18px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: color .3s ease;
  white-space: nowrap;
}
.hw-toggle-btn.is-active { color: #fff; }
.hw-toggle-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 999px; }
/* Slide thumb to organizers when that tab is active */
.hw-stage[data-active="organizers"] ~ * .hw-toggle-thumb,
.hw-toggle:has(.hw-toggle-btn[data-mode="organizers"].is-active) .hw-toggle-thumb {
  transform: translateX(100%);
}
/* Fallback for browsers without :has — JS toggles thumb via aria-selected attribute */
.hw-toggle .hw-toggle-btn[data-mode="organizers"][aria-selected="true"] ~ .hw-toggle-thumb,
.hw-toggle:not(:has(.hw-toggle-btn[data-mode="donors"].is-active)) .hw-toggle-thumb { transform: translateX(100%); }

/* Stage + panels — directional slide + fade + blur */
.hw-stage {
  position: relative;
  width: 100%;
  min-height: 700px;
}
.hw-panel {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  transform: translateX(40px);
  transition: opacity .42s ease, transform .48s cubic-bezier(.5,0,.2,1), filter .42s ease;
}
.hw-panel[hidden] { display: none; }
.hw-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: translateX(0);
}
/* Direction-aware enter/exit:
   forward (donors -> organizers): leaving slides left, entering comes from right (the default).
   back (organizers -> donors): leaving slides right, entering comes from left. */
.hw-stage[data-direction="forward"] .hw-panel:not(.is-active) { transform: translateX(-40px); }
.hw-stage[data-direction="back"] .hw-panel { transform: translateX(-40px); }
.hw-stage[data-direction="back"] .hw-panel.is-active { transform: translateX(0); }
.hw-stage[data-direction="back"] .hw-panel:not(.is-active) { transform: translateX(40px); }

@media (max-width: 880px) {
  .hw-stage { min-height: 0; }
  .hw-panel { position: relative; inset: auto; grid-template-columns: 1fr; gap: 28px; }
  /* Stack with preview on top, steps below */
}

/* Preview column — sticky on desktop */
.hw-preview {
  display: flex; justify-content: center;
  position: sticky; top: 100px;
}
@media (max-width: 880px) {
  .hw-preview { position: static; }
}

/* Steps column — relative for path overlay */
.hw-steps {
  position: relative;
  padding-left: 56px;
}
@media (max-width: 540px) { .hw-steps { padding-left: 44px; } }

.hw-path {
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 100%;
  overflow: visible;
}
@media (max-width: 540px) { .hw-path { width: 40px; } }
.hw-path-track {
  fill: none;
  stroke: var(--gray-line);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.hw-path-progress {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.1s cubic-bezier(.5,0,.2,1);
}
.hw-path-dot {
  fill: var(--coral);
  filter: drop-shadow(0 2px 6px rgba(199,126,79,.45));
  transition: cx 1.1s cubic-bezier(.5,0,.2,1), cy 1.1s cubic-bezier(.5,0,.2,1);
}
.hw-path-dot::before { content: ''; } /* placeholder for the pulse animation */

/* Step list */
.hw-step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.hw-step {
  position: relative;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .3s ease, transform .25s ease, background .25s ease;
  box-shadow: 0 1px 2px rgba(30,38,48,.03);
}
.hw-step:hover { border-color: var(--gray-soft); transform: translateY(-1px); }
.hw-step.is-active {
  background: #fff;
  border-color: var(--coral);
  box-shadow: 0 2px 4px rgba(30,38,48,.04), 0 14px 32px rgba(199,126,79,.16);
  transform: translateY(-1px);
}
.hw-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--offwhite-2);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease;
}
.hw-step.is-active .hw-step-num {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(221,160,122,.20);
}
.hw-step-body { min-width: 0; flex: 1; }
.hw-step-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--teal-deep);
  letter-spacing: -.015em;
  margin: 0 0 4px;
  line-height: 1.25;
}
.hw-step-body p {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}
/* Staggered entrance when panel becomes active */
.hw-panel.is-active .hw-step {
  animation: hw-step-in .55s var(--ease) both;
}
.hw-panel.is-active .hw-step:nth-child(1) { animation-delay: .08s; }
.hw-panel.is-active .hw-step:nth-child(2) { animation-delay: .15s; }
.hw-panel.is-active .hw-step:nth-child(3) { animation-delay: .22s; }
.hw-panel.is-active .hw-step:nth-child(4) { animation-delay: .29s; }
.hw-panel.is-active .hw-step:nth-child(5) { animation-delay: .36s; }
.hw-panel.is-active .hw-step:nth-child(6) { animation-delay: .43s; }
@keyframes hw-step-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================================
   ORGANIZER — Campaign builder mock animation
   ============================================================================ */
.builder-frame {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 24px 60px -10px rgba(30,38,48,.18);
  overflow: hidden;
  font-family: inherit;
}
.builder-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--offwhite-2);
  border-bottom: 1px solid var(--gray-line);
}
.bt-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gray-soft);
  opacity: .55;
}
.bt-dot:first-child { background: var(--coral); opacity: .8; }
.bt-url {
  margin-left: 10px;
  font-size: .68rem;
  color: var(--gray);
  font-weight: 600;
  letter-spacing: .02em;
}
.builder-stage {
  position: relative;
  padding: 24px;
  min-height: 580px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(221,160,122,.06), transparent 65%),
    #fff;
}

/* Org scenes — swap pattern, mirrors donor phone scenes */
.org-scene {
  position: absolute;
  inset: 24px;
  display: flex; flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateX(20px) scale(.985);
  pointer-events: none;
  transition: opacity .42s var(--ease), transform .48s var(--ease);
}
.org-scene.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
/* Stagger children when scene becomes active */
.org-scene.is-active > * { animation: org-in .55s var(--ease) both; }
.org-scene.is-active > *:nth-child(1) { animation-delay: .06s; }
.org-scene.is-active > *:nth-child(2) { animation-delay: .12s; }
.org-scene.is-active > *:nth-child(3) { animation-delay: .18s; }
.org-scene.is-active > *:nth-child(4) { animation-delay: .24s; }
.org-scene.is-active > *:nth-child(5) { animation-delay: .30s; }
.org-scene.is-active > *:nth-child(6) { animation-delay: .36s; }
@keyframes org-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shared step tag, headings, copy, fields */
.os-step-tag {
  align-self: flex-start;
  padding: 5px 12px;
  background: rgba(221,160,122,.16);
  color: var(--coral-deep);
  border-radius: 999px;
  font-size: .64rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.os-h {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--teal-deep);
  line-height: 1.18;
  margin: 0;
}
.os-h-center { text-align: center; align-self: center; }
.os-p {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0 0 4px;
}
.os-p-center { text-align: center; align-self: center; max-width: 280px; }

.os-field { display: flex; flex-direction: column; gap: 6px; }
.os-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.os-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.os-input, .os-select {
  position: relative;
  padding: 12px 14px;
  background: var(--offwhite);
  border: 1.5px solid var(--gray-line);
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--teal-deep);
  display: flex; align-items: center; gap: 8px;
}
.os-input-sm { padding: 10px 12px; font-size: .85rem; }
.os-select svg { width: 14px; height: 14px; margin-left: auto; color: var(--gray); }
.os-caret {
  display: inline-block;
  width: 1.5px; height: 1em;
  background: var(--coral);
  margin-left: 2px;
  animation: os-caret-blink 1s steps(2) infinite;
}
@keyframes os-caret-blink { 50% { opacity: 0; } }

.os-radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.os-radio {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--offwhite);
  border: 1.5px solid var(--gray-line);
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}
.os-radio-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--gray-soft);
  flex-shrink: 0;
  position: relative;
}
.os-radio.is-on {
  border-color: var(--coral);
  background: rgba(221,160,122,.08);
  color: var(--teal-deep);
}
.os-radio.is-on .os-radio-dot {
  border-color: var(--coral);
}
.os-radio.is-on .os-radio-dot::after {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: var(--coral);
}

.os-textarea {
  padding: 12px 14px;
  background: var(--offwhite);
  border: 1.5px solid var(--gray-line);
  border-radius: 12px;
  min-height: 78px;
  display: flex; flex-direction: column; gap: 8px;
}
.os-textarea-sm { min-height: 56px; }
.os-line {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-line);
}
.os-line-short { width: 60%; }

.os-cta {
  margin-top: auto;
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--coral);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: .96rem;
  border: 0;
  border-radius: 999px;
  cursor: default;
  box-shadow: 0 6px 18px rgba(199,126,79,.32);
}
.os-cta svg { width: 16px; height: 16px; }
.os-cta-publish {
  animation: os-publish-pulse 1.8s ease-in-out infinite;
}
@keyframes os-publish-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(199,126,79,.36); }
  50%      { transform: scale(1.03); box-shadow: 0 10px 28px rgba(199,126,79,.48); }
}

/* Scene 3 — Photos */
.os-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 14px;
  background: var(--offwhite);
  border: 2px dashed var(--gray-line);
  border-radius: 14px;
  color: var(--text-soft);
}
.os-dropzone svg { width: 26px; height: 26px; color: var(--mint-deep); }
.os-dz-title { font-size: .9rem; font-weight: 700; color: var(--teal-deep); }
.os-dz-sub { font-size: .76rem; color: var(--text-soft); }
.os-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.os-photo {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--offwhite-2);
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-soft);
  font-weight: 700;
}
.os-photo-1 { background: linear-gradient(135deg, #c6948a, #8f5a52); }
.os-photo-2 { background: linear-gradient(135deg, #b3a8c9, #6e6b8c); }
.os-photo-3 { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); }
.os-photo-empty {
  background: var(--offwhite);
  border: 2px dashed var(--gray-line);
  color: var(--gray-soft);
  font-size: 1.2rem;
}
.org-scene.is-active .os-photo-1 { animation: os-photo-in .5s var(--ease) .35s both; }
.org-scene.is-active .os-photo-2 { animation: os-photo-in .5s var(--ease) .5s both; }
.org-scene.is-active .os-photo-3 { animation: os-photo-in .5s var(--ease) .65s both; }
@keyframes os-photo-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.os-counter {
  font-size: .76rem;
  color: var(--text-soft);
  font-weight: 600;
  text-align: center;
}

/* Scene 4 — Goal */
.os-goal-card {
  display: flex; align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 22px 14px;
  background: linear-gradient(180deg, var(--offwhite), #fff);
  border: 1.5px solid var(--gray-line);
  border-radius: 16px;
}
.os-goal-currency {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--coral);
  opacity: .8;
  line-height: 1;
}
.os-goal-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.os-duration-row {
  display: flex;
  gap: 8px;
}
.os-duration-pill {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  background: var(--offwhite);
  border: 1.5px solid var(--gray-line);
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-soft);
}
.os-duration-pill.is-on {
  background: rgba(221,160,122,.12);
  border-color: var(--coral);
  color: var(--coral-deep);
}

/* Scene 5 — Review */
.os-review-card {
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 8px 22px rgba(30,38,48,.08);
}
.os-review-photo {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #c6948a, #8f5a52);
}
.os-review-body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.os-review-cat {
  align-self: flex-start;
  padding: 3px 9px;
  background: rgba(141,138,168,.18);
  color: var(--teal-deep);
  border-radius: 999px;
  font-size: .58rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.os-review-title {
  font-weight: 700;
  font-size: .98rem;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.os-review-org {
  font-size: .76rem;
  color: var(--text-soft);
}
.os-review-bar {
  height: 5px;
  background: var(--gray-line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.os-review-bar span {
  display: block;
  height: 100%;
  width: 2%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 999px;
}
.os-review-stats {
  display: flex; align-items: baseline; gap: 6px;
  font-size: .78rem;
}
.os-review-stats b { color: var(--teal-deep); font-weight: 800; }
.os-review-stats span { color: var(--text-soft); }

/* Scene 6 — Published */
.os-check {
  align-self: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(199,126,79,.30);
  margin-top: 6px;
}
.os-check svg { width: 28px; height: 28px; }
.org-scene.is-active .os-check {
  animation: os-check-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes os-check-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.os-review-card-mini .os-review-photo { aspect-ratio: 16/7; }
.os-share-row {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 4px;
}
.os-share {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--offwhite-2);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.os-share svg { width: 18px; height: 18px; }
.org-scene.is-active .os-share { animation: os-share-in .5s var(--ease) both; }
.org-scene.is-active .os-share:nth-of-type(1) { animation-delay: .55s; }
.org-scene.is-active .os-share:nth-of-type(2) { animation-delay: .65s; }
.org-scene.is-active .os-share:nth-of-type(3) { animation-delay: .75s; }
.org-scene.is-active .os-share:nth-of-type(4) { animation-delay: .85s; }
@keyframes os-share-in {
  from { opacity: 0; transform: translateY(8px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Phone-frame inside hw-preview: enforce centered sizing for the donor mode */
.hw-panel-donors .phone-frame { margin: 0 auto; }

/* ============================================================================
   Hero — illustration as full-bleed background, text overlays it
   ============================================================================ */
.hero-bg-illustration {
  position: relative;
  background-image: url('../../images/hero-bg.png?v=2');
  background-color: var(--offwhite);
  background-size: cover;
  /* Doorway sits around the upper-right of the source illustration; pulling the
     position up keeps it fully visible in the cropped viewport. */
  background-position: 78% 22%;
  background-repeat: no-repeat;
  min-height: 680px;
  isolation: isolate;
  /* parallax variable — updated by a tiny scroll handler on the page */
  --hero-parallax: 0px;
  background-position-y: calc(22% - var(--hero-parallax));
  transition: background-position-y .12s linear;
}
.hero-bg-illustration .hero-grid {
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 540px;
}
.hero-bg-illustration .hero-content {
  max-width: 540px;
  position: relative;
  z-index: 2;
}

/* Stronger text contrast on the warm illustrated background */
.hero-bg-illustration .eyebrow {
  color: #4F4B6E; /* deeper lavender — visible against the peach/cream blend */
  font-weight: 800;
}
.hero-bg-illustration h1 {
  color: var(--teal-deep);
}
.hero-bg-illustration h1 .accent {
  color: #4A4670; /* richer, much deeper lavender for clarity */
}
.hero-bg-illustration .lead {
  color: var(--teal-deep);
  opacity: 1;
  font-weight: 500;
}

/* ---- FX layer ---- */
.hero-bg-layer { display: none; }
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Atmospheric haze layers — add warmth & depth to the hero ---- */
.hero-fx-haze {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  will-change: transform, opacity;
}
.hf-lavender {
  top: -8%; left: -8%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(141,138,168,.26), rgba(141,138,168,0) 70%);
  animation: hero-haze-drift 16s ease-in-out infinite;
}
.hf-peach {
  top: 22%; right: -10%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(221,160,122,.20), rgba(221,160,122,0) 70%);
  animation: hero-haze-drift 20s ease-in-out infinite reverse;
}
.hf-soft {
  bottom: -10%; left: 10%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(141,138,168,.16), rgba(141,138,168,0) 70%);
  animation: hero-haze-drift 24s ease-in-out infinite 4s;
}
@keyframes hero-haze-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(12px, -10px) scale(1.05); opacity: .85; }
}

/* ---- Heart pulse — anchored EXACTLY on the heart inside the doorway ----
   Position is breakpoint-specific because the background-image is cropped
   differently between mobile and desktop. Both versions use translate(-50%,-50%)
   so the element's centre lands on the heart point. */
.hero-fx-heart-pulse {
  position: absolute;
  /* Desktop default — heart sits around (78%, 62%) of the hero after the
     cover crop with bg-position 78% 22%. */
  left: 78%;
  top: 62%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(221,160,122,.55) 0%, rgba(221,160,122,0) 70%);
  animation: hero-heart-pulse 3s ease-in-out infinite;
  filter: blur(1px);
  pointer-events: none;
}
@keyframes hero-heart-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .55; }
  50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}
@keyframes hero-heart-pulse-bottom {
  0%, 100% { transform: translate(-50%, 50%) scale(.92); opacity: .55; }
  50%      { transform: translate(-50%, 50%) scale(1.18); opacity: 1; }
}

/* ---- Floating heart particles — spawn AT the heart, rise upward only ----
   The container is anchored so its bottom-centre sits exactly on the heart;
   hearts originate at the container's bottom (`bottom: 0`) and rise inside it. */
.hero-fx-hearts {
  position: absolute;
  /* Anchor bottom-centre at the heart on desktop */
  left: 78%;
  top: 62%;
  width: 120px;
  height: 200px;  /* the rising room */
  transform: translate(-50%, -100%);
  pointer-events: none;
  overflow: hidden; /* clip anything that escapes upward */
}
.hero-heart {
  position: absolute;
  bottom: 0;        /* originate at the heart */
  left: 50%;
  width: 14px; height: 14px;
  color: var(--coral);
  opacity: 0;
  filter: drop-shadow(0 2px 5px rgba(221,160,122,.45));
  will-change: transform, opacity;
}
.hh-1 { animation: heart-rise-a 9s ease-in-out infinite; }
.hh-2 { animation: heart-rise-b 11s ease-in-out 1.5s infinite; }
.hh-3 { animation: heart-rise-c 13s ease-in-out 3s infinite; width: 11px; height: 11px; }
.hh-4 { animation: heart-rise-a 10s ease-in-out 5s infinite; width: 9px; height: 9px; left: 35%; }

/* Rise paths — keep translate(-50%, ...) so hearts stay centered on the heart.
   Y rises from 0 (heart point) upward to -160px max. */
@keyframes heart-rise-a {
  0%   { transform: translate(-50%, 0) scale(.5) rotate(-3deg); opacity: 0; }
  18%  { opacity: .95; }
  50%  { transform: translate(calc(-50% - 14px), -70px) scale(1) rotate(4deg); opacity: .9; }
  85%  { transform: translate(calc(-50% + 8px), -130px) scale(.85) rotate(-2deg); opacity: .35; }
  100% { transform: translate(calc(-50% - 4px), -160px) scale(.7) rotate(3deg); opacity: 0; }
}
@keyframes heart-rise-b {
  0%   { transform: translate(-50%, 0) scale(.4) rotate(2deg); opacity: 0; }
  20%  { opacity: .9; }
  55%  { transform: translate(calc(-50% + 12px), -60px) scale(1) rotate(-4deg); opacity: .8; }
  85%  { transform: translate(calc(-50% - 6px), -120px) scale(.85) rotate(2deg); opacity: .3; }
  100% { transform: translate(calc(-50% + 4px), -150px) scale(.6) rotate(-3deg); opacity: 0; }
}
@keyframes heart-rise-c {
  0%   { transform: translate(-50%, 0) scale(.45) rotate(-2deg); opacity: 0; }
  22%  { opacity: .85; }
  60%  { transform: translate(calc(-50% - 10px), -65px) scale(.95) rotate(3deg); opacity: .75; }
  88%  { transform: translate(calc(-50% + 8px), -115px) scale(.8) rotate(-2deg); opacity: .25; }
  100% { transform: translate(calc(-50% - 3px), -140px) scale(.55) rotate(2deg); opacity: 0; }
}

/* Ambient glow behind the illustration's doorway */
.hero-fx-door-glow {
  position: absolute;
  top: 12%;
  right: 8%;
  width: clamp(220px, 30vw, 360px);
  height: clamp(220px, 30vw, 360px);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(closest-side, rgba(221,160,122,.32) 0%, rgba(221,160,122,0) 72%);
  filter: blur(2px);
  animation: hero-door-breathe 5.5s ease-in-out infinite;
}
@keyframes hero-door-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.08); }
}

/* Elegant SVG path guiding the eye toward the doorway, with travelling dot */
.hero-fx-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-fx-curve {
  stroke-dashoffset: 0;
  animation: hero-curve-drift 14s linear infinite;
}
@keyframes hero-curve-drift {
  to { stroke-dashoffset: -120; }
}

/* Faint decorative curves reinforcing the "path forward" idea */
.hero-fx-curves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .8;
  animation: hero-curves-float 18s ease-in-out infinite;
}
@keyframes hero-curves-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Bottom transition — blends hero softly into the next section */
.hero-fx-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(120px, 18vw, 180px);
  background: linear-gradient(180deg,
    rgba(250,244,240,0) 0%,
    rgba(250,244,240,.55) 35%,
    rgba(233,231,239,.85) 75%,
    var(--offwhite-2) 100%);
  pointer-events: none;
}

@media (max-width: 760px) {
  /* ============================================================
     MOBILE HERO — direct overlay on illustration, no card
     ============================================================ */
  .hero-bg-illustration {
    /* Illustration now lives on a fixed 3:4 layer (below) instead of the
       section background, so cover-cropping never shifts the doorway. The
       section background is tinted to match the illustration's top edge so the
       strip above the 3:4 layer blends in seamlessly (no white bar). */
    background: linear-gradient(95deg, #E6C0C6 0%, #F3C6BA 52%, #F9BEA3 100%);
    min-height: calc(100vw * 4 / 3);
    padding-top: 0;
    position: relative;
  }
  /* Fixed 3:4 illustration layer, pinned to the bottom. Because its aspect
     ratio matches the image exactly, the doorway is ALWAYS at the same spot. */
  .hero-bg-layer {
    display: block;
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%;
    aspect-ratio: 1086 / 1448;
    background: url('../../images/hero-bg.png?v=2') center bottom / cover no-repeat;
    z-index: 0;
  }
  /* FX layer shares the exact same 3:4 bottom box, so the glow/hearts (placed
     by %) line up with the doorway on every screen proportion. */
  .hero-fx {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: auto;
    aspect-ratio: 1086 / 1448;
  }
  /* Subtle top-down readability gradient — only as much as needed */
  .hero-bg-illustration::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48%;
    background: linear-gradient(180deg,
      rgba(250,244,240,.55) 0%,
      rgba(250,244,240,.35) 45%,
      rgba(250,244,240,.10) 80%,
      rgba(250,244,240,0) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .hero-fx { z-index: 2; }
  .hero-bg-illustration > .container { position: relative; z-index: 3; }

  .hero-bg-illustration .hero-grid {
    min-height: calc(100vw * 4 / 3);
    padding-top: 24px;
    padding-bottom: 24px;
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .hero-bg-illustration .hero-content {
    position: relative;
    max-width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-height: calc(100vw * 4 / 3 - 48px);
    isolation: auto;
  }

  /* ---- Eyebrow ---- */
  .hero-bg-illustration .eyebrow {
    display: inline-block;
    font-size: .76rem;
    letter-spacing: .18em;
    font-weight: 700;
    color: #8D8AA8;
  }
  .hero-bg-illustration .eyebrow::before { content: none; }

  /* ---- Headline — Plus Jakarta Sans 800, strong presence ---- */
  .hero-bg-illustration h1 {
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.04;
    letter-spacing: -.032em;
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(2.3rem, 10.5vw, 3rem);
    color: var(--teal-deep);
  }
  .hero-bg-illustration h1 br + .accent,
  .hero-bg-illustration h1 .accent {
    color: #6E6B8C;
    font-weight: 800;
    letter-spacing: -.032em;
  }

  /* ---- Lead ---- */
  .hero-bg-illustration .lead {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--teal-deep);
    opacity: .92;
    font-weight: 500;
    max-width: 100%;
  }

  /* ---- CTA pinned to bottom ---- */
  .hero-bg-illustration .hero-actions {
    margin-top: auto;
    padding-top: 32px;
    position: relative;
  }
  .hero-bg-illustration .hero-actions::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -8px;
    width: 280px; height: 80px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(221,160,122,.32), rgba(221,160,122,0) 70%);
    filter: blur(8px);
    z-index: -1;
    pointer-events: none;
  }
  .hero-bg-illustration .btn-amber {
    width: 100%;
    padding: 16px 26px;
    font-size: 1.05rem;
    letter-spacing: -.005em;
  }
  /* Trust chips hidden on mobile per latest direction */
  .hero-bg-illustration .hero-trust { display: none; }


  /* ---- Fade-up entrance stagger ---- */
  .hero-bg-illustration .eyebrow,
  .hero-bg-illustration h1,
  .hero-bg-illustration .lead,
  .hero-bg-illustration .hero-actions,
  .hero-bg-illustration .hero-trust {
    animation: hero-fade-up .8s var(--ease) both;
  }
  .hero-bg-illustration .eyebrow  { animation-delay: .05s; }
  .hero-bg-illustration h1        { animation-delay: .14s; }
  .hero-bg-illustration .lead     { animation-delay: .22s; }
  .hero-bg-illustration .hero-actions { animation-delay: .32s; }
  .hero-bg-illustration .hero-trust   { animation-delay: .40s; }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---- FX layer mobile tuning ----
     With bg-position center bottom + 100svh, the doorway's heart lands
     around viewport (72%, 65%). Anchor glow + hearts there. */
  .hero-fx-door-glow {
    top: 54%;
    left: 72%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 230px; height: 230px;
  }
  .hero-fx-heart-pulse {
    left: 72%;
    top: auto;
    bottom: 47%;
    transform: translate(-50%, 50%);
    width: 110px;
    height: 110px;
    animation: hero-heart-pulse-bottom 3s ease-in-out infinite;
  }
  .hero-fx-hearts {
    left: 72%;
    top: auto;
    bottom: 47%;
    width: 110px;
    height: 200px;
    transform: translateX(-50%);
  }
  /* Hide desktop sweeping curve and decorative curves on mobile */
  .hero-fx-path { display: none; }
  .hero-fx-curves { display: none; }
  /* Soft bottom fade — ends on the EXACT colour the next section starts with
     (#FBF7F2) so the hero melts into Active with no visible seam */
  .hero-fx-fade {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34%;
    background: linear-gradient(180deg,
      rgba(251,247,242,0) 0%,
      rgba(251,247,242,.35) 52%,
      rgba(251,247,242,.8) 82%,
      #FBF7F2 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Disable haze layers on mobile — the readability gradient already sets the mood */
  .hf-lavender, .hf-peach, .hf-soft { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero-bg-illustration .eyebrow,
    .hero-bg-illustration h1,
    .hero-bg-illustration .lead,
    .hero-bg-illustration .hero-actions,
    .hero-bg-illustration .hero-trust { animation: none; opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx-door-glow, .hero-fx-curve, .hero-fx-curves { animation: none; }
}

/* Mobile fine-tuning */
@media (max-width: 880px) {
  .hw-step { padding: 16px 18px; gap: 14px; border-radius: 16px; }
  .hw-step-num { width: 32px; height: 32px; font-size: .85rem; }
  .hw-step-body h3 { font-size: 1rem; }
  .hw-step-body p { font-size: .88rem; }
  .builder-frame { max-width: 320px; }
  .builder-stage { min-height: 480px; padding: 18px; }
}
@media (max-width: 540px) {
  .hw-section { padding: 16px 0 48px; }
  .hw-toggle { max-width: 100%; }
  .hw-toggle-btn { font-size: .9rem; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-panel, .hw-step, [data-build], .builder-publish, .hw-path-progress, .hw-path-dot, .builder-goal-fill {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   VISUAL RICHNESS LAYER — section gradients, depth, decorative shapes
   Adds warmth + premium feel without touching markup.
   Section rhythm: hero (warm) → active (lavender) → how (peach) → urgent (mixed)
   ============================================================================ */

/* ---- Active fundraisers — clean ivory background ---- */
.active-fundraisers {
  position: relative;
  background: var(--offwhite);
  overflow: hidden;
}
.active-fundraisers > .container { position: relative; z-index: 1; }

/* ---- How it works (homepage) — peach-warm panel with lavender blob ---- */
.how-section {
  background:
    radial-gradient(45% 50% at 0% 0%, rgba(221,160,122,.20), transparent 60%),
    radial-gradient(50% 45% at 100% 100%, rgba(141,138,168,.24), transparent 60%),
    linear-gradient(180deg, #FAF4F0 0%, #F1EEF6 100%);
  border: 1px solid rgba(141,138,168,.16);
  position: relative;
  overflow: hidden;
}
.how-section::after {
  content: '';
  position: absolute;
  top: 30%; right: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(141,138,168,.22), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation: rich-drift 28s ease-in-out infinite;
}
.how-section > .container { position: relative; z-index: 1; }

/* ---- Urgent section — warm lavender→cream blend ---- */
.urgent-section {
  background:
    radial-gradient(65% 55% at 100% 0%, rgba(141,138,168,.42), transparent 62%),
    radial-gradient(55% 60% at 0% 100%, rgba(221,160,122,.16), transparent 62%),
    radial-gradient(95% 85% at 50% 130%, rgba(45,58,74,.32), transparent 60%),
    linear-gradient(160deg, #C5C2D8 0%, #B7B4CD 58%, #ACA9C4 100%);
  position: relative;
  overflow: hidden;
}

/* ---- Page headers (about/contact/legal/404 intros) — gradient backdrop ---- */
.page-head {
  position: relative;
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(221,160,122,.20), transparent 60%),
    radial-gradient(45% 60% at 0% 100%, rgba(141,138,168,.22), transparent 60%),
    linear-gradient(180deg, #FAF4F0 0%, #F1EEF6 100%);
  padding: 56px 0 36px;
  border-bottom: 1px solid rgba(141,138,168,.10);
  overflow: hidden;
}
.page-head::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(221,160,122,.20), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  animation: rich-drift 24s ease-in-out infinite;
}
.page-head > .container { position: relative; z-index: 1; }

/* Soft gradient drift for decorative blobs */
@keyframes rich-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(20px, -16px) scale(1.06); opacity: .85; }
}

/* ---- Footer — charcoal with subtle lavender/peach glow ---- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 48% at 100% 0%, rgba(221,160,122,.18), transparent 62%),
    radial-gradient(46% 56% at 0% 100%, rgba(141,138,168,.22), transparent 62%),
    radial-gradient(60% 36% at 50% 0%, rgba(141,138,168,.08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.site-footer > .container { position: relative; z-index: 1; }

/* ---- Campaign cards — subtle peach glow on hover ---- */
.card:hover {
  box-shadow:
    0 2px 6px rgba(30,38,48,.06),
    0 14px 36px rgba(30,38,48,.10),
    0 20px 50px -10px rgba(221,160,122,.22);
}
.featured-card:hover {
  box-shadow:
    0 3px 8px rgba(30,38,48,.06),
    0 22px 56px rgba(30,38,48,.14),
    0 28px 68px -14px rgba(221,160,122,.26);
}

/* ---- Browse / start / donate / contact / thank-you intros — slight panel ---- */
.browse-head {
  background: linear-gradient(180deg, rgba(233,231,239,.5) 0%, transparent 100%);
  border-bottom: 1px solid rgba(141,138,168,.08);
}

/* ---- Story / details sections — calm tinted base ---- */
.story-section {
  background: linear-gradient(180deg, var(--offwhite) 0%, rgba(233,231,239,.35) 100%);
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  .active-fundraisers::before, .active-fundraisers::after,
  .how-section::after, .page-head::after { animation: none; }
}

/* ---- Mobile safety: keep gradients subtle, avoid overflow ---- */
@media (max-width: 760px) {
  .active-fundraisers::before { width: 260px; height: 260px; top: -80px; right: -60px; }
  .active-fundraisers::after { width: 220px; height: 220px; bottom: -60px; left: -40px; }
  .how-section::after { width: 240px; height: 240px; right: -100px; }
  .page-head { padding: 40px 0 28px; }
  .page-head::after { width: 200px; height: 200px; bottom: -60px; right: -40px; }
}

/* ============================================================================
   COMPACT CAMPAIGN CARD — used in homepage Active Campaigns list
   ============================================================================ */
.active-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-template-columns: none !important;
}
.compact-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(141,138,168,.12);
  border-radius: 18px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
  box-shadow: 0 1px 2px rgba(30,38,48,.04);
}
.compact-card:hover {
  transform: translateY(-1px);
  border-color: rgba(141,138,168,.28);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 10px 24px rgba(30,38,48,.08);
}
.cc-thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--offwhite-2);
  flex-shrink: 0;
}
.cc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cc-thumb.img-broken {
  background: linear-gradient(135deg, rgba(141,138,168,.30), rgba(221,160,122,.20));
}
.cc-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-meta {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cc-title {
  font-size: .94rem;
  font-weight: 700;
  color: var(--teal-deep);
  line-height: 1.3;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.cc-raised {
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}
.cc-pct {
  font-size: .76rem;
  font-weight: 700;
  color: var(--coral-deep);
  font-variant-numeric: tabular-nums;
}
.cc-bar {
  height: 5px;
  background: var(--gray-line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.cc-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 999px;
}

.active-more {
  margin-top: 18px;
}
.active-more .btn-ghost {
  width: 100%;
  font-weight: 600;
}

@media (min-width: 760px) {
  .active-grid { display: grid; grid-template-columns: 1fr 1fr !important; gap: 16px; }
}
@media (min-width: 1000px) {
  .active-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ============================================================================
   HOW IT WORKS — minimalist (single mockup + 3 steps + CTA)
   ============================================================================ */
.how-section-minimal {
  background: linear-gradient(180deg, var(--offwhite) 0%, var(--offwhite-2) 100%);
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 56px 0 64px;
  overflow: hidden;
}
.how-section-minimal::after { display: none; }
.how-section-minimal .section-head { text-align: center; max-width: 480px; margin: 0 auto 28px; }
.how-section-minimal .section-head h2 { color: var(--teal-deep); font-size: clamp(1.5rem, 5vw, 1.9rem); }
.how-section-minimal .section-head .eyebrow { color: var(--mint-deep); }

/* Minimal mockup card */
.how-mock {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.how-mock-card {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border: 1px solid rgba(141,138,168,.18);
  border-radius: 22px;
  padding: 20px 18px 18px;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 14px 38px -10px rgba(30,38,48,.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hmc-cat {
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(141,138,168,.18);
  color: var(--teal-deep);
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hmc-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--teal-deep);
  line-height: 1.3;
}
.hmc-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hmc-amounts span {
  text-align: center;
  padding: 8px 0;
  background: var(--offwhite);
  border: 1px solid var(--gray-line);
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-soft);
}
.hmc-amounts span.on {
  background: rgba(221,160,122,.14);
  border-color: var(--coral);
  color: var(--coral-deep);
  animation: hmc-pulse 2.4s ease-in-out infinite;
}
@keyframes hmc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221,160,122,0); }
  50%      { box-shadow: 0 0 0 6px rgba(221,160,122,.18); }
}
.hmc-cta {
  margin-top: 4px;
  text-align: center;
  padding: 11px 16px;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(199,126,79,.25);
}

/* Step list */
.how-steps-min {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.how-steps-min .hs-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(141,138,168,.12);
  border-radius: 16px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.how-steps-min .hs-step.is-active {
  border-color: rgba(221,160,122,.55);
  background: linear-gradient(180deg, #fff, rgba(221,160,122,.05));
  box-shadow: 0 2px 4px rgba(30,38,48,.04), 0 10px 26px rgba(221,160,122,.14);
}
.hs-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--offwhite-2);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}
.hs-step.is-active .hs-num {
  background: var(--coral);
  color: #fff;
}
.hs-body h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--teal-deep);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.hs-step.is-active .hs-body h4 { color: var(--teal-deep); }
.hs-body p {
  margin: 4px 0 0;
  font-size: .82rem;
  color: var(--text-soft);
  line-height: 1.45;
}

.how-cta { font-weight: 700; }

/* ============================================
   Homepage — richer backgrounds + closing CTA
   ============================================ */

/* Page backdrop — warm cream flowing into soft lavender so the gaps around
   the framed How-It-Works panel and the closing CTA never read as flat white,
   keeping the whole page in the hero's warm tone. */
#main {
  background:
    radial-gradient(55% 28% at 100% 6%, rgba(221,160,122,.10), transparent 60%),
    radial-gradient(50% 26% at 0% 20%, rgba(141,138,168,.10), transparent 60%),
    linear-gradient(180deg, #FBF6F0 0%, #FAF4F0 32%, #F4EBE9 100%);
}

/* Active Campaigns — warm cream that picks up the hero's peach at the top */
.active-fundraisers {
  background:
    radial-gradient(75% 55% at 100% -8%, rgba(221,160,122,.18), transparent 60%),
    radial-gradient(60% 50% at 0% 108%, rgba(141,138,168,.16), transparent 60%),
    linear-gradient(180deg, #FBF7F2 0%, #F6ECEA 100%);
}
.active-fundraisers::after {
  content: '';
  position: absolute;
  left: -120px; top: 16%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(221,160,122,.16), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
  animation: rich-drift 26s ease-in-out infinite;
}

/* How It Works — framed panel, warm cream base + lavender/peach corner glows */
.how-section {
  background:
    radial-gradient(55% 45% at 85% 0%, rgba(141,138,168,.15), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, rgba(221,160,122,.14), transparent 70%),
    linear-gradient(180deg, #FFFDFB 0%, #F3EFF6 100%);
}

/* ---- Start a fundraiser — closing CTA card ---- */
.start-cta-section { padding: 8px 0 52px; }
.start-cta-card {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 58px 36px 54px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(75% 95% at 50% 122%, rgba(221,160,122,.44), transparent 60%),
    radial-gradient(60% 80% at 100% -10%, rgba(141,138,168,.24), transparent 60%),
    radial-gradient(55% 75% at 0% 0%, rgba(233,231,239,.65), transparent 60%),
    linear-gradient(168deg, #FAF4F0 0%, #F4EFEA 52%, #F8E8DA 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 22px 60px -24px rgba(30,38,48,.30);
}
.start-cta-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(40% 46% at 84% 14%, rgba(255,255,255,.55), transparent 62%);
  pointer-events: none;
}
/* Badge pill */
.start-cta-badge {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 20px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--coral-deep);
  box-shadow: 0 4px 16px rgba(30,38,48,.07);
  margin-bottom: 24px;
}
/* Two-line title — strong sans + elegant serif accent */
.start-cta-title {
  position: relative;
  margin: 0 0 30px;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 8.5vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--teal-deep);
}
.start-cta-accent {
  display: block;
  margin-top: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.18em;
  letter-spacing: 0;
  color: var(--coral-deep);
}
/* Charcoal pill button with peach accent */
.start-cta-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: #FBEEE4;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow:
    0 12px 28px -10px rgba(30,38,48,.55),
    0 2px 6px rgba(30,38,48,.18);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), color .15s var(--ease);
}
.start-cta-btn svg { width: 18px; height: 18px; color: var(--coral); }
.start-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(30,38,48,.6), 0 3px 8px rgba(30,38,48,.2);
  color: #fff;
}
.start-cta-btn:active { transform: translateY(0); }

@media (max-width: 600px) {
  .start-cta-section { padding: 4px 0 40px; }
  .start-cta-card { padding: 44px 24px 40px; border-radius: 26px; }
  .start-cta-badge { margin-bottom: 20px; }
  .start-cta-title { margin-bottom: 26px; }
  .start-cta-btn { width: 100%; max-width: 320px; justify-content: center; padding: 15px 28px; }
}

/* ---- Urgent — refined background + 2 full image-top cards + button ---- */
.urgent-section {
  background:
    radial-gradient(58% 50% at 100% 0%, rgba(141,138,168,.22), transparent 62%),
    radial-gradient(50% 55% at 0% 100%, rgba(221,160,122,.10), transparent 62%),
    linear-gradient(165deg, #F4EBE9 0%, #F3F0F6 55%, #FAF4F0 100%);
}
.urgent-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}
.urgent-list .urgent-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(141,138,168,.14);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 20px 44px -24px rgba(30,38,48,.30);
}
.urgent-list .urgent-card:hover { transform: translateY(-3px); border-color: rgba(141,138,168,.30); box-shadow: 0 1px 2px rgba(30,38,48,.05), 0 26px 52px -24px rgba(30,38,48,.34); }
.urgent-list .urgent-card .uc-media {
  position: relative;
  height: 180px;
  aspect-ratio: auto;
}
.urgent-list .urgent-card .uc-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  aspect-ratio: auto;
}
.urgent-list .urgent-card .urgent-badge { top: 12px; left: 12px; right: auto; }
.urgent-list .urgent-card .uc-body { padding: 18px 20px 20px; }
.urgent-list .urgent-card h4 { margin-bottom: 12px; font-size: 1.05rem; }
.urgent-list .urgent-card .progress-bar { height: 7px; border-radius: 999px; }
.urgent-list .urgent-card .pct { margin-top: 10px; }
.urgent-more {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Faded preview of a 3rd campaign — hints at "more", not a real card, not clickable */
.urgent-peek {
  width: 100%;
  max-width: 560px;
  height: 94px;
  overflow: hidden;
  opacity: .5;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 96%);
}
.urgent-peek .urgent-card { box-shadow: 0 12px 26px -22px rgba(30,38,48,.30); border-color: rgba(141,138,168,.12); }
.urgent-peek .urgent-card:hover { transform: none; }
.urgent-peek .urgent-card .urgent-badge { top: 12px; left: 12px; right: auto; }
.urgent-more-link {
  color: var(--teal);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.urgent-more-link:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .urgent-list { max-width: 100%; gap: 16px; }
  .urgent-list .urgent-card { border-radius: 22px; }
  .urgent-list .urgent-card .uc-media { height: 168px; }
  .urgent-list .urgent-card .uc-body { padding: 16px 16px 18px; }
  .urgent-more .btn { width: 100%; max-width: 340px; justify-content: center; }
}

/* Terms/Privacy — intro paragraph moved to the bottom as a closing note */
.legal-outro {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--gray-line);
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.65;
}

/* ============================================
   How it works v2 — calm, minimal, warm
   ============================================ */
.how2-section {
  position: relative;
  overflow: hidden;
  /* Full-bleed section (no card framing) — same charcoal-blue as before */
  margin: 0;
  border-radius: 0;
  border: 0;
  padding: 48px 0 52px;
  background:
    radial-gradient(62% 52% at 50% -6%, rgba(253,218,194,.22), transparent 60%),
    radial-gradient(66% 60% at 0% 112%, rgba(205,190,207,.26), transparent 60%),
    linear-gradient(165deg, #6E6699 0%, #565079 55%, #433C60 100%);
}
/* Top dissolve — melts the previous light section (#F4ECEA) into the dark panel,
   so the seam disappears and the panel just gently darkens. Sits in the top
   padding, above the heading. */
.how2-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 56px;
  background: linear-gradient(180deg, #F4ECEA 0%, rgba(243,239,245,0) 100%);
  pointer-events: none; z-index: 0;
}
/* Bottom dissolve — melts the dark panel down into Urgent's peach (#F2DAC8). */
.how2-section::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 64px;
  background: linear-gradient(180deg, rgba(242,218,200,0) 0%, #F2DAC8 100%);
  pointer-events: none; z-index: 0;
}
.how2-section > .container { position: relative; z-index: 1; }
/* Mobile: no fade — the How It Works section keeps a solid charcoal-blue
   background (drop the top/bottom dissolve wedges). */
@media (max-width: 760px) {
  .how2-section::before, .how2-section::after { display: none; }
}
@media (max-width: 540px) { .how2-section { padding: 40px 0 44px; } }
.how2-section .section-head { text-align: center; max-width: 460px; margin: 0 auto 28px; }
.how2-section .eyebrow { color: var(--coral); }
.how2-section .section-head h2 { color: #fff; }
.how2-section .section-head .lead { color: rgba(255,255,255,.74); }

/* Preview card — single calm scene that cross-fades */
.how2-preview {
  position: relative;
  max-width: 380px;
  margin: 0 auto 30px;
  min-height: 230px;
  border-radius: 24px;
  padding: 24px;
  display: grid;
  border: 1px solid rgba(255,255,255,.65);
  background:
    radial-gradient(70% 60% at 18% 0%, rgba(221,160,122,.22), transparent 60%),
    radial-gradient(75% 70% at 100% 100%, rgba(141,138,168,.22), transparent 60%),
    linear-gradient(160deg, #FBEFE6 0%, #F4ECEC 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -18px rgba(20,26,34,.45);
}
.how2-scene {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.how2-scene.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Scene 1 — mini campaign card */
.how2-mini-card { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px -14px rgba(30,38,48,.30); }
.how2-mini-media { height: 100px; background: linear-gradient(135deg, #E7B48F 0%, #C77E4F 100%); }
.how2-mini-body { padding: 13px 15px 15px; }
.how2-mini-cat { display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 6px; }
.how2-mini-card h5 { font-size: .95rem; color: var(--teal-deep); margin: 0 0 10px; line-height: 1.25; }
.how2-bar { height: 6px; border-radius: 999px; background: var(--gray-line); overflow: hidden; }
.how2-bar span { display: block; height: 100%; background: var(--coral); border-radius: 999px; }
.how2-mini-meta { font-size: .72rem; font-weight: 700; color: var(--coral-deep); margin-top: 8px; }

/* Scene 2 — amount */
.how2-amount-card { width: 100%; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 10px 26px -14px rgba(30,38,48,.30); text-align: center; }
.how2-amount-label { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 14px; }
.how2-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.how2-amounts span { padding: 11px 0; border-radius: 10px; background: var(--offwhite-2); color: var(--text); font-weight: 700; font-size: .82rem; }
.how2-amounts span.on { background: var(--coral); color: #fff; box-shadow: 0 4px 12px rgba(199,126,79,.3); }
.how2-donate-btn { padding: 13px; border-radius: 999px; background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 6px 16px rgba(199,126,79,.3); }

/* Scene 3 — confirmation */
.how2-done { text-align: center; padding: 6px 0; }
.how2-check { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 8px 22px -6px rgba(199,126,79,.5); }
.how2-check svg { width: 30px; height: 30px; }
.how2-done h5 { font-size: 1.05rem; color: var(--teal-deep); margin: 0 0 8px; }
.how2-done p { font-size: .85rem; color: var(--text-soft); max-width: 250px; margin: 0 auto; line-height: 1.5; }

/* 3 simple steps */
.how2-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.how2-step { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.5); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
/* Per-step timing bar (fills while the step is active) */
.how2-step-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(141,138,168,.18); opacity: 0; transition: opacity .3s var(--ease); }
.how2-step-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--coral-deep)); border-radius: 0 999px 999px 0; }
.how2-step.is-active .how2-step-bar { opacity: 1; }
.how2-step .how2-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--offwhite-2); color: var(--teal-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; transition: background .3s var(--ease), color .3s var(--ease); }
.how2-step-text h4 { font-size: 1rem; color: var(--teal-deep); margin: 0 0 2px; }
.how2-step-text p { font-size: .86rem; color: var(--text-soft); margin: 0; line-height: 1.45; }
.how2-step.is-active { background: #fff; border-color: rgba(221,160,122,.40); box-shadow: 0 12px 28px -16px rgba(30,38,48,.30); }
.how2-step.is-active .how2-num { background: var(--coral); color: #fff; }

/* CTA */
.how2-cta { margin-top: 30px; display: flex; justify-content: center; }
@media (max-width: 540px) {
  .how2-preview { max-width: 100%; }
  .how2-cta .btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ============================================
   Homepage carousels — horizontal scroll of vertical cards
   (Active Campaigns + Urgent), HopePath identity
   ============================================ */
.rt-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 18px 14px;
  margin: 0 -18px;            /* bleed to viewport edges for a natural peek */
  scroll-padding-left: 18px;
}
.rt-carousel::-webkit-scrollbar { display: none; }
.rt-carousel > .card {
  flex: 0 0 80%;
  max-width: 300px;
  scroll-snap-align: start;
}
@media (min-width: 760px) {
  .rt-carousel { gap: 22px; padding: 6px 2px 16px; margin: 0; }
  .rt-carousel > .card { flex-basis: 300px; }
}

/* Glowing progress knob — echoes the reference's amber dot, in HopePath peach */
.rt-carousel .card-progress .progress-bar { overflow: visible; }
.rt-carousel .card-progress .progress-fill { position: relative; }
.rt-carousel .card-progress .progress-fill::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  width: 11px; height: 11px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(221,160,122,.28), 0 0 10px 1px rgba(221,160,122,.55);
  animation: rt-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes rt-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(221,160,122,.30), 0 0 8px 1px rgba(221,160,122,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(221,160,122,.10), 0 0 16px 3px rgba(221,160,122,.75); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-carousel .card-progress .progress-fill::after { animation: none; }
}

/* Urgent carousel — an URGENT tag on the image (peach, not yellow) */
.rt-carousel-urgent .card-media::after {
  content: 'Urgent';
  position: absolute; top: 12px; right: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(199,126,79,.35);
}

/* ============================================
   Carousel "see more" card (replaces the old buttons)
   ============================================ */
.card-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 28px 22px;
  background: rgba(255,255,255,.55);
  border: 1px dashed rgba(141,138,168,.38);
  box-shadow: none;
}
.card-more:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.9);
  border-color: rgba(221,160,122,.55);
  box-shadow: 0 14px 32px -18px rgba(30,38,48,.30);
}
.card-more-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(199,126,79,.5);
}
.card-more-icon svg { width: 22px; height: 22px; }
.card-more-text { font-weight: 800; color: var(--teal-deep); font-size: 1rem; line-height: 1.25; max-width: 13ch; }

/* ============================================
   Urgent — fully peachy (background + cards), cards a touch lighter to pop
   ============================================ */
.urgent-section {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(221,160,122,.30), transparent 62%),
    radial-gradient(55% 55% at 0% 100%, rgba(221,160,122,.16), transparent 62%),
    linear-gradient(165deg, #F2DAC8 0%, #F7E4D5 55%, #FCEFE4 100%);
}
.rt-carousel-urgent .card {
  background: #FDF4EC;                       /* same family as the bg, lighter → stands out */
  border-color: rgba(221,160,122,.22);
}
.rt-carousel-urgent .card-media { background: #F3D9C6; }
.rt-carousel-urgent .card-more {
  background: rgba(255,250,246,.7);
  border-color: rgba(221,160,122,.45);
}
.rt-carousel-urgent .card-more:hover { background: rgba(255,250,246,.95); }

/* ============================================================================
   DESKTOP HERO (>=761px) — wide illustrated background + left content column.
   Mobile keeps its own 3:4 layer (handled in the max-width:760 block above).
   ============================================================================ */
.hero-bg-illustration .hero-eyebrow {
  display: none;                 /* hidden on mobile; shown on desktop below */
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  margin-bottom: 14px;
}
@media (min-width: 761px) {
  .hero-bg-illustration {
    background-color: #F1D8CA;   /* warm fallback */
    background-image:
      /* left scrim — lifts text legibility over the illustration */
      linear-gradient(90deg, rgba(250,244,240,.66) 0%, rgba(250,244,240,.30) 32%, rgba(250,244,240,0) 56%),
      /* soft bottom fade — ends on the EXACT colour the next section starts
         with (#FBF7F2) so hero and Active read as one continuous surface */
      linear-gradient(180deg,
        rgba(251,247,242,0) 46%,
        rgba(251,247,242,.55) 74%,
        rgba(251,247,242,.9) 92%,
        #FBF7F2 100%),
      url('../../images/desktop hero.png');
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center;
    background-position-y: center;   /* cancel the mobile/parallax position */
    background-repeat: no-repeat;
    min-height: clamp(600px, 56vw, 900px);
    display: flex;
    align-items: center;
    /* room for the floating header that now overlaps the top of the art */
    padding-top: 82px;
  }
  /* Homepage only: pull the hero up behind the sticky glass header so the
     illustration fills the very top of the page — kills the white band and
     makes the header read as a balloon floating over the hero art. The 82px =
     the header's flow height (14px top gap + 68px card). */
  #main:has(.hero-bg-illustration) { margin-top: -82px; }
  /* Portal, dotted arc, hearts and glow are already baked into the image */
  .hero-bg-illustration .hero-fx { display: none; }
  /* Keep the container full-width (the flex section would otherwise shrink it
     to its content and center it) so the text aligns to the left like the ref. */
  .hero-bg-illustration > .container { width: 100%; }
  .hero-bg-illustration .hero-grid { min-height: 0; grid-template-columns: 1fr; justify-items: start; }
  .hero-bg-illustration .hero-content { max-width: 620px; }
  .hero-bg-illustration .hero-eyebrow { display: inline-block; }
  .hero-bg-illustration h1 { font-size: clamp(2.6rem, 4.3vw, 3.6rem); }
  .hero-bg-illustration h1 .accent { white-space: nowrap; }
  .hero-bg-illustration .lead { max-width: 470px; }
}

/* ============================================================================
   How it works v2 — richer 2-column layout (desktop) + 4-scene journey
   ============================================================================ */
.how2-layout { display: grid; grid-template-columns: 1fr; gap: 26px; }

/* Scene tag + multi-element scenes */
.how2-scene { flex-direction: column; gap: 16px; }
.how2-scene-tag {
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-deep);
}
.how2-mini-meta { display: flex; justify-content: space-between; align-items: center; }
.how2-mini-pct { color: var(--coral-deep); font-weight: 800; }

/* Scene 3 — confirm card */
.how2-confirm-card {
  width: 100%; background: #fff; border-radius: 16px; padding: 20px 18px;
  box-shadow: 0 10px 26px -14px rgba(30,38,48,.30); text-align: center;
}
.how2-confirm-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.how2-confirm-amt { font-size: 1.9rem; font-weight: 800; color: var(--teal-deep); letter-spacing: -.02em; }
.how2-confirm-to { font-size: .82rem; color: var(--text-soft); }
.how2-confirm-to b { color: var(--teal-deep); font-weight: 700; }
.how2-confirm-secure {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; color: var(--mint-deep);
  margin-bottom: 14px;
}
.how2-confirm-secure svg { width: 14px; height: 14px; }

/* Scene 4 — share row */
.how2-share-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.how2-share-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--offwhite-2); color: var(--teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.how2-share-ico svg { width: 16px; height: 16px; }
.how2-share-pill {
  padding: 8px 16px; border-radius: 999px; margin-left: 4px;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff;
  font-weight: 700; font-size: .82rem; box-shadow: 0 6px 14px rgba(199,126,79,.3);
}

/* Scene dots */
.how2-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 6px; justify-content: center; }
.how2-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(45,58,74,.16); transition: width .3s var(--ease), background .3s var(--ease); }
.how2-dots i.is-active { width: 18px; background: var(--coral); }

/* Extra detail line on the explanatory cards */
.how2-step-extra { display: block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--coral-deep); line-height: 1.4; }

/* ---- Desktop: 2 columns (animation | cards) + bigger preview ---- */
@media (min-width: 761px) {
  .how2-section { padding: 64px 0 70px; }
  .how2-layout {
    grid-template-columns: 1.04fr .96fr;
    gap: 48px;
    align-items: center;
    max-width: 1080px;
    margin: 10px auto 0;
  }
  .how2-preview {
    max-width: 100%;
    margin: 0;
    min-height: 470px;
    padding: 30px 30px 44px;
    border-radius: 28px;
  }
  .how2-steps { max-width: 100%; margin: 0; gap: 14px; }
  .how2-step { padding: 20px 22px; border-radius: 18px; align-items: flex-start; }
  .how2-step .how2-num { width: 34px; height: 34px; font-size: 1rem; }
  .how2-step-text h4 { font-size: 1.12rem; margin-bottom: 4px; }
  .how2-step-text p { font-size: .92rem; }
  .how2-confirm-amt { font-size: 2.1rem; }
}

/* How It Works — show the simple version on mobile, the rich 2-col one on desktop */
.how2-section .how2-d { display: none; }
.how2-section .how2-m { display: block; }
@media (min-width: 761px) {
  .how2-section .how2-d { display: grid; }
  .how2-section .how2-m { display: none; }
}

/* ============================================================================
   HOMEPAGE POLISH — warmer backgrounds, richer Urgent, final story CTA
   (appended; overrides earlier rules where needed)
   ============================================================================ */

/* ---- Active campaigns: warmer, less white, soft lavender + peach glows ---- */
.active-fundraisers {
  position: relative;
  background:
    radial-gradient(48% 42% at 88% -4%, rgba(141,138,168,.20), transparent 64%),
    radial-gradient(46% 40% at 4% 104%, rgba(221,160,122,.13), transparent 66%),
    linear-gradient(180deg, #FBF7F2 0%, #F4ECEA 100%);
}
.active-fundraisers .active-view-all {
  background: rgba(255,255,255,.78);
  box-shadow: 0 4px 14px -8px rgba(45,58,74,.30);
}

/* Warm haze that EMERGES below the seam — fully transparent at the exact
   boundary (where the hero already ends on #FBF7F2) so there's no hard line,
   then a soft peach + lavender glow blooms organically a little lower. */
.active-fundraisers::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 200px;
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(221,160,122,.16), transparent 60%),
    radial-gradient(120% 100% at 88% 0%, rgba(141,138,168,.16), transparent 60%),
    linear-gradient(180deg, rgba(241,216,202,0) 0%, rgba(241,216,202,.22) 48%, rgba(241,216,202,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.active-fundraisers .container { position: relative; z-index: 1; }

/* Mobile: mirror the hero's bottom fade at the TOP of Active — a symmetric cream
   dissolve (#FBF7F2 → transparent) that keeps the boundary pure cream like the
   hero's end, then lets the section's own tint emerge lower. Makes hero → Active
   read as one continuous surface. (Desktop keeps the warm haze above.) */
@media (max-width: 760px) {
  .active-fundraisers::before {
    height: 170px;
    background: linear-gradient(180deg,
      #FBF7F2 0%,
      rgba(251,247,242,.8) 18%,
      rgba(251,247,242,.35) 48%,
      rgba(251,247,242,0) 100%);
  }
}

/* ---- Urgent: 2 hero cards + faded 3rd "peek" + text link ---- */
.urgent-head { align-items: flex-end; }
.urgent-head-text .urgent-sub {
  font-size: .96rem; color: var(--text-soft); margin: 6px 0 0; max-width: 460px;
}
.urgent-viewall {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .92rem; font-weight: 700; color: var(--teal-deep);
  white-space: nowrap; padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: gap .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.urgent-viewall svg { transition: transform .2s var(--ease); }
.urgent-viewall:hover { color: var(--teal); border-color: rgba(45,58,74,.35); }
.urgent-viewall:hover svg { transform: translateX(3px); }
/* Desktop: the faded 3rd card already carries a "View all urgent" button, so the
   header link is redundant — hide it. (Kept on mobile, where the peek is hidden.) */
@media (min-width: 761px) { .urgent-viewall { display: none; } }

.urgent-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) and (max-width: 760px) {
  .urgent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 761px) {
  .urgent-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
}
.urgent-grid > .card { height: 100%; }

/* URGENT badge + warm card tone (was scoped to the old carousel) */
.urgent-grid .card { background: #FDF4EC; border-color: rgba(221,160,122,.24); }
.urgent-grid .card-media { background: #F3D9C6; }
.urgent-grid .card-media::after {
  content: 'Urgent';
  position: absolute; top: 12px; right: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(199,126,79,.35);
}

/* Faded 3rd card — hidden on small screens, a soft "continue" preview on desktop.
   The card and its veil are both direct grid children placed in column 3 / row 1
   so the card keeps the normal `.urgent-grid > .card { height:100% }` sizing and
   the veil overlays it exactly (no wrapper, no flex/height circularity). */
.urgent-peek-card, .urgent-peek-veil { display: none; }
@media (min-width: 761px) {
  .urgent-peek-card {
    display: flex; grid-column: 3; grid-row: 1; pointer-events: none;
  }
  .urgent-peek-veil { display: flex; grid-column: 3; grid-row: 1; }
}
/* Mobile: the 3rd campaign peeks (full-size, real-looking card) and fades out,
   with the "View all urgent" button floating over it. */
@media (max-width: 760px) {
  .urgent-viewall { display: none; }              /* header link now redundant */
  .urgent-peek-card {
    display: flex; grid-column: 1; grid-row: 3;
    /* End the card (and the fade) right at the bottom of the photo — a tight
       dissolve, not a long stretched one. */
    max-height: 190px; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }
  /* Keep the photo full-size — without this the flex column squeezes it thin. */
  .urgent-peek-card .card-media { flex-shrink: 0; }
  .urgent-peek-veil {
    display: flex; grid-column: 1; grid-row: 3;
    align-items: center; justify-content: center;
    padding-top: 52px;                             /* button low over the photo */
    background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.urgent-peek-veil {
  z-index: 3;
  border-radius: var(--radius-lg);
  align-items: center; justify-content: center;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(252,239,228,.45) 0%, rgba(247,228,213,.86) 70%, rgba(244,222,205,.94) 100%);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  transition: background .25s var(--ease);
}
.urgent-peek-veil:hover {
  background: linear-gradient(180deg, rgba(252,239,228,.55) 0%, rgba(247,228,213,.9) 70%, rgba(244,222,205,.96) 100%);
}
.urgent-peek-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  background: #fff; color: var(--teal-deep);
  font-weight: 800; font-size: .95rem;
  box-shadow: 0 10px 26px -10px rgba(45,58,74,.40), 0 1px 0 rgba(255,255,255,.8) inset;
  transition: transform .2s var(--ease), box-shadow .22s var(--ease);
}
.urgent-peek-veil:hover .urgent-peek-cta {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(45,58,74,.48), 0 1px 0 rgba(255,255,255,.8) inset;
}

/* ---- Final CTA — centered, peach/lavender, bridges Urgent → footer ---- */
.story-cta-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46% 60% at 12% 8%, rgba(221,160,122,.24), transparent 60%),
    radial-gradient(52% 64% at 90% 96%, rgba(141,138,168,.30), transparent 62%),
    linear-gradient(180deg, #FCEFE4 0%, #ECE6F1 50%, #E4E0EE 100%);
  padding: clamp(56px, 8vw, 100px) 0;
}
.story-cta-section > .container { position: relative; z-index: 1; }
.story-cta {
  position: relative;
  max-width: 640px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.story-cta-badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-deep);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(221,160,122,.35);
  padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgba(199,126,79,.5);
  margin-bottom: 20px;
}
.story-cta h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08; letter-spacing: -.02em;
  color: var(--teal-deep); margin: 0 0 16px;
}
.story-cta-accent { color: var(--mint-deep); }
.story-cta p {
  font-size: 1.04rem; line-height: 1.55; color: var(--text-soft);
  max-width: 480px; margin: 0 0 28px;
}
.story-cta .btn-amber { align-self: center; }
@media (max-width: 760px) {
  /* Match the hero's flat "Donate Now" button exactly (full-width on mobile) */
  .story-cta .btn-amber { width: 100%; padding: 16px 26px; font-size: 1.05rem; }
  .story-cta p { font-size: .98rem; }
}

/* ---- Footer: warm peach + lavender glows over the charcoal base ---- */
.site-footer { overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,160,122,.22), transparent 68%);
  pointer-events: none; z-index: 0;
}
.site-footer::after {
  content: ''; position: absolute; bottom: -140px; left: -90px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(141,138,168,.20), transparent 70%);
  pointer-events: none; z-index: 0;
}
.site-footer .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .urgent-peek-veil, .urgent-viewall, .urgent-peek-cta { transition: none; }
}

/* ============================================================================
   DESKTOP HOMEPAGE REWORK — batch 1 (only >=761px; mobile untouched)
   ============================================================================ */
@media (min-width: 761px) {

  /* #1 Hero -> Active continuity: hold the seam on pure cream (#FBF7F2, the
     exact colour the hero's bottom fade ends on) so there's no tonal band. */
  .active-fundraisers {
    background:
      radial-gradient(60% 46% at 50% 130%, rgba(141,138,168,.10), transparent 70%),
      linear-gradient(180deg, #FBF7F2 0%, #FBF7F2 36%, #F6ECEA 100%);
  }
  .active-fundraisers::before { display: none; }

  /* #2 + #3 How It Works becomes a charcoal CARD floating on the cream page
     (no full-bleed dark band, no dissolve fades). */
  .how2-section {
    background: var(--offwhite);
    padding: 18px 0 46px;
  }
  .how2-section::before, .how2-section::after { display: none; }
  .how2-section > .container {
    position: relative; z-index: 1;
    max-width: 1140px;
    padding: 54px clamp(30px, 4vw, 56px) 60px;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.06);
    background:
      radial-gradient(62% 52% at 50% -6%, rgba(253,218,194,.22), transparent 60%),
      radial-gradient(66% 60% at 0% 112%, rgba(205,190,207,.26), transparent 60%),
      linear-gradient(165deg, #6E6699 0%, #565079 55%, #433C60 100%);
    box-shadow: 0 30px 70px -34px rgba(30,38,48,.55), 0 1px 0 rgba(255,255,255,.06) inset;
    overflow: hidden;
  }

  /* #5 Share Your Story: lavender — the hue of the "deserves support." text,
     a touch lighter, with soft gradients, plus a discreet glow that drifts
     across the whole area. */
  .story-cta-section {
    background:
      radial-gradient(50% 55% at 16% 6%, rgba(255,255,255,.42), transparent 60%),
      radial-gradient(54% 60% at 88% 96%, rgba(92,86,132,.45), transparent 62%),
      linear-gradient(165deg, #C2BED9 0%, #ABA7C7 48%, #918DAD 100%);
  }
  .story-cta-section::before {
    content: ''; position: absolute; inset: -28% -16%;
    background:
      radial-gradient(30% 38% at 28% 36%, rgba(255,255,255,.40), transparent 60%),
      radial-gradient(26% 34% at 74% 64%, rgba(221,160,122,.20), transparent 62%);
    pointer-events: none; z-index: 0;
    animation: storyGlowDrift 13s ease-in-out infinite alternate;
  }
}
@keyframes storyGlowDrift {
  0%   { transform: translate3d(-7%, -2%, 0); opacity: .7; }
  50%  { opacity: 1; }
  100% { transform: translate3d(7%, 2%, 0); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .story-cta-section::before { animation: none; }
}

/* ============================================================================
   DESKTOP BROWSE / DISCOVER REWORK (only >=761px; mobile untouched)
   ============================================================================ */
@media (min-width: 761px) {
  /* #9 remove the divider line under the "Discover campaigns" heading */
  .browse-head { border-bottom: none; }

  /* #10 a soft glow that sweeps along each card's filled progress bar */
  .grid-cards .progress-bar { overflow: hidden; }
  .grid-cards .progress-fill { position: relative; overflow: hidden; }
  .grid-cards .progress-fill::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: translateX(-130%);
    animation: progressGlow 2.8s ease-in-out infinite;
  }

  /* #11 directional page transition: old cards fade out fast, new cards slide in
     from the right (next) or the left (prev), lightly staggered by column. */
  .grid-cards.grid-leaving { opacity: 0; transition: opacity .16s ease; }
  .grid-cards.grid-enter-right > .card { animation: gridEnterRight .5s var(--ease) both; }
  .grid-cards.grid-enter-left  > .card { animation: gridEnterLeft  .5s var(--ease) both; }
  .grid-cards[class*="grid-enter"] > .card:nth-child(3n+2) { animation-delay: .06s; }
  .grid-cards[class*="grid-enter"] > .card:nth-child(3n+3) { animation-delay: .12s; }
}
@keyframes progressGlow {
  0%        { transform: translateX(-130%); }
  55%, 100% { transform: translateX(330%); }
}
@keyframes gridEnterRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes gridEnterLeft  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .grid-cards .progress-fill::after { animation: none; display: none; }
  .grid-cards.grid-enter-right > .card, .grid-cards.grid-enter-left > .card { animation: none; }
}

/* ============================================================================
   ACTIVE CAMPAIGNS — desktop spotlight (expanding auto-cycling panels)
   ============================================================================ */
@media (min-width: 761px) {
  .active-spotlight {
    display: flex; gap: 14px;
    height: clamp(360px, 40vw, 460px);
  }
  .asp-panel {
    position: relative; flex: 1 1 0; min-width: 0;
    border-radius: 22px; overflow: hidden;
    text-decoration: none; cursor: pointer;
    background: var(--offwhite-2);
    box-shadow: 0 1px 2px rgba(30,38,48,.05), 0 16px 38px -22px rgba(30,38,48,.45);
    transition: flex-grow .6s var(--ease), box-shadow .3s var(--ease);
    will-change: flex-grow;
  }
  .asp-panel.is-active { flex-grow: 4.4; box-shadow: 0 2px 6px rgba(30,38,48,.08), 0 26px 56px -26px rgba(30,38,48,.55); }
  .asp-media { position: absolute; inset: 0; }
  .asp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .asp-panel.is-active .asp-media img { transform: scale(1.04); }
  .asp-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20,26,34,0) 28%, rgba(20,26,34,.4) 62%, rgba(20,26,34,.82) 100%);
  }
  .asp-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    padding: 5px 12px; border-radius: 999px; white-space: nowrap;
    background: rgba(255,255,255,.92); color: var(--teal-deep);
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  }
  .asp-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px; color: #fff; }
  .asp-title {
    font-size: 1.22rem; line-height: 1.24; color: #fff; margin: 0; font-weight: 800; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 10px rgba(20,26,34,.4);
  }
  .asp-panel:not(.is-active) .asp-title { -webkit-line-clamp: 4; font-size: 1.04rem; }
  /* Description + stats reveal only on the active (expanded) panel */
  .asp-desc, .asp-bar, .asp-stats {
    opacity: 0; max-height: 0; overflow: hidden;
    transition: opacity .45s var(--ease), max-height .5s var(--ease), margin .45s var(--ease);
  }
  .asp-desc {
    color: rgba(255,255,255,.92); font-size: .94rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  .asp-panel.is-active .asp-desc  { opacity: 1; max-height: 78px; margin-top: 9px; }
  .asp-panel.is-active .asp-bar   { opacity: 1; max-height: 18px; margin-top: 14px; }
  .asp-panel.is-active .asp-stats { opacity: 1; max-height: 24px; margin-top: 9px; }
  .asp-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.3); }
  .asp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--coral-deep)); }
  .asp-stats { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; font-weight: 700; white-space: nowrap; }
  /* Narrow (inactive) panels: keep them readable, hide the body chrome */
  .asp-panel:not(.is-active) .asp-body { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .asp-panel, .asp-media img { transition: none; }
}

/* ============================================================================
   HOW IT WORKS (desktop) — original card sizing, MORE spacing, the animation
   preview stretched to the full height of the 3 step cards, and richer
   layered micro-animations per scene.
   ============================================================================ */
@media (min-width: 761px) {
  .how2-d.how2-layout { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: stretch; }
  .how2-d .how2-steps { gap: 20px; justify-content: space-between; }
  .how2-d .how2-preview {
    align-self: stretch; height: 100%; min-height: 0;
    padding: 32px; border-radius: 26px;
  }
  .how2-d .how2-mini-media { height: 132px; }

  /* Scene 1 — card eases in, the progress bar fills */
  .how2-d .how2-scene[data-scene="1"].is-active .how2-mini-card { animation: how2CardIn .55s var(--ease) both; }
  .how2-d .how2-scene[data-scene="1"].is-active .how2-bar span   { animation: how2Fill 1.6s var(--ease) .25s both; }

  /* Scene 2 — each amount taps in sequence, the donate button keeps pulsing */
  .how2-d .how2-scene[data-scene="2"].is-active .how2-amounts span { animation: how2Tap 1.9s var(--ease) both; }
  .how2-d .how2-scene[data-scene="2"].is-active .how2-amounts span:nth-child(1){ animation-delay: .20s; }
  .how2-d .how2-scene[data-scene="2"].is-active .how2-amounts span:nth-child(2){ animation-delay: .50s; }
  .how2-d .how2-scene[data-scene="2"].is-active .how2-amounts span:nth-child(3){ animation-delay: .80s; }
  .how2-d .how2-scene[data-scene="2"].is-active .how2-amounts span:nth-child(4){ animation-delay: 1.1s; }
  .how2-d .how2-scene[data-scene="2"].is-active .how2-donate-btn { animation: how2Pulse 1.5s var(--ease) 1.3s infinite; }

  /* Scene 3 — amount pops, secure badge glows, confirm button pulses */
  .how2-d .how2-scene[data-scene="3"].is-active .how2-confirm-amt    { animation: how2Pop .6s var(--ease) both; }
  .how2-d .how2-scene[data-scene="3"].is-active .how2-confirm-secure { animation: how2Glow 1.8s ease-in-out .3s infinite; }
  .how2-d .how2-scene[data-scene="3"].is-active .how2-donate-btn     { animation: how2Pulse 1.5s var(--ease) .8s infinite; }

  /* Scene 4 — check pops, share icons cascade in, share pill pulses */
  .how2-d .how2-scene[data-scene="4"].is-active .how2-check     { animation: how2Pop .6s var(--ease) both; }
  .how2-d .how2-scene[data-scene="4"].is-active .how2-share-ico { animation: how2PopUp .5s var(--ease) both; }
  .how2-d .how2-scene[data-scene="4"].is-active .how2-share-ico:nth-child(1){ animation-delay: .30s; }
  .how2-d .how2-scene[data-scene="4"].is-active .how2-share-ico:nth-child(2){ animation-delay: .45s; }
  .how2-d .how2-scene[data-scene="4"].is-active .how2-share-ico:nth-child(3){ animation-delay: .60s; }
  .how2-d .how2-scene[data-scene="4"].is-active .how2-share-pill{ animation: how2Pulse 1.5s var(--ease) .9s infinite; }
}
@keyframes how2CardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes how2Fill   { from { width: 0; } }
@keyframes how2Tap    { 0%, 100% { transform: none; } 12% { transform: scale(.9); } 26% { transform: scale(1); } }
@keyframes how2Pulse  { 0%, 100% { transform: none; box-shadow: 0 6px 16px rgba(199,126,79,.3); } 50% { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(199,126,79,.46); } }
@keyframes how2Pop    { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }
@keyframes how2PopUp  { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes how2Glow   { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .how2-d .how2-scene * { animation: none !important; }
}

/* ============================================================================
   ACTIVE SPOTLIGHT — 6th panel = "Browse campaigns" gradient CTA
   ============================================================================ */
@media (min-width: 761px) {
  .asp-cta { background: linear-gradient(150deg, #E0A77F 0%, #C77E4F 52%, #8D8AA8 130%); }
  .asp-cta::after { display: none; }
  .asp-cta .asp-cta-inner {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 18px; color: #fff; text-align: center;
  }
  .asp-cta-icon {
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .3s var(--ease), background .3s var(--ease);
  }
  .asp-cta-icon svg { width: 24px; height: 24px; }
  .asp-cta:hover .asp-cta-icon { transform: translateX(3px); background: rgba(255,255,255,.32); }
  .asp-cta-text {
    font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.2;
    opacity: 0; max-height: 0; overflow: hidden;
    transition: opacity .4s var(--ease), max-height .45s var(--ease);
  }
  .asp-cta.is-active .asp-cta-text { opacity: 1; max-height: 60px; }
}

/* ============================================================================
   URGENT (desktop) — 1 tall featured card + 3 cards + a "View all urgent" tile,
   plus breathing room before the Share Your Story section.
   ============================================================================ */
@media (min-width: 761px) {
  .urgent-section { padding-bottom: clamp(40px, 5vw, 60px); }
  .urgent-grid.urgent-feature {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .urgent-feature .urgent-big { grid-column: 1; grid-row: 1 / span 2; }
  /* let the featured card's photo fill its extra height */
  .urgent-feature .urgent-big .card-media { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
  .urgent-viewall-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; border-radius: var(--radius-lg); text-align: center; padding: 20px;
    color: #fff; text-decoration: none; font-weight: 800; font-size: 1.06rem; line-height: 1.25;
    background: linear-gradient(150deg, var(--coral) 0%, var(--coral-deep) 70%, #8D8AA8 150%);
    box-shadow: 0 1px 2px rgba(30,38,48,.05), 0 16px 36px -20px rgba(199,126,79,.6);
    transition: transform .2s var(--ease), box-shadow .22s var(--ease);
  }
  .urgent-viewall-tile svg {
    width: 22px; height: 22px;
    padding: 9px; box-sizing: content-box; border-radius: 50%;
    background: rgba(255,255,255,.22); transition: transform .25s var(--ease);
  }
  .urgent-viewall-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(30,38,48,.08), 0 22px 46px -20px rgba(199,126,79,.7); }
  .urgent-viewall-tile:hover svg { transform: translateX(4px); }
}

/* ============================================================================
   HERO — a soft light glow sweeps left -> right across "Real paths forward."
   ============================================================================ */
.hero h1 .accent {
  background-image: linear-gradient(100deg,
    var(--mint-deep) 0%, var(--mint-deep) 40%,
    #BBA8EE 47%, #FBF4FF 50%, #BBA8EE 53%,
    var(--mint-deep) 60%, var(--mint-deep) 100%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: heroAccentShine 5s var(--ease) 1.2s infinite;
}
@keyframes heroAccentShine {
  0%        { background-position: 100% 0; }
  45%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .accent {
    animation: none; background: none;
    -webkit-text-fill-color: currentColor; color: var(--mint-deep);
  }
}

/* ============================================================================
   FINAL CTA (Share Your Story) — desktop: same palette, more contrast,
   depth & presence (background, title, text, badge, button).
   ============================================================================ */
@media (min-width: 761px) {
  /* Lighter & warmer, like the mobile version: a small peach->lavender fade at
     the top (the peach top continues the Urgent section above, so the seam
     becomes a soft little fade), then a calm light lavender. */
  .story-cta-section {
    background:
      radial-gradient(44% 50% at 16% 14%, rgba(255,250,244,.5), transparent 60%),
      radial-gradient(40% 48% at 86% 90%, rgba(141,135,168,.22), transparent 62%),
      radial-gradient(30% 38% at 80% 22%, rgba(221,160,122,.16), transparent 60%),
      linear-gradient(180deg, #FCEFE4 0%, #F1E7EC 13%, #E6DFEC 46%, #DCD4E6 100%);
  }
  /* Title — "Your story" stays dark & crisp; lavender line gets real presence */
  .story-cta h2 { text-shadow: 0 1px 1px rgba(255,255,255,.16); }
  .story-cta-accent {
    color: #5A5684;                         /* deeper, more saturated lavender */
    text-shadow: 0 1px 0 rgba(255,255,255,.22);
  }
  /* Support text — clearer & refined (not heavy black) */
  .story-cta p { color: rgba(38,48,64,.86); }
  /* Badge — more premium, less washed */
  .story-cta-badge {
    background: rgba(255,255,255,.94);
    border-color: rgba(199,126,79,.5);
    color: var(--coral-deep);
    box-shadow: 0 7px 20px -9px rgba(45,58,74,.42), 0 1px 0 rgba(255,255,255,.75) inset;
  }
  /* Button — same peach, more presence: deeper shadow + soft glow ring */
  .story-cta .btn-amber {
    box-shadow:
      0 2px 5px rgba(150,80,36,.24),
      0 13px 32px rgba(199,126,79,.46),
      0 0 0 7px rgba(221,160,122,.13);
  }
  .story-cta .btn-amber:hover {
    box-shadow:
      0 4px 9px rgba(150,80,36,.30),
      0 20px 44px rgba(199,126,79,.54),
      0 0 0 9px rgba(221,160,122,.18);
  }
}

/* ============================================================================
   HOW IT WORKS — soft lilac accents (instead of peach), on the lighter card
   ============================================================================ */
.how2-section {
  --coral: #B89FE0;        /* light pretty lilac (eyebrow, bar, button start) */
  --coral-deep: #7A5FB0;   /* deeper lilac (readable text / gradient end) */
}
.how2-section .how2-mini-media {
  background: linear-gradient(135deg, #CDB9F0 0%, #9D80D6 100%);
}
.how2-section .how2-step.is-active { border-color: rgba(160,135,210,.5); }
/* dark ink on the light-lilac fills so they stay legible */
.how2-section .how2-donate-btn,
.how2-section .how2-amounts span.on,
.how2-section .how2-share-pill,
.how2-section .how2-check,
.how2-section .how2-step.is-active .how2-num { color: #2D2748; }
/* peach shadows -> lilac shadows */
.how2-section .how2-donate-btn,
.how2-section .how2-share-pill { box-shadow: 0 6px 16px rgba(122,95,176,.32); }
.how2-section .how2-amounts span.on { box-shadow: 0 4px 12px rgba(122,95,176,.3); }
.how2-section .how2-check { box-shadow: 0 8px 22px -6px rgba(122,95,176,.5); }

/* ============================================================================
   HOW IT WORKS — PREMIUM REFINEMENT (v hpCI)
   Richer indigo/lavender/peach depth, glassier mockup with more life, and
   more elegant step cards. Generic rules lift both mobile + desktop; the
   layout-specific polish is gated to >=761px so the mobile structure stays.
   ============================================================================ */

/* ---- 1. Inner mockup cards: more depth, soft glass, subtle borders ---- */
.how2-section .how2-mini-card,
.how2-section .how2-amount-card,
.how2-section .how2-confirm-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF8FB 100%);
  border: 1px solid rgba(124,108,160,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 5px -2px rgba(40,30,70,.14),
    0 18px 36px -20px rgba(40,30,70,.42);
}
/* Mini media: warmer lilac with a soft top sheen */
.how2-section .how2-mini-media {
  position: relative;
  background: linear-gradient(140deg, #D6C2F2 0%, #A487DD 60%, #8E6FD0 100%);
}
.how2-section .how2-mini-media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 20% 0%, rgba(255,255,255,.4), transparent 60%);
}
/* Progress bar: rounded track + a soft glow sweeping the fill */
.how2-section .how2-bar { background: rgba(124,108,160,.16); height: 7px; }
.how2-section .how2-bar span {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #B89FE0, #7A5FB0);
}
.how2-section .how2-bar span::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-160%);
  animation: how2BarSweep 3.2s ease-in-out infinite;
}

/* ---- 2. Amount chips: clearer rest / selected states ---- */
.how2-section .how2-amounts span {
  background: #F3EEF8; color: var(--teal-deep);
  border: 1px solid rgba(124,108,160,.14);
  transition: transform .35s var(--ease), background .35s var(--ease),
              box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.how2-section .how2-amounts span.on {
  background: linear-gradient(135deg, #C8AEF0 0%, #9D80D6 100%);
  color: #2D2748; border-color: transparent;
  box-shadow: 0 8px 18px -6px rgba(122,95,176,.55);
  transform: translateY(-2px);
}
.how2-section .how2-amount-note {
  display: block; margin-top: -4px; font-size: .72rem; font-weight: 600;
  color: var(--mint-deep); letter-spacing: .01em;
}

/* ---- 3. Donate button: glass sheen sweep ---- */
.how2-section .how2-donate-btn,
.how2-section .how2-share-pill { position: relative; overflow: hidden; }
.how2-section .how2-donate-btn {
  background: linear-gradient(135deg, #B89FE0 0%, #8E6FD0 50%, #7A5FB0 100%);
}
.how2-section .how2-donate-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-170%);
  animation: how2Sheen 3.6s ease-in-out infinite;
}

/* ---- 4. Confirm + secure + check refinements ---- */
.how2-section .how2-confirm-secure {
  background: rgba(184,159,224,.12); border: 1px solid rgba(184,159,224,.2);
  padding: 6px 12px; border-radius: 999px; color: #6B5E8C;
}
.how2-section .how2-check {
  background: linear-gradient(135deg, #C8AEF0 0%, #9D80D6 100%);
}
.how2-section .how2-share-ico {
  background: #F1ECF8; color: #6B5E8C; border: 1px solid rgba(124,108,160,.14);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.how2-section .how2-share-ico:hover { transform: translateY(-2px); background: #fff; color: #5C5684; }

/* ---- 5. Scene cross-fade: softer, with a touch of scale + blur ---- */
.how2-section .how2-scene {
  transform: translateY(16px) scale(.985); filter: blur(1.5px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
.how2-section .how2-scene.is-active { transform: none; filter: none; }

/* ---- 6. Scene tag: little lilac pill ---- */
.how2-section .how2-scene-tag {
  align-self: center; padding: 4px 12px; border-radius: 999px;
  background: rgba(184,159,224,.16); color: #6B5E8C;
  border: 1px solid rgba(184,159,224,.22);
}

/* ---- 7. Dots: longer active pill with a glow ---- */
.how2-section .how2-dots i { height: 7px; background: rgba(45,40,72,.16); }
.how2-section .how2-dots i.is-active {
  width: 22px; background: linear-gradient(90deg, #B89FE0, #7A5FB0);
  box-shadow: 0 2px 8px rgba(122,95,176,.5);
}

/* ---- 8. Step cards: glassier, refined active state + accent rail ---- */
.how2-section .how2-step {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,248,251,.86));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 26px -20px rgba(20,18,40,.5);
  transition: transform .45s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.how2-section .how2-step::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #B89FE0, #7A5FB0);
  transform: scaleY(0); transform-origin: top center; opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.how2-section .how2-step.is-active {
  background: linear-gradient(180deg, #FFFFFF, #FBF6FC);
  border-color: rgba(160,135,210,.5);
  box-shadow: 0 18px 42px -22px rgba(60,40,110,.55), 0 0 0 1px rgba(184,159,224,.22);
}
.how2-section .how2-step.is-active::before { transform: scaleY(1); opacity: 1; }
.how2-section .how2-step .how2-num {
  background: #EFE9F6; color: #5C5684;
  box-shadow: inset 0 0 0 1px rgba(124,108,160,.12);
}
.how2-section .how2-step.is-active .how2-num {
  background: linear-gradient(135deg, #C8AEF0, #9D80D6); color: #2D2748;
  box-shadow: 0 6px 14px -4px rgba(122,95,176,.5);
}
/* Step timing bar: prettier track + glow */
.how2-section .how2-step-bar { background: rgba(124,108,160,.16); height: 3px; }
.how2-section .how2-step-bar i {
  background: linear-gradient(90deg, #B89FE0, #7A5FB0);
  box-shadow: 0 0 10px rgba(122,95,176,.5);
}
/* The "extra" line becomes a tasteful callout instead of a loose sentence */
.how2-section .how2-step-extra {
  margin-top: 12px; padding: 9px 13px 9px 13px; border-radius: 12px;
  position: relative; font-size: .8rem; font-weight: 600; color: #6B5E8C;
  background: rgba(184,159,224,.10); border: 1px solid rgba(184,159,224,.16);
  border-left: 3px solid rgba(184,159,224,.4);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.how2-section .how2-step.is-active .how2-step-extra {
  background: linear-gradient(180deg, rgba(246,203,183,.20), rgba(184,159,224,.16));
  border-color: rgba(184,159,224,.32); border-left-color: #C49A77; color: #5C5684;
}

/* ---- 9. Desktop-only depth: richer card background + drifting glows ---- */
@media (min-width: 761px) {
  .how2-section > .container {
    background:
      radial-gradient(46% 40% at 50% -8%, rgba(253,218,194,.30), transparent 62%),
      radial-gradient(42% 52% at 104% 6%, rgba(246,203,183,.20), transparent 60%),
      radial-gradient(60% 56% at -6% 110%, rgba(205,190,207,.32), transparent 62%),
      radial-gradient(54% 48% at 50% 64%, rgba(141,138,168,.16), transparent 72%),
      linear-gradient(162deg, #6E6699 0%, #565079 52%, #3E3858 100%);
    box-shadow: 0 32px 84px -34px rgba(30,38,48,.62), 0 1px 0 rgba(255,255,255,.10) inset;
  }
  .how2-section > .container > * { position: relative; z-index: 1; }
  .how2-section > .container::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: -14%; right: -8%; width: 48%; height: 64%;
    background: radial-gradient(closest-side, rgba(253,218,194,.34), transparent 72%);
    animation: how2GlowA 16s ease-in-out infinite alternate;
  }
  .how2-section > .container::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    bottom: -18%; left: -10%; width: 54%; height: 66%;
    background: radial-gradient(closest-side, rgba(205,190,207,.30), transparent 72%);
    animation: how2GlowB 19s ease-in-out infinite alternate;
  }

  /* Preview panel: glassier, deeper, with a soft drifting spotlight */
  .how2-d .how2-preview {
    border: 1px solid rgba(255,255,255,.7);
    background:
      radial-gradient(72% 56% at 16% -4%, rgba(246,203,183,.40), transparent 60%),
      radial-gradient(78% 66% at 104% 104%, rgba(205,190,207,.42), transparent 62%),
      linear-gradient(158deg, #FCF3EC 0%, #F6EEF1 58%, #F1E9F2 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 26px 56px -24px rgba(20,18,40,.55),
      0 4px 14px -8px rgba(20,18,40,.4);
    overflow: hidden;
  }
  .how2-d .how2-preview::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(38% 32% at 50% 42%, rgba(255,255,255,.7), transparent 70%);
    animation: how2Spot 10s ease-in-out infinite alternate;
  }
  .how2-d .how2-scene { position: relative; z-index: 1; }
  .how2-d .how2-dots { z-index: 2; }

  /* Step cards lift slightly when active / hovered */
  .how2-d .how2-step:hover { transform: translateY(-1px); }
  .how2-d .how2-step.is-active { transform: translateY(-2px); }

  /* Supporters foot row (scene 1 enrichment) */
  .how2-d .how2-mini-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(124,108,160,.12);
  }
  .how2-d .how2-avts { display: inline-flex; }
  .how2-d .how2-avts span {
    width: 22px; height: 22px; border-radius: 50%; margin-left: -7px;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(40,30,70,.2);
  }
  .how2-d .how2-avts span:first-child { margin-left: 0; }
  .how2-d .how2-avts span:nth-child(1) { background: linear-gradient(135deg, #F6CBB7, #DDA07A); }
  .how2-d .how2-avts span:nth-child(2) { background: linear-gradient(135deg, #CDBECF, #8D87A8); }
  .how2-d .how2-avts span:nth-child(3) { background: linear-gradient(135deg, #C8AEF0, #9D80D6); }
  .how2-d .how2-mini-sup { font-size: .74rem; font-weight: 700; color: var(--mint-deep); }
}

/* ---- 10. Mobile-only: warmer, deeper preview panel ---- */
@media (max-width: 760px) {
  .how2-m .how2-preview {
    border: 1px solid rgba(255,255,255,.7);
    background:
      radial-gradient(74% 60% at 16% -2%, rgba(246,203,183,.40), transparent 60%),
      radial-gradient(78% 70% at 102% 104%, rgba(205,190,207,.40), transparent 62%),
      linear-gradient(158deg, #FCF3EC 0%, #F4ECF0 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 20px 44px -22px rgba(20,18,40,.5);
  }
  .how2-m .how2-step { background: rgba(255,255,255,.92); }
}

/* ---- 11. New keyframes ---- */
@keyframes how2GlowA { 0% { transform: translate3d(0,0,0); opacity: .65; } 100% { transform: translate3d(-6%,5%,0); opacity: 1; } }
@keyframes how2GlowB { 0% { transform: translate3d(0,0,0); opacity: .55; } 100% { transform: translate3d(7%,-5%,0); opacity: .95; } }
@keyframes how2Spot  { 0% { transform: translate3d(-6%,-4%,0); } 100% { transform: translate3d(6%,4%,0); } }
@keyframes how2Sheen { 0% { transform: translateX(-170%); } 55%, 100% { transform: translateX(330%); } }
@keyframes how2BarSweep { 0% { transform: translateX(-160%); } 55%, 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
  .how2-section > .container::before,
  .how2-section > .container::after,
  .how2-d .how2-preview::before,
  .how2-section .how2-bar span::after,
  .how2-section .how2-donate-btn::after { animation: none; }
}

/* ============================================================================
   FOCUSED POLISH (v hpCL)
   1) Homepage mobile — Urgent → final CTA breathing room + softer peek fade
   2) Campaign "Donation protected" — premium feature panel (no checklist)
   3) Privacy + Terms — premium legal page redesign
   ============================================================================ */

/* ---------- 1. Urgent → CTA transition (mobile only) ---------- */
@media (max-width: 760px) {
  /* More air between the last urgent card and "Share your story" */
  .urgent-section { padding-bottom: 46px; }

  /* Peek photo: no frame. The dissolve is a real OPACITY fade to transparent
     (works on the gradient background — the lower edge truly disappears),
     not a solid-colour fade. Long, gradual stops = soft, blurry-looking edge. */
  .urgent-peek-card {
    max-height: 216px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0,0,0,.78) 56%, rgba(0,0,0,.4) 76%, rgba(0,0,0,.12) 90%, transparent 100%) !important;
            mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0,0,0,.78) 56%, rgba(0,0,0,.4) 76%, rgba(0,0,0,.12) 90%, transparent 100%) !important;
  }
  .urgent-peek-card .card-media { border: 0 !important; box-shadow: none !important; }
  /* Keep the category + "Urgent" badges visible (same as the cards above) —
     they sit in the fully-opaque top of the mask, so they read clearly. */
  /* No colour overlay — the card's opacity mask does the fade. The veil just
     carries the lowered button + a soft frosted blur ("borradinha") over the
     lower fade zone so the dissolve reads soft, not hard-edged. */
  .urgent-peek-veil {
    padding-top: 188px;
    align-items: flex-start;
    position: relative;
    background: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .urgent-peek-veil::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
    pointer-events: none; z-index: 0;
  }
  .urgent-peek-cta { position: relative; z-index: 1; }
  .urgent-peek-cta {
    padding: 12px 22px;
    box-shadow: 0 12px 30px -12px rgba(45,58,74,.42), 0 1px 0 rgba(255,255,255,.85) inset;
  }
}

/* ---------- 2. Donation protected — premium feature panel ---------- */
.trust-card {
  background: linear-gradient(165deg, #FFFFFF 0%, #FCF6F1 100%);
  border: 1px solid rgba(221,160,122,.22);
  border-radius: 18px;
  padding: 18px 18px 15px;
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 18px 40px -24px rgba(90,60,40,.32);
  position: relative;
  overflow: hidden;
}
.trust-card::before {
  content: ''; position: absolute; top: -40px; right: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246,203,183,.45), transparent 72%);
  pointer-events: none;
}
.trust-card > * { position: relative; z-index: 1; }
.trust-card-icon {
  background: linear-gradient(135deg, #F6CBB7, #DDA07A);
  color: #7A4424;
  box-shadow: 0 6px 16px -6px rgba(199,126,79,.5);
}
.trust-card-sub { color: var(--text-soft); }
/* feature rows replace the old checklist */
.trust-feats {
  display: flex; flex-direction: column; gap: 13px;
  margin: 14px 0 14px; padding-top: 14px;
  border-top: 1px solid rgba(221,160,122,.18);
}
.trust-feat { display: flex; gap: 12px; align-items: flex-start; }
.trust-feat-ico {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.trust-feat-ico svg { width: 18px; height: 18px; }
.tf-peach { background: rgba(221,160,122,.16); color: var(--coral-deep); }
.tf-lav   { background: rgba(141,138,168,.18); color: var(--mint-deep); }
.tf-slate { background: rgba(45,58,74,.10);   color: var(--teal); }
.trust-feat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trust-feat-text strong { font-size: .9rem; font-weight: 700; color: var(--teal-deep); line-height: 1.3; }
.trust-feat-text span { font-size: .8rem; color: var(--text-soft); line-height: 1.46; }
.trust-card-link {
  font-weight: 700; color: var(--coral-deep);
}
.trust-card-link:hover { color: var(--coral); }

/* ---------- 3. Legal pages (Privacy + Terms) — premium redesign ---------- */
.legal-body {
  position: relative;
  background: linear-gradient(180deg, #F1EEF6 0%, #FAF4F0 18%, #FAF4F0 100%);
}
/* widen the reading area a touch */
.legal-body .legal-wrap { max-width: 880px; }

/* White content panel — single column (Privacy) and content side (Terms) */
.legal-body:not(.legal-body--toc) .legal-wrap,
.legal-body--toc .legal-content {
  background: #fff;
  border: 1px solid rgba(141,138,168,.16);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 46px);
  box-shadow: 0 1px 2px rgba(30,38,48,.04), 0 34px 80px -46px rgba(60,48,92,.34);
}
.legal-body:not(.legal-body--toc) .legal-wrap { margin: 28px auto 0; padding-bottom: clamp(28px, 4vw, 52px); }

/* Section headings — premium, with a peach accent underline */
.legal-wrap h2 {
  position: relative;
  margin-top: 40px; margin-bottom: 16px;
  padding-top: 30px;
  border-top: 1px solid rgba(141,138,168,.16);
  color: var(--teal-deep);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}
.legal-wrap h2::after {
  content: ''; display: block; width: 44px; height: 3px; margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
/* first heading in the panel: no top divider */
.legal-body:not(.legal-body--toc) .legal-wrap > h2:first-of-type,
.legal-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-wrap h3 { color: var(--mint-deep); font-weight: 700; }
.legal-body:not(.legal-body--toc) .legal-wrap > p:first-of-type,
.legal-content > p:first-of-type { font-size: 1.04rem; color: var(--teal-deep); }

/* Intro lead paragraph already styled; bump readability */
.legal-wrap p { color: var(--text); }

/* Premium callout */
.legal-callout {
  background: linear-gradient(180deg, rgba(246,203,183,.22) 0%, rgba(205,190,207,.18) 100%);
  border: 1px solid rgba(221,160,122,.26);
  border-left: 4px solid var(--coral);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 10px 26px -18px rgba(120,80,50,.3);
}

/* Closing note */
.legal-outro {
  margin-top: 34px; padding: 18px 20px;
  background: rgba(141,138,168,.08);
  border: 1px solid rgba(141,138,168,.16);
  border-radius: 14px;
  font-size: .92rem; color: var(--text-soft); line-height: 1.7;
}

/* "Last updated" meta — softer pill on the page-head */
.legal-meta {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(141,138,168,.22);
  color: var(--mint-deep);
  font-weight: 600;
  box-shadow: 0 6px 18px -12px rgba(60,48,92,.4);
}

/* TOC card refresh (Terms) */
.legal-toc {
  background: linear-gradient(180deg, #fff 0%, #FBF7F2 100%);
  border: 1px solid rgba(141,138,168,.18);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 16px 38px -26px rgba(60,48,92,.32);
}
.legal-toc-label { color: var(--coral-deep); }

/* Terms desktop — sticky TOC sidebar + content panel */
@media (min-width: 921px) {
  .legal-body--toc .legal-wrap {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 42px;
    align-items: start;
    padding-top: 30px;
  }
  .legal-body--toc .legal-toc {
    position: sticky; top: 90px; margin: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  /* TOC active link (scroll-spy adds .is-active) */
  .legal-toc-list a.is-active {
    background: linear-gradient(135deg, rgba(246,203,183,.32), rgba(205,190,207,.28));
    color: var(--teal-deep); font-weight: 700;
  }
  .legal-toc-list a.is-active::before { color: var(--coral-deep); }
}
/* Mobile/tablet — TOC card sits above the content with comfortable spacing */
@media (max-width: 920px) {
  .legal-body--toc .legal-content { margin-top: 6px; }
}

/* ============================================================================
   FINAL CTA — mobile only: drop the "Share your story" badge + a softer,
   peachier, very subtle section background (v hpCS)
   ============================================================================ */
@media (max-width: 760px) {
  /* 1. Remove the badge (no replacement) + rebalance the spacing now that the
        title is the first element. */
  .story-cta-badge { display: none; }
  .story-cta h2 { margin-top: 6px; }

  /* 2. Animated lavender-dominant gradient (v hpCV). Lilac base with cream
        warmth, peach only as a faint accent. A slow drifting glow layer gives
        the section quiet life + depth without distracting from the text. */
  .story-cta-section {
    background:
      radial-gradient(72% 50% at 50% 8%, rgba(205,190,207,.55), transparent 60%),
      radial-gradient(46% 40% at 84% 70%, rgba(246,203,183,.20), transparent 55%),
      radial-gradient(62% 52% at 12% 92%, rgba(141,138,168,.44), transparent 60%),
      linear-gradient(165deg, #F3EFF5 0%, #E7E1EF 42%, #D7CFE4 100%);
  }
  /* Drifting glow layer = the "animated gradient" — very slow, barely there. */
  .story-cta-section::before {
    content: ''; position: absolute; inset: -24% -18%;
    background:
      radial-gradient(36% 40% at 28% 30%, rgba(141,138,168,.44), transparent 62%),
      radial-gradient(34% 38% at 76% 58%, rgba(205,190,207,.52), transparent 62%),
      radial-gradient(24% 28% at 62% 82%, rgba(246,203,183,.16), transparent 60%);
    pointer-events: none; z-index: 0;
    animation: ctaLavenderDrift 26s ease-in-out infinite alternate;
  }
  /* Soft fade easing the section into the charcoal footer below. */
  .story-cta-section::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(180deg, transparent, rgba(92,86,132,.18));
    pointer-events: none; z-index: 0;
  }
}
@keyframes ctaLavenderDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1);    opacity: .9; }
  50%  { opacity: 1; }
  100% { transform: translate3d(4%, 3%, 0)  scale(1.07);  opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .story-cta-section::before { animation: none; }
}

/* ============================================================================
   CAMPAIGN LOADING STATES — premium skeleton cards + fade-in (v hpDA)
   Replaces raw "Loading campaigns…" text and empty grids. Skeletons reuse the
   real .card / .card-media footprint so there is no layout shift, and the area
   reserves its height so the footer never jumps up before content loads.
   ============================================================================ */
.card-skeleton { cursor: default; pointer-events: none; }
.card-skeleton .card-media { background: var(--offwhite-2); }
.card-skeleton .card-body { gap: 9px; padding-top: 16px; }
.sk-line { display: block; border-radius: 6px; background: var(--offwhite-2); }
.card-skeleton .sk-line-title  { height: 13px; width: 92%; }
.card-skeleton .sk-line-title2 { height: 13px; width: 60%; margin-bottom: 6px; }
.card-skeleton .sk-line-bar    { height: 8px;  width: 100%; border-radius: 999px; }
.card-skeleton .sk-stats { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.card-skeleton .sk-pill { height: 11px; width: 42%; }

/* Subtle, warm shimmer — a soft white sheen sweeping over the cream base. */
.sk-shimmer { position: relative; overflow: hidden; }
.sk-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skShimmer 1.6s ease-in-out infinite;
}
@keyframes skShimmer { to { transform: translateX(100%); } }

/* Real cards/panels fade in gently when they replace the skeletons. */
.cards-fade-in > * { animation: cardsFadeIn .5s var(--ease) both; }
@keyframes cardsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Desktop Active spotlight panels also ease in on first appearance. */
.active-spotlight .asp-panel { animation: cardsFadeIn .5s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .sk-shimmer::after,
  .cards-fade-in > *,
  .active-spotlight .asp-panel { animation: none; }
}

/* ============================================================================
   TARGETED ADJUSTMENTS (v hpDB)
   1) Home Urgent (mobile) — "View all urgent" button below the cards
   2) Campaign hero — supporter badge top-left of the image
   3) Campaign — more breathing room between donate area and story
   4) Campaign — simplified "Donation protected" (title + one line)
   5) Donate — larger, more premium main card
   8) Donate — "Giving with clarity" trust card under the amounts
   ============================================================================ */

/* 1) Mobile: full-width "View all urgent" button stacked below the cards. */
@media (max-width: 760px) {
  .urgent-viewall-below {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px; padding: 15px 22px;
    border-radius: 999px;
    background: #fff; color: var(--teal-deep);
    font-weight: 800; font-size: .98rem; text-decoration: none;
    border: 1px solid rgba(221,160,122,.30);
    box-shadow: 0 10px 26px -14px rgba(45,58,74,.40), 0 1px 0 rgba(255,255,255,.8) inset;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .urgent-viewall-below svg { transition: transform .2s var(--ease); }
  .urgent-viewall-below:active { transform: translateY(1px); }
  .urgent-viewall-below:hover svg { transform: translateX(3px); }
}

/* 2) Supporter badge over the campaign hero image (top-left). */
.campaign-gallery { position: relative; }
.campaign-donor-badge {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 28px);
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -12px rgba(30,38,48,.5), 0 1px 0 rgba(255,255,255,.7) inset;
  pointer-events: none;
}
.campaign-donor-badge .cdb-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F6CBB7, #DDA07A); color: #7A4424;
  font-size: .72rem; font-weight: 800;
}
.campaign-donor-badge .cdb-text {
  display: flex; flex-direction: column; line-height: 1.15; min-width: 0;
  font-size: .72rem; color: var(--text-soft);
}
.campaign-donor-badge .cdb-text b {
  font-size: .8rem; color: var(--teal-deep); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
@media (max-width: 540px) {
  .campaign-donor-badge { top: 10px; left: 10px; padding: 5px 11px 5px 5px; }
  .campaign-donor-badge .cdb-avatar { width: 22px; height: 22px; }
  .campaign-donor-badge .cdb-text b { max-width: 120px; }
}

/* 3) A touch more air between the donate card and the story. */
.story-section { padding-top: 30px; }
@media (min-width: 761px) { .story-section { padding-top: 46px; } }

/* 4) Simplified Donation-protected card — header only, compact. */
.trust-card--simple { padding: 16px 18px; }
.trust-card--simple .trust-card-head { margin-bottom: 0; align-items: flex-start; }
.trust-card--simple .trust-card-sub { font-size: .84rem; line-height: 1.5; }

/* 5) Donate page — larger, more premium card. */
.checkout-wrap { max-width: 600px; }
.donate-progress-card { padding: 18px 22px 16px; border-radius: 18px; }
.donate-amount-block { margin-bottom: 20px; }
.donate-amount-head h2 { font-size: clamp(1.1rem, 2.6vw, 1.32rem); }
.amount-grid { gap: 12px; }
.amount-btn { padding: 20px 12px; border-radius: 16px; }
@media (min-width: 541px) {
  .donate-hero-img { border-radius: 20px; }
}

/* 8) Donate — "Giving with clarity" trust card under the amount choice. */
.donate-clarity {
  margin-top: 16px; padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, var(--offwhite-2) 100%);
  border: 1px solid rgba(141,138,168,.20);
  box-shadow: 0 1px 2px rgba(30,38,48,.03), 0 12px 30px -22px rgba(60,48,92,.30);
}
.donate-clarity-head { display: flex; gap: 12px; align-items: flex-start; }
.donate-clarity-icon {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F6CBB7, #DDA07A); color: #7A4424;
  box-shadow: 0 6px 16px -6px rgba(199,126,79,.5);
}
.donate-clarity-icon svg { width: 18px; height: 18px; }
.donate-clarity-head-text h3 { font-size: .98rem; color: var(--teal-deep); margin: 0 0 2px; font-weight: 700; }
.donate-clarity-head-text p { font-size: .82rem; color: var(--text-soft); line-height: 1.45; margin: 0; }
.donate-clarity-list {
  list-style: none; margin: 13px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgba(141,138,168,.16);
  display: flex; flex-direction: column; gap: 10px;
}
.donate-clarity-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .84rem; color: var(--teal-deep); line-height: 1.35;
}
.donate-clarity-list svg {
  width: 17px; height: 17px; flex-shrink: 0; color: var(--mint-deep);
}