/* Layout concept: an impact report, not a sales page. Photos of care carry
   the warmth; the interface stays quiet: white and warm-grey surfaces, dark
   ink, SDG 17 navy for actions, one teal for money that reached the charity.
   Motion follows the money: numbers roll up, gifts arrive, nothing loops for show. */
:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  --bg: #ffffff;
  --surface: #f6f5f2;
  --surface-2: #ecebe7;
  --line: #e4e1db;
  --line-strong: #cfcbc3;
  --ink: #1d2126;
  --ink-2: #555b62;
  --ink-3: #868b91;
  --brand: #19486a;
  --brand-hover: #12364f;
  --brand-soft: #e8eef3;
  --flow: #0e7f72;
  --flow-soft: #e3f2ef;
  --series-card: #2f6fd0;
  --series-usage: #1fa392;
  --warn: #a15c07;
  --warn-soft: #fdf3e2;
  --danger: #b4351f;
  --danger-soft: #fbeae6;

  --f: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  /* Shadows stay small: just enough to lift what floats over other content. */
  --shadow: 0 1px 2px rgba(15, 34, 53, 0.06);
  --shadow-lg: 0 1px 2px rgba(15, 34, 53, 0.06), 0 4px 12px rgba(15, 34, 53, 0.07);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f); }
img, svg { max-width: 100%; }
a { color: var(--brand); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
section[id] { scroll-margin-top: 84px; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; font-weight: 750; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.12; font-weight: 720; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 680; }
h4 { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.eyebrow { display: inline-block; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--flow); }

/* Buttons lift a little on hover and press in when clicked. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 620; font-size: 0.98rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.25s, transform 0.25s var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(15, 34, 53, 0.15); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface); }
.btn-ghost { background: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn-ghost:hover { color: var(--ink); background: var(--surface); }
.btn-flow { background: var(--flow); color: #fff; }
.btn-flow:hover { background: #0b7a6c; }
.btn-sm { padding: 7px 12px; font-size: 0.88rem; border-radius: 8px; }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Brand mark: a P whose bowl is a dial, with the share given in teal. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 750; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand svg { width: 28px; height: 28px; }
.mark-share { stroke-dasharray: 1; stroke-dashoffset: 0; transform-box: view-box; transform-origin: 16px 13.5px; }
.motion .mark-share { animation: draw 1s 0.35s var(--ease-out) backwards; }
.motion .brand:hover .mark-share { animation: dial 0.9s var(--ease-spring); }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes dial { 45% { transform: rotate(-80deg); } }

/* Top navigation */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); transition: border-color 0.3s; }
.nav.scrolled { border-bottom-color: var(--line-strong); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a:not(.btn) { position: relative; color: var(--ink-2); text-decoration: none; font-weight: 550; padding: 8px 12px; border-radius: 8px; font-size: 0.96rem; transition: color 0.2s; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--flow); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* Cards and pills */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 620; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--flow-soft); color: #0b6e62; }
.pill.ai { background: #e7efff; color: #234f99; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.err { background: var(--danger-soft); color: var(--danger); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.motion .pill.warn .dot { animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* Forms */
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.92rem; }
.input { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.hint { font-size: 0.85rem; color: var(--ink-3); }
.error-text { font-size: 0.88rem; color: var(--danger); }

.footer { border-top: 1px solid var(--line); padding-block: 36px 48px; color: var(--ink-3); font-size: 0.92rem; }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Disclosures open and close smoothly where the browser supports it. */
details::details-content { height: 0; overflow: clip; transition: height 0.35s var(--ease-out), content-visibility 0.35s allow-discrete; }
details[open]::details-content { height: auto; }

/* Dialogs rise in over a fading backdrop. */
.motion dialog[open] { animation: dialog-in 0.5s var(--ease-spring); }
.motion dialog[open]::backdrop { animation: fade-in 0.3s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(0.95); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---- Motion helpers (assets/motion.js) ---- */

/* Scroll reveals. Hidden only when motion.js has marked the page, so nothing
   stays invisible without scripts or with reduced motion. */
.motion [data-reveal]:not(.in),
.motion [data-reveal-group]:not(.in) > * { opacity: 0; }
.motion [data-reveal].in { animation: rise 0.8s var(--ease-out) backwards; animation-delay: var(--d, 0ms); }
.motion [data-reveal="zoom"].in { animation-name: zoom-in; animation-duration: 1.1s; }
.motion [data-reveal="right"].in { animation-name: from-right; }
.motion [data-reveal-group].in:not(.settled) > * { animation: rise 0.7s var(--ease-out) backwards; animation-delay: calc(var(--d, 0ms) + var(--i, 0) * 90ms); }
.motion [data-reveal-group="right"].in:not(.settled) > * { animation-name: from-right; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes from-right { from { opacity: 0; transform: translateX(32px); } }

/* A number that just changed. */
.pop { animation: pop 0.55s var(--ease-spring); }
@keyframes pop { 40% { transform: scale(1.08); } }

/* "+$188.22" rising beside a total as a gift lands. */
.delta { position: absolute; z-index: 4; pointer-events: none; white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: var(--flow-soft); color: #0b5e54; font-weight: 750; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* Hearts and dots thrown out when a gift is made. */
.particle { position: absolute; z-index: 6; pointer-events: none; border-radius: 50%; }
.particle svg { display: block; width: 100%; height: 100%; }

@media (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  .nav-links a:not(.btn) { display: none; }
}
@media print {
  .motion [data-reveal], .motion [data-reveal-group] > * { opacity: 1 !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}