/* ============================================================
   WarpedEDU — "Warm Scholar" design tokens & base styles
   Single hand-authored stylesheet, no framework. Mobile-first.
   Sections build up in later tasks (nav, hero, form, footer);
   tokens + type + primitives below are the foundation they use.
   ============================================================ */

/* ---- 1. Design tokens (Global Constraints — verbatim) ---- */
:root {
  --brand:#5A4FE3; --brand-deep:#3A2FB0; --brand-soft:#EDEBFC;
  --accent:#F4A261; --accent-deep:#E0873F;
  --bg:#FAF7F2; --surface:#FFFFFF; --ink:#1B1830; --ink-soft:#5A5670; --line:#E9E3D8;
  --p-events:#3DB4C5; --p-volunteer:#F2B441; --p-fundraising:#FF5C8A;
  --p-resources:#8E84FF; --p-surveys:#7FE6A5; --p-chat:#FF6A55;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-display:"Fraunces",Georgia,serif;
}
:root[data-theme="dark"] {
  --brand:#8B82F0; --brand-deep:#5A4FE3; --brand-soft:#232042;
  --bg:#0F0E1C; --surface:#171529; --ink:#ECEAF6; --ink-soft:#A6A2C0; --line:#2A2740;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:#8B82F0; --brand-deep:#5A4FE3; --brand-soft:#232042;
    --bg:#0F0E1C; --surface:#171529; --ink:#ECEAF6; --ink-soft:#A6A2C0; --line:#2A2740;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
.container { width:min(1120px,92vw); margin-inline:auto; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }

/* ---- 2. Supplemental tokens ----
   Fixed values that don't flip between themes: corner radii, card
   shadow, an easing curve for hover/press motion, and a constant
   "ink" for text sitting on the light-toned brand/accent fills
   below (see the dark-mode .btn note — --brand itself gets LIGHTER
   in dark mode, so white text on it fails AA at rest). */
:root {
  --radius-sm: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(27,24,48,.06), 0 14px 32px -18px rgba(27,24,48,.35);
  --ease: cubic-bezier(.4,0,.2,1);
  --brand-ink: #1B1830;
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- 3. Base element resets ---- */
img, picture, svg { max-width:100%; display:block; }
button, input, textarea, select { font:inherit; color:inherit; }
h1, h2, h3, p, ul, ol, figure { margin:0 0 1em; }
::selection { background:var(--brand-soft); color:var(--brand-deep); }

/* Single focus treatment, reused by every interactive element below —
   brand-colored so it reads as "on brand" rather than a generic browser
   default, and --brand contrasts >=5:1 against every ground it lands on
   (page bg, surface, card) in both themes. */
:focus-visible { outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---- 4. Typography scale ----
   Fraunces (display) only on display/h1/h2 for editorial warmth;
   Plus Jakarta Sans everywhere else, including h3 — it reads as a
   "sub-head" rather than another display line. */
h1, h2, .text-display {
  font-family:var(--font-display);
  font-optical-sizing:auto;
  color:var(--ink);
  font-weight:600;
}
.text-display, h1 { line-height:1.08; letter-spacing:-0.015em; }
.text-display { font-size:clamp(2.75rem, 2.05rem + 3vw, 4.75rem); }
h1 { font-size:clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem); }
h2 { font-size:clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem); font-weight:500; line-height:1.2; letter-spacing:0; }

h3 {
  font-family:var(--font-body);
  font-size:clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}

p { font-size:1.0625rem; line-height:1.65; }

.eyebrow {
  display:block;
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 .75em;
}

a {
  color:var(--brand);
  text-decoration-thickness:1.5px;
  text-underline-offset:.15em;
}
a:hover, a:focus-visible { text-decoration-thickness:2.5px; }

/* ---- 5. Layout primitives ---- */
.section { padding-block:clamp(3.5rem, 6vw, 6rem); }
.section + .section { border-top:1px solid var(--line); }

/* ---- 6. Buttons ---- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.875rem 1.75rem;
  border-radius:999px;
  border:2px solid transparent;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.btn:hover { background:var(--brand-deep); }
.btn:active { transform:translateY(1px); }

/* Dark theme's --brand is a lighter tint than light theme's (by design,
   for legibility against the dark ground) — white text on it dips to a
   measured ~3.2:1, below AA. Swap to --brand-ink at rest (~5.4:1) and
   back to white once the fill deepens to --brand-deep on hover (~5.7:1).
   Mirrored for both the explicit toggle state and the OS-preference
   fallback so it holds before any toggle click.

   CASCADE NOTE: these theme overrides carry higher specificity than the
   single-class variant rules below, so they are scoped with
   :not(.btn--accent):not(.btn--ghost) to the primary variant only —
   otherwise they'd force brand-ink onto ghost text in dark mode (~1.1:1)
   and white onto accent/ghost hover text (fails AA on both). Variant
   rules also restate color on :hover for the same reason. */
:root[data-theme="dark"] .btn:not(.btn--accent):not(.btn--ghost) { color:var(--brand-ink); }
:root[data-theme="dark"] .btn:not(.btn--accent):not(.btn--ghost):hover { color:#fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.btn--accent):not(.btn--ghost) { color:var(--brand-ink); }
  :root:not([data-theme="light"]) .btn:not(.btn--accent):not(.btn--ghost):hover { color:#fff; }
}

/* --accent/--accent-deep don't change between themes, so a single fixed
   ink text color is correct everywhere (measured ~8.4:1 rest / ~6.3:1
   hover) — no theme override needed. */
.btn--accent { background:var(--accent); color:var(--brand-ink); }
.btn--accent:hover { background:var(--accent-deep); color:var(--brand-ink); }

/* Ghost keeps var(--brand) text in every state — measured ~5.4/4.9:1
   (light rest/hover) and ~6.0/4.8:1 (dark rest/hover). */
.btn--ghost { background:transparent; border-color:var(--brand); color:var(--brand); }
.btn--ghost:hover { background:var(--brand-soft); color:var(--brand); }

/* ---- 7. Card ---- */
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  box-shadow:var(--shadow-card);
}

/* ============================================================
   8. Skip link — first focusable stop, off-screen until focused.
   ============================================================ */
.skip-link {
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  padding:.7rem 1.1rem; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700;
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform .18s var(--ease);
}
.skip-link:focus-visible { transform:none; }

/* ============================================================
   9. Site header + primary nav
   Sticky and transparent while it floats over the hero, then a
   blurred, hairline-ruled surface bar once the page scrolls
   (.is-scrolled toggled in site.js). Reduced-motion users still
   get the state change — only the transition is dropped globally.
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), backdrop-filter .25s var(--ease);
}
.site-header.is-scrolled {
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
}
.nav {
  display:flex; align-items:center; gap:1rem;
  min-height:4.25rem;
  padding-block:.65rem;
}

/* ---- Wordmark (inline SVG; letters inherit currentColor so they flip
   with the theme, amber warp-swash stays literal — echoing the hero's
   hand-drawn underline). Reused verbatim in the footer at a larger size. ---- */
.wordmark {
  display:inline-flex; align-items:center;
  margin-right:auto; line-height:0;
  color:var(--ink); text-decoration:none;
}
.wordmark svg { height:1.7rem; width:auto; display:block; }
.wordmark:hover, .wordmark:focus-visible { text-decoration:none; }
/* a whisper of lift on hover so it reads as the clickable home link */
.wordmark:hover svg { opacity:.85; }

/* ---- Nav menu (inline on desktop, sheet on mobile) ---- */
.nav__menu {
  display:flex; align-items:center; gap:.35rem;
}
.nav__link {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:.5rem .85rem; border-radius:999px;
  font-weight:600; font-size:.95rem;
  color:var(--ink); text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav__menu a:not(.btn):hover,
.nav__menu a:not(.btn):focus-visible {
  color:var(--brand); background:var(--brand-soft); text-decoration:none;
}
.nav__cta { margin-left:.5rem; min-height:44px; padding:.6rem 1.15rem; font-size:.95rem; }

/* ---- Header action buttons ---- */
.nav__actions { display:flex; align-items:center; gap:.5rem; }
.icon-button {
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  cursor:pointer; display:grid; place-items:center; font-size:1.15rem; line-height:1;
  box-shadow:var(--shadow-card);
  transition:transform .15s var(--ease), background-color .2s var(--ease);
}
.icon-button:hover { transform:translateY(-1px); background:var(--brand-soft); }

/* ---- Hamburger (mobile only) ---- */
.nav-toggle {
  display:none;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
  place-items:center;
  box-shadow:var(--shadow-card);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content:""; display:block;
  width:18px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars { position:relative; }
.nav-toggle__bars::before { position:absolute; top:-6px; }
.nav-toggle__bars::after  { position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top:0; transform:rotate(-45deg); }

/* ============================================================
   10. Hero — v2 cluster + chips wearing v3's editorial headline.
   ============================================================ */
.hero {
  position:relative;
  min-height:100svh;
  display:grid; align-items:center;
  padding-block:clamp(3.5rem, 7vh, 5.5rem);
  overflow:hidden;
}
/* ambient wash so the cluster sits in warm brand/accent light */
.hero::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 78% 34%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(38% 46% at 92% 88%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%);
}
.hero__grid {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.02fr 0.98fr;
  align-items:center;
  gap:clamp(1.5rem, 3.5vw, 4rem);
}

/* ---- Copy ---- */
.hero__copy { max-width:33rem; }
.hero__title {
  font-family:var(--font-display);
  font-optical-sizing:auto; font-weight:600;
  font-size:clamp(2.6rem, 1.7rem + 2.9vw, 3.9rem);
  line-height:1.03; letter-spacing:-0.025em;
  text-wrap:balance;
  margin:0 0 1.1rem;
}
/* hand-drawn amber underline flourish under "easiest" (from v3) */
.hl { position:relative; display:inline-block; white-space:nowrap; }
.hl > svg {
  position:absolute; left:-3%; bottom:-0.2em; width:106%; height:0.34em;
  overflow:visible; pointer-events:none;
}
.hl > svg path {
  fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
}
@media (prefers-reduced-motion:no-preference) {
  .hl > svg path { animation:draw 1s var(--ease) .35s forwards; }
}
@media (prefers-reduced-motion:reduce) { .hl > svg path { stroke-dashoffset:0; } }
@keyframes draw { to { stroke-dashoffset:0; } }

.hero__sub {
  color:var(--ink-soft);
  font-size:clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  line-height:1.6; max-width:38ch; margin:0 0 1.9rem;
}
.hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem; }
.beta {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.9rem; font-weight:600; color:var(--ink-soft); margin:0;
}
.beta__dot {
  width:9px; height:9px; border-radius:999px; background:var(--p-surveys);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--p-surveys) 22%, transparent);
}
@keyframes betapulse {
  0%,100% { box-shadow:0 0 0 4px color-mix(in srgb, var(--p-surveys) 22%, transparent); }
  50%     { box-shadow:0 0 0 7px color-mix(in srgb, var(--p-surveys) 6%, transparent); }
}
@media (prefers-reduced-motion:no-preference) { .beta__dot { animation:betapulse 2.6s var(--ease) infinite; } }

