/* 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: the-problems ═══ */
/* ═══════════════════════════════════════════════════════════════
   The Problems — funds/the-problems/page.css
   Appended after shared/fund-page.css at push time, so everything
   here wins on source order at equal specificity.

   The page keeps .fdm-fund-page (that is what scopes the --swgp-*
   palette, the type tokens and the Divi resets) but opts out of the
   shared fund *composition*, which assumes the guide-rail template.
   ═══════════════════════════════════════════════════════════════ */

/* ---- 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 sections already carry their own backgrounds
 * and their own centred 1240px wrapper, so all three fight it. Drop the
 * lot for this template only.
 *
 * The class is repeated in the selector below, deliberately. The claim this
 * comment used to make, that .fdm-fund-page.fdm-problems-page > * is "one class
 * more specific" than the shared nth-child rules, was wrong twice over:
 * :nth-child() is itself worth a class, so the plain rule is (0,2,0) and this
 * only ever tied it and won on source order. Then a second rule arrived,
 * :nth-child(2 of :not(style):not(script)), and that pseudo-class also carries
 * the specificity of its argument, making it (0,2,1) and unbeatable by a tie.
 *
 * So the second and third element children of this page kept the band
 * treatment: #bible-poverty and #gospel-poverty rendered 96px wider than every
 * other section, shifted 48px left, their background photographs inset 60px and
 * 120px narrower than their neighbours, and the page scrolled sideways by 48px.
 * The header of every other problem lined up and those two did not.
 *
 * Repeating the class makes this (0,3,0), which beats both. Do not "tidy" it. */
.fdm-fund-page.fdm-problems-page { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.fdm-fund-page.fdm-problems-page.fdm-problems-page > * {
	max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important;
	padding-left: 0 !important; padding-right: 0 !important;
}

/* ---- render at 1:1 ----
 * The shared CSS applies zoom:1.08 to lift the fund template, which was
 * drawn compressed. This page was not: it ships explicit type scales and
 * vw-based clamps measured against a 1240px canvas, and the zoom throws
 * both off. 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-problems-page {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body:has(.fdm-problems-page) { background: #000; }
body:has(.fdm-problems-page) :is(#page-container, #main-content, .et_pb_section:has(.fdm-problems-page)) { background: #000 !important; }
body:has(.fdm-problems-page) :is(.et_pb_section, .et_pb_row, .et_pb_code):has(.fdm-problems-page) {
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* ---- content lines up with the header ----
 * The design was drawn in a centred 1240px box with 48px of its own padding.
 * The site header is not that box: it centres a --fdm-mega-max-w container
 * and pads it by --fdm-mega-pad-h, so the logo sits at
 * (page - container) / 2 + pad from the left and the last menu button sits
 * the same distance from the right. A 1240px box is narrower than that, so
 * every section drifted inward of both.
 *
 * Borrow the menu's own variables (the menu module emits them on :root) and
 * the page tracks the header at every width, and keeps tracking it if the
 * container width is ever changed in Menu settings. A fixed inset would only
 * be right at one window size. Fallbacks cover a site with no menu module.
 * This is the same formula the Courses page uses. */
.fdm-problems-page :is(.tp-wrap, .tp-cta) {
	max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important;
	padding-left: var(--fdm-gutter) !important;
	padding-right: var(--fdm-gutter) !important;
}

/* ---- buttons keep the design's own pill ----
 * The shared CSS rewrites every [style*="radius-pill"] CTA to the Divi
 * button (Raleway 700, sentence case, 18px/40px) so fund pages match the
 * theme. This page's whole language is mono + uppercase — its eyebrows,
 * badges and category labels all sit on the same track — and a sentence
 * case Raleway pill reads as a foreign object in it. Restore the spec. */
.fdm-problems-page a.tp-btn {
	font-family: var(--font-mono) !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	border-radius: 999px !important;
}
.fdm-problems-page a.tp-btn { font-size: 16px !important; padding: 13px 26px !important; }
.fdm-problems-page a.tp-btn[style*="font-size:18px"] { font-size: 18px !important; padding: 17px 36px !important; }
.fdm-problems-page a.tp-btn--primary:hover { filter: brightness(1.06); }
.fdm-problems-page a.tp-btn--outline:hover {
	background: var(--swgp-tint-gold) !important;
	border-color: var(--swgp-gold) !important;
	filter: brightness(1.2);
}

/* ---- category pills (hero) ----
 * style-hover is a design-tool attribute with no browser meaning; the
 * hover it described lives here. */
.fdm-problems-page a.tp-pill:hover {
	color: var(--swgp-gold) !important;
	border-color: var(--swgp-line-gold) !important;
}

/* ---- problem cards ----
 * Only the launched funds and Sports Evangelism are links; the rest are
 * plain divs, so the lift is on .tp-card alone. */
.fdm-problems-page a.tp-card {
	text-decoration: none;
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 220ms ease;
}
.fdm-problems-page a.tp-card:hover {
	transform: translateY(-4px);
	border-color: var(--swgp-gold) !important;
}

/* ---- the badge grows an arrow on card hover ----
 * The revised design puts the arrow inside the gold badge rather than beside
 * it, so it reads as the badge extending rather than as a second element
 * appearing. Animating max-width (not width) keeps the badge's resting size
 * measured from its own text, so nothing has to be hard-coded per label. */
.fdm-problems-page .tp-arrow {
	display: inline-block;
	overflow: hidden;
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: max-width 220ms ease, margin-left 220ms ease, opacity 200ms ease, transform 200ms ease;
}
.fdm-problems-page a.tp-card:hover .tp-arrow,
.fdm-problems-page a.tp-card:focus-visible .tp-arrow {
	max-width: 1.4em;
	margin-left: 0.5em;
	opacity: 1;
	transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
	.fdm-problems-page .tp-arrow { transition: none; }
}

/* ---- the category header is a full-width photograph ----
 * The photograph runs the full width of the section as its ground, and a
 * gradient over the left carries the copy. The picture is a real <img> rather
 * than a CSS background for two reasons: it has to become an ordinary picture
 * again on a phone, and an <img> is what can lazy-load.
 *
 * The section paints its own ground (black, or charcoal on the alternating
 * ones), so the scrim has to resolve to whichever one it sits on or the band
 * would show a seam at its top and bottom edges. --tp-ground carries that. */
.fdm-problems-page section { --tp-ground: var(--swgp-black, #000); }
.fdm-problems-page section[style*="charcoal-3"] { --tp-ground: var(--swgp-charcoal-3, #0f0f0f); }

/* The band closes on a labelled divider rather than a bare rule. A plain
 * hairline is the same device that separates sections, so it read as a
 * boundary and the cards below looked like a new block. "The Funds" names
 * what follows instead, which ties the two together rather than parting them.
 * The photograph runs on behind it, so the rule sits over the picture rather
 * than under it. */
.fdm-problems-page .tp-band { position: relative; overflow: hidden; }
.fdm-problems-page .tp-band__rule,
.fdm-problems-page .tp-rule {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
}
.fdm-problems-page .tp-band__rule span,
.fdm-problems-page .tp-rule span {
	flex: none;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--swgp-text, #fff);
}
.fdm-problems-page .tp-band__rule::after,
.fdm-problems-page .tp-rule::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--swgp-line);
}
/* The second divider inside a category, naming the problems still ahead. Sits
 * on the ground rather than over the photograph, so it takes its own air. */
.fdm-problems-page .tp-rule--soon { margin: 46px 0 22px; }
/* Both dividers read white: they are headings for what follows, not captions. */
.fdm-problems-page .tp-rule--soon span { color: var(--swgp-text, #fff); }
.fdm-problems-page .tp-rule--soon::after { background: var(--swgp-line-soft); }
.fdm-problems-page .tp-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Black and white. The page is a near-monochrome system with gold as its
	 * only accent, and ten full-colour photographs were the loudest thing on
	 * it. The solver headshots keep their colour: those are people. */
	filter: grayscale(1);
}
/* A couple of these photographs put their subject just left of centre, where
 * the copy column reaches it. Nudging the picture right clears it. object-position
 * cannot do this -- the band is wider than the images, so cover already shows
 * the full width and there is nothing left to pan. The gap this opens on the
 * left falls under the opaque part of the gradient, and the 75px pushed off
 * the right is clipped by the band.
 *
 * Desktop only: stacked, the picture is an ordinary image with no scrim to
 * hide the gap behind. */
@media (min-width: 981px) {
	.fdm-problems-page #isolation .tp-band__img,
	.fdm-problems-page #vulnerability .tp-band__img { transform: translateX(75px); }
}

/* Opaque at the left so the copy reads on the section's own ground, then away
 * to nothing by the right edge. The stops are weighted to the left because the
 * copy column is the left ~55%: the picture gets the rest to itself. */
.fdm-problems-page .tp-band__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			var(--tp-ground) 0%,
			var(--tp-ground) 34%,
			rgba(0, 0, 0, 0.78) 56%,
			rgba(0, 0, 0, 0.40) 76%,
			rgba(0, 0, 0, 0.10) 92%,
			rgba(0, 0, 0, 0) 100%);
}
.fdm-problems-page .tp-band__inner { position: relative; }
/* The copy stays inside the opaque half rather than running across the join. */
.fdm-problems-page .tp-band__inner > div { max-width: 54%; }
.fdm-problems-page .tp-band__inner p { max-width: none !important; }

/* ---- on a phone it goes back to being a picture ----
 * A photograph behind text is unreadable at this width whatever the scrim
 * does, and cropping a landscape photo to a narrow column throws away most
 * of the subject. So the band stops being a stage: the image becomes an
 * ordinary picture under the copy, which is what it was before. */
@media (max-width: 980px) {
	/* No rule here: stacked, the picture has its own rounded edge and there is
	 * no photograph running to the section edge for a line to close off. */
	.fdm-problems-page .tp-band { display: flex; flex-direction: column; overflow: visible; }
	.fdm-problems-page .tp-band__scrim { display: none; }
	.fdm-problems-page .tp-band__inner { order: 1; padding-bottom: 28px !important; }
	.fdm-problems-page .tp-band__rule { order: 3; padding-top: 30px !important; padding-bottom: 0 !important; }
	.fdm-problems-page .tp-band__inner > div { max-width: none; }
	.fdm-problems-page .tp-band__img {
		position: static;
		order: 2;
		height: 260px;
		border-radius: 14px;
		margin-left: var(--fdm-gutter);
		margin-right: var(--fdm-gutter);
		width: auto;
	}
}
@media (max-width: 740px) {
	.fdm-problems-page .tp-band__img { height: 200px; }
}

/* ---- hero clears the header ----
 * The site header is fixed and transparent over the top of the page, so the
 * design's own 104px is measured from the page edge, not from the bottom of
 * the bar. Another 50px puts real air between the menu and the eyebrow. */
.fdm-problems-page #top .tp-wrap { padding-top: 154px !important; }
/* The 32px admin bar pushes the fixed header down by its own height, so a
 * logged-in editor needs that much again to keep the same gap. */
body.admin-bar .fdm-problems-page #top .tp-wrap { padding-top: 186px !important; }

/* ---- card columns ----
 * The design grid is repeat(auto-fill, minmax(310px, 1fr)), which was drawn
 * against its own 1240px box. Against the header's wider container it fits a
 * fourth track, and a quarter-width card is narrower than the widest badge
 * ("Fund & Community Launched" is ~271px at 13px mono with 0.16em tracking),
 * so the badge wrapped to two lines and squared off into a block.
 *
 * Pin the count instead of letting auto-fill decide. Each step is the width
 * at which that many cards still leave the badge a single line, so the badge
 * can never be the thing that decides the layout. This also holds the
 * design's 3-up rhythm on desktop rather than drifting to 4-up. */
.fdm-problems-page .tp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1080px) {
	.fdm-problems-page .tp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
	.fdm-problems-page .tp-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- launched and unlaunched are separate grids ----
 * The solver faces made a launched card roughly twice the height of a Coming
 * Soon one. Sharing a grid, either the short cards inflated to match (a badge
 * stranded at the bottom of an empty box) or the row went ragged and left a
 * hole under them. Neither reads well.
 *
 * Each section that has both now emits two .tp-cards grids, launched first,
 * so the unlaunched cards start on a fresh row. Within a grid the cards are
 * comparable again, so they can go back to matching each other's height --
 * which is why there is no align-items override here. */
.fdm-problems-page .tp-cards + .tp-cards { margin-top: 18px; }

/* ---- responsive ----
 * The design carries no media queries; it was drawn at one width. These
 * are the collapses it implies, nothing more. */
@media (max-width: 1024px) {
	/* Neither .tp-intro nor .tp-head is listed any more. The hero is one
	 * left-aligned column at every width, and the category header is now a
	 * photographic band whose own collapse is handled above. */
	.fdm-problems-page .tp-cta { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}
@media (max-width: 740px) {
	/* Only the vertical rhythm tightens; the sides stay on --fdm-gutter so the
	 * content keeps tracking the header's own mobile padding. */
	/* Scoped to section, not .tp-wrap, so it cannot undercut the hero's
	 * header clearance above (the hero's wrapper lives in a <header>). */
	.fdm-problems-page section .tp-wrap { padding-top: 64px !important; padding-bottom: 56px !important; }
	.fdm-problems-page #top .tp-wrap { padding-top: 118px !important; padding-bottom: 64px !important; }
	.fdm-problems-page .tp-cta { padding-top: 72px !important; padding-bottom: 72px !important; }
	.fdm-problems-page h1 { font-size: clamp(40px, 12vw, 64px) !important; }
	/* The figures read inline, numeral then label. On a phone the 150px numeral
	 * box plus a 24px gap leaves too little for the label, so the numeral drops
	 * to a size whose box can shrink with it. */
	/* Stacked figures: side by side is too tight for a 96px numeral on a phone,
	 * so they go one above the other and the numeral comes down with them. */
	.fdm-problems-page .tp-stats { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
	.fdm-problems-page .tp-fig .tp-stat { font-size: 58px !important; }
	.fdm-problems-page .tp-fig__label { font-size: 17px !important; margin-top: 12px !important; }
	/* The legend's four items will not sit on one line here; they wrap to a
	 * stack, and the separators would then dangle at the end of each row. */
	.fdm-problems-page .tp-legend { gap: 12px 16px !important; }
	/* The legend runs at 19px beside the figures, which is right on a desktop
	   row and too heavy once those four items stack on a phone. */
	.fdm-problems-page .tp-legend__item > span { font-size: 16px !important; }
	.fdm-problems-page .tp-legend > span[aria-hidden] { display: none !important; }
	.fdm-problems-page .tp-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- the problems still ahead ----
 * Every unlaunched problem stays with its own category, under a Coming Soon
 * divider, but drawn smaller than a launched fund: these are not offers yet.
 * No badge (the divider says it once) and a lighter icon. */
.fdm-problems-page .tp-soon-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	/* Every box the same height, not just every box in a row. These blurbs run
	 * from three words to three lines, so left to size themselves the grid came
	 * out ragged in both directions. 1fr on the implicit rows levels the lot. */
	grid-auto-rows: 1fr;
}
/* The way through to a problem's own page. Pushed to the card foot with
 * margin-top:auto so the buttons line up across a row however long the blurbs
 * are, and present only on cards whose page actually exists: a Coming Soon
 * button that goes nowhere is worse than no button. */
.fdm-problems-page a.tp-soon-btn { transition: color 160ms ease, gap 160ms ease; }
.fdm-problems-page a.tp-soon-btn:hover,
.fdm-problems-page a.tp-soon-btn:focus-visible { color: #fff; gap: 12px; }

.fdm-problems-page a.tp-soon-card {
	text-decoration: none;
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 200ms ease;
}
.fdm-problems-page a.tp-soon-card:hover {
	transform: translateY(-3px);
	border-color: var(--swgp-line-gold) !important;
}
@media (max-width: 1180px) {
	.fdm-problems-page .tp-soon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.fdm-problems-page .tp-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fdm-problems-page .tp-soon-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   The launched funds, as inline slides

   The feedback was that people like the slides on the home page, so the
   launched-fund cards are now built to the same rules. Not the slider
   itself: that is a carousel, one fund at a time behind arrows, and this
   page has between one and two launched funds per problem and wants them
   all visible at once. So the same slide, stacked, full width of the
   column, with a gap.

   Every value here is lifted from the module's own stylesheet,
   modules/fund-slider/assets/css/fdm-fund-slider.css, including its two
   golds, which are deeper than the SWGP gold used elsewhere on this page
   (#b8963e and #d8b86a against #e4af54). They are kept because matching
   the home page is the entire point. If that stylesheet changes, this
   block is what has to follow it.

   The coming-soon items below are untouched: .tp-soon-grid keeps its own
   smaller card, which is the right weight for something not launched.
   ════════════════════════════════════════════════════════════════════ */

.tp-slides {
	display: flex;
	flex-direction: column;
	gap: 24px;

	/* The same width as the home page slider, which is 94% of the viewport at
	   every size: measured off solving.org, 1354px at a 1440 viewport and
	   1805px at 1920, with the same 30px radius. Matching it is the point of
	   this whole block, and the 1240px column the rest of this page uses is
	   noticeably narrower.
	   
	   The block breaks out of that column rather than widening it, because the
	   section heading above and the Coming Soon cards below should stay on the
	   page's own measure. 50% resolves against the column's content box, and
	   since that box is centred, (column/2 - 47vw) is exactly the negative
	   margin that centres a 94vw child in it. */
	width: 94vw;
	max-width: 94vw;
	margin-left: calc(50% - 47vw);
	margin-right: calc(50% - 47vw);
}

.tp-slide {
	--tp-fs-gold: #b8963e;
	--tp-fs-gold-soft: #d8b86a;

	position: relative;
	display: block;
	width: 100%;
	min-height: 460px;
	overflow: hidden;
	border-radius: 30px;
	background: #1a1410;
	color: #fff;
	text-decoration: none;
}

/* The photograph, and its focal point.
 *
 * The panel is 2.7:1 and these stills are 16:9, so `cover` scales them to the
 * panel's WIDTH: the whole frame is already shown across and the crop is
 * vertical only. That means background-position has nothing left to pan
 * horizontally, which is why a subject sitting mid-frame ends up under the copy
 * column and no amount of repositioning moves them.
 *
 * So the focal point is two variables. A slide whose subject is already in the
 * left third sets neither and gets `cover center`, unchanged. A slide whose
 * subject sits mid-frame sets a width over 100%, which creates horizontal room,
 * and then pans within it.
 *
 * This cannot rescue a wide shot with people spread across the frame: zooming
 * pushes the right-hand person further under the copy, not out from under it.
 * Those need a re-crop, not CSS, and Human Trafficking and The SWGP Fund are
 * both that case; they are deliberately left at cover/center. */
.tp-slide__bg {
	position: absolute;
	inset: 0;
	background-position: var(--tp-bg-pos, center);
	background-size: var(--tp-bg-size, cover);
	background-repeat: no-repeat;
	background-color: #2c1f15;
	/* The slider animates this to 1.08 as a slow ken-burns while a slide is
	   the active one. Nothing here is "active", so it holds the resting
	   scale: a permanent animation on eight stacked panels is noise. */
	transform: scale(1.02);
	transition: transform 8s ease;
}
.tp-slide:hover .tp-slide__bg { transform: scale(1.06); }

/* Warm overlay, heavier on the right where the copy sits. */
.tp-slide__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(48, 32, 16, 0.20) 0%,
			rgba(48, 32, 16, 0.40) 45%,
			rgba(48, 32, 16, 0.62) 100%
		),
		linear-gradient(to top,
			rgba(20, 14, 8, 0.30) 0%,
			rgba(20, 14, 8, 0.05) 60%
		);
}

.tp-slide__panel {
	position: relative;
	z-index: 1;
	height: 100%;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 44px clamp(28px, 6vw, 96px);
	gap: clamp(24px, 3vw, 48px);
}

.tp-slide__divider {
	flex: 0 0 1px;
	align-self: stretch;
	margin: 44px 0;
	background: linear-gradient(
		to bottom,
		rgba(216, 184, 106, 0) 0%,
		var(--tp-fs-gold) 12%,
		var(--tp-fs-gold) 88%,
		rgba(216, 184, 106, 0) 100%
	);
}

.tp-slide__content {
	flex: 0 1 580px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* The page's own fund icons are single-colour PNGs painted through a mask,
   which is how every other icon on this page is drawn. The slider uses a
   plain <img>; a mask is kept here so these match the cards below them and
   stay gold whatever the artwork is. */
.tp-slide__icon {
	width: 56px;
	height: 56px;
	background: var(--tp-fs-gold-soft);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: left center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: left center;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.tp-slide__name {
	font-family: var(--font-body);
	font-size: clamp(22px, 1.7vw, 23px);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tp-fs-gold-soft);
	line-height: 1;
}

/* The headline.
 *
 * Two rules in the shared stylesheet have to be beaten here, and both by
 * design rather than by accident:
 *
 *   .fdm-fund-page a { color: var(--swgp-gold) }
 *   .fdm-fund-page :is(h1..h5):not([style*="color"]) { color: inherit !important }
 *
 * The whole slide is one anchor, so it is gold, and the second rule then
 * forces the heading to inherit that gold. The cards this replaces escaped it
 * by carrying color inline on every heading. Rather than go back to inline
 * styles, this is specific enough to win: three classes against the shared
 * rule's two classes and an element, and !important on both sides.
 *
 * The slide's own colour is restated for the same reason: it is what every
 * child added to this panel later will inherit, and it must be white, not the
 * page's link gold. */
.fdm-fund-page a.tp-slide,
.fdm-fund-page a.tp-slide:hover { color: #fff; }
.fdm-fund-page .tp-slide .tp-slide__tagline {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.18;
	font-weight: 700;
	color: #fff !important;
	letter-spacing: -0.005em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}

.tp-slide__people {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tp-slide__person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tp-slide__photo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: #444;
	display: block;
}
.tp-slide__who {
	min-width: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: 0.02em;
	line-height: 1.35;
}
.tp-slide__who strong { font-weight: 600; color: #fff; }
/* The comma is drawn rather than typed, exactly as the slider does it, so a
   person with no role does not leave a dangling comma after their name. */
.tp-slide__role { color: rgba(255, 255, 255, 0.72); font-weight: 400; }
.tp-slide__role::before { content: ', '; color: rgba(255, 255, 255, 0.72); }

.tp-slide__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 14px 38px;
	width: fit-content;
	background: var(--tp-fs-gold);
	color: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tp-slide:hover .tp-slide__cta,
.tp-slide:focus-visible .tp-slide__cta {
	background: var(--tp-fs-gold-soft);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* ── Narrower: the slide becomes a card ──
 *
 * The overlay layout depends on there being room to the side of the subject.
 * On a phone there is none: the panel spans the full width, so the copy sits
 * directly on top of a face, and the gradient needed to make it readable has
 * to be heavy enough to throw the photograph away. Two-thirds of the reason
 * for using a photograph is then gone.
 *
 * So below 820 the layers stop being layers and become a stack: the
 * photograph at its own 16:9, then the copy underneath on solid ground. The
 * text gets a real background instead of a gradient, the photo is seen whole,
 * and the headline stops breaking every three words.
 *
 * Three details worth keeping:
 *   - `inset: auto` is required, not tidiness. Resetting `position` alone
 *     leaves the offsets from `inset: 0` in place, and a relative box with
 *     four offsets is still pulled out of shape.
 *   - the focal point is overridden back to cover/center. Every override
 *     exists to buy horizontal room inside a 2.7:1 box; here the box is the
 *     image's own ratio, so there is no crop to pan and a leftover zoom would
 *     only cut into a frame that already fits.
 *   - the divider is reused rather than hidden: as a column child it lays
 *     itself out as a horizontal rule, which keeps the gold seam between
 *     photo and copy that the desktop slide has between photo and column.
 */
@media (max-width: 820px) {
	.tp-slide {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.tp-slide__bg {
		position: relative;
		inset: auto;
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9;
		/* Its own focal point, because the card's 16:9 box crops a wide frame
		   at the sides rather than the top and bottom, and a slide anchored
		   left on the desktop panel wants anchoring left here too. Defaults to
		   what every other slide already did. */
		background-position: var(--tp-bg-pos-m, center);
		background-size: cover;
		transform: none;
	}
	/* No hover on a touch screen, and a scaled photo would grow into the
	   copy panel below it rather than inside a frame. */
	.tp-slide:hover .tp-slide__bg { transform: none; }
	/* The gradient existed to make copy legible over the photo. The copy is
	   no longer over the photo. */
	.tp-slide__overlay { display: none; }
	.tp-slide__panel {
		height: auto;
		min-height: 0;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 30px clamp(22px, 5vw, 34px) 34px;
		background: #1a1410;
	}
	.tp-slide__divider {
		flex: 0 0 1px;
		align-self: stretch;
		margin: 0 0 26px;
		background: linear-gradient(
			to right,
			var(--tp-fs-gold) 0%,
			rgba(216, 184, 106, 0.35) 55%,
			rgba(216, 184, 106, 0) 100%
		);
	}
	.tp-slide__content {
		flex: 1 1 auto;
		max-width: none;
		gap: 14px;
	}
	.tp-slide__icon { width: 44px; height: 44px; }
	.tp-slide__name { font-size: 19px; letter-spacing: 0.2em; }
	.fdm-fund-page .tp-slide .tp-slide__tagline {
		font-size: clamp(22px, 4.4vw, 30px);
		line-height: 1.22;
		/* The shadow was carrying the text over a photograph; on solid ground
		   it only muddies it. */
		text-shadow: none;
	}
}
@media (max-width: 480px) {
	.tp-slide { border-radius: 20px; }
	.tp-slide__panel { padding: 26px 20px 30px; }
	.tp-slide__divider { margin-bottom: 22px; }
	.tp-slide__icon { width: 38px; height: 38px; }
	.tp-slide__name { font-size: 17px; }
	.tp-slide__photo { width: 36px; height: 36px; }
	.tp-slide__who { font-size: 13px; }
	.tp-slide__cta { width: auto; align-self: stretch; }
}