/* 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(24px, calc(50% - (var(--fdm-mega-max-w, 1440px) / 2 - var(--fdm-mega-pad-h, 48px)) / var(--fdm-page-zoom, 1)));
}
/* 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: var(--fdm-mega-pad-h-tablet, 28px)}
}
@media (max-width: 980px) {
	.fdm-fund-page{--fdm-gutter: 24px}
}
/* 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) {
	.fdm-fund-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. */
	.fdm-fund-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
 * is constrained to a centered 1320px column (the design was drawn as a
 * ~1280px card). 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}
}

.fdm-fund-page{padding-left:clamp(16px,3.5vw,48px);padding-right:clamp(16px,3.5vw,48px);padding-bottom:48px}
.fdm-fund-page > *:not(:first-child){max-width:1320px;margin-left:auto!important;margin-right:auto!important}
/* Hero: cancel the page side gutters so it runs wall to wall. */
.fdm-fund-page > div:first-of-type{margin-left:calc(clamp(16px,3.5vw,48px) * -1)!important;margin-right:calc(clamp(16px,3.5vw,48px) * -1)!important}
@media (max-width: 740px) {
	.fdm-fund-page{padding-left:0;padding-right:0;padding-bottom:24px}
	.fdm-fund-page > div:first-of-type{margin-left:0!important;margin-right:0!important}
}
/* Band sections (nutshell 2, chat 3) run full-bleed like the hero —
 * background wall to wall, inner content aligned to the 1320px column
 * via computed side padding, so their content edges line up at every
 * width. */
.fdm-fund-page > *:nth-child(2),.fdm-fund-page > *:nth-child(3){
	max-width:none!important;
	margin-left:calc(clamp(16px,3.5vw,48px) * -1)!important;
	margin-right:calc(clamp(16px,3.5vw,48px) * -1)!important;
	padding-left:max(64px, calc((100% - 1320px) / 2 + 48px))!important;
	padding-right:max(64px, calc((100% - 1320px) / 2 + 48px))!important}
/* The same two bands again, counted ignoring <style> and <script>.
 *
 * The rule above counts every element child. A section partial that ships its
 * own <style> or <script> puts them at the top level of .fdm-fund-page and
 * silently shifts every band below. The Henry page did exactly that: the
 * full-bleed rule landed on an invisible <style> and <script>, so the nutshell
 * and chat bands sat boxed at 1320px while identical markup ran full-bleed on
 * Trafficking. Nothing about the markup looked wrong, because nothing was.
 *
 * Additive on purpose: a browser without :nth-child(… of …) drops this and is
 * no worse off than before. */
.fdm-fund-page > *:nth-child(2 of :not(style):not(script)),.fdm-fund-page > *:nth-child(3 of :not(style):not(script)){
	max-width:none!important;
	margin-left:calc(clamp(16px,3.5vw,48px) * -1)!important;
	margin-right:calc(clamp(16px,3.5vw,48px) * -1)!important;
	padding-left:max(64px, calc((100% - 1320px) / 2 + 48px))!important;
	padding-right:max(64px, calc((100% - 1320px) / 2 + 48px))!important}

@media (max-width: 740px) {
	.fdm-fund-page > *:nth-child(2),.fdm-fund-page > *:nth-child(3){margin-left:0!important;margin-right:0!important;padding-left:18px!important;padding-right:18px!important}
}

/* ═══ Foundation Courses opts out of the contained composition ═══
 * That block assumes the shared fund template: page side gutters, a centered
 * 1320px column for everything 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. Same specificity as the rules
 * above, placed after them, so it wins on source order. */