/* ---- Staggered 3-phone cluster ---- */
.cluster {
  position:relative;
  width:100%; aspect-ratio:1 / 0.96;
  max-width:560px; margin-inline:auto;
}
/* Shared phone bezel — the dark frame look, reused by the hero
   cluster and the flagship proof rail (§14). Positioning stays with
   each caller; only the bezel itself is generalized here. */
.device-frame, .device {
  border-radius:36px; padding:7px;
  background:linear-gradient(158deg, #33333c, #101015 55%, #26262d);
}
.device-frame img, .device img { width:100%; height:auto; border-radius:30px; display:block; }
.device { position:absolute; }
/* back-left — the clean board hub, tucked behind, cooler */
.device--board {
  width:41%; left:0; top:6%; transform:rotate(-9deg); z-index:1;
  box-shadow:0 26px 50px -26px rgba(15,14,28,.55);
  filter:saturate(.96) brightness(.99);
}
/* centre — flagship home, largest, the anchor */
.device--home {
  width:52%; left:24%; top:0; transform:rotate(-2deg); z-index:2;
  box-shadow:0 34px 66px -28px color-mix(in srgb, var(--brand) 45%, rgba(15,14,28,.6));
}
/* front-right — the vibrant fundraiser, popped forward */
.device--fund {
  width:44%; right:-1%; top:30%; transform:rotate(6deg); z-index:3;
  box-shadow:0 34px 60px -24px color-mix(in srgb, var(--p-fundraising) 42%, rgba(15,14,28,.55));
}

/* ---- Floating pillar chips ---- */
.chips { position:absolute; inset:0; z-index:4; pointer-events:none; }
.chip {
  position:absolute; z-index:4; pointer-events:auto;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .95rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 12px 26px -12px rgba(15,14,28,.4);
  font-size:.85rem; font-weight:700; color:var(--ink);
  white-space:nowrap;
}
.chip .dot {
  width:10px; height:10px; border-radius:999px;
  background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent);
}
.chip--events { top:-4%; left:19%;  --c:var(--p-events); }
.chip--fund   { top:9%;  right:-6%; --c:var(--p-fundraising); }
.chip--chat   { bottom:15%; left:-7%; --c:var(--p-chat); }
.chip--vol    { top:37%; left:64%;  --c:var(--p-volunteer); }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@media (prefers-reduced-motion:no-preference) {
  .chip { animation:floaty 5s var(--ease) infinite; }
  .chip--fund { animation-delay:.6s; } .chip--chat { animation-delay:1.2s; } .chip--vol { animation-delay:1.8s; }
}

