/* Stellar sub-pages (about, our story, get involved, donate). Built on /_home/rework.css: same tokens, type,
   buttons, nav and footer. Inter at 400-500, near-black and greys, hairlines, green only for "included" and focus. */

/* current page in the nav: the same quiet grey the dropdown buttons use when open */
.nav-link[aria-current=page]{color:var(--ink);background:var(--soft-2)}
.dd-item[aria-current=page]{background:var(--soft)}
@media (max-width:899px){.mm-link[aria-current=page]{color:var(--ink)}.mm-link[aria-current=page]::after{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--ink)}}

/* page head: centred, like the home hero but one step smaller */
.ph{padding:104px 0 88px;text-align:center}
.ph .eyebrow{justify-content:center}
.ph h1{max-width:920px;margin:18px auto 0;font:400 clamp(40px,5.4vw,72px)/1.06 var(--font);letter-spacing:-.04em;color:var(--ink)}
.ph .lead{max-width:660px;margin:26px auto 0;font-size:19px}
.ph-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px}
.ph-ctas .btn{height:52px;padding:0 26px;font-size:16.5px}
.ph-note{margin-top:22px;font:400 14.5px/1.5 var(--font);color:var(--muted)}

/* sections are told apart by their band shade, not a hairline (owner rule: no rules between sections) */
.ruled{padding-top:0;border-top:0}
.sec.tight{padding-top:0}
.sec-head .eyebrow+.h2{margin-top:14px}
.sec-head.center .eyebrow{justify-content:center}

/* split section head: title on the left, text on the right (home partners head) */
.split-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:end}
.split-head .h2{margin-top:14px}
.split-head .lead{margin:0;max-width:560px}
.split-head .lead+.lead{margin-top:14px}

/* plain arrow link, the home "Try it in the app" link */
.go{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.3 var(--font);color:var(--ink);white-space:nowrap}
.go svg{width:16px;height:16px;flex:none;transition:translate var(--dur-1) var(--ease)}
a:hover .go svg,.go:hover svg{translate:3px 0}
a:hover .go,.go:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.go.ext svg{width:14px;height:14px}
a:hover .go.ext svg,.go.ext:hover svg{translate:2px -2px}

@media (max-width:1024px){
  .split-head{grid-template-columns:1fr;gap:20px}
}
@media (max-width:720px){
  .ph{padding:56px 0 56px}
  .ph h1{font-size:clamp(34px,9.6vw,44px);line-height:1.1}
  .ph .lead{font-size:17px;line-height:1.65;margin-top:22px}
  .ph-ctas{margin-top:28px}
  .ph-ctas .btn{flex:1 1 auto;padding:0 18px;font-size:15px}
}


/* ================= our story ================= */
html{scroll-padding-top:150px}
.ph{padding-bottom:72px}

