/* fund-page.css r2 — 2026-08-25.
 *
 * This stamp exists to move the file's content hash, and with it the URL this
 * stylesheet is served from. On 2026-08-25 the CSS URL for a fund page was
 * being rewritten in place and its predecessor deleted on every push, while
 * being served with a ten-year max-age; any CDN edge that read the file
 * mid-write would hold the wreckage indefinitely, for its visitors only. The
 * write path is fixed in 3.13.2, but a poisoned edge entry cannot be reasoned
 * away, so every fund's next push moves to a URL no cache has ever seen.
 * Bump the number here after any future cache incident. */

/* ═══ tokens/fonts.css ═══ */
/* ─────────────────────────────────────────────────────────────
   FONTS — Solving the World's Greatest Problems
   Three families, all served from Google Fonts.
   · Raleway   — primary sans: UI, body, deck headlines
   · Cardo     — editorial serif: hooks, quotes, social headers
   · DM Mono   — labels & data (ALWAYS uppercase, wide tracking)
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cardo:ital,wght@0,400;0,700;1,400;1,700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ═══ tokens/colors.css ═══ */
/* ─────────────────────────────────────────────────────────────
   COLORS — Solving the World's Greatest Problems
   A near-monochrome system: black ground, gold as the ONLY accent.
   Gold draws the eye to the reframe, the number, the next step.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Ground / neutrals (dark-first brand) ---- */
  --swgp-black:        #000000; /* primary ground */
  --swgp-off-black:    #0b0b0b; /* subtle alternate ground */
  --swgp-charcoal:     #161616; /* contrast ground / dimension */
  --swgp-charcoal-2:   #121110; /* card surface on black */
  --swgp-charcoal-3:   #0f0f0f; /* recessed surface */
  --swgp-white:        #ffffff;
  --swgp-light-gray:   #f4f4f4; /* light ground / card on white */

  /* ---- Gold accent ramp ---- */
  --swgp-gold:         #e4af54; /* PRIMARY accent — the only accent */
  --swgp-gold-light:   #e5cf8f; /* supporting gold, soft emphasis */
  --swgp-gold-deep:    #cb8d24; /* gold for use on light backgrounds */
  --swgp-gold-ink:     #1a1206; /* near-black text that sits ON gold */

  /* ---- Text on dark ground ---- */
  --swgp-text:         #ffffff;            /* primary text */
  --swgp-text-soft:    rgba(255,255,255,0.72); /* body copy */
  --swgp-text-muted:   rgba(255,255,255,0.50); /* labels, captions */
  --swgp-text-faint:   rgba(255,255,255,0.32); /* "before" / deemphasis */

  /* ---- Text on light ground ---- */
  --swgp-ink:          #161616;            /* primary text on light */
  --swgp-ink-soft:     rgba(24,24,24,0.70);
  --swgp-ink-muted:    rgba(24,24,24,0.50);

  /* ---- Lines / hairlines ---- */
  --swgp-line:         rgba(255,255,255,0.14); /* divider on dark */
  --swgp-line-soft:    rgba(255,255,255,0.10);
  --swgp-line-gold:    rgba(228,175,84,0.45);  /* gold rule / accent border */
  --swgp-line-gold-soft: rgba(228,175,84,0.20);
  --swgp-tint-gold:    rgba(228,175,84,0.10);  /* gold wash fill */

  /* ---- Semantic aliases (use these in components) ---- */
  --surface-page:      var(--swgp-black);
  --surface-alt:       var(--swgp-charcoal);
  --surface-card:      var(--swgp-charcoal-2);
  --surface-recessed:  var(--swgp-charcoal-3);
  --accent:            var(--swgp-gold);
  --accent-soft:       var(--swgp-gold-light);
  --on-accent:         var(--swgp-gold-ink);
  --text-strong:       var(--swgp-text);
  --text-body:         var(--swgp-text-soft);
  --text-label:        var(--swgp-text-muted);
  --border:            var(--swgp-line);
  --border-accent:     var(--swgp-line-gold);
}

/* ═══ tokens/typography.css ═══ */
/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — Solving the World's Greatest Problems
   Three voices working together:
   · Raleway  — PRIMARY face. The default headline face system-wide. Black (900)/Bold
                for headlines, Light (300) for body. Headlines use tight NEGATIVE tracking.
   · Cardo    — SECONDARY face. Use ONLY in social carousel posts (hooks/
                headers/copy — esp. SWGP Funds). NOT in decks, docs, one-pagers,
                or any other surface — those are Raleway (incl. pull-quotes).
   · DM Mono  — eyebrows, labels, data. ALWAYS uppercase, WIDE tracking.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Families ---- */
  --font-sans:    'Raleway', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Cardo', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Semantic family aliases */
  --font-display: var(--font-sans);  /* PRIMARY: default headlines = Raleway (all surfaces) */
  --font-editorial: var(--font-serif); /* SECONDARY: Cardo — SOCIAL POSTS ONLY, never decks/docs/pull-quotes */
  --font-body:    var(--font-sans);
  --font-label:   var(--font-mono);

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */
  /* Semantic: DEFAULT title/headline weight is Bold (700). Reserve
     ExtraBold/Black for rare, deliberate emphasis — not default titles. */
  --fw-title:     var(--fw-bold); /* @kind font */

  /* ---- Tracking ---- */
  --track-display: -0.045em; /* @kind font */
  --track-head:    -0.035em; /* @kind font */
  --track-tight:   -0.015em; /* @kind font */
  --track-normal:   0; /* @kind font */
  --track-label:    0.16em;  /* @kind font */
  --track-eyebrow:  0.32em;  /* @kind font */

  /* ---- Line heights ---- */
  --lh-display:  0.9; /* @kind font */
  --lh-head:     1.0; /* @kind font */
  --lh-snug:     1.16; /* @kind font */
  --lh-body:     1.46; /* @kind font */
  --lh-loose:    1.6; /* @kind font */

  /* ---- Type scale (rem; 1rem = 16px) ---- */
  --fs-eyebrow:  0.875rem; /* 14 — DM Mono label */
  --fs-caption:  0.9375rem;/* 15 */
  --fs-small:    1rem;     /* 16 */
  --fs-body:     1.1875rem;/* 19 */
  --fs-body-lg:  1.375rem; /* 22 */
  --fs-h5:       1.625rem; /* 26 */
  --fs-h4:       2rem;     /* 32 */
  --fs-h3:       2.75rem;  /* 44 */
  --fs-h2:       3.75rem;  /* 60 */
  --fs-h1:       5rem;     /* 80 */
  --fs-display:  7.5rem;   /* 120 */
}

/* ---- Ready-to-use type roles ---- */
.swgp-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.swgp-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-label);
}
.swgp-display {
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--text-strong);
}
.swgp-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
  color: var(--text-strong);
}
/* .swgp-hook — a deck/doc subheading or reframe line. Raleway by default
   (Cardo is reserved for social + genuine pull-quotes; see --font-editorial). */
.swgp-hook {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
/* .swgp-quote — a pull-quote. Raleway (Cardo is social-only). */
.swgp-quote {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.swgp-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.swgp-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--accent);
}

/* ═══ tokens/spacing.css ═══ */
/* ─────────────────────────────────────────────────────────────
   SPACING & RADIUS & LAYOUT — Solving the World's Greatest Problems
   Generous, deliberate spacing. Big air around big statements.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.75rem;  /* 44 */
  --space-8:   3.5rem;   /* 56 */
  --space-9:   4.5rem;   /* 72 */
  --space-10:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* ---- Radii — restrained. Brand skews square/architectural. ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;   /* default card radius */
  --radius-lg:  20px;
  --radius-pill: 999px; /* chips, capsule buttons */

  /* ---- Container widths ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --measure:        66ch;  /* readable body measure */

  /* ---- Slide / canvas references ---- */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --social-w: 1080px;   /* IG / LinkedIn 4:5 */
  --social-h: 1350px;
  --story-w: 1080px;    /* 9:16 */
  --story-h: 1920px;
}

/* ═══ tokens/effects.css ═══ */
/* ─────────────────────────────────────────────────────────────
   EFFECTS — Solving the World's Greatest Problems
   Shadows are quiet (dark-on-dark). Motion is calm: gentle fades and
   small lifts, never bounce. Gold-tinted focus rings.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Shadows (used sparingly; mostly on light or for floating CTA) ---- */
  --shadow-sm:  0 1px 6px rgba(0,0,0,0.45);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg:  0 14px 44px rgba(0,0,0,0.50);
  --shadow-gold: 0 10px 30px rgba(228,175,84,0.22);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(228,175,84,0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Hover/press conventions ---- */
  --press-scale: 0.98; /* @kind other */

  /* ---- Brand textures (reference paths from project root) ---- */
  --maze-mark:    url('assets/brand/maze_gold.png'); /* @kind other */
  --bg-gradient:  url('assets/brand/bg_gradient.png'); /* @kind other */
}

/* ═══ styles.css ═══ */
/* ═══════════════════════════════════════════════════════════════
   Solving the World's Greatest Problems — Design System
   Global stylesheet. This file is @import lines ONLY; consumers link
   this one file. All real rules live in the imported token files.
   ═══════════════════════════════════════════════════════════════ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

/* ═══ page resets (from the design export's page-level styles, scoped) ═══ */
.fdm-fund-page a{color:var(--swgp-gold);text-decoration:none}
.fdm-fund-page a:hover{color:var(--swgp-gold-light)}
.fdm-fund-page button{background:none;border:none;font:inherit;color:inherit;cursor:pointer}
/* padding as well as margin. The theme sets p{padding-bottom:1em}, and resetting
 * only the margin left every paragraph on every fund page carrying a blank line
 * underneath it that no rule here accounted for. Sections space themselves with
 * flex gaps and explicit margins, so on top of that the copy read as double
 * spaced — and the gap looked innocent, because the extra line was inside the
 * paragraph's own box rather than between them. */
.fdm-fund-page p,.fdm-fund-page h1,.fdm-fund-page h2,.fdm-fund-page h3,.fdm-fund-page h4,.fdm-fund-page h5{margin:0;padding:0}
.fdm-fund-page img{display:block;max-width:100%}
/* The design export's page wrapper carried these; the shortcode wrapper takes them over. */
.fdm-fund-page{background:var(--swgp-black);color:var(--swgp-text)}
/* ...including the family. The exports set font-family only where they wanted
 * something other than the body face, so most text on a fund page inherits it
 * (55 of the 69 styled text elements on Online Events, for one). Without this
 * line that inheritance walks all the way out to the host <body>, and the page
 * silently wears whatever face the theme, a Divi template, or a page's own
 * leftover Custom CSS last declared there. Online Events had exactly that: a
 * page-local `body{font-family:'Montserrat'}` from the previous hand-built
 * design set every unqualified paragraph in Montserrat while the headings,
 * which do name a family, stayed Raleway. The page owns its own typography. */
.fdm-fund-page{font-family:var(--font-body)}

/* ═══ live-site hardening + polish ═══ */
/* Divi (and most themes) style bare h1–h5 with dark colors via element
 * selectors, which beat inheritance — force headings back to the page's
 * own color unless a section sets one inline. */
.fdm-fund-page :is(h1,h2,h3,h4,h5):not([style*="color"]){color:inherit!important}
/* Pill CTAs carry inline transition rules; give hover/active something to
 * animate (inline styles can't express :hover). */
.fdm-fund-page a[style*="radius-pill"]:hover,.fdm-fund-page button[style*="radius-pill"]:hover{transform:translateY(-2px);filter:brightness(1.1)}
.fdm-fund-page a[style*="radius-pill"]:active,.fdm-fund-page button[style*="radius-pill"]:active{transform:translateY(0) scale(.98)}
/* The "Your Guide" rail is position:sticky, but Divi/theme wrappers clip
 * with overflow:hidden, which disables sticky for all descendants. The
 * real ancestor chain is deep (et_pb_code_inner, entry-content,
 * main-content, et-boc, …), so unclip EVERY ancestor of a fund page —
 * :has(.fdm-fund-page) matches exactly the containing elements. Horizontal
 * protection is restored with overflow-x:clip on body, which (unlike
 * hidden on a wrapper) doesn't create a scroll container or break sticky. */
body :has(.fdm-fund-page){overflow:visible!important}
html{overflow-x:clip}
/* clip (not the theme's hidden) + explicit visible-y: hidden-x forces
 * overflow-y to compute "auto", which turns body into a scroll container
 * that never scrolls — silently un-anchoring every position:sticky on the
 * page (the guide rail). !important because the theme's body rule wins
 * the cascade otherwise. */
body{overflow-x:clip!important;overflow-y:visible!important}
/* Breathing room under the (possible) fixed header/admin bar when stuck. */
.fdm-fund-page [style*="position: sticky"]{top:32px!important}
/* Guide rail scroll-spy: the active section's label turns gold. !important
 * because the resting color is inline on the link. */
.fdm-fund-page .fdm-fp-nav{transition:color .25s ease}
.fdm-fund-page .fdm-fp-nav.is-active{color:var(--swgp-gold)!important}

/* ═══ scale + breathing room (Eric, 2026-07-31) ═══
 * The canvas draft was "compressed editorially" — the live page reads
 * small and dense. Lift the whole composition and open up the sections.
 * zoom scales the px-based inline styles uniformly (supported everywhere
 * we care about, incl. modern Firefox). */
