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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ═══ page-specific: podcast ═══ */
/* ═══════════════════════════════════════════════════════════════
   Podcast page — funds/podcast/page.css
   Appended after shared/fund-page.css at push time. Everything here
   is scoped under .fdm-podcast-page (the page deliberately does NOT
   use .fdm-fund-page, so the shared fund rules stay inert).
   ═══════════════════════════════════════════════════════════════ */
@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');

/* Anchor links (#featured) scroll smoothly — only when this page is present */
html:has(.fdm-podcast-page) { scroll-behavior: smooth; }

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

/* Voices portraits: grayscale at rest (inline filter), full color on hover
 * of the card. !important because the resting filter is an inline style. */
.fdm-podcast-page .pp-voice img,
.fdm-podcast-page .pp-tile img { transition: filter .35s ease; }
.fdm-podcast-page .pp-voice:hover img,
.fdm-podcast-page .pp-tile:hover img { filter: grayscale(0) contrast(1.02) brightness(1) !important; }

/* ---- Base / tokens ---- */
.fdm-podcast-page {
	--swgp-black: #000000;
	--swgp-off-black: #0b0b0b;
	--swgp-charcoal: #161616;
	--swgp-charcoal-2: #121110;
	--swgp-white: #ffffff;
	--swgp-gold: #e4af54;
	--swgp-gold-light: #e5cf8f;
	--swgp-gold-ink: #1a1206;
	--swgp-text-soft: rgba(255,255,255,0.72);
	--swgp-text-muted: rgba(255,255,255,0.50);
	--swgp-line: rgba(255,255,255,0.14);
	--swgp-line-soft: rgba(255,255,255,0.10);
	--swgp-line-gold: rgba(228,175,84,0.45);
	--swgp-line-gold-soft: rgba(228,175,84,0.20);
	--swgp-tint-gold: rgba(228,175,84,0.10);
	--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;
	background: #000;
	color: #fff;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.fdm-podcast-page h1,
.fdm-podcast-page h2,
.fdm-podcast-page h3,
.fdm-podcast-page h4,
.fdm-podcast-page p {
	margin: 0;
	padding: 0;
}
.fdm-podcast-page img { max-width: none; }
.fdm-podcast-page ::selection { background: #e4af54; color: #1a1206; }
.fdm-podcast-page :where(a) { color: #e4af54; text-decoration: none; }
.fdm-podcast-page :where(a:hover) { color: #e5cf8f; }

/* ---- Eyebrow (carved from the design system's Eyebrow, tick=true) ---- */
.fdm-podcast-page .pp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #e4af54;
}
/* No bullet. Every eyebrow on this page carried an 11px gold square in front
   of it, drawn here rather than typed into each one, which is why removing it
   is one rule and not a dozen edits.

   The inline-flex and the gap stay: an eyebrow is still a row, and a couple of
   them put a second element beside the label. With nothing before the text the
   gap simply has nothing to space, and leaving it means a future eyebrow with
   two parts does not have to re-derive the spacing. */

/* ---- Buttons (carved from the design system's Button) ---- */
.fdm-podcast-page .pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 13px 26px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 140ms cubic-bezier(0.22,0.61,0.36,1), filter 220ms ease, background 220ms ease;
}
.fdm-podcast-page .pp-btn-lg { gap: 12px; font-size: 18px; padding: 17px 36px; }
.fdm-podcast-page .pp-btn-primary { background: #e4af54; color: #1a1206; border: 1px solid #e4af54; }
.fdm-podcast-page .pp-btn-primary:hover { color: #1a1206; filter: brightness(1.06); }
.fdm-podcast-page .pp-btn-outline { background: transparent; color: #e4af54; border: 1px solid rgba(228,175,84,0.45); }
.fdm-podcast-page .pp-btn-ghost { background: transparent; color: #fff; border: 1px solid transparent; }
.fdm-podcast-page .pp-btn-outline:hover { color: #e4af54; background: rgba(228,175,84,0.10); filter: brightness(1.2); }
.fdm-podcast-page .pp-btn-ghost:hover { color: #fff; background: rgba(228,175,84,0.10); filter: brightness(1.2); }
.fdm-podcast-page .pp-btn:active { transform: scale(0.98); }

/* ---- Hover states carved from the design's style-hover attributes ----
   (!important where the resting value sits in an inline style) */
.fdm-podcast-page .pp-chip:hover { border-color: rgba(228,175,84,0.6) !important; background: rgba(228,175,84,0.08); }
.fdm-podcast-page .pp-play:hover { background: rgba(228,175,84,0.28) !important; color: #fff; transform: scale(1.05); }
.fdm-podcast-page .pp-card:hover { border-color: rgba(228,175,84,0.6) !important; transform: translateY(-4px); }
.fdm-podcast-page .pp-voice:hover { border-color: #e4af54 !important; transform: translateY(-4px); }
.fdm-podcast-page .pp-tile:hover { border-color: rgba(228,175,84,0.7) !important; transform: translateY(-4px); }
.fdm-podcast-page .pp-arrow:hover { border-color: rgba(228,175,84,0.6) !important; background: rgba(228,175,84,0.10); }
.fdm-podcast-page .pp-sub:hover { border-color: rgba(228,175,84,0.6) !important; color: #e4af54 !important; }

/* ---- Responsive (the design mock was desktop-only, min-width 1100px) ---- */
@media (max-width: 1080px) {
	.fdm-podcast-page .pp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.fdm-podcast-page .pp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
	.fdm-podcast-page .pp-split { grid-template-columns: 1fr !important; gap: 40px !important; }
	.fdm-podcast-page .pp-slide { grid-template-columns: 1fr !important; min-height: 0 !important; }
	.fdm-podcast-page .pp-slide-media { min-height: 300px; }
	.fdm-podcast-page .pp-slide-body { padding: 36px 32px 32px !important; }
}
@media (max-width: 640px) {
	.fdm-podcast-page .pp-wrap { padding-left: 24px !important; padding-right: 24px !important; }
	.fdm-podcast-page .pp-grid-2,
	.fdm-podcast-page .pp-grid-3,
	.fdm-podcast-page .pp-grid-4 { grid-template-columns: 1fr !important; }
	/* Voices: people cards stay 2-up on phones (1-up wastes the portraits). */
	.fdm-podcast-page #voices .pp-grid-3,
	.fdm-podcast-page #voices .pp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
	.fdm-podcast-page #voices .pp-voice h3 { font-size: 17px !important; }
	.fdm-podcast-page #voices .pp-voice p,
	.fdm-podcast-page #voices .pp-tile p { font-size: 12.5px !important; }
	.fdm-podcast-page h1 { font-size: 44px !important; }
	.fdm-podcast-page .pp-slide h3 { font-size: 28px !important; }
	.fdm-podcast-page .pp-slide-media { min-height: 220px; }
	.fdm-podcast-page .pp-slide-body { padding: 28px 22px 26px !important; }
	.fdm-podcast-page .pp-listenbar { flex-wrap: wrap; }
	.fdm-podcast-page .pp-listenbar .pp-chip { height: 48px !important; padding: 0 20px !important; }
	.fdm-podcast-page .pp-eyebrow { font-size: 14px; }
	.fdm-podcast-page .pp-btn-lg { font-size: 16px; padding: 14px 26px; }
	.fdm-podcast-page .pp-btn { white-space: normal; text-align: center; }
}