.fdm-fund-page.fdm-course-page{padding-left:0;padding-right:0;padding-bottom:0}
.fdm-fund-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. */
body.fdm-fp-hosted .fdm-fund-page,
body.fdm-fp-hosted .slg {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* ═══ 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: lead-a-fund-foundation-course-group ═══ */
/* ════════════════════════════════════════════════════════════════════
   Lead a Fund Foundation Course, sign up. solving.org

   A solving.org page in the SWGP palette, but not a fund: no guide rail
   and no numbered content column, so it carries its own template and is
   scoped to .slg rather than .fdm-fund-page. That class is what switches
   on the shared stylesheet's entire fund layout, and this page wants the
   colours without the furniture.

   The .slg base below is the sibling page's, verbatim: same tokens, same
   gutter, same wrapper, same button. The two are one campaign and should not
   drift in the parts they share. Everything after it is this page's own —
   the form, which the sibling does not have.
   ════════════════════════════════════════════════════════════════════ */

.slg {
	/* SWGP brand, as literal values because the design references them
	   inline as hex rather than through the shared stylesheet's tokens. */
	--slg-gold: #e4af54;
	--slg-gold-light: #e5cf8f;
	--slg-ink: #1a1206;
	--slg-panel: #121110;
	--slg-line: rgba(228, 175, 84, 0.2);
	--slg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Full bleed, whatever contains it.
	   The theme drops a page's content into a centred, capped column. The
	   hand-built fund pages never met it because they were laid out in Divi
	   on a full-width row; this one is a plain page carrying a shortcode, so
	   it does. Stated here as well as in the shared stylesheet's
	   body.fdm-fp-hosted block, because that block needs the plugin release
	   that adds the body class and this page should not wait for it. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* ── The house gutter ──
	   Left and right edges land on the site logo and the last menu button at
	   any width, computed from the menu module's own variables. Defined here
	   because the shared stylesheet defines it on .fdm-fund-page, and this page
	   deliberately is not that: without it .slg-wrap fell back to a flat 32px
	   and the hero sat hard against the window edge instead of under the logo.
	   See fund-pages/README.md, "Page margins: the house rule". */
	--fdm-gutter: max(24px, calc(50% - (var(--fdm-mega-max-w, 1440px) / 2 - var(--fdm-mega-pad-h, 48px)) / var(--fdm-page-zoom, 1)));

	background: #000;
	color: #fff;
	/* Raleway is already loaded by the theme; DM Mono arrives with the shared
	   fund-page stylesheet's @import, which is concatenated ahead of this. */
	font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	overflow-x: clip;
}
.slg *, .slg *::before, .slg *::after { box-sizing: border-box; }
.slg a { color: var(--slg-gold); text-decoration: none; }
.slg a:hover { color: var(--slg-gold-light); }
/* The theme puts a margin and a padding-bottom on paragraphs. Every gap on
   this page is set inline by the design, so both have to go or each block
   carries a blank line the mock never drew. */
.slg p, .slg h1, .slg h2, .slg h3, .slg h4 { margin: 0; padding: 0; }
/* The theme colours headings for a light page, and that beats a colour set on
   the wrapper: the h1 came out near-black on black, legible only where the
   design had painted "alone." gold inline. Any inline colour the design set
   still wins over these, which is the point. */
.slg h1, .slg h2, .slg h3, .slg h4, .slg h5, .slg h6 { color: #fff; }
.slg, .slg p, .slg div, .slg span, .slg strong { color: inherit; }
.slg { color: #fff; }
.slg img { display: block; max-width: 100%; }
.slg video { max-width: 100%; }
.slg section { position: relative; }

/* ── No gap above or below ──
   The sections paint their own backgrounds edge to edge, so the theme's
   padding around the content area shows up as a white band above the hero and
   another under the last section. Scoped to the wrapper's ancestors rather
   than set globally, so it only applies on a page carrying this one. */
.slg { margin-top: 0; margin-bottom: 0; }
.slg > section:first-child { margin-top: 0; }
.slg > section:last-child { margin-bottom: 0; }

/* ── The measure ──
   The house rule: left and right edges land on the site logo and the last
   menu button at any width, computed from the menu module's own variables.
   Not a max-width with auto margins, which drifts inside the navigation.
   See fund-pages/README.md, "Page margins: the house rule". */
.slg-wrap {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding-left: var(--fdm-gutter, 32px);
	padding-right: var(--fdm-gutter, 32px);
}

/* ── "mono" in the mock ── */
.slg-mono {
	font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
	text-transform: uppercase;
}

/* ── Eyebrow: the design system component ── */
.slg-eyebrow {
	font-family: 'DM Mono', ui-monospace, monospace;
	font-weight: 500; font-size: 12px;
	letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--slg-gold);
}
/* The page-opening eyebrow, a size up. Matches the sibling page's hero, where
   12px read as a caption rather than a label above a large headline. The two
   pages carry the same "Lead a Course" word here, so they carry the same size. */
.slg-signup__pitch .slg-eyebrow { font-size: 14px; letter-spacing: 0.3em; }

/* The "label" spacing variant, used over the two duty columns. */
.slg-eyebrow--label { font-size: 11px; letter-spacing: 0.22em; }
/* The "muted" tone variant, on "What we do": the two columns are a pair,
   and the second is deliberately the quieter of them. */
.slg-eyebrow--muted { color: rgba(255, 255, 255, 0.4); }

/* ── Button: primary, lg ── */
.slg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 32px; border-radius: 999px;
	background: var(--slg-gold); color: var(--slg-ink) !important;
	font: 700 13px 'Raleway', sans-serif;
	letter-spacing: 0.12em; text-transform: uppercase;
	border: 1px solid var(--slg-gold);
	transition: background 160ms var(--slg-ease), border-color 160ms var(--slg-ease), transform 160ms var(--slg-ease);
}
.slg-btn:hover {
	background: var(--slg-gold-light); border-color: var(--slg-gold-light);
	color: var(--slg-ink) !important; transform: translateY(-2px);
}

/* ── MazeMark: bottom-left, faint ──
   The mock passes size and opacity as unresolved template expressions
   ({{ mazeSize }}), so there is no number to copy. Sized and faded to match
   the same mark on the fund pages, where it is 620px at 0.07. */
.slg-maze {
	position: absolute; left: -140px; bottom: -140px;
	width: 620px; height: 620px; object-fit: contain;
	opacity: 0.07; pointer-events: none; z-index: 0;
}

/* ── Hover states the mock wrote as style-hover="…" ── */
.slg-card {
	transition: background 160ms var(--slg-ease), border-color 160ms var(--slg-ease), transform 160ms var(--slg-ease);
}
.slg-card--solid:hover {
	background: var(--slg-gold-light) !important;
	border-color: var(--slg-gold-light) !important;
	transform: translateY(-4px);
}
.slg-card--ghost:hover {
	border-color: var(--slg-gold) !important;
	transform: translateY(-4px);
}
.slg-play { transition: background 140ms var(--slg-ease); cursor: pointer; }
.slg-play:hover { background: var(--slg-gold-light); }


/* ══════════════════════════════════════════════════════════════════
   The sign-up itself
   ══════════════════════════════════════════════════════════════════ */

.slg-signup { padding: calc(var(--fdm-mega-h, 80px) + 80px) 0 104px; }
.slg-signup__grid {
	display: grid; grid-template-columns: 1fr 1.05fr;
	gap: 72px; align-items: start; position: relative;
}

/* ── The pitch ── */
.slg-signup__points { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.slg-signup__point { display: flex; gap: 12px; align-items: flex-start; }
.slg-signup__point .slg-mono { color: var(--slg-gold); font-size: 13px; margin-top: 3px; flex: none; }
.slg-signup__point div {
	font-size: 15px; line-height: 1.55; font-weight: 300;
	color: rgba(255, 255, 255, 0.82);
}
.slg-signup__point strong { font-weight: 700; color: #fff; }
/* The rule is a divider, not an underline for the line beneath it. At 24px the
   text sat tight under it while the gap above was half as much again, which
   read as the sentence belonging to the rule rather than starting a new
   thought. Even space either side, and the line gets its own leading. */
.slg-signup__aside {
	margin-top: 40px !important; padding-top: 34px;
	border-top: 1px solid var(--slg-line);
	font-size: 15.5px; line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}
.slg-signup__aside a { white-space: nowrap; }

/* ── The card ──
   A panel, not a bare column: the form is the page's one job, and against a
   black background an unbounded stack of inputs has nothing holding it. */
.slg-signup__card {
	background: var(--slg-panel);
	border: 1px solid var(--slg-line);
	border-radius: 18px;
	padding: 40px;
}
.slg-form__head {
	font-size: 23px !important; font-weight: 700; letter-spacing: -0.02em;
	margin: 0 0 28px !important;
}

/* ── Fields ── */
.slg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.slg-field { display: block; margin: 0 0 18px; border: 0; padding: 0; }
.slg-field__label {
	display: block; margin-bottom: 8px; padding: 0;
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}
.slg-field__label i { font-style: normal; color: var(--slg-gold); }
.slg-field__label em { font-style: normal; color: rgba(255, 255, 255, 0.38); }
.slg-field__hint {
	display: block; margin-top: 6px;
	font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, 0.45);
}
.slg-field input[type="text"],
.slg-field input[type="email"],
.slg-field input[type="tel"],
.slg-field select,
.slg-field textarea {
	width: 100%; display: block;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 13px 15px; outline: none;
	font: 300 15px 'Raleway', sans-serif; color: #fff;
	transition: border-color 180ms var(--slg-ease), background 180ms var(--slg-ease);
}
.slg-field textarea { resize: vertical; min-height: 104px; line-height: 1.55; }
.slg-field input:focus, .slg-field select:focus, .slg-field textarea:focus {
	border-color: var(--slg-gold); background: rgba(0, 0, 0, 0.6);
}
.slg-field input::placeholder, .slg-field textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
/* The native arrow is drawn in the OS colour, which on a dark field is a dark
   grey triangle on near-black. Replaced with one of our own. */
.slg-field select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e4af54' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center;
	padding-right: 40px;
}
/* Divi styles option elements for a light menu on some platforms. */
.slg-field select option { background: #121110; color: #fff; }

/* ── Radio groups, drawn as chips ──
   227 countries belong in a select; five courses and a yes/no do not. Chips
   are one tap on a phone and show every option at once. */
.slg-field--choice { margin-bottom: 22px; }
.slg-field--choice legend { float: none; width: auto; }
.slg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slg-choices--inline { grid-template-columns: repeat(2, minmax(0, 140px)); }
/* A yes/no chip has a label and no date under it, so it does not need the
   two-line height the course rows get. */
.slg-choices--inline .slg-choice span { padding: 12px 16px; }
.slg-choice { position: relative; display: block; cursor: pointer; }
.slg-choice input {
	position: absolute; opacity: 0; width: 0; height: 0;
}
.slg-choice span {
	display: block; padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
	background: rgba(0, 0, 0, 0.45);
	font-size: 14px; font-weight: 300; line-height: 1.35; color: rgba(255, 255, 255, 0.82);
	transition: border-color 160ms var(--slg-ease), background 160ms var(--slg-ease), color 160ms var(--slg-ease);
}
.slg-choice:hover span { border-color: rgba(228, 175, 84, 0.5); }
.slg-choice input:checked + span {
	border-color: var(--slg-gold); background: rgba(228, 175, 84, 0.12); color: #fff;
}
/* Keyboard users get a ring, since the input itself is invisible. */
.slg-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(228, 175, 84, 0.35); }

/* ── Consent ── */
.slg-consent { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--slg-line); }
.slg-consent__fine {
	font-size: 12.5px !important; line-height: 1.6; font-weight: 300;
	color: rgba(255, 255, 255, 0.45) !important; margin: 0 0 12px !important;
}
.slg-consent__fine a { color: var(--slg-gold); text-decoration: underline; }
.slg-consent__check {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 0 0 12px; cursor: pointer;
	font-size: 13.5px; line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, 0.78);
}
.slg-consent__check input { margin: 3px 0 0; accent-color: var(--slg-gold); flex: none; width: 16px; height: 16px; }