.fdm-fund-page{zoom:1.08;--fdm-page-zoom:1.08}
/* Opt out of the lift. Sets BOTH, deliberately: --fdm-gutter below divides by
 * --fdm-page-zoom, so a page that changed one without the other would compute a
 * gutter for a zoom it is not using. That is exactly how the Foundation Courses
 * hero ended up 54px left of the logo. */
.fdm-fund-page.fdm-page-flat{zoom:1;--fdm-page-zoom:1}

/* ═══ THE PAGE GUTTER — the house rule for left and right margins ═══
 *
 * Content lines up with the site header: its left edge on the logo, its right
 * edge on the last menu button. Every page should use this rather than picking
 * a max-width, so the pages agree with each other and with the navigation.
 *
 *   padding-left:  var(--fdm-gutter);
 *   padding-right: var(--fdm-gutter);
 *
 * Apply it to whichever element owns a section's side padding, and give that
 * element max-width:none — the background stays full bleed and only the content
 * comes in. Centring a narrower box instead is the thing this replaces.
 *
 * Where it comes from: the header centres a --fdm-mega-max-w container and pads
 * it by --fdm-mega-pad-h, so its logo sits at (page - container) / 2 + pad from
 * the left. Reusing the menu's own variables (it emits them on :root) tracks
 * that at every width and keeps tracking it if the container is changed in Menu
 * settings. A fixed inset is only ever right at one window size.
 *
 * Written as 50% - (half the container - the pad) rather than the more obvious
 * (100% - container)/2 + pad because the two are equal but this form divides
 * cleanly by the zoom. Inside a zoomed element, percentages resolve against a
 * containing block that is 1/zoom as wide and the result is scaled back up, so
 * the fixed half has to be divided by the zoom for the sum to land on the logo.
 * That is what lets a page keep the 1.08 lift AND line up.
 *
 * max() floors it on windows narrower than the container, where the arithmetic
 * would otherwise go negative.
 *
 * EXEMPT: a deliberately narrow centred measure (an 800px column of body copy,
 * a centred closing line). A several-hundred-pixel gutter inside an 800px box
 * leaves almost no content width. Those keep their own cap and padding. */
.fdm-fund-page{
	--fdm-gutter: max(calc(var(--fdm-mega-pad-h, 48px) / var(--fdm-page-zoom, 1)), calc(50% - (var(--fdm-mega-max-w, 1440px) / 2 - var(--fdm-mega-pad-h, 48px)) / var(--fdm-page-zoom, 1)));
}
/* The floor is the header's OWN side padding, not a round number.
 *
 * In a window narrower than the container the header stops centring and its
 * content edge simply IS --fdm-mega-pad-h; the subtraction above meanwhile
 * falls through zero, so the floor is what answers for every width below the
 * container. A hardcoded 24px answered 4px wide of the header's 20px, which
 * put the content 6px inside the logo between 1281 and 1399. Using the
 * header's own number means the two agree by construction at those widths
 * too, and it still stops the arithmetic going negative, which is what a floor
 * is for.
 *
 * Divided by the zoom for the same reason the subtraction is: a fixed length
 * inside a zoomed element is scaled on the way out, so 20px of intended margin
 * has to be declared as 20/1.08 to land as 20. */
/* The header narrows its own side padding through the tablet band and again on
 * mobile, so content follows it rather than drifting out of line. */
@media (min-width: 981px) and (max-width: 1280px) {
	.fdm-fund-page{--fdm-gutter: calc(var(--fdm-mega-pad-h-tablet, 28px) / var(--fdm-page-zoom, 1))}
}
@media (max-width: 980px) {
	.fdm-fund-page{--fdm-gutter: calc(24px / var(--fdm-page-zoom, 1))}
}
/* Top-level sections: more vertical room between and within. */
.fdm-fund-page #a-problem,.fdm-fund-page #a-strategy,.fdm-fund-page #a-allocation,
.fdm-fund-page #a-stories,.fdm-fund-page #a-team,.fdm-fund-page #a-community{
	padding-top:84px!important;padding-bottom:96px!important;gap:42px!important}
/* Body copy breathes. */
.fdm-fund-page .swgp-body{line-height:1.62!important}
/* Pill CTAs: uniform size/typography matching the site's Divi buttons
 * (per the live theme: 13px / 700 / sentence case / radius 100px, sized
 * by padding). Colors stay per-button from the inline styles. */
.fdm-fund-page a[style*="radius-pill"],.fdm-fund-page button[style*="radius-pill"]{
	font-family:var(--font-sans)!important;font-size:13px!important;font-weight:700!important;
	letter-spacing:0!important;text-transform:none!important;line-height:1.4!important;
	padding:18px 40px!important;border-radius:100px!important}
/* Guide rail: same uniform button, slightly tighter side padding so it
 * fits the 264px column. */
.fdm-fund-page [style*="position: sticky"] a[style*="radius-pill"]{padding:16px 26px!important}

/* ═══════════════════════════════════════════════════════════
   MOBILE / TABLET — the draft was desktop-only; everything is
   inline-styled, so responsiveness lives here as breakpoint
   overrides keyed off the inline patterns.
   ═══════════════════════════════════════════════════════════ */

/* Grid tracks default to min-width:auto, so a wide child (a video embed, a
 * long unbroken string) can push a column past the viewport. With the page
 * clipping horizontal overflow that reads as text cut off at the edge. */
.fdm-fund-page [style*="grid-template-columns"] > * { min-width: 0; }
.fdm-fund-page [style*="grid-template-columns"] { min-width: 0; }

/* ═══ narrow desktop / landscape tablet (981 to 1200) ═══
 * The guide rail still holds its 264px column here, and the 8 percent zoom
 * inflates everything else, which together overflow the viewport. Drop the
 * zoom and let the paired columns stack so nothing is clipped. */
@media (min-width: 981px) and (max-width: 1200px) {
	/* BOTH, for the reason given where the lift is declared: --fdm-gutter and the
	 * hosted full-bleed breakout below both divide by --fdm-page-zoom, so dropping
	 * the zoom without dropping the variable computes them for a zoom this page is
	 * not using. This band had exactly that mismatch. */
	.fdm-fund-page { zoom: 1; --fdm-page-zoom: 1; }
	.fdm-fund-page [style*="padding: 0px 64px"] { padding: 0 32px 8px !important; }
	.fdm-fund-page [style*="grid-template-columns: 1.05fr 0.95fr"],
	.fdm-fund-page [style*="grid-template-columns: 1.15fr 0.85fr"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 1fr"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 270px"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"] { grid-template-columns: 1fr !important; }
	.fdm-fund-page [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"] { grid-template-columns: 1fr !important; }
	.fdm-fund-page [style*="columns: 2"] { columns: 1 !important; }
	.fdm-fund-page .fdm-bio-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 980px) {
	/* Guide wrapper stops being a 264px rail + content grid. */
	.fdm-fund-page [style*="grid-template-columns: 264px 1fr"]{display:block!important}
	/* The rail becomes a sticky horizontal chip bar. */
	.fdm-fund-page [style*="position: sticky"]{
		position:sticky!important;top:0!important;z-index:60;
		display:flex!important;flex-direction:row!important;align-items:center;
		gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
		padding:12px 20px!important;margin:0!important;
		background:var(--swgp-black);border-right:0!important;
		border-bottom:1px solid var(--swgp-line)}
	.fdm-fund-page [style*="position: sticky"] > div{
		display:flex!important;flex-direction:row!important;gap:18px}
	.fdm-fund-page [style*="position: sticky"] .swgp-eyebrow{display:none}
	.fdm-fund-page [style*="position: sticky"] a[style*="radius-pill"]{display:none!important}
	.fdm-fund-page .fdm-fp-nav{border-bottom:0!important;padding:6px 0!important;white-space:nowrap;flex:0 0 auto}

	/* Hero: donation form stacks under the copy; tighter gutters. */
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{
		grid-template-columns:1fr!important;padding:110px 28px 48px!important;gap:36px!important}

	/* Allocation partner cards stack. */
	.fdm-fund-page [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important}
	/* Flex children with big minimums stop forcing overflow. */
	.fdm-fund-page [style*="min-width: 420px"]{min-width:0!important}
	/* Cross-site bio cards: their inline grid is fixed 5-across. */
	.fdm-fund-page .fdm-bio-grid{grid-template-columns:repeat(3,1fr)!important}
	/* Content column gutters. */
	.fdm-fund-page [style*="padding: 0px 64px"]{padding:0 32px 8px!important}
}

@media (max-width: 740px) {
	/* zoom was a desktop scale-up; phones need the real viewport. BOTH, again:
	 * the gutter and the hosted breakout divide by --fdm-page-zoom. */
	.fdm-fund-page{zoom:1;--fdm-page-zoom:1}

	/* Stack EVERY layout grid… */
	.fdm-fund-page [style*="grid-template-columns"]{grid-template-columns:1fr!important}
	/* …except the small icon+text rows, which stay two-column. */
	.fdm-fund-page [style*="grid-template-columns: 92px 1fr"]{grid-template-columns:64px 1fr!important}
	.fdm-fund-page [style*="grid-template-columns: 48px 1fr"]{grid-template-columns:40px 1fr!important}

	/* Editorial two-column text flows single-column. */
	.fdm-fund-page [style*="columns: 2"]{columns:1!important}

	/* Type scale for small screens (keyed to the inline sizes). */
	.fdm-fund-page [style*="font-size: 84px"]{font-size:clamp(38px,11vw,56px)!important}
	.fdm-fund-page [style*="font-size: 41px"]{font-size:clamp(23px,6.3vw,31px)!important}
	.fdm-fund-page [style*="font-size: 56px"]{font-size:clamp(30px,8.5vw,40px)!important}
	.fdm-fund-page [style*="font-size: 38px"]{font-size:26px!important}
	.fdm-fund-page [style*="font-size: 34px"]{font-size:24px!important}
	.fdm-fund-page [style*="font-size: 25px"],.fdm-fund-page [style*="font-size: 24px"]{font-size:18px!important}

	/* Sections: compact but breathing. */
	.fdm-fund-page #a-problem,.fdm-fund-page #a-strategy,.fdm-fund-page #a-allocation,
	.fdm-fund-page #a-stories,.fdm-fund-page #a-team,.fdm-fund-page #a-community{
		padding-top:52px!important;padding-bottom:60px!important;gap:26px!important}
	.fdm-fund-page [style*="padding: 0px 64px"]{padding:0 18px 8px!important}

	/* Cards tighten. */
	.fdm-fund-page [style*="padding: 48px 52px"]{padding:26px 20px!important}
	.fdm-fund-page [style*="padding: 36px 40px"]{padding:24px 18px!important}
	.fdm-fund-page [style*="padding: 32px 36px"]{padding:24px 18px!important}

	/* Hero: tighter still; big CTA full-width for thumb reach. */
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{padding:96px 18px 40px!important}
	.fdm-fund-page a[style*="radius-pill"],.fdm-fund-page button[style*="radius-pill"]{padding:16px 30px!important}

	/* Bio cards two-across on phones. */
	.fdm-fund-page .fdm-bio-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}

	/* Guide chip bar slightly tighter. */
	.fdm-fund-page [style*="position: sticky"]{padding:10px 14px!important;gap:14px}
}

@media (max-width: 740px) {
	/* "Let's chat" white capsule: flex-basis-0 text column crushed beside
	 * the button — stack it, and relax the full pill radius once stacked. */
	.fdm-fund-page [style*="padding: 28px 48px"]{flex-direction:column!important;align-items:flex-start!important;padding:24px 24px!important;gap:16px!important;border-radius:28px!important}
	/* Stacked former-columns lose their vertical divider indents. */
	.fdm-fund-page [style*="border-left: 1px solid"]{border-left:0!important;padding-left:0!important}
	/* Long words/URLs can't force sideways clipping. */
	.fdm-fund-page h1,.fdm-fund-page h2,.fdm-fund-page h3,.fdm-fund-page p{overflow-wrap:break-word}
	/* Hero headline safety margin on the clamp. */
	.fdm-fund-page [style*="font-size: 84px"]{font-size:clamp(34px,9.6vw,52px)!important}
}

/* ═══ split bar (fund stat graphic) ═══
 * A single proportion line running the full width under the copy: one
 * bar, two segments, labels above and totals below. Static by choice. */
.fdm-split { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; }
.fdm-split__heads { display: flex; gap: 16px; }
.fdm-split__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fdm-split__name { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--swgp-text-muted); }
.fdm-split__val { font-family: var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--swgp-text); }
.fdm-split__val span { color: var(--swgp-text-muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
.fdm-split__bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; gap: 3px; background: transparent; }
.fdm-split__seg { height: 100%; border-radius: 999px; }
.fdm-split__foot { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--swgp-text-muted); }
@media (max-width: 640px) {
	.fdm-split__heads { flex-direction: column; gap: 10px; }
	.fdm-split__head { width: 100% !important; }
	.fdm-split__foot { flex-direction: column; gap: 4px; }
}

/* Cards in a row match the tallest one. The design's wrapper already
 * stretches to fill its grid cell, but the card box inside it only grew to
 * its own text, so a short card left a gap under it. */
.fdm-fund-page .sc-host-x[style*="height: 100%"] > div { height: 100%; }

