/* Foundation Lookup design system (v2, 11 Nov 2026).
   Direction: exact, civic, patient. The public record: filed returns, annual reports,
   an archive reading room at night. Warm paper neutrals, an ink hero, Newsreader for
   headlines and the figures that matter, Public Sans for the interface.
   Colour with meaning: navy = the record and every action, green = accepts applications,
   ochre = preselected only. Cause colours live only inside the "where the money goes" bar.
   Fonts are served from this site (OFL); Motion 13.4.6 is self-hosted. */
@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("/static/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* paper ramp */
  --bg: #f7f5f0;
  --card: #fffdf9;
  --raised: #efebe3;
  --sunk: #f1ede5;
  --line: rgba(31, 27, 22, 0.09);
  --line-strong: rgba(31, 27, 22, 0.16);
  --text: #1f1b16;
  --text-2: #554c41;
  --muted: #6b6256;
  --rule: #d9d1c3;
  /* ink: the hero and footer band */
  --ink: #131a23;
  --ink-2: #1b2430;
  --ink-line: rgba(243, 239, 231, 0.14);
  --on-ink: #f4f0e8;
  --on-ink-2: #c8c1b4;
  --on-ink-3: #a59e92;
  /* meaning */
  --navy: #1f4e79;        /* the record: links, actions, the latest year, the lead bar */
  --navy-ink: #1a4268;
  --navy-soft: rgba(31, 78, 121, 0.09);
  --open: #2b6a47;        /* accepts applications */
  --open-soft: #e2efe6;
  --closed: #84560f;      /* preselected only */
  --closed-soft: #f4e9d4;
  --warn: #9a3412;
  /* causes, inside the share bar only (ranked, then grey) */
  --c1: #1f4e79; --c2: #3b8a8f; --c3: #c39233; --c4: #b0573a; --c5: #6d7a9c; --c6: #7f8b3d; --c7: #d8cfbf;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --shadow-card: 0 1px 2px rgba(19, 26, 35, 0.06), 0 12px 32px rgba(19, 26, 35, 0.10);
  --shadow-float: 0 1px 2px rgba(19, 26, 35, 0.12), 0 24px 56px rgba(8, 12, 18, 0.32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.55 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; transition: color 140ms var(--ease); }
a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px;
}
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: 0; }
.num, .fig { font-variant-numeric: tabular-nums lining-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: var(--r-s); z-index: 20; }
.skip:focus { left: 16px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ------------------------------------------------------------ header (sits on the ink band) */
.top { position: relative; z-index: 3; background: transparent; color: var(--on-ink); border-bottom: 1px solid var(--ink-line); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--on-ink); font-weight: 600; font-size: 17px; letter-spacing: 0; }
.brand:hover { text-decoration: none; color: #fff; }
.brand svg { flex: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--on-ink-2); font-size: 14px; padding: 8px 12px; border-radius: var(--r-s); display: inline-flex; align-items: center; gap: 8px; transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--on-ink); }
.nav-search { border: 1px solid var(--ink-line); }
.nav-signin { margin-left: 4px; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; background: var(--ink); color: var(--on-ink); isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.02); }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19, 26, 35, 0.70) 0, rgba(19, 26, 35, 0) 160px),
    linear-gradient(90deg, rgba(19, 26, 35, 0.95) 0%, rgba(19, 26, 35, 0.88) 38%, rgba(19, 26, 35, 0.66) 70%, rgba(19, 26, 35, 0.56) 100%),
    linear-gradient(0deg, rgba(19, 26, 35, 0.75) 0%, rgba(19, 26, 35, 0) 40%);
}
.hero-plain .hero-photo { background: var(--ink); }
.hero-plain .hero-photo::after { background: repeating-linear-gradient(0deg, rgba(243, 239, 231, 0.035) 0 1px, transparent 1px 32px); }
.has-photo-wrap { position: relative; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: center; padding: 40px 0 72px; }
.hero-in.solo { grid-template-columns: minmax(0, 1fr); }
.hero-text { min-width: 0; max-width: 680px; }
.hero .crumbs ol { margin: 0 0 32px; }
.hero h1 { font: 500 56px/1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; color: #fff; overflow-wrap: anywhere; }
.hero h1.long { font-size: 48px; line-height: 1.06; }
.hero .lead { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--on-ink-2); max-width: 36rem; }
.hero .lead strong { color: var(--on-ink); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.hero-note { font-size: 14px; color: var(--on-ink-3); }
.hero-data { margin: 32px 0 0; font-size: 13px; line-height: 1.5; color: var(--on-ink-3); max-width: 40rem; }
.hero.compact .hero-in { padding: 32px 0 56px; }
.hero.compact h1 { font-size: 48px; }

/* the filing tag: the one signature detail */
.filing {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 20px;
  border: 1px solid var(--ink-line); border-radius: var(--r-s); font-size: 13px; line-height: 1; color: var(--on-ink-2);
}
.filing > span { padding: 8px 10px; white-space: nowrap; }
.filing > span + span { border-left: 1px solid var(--ink-line); }
.filing b { font-weight: 500; color: var(--on-ink); }
.card .filing { border-color: var(--line-strong); color: var(--text-2); margin: 0; }
.card .filing > span + span { border-left-color: var(--line-strong); }
.card .filing b { color: var(--text); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: var(--r-m);
  font: 500 15px/1 var(--sans); white-space: nowrap; border: 0; cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-light { background: var(--on-ink); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); }
.btn-light:hover { background: #fff; color: var(--ink); }
.btn-ink { background: var(--navy); color: #fff; }
.btn-ink:hover { background: var(--navy-ink); color: #fff; }
.btn svg { flex: none; transition: transform 160ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 24px 0 0; font-size: 13px; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--rule); }
.crumbs li { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--text-2); }
.hero .crumbs ol { color: var(--on-ink-3); }
.hero .crumbs a { color: var(--on-ink-2); }
.hero .crumbs a:hover { color: #fff; }
.hero .crumbs li:not(:last-child)::after { color: var(--on-ink-3); opacity: 0.6; }

/* ------------------------------------------------------------ the record card (hero product frame) */
.card { background: var(--card); color: var(--text); border-radius: var(--r-l); }
.record {
  position: relative; box-shadow: var(--shadow-float); margin-bottom: -120px; align-self: end;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.record-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.record-kicker { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.record-big { margin: 0; font: 500 44px/1.05 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.record-big small { font: 400 15px/1.4 var(--sans); color: var(--muted); letter-spacing: 0; display: block; margin-top: 8px; }
.record-rows { list-style: none; margin: 0; padding: 4px 0; }
.record-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: 12px 24px; }
.record-rows li + li { border-top: 1px dashed var(--line-strong); }
.record-rows .k { font-size: 14px; color: var(--text-2); }
.record-rows .v { font-size: 16px; font-weight: 500; text-align: right; white-space: nowrap; }
.record-rows .v.serif { font: 500 20px/1.2 var(--serif); }
.record-rows .n { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.record-rows a.k { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-rows a.k:hover { color: var(--navy); }
.record-rows .k .p { display: block; font-weight: 400; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-foot { margin: 0; padding: 12px 24px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
/* the status stamp hangs on the card's top-right corner, half outside */
.stamp {
  position: absolute; top: -16px; right: 20px; display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: var(--r-s); font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(19, 26, 35, 0.10), 0 6px 16px rgba(19, 26, 35, 0.14); transform: rotate(-2deg);
}
.stamp svg { flex: none; }
.stamp-open { background: var(--open-soft); color: var(--open); border: 1px solid rgba(43, 106, 71, 0.35); }
.stamp-preselected { background: var(--closed-soft); color: var(--closed); border: 1px solid rgba(132, 86, 15, 0.35); }
.stamp-unstated { background: var(--card); color: var(--text-2); border: 1px solid var(--line-strong); }

/* ------------------------------------------------------------ page body */
.body { padding: 128px 0 96px; }
.body.no-card { padding-top: 64px; }
.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: 24px; font-size: 14px; }
.toc p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); line-height: 1.35; }
.toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--rule); }
.toc a.on { color: var(--navy); border-left-color: var(--navy); }
.main-col { min-width: 0; }

.section { margin: 0 0 80px; scroll-margin-top: 24px; }
.section:last-child { margin-bottom: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 8px; }
.sec-head h2 { font: 500 32px/1.15 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.sec-meta { font-size: 14px; color: var(--muted); white-space: nowrap; }
.section h3 { font: 500 24px/1.2 var(--serif); margin: 48px 0 8px; }
.note { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 44rem; }
.note.warn { color: var(--warn); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }

/* ------------------------------------------------------------ how to apply */
.apply { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.apply-top { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.apply-icon { flex: none; width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center; }
.apply-open .apply-icon { background: var(--open-soft); color: var(--open); }
.apply-preselected .apply-icon { background: var(--closed-soft); color: var(--closed); }
.apply-unstated .apply-icon { background: var(--raised); color: var(--text-2); }
.apply-title { font: 500 22px/1.25 var(--serif); margin: 0 0 4px; }
.apply-open .apply-title { color: var(--open); }
.apply-preselected .apply-title { color: var(--closed); }
.apply-top p { margin: 0; font-size: 15px; color: var(--text-2); }
.form-lines { margin: 0; padding: 0 24px; }
.form-lines + .form-lines { border-top: 1px solid var(--line-strong); }
.form-lines > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.form-lines > div + div { border-top: 1px dashed var(--line-strong); }
.form-lines dt { font-size: 14px; color: var(--muted); }
.form-lines dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ year chart and year cards */
.chart-box { margin: 0 0 24px; padding: 24px 24px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); }
.chart { display: grid; grid-template-columns: auto 1fr; gap: 12px; height: 260px; }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 28px; font-size: 12px; color: var(--muted); text-align: right; }
.chart-axis span { transform: translateY(-50%); }
.chart-axis span:last-child { transform: translateY(50%); }
.chart-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; border-top: 1px dashed var(--line-strong); }
.chart-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.chart-plot { flex: 1; align-self: stretch; border-bottom: 1px solid var(--line-strong); padding-top: 24px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.chart-bar { position: relative; width: min(88px, 60%); }
.chart-svg { width: 100%; height: 100%; display: block; border-radius: 4px 4px 0 0; transform-origin: 50% 100%; }
.chart .val { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.chart .axis { font-size: 12px; color: var(--muted); margin-top: 8px; height: 20px; }
.chart .bar { fill: var(--rule); }
.chart .bar.accent { fill: var(--navy); }
.chart-box figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.years.single { grid-template-columns: 1fr; }
.years.single li { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; align-items: end; }
.years.single dl { margin: 0; display: contents; }
.years.single dl div { display: grid; gap: 4px; border-top: 0; padding-top: 0; justify-content: start; }
.years.single dd { font: 500 22px/1.1 var(--serif); }
.years li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 24px; }
.years .y { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.years .y b { color: var(--navy); font-weight: 600; }
.years .big { font: 500 28px/1.1 var(--serif); margin: 0; }
.years dl { margin: 16px 0 0; display: grid; gap: 8px; font-size: 14px; }
.years dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line-strong); padding-top: 8px; }
.years dt { color: var(--muted); }
.years dd { margin: 0; font-weight: 500; }

/* ------------------------------------------------------------ the grant ledger (rows, not a table) */
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger-head, .ledger-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 176px; gap: 24px; padding: 16px 24px; }
.ledger-head { padding-top: 12px; padding-bottom: 12px; font-size: 13px; color: var(--muted); background: var(--sunk); border-bottom: 1px solid var(--line); }
.ledger-head .r, .ledger-amt { text-align: right; }
.ledger-row + .ledger-row { border-top: 1px solid var(--line); }
.ledger-row { transition: background-color 120ms var(--ease); }
.ledger-row:hover { background: #fbf9f4; }
.ledger-who { min-width: 0; }
.ledger-name { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
a.ledger-name { color: var(--navy); }
a.ledger-name:hover { color: var(--text); }
.ledger-place { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.ledger-purpose { margin: 0; font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.ledger-amt { font-weight: 500; white-space: nowrap; }
.ledger-amt .meter { margin: 10px 0 0 auto; width: 120px; }
.ledger-year { font-size: 14px; color: var(--muted); }
.lines .ledger-head, .lines .ledger-row { grid-template-columns: minmax(0, 1.15fr) 64px minmax(0, 1fr) 160px; }
.indiv { color: var(--text-2); font-weight: 500; }
.ledger-more { display: block; margin-top: 16px; font-size: 15px; }

/* ------------------------------------------------------------ funder list (ranked foundations) */
.funders { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.funder { display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px 184px 200px; gap: 16px; align-items: center; padding: 16px 24px; counter-increment: rank; transition: background-color 120ms var(--ease); }
.funder + .funder { border-top: 1px solid var(--line); }
.funder:hover { background: #fbf9f4; }
.funder::before { content: counter(rank); font: 500 17px/1 var(--serif); color: var(--muted); }
.unranked .funder { grid-template-columns: minmax(0, 1fr) 112px 184px 200px; }
.unranked .funder::before { content: none; display: none; }
.funder-who { min-width: 0; }
.funder-name { font-weight: 500; overflow-wrap: anywhere; }
.funder-meta { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.funder-grants { font-size: 14px; color: var(--text-2); text-align: right; white-space: nowrap; }
.funder-amt { text-align: right; white-space: nowrap; }
.funder-amt b { display: block; font: 500 20px/1.2 var(--serif); }
.funder-amt small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.funder-amt .meter { margin: 8px 0 0 auto; width: 100%; max-width: 168px; }
.funders-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px 184px 200px; gap: 16px; padding: 12px 24px; font-size: 13px; color: var(--muted); background: var(--sunk); border-bottom: 1px solid var(--line); }
.unranked .funders-head { grid-template-columns: minmax(0, 1fr) 112px 184px 200px; }
.funders-head .r { text-align: right; }

/* status chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-s); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-open { background: var(--open-soft); color: var(--open); }
.chip-preselected { background: var(--closed-soft); color: var(--closed); }
.chip-unstated { background: var(--raised); color: var(--text-2); }

/* ------------------------------------------------------------ meters and ranked lists */
.meter { display: block; height: 4px; background: var(--raised); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); background: var(--rule); transform-origin: 0 50%; border-radius: 2px; }
.funder:first-child .meter i, .ledger-row:first-of-type .meter i, .ranked li:first-child .meter i { background: var(--navy); }
.ranked { list-style: none; margin: 0; padding: 0; }
.ranked li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ranked li:first-child { border-top: 1px solid var(--line); }
.ranked-label { font-size: 15px; min-width: 0; font-weight: 500; }
.ranked-label .sub { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ranked-value { font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; }
.ranked .meter { grid-column: 1 / -1; }
.ranked.cols2 { columns: 2; column-gap: 48px; }
.ranked.cols2 li { break-inside: avoid; }
.ranked.cols2 li:nth-child(2) { border-top: 0; }

/* ------------------------------------------------------------ where the money goes: the share bar */
.mix { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; }
.mix-bar { display: flex; height: 20px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--card); margin: 0 0 24px; }
.mix-bar i { display: block; height: 100%; flex: 0 0 var(--w); transform-origin: 0 50%; }
.mix-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.mix-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-top: 1px dashed var(--line-strong); }
.mix-dot { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.mix-name { font-size: 15px; font-weight: 500; min-width: 0; }
.mix-name .sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.mix-val { text-align: right; font-size: 15px; font-weight: 500; white-space: nowrap; }
.mix-val small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.k1 { background: var(--c1); } .k2 { background: var(--c2); } .k3 { background: var(--c3); }
.k4 { background: var(--c4); } .k5 { background: var(--c5); } .k6 { background: var(--c6); } .k7 { background: var(--c7); }

/* ------------------------------------------------------------ people (officers as filed) */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.people li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 20px; min-width: 0; }
.people .pn { font-weight: 500; overflow-wrap: anywhere; }
.people .pt { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.people .pf { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 14px; color: var(--muted); }
.people .pf b { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------ link cards and city index */
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.link-cards a { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--text); font-weight: 500; transition: border-color 140ms var(--ease), background-color 140ms var(--ease); }
.link-cards a:hover { text-decoration: none; border-color: var(--line-strong); background: #fff; color: var(--navy); }
.link-cards a span { min-width: 0; }
.link-cards a small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.link-cards svg { flex: none; color: var(--muted); transition: transform 160ms var(--ease), color 140ms var(--ease); }
.link-cards a:hover svg { transform: translateX(3px); color: var(--navy); }
.cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 32px; }
.cities li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-strong); font-size: 15px; }
.cities .count { color: var(--muted); font-size: 14px; }
.more { margin-top: 24px; }
.more summary { cursor: pointer; color: var(--navy); font-size: 15px; font-weight: 500; }
.more .cities { margin-top: 16px; }

/* pager */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 20px; font-size: 15px; }
.pager a[rel="next"] { justify-self: end; }
.pager-pos { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ search */
.search { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 20px; border-radius: var(--r-l); background: var(--card); color: var(--text); box-shadow: var(--shadow-float); position: relative; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); min-width: 0; }
.field input, .field select, .field textarea {
  font: 400 16px var(--sans); color: var(--text); height: 48px; padding: 0 14px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: #fff; transition: border-color 140ms var(--ease);
}
.field textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: none; }
.search button, .stack-form button {
  height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-m); background: var(--navy); color: #fff;
  font: 500 15px var(--sans); cursor: pointer; transition: background-color 140ms var(--ease), transform 120ms var(--ease);
}
.search button:hover, .stack-form button:hover { background: var(--navy-ink); }
.search button:active, .stack-form button:active { transform: scale(0.98); }
.results-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 20px 24px; align-items: center; }
.result + .result { border-top: 1px solid var(--line); }
.result-name { font: 500 20px/1.25 var(--serif); }
.result-meta { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.result-figs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 20px; font-size: 14px; color: var(--text-2); }
.result-figs b { font-weight: 500; color: var(--text); }
.empty { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.empty-photo { aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--raised); }
.empty-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); }
.empty p { margin: 0; color: var(--text-2); }
.empty h2 { font: 500 24px/1.2 var(--serif); margin: 0 0 8px; }