/* ============================================================
   11. Footer — a quiet brand block beside three tidy link
   columns, closed by a hairline-ruled legal line. Sits on a
   faint brand-soft tint so it reads as a distinct footing rather
   than one more content section.
   ============================================================ */
.site-footer {
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--brand-soft) 45%, var(--bg));
  padding-block:clamp(2.75rem, 5vw, 4rem);
}
.site-footer__inner {
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem clamp(1.5rem, 3vw, 3rem);
}
@media (min-width:560px) {
  .site-footer__inner { grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:900px) {
  .site-footer__inner { grid-template-columns:1.6fr 1fr 1fr 1.15fr; }
}

/* -- Brand block -- */
.footer-brand { max-width:24rem; }
.footer-brand .wordmark { margin:0 0 1.05rem; }
.footer-brand .wordmark svg { height:1.95rem; }
.footer-tagline {
  margin:0 0 1.1rem;
  color:var(--ink-soft); font-size:.95rem; line-height:1.55;
}
.footer-parent {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; font-weight:600;
  color:var(--ink-soft); text-decoration:none;
}
.footer-parent:hover, .footer-parent:focus-visible { color:var(--brand); text-decoration:underline; }
.footer-parent strong { font-weight:700; color:var(--ink); }
.footer-parent:hover strong { color:var(--brand); }

/* -- Link columns -- */
.footer-col__title {
  margin:0 0 1rem;
  font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
}
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-link {
  color:var(--ink-soft); text-decoration:none;
  font-size:.95rem; line-height:1.4;
}
.footer-link:hover, .footer-link:focus-visible { color:var(--brand); text-decoration:underline; }
/* external-destination cue — decorative, so the arrow is aria-hidden in markup */
.footer-link__ext { margin-left:.32em; font-size:.85em; opacity:.7; }
.footer-email {
  font-weight:700; color:var(--ink);
  text-decoration:none; font-size:1.0625rem;
}
.footer-email:hover, .footer-email:focus-visible { color:var(--brand); text-decoration:underline; }
.footer-contact__note { margin:.85rem 0 0; font-size:.8125rem; color:var(--ink-soft); line-height:1.5; }

/* -- Legal line -- */
.site-footer__legal {
  margin-top:clamp(2.25rem, 4vw, 3rem);
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.site-footer__legal p { margin:0; font-size:.8125rem; color:var(--ink-soft); line-height:1.5; }

/* ============================================================
   12. Responsive — nav collapses to a sheet; hero cluster
   degrades to a pill row + single flagship phone (from v2).
   ============================================================ */
@media (max-width:880px) {
  .nav-toggle { display:grid; }
  .nav__menu {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.25rem;
    padding:1rem clamp(1rem, 4vw, 2rem) 1.25rem;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-card);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  }
  .nav__menu.is-open { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav__link { padding:.7rem .85rem; font-size:1.02rem; }
  .nav__cta { margin:.35rem 0 0; width:100%; }
}

@media (max-width:900px) {
  .hero { min-height:0; padding-block:clamp(3rem, 6vh, 4rem) 0; }
  .hero__grid { grid-template-columns:1fr; gap:1.5rem; text-align:center; justify-items:center; }
  .hero__copy { max-width:40rem; }
  .hero__sub { max-width:44ch; margin-inline:auto; }
  .hero__cta { justify-content:center; }
  .beta { justify-content:center; }
  /* the collage can't survive 360px — degrade to a tidy pill row + one flagship phone */
  .cluster { display:flex; flex-direction:column; align-items:center; width:100%; max-width:none; aspect-ratio:auto; }
  .chips { order:-1; position:static; display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-bottom:1.25rem; }
  .chip { position:static; font-size:.82rem; padding:.5rem .9rem; animation:none; }
  .device { position:static; }
  .device--board, .device--fund { display:none; }
  .device--home {
    transform:none; width:min(74vw, 288px);
    box-shadow:0 30px 60px -28px color-mix(in srgb, var(--brand) 40%, rgba(15,14,28,.55));
  }
}

@media (max-width:430px) {
  .hero__cta .btn { width:100%; }
}

/* ============================================================
   13. Section head — shared eyebrow + h2 + intro lead-in used by
   content sections (flagship, and future sections). Left-aligned
   editorial block with a readable measure.
   ============================================================ */
.section-head { max-width:46rem; margin-bottom:clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin:0 0 .65rem; }
.section-head__intro {
  color:var(--ink-soft);
  font-size:clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height:1.6; max-width:40ch; margin:0 0 1.1rem;
}
/* the "in beta" note reuses .beta / .beta__dot from the hero (§10) */

/* ============================================================
   14. Flagship (#app) — pillar feature grid + swipeable proof rail.
   Each card carries its category accent (--pc) on a soft icon chip,
   echoing the app's own colour-coded feature language.
   ============================================================ */

/* -- Pillar feature grid: auto-fit lands exactly 1 / 2 / 3 columns
   at 320 / 768 / 1280 within the 1120px container (four 17.5rem
   tracks never fit, so three is the ceiling). -- */
.feature-grid {
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap:1.15rem;
}
.feature { padding:1.5rem; }
.feature__title { margin:0 0 .4rem; }
.feature__desc { margin:0; color:var(--ink-soft); font-size:.975rem; line-height:1.55; }

/* Soft category chip. Chip fill mixes --pc toward the surface; the
   glyph mixes --pc toward --ink. Because --surface and --ink flip with
   the theme, the glyph is always pushed away from the chip's lightness.
   Ratios (browser-computed, sRGB): glyph-vs-chip clears 3:1 for every
   pillar in BOTH themes and states — light floor 3.24 (surveys, hover),
   dark floor 6.10; see task-8 report for the full table. The 60% mix is
   the vibrancy/legibility balance point: pale accents (surveys, gold)
   need the deepening; more --pc would drop them under 3:1 in light. */
.feature__icon {
  width:2.75rem; height:2.75rem; border-radius:13px;
  display:grid; place-items:center; margin-bottom:1.1rem;
  background:color-mix(in srgb, var(--pc) 15%, var(--surface));
  color:color-mix(in srgb, var(--pc) 60%, var(--ink));
  transition:background-color .25s var(--ease);
}
.feature__icon svg {
  width:1.55rem; height:1.55rem;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Lift + pillar-tinted glow on hover; the chip deepens in sympathy. */
.feature {
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feature:hover {
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--pc) 42%, var(--line));
  box-shadow:0 1px 2px rgba(27,24,48,.06),
             0 22px 44px -22px color-mix(in srgb, var(--pc) 60%, rgba(27,24,48,.42));
}
.feature:hover .feature__icon { background:color-mix(in srgb, var(--pc) 22%, var(--surface)); }

/* Column-wise reveal stagger (dropped under reduced-motion via the
   global transition:none rule in §1). */
.feature-grid > .feature:nth-child(3n+2) { transition-delay:.08s; }
.feature-grid > .feature:nth-child(3n+3) { transition-delay:.16s; }
/* At the 2-column range (this grid's auto-fit lands 2-up roughly 650–950px
   viewport width), the 3-up stagger above repeats out of phase with rows —
   row 2's left card (3n+3) ends up delayed more than its right neighbor
   (3n+2). Override to a plain column-wise (odd/even) stagger in that range
   only; source order (after the base rules) breaks the specificity tie. */
@media (min-width:640px) and (max-width:959px) {
  .feature-grid > .feature:nth-child(2n+1) { transition-delay:0s; }
  .feature-grid > .feature:nth-child(2n) { transition-delay:.08s; }
}

/* Per-card pillar accents */
.feature--home      { --pc:var(--brand); }
.feature--events    { --pc:var(--p-events); }
.feature--announce  { --pc:var(--p-chat); }
.feature--news      { --pc:var(--accent); }
.feature--fund      { --pc:var(--p-fundraising); }
.feature--volunteer { --pc:var(--p-volunteer); }
.feature--chat      { --pc:var(--p-chat); }
.feature--surveys   { --pc:var(--p-surveys); }
.feature--resources { --pc:var(--p-resources); }

/* -- "And a few more" strip: lighter than full cards, dashed rule -- */
.feature-more {
  margin-top:1.5rem; padding-top:1.4rem;
  border-top:1px dashed var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem 1.75rem;
}
.feature-more__label {
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.feature-more__list {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem;
}
.feature-more__item {
  display:flex; align-items:center; gap:.55rem;
  font-size:.95rem; color:var(--ink-soft);
}
.feature-more__item strong { color:var(--ink); font-weight:700; }
/* Per-item pillar accents (matching the .chip--events pattern in §10) —
   replaces inline style="--pc:var(...)" attributes previously on these items. */
.feature-more__item--wishlists { --pc:var(--p-fundraising); }
.feature-more__item--sponsors  { --pc:var(--p-volunteer); }
.feature-more__item--theming   { --pc:var(--brand); }
.feature-more__dot {
  flex:none; width:9px; height:9px; border-radius:999px; background:var(--pc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pc) 18%, transparent);
}

/* -- Proof rail: a horizontal scroll-snap strip of real screenshots
   in phone frames. Scrolls only within itself — never the body. -- */
.proof { margin-top:clamp(2.75rem, 5vw, 3.75rem); }
.proof__hint {
  font-size:.85rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink-soft); margin:0 0 1rem;
}
.proof__rail {
  display:flex; gap:clamp(1rem, 3vw, 1.75rem);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:.75rem .25rem 1.5rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--ink) 22%, transparent) transparent;
  /* soft edge fade so cards dissolve at the rail's margins */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.proof__item {
  flex:0 0 auto; scroll-snap-align:center;
  width:clamp(196px, 60vw, 244px);
  margin:0;
}
.proof__item .device-frame {
  box-shadow:0 26px 50px -26px rgba(15,14,28,.5);
}
.proof__caption {
  margin:.9rem 0 0; text-align:center;
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
}