/* ═══ video poster (click to play) ═══
 * A raw YouTube iframe paints its own chrome over the thumbnail: title bar,
 * channel avatar, and a Watch on YouTube strip, which double up with the
 * artwork's own title. This shows the clean frame instead and only loads
 * the player once someone actually clicks. */
.fdm-video {
	position: relative; display: block; width: 100%; padding: 0; border: 0;
	aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer;
	background-color: var(--swgp-charcoal-3);
	/* !important: the theme resets background-size on button elements, which
	 * left the poster at natural size showing only its top left corner. */
	background-size: cover !important; background-position: center !important;
}
.fdm-video__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 76px; height: 76px; border-radius: 999px;
	background: rgba(20, 14, 8, 0.55); border: 1px solid rgba(255, 255, 255, 0.6);
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.fdm-video__play::after {
	content: ""; width: 0; height: 0; margin-left: 5px;
	border-style: solid; border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}
.fdm-video:hover .fdm-video__play, .fdm-video:focus-visible .fdm-video__play {
	background: var(--swgp-gold); border-color: var(--swgp-gold); transform: translate(-50%, -50%) scale(1.07);
}
.fdm-video:hover .fdm-video__play::after, .fdm-video:focus-visible .fdm-video__play::after { border-left-color: var(--swgp-gold-ink, #1a1206); }
.fdm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ interactive map (region hotspots, no JS) ═══
 * The map ships as a white card, matching the deck. Invisible hotspots sit
 * over each label; hover or focus lifts a dark detail card. Buttons make it
 * work on touch and keyboard too. */
.fdm-map { margin-top: 10px; }
.fdm-map__card { background: #fff; border-radius: 16px; padding: 10px; overflow: visible; }
.fdm-map__stage { position: relative; }
.fdm-map__list { display: none; }
.fdm-map__img { display: block; width: 100%; height: auto; border-radius: 10px; }
.fdm-map__spot {
	position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent;
	border-radius: 10px; cursor: pointer; font: inherit;
	box-shadow: 0 0 0 0 rgba(228, 175, 84, 0); transition: box-shadow .18s ease, background .18s ease;
}
.fdm-map__spot:hover, .fdm-map__spot:focus { outline: none; background: rgba(228, 175, 84, 0.18); box-shadow: 0 0 0 2px var(--swgp-gold); }
.fdm-map__tip {
	position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px);
	width: 232px; padding: 14px 16px; border-radius: 12px; text-align: left;
	background: #14110c; border: 1px solid var(--swgp-line-gold, rgba(228,175,84,0.45));
	box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fdm-map__spot:hover .fdm-map__tip, .fdm-map__spot:focus .fdm-map__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Hotspots near the edges would push a centred card past the map, so they
 * anchor to their own side instead. */
.fdm-map__spot--start .fdm-map__tip { left: 0; transform: translateX(0) translateY(6px); }
.fdm-map__spot--start:hover .fdm-map__tip, .fdm-map__spot--start:focus .fdm-map__tip { transform: translateX(0) translateY(0); }
.fdm-map__spot--end .fdm-map__tip { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.fdm-map__spot--end:hover .fdm-map__tip, .fdm-map__spot--end:focus .fdm-map__tip { transform: translateX(0) translateY(0); }
.fdm-map__tip-name { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--swgp-gold); }
.fdm-map__tip-val { display: block; margin-top: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: #fff; }
.fdm-map__tip-note { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 300; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.72); }
.fdm-map__hint-mobile { display: none; }
.fdm-map__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--swgp-text-muted); }
@media (max-width: 740px) {
	/* A world map with eight labels is unreadable on a phone. The card
	 * scrolls sideways at a legible width, and the same numbers repeat as a
	 * plain list underneath so nobody has to swipe to read the data. */
	.fdm-map__card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px; }
	.fdm-map__stage { min-width: 700px; }
	/* No tooltips on phones: a centred card next to an edge hotspot gets
	 * clipped by the scroller, and the list below already carries every
	 * number. The map is simply a picture to swipe here. */
	.fdm-map__spot { pointer-events: none; }
	.fdm-map__tip { display: none; }
	.fdm-map__list { display: flex; flex-direction: column; margin-top: 14px; }
	.fdm-map__row {
		display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
		padding: 9px 2px; border-bottom: 1px solid var(--swgp-line-soft);
		font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
		text-transform: uppercase; color: var(--swgp-text-muted);
	}
	.fdm-map__row span:last-child { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--swgp-text); }
	.fdm-map__row--focus { color: var(--swgp-gold); }
	.fdm-map__row--focus span:last-child { color: var(--swgp-gold); }
	.fdm-map__foot { flex-direction: column; gap: 4px; }
	.fdm-map__hint-desktop { display: none; }
	.fdm-map__hint-mobile { display: inline; }
}

/* ═══ readability: section markers pop harder (Eric: hard to see) ═══
 * Numbered markers (01 · The Problem, The Strategy in a Nutshell …) step
 * up from 18px/500 to 24px/700; the small sub-heads (The Problem / The
 * Solution / The Definition …) step up and brighten from muted gray to
 * light gold. */
/* line-height matters here: this rule nearly doubles the authored 18px to
 * 35px, and the markers are wide (uppercase + 0.32em tracking), so between
 * roughly 740px and 1100px they wrap to two lines. With no line-height of
 * their own those lines collided — "03: INITIAL / ALLOCATIONS" printed on
 * top of itself. */
.fdm-fund-page [style*="letter-spacing: 0.32em"]{font-size:35px!important;font-weight:700!important;line-height:1.16!important}
/* …but not the nutshell band header — only the numbered content markers grow. */
.fdm-fund-page > *:nth-child(2) [style*="letter-spacing: 0.32em"]{font-size:18px!important;font-weight:500!important}

.fdm-fund-page .swgp-label[style*="font-size: 11px"]{font-size:13.5px!important;color:var(--swgp-gold-light,#e9c98a)!important}
.fdm-fund-page .swgp-eyebrow[style*="font-size: 11px"],.fdm-fund-page .swgp-eyebrow[style*="font-size: 12px"]{font-size:13.5px!important}
@media (max-width: 740px) {
	.fdm-fund-page [style*="letter-spacing: 0.32em"]{font-size:18px!important}
}

/* Bio cards on fund pages: drop the gray card chrome — the photo keeps its
 * rounded corners and the name/role sit directly on the page black. The
 * card's own radius+clip must go too: with the chrome invisible it still
 * rounds the card's bottom corners and shaves the caption's descenders. */
.fdm-fund-page .fdm-bio-card{background:transparent!important;border-radius:0!important;overflow:visible!important}
.fdm-fund-page .fdm-bio-card > div[style*="aspect-ratio"]{border-radius:15px}
.fdm-fund-page .fdm-bio-card > div[style*="padding:12px"]{padding:12px 0 0!important}

/* ═══ allocation rotator (funds can hold 20+ allocations) ═══
 * The JS in the template turns the allocation card grid into a
 * snap-scrolling track: 3 cards per view, 2 on tablet, 1 on phone,
 * arrows underneath (hidden until the cards overflow). */
.fdm-fund-page .fdm-fp-alloc-track{
	display:flex!important;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
	scrollbar-width:none;-ms-overflow-style:none}
.fdm-fund-page .fdm-fp-alloc-track::-webkit-scrollbar{display:none}
.fdm-fund-page .fdm-fp-alloc-track > *{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;min-width:0}
@media (max-width: 980px){.fdm-fund-page .fdm-fp-alloc-track > *{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width: 640px){.fdm-fund-page .fdm-fp-alloc-track > *{flex-basis:100%}}
.fdm-fp-alloc-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.fdm-fp-alloc-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.24);color:var(--swgp-text);font-size:24px;line-height:1;
	cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px;
	transition:background .2s,border-color .2s,opacity .2s}
.fdm-fp-alloc-btn:hover{background:rgba(228,175,84,.25);border-color:var(--swgp-gold)}
.fdm-fp-alloc-btn:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}

/* Divi paints blockquotes with its blue left border — not on this page. */
.fdm-fund-page blockquote{border-left:0!important;padding-left:0!important}

/* Outbound credential pills (independent reviewers) glow gold on hover. */
.fdm-fund-page a[rel="noopener"][style*="border-radius: 999px"]:hover{
	border-color:var(--swgp-gold)!important;color:var(--swgp-gold)!important}

/* ═══ contained composition (Eric: wall-to-wall → bring the content in) ═══
 * The black backdrop stays full-bleed; every content block below the hero
 * comes in to the page gutter, which tracks the navigation. The hero (header)
 * stays full-bleed edge to edge. */
/* ═══ heroes cannot overflow ═══
 * Every fund hero is a `1fr 350px` grid with an 84px headline beside the
 * donation form. A bare 1fr has an automatic minimum of min-content, so the copy
 * column will not shrink past its widest word; add the 350px card, the 56px gap
 * and the page gutters and the grid's own minimum exceeds the window somewhere
 * under about 1150px. Past that the hero spills over both edges — headline
 * clipped on the left, form clipped on the right — and html/body overflow-x:clip
 * cuts it rather than letting it scroll.
 *
 * minmax(0, …) lets both tracks shrink, and the two columns collapse at 1100
 * rather than waiting for the 980 breakpoint below, which is already too late
 * for a fixed 84px headline. Applies to all 13 heroes at once. */
.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{
	grid-template-columns:minmax(0,1fr) minmax(0,350px)}
.fdm-fund-page [style*="grid-template-columns: 1fr 350px"] > *{min-width:0}
@media (max-width: 1100px) {
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{
		grid-template-columns:minmax(0,1fr)!important}
	/* The headline is a fixed 84px rather than a clamp, so it needs bringing down
	   at the same point or it is wider than the column it now owns. */
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"] h1{
		font-size:clamp(38px,7vw,84px)!important}
}

/* ═══ the side margins are the house rule, not a number picked here ═══
 *
 * This was a centred 1320px column inside clamp(16px,3.5vw,48px) of page
 * padding, and it never lined up with the navigation. A fixed column cannot:
 * the menu centres a --fdm-mega-max-w container and pads it by
 * --fdm-mega-pad-h, so its content edge moves with the window while a 1320px
 * box does not. Measured against the logo, the nutshell and chat bands sat 31px
 * outside it at 1280, 42px at 1440, 52px at 1600 and 65px at 1920: drifting
 * further out the wider the window, which is the failure --fdm-gutter exists to
 * end. The 1320px came from the design being drawn as a ~1280px card, which was
 * a fair reading of a static mock and the wrong thing to encode.
 *
 * WHY THE GUTTER IS ON THE CHILDREN AND NOT ON THE WRAPPER.
 *
 * The obvious shape is padding on .fdm-fund-page, with negative margins on the
 * hero and the bands to cancel it. That is what the 1320px version did, and
 * with a fixed clamp() it worked because the same number came out everywhere.
 * It CANNOT work with the gutter, and the reason is quiet: --fdm-gutter is
 * built on 50%, and a percentage resolves against the element's own containing
 * block. Padding the wrapper narrows its content box, so a child's 50% is then
 * half of the NARROWED box, not half the window, and the two gutters are
 * different numbers. calc(var(--fdm-gutter) * -1) on a child therefore cancels
 * the wrong amount: measured at 1600, the child's gutter bottomed out on the
 * max() floor of 24px against the wrapper's 120px, and the hero sat 94px inside
 * the window instead of running wall to wall.
 *
 * So the wrapper carries no side padding at all, every child is full-bleed by
 * default, and each content block pads itself by the gutter. Every one of those
 * percentages then resolves against the same full-width containing block, which
 * is what makes them agree. It also deletes the two band rules this block used
 * to need: a band is now simply a child that has a background, so nothing has
 * to be excluded from a cap that no longer exists, and the :nth-child(2)
 * specificity trap that cost a release goes with them.
 *
 * The gutter divides by --fdm-page-zoom, so this keeps the 1.08 lift AND lands
 * on the logo. See the gutter block above for that arithmetic and for the one
 * exemption (a deliberately narrow centred measure keeps its own cap; nothing
 * at this level is one). */
.fdm-fund-page{padding-left:0;padding-right:0;padding-bottom:48px}
.fdm-fund-page > *{max-width:none;margin-left:0!important;margin-right:0!important}
.fdm-fund-page > *:not(:first-child){
	padding-left:var(--fdm-gutter)!important;
	padding-right:var(--fdm-gutter)!important}
/* The hero runs wall to wall. Named twice on purpose: :first-child is the
 * normal case, and div:first-of-type covers a partial that ships a top-level
 * <style> or <script> and takes the first-child slot away from it. That is the
 * same shift that once put the full-bleed band treatment on an invisible
 * <style> on the Henry page and boxed its nutshell while Trafficking's ran
 * full-bleed. */
.fdm-fund-page > div:first-of-type{padding-left:0!important;padding-right:0!important}
@media (max-width: 740px) {
	.fdm-fund-page{padding-bottom:24px}
	.fdm-fund-page > *:not(:first-child){padding-left:18px!important;padding-right:18px!important}
	.fdm-fund-page > div:first-of-type{padding-left:0!important;padding-right:0!important}
}

