/* 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}

	/* Strategy-in-a-nutshell wrapper: same side gutter treatment as the
	 * content column above, since it sits outside that column. */
	.fdm-fund-page [style*="padding: 52px 64px"]{padding:40px 32px!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"]{grid-template-columns:1fr!important;gap:24px!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}

	/* Strategy-in-a-nutshell: already stacked to one column by the generic
	 * grid-template-columns rule above, but its 3 children keep the desktop
	 * divider styling (border-left + side padding) meant for sitting next to
	 * each other. Stacked, that reads as a stray vertical rule and lopsided
	 * left/right margins on each block. Swap the divider to a top border on
	 * every child but the first, matching how the desktop layout only shows
	 * a divider between blocks (never before the first one). */
	.fdm-fund-page [style*="padding: 52px 64px"]{padding:32px 20px!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"]{gap:20px!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"] > *{padding:0!important;border-left:0!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"] > *:not(:first-child){border-top:1px solid var(--swgp-line)!important;padding-top: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: problem-solver-pledge ═══ */
/* ════════════════════════════════════════════════════════════════════
   The Problem Solver Pledge, 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 .psp 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 design sets everything inline on the elements. It is lifted into
   classes here instead, because this page repeats one shape many times:
   four commitments, four blanks, three signature fields, and the same
   shape again at Letter size for print. Inline styles would be the same
   declaration written eleven times, and the print sheet could not
   override any of it.
   ════════════════════════════════════════════════════════════════════ */

.psp {
	--psp-gold: #e4af54;
	--psp-gold-light: #e5cf8f;
	--psp-ink: #1a1206;
	--psp-line: rgba(255, 255, 255, 0.14);
	--psp-line-gold: rgba(228, 175, 84, 0.45);
	--psp-soft: rgba(255, 255, 255, 0.72);
	--psp-mute: rgba(255, 255, 255, 0.5);
	--psp-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; this is a plain page carrying a shortcode, so
	   it meets that column and has to break out of 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. The shared
	   stylesheet defines this on .fdm-fund-page, and this page deliberately is
	   not that, so it is repeated here character for character, floor
	   included. See fund-pages/README.md, "Page margins: the house rule". */
	--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)));

	background: #000;
	color: #fff;
	/* Raleway is loaded by the theme; DM Mono arrives with the shared
	   stylesheet's @import, which is concatenated ahead of this file. */
	font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.psp *, .psp *::before, .psp *::after { box-sizing: border-box; }
/* [hidden] is a UA rule, display:none, and the weakest one there is: any
   author rule setting display beats it. Nothing here relies on that today, and
   the Join a Course page lost an afternoon to it. */
.psp [hidden] { display: none !important; }
.psp a { color: var(--psp-gold); text-decoration: none; }
.psp a:hover { color: var(--psp-gold-light); }
/* The theme puts a margin and a padding-bottom on paragraphs, and colours
   headings for a light page. Every gap here is set by this file. */
/* One class of weight, no more and no less, and both halves of that matter.

   It was `.psp p`, 0-1-1, which outranks every role class below it at 0-1-0:
   `margin: 0` beat `.psp-lede { margin: 0 auto }` and every other margin here,
   which left the hero's lede against the left edge of a centred column and
   closed up the gaps the design draws.

   Then it was :where() on both halves, 0-0-0, which lost to the theme instead:
   Divi styles bare types, `h1,h2,h3,h4,h5,h6 { color:#333; padding-bottom:10px }`
   and `p { padding-bottom:1em }` at 0-0-1, so the pledge headline came out grey
   on black and every block grew a margin nobody asked for.

   `.psp :where(…)` is 0-1-0: over the theme's type rules, level with the role
   classes, which then win on source order because they come later. */
.psp :where(p, h1, h2, h3, ol, li) { margin: 0; padding: 0; }
/* These two do NOT go in the :where() above, and that is the whole point of
   separating them: they are not tidying, they are beating the theme. Divi
   colours headings for a light page, and gives .entry-content ol decimal
   markers, a 23px bottom padding and its own line-height, all at 0-1-1. A
   zero-specificity rule loses to every one of them, which is how the pledge
   headline came out Divi's grey on black. Nothing in this file sets a heading
   colour or a list style, so there is no role for these to outrank. */