/* ── Submit and status ── */
.slg-form__submit { margin-top: 26px; width: 100%; }
.slg-form__submit[disabled] { opacity: 0.6; cursor: default; }
.slg-form__msg {
	margin: 14px 0 0 !important; font-size: 13.5px; line-height: 1.5;
	color: rgba(255, 255, 255, 0.6) !important;
}
.slg-form__msg.is-error { color: #ff9d7a !important; }

/* ── The thank you ──
   Replaces the form in place rather than redirecting: the page has said its
   piece, and a redirect loses anyone who wanted to read it twice. */
.slg-form__thanks { text-align: center; padding: 26px 8px; }
.slg-form__thanks[hidden] { display: none; }
.slg-form__tick {
	width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(228, 175, 84, 0.14); border: 1px solid var(--slg-gold);
	color: var(--slg-gold); font-size: 27px;
}
.slg-form__thanks h2 { font-size: 27px !important; margin: 0 0 12px !important; }
.slg-form__thanks p {
	font-size: 15.5px; line-height: 1.6; font-weight: 300;
	color: rgba(255, 255, 255, 0.72) !important; max-width: 42ch; margin: 0 auto !important;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
	.slg-signup__grid { grid-template-columns: 1fr; gap: 48px; }
	.slg-signup__pitch h1 { font-size: 42px !important; }
}
@media (max-width: 680px) {
	.slg-signup { padding: calc(var(--fdm-mega-h, 80px) + 40px) 0 72px; }
	.slg-signup__pitch h1 { font-size: 32px !important; }
	.slg-signup__card { padding: 26px 20px; border-radius: 14px; }
	.slg-form__row { grid-template-columns: 1fr; gap: 0; }
	.slg-choices { grid-template-columns: 1fr; }
}

/* ── Course choice: one open, four on the way ──
   The courses that have not launched stay on the page rather than being hidden.
   They are the roadmap, and a form that lists one option is not really asking a
   question. They are disabled, so a disabled radio submits nothing and the four
   cannot reach HubSpot however the page is poked at.

   Dates match the fund cards on the Lead a Course page, so the two do not tell
   different stories about when a course opens. */
.slg-choice span b {
	display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff;
}
.slg-choice__when {
	display: block; margin-top: 4px; font-style: normal;
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}
.slg-choice__when.is-now { color: var(--slg-gold); }
/* The three with a launch month are selectable: somebody can put their name
   down for October early and HubSpot records which. Joblessness has no date at
   all, so there is nothing to put your name down for, and it is locked rather
   than accepting a choice we cannot act on. Dimmed and inert together, because
   a row that looks half-off but answers a click is worse than either. */
.slg-choice--locked { cursor: default; }
.slg-choice--locked span { opacity: 0.5; }
.slg-choice--locked:hover span { border-color: rgba(255, 255, 255, 0.14); }
.slg-choice--locked span b { color: rgba(255, 255, 255, 0.75); }