/* ACCRF site styles. The middle section is the MainV2 design's stylesheet (design/MainV2.dc.html);
   production-only rules are at the end. */
/* Self-hosted fonts, latin subset only. Both families are SIL Open Font License 1.1:
   /fonts/instrument-serif-OFL.txt and /fonts/geist-OFL.txt */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist is one variable file (wght axis 100 to 900); the site uses 400, 500 and 600. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks, shown while the web fonts load (font-display: swap).
   size-adjust matches average character width; the overrides then reproduce the
   web font's line box (ascent + descent + line gap) so text does not reflow on swap. */
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Georgia'), local('Times New Roman'), local('TimesNewRomanPSMT');
  size-adjust: 75.73%;
  ascent-override: 130.7276%;
  descent-override: 40.9349%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Georgia Italic'), local('Georgia-Italic'), local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT');
  size-adjust: 79.92%;
  ascent-override: 123.8739%;
  descent-override: 38.7888%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 102.49%;
  ascent-override: 98.0583%;
  descent-override: 28.7833%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 104.94%;
  ascent-override: 95.769%;
  descent-override: 28.1113%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 99.48%;
  ascent-override: 101.0253%;
  descent-override: 29.6542%;
  line-gap-override: 0%;
}

/* MainV2 design */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #0C1412; color: #141A18; font-family: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #0B5E52; text-decoration: none; }
a:hover { color: #08463D; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid #0B5E52; outline-offset: 3px; }
.hdr :focus-visible, .hero :focus-visible, .vision :focus-visible, .pf :focus-visible, .give-card :focus-visible, .foot :focus-visible, .card-dark :focus-visible { outline-color: #86E0C6; }
.site { position: relative; width: 100%; overflow-x: clip; background: #F4F1EA; }
html { scroll-padding-top: 74px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.label { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #525D58; }
.label::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }
.label-dark { color: #9DAAA4; }
.h2 { font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 72px; line-height: 1.02; letter-spacing: -0.015em; color: #141A18; text-wrap: balance; }
.h2-dark { color: #EAF0ED; }
.h3 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #141A18; }
.lead { max-width: 620px; font-size: 20px; line-height: 1.6; color: #525D58; text-wrap: pretty; }
.lead-dark { color: #9DAAA4; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s, box-shadow .25s, color .2s; }
.btn .ico { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.btn:hover .ico { transform: translateX(3px); }
.btn-mint { background: #86E0C6; color: #0C1412; }
.btn-mint:hover { background: #A5ECD7; color: #0C1412; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(134,224,198,.28); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: #141A18; box-shadow: inset 0 0 0 1px rgba(20,26,24,.28); }
.btn-ghost:hover { color: #141A18; box-shadow: inset 0 0 0 1px rgba(20,26,24,.7); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; color: #EAF0ED; }
.link-arrow:hover { color: #86E0C6; }
.link-arrow .ico { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.link-arrow:hover .ico { transform: translateX(3px); }
.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #86E0C6; box-shadow: 0 0 0 4px rgba(134,224,198,.18); }

.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.nav { pointer-events: auto; margin-top: 12px; width: calc(100% - 48px); max-width: 1180px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 10px 0 20px; border-radius: 999px; background: rgba(12,20,18,.8); border: 1px solid rgba(234,240,237,.1); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transition: background-color .3s, box-shadow .3s; }
.hdr.scrolled .nav { background: rgba(12,20,18,.92); box-shadow: 0 14px 40px rgba(0,0,0,.22); }
/* .brand and .mark (lockup A, not the design's "ACCRF") are in the production rules below. */
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 11px 14px; border-radius: 999px; font-size: 15px; color: #C9D3CF; transition: background-color .2s, color .2s; }
.nav-links a:hover { color: #EAF0ED; background: rgba(234,240,237,.08); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(234,240,237,.08); color: #EAF0ED; cursor: pointer; }
.menu-panel { pointer-events: auto; margin-top: 8px; width: calc(100% - 24px); display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: #0C1412; border: 1px solid rgba(234,240,237,.1); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.menu-panel a { padding: 14px 16px; border-radius: 14px; font-size: 17px; color: #EAF0ED; }
.menu-panel a:hover { color: #EAF0ED; background: rgba(234,240,237,.07); }

/* The horizon is the top edge of the dark .vision panel: one wide ellipse, 2 x the page
   width across and 2 x --hz-ry tall, whose crest sits --hz-crest below the hero's top.
   .vision::before paints the cap in #0A110F, a shade deeper than the hero's ink; .horizon,
   inside the hero and behind the panel, holds the same ellipse with no fill, carrying only
   the mint glow and rim that draw the arc against the hero.
   The hero runs on --hz-o under the panel. The arc drops 13.4% of --hz-ry by the page
   edges, and on load it rises by --hz-rise, so --hz-o is derived from both (plus 24px)
   and the dark hero is always behind every point of the arc. */
.site { --hz-crest: clamp(740px, 100svh - 160px, 840px); --hz-ry: min(60vw, 860px); --hz-rise: 100px; --hz-o: calc(var(--hz-ry) * .134 + var(--hz-rise) + 24px); }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(var(--hz-crest) + var(--hz-o)); background: #0C1412; color: #EAF0ED; }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: .08; mix-blend-mode: overlay; pointer-events: none; }
.atmos { position: absolute; left: 50%; top: calc(100% - var(--hz-o) - 380px); z-index: 0; width: 1700px; height: 1000px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(134,224,198,.2), rgba(134,224,198,.06) 55%, transparent 75%); pointer-events: none; }
/* .horizon is a band from 240px above the crest to the hero's bottom, faded toward the page
   edges so the light gathers at the crest. The ellipse inside it (::before) carries only the
   mint glow; ::after is the thin rim, at full strength across the middle 40% of the
   page and fading out past the edges (its mask is measured on the 200%-wide ellipse). */
.horizon { position: absolute; left: 0; top: calc(100% - var(--hz-o) - 240px); z-index: 1; width: 100%; height: calc(var(--hz-o) + 240px); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45), #000 32%, #000 68%, rgba(0,0,0,.45)); mask-image: linear-gradient(90deg, rgba(0,0,0,.45), #000 32%, #000 68%, rgba(0,0,0,.45)); }
.horizon::before, .horizon::after { content: ""; position: absolute; border-radius: 50%; }
.horizon::before { left: -50%; top: 240px; width: 200%; height: calc(2 * var(--hz-ry)); box-shadow: 0 -10px 40px rgba(134,224,198,.34), 0 -40px 140px rgba(134,224,198,.14); }
.horizon::after { left: calc(-50% - 1px); top: 239px; width: calc(200% + 2px); height: calc(2 * var(--hz-ry) + 2px); border-top: 2px solid rgba(134,224,198,.9); -webkit-mask-image: linear-gradient(90deg, transparent 16%, #000 40%, #000 60%, transparent 84%); mask-image: linear-gradient(90deg, transparent 16%, #000 40%, #000 60%, transparent 84%); }
.hero-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 142px; padding-bottom: calc(var(--hz-o) + 96px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px 0 14px; border-radius: 999px; background: rgba(234,240,237,.06); border: 1px solid rgba(234,240,237,.12); font-size: 14px; color: #C9D3CF; }
.eyebrow:hover { color: #EAF0ED; background: rgba(234,240,237,.1); }
.eyebrow .ico { width: 16px; height: 16px; }
.h1 { margin-top: 28px; max-width: 1060px; font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 100px; line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.w { display: inline-block; }
.h1 em { font-style: italic; color: #86E0C6; }
.hero-sub { margin-top: 28px; max-width: 620px; font-size: 20px; line-height: 1.55; color: #9DAAA4; text-wrap: pretty; }
.hero-ctas { margin-top: 36px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; }

/* The panel's own background starts --hz-ry down, where the cap already spans the page.
   The panel is dark, so its label takes the design's .label-dark color. The bottom padding
   includes the 36px (28px on phones) that .pillars rises over, leaving 140px (88px) showing.
   "Mission" lands with the crest and its glow clear of the nav: 50px below the page's 74px scroll
   padding (phones and short screens land on the 74px alone). */
.vision { position: relative; z-index: 4; margin-top: calc(-1 * var(--hz-o)); padding: 180px 0 176px; scroll-margin-top: 50px; overflow: hidden; overflow: clip; background: linear-gradient(transparent var(--hz-ry), #0A110F 0); color: #EAF0ED; }
.vision::before { content: ""; position: absolute; z-index: -1; left: -50%; top: 0; width: 200%; height: calc(2 * var(--hz-ry)); border-radius: 50%; background: #0A110F; }
.vision .label { color: #9DAAA4; }
.vision-text { margin-top: 36px; max-width: 1080px; font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-size: 52px; line-height: 1.16; letter-spacing: -0.01em; color: #EAF0ED; text-wrap: pretty; }

/* How we help is its own ivory panel, rising over the dark vision panel like the panels below. */
.pillars { position: relative; z-index: 5; margin-top: -36px; padding: 150px 0; border-radius: 36px 36px 0 0; background: #F4F1EA; }
.sec-head { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.cards { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 400px; padding: 32px; border-radius: 28px; background: #FBFAF6; border: 1px solid rgba(20,26,24,.08); transition: border-color .3s, box-shadow .35s; }
.card:hover { border-color: rgba(11,94,82,.3); box-shadow: 0 24px 60px rgba(20,26,24,.08); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 32px; }
.card-ico { width: 48px; height: 48px; padding: 12px; border-radius: 16px; background: #ECE7DD; color: #0B5E52; stroke-width: 1.6; }
.card p { font-size: 17px; line-height: 1.6; color: #525D58; text-wrap: pretty; }
.card-dark { background: #0C1412; border-color: rgba(234,240,237,.08); }
.card-dark:hover { border-color: rgba(134,224,198,.35); box-shadow: 0 24px 60px rgba(12,20,18,.25); }
.card-dark .h3 { color: #EAF0ED; }
.card-dark p { color: #9DAAA4; }
.card-dark .card-ico { background: rgba(134,224,198,.12); color: #86E0C6; }

.pf { position: relative; z-index: 1; padding: 150px 0 140px; border-radius: 36px 36px 0 0; background: #0C1412; color: #EAF0ED; }
.pf-head { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.pf-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.status { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(134,224,198,.1); color: #86E0C6; font-size: 13px; font-weight: 500; }
.status .dot { width: 6px; height: 6px; box-shadow: none; }
.pf-grid { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
.pf-phone-col { position: relative; }
.pf-phone-wrap { position: sticky; top: 102px; display: flex; justify-content: center; padding: 24px 0; }
.pf-phone-wrap::before { content: ""; position: absolute; left: -10%; right: -10%; top: 0; bottom: 0; background: radial-gradient(closest-side, rgba(134,224,198,.16), transparent 72%); pointer-events: none; }
.phone { position: relative; width: 340px; height: 680px; padding: 11px; border-radius: 52px; background: #1B2522; box-shadow: 0 0 0 1px rgba(234,240,237,.1), inset 0 1px 0 rgba(234,240,237,.08), 0 50px 120px rgba(0,0,0,.5); }
.screens { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 42px; background: #FBFAF7; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 30px 22px 22px; color: #18201D; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.screen.on { opacity: 1; transform: none; }
.app-bar { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #0B5E52; }
.app-bar .ico { width: 20px; height: 20px; }
.progress { height: 6px; overflow: hidden; border-radius: 99px; background: #E7E3DA; }
.progress span { display: block; height: 100%; border-radius: 99px; background: #0B5E52; }
.app-kicker { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6661; }
.app-q { font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: -0.01em; }
.app-help { font-size: 14px; line-height: 1.5; color: #5B6661; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.opt { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid #DDD8CE; background: #FFFFFF; font-size: 15px; font-weight: 500; }
.opt.sel { border-color: #0B5E52; background: #E6F2EE; color: #0B5E52; box-shadow: inset 0 0 0 1px #0B5E52; }
.app-note { font-size: 13px; line-height: 1.5; color: #5B6661; }
.sk { display: block; height: 9px; border-radius: 99px; background: #E7E3DA; }
.sk-para { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.sk-row { display: flex; align-items: center; gap: 6px; }
.sk-row .sk { flex: none; }
.cite { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: #E6F2EE; color: #0B5E52; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.src-card { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: #F1EEE7; }
.src-h { font-size: 12px; font-weight: 600; }
.src-row { display: flex; align-items: center; gap: 8px; }
.src-row .sk { flex: none; }
.src-t { font-size: 12px; }
.qs { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.q { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 1px solid #E4DFD5; background: #FFFFFF; font-size: 14px; line-height: 1.4; }
.box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #B9B3A8; color: #FFFFFF; }
.q.on .box { border-color: #0B5E52; background: #0B5E52; }
.box .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.q.add { align-items: center; border-style: dashed; background: transparent; color: #5B6661; }
.pf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-step { min-height: 430px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.pf-num { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7E8884; transition: color .4s; }
.pf-step.on .pf-num { color: #86E0C6; }
.pf-h { font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 48px; line-height: 1.05; letter-spacing: -0.01em; }
.pf-tabs { display: none; }
.pf-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: #9DAAA4; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s, transform .15s; }
.pf-tab:hover { color: #EAF0ED; }
.pf-tab.on { background: #EAF0ED; color: #0C1412; }
.pf-btn { min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: none; font: inherit; letter-spacing: inherit; text-align: left; color: #7E8884; cursor: pointer; transition: color .4s; }
.pf-btn:hover { color: #C9D3CF; }
.pf-step.on .pf-btn { color: #EAF0ED; }
.pf-step p { max-width: 460px; font-size: 18px; line-height: 1.6; color: #7E8884; transition: color .4s; }
.pf-step.on p { color: #9DAAA4; }
.pf-foot { margin-top: 72px; padding-top: 28px; border-top: 1px solid rgba(234,240,237,.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; }
.pf-foot p { max-width: 640px; font-size: 14px; line-height: 1.55; color: #9DAAA4; }

.give { position: relative; z-index: 3; margin-top: -36px; padding: 150px 0 140px; border-radius: 36px 36px 0 0; background: #EAE5DB; }
.give-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 96px; align-items: start; }
.give-copy { display: flex; flex-direction: column; gap: 24px; }
.ways { display: flex; flex-direction: column; border-top: 1px solid rgba(20,26,24,.14); }
.give-copy .ways { margin-top: 12px; }
.way { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; border-bottom: 1px solid rgba(20,26,24,.14); font-size: 17px; font-weight: 500; color: #141A18; }
.way:hover { color: #0B5E52; }
.way .ico { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.way:hover .ico { transform: translateX(4px); }
.accountable { display: flex; flex-wrap: wrap; gap: 10px; }
.ph { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px dashed rgba(20,26,24,.35); font-size: 13px; color: #525D58; }
.give-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 32px; background: #0C1412; color: #EAF0ED; box-shadow: 0 40px 100px rgba(12,20,18,.22); }
.give-card-h { font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-size: 32px; line-height: 1.1; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px; border-radius: 999px; background: rgba(234,240,237,.07); }
.seg-btn { height: 44px; border: 0; border-radius: 999px; background: transparent; color: #9DAAA4; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s, transform .15s; }
.seg-btn:hover { color: #EAF0ED; }
.seg-btn.on { background: #EAF0ED; color: #0C1412; }
.amts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.amt { height: 60px; border-radius: 18px; border: 1px solid rgba(234,240,237,.16); background: transparent; color: #EAF0ED; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .15s; }
.amt:hover { border-color: rgba(234,240,237,.4); }
.amt.on { border-color: #86E0C6; background: rgba(134,224,198,.12); color: #86E0C6; }
.amt-other { grid-column: span 2; font-size: 16px; }
.give-sum { font-size: 14px; color: #9DAAA4; }
.fine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: #9DAAA4; }
.fine li { display: flex; align-items: center; gap: 6px; }
.fine .ico { width: 15px; height: 15px; color: #86E0C6; }

.team { position: relative; z-index: 2; margin-top: -36px; padding: 150px 0 140px; border-radius: 36px 36px 0 0; background: #F4F1EA; }
.people { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
.person { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin-bottom: 12px; border-radius: 50%; background: #E4DED2; color: #0B5E52; font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-size: 40px; letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px rgba(20,26,24,.08); }
.person-name { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #141A18; }
.person-role { font-size: 15px; line-height: 1.45; color: #525D58; }

.reach { position: relative; z-index: 4; margin-top: -36px; padding: 140px 0 150px; border-radius: 36px 36px 0 0; background: #F4F1EA; }
.involve { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.inv-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 36px; border-radius: 28px; background: #FBFAF6; border: 1px solid rgba(20,26,24,.08); }
.inv-top { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inv-card .h3 { font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }
.inv-card p { font-size: 17px; line-height: 1.6; color: #525D58; }
.inv-card .ways { align-self: stretch; }
.inv-card .btn { margin-top: auto; }
.btn-ink { background: #0C1412; color: #EAF0ED; }
.btn-ink:hover { background: #1B2522; color: #EAF0ED; transform: translateY(-2px); }

.foot { position: relative; z-index: 5; margin-top: -36px; padding: 110px 0 0; overflow: hidden; border-radius: 36px 36px 0 0; background: #0C1412; color: #EAF0ED; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 440px; }
.foot-brand p { font-size: 16px; line-height: 1.6; color: #9DAAA4; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col .label { margin-bottom: 8px; }
.foot-col a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #C9D3CF; }
.foot-col a:hover { color: #EAF0ED; }
.foot-bottom { margin-top: 64px; padding: 22px 0; border-top: 1px solid rgba(234,240,237,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: #9DAAA4; }
.giant { margin: 8px 0 -0.2em; font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-size: clamp(96px, 25vw, 380px); line-height: 0.8; letter-spacing: -0.03em; text-align: center; white-space: nowrap; color: #17221F; user-select: none; }

@media (prefers-reduced-motion: no-preference) {
  .moving .w { animation: word-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .moving .rise { animation: rise-in 1s cubic-bezier(.2,.7,.2,1) both; }
  .moving .horizon { animation: horizon-up 2.4s cubic-bezier(.16,1,.3,1) .1s both; }
  .moving .vision::before { animation: horizon-rise 2.4s cubic-bezier(.16,1,.3,1) .1s both; }
  .moving .atmos { animation: breathe 9s ease-in-out 2.2s infinite alternate both; }
  .moving.ready .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s; }
  .moving.ready .reveal.in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .moving .lit { animation: lit linear both; animation-timeline: view(); animation-range: cover 10% cover 36%; }
  }
}
a, button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn-mint:hover { background: #86E0C6; transform: none; box-shadow: none; }
  .btn-ink:hover { background: #0C1412; transform: none; }
  .btn:hover .ico, .link-arrow:hover .ico, .way:hover .ico { transform: none; }
  .card:hover, .card-dark:hover { box-shadow: none; }
}
.btn:active, .amt:active, .seg-btn:active, .pf-tab:active, .menu-btn:active { transform: scale(.97); }
@keyframes word-in {
  from { opacity: 0; transform: translateY(.3em); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* The glow and the dark cap rise together; only the glow fades in. */
@keyframes horizon-up {
  from { opacity: 0; transform: translateY(var(--hz-rise)); }
  to { opacity: 1; transform: none; }
}
@keyframes horizon-rise {
  from { transform: translateY(var(--hz-rise)); }
  to { transform: none; }
}
@keyframes breathe {
  from { opacity: .75; transform: translateX(-50%) scale(1); }
  to { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
@keyframes lit {
  from { opacity: .16; }
  to { opacity: 1; }
}

@media (min-width: 861px) {
  .menu-panel { display: none; }
}
@media (max-width: 1080px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .h1 { font-size: 80px; }
  .h2 { font-size: 58px; }
  .vision-text { font-size: 42px; }
  .card { padding: 26px; }
  .pf-grid { gap: 56px; }
  .pf-h { font-size: 40px; }
  .give-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .give-card { max-width: 560px; }
  .foot-top { gap: 48px; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .card-top { margin-bottom: 0; padding-bottom: 20px; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pf-phone-wrap { position: relative; top: auto; padding: 16px 0 4px; }
  .pf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 380px; margin: 0 auto; padding: 5px; border-radius: 999px; background: rgba(234,240,237,.07); }
  .pf-step { min-height: 0; padding: 26px 0; border-top: 1px solid rgba(234,240,237,.1); }
  .eyebrow { min-height: 44px; }
  .nav .btn-sm { height: 44px; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .involve { grid-template-columns: minmax(0, 1fr); }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav { width: calc(100% - 24px); height: 56px; padding: 0 6px 0 14px; }
  .site { --hz-crest: 740px; --hz-rise: 56px; }
  .hero-inner { padding-top: 102px; padding-bottom: calc(var(--hz-o) + 72px); }
  .h1 { font-size: 54px; line-height: 1; }
  .hero-sub { margin-top: 22px; font-size: 17px; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 8px; }
  .hero-ctas .btn { width: 100%; }
  .atmos { top: calc(100% - var(--hz-o) - 200px); width: 900px; height: 640px; }
  .vision { padding: 108px 0 116px; scroll-margin-top: 0; }
  .vision-text { margin-top: 24px; font-size: 32px; line-height: 1.2; }
  .h2 { font-size: 42px; line-height: 1.04; }
  .lead { font-size: 17px; }
  .pillars { margin-top: -28px; padding: 96px 0; border-radius: 28px 28px 0 0; }
  .cards { margin-top: 40px; gap: 14px; }
  .card { border-radius: 24px; }
  .pf { padding: 96px 0 88px; border-radius: 28px 28px 0 0; }
  .pf-grid { margin-top: 48px; }
  .phone { width: 300px; height: 600px; border-radius: 46px; }
  .screens { border-radius: 36px; }
  .pf-h { font-size: 34px; }
  .pf-foot { margin-top: 48px; }
  .give { margin-top: -28px; padding: 96px 0 88px; border-radius: 28px 28px 0 0; }
  .give-card { padding: 22px; border-radius: 26px; }
  .amt { height: 56px; font-size: 18px; }
  .team { margin-top: -28px; padding: 96px 0 88px; border-radius: 28px 28px 0 0; }
  .people { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .avatar { width: 88px; height: 88px; font-size: 32px; }
  .person-name { font-size: 17px; }
  .person-role { font-size: 14px; }
  .reach { margin-top: -28px; padding: 96px 0; border-radius: 28px 28px 0 0; }
  .involve { margin-top: 40px; gap: 14px; }
  .inv-card { padding: 24px; border-radius: 24px; }
  .inv-card .h3 { font-size: 30px; }
  .foot { margin-top: -28px; padding-top: 80px; border-radius: 28px 28px 0 0; }
  .foot-cols { gap: 24px; }
}
/* Short screens (landscape phones): the extra 50px would pull the hero's buttons into view
   above the nav, so "Mission" lands on the default 74px there too. */
@media (max-height: 500px) {
  .vision { scroll-margin-top: 0; }
}

/* Production additions (not in MainV2) */
/* iOS Safari enlarges text after a rotation to landscape unless told not to. The brand's live
   name would grow while its SVG mark stayed the same size, which breaks lockup A's proportions. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Smooth scrolling starts once the page has loaded (site.js adds .smooth), so arriving from
   another page at /#give jumps straight to the section instead of scrolling the whole page. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth { scroll-behavior: smooth; }
}
/* With reduced motion the Cancer Pathfinder screens still crossfade, but they don't move. */
@media (prefers-reduced-motion: reduce) {
  .screen { transform: none; transition: opacity .5s ease; }
}
/* The author display:flex above would otherwise beat the browser's own [hidden] rule. */
.menu-panel[hidden] { display: none; }
/* On short screens (landscape phones, zoomed-in desktops) the open menu scrolls inside itself. */
.menu-panel { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
/* Get involved now holds one card, the contact card. 780px matches .sec-head. */
.involve { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
/* Headshots fill the avatar circle at every breakpoint. The design's hairline ring is an inset
   shadow, which the photo would cover, so ::after paints the same ring over it. */
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar { position: relative; }
.avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20,26,24,.08); pointer-events: none; }
/* The give card's status line ("Loading payment options.", "Processing your gift."). While empty
   it stays in the accessibility tree (so screen readers hear it when it fills) and cancels its own flex gap. */
.give-status { font-size: 14px; line-height: 1.5; color: #86E0C6; }
.give-status:empty { margin-top: -18px; }
/* The brand is lockup A (Thomas, 2026-10-01): the mark beside the full name on two lines, as live
   text. It replaces design/MainV2.dc.html's "ACCRF" with the small full name beside it, an
   approved departure from the design, so don't put the design's header brand back. Everything
   scales from --lk, the mark's height, in the brand kit's proportions (mark 150, type 54 on a 1.22
   line, 30 between them), so the mark stands a little taller than the two lines and is centered
   on them. The mark appears only inside .brand. */
.brand { --lk: 48px; display: flex; flex: none; align-items: center; gap: calc(var(--lk) * .2); min-height: 44px; border-radius: 10px; color: #EAF0ED; }
.brand:hover { color: #EAF0ED; }
.mark { display: block; flex: none; height: var(--lk); width: auto; aspect-ratio: 113.38 / 236.53; }
.brand-name { font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif; font-size: calc(var(--lk) * .36); line-height: 1.22; letter-spacing: -0.005em; font-kerning: normal; white-space: nowrap; }
.brand-name > span { display: block; }
.foot-brand .brand { --lk: 64px; }
@media (max-width: 640px) {
  .brand { --lk: 42px; }
  .foot-brand .brand { --lk: 56px; }
}
/* Below 360px the name has 126px beside Donate and the menu button. */
@media (max-width: 359px) { .hdr .brand { --lk: 36px; } }
/* Below 320px (the Galaxy Fold's 280, folded) the full name, Donate and the menu button don't fit
   side by side, so Donate goes. The name stays, and the menu's Give link still leads to giving. */
@media (max-width: 319px) { .nav .btn-sm { display: none; } }
/* At 640px and narrower the brand, Donate, menu and skip link are 44px tall in a 56px pill, so
   their focus rings sit 1px out instead of 3px to stay clear of the pill's hairline edge. */
@media (max-width: 640px) {
  .hdr .brand:focus-visible, .nav .btn-sm:focus-visible, .menu-btn:focus-visible, .skip:focus-visible { outline-offset: 1px; }
}
/* Skip link: off screen until it gets keyboard focus, then it takes the brand's place in the nav
   pill, inset like the Donate and menu buttons on the right. The brand fades out under it, so no
   part of the name shows around it. */
.skip { position: fixed; top: 22px; left: 34px; left: calc(max(24px, (100% - 1180px) / 2) + 10px); z-index: 60; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #86E0C6; color: #0C1412; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transform: translateY(-80px); }
.skip:hover { background: #A5ECD7; color: #0C1412; }
.skip:focus { transform: none; }
.skip:focus-visible { outline-color: #86E0C6; }
.skip:focus ~ .site .hdr .brand { opacity: 0; }
@media (max-width: 640px) { .skip { top: 20px; left: 18px; } }
/* Touch screens: every link and button at least 44px tall (and the footer's short "Give" link
   44px wide). Mouse and trackpad keep the design's sizes. */
@media (pointer: coarse) {
  .btn-sm, .skip { height: 44px; }
  .skip { top: 20px; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .eyebrow { min-height: 44px; }
  .foot-col a { min-width: 44px; }
}
@media (pointer: coarse) and (max-width: 640px) { .skip { top: 18px; } }
/* Subpages (/privacy, /terms, /medical-disclaimer, /attributions, /thanks and the 404).
   A short ink page head, then an ivory body that overlaps it with the design's rounded
   top, the way .pillars sits on .vision. The h1 wears the design's .h2 .h2-dark. */
.page-head { position: relative; padding: 150px 0 108px; background: #0C1412; color: #EAF0ED; }
.page-head-inner { display: flex; flex-direction: column; gap: 22px; }
.page-head .h2 { max-width: 820px; }
.page-body { position: relative; z-index: 1; margin-top: -36px; padding: 88px 0 150px; border-radius: 36px 36px 0 0; background: #F4F1EA; }
/* Long-form text: about 68 characters a line. Nothing in it is italic: the hero's
   "manageable." is the site's only italic. */
.prose { max-width: 68ch; font-size: 18px; line-height: 1.65; color: #525D58; text-wrap: pretty; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 20px; }
.prose > h2 { margin-top: 56px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #141A18; text-wrap: balance; }
.prose > h3 { margin-top: 36px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: #141A18; }
.prose > h2 + *, .prose > h3 + * { margin-top: 12px; }
.prose ul { padding-left: 1.3em; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose a { color: #0B5E52; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.prose a:hover { color: #08463D; text-decoration-thickness: 2px; }
.prose strong, .prose b { font-weight: 600; color: #141A18; }
.prose em, .prose i, .prose cite, .prose address, .prose dfn, .prose var { font-style: normal; }
/* "This page is a draft for review by our legal counsel." A dashed box like .ph, in ACCRF green. */
.prose .draft-note { padding: 14px 18px; border: 1px dashed rgba(11,94,82,.55); border-radius: 16px; background: rgba(11,94,82,.05); font-size: 15px; font-weight: 500; line-height: 1.5; color: #0B5E52; }
.prose .draft-note + * { margin-top: 32px; }
.page-actions { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; }
.foot-col a[aria-current="page"] { color: #EAF0ED; }
@media (max-width: 640px) {
  .page-head { padding: 112px 0 84px; }
  .page-body { margin-top: -28px; padding: 56px 0 96px; border-radius: 28px 28px 0 0; }
  .prose { font-size: 17px; }
  .prose > h2 { margin-top: 44px; }
  .page-actions { flex-direction: column; margin-top: 40px; }
  .page-actions .btn { width: 100%; }
}

/* Give section: verified facts and the Candid seal, in the chip row the design left for them.
   .chip is .ph with a solid border (dashed marks a placeholder). */
.accountable { align-items: center; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(20,26,24,.18); font-size: 13px; color: #525D58; }
.seal { display: inline-flex; border-radius: 4px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.seal:hover { transform: translateY(-2px); }
.seal img { display: block; width: 72px; height: 72px; }
.nowrap { white-space: nowrap; }
@media (hover: none) { .seal:hover { transform: none; } }

/* Give card. "Make a gift" is a heading (h3); it keeps the design's regular weight. */
.give-card-h { font-weight: 400; }
/* At 320px "One-time" fits on one line, and a long give-button label wraps inside the pill. */
.seg-btn { padding: 0 4px; white-space: nowrap; }
.btn-block { height: auto; min-height: 52px; padding-top: 12px; padding-bottom: 12px; white-space: normal; text-align: center; line-height: 1.25; }
/* Donate and Give monthly go to the gift card. Side by side (over 1080px) it lands where #give
   did; stacked, it lands just under the nav. Both are on top of the page's 74px scroll padding.
   #gift wraps the card because the card's reveal transform would throw off the landing. */
#gift { scroll-margin-top: 150px; }
@media (max-width: 1080px) { #gift { scroll-margin-top: 16px; } }

/* Short laptop screens (1366 x 768 and similar): the whole sticky Cancer Pathfinder phone stays
   below the nav. This is the design's own 300 x 600 phone from its 640px rule. */
@media (min-width: 861px) and (max-height: 820px) {
  .pf-phone-wrap { top: 80px; padding: 12px 0; }
  .phone { width: 300px; height: 600px; border-radius: 46px; }
  .screens { border-radius: 36px; }
}
@media (min-width: 861px) and (max-height: 700px) {
  .phone { transform: scale(.8); transform-origin: 50% 0; }
}

/* Forced colors (Windows High Contrast) drop the backgrounds and borders that mark the selected
   frequency, amount and Cancer Pathfinder tab, so they use the system highlight instead. */
@media (forced-colors: active) {
  .seg-btn.on, .pf-tab.on, .amt.on { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .pf-step.on .pf-btn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
}

/* Give card: on-page checkout. Two steps in one card: .give-choose (frequency, amount, the mint
   button) and .give-pay (wallets, email, Stripe's card form). Both keep the card's 18px rhythm.
   #F4A48E is a functional error color for the ink card (9.4:1 on ink), outside the brand palette. */
.give-choose, .give-pay { display: flex; flex-direction: column; gap: 18px; }
.give-choose[hidden], .give-pay[hidden], .give-other[hidden], .give-error[hidden], .give-alert[hidden],
.give-or[hidden], .give-wallets[hidden], .give-change[hidden] { display: none; }
.give-card a { color: #86E0C6; text-decoration: underline; text-underline-offset: 0.2em; }
.give-card a:hover { color: #A5ECD7; }
.give-other, .give-field { display: flex; flex-direction: column; gap: 8px; }
.give-label { font-size: 14px; font-weight: 500; color: #9DAAA4; }
.give-hint, .give-fine-pay { font-size: 13px; line-height: 1.5; color: #9DAAA4; }
.give-error { font-size: 14px; line-height: 1.5; color: #F4A48E; }
.give-error a, .give-alert a { color: inherit; }
.give-input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid #5E6B66; border-radius: 14px; background: #131C1A; color: #EAF0ED; font: 400 16px/1.2 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
.give-input::placeholder { color: #8A9792; }
.give-input:hover { border-color: #7E8B86; }
.give-input:focus { border-color: #86E0C6; box-shadow: 0 0 0 1px #86E0C6; outline: none; }
.give-input:focus-visible { outline: 2px solid #86E0C6; outline-offset: 3px; }
.give-input[aria-invalid="true"] { border-color: #F4A48E; }
.give-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px #F4A48E; }
.give-input[readonly] { color: #9DAAA4; }
.give-input-lg { height: 60px; padding-left: 34px; border-radius: 18px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.give-money { position: relative; }
.give-money-prefix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 500; color: #9DAAA4; pointer-events: none; }
.give-pay-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.give-pay-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: 15px; color: #9DAAA4; border-radius: 6px; }
.give-pay-sum:focus { outline: none; }
.give-pay-sum:focus-visible { outline: 2px solid #86E0C6; outline-offset: 3px; }
.give-total { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: #EAF0ED; font-variant-numeric: tabular-nums; }
.give-change { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: #86E0C6; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.give-change:hover { color: #A5ECD7; text-decoration: underline; text-underline-offset: 0.2em; }
.give-wallets:empty { display: none; }
.give-pay[aria-busy="true"] .give-wallets:not([hidden]) { min-height: 52px; }
.give-or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #9DAAA4; }
.give-or::before, .give-or::after { content: ""; flex: 1; height: 1px; background: rgba(234,240,237,.16); }
/* Room for Stripe's card form while it loads (number, expiry and CVC, country and ZIP, name),
   so the Give button below moves little when it arrives. An estimate: measure it in the
   sandbox (scripts/e2e/give.e2e.mjs logs the height) and set it to match. */
.give-pay[aria-busy="true"] .give-payment { min-height: 340px; }
/* While the wallet check runs, the rows under the wallets keep their space but stay hidden, so
   nobody sees them jump (or starts typing in a field that then moves) when the wallet slot
   collapses. They fade in once the check is done. */
.give-pay[data-wallets="checking"] > .give-field,
.give-pay[data-wallets="checking"] > .give-payment,
.give-pay[data-wallets="checking"] > .btn,
.give-pay[data-wallets="checking"] > .give-fine-pay { visibility: hidden; }
/* While a gift is processing, Change amount can't be used; it keeps its space so the form
   (and the button just pressed) stays put. */
#give-panel[data-state="processing"] .give-change { visibility: hidden; }
/* In the pay step, the fine print under the form says what matters; the choose step's ticks
   ("Apple Pay & Google Pay" among them) would repeat it or promise a wallet that isn't there. */
#give-panel[data-state="loading"] > .fine,
#give-panel[data-state="pay"] > .fine,
#give-panel[data-state="processing"] > .fine { display: none; }
/* Keeps the summary's line while it's blank during typing, so the Give button doesn't move. */
.give-sum { min-height: 1lh; }
/* The bot check (Cloudflare Turnstile, js/give.js). Most of the time Turnstile keeps its frame at
   0 x 0 and this slot cancels its own flex gap, so nothing moves. When Cloudflare asks for a click,
   give.js sets data-shown and the caption and checkbox appear above the Give button. Turnstile
   draws its own frame and its own focus ring, inside a closed shadow root where :focus-within on
   this slot never matches. */
.give-check { display: flex; flex-direction: column; gap: 10px; margin-top: -18px; }
.give-check[data-shown] { margin-top: 0; }
.give-check:not([data-shown]) .give-check-caption { display: none; }
.give-check-caption { font-size: 14px; line-height: 1.5; color: #9DAAA4; }
.give-check-widget { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.give-alert { padding: 12px 14px; border: 1px solid #F4A48E; border-radius: 14px; font-size: 14px; line-height: 1.5; color: #F4A48E; }
.give-alert:focus { outline: none; }
.give-alert:focus-visible { outline: 2px solid #F4A48E; outline-offset: 3px; }
.give-noscript { font-size: 14px; line-height: 1.5; color: #9DAAA4; }
.btn[aria-disabled="true"] { cursor: progress; }
.btn-mint[aria-disabled="true"]:hover { background: #86E0C6; transform: none; box-shadow: none; }
.btn[aria-busy="true"] .ico { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .give-choose, .give-pay { animation: give-fade .2s ease both; }
  .give-pay[data-wallets="checked"] > .give-field,
  .give-pay[data-wallets="checked"] > .give-payment,
  .give-pay[data-wallets="checked"] > .btn,
  .give-pay[data-wallets="checked"] > .give-fine-pay { animation: give-fade .2s ease both; }
  .btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: give-spin .8s linear infinite; }
}
@keyframes give-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes give-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .give-input-lg { height: 56px; font-size: 18px; }
  .give-money-prefix { font-size: 18px; }
}

/* /thanks: the line confirming a gift, filled in by js/thanks.js. Not a headline, so Geist. */
.prose > .thanks-result + * { margin-top: 32px; }
.prose > .thanks-result[hidden] + * { margin-top: 0; }
.thanks-result-text { font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: #141A18; }
.thanks-sandbox { margin-top: 10px; font-size: 15px; color: #525D58; }
.thanks-actions { margin-top: 24px; }
.prose .thanks-result .btn-ink { color: #EAF0ED; text-decoration: none; }
.prose .thanks-result .btn-ink:hover { color: #EAF0ED; }
/* Phone mockup: progress and a printable file instead of button-like controls, so nothing in the
   picture looks tappable (Thomas, 2026-10-01). The phone is aria-hidden. */
.app-steps { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 2px 4px; font-size: 12.5px; color: #5B6661; }
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 7px; height: 7px; border-radius: 99px; background: #DDD8CE; }
.app-dots i.done { background: #0B5E52; opacity: .45; }
.app-dots i.cur { width: 18px; background: #0B5E52; }
.app-file { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4DFD5; }
.app-doc { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 42px; color: #0B5E52; }
.app-doc .ico { width: 34px; height: 42px; stroke-width: 1.3; }
.app-doc em { position: absolute; bottom: 8px; padding: 1px 4px; border-radius: 3px; background: #0B5E52; color: #FFFFFF; font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: .06em; }
.app-file-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.35; }
.app-file-t b { font-weight: 600; color: #18201D; }
.app-file-t span { font-size: 12px; color: #5B6661; }