/* explore by year: a white bar under a hairline that sticks under the header, underline tabs */
.ybar{position:sticky;top:68px;z-index:40;background:var(--paper);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ybar-in{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:64px}
.ybar-t{display:flex;align-items:baseline;gap:16px;min-width:0}
.ybar-t b{font:500 15px/1.3 var(--font);color:var(--ink);white-space:nowrap}
.ybar-t span{font:400 14px/1.45 var(--font);color:var(--muted);max-width:520px}
.ytabs{display:flex;gap:28px;align-self:stretch}
.ytabs a{display:flex;align-items:center;justify-content:center;min-width:44px;font:500 15px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums;transition:color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.ytabs a:hover{color:var(--ink)}
.ytabs a[aria-current=true],.ytabs a[aria-current]:not([aria-current=false]){color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.ytabs a:focus-visible{outline-offset:-3px;border-radius:var(--radius-s)}
.yr:focus,.yr:focus-visible,.ev:focus,.ev:focus-visible{outline:none!important}

/* timeline: each year is a block, the year sticks on the left while its months scroll by */
.story{padding-top:104px}
.tl{margin-top:72px}
.yr{display:grid;grid-template-columns:300px 1fr;gap:64px;padding:56px 0 24px;border-top:1px solid var(--line)}
/* a year tab jump tucks the year's top hairline under the bar's own hairline, so the two never double up */
.yr{scroll-margin-top:-17px}
.yr-side{position:sticky;top:164px;align-self:start}
.yr-n{font:400 clamp(48px,5.4vw,72px)/1 var(--font);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.yr-lab{margin-top:14px;font:500 16px/1.3 var(--font);color:var(--ink)}
.yr-sum{margin-top:10px;font:400 15.5px/1.6 var(--font);color:var(--text);max-width:300px}
.months{list-style:none;margin:0;padding:0}
.mo{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:28px 0 8px}
.mo+.mo{border-top:1px dashed var(--rule-dash)}
.mo-n{padding-top:3px;font:500 15px/1.3 var(--font);color:var(--muted)}
.ev{padding-bottom:24px;scroll-margin-top:11px}
.ev+.ev{padding-top:4px}
.ev-cat{font:400 13.5px/1.3 var(--font);color:var(--muted)}
.ev h4{margin-top:6px;font:500 21px/1.3 var(--font);letter-spacing:-.02em;color:var(--ink)}
.ev h4+p{margin-top:8px}
.ev p:not(.ev-cat){font:400 16px/1.7 var(--font);color:var(--text);max-width:640px}
.ev p+p:not(.ev-cat){margin-top:10px}
.ev b{font-weight:500;color:var(--ink)}
.ev a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;text-decoration-thickness:1px}
.ev a:hover{text-decoration-color:var(--ink)}
.ev a:focus-visible,.ix-y li a:focus-visible{border-radius:var(--radius-s)}
.ev a[target="_blank"] .nw::after{content:"";display:inline-block;width:11px;height:11px;margin-left:4px;vertical-align:-1px;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16L16 8M9 8h7v7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16L16 8M9 8h7v7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.65;transition:opacity var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}
.ev a[target="_blank"]:hover .nw::after{opacity:1;translate:1px -1px}
.ev:target h4{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:6px;text-decoration-thickness:2px}

/* learner network: one quiet dot chart from two real numbers */
.net{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.net-copy .lead{max-width:420px}
.dots{margin:0}
.d-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:18px}
.d-head b{font:500 15px/1.3 var(--font);color:var(--ink)}
.d-head span{font:400 14px/1.4 var(--font);color:var(--muted)}
.drow{display:grid;grid-template-columns:130px 1fr;gap:6px 24px;align-items:start;padding:22px 0;border-bottom:1px dashed var(--rule-dash)}
.drow:first-of-type{border-top:1px solid var(--line)}
.d-when b{display:block;font:500 15px/1.3 var(--font);color:var(--ink)}
.d-when span{display:block;margin-top:2px;font:400 13.5px/1.3 var(--font);color:var(--muted)}
.d-grid{display:grid;grid-template-columns:repeat(30,1fr);gap:6px;max-width:420px;padding-top:4px}
.d-grid i{display:block;aspect-ratio:1;border-radius:var(--radius-pill);background:var(--line-2)}
.d-grid i.on{background:var(--green)}
.d-val{grid-column:2;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:10px}
.d-val b{font:400 26px/1 var(--font);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.d-val span{font:400 14px/1.3 var(--font);color:var(--muted)}
.dots figcaption{margin-top:14px;font:400 13.5px/1.5 var(--font);color:var(--muted)}

/* overall facts: three numbers between hairlines */
.facts{display:flex;justify-content:center;flex-wrap:wrap;margin:56px 0 0}
.facts div{padding:2px var(--stat-pad,28px);text-align:center}
.facts div+div{border-left:1px solid var(--line)}
.facts dt{font:400 var(--stat-num,34px)/1 var(--font);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.facts dd{margin:8px 0 0;font:400 13px/1.3 var(--font);color:var(--muted)}

/* at a glance: four year columns of milestone links */
.summary-sec{padding-bottom:112px}
.ix{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
.ix-y{padding:28px 24px 8px}
.ix-y:first-child{padding-left:0}
.ix-y+.ix-y{border-left:1px solid var(--line)}
.ix-y h3{font:400 34px/1 var(--font);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ix-y .yr-lab{margin-top:10px;font-size:14.5px;color:var(--muted);font-weight:400}
.ix-y ul{list-style:none;margin:18px 0 0;padding:0}
.ix-y li a{display:block;padding:9px 0;border-top:1px dashed var(--rule-dash);font:400 14.5px/1.4 var(--font);color:var(--ink)}
.ix-y li a span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.ix-y li a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink)}

@media (max-width:1180px){
  .ybar-t span{display:none}
}
@media (max-width:1024px){
  .yr{grid-template-columns:1fr;gap:24px}
  .yr-side{position:static}
  .yr-sum{max-width:600px}
  .net{grid-template-columns:1fr;gap:36px}
  .ix{grid-template-columns:repeat(2,1fr)}
  .ix-y:nth-child(3){border-left:0;padding-left:0}
  .ix-y:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:899px){
  .ybar{top:64px}
  html{scroll-padding-top:136px}
  .yr{scroll-margin-top:-7px}
  .ev{scroll-margin-top:21px}
}
/* swarm R26/R27/R28: ensure event story links reach 28px tap/click minimum across all viewports */
.ev a{padding-block:4px;margin-block:-4px}
@media (max-width:720px){
  .ybar-in{min-height:52px;gap:16px}
  .ybar-t{display:none}
  .ytabs{width:100%;justify-content:space-between;gap:0}
  .ytabs a{padding:0 6px}
  .story{padding-top:72px}
  .tl{margin-top:48px}
  .yr{padding-top:40px;scroll-margin-top:-19px}
  .mo{grid-template-columns:1fr;gap:6px;padding-top:22px}
  .ev{scroll-margin-top:32px}
  .ev+.ev{scroll-margin-top:4px}
  .ev h4{font-size:19px}
  .ev p:not(.ev-cat){font-size:15.5px}
  .ev a{padding-block:5px;margin-block:-5px}
  .drow{grid-template-columns:1fr;gap:12px}
  .d-val{grid-column:1;margin-top:0}
  .d-grid{grid-template-columns:repeat(18,1fr);max-width:none;gap:5px}
  .facts{flex-wrap:nowrap}
  .facts div{flex:1 1 0;padding:12px 8px}
  .facts dt{font-size:24px}
  .ix{grid-template-columns:1fr}
  .ix-y,.ix-y:first-child,.ix-y:nth-child(3){padding:24px 0 8px;border-left:0}
  .ix-y+.ix-y{border-top:1px solid var(--line);border-left:0}
  .summary-sec{padding-bottom:72px}
}
/* green hint (owner 2026-10-21): the home page's hand-drawn swash under one headline word, plus the active year tab underline in green */
.gsw{position:relative;display:inline-block;padding-bottom:.1em}
.gsw::after{content:"";position:absolute;inset:auto 0 0;height:.2em;background:var(--green);pointer-events:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ytabs a[aria-current=true],.ytabs a[aria-current]:not([aria-current=false]){box-shadow:inset 0 -2px 0 var(--green)}
/* a1 (2026-10-22): the 2023 / 501(c)(3) / 45,000+ facts row closes with its own hairline, so the summary section
   below starts on white space instead of a second rule about 110px lower */
.summary-sec .ruled{border-top:0}

/* The shared motion preference also covers page-specific links and controls. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .go svg,.pp-links a,.ytabs a,.ways a,.col,.roles a,.freq-b,.ask input,.ev a[target="_blank"] .nw::after{transition:none!important}
  a:hover .go svg,.go:hover svg,a:hover .go.ext svg,.go.ext:hover svg,.ev a[target="_blank"]:hover .nw::after{transform:none!important;translate:none!important;scale:none!important;rotate:none!important}
  .ask[open]{animation:none}
}

/* swarm R12 home-marketing: the hand-drawn underline crossed the descender of "grew". A halo in the hero paper
   colour, painted under the letters, breaks the line around descenders (like skip-ink) without moving it. */
.gsw{isolation:isolate;-webkit-text-stroke:.07em var(--band-paper,#f8f8f6);paint-order:stroke fill}
.gsw::after{z-index:-1}

/* swarm R16 home-marketing: the year bar stayed stuck under the header through the summary, the final call to action
   and the footer (still showing "2026"). our-story.js adds .is-past once the 2026 section has scrolled past the bar,
   and the bar slides up behind the header and fades out. Scrolling back into the timeline brings it back. */
.ybar{transition:translate .24s cubic-bezier(.2,.7,.2,1),opacity .16s cubic-bezier(.2,.7,.2,1),visibility 0s}
.ybar.is-past{translate:0 -100%;opacity:0;visibility:hidden;pointer-events:none;transition:translate .24s cubic-bezier(.2,.7,.2,1),opacity .16s cubic-bezier(.2,.7,.2,1),visibility 0s .24s}
@media (prefers-reduced-motion:reduce){.ybar,.ybar.is-past{transition:none}}

/* swarm R29 home-marketing-story: (1) leads and headings left one word alone on the last line ("learners." under the
   hero at 1440, "unfold." at 375). Balanced headings and pretty-wrapped leads keep the last line from being a lone word.
   (2) On phones the first dot-chart value ("5,000+ learners ...") sat on one line while the second ("45,000+" then the
   label below) wrapped, so the two rows read differently. Phones now stack number and label the same way in both rows. */
.ph h1,.sec-head .h2,.split-head .h2,.net-copy .h2{text-wrap:balance}
.ph .lead,.sec-head .lead,.split-head .lead,.net-copy .lead,.yr-sum{text-wrap:pretty}
@media (max-width:720px){
  .d-val{flex-direction:column;align-items:flex-start;gap:6px}
}

/* swarm R30 home-marketing-story: phones only. (1) In the timeline the month ("July") and the event label ("Product")
   were two grey labels stacked in the same tone, so the month did not read as the heading of its group. It now takes
   ink, like the year labels, with a little room before the first event. (2) The "at a glance" index put each month on
   its own line above the title, so 37 rows ran about 2,200px on a 375px screen. Month and title now share one row
   (month in a fixed grey column), which keeps it a scannable index, halves its height and keeps 40px+ tap rows. */
@media (max-width:720px){
  .mo-n{color:var(--ink);padding-top:0;margin-bottom:2px}
  .ix-y li a{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;min-height:44px;padding:12px 0}
  .ix-y li a span{margin-bottom:0;font-size:13px}
}

/* swarm R31 home-marketing-story: tablets (721-1024px). The "at a glance" index was a 2 by 2 grid, so 2023 (2 rows)
   sat beside 2024 (14 rows) and left a tall empty cell, and 2026 (4 rows) sat beside 2025 (10 rows). It now flows as
   two balanced columns read top to bottom (2023 + 2024, then 2025 + 2026) with one hairline between them. */
@media (min-width:721px) and (max-width:1024px){
  .ix{display:block;columns:2;column-gap:48px;column-rule:1px solid var(--line)}
  .ix-y,.ix-y+.ix-y,.ix-y:first-child,.ix-y:nth-child(3){padding:28px 0 8px;border-left:0;border-top:0;break-inside:avoid}
  .ix-y:nth-child(2),.ix-y:nth-child(4){border-top:1px solid var(--line)}
}

/* swarm R33 home-marketing-story: small phones. The three facts (2023 / 501(c)(3) / 45,000+) were squeezed into
   three 110px cells: 24px numbers ran almost into the hairlines and every label broke onto two lines. They now use
   the home page's phone stats grid: two cells side by side with a hairline between, the third across the full width
   under a hairline, 26px numbers and 13.5px labels on one line. */
@media (max-width:520px){
  .facts{display:grid;grid-template-columns:1fr 1fr;margin-top:44px}
  .facts div{padding:18px 8px}
  .facts div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .facts dt{font-size:26px}
  .facts dd{font-size:13.5px}
}

/* swarm R34 home-marketing-story: (1) .drow:first-of-type restores top hairline framing the learner dot chart. (2) .ytabs a min-width 44px ensures >=44px tap targets on tablets. (3) .ix-y li a on phones has min-height 44px and 12px padding ensuring 45px tap targets. (4) .ix-y li a:hover underline uses ink for crisp contrast. (5) .ev a[target="_blank"] gets an outbound arrow indicator matching the site icon system. */


/* swarm R38 home-marketing-story (idle audit 06:01 items 1, 4, 5, 6, 7, 10).
   (1) The outbound arrow wrapped onto a line of its own ("Shinwoo Lee" at 1440, "INSPIRATE Consulting" at 375). The
   arrow now sits on a nowrap span around the link's last word, so word and arrow always share a line.
   (4) People's names were 500 ink, the same tone as the underlined partner links, so they read as links. They keep the
   500 weight for emphasis but take the paragraph grey; only real links are ink and underlined. */
.ev .nw{white-space:nowrap}
.ev b{color:inherit}
/* (6) Jumping to a year's last milestone ("Product Testing") left too little room under it, so the sticky year column
   was pushed up and the big "2024" hid under the year bar. The last month of each year is now at least as tall as the
   year column needs, so the year stays in view at its last milestone. Desktop only (the column is not sticky below). */
@media (min-width:1025px){.months>.mo:last-child{min-height:280px}}
/* (10) The hero underline's halo cut the stroke around the "g" descender and left a small hook at the start. The stroke
   now starts after the descender, under the "r", as on /about/. */
.gsw::after{left:.5em}
@media (max-width:1024px){
  /* swarm R40: inline partner links reach 44px minimum tap target height on all touch viewports (<=1024px) */
  .ev a{padding-block:13px;margin-block:-13px}
}
@media (max-width:720px){
  /* (5) Owner rule and the home page's phone stats: the three facts stay in one row of centred numbers between
     vertical hairlines (no 2 + 1 split), with smaller numbers and labels balanced over two lines. */
  .facts{display:flex;flex-wrap:nowrap;margin-top:44px}
  .facts div{flex:1 1 auto;padding:4px 8px}
  .facts div:nth-child(3){border-top:0;border-left:1px solid var(--line)}
  .facts dt{font-size:clamp(19px,5.8vw,24px)}
  .facts dd{font-size:13px;text-wrap:balance}
}

/* swarm R46 home-marketing-story (idle audit 16:11 items 1, 2, 4).
   (1) "At a glance" repeated all 30 milestones under the timeline, about 1,800px on a phone. Each year is now a
   disclosure (accordion pattern): open and inert on desktop, where four columns fit one screen, and closed on phones
   and tablets (our-story.js), one 64px row per year with its milestone count and a chevron. */
.ix-y summary{display:block;list-style:none;cursor:default}
.ix-y summary::-webkit-details-marker{display:none}
.ix-y summary .yr-lab{display:block}
.ix-n{display:block;margin-top:4px;font:400 13px/1.3 var(--font);color:var(--muted)}
@media (max-width:1024px){
  .ix,.ix-y,.ix-y+.ix-y,.ix-y:first-child,.ix-y:nth-child(3),.ix-y:nth-child(2),.ix-y:nth-child(4){display:block;columns:auto;column-rule:0;padding:0;border-left:0;border-top:0}
  .ix-y{border-bottom:1px solid var(--line)}
  .ix-y summary{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:16px;min-height:64px;padding:18px 36px 18px 0;cursor:pointer;border-radius:var(--radius-s)}
  .ix-y summary h3{font-size:28px}
  .ix-y summary .yr-lab{margin:0;font-size:15px;color:var(--ink);font-weight:500}
  .ix-y summary .ix-n{margin:0}
  .ix-y summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);rotate:45deg;transition:rotate var(--dur-2,240ms) var(--ease,ease),margin var(--dur-2,240ms) var(--ease,ease)}
  .ix-y[open] summary::after{rotate:225deg;margin-top:-2px}
  .ix-y summary:focus-visible{outline-offset:2px}
  .ix-y ul{margin:0 0 16px}
  .ix-y li a{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;min-height:44px;padding:10px 0}
  .ix-y li a span{margin-bottom:0;font-size:13px}
}
@media (max-width:520px){
  .ix-y summary{grid-template-columns:auto 1fr;row-gap:2px}
  .ix-y summary .ix-n{grid-column:2}
}
@media (max-width:1024px) and (hover:hover){.ix-y summary:hover .yr-lab{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
@media (prefers-reduced-motion:reduce){.ix-y summary::after{transition:none}}
/* (2) The 44px tap boxes on inline partner links overlapped the link on the line above or below ("Reducto" over
   "Abhigyan Arya"), so a tap could open the wrong site. The extra area is now capped at half the line gap, so the
   boxes of stacked links meet but never overlap (inline-link exception of the target-size rule). */
@media (max-width:1024px){.ev a{padding-block:3px;margin-block:-3px}}
/* (4) In long months (September 2024 has 5 milestones) the month label scrolled away after the first item and the
   rest sat beside an empty date column. The label now sticks beside its items, level with the sticky year. */
@media (min-width:721px){.mo-n{position:sticky;top:164px;align-self:start}}
@media (min-width:721px) and (max-width:899px){.mo-n{top:150px}}

/* swarm R49 home-marketing-story: the year bar's background is opaque paper in both themes, so its backdrop blur
   showed nothing but still re-blurred the page under it on every scroll frame while the bar is stuck. Dropped. */
.ybar{backdrop-filter:none;-webkit-backdrop-filter:none}

/* swarm R50 home-marketing-story: (1) The year tabs were 44px boxes around about 40px of digits, so the keyboard focus
   ring hugged "2024" with no room (owner rule: hover and focus boxes comfortably padded). Each tab now has 14px side
   padding with the ring inset 6px (a 56 by 52 box at 1440), the gap shrinks so the tab pitch stays 72px, and the green
   underline is drawn under the label only, as before. (2) At a glance on desktop: the last year column kept 24px of
   right padding, so its dashed rows stopped short of the top hairline and the container edge. */
.ytabs{gap:4px}
.ytabs a{position:relative;padding:0 14px}
.ytabs a[aria-current=true],.ytabs a[aria-current]:not([aria-current=false]){box-shadow:none}
.ytabs a[aria-current=true]::after,.ytabs a[aria-current]:not([aria-current=false])::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--green)}
.ytabs a:focus-visible{outline-offset:-6px;border-radius:var(--radius-m,10px)}
@media (max-width:720px){.ytabs{gap:0}.ytabs a{padding:0 14px}}
@media (min-width:1025px){.ix-y:last-child{padding-right:0}}

/* swarm R52 home-marketing-story: /our-story/ had no way back to the people it names except the footer, while /about/
   links here with "Read our story" (idle audit 02:10 #3). The hero now ends with the same "Meet the team" link as the
   founders' letter on /about/, centred under the lead, with a 44px tap box. */
.ph-links{display:flex;justify-content:center;margin-top:20px}
.ph-links .go{min-height:44px;padding-inline:10px;margin-block:0;border-radius:var(--radius-m,10px)}
@media (max-width:720px){.ph-links{margin-top:14px}}

/* swarm R54 home-marketing-story (idle audit 07:26): (1) The page title topped out at 72px while home and /about/ use
   76px (system H1), so the title changed size between the two company pages. Same clamp as /about/ now; phones keep
   their own size. (2) In the learner band the label and heading were centred against the taller chart, so at desktop
   they started about 100px below "Learner growth" over empty grid paper. Both columns now start at the top. */
.ph h1{font-size:clamp(40px,5.4vw,76px)}
@media (max-width:720px){.ph h1{font-size:clamp(34px,9.6vw,44px)}}
.net{align-items:start}

/* swarm R56 home-marketing-story (idle audit 1027-1219 #1 to #3).
   (1) The outbound arrow on the 14 timeline links was an 11px glyph at 65% opacity, easy to miss. It is now 12px in
   the link's full ink, and each link says "(opens in a new tab)" to screen readers (sr-only text in the markup).
   (2) The R38 min-height on each year's last month left 32px under 2023 but about 135px to 162px under the others, so
   the ends of the years looked uneven and about 230px of white sat before the learner band. The min-height is gone
   (every year now ends the same way). our-story.js keeps the R38 goal instead: a jump to one of a year's last
   milestones lands just low enough that the sticky year beside it stays fully in view.
   (3) At a glance on desktop: long years show their first 5 milestones and a "Show 9 more" text button (our-story.js),
   so the four columns are about the same height. The rest stay findable with Ctrl+F (hidden=until-found). Titles show
   a small down arrow on hover and keyboard focus, so they read as jumps into the timeline. */
.ev a[target="_blank"] .nw::after{width:12px;height:12px;opacity:1}
@media (min-width:1025px){.months>.mo:last-child{min-height:0}}
.ix-more{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:2px 0 0;padding:0 10px;margin-left:-10px;border:0;border-radius:var(--radius-m,10px);background:none;font:500 14.5px/1.3 var(--font);color:var(--ink);cursor:pointer;transition:background-color var(--dur-1,160ms) var(--ease,ease)}
.ix-more::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg}
.ix-more:hover{background:var(--soft-2)}
.ix-y li.ix-more-li{border-top:1px dashed var(--rule-dash);padding-top:6px}
@media (min-width:1025px){
  .ix-y li a{position:relative;padding-right:18px}
  .ix-y li a::after{content:"";position:absolute;right:2px;bottom:13px;width:10px;height:10px;background-color:var(--muted);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;translate:0 -2px;transition:opacity var(--dur-1,160ms) var(--ease,ease),translate var(--dur-2,240ms) var(--ease,ease)}
  .ix-y li a:hover::after,.ix-y li a:focus-visible::after{opacity:1;translate:0 0;background-color:var(--ink)}
  .ix-y li a:focus-visible{text-decoration:underline;text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.ix-more,.ix-y li a::after{transition:none}}
/* swarm R57 home-marketing-story: on tablets (721-1024px) the learner chart stacks under its heading at full width,
   but the 30-column dot grid stops at 420px, so its hairlines ran about 390px past the dots. Cap the figure so the
   rules end just past the chart, the same overhang as the desktop layout. */
@media (min-width:721px) and (max-width:1024px){.dots{max-width:640px}}
/* swarm R58 home-marketing-story: on hover the "At a glance" links underlined the small grey month ("May") as well as
   the milestone title, so each row looked like two links. An inline-block month is not reached by the link's
   underline, so only the title is underlined. Phones are unchanged (no hover there). */
@media (min-width:721px){.ix-y li a span{display:inline-block;width:100%;vertical-align:top}}
/* swarm R59 home-marketing-story (idle audits 1027-1929 #2 and 1027-1919 #1, R58 leftover).
   (1) "Show 9 more" / "Show 5 more" were 40px tall, under the site's 44px minimum. Now 44px, and once open the button
   reads "Show fewer" with its arrow pointing up (our-story.js).
   (2) From 1024px down the At a glance link is a month column beside the title, and a mouse hover underlined the month
   too. The month is now taken out of flow (absolute), which the link's underline does not reach. Same layout.
   (3) Phone facts: the three cells were 119, 126 and 105px wide, so the hairlines were uneven, and the numbers were
   22.6px. The cells are now equal and the numbers 24px, the largest that keeps "501(c)(3)" on one line at 360px. */
.ix-more{min-height:44px}
.ix-more[aria-expanded="true"]::after{rotate:225deg;margin-top:4px}
@media (max-width:1024px){
  .ix-y li a{display:flex;align-items:center;position:relative;padding-left:108px}
  .ix-y li a span{position:absolute;left:0;top:50%;translate:0 -50%;width:96px}
}
@media (max-width:720px){
  .ix-y li a{padding-left:96px}
  .ix-y li a span{width:84px}
  .facts div{flex:1 1 0;min-width:0;padding:4px 4px}
  .facts dt{font-size:24px}
}