/* 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)}
/* swarm R41: cap the title at 12.5em so it is two balanced lines at every width and in both the fallback font and Inter
   (at 721 to 1024 it was one line in Inter but two in the fallback, and the page jumped 44px when the font loaded) */
.ph h1{max-width:min(920px,12.5em)}
.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}

/* closing section without buttons (home final3 with type only) */
.final3 h2{max-width:720px}

@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}
}


/* ================= donate ================= */
html{scroll-padding-top:88px}
.give-sec{padding-bottom:112px}
.give{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.give-side{position:sticky;top:110px}
.give-side .h2{margin-top:0;font-size:clamp(30px,3vw,40px)}
/* the three "included" points: green check marks, the one place green belongs on this page */
.incl{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.incl li{display:flex;gap:12px;align-items:flex-start;font:400 16px/1.55 var(--font);color:var(--text)}
.incl svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--green)}
.ein{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font:400 14px/1.6 var(--font);color:var(--muted);max-width:420px}

/* monthly / one-time: underline tabs, like a real app */
.freq{display:flex;gap:24px;border-bottom:1px solid var(--line)}
.freq-b{height:44px;padding:0;border:0;background:none;font:500 15px/1 var(--font);color:var(--muted);cursor:pointer;box-shadow:none;transition:color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.freq-b:hover{color:var(--ink)}
.freq-b:active{scale:.98}
.freq-b[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.freq-b:focus-visible{outline-offset:2px;border-radius:var(--radius-s)}

/* tiers: hairline rows, name and words on the left, price and actions on the right */
.tiers{list-style:none;margin:0;padding:0}
.tier{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.tier[hidden]{display:none}
.tier h3{font:500 22px/1.25 var(--font);letter-spacing:-.02em}
.tier-sub{margin-top:4px;font:400 14.5px/1.4 var(--font);color:var(--muted)}
.tier-d{margin-top:10px;font:400 15.5px/1.6 var(--font);color:var(--text);max-width:440px}
.tier-a{display:flex;flex-direction:column;align-items:flex-end;gap:14px;min-width:200px}
.price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.price b{font:400 32px/1 var(--font);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.per{font:400 14px/1 var(--font);color:var(--muted)}
.tier-btns{display:flex;align-items:center;gap:16px}
.donate-b:active{scale:.98}
.ask-b{padding:8px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-s);background:none;font:500 14.5px/1.2 var(--font);color:var(--text);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity var(--dur-1) var(--ease),scale var(--dur-1) var(--ease)}
.ask-b:hover{color:var(--ink);text-decoration-color:var(--ink)}
.ask-b:active{opacity:.75;scale:.98}
.ask-b:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ask parent dialog: white sheet, hairline fields, near-black focus ring */
.ask{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--sheet);color:var(--text);box-shadow:var(--shadow-float);overflow:auto}
.ask::backdrop{background:color-mix(in srgb,var(--paper) 72%,transparent)}
.ask:focus{outline:none}
.ask-in{padding:36px 36px 32px}
.ask h2{font:500 26px/1.2 var(--font);letter-spacing:-.025em;color:var(--ink)}
.ask-in>p{margin-top:12px;font:400 15px/1.6 var(--font);color:var(--text)}
.ask-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px}
.ask fieldset{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column}
.ask legend{padding:0;font:500 15px/1.3 var(--font);color:var(--ink)}
.ask label{margin-top:16px;font:400 13.5px/1.3 var(--font);color:var(--muted)}
.ask input{height:44px;margin-top:6px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius-m);background:var(--sheet);font:400 15px/1 var(--font);color:var(--ink);outline:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.ask input::placeholder{color:var(--muted)}
.ask input:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}
.ask input[aria-invalid=true]{border-color:var(--coral)}
.ask .ask-copy{margin-top:20px;font-size:14px;color:var(--muted)}
.ask-copy span{color:var(--ink)}
/* before an email is typed the line read "sent to .": show a quiet stand-in instead of a gap */
.ask-copy span:empty::before{content:"your email";color:var(--muted)}
.ask-msg{margin-top:12px!important;min-height:1.4em;font:500 14.5px/1.4 var(--font)!important}
.ask-msg.err{color:color-mix(in srgb,var(--coral) 85%,var(--ink))!important}
.ask-msg.ok{color:var(--green-d)!important}
/* dialog footer (owner 2026-10-23): secondary outlined pill then primary black pill, right-aligned with a gap; focus ring only for the keyboard */
.ask-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}
.ask-btns .btn{min-width:112px}
.ask-btns .btn:focus:not(:focus-visible){outline:none}
.ask-btns .btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.ask-btns .btn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}

@media (max-width:1024px){
  .give{grid-template-columns:1fr;gap:48px}
  .give-side{position:static}
}
@media (max-width:720px){
  .give-sec{padding-bottom:72px}
  .tier{grid-template-columns:1fr;gap:18px;padding:24px 0}
  .tier-a{flex-direction:row;align-items:center;justify-content:space-between;min-width:0;flex-wrap:wrap}
  .price b{font-size:28px}
  .ask-in{padding:16px 16px 0}
  .ask h2{font-size:19px;line-height:1.2}
  .ask-in>p{margin-top:4px;font-size:13px;line-height:1.4}
  .ask-cols{grid-template-columns:1fr;gap:8px;margin-top:8px}
  .ask legend{font-size:13.5px;font-weight:500}
  .ask label{margin-top:5px;font-size:12.5px}
  .ask input{height:44px;margin-top:3px;font-size:16px}
  .ask .ask-copy{margin-top:8px;font-size:12.5px;line-height:1.35}
  .ask-msg{margin-top:4px!important;font-size:13px!important;min-height:1.3em}
  .ask-btns{flex-wrap:nowrap;border-top:1px solid var(--line);margin-top:8px;padding:8px 0 12px}
  .ask-btns .btn{flex:1 1 0;min-width:0;padding:0 14px;height:44px;min-height:44px}
}
/* green hint (owner 2026-10-21): the home page's hand-drawn swash under one headline word, plus the active Monthly / One-Time 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}
.freq-b[aria-pressed=true]{box-shadow:inset 0 -2px 0 var(--green)}

/* Dialogs fade and settle 4 px (DESIGN-PRINCIPLES, Motion). */
.ask[open]{animation:ask-open var(--dur-2) var(--ease-io) both}
@keyframes ask-open{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 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{transition:none!important}
  a:hover .go svg,.go:hover svg,a:hover .go.ext svg,.go.ext:hover svg{transform:none!important;translate:none!important;scale:none!important;rotate:none!important}
  .ask[open]{animation:none}
}
/* swarm R17/R28 home-marketing: the Ask Parent dialog is taller than a phone screen, so Close and Send Email stay pinned to the dialog's bottom edge on a single compact row without wrapping at 320px. */
.ask-btns{position:sticky;bottom:0;z-index:1;background:var(--sheet)}
.ask{scroll-padding-bottom:80px}
@media (max-width:720px){
  .ask{scroll-padding-bottom:76px}
  .ask-in{padding-bottom:0}
}
/* swarm R29: the field being fixed shows one signal, the site's green focus edge and ring (not a green ring around a coral edge); the other missing fields stay coral */
.ask input[aria-invalid=true]:focus{border-color:var(--green)}
/* swarm R30: "Ask Parent" was a 33px tall tap target; it now reaches 44px through padding, and the negative margin keeps the row exactly where it was */
.ask-b{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-6px -6px}
/* swarm R34: donate button reaches 44px minimum tap target to meet mobile touch guidelines */
.donate-b{min-height:44px;height:44px;display:inline-flex;align-items:center}
/* swarm R31: on one column (1024 and below) the donation tiers came after the three "included" points and the EIN note,
   so on a phone the Monthly / One-Time tabs started 941px down, below the first screen. The heading stays first,
   then the tiers, then what a gift covers and the EIN line. Headings balance so no word sits alone on its last line. */
.ph h1,.give-side .h2{text-wrap:balance}
@media (max-width:1024px){
  .give{row-gap:0}
  .give-side{display:contents}
  .give-main{order:1;margin-top:28px}
  .give-side .incl{order:2;margin-top:44px}
  .give-side .ein{order:3;max-width:none}
}
/* swarm R32: on touch screens a tapped "Send Email" kept its hover shade after the "Please fill out all fields" check,
   so the primary pill looked greyed out and disabled while the student fixed the fields. Touch keeps the rest colour. */
@media (hover:none){
  html .ask-btns .btn-primary:hover{background:var(--btn);box-shadow:none}
}
/* swarm R46: on phones the Ask Parent dialog was a floating box squeezed to fit one screen (13px body, 12.5px labels,
   5px gaps), so it read cramped. It is now a bottom sheet (pattern: iOS / Airbnb phone sheet): full width, anchored to the
   bottom, 16px top corners, a grab bar, readable sizes, and it scrolls under the pinned Close / Send Email row. */
@media (max-width:720px){
  .ask{width:100%;max-width:none;max-height:min(92dvh,calc(100dvh - 24px));margin:auto 0 0;border-width:1px 0 0;border-radius:var(--radius-l) var(--radius-l) 0 0}
  .ask-in{padding:28px 20px 0;position:relative}
  .ask-in::before{content:"";position:absolute;top:10px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:var(--radius-pill);background:var(--line-2)}
  .ask h2{font-size:22px;line-height:1.25}
  .ask-in>p{margin-top:10px;font-size:14.5px;line-height:1.55}
  .ask-cols{gap:20px;margin-top:20px}
  .ask legend{font-size:15px}
  .ask label{margin-top:12px;font-size:13.5px}
  .ask input{margin-top:6px}
  .ask .ask-copy{margin-top:16px;font-size:13.5px;line-height:1.5}
  .ask-msg{margin-top:8px!important;font-size:14px!important}
  .ask-btns{margin-top:12px;padding:12px 0 calc(16px + env(safe-area-inset-bottom))}
  .ask-btns .btn{height:48px;min-height:48px}
  .ask[open]{animation-name:ask-sheet}
}
/* swarm R52: one tier carries the black primary Donate but gave no reason. A quiet product chip names it
   (pattern: Stripe / Linear pricing "Recommended" tag), neutral ink on the soft shade, so green keeps its meaning. */
.tier-tag{display:inline-flex;align-items:center;height:24px;margin-left:8px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--soft-2);font:500 12.5px/1 var(--font);letter-spacing:0;color:var(--ink);vertical-align:4px;white-space:nowrap}
@keyframes ask-sheet{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}