/* -- Section-closing CTAs -- */
.app-cta {
  display:flex; flex-wrap:wrap; gap:.8rem;
  margin-top:clamp(2.25rem, 4vw, 3rem);
}

/* ============================================================
   15. Mission (#why) — editorial two-column statement.
   Heading column set against a wider prose column; the opening
   sentence is a larger, inked "lead" for hierarchy.
   ============================================================ */
.mission-grid { display:grid; grid-template-columns:1fr; gap:clamp(1.25rem, 3vw, 2rem); }
.mission-grid__head h2 { margin:0; text-wrap:balance; }
.mission-grid__body p:last-child { margin-bottom:0; }
.mission-grid__body p { color:var(--ink-soft); }
.mission-lead {
  font-size:clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  line-height:1.5; color:var(--ink); font-weight:500;
  text-wrap:pretty;
}
@media (min-width:768px) {
  .mission-grid {
    grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap:clamp(2.5rem, 5vw, 4.5rem);
    align-items:start;
  }
}

/* ============================================================
   16. Flagship + mission — narrow-screen tuning
   ============================================================ */
@media (max-width:520px) {
  .app-cta .btn { width:100%; }
  .feature-more { gap:.75rem 1rem; }
}

/* ============================================================
   17. Who it's for (#who-for) — asymmetric 3:2 grid. The board
   card is visually weighted (accent top-rule, carries the CTA);
   the parent card stays quiet, a plain .card beside it. Both
   stretch to equal height so each CTA/closing line sits flush
   at the bottom.
   ============================================================ */