/* ------------------------------------------------------------ prose pages, forms */
.prose { max-width: 44rem; }
.prose p, .plain { font-size: 16px; color: var(--text-2); }
.plain { padding-left: 20px; margin: 0 0 16px; }
.plain li { margin-bottom: 8px; }
.stack-form { display: grid; gap: 20px; max-width: 600px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); }
.stack-form button { justify-self: start; }
.stack-form .note { margin: 0; }
.field-error, .form-error { font-style: normal; font-size: 14px; color: #b42318; }
[aria-invalid="true"] { border-color: #b42318 !important; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { max-width: 600px; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--open); border-radius: var(--r-m); background: var(--card); }
.notice p { margin: 0; font-size: 16px; }
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.credits li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); font-size: 14px; color: var(--text-2); }
.credits img { width: 160px; height: 90px; object-fit: cover; border-radius: var(--r-s); }
.credits b { color: var(--text); font-weight: 500; display: block; }


/* ------------------------------------------------------------ causes index: one photo per cause */
.cause-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cause-grid a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; color: var(--text); transition: border-color 140ms var(--ease), box-shadow 160ms var(--ease); }
.cause-grid a:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.cause-photo { display: block; aspect-ratio: 16 / 9; background: var(--raised); overflow: hidden; }
.cause-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25); }
.cause-body { display: grid; gap: 4px; padding: 16px 20px 20px; }
.cause-name { font: 500 22px/1.2 var(--serif); }
.cause-grid a:hover .cause-name { color: var(--navy); }
.cause-amt { font-weight: 500; }
.cause-meta { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.cause-grid li:first-child .meter i { background: var(--navy); }

/* search: the form hangs over the hero's lower edge */
.hero .search { margin-top: 32px; margin-bottom: -120px; }
.search-body { padding-top: 56px; }
@media (max-width: 900px) { .hero .search { margin-bottom: -112px; } }

/* ------------------------------------------------------------ statistics pages (plan day 7)
   Charts: inline SVG drawing, HTML labels (they keep their size on a phone), one accent per chart.
   Each chart is followed by a designed list with the same figures, which screen readers read. */
.hc-box { padding: 24px; }
.hc { display: grid; gap: 8px; }
.hc-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 96px; gap: 16px; align-items: center; min-height: 24px; }
.hc-label { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-svg { display: block; width: 100%; height: 12px; border-radius: 2px; overflow: hidden; }
.hc-track { fill: var(--sunk); }
.hc-bar { fill: var(--rule); }
.hc-bar.accent { fill: var(--navy); }
.hc-val { font-size: 14px; font-weight: 500; text-align: right; white-space: nowrap; }
.hc-axis-row { min-height: 0; margin-top: 4px; }
.hc-axis { position: relative; height: 24px; border-top: 1px solid var(--line-strong); font-size: 12px; color: var(--muted); }
.hc-axis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.hc-axis span:first-child { transform: none; }
.hc-axis span:last-child { transform: translateX(-100%); }
.hc-box figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); }
/* range strips: middle half as a band, median as a mark, on a log scale */
.rs .hc-row { min-height: 32px; }
.rs-svg { height: 32px; border-radius: 0; overflow: visible; }
.rs-grid { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.rs-band { fill: var(--rule); }
.rs-band.accent { fill: rgba(31, 78, 121, 0.28); }
.rs-mid { stroke: var(--text-2); stroke-width: 3; }
.rs-mid.accent { stroke: var(--navy); }
.rs-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.rs-key span { display: inline-flex; align-items: center; gap: 8px; }
.rs-key i { display: inline-block; width: 16px; height: 10px; border-radius: 2px; }
.rs-key-band { background: var(--rule); }
.rs-key i.rs-key-mid { width: 3px; height: 14px; border-radius: 0; background: var(--text-2); }
/* stacked shares: accepts applications / preselected only / not stated */
.st-key { margin: 0 0 20px; }
.st-key .k-open { background: var(--open); }
.st-key .k-pre { background: var(--c3); opacity: 0.6; }
.st-key .k-un { background: var(--rule); }
.st-svg { height: 20px; border-radius: 4px; }
.st-open { fill: var(--open); }
.st-pre { fill: var(--c3); fill-opacity: 0.6; }
.st-un { fill: var(--rule); }
.st .hc-row:first-child { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--line-strong); }
.st .hc-row:first-child .hc-label, .st .hc-row:first-child .hc-val { color: var(--text); font-weight: 500; }
.st .hc-val { color: var(--open); }
.ranked.tone-open li:first-child .meter i { background: var(--open); }
.note.after { margin: 24px 0 0; }
.ranked.cols3 { columns: 3; column-gap: 40px; }
.ranked.cols3 li { break-inside: avoid; }
.ranked.cols3 li:nth-child(2) { border-top: 0; }
.cards-2 .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* bands: one row per size band, figures in aligned columns */
.bands { list-style: none; margin: 24px 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.bands li { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 12px 24px; align-items: center; padding: 16px 24px; }
.bands li + li { border-top: 1px solid var(--line); }
.bands-who { min-width: 0; }
.bands-name { display: block; font-weight: 500; }
.bands-meta { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.bands-fig { display: grid; gap: 2px; text-align: right; font-size: 15px; }
.bands-k { font-size: 13px; color: var(--muted); }
.bands-fig b { font: 500 20px/1.2 var(--serif); }
.bands-n { font-size: 13px; color: var(--muted); }
.bands li:last-child .bands-fig b { color: var(--navy); }
.apps-bands li:first-child { background: var(--sunk); }
.apps-bands li:last-child .bands-fig b { color: inherit; }
.bands-fig b.t-open { color: var(--open); }
.bands-fig b.t-pre { color: var(--closed); }
.bands-fig b.t-un { color: var(--text-2); }

/* spread: share of grants and share of dollars per grant size */
.spread { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.spread li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; padding: 16px 24px; align-items: center; }
.spread li + li { border-top: 1px solid var(--line); }
.spread-name { font-weight: 500; grid-row: span 2; }
.spread-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) 56px 112px; gap: 12px; align-items: center; font-size: 14px; }
.spread-k { color: var(--muted); font-size: 13px; }
.spread-v { text-align: right; font-weight: 500; }
.spread-n { text-align: right; color: var(--muted); white-space: nowrap; }
.spread .meter i { background: var(--rule); }
.spread .dollars .meter i { background: var(--navy); }