/* ═══ Foundation Courses opts out of the contained composition ═══
 * That block assumes the shared fund template: page side gutters on the
 * wrapper, no cap of its own on anything below the hero, and negative margins
 * that cancel the gutters for the hero and the two band sections.
 *
 * The course template breaks all three assumptions. Its sections are already
 * full-bleed and carry their own backgrounds and their own centered 1180px
 * inner container, and — the actual bug — the gutter-cancel rule above is
 * scoped to `> div:first-of-type`, while this template's first child is a
 * <section>. So the hero never cancelled the gutters and the background video
 * sat inset by up to 48px a side instead of running wall to wall.
 *
 * Rather than widen that rule (which would change every fund page), drop the
 * whole composition for this template only.
 *
 * The class is repeated in the selector, and that is not a typo. "Same
 * specificity, placed after them, so it wins on source order" was true of the
 * plain :nth-child(2) rule and NOT of the :nth-child(2 of :not(style):not(script))
 * one added later: that pseudo-class carries the specificity of its own
 * argument list, so the selector is (0,2,1) where this opt-out was (0,2,0), and
 * source order never got a say. The result was that the second and third
 * sections of an opted-out page kept the full-bleed band treatment: on
 * Foundation Courses, #trafficking and #courses-coming-soon sat 96px wider than
 * every other section and 48px to the left of them, and the page scrolled
 * sideways by 48px. Repeating the class makes this (0,3,0), which beats both.
 *
 * Anything added to that nth-child family later must be checked against this
 * number rather than assumed to lose on source order. */
.fdm-fund-page.fdm-course-page{padding-left:0;padding-right:0;padding-bottom:0}
.fdm-fund-page.fdm-course-page.fdm-course-page > *{
	max-width:none!important;
	margin-left:0!important;margin-right:0!important;
	padding-left:0!important;padding-right:0!important}

/* ═══ A page that hosts a fund page is not an article ═══
 * body.fdm-fp-hosted is added by the module wherever the shortcode renders.
 *
 * Every hand-built fund page was laid out in Divi, inside a Code module on a
 * full-width row, so the theme's article furniture was never in the way and
 * nobody had reason to notice it. A page carrying only the shortcode is an
 * ordinary post: the theme boxes it in the content column and prints the page
 * title above it. The first auto-provisioned page arrived looking like a
 * letterbox with a heading on top, and the markup was not the problem.
 *
 * Only the two things that actually interfere: the width cap and the title.
 * Not a blanket reset of the theme's layout, which is the sort of thing that
 * breaks on the next theme update. */
body.fdm-fp-hosted .entry-content,
body.fdm-fp-hosted .et_pb_post_content,
body.fdm-fp-hosted #left-area,
body.fdm-fp-hosted #main-content .container {
	max-width: none !important;
	width: auto !important;
	padding-left: 0 !important; padding-right: 0 !important;
	/* Vertical too. Divi pads the content wrapper top and bottom, and against
	   sections that paint their own background edge to edge that padding reads
	   as a white band above the hero and another under the last section. */
	padding-top: 0 !important; padding-bottom: 0 !important;
	margin-top: 0 !important; margin-bottom: 0 !important;
}
body.fdm-fp-hosted #main-content .container::before { display: none !important; }
body.fdm-fp-hosted #content-area,
body.fdm-fp-hosted article.page { padding: 0 !important; margin: 0 !important; }

/* The sidebar column.
 *
 * Divi's default page layout is right-sidebar: #left-area takes 79.125% and
 * floats, #sidebar takes the rest. Provisioning now sets the postmeta that
 * turns that off, but only on pages it creates — an existing page, or one
 * somebody made by hand, still has it. That is worth handling here rather than
 * in the meta alone, because the failure is not a tidy 21% of empty space: a
 * full-bleed child measures its 100vw breakout against that 79% parent, so the
 * page lurches left by a tenth of the window and the first characters of every
 * line are cut off the screen. */
body.fdm-fp-hosted #left-area {
	width: 100% !important; max-width: none !important;
	float: none !important; padding: 0 !important;
}
body.fdm-fp-hosted #sidebar { display: none !important; }
body.fdm-fp-hosted .entry-title,
body.fdm-fp-hosted .et_post_meta_wrapper > h1 { display: none !important; }
/* The container is centred, so the content still has to break out of whatever
   width survives. Belt to the rule above's braces: this works even where the
   theme's own selectors are named something else entirely.
 *
 * Divided by --fdm-page-zoom, and that is the whole point of this comment.
 * .fdm-fund-page carries zoom:1.08, and a vw length inside a zoomed element is
 * taken as the viewport width and THEN scaled, so a plain `width:100vw` made
 * the wrapper 1.08 viewports wide: 1382px in a 1280px window, centred by a
 * -51px margin, overhanging 51px each side. Percentages are zoom-transparent
 * (the containing block is divided by the zoom and the result scaled back), so
 * only the vw halves need correcting.
 *
 * Nothing looked broken, because body{overflow-x:clip} cut the overhang and a
 * full-bleed photograph does not mind being cropped. What it did break was
 * alignment: every side margin on the page was measured from a left edge 51px
 * off screen. The old composition floored its band padding at 64px, which
 * happened to land 13px inside the window and hid it; the gutter has no such
 * floor, so at 1280 the content went off the left edge and made the bug
 * visible. Off-screen content was the symptom. This is the cause. */
body.fdm-fp-hosted .fdm-fund-page,
body.fdm-fp-hosted .slg {
	width: calc(100vw / var(--fdm-page-zoom, 1));
	max-width: calc(100vw / var(--fdm-page-zoom, 1));
	margin-left: calc(50% - 50vw / var(--fdm-page-zoom, 1));
	margin-right: calc(50% - 50vw / var(--fdm-page-zoom, 1));
}

/* ═══ eyebrow bullets ═══
 * Every eyebrow the design tool emits opens with a small gold square before
 * its label. They go, everywhere, in one rule rather than by editing 32
 * instances across 25 section files, because the exports keep producing them:
 * a rule also covers pages not built yet.
 *
 * The bullets are empty spans, so :empty plus a gold *background* is enough to
 * name them. Both matter. The play triangle beside "Watch the trailer" is also
 * an empty span with a width, but it paints with border-left: var(--swgp-gold-ink)
 * and no background, so requiring "background:" immediately before the token
 * keeps it out. Four spellings because the exports vary in whitespace and in
 * whether they carry the hex fallback.
 *
 * Nothing needs doing about the space they left: the eyebrow is a flex row,
 * and a display:none child generates no box, so its gap is not drawn either. */
.fdm-fund-page span:empty[style*="width"][style*="background: var(--swgp-gold)"],
.fdm-fund-page span:empty[style*="width"][style*="background: var(--swgp-gold,"],
.fdm-fund-page span:empty[style*="width"][style*="background:var(--swgp-gold)"],
.fdm-fund-page span:empty[style*="width"][style*="background:var(--swgp-gold,"] { display: none; }

/* ═══ highlight bullets ═══
 * A short list of claims inside an allocation card.
 *
 * The marker is a ::before, not an element, and that is the whole point. The
 * first attempt drew each bullet as an empty span with a width and a gold
 * background, which is exactly what the rule directly above deletes. The dot
 * vanished — and worse, because a display:none child generates no box, the
 * text beside it became the row's FIRST grid item and landed in the 5px marker
 * column. Every highlight wrapped one word per line. Two lessons in one: read
 * the stylesheet before inventing a pattern, and a hidden grid child does not
 * hold its column. */
.fdm-fund-page .swgp-bullets { display: flex; flex-direction: column; gap: 10px; }
.fdm-fund-page .swgp-bullet { position: relative; padding-left: 16px; }
.fdm-fund-page .swgp-bullet::before {
	content: ""; position: absolute; left: 0; top: 0.58em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--swgp-gold); }


/* ═══ page-specific: give ═══ */
/* ═══════════════════════════════════════════════════════════════
   Give page — funds/give/page.css
   Appended after shared/fund-page.css at push time, so everything
   here wins on source order at equal specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ---- opt out of the contained composition ----
 * The shared CSS gutters .fdm-fund-page, centres everything below the hero in
 * a 1320px column, and gives children 2 and 3 a full-bleed band treatment.
 * This page's screens already carry their own backgrounds and their own
 * centred 1240px wrapper, so all three fight it. One class more specific than
 * the shared .fdm-fund-page > *:nth-child(n), so it wins. */
/* The class is repeated on purpose. The shared rule this has to beat is
 * `.fdm-fund-page > *:nth-child(2 of :not(style):not(script))`, which is
 * (0,2,1); a single .fdm-give-page makes this (0,2,0) and loses, so the band
 * treatment won and the hero came out 1536px wide inside a 1440px window with
 * 108px of padding it never asked for. Repeating the class makes it (0,3,0).
 * Exactly the same fix as The Problems page. */