.audience-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem, 3vw, 2rem);
  align-items:stretch;
}
@media (min-width:768px) {
  .audience-grid { grid-template-columns:3fr 2fr; }
}

.audience-card { display:flex; flex-direction:column; height:100%; }
.audience-card--board {
  border-top:4px solid var(--accent);
  padding-top:calc(1.75rem - 3px);
}

.audience-card__badge {
  display:inline-flex; align-self:flex-start;
  padding:.35rem .85rem; border-radius:999px;
  font-size:.8125rem; font-weight:700; letter-spacing:.01em;
  margin-bottom:1rem;
}
/* --accent-deep alone reads fine on dark surfaces but drops to ~2.7:1 on
   the near-white light-mode card (fails both 4.5:1 text and 3:1 graphical) —
   same fix as the feature icon glyphs in §14: mix toward --ink so the color
   is pushed away from the card surface's own lightness in both themes. */
.audience-card__badge--board { background:color-mix(in srgb, var(--accent) 20%, var(--surface)); color:color-mix(in srgb, var(--accent) 45%, var(--ink)); }
/* --brand alone on --brand-soft measured ~4.83:1 in dark mode — barely over
   the 4.5:1 floor. Same toward-ink mix as the board badge above: pushes the
   color away from the badge's own lightness in both themes (dark's --ink is
   light, so this lightens; light's --ink is dark, so it deepens slightly),
   re-measured >=5.5:1 in both themes (dark ~6.0:1, light ~6.2:1). */