/* how we counted */
.method { margin: 0; max-width: 880px; padding: 0 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.method > div { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.method > div + div { border-top: 1px dashed var(--line-strong); }
.method dt { font-weight: 500; font-size: 15px; }
.method dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 1080px) {
  .ranked.cols3 { columns: 2; column-gap: 48px; }
}
@media (max-width: 900px) {
  .hc-row { grid-template-columns: 152px minmax(0, 1fr) 88px; gap: 12px; }
  .bands li { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bands-who { grid-column: 1 / -1; }
  .bands-fig { text-align: left; }
}
@media (max-width: 640px) {
  .hc-box { padding: 16px; }
  .hc { gap: 4px; }
  .hc-row { grid-template-columns: minmax(0, 1fr) 76px; gap: 4px 12px; }
  .hc-label { grid-column: 1 / -1; font-size: 13px; }
  .hc-row + .hc-row:not(.hc-axis-row) { margin-top: 4px; }
  .hc-axis-row > span:first-child, .hc-axis-row > span:last-child { display: none; }
  .rs .hc-row { min-height: 0; }
  .bands li { padding: 16px; gap: 12px 16px; }
  .bands-fig b { font-size: 18px; }
  .bands:not(.apps-bands) li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .apps-bands .bands-fig { align-self: start; }
  .apps-bands .bands-k { min-height: 40px; display: flex; align-items: flex-end; }
  .ranked.cols3 { columns: 1; }
  .cards-2 .link-cards { grid-template-columns: minmax(0, 1fr); }
  .spread li { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .spread-name { grid-row: auto; }
  .spread-line { grid-template-columns: 52px minmax(0, 1fr) 48px 76px; gap: 8px; }
  .method { padding: 0 16px; }
  .method > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ------------------------------------------------------------ footer */
.foot { background: var(--ink); color: var(--on-ink-2); padding: 64px 0 40px; font-size: 14px; }
.foot-in { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.foot .brand { margin-bottom: 12px; }
.foot-about p { margin: 0; max-width: 30rem; color: var(--on-ink-3); line-height: 1.6; }
.foot h2 { font: 500 14px/1.4 var(--sans); color: var(--on-ink); margin: 0 0 12px; }
.foot nav { display: grid; gap: 10px; align-content: start; }
.foot nav a { color: var(--on-ink-2); }
.foot nav a:hover { color: #fff; }
.foot-small { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink-line); font-size: 13px; color: var(--on-ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot-small a { color: var(--on-ink-2); }

/* ------------------------------------------------------------ entrance (visible without script) */
.js [data-enter] { opacity: 0; animation: fl-show 0s 1.2s forwards; }
@keyframes fl-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js [data-enter] { opacity: 1; animation: none; } }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .funder, .funders-head { grid-template-columns: 32px minmax(0, 1fr) 96px 172px 168px; }
  .unranked .funder, .unranked .funders-head { grid-template-columns: minmax(0, 1fr) 96px 172px 168px; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 0; }
  .record { margin-bottom: -96px; max-width: 520px; }
  .hero-in.solo { padding-bottom: 56px; }
  .body { padding-top: 144px; }
  .body.no-card { padding-top: 48px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .search { grid-template-columns: 1fr 1fr; }
  .field-q { grid-column: 1 / -1; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  /* funder rows stack: name, then a meta line, amount on the right */
  .funders-head { display: none; }
  .funder, .unranked .funder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .funder::before { display: none; }
  .funder-who { flex: 1 1 calc(100% - 148px); order: 1; align-self: flex-start; }
  .funder-amt { flex: 0 0 auto; order: 2; align-self: flex-start; }
  .funder-grants { order: 3; text-align: left; }
  .funder-status { order: 4; }
  .funder-amt .meter { width: 96px; }
  .ledger-head { display: none; }
  .ledger-row, .lines .ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .ledger-who { grid-column: 1; }
  .ledger-amt { grid-column: 2; grid-row: 1; }
  .ledger-purpose { grid-column: 1 / -1; }
  .ledger-year { grid-column: 2; grid-row: 2; text-align: right; }
  .lines .ledger-purpose { grid-row: 3; }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px; }
  .top-in { height: 56px; }
  .brand { font-size: 16px; }
  .nav { gap: 0; }
  .nav a { padding: 8px; font-size: 14px; }
  .years.single li { grid-template-columns: 1fr 1fr; }
  .years.single .head { grid-column: 1 / -1; }
  .nav-search span { display: none; }
  .nav-search { width: 40px; height: 40px; justify-content: center; }
  .nav-signin { margin-left: 0; }
  .hero .crumbs ol { margin-bottom: 24px; }
  .hero h1, .hero.compact h1 { font-size: 38px; line-height: 1.06; }
  .hero h1.long { font-size: 32px; }
  .hero .lead { font-size: 17px; margin-top: 16px; }
  .hero-in { padding-top: 24px; gap: 32px; }
  .hero-actions { margin-top: 24px; }
  .btn { width: 100%; justify-content: center; height: 52px; white-space: normal; text-align: center; line-height: 1.3; }
  .hero-data { margin-top: 24px; }
  .filing { font-size: 12px; }
  .filing > span { padding: 7px 8px; }
  .record-head { padding: 20px 16px 16px; }
  .record-big { font-size: 36px; }
  .record-rows li { padding: 12px 16px; }
  .record-foot { padding: 12px 16px 16px; }
  .stamp { right: 12px; }
  .body { padding: 136px 0 64px; }
  .body.no-card { padding-top: 40px; }
  .section { margin-bottom: 64px; }
  .sec-head h2 { font-size: 27px; }
  .section h3 { font-size: 22px; }
  .note { font-size: 15px; }
  .apply-top { padding: 16px; }
  .form-lines { padding: 0 16px; }
  .form-lines > div { grid-template-columns: 1fr; gap: 4px; }
  .chart-box { padding: 16px 12px 12px; }
  .chart { height: 220px; }
  .chart-cols { gap: 8px; }
  .ledger-row, .funder { padding: 16px; }
  .ledger-amt .meter { width: 72px; }
  .funder-amt b { font-size: 18px; }
  .funder-amt .meter { width: 72px; }
  .mix { padding: 16px; }
  .mix-list { grid-template-columns: 1fr; }
  .ranked.cols2 { columns: 1; }
  .ranked.cols2 li:nth-child(2) { border-top: 0; }
  .cities { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .search { grid-template-columns: 1fr; padding: 16px; }
  .search button { width: 100%; }
  .result { grid-template-columns: 1fr; padding: 16px; }
  .result-figs { justify-content: flex-start; }
  .empty { grid-template-columns: 1fr; padding: 16px; }
  .stack-form { padding: 16px; }
  .stack-form button { width: 100%; }
  .credits li { grid-template-columns: 1fr; }
  .credits img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .foot { padding-top: 48px; }
  .foot-in { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================ selling pages (plan day 10)
   Same tokens and parts as the rest of the site. The home hero carries a product frame: the real
   matches screen, simplified (stageshow rules: real words only on the matches, filler for chrome,
   the window running off the band's lower edge, one satellite card straddling its corner). */
.nav-wide { white-space: nowrap; }
@media (max-width: 900px) { .nav .nav-wide { display: none; } }

/* ---------------------------------------------- product frame */
.hero:has(.shot) { overflow-x: clip; }
.hero-in:has(.shot) { grid-template-columns: minmax(0, 1fr) 600px; gap: 48px; align-items: end; padding-bottom: 56px; }
.hero-in:has(.shot) .hero-text { align-self: center; }
.hero:has(.shot) + .body { padding-top: 240px; }
.shot { position: relative; margin: 0 -96px -192px 0; }
.shot-win { color: var(--text); background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-float); border: 1px solid rgba(255, 255, 255, 0.5); }
.shot-chrome { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.shot-dots { display: inline-flex; gap: 6px; }
.shot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.shot-url { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.shot-url svg { color: var(--open); }
.shot-sat { color: var(--text); position: absolute; left: -40px; top: 124px; width: 200px; padding: 16px 18px; box-shadow: var(--shadow-float); border: 1px solid var(--line); transform: rotate(-1.5deg); }
.shot-sat-k { margin: 0; font-size: 12px; color: var(--muted); }
.shot-sat-big { margin: 4px 0 0; font: 500 40px/1 var(--serif); color: var(--navy); }
.shot-sat-n { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--open); font-weight: 500; }
.dot-open { width: 6px; height: 6px; border-radius: 50%; background: var(--open); }

/* ---------------------------------------------- home */
.cause-grid.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles .cause-name { font-size: 20px; }
.tiles .cause-meta { margin-bottom: 0; }
.adds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adds li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.adds-ic { width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); }
.adds h3 { font: 500 22px/1.25 var(--serif); margin: 6px 0 8px; }
.adds p { margin: 0; font-size: 15px; color: var(--text-2); }
.adds .adds-fig { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--text); }
.adds-fig b { font-weight: 600; color: var(--navy); }

/* ---------------------------------------------- pricing */
.pp-wrap { margin: 0 0 96px; }
.pp-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 24px; border-radius: var(--r-m); background: var(--raised); }
.pp-toggle button { height: 40px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: 500 15px var(--sans); cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.pp-toggle button small { font-size: 13px; font-weight: 400; color: var(--open); margin-left: 4px; }
.pp-toggle button[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(19, 26, 35, 0.12); }
.pp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-card { display: flex; flex-direction: column; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.pp-card.mid { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.pp-name { font: 500 28px/1.15 var(--serif); }
.pp-who { margin: 6px 0 0; font-size: 15px; color: var(--text-2); min-height: 48px; }
.pp-price { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 0; }
.pp-price b { font: 500 52px/1 var(--serif); letter-spacing: -0.01em; }
.pp-price span { font-size: 15px; color: var(--muted); }
.pp-alt { margin: 8px 0 0; font-size: 14px; color: var(--muted); min-height: 21px; }
.pp-go { margin: 24px 0 0; justify-content: center; }
.pp-limits { list-style: none; margin: 24px 0 0; padding: 0; }
.pp-limits li, .pp-incl li, .co-limits li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; font-size: 15px; }
.pp-limits li + li { border-top: 1px dashed var(--line-strong); }
.pp-limits svg, .pp-incl svg, .co-limits svg { margin-top: 3px; color: var(--open); }
.pp-incl { margin-top: 16px; padding: 20px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.pp-incl-k { margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.pp-incl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.pp-incl li { color: var(--text-2); }
.hook { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; padding: 16px 20px; border-radius: var(--r-m); background: var(--navy-soft); border: 1px solid rgba(31, 78, 121, 0.2); }
.hook[hidden] { display: none; }
.hook-ic { flex: none; color: var(--navy); margin-top: 2px; }
.hook p { margin: 0; font-size: 16px; color: var(--text-2); }
.hook b { color: var(--navy); font-weight: 600; }

/* ---------------------------------------------- a real match, in full */
.mcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mcard { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.mcard-top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.mcard-rank { font: 500 22px/1.2 var(--serif); color: var(--navy); }
.mcard-who { min-width: 0; }
.mcard-who a { font: 500 21px/1.25 var(--serif); overflow-wrap: anywhere; }
.mcard-who small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.mcard-facts { list-style: none; margin: 16px 0 0 44px; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--text-2); }
.mcard-facts li { padding-left: 16px; position: relative; }
.mcard-facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.mcard-facts .fact-like::before, .mcard-facts .fact-range::before, .mcard-facts .fact-city::before { background: var(--navy); }
.mcard-facts .fact-apps-open::before { background: var(--open); }
.mcard-facts .fact-apps-preselected::before { background: var(--closed); }
.mcard-slip { list-style: none; margin: 16px 0 0 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); }
.mcard-slip li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px; gap: 16px; padding: 12px 16px; align-items: baseline; }
.mcard-slip li + li { border-top: 1px dashed var(--line-strong); }
.mcard-g { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.mcard-g small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.mcard-p { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.mcard-a { text-align: right; font-weight: 600; white-space: nowrap; }
.mcard-a.in { color: var(--navy); }

/* ---------------------------------------------- how it works */
.figs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.figs li { padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.figs b { display: block; font: 500 30px/1.1 var(--serif); color: var(--text); overflow-wrap: anywhere; }
.figs span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.figs li:first-child b { color: var(--navy); }
.steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: st; display: grid; gap: 0; max-width: 46rem; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px dashed var(--line-strong); font-size: 16px; color: var(--text-2); }
.steps li::before { content: counter(st); font: 500 22px/1.2 var(--serif); color: var(--navy); }
.steps b { color: var(--text); font-weight: 600; }
.alert-card { max-width: 44rem; margin-top: 20px; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: var(--r-m); }
.alert-k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.alert-t { margin: 0; font: 500 19px/1.4 var(--serif); }
.alert-p { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }
.csv { max-width: 44rem; padding: 4px 24px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.csv-k { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; font-weight: 600; font-size: 15px; }
.csv-cols { margin: 0; font: 400 13px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--text-2); overflow-wrap: anywhere; }
.faq { max-width: 46rem; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 500 19px/1.35 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; font-size: 16px; color: var(--text-2); max-width: 42rem; }

/* ---------------------------------------------- alternative pages */
.vs { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.vs-head, .vs-rows > div { display: grid; grid-template-columns: 184px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 16px 24px; }
.vs-head { padding-top: 12px; padding-bottom: 12px; background: var(--sunk); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--text-2); }
.vs-head .vs-us { color: var(--navy); }
.vs-rows { margin: 0; }
.vs-rows > div + div { border-top: 1px solid var(--line); }
.vs-rows dt { font-size: 14px; font-weight: 500; color: var(--muted); }
.vs-rows dd { margin: 0; font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.vs-rows dd.vs-us { color: var(--text); }
.vs-rows dd::before { display: none; }
.vs-card { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.vs-card.us { border-color: rgba(31, 78, 121, 0.3); }
.vs-card-k { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.vs-card.us .vs-card-k { color: var(--navy); }
.vs-card p { font-size: 15px; color: var(--text-2); }
.vs-card .vs-src { margin: 16px 0 0; font-size: 14px; }
.vs-figs { list-style: none; margin: 0; padding: 0; }
.vs-figs li { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 10px 0; border-top: 1px dashed var(--line-strong); }
.vs-figs b { font: 500 26px/1.1 var(--serif); }
.vs-figs span { font-size: 14px; color: var(--text-2); }
.vs-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.vs-chip span { font-size: 14px; }
.their { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.their li { display: grid; grid-template-columns: 184px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 14px 24px; font-size: 15px; }
.their li + li { border-top: 1px solid var(--line); }
.their-n { font-weight: 600; }
.their-p { color: var(--text); }
.their-u { color: var(--text-2); }
.incl { margin-top: 20px; }

/* ---------------------------------------------- terms and privacy */
.legal { max-width: 44rem; }
.legal h2 { font: 500 24px/1.25 var(--serif); margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--text-2); }
.legal p { margin: 0 0 12px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal li { margin-bottom: 8px; }
.legal b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------- checkout */
.co { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
.co.paying { grid-template-columns: minmax(0, 1fr); }
.co.paying .co-plan { display: none; }
.co-plan { padding: 24px; border: 1px solid var(--line); box-shadow: var(--shadow-card); position: sticky; top: 24px; }
.co-tag { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.co-plan h2 { font: 500 26px/1.2 var(--serif); }
.co-price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; }
.co-price b { font: 500 44px/1 var(--serif); }
.co-price span { font-size: 15px; color: var(--muted); }
.co-limits { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.co-limits li { border-bottom: 1px dashed var(--line-strong); font-size: 14px; color: var(--text-2); }
.co-switch { display: grid; gap: 8px; margin: 16px 0 0; font-size: 14px; }
.co-steps { display: grid; gap: 24px; min-width: 0; }
.co-step { font: 500 22px/1.25 var(--serif); margin: 0 0 4px; }
.co-form { display: grid; gap: 20px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.co-form .btn { justify-self: start; }
.co-form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.co-form .check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--navy); }
.co-meta { margin: 0; font-size: 14px; color: var(--muted); }
.co-note { display: grid; gap: 16px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.co-note p { margin: 0; color: var(--text-2); }
.co-note .btn { justify-self: start; }
.co-pay { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); min-width: 0; }
.co-wait { margin: 0; font-size: 15px; color: var(--muted); }
.co-msg { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.co-msg.error { color: #b42318; }
.co-off { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; padding: 16px 20px; border-radius: var(--r-m); background: var(--closed-soft); border: 1px solid rgba(132, 86, 15, 0.25); }
.co-off-ic { flex: none; width: 36px; height: 36px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--card); color: var(--closed); }
.co-off p { margin: 0; font-size: 15px; color: var(--text-2); }
.co-off .co-off-t { font-weight: 600; color: var(--closed); margin-bottom: 4px; }

@media (max-width: 1180px) {
  .hero-in:has(.shot) { grid-template-columns: minmax(0, 1fr) 520px; }
  .shot { margin-right: -64px; }
}
@media (max-width: 1080px) {
  .cause-grid.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-in:has(.shot) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .shot { margin: 0 -24px -96px 40px; }
  .hero:has(.shot) + .body { padding-top: 144px; }
  .pp-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .pp-who { min-height: 0; }
  .pp-incl ul { grid-template-columns: minmax(0, 1fr); }
  .adds { grid-template-columns: minmax(0, 1fr); }
  .vs-head { display: none; }
  .vs-rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vs-rows dd::before { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
  .vs-rows dd:not(.vs-us)::before { content: attr(data-who); }
  .vs-rows dd.vs-us::before { content: "Foundation Lookup"; color: var(--navy); }
  .their li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .co { grid-template-columns: minmax(0, 1fr); }
  .co-plan { position: static; }
}
@media (max-width: 640px) {
  .shot { margin: 0 -16px -88px 0; }
  .hero:has(.shot) + .body { padding-top: 128px; }
  .cause-grid.tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tiles a { flex-direction: row; }
  .tiles .cause-photo { flex: none; width: 112px; aspect-ratio: auto; }
  .tiles .cause-body { padding: 14px 16px; align-content: center; }
  .tiles .cause-name { font-size: 18px; }
  .adds li { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 12px; }
  .pp-card { padding: 20px; }
  .pp-price b { font-size: 44px; }
  .pp-incl { padding: 16px 20px; }
  .pp-toggle { display: flex; }
  .pp-toggle button { flex: 1; padding: 0 8px; }
  .mcard { padding: 16px; }
  .mcard-top { grid-template-columns: 24px minmax(0, 1fr); }
  .mcard-top .chip { grid-column: 2; justify-self: start; }
  .mcard-facts, .mcard-slip { margin-left: 0; }
  .mcard-slip li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; }
  .mcard-p { grid-column: 1 / -1; grid-row: 2; }
  .mcard-a { grid-column: 2; grid-row: 1; }
  .figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .figs li { padding: 16px; }
  .figs b { font-size: 24px; }
  .steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .vs-rows > div, .vs-head { padding: 14px 16px; }
  .vs-card { padding: 16px; }
  .vs-figs li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .their li { padding: 12px 16px; }
  .legal h2 { font-size: 22px; }
  .co-form, .co-pay, .co-note, .co-plan { padding: 16px; }
  .co-form .btn, .co-note .btn { width: 100%; justify-self: stretch; }
}

/* header at phone width (the Sign in link added on days 8-9 pushed the nav past 390 px):
   Sign in becomes an icon button like Search; under 430 px Causes leaves the header (it stays in the footer). */
.nav-signin svg { display: none; }
@media (max-width: 640px) {
  .nav .nav-signin { width: 40px; height: 40px; justify-content: center; border: 1px solid var(--ink-line); margin-left: 4px; }
  .nav-signin svg { display: block; }
  .nav-signin span { display: none; }
}
@media (max-width: 430px) { .nav .nav-causes { display: none; } }

/* ------------------------------------------------------------ Radar's day-10 review (11 Nov 2026) */
/* how-it-works steps: the text is one grid cell beside its number */
.steps li > span { min-width: 0; }
/* header: Pricing on every public page; under 430 px States and Causes leave the header (both stay in the footer) */
.nav-pricing { white-space: nowrap; }
@media (max-width: 430px) { .nav .nav-states { display: none; } }
/* phone: the filing tag becomes separate pills, as on the signed-in side, so a wrapped line keeps its border */
@media (max-width: 640px) {
  .filing { border: 0; gap: 6px; }
  .filing > span { border: 1px solid var(--ink-line); border-radius: var(--r-s); }
  .filing > span + span { border-left: 1px solid var(--ink-line); }
  .card .filing > span, .card .filing > span + span { border-color: var(--line-strong); }
  .shot { margin-right: 0; }
}
/* home: the hero holds most of the frame; the next section starts close under it */
.shot { margin-bottom: -96px; }
.hero:has(.shot) + .body { padding-top: 152px; }
@media (max-width: 900px) { .shot { margin-bottom: -80px; } .hero:has(.shot) + .body { padding-top: 128px; } }
/* footer: five columns that never run past the grid */
.foot nav a { overflow-wrap: anywhere; }

/* ============================================================ plan day 11: real product shots, one product
   Captures of the running app (shots.json) replace the coded frame. Desktop: a browser window running off the
   band's lower edge, the count card straddling the window's sidebar (chrome, not content). Phone: the same
   screen in a phone, faded at its foot, the card over the fade. Tiles: one screen's content column in a window
   inset from the top and left of a paper stage, running off its right and lower edges. */
.shot-pic { display: block; }
.shot-pic img, .tile-win img, .phone img { display: block; width: 100%; height: auto; }
.phone-island { display: none; }
.shot-sat { left: -56px; top: 272px; width: 184px; }
@media (max-width: 1180px) { .shot-sat { left: -64px; top: 232px; width: 176px; } }
@media (max-width: 900px) { .shot-sat { left: -48px; top: 272px; } }
/* the phone: one shape for the hero (at phone width) and the pricing box */
.phone { position: relative; width: 264px; padding: 8px; border-radius: 44px; background: #0b1016;
  box-shadow: 0 1px 2px rgba(19, 26, 35, 0.16), 0 20px 48px rgba(19, 26, 35, 0.22); }
.phone-screen { display: block; border-radius: 36px; overflow: hidden; padding-top: 36px; background: var(--ink); }
.phone .phone-island, .shot .phone-island { position: absolute; z-index: 2; top: 18px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 11px; background: #000; }
.phone .phone-island { display: block; }
@media (max-width: 640px) {
  .hero-in:has(.shot) { gap: 32px; }
  .shot { margin: 0 0 -96px; }
  .shot-win { position: relative; width: 264px; padding: 8px; border-radius: 44px; background: #0b1016; border: 0;
    max-height: 500px; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); }
  .shot .shot-chrome { display: none; }
  .shot .phone-island { display: block; }
  .shot-pic { padding-top: 36px; background: var(--ink); border-radius: 36px; overflow: hidden; }
  .shot-sat { left: auto; right: 0; top: auto; bottom: 40px; width: 152px; padding: 12px 14px; }
  .shot-sat-k, .shot-sat-n { font-size: 12px; }
  .shot-sat-big { font-size: 32px; }
}
/* tiles */
.adds-shots li { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
.adds-text { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px; }
.adds-shots .tile-stage { margin-top: auto; }
.tile-stage { position: relative; height: 360px; overflow: hidden; padding: 24px 0 0 24px; background: var(--sunk); border-top: 1px solid var(--line); }
.section > .tile-stage { max-width: 560px; height: 360px; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r-l); }
.tile-win { width: 560px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); }
.tile-win .shot-chrome { height: 32px; gap: 12px; padding: 0 12px; }
.tile-win .shot-dots i { width: 8px; height: 8px; }
.tile-win .shot-url { height: 20px; padding: 0 10px; }
/* pricing: the box of what every plan includes holds a phone, cut by its lower edge */
.pp-incl.has-phone { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 32px; padding-bottom: 0; overflow: hidden; }
.pp-incl.has-phone .pp-incl-list { padding-bottom: 20px; }
.pp-phone { position: relative; min-height: 272px; }
.pp-phone .phone { position: absolute; top: 4px; left: 16px; }
@media (max-width: 900px) {
  .pp-incl.has-phone { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pp-phone { min-height: 300px; }
  .pp-phone .phone { left: 50%; margin-left: -132px; }
}
@media (max-width: 640px) {
  .adds-text { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .tile-stage, .section > .tile-stage { height: 232px; padding: 16px 0 0 16px; }
  .tile-win { width: calc(100% + 24px); }
}
/* the not-found and error pages: a search in the body, not hanging over the band */
.search-inline { grid-template-columns: 2fr 1fr auto; box-shadow: none; border: 1px solid var(--line); max-width: 880px; }
@media (max-width: 640px) { .search-inline { grid-template-columns: 1fr; } }
/* grant lines and saved-list shares that appear with motion keep their place: transform and opacity only */
.st-bar i { transform-origin: 0 50%; }
/* the shared call to action: the long label on wide screens, a short one at phone width so the button keeps one line */
.cta-short { display: none; }
@media (max-width: 640px) { .cta-long { display: none; } .cta-short { display: inline; } }
/* phone home (Radar, final pass): the whole phone, no fade, and the count card under it, covering nothing */
@media (max-width: 640px) {
  .shot-win { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .shot-sat { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 264px; margin-top: 16px; transform: none; }
}

/* ------------------------------------------------------------ the EIN box (foundation and grantee pages)
   One card, navy for the one action. The result reuses the app's teaser rows: rank, "Name comes with a plan",
   the State, the facts and the application chip. Full width under the hero, the field inline from 641 px. */
.ein-box [hidden] { display: none !important; }    /* the wide layouts set display on the form */
.ein-box { margin: 0 0 56px; padding: 20px; scroll-margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); font-size: 14px; }
.ein-label { display: block; font: 500 19px/1.25 var(--serif); color: var(--text); }
.ein-hint { margin: 6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ein-row { display: flex; gap: 8px; }
.ein-row input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; font: 400 15px var(--sans); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: #fff; transition: border-color 140ms var(--ease);
}
.ein-row input:focus { border-color: var(--navy); outline: none; }
.ein-row button, .ein-pair button, .ein-go {
  flex: none; display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 0;
  border-radius: var(--r-s); background: var(--navy); color: #fff; font: 500 14px/1.2 var(--sans); text-align: center;
  cursor: pointer; transition: background-color 140ms var(--ease), transform 120ms var(--ease);
}
.ein-row button:hover, .ein-pair button:hover, .ein-go:hover { background: var(--navy-ink); color: #fff; text-decoration: none; }
.ein-row button:active, .ein-pair button:active, .ein-go:active { transform: scale(0.98); }
.ein-row button:disabled, .ein-pair button:disabled { opacity: 0.7; cursor: progress; }
.ein-msg { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--warn); }
.ein-msg:empty { display: none; }
.ein-org { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; }
.ein-org span { white-space: nowrap; }
.ein-about { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ein-n { margin: 16px 0 0; font: 500 18px/1.3 var(--serif); color: var(--text); }
.ein-n:focus { outline: none; }
.ein-n b { display: block; font: 500 36px/1.05 var(--serif); letter-spacing: -0.01em; }
.ein-sub { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ein-box .teaser-rows { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.ein-box .teaser-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ein-box .match-rank { font: 500 16px/1.4 var(--serif); color: var(--muted); }
.ein-box .teaser-who { display: grid; gap: 2px; min-width: 0; }
.ein-box .veil { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.ein-box .veil svg { flex: none; color: var(--muted); }
.ein-box .teaser-who small { font-size: 13px; color: var(--muted); }
.ein-box .teaser-facts { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ein-box .teaser-facts, .ein-box .teaser-row .chip { grid-column: 2; justify-self: start; }
.ein-box .chip { height: 24px; font-size: 12px; }
.ein-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ein-again { display: block; margin: 12px 0 0; padding: 0; border: 0; background: none; color: var(--navy); font: 500 13px var(--sans); cursor: pointer; }
.ein-again:hover { text-decoration: underline; text-underline-offset: 3px; }
/* a name search: a few organizations to pick from; no EIN: a cause and a State (owner 5408) */
.ein-picks { margin-top: 14px; }
.ein-picks-head { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.ein-pick-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ein-pick {
  display: grid; gap: 2px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
}
.ein-pick b { font-size: 14px; font-weight: 500; color: var(--navy); overflow-wrap: anywhere; }
.ein-pick small { font-size: 13px; color: var(--muted); }
.ein-pick:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ein-pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ein-pick:disabled { cursor: progress; opacity: 0.7; }
.ein-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ein-alt > summary { width: fit-content; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--navy); }
.ein-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.ein-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; color: var(--text-2); }
.ein-field select {
  width: 100%; min-width: 0; height: 40px; padding: 0 10px; font: 400 15px var(--sans); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: #fff;
}
.ein-field select:focus { border-color: var(--navy); outline: none; }
.ein-pair button { justify-self: start; }
.ein-pair .ein-msg { margin: 0; }
@media (min-width: 641px) {
  .ein-box.wide .ein-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 4px 32px; align-items: center; }
  .ein-box.wide .ein-hint { margin-bottom: 0; }
  .ein-box.wide .ein-msg { grid-column: 2; }
  .ein-box.wide .teaser-row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 8px 16px; }
  .ein-box.wide .teaser-facts, .ein-box.wide .teaser-row .chip { grid-column: auto; }
  .ein-box.wide .ein-go { display: inline-flex; }
  .ein-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
  .ein-pair .ein-msg { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ein-box { padding: 16px; margin-bottom: 40px; }
}

/* ------------------------------------------------------------ Save, Export, the filing alert (record card) */
.record-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); }
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--card); color: var(--text);
  font: 500 14px/1.25 var(--sans); text-align: center;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.act:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }
.act svg { flex: none; color: var(--muted); transition: color 140ms var(--ease); }
.act:hover svg { color: var(--navy); }
.act-wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .record-acts { padding: 12px 16px; }
  .act { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ein-row button, .ein-pair button, .ein-go, .act, .act svg { transition: none; }
}

/* the checkout page loads site.css only (resend link, 12 Nov 2026) */
.link-btn { padding: 0; border: 0; background: none; color: var(--navy); font: 500 14px var(--sans); cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }