/* ONE SPACING AND ALIGNMENT SYSTEM for the whole site (24 Oct 2026, his: "text alignment, margins, padding better be
   consistent ... across website"). Loaded last, so it wins over every page's own rules.
   Width: one page width, one side margin. Rhythm: one section gap, one heading gap, one paragraph gap.
   Alignment: a section's opening head (.h-head) is centred; everything else reads from the left; on a phone,
   everything reads from the left. */
:root{
  --page:1220px; --side:28px;
  --sec:96px;           /* above and below every section */
  --head-gap:48px;      /* between a section's head and what follows */
  --eye-gap:14px;       /* between an eyebrow and its heading */
  --h-gap:18px;         /* between a heading and its first line */
  --p-gap:16px;         /* between paragraphs */
  --grid:28px;          /* between cards, rows and columns */
  --card-pad:28px;
}
@media (max-width:860px){:root{--side:20px;--sec:64px;--head-gap:32px;--grid:20px;--card-pad:22px}}

/* cards side by side share one row grid, so each part (photo, eyebrow, title, text, figure, link) lines up across the
   row whatever the wording (his, 25 Oct 2026: the leverage-point cards' figure lines sat at three heights) */
@media (min-width:861px){
  .lps{grid-template-rows:repeat(6,auto);row-gap:0!important}
  .lps > .lp{display:grid!important;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .lps .lp-in{grid-row:span 5;display:grid!important;grid-template-rows:subgrid;row-gap:12px}
  .lps .lp-fig{margin-top:0;align-self:start}
  .lps .lp-in .arrow{align-self:end}
}

/* buttons and form fields in the site's own type (25 Oct 2026, website check: the story arrows fell back to Arial) */
button,input,select,textarea{font-family:Poppins,system-ui,sans-serif}

/* one width, one side margin */
.wrap,.row,.hd-in,.lh-in,.lb-in,.ft-top .in,.ft .in,.ft-note .in{max-width:var(--page)!important;padding-left:var(--side)!important;padding-right:var(--side)!important;margin-left:auto;margin-right:auto;box-sizing:border-box}
.row .row,.col .row{padding-left:0!important;padding-right:0!important}
.art-page{padding-left:var(--side);padding-right:var(--side)}

/* one section rhythm */
.h-sec,.sec:not(.hero):not(.h-hero),.lp-num,.lp-quote,.lp-cta,.ab-ceo,.ab-mission,.d-learner,.ed-top,.list-body,.pg-fb,.h-partners,.related{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}
.list-head{padding-top:var(--sec)!important;padding-bottom:calc(var(--sec) / 2)!important}
.lp-next{padding:0!important}
.h-hero .wrap{padding-top:calc(var(--sec) * 1.1)!important;padding-bottom:calc(var(--sec) * 1.1)!important}
@media (max-width:860px){.h-hero:has(.h-jub) .wrap{padding-bottom:180px!important}}   /* room for the 25-year badge under the buttons */

/* one head: eyebrow, heading, line, then the content */
.h-head,.st-top{margin-bottom:var(--head-gap)!important}
.h-head h2,.st-top h2,.lp-h,.wy-gh h2,.ed-head h1,.d-h2,.list-head h1{margin-top:var(--eye-gap)!important;margin-bottom:var(--h-gap)!important}
.h-head p{margin-top:0!important}
.lp-h{margin-top:var(--eye-gap)!important}
.eyebrow-t,.sec-eye{margin-bottom:0!important}

/* one paragraph rhythm */
main p{margin-top:0}
.lp-body p,.lp-solve p,.ab-body p,.wy-gh p,.d-p,.lp-lt p,.it-html p,.art-body p{margin-bottom:var(--p-gap)!important}
.lp-body p:last-child,.lp-solve p:last-child,.ab-body p:last-child,.wy-gh p:last-child,.it-html p:last-child{margin-bottom:0!important}

/* one gap between things side by side */
.posts,.lp-routes,.d-others,.d-wish,.d-tiers,.ed-grid,.pg-grid,.ab-board,.people,.lp-lead,.lps,.h-stats,.d-give{gap:var(--grid)!important}
.lp-problem,.ab-story,.wy-g,.d-eft,.d-learner .wrap,.ed-top .wrap{gap:calc(var(--grid) * 2)!important}
.lp-fa,.lp-fa + .lp-fa,.ab-steps li,.ab-steps li + li,.lp-n,.lp-n + .lp-n,.ab-three figure,.ab-three figure + figure,.pg-p,.pg-p + .pg-p{padding-top:var(--card-pad)!important;padding-bottom:var(--card-pad)!important}
.d-tier,.d-card,.d-other,.d-w,.lp-route .lp-rin,.d-l-side,.d-bank,.gt-goal,.d-nw,.wy-signup,.ed-latest{padding:var(--card-pad)!important}

/* alignment: the opening head of a section is centred, everything else reads from the left */
.h-head{text-align:center!important}
.h-head .eyebrow-t{justify-content:center}
.h-head p{margin-left:auto!important;margin-right:auto!important}
main .lp-body,main .lp-pr,main .lp-solve,main .ab-body,main .ab-story,main .wy-g,main .wy-rows,main .d-eft,main .lp-lead,main .pg-p,main .pg-card,main .lp-fa,main .ab-three,main .ab-tr,main .d-tier,main .d-other,main .d-w,main .ed-item,main .card-in,main .rcard-in,main .lp-rin,main .lp-n,main .lp-feat,main .art-in{text-align:left!important}
.lp-cta,.lp-cta *{text-align:center}
.lp-quote blockquote,.lp-quote cite{text-align:center}

/* phones: everything reads from the left */
@media (max-width:860px){
  :where(main, main *:not(.btn, .pill, .yt-play)){text-align:left!important}   /* weightless, so a section's own rule (a centred head) wins */
  main .eyebrow-t,main .sec-eye{justify-content:flex-start!important}
  main .h-head p,main .h-head h2{margin-left:0!important;margin-right:0!important}
  main .acts,main .lp-cta .acts,main .pg-fb .acts{justify-content:flex-start!important}
  .lp-quote blockquote::before{left:0!important;margin-left:0!important}
  .chips{justify-content:flex-start!important}
  /* a section's head under a divider stays centred on a phone too, as on a computer (his, 25 Oct 2026) */
  main .h-head,main .h-head *,main .lh-in > .lh-eye,main .lh-in > h1,main .lh-in > .lh-sub{text-align:center!important}
  main .h-head .eyebrow-t,main .lh-in > .lh-eye,main .h-partners .eyebrow-t{justify-content:center!important}
  main .h-head p,main .h-head h2{margin-left:auto!important;margin-right:auto!important}
}
/* dividers sit in the middle, at every width (his, 25 Oct 2026: "should dividers not be in middle center?") */
.dvd,.lh-div,main .divider,main img[src*="divider"]{display:block;margin-left:auto!important;margin-right:auto!important}
main .divider{justify-content:center}
/* an eyebrow straight under a teardrop divider carries no teardrop of its own (one teardrop, not two) */
.dvd + .eyebrow-t::before,.lh-div + .eyebrow-t::before,.divider + .eyebrow-t::before,.divider + .sec-eye::before,.lh-div + .lh-eye .drop,.dvd + .lh-eye .drop,main img[src*="divider"] + .eyebrow-t::before,main img[src*="divider"] + .sec-eye::before{display:none!important}
.dvd + .eyebrow-t,.lh-div + .lh-eye{padding-left:0!important}
/* the reading column starts at the same left edge as every other page */
.doc main .sec:not(.photo):not(.dark) .row{max-width:var(--page)!important}
.doc main .sec:not(.photo):not(.dark) .col{max-width:min(820px,100%)!important;flex-basis:min(820px,100%)!important}   /* never wider than the screen (25 Oct 2026, website check at 768px) */
.doc main .it-html > div,.doc main .it-html div[style]{margin-left:0!important;padding-left:0!important;max-width:none!important}
.doc main ul,.doc main ol{padding-left:1.3em}
.doc main .sec.photo{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}

/* heard by screen readers, not shown (a story list's heading level, 25 Oct 2026) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* a link that ends a card can be tapped with a thumb (25 Oct 2026, website check: 38 under 32px on a phone) */
a.arrow,.arrow a,a.card-more,.d-other .arrow{display:inline-flex;align-items:center;min-height:44px}