.psp h1, .psp h2, .psp h3 { color: #fff; }
/* Both list types. It was `ol` alone, which was every list the page had until
   the problem picker arrived as a <ul> and came out wearing Divi's discs,
   Divi's indent and Divi's 23px under every row. Same rule, same reason. */
.psp ol, .psp ul { list-style: none; padding: 0; line-height: inherit; }
.psp img { display: block; max-width: 100%; }
.psp section { position: relative; }
.psp { margin-top: 0; margin-bottom: 0; }

.psp-wrap {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding-left: var(--fdm-gutter, 48px);
	padding-right: var(--fdm-gutter, 48px);
}

/* ── Shared roles ── */
.psp-eyebrow {
	display: block;
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--psp-gold);
	margin-bottom: 24px;
}
.psp-h2 {
	margin: 0 0 56px;
	font-weight: 700; letter-spacing: -0.035em; line-height: 1;
	font-size: clamp(36px, 4.6vw, 60px);
	max-width: 18ch;
}

/* ── Hero ── */
.psp-hero { overflow: hidden; background: #000; }
/* In colour. The mock greyscales it, which is a habit from stills that need
   the headline to carry; this footage is already dim under the wash above it
   and the gradient below, and the colour is the only warmth on a black page. */
.psp-hero video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0.55; pointer-events: none;
}
.psp-hero__wash {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, #000 100%);
}
/* The bar is fixed and transparent over the hero, so the first term clears it
   and the second is the space above the headline. The design's flat 120px was
   measured against no menu at all, which made the real gap 120 minus whatever
   the bar happened to be.

   Written against --fdm-mega-h, which the menu module emits, so the space holds
   if that height is changed in Menu settings. 65px on solving.org today, so
   225px in total.

   The headline reads closer to the menu than the number suggests, and that is
   the line-height doing it: 0.92 on a 128px face makes the line box shorter
   than the glyphs, so the caps sit a few pixels above the padding edge rather
   than below it. Worth knowing before anyone measures this in a screenshot and
   finds 80 where they set 160. */
.psp-hero__inner {
	position: relative; text-align: center;
	padding-top: calc(var(--fdm-mega-h, 80px) + 160px);
	padding-bottom: 88px;
}
/* The lines are spans, so the cap and the balancer are both gone: there is
   nothing left to balance and a 12ch box would now be wrapping lines that were
   written not to wrap.

   The floor comes down from the mock's 52px to 40px, and that is not a taste
   decision. "Problem Solver." is the longest line and at 52px it is wider than
   a 390px phone between its gutters, so the line the design cares most about
   would have been the one breaking in the wrong place on the most common
   screen there is. */
.psp-hero h1 {
	margin: 0 auto 40px;
	font-weight: 700; letter-spacing: -0.045em; line-height: 0.92;
	font-size: clamp(40px, 8.6vw, 128px);
	max-width: none;
}
.psp-hero h1 span { display: block; }
/* `.psp h1` sets a colour at 0-1-1 to beat Divi's grey. It lands on the h1 and
   this lands on the span, so inheritance is what is being overridden here, not
   that rule, and a bare class is enough. Written with the wrapper anyway, at
   0-2-0, because the last three things on this page that asked at 0-1-0 lost
   to the theme. */
.psp .psp-hero__gold { color: var(--psp-gold); }
.psp-lede {
	margin: 0 auto;
	font-weight: 300; font-size: clamp(19px, 1.75vw, 22px); line-height: 1.5;
	color: var(--psp-soft); max-width: 62ch; text-wrap: pretty;
}
/* The emphasis. Not a colour change and a weight change picked separately:
   the lede is 300 at 72% white, so the turn is 500 at full white, which is one
   step on each axis and reads as the same voice getting firmer rather than as
   a different voice interrupting.

   `.psp-lede strong` and not a class, because <strong> is what the markup
   should say here and the theme has nothing to declare about a <strong> inside
   a paragraph this rule does not already outrank. */
.psp-lede strong { font-weight: 500; color: #fff; }

/* ── The way down ──
   A chevron, bouncing, under the lede. It exists because the hero fills the
   window: without it the page's first screen ends on a full stop and gives no
   sign that four commitments and a form are underneath.

   Sized by its own padding rather than a width, so the tap target is a
   comfortable 48px square while the mark inside it stays small. */
.psp-scroll {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 44px; padding: 14px;
	color: var(--psp-gold);
	animation: psp-bounce 2.4s var(--psp-ease) infinite;
	transition: color 160ms ease;
}
.psp-scroll svg { display: block; width: 26px; height: 15px; }
.psp-scroll:hover { color: var(--psp-gold-light); }
.psp-scroll:focus-visible { outline: 2px solid var(--psp-gold); outline-offset: 6px; border-radius: 6px; }

/* Two settles rather than one, which is what makes it read as a bounce and
   not a hover. It rests for the first fifth of every cycle so the motion is
   periodic rather than constant, which is the difference between a cue and a
   distraction. */
@keyframes psp-bounce {
	0%, 20%, 55%, 100% { transform: translateY(0); }
	35%               { transform: translateY(12px); }
	70%               { transform: translateY(5px); }
}
/* An idle looping animation is precisely what this setting is asking about. */
@media (prefers-reduced-motion: reduce) {
	.psp-scroll { animation: none; }
}

/* The watermark. Gold at 5 per cent is texture rather than an image, which is
   why it can sit under body copy at all. */
/* .psp .psp-maze, for the same reason the sheet needs it: `.psp img` above is
   0-1-1 and caps every image at max-width: 100%, which would outrank a bare
   class here and shrink both watermarks to the width of their own box. */
.psp .psp-maze { position: absolute; pointer-events: none; z-index: 0; height: auto; max-width: none; }
.psp .psp-maze--hero { left: -18vw; bottom: -30vw; width: 70vw; max-width: 1000px; opacity: 0.05; }

/* ── The four commitments ──
   The numerals are a counter rather than typed markup: four <li> in a fixed
   order already carry their own numbering, and a hand-typed 03 is a thing that
   survives a reorder and is then wrong. */
/* The chevron's target. The menu is fixed and would otherwise sit on top of
   the heading the jump lands on, so the section keeps the menu's own height
   clear above itself. */
.psp-four { background: #161616; scroll-margin-top: calc(var(--fdm-mega-h, 80px) + 24px); }
.psp-four > .psp-wrap { padding-top: 96px; padding-bottom: 104px; }

/* ── The wall, as a band ──
   Full width under the hero, on the hero's own black so the two read as one
   opening. It was a sticky column beside the commitments, which set the count
   at the size of a sidebar: the strongest number on the page was the quietest
   thing on it. */
.psp-wall { background: #000; scroll-margin-top: calc(var(--fdm-mega-h, 80px) + 24px); }
.psp-wall > .psp-wrap { padding-top: 72px; padding-bottom: 96px; }

/* The module ships colourless on purpose, so the page says what gold means
   here. Nothing structural is touched: the band's shape is the module's. */
.psp-wall .fdm-cmt { --fdm-cmt-rule: var(--psp-line); }
/* The figure, bigger than anything on the page except the headline. It is the
   one number that answers "is anybody else doing this". */
.psp-wall .fdm-cmt__n { color: var(--psp-gold); }
.psp-wall .fdm-cmt__unit,
.psp-wall .fdm-cmt__reach {
	font-family: 'DM Mono', ui-monospace, monospace;
	color: var(--psp-mute); opacity: 1; letter-spacing: 0.2em;
}
.psp-wall .fdm-cmt__tally-item { border-color: var(--psp-line-gold); }
.psp-wall .fdm-cmt__tally-n { color: var(--psp-gold); font-size: 17px; }
.psp-wall .fdm-cmt__tally-name {
	font-family: 'DM Mono', ui-monospace, monospace;
	color: var(--psp-soft); opacity: 1;
}
.psp-wall .fdm-cmt__item { background: #121110; border-color: rgba(228, 175, 84, 0.2); }
.psp-wall .fdm-cmt__name { color: #fff; }
.psp-wall .fdm-cmt__area { color: var(--psp-mute); opacity: 1; }
.psp-wall .fdm-cmt__problem {
	font-family: 'DM Mono', ui-monospace, monospace;
	color: var(--psp-gold); opacity: 1; font-size: 11px; letter-spacing: 0.14em;
}
.psp-wall .fdm-cmt__more {
	font-family: 'DM Mono', ui-monospace, monospace;
	color: var(--psp-gold); border-color: var(--psp-line-gold);
}
.psp-wall .fdm-cmt__empty { color: var(--psp-mute); }

/* Two columns, and the numeral above its heading rather than beside it.
   A 160px numeral column and a paragraph cannot share half a page, and the
   numerals were the first thing to go when the list was halved in width.

   The closing rule lives on the list rather than on the last item, which is
   what makes the same markup right in both layouts: in two columns there is
   no single last item along the bottom, and in one column a bottom border on
   item three would sit directly on item four's top border. */
.psp-four__list {
	counter-reset: psp;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 72px;
	border-bottom: 1px solid var(--psp-line);
}
/* `display: block` is load bearing, not tidying.
   An <li> is `display: list-item`, and Divi's builder sets a decimal marker on
   lists through an ID selector that `.psp ol { list-style: none }` cannot
   outrank. The old rule gave each item `display: grid` for its numeral column,
   which happened to stop it being a list item at all and took the marker with
   it. Dropping that column to stack the numeral brought the marker back, and
   the page printed "1." above its own "01". Saying block keeps the item out of
   list-item entirely, which is the only fix here that does not depend on
   winning a specificity argument against an ID. */
.psp-four__list > li {
	display: block;
	counter-increment: psp;
	padding: 36px 0 40px;
	border-top: 1px solid var(--psp-line);
}
.psp-four__list > li::before {
	content: counter(psp, decimal-leading-zero);
	display: block; margin-bottom: 14px;
	font-weight: 700; letter-spacing: -0.045em; line-height: 0.9;
	font-size: clamp(44px, 4.2vw, 72px); color: var(--psp-gold);
}
.psp-four__list h3 {
	margin: 0 0 16px;
	font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
	font-size: clamp(26px, 2.8vw, 36px);
}
.psp-four__list p {
	font-weight: 300; font-size: 19px; line-height: 1.5;
	color: var(--psp-soft); max-width: 68ch; text-wrap: pretty;
}
.psp-four__list > li > div { max-width: 60ch; }

/* ── The plan ── */
.psp-plan > .psp-wrap { padding-top: 104px; padding-bottom: 48px; }
.psp-card {
	background: #121110;
	border: 1px solid rgba(228, 175, 84, 0.2);
	border-radius: 14px;
	padding: clamp(28px, 4.5vw, 56px);
	display: flex; flex-direction: column; gap: 40px;
}
.psp-field { display: flex; flex-direction: column; gap: 14px; }
.psp-field__head { display: flex; justify-content: space-between; gap: 16px; }
.psp-field__num, .psp-field__count {
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
}
.psp-field__num { color: var(--psp-mute); }
.psp-field__count { color: rgba(255, 255, 255, 0.32); font-variant-numeric: tabular-nums; }
.psp-field__count.is-near { color: var(--psp-gold); }

/* The sentence IS the label, so it is laid out as one: the words at reading
   size and the answer in gold underneath or inline with them. */
.psp-say { display: flex; flex-direction: column; gap: 6px; }
.psp-say--inline {
	flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
}
.psp-say__lead {
	font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; color: #fff;
}
/* The colours carry !important because the theme sets its own on bare inputs
   at the same specificity and loads after this file: an amount typed into the
   gift line came out Divi's grey while the $ beside it, which is a span, was
   gold. -webkit-text-fill-color with it, because on WebKit that wins over
   color on a form control and is what actually paints the glyphs. */
.psp-say textarea, .psp-say input {
	background: transparent; border: 0;
	border-bottom: 1px solid var(--psp-line-gold);
	color: var(--psp-gold) !important; -webkit-text-fill-color: var(--psp-gold);
	font-family: inherit; font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; line-height: 1.35;
	/* 4px, not 12. The rule is the line somebody is writing on, so the answer
	   has to sit on it: a twelve pixel gap under the descenders reads as the
	   text floating above its own underline. The textareas grow to their
	   content (see page.html), so this is the only space between the two. */
	padding: 2px 0 4px;
	width: 100%; resize: none; overflow: hidden;
}
.psp-say textarea:focus, .psp-say input:focus,
.psp-input input:focus, .psp-input select:focus { outline: none; border-bottom-color: var(--psp-gold); }

/* ── The problem picker ──
   A button and a listbox, dressed as the answer line every other blank on this
   card writes on: gold, heavy, sitting on its own rule. The menu is absolutely
   positioned, so opening it does not push the three fields below it down the
   card, and it is capped in height because twelve problems is taller than a
   phone.

   The markup is divs with listbox and option roles rather than a <ul> of
   <li>, so there is no tag here for the theme to reach. Raising these to
   0-2-0 was the first attempt and it lost anyway: Divi's builder styles lists
   through `.et-db #et-boc .et-l ul`, an ID selector at 1-2-1, and no class a
   page is allowed to write outranks an ID. Changing the element was the only
   move on the board. */
.psp-pick { position: relative; }
/* The label wraps now. One fund fits on a line; three do not, and a nowrap
   button would have pushed the chevron off the card. */
.psp-pick__value { min-width: 0; }
.psp-pick__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; padding: 2px 0 6px;
	background: transparent; border: 0;
	border-bottom: 1px solid var(--psp-line-gold);
	color: var(--psp-gold); cursor: pointer; text-align: left;
	font-family: inherit; font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; line-height: 1.35;
	transition: border-color 140ms ease;
}
/* Three fund names at 30px is two lines on most screens and four on a phone,
   so the chosen list comes down a size. The placeholder keeps the full size:
   it is the thing somebody has to notice. */
.psp-pick__btn .psp-pick__value:not(.is-blank) { font-size: clamp(19px, 1.9vw, 24px); }
.psp-pick__btn:hover { border-bottom-color: var(--psp-gold); }
.psp-pick__btn:focus-visible { outline: none; border-bottom-color: var(--psp-gold); }
.psp-pick__value.is-blank { color: rgba(255, 255, 255, 0.32); font-weight: 400; }
.psp-pick__chev {
	flex: 0 0 auto; width: 14px; height: 10px; color: var(--psp-mute);
	transition: transform 180ms var(--psp-ease), color 140ms ease;
}
.psp-pick__btn[aria-expanded="true"] .psp-pick__chev { transform: rotate(180deg); color: var(--psp-gold); }

.psp-pick__menu {
	position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 10px);
	max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 6px;
	list-style: none;
	background: #161412;
	border: 1px solid rgba(228, 175, 84, 0.28);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}
/* A row, not a line of text: the tick sits in a fixed column so every label
   starts at the same place whether or not it is chosen. */
.psp-pick__opt {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border-radius: 8px; cursor: pointer;
	font-weight: 400; font-size: 18px; line-height: 1.35; color: var(--psp-soft);
	transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}
.psp-pick__tick {
	flex: 0 0 auto; width: 14px; height: 11px;
	opacity: 0; transition: opacity 120ms ease;
}
.psp-pick__opt[aria-selected="true"] .psp-pick__tick { opacity: 1; }
/* Everything unchosen dims together once three are taken, so the cap is
   visible before somebody presses a fourth and nothing happens. They stay
   clickable: pressing a chosen one is how you swap. */
.psp-pick__opt.is-full { opacity: 0.35; }

.psp-pick__hint {
	margin: 2px 6px 8px; padding: 0;
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--psp-mute);
}
/* One highlight, driven from the script, so the mouse and the arrow keys
   cannot end up pointing at two different rows at once. */
.psp-pick__opt.is-active { background: rgba(228, 175, 84, 0.12); color: #fff; }
.psp-pick__opt[aria-selected="true"] { color: var(--psp-gold); font-weight: 700; }

/* The country list is the browser's own menu, so it is told the page is dark:
   without color-scheme the options open as black text on white over a black
   page. The chevron is drawn rather than left to the UA's grey triangle, which
   is the one part of a native select that cannot be styled. */
.psp-input select {
	appearance: none; -webkit-appearance: none;
	color-scheme: dark; cursor: pointer;
	padding-right: 28px;
	background-image: linear-gradient(45deg, transparent 50%, var(--psp-mute) 50%),
	                  linear-gradient(135deg, var(--psp-mute) 50%, transparent 50%);
	background-position: right 12px center, right 6px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.psp-input select:invalid, .psp-input select option[value=""] { color: var(--psp-mute); }

/* ── The two options ──
   The real checkbox is still there, still focusable and still what a screen
   reader reads; it is moved off the page rather than display:none, which would
   take it out of the tab order and out of the form. The square beside it is
   drawn, so it can be gold. */
.psp-opts {
	border: 1px solid rgba(228, 175, 84, 0.2);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
	overflow: hidden;
}
.psp-opt {
	position: relative;
	display: flex; align-items: flex-start; gap: 16px;
	padding: 20px 22px; cursor: pointer;
	transition: background 180ms ease;
}
.psp-opt + .psp-opt { border-top: 1px solid var(--psp-line); }
.psp-opt:hover { background: rgba(228, 175, 84, 0.05); }
.psp-opt input {
	position: absolute; width: 1px; height: 1px;
	margin: 0; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.psp-opt__box {
	flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--psp-line-gold); border-radius: 6px;
	color: var(--psp-ink); background: transparent;
	transition: background 140ms ease, border-color 140ms ease;
}
.psp-opt__box svg { width: 13px; height: 11px; opacity: 0; transition: opacity 120ms ease; }
.psp-opt input:checked + .psp-opt__box { background: var(--psp-gold); border-color: var(--psp-gold); }
.psp-opt input:checked + .psp-opt__box svg { opacity: 1; }
/* Focus lands on a box nobody can see, so it is drawn on the square instead.
   :focus-visible, not :focus, because a mouse click should not leave a ring behind. */
.psp-opt input:focus-visible + .psp-opt__box {
	outline: 2px solid var(--psp-gold); outline-offset: 3px;
}
.psp-opt__text {
	font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--psp-soft);
	text-wrap: pretty;
}
.psp-opt__hint {
	display: block; margin-top: 5px;
	font-size: 13px; line-height: 1.5; color: var(--psp-mute);
}
.psp-sign__fine {
	font-weight: 300; font-size: 13px; line-height: 1.6;
	color: var(--psp-mute); max-width: 56ch; text-wrap: pretty;
}

/* ── The thank you ──
   Where the download lives now. It is the same gap and the same rhythm as the
   fields it replaces, so nothing jumps when one is swapped for the other. */
.psp-sign__thanks { display: flex; flex-direction: column; }
.psp-sign__thanksline {
	margin: 0 0 16px;
	font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
	font-size: clamp(24px, 2.6vw, 34px); text-wrap: pretty;
}
.psp-sign__thanksbody {
	margin: 0 0 32px;
	font-weight: 300; font-size: 17px; line-height: 1.55; color: var(--psp-soft);
	max-width: 48ch; text-wrap: pretty;
}
.psp-say textarea::placeholder, .psp-say input::placeholder,
.psp-input input::placeholder {
	color: rgba(255, 255, 255, 0.32) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.32);
	font-weight: 400;
}

.psp-grow { flex: 1 1 240px; min-width: 0; width: auto !important; padding-bottom: 4px !important; }

/* ── Signing ── */
.psp-sign > .psp-wrap { padding-top: 64px; padding-bottom: 112px; }
.psp-sign__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 56px 80px; align-items: start;
}
.psp-sign__col { display: flex; flex-direction: column; gap: 48px; }
/* The 40px is the gap that was under the paragraph this replaced: the vow is
   the last prose before the gold line now, not the first of two. */
.psp-sign__vow {
	margin: 0 0 40px;
	font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
	font-size: clamp(24px, 2.6vw, 34px); text-wrap: pretty;
}
.psp-sign__line {
	font-weight: 700; letter-spacing: -0.045em; line-height: 0.95;
	font-size: clamp(40px, 5.4vw, 72px); color: var(--psp-gold); max-width: 12ch;
}
.psp-sign__fields { display: flex; flex-direction: column; gap: 32px; }
.psp-input { display: flex; flex-direction: column; gap: 10px; }
.psp-input__label {
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--psp-mute);
}
/* City and State share a line: two short answers stacked full width read as
   two more questions than they are. */
.psp-input__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }

.psp-input input, .psp-input select {
	width: 100%; background: transparent; border: 0;
	border-bottom: 1px solid var(--psp-line);
	color: #fff !important; -webkit-text-fill-color: #fff;
	font-family: inherit; font-weight: 400;
	font-size: 22px; line-height: 1.4; padding: 8px 0 12px;
}
/* A signature is handwriting. Homemade Apple is the face the Join a Course
   page signs Mary's letter in, so the site has one hand rather than two.
   It runs large and sits high in its own line box, which is why the size comes
   down from the mock's 34px and the padding is uneven: the ascenders need room
   above and the tail of a y needs room before the rule. */
/* input.psp-input__sig, not .psp-input__sig: `.psp-input input` above sets
   font-family: inherit at 0-1-1 and beat a bare class here, so the field
   stayed in Raleway however loudly this asked for the script face. */
input.psp-input__sig {
	font-family: 'Homemade Apple', 'Segoe Script', cursive;
	font-style: normal; font-size: 26px !important; letter-spacing: 0;
	line-height: 1.5; padding: 12px 0 10px !important;
	border-bottom-color: var(--psp-line-gold) !important;
}
.psp-sign__go { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.psp-sign__note {
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--psp-mute);
}
/* Letter-spaced uppercase at 12px is a label, not a sentence somebody has to
   read and act on, so a refusal drops the tracking and comes up in the gold. */
.psp-sign__note.is-error {
	font-family: inherit; font-size: 15px; letter-spacing: 0;
	text-transform: none; color: var(--psp-gold);
}

/* Button: the design system component, size lg. */
.psp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: 'DM Mono', ui-monospace, monospace;
	font-weight: 500; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 17px 36px; border-radius: 999px;
	cursor: pointer; white-space: nowrap;
	transition: transform 140ms var(--psp-ease), filter 220ms ease;
}
.psp-btn--primary { background: var(--psp-gold); color: var(--psp-ink); border: 1px solid var(--psp-gold); }
.psp-btn--primary:hover { filter: brightness(1.06); }
/* The pill is on an <a> now as well as a <button>, and `.psp a` sets a gold
   colour at 0-1-1 which beats a bare .psp-btn--primary at 0-1-0: the label
   came out gold on a gold pill, which is no label at all. Hover too, because
   `.psp a:hover` is the same specificity story. */
.psp a.psp-btn--primary,
.psp a.psp-btn--primary:hover { color: var(--psp-ink); }
.psp a.psp-btn--ghost:hover { color: var(--psp-gold-light); }
/* The plan is no longer the thing being asked for, so it no longer looks like
   it: gold on black rather than black on gold. */
.psp-btn--ghost { background: transparent; color: var(--psp-gold); border: 1px solid var(--psp-line-gold); }
.psp-btn--ghost:hover { border-color: var(--psp-gold); background: rgba(228, 175, 84, 0.08); }
.psp-btn[disabled] { opacity: 0.55; cursor: default; }
.psp-btn:active { transform: scale(0.98); }

/* ══════════════════════════════════════════════════════════════════════
   The sheet
   Letter size, in points, because that is the unit the design is drawn in and
   the one that means the same thing on paper.

   It is laid out rather than display:none, and parked off-screen. Two reasons.
   The button rasterises it to a PNG, and nothing can rasterise a box that was
   never laid out: display:none has no dimensions to photograph. And print uses
   the same element, so there is one sheet rather than a screen copy and a
   print copy that drift.
   ══════════════════════════════════════════════════════════════════════ */
/* .psp .psp-sheet, not .psp-sheet: `.psp section { position: relative }` above
   is 0-1-1 and would outrank a bare 0-1-0 class here, which left the sheet
   position:relative and therefore still in the flow. `left: -200vw` then moved
   it off screen without giving up the space it was holding, and a whole Letter
   page of empty black stood under the download button. */
.psp .psp-sheet {
	position: absolute; left: -200vw; top: 0;
	display: flex; flex-direction: column;
	width: 8.5in; min-height: 10.9in;
	padding: 0.65in 0.7in 0.6in;
	background: #000; color: #fff;
	overflow: hidden;
	font-family: 'Raleway', sans-serif; font-weight: 400;
	/* Without this the black ground is dropped when printed and the gold goes
	   grey, which is most of the design. */
	print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.psp .psp-sheet__maze { position: absolute; right: -2.2in; top: -1.6in; width: 6in; max-width: none; opacity: 0.06; }
.psp-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 16pt; position: relative; }
.psp-sheet__logo { height: 22pt; width: auto; }
.psp-sheet__kicker, .psp-sheet__eyebrow, .psp-sheet__cap, .psp-sheet__foot span {
	font-family: 'DM Mono', monospace; text-transform: uppercase;
}
.psp-sheet__kicker { font-size: 8pt; letter-spacing: 0.32em; color: var(--psp-gold); }
.psp-sheet__h1 {
	margin: 0.4in 0 0; font-weight: 700; letter-spacing: -0.045em;
	line-height: 1.05; font-size: 40pt; max-width: 6in; position: relative; color: #fff;
}
.psp-sheet .psp-sheet__four {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14pt;
	margin-top: 0.38in; border-top: 1px solid var(--psp-line);
	padding-top: 12pt; position: relative; list-style: none;
}
.psp-sheet__four li { display: flex; flex-direction: column; gap: 5pt; }
.psp-sheet__n { font-weight: 700; letter-spacing: -0.04em; font-size: 20pt; line-height: 1; color: var(--psp-gold); }
.psp-sheet__four li span + span { font-weight: 700; font-size: 10.5pt; line-height: 1.2; letter-spacing: -0.01em; }

.psp-sheet__plan { margin-top: 0.34in; position: relative; }
.psp-sheet__eyebrow { display: block; font-size: 8pt; letter-spacing: 0.32em; color: var(--psp-gold); margin-bottom: 12pt; }
.psp-sheet__plan > p, .psp-sheet__why p { font-size: 14pt; line-height: 1.4; font-weight: 400; text-wrap: pretty; }
.psp-sheet__plan > p + p, .psp-sheet__plan > div + p { margin-top: 13pt; }
.psp-sheet__why { display: flex; flex-direction: column; gap: 6pt; margin-top: 13pt; }

/* An answer. A rule under it either way, so an unfinished plan comes out as
   something to write on by hand rather than as a gap. */
.psp-fill {
	color: var(--psp-gold); font-weight: 700;
	border-bottom: 1px solid var(--psp-line-gold); padding: 0 2pt;
}
.psp-fill.is-blank { display: inline-block; min-width: 2.4in; }
.psp-fill--block {
	display: block; font-size: 13pt; line-height: 1.35;
	min-height: 2.7em; padding: 0 2pt 6pt; text-wrap: pretty;
}
.psp-fill--rule { display: block; min-height: 20pt; font-size: 14pt; line-height: 1.2; padding-bottom: 4pt; }
.psp-fill--sig {
	font-family: 'Homemade Apple', 'Segoe Script', cursive;
	font-size: 14pt; font-style: normal; line-height: 1.5; padding-bottom: 3pt;
}
.psp-fill--nowrap { white-space: nowrap; }

.psp-sheet__vow { margin-top: 0.32in; position: relative; border-top: 1px solid var(--psp-line); padding-top: 14pt; }
.psp-sheet__vow p { font-weight: 300; font-size: 10.5pt; line-height: 1.5; color: var(--psp-soft); max-width: 6.2in; text-wrap: pretty; }
.psp-sheet__choose { margin-top: 12pt; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-size: 22pt; color: var(--psp-gold); }

.psp-sheet__spacer { flex: 1; }
.psp-sheet__sign { display: grid; grid-template-columns: 1.2fr 1.3fr 1.1fr; gap: 0 20pt; position: relative; }
.psp-sheet__sign > div { display: flex; flex-direction: column; gap: 6pt; }
.psp-sheet__cap { font-size: 7.5pt; letter-spacing: 0.16em; color: var(--psp-mute); }
.psp-sheet__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.3in; position: relative; }
.psp-sheet__foot span { font-size: 7.5pt; letter-spacing: 0.16em; color: var(--psp-mute); }
.psp-sheet__foot-org { letter-spacing: 0.32em; }

@media print {
	/* Everything except the sheet goes, including whatever the theme puts
	   around the content: a header, a footer and a cookie bar would otherwise
	   be the first page of somebody's pledge. */
	body > * { display: none !important; }
	body .psp { display: block !important; position: static; width: auto; max-width: none; margin: 0; }
	.psp > section:not(.psp-sheet) { display: none !important; }
	.psp-sheet { position: static !important; left: auto !important; }
	@page { size: letter; margin: 0; }
}

/* ── Responsive ──
   The mock is one width. Each grid collapses where its own columns stop
   holding their content. The header narrows its side padding through the
   tablet band and again on mobile, so the content follows it: the same two
   steps, and the same spelling, the shared stylesheet makes for a fund page. */
@media (min-width: 981px) and (max-width: 1280px) {
	.psp { --fdm-gutter: calc(var(--fdm-mega-pad-h-tablet, 28px) / var(--fdm-page-zoom, 1)); }
}
@media (max-width: 980px) {
	.psp { --fdm-gutter: calc(24px / var(--fdm-page-zoom, 1)); }
	.psp-wall > .psp-wrap { padding-top: 56px; padding-bottom: 72px; }
	.psp-hero__inner { padding-bottom: 64px; }
	.psp-scroll { margin-top: 32px; }
	.psp-four > .psp-wrap { padding-top: 72px; padding-bottom: 76px; }
	.psp-plan > .psp-wrap { padding-top: 76px; }
	.psp-sign > .psp-wrap { padding-bottom: 80px; }
	.psp-h2 { margin-bottom: 40px; }
}
/* Two columns of body copy stop being two columns well before the phone
   breakpoint: the measure goes first, not the layout. */
@media (max-width: 900px) {
	.psp-four__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 640px) {
	.psp-four__list > li::before { font-size: 48px; }
	.psp-sign__line { font-size: 36px; }
	/* A pill wider than the phone is the one thing a nowrap label cannot do. */
	.psp-btn { width: 100%; white-space: normal; text-align: center; }
	/* Two half-width boxes on a phone are two boxes too narrow to type in. */
	.psp-input__row { grid-template-columns: minmax(0, 1fr); }
	.psp-pick__menu { max-height: 260px; }
	.psp-pick__opt { font-size: 16px; padding: 11px 12px; }
}