.audience-card__badge--parents { background:var(--brand-soft); color:color-mix(in srgb, var(--brand) 80%, var(--ink)); }

.audience-card__title { margin:0 0 .9rem; }

.audience-list { list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.audience-list__item { display:flex; align-items:flex-start; gap:.65rem; font-size:.975rem; line-height:1.5; color:var(--ink-soft); }

/* board list: checkmark glyph, tinted with the CTA's accent color */
.audience-list__icon { flex:none; width:1.3rem; height:1.3rem; margin-top:.15rem; color:color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.audience-list__icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* parent list: a colored dot per capability, reusing the feature
   grid's own pillar tokens (§14) so RSVP/volunteer/donate/chat map
   to the same colors those categories wear there. */
.audience-list__dot {
  flex:none; width:9px; height:9px; margin-top:.5rem; border-radius:999px;
  background:var(--pc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pc) 20%, transparent);
}
.audience-list__dot--events     { --pc:var(--p-events); }
.audience-list__dot--volunteer  { --pc:var(--p-volunteer); }
.audience-list__dot--fund       { --pc:var(--p-fundraising); }
.audience-list__dot--chat       { --pc:var(--p-chat); }

.audience-note { margin:0; font-style:italic; color:var(--ink-soft); }
.audience-cta { margin-top:auto; padding-top:.25rem; }

/* ============================================================
   18. Trust (#trust) — a compact honest-signal row on a
   brand-soft tint band, so its rhythm reads differently from the
   plain sections around it. Icons sit in a surface-colored chip so
   they read as a floating signal, not a category (unlike the
   pillar-colored feature icons in §14 — these four claims are
   equally weighted, not a taxonomy).
   ============================================================ */
.section--tint { background:var(--brand-soft); }

.trust-row {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:1.75rem;
}
@media (min-width:600px) { .trust-row { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1040px) { .trust-row { grid-template-columns:repeat(4, 1fr); gap:1.5rem; } }

.trust-item { display:flex; flex-direction:column; gap:.6rem; }
.trust-item__icon {
  width:2.5rem; height:2.5rem; border-radius:12px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--brand);
  box-shadow:var(--shadow-card);
}
.trust-item__icon svg { width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.trust-item__title { margin:0; font-family:var(--font-body); font-size:1rem; font-weight:700; color:var(--ink); }
.trust-item__desc { margin:0; font-size:.925rem; line-height:1.55; color:var(--ink-soft); }

/* ============================================================
   19. What's next (#whats-next) — the one section on the page
   that isn't a grid: a quiet, centered umbrella statement between
   the honest-signal row and the studio bio.
   ============================================================ */
.next-block { max-width:38rem; margin-inline:auto; text-align:center; }
.next-block h2 { text-wrap:balance; }
.next-block p { color:var(--ink-soft); }
.next-cta { display:flex; justify-content:center; margin-top:1.5rem; }

/* ============================================================
   20. About (#about) — quiet editorial closer: a narrow single
   column (no grid, no cards) so it reads calmer than every
   section before it, with a small signature line as its one
   personal touch.
   ============================================================ */
.about-copy { max-width:38rem; }
.about-copy p { color:var(--ink-soft); }
.about-sig {
  margin:1.25rem 0 0;
  font-family:var(--font-display); font-style:italic;
  color:var(--ink-soft); font-size:1.05rem;
}

/* ============================================================
   21. Who it's for / Trust / What's next / About — narrow-screen
   tuning.
   ============================================================ */
@media (max-width:520px) {
  .audience-cta .btn, .next-cta .btn { width:100%; }
}

/* ============================================================
   22. Contact (#contact) — the page's primary conversion moment.
   A warm intro beside a form card, sitting on a quiet ambient wash
   that mirrors the hero's radial glow (§10) from the opposite
   corner — the one deliberate visual callback that bookends the
   page, rather than a new decorative device.
   ============================================================ */
.section--contact { position:relative; overflow:hidden; }
.section--contact::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 60% at 12% 14%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    radial-gradient(44% 58% at 90% 86%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 70%);
}
.contact-grid {
  position:relative; z-index:1;
  display:grid;
  gap:clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width:860px) {
  .contact-grid { grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr); align-items:start; }
}

.contact-intro { max-width:30rem; }
.contact-intro h2 { text-wrap:balance; }
.contact-intro__lead {
  color:var(--ink-soft);
  font-size:clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height:1.6; margin:0 0 1.4rem;
}
/* .beta / .beta__dot reused verbatim from the hero (§10) */

/* -- Form card -- */
.contact-form { padding:clamp(1.75rem, 3vw, 2.5rem); }

.form-row {
  display:grid; grid-template-columns:1fr;
  gap:0 1rem;
}
@media (min-width:480px) { .form-row { grid-template-columns:1fr 1fr; } }

.form-field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.35rem; }
.form-field label { font-weight:600; font-size:.95rem; }
.form-field__optional { font-weight:400; color:var(--ink-soft); }

/* Inputs sit a shade darker/lighter than the card's own --surface
   (both draw from --bg), reading as a recessed "well" against the
   card in both themes without any extra color token. */
.form-field input, .form-field select, .form-field textarea {
  width:100%; min-height:2.75rem; /* >=44px so touch targets clear the a11y floor */
  padding:.7rem .9rem;
  border-radius:var(--radius-sm);
  /* --line alone measures ~1.2:1 against --bg in both themes (it's built
     for hairline dividers between similarly-toned surfaces, not a
     standalone control boundary) — mixing in --ink pushes it away from
     --bg's own lightness so the well reads as a real boundary (>=3:1,
     WCAG 1.4.11) without it looking like a heavy, un-brand-like box. */
  border:1.5px solid color-mix(in srgb, var(--ink) 45%, var(--line));
  background:var(--bg);
  color:var(--ink);
  font-size:1rem; /* >=16px: keeps iOS Safari from zooming in on focus */
  line-height:1.3;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field textarea { min-height:8.5rem; resize:vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color:var(--ink-soft); opacity:.75; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover {
  border-color:color-mix(in srgb, var(--brand) 35%, var(--line));
}
/* :focus-visible outline is the shared global treatment (§3); this just
   also deepens the border itself so the "well" reads focused at a glance. */
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  border-color:var(--brand);
}

/* Honeypot: clipped to 1px and taken out of both the tab order (via the
   [tabindex="-1"] in the markup) and the a11y tree (via [aria-hidden]) —
   deliberately NOT display:none, since some bots skip hidden/display:none
   fields but still fill in a "visually hidden" one. */
.visually-hidden {
  position:absolute!important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.contact-form__note { font-size:.875rem; color:var(--ink-soft); margin:-.25rem 0 1.5rem; }

.contact-form__actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.1rem; }
.contact-form__status { margin:0; font-size:.95rem; font-weight:600; color:var(--ink-soft); min-height:1.4em; }

@media (max-width:520px) {
  .contact-form__actions .btn { width:100%; }
}

/* ============================================================
   23. Utility pages (privacy/terms/404) — a page-head title block,
   a narrow "prose" column for plain-language policy copy, and the
   404 moment itself. All three lean on tokens/primitives already
   defined above (section, container, eyebrow, card type scale)
   rather than a parallel system built just for these three pages.
   ============================================================ */

/* -- Title block: eyebrow + h1 + a small effective-date line,
   same rhythm as .section-head (§13) but built for an h1. -- */
.page-head { max-width:46rem; margin-bottom:clamp(2rem, 4vw, 3rem); }
.page-head h1 { margin:0 0 .5rem; }
.page-head__meta { margin:0; color:var(--ink-soft); font-size:.95rem; }

/* -- Prose: a readable measure for running policy copy. Headings
   keep the global Fraunces h2 look; only spacing is added here. -- */
.prose { max-width:70ch; }
.prose h2 { margin:2.25rem 0 .65rem; }
.prose h2:first-child { margin-top:0; }
.prose p, .prose li { color:var(--ink-soft); }
.prose ul, .prose ol { margin:0 0 1em; padding-left:1.3rem; }
.prose li { margin-bottom:.5em; line-height:1.6; }
.prose li:last-child { margin-bottom:0; }
.prose li::marker { color:var(--accent-deep); }
.prose strong { color:var(--ink); }
.prose a { font-weight:600; }

/* -- 404: a single quiet, centered moment between header and
   footer. The headline reuses the hero's hand-drawn amber .hl
   underline (§10) verbatim on "not found" — the one deliberate
   callback, rather than a new illustration built just for this
   page. -- */
.notfound { min-height:56vh; display:flex; align-items:center; }
.notfound__inner { max-width:36rem; margin-inline:auto; text-align:center; }
.notfound__line {
  color:var(--ink-soft);
  font-size:clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height:1.6;
  margin:0 0 2rem;
}
@media (max-width:520px) { .notfound__inner .btn { width:100%; } }