.fdm-fund-page.fdm-give-page.fdm-give-page { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.fdm-fund-page.fdm-give-page.fdm-give-page > * {
	max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important;
	padding-left: 0 !important; padding-right: 0 !important;
}

/* The shared CSS lifts the fund template with zoom:1.08 because that design
 * was drawn compressed. This one was not: it ships explicit type scales and
 * vw-based clamps measured against its own canvas. Back to 1. */
/* zoom: handled by .fdm-page-flat on the wrapper, which sets the zoom and
 * the --fdm-page-zoom the gutter divides by, together. */

/* ---- full-bleed breakout ----
 * The page ships as a fragment inside whatever Divi section hosts the
 * shortcode. A boxed host would frame this black page in white, so break out
 * to the viewport edges and paint the host surfaces black.
 * (html,body{overflow-x:clip} ships in the shared CSS, so 100vw is safe.) */
.fdm-give-page {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body:has(.fdm-give-page) { background: #000; }
body:has(.fdm-give-page) :is(#page-container, #main-content, .et_pb_section:has(.fdm-give-page)) { background: #000 !important; }
body:has(.fdm-give-page) :is(.et_pb_section, .et_pb_row, .et_pb_code):has(.fdm-give-page) {
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* ---- buttons ----
 * Deliberately NOT overridden. The design drew three sizes (sm on the fund
 * cards, md on "Explore the Funds", lg on "Learn how to join"), which left two
 * CTAs on the same page at different sizes and weights.
 *
 * The shared CSS already rewrites every [style*="radius-pill"] CTA to the one
 * fund-page button (Raleway 700 / 13px / sentence case / 18px 40px / radius
 * 100px) and gives it its hover, so letting that rule through makes every
 * button here identical to the fund pages and to each other. The inline
 * font-size the design set still differs per button, but the shared rule wins
 * on !important, so nothing is left to reconcile.
 *
 * The one thing kept from the design is width:100% on the fund card CTAs; the
 * shared rule sets padding, not width, so those stay full-bleed in their card.
 * They do need border-box, though: width:100% plus the shared rule's 40px of
 * side padding would otherwise measure 80px wider than the card allows. The
 * host theme almost certainly sets it globally, but a CTA breaking out of its
 * card is not worth leaving to that. */
.fdm-give-page a.gv-btn { box-sizing: border-box; }

/* ---- hovers the design described with style-hover ----
 * That is a design-tool attribute with no browser meaning, so the states it
 * described live here. */
.fdm-give-page .gv-card:hover { transform: translateY(-4px); border-color: var(--swgp-gold) !important; }

/* ---- responsive ----
 * The design carries no media queries: it flex-wraps on its own and its
 * headings clamp, so what is left is the handful of fixed values that a phone
 * cannot take, plus the vertical rhythm, which was drawn for a desktop and
 * turns five screens into five near-empty ones on a 375px display. */
/* 1100, not the shared 980. Two columns plus an 84px headline stop fitting well
 * before 980, and waiting for the shared collapse is what let the hero spill. */
@media (max-width: 640px) {
	/* Fund cards: the drawn padding leaves little room at 320px. */
	.fdm-give-page .gv-card { padding: 26px 22px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   The redesign — hero, fund picker, giving screen.
   Values are the design's own; where it used a per-element inline
   style these become one class, but the numbers are unchanged.
   ═══════════════════════════════════════════════════════════════ */

.fdm-give-page {
	--gv-gold: var(--swgp-gold, #e4af54);
	--gv-gold-lit: var(--swgp-gold-light, #e5cf8f);
	--gv-gold-ink: var(--swgp-gold-ink, #1a1206);
	--gv-card-bg: #121110;                    /* --swgp-charcoal-2 in the design system */
	--gv-line: var(--swgp-line-gold-soft, rgba(228, 175, 84, 0.20));
	--gv-line-lit: rgba(228, 175, 84, 0.28);
	--gv-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	/* The header-aligned gutter, but measured off the VIEWPORT.
	 *
	 * The shared --fdm-gutter uses 50%, which every element resolves against
	 * its own containing block. That is right for a section in the flow, and
	 * wrong inside a fixed, full-viewport modal, where it silently resolved
	 * against the wrong box and came out at 98px instead of 48px. 50vw has no
	 * such ambiguity: the modals are the viewport. */
	--gv-gutter: max(24px, calc(50vw - (var(--fdm-mega-max-w, 1440px) / 2 - var(--fdm-mega-pad-h, 48px))));
	/* Above the mega menu, which is --fdm-mega-z (99999) with its panel at +1,
	   and above the admin bar at 100001. A full-screen picker underneath the
	   site header is the bug this avoids. */
	--gv-z: 100050;
}

.fdm-give-page :is(.gv-hero, .gv-modal, .gv-whole) *,
.fdm-give-page :is(.gv-hero, .gv-modal, .gv-whole) *::before,
.fdm-give-page :is(.gv-hero, .gv-modal, .gv-whole) *::after { box-sizing: border-box; }

/* ── shared bits ─────────────────────────────────────── */

.fdm-give-page .gv-eyebrow {
	display: block;
	font-family: var(--gv-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--gv-gold);
}
.fdm-give-page .gv-eyebrow--wide { letter-spacing: 0.36em; margin-bottom: 22px; }

.fdm-give-page .gv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 34px;
	background: var(--gv-gold);
	border: 0;
	border-radius: 999px;
	color: var(--gv-gold-ink);
	font-family: var(--font-body, "Raleway", sans-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: filter 180ms ease, transform 140ms ease;
}
.fdm-give-page .gv-btn:hover { filter: brightness(1.06); }
.fdm-give-page .gv-btn:active { transform: scale(0.98); }

/* ── hero ────────────────────────────────────────────── */

/* 88vh, not 100. A hero exactly the height of the window is a page that looks
   finished: there is no seam at the bottom edge to say anything follows, and
   the eight funds below it are the point of the page. Twelve percent is enough
   to show the top of the next section without the hero losing its stature. */
.fdm-give-page .gv-hero {
	position: relative;
	overflow: hidden;
	min-height: 88vh;
	display: flex;
	align-items: center;
	background: #000;
}
.fdm-give-page .gv-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.fdm-give-page .gv-hero__wash {
	position: absolute;
	inset: 0;
	background:
		/* The right end is darker than it was. That end used to be empty film,
		   and it now carries the giving card: a card over a lit frame reads as
		   a sticker, and the footage behind it competes with the one thing on
		   the page that takes money. */
		linear-gradient(90deg, rgba(0,0,0,0.95) 12%, rgba(0,0,0,0.68) 55%, rgba(0,0,0,0.58) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, #000 100%);
}
/* The design centres a 1240px box. Every other page here lines its content up
 * with the site header instead, which centres --fdm-mega-max-w padded by
 * --fdm-mega-pad-h: 1344px of content at the defaults. Borrowing the header's
 * own variables keeps this page tracking it at every width, and keeps tracking
 * it if the container is ever changed in Menu settings. Same approach as The
 * Problems and Courses. The extra hundred-odd pixels go to the rotator. */
.fdm-give-page .gv-hero__inner {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 90px var(--gv-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(40px, 5vw, 88px);
}
/* The copy needs a measure of its own: the wrapper is 1440px wide and an 82px
   headline running the whole of it is a banner, not a sentence. 920 was that
   measure while the hero was one column; with the giving card back beside it
   the headline gets 760, which still holds it to two lines at every width the
   display size is reached, and the paragraph is capped separately below. */
.fdm-give-page .gv-hero__copy { flex: 1 1 520px; min-width: 0; max-width: 760px; }

.fdm-give-page .gv-hero__h1 {
	margin: 26px 0 24px;
	font-family: var(--font-display, "Raleway", sans-serif);
	font-weight: 700;
	font-size: clamp(38px, 5.4vw, 82px);
	letter-spacing: -0.04em;
	line-height: 0.98;
	color: #fff !important;
	text-wrap: pretty;
}
.fdm-give-page .gv-hero__sub {
	/* 26, not 40: the question below it now carries the gap to the buttons,
	   and 40 plus an eyebrow plus its own margin reads as a break in the
	   column rather than a paragraph and the line under it. */
	margin: 0 0 26px;
	max-width: 470px;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}
/* Tracked a shade tighter than the eyebrow at the top of the hero. At 0.32em a
   six-word question runs past the buttons it belongs to and reads as another
   heading; the top eyebrow is three words and can carry the wider setting. */
.fdm-give-page .gv-hero__ask {
	margin: 0 0 18px;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.62);
}
.fdm-give-page .gv-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}
/* Both actions the same height, here only. The talk pill is 68 because that is
   what its faces measure, and a 56px button beside it reads as two things that
   were meant to line up and did not. The 56 stays everywhere else on the page,
   where nothing sits next to it. */
.fdm-give-page .gv-hero__cta .gv-btn { height: 68px; padding: 0 38px; }

/* ── the giving card, in the hero ──────────────────────
 *
 * Pinned right by margin-left:auto rather than by justify-content, because the
 * copy is allowed to stop short of its 760 and the card should not drift left
 * with it. It is the right edge of the hero it lines up with, which is the
 * same edge the header's own buttons use.
 *
 * Everything inside it is .gv-form and its children, shared with the giving
 * screen. Only what the hero changes is here.
 * ─────────────────────────────────────────────────────── */
.fdm-give-page .gv-hero__aside {
	flex: 0 0 clamp(340px, 27vw, 412px);
	min-width: 0;
	margin-left: auto;
}
.fdm-give-page .gv-form--hero {
	/* Glass rather than the modal's solid panel: this one sits ON the hero
	   film, and a solid block over moving footage reads as something pasted on
	   top of the page rather than part of it. The alpha is high enough that the
	   card is still legible where the blur is not supported. */
	background: rgba(18, 17, 16, 0.9);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	padding: 24px 24px 22px;
	box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
}
.fdm-give-page .gv-form--hero .gv-seg { margin-bottom: 12px; }
.fdm-give-page .gv-form--hero .gv-form__note { margin-bottom: 16px; font-size: 13px; }
.fdm-give-page .gv-form--hero .gv-chips { gap: 8px; margin-bottom: 10px; }
.fdm-give-page .gv-form--hero .gv-chips button { padding: 10px 6px; }
.fdm-give-page .gv-form--hero .gv-amount { margin-bottom: 18px; }
.fdm-give-page .gv-form--hero .gv-amount input { font-size: 22px; padding: 11px 0; }
.fdm-give-page .gv-form--hero .gv-trust { margin-top: 14px; }

/* The problem, chosen here instead of on the way in.
 *
 * A native <select>, not a custom listbox. Eight options is a list the browser
 * already draws well on every device, and the phone's own wheel beats anything
 * built here. appearance:none takes the platform chrome off the closed control
 * so it matches the amount field beside it; color-scheme keeps the OPEN list
 * dark, which is the half that cannot be styled. */
.fdm-give-page .gv-select { position: relative; margin-bottom: 16px; }
.fdm-give-page .gv-select select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: auto;
	background: #0a0a0a;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 14px 46px 14px 16px;
	font-family: var(--font-body, "Raleway", sans-serif);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: #fff;
	color-scheme: dark;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	transition: border-color 160ms ease;
}
.fdm-give-page .gv-select select:hover { border-color: rgba(228, 175, 84, 0.5); }
.fdm-give-page .gv-select__chev {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--gv-gold);
	border-bottom: 2px solid var(--gv-gold);
	transform: rotate(45deg);
	pointer-events: none;
}

/* The whole thing is the button: faces and label inside one pill, rather than
   a row of faces beside an underlined phrase. Two faces and a line of text
   sitting loose in a hero read as a caption, and the underline was doing the
   work a button shape should do. Outlined rather than filled, because the gold
   pill beside it is the primary action and there can only be one of those.

   68px tall, which is not arbitrary: the faces are 58 and the padding is 5, so
   the pill is exactly as tall as its contents and the circles sit flush inside
   the curve. It is taller than the 56px gold button on purpose, and the row
   centres them. */
.fdm-give-page a.gv-talk,
.fdm-give-page a.gv-talk:hover {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	height: 68px;
	padding: 5px 30px 5px 5px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
	color: #fff;
	transition: background-color 180ms ease, border-color 180ms ease, transform 140ms ease;
}
.fdm-give-page a.gv-talk:hover {
	background: rgba(228, 175, 84, 0.12);
	border-color: rgba(228, 175, 84, 0.7);
}
.fdm-give-page a.gv-talk:active { transform: scale(0.98); }
/* The faces overlap, and the FIRST one is meant to be the one you see, so the
   stacking runs the other way to the document order: without this the second
   image sits on top of the first and clips the very face the row is led by.
   Alexis is first in the markup for the same reason. */
/* align-items: center, because the two are no longer the same size. With
   definite heights, stretch behaves like flex-start and the smaller face
   would sit 2px high. */
.fdm-give-page .gv-talk__faces { display: flex; align-items: center; }
.fdm-give-page .gv-talk__faces img {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	/* Both files are square crops already framed on the face, so cover has
	   nothing to crop and this only matters if one is ever replaced with a
	   wider photograph. */
	object-position: center;
	display: block;
	/* The ring separates the two overlapping circles. It was black because they
	   sat on the hero; inside a pill it has to be the pill's own ground, or each
	   face carries a black crescent where the other overlaps it. */
	border: 2px solid #14100b;
	background: #222;
	position: relative;
}
.fdm-give-page .gv-talk__faces img:nth-child(1) { z-index: 3; }
/* 56, not 58. The two are the same size on paper and the right-hand one
   reads larger: its crop is tighter, so the head fills more of the circle,
   and it is the one whose outline is unbroken. Two pixels settles it. */
.fdm-give-page .gv-talk__faces img:nth-child(2) { z-index: 2; width: 56px; height: 56px; }
.fdm-give-page .gv-talk__faces img + img { margin-left: -16px; }
/* No underline. It was standing in for a button, and there is a button now;
   both together is one affordance too many. */
.fdm-give-page .gv-talk__label {
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/* ── the two screens ─────────────────────────────────── */

.fdm-give-page .gv-modal {
	position: fixed;
	inset: 0;
	z-index: var(--gv-z);
	background: #000;
	color: #fff;
	animation: gvIn 240ms ease both;
}
@keyframes gvIn { from { opacity: 0 } to { opacity: 1 } }

/* Both screens set a display value, which outranks the browser's own
   [hidden] { display: none }. Without this they render open on load. */
.fdm-give-page .gv-modal[hidden] { display: none !important; }

.fdm-give-page .gv-x {
	position: absolute;
	top: 26px;
	right: 30px;
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 200ms ease, color 200ms ease;
}
.fdm-give-page .gv-x:hover,
.fdm-give-page .gv-x:focus-visible { border-color: var(--gv-gold); color: var(--gv-gold); }
.fdm-give-page .gv-x--inline { position: static; width: 44px; height: 44px; font-size: 16px; }

/* ── fund picker ─────────────────────────────────────── */

.fdm-give-page .gv-picker { display: flex; overflow: hidden; }
.fdm-give-page .gv-picker__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(56px, 8vh, 90px) var(--gv-gutter) clamp(40px, 6vh, 64px);
}

/* ── the problems as a section, not a screen ───────────
 *
 * Everything above is the modal this used to be: a flex column with its own
 * scroller, sized to the window. As a section it wants none of that, and the
 * rules below undo it rather than the ones above being deleted, because every
 * descendant rule in this file is written against .gv-picker and renaming them
 * all would be a bigger change than the flow itself.
 *
 * scroll-margin-top keeps the heading clear of the sticky header when the
 * hero's button scrolls here, so the script does not have to know how tall the
 * header is.
 * ─────────────────────────────────────────────────────── */
.fdm-give-page .gv-choose {
	display: block;
	overflow: visible;
	background: #000;
	scroll-margin-top: 88px;
}
.fdm-give-page .gv-choose .gv-picker__scroll {
	flex: none;
	overflow: visible;
	overscroll-behavior: auto;
	/* Less at the top than the bottom, which is the opposite of what a section
	   usually wants. The hero above is 88vh, so the first thing over the fold
	   is this padding, and 104px of it read as an empty screen rather than as
	   the beginning of something. */
	padding: clamp(40px, 5.5vh, 64px) var(--gv-gutter) clamp(64px, 9vh, 104px);
}
.fdm-give-page .gv-picker__inner { max-width: none; margin: 0; }
/* One column. It was a flex row holding the heading against a line of small
   print on the right, which capped the headline at about half the width. */
.fdm-give-page .gv-picker__head {
	display: block;
	margin-bottom: clamp(34px, 5vh, 60px);
}
.fdm-give-page .gv-picker__h2 {
	margin: 0;
	font-family: var(--font-display, "Raleway", sans-serif);
	font-weight: 700;
	font-size: clamp(34px, 5.4vw, 84px);
	letter-spacing: -0.04em;
	line-height: 0.98;
	color: #fff !important;
	text-wrap: pretty;
}
/* Two columns, four and four.
 *
 * It was auto-fit at 280px, which gave four across on a desktop and made each
 * card a thumbnail: room for a name and a number, and nothing else. Justin's
 * comment was that he could not see who he would be giving alongside, and at
 * a quarter of the width there was nowhere to put them. At half the width
 * there is, so the people are on the front of the card now and the hover
 * that used to hide them is gone. */
.fdm-give-page .gv-picker__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 760px) {
	.fdm-give-page .gv-picker__grid { grid-template-columns: minmax(0, 1fr); }
}

/* One card, one face, everything on it.
 *
 * There was a cross-fade here: the name and the number, and then on hover the
 * people and the way in. It read well and it hid the wrong half. Two of the
 * five things a visitor needs to decide were only reachable with a cursor,
 * which is no help on a phone and no help to somebody scanning, and Justin's
 * review said so plainly: "the names as you hover is cute but not effective".
 *
 * So the flip, both faces, the hover and focus-within reveals, the
 * pointer-device fallback and the reduced-motion variant are all gone, and
 * what is left is the layout the touch fallback already used: the photograph,
 * the icon, then the name, the number, the people and the link, stacked.
 *
 * The hover LIFT stays. That is an affordance, not a disclosure.
 * ─────────────────────────────────────────────────────── */
.fdm-give-page a.gv-card,
.fdm-give-page a.gv-card:hover {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Taller than the four-across version, because it now carries two people
	   and a link as well as the name and the number. A further 160 on top of
	   that, all of it photograph.
	   
	   It is min-height rather than padding above the heading, and the
	   difference is not stylistic. The copy is anchored to the bottom of the
	   card by margin-top:auto on the body, so the space above it is already
	   free: padding-top on the name makes the BODY taller, the body stays
	   pinned to the bottom, and the words do not move. It would only ever bite
	   where the content outgrew the card, which is a short viewport and not a
	   desktop, so the cards would have quietly grown on some screens and not
	   others. Height on the card is the lever that always acts. */
	min-height: clamp(460px, 44vh, 580px);
	padding: 26px 28px;
	box-sizing: border-box;
	border-radius: 14px;
	border: 1px solid var(--gv-line);
	background: var(--gv-card-bg);
	text-decoration: none;
	color: #fff;
	transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 240ms ease;
}
.fdm-give-page a.gv-card:hover {
	border-color: var(--gv-gold);
	transform: translateY(-4px);
}

/* The photograph is the card's own now, not a face's, since there is only one
   face. In colour since 11 September: these are the frames from The Problems,
   where they run in colour, and two pages showing the same photograph two ways
   is the page arguing with itself. The dim stays, and the values still hold —
   they were set from each frame's luminance, which is what brightness acts on
   whether or not the colour is there. */
.fdm-give-page a.gv-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--gv-card-img);
	background-size: cover;
	/* Centre suits a portrait, which is what seven of the eight are. The
	   eighth is a 2200px-wide room with everything happening in its left half
	   and a black curtain filling the rest, and centred it is a black
	   rectangle: --gv-card-pos, set beside --gv-card-img. */
	background-position: var(--gv-card-pos, center);
	/* 0.8 suits the eight photographs that were here when it was written, whose
	   mean luminance runs 67 to 140. One of them is a film still at 42, and a
	   uniform dim turns that into a black rectangle, so the card can be told
	   otherwise: --gv-card-dim, set beside --gv-card-img. */
	filter: brightness(var(--gv-card-dim, 0.8));
}
/* Heavier at the bottom than the old front face needed, and for a reason: the
   people and the link sit down there now, and a 40px face over a photograph
   is the thing that made the first version of these cards unreadable. */
.fdm-give-page a.gv-card::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Light at the top, and it only gets dark where the words start.
	   The type sits in the bottom half of the card, so that is the only part
	   that has to be near-solid; above it the picture can be a picture. */
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0.10) 0%,
		rgba(0, 0, 0, 0.20) 30%,
		rgba(0, 0, 0, 0.70) 56%,
		rgba(0, 0, 0, 0.95) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.fdm-give-page a.gv-card { transition: none; }
	.fdm-give-page a.gv-card:hover { transform: none; }
}

.fdm-give-page .gv-card__icon {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	width: 34px;
	height: 34px;
	background-image: var(--gv-icon);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.fdm-give-page .gv-card__body { position: relative; z-index: 1; margin-top: auto; display: block; }
.fdm-give-page .gv-card__name {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: clamp(21px, 1.5vw, 25px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
	text-wrap: pretty;
}
/* White, and bigger. At 13.5px and 60% white over a photograph this was the
   one line on the card nobody could read, and it is the line carrying the
   reason to care. The weight comes up with it: 300 at this size over a busy
   frame is thin enough to disappear into it. */
.fdm-give-page .gv-card__stat {
	display: block;
	margin-bottom: 14px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.45;
	color: #fff;
	text-wrap: pretty;
}
/* The back of the card is two people and a way in, and nothing else, so both
   are drawn at a size worth turning the card over for. */
/* "Give alongside", over the faces. White rather than the gold the role above
   it uses: gold on this page is either a label for the thing beside it or
   something to press, and this is neither. It names what the two faces are
   doing there, which a visitor otherwise has to infer. */
.fdm-give-page .gv-card__with {
	display: block;
	margin: 20px 0 12px;
	padding-bottom: 10px;
	/* Raleway rather than the mono, and read as a small title rather than a
	   label: at this size letterspaced uppercase mono would compete with the
	   fund's name three lines above it. Sentence case, and a step below the
	   name in size and weight, so the order down the card stays name, then
	   number, then this, then the people. */
	font-family: var(--font-body, "Raleway", sans-serif);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: #fff;
}

/* A row, not a column. On the back of a card there was a whole face to fill
   and two people stacked at 56px was the point of turning it over; on the
   front of a wide card they are supporting evidence for the fund above them,
   so they sit side by side and take a third of the height they did. */
.fdm-give-page .gv-card__solvers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	/* No top margin: the label above it holds that space now. */
	margin: 0 0 18px;
}
/* Each takes half the row and the job title wraps inside it, rather than the
   pair wrapping onto two rows. Otherwise whether the two people sit side by
   side depends on how long their titles happen to be, and eight cards go
   ragged in eight different ways. */
.fdm-give-page .gv-card__solvers .gv-solver {
	flex: 1 1 42%;
	min-width: 0;
	align-items: flex-start;
	gap: 12px;
}
.fdm-give-page .gv-card__solvers .gv-solver__who span { white-space: normal; }
.fdm-give-page .gv-solver { display: flex; align-items: center; gap: 14px; }
.fdm-give-page .gv-solver__av {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(228, 175, 84, 0.5);
	background-image: var(--gv-av);
	background-size: cover;
	background-position: center 25%;
	font-family: var(--gv-mono);
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--gv-gold);
}
/* No photograph, so initials on a tinted disc instead of an empty ring.
   Nothing on this page uses it now, but the pattern keeps it: a person
   without a headshot is still possible. */
.fdm-give-page .gv-solver__av--initials {
	background-image: none;
	background-color: rgba(228, 175, 84, 0.1);
}
.fdm-give-page .gv-solver__who { min-width: 0; }
.fdm-give-page .gv-solver__who strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #fff;
}
.fdm-give-page .gv-solver__who span {
	display: block;
	font-weight: 300;
	font-size: 13.5px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.68);
}
.fdm-give-page .gv-card__go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15.5px;
	color: var(--gv-gold);
}
/* The arrow only. It was `.gv-card__go span`, which now also caught the two
   spans below. */
.fdm-give-page .gv-card__go > span:last-child { font-size: 19px; }

/* "Give alongside" until the cursor is on the card, then who by name.
 *
 * Not a disclosure: both people are on the card already, in full, with their
 * titles. This says the quiet part of the number above it, that giving here
 * puts you next to Tim and Laila rather than into a fund.
 *
 * The names are aria-hidden and the plain label stays in the accessibility
 * tree, because a screen reader has just read both of them out of the card
 * and a link that renames itself on hover is noise there. On a touch device
 * the label simply never changes, which is why the label has to stand on its
 * own. */
.fdm-give-page .gv-card__go-names { display: none; }
/* A caret while the letters are landing, and nothing once they have. The
   sentence is left-aligned in a box pinned to its finished width, so the
   caret marks the edge of what has been written rather than the edge of the
   box. */
.fdm-give-page .gv-card__go-names.is-typing::after {
	content: "|";
	margin-left: 1px;
	font-weight: 400;
	color: var(--gv-gold-lit, #e5cf8f);
	animation: gvCaret 620ms steps(1, end) infinite;
}
@keyframes gvCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.fdm-give-page .gv-card__go-names.is-typing::after { animation: none; }
}
@media (hover: hover) {
	.fdm-give-page a.gv-card:hover .gv-card__go-say,
	.fdm-give-page a.gv-card:focus-visible .gv-card__go-say { display: none; }
	.fdm-give-page a.gv-card:hover .gv-card__go-names,
	.fdm-give-page a.gv-card:focus-visible .gv-card__go-names {
		/* inline-block so the pinned width applies, and the baseline held so
		   the arrow beside it does not drop. */
		display: inline-block;
		white-space: nowrap;
		vertical-align: baseline;
		text-align: left;
	}
}

/* ── the whole strategy: the last band on the page ─────
 *
 * A dark band, not black, so it reads as a different beat from the problems
 * above it rather than more of the same scroll. The fund's own photograph sits
 * behind it under a heavy wash: enough to feel like a place, not enough to
 * fight the type.
 *
 * The people are drawn with the card's own .gv-solver markup, so a change to an
 * avatar size up there lands here too and the two never drift apart.
 * ─────────────────────────────────────────────────────── */
.fdm-give-page .gv-whole {
	position: relative;
	overflow: hidden;
	background-color: #0b0906;
	/* The wash is a wedge, not a flat tint: near-opaque under the copy on the
	   left and light enough on the right for the photograph to be a photograph.
	   It was heavier when the fund's picture was a close-up of a banknote and
	   the job was to hide it; the crew on location is worth seeing. */
	background-image:
		linear-gradient(100deg, rgba(11, 9, 6, 0.97) 0%, rgba(11, 9, 6, 0.88) 42%, rgba(11, 9, 6, 0.45) 100%),
		var(--gv-whole-img);
	background-size: cover, cover;
	background-position: center, right center;
	border-top: 1px solid rgba(228, 175, 84, 0.22);
}
.fdm-give-page .gv-whole__inner {
	position: relative;
	max-width: none;
	padding: clamp(64px, 9vh, 104px) var(--gv-gutter);
}
/* The copy is held to a measure rather than the gutter, because the gutter is
   1440px wide on a desktop and a paragraph that wide is unreadable. */
.fdm-give-page .gv-whole__copy { max-width: 720px; }
.fdm-give-page .gv-whole__h2 {
	margin: 0 0 20px;
	font-family: var(--font-heading, "Poppins", sans-serif);
	font-weight: 700;
	font-size: clamp(32px, 4.6vw, 66px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #fff;
	text-wrap: balance;
}
.fdm-give-page .gv-whole__body {
	margin: 0 0 18px;
	font-size: clamp(16px, 1.1vw, 18.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	text-wrap: pretty;
}
/* The payoff line, in the body face rather than mono: mono on this page is a
   label voice, worn by the eyebrows, the form labels and the currency mark,
   and a running sentence in it reads as a terminal.
   A shade larger and heavier than the paragraph above it, because it is the
   line the band exists to deliver, and balanced rather than pretty so the two
   clauses break against each other rather than leaving an orphan. */
.fdm-give-page .gv-whole__stat {
	margin: 0 0 30px;
	padding-left: 18px;
	border-left: 2px solid var(--gv-gold);
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: balance;
}
.fdm-give-page .gv-whole__stat em { font-style: normal; color: var(--gv-gold-lit); }
/* Side by side here, where there is room, rather than the stacked column the
   back of a card needs. */
.fdm-give-page .gv-whole__solvers {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin-bottom: 32px;
}
/* The band has a column to itself, so its two faces keep the size the cards
   have just given up. */
.fdm-give-page .gv-whole__solvers .gv-solver__av { width: 56px; height: 56px; }
.fdm-give-page .gv-whole__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}
.fdm-give-page .gv-whole__link {
	font-family: var(--gv-mono);
	font-size: 13.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.7);
	transition: color 160ms ease;
}
.fdm-give-page .gv-whole__link:hover,
.fdm-give-page .gv-whole__link:focus-visible { color: var(--gv-gold); }
/* An arrow leaving the line rather than following it, which is the convention
   for a link that opens elsewhere. */
.fdm-give-page .gv-whole__ext { margin-left: 6px; font-size: 15px; }
/* Said for a screen reader and nobody else: the arrow is decorative, so
   without this the new tab is a surprise. */
.fdm-give-page .gv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ── the giving screen ───────────────────────────────── */

.fdm-give-page .gv-give { overflow-y: auto; overscroll-behavior: contain; }
.fdm-give-page .gv-give__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0;
	background: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0));
}
.fdm-give-page .gv-give__bar-inner {
	box-sizing: content-box;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fdm-give-page .gv-back {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 0;
	font-family: var(--gv-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	transition: color 180ms ease;
}
.fdm-give-page .gv-back:hover { color: var(--gv-gold); }

/* The giving screen runs to 1440px, the same measure as the header, rather than
 * the design's 1080. Three columns need it: a narrow one for what the problem
 * is, then the form and the manager, and at 1240 those last two were down to
 * 428px each. Wider is
 * what a short screen needs: the two columns get their own room, the bio and
 * the intro stop wrapping onto extra lines, and every line saved is a line
 * that is no longer below the fold. It is still a pair rather than two things
 * at opposite ends of a wide screen, which is what the 1080 was protecting;
 * past about 1300 that stops being true.
 *
 * content-box is the point. With border-box the cap and the header gutter both
 * came off the same box, so at 1920 the content was 1080 - 576 = 504px, the
 * two columns had nowhere to go, and the fund manager wrapped underneath the
 * form. content-box makes the number the measure and puts the padding outside
 * it, which is what it was always meant to describe. */
.fdm-give-page .gv-give__inner {
	box-sizing: content-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(10px, 3vh, 40px) clamp(20px, 4vw, 48px) 70px;
}
.fdm-give-page .gv-give__head { margin-bottom: 34px; }
.fdm-give-page .gv-give__head .gv-eyebrow { font-size: 12px; margin-bottom: 14px; }
.fdm-give-page .gv-give__h2 {
	margin: 0 0 16px;
	font-family: var(--font-display, "Raleway", sans-serif);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 56px);
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff !important;
	text-wrap: pretty;
}
.fdm-give-page .gv-give__proof {
	margin: 0;
	max-width: 560px;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}
.fdm-give-page .gv-give__proof em { font-style: normal; color: var(--gv-gold-lit); }

/* The fund's own photograph, under its description.
 *
 * The same file its card carries, so there is one picture per fund on the
 * page rather than two to keep in step. Held to a measure and a 3:2 window,
 * because the eight are not all the same shape and a column that changes
 * height as you move between funds reads as a wobble. Dimmed a little, since
 * it sits under type rather than behind it. */
.fdm-give-page .gv-give__img {
	display: block;
	width: 100%;
	max-width: 420px;
	margin-top: 26px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: 12px;
	border: 1px solid var(--gv-line);
	/* Colour, in step with the card it was opened from. */
	filter: brightness(0.85);
}
/* The script toggles this with `hidden`, and `hidden` loses to any display
   value, which the rule above is. */
.fdm-give-page .gv-give__img[hidden] { display: none !important; }

.fdm-give-page .gv-give__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 3vw, 56px);
}
.fdm-give-page .gv-give__form { flex: 1 1 440px; min-width: 300px; max-width: 540px; }

.fdm-give-page .gv-form {
	background: var(--gv-card-bg);
	border: 1px solid var(--gv-line-lit);
	border-radius: 14px;
	padding: 28px 28px 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.fdm-give-page .gv-form__title {
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
}
.fdm-give-page .gv-form__title em { font-style: normal; color: var(--gv-gold); }
.fdm-give-page .gv-form__note {
	margin: 0 2px 22px;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	text-wrap: pretty;
}
.fdm-give-page .gv-form__label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--gv-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.fdm-give-page .gv-seg {
	display: flex;
	gap: 4px;
	background: #0a0a0a;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 18px;
}
.fdm-give-page .gv-seg button {
	flex: 1;
	padding: 10px 20px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 180ms ease;
}
.fdm-give-page .gv-seg button.is-on { background: var(--gv-gold); color: var(--gv-gold-ink); }

.fdm-give-page .gv-chips[hidden] { display: none !important; }
.fdm-give-page .gv-chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px;
	margin-bottom: 12px;
}
.fdm-give-page .gv-chips button {
	padding: 11px 6px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 160ms ease;
}
.fdm-give-page .gv-chips button.is-on {
	border-color: var(--gv-gold);
	background: rgba(228, 175, 84, 0.14);
	color: var(--gv-gold);
}

.fdm-give-page .gv-amount {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #0a0a0a;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 2px 16px;
	margin-bottom: 24px;
}
.fdm-give-page .gv-amount__cur { font-family: var(--gv-mono); font-size: 18px; color: var(--gv-gold); }
.fdm-give-page .gv-amount__usd {
	font-family: var(--gv-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.4);
}
.fdm-give-page .gv-amount input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	padding: 13px 0;
	font-family: var(--font-body, "Raleway", sans-serif);
	font-weight: 600;
	font-size: 25px;
	color: var(--gv-gold);
	caret-color: var(--gv-gold);
}

.fdm-give-page .gv-give-now {
	width: 100%;
	background: var(--gv-gold);
	color: var(--gv-gold-ink);
	border: none;
	border-radius: 999px;
	padding: 17px;
	font-weight: 700;
	font-size: 15.5px;
	cursor: pointer;
	transition: filter 180ms ease, transform 140ms ease;
}
.fdm-give-page .gv-give-now:hover { filter: brightness(1.06); }
.fdm-give-page .gv-give-now:active { transform: scale(0.98); }

/* Ways of giving that are not a card payment. Rows, not buttons: neither
   should compete with Give now, and the hairline rules read as "other options"
   the same way the support links do elsewhere on the site. */
.fdm-give-page .gv-vehicles {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 18px;
}
.fdm-give-page .gv-vehicles li {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fdm-give-page a.gv-vehicles-link,
.fdm-give-page .gv-vehicles a,
.fdm-give-page .gv-vehicles a:hover {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 2px;
	font-family: var(--gv-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--gv-gold);
	text-decoration: none;
	transition: color 0.18s ease;
}
.fdm-give-page .gv-vehicles a:hover,
.fdm-give-page .gv-vehicles a:focus-visible { color: var(--gv-gold-lit); }
/* Balanced, so a two-line label splits evenly instead of dropping one short
   word onto the second line. */
.fdm-give-page .gv-vehicles__label {
	min-width: 0;
	text-wrap: balance;
}
/* The reassurance line under the DAF label.
 *
 * Everything about it is a reset: the row is uppercase mono with wide tracking,
 * which is right for a label and unreadable for a sentence, and this inherits
 * all of it unless told otherwise. */
.fdm-give-page .gv-vehicles__sub {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body, "Raleway", sans-serif);
	font-weight: 300;
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
	text-wrap: pretty;
}
/* With one row now two lines tall, the arrow belongs on the label's first line
   rather than floating in the middle of the pair. */
.fdm-give-page .gv-vehicles a {
	align-items: flex-start;
}
.fdm-give-page .gv-vehicles a > span[aria-hidden] {
	margin-top: 1px;
}

/* The label sits directly above the field it names, so it does not read as a
   second heading for the chips above it. */
.fdm-give-page .gv-form__label--tight {
	margin-top: 2px;
	margin-bottom: 6px;
}

/* The arrow slides rather than the row moving, so the hairlines stay put. */
.fdm-give-page .gv-vehicles a > span[aria-hidden] {
	flex: 0 0 auto;
	font-size: 14px;
	transition: transform 0.18s ease;
}
.fdm-give-page .gv-vehicles a:hover > span[aria-hidden],
.fdm-give-page .gv-vehicles a:focus-visible > span[aria-hidden] { transform: translateX(4px); }

.fdm-give-page .gv-trust {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 26px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.fdm-give-page .gv-trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--gv-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}
.fdm-give-page .gv-trust em { font-style: normal; color: var(--gv-gold); }

.fdm-give-page .gv-mgr {
	flex: 1 1 400px;
	min-width: 290px;
	max-width: 540px;
	background: var(--gv-card-bg);
	border: 1px solid var(--gv-line-lit);
	border-radius: 14px;
	overflow: hidden;
}
/* A height that tracks the window, not a ratio.
 *
 * A ratio ties the portrait's height to the column's width, so widening the
 * column made this card taller and undid the point of widening it. Capping it
 * with max-height was worse: against aspect-ratio the cap shrinks the WIDTH to
 * keep the ratio, so the photograph stopped filling the card and left a black
 * strip down one side.
 *
 * A plain height in vh fills the width at every size, crops rather than
 * squashes because the image is a cover background, and is shorter on exactly
 * the screens that need the room. The crop comes off the bottom of a
 * head-and-shoulders portrait, which is why the focal point is at 20%. */
.fdm-give-page .gv-mgr__photo {
	height: clamp(200px, 26vh, 340px);
	background-size: cover;
	background-position: center 20%;
	background-color: #181818;
}
.fdm-give-page .gv-mgr__body { padding: 28px 30px 32px; }
/* The card with no manager yet. No photograph, so the body is the whole card
   and needs the padding the picture was holding open. */
.fdm-give-page .gv-mgr.is-waiting .gv-mgr__body { padding-top: 34px; }
.fdm-give-page .gv-mgr__photo[hidden] { display: none !important; }
.fdm-give-page .gv-mgr__cta[hidden] { display: none !important; }
.fdm-give-page .gv-mgr__bio[hidden] { display: none !important; }
/* Said where the button would be, in the muted weight of a fact rather than
   the gold of something to press. */
.fdm-give-page .gv-mgr__soon {
	margin: 0;
	font-family: var(--gv-mono);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}
.fdm-give-page .gv-mgr__soon[hidden] { display: none !important; }
.fdm-give-page .gv-mgr__body .gv-eyebrow { font-size: 11.5px; letter-spacing: 0.16em; margin-bottom: 14px; }
.fdm-give-page .gv-mgr__name {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 40px);
	letter-spacing: -0.035em;
	line-height: 1;
	color: #fff;
}
/* The fund, on top, in the eyebrow's treatment: gold mono small caps. It is
   the line a visitor on this card is looking for, and the panel this card
   matches leads with it too.

   The job title takes the quiet line under the name. Two facts, two
   treatments; in the same treatment they read as one sentence wrapping, which
   is the confusion the separation exists to end. */
.fdm-give-page .gv-mgr__funds {
	margin: 0 0 14px;
	font-family: var(--gv-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--gv-gold);
}
.fdm-give-page .gv-mgr__funds[hidden] { display: none !important; }
/* And the title, no longer an eyebrow whatever the class says. */
.fdm-give-page .gv-mgr__body .gv-eyebrow.gv-mgr__role {
	display: block;
	margin: -6px 0 16px;
	font-family: var(--font-body, "Raleway", sans-serif);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.72);
}

.fdm-give-page .gv-mgr__bio {
	margin: 0 0 22px;
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
	text-wrap: pretty;
}
/* The manager's real availability, in the card.
 *
 * Four times at most. More turns the card into a calendar and it is not one;
 * the link underneath goes to the rest of the diary. Two columns so four times
 * are two tidy rows rather than a ragged wrap, and tabular numerals so 9:00
 * and 11:30 line up. */
.fdm-give-page .gv-mgr__slots {
	display: block;
	margin-bottom: 18px;
}
.fdm-give-page .gv-mgr__slots-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--gv-mono);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
.fdm-give-page .gv-mgr__times {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.fdm-give-page .gv-mgr__time {
	padding: 10px 8px;
	background: transparent;
	border: 1px solid rgba(228, 175, 84, 0.34);
	border-radius: 10px;
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 160ms ease, border-color 160ms ease;
}
.fdm-give-page .gv-mgr__time:hover {
	background: rgba(228, 175, 84, 0.14);
	border-color: var(--gv-gold);
}
.fdm-give-page .gv-mgr__slots[hidden] { display: none !important; }

.fdm-give-page a.gv-mgr__cta,
.fdm-give-page a.gv-mgr__cta:hover {
	display: inline-block;
	font-weight: 700;
	font-size: 16px;
	color: var(--gv-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(228, 175, 84, 0.6);
	padding-bottom: 6px;
}
.fdm-give-page a.gv-mgr__cta:hover { color: var(--gv-gold-lit); }

/* The portal host. It exists only to keep the two screens inside the scope
   their styles are written against, so it must not lay anything out itself:
   no width, no breakout margins, no gutter, and no box in the flow. */
.fdm-give-page.fdm-give-portal {
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	zoom: normal;
}

/* Scroll lock while either screen is up. Set on <html> by the section script. */
html.gv-locked, html.gv-locked body { overflow: hidden !important; }

/* ── narrower ────────────────────────────────────────── */

@media (max-width: 980px) {
	/* The 100vh hero was released to content height here because the rotator
	   beside the copy supplied plenty of it. With that gone, one paragraph and
	   two buttons over a video is a 440px band rather than a hero, so it keeps
	   a floor of its own. */
	.fdm-give-page .gv-hero { min-height: 62vh; }
	/* 120 at the top, not 70. The header is a fixed bar on a phone and the hero
	   runs under it, so 70 put the eyebrow hard against the menu: the first
	   line of the page and the last thing above it, touching. The desktop
	   number is 90 and it does not have this problem, because the bar is
	   shorter and the copy starts lower. */
	.fdm-give-page .gv-hero__inner { padding: 120px clamp(20px, 5vw, 48px) 70px; }
	/* The card stacks under the copy rather than squeezing beside it, and stops
	   being pinned right: a 400px card held to the right edge of a phone-width
	   column is a card that missed its column. */
	.fdm-give-page .gv-hero__aside { flex: 1 1 100%; margin-left: 0; max-width: 480px; }
	.fdm-give-page .gv-give__cols { gap: 28px; }
	.fdm-give-page .gv-mgr { max-width: none; }
}
@media (max-width: 620px) {
	/* Two columns of a 23-character mono label do not fit a phone. */
	.fdm-give-page .gv-vehicles { grid-template-columns: minmax(0, 1fr); }
	.fdm-give-page .gv-vehicles a { font-size: 12px; letter-spacing: 0.16em; }
	.fdm-give-page .gv-hero__cta { gap: 18px; }
	.fdm-give-page .gv-btn { width: 100%; }
	/* Both actions full width, so the hero ends in two stacked buttons rather
	   than one button and something that looks like a caption. */
	.fdm-give-page a.gv-talk { width: 100%; justify-content: center; padding-right: 22px; }
	.fdm-give-page .gv-picker__head { gap: 14px; }
	.fdm-give-page .gv-picker__note { padding-bottom: 0; }
	.fdm-give-page .gv-x { top: 14px; right: 16px; width: 42px; height: 42px; }
	.fdm-give-page .gv-chips { grid-template-columns: repeat(2, 1fr); }
	.fdm-give-page .gv-trust { gap: 14px; }
	.fdm-give-page .gv-form { padding: 22px 20px 20px; }
	.fdm-give-page .gv-hero__aside { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fdm-give-page a.gv-card,
	.fdm-give-page .gv-modal { transition: none !important; animation: none !important; }
	.fdm-give-page a.gv-card:hover { transform: none !important; }
}

/* Focus lands on "All problems" whenever the giving screen opens, so its ring
   is seen every time. The browser default is a blue that belongs to no part of
   this page. */
/* ── short screens ──────────────────────────────────────
 *
 * A 1440x800 laptop cut 178px off the bottom of this screen, which is the
 * trust line and part of the two giving-vehicle rows: the reassurance, hidden
 * below the fold of the thing it is meant to reassure somebody about. The
 * modal scrolls, so nothing was lost, but a form somebody has to scroll to
 * finish is a form fewer people finish.
 *
 * Keyed on the viewport's HEIGHT, not its width. Width is not the problem
 * here, and a laptop and a phone can share a height while needing completely
 * different layouts.
 *
 * Everything below is vertical rhythm, nothing structural: the headline comes
 * down, the paddings and margins tighten, the portrait crops shorter. No
 * element moves and nothing is hidden.
 * ─────────────────────────────────────────────────────── */
@media (max-height: 880px) {
	.fdm-give-page .gv-give__inner { padding-top: 14px; padding-bottom: 34px; }
	.fdm-give-page .gv-give__head { margin-bottom: 20px; }
	.fdm-give-page .gv-give__h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }
	.fdm-give-page .gv-give__proof { font-size: 15.5px; }
	.fdm-give-page .gv-form { padding: 20px 22px 20px; }
	.fdm-give-page .gv-form__title { font-size: 21px; margin-bottom: 12px; }
	.fdm-give-page .gv-form__note { margin-bottom: 14px; font-size: 13.5px; }
	.fdm-give-page .gv-seg { margin-bottom: 12px; }
	.fdm-give-page .gv-chips button { padding: 9px 6px; }
	.fdm-give-page .gv-mgr__body { padding: 20px 24px 22px; }
	.fdm-give-page .gv-trust { margin-top: 12px; }
	/* The times earn their space here more than the portrait does, so the
	   portrait is what gives it up. */
	.fdm-give-page .gv-mgr__photo { height: 178px; }
	.fdm-give-page .gv-mgr__slots { margin-bottom: 14px; }
	.fdm-give-page .gv-mgr__bio { margin-bottom: 14px; }
}

/* ── how the three columns assemble ────────────────────
 *
 * Stacked, then two, then three. The heading is a grid item rather than a block
 * above the grid, so it can move from spanning the top to being the narrow
 * first column without the markup changing.
 *
 * Three columns is not decoration: it is the horizontal room this screen was
 * wasting, and moving the heading out of the vertical flow takes about 150px
 * off the height, which is the same problem as the cut-off further up this
 * file. What the problem is, what to give, who to talk to, left to right.
 *
 * These come after the max-height block on purpose. Both want a say in the
 * heading's bottom margin, and on a wide short screen the answer is this one:
 * the gap handles the spacing once the heading is a column of its own.
 * ─────────────────────────────────────────────────────── */
@media (min-width: 880px) {
	.fdm-give-page .gv-give__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.fdm-give-page .gv-give__head { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
	.fdm-give-page .gv-give__cols {
		/* Wider than it needs to be for the copy, because the headline in it is
		   a display size: at 280px a 55px headline wraps to four lines and
		   reads as a stack of words rather than a sentence. */
		grid-template-columns: minmax(260px, 400px) minmax(0, 1fr) minmax(0, 1fr);
	}
	.fdm-give-page .gv-give__head {
		grid-column: auto;
		/* The grid's gap is the spacing now. A margin here would push the form
		   and the manager down by it as well, since all three are in one row. */
		margin-bottom: 0 !important;
	}
	/* A display headline, not a label. It came down to 29px when this became a
	   column and that was too far: it is the first thing on the screen and it
	   was quieter than the form beside it. */
	.fdm-give-page .gv-give__h2 { font-size: clamp(34px, 3.8vw, 56px); }
	.fdm-give-page .gv-give__proof { max-width: none; }
}

.fdm-give-page :is(.gv-back, .gv-btn, .gv-card, .gv-give-now, .gv-talk,
	.gv-seg button, .gv-chips button, .gv-mgr__cta,
	.gv-vehicles a):focus-visible {
	outline: 2px solid var(--gv-gold);
	outline-offset: 3px;
}
.fdm-give-page .gv-amount:focus-within {
	border-color: rgba(228, 175, 84, 0.55);
}

/* ── imagine the impact ────────────────────────────────
 *
 * A gift on a logarithmic slider, and what that gift does in each fund.
 *
 * Arrived as a Divi code module with its own font imports, its own #id rules
 * and a block of !important overrides stacked on top of those. None of that is
 * here: the fonts are the page's, the type is the page's own scale, and the
 * rules are ordinary rules in this file. The left column is the part that most
 * needed it, and it now reads exactly like the picker's head above it, which is
 * the section it follows.
 * ─────────────────────────────────────────────────────── */

/* A band of its own, not more black.
 *
 * Between the eight funds above and the SWGP band below, a section on the same
 * flat black read as a continuation of the fund grid rather than as its own
 * beat. A slightly lifted ground and a hairline at each edge is enough: this
 * page separates its sections by surface, not by rules or gaps. */
.fdm-give-page .gv-impact {
	background:
		radial-gradient(120% 90% at 78% 0%, rgba(228, 175, 84, 0.05), rgba(228, 175, 84, 0) 60%),
		#0a0a0a;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: clamp(56px, 8vh, 96px) 0 clamp(48px, 7vh, 88px);
}
/* The gutter goes on the inner element, and that is not a style choice: the
   page zeroes side padding on every top-level child with !important, because
   each of its sections paints edge to edge and pads its own contents. A
   section that puts its gutter on itself has no gutter at all, which is what
   this one had. */
.fdm-give-page .gv-impact__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(28px, 4vw, 64px);
	padding-left: var(--gv-gutter);
	padding-right: var(--gv-gutter);
}

/* The ask. The page's eyebrow, the page's headline weight and tracking, and
   the amount in the page's gold: it was 30px at weight 300, which is a
   different page's voice. */
.fdm-give-page .gv-impact__ask {
	flex: 1 1 340px;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.fdm-give-page .gv-impact__lead,
.fdm-give-page .gv-impact__amount {
	margin: 0;
	font-family: var(--font-display, "Raleway", sans-serif);
	font-weight: 700;
	font-size: clamp(30px, 3.4vw, 46px);
	letter-spacing: -0.035em;
	line-height: 1.04;
	color: #fff;
}
.fdm-give-page .gv-impact__amount {
	color: var(--gv-gold);
	/* Tabular, so the headline does not jump sideways while somebody drags. */
	font-variant-numeric: tabular-nums;
	font-size: clamp(44px, 5vw, 68px);
	letter-spacing: -0.045em;
	margin: 2px 0;
}
.fdm-give-page .gv-impact__body {
	margin: 22px 0 0;
	max-width: 40ch;
	font-weight: 300;
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}
/* The page's own button, and a real one: it goes back up to the eight funds,
   which is the next step for somebody who has just watched a number move. */
.fdm-give-page .gv-impact__cta {
	margin-top: 28px;
	align-self: flex-start;
	text-decoration: none;
}

/* The slider. Vertical beside the numbers, horizontal under them on a phone;
   the script reads the track's shape rather than the breakpoint. */
.fdm-give-page .gv-impact__slider {
	flex: 0 0 auto;
	align-self: stretch;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 20px 0 4px;
}
.fdm-give-page .gv-impact__lab {
	font-family: var(--gv-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.5);
}
.fdm-give-page .gv-impact__track-wrap {
	flex: 1;
	width: 44px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	cursor: pointer;
	/* Or the browser scrolls the page instead of moving the thumb. */
	touch-action: none;
}
.fdm-give-page .gv-impact__track {
	position: relative;
	width: 4px;
	height: 100%;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}
.fdm-give-page .gv-impact__thumb {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--gv-gold);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	cursor: grab;
	outline: none;
}
.fdm-give-page .gv-impact__thumb:focus-visible {
	box-shadow: 0 0 0 4px rgba(228, 175, 84, 0.28), 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* The funds. One row per fund: icon, name, and the figure on the right, which
   is the shape that fits eleven of them on a screen without becoming a wall of
   cards. */
.fdm-give-page .gv-impact__funds {
	flex: 3 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.fdm-give-page .gv-impact__head {
	font-family: var(--gv-mono);
	font-size: 12.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.fdm-give-page .gv-impact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 12px;
}
/* minmax on BOTH text columns, not auto on the figure.
   auto sized the figure's column to its widest label, so a label like 'pieces
   of exploitive content removed' took the row and printed itself over the
   fund's name instead of wrapping. Given a share of the row it wraps, which is
   what it should have done. */
.fdm-give-page .gv-impact__card {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) minmax(0, 46%);
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid rgba(228, 175, 84, 0.2);
	border-radius: 14px;
	background: #121110;
}
.fdm-give-page .gv-impact__ico {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgba(228, 175, 84, 0.1);
	position: relative;
	flex: none;
}
/* The artwork is already gold on transparent, so it is drawn rather than
   masked: the same way this page draws the icons on its fund cards. A mask
   would work too, and did nowhere near reliably enough to be worth the second
   mechanism on one page. */
.fdm-give-page .gv-impact__ico::after {
	content: "";
	position: absolute;
	inset: 9px;
	background-image: var(--gv-imp-ico);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.fdm-give-page .gv-impact__name {
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: #fff;
	/* balance, not pretty: these are two- and three-word labels, and the
	   default left an ampersand alone on its own line in
	   'Bible Access & Engagement'. */
	text-wrap: balance;
}
.fdm-give-page .gv-impact__kpis {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: right;
	min-width: 0;
	/* So a long label wraps inside its own column rather than reaching across
	   the row. */
	overflow-wrap: break-word;
}
.fdm-give-page .gv-impact__kpi + .gv-impact__kpi {
	padding-top: 10px;
	border-top: 1px solid rgba(228, 175, 84, 0.18);
}
.fdm-give-page .gv-impact__count {
	display: block;
	font-weight: 700;
	font-size: 25px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--gv-gold);
	font-variant-numeric: tabular-nums;
}
.fdm-give-page .gv-impact__clabel {
	display: block;
	margin-top: 3px;
	font-weight: 300;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.66);
}

/* A fund with no figure yet says so, in a pill rather than as a number nobody
   can stand behind, and the whole row steps back a little. */
.fdm-give-page .gv-impact__card.is-soon { opacity: 0.72; }
.fdm-give-page .gv-impact__soon {
	display: inline-block;
	font-family: var(--gv-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(228, 175, 84, 0.6);
	border: 1px solid rgba(228, 175, 84, 0.28);
	border-radius: 999px;
	padding: 6px 12px;
	white-space: nowrap;
}

/* The SWGP row takes the full width and carries a line of explanation, because
   it is the only one whose number is about the other ten. */
.fdm-give-page .gv-impact__card--wide {
	grid-column: 1 / -1;
	grid-template-columns: 40px minmax(0, 1fr) minmax(0, 30%);
	grid-template-areas:
		"ico name kpis"
		"ico text kpis";
	align-items: center;
	row-gap: 4px;
}
.fdm-give-page .gv-impact__card--wide .gv-impact__ico { grid-area: ico; }
.fdm-give-page .gv-impact__card--wide .gv-impact__name { grid-area: name; }
.fdm-give-page .gv-impact__card--wide .gv-impact__wtext { grid-area: text; }
.fdm-give-page .gv-impact__card--wide .gv-impact__kpis { grid-area: kpis; }
.fdm-give-page .gv-impact__wtext {
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.66);
}

/* ── the slider lies down ──
   Below 980 the column beside the numbers becomes a bar under them: a 380px
   vertical track next to a stack of eleven rows is a track taller than the
   thing it controls. */
@media (max-width: 980px) {
	.fdm-give-page .gv-impact__ask { max-width: none; }
	.fdm-give-page .gv-impact__slider {
		flex-direction: row;
		width: 100%;
		align-self: auto;
		min-height: 0;
		padding: 0;
		gap: 16px;
	}
	/* $5K first, then the track, then $1M: left to right is small to large,
	   which is the opposite of the vertical order and the reason the labels are
	   ordered by CSS rather than by markup. */
	.fdm-give-page .gv-impact__lab:first-child { order: 3; }
	.fdm-give-page .gv-impact__lab:last-child { order: 1; }
	.fdm-give-page .gv-impact__track-wrap {
		order: 2;
		flex: 1;
		width: auto;
		height: 44px;
		align-items: center;
		justify-content: stretch;
	}
	.fdm-give-page .gv-impact__track { width: 100%; height: 4px; }
}

@media (max-width: 620px) {
	.fdm-give-page .gv-impact__card,
	.fdm-give-page .gv-impact__card--wide {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas:
			"ico name"
			"ico text"
			"kpis kpis";
		row-gap: 10px;
	}
	.fdm-give-page .gv-impact__kpis { grid-area: kpis; text-align: left; }
	.fdm-give-page .gv-impact__count { font-size: 